/* ====== GLOBAL BACKGROUND: DOUBLE OFF-CENTER (HALF BLUE) ====== */
html, body {
  height: 100%;
  margin: 0;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/images/lightning-bg.png") center/cover no-repeat,
    radial-gradient(circle at left top, #13294b 0%, transparent 50%),
    radial-gradient(circle at right bottom, #1a2a40 0%, #000000 100%);
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: overlay;
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}
body {
  padding-top: 240px;
  background:
    linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)),
    url("/images/lightning-bg.png") center/cover no-repeat,
    radial-gradient(circle at left top, #13294b 0%, transparent 50%),
    radial-gradient(circle at right bottom, #1a2a40 0%, #000000 100%);
  background-attachment: fixed;
  min-height: 100vh;
}


/* ====== HEADER SECTION ====== */
.site-header {
  position: fixed;        /* keep header pinned at top */
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column; /* stack logo above nav */
  justify-content: center;
  align-items: center;    /* centralise horizontally */
  padding: 1rem 1.5rem;   /* reduced padding */
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/images/lightning-bg.png") center/cover no-repeat,
    radial-gradient(circle at left top, #13294b 0%, transparent 50%),
    radial-gradient(circle at right bottom, #1a2a40 0%, #000000 100%);
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: overlay;
  border-bottom: 2px solid #ff6f00;
  z-index: 1000;
}

/* Logo */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.logo img {
  width: 180px;           /* smaller logo */
  margin: 0 auto 0.5rem auto;
  animation: logoFade 6s ease-in-out infinite alternate;
}

@keyframes logoFade {
  0% { filter: brightness(1) drop-shadow(0 0 10px #00fff7); }
  100% { filter: brightness(1.2) drop-shadow(0 0 20px #ff6f00); }
}

/* ====== BODY OFFSET FOR FIXED HEADER ====== */
body {
  padding-top: 140px; /* match new header height */
}

/* Navigation */
.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.nav a {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #00fff7;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #00fff7;
}

.nav a:hover,
.nav a.nav-active {
  background: linear-gradient(90deg, #ff6347, #ff3333, #ffeb3b);
  box-shadow: 0 0 10px #ffeb3b;
  transform: translateY(-1px);
}

/* Header Buttons */
.header-buttons a {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #ff6a00, #ffcc00);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
}

.header-buttons a:hover {
  background: linear-gradient(135deg, #00fff7, #0099ff);
  box-shadow: 0 0 16px rgba(0, 255, 247, 0.9);
  transform: translateY(-2px);
}

/* ====== MOBILE NAVIGATION STACK ====== */
@media (max-width: 600px) {
  .nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .nav a {
    width: 100%;
    text-align: center;
    font-size: 1rem;
  }

  .header-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
  }

  .header-buttons a {
    width: 100%;
    text-align: center;
  }
}

/* ====== BODY OFFSET FOR FIXED HEADER ====== */
body {
  padding-top: 380px; /* increase to match actual header height */
}

/* ====== HERO SECTION ====== */
#hero {
  display: flex;
  flex-direction: column;
  align-items: center;     
  justify-content: center; 
  text-align: center;
  position: relative;
  z-index: 1;

  padding: 6rem 2rem;      /* breathing space inside hero */
  margin-bottom: 8rem;     /* pushes featured products downward */
}

/* Hero inner container */
.hero-inner {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ====== HERO TITLE (Molten Glow) ====== */
.hero-title {
  font-size: 6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 auto 2rem auto;

  background: linear-gradient(90deg, #ff6a00, #ffcc00, #ff6a00); /* molten orange-yellow */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff; /* fallback */

  text-shadow: 0 0 20px rgba(255, 100, 0, 0.9),
               0 0 40px rgba(255, 150, 0, 0.7),
               0 0 60px rgba(255, 200, 0, 0.5);
  animation: heroGlowMolten 3s infinite alternate;
}

/* ====== HERO TAGLINES ====== */
.hero-tagline {
  display: block;
  font-size: 2.5rem;
  color: #fff;
  margin: 1rem 0 2rem 0;   /* extra bottom margin */
  text-shadow: 0 0 10px rgba(255,255,255,0.6),
               0 0 20px rgba(255,255,255,0.4);
  animation: heroGlowWhite 3s infinite alternate;
}


@keyframes heroGlowWhite {
  from { text-shadow: 0 0 10px rgba(255,255,255,0.6), 0 0 20px rgba(255,255,255,0.4); }
  to   { text-shadow: 0 0 16px rgba(255,255,255,0.9), 0 0 32px rgba(255,255,255,0.7); }
}
/* ====== FEATURED PRODUCTS SECTION ====== */
.featured-section {
  padding-top: 12rem;       /* strong separation from hero */
  padding-bottom: 3rem;     /* balanced breathing space below */
  text-align: center;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.featured-container {
  display: flex;
  justify-content: center;
  gap: 40px;                /* space between slideshows */
  flex-wrap: wrap;          /* allows stacking on small screens */
}

.product-group {
  flex: 1 1 45%;            /* each slideshow takes ~half width */
  max-width: 600px;
}

/* ====== PRODUCTS SECTION ====== */
.products-page {
  padding-top: 2rem;        /* small breathing space */
}

.products-page .featured-heading {
  display: block;
  text-align: center;
  margin-bottom: 4rem;
  width: 100%;
}

/* ====== PRODUCTS GRID ====== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 500px); /* exactly 3 boxes per row */
  column-gap: 3rem;        /* horizontal spacing */
  row-gap: 120px;          /* vertical spacing between rows */
  justify-content: center; /* center the grid */
  margin: 0 auto;
}
/* ====== PRODUCT CARDS ====== */
.product-card {
  margin-bottom: 0.5rem;
}

.product-card .product-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  height: 480px;                /* consistent height */
  margin: 0 auto;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 15px #00fff7, 0 0 30px #00fff7;
}

/* Force product boxes to align content vertically */
.product-card .product-box {
  display: flex;
  flex-direction: column;       /* stack content top to bottom */
  justify-content: space-between; /* push buttons to bottom */
  height: 480px;                /* keep consistent height */
}

/* Quote buttons container */
.quote-actions {
  margin-top: auto;             /* ensures it sits at the bottom */
  display: flex;
  justify-content: center;      /* center horizontally */
  gap: 10px;
}

/* Quote buttons styling */
.quote-actions .btn {
  background: #ff6600;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.quote-actions .btn:hover {
  background: #cc5200;
}

/* Thumbnail image */
.product-thumb {
  display: block;
  max-width: 140px;
  margin: 0 auto 0.5rem auto;   /* reduce bottom margin */
}

/* Product title */
.product-title {
  text-align: center;
  color: #00fff7; /* aqua */
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 0.25rem;          /* small gap above title */
  margin-bottom: 0.25rem;       /* small gap below title */
}

/* Product description */
.product-desc {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Product specs list */
.product-specs {
  list-style-type: disc;
  margin: 0.5rem 0 0.5rem 1rem;
  color: #00fff7; /* aqua */
  font-size: 0.9rem;
}

/* ====== FEATURED GROUP LABELS ====== */
.product-label {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #00fff7;
  text-shadow:
    0 0 20px rgba(0,255,247,0.8),
    0 0 40px rgba(0,255,247,0.7),
    0 0 60px rgba(0,255,247,0.6);
  animation: labelGlowBlue 3s ease-in-out infinite alternate;
  margin-bottom: 1rem;
}

/* Aqua glow pulse */
@keyframes labelGlowBlue {
  0% {
    text-shadow:
      0 0 12px rgba(0,255,247,0.9),
      0 0 24px rgba(0,255,247,0.7),
      0 0 48px rgba(0,255,247,0.6);
  }
  100% {
    text-shadow:
      0 0 20px rgba(0,255,247,1),
      0 0 40px rgba(0,255,247,0.9),
      0 0 60px rgba(0,255,247,0.7);
  }
}
/* ====== FEATURED HEADING (Molten Glow) ====== */
.featured-heading {
  font-size: 4.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--heading-gap, 4rem);
  letter-spacing: 0.15em;
  word-spacing: 0.4em;
  background: linear-gradient(90deg, #ff6a00, #ffcc00, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(255, 140, 0, 1),
               0 0 80px rgba(255, 200, 0, 0.9);
  animation: heroGlowMolten 3s infinite alternate;
  position: relative;
  z-index: 150;
}

/* ====== FEATURED PRODUCTS SECTION ====== */
.featured-section {
  padding: 3rem 0;
  text-align: center;
  margin-top: -8rem;   /* keep this version */
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
/* ====== PRODUCTS SECTION ====== */
.products-page {
  padding-top: 2rem;
}

.products-page .featured-heading {
  display: block;
  text-align: center;
  margin-bottom: 4rem;
  width: 100%;
}

.products-page.container {
  max-width: 1600px;   /* wide enough for 3 larger boxes */
  margin: 0 auto;
  display: block;
}

/* Grid container – fixed 3 compact boxes per row */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 500px); /* exactly 3 boxes per row */
  gap: 8rem;
  justify-content: center; /* center the grid */
  margin: 0 auto;
}

/* Product cards */
.product-card {
  margin-bottom: 0.5rem;
}


/* PRODUCT BOXES – contained size */
.product-card .product-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;    /* fixed width */
  height: 500px;   /* fixed height */
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px #00fff7, 0 0 30px #00fff7;
}
/* ====== PRODUCTS PAGE MULTICOLOUR RANDOM BOXES WITH BIGGER AURA ====== */
.products-page .product-card:nth-child(6n+1) .product-box {
  background-color: transparent;
  border: 2px solid #ff6ec4; /* pink */
  box-shadow: 0 0 25px #ff6ec4, 0 0 50px #ff6ec4;
}

.products-page .product-card:nth-child(6n+2) .product-box {
  background-color: transparent;
  border: 2px solid #42e695; /* green */
  box-shadow: 0 0 25px #42e695, 0 0 50px #42e695;
}

.products-page .product-card:nth-child(6n+3) .product-box {
  background-color: transparent;
  border: 2px solid #ffd200; /* yellow */
  box-shadow: 0 0 25px #ffd200, 0 0 50px #ffd200;
}

.products-page .product-card:nth-child(6n+4) .product-box {
  background-color: transparent;
  border: 2px solid #0072ff; /* blue */
  box-shadow: 0 0 25px #0072ff, 0 0 50px #0072ff;
}

.products-page .product-card:nth-child(6n+5) .product-box {
  background-color: transparent;
  border: 2px solid #ff0844; /* red */
  box-shadow: 0 0 25px #ff0844, 0 0 50px #ff0844;
}

.products-page .product-card:nth-child(6n+6) .product-box {
  background-color: transparent;
  border: 2px solid #8e2de2; /* purple */
  box-shadow: 0 0 25px #8e2de2, 0 0 50px #8e2de2;
}

/* Hover effect */
.products-page .product-card .product-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 40px rgba(255,255,255,0.8);
}


/* Product thumbnail */
.product-thumb {
  display: block;
  max-width: 140px;
  margin: 0 auto 1rem auto;
}

/* Molten titles */
.product-title {
  text-align: center;
  font-weight: 900;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #ff6a00, #ffcc00, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(255, 140, 0, 1),
               0 0 60px rgba(255, 200, 0, 0.9);
  animation: heroGlow 3s infinite alternate;
  margin-bottom: 0.5rem;
}

/* Aqua specs */
.product-specs {
  list-style-type: disc;
  list-style-position: inside;
  margin: 0.5rem 0;
  padding-left: 1rem;
  color: #00fff7;
  font-size: 1.4rem;
  text-align: left;
}

/* White description */
.product-desc {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  margin: 0.5rem 0 1rem 0;
}

/* Glow animation reused */
@keyframes heroGlow {
  from { text-shadow: 0 0 6px rgba(255,255,255,0.35), 0 0 12px rgba(255,255,255,0.25); }
  to   { text-shadow: 0 0 8px rgba(255,255,255,0.5), 0 0 14px rgba(255,255,255,0.35); }
}

.hero-tagline {
  animation: heroGlow 4s infinite alternate;
}

/* ====== FEATURED CONTAINER ====== */
.featured-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 0 auto;
}

/* ====== PRODUCT GROUP ====== */
.product-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 600px;
  position: relative;
}
/* ====== SLIDESHOW BOX ====== */
.slideshow-box {
  width: 600px;
  height: 600px;
  background: url("/images/lightning-bg.png") center/cover no-repeat;
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(255, 140, 0, 0.9),
              0 0 60px rgba(255, 200, 0, 0.8);
  animation: moltenGlowBox 5s infinite alternate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.slideshow-box:hover {
  transform: scale(1.05);
}

/* ====== SLIDESHOW ====== */
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
}

/* Default slideshow images (Beer Mug, others) */
.slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* cropped for landscape products */
  display: none;
}

.slideshow img.active {
  display: block;
}

/* Viva Cup slideshow override (portrait fits fully) */
.slideshow img.viva-slideshow {
  object-fit: contain !important;
 
}

/* ====== SLIDESHOW ARROWS ====== */
.slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 140, 0, 0.9);
  color: #ff6a00;
  font-size: 2rem;
  font-weight: bold;
  text-shadow:
    0 0 12px rgba(255, 100, 0, 0.9),
    0 0 24px rgba(255, 150, 0, 0.7),
    0 0 36px rgba(255, 200, 0, 0.5);
  box-shadow:
    0 0 20px rgba(255, 140, 0, 0.8),
    0 0 40px rgba(255, 200, 0, 0.6);
  transition: all 0.3s ease;
  z-index: 100;
  outline: none;
  user-select: none;
}

.slideshow-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow:
    0 0 30px rgba(255, 180, 0, 1),
    0 0 60px rgba(255, 140, 0, 0.9);
}

.slideshow-arrow:active {
  transform: translateY(-50%) scale(1.05);
  box-shadow:
    0 0 25px rgba(255, 180, 0, 1),
    0 0 50px rgba(255, 140, 0, 0.9);
}

.slideshow-arrow.left { left: 20px; }
.slideshow-arrow.right { right: 20px; }

/* ====== LIGHTBOX SECTION (MOLTEN SLIDESHOW) ====== */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("/images/lightning-bg.png") center/cover no-repeat,
    radial-gradient(circle at left top, #13294b 0%, transparent 50%),
    radial-gradient(circle at right bottom, #1a2a40 0%, #000000 100%);
  background-size: cover;
  background-blend-mode: overlay;
  z-index: 2000;
}

.lightbox.lightbox-active {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Default slideshow expansion (square crop) */
.lightbox img.lightbox-content {
  width: 800px;
  height: 800px;
  border-radius: 1rem;
  object-fit: cover;
  display: block;
  margin: auto;
  box-shadow: 0 0 30px rgba(255, 140, 0, 0.9),
              0 0 60px rgba(255, 200, 0, 0.8);
  animation: moltenGlowBox 5s infinite alternate;
}

/* Expanded thumbnails (portrait or landscape) */
.lightbox img.lightbox-content.portrait,
.lightbox img.lightbox-content.landscape {
  width: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  padding: 20px;
}

/* Viva Cup override */
.lightbox img.lightbox-content.viva-lightbox {
  object-fit: contain !important;
}

/* ====== LIGHTBOX CLOSE ====== */
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 140, 0, 0.9);
  color: #ff6a00;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 12px rgba(255, 140, 0, 1);
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.8),
              0 0 40px rgba(255, 200, 0, 0.6);
  transition: all 0.3s ease;
  z-index: 2100;
}

