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

:root{
    --primary:#680624;
    --primary-dark:#3d0316;
    --primary-soft:#8b183d;

    --secondary:#D4AF37;
    --secondary-dark:#A98218;

    --ink:#17151a;
    --muted:#6f696d;

    --paper:#fbf9f5;
    --line:#e7e1dc;

    --white:#ffffff;
}


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

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:"Manrope",sans-serif;
    color:var(--ink);
    background:#fff;
    overflow-x:hidden;
    font-size:14px;
}

img{
    max-width:100%;
}

a{
    text-decoration:none;
}

.container-xl{
    max-width:1420px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.condensed{
    font-family:"Barlow Condensed",sans-serif;
}

::selection{
    background:var(--secondary);
    color:var(--primary-dark);
}

/* =========================================================
   YASKO PREMIUM HEADER
========================================================= */

/* =========================================================
   YASKO HEADER - PREMIUM CORPORATE
========================================================= */

:root{
    --primary:#680624;
    --primary-dark:#3d0316;
    --primary-soft:#8b183d;

    --secondary:#D4AF37;
    --secondary-dark:#A98218;

    --header-white:#ffffff;
    --header-text:#17151a;
    --header-muted:#6f696d;

    --header-line:#e8e1dc;

    --heading-font:'Barlow Condensed',sans-serif;
    --body-font:'Manrope',sans-serif;
}

/* =========================================================
   YASKO UTILITY BAR
   60% PRIMARY + 40% GOLD
========================================================= */

.utility-bar{
    position:relative;

    z-index:1100;

    width:100%;

    min-height:58px;

    background:
        var(--secondary);

    color:#fff;

    overflow:hidden;

    border-bottom:
        1px solid
        rgba(61,3,22,.18);

    box-shadow:
        0 3px 12px
        rgba(61,3,22,.08);
}


/* =========================================================
   MAIN UTILITY INNER
========================================================= */

.utility-inner{
    position:relative;

    min-height:58px;

    display:flex;

    align-items:stretch;

    width:100%;
}


/* =========================================================
   LEFT 60% — PRIMARY MAROON
========================================================= */

.utility-contact{
    position:relative;

    width:60%;

    min-height:58px;

    display:flex;

    align-items:center;

    gap:30px;

    padding:
        7px 42px;

    background:
        var(--primary);

    color:#fff;

    z-index:2;
}


/*
   Clean diagonal division between
   maroon and gold
*/

.utility-contact::after{
    content:"";

    position:absolute;

    top:0;

    right:-32px;

    width:48px;

    height:100%;

    background:var(--primary);

    clip-path:
        polygon(
            0 0,
            100% 0,
            66% 100%,
            0 100%
        );

    z-index:3;
}


/* =========================================================
   LEFT CONTACT LINKS
========================================================= */

.utility-contact a{
    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    color:#fff;

    text-decoration:none;

    font-family:
        var(--body-font);

    font-size:13px;

    font-weight:700;

    letter-spacing:.15px;

    white-space:nowrap;

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


.utility-contact a:hover{
    color:#fff;

    opacity:.88;

    transform:
        translateY(-1px);
}


/* =========================================================
   CONTACT ICON
========================================================= */

.utility-contact a > i{
    width:31px;

    height:31px;

    flex:
        0 0 31px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--secondary);

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

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:4px;

    font-size:12px;

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


.utility-contact a:hover > i{
    background:var(--secondary);

    color:var(--primary);
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.utility-contact a > span{
    display:block;

    color:#fff;

    line-height:1.1;
}


/* =========================================================
   RIGHT 40% — GOLD
========================================================= */

.utility-quality{
    position:relative;

    width:40%;

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:0;

    padding:
        7px 30px 7px 42px;

    background:
        var(--secondary);

    color:var(--primary-dark);

    z-index:1;
}


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

.utility-quality strong{
    display:inline-flex;

    align-items:center;

    color:#17151a;

    font-family:
        var(--body-font);

    font-size:12px;

    line-height:1;

    font-weight:800;

    letter-spacing:.9px;

    white-space:nowrap;
}


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

.utility-quality i{
    margin:
        0 12px;

    color:
        rgba(23,21,26,.48);

    font-size:13px;

    font-style:normal;

    font-weight:900;
}


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

.quality-dot{
    width:6px;

    height:6px;

    margin-right:8px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(104,6,36,.12);
}


/* =========================================================
   DESKTOP — SLIGHTLY LARGER VISIBILITY
========================================================= */

@media(min-width:1200px){

    .utility-bar,
    .utility-inner,
    .utility-contact,
    .utility-quality{
        min-height:62px;
    }


    .utility-contact{
        padding-left:46px;

        gap:34px;
    }


    .utility-contact a{
        font-size:14px;

        font-weight:700;
    }


    .utility-contact a > i{
        width:34px;
        height:34px;

        flex-basis:34px;

        font-size:13px;
    }


    .utility-quality{
        padding-left:45px;
    }


    .utility-quality strong{
        font-size:13px;

        letter-spacing:1px;
    }


    .utility-quality i{
        margin:
            0 14px;
    }
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media(max-width:1199px) and (min-width:992px){

    .utility-contact{
        padding:
            7px 28px;

        gap:22px;
    }


    .utility-contact a{
        font-size:12px;
    }


    .utility-contact a > i{
        width:30px;
        height:30px;

        flex-basis:30px;
    }


    .utility-quality{
        padding:
            7px 20px 7px 35px;
    }


    .utility-quality strong{
        font-size:11px;

        letter-spacing:.65px;
    }


    .utility-quality i{
        margin:
            0 8px;
    }
}


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

@media(max-width:991px){

    .utility-bar{
        min-height:52px;
    }


    .utility-inner{
        min-height:52px;
    }


    .utility-contact{
        width:60%;

        min-height:52px;

        padding:
            6px 20px;

        gap:16px;
    }


    .utility-contact::after{
        right:-25px;

        width:38px;
    }


    .utility-contact a{
        font-size:11px;

        gap:7px;
    }


    .utility-contact a > i{
        width:27px;
        height:27px;

        flex-basis:27px;

        font-size:10px;
    }


    .utility-quality{
        width:40%;

        min-height:52px;

        padding:
            6px 10px 6px 25px;
    }


    .utility-quality strong{
        font-size:9.5px;

        letter-spacing:.45px;
    }


    .utility-quality i{
        margin:
            0 6px;

        font-size:10px;
    }


    .quality-dot{
        width:5px;
        height:5px;

        flex-basis:5px;

        margin-right:5px;
    }
}


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

@media(max-width:575px){

    .utility-bar{
        min-height:45px;
    }


    .utility-inner{
        min-height:45px;
    }


    /*
       56% LEFT
       44% RIGHT
       gives enough space for the
       quality message on mobile
    */

    .utility-contact{
        width:56%;

        min-height:45px;

        padding:
            5px 9px;

        gap:0;
    }


    .utility-contact::after{
        right:-18px;

        width:28px;
    }


    /*
       Show only the first contact
       on mobile
    */

    .utility-contact a:nth-child(2){
        display:none;
    }


    .utility-contact a{
        width:100%;

        gap:6px;

        font-size:9px;

        font-weight:700;

        overflow:hidden;
    }


    .utility-contact a > i{
        width:24px;
        height:24px;

        flex-basis:24px;

        font-size:9px;
    }


    .utility-contact a > span{
        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;
    }


    .utility-quality{
        width:44%;

        min-height:45px;

        padding:
            5px 4px 5px 18px;

        justify-content:center;

        gap:0;
    }


    .utility-quality strong{
        font-size:7.5px;

        font-weight:800;

        letter-spacing:.15px;
    }


    .utility-quality i{
        margin:
            0 3px;

        font-size:7px;
    }


    .quality-dot{
        width:4px;
        height:4px;

        flex-basis:4px;

        margin-right:4px;

        box-shadow:
            0 0 0 2px
            rgba(104,6,36,.10);
    }
}


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

@media(max-width:380px){

    .utility-contact{
        width:55%;

        padding-left:7px;
        padding-right:7px;
    }


    .utility-quality{
        width:45%;

        padding-left:15px;
        padding-right:3px;
    }


    .utility-contact a{
        font-size:8px;
    }


    .utility-contact a > i{
        width:22px;
        height:22px;

        flex-basis:22px;

        font-size:8px;
    }


    .utility-quality strong{
        font-size:6.8px;

        letter-spacing:0;
    }


    .utility-quality i{
        margin:
            0 2px;

        font-size:6px;
    }
}

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

.site-header{
    position:relative;
    z-index:1050;

    background:#fff;

    border-top:3px solid var(--primary);

    border-bottom:1px solid var(--header-line);

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

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


.site-header:before{
    content:"";

    position:absolute;

    top:-3px;
    left:0;

    width:32%;

    height:3px;

    background:var(--secondary);

    z-index:2;
}


.site-header.header-scrolled{
    box-shadow:
        0 12px 35px rgba(31,10,17,.13);
}


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

.header-inner{
    min-height:126px;

    display:flex;
    align-items:center;

    position:relative;
}


/* =========================================================
   BRAND
========================================================= */

.brand-area{
    display:flex;
    align-items:center;

    flex-shrink:0;

    text-decoration:none;

    color:var(--header-text);

    min-width:390px;

    padding-right:30px;

    position:relative;
}


.brand-area:after{
    content:"";

    position:absolute;

    right:0;
    top:14px;
    bottom:14px;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--header-line),
            transparent
        );
}


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

.brand-logo-box{
    width:92px;
    height:92px;

    flex:0 0 92px;

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

    background:#fff;

    border:1px solid #ddd6d1;

    position:relative;

    box-shadow:
        0 8px 22px rgba(61,3,22,.08);

    overflow:hidden;
}


.brand-logo-box:before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:var(--secondary);
}


.brand-logo-box:after{
    content:"";

    position:absolute;

    right:0;
    bottom:0;

    width:20px;
    height:20px;

    border-right:3px solid var(--primary);
    border-bottom:3px solid var(--primary);
}


.brand-logo{
    width:78px;
    height:78px;

    object-fit:contain;

    display:block;
}


/* =========================================================
   BRAND TEXT
========================================================= */

.brand-title{
    margin-left:17px;

    font-family:var(--heading-font);

    font-size:43px;
    line-height:.78;

    font-weight:900;

    letter-spacing:.8px;

    color:var(--primary);

    white-space:nowrap;
}


.brand-title span{
    display:block;

    margin-top:10px;

    font-family:var(--body-font);

    font-size:9.5px;
    line-height:1.15;

    font-weight:900;

    letter-spacing:1.65px;

    color:#282329;
}


.brand-title small{
    display:block;

    margin-top:8px;

    font-family:var(--body-font);

    font-size:8px;

    font-weight:800;

    letter-spacing:2.2px;

    color:var(--secondary-dark);

    text-transform:uppercase;
}
/* =========================================================
   NAVIGATION
   Clean • Readable • Centered • Professional
========================================================= */

.main-navigation{
    flex:1;
    min-width:0;

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

    height:100%;
}


/* =========================================================
   MAIN MENU
========================================================= */

.main-nav-list{
    list-style:none;

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

    gap:2px;

    width:100%;
    height:100%;

    margin:0;
    padding:0 8px;
}


.main-nav-list .nav-item{
    position:relative;

    display:flex;
    align-items:center;

    height:100%;
}


.main-nav-list .nav-link{
    position:relative;

    height:122px;

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

    gap:6px;

    padding:0 14px;

    color:#302a2e;

    font-family:"Manrope", sans-serif;

    font-size:12.5px;

    font-weight:700;

    letter-spacing:.35px;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

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


/* GOLD ACTIVE LINE */

.main-nav-list .nav-link::before{
    content:"";

    position:absolute;

    left:14px;
    right:14px;

    bottom:22px;

    height:2px;

    background:var(--secondary);

    transform:scaleX(0);

    transform-origin:center;

    transition:
        transform .3s ease;
}


.main-nav-list .nav-link:hover,
.main-nav-list .nav-link.active{
    color:var(--primary);
}


.main-nav-list .nav-link:hover::before,
.main-nav-list .nav-link.active::before{
    transform:scaleX(1);
}


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

.main-nav-list .nav-link.dropdown-toggle::after{
    display:none;
}


.main-nav-list .nav-link i{
    margin-left:4px;

    font-size:9px;

    color:var(--secondary-dark);

    transition:
        transform .3s ease;
}


.main-nav-list .dropdown.show > .nav-link i{
    transform:rotate(180deg);
}


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

.yasko-dropdown{
    width:430px;

    margin-top:0 !important;

    padding:0;

    border:
        1px solid
        rgba(104,6,36,.14);

    border-top:
        4px solid
        var(--secondary);

    border-radius:
        0 0 10px 10px;

    background:#fff;

    box-shadow:
        0 22px 55px
        rgba(61,3,22,.18);

    overflow:hidden;
}


/* =========================================================
   DROPDOWN HEADING
========================================================= */

.dropdown-heading{
    min-height:76px;

    padding:
        15px 19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #faf7f3
        );

    border-bottom:
        1px solid
        #e9e2dd;
}


.dropdown-heading div{
    display:flex;

    flex-direction:column;
}


.dropdown-heading span{
    display:block;

    color:var(--primary);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:19px;

    line-height:1;

    font-weight:700;

    letter-spacing:.8px;
}


.dropdown-heading small{
    display:block;

    margin-top:6px;

    color:#81777c;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:1.4px;
}


.dropdown-heading > i{
    width:40px;
    height:40px;

    display:flex;

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

    color:var(--primary);

    background:
        rgba(104,6,36,.055);

    border:
        1px solid
        rgba(104,6,36,.12);

    font-size:15px;
}


/* =========================================================
   PRODUCT ITEMS
========================================================= */

.yasko-dropdown .dropdown-item{
    position:relative;

    min-height:76px;

    padding:
        11px 16px;

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--header-text);

    background:#fff;

    border-bottom:
        1px solid
        #eee9e5;

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


.yasko-dropdown .dropdown-item:hover{
    color:var(--header-text);

    background:
        linear-gradient(
            90deg,
            rgba(104,6,36,.055),
            rgba(212,175,55,.035)
        );

    padding-left:21px;
}


/* =========================================================
   PRODUCT ICON
========================================================= */

.dropdown-icon{
    width:47px;
    height:47px;

    flex:
        0 0 47px;

    display:flex;

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

    background:#faf7f4;

    border:
        1px solid
        #e2dcd7;

    color:var(--primary);

    border-radius:
        6px 2px 6px 2px;

    font-size:19px;

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


.yasko-dropdown .dropdown-item:hover
.dropdown-icon{
    background:var(--primary);

    border-color:var(--primary);

    color:var(--secondary);

    transform:
        translateY(-1px);
}


/* =========================================================
   PRODUCT TEXT
========================================================= */

.dropdown-text{
    min-width:0;

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;
}


.dropdown-text strong{
    color:#292327;

    font-family:
        "Manrope",
        sans-serif;

    font-size:13px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:.05px;
}


.dropdown-text small{
    color:#777073;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9.5px;

    line-height:1.35;

    font-weight:500;
}


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

.dropdown-arrow{
    flex:0 0 auto;

    font-size:11px;

    color:#aaa2a2;

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


.yasko-dropdown .dropdown-item:hover
.dropdown-arrow{
    color:var(--primary);

    transform:
        translate(2px,-2px);
}


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

.dropdown-footer{
    margin:0;

    padding:0;

    background:var(--primary);

    border:0;
}


.dropdown-footer a{
    min-height:50px;

    padding:
        0 19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#fff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.2px;

    text-decoration:none;
}


.dropdown-footer a i{
    color:var(--secondary);

    font-size:13px;

    transition:
        transform .25s ease;
}


.dropdown-footer a:hover{
    color:#fff;
}


.dropdown-footer a:hover i{
    transform:
        translate(3px,-3px);
}


/* =========================================================
   QUALITY DROPDOWN
   KEEPING QUALITY STYLE SEPARATE
========================================================= */

.quality-dropdown{
    width:285px;

    padding:9px;

    margin-top:0 !important;

    border:
        1px solid
        rgba(104,6,36,.13);

    border-top:
        3px solid
        var(--secondary);

    border-radius:
        0 0 8px 8px;

    background:#fff;

    box-shadow:
        0 20px 45px
        rgba(61,3,22,.15);
}


.quality-dropdown .dropdown-item{
    display:flex;

    align-items:center;

    gap:11px;

    padding:11px;

    color:var(--primary-dark);

    border-radius:5px;
}


.quality-dropdown .dropdown-item:hover{
    background:#faf4f6;
}


.quality-menu-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;

    place-items:center;

    background:
        rgba(104,6,36,.07);

    color:var(--primary);

    border-radius:6px;

    font-size:16px;
}


.quality-dropdown .dropdown-item > span:last-child{
    display:flex;

    flex-direction:column;

    gap:3px;
}


.quality-dropdown strong{
    color:var(--primary-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:14px;

    line-height:1;

    font-weight:700;
}


.quality-dropdown small{
    color:#777;

    font-family:
        "Manrope",
        sans-serif;

    font-size:7px;

    line-height:1.35;
}


/* =========================================================
   CONTACT US
   LAST NORMAL MENU ITEM
========================================================= */

.main-nav-list .contact-item{
    margin-left:2px;
}


.main-nav-list .contact-item .nav-link{
    color:var(--primary);

    font-weight:750;

    padding-left:15px;
    padding-right:15px;
}


.main-nav-list .contact-item .nav-link::before{
    background:var(--secondary);
}


.main-nav-list .contact-item .nav-link:hover{
    color:var(--primary-dark);
}


/* =========================================================
   GET QUOTE
   STAYS ON RIGHT SIDE
========================================================= */

.quote-item{
    margin-left:auto;

    padding-left:8px;
}


.quote-btn{
    min-height:50px;

    padding:
        0 18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    background:var(--primary);

    color:#fff;

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

    border-radius:3px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    line-height:1;

    text-decoration:none;

    box-shadow:
        0 8px 18px
        rgba(104,6,36,.15);

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


.quote-btn i{
    color:var(--secondary);

    font-size:13px;

    transition:
        transform .3s ease;
}


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

    color:#fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(104,6,36,.22);
}


.quote-btn:hover i{
    transform:
        translate(2px,-2px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn{
    display:none;

    width:46px;
    height:44px;

    padding:0;

    margin-left:auto;

    border:
        1px solid
        rgba(104,6,36,.15) !important;

    border-radius:4px;

    background:#fff;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    box-shadow:none !important;
}


.mobile-menu-btn span{
    display:block;

    width:21px;
    height:2px;

    background:var(--primary);

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


.mobile-menu-btn.menu-active span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}


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


.mobile-menu-btn.menu-active span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media(max-width:1399px){

    .brand-area{
        min-width:350px;
    }

    .brand-title{
        font-size:39px;
    }

    .brand-title span{
        font-size:8.8px;
    }

    .main-nav-list{
        gap:1px;
    }

    .main-nav-list .nav-link{
        padding-left:10px;
        padding-right:10px;

        font-size:11.5px;
    }

    .main-nav-list .nav-link::before{
        left:10px;
        right:10px;
    }

    .yasko-dropdown{
        width:410px;
    }

    .quote-btn{
        padding-left:15px;
        padding-right:15px;
    }
}


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

@media(max-width:991px){

    .utility-inner{
        min-height:54px;
    }

    .utility-contact{
        width:60%;

        padding:7px 18px;

        gap:14px;
    }

    .utility-quality{
        width:40%;

        display:flex;

        padding:7px 10px;
    }

    .utility-item{
        min-width:0;
    }

    .utility-item strong{
        font-size:12px;
    }

    .quality-label{
        font-size:7px;
    }

    .quality-point{
        font-size:11px;
    }

    .header-inner{
        min-height:94px;
    }

    .brand-area{
        min-width:0;

        padding-right:0;

        border:0;
    }

    .brand-area:after{
        display:none;
    }

    .brand-logo-box{
        width:68px;
        height:68px;

        flex-basis:68px;
    }

    .brand-logo{
        width:58px;
        height:58px;
    }

    .brand-title{
        margin-left:12px;

        font-size:32px;
    }

    .brand-title span{
        margin-top:8px;

        font-size:7.3px;

        letter-spacing:1.2px;
    }

    .brand-title small{
        font-size:6.5px;

        margin-top:6px;

        letter-spacing:1.5px;
    }


    /* MOBILE BUTTON */

    .mobile-menu-btn{
        display:flex;
    }


    /* NAVIGATION PANEL */

    .main-navigation{
        position:absolute;

        left:0;
        right:0;

        top:100%;

        height:auto;

        display:none;

        background:#fff;

        border-top:
            3px solid
            var(--secondary);

        border-bottom:
            1px solid
            #ddd5d0;

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

        padding:
            8px 0 14px;

        justify-content:flex-start;
    }


    .main-navigation.menu-open,
    .main-navigation.show{
        display:block;
    }


    .main-nav-list{
        width:100%;

        height:auto;

        display:block;

        padding:0;
    }


    .main-nav-list .nav-item{
        display:block;

        height:auto;

        width:100%;
    }


    .main-nav-list .nav-link{
        width:100%;

        height:53px;

        min-height:53px;

        padding:
            0 22px;

        justify-content:space-between;

        font-size:12px;

        font-weight:700;

        border-bottom:
            1px solid
            #eee9e5;
    }


    .main-nav-list .nav-link::before{
        left:0;
        right:auto;

        width:4px;

        height:100%;

        bottom:0;

        transform:
            scaleY(0);

        transform-origin:center;
    }


    .main-nav-list .nav-link:hover::before,
    .main-nav-list .nav-link.active::before{
        transform:
            scaleY(1);
    }


    .main-nav-list .nav-link i{
        margin-left:auto;
    }


    /* DROPDOWNS */

    .yasko-dropdown,
    .quality-dropdown{
        position:static !important;

        width:100%;

        margin:0 !important;

        border-left:0;
        border-right:0;

        border-radius:0;

        box-shadow:none;
    }


    .yasko-dropdown .dropdown-item{
        min-height:70px;

        padding-left:30px;
    }


    .yasko-dropdown .dropdown-item:hover{
        padding-left:34px;
    }


    .dropdown-heading{
        padding-left:22px;
        padding-right:22px;
    }


    .dropdown-icon{
        width:44px;
        height:44px;

        flex-basis:44px;
    }


    .dropdown-text strong{
        font-size:13px;
    }


    .dropdown-text small{
        font-size:9px;
    }


    /* CONTACT US */

    .main-nav-list .contact-item{
        margin-left:0;
    }


    .main-nav-list .contact-item .nav-link{
        padding-left:22px;
        padding-right:22px;
    }


    /* QUOTE */

    .quote-item{
        margin:
            12px 18px 0;

        padding:0;
    }


    .quote-btn{
        width:100%;

        min-height:52px;

        font-size:10px;
    }
}


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

@media(max-width:575px){

    .utility-inner{
        min-height:45px;
    }


    .utility-contact{
        width:56%;

        padding:
            6px 8px;

        gap:0;
    }


    .utility-quality{
        width:44%;

        padding:
            6px 5px;

        justify-content:center;
    }


    .utility-contact .utility-item:first-child{
        width:100%;
    }


    .utility-contact .utility-item:nth-of-type(2),
    .utility-contact .utility-divider{
        display:none;
    }


    .utility-icon{
        width:28px;
        height:28px;

        flex-basis:28px;

        font-size:10px;
    }


    .utility-item{
        gap:7px;
    }


    .utility-item small{
        font-size:6px;

        letter-spacing:.9px;
    }


    .utility-item strong{
        font-size:9.5px;

        white-space:nowrap;
    }


    .quality-label{
        font-size:5.8px;

        letter-spacing:1px;
    }


    .quality-points{
        gap:4px;
    }


    .quality-point{
        font-size:8.5px;

        letter-spacing:.2px;
    }


    .quality-point b{
        width:4px;
        height:4px;
    }


    .quality-separator{
        font-size:7px;
    }


    .header-inner{
        min-height:82px;
    }


    .brand-logo-box{
        width:58px;
        height:58px;

        flex-basis:58px;
    }


    .brand-logo{
        width:49px;
        height:49px;
    }


    .brand-title{
        font-size:27px;

        margin-left:10px;
    }


    .brand-title span{
        font-size:6.3px;

        letter-spacing:.9px;

        margin-top:7px;
    }


    .brand-title small{
        display:none;
    }


    .mobile-menu-btn{
        width:43px;
        height:43px;

        flex-basis:43px;
    }


    .main-nav-list .nav-link{
        height:51px;

        min-height:51px;

        padding:
            0 18px;

        font-size:11.5px;
    }


    .dropdown-heading{
        min-height:64px;
    }


    .dropdown-heading span{
        font-size:16px;
    }


    .dropdown-heading small{
        font-size:7px;
    }


    .yasko-dropdown .dropdown-item{
        min-height:66px;

        padding-left:25px;
    }


    .yasko-dropdown .dropdown-item:hover{
        padding-left:29px;
    }


    .dropdown-icon{
        width:39px;
        height:39px;

        flex-basis:39px;

        font-size:15px;
    }


    .dropdown-text strong{
        font-size:11.5px;
    }


    .dropdown-text small{
        font-size:8px;
    }


    .quote-item{
        margin:
            10px 14px 0;
    }


    .quote-btn{
        min-height:50px;
    }
}


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

@media(max-width:380px){

    .utility-item strong{
        font-size:8.5px;
    }


    .quality-point{
        font-size:7.5px;
    }


    .brand-title{
        font-size:24px;
    }


    .brand-title span{
        font-size:5.8px;
    }


    .brand-logo-box{
        width:53px;
        height:53px;

        flex-basis:53px;
    }


    .brand-logo{
        width:45px;
        height:45px;
    }


    .main-nav-list .nav-link{
        font-size:11px;
    }
}


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

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

    .site-header,
    .nav-link,
    .quote-btn,
    .dropdown-item,
    .dropdown-icon,
    .dropdown-arrow,
    .brand-area,
    .mobile-menu-btn span{
        transition:none !important;
    }

}

/* =========================================================
   QUOTE MODAL
========================================================= */

.quote-modal{

    position:relative;

    overflow:hidden;

    border:0;

    border-radius:
        8px;

    background:
        #fff;

    box-shadow:
        0 30px 80px
        rgba(30,5,15,.28);

}


.quote-modal-line{

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--primary-dark),
            var(--primary),
            var(--secondary),
            var(--primary)
        );

    z-index:10;

}


.quote-close{

    position:absolute;

    right:17px;
    top:17px;

    z-index:20;

    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(104,6,36,.13);

    border-radius:50%;

    background:#fff;

    color:
        var(--primary);

    font-size:12px;

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

}


.quote-close:hover{

    background:
        var(--primary);

    color:#fff;

    transform:
        rotate(90deg);

}


/* =========================================================
   MODAL LEFT
========================================================= */

.quote-modal-side{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-dark)
        );

    color:#fff;

}


.quote-modal-side::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.12;

    background:
        linear-gradient(
            135deg,
            transparent 0 55%,
            var(--secondary) 55.1% 55.4%,
            transparent 55.5%
        ),

        linear-gradient(
            35deg,
            transparent 0 70%,
            #fff 70.1% 70.3%,
            transparent 70.4%
        );

}


