@media(max-width:992px){

nav{

position:fixed;

top:90px;

right:-100%;

width:300px;

height:calc(100vh - 90px);

background:white;

transition:.4s;

padding:40px;

}

nav.active{

right:0;

}

nav ul{

flex-direction:column;

gap:30px;

}

nav a{

color:#333;

font-size:18px;

}

.icons{

display:none;

}

#hamburger{

display:flex;

}

#hamburger span{

background:white;

}

header.scrolled #hamburger span{

background:#333;

}

header2.scrolled #hamburger span{

background:#333;

}

.hero h1{

font-size:56px;

}

.hero p{

font-size:16px;

}

}



@media(max-width:768px){

.hero{

text-align:center;

}

.hero p{

margin:auto;

}

.hero h1{

font-size:44px;

}

.button{

padding:15px 28px;

}

}



@media(max-width:480px){

.hero h1{

font-size:36px;

}

.subtitle{

font-size:13px;

letter-spacing:3px;

}

}