/*  4/28/25 4:00pm
CSS Structure   
    1. GLOBAL
    2. NAVIGATION
       2.a Check Cherry buttons
    3. HERO
	   3. a. Reviews - index.html
    4. SPLIT (About, Index, FAQ)
    5. SPLIT‑2 (Giving Back)
    6. GALLERY
    7. LIGHTBOX
    8. PRICE CARDS (Unified Pricing Grid)
    9. CONTACT PAGE
    10. FAQ
    11. LEGAL PAGES
	12. GOOGLE REVIEWS
    13. FOOTER
    14. SOCIAL SHARE BUTTONS
    15. SCROLL TO TOP BUTTON
    16. ANIMATIONS
    17. RESPONSIVE (768px)
    18. RESPONSIVE (600px – FAQ image)
*/

/* =========================================================
   BRAND VARIABLES (BASE LAYER)
========================================================= */
:root {
  --brand-teal: #8ED1C6;
  --brand-teal-dark: #6FB7AC;
  --brand-teal-light: #B8E7DF;

  --brand-lavender: #C6B7E2;
  --brand-lavender-dark: #A998D1;
  --brand-lavender-light: #E4DAF5;

  --brand-gold: #d6c6a1;
  --brand-black: #111111;
  --brand-white: #F6F5F2;
  --brand-gray: #e0e0e0;
  --brand-gray-light: #eaeaea;
}

/* =========================================================
   SEMANTIC VARIABLES (HUMAN‑READABLE)
========================================================= */
:root {
  /* Primary Accent System */
  --accent: var(--brand-teal);
  --accent-hover: var(--brand-teal-dark);
  --accent-light: var(--brand-teal-light);

  /* Secondary Accent System */
  --accent-secondary: var(--brand-lavender);
  --accent-secondary-hover: var(--brand-lavender-dark);
  --accent-secondary-light: var(--brand-lavender-light);

  /* Text */
  --text-primary: var(--brand-black);
  --text-secondary: var(--brand-gray);

  /* Backgrounds */
  --background: var(--brand-white);
  --surface: #ffffff;

  /* Borders */
  --border-light: var(--brand-gray-light);

  /* Highlights */
  --highlight: var(--brand-gold);
}

/* =========================================================
   1. GLOBAL
========================================================= */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: var(--background);
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); }
h3 { font-family: 'Playfair Display', serif; }

a { text-decoration: none; color: inherit; }

.block-font {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
}

.center { text-align: center; }

/* =========================================================
   2. NAVIGATION — FIXED FOR YOUR CURRENT HTML
========================================================= */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--text-primary);
  color: var(--surface);
  font-size: 125%;
  position: relative;
}

/* Logo area */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 20px;
}

/* Desktop navigation */
.main-nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li {
  display: flex;
  align-items: center;
}

.main-nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
}

.main-nav ul li a:hover {
  color: #7fd1c9;
}

/* Mobile hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.menu-toggle span {
  width: 28px;
  height: 3px;
  background: var(--surface);
  border-radius: 3px;
}
/* ============================
   MOBILE NAVIGATION
============================ */
@media (max-width: 768px) {

  /* Show hamburger */
  .menu-toggle {
    display: flex;
  }

  /* Hide desktop nav */
  .main-nav {
    display: none;
    position: absolute;
    top: 80px;
    right: 20px;
    background: var(--text-primary);
    padding: 20px;
    border-radius: 12px;
    width: 220px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 999;
  }

  /* Vertical mobile menu */
  .main-nav ul {
    flex-direction: column;
    gap: 16px;
  }

  /* When menu is open */
  .main-nav.open {
    display: block;
  }
}

/* =========================================================
   2.a CHECK CHERRY BUTTONS
========================================================= */
.btn-pp {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: .25s ease;
}

.btn-pp:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-primary);
  box-shadow: 0 0 10px var(--accent-light);
}

.subtle-return {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  opacity: .85;
  transition: .25s ease;
}

.subtle-return:hover {
  color: var(--highlight);
  border-color: var(--highlight);
  background: rgba(214,198,161,.12);
  opacity: 1;
}

.subtle-footer-link {
  font-size: 14px;
  color: var(--accent);
  opacity: .8;
  text-decoration: underline;
  transition: .25s ease;
}

.subtle-footer-link:hover {
  color: var(--highlight);
  opacity: 1;
}

/* =========================================================
   3. HERO
========================================================= */
.hero-home {
  position: relative;
  height: 50vh;
  background-image: url('../images/banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--surface);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0) 100%
  );
}


