/* --------------------------
   Timon Swole — Professional Upgrade
   Stylesheet
   -------------------------- */

/* RESET */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#222;
  background:#000000;
  line-height:1.5;
  overflow-x:hidden;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #8B0000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 6%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  transition: opacity 0.4s ease, transform 0.4s ease; /* smooth hide/show */
}

/* When navbar should be hidden */
.navbar.hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none; /* prevents clicks when hidden */
}

/* Prevent overlap with hero section */
body {
  padding-top: 70px;
}




/* LOGO */
.logo {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

/* Unified pill for all nav links */
.nav-links-pill {
  background: #fff;
  border-radius: 30px;          /* pill shape */
  padding: 6px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
  margin-left: auto; /* ✅ pushes the pill all the way to the right */
  margin-right: 16px; /* ✅ optional spacing before the BOOK NOW button */
}

@media (max-width: 768px) {
  .nav-links-pill { display: none; } /* ensures only BOOK NOW button shows */
}


/* Link layout inside the pill */
.nav-links {
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Individual link styling */
.nav-links a {
  color: #8B0000;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 0;              /* ✅ only vertical breathing room */
  border-radius: 0;             /* ✅ no rounded corners */
  background: transparent;      /* ✅ remove mini pill look */
  box-shadow: none;             /* ✅ remove any shadow effects */
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: #a40000;               /* ✅ just color change on hover */
}


.nav-links a:hover {
  color: #a40000;
}

/* BOOK NOW button for mobile */
.nav-cta-mobile {
  display: none; /* hidden on desktop */
  background: #fff;
  color: #8B0000;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 18px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.2s ease, color 0.2s ease;
  margin-left: auto;
}

.nav-cta-mobile:hover {
  background: #f5f5f5;
  color: #a40000;
}

/* Mobile-specific: hide nav pill, show BOOK NOW */
@media (max-width: 768px) {
  .nav-links-pill {
    display: none; /* hide pill with all links */
  }

  .nav-cta-mobile {
    display: inline-block; /* show BOOK NOW */
  }
}


/* Navbar links styled as pill buttons */
.nav-links a {
  background: #fff;         /* white background */
  color: #8B0000;           /* red text */
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 20px;      /* pill shape */
  transition: background 0.2s ease, color 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.nav-links a:hover {
  background: #f5f5f5;      /* subtle hover background */
  color: #a40000;           /* slightly darker red */
}

.nav-links a:hover { color:#ffdada; }

/* HERO with refined parallax */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1rem;
  color: #ffffff;
  overflow: visible;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000 url("images/hero-bg.jpg") center/cover no-repeat;
  z-index: -1;
  background-attachment: scroll !important;  /* ✅ fixes Safari rendering */
  transform: none !important;                /* ✅ disables trapped parallax layer */
}
.hero-logo {
  max-width: 220px;   /* upscale from 160px → 220px */
  height: auto;
  margin-bottom: 20px;
  transition: transform 0.3s ease, filter 0.3s ease;  /* ✅ added for smooth hover */
}
.hero-logo:hover {
  transform: scale(1.08);   /* ✅ enlarge slightly */
  filter: brightness(1.2);  /* ✅ subtle glow effect */
}
.hero-title {
  font-size:clamp(2.6rem,6.6vw,5.2rem);
  font-weight:900;
  margin-bottom:12px;
  text-shadow: 0 3px 16px rgba(0,0,0,0.55);
}
.quote {
  font-size:clamp(1rem,2.2vw,1.2rem);
  margin-bottom:18px;
  opacity:0.95;
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}
.hero-socials { display:flex; gap:14px; margin-bottom:22px; }
.social-icon {
  width:32px; height:32px;
  object-fit:contain;
  filter:brightness(1.2);
  transition:transform .22s ease, filter .22s ease;
}
.social-icon:hover{ transform:scale(1.15); filter:brightness(1.5); }

.hero-btn {
  display:inline-block;
  padding:14px 26px;
  background:#8B0000;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:800;
  transition:transform .18s ease, background .18s ease;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
}
.hero-btn:hover { transform:translateY(-4px); background:#a40000; }

/* Fix overflow bug on smartphones */
.about, .plans-section, .programs, .faq, .contact {
  position: relative;
  overflow: visible !important;
  height: auto !important;
}

/* ABOUT */
.about {
  background:#000;
  color:#fff;
  padding:70px 6%;
  text-align:center;
  position: relative;
  overflow: visible !important;
  z-index: 1;
}

.about h2 { font-size:2.2rem; margin-bottom:24px; font-weight:800; }
/* ✅ Final About Me photo fix */
.about-photo {
  width: auto !important;
  max-width: 260px !important;
  height: auto !important;
  display: block;
  margin: 12px auto 22px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
}


/* ✅ Smartphone adjustment */
@media (max-width: 768px) {
  .about-photo {
    max-width: 200px;            /* smaller on mobile */
    aspect-ratio: 3 / 4;         /* keep vertical portrait shape */
  }
}


.about-photo,
.about-expanded img {
  max-width: 100%;   /* prevent overflow */
  height: auto;
}
.about-intro {
  max-width:900px;
  margin:0 auto 28px;
  font-size:1.05rem;
  line-height:1.6;
  color:#eee;
}
.about-photo,
.about-expanded img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.about-photo:hover,
.about-expanded img:hover {
  transform: scale(1.05);
  box-shadow: 0 18px 45px rgba(0,0,0,0.6);
}


/* ABOUT POINTS — numbers on top */
.about-list {
  margin-top:28px;
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
  padding:0 8px;
}
.about-point {
  display:flex;
  flex-direction:column; /* number on top */
  align-items:center;
  text-align:center;
  padding:22px;
  margin-bottom:22px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  opacity:0;
  transform:translateY(30px);
  transition: opacity .45s ease, transform .45s ease;
  cursor:pointer;
}
.about-point:hover {
  transform:translateY(0) scale(1.03);
  box-shadow:0 20px 48px rgba(0,0,0,0.35);
  background:rgba(255, 255, 255, 0.133);
}
.about-point.in-view { opacity:1; transform:translateY(0); }

.about-number {
  min-width:64px; min-height:64px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#000;
  font-weight:900; font-size:1.2rem;
  margin-bottom:14px;
  transition:background .3s ease, color .3s ease;
}
.about-point:hover .about-number,
.about-point.in-view .about-number { background:#8B0000; color:#fff; }

.about-body h3 { font-size:1.15rem; margin-bottom:10px; font-weight:800; }
.about-body p { color:#ddd; font-size:1rem; line-height:1.6; }

/* EXPANDED */
.btn-outline {
  margin-top:18px;
  background:transparent;
  border:2px solid #8B0000;
  padding:10px 16px;
  border-radius:7px;
  color:#8B0000;
  cursor:pointer;
  font-weight:700;
  transition:background .25s ease, color .25s ease;
}
.btn-outline:hover { background:#8B0000; color:#fff; }

.about-expanded {
  display:none;
  margin-top:30px;
  gap:24px;
  text-align:left;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
.about-expanded img {
  width:280px; height:auto;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
.about-expanded-text { flex:1; color:#ddd; line-height:1.6; }

/* PLANS */
.plans-section {
  padding:70px 6%;
  background:#f8f8f8;   /* light gray */
  margin-bottom:80px;   /* extra spacing */
}
.plans-section h2 {
  text-align:center;
  font-size:2.2rem;
  margin-bottom:32px;
  color:#111;
}
.plans-row {
  display: flex;
  justify-content: center;
  gap: 26px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
  flex-wrap: nowrap;   /* ✅ don’t wrap on desktop */
}

/* ✅ Align cards, images & buttons perfectly */
.plan-card {
  display: flex;
  flex-direction: column;
}

.plan-top {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.plan-benefits {
  flex: 1;
}

.plan-photo-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-cta {
  margin-top: 18px;
}

.plan-card {
  flex: 1 1 30%;       /* each card ~⅓ of row */
  max-width: 360px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.1);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Fix image alignment across all plans */
.plan-card .plan-top {
  min-height: 90px;  /* reserve equal space for title, price, term, and possible badge */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keeps spacing consistent */
}

.plan-card .plan-photo-placeholder {
  margin-top: 0; /* reset any manual margins */
}
/* Premium badge fix so it doesn't push content */
.plan-card {
  position: relative; /* allows badge to be positioned without affecting flow */
}

.plan-card .plan-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  margin-bottom: 0; /* remove spacing below badge */
}

/* Default hover for all plans */
.plan-card:hover {
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 26px 55px rgba(0,0,0,0.18);
}
/* Premium Plan special hover */
.plan-card.premium {
  position: relative;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.plan-card.premium:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 0 25px rgba(139, 0, 0, 0.6); /* deep red glow */
}
/* Responsive adjustments */
@media (max-width: 900px) {
  .plans-row {
    flex-wrap: wrap;
  }
  .plan-card {
    flex: 1 1 100%;
    max-width: none;
  }
}
/* Premium badge */
.plan-badge {
  display: inline-block;
  background: #8B0000;     /* matches your theme red */
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align:center;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.plan-card:hover { transform:translateY(-10px) scale(1.03); box-shadow:0 26px 55px rgba(0,0,0,0.18); }
.plan-top h3 { font-size:1.2rem; font-weight:900; margin-bottom:6px; }
.plan-price { font-weight:900; color:#8B0000; margin-bottom:6px; font-size:1.05rem; }
.plan-term { color:#666; font-size:0.9rem; }
.plan-benefits { list-style:none; padding-left:0; color:#333; }
.plan-benefits li { margin:8px 0; font-weight:600; font-size:0.96rem; }
.plan-photo-placeholder {
  height:170px;
  border-radius:10px;
  overflow:hidden;
  background:#eee;
}
.plan-photo-placeholder img { width:100%; height:100%; object-fit:cover; }
.plan-cta {
  margin-top:auto;
  display:inline-block;
  text-align:center;
  padding:12px 18px;
  background:#8B0000;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:800;
  transition:background .2s ease;
}
.plan-cta:hover { background:#a40000; }

/* PROGRAMS */
.programs { padding:70px 6%; margin-top: 50px; background: #ffffff; }
.programs h2 { text-align:center; font-size:2.2rem; margin-bottom:32px; color:#111; }
.program-item {
  max-width:900px;
  margin:20px auto;
  padding:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.program-item:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 38px rgba(0,0,0,0.12);
  background:#fffefc;
}
.program-item h3 { font-size:1.2rem; font-weight:900; margin-bottom:8px; }
.program-item p { color:#333; font-size:0.98rem; line-height:1.6; }

/* FAQ */
.faq { padding:70px 6%; background:#fafafa; }
.faq h2 { text-align:center; font-size:2.2rem; color:#111; margin-bottom:26px; }
.faq-item { max-width:900px; margin:14px auto; border-bottom:1px solid #e6e6e6; padding:12px 0; }
.faq-question {
  width:100%; background:none; border:none;
  font-weight:800; font-size:1rem;
  display:flex; justify-content:space-between;
  align-items:center; cursor:pointer; padding:8px 6px;
}
.faq-answer {
  max-height:0; overflow:hidden;
  opacity:0; transition:all .35s ease;
  color:#333; padding:0 6px;
}
.faq-item.active .faq-answer { max-height:260px; opacity:1; margin-top:10px; }
.faq-question .icon {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-question .icon.rotate {
  transform: rotate(180deg);
  opacity: 1;
}
/* Prevent iOS from auto-styling FAQ text blue */
.faq-question, .faq-answer {
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;

  /* Allow text selection across all browsers */
  -webkit-user-select: text;  /* Safari / Chrome */
  -moz-user-select: text;     /* Firefox */

  color: #111 !important;   /* or your preferred color */
  text-decoration: none !important;
}


/* CONTACT */
.contact { padding:70px 6%; margin-top: 50px ;background :#fff; text-align:center; }
/* 📍 CONTACT LOCATION */
.contact-location {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  margin-top: 75px;
  flex-wrap: wrap;
}

.contact-address {
  flex: 1 1 300px;
  text-align: left;
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
}

.contact-address h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 800;
  color: #8B0000;
}

.contact-address a {
  color: #8B0000;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.contact-address a:hover {
  color: #a40000;
  text-decoration: underline;
}

/* ✅ Scaled + centered static map image */
.contact-map {
  width: 100%;
  max-width: 380px; /* ✅ reduces size */
  margin: 0 auto; /* ✅ centers on desktop & mobile */
}

.contact-map-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}



/* 📱 Responsive layout */
@media (max-width: 768px) {
  .contact-location {
    flex-direction: column;
    gap: 24px;
  }
  .contact-address {
    text-align: left;
  }
  .contact-map iframe {
    height: 260px;
  }
}

.contact form {
  max-width:640px; margin:0 auto;
  display:flex; flex-direction:column; gap:14px;
}
.contact input, .contact textarea {
  padding:14px; border-radius:8px;
  border:1px solid #ddd; font-size:1rem;
}
.contact select {
  padding:14px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:1rem;
  background:#fff;
  color:#373737;
  cursor:pointer;
}
.contact label {
  text-align:left;
  font-weight:600;
  margin-top:8px;
  margin-bottom:4px;
  display:block;
}

.contact button {
  background:#8B0000; color:#fff;
  border:none; padding:14px;
  border-radius:8px; font-weight:800; cursor:pointer;
  transition:background .2s ease;
}
.contact button:hover { background:#a40000; }

/* FOOTER */
.footer { padding:26px 6%; text-align:center; color:#666; font-size:0.95rem; }

/* RESPONSIVE */
@media (max-width:900px) {
  .plans-row { flex-direction:column; align-items:center; }
  .plan-card { width:92%; }

  /* ✅ keep About Me photo a reasonable size */
  .about-photo {
    max-width: 220px;   /* fixed portrait width for tablets and small screens */
    height: auto;
  }

  .hero-title { font-size:3rem; }
  .about-expanded { flex-direction:column; align-items:center; text-align:center; }
  .about-expanded img { width:80%; max-width:320px; margin-bottom:18px; }
}


@media (max-width:900px) {
  .nav-links a {
    font-size: 0.85rem;   /* ✅ smaller text */
    padding: 6px;         /* ✅ less padding */
  }
  .nav-links {
    gap: 12px;            /* ✅ tighter spacing between buttons */
  }
  /* Increase image height for smartphone */
  .plan-photo-placeholder {
  height: 270px;  /* was ~170px, now taller */
}
}


/* Smartphone adjustments */
@media (max-width: 768px) {

  /* Navbar spacing fix on mobile */
 .nav-links {
  display: flex;              /* make sure nav links show */
  flex-direction: row;        /* keep them in a row */
  gap: 12px;                  /* tighter gap between links */
 }

 .nav-links a {
  font-size: 0.85rem;         /* smaller text */
  padding: 6px 4px;           /* tighter padding */
 }

  /* FAQ questions left aligned */
  .faq-question {
    text-align: left !important;
    justify-content: flex-start;
  }

  /* About Me section text left aligned */
  .about p,
  .about .about-intro,
  .about .about-body,
  .about .about-expanded-text {
    text-align: left !important;
  }

  /* Premium badge repositioning for mobile */
  .plan-card .plan-badge {
    position: relative;     /* move into normal flow */
    top: auto;
    right: auto;
    margin: 0 0 10px 0;     /* spacing below badge */
    display: inline-block;  /* keep pill shape, only as wide as text */
    align-self: flex-start; /* align to left edge inside the card */
  }

  /* FAQ symbols far right on mobile */
 .faq-question {
  justify-content: space-between; /* pushes icon to edge */
 }

 .faq-question .icon {
  margin-left: auto;
 }

}

/* Section fade-in animation */
section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

section.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* BOOK NOW button for mobile navbar */
.nav-cta-mobile {
  display: none;  /* hidden on desktop */
  background: #fff;
  color: #8B0000;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 18px;
  border-radius: 20px;    /* pill shape */
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.2s ease, color 0.2s ease;
  margin-left: auto;  /* push to right corner */
}
.nav-cta-mobile:hover {
  background: #f5f5f5;
  color: #a40000;
}

/* Mobile-specific: hide nav links, show BOOK NOW */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* hide links on smartphone */
  }
  .nav-cta-mobile {
    display: inline-block; /* show BOOK NOW */
  }
}
/* ✅ Safari iOS overflow fix */
html, body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

section {
  position: relative;
  overflow: visible !important;
  height: auto !important;
  min-height: fit-content;
}

/* ✅ Reset hero’s fixed background (can trap scroll) */
.hero::before {
  background-attachment: scroll !important;
  transform: none !important;
}

/* ✅ Fix for iOS Safari hidden content */
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

section {
  position: relative;
  overflow: visible !important;
  height: auto !important;
  min-height: fit-content !important;
  transform: none !important; /* disables old animation transforms */
}

/* Temporary fallback so sections are visible if JS doesn't run */
section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important; /* optional: stop animation jitter */
}

.plan-card.premium .plan-badge {
  position: absolute;
  top: -12px; /* ✅ slightly higher */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}


/* ✅ Mobile – badge back inside card */
@media (max-width: 768px) {
  .plan-card.premium .plan-badge {
    position: relative;
    left: 0;
    transform: none;
    margin-bottom: 12px;
  }
}