.quote-side-inner{

    position:relative;

    z-index:2;

    height:100%;

    padding:
        48px 35px 35px;

}


.quote-side-kicker{

    color:
        var(--secondary);

    font-size:9px;

    font-weight:900;

    letter-spacing:2px;

}


.quote-side-inner h2{

    margin:
        16px 0;

    color:#fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:43px;

    line-height:.87;

    font-weight:800;

    text-transform:uppercase;

}


.quote-side-inner h2 span{

    color:
        var(--secondary);

}


.quote-side-inner p{

    max-width:270px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    line-height:1.85;

}


.quote-side-line{

    width:42px;

    height:2px;

    margin:
        23px 0;

    background:
        var(--secondary);

}


.quote-side-points{

    display:flex;

    flex-direction:column;

    gap:11px;

}


.quote-side-points div{

    display:flex;

    align-items:center;

    gap:8px;

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

    font-size:9px;

    font-weight:700;

}


.quote-side-points i{

    color:
        var(--secondary);

}


.quote-side-number{

    position:absolute;

    left:35px;
    bottom:25px;

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

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:34px;

    font-weight:800;

}


.quote-side-number span{

    display:block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:6px;

    letter-spacing:1.7px;

}


/* =========================================================
   FORM
========================================================= */

.quote-form-area{

    padding:
        45px 42px 38px;

}


