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

    body{
      font-family:'Poppins',sans-serif;
      background:#000;
      color:#fff;
      overflow-x:hidden;
    }

    a{
      text-decoration:none;
    }

    .container{
      width:100%;
      max-width:1200px;
      margin:auto;
      padding:0 20px;
    }

    section{
      padding:80px 0;
    }

    h1,h2,h3{
      font-weight:700;
    }

    .yellow{
      color:#facc15;
    }

    /* HERO */
    .hero{
      background:linear-gradient(to right,#000,#111,#000);
      text-align:center;
      border-bottom:1px solid rgba(250,204,21,0.2);
      position:relative;
    }

    .hero-tag{
      color:#facc15;
      font-weight:600;
      letter-spacing:2px;
      text-transform:uppercase;
      margin-bottom:20px;
      display:block;
      span {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        display: inherit;
        padding: 8px 16px;
        margin: 10px auto 0;
        background: #ef4444;
        border-radius: 999px;
        max-width: fit-content;
      }
    }

    .hero h1{
      font-size:60px;
      line-height:1.2;
      margin-bottom:25px;
    }

    .hero p{
      color:#cfcfcf;
      font-size:20px;
      max-width:850px;
      margin:auto;
      line-height:1.8;
    }

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

    .info-box{
      background:#111;
      border:1px solid rgba(250,204,21,0.25);
      border-radius:20px;
      padding:25px;
      min-width:200px;
    }

    .info-box small{
      color:#aaa;
      display:block;
      margin-bottom:10px;
    }

    .info-box h3{
      font-size:22px;
    }

    /* COUNTDOWN */
    .countdown{
      display:flex;
      justify-content:center;
      gap:20px;
      margin-top:50px;
      flex-wrap:no-wrap;
    }

    .count-box{
      background:#111;
      border:1px solid rgba(250,204,21,0.25);
      border-radius:20px;
      padding:20px;
      min-width:100px;
      text-align:center;
    }

    .count-box h2{
      color:#facc15;
      font-size:34px;
    }

    .count-box p{
      font-size:14px;
      color:#aaa;
      margin-top:5px;
    }

    /* BUTTON */
    .btn-wrap{
      position:relative;
      display:inline-block;
      margin-top:50px;
    }

    .seat-badge{
      position:absolute;
      top:-18px;
      left:-30px;
      background:#ef4444;
      color:#fff;
      font-size:14px;
      font-weight:700;
      padding:8px 16px;
      border-radius:999px;
      animation:bounce 1s infinite;
    }

    .btn{
      background:#facc15;
      color:#000;
      font-weight:700;
      padding:18px 40px;
      border:none;
      border-radius:18px;
      font-size:18px;
      cursor:pointer;
      transition:0.3s;
    }

    .btn:hover{
      transform:translateY(-3px);
      background:#fde047;
    }

    @keyframes bounce{
      0%,100%{
        transform:translateY(0);
      }
      50%{
        transform:translateY(-6px);
      }
    }

    /* LEARNING */
    .learning{
      background:#0a0a0a;
    }

    .section-title{
      text-align:center;
      font-size:48px;
      margin-bottom:60px;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
    }

    .card{
      background:#000;
      border:1px solid #222;
      border-radius:30px;
      padding:35px;
      transition:0.3s;
    }

    .card:hover{
      border-color:#facc15;
      transform:translateY(-6px);
    }

    .number{
      width:60px;
      height:60px;
      background:#facc15;
      color:#000;
      font-weight:700;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:25px;
      font-size:24px;
    }

    .card h3{
      font-size:28px;
      margin-bottom:15px;
    }

    .card p{
      color:#aaa;
      line-height:1.8;
    }

    /* CTA BANNER */
    .cta-banner{
      background:linear-gradient(to right,#facc15,#fde047);
      color:#000;
    }

    .cta-flex{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:30px;
      flex-wrap:wrap;
    }

    .cta-flex h2{
      font-size:42px;
      line-height:1.3;
    }

    .cta-flex p{
      margin-top:10px;
      font-weight:500;
    }

    .dark-btn{
      background:#000;
      color:#fff;
      padding:18px 40px;
      border-radius:18px;
      border:none;
      font-weight:700;
      cursor:pointer;
      font-size:18px;
    }

    /* AUDIENCE */
    .audience{
      background:#000;
      border-top:1px solid #111;
      border-bottom:1px solid #111;
      text-align:center;
    }

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

    .audience-item{
      padding:15px 35px;
      border:1px solid #facc15;
      color:#facc15;
      border-radius:999px;
      transition:0.3s;
      font-weight:600;
    }

    .audience-item:hover{
      background:#facc15;
      color:#000;
    }

    /* FORM */
    .form-section{
      background:#0a0a0a;
    }

    .form-box{
      background:#000;
      border:1px solid rgba(250,204,21,0.2);
      border-radius:30px;
      padding:50px;
      max-width:850px;
      margin:auto;
    }

    .form-box h2{
      text-align:center;
      font-size:42px;
      margin-bottom:15px;
    }

    .form-box p{
      text-align:center;
      color:#aaa;
      margin-bottom:40px;
    }

    form{
      display:flex;
      flex-direction:column;
      gap:25px;
    }

    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:25px;
    }

    input{
      background:#111;
      border:1px solid #333;
      border-radius:18px;
      padding:18px 20px;
      color:#fff;
      font-size:16px;
      outline:none;
    }

    input:focus{
      border-color:#facc15;
    }

    .submit-btn{
      width:100%;
      background:#facc15;
      color:#000;
      font-weight:700;
      border:none;
      border-radius:18px;
      padding:18px;
      font-size:20px;
      cursor:pointer;
    }

    /* FINAL CTA */
    .final-cta{
      background:linear-gradient(to right,#facc15,#fde047);
      text-align:center;
      color:#000;
      padding: 60px 0 180px 0;
    }

    .final-cta h2{
      font-size:64px;
      margin-bottom:25px;
    }

    .final-cta p{
      font-size:24px;
      margin-bottom:35px;
      font-weight:500;
    }

    /* STICKY FOOTER */
    .sticky-footer{
      bottom:-200px;
      left:0;
      width:100%;
        position:fixed;
      background:rgba(0,0,0,0.95);
      border-top:1px solid rgba(250,204,21,0.25);
      backdrop-filter:blur(10px);
      padding:15px 20px;
      z-index:999;
      transition: 0.5s ease;
    }
    
    .sticky-footer.sticky {
        bottom:0;
        transition: 0.5s ease;
    }

    .sticky-content{
      max-width:1200px;
      margin:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:20px;
    }

    .sticky-content p:first-child{
      font-weight:600;
    }

    .sticky-content small{
      color:#facc15;
    }

    .sticky-btn-wrap{
      gap: 10px;
      display: flex;
      position:relative;
    }

    .pulse-badge{
      position:absolute;
      top:-20px;
      left:0;
      background:#ef4444;
      padding:6px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      animation:pulse 1.2s infinite;
    }

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

  .thankyou .card {
    color: #fff;
  }
  .thankyou {
    max-width: 700px;
    .card .text-success {
      font-weight: 500;
      font-size: 2.0rem;
      margin: 15px 0 20px;
      color: #fff !important;
    }
    .btn {
      position: relative;
      max-width: fit-content;
      padding: 18px 20px 18px 50px;
      &:before {
        content: "";
        width: 25px;
        height: 25px;
        left: 20px;
        top: 20px;
        position: absolute;
        mask-image: url(sprite.png);
        mask-position: -25px 0px;
        background: #000;
      }
      &:hover {
        background: #ef4444;
        &:before {
          background: #fff;
        }
      }
    }
  }

  .btn-wrap .seat-badge {
    top: -41px;
    left: 65px;
  }

  .party {
    font-size: 24px;
    padding-left: 50px;
    position: relative;
    &:before {
      content: "";
      width: 40px;
      height: 40px;
      left: 0;
      top: 0;
      position: absolute;
      background: url(sprite.png) -58px -2px no-repeat;
    }
  }

  ul.yellowbg {
    gap: 20px;
    padding: 0;
    display: flex;
    li {
      color: #000;
      display: block;
      padding: 7px 10px;
      border-radius: 5px;
      background: #facc15;
    }
  }

  .info {
    padding: 20px;
    list-style: none;
    background: #111;
    border-radius: 10px;
    border-left: 4px solid #facc15;
    li {
      position: relative;
      padding: 5px 0 5px 25px;
      &:before {
        content: "";
        width: 15px;
        height: 15px;
        left: 0;
        top: 6px;
        position: absolute;
        background: url(sprite.png) -2px 0px no-repeat;
      }
    }
  }

  .whitebg {
    color: #000;
    position: relative;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 20px 20px 20px 80px;
    &:before, &:after {
      content: "";
      position: absolute;
    }
    &:before {
      left: 15px;
      width: 50px;
      height: 50px;
      background: #ef4444;
      border-radius: 10px;
    }
    &:after {
      top: 33px;
      left: 34px;
      width: 15px;
      height: 24px;
      mask-image: url(sprite.png);
      background: #fff;
      mask-position: -5px -19px;
    }
  }

    /* RESPONSIVE */
    @media(max-width:992px){

      .cards{
        grid-template-columns:repeat(2,1fr);
      }

      .hero h1{
        font-size:46px;
      }

      .section-title{
        font-size:40px;
      }

      .final-cta h2{
        font-size:48px;
      }
      .info-box {
        flex-basis: calc(50% - 15px);
      }
    }

    @media(max-width:768px){

      section{
        padding:60px 0;
      }

      .hero h1{
        font-size:38px;
      }

      .hero p{
        font-size:16px;
      }

      .cards{
        grid-template-columns:1fr;
      }

      .form-grid{
        grid-template-columns:1fr;
      }

      .section-title{
        font-size:34px;
      }

      .cta-flex{
        text-align:center;
        justify-content:center;
      }

      .final-cta h2{
        font-size:38px;
      }

      .final-cta p{
        font-size:18px;
      }
    }

    @media(max-width:670px){
      .sticky-content {
        text-align: center;
        justify-content: center;
      }
      .sticky-content .btn {
        padding: 10px 20px;
      }
      .cta-flex h2,
      .final-cta h2,
      .hero h1 {
        font-size: 30px;
      }
      section.hero {
        padding: 20px 0 60px 0;
      }
    }

    @media(max-width:520px){
      .audience-item {
        flex: 1;
      }
      .form-box {
        padding: 0;
        border: 0;
      }
      .form-box h2 {
        font-size: 24px;
      }
      .info-boxes {
        gap: 0;
        overflow: hidden;
        margin: 40px auto 0;
        border-radius: 20px;
        border: 2px solid rgba(250, 204, 21, 0.25);
        .info-box {
            border: 0;
            padding: 20px;
            min-width: 50%;
            border-radius: 0;
            background: none;
            &:nth-child(1), &:nth-child(3) {
              border-right: 1px solid rgba(250, 204, 21, 0.25);
            }

            &:nth-child(1), &:nth-child(2) {
              border-bottom: 1px solid rgba(250, 204, 21, 0.25);
            }
        }
      }
      .seat-badge {
        top: -28px;
        left: -20px;
        font-size: 11px;
        font-weight: 400;
        padding: 4px 10px;
        letter-spacing: 1px;
    }
    .sticky-content .btn {
        font-size: 16px;
    }
    .card {
      padding: 15px;
      h3 {
        font-size: 22px;
      }
      .number {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin-bottom: 10px;
      }
    }
    .thankyou .card {
      border: 0;
      padding: 0 !important;
    }
    .thankyou .card .text-success {
      font-size: 1.5rem;
    }
    .info {
      padding: 10px 10px 10px 20px;
    }
    .whitebg {
      overflow: hidden;
      font-size: 0.85rem;
      padding: 10px 20px 10px 50px;
      &:before {
        top: 0;
        left: 0;
        width: 40px;
        height: 100%;
        border-radius: 0;
      }
      &:after {
        top: 25px;
        left: 14px;
      }
    }
  }
     @media(max-width:420px){
         .cta-flex h2, .final-cta h2, .hero h1 {
            font-size: 22px;
        }
        .info-box h3 {
            font-size: 16px;
        }
        .audience-list {
          flex-direction: column;
        }
        ul.yellowbg {
          flex-wrap: wrap;
          li {
            flex-grow: 1;
          }
        }
     }