/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

.noto-serif {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Default margin-padding:0px */
*{
    margin: 0;
    padding: 0;
}

/* Common styles */
.container{
    max-width: 1140px;
    margin: 0 auto;
}
.text-center{
    text-align: center;
}
.btn{
    padding: 20px 60px;
    font-weight: 600;
    color: white;
    background-color: rgba(233, 90, 8, 1);
    border: none;
}
.items-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Animation */
@keyframes rotating-badge{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/* Optional Task: Alert Message styles */
.alert{
    opacity: 0;
    border: 4px solid black;
    border-radius: 8px;
    width: 340px;
    padding: 10px 0px;
    text-align: center;
    position: fixed;
    top: 60px;
    right: 0px;
    background-color: bisque;
    transform: translateY(-60px);
    transition: opacity 0.2s, transform 0.3s ease-in-out;
}
.alert:target{
    opacity: 1;  
    transform: translateY(0px);
}
.close-alert a{
    font-size: 1.2rem;
    color: red;
    position: absolute;
    top: 0;
    right: 0;
}
.green-tick{
    font-size: 1.2rem;
    color: rgb(11, 188, 11);
}


/* Header styles */

/* Nav styles */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 120px;
}
.menu{
    display: flex;
    gap: 48px;
}
.menu li:nth-child(1), .menu li:nth-child(4){
    font-weight: bold;
}
.menu li{
    list-style: none;
}
.menu li .light{
    color: rgba(137, 135, 161, 1);
}
.menu li a{
    text-decoration: none;
    color: rgba(37, 36, 50, 1);
}

/* Banner */
.banner{
    display: flex;
    justify-content: space-between;
    margin-bottom: 120px;
}

.banner-info h1{
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 13px;
}
.banner-info span{
    color: rgba(233, 90, 8, 1);
}
.banner-info p{
    font-size: 1.38rem;
    color: rgba(0, 0, 0, 0.5);
}

/* Our plants section */
.our-plants .section-intro h2, .latest-deals .section-intro h2{
    font-weight: bold;
    font-size: 3.13rem;
}
.our-plants .section-intro span, .latest-deals .section-intro span{
    color: rgba(233, 90, 8, 1);
}
.our-plants .section-intro p, .latest-deals .section-intro p{
    font-size: 1.38rem;
    color: rgba(0, 0, 0, 0.5);
    max-width: 888px;
    margin: 16px auto 50px;
}
.plants-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    margin-bottom: 210px;
}
.plant{
    display: flex;
    flex-direction: column;
    /* width: 100%; */
}
.plant form{
    display: flex;
}
.plant form button{
    flex: 1;
}
.plant img{
    margin-bottom: 30px;
    width: 100%;
}
.plant h2{
    font-weight: 500;
    font-size: 1.38rem;
    color: rgba(17, 17, 17, 1);
}
.plant p{
    margin: 20px 0 30px;
    font-weight: bold;
    font-size: 1.38rem;
    color: rgba(17, 17, 17, 1);
}

/* Flower-plant-lover section*/
.flower-plant-lover{
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: center;
    margin-bottom: 130px;
}
.flower-plant-lover .left{
    background: linear-gradient(to top, rgba(233, 90, 8, 1), rgba(103, 171, 234, 0.4));
    position: relative;
}
.flower-plant-lover .left img{
    display: block;
}
.flower-plant-lover .left .trusted-badge{
    position: absolute;
    top: -20%;
    right: -15%;
    animation: rotating-badge 4s linear infinite;
}

/* Optional Task: Create an Animation for Trusted Plant Lover Badge --> It will Spin infinite times */
.flower-plant-lover .left .trusted-badge img{
    width: 285px;
}

.flower-plant-lover .right h1{
    font-weight: bold;
    font-size: 3.13rem;
    margin-bottom: 20px;
}
.flower-plant-lover .right ul{
    margin-left: 35px;
}
.flower-plant-lover .right li{
    margin-bottom: 20px;
}
.flower-plant-lover .right p{
    font-size: 1.38rem;
    color: rgba(0, 0, 0, 0.5);
}

