*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  font-family:Arial,Helvetica,sans-serif;
  color:#17191d;
}

body{
  background:#f7f4ee;
  overflow:hidden;
}

.background{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,.30)),
    url("kleax-background.png") center center / 88% auto no-repeat;
}

.page{
  position:relative;
  z-index:1;
  width:100%;
  height:100vh;
}

.hero{
  position:absolute;
  top:5vh;
  left:50%;
  transform:translateX(-50%);
  width:min(1000px,calc(100% - 30px));
  text-align:center;
}

h1{
  margin:0;
  font-size:clamp(38px,4.6vw,64px);
  line-height:1;
  letter-spacing:-2px;
  font-weight:950;
}

.red-line{
  width:75px;
  height:3px;
  margin:18px auto 20px;
  background:#1a73e8;
  border-radius:5px;
}

.hero p{
  margin:0 auto;
  max-width:850px;
  font-size:clamp(20px,2.4vw,32px);
  line-height:1.3;
  font-weight:850;
}

.contact{
  position:absolute;
  left:50%;
  bottom: calc(6vh - 25px);
  transform:translateX(-50%);
  width:min(700px,calc(100% - 20px));
  padding:15px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(255,255,255,0.5);
  border:3px solid black;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}

.address{
  display:flex;
  flex-direction:column;
  text-align:left;
  font-size:14px;
  line-height:1.4;
}

.address strong{
  font-size:18px;
  margin-bottom:2px;
}

.contact a{
  padding:11px 17px;
  border-radius:9px;
  background:#1a73e8;
  color:white;
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
}

.contact a:hover{
  background:#1557b0;
}

@media(max-height:800px) and (min-width:701px){
  .hero{top:3vh}
  h1{font-size:52px}
  .hero p{font-size:22px}
  .contact{bottom:4vh}
}

@media(max-width:700px){
  body{overflow:auto}
  .background{
    background-size:auto 100%;
    background-position:center center;
  }
  .page{
    min-height:100vh;
    height:auto;
  }
  .hero{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    padding:100px 15px 0;
  }
  h1{font-size:40px}
  .hero p{font-size:20px}
  .contact{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin:80px auto 25px;
    flex-direction:column;
    text-align:center;
  }
  .address{text-align:center}
}