@charset "utf-8";

@font-face {
    font-family: maziar;
    font-weight: 100;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-Thin.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-Thin.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 200;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-ExtraLight.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-ExtraLight.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 300;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-Light.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-Light.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 400;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-Regular.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-Regular.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 500;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-Medium.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-Medium.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 600;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-SemiBold.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 700;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-Bold.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-Bold.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 800;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-ExtraBold.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: maziar;
    font-weight: 900;
    font-style: normal;
    src: url('fonts/ttfe/Estedad-Black.ttf') format('truetype'),
         url('fonts/woff2e/Estedad-Black.woff2') format('woff2');
}

    *{
      box-sizing:border-box;
    }
    body{
      margin:0;
      min-height:100vh;
      font-family: maziar, Tahoma, sans-serif;
      background: linear-gradient(135deg, #1faa59, #ff8c00);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .bg-effects span{
      position:absolute;
      display:block;
      width:40px;
      height:40px;
      background:rgba(255,255,255,0.15);
      animation: float 20s linear infinite;
      border-radius:50%;
      bottom:-150px;
    }

    .bg-effects span:nth-child(1){ left:10%; animation-duration:18s; width:60px; height:60px; }
    .bg-effects span:nth-child(2){ left:25%; animation-duration:22s; }
    .bg-effects span:nth-child(3){ left:40%; animation-duration:16s; width:80px; height:80px; }
    .bg-effects span:nth-child(4){ left:55%; animation-duration:25s; }
    .bg-effects span:nth-child(5){ left:70%; animation-duration:19s; width:70px; height:70px; }
    .bg-effects span:nth-child(6){ left:85%; animation-duration:21s; }

    @keyframes float{
      0%{ transform: translateY(0) rotate(0deg); opacity:0; }
      10%{ opacity:1; }
      100%{ transform: translateY(-1200px) rotate(360deg); opacity:0; }
    }

    .card{
      position:relative;
      z-index:2;
      background:rgba(255,255,255,0.15);
      backdrop-filter: blur(12px);
      border-radius:30px;
      padding:70px 90px;
      text-align:center;
      box-shadow:0 30px 80px rgba(0,0,0,0.35);
      animation: scaleIn 1.5s ease;
    }

    @keyframes scaleIn{
      from{ transform:scale(0.8); opacity:0; }
      to{ transform:scale(1); opacity:1; }
    }

    h1{
      font-size:50px;
      margin:0 0 25px;
      color:#ffffff;
      text-shadow:0 6px 20px rgba(0,0,0,0.35);
      animation: glow 2.5s ease-in-out infinite alternate;
	  font-weight:900;
    }

    @keyframes glow{
      from{ text-shadow:0 0 10px #1faa59, 0 0 20px #ff8c00; }
      to{ text-shadow:0 0 25px #ff8c00, 0 0 45px #1faa59; }
    }

    p{
      font-size:25px;
      color:#ffffff;
      margin-bottom:50px;
      line-height:1.9;
	  font-weight:600;
    }

    .progress-box{
      width:100%;
      background:rgba(255,255,255,0.25);
      border-radius:40px;
      overflow:hidden;
      height:28px;
      margin-bottom:35px;
    }

    .progress{
      height:100%;
      width:0;
      background:linear-gradient(90deg, #ff8c00, #1faa59);
      border-radius:40px;
      animation: load 4s ease-in-out infinite;
    }

    @keyframes load{
      0%{ width:0; }
      50%{ width:75%; }
      100%{ width:0; }
    }

    .badge{
      display:inline-block;
      padding:14px 40px;
      font-size:20px;
      border-radius:50px;
      background:linear-gradient(90deg, #1faa59, #ff8c00);
      color:#fff;
      box-shadow:0 10px 30px rgba(0,0,0,0.35);
      animation: pulse 2s infinite;
	  font-weight:500;
    }

    @keyframes pulse{
      0%{ transform:scale(1); }
      50%{ transform:scale(1.08); }
      100%{ transform:scale(1); }
    }

    @media(max-width:900px){
      h1{ font-size:48px; }
      p{ font-size:22px; }
      .card{ padding:50px 30px; }
    }