/* ==== Hero Component Styles ==== */
#hero {
  padding: 1rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-glow-bg {
  content: '';
  position: absolute;
  bottom: -20%;                  
  left: 50%;                    
  transform: translateX(-50%);  
  width: 300px;
  height: 300px;                
  background: radial-gradient(
    circle,
    #00bfffb9,
    transparent 70%
  );
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;         
}

.hero-content {
  position: relative;
  z-index: 2;
}

#hero div {
  padding-bottom: 35px
}

.main-title {
  font-size: 2rem;
  padding-bottom: 2rem;
  padding-top:3.5rem;
  line-height: 110%;
}


.hero-buttons-sec a {
  width: 8.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  border-radius: 5px;
}

#hero p {
  opacity: 0.9;
}

/* Hero list sec */
.hero-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 1rem; /* vertical and horizontal spacing between items */
  list-style: none;
  padding: 0;
  margin: 0;

}

.hero-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.9;
}

.hero-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-weight: bold;
  color: rgb(19, 170, 190);
}

.pulse-glow {
  color: #00bfff;
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.158);
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.hero-buttons-sec {
  display: flex;
  justify-content: space-between;
  max-width: 295px;
}

/* 1. Starfield container */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 2. Stars using box-shadow trick */
.stars::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    50vw 10vh white,
    20vw 30vh white,
    70vw 20vh white,
    40vw 60vh white,
    80vw 80vh white,
    25vw 75vh white,
    10vw 50vh white,
    60vw 40vh white,
    90vw 90vh white,
    15vw 15vh white;
  opacity: 1;
  animation: twinkle 8s infinite ease-in-out alternate;
  filter: brightness(1.2);
}

.stars2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    12vw 12vh white, 32vw 22vh white, 52vw 32vh white,
    72vw 42vh white, 22vw 52vh white, 42vw 62vh white,
    62vw 72vh white, 82vw 82vh white, 92vw 92vh white;
  opacity: 1;
  animation: twinkle 5s infinite ease-in-out alternate;
  filter: brightness(1.2);
}

/* 3. Twinkle animation */
.twinkle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    5vw 10vh white, 15vw 20vh white, 25vw 30vh white,
    35vw 40vh white, 45vw 50vh white, 55vw 60vh white,
    65vw 70vh white, 75vw 80vh white, 85vw 90vh white,
    95vw 15vh white, 10vw 25vh white, 20vw 35vh white,
    30vw 45vh white, 40vw 55vh white, 50vw 65vh white,
    60vw 75vh white, 70vw 85vh white, 80vw 95vh white,
    90vw 20vh white, 100vw 30vh white, 15vw 45vh white,
    25vw 55vh white, 35vw 65vh white, 45vw 75vh white,
    55vw 85vh white, 65vw 95vh white, 75vw 25vh white,
    85vw 35vh white, 95vw 45vh white;
  animation: twinkle 2s infinite ease-in-out alternate;
  opacity: 0.9;
  filter: brightness(1.2);
}

@keyframes twinkle {
  0% { opacity: 0.1; }
  100% { opacity: 0.9; }
}

/* 4. Optional shooting star (single element) */
.shooting-star::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 40%;
  width: 2px;
  height: 80px;
  background: linear-gradient(45deg, white, transparent);
  opacity: 0;
  transform: rotate(-45deg);
  animation: shoot 10s ease-in-out infinite;
}

@keyframes shoot {
  0% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  15% {
    transform: translate(300px, 300px) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: translate(300px, 300px) rotate(-45deg);
    opacity: 0;
  }
}

@media screen and (max-width: 425px) {
  #hero {
    height: 85vh;
  }
}

@media screen and (min-width: 768px) {
  .hero-content {
    width: 500px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1024px) {
  .hero-glow-bg {
    bottom: -50%;
    width: 800px;
    height: 500px;
    filter: blur(100px)
  }
  
  .hero-buttons-sec {
    max-width: 310px;
  }

  .main-title {
    font-size: 3rem;
    padding-top: 10rem;
    font-weight: 800;
  }

  .hero-content {
    width: 700px;
  }

  .hero-list {
    grid-template-columns: repeat(3,
    1fr);
  }
}

/* ==== Hero Component End ==== */

/* ==== You'll Never Section Styles Start ==== */
#never-worry {
  padding: var(--space-xs);
  background-color: var(--bg-colour-1);
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
}

