gift.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#top_container{

    display: flex;
    height: 600px;
    
    width: 100%;
    /* border: 3px solid red; */
    margin: auto;
}

#top_container> div{
    height: 100%;
    width: 100%;
    /* border: 2px solid black; */
}

/* Mini box  */
#top_container> div >div{
  margin: 150px 60px 50px 60px;
         /* top/right/bottom/left */
   /* background-color: red; */

}

.topImg{
    width: 100%;
    height: 100%;
}
h1{
  width: 70%;
    color: #333;
    font-size: 3rem;
    line-height: 1.08em;
    font-weight: 700;
    /* font-family: 'Poppins', sans-serif; */
    font-family: Favoritfreshly,sans-serif;
}

 h1~p{
   
    margin: 20px 0 25px;
    /* border: 1px solid red; */
    font-size: 16px;
    font-weight: bold;
    font-family: Favoritfreshly,sans-serif;
    
 }

 #blueBtn{
     padding: 13px 30px 12px;  
            /* top | horizontal | bottom */
     background-color: #3167ff;
     color: #fff;
     font-size: 18px;
     border: none;
 }
 #whiteBtn{
     margin-bottom: 30px;
     padding:13px 30px 12px;
     margin-left: 10px;
     font-size: 18px;
     color: #3167ff;
     background-color: #fff;
     border: 1px solid #3167ff;
     
 }

 /* Mid Section or Mid_Container  */

 #mid_container{
     display: grid;
     grid-template-columns: repeat(3,1fr);
     grid-template-rows: repeat(1,350px);
     /* border: 1px solid red; */
     width: 90%;
     margin: auto;
   
    
    
 }
 
 .midImg{

   width: 90%;
    display: flex;
    justify-content: center;
    margin: auto;
  
 }
 h4{
     text-align: center;
     margin: auto;
     
  
 }
 p{
     width: 90%;
     margin: auto;
     line-height: 25px;
 }

 #mid_heading{
  display: flex;
   justify-content: center;
   width: 90%;
   margin: auto;
   font-size: 2.375rem;
   font-family: Favoritfreshly,sans-serif;
   margin-top: 30px;
   margin-bottom: 30px;
 }
 #last_Mid_heading{
    display: flex;
    justify-content: center;
    width: 90%;
    margin: auto;
    font-size: 2.375rem;
    font-family: Favoritfreshly,sans-serif;
   border: 1px solid red;
   padding-top: 0px;
    


 }
.mid_img{
  
    width: 50%;
    height: 50%;
   
   
}
h4 {

    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.5rem;
    line-height: 1.25em;
    font-weight: 700;
 
}

/* IInd Mid section  */

.mid_p{
    width: 45%;
    margin:auto;
    text-align: center;
    margin-bottom: 40px;
}
.lower_p{
    margin:auto;
    text-align: center;
    margin-bottom: 40px;
}
#lowerImg{
    border: 2px solid black;
    border: 0.1;
    width: 100%;
    background-image: url(https://assets-global.website-files.com/5d03b4e130118314af624b20/61f12af4f52ee03d406532a2_22_Gifts_GiftofChoice_BG_1440%20x%20890.jpg);
}
#gridContainer{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,auto);
    /* border: 2px solid purple; */
    height: 500px;
    gap: 20px;
    width: 80%;
    margin: auto;
}
#gridContainer > div{
    /* border: 2px solid yellow; */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
}
h5{
    font-family: Favoritfreshly,sans-serif;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
}
.gridImg{
    width: 100%;
}
#whiteBox{
    width: 80%;
    margin: auto;
    background-color: #fff;
    margin-top: 60px;
    margin-bottom: 60px;

}
#bottom_blueBtn{
    padding: 13px 30px 12px;  
    /* top | horizontal | bottom */
background-color: #3167ff;
color: #fff;
font-size: 18px;

margin-top: 30px;
margin-bottom: 30px;

border: none;
}

  .midh3{

    padding-top: 30px;
  }











  
.nav_top{
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    height: 2rem;
    
}
.nav_top_logo1{
    cursor: pointer;
    width: 6.6875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom:2px solid  #03514e ;
    }
.nav_top_logo2{
    width: 8.8125rem;
    cursor: pointer;
    display: flex;
    align-items:center;
    justify-content: flex-start;
}
.nav_top_logo1>img{
    width: 44.285%;
}
.nav_top_logo2>img{
    width: 60%;
    padding-left: 1.75rem;
}





.nav_bottom{
    background-color: #fffdf7;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    z-index: 99999999;
    top:0
}
.nav_container_div{
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fffdf7;
    
    margin: auto;
    /* margin: 0px .59rem; */
    font-weight: 700;
    padding-left: 1.25rem;
    padding-right: 1.25rem;

}
.nav_links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: auto;
    text-align: left;
    /* font-weight: 700; */
    font-size: .875rem;
    
}
.nav_links>a{
    text-decoration: none;
color: #303030;
padding: 0 1rem;
}
.nav_links>a:hover{

    color: #3167fa;

}
.nav_logo>img{
    height: 1.5rem;
    width: 6.6875rem;

}
.nav_left{
    display: flex;
    
    justify-content: space-between;
    align-items: center;
 
}
.nav_left>button{
    width: 5.04rem;
  
    height:2.08rem; 
    font-weight: 550;
    border:none;
    font-size: 1rem;
 }
.nav_left>button:nth-child(2){
    background-color: #3167fa ;
    color: white;
    
    }
.nav_left>button:nth-child(1){
    background-color: #fffdf7;
    color: #303030;
    font-size: .875rem;
    width: 4.3125rem;
    position: relative;

    
    }
.nav_left>button:nth-child(1):hover{
 color: #3167fa;
 transform: none;
  
    
    
}
.ham_icon{
    display:none ;
}
#sec_sec_respo_btn{
display: none;
}


/* responsive */
@media only screen and (max-width: 991px) {
    .nav_links{
        display: none;
    }
    .nav_left>button{
        display: none;
        
    }
    .ham_icon{
        display: block;
    }}
    
button:hover{
    transform:translate(2px,-2px);
    cursor: pointer;
  
}

.left_raf>span{

    width: 100%;
    margin: 2rem;
}