/********** Template CSS **********/

/* 1. Variables & Global Settings */
/* === BEGIN modules/variables.css === */
/* 
   VARIABLES & THEME CONFIGURATION
   Global source of truth for colors, fonts, and animation timings.
*/

:root {
  --primary: #ce252a;
  --secondary: #757575;
  --light: #f3f6f8;
  --dark: #2c2f33;

  /* Mobile Menu Cascade Animation */
  --menu-curtain-duration: 0.32s;
  --menu-curtain-ease: cubic-bezier(0.4, 0, 0.6, 1);
  --menu-curtain-delay: 0.08s;
  --menu-item-duration: 0.35s;
  /* Slightly slower = more elegant */
  --menu-item-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Smooth ease-out */
  --menu-cascade-base-delay: 0.12s;
  /* Start after curtain begins */
  --menu-cascade-stagger: 0.06s;
  /* 60ms stagger = visible cascade */

  /* Apple Exact Timing (From apple-nav.css) */
  --apple-ease: cubic-bezier(0.4, 0, 0.6, 1);
  --apple-curtain-duration: 0.32s;
  --apple-curtain-delay: 80ms; /* 0.08s */
  
  --apple-item-duration: 0.24s;
  --apple-base-delay: 0.2s;
  --apple-stagger-step: 0.05s; /* 50ms - Tuned for premium weighted cascade */
}

/* === END modules/variables.css === */


/* 2. Base Styles & Utilities */
/* === BEGIN modules/base.css === */
/*
   BASE STYLES & UTILITIES
   Global resets, typography helpers, and utility classes.
*/


.py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.my-6 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.back-to-top {
  position: fixed;
  display: none;
  right: 30px;
  bottom: calc(30px + env(safe-area-inset-bottom));
  z-index: 99;
}

