/* =========================================================
   RESPONSIVE ADDITIONS
   Base design intent: 1440px (your existing second.css)
   Append this AFTER second.css, or @import it at the end.

   NOTE: Most of your existing rules (.hero-content h1,
   .nav-card, .top-nav, .overflow, etc.) live OUTSIDE any
   @layer block, which means they're "unlayered" and will
   always beat anything inside @layer ring-particles /
   tokens / etc. So these overrides are also written
   unlayered, relying on source order to win.
   ========================================================= */


/* ---------------------------------------------------------
   1. GLOBAL FLUID FIXES (apply at every size, no media query)
   --------------------------------------------------------- */

/* Fixes the fixed 96px line-height that breaks on small text */
.hero-content h1 {
  font-size: clamp(28px, 4.6vw, 65px);
  line-height: 1.25;
  max-width: 90vw;
}

/* Fixes the invalid CSS values + makes it fluid */
.video-heading {
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.3;
  letter-spacing: normal;
  max-width: 90vw;
}

.scroll-text p {
  font-size: clamp(14px, 2.2vw, 32px);
  line-height: 1.4;
  letter-spacing: normal;
}

.scroll-text i {
  font-size: clamp(1.2rem, 2vw, 2rem);
}

/* Button scales instead of staying at 22px / -2px tracking */
.hero-btn {
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: normal;
  padding: clamp(10px, 1.3vw, 13px) clamp(18px, 2.1vw, 27px);
  gap: clamp(12px, 1.8vw, 26px);
  max-width: 100%;
}

/* .hero-icon was used in the HTML but had no size set —
   borrowing the sizing logic that was written for .login-icon */
.hero-icon,
.login-icon {
  /* width: clamp(48px, 9vw, 170px);
  height: clamp(48px, 9vw, 170px); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-icon i {
  font-size: clamp(16px, 1.6vw, 22px);
}

.logo img {
  width: clamp(90px, 11vw, 170px);
  height: auto;
}

.login-btn {
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.1vw, 15px);
  white-space: nowrap;
}

.nav-icons {
  font-size: clamp(15px, 1.3vw, 18px);
}

/* hero-content gap shouldn't stay locked at 40px on small heights */
.hero-content {
  gap: clamp(20px, 4vw, 40px);
  padding: 0 5vw;
  text-align: center;
}


/* ---------------------------------------------------------
   2. LARGE DESKTOP / LAPTOP  (≤1280px)
   --------------------------------------------------------- */
@media (max-width: 1280px) {
  .top-nav {
    width: 94%;
  }

  .nav-card {
    width: 300px;
    padding: 16px 14px;
  }

  .overflow {
    margin: 0 -240px;
  }
}


/* ---------------------------------------------------------
   3. TABLET LANDSCAPE  (≤1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-section {
    min-height: 100vh;
    height: auto;
    padding-block: 60px;
  }

  .nav-card {
    width: 280px;
  }

  .nav-items {
    gap: 12px;
  }

  .overflow {
    margin: 0 -120px;
  }

  .video-section {
    padding: 60px 5vw;
  }
}


/* ---------------------------------------------------------
   4. TABLET PORTRAIT  (≤768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-section,
  #welcome3,
  .video-section {
    min-height: 100vh;
    height: auto;
    padding-block: 80px;
  }

  /* Stack logo + nav card instead of squeezing them side by side */
  .top-nav {
    position: static;
    transform: none;
    width: 92%;
    margin: 24px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .logo img {
    width: 130px;
  }

  .nav-card {
    width: 100%;
    max-width: 380px;
  }

  /* Avatars badge can overlap awkwardly once nav-card is full width */
  .avatars {
    display: none;
  }

  .hero-content {
    gap: 24px;
    margin-top: 40px;
  }

  .hero-btn {
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }

  .scroll-text {
    bottom: 24px;
    gap: 8px;
  }

  .overflow {
    margin: 0 -40px;
  }

  .speckled-overlay {
    padding-block: 120px 60px;
  }
}


/* ---------------------------------------------------------
   5. MOBILE  (≤480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .top-nav {
    width: 90%;
  }

  .nav-card {
    padding: 14px 12px;
    border-radius: 12px;
  }

  .nav-items {
    gap: 10px;
  }

  .nav-icons {
    gap: 8px;
  }

  .login-btn {
    padding: 8px 18px;
    font-size: 13px;
  }

  /* Let the Hindi line wrap naturally instead of forcing a break */
  .hero-content h1 br {
    display: none;
  }

  .hero-btn {
    padding: 10px 16px;
    flex-wrap: nowrap;
  }

  .hero-icon,
  .login-icon {
    width: 44px;
    height: 44px;
  }

  .scroll-text p {
    letter-spacing: 0;
  }

  .overflow {
    margin: 0;
  }
}


