/* ===================================
   NEW LAYOUT TEMPLATE
=================================== */

.new-layout-template{

    width:100%;
    max-width:1250px;

    margin:0 auto;
    padding:0;
}


:root{
    --gss-header-height: 110px;
}

body:not(.single-product) .site-content{
    padding-top: var(--gss-header-height);
}

.single-product .site.grid-container{
    margin-top: calc(var(--gss-header-height) * -1);
}
/* REMOVE GENERATEPRESS WIDTH LIMIT */

.new-layout-template .site-main,
.new-layout-template .inside-article,
.new-layout-template .entry-content,
.new-layout-template #primary,
.new-layout-template #main{

    width:100%;
    max-width:100%;
}


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

.gss-custom-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:all .3s ease;

    background:transparent;

    border-bottom:1px solid #FFFFFF26;
}


/* SCROLL BACKGROUND */

.gss-custom-header.scrolled{

    background:#003366;

    backdrop-filter:blur(10px);
}


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

.gss-header-container{

    width:100%;
    max-width:1250px;

    margin:0 auto;

    padding:25px;

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

    gap:30px;
}


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

.gss-logo img{

    max-width:180px;

    width:100%;
    height:auto;

    display:block;
}


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

.gss-menu-main{
    display:flex;
    align-items:center;
}


/* ===================================
   MENU WRAPPER
=================================== */

.gss-navigation-wrapper{
    display:flex;
    align-items:center;
}


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

.gss-menu{

    display:flex;
    align-items:center;

    gap:35px;

    list-style:none;

    margin:0;
    padding:0;
}

.gss-menu li{
    position:relative;
    list-style:none;
}


/* MENU LINKS */

.gss-menu li a{

    position:relative;

    font-family:'Montserrat', sans-serif;
    font-weight:500;
    font-size:14.4px;
    line-height:24.48px;
    letter-spacing:1px;

    text-transform:uppercase;

    color:#FFFFFF;

    text-decoration:none;

    padding-bottom:8px;

    transition:all .3s ease;
}


/* ===================================
   HOVER / ACTIVE LINE
=================================== */

.gss-menu li a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:0%;
    height:2px;

    background:#FFFFFF;

    transition:all .3s ease;
}


/* HOVER */

.gss-menu li:hover > a::after{
    width:100%;
}


/* ACTIVE */

.gss-menu .current-menu-item > a::after,
.gss-menu .current_page_item > a::after{
    width:100%;
}


/* ===================================
   VERTICAL MENU
=================================== */

.layout-vertical .gss-menu{

    flex-direction:column;
    align-items:flex-start;

    gap:8px;
}

/* ===================================
   VERTICAL MENU STYLE
=================================== */

.layout-vertical .gss-menu li a{

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

    font-weight:400;

    font-size:15.2px;

    line-height:25.84px;

    letter-spacing:0;

    vertical-align:middle;

    text-transform:none;

    color:#A0AEC0;

    padding-bottom:0;
}


/* HOVER */

.layout-vertical .gss-menu li a:hover{
    color:#ffffff;
}


/* REMOVE UNDERLINE */

.layout-vertical .gss-menu li a::after{
    display:none;
}

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

.gss-mobile-toggle{

    width:32px;
    height:24px;

    display:none;

    flex-direction:column;
    justify-content:space-between;

    cursor:pointer;

    z-index:99999;

    position:relative;
}

.gss-mobile-toggle span{

    width:100%;
    height:3px;

    background:#FFFFFF;

    border-radius:10px;

    transition:.3s ease;
}


/* ACTIVE TOGGLE */

.gss-mobile-toggle.active span:nth-child(1){

    transform:translateY(10px) rotate(45deg);
}

.gss-mobile-toggle.active span:nth-child(2){

    opacity:0;
}

.gss-mobile-toggle.active span:nth-child(3){

    transform:translateY(-10px) rotate(-45deg);
}


/* ===================================
   BODY TOP SPACE
=================================== */

/*body{*/
/*    padding-top:100px;*/
/*}*/


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

