/* GOOGLE FONT
=================================*/

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
        scroll-behavior: smooth;
}

body {
        background: #f8f9fb;
        color: #222;
        overflow-x: hidden;
        padding-top: 80px;
}

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

.navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 85px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 60px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, .08);
        z-index: 999999;
        box-sizing: border-box;
}

.navbar .logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: -15px;
}

.navbar .logo a {
        display: flex;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        margin: 0;
        padding: 0;
}

.navbar .logo img {
        width: 65px;
        height: auto;
        display: block;
        transition: .35s;
}

.navbar .logo span {
        font-size: 28px;
        font-weight: 700;
        color: #0B3D91;
        letter-spacing: 1px;
        white-space: nowrap;
}

.navbar a {
        text-decoration: none;
        position: relative;
        transition: .35s;
}

.navbar a:hover {
        color: #0B3D91;
}

/* ==============================
   LEGACY DROPDOWN
   ================================= */

.dropdown {
        position: relative;
}

.dropdown-content {
        position: absolute;
        top: 45px;
        left: 0;
        background: white;
        min-width: 260px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
        display: none;
}

.dropdown-content a {
        display: block;
        padding: 15px 20px;
        margin: 0;
        color: #333;
}

.dropdown-content a:hover {
        background: #0B3D91;
        color: white;
}

.dropdown:hover .dropdown-content {
        display: block;
}

/* ==============================
   DESKTOP NAVIGATION
   ================================= */

.desktop-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 28px;
        margin-left: auto;
}

.desktop-menu>a,
.desktop-menu .products-link {
        text-decoration: none;
        color: #222;
        font-weight: 600;
        font-size: 16px;
        position: relative;
        white-space: nowrap;
        margin: 0;
}

.desktop-menu>a:hover,
.desktop-menu .products-link:hover {
        color: #0B3D91;
}

.desktop-menu>a::after,
.desktop-menu .products-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 0;
        height: 3px;
        background: #FDB913;
        transition: .35s;
}

.desktop-menu>a:hover::after,
.desktop-menu .products-link:hover::after {
        width: 100%;
}

.products-dropdown {
        position: relative;
}

.products-link {
        display: flex;
        align-items: center;
        gap: 6px;
}

.products-link .arrow {
        font-size: 11px;
}

.products-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 15px;
        min-width: 240px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        display: none;
        z-index: 999999;
}

.products-dropdown:hover .products-dropdown-menu {
        display: block;
}

.products-dropdown-menu a {
        display: block;
        padding: 13px 18px;
        margin: 0;
        text-decoration: none;
        color: #222;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
}

.products-dropdown-menu a::after {
        display: none;
}

.products-dropdown-menu a:hover {
        background: #0B3D91;
        color: #ffffff;
}

/* ==============================
   MOBILE NAVIGATION
   ================================= */

.mobile-menu-btn,
.mobile-menu {
        display: none;
}

@media screen and (max-width: 768px) {

        .navbar {
                position: relative;
                width: 100%;
                max-width: 100%;
                height: 70px;
                padding: 0 15px;
                z-index: 999999;
        }

        .navbar .logo {
                margin-left: -10px;
                flex-shrink: 0;
        }

        .navbar .logo a {
                gap: 8px;
        }

        .navbar .logo img {
                width: 55px;
        }

        .navbar .logo span {
                font-size: 18px;
                letter-spacing: .5px;
        }

        .desktop-menu {
                display: none !important;
        }

        .mobile-menu-btn {
                display: block !important;
                flex-shrink: 0;
                width: 45px;
                height: 45px;
                padding: 0;
                margin: 0 0 0 auto;
                border: none;
                outline: none;
                background: transparent;
                color: #16477d;
                font-size: 30px;
                line-height: 45px;
                cursor: pointer;
                pointer-events: auto;
                position: relative;
                z-index: 10000000;
        }

        .mobile-menu {
                display: none !important;
                position: absolute;
                top: 70px;
                left: 0;
                width: 100%;
                max-width: 100%;
                background: #ffffff;
                z-index: 9999998;
                box-sizing: border-box;
                overflow-y: auto;
                overflow-x: hidden;
                box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
        }

        .mobile-menu.open {
                display: block !important;
        }

        .mobile-menu a {
                display: block !important;
                width: 100%;
                box-sizing: border-box;
                padding: 14px 20px;
                margin: 0 !important;
                color: #16477d;
                background: #ffffff;
                text-decoration: none;
                border-bottom: 1px solid #eeeeee;
                font-size: 16px;
                cursor: pointer;
        }

        .mobile-menu a::after {
                display: none !important;
        }

        .mobile-menu a:hover {
                background: #f5f5f5;
        }

        .mobile-products {
                width: 100%;
        }

        .mobile-products-title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                border-bottom: 1px solid #eeeeee;
        }

        .mobile-products-title>a {
                flex: 1;
                border-bottom: none !important;
        }

        .mobile-products-arrow {
                width: 50px;
                height: 50px;
                border: none;
                background: #ffffff;
                color: #16477d;
                font-size: 12px;
                cursor: pointer;
                flex-shrink: 0;
        }

        .mobile-products-submenu {
                display: none;
                width: 100%;
        }

        .mobile-products-submenu.open {
                display: block;
        }

        .mobile-products-submenu a {
                padding-left: 40px !important;
                font-size: 15px !important;
                background: #f8f9fb !important;
        }

        .mobile-products-arrow.active {
                transform: rotate(180deg);
        }

        body {
                padding-top: 0 !important;
        }
}

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

.slider {

        position: relative;

        height: 90vh;

        overflow: hidden;

}

.slide {

        position: absolute;

        width: 100%;

        height: 100%;

        opacity: 0;

        transition: 1s;

}

.slide::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));

        z-index: 1;

}


.slide.active {

        opacity: 1;

        z-index: 1;

}

.slide img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;

}

.caption {

        position: absolute;

        top: 55%;

        left: 8%;

        transform: translateY(-50%);

        max-width: 650px;

        color: white;

        z-index: 2;

}

.caption h1 {

        font-size: 64px;

        font-weight: 700;

        line-height: 78px;

        margin-bottom: 20px;

}

.caption p {

        font-size: 22px;

        line-height: 36px;

        margin-bottom: 35px;

        max-width: 650px;

}

/*=========================================
        PRODUCTS SECTION
=========================================*/

.products,
.products-page {

        padding: 60px 8%;
        background: #f8f9fb;
        text-align: center;

}

.products h2,
.products-page h1 {

        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 20px;
        font-weight: 700;

}

.products-page p {

        max-width: 900px;
        margin: 0 auto 60px;
        color: #666;
        line-height: 30px;
        font-size: 18px;

}

/*=========================================
        PRODUCT GRID
=========================================*/

.product-container,
.products-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));

        gap: 35px;

        align-items: stretch;

        margin-top: 25px;

}

/*=========================================
        PRODUCT CARD
=========================================*/

.card,
.product-card {

        background: #fff;

        border-radius: 18px;

        overflow: hidden;

        box-shadow: 0 12px 30px rgba(0, 0, 0, .08);

        transition: .35s;

        display: flex;

        flex-direction: column;

        height: 100%;

}

.card,
.product-card,
.feature-box,
.country-card,
.stat-box {

        transition: .4s ease;

}

.card:hover,
.product-card:hover,
.feature-box:hover,
.country-card:hover,
.stat-box:hover {

        transform: translateY(-10px);

}

.card:hover,
.product-card:hover {

        transform: translateY(-12px);

        box-shadow: 0 22px 45px rgba(0, 0, 0, .18);

}

/*=========================================
        PRODUCT IMAGE
=========================================*/

.card img,
.product-card img {

        width: 100%;
        height: 270px;
        object-fit: cover;
        transition: .5s;

}

img {

        transition: .4s;

}

.card:hover img,
.product-card:hover img {

        transform: scale(1.08);

}

.card:hover img,
.product-card:hover img {

        transform: scale(1.08);

}

/*=========================================
        PRODUCT CONTENT
=========================================*/

.card h3,
.product-card h3 {

        padding: 25px 25px 10px;
        font-size: 25px;
        color: #0B3D91;

}

.card p,
.product-card p {

        padding: 0 25px;
        color: #666;
        line-height: 28px;
        min-height: 70px;

}