.quote-form-heading{

    margin-bottom:22px;

}


.quote-form-heading small{

    color:
        var(--secondary-dark);

    font-size:8px;

    font-weight:900;

    letter-spacing:1.6px;

}


.quote-form-heading h3{

    margin:
        5px 0 3px;

    color:
        var(--primary-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:31px;

    line-height:1;

    font-weight:800;

}


.quote-form-heading p{

    margin:0;

    color:#777;

    font-size:10px;

}


/* LABEL */

.quote-form-area label{

    display:block;

    margin-bottom:6px;

    color:
        #4a4447;

    font-size:8px;

    font-weight:900;

    letter-spacing:1px;

}


.quote-form-area label span{

    color:
        var(--primary);

}


/* INPUT */

.quote-input{

    position:relative;

}


.quote-input > i:first-child{

    position:absolute;

    left:13px;
    top:50%;

    z-index:2;

    transform:
        translateY(-50%);

    color:
        var(--primary);

    font-size:14px;

}


.quote-input input,
.quote-input select,
.quote-input textarea{

    width:100%;

    border:
        1px solid
        #e5dfdc;

    border-radius:4px;

    background:
        #fbfaf9;

    color:
        #252326;

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.quote-input input,
.quote-input select{

    height:43px;

    padding:
        0 13px 0 38px;

}


.quote-input textarea{

    min-height:100px;

    resize:vertical;

    padding:
        12px
        13px
        12px
        38px;

}


.quote-input select{

    appearance:none;

    cursor:pointer;

}


.quote-input .select-arrow{

    position:absolute;

    right:13px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--primary);

    font-size:10px;

    pointer-events:none;

}


.quote-input input:focus,
.quote-input select:focus,
.quote-input textarea:focus{

    border-color:
        rgba(104,6,36,.55);

    background:#fff;

    box-shadow:
        0 0 0 3px
        rgba(104,6,36,.06);

}


/* =========================================================
   SUBMIT
========================================================= */

.quote-submit-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:3px;

}


.quote-submit-row small{

    max-width:230px;

    color:#777;

    font-size:7px;

    line-height:1.5;

}


.quote-submit-row small i{

    color:
        var(--primary);

    margin-right:3px;

}


.quote-submit{

    display:inline-flex;

    align-items:center;

    gap:9px;

    border:0;

    border-radius:3px;

    padding:
        13px
        18px;

    background:
        var(--primary);

    color:#fff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:900;

    letter-spacing:1px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.quote-submit i{

    color:
        var(--secondary);

}


.quote-submit:hover{

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

}


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

@media(max-width:1199px){

    .header-inner{

        gap:15px;

    }


    .brand-area{

        min-width:300px;

        gap:11px;

    }


    .brand-logo-box{

        width:75px;
        height:75px;

        flex-basis:75px;

    }


    .brand-logo{

        width:64px;
        height:64px;

    }


    .brand-title{

        font-size:33px;

    }


    .brand-title span{

        font-size:7px;

        letter-spacing:1.5px;

    }


    .main-nav-list .nav-link{

        padding-left:8px;
        padding-right:8px;

        font-size:8px;

    }


    .main-nav-list .nav-link::after{

        left:8px;
        right:8px;

    }


    .quote-btn{

        padding:
            11px
            12px;

        font-size:8px;

    }

}


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

@media(max-width:991px){

    .utility-inner{

        min-height:38px;

    }


    .utility-contact{

        width:100%;

        padding:
            8px
            18px;

        gap:20px;

    }


    .utility-quality{

        display:none;

    }


    .utility-contact::after{

        display:none;

    }


    .header-inner{

        min-height:82px;

    }


    .brand-area{

        min-width:0;

        gap:10px;

    }


    .brand-logo-box{

        width:62px;
        height:62px;

        flex-basis:62px;

        border-radius:
            7px 2px 7px 2px;

    }


    .brand-logo{

        width:53px;
        height:53px;

    }


    .brand-title{

        font-size:29px;

    }


    .brand-title span{

        font-size:6.5px;

        letter-spacing:1.15px;

        margin-top:7px;

    }


    .brand-title small{

        display:none;

    }


    .mobile-menu-btn{

        display:flex;

        flex:0 0 46px;

    }


    .main-navigation{

        position:absolute;

        left:0;
        right:0;

        top:100%;

        display:none;

        padding:
            0 15px 18px;

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

        border-top:
            1px solid
            #eee7e4;

        box-shadow:
            0 18px 35px
            rgba(61,3,22,.12);

    }


    .main-navigation.menu-open{

        display:block;

    }


    .main-nav-list{

        display:block;

        padding-top:8px;

    }


    .main-nav-list .nav-link{

        min-height:0;

        width:100%;

        justify-content:space-between;

        padding:
            14px
            12px;

        font-size:10px;

        border-bottom:
            1px solid
            #eee8e5;

    }


    .main-nav-list .nav-link::after{

        left:auto;
        right:12px;

        bottom:8px;

        width:25px;

        transform:
            scaleX(0);

    }


    .main-nav-list .nav-link:hover::after,
    .main-nav-list .nav-link.active::after{

        transform:
            scaleX(1);

    }


    .quote-item{

        margin:
            14px 0 0;

    }


    .quote-btn{

        width:100%;

        justify-content:center;

        padding:13px;

    }


    .yasko-dropdown,
    .quality-dropdown{

        position:static !important;

        width:100%;

        margin:0;

        border:
            1px solid
            #eee4e1;

        border-top:
            2px solid
            var(--secondary);

        border-radius:4px;

        box-shadow:
            none;

        background:
            #fcfaf9;

    }


    .yasko-dropdown .dropdown-item,
    .quality-dropdown .dropdown-item{

        padding:
            9px;

    }


    .dropdown-heading{

        padding:
            9px 10px;

    }


    .dropdown-heading span{

        font-size:14px;

    }


    .dropdown-heading small{

        font-size:6px;

    }


    .quote-modal-side{

        min-height:260px;

    }


    .quote-side-inner{

        padding:
            38px 30px 30px;

    }


    .quote-side-number{

        display:none;

    }


    .quote-side-inner h2{

        font-size:37px;

    }

}


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

@media(max-width:575px){

    .utility-contact{

        justify-content:center;

        gap:16px;

        padding:
            8px
            12px;

    }


    .utility-contact a{

        font-size:8px;

    }


    .utility-contact a span{

        white-space:nowrap;

    }


    .utility-contact i{

        font-size:10px;

    }


    .header-inner{

        min-height:74px;

    }


    .brand-logo-box{

        width:54px;
        height:54px;

        flex-basis:54px;

    }


    .brand-logo{

        width:46px;
        height:46px;

    }


    .brand-title{

        font-size:24px;

    }


    .brand-title span{

        font-size:5.5px;

        letter-spacing:.9px;

    }


    .mobile-menu-btn{

        width:42px;
        height:38px;

        flex-basis:42px;

    }


    .mobile-menu-btn span{

        width:19px;

    }


    .main-navigation{

        padding:
            0 10px 14px;

    }


    .main-nav-list .nav-link{

        padding:
            13px 10px;

        font-size:9px;

    }


    .yasko-dropdown .dropdown-item{

        gap:8px;

    }


    .dropdown-icon{

        width:31px;
        height:31px;

        flex-basis:31px;

        font-size:13px;

    }


    .dropdown-text strong{

        font-size:12px;

    }


    .dropdown-text small{

        font-size:6px;

    }


    /* MODAL */

    .quote-modal{

        margin:
            10px;

        border-radius:7px;

    }


    .quote-modal-side{

        min-height:215px;

    }


    .quote-side-inner{

        padding:
            35px
            24px
            25px;

    }


    .quote-side-inner h2{

        margin:
            10px 0;

        font-size:34px;

    }


    .quote-side-inner p{

        max-width:none;

        font-size:9px;

        line-height:1.7;

    }


    .quote-side-line{

        margin:
            15px 0;

    }


    .quote-side-points{

        display:none;

    }


    .quote-form-area{

        padding:
            30px
            20px
            25px;

    }


    .quote-form-heading h3{

        font-size:27px;

    }


    .quote-submit-row{

        display:flex;

        flex-direction:column;

        align-items:stretch;

    }


    .quote-submit-row small{

        max-width:none;

        order:2;

        margin-top:5px;

    }


    .quote-submit{

        width:100%;

        justify-content:center;

        order:1;

    }


    .quote-close{

        right:10px;
        top:10px;

        width:31px;
        height:31px;

    }

}


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

@media(max-width:380px){

    .utility-contact{

        gap:10px;

    }


    .utility-contact a{

        font-size:7px;

    }


    .brand-title{

        font-size:21px;

    }


    .brand-title span{

        font-size:5px;

        letter-spacing:.7px;

    }


    .brand-logo-box{

        width:50px;
        height:50px;

        flex-basis:50px;

    }


    .brand-logo{

        width:42px;
        height:42px;

    }

}


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

.hero{
    min-height:570px;

    background:var(--primary-dark);

    position:relative;

    overflow:hidden;

    color:#fff;
}

.hero:before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(212,175,55,.12),
            transparent 28%
        ),

        linear-gradient(
            90deg,
            rgba(61,3,22,.98) 0%,
            rgba(104,6,36,.92) 48%,
            rgba(104,6,36,.28) 100%
        );
}