/*** Premium Body Fade Transition ***/
body {
  opacity: 0;
  -webkit-transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

body.page-loaded {
  opacity: 1;
}


/*** Chatbase Widget Z-Index Override ***/
/* Lower Chatbase widget z-index so mobile menu appears on top */
#chatbase-bubble-button,
#chatbase-bubble-window,
iframe[title*="chatbase"],
[id^="chatbase"] {
  z-index: 1030 !important;
}

/* === END modules/base.css === */


/* 3. Components (Buttons, Cards, Team, etc.) */
/* === BEGIN modules/components.css === */
/*
   REUSABLE COMPONENTS
   Buttons, Cards, and other shared UI elements.
*/

/*** Button ***/
.form-control {
  border-radius: 12px !important;
}

.btn {
  font-weight: 500;
  transition: 0.5s;
  border-radius: 12px;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
  color: #ffffff;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  border-radius: 12px;
}

/*** Awards ***/
.award-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.award-link:hover {
  transform: scale(1.1);
}

.award-image {
  max-width: 150px;
  height: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

/* Awards Container - 3 badges in a row */
.awards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  /* Keep all 3 in one row */
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.award-badge {
  display: inline-block;
  transition: transform 0.3s ease;
  flex: 1;
  max-width: 170px;
}

.award-badge:hover {
  transform: scale(1.08);
}

.award-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Tablet */
@media (max-width: 768px) {
  .awards-container {
    gap: 0.75rem;
    max-width: 480px;
  }
}

/* Mobile - big badges that fill the width */
@media (max-width: 576px) {
  .awards-container {
    gap: 0.5rem;
    max-width: 100%;
    padding: 0 0.75rem;
  }

  .award-badge {
    max-width: 140px;
  }
}

/* Very small phones (iPhone SE, older devices) */
@media (max-width: 390px) {
  .awards-container {
    gap: 0.2rem;
    padding: 0 0.35rem;
  }

  .award-badge {
    max-width: 125px;
  }
}

/* Extremely narrow devices */
@media (max-width: 340px) {
  .awards-container {
    gap: 0.25rem;
    padding: 0 0.25rem;
  }

  .award-badge {
    max-width: 110px;
  }
}

/*** Team ***/
.team-items {
  margin: -0.75rem;
}

.team-item {
  padding: 0.75rem;
}

.team-item::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background: #ffffff;
  transition: 0.5s;
  z-index: -1;
}

.team-item:hover::after {
  height: 100%;
  background: var(--primary);
}

.team-item .team-social {
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  overflow: hidden;
  opacity: 0;
  transition: 0.5s;
}

.team-item:hover .team-social {
  height: 100%;
  opacity: 1;
}

/*** Testimonials ***/
.testimonial-carousel .owl-dots {
  height: 40px;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid var(--primary);
  transition: 0.5s;
}

.testimonial-carousel .owl-dot.active {
  width: 40px;
  height: 40px;
  background: var(--primary);
}

.testimonial-carousel .owl-item img {
  width: 150px;
  /* Fixed width */
  height: 150px;
  /* Fixed height */
  object-fit: cover;
  /* This will prevent the image from stretching */
  object-position: center;
  /* Center the image within the frame */
  /* border-radius: 50%; To maintain the rounded circle shape */
}

/* Trust Badges in Registration Header */
.trust-badge {
  border-radius: 8px !important;
  padding: 0.5em 0.5em !important;
  font-weight: 500;
  font-size: 0.7rem !important;
  letter-spacing: 0.5px;
  background: #dc3545 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* FIX: iPhone SE (Small Screen) Optimization for Trust Badges */
@media (max-width: 400px) {
  .trust-badges-container {
      flex-wrap: nowrap !important; /* Force one line */
      gap: 0.5rem !important; /* Override gap-2 (0.5rem) */
      padding: 0 2px; /* Ensure max width usage */
  }

  .trust-badge {
    font-size: 0.68rem !important; /* 0.68rem = ~11px */
    padding: 0.45em 0.55em !important; /* Balanced padding */
    white-space: nowrap; 
    letter-spacing: 0.4px; /* Slight tighten */
  }
}

/*** Course Card Badges ***/
/* 
   Standard size is 0.75rem (12px) for readability.
   On small screens (iPhone SE, etc.), 0.75rem looks too big/cluttered, 
   so we reduce it to 0.67rem (~11px) to maintain visual balance. 
*/
.course-badge {
  font-size: 0.75rem !important;
}

@media (max-width: 400px) {
  .course-badge {
    font-size: 0.67rem !important;
  }
}

/* === END modules/components.css === */


/* 4. Forms & Inputs */
/* === BEGIN modules/forms.css === */
/*
   FORMS & INPUTS
   Styling for input fields, validation states, and specific form layouts.
*/

/* Contact Form Error Messages */
.help-block {
  color: #ff0000;
  /* Red color for error messages */
  margin-top: 5px;
}

/* This will style the unordered list within the help-block class used for error messages */
.help-block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* This will style each list item within the help-block class used for error messages */
.help-block li {
  font-size: 14px;
}

/* Styling for individual form control validation state */
.form-control.is-invalid,
.form-control.is-valid {
  border-color: #ff0000;
  /* Add other styling like box-shadow if needed */
}

/* Styling for valid input fields, optional if you want to highlight valid fields */
.form-control.is-valid {
  border-color: #28a745;
  /* Bootstrap success color */
}

/* You may also want to style the validation message for the valid state */
.valid-feedback {
  color: #28a745;
  /* Bootstrap success color */
}

/*** reCAPTCHA Responsive Fix - Homepage Only ***/
.homepage-recaptcha .g-recaptcha {
  display: flex;
  justify-content: center;
}

@media (max-width: 400px) {
  .homepage-recaptcha .g-recaptcha {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

/* Custom Styles for Home Form (Extracted from index.html) */
.home-success-container {
    text-align: center;
    padding: 2.5rem 1.5rem;
    animation: fadeInUp 0.5s ease;
}
.home-success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn 0.5s ease, pulse 2s ease infinite;
    box-shadow: 0 8px 30px rgba(33, 37, 41, 0.4);
}
.home-success-checkmark i {
    font-size: 2.5rem;
    color: white;
}
.home-success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}
.home-success-message {
    color: rgba(255,255,255,0.9);
    margin-bottom: 1rem;
}
.home-error-container {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    animation: shake 0.5s ease;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 8px 30px rgba(206, 37, 42, 0.4); }
    50% { box-shadow: 0 8px 50px rgba(206, 37, 42, 0.6); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* === END modules/forms.css === */


/* 5. Layout (Header, Footer, Sections) */
/* === BEGIN modules/layout.css === */
/*
   LAYOUT & SECTIONS
   Structure and general page layout including header, footer, and main sections.
*/

/*** Hero Section ***/
.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force hero above-the-fold elements to be visible immediately.
   WOW.js sets visibility:hidden on .wow elements until JS runs,
   causing a ~3.6s LCP render delay. This override lets the hero
   paint instantly while animations still play normally. */
.hero-section.wow,
.hero-section .wow {
  visibility: visible !important;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Parallax effect — desktop only */
@supports (background-attachment: fixed) {
  @media (hover: hover) and (min-width: 769px) {
    /* Use the existing <picture>/<img> hero image; apply CSS background for parallax */
    .hero-section {
      background: url(../../img/The%20Best%20Driving%20School%20in%20Windsor.jpg) center/cover no-repeat fixed;
    }
    .hero-section .hero-bg,
    .hero-section picture {
      display: none;
    }
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 8rem 0 6rem;
}

/* Eyebrow */
.hero-eyebrow {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 1rem;
}

/* Title */
.hero-title {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Subtitle */
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 2.5rem;
}

/* CTA Buttons */
.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-hero {
  padding: 16px 36px !important;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(230, 80, 80, 0.45);
}

.btn-hero-outline {
  padding: 16px 36px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile Hero */
@media (max-width: 768px) {
  .hero-section {
    min-height: 60vh;
  }
  
  .hero-content {
    padding: 7rem 0 5rem;
  }

  .btn-hero,
  .btn-hero-outline {
    padding: 14px 28px !important;
    font-size: 0.95rem;
  }
}

/* Keep old carousel control styles for any pages still using carousel */
.carousel-control-prev,
.carousel-control-next {
  width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--primary);
  border: 10px solid var(--primary);
  border-radius: 12px;
}

.page-header {
  background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url(../../img/drive-test-windsor-g-test.jpg) center center no-repeat;
  background-size: cover;
}
/* Note: Modified url point to ../../img/ instead of ../img/ because files are one level deeper now? 
   Wait, if imported from style.css, relative paths are relative to style.css location? 
   No, @import uses the path of the *imported* file relative to the *importing* file, but URLs inside the imported file are relative to the imported file location.
   original: url(../img/...) relative to css/style.css -> img/
   new file: css/modules/layout.css -> relative to css/modules/ -> need to go up two levels? No.
   css/style.css is at css/
   css/modules/layout.css is at css/modules/
   So we need ../../img/ to get to root/img/?
   Root sequence:
   /css/style.css
   /img/
   
   From /css/style.css, ../img/ works if img is sibling of css folder? 
   No, if folder structure is:
   root/
     css/style.css
     img/
   Then ../img/ refers to copy of img folder? No.
   If css and img are in root.
   css/style.css -> ../img matches root/img.
   
   If I move code to css/modules/layout.css:
   css/modules/layout.css -> ../../img matches root/img.
   So I need to update paths.
*/

.breadcrumb-item+.breadcrumb-item::before {
  color: #999999;
}

/*** Facts ***/
@media (min-width: 991.98px) {
  .facts {
    position: relative;
    /* margin-top: -75px; */
    /* Adjust the margin-top as needed to show the award before the change was because the gap was too big so if I remove award then TODO: uncomment section if i remove award*/
    z-index: 1;
  }
}

@media (max-width: 991.98px) {
  .facts {
    margin-top: -100px;
    /* Adjust this value as needed */
    padding-top: 20px;
    /* Adjust this value as needed */
  }
}

/*** Courses ***/
.courses {
  min-height: 100vh;
  /* Path adjustment: ../../img/carousel-1.jpg */
  background: linear-gradient(rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.9)),
    url(../../img/carousel-1.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.driving-courses-item {
  border-radius: 0;
}

/* 
   MOBILE GLITCH FIX: 
   Replaced height transition with opacity/visibility.
   Animating height on touch devices causes layout thrashing and "sticky" hover loops.
   Opacity is performant and stable.
*/
.driving-courses-item .driving-courses-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.driving-courses-item .position-relative img {
  width: 100% !important;
  aspect-ratio: 1.25 / 1 !important;
  object-fit: cover !important;
}

.driving-courses-item:hover .driving-courses-overlay {
  opacity: 1;
  visibility: visible;
}

.driving-courses-item .bg-primary del {
  font-size: 0.8em;
  opacity: 0.7;
}

.courses .bg-primary.rounded {
  border-radius: 12px !important;
}

#appointmentSection .bg-primary {
  border-radius: 12px;
}

/*** Footer ***/
.footer .btn.btn-link {
  display: block;
  margin-bottom: 5px;
  padding: 0;
  text-align: left;
  color: var(--light);
  font-weight: normal;
  text-transform: capitalize;
  transition: 0.3s;
}

.footer .btn.btn-link::before {
  position: relative;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--light);
  margin-right: 10px;
}

.footer .btn.btn-link:hover {
  color: var(--primary);
  letter-spacing: 1px;
  box-shadow: none;
}

.copyright {
  background: #222325;
}

.copyright a {
  color: var(--primary);
}

.copyright a:hover {
  color: var(--light);
}

/* === END modules/layout.css === */


/* 5b. Social Proof Bar (commented out) */
/* === BEGIN modules/social-proof.css === */
/*
   SOCIAL PROOF BAR
   Compact trust metrics strip between hero and content.
*/

.social-proof-bar {
  background: var(--dark, #2c2f33);
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.proof-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2rem;
}

.proof-icon {
  color: var(--primary, #ce252a);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.proof-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.proof-value {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.proof-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.proof-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Tablet */
@media (max-width: 768px) {
  .proof-items {
    flex-wrap: wrap;
    gap: 0.75rem 0;
    justify-content: center;
  }

  .proof-item {
    padding: 0.25rem 1rem;
    flex: 0 0 auto; /* let items size naturally */
  }

  .proof-divider {
    display: none; /* hide dividers, rely on spacing */
  }

  .proof-value {
    font-size: 1rem;
  }

  .proof-label {
    font-size: 0.68rem;
  }
}

/* Small Mobile - 2x2 grid */
@media (max-width: 480px) {
  .proof-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .proof-divider {
    display: none;
  }

  .proof-item {
    justify-content: center;
    padding: 0.4rem 0;
  }
}

/* === END modules/social-proof.css === */


/* 5c. How It Works (commented out) */
/* === BEGIN modules/how-it-works.css === */
/*
   HOW IT WORKS
   4-step process section with numbered circles, icons, and connector line.
*/

.hiw-step {
  position: relative;
  padding: 1.5rem 1rem;
}

.hiw-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary, #ce252a);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hiw-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(206, 37, 42, 0.08);
  transition: all 0.3s ease;
}

.hiw-icon-wrap i {
  font-size: 1.8rem;
  color: var(--primary, #ce252a);
  transition: all 0.3s ease;
}

.hiw-step:hover .hiw-icon-wrap {
  background: var(--primary, #ce252a);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(206, 37, 42, 0.25);
}

.hiw-step:hover .hiw-icon-wrap i {
  color: #fff;
}

.hiw-step h5 {
  font-weight: 600;
  font-size: 1.05rem;
}

.hiw-step p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Connector line between steps (desktop) */
.hiw-connector {
  position: absolute;
  top: 90px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(206, 37, 42, 0.15) 10%,
    rgba(206, 37, 42, 0.15) 90%,
    transparent
  );
  z-index: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .hiw-step {
    padding: 1rem 0.5rem;
  }

  .hiw-icon-wrap {
    width: 64px;
    height: 64px;
  }

  .hiw-icon-wrap i {
    font-size: 1.4rem;
  }
}

/* === END modules/how-it-works.css === */


/* 6. Navigation */
/* === BEGIN modules/navbar.css === */
/*
   NAVBAR & NAVIGATION SYSTEM
   Contains all logic for the responsive navigation bar, including:
   - Mobile cascading menu (Apple-style)
   - Desktop dropdowns
   - Safe-area adjustments
   - Animations (Chevron, Burger, Slide-ins)
*/

/*** Navbar ***/
.navbar.sticky-top {
  top: -100px;
  transition: 0.5s;
}

/* FIX: Make mobile menu scrollable on landscape/small screens */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
    /* Smooth scrolling feel */
    -webkit-overflow-scrolling: touch;
  }
}

/* FIX: Prevent Navbar Overlap on Intermediate Desktop Widths (Zoom/Resize) */
@media (min-width: 992px) and (max-width: 1250px) {
  .navbar .navbar-nav .nav-link {
    padding: 15px 10px !important;
    /* Reduce horizontal padding */
    font-size: 14px !important;
    /* Slightly smaller font */
  }

  .navbar-brand h2 {
    font-size: 1.5rem !important;
    /* Scale down logo text */
  }

  .navbar a.btn.btn-primary {
    padding: 1.5rem 1.5rem !important;
    /* Compact button padding */
  }
}

.navbar .navbar-brand,
.navbar a.btn {
  height: 80px;
}

/* Navbar CTA button - centered text with arrow */
.navbar a.btn.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 0.5rem;
  border-radius: 0;
}

.navbar a.btn.btn-primary i {
  flex-shrink: 0;
}

.navbar .navbar-nav .nav-link {
  margin-right: 30px;
  padding: 25px 0;
  color: var(--dark);
  font-weight: 500;
  text-transform: uppercase;
  outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: var(--primary);
}

/* Ensure chevron changes color on hover/active since we use opaque background now */
.navbar .nav-link:hover .chevron-icon::before,
.navbar .nav-link:hover .chevron-icon::after,
.navbar .nav-link.active .chevron-icon::before,
.navbar .nav-link.active .chevron-icon::after {
  background-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATED CHEVRON - Clean V-shape implementation
   Two bars meeting at center, rotating smoothly when opened
   Uses translateY to keep chevron vertically centered in both states
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make dropdown toggle a flex container for perfect centering */
.navbar .dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* Remove default Bootstrap arrow */
.navbar .dropdown-toggle::after {
  display: none !important;
}

/* Container for the chevron */
.navbar .dropdown-toggle .chevron-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 12px;
  height: 10px;
  flex-shrink: 0;
}

/* Two halves that form the chevron V shape */
.navbar .dropdown-toggle .chevron-icon::before,
.navbar .dropdown-toggle .chevron-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 1.6px;
  background-color: var(--dark);
  /* Opaque color to fix dark overlap */
  /* Adjusted border-radius: keep inner vertex sharp while allowing subtle rounding on outer edges for a cleaner chevron */
  top: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease;
  transform-origin: center 45%;
  /* Pivot point raised slightly to ensure tight rotation at the new overlap point */
}

/* Left half - positioned to meet at center, angled down-left */
/* translateY(1.5px) pushes down to center the down-pointing chevron */
.navbar .dropdown-toggle .chevron-icon::before {
  right: 44%;
  /* 44% Overlap: Moves segments closer than 50% to eliminate gap/notch at vertex */
  transform-origin: 100% 50%;
  transform: translateY(1.5px) rotate(40deg);
  border-radius: 1px 0 0 1px;
  /* Hybrid Shape: Sharp inner vertex (0px), Rounded outer edges (1px) for "soft backends" */
}

/* Right half - positioned to meet at center, angled down-right */
.navbar .dropdown-toggle .chevron-icon::after {
  left: 44%;
  /* 44% Overlap: Matches left side for symmetrical sharp point */
  transform-origin: 0% 50%;
  transform: translateY(1.5px) rotate(-40deg);
  border-radius: 0 1px 1px 0;
  /* Hybrid Shape: Sharp inner vertex (0px), Rounded outer edges (1px) */
}

/* When expanded - V flips to point UP */
/* translateY(-1.5px) pushes up to center the up-pointing chevron */
.navbar .dropdown-toggle[aria-expanded="true"] .chevron-icon::before {
  transform: translateY(-1.5px) rotate(-40deg);
}

.navbar .dropdown-toggle[aria-expanded="true"] .chevron-icon::after {
  transform: translateY(-1.5px) rotate(40deg);
}

/* Added this so it'll be h2 on larger screens and h5 on smaller screens for our navbar brand */
/* Default styles for h2 and h5 */
.navbar-brand h2,
.navbar-brand h5 {
  display: none;
}

/* Display h2 on larger screens */
@media (min-width: 991.99px) {
  .navbar-brand h2 {
    display: block;
  }

  /* Desktop Chevron Adjustment: Spread out lines to fix overlap */
  .navbar .dropdown-toggle .chevron-icon::before {
    right: 50%;
  }

  .navbar .dropdown-toggle .chevron-icon::after {
    left: 50%;
  }
}

/* Display h5 on smaller screens */
@media (max-width: 991.98px) {
  .navbar-brand h5 {
    display: block;
  }
}

@media (max-width: 991.98px) {
  /* this means the navbar will be collapsed for screens smaller than 992px */

  /* Thicker chevron on mobile for better visibility */
  .navbar .dropdown-toggle .chevron-icon::before,
  .navbar .dropdown-toggle .chevron-icon::after {
    width: 8px;
    height: 2px;
  }

  /* --- Mobile Navbar Stabilization & Animation --- */

  /* 1. Fix "Shimmy": Enforce stable height so scroll handlers don't jitter */
  /* CRITICAL: Navbar header must be ABOVE the full-screen overlay (z-index: 1040) */
  /* Note: Don't add position:relative - it breaks Bootstrap's sticky-top */
  .navbar {
    min-height: 70px;
    /* Aligns with desktop/standard mobile height */
    align-items: center;
    z-index: 1050 !important;
    /* Higher than overlay - prevents clicks passing through to hidden content */
  }

  /* 2. Minimalist Navbar Toggler (The Button) */
  .navbar-toggler {
    padding: 0;
    border: none;
    width: 30px;
    /* Fixed width for container */
    height: 30px;
    /* Fixed height for container */
    position: relative;
    z-index: 1051;
    /* Above overlay to ensure always clickable */
  }

  /* Hit Slop (Invisible Touch Area) */
  /* Changed to ::before to avoid conflict with icon's ::after */
  .navbar-toggler::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
  }

  /* Visible focus ring ONLY for keyboard users (tabbing) */
  .navbar-toggler:focus-visible {
    box-shadow: 0 0 0 3px rgba(206, 37, 42, 0.45);
    /* Brand Red */
    outline: none;
  }

  /* Remove default focus ring for mouse clicks to keep it clean */
  .navbar-toggler:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
  }

  /* 3. "Three-Bar to X" Animation (Classic Hamburger) */

  /* Container - the middle bar */
  .navbar-toggler-icon {
    background-image: none !important;
    background-color: var(--dark);
    width: 22px;
    height: 2px;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Closing: middle bar fades in after rotation completes */
    transition: background-color 0.15s ease-out 0.1s;
  }

  /* Top Bar */
  .navbar-toggler-icon::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: var(--dark);
    border-radius: 1px;
    top: -7px;
    left: 0;
    /* Closing: rotate back first (0s delay), then slide apart (0.15s delay) */
    transition: transform 0.15s ease-in, top 0.15s ease-out 0.15s;
    will-change: transform, top;
    backface-visibility: hidden;
  }

  /* Bottom Bar */
  .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: var(--dark);
    border-radius: 1px;
    bottom: -7px;
    left: 0;
    /* Closing: rotate back first (0s delay), then slide apart (0.15s delay) */
    transition: transform 0.15s ease-in, bottom 0.15s ease-out 0.15s;
    will-change: transform, bottom;
    backface-visibility: hidden;
  }

  /* ═══ ACTIVE STATE: Opening Animation ═══ */

  /* Middle bar fades out immediately */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
    transition: background-color 0.1s ease-out;
  }

  /* Top bar: slides to center first, then rotates */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
    /* Opening: slide to center first (0s delay), then rotate (0.15s delay) */
    transition: top 0.15s ease-out, transform 0.15s ease-out 0.15s;
  }

  /* Bottom bar: slides to center first, then rotates */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
    /* Opening: slide to center first (0s delay), then rotate (0.15s delay) */
    transition: bottom 0.15s ease-out, transform 0.15s ease-out 0.15s;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     FULL-SCREEN OVERLAY MENU - APPLE-STYLE SLIDING CURTAIN
     The curtain slides down (transform) with an opaque background.
     Items then slide+fade in.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* CSS Variables are defined in global :root at top of file */

  /* 
     ITEM ANIMATION: Slide Down + Fade In
     Starts higher up (-8px) and slides into place
     (Reduced from -20px to fix "dropping" sensation)
  */

  /* Initial state: Hidden above */
  .navbar-collapse .navbar-nav>.nav-item,
  .navbar-collapse .navbar-nav>a.nav-item {
    opacity: 0;
    transform: translateY(-12px);
    /* Noticeable but not dramatic */
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    /* Fast exit */
  }

  /* Open state: Slide down and fade in */
  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item,
  .navbar.menu-open .navbar-collapse .navbar-nav>a.nav-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--apple-item-duration) var(--apple-ease),
      transform var(--apple-item-duration) var(--apple-ease);
  }

  /* Stagger Delays - Apple Formula: calc(200ms base + index * 40ms)
     This creates the visible "waterfall" cascade effect */
  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(1) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 0);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(2) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 1);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(3) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 2);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(4) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 3);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(5) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 4);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(6) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 5);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(7) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 6);
  }

  .navbar.menu-open .navbar-collapse .navbar-nav>.nav-item:nth-child(8) {
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 7);
  }

  /* 
     Base Menu Container 
     - Fixed full screen
     - Solid White Background (Opaque when fully open)
     - Slides down from top (transform) AND fades in
  */
  /* 
     Base Menu Container 
     - Fixed full screen
     - Transparent background (handled by curtain)
     - Fades in (Opacity) but DOES NOT SLIDE (Transform) - prevents items "dropping"
     - Items cascade inside this static container
  */
  .navbar-collapse,
  .navbar-collapse.collapse,
  .navbar-collapse.collapse:not(.show),
  .navbar-collapse.collapsing {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    z-index: 1040;
    padding-top: 60px;

    /* VISUAL & MOTION - Container Opacity Only */
    background: transparent !important;
    transform: none !important;
    /* STATIC container */
    opacity: 0;
    /* Start transparent */
    visibility: hidden;

    /* 
           iOS FIX: "Solid Snap" Closure (No Fade)
           Problem: Converting to 'opacity 0.2s' caused the bottom white bar to fade out (Anything above 0.2 will bug it out)
           Problem: Converting to 'linear 0.4s' caused the bottom white bar to fade out (Anything above 0s will bug it out)
           BEFORE the curtain finished sliding up, creating a transparent gap/glitch.
           
           Solution: 
           - Opacity: 0.2s (Instant snap) And then just leave linear alone. Don't put anything after it. You can put something after the last linear that doesn' t affect it.
           IMPORTANT I think we're just glitching it right now. Because for opacity I put 1.5s,
            and then it messed everything up.So iOS is just glitching out right now. And we're kind of riding the wave. I'm not sure how to control this part though TODO find and fix issue maybe in ios docs
            - Lienar: If I also change linear to anything above 0 seconds, it will also bug out.
           
           This forces the container (and the white background behind the safe-area) 
           to stay SOLID WHITE until the menu is completely off-screen.
        */
    /* Animation definition - Fade Only */
    /* Closing: 0.2s Fade out with apple ease to match the entrance "fading out" feel 
    WARNING: When I changed the first 0.2s to 0.4s. There starts being that same glitch again. So I don't know what' s making that workhappen TODO: INVESTIGATE FURTHER after*/
    transition: opacity 0.2s var(--apple-ease) 0.4s, visibility 0s linear var(--apple-curtain-duration);
    /* transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s; This makes it opaque coming down for the curtain.,
          but then the bottom doesn't stay; it disappears because of the 0.4s I added back. The first part after linear. */


    /* This part here failed because of the first part after linear,
        0.4s. 
        transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s; */
    /* Hide after curtain up */

    /* Reset old styles */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* iOS Safari Formatting Context Fix */
    /* Ensures 100dvh works correctly without horizontal scrollbars */
    box-sizing: border-box;
  }

  /* 
     THE CURTAIN ELEMENT (Pseudo-element)
     - Solid White (Opaque)
     - Slides down from -100% (top) to 0 (full)
     - This provides the "Pull Down" effect independently of content
  */
  .navbar-collapse::before {
    content: '';
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* User Request: Solid White Background (No Glass/Blur) */
    background-color: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: translateY(-100%);
    /* Match Apple's transition */
    transition: transform var(--apple-curtain-duration) var(--apple-ease) var(--apple-curtain-delay);
    will-change: transform;
    z-index: 0;
    /* Behind content */
  }

  /* OPEN STATE - Fade Container In */
  .navbar.menu-open .navbar-collapse,
  .navbar.menu-open .navbar-collapse.collapse,
  .navbar.menu-open .navbar-collapse.collapsing {
    transform: none !important;
    /* Stay static */
    opacity: 1;
    /* Fade to solid */
    visibility: visible;
    overflow-y: auto !important;

    /* Immediate visibility on open */
    /* Opening: Instant opacity to ensure solid slide-down effect (matches solid exit) */
    /* Opening: Instant opacity for solid slide, but use Apple ease to fix Safari bottom delay 
    ADDED 0.2s myself without AI to microfix it and it looks amazing When I put it to 0s,
      it does not look good because the bottom part glitches out. If you want to try it,
      you can try the Python and change the first after opacity from 0.2s to 0s, and you will see the glitch I'm talking about. */
    transition: opacity 0.2s var(--apple-ease) 0s,
      visibility 0s linear 0s;
  }

  /* Trigger the Curtain Slide */
  .navbar.menu-open .navbar-collapse::before {
    transform: translateY(0%);
    /* Curtain transition matches container timing logic */
    transition: transform var(--apple-curtain-duration) var(--apple-ease);
  }

  /* Nav items container */
  .navbar-collapse .navbar-nav {
    padding: 1.5rem 2rem 8rem;
    position: relative;
    z-index: 1;
    /* Above curtain */
  }

  /* Nav link styling - larger, bolder for mobile */
  .navbar-nav>.nav-item>.nav-link,
  .navbar-nav>a.nav-item.nav-link {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.5rem 0; /* Compact Premium Padding */
    color: var(--dark);
    letter-spacing: -0.025em; /* Premium "Stacked" Typography */
  }

  .navbar-nav>.nav-item>.nav-link:hover,
  .navbar-nav>a.nav-item.nav-link:hover {
    color: var(--primary);
  }

  .navbar-nav>.nav-item>.nav-link.active,
  .navbar-nav>a.nav-item.nav-link.active {
    color: var(--primary);
  }

  /* Dropdown menu - mobile accordion style */
  .navbar-nav .dropdown-menu {
    display: block !important;
    position: static !important;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    padding-left: 1.25rem;
    /* Smoother accordion with Apple-style easing */
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar-nav .dropdown-menu.show {
    max-height: 500px;
    /* padding-top: 0.25rem; Removing for best padding. And premium look.s */
  }

  /* Dropdown items - cascade in with stagger when expanded */
  .navbar-nav .dropdown-menu .dropdown-item {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--dark);
    padding: 0.35rem 0; /* Tighter dropdown spacing */
    background: transparent;
    /* Initial state: faded and slightly left */
    opacity: 0;
    transform: translateX(-8px);
    transition:
      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      color 0.15s ease;
  }

  /* Staggered reveal for mobile dropdown items */
  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.04s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.07s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.10s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.13s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(5) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.16s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(6) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.19s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(7) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.22s;
  }

  .navbar-nav .dropdown-menu.show .dropdown-item:nth-child(8) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.25s;
  }

  .navbar-nav .dropdown-menu .dropdown-item:hover,
  .navbar-nav .dropdown-menu .dropdown-item:focus {
    background: transparent;
    color: var(--primary);
  }

  /* Current page state */
  .navbar-nav .dropdown-menu .dropdown-item.active {
    background: transparent;
    color: var(--primary);
    font-weight: 550;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     MENU CLOSE STATE
     ═══════════════════════════════════════════════════════════════════════════ */

  /* When menu closes, reset dropdown */
  .navbar:not(.menu-open) .navbar-collapse .dropdown-menu {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* IMPT: Do NOT set padding: 0, or it wipes out padding-left and shifts content left. This fixed our issue from before when I had pages down and opened the sub menu. Before, when I was just padding 0 instead of having a separate padding top and padding bottom, it wiped out the left when I pressed X, and it looked really shoddy and bad.  */
  }

  /* Keep dropdown visible when navigating to a dropdown link */
  .navbar-nav .dropdown-menu.navigating {
    max-height: 500px !important;
    /* IMPT: Match padding-top: 0.25rem to prevent layout shifts Before, when I pressed, when the page was opening, and I pressed one, everything shifted down where they looked really ugly. */
    padding-top: 0 !important;  
    /* 
      EXPLANATION: 
      When a user clicks a link, JS adds '.navigating' to keep the menu open.
      This previously forced 0.5rem padding, causing a jump.
      We must match the standard open menu's 0.25rem to prevent layout shifts.
    */
    padding-bottom: 0 !important;
    /* NOTE: Don't use shorthand 'padding: 0.5rem 0' - it overwrites padding-left: 1.25rem causing items to shift left */
  }

  /* Ensure items stay visible during navigation */
  .navbar-nav .dropdown-menu.navigating .dropdown-item {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     MOBILE CTA - Pinned to bottom with Apple-style cascade animation
     Appears LAST after all nav items have cascaded in
     ═══════════════════════════════════════════════════════════════════════════ */

  .mobile-cta-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 2rem 2rem;
    /* Gradient fade at bottom to ensure button legibility if list scrolls behind it */
    background: linear-gradient(to top, #ffffff 80%, transparent); 
    display: flex;
    justify-content: center; /* Center the pill */
    /* Initial hidden state */
    opacity: 0;
    transform: translateY(-16px);
    /* Close animation */
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
    pointer-events: none; /* Let clicks pass through wrapper areas not covered by button */
  }

  /* iPhone-specific override: Add 1rem to safe area to ensure clearance */
  @supports (-webkit-touch-callout: none) {
    .mobile-cta-wrapper {
      padding-bottom: max(0rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
  }

  /* CTA cascades in AFTER all nav items using Apple physics */
  .navbar.menu-open .mobile-cta-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--apple-item-duration) var(--apple-ease),
      transform var(--apple-item-duration) var(--apple-ease);
    /* Delay = base (0.2s) + stagger (0.04s) * 6 = 0.44s start. Epic finish. */
    transition-delay: calc(var(--apple-base-delay) + var(--apple-stagger-step) * 6);
  }

  .mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto; /* Pill style - fit content */
    min-width: 200px; /* Ensure substantial click target */
    padding: 1rem 2.5rem; /* Classic pill proportions */
    background: var(--primary);
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px; /* Premium Standard - Soft Square */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    /* Elevated floating shadow */
    box-shadow: 0 4px 14px rgba(206, 37, 42, 0.4); 
    pointer-events: auto; /* Re-enable clicks on the button itself */
  }

  .mobile-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(206, 37, 42, 0.5);
    color: #ffffff !important;
  }

  .mobile-cta:active {
    transform: translateY(0);
    /* transform: scale(0.98); */
  }

  .mobile-cta i {
    font-size: 0.9rem;
  }

  /* CTA hidden state is default (opacity:0 in .mobile-cta-wrapper) */

  .px-4 {
    padding-right: 0.25rem !important;
    padding-left: 0.5rem !important;
  }

  /* Adjust the padding of the navbar-toggler button TODO: Not working for some reason so I had to manually override in the actual bootstrap.min.css file which is not ideal */
  .navbar .navbar-nav .nav-link {
    margin-right: 0;
    padding: 10px 0;
  }

  /* Prevent wrapping on strict mobile layouts */
  .navbar-brand h5 {
    white-space: nowrap;
  }
}

