/* font related styles */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');


/* universal styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Noto Serif", serif;
}

/* hiding mobile nav bar in desktop */
.mobile-nav{
    display: none;
}

/* flex related styles */

.first-sec{
    height: 90vh;
}

/* .first-sec{
    height: 90vh;
} */

.our-plants-center{
    text-align: center;
    margin: 50px 134px 0 134px;
}
.set-h {
    height: 100vh;
}
.our-deal-center{
    text-align: center;
    margin: 50px 134px 50px 134px;
}


.in-middle {
    margin: 0 134px 0 134px;
}

.in-middle-top {
    margin: 20px 134px 0 134px;
}

.display-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    
    justify-content: start;
    align-items: end;
}
.hero-img img {
    width: 90%;
}
.hero-img {
    display: flex;
    justify-content: flex-end;
}


.margin-top {
    margin-top: 110px;
}

.width-set-90 {
    width: 92%;
    text-align: justify;
}
.flex-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.flex-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 50px;

    
        
}

.margin-bottom {
    margin-bottom: 100px;
}

/* card related styles */
.card-container {
    display: grid;
    grid-template-columns: repeat(4 , 1fr);

    text-align: center;
    gap: 20px;

      margin-top: 50px;
    margin-bottom: 50px;
}

.card img {
    width: 100%;
}

.card span{
    display: inline-block;
    padding-top: 5px;
}


/* card end */

/* third section related styles */
.store-container {
    position: relative;
    display: flex;
    justify-content: center;
}
.store-container img {
    width: 80%;
}

.li-div li{
    padding: 10px 0;
    text-align: justify;
}
.badge img{
    position: absolute;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
    width: 35%;
    bottom: 78%;
    left: 68%;

}
/* img realted styles */

.img-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    height: 230px;
    gap: 20px;
    margin-bottom: 50px;    

}
.img-container img {
    border-radius: 16px;
    object-fit: cover;
    width: 100%;
    height: 100%;
   
}
.right-side {
    position: relative;
    height: 100%;
}
.left-side-one,
.left-side-two,
.right-side{

    position: relative;
    
}

.left-side,
.right-side {
    height: 100%;
}

.color-overly {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    
}
.fix-center {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    z-index: 2;
}

.right-center-one {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* width: 90%; */
}
.fix-center a, .right-center-one a{
    color: rgb(255, 255, 255);
} 

.fix-center p a {
    color: white; 
    text-decoration: none; 
    border: 1px solid white; 
    padding: 8px 20px; 
    border-radius: 5px; 
    /* margin-top: 30px; */
    background-color: rgba(0, 0, 0, 0.2);

}
.fix-center p {
    margin-top: 15px;
}

.fix-center p a:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.left-side {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.left-side-one,
.left-side-two {
    height: 50%; 
    position: relative;
} 
/* bg img related styles */

.subscribe {
      background: url('../assets/news-letter-bg.png') no-repeat center center/cover;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      position: relative;
    }

    .overlay {
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }

.input-container{
    
    position: relative;
    z-index: 2;
    width: 75%;
}
.input-container h1{
    margin-bottom: 20px;
}
.input-container h1 {
font-size: 2rem;
    margin-bottom: 20px;
}
.form-box {
    display: flex;
    justify-content: center;
}

.form-box input[ type="email" ] {

    padding: 12px;
    width: 70%;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    outline: none;
}
.form-box button {
    padding: 12px 20px;
    background-color: rgb(233, 90, 8);
    color: white;
    border: none;

    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
}


/* btn */

.btn-two {
    background: rgb(233, 90, 8);
    display: inline-block;
    justify-content: flex-start;
    margin: 0;
    padding: 8px 20px;
    border: none;
}
.btn-two a{
    text-decoration: none;
    color: rgb(255, 255, 255);

}
.btn-one {
    color: rgb(255, 255, 255);
    font-size: 1rem;
    background: rgb(233, 90, 8);
    border: none;
    height: 44.5px;
    width: 100%;
    margin-top: 10px;
}
/* btn end */
.padding-top {
    display: inline-block;
    padding-top: 10px;
}

.li-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
}