.hero:after{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    opacity:.7;
}


/* HERO GRID */

.hero-grid{
    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    opacity:.7;
}


/* HERO WAVES */

.hero-wave-one,
.hero-wave-two,
.hero-wave-three{
    position:absolute;

    z-index:2;

    width:900px;
    height:170px;

    border-radius:50%;

    border-top:2px solid rgba(212,175,55,.38);

    border-bottom:1px solid rgba(212,175,55,.08);

    pointer-events:none;
}

.hero-wave-one{
    left:20%;
    bottom:15px;

    transform:
        rotate(-8deg)
        skewX(-15deg);

    animation:
        heroWave1 9s ease-in-out infinite alternate;
}

.hero-wave-two{
    left:35%;
    bottom:50px;

    width:1050px;

    opacity:.5;

    transform:
        rotate(-8deg)
        skewX(-15deg);

    animation:
        heroWave2 12s ease-in-out infinite alternate;
}

.hero-wave-three{
    right:-240px;
    bottom:90px;

    width:850px;

    opacity:.25;

    transform:
        rotate(-8deg)
        skewX(-15deg);

    animation:
        heroWave3 15s ease-in-out infinite alternate;
}


/* HERO INNER */

.hero-inner{
    position:relative;

    z-index:5;

    padding:58px 0;
}

.hero-copy{
    padding-right:35px;
}


/* KICKER */

.kicker{
    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--secondary);

    font-weight:900;

    display:flex;

    align-items:center;

    gap:10px;
}

.kicker:before{
    content:"";

    width:40px;
    height:2px;

    background:var(--secondary);
}


/* HERO HEADING */

.hero h1{
    font-size:clamp(
        44px,
        5vw,
        68px
    );

    line-height:.94;

    text-transform:uppercase;

    margin:16px 0 20px;

    letter-spacing:.2px;
}

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


/* HERO TEXT */

.hero-copy p{
    font-size:13px;

    line-height:1.7;

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

    max-width:560px;
}


/* TYPING */

.typing-copy{
    min-height:46px;

    max-width:540px;

    margin-bottom:0;
}

.typing-cursor{
    color:var(--secondary);

    font-weight:900;

    animation:
        blinkCursor .7s infinite;
}

@keyframes blinkCursor{

    0%,
    50%{
        opacity:1;
    }

    51%,
    100%{
        opacity:0;
    }

}


/* HERO BUTTONS */

.hero-buttons{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:28px;
}

.btn-secondary-brand{
    background:var(--secondary);

    color:#251b00;

    border:0;

    border-radius:2px;

    padding:14px 22px;

    font-size:12px;

    font-weight:900;

    transition:.25s;
}

.btn-secondary-brand:hover{
    background:#e1bd43;
    color:#251b00;
    transform:translateY(-2px);
}

.btn-outline-brand{
    border:1px solid rgba(255,255,255,.45);

    color:#fff;

    border-radius:2px;

    padding:14px 22px;

    font-size:12px;

    font-weight:900;

    transition:.25s;
}

.btn-outline-brand:hover{
    border-color:var(--secondary);
    color:var(--secondary);
}


/* HERO FACTS */

.hero-facts{
    display:flex;

    gap:28px;

    margin-top:45px;

    padding-top:23px;

    border-top:1px solid rgba(255,255,255,.16);
}

.hero-facts strong{
    display:block;

    font-family:"Barlow Condensed";

    font-size:32px;

    color:var(--secondary);
}

.hero-facts small{
    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    color:rgba(255,255,255,.58);
}


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

.hero-slider{
    position:relative;

    height:430px;
}

.product-stage{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

.product-stage.active{
    opacity:1;
    visibility:visible;
}


/* PRODUCT FRAME */

.product-frame{
    width:min(100%,590px);

    height:350px;

    position:relative;

    padding:5px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.98),
            rgba(255,255,255,.12),
            rgba(212,175,55,.55)
        );

    box-shadow:
        0 0 0 1px rgba(212,175,55,.3),
        0 0 24px rgba(212,175,55,.20);

    animation:
        goldPulse 2.8s ease-in-out infinite;

    border-radius:3px;
}

.product-frame-inner{
    height:100%;

    background:#17040c;

    position:relative;

    overflow:hidden;

    border-radius:1px;
}

.product-frame-inner img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transform:scale(1.02);

    transition:
        transform 7s
        cubic-bezier(.2,.7,.2,1);
}

.product-stage.active
.product-frame-inner img{
    transform:
        scale(1.09)
        translate(-1%,-1%);
}


/* GOLD GLOW */

.product-frame-glow{
    position:absolute;

    inset:-2px;

    border:1px solid rgba(212,175,55,.55);

    border-radius:4px;

    pointer-events:none;

    z-index:5;

    animation:
        goldEdge 2.8s
        ease-in-out infinite;
}

@keyframes goldEdge{

    0%,
    100%{
        opacity:.55;

        box-shadow:
            0 0 12px
            rgba(212,175,55,.12);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 30px
            rgba(212,175,55,.32);
    }

}


/* SLIDER CAPTION */

.slider-caption{
    position:absolute;

    left:22px;
    right:22px;
    bottom:22px;

    padding:17px 20px;

    background:
        rgba(25,3,12,.87);

    border-left:
        4px solid var(--secondary);

    backdrop-filter:blur(7px);
}

.slider-caption small{
    font-size:12px;

    letter-spacing:2px;

    color:var(--secondary);

    font-weight:900;

    text-transform:uppercase;
}

.slider-caption h3{
    font-size:28px;

    text-transform:uppercase;

    margin:4px 0 2px;
	color: #A98218;
}

.slider-caption p{
    font-size:14px;


    margin:0;
	color: white
}


/* SLIDER COUNT */

.slider-count{
    position:absolute;

    right:0;
    top:30px;

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

    font-family:"Barlow Condensed";

    font-size:19px;

    letter-spacing:1px;

    z-index:20;
}


/* DOTS */

.slider-dots{
    position:absolute;

    right:0;
    bottom:10px;

    display:flex;

    gap:8px;

    z-index:20;
}

.slider-dots button{
    width:28px;
    height:4px;

    border:0;

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

    padding:0;

    transition:.3s;
}

.slider-dots button.active{
    background:var(--secondary);

    width:48px;
}


/* SLIDER ARROWS */

.slider-arrow{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:40px;
    height:40px;

    border:1px solid
        rgba(255,255,255,.3);

    background:
        rgba(25,3,12,.7);

    color:#fff;

    display:grid;

    place-items:center;

    z-index:30;

    transition:.25s;
}

.slider-arrow:hover{
    background:var(--secondary);

    color:var(--primary-dark);

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

.slider-prev{
    left:-20px;
}

.slider-next{
    right:-20px;
}


/* =========================================================
   GOLD STRIP
========================================================= */

.gold-strip{
    background:var(--secondary);

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

.gold-strip .item{
    padding:21px 20px;

    border-right:
        1px solid rgba(104,6,36,.15);

    min-height:88px;

    display:flex;

    align-items:center;

    gap:13px;
}

.gold-strip i{
    font-size:25px;

    color:var(--primary);
}

.gold-strip strong{
    display:block;

    font-size:12px;

    font-weight:900;
}

.gold-strip small{
    font-size:10px;

    color:#5d4b0b;
}


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

.section{
    padding:88px 0;
}

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

.section-kicker{
    font-size:11px;

    letter-spacing:2.5px;

    color:var(--primary);

    font-weight:900;

    text-transform:uppercase;
}

.experience-intro{
    max-width:1380px;
    margin:0;
    font-size:13px;
    line-height:1.85;
    color:#555056;
}

.section-title{
    position:relative;

    display:inline-block;

    padding-bottom:17px;

    margin:
        11px 0 24px;

    font-size:57px;

    text-transform:uppercase;

    line-height:.87;
}

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


/* ANIMATED UNDERLINE */

.section-title:after{
    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:58px;

    height:3px;

    background:var(--primary);

    transform-origin:left;

    animation:
        headingLine
        2.6s
        ease-in-out
        infinite;
}

.section-title:before{
    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:105px;

    height:1px;

    background:
        rgba(104,6,36,.16);
}

@keyframes headingLine{

    0%,
    100%{
        transform:scaleX(.45);
        opacity:.65;
    }

    50%{
        transform:scaleX(1);
        opacity:1;
    }

}


/* SECTION COPY */

.section-copy{
    color: black;

    line-height:1.9;

    font-size:15px;
	text-ailgn: justify;
}

.section-head{
    margin-bottom:48px;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-photo{
    height:535px;

    min-height:500px;

    position:relative;

    overflow:hidden;

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

.profile-photo .photo-bg{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(104,6,36,.25),
            rgba(61,3,22,.9)
        ),

        repeating-linear-gradient(
            112deg,
            transparent 0 45px,
            rgba(212,175,55,.15) 46px 53px
        );

    transform:scale(1.02);

    animation:
        slowMove
        9s
        ease-in-out
        infinite
        alternate;
}

.profile-photo:after{
    content:"";

    position:absolute;

    inset:28px;

    border:
        1px solid
        rgba(212,175,55,.38);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 90%,
            90% 100%,
            0 100%
        );
}

.profile-badge{
    position:absolute;

    z-index:2;

    left:28px;
    bottom:28px;

    background:#fff;

    padding:23px 27px;

    min-width:210px;

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

.profile-badge strong{
    font-family:"Barlow Condensed";

    font-size:55px;

    color:var(--primary);

    line-height:.8;
}

.profile-badge span{
    display:block;

    margin-top:9px;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1.4px;

    font-weight:800;

    color:#6a6367;
}


/* PROFILE POINTS */

.profile-points{
    list-style:none;

    padding:0;

    margin:30px 0;
	
	color: black;
}

.profile-points li{
    display:flex;

    gap:12px;

    margin:15px 0;

    font-size:14px;

    color:#252326;

    line-height:1.6;
}

.profile-points i{
    color:var(--secondary-dark);

    font-size:18px;

    flex:0 0 auto;
}


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

.product-grid-card{
    height:100%;

    background:#fff;

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

    position:relative;

    overflow:hidden;

    transition:.4s;
}

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

    box-shadow:
        0 25px 60px
        rgba(61,3,22,.13);

    border-color:
        rgba(104,6,36,.3);
}

.product-grid-image{
    height:245px;

    background:var(--primary-dark);

    overflow:hidden;

    position:relative;
}

.product-grid-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.8s;
}

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

.product-tag{
    position:absolute;

    top:16px;
    left:16px;

    background:var(--secondary);

    color:var(--primary-dark);

    font-size:9px;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

    padding:7px 10px;
}

.product-grid-body{
    padding:23px;
}

.product-grid-body h3{
    font-size:30px;

    color:var(--primary);

    text-transform:uppercase;

    margin:0 0 8px;
}

.product-grid-body p{
    font-size:14px;

    color:black;

    line-height:1.8;

    margin:0 0 18px;
	text-align: justify;
}

.product-link{
    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-weight:900;

    color:var(--primary);
}

.product-link i{
    color:var(--secondary-dark);
}


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

.marquee{
    overflow:hidden;

    background:var(--primary-dark);

    white-space:nowrap;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.marquee-track{
    display:inline-flex;

    animation:
        marquee
        25s
        linear
        infinite;
}

.marquee span{
    font-family:"Barlow Condensed";

    font-size:28px;

    text-transform:uppercase;

    color:#fff;

    padding:17px 28px;
}

.marquee span b{
    color:var(--secondary);

    font-size:17px;

    margin-left:25px;
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}
/* =========================================================
   APPLICATIONS
   PREMIUM CINEMATIC IMAGE CARDS
========================================================= */

.application-card{
    min-height:300px;
    height:300px;

    position:relative;
    overflow:hidden;

    padding:0;

    display:flex;
    align-items:flex-end;

    color:#fff;

    background:#111;

    isolation:isolate;

    border:1px solid rgba(255,255,255,.10);

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

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .55s ease,
        border-color .55s ease;
}


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

.application-card img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:0;

    transform:
        scale(1.04)
        translate3d(0,0,0);

    filter:
        brightness(.82)
        saturate(.92);

    transition:
        transform 1.2s cubic-bezier(.16,1,.3,1),
        filter 1s ease;
}


/* =========================================================
   CINEMATIC DARK OVERLAY
========================================================= */

.application-card:before{
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(20,2,10,.96) 0%,
            rgba(35,4,16,.82) 25%,
            rgba(30,3,13,.42) 52%,
            rgba(0,0,0,.08) 100%
        );

    opacity:.94;

    transition:
        opacity .7s ease;
}