/* ====== LIGHTBOX ARROWS ====== */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 140, 0, 0.9);
  color: #ff6a00;
  font-size: 2.4rem;
  font-weight: bold;
  text-shadow:
    0 0 12px rgba(255, 100, 0, 0.9),
    0 0 24px rgba(255, 150, 0, 0.7),
    0 0 36px rgba(255, 200, 0, 0.5);
  box-shadow:
    0 0 25px rgba(255, 140, 0, 0.8),
    0 0 50px rgba(255, 200, 0, 0.6);
  transition: all 0.3s ease;
  z-index: 2100;
  user-select: none;
}

.lightbox-arrow.left { left: 20px; }
.lightbox-arrow.right { right: 20px; }

.lightbox-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow:
    0 0 40px rgba(255, 180, 0, 1),
    0 0 70px rgba(255, 140, 0, 0.9);
}

.lightbox-arrow:active {
  transform: translateY(-50%) scale(1.05);
  box-shadow:
    0 0 25px rgba(255, 180, 0, 1),
    0 0 50px rgba(255, 140, 0, 0.9);
}


/* ====== FULLSCREEN BACKGROUND ====== */
body {
  background:
    linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)),   /* dark overlay */
    url("/images/lightning-bg.png") center/cover no-repeat, /* background image */
    radial-gradient(circle at left top, #13294b 0%, transparent 50%), /* top-left colour */
    radial-gradient(circle at right bottom, #1a2a40 0%, #000000 100%); /* bottom-right colour */
  background-attachment: fixed;
  min-height: 100vh;
}

/* ====== ANIMATIONS ====== */

/* Orange box glow */
@keyframes moltenGlowBox {
  0%   { box-shadow: 0 0 24px rgba(255, 140, 0, 0.8),
                     0 0 48px rgba(255, 200, 0, 0.6); }
  50%  { box-shadow: 0 0 36px rgba(255, 200, 0, 1),
                     0 0 72px rgba(255, 140, 0, 0.8); }
  100% { box-shadow: 0 0 24px rgba(255, 140, 0, 0.8),
                     0 0 48px rgba(255, 200, 0, 0.6); }
}

/* Molten orange glow for headings */
@keyframes heroGlowMolten {
  0%   { text-shadow: 0 0 20px rgba(255, 100, 0, 0.9),
                     0 0 40px rgba(255, 150, 0, 0.7),
                     0 0 60px rgba(255, 200, 0, 0.5); }
  100% { text-shadow: 0 0 30px rgba(255, 150, 0, 1),
                     0 0 60px rgba(255, 200, 0, 0.9),
                     0 0 90px rgba(255, 180, 0, 0.7); }
}

/* White shimmer for taglines */
@keyframes heroGlowWhite {
  from { text-shadow: 0 0 6px rgba(255,255,255,0.35),
                      0 0 12px rgba(255,255,255,0.25); }
  to   { text-shadow: 0 0 8px rgba(255,255,255,0.55),
                      0 0 14px rgba(255,255,255,0.35); }
}

/* Aqua glow pulse for product labels */
@keyframes labelGlowBlue {
  0% {
    text-shadow: 
      0 0 12px rgba(0, 170, 255, 0.9),
      0 0 24px rgba(0, 170, 255, 0.7),
      0 0 48px rgba(0, 170, 255, 0.6);
  }
  100% {
    text-shadow: 
      0 0 20px rgba(0, 170, 255, 1),
      0 0 40px rgba(0, 170, 255, 0.9),
      0 0 60px rgba(0, 170, 255, 0.7);
  }
}

/* ====== SERVICES SECTION ====== */
.services-page {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: -40px; /* adjust vertical position */
}

/* ====== SERVICE TITLE ====== */
.service-title {
  text-align: center;
  font-weight: 900;
  font-size: 1.5rem;          /* scaled down for 300px box */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #ff6a00, #ffcc00, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 140, 0, 1),
               0 0 40px rgba(255, 200, 0, 0.9);
  animation: heroGlow 3s infinite alternate;
  margin: 0.25rem 0;          /* consistent spacing above/below */
}

/* ====== SERVICE DESCRIPTION ====== */
.service-desc {
  list-style-type: disc;      /* keep bullets visible */
  padding-left: 1.5rem;       /* indent bullets properly */
  margin-top: 0.75rem;        /* spacing below title */
  margin-bottom: 0;           
  color: #fff;
  font-size: 1.3rem;          /* larger text ≈ 18px */
  line-height: 1.6;           /* more breathing room between lines */
}

.services-container {
  max-width: 1300px;   /* same centring logic as featured-container */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
}


/* ====== SERVICES GRID ====== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 300px); /* 2 boxes per row */
  column-gap: 10rem;        /* horizontal spacing */
  row-gap: 150px;          /* vertical spacing between rows */
  justify-content: center;
  margin: 0 auto;
}