/* ---------------------------------------------------------
   6. SMALL MOBILE  (≤360px)
   --------------------------------------------------------- */
@media (max-width: 360px) {
  .logo img {
    width: 96px;
  }

  .nav-card {
    max-width: 100%;
  }

  .hero-icon,
  .login-icon {
    width: 40px;
    height: 40px;
  }

  .hero-content h1 {
    font-size: 26px;
  }
}

/* =========================================================
   RESPONSIVE ADDITIONS
   Base design intent: 1440px (your existing second.css)
   Append this AFTER second.css, or @import it at the end.

   NOTE: Most of your existing rules (.hero-content h1,
   .nav-card, .top-nav, .overflow, etc.) live OUTSIDE any
   @layer block, which means they're "unlayered" and will
   always beat anything inside @layer ring-particles /
   tokens / etc. So these overrides are also written
   unlayered, relying on source order to win.
   ========================================================= */


/* ---------------------------------------------------------
   1. GLOBAL FLUID FIXES (apply at every size, no media query)
   --------------------------------------------------------- */

/* Fixes the fixed 96px line-height that breaks on small text */
.hero-content h1 {
  font-size: clamp(28px, 4.6vw, 65px);
  line-height: 1.25;
  max-width: 90vw;
}

/* Fixes the invalid CSS values + makes it fluid */
.video-heading {
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.3;
  letter-spacing: normal;
  max-width: 90vw;
}

.scroll-text p {
  font-size: clamp(14px, 2.2vw, 32px);
  line-height: 1.4;
  letter-spacing: normal;
}

.scroll-text i {
  font-size: clamp(1.2rem, 2vw, 2rem);
}

/* Button scales instead of staying at 22px / -2px tracking */
.hero-btn {
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: normal;
  padding: clamp(10px, 1.3vw, 13px) clamp(18px, 2.1vw, 27px);
  gap: clamp(12px, 1.8vw, 26px);
  max-width: 100%;
}

/* .hero-icon was used in the HTML but had no size set —
   borrowing the sizing logic that was written for .login-icon */
