/* 
    Theme Name: Nexpert Custom
    Text Domain: nexpert
    Description: Nexpert Custom Theme
    Version: a1.0
    Author: DEV
*/

:root{
    --text-color: #333333;
    --padding: 80px;
}

body{
    margin: 0px;
    background-color: #fff;
}

*{
    font-family: 'Open Sans', serif;
    font-optical-sizing: auto;
    font-style: normal;

    box-sizing: border-box;
}

p, h1, h2, h3, h4, h5, h6{
    margin-block-start: 0px;
    margin-block-end: 0px;
}

a{
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
}

a.hoverable:hover{
    text-decoration: underline;
}

.container{
    width: 1440px;
    padding: 0px var(--padding);
    margin-inline: auto;
}

.top_menu{
    display: flex;
    justify-content: end;
}

.pll_langs_container{
    position: relative;
}

.pll_lang_current{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    padding: 12px 8px;
    color: #888989;
    justify-content: center;
}

.pll_langs{
    position: absolute;
    top: calc(100% + 10px);
    background-color: white;
    padding: 12px;
    border-radius: 16px;
    right: 0px;
    width: 150px;
    z-index: 99999;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    min-width: calc(100% - 12px);
    display: none;
    flex-direction: column;
    row-gap: 12px;
}

.pll_lang{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333333;
}

.pll_langs_container.active .pll_langs{
    display: flex;
}

.pll_lang.active{
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #026964;
}

.mobile_menu .top_menu{
    background-color: #F8F5F2;
}

.top_menu_container{
    display: flex;
    align-items: center;
    justify-content: end;
}

.pll_langs_container{
    border-left: 2px solid #3333332e;
    padding-left: 12px;
}

.mobile_menu .cta_menu{
    margin: 16px;
    display: none;
}

.top_menu ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    font-size: 14px;
    padding-left: 0px;
}

.nav_container{
    display: grid;
    align-items: center;
    column-gap: 16px;   
    grid-template-columns: auto 1fr auto ;
}

.wrapper:has(.nav_container){
    border-bottom: 1px solid #3333332e;
}

.logo img{
    max-height: 60px;
    max-width: 180px;
}

.menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    position: relative;
    z-index: 9999;
}

.menu li{
    position: relative;
    padding: 8px 16px;
    border-radius: 32px;

    transition: background-color 0s ease-in-out 0s;
}

.menu li:has(div){
    transition: background-color 0s ease-in-out .7s;
}

.menu li:has(span:not(.new)){
    padding-right: 32px;
}

span.menu-title{
    pointer-events: none;
    position: relative;
}

span.menu-title::after{
    content: '';
    position: absolute;
    width: 9px;
    height: 16px;
    left: calc(100% + 10px);
    top: 4px;
    background-image: url('./assets/images/chevron\ \(1\).svg');
    background-size: 9px 16px;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
}

.menu li:hover{
    background-color: #3333332e;
    transition: background-color 0s ease-in-out 0s;
}

.menu li .floating_menu{
    position: fixed;
    width: 740px;
    margin-top: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    left: calc(50% - 400px);
    overflow: hidden;
    padding-top: 32px;

    display: grid;
    grid-template-columns: 340px 0px 400px 0px;

    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);

    transition: grid-template-columns 0.3s ease-in-out 0.3s, visibility 0s 1s, opacity 0.3s .7s, transform 0.3s .7s;
}

.floating_menu img{
    width: 100%;
}

.menu li:hover .floating_menu{
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);

    transition: grid-template-columns 0.3s ease-in-out 0.3s, width .3s ease-in-out .3s, left .3s ease-in-out .3s,  visibility 0s, opacity 0.3s, transform 0.3s;
}

.floating_menu:has(.nested-item:hover){
    width: 1000px;
    grid-template-columns: 300px 0px 400px 300px;
    left: calc(50% - 500px);
}

.floating_menu .custom-elements{
    padding: 32px;
}

.floating_menu .children-container{
    padding: 32px 0px 32px 32px;
    position: relative;
}

.menu li .floating_menu h2{
    font-size: 36px;
    font-weight: 300;
}

.menu li .floating_menu p{
    font-size: 18px;
    font-weight: 300;
    margin-top: 12px;
}

.floating_menu_footer{
    grid-column: 1/-1;
    grid-row: 2;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 500px auto;
    align-items: center;
    justify-content: space-between;
    background-color: #CBE0F6;
    padding: 16px 32px;
    row-gap: 8px;
}

.floating_menu_footer span:first-child{
    grid-column: 1;
    grid-row: 1;
    font-size: 20px;
    font-weight: bold;
}

.floating_menu_footer span:nth-child(2){
    grid-column: 1;
    grid-row: 2;
}

.floating_menu a{
    grid-row: 1/-1;
}

.nested-item{
    font-size: 20px;
    margin-top: 12px;
}


