/* ============================================================
   TRADEWINDS INTERNATIONAL
   PREMIUM HEADER
   ============================================================ */

:root {
    --twi-navy: #091923;
    --twi-navy-light: #102833;

    --twi-green: #8bbd45;
    --twi-green-dark: #739f37;

    --twi-blue: #159bd3;

    --twi-text: #17252d;
    --twi-muted: #738087;

    --twi-white: #ffffff;

    --twi-border: rgba(9,25,35,.09);

    --twi-container: 1380px;
}


/* ============================================================
   RESET
   ============================================================ */

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

.twi-header ul,
.twi-header li {
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.twi-header a {
    text-decoration: none !important;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.twi-container {
    width: min(
        calc(100% - 70px),
        var(--twi-container)
    );

    margin-left: auto;
    margin-right: auto;
}


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

.twi-header {
    position: relative;
    z-index: 999999;
    width: 100%;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.twi-topbar {
    height: 34px;

    background:
        linear-gradient(
            90deg,
            #07151e,
            #0b1d28
        );

    color: rgba(255,255,255,.72);

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

    font-size: 10px;

    letter-spacing: .075em;

    text-transform: uppercase;
}

.twi-topbar-inner {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.twi-top-left,
.twi-top-right {
    display: flex;

    align-items: center;

    gap: 11px;
}

.twi-top-right a {
    color: rgba(255,255,255,.72) !important;

    transition:
        color .25s ease;
}

.twi-top-right a:hover {
    color: #ffffff !important;
}

.twi-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--twi-green);

    box-shadow:
        0 0 0 4px rgba(139,189,69,.09);
}

.twi-divider {
    opacity: .3;
}


/* ============================================================
   MAIN BAR
   ============================================================ */

.twi-mainbar {
    position: relative;

    background:
        rgba(255,255,255,.98);

    border-bottom:
        1px solid var(--twi-border);

    transition:
        background .35s ease,
        box-shadow .35s ease;
}

.twi-mainbar-inner {
    min-height: 108px;

    display: flex;

    align-items: center;

    transition:
        min-height .35s cubic-bezier(.2,.7,.2,1);
}


/* ============================================================
   STICKY / SCROLLED
   ============================================================ */

.twi-header.twi-scrolled .twi-mainbar {
    background:
        rgba(255,255,255,.92);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 14px 40px rgba(5,20,28,.10);
}

.twi-header.twi-scrolled .twi-mainbar-inner {
    min-height: 76px;
}


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

.twi-logo {
    flex-shrink: 0;
}

.twi-logo > a {
    display: flex;

    align-items: center;
}

.twi-logo img {
    display: block;

    width: auto;

    max-width: 190px;
    max-height: 68px;

    object-fit: contain;

    transition:
        max-height .35s ease,
        transform .3s ease;
}

.twi-header.twi-scrolled .twi-logo img {
    max-height: 54px;
}

.twi-logo:hover img {
    transform:
        translateY(-1px);
}

.twi-text-logo {
    display: flex;
    flex-direction: column;

    color: var(--twi-navy);

    line-height: 1;
}

.twi-text-logo strong {
    font-size: 20px;
}

.twi-text-logo span {
    margin-top: 5px;

    color: var(--twi-blue);

    font-size: 12px;

    letter-spacing: .04em;
}


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

.twi-navigation {
    height: 108px;

    margin-left: auto;
    margin-right: 30px;
}

.twi-nav {
    height: 100%;

    display: flex;

    align-items: center;

    gap: 2px;
}

.twi-nav > li {
    position: relative;

    height: 100%;

    display: flex;

    align-items: center;
}

.twi-nav > li > a {
    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0 15px;

    color: var(--twi-text) !important;

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

    font-size: 12px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color .25s ease;
}


/* ============================================================
   NAV ACTIVE LINE
   ============================================================ */

.twi-nav > li > a::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 25px;

    height: 2px;

    background:
        var(--twi-green);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform .3s cubic-bezier(.65,0,.35,1);
}

.twi-nav > li:hover > a,
.twi-nav > li.current-menu-item > a {
    color:
        var(--twi-green) !important;
}

.twi-nav > li:hover > a::after,
.twi-nav > li.current-menu-item > a::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


/* ============================================================
   ARROW
   ============================================================ */

.twi-arrow {
    width: 6px;
    height: 6px;

    border-right:
        1px solid currentColor;

    border-bottom:
        1px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform .25s ease;
}

.twi-has-dropdown:hover .twi-arrow {
    transform:
        rotate(225deg)
        translate(-1px,-1px);
}


/* ============================================================
   MEGA MENU
   ============================================================ */

.twi-mega-menu {
    position: absolute;

    top: calc(100% - 1px);

    left: 50%;

    display: grid;

    width: 760px;

    padding: 28px 25px 25px;

    background:
        rgba(255,255,255,.985);

    border:
        1px solid rgba(9,25,35,.07);

    border-top:
        2px solid var(--twi-green);

    border-radius:
        0 0 12px 12px;

    box-shadow:
        0 28px 65px rgba(6,24,34,.15);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate(-50%, 13px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s cubic-bezier(.2,.7,.2,1);

    z-index: 9999999;
}


/* Electrical 3 columns */

.twi-electrical-menu {
    grid-template-columns:
        repeat(3,1fr);

    gap: 0;
}


/* Stone 3 columns */

.twi-stone-menu {
    grid-template-columns:
        1.15fr 1fr .85fr;

    gap: 0;
}


/* SHOW */

.twi-has-dropdown:hover > .twi-mega-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%,0);
}