.hero-icon,
.login-icon {
  /* width: clamp(48px, 9vw, 170px);
  height: clamp(48px, 9vw, 170px); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-icon i {
  font-size: clamp(16px, 1.6vw, 22px);
}

.logo img {
  width: clamp(90px, 11vw, 170px);
  height: auto;
}

.login-btn {
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.1vw, 15px);
  white-space: nowrap;
}

.nav-icons {
  font-size: clamp(15px, 1.3vw, 18px);
}

/* hero-content gap shouldn't stay locked at 40px on small heights */
.hero-content {
  gap: clamp(20px, 4vw, 40px);
  padding: 0 5vw;
  text-align: center;
}


/* ---------------------------------------------------------
   2. LARGE DESKTOP / LAPTOP  (≤1280px)
   --------------------------------------------------------- */
@media (max-width: 1280px) {
  .top-nav {
    width: 94%;
  }

  .nav-card {
    width: 300px;
    padding: 16px 14px;
  }

  .overflow {
    margin: 0 -240px;
  }
}


/* ---------------------------------------------------------
   3. TABLET LANDSCAPE  (≤1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-section {
    min-height: 100vh;
    height: auto;
    padding-block: 60px;
  }

  .nav-card {
    width: 280px;
  }

  .nav-items {
    gap: 12px;
  }

  .overflow {
    margin: 0 -120px;
  }

  .video-section {
    padding: 60px 5vw;
  }
}


/* ---------------------------------------------------------
   4. TABLET PORTRAIT  (≤768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-section,
  #welcome3,
  .video-section {
    min-height: 100vh;
    height: auto;
    padding-block: 80px;
  }

  /* Stack logo + nav card instead of squeezing them side by side */
  .top-nav {
    position: static;
    transform: none;
    width: 92%;
    margin: 24px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .logo img {
    width: 130px;
  }

  .nav-card {
    width: 100%;
    max-width: 380px;
  }

  /* Avatars badge can overlap awkwardly once nav-card is full width */
  .avatars {
    display: none;
  }

  .hero-content {
    gap: 24px;
    margin-top: 40px;
  }

  .hero-btn {
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }

  .scroll-text {
    bottom: 24px;
    gap: 8px;
  }

  .overflow {
    margin: 0 -40px;
  }

  .speckled-overlay {
    padding-block: 120px 60px;
  }
}


/* ---------------------------------------------------------
   5. MOBILE  (≤480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .top-nav {
    width: 90%;
  }

  .nav-card {
    padding: 14px 12px;
    border-radius: 12px;
  }

  .nav-items {
    gap: 10px;
  }

  .nav-icons {
    gap: 8px;
  }

  .login-btn {
    padding: 8px 18px;
    font-size: 13px;
  }

  /* Let the Hindi line wrap naturally instead of forcing a break */
  .hero-content h1 br {
    display: none;
  }

  .hero-btn {
    padding: 10px 16px;
    flex-wrap: nowrap;
  }

  .hero-icon,
  .login-icon {
    width: 44px;
    height: 44px;
  }

  .scroll-text p {
    letter-spacing: 0;
  }

  .overflow {
    margin: 0;
  }
}


/* ---------------------------------------------------------
   6. SMALL MOBILE  (≤360px)
   --------------------------------------------------------- */
@media (max-width: 360px) {
  .logo img {
    width: 96px;
  }

  .nav-card {
    max-width: 100%;
  }

  .hero-icon,
  .login-icon {
    width: 40px;
    height: 40px;
  }

  .hero-content h1 {
    font-size: 26px;
  }
}


/* ---------------------------------------------------------
   7. LARGE / ULTRAWIDE DESKTOPS  (≥1920px)
   ---------------------------------------------------------
   Your clamp() values above already cap text/icon sizes at
   their 1440px max, so they won't grow further here. The
   issue on very wide screens is everything else: fixed-px
   elements (.nav-card, .overflow margins) start to look
   small/sparse relative to the viewport, and full-width
   sections can feel like they're "floating" with too much
   empty space on the sides.

   This block centers the main content in a max-width
   wrapper and nudges a few fixed-px values back up so the
   composition still feels intentional on 1920px+ / 2560px+
   displays.
   --------------------------------------------------------- */
@media (min-width: 1920px) {
  /* Constrain and center the hero/nav content so it doesn't
     stretch edge-to-edge on ultrawide monitors */
  .top-nav,
  .hero-content,
  .video-section {
    max-width: 1800px;
    margin-inline: auto;
  }

  .top-nav {
    width: 100%;
  }

  /* Scale the nav card and logo up slightly beyond their
     1440px values to match the larger canvas */
  .nav-card {
    width: 380px;
    padding: 22px 18px;
  }

  .logo img {
    width: 190px;
  }

  /* Let the background bleed further on a wider canvas */
  .overflow {
    margin: 0 -560px;
  }

  /* Slightly larger scroll-text icons to match the bigger canvas */
  .scroll-text i {
    font-size: 2.2rem;
  }
}


/* ---------------------------------------------------------
   8. SUPER ULTRAWIDE / 4K  (≥2560px)
   --------------------------------------------------------- */
@media (min-width: 2560px) {
  .top-nav,
  .hero-content,
  .video-section {
    max-width: 2200px;
  }

  .nav-card {
    width: 420px;
    padding: 26px 22px;
  }

  .logo img {
    width: 220px;
  }

  .overflow {
    margin: 0 -720px;
  }
}