/*=========================================
        BUTTON
=========================================*/

.card .btn,
.product-card .btn {

        display: inline-block;
        margin: 25px;
        padding: 14px 30px;
        background: #FDB913;
        color: #000;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: .3s;

}

.card .btn:hover,
.product-card .btn:hover {

        background: #0B3D91;
        color: #fff;

}

/*=========================================
        PRODUCT BORDER EFFECT
=========================================*/

.card::before,
.product-card::before {

        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 5px;
        background: #FDB913;
        transition: .4s;

}

.card:hover::before,
.product-card:hover::before {

        width: 100%;

}

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

@media(max-width:768px) {

        .products,
        .products-page {

                padding: 70px 20px;

        }

        .products h2,
        .products-page h1 {

                font-size: 32px;

        }

        .card img,
        .product-card img {

                height: 220px;

        }

}

/*=========================================
        STATS SECTION
=========================================*/

.stats {

        padding: 40px 8% 30px;
        background: #081F4D;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
        text-align: center;

}

.stat-box {

        background: rgba(255, 255, 255, .08);
        border-radius: 18px;
        padding: 40px 20px;
        transition: .35s;

}

.stat-box:hover {

        transform: translateY(-10px);
        background: rgba(255, 255, 255, .15);

}

.stat-box h2 {

        color: #FDB913;
        font-size: 50px;
        margin-bottom: 12px;
        font-weight: 700;

}

.stat-box p {

        color: white;
        font-size: 18px;

}

/*=========================================
        ABOUT SECTION
=========================================*/

.about {

        padding: 60px 8% 40px;
        text-align: center;
        background: #081F4D;

}

.about h2 {

        font-size: 42px;
        color: white;
        margin-bottom: 25px;

}

.about p {

        max-width: 900px;
        margin: auto;
        font-size: 18px;
        line-height: 34px;
        color: goldenrod;

}

/*=========================================
        WHY CHOOSE US
=========================================*/

.why-us {

        padding: 50px 8% 40px;
        background: #f8f9fb;
        text-align: center;

}

.why-us h2 {

        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 60px;

}

.features {

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 30px;

}

.feature-box {

        background: white;
        padding: 35px;
        border-radius: 18px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
        transition: .35s;

}

.feature-box:hover {

        transform: translateY(-10px);
        box-shadow: 0 18px 40px rgba(11, 61, 145, .15);

}

.feature-box h3 {

        color: #0B3D91;
        margin-bottom: 15px;

}

.feature-box p {

        color: #666;
        line-height: 28px;

}

/*=========================================
        EXPORT PROCESS
=========================================*/

.process {

        padding: 50px 8% 40px;
        text-align: center;
        background: #081F4D;

}

.process h2 {

        font-size: 42px;
        color: white;
        margin-bottom: 60px;

}

.steps {

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 25px;

}

.steps div {

        background: #FDB913;
        color: #000;
        padding: 25px;
        border-radius: 15px;
        font-weight: 700;
        transition: .35s;

}

.steps div:hover {

        background: #0B3D91;
        color: white;
        transform: translateY(-8px);

}

/*=========================================
        TESTIMONIALS
=========================================*/

.testimonials {

        padding: 60px 8% 40px;
        background: #f8f9fb;
        text-align: center;
}

.testimonials h2 {
        margin-bottom: 30px;
}

.testimonial-slider {
        margin-top: 0;
}

.testimonial {

        max-width: 850px;
        margin: auto;
        background: white;
        padding: 45px;
        border-radius: 18px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

}

.testimonial p {

        font-size: 20px;
        line-height: 35px;
        color: #555;
        font-style: italic;

}

.testimonial h4 {

        margin-top: 25px;
        color: #0B3D91;

}

/*=========================================
        EXPORT COUNTRIES
=========================================*/

.export-countries {

        padding: 50px 8% 40px;
        background: #ffffff;
        text-align: center;

}

.export-countries h2 {

        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 20px;

}

.export-countries p {

        max-width: 850px;
        margin: 0 auto 50px;
        color: #666;
        font-size: 18px;
        line-height: 30px;

}

.country-grid {

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 25px;

}

.country-card {

        background: #f8f9fb;
        padding: 25px;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 600;
        transition: .35s;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .06);

}

.country-card:hover {

        background: #0B3D91;
        color: #fff;
        transform: translateY(-10px);

}

/*=========================================
        REQUEST QUOTE
=========================================*/

.inquiry {

        padding: 50px 8% 40px;
        background: linear-gradient(135deg, #081F4D);
        text-align: center;

}

.inquiry h2 {

        color: white;
        font-size: 42px;
        margin-bottom: 15px;

}

.inquiry p {

        color: #eee;
        margin-bottom: 45px;

}

.inquiry form {

        max-width: 900px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

}

.inquiry input,
.inquiry textarea {

        width: 100%;
        padding: 16px 18px;
        border: 2px solid transparent;
        border-radius: 10px;
        font-size: 16px;
        transition: .3s;
        outline: none;

}

.inquiry input:focus,
.inquiry textarea:focus {

        border-color: #FDB913;
        box-shadow: 0 0 10px rgba(253, 185, 19, .3);

}

.inquiry button {

        background: #FDB913;
        color: #000;
        border: none;
        padding: 18px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        transition: .35s;

}

.inquiry button:hover {

        background: white;
        color: #0B3D91;
        transform: translateY(-4px);

}

.inquiry button:hover {

        background: white;
        color: #0B3D91;
        transform: translateY(-4px);

}

/* Mobile */

@media(max-width:768px) {

        .inquiry form {

                grid-template-columns: 1fr;

        }

        .inquiry textarea,
        .inquiry button {

                grid-column: 1;

        }

}

/*=========================================
        FAQ
=========================================*/

.faq-section {

        padding: 50px 8% 40px;
        background: #f8f9fb;

}

.faq-section h2 {

        text-align: center;
        color: #0B3D91;
        font-size: 42px;
        margin-bottom: 50px;

}

.faq {

        background: #fff;
        margin-bottom: 20px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

}

.faq-question {

        width: 100%;
        border: none;
        background: #fff;
        padding: 22px;
        text-align: left;
        cursor: pointer;
        font-size: 18px;
        font-weight: 600;

}

.faq-answer {

        display: none;
        padding: 0 22px 22px;
        color: #666;
        line-height: 28px;

}

/*=========================================
        SECTION HEADINGS
=========================================*/

section h2 {

        font-size: 42px;
        font-weight: 700;
        color: #0B3D91;
        text-align: center;
        margin-bottom: 20px;
        position: relative;

}

section h2::after {

        content: "";

        width: 90px;

        height: 4px;

        background: #FDB913;

        display: block;

        margin: 15px auto 0;

        border-radius: 5px;

}

/*=========================================
        FOOTER
=========================================*/

.footer {

        background: #081F4D;
        color: white;
        padding: 50px 8% 30px;

}

.footer-container {

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 40px;

}

.footer-box h2,
.footer-box h3 {

        margin-bottom: 20px;
        color: #FDB913;

}

.footer-box p {

        color: #ddd;
        line-height: 30px;

}

.footer-box a {

        display: block;
        color: #ddd;
        text-decoration: none;
        margin-bottom: 12px;
        transition: .3s;

}

.footer-box a:hover {

        color: #FDB913;
        padding-left: 8px;

}

.copyright {

        text-align: center;
        margin-top: 30px;
        color: #bbb;
        border-top: 1px solid rgba(255, 255, 255, .15);
        padding-top: 20px;

}

/*=========================================
        WHATSAPP
=========================================*/

.whatsapp {

        position: fixed;
        right: 25px;
        bottom: 25px;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: #25D366;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 30px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
        z-index: 999;
        animation: whatsappFloat 2s infinite;

}

@keyframes whatsappFloat {

        0% {
                transform: translateY(0);
        }

        50% {
                transform: translateY(-8px);
        }

        100% {
                transform: translateY(0);
        }

}

.whatsapp:hover {

        transform: scale(1.1);

}

/*=========================================
        GO TO TOP BUTTON
=========================================*/

#scrollTopBtn {

        position: fixed;
        right: 25px;
        bottom: 105px;
        width: 55px;
        height: 55px;
        border: none;
        border-radius: 50%;
        background: #FDB913;
        color: #000;
        font-size: 22px;
        cursor: pointer;
        display: none;
        transition: .35s;
        z-index: 999;

}