/* ====== SERVICE CARDS ====== */
.service-card {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px #00fff7, 0 0 30px #00fff7;
  display: flex;
  flex-direction: column;     
  align-items: stretch;       
  justify-content: flex-start;
  text-align: left;
}

/* ====== SERVICE TITLE ====== */
.service-title {
  text-align: center;
  font-weight: 900;
  font-size: 1.5rem;          
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #ff6a00, #ffcc00, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 140, 0, 1),
               0 0 40px rgba(255, 200, 0, 0.9);
  animation: heroGlow 3s infinite alternate;
  margin: 0.25rem 0;
  min-height: 3.5rem;   /* reserve space for up to 2 lines */
  display: flex;
  align-items: center;  /* vertically center text inside reserved space */
  justify-content: center;
}
/* ====== MODAL OVERLAY ====== */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
}

/* ====== MODAL CONTENT ====== */
.modal-content {
  margin: auto;
  padding: 2rem;
  border-radius: 8px;
  width: 800px;
  height: 800px;
  color: #fff;
  box-shadow: 0 0 30px #00fff7, 0 0 60px #00fff7;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden; /* no scrollbars */
}

/* ====== MODAL HEADING ====== */
.modal-content h2 {
  font-size: 3rem;   /* balanced heading size */
  margin-bottom: 2rem;
  text-align: center;
  color: #00fff7;
  text-shadow: 0 0 25px rgba(0,255,247,1),
               0 0 50px rgba(0,255,247,0.9);
}

