/* =========================================
       HERO
    ========================================= */

    .hero{

      min-height:100vh;

      display:flex;

      align-items:center;

      justify-content:center;

      position:relative;

      overflow:hidden;

      padding:160px 8% 100px;
    }

    /* =========================================
       AURORA
    ========================================= */

    .aurora{

      position:absolute;

      inset:0;

      overflow:hidden;

      z-index:0;
    }

    .aurora span{

      position:absolute;

      border-radius:50%;

      filter:blur(120px);

      opacity:.18;

      animation:auroraFloat 10s infinite ease-in-out;
    }

    .aurora span:nth-child(1){

      width:420px;
      height:420px;

      background:#00d9ff;

      top:-120px;
      left:-100px;
    }

    .aurora span:nth-child(2){

      width:420px;
      height:420px;

      background:#ff006e;

      bottom:-120px;
      right:-100px;

      animation-delay:2s;
    }

    .aurora span:nth-child(3){

      width:300px;
      height:300px;

      background:#7928ff;

      top:40%;
      left:40%;

      animation-delay:4s;
    }

    @keyframes auroraFloat{

      0%{
        transform:translateY(0px);
      }

      50%{
        transform:translateY(-40px);
      }

      100%{
        transform:translateY(0px);
      }

    }

    /* =========================================
       GRID BG
    ========================================= */

    .hero-grid{

      position:absolute;

      inset:0;

      background-image:
      linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

      background-size:60px 60px;

      mask-image:
      radial-gradient(circle at center,black,transparent 90%);
    }

    /* =========================================
       HERO CONTENT
    ========================================= */

    .hero-content{

      position:relative;

      z-index:2;

      text-align:center;

      max-width:1100px;
    }

    .hero-badge{

      display:inline-flex;

      align-items:center;

      gap:10px;

      padding:12px 24px;

      border-radius:50px;

      background:rgba(255,255,255,.05);

      border:
      1px solid rgba(255,255,255,.08);

      backdrop-filter:blur(10px);

      margin-bottom:30px;
    }

    .hero-badge i{

      color:#00d9ff;
    }

    .hero-title{

      font-size:88px;

      line-height:1.1;

      font-weight:800;

      margin-bottom:30px;
    }

    .gradient{

      background:
      linear-gradient(
        to right,
        #00d9ff,
        #ff006e,
        #7928ff
      );

      background-size:300%;

      animation:gradientMove 6s linear infinite;

      -webkit-background-clip:text;

      -webkit-text-fill-color:transparent;
    }

    @keyframes gradientMove{

      0%{
        background-position:0%;
      }

      100%{
        background-position:300%;
      }

    }

    .hero-description{

      max-width:850px;

      margin:auto;

      line-height:2;

      color:#bcc7d8;

      font-size:18px;

      margin-bottom:50px;
    }

    .hero-buttons{

      display:flex;

      justify-content:center;

      gap:20px;

      flex-wrap:wrap;
    }

    /* =========================================
       BUTTONS
    ========================================= */

    .btn-primary{

      padding:18px 34px;

      border-radius:60px;

      background:
      linear-gradient(45deg,#00d9ff,#ff006e);

      color:white;

      font-weight:600;

      transition:.4s;
    }

    .btn-primary:hover{

      transform:translateY(-5px);
    }

    .btn-outline{

      padding:18px 34px;

      border-radius:60px;

      border:
      1px solid rgba(255,255,255,.15);

      color:white;

      transition:.4s;
    }

    .btn-outline:hover{

      transform:translateY(-5px);

      border-color:#00d9ff;

      color:#00d9ff;
    }
    /* =========================================
       GITHUB
    ========================================= */

    .github-wrapper{

      display:grid;

      grid-template-columns:
      1.1fr .9fr;

      gap:40px;

      align-items:center;
    }

    .github-content h1{

      font-size:58px;

      line-height:1.1;

      margin-bottom:28px;
    }

    .github-content p{

      color:#b7c5d8;

      line-height:2;

      font-size:17px;

      margin-bottom:34px;

      max-width:700px;
    }

    .github-badge{

      display:inline-flex;

      align-items:center;

      gap:10px;

      padding:12px 22px;

      border-radius:50px;

      background:
      rgba(255,255,255,.05);

      border:
      1px solid rgba(255,255,255,.08);

      margin-bottom:28px;
    }

    .github-badge i{

      font-size:18px;
    }

    .github-stats{

      display:flex;

      flex-wrap:wrap;

      gap:18px;

      margin-bottom:38px;
    }

    .github-stat{

      padding:18px 24px;

      border-radius:22px;

      background:
      rgba(255,255,255,.04);

      border:
      1px solid rgba(255,255,255,.08);

      min-width:160px;
    }

    .github-stat h3{

      font-size:22px;

      margin-bottom:8px;
    }

    .github-stat span{

      color:#9eb0c4;

      font-size:14px;
    }

    .github-btn{

      display:inline-flex;

      align-items:center;

      gap:12px;

      padding:18px 34px;

      border-radius:60px;

      background:
      linear-gradient(
        45deg,
        #00d9ff,
        #ff00aa
      );

      color:white;

      font-weight:600;

      transition:.4s;
    }

    .github-btn:hover{

      transform:
      translateY(-6px);
    }

    /* RIGHT CARD */

    .github-card{

      position:relative;

      padding:36px 34px;

      border-radius:36px;

      background:
      rgba(255,255,255,.04);

      border:
      1px solid rgba(255,255,255,.08);

      overflow:hidden;

      text-align:center;

      transition:.45s ease;
    }

    .github-card:hover{

      transform:
      translateY(-10px);

      box-shadow:
      0 20px 60px
      rgba(255,0,170,.12);
    }

    .github-glow{

      position:absolute;

      width:280px;
      height:280px;

      background:#ff00aa;

      filter:blur(140px);

      opacity:.16;

      top:-120px;
      right:-120px;
    }

    .github-icon{

      width:92px;
    height:92px;

      border-radius:30px;

      display:flex;

      align-items:center;

      justify-content:center;

      margin:auto auto 26px;

      background:
      linear-gradient(
        45deg,
        #00d9ff,
        #ff00aa
      );

      position:relative;

      z-index:2;
    }

  .github-icon img{

  width:100%;

  height:100%;

  object-fit:cover;

  border-radius:26px;
}

    .github-card h2{

      font-size:34px;

      margin-bottom:14px;

      position:relative;

      z-index:2;
    }

    .github-card p{

      color:#b7c5d8;

      margin-bottom:24px;

      line-height:1.8;

      position:relative;

      z-index:2;
    }

    .repo-grid{

      display:grid;

      grid-template-columns:
      repeat(2,1fr);

      gap:16px;

      position:relative;

      z-index:2;
    }

    .repo-box{

       padding:16px 14px;

      border-radius:22px;

      background:
      rgba(255,255,255,.05);

      border:
      1px solid rgba(255,255,255,.08);
    }

    .repo-box strong{

      display:block;

      font-size:16px;

      margin-bottom:8px;
    }

    .repo-box span{

      color:#9eb0c4;

      font-size:13px;
    }
    /* =========================================
       SECTION
    ========================================= */

    .section{

      padding:100px 8%;
    }

    .section-title{

      font-size:62px;

      text-align:center;

      margin-bottom:60px;
    }

    /* =========================================
       STATS
    ========================================= */

    .stats{

      display:grid;

      grid-template-columns:
      repeat(4,1fr);

      gap:24px;
    }

    .stat-card{

      padding:40px;

      border-radius:30px;

      text-align:center;

      background:
      rgba(255,255,255,.04);

      border:
      1px solid rgba(255,255,255,.08);

      backdrop-filter:blur(14px);

      transition:.4s;
    }

    .stat-card:hover{

      transform:translateY(-10px);

      border-color:#00d9ff;
    }

    .stat-card h2{

      font-size:48px;

      margin-bottom:12px;
    }

    .stat-card p{

      color:#bcc7d8;
    }
.animated-skill{

  transition:
  opacity .25s ease,
  transform .25s ease;

  min-height:72px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  font-size:62px;

  line-height:1;
}
    /* =========================================
       TECH STACK
    ========================================= */

    .tech-stack{

      display:flex;

      flex-wrap:wrap;

      justify-content:center;

      gap:18px;
    }

    .tech{

      padding:16px 24px;

      border-radius:50px;

      background:
      rgba(255,255,255,.05);

      border:
      1px solid rgba(255,255,255,.08);

      transition:.4s;
    }

    .tech:hover{

      transform:translateY(-5px);

      border-color:#00d9ff;
    }

    /* =========================================
       ABOUT
    ========================================= */

    .about-grid{

      display:grid;

      grid-template-columns:
      1fr 1fr;

      gap:50px;

      align-items:center;
    }

    .about-image img{

      width:100%;

      border-radius:30px;
    }

    .about-content h2{

      font-size:52px;

      margin-bottom:24px;
    }

    .about-content p{

      color:#bcc7d8;

      line-height:2;

      margin-bottom:24px;
    }
    /* =========================================
       YOUTUBE
    ========================================= */

    .youtube-section{

      display:grid;

      grid-template-columns:
      1.2fr .8fr;

      gap:40px;

      align-items:center;
    }

    .youtube-content{

      position:relative;
    }

    .youtube-badge{

      display:inline-flex;

      align-items:center;

      gap:10px;

      padding:12px 22px;

      border-radius:50px;

      background:
      rgba(255,255,255,.05);

      border:
      1px solid rgba(255,255,255,.08);

      margin-bottom:28px;
    }

    .youtube-badge i{

      color:#ff0033;

      font-size:20px;
    }

    .youtube-content h1{

      font-size:64px;

      line-height:1.1;

      margin-bottom:28px;
    }

    .youtube-content p{

      color:#bcc7d8;

      line-height:2;

      font-size:17px;

      margin-bottom:36px;

      max-width:720px;
    }

    .youtube-stats{

      display:flex;

      flex-wrap:wrap;

      gap:18px;

      margin-bottom:40px;
    }

    .youtube-stat{

      padding:18px 24px;

      border-radius:22px;

      background:
      rgba(255,255,255,.04);

      border:
      1px solid rgba(255,255,255,.08);

      min-width:150px;
    }

    .youtube-stat h3{

      font-size:24px;

      margin-bottom:8px;
    }

    .youtube-stat span{

      color:#bcc7d8;

      font-size:14px;
    }

    .youtube-btn{

      display:inline-flex;

      align-items:center;

      gap:12px;

      padding:18px 32px;

      border-radius:60px;

      background:
      linear-gradient(
        45deg,
        #ff0033,
        #ff4d6d
      );

      color:white;

      font-weight:600;

      transition:.4s;
    }

    .youtube-btn:hover{

      transform:translateY(-6px);
    }

    .youtube-card{

  position:relative;

  padding:50px 40px;

  border-radius:36px;

  text-align:center;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.08);

  overflow:hidden;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  transition:.45s ease;

  cursor:pointer;
}