/* ============================================================
   MENU COLUMNS
   ============================================================ */

.twi-mega-column {
    min-width: 0;

    padding:
        0 24px;
}

.twi-mega-column:first-child {
    padding-left: 5px;
}

.twi-mega-column + .twi-mega-column {
    border-left:
        1px solid rgba(9,25,35,.09);
}


/* ============================================================
   MENU HEADING
   ============================================================ */

.twi-mega-heading {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color: var(--twi-navy);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .02em;

    text-transform: uppercase;
}

.twi-mega-icon {
    width: 25px;
    height: 25px;

    display: inline-flex;

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

    color: var(--twi-green);

    border:
        1px solid rgba(139,189,69,.35);

    border-radius: 6px;

    font-size: 14px;
}

.twi-heading-spaced {
    margin-top: 25px;
}


/* ============================================================
   DROPDOWN LINKS
   ============================================================ */

.twi-mega-column > a {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 36px;

    padding:
        7px 9px;

    color: #45535b !important;

    border-radius: 5px;

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

    font-size: 11.5px;

    line-height: 1.35;

    transition:
        color .2s ease,
        background .2s ease,
        padding-left .2s ease;
}

.twi-mega-column > a::before {
    content: "›";

    margin-right: 8px;

    color: var(--twi-green);

    font-size: 17px;

    opacity: 0;

    transform:
        translateX(-4px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.twi-mega-column > a:hover {
    color:
        var(--twi-green-dark) !important;

    background:
        rgba(139,189,69,.075);

    padding-left:
        13px;
}

.twi-mega-column > a:hover::before {
    opacity: 1;

    transform:
        translateX(0);
}


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

.twi-header-action {
    flex-shrink: 0;
}

.twi-quote {
    position: relative;

    min-width: 164px;
    height: 52px;

    display: inline-flex;

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

    gap: 16px;

    padding:
        0 19px;

    overflow: hidden;

    background:
        var(--twi-navy);

    color:
        #ffffff !important;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 600;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.twi-quote::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transition:
        left .55s ease;
}

.twi-quote:hover {
    background:
        var(--twi-green);

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px rgba(9,25,35,.16);
}

.twi-quote:hover::before {
    left: 120%;
}

.twi-quote b {
    color:
        var(--twi-green);

    font-size: 16px;

    transition:
        transform .25s ease,
        color .25s ease;
}

.twi-quote:hover b {
    color: #ffffff;

    transform:
        translateX(4px);
}


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

.twi-mobile-toggle {
    display: none;

    width: 43px;
    height: 43px;

    padding: 9px;

    background:
        #ffffff;

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

    border-radius: 4px;

    cursor: pointer;
}

.twi-mobile-toggle span {
    display: block;

    width: 100%;
    height: 1.5px;

    margin:
        5px 0;

    background:
        var(--twi-navy);

    transition:
        transform .3s ease,
        opacity .2s ease;
}

.twi-mobile-toggle.twi-active span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}

.twi-mobile-toggle.twi-active span:nth-child(2) {
    opacity: 0;
}

.twi-mobile-toggle.twi-active span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


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

.twi-mobile-navigation {
    display: none;

    position: fixed;

    top: 142px;

    left: 0;
    right: 0;

    max-height:
        calc(100vh - 142px);

    overflow-y: auto;

    background:
        #ffffff;

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

    z-index:
        999998;
}

.twi-mobile-inner {
    width:
        calc(100% - 36px);

    max-width:
        650px;

    margin:
        auto;

    padding:
        10px 0 25px;
}

.twi-mobile-inner > a,
.twi-mobile-group > button {
    width: 100%;

    min-height: 53px;

    display: flex;

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

    padding:
        0 5px;

    color:
        var(--twi-text) !important;

    background:
        transparent;

    border: 0;

    border-bottom:
        1px solid rgba(9,25,35,.08);

    font-size: 14px;

    font-weight: 500;

    text-align: left;

    cursor: pointer;
}

.twi-mobile-group button span {
    color:
        var(--twi-green);

    font-size: 19px;
}

.twi-mobile-submenu {
    display: none;

    padding:
        6px 0 8px 16px;
}

.twi-mobile-group.twi-mobile-open
.twi-mobile-submenu {
    display: block;
}

.twi-mobile-submenu a {
    display: block;

    padding:
        10px 5px;

    color:
        var(--twi-muted) !important;

    font-size: 13px;
}

.twi-mobile-quote {
    margin-top: 20px !important;

    padding:
        0 18px !important;

    min-height: 52px !important;

    color:
        #ffffff !important;

    background:
        var(--twi-navy) !important;

    border:
        0 !important;

    border-radius: 4px;
}

.twi-mobile-quote span {
    color:
        var(--twi-green);
}


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

@media (max-width: 1180px) {

    .twi-container {
        width:
            calc(100% - 45px);
    }

    .twi-nav > li > a {
        padding:
            0 9px;

        font-size:
            11px;
    }

    .twi-navigation {
        margin-right:
            12px;
    }

    .twi-quote {
        min-width:
            145px;
    }

}


@media (max-width: 1050px) {

    .twi-navigation,
    .twi-header-action {
        display:
            none;
    }

    .twi-mobile-toggle {
        display:
            block;

        margin-left:
            auto;
    }

    .twi-mainbar-inner {
        min-height:
            82px;
    }

    .twi-header.twi-scrolled
    .twi-mainbar-inner {
        min-height:
            72px;
    }

    .twi-mobile-navigation {
        top:
            116px;

        max-height:
            calc(100vh - 116px);
    }

}


@media (max-width: 650px) {

    .twi-container {
        width:
            calc(100% - 30px);
    }

    .twi-topbar {
        height:
            30px;

        font-size:
            8px;
    }

    .twi-top-right {
        display:
            none;
    }

    .twi-topbar-inner {
        justify-content:
            center;
    }

    .twi-mainbar-inner {
        min-height:
            72px;
    }

    .twi-logo img {
        max-width:
            150px;

        max-height:
            52px;
    }

    .twi-mobile-navigation {
        top:
            102px;

        max-height:
            calc(100vh - 102px);
    }

}


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

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

    .twi-header *,
    .twi-header *::before,
    .twi-header *::after {
        transition:
            none !important;

        animation:
            none !important;
    }

}