/* Extra small devices (portrait phones) */
@media (max-width: 479px) {
  body {
    font-size: 13px;
  }

  .border-white{
    position: relative;
    top: 150px;
  }

  h1{
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

  .strong{
    color: orange;
  }

  .pair{
    color: rgb(89, 50, 179);
  }

  .elevate{
    position: relative;
    bottom: 330px;
  }

  #products{
    position: relative;
    bottom: 200px;
  }

    :root {
      --sp-primary: orange; /* indigo-600 */
      --sp-secondary: purple; /* sky-500 */
      --sp-dark: #0b1020; /* custom deep navy */
    }

    .upper {
      position: relative;
      isolation: isolate; /* ensure pseudo elements layer correctly */
      margin: 2.5rem auto 0;
      padding: clamp(1.25rem, 2.5vw + 0.5rem, 2.5rem);
      max-width: 72rem; /* 1152px */
      color: #0b1020;
      text-align: center;
      border-radius: 1.5rem; /* xl */
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08), 0 1px 0 rgba(2, 6, 23, 0.04) inset;
      backdrop-filter: blur(6px);
      border: 1px solid rgba(176, 194, 235, 0.06);
      display: block;
      top: 30px;
    }

    .upper::before {
      /* soft glow accent */
      content: "";
      position: absolute;
      inset: -40%;
      background: conic-gradient(from 180deg at 50% 50%, rgba(79, 70, 229, 0.07), rgba(14, 165, 233, 0.07), rgba(79, 70, 229, 0.07));
      filter: blur(50px);
      z-index: -1;
    }

    .upper h1 {
      font-size: clamp(1.75rem, 3vw + 0.8rem, 3rem);
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 0.5rem;
      color: #0f172a; /* slate-900 */
    }

    .upper p {
      font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
      color: #334155; /* slate-700 */
      margin: 0 auto;
      max-width: 58ch;
    }

    .upper .strong {
      color: var(--sp-primary);
      position: relative;
    }

    .upper .pair {
      color: var(--sp-secondary);
      position: relative;
    }

    /* subtle underline flourish on brand words */
    .upper .strong::after,
    .upper .pair::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -0.25rem;
      margin: 0 auto;
      height: 6px;
      width: 100%;
      max-width: 6ch;
      border-radius: 9999px;
      background: currentColor;
      opacity: 0.15;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .upper:hover .strong::after,
    .upper:hover .pair::after {
      transform: scaleX(1);
    }

    /* optional floating sheen */
    @keyframes shimmer {
      0% { transform: translateX(-100%) rotate(10deg); }
      100% { transform: translateX(200%) rotate(10deg); }
    }
    .upper::after {
      content: "";
      position: absolute;
      top: 0; left: -20%;
      width: 40%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
      mix-blend-mode: soft-light;
      animation: shimmer 4.5s linear infinite;
      pointer-events: none;
    }

    /* Small screens: give it breathing room */
    @media (max-width: 480px) {
      .upper { margin-top: 1.25rem; border-radius: 1rem; }
    }

    /* Fix: bootstrap images should not stretch weirdly */
    .object-fit-contain { object-fit: contain; }

    /* Dropdown basic show/hide for desktop */
    .dropdown:hover .dropdown-menu { display: block; }
} 



/* Small devices (landscape phones) */
@media (min-width: 480px) and (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 15px;
  }
}

/* Large devices (small laptops) */
@media (min-width: 992px) and (max-width: 1199px) {
  body {
    font-size: 16px;
  }
}

/* Extra large devices (desktops) */
@media (min-width: 1200px) and (max-width: 1599px) {
  body {
    font-size: 17px;
  }
}

/* Ultra-wide (4K displays, TVs) */
@media (min-width: 1600px) {
  body {
    font-size: 18px;
  }
}

/* Portrait mode */
@media (orientation: portrait) {
  body {
    background-color: #f0f8ff;
  }
}

/* Landscape mode */
@media (orientation: landscape) {
  body {
    background-color: #fff8dc;
  }
}

/* Touch-enabled devices */
@media (hover: none) and (pointer: coarse) {
  body {
    background-color: #f5f5f5;
  }
}

/* Show only on small screens */
@media (max-width: 767px) {
  .hero-image {
    display: none !important;
  }
  .hero-images {
    display: flex !important;
  }
}

/* Show only on medium and larger screens */
@media (min-width: 768px) {
  .hero-image {
    display: flex !important;
  }
  .hero-images {
    display: none !important;
  }
}