body{font-family:Poppins,ui-sans-serif,system-ui}
    .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.png');
  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%);
}


 
    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%;
}


.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 20px; /* space between rows */
  align-items: center;
  padding : 4%;
  margin-left: -6%;
  margin-top: -2%;
}

.payment-methods .row {
  display: grid;
  gap: 15px; /* space between items */
}

.payment-methods .row-5 {
  grid-template-columns: repeat(5, 120px); /* 5 in one row */
}

.payment-methods .row-2 {
  grid-template-columns: repeat(2, 120px); /* 2 in one row */
  justify-content: center;
}

.payment-methods button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
    height: 70px;              /* slightly smaller height */
  width: 110px;              /* slightly smaller width */
}

.payment-methods button:hover {
  border-color: #0f9d58; /* green border on hover */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.payment-methods img {
  max-height: 100px;
  max-width: 90px;
  object-fit: contain;
  display: block;             /* removes inline gap */
  margin: 0 auto;             /* centers horizontally if block */
}

.payment-note {
  font-size: 14px;
  color: #6c757d;  /* Bootstrap’s grey tone */
  margin-bottom: 2%;
 margin-top: 2%;
 margin-left: 4%;
}

/* 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 */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
   
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}