@media(max-width:1024px){

    .gss-header-container,
    .new-layout-template{

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

    .gss-menu{
        gap:20px;
    }

}


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

@media(max-width:991px){

    .layout-horizontal .gss-mobile-toggle{
        display:flex;
    }

    .layout-horizontal .gss-navigation-wrapper{

        position:fixed;

        top:0;
        right:-100%;

        width:320px;
        height:100vh;

        background:#003366;

        padding:120px 30px 40px;

        transition:.4s ease;

        z-index:9999;

        overflow-y:auto;
    }

    .layout-horizontal .gss-navigation-wrapper.active{
        right:0;
    }

    .layout-horizontal .gss-menu{

        flex-direction:column;
        align-items:flex-start;

        gap:25px;

        width:100%;
    }

    .layout-horizontal .gss-menu li{
        width:100%;
    }

    .layout-horizontal .gss-menu li a{

        font-size:16px;
        line-height:26px;
    }

}


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

@media(max-width:768px){

    .gss-custom-header{

        background:#003366;
    }

    .gss-header-container{

        padding-top:18px;
        padding-bottom:18px;
    }

    .gss-logo img{
        max-width:140px;
    }

    /*body{*/
    /*    padding-top:85px;*/
    /*}*/

    .new-layout-template{

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

}


/* ===================================
   CATEGORY SHORTCODE
=================================== */

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

.gss-category-card{
    position:relative;
    overflow:hidden;
    min-height:420px;
    text-decoration:none;
    display:flex;
    align-items:flex-end;
    padding:30px;
    isolation:isolate;
}

.gss-card-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:.5s ease;
    z-index:-3;
}

.gss-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0, 30, 60, 0) 30%,
        rgba(0, 30, 60, 0.65) 85%,
        rgba(0, 30, 60, 0.82) 100%
    );

    transition:.4s ease;
    z-index:-2;
}

.gss-category-card:hover .gss-overlay{

    background:linear-gradient(
        180deg,
        rgba(0, 30, 60, 0.15) 20%,
        rgba(0, 30, 60, 0.88) 85%,
        rgba(0, 30, 60, 0.97) 100%
    );
}

.gss-category-card:hover .gss-card-bg{
    transform:scale(1.05);
}


/* ICON */

.gss-card-icon{

    position:absolute;

    top:18px;
    right:18px;

    width:52px;
    height:52px;

    background:#00336680;

    border:1px solid #FFFFFF33;

    backdrop-filter:blur(4px);

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

    z-index:5;

    transition:.35s ease;
}

.gss-category-card:hover .gss-card-icon{

    background:#003366;
    border:1px solid #FFFFFF;
}

.gss-card-icon img{

    width:24px;
    height:24px;

    object-fit:contain;
}


/* CONTENT */

.gss-card-content{

    position:relative;
    z-index:5;

    color:#fff;

    width:100%;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    min-height:120px;

    transform:translateY(18px);

    transition:.4s ease;
}

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


/* TITLE */

.gss-card-content h3{

    margin:0;

    font-family:"Montserrat", sans-serif;
    font-weight:800;
    font-size:22.4px;
    line-height:38px;
    letter-spacing:-0.45px;

    text-transform:uppercase;

    color:#fff;
}


/* VIEW PRODUCT */

.gss-view-product{

    display:inline-block;

    margin-top:10px;

    font-family:"Montserrat", sans-serif;
    font-weight:600;
    font-size:12.8px;
    line-height:21.76px;
    letter-spacing:2px;

    text-transform:uppercase;

    color:#fff;

    opacity:0;

    transform:translateY(15px);

    transition:.4s ease;
}

.gss-category-card:hover .gss-view-product{

    opacity:1;
    transform:translateY(0);
}


/* RESPONSIVE GRID */

@media(max-width:1024px){

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

}

@media(max-width:768px){

    .gss-category-grid{
        grid-template-columns:1fr;
    }

    .gss-category-card{

        min-height:340px;
        padding:24px;
    }

    .gss-card-content h3{

        font-size:20px;
        line-height:32px;
    }

}


/* ===================================
   SPLIT BG
=================================== */

.split-left-bg{

    position:relative;
    overflow:hidden;

    background:#F4F6F9;
}

.split-left-bg::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:50%;
    height:100%;

    background-image:url(https://gss.staging.tempurl.host/wp-content/uploads/2026/05/Image.png);

    background-repeat:no-repeat;
    background-position:left center;
    background-size:cover;

    z-index:0;
}