.hero-content {
  position: relative;
  z-index: 2;
  animation: fadeIn 1.2s ease;
}

.hero-home h1 {
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(0,0,0,.85), 0 0 12px var(--accent-light);
}

/* =========================================================
   3. a. Reviews - index
========================================================= */

.reviews-section {
    padding: 20px 20px 20px 20px;
    text-align: center;
}

.reviews-section .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 10px 0 20px;
    letter-spacing: 0.5px;
}

.divider {
    width: 300px;
    height: 4px;
    margin: 5px auto;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--accent),
        var(--accent-secondary)
    );
    box-shadow: 0 0 8px var(--accent-light);
}

.reviews-section {
    padding: 80px 20px;
    text-align: center;
    animation: fadeIn 1.2s ease;
}
.reviews-cta {
    margin-top: 30px;
}

.subtle-review-btn {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    transition: .3s ease;
}

.subtle-review-btn:hover {
    background: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 12px var(--accent-light);
}
.reviews-stars {
    font-size: 1.8rem;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 10px;
    animation: floatStars 2.2s ease-in-out infinite alternate;
    opacity: 0.95;
}
/* Modal Background */
.review-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 99999;
    animation: fadeIn .4s ease;
}

/* Modal Box */
.review-modal-content {
    background: var(--surface);
    padding: 40px 30px;
    border-radius: 14px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    animation: slideUp .4s ease;
}

/* Close Button */
.review-modal-close {
    position: absolute;
    top: 20px;
    right: 26px;
    font-size: 32px;
    color: var(--text-primary);
    cursor: pointer;
    opacity: .7;
    transition: .2s ease;
}

.review-modal-close:hover {
    opacity: 1;
}

/* Modal Text */
.modal-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.modal-subtext {
    color: var(--text-secondary);
    margin-bottom: 25px;
}

/* Modal Button */
.modal-review-btn {
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
}

/* Animations */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   4. SPLIT (ABOUT, INDEX, FAQ)
========================================================= */
.split {
  display: flex;
  padding: 60px;
  gap: 40px;
}

.split img {
  width: 100%;
  height: 500px;
  border-radius: 16px;
  object-fit: cover;
}

/* =========================================================
   5. SPLIT‑2 (GIVING BACK)
========================================================= */
.split-2 {
  display: flex;
  padding: 60px;
  gap: 40px;
}

.split-2 img {
  width: 100%;
  height: 200px;
  border-radius: 16px;
  object-fit: contain;
}

/* =========================================================
   6. GALLERY (UPGRADED)
========================================================= */

.gallery-section {
  padding: 60px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
}

.grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* =========================================================
   GALLERY INDEX HOVER EFFECTS (MATCHED TO EXISTING STYLE)
========================================================= */

.gallery-item {
  display: block;
  background: #ffffff;
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* Title hover animation */
.gallery-item h3 {
  margin-top: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: opacity .25s ease, transform .25s ease;
}

.gallery-item:hover h3 {
  opacity: 1;
  transform: translateY(-2px);
}

/* Description hover animation */
.gallery-item p {
  font-size: 0.95rem;
  color: #666;
  transition: opacity .25s ease, transform .25s ease;
}

.gallery-item:hover p {
  opacity: 1;
  transform: translateY(-2px);
}

/* =========================================================
   GALLERY CARD BACKGROUNDS
========================================================= */

.gallery-item {
  background: #ffffff;
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-item:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  transform: translateY(-6px);
}

.gallery-item img {
  border-radius: 14px;
}

.gallery-item div {
  margin-top: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}
/* =========================================================
   EVENT GALLERIES INDEX — CARD GRID
========================================================= */

.gallery-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  padding: 40px 80px;
  box-sizing: border-box;
}

.gallery-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}

.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.gallery-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.gallery-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 16px 0 20px;
  color: #222;
}

.gallery-nav {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 40px;
}

.gallery-nav .nav-btn {
  padding: 10px 18px;
  background: #ff4ec7;
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background .25s ease;
}

.gallery-nav .nav-btn:hover {
  background: #ff2eb3;
}

.gallery-nav .center {
  margin: 0 auto;
}
/* =========================================================
   GALLERY CARD — HOVER CAPTION OVERLAY
========================================================= */

.gallery-card {
  position: relative;
  overflow: hidden;
}

.gallery-card .hover-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 14px 18px;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}

.gallery-card:hover .hover-caption {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   7. LIGHTBOX (UPGRADED)
========================================================= */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox.active {
  display: flex;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
  transition: opacity .25s ease;
}

/* Close Button */
.lightbox .close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: var(--surface);
  cursor: pointer;
  opacity: .8;
}

