:root {
        --primary: #00568d;
        --primary-dark: #043b66;
        --secondary: #232323;
        --white: #ffffff;
        --off-white: #fffcf8;
        --gray-light: #f5f5f5;
    }

    /* Global Styles & Animations */
    body, .page {
        background-color: var(--white) !important;
        font-family: 'Open Sans', sans-serif;
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--secondary);
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .text-primary {
        color: var(--primary) !important;
    }

    .bg-primary {
        background-color: var(--primary) !important;
    }

    .bg-light {
        background-color: var(--off-white) !important;
    }

    /* Animation Keyframes */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 30px, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .fade-in-up {
        animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        opacity: 0;
        /* Start hidden */
    }

    .delay-100 {
        animation-delay: 0.1s;
    }

    .delay-200 {
        animation-delay: 0.2s;
    }

    .delay-300 {
        animation-delay: 0.3s;
    }

    .delay-400 {
        animation-delay: 0.4s;
    }

    /* Buttons — single, reusable button for the whole site. Use .ttm-btn
       for the solid primary action, add .btn-outline for the secondary/
       ghost variant. Works on <a>, <button>, or <input type="submit">. */
    .site-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(45deg, var(--primary), var(--primary-dark));
        color: var(--white);
        border-radius: 55px;
        padding: 8px 24px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.4px;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        box-shadow: 0 6px 16px rgba(0, 86, 141, 0.25);
    }

    .site-btn:hover, .site-btn:focus-visible {
        background: linear-gradient(45deg, var(--primary-dark), var(--primary));
        color: var(--white);
        box-shadow: 0 10px 22px rgba(0, 86, 141, 0.35);
        transform: translateY(-2px);
    }

/* ==========================================================
    Base styles (apply at all breakpoints)
========================================================== */
.widget_header_wrapper {
    background-color: var(--white);
    border-bottom: 3px solid var(--primary);
    padding: 0;
}

/* Top Info Widgets */
.widget_info {
    transition: all 0.3s ease;
}

.widget_icon i {
    font-size: 32px;
    color: var(--primary);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.widget_info:hover .widget_icon i {
    transform: scale(1.2) rotate(15deg);
}

.widget_content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary);
    margin: 0;
}

.widget_content h3 a {
    color: inherit;
    text-decoration: none;
}

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

.widget_content p {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-medium);
    margin: 0;
    letter-spacing: 0.5px;
}

/* Main Menu Bar */
.site-header-menu {
    background: var(--white);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 999;
}

/* .site-header-menu-inner {
    border-top: 3px solid var(--primary);
} */

/* Menu Links */
.mega-menu-link {
    font-weight: 700 !important;
    color: var(--secondary) !important;
    font-size: 15px !important;
    padding: 20px 15px !important;
    text-transform: uppercase;
    position: relative;
}

/* .mega-menu-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
} */

.mega-menu-link:hover::before,
.mega-menu-item.active .mega-menu-link::before {
    width: 100%;
}

.mega-menu-link:hover,
.mega-menu-item.active .mega-menu-link {
    color: var(--primary) !important;
}

/* Dropdown Styling */
.mega-submenu {
    border-top: 3px solid var(--primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.mega-submenu li a {
    transition: all 0.2s ease;
    padding: 10px 20px !important;
}

.mega-submenu li a:hover {
    background-color: var(--off-white);
    color: var(--primary) !important;
    padding-left: 25px !important;
    /* Slide effect */
}

/* Social Icons & Button */
.header_social .social-icons li a {
    color: var(--secondary) !important;
    font-size: 16px;
    margin: 0 8px;
    transition: all 0.3s;
}

.header_social .social-icons li a:hover {
    color: var(--primary) !important;
    transform: translateY(-2px);
}

.header-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    color: var(--white);
    border-radius: 55px;
    padding: 3px 18px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 6px 16px rgba(0, 86, 141, 0.25);
}

.header-quote-btn:hover {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary));
    color: var(--white);
    box-shadow: 0 10px 22px rgba(0, 86, 141, 0.35);
    transform: translateY(-2px);
}

