*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"cairo",Sans-Serif;
}



body{
  background:#000814;
  color:white;
  text-align:center;
background-image: url('gem.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}

.hero{
  padding:80px 20px;
}

.hero h1{
  font-size:40px;
  margin-bottom:20px;
}

.hero p{
  margin-bottom:25px;
  font-size:20px;
}

.btn{
  background:#800517;
  color:white;
  padding:12px 30px;
  text-decoration:none;
  border-radius:25px;
  display:inline-block;
  margin-top:10px;
}

.who{
  padding:50px 20px;
  transition: .5s;
}


.cards{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px;
}

.card{
  background:#1b263b;
  padding:20px;
  border-radius:15px;
  width:250px;
  transition: .6s;
}
.card:hover{
  background-color: #2B547e;
}

.offer{
  
  
}

@media(max-width:768px){
  .hero h1{
    font-size:28px;
  }

  .card{
    width:100%;
  }
}
body{
  opacity:0;
  animation:fadeIn 1.5s ease forwards;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}