/* =========================================================
   PREMIUM COLOR GLOW
========================================================= */

.application-card:after{
    content:"";

    position:absolute;

    inset:-35%;

    z-index:1;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(212,175,55,.22),
            transparent 28%
        );

    opacity:.35;

    transform:
        translate3d(25px,-20px,0);

    transition:
        opacity .8s ease,
        transform 1s ease;

    pointer-events:none;
}


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

.application-content{
    position:relative;

    z-index:3;

    width:100%;

    padding:28px;

    transform:
        translateY(8px);

    transition:
        transform .65s
        cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   ICON
========================================================= */

.application-content i{
    display:inline-flex;

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

    width:46px;
    height:46px;

    font-size:22px;

    color:var(--secondary);

    border:
        1px solid
        rgba(212,175,55,.45);

    background:
        rgba(61,3,22,.55);

    backdrop-filter:blur(5px);

    margin-bottom:14px;

    transition:
        transform .55s ease,
        background .45s ease,
        color .45s ease,
        border-color .45s ease;
}


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

.application-content h3{
    font-size:31px;

    line-height:.95;

    text-transform:uppercase;

    margin:0 0 8px;

    color:#fff;

    letter-spacing:.3px;

    text-shadow:
        0 3px 15px rgba(0,0,0,.45);

    transition:
        transform .55s ease,
        color .4s ease;
}


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

.application-content p{
    font-size:11px;

    line-height:1.8;

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

    max-width:270px;

    margin:0;

    opacity:.9;

    transform:
        translateY(5px);

    transition:
        opacity .5s ease,
        transform .55s ease;
}


/* =========================================================
   GOLD CORNER
========================================================= */

.application-card .application-content:before{
    content:"";

    position:absolute;

    left:28px;

    top:-10px;

    width:42px;

    height:2px;

    background:var(--secondary);

    transform-origin:left;

    transform:scaleX(.55);

    transition:
        transform .55s
        cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   HOVER - CARD
========================================================= */

.application-card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(212,175,55,.55);

    box-shadow:
        0 25px 55px
        rgba(61,3,22,.22),
        0 0 0 1px
        rgba(212,175,55,.08);
}


/* =========================================================
   HOVER - IMAGE
========================================================= */

.application-card:hover img{

    transform:
        scale(1.12)
        translate3d(-1%, -1%, 0);

    filter:
        brightness(.72)
        saturate(1.08);
}


/* =========================================================
   HOVER - OVERLAY
========================================================= */

.application-card:hover:before{
    opacity:.98;

    background:
        linear-gradient(
            to top,
            rgba(20,2,10,.98) 0%,
            rgba(61,3,22,.76) 35%,
            rgba(61,3,22,.20) 72%,
            rgba(0,0,0,.02) 100%
        );
}


/* =========================================================
   HOVER - GOLD GLOW
========================================================= */

.application-card:hover:after{

    opacity:.75;

    transform:
        translate3d(-10px,10px,0)
        scale(1.05);
}


/* =========================================================
   HOVER - CONTENT
========================================================= */

.application-card:hover
.application-content{
    transform:
        translateY(0);
}


/* =========================================================
   HOVER - ICON
========================================================= */

.application-card:hover
.application-content i{

    transform:
        translateY(-4px)
        scale(1.05);

    background:
        var(--secondary);

    color:
        var(--primary-dark);

    border-color:
        var(--secondary);

    box-shadow:
        0 8px 25px
        rgba(212,175,55,.22);
}


/* =========================================================
   HOVER - HEADING
========================================================= */

.application-card:hover
.application-content h3{

    color:
        #fff;

    transform:
        translateX(3px);
}


/* =========================================================
   HOVER - DESCRIPTION
========================================================= */

.application-card:hover
.application-content p{

    opacity:1;

    transform:
        translateY(0);
}


/* =========================================================
   HOVER - GOLD LINE
========================================================= */

.application-card:hover
.application-content:before{

    transform:
        scaleX(1);
}


/* =========================================================
   ANIMATED LIGHT SWEEP
========================================================= */

.application-card .application-overlay{
    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transform:
        skewX(-18deg);

    pointer-events:none;
}


/* Sweep on hover */

.application-card:hover
.application-overlay{

    animation:
        applicationSweep
        1.2s
        ease;
}


@keyframes applicationSweep{

    0%{
        left:-120%;
    }

    100%{
        left:150%;
    }

}


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

@media(max-width:991px){

    .application-card{
        height:300px;
        min-height:300px;
    }

    .application-content{
        padding:25px;
    }

    .application-content h3{
        font-size:29px;
    }

}


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

@media(max-width:575px){

    .application-card{
        width:100%;

        height:280px;
        min-height:280px;
    }

    .application-content{
        padding:22px;
    }

    .application-content i{
        width:42px;
        height:42px;

        font-size:20px;

        margin-bottom:12px;
    }

    .application-content h3{
        font-size:28px;

        margin-bottom:7px;
    }

    .application-content p{
        font-size:11px;

        line-height:1.7;

        max-width:100%;
    }

    .application-card .application-content:before{
        left:22px;
    }

}


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

@media(max-width:380px){

    .application-card{
        height:265px;
        min-height:265px;
    }

    .application-content{
        padding:19px;
    }

    .application-content h3{
        font-size:25px;
    }

    .application-content p{
        font-size:10px;
    }

}


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

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

    .application-card,
    .application-card img,
    .application-content,
    .application-content i,
    .application-content h3,
    .application-content p,
    .application-card:before,
    .application-card:after{
        transition:none !important;
        animation:none !important;
    }

}
/* =========================================================
   YASKO ENGINEERING EXPERTISE
========================================================= */

.yasko-expertise-section{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #fbf9f5 0%,
            #ffffff 55%,
            #f7f3ee 100%
        );

}


/* =========================================================
   TECHNICAL BACKGROUND GRID
========================================================= */

.expertise-tech-grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.42;

    background-image:

        linear-gradient(
            rgba(104,6,36,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(104,6,36,.045) 1px,
            transparent 1px
        );

    background-size:
        55px 55px,
        55px 55px;

}


/* =========================================================
   DECORATIVE LINES
========================================================= */

.expertise-line{

    position:absolute;

    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.35),
            transparent
        );

}


.expertise-line-one{

    width:500px;

    top:130px;

    right:-130px;

    transform:
        rotate(-25deg);

}


.expertise-line-two{

    width:430px;

    bottom:100px;

    left:-160px;

    transform:
        rotate(24deg);

}


/* =========================================================
   INTRO TEXT
========================================================= */

.experience-intro{

    max-width:820px;

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

    text-align:center;

}


.experience-intro strong{

    color:
        var(--primary);

    font-weight:800;

}


/* =========================================================
   DASHBOARD
========================================================= */

.expertise-dashboard{

    position:relative;

    display:grid;

    grid-template-columns:
        190px
        minmax(500px,1fr)
        240px;

    gap:25px;

    align-items:stretch;

    margin-top:50px;

    min-height:530px;

}


/* =========================================================
   EXPERIENCE PANEL
========================================================= */

.expertise-experience{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:28px 22px;

    background:
        var(--primary);

    color:#fff;

    overflow:hidden;

    border:
        1px solid
        rgba(104,6,36,.7);

    box-shadow:
        0 18px 40px
        rgba(61,3,22,.14);

}


/* GOLD EDGE */

.expertise-experience::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    background:
        linear-gradient(
            to bottom,
            var(--secondary),
            #f1d978,
            var(--secondary)
        );

}


/* TECHNICAL CORNER */

.expertise-experience::after{

    content:"";

    position:absolute;

    width:160px;
    height:160px;

    right:-90px;
    bottom:-90px;

    border:
        35px solid
        rgba(212,175,55,.10);

    transform:
        rotate(45deg);

}


.experience-number{

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:82px;

    line-height:.75;

    font-weight:800;

    color:#fff;

}


.experience-number span{

    color:
        var(--secondary);

    font-size:42px;

}


.experience-label{

    margin-top:15px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    line-height:1.45;

    font-weight:900;

    letter-spacing:2px;

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

}


.experience-divider{

    width:40px;

    height:2px;

    margin:23px 0 18px;

    background:
        var(--secondary);

}


.expertise-experience p{

    margin:0;

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

    font-size:10px;

    line-height:1.8;

}


.experience-status{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:25px;

    font-size:7px;

    letter-spacing:1.4px;

    font-weight:800;

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

}


.status-dot{

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--secondary);

    box-shadow:
        0 0 10px
        rgba(212,175,55,.8);

    animation:
        statusPulse 2s ease-in-out infinite;

}


@keyframes statusPulse{

    0%,100%{
        opacity:.45;
        transform:scale(.85);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }

}


/* =========================================================
   GRAPH AREA
========================================================= */

.expertise-graph{

    position:relative;

    min-height:530px;

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

    border:
        1px solid
        rgba(104,6,36,.12);

    box-shadow:
        0 15px 40px
        rgba(61,3,22,.07);

    overflow:hidden;

}


/* TECHNICAL INNER BORDER */

.expertise-graph::before{

    content:"";

    position:absolute;

    inset:14px;

    border:
        1px solid
        rgba(212,175,55,.18);

    pointer-events:none;

}


/* =========================================================
   SVG CONNECTIONS
========================================================= */

.expertise-connections{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}


.expertise-connections line{

    stroke:
        rgba(104,6,36,.20);

    stroke-width:1;

    stroke-dasharray:5 6;

    animation:
        connectionFlow 5s linear infinite;

}


@keyframes connectionFlow{

    to{
        stroke-dashoffset:-80;
    }

}


/* =========================================================
   CENTRAL CORE
========================================================= */

.expertise-core{

    position:absolute;

    left:50%;
    top:50%;

    width:185px;
    height:185px;

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

    display:grid;

    place-items:center;

    z-index:5;

}


.core-ring{

    position:absolute;

    inset:0;

    border:
        1px solid
        rgba(212,175,55,.7);

    border-radius:50%;

    animation:
        coreRotate 16s linear infinite;

}


.core-ring::before{

    content:"";

    position:absolute;

    inset:12px;

    border:
        1px dashed
        rgba(104,6,36,.25);

    border-radius:50%;

}


.core-ring::after{

    content:"";

    position:absolute;

    top:-4px;
    left:50%;

    width:8px;
    height:8px;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:
        var(--secondary);

    box-shadow:
        0 0 12px
        rgba(212,175,55,.8);

}


@keyframes coreRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


.core-inner{

    width:145px;
    height:145px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-dark)
        );

    color:#fff;

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

}


.core-inner span{

    color:
        var(--secondary);

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:900;

    letter-spacing:3px;

}


.core-inner strong{

    margin-top:7px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:23px;

    line-height:.92;

    font-weight:800;

}


.core-inner small{

    margin-top:10px;

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

    font-size:6px;

    letter-spacing:1.2px;

}


/* =========================================================
   EXPERTISE NODES
========================================================= */

.expertise-node{

    position:absolute;

    z-index:6;

    display:flex;

    align-items:center;

    gap:9px;

    width:175px;

    padding:9px 11px;

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

    border:
        1px solid
        rgba(104,6,36,.12);

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

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}


.expertise-node:hover{

    border-color:
        rgba(212,175,55,.65);

    box-shadow:
        0 14px 28px
        rgba(61,3,22,.14);

}


.node-icon{

    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;

    place-items:center;

    color:
        var(--secondary);

    background:
        var(--primary);

    font-size:16px;

}


.node-content{

    display:flex;

    flex-direction:column;

    min-width:0;

}


.node-content small{

    color:
        var(--secondary-dark);

    font-size:7px;

    font-weight:900;

    letter-spacing:1px;

}


