/* ===================================
   RESPONSIVE.CSS
=================================== */

/* Large Tablets */
@media (max-width: 1200px) {

    h1 {
        font-size: 55px;
    }

    .hero-content {
        max-width: 70%;
    }

    .products-grid,
    .categories-grid,
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .certification-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================
   TABLETS
========================================== */

@media (max-width: 992px) {

    section {
        padding: 80px 0;
    }

    .container {
        width: 95%;
    }

    /* Typography */
    h1 {
        font-size: 48px;
        line-height: 1.1;
    }

    h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    h3 {
        font-size: 24px;
    }

    p {
        font-size: 15px;
        line-height: 1.7;
    }

    /* Hero */
    .hero {
        min-height: 85vh;
        padding-top: 120px;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .hero-content p {
        max-width: 700px;
        margin: 0 auto 25px;
    }

    .hero-buttons {
        justify-content: center;
        gap: 15px;
    }

    .hero-image {
        max-width: 500px;
        margin: 0 auto;
    }

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

    /* Layout */
    .grid-2,
    .showcase-wrapper,
    .contact-grid,
    .category-promo-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Product Grids */
    .products-grid,
    .categories-grid,
    .why-grid,
    .testimonials-grid,
    .certification-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .partner-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Product Images */
    .product-card img {
        max-height: 240px;
        object-fit: contain;
    }

    /* Category Images */
    .category-card img {
        width: 140px;
        height: 140px;
        object-fit: contain;
    }

    /* Showcase */
    .showcase-content {
        text-align: center;
    }

    .showcase-content h2 {
        font-size: 42px;
    }

    /* Promo Boxes */
    .promo-box {
        padding: 35px;
        min-height: 320px;
    }

    .promo-box-content {
        max-width: 60%;
    }

    .promo-box-content h2 {
        font-size: 34px;
    }

    .promo-box-image {
        width: 45%;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Mobile Menu */
    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 90px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 90px);
        background: #003b95;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 30px;
        gap: 20px;
        transition: 0.4s ease;
        overflow-y: auto;
        z-index: 999;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu a {
        display: block;
        width: 100%;
        font-size: 18px;
        padding: 10px 0;
    }
}
/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width:992px){

    .single-product-grid{


        gap:20px;
    }

    .single-product-content{

        text-align:center;
    }

    .showcase-features{

        justify-content:center;
    }

    .variants-grid{

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

    .single-product-image img{

        height:400px;
    }
}


/* ==========================================
   MOBILE RESPONSIVE
========================================== */

/* ==========================================
   MOBILE - 768px
========================================== */

@media (max-width:768px){

    body{
        font-size:14px;
        overflow-x:hidden;
    }

    .container{
        width:100%;
        padding:0 15px;
    }

    section{
        padding:70px 0;
    }

    /* Typography */

    h1{
        font-size:34px;
        line-height:1.1;
    }

    h2{
        font-size:28px;
        line-height:1.2;
    }

    h3{
        font-size:22px;
        line-height:1.3;
    }

    p{
        font-size:14px;
        line-height:1.7;
    }

    /* Header */

    .header{
        padding:15px 0;
    }

    .navbar{
        min-height:70px;
    }
.logo{
        z-index: 9999;

}
    .logo img{
        width:95px;

    }

    .header-actions .btn-primary{
        display:none;
    }

    .menu-toggle{
        display:flex;
        width:42px;
        height:42px;
            z-index: 9999;

    }

/* Mobile Menu */
.nav-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height:auto;
    background: #003b95;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 20px;
    padding: 30px;

    transition: top 0.7s ease;
    overflow-y: auto;
    z-index: 999;
}

.nav-menu.active {
    top: 90px; /* Header height */
}

    /* Hero */

/* ==========================================
   MOBILE HERO IMAGE FIX
========================================== */

.hero,
.hero-slider,
.hero-slide,
.hero-wrapper{
    height:500px;
    min-height:500px;
}

.hero-slide{

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center bottom;

    background-color:#003b95;
}

.hero-slide::before{

    background:
    linear-gradient(
    180deg,
    rgba(0,20,80,.85) 0%,
    rgba(0,20,80,.65) 35%,
    rgba(0,20,80,.25) 70%,
    transparent 100%
    );
}

.hero-content{

    max-width:100%;
    text-align:center;
    align-items:center;

    padding-top:0;
    margin-top:-80px;
}

.hero-content h1{
    font-size:32px;
}

.hero-content h2{
    font-size:20px;
}

.hero-content p{
    max-width:300px;
    margin:0 auto 20px;
}

    .hero-buttons{
        justify-content:center;
        gap:10px;
    }

    .btn-primary,
    .btn-secondary{
        min-height:25px;
        padding:0 10px;
        font-size:8px;
    }

    .hero-controls{
        bottom:25px;
    }

    .hero-dot{
        width:10px;
        height:10px;
    }

    /* Products */

    .products-grid{
        grid-template-columns:2,1fr;
        gap:20px;
    }

    .product-card{
        min-height:auto;
    }

    .product-image{
        height:260px;
    }

    .product-content{
        padding:20px;
    }

    .product-content h3{
        font-size:14px;
    }

    /* Categories */

    .categories-grid{
        grid-template-columns:2,1fr;
        gap:20px;
    }

    .category-image{
        height:220px;
    }

    .category-content{
        padding:20px;
    }

    /* Showcase */

    .showcase-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .showcase-content{
        text-align:center;
    }

    .showcase-content h2{
        font-size:20px;
    }

    .showcase-main-image{
        max-width:280px;
    }

    .showcase-secondary-image{
        width:140px;
        right:0;
        top:20px;
    }

    /* Promo */
.category-promo{
    padding: 0;
}
    .category-promo-grid{
    grid-template-columns:repeat(2,1fr);
    gap: 0;
    }

    .promo-box{
        min-height:50px;
        padding:10px;
        border-radius: 0;
    }
    .promo-box:hover{

    transform:none;

    box-shadow:var(--shadow-lg);
}
.promo-box:hover .promo-box-image img{
    transform: none;
}


    .promo-box-content{
        max-width:50%;
    }

    .promo-box-content h2{
        font-size:8px;
    }

    .promo-box-content p{
        display: none;
    }

    .promo-box-image{
        width:45%;
    }

    /* Why Choose */

    .why-grid{
        grid-template-columns:4,1fr;
            gap:10px;

    }


    .promo-banners {
        min-height: 50vh;
    background-image: url('../images/banner-2-mobile.png');
}



    .why-card{
        padding:20px 10px;
    }
.why-card:hover{
    transform: none;
}
.why-card i{
      width:40px;

    height:40px;
    font-size: 20px;
}
.why-card h3{
    font-size: 16px;
}
.why-card p{
    font-size: 10px;
}
    /* Testimonials */

.testimonials-grid{

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

    gap:5px;

}

    .testimonial-card{
        padding:5px;
    }
.stars{


    margin-bottom:10px;

    font-size:10px;

}

.testimonial-card p{

font-size: 8px;

}

.testimonial-card h4{

font-size: 12px;
}

.testimonial-card span{


    font-size:8px;

}

    /* Partner */

    .partner-benefits{
        grid-template-columns:2,1fr;
    }

    .partner-content h2{
        font-size:25px;
    }

    .partner-content p{
        font-size:14px;
    }

    /* Contact */

    .contact-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    /* Footer */

    .footer{
        padding-top:70px;
    }

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

    .footer .social-links{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

}

/* ==========================================
   RESPONSIVE - MOBILE
========================================== */

@media (max-width:768px){

/* ==========================================
   SINGLE PRODUCT PAGE
========================================== */

.single-product{

    padding:50px 0;

}

.single-product-grid{
    gap:10px;

}

/* Product Image */

.single-product-image{
    border-radius:24px;

    padding:10px;

}

.single-product-image img{

    height:auto;

}

.single-product-image:hover img{

    transform:none;
}

/* Product Content */
.single-product-content span {
    font-size: 10px;
}
.single-product-content h2{
font-size: 14px;
    margin-bottom:20px;
}

.single-product-content p{

    margin-bottom:10px;

    font-size:8px;
}

/* Features */

.showcase-features{
    gap:10px;
}

.single{
font-size: 10px;}

/* ==========================================
   PRODUCT VARIANTS
========================================== */


.variants-grid{

    display:grid;

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

    gap:20px;
}

.variant-card{
    padding:20px;
}

.variant-card:hover{

    transform:none;

    box-shadow: none;
}

.variant-card img{
    height:auto;
    margin-bottom:10px;
}

.variant-card:hover img{

    transform:none;
}

.variant-card h3{

    margin-bottom:5px;
    font-size:14px;
}

.variant-card p{

    font-size:10px;

}

}