.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:55px;

height:55px;

border-radius:50%;

}

.logo span{

font-size:28px;

font-weight:700;

color:#D4AF37;

}

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

.nav-dropdown {

    position: relative;

}


/* SERVICES BUTTON */

.nav-dropdown-main {

    display: flex;

    align-items: center;

    gap: 6px;

}


/* ARROW */

.dropdown-arrow {

    font-size: 15px;

    color: #D4AF37;

    transition: .3s;

}


/* DROPDOWN MENU */

.nav-dropdown-menu {

    position: absolute;

    top: 100% ;

    left: 50%;

    transform: translateX(-50%) translateY(0);

    min-width: 180px;

    padding: 10px;

    background: #111;

    border: 1px solid rgba(212, 175, 55, .35);

    border-radius: 12px;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: all .3s ease;

    z-index: 9999;

}


/* DROPDOWN LINKS */

.nav-dropdown-menu a {

    display: block;

    padding: 11px 15px;

    color: #ddd;

    text-decoration: none;

    font-size: 14px;

    border-radius: 8px;

    transition: .25s;

}


/* HOVER */

.nav-dropdown-menu a:hover {

    background: #D4AF37;

    color: #111;

}


/* SHOW ON HOVER */

.nav-dropdown:hover .nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

}


/* ARROW ROTATE */

.nav-dropdown:hover .dropdown-arrow {

    transform: rotate(180deg);

}