/* ====== MODAL PARAGRAPHS ====== */
.modal-content p {
  font-size: 1.4rem; /* proportionate body text */
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: left;
}

/* ====== MODAL LIST ====== */
.modal-content ul {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.modal-content li {
  font-size: 1.4rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ====== CLOSE BUTTON ====== */
.close {
  color: #fff;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

/* ====== FORCE HERO CENTERING ====== */
.hero,
.hero-title {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.hero-tagline {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
  /* keep glow + shimmer intact */
  text-shadow: 0 0 6px rgba(255,255,255,0.35),
               0 0 12px rgba(255,255,255,0.25);
  animation: heroGlowWhite 4s infinite alternate;
}
/* ====== SERVICES SECTION FIX ====== */
.services-page {
  text-align: center;
  padding: 0;             /* remove extra padding */
  margin: 0 auto;
  position: relative;
  top: -80px;             /* lift section upwards */
}

.featured-heading {
  font-size: 3rem;
  text-align: center;
  color: #ffcc00; /* molten orange glow */
  margin: 0 auto 2rem auto;
  text-shadow: 0 0 20px rgba(255,140,0,0.9),
               0 0 40px rgba(255,100,0,0.7),
               0 0 60px rgba(255,200,0,0.5);
  letter-spacing: 2px;
  font-weight: bold;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-content: center;   /* centre horizontally */
  align-items: start;
  gap: 100px 100px;
  margin: 0 auto;
}

.service-card {
  width: 300px;
  height: 300px;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 0 20px #00fff7, 0 0 40px #00fff7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}


.service-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #00fff7;
  margin-bottom: 1rem;
  text-shadow: 0 0 30px rgba(0,255,247,1),
               0 0 60px rgba(0,255,247,0.9);
}

.service-desc {
  font-size: 1.3rem;
  color: #fff;
  line-height: 1.6;
  text-align: left;
  list-style-type: disc;
  padding-left: 1.2rem;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-content: center;
}

.resource-card {
  width: 300px;
  height: 300px;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px #00fff7, 0 0 60px #00fff7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.resource-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #00fff7;
  margin-bottom: 1rem;
  text-shadow: 0 0 30px rgba(0,255,247,1),
               0 0 60px rgba(0,255,247,0.9);
}

.resource-desc {
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
}

/* ====== GLOBAL SECTION HEADINGS ====== */
.featured-title,
.services-heading,
.resources-heading,
.about-heading,
.contact-heading {
  font-size: 3rem;
  text-align: center;
  color: #00fff7;
  margin-bottom: 2rem;
  text-shadow: 0 0 25px rgba(0,255,247,1),
               0 0 50px rgba(0,255,247,0.9);
  letter-spacing: 2px;
  font-weight: bold;
}
/* ====== GLOBAL CARD STYLE ====== */
.service-card,
.resource-card {
  background: transparent; /* let global background show */
  padding: 2rem;
  border-radius: 8px;
  width: 300px;
  height: 300px;
  color: #fff;
  box-shadow: 0 0 20px #00fff7, 0 0 40px #00fff7;
  text-align: center;
}

/* ====== CONTACT SECTION ====== */
.contact-page {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 4rem 2rem;
  position: relative;
  top: -40px; /* lift above footer */
}

.contact-heading {
  font-size: 3rem;
  text-align: center;
  color: #00fff7;
  margin-bottom: 2rem;
  text-shadow: 0 0 25px rgba(0,255,247,1),
               0 0 50px rgba(0,255,247,0.9);
  letter-spacing: 2px;
  font-weight: bold;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: center;
  gap: 3rem;
  margin: 0 auto;
}

.contact-card {
  width: 300px;
  min-height: 200px;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px #00fff7, 0 0 60px #00fff7;
  background: rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-title {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #00fff7;
  margin-bottom: 1rem;
  text-shadow: 0 0 30px rgba(0,255,247,1),
               0 0 60px rgba(0,255,247,0.9);
}

.glow-teal {
  color: #00fff7;
  text-shadow: 0 0 10px rgba(0,255,247,0.8),
               0 0 20px rgba(0,255,247,0.6);
}

/* ====== PRODUCT BOX ====== */
.product-card {
  display: flex;
}

.product-card .product-box {
  background: transparent; /* remove black fill */
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  max-width: 600px;              /* consistent width */
  height: 480px;                 /* consistent height */
  box-shadow: 0 0 15px #00fff7, 0 0 30px #00fff7;
  display: flex;
  flex-direction: column;        /* stack content vertically */
  justify-content: space-between;/* keep buttons at bottom */
  margin: 0 auto;
}

/* ====== QUOTE ACTIONS ====== */
.quote-actions {
  margin-top: auto;              /* pushes buttons to the bottom */
  display: flex;
  justify-content: center;       /* center horizontally */
  gap: 10px;
  
}

.quote-actions .btn {
  background: #ff6600;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.quote-actions .btn:hover {
  background: #cc5200;
}
.slideshow-box {
  position: relative;   /* allows footer button to anchor */
  overflow: visible;    /* prevent clipping of footer button */
}

/* ====== SUPPORT HUB HERO INDEPENDENT ====== */
body.support-hub .hero {
  background: rgba(0,0,0,0.8);
  padding: 4rem 0;
}

body.support-hub .hero-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00fff7, #0099ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(0,255,247,1), 0 0 60px rgba(0,153,255,0.9);
  animation: heroGlow 3s infinite alternate;
}

body.support-hub .hero-tagline {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  margin-top: 1rem;
  text-shadow: 0 0 15px rgba(0,255,247,0.9), 0 0 30px rgba(0,153,255,0.8);
}

/* ====== SUPPORT HUB GRIDS ====== */
body.support-hub .support-grid,
body.support-hub .care-grid {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 6rem 100px;
  justify-content: center;
  margin: 0 auto;
}

/* ====== SUPPORT HUB CARDS ====== */
body.support-hub .support-card {
  width: 300px;
  min-height: 300px;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: all 0.3s ease;
}

/* Alternating glow colors */
body.support-hub .support-card:nth-child(1){border:2px solid #00fff7;box-shadow:0 0 15px #00fff7,0 0 30px #00fff7;}
body.support-hub .support-card:nth-child(2){border:2px solid #ff6a00;box-shadow:0 0 15px #ff6a00,0 0 30px #ffcc00;}
body.support-hub .support-card:nth-child(3){border:2px solid #a020f0;box-shadow:0 0 15px #a020f0,0 0 30px #d580ff;}

body.support-hub .support-title {
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  background: linear-gradient(90deg,#ff6a00,#ffcc00,#ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255,140,0,1),0 0 40px rgba(255,200,0,0.9);
  animation: heroGlow 3s infinite alternate;
  margin-bottom: 0.75rem;
}

body.support-hub .support-desc { color:#fff; font-size:1rem; line-height:1.6; }

body.support-hub .molten-btn {
  display:inline-block; padding:0.6rem 1.2rem; font-weight:700; text-transform:uppercase;
  color:#fff; background:linear-gradient(90deg,#ff6a00,#ffcc00,#ff6a00);
  border-radius:6px; text-decoration:none;
  box-shadow:0 0 12px rgba(255,140,0,0.9),0 0 24px rgba(255,200,0,0.8);
  transition:all 0.3s ease;
}
body.support-hub .molten-btn:hover {
  background:linear-gradient(90deg,#00fff7,#0099ff);
  box-shadow:0 0 16px rgba(0,255,247,0.9),0 0 32px rgba(0,153,255,0.8);
  transform:translateY(-2px);
}

/* ===== PRODUCT BOX BUTTONS ===== */
.product-box .quote-actions {
  margin-top: 1rem;
  text-align: center;
}

.product-box .quote-actions .btn {
  display: inline-block;
  margin: 0 0.5rem;
}
/* ===== PRODUCT SPECS BULLETS ===== */
.product-specs li {
  font-size: 1rem; /* bigger, matches titles better */
  color: #3498db;
  margin-bottom: 0.4rem;
}
/* ===== PRODUCT DESCRIPTION ALIGNMENT ===== */
.product-box .product-desc {
  margin-top: -.8rem;   /* reduce space above description */
  color: #fff;          /* keep text white */
  font-size: 1rem;      /* consistent with specs */
  line-height: 1.4;     /* readable spacing */
}
/* ===== PRODUCT SPECS LIST POSITION ===== */
.product-box .product-specs {
  margin-top: -1rem;   /* reduce space above the bullet list */
  padding-left: 1.2rem; /* keep bullets indented neatly */
}
/* ===== PRODUCT TITLE POSITION ===== */
.product-box .product-title {
  margin-top: -3rem;   /* reduce space above title */
  color: #3498db;       /* keep the blue color */
  font-size: 1.8rem;    /* current size */
  font-weight: 600;
}
/* ===== SERVICES SECTION ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 300px); /* fixed width boxes */
  justify-content: center;                 /* center the pair neatly */
  column-gap: 180px;                        /* wider gap so they don’t collide */
  row-gap: 80px;                           /* keep vertical spacing perfect */
}
/* ========================= GALLERY / SPECIALS ========================= */
.fp-gallery, .fp-specials {
  padding: 60px;
  text-align: center;
}

.gallery-grid, .specials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 30px;
}

.gallery-item img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.special-item {
  background: rgba(255,255,255,0.05);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255,140,0,0.4);
}
/* ========================= ABOUT US NEON FOOTER ========================= */
.fp-footer {
  background: transparent;
  padding: 40px 15px 25px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
}

.fp-footer-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.fp-box {
  width: 300px;
  height: 300px;
  background: transparent;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  border-top: 3px solid rgba(200,220,255,0.7);
  border-right: 5px solid rgba(200,220,255,0.7);
  border-left: 4px solid rgba(200,220,255,0.7);
  border-bottom: 12px solid rgba(150,180,255,0.9);

  box-shadow:
    0 0 12px rgba(200,220,255,0.7),
    0 0 24px rgba(150,180,255,0.6),
    0 0 36px rgba(120,160,255,0.5);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fp-box:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 20px rgba(200,220,255,0.9),
    0 0 40px rgba(150,180,255,0.7),
    0 0 60px rgba(120,160,255,0.6);
}

.fp-box h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #d1d1e9;
  text-align: center;
}

.fp-box ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  color: #fff;
  font-size: 0.95rem;
  text-align: left;
}

.fp-box li { margin-bottom: 6px; }

.fp-box a {
  text-decoration: none;
  color: #d1d1e9;
}

.fp-box a:hover {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(200,220,255,0.6);
}

.fp-box p {
  color: #fff;
}

.fp-legal {
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
  margin-top: 40px;
}

.fp-tagline {
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  margin-top: 40px;
}

.fp-whatsapp {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: transparent !important;
  border: 2px solid rgba(200,220,255,0.9);
  box-shadow:
    0 0 25px rgba(200,220,255,0.9),
    0 0 40px rgba(150,180,255,0.7),
    0 0 60px rgba(120,160,255,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fp-whatsapp:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 35px rgba(200,220,255,1),
    0 0 55px rgba(150,180,255,0.8),
    0 0 75px rgba(120,160,255,0.7);
}

.fp-whatsapp-icon {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(200,220,255,0.9));
}
.fp-legal {
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  margin-top: 40px;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255,140,0,0.9),
               0 0 24px rgba(255,200,0,0.7);
  animation: vibrantGlow 10s infinite;
}
/* ========================= GALLERY SECTION ========================= */
.fp-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row */
  gap: 40px;
}

.fp-gallery .gallery-item {
  width: 500px;             /* fixed width */
  height: 500px;            /* fixed height */
  background: #111;         /* dark background like products */
  border-radius: 12px;      /* rounded corners */
  overflow: hidden;         /* contain image/video inside */
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  margin: 0 auto;           /* center in grid cell */
  border: 5px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Alternating border colours (like products.php rhythm) */
.fp-gallery .gallery-item:nth-child(3n+1) {
  border-color: #3498db; /* blue */
}
.fp-gallery .gallery-item:nth-child(3n+2) {
  border-color: #9b59b6; /* violet */
}
.fp-gallery .gallery-item:nth-child(3n+3) {
  border-color: #f39c12; /* molten orange */
}

.fp-gallery .gallery-item img,
.fp-gallery .gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* crop neatly inside box */
  display: block;
}

/* Hover effect to match product cards */
.fp-gallery .gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,0.6);
}
/* ========================= HERO SECTION ========================= */
.fp-hero {
  background: url('images/hero-bg.jpg') no-repeat center center/cover;
  padding: 160px 20px 100px;   /* extra top padding pushes hero below header */
  text-align: center;          /* centers content horizontally */
}

.fp-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.fp-hero-title {
  font-size: 6rem;              /* big molten size */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 auto 2rem auto;
  background: linear-gradient(90deg, #ff6a00, #ffcc00, #ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 100, 0, 0.9),
               0 0 40px rgba(255, 150, 0, 0.7),
               0 0 60px rgba(255, 200, 0, 0.5);
  animation: heroGlowMolten 3s infinite alternate;
}

.fp-hero-tagline {
  display: block;
  font-size: 2.5rem;            /* same as index/products */
  color: #fff;
  margin: 1rem 0;
  text-shadow: 0 0 10px rgba(255,255,255,0.6),
               0 0 20px rgba(255,255,255,0.4);
  animation: heroGlowWhite 3s infinite alternate;
}

@keyframes heroGlowMolten {
  from {
    text-shadow: 0 0 20px rgba(255, 100, 0, 0.9),
                 0 0 40px rgba(255, 150, 0, 0.7);
  }
  to {
    text-shadow: 0 0 30px rgba(255, 200, 0, 1),
                 0 0 60px rgba(255, 180, 0, 0.8);
  }
}

@keyframes heroGlowWhite {
  from {
    text-shadow: 0 0 10px rgba(255,255,255,0.6),
                 0 0 20px rgba(255,255,255,0.4);
  }
  to {
    text-shadow: 0 0 16px rgba(255,255,255,0.9),
                 0 0 32px rgba(255,255,255,0.7);
  }
}
.special-item {
  background: none;        /* no background rectangle */
  padding: 0;              /* no extra spacing around image */
  border-radius: 0;        /* no rounded box */
  box-shadow: none;        /* remove orange glow */
}
/* ====== SERVICES SECTION ====== */
.services-page {
  padding: 8rem 2rem;       /* strong vertical spacing */
  text-align: center;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  row-gap: 100px;           /* finalized spacing */
  column-gap: 100px;        /* finalized spacing */
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(0,191,255,0.4);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 0 20px rgba(138,43,226,0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0,191,255,0.6);
}

.service-title {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,191,255,0.6),
               0 0 20px rgba(138,43,226,0.5);
}

/* ===== GLOBAL RESPONSIVE ADJUSTMENTS ===== */

/* Tablets */
@media (max-width: 1024px) {
  /* Header */
  header { flex-direction: column; align-items: center; }
  .site-logo { max-width: 220px; margin-bottom: 1rem; }
  header nav { flex-wrap: wrap; justify-content: center; }

  /* Nav buttons split into 2–3 per row */
  .nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
  }
  .nav li { flex: 1 1 30%; text-align: center; }

  /* Hero */
  #about-hero {
    padding: 3rem 1rem;
    max-width: 100%;
    text-align: center;
  }
  #about-hero .section-heading { font-size: 3rem; line-height: 1.2; }
  #about-hero .hero-tagline { font-size: 1.6rem; margin-bottom: 1.5rem; }

  /* Featured */
  .featured-section { padding-top: 3rem; }
  .featured-container { flex-wrap: wrap; gap: 20px; }
  .slideshow {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
  }
  .slideshow img { max-width: 100%; height: auto; }
  .slideshow-arrow { font-size: 2rem; color: #fff; display: block; }

  /* Services */
  .services-grid { row-gap: 40px; column-gap: 40px; }

  /* Footer */
  .fp-footer-inner { flex-wrap: wrap; gap: 20px; }
}