.split-left-bg > .gb-inside-container{

    position:relative;
    z-index:2;
}

@media(max-width:768px){

    .split-left-bg::before{
        display:none;
    }

    .split-left-bg{
        background:#F4F6F9;
    }

}
/* ===================================
   HEADING WITH LINE
=================================== */

.heading-with-line{

    display:inline-flex !important;

    align-items:center;

    gap:18px;

    white-space:nowrap;

    width:100%;
}

.heading-with-line::after{

    content:"";

    flex:1;

    min-width:120px;

    height:2px;

    background:linear-gradient(
        90deg,
        #003366 0%,
        #F4F6F9 100%
    );
}


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

.footer-menu{

    list-style:none;

    padding:0;
    margin:0;
}

.footer-menu li{

    list-style:none;

    margin-bottom:14px;
}

.footer-menu a{

    text-decoration:none;

    font-family:"Montserrat", sans-serif;
    font-weight:400;
    font-size:15.2px;
    line-height:25.84px;

    color:#A0AEC0;

    transition:.3s ease;
}

.footer-menu a:hover{
    color:#ffffff;
}


/* ===================================
   SPACING
=================================== */

hr.spacing-small{

    margin-top:20px;
    margin-bottom:20px;
}

/* ===================================
   MOBILE MENU PANEL
=================================== */

@media(max-width:991px){

    .layout-horizontal .gss-navigation-wrapper{

        position:fixed;

        top:0;
        right:-100%;

        width:100%;
        height:100vh;

        background:#003366;

        padding:100px 35px 40px;

        transition:.4s ease;

        z-index:99999;

        overflow-y:auto;

        display:flex;
        align-items:flex-start;
        justify-content:flex-start;
    }

    .layout-horizontal .gss-navigation-wrapper.active{
        right:0;
    }

    /* MENU */

    .layout-horizontal .gss-menu{

        flex-direction:column;

        align-items:flex-start;

        gap:28px;

        width:100%;
    }

    .layout-horizontal .gss-menu li{
        width:100%;
    }

    .layout-horizontal .gss-menu li a{

        font-size:20px;
        line-height:20px;

        font-weight:700;

        letter-spacing:1px;

        padding-bottom:10px;
    }


    /* ===================================
       TOGGLE BUTTON
    =================================== */

    .gss-mobile-toggle{

        width:26px;
        height:20px;

        display:flex;

        position:relative;

        z-index:999999;
    }

    .gss-mobile-toggle span{

        height:2px;
    }


    /* ===================================
       ACTIVE CLOSE ICON
    =================================== */

    .gss-mobile-toggle.active{

        position:fixed;

        top:35px;
        right:25px;
    }

    .gss-mobile-toggle.active span:nth-child(1){

        transform:translateY(9px) rotate(45deg);
    }

    .gss-mobile-toggle.active span:nth-child(2){

        opacity:0;
    }

    .gss-mobile-toggle.active span:nth-child(3){

        transform:translateY(-9px) rotate(-45deg);
    }

}

/* Add this class to section/container */
.grid-bg{
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

/* Grid Background */
.grid-bg::before{
    content: "";
    position: absolute;

    /* extend outside so side boxes look half-cut */
    top: 0;
    left: -35px;
    width: calc(100% + 70px);
    height: 100%;

    background-image:
        linear-gradient(to right, rgba(0, 51, 102, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 51, 102, 0.12) 1px, transparent 1px);

    background-size: 90px 90px;

    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* Keep content above */
.grid-bg > *{
    position: relative;
    z-index: 1;
}


/* Full Width First Card */
.gss-full-width-card{
    grid-column: 1 / -1;
    min-height: 450px;
}

/* Bigger heading for full card */
.gss-full-width-card .gss-card-content h3{
    font-size: 42px;
}

/* Tablet */
@media(max-width:991px){

    .gss-full-width-card{
        grid-column: 1 / -1;
    }

}

/* Mobile */
@media(max-width:767px){

    .gss-full-width-card{
        grid-column: auto;
        min-height: 320px;
    }

    .gss-full-width-card .gss-card-content h3{
        font-size: 28px;
    }

}