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

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

html,
body{
    width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Inter', sans-serif;
    background:#F5F7FB;
    color:#111827;
}


/* =========================
   CONTAINER
========================= */

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}


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

.header{
    width:100%;
    padding:24px 0;
}


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

.header .container{
    height:84px;

    background:#ffffff;

    border:1px solid #EAEFF5;
    border-radius:28px;

    padding:0 24px;

    display:flex;
    align-items:center;
}


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

.logo{
    display:flex;
    align-items:center;

    flex-shrink:0;

    text-decoration:none;
}

.logo img{
    height:36px;
    width:auto;
    display:block;
}


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

.menu{
    margin-left:42px;
}

.menu ul{
    display:flex;
    align-items:center;

    gap:34px;

    list-style:none;
}

.menu ul li a{
    text-decoration:none;

    font-size:15px;
    font-weight:600;

    color:#374151;

    transition:.2s;

    white-space:nowrap;
}

.menu ul li a:hover{
    color:#2563EB;
}


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

.header-right{
    margin-left:auto;

    display:flex;
    align-items:center;

    gap:14px;
}


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

.search-box{
    width:280px;
    height:50px;

    background:#F9FAFB;

    border:1px solid #E5E7EB;
    border-radius:18px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 16px;
}

.search-box input{
    width:100%;

    border:none;
    outline:none;

    background:transparent;

    font-size:14px;
    font-weight:500;

    color:#111827;
}

.search-box input::placeholder{
    color:#9CA3AF;
}


/* =========================
   BUTTONS
========================= */

.buttons{
    display:flex;
    align-items:center;

    gap:12px;
}

.btn{
    height:50px;

    padding:0 24px;

    border-radius:18px;

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

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:.2s;

    white-space:nowrap;
}

.btn-outline{
    background:#ffffff;
    border:1px solid #D1D5DB;

    color:#374151;
}

.btn-outline:hover{
    border-color:#2563EB;
    color:#2563EB;
}

.btn-primary{
    background:#2563EB;
    border:1px solid #2563EB;

    color:#ffffff;
}

.btn-primary:hover{
    background:#1D4ED8;
}


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

.mobile-menu-btn{
    width:48px;
    height:48px;

    border:none;

    background:#F3F4F6;

    border-radius:16px;

    display:none;
    align-items:center;
    justify-content:center;

    margin-left:auto;

    cursor:pointer;
}


/* =========================
   LAPTOP
========================= */

@media(max-width:1200px){

    .menu ul{
        gap:24px;
    }

    .search-box{
        width:220px;
    }

}


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

@media(max-width:992px){

    .menu{
        display:none;
    }

    .header-right{
        display:none;
    }

    .mobile-menu-btn{
        display:flex;
    }

}


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

@media(max-width:768px){

    .header{
        padding:16px 0;
    }

    .header .container{
        height:74px;

        border-radius:22px;

        padding:0 18px;
    }

    .logo img{
        height:32px;
    }

}