#scrollTopBtn:hover {

        background: #0B3D91;
        color: #fff;
        transform: translateY(-5px);

}

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

@media(max-width:768px) {

        nav {

                padding: 0 20px;

        }

        .logo span {

                font-size: 18px;

        }

        .caption h1 {

                font-size: 38px;

        }

        .caption p {

                font-size: 16px;

        }

        .products,
        .about,
        .stats,
        .process,
        .why-us,
        .export-countries,
        .testimonials,
        .faq-section {

                padding: 70px 20px;

        }

        .footer {

                padding: 60px 20px;

        }

}

/* ==============================
BUTTON
=================================*/

.btn {

        display: inline-block;

        padding: 16px 40px;

        background: #FDB913;

        border-radius: 10px;

        text-decoration: none;

        font-weight: 700;

        font-size: 17px;

        color: black;

        transition: .35s;

}

.btn:hover {

        background: #0B3D91;

        color: white;

        transform: translateY(-5px);

}

.btn,
button {

        transition: .35s;

}

.btn:hover,
button:hover {

        transform: translateY(-5px);

        box-shadow: 0 10px 25px rgba(0, 0, 0, .2);

}

/* ==============================
ANIMATION
=================================*/

@keyframes fadeUp {

        from {

                opacity: 0;

                transform: translateY(50px);

        }

        to {

                opacity: 1;

                transform: translateY(0);

        }

}

.slide::before {

        content: "";

        position: absolute;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, .35);

        top: 0;

        left: 0;

}

::-webkit-scrollbar {

        width: 10px;

}

::-webkit-scrollbar-track {

        background: #eee;

}

::-webkit-scrollbar-thumb {

        background: #0B3D91;

        border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

        background: #FDB913;

}

::selection {

        background: #FDB913;

        color: #000;

}

.contact-info {

        background: white;
        padding: 35px;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.contact-info h3 {

        color: #0B3D91;
        margin-bottom: 20px;

}

.contact-info p {

        margin-bottom: 15px;
        color: #555;

}

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

html,
body {
        width: 100%;
        overflow-x: hidden;
}

@media (max-width: 992px) {

        .caption h1 {
                font-size: 48px;
                line-height: 58px;
        }

        .caption p {
                font-size: 18px;
                line-height: 30px;
        }

}

@media (max-width: 768px) {

        .caption {
                left: 5%;
                right: 5%;
                max-width: 100%;
        }

        .caption h1 {
                font-size: 34px;
                line-height: 44px;
        }

        .caption p {
                font-size: 16px;
                line-height: 26px;
        }

}

/*==========================
ABOUT HERO
==========================*/

.about-hero {
        position: relative;
        width: 100%;
        height: 50vh;
        overflow: hidden;
}

.about-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.about-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
}

.about-overlay {
        position: absolute;
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
        color: #fff;
        z-index: 2;
}

.about-overlay h1 {
        font-size: 60px;
        margin-bottom: 20px;
        font-weight: 700;
}

.about-overlay p {
        font-size: 22px;
        max-width: 650px;
        line-height: 36px;
}

/*==========================
COMPANY ABOUT
==========================*/

.company-about {
        padding: 60px 8%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 70px;
        background: #fff;
}

.about-left {
        flex: 1;
}

.about-left img {
        width: 100%;
        border-radius: 15px;
        display: block;
        box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
}

.about-right {
        flex: 1;
}

.about-right h2 {
        font-size: 44px;
        color: #0B3D91;
        margin-bottom: 15px;
}

.about-right p {
        font-size: 18px;
        line-height: 32px;
        color: #555;
        margin-bottom: 20px;
}

.about-highlights {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 40px;
}

.highlight-box {
        background: #f8f9fb;
        padding: 25px;
        border-radius: 12px;
        text-align: center;
        transition: .3s;
}

.highlight-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.highlight-box h3 {
        color: #0B3D91;
        font-size: 34px;
        margin-bottom: 10px;
}

.highlight-box span {
        color: #666;
        font-size: 16px;
}

/*==========================
MISSION & VISION
==========================*/

.mission-section {
        padding: 60px 8%;
        background: #f8f9fb;
        text-align: center;
}

.mission-section h2 {
        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 35px;
}

.mission-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
}

.mission-card {
        background: #fff;
        padding: 40px 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        transition: .35s;
}

.mission-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .15);
}

.mission-icon {
        width: 80px;
        height: 80px;
        margin: auto;
        border-radius: 50%;
        background: #0B3D91;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        margin-bottom: 25px;
}

.mission-card h3 {
        font-size: 28px;
        color: #0B3D91;
        margin-bottom: 18px;
}

.mission-card p {
        color: #666;
        line-height: 30px;
        font-size: 17px;
}

/*==========================
WHY CHOOSE ABOUT
==========================*/

.why-about {
        padding: 60px 8%;
        background: #fff;
        text-align: center;
}

.why-about h2 {
        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 10px;
}

.why-subtitle {
        max-width: 700px;
        margin: 0 auto 35px;
        color: #666;
        font-size: 18px;
        line-height: 30px;
}

.why-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
}

.why-card {
        background: #f8f9fb;
        padding: 35px;
        border-radius: 15px;
        transition: .35s;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.why-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .15);
}

.why-icon {
        width: 80px;
        height: 80px;
        margin: auto;
        border-radius: 50%;
        background: #0B3D91;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        margin-bottom: 20px;
}

.why-card h3 {
        color: #0B3D91;
        margin-bottom: 15px;
        font-size: 24px;
}

.why-card p {
        color: #666;
        line-height: 28px;
        font-size: 16px;
}

/*==========================
MANUFACTURING PROCESS
==========================*/

.manufacturing-process {
        padding: 60px 8%;
        background: #f8f9fb;
        text-align: center;
}

.manufacturing-process h2 {
        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 15px;
}

.process-subtitle {
        max-width: 750px;
        margin: 0 auto 35px;
        color: #666;
        font-size: 18px;
        line-height: 30px;
}

.process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 25px;
}

.process-card {
        background: #fff;
        padding: 35px 25px;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        transition: .35s;
}

.process-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .15);
}

.process-number {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px;
        border-radius: 50%;
        background: #0B3D91;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: 700;
}

.process-card h3 {
        font-size: 22px;
        color: #0B3D91;
        margin-bottom: 15px;
}

.process-card p {
        color: #666;
        line-height: 28px;
        font-size: 16px;
}

/*==========================
QUALITY ASSURANCE
==========================*/

.quality-section {
        padding: 60px 8%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        background: #fff;
}

.quality-left {
        flex: 1;
}

.quality-left h2 {
        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 25px;
}

.quality-left p {
        font-size: 18px;
        line-height: 32px;
        color: #555;
        margin-bottom: 20px;
}

.quality-list {
        list-style: none;
        margin-top: 30px;
}

.quality-list li {
        font-size: 18px;
        margin-bottom: 18px;
        color: #333;
        font-weight: 500;
}

.quality-right {
        flex: 1;
}

.quality-right img {
        width: 100%;
        display: block;
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
}

@media(max-width:768px) {

        .quality-section {
                flex-direction: column;
        }

        .quality-left,
        .quality-right {
                width: 100%;
        }

}

/*==========================
GLOBAL PRESENCE
==========================*/

.global-presence {
        padding: 60px 8%;
        background: #f8f9fb;
        text-align: center;
}

.global-presence h2 {
        font-size: 42px;
        color: #0B3D91;
        margin-bottom: 20px;
}

.global-subtitle {
        max-width: 800px;
        margin: 0 auto 35px;
        color: #666;
        font-size: 18px;
        line-height: 30px;
}

/*=================================
ABOUT CTA
=================================*/

.about-cta {

        padding: 60px 8%;
        background: #f8f9fb;

}