/* Adaptive scaling for devices smaller than iPhone 12 (390px) */
/* This catches Samsung S24 (360px), iPhone SE (375px), etc. */
@media (max-width: 389px) {
  .navbar-brand h5 {
    font-size: 1.1rem;
    /* Slightly smaller to fit */
  }
}

/* Fail-safe for extremely narrow devices */
@media (max-width: 340px) {
  .navbar-brand h5 {
    font-size: 0.9rem;
  }
}

/* 
   FIX: iPhone 6 / SE Vertical Overflow
   Target devices with small vertical height (approx < 750px) 
   to compact the menu items so they don't cover the CTA button.
*/
@media (max-width: 991.98px) and (max-height: 620px) {
  /* Smaller nav links */
  .navbar-nav>.nav-item>.nav-link,
  .navbar-nav>a.nav-item.nav-link {
    font-size: 1.25rem !important;
    padding: 0.25rem 0 !important;
  }

  /* Smaller dropdown items */
  .navbar-nav .dropdown-menu .dropdown-item {
    font-size: 1.15rem !important;
    padding: 0.2rem 0 !important;
  }

  /* Tighter section spacing */
  .navbar-collapse .navbar-nav {
    padding-bottom: 6rem; /* Pull up slightly to give CTA more room */
  }
}


