@font-face{

  font-family:vazir;

  src:url("fonts/Vazir.woff2");

}

*{

  margin:0;
  padding:0;
  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

}

body{

  font-family:vazir;

  background:#f8fafc;

  color:#0f172a;

  overflow-x:hidden;

  min-height:100vh;

  display:flex;

  justify-content:center;

}

body::before{

  content:"";

  position:fixed;

  inset:0;

  background:

  radial-gradient(
  circle at top left,
  #bfdbfe,
  transparent 28%
  ),

  radial-gradient(
  circle at bottom right,
  #ddd6fe,
  transparent 30%
  );

  z-index:-2;

}

.container{

  width:100%;

  max-width:1050px;

  padding:40px 25px 80px;

  text-align:center;

}

.nav{

  display:flex;

  justify-content:center;

  gap:35px;

  margin-bottom:120px;

}

.nav a{

  text-decoration:none;

  color:#475569;

  font-size:14px;

  transition:0.3s;

  position:relative;

}

.nav a::after{

  content:"";

  position:absolute;

  right:0;

  bottom:-8px;

  width:0;

  height:1px;

  background:#2563eb;

  transition:0.3s;

}

.nav a:hover{

  color:#2563eb;

}

.nav a:hover::after{

  width:100%;

}

.hero{

  animation:fade 1s ease;

}

.hero h1{

  font-size:110px;

  font-weight:700;

  letter-spacing:-7px;

  margin-bottom:30px;

  color:#0f172a;

  line-height:1;

}

.hero-text{

  max-width:700px;

  margin:auto;

  color:#334155;

  font-size:22px;

  line-height:2.1;

}

.hero-sub{

  margin-top:25px;

  color:#64748b;

  font-size:16px;

  line-height:2;

}

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:15px;

  margin-top:45px;

  flex-wrap:wrap;

}

.hero-buttons a{

  text-decoration:none;

  padding:17px 34px;

  font-size:14px;

  transition:0.3s;

  border-radius:14px;

}

.hero-buttons a:first-child{

  background:#2563eb;

  color:white;

  box-shadow:
  0 10px 30px #2563eb25;

}

.hero-buttons a:last-child{

  border:1px solid #dbe4f0;

  color:#0f172a;

  background:white;

}

.hero-buttons a:hover{

  transform:translateY(-3px);

}

.about{

  margin-top:140px;

  padding:60px;

  background:#ffffffee;

  backdrop-filter:blur(20px);

  border:1px solid #dbe4f0;

  border-radius:20px;

  animation:show 0.8s ease;

  box-shadow:
  0 10px 35px rgba(15,23,42,0.04);

}

.about h2{

  margin-bottom:20px;

  font-size:42px;

  color:#0f172a;

}

.about p{

  max-width:700px;

  margin:auto;

  color:#475569;

  line-height:2.2;

  font-size:17px;

}

.socials{

  margin-top:140px;

  display:flex;

  flex-direction:column;

  gap:18px;

}

.social{

  background:#ffffff;

  border:1px solid #dbe4f0;

  padding:30px 35px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  text-decoration:none;

  transition:0.3s;

  border-radius:18px;

  animation:show 0.8s ease;

  box-shadow:
  0 8px 25px rgba(15,23,42,0.03);

}

.social:hover{

  transform:translateY(-4px);

  border-color:#93c5fd;

  box-shadow:
  0 12px 35px rgba(37,99,235,0.08);

}

.social-left{

  text-align:right;

}

.social-left h3{

  font-size:20px;

  margin-bottom:8px;

  color:#0f172a;

}

.social-left p{

  color:#64748b;

  font-size:14px;

}

.message-box{

  margin-top:140px;

  background:white;

  border:1px solid #dbe4f0;

  padding:45px;

  border-radius:22px;

  animation:show 0.8s ease;

  box-shadow:
  0 10px 35px rgba(15,23,42,0.04);

}

.message-box h2{

  margin-bottom:30px;

  font-size:38px;

}

textarea{

  width:100%;

  height:220px;

  resize:none;

  border:none;

  outline:none;

  background:#f8fafc;

  padding:25px;

  border-radius:16px;

  font-family:vazir;

  font-size:16px;

  color:#0f172a;

}

button{

  width:100%;

  margin-top:20px;

  padding:18px;

  border:none;

  border-radius:14px;

  background:#2563eb;

  color:white;

  font-family:vazir;

  font-size:16px;

  cursor:pointer;

  transition:0.3s;

}

button:hover{

  opacity:0.92;

}

#status{

  margin-top:18px;

  color:#64748b;

}

footer{

  margin-top:120px;

  text-align:center;

  color:#94a3b8;

  font-size:14px;

  padding-bottom:20px;

}

.social,
.message-box,
.about{

  animation:show 0.8s ease;

}

@keyframes show{

  from{

    opacity:0;

    transform:translateY(20px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}

@keyframes fade{

  from{

    opacity:0;

    transform:translateY(30px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}

@media(max-width:768px){

.hero-buttons{

    flex-direction:row;
    flex-wrap:nowrap;
    gap:10px;

}

.hero-buttons a{

   padding:14px 16px;
   font-size:13px;

}

.hero h1{

  font-size:65px;

  letter-spacing:-3px;

}

.hero-text{

  font-size:18px;

}

.about{

  padding:40px 25px;

}

.message-box{

  padding:35px 20px;

}

.social{

  flex-direction:column;

  gap:15px;

  align-items:flex-start;

}

}