.cta-content {

        max-width: 1100px;

        margin: auto;

        background: #0B3D91;

        border-radius: 20px;

        padding: 70px 50px;

        text-align: center;

        box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.cta-content h2 {

        color: #fff;

        font-size: 42px;

        margin-bottom: 20px;

        font-weight: 700;

}

.cta-content p {

        color: #e9eef8;

        font-size: 18px;

        line-height: 32px;

        max-width: 750px;

        margin: 0 auto 40px;

}

.cta-btns {

        display: flex;

        justify-content: center;

        gap: 20px;

        flex-wrap: wrap;

}

.cta-btn {

        text-decoration: none;

        padding: 16px 40px;

        border-radius: 8px;

        font-size: 17px;

        font-weight: 600;

        transition: .35s;

}

.primary-btn {

        background: #fff;

        color: #0B3D91;

}

.primary-btn:hover {

        background: #FFD54F;

        color: #222;

}

.secondary-btn {

        border: 2px solid #fff;

        color: #fff;

}

.secondary-btn:hover {

        background: #fff;

        color: #0B3D91;

}

/*==========================
PRODUCTS HERO
==========================*/

.products-hero {
        position: relative;
        height: 55vh;
        overflow: hidden;
}

.products-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.products-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
}

.products-hero-content {
        position: absolute;
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
        color: #fff;
        max-width: 700px;
        z-index: 2;
}

.products-hero-content h1 {
        font-size: 60px;
        font-weight: 700;
        margin-bottom: 20px;
}

.products-hero-content p {
        font-size: 22px;
        line-height: 36px;
        margin-bottom: 35px;
}

@media(max-width:768px) {

        .products-hero {
                height: 45vh;
        }

        .products-hero-content {
                left: 5%;
                right: 5%;
        }

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

        .products-hero-content p {
                font-size: 17px;
                line-height: 28px;
        }

}

/*==========================
SEARCH BOX
==========================*/

.search-box {

        display: flex;
        justify-content: center;
        margin: 20px 0 35px;

}

.search-box input {

        width: 420px;
        max-width: 90%;
        padding: 15px 22px;

        border: none;
        outline: none;

        border-radius: 50px;

        background: #fff;

        font-size: 16px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .3s;

}

.search-box input:focus {

        box-shadow: 0 10px 35px rgba(11, 61, 145, .25);

}

/*==================================
PRODUCT CATEGORIES
==================================*/

.product-categories {

        padding: 20px 0 40px;

        text-align: center;

}

.product-categories h2 {

        font-size: 40px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.product-categories p {

        max-width: 700px;

        margin: 0 auto 25px;

        color: #666;

        line-height: 30px;

        font-size: 17px;

}

.category-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 25px;

}

.category-card {

        background: #fff;

        padding: 35px 25px;

        border-radius: 16px;

        text-decoration: none;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        transition: .35s;

}

.category-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 18px 40px rgba(0, 0, 0, .15);

}

.category-icon {

        width: 75px;

        height: 75px;

        margin: auto;

        border-radius: 50%;

        background: #0B3D91;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 34px;

        margin-bottom: 20px;

}

.category-card h3 {

        color: #0B3D91;

        font-size: 24px;

        margin-bottom: 12px;

}

.category-card span {

        color: #666;

        font-size: 16px;

        line-height: 26px;

        display: block;

}

/*=================================
PRODUCT CARD UPGRADE
=================================*/

.product-image {
        position: relative;
        overflow: hidden;
}

.product-image img {

        width: 100%;

        height: 260px;

        object-fit: cover;

        display: block;

        transition: .4s;

}

.product-card:hover .product-image img {
        transform: scale(1.08);
}

.product-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: #FDB913;
        color: #111;
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
}

.product-content {

        padding: 25px;

        display: flex;

        flex-direction: column;

        flex: 1;

}

.product-content h3 {
        color: #0B3D91;
        margin-bottom: 15px;
}

.product-desc {
        color: #666;
        line-height: 28px;
        margin-bottom: 20px;
}

.product-features {
        list-style: none;
        margin-bottom: 25px;
}

.product-features li {
        margin-bottom: 10px;
        color: #444;
}

.product-buttons {

        display: flex;

        gap: 12px;

        margin-top: auto;

        flex-wrap: wrap;

}

.quote-btn {
        background: #FDB913;
        color: #111;
        text-decoration: none;
        padding: 12px 22px;
        border-radius: 6px;
        font-weight: 600;
        transition: .3s;
}

.quote-btn:hover {
        background: #0B3D91;
        color: #fff;
}

/*=================================
PRODUCT META
=================================*/

.product-meta {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin: 20px 0;

}

.rating {

        color: #FDB913;

        font-size: 16px;

        font-weight: 600;

}

.stock {

        background: #e8f8ec;

        color: #1b8a3a;

        padding: 6px 14px;

        border-radius: 20px;

        font-size: 13px;

        font-weight: 600;

}

/*=================================
WHY CHOOSE OUR YARN
=================================*/

.why-yarn {

        padding: 60px 8%;

        background: #fff;

        text-align: center;

}

.why-yarn h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.why-yarn-subtitle {

        max-width: 750px;

        margin: 0 auto 30px;

        color: #666;

        font-size: 18px;

        line-height: 30px;

}

.why-yarn-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

        gap: 30px;

}

.why-yarn-card {

        background: #f8f9fb;

        padding: 35px 25px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.why-yarn-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 18px 40px rgba(0, 0, 0, .15);

}

.why-icon {

        width: 75px;

        height: 75px;

        margin: auto;

        background: #0B3D91;

        color: #fff;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 34px;

        margin-bottom: 20px;

}

.why-yarn-card h3 {

        color: #0B3D91;

        margin-bottom: 15px;

        font-size: 24px;

}

.why-yarn-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
INDUSTRIES WE SERVE
=================================*/

.industries {

        padding: 60px 8%;

        background: #f8f9fb;

        text-align: center;

}

.industries h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.industries-subtitle {

        max-width: 750px;

        margin: 0 auto 30px;

        color: #666;

        font-size: 18px;

        line-height: 30px;

}

.industries-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: 30px;

}

.industry-card {

        background: #fff;

        padding: 35px 25px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.industry-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 18px 40px rgba(0, 0, 0, .15);

}

.industry-icon {

        width: 75px;

        height: 75px;

        margin: auto;

        background: #0B3D91;

        color: #fff;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 34px;

        margin-bottom: 20px;

}

.industry-card h3 {

        color: #0B3D91;

        margin-bottom: 15px;

        font-size: 22px;

}

.industry-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
PRODUCTS CTA
=================================*/

.products-cta {

        padding: 60px 8%;

        background: #f8f9fb;

}