.never-worry-title-sec > h2 {
  padding-bottom: var(--space-md);
  text-align: center;
}

.never-worry-heading {
  margin-top: 1rem;
  font-size: 1.8rem;
}

.never-worry-title-sec p {
  padding-bottom: var(--space-smmd);
  text-align: center;
  color: var(--text-colour-1);
  opacity: 0.9;
}

.never-worry-title-sec {
  padding-bottom: var(--space-md);
}

.never-worry-features-sec {
  margin: 0 auto;
  background: var(--bg-colour-1);
  color: #222;
  font-family: 'Inter', sans-serif;
}

/* Feature Card */
.never-worry-feature-card {
  background: var(--bg-colour-2);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 5px;
}

/* Icon Circle */
.icon-circle {
  width: 48px;
  height: 48px;
  background: #00c3ff27;
  color: var(--main-brand-blue);
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Heading */
.never-worry-feature-card h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Text */
.never-worry-feature-card p {
  color: var(--text-colour-1);
  opacity: 0.9;
  font-size: 0.9rem;
}

/* CTA Section */
.cta {
  text-align: center;
  margin-top: 2rem;
}

.cta-text {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  margin-top: 3rem;
}

@media screen and (min-width: 768px) {
  .never-worry-title-sec {
    width: 700px;
    margin: 0 auto;
  }

  .never-worry-features-sec {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .never-worry-feature-card {
    max-width: 340px;
  }

  .cta {
    margin: 0 auto;
  }
}

@media screen and (min-width: 1024px) {
  .never-worry-title-sec {
    width: 750px;
  }

  .never-worry-features-sec {
    max-width: 1000px;
  }

  .never-worry-feature-card {
    width: 230px;
  }
}

/* ==== You'll Never Section Styles End ==== */

/* ============ Section: Why Choose SemDev ============ */
.choose-sec {
  padding: var(--space-xs);
  padding-top: var(--space-md);
  margin: 0 auto;
  background: var(--bg-colour-2);
  font-family: 'Inter', sans-serif;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: var(--space-lg);
}

/* Glow element on the left side */
.choose-sec::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100px;
  transform: translateY(-50%);
  width: 100px;
  height: 1500px;
  background: radial-gradient(circle, rgba(0, 179, 255, 0.527) 0%, rgba(0, 180, 255, 0) 70%);
  filter: blur(80px);
  z-index: -1;           /* Push the glow behind all content */
  pointer-events: none;  /* Ensure it doesn’t interfere with clicks */
}

.choose-heading {
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
  text-align: center;
  margin-top: 1rem;
}

.choose-sec-feature-card {
  background: var(--bg-colour-1);
  padding: 0.8rem;
  margin-bottom: 2rem;
  border-radius: 5px;
  z-index: 1;
  position: relative;
}

.choose-sec-icon-circle {
  border-radius: 50%;
  font-size: 1.5rem;
  align-items: center;
  justify-content: center;
  color: var(--main-brand-blue);
}

.choose-sec-feature-card h3 {
  font-weight: 500;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.choose-sec-feature-card p {
  opacity: 0.9;
  font-size: 0.9rem;
}

@media screen and (min-width: 768px) {
  .choose-sec-inner {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: var(--space-md);
  }

  .choose-sec-feature-card {
    max-width: 350px;
  }
}

@media screen and (min-width: 1024px) {
  .choose-sec-inner {
    max-width: 950px;
    justify-content: space-evenly;
  }
  
  .choose-sec-feature-card {
    max-width: 400px;
  }
}

/* ============ Section: Why Choose SemDev End ============ */

/* ========== Section: Impact ========== */
.impact-sec {
  padding: var(--space-xs);
  margin: 0 auto;
  background: var(--bg-colour-2);
  position: relative;
  overflow: hidden;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
}

/* Glow element */
.impact-sec::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 100px;
  height: 1500px;
  background: radial-gradient(circle, rgba(0, 179, 255, 0.384) 0%, rgba(0, 180, 255, 0) 70%);
  filter: blur(80px);
  pointer-events: none;  /* Ensure it doesn’t interfere with clicks */
}

/* Headings and Subtext */
.impact-heading {
  font-size: 1.8rem;
  text-align: center;
  padding: 1rem 0 var(--space-md) 0;
}

.impact-subtext {
  text-align: center;
  padding-bottom: var(--space-smmd);
  opacity: 0.9;
}

/* Card */
.impact-card {
  background: var(--bg-colour-1);
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

/* Icon */
.impact-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  background: #00c3ff27;
  color: var(--main-brand-blue);
}

.impact-card-text-sec {
  display: flex;
  margin-bottom: var(--space-smmd);
  align-items: center;
}

.impact-sec-title-sec {
  padding-bottom: var(--space-md);
}

/* Title */
.impact-card-title {
  font-weight: 500;
}

/* Description */
.impact-card-text {
  font-size: 1rem;
  margin-bottom: var(--space-smmd);
  opacity: 0.9;
}

/* Stat Blocks */
.impact-stat-block {
  position: relative;
  border-radius: 5px;
  padding: 0.75rem 1rem;
  padding: 0.75rem 1rem 0.75rem 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  background-color: var(--bg-colour-2);
}

/* Shared bar style */
.impact-stat-block::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  width: 4px;
  border-radius: 5px;
}