.youtube-card::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  radial-gradient(

    circle at top right,

    rgba(255,0,80,.22),

    transparent 55%

  );

  opacity:0;

  transition:.45s ease;
}

.youtube-card:hover{

  transform:
  translateY(-10px);

  border:
  1px solid rgba(255,255,255,.12);

  box-shadow:

  0 20px 60px
  rgba(255,0,80,.12);
}

.youtube-card:hover::before{

  opacity:1;
}

.youtube-card img{

  transition:.45s ease;
}

.youtube-card:hover img{

  transform:
  scale(1.06)
  rotate(-2deg);
}

    .youtube-glow{

      position:absolute;

      width:300px;
      height:300px;

      background:#ff0033;

      filter:blur(140px);

      opacity:.18;

      top:-120px;
      right:-120px;
    }

    .youtube-card img{

      width:130px;
      height:130px;

      border-radius:32px;

      object-fit:cover;

      margin-bottom:26px;

      position:relative;

      z-index:2;
    }

    .youtube-card h2{

      font-size:36px;

      margin-bottom:14px;

      position:relative;

      z-index:2;
    }

    .youtube-card p{

      color:#bcc7d8;

      line-height:1.8;

      margin-bottom:34px;

      position:relative;

      z-index:2;
    }

 .youtube-mini-stats{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:14px;

  position:relative;

  z-index:2;

  width:100%;
}

    .youtube-mini-stats div{

      padding:18px 14px;

      border-radius:20px;

      background:
      rgba(255,255,255,.05);

      border:
      1px solid rgba(255,255,255,.06);
    }

    .youtube-mini-stats strong{

      display:block;

      font-size:18px;

      margin-bottom:8px;
    }

    .youtube-mini-stats span{

      color:#bcc7d8;

      font-size:13px;
    }
    .youtube-meta{

    margin-bottom:0px;
}