.products-cta-content {

        max-width: 1100px;

        margin: auto;

        background: linear-gradient(135deg, #0B3D91, #1A5FC4);

        border-radius: 20px;

        padding: 45px 35px;

        text-align: center;

        box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.products-cta-content h2 {

        color: #fff;

        font-size: 42px;

        margin-bottom: 20px;

}

.products-cta-content p {

        color: #eef3ff;

        max-width: 700px;

        margin: 0 auto 35px;

        line-height: 30px;

        font-size: 18px;

}

.products-cta-buttons {

        display: flex;

        justify-content: center;

        gap: 20px;

        flex-wrap: wrap;

}

.products-secondary-btn {

        background: #fff;

        color: #0B3D91;

}

.products-secondary-btn:hover {

        background: #FDB913;

        color: #111;

}

@media(max-width:768px) {

        .products-cta-content {

                padding: 45px 25px;

        }

        .products-cta-content h2 {

                font-size: 32px;

        }

}

/*=================================
GALLERY HERO
=================================*/

.gallery-hero {

        height: 55vh;

        background: url(images/gallery-banner.jpg) center/cover;

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

}

.gallery-overlay {

        position: absolute;

        inset: 0;

        background: rgba(0, 0, 0, .55);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        color: #fff;

        padding: 20px;

}

.gallery-overlay h1 {

        font-size: 60px;

        margin-bottom: 20px;

}

.gallery-overlay p {

        max-width: 700px;

        line-height: 32px;

        font-size: 20px;

}

/*=================================
GALLERY
=================================*/

.gallery-page {

        padding: 45px 8%;

        text-align: center;

}

.gallery-page h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.gallery-subtitle {

        max-width: 700px;

        margin: 0 auto 25px;

        color: #666;

        line-height: 30px;

}

.gallery-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

        gap: 30px;

}

.gallery-card {

        overflow: hidden;

        border-radius: 18px;

        box-shadow: 0 12px 30px rgba(0, 0, 0, .12);

        transition: .4s;

        display: block;

}

.gallery-card img {

        width: 100%;

        height: 280px;

        object-fit: cover;

        transition: .5s;

}

.gallery-card:hover {

        transform: translateY(-10px);

}

.gallery-card:hover img {

        transform: scale(1.08);

}

/*=================================
GALLERY FILTER
=================================*/

.gallery-filter {

        display: flex;

        justify-content: center;

        gap: 15px;

        flex-wrap: wrap;

        margin: 35px 0 45px;

}

.gallery-filter button {

        padding: 12px 28px;

        border: none;

        border-radius: 30px;

        background: #e9edf5;

        color: #0B3D91;

        font-weight: 600;

        cursor: pointer;

        transition: .3s;

}

.gallery-filter button:hover,

.gallery-filter .active {

        background: #0B3D91;

        color: #fff;

}

/*=================================
GALLERY INFO
=================================*/

.gallery-card {

        position: relative;

}

.gallery-info {

        position: absolute;

        left: 0;

        bottom: 0;

        width: 100%;

        padding: 18px;

        background: linear-gradient(transparent, rgba(0, 0, 0, .85));

        color: #fff;

}

.gallery-info h3 {

        font-size: 22px;

        margin-bottom: 6px;

}

.gallery-info p {

        font-size: 14px;

        opacity: .95;

}

/*=================================
LIGHTBOX
=================================*/

.lightbox {

        position: fixed;

        inset: 0;

        background: rgba(0, 0, 0, .9);

        display: none;

        justify-content: center;

        align-items: center;

        z-index: 9999;

        padding: 30px;

}

.lightbox img {

        max-width: 90%;

        max-height: 90%;

        border-radius: 12px;

        box-shadow: 0 20px 60px rgba(0, 0, 0, .5);

        animation: zoomIn .35s ease;

}

.close-lightbox {

        position: absolute;

        top: 25px;

        right: 40px;

        color: #fff;

        font-size: 45px;

        cursor: pointer;

        transition: .3s;

}

.close-lightbox:hover {

        color: #FDB913;

}

.gallery-card img {

        cursor: pointer;

}

@keyframes zoomIn {

        from {

                transform: scale(.8);

                opacity: 0;

        }

        to {

                transform: scale(1);

                opacity: 1;

        }

}

/*=================================
GALLERY STATS
=================================*/

.gallery-stats {

        padding: 45px 8%;

        background: #f8f9fb;

        text-align: center;

}

.gallery-stats h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.gallery-stats-subtitle {

        max-width: 700px;

        margin: 0 auto 25px;

        color: #666;

        line-height: 30px;

}

.gallery-stats-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

        gap: 25px;

}

.gallery-stat-card {

        background: #fff;

        padding: 35px 20px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.gallery-stat-card:hover {

        transform: translateY(-8px);

}

.gallery-stat-card h3 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 10px;

}

.gallery-stat-card p {

        color: #666;

        font-size: 18px;

}

/*=================================
GALLERY CTA
=================================*/

.gallery-cta {

        padding: 45px 8%;

        background: #fff;

}

.gallery-cta-content {

        max-width: 1100px;

        margin: auto;

        background: linear-gradient(135deg, #0B3D91, #1A5FC4);

        border-radius: 20px;

        padding: 40px 30px;

        text-align: center;

        box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.gallery-cta-content h2 {

        color: #fff;

        font-size: 40px;

        margin-bottom: 20px;

}

.gallery-cta-content p {

        color: #eef3ff;

        max-width: 700px;

        margin: 0 auto 35px;

        line-height: 30px;

}

.gallery-cta-buttons {

        display: flex;

        justify-content: center;

        gap: 20px;

        flex-wrap: wrap;

}

.gallery-secondary-btn {

        background: #fff;

        color: #0B3D91;

}

.gallery-secondary-btn:hover {

        background: #FDB913;

        color: #111;

}

/*=================================
GALLERY HIGHLIGHTS
=================================*/

.gallery-highlights {

        padding: 70px 8%;

        background: #fff;

        text-align: center;

}

.gallery-highlights h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.gallery-highlights-subtitle {

        max-width: 700px;

        margin: 0 auto 45px;

        color: #666;

        line-height: 30px;

}

.gallery-highlights-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

        gap: 25px;

}

.gallery-highlight-card {

        background: #f8f9fb;

        border-radius: 18px;

        padding: 35px 25px;

        transition: .35s;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.gallery-highlight-card:hover {

        transform: translateY(-8px);

}

.gallery-icon {

        font-size: 48px;

        margin-bottom: 15px;

}

.gallery-highlight-card h3 {

        color: #0B3D91;

        margin-bottom: 12px;

        font-size: 24px;

}

.gallery-highlight-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
EXPORT HERO
=================================*/

.export-hero {

        height: 55vh;

        background: url(images/export-banner.jpg) center/cover;

        position: relative;

}

.export-overlay {

        position: absolute;

        inset: 0;

        background: rgba(0, 0, 0, .55);

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        text-align: center;

        color: #fff;

        padding: 20px;

}

.export-overlay h1 {

        font-size: 60px;

        margin-bottom: 20px;

}

.export-overlay p {

        max-width: 720px;

        font-size: 20px;

        line-height: 32px;

}

.export-page {

        padding: 55px 8%;

        text-align: center;

}

.export-page h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.export-subtitle {

        max-width: 720px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

}

.country-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

        gap: 22px;

}

.country-box {

        background: #fff;

        padding: 28px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

        font-size: 18px;

        font-weight: 600;

}

.country-box:hover {

        transform: translateY(-8px);

}

/*=================================
EXPORT PROCESS
=================================*/

.export-process {

        padding: 55px 8%;

        background: #f8f9fb;

        text-align: center;

}

.export-process h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.process-subtitle {

        max-width: 750px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

        font-size: 17px;

}

.process-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 22px;

}

.process-card {

        background: #fff;

        padding: 30px 25px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

        text-align: left;

}

.process-card:hover {

        transform: translateY(-8px);

}

.process-number {

        width: 55px;

        height: 55px;

        background: #0B3D91;

        color: #fff;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 18px;

        font-weight: 700;

        margin-bottom: 20px;

}

.process-card h3 {

        color: #0B3D91;

        font-size: 24px;

        margin-bottom: 12px;

}

.process-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
PACKAGING SECTION
=================================*/

.packaging-section {

        padding: 55px 8%;

        background: #ffffff;

        text-align: center;

}

.packaging-section h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.packaging-subtitle {

        max-width: 760px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

        font-size: 17px;

}

.packaging-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

        gap: 22px;

}

.packaging-card {

        background: #f8f9fb;

        padding: 30px 25px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.packaging-card:hover {

        transform: translateY(-8px);

}

.packaging-icon {

        font-size: 48px;

        margin-bottom: 18px;

}

.packaging-card h3 {

        color: #0B3D91;

        font-size: 24px;

        margin-bottom: 12px;

}

.packaging-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
WHY EXPORT
=================================*/

.why-export {

        padding: 55px 8%;

        background: #f8f9fb;

        text-align: center;

}

.why-export h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.why-export-subtitle {

        max-width: 760px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

        font-size: 17px;

}

.why-export-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: 22px;

}

.why-export-card {

        background: #fff;

        padding: 30px 25px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.why-export-card:hover {

        transform: translateY(-8px);

}

.why-export-icon {

        font-size: 46px;

        margin-bottom: 18px;

}

.why-export-card h3 {

        color: #0B3D91;

        font-size: 24px;

        margin-bottom: 12px;

}

.why-export-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
CERTIFICATIONS
=================================*/

.certifications {

        padding: 55px 8%;

        background: #ffffff;

        text-align: center;

}

.certifications h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.certifications-subtitle {

        max-width: 760px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

        font-size: 17px;

}

.certifications-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: 22px;

}

.certificate-card {

        background: #f8f9fb;

        padding: 30px 25px;

        border-radius: 18px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.certificate-card:hover {

        transform: translateY(-8px);

}

.certificate-icon {

        font-size: 46px;

        margin-bottom: 18px;

}

.certificate-card h3 {

        color: #0B3D91;

        font-size: 24px;

        margin-bottom: 12px;

}

.certificate-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
EXPORT FAQ
=================================*/

.export-faq {

        padding: 55px 8%;

        background: #f8f9fb;

        text-align: center;

}

.export-faq h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.faq-subtitle {

        max-width: 760px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

}

.faq-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

        gap: 22px;

}