.nested-item span{
    font-weight: 300;
    font-size: 14px;
}

.nested-menu{
    position: absolute;
    width: 300px;
    border-left: 2px solid #3333332e;
    background-color: white;
    top: 0px;
    padding-left: 32px;
    left: 100%;
    height: 100%;
    opacity: 0;

    transition: all 0.3s ease-in-out;
}

.nested-menu.active{
    opacity: 1;
    z-index: 99999;
}

.new{
    padding: 4px 8px;
    background-color: #026964;
    color: #cbe0f6;
    border-radius: 20px;
    font-size: 12px;
    margin-left: 4px;
    display: inline-block;
}

.primary_cta{
    user-select: none;
    visibility: visible;
    pointer-events: all;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #232323;
    font-weight: 400;
    border: 1px solid transparent;
    text-align: center;
    transition: background-color .3s ease-in-out,filter .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out;
    background-color: #ff8d6e;
    border-color: #ff8d6e;
    border-width: 2px;
    border-radius: 57px;
    display: inline-flex;
    font-size: 16px;
    line-height: 29px;
    padding: 8px 16px;
    height: 45px;
    text-decoration: none;
}

.primary_cta.large{
    height: 57px;
    font-size: 18px;
}

.primary_cta:hover{
    background-color: #fec3b8;
    border-color: #ff8d6e;
}

.primary_cta.maxW{
    width: 100%;
}

.primary_cta.type2{
    border-radius: 8px;
}

.secondary_cta{
    display: inline-flex;
    column-gap: 8px;
    position: relative;
}

.secondary_cta.large{
    font-size: 18px;
}

.secondary_cta span{
    display: inline-flex;
}

.secondary_cta::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: -2px;
    width: 0%;
    height: 1px;
    background-color: #333333;
    transition: width .3s ease-in-out;
}

.secondary_cta:hover::before{
    width: 100%;
}

.cta_menu
{
    list-style-type: none;
    margin: 0px;
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    padding: 0px;
}

.cta_menu a{
    text-decoration: none;
    font-size: 18px;
    height: 45px;
    padding: 5px 20px;
    border-radius: 32px;
}

.cta_menu a:not(.primary_cta){
    border: 1px solid #026964;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

}

.cta_menu a:not(.primary_cta):hover{
    background-color: #026964;
    color: #cbe0f6;
}

.secondary-cta{
    text-decoration: none;
    font-size: 18px;
    height: 45px;
    padding: 5px 20px;
    border-radius: 32px;
    width: auto;
}

.secondary-cta{
    border: 1px solid #026964;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

}

.secondary-cta:hover{
    background-color: #026964;
    color: #cbe0f6;
}