.lightbox .close:hover {
  opacity: 1;
}

/* Navigation Arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 20px;
  opacity: 0.8;
  transition: opacity .2s ease;
}

.lightbox-arrow:hover {
  opacity: 1;
}

#prev-arrow { left: 20px; }
#next-arrow { right: 20px; }

.lightbox-controls .lightbox-btn {
  padding: 10px 20px;
  background: #4de7e7;
  color: #003b3b;
  border: none;
  font-size: 18px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: background .25s ease, transform .25s ease;
}

.lightbox-controls .lightbox-btn:hover {
  background: #3cd4d4;
  transform: translateY(-2px);
}


/* =========================================================
   8. PRICE CARDS (UNIFIED PRICING GRID)
========================================================= */
.price-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.price-header h1 { margin-bottom: 10px; }
.price-header p { margin-bottom: 40px; }

.price-section {
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.package-grid {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
}

.package-card {
  width: 350px;
  max-width: 350px;
  flex: 0 0 350px;
  box-sizing: border-box;
  background: var(--surface);
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: .25s ease;
}

.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.package-card ul,
.package-card li {
  text-align: left !important;
}

.center-btn {
  margin-top: auto !important;
  text-align: center;
}

.badge-popular {
  position: absolute;
  top: -12px;
  right: -12px;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  box-shadow: 0 0 12px var(--accent-light), 0 0 20px rgba(0,0,0,.15);
}

/* Full-width buttons on mobile */
@media (max-width: 768px) {
  .center-btn a,
  .btn-pp,
  .btn,
  .primary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    box-sizing: border-box;
  }

  .center-btn {
    width: 100%;
    padding: 0 20px; /* keeps it off the edges */
  }

  /* Add this to pull text off the left edge */
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================================
   9. CONTACT PAGE
========================================================= */
.contact-section {
  padding: 60px 20px;
}

.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
}