.faq-card {

        background: #fff;

        padding: 28px;

        border-radius: 18px;

        text-align: left;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.faq-card:hover {

        transform: translateY(-8px);

}

.faq-card h3 {

        color: #0B3D91;

        margin-bottom: 12px;

        font-size: 22px;

}

.faq-card p {

        color: #666;

        line-height: 28px;

}

/*=================================
EXPORT CTA
=================================*/

.export-cta {

        padding: 55px 8%;

        background: #fff;

}

.export-cta-box {

        max-width: 1100px;

        margin: auto;

        background: linear-gradient(135deg, #0B3D91, #1A5FC4);

        border-radius: 20px;

        padding: 45px 30px;

        text-align: center;

        box-shadow: 0 20px 40px rgba(0, 0, 0, .15);

}

.export-cta-box h2 {

        color: #fff;

        font-size: 40px;

        margin-bottom: 18px;

}

.export-cta-box p {

        color: #eef3ff;

        max-width: 700px;

        margin: 0 auto 30px;

        line-height: 30px;

}

.export-buttons {

        display: flex;

        justify-content: center;

        gap: 20px;

        flex-wrap: wrap;

}

.export-btn2 {

        background: #fff;

        color: #0B3D91;

}

.export-btn2:hover {

        background: #FDB913;

        color: #111;

}

/*=================================
EXPORT RESPONSIVE
=================================*/

@media(max-width:768px) {

        .export-overlay h1 {

                font-size: 36px;

                line-height: 46px;

        }

        .export-overlay p {

                font-size: 16px;

                line-height: 28px;

        }

        .export-page h2,
        .export-process h2,
        .packaging-section h2,
        .why-export h2,
        .certifications h2,
        .export-faq h2 {

                font-size: 30px;

        }

        .process-grid,
        .packaging-grid,
        .why-export-grid,
        .certifications-grid,
        .faq-grid {

                grid-template-columns: 1fr;

        }

        .export-buttons {

                flex-direction: column;

                align-items: center;

        }

        .export-buttons .btn {

                width: 220px;

                text-align: center;

        }

}

/*=================================
CONTACT HERO
=================================*/

.contact-hero {

        height: 55vh;

        background: url(images/contact-banner.jpg) center/cover;

        position: relative;

}

.contact-overlay {

        position: absolute;

        inset: 0;

        background: rgba(0, 0, 0, .55);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        color: #fff;

        padding: 20px;

}

.contact-overlay h1 {

        font-size: 60px;

        margin-bottom: 20px;

}

.contact-overlay p {

        max-width: 700px;

        font-size: 20px;

        line-height: 32px;

}

/* CONTACT PAGE */

.contact-page {

        padding: 55px 8%;

}

/*=================================
CONTACT PAGE
=================================*/

.contact-page {

        padding: 55px 8%;

        background: #f8f9fb;

}

.contact-page h1 {

        font-size: 42px;

        color: #0B3D91;

        text-align: center;

        margin-bottom: 12px;

}

.contact-page>p {

        text-align: center;

        max-width: 700px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

}

.contact-grid {

        display: grid;

        grid-template-columns: 0.9fr 1.3fr;

        gap: 35px;

        align-items: start;

}

.contact-info {

        display: flex;

        flex-direction: column;

        gap: 18px;

}

.info-card {

        background: #fff;

        padding: 26px;

        border-radius: 18px;

        border-left: 5px solid #0B3D91;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .35s;

}

.info-card:hover {

        transform: translateY(-6px);

}

.info-icon {

        font-size: 34px;

        margin-bottom: 12px;

}

.info-card h3 {

        color: #0B3D91;

        margin-bottom: 8px;

}

.info-card p,
.info-card a {

        color: #666;

        text-decoration: none;

        line-height: 28px;

}

.contact-form {

        background: #fff;

        padding: 40px;

        border-radius: 22px;

        box-shadow: 0 15px 35px rgba(0, 0, 0, .10);

}

.contact-form h2 {

        color: #0B3D91;

        margin-bottom: 10px;

}

.contact-form p {

        color: #666;

        margin-bottom: 22px;

}

.contact-form input,
.contact-form textarea {

        width: 100%;

        padding: 14px 16px;

        margin-bottom: 16px;

        border: 1px solid #ddd;

        border-radius: 10px;

        font-size: 15px;

        outline: none;

        transition: .3s;

}

.contact-form input:focus,
.contact-form textarea:focus {

        border-color: #0B3D91;

}

.contact-form button {

        width: 100%;

        padding: 15px;

        border: none;

        border-radius: 10px;

        background: #0B3D91;

        color: #fff;

        font-size: 17px;

        cursor: pointer;

        transition: .3s;

}

.contact-form button:hover {

        background: #FDB913;

        color: #111;

}

@media(max-width:768px) {

        .contact-grid {

                grid-template-columns: 1fr;

        }

}

/*=================================
OFFICE LOCATION
=================================*/

.office-location {

        padding: 55px 8%;

        background: #fff;

        text-align: center;

}

.office-location h2 {

        font-size: 42px;

        color: #0B3D91;

        margin-bottom: 15px;

}

.location-subtitle {

        max-width: 720px;

        margin: 0 auto 35px;

        color: #666;

        line-height: 30px;

}

.location-grid {

        display: grid;

        grid-template-columns: 1.4fr 1fr;

        gap: 30px;

        align-items: stretch;

}

.map-card iframe {

        width: 100%;

        height: 100%;

        min-height: 450px;

        border: none;

        border-radius: 20px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.location-details {

        display: flex;

        flex-direction: column;

        gap: 20px;

}

.location-box {

        background: #f8f9fb;

        padding: 25px;

        border-radius: 18px;

        text-align: left;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.location-box span {

        font-size: 34px;

}

.location-box h3 {

        margin: 12px 0;

        color: #0B3D91;

}

.location-box p {

        color: #666;

        line-height: 28px;

}

/*=================================
CONTACT STATS
=================================*/

.contact-stats {

        padding: 45px 8%;

        background: #0B3D91;

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

        gap: 20px;

        text-align: center;

}

.contact-stats .stat-card {

        color: #fff;

}

.contact-stats h2 {

        font-size: 42px;

        margin-bottom: 10px;

}

.contact-stats p {

        font-size: 18px;

}

@media(max-width:768px) {

        .location-grid {

                grid-template-columns: 1fr;

        }

        .map-card iframe {

                min-height: 320px;

        }

}

/*=================================
FLOATING WHATSAPP
=================================*/

.whatsapp-float {

        position: fixed;

        right: 25px;

        bottom: 25px;

        width: 60px;

        height: 60px;

        background: #25D366;

        color: #fff;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 30px;

        text-decoration: none;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .25);

        z-index: 999;

        transition: .3s;

}

.whatsapp-float:hover {

        transform: scale(1.1);

}

@media(max-width:768px) {

        .contact-overlay h1 {

                font-size: 36px;

                line-height: 46px;

        }

        .contact-overlay p {

                font-size: 16px;

                line-height: 28px;

        }

        .contact-page h1,

        .office-location h2 {

                font-size: 30px;

        }

        .whatsapp-float {

                width: 55px;

                height: 55px;

                font-size: 26px;

        }

}

.product-hero {

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;

        align-items: center;

        padding: 70px 8%;

        background: #f7f9fc;

}

.product-image img {

        width: 100%;

        border-radius: 20px;

        box-shadow: 0 15px 35px rgba(0, 0, 0, .15);

}

.product-tag {

        display: inline-block;

        background: #ffd54f;

        color: #0B3D91;

        padding: 8px 18px;

        border-radius: 30px;

        font-weight: 600;

        margin-bottom: 18px;

}

.product-info h1 {

        font-size: 48px;

        color: #0B3D91;

        margin-bottom: 20px;

}

.product-info p {

        font-size: 18px;

        line-height: 1.8;

        color: #555;

}

.hero-buttons {

        display: flex;

        gap: 18px;

        margin-top: 30px;

}

.btn-outline {

        padding: 14px 30px;

        border: 2px solid #0B3D91;

        color: #0B3D91;

        border-radius: 8px;

        text-decoration: none;

        font-weight: 600;

        transition: .3s;

}

.btn-outline:hover {

        background: #0B3D91;

        color: #fff;

}

.hero-stats {

        display: flex;

        gap: 35px;

        margin-top: 40px;

}

.hero-stats div {

        text-align: center;

}

.hero-stats h3 {

        color: #0B3D91;

        font-size: 30px;

}

.hero-stats p {

        margin-top: 6px;

        font-size: 15px;

}

/*========== Product Specification ==========*/

.specification {

        padding: 60px 8%;

        background: #ffffff;

}

.section-title {

        text-align: center;

        margin-bottom: 45px;

}

.section-title h2 {

        font-size: 40px;

        color: #0B3D91;

        margin-bottom: 12px;

}

.section-title p {

        max-width: 750px;

        margin: auto;

        color: #666;

        line-height: 1.8;

        font-size: 17px;

}

.spec-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

        gap: 25px;

}

.spec-card {

        background: #fff;

        padding: 28px;

        border-radius: 15px;

        text-align: center;

        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

        transition: .35s;

        border-top: 5px solid #0B3D91;

}

.spec-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 15px 35px rgba(0, 0, 0, .15);

}

.spec-card h3 {

        color: #0B3D91;

        margin-bottom: 15px;

        font-size: 22px;

}

.spec-card p {

        color: #555;

        line-height: 1.7;

        font-size: 16px;

}

/*========== Cotton Yarn Range ==========*/

.product-range {

        padding: 60px 8%;

        background: #f8fbff;

}

.range-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

        gap: 25px;

        margin-top: 40px;

}

