/*=====================================
FIXED HEADER - FINAL
======================================*/

.header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:90px;

    display:flex;
    flex-direction:row !important;

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

    padding:0 8%;

    background:#0b0b12;

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

    box-sizing:border-box;

    z-index:9999;
}

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

.logo{
    display:flex;

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

    width:60px;
    height:60px;

    flex-shrink:0;

    text-decoration:none;
}

.logo img{
    width:60px;
    height:60px;

    display:block;

    object-fit:cover;

    border-radius:50%;

    transition:.3s ease;
}

.logo:hover img{
    transform:scale(1.08);
}

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

.navbar{
    display:flex !important;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:45px;

    margin-left:auto;
    margin-right:40px;
}

.navbar a{
    position:relative;

    color:#fff;

    text-decoration:none;

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

    white-space:nowrap;

    transition:.3s ease;
}

.navbar a:hover{
    color:#ff4f8b;
}

.navbar a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#ff4f8b;

    transition:.3s ease;
}

.navbar a:hover::after{
    width:100%;
}

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

.header-btn{
    display:inline-flex;

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

    width:170px;
    height:44px;

    padding:0;

    background:#ff4f8b;
    color:#fff;

    text-decoration:none;

    border-radius:50px;

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

    white-space:nowrap;

    flex-shrink:0;

    transition:.3s ease;
}

.header-btn:hover{
    background:#ff6699;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255,79,139,.30);
}
/*=====================================
BODY
======================================*/

body{
    margin:0;

    padding-top:90px;

    background:#0b0b12;

    font-family:Arial, Helvetica, sans-serif;
}

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

@media(max-width:1100px){

    .header{
        padding:0 4%;
    }

    .navbar{
        gap:25px;
        margin-right:25px;
    }

    .navbar a{
        font-size:15px;
    }

    .header-btn{
        width:180px;
        font-size:14px;
    }

}

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

@media(max-width:768px){

    .header{
        height:auto;
        min-height:70px;

        padding:10px 20px;

        flex-wrap:wrap;
    }

    .logo{
        width:50px;
        height:50px;
    }

    .logo img{
        width:50px;
        height:50px;
    }

    .navbar{
        width:100%;

        order:3;

        margin:10px 0 0;

        gap:15px;

        flex-wrap:wrap;

        justify-content:center;
    }

    .navbar a{
        font-size:14px;
    }

    .header-btn{
        width:180px;
        height:45px;

        font-size:14px;
    }

    body{
        padding-top:130px;
    }

}

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

@media(max-width:480px){

    .header{
        padding:10px 15px;
    }

    .navbar{
        gap:10px;
    }

    .navbar a{
        font-size:13px;
    }

    .header-btn{
        width:160px;
        height:42px;

        font-size:13px;
    }

}