/* =========================================
           ROOT VARIABLES
        ========================================= */

        :root {
            --navy: #062a5c;
            --navy-dark: #031b3d;
            --blue: #0a3b78;
            --gold: #c99a32;
            --gold-light: #e2bd68;
            --cream: #f8f6f0;
            --light-blue: #f2f6fb;
            --text: #172033;
            --muted: #687386;
            --white: #ffffff;
            --border: #e6e9ef;

            --heading-font: "Playfair Display", serif;
            --body-font: "DM Sans", sans-serif;
        }

        /* =========================================
           GENERAL
        ========================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--body-font);
            color: var(--text);
            background: var(--white);
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .section-padding {
            padding: 100px 0;
        }

        .section-label {
            color: var(--gold);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .section-title {
            font-family: var(--heading-font);
            font-size: clamp(32px, 4vw, 52px);
            line-height: 1.15;
            color: var(--navy-dark);
            margin-bottom: 20px;
        }

        .section-description {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.8;
            max-width: 650px;
        }

        .btn-gold {
            background: var(--gold);
            border: 1px solid var(--gold);
            color: var(--white);
            padding: 14px 28px;
            border-radius: 3px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-gold:hover {
            background: var(--navy);
            border-color: var(--navy);
            color: var(--white);
            transform: translateY(-2px);
        }

        .btn-outline-light-custom {
            border: 1px solid rgba(255,255,255,0.6);
            color: white;
            padding: 14px 28px;
            border-radius: 3px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-outline-light-custom:hover {
            background: white;
            color: var(--navy);
        }

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

        .navbar {
            padding: 15px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.97);
        }

        .navbar.scrolled {
            background: rgba(255,255,255,0.97);
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            padding: 9px 0;
        }

        .navbar-brand img {
            width: 165px;
            height: auto;
        }

        .nav-link {
            color: var(--navy) !important;
            font-size: 14px;
            font-weight: 600;
            margin: 0 8px;
            transition: 0.3s;
        }

        .navbar.scrolled .nav-link {
            color: var(--navy) !important;
        }

        .nav-link:hover {
            color: var(--gold-light) !important;
        }

        .navbar-toggler {
            border: none;
            color: white;
        }

        .navbar.scrolled .navbar-toggler {
            color: var(--navy);
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .catalog-btn {
            background: var(--gold);
            color: white !important;
            padding: 11px 20px !important;
            border-radius: 3px;
        }

        .catalog-btn:hover {
            background: var(--navy);
        }


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

        .hero {
            min-height: 100vh;
            background:
                linear-gradient(
                    90deg,
                    rgba(2,20,48,0.96) 0%,
                    rgba(3,29,63,0.86) 45%,
                    rgba(3,29,63,0.30) 100%
                ),
                url("https://images.unsplash.com/photo-1583845112203-454c2c0c5f45?auto=format&fit=crop&w=2000&q=85")
                center/cover no-repeat;

            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-content {
            padding-top: 80px;
            max-width: 760px;
        }

        .hero-label {
            color: var(--gold-light);
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .hero h1 {
            color: white;
            font-family: var(--heading-font);
            font-size: clamp(45px, 6vw, 78px);
            line-height: 1.08;
            margin-bottom: 25px;
        }

        .hero h1 span {
            color: var(--gold-light);
        }

        .hero p {
            color: rgba(255,255,255,0.82);
            font-size: 18px;
            line-height: 1.8;
            max-width: 650px;
            margin-bottom: 35px;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .hero-bottom {
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
        }

        .hero-trust {
            display: flex;
            gap: 35px;
            color: rgba(255,255,255,0.75);
            font-size: 13px;
            flex-wrap: wrap;
        }

        .hero-trust i {
            color: var(--gold-light);
            margin-right: 7px;
        }


        /* =========================================
           USP STRIP
        ========================================= */

        .usp-strip {
            background: var(--navy);
            padding: 28px 0;
        }

        .usp-item {
            color: white;
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px 20px;
            border-right: 1px solid rgba(255,255,255,0.15);
        }

        .usp-item:last-child {
            border-right: none;
        }

        .usp-icon {
            font-size: 28px;
            color: var(--gold-light);
        }

        .usp-item strong {
            display: block;
            font-size: 15px;
        }

        .usp-item span {
            color: rgba(255,255,255,0.65);
            font-size: 12px;
        }


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

        .about-section {
            background: var(--cream);
        }

        .about-image {
            position: relative;
            padding-right: 30px;
            padding-bottom: 30px;
        }

        .about-image img {
            width: 100%;
            height: 570px;
            object-fit: cover;
            border-radius: 3px;
        }

        .about-badge {
            position: absolute;
            right: 0;
            bottom: 0;
            background: var(--gold);
            color: white;
            width: 180px;
            height: 180px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .about-badge strong {
            font-family: var(--heading-font);
            font-size: 38px;
        }

        .about-list {
            margin-top: 30px;
        }

        .about-list-item {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .about-list-item i {
            color: var(--gold);
            font-size: 20px;
        }

        .about-list-item strong {
            display: block;
            margin-bottom: 5px;
        }

        .about-list-item span {
            color: var(--muted);
            font-size: 14px;
        }


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

        .products-section {
            background: white;
        }

        .product-card {
            background: white;
            border: 1px solid var(--border);
            overflow: hidden;
            height: 100%;
            transition: all 0.4s ease;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(6,42,92,0.12);
        }

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

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

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

        .product-number {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--gold);
            color: white;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 700;
        }

        .product-content {
            padding: 25px;
        }

        .product-content h4 {
            font-family: var(--heading-font);
            color: var(--navy);
            font-size: 23px;
            margin-bottom: 12px;
        }

        .product-content p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 18px;
        }

        .product-link {
            color: var(--navy);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .product-link i {
            color: var(--gold);
            margin-left: 5px;
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 50px;
            height: 50px;
            top: -75px;
            bottom: auto;
            opacity: 1;
            background: var(--navy);
        }

        .carousel-control-prev {
            left: auto;
            right: 65px;
        }

        .carousel-control-next {
            right: 0;
        }


        /* =========================================
           SPECIFICATIONS
        ========================================= */

        .spec-section {
            background: var(--light-blue);
        }

        .spec-box {
            background: white;
            padding: 30px;
            height: 100%;
            border-left: 3px solid var(--gold);
            transition: 0.3s;
        }

        .spec-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(6,42,92,0.08);
        }

        .spec-box i {
            font-size: 30px;
            color: var(--gold);
            margin-bottom: 20px;
        }

        .spec-box h5 {
            color: var(--navy);
            font-weight: 700;
        }

        .spec-box p {
            color: var(--muted);
            font-size: 14px;
            margin: 0;
            line-height: 1.7;
        }


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

        .why-section {
            background: var(--navy-dark);
            color: white;
        }

        .why-section .section-title {
            color: white;
        }

        .why-section .section-description {
            color: rgba(255,255,255,0.65);
        }

        .why-card {
            padding: 35px;
            border: 1px solid rgba(255,255,255,0.12);
            height: 100%;
            transition: 0.3s;
        }

        .why-card:hover {
            background: rgba(255,255,255,0.05);
            border-color: var(--gold);
        }

        .why-card span {
            font-family: var(--heading-font);
            font-size: 40px;
            color: var(--gold);
        }

        .why-card h4 {
            color: white;
            margin: 15px 0;
            font-size: 21px;
        }

        .why-card p {
            color: rgba(255,255,255,0.6);
            font-size: 14px;
            line-height: 1.8;
            margin: 0;
        }
        
        /*Country*/
        
        .countries-grid{

    margin-top:45px;

    display:grid;

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

    gap:22px;

}



