/* ================================================
   Connective Groups - Copyright 2025
   ================================================ */


/* ================================================
   RESET & GLOBAL STYLES
   ================================================ */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f9f9f9;
    padding-top: 70px; /* Adjust if your header height changes */
  }
  
  /* ================================================
     NAVIGATION (MENU AT THE TOP)
     ================================================ */
  header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .navbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.3s ease;
  }
  
  .logo-container {
    display: flex;
    align-items: center;
  }
  
  .logo {
    height: 90px;
    margin-right: 0.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
  }
  
  .nav-links li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 0.5rem 1rem; /* Added padding for button feel */
    border-radius: 4px;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .nav-links li a:hover,
  .nav-links li a.active {
    background: linear-gradient(178deg, #4a227b, #2f3c9c);
    color: #fff;
  }
  
  /* Hamburger Menu Styles */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
  }
  
  .hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  /* Mobile Styles */
  @media (max-width: 768px) {
    .nav-links {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #fff;
      flex-direction: column;
      align-items: center;
      display: none; /* Hidden by default */
      padding: 1rem 0;
    }
    .nav-links.open {
      display: flex; /* Display when toggled */
    }
    .nav-links li {
      margin: 0.5rem 0;
    }
    .hamburger {
      display: flex; /* Show on mobile */
    }
  }
  
  /* ================================================
     BANNER SECTION
     ================================================ */
  .banner {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
  }
  
  .banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -2;
    opacity: 0.2; /* 20% opacity */
  }
  
  .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Purple gradient overlay */
    background: linear-gradient(135deg, rgba(74, 34, 123, 0.619), rgba(47, 60, 156, 0.515));
    z-index: -1;
  }
  
  .banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
  }
  
  .banner-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .banner-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }
  
  /* ================================================
     HERO SECTION
     ================================================ */
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    background: linear-gradient(135deg, #6d00d6, #0073d6);
    color: #fff;
  }
  
  .hero-content {
    max-width: 600px;
  }
  
  .hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .hero-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
  }
  
  .btn-primary {
    background-color: #fff;
    color: #2c2c2c;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 1px rgb(0 0 0 / 34%); /* Added block shadow */
  }
  
  .btn-primary:hover {
    background-color: #f2f2f2; /* Slightly darker white */
    transform: scale(1.05); /* Expands a little */
    box-shadow: 0 4px 1px rgb(0 0 0 / 34%); /* Deeper shadow on hover */
  }
  
/* ================================================
   CTA BANNER (CALL TO ACTION)
   ================================================ */
   .cta-banner {
    background: linear-gradient(178deg, #ffffff, #e4e4e4); /* Bold gradient */
    color: #545252;
    text-align: center;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .cta-banner h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  
  .cta-banner p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    max-width: 700px;
  }
  
  /* Consistent Button Style (Same as Other Buttons) */
  .btn-cta {
    background-color: #fff;
    color: #2c2c2c;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 1px rgba(67, 7, 124, 0.682); /* Added block shadow */
  }
  
  /* Hover Effect - Matches Other Buttons */
  .btn-cta:hover {
    background-color: #f2f2f2; /* Slightly darker white */
    transform: scale(1.05); /* Expands a little */
    box-shadow: 0 4px 1px rgb(51, 5, 72); /* Deeper shadow on hover */
  }

 /* ================================================
   HOW IT WORKS SECTION
================================================ */
.how-it-works {
  background: #ffffff;
  color: #333;
  padding: 4rem 2rem;
  text-align: center;
}

.how-it-works-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-direction: row; /* Ensures text is on the left, image on the right */
}

.how-it-works-content {
  text-align: left;
  max-width: 600px;
  flex: 1;
}

/* HOW IT WORKS - Styled Numbered Buttons */
.how-it-works-content ol {
  list-style: none;
  padding-left: 0;
  counter-reset: list-counter;
}

.how-it-works-content li {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  cursor: pointer; /* Ensures hover effect triggers properly */
}

.how-it-works-content li:hover::before {
  transform: scale(1.1); /* Expands the number slightly on hover */
  background: #4a008c; /* Darker purple on hover */
}

