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

.header {

    position: fixed;

    top: 0;

    right: 0;

    width: 100%;

    z-index: 9999;

    background: rgba(10,10,10,.70);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(212,175,55,.18);

    transition: .35s;

}

.header-container {

    width: 92%;

    max-width: 1500px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 100px;

}

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

.logo{

    width:110px;

    height:110px;

    border-radius:50%;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

    border:2px solid #D4AF37;

    flex-shrink:0;

    transition:.35s;

}

.logo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s;

}

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

.desktop-menu ul{

    display:flex;

    align-items:center;

    gap:42px;

    list-style:none;

    margin:0;

    padding:0;

}

.desktop-menu a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    position:relative;

    transition:.30s;

}

.desktop-menu a::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:.35s;

}

.desktop-menu a:hover{

    color:#D4AF37;

}

.desktop-menu a:hover::after{

    width:100%;

}

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

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.call-button{

    background:linear-gradient(135deg,#D4AF37,#F5D36C);

    color:#111;

    text-decoration:none;

    padding:13px 28px;

    border-radius:40px;

    font-weight:bold;

    transition:.35s;

    box-shadow:
    0 0 18px rgba(212,175,55,.35);

}

.call-button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 28px rgba(212,175,55,.65);

}

.mobile-button{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    cursor:pointer;

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

    color:#fff;

    font-size:22px;

}

.mobile-button:hover{

    background:rgba(212,175,55,.15);

}

/* ==========================================
            SCROLLED
========================================== */

.header.scrolled{

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

    box-shadow:
    0 10px 35px rgba(0,0,0,.45);

}

.header.scrolled .header-container{

    height:82px;

}

.header.scrolled .logo{

    width:90px;

    height:90px;

}

/* ==========================================
        Mobile Menu Like Desktop
========================================== */

@media(max-width:1100px){

    .header-container{

        width:96%;

        gap:15px;

    }

    .desktop-menu{

        display:block;

    }

    .desktop-menu ul{

        gap:18px;

        flex-wrap:wrap;

    }

    .desktop-menu a{

        font-size:14px;

    }

    .mobile-button{

        display:none !important;

    }

}

@media(max-width:768px){

    .header{

        position:sticky;
        top:0;

    }

    .header-container{

        width:95%;

        height:78px;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:0;

    }

    /* لوگو */

    .logo{

        width:62px;

        height:62px;

        border-width:1.5px;

    }

    /* منو */

    .desktop-menu{

        flex:1;

        display:flex;

        justify-content:center;

    }

    .desktop-menu ul{

        display:flex;

        justify-content:center;

        align-items:center;

        gap:10px;

        flex-wrap:nowrap;

    }

    .desktop-menu li{

        flex:none;

    }

    .desktop-menu a{

        font-size:11px;

        white-space:nowrap;

    }

    /* دکمه تماس */

    .header-right{

        margin-right:8px;

    }

    .call-button{

        display:flex;

        padding:8px 14px;

        font-size:11px;

        border-radius:25px;

    }

    /* همبرگری */

    .mobile-button{

        display:none !important;

    }

}