.range-card {

        background: #fff;

        padding: 28px;

        border-radius: 15px;

        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

        transition: .35s;

        border-left: 5px solid #0B3D91;

}

.range-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 15px 35px rgba(0, 0, 0, .15);

}

.range-card h3 {

        color: #0B3D91;

        margin-bottom: 12px;

        font-size: 21px;

}

.range-card p {

        color: #555;

        line-height: 1.7;

        font-size: 16px;

}

/*========== Applications Section ==========*/

.applications {

        padding: 60px 8%;

        background: #ffffff;

}

.app-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));

        gap: 25px;

        margin-top: 40px;

}

.app-box {

        background: #fff;

        padding: 30px;

        border-radius: 16px;

        text-align: center;

        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

        transition: .35s;

        border-top: 5px solid #0B3D91;

}

.app-box:hover {

        transform: translateY(-8px);

        box-shadow: 0 18px 35px rgba(0, 0, 0, .15);

}

.app-icon {

        width: 75px;

        height: 75px;

        margin: auto;

        margin-bottom: 20px;

        border-radius: 50%;

        background: #eaf2ff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 34px;

}

.app-box h3 {

        color: #0B3D91;

        margin-bottom: 12px;

        font-size: 22px;

}

.app-box p {

        color: #555;

        line-height: 1.7;

        font-size: 16px;

}

/*=================================
AVAILABLE COUNTS
=================================*/

.counts {

        padding: 60px 8%;

        background: #f8fbff;

}

.count-grid {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 18px;

        margin-top: 40px;

}

.count-card {

        background: #fff;

        color: #0B3D91;

        font-size: 20px;

        font-weight: 600;

        padding: 16px 28px;

        border-radius: 50px;

        border: 2px solid #0B3D91;

        box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

        transition: .3s;

        cursor: default;

}

.count-card:hover {

        background: #0B3D91;

        color: #fff;

        transform: translateY(-5px);

        box-shadow: 0 12px 28px rgba(0, 0, 0, .15);

}

/*=================================
PACKING SECTION
=================================*/

.packing {

        padding: 60px 8%;

        background: #ffffff;

}

.packing-grid {

        display: grid;

        grid-template-columns: 1.4fr 1fr;

        gap: 35px;

        margin-top: 40px;

        align-items: start;

}

.packing-table table {

        width: 100%;

        border-collapse: collapse;

        background: #fff;

        border-radius: 18px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}

.packing-table th {

        background: #0B3D91;

        color: #fff;

        padding: 18px;

        font-size: 18px;

}

.packing-table td {

        padding: 16px 20px;

        border-bottom: 1px solid #eee;

        color: #555;

}

.packing-table tr:hover {

        background: #f8fbff;

}

.packing-info {

        display: flex;

        flex-direction: column;

        gap: 20px;

}

.packing-card {

        background: #fff;

        padding: 25px;

        border-left: 5px solid #FDB913;

        border-radius: 16px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

        transition: .3s;

}

.packing-card:hover {

        transform: translateY(-6px);

}

.packing-card h3 {

        color: #0B3D91;

        margin-bottom: 10px;

}

.packing-card p {

        color: #555;

        line-height: 1.7;

}

@media(max-width:768px) {

        .packing-grid {

                grid-template-columns: 1fr;

        }

}

/*=================================
QUALITY ASSURANCE
=================================*/

.quality {

        padding: 60px 8%;

        background: #f8fbff;

}

.quality-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: 25px;

        margin-top: 40px;

}

.quality-card {

        background: #fff;

        padding: 30px;

        border-radius: 18px;

        text-align: center;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        transition: .35s;

        border-top: 5px solid #0B3D91;

}

.quality-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 18px 35px rgba(0, 0, 0, .15);

}

.quality-icon {

        width: 75px;

        height: 75px;

        margin: auto;

        margin-bottom: 20px;

        border-radius: 50%;

        background: #eaf2ff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 34px;

}

.quality-card h3 {

        color: #0B3D91;

        margin-bottom: 12px;

        font-size: 22px;

}

.quality-card p {

        color: #555;

        line-height: 1.7;

        font-size: 16px;

}

/*=================================
CERTIFICATIONS
=================================*/

.certifications {

        padding: 60px 8%;

        background: #ffffff;

}

.certificate-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 25px;

        margin-top: 40px;

}

.certificate-card {

        background: #fff;

        padding: 28px;

        text-align: center;

        border-radius: 16px;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        border-bottom: 5px solid #FDB913;

        transition: .35s;

}

.certificate-card:hover {

        transform: translateY(-8px);

}

.certificate-card h3 {

        color: #0B3D91;

        margin-bottom: 12px;

}

.certificate-card p {

        color: #666;

        line-height: 1.7;

}

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

.product-cta {

        padding: 65px 8%;

        text-align: center;

        background: linear-gradient(135deg, #0B3D91, #1b5fc9);

        color: #ffffff;

}

.product-cta h2 {

        font-size: 42px;

        margin-bottom: 18px;

        color: #FDB913;

}

.product-cta p {

        max-width: 700px;

        margin: auto;

        line-height: 30px;

        margin-bottom: 35px;

}

.cta-buttons {

        display: flex;

        justify-content: center;

        gap: 20px;

        flex-wrap: wrap;

}

.product-cta .btn {

        background: #FDB913;

        color: #111;

}

.product-cta .btn:hover {

        background: #fff;

}

.product-cta .btn-outline {

        border: 2px solid #fff;

        color: #fff;

}

.product-cta .btn-outline:hover {

        background: #fff;

        color: #0B3D91;

}

/* =========================================
   PRODUCT PAGE - QUOTATION CTA
   ========================================= */

.product-enquiry {
        width: 100%;
        box-sizing: border-box;
        padding: 70px 20px;
        margin: 50px 0 0;
        background: #f5f7fa;
        text-align: center;
}

.product-enquiry .section-title {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
}

.product-enquiry .section-title h2 {
        margin: 0 0 18px;
}

.product-enquiry .section-title p {
        margin: 0 auto 28px;
        max-width: 750px;
}

.product-enquiry .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 15px 35px;
        min-width: 240px;
        border-radius: 8px;
        box-sizing: border-box;
}


/* =========================================
   ABOUT PAGE - OUR MISSION
   ========================================= */

.mission {
        width: 100%;
        box-sizing: border-box;
        padding: 80px 20px;
        background: #f5f7fa;
}

.mission .section-title {
        max-width: 900px;
        margin: 0 auto 50px;
        text-align: center;
}

.mission .section-title h2 {
        margin-bottom: 18px;
}

.mission .section-title p {
        max-width: 850px;
        margin: 0 auto;
        line-height: 1.8;
}


/* Mission boxes */

.mission-content {
        width: 100%;
        max-width: 1150px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
}

