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

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

    a{
      text-decoration:none;
      color:inherit;
    }

    ul{
      list-style:none;
    }

    img{
      max-width:100%;
      display:block;
    }

    .container{
      width:min(92%,1400px);
      margin:auto;
    }

    /* =================================
       NAVBAR
    ================================= */

    .navbar{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      z-index:100;
      padding:22px 0;
    }

    .nav-wrapper{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .logo img{
      width:44px;
      filter:drop-shadow(0 0 10px rgba(38,119,255,.5));
    }

    .logo h2{
      font-size:30px;
      font-weight:700;
      letter-spacing:3px;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:34px;
    }

    .nav-links a{
      font-size:14px;
      font-weight:500;
      color:#fff;
      transition:.3s;
    }

    .nav-links a:hover{
      color:#2d7cff;
    }

    .nav-btn{
      padding:15px 26px;
      border:none;
      border-radius:14px;
      background:linear-gradient(90deg,#1f67ff,#3d8bff);
      color:#fff;
      font-size:14px;
      font-weight:600;
      cursor:pointer;
      transition:.3s;
      white-space:nowrap;
    }

    .nav-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 25px rgba(45,124,255,.35);
    }

   /* =========================
   HAMBURGER
========================= */

.hamburger{
  width:48px;
  height:48px;
  border-radius:12px;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);

  cursor:pointer;
  transition:.3s;
  flex-shrink:0;
}

.hamburger i{
  font-size:20px;
  color:#fff;
}

.hamburger:hover{
  background:#1d66ff;
}

/* =========================
   MOBILE MENU
========================= */

@media(max-width:991px){

  /* NAVBAR LAYOUT */

  .nav-wrapper{
    gap:12px;
  }

  .logo h2{
    font-size:24px;
  }

  /* SHOW HAMBURGER */

  .hamburger{
    display:flex;
  }

  /* KEEP BUTTON VISIBLE */

  .nav-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px 18px;
    font-size:12px;

    border-radius:10px;
    flex-shrink:0;
  }

  /* MOBILE DROPDOWN */

  .nav-links{
    position:absolute;
    top:90px;
    left:50%;
    transform:translateX(-50%);

    width:92%;
    padding:30px;

    background:rgba(2,8,23,.96);

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

    backdrop-filter:blur(14px);

    border-radius:20px;

    flex-direction:column;
    align-items:flex-start;
    gap:24px;

    display:none;

    box-shadow:
    0 15px 40px rgba(0,0,0,.35);
  }

  .nav-links.active{
    display:flex;
  }

  .nav-links li{
    width:100%;
  }

  .nav-links a{
    font-size:15px;
    width:100%;
    display:block;

    transition:.3s;
  }

  .nav-links a:hover{
    color:#2d7cff;
    padding-left:6px;
  }

}

/* =========================
   EXTRA SMALL DEVICES
========================= */