.node-content strong{

    color:
        var(--primary-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:15px;

    line-height:1.05;

    font-weight:800;

    text-transform:uppercase;

}


.node-content span{

    margin-top:3px;

    color:#777;

    font-size:7px;

    line-height:1.3;

}


/* =========================================================
   NODE POSITIONS
========================================================= */

.node-one{

    left:7%;

    top:13%;

}


.node-two{

    left:50%;

    top:4%;

    transform:
        translateX(-50%);

}


.node-three{

    right:7%;

    top:13%;

}


.node-four{

    left:7%;

    bottom:13%;

}


.node-five{

    left:50%;

    bottom:4%;

    transform:
        translateX(-50%);

}


.node-six{

    right:7%;

    bottom:13%;

}


.node-two:hover,
.node-five:hover{

    transform:
        translateX(-50%)
        translateY(-4px);

}


.node-one:hover,
.node-three:hover,
.node-four:hover,
.node-six:hover{

    transform:
        translateY(-4px);

}

/* =========================================================
   YASKO ENGINEERING EXPERTISE
========================================================= */

.yasko-expertise-section{

    --expertise-primary:#680624;
    --expertise-primary-dark:#3d0316;
    --expertise-primary-soft:#8b183d;

    --expertise-gold:#D4AF37;
    --expertise-gold-dark:#A98218;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #fbf9f5 0%,
            #ffffff 52%,
            #f7f3ee 100%
        );

}


/* =========================================================
   TECHNICAL BACKGROUND GRID
========================================================= */

.expertise-tech-grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.55;

    background-image:

        linear-gradient(
            rgba(104,6,36,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(104,6,36,.035) 1px,
            transparent 1px
        );

    background-size:
        55px 55px,
        55px 55px;

}


/* =========================================================
   DECORATIVE ENGINEERING LINES
========================================================= */

.expertise-line{

    position:absolute;

    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.40),
            transparent
        );

}


.expertise-line-one{

    width:520px;

    right:-130px;

    top:155px;

    transform:
        rotate(-25deg);

}


.expertise-line-two{

    width:470px;

    left:-180px;

    bottom:115px;

    transform:
        rotate(25deg);

}


/* =========================================================
   TOP INTRO
========================================================= */

.experience-intro{

    max-width:930px;

    margin-left:0 !important;
    margin-right:auto !important;

    text-align:left !important;

    color:#000000 !important;

    font-size:13px;

    line-height:1.9;

}


.experience-intro strong{

    color:
        var(--expertise-primary);

    font-weight:800;

}


/* =========================================================
   MAIN DASHBOARD
   30% EXPERIENCE / 70% GRAPH
========================================================= */

.expertise-dashboard{

    position:relative;

    display:grid;

    grid-template-columns:
        30%
        70%;

    gap:0;

    margin-top:48px;

    min-height:540px;

}


/* =========================================================
   EXPERIENCE PANEL
========================================================= */

.expertise-experience{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        45px
        42px;

    background:
        linear-gradient(
            145deg,
            var(--expertise-primary),
            var(--expertise-primary-dark)
        );

    color:#fff;

    overflow:hidden;

    border:
        1px solid
        rgba(104,6,36,.7);

    box-shadow:
        0 20px 45px
        rgba(61,3,22,.16);

    z-index:3;

}


/* GOLD EDGE */

.expertise-experience::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:
        linear-gradient(
            to bottom,
            var(--expertise-gold),
            #f4db76,
            var(--expertise-gold)
        );

}


/* TECHNICAL PATTERN */

.expertise-experience::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.14;

    background:

        linear-gradient(
            135deg,
            transparent 0 60%,
            var(--expertise-gold) 60.1% 60.4%,
            transparent 60.5%
        ),

        linear-gradient(
            45deg,
            transparent 0 75%,
            #fff 75.1% 75.3%,
            transparent 75.4%
        );

}


/* =========================================================
   EXPERIENCE TOP LABEL
========================================================= */

.experience-label-top{

    position:relative;

    z-index:2;

    color:
        var(--expertise-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:900;

    letter-spacing:2px;

    margin-bottom:20px;

}


/* =========================================================
   25+
========================================================= */

.experience-number{

    position:relative;

    z-index:2;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:118px;

    line-height:.72;

    font-weight:800;

    letter-spacing:-3px;

    color:#fff;

}


.experience-number span{

    color:
        var(--expertise-gold);

    font-size:58px;

    vertical-align:top;

    margin-left:2px;

}


/* =========================================================
   YEARS
========================================================= */

.experience-label{

    position:relative;

    z-index:2;

    margin-top:20px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:12px;

    line-height:1.45;

    font-weight:900;

    letter-spacing:3px;

}


/* =========================================================
   EXPERIENCE DIVIDER
========================================================= */

.experience-divider{

    position:relative;

    z-index:2;

    width:55px;

    height:3px;

    margin:
        25px
        0
        20px;

    background:
        var(--expertise-gold);

    box-shadow:
        0 0 12px
        rgba(212,175,55,.45);

}


/* =========================================================
   EXPERIENCE PARAGRAPH
========================================================= */

.expertise-experience p{

    position:relative;

    z-index:2;

    max-width:260px;

    margin:0;

    color:
        rgba(255,255,255,.76) !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size:11px;

    line-height:1.85;

}


/* =========================================================
   STATUS
========================================================= */

.experience-status{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:27px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    letter-spacing:1.5px;

    font-weight:900;

}


.status-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:
        var(--expertise-gold);

    box-shadow:
        0 0 12px
        rgba(212,175,55,.9);

    animation:
        statusPulse 2s ease-in-out infinite;

}


@keyframes statusPulse{

    0%,
    100%{
        opacity:.45;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }

}


/* =========================================================
   EXPERIENCE CORNER
========================================================= */

.experience-corner-line{

    position:absolute;

    right:28px;

    bottom:25px;

    width:65px;
    height:65px;

    border-right:
        1px solid
        rgba(212,175,55,.5);

    border-bottom:
        1px solid
        rgba(212,175,55,.5);

    z-index:2;

}


/* =========================================================
   GRAPH
========================================================= */

.expertise-graph{

    position:relative;

    min-height:540px;

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

    border:
        1px solid
        rgba(104,6,36,.13);

    box-shadow:
        0 20px 45px
        rgba(61,3,22,.08);

    overflow:hidden;

}


/* =========================================================
   GRAPH FRAME
========================================================= */

.graph-frame{

    position:absolute;

    inset:18px;

    border:
        1px solid
        rgba(212,175,55,.20);

    pointer-events:none;

}


.graph-frame::before{

    content:"";

    position:absolute;

    left:-1px;
    top:25px;

    width:3px;
    height:65px;

    background:
        var(--expertise-gold);

}


.graph-frame::after{

    content:"";

    position:absolute;

    right:-1px;
    bottom:25px;

    width:3px;
    height:65px;

    background:
        var(--expertise-primary);

}


/* =========================================================
   SVG CONNECTIONS
========================================================= */

.expertise-connections{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}


.expertise-connections line{

    stroke:
        rgba(104,6,36,.22);

    stroke-width:1.2;

    stroke-dasharray:
        6 7;

    animation:
        connectionFlow
        6s
        linear
        infinite;

}


@keyframes connectionFlow{

    to{
        stroke-dashoffset:-90;
    }

}


/* =========================================================
   CENTRAL CORE
========================================================= */

.expertise-core{

    position:absolute;

    left:50%;
    top:50%;

    width:205px;
    height:205px;

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

    display:grid;

    place-items:center;

    z-index:8;

}


/* OUTER RING */

.core-ring{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}


.core-ring-one{

    inset:0;

    border:
        1px solid
        rgba(212,175,55,.80);

    animation:
        coreRotate
        18s
        linear
        infinite;

}


.core-ring-two{

    inset:13px;

    border:
        1px dashed
        rgba(104,6,36,.30);

    animation:
        coreRotateReverse
        13s
        linear
        infinite;

}


.core-ring-one::before{

    content:"";

    position:absolute;

    top:-5px;
    left:50%;

    width:10px;
    height:10px;

    border-radius:50%;

    transform:
        translateX(-50%);

    background:
        var(--expertise-gold);

    box-shadow:
        0 0 15px
        rgba(212,175,55,.9);

}


.core-ring-two::after{

    content:"";

    position:absolute;

    right:-4px;
    top:50%;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--expertise-primary);

}


/* ROTATION */

@keyframes coreRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


@keyframes coreRotateReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}


/* =========================================================
   CORE INNER
========================================================= */

.core-inner{

    position:relative;

    width:158px;
    height:158px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
        #fff;

    border:
        8px solid
        var(--expertise-primary);

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

}


/* LOGO */

.core-logo{

    width:54px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:7px;

}


.core-logo img{

    max-width:74px;

    max-height:54px;

    width:auto;

    height:auto;

    object-fit:contain;

}


/* CORE TEXT */

.core-inner strong{

    color:
        var(--expertise-primary-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:20px;

    line-height:.9;

    font-weight:900;

}


.core-inner span{

    color:
        var(--expertise-gold-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:17px;

    line-height:1;

    font-weight:800;

}


.core-inner small{

    margin-top:8px;

    color:
        #555;

    font-family:
        "Manrope",
        sans-serif;

    font-size:5.5px;

    font-weight:800;

    letter-spacing:1.1px;

}


/* =========================================================
   EXPERTISE NODES
========================================================= */

.expertise-node{

    position:absolute;

    z-index:7;

    display:flex;

    align-items:center;

    gap:13px;

    width:205px;

    min-height:70px;

    padding:
        10px
        13px;

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

    border:
        1px solid
        rgba(104,6,36,.13);

    box-shadow:
        0 10px 25px
        rgba(61,3,22,.09);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .4s ease;

}


/* GOLD TOP LINE */

.expertise-node::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--expertise-primary),
            var(--expertise-gold)
        );

    transition:
        width .45s ease;

}


.expertise-node:hover{

    border-color:
        rgba(212,175,55,.65);

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

}


.expertise-node:hover::before{

    width:100%;

}


/* =========================================================
   NODE ICON
========================================================= */

.node-icon{

    width:50px;
    height:50px;

    flex:
        0 0 50px;

    display:grid;

    place-items:center;

    color:
        var(--expertise-gold);

    background:
        var(--expertise-primary);

    border-radius:
        4px;

    font-size:21px;

    box-shadow:
        0 7px 18px
        rgba(61,3,22,.16);

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;

}


.expertise-node:hover .node-icon{

    background:
        var(--expertise-gold);

    color:
        var(--expertise-primary-dark);

    transform:
        scale(1.08)
        rotate(-3deg);

}


/* =========================================================
   NODE CONTENT
========================================================= */

.node-content{

    display:flex;

    flex-direction:column;

    min-width:0;

}