.li-flex a {
    text-decoration: none;
    /* color: black; only for now will change it later */
}


.nav-img img {

    width: 75%;

    /* width: 120px;
    height: 73px; */
}
.nav-mobile img {

    width: 55%;

    /* width: 120px;
    height: 73px; */
}


/* color related styles */

.color-one {
    color: rgb(37, 36, 50);

}

.color-two {
    color: rgb(137, 135, 161);

}

.color-three{
    color: rgb(233, 90, 8);
}

.color-four {
    color: rgba(0, 0, 0, 0.5);

}
/* grid related styles */
.grid-layout {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    /* margin: 40px; */
    justify-content: center;
    align-items: center;
    text-align: justify;
}

.li-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
       margin: 40px 0px 35px 0px;
}
.li-box li {
    list-style: none;
 
    padding: 5px 0px 20px 0px;
    color: rgb(107, 114, 128);

}
.ul-li {
    padding-right: 80px;
}
.icon-container {
  
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: start;
    margin-bottom: 20px;
    gap: 20px;
}
/* font size related styles */

.f-size-one{
    font-size: 1rem;
}

.f-size-two {
    font-size: 3.2rem;
    font-weight: 700;
}

.f-size-three {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.5);
}

.f-size-four {
    font-size: 3.125rem;
}

.f-size-five {
    font-size: 1.25rem;
}




/* nav related styles */

.nav-bar {
    margin-bottom: 120px;
}

@media screen and (max-width: 576px){
    .nav-bar {
        display: none;
    }
    .mobile-nav{
        display: block;
    }
    .in-middle {
        margin: 0;
    }

    .flex-one {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }

    .flex-two {
        grid-template-columns: repeat(1, 1fr);
    }
    .nav-img{
        display: flex;
        justify-content: flex-start;
        width: 40%;
    }

    .display-grid {
    grid-template-columns: repeat(1, 1fr); 

    }
    .display-grid p {
        padding-top: 10px;
        font-size: 0.875rem;
    }

    .hero-img {
    justify-content: end;
    grid-row: 1;
    padding-bottom: 20px;
    }
    .width-set-90 {
    width: 100%;
    grid-row: 2;

    padding: 10px 20px;

    
    }
    .first-sec{
    height: auto;
}

    .f-size-four {
        font-size: 1.5rem;
    }

    .color-four {
        font-size: 0.875rem;
    }


    .f-size-two {
        font-size: 1.375rem;
    }

    .margin-top {
    margin: 20px 20px 20px 20px;
    /* will use this to center iteam later on */
    
    }
    /* third sec */
    .f-size-five {
    font-size: 1rem;
}

    /* second sec */

    .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    text-align: center;

    margin: 50px 10px;
}

 .margin-for-flower {
    margin: 20px 20px 20px 20px;

 }

.our-plants-center {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 20px 20px;
}

.our-deal-center {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 20px 20px;
}
.li-div{
    padding-left: 20px;
}
.li-div li{
    text-align: justify;
}
 p {
    text-align: justify;
 }


 /* forth section related styles */

 .img-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 0 20px;
    

}
.color-overly {
    height: 100%;
}
.fix-center h3 {
    font-size: 1.25rem;
}
.fix-center a {
    font-size: 0.8rem;
}
.fix-center p {
    text-align: center;
    
}

.set-h {
    height: 120vh;
}

/* fifth section related styles */
.subscribe {
    height: 220px;
}
.input-container h1 {
    font-size: 1rem;
}
.input-container {
    width: 250px;
}

.form-box input[ type="email" ]{
    padding: 5px 5px 5px 10px;
    margin: 0;
}
.form-box button {
    padding: 5px 5px;
    margin: 0;
}
/* footer related styles */
.grid-layout {
    grid-template-columns: 1fr;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: justify;
    
}
.li-box {
    align-items: stretch;
}
.li-box {
    display: flex;
    flex-direction: column;
}
.ul-li {
    padding: 0;
}

.badge {
    display: none;
}
#hidden{
    display: none;
}
#hide {
    display: none;
}

}