.impact-stat-number {
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.icon-red {
  fill: #ff4d4d;
}

.icon-orange {
  fill: #ff9900;
}

.impact-stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.impact-stat-desc {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Color Variants */
.impact-stat-blue {
  color: #00c3ff;
}

.impact-stat-red {
  color: #ff4d4d;
}

.impact-stat-orange {
  color: #ff9900;
}

/* Bar colors based on modifier classes */
.impact-stat-blue::before {
  background-color: #00c3ff;
}

.impact-stat-red::before {
  background-color: #ff4d4d;
}

.impact-stat-orange::before {
  background-color: #ff9900;
}

/* CTA Box */
.impact-cta-box {
  border: 1px solid var(--main-brand-blue);
  border-radius: 5px;
  padding: 1.5rem;
  background: var(--bg-colour-2);
  box-shadow: 0 0 6px 2px #00c3ff7c;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.impact-cta-text {
  text-align: center;
}

@media screen and (min-width: 768px) {
.impact-sec-inner {
    width: 700px;
    margin: 0 auto;
  }

  .impact-cards-sec {
    width: 600px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1024px) {
  .impact-sec-inner {
    width: 950px;
  }

  .impact-cards-sec {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .impact-card {
    width: 450px;
  }

  .impact-cta-box {
    width: 550px;
    margin: 0 auto;
  }

  .impact-stat-number {
    font-size: 1.1rem;
  }
}

/* ====== Pricing Section Styles ====== */
.pricing-sec {
  padding: 0.8rem;
  margin: 0 auto;
  color: white;
  background: var(--bg-colour-2);
  overflow: hidden;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
}

/* Headline */
.pricing-heading {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
  margin-top: 1rem;
}

.pricing-accent {
  color: #00bfff;
}

/* ====== Cards ====== */
.pricing-card {
  background: var(--bg-colour-1);
  border-radius: 5px;
  padding: 1.3rem;
  margin-bottom: 4rem;
  position: relative;
}

.pricing-featured {
  border: 1px solid #00bfff;
  box-shadow: 0 0 8px 2px #00bfff55;
}

.pricing-label {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #00bfff;
  color: black;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2rem 0.3rem;
  border-radius: 5px;
  border: 1px solid #00bfff;
  box-shadow: 0 0 6px 2px #00c3ff65;
  font-family: 'Poppins', sans-serif;
}

.pricing-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-colour-1);
}

.pricing-subtitle {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  color: #aaa;
}

.pricing-amount {
  font-size: 2.1rem;
  font-weight: 600;
  margin-top: 1.3rem;
  margin-bottom: 1.3rem;
  color: var(--text-colour-1);
  color: white;
}

.pricing-cycle {
  font-size: 1rem;
  font-weight: 400;
}

.pricing-note {
  font-size: 0.9rem;
  color: var(--text-colour-2);
  margin-bottom: 0.9rem;
}

/* ====== Features List ====== */
.pricing-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.pricing-list li {
  position: relative;
  padding-right: 1.1rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}

.pricing-list li::after {
  content: '✓';
  position: absolute;
  right: 0;
  top: 0;
  color: #00bfff;
  font-weight: bold;
}

.not-included {
  color: var(--text-colour-2);
}

.pricing-list .not-included::after {
  content: '✖';
  position: absolute;
  right: 0;
  top: 0;
  color: #747474;
  font-weight: bold;
}

.pricing-cta-button {
  display: inline-block;
  background: #00bfff;
  color: black;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 0 6px 2px #00c3ff65;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.3s;
  width: 100%;
  transition: all 0.3s;
  font-family: 'Poppins', sans-serif;
}

.pricing-cta-button:hover {
  box-shadow:
    0 0 8px var(--main-brand-blue),
    0 0 12px var(--main-brand-blue),
    0 0 16px var(--main-brand-blue);
}

/* ====== Guarantee Box ====== */
.pricing-guarantee {
  border-radius: 5px;
  padding: 1rem;
  font-size: 0.9rem;
  margin-top: var(--space-md);
  border: 1px solid var(--main-brand-blue);
  box-shadow: 0 0 6px 2px #00c3ff7c;
}

.pricing-guarantee h3 {
  font-weight: 500;
  padding-bottom: var(--space-sm);
  padding-left: 0.8rem;
}

.pricing-guarantee p {
  opacity: 0.9;
}

.guarantee-icon {
  font-size: 1.25rem;
  color: #00bfff;
  font-size: 1.1rem;
}

.pricing-guaran-row {
  display: flex;
}

@media screen and (min-width: 768px) {
  .pricing-sec-inner {
    margin: 0 auto;
  }

  .pricing-cards-con {
    display: flex;
    justify-content: space-evenly;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card {
    width: 350px;
    display: flex;
    flex-direction: column;
  }

  .pricing-cta-button {
    margin-top: auto;
  }

  .pricing-guarantee {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-heading {
    margin-bottom: 4rem;
    margin-top: 3rem;
  }
}

/* ========== Recent Projects Section ========== */
.projects-sec {
  padding: 0.8rem;
  margin: 0 auto;
  background: var(--bg-colour-1);
  padding-bottom: var(--space-lg);
  padding-top: var(--space-md);
}

/* Headline */
.projects-heading {
  font-size: 1.8rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: var(--space-md);
}

.projects-accent {
  font-weight: 700;
}

/* Subtext */
.projects-subtext {
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Project Card */
.project-card {
  background: var(--bg-colour-2);
  border-radius: 5px;
  margin-bottom: 2.5rem;
}

.projects-info {
  padding: 1rem;
}

.project-img {
  width: 100%;
  border-radius: 5px 5px 0 0;
}

.project-title {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  margin-bottom: 0.5rem;
}

.project-desc {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.project-link {
  font-weight: 500;
  color: var(--main-brand-blue);
  text-decoration: none;
  display: inline-block;
  text-shadow:
    0 0 12px #00bfff9d;
}

/* CTA Button */
.projects-cta {
  text-align: center;
  margin-top: 2rem;
}

.projects-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  background: transparent;
  box-shadow: 0 0 6px 2px #00c3ff65;
}

@media screen and (min-width: 768px) {
  .project-card {
    width: 230px;
  }

  .projects-cards-con {
    display: flex;
    justify-content: space-around;
  }
}

@media screen and (min-width: 1024px) {
  .projects-cards-con {
    width: 900px;
    margin: 0 auto;
  }

  .project-card {
    width: 290px;
  }
}

/* ========== Testimonials Section ========== */
.testimonials-sec {
  padding: 0.8rem;
  margin: 0 auto;
  background: var(--bg-colour-2);
  padding-bottom: var(--space-lg);
  padding-top: var(--space-md);
}

/* Heading */
.testimonials-heading {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: var(--space-md);
  margin-top: 1rem;
}

.testimonials-accent {
  font-weight: 700;
}

/* Card */
.testimonial-card {
  background: var(--bg-colour-1);
  border: 1px solid #8ae4ffb7;
  border-radius: 5px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 0 6px 2px #00c3ff65;
}

/* Quotation mark */
.testimonial-quote {
  font-size: 2rem;
  font-weight: bold;
  color: var(--main-brand-blue);
}

/* Quote text */
.testimonial-text {
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

/* Author section */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}

.testimonial-company {
  font-size: 0.85rem;
  color: var(--text-colour-2);
  margin: 0;
}

@media screen and (min-width: 768px) {
  .testimonial-cards-sec {
    display: flex;
    justify-content: space-between;
  }

  .testimonial-card {
    width: 235px;
  }
}

@media screen and (min-width: 1024px) {
  .testimonial-cards-sec {
    width: 900px;
    margin: 0 auto;
  }

  .testimonial-card {
    width: 290px;
  }
}

/* ===== FAQ Section ===== */
.faq-sec {
  margin: 0 auto;
  padding: 0.8rem;
  font-family: 'Inter', sans-serif;
  color: white;
  background: var(--bg-colour-1);
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-bottom: var(--space-lg);
  padding-top: var(--space-md);
}

/* Heading */
.faq-heading {
  font-size: 1.8rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: var(--space-md);
}

.faq-subtext {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* FAQ List */
.faq-item {
  border-radius: 5px;
  margin-bottom: 1rem;
  background: var(--bg-colour-2);
  border: 1px solid #00c3ff46;
  overflow: hidden;
  transition: border 0.3s;
}

/* Toggle Button */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  color: var(--text-colour-1);
  font-weight: 500;
  cursor: pointer;
}

.faq-question-text {
  font-weight: 600;
  font-size: 1rem;
}

.faq-toggle-icon {
  font-size: 1rem;
  transition: transform 0.3s;
  color: var(--main-brand-blue);
  padding-left: 4px;
}

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

/* Answer box */
.faq-answer {
  height: 0;
  padding: 0 1rem;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.3s, padding 0.3s;
}
.faq-item.open .faq-answer {
  height: auto;
  opacity: 0.9;
  padding: 0 1rem 1rem 1rem;
}

.faq-list {
  position: relative;
  z-index: 3;
  list-style: none;
}

/* CTA Box */
.faq-cta-box {
  border: 1px solid #1a1a1a;
  border-radius: 5px;
  padding: 1.5rem;
  margin-top: 3rem;
  background: #111;
  text-align: center;
}

.faq-cta-heading {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.faq-cta-text {
  color: #ccc;
  margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .faq-list {
    width: 500px;
    margin: 0 auto;
  }

  .faq-cta-box {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1024px) {
  .faq-cta-box {
    width: 350px;
    height: 200px;
    margin-top: 0;
  }

  .faq-con-inner {
    display: flex;
    justify-content: space-evenly;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
  }

  .faq-list {
    width: 600px;
    order: 2;
  }
}

/* ===== Contact Banner Section ===== */
#contact-banner {
  background-color: var(--bg-colour-2);
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-lg);
}

/* Glow element */
#contact-banner::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 500px;
  background: radial-gradient(
    circle, rgba(0, 179, 255, 0.2) 0%,
    rgba(0, 180, 255, 0) 70%);
  filter: blur(80px);
  pointer-events: none;  /* Ensure it doesn’t interfere with clicks */
  z-index: -1;
}

.contact-banner-con {
  padding-top: 3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 600px;
  padding-bottom: 3rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.contact-banner-con h2 {
  text-align: center;
  font-size: 1.8rem;
}

.contact-banner-btn-con {
  margin: 1rem 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 2rem;
}

.contact-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .contact-banner-con {
    max-width: 80%;
  }

  .contact-banner-btn-con {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    justify-content: space-evenly;
  }

  .contact-btn {
    width: 250px;
  }
}

/* ===== Footer Section ===== */
.site-footer {
  background: var(--bg-colour-1);
  color: var(--text-colour-1);
  padding: 2.5rem 1rem;
  border-top: 1px solid #1a1a1a;
  border-radius: 0 0 10px 10px;
  max-width: 800px;
  margin: 0 auto;
}

.footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.brand-accent {
  color: var(--main-brand-blue);
}

.footer-description {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 2rem;
}

/* Columns */
.footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

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

.footer-links ul,
.footer-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li,
.footer-contact li {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: #ddd;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--main-brand-blue);
}

.footer-contact i {
  color: var(--main-brand-blue);
  margin-right: 0.5rem;
  width: 16px;
}

/* Bottom Row */
.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-size: 0.75rem;
  color: #aaa;
}

.footer-socials a {
  margin-left: 1rem;
  font-size: 1rem;
  color: #aaa;
  transition: color 0.3s ease;
}

.footer-socials a:first-child {
  margin-left: 0;
}

.footer-socials a:hover {
  color: var(--main-brand-blue);
}

/* ===== Animations ===== */
@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 2px rgba(0, 191, 255, 0.7),
                 0 0 16px rgba(0, 191, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 16px rgba(0, 191, 255, 0.9),
                 0 0 32px rgba(0, 191, 255, 0.6);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Initial state (hidden and slightly below) */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Final state when in view */
.fade-in-up.visible {
  animation: fadeInUp 0.7s ease-out forwards;
}