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

:root{

    --header-height:90px;

}


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

.top-bar{

    background:var(--primary);

    color:#fff;

    font-size:.9rem;

    padding:10px 0;

}

.top-bar-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-left a,
.top-right a{

    color:#fff;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.top-left a:hover,
.top-right a:hover{

    color:var(--secondary);

}


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

#header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:#fff;

    transition:.35s;

    border-bottom:1px solid rgba(0,0,0,.05);

}

#header.sticky{

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}


/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    height:var(--header-height);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}


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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:58px;

    height:58px;

    object-fit:contain;

}

.logo h2{

    font-size:1.5rem;

    color:var(--primary);

    line-height:1;

}

.logo span{

    display:block;

    margin-top:5px;

    color:var(--gray);

    font-size:.82rem;

}


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

.desktop-nav{

    margin-left:auto;

}

.desktop-nav ul{

    display:flex;

    align-items:center;

    gap:32px;

}

.desktop-nav li{

    position:relative;

}

.desktop-nav a{

    color:var(--primary);

    font-weight:500;

    transition:.3s;

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding:6px 0;

}

.desktop-nav a:hover{

    color:var(--secondary);

}


/* ==========================================================
   UNDERLINE ANIMATION
========================================================== */

.desktop-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.desktop-nav a:hover::after,
.desktop-nav .active::after{

    width:100%;

}

.desktop-nav .active{

    color:var(--secondary);

}


/* ==========================================================
   RIGHT SIDE
========================================================== */

.nav-right{

    display:flex;

    align-items:center;

    gap:20px;

}


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

.nav-right .btn-primary{

    padding:14px 28px;

    font-size:.95rem;

}


/* ==========================================================
   HAMBURGER
========================================================== */

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    border:none;

    background:none;

    cursor:pointer;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:var(--primary);

    border-radius:10px;

    transition:.35s;

}


/* ==========================================================
   HAMBURGER ACTIVE
========================================================== */

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

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

}

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

    opacity:0;

}

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

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

}

/* ==========================================================
   DESKTOP DROPDOWN
========================================================== */

.dropdown{

    position:relative;

}

.dropdown>a i{

    font-size:.75rem;

    transition:.3s;

}

.dropdown:hover>a i{

    transform:rotate(180deg);

}

.dropdown-menu{

    position:absolute;

    top:130%;

    left:0;

    min-width:300px;

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

    backdrop-filter:blur(20px);

    border-radius:20px;

    padding:15px;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

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

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:14px;

    color:var(--primary);

    transition:.3s;

}

.dropdown-menu a::after{

    display:none;

}

.dropdown-menu a:hover{

    background:var(--light-gray);

    color:var(--secondary);

    transform:translateX(8px);

}

.dropdown-menu i{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(200,165,82,.15);

    color:var(--secondary);

}



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

.nav-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .45);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index: 1000;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}


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

.mobile-nav {
    position: fixed;

    top: 0;
    right: 0;

    width: 360px;
    max-width: 90vw;

    height: 100dvh;

    background: #fff;

    z-index: 1001;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 0;

    transform: translateX(100%);

    visibility: hidden;

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

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

    -webkit-overflow-scrolling: touch;
}

.mobile-nav.active {
    transform: translateX(0);
    visibility: visible;
}


/* ==========================================================
   PREVENT BODY SCROLL WHEN MENU IS OPEN
========================================================== */

body.mobile-menu-open {
    overflow: hidden;
}


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

.mobile-header {
    position: sticky;

    top: 0;

    z-index: 5;

    display: flex;

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

    gap: 15px;

    padding: 18px 20px;

    background: #fff;

    border-bottom: 1px solid #eee;

    margin: 0;
}


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

.mobile-logo {
    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    min-width: 0;

    flex: 1;
}

.mobile-logo img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    flex-shrink: 0;
}

.mobile-logo h3 {
    margin: 0;

    color: var(--primary);

    font-size: 1.1rem;

    line-height: 1.2;

    white-space: nowrap;
}

.mobile-logo span {
    display: block;

    margin-top: 3px;

    color: var(--gray);

    font-size: .75rem;
}


/* ==========================================================
   MOBILE BACK BUTTON
========================================================== */

.mobile-back-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    flex-shrink: 0;

    border: none;

    background: transparent;

    color: var(--primary);

    font-size: 14px;

    cursor: pointer;

    padding: 8px 4px;
}

.mobile-back-btn i {
    font-size: 15px;
}


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

.mobile-links {
    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0;

    margin: 0;

    padding: 12px 20px 0;
}

.mobile-links li {
    width: 100%;

    border-bottom: 1px solid #f0f0f0;
}