.node-content small{

    color:
        var(--expertise-gold-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:900;

    letter-spacing:1.3px;

}


.node-content strong{

    color:
        var(--expertise-primary-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:17px;

    line-height:1.05;

    font-weight:800;

    text-transform:uppercase;

}


.node-content span{

    margin-top:4px;

    color:
        #666;

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    line-height:1.3;

}


/* =========================================================
   NODE POSITIONS
========================================================= */

.node-one{

    left:7%;

    top:12%;

}


.node-two{

    left:50%;

    top:3%;

    transform:
        translateX(-50%);

}


.node-three{

    right:7%;

    top:12%;

}


.node-four{

    left:7%;

    bottom:12%;

}


.node-five{

    left:50%;

    bottom:3%;

    transform:
        translateX(-50%);

}


.node-six{

    right:7%;

    bottom:12%;

}


/* HOVER */

.node-one:hover,
.node-three:hover,
.node-four:hover,
.node-six:hover{

    transform:
        translateY(-5px);

}


.node-two:hover,
.node-five:hover{

    transform:
        translateX(-50%)
        translateY(-5px);

}


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

@media(max-width:1100px){

    .expertise-node{

        width:180px;

    }


    .node-content strong{

        font-size:15px;

    }


    .node-icon{

        width:46px;
        height:46px;

        flex-basis:46px;

    }

}


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

@media(max-width:991px){

    .expertise-dashboard{

        grid-template-columns:
            30%
            70%;

        min-height:510px;

    }


    .expertise-experience{

        padding:
            35px
            25px;

    }


    .experience-number{

        font-size:88px;

    }


    .experience-number span{

        font-size:45px;

    }


    .expertise-graph{

        min-height:510px;

    }


    .expertise-node{

        width:155px;

        min-height:62px;

        padding:8px;

        gap:8px;

    }


    .node-icon{

        width:40px;
        height:40px;

        flex-basis:40px;

        font-size:17px;

    }


    .node-content strong{

        font-size:13px;

    }


    .node-content span{

        font-size:7px;

    }


    .expertise-core{

        width:175px;
        height:175px;

    }


    .core-inner{

        width:135px;
        height:135px;

    }

}


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

@media(max-width:767px){

    .experience-intro{

        font-size:12px;

        line-height:1.85;

    }


    .expertise-dashboard{

        display:block;

        margin-top:35px;

    }


    .expertise-experience{

        min-height:240px;

        margin-bottom:15px;

        padding:
            30px;

    }


    .experience-number{

        font-size:90px;

    }


    .experience-number span{

        font-size:45px;

    }


    .expertise-experience p{

        max-width:500px;

    }


    .expertise-graph{

        min-height:570px;

    }


    .expertise-node{

        width:145px;

        min-height:58px;

    }


    .node-icon{

        width:38px;
        height:38px;

        flex-basis:38px;

        font-size:16px;

    }


    .node-content strong{

        font-size:11px;

    }


    .node-content span{

        display:none;

    }


    .expertise-core{

        width:150px;
        height:150px;

    }


    .core-inner{

        width:116px;
        height:116px;

        border-width:6px;

    }


    .core-logo{

        width:45px;
        height:29px;

    }


    .core-logo img{

        max-width:45px;
        max-height:29px;

    }


    .core-inner strong{

        font-size:15px;

    }


    .core-inner span{

        font-size:13px;

    }


    .core-inner small{

        font-size:4.5px;

    }


    .node-one,
    .node-four{

        left:2%;

    }


    .node-three,
    .node-six{

        right:2%;

    }

}


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

@media(max-width:575px){

    .expertise-experience{

        padding:
            27px 23px;

    }


    .experience-number{

        font-size:78px;

    }


    .experience-number span{

        font-size:40px;

    }


    .experience-label{

        font-size:10px;

        letter-spacing:2.2px;

    }


    .expertise-graph{

        min-height:540px;

    }


    .expertise-node{

        width:130px;

        padding:7px;

        gap:6px;

    }


    .node-icon{

        width:34px;
        height:34px;

        flex-basis:34px;

        font-size:14px;

    }


    .node-content small{

        font-size:6px;

    }


    .node-content strong{

        font-size:9px;

    }


    .node-one{

        top:12%;

    }


    .node-two{

        top:2%;

    }


    .node-three{

        top:12%;

    }


    .node-four{

        bottom:12%;

    }


    .node-five{

        bottom:2%;

    }


    .node-six{

        bottom:12%;

    }


    .expertise-core{

        width:130px;
        height:130px;

    }


    .core-inner{

        width:100px;
        height:100px;

    }


    .core-logo{

        width:38px;
        height:24px;

        margin-bottom:4px;

    }


    .core-logo img{

        max-width:38px;
        max-height:24px;

    }


    .core-inner strong{

        font-size:12px;

    }


    .core-inner span{

        font-size:11px;

    }

}


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

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

    .core-ring-one,
    .core-ring-two,
    .expertise-connections line,
    .status-dot{

        animation:none !important;

    }

}

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

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

    .core-ring,
    .expertise-connections line,
    .status-dot,
    .capability-bar span{

        animation:none !important;

    }

}

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

.cta{
    background:var(--secondary);

    padding:78px 0;

    position:relative;

    overflow:hidden;
}

.cta:after{
    content:"";

    position:absolute;

    right:-110px;
    top:-140px;

    width:450px;
    height:450px;

    border:
        75px solid
        rgba(104,6,36,.08);

    border-radius:50%;
}

.cta h2{
    font-size:66px;

    line-height:.85;

    text-transform:uppercase;

    margin:0;
}

.cta p{
    max-width:650px;

    color:#594b13;

    font-size:13px;

    line-height:1.8;

    margin:16px 0 0;
}
/* =========================================================
   YASKO PREMIUM INDUSTRIAL FOOTER
========================================================= */
/* =========================================================
   YASKO PREMIUM INDUSTRIAL FOOTER
========================================================= */

.yasko-footer{

    --footer-maroon:#680624;
    --footer-dark:#3d0316;
    --footer-gold:#D4AF37;
    --footer-gold-dark:#A98218;

    position:relative;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            115deg,
            rgba(61,3,22,.98) 0%,
            rgba(104,6,36,.96) 48%,
            rgba(61,3,22,.98) 100%
        );

    isolation:isolate;
}


/* =========================================================
   INDUSTRIAL BACKGROUND
========================================================= */

.yasko-footer::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-5;

    background:
        linear-gradient(
            115deg,
            rgba(61,3,22,.90),
            rgba(104,6,36,.70),
            rgba(61,3,22,.92)
        ),
        url("images/steel-construction-bg.jpg")
        center center / cover no-repeat;

    opacity:.75;

}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.footer-tech-grid{

    position:absolute;

    inset:0;

    z-index:-4;

    pointer-events:none;

    opacity:.25;

    background-image:

        linear-gradient(
            rgba(212,175,55,.10) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212,175,55,.10) 1px,
            transparent 1px
        );

    background-size:
        65px 65px,
        65px 65px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );

}


/* =========================================================
   STEEL BEAMS
========================================================= */

.footer-steel-beam{

    position:absolute;

    z-index:-3;

    pointer-events:none;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.38),
            rgba(255,255,255,.12),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(212,175,55,.12);

}


/* LARGE DIAGONAL */

.footer-steel-beam-one{

    width:850px;

    right:-160px;

    top:150px;

    transform:
        rotate(-31deg);
}


/* SECOND DIAGONAL */

.footer-steel-beam-two{

    width:650px;

    left:-180px;

    bottom:170px;

    transform:
        rotate(27deg);

    opacity:.55;
}


/* =========================================================
   GOLD ENGINEERING NODES
========================================================= */

.footer-gold-node{

    position:absolute;

    z-index:-2;

    width:110px;
    height:110px;

    border:
        1px solid
        rgba(212,175,55,.22);

    border-radius:50%;

    pointer-events:none;

}


.footer-gold-node::before{

    content:"";

    position:absolute;

    inset:13px;

    border:
        1px solid
        rgba(212,175,55,.13);

    border-radius:50%;

}


.footer-gold-node::after{

    content:"";

    position:absolute;

    left:50%;
    top:-18px;

    width:1px;
    height:146px;

    background:
        linear-gradient(
            transparent,
            rgba(212,175,55,.22),
            transparent
        );

}


.footer-node-one{

    right:7%;

    top:35px;

}


.footer-node-two{

    left:3%;

    top:270px;

    transform:scale(.65);

}


.footer-node-three{

    right:18%;

    bottom:95px;

    transform:scale(.45);

}


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

.footer-main{

    position:relative;

    z-index:2;

    padding:
        70px
        0
        55px;

}


/* =========================================================
   TOP INFORMATION AREA
========================================================= */

.footer-information{

    display:grid;

    grid-template-columns:
        1.45fr
        .75fr
        1fr;

    gap:65px;

    position:relative;

    padding-bottom:48px;

}


/* VERTICAL GOLD DIVIDERS */

.footer-information > div:not(:first-child){

    position:relative;

}


.footer-information > div:not(:first-child)::before{

    content:"";

    position:absolute;

    left:-33px;

    top:2px;

    width:1px;

    height:calc(100% - 5px);

    background:
        linear-gradient(
            to bottom,
            var(--footer-gold),
            rgba(212,175,55,.12),
            transparent
        );

    opacity:.65;

}


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

.footer-company-brand{

    display:flex;

    align-items:center;

    gap:18px;

}


.footer-logo-box{

    width:92px;

    height:92px;

    flex:0 0 92px;

    display:grid;

    place-items:center;

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

    border-radius:
        12px 3px 12px 3px;

    border:
        1px solid
        rgba(212,175,55,.45);

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

    position:relative;

    overflow:hidden;

}


.footer-logo-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--footer-gold),
            #f2d875,
            var(--footer-gold)
        );

}


.footer-brand-logo{

    width:78px;

    height:78px;

    object-fit:contain;

}


.footer-brand-title{

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:38px;

    line-height:.9;

    font-weight:800;

    letter-spacing:.3px;

    color:#fff;

}


.footer-brand-title span{

    display:block;

    margin-top:10px;

    max-width:270px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    line-height:1.45;

    font-weight:800;

    letter-spacing:2px;

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

}


/* =========================================================
   COMPANY GOLD LINE
========================================================= */

.footer-company-line{

    width:100%;

    height:1px;

    margin:
        27px
        0
        20px;

    background:
        linear-gradient(
            90deg,
            var(--footer-gold),
            rgba(212,175,55,.25),
            transparent
        );

}


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

.footer-about{

    max-width:470px;

    margin:0;

    color:
        rgba(255,255,255,.82)
        !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px;

    line-height:1.9;

}


/* =========================================================
   COMPANY TAGLINE
========================================================= */

.footer-company-tag{

    display:flex;

    align-items:center;

    gap:9px;

    margin-top:19px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

}


.footer-company-tag span{

    display:block;

    width:24px;

    height:2px;

    background:
        var(--footer-gold);

}


/* =========================================================
   SOCIAL
========================================================= */

.social{

    margin-top:22px;

}


.social a{

    position:relative;

    display:inline-grid;

    place-items:center;

    width:35px;
    height:35px;

    margin-right:6px;

    border:
        1px solid
        rgba(255,255,255,.18);

    color:#fff;

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

    text-decoration:none;

    overflow:hidden;

    transition:
        transform .35s ease,
        color .35s ease,
        border-color .35s ease;

}


.social a::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:0;
    height:0;

    border-radius:50%;

    background:
        var(--footer-gold);

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

    transition:
        width .4s ease,
        height .4s ease;

}


.social a i{

    position:relative;

    z-index:2;

}


.social a:hover{

    color:
        var(--footer-dark);

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

    transform:
        translateY(-4px);

}


.social a:hover::before{

    width:80px;
    height:80px;

}


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

.footer-heading{

    display:inline-block;

    position:relative;

    color:
        var(--footer-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px;

    font-weight:900;

    letter-spacing:1.8px;

    text-transform:uppercase;

}


.footer-heading-line{

    width:38px;

    height:2px;

    margin:
        9px
        0
        22px;

    background:
        var(--footer-gold);

    box-shadow:
        0 0 12px
        rgba(212,175,55,.35);

}


/* =========================================================
   QUICK LINKS
========================================================= */

.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}


.footer-links li{

    margin-bottom:14px;

}


.footer-links a{

    display:flex;

    align-items:center;

    gap:12px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px;

    text-decoration:none;

    transition:
        color .3s ease,
        transform .3s ease;

}


.footer-links a span{

    width:27px;

    color:
        var(--footer-gold);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:14px;

    font-weight:700;

    opacity:.8;

}


.footer-links a b{

    font-weight:500;

}


.footer-links a::after{

    content:"";

    width:0;

    height:1px;

    background:
        var(--footer-gold);

    transition:
        width .35s ease;

}


.footer-links a:hover{

    color:#fff;

    transform:
        translateX(5px);

}


.footer-links a:hover::after{

    width:25px;

}


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

.contact-line{

    display:flex;

    align-items:flex-start;

    gap:13px;

    margin-bottom:17px;

}


.contact-icon{

    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;

    place-items:center;

    border:
        1px solid
        rgba(212,175,55,.32);

    border-radius:
        7px 2px 7px 2px;

    background:
        rgba(212,175,55,.07);

    color:
        var(--footer-gold);

}


.contact-icon i{

    font-size:15px;

}


.contact-content{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;

}


.contact-content small{

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:900;

    letter-spacing:1.4px;

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

}


.contact-content span,
.contact-content a{

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:11px;

    line-height:1.65;

    text-decoration:none;

    overflow-wrap:anywhere;

}


.contact-content a{

    transition:
        color .25s ease;

}


.contact-content a:hover{

    color:
        var(--footer-gold);

}


/* =========================================================
   PRODUCTS SECTION
   KEEPING YOUR WHITE BOX STYLE
========================================================= */

.footer-products-section{

    position:relative;

    margin-top:5px;

    padding-top:38px;

    border-top:
        1px solid
        rgba(255,255,255,.14);

}


.footer-products-head{

    display:flex;

    align-items:flex-end;

    gap:35px;

    margin-bottom:22px;

}


.footer-products-head h3{

    margin:0;

    color:#fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:29px;

    line-height:.95;

    font-weight:800;

    text-transform:uppercase;

}


.footer-products-head h3 span{

    color:
        var(--footer-gold);

}


.footer-product-line{

    flex:1;

    height:1px;

    margin-bottom:6px;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.75),
            rgba(212,175,55,.08),
            transparent
        );

}


/* =========================================================
   PRODUCT BOX
========================================================= */

.footer-product-box{

    position:relative;

    min-height:88px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:
        15px
        42px
        15px
        18px;

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

    border:
        1px solid
        rgba(212,175,55,.20);

    border-radius:8px;

    color:
        var(--footer-dark);

    text-decoration:none;

    overflow:hidden;

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

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .35s ease;

}


/* GOLD TOP */

.footer-product-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--footer-gold),
            #f3d878,
            var(--footer-gold)
        );

    transition:
        width .55s ease;

}


