/* RESET DEFAULT MARGIN/PADDING */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.feature-text {
  text-align: left !important;
}
.navbar-divider {
  height: 2px;
  background: rgba(248, 250, 252, 0.1);
  margin: 0;
}
.newadded a {
  color: white !important;
  text-decoration: none;
}
body {
  overflow-x: hidden;
  width: 100% !important;
}
@media (min-width: 400px) {
  .navbar::after {
    width: 200px !important;
  }
}
/* GLOBAL */
.full-content {
  background: url("blue-designed-grunge-concrete-texture-vintage-background-with-space-text-image.png"),
    url("lovely-blue-paint-water.jpg"), #0e1525;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: overlay;
  backdrop-filter: blur(10px);
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
  color: #f8fafc;
  padding-top: 80px;
}

/* NAVBAR */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: url("blue-designed-grunge-concrete-texture-vintage-background-with-space-text-image.png"),
    url("lovely-blue-paint-water.jpg"), #0e1525;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: overlay;
}
.navbar::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 100vh;
  right: 0;
  top: -100px;
  z-index: -10;
  background: radial-gradient(
    ellipse at top right,
    rgba(32, 88, 232, 0.5) 0%,
    rgba(32, 88, 232, 0.2) 50%,
    transparent 80%
  );
  filter: blur(120px);
  display: none;
}
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* LOGO */
.navbar-logo img {
  width: 107px;
  height: 55px;
  object-fit: contain;
  border-radius: 16px; /* adjust as you like */
}
.footer-logo img {
  width: 107px;
  height: 55px;
  object-fit: contain;
  border-radius: 16px; /* adjust as you like */
}
/* MENU – DESKTOP */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 15px;
}
.navbar-menu a {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #f8fafc;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.navbar-menu a:hover,
.navbar-menu a.active {
  opacity: 1;
  font-weight: 600;
}

/* CTA – DESKTOP */
.navbar-cta .cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 20px;
  border: 1.5px solid #f8fafc;
  border-radius: 47px;
  font-weight: 500;
  font-size: 16px;
  color: #f8fafc;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.navbar-cta .cta-btn:hover {
  background: #f8fafc;
  color: #0e1525;
}

/* DIVIDER */
.navbar-divider {
  height: 2px;
  background: rgba(248, 250, 252, 0.1);
  margin: 0;
}

/* TOGGLE */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 1100;
}
.navbar-toggle span {
  width: 100%;
  height: 3px;
  background: #f8fafc;
  margin: 3px 0;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.navbar-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggle.active span:nth-child(2) {
  opacity: 0;
}
.navbar-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* MOBILE */
@media (max-width: 768px) {
  .navbar-toggle {
    display: flex;
  }
  .navbar-cta {
    display: none;
  }

  .navbar-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100vh;
    background: rgba(14, 21, 37, 0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    gap: 1.5rem;
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }
  .navbar-menu.active {
    left: 0;
  }

  .navbar-menu a {
    width: 100%;
    font-size: 1.1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(248, 250, 252, 0.1);
  }
  .navbar-menu a:hover,
  .navbar-menu a.active {
    opacity: 1;
    font-weight: 600;
    padding-left: 0.5rem;
  }

  .mobile-cta {
    display: block;
    width: 100%;
    margin-top: 1rem;
  }

  .mobile-cta .cta-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
}
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.menu-overlay.active {
  display: block;
}

.mobile-cta {
  display: none;
} /* ===== Heading Section ===== */
.heading-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 19px;
  width: 891px;
  height: auto;
  margin: 20px auto 0 auto;
  text-align: center;
  margin-top: 6vh !important;
}

.heading-section h1,
.heading-section h2,
.heading-section h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 6rem;
  line-height: 88px;
  text-transform: capitalize;
  color: #f8fafc;
  margin: 0;
}

.heading-section .highlight {
  color: #007bff;
  font-weight: 800;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 3px;
}

.heading-section h1 .highlight {
  margin-left: 10px;
}
.heading-section h2 .highlight,
.heading-section h3 .highlight {
  margin-left: 5px;
}

.sub-heading {
  width: 873.92px;
  max-width: 90%;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 43px;
  text-align: center;
  color: #f8fafc;
  margin-top: 20px;
}

.sub-heading .highlight-text {
  font-weight: 500;
}

/* Heading Responsive */
@media (max-width: 992px) {
  .heading-section {
    width: 90%;
    gap: 15px;
  }
  .heading-section h1,
  .heading-section h2,
  .heading-section h3 {
    font-size: 50px;
    line-height: 64px;
  }
  .sub-heading {
    font-size: 22px;
    line-height: 36px;
  }
}
@media (min-width: 576px) {
  .new-l {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .heading-section h1,
  .heading-section h2,
  .heading-section h3 {
    font-size: 32px;
    line-height: 40px;
  }
  .new-r {
    display: none !important;
  }
  .pippa-quote-text {
    height: 20vh !important;
  }
  .pippa-testimonial-card,
  .pippa-testimonial-card-2 {
    min-height: auto !important;
  }
  .sub-heading {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 400px) {
  .pippa-quote-text {
    height: 25vh !important;
  }
}

/* ===== Video Section ===== */
.video-section {
  width: 974px;
  max-width: 100%;
  height: 596.44px;
  margin: 50px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-section video {
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 60px 20px rgba(21, 93, 252, 0.6);
}

/* Demo Buttons */
.demo-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 80px;
  flex-wrap: wrap;
}

.demo-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  padding: 0 40px;
  border-radius: 38px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.demo-btn.book-demo {
  width: 340px;
  background: linear-gradient(130.4deg, #155dfc 50.71%, #2334c3 87.46%),
    linear-gradient(360deg, #0c37d0 0%, #395ee0 100%);
  color: #fff;
  border: none;
}

.demo-btn.book-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.demo-btn.watch-demo {
  width: 300px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.demo-btn.watch-demo:hover {
  background: #fff;
  color: #060505;
}

/* Video & Buttons Responsive */
@media (max-width: 992px) {
  .video-section {
    height: 450px;
  }
  .demo-btn.book-demo {
    width: 300px;
    height: 80px;
    font-size: 16px;
  }
  .demo-btn.watch-demo {
    width: 270px;
    height: 80px;
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .video-section {
    height: 300px;
  }
  .demo-btn.book-demo,
  .demo-btn.watch-demo {
    width: 90%;
    height: 70px;
    font-size: 14px;
    padding: 0 20px;
  }
  .demo-buttons {
    flex-direction: column;
    gap: 15px;
    margin-top: 40px;
    padding-bottom: 20px;
    align-items: center;
  }
}

/* ===== SVG Frame Section ===== */
.svg-frame-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 20px;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  background: url("blue-designed-grunge-concrete-texture-vintage-background-with-space-text-image.png"),
    #0e1525;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border-radius: 50px;
  width: 100%;
  overflow-x: hidden;
}

.svg-frame {
  flex: none;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .svg-frame-section {
    /* flex-direction: column; */
    gap: 15px;
    padding: 30px 15px;
  }
  .svg-frame svg {
    width: 100%;
    height: auto;
  }
  .svg-frame {
    margin-top: 15px;
  }
}

/* ===== Reception Section ===== */
.reception-section {
  background-color: #ffffff;
  padding: 60px clamp(20px, 5vw, 90px);
  color: #000000;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.reception-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.reception-right svg {
  max-width: 120%;
  height: auto;
  display: block;
  object-fit: contain;
}

.reception-left h2 {
  width: 701px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 55px;
  line-height: 80px;
  text-transform: capitalize;
  color: #0e1525;
}

.blue-text {
  color: #007bff;
}

.reception-left p {
  width: 678px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 20.9524px;
  line-height: 35px;
  color: #0e1525;
}

.reception-left p strong {
  font-weight: 700;
}
/* ===== LOADER – FIXED & VISIBLE ===== */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, #0b1e3a 0%, #061224 100%);
  display: none !important;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important; /* Sabse upar */
  transition: opacity 0.3s ease;
  pointer-events: none; /* Click block na kare */
}

#loader.active {
  display: flex !important;
}

/* WHITE SPINNER – STRONG & VISIBLE */
.small-spinner {
  width: 60px !important;
  height: 60px !important;
  border: 7px solid rgba(202, 6, 6, 0.3) !important;
  border-top: 7px solid #ffffff !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) !important;
  z-index: 999999 !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.primary-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 21px 60px;
  gap: 15px;
  margin-top: 5%;
  /* min-width: 480px;
  height: 90px; */
  background: linear-gradient(130.4deg, #155dfc 50.71%, #2334c3 87.46%),
    linear-gradient(360deg, #0c37d0 0%, #395ee0 100%);
  border-radius: 38.95px;
  border: none;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.primary-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

.reception-right img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.register-right {
  display: flex;
  justify-content: flex-end; /* image ko right align karega */
  overflow: visible;
  width: 100%;
}

.form-img {
  max-width: 90%; /* optional, image thodi choti ho jaaye right side me fit karne ke liye */
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 15px 4px rgba(21, 93, 252, 0.45);
  border-radius: 12px;
  display: block;
}
/* Reception Responsive */
@media (max-width: 1200px) {
  .reception-left h2 {
    font-size: 45px;
    line-height: 65px;
    width: 100%;
  }
  .reception-left p {
    font-size: 18px;
    line-height: 30px;
    width: 100%;
  }
  .primary-btn {
    min-width: 400px;
    padding: 18px 50px;
    font-size: 1.15rem;
  }
  .reception-container {
    gap: 40px;
  }
}

@media (max-width: 992px) {
  .reception-container {
    flex-direction: column;
    text-align: center;
  }
  .primary-btn {
    min-width: 300px;
    padding: 16px 40px;
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .reception-section {
    padding: 40px 20px;
  }
  .reception-left h2 {
    font-size: 32px;
    line-height: 45px;
  }
  .reception-left p {
    font-size: 16px;
    line-height: 28px;
  }
  .primary-btn {
    min-width: 250px;
    height: 70px;
    padding: 14px 30px;
    font-size: 1rem;
    margin-top: 30px;
  }
  .new-left {
    display: flex;
    justify-content: center;
  }
}

/* ===== Cancel Anytime Section ===== */
.cancel-anytime-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 98vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.cancel-anytime-section svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .cancel-anytime-section {
    padding: 0 5px;
  }
}

@media (max-width: 480px) {
  .cancel-anytime-section {
    padding: 0 2px;
  }
}

/* ===== White Section ===== */
.white-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 90px;
  width: 100%;
  background-color: #0e1525;
  color: #000000;
  box-sizing: border-box;
}

.white-section-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.white-section-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 700px;
}

.white-section-content svg {
  display: block;
  margin-bottom: 5px;
}

.white-section-content h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 55px;
  line-height: 70px;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.white-section-content p {
  font-size: 18px;
  line-height: 1.45;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: white;
  margin: 0 0 10px 0;
}

.white-section-image {
  flex: 1;
  text-align: center;
}

.white-section-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  border: none;
  outline: none;
  filter: none !important;
}

.gradient-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 60px;
  background: linear-gradient(130.4deg, #155dfc 50.71%, #2334c3 87.46%),
    linear-gradient(360deg, #0c37d0 0%, #395ee0 100%);
  border: none;
  border-radius: 38.9px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
}

.gradient-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

.highl {
  color: #2058e8;
}

/* White Section Responsive */
/* White Section Responsive Improvements */
@media (max-width: 1024px) {
  .white-section-inner {
    flex-direction: column; /* Column layout for mobile */
    text-align: center;
    gap: 40px;
    align-items: center; /* Center both image & text */
  }

  .white-section-content {
    width: 100%;
    align-items: center; /* Center text */
    order: 1; /* Text appears first */
  }

  .white-section-image {
    width: 100%;
    order: 2; /* Image appears after text */
    display: flex;
    justify-content: center; /* Center image horizontally */
    text-align: center;
  }

  .white-section-image img,
  .white-section-image svg {
    margin: 0 auto; /* Extra safety for centering */
  }

  .white-section-content h2 {
    font-size: 42px;
    line-height: 55px;
  }

  .white-section-content p {
    font-size: 16px;
  }

  .gradient-btn {
    padding: 15px 40px;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .white-section-inner {
    gap: 30px;
  }

  .white-section-content h2 {
    font-size: 32px;
    line-height: 42px;
  }

  .white-section-content p {
    font-size: 15px;
  }

  .gradient-btn {
    padding: 12px 30px;
    font-size: 16px;
  }

  .white-section-image svg,
  .white-section-image img {
    width: 90%;
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .white-section {
    padding: 30px 15px;
  }

  .white-section-content h2 {
    font-size: 26px;
    line-height: 34px;
  }

  .white-section-content p {
    font-size: 14px;
  }

  .gradient-btn {
    padding: 10px 25px;
    font-size: 15px;
  }

  .white-section-image svg,
  .white-section-image img {
    width: 100%;
    max-width: 300px;
  }
}

/* ==================================== */
/* 1. POWERFUL SOLUTION (BACKGROUND WHITE) */
/* ==================================== */
.powerful-solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 60px;
  gap: 30px;
  width: 100%;
  min-height: 100vh;
  /* --- BACKGROUND WHITE --- */
  background: #ffffff; /* मुख्य बैकग्राउंड सफ़ेद किया गया */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* --- TEXT COLOR BLACK --- */
  color: #000000; /* टेक्स्ट कलर काला किया गया */
  text-align: center;
  box-sizing: border-box;
  /* position: relative;  */
  overflow: hidden;
}
/* ========================= */
/* 📱 RESPONSIVE DESIGN */
/* ========================= */

/* --- Tablet & Small Laptops (900px ↓) --- */
@media (max-width: 900px) {
  /* Top spacing refined */
  #Pricing .powerful-inner > div {
    margin-top: 40px !important; /* Thora soft spacing */
  }

  /* Comparison section stacked & centered */
  .comparison-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important; /* Zyada clean spacing */
    padding: 0 15px; /* Better side spacing */
  }

  /* Tabs full-width with better visuals */
  .comparison-tab {
    width: 95% !important;
    text-align: center !important;
    padding: 14px 18px !important;
    border-radius: 12px !important; /* Attractive smooth rounded look */
  }

  /* Heading more balanced */
  #Pricing h2 {
    font-size: 26px !important;
    line-height: 34px !important;
    padding: 0 10px;
    text-align: center !important;
  }
}

/* --- Mobile (600px ↓) --- */
@media (max-width: 600px) {
  /* Tabs 100% clean stretch */
  .comparison-tab {
    width: 100% !important;
    padding: 16px !important;
  }

  /* Smaller screen heading */
  #Pricing h2 {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  /* Better vertical spacing on mobile */
  .comparison-section {
    gap: 22px !important;
  }
}

/* ::after element को भी हल्के रंग में बदला गया */
.powerful-solution::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 140vh;
  right: 0;
  top: -80px;
  /* Gradient को सफ़ेद/हल्के रंग में बदला गया */
  background: radial-gradient(
    ellipse at top right,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.25) 45%,
    transparent 80%
  );
  filter: blur(110px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* Powerful Inner elements को नए टेक्स्ट कलर के साथ एडजस्ट किया गया */
.powerful-heading {
  /* ... अन्य प्रॉपर्टीज ... */
  color: #24292e; /* हेडिंग का कलर गहरा काला किया गया */
}

/* हाईलाइट कलर वही नीला रहेगा */
.powerful-heading .highlight {
  color: #2058e8;
}

.powerful-text {
  /* ... अन्य प्रॉपर्टीज ... */
  color: #555555; /* पैराग्राफ टेक्स्ट का कलर गहरा ग्रे किया गया */
}

.powerful-text strong {
  color: #000000;
  font-weight: 600;
}

/* =========================== */
/* 2. CARD (BLUE BACKGROUND) */
/* =========================== */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 50px 30px;
  gap: 10px;
  width: 22vw;
  height: 740px;
  /* --- CARD BACKGROUND BLUE --- */
  /* रेडियल ग्रेडिएंट को ब्लू बैकग्राउंड से बदला गया */
  background: #2058e8; /* गहरा नीला रंग */

  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; /* कार्ड के अंदर टेक्स्ट सफ़ेद */
  text-align: left;
  box-sizing: border-box;
}

/* कार्ड के अंदर के टेक्स्ट को सफ़ेद ही रखा गया है */
.card-content h1,
.card-content h2,
.card-text h1 {
  color: #ffffff;
}

.card-content p,
.card-points,
.card-text p {
  color: #f0f0f0; /* हल्का सफ़ेद */
}

/* कार्ड बटन को भी एडजस्ट किया गया */
.card-btn {
  /* ... अन्य प्रॉपर्टीज ... */
  background: rgba(255, 255, 255, 0.1); /* सफ़ेद ब्लू पर थोड़ा पारदर्शी सफ़ेद */
}

.card-btn:hover {
  background: #f5f5f5;
  color: #2058e8; /* नीला टेक्स्ट जब बटन पर hover किया जाए */
  transform: translateY(-2px);
}
.text-white {
  color: #ffffff; /* यह टैग के अंदर के सभी टेक्स्ट को सफ़ेद कर देगा */
}

/* अगर strong tag का रंग #highl क्लास से अलग से नियंत्रित किया गया है, तो उसे भी सफ़ेद रखने के लिए यह इस्तेमाल करें। */
.highl {
  color: #ffffff;
}
/* (बाकी Responsive Media Queries वही रहेंगी) */
.card-points {
  margin-top: 15px;
  padding-left: 20px;
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
}

.card-points li {
  margin-bottom: 8px;
}

.card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
}