.youtube-meta h4{

    font-size:18px;

    font-weight:500;

    color:#9eb0c4;

    margin-bottom:16px;
}

.youtube-stats{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;
}

.youtube-stats span{

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.08);

    color:#dbe6f3;

    font-size:14px;

    font-weight:500;
}
    /* =========================================
       SERVICES
    ========================================= */

    .services-grid{

      display:grid;

      grid-template-columns:
      repeat(3,1fr);

      gap:30px;
    }

    .service-card{

      padding:35px;

      border-radius:32px;

      background:
      rgba(255,255,255,.04);

      border:
      1px solid rgba(255,255,255,.08);

      transition:.4s;
    }

    .service-card:hover{

      transform:translateY(-10px);

      border-color:#00d9ff;
    }

    .service-card i{

      font-size:42px;

      margin-bottom:24px;

      color:#00d9ff;
    }

    .service-card h3{

      font-size:28px;

      margin-bottom:18px;
    }

    .service-card p{

      color:#bcc7d8;

      line-height:1.9;
    }
/* =========================================
   SERVICES NEW UI
========================================= */

.services-grid{

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(320px,1fr)
  );

  gap:28px;
}

.service-card{

  position:relative;

  overflow:hidden;

  background:#0b1020;

  border:
  1px solid rgba(255,255,255,.06);

  border-radius:34px;

  padding:38px;

  transition:.4s ease;
}