.mission-box {
        background: #ffffff;
        padding: 30px 25px;
        border-radius: 12px;

        text-align: center;

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

        box-sizing: border-box;
        min-height: 220px;

        display: flex;
        flex-direction: column;
        justify-content: center;
}

.mission-box h3 {
        margin: 0 0 15px;
        font-size: 21px;
        color: #123f91;
}

.mission-box p {
        margin: 0;
        line-height: 1.7;
        color: #555;
        font-size: 15px;
}


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

@media (max-width: 1000px) {

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

}


@media (max-width: 600px) {

        .product-enquiry {
                padding: 55px 15px;
        }

        .product-enquiry .section-title h2 {
                font-size: 30px;
        }

        .product-enquiry .section-title p {
                font-size: 15px;
                line-height: 1.7;
        }

        .mission {
                padding: 60px 15px;
        }

        .mission .section-title {
                margin-bottom: 35px;
        }

        .mission-content {
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .mission-box {
                min-height: auto;
                padding: 25px 20px;
        }

}

/* =========================================
   PRODUCT CTA SECTION
   ========================================= */

.product-cta {
        width: 100%;
        padding: 65px 20px;
        margin: 50px 0 0;
        background: #f5f7fa;
        box-sizing: border-box;
}

.product-cta-content {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        text-align: center;
}

.product-cta-content h2 {
        margin: 0 0 18px;
        font-size: 42px;
        font-weight: 700;
        color: #123f91;
}

.product-cta-content p {
        margin: 0 auto 28px;
        max-width: 700px;
        font-size: 17px;
        line-height: 1.7;
        color: #555;
}

.product-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 250px;
        padding: 15px 30px;

        background: #ffb814;
        color: #111;

        text-decoration: none;
        font-size: 16px;
        font-weight: 700;

        border-radius: 8px;

        transition: 0.3s ease;
}

.product-cta-btn:hover {
        transform: translateY(-2px);
}


/* Mobile */

@media (max-width: 600px) {

        .product-cta {
                padding: 50px 15px;
                margin-top: 35px;
        }

        .product-cta-content h2 {
                font-size: 30px;
        }

        .product-cta-content p {
                font-size: 15px;
        }

        .product-cta-btn {
                width: 100%;
                max-width: 280px;
        }

}

/* =========================================
   GLOBAL MOBILE RESPONSIVE FIX
   ========================================= */

html,
body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
}

* {
        box-sizing: border-box;
}

img {
        max-width: 100%;
        height: auto;
}


/* =========================================
   HEADER / NAVBAR
   ========================================= */

header {
        width: 100%;
        max-width: 100%;
}

nav {
        width: 100%;
        max-width: 100%;
}

nav ul {
        max-width: 100%;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

        .container {
                width: 100%;
                max-width: 100%;
                padding-left: 20px;
                padding-right: 20px;
        }

        .hero,
        .about-hero {
                width: 100%;
        }

        .hero img,
        .about-hero img {
                width: 100%;
                height: auto;
        }

        .spec-grid,
        .mission-content,
        .why-grid,
        .requirements-grid,
        .process-grid,
        .about-grid {
                grid-template-columns: repeat(2, 1fr);
        }

}


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

@media (max-width: 768px) {

        /* Prevent horizontal scrolling */

        html,
        body {
                width: 100%;
                overflow-x: hidden;
        }

        body {
                margin: 0;
        }


        /* Header */

        header {
                width: 100%;
                overflow: visible;
        }


        /* Navigation */

        nav {
                width: 100%;
        }

        nav ul {
                width: 100%;
                max-width: 100%;
        }


        /* General sections */

        section {
                max-width: 100%;
        }


        /* Section title */

        .section-title {
                width: 100%;
                padding-left: 15px;
                padding-right: 15px;
                text-align: center;
        }

        .section-title h2 {
                font-size: 30px;
                line-height: 1.2;
        }

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


        /* Hero */

        .hero,
        .about-hero {
                min-height: 350px;
        }

        .hero img,
        .about-hero img {
                width: 100%;
                height: 350px;
                object-fit: cover;
        }


        /* Hero text */

        .hero h1,
        .about-overlay h1 {
                font-size: 32px;
                line-height: 1.2;
        }

        .hero p,
        .about-overlay p {
                font-size: 15px;
                line-height: 1.6;
        }


        /* Company About */

        .company-about {
                width: 100%;
                padding: 50px 15px;
                display: flex;
                flex-direction: column;
        }

        .about-left,
        .about-right {
                width: 100%;
                max-width: 100%;
        }

        .about-left img {
                width: 100%;
                height: auto;
        }


        /* Highlights */

        .about-highlights {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
        }

        .highlight-box {
                width: 100%;
        }


        /* Product specifications */

        .specification {
                width: 100%;
                padding: 50px 15px;
        }

        .spec-grid {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .spec-card {
                width: 100%;
                max-width: 100%;
        }


        /* Mission */

        .mission {
                width: 100%;
                padding: 55px 15px;
        }

        .mission-content {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .mission-box {
                width: 100%;
                min-height: auto;
        }


        /* Why choose */

        .why-choose {
                width: 100%;
                padding: 55px 15px;
        }

        .why-grid {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .why-card {
                width: 100%;
        }


        /* Export process */

        .export-process {
                width: 100%;
                padding: 55px 15px;
        }

        .process-grid {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .process-card {
                width: 100%;
        }


        /* Buyer requirements */

        .buyer-requirements {
                width: 100%;
                padding: 55px 15px;
        }

        .requirements-grid {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .requirement-card {
                width: 100%;
        }


        /* Product CTA */

        .product-cta {
                width: 100%;
                padding: 50px 15px;
                margin-top: 30px;
        }

        .product-cta-content {
                width: 100%;
        }

        .product-cta-content h2 {
                font-size: 30px;
                line-height: 1.2;
        }

        .product-cta-content p {
                font-size: 15px;
                line-height: 1.6;
        }

        .product-cta-btn {
                width: 100%;
                max-width: 280px;
        }


        /* Contact form */

        .contact-form {
                width: 100%;
                padding: 0 15px;
        }

        .form-group {
                width: 100%;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
                width: 100%;
                max-width: 100%;
        }


        /* Gallery */

        .gallery,
        .gallery-grid {
                width: 100%;
                padding-left: 15px;
                padding-right: 15px;
        }

        .gallery-grid {
                grid-template-columns: 1fr;
                gap: 15px;
        }

        .gallery-grid img {
                width: 100%;
                height: auto;
                display: block;
        }


        /* Products */

        .products-grid,
        .product-grid {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 20px;
                padding-left: 15px;
                padding-right: 15px;
        }


        /* Footer */

        footer {
                width: 100%;
                overflow: hidden;
        }

        footer .container {
                width: 100%;
                padding-left: 20px;
                padding-right: 20px;
        }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

        .section-title h2 {
                font-size: 27px;
        }

        .hero,
        .about-hero {
                min-height: 300px;
        }

        .hero img,
        .about-hero img {
                height: 300px;
        }

        .hero h1,
        .about-overlay h1 {
                font-size: 27px;
        }

        .about-highlights {
                grid-template-columns: 1fr;
        }

        .product-cta-content h2 {
                font-size: 27px;
        }

}


/* =========================================
   DISABLE SCROLL ANIMATIONS
   ========================================= */

[data-aos] {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important;
}

.aos-init,
.aos-animate {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
}


/* =========================================
   NORMAL PAGE SCROLL
   ========================================= */

html {
        scroll-behavior: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
}

body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
}





/* ============================= */
/* FACTORY LOCATIONS */
/* ============================= */

.location-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        width: 100%;
}

.factory-card {
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.factory-map {
        position: relative;
        width: 100%;
        height: 350px;
}

.factory-map iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
}

.map-link {
        position: absolute;
        left: 15px;
        bottom: 15px;
        padding: 10px 16px;
        background: #123f91;
        color: #ffffff;
        text-decoration: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
}

.map-link:hover {
        background: #0d2f70;
}

.factory-info {
        padding: 25px;
}

.factory-icon {
        font-size: 30px;
}

.factory-info h3 {
        margin: 10px 0 6px;
        color: #123f91;
        font-size: 24px;
}

.factory-location {
        margin: 0 0 15px;
        font-weight: 600;
        color: #555;
}

.factory-address {
        margin: 0;
        color: #555;
        line-height: 1.7;
}