.star-bg{background-image:radial-gradient(transparent,rgba(0,0,0,.6)),url('https://images.unsplash.com/photo-1526481280698-8fcc13fd938b?q=80&w=1600&auto=format&fit=crop');background-size:cover;background-position:center;background-color:#0b0b16}
    .blob{position:relative}
    .blob::before{content:"";position:absolute;inset:-14%;background:radial-gradient(120px 120px at 20% 25%,#ff5bbd33 0,transparent 60%),radial-gradient(140px 140px at 80% 70%,#6b4bff33 0,transparent 60%),#ffffff;border-radius:48% 52% 46% 54% / 54% 44% 56% 46%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.12));}
    .blob > img{position:relative;z-index:1;border-radius:42% 58% 40% 60% / 56% 40% 60% 44%;}
    .count-pill{box-shadow:0 10px 24px rgba(0,0,0,.18)}
    .card{box-shadow:0 15px 35px rgba(0,0,0,.08)}
    .topbar a{opacity:.9}

    
/* Hero background */
.star-bg {
  position: relative;            /* you already have 'relative' class, this is for safety */
  min-height: 90vh;              /* full hero height */
  background-image: url('images/home.jpg');
  background-size: cover;        /* fill area */
  background-position: center;   /* keep subject centered */
  background-repeat: no-repeat;
}




/* Optional: dark overlay for text contrast */
.star-bg::before {
  content: "";
  position: absolute;
  inset: 0;
   
  pointer-events: none;
}
.blob-shape{
  position:absolute;
  inset:-1.5rem;           /* how far the glow extends */
  z-index:0;
  pointer-events:none;
  opacity:.75;
  filter:blur(32px);
  border-radius:32px;
  background:
    radial-gradient(50% 50% at 25% 25%, rgba(14,165,233,.28), transparent 60%),
    radial-gradient(45% 45% at 75% 65%, rgba(236,72,153,.28), transparent 60%);
}


.hero-media {
  position: relative;      /* same as Tailwind 'relative' */
  max-width: 600px;
  width: 100%;
  margin-left: auto;       /* ✅ moves whole block to the right */
}

/* background glow */
.hero-media-bg {
  position: absolute;      /* 'absolute' */
  inset: -1.5rem;          /* roughly '-inset-6' */
  z-index: -10;            /* '-z-10' */
  filter: blur(24px);      /* 'blur-3xl' */
  opacity: 0.7;
  margin-left: -10% !important;
  pointer-events: none;
    height: 620px !important;  
  background:
    radial-gradient(50% 50% at 25% 25%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(45% 45% at 75% 65%, rgba(236,72,153,.25), transparent 60%);
}

/* image style */
.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
}



 
    html,body{height:100%} body{font-family:Inter,ui-sans-serif,system-ui}
    .card { box-shadow: 0 8px 24px rgba(0,0,0,.06); }
    .pill { border-radius: 9999px }
 
    .center-logos {
  display: flex;
  justify-content: center;  /* centers horizontally */
  align-items: center;      /* centers vertically */
  gap: 20px;                /* space between logos */
  margin-top: -3%;
  margin-left: -10%;
}




/* Darker + Blurred Modal Backdrop */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.85) !important; /* darker */
  backdrop-filter: blur(10px); /* blur effect */
}

  /* Tweak header density on very small screens */
  @media (max-width: 360px) {
    header .h-16 { height: 3.25rem /* ~52px */ }
    header .h-10, header .w-10 { height: 2.25rem; width: 2.25rem; }
  }

  /* Larger desktops: subtly increase spacing */
  @media (min-width: 1280px) {
    header nav a { font-size: 1.02rem; }
  }

  /* Prevent body scroll when offcanvas is open */
  .no-scroll { overflow: hidden; }

  /* Extra small screens (phones under 360px) */
@media (max-width: 360px) {
  header .h-16 { height: 3.25rem; }       /* reduce header height */
  header .h-10, 
  header .w-10 { height: 2.25rem; width: 2.25rem; }  /* shrink icons */
  #mobileMenu { width: 85%; }             /* menu takes almost full width */
}

/* Small tablets (portrait ~ 640px) */
@media (max-width: 640px) {
  nav.desktop-nav { display: none; }      /* hide desktop nav */
  #mobileMenuBtn { display: inline-flex; }/* show hamburger */
  #mobileMenu { width: 75%; }             /* menu covers 75% of screen */
}

/* Tablets & small laptops (~768px) */
@media (min-width: 768px) and (max-width: 1023px) {
  nav.desktop-nav { gap: 1.5rem; }        /* reduce spacing in nav */
  #mobileMenuBtn { display: none; }       /* hide hamburger */
  #mobileMenu { display: none !important; } /* no mobile panel */
}

/* Large desktops (1280px+) */
@media (min-width: 1280px) {
  header nav a { font-size: 1rem; }       /* bump font slightly */
  header .max-w-7xl { padding-left: 2rem; padding-right: 2rem; }
}

.space-y-4 > :last-child { margin-bottom: 0 !important; }

h4{
  text-align:center;
  padding: 20px;
}
/* Slider */
h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

    h2 {
      text-align: center;
      padding: 40px 0 10px;
      font-weight: 700;
      color: #111;
    }

    /* Slider base */
    .slick-slide {
      margin: 0 20px;
    }

    .slick-slide img {
      width: 100%;
      height: 80px;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      transition: all 0.3s ease-in-out;
    }

    .slick-slide img:hover {
      filter: grayscale(0%);
      opacity: 1;
      transform: scale(1.05);
    }

    .customer-logos {
      margin-bottom: 60px;
    }

    /* Slick arrows (optional) */
    .slick-prev:before, .slick-next:before {
      color: #333;
    }