@media(max-width:480px){

  .navbar{
    padding:16px 0;
  }

  .logo{
    gap:8px;
  }

  .logo img{
    width:36px;
  }

  .logo h2{
    font-size:20px;
    letter-spacing:2px;
  }

  .nav-wrapper{
    gap:8px;
  }

  .nav-btn{
    padding:10px 14px;
    font-size:11px;
    border-radius:10px;
  }

  .hamburger{
    width:42px;
    height:42px;
    border-radius:10px;
  }

  .hamburger i{
    font-size:18px;
  }

  .nav-links{
    top:80px;
    padding:24px;
    border-radius:16px;
  }

}
@media (max-width:991px){

  /* hide desktop menu */
  .nav-links{
    display:none;
  }

  /* navbar row better alignment */
  .nav-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  /* logo small */
  .logo h2{
    font-size:22px;
  }

  .logo img{
    width:38px;
  }

  /* right side group */
  .nav-wrapper{
    position:relative;
  }

  /* RIGHT SIDE WRAPPER FIX */
  .nav-right{
    display:flex;
    align-items:center;
    gap:5px;
  }

  /* button visible but small */
  .nav-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px 14px;
    font-size:11px;

    border-radius:10px;
    white-space:nowrap;
  }

  /* hamburger visible */
  .hamburger{
    display:flex;
  }

}

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

    .hero{
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      overflow:hidden;
      padding-bottom:120px;

      background:
      linear-gradient(to right,
      rgba(1,8,26,0.96) 0%,
      rgba(1,8,26,0.92) 40%,
      rgba(1,8,26,0.82) 70%,
      rgba(1,8,26,0.92) 100%),

      url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2070&auto=format&fit=crop')
      center/cover no-repeat;
    }

    /* right network glow */

    .hero::before{
      content:'';
      position:absolute;
      right:-180px;
      top:50%;
      transform:translateY(-50%);
      width:850px;
      height:850px;

      background:
      radial-gradient(circle,
      rgba(38,119,255,.35),
      transparent 65%);

      filter:blur(12px);
      z-index:1;
    }

    /* LEFT BOTTOM CURVE */

    .hero::after{
      content:'';
      position:absolute;
      left:-15%;
      bottom:-140px;

      width:130%;
      height:320px;

      background:
      radial-gradient(circle at center,
      rgba(33,150,243,.45) 0%,
      rgba(33,150,243,.18) 35%,
      transparent 72%);

      filter:blur(18px);
      z-index:1;
    }

    .hero-wrapper{
      position:relative;
      z-index:2;

      width:100%;
      display:grid;
      grid-template-columns:1fr 1fr;
      align-items:center;
      gap:40px;

      padding-top:140px;
    }

    /* =================================
       LEFT SIDE
    ================================= */

    .hero-left{
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .hero-logo-box{
      text-align:center;
    }

    .hero-logo-box img{
      width:240px;

      filter:
      drop-shadow(0 0 25px rgba(38,119,255,.5))
      drop-shadow(0 0 45px rgba(38,119,255,.35));
    }

    .hero-logo-box h1{
      margin-top:18px;
      font-size:70px;
      font-weight:300;
      letter-spacing:14px;
    }

    /* =================================
       RIGHT SIDE
    ================================= */

    .hero-content{
      max-width:650px;
    }

    .hero-content h2{
      font-size:clamp(38px,4vw,62px);
      line-height:1.08;
      font-weight:700;
      margin-bottom:28px;
    }

    .hero-content p{
      font-size:clamp(15px,1.5vw,22px);
      line-height:1.8;
      color:#d7d7d7;
      margin-bottom:38px;
      max-width:600px;
    }

    .hero-buttons{
      display:flex;
      align-items:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .primary-btn{
      padding:18px 34px;
      border:none;
      border-radius:14px;

      background:
      linear-gradient(90deg,#1d66ff,#3d8bff);

      color:#fff;
      font-size:15px;
      font-weight:600;
      cursor:pointer;
      transition:.3s;
    }

    .primary-btn:hover{
      transform:translateY(-3px);

      box-shadow:
      0 12px 30px rgba(45,124,255,.35);
    }

    .outline-btn{
      padding:18px 34px;
      border-radius:14px;
      background:transparent;
      border:2px solid rgba(255,255,255,.75);

      color:#fff;
      font-size:15px;
      font-weight:600;
      cursor:pointer;
      transition:.3s;
    }

    .outline-btn:hover{
      background:#fff;
      color:#000;
    }

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

    @media (max-width:1200px){

      .nav-links{
        gap:22px;
      }

      .hero-wrapper{
        gap:20px;
      }

      .hero-logo-box h1{
        font-size:58px;
      }

    }

    @media (max-width:991px){

      .nav-links{
        display:none;
      }

      .hero{
        min-height:auto;
        padding-bottom:100px;
      }

      .hero-wrapper{
        grid-template-columns:1fr;
        text-align:center;
        padding-top:140px;
      }

      .hero-content{
        margin:auto;
      }

      .hero-buttons{
        justify-content:center;
      }

      .hero-logo-box img{
        width:190px;
      }

      .hero-logo-box h1{
        font-size:48px;
        letter-spacing:10px;
      }

      .hero::before{
        right:-250px;
      }

    }

    @media (max-width:768px){

      .navbar{
        padding:18px 0;
      }

      .logo h2{
        font-size:24px;
      }

      .nav-btn{
        padding:12px 18px;
        font-size:12px;
      }

      .hero-wrapper{
        padding-top:120px;
      }

      .hero-logo-box img{
        width:160px;
      }

      .hero-logo-box h1{
        font-size:40px;
        letter-spacing:8px;
      }

      .hero-content h2{
        line-height:1.15;
      }

      .hero-buttons{
        width:100%;
      }

      .primary-btn,
      .outline-btn{
        width:100%;
      }

      .hero::after{
        height:250px;
        bottom:-120px;
      }

    }

    @media (max-width:480px){

      .container{
        width:92%;
      }

      .hero{
        padding-bottom:80px;
      }

      .hero-wrapper{
        padding-top:110px;
      }

      .hero-logo-box img{
        width:130px;
      }

      .hero-logo-box h1{
        font-size:32px;
        letter-spacing:6px;
      }

      .hero-content p{
        line-height:1.7;
      }

      .primary-btn,
      .outline-btn{
        padding:16px 24px;
        font-size:14px;
      }

      .hero::before{
        width:500px;
        height:500px;
      }

      .hero::after{
        width:160%;
        left:-30%;
      }

    }

    /* ------------------------------2nd---------------- */
/* ================= ABOUT SECTION ================= */

.about{
  padding: 35px 0;
  background:#f7f9ff;
  color:#0b1220;
}

.about-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
}

/* LEFT */
.about-content .tag{
  font-size:13px;
  font-weight:600;
  color:#2d6cff;
  letter-spacing:2px;
}

.about-content h2{
  font-size:clamp(28px,3.5vw,48px);
  margin:14px 0;
  line-height:1.2;
}

.about-content p{
  font-size:15px;
  line-height:1.8;
  color:#4a5568;
  max-width:500px;
}

/* RIGHT IMAGE */
.about-image img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
}

/* FEATURES */
.features{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  text-align:center;
}

.feature{
  padding:20px;
  border-radius:14px;
  background:#f7f9ff;
     box-shadow: 8px 0 1px -5px rgba(0, 0, 0, 0.05);
  transition:.3s;
}

.feature i{
  font-size:26px;
  color:#2d6cff;
  margin-bottom:10px;
}

.feature h4{
  font-size:15px;
  font-weight:600;
}

.feature:hover{
  transform:translateY(-6px);
}

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

@media(max-width:991px){

  .about-wrapper{
    grid-template-columns:1fr;
    text-align:center;
  }

  .about-content p{
    margin:auto;
  }

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

@media(max-width:576px){

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

  .about{
    padding:60px 0;
  }

  .about-content h2{
    font-size:26px;
  }
}