.country-card{

    background:#fff;

    min-height:120px;

    padding:22px 15px;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border:1px solid #eee;

    transition:.3s;

}



.country-card img{

    width:55px;

    height:35px;

    object-fit:cover;

    border-radius:4px;

    margin-bottom:14px;

}



.country-card h5{

    font-size:15px;

    color:#0B2343;

    font-weight:600;

    margin:0;

}



.country-card:hover{

    transform:translateY(-5px);

    border-color:#C9A227;

}

@media(max-width:992px){

.countries-grid{

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

}

}

@media(max-width:576px){

.section-title h2{

font-size:30px;

}


.section-title p{

font-size:15px;

}


.countries-grid{

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

gap:15px;

}


.country-card{

min-height:110px;

}

}

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

        .quality-section {
            background: var(--cream);
        }

        .cert-card {
            background: white;
            padding: 35px 25px;
            text-align: center;
            border: 1px solid var(--border);
            height: 100%;
        }

        .cert-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            background: var(--light-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            font-size: 28px;
        }

        .cert-card h5 {
            color: var(--navy);
        }

        .cert-card p {
            color: var(--muted);
            font-size: 13px;
            margin: 0;
        }

        .cert-note {
            margin-top: 40px;
            background: var(--navy);
            padding: 20px 25px;
            color: rgba(255,255,255,0.75);
            font-size: 13px;
        }


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

        .process-section {
            background: white;
        }

        .process-step {
            position: relative;
            text-align: center;
            padding: 20px;
        }

        .process-number {
            width: 70px;
            height: 70px;
            background: var(--navy);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-family: var(--heading-font);
            font-size: 24px;
            border: 5px solid var(--cream);
            outline: 1px solid var(--gold);
        }

        .process-step h5 {
            color: var(--navy);
            font-weight: 700;
        }

        .process-step p {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .process-line {
            position: absolute;
            top: 55px;
            left: 60%;
            width: 80%;
            height: 1px;
            background: var(--gold);
        }


        /* =========================================
           INDUSTRIES
        ========================================= */

        .industry-section {
            background: var(--light-blue);
        }

        .industry-card {
            min-height: 250px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: end;
            color: white;
            background-size: cover;
            background-position: center;
        }

        .industry-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                0deg,
                rgba(2,20,48,0.9),
                rgba(2,20,48,0.1)
            );
        }

        .industry-card > * {
            position: relative;
        }

        .industry-card h4 {
            font-family: var(--heading-font);
        }

        .industry-card p {
            font-size: 13px;
            color: rgba(255,255,255,0.75);
            margin: 0;
        }


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

        .cta-section {
            background:
                linear-gradient(
                    90deg,
                    rgba(3,27,61,0.98),
                    rgba(6,42,92,0.88)
                ),
                url("https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=1800&q=80")
                center/cover;
            padding: 100px 0;
            color: white;
        }

        .cta-section h2 {
            font-family: var(--heading-font);
            font-size: clamp(35px, 5vw, 60px);
        }

        .cta-section p {
            color: rgba(255,255,255,0.7);
            max-width: 650px;
            margin: 20px auto 30px;
        }


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

        .faq-section {
            background: var(--cream);
        }

        .accordion-item {
            border: none;
            border-bottom: 1px solid var(--border);
            background: transparent;
        }

        .accordion-button {
            background: transparent;
            color: var(--navy);
            font-weight: 700;
            padding: 22px 0;
            box-shadow: none !important;
        }

        .accordion-button:not(.collapsed) {
            color: var(--gold);
            background: transparent;
        }

        .accordion-body {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
            padding: 0 0 25px;
        }


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

        footer {
            background: #02152f;
            color: white;
            padding-top: 70px;
        }
        .footer-logo-new {
               width: 50%;
               margin-bottom: 15px;
        }
        .footer-about {
            color: rgba(255,255,255,0.6);
            font-size: 14px;
            line-height: 1.8;
        }

        .footer-title {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 22px;
            color: white;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            transition: 0.3s;
        }

        .footer-links a:hover {
            color: var(--gold-light);
        }

        .social-links {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .social-links a:hover {
            background: var(--gold);
            border-color: var(--gold);
        }

        .footer-bottom {
            margin-top: 60px;
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.45);
            font-size: 12px;
        }


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

        .whatsapp-float {
            position: fixed;
            right: 25px;
            bottom: 25px;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #25D366;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            z-index: 999;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            transition: 0.3s;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            color: white;
        }


        /* =========================================
           ANIMATIONS
        ========================================= */

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }


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

        @media (max-width: 991px) {

            .navbar {
                background: white;
            }

            .nav-link {
                color: var(--navy) !important;
                padding: 12px 0 !important;
            }

            .navbar-toggler {
                color: var(--navy);
            }

            .navbar-collapse {
                background: white;
                padding: 20px;
                margin-top: 10px;
            }

            .hero {
                min-height: 850px;
            }

            .section-padding {
                padding: 75px 0;
            }

            .about-image {
                margin-bottom: 50px;
            }

            .usp-item {
                border-right: none;
                margin-bottom: 10px;
            }

            .process-line {
                display: none;
            }
        }

        @media (max-width: 767px) {

            .navbar-brand img {
                width: 140px;
            }

            .hero {
                min-height: 800px;
            }

            .hero h1 {
                font-size: 44px;
            }

            .hero p {
                font-size: 16px;
            }

            .hero-trust {
                gap: 15px;
                flex-direction: column;
            }

            .about-image img {
                height: 400px;
            }

            .about-badge {
                width: 140px;
                height: 140px;
                padding: 15px;
            }

            .about-badge strong {
                font-size: 30px;
            }

            .carousel-control-prev,
            .carousel-control-next {
                top: -60px;
            }

            .process-step {
                margin-bottom: 30px;
            }

            .whatsapp-float {
                width: 52px;
                height: 52px;
                right: 18px;
                bottom: 18px;
            }
        }



         /* =========================================

           ROOT COLORS

        ========================================= */

      :root {
        --primary: #062b63;

        --primary-dark: #041d43;

        --gold: #c99732;

        --gold-light: #e2b95e;

        --light: #f7f8fa;

        --text: #222222;

        --muted: #6c757d;

        --white: #ffffff;
      }

      /* =========================================

           GLOBAL

        ========================================= */

      * {
        margin: 0;

        padding: 0;

        box-sizing: border-box;
      }

      body {
        font-family: "DM Sans", sans-serif;

        color: var(--text);

        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        font-family: "Playfair Display", serif;
      }

      a {
        text-decoration: none;
      }

      /* =========================================

           NAVBAR

        ========================================= */

      .navbar {
        background: rgba(255, 255, 255, 0.98);

        padding: 14px 0;

        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);

        position: relative;

        z-index: 1000;
      }

      .navbar-brand img {
        width: 155px;

        height: auto;
      }

      .navbar-nav .nav-link {
        color: var(--primary);

        font-weight: 600;

        margin: 0 12px;

        transition: 0.3s;
      }

      .navbar-nav .nav-link:hover,
      .navbar-nav .nav-link.active {
        color: var(--gold);
      }

      .catalog-btn {
        background: var(--primary);

        color: #fff !important;

        padding: 11px 23px !important;

        border-radius: 4px;

        transition: 0.3s;
      }

      .catalog-btn:hover {
        background: var(--gold);
      }

      /* =========================================

           PAGE HERO

        ========================================= */

      .page-hero {
        position: relative;

        background:
          linear-gradient(rgba(4, 29, 67, 0.88), rgba(4, 29, 67, 0.88)),
          url("images/about-banner.jpg") center / cover no-repeat;

        padding: 100px 0;

        color: #fff;

        text-align: center;
      }

      .page-hero h1 {
        font-size: clamp(38px, 5vw, 65px);

        margin-bottom: 15px;
      }

      .page-hero h1 span {
        color: var(--gold-light);
      }

      .page-hero p {
        max-width: 700px;

        margin: auto;

        color: rgba(255, 255, 255, 0.85);
      }

      .breadcrumb {
        justify-content: center;

        margin-top: 20px;

        margin-bottom: 0;
      }

      .breadcrumb-item,
      .breadcrumb-item a {
        color: #fff;
      }

      .breadcrumb-item.active {
        color: var(--gold-light);
      }

      /* =========================================

           COMMON SECTION

        ========================================= */

      .section-padding {
        padding: 90px 0;
      }

      .section-tag {
        display: block;

        color: var(--gold);

        font-size: 14px;

        font-weight: 700;

        letter-spacing: 2px;

        text-transform: uppercase;

        margin-bottom: 10px;
      }

      .section-title {
        color: var(--primary);

        font-size: clamp(32px, 4vw, 48px);

        margin-bottom: 20px;
      }

      .section-description {
        color: var(--muted);

        line-height: 1.8;
      }

      /* =========================================

           ABOUT INTRO

        ========================================= */

      .about-intro {
        background: #fff;
      }

      .about-image {
        position: relative;
      }

      .about-image img {
        width: 100%;

        height: 560px;

        object-fit: cover;
      }

      .experience-box {
        position: absolute;

        right: -25px;

        bottom: 30px;

        background: var(--primary);

        color: #fff;

        padding: 25px 35px;

        text-align: center;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      .experience-box strong {
        display: block;

        font-family: "Playfair Display", serif;

        font-size: 35px;

        color: var(--gold-light);
      }

      .experience-box span {
        font-size: 14px;
      }

      .about-content {
        padding-left: 45px;
      }

      .about-content p {
        color: var(--muted);

        line-height: 1.85;

        margin-bottom: 20px;
      }

      .gold-line {
        width: 70px;

        height: 3px;

        background: var(--gold);

        margin: 25px 0;
      }

      /* =========================================

           COMPANY HIGHLIGHTS

        ========================================= */

      .highlights-section {
        background: var(--light);
      }

      .highlight-card {
        background: #fff;

        padding: 35px 25px;

        height: 100%;

        border: 1px solid #eee;

        transition: 0.3s;
      }

      .highlight-card:hover {
        transform: translateY(-8px);

        box-shadow: 0 15px 35px rgba(6, 43, 99, 0.1);

        border-color: var(--gold);
      }

      .highlight-icon {
        width: 60px;

        height: 60px;

        background: rgba(201, 151, 50, 0.12);

        color: var(--gold);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 27px;

        margin-bottom: 20px;

        border-radius: 50%;
      }

      .highlight-card h4 {
        color: var(--primary);

        font-size: 22px;

        margin-bottom: 12px;
      }

      .highlight-card p {
        color: var(--muted);

        line-height: 1.7;

        margin-bottom: 0;
      }

      /* =========================================

           MISSION VISION

        ========================================= */

      .mission-section {
        background: var(--primary);

        color: #fff;
      }

      .mission-card {
        height: 100%;

        padding: 45px 35px;

        border: 1px solid rgba(255, 255, 255, 0.15);

        background: rgba(255, 255, 255, 0.04);
      }

      .mission-card i {
        font-size: 45px;

        color: var(--gold-light);

        display: block;

        margin-bottom: 20px;
      }

      .mission-card h3 {
        font-size: 30px;

        margin-bottom: 15px;
      }

      .mission-card p {
        color: rgba(255, 255, 255, 0.75);

        line-height: 1.8;

        margin-bottom: 0;
      }

      /* =========================================

           USP SECTION

        ========================================= */

      .usp-section {
        background: #fff;
      }

      .usp-item {
        display: flex;

        gap: 20px;

        margin-bottom: 30px;
      }

      .usp-number {
        width: 50px;

        height: 50px;

        flex-shrink: 0;

        background: var(--primary);

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        font-weight: 700;

        border-radius: 50%;
      }

      .usp-item h5 {
        color: var(--primary);

        font-family: "DM Sans", sans-serif;

        font-weight: 700;

        margin-bottom: 6px;
      }

      .usp-item p {
        color: var(--muted);

        line-height: 1.7;

        margin: 0;
      }

      .usp-image img {
        width: 100%;

        height: 550px;

        object-fit: cover;
      }

      /* =========================================

           PRODUCT RANGE

        ========================================= */

      .product-range {
        background: var(--light);
      }

      .product-item {
        position: relative;

        overflow: hidden;

        height: 300px;
      }

      .product-item img {
        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: 0.5s;
      }

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

      .product-overlay {
        position: absolute;

        inset: 0;

        display: flex;

        align-items: flex-end;

        padding: 25px;

        background: linear-gradient(transparent, rgba(4, 29, 67, 0.9));
      }

      .product-overlay h4 {
        color: #fff;

        margin: 0;

        font-size: 23px;
      }

      /* =========================================

           QUALITY CTA

        ========================================= */

      .quality-cta {
        background:
          linear-gradient(rgba(6, 43, 99, 0.94), rgba(4, 29, 67, 0.94)),
          url("images/textile-bg.jpg") center / cover;

        padding: 80px 0;

        text-align: center;

        color: #fff;
      }

      .quality-cta h2 {
        font-size: clamp(32px, 4vw, 48px);

        margin-bottom: 15px;
      }

      .quality-cta p {
        max-width: 700px;

        margin: 0 auto 30px;

        color: rgba(255, 255, 255, 0.8);

        line-height: 1.8;
      }

      .cta-btn {
        display: inline-block;

        background: var(--gold);

        color: #fff;

        padding: 14px 32px;

        font-weight: 600;

        transition: 0.3s;
      }

      .cta-btn:hover {
        background: #fff;

        color: var(--primary);
      }

      /* =========================================

           FOOTER

        ========================================= */

      footer {
        background: #031a3b;

        color: rgba(255, 255, 255, 0.7);

        padding-top: 70px;
      }

      .footer-logo {
        width: 170px;

        margin-bottom: 20px;

        background: #fff;

        padding: 8px;
      }

      .footer-about {
        line-height: 1.8;

        max-width: 300px;
      }

      footer h5 {
        color: #fff;

        font-family: "DM Sans", sans-serif;

        font-weight: 700;

        margin-bottom: 22px;
      }

      .footer-links {
        list-style: none;

        padding: 0;
      }

      .footer-links li {
        margin-bottom: 12px;
      }

      .footer-links a {
        color: rgba(255, 255, 255, 0.7);

        transition: 0.3s;
      }

      .footer-links a:hover {
        color: var(--gold-light);

        padding-left: 5px;
      }

      .footer-contact {
        display: flex;

        gap: 12px;

        margin-bottom: 15px;
      }

      .footer-contact i {
        color: var(--gold-light);

        font-size: 18px;
      }

      .social-icons {
        display: flex;

        gap: 10px;

        margin-top: 20px;
      }

      .social-icons a {
        width: 40px;

        height: 40px;

        border: 1px solid rgba(255, 255, 255, 0.2);

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        transition: 0.3s;
      }

      .social-icons a:hover {
        background: var(--gold);

        border-color: var(--gold);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);

        margin-top: 50px;

        padding: 20px 0;

        font-size: 14px;
      }

      /* =========================================

           WHATSAPP

        ========================================= */

      .whatsapp-float {
        position: fixed;

        right: 25px;

        bottom: 25px;

        width: 58px;

        height: 58px;

        background: #25d366;

        color: #fff;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 30px;

        z-index: 999;

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

        transition: 0.3s;
      }

      .whatsapp-float:hover {
        transform: scale(1.1);

        color: #fff;
      }

      /* =========================================

           RESPONSIVE

        ========================================= */

      @media (max-width: 991px) {
        .navbar-nav {
          padding-top: 20px;
        }

        .navbar-nav .nav-link {
          margin: 6px 0;
        }

        .catalog-btn {
          display: inline-block;

          margin-top: 10px;
        }

        .section-padding {
          padding: 70px 0;
        }

        .about-content {
          padding-left: 0;

          margin-top: 50px;
        }

        .experience-box {
          right: 20px;
        }
      }

      @media (max-width: 767px) {
        .navbar-brand img {
          width: 130px;
        }

        .page-hero {
          padding: 70px 20px;
        }

        .about-image img {
          height: 400px;
        }

        .experience-box {
          right: 15px;

          bottom: 15px;

          padding: 18px 25px;
        }

        .experience-box strong {
          font-size: 28px;
        }

        .usp-image img {
          height: 350px;

          margin-bottom: 40px;
        }

        .product-item {
          height: 250px;
        }

        .whatsapp-float {
          width: 52px;

          height: 52px;

          right: 18px;

          bottom: 18px;

          font-size: 26px;
        }
      }



      /* =========================================

           ROOT COLORS

        ========================================= */

      :root {
        --primary: #062b63;

        --primary-dark: #041d43;

        --gold: #c99732;

        --gold-light: #e2b95e;

        --light: #f7f8fa;

        --text: #222222;

        --muted: #6c757d;

        --white: #ffffff;
      }

      /* =========================================

           GLOBAL

        ========================================= */

      * {
        margin: 0;

        padding: 0;

        box-sizing: border-box;
      }

      body {
        font-family: "DM Sans", sans-serif;

        color: var(--text);

        overflow-x: hidden;

        background: #fff;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        font-family: "Playfair Display", serif;
      }

      a {
        text-decoration: none;
      }

      /* =========================================

           NAVBAR

        ========================================= */

      .navbar {
        background: rgba(255, 255, 255, 0.98);

        padding: 14px 0;

        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);

        position: relative;

        z-index: 1000;
      }

      .navbar-brand img {
        width: 155px;

        height: auto;
      }

      .navbar-nav .nav-link {
        color: var(--primary);

        font-weight: 600;

        margin: 0 12px;

        transition: 0.3s;
      }

      .navbar-nav .nav-link:hover,
      .navbar-nav .nav-link.active {
        color: var(--gold);
      }

      .catalog-btn {
        background: var(--primary);

        color: #fff !important;

        padding: 11px 23px !important;

        border-radius: 4px;

        transition: 0.3s;
      }

      .catalog-btn:hover {
        background: var(--gold);
      }

      /* =========================================

           PAGE HERO

        ========================================= */

      .page-hero {
        position: relative;

        background:
          linear-gradient(rgba(4, 29, 67, 0.88), rgba(4, 29, 67, 0.88)),
          url("images/products-banner.jpg") center / cover no-repeat;

        padding: 100px 0;

        color: #fff;

        text-align: center;
      }

      .page-hero h1 {
        font-size: clamp(38px, 5vw, 65px);

        margin-bottom: 15px;
      }

      .page-hero h1 span {
        color: var(--gold-light);
      }

      .page-hero p {
        max-width: 750px;

        margin: auto;

        color: rgba(255, 255, 255, 0.85);

        line-height: 1.8;
      }

      .breadcrumb {
        justify-content: center;

        margin-top: 20px;

        margin-bottom: 0;
      }

      .breadcrumb-item,
      .breadcrumb-item a {
        color: #fff;
      }

      .breadcrumb-item.active {
        color: var(--gold-light);
      }

      /* =========================================

           COMMON SECTION

        ========================================= */

      .section-padding {
        padding: 90px 0;
      }

      .section-tag {
        display: block;

        color: var(--gold);

        font-size: 14px;

        font-weight: 700;

        letter-spacing: 2px;

        text-transform: uppercase;

        margin-bottom: 10px;
      }

      .section-title {
        color: var(--primary);

        font-size: clamp(32px, 4vw, 48px);

        margin-bottom: 20px;
      }

      .section-description {
        color: var(--muted);

        line-height: 1.8;

        max-width: 750px;
      }

      /* =========================================

           PRODUCTS SECTION

        ========================================= */

      .products-section {
        background: var(--light);
      }

      /* =========================================

           FILTER BUTTONS

        ========================================= */

      .product-filters {
        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 10px;

        margin-bottom: 50px;
      }

      .filter-btn {
        background: #fff;

        color: var(--primary);

        border: 1px solid #ddd;

        padding: 11px 22px;

        font-family: "DM Sans", sans-serif;

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;

        transition: 0.3s;
      }

      .filter-btn:hover,
      .filter-btn.active {
        background: var(--primary);

        color: #fff;

        border-color: var(--primary);
      }

      /* =========================================

           PRODUCT CARD

        ========================================= */

      .product-card {
        background: #fff;

        height: 100%;

        border: 1px solid #e9e9e9;

        overflow: hidden;

        transition: 0.35s;
      }

      .product-card:hover {
        transform: translateY(-8px);

        box-shadow: 0 15px 35px rgba(6, 43, 99, 0.12);
      }

      /* PRODUCT IMAGE */

      .product-image {
        position: relative;

        height: 280px;

        overflow: hidden;

        background: #eee;
      }

      .product-image img {
        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: 0.5s;
      }

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

      /* PRODUCT CATEGORY BADGE */

      .product-badge {
        position: absolute;

        top: 15px;

        left: 15px;

        background: var(--gold);

        color: #fff;

        font-size: 12px;

        font-weight: 600;

        padding: 7px 12px;

        text-transform: uppercase;

        letter-spacing: 0.5px;
      }

      /* PRODUCT CONTENT */

      .product-content {
        padding: 28px 25px 25px;
      }

      .product-content h3 {
        color: var(--primary);

        font-size: 23px;

        margin-bottom: 12px;
      }

      .product-content p {
        color: var(--muted);

        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 20px;
      }

      .product-link {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        color: var(--primary);

        font-weight: 700;

        font-size: 14px;

        transition: 0.3s;
      }

      .product-link i {
        color: var(--gold);

        transition: 0.3s;
      }

      .product-link:hover {
        color: var(--gold);
      }

      .product-link:hover i {
        transform: translateX(5px);
      }

      /* =========================================

           PRODUCT SPECIFICATIONS

        ========================================= */

      .spec-list {
        list-style: none;

        padding: 0;

        margin: 0 0 20px;
      }

      .spec-list li {
        display: flex;

        align-items: center;

        gap: 8px;

        color: var(--muted);

        font-size: 13px;

        margin-bottom: 7px;
      }

      .spec-list li i {
        color: var(--gold);
      }

      /* =========================================

           CUSTOM SOLUTIONS

        ========================================= */

      .custom-section {
        background: #fff;
      }

      .custom-box {
        background: var(--primary);

        padding: 65px;

        color: #fff;

        position: relative;

        overflow: hidden;
      }

      .custom-box::after {
        content: "";

        position: absolute;

        width: 300px;

        height: 300px;

        border: 1px solid rgba(255, 255, 255, 0.12);

        border-radius: 50%;

        right: -100px;

        top: -100px;
      }

      .custom-box h2 {
        font-size: clamp(30px, 4vw, 45px);

        margin-bottom: 18px;
      }

      .custom-box p {
        color: rgba(255, 255, 255, 0.75);

        max-width: 700px;

        line-height: 1.8;

        margin-bottom: 30px;
      }

      .custom-btn {
        display: inline-block;

        background: var(--gold);

        color: #fff;

        padding: 14px 28px;

        font-weight: 600;

        transition: 0.3s;
      }

      .custom-btn:hover {
        background: #fff;

        color: var(--primary);
      }

      /* =========================================

           FOOTER

        ========================================= */

      footer {
        background: #031a3b;

        color: rgba(255, 255, 255, 0.7);

        padding-top: 70px;
      }

      .footer-logo {
        width: 170px;

        margin-bottom: 20px;

        background: #fff;

        padding: 8px;
      }

      .footer-about {
        line-height: 1.8;

        max-width: 300px;
      }

      footer h5 {
        color: #fff;

        font-family: "DM Sans", sans-serif;

        font-weight: 700;

        margin-bottom: 22px;
      }

      .footer-links {
        list-style: none;

        padding: 0;
      }

      .footer-links li {
        margin-bottom: 12px;
      }

      .footer-links a {
        color: rgba(255, 255, 255, 0.7);

        transition: 0.3s;
      }

      .footer-links a:hover {
        color: var(--gold-light);

        padding-left: 5px;
      }

      .footer-contact {
        display: flex;

        gap: 12px;

        margin-bottom: 15px;
      }

      .footer-contact i {
        color: var(--gold-light);

        font-size: 18px;
      }

      .social-icons {
        display: flex;

        gap: 10px;

        margin-top: 20px;
      }

      .social-icons a {
        width: 40px;

        height: 40px;

        border: 1px solid rgba(255, 255, 255, 0.2);

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        transition: 0.3s;
      }

      .social-icons a:hover {
        background: var(--gold);

        border-color: var(--gold);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);

        margin-top: 50px;

        padding: 20px 0;

        font-size: 14px;
      }

      /* =========================================

           WHATSAPP

        ========================================= */

      .whatsapp-float {
        position: fixed;

        right: 25px;

        bottom: 25px;

        width: 58px;

        height: 58px;

        background: #25d366;

        color: #fff;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 30px;

        z-index: 999;

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

        transition: 0.3s;
      }

      .whatsapp-float:hover {
        transform: scale(1.1);

        color: #fff;
      }

      /* =========================================

           RESPONSIVE

        ========================================= */

      @media (max-width: 991px) {
        .navbar-nav {
          padding-top: 20px;
        }

        .navbar-nav .nav-link {
          margin: 6px 0;
        }

        .catalog-btn {
          display: inline-block;

          margin-top: 10px;
        }

        .section-padding {
          padding: 70px 0;
        }

        .custom-box {
          padding: 45px 30px;
        }
      }

      @media (max-width: 767px) {
        .navbar-brand img {
          width: 130px;
        }

        .page-hero {
          padding: 70px 20px;
        }

        .product-filters {
          gap: 7px;

          margin-bottom: 35px;
        }

        .filter-btn {
          padding: 9px 14px;

          font-size: 13px;
        }

        .product-image {
          height: 250px;
        }

        .custom-box {
          padding: 40px 25px;
        }

        .whatsapp-float {
          width: 52px;

          height: 52px;

          right: 18px;

          bottom: 18px;

          font-size: 26px;
        }
      }