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

body{
font-family: "Century Gothic", Arial, sans-serif;
overflow:hidden;
color: white;
}

.carousel{
width:100vw;
height:100vh;
position:relative;
}

.hero{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.5s ease;
}

.hero.active{
opacity:1;
}

/* SETAS */
.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:42px;
cursor:pointer;
z-index:10;
opacity:0.60;
transition:0.3s;
}

.arrow:hover{
opacity:1;
}

.arrow.left{ left:2%; }
.arrow.right{ right:3%; }

/* HEADER */
header{
position:absolute;
top:5%;
right:3%;
z-index:20;
}

.menu-icon{
width:28px;
cursor:pointer;
}

/* MENU */
nav{
position:fixed;
top:0;
right:0;
width:22%;
height:100vh;
background:rgba(40,40,40,0.75);
transform:translateX(100%);
transition:transform 0.5s ease;
display:flex;
justify-content:flex-start;
align-items:center;
z-index:30;
}

nav.open{
transform:translateX(0);
}

.close-icon{
position:absolute;
top:5%;
right:15%;
width:24px;
cursor:pointer;
}

nav ul{
list-style:none;
width:100%;
padding-right:22%;
text-align:right;
margin-top: -30vh;
}

nav li{
margin:22px 0;
}

nav a{
text-decoration:none;
color:white;
font-size:20px;
font-family:"Century Gothic", Arial, sans-serif;
text-transform:uppercase;
letter-spacing:4px;
line-height: 1.5;
opacity: 0.85;
}

nav a:hover{
opacity:1;
}

/* FOOTER */
footer{
position:absolute;
bottom:24px;
width:100%;
display:flex;
justify-content:center;
z-index:15;
}

.social{
display:flex;
gap:28px;
}

.social img{
width:24px;
cursor:pointer;
opacity:0.75;
transition:0.3s;
}

.social img:hover{
opacity:1;
}

/* TABLET */
@media(max-width:900px){
nav{ width:60%; }
}

/* MOBILE */
@media(max-width:600px){
nav{ width:100%; }
.arrow{ width:30px; }
.social{ gap:20px; }
.menu-icon{ width:24px; }
.close-icon{ 
    width:22px;
    right:10% }

nav ul{
padding-right:0%;
text-align:center;
}

}