.how-it-works-content li::before {
  content: counter(list-counter);
  counter-increment: list-counter;
  background: #6d00d6; /* Purple background */
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px; /* Slightly rounded corners */
  flex-shrink: 0;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.how-it-works-content p {
  font-size: 1rem;
  font-weight: normal;
  color: #555;
  margin-top: 0.5rem;
  flex-basis: 100%; /* Ensures text goes under the number-title pair */
}

/* HOW IT WORKS - Image Hover Effect */
.how-it-works-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.how-it-works-image img:hover {
  transform: scale(1.05); /* Expands the image slightly on hover */
}

/* Mobile Layout - Stack Image Below Text */
@media (max-width: 768px) {
  .how-it-works-container {
    flex-direction: column;
    text-align: center;
  }

  .how-it-works-content {
    text-align: center;
  }

  .how-it-works-content li {
    flex-direction: column;
    align-items: center;
  }
}

/* ================================================
   TRAINING & CERTIFICATIONS SECTION
   ================================================ */
   .training {
    background: linear-gradient(180deg, #4d2c6e, #34246d);
    color: #fff;
    text-align: center;
    padding: 3rem 1rem;
    position: relative;
  }
  
  .training-content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .training h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .training p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
  
  /* ================================================
     CAROUSEL STYLING
     ================================================ */
  .training-carousel {
    display: flex;
    gap: 2rem;
    overflow: hidden;
    justify-content: center;
    max-width: 100%;
    padding: 1rem 0;
    position: relative;
  }
  
  .carousel-slide {
    flex: 0 0 auto;
    width: 150px;
    transition: transform 0.3s ease-in-out;
  }
  
  .carousel-slide img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .carousel-slide img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
  }
  
  /* ================================================
     RESPONSIVE DESIGN
     ================================================ */
  @media (max-width: 768px) {
    .training h2 {
      font-size: 2rem;
    }
  
    .training p {
      font-size: 1rem;
    }
  
    .training-carousel {
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .carousel-slide {
      width: 100px;
    }
  }

  /* ================================================
   FIXED CAROUSEL - ALL 14 IMAGES SHOW
   ================================================ */
#training-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
  white-space: nowrap;
  padding: 20px 0;
}

.carousel-track {
  display: flex;
  gap: 2rem;
  width: calc(150px * 28); /* DUPLICATE IMAGES INCLUDED */
  animation: slideCarousel 35s linear infinite;
}

/* Ensure all images are evenly spaced */
.carousel-slide {
  flex: 0 0 auto;
  width: 150px;
}

/* Ensure no images get cut off */
.carousel-slide img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

/* Hover Effect - Expands Only (No Shadow) */
.carousel-slide img:hover {
  transform: scale(1.1);
  box-shadow: none !important; /* Ensures NO shadow */
}


/* SMOOTH INFINITE SCROLLING */
@keyframes slideCarousel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .training h2 {
    font-size: 2rem;
  }

  .training p {
    font-size: 1rem;
  }

  #training-carousel {
    max-width: 100%;
  }

  .carousel-slide {
    width: 100px;
  }
}

/* ABOUT SECTION */
.about {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
}

/* Container for About Section */
.about-container {
  display: flex;
  flex-direction: column;
  gap: 4rem; /* Space between sections */
}

/* FLEXBOX: Ensures Proper Left-Right Alternation */
.about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  text-align: left;
  width: 100%;
}

/* Alternate Image Positions */
.about-row.left {
  flex-direction: row;
}

.about-row.right {
  flex-direction: row-reverse;
}

