:root {
            /*--primary: #ffb000;*/
            --primary: #37a6e0;
            --primary-dark: #d98b00;
            --primary-light: #fff4d8;

            --dark: #101820;
            --dark-soft: #18232d;
            --dark-card: #202d38;

            --text: #1f2933;
            --text-light: #66737f;
            --white: #ffffff;
            --off-white: #f6f7f8;
            --border: #e2e7eb;
            --success: #25d366;

            --shadow-sm: 0 8px 25px rgba(16, 24, 32, 0.08);
            --shadow-md: 0 18px 45px rgba(16, 24, 32, 0.14);
            --shadow-lg: 0 25px 70px rgba(0, 0, 0, 0.24);

            --radius-sm: 10px;
            --radius-md: 18px;
            --radius-lg: 28px;

            --container: 1180px;
            --transition: 220ms ease;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 95px;
        }

        body {
            margin: 0;
            color: var(--text);
            background: var(--white);
            font-family: "Inter", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }

        body.menu-open {
            overflow: hidden;
        }

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

        button,
        input,
        textarea,
        select {
            font: inherit;
        }

        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        h1,
        h2,
        h3,
        h4,
        p {
            margin-top: 0;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: "Barlow Condensed", sans-serif;
            line-height: 1.05;
            color: var(--dark);
        }

        .container {
            width: min(calc(100% - 40px), var(--container));
            margin-inline: auto;
        }

        .section {
            padding: 95px 0;
        }

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

        .section-dark {
            color: var(--white);
            background:
                radial-gradient(
                    circle at 85% 15%,
                    rgba(255, 176, 0, 0.16),
                    transparent 32%
                ),
                var(--dark);
        }

        .section-dark h2,
        .section-dark h3,
        .section-dark h4 {
            color: var(--white);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 14px;
            /*color: var(--primary-dark);*/
            color:#9f9f9f;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            width: 28px;
            height: 3px;
            content: "";
            background: var(--primary);
            border-radius: 100px;
        }

        .section-heading {
            max-width: 720px;
            margin-bottom: 45px;
        }

        .section-heading.center {
            margin-inline: auto;
            text-align: center;
        }

        .section-heading.center .eyebrow {
            justify-content: center;
        }

        .section-heading.center .eyebrow::after {
            width: 28px;
            height: 3px;
            content: "";
            background: var(--primary);
            border-radius: 100px;
        }

        .section-title {
            margin-bottom: 16px;
            font-size: clamp(2.3rem, 5vw, 4rem);
            font-weight: 800;
            text-transform: uppercase;
        }

        .section-description {
            margin-bottom: 0;
            color: var(--text-light);
            font-size: 1rem;
        }

        .section-dark .section-description {
            color: rgba(255, 255, 255, 0.7);
        }

        .btn {
            display: inline-flex;
            min-height: 52px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px 23px;
            border: 2px solid transparent;
            border-radius: 7px;
            cursor: pointer;
            font-size: 0.88rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition:
                transform var(--transition),
                background-color var(--transition),
                color var(--transition),
                border-color var(--transition),
                box-shadow var(--transition);
        }

        .btn:hover {
            transform: translateY(-3px);
        }

        .btn-primary {
            color: var(--dark);
            background: var(--primary);
            box-shadow: 0 12px 26px rgba(255, 176, 0, 0.25);
        }

        .btn-primary:hover {
            background: #ffc033;
            box-shadow: 0 16px 32px rgba(255, 176, 0, 0.34);
        }

        .btn-outline {
            color: var(--white);
            border-color: rgba(255, 255, 255, 0.75);
            background: rgba(255, 255, 255, 0.04);
        }

        .btn-outline:hover {
            color: var(--dark);
            border-color: var(--white);
            background: var(--white);
        }

        .btn-dark {
            color: var(--white);
            background: var(--dark);
        }

        .btn-dark:hover {
            background: #273642;
        }

        .topbar {
            color: rgba(255, 255, 255, 0.78);
            background: #080d12;
            font-size: 0.77rem;
        }

        .topbar-inner {
            display: flex;
            min-height: 39px;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .topbar-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }

        .topbar-item {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .topbar-item svg {
            width: 14px;
            color: var(--primary);
        }

        .topbar a:hover {
            color: var(--primary);
        }

        .header {
            position: sticky;
            z-index: 1000;
            top: 0;
            background: var(--white);
            box-shadow: 0 4px 28px rgba(16, 24, 32, 0.08);
        }

        .navbar {
            display: flex;
            min-height: 82px;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .logo-mark {
            position: relative;
            display: grid;
            width: 49px;
            height: 49px;
            place-items: center;
            overflow: hidden;
            color: var(--dark);
            background: var(--primary);
            border-radius: 9px;
            font-family: "Barlow Condensed", sans-serif;
            font-size: 1.45rem;
            font-weight: 800;
        }

        .logo-mark::after {
            position: absolute;
            right: -14px;
            bottom: -17px;
            width: 38px;
            height: 38px;
            content: "";
            border: 7px solid rgba(16, 24, 32, 0.2);
            border-radius: 50%;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .logo-title {
            font-family: "Barlow Condensed", sans-serif;
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        .logo-subtitle {
            margin-top: 5px;
            color: var(--text-light);
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .nav-link {
            position: relative;
            padding: 31px 0;
            color: #34414d;
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .nav-link::after {
            position: absolute;
            right: 0;
            bottom: 20px;
            left: 0;
            width: 0;
            height: 3px;
            margin: auto;
            content: "";
            background: var(--primary);
            transition: width var(--transition);
        }

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

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .nav-call {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-call-icon {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            color: var(--dark);
            background: var(--primary);
            border-radius: 50%;
        }

        .nav-call-icon svg {
            width: 19px;
        }

        .nav-call-text {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
        }

        .nav-call-text small {
            color: var(--text-light);
            font-size: 0.67rem;
        }

        .nav-call-text strong {
            font-size: 0.82rem;
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border: 0;
            color: var(--white);
            background: var(--dark);
            border-radius: 7px;
            cursor: pointer;
        }

        .hero {
            position: relative;
            min-height: 720px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(
                    90deg,
                    rgba(8, 13, 18, 0.96) 0%,
                    rgba(8, 13, 18, 0.86) 44%,
                    rgba(8, 13, 18, 0.32) 76%,
                    rgba(8, 13, 18, 0.18) 100%
                ),
                url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1920&q=85")
                center / cover no-repeat;
        }

        .hero::before {
            position: absolute;
            inset: 0;
            content: "";
            opacity: 0.15;
            background-image:
                linear-gradient(
                    rgba(255, 255, 255, 0.05) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.05) 1px,
                    transparent 1px
                );
            background-size: 60px 60px;
        }

        .hero::after {
            position: absolute;
            right: 0;
            bottom: 0;
            width: min(38vw, 560px);
            height: 8px;
            content: "";
            background: var(--primary);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 760px;
            padding: 100px 0 125px;
        }

        .hero-badge {
              display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 9px 14px;
    border: 1px solid rgb(255 255 255);
    color: var(--primary);
    background: rgba(255, 176, 0, 0.08);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
        }

        .hero-badge span {
            width: 7px;
            height: 7px;
            background: var(--primary);
            border-radius: 50%;
            box-shadow: 0 0 0 5px rgba(255, 176, 0, 0.13);
        }

        .hero-title {
            max-width: 760px;
            margin-bottom: 22px;
            color: var(--white);
            font-size: clamp(3.4rem, 8vw, 5rem);
            font-weight: 800;
            letter-spacing: -0.025em;
            text-transform: uppercase;
        }

        .hero-title span {
            color: var(--primary);
        }

        .hero-description {
            max-width: 660px;
            margin-bottom: 34px;
            color: rgba(255, 255, 255, 0.78);
            font-size: clamp(1rem, 2vw, 1.13rem);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
        }

        .hero-feature-bar {
            position: absolute;
            z-index: 3;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .hero-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            max-width: 860px;
            background: rgba(16, 24, 32, 0.94);
            backdrop-filter: blur(14px);
        }

        .hero-feature {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 22px 24px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .hero-feature:last-child {
            border-right: 0;
        }

        .hero-feature svg {
            width: 28px;
            height: 28px;
            color: var(--primary);
            flex-shrink: 0;
        }

        .hero-feature strong {
            display: block;
            margin-bottom: 2px;
            color: var(--white);
            font-family: "Barlow Condensed", sans-serif;
            font-size: 1.05rem;
            text-transform: uppercase;
        }

        .hero-feature small {
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.72rem;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .category-card {
            position: relative;
            display: flex;
            min-height: 155px;
            align-items: center;
            gap: 18px;
            overflow: hidden;
            padding: 25px;
            border: 1px solid var(--border);
            background: var(--white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition:
                transform var(--transition),
                border-color var(--transition),
                box-shadow var(--transition);
        }

        .category-card::after {
            position: absolute;
            right: -35px;
            bottom: -52px;
            width: 120px;
            height: 120px;
            content: "";
            border: 17px solid rgba(255, 176, 0, 0.08);
            border-radius: 50%;
        }

        .category-card:hover {
            transform: translateY(-7px);
            border-color: rgba(255, 176, 0, 0.65);
            box-shadow: var(--shadow-md);
        }

        .category-icon {
            display: grid;
            width: 64px;
            height: 64px;
            place-items: center;
            color: var(--dark);
            background: var(--primary-light);
            border-radius: 14px;
            flex-shrink: 0;
        }

        .category-icon svg {
            width: 30px;
            height: 30px;
        }

        .category-card h3 {
            margin-bottom: 6px;
            font-size: 1.45rem;
            text-transform: uppercase;
        }

        .category-card p {
            margin-bottom: 0;
            color: var(--text-light);
            font-size: 0.8rem;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .product-card {
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition:
                transform var(--transition),
                box-shadow var(--transition);
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-md);
        }

        .product-image {
            position: relative;
            height: 285px;
            display: grid;
            place-items: center;
            overflow: hidden;
            padding: 24px;
            background:
                radial-gradient(
                    circle at 50% 45%,
                    #ffffff 0%,
                    #f4f6f7 72%,
                    #eef1f3 100%
                );
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 350ms ease;
        }

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

        .product-label {
            position: absolute;
            top: 16px;
            left: 16px;
            padding: 7px 10px;
            color: var(--dark);
            background: var(--primary);
            border-radius: 5px;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .product-content {
            padding: 23px;
        }

        .product-category {
            margin-bottom: 7px;
            color: var(--primary-dark);
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .product-title {
            margin-bottom: 10px;
            font-size: 1.55rem;
            text-transform: uppercase;
        }

        .product-description {
            min-height: 51px;
            margin-bottom: 19px;
            color: var(--text-light);
            font-size: 0.81rem;
        }

        .product-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--dark);
            font-size: 0.76rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .product-link svg {
            width: 16px;
            transition: transform var(--transition);
        }

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

        .product-link:hover svg {
            transform: translateX(4px);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 75px;
        }

        .about-visual {
            position: relative;
            min-height: 525px;
        }

        .about-main-image {
            width: 86%;
            height: 485px;
            object-fit: cover;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
        }

        .about-small-image {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 47%;
            height: 235px;
            padding: 8px;
            object-fit: cover;
            border: 8px solid var(--white);
            background: var(--white);
            border-radius: 21px;
            box-shadow: var(--shadow-md);
        }

        .about-badge {
            position: absolute;
            top: 28px;
            right: 0;
            width: 138px;
            padding: 22px 15px;
            color: var(--dark);
            background: var(--primary);
            border-radius: 13px;
            text-align: center;
            box-shadow: var(--shadow-md);
        }

        .about-badge strong {
            display: block;
            font-family: "Barlow Condensed", sans-serif;
            font-size: 1.75rem;
            line-height: 1;
            text-transform: uppercase;
        }

        .about-badge span {
            display: block;
            margin-top: 6px;
            font-size: 0.67rem;
            font-weight: 700;
            line-height: 1.3;
            text-transform: uppercase;
        }

        .about-content .section-title {
            margin-bottom: 20px;
        }

        .about-content > p {
            color: var(--text-light);
        }

        .about-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin: 27px 0 33px;
        }

        .about-list li {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #34414d;
            font-size: 0.83rem;
            font-weight: 600;
        }

        .about-list svg {
            width: 19px;
            color: var(--primary-dark);
            flex-shrink: 0;
        }

        .business-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid rgba(255, 255, 255, 0.11);
            border-radius: var(--radius-md);
        }

        .stat {
            padding: 32px 22px;
            border-right: 1px solid rgba(255, 255, 255, 0.11);
            text-align: center;
        }

        .stat:last-child {
            border-right: 0;
        }

        .stat strong {
            display: block;
            margin-bottom: 7px;
            color: var(--primary);
            font-family: "Barlow Condensed", sans-serif;
            font-size: clamp(1.6rem, 3vw, 2.3rem);
            line-height: 1;
            text-transform: uppercase;
        }

        .stat span {
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .benefit-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .benefit-card {
            padding: 27px 22px;
            border: 1px solid var(--border);
            background: var(--white);
            border-radius: var(--radius-md);
        }

        .benefit-number {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .benefit-number span {
            color: #d9dfe3;
            font-family: "Barlow Condensed", sans-serif;
            font-size: 2.8rem;
            font-weight: 800;
            line-height: 1;
        }

        .benefit-number svg {
            width: 30px;
            color: var(--primary-dark);
        }

        .benefit-card h3 {
            margin-bottom: 10px;
            font-size: 1.35rem;
            text-transform: uppercase;
        }

        .benefit-card p {
            margin-bottom: 0;
            color: var(--text-light);
            font-size: 0.8rem;
        }

        .industries-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }

        .industry-card {
            padding: 25px 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.035);
            border-radius: var(--radius-md);
            text-align: center;
            transition:
                transform var(--transition),
                border-color var(--transition),
                background var(--transition);
        }

        .industry-card:hover {
            transform: translateY(-6px);
            border-color: var(--primary);
            background: rgba(255, 176, 0, 0.08);
        }

        .industry-card svg {
            width: 35px;
            height: 35px;
            margin-bottom: 17px;
            color: var(--primary);
        }

        .industry-card h3 {
            margin-bottom: 0;
            font-size: 1.02rem;
            text-transform: uppercase;
        }

        .cta {
            position: relative;
            overflow: hidden;
            background: var(--primary);
        }

        .cta::before,
        .cta::after {
            position: absolute;
            content: "";
            border: 28px solid rgba(16, 24, 32, 0.08);
            border-radius: 50%;
        }

        .cta::before {
            top: -90px;
            left: -70px;
            width: 240px;
            height: 240px;
        }

        .cta::after {
            right: -85px;
            bottom: -120px;
            width: 300px;
            height: 300px;
        }

        .cta-inner {
            position: relative;
            z-index: 2;
            display: flex;
            min-height: 260px;
            align-items: center;
            justify-content: space-between;
            gap: 45px;
        }

        .cta-content {
            max-width: 700px;
        }

        .cta-content h2 {
            margin-bottom: 13px;
            font-size: clamp(2.3rem, 5vw, 4rem);
            font-weight: 800;
            text-transform: uppercase;
        }

        .cta-content p {
            max-width: 630px;
            margin-bottom: 0;
            color: rgba(16, 24, 32, 0.75);
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            flex-shrink: 0;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            overflow: hidden;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
        }

        .contact-info {
            position: relative;
            padding: 48px;
            color: var(--white);
            background:
                radial-gradient(
                    circle at 95% 5%,
                    rgba(255, 176, 0, 0.18),
                    transparent 35%
                ),
                var(--dark);
        }

        .contact-info h2 {
            margin-bottom: 17px;
            color: var(--white);
            font-size: 2.8rem;
            text-transform: uppercase;
        }

        .contact-info > p {
            margin-bottom: 34px;
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.86rem;
        }

        .contact-list {
            display: grid;
            gap: 22px;
        }

        .contact-item {
            display: flex;
            gap: 15px;
        }

        .contact-item-icon {
            display: grid;
            width: 43px;
            height: 43px;
            place-items: center;
            color: var(--dark);
            background: var(--primary);
            border-radius: 9px;
            flex-shrink: 0;
        }

        .contact-item-icon svg {
            width: 20px;
        }

        .contact-item small {
            display: block;
            margin-bottom: 4px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .contact-item strong,
        .contact-item a {
            color: var(--white);
            font-size: 0.84rem;
            font-weight: 600;
        }

        .contact-form-wrapper {
            padding: 48px;
            background: var(--white);
        }

        .contact-form-wrapper h3 {
            margin-bottom: 8px;
            font-size: 2rem;
            text-transform: uppercase;
        }

        .contact-form-wrapper > p {
            margin-bottom: 26px;
            color: var(--text-light);
            font-size: 0.84rem;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 17px;
        }

        .form-group {
            display: grid;
            gap: 7px;
        }

        .form-group.full-width {
            grid-column: 1 / -1;
        }

        .form-label {
            color: #34414d;
            font-size: 0.73rem;
            font-weight: 700;
        }

        .form-control {
            width: 100%;
            min-height: 49px;
            padding: 12px 14px;
            border: 1px solid #dce2e6;
            outline: none;
            background: #fafbfb;
            border-radius: 7px;
            font-size: 0.82rem;
            transition:
                border-color var(--transition),
                box-shadow var(--transition),
                background var(--transition);
        }

        textarea.form-control {
            min-height: 118px;
            resize: vertical;
        }

        .form-control:focus {
            border-color: var(--primary-dark);
            background: var(--white);
            box-shadow: 0 0 0 4px rgba(255, 176, 0, 0.13);
        }

        .form-status {
            display: none;
            margin-top: 15px;
            padding: 11px 13px;
            border-radius: 6px;
            font-size: 0.78rem;
        }

        .form-status.error {
            display: block;
            color: #a32626;
            background: #ffe8e8;
        }

        .form-status.success {
            display: block;
            color: #166534;
            background: #dcfce7;
        }

        .footer {
            padding-top: 70px;
            color: rgba(255, 255, 255, 0.68);
            background: #080d12;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 0.8fr 1fr 1.15fr;
            gap: 45px;
            padding-bottom: 55px;
        }

        .footer .logo-title {
            color: var(--white);
        }

        .footer .logo-subtitle {
            color: rgba(255, 255, 255, 0.48);
        }

        .footer-about {
            margin-top: 20px;
            font-size: 0.8rem;
        }

        .footer-title {
            margin-bottom: 20px;
            color: var(--white);
            font-size: 1.25rem;
            text-transform: uppercase;
        }

        .footer-links {
            display: grid;
            gap: 11px;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.79rem;
        }

        .footer-links a::before {
            width: 5px;
            height: 5px;
            content: "";
            background: var(--primary);
            border-radius: 50%;
        }

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

        .footer-contact {
            display: grid;
            gap: 13px;
            font-size: 0.79rem;
        }

        .footer-contact li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
        }

        .footer-contact svg {
            width: 16px;
            /*margin-top: 4px;*/
            color: var(--primary);
            flex-shrink: 0;
        }

        .footer-bottom {
            display: flex;
            min-height: 65px;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.72rem;
        }

        .whatsapp-float {
            position: fixed;
            z-index: 900;
            right: 22px;
            bottom: 22px;
            display: grid;
            width: 58px;
            height: 58px;
            place-items: center;
            color: var(--white);
            background: var(--success);
            border-radius: 50%;
            box-shadow: 0 14px 30px rgba(37, 211, 102, 0.32);
            transition:
                transform var(--transition),
                box-shadow var(--transition);
        }

        .whatsapp-float:hover {
            transform: translateY(-4px) scale(1.04);
            box-shadow: 0 18px 35px rgba(37, 211, 102, 0.42);
        }

        .whatsapp-float svg {
            width: 28px;
            height: 28px;
        }

        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition:
                opacity 650ms ease,
                transform 650ms ease;
        }

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

        @media (max-width: 1080px) {
            .nav-menu {
                gap: 20px;
            }

            .nav-call {
                display: none;
            }

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

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

            .industries-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .about-grid {
                gap: 45px;
            }

            .footer-grid {
                grid-template-columns: 1.3fr 1fr 1fr;
            }

            .footer-column:first-child {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 860px) {
            .topbar {
                display: none;
            }

            .navbar {
                min-height: 72px;
            }

            .menu-toggle {
                display: flex;
            }

            .nav-actions .btn {
                display: none;
            }

            .nav-menu {
                position: fixed;
                z-index: 999;
                top: 72px;
                right: 0;
                bottom: 0;
                width: min(84vw, 340px);
                display: block;
                padding: 25px;
                background: var(--white);
                box-shadow: -15px 20px 40px rgba(16, 24, 32, 0.16);
                transform: translateX(105%);
                transition: transform 280ms ease;
            }

            .nav-menu.open {
                transform: translateX(0);
            }

            .nav-link {
                display: block;
                padding: 16px 8px;
                border-bottom: 1px solid var(--border);
            }

            .nav-link::after {
                display: none;
            }

            .hero {
                min-height: 680px;
                background-position: 62% center;
            }

            .hero-feature-bar {
                position: relative;
                background: var(--dark);
            }

            .hero-features {
                max-width: none;
            }

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

            .about-visual {
                max-width: 650px;
            }

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

            .stat:nth-child(2) {
                border-right: 0;
            }

            .stat:nth-child(-n + 2) {
                border-bottom: 1px solid rgba(255, 255, 255, 0.11);
            }

            .cta-inner {
                min-height: 330px;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
            }

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

        @media (max-width: 650px) {
            .container {
                width: min(calc(100% - 28px), var(--container));
            }

            .section {
                padding: 72px 0;
            }

            .logo-mark {
                width: 43px;
                height: 43px;
            }

            .logo-title {
                font-size: 1.15rem;
            }

            .logo-subtitle {
                font-size: 0.52rem;
            }

            .hero {
                min-height: 640px;
                background-position: 67% center;
            }

            .hero-content {
                padding: 90px 0;
            }

            .hero-title {
                font-size: clamp(3rem, 14vw, 4.7rem);
            }

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

            .hero-feature {
                border-right: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .hero-feature:last-child {
                border-bottom: 0;
            }

            .category-grid,
            .products-grid,
            .benefit-grid,
            .industries-grid {
                grid-template-columns: 1fr;
            }

            .category-card {
                min-height: 130px;
            }

            .product-image {
                height: 255px;
            }

            .about-visual {
                min-height: 415px;
            }

            .about-main-image {
                width: 92%;
                height: 385px;
            }

            .about-small-image {
                height: 175px;
            }

            .about-badge {
                top: 18px;
                width: 112px;
                padding: 18px 10px;
            }

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

            .business-stats {
                grid-template-columns: 1fr;
            }

            .stat {
                border-right: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.11);
            }

            .stat:last-child {
                border-bottom: 0;
            }

            .contact-info,
            .contact-form-wrapper {
                padding: 34px 24px;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-group.full-width {
                grid-column: auto;
            }

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

            .footer-column:first-child {
                grid-column: auto;
            }

            .footer-bottom {
                padding: 20px 0;
                flex-direction: column;
                justify-content: center;
                text-align: center;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }

            .reveal {
                opacity: 1;
                transform: none;
            }
        }
    
    /* Main Dropdown */

.has-dropdown {
    position: relative;
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}


.has-dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.dropdown-menu li {
    position: relative;
}


.dropdown-menu li a {
        display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
}


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



/* Submenu */

.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 260px;
    background: #fff;
    list-style: none;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}


.has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* Arrow */

.dropdown-icon {
    font-size: 12px;
    margin-left: 5px;
}
    
    
    /*our client css*/
    /* =========================================================
   CLIENTS PAGE
   All styles are isolated inside .clients-page-wrapper
   ========================================================= */

.clients-page-wrapper {
    --clients-page-primary: #183b56;
    --clients-page-primary-dark: #102f47;
    --clients-page-accent: #2c6e9b;

    --clients-page-text: #17212b;
    --clients-page-text-soft: #64717d;
    --clients-page-border: #e4e9ed;

    --clients-page-background: #ffffff;
    --clients-page-background-soft: #f7f9fa;

    --clients-page-shadow:
        0 10px 35px rgba(18, 44, 65, 0.07);

    --clients-page-shadow-hover:
        0 18px 45px rgba(18, 44, 65, 0.13);

    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: var(--clients-page-text);
    background: var(--clients-page-background);
    box-sizing: border-box;
    isolation: isolate;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.clients-page-wrapper .clients-page-breadcrumb {
    position: relative;
    width: 100%;
    padding: 72px 24px 68px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(44, 110, 155, 0.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fafb 0%,
            #f3f6f8 100%
        );
    border-bottom: 1px solid rgba(24, 59, 86, 0.07);
    box-sizing: border-box;
}


/* Subtle decorative background */
.clients-page-wrapper .clients-page-breadcrumb::before {
    content: "";
    position: absolute;
    top: -110px;
    right: -70px;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(24, 59, 86, 0.07);
    border-radius: 50%;
    pointer-events: none;
}


.clients-page-wrapper .clients-page-breadcrumb::after {
    content: "";
    position: absolute;
    right: 120px;
    bottom: -135px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(44, 110, 155, 0.06);
    border-radius: 50%;
    pointer-events: none;
}


.clients-page-wrapper .clients-page-breadcrumb-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


.clients-page-wrapper .clients-page-breadcrumb-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 14px;
    color: var(--clients-page-text-soft);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}


.clients-page-wrapper .clients-page-breadcrumb-links a {
    color: var(--clients-page-text-soft);
    text-decoration: none;
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.clients-page-wrapper .clients-page-breadcrumb-links a:hover {
    color: var(--clients-page-primary);
}


.clients-page-wrapper .clients-page-breadcrumb-links a:focus-visible {
    color: var(--clients-page-primary);
    outline: 2px solid rgba(44, 110, 155, 0.45);
    outline-offset: 4px;
    border-radius: 2px;
}


.clients-page-wrapper .clients-page-breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a5afb7;
}


.clients-page-wrapper .clients-page-breadcrumb-separator svg {
    display: block;
    width: 14px;
    height: 14px;
}


.clients-page-wrapper .clients-page-breadcrumb-current {
    color: var(--clients-page-primary);
    font-weight: 600;
}


.clients-page-wrapper .clients-page-breadcrumb-title {
    max-width: 760px;
    margin: 0;
    color: var(--clients-page-primary-dark);
    font-family: inherit;
    font-size: clamp(36px, 5vw, 47px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
}


/* Initial breadcrumb entrance */
.clients-page-wrapper.clients-page-js-ready
.clients-page-breadcrumb-links {
    opacity: 0;
    transform: translateY(8px);
}


.clients-page-wrapper.clients-page-js-ready
.clients-page-breadcrumb-title {
    opacity: 0;
    transform: translateY(14px);
}


.clients-page-wrapper.clients-page-page-loaded
.clients-page-breadcrumb-links {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.6s ease 0.05s,
        transform 0.6s ease 0.05s;
}


.clients-page-wrapper.clients-page-page-loaded
.clients-page-breadcrumb-title {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s ease 0.15s,
        transform 0.7s ease 0.15s;
}


/* =========================================================
   MAIN CLIENTS SECTION
   ========================================================= */

.clients-page-wrapper .clients-page-section {
    position: relative;
    width: 100%;
    padding: 105px 24px 110px;
    overflow: hidden;
    background: var(--clients-page-background);
    box-sizing: border-box;
}


/* Extremely subtle visual accent */
.clients-page-wrapper .clients-page-section::before {
    content: "";
    position: absolute;
    top: 160px;
    left: -180px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(44, 110, 155, 0.035);
    filter: blur(1px);
    pointer-events: none;
}


.clients-page-wrapper .clients-page-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.clients-page-wrapper .clients-page-heading {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
}


.clients-page-wrapper .clients-page-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0 0 15px;
    color: var(--clients-page-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.15em;
}


.clients-page-wrapper .clients-page-eyebrow-line {
    display: inline-block;
    width: 29px;
    height: 2px;
    border-radius: 10px;
    background: var(--clients-page-accent);
}


.clients-page-wrapper .clients-page-heading-title {
    margin: 0 0 20px;
    color: var(--clients-page-text);
    font-family: inherit;
    font-size: clamp(31px, 4.2vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}


.clients-page-wrapper .clients-page-heading-text {
    max-width: 690px;
    margin: 0 auto;
    color: var(--clients-page-text-soft);
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
}


/* =========================================================
   LOGO GRID
   ========================================================= */

.clients-page-wrapper .clients-page-logo-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}


.clients-page-wrapper .clients-page-logo-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 60px;
    padding: 6px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid var(--clients-page-border);
    border-radius: 8px;

    box-shadow: var(--clients-page-shadow);

    box-sizing: border-box;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* Small premium top accent */
.clients-page-wrapper .clients-page-logo-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 2px;
    border-radius: 0 0 10px 10px;
    background: var(--clients-page-accent);
    transform: translateX(-50%);
    opacity: 0.75;
    transition: width 0.35s ease;
}


.clients-page-wrapper .clients-page-logo-card:hover {
    transform: translateY(-6px) scale(1.018);
    border-color: rgba(44, 110, 155, 0.24);
    box-shadow: var(--clients-page-shadow-hover);
}


.clients-page-wrapper .clients-page-logo-card:hover::before {
    width: 46%;
}


.clients-page-wrapper .clients-page-logo-image-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
}


.clients-page-wrapper .clients-page-logo-image-area img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    object-position: center;
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


.clients-page-wrapper
.clients-page-logo-card:hover
.clients-page-logo-image-area img {
    transform: scale(1.035);
}


/* =========================================================
   SCROLL REVEAL
   JS only adds hidden state once initialized, preventing
   content from being permanently hidden if JS is unavailable.
   ========================================================= */

.clients-page-wrapper.clients-page-js-ready .clients-page-reveal {
    opacity: 0;
    transform: translateY(24px);
}


.clients-page-wrapper.clients-page-js-ready
.clients-page-reveal.clients-page-is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


/*
   JS sets --clients-page-reveal-delay individually.
   The maximum is intentionally kept short so the interface
   still feels responsive.
*/
.clients-page-wrapper.clients-page-js-ready
.clients-page-reveal.clients-page-is-visible {
    transition-delay: var(--clients-page-reveal-delay, 0ms);
}


/* =========================================================
   MARQUEE AREA
   ========================================================= */

.clients-page-wrapper .clients-page-marquee-section {
    width: 100%;
    margin-top: 78px;
}


.clients-page-wrapper .clients-page-marquee-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-bottom: 27px;
}


.clients-page-wrapper .clients-page-marquee-heading-line {
    width: 58px;
    height: 1px;
    background: var(--clients-page-border);
}


.clients-page-wrapper .clients-page-marquee-heading-text {
    color: #7a858e;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-align: center;
}


.clients-page-wrapper .clients-page-marquee {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 4px 0 10px;
    box-sizing: border-box;

    /*
       Edge fading makes the logos appear/disappear elegantly
       rather than being abruptly clipped.
    */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 6%,
            #000 94%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 6%,
            #000 94%,
            transparent 100%
        );
}


.clients-page-wrapper .clients-page-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;

    animation:
        clients-page-marquee-scroll
        32s
        linear
        infinite;
}


.clients-page-wrapper .clients-page-marquee-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 18px;

    /*
       This right padding must equal the gap so the spacing
       between both duplicate groups stays consistent.
    */
    padding-right: 18px;
}


.clients-page-wrapper .clients-page-marquee-card {
    display: flex;
    flex: 0 0 180px;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 100px;
    padding: 20px 24px;

    background: var(--clients-page-background-soft);
    border: 1px solid rgba(24, 59, 86, 0.07);
    border-radius: 12px;

    box-sizing: border-box;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.clients-page-wrapper .clients-page-marquee-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: center;
}


.clients-page-wrapper .clients-page-marquee-card:hover {
    background: #ffffff;
    border-color: rgba(44, 110, 155, 0.2);
    transform: translateY(-2px);
}


.clients-page-wrapper
.clients-page-marquee:hover
.clients-page-marquee-track {
    animation-play-state: paused;
}


/*
   Because the track contains two identical groups,
   moving exactly 50% produces a seamless restart.
*/
@keyframes clients-page-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}


/* =========================================================
   RESPONSIVE - LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .clients-page-wrapper .clients-page-breadcrumb-inner,
    .clients-page-wrapper .clients-page-content {
        max-width: 940px;
    }

    .clients-page-wrapper .clients-page-logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .clients-page-wrapper .clients-page-logo-card {
        min-height: 140px;
        padding: 24px;
    }
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .clients-page-wrapper .clients-page-breadcrumb {
        padding: 62px 24px 58px;
    }

    .clients-page-wrapper .clients-page-section {
        padding: 85px 24px 90px;
    }

    .clients-page-wrapper .clients-page-heading {
        margin-bottom: 48px;
    }

    .clients-page-wrapper .clients-page-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .clients-page-wrapper .clients-page-logo-card {
        min-height: 135px;
    }

    .clients-page-wrapper .clients-page-marquee-section {
        margin-top: 65px;
    }

    .clients-page-wrapper .clients-page-marquee-card {
        flex-basis: 165px;
        width: 165px;
        height: 94px;
    }
}


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

@media (max-width: 640px) {

    .clients-page-wrapper .clients-page-breadcrumb {
        padding: 48px 18px 46px;
    }

    .clients-page-wrapper .clients-page-breadcrumb::before {
        width: 230px;
        height: 230px;
        top: -100px;
        right: -95px;
    }

    .clients-page-wrapper .clients-page-breadcrumb::after {
        display: none;
    }

    .clients-page-wrapper .clients-page-breadcrumb-links {
        margin-bottom: 11px;
        font-size: 13px;
    }

    .clients-page-wrapper .clients-page-breadcrumb-title {
        font-size: clamp(32px, 10vw, 42px);
    }

    .clients-page-wrapper .clients-page-section {
        padding: 68px 16px 72px;
    }

    .clients-page-wrapper .clients-page-heading {
        margin-bottom: 40px;
    }

    .clients-page-wrapper .clients-page-eyebrow {
        margin-bottom: 12px;
        font-size: 11px;
        letter-spacing: 0.13em;
    }

    .clients-page-wrapper .clients-page-eyebrow-line {
        width: 22px;
    }

    .clients-page-wrapper .clients-page-heading-title {
        margin-bottom: 16px;
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.2;
    }

    .clients-page-wrapper .clients-page-heading-text {
        font-size: 15px;
        line-height: 1.75;
    }

    .clients-page-wrapper .clients-page-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .clients-page-wrapper .clients-page-logo-card {
        min-height: 112px;
        padding: 18px 14px;
        border-radius: 11px;
    }

    .clients-page-wrapper .clients-page-logo-image-area {
        height: 64px;
    }

    .clients-page-wrapper .clients-page-logo-image-area img {
        max-height: 55px;
    }

    .clients-page-wrapper .clients-page-marquee-section {
        margin-top: 55px;
    }

    .clients-page-wrapper .clients-page-marquee-heading {
        gap: 12px;
        margin-bottom: 22px;
    }

    .clients-page-wrapper .clients-page-marquee-heading-line {
        width: 30px;
    }

    .clients-page-wrapper .clients-page-marquee-heading-text {
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .clients-page-wrapper .clients-page-marquee {
        -webkit-mask-image:
            linear-gradient(
                to right,
                transparent 0,
                #000 4%,
                #000 96%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                to right,
                transparent 0,
                #000 4%,
                #000 96%,
                transparent 100%
            );
    }

    .clients-page-wrapper .clients-page-marquee-group {
        gap: 12px;
        padding-right: 12px;
    }

    .clients-page-wrapper .clients-page-marquee-card {
        flex-basis: 145px;
        width: 145px;
        height: 86px;
        padding: 17px 20px;
        border-radius: 10px;
    }

    .clients-page-wrapper .clients-page-marquee-card img {
        max-height: 50px;
    }

    .clients-page-wrapper .clients-page-marquee-track {
        animation-duration: 27s;
    }
}


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

@media (max-width: 380px) {

    .clients-page-wrapper .clients-page-breadcrumb {
        padding-right: 15px;
        padding-left: 15px;
    }

    .clients-page-wrapper .clients-page-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .clients-page-wrapper .clients-page-logo-grid {
        gap: 9px;
    }

    .clients-page-wrapper .clients-page-logo-card {
        min-height: 102px;
        padding: 15px 11px;
    }

    .clients-page-wrapper .clients-page-logo-image-area {
        height: 57px;
    }

    .clients-page-wrapper .clients-page-logo-image-area img {
        max-height: 48px;
    }

    .clients-page-wrapper .clients-page-marquee-card {
        flex-basis: 132px;
        width: 132px;
        height: 80px;
        padding: 15px 17px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .clients-page-wrapper.clients-page-js-ready
    .clients-page-breadcrumb-links,

    .clients-page-wrapper.clients-page-js-ready
    .clients-page-breadcrumb-title,

    .clients-page-wrapper.clients-page-js-ready
    .clients-page-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .clients-page-wrapper .clients-page-logo-card,
    .clients-page-wrapper .clients-page-logo-card::before,
    .clients-page-wrapper .clients-page-logo-image-area img,
    .clients-page-wrapper .clients-page-marquee-card {
        transition: none;
    }

    .clients-page-wrapper .clients-page-logo-card:hover,
    .clients-page-wrapper
    .clients-page-logo-card:hover
    .clients-page-logo-image-area img,
    .clients-page-wrapper .clients-page-marquee-card:hover {
        transform: none;
    }

    .clients-page-wrapper .clients-page-marquee-track {
        animation: none;
        transform: none;
    }

    /*
       Users requesting reduced motion can still see a
       horizontally arranged logo collection without animation.
    */
    .clients-page-wrapper .clients-page-marquee {
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .clients-page-wrapper
    .clients-page-marquee-group[aria-hidden="true"] {
        display: none;
    }
}
    
    
    
    
    /*conatct css*/
    

        .contact-page-wrapper {
            --contact-page-primary: #173b63;
            --contact-page-primary-dark: #0f2f50;
            --contact-page-accent: #2f7fc4;
            --contact-page-heading: #152235;
            --contact-page-text: #627184;
            --contact-page-muted: #8b98a7;
            --contact-page-border: #dfe7ef;
            --contact-page-bg-soft: #f6f9fc;
            --contact-page-error: #c43d4b;
            --contact-page-success: #18865e;

            width: 100%;
            max-width: 100%;
            overflow: hidden;
            color: var(--contact-page-text);
            background: #ffffff;
            font-family: inherit;
            box-sizing: border-box;
        }

        .contact-page-wrapper *,
        .contact-page-wrapper *::before,
        .contact-page-wrapper *::after {
            box-sizing: border-box;
        }

        /* BREADCRUMB */

        .contact-page-wrapper .contact-page-breadcrumb {
            position: relative;
            overflow: hidden;
            padding: clamp(64px, 4vw, 110px) 24px;
            background: linear-gradient(135deg, #f7fafe 0%, #eef5fb 50%, #fafcfe 100%);
        }

        .contact-page-wrapper .contact-page-breadcrumb::before {
            position: absolute;
            top: -80px;
            right: -80px;
            width: 280px;
            height: 280px;
            content: "";
            border-radius: 50%;
            background: rgba(47, 127, 196, 0.07);
            pointer-events: none;
        }

        .contact-page-wrapper .contact-page-breadcrumb::after {
            position: absolute;
            right: 14%;
            bottom: -100px;
            width: 190px;
            height: 190px;
            content: "";
            border: 1px solid rgba(47, 127, 196, 0.1);
            border-radius: 50%;
            pointer-events: none;
        }

        .contact-page-wrapper .contact-page-breadcrumb-inner {
            position: relative;
            z-index: 2;
            width: min(1180px, 100%);
            margin: 0 auto;
        }

        .contact-page-wrapper .contact-page-breadcrumb-content {
            max-width: 700px;
            animation: contact-page-fade-up 0.7s ease both;
        }

        .contact-page-wrapper .contact-page-breadcrumb-label,
        .contact-page-wrapper .contact-page-section-label,
        .contact-page-wrapper .contact-page-form-label {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin: 0 0 14px;
            color: var(--contact-page-accent);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: 0.15em;
        }

        .contact-page-wrapper .contact-page-breadcrumb-label::before,
        .contact-page-wrapper .contact-page-section-label::before,
        .contact-page-wrapper .contact-page-form-label::before {
            width: 26px;
            height: 2px;
            content: "";
            border-radius: 999px;
            background: var(--contact-page-accent);
        }

        .contact-page-wrapper .contact-page-breadcrumb-title {
            margin: 0 0 18px;
            color: var(--contact-page-heading);
            font-size: clamp(38px, 5vw, 64px);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -0.035em;
        }

        .contact-page-wrapper .contact-page-breadcrumb-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .contact-page-wrapper .contact-page-breadcrumb-item {
            margin: 0;
            padding: 0;
            color: var(--contact-page-muted);
            font-size: 14px;
            line-height: 1.5;
        }

        .contact-page-wrapper .contact-page-breadcrumb-link {
            color: var(--contact-page-primary);
            text-decoration: none;
            transition: color 0.25s ease;
        }

        .contact-page-wrapper .contact-page-breadcrumb-link:hover {
            color: var(--contact-page-accent);
        }

        .contact-page-wrapper .contact-page-breadcrumb-link:focus-visible {
            outline: 3px solid rgba(47, 127, 196, 0.2);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .contact-page-wrapper .contact-page-breadcrumb-separator {
            display: inline-flex;
            color: #a7b3bf;
        }

        /* MAIN */

        .contact-page-wrapper .contact-page-main {
            width: 100%;
        }

        .contact-page-wrapper .contact-page-contact-section {
            position: relative;
            overflow: hidden;
            padding: clamp(76px, 9vw, 128px) 24px;
            background: #ffffff;
        }

        .contact-page-wrapper .contact-page-contact-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
            gap: clamp(46px, 7vw, 90px);
            align-items: start;
            width: min(1180px, 100%);
            margin: 0 auto;
        }

        .contact-page-wrapper .contact-page-background-shape {
            position: absolute;
            pointer-events: none;
            z-index: 0;
        }

        .contact-page-wrapper .contact-page-background-shape-one {
            top: 8%;
            left: -110px;
            width: 290px;
            height: 290px;
            border-radius: 50%;
            background: rgba(47, 127, 196, 0.07);
            filter: blur(25px);
            animation: contact-page-float-one 11s ease-in-out infinite;
        }

        .contact-page-wrapper .contact-page-background-shape-two {
            top: 35%;
            right: -120px;
            width: 340px;
            height: 340px;
            border-radius: 50%;
            background: rgba(23, 59, 99, 0.05);
            filter: blur(30px);
            animation: contact-page-float-two 13s ease-in-out infinite;
        }

        .contact-page-wrapper .contact-page-background-shape-three {
            left: 43%;
            bottom: 8%;
            width: 100px;
            height: 100px;
            border: 1px solid rgba(47, 127, 196, 0.1);
            border-radius: 28px;
            transform: rotate(25deg);
            animation: contact-page-rotate-float 13s ease-in-out infinite;
        }

        /* LEFT */

        .contact-page-wrapper .contact-page-info-column {
            min-width: 0;
        }

        .contact-page-wrapper .contact-page-intro {
            position: relative;
            margin-bottom: 36px;
        }

        .contact-page-wrapper .contact-page-intro::after {
            position: absolute;
            z-index: -1;
            top: -24px;
            left: -30px;
            width: 90px;
            height: 90px;
            content: "";
            border-radius: 50%;
            background: rgba(47, 127, 196, 0.06);
            pointer-events: none;
        }

        .contact-page-wrapper .contact-page-section-heading {
            margin: 0 0 20px;
            color: var(--contact-page-heading);
            font-size: clamp(34px, 4vw, 50px);
            font-weight: 700;
            line-height: 1.12;
            letter-spacing: -0.035em;
        }

        .contact-page-wrapper .contact-page-section-description {
            margin: 0;
            max-width: 600px;
            color: var(--contact-page-text);
            font-size: 16px;
            line-height: 1.8;
        }

        /* CARDS */

        .contact-page-wrapper .contact-page-contact-cards {
            display: grid;
            gap: 14px;
        }

        .contact-page-wrapper .contact-page-contact-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
            min-width: 0;
            padding: 19px 20px;
            overflow: hidden;
            border: 1px solid var(--contact-page-border);
            border-radius: 16px;
            color: inherit;
            background: #ffffff;
            text-decoration: none;
            box-shadow: 0 5px 22px rgba(20, 48, 78, 0.03);
            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
        }

        .contact-page-wrapper .contact-page-contact-card::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            content: "";
            background: var(--contact-page-accent);
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.3s ease;
        }

        .contact-page-wrapper .contact-page-contact-card:hover {
            transform: translateY(-3px);
            border-color: rgba(47, 127, 196, 0.3);
            box-shadow: 0 18px 40px rgba(20, 48, 78, 0.1);
        }

        .contact-page-wrapper .contact-page-contact-card:hover::before {
            transform: scaleY(1);
        }

        .contact-page-wrapper .contact-page-contact-card:focus-visible {
            outline: 3px solid rgba(47, 127, 196, 0.18);
            outline-offset: 3px;
        }

        .contact-page-wrapper .contact-page-contact-card-static {
            cursor: default;
        }

        .contact-page-wrapper .contact-page-contact-icon {
            display: inline-flex;
            flex: 0 0 48px;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 13px;
            color: var(--contact-page-accent);
            background: #eaf4fd;
            transition:
                transform 0.3s ease,
                color 0.3s ease,
                background-color 0.3s ease;
        }

        .contact-page-wrapper .contact-page-contact-card:hover .contact-page-contact-icon {
            transform: scale(1.05);
            color: #ffffff;
            background: var(--contact-page-primary);
        }

        .contact-page-wrapper .contact-page-contact-card-content {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-width: 0;
        }

        .contact-page-wrapper .contact-page-contact-title {
            margin-bottom: 4px;
            color: var(--contact-page-heading);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.4;
        }

        .contact-page-wrapper .contact-page-contact-detail {
            color: var(--contact-page-text);
            font-size: 14px;
            line-height: 1.55;
            overflow-wrap: anywhere;
        }

        .contact-page-wrapper .contact-page-contact-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #9aa8b7;
            transition:
                transform 0.3s ease,
                color 0.3s ease;
        }

        .contact-page-wrapper .contact-page-contact-card:hover .contact-page-contact-arrow {
            transform: translateX(4px);
            color: var(--contact-page-accent);
        }

        /* BUSINESS HOURS */

        .contact-page-wrapper .contact-page-business-hours {
            margin-top: 18px;
            padding: 22px;
            border: 1px solid var(--contact-page-border);
            border-radius: 18px;
            background: linear-gradient(145deg, #f8fbfe 0%, #ffffff 100%);
        }

        .contact-page-wrapper .contact-page-business-hours-heading {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 18px;
        }

        .contact-page-wrapper .contact-page-business-hours-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 11px;
            color: var(--contact-page-primary);
            background: #e9f1f8;
        }

        .contact-page-wrapper .contact-page-business-hours-title {
            margin: 0;
            color: var(--contact-page-heading);
            font-size: 17px;
            font-weight: 700;
            line-height: 1.4;
        }

        .contact-page-wrapper .contact-page-hours-list {
            display: grid;
            gap: 13px;
        }

        .contact-page-wrapper .contact-page-hours-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .contact-page-wrapper .contact-page-hours-day,
        .contact-page-wrapper .contact-page-hours-time,
        .contact-page-wrapper .contact-page-hours-closed {
            font-size: 14px;
            line-height: 1.5;
        }

        .contact-page-wrapper .contact-page-hours-time {
            color: var(--contact-page-heading);
            font-weight: 600;
            text-align: right;
        }

        .contact-page-wrapper .contact-page-hours-closed {
            color: #b34a56;
            font-weight: 600;
        }

        .contact-page-wrapper .contact-page-hours-divider {
            width: 100%;
            height: 1px;
            background: var(--contact-page-border);
        }

        /* FORM */

        .contact-page-wrapper .contact-page-form-column {
            min-width: 0;
        }

        .contact-page-wrapper .contact-page-form-card {
            position: relative;
            width: 100%;
            padding: clamp(28px, 4vw, 44px);
            overflow: hidden;
            border: 1px solid var(--contact-page-border);
            border-radius: 24px;
            background: #ffffff;
            box-shadow: 0 22px 60px rgba(20, 48, 78, 0.1);
        }

        .contact-page-wrapper .contact-page-form-card::before {
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            content: "";
            border-radius: 0 0 0 100%;
            background: linear-gradient(135deg, rgba(47, 127, 196, 0.08), transparent);
            pointer-events: none;
        }

        .contact-page-wrapper .contact-page-form-header {
            position: relative;
            z-index: 1;
            margin-bottom: 30px;
        }

        .contact-page-wrapper .contact-page-form-heading {
            margin: 0 0 10px;
            color: var(--contact-page-heading);
            font-size: clamp(28px, 3vw, 34px);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.025em;
        }

        .contact-page-wrapper .contact-page-form-description {
            margin: 0;
            color: var(--contact-page-text);
            font-size: 14px;
            line-height: 1.7;
        }

        .contact-page-wrapper .contact-page-form {
            display: grid;
            gap: 20px;
        }

        .contact-page-wrapper .contact-page-field {
            display: grid;
            gap: 8px;
            min-width: 0;
        }

        .contact-page-wrapper .contact-page-field-label {
            display: inline-block;
            width: fit-content;
            color: var(--contact-page-heading);
            font-size: 13px;
            font-weight: 650;
            line-height: 1.5;
        }

        .contact-page-wrapper .contact-page-required {
            color: var(--contact-page-error);
        }

        .contact-page-wrapper .contact-page-input-wrapper,
        .contact-page-wrapper .contact-page-textarea-wrapper {
            position: relative;
            width: 100%;
            border: 1px solid var(--contact-page-border);
            border-radius: 13px;
            background: #fbfcfd;
            transition:
                border-color 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
        }

        .contact-page-wrapper .contact-page-input-wrapper {
            display: flex;
            align-items: center;
        }

        .contact-page-wrapper .contact-page-input-wrapper:focus-within,
        .contact-page-wrapper .contact-page-textarea-wrapper:focus-within {
            border-color: var(--contact-page-accent);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(47, 127, 196, 0.09);
        }

        .contact-page-wrapper .contact-page-input-icon {
            position: absolute;
            left: 15px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #95a3b0;
            pointer-events: none;
            transition: color 0.25s ease;
        }

        .contact-page-wrapper .contact-page-input-wrapper:focus-within .contact-page-input-icon {
            color: var(--contact-page-accent);
        }

        .contact-page-wrapper .contact-page-input {
            width: 100%;
            min-width: 0;
            height: 52px;
            margin: 0;
            padding: 0 16px 0 47px;
            border: 0;
            border-radius: 13px;
            outline: 0;
            color: var(--contact-page-heading);
            background: transparent;
            font-family: inherit;
            font-size: 15px;
            appearance: none;
        }

        .contact-page-wrapper .contact-page-textarea {
            display: block;
            width: 100%;
            min-width: 0;
            min-height: 145px;
            margin: 0;
            padding: 15px 16px;
            resize: vertical;
            border: 0;
            border-radius: 13px;
            outline: 0;
            color: var(--contact-page-heading);
            background: transparent;
            font-family: inherit;
            font-size: 15px;
            line-height: 1.65;
            appearance: none;
        }

        .contact-page-wrapper .contact-page-input::placeholder,
        .contact-page-wrapper .contact-page-textarea::placeholder {
            color: #a1adb9;
            opacity: 1;
        }

        .contact-page-wrapper .contact-page-field.contact-page-field-invalid .contact-page-input-wrapper,
        .contact-page-wrapper .contact-page-field.contact-page-field-invalid .contact-page-textarea-wrapper {
            border-color: rgba(196, 61, 75, 0.75);
            background: #fffafb;
            box-shadow: 0 0 0 3px rgba(196, 61, 75, 0.06);
        }

        .contact-page-wrapper .contact-page-error {
            display: block;
            color: var(--contact-page-error);
            font-size: 12px;
            font-weight: 500;
            line-height: 1.4;
        }

        .contact-page-wrapper .contact-page-error:empty {
            display: none;
        }

        /* CHECKBOX */

        .contact-page-wrapper .contact-page-checkbox-field {
            display: grid;
            gap: 7px;
        }

        .contact-page-wrapper .contact-page-checkbox-row {
            display: flex;
            align-items: flex-start;
            gap: 11px;
        }

        .contact-page-wrapper .contact-page-checkbox {
            flex: 0 0 18px;
            width: 18px;
            height: 18px;
            margin: 2px 0 0;
            accent-color: var(--contact-page-primary);
            cursor: pointer;
        }

        .contact-page-wrapper .contact-page-checkbox:focus-visible {
            outline: 3px solid rgba(47, 127, 196, 0.18);
            outline-offset: 3px;
        }

        .contact-page-wrapper .contact-page-checkbox-label {
            margin: 0;
            color: var(--contact-page-text);
            font-size: 13px;
            line-height: 1.65;
            cursor: pointer;
        }

        .contact-page-wrapper .contact-page-inline-link {
            color: var(--contact-page-primary);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .contact-page-wrapper .contact-page-checkbox-error {
            padding-left: 29px;
        }

        /* BUTTON */

        .contact-page-wrapper .contact-page-submit {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 54px;
            padding: 14px 24px;
            overflow: hidden;
            border: 0;
            border-radius: 13px;
            color: #ffffff;
            background: var(--contact-page-primary);
            box-shadow: 0 10px 22px rgba(23, 59, 99, 0.18);
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition:
                transform 0.28s ease,
                background-color 0.28s ease,
                box-shadow 0.28s ease;
        }

        .contact-page-wrapper .contact-page-submit::before {
            position: absolute;
            top: 0;
            left: -130%;
            width: 65%;
            height: 100%;
            content: "";
            background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
            transform: skewX(-20deg);
            transition: left 0.55s ease;
        }

        .contact-page-wrapper .contact-page-submit:hover {
            transform: translateY(-2px);
            background: var(--contact-page-primary-dark);
            box-shadow: 0 15px 30px rgba(23, 59, 99, 0.23);
        }

        .contact-page-wrapper .contact-page-submit:hover::before {
            left: 145%;
        }

        .contact-page-wrapper .contact-page-submit-arrow {
            display: inline-flex;
            transition: transform 0.28s ease;
        }

        .contact-page-wrapper .contact-page-submit:hover .contact-page-submit-arrow {
            transform: translateX(4px);
        }

        .contact-page-wrapper .contact-page-submit:focus-visible {
            outline: 4px solid rgba(47, 127, 196, 0.2);
            outline-offset: 3px;
        }

        .contact-page-wrapper .contact-page-form-status {
            display: none;
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.5;
        }

        .contact-page-wrapper .contact-page-form-status.contact-page-form-status-visible {
            display: block;
        }

        .contact-page-wrapper .contact-page-form-status.contact-page-form-status-error {
            color: #9e2d39;
            background: #fff2f4;
        }

        .contact-page-wrapper .contact-page-form-status.contact-page-form-status-success {
            color: #116c4c;
            background: #ecfaf4;
        }

        /* MAP */

        .contact-page-wrapper .contact-page-location-section {
            padding: 0 24px clamp(78px, 9vw, 128px);
            background: #ffffff;
        }

        .contact-page-wrapper .contact-page-location-inner {
            width: min(1180px, 100%);
            margin: 0 auto;
        }

        .contact-page-wrapper .contact-page-location-header {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 28px;
        }

        .contact-page-wrapper .contact-page-location-heading {
            margin: 0;
            color: var(--contact-page-heading);
            font-size: clamp(30px, 4vw, 42px);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.03em;
        }

        .contact-page-wrapper .contact-page-location-description {
            max-width: 440px;
            margin: 0;
            color: var(--contact-page-text);
            font-size: 14px;
            line-height: 1.7;
        }

        .contact-page-wrapper .contact-page-map-placeholder {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: clamp(310px, 38vw, 470px);
            overflow: hidden;
            border: 1px solid var(--contact-page-border);
            border-radius: 22px;
            background:
                linear-gradient(rgba(255,255,255,0.74), rgba(255,255,255,0.74)),
                repeating-linear-gradient(
                    0deg,
                    transparent 0,
                    transparent 38px,
                    rgba(47,127,196,0.07) 39px,
                    rgba(47,127,196,0.07) 40px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent 0,
                    transparent 38px,
                    rgba(47,127,196,0.07) 39px,
                    rgba(47,127,196,0.07) 40px
                ),
                #f3f7fa;
        }

        .contact-page-wrapper .contact-page-map-placeholder-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 320px;
            padding: 28px;
            text-align: center;
        }

        .contact-page-wrapper .contact-page-map-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 72px;
            margin-bottom: 17px;
            border-radius: 50%;
            color: var(--contact-page-accent);
            background: #ffffff;
            box-shadow: 0 12px 32px rgba(20,48,78,0.11);
        }

        .contact-page-wrapper .contact-page-map-title {
            margin-bottom: 7px;
            color: var(--contact-page-heading);
            font-size: 18px;
            font-weight: 700;
        }

        .contact-page-wrapper .contact-page-map-text {
            color: var(--contact-page-text);
            font-size: 13px;
            line-height: 1.6;
        }

        /* REVEAL */

        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-left,
        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-right,
        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-card,
        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-bottom {
            opacity: 0;
            will-change: opacity, transform;
        }

        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-left {
            transform: translate3d(-30px, 15px, 0);
        }

        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-right {
            transform: translate3d(30px, 15px, 0);
        }

        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-card {
            transform: translate3d(0, 18px, 0);
        }

        .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-bottom {
            transform: translate3d(0, 26px, 0);
        }

        .contact-page-wrapper.contact-page-js-enabled .contact-page-is-visible {
            opacity: 1;
            transform: translate3d(0,0,0);
            transition:
                opacity 0.7s ease var(--contact-page-delay, 0s),
                transform 0.7s ease var(--contact-page-delay, 0s);
        }

        /* ANIMATIONS */

        @keyframes contact-page-fade-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes contact-page-float-one {
            0%, 100% {
                transform: translate3d(0,0,0);
            }
            50% {
                transform: translate3d(30px,24px,0);
            }
        }

        @keyframes contact-page-float-two {
            0%, 100% {
                transform: translate3d(0,0,0);
            }
            50% {
                transform: translate3d(-32px,-28px,0);
            }
        }

        @keyframes contact-page-rotate-float {
            0%, 100% {
                transform: translate3d(0,0,0) rotate(25deg);
            }
            50% {
                transform: translate3d(12px,-22px,0) rotate(38deg);
            }
        }

        /* TABLET */

        @media (max-width: 1024px) {
            .contact-page-wrapper .contact-page-contact-inner {
                grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
                gap: 42px;
            }

            .contact-page-wrapper .contact-page-form-card {
                padding: 30px;
            }
        }

        @media (max-width: 860px) {
            .contact-page-wrapper .contact-page-contact-inner {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .contact-page-wrapper .contact-page-contact-cards {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .contact-page-wrapper .contact-page-contact-card-static {
                grid-column: 1 / -1;
            }

            .contact-page-wrapper .contact-page-location-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
            }

            .contact-page-wrapper .contact-page-background-shape-three {
                display: none;
            }
        }

        /* MOBILE */

        @media (max-width: 640px) {
            .contact-page-wrapper .contact-page-breadcrumb,
            .contact-page-wrapper .contact-page-contact-section,
            .contact-page-wrapper .contact-page-location-section {
                padding-left: 18px;
                padding-right: 18px;
            }

            .contact-page-wrapper .contact-page-breadcrumb {
                padding-top: 58px;
                padding-bottom: 62px;
            }

            .contact-page-wrapper .contact-page-contact-section {
                padding-top: 68px;
                padding-bottom: 72px;
            }

            .contact-page-wrapper .contact-page-contact-cards {
                grid-template-columns: 1fr;
            }

            .contact-page-wrapper .contact-page-contact-card-static {
                grid-column: auto;
            }

            .contact-page-wrapper .contact-page-form-card {
                padding: 25px 20px;
                border-radius: 20px;
            }

            .contact-page-wrapper .contact-page-input,
            .contact-page-wrapper .contact-page-textarea {
                font-size: 16px;
            }

            .contact-page-wrapper .contact-page-hours-row {
                align-items: flex-start;
            }

            .contact-page-wrapper .contact-page-map-placeholder {
                min-height: 310px;
                border-radius: 18px;
            }
        }

        @media (max-width: 420px) {
            .contact-page-wrapper .contact-page-breadcrumb,
            .contact-page-wrapper .contact-page-contact-section,
            .contact-page-wrapper .contact-page-location-section {
                padding-left: 15px;
                padding-right: 15px;
            }

            .contact-page-wrapper .contact-page-contact-card {
                padding: 17px;
                gap: 13px;
            }

            .contact-page-wrapper .contact-page-contact-arrow {
                display: none;
            }

            .contact-page-wrapper .contact-page-hours-row {
                flex-direction: column;
                gap: 4px;
            }

            .contact-page-wrapper .contact-page-hours-time {
                text-align: left;
            }

            .contact-page-wrapper .contact-page-form-card {
                padding: 22px 17px;
            }
        }

        /* REDUCED MOTION */

        @media (prefers-reduced-motion: reduce) {
            .contact-page-wrapper .contact-page-breadcrumb-content,
            .contact-page-wrapper .contact-page-background-shape {
                animation: none !important;
            }

            .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-left,
            .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-right,
            .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-card,
            .contact-page-wrapper.contact-page-js-enabled .contact-page-reveal-bottom {
                opacity: 1;
                transform: none;
                transition: none !important;
            }

            .contact-page-wrapper .contact-page-contact-card,
            .contact-page-wrapper .contact-page-contact-icon,
            .contact-page-wrapper .contact-page-contact-arrow,
            .contact-page-wrapper .contact-page-submit,
            .contact-page-wrapper .contact-page-submit-arrow,
            .contact-page-wrapper .contact-page-input-wrapper,
            .contact-page-wrapper .contact-page-textarea-wrapper {
                transition-duration: 0.01ms !important;
            }
        }
   
    
    
    
    
    
    
 
    /*product page CSS  scoped under */


    .kwpdp-page {
        --kwpdp-primary: #e31e24;
        --kwpdp-primary-dark: #bd151a;
        --kwpdp-dark: #18202a;
        --kwpdp-heading: #1d2733;
        --kwpdp-text: #5b6571;
        --kwpdp-border: #e4e7eb;
        --kwpdp-light: #f7f8f9;
        --kwpdp-white: #ffffff;

        width: 100%;
        padding: 30px 20px 70px;
        color: var(--kwpdp-text);
        background: #ffffff;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 16px;
        line-height: 1.6;

        box-sizing: border-box;
    }


    .kwpdp-page *,
    .kwpdp-page *::before,
    .kwpdp-page *::after {
        box-sizing: border-box;
    }


    .kwpdp-page .kwpdp-inner {
        width: 100%;
        max-width: 1250px;
        margin: 0 auto;
    }


    /* =====================================================
       BREADCRUMB
    ====================================================== */

    .kwpdp-page .kwpdp-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;

        margin: 0 0 28px;
        padding: 0;

        font-size: 13px;
    }


    .kwpdp-page .kwpdp-breadcrumb-link {
        color: #6e7782;
        text-decoration: none;
        transition: color 0.2s ease;
    }


    .kwpdp-page .kwpdp-breadcrumb-link:hover {
        color: var(--kwpdp-primary);
    }


    .kwpdp-page .kwpdp-breadcrumb-divider {
        color: #adb3ba;
        font-size: 17px;
    }


    .kwpdp-page .kwpdp-breadcrumb-current {
        color: var(--kwpdp-dark);
        font-weight: 600;
    }


    /* =====================================================
       MAIN PRODUCT
    ====================================================== */

    .kwpdp-page .kwpdp-main {
        display: grid;

        grid-template-columns:2.5fr 3.5fr;

        gap: 60px;

        align-items: start;

        margin-bottom: 80px;
    }


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

    .kwpdp-page .kwpdp-gallery {
        min-width: 0;
    }


    .kwpdp-page .kwpdp-main-image-box {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        aspect-ratio: 1 / 1;

        overflow: hidden;

        border: 1px solid var(--kwpdp-border);
        border-radius: 18px;

        background: #f7f8fa;

        box-shadow:
            0 8px 28px rgba(0, 0, 0, 0.07);
    }


    .kwpdp-page .kwpdp-main-image {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;

        transition:
            transform 0.4s ease;
    }


    /*
       Pure CSS image zoom.
       No JavaScript.
    */
    .kwpdp-page .kwpdp-main-image-box:hover
    .kwpdp-main-image {
        transform: scale(1.08);
    }


    .kwpdp-page .kwpdp-image-label {
        position: absolute;

        right: 15px;
        bottom: 15px;

        padding: 7px 11px;

        border-radius: 6px;

        background: rgba(255,255,255,0.92);

        color: #5d6670;

        font-size: 11px;
        font-weight: 600;

        box-shadow:
            0 3px 10px rgba(0,0,0,0.08);
    }


    /* =====================================================
       STATIC THUMBNAILS
    ====================================================== */

    .kwpdp-page .kwpdp-thumbnails {
        display: flex;

        gap: 12px;

        margin-top: 15px;

        overflow-x: auto;

        padding: 2px 2px 5px;
    }


    .kwpdp-page .kwpdp-thumbnail {
        width: 76px;
        height: 76px;

        min-width: 76px;

        padding: 4px;

        overflow: hidden;

        border: 1px solid var(--kwpdp-border);

        border-radius: 10px;

        background: #ffffff;
    }


    .kwpdp-page .kwpdp-thumbnail-active {
        border-color: var(--kwpdp-primary);

        box-shadow:
            0 0 0 2px rgba(227, 30, 36, 0.1);
    }


    .kwpdp-page .kwpdp-thumbnail-image {
        display: block;

        width: 100%;
        height: 100%;

        border-radius: 7px;

        object-fit: cover;
    }


    /* =====================================================
       PRODUCT INFORMATION
    ====================================================== */

    .kwpdp-page .kwpdp-info {
        min-width: 0;

        padding-top: 7px;
    }


    .kwpdp-page .kwpdp-category {
        display: inline-block;

        margin-bottom: 14px;

        padding: 6px 12px;

        border-radius: 5px;

        background:
            rgba(227, 30, 36, 0.08);

        color: var(--kwpdp-primary);

        font-size: 12px;
        font-weight: 700;

        letter-spacing: 0.05em;

        text-transform: uppercase;
    }


    .kwpdp-page .kwpdp-product-name {
        margin: 0 0 16px;

        color: var(--kwpdp-heading);

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

        font-weight: 700;

        line-height: 1.15;

        letter-spacing: -0.025em;
    }


    .kwpdp-page .kwpdp-product-intro {
        margin: 0;

        max-width: 680px;

        color: var(--kwpdp-text);

        font-size: 16px;

        line-height: 1.75;
    }


    /* =====================================================
       HIGHLIGHT
    ====================================================== */

    .kwpdp-page .kwpdp-highlight {
        display: flex;

        align-items: flex-start;

        gap: 13px;

        margin-top: 22px;

        padding: 15px 17px;

        border:
            1px solid #eceff2;

        border-left:
            3px solid var(--kwpdp-primary);

        border-radius: 8px;

        background: #fafafa;
    }


    .kwpdp-page .kwpdp-highlight-icon {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 30px;
        height: 30px;

        min-width: 30px;

        border-radius: 50%;

        background: var(--kwpdp-primary);

        color: #ffffff;

        font-size: 14px;

        font-weight: bold;
    }


    .kwpdp-page .kwpdp-highlight-content {
        display: flex;

        flex-direction: column;

        gap: 2px;
    }


    .kwpdp-page .kwpdp-highlight-title {
        color: var(--kwpdp-heading);

        font-size: 14px;

        line-height: 1.4;
    }


    .kwpdp-page .kwpdp-highlight-text {
        color: var(--kwpdp-text);

        font-size: 13px;

        line-height: 1.55;
    }


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

    .kwpdp-page .kwpdp-small-heading {
        display: block;

        margin-bottom: 7px;

        color: var(--kwpdp-primary);

        font-size: 11px;
        font-weight: 700;

        letter-spacing: 0.1em;

        text-transform: uppercase;
    }


    .kwpdp-page .kwpdp-section-title {
        margin: 0;

        color: var(--kwpdp-heading);

        font-size: clamp(24px, 3vw, 31px);

        font-weight: 700;

        line-height: 1.25;

        letter-spacing: -0.015em;
    }


    .kwpdp-page .kwpdp-heading-area {
        margin-bottom: 28px;
    }


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

    .kwpdp-page .kwpdp-spec-section {
        margin-top: 31px;
    }


    .kwpdp-page .kwpdp-spec-section
    .kwpdp-section-title {
        font-size: 23px;

        margin-bottom: 16px;
    }


    .kwpdp-page .kwpdp-spec-box {
        width: 100%;

        overflow: hidden;

        border:
            1px solid var(--kwpdp-border);

        border-radius: 10px;

        background: #ffffff;
    }


    .kwpdp-page .kwpdp-spec-header,
    .kwpdp-page .kwpdp-spec-row {
        display: grid;

        grid-template-columns:
            minmax(130px, 42%)
            minmax(0, 58%);
    }


    .kwpdp-page .kwpdp-spec-header {
        background: #242c35;

        color: #ffffff;
    }


    .kwpdp-page .kwpdp-spec-header-label,
    .kwpdp-page .kwpdp-spec-header-value {
        padding: 7px 15px;

        font-size: 11px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 0.04em;
    }


    .kwpdp-page .kwpdp-spec-row {
        border-top:
            1px solid #edf0f2;

        transition:
            background-color 0.2s ease;
    }


    .kwpdp-page .kwpdp-spec-row:nth-child(odd) {
        background: #fafafa;
    }


    .kwpdp-page .kwpdp-spec-row:hover {
        background:
            rgba(227, 30, 36, 0.04);
    }


    .kwpdp-page .kwpdp-spec-label,
    .kwpdp-page .kwpdp-spec-value {
        padding: 10px 15px;

        overflow-wrap: anywhere;

        font-size: 13px;

        line-height: 1.5;
    }


    .kwpdp-page .kwpdp-spec-label {
        color: #313b46;

        font-weight: 600;

        border-right:
            1px solid #edf0f2;
    }


    .kwpdp-page .kwpdp-spec-value {
        color: #68717c;
    }


    /* =====================================================
       COMMON SECTION
    ====================================================== */

    .kwpdp-page .kwpdp-section {
        margin-bottom: 75px;
    }


    /* =====================================================
       DESCRIPTION
    ====================================================== */

    .kwpdp-page .kwpdp-description-layout {
        display: grid;

        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(280px, 0.7fr);

        gap: 45px;

        padding: 34px;

        border:
            1px solid var(--kwpdp-border);

        border-radius: 14px;

        background: #ffffff;

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


    .kwpdp-page .kwpdp-description-text {
        margin: 0 0 16px;

        color: var(--kwpdp-text);

        font-size: 15px;

        line-height: 1.8;
    }


    .kwpdp-page
    .kwpdp-description-text:last-child {
        margin-bottom: 0;
    }


    /* =====================================================
       BENEFITS
    ====================================================== */

    .kwpdp-page .kwpdp-benefits {
        padding: 22px;

        border-radius: 10px;

        background: var(--kwpdp-light);
    }


    .kwpdp-page .kwpdp-benefits-title {
        margin: 0 0 16px;

        color: var(--kwpdp-heading);

        font-size: 17px;
    }


    .kwpdp-page .kwpdp-benefit-item {
        display: flex;

        align-items: flex-start;

        gap: 9px;

        margin-bottom: 11px;

        color: #56616c;

        font-size: 13px;

        line-height: 1.5;
    }


    .kwpdp-page
    .kwpdp-benefit-item:last-child {
        margin-bottom: 0;
    }


    .kwpdp-page .kwpdp-check {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 19px;
        height: 19px;

        min-width: 19px;

        margin-top: 1px;

        border-radius: 50%;

        background: var(--kwpdp-primary);

        color: #ffffff;

        font-size: 10px;

        font-weight: bold;
    }


    /* =====================================================
       FEATURE CARDS
    ====================================================== */

    .kwpdp-page .kwpdp-feature-grid {
        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 16px;
    }


    .kwpdp-page .kwpdp-feature-card {
        padding: 24px 20px;

        border:
            1px solid var(--kwpdp-border);

        border-radius: 12px;

        background: #ffffff;

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
    }


    .kwpdp-page .kwpdp-feature-card:hover {
        transform: translateY(-4px);

        border-color:
            rgba(227,30,36,0.35);

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


    .kwpdp-page .kwpdp-feature-icon {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        margin-bottom: 16px;

        border-radius: 9px;

        background:
            rgba(227,30,36,0.09);

        color: var(--kwpdp-primary);

        font-size: 19px;

        font-weight: bold;
    }


    .kwpdp-page .kwpdp-feature-title {
        margin: 0 0 7px;

        color: var(--kwpdp-heading);

        font-size: 22px;

        line-height: 1.4;
    }


    .kwpdp-page .kwpdp-feature-text {
        margin: 0;

        color: var(--kwpdp-text);

        font-size: 13px;

        line-height: 1.65;
    }


    /* =====================================================
       APPLICATIONS
    ====================================================== */

    .kwpdp-page .kwpdp-applications {
        margin-bottom: 75px;

        padding: 35px;

        border-radius: 14px;

        background: var(--kwpdp-light);
    }


    .kwpdp-page .kwpdp-application-grid {
        display: grid;

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

        gap: 11px;
    }


    .kwpdp-page .kwpdp-application-item {
        display: flex;

        align-items: center;

        gap: 10px;

        padding: 14px 15px;

        border:
            1px solid #e3e6e9;

        border-radius: 8px;

        background: #ffffff;

        color: #424c57;

        font-size: 13px;

        font-weight: 600;
    }


    .kwpdp-page .kwpdp-application-dot {
        width: 8px;
        height: 8px;

        min-width: 8px;

        border-radius: 50%;

        background: var(--kwpdp-primary);
    }


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

    .kwpdp-page .kwpdp-cta {
        overflow: hidden;

        padding: 42px;

        border-radius: 15px;

        background: var(--kwpdp-dark);

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


    .kwpdp-page .kwpdp-cta-content {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 35px;
    }


    .kwpdp-page .kwpdp-cta-text {
        max-width: 670px;
    }


    .kwpdp-page .kwpdp-cta-small {
        display: block;

        margin-bottom: 7px;

        color: #ff777b;

        font-size: 11px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 0.1em;
    }


    .kwpdp-page .kwpdp-cta-title {
        margin: 0;

        color: #ffffff;

        font-size: clamp(25px, 3vw, 34px);

        line-height: 1.25;
    }


    .kwpdp-page .kwpdp-cta-description {
        margin: 10px 0 0;

        color: #c6cbd1;

        font-size: 14px;

        line-height: 1.65;
    }


    .kwpdp-page .kwpdp-cta-buttons {
        display: flex;

        flex-shrink: 0;

        gap: 10px;
    }


    /* =====================================================
       BUTTONS
    ====================================================== */

    .kwpdp-page .kwpdp-btn {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 9px;

        min-height: 46px;

        padding: 11px 20px;

        border:
            1px solid transparent;

        border-radius: 7px;

        font-size: 13px;

        font-weight: 700;

        line-height: 1;

        text-decoration: none;

        transition:
            background-color 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
    }


    .kwpdp-page .kwpdp-btn:hover {
        transform: translateY(-2px);
    }


    .kwpdp-page .kwpdp-btn-primary {
        background: var(--kwpdp-primary);

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

        color: #ffffff;
    }


    .kwpdp-page .kwpdp-btn-primary:hover {
        background: var(--kwpdp-primary-dark);

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


    .kwpdp-page .kwpdp-btn-secondary {
        background: transparent;

        border-color: #59616a;

        color: #ffffff;
    }


    .kwpdp-page .kwpdp-btn-secondary:hover {
        border-color: #ffffff;

        background: #ffffff;

        color: var(--kwpdp-dark);
    }


    .kwpdp-page .kwpdp-btn-arrow {
        font-size: 17px;
    }


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

    @media (max-width: 1000px) {

        .kwpdp-page .kwpdp-main {
            gap: 35px;
        }


        .kwpdp-page .kwpdp-feature-grid {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }


        .kwpdp-page .kwpdp-cta-content {
            align-items: flex-start;

            flex-direction: column;
        }

    }


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

    @media (max-width: 800px) {

        .kwpdp-page {
            padding:
                24px 18px 55px;
        }


        .kwpdp-page .kwpdp-main {
            grid-template-columns:
                minmax(0, 1fr);

            margin-bottom: 60px;
        }


        .kwpdp-page .kwpdp-gallery {
            max-width: 650px;

            margin: 0 auto;

            width: 100%;
        }


        .kwpdp-page .kwpdp-description-layout {
            grid-template-columns:
                minmax(0, 1fr);
        }


        .kwpdp-page .kwpdp-application-grid {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }

    }


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

    @media (max-width: 600px) {

        .kwpdp-page {
            padding:
                18px 14px 45px;
        }


        .kwpdp-page .kwpdp-breadcrumb {
            margin-bottom: 20px;

            font-size: 11px;
        }


        .kwpdp-page .kwpdp-main {
            gap: 28px;

            margin-bottom: 50px;
        }


        .kwpdp-page .kwpdp-main-image-box {
            border-radius: 12px;
        }


        .kwpdp-page .kwpdp-thumbnail {
            width: 64px;
            height: 64px;

            min-width: 64px;
        }


        .kwpdp-page .kwpdp-product-name {
            font-size: 29px;
        }


        .kwpdp-page .kwpdp-product-intro {
            font-size: 14px;
        }


        /*
           Mobile specification layout remains
           two columns with wrapping.
           No horizontal scrolling.
        */
        .kwpdp-page .kwpdp-spec-header,
        .kwpdp-page .kwpdp-spec-row {
            grid-template-columns:
                minmax(100px, 40%)
                minmax(0, 60%);
        }


        .kwpdp-page .kwpdp-spec-header-label,
        .kwpdp-page .kwpdp-spec-header-value {
            padding: 10px;

            font-size: 9px;
        }


        .kwpdp-page .kwpdp-spec-label,
        .kwpdp-page .kwpdp-spec-value {
            padding: 11px 10px;

            font-size: 11px;
        }


        .kwpdp-page .kwpdp-section {
            margin-bottom: 50px;
        }


        .kwpdp-page .kwpdp-description-layout {
            padding: 22px 17px;

            gap: 25px;
        }


        .kwpdp-page .kwpdp-feature-grid {
            grid-template-columns:
                minmax(0, 1fr);

            gap: 11px;
        }


        .kwpdp-page .kwpdp-applications {
            padding: 24px 17px;

            margin-bottom: 50px;
        }


        .kwpdp-page .kwpdp-application-grid {
            grid-template-columns:
                minmax(0, 1fr);
        }


        .kwpdp-page .kwpdp-cta {
            padding: 27px 20px;
        }


        .kwpdp-page .kwpdp-cta-buttons {
            display: grid;

            width: 100%;

            grid-template-columns:
                minmax(0, 1fr);
        }


        .kwpdp-page .kwpdp-btn {
            width: 100%;

            min-height: 49px;
        }

    }


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

    @media (max-width: 350px) {

        .kwpdp-page {
            padding-left: 10px;
            padding-right: 10px;
        }


        .kwpdp-page .kwpdp-product-name {
            font-size: 26px;
        }


        .kwpdp-page .kwpdp-highlight {
            padding: 13px;
        }


        .kwpdp-page .kwpdp-description-layout {
            padding:
                19px 14px;
        }

    }


    /* =====================================================
       REDUCED MOTION
    ====================================================== */

    @media (prefers-reduced-motion: reduce) {

        .kwpdp-page .kwpdp-main-image,
        .kwpdp-page .kwpdp-feature-card,
        .kwpdp-page .kwpdp-btn {
            transition: none;
        }

    }


    
    /*breadcrumb start here*/
     .kwhero-page {
        --kwhero-bg: #f2f7fc;
        --kwhero-heading: #14233a;
        --kwhero-text: #63758a;
        --kwhero-muted: #8a99aa;
        --kwhero-accent: #1677d2;

        position: relative;
        width: 100%;
        overflow: hidden;
        background: var(--kwhero-bg);
        box-sizing: border-box;
    }

    .kwhero-page *,
    .kwhero-page *::before,
    .kwhero-page *::after {
        box-sizing: border-box;
    }

    .kwhero-page .kwhero-inner {
        position: relative;
        width: 100%;
        max-width: 1240px;
        min-height: 290px;
        margin: 0 auto;
        padding: 72px 28px 62px;
    }

    .kwhero-page .kwhero-content {
        position: relative;
        z-index: 2;
        max-width: 700px;
    }


    /* =========================================
       SMALL TOP LABEL
    ========================================== */

    .kwhero-page .kwhero-eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;

        margin-bottom: 21px;
    }

    .kwhero-page .kwhero-eyebrow-line {
        display: block;

        width: 26px;
        height: 2px;

        background: var(--kwhero-accent);
    }

    .kwhero-page .kwhero-eyebrow-text {
        color: var(--kwhero-accent);

        font-size: 12px;
        font-weight: 700;

        line-height: 1;

        letter-spacing: 0.16em;

        text-transform: uppercase;
    }


    /* =========================================
       PAGE TITLE
    ========================================== */

    .kwhero-page .kwhero-title {
           margin: 0 0 22px;
    padding: 0;
    color: var(--kwhero-heading);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(42px, 5vw, 40px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.3PX;
    }


    /* =========================================
       BREADCRUMB
    ========================================== */

    .kwhero-page .kwhero-breadcrumb {
        margin: 0;
        padding: 0;
    }

    .kwhero-page .kwhero-breadcrumb-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 8px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .kwhero-page .kwhero-breadcrumb-item {
        display: inline-flex;
        align-items: center;

        margin: 0;
        padding: 0;

        color: var(--kwhero-muted);

        font-size: 14px;
        line-height: 1.4;
    }

    .kwhero-page .kwhero-breadcrumb-link {
        color: #315679;

        font-size: 14px;
        font-weight: 500;

        text-decoration: none;

        transition: color 0.2s ease;
    }

    .kwhero-page .kwhero-breadcrumb-link:hover {
        color: var(--kwhero-accent);
    }

    .kwhero-page .kwhero-breadcrumb-current {
        color: #8391a1;

        font-size: 14px;
        font-weight: 500;
    }

    .kwhero-page .kwhero-breadcrumb-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 13px;
        height: 13px;

        color: #aab5c1;
    }

    .kwhero-page .kwhero-breadcrumb-arrow svg {
        display: block;

        width: 100%;
        height: 100%;

        fill: none;

        stroke: currentColor;
        stroke-width: 1.7;

        stroke-linecap: round;
        stroke-linejoin: round;
    }


    /* =========================================
       DECORATIVE CIRCLES
    ========================================== */

    .kwhero-page .kwhero-decoration {
        position: absolute;

        display: block;

        border-radius: 50%;

        pointer-events: none;
    }

    .kwhero-page .kwhero-decoration-large {
        top: -78px;
        right: -55px;

        width: 280px;
        height: 280px;

        background: rgba(214, 228, 241, 0.52);
    }

    .kwhero-page .kwhero-decoration-outline {
        right: 155px;
        bottom: -110px;

        width: 190px;
        height: 190px;

        border: 1px solid rgba(161, 190, 217, 0.28);

        background: transparent;
    }


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

    @media (max-width: 900px) {

        .kwhero-page .kwhero-inner {
            min-height: 250px;

            padding:
                58px 24px
                50px;
        }

        .kwhero-page .kwhero-title {
            font-size: 48px;
        }

        .kwhero-page .kwhero-decoration-large {
            width: 230px;
            height: 230px;

            right: -75px;
        }

        .kwhero-page .kwhero-decoration-outline {
            right: 100px;

            width: 160px;
            height: 160px;
        }

    }


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

    @media (max-width: 600px) {

        .kwhero-page .kwhero-inner {
            min-height: 210px;

            padding:
                42px 18px
                38px;
        }

        .kwhero-page .kwhero-eyebrow {
            margin-bottom: 15px;
        }

        .kwhero-page .kwhero-eyebrow-line {
            width: 22px;
        }

        .kwhero-page .kwhero-eyebrow-text {
            font-size: 10px;
        }

        .kwhero-page .kwhero-title {
            margin-bottom: 18px;

            font-size: 38px;
        }

        .kwhero-page .kwhero-breadcrumb-item,
        .kwhero-page .kwhero-breadcrumb-link,
        .kwhero-page .kwhero-breadcrumb-current {
            font-size: 12px;
        }

        .kwhero-page .kwhero-decoration-large {
            top: -65px;
            right: -95px;

            width: 190px;
            height: 190px;
        }

        .kwhero-page .kwhero-decoration-outline {
            right: -5px;
            bottom: -90px;

            width: 145px;
            height: 145px;
        }

    }


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

    @media (max-width: 360px) {

        .kwhero-page .kwhero-inner {
            padding-left: 14px;
            padding-right: 14px;
        }

        .kwhero-page .kwhero-title {
            font-size: 33px;
        }

    }