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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial;
  background:#050816;
  color:white;
  overflow-x:hidden;
}

.hero{

  height:100vh;

  background:

  linear-gradient(
  rgba(0,0,0,0.7),
  rgba(0,0,0,0.7)),

  url('https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=2071');

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

nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:30px 60px;
}

nav h1{
  color:#60a5fa;
  font-size:35px;
}

nav a{

  color:white;

  text-decoration:none;

  margin-left:20px;

  font-size:18px;
}

nav a:hover{
  color:#60a5fa;
}

.hero-content{

  height:80vh;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;
}

.hero-content h2{

  font-size:90px;

  margin-bottom:20px;
}

.hero-content p{

  font-size:24px;

  margin-bottom:30px;
}

.button{

  background:#2563eb;

  padding:15px 35px;

  border-radius:15px;

  text-decoration:none;

  color:white;

  font-size:18px;

  transition:0.3s;
}

.button:hover{

  background:#3b82f6;

  transform:scale(1.05);
}

.section{

  padding:100px 8%;
}

.about{

  display:flex;

  align-items:center;

  gap:50px;

  flex-wrap:wrap;
}

.logo{

  width:180px;

  border-radius:20px;
}

.cards{

  display:flex;

  flex-wrap:wrap;

  gap:30px;

  margin-top:40px;
}

.card{

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(10px);

  border-radius:20px;

  padding:30px;

  width:300px;

  text-decoration:none;

  color:white;

  transition:0.3s;

  display:block;
}

.card:hover{

  transform:translateY(-10px);

  border-color:#60a5fa;

  background:rgba(37,99,235,0.15);
}

.card h3{

  margin-bottom:10px;

  font-size:30px;
}

footer{

  text-align:center;

  padding:30px;

  background:black;
}