/*=====================================
RESET
======================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#081426;
    --secondary:#10284d;
    --accent:#FFC928;
    --white:#ffffff;
    --text:#d6dbe5;
    --border:rgba(255,255,255,.08);

}

body{

    font-family:"Inter",sans-serif;
    background:#07111f;
    color:#fff;

}

a{

    text-decoration:none;

}

.container{

    width:min(1400px,92%);
    margin:auto;

}

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

.topbar{

    background:#06101f;
    border-bottom:1px solid rgba(255,255,255,.08);

}

.topbar .container{

    height:45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-left,
.top-right{

    display:flex;
    align-items:center;
    gap:25px;

}

.topbar a,
.topbar span{

    color:#d7dde8;
    font-size:14px;

}

.topbar i{

    color:var(--accent);
    margin-right:6px;

}

.topbar a:hover{

    color:var(--accent);

}

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

.header{

    position:sticky;

    top:0;

    z-index:9999;

    background:rgba(8,20,38,.95);

    backdrop-filter:blur(15px);

    border-bottom:1px solid var(--border);

}

.header .container{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:190px;

    display:block;

}

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

.navbar ul{

    display:flex;

    list-style:none;

    gap:35px;

}

.navbar a{

    color:#fff;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.navbar a:hover{

    color:var(--accent);

}

.navbar a.active{

    color:var(--accent);

}

.navbar a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s;

}

.navbar a:hover::after,
.navbar a.active::after{

    width:100%;

}

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

.header-right{

    display:flex;

    align-items:center;

    gap:15px;

}

/*=====================================
SEARCH BUTTON
======================================*/

.msearch-btn{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:#12233f;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

}

.msearch-btn i{

    font-size:17px;

}

.msearch-btn:hover{

    background:var(--accent);

    color:#111;

    transform:translateY(-2px);

}


/*=====================================
LOCATION BUTTON
======================================*/

.location-btn{

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    background:#12233f;

    color:#fff;

    height:46px;

    padding:0 20px;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.location-btn i{

    color:var(--accent);

}

.location-btn:hover{

    background:var(--accent);

    color:#111;

}

.location-btn:hover i{

    color:#111;

}


/*=====================================
LOGIN BUTTON
======================================*/

.log-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    height:46px;

    padding:0 24px;

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

    border-radius:12px;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.log-btn:hover{

    border-color:var(--accent);

    color:var(--accent);

}


/*=====================================
REGISTER BUTTON
======================================*/

.register-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    height:46px;

    padding:0 24px;

    background:var(--accent);

    color:#111;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.register-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(255,201,40,.35);

}


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

.header-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#12233f;

    color:#fff;

    transition:.3s;

}

.header-icon i{

    font-size:18px;

}

.header-icon:hover{

    background:var(--accent);

    color:#111;

    transform:translateY(-2px);

}

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

.profile-dropdown{

    position:relative;

}


/*=====================================
PROFILE BUTTON
======================================*/

.profile-btn{

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

}

.profile-user{

    display:flex;

    align-items:center;

    gap:12px;

    background:#12233f;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    transition:.3s;

}

.profile-user:hover{

    background:var(--accent);

    color:#111;

}

.profile-user i{

    font-size:34px;

}

.profile-user span{

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

}


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

.profile-menu{

    position:absolute;

    top:65px;

    right:0;

    width:260px;

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:9999;

}

.profile-dropdown:hover .profile-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*=====================================
PROFILE MENU ITEMS
======================================*/

.profile-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    color:#333;

    font-size:15px;

    transition:.3s;

}

.profile-menu a:hover{

    background:#f3f7ff;

    color:#0d6efd;

}

.profile-menu a i{

    width:22px;

    text-align:center;

    color:#0d6efd;

    font-size:16px;

}

.profile-menu hr{

    border:none;

    border-top:1px solid #ececec;

}


/*=====================================
LOGOUT
======================================*/

.profile-menu a:last-child{

    color:#dc3545;

}

.profile-menu a:last-child i{

    color:#dc3545;

}

.profile-menu a:last-child:hover{

    background:#fff3f3;

}

/*=====================================
TABLET
======================================*/

@media (max-width:1200px){

    /* Top Bar */

    .topbar{

        display:none;

    }

    /* Logo */

    .logo img{

        width:170px;

    }

    /* Header */

    .header .container{

        height:75px;

    }

    /* Navigation */

    .navbar{

        display:none;

    }

    /* Header Right */

    .header-right{

        display:flex;

        align-items:center;

        gap:10px;

        margin-left:auto;

    }


    

}


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

@media (max-width:768px){

    /* Top bar */
    .topbar{
        display:none;
    }

    /* Header */
    .header .container{
        height:70px;
    }

    /* Logo */
    .logo img{
        width:150px;
        padding-top:10px;
    }

    /* Hide desktop navigation */
    .navbar{
        display:none;
    }

    /* Show right section */
    .header-right{
        display:flex;
        align-items:center;
        gap:10px;
        margin-left:auto;
    }

    /* Hide desktop buttons */
    .msearch-btn,
    .location-btn,
    .register-btn{
        display:none;
    }

    /* Login button */
    .log-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:8px 16px;
        font-size:14px;
        border-radius:8px;
    }

    /* Logged-in icons */
    .header-icon{
        width:38px;
        height:38px;
        font-size:16px;
    }

    /* Profile */
    .profile-user{
        background:transparent;
        padding:0;
    }

    .profile-user span{
        display:none;
    }

    .profile-user i{
        font-size:34px;
        color:#fff;
    }

    /* Hide desktop hamburger */
    .mobile-btn{
        display:none;
    }

    
}

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

@media (max-width:1200px){

    .navbar{

        position:fixed;

        top:0;

        left:-300px;

        width:280px;

        height:100vh;

        background:#081426;

        z-index:99999;

        transition:.35s;

        padding:25px;

        overflow-y:auto;

        border-right:1px solid rgba(255,255,255,.08);

        display:block;

    }

    .navbar.show{

        left:0;

    }

    .navbar ul{

        display:flex;

        flex-direction:column;

        gap:22px;

        margin-top:90px;

        list-style:none;

    }

    .navbar ul li{

        width:100%;

    }

    .navbar ul li a{

        display:flex;

        align-items:center;

        width:100%;

        color:#fff;

        font-size:17px;

        font-weight:500;

        padding:14px 16px;

        border-radius:12px;

        transition:.3s;

    }

    .navbar ul li a:hover{

        background:#12233f;

        color:var(--accent);

    }

    .navbar ul li a.active{

        background:var(--accent);

        color:#111;

        font-weight:700;

    }

}

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

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99998;

}

.menu-overlay.show{

    opacity:1;

    visibility:visible;

}

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

.mobile-menu-header{

    position:absolute;

    top:20px;

    left:20px;

    right:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.mobile-menu-header img{

    width:160px;

}

.close-menu{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#12233f;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

.close-menu:hover{

    background:var(--accent);

    color:#111;

}


@media (max-width:768px){

    .dropdown-icon{
        font-size:12px;
        margin-left:2px;
    }

}