/*==========================================
  HEADER - SIMAR
==========================================*/

.header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    transition:.4s ease;
}

.header.scrolled{
    background:rgba(3,27,52,.92);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(0,0,0,.18);
}

.container{
    width:min(92%,1350px);
    margin:auto;
}

.navbar{
    height:95px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

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

.logo img{

    width:145px;

    transition:.4s;

}

.logo:hover img{

    transform:scale(1.05);

}

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

.nav-menu{

    display:flex;

    align-items:center;

    gap:45px;

}

.nav-menu a{

    position:relative;

    color:#fff;

    font-weight:500;

    font-size:16px;

    transition:.3s;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#00d4ff;

    transition:.35s;

}

.nav-menu a:hover{

    color:#00d4ff;

}

.nav-menu a:hover::after{

    width:100%;

}

/*==========================================
BOUTON
==========================================*/

.btn-login{

display:inline-flex;

justify-content:center;

align-items:center;

padding:16px 32px;

border-radius:50px;

background:linear-gradient(135deg,#0077ff,#00d4ff);

color:white;

font-weight:600;

transition:.4s;

box-shadow:0 10px 25px rgba(0,140,255,.25);

}

.btn-login:hover{

transform:translateY(-4px);

box-shadow:0 18px 35px rgba(0,140,255,.35);

}

/*==========================================
HAMBURGER
==========================================*/

.menu-toggle{

display:none;

width:45px;

height:45px;

cursor:pointer;

justify-content:center;

align-items:center;

flex-direction:column;

gap:6px;

}

.menu-toggle span{

width:28px;

height:3px;

background:#fff;

border-radius:5px;

transition:.4s;

}

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

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:100%;

height:100vh;

background:#031B34;

z-index:99999;

padding:35px;

transition:.45s ease;

display:flex;

flex-direction:column;

}

.mobile-menu.active{

right:0;

}

.mobile-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:45px;

}

.mobile-header img{

width:120px;

}

.mobile-header i{

font-size:34px;

color:white;

cursor:pointer;

}

.mobile-menu nav{

display:flex;

flex-direction:column;

gap:28px;

}

.mobile-menu nav a{

color:white;

font-size:18px;

font-weight:500;

padding-bottom:10px;

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

transition:.3s;

}

.mobile-menu nav a:hover{

padding-left:12px;

color:#00d4ff;

}

.mobile-btn{

margin-top:50px;

padding:16px;

border-radius:50px;

text-align:center;

background:linear-gradient(135deg,#0077ff,#00d4ff);

color:white;

font-weight:600;

}

/*==========================================
TABLETTE
==========================================*/

@media(max-width:992px){

.nav-menu{

display:none;

}

.header-action{

display:none;

}

.menu-toggle{

display:flex;

}

.logo img{

width:120px;

}

}

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

@media(max-width:768px){

.navbar{

height:80px;

}

.logo img{

width:105px;

}

.mobile-menu{

width:100%;

padding:30px;

}

.mobile-menu nav a{

font-size:20px;

}

}

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

@media(max-width:480px){

.logo img{

width:90px;

}

.mobile-menu{

padding:25px;

}

.mobile-menu nav{

gap:22px;

}

.mobile-menu nav a{

font-size:18px;

}

.mobile-btn{

font-size:15px;

}

}