*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  overflow-x:hidden;
}

.hero{
  position:relative;

  width:100%;
  min-height:100vh;

  background-image:url('./tojo-basu.jpg');

  background-size:cover;
  background-position:center;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;
  padding:20px;
}

@font-face {
  font-family: 'Transcity';
  src: url('./fonts/Transcity DEMO.otf') format('opentype');
}



.overlay{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.5);
}

.content{
  position:relative;
  z-index:2;

  max-width:800px;
  color:white;
}

.content h1{
  font-size:72px;
  margin-bottom:20px;
  font-weight:800;
}

.content h1{
  font-family: 'Transcity', sans-serif;
  text-transform:uppercase; 
background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 67%);  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:8px;
}

.content p{
  font-size:24px;
  line-height:1.5;

  margin-bottom:35px;

  color:#f1f1f1;
}

.buttons{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:20px;
  flex-wrap:wrap;
}

.btn{
  padding:16px 36px;

  border:none;
  border-radius:12px;

  text-decoration:none;

  color:white;
  font-size:18px;
  font-weight:bold;

  transition:0.3s;
}

.btn:hover{
  transform:translateY(-4px);
  opacity:0.9;
}

.whatsapp{
  background:#25D366;
}

.call{
  background:#1877F2;
}

@media(max-width:768px){

  .content h1{
    font-size:48px;
    line-height:1.1;
  }

  .content p{
    font-size:18px;
  }

  .buttons{
    flex-direction:column;
  }

  .btn{
    width:220px;
  }

}