@media (max-width: 900px) {

    .hero-grid,
    .grid {
        grid-template-columns: 1fr;
    }

    nav {
        display: none;
    }

    h1 {
        font-size: 2.8rem;
    }

    /* Hero Buttons */
    .buttons{
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .buttons .btn{
        margin-right: 0;
    }

    .placeholder {
        height: 320px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }

    .footer-description {
        max-width: 100%;
    }
}

/* About Section */

.about-grid{

    grid-template-columns:1fr;
}

.about-image{

    order:-1;
}

.about-content h2{

    font-size:2.3rem;
}

.about-features{

    grid-template-columns:1fr;
}

/* Vision Section */

.vision-grid{

    grid-template-columns:1fr;
}

.section-heading h2{

    font-size:2.8rem;
}

.vision-card{

    padding:40px 30px;
}

/*==========================================
            CONTACT CTA
==========================================*/

@media (max-width:768px){

    .contact-cta{
        padding:80px 0;
    }

    .contact-cta-grid{
        grid-template-columns:1fr;
        gap:25px;
        margin-top:45px;
    }

    .contact-cta-card{
        padding:40px 25px;
    }

    .contact-cta-card h3{
        font-size:1.7rem;
    }

    .contact-icon{
        width:75px;
        height:75px;
    }

    .contact-icon i{
        font-size:1.6rem;
    }

    .contact-note{
        flex-direction:column;
        text-align:center;
        gap:8px;
        margin-top:35px;
    }

}


.hero-slider{
    height:400px;
}


/*==========================================
        WELLNESS COLLECTION
==========================================*/

@media(max-width:992px){

.product-showcase{

    grid-template-columns:1fr;

    gap:45px;

    margin-bottom:90px;
}

.product-showcase.reverse .product-image,
.product-showcase.reverse .product-content{

    order:unset;
}

.product-image img{

    height:420px;
}

.product-content h3{

    font-size:2.5rem;
}

.product-number{

    font-size:4rem;
}

}


@media(max-width:768px){

.products-section{

    padding:80px 0;
}

.product-image img{

    height:320px;
}

.product-content h3{

    font-size:2rem;
}

.product-content p{

    line-height:1.8;
}

.product-number{

    font-size:3rem;
}

.product-showcase{

    margin-bottom:70px;
}

}

/* Mobile */

@media(max-width:768px){

.modal-image{
    height:220px;
}

.modal-body{
    padding:30px;
}

.modal-number{
    font-size:2.8rem;
}

.modal-body h2{
    font-size:2rem;
}

.close-modal{
    width:42px;
    height:42px;
}

}