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

/*********************
HEADER
**********************/

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:9000;

transition:.4s;

}

header.scrolled{

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

backdrop-filter:blur(18px);

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

}


/*********************
NAVBAR
**********************/

.navbar{

height:90px;

display:flex;

align-items:center;

transition:.4s;

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

}


/*********************
LOGO
**********************/

.logo{

display:flex;

align-items:center;

gap:18px;

}

.logo-small{

width:60px;

height:60px;

border-radius:50%;

background:#fff;

padding:4px;

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

transition:.35s;

}

.logo-main{

height:52px;

background:#fff;

padding:10px 16px;

border-radius:15px;

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

transition:.35s;

}

.logo:hover .logo-small{

transform:rotate(360deg);

}

.logo:hover .logo-main{

transform:translateY(-4px);

}


/*********************
NAV LINKS
**********************/

.nav-links{

display:flex;

align-items:center;

gap:40px;

list-style:none;

}

.nav-links li{

position:relative;

}

.nav-links a{

font-size:17px;

font-weight:600;

color:#111;

position:relative;

padding:8px 0;

transition:.3s;

}


/*********************
UNDERLINE
**********************/

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:3px;

background:#d60000;

border-radius:20px;

transition:.35s;

}

.nav-links a:hover{

color:#d60000;

}

.nav-links a:hover::after{

width:100%;

}


/*********************
CALL BUTTON
**********************/

.callButton a{

display:flex;

align-items:center;

gap:10px;

background:#d60000;

padding:15px 28px;

border-radius:50px;

color:#fff;

font-weight:600;

box-shadow:0 15px 35px rgba(214,0,0,.28);

transition:.35s;

}

.callButton a:hover{

transform:translateY(-5px);

background:#b60000;

box-shadow:0 25px 50px rgba(214,0,0,.35);

}


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

.mobileMenu{

display:none;

font-size:32px;

cursor:pointer;

color:#111;

transition:.35s;

}

.mobileMenu:hover{

color:#d60000;

}


/*********************
ACTIVE LINK
**********************/

.nav-links a.active{

color:#d60000;

}

.nav-links a.active::after{

width:100%;

}


/*********************
HEADER SHRINK
**********************/

header.scrolled .navbar{

height:75px;

}

header.scrolled .logo-main{

height:45px;

}

header.scrolled .logo-small{

width:50px;

height:50px;

}


/*********************
ANIMATION
**********************/

header{

animation:slideDown .8s ease;

}

@keyframes slideDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*********************
TABLET
**********************/

@media(max-width:1100px){

.nav-links{

gap:25px;

}

.callButton{

display:none;

}

}


/*********************
MOBILE
**********************/

@media(max-width:900px){

.mobileMenu{

display:block;

}

.nav-links{

position:fixed;

top:90px;

right:-100%;

width:320px;

height:100vh;

background:#fff;

display:flex;

flex-direction:column;

justify-content:flex-start;

padding-top:60px;

gap:35px;

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

transition:.45s;

}

.nav-links.active{

right:0;

}

.logo-main{

height:42px;

}

.logo-small{

width:50px;

height:50px;

}

}