*{
    padding: 0;
    margin: 0;

}
/* share color */
.banner-span{
color: #E95A08;
}
/* font-family---inter-font */
.inter-font {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* font family-noto-serif */
.noto-serif-font{
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "width" 100;
}
/* header section */
.mx-width{
    max-width: 1140px;
    margin: 0 auto;
}
/* navbar section */
.navbar-section{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24.5px;
margin-bottom: 100px;
}
.nav-list{
    display: flex;
    gap: 48px;
}
.nav-list li {
list-style: none;

}
.nav-list li>a{
color:#252432;
text-decoration: none;
font-size: 16px;
font-weight: 700;
}
.shop-about{
    color: #8987A1;
    font-size: 16px;
    font-weight: 400;
}
.shoping-card{
    margin-right: 10px;
    
}
#shoping-card-1 {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}





/* bannner section */
.banner-section{
    display: flex;
    justify-content: space-between;align-items: stretch;
    padding-top: 106px;
    
}
.banner-content{
padding-top: 56px;

}
.banner-title{
font-size: 65px;
font-weight: 700;
color: #000;
margin-bottom: 20px;

}

.banner-description{
font-size: 22px;
font-weight: 400;
color: rgba(0, 0, 0, 0.50);
margin-bottom: 0px;
margin-right: 10px;

}









/* our plants section */
.our-plants-section{

}
.our-plants{
text-align: center;
margin: 120px 150px 50px 150px;

}
.our-plants-h2{
font-size: 50px;
font-weight: 700;
color: #000000;
margin-bottom: 15px;


}
.our-plants-p{
font-size: 22px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);



     
}

.our-plants-p-p{
font-size: 22px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
padding: 0px 90px 70px 90px;

}
/* cart section */
.add-cart-section{
display: grid;
grid-template-columns: repeat(4,1fr);
column-gap: 20px;
row-gap: 30px;
/* flex: 1; */
}
.add-cart{
text-align: center;
/* border: 1px solid green; */
width: 270px;
/* box-sizing: border-box; */



}
.add-cart-img{
width: 100%;

}.add-cart-h4{
font-size: 22px;
font-weight: 500;
color: #111111;
margin-top: 30px;
margin-bottom: 20px;
}
.add-cart-h3{
font-size: 22px;
font-weight: 700;
color: #111111;
margin-bottom: 20px;
}
.btn-primary{
color: #FFFFFF;
background-color: #E95A08;
padding: 19px 80px;
width: 100%;
border: none;
font-size: 16px;
font-weight: 600;

}

.add-cart-img img{
    width: 100%;
}




 /* flower plant section  */
  .flower-plant-section{

display: flex;
margin-top: 210px;
gap:60px;
/* border: 2px solid red; */

  }
  
.flower-plant-section-img{

position: relative;

}
.flower-plant-section-text{
margin-top: 38px;

}
.flower-li{
font-size: 22px;
font-weight: 400;
color:rgba(0, 0, 0, 0.5);
margin-top: 20px;

}
.flower-plant-h3{
    font-size: 50px;
    font-weight: 700;
    color: #000000;
}
.trusted{
position: absolute;
width: 50%;
top: -120px;
right: -90px;

}



/* latest deals section */
.latest-img-container{
  display: grid;
  grid-template-columns:repeat(2,1fr);
  column-gap: 28px;

}
 