.mobile-links a {
    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 5px;

    color: var(--primary);

    font-weight: 500;

    text-decoration: none;

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

.mobile-links a:hover {
    color: var(--secondary);

    padding-left: 10px;

    background: rgba(0, 0, 0, .015);
}

.mobile-links a i {
    width: 24px;

    min-width: 24px;

    text-align: center;

    color: var(--secondary);
}


/* ==========================================================
   MOBILE SERVICES BUTTON
========================================================== */

.mobile-dropdown-btn {
    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px 5px;

    border: none;

    background: transparent;

    color: var(--primary);

    font: inherit;

    font-weight: 500;

    cursor: pointer;

    text-align: left;
}

.mobile-dropdown-btn > span {
    display: flex;

    align-items: center;

    gap: 13px;
}

.mobile-dropdown-btn > span i {
    width: 24px;

    min-width: 24px;

    text-align: center;

    color: var(--secondary);
}

.mobile-dropdown-btn .arrow {
    color: var(--primary);

    font-size: .75rem;

    transition: transform .3s ease;
}

.mobile-dropdown.open .mobile-dropdown-btn .arrow {
    transform: rotate(180deg);
}


/* ==========================================================
   MOBILE SERVICES CONTENT
========================================================== */

.mobile-dropdown-content {
    max-height: 0;

    overflow: hidden;

    padding: 0;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease;
}

.mobile-dropdown.open .mobile-dropdown-content {
    max-height: 600px;

    opacity: 1;
}


/* ==========================================================
   MOBILE SERVICE LINKS
========================================================== */

.mobile-dropdown-content a {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 44px;

    padding: 10px 8px 10px 38px;

    color: var(--gray);

    font-size: .88rem;

    text-decoration: none;

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

.mobile-dropdown-content a:hover {
    color: var(--secondary);

    padding-left: 43px;
}

.mobile-dropdown-content a i {
    width: 18px;

    min-width: 18px;

    color: var(--secondary);

    text-align: center;
}


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

.mobile-contact {
    margin: 25px 20px 0;

    padding: 20px 0 5px;

    border-top: 1px solid #eee;
}

.mobile-contact a {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: var(--gray);

    text-decoration: none;

    font-size: .9rem;
}

.mobile-contact a:hover {
    color: var(--secondary);
}

.mobile-contact i {
    width: 20px;

    color: var(--secondary);

    text-align: center;
}


/* ==========================================================
   MOBILE BOTTOM BUTTON
========================================================== */

.mobile-btn {
    width: calc(100% - 40px);

    margin: 15px 20px 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-align: center;
}


/* ==========================================================
   HAMBURGER
========================================================== */

.menu-toggle {
    width: 44px;
    height: 44px;

    display: none;

    flex-direction: column;

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

    gap: 6px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

    flex-shrink: 0;
}

.menu-toggle span {
    width: 26px;
    height: 3px;

    background: var(--primary);

    border-radius: 10px;

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

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

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

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


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

@media (max-width: 991px) {

    .desktop-nav {
        display: none;
    }

    .nav-right {
        display: flex;

        align-items: center;

        gap: 8px;
    }

    .nav-right > .btn-primary {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

}


/* ==========================================================
   TABLETS
========================================================== */

@media (max-width: 768px) {

    .top-bar {
        display: none;
    }

    :root {
        --header-height: 75px;
    }

    .navbar {
        height: 75px;

        gap: 10px;
    }

    .logo {
        min-width: 0;

        gap: 10px;
    }

    .logo img {
        width: 46px;
        height: 46px;
    }

    .logo h2 {
        font-size: 1.2rem;

        white-space: nowrap;
    }

    .logo span {
        display: none;
    }

}


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

@media (max-width: 576px) {

    :root {
        --header-height: 70px;
    }

    .navbar {
        height: 70px;

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

    .logo {
        gap: 8px;
    }

    .logo img {
        width: 40px;
        height: 40px;
    }

    .logo h2 {
        font-size: 1.05rem;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }

    .menu-toggle span {
        width: 24px;
    }

    .mobile-nav {
        width: 100%;
        max-width: 100vw;
    }

    .mobile-header {
        padding: 15px;
    }

    .mobile-links {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mobile-contact {
        margin-left: 15px;
        margin-right: 15px;
    }

    .mobile-btn {
        width: calc(100% - 30px);

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

}


/* ==========================================================
   EXTRA SMALL DEVICES
========================================================== */

@media (max-width: 380px) {

    .logo h2 {
        font-size: .95rem;
    }

    .mobile-logo img {
        width: 42px;
        height: 42px;
    }

    .mobile-logo h3 {
        font-size: 1rem;
    }

    .mobile-logo span {
        font-size: .7rem;
    }

    .mobile-back-btn span {
        display: none;
    }

}


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

.mobile-nav::-webkit-scrollbar {
    width: 5px;
}

.mobile-nav::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-nav::-webkit-scrollbar-thumb {
    background: rgba(70, 86, 163, .35);

    border-radius: 10px;
}

.mobile-nav {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(70, 86, 163, .35)
        transparent;
}


/* ==========================================================
   DESKTOP ONLY
========================================================== */

@media (min-width: 992px) {

    .mobile-nav,
    .nav-overlay {
        display: none;
    }

    .menu-toggle {
        display: none;
    }

}

.dropdown-menu {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: --secondary;
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}