@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Outfit',sans-serif;
}

body{
    overflow-x:hidden;
}

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

.top-header{
    height:65px;
    background:#D4AF37;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 60px;
}

.top-left{
    display:flex;
    align-items:center;
    gap:35px;
}

.info-box{
    display:flex;
    align-items:center;
    gap:15px;
    color:#fff;
    font-size:20px;
    font-weight:700;
}

.info-box i{
    font-size:22px;
}

/* =========================
   SOCIAL ICONS
========================= */

.social-icons{
    display:flex;
    align-items:center;
    gap:12px;
}

.social-icons a{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#06352b;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:18px;
    text-decoration:none;
    transition:.4s;
}

.social-icons a:hover{
    background:#fff;
    color:#D4AF37;
    transform:translateY(-5px);
}

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

.navbar{
    height:95px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 60px;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 0 20px rgba(0,0,0,.08);
    transition:all .4s ease;
    animation:headerFade .8s ease;
}

.logo{
    display:flex;
    align-items:center;
    min-width:240px;
    margin-left:-40px;
}

.logo img{
    height:110px;
    width:auto;
    max-width:200px;
    object-fit:contain;
    display:block;
}

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

.menu{
    display:flex;
    align-items:center;
    list-style:none;
    gap:42px;
}

.menu li{
    position:relative;
}

.menu li a{
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    color:#062f27;
    display:flex;
    align-items:center;
    gap:8px;
    transition:.4s;
}

.menu li:hover > a{
    color:#D4AF37;
}

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

.submenu{
    position:absolute;
    top:100%;
    left:0;

    width:650px; /* dropdown width */

    background:#fff;
    padding:20px;

    border-top:4px solid #D4AF37;

    opacity:0;
    visibility:hidden;

    transform:translateY(25px);

    transition:.4s ease;

    box-shadow:0 20px 40px rgba(0,0,0,.12);
    border-radius:0 0 18px 18px;

    display:grid;
    grid-template-columns:1fr 1fr; /* 2 columns */
    gap:5px 2px;
}


.dropdown:hover .submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.submenu li{
    padding:12px 25px;
    transition:.3s;
}

.submenu li:hover{
    padding-left:35px;
    background:#fff5ef;
}
.submenu{
    list-style:none;
}

.submenu li{
    position:relative;
    padding:12px 25px 12px 40px;
}

.submenu li::before{
    content:"➜";
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#D4AF37;
    font-size:14px;
    font-weight:bold;
}
.submenu li a{
    font-size:16px;
    color:#062f27;
}

/* Audit */
.menu > li:nth-child(4) .submenu{
    left:auto;
    right:0;
}
.menu > li:nth-child(5) .submenu{
    left:auto;
    right:0;
}

/* Accounting */
.menu > li:nth-child(6) .submenu{
    left:auto;
    right:0;
}

/* =========================
   CALL BOX
========================= */


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

.navbar.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:85px;
    background:#fff;
    z-index:9999;

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

    animation:slideDown .4s ease;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes slideDown{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }

}

@keyframes headerFade{

    from{
        opacity:0;
        transform:translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================
   HERO DEMO
========================= */

.hero{
    height:100vh;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    ),
    url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=2070');

    background-size:cover;
    background-position:center;
}

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

@media(max-width:1200px){

    .menu{
        gap:25px;
    }

    .top-left{
        gap:20px;
    }

}

@media(max-width:992px){

    .top-header{
        display:none;
    }

    .call-box{
        display:none;
    }

    .navbar{
        padding:0 20px;
    }

    .menu{
        gap:18px;
    }

    .menu li a{
        font-size:14px;
    }

}

@media(max-width:768px){

    .navbar{
        height:80px;
    }

    .logo img{
        height:45px;
    }

}




/* By default mobile menu hidden */
.mobile-toggle{
    display:none;
}

/* Mobile View */
@media (max-width: 992px){

    .top-header{
        display:none;
    }

    .menu{
        display:none !important;
    }

    .navbar{
        padding:0 20px;
    }

    .logo{
        margin-left:0;
        min-width:auto;
    }

    .logo img{
        height:60px;
    }

    .mobile-toggle{
        display:flex;
        width:45px;
        height:45px;
        background:#D4AF37;
        color:#fff;
        justify-content:center;
        align-items:center;
        border-radius:8px;
        cursor:pointer;
        font-size:22px;
    }
    .info-box-mobile{
    margin-top: 20px;
    display:flex;
    align-items:center;
    gap:2px;
    justify-content: center;
    color:#050505;
    font-size:15px;
    font-weight:900;
}

}














.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);

    opacity:0;
    visibility:hidden;

    transition:.4s;
    z-index:9998;
}

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

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    max-width:90%;

    height:100vh;

    background:#fff;

    z-index:9999;

    transition:.4s ease;

    overflow:auto;
}

.mobile-menu.active{
    right:0;
}

.mobile-menu-header{

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

    padding:20px;

    border-bottom:1px solid #eee;
}

.mobile-menu-header img{
    height:50px;
}

.mobile-close{
    font-size:22px;
    cursor:pointer;
}

.mobile-nav{
    list-style:none;
}

.mobile-nav li{
    border-bottom:1px solid #eee;
}

.mobile-nav li a{

    display:block;

    padding:16px 20px;

    text-decoration:none;

    color:#062f27;

    font-weight:600;
}


.mobile-link{

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

    padding:16px 20px;

    cursor:pointer;

    font-weight:600;
}

.mobile-icon{
    font-size:22px;
    color:#D4AF37;
}

.mobile-submenu{

    max-height:0;

    overflow:hidden;

    transition:.4s ease;

    background:#fafafa;
}

.mobile-submenu.show{

    max-height:500px;
}

.mobile-submenu li{

    border:none;
}

.mobile-submenu li a{

    padding:12px 35px;

    display:block;
}




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


@media (max-width:992px){
    
.mobile-contact{
    padding:25px 20px;
    background:#f8f8f8;
}

.mobile-contact-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
}

.mobile-contact-item i{
    color:#D4AF37;
    font-size:18px;
    margin-top:3px;
}

.mobile-contact-item a,
.mobile-contact-item span{
    color:#062f27;
    text-decoration:none;
    font-size:14px;
    line-height:1.6;
    word-break:break-word;
}

    .mobile-social-icons{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:12px;
        margin-top:20px;
    }

    .mobile-social-icons a{
        width:46px !important;
        height:46px !important;

        border-radius:50%;
        background:#06352b;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;

        padding:0 !important;
        margin:0 !important;

        color:#fff !important;
        text-decoration:none;
        font-size:18px;
        line-height:1;
    }

    .mobile-social-icons a i{
        display:block !important;

        color:#fff !important;
        font-size:18px !important;

        width:auto !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        line-height:1 !important;
    }

    .mobile-social-icons a:hover{
        background:#D4AF37 !important;
    }

}