.contact-info {
  flex: 1;
  min-width: 280px;
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.contact-form {
  flex: 1;
  min-width: 300px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 2px solid var(--border-light);
  font-size: 1rem;
}

/* =========================================================
   10. FAQ
========================================================= */
.faq-section-header {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin: 40px 0 10px;
  color: var(--text-primary);
  text-align: left;
}

.faq-header-with-img {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Accordion Container */
.faq-accordion {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Each item */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

/* Question row */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: #333;
}

/* Toggle icon */
.faq-toggle {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

/* Slide-down animation */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* When open */
.faq-item.open .faq-answer {
  max-height: 800px; /* plenty of room */
  opacity: 1;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

/* Nested list indentation */
.faq-answer ul.nested-list {
  margin-left: 20px;
  list-style-type: disc;
}

.nested-list {
  margin-left: 20px;
  list-style-type: disc;
}

/* -------------------------------------- */
/* PIXEL PARTY PREMIUM FAQ STYLING        */
/* -------------------------------------- */

/* Section headers */
.faq-section-header {
  margin-top: 40px;
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0a6e78; /* Pixel Party Teal */
  padding-left: 10px;
  border-left: 4px solid #0a6e78;
}

/* Soft background box around each section */
.faq-section-header + .faq-item,
.faq-section-header + div .faq-item {
  background: #f8fafb; /* soft coastal gray/white */
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 12px;
}

/* Each accordion item */
.faq-item {
  border: 1px solid #e3e7ea; /* subtle divider */
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 12px;
  background: #ffffff;
}

/* Add spacing so text isn't against the edge */
.faq-question span {
  padding-left: 5px;
}

/* Toggle icon styling */
.faq-toggle {
  color: #0a6e78; /* teal accent */
  font-weight: 700;
}

/* Hover effect for questions */
.faq-question:hover {
  color: #0a6e78;
}

/* Smooth slide-down animation (already included but enhanced) */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-left: 5px;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.3s ease;
}

/* When open */
.faq-item.open .faq-answer {
  max-height: 800px;
  opacity: 1;
  padding-top: 10px;
}

/* Nested list indentation */
.nested-list {
  margin-left: 25px;
  list-style-type: disc;
}

/* Divider between sections */
.faq-section-header {
  border-bottom: 1px solid #d9dee2;
  padding-bottom: 8px;
}

/* Increase left padding for the entire accordion */
.faq-accordion {
  padding-left: 40px;   /* adjust to 30–40px if you want more */
  padding-right: 30px;  /* optional, keeps balance on mobile */
}

/* Extra left padding for questions */
.faq-question span {
  padding-left: 20px;
}

/* Extra left padding for answers */
.faq-answer {
  padding-left: 30px;
}

/* Nested list indentation stays clean */
.nested-list {
  margin-left: 30px;
}

/* =========================================================
   11. LEGAL PAGES
========================================================= */
.legal-page {
  padding-left: 60px;
  padding-right: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
/* =========================================================
   12. GOOGLE REVIEWS
--------------------------------------------------------- */
/* Premium Reviews Section */
.pp-reviews-section {
  padding: 50px 20px 0px 20px; /* top | right | bottom | left */
}

.pp-reviews-container {
  max-width: 900px;
  margin: 0 auto;
}

.pp-reviews-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.pp-reviews-divider {
  width: 300px;
  height: 3px;
  background: #00bcd4; /* Pixel Party teal */
  margin: 0 auto 30px auto; /* reduced bottom margin */
  border-radius: 2px;
}

.pp-review-btn {
  margin-top: 20px; /* reduced from 40px */
  display: inline-block;
}


/* =========================================================
   13. FOOTER
========================================================= */
.footer-gradient {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 12px var(--accent-light);
  margin-bottom: 30px;
}

.site-footer {
  background: var(--text-primary);
  color: var(--surface);
  padding: 40px 20px 20px;
  margin-top: 60px;
  text-align: center;
}

.footer-content {
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  text-align: left;
}

.footer-left img {
  width: 160px;
  opacity: .9;
}

.footer-right {
  max-width: 300px;
}

.footer-title {
  font-size: 22px;
  margin-bottom: 8px;
}

.footer-right p,
.footer-right a {
  margin: 4px 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.footer-social a {
  margin-right: 12px;
  color: var(--accent);
  font-weight: 600;
  transition: .3s ease;
}

.footer-social a:hover {
  color: var(--accent-hover);
}

.footer-policy a {
  margin-right: 12px;
  color: var(--accent);
  font-size: 75%;
  font-weight: 400;
  transition: .3s ease;
}

.footer-policy a:hover {
  color: var(--accent-hover);
}
footer {
  padding-top: 10px; /* reduce from whatever it is now */
}

/* =========================================================
   14. SOCIAL SHARE BUTTONS
========================================================= */

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 30px;
}

.share-buttons a,
.share-buttons button {
  padding: 10px 16px;
  background: #f5f5f5;
  border-radius: 30px;
  text-decoration: none;
  color: #444;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.share-buttons a:hover,
.share-buttons button:hover {
  background: #e9e9e9;
  transform: translateY(-2px);
}
/* =========================================================
   15. SCROLL TO TOP BUTTON
========================================================= */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--accent-hover);
  color: var(--surface);
  border: none;
  padding: 14px 18px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  z-index: 9999;
}

#scrollTopBtn:hover {
  background: var(--accent);
  transform: translateY(-3px);
}

#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   16. ANIMATIONS
========================================================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatStars {
    from {
        transform: translateY(0);
        opacity: 0.9;
    }
    to {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* =========================================================
   17. RESPONSIVE (768px)
========================================================= */

@media (max-width: 768px) {

  /* ----- Global Padding Adjustments ----- */
body,
.container,
.legal-page {
  padding-left: 18px;
  padding-right: 18px;
}

  /* ----- Mobile Navigation ----- */
  .hamburger {
    display: flex;
  }

  .nav nav {
    position: absolute;
    top: 80px;
    right: 20px;
    padding: 20px;
    border-radius: 12px;
    background: var(--text-primary);
    flex-direction: column;
    gap: 15px;
    display: none;
    z-index: 999;
  }

  .nav nav.open {
    display: flex;
  }

  .nav .btn-pp {
    width: 100%;
    text-align: center;
  }

  /* ----- Layout Stacks ----- */
  .split,
  .split-2 {
    flex-direction: column;
    padding: 20px;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ----- Hero Section (Header Banner) ----- */
  .hero-home {
    height: auto;
    padding: 60px 20px;
    text-align: center;
  }

  /* ----- Buttons ----- */
  .btn-pp {
    padding: 12px 20px;
    font-size: 17px;
    line-height: 22px;
  }

  /* ----- Reviews Section ----- */
  .reviews-section {
    padding: 60px 20px;
  }

  .reviews-section .section-title {
    font-size: 1.8rem;
  }

}


/* =========================================================
   18. RESPONSIVE (600px – FAQ image)
========================================================= */
@media (max-width: 600px) {
  .faq-header-with-img {
    flex-direction: column;
    align-items: flex-start;
  }
}