.card-text h1 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
}

.card-text p {
  font-size: 14px;
  line-height: 20px;
  color: #ddd;
  margin: 0;
}

.shift-down {
  display: block;
  margin-top: 6px;
  margin-left: -24px;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");

.ma-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 60px;
  gap: 20px;
  margin: 30px auto 10px auto;
  /* width: 88% !important; */
  height: 60px;
  background: linear-gradient(130.4deg, #155dfc 50.71%, #2334c3 87.46%),
    linear-gradient(360deg, #0c37d0 0%, #395ee0 100%);
  border-radius: 25px;
  white-space: nowrap;

  color: var(--white, #f8fafc);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  /* font-size: 24.85px; */
  leading-trim: NONE;
  line-height: 23.34px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
}
.m-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 60px;
  gap: 20px;
  margin: 50px auto 10px auto;
  /* width: 88% !important; */
  height: 60px;
  background: linear-gradient(130.4deg, #155dfc 50.71%, #2334c3 87.46%),
    linear-gradient(360deg, #0c37d0 0%, #395ee0 100%);
  border-radius: 25px;
  white-space: nowrap;

  color: var(--white, #f8fafc);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 1rem;
  leading-trim: NONE;
  line-height: 23.34px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
}

.footer-right ul li a {
  color: #fff;
  text-decoration: none;
}

.footer-right ul li a:hover {
  color: #155dfc; /* halka sa hover effect, optional */
}

/* Cards Responsive - Mobile Only */
@media (max-width: 1200px) {
  .cards-container {
    width: 100%;
    /* overflow: hidden; */
    /* padding: 0 5vw; */
  }

  .cards-row {
    flex-direction: row;
    align-items: flex-start;
    padding: 60px 0;
    justify-content: flex-start;
    /* gap: 0; */
    transition: transform 0.5s ease-in-out;
  }

  .card {
    width: 90vw;
    height: auto;
    flex-shrink: 0;
    margin-right: 10vw;
    min-width: 90vw;
  }

  .card-content,
  .card-btn {
    width: 100%;
  }
}

.faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 80px 60px;
  gap: 30px;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  background: #0e1525;
  color: #0e1525;
  box-sizing: border-box;
  text-align: center;
}
.faq-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.faq-svg {
  width: 90px;
  height: 90px;
  display: block;
}

/* Heading */
.faq-heading {
  width: 100%;
  max-width: 701px;
  margin: 0 auto 15px auto;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 55px;
  line-height: 80px;
  text-align: center;
  text-transform: capitalize;
  color: white;
  display: block;
}

.faq-heading strong {
  color: #2058e8;
}
.powerful-tet {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: white;
  max-width: 650px;
  margin: 0 auto 10px auto;
}

.powerful-tet strong {
  color: white;
  font-weight: 800;
}
.faq-accordion-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 100px;
  /* background: #2058e81a; */
  box-sizing: border-box;
}

/* ===== Accordion Container ===== */
.faq-accordion-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 40px;
  width: 1036px;
  background: rgba(32, 88, 232, 0.08); /* slightly solid blue tint */
  border-radius: 40px;
  gap: 20px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 0 8px 1px rgba(21, 93, 252, 0.6);
}

/* Hover effect */
.faq-accordion-container:hover {
  box-shadow: 0 30px 55px rgba(0, 0, 0, 0.3), 0 10px 25px rgba(0, 0, 0, 0.22);
  transform: translateY(-6px);
}
.accordion-item {
  width: 100%;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 15px;
  background: transparent;
  box-shadow: none;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 20px 0px;
  border-radius: 20px;
  background: transparent;
}

.accordion-header h3 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.accordion-icon {
  font-size: 24px;
  font-weight: bold;
  color: #2058e8;
  transition: transform 0.3s ease;
}

.accordion-content {
  position: relative;
  max-height: 0;
  overflow: hidden;
  color: #ffffff;
  background: rgba(32, 88, 232, 0.1);
  border: 1px solid rgba(32, 88, 232, 0.5);
  border-radius: 24px;
  font-size: 16px;
  line-height: 1.6;
  padding: 0 30px;
  margin: 0;
  transition: max-height 0.4s ease, padding 0.3s ease, margin 0.3s ease,
    border 0.3s ease;
  border-width: 0;
}

.accordion-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #2058e8;
  cursor: pointer;
  display: none;
}

.accordion-item.active .accordion-close-btn {
  display: block;
}
.accordion-content-heading {
  font-size: 20px;
  font-weight: 600;
  color: #2058e8;
  margin: 15px 0 10px 0;
  text-align: left;
}

.accordion-content p {
  margin: 0 0 15px 0;
  text-align: left;
  color: white;
}
.accordion-item.active .accordion-content {
  max-height: 300px;
  padding: 15px 30px;
  margin-top: 10px;
}
.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}
@media screen and (max-width: 480px) {
  .card-content h1 {
    font-size: 0.9rem;
  }
}
/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
  .svg-container {
    max-width: 100%;
  }

  .svg-container svg {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .card-content svg.shift-down {
    width: 80%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .reception-right svg {
    width: 400px;
    height: auto;
  }
}
/* ===== Mobile FAQ Section ===== */
@media screen and (max-width: 1024px) {
  .faq-section {
    padding: 20px 40px 60px;
  }
  .faq-heading {
    font-size: 40px;
    line-height: 55px;
    max-width: 90%;
  }
  .powerful-tet {
    font-size: 16px;
    max-width: 90%;
  }
  .faq-accordion-container {
    width: 100%;
    padding: 10px 20px;
    gap: 15px;
  }
  .accordion-header h3 {
    font-size: 16px;
  }
  .accordion-icon {
    font-size: 22px;
  }
  .accordion-content-heading {
    font-size: 18px;
  }
  .accordion-content p {
    font-size: 15px;
  }
  .accordion-item.active .accordion-content {
    max-height: 250px;
    padding: 10px 20px;
  }
}

/* ===== Mobile Phones ===== */
@media screen and (max-width: 480px) {
  .faq-section {
    padding: 15px 20px 40px;
  }
  .faq-heading {
    font-size: 30px;
    line-height: 40px;
  }
  .powerful-tet {
    font-size: 14px;
    line-height: 1.4;
  }
  .faq-accordion-container {
    padding: 5px 15px;
    border-radius: 30px;
    gap: 10px;
  }
  .accordion-header {
    padding: 15px 20px;
  }
  .accordion-header h3 {
    font-size: 14px;
    text-align: justify;
  }
  .accordion-icon {
    font-size: 20px;
  }
  .accordion-content-heading {
    font-size: 16px;
  }
  .accordion-content p {
    font-size: 14px;
  }
  .accordion-item.active .accordion-content {
    max-height: 200px;
    padding: 10px 15px;
    margin-top: 8px;
  }
  .faq-svg {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .card {
    max-width: 300px;
    width: 90vw;
    padding: 1rem;
    margin: 0 auto;
  }

  .card svg {
    max-width: 460px;
  }

  h1 {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.9rem;
  }

  .card-btn,
  .ma-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    width: 70%;
  }
}
@media (max-width: 768px) {
  .primary-btn {
    padding: 12px 20px;
    font-size: 16px;
    width: 102%;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .reception-left {
    max-width: 800px;
    gap: 60px;
  }
}

.reception-left svg {
  width: 100%;
  height: auto;
  max-width: 329px;
}
.meta-svg-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

.meta-svg-section svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1800px;
  background: transparent;
  transition: all 0.3s ease;
}

/* ✅ Responsive tweaks */
@media (max-width: 1024px) {
  .meta-svg-section svg {
    width: 120%;
  }
}

@media (max-width: 768px) {
  .meta-svg-section svg {
    width: 140%;
  }
}

@media (max-width: 480px) {
  .meta-svg-section svg {
    width: 180%;
  }
}
.register-now-balanced {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  width: 100%;
  background: #ffffff;
  padding: 40px 70px;
  box-sizing: border-box;
}

.register-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 600px;
}

