/*=========================================
        HOUSETHAT PREMIUM NAVBAR
=========================================*/

:root{

    --gold:#C79A46;
    --white:#F5F2EB; 
    --dark:#111111;

}
 

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

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

.ht-navbar{

    position:fixed;

    top:22px;
    left:50%;

    transform:translateX(-50%);

    width:94%;

    height:62px;

background:rgba(17,17,17,.92);
/* or simply */
background:var(--dark);

    border-radius:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 28px;

    z-index:9999;

    transition:.4s;

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

}

.ht-navbar.scrolled{

    top:14px;

    height:56px;

    backdrop-filter:blur(20px);

}

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

.ht-brand-wrap{

    display:flex;

    align-items:center;

    gap:18px;

}

.ht-logo img{

    width:34px;

    display:block;

}

.ht-divider{

    width:1px;

    height:28px;

    background:rgba(245,242,235,.18);

}

.ht-brand{

    text-decoration:none;

    color:var(--white);

    font-family:'Inter',sans-serif;

    font-size:15px;

    letter-spacing:.28em;

    font-weight:500;

}

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

.ht-nav{

    display:flex;

    align-items:center;

    gap:34px;

}

.ht-nav>a,

.ht-dropdown-btn{

    text-decoration:none;

     color:var(--white);

    font-size:13px;

    font-family:'Inter',sans-serif;

    font-weight:400;

    transition:.35s;

    display:flex;

    align-items:center;

    gap:7px;

}

.ht-nav>a:hover,

.ht-dropdown-btn:hover{

    color:var(--gold);

}

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

.ht-dropdown{

    position:relative;

}

.ht-arrow{

    font-size:11px;

    transition:.35s;

}

.ht-dropdown:hover .ht-arrow{

    transform:rotate(45deg);

}

.ht-dropdown-menu{

    position:absolute;

    top:45px;

    left:-18px;

    min-width:240px;

     background:#181818;
    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:15px 0;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(18px);

    transition:.35s;

}

.ht-dropdown:hover .ht-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.ht-dropdown-menu a{

    display:block;

    padding:12px 22px;

  color:var(--white);
    text-decoration:none;

    font-size:12px;

    transition:.3s;

}

.ht-dropdown-menu a:hover{

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

    color:var(--gold);

    padding-left:28px;

}

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

.ht-menu-btn{

    display:none;

    width:42px;

    height:42px;

    background:none;

    border:none;

    cursor:pointer;

}

.ht-menu-btn span{

    display:block;

    width:26px;

    height:2px;

     background:var(--white);

    margin:6px auto;

}

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

.ht-mobile-nav{

    position:fixed;

    top:90px;

    left:-100%;

    width:290px;

       height:calc(100vh - 100px);
border-radius:24px;
         margin-left:3%;


   background:#181818;
    padding:110px 35px;

    transition:.4s;

    z-index:9998;

    overflow:auto;

}

.ht-mobile-nav.active{

    left:0;

}

.ht-mobile-nav>a,

.ht-mobile-nav summary{

    display:block;

     color:var(--white);
    text-decoration:none;

    font-size:15px;

    padding:16px 0;

    cursor:pointer;

}

.ht-mobile-nav details a{

    display:block;

    margin-left:18px;

    padding:10px 0;

    font-size:14px;

    text-decoration:none;

   color:rgba(245,242,235,.65);
}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:992px){

    .ht-navbar{

        width:94%;

        top:18px;

        left:50%;

        transform:translateX(-50%);

        height:60px;

        padding:0 20px;

        border-radius:50px;

      background:rgba(17,17,17,.95);
        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

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

    }

    .ht-nav{

        display:none;

    }

    .ht-menu-btn{

        display:block;

    }

    .ht-brand{

        font-size:14px;

        letter-spacing:.30em;

    }

    .ht-logo img{

        width:28px;

    }

}