@media (min-width: 992px) {
  /* ═══════════════════════════════════════════════════════════════════════════
     DESKTOP DROPDOWN - Refined Cascade Animation
     
     Key improvements over previous version:
     1. Container uses subtle scale + fade (no vertical motion conflict)
     2. Items slide in from LEFT (avoids double-vertical jank)
     3. Visible stagger timing (35ms per item vs 10ms)
     4. Base delay lets container open before items start
     5. Unified easing curve for coordinated motion
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Dropdown menu - hidden by default, positioned below nav item */
  .navbar .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition:
      opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.22s;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 0.5rem 0;
    overflow: hidden;
  }

  /* When dropdown is open via click (Bootstrap adds .show class) */
  .navbar .nav-item .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
      opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     DESKTOP DROPDOWN ITEMS - Smooth Horizontal Cascade
     
     Items slide in from the left with staggered timing.
     Horizontal motion avoids conflict with container's vertical reveal.
     Base delay (50ms) ensures container is partway open before items start.
     Stagger (35ms) creates visible but quick cascade effect.
     ══════════════════════════════════════════════════════════════════════════ */

  /* Dropdown items - horizontal slide + fade */
  .navbar .nav-item .dropdown-menu .dropdown-item {
    opacity: 0;
    transform: translateX(-12px);
    transition:
      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.15s ease,
      color 0.15s ease;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0.65rem 1.25rem;
    position: relative;
  }

  /* Staggered reveal for dropdown items - 50ms base + 35ms stagger */
  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.05s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.085s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.12s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.155s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(5) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.19s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(6) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.225s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(7) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.26s;
  }

  .navbar .nav-item .dropdown-menu.show .dropdown-item:nth-child(8) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.295s;
  }

  /* Dropdown item hover effect - clean, no layout shift */
  .navbar .nav-item .dropdown-menu .dropdown-item:hover,
  .navbar .nav-item .dropdown-menu .dropdown-item:focus {
    background-color: rgba(200, 16, 46, 0.08);
    color: var(--primary);
  }

  /* Click/press state */
  .navbar .nav-item .dropdown-menu .dropdown-item:active {
    background-color: rgba(200, 16, 46, 0.15);
  }

  /* Current page - white text on primary background, no hover effect */
  .navbar .nav-item .dropdown-menu .dropdown-item.active {
    background-color: var(--primary);
    color: #ffffff !important;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item.active:hover,
  .navbar .nav-item .dropdown-menu .dropdown-item.active:focus {
    background-color: var(--primary);
    color: #ffffff !important;
  }
}
/* === END modules/navbar.css === */


