*{
    margin: 0;
}
.inter-normal {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: <weight>; */
  font-style: normal;
}

.noto-serif-normal {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  /* font-weight: <weight>; */
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* font weight & size */
.medium{
    font-weight: 500;
}
.semi-bold{
    font-weight: 600;
}
.semi-bold-28{
    font-weight: 600;
    font-size: 1.75rem;
}
.bold{
    font-weight: bold;
}
.bold-40{
    font-size: 2.5rem;
    font-weight: bold;
}
.bold-50{
    font-size: 3.125rem;
    font-weight: bold;
}
.bold-64{
    font-size: 4rem;
    font-weight: bold;
}

.font-20{
    font-size: 1.25rem;
}
.font-22{
    font-size: 1.375rem;
}

/* colors */
.color-orange{
    color: rgba(233, 90, 8, 1);
}
.ash-txt{
    color: rgba(0, 0, 0, 0.5);
}

/* shared styles */
span{
    color: rgba(233, 90, 8, 1);
}



/* navbar section */
nav{    
    max-width: 1140px;
    margin: 0 auto;    
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 120px;
    margin-top: 30px;
}
.nav-anchors > ul{    
    list-style: none;
    display: flex;
    gap: 48px;
}
.nav-anchors > ul > li:first-child{
    font-weight: bold;
    color: rgba(37, 36, 50, 1);
}
.nav-anchors > ul > li:nth-child(2), .nav-anchors > ul > li:nth-child(3){
    color: rgba(137, 135, 161, 1);
}

/* banner section */
.banner{    
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex: 1;
    align-items: end;
    margin-bottom: 120px;
}
.banner-txt{        
    padding: 0;
    max-height: 300px;     
}
.banner-txt > h1, .banner-txt > p{    
    margin: 0 auto;        
}
.banner > img{    
    margin: 0;
}

/* plants section */
.plants{
    max-width: 1140px;
    margin: 0 auto;
    margin-bottom: 210px;
}
.plants-txt{
    text-align: center;
    margin-bottom: 50px;
}
.plants-txt > p{
    margin: 0 126px;
}
.card{    
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;    
}
.card-content{
    text-align: center;
}
.card-content > div{    
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.btn-cards{
    margin-top: 30px;
    padding: 19px 0;
    width: 100%;
    border: none;
    color: white;
    background-color: rgba(233, 90, 8, 1);
}
.plants-cards{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    row-gap: 30px;
    column-gap: 20px;
}

/* plants lover section */
.plants-lover{
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    flex: 1;
    margin-bottom: 132px;

}
.plants-lover-txt{
    margin: 38px auto;
}
.plants-lover-txt > ul > li{
    margin-bottom: 20px;
}
.trusted-badge{
    width: 286px;
    height: 286px;
    position: absolute;
    transform: translate(350px, -130px);
    filter: drop-shadow(-4px 10px 2px rgba(0, 0, 0, 0.25));
}

/* deals section */
.deals{
    max-width: 1440px;
    margin: 0 auto;    
    text-align: center;
    margin-bottom: 166px;
}
.deals > p{
    margin: auto 276px;
}

/* offers section */
.offers{
    max-width: 1140px;
    margin: 0 auto;
    margin-bottom: 75px;
    display: flex;
    gap: 28px;
    height: 425px;
}
.left-container{    
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.left-top{
    background-image: url(../assets/deal-bloom.png);
    background-repeat: no-repeat;
    background-size: cover;

    height: 200px;
    border-radius: 14px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.left-bottom{
    background-image: url(../assets/deal-ana.png);
    background-repeat: no-repeat;
    background-size: cover;

    height: 200px;
    border-radius: 14px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.shade-bg{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4));
    width: 100%;
    height: 100%;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.right-container{
    background-image: url(../assets/deal-zabo.png);
    background-repeat: no-repeat;
    background-size: cover;

    width: 66%;
    height: 100%;
    border-radius: 14px;
    text-align: center;
}
.left-txt, .right-txt{
    color: white;
}
.left-txt > h3, .right-txt > h3{
    text-decoration: underline;
}

/* join section */
.join{
    max-width: 1440px;
    margin: 0 auto;
    height: 533px;

    background-image: url(../assets/news-letter-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.join > div{
    text-align: center;
    padding-top: 196px;
}
.join-input{
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 23px;    
}
.join-input > input{
    padding: 15.5px 540px 15.5px 20px;
    border: none;
}
.btn-subscribe{
    padding: 19px 53px;
    border: none;
    background-color: rgba(233, 90, 8, 1);
    color: white;
}
.join > div > h1{
    color: white;
}

/* footer section */
.footer{
    margin: 50px 160px;
    display: flex;
    justify-content: space-between;
    flex: 1;
}
.one{
    width: 359px;
}
.two > ul, .three > ul{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
.four > div{
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}



/* media queries: iphone 14 & 15 pro */
@media screen and (max-width: 576px){

    /* navbar section */
    nav{        
        margin: 13px 16px 28px;
    }
    .nav-anchors > ul > li:nth-child(1), .nav-anchors > ul > li:nth-child(2), .nav-anchors > ul > li:nth-child(3){
    display: none;
    }

    /* banner section */
    .banner{
        margin-bottom: 65px;
        flex-direction: column-reverse;
        gap: 28px;
    }
    .banner > img{    
        width: 100%;
        max-height: 245px;        
    }
    .banner-txt{
        margin: 0 16px;
    }
    .banner-txt > h1{
        font-size: 1.5rem;
    }    
    .banner-txt > p{
        font-size: 0.9rem;
    }

    /* plants section */
    .plants{
        margin-bottom: 42px;
    }
    .plants-txt > h1{
        font-size: 1.5rem;
    }
    .plants-txt > p{
        font-size: 0.9rem;
        margin: 0 28px;
    }
    .plants-cards{
        grid-template-columns: repeat(2,1fr);
        margin: 0 16px;        
    }    
    .card > img{
        width: 100%;
    }
    .card-content > div > h3, .card-content > button{
        font-size: 1rem;
    }

    /* plants lover section */
    .plants-lover{
        flex-direction: column;
        gap: 18px;
        margin: 0 16px;
        margin-bottom: 142px;
    }
    .trusted-badge{
        display: none;
    }
    .plants-lover-txt{
        margin: 0;
    }
    .plants-lover-txt > h1{
        font-size: 1.5rem;
    }
    .plants-lover-txt > ul{
        font-size: 0.9rem;
        padding-left: 24px;
    }
    .plants-lover-txt > ul > li{
    margin-bottom: 16px;
    }

    /* deals section */
    .deals{
        margin-bottom: 50px;
        width: 100%;
    }
    .deals > h1{
        font-size: 1.5rem;
    }
    .deals > p{
        margin: 0 28px;
        font-size: 0.9rem;
    }

    /* offers section */
    .offers{
        flex-direction: column;
        height: 600px;
        margin: auto 16px;
        margin-bottom: 40px;
        gap: 25px;        
    }
    .left-container, .right-container{
        width: 100%;
    }
    .left-container{
        height: 66%;
    }
    .right-txt > h2{
        font-size: 1.25rem;
    }
    .right-txt > h3{
        font-size: 1rem;
    }

    /* join section */
    .join{        
        height: 275px;
        margin-bottom: 50px;         
    }
    .join > div{
        padding-top: 110px;
    }
    .join-input > input{
        padding: 15.5px 0 15.5px 20px;        
    }
    .btn-subscribe{
        padding: 19px 12px;
    }
    .join > div > h1{
        font-size: 1.25rem;
    }

    /* footer section */
    .footer{
        flex-direction: column;
        gap: 20px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 50px;
    }
    .one > p{
        font-size: 1rem;
    }
    .two > ul, .three > ul{
        padding-left: 0;
    }
    .four > div{
        justify-content: left;
    }
}