:root {

    /* Colors */
--medium-turquoise:hsl(179, 41%, 63%);
--viridian-green:hsl(179, 41%, 43%);
--smoky-black:hsl(0, 0%, 8%);
--light-gray:hsl(0, 0%, 80%);
--heat-wave:hsl(26, 99%, 54%);
--gunmetal:hsl(212, 16%, 16%);
--white:hsl(0, 0%, 100%);

/* Font Size */
--ff-shadows_into_light:'Shadows Into Light',cursive;--ff-montserrat:'Montserrat',sans-serif;
--fs-1:calc(5rem + 9vw);
--fs-2:2.4rem;
--fs-3:1.8rem;
--fs-4:1.4rem;
--fw-400:400;
--fw-500:500;
--fw-700:700;

/* Shadow Effect */
--shadow:0px 0px 10px -2px hsla(179, 41%, 63%, 0.5);

/* Radius  */
--radius-circle:50%;
--radius-pill:100px;

/* Transition */
--transition:0.25s ease;
--cubic-out:cubic-bezier(0.33, 0.85, 0.4, 0.96)
}

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

li{list-style:none}

a,button,img,ion-icon,span{
    display:block
}

a{
color:inherit;
text-decoration:none
}

img{
height:auto
}

button{
background:0 0;
border:none;
font:inherit;
cursor:pointer
}

ion-icon{
pointer-events:none
}

html{
font-family:var(--ff-montserrat);
font-size:10px;
scroll-behavior:smooth
}

body{
background-color:var(--white);
color:var(--gunmetal);
font-size:1.6rem
}:focus-visible{outline-offset:4px}

.container{ padding-inline:15px }

.preloader{ 
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:var(--white);
z-index:4;
display:grid;
place-items:center;
transition:var(--transition)
}

.preloader.loaded{ 
opacity:0;
visibility:hidden
}

.preloader .circle{
    width:35px;
    height:35px;
    border:3px solid var(--light-gray);
    border-top-color:var(--heat-wave);
    border-radius:var(--radius-circle);
    -webkit-animation:rotate360 .5s linear infinite;
    animation:rotate360 .5s linear infinite
}

@-webkit-keyframes rotate360{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(1turn)
    }
}

@keyframes rotate360{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(1turn)
    }
}

.header{
position:fixed;
top:0;
left:0;
width:100%;
background-color:var(--white);
padding-block:12px;
box-shadow:var(--shadow)
}

.header .container{
display:flex;
justify-content:space-between;
align-items:center
}

.nav-toggle-btn{
font-size:3.2rem
}

.nav-toggle-btn .close,.nav-toggle-btn.active .open{
display:none
}

.nav-toggle-btn .open,.nav-toggle-btn.active .close{
display:block
}

.navbar{
position:fixed;
top:56px;
left:-270px;
width:100%;
max-width:270px;
height:100%;
background-color:var(--white);
padding-block:15px;
box-shadow:var(--shadow);
visibility:hidden;
transition:.25s var(--cubic-out)
}

.navbar.active{
transform:translateX(270px);
visibility:visible;
transition-duration:.5s
}

.navbar-link{
padding:20px 15px;
font-size:var(--fs-4);
transition:var(--transition)
}

.navbar-link:is(:hover,:focus-visible){
color:var(--white);
background-color:var(--heat-wave)
}

.hero{
min-height:100vh;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:grid;
align-items:center;
-webkit-padding-before:60px;
padding-block-start:60px
}

.hero-subtitle{
color:var(--smoky-black);
font-size:var(--fs-2);
font-weight:var(--fw-700);
text-transform:uppercase
}

.hero-title{
color:var(--heat-wave);
font-family:var(--ff-shadows_into_light);
font-size:var(--fs-1);
font-weight:var(--fw-400);
line-height:1;
margin-block:5px 20px
}

.hero-text{
font-size:var(--fs-2);
font-weight:var(--fw-500);
-webkit-margin-after:30px;
margin-block-end:30px;
line-height:1.4
}

.btn{
    background-color:var(--medium-turquoise);
    color:var(--white);
    max-width:-webkit-max-content;
    max-width:-moz-max-content;
    max-width:max-content;
    font-size:var(--fs-3);
    font-weight:var(--fw-700);
    text-transform:uppercase;
    padding:22px 55px;
    border-radius:var(--radius-pill);
    transition:var(--transition)
}

.btn:is(:hover,:focus-visible){
    background-color:var(--viridian-green)
}

@media (min-width:575px){
    .container{
        max-width:540px;
        width:100%;
        margin-inline:auto
    }
}

@media (min-width:768px){
    :root{
        --fs-1:calc(5rem + 6vw)
    }
    .container{
        max-width:720px
    }
}

@media (min-width:992px){
    .container{
        max-width:960px
    }
    .hero-subtitle,.hero-title{
        max-width:75%
    }
    .hero-text{
        max-width:650px
    }
}

@media (min-width:1200px){
    .container{
        max-width:1200px
    }
    .header{
        background-color:transparent;
        box-shadow:none;
        padding-block:30px
    }
    .navbar,.navbar.active{
        all:unset;
        display:block;
        transition:var(--transition)
    }
    .navbar{
        transform:scale(0)
    }
    .navbar.active{
        transform:scale(1)
    }
    .navbar-list{
        display:flex;
        gap:15px
    }
    .navbar-link{
        font-size:unset;
        font-weight:var(--fw-500);
        padding-block:0;
    }
    .navbar-link:is(:hover,:focus-visible){
        background-color:transparent;
        color:var(--heat-wave)
    }
    .nav-toggle-btn{
        color:var(--heat-wave);
        font-size:5rem;
        transition:var(--transition)
    }
    .nav-toggle-btn.active{
        transform:rotate(.5turn)
    }
}