/* 7. Page-Specific Styles */
/* === BEGIN modules/pages.css === */
/*
   PAGES
   Page-specific styles that don't fit into global components or layout.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO SHOWCASE - Modern Cinema-Style Layout
   Driving Test Routes page - Premium, immersive video presentation
   ═══════════════════════════════════════════════════════════════════════════ */

.video-showcase {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 3rem;
}

/* Subtle geometric background pattern */
.video-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(206, 37, 42, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(206, 37, 42, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Location Section Header */
.video-location-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.video-location-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.video-location-header h3::before {
  content: '';
  width: 4px;
  height: 28px;
  background: linear-gradient(180deg, var(--primary) 0%, #ff6b6b 100%);
  border-radius: 2px;
}

.video-location-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(206, 37, 42, 0.3) 0%, transparent 100%);
}

/* Video Item - Modern floating style */
.video-showcase-item {
  position: relative;
  border-radius: 16px;
  /* overflow: hidden; Removed to allow hit-area extension */
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Crash Safety Strip - Prevents jitter/hopping on touch devices */
.video-showcase-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 25px;
  z-index: 1;
  pointer-events: auto;
}

.video-showcase-item:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(206, 37, 42, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Video wrapper with aspect ratio */
.video-showcase-item .video-wrapper {
  position: relative;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.video-showcase-item .video-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 10;
}

/* Video info section */
.video-showcase-item .video-info {
  padding: 1rem 1.25rem;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-radius: 0 0 16px 16px; /* Restore bottom radius manually */
}

.video-showcase-item .video-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Test type badge */
.video-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-badge.g2 {
  background: linear-gradient(135deg, #2c2f33 0%, #4a4e54 100%);
  color: #fff;
}

.video-badge.g {
  background: linear-gradient(135deg, var(--primary) 0%, #e02027 100%);
  color: #fff;
}

/* Route type indicator */
.video-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6c757d;
}

.video-location-pill i {
  font-size: 0.7rem;
  color: var(--primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-showcase-item {
    border-radius: 16px;
  }

  .video-showcase-item .video-wrapper {
    border-radius: 16px 16px 0 0;
  }

  .video-showcase-item .video-info {
    padding: 1rem 1.25rem;
  }

  .video-location-header h3 {
    font-size: 1.25rem;
  }
}

/* Video section divider */
.video-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(206, 37, 42, 0.15) 50%, transparent 100%);
  margin: 3rem 0;
}

/* === END modules/pages.css === */


/* 8. Floating Widgets (Chatbot) */
/* === BEGIN modules/chatbot.css === */
/*
   CHATBOT STYLES
   Chatbase toggle button and custom chat interface.
*/

/*** Chatbot ***/
.chatbot-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  background: #dc3545;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  /* Ensure the button is on top of everything */
  transition: all 0.2s ease;
}

.show-chatbot .chatbot-toggler {
  transform: rotate(90deg);
}

.chatbot-toggler span {
  position: absolute;
}

.show-chatbot .chatbot-toggler span:first-child,
.chatbot-toggler span:last-child {
  opacity: 0;
}

.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1;
}