.bg-div-1{
background-image: linear-gradient(0deg,rgba(0,0,0,0.4) 0%, rgba(0,0,0, 0.40) 100%), url(../assets/deal-bloom.png);
background-repeat: no-repeat;
height: 206px;
width: 366px;
background-size: cover;
background-position: center;
border-radius: 10px;
margin-bottom: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg-div-2{
   

background-image: linear-gradient(0deg,rgba(0,0,0,0.4) 0%, rgba(0,0,0, 0.40) 100%), url(../assets/deal-ana.png);
background-repeat: no-repeat;
height: 206px;
background-size: cover;
background-position: center;
width: 366px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
.bg-div-3{
   
background-image:  linear-gradient(0deg,rgba(0,0,0,0.4) 0%, rgba(0,0,0, 0.40) 100%), url(../assets/deal-zabo.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:auto;
width: 753px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;


}


.bonus-h3{
font-size: 20px;
font-weight: 700;
color: rgb(255, 255, 255);
margin-bottom: 19px;


}
.bonus-h2{
font-size: 40px;
font-weight: 700;
color: #FFF;
margin-bottom: 15px;


}
.bonus-spn{
font-size: 16px;
font-weight: 600;
color: rgb(255, 255, 255);

}
.bonus-spn-3{
font-size: 28px;
font-weight: 600;
color: #FFF;

}



/* join section */
.join-section{
background-image: url(../assets/news-letter-bg.png);
background-size:cover;
max-width: 1440px;
height: 533px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 120px;
margin-bottom: 50px;
}
.input-btn{
    display: flex;
    width: 100%;
    max-width: 830px;
    height: 50px;

}
.join-h2{
    font-size: 50px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    margin-bottom: 20px;
}

.input-btn input[type="email"]{
    padding: 15px 20px;
font-size: 16px;
font-weight: 400;
flex: 1;
/* outline: none; */
color: rgba(0, 0, 0, 0.5);


}
::placeholder{
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
}


 #btn{
    padding: 15px 20px;
    width: 186px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    background-color: #E95A08;
    border: none;


}





/* footer section */
.footer-section{
    background-color: rgb(255, 255, 255,0.5);
/* max-width: 1440px; */
margin: 50px auto;
max-width: 1140px;



}
.footer-four-div{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: start;
    
}
.footer-four-div li, a{
text-decoration: none;
list-style: none;
 color: #6B7280;
 
}

.footer-div-1 {
     width: 359px;

}
.footer-div-p{
    margin-top: 16px;
    font-size: 22px;
    font-weight: 400;
    color:rgba(0, 0, 0, 0.50);
    
}
.footer-div-2{
    margin-left: 110px;
    font-size: 16px;
    font-weight: 400;
 
     
    
}

.footer-div-3{
    margin-left:65px;
     font-size: 16px;
    font-weight: 400;
   
}
.footer-div-4{
    display: flex;
    gap: 24px;
    align-items: center;
    /* border: 1px solid red;  */

}
.footer-li{
    margin-bottom: 32px;
    
}


/* responsive part */
@media screen and (max-width:576px) {
    /* NAVBER  */
    .navbar-section{
  margin:13PX 16PX 28PX 16PX;

    }
   .nav-list li{
    display: none;
   }
 
/* HEADER */
.banner-section{
display: flex;
flex-direction: column-reverse;
padding-top: 0px;
}
.banner-title{
    padding-left: 16px;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 13px;
    /* width: 350px; */
 
}.banner-description{
    padding-left: 16px;
    font-size: 21px;
    font-weight: 400;
    padding-right: 16px;
    
    
    
}
.banner-img{
   width: 100%;
}

/* our plan */
.our-plants-section{
    margin-top: 65px;
    margin-left: 16px;
    margin-right: 16px;
}
.our-plants{
    margin: 0 auto;
    margin-top: 140px;

}
.our-plants-h2{
     font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;

}
.our-plants-p{
    font-size: 21px;
    font-weight: 400;
    padding:0px 30px 28px 30px;
 
}
.add-cart-section{
    display: grid;
    grid-template-columns: repeat(2,1fr);
 padding: 0px;
 margin-bottom: 40px;
}
.add-cart{
    width: 100%;
}
.add-cart-h4{
font-size: 16px;
font-weight: 500;
margin-bottom: 0px;
}
.add-cart-h3{
    margin-top: 10px;
font-size: 16px;
font-weight: 700;
margin-bottom: 30px;

}
.btn-primary{
    padding: 20px 30px;
}

/* Flower & Plants Lover */
.flower-plant-section{
display: flex;
flex-direction: column;
margin:40px 16px 140px 16px;


}
.trusted{
display: none;

}
.flower-store{
    width: 100%;
}
.flower-plant-section-text{
    margin-top: -30px;
   
}
.flower-plant-h3{
    font-size: 36px;
    font-weight: 700;
    
    
}
.flower-li{
    margin-left: 30px;
    font-size: 20px;
    font-weight: 400px;
   
}

/* deals section */
.our-plants-p-p{
font-size: 20px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
padding: 16px 60px 26px 60px;
}
/* bonus part  */
.latest-img-container{
    grid-template-columns: 1fr;
    margin-top: 26px;
   
}
.bg-div-1,
.bg-div-2,
.bg-div-3{
   
    width: calc(100% - 32px);
    max-width: 576px;
    margin: 0 auto;
    margin-top: 20px;
   
}

.card-flex{
 display: grid;
 grid-template-columns: 1fr;
 
}


.bg-div-2{
border-radius:0;
}
.bg-div-3{
    /* show full screen use height: 250px; in mobile*/
    height: 206px;
    /* height:196px; */
    /* bg-div-3 height less 10px then div-1,div-2 in figma file  */
      /* previous two img div height-206px, if want to margin and padding (-) then height=181px and this div 173px, but use random height 1st two div 206 height and this div-196px , because figma size don't match .  */
    
    background-position: center;
    
}

.bonus-h3{
font-size: 20px;
font-weight: 700;
color: rgb(255, 255, 255,1);
}
.bonus-spn{
font-size: 16px;
font-weight: 600;
color: rgb(255, 255, 255,1);
}
.bonus-h2{
font-size: 20px;
font-weight: 700;
color: rgb(255, 255, 255,1);
}
.bonus-spn-3{
font-size: 16px;
font-weight: 600;
color: rgb(255, 255, 255,1);
}
    
   
/* join section */
.join-section{
margin-top: 45px;
height: 393px;
background-position: center;
/* margin:50px; */



}
.join-h2{
    padding-top:70px;
font-size: 24px;
font-weight: 700;
color: #FFF;

}

.input-btn{
  /* display: flex;
justify-content: center;
align-items: center;
width:321px; */

    width: 100%;
    padding: 0 20px; /* 👉 Left & right ফাঁকা জায়গা */
    box-sizing: border-box;
}
.input-btn input{
width: 50%;
    /* height: 50px; */
    /* margin: 5px 0; */
}
.input-btn button{
    width: 30%;
    /* height: 50px; */
    /* margin: 5px 0; */
  }

/* footer */
.footer-section{
    margin-top: 50px;
    margin-bottom: 50px;
}
.footer-li{
    margin-bottom: 0px;
    margin-top: 32px;
}
.zero{margin-top: 0px;}
.footer-four-div{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin-left: 20px;
    row-gap: 20px;
   

  
}

.footer-div-4{
    padding-bottom: 0px;
margin-top: 20px;
/* border: 1px solid red; */

}
.footer-div-1{
    width: 100%;
  
}
.footer-div-p{
    width: 90%;
    /* margin-bottom: 20px; */
}

.footer-div-img{
     width: 180px;
    height: 109px;
   
}

.footer-div-2 {
    margin-top: 0px;
    /* margin-top: 20px; */
margin-left: 0px;
}

.footer-div-3 {
    margin-top: 0px;
margin-left: 0px;

}

.footer-div-4{
    margin-left:0px;
    margin-top: 0px;
}
}