.back_to_top{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #0269648e;
    position: fixed;
    right: 8px;
    bottom: 8px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;;

    transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.back_to_top img{
    transition: transform 0.3s ease-in-out;
}

.back_to_top:hover{
    background-color: #026964;

    > img{
        transform: translateY(-2px);
    }
}

.back_to_top.show{
    opacity: 1;
    visibility: visible;

    transition: opacity 0.3s ease-in-out, visibility 0s 0s, background-color 0.3s ease-in-out;
}

.menu_icon{
    display: none;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.mobile_menu{
    position: fixed;
    top: 136px;
    height: calc(100vh - 136px);
    width: 100%;
    background-color: white;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transform: translateX(100vw);

    transition: opacity 0.3s ease-in-out, visibility 0s .3s, transform 0.3s ease-in-out;
}

.mobile_menu .menu_description{
    background-color: #FAF6F1;
    padding: 8px;
    border-radius: 16px;
    margin: 8px;
}

.mobile_menu.active{
    opacity: 1;
    visibility: visible;
    transform: translateX(0vw);

    transition: opacity 0.3s ease-in-out, visibility 0s 0s, transform 0.3s ease-in-out;
}

body:has(.mobile_menu.active){
    overflow: hidden;
}

.mobile_menu .menu_item{
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile_menu .menu_item span{
    cursor: pointer;
}

.mobile_menu-page{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: calc(100vh - 137px);
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    opacity: 0;
    visibility: hidden;
    transform: translateX(100vw);

    transition: opacity 0.3s ease-in-out, visibility 0s .3s, transform 0.3s ease-in-out;
}

.mobile_menu-page.active{
    opacity: 1;
    visibility: visible;
    transform: translateX(0vw) !important;

    transition: opacity 0.3s ease-in-out, visibility 0s 0s, transform 0.3s ease-in-out;
}

.parent_heading{
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.parent_heading{
    cursor: pointer;
    font-size: 24px;
    font-weight: 400;
    padding: 8px 16px;
    border-bottom: 1px solid #3333332e;
}

.parent_heading img{
    transform: rotate(180deg);
}

footer{
    padding: 40px 0px;
}

footer a{
    color: white;
}

footer a:hover{
    text-decoration: underline;
}

.footer_menu_category{
    display: block;
    margin-bottom: 16px;
}

.footer_menu_category.depth-0{
    font-size: 24px;
}

.footer_menu_category.depth-1{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0px;
}

.footer_menu_item{
    margin-bottom: 8px;
    width: 224px;
}

.footer_menu_item:has(.footer_menu_category.depth-1){
    padding-left: 8px;
}

footer .container.menu{
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
}

footer .container.info{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

footer .container.info .contact_us{
    line-height: 30px;


    >b{
        font-size: 20px;
    }
}

footer .container.legal{
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #CBE0F6;
    margin-top: 20px;
}

footer .legal_menu ul{
    margin: 0px;
    padding: 0px;;
}

footer .legal_menu li a{
    font-weight: bold !important;
}

footer details{
    padding: 0 16px 24px;
    border-bottom: 1px solid hsla(0,0%,100%,.24);
}

footer summary{
    list-style-type: none;
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    cursor: pointer;
}

footer summary::-webkit-details-marker{
    display: none;
}

footer summary h6{
    font-size: 22px;
    font-weight: 400;
    color: white;
}


footer summary::after{
    content: '';
    width: 16px;
    height: 24px;
    background-image: url('./assets/images/chevron\ \(1\).svg');
    background-size: 16px 24px;
    background-repeat: no-repeat;
    transform: rotate(90deg) scale(0.75);
}

footer details ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-top: 16px;
}

footer .container.mobile{
    display: none;
}
footer a, footer p{
    font-weight: 300 !important;
}

.pll_langs_container.secondary{
    border-left: none;
    grid-column: 1/-1;
    width: 300px;
    margin: 0px auto;
}

.pll_langs_container.secondary .pll_lang_current{
    justify-content: space-between;
    border-radius: 16px;
    color: white;
    border: 1px solid #026964;
    background-color: rgba(255,255,255,.2);
}

.pll_langs_container.secondary .pll_lang_current:hover{
    border: 1px solid white;
}

.pll_langs_container.secondary .pll_langs{
    top: auto;
    bottom: calc(100% + 10px);
}

.container.small{
    width: 1140px;
    padding: 80px 0px;
}

h1{
    font-size: 4rem;
    font-weight: 300;
}

h2{
    font-size: 3rem;
    font-weight: 300;
}

button.action{
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 18px;
    position: relative;
    cursor: pointer;
}

button.action::before{
    content: "";
    position: absolute;
    left: 2%;
    top: 100%;
    width: 0%;
    height: 1px;
    background-color: #026964;

    transition: width 0.3s ease-in-out;
}

button.action:hover::before{
    width: 96%;
}

.mobile_menu_category {
    font-size: 20px;
}

.mobile_sub_menu_item:has(.mobile_sub_menu_category){
    margin-top: 16px;;
}

.mobile_sub_menu_item .mobile_sub_menu{
    margin-top: 0px;
}

@media (max-width: 1440px) {
    .container{
        width: 100%;
        --padding: 20px;
    }
}

@media (max-width: 1350px){
    .primary_menu{
        display: none;
    }

    .nav_container{
        grid-template-columns: auto 1fr auto;
        padding: 12px 0px;
    }

    .cta_menu_holder{
        margin-left: auto;
    }

    .menu_icon{
        display: block;
        margin-left: auto;
    }
}


@media (max-width: 1140px){
    .container.small{
        width: 100%;
        padding: 0px 12px;
    }
    footer .container.menu{
        display: none;
    }

    footer .container.info{
        flex-direction: column;
        row-gap: 8px;
    }

    footer .container.mobile{
        display: block;
    }
}

@media (max-width: 1024px){

    h1{
        font-size: 2.5rem;
    }

    p{
        font-size: 20px !important;
    }

    .mobile_menu .menu_description{
        font-size: 18px !important;
    }
}

@media (max-width: 650px){
    .cta_menu li:has(a:not(.primary_cta)){
        display: none;
    }

    .cta_menu a{
        height: 40px;
        font-size: 14px;
    }

    .top_menu_container{
        display: none;
    }

    .top_menu{
        justify-content: center;
    }

    .mobile_menu{
        top: 74px;
        height: calc(100vh - 74px);
    }

    .mobile_menu .cta_menu{
        display: block;
    }

    .mobile_menu .cta_menu a{
        justify-content: center;
    }
    footer .pll_langs_container{
        grid-column: 1/-1;
    }
}

@media (max-width: 500px){
    footer .container.info
    {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 16px;
    }

    .nav_container{
        column-gap: 8px;
    }

    .pll_langs_container.secondary{
        width: 100%;
        padding-left: 0px;
    }

    .pll_langs_container.secondary .pll_lang_current{
        padding: 8px 16px 8px 24px;
    }

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