.register-left svg {
  border-radius: 44.884px;
  background: var(--seconday-1, rgba(59, 123, 255, 0.1));
  margin-bottom: 15px;
}

.register-title {
  color: var(--black, #0e1525);
  font-family: "Poppins", sans-serif;
  font-size: 55px;
  font-weight: 600;
  line-height: 80px;
  text-transform: capitalize;
  margin: 0;
}

.blue-text {
  color: #007bff;
}

.register-right svg {
  width: 650px;
  height: auto;
  object-fit: contain;
}
@media (min-width: 1000px) {
  .comparison-section {
    display: flex !important;
    justify-content: center !important;
  }
}
@media (max-width: 500px) {
  .register-right {
    display: none;
  }
  .comparison-section {
    width: 100% !important;
  }
  .comparison-tab {
    width: 100% !important;
  }
  .cta-buttons {
    display: none;
  }
  .navbar::after {
    width: 200px !important;
    display: none;
  }
  .svg-frame-section {
    display: none;
  }
}
/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .register-now-balanced {
    gap: 60px;
    padding: 40px 40px;
  }

  /* Clean title and blue text styling */
  .register-title {
    color: var(--black, #0e1525);
    font-family: "Poppins", sans-serif;
    font-size: 55px;
    font-weight: 600;
    line-height: 80px;
    text-transform: capitalize;
    margin: 0;
    background: none !important;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
  }

  /* Blue text – pure solid color, no background line */
  .blue-text {
    color: #2058e8; /* solid blue text */
    background: none !important;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
  }

  .register-right svg {
    width: 500px;
  }
}

@media (max-width: 900px) {
  .register-now-balanced {
    flex-direction: column;
    text-align: center;
    gap: 40px;
    padding: 70px 20px 30px; /* ⭐ اوپر زیادہ space → section نیچے آ گیا */
  }

  .register-left {
    align-items: center;
    max-width: 100%;
  }

  .register-title {
    font-size: 36px;
    line-height: 52px;
  }

  .register-right svg {
    width: 80%;
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .register-title {
    font-size: 28px;
    line-height: 42px;
  }

  .register-btn {
    width: 100%;
    height: 65px;
    font-size: 16px;
  }
} /* 2x2 boxes layout */
.register-boxes {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.register-row {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* Small Boxes */
.register-box {
  display: flex;
  padding: 20px 10px;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  border-radius: 18px;
  border: 0.876px solid var(--primary, #2058e8);
  background: var(--primary-05, rgba(32, 88, 232, 0.05));
  backdrop-filter: blur(9.813px);
  transition: all 0.3s ease;
  margin-bottom: 2%;
}

.register-box input,
.register-wide-box input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #0e1525;
  text-align: left;
  padding-left: 10px;
}

.register-box input::placeholder,
.register-wide-box input::placeholder {
  color: rgba(14, 21, 37, 0.6);
}
.register-box svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  top: 8px;
}
.register-wide-box {
  display: flex;
  padding: 20px 10px;
  align-items: center;
  justify-content: center;
  width: 99%;
  border-radius: 18px;
  border: 0.876px solid var(--primary, #2058e8);
  background: var(--primary-05, rgba(32, 88, 232, 0.05));
  backdrop-filter: blur(9.813px);
  margin-top: 20px;
  transition: all 0.3s ease;
}

.comparison-section {
  background: radial-gradient(
      ellipse at top right,
      rgba(32, 88, 232, 0.35) 0%,
      rgba(32, 88, 232, 0.15) 45%,
      rgba(255, 255, 255, 0) 80%
    ),
    #0e1525;
  color: #f8fafc;
  border-radius: 24px;
  padding: 50px 30px;
  /* margin: 60px auto; */
  /* max-width: 1200px;
  width: 100%; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 15px 4px rgba(21, 93, 252, 0.45);
  border-radius: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(32, 88, 232, 0.35);
}

/* 🔹 Individual Tabs */
.comparison-tab {
  background: radial-gradient(
    90.63% 73.44% at 50% 0%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 28px;
  color: #f8fafc;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  width: 23vw;
}

.comparison-tab:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.comparison-tab h3 {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.comparison-tab p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: #e6eaf0;
}

/* 🔹 Buttons Section */
.cta-buttons {
  text-align: center;
  margin-top: 15px;
}

.cta-btn-small {
  background-color: #000; /* black background */
  color: #fff; /* white text */
  border: 2px solid #000;
  padding: 10px 22px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}
.comparison-section h2 {
  grid-column: 1 / -1;
  color: #f8fafc;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin: 10px 0 10px 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .comparison-section {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 24px;
    margin: 40px auto;
  }
}

@media (max-width: 640px) {
  .comparison-section {
    grid-template-columns: 1fr;
    padding: 30px 18px;
    border-radius: 16px;
  }
  .comparison-section h2 {
    font-size: 26px;
    margin-bottom: 10px;
  }
}

.cta-btn-small:hover {
  background-color: #fff;
  color: #000;
  transform: scale(1.05);
}
.register-box input:focus,
.register-wide-box input:focus {
  color: #2058e8;
  font-weight: 500;
}
.register-wide-box svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  top: 8px;
}
.register-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 79px;
  margin-top: 25px;
  border: none;
  cursor: pointer;
  border-radius: 38.947px;
  background: linear-gradient(
      130deg,
      var(--primary, #155dfc) 50.71%,
      var(--secondary, #2334c3) 87.46%
    ),
    linear-gradient(0deg, #0c37d0 0%, #395ee0 100%);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-left: 5%;
}

.register-btn:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}
.footer-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 528px;
  padding: 43px;
  background: url("your-footer-bg.png") center/cover no-repeat,
    var(--black, #0e1525);
  box-sizing: border-box;
  color: var(--white, #f8fafc);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  width: 100%;
  max-width: 1300px;
}

.footer-left {
  max-width: 40vw;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: justify;
}
/* 
.footer-left svg {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
} */

.footer-left p {
  color: var(--white, #f8fafc);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 36.491px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* align-items: center; */
  margin-top: 5%;
}

.footer-right h4 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26.667px;
  color: var(--white, #f8fafc);
}

.footer-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 20%;
}

.footer-right li {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--white, #f8fafc);
  margin-top: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.footer-right li:hover {
  color: #2058e8;
}

/* Bottom line */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.footer-bottom-left {
  display: flex;
  flex-direction: column; /* stack icons and copyright */
  gap: 10px;
}

.social-icons {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: 20%;
}

.social-icon {
  display: flex;
  padding: 7.989px;
  align-items: center;
  justify-content: center;
  border-radius: 7.989px;
  border: 0.999px solid var(--white, #f8fafc);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Active state */
.social-icon.active {
  border: 0.999px solid var(--primary, #2058e8);
  background: var(--primary, #2058e8);
}

/* Hover state same as active */
.social-icon:hover {
  border: 0.999px solid var(--primary, #2058e8);
  background: var(--primary, #2058e8);
}

.footer-bottom-text {
  color: var(--white, #f8fafc);
  font-family: Inter;
  font-size: 16.976px;
  font-weight: 600;
  line-height: 16.976px;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
}

.footer-btn {
  display: flex;
  padding: 20px 80px;
  align-items: center;
  gap: 50px;
  border-radius: 29px;
  border-top: 1.5px solid rgba(32, 88, 232, 0);
  border-bottom: 1.5px solid rgba(32, 88, 232, 0);
  background: rgba(59, 123, 255, 0.05);
  box-shadow: 2px 2px 20px 0 rgba(59, 123, 255, 0.25),
    2px 2px 20px 0 rgba(59, 123, 255, 0.25) inset;
  backdrop-filter: blur(7.5px);
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .footer-bottom-left {
    align-items: center;
  }

  .social-icons {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 40px;
  }

  .footer-left,
  .footer-right {
    align-items: baseline !important;
  }

  .footer-left p {
    font-size: 20px;
    line-height: 30px;
    width: 100% !important;
  }

  .footer-right h4 {
    font-size: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
  }

  .footer-bottom-left {
    flex-direction: column;
    gap: 20px;
  }

  .social-icons {
    width: 100%;
    justify-content: center;
  }
}
/* ✅ Responsive Design */
@media (max-width: 1024px) {
  .footer-container {
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 40px;
  }

  .footer-left,
  .footer-right {
    align-items: flex-start;
    text-align: left;
  }

  .footer-left p {
    font-size: 20px;
    line-height: 30px;
  }

  .footer-right h4 {
    font-size: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .footer-bottom-left {
    align-items: center;
  }

  .social-icons {
    justify-content: center;
  }

  .footer-btn {
    padding: 15px 50px;
    font-size: 16px;
  }
}

@media (max-width: 450px) {
  .footer-left {
    max-width: 100vw !important;
  }

  .footer-left p {
    font-size: 18px;
    line-height: 28px;
  }
  .footer-right {
    align-items: center !important;
  }
  .footer-right li {
    font-size: 16px;
  }

  .social-icons {
    gap: 20px;
  }
}
/* ================== ORIGINAL STYLES (UNCHANGED) ================== */
.section-1,
.section-1 * {
  box-sizing: border-box;
}
.section-1 {
  padding: 60px 90px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}
.tree-and-shrub-care {
  background: #29409c !important;
  background-size: cover;
  background-repeat: no-repeat;
}
.frame-2147224164 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-2147223840 {
  display: flex;
  flex-direction: column;
  gap: 13.53px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-2147224142 {
  background: var(--seconday-1, rgba(59, 123, 255, 0.1));
  border-radius: 44.88px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.27px;
  padding: 10.77px 17.95px 10.77px 17.95px;
  display: flex;
  flex-direction: row;
  gap: 4.49px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.heading-1-maximize-your-content {
  color: var(--secondary, #3b7bff);
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.851102828979492px;
  line-height: 23.34px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hear-pippa-in-action {
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 55px;
  line-height: 80px;
  font-weight: 400;
  position: relative;
  width: 701px;
}
.hear-pippa-in-action-span {
  background: linear-gradient(to left, #0e1525, #0e1525);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins-SemiBold", sans-serif;
  font-weight: 600;
}
.hear-pippa-in-action-span2 {
  background: linear-gradient(to left, #2058e8, #2058e8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.experience-how-naturally-pippa-speaks-responds-and-handles-real-callers {
  color: var(--black, #0e1525);
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 20.952381134033203px;
  line-height: 35.24px;
  font-weight: 400;
  position: relative;
  width: 532px;
}
.experience-how-naturally-pippa-speaks-responds-and-handles-real-callers-span {
  font-family: "Poppins-Regular", sans-serif;
}
.experience-how-naturally-pippa-speaks-responds-and-handles-real-callers-span2 {
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.tree-and-shrub-care {
  background: linear-gradient(to left, #001d67, #001d67);
  border-radius: 30px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 950px;
  position: relative;
  box-shadow: 18px 15px 35px 0px rgba(59, 123, 255, 0.13),
    -18px -15px 35px 0px rgba(59, 123, 255, 0.12);
  overflow: hidden;
}
.frame-33 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.play-circle {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1686555303 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.group-1686555302 {
  flex-shrink: 0;
  width: 760.01px;
  height: 46px;
  position: static;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.group-1686555302 {
  margin-left: 0;
}
.union {
  width: 238.32px;
  height: 12.16px;
  position: absolute;
  left: 0px;
  top: 17.63px;
  overflow: visible;
}
.union2 {
  width: 527.1px;
  height: 12.16px;
  position: absolute;
  left: 115.91px;
  top: 17.12px;
  overflow: visible;
}
.group-1686555301 {
  width: 46px;
  height: 46px;
  position: static;
}
.frame-1686555301 {
  background: var(--primary, #2058e8);
  border-radius: 72.88px;
  border-style: solid;
  border-color: var(--primary-3, rgba(32, 88, 232, 0.3));
  border-width: 4px;
  display: flex;
  flex-direction: row;
  gap: 7.29px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: absolute;
  left: 116px;
  top: 5.12px;
}
.ellipse-7670 {
  border-radius: 50%;
  border-style: solid;
  border-color: var(--primary, #2058e8);
  border-width: 1.14px;
  width: 46px;
  height: 46px;
  position: absolute;
  left: calc(50% - 267.5px);
  top: 50%;
  translate: 0 -50%;
  aspect-ratio: 1;
}
._0-03-2-34 {
  color: var(--white, #f8fafc);
  text-align: center;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 18px;
  line-height: 35.24px;
  font-weight: 600;
  position: relative;
}
.play-circle2 {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  aspect-ratio: 1;
}
.vector {
  width: 83.33%;
  height: 83.33%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.reload {
  width: 26.67px;
  height: 26.67px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
  aspect-ratio: 1;
}
.tree-and-shrub-care2 {
  background: var(--white-1, rgba(248, 250, 252, 0.1));
  border-radius: 30px;
  border-style: solid;
  border-color: var(--white, #f8fafc);
  border-width: 1px;
  padding: 0px 0px 30px 0px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  box-shadow: 18px 15px 35px 0px rgba(0, 0, 0, 0.13),
    -18px -15px 35px 0px rgba(0, 0, 0, 0.13);
  overflow: hidden;
}
.frame-2147224268 {
  background: var(--primary-1, rgba(32, 88, 232, 0.1));
  border-style: solid;
  border-color: var(--white-4, rgba(248, 250, 252, 0.4));
  border-width: 0px 0px 1px 0px;
  padding: 22px 30px 22px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
._33473-e-53-1-da-1-41-a-3-bf-2-f-be-77-ca-1-c-49-c-2-1 {
  flex-shrink: 0;
  width: 91.9px;
  height: 47.24px;
  position: relative;
  box-shadow: 0px 3.44px 15.46px 0px rgba(0, 0, 0, 0.25);
  object-fit: cover;
  aspect-ratio: 91.9/47.24;
}
.frame-2147224245 {
  background: #2058e8;
  border-radius: 40.37px;
  border: 2px solid #3b7bff;
  padding: 12.02px 20.61px;
  display: flex;
  flex-direction: row;
  gap: 8.59px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6.44px);
}
.ai-voice-generator {
  flex-shrink: 0;
  width: 20.61px;
  height: 20.61px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.ai {
  background: linear-gradient(to left, #f8fafc, #f8fafc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 18.895965576171875px;
  font-weight: 500;
  position: relative;
  width: 18.9px;
  height: 19.75px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-2147224281 {
  padding: 0px 30px 0px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1686555407 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-21472242452 {
  background: #2058e8;
  border-radius: 12px;
  border: 5px solid #3b7bff;
  padding: 14px 12px;
  display: flex;
  flex-direction: row;
  gap: 8.59px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 450px;
  position: relative;
  box-shadow: inset 1.72px 1.72px 17.18px rgba(88, 188, 205, 0.25),
    1.72px 1.72px 17.18px rgba(88, 188, 205, 0.25);
  backdrop-filter: blur(6.44px);
}
.frame-2147224280 {
  background: var(--white, #f8fafc);
  border-radius: 17.86px;
  border-style: solid;
  border-color: var(--white, #f8fafc);
  border-width: 0.56px;
  display: flex;
  flex-direction: column;
  gap: 5.58px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
}
._33473-e-53-1-da-1-41-a-3-bf-2-f-be-77-ca-1-c-49-c-2-12 {
  flex-shrink: 0;
  width: 17.86px;
  height: 9.18px;
  position: relative;
  box-shadow: 0px 1.92px 8.63px 0px rgba(0, 0, 0, 0.25);
  object-fit: cover;
  aspect-ratio: 17.86/9.18;
}
.thank-you-for-calling-mountain-view-plumbing-how-may-i-help-you {
  background: linear-gradient(to left, #f8fafc, #f8fafc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.frame-2147224269 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-21472242453 {
  background: #2058e8;
  border-radius: 12px;
  border: 5px solid #3b7bff;
  padding: 14px 12px;
  display: flex;
  flex-direction: row;
  gap: 8.59px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 450px;
  position: relative;
  box-shadow: inset 1.72px 1.72px 17.18px rgba(88, 188, 205, 0.25),
    1.72px 1.72px 17.18px rgba(88, 188, 205, 0.25);
  backdrop-filter: blur(6.44px);
}
.frame-21472242802 {
  background: linear-gradient(to left, #f8fafc, #f8fafc);
  border-radius: 17.86px;
  border-style: solid;
  border-color: var(--white, #f8fafc);
  border-width: 0.56px;
  display: flex;
  flex-direction: column;
  gap: 5.58px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}
.hi-i-just-went-to-take-a-shower-before-work-and-realized-i-have-no-hot-water-i-think-my-water-heater-stopped-working {
  background: linear-gradient(to left, #f8fafc, #f8fafc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  flex: 1;
}
.frame-21472242454 {
  background: #2058e8;
  border-radius: 40.37px;
  border: 2px solid #3b7bff;
  padding: 12.02px 20.61px;
  display: flex;
  flex-direction: row;
  gap: 8.59px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 1.72px 1.72px 17.18px rgba(88, 188, 205, 0.25),
    1.72px 1.72px 17.18px rgba(88, 188, 205, 0.25);
  backdrop-filter: blur(6.44px);
}
.wechat {
  flex-shrink: 0;
  width: 20.61px;
  height: 20.61px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.custom-greeting {
  background: linear-gradient(to left, #f8fafc, #f8fafc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

/* ================== RESPONSIVE ADDITIONS (ONLY) ================== */

/* Fluid typography & spacing */
.section-1 {
  padding: clamp(30px, 8vw, 60px) clamp(15px, 5vw, 90px);
  gap: clamp(30px, 6vw, 50px);
}
.heading-1-maximize-your-content {
  font-size: clamp(14px, 3.5vw, 18.85px);
  line-height: 1.3;
}
.hear-pippa-in-action {
  font-size: clamp(32px, 8vw, 55px);
  line-height: 1.2;
  width: 100%;
  max-width: 701px;
}
.experience-how-naturally-pippa-speaks-responds-and-handles-real-callers {
  font-size: clamp(16px, 4vw, 20.95px);
  line-height: 1.6;
  width: 100%;
  max-width: 600px;
}
.thank-you-for-calling-mountain-view-plumbing-how-may-i-help-you,
.hi-i-just-went-to-take-a-shower-before-work-and-realized-i-have-no-hot-water-i-think-my-water-heater-stopped-working {
  font-size: clamp(14px, 3.8vw, 16px);
}

/* Card & container fluid width */
.tree-and-shrub-care {
  width: 100%;
  max-width: 950px;
  padding: clamp(20px, 5vw, 30px);
  border-radius: clamp(16px, 3vw, 30px);
}
.tree-and-shrub-care2 {
  border-radius: clamp(16px, 3vw, 30px);
  padding-bottom: clamp(20px, 4vw, 30px);
  gap: clamp(16px, 3vw, 24px);
}

/* Chat bubbles */
.frame-21472242452,
.frame-21472242453 {
  width: 100%;
  max-width: 500px;
  padding: clamp(10px, 3vw, 14px) clamp(8px, 2.5vw, 12px);
  border-radius: clamp(8px, 2vw, 12px);
  border-width: clamp(3px, 1vw, 5px);
}
.frame-21472242452 {
  align-self: flex-start;
}
.frame-21472242453 {
  align-self: flex-end;
}

/* Audio player */
.group-1686555302 {
  width: 100%;
  max-width: 760px;
}
.union {
  width: 30%;
  left: 0;
}
.union2 {
  width: 65%;
  left: 15%;
}
.frame-1686555301 {
  left: 15%;
}
.play-circle,
.play-circle2 {
  width: clamp(40px, 10vw, 60px);
  height: clamp(40px, 10vw, 60px);
}

/* Buttons */
.frame-2147224245,
.frame-21472242454 {
  padding: clamp(8px, 2vw, 12px) clamp(14px, 3vw, 20.61px);
  border-radius: clamp(24px, 5vw, 40.37px);
  font-size: clamp(14px, 3.5vw, 18.9px);
}

/* Images & icons */
._33473-e-53-1-da-1-41-a-3-bf-2-f-be-77-ca-1-c-49-c-2-1,
._33473-e-53-1-da-1-41-a-3-bf-2-f-be-77-ca-1-c-49-c-2-12 {
  width: clamp(70px, 20vw, 91.9px);
  height: auto;
}
.ai-voice-generator,
.wechat {
  width: clamp(18px, 5vw, 20.61px);
  height: clamp(18px, 5vw, 20.61px);
}

/* Tablet */
@media (max-width: 992px) {
  .section-1 {
    gap: 35px;
  }
  .tree-and-shrub-care {
    padding: 20px;
  }
  .frame-21472242452,
  .frame-21472242453 {
    max-width: 420px;
  }
}

/* Mobile Large */
@media (max-width: 768px) {
  .section-1 {
    padding: 40px 12px;
    gap: 30px;
  }
  .frame-33 {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    display: none;
  }
  .group-1686555302 {
    justify-content: center;
    width: 90vw !important;
  }
  .union {
    width: 35%;
  }
  .union2 {
    width: 60%;
    left: 18%;
  }
  .frame-1686555301 {
    left: 18%;
  }
}

/* Mobile Small */
@media (max-width: 480px) {
  .section-1 {
    padding: 30px 10px;
    gap: 24px;
  }
  .tree-and-shrub-care {
    padding: 16px;
  }
  .frame-21472242452,
  .frame-21472242453 {
    max-width: 100%;
    padding: 10px;
    border-width: 3px;
    border-radius: 10px;
  }
  .frame-2147224245,
  .frame-21472242454 {
    padding: 8px 14px;
    font-size: 15px;
  }
  .frame-2147224268,
  .frame-2147224281 {
    padding: 16px;
  }
}
/* Base styles - same as original */
.section-1,
.section-1 * {
  box-sizing: border-box;
}
.section-1 {
  padding: 60px 90px 60px 90px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.frame-2147224164 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-2147223840 {
  display: flex;
  flex-direction: column;
  gap: 13.53px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-2147224142 {
  background: var(--seconday-1, rgba(59, 123, 255, 0.1));
  border-radius: 44.88px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.27px;
  padding: 10.77px 17.95px 10.77px 17.95px;
  display: flex;
  flex-direction: row;
  gap: 4.49px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.heading-1-maximize-your-content {
  color: var(--secondary, #3b7bff);
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.851102828979492px;
  line-height: 23.34px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-growing-businesses-choose-pippa-pa {
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 55px;
  line-height: 80px;
  font-weight: 400;
  position: relative;
  width: 701px;
}
.why-growing-businesses-choose-pippa-pa-span {
  color: white;
  font-family: "Poppins-SemiBold", sans-serif;
  font-weight: 600;
}
.why-growing-businesses-choose-pippa-pa-span2 {
  background: linear-gradient(to left, #2058e8, #2058e8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.we-don-t-just-answer-calls-we-help-you-win-more-clients {
  color: var(--black, #0e1525);
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 20.952381134033203px;
  line-height: 35.24px;
  font-weight: 400;
  position: relative;
  width: 678px;
}
.we-don-t-just-answer-calls-we-help-you-win-more-clients-span {
  color: white;
  font-family: "Poppins-Regular", sans-serif;
}

.we-don-t-just-answer-calls-we-help-you-win-more-clients-span2 {
  color: white;
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.frame-1984079299 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1236px;
  position: relative;
}
.frame-1984079297 {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1984079293 {
  background: var(--primary-1, rgba(32, 88, 232, 0.1));
  border-radius: 40px;
  border-style: solid;
  border: 1px solid rgba(255, 255, 255, 0.18);

  width: 420px;
  max-width: 100%;

  box-shadow: 0 0 8px 1px rgba(21, 93, 252, 0.6);
  border-width: 2px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-625939 {
  background: var(--secondary, #3b7bff);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 1px 54px 0px rgba(46, 163, 242, 0.5);
}
.ai-voice {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1984079207 {
  display: flex;
  flex-direction: column;
  gap: 12px;

  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1984079263 {
  display: flex;
  flex-direction: row;
  gap: 23.94px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 413px;
  position: relative;
}
.ai-that-sounds-human {
  color: white;
  text-align: left;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 28px;
  line-height: 140%;
  font-weight: 600;
  position: relative;
}
.pippa-uses-natural-conversation-and-advanced-ai-to-handle-every-call-professionally-and-personably-no-scripts-no-bots-just-real-conversations-that-make-your-callers-feel-valued {
  color: white;
  text-align: left;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  opacity: 0.8;
  position: relative;
  width: 522px;
}
.frame-1984079294 {
  background: var(--primary-1, rgba(32, 88, 232, 0.1));
  border-radius: 40px;
  border-style: solid;
  border: 1px solid rgba(255, 255, 255, 0.18);

  width: 420px;
  max-width: 100%;

  box-shadow: 0 0 8px 1px rgba(21, 93, 252, 0.6);
  border-width: 2px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-625940 {
  background: var(--secondary, #3b7bff);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 1px 54px 0px rgba(46, 163, 242, 0.5);
}
.customer-support {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1984079208 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.tailored-for-you {
  color: white;
  text-align: left;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 28px;
  line-height: 140%;
  font-weight: 600;
  position: relative;
}
.from-dentists-to-solicitors-every-business-has-unique-needs-pippa-learns-your-tone-your-services-and-your-schedule-giving-callers-a-truly-personalized-experience {
  color: white;
  text-align: left;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  opacity: 0.8;
  position: relative;
  align-self: stretch;
}
.frame-1984079298 {
  display: flex;
  flex-direction: row;

  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1984079296 {
  background: var(--primary-1, rgba(32, 88, 232, 0.1));
  border-radius: 40px;
  border-style: solid;
  border: 1px solid rgba(255, 255, 255, 0.18);

  width: 420px;
  max-width: 100%;

  box-shadow: 0 0 8px 1px rgba(21, 93, 252, 0.6);
  border-width: 2px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  width: 590px;
  position: relative;
}

.frame-625942 {
  background: var(--secondary, #3b7bff);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 1px 54px 0px rgba(46, 163, 242, 0.5);
}
.customer-service {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1984079210 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-19840792632 {
  display: flex;
  flex-direction: row;
  gap: 23.94px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 226px;
  position: relative;
}
.available-24-7 {
  color: white;
  text-align: left;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 28px;
  line-height: 140%;
  font-weight: 600;
  position: relative;
}
.unlike-human-receptionists-pippa-never-sleeps-she-s-ready-to-answer-your-calls-day-or-night-weekends-included-ensuring-you-never-lose-another-opportunity {
  color: white;
  text-align: left;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  opacity: 0.8;
  position: relative;
  align-self: stretch;
}
.frame-1984079295 {
  background: var(--primary-1, rgba(32, 88, 232, 0.1));
  border-radius: 40px;
  border-style: solid;
  border: 1px solid rgba(255, 255, 255, 0.18);

  width: 420px;
  max-width: 100%;

  box-shadow: 0 0 8px 1px rgba(21, 93, 252, 0.6);
  border-width: 2px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 619px;
  position: relative;
}
.frame-625941 {
  background: var(--secondary, #3b7bff);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0px 1px 54px 0px rgba(46, 163, 242, 0.5);
}
.mentoring {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1984079209 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-19840792633 {
  display: flex;
  flex-direction: row;
  gap: 23.94px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.real-support-real-people {
  color: white;
  text-align: left;
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 28px;
  line-height: 140%;
  font-weight: 600;
  position: relative;
}
.behind-every-ai-pippa-is-our-dedicated-support-team-ready-to-assist-you-need-to-update-scripts-or-change-details-we-ve-got-you-covered-anytime {
  color: white;
  text-align: left;
  font-family: "Poppins-Regular", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  opacity: 0.8;
  position: relative;
  align-self: stretch;
}

/* ===================================
   MOBILE RESPONSIVENESS (≤768px)
   =================================== */
@media (max-width: 768px) {
  .section-1 {
    padding: 40px 20px;
    gap: 32px;
  }

  .frame-2147224164 {
    gap: 20px;
  }

  .frame-2147223840 {
    gap: 10px;
  }

  .heading-1-maximize-your-content {
    font-size: 14px;
    line-height: 18px;
  }

  .why-growing-businesses-choose-pippa-pa {
    font-size: 32px;
    line-height: 42px;
    width: 100%;
  }

  .we-don-t-just-answer-calls-we-help-you-win-more-clients {
    font-size: 16px;
    line-height: 26px;
    width: 100%;
  }

  .frame-1984079299 {
    width: 100%;
    gap: 24px;
  }

  /* Stack cards vertically */
  .frame-1984079297,
  .frame-1984079298 {
    flex-direction: column;
    gap: 24px;
  }

  .frame-1984079293,
  .frame-1984079294,
  .frame-1984079295,
  .frame-1984079296 {
    width: 100% !important;
    padding: 24px;
  }

  .frame-625939,
  .frame-625940,
  .frame-625941,
  .frame-625942 {
    padding: 16px;
  }

  .ai-voice,
  .customer-support,
  .customer-service,
  .mentoring {
    width: 32px;
    height: 32px;
  }

  .ai-that-sounds-human,
  .tailored-for-you,
  .available-24-7,
  .real-support-real-people {
    font-size: 22px;
  }

  .pippa-uses-natural-conversation-and-advanced-ai-to-handle-every-call-professionally-and-personably-no-scripts-no-bots-just-real-conversations-that-make-your-callers-feel-valued,
  .from-dentists-to-solicitors-every-business-has-unique-needs-pippa-learns-your-tone-your-services-and-your-schedule-giving-callers-a-truly-personalized-experience,
  .unlike-human-receptionists-pippa-never-sleeps-she-s-ready-to-answer-your-calls-day-or-night-weekends-included-ensuring-you-never-lose-another-opportunity,
  .behind-every-ai-pippa-is-our-dedicated-support-team-ready-to-assist-you-need-to-update-scripts-or-change-details-we-ve-got-you-covered-anytime {
    font-size: 15px;
    line-height: 24px;
    width: 100%;
  }

  .frame-1984079263,
  .frame-19840792632,
  .frame-19840792633 {
    width: 100%;
    gap: 12px;
  }
}

/* Extra small devices (≤480px) */
@media (max-width: 480px) {
  .section-1 {
    padding: 30px 15px;
  }

  .why-growing-businesses-choose-pippa-pa {
    font-size: 28px;
    line-height: 36px;
  }

  .we-don-t-just-answer-calls-we-help-you-win-more-clients {
    font-size: 15px;
    line-height: 24px;
  }

  .frame-1984079293,
  .frame-1984079294,
  .frame-1984079295,
  .frame-1984079296 {
    padding: 20px;
  }

  .ai-that-sounds-human,
  .tailored-for-you,
  .available-24-7,
  .real-support-real-people {
    font-size: 20px;
  }

  .pippa-uses-natural-conversation-and-advanced-ai-to-handle-every-call-professionally-and-personably-no-scripts-no-bots-just-real-conversations-that-make-your-callers-feel-valued,
  .from-dentists-to-solicitors-every-business-has-unique-needs-pippa-learns-your-tone-your-services-and-your-schedule-giving-callers-a-truly-personalized-experience,
  .unlike-human-receptionists-pippa-never-sleeps-she-s-ready-to-answer-your-calls-day-or-night-weekends-included-ensuring-you-never-lose-another-opportunity,
  .behind-every-ai-pippa-is-our-dedicated-support-team-ready-to-assist-you-need-to-update-scripts-or-change-details-we-ve-got-you-covered-anytime {
    font-size: 14px;
    line-height: 22px;
  }
}
.pippa-section,
.pippa-section * {
  box-sizing: border-box;
}
.pippa-section {
  background: linear-gradient(to left, #0e1525, #0e1525);
  padding: 60px 80px 60px 80px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pippa-vector-1 {
  opacity: 0.5;
  flex-shrink: 0;
  width: 992.5px;
  height: 1031.27px;
  position: absolute;
  left: -727px;
  top: 974.38px;
  transform: translate(727px, -657.75px);
  overflow: visible;
}
.pippa-vector-2 {
  opacity: 0.3;
  flex-shrink: 0;
  width: 992.5px;
  height: 1031.27px;
  position: absolute;
  left: 877px;
  top: -208.62px;
  transform: translate(-128.31px, 208.62px);
  overflow: visible;
}
.pippa-header-frame {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.pippa-content-frame {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.pippa-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 13.53px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.pippa-badge {
  background: #3b7bff; /* blue background */
  border-radius: 44.88px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.27px;
  padding: 10.77px 17.95px;
  display: flex;
  flex-direction: row;
  gap: 4.49px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.pippa-badge-text {
  color: #ffffff; /* white text */
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.85px;
  line-height: 23.34px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pippa-main-title {
  text-align: left;
  font-family: "-", sans-serif;
  font-size: 55px;
  line-height: 80px;
  font-weight: 400;
  position: relative;
  width: 701px;
}
.pippa-title-part1 {
  color: #000000; /* solid black text */
  font-family: "Poppins-SemiBold", sans-serif;
  font-weight: 600;
  background: none; /* remove gradient */
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}
.pippa-title-part2 {
  background: linear-gradient(to left, #3b7bff, #3b7bff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;

  white-space: nowrap; /* ✅ Text ko 1 line me force karega */
}
/* Container */
.testimonial-frame {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center; /* horizontally center all items */
  justify-content: center; /* vertical spacing */
  text-align: center; /* ensures text inside is centered */
  width: 100%; /* take full width */
  max-width: 900px; /* optional, limits width for large screens */
  margin: 0 auto; /* center container horizontally */
  position: relative;
}

/* Title Wrapper */
.testimonial-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center; /* center badge + title horizontally */
  justify-content: center;
  text-align: center;
  width: 100%; /* full width */
  margin: 0 auto; /* center wrapper */
}

/* Badge */
.testimonial-badge {
  background: #3b7bff;
  border-radius: 44.88px;
  padding: 10.77px 17.95px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto; /* center badge inside wrapper */
}

.testimonial-badge-text {
  color: #ffffff;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.85px;
  line-height: 23.34px;
  font-weight: 600;
  text-align: center;
}

/* Main Title */
.testimonial-main-title {
  font-family: "Poppins", sans-serif;
  font-size: 42px;
  line-height: 1.3;
  font-weight: 400;
  text-align: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/* Title Part 1 */
.title-part1 {
  color: #000000;
  font-family: "Poppins-SemiBold", sans-serif;
  font-weight: 600;
}

/* Title Part 2 */
.title-part2 {
  background: linear-gradient(to left, #3b7bff, #3b7bff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  display: inline-block;
  margin-left: -60px; /* Desktop shift */
}

/* Subtitle */
.testimonial-subtitle {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.subtitle-part1,
.subtitle-part2 {
  display: block;
}

.bold-text {
  font-weight: 700;
}

/* ✅ MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .testimonial-main-title {
    font-size: 32px; /* smaller for mobile */
  }

  .title-part2 {
    margin-left: 0; /* ✅ remove negative margin */
    display: block; /* ✅ forces proper stacking */
    text-align: center; /* ✅ center on mobile */
    white-space: normal; /* ✅ allow wrap */
  }

  .testimonial-subtitle {
    font-size: 15px;
    padding: 0 15px; /* ✅ better spacing on mobile */
  }
}

@media (max-width: 480px) {
  .testimonial-main-title {
    font-size: 26px;
  }

  .testimonial-subtitle {
    font-size: 14px;
  }
}
/* .pippa-testi-card {
  transition: transform 1s ease-in-out;
  transform-style: preserve-3d;
} */

/* Full viewport container to center everything */
.pippa-section-container {
  display: flex;
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  height: 100vh; /* full viewport height */
  padding: 20px;
  box-sizing: border-box;
  background-color: #f9f9f9; /* optional background */
}

/* Title wrapper: badge + heading */
.pippa-title-wrapper {
  display: flex;
  flex-direction: column; /* stack vertically */
  /* justify-content: center; */
  text-align: center;
  gap: 20px; /* space between badge and title */
}

/* Blue badge */
.pippa-bad {
  background: #3b7bff;
  border-radius: 44.88px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.27px;
  padding: 10.77px 17.95px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Badge text */
.pippa-bad-text {
  color: #ffffff;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.85px;
  line-height: 23.34px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main title */
.pippa-main-tit {
  text-align: center;
  font-size: 35px;
  line-height: 1.3;
}

.pippa-main-tit > span {
  display: inline-block;
}

/* Part 1: solid black */
.pippa-tit-part1 {
  color: #000000;
  font-family: "Poppins-SemiBold", sans-serif;
  font-weight: 600;
}

.pippa-tit-part2 {
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
  background: linear-gradient(to left, #3b7bff, #3b7bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
}

@media (max-width: 768px) {
  .pippa-main-tit {
    font-size: 28px;
  }
  .pippa-bad-text {
    font-size: 16px;
  }
}
.pippa-subtitle {
  color: var(--white, #f8fafc);
  text-align: left;
  font-family: "-", sans-serif;
  font-size: 20.952381134033203px;
  line-height: 35.24px;
  font-weight: 400;
  position: relative;
  width: 678px;
}
.pippa-subtitle-part1,
.pippa-subtitle-part2 {
  color: #000000; /* solid black text */
  font-family: "Poppins-Regular", sans-serif; /* optional: set your font */
}
.pippa-subtitle-part2 {
  font-family: "Poppins-Bold", sans-serif;
  font-weight: 700;
}
.pippa-arrow-group {
  display: flex;
  flex-direction: row;
  gap: 18.47px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.pippa-arrow-left,
.pippa-arrow-right {
  flex-shrink: 0;
  width: 121.91px;
  height: 121.91px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.pippa-testimonials-row {
  width: 100% !important;
  padding: 30px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.pippa-testimonials-row::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
/* Main testimonial card – clean edges */
.pippa-testimonial-card,
.pippa-testimonial-card-2 {
  flex: 0 0 520px;
  min-width: 520px;
  min-height: 75vh;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: radial-gradient(
      circle at top left,
      rgba(32, 88, 232, 0.25) 0%,
      rgba(59, 123, 255, 0.15) 40%,
      rgba(14, 21, 37, 0.05) 100%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    #0e1525;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pippa-testi-card,
.pippa-testi-card-2 {
  flex: 0 0 520px;
  min-width: 520px;
  height: 440px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: radial-gradient(
      circle at top left,
      rgba(32, 88, 232, 0.25) 0%,
      rgba(59, 123, 255, 0.15) 40%,
      rgba(14, 21, 37, 0.05) 100%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    #0e1525;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pippa-testimonial-card:hover,
.pippa-testimonial-card-2:hover {
  transform: translateY(-8px);
  border-color: rgba(59, 123, 255, 0.4);
  box-shadow: 0 16px 48px rgba(32, 88, 232, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Remove white-edge layers (THE REAL FIX) */
.pippa-noise-bg,
.pippa-noise-bg-2,
.pippa-card-overlay,
.pippa-card-overlay-2 {
  display: none !important; /* ✅ hides those misaligned overlays */
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
.pippa-card-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.pippa-card-overlay,
.pippa-card-overlay-2 {
  background: linear-gradient(
    136.71deg,
    rgba(14, 21, 37, 0.5) 0%,
    rgba(14, 21, 37, 0) 100%
  );
  border-radius: 19.19px;
  opacity: 0.41;
  width: 570px;
  height: 536px;
  position: absolute;
  left: 30px;
  top: 36.64px;
  backdrop-filter: blur(10.69px);
}
.pippa-card-overlay-2 {
  left: 680px;
}
.pippa-noise-bg,
.pippa-noise-bg-2 {
  background: linear-gradient(
    180deg,
    rgba(32, 88, 232, 0.2) 0%,
    rgba(14, 21, 37, 0) 100%
  );
  border-radius: 19.19px;
  width: 570px;
  height: 542.65px;
  position: absolute;
  left: 30px;
  top: 30px;
  box-shadow: 0px 3.05px 3.05px 0px rgba(0, 0, 0, 0.25);
  object-fit: cover;
}
.pippa-noise-bg-2 {
  background: linear-gradient(
    180deg,
    rgba(14, 21, 37, 0) 0%,
    rgba(32, 88, 232, 0.2) 100%
  );
  left: 680px;
}
.pippa-card-content {
  width: 100%;
  height: 100%;
  padding: 20px 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.pippa-stars,
.pippa-stars-2 {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  position: relative;
  margin-bottom: 16px;
  overflow: visible;
  width: 20vw;
}

.pippa-stars img {
  width: 10px;
  height: 10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.pippa-quote-mark {
  color: rgba(59, 123, 255, 0.6);
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  margin-bottom: -20px;
}
.pippa-quote-frame,
.pippa-quote-frame-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  position: relative;
}
.svg-container {
  /* Main container to stack the SVG and HTML text vertically */
  display: flex;
  flex-direction: column; /* Stacks the items: Icon upar, Text neeche */
  align-items: flex-start; /* Aligns content to the left */
}

.left-svg {
  display: block;
  margin-top: -40%;
  width: 5vw;
}

.turnover-text {
  position: relative;
  top: -28px;
  padding-top: 50px;
  color: #008cff;
  font-family: "Clash Display", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: normal;
  display: block;
  width: 100%;
  text-align: center;
}
.pippa-quote-text {
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(248, 250, 252, 0.95);
  text-align: left;
  font-weight: 400;
  letter-spacing: 0.2px;
  height: 30vh;
}

.pippa-quote-text strong {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}
.pippa-more-link {
  color: rgba(59, 123, 255, 0.9);
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  transition: color 0.2s ease;
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.strs {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.pippa-stars {
  font-size: 20px;
  letter-spacing: 3px;
  color: #ffd700;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
  display: inline-block;
}
.pippa-more-link:hover {
  color: #3b7bff;
}
.pippa-author,
.pippa-author-2 {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-top: auto;
  padding-top: 20px;
}
.pippa-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  position: relative;
  object-fit: cover;
  border: 2px solid rgba(59, 123, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pippa-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.pippa-name {
  color: #f8fafc;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  letter-spacing: 0.3px;
}
.pippa-role {
  color: rgba(248, 250, 252, 0.6);
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
/* Tablets (max-width: 992px) */
@media (max-width: 992px) {
  .pippa-section {
    padding: 50px 40px;
  }

  .pippa-header-frame {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  .pippa-content-frame {
    align-items: center;
    text-align: center;
  }

  .pippa-main-title {
    font-size: 42px;
    line-height: 60px;
    width: 90%;
  }

  .pippa-subtitle {
    font-size: 17px;
    line-height: 28px;
    width: 90%;
  }

  .pippa-testimonials-row {
    align-items: center;
  }

  .pippa-testimonial-card,
  .pippa-testimonial-card-2 {
    width: 90%;
    height: auto;
  }

  .pippa-author,
  .pippa-author-2 {
    position: static;
    justify-content: center;
  }

  .pippa-stars,
  .pippa-stars-2 {
    position: static;
    justify-content: center;
  }

  .pippa-quote-frame,
  .pippa-quote-frame-2 {
    position: static;
    text-align: center;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .pippa-section {
    padding: 40px 25px;
    gap: 40px;
  }

  .pippa-main-title {
    font-size: 32px;
    line-height: 45px;
    width: 100%;
    text-align: center; /* ⭐ موبائل پر سینٹر */
    margin: 0 auto; /* ⭐ سینٹر ہولڈ */
  }

  .pippa-subtitle {
    font-size: 16px;
    line-height: 26px;
    width: 100%;
  }

  .pippa-badge {
    padding: 8px 14px;
    top: 10px;
  }

  .pippa-badge-text {
    font-size: 15px;
  }

  .pippa-arrow-group {
    justify-content: center;
    gap: 12px;
  }

  .pippa-arrow-left,
  .pippa-arrow-right {
    width: 60px;
    height: 60px;
  }

  .pippa-testimonials-row {
    padding: 0;
  }

  .pippa-testimonial-card,
  .pippa-testimonial-card-2 {
    width: 100%;
    height: auto;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .pippa-section {
    padding: 30px 20px;
    gap: 30px;
  }
  .form-img {
    width: 80vw;
  }
  .pippa-main-title {
    font-size: 26px;
    line-height: 38px;
  }

  .pippa-subtitle {
    font-size: 15px;
    line-height: 24px;
  }

  .pippa-badge {
    padding: 6px 12px;
  }

  .pippa-badge-text {
    font-size: 14px;
  }

  .pippa-arrow-left,
  .pippa-arrow-right {
    width: 50px;
    height: 50px;
  }
}
.card-text {
  width: 100%;
  overflow: hidden;
}

.card-text svg {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
}
.why-choose-pippa {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.why-choose-pippa h2 {
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.pippa-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.item-icon {
  width: 24px;
  height: 24px;
}

.item-text {
  color: var(--white, #f8fafc);
  font-family: sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.pippa-feature {
  display: flex;
  /* align-items: center; */
  gap: 14px;
}
/* Feature Container */
/* Feature Container */
.pippa-newfeature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
}

/* Feature Title */
.pippa-newfeature-title {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 30px;
  color: #f8fafc; /* white text for card */
  margin-bottom: 4px;
}

/* Feature Description */
.pippa-newfeature-text {
  font-family: "Poppins-Regular", sans-serif;
  font-size: 16px;
  color: #f8fafc; /* white text */
  line-height: 1.5;
  margin: 0;
}

/* Feature List */
.pippa-newfeature-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* List Items */
.pippa-newfeature-list li {
  font-family: "Poppins-Regular", sans-serif;
  font-size: 16px;
  color: #f8fafc; /* white text */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Optional: Add small checkmark icon before each list item */
.pippa-newfeature-list li::before {
  content: "✔"; /* checkmark symbol */
  color: #3b7bff; /* blue accent */
  font-weight: bold;
}

.feature-icon {
  width: 24px;
  height: 24px;
}

/* Wrapper box around each feature */
.pippa-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);

  width: 420px;
  max-width: 100%;

  box-shadow: 0 0 8px 1px rgba(21, 93, 252, 0.6);
  transition: all 0.3s ease;
  margin: 8px 0;
}

.pippa-feature:hover {
  box-shadow: 0 0 26px 10px rgba(103, 163, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
}

.feature-text {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}
/* ====== RESPONSIVE DESIGN ====== */

/* Tablets (768px and below) */
@media (max-width: 768px) {
  .pippa-feature {
    width: 100%; /* full width on tablet */
    padding: 12px 14px;
    gap: 10px;
  }

  .feature-text {
    font-size: 16px;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  .pippa-feature {
    width: 100%; /* single column */
    padding: 10px 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .feature-text {
    font-size: 15px;
    line-height: 1.35;
  }
}

.pippa-label {
  background: var(--seconday-1, rgba(59, 123, 255, 0.1));
  border-radius: 44.884px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.27px;
  padding: 10.77px 17.95px;
  display: flex;
  flex-direction: row;
  gap: 4.49px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  text-align: left;
}

.pippa-label-text {
  color: var(--secondary, #3b7bff);
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.85px;
  line-height: 23.34px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pippa-tag {
  background: var(--seconday-1, rgba(59, 123, 255, 0.1));
  border-radius: 44.88px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.27px;
  padding: 10.77px 17.95px;
  display: flex;
  flex-direction: row;
  gap: 4.49px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width: fit-content;
}

.pippa-tag-text {
  color: var(--secondary, #3b7bff);
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 18.85px;
  line-height: 23.34px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.text-white {
  color: #ffffff; /* यह टैग के अंदर के सभी टेक्स्ट को सफ़ेद कर देगा */
}

/* अगर strong टैग का रंग अलग से नियंत्रित होता है, तो उसे भी सफ़ेद रखने के लिए यह इस्तेमाल करें। */
.highl {
  color: #ffffff;
}
.pippa-terms.enhanced-design {
  background-color: #f7f9fc !important;
  color: var(--pippa-text-dark);
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Tablet View */
@media (max-width: 992px) {
  .pippa-testimonial-card {
    flex: 1 1 calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
  }

  .pippa-main-title span {
    font-size: 2rem;
  }

  .pippa-subtitle {
    font-size: 1rem;
  }
}

/* Mobile View */
@media (max-width: 576px) {
  .turnover-text {
    font-size: 15px !important;
  }

  .pippa-testimonials-row {
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 20px 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    width: 100%;
    /* min-height: 80vh!important; */
  }

  .pippa-testimonial-card,
  .pippa-testimonial-card-2 {
    flex: 0 0 auto;
    min-width: 340px !important;
    max-width: 280px !important;
    width: 280px !important;
    height: auto;
    scroll-snap-align: start;
  }

  .pippa-testi-card,
  .pippa-testi-card-2 {
    flex: 0 0 auto;
    min-width: 280px !important;
    max-width: 280px !important;
    width: 280px !important;
    min-height: 60vh !important;
    scroll-snap-align: start;
  }

  .pippa-card-content {
    padding: 1.1rem;
  }

  .pippa-quote-text {
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    margin: 0 auto;
    width: 90%;
  }

  .pippa-quote-frame {
    max-height: none;
    overflow: visible;
    text-align: center;
  }

  .pippa-quote-mark {
    display: block;
    font-size: 2.5rem;
    margin: 0 auto 0.5rem auto;
    transform: translateX(10px);
  }

  .pippa-main-title span {
    font-size: 1.6rem;
    text-align: center;
  }

  .pippa-subtitle {
    font-size: 0.9rem;
    text-align: center;
  }

  .pippa-author-info .pippa-name {
    font-size: 1rem;
  }

  .pippa-author-info .pippa-role {
    font-size: 0.85rem;
  }
}
.terms-main-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--pippa-text-dark);
  margin-bottom: 5px;
}

.terms-main-title .accent-word {
  background: linear-gradient(90deg, #4a54ff, #8a4aff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.terms-meta-info {
  color: var(--pippa-text-medium);
  font-size: 1rem; /* Slightly larger meta info */
  font-weight: 500;
}

.terms-section {
  margin-bottom: 35px;
  padding-bottom: 20px;
  /* Use a softer, dotted separator instead of a solid line */
  border-bottom: 2px dashed #e5e5f0;
  position: relative;
}

.terms-section.last-section {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.terms-heading {
  font-size: 1.6rem;
  font-weight: 800;
  /* Darker heading for better structure */
  color: var(--pippa-text-dark);
  margin-bottom: 18px;
  position: relative;
  padding-left: 25px;
}

/* Add a small blue accent bar next to the heading */
.terms-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 80%;
  background-color: var(--pippa-blue-accent);
  border-radius: 3px;
}

.terms-section p {
  font-size: 1.05rem; /* Increased font size for better readability */
  line-height: 1.8; /* Increased line height for better flow */
  color: #4a4a60; /* Slightly softer dark text color */
  margin-bottom: 15px;
}

.terms-section p strong {
  font-weight: 700;
  color: var(--pippa-text-dark);
}

/* --- Media Queries for Enhanced Design Responsiveness --- */

@media (max-width: 767.98px) {
  .terms-main-title {
    font-size: 2rem;
  }

  .terms-heading {
    font-size: 1.4rem;
    padding-left: 20px;
  }

  .terms-heading::before {
    width: 4px;
    height: 70%;
  }

  .terms-section p {
    font-size: 1rem;
  }
}

/* privacy and policy  */
/* --- Additional Styling for Lists within Terms/Policy (Add to styles.css) --- */

.terms-section ul {
  list-style: none; /* Remove default bullet */
  padding-left: 0;
  margin-top: 15px;
}

.terms-section ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4a4a60;
}

/* Custom bullet point using Pippa blue accent */
.terms-section ul li::before {
  content: "•"; /* Custom bullet character */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pippa-blue-accent);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.6;
}

.terms-section a {
  color: var(--pippa-blue-accent);
  text-decoration: underline;
  font-weight: 600;
}

/* dropdown */
/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Button */
.dropbtn {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* Dropdown Content (Hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* Links inside dropdown */
.dropdown-content a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

.dropdown-content a:hover {
  background-color: #f2f2f2;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
.navbar::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 100vh;
  left: 0;
  top: -100px;
  background: radial-gradient(
    ellipse at top right,
    rgba(32, 88, 232, 0.5) 0%,
    rgba(32, 88, 232, 0.2) 50%,
    transparent 80%
  );
  filter: blur(120px);
}

/* Case section */
/* Container */
.case-studies-section {
  padding: 80px 20px;
  background: url("blue-designed-grunge-concrete-texture-vintage-background-with-space-text-image.png"),
    url("lovely-blue-paint-water.jpg"), #0e1525;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: overlay;
  backdrop-filter: blur(10px);
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
  color: #f8fafc;
}

.case-studies-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Title */
.case-studies-section .section-title {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 60px;
  color: #f8fafc;
  text-transform: capitalize;
}

/* Case Study Block */
.case-study {
  background: radial-gradient(
    90.63% 73.44% at 50% 0%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  padding: 40px 35px;
  margin-bottom: 50px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(32, 88, 232, 0.4);
}

.case-study h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 88px;
  text-transform: capitalize;
  margin-bottom: 25px;
  color: #f8fafc;
}

/* Before & After Flex */
.before-after {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 25px;
}

.before-after .before,
.before-after .after {
  flex: 1;
  min-width: 250px;
  padding: 20px;
  background: rgba(32, 88, 232, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(32, 88, 232, 0.3);
}

.before-after h4 {
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2058e8;
}

.before-after ul {
  list-style: none;
  padding-left: 0;
  color: #f8fafc;
}

.before-after ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 20.952px;
  font-style: normal;
  font-weight: 400;
  line-height: 35.238px;
}

.before-after ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2058e8;
  font-weight: bold;
  font-size: 18px;
}

/* Blockquote */
.case-study blockquote {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 18px;
  border-left: 4px solid #2058e8;
  padding-left: 20px;
  margin-top: 20px;
  color: #f8fafc;
  line-height: 1.6;
  opacity: 0.95;
}

/* CTA */
.case-cta {
  text-align: center;
  margin-top: 60px;
  padding: 40px 20px;
}

.case-cta p {
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 30px;
  color: #f8fafc;
}

.case-cta .cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 18px 50px;
  background: linear-gradient(130.4deg, #155dfc 50.71%, #2334c3 87.46%),
    linear-gradient(360deg, #0c37d0 0%, #395ee0 100%);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 38px;
  border: none;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  box-shadow: 0 8px 20px rgba(21, 93, 252, 0.4);
}

.case-cta .cta-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 12px 30px rgba(21, 93, 252, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .case-studies-section {
    padding: 60px 15px;
  }

  .case-studies-section .section-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
  }

  .case-study {
    padding: 30px 25px;
  }

  .case-study h3 {
    font-size: 1.6rem;
  }

  .before-after {
    flex-direction: column;
    gap: 20px;
  }

  .case-cta p {
    font-size: 1.4rem;
  }

  .case-cta .cta-btn {
    padding: 14px 35px;
    font-size: 1rem;
  }
}
/* --- Variables and General Styling --- */
:root {
  --pippa-blue: #007bff;
  --pippa-light-blue: #e0f2ff;
  --pippa-dark-blue: #0056b3;
  --pippa-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --text-color: #222;
}

/* --- Section --- */
.pippa-section {
  font-family: "Poppins", sans-serif;
  padding: 100px 20px;
  background: linear-gradient(180deg, #f9fbff 0%, #f2f7ff 100%);
  color: var(--text-color);
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* floating gradient spheres */
.pippa-section::before,
.pippa-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(0, 123, 255, 0.08),
    transparent 70%
  );
  filter: blur(40px);
  animation: floatBlob 10s infinite alternate ease-in-out;
  z-index: 0;
}
.pippa-section::before {
  width: 260px;
  height: 260px;
  top: 100px;
  left: -100px;
}
.pippa-section::after {
  width: 300px;
  height: 300px;
  bottom: 80px;
  right: -130px;
  animation-delay: 4s;
}

@keyframes floatBlob {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-20px) scale(1.05);
    opacity: 1;
  }
}

/* soft particles shimmer */
.pippa-section::marker {
}
.pippa-section::after {
}
.pippa-section::before {
}

.pippa-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* --- Section Title --- */
.section-title {
  font-size: 2.9em;
  color: var(--pippa-blue);
  font-weight: 700;
  margin-bottom: 65px;
  position: relative;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 123, 255, 0.15);
}

.section-title::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--pippa-blue), var(--pippa-dark-blue));
  margin: 20px auto 0;
  border-radius: 2px;
  animation: pulseLine 2s infinite alternate;
}
@keyframes pulseLine {
  0% {
    box-shadow: 0 0 6px var(--pippa-blue);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
  }
}

/* --- Grid Layout --- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 45px;
  margin-bottom: 70px;
}

/* --- Card --- */
.benefit-card {
  background: linear-gradient(145deg, #0056b3, #003f88);
  border-radius: 20px;
  padding: 50px 35px;
  box-shadow: 0 10px 30px rgba(0, 123, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: all 0.45s ease;
  overflow: hidden;
  backdrop-filter: blur(3px);
  color: #fff;
}

/* 💡 Gradient overlay slide on hover */
.benefit-card::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0)
  );
  transition: all 0.6s ease;
  z-index: 1;
}

.benefit-card:hover::before {
  top: 0;
}

/* --- Hover Motion & Shadow --- */
.benefit-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 123, 255, 0.4);
}

/* --- Icon --- */
.icon-large {
  font-size: 3.4em;
  color: #fff;
  margin-bottom: 22px;
  position: relative;
  transition: all 0.4s ease;
  z-index: 2;
}

.benefit-card:hover .icon-large {
  transform: scale(1.25) rotate(10deg);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
}

/* --- Card Title --- */
.card-title {
  font-size: 1.3em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
}
.icon-large {
  font-size: 3.4em;
  background: linear-gradient(
    135deg,
    var(--pippa-blue),
    var(--pippa-dark-blue)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
  position: relative;
  transition: all 0.4s ease;
}
.icon-large::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.07), transparent 70%);
  animation: pulse 2s infinite ease-in-out;
  z-index: -1;
}
.benefit-card:hover .icon-large {
  transform: scale(1.25) rotate(10deg);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.35));
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* --- Card Title --- */
.card-title {
  font-size: 1.3em;
  font-weight: 600;
  color: white;
  letter-spacing: 0.3px;
}

/* --- Quote Block --- */
.quote-block {
  /* background remove kar diya */
  background: transparent;

  /* 4 side blue border */
  border: 3px solid #003f88;

  padding: 45px 55px;
  margin: 0 auto 80px;
  max-width: 850px;
  border-radius: 16px;
  position: relative;

  /* subtle shadow and smooth animation */
  box-shadow: 0 8px 30px rgba(0, 63, 136, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.quote-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 63, 136, 0.2);
}
.quote-icon {
  font-size: 2.8em;
  color: rgba(0, 123, 255, 0.35);
  position: absolute;
  top: 18px;
  left: 20px;
  animation: floatBlob 6s infinite ease-in-out;
}
.quote-text {
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.75;
  margin-left: 60px;
  color: #444;
}

/* --- CTA Section --- */
.cta-section {
  padding: 60px 50px;
  background-color: #fff;
  border-radius: 18px;
  max-width: 780px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0, 123, 255, 0.1);
  transition: transform 0.35s ease;
}
.cta-section:hover {
  transform: translateY(-6px);
}
.cta-section p {
  font-size: 1.6em;
  font-weight: 600;
  margin-bottom: 25px;
}
.cta-button {
  display: inline-block;
  background: linear-gradient(90deg, var(--pippa-blue), var(--pippa-dark-blue));
  color: #fff;
  padding: 16px 50px;
  border-radius: 50px;
  font-size: 1.15em;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
}
.cta-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 123, 255, 0.45);
}
/* Section */
.showcase-section {
  background: linear-gradient(135deg, #f7f9fc 0%, #e0e7ff 100%);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Header */
.showcase-header {
  text-align: center;
}

.showcase-title {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 46px;
  line-height: 1.2;
  color: #0f172a; /* black heading */
  margin: 0 auto 15px auto;
  max-width: 700px;
}

.showcase-subtitle {
  font-family: "Poppins-Regular", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #0f172a; /* black paragraph text */
  max-width: 650px;
  margin: 0 auto 20px auto;
}

/* Carousel */
.showcase-carousel {
  display: flex;
  gap: 25px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  scroll-behavior: smooth;
}

/* Hide scrollbar */
.showcase-carousel::-webkit-scrollbar {
  display: none;
}
.showcase-carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Card */
.showcase-card {
  flex: 0 0 340px;
  max-width: 340px;
  scroll-snap-align: start;
  background: linear-gradient(145deg, #222, #0056b5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

.showcase-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Card content */
.showcase-card-content {
  padding: 25px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Features inside card */
.showcase-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-heading {
  font-family: "Poppins", sans-serif; /* make sure Poppins is loaded */
  font-weight: 900 !important; /* force bold */
  font-size: 24px;
  color: #0f172a; /* black text */
  line-height: 1.3;
}

.showcase-feature-title {
  font-family: "Poppins-SemiBold", sans-serif;
  font-size: 24px;
  font-weight: 800; /* makes text extra bold */
  color: #ffffff; /* black title inside cards */
  position: relative;
}

.showcase-feature-title::after {
  content: "";
  width: 160px;
  height: 3px;
  background: #3b7bff;
  display: block;
  margin-top: 5px;
  border-radius: 2px;
}
.feature-order {
  display: inline-block;
  font-size: 24px; /* small label size */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff; /* muted gray (adjust to your palette) */
  margin-bottom: 8px;
  font-weight: 600;
}

/* Optional: tighten spacing between label and title */
.showcase-feature-title {
  margin-top: -14px;
  margin-bottom: 0px;
  font-size: 30px; /* adjust to your heading scale */
  line-height: 1.15;
}

.showcase-feature-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #fffefe; /* black paragraph inside cards */
  line-height: 1.6;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(248, 250, 252, 0.95);
  text-align: left;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.showcase-feature-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.showcase-feature-list li {
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  position: relative;
  padding-left: 28px;
  font-family: "Inter", "Poppins", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(248, 250, 252, 0.95);
  text-align: left;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.showcase-feature-list li::before {
  content: "✔";
  color: #3b7bff;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  line-height: 1;
}

/* Highlight bold class */
.highlight-bold {
  font-weight: 800;
  color: #0f172a; /* black bold text */
}

/* Responsive */
@media (max-width: 1024px) {
  .showcase-card {
    flex: 0 0 300px;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .showcase-card {
    flex: 0 0 90%;
    max-width: 90%;
  }
}
@media (max-width: 600px) {
  .pippa-testi-card {
    /* width: 280px; */
    min-width: 340px !important;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .testimonial-main-title span {
    font-size: 28px;
    line-height: 36px;
  }

  .testimonial-subtitle {
    font-size: 14px;
    line-height: 22px;
  }
}

/* Optional: Better spacing on tablets/mobiles */
@media (max-width: 768px) {
  .pippa-section {
    /* padding: 0 15px; */
  }

  .pippa-header-frame {
    text-align: center;
  }
}

.frame-21472242453 {
  display: flex;
  justify-content: flex-end; /* 👈 sab kuch right side se start hoga */
  width: 100%;
  padding: 15px;
}

/* Right-side message bubble */
.message.right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}

.message.right svg {
  order: 2; /* 👈 SVG ko text ke baad right me le jata hai */
}

.message.right .text {
  background-color: #dcf8c6; /* WhatsApp sent message color */
  padding: 10px 14px;
  border-radius: 12px 12px 0 12px;
  /* max-width: 60%; */
  font-family: sans-serif;
}