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

/* Entire top row */

#header [data-device="desktop"] [data-row="top"]{

    background: var(--primary);

}

nav[class*=menu] li[class*=current-menu-]>.ct-menu-link, nav[class*=menu] li[class*=current-menu-]>.ct-sub-menu-parent{
    color:var(--secondary)!important;
}

/* Full width */

#header [data-device="desktop"] [data-row="top"]{

    width:100%;
     background-color: var(--primary);

}

/* Container */

#header [data-device="desktop"] [data-row="top"] > .ct-container{

    max-width:var(--container);

    margin:auto;

    min-height:48px;
    background-color: var(--primary);
}

/* Columns */

#header [data-device="desktop"] [data-row="top"] [data-column]{

    display:flex;

    align-items:center;
     background-color: var(--primary);

}

/* Left */

.elite-topbar{

    width:100%;
    margin-bottom: 0px !important;
 
}

.elite-topbar-left{

    display:flex;

    align-items:center;

    gap:28px;

    color:var(--white);

}

.elite-topbar-left span{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--white);

    font-size:var(--fs-sm);

    font-weight:500;

}


@media (max-width: 768px) {

    .elite-topbar-left{
        gap: 16px;
    }

    .elite-topbar-left span{
        font-size: 12px;
        gap: 6px;
    }

}


@media (max-width:768px){

    .elite-topbar{
        padding:0;
    }

    .elite-topbar-left{
        gap:10px;
        padding:8px 10px;
    }

    .elite-topbar-left span{
        font-size:11px;
    }
    
    #header [data-column="end"]>[data-items="primary"]{
    justify-content:center;
}

}
/* Right */

/* Social container */
#header .ct-header-socials .ct-social-box{
    display:flex;
    align-items:center;
    gap:18px;
}

/* Social link */
#header .ct-header-socials .ct-social-box a{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--white);
    transition:var(--transition);
}

/* SVG */
#header .ct-header-socials .ct-social-box svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

/* Hover */
#header .ct-header-socials .ct-social-box a:hover{
    color:var(--secondary);
    transform:translateY(-2px);
}

.ct-social-box a:hover{

    color:var(--secondary);

}


/* Mobile    */


#header [data-device="mobile"] [data-row="top"]{

    background: var(--primary);

}

#header [data-device="mobile"] [data-row="top"] > .ct-container [data-column="end"]{
    display: none;
}





/*  Middle      */

#header [data-row*=middle]{
 background-color: #ffffff;   
 height:90px;
}


/* 1. Control the Logo Image Size */
.site-logo-container img, 
.site-branding img {
    max-height: 60px !important; /* Adjust this value (e.g., 50px, 60px) to make your logo bigger/smaller */
    width: auto !important;
    height: auto !important;
}

/* 2. Control the Header Height / Padding */
[data-row="middle"] {
    --header-row-height: 80px; /* Change this value to make your header taller or shorter */
    min-height: var(--header-row-height);
    display: flex;
    align-items: center;
}

/* Ensure inner container stretches properly */
[data-row="middle"] > .ct-container {
    width: 100%;
}