/* Image Container */
.about-img-container {
  flex: 0 0 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image Styling */
.about-img {
  width: 100%;
  max-width: 400px;
  min-width: 200px;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.about-img:hover {
  transform: scale(1.1);
}

/* Text Block */
.about-text {
  flex: 0 0 50%;
  max-width: 500px;
}

.about-text h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #4d2c6e;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

/* Mobile Fixes */
@media (max-width: 1024px) {
  .about-row {
    flex-direction: column;
    text-align: center;
  }

  .about-row.right {
    flex-direction: column;
  }

  .about-img-container,
  .about-text {
    flex: 1;
    text-align: center;
  }

  .about-img {
    max-width: 300px;
  }

  .about-text {
    max-width: 100%;
    text-align: center;
  }
}

  
  /* ================================================
     RESPONSIVE DESIGN (FOR CTA BANNER)
     ================================================ */
  @media (max-width: 768px) {
    .cta-banner h2 {
      font-size: 2rem;
    }
  
    .cta-banner p {
      font-size: 1rem;
    }
  
    .btn-cta {
      font-size: 1rem;
      padding: 0.8rem 1.5rem;
    }
  }
  
  
  /* ================================================
     RESPONSIVE DESIGN (FOR CTA BANNER)
     ================================================ */
  @media (max-width: 768px) {
    .cta-banner h2 {
      font-size: 2rem;
    }
  
    .cta-banner p {
      font-size: 1rem;
    }
  
    .btn-cta {
      font-size: 1rem;
      padding: 0.8rem 1.5rem;
    }
  }
  

  /* ================================================
   SERVICES SECTION WITH TRANSPARENT FLOATING ORBS
   ================================================ */
.services {
  position: relative;
  background: linear-gradient(180deg, #665f82, #8f81c3); /* Gradient from dark purple to deep violet */
  color: #fff;
  text-align: center;
  padding: 5rem 1rem;
  overflow: hidden; /* Prevent orbs from overflowing */
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.services .subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #fff;
  line-height: 1.4;
}

/* 3x3 Grid Layout for Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 boxes per row */
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Service Card Styling */
.service-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Hover effect - Expands & Changes Color */
.service-card:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.service-card h3 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: #fff;
}

.service-card p {
  color: #ddd;
  line-height: 1.6;
}

/* ================================================
   RESPONSIVE DESIGN (ADJUST FOR SMALLER SCREENS)
   ================================================ */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 boxes per row */
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(1, 1fr); /* 1 box per row */
  }
}

/* ================================================
   ORBS - Floating White Transparent Circles
   ================================================ */
.orb {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, rgb(255 255 255 / 15%) 70%);
  filter: blur(9px);
  opacity: 0.6;
  animation: floatAround 10s infinite ease-in-out alternate;
}

/* Different Orb Positions */
.orb-1 {
  top: 5%;
  left: 10%;
  animation-duration: 12s;
}

.orb-2 {
  top: 20%;
  right: 15%;
  animation-duration: 14s;
}

.orb-3 {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  animation-duration: 16s;
}

.orb-4 {
  top: 50%;
  left: 5%;
  animation-duration: 10s;
}

.orb-5 {
  bottom: 15%;
  right: 10%;
  animation-duration: 18s;
}

.orb-6 {
  top: 30%;
  right: 50%;
  transform: translateX(50%);
  animation-duration: 11s;
}

/* Floating Animation */
@keyframes floatAround {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.1);
  }
  100% {
    transform: translate(-30px, 20px) scale(1);
  }
}

  
/* ABOUT SECTION */
.about {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
}

/* Container for About Section */
.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Layout: Image Left - Text Right */
.about-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  text-align: left;
  width: 100%;
}

/* Image Container (Left Side) */
.about-img-container {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image Styling */
.about-img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.about-img:hover {
  transform: scale(1.05);
}

/* Text Block (Right Side) */
.about-text {
  flex: 0 0 55%;
  max-width: 600px;
}

/* Adjusted Spacing for Headings & Paragraphs */
.about-text h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem; /* Increased spacing below headings */
  margin-top: 2rem; /* Added spacing above headings */
  color: #4d2c6e;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 2rem; /* Added more space between paragraphs */
}

/* Mobile Fixes */
@media (max-width: 1024px) {
  .about-row {
    flex-direction: column;
    text-align: center;
  }

  .about-img-container {
    width: 100%;
  }

  .about-img {
    max-width: 300px;
  }

  .about-text {
    max-width: 100%;
    text-align: center;
  }
}