/* Latest deals section */
.latest-deals .deals-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 120px;
}
.latest-deals .deals-container .left-container div:nth-child(1){
    width: 367px;
    height: 201px;
    margin-bottom: 25px;
    border-radius: 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../assets/deal-bloom.png") center / cover no-repeat;
}
.latest-deals .deals-container .left-container div:nth-child(2){
    width: 367px;
    height: 201px;
    border-radius: 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../assets/deal-ana.png") center / cover no-repeat;
}
.latest-deals .deals-container .right-container{
    width: 753px;
    height: 427px;
    border-radius: 22px;
    background-color: rgba(0, 0, 0, 0.4);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../assets/deal-zabo.png") center / cover no-repeat;
}
.latest-deals .deals-container .left-container p{
    font-weight: bold;
    font-size: 1.25rem;
    color: white;
    margin-bottom: 15px;
}
.latest-deals .deals-container .left-container a{
    font-weight: 600;
    color: white;
}
.latest-deals .deals-container .right-container p{
    font-weight: bold;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}
.latest-deals .deals-container .right-container a{
    font-weight: 600;
    font-size: 1.75rem;
    color: white;
}

/* Join-us section */
.join-us{
    padding: 195px 0;
    background:  url("../assets/news-letter-bg.png") center / cover no-repeat;
    margin-bottom: 50px;
}
.join-us h1{
    font-weight: bold;
    font-size: 3.13rem;
    margin-bottom: 25px;
    color: white;
}
.join-us form{
    max-width: 830px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    background-color: white;
}
.join-us form input[type="email"]{
    font-family: inherit;
    color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    padding-right: 0;
    border: none;
    outline: none;
}

/* Footer styles */
.footer{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
footer .company img{
    margin-bottom: 16px;
}
footer p{
    max-width: 360px;
    font-size: 1.38rem;
    color: rgba(0, 0, 0, 0.5);
}
footer li:not(:last-child){
    margin-bottom: 32px;
}
footer li{
    list-style: none;
}
footer li a{
    text-decoration: none;
    color: rgba(107, 114, 128, 1);
}

footer .social-links{
    display: flex;
    gap: 24px;
    height: fit-content;
    align-items: center;
}

footer .social-links img{
    display: block;
}


/* Mobile Responsive Design */
@media screen and (max-width:576px) {
    /* Button */
    .btn{
        padding: 20px 20px;
    }
    /* Nav Bar */
    nav{
        padding: 0 16px;
        margin-top: 15px;
        margin-bottom: 28px;
    }
    .menu li:not(:last-child){
        display: none;
    }
    .banner{
        flex-direction: column-reverse;
    }

    /* Banner */
    .banner{
        margin-bottom: 70px;
    }
    .banner-img img{
        width: 100%;
    }
    .banner-info{
        padding: 0 16px;
    }
    .banner-info h1{
        font-size: 2rem;
    }

    /* Our plants section */
    .our-plants{
        padding: 0 16px;
    }
    .our-plants .section-intro h2, .latest-deals .section-intro h2{
        font-size: 2rem;
    }
    .plants-container{
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 70px;
    }

    /* Flower-plant-lover section*/
    .flower-plant-lover{
        flex-direction: column;
        padding: 0 16px;
        gap: 20px;
        margin-bottom: 70px;
    }
    .flower-plant-lover .left img{
        width: 100%;
    }
    .flower-plant-lover .right h1{
        font-size: 1.5rem;
    }
    .trusted-badge{
        display: none;
    }

    /* Latest deals section */
    .latest-deals{
        padding: 0 16px;
    }
    .latest-deals .deals-container{
        flex-direction: column;
        margin-bottom: 70px;
    }
    .latest-deals .deals-container .left-container div:nth-child(1){
        width: 100%;
    }
    .latest-deals .deals-container .left-container div:nth-child(2){
        width: 100%;
        border-radius: 0;
        margin-bottom: 25px;
    }
    .latest-deals .deals-container .right-container{
        width: 100%;
        height: 201px;
        border-radius: 16px;
    }
    .latest-deals .deals-container .right-container p{
        font-size: 20px;
        margin-bottom: 15px;
    }
    .latest-deals .deals-container .right-container a{
        font-size: 1rem;
    }

    /* Join-us section */
    .join-us{
        padding: 110px 0 60px;
        background:  url("../assets/news-letter-bg.png") center / cover no-repeat;
        margin-bottom: 60px;
    }
    .join-us h1{
        font-size: 1.5rem;
        margin-bottom: 25px;
        color: white;
    }
    .join-us form{
        margin: 0 20px;
    }

    /* Footer styles */
    .footer{
        flex-direction: column;
        gap: 30px;
        margin-bottom: 20px;
        padding: 0 16px;
    }
}