@font-face {
  font-family: 'segoeu';
  src: url('../fonts/segoeuithibd.ttf') format('opentype');
  font-style: normal;
}
    
  *{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

.hero{
width:100%;
height:100vh;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
background-image:url("../images/hero-desktop.jpg");
background-size:cover;
background-position:center;
}

/* Overlay */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
width:90%;
max-width:60rem;
}

.logo{
width:24vw;
min-width:8rem;
margin-bottom:2vh;
}

.hero h1{
font-size:4vw;
font-weight:700;
margin-bottom:2vh;
}

.hero p{
font-size:2vw;
margin-bottom:4vh;
opacity:.9;
}

.shop-btn{
display:inline-block;
padding:1.2em 3em;
border:0.15em solid white;
text-decoration:none;
color:white;
font-size:1rem;
letter-spacing:.15em;
transition:0.3s;
background: #000;
cursor: pointer;
}

.shop-btn:hover{
    background: #000
}

/* MOBILE */

@media (max-width:768px){

.hero{
background-image:url("../images/hero-mobile.jpg");
}

.logo{
        width: 70vw;
}

.hero-content {
    width: 95%;
}

.hero h1{
        font-size: 10vw;
}

.hero p{
        font-size: 5vw;
}

.shop-btn{
        font-size: 1.1rem;
padding:1em 2.5em;
}

}