/* CTA SECTION (Under About Us) */
.cta-after-about {
  background: linear-gradient(135deg, #4d2c6e, #34246d); /* Smooth purple gradient */
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
  margin-top: 3rem;
  border-radius: 8px;
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.cta-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Use the same primary button styling */
.btn-primary {
  background-color: #fff;
  color: #2c2c2c;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 1px rgb(0 0 0 / 34%);
}

/* Button expands on hover */
.btn-primary:hover {
  background-color: #f2f2f2;
  transform: scale(1.1); /* Expands slightly */
  box-shadow: 0 6px 3px rgb(0 0 0 / 34%); /* Slightly deeper shadow */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .cta-content h2 {
    font-size: 2rem;
  }

  .cta-content p {
    font-size: 1rem;
  }

  .btn-primary {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
  }
}

/* FAQ SECTION */
.faq-section {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #f9f9f9; /* Light background for contrast */
}

.faq-section h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: bold;
  color: #2b1b3a;
}

/* FAQ Container */

#faq {
  min-height: 500px; /* Ensures section is long enough to trigger detection */
  padding-top: 80px; /* Prevents the header from covering it */
}


.faq-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

/* FAQ Items */
.faq-item {
  background-color: #2b1b3a; /* Dark purple */
  color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* FAQ Questions */
.faq-question {
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2b1b3a;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.faq-question:hover {
  background-color: #3b2c4e; /* Lighter purple on hover */
}

/* FAQ Answers - Smooth Expand Effect */
.faq-answer {
  padding: 0 1rem;
  font-size: 1rem;
  background-color: #412d5b; /* Slightly lighter purple */
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease-out;
}

/* When FAQ is active (expanded) */
.faq-item.active .faq-answer {
  height: auto;
}




  
  /* ================================================
   CONTACT US SECTION
   ================================================ */
.contact-section {
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
}

.contact-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-section p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #555;
}

/* Flexbox Layout */
.contact-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Left Side: Image */
.contact-image {
  flex: 0 0 40%;
  text-align: center;
}

.contact-image img {
  width: 100%;
  max-width: 300px;
}
/* Contact Image Hover Effect */
.contact-image img {
  width: 80%;
  max-width: 300px;
  transition: transform 0.3s ease-in-out;
}

.contact-image img:hover {
  transform: scale(1.1); /* Slightly enlarges the image on hover */
}

/* Right Side: Contact Form */
#contact-form {
  flex: 0 0 50%;
  text-align: left;
}

#contact-form label {
  display: block;
  font-weight: 600;
  margin-top: 1rem;
  color: #333;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0.25rem;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.radio-group label {
  font-weight: normal;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Submit Button */
.btn-submit {
  background-color: #4d2c6e;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 1.5rem;
  display: block;
  width: 100%;
}

.btn-submit:hover {
  background-color: #3b2151;
}

/* Success Message */
.form-message {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}

.success {
  background-color: #4CAF50;
  color: white;
}

.hidden {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
  }

  .contact-image {
    flex: 0 0 100%;
  }

  #contact-form {
    flex: 0 0 100%;
  }
}

/* ================================
   POPUP
================================ */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

.popup h2, .popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

.popup p {
  font-size: 1rem;
  line-height: 1.6;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

/* Show Popup */
.hidden { display: none; }

/* ================================
   LOADER STYLES (Always On Top)
================================ */

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4A227B, #2F3C9C);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99999; /* Highest priority */
  transition: opacity 0.5s ease-out; /* Smooth fade-out */
  opacity: 1;
}

/* Centered Loader Content */
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo Styling */
.loader-logo {
  width: 150px;
  opacity: 0;
  animation: logoFadeIn 3s ease-in-out forwards;
}

/* Logo Fade-In */
@keyframes logoFadeIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* Loading Bar */
.loading-bar {
  width: 150px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
}

/* Loading Bar Animation */
.loading-bar::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
  animation: loading 3s linear forwards;
}

/* Loading Bar Fill (Now completes in 6 seconds) */
@keyframes loading {
  0% { width: 0%; }
  100% { width: 100%; }
}



  /* ================================================
     FOOTER
================================================ */
.footer {
  background-color: #2b1b3a;
  color: white;
  padding: 3rem 2rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  margin-bottom: 1.5rem;
}