/* Phones */
@media (max-width: 600px) {
  /* Header */
  header { flex-direction: column; align-items: center; }
  .site-logo { max-width: 160px; margin-bottom: 1rem; }

  /* Nav buttons split into 2 per row */
  .nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .nav li { flex: 1 1 45%; text-align: center; }
  .nav a {
    width: 100%;
    font-size: 1rem;
    padding: 0.6rem 1rem;
  }

  /* Hero */
  #about-hero {
    padding: 2rem 1rem;
    max-width: 100%;
    text-align: center;
  }
  #about-hero .section-heading { font-size: 2.2rem; line-height: 1.2; }
  #about-hero .hero-tagline { font-size: 1.2rem; margin-bottom: 1rem; }

  /* Featured */
  .featured-section { padding-top: 2rem; }
  .featured-container { flex-direction: column; gap: 15px; }
  .slideshow {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .slideshow img { max-width: 100%; height: auto; }
  .slideshow-arrow { font-size: 1.6rem; color: #fff; display: block; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; row-gap: 30px; column-gap: 0; }
  .service-card { padding: 1rem; }
  .service-title { font-size: 1.2rem; }

  /* Footer */
  .fp-footer-inner { flex-direction: column; gap: 15px; }
  .fp-box { width: 100%; max-width: 280px; margin: 0 auto; }
}
@media (max-width: 600px) {
  #about-hero .section-heading { font-size: 2.2rem; padding: 0.5rem 1rem; }
  #about-hero .hero-tagline { font-size: 1.2rem; margin-bottom: 1rem; }
  .featured-section { padding-top: 2rem; max-width: 100%; }
}