/* Sticky Header Animation */
.is-sticky .site-header-menu {
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Mobile menu toggle - hidden by default, shown only below 992px */
.btn-show-menu-mobile {
    display: none;
}

/* ==========================================================
    Desktop (>= 992px)
    The theme's own CSS/JS (responsive.css, megamenu.css, main.js)
    only switches to desktop mode at 1200px, which left a
    992px-1199px gap where the nav, widgets and quote button were
    hidden by the theme's mobile rules. Force desktop presentation
    from 992px up so it matches this project's breakpoint.
    ========================================================== */
@media (min-width: 992px) {
    .header_extra,
    .widget_info {
        display: flex !important;
        visibility: visible !important;
    }

    .mobile-logo,
    .btn-show-menu-mobile {
        display: none !important;
    }

    /* main.css only clears its default 50px padding-left / positions its
        divider correctly inside its own >=1200px query, so anything below
        that width shows a stray divider line before "Email Us" plus wasted
        padding on every widget. Replace it with our own short, centered
        accent line that looks and behaves identically at every desktop
        width (a full-height border-left reads as a heavy, blocky bar).
        Spacing comes from a single gap value, and the divider sits at its
        exact midpoint, so both sides are equal by construction. */
    .widget-info-row {
        gap: 2.5rem;
    }

    .widget_info {
        padding-left: 0 !important;
    }

    .widget_info:after {
        content: none !important;
    }

    .widget_info:not(:first-child)::before {
        content: '';
        position: absolute;
        left: -0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 50px;
        background-color: var(--border-color, #eeeeee);
        opacity: 0.9;
    }

    nav.main-menu {
        display: block !important;
        position: static !important;
        max-height: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-top: 0 !important;
        padding: 0 !important;
    }

    nav.main-menu ul.menu,
    nav.main-menu ul.menu > li {
        display: inline-block !important;
    }

    nav.main-menu ul.menu > li > a {
        border-top: none !important;
    }

    nav.main-menu li.mega-menu-item ul.mega-submenu {
        position: absolute !important;
        width: 250px !important;
        background-color: var(--white, #fff) !important;
        float: none !important;
        padding: 0 !important;
        transform: rotateX(-90deg);
        transform-origin: 0 0;
    }

    nav.main-menu li.mega-menu-item:hover > ul.mega-submenu {
        visibility: visible;
        opacity: 1;
        transform: rotateX(0);
    }

    /* Sticky header on scroll. The theme's own main.js/responsive.css
        only enable this (the ".fixed-header" toggle + its positioning)
        above 1200px, so extend it down to this project's 992px
        breakpoint. See the toggle script near the end of this file. */
    .site-header-menu-inner.fixed-header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 3000;
        background-color: var(--white, #fff);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }
}

/* Tighten spacing on smaller desktops/tablets in landscape (992px-1199px)
    so the nav links + quote button don't crowd or wrap in the narrower row. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .mega-menu-link {
        padding: 20px 10px !important;
        font-size: 14px !important;
    }

    .header-quote-btn {
        padding: 3px 18px;
        font-size: 13px;
    }
}

/* ==========================================================
    Mobile / tablet portrait (<= 991.98px)
    Shows only the logo + hamburger toggle; the top info widgets
    collapse into an off-canvas nav opened by the hamburger.
    ========================================================== */
@media (max-width: 991.98px) {
    /* Hide top header widgets on small devices */
    .widget_header_wrapper {
        display: none !important;
    }

    /* Fix the header bar to the top of the viewport */
    .site-header-menu {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 3000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    /* Reserve space for the now out-of-flow fixed header so page
        content doesn't render underneath it. */
    .page {
        padding-top: 60px;
    }

    /* Layout: logo left, hamburger right */
    #site-header-menu .site-navigation-content {
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 60px;
        gap: 12px;
    }

    /* mobile logo visible inside navigation */
    .mobile-logo {
        display: block;
    }

    .mobile-logo img {
        height: 48px;
        width: auto;
    }

    /* hamburger toggle */
    .btn-show-menu-mobile {
        display: block !important;
        order: 2;
        margin-left: auto;
        cursor: pointer;
        z-index: 1001;
        position: relative;
    }

    .ttm-header-style-02 #site-header-menu .menubar {
        position: relative !important;
        top: 0 !important;
        right: auto;
        bottom: auto;
    }

    .ttm-header-style-02 .menubar-inner,
    .ttm-header-style-02 .menubar-inner:after,
    .ttm-header-style-02 .menubar-inner:before {
        background-color: #222d35 !important;
    }

    body.ttm-nav-open {
        overflow: hidden;
    }

    body.ttm-nav-open .btn-show-menu-mobile {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 3001;
    }

    /* off-canvas nav overlay */
    nav.main-menu {
        display: none;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background-color: #fff;
        padding: 90px 20px 20px;
        z-index: 2000;
        border-top: none !important;
    }

    nav.main-menu.show {
        display: block !important;
    }

    nav.main-menu ul.menu > li > a {
        padding: 14px 15px;
        font-size: 16px;
    }

    nav.main-menu ul.menu li.mega-menu-item ul.mega-submenu {
        padding-left: 10px;
        background-color: transparent;
    }

    nav.main-menu ul.menu li ul.mega-submenu li a {
        padding: 12px 15px;
    }

    .mega-submenu {
        border-top: 0 !important;
        box-shadow: none !important;
    }
}

/* ==========================================================
    Small phones (<= 767.98px)
    ========================================================== */
@media (max-width: 767.98px) {
    #logo-img {
        height: 50px;
    }

    .mobile-logo img {
        height: 40px;
    }

    nav.main-menu {
        padding: 80px 15px 20px;
    }
}

/* ==========================================================
    Extra-small phones (<= 575.98px)
    ========================================================== */
@media (max-width: 575.98px) {
    nav.main-menu ul.menu > li > a {
        font-size: 15px;
    }
}

/* ==========================================================
    Shared Inner-Page Hero Header
    (.page-header-enhanced / .page-title-large / .breadcrumb-enhanced)
    Used by: aboutus, products, portal, contactus, certifications
    ========================================================== */
.page-header-enhanced {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0 135px;
    text-align: center;
    color: var(--white);
    overflow: hidden;
}

.page-header-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(35, 35, 35, 0.9), rgba(6, 80, 143, 0.6));
    z-index: 1;
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-title-large {
    color: var(--white);
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 16px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    letter-spacing: -2px;
    line-height: 1;
}

.page-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.breadcrumb-enhanced {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    margin-top: 6px;
}

.breadcrumb-enhanced a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb-enhanced a:hover {
    color: var(--white);
}

.breadcrumb-enhanced .separator {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
}

.breadcrumb-enhanced .active {
    color: #9DC9D8;
}

/* Smaller desktops/laptops */
@media (max-width: 1199.98px) {
    .page-title-large {
        font-size: 52px;
    }
}

/* Tablets */
@media (max-width: 991.98px) {
    .page-header-enhanced {
        padding: 90px 0 105px;
    }

    .page-title-large {
        font-size: 44px;
        letter-spacing: -1.2px;
        margin-bottom: 14px;
    }

    .breadcrumb-enhanced {
        padding: 4px 14px;
        font-size: 12px;
        letter-spacing: 0.8px;
        margin-top: 4px;
    }
}

/* Mobile / small tablets */
@media (max-width: 767.98px) {
    .page-header-enhanced {
        padding: 70px 0 85px;
    }

    .page-title-large {
        font-size: 34px;
        letter-spacing: -0.8px;
        margin-bottom: 12px;
    }

    .breadcrumb-enhanced {
        padding: 2px 10px;
        font-size: 11px;
        letter-spacing: 0.6px;
        margin-top: 2px;
    }

    .breadcrumb-enhanced .separator {
        margin: 0 8px;
        font-size: 9px;
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    .page-header-enhanced {
        padding: 50px 0 75px;
    }

    .page-title-large {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .breadcrumb-enhanced {
        padding: 2px 8px;
        font-size: 10px;
        margin-top: 0;
    }

    .breadcrumb-enhanced .separator {
        margin: 0 6px;
        font-size: 8px;
    }
}

/* Extra-small phones */
@media (max-width: 479.98px) {
    .page-header-enhanced {
        padding: 35px 0 50px;
    }

    .page-title-large {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .breadcrumb-enhanced {
        padding: 0 7px;
        font-size: 9px;
        margin-top: 0;
    }

    .breadcrumb-enhanced .separator {
        margin: 0 5px;
        font-size: 7px;
    }
}