.footer-column h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a {
  text-decoration: none;
  color: white;
  transition: color 0.3s;
}

.footer-column ul li a:hover {
  color: #f2f2f2;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.social-icons a img {
  width: 35px;
  height: 35px;
  transition: transform 0.3s;
}

.social-icons a:hover img {
  transform: scale(1.1);
}

/* Trustpilot Widget */
.trustpilot-widget {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.trustpilot-widget img {
  width: 150px;
  transition: transform 0.3s ease-in-out;
}

.trustpilot-widget img:hover {
  transform: scale(1.1);
}

/* Contact Info */
.footer-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-item img {
  width: 20px;
  height: 20px;
}

/* Footer Logos */
.footer-logos {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2rem;
}

.footer-logos img {
  width: 120px;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.footer-logos img:hover {
  transform: scale(1.1);
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid white;
  font-size: 0.9rem;
}

.footer-bottom p {
  color: #f2f2f2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-sections {
    flex-direction: column;
    text-align: center;
  }

  .footer-contact {
    flex-direction: column;
  }

  .footer-logos {
    flex-direction: column;
  }
}

  
  /* ================================================
     HEADER SHRINK ON SCROLL
     ================================================ */
  header.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  header.scrolled .navbar {
    padding: 0.3rem 1rem;
  }
  
  header.scrolled .logo {
    opacity: 0.8;
    transform: scale(0.7);
  }
  
  /* ================================================
     SCROLL INDICATOR
     ================================================ */
  #scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(135deg, #6c389d, #575baa);
    width: 0%;
    z-index: 1300;
  }
  
  /* ================================================
   🚀 ROCKET BUTTON (SCROLL TO TOP) - IMPROVED
   ================================================ */
#rocket-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: none;
  border: none;
  width: 80px; /* Increased size */
  height: 80px; /* Increased size */
  cursor: pointer;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.3s ease-in-out;
}

/* Rocket Image */
#rocket-btn img {
  width: 100%;
  height: auto;
}

/* Show the button when scrolling down */
#rocket-btn.show {
  opacity: 1;
  bottom: 50px;
}

/* 🚀 Hover Effect - Moves Rocket Up Slightly */
#rocket-btn:hover {
  transform: translateY(-10px) scale(1.1); /* Moves up & enlarges slightly */
}

/* 🚀 Click Animation - Fly Away */
#rocket-btn.fly-away {
  bottom: 120vh; /* Moves up off the screen */
  transform: scale(1.2);
  opacity: 0;
}