.chatbot {
  position: fixed;
  right: 40px;
  bottom: 100px;
  width: 420px;
  transform: scale(0.5);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: #fff;
  border-radius: 15px;
  transform-origin: bottom right;
  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
    0 32px 64px -48px rgba(0, 0, 0, 0.5);
  transition: all 0.1s ease;
  z-index: 1040;
}

.show-chatbot .chatbot {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.chatbot header {
  background: #dc3545;
  padding: 16px 0;
  text-align: center;
  position: relative;
}

.chatbot header h2 {
  color: #fff;
  font-size: 1.4rem;
}

.chatbot header span {
  position: absolute;
  right: 20px;
  top: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  transform: translateY(-50%);
}

.chatbot .chatbox {
  height: 400px;
  overflow-y: auto;
  padding: 30px 20px 100px;
}

.chatbox .chat {
  display: flex;
}

.chatbox .incoming span {
  height: 32px;
  width: 32px;
  color: #fff;
  align-self: flex-end;
  background: #dc3545;
  text-align: center;
  line-height: 32px;
  border-radius: 4px;
  margin: 0 10px 7px 0;
}

.chatbox .outgoing {
  margin: 20px 0;
  justify-content: flex-end;
}

.chatbox .chat p {
  color: #fff;
  max-width: 75%;
  white-space: pre-wrap;
  font-size: 0.95rem;
  padding: 12px 16px;
  border-radius: 10px 10px 0 10px;
  background: #dc3545;
}

.chatbox .chat p.error {
  color: #721c24;
  background: #f8d7da;
}

.chatbox .incoming p {
  color: #000;
  background: #f2f2f2;
  border-radius: 10px 10px 10px 0;
}

.chatbot .chat-input {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  gap: 5px;
  background: #fff;
  padding: 5px 20px;
  border-top: 1px solid #ccc;
}

.chat-input textarea {
  height: 55px;
  width: 100%;
  border: none;
  outline: none;
  max-height: 180px;
  font-size: 0.95rem;
  resize: none;
  padding: 16px 15px 16px 0;
}

.chat-input span {
  align-self: flex-end;
  height: 55px;
  line-height: 55px;
  color: #dc3545;
  font-size: 1.35rem;
  cursor: pointer;
  visibility: hidden;
}

.chat-input textarea:valid~span {
  visibility: visible;
}

/* Added this so the chatbot will be full screen on mobile devices */
@media (max-width: 490px) {
  .chatbot {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .chatbot .chatbox {
    height: 90%;
  }
}

/* === END modules/chatbot.css === */


/* 9. Blog Components */
/* === BEGIN modules/blog-components.css === */
/* ═══════════════════════════════════════════════════════════════════════════
   BLOG COMPONENTS
   Shared styles for premium blog posts (Alerts, Cards, TOC, FAQ, Routes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Alert Box Enhancements */
.alert {
    border: 0; /* Reset standard Bootstrap border */
    border-left: 4px solid;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    /* overflow: hidden; Removed to allow hit-area extension */
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* Hit-area extension to prevent "jitter" when element moves up on hover */
.alert::after {
    content: '';
    position: absolute;
    top: 100%; /* Start below the element */
    left: 0;
    right: 0;
    height: 25px; /* Safety strip in the margin */
    z-index: 1; /* Ensure it catches clicks/hovers */
    pointer-events: auto;
}

/* 
   MOBILE HOVER:
   Enabled on all devices. Jitter fixes provided by ::after extension.
*/
.alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.alert-warning {
    background: linear-gradient(135deg, #fff9e6 0%, #fffdf5 100%);
    border-left-color: #ffc107;
}

.alert-danger {
    background: linear-gradient(135deg, #ffe6e6 0%, #fff5f5 100%);
    border-left-color: #CE252A;
}

.alert-success {
    background: linear-gradient(135deg, #e6f7ed 0%, #f5fdf8 100%);
    border-left-color: #28a745;
}

.alert-info {
    background: linear-gradient(135deg, #e6f3ff 0%, #f5f9ff 100%);
    border-left-color: #17a2b8;
}

.alert-secondary {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left-color: #6c757d;
}

.alert-dark {
    background: linear-gradient(135deg, #d6d8d9 0%, #c6c8ca 100%);
    border-left-color: #343a40;
}

.alert-primary {
    background: linear-gradient(135deg, #ffe6e8 0%, #fff5f6 100%);
    border-left-color: #CE252A;
}

.alert i {
    font-size: 1.1em;
    opacity: 0.9;
}

/* Scoring Badge - Monochromatic Box */
.scoring-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    color: #212529;
    font-weight: 700;
    margin-right: 16px;
    font-size: 0.95rem;
    line-height: 1;
    padding-top: 2px; /* Optical centering */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    flex-shrink: 0;
}

/* Enhanced Card Styles */
.card {
    border-radius: 16px;
    transition: all 0.3s ease;
    /* overflow: hidden; Removed to allow hit-area extension */
    position: relative;
}

/* Fix rounded corners since overflow is removed */
.card > .card-header:first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.card > .card-img-top {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.card > *:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Hit-area extension for cards */
.card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 25px;
    z-index: 1;
    pointer-events: auto;
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }
}

.card-header {
    background: linear-gradient(135deg, #CE252A 0%, #a01d21 100%) !important;
    border: none !important;
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, #CE252A 0%, #a01d21 100%) !important;
}

.card-header.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important;
}

.card-body {
    padding: 1.5rem;
}

.card.border-primary {
    border: 2px solid #CE252A !important;
    box-shadow: 0 3px 10px rgba(206, 37, 42, 0.1);
}

.card.border-primary:hover {
    border-color: #a01d21 !important;
    box-shadow: 0 8px 24px rgba(206, 37, 42, 0.2) !important;
}

.card.border-danger {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.1);
}

.card.border-danger:hover {
    border-color: #b02a37 !important;
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.2) !important;
}

.card .card-header i {
    font-size: 1.1em;
    margin-right: 0.5rem;
    opacity: 0.95;
}

/* Table of Contents Styling */
.card-body ol {
    padding-left: 1.5rem;
    counter-reset: toc-counter;
}

.card-body ol li {
    margin-bottom: 0.75rem;
    counter-increment: toc-counter;
}

.card-body ol li a {
    color: #2c3e50;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.card-body ol li a:hover {
    color: #CE252A;
    text-decoration: none;
}

.card-body ol li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #CE252A, #a01d21);
    transition: width 0.3s ease;
}

.card-body ol li a:hover::after {
    width: 100%;
}

/* TOC Card Specific - Disable Hover Animation */
.card.toc-card:hover {
    transform: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

/* Comparison Table Styling */
.table-responsive {
    border-radius: 16px;
    overflow-x: auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.table {
    margin-bottom: 0;
}

.table thead.table-dark {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
}

.table thead th {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1rem;
    border: none;
    color: #fff;
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-color: #e9ecef;
}

.table tbody td:first-child {
    font-weight: 600;
    color: #2c3e50;
    background-color: #f8f9fa;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM FAQ ACCORDION - Minimal, Clean Design
   Inspired by Apple, Linear, Stripe design language
   ═══════════════════════════════════════════════════════════════════ */

/* Hide all colorful badge icons - too busy */
.faq-icon-badge {
    display: none !important;
}

/* Clean accordion items - pure white, subtle shadow */
.accordion-item {
    background: #ffffff;
    border: none !important;
    border-radius: 16px !important;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.accordion-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Question button - clean white background */
.accordion-button {
    padding: 1.25rem 1.5rem;
    background: #ffffff !important;
    color: #1a1a1a !important;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Expanded state - subtle left border accent, no heavy gradient */
.accordion-button:not(.collapsed) {
    background: #ffffff !important;
    color: #CE252A !important;
    border-left: 3px solid #CE252A;
    box-shadow: none;
}

/* Custom chevron styling */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.25s ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CE252A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}

/* Answer body - clean white, left border accent */
.accordion-body {
    background: #fafafa;
    color: #4a5568;
    padding: 1.25rem 1.5rem;
    padding-left: 1.75rem;
    border-left: 3px solid #CE252A;
    line-height: 1.7;
    animation: fadeIn 0.25s ease-out;
}

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

/* Links in answers */
.accordion-body a {
    color: #CE252A;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s ease;
}

.accordion-body a:hover {
    opacity: 0.8;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.route-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    position: relative;
}

.route-card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 25px;
    z-index: 1;
    pointer-events: auto;
}

.route-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.video-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 10px;
    text-transform: uppercase;
}

.video-badge.g {
    background-color: #2c3e50;
    color: white;
}

.video-badge.g2 {
    background-color: #CE252A;
    color: white;
}

.alert-custom {
    border-left: 4px solid #CE252A;
    background: #fff9fa;
}

/* === END modules/blog-components.css === */


/* Related Articles Mini-Cards - Global Styles */
/* Related Articles Mini-Cards - Global Styles */
.related-articles .mini-card {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    cursor: pointer; /* Indication of clickability */
}

/* Rounded Wrapper for Image */
.related-articles .mini-card .blog-image-wrapper {
    overflow: hidden;
    border-radius: 16px; /* Increased roundness as requested ("more rounded") */
    margin-bottom: 1rem !important;
    position: relative;
    /* Optional: subtle woven shadow for standard state */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

/* Image Styles - Fixed Height & Cover */
.related-articles .mini-card img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 0 !important; /* Wrapper handles the radius */
    margin-bottom: 0 !important;
    width: 100%;
    height: 180px; 
    object-fit: cover;
    display: block;
}

/* Hover Effects */
.related-articles .mini-card:hover .blog-image-wrapper {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* Lift effect on shadow */
}

.related-articles .mini-card:hover img {
    transform: scale(1.08); /* slight zoom in */
}

.related-articles .mini-card h4 a {
    transition: color 0.3s ease;
}

.related-articles .mini-card:hover h4 a {
    color: #CE252A !important;
}
/* Related Articles Vertical Styles */
.related-articles .mini-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.related-articles .blog-image-wrapper {
    height: 250px !important; /* Force taller height */
    width: 100%;
    margin-bottom: 15px !important;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.related-articles .blog-image-wrapper img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease;
}

.related-articles .mini-card:hover .blog-image-wrapper img {
    transform: scale(1.08);
}

.related-articles .mini-card h4.h6 {
    font-size: 1.1rem !important; /* Slightly larger title */
    line-height: 1.4;
}

.related-articles .mini-card h4 a {
    transition: color 0.3s ease;
    text-decoration: none;
    color: #1a1a1a;
}

.related-articles .mini-card:hover h4 a {
    color: #CE252A !important;
}

/* Premium Newsletter Styles (Glassmorphism) */
.newsletter-form-wrapper {
    position: relative;
    max-width: 400px;
}

.newsletter-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(5px);
    color: #fff !important;
    border-radius: 50px !important;
    padding: 15px 25px !important;
    padding-right: 120px !important; /* Space for button */
    height: 55px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.newsletter-input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    border-radius: 40px !important;
    padding: 0 20px !important;
    background-color: #CE252A !important;
    border: none;
    color: white;
    font-weight: 600;
    transition: transform 0.2s;
    z-index: 10;
}


.newsletter-btn:hover {
    transform: scale(1.05);
    background-color: #b01f24 !important;
}

/* =========================================
   11. Newsletter Security Modal (Glassmorphism)
   ========================================= */
.newsletter-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4); /* Dimmed background */
    backdrop-filter: blur(8px); /* The "Blur" Effect */
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.newsletter-modal.show {
    display: flex;
    opacity: 1;
}

.newsletter-modal-content {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 20px; /* Modern rounded corners */
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.newsletter-modal.show .newsletter-modal-content {
    transform: scale(1);
}

.newsletter-modal h3 {
    margin-top: 0;
    color: #1a1a1a;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.newsletter-modal p {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Close Button */
.btn-close-modal {
    margin-top: 1.5rem;
    background: transparent;
    border: none;
    color: #999;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.btn-close-modal:hover {
    color: #333;
}

/* Success/Error Message in Modal */
.modal-message {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}

.modal-message.success { color: #28a745; display: block; }
.modal-message.error { color: #dc3545; display: block; }

/* Spinner in Modal */
.modal-spinner {
    display: none;
    margin: 1rem auto;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #CE252A;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}