/* GOLD SWEEP */

.footer-product-box::after{

    content:"";

    position:absolute;

    top:-40%;

    left:-80px;

    width:45px;

    height:180%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.28),
            transparent
        );

    transform:
        skewX(-18deg);

    opacity:0;

}


.footer-product-box:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(212,175,55,.65);

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

}


.footer-product-box:hover::before{

    width:100%;

}


.footer-product-box:hover::after{

    animation:
        footerProductSweep
        1.1s
        ease;

}


@keyframes footerProductSweep{

    0%{
        left:-80px;
        opacity:0;
    }

    20%{
        opacity:1;
    }

    100%{
        left:115%;
        opacity:0;
    }

}


/* PRODUCT NUMBER */

.product-number{

    position:absolute;

    top:8px;

    right:12px;

    color:
        rgba(104,6,36,.15);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:17px;

    font-weight:800;

}


/* PRODUCT ICON */

.product-box-icon{

    width:45px;
    height:45px;

    flex:0 0 45px;

    display:grid;

    place-items:center;

    border-radius:7px;

    background:
        rgba(104,6,36,.07);

    color:
        var(--footer-maroon);

    font-size:20px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}


.footer-product-box:hover
.product-box-icon{

    background:
        var(--footer-maroon);

    color:
        var(--footer-gold);

    transform:
        rotate(-4deg)
        scale(1.05);

}


/* PRODUCT TEXT */

.product-box-text{

    display:flex;

    flex-direction:column;

    gap:3px;

    min-width:0;

}


.product-box-text strong{

    color:
        var(--footer-dark);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:18px;

    line-height:1;

    font-weight:800;

    text-transform:uppercase;

}


.product-box-text small{

    color:#777;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    line-height:1.4;

}


.product-arrow{

    position:absolute;

    right:15px;

    color:
        var(--footer-maroon);

    font-size:15px;

    opacity:.55;

    transition:
        transform .35s ease,
        color .35s ease,
        opacity .35s ease;

}


.footer-product-box:hover
.product-arrow{

    color:
        var(--footer-gold-dark);

    opacity:1;

    transform:
        translate(3px,-3px);

}


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

.footer-bottom{

    position:relative;

    z-index:5;

    padding:18px 0;

    border-top:
        1px solid
        rgba(255,255,255,.14);

    background:
        rgba(35,2,13,.52);

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px;

}


.footer-bottom strong{

    color:#fff;

    font-weight:800;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.footer-top-btn{

    position:absolute;

    right:28px;

    bottom:63px;

    z-index:20;

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        var(--footer-gold);

    color:
        var(--footer-dark);

    text-decoration:none;

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

    transition:
        transform .35s ease,
        background .35s ease;

}


.footer-top-btn:hover{

    background:#fff;

    transform:
        translateY(-5px);

}


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

@media(max-width:991px){

    .footer-main{

        padding:
            55px
            0
            45px;

    }


    .footer-information{

        grid-template-columns:
            1fr 1fr;

        gap:
            45px 50px;

    }


    .footer-company-block{

        grid-column:
            1 / -1;

        max-width:650px;

    }


    .footer-information > div:not(:first-child)::before{

        display:none;

    }


    .footer-links-block,
    .footer-contact-block{

        padding-top:5px;

    }


    .footer-brand-title{

        font-size:34px;

    }


    .footer-products-section{

        margin-top:5px;

    }

}


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

@media(max-width:575px){

    .footer-main{

        padding:
            45px
            0
            35px;

    }


    .footer-information{

        display:block;

        padding-bottom:30px;

    }


    .footer-company-block{

        margin-bottom:40px;

    }


    .footer-links-block{

        margin-bottom:38px;

    }


    .footer-company-brand{

        gap:12px;

    }


    .footer-logo-box{

        width:72px;

        height:72px;

        flex-basis:72px;

    }


    .footer-brand-logo{

        width:61px;

        height:61px;

    }


    .footer-brand-title{

        font-size:28px;

    }


    .footer-brand-title span{

        font-size:7px;

        letter-spacing:1.45px;

        max-width:220px;

    }


    .footer-about{

        font-size:11px;

        line-height:1.8;

    }


    .footer-company-tag{

        font-size:8px;

        line-height:1.5;

    }


    .footer-products-head{

        display:block;

    }


    .footer-products-head h3{

        font-size:26px;

    }


    .footer-product-line{

        width:100%;

        margin-top:15px;

    }


    .footer-product-box{

        min-height:82px;

        padding:
            14px
            38px
            14px
            14px;

    }


    .product-box-icon{

        width:40px;

        height:40px;

        flex-basis:40px;

        font-size:18px;

    }


    .product-box-text strong{

        font-size:16px;

    }


    .product-box-text small{

        font-size:8px;

    }


    .footer-top-btn{

        right:15px;

        bottom:65px;

        width:38px;

        height:38px;

    }


    .footer-bottom{

        font-size:9px;

        line-height:1.8;

        padding-right:55px;

    }


    .footer-steel-beam-one{

        width:500px;

        right:-250px;

    }


    .footer-node-one{

        right:-45px;

        top:40px;

    }

}


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

@media(max-width:991px){

    .footer-main{
        padding:55px 0 45px;
    }

    .footer-brand-logo{
        width:82px;
        height:82px;

        flex-basis:82px;
    }

    .footer-brand-title{
        font-size:31px;
    }

    .footer-products-section{
        margin-top:40px;
    }

    .footer-product-box{
        min-height:84px;
    }

}


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

@media(max-width:575px){

    .footer-main{
        padding:45px 0 35px;
    }

    .footer-brand-wrap{
        gap:12px;
    }

    .footer-brand-logo{
        width:70px;
        height:70px;

        flex-basis:70px;
    }

    .footer-brand-title{
        font-size:27px;
    }

    .footer-brand-title span{
        font-size:7px;
        letter-spacing:1.5px;
    }

    .footer-about{
        font-size:11px;

        line-height:1.8;
    }

    .footer-products-head{
        display:block;
    }

    .footer-products-head h3{
        font-size:26px;
    }

    .footer-product-line{
        width:100%;

        margin-top:15px;
    }

    .footer-product-box{
        min-height:82px;

        padding:
            14px
            38px
            14px
            14px;
    }

    .product-box-icon{
        width:40px;
        height:40px;

        flex-basis:40px;

        font-size:18px;
    }

    .product-box-text strong{
        font-size:16px;
    }

    .product-box-text small{
        font-size:8px;
    }

    .footer-top-btn{
        right:15px;
        bottom:65px;

        width:38px;
        height:38px;
    }

    .footer-bottom{
        font-size:9px;

        line-height:1.8;

        padding-right:55px;
    }

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

.whatsapp{
    position:fixed;

    right:22px;
    bottom:22px;

    width:57px;
    height:57px;

    border-radius:50%;

    background:#20c063;

    color:#fff;

    display:grid;

    place-items:center;

    font-size:27px;

    z-index:9999;

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

    transition:.25s;
}

.whatsapp:hover{
    color:#fff;

    transform:translateY(-3px);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
    opacity:0;

    transform:translateY(30px);

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

.reveal.show{
    opacity:1;

    transform:none;
}


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

@keyframes slowMove{

    from{
        transform:
            scale(1.02)
            translate(-10px,-6px);
    }

    to{
        transform:
            scale(1.09)
            translate(8px,5px);
    }

}

@keyframes goldPulse{

    0%,
    100%{
        filter:brightness(.96);

        box-shadow:
            0 0 0 1px
            rgba(212,175,55,.28),

            0 0 18px
            rgba(212,175,55,.14);
    }

    50%{
        filter:brightness(1.08);

        box-shadow:
            0 0 0 1px
            rgba(212,175,55,.55),

            0 0 34px
            rgba(212,175,55,.32);
    }

}

@keyframes heroWave1{

    from{
        transform:
            translateX(-30px)
            rotate(-8deg)
            skewX(-15deg);
    }

    to{
        transform:
            translateX(110px)
            rotate(-5deg)
            skewX(-15deg);
    }

}

@keyframes heroWave2{

    from{
        transform:
            translateX(40px)
            rotate(-8deg)
            skewX(-15deg);
    }

    to{
        transform:
            translateX(-90px)
            rotate(-5deg)
            skewX(-15deg);
    }

}

@keyframes heroWave3{

    from{
        transform:
            translateX(70px)
            rotate(-8deg)
            skewX(-15deg);
    }

    to{
        transform:
            translateX(-80px)
            rotate(-5deg)
            skewX(-15deg);
    }

}

.fade-slide{
    animation:
        fadeSlide .65s ease;
}

@keyframes fadeSlide{

    from{
        opacity:.15;
        transform:translateX(24px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* =========================================================
   DESKTOP / LAPTOP
========================================================= */

@media(max-width:1199px){

    .main-nav .nav-link{
        padding-left:9px !important;
        padding-right:9px !important;
    }

    .brand-title{
        font-size:32px;
    }

    .hero-slider{
        height:460px;
    }

    .product-frame{
        height:360px;
    }

}


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

@media(max-width:991px){

    .brand-area{
        min-height:95px;
    }

    .brand-logo{
        width:78px;
        height:78px;
    }

    .brand-title{
        font-size:28px;
    }

    .brand-title span{
        font-size:9px;
        letter-spacing:2px;
    }


    .main-nav .nav-link{
        padding:12px 0 !important;
    }

    .main-nav .nav-link:after{
        left:0;
        right:auto;
        bottom:5px;
        width:35px;
    }


    .hero-inner{
        padding:48px 0;
    }

    .hero-slider{
        height:450px;
        margin-top:35px;
    }


    .section{
        padding:78px 0;
    }

    .section-title{
        font-size:53px;
    }


    .gold-strip .item{
        border-bottom:
            1px solid
            rgba(104,6,36,.15);
    }


    .slider-prev{
        left:5px;
    }

    .slider-next{
        right:5px;
    }

}


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

@media(max-width:575px){

    .utility-bar .left,
    .utility-bar .right{
        clip-path:none;

        padding:8px 10px;

        font-size:9px;
    }

    .utility-bar .left{
        width:60%;
    }

    .utility-bar .right{
        width:40%;

        text-align:right;
    }


    .brand-area{
        min-height:80px;
    }

    .brand-logo{
        width:62px;
        height:62px;
    }

    .brand-title{
        font-size:22px;
    }

    .brand-title span{
        font-size:7px;

        letter-spacing:1.6px;
    }


    .hero{
        min-height:650px;
    }

    .hero-inner{
        padding:40px 0;
    }

    .hero-copy{
        padding-right:5px;
    }

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

    .hero-copy p{
        font-size:13px;
    }


    .hero-facts{
        gap:15px;

        margin-top:30px;
    }

    .hero-facts strong{
        font-size:25px;
    }

    .hero-facts small{
        font-size:8px;
    }


    .hero-slider{
        height:315px;

        margin-top:25px;
    }

    .product-frame{
        height:255px;

        width:calc(100% - 10px);
    }


    .slider-caption{
        left:12px;
        right:12px;
        bottom:12px;

        padding:12px 14px;
    }

    .slider-caption h3{
        font-size:22px;
    }

    .slider-caption p{
        font-size:9px;
    }


    .slider-count{
        right:10px;
        top:10px;
    }

    .slider-dots{
        right:10px;
        bottom:0;
    }


    .slider-arrow{
        width:34px;
        height:34px;
    }

    .slider-prev{
        left:0;
    }

    .slider-next{
        right:0;
    }


    .section{
        padding:65px 0;
    }

    .section-title{
        font-size:43px;
    }

    .section-copy{
        font-size:13px;
        line-height:1.8;
    }


    .profile-photo{
        height:430px;
        min-height:430px;

        margin-bottom:35px;
    }

    .profile-badge{
        left:18px;
        bottom:18px;

        padding:18px 20px;

        min-width:170px;
    }

    .profile-badge strong{
        font-size:45px;
    }


    .product-grid-image{
        height:220px;
    }


    .cta{
        padding:60px 0;
    }

    .cta h2{
        font-size:48px;
    }


    .footer-main{
        padding:55px 0 35px;
    }

    .footer-bottom{
        text-align:center;
    }


    .whatsapp{
        width:52px;
        height:52px;

        right:16px;
        bottom:16px;

        font-size:24px;
    }

}


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

@media(max-width:380px){

    .brand-logo{
        width:54px;
        height:54px;
    }

    .brand-title{
        font-size:19px;
    }

    .brand-title span{
        font-size:6px;
        letter-spacing:1.2px;
    }

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

    .section-title{
        font-size:38px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

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

}