/* ==========================================
   KRUSHIVANDANA V2
   Responsive Styles
========================================== */


/* ==========================================
   Large Devices (1200px and below)
========================================== */

@media (max-width:1200px){

.container-custom{
    max-width:1140px;
}

}


/* ==========================================
   Laptops (992px and below)
========================================== */

@media (max-width:992px){

section{
    padding:80px 0;
}

.section-title h2{
    font-size:2.2rem;
}

.container-custom{
    padding:0 18px;
}

}


/* ==========================================
   Tablets (768px and below)
========================================== */

@media (max-width:768px){

body{
    font-size:15px;
}

section{
    padding:70px 0;
}

.section-title{
    margin-bottom:45px;
}

.section-title h2{
    font-size:2rem;
}

.btn-primary,
.btn-outline{

    width:100%;
    justify-content:center;

}

}


/* ==========================================
   Mobile Devices (576px and below)
========================================== */

@media (max-width:576px){

body{
    font-size:14px;
}

.container-custom{
    padding:0 15px;
}

.section-title h2{
    font-size:1.75rem;
}

.section-title p{
    font-size:.95rem;
}

.card{
    padding:20px;
}

}

/* ==========================================
   HERO RESPONSIVE
========================================== */

@media (max-width:992px){

.hero-content{
    grid-template-columns:1fr;
    text-align:center;
}

.hero-text h1{
    font-size:3rem;
}

.hero-buttons{
    justify-content:center;
}

.hero-highlights{
    justify-content:center;
}

}

@media (max-width:576px){

.hero{
    min-height:auto;
    padding:60px 0;
}

.hero-text h1{
    font-size:2.2rem;
}

.hero-buttons{
    flex-direction:column;
}

.hero-highlights{
    flex-direction:column;
}

}

/* ==========================================
   NAVBAR RESPONSIVE
========================================== */

@media (max-width:992px){

    .nav-menu,
    .desktop-btn{
        display:none;
    }

    .menu-btn{
        display:block;
    }

}

@media (max-width:992px){

    .drawer-header .logo{
        font-size:1.8rem;
    }

}



@media(max-width:992px){

.about-content{

    grid-template-columns:1fr;

}

.about-text{

    text-align:center;

}

.about-features{

    grid-template-columns:1fr;

}

}


@media (max-width:768px){

    .navbar{
        height:72px;
    }

    .logo{
        flex:none;
        max-width:75%;
        font-size:2rem;
        white-space:normal;
        overflow:hidden;
    }

    .menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        flex-shrink:0;
    }

}


/* about us */

@media (max-width:992px){

    .about-text h2{

        font-size:42px;

    }

}

@media (max-width:576px){

    .about-text h2{

        font-size:34px;

    }

}

@media (max-width:768px){

    .about-features{

        grid-template-columns:1fr;

        gap:15px;

    }

}


@media (max-width:768px){

    .about-image img{
        width:100%;
        height:auto;
        object-fit:contain;
        top:0;
    }

}

@media (max-width:768px){

    .about-content{
        display:flex;
        flex-direction:column;
    }

    .about-text{
        order:1;
    }

    .about-image{
        order:2;
    }

}



/* awards */

@media(max-width:992px){

    .awards-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .award-card img{

        width:100%;
        height:auto;
        object-fit:contain;

    }

}



/* product */

@media(max-width:992px){

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .products-grid{

        grid-template-columns:1fr;

    }

}




/* gallery */

/* Mobile */

@media (max-width:768px){

    .gallery-slider{
        height:320px;
    }

    .gallery-card{

        width:90%;
        max-width:360px;
        height:240px;

        left:50%;
        top:50%;

    }

    .gallery-btn.prev{
        left:10px;
    }

    .gallery-btn.next{
        right:10px;
    }

     .gallery-btn{
        display:none;
    }

}




@media(max-width:992px){

.testimonial-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:576px){

.testimonials{

    padding:80px 0;

}

.testimonial-card{

    padding:28px;

    border-radius:18px;

}

.quote-icon{

    font-size:34px;

}

.testimonial-card p{

    font-size:16px;

}

.visitor-info h4{

    font-size:18px;

}

}



/* footer  */


@media(max-width:992px){

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.footer-bottom{

    flex-direction:column;

    gap:20px;

}

}

@media(max-width:576px){

.footer{

    text-align:center;

}

.footer-contact p{

    justify-content:center;

}

.footer-links ul{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.footer-links li{

    margin:0;

}

}


/* about  */

@media(max-width:768px){

.about-hero{

min-height:55vh;

text-align:center;

padding:120px 20px 80px;
}

.about-hero-content{

margin:auto;
}

.breadcrumb{

justify-content:center;
}

.about-hero p{

font-size:1rem;
}


}




/* ==========================================
   HERO IMAGE - TABLET
========================================== */

@media (max-width: 992px) {

    .hero-image img {
        top: 0;
    }

}


/* ==========================================
   HERO IMAGE - MOBILE
========================================== */

@media (max-width: 576px) {

    .hero-image img {
        width: 100%;

        top: 0;

        border-radius: 20px;
    }

}






/* =====================================================
   MOBILE REVIEWS - SWIPE ONE CARD AT A TIME
===================================================== */

@media (max-width: 768px) {

    .testimonial-grid {

        /* Horizontal carousel */
        display: grid !important;

        grid-template-columns: none !important;

        grid-template-rows: 1fr !important;

        grid-auto-flow: column !important;

        grid-auto-columns: 100% !important;

        gap: 16px !important;

        width: 100% !important;

        margin-top: 50px;

        /* Enable finger swipe */
        overflow-x: auto !important;
        overflow-y: hidden !important;

        /* Snap exactly to one card */
        scroll-snap-type: x mandatory;

        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        /* Hide scrollbar */
        scrollbar-width: none;

        /* IMPORTANT:
           Do not use transform on the container */
        transform: none !important;

        /* Allow horizontal finger movement */
        touch-action: pan-x pan-y;

    }


    /* Chrome / Edge / Safari scrollbar */

    .testimonial-grid::-webkit-scrollbar {

        display: none;

    }


    /* =================================================
       ONE REVIEW = ONE FULL MOBILE CARD
    ================================================= */

    .testimonial-card {

        width: 100% !important;

        min-width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box;

        margin: 0 !important;

        padding: 28px !important;

        /* One card per swipe */
        scroll-snap-align: start;

        scroll-snap-stop: always;

        /* Remove old animation movement */
        transform: none !important;

        opacity: 1 !important;

    }


    .testimonial-card.show {

        transform: none !important;

        opacity: 1 !important;

    }

}