/* ================================================
   CALL TO ACTION - AFTER FAQ WITH FLOATING £ ORBS
   ================================================ */
   .cta-after-faq {
    position: relative;
    background: linear-gradient(135deg, #4d2c6e, #34246d);
    color: #fff;
    text-align: center;
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .cta-after-faq-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Keeps text above orbs */
  }
  
  .cta-after-faq h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
  }
  
  .cta-after-faq p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
  }
  
  /* CTA Button */
  .cta-after-faq .btn-primary {
    background-color: #fff;
    color: #2c2c2c;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 1px rgb(0 0 0 / 34%);
  }
  
  .cta-after-faq .btn-primary:hover {
    background-color: #f2f2f2;
    transform: scale(1.1);
    box-shadow: 0 6px 3px rgb(0 0 0 / 34%);
  }
  
  /* ================================================
     FLOATING £ ORBS - ANIMATED
     ================================================ */
  .cta-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  
  /* Individual Orb Styling */
  .cta-orb {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: floatOrbs 8s infinite ease-in-out alternate;
    opacity: 0.8;
    transition: transform 0.3s ease-in-out;
  }
  
  /* Orb Hover Effect - Moves Slightly */
  .cta-orb:hover {
    transform: scale(1.2) translateY(-10px) rotate(10deg);
    background: rgba(255, 255, 255, 0.25);
  }
  
  /* Orb Positions */
  .cta-orb:nth-child(1) { top: 5%; left: 5%; animation-duration: 12s; }
  .cta-orb:nth-child(2) { top: 15%; right: 10%; animation-duration: 10s; }
  .cta-orb:nth-child(3) { bottom: 10%; left: 20%; animation-duration: 9s; }
  .cta-orb:nth-child(4) { top: 50%; right: 5%; animation-duration: 11s; }
  .cta-orb:nth-child(5) { bottom: 30%; right: 40%; animation-duration: 14s; }
  .cta-orb:nth-child(6) { top: 35%; left: 60%; animation-duration: 13s; }
  .cta-orb:nth-child(7) { bottom: 5%; right: 25%; animation-duration: 15s; }
  .cta-orb:nth-child(8) { top: 10%; left: 70%; animation-duration: 10s; }
  .cta-orb:nth-child(9) { bottom: 20%; left: 10%; animation-duration: 16s; }
  .cta-orb:nth-child(10) { top: 60%; right: 15%; animation-duration: 9s; }
  
  /* Floating Animation */
  @keyframes floatOrbs {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
  }
  
  /* ================================================
     RESPONSIVE DESIGN
     ================================================ */
  @media (max-width: 768px) {
    .cta-after-faq h2 {
      font-size: 2rem;
    }
  
    .cta-after-faq p {
      font-size: 1rem;
    }
  
    .cta-after-faq .btn-primary {
      font-size: 1rem;
      padding: 0.8rem 1.5rem;
    }
  
    /* Adjust Orb Sizes for Mobile */
    .cta-orb {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
    }
  }
  
  
  /* ================================================
     CAROUSEL STYLES
     ================================================ */
  .carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* pointer-events: none; Removed to allow interactions */
  }
  
  .slides {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: auto;
    text-align: center;
  }
  
  .slide.active {
    opacity: 1;
  }
  
  .carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  
  .carousel-controls button {
    background: #3c2d4aab; /* Purple base */
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 8px; /* Softer, rounded edges */
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .carousel-controls button:hover {
    background: #68428dab; /* Lighter purple on hover */
    transform: scale(1.1); /* Expands a little */
  }
  
  .carousel-indicators {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    pointer-events: auto;
  }
  
  .indicator {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  
  .indicator.active {
    opacity: 1;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* ================================================
     TYPOGRAPHY AND SPACING FOR CAROUSEL CONTENT
     ================================================ */
  
  
  .carousel .slide p {
    font-size: 1rem;      /* Slightly bigger font */
    color: #444;            /* Nice dark grey color */
    margin: 1rem 0;         /* Vertical spacing for readability */
  }
  
  .carousel .slide a.btn-primary {
    margin-top: 2rem;       /* Extra space between text and button */
    position: relative;
    z-index: 10; /* Ensure the button is above overlapping elements */
  }
  
  /* Adjust Carousel Controls and Indicator Positioning */
  .carousel-controls {
    padding: 0 9rem; /* Bring arrow buttons closer to the content */
  }
  
  .carousel-indicators {
    bottom: 150px;   /* Move the indicator bar closer up */
  }
  
  .carousel-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    margin: 1rem 0;
  }
/* VERSION 1: Bebas Neue with gradient text */
.carousel .slide h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem; /* Adjust as needed */
  font-weight: bold;
  color: #ffffff; /* Solid white text */
  text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.7); /* Moves the shadow below */
  margin: 1rem 0;
}

  /* ================================================
     TERMS POPUP
     ================================================ */

     /* Full-Width Terms and Conditions Popup with Transparency */
#terms-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; /* Full viewport width */
  max-width: 100%; /* Ensure it never shrinks */
  height: auto;
  max-height: 90vh; /* Avoid going off screen */
  background: rgba(255, 255, 255, 0.927); /* 80% opacity (20% transparency) */
  color: #333;
  padding: 3rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto; /* Enable scrolling if content is too long */
  border-radius: 0; /* Remove border radius for a full-width look */
  backdrop-filter: blur(10px); /* Adds a subtle blur effect */
}

/* Close Button Styling */
#terms-popup .close-popup {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.8rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #terms-popup {
    padding: 2rem; /* Adjust padding for smaller screens */
  }
  
  #terms-popup h2 {
    font-size: 1.8rem;
  }
}
/* ================================================
     TERMS POPUP
     ================================================ */

     /* Full-Width Terms and Conditions Popup with Transparency */