.service-card:hover{

  transform:
  translateY(-8px);

  border-color:
  rgba(0,217,255,.22);

  box-shadow:
  0 20px 60px rgba(0,0,0,.35);
}

.service-glow{

  position:absolute;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
  linear-gradient(
    45deg,
    #00d9ff,
    #ff00aa
  );

  filter:blur(100px);

  opacity:.12;

  top:-140px;
  right:-140px;

  transition:.45s ease;
}

.service-card:hover .service-glow{

  opacity:.22;
}

.service-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:30px;
}

.service-icon{

  width:74px;
  height:74px;

  border-radius:24px;

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.08);

  display:flex;

  align-items:center;

  justify-content:center;
}

.service-icon i{

  font-size:36px;

  color:#00d9ff;
}

.service-number{

  font-size:16px;

  color:#7f90a6;

  font-weight:600;
}

.service-card h3{

  font-size:38px;

  line-height:1.2;

  margin-bottom:20px;
}

.service-card p{

  color:#9eb0c4;

  font-size:18px;

  line-height:1.9;
}
    /* =========================================
       PROJECTS / BLOGS
    ========================================= */

    .cards-grid{

      display:grid;

      grid-template-columns:
      repeat(3,1fr);

      gap:30px;
    }

    .glass-card{

      padding:30px;

      border-radius:30px;

      background:
      rgba(255,255,255,.04);

      border:
      1px solid rgba(255,255,255,.08);

      transition:.4s;
    }

    .glass-card:hover{

      transform:translateY(-10px);

      border-color:#00d9ff;
    }

    .glass-card img{

      width:100%;

      border-radius:20px;

      margin-bottom:24px;
    }

    .glass-card h3{

      font-size:28px;

      margin-bottom:18px;
    }

    .glass-card p{

      color:#bcc7d8;

      line-height:1.9;
    }

    /* =========================================
       CTA
    ========================================= */

    .cta{

      text-align:center;

      padding:120px 8%;
    }

    .cta h1{

      font-size:72px;

      margin-bottom:30px;
    }

    .cta p{

      max-width:800px;

      margin:auto;

      line-height:2;

      color:#bcc7d8;

      margin-bottom:50px;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media(max-width:1100px){

      .stats,
      .services-grid,
      .cards-grid{

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

      .about-grid{

        grid-template-columns:1fr;
      }
      .youtube-section{

        grid-template-columns:1fr;
      }

      .youtube-content h1{

        font-size:42px;
      }

      .youtube-mini-stats{

        grid-template-columns:1fr;
      }
    }

    @media(max-width:768px){
      /* Services new UI  */

      .service-card{

  padding:28px;
}

.service-card h3{

  font-size:30px;
}

.service-card p{

  font-size:16px;
}

.service-icon{

  width:62px;
  height:62px;
}

.service-icon i{

  font-size:30px;
}
      /* =========================================
         GITHUB MOBILE
      ========================================= */

      .github-wrapper{

        grid-template-columns:1fr;

        gap:34px;
      }

      .github-content{

        text-align:center;
      }

      .github-content h1{

        font-size:42px;

        line-height:1.15;
      }

      .github-content p{

        font-size:15px;

        line-height:1.9;

        margin-bottom:28px;
      }

      .github-stats{

        justify-content:center;
      }

      .github-stat{

        min-width:unset;

        flex:1;
      }

      .github-btn{

        width:100%;

        justify-content:center;
      }

      .github-card{

        padding:30px 22px;
      }

      .github-icon{

        width:78px;
        height:78px;
      }

      .github-card h2{

        font-size:28px;
      }

      .repo-grid{

        grid-template-columns:1fr;

        gap:14px;
      }

      .repo-box{

        padding:16px;
      }
      .hero{

        padding:150px 5% 80px;
      }

      .section{

        padding:80px 5%;
      }

      .hero-title{

        font-size:46px;
      }

      .section-title{

        font-size:42px;
      }

      .cta h1{

        font-size:42px;
      }

      .hero-description,
      .cta p{

        font-size:15px;
      }

      .stats,
      .services-grid,
      .cards-grid{

        grid-template-columns:1fr;
      }

      .hero-buttons{

        flex-direction:column;
      }

      .btn-primary,
      .btn-outline{

        width:100%;
      }

    }
/* =========================================
   TECH STACK
========================================= */

.tech-section{

  overflow:hidden;
}

.tech-marquee{

  width:100%;

  overflow:hidden;

  position:relative;

  margin-top:24px;

  padding:10px 0;
}

.tech-track{

  display:flex;

  align-items:center;

  gap:20px;

  width:max-content;

  flex-wrap:nowrap;
}

.tech-track-left{

  animation:
  techLeft 55s linear infinite;
}

.tech-track-right{

  animation:
  techRight 55s linear infinite;
}

.tech-pill{

  display:flex;

  align-items:center;

  gap:12px;

  padding:16px 24px;

  border-radius:18px;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.08);

  color:white;

  font-size:16px;

  font-weight:500;

  white-space:nowrap;

  transition:.35s ease;

  flex-shrink:0;
}

.tech-pill i{

  color:#ff0077;

  font-size:20px;
}

.tech-pill:hover{

  transform:
  translateY(-4px);

  background:
  rgba(255,255,255,.07);

  border-color:
  rgba(255,255,255,.18);
}

/* LEFT */

@keyframes techLeft{

  from{

    transform:
    translateX(0);
  }

  to{

    transform:
    translateX(calc(-50% - 10px));
  }
}

/* RIGHT */

@keyframes techRight{

  from{

    transform:
    translateX(calc(-50% - 10px));
  }

  to{

    transform:
    translateX(0);
  }
}