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

body{
  font-family: Arial, Helvetica, sans-serif;
  background:#000;
  color:white;
}

.hero{
  position:relative;
  min-height:100vh;
  background:url("HP.jpg") center center/cover no-repeat;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.overlay{
  position:absolute;
  inset:0;
}

.content{
  position:relative;
  z-index:2;
  padding:40px 60px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:40px;
}

.logo{
  font-size:72px;
  font-weight:900;
  line-height:0.9;
  text-transform:uppercase;
}

.logo small{
  font-size:18px;
  display:block;
  margin-top:10px;
  letter-spacing:2px;
}

.shop-btn{
  background:white;
  color:black;
  text-decoration:none;
  padding:25px 60px;
  font-size:28px;
  font-weight:900;
  text-transform:uppercase;
  margin-top:40px;
}

.line{
  width:100%;
  height:2px;
  background:white;
  margin:20px 0 50px;
}

.headline{
  max-width:600px;
}

.headline h1{
  font-size:110px;
  line-height:0.9;
  font-weight:900;
  text-transform:uppercase;
}

.headline h1 span{
  font-style:italic;
}

.buy-btn1{
  display:inline-block;
  margin-top:50px;
  background:white;
  color:black;
  text-decoration:none;
  padding:25px 45px;
  font-size:28px;
  font-weight:900;
  text-transform:uppercase;
}

.buy-btn2{
  display:inline-block;
  background:white;
  color:black;
  text-decoration:none;
  padding:25px 45px;
  font-size:28px;
  font-weight:900;
  text-transform:uppercase;
}

footer{
  position:relative;
  z-index:2;
  background:black;
  padding:40px 60px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:30px;
}

.footer-logo{
  font-size:54px;
  font-weight:900;
  line-height:0.9;
  text-transform:uppercase;
}

.footer-info{
  display:flex;
  gap:60px;
  font-size:20px;
  line-height:1.6;
}

.footer-right{
  font-size:42px;
  font-weight:900;
  text-transform:uppercase;
}

@media(max-width:900px){

  .content{
    padding:30px;
  }

  .topbar{
    flex-direction:column;
    gap:30px;
  }

  .logo{
    font-size:56px;
  }

  .headline h1{
    font-size:70px;
  }

  .shop-btn,
  .buy-btn{
    font-size:22px;
    padding:18px 35px;
  }

  footer{
    padding:30px;
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-info{
    flex-direction:column;
    gap:20px;
  }

  .footer-right{
    font-size:28px;
  }
}