#terms-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; /* Full viewport width */
  max-width: 100%; /* Ensure it never shrinks */
  height: auto;
  max-height: 90vh; /* Avoid going off screen */
  background: rgba(255, 255, 255, 0.927); /* 80% opacity (20% transparency) */
  color: #333;
  padding: 3rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto; /* Enable scrolling if content is too long */
  border-radius: 0; /* Remove border radius for a full-width look */
  backdrop-filter: blur(10px); /* Adds a subtle blur effect */
}

/* Close Button Styling */
#terms-popup .close-popup {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.8rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #terms-popup {
    padding: 2rem; /* Adjust padding for smaller screens */
  }
  
  #terms-popup h2 {
    font-size: 1.8rem;
  }
}

/* ================================================
     PRIVACY POPUP
     ================================================ */
/* Full-Width Privacy Policy Popup with Transparency */
#privacy-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; /* Full viewport width */
  max-width: 100%;
  height: auto;
  max-height: 90vh; /* Avoid going off screen */
  background: rgba(255, 255, 255, 0.8); /* 80% opacity (20% transparency) */
  color: #333;
  padding: 3rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto; /* Enable scrolling */
  border-radius: 0;
  backdrop-filter: blur(10px); /* Adds a soft blur effect */
}

/* Close Button Styling */
#privacy-popup .close-popup {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.8rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #privacy-popup {
    padding: 2rem; /* Adjust padding for smaller screens */
  }
  
  #privacy-popup h2 {
    font-size: 1.8rem;
  }
}
/* CAREER POPUP FORM STYLES */
#career-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; /* Full viewport width */
  max-width: 600px;
  height: auto;
  max-height: 90vh; /* Avoid going off screen */
  background: rgba(255, 255, 255, 0.95); /* 95% opacity */
  color: #333;
  padding: 3rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto; /* Enable scrolling if content is too long */
  border-radius: 12px;
  backdrop-filter: blur(10px); /* Adds a soft blur effect */
}

/* Career Popup Header */
#career-popup h2 {
  font-size: 2rem;
  text-align: center;
  color: #4d2c6e;
  margin-bottom: 1rem;
}

#career-popup p {
  text-align: center;
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2rem;
}

/* Close Button */
#career-popup .close-popup {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.8rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* Input Fields */
#career-popup form label {
  display: block;
  font-weight: bold;
  margin-top: 1rem;
}

#career-popup form input,
#career-popup form textarea,
#career-popup form select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0.25rem;
  font-size: 1rem;
}

/* Radio Buttons */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.radio-group label {
  font-weight: normal;
}

/* Submit Button */
#career-popup .btn-submit {
  background-color: #4d2c6e;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 1.5rem;
  width: 100%;
}

#career-popup .btn-submit:hover {
  background-color: #3b2151;
}

/* Success Message */
#form-message {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem;
  background-color: #4CAF50;
  color: white;
  border-radius: 6px;
  margin-bottom: 1rem;
  display: none; /* Hidden by default */
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
  #career-popup {
    width: 90%;
    padding: 2rem;
  }

  #career-popup h2 {
    font-size: 1.8rem;
  }

  #career-popup p {
    font-size: 1rem;
  }
}
/* Customer Support Popup */
#customer-support-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#customer-support-popup h2 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#customer-support-popup p, #customer-support-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#customer-support-popup ul {
  padding-left: 20px;
}

#customer-support-popup ul li {
  margin-bottom: 0.5rem;
}

#customer-support-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Overflow Out of Hours Popup */
#overflow-hours-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#overflow-hours-popup h2 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#overflow-hours-popup p, #overflow-hours-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#overflow-hours-popup ul {
  padding-left: 20px;
}

#overflow-hours-popup ul li {
  margin-bottom: 0.5rem;
}

#overflow-hours-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Helplines Popup */
#helplines-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#helplines-popup h2 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#helplines-popup p, #helplines-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#helplines-popup ul {
  padding-left: 20px;
}

#helplines-popup ul li {
  margin-bottom: 0.5rem;
}

#helplines-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Telephone Answering Popup */
#telephone-answering-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#telephone-answering-popup h2, #telephone-answering-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#telephone-answering-popup p, #telephone-answering-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#telephone-answering-popup ul {
  padding-left: 20px;
}

#telephone-answering-popup ul li {
  margin-bottom: 0.5rem;
}

#telephone-answering-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Telemarketing Popup */
#telemarketing-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#telemarketing-popup h2, #telemarketing-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#telemarketing-popup p, #telemarketing-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#telemarketing-popup ul {
  padding-left: 20px;
}

#telemarketing-popup ul li {
  margin-bottom: 0.5rem;
}

#telemarketing-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Appointment Setting Popup */
#appointment-setting-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#appointment-setting-popup h2, #appointment-setting-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#appointment-setting-popup p, #appointment-setting-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#appointment-setting-popup ul {
  padding-left: 20px;
}

#appointment-setting-popup ul li {
  margin-bottom: 0.5rem;
}

#appointment-setting-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Follow-Up Calls Popup */
#follow-up-calls-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#follow-up-calls-popup h2, #follow-up-calls-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#follow-up-calls-popup p, #follow-up-calls-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#follow-up-calls-popup ul {
  padding-left: 20px;
}

#follow-up-calls-popup ul li {
  margin-bottom: 0.5rem;
}

#follow-up-calls-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Lead Generation Popup */
#lead-generation-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#lead-generation-popup h2, #lead-generation-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#lead-generation-popup p, #lead-generation-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#lead-generation-popup ul {
  padding-left: 20px;
}

#lead-generation-popup ul li {
  margin-bottom: 0.5rem;
}

#lead-generation-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Surveys Popup */
#surveys-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#surveys-popup h2, #surveys-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#surveys-popup p, #surveys-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#surveys-popup ul {
  padding-left: 20px;
}

#surveys-popup ul li {
  margin-bottom: 0.5rem;
}

#surveys-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Hot Key Transfers Popup */
#hot-key-transfers-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#hot-key-transfers-popup h2, #hot-key-transfers-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#hot-key-transfers-popup p, #hot-key-transfers-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#hot-key-transfers-popup ul {
  padding-left: 20px;
}

#hot-key-transfers-popup ul li {
  margin-bottom: 0.5rem;
}

#hot-key-transfers-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Online Retail Popup */
#online-retail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#online-retail-popup h2, #online-retail-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#online-retail-popup p, #online-retail-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#online-retail-popup ul {
  padding-left: 20px;
}

#online-retail-popup ul li {
  margin-bottom: 0.5rem;
}

#online-retail-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Insurance Popup */
#insurance-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#insurance-popup h2, #insurance-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#insurance-popup p, #insurance-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#insurance-popup ul {
  padding-left: 20px;
}

#insurance-popup ul li {
  margin-bottom: 0.5rem;
}

#insurance-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Automotive Industry Popup */
#automotive-industry-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#automotive-industry-popup h2, #automotive-industry-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#automotive-industry-popup p, #automotive-industry-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#automotive-industry-popup ul {
  padding-left: 20px;
}

#automotive-industry-popup ul li {
  margin-bottom: 0.5rem;
}

#automotive-industry-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Charity Services Popup */
#charity-services-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#charity-services-popup h2, #charity-services-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#charity-services-popup p, #charity-services-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#charity-services-popup ul {
  padding-left: 20px;
}

#charity-services-popup ul li {
  margin-bottom: 0.5rem;
}

#charity-services-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }
/* Digital Marketing Popup */
#digital-marketing-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  max-height: 80vh;
}

#digital-marketing-popup h2, #digital-marketing-popup h3 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

#digital-marketing-popup p, #digital-marketing-popup ul {
  font-size: 1rem;
  line-height: 1.6;
}

#digital-marketing-popup ul {
  padding-left: 20px;
}

#digital-marketing-popup ul li {
  margin-bottom: 0.5rem;
}

#digital-marketing-popup .close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

.hidden { display: none; }