:root {
  --purple: #5b2d8e;
  --purple-dark: #3f1e65;
  --purple-light: #7a4ab0;
  --green: #6b9a28;
  --green-dark: #4d7019;
  --green-light: #88c234;
  --white: #ffffff;
  --off-white: #f8f9fa;
  --light-grey: #f2f4f6;
  --text-dark: #1a1a2e;
  --text-muted: #6c757d;
  --border: #e5e8ed;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
}

/* ─── NAVBAR ─────────────────────────────── */
.gsurf-navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}



.navbar-brand img {
  height: 44px;
}

.navbar-toggler-icon{
  background: var(--border);

}

.navbar-toggler{
  background: var(--purple);
}

.nav-link {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-dark) !important;
  padding: 0.4rem 1rem !important;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--purple) !important;
}

.btn-nav-login {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  border: 2px solid var(--purple);
  color: var(--purple);
  padding: 0.38rem 1.2rem;
  border-radius: 6px;
  transition: all 0.2s;
  background: transparent;
}

.btn-nav-login:hover {
  background: var(--purple);
  color: var(--white);
}

.btn-nav-cta {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--green);
  color: var(--white);
  padding: 0.42rem 1.3rem;
  border-radius: 6px;
  border: none;
  margin-left: 0.5rem;
  transition: background 0.2s;
}

.btn-nav-cta:hover {
  background: var(--green-dark);
  color: var(--white);
}

/* Ai Chatbot down */

/* Floating Button */

.chat-toggle {
  position: fixed;
  right: 30px;
  bottom: 100px;
  width: 58px;
  height: 58px;
  background: var(--purple);
  border-radius: 50%;
  display: flex;
  z-index: 999;
  align-items: center;
  justify-content: center;

  color: #fff;

  font-size: 24px;

  cursor: pointer;

  box-shadow: 0 12px 30px rgba(0, 102, 255, 0.35);

  transition: 0.3s;
}

.chat-toggle:hover{
  animation: robotShake 3s infinite;

}

@keyframes robotShake {
  0%, 90%, 100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-8deg);
  }

  15% {
    transform: rotate(8deg);
  }

  20% {
    transform: rotate(-6deg);
  }

  25% {
    transform: rotate(6deg);
  }
}

.chat-toggle:hover {
  transform: scale(1.08);
}

/* Chat Box */

.chat-box {
  width: 390px;
  height: 450px;
  background: #fff;
  position: fixed;
  right: 30px;
  bottom: 110px;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);

  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.9);
  transform-origin: bottom right;

  transition: opacity 0.8s ease, 
  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
  visibility 0.9s;
}

.chat-credit {
    padding: 6px 0;
    text-align: center;
    font-size: 11px;
    color: #888;
    background: #fff;
    border-top: 1px solid #f2f2f2;
}

.chat-credit p {
    margin: 0;
}

.chat-credit a {
    color: var(--purple);
    font-weight: 600;
    text-decoration: none;
}

.chat-box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Header */

.chat-header {
  background: var(--purple);

  color: #fff;

  padding: 11px 18px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.profile {
  display: flex;

  gap: 12px;

  align-items: center;
}

.fa-xmark{
  cursor: pointer;
}

.logo {
  width: 45px;

  height: 45px;

  border-radius: 50%;

  background: #fff;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;
}

.logo img{
  width: 30px;

  height: 30px;

}

.chat-header h3 {
  font-size: 18px;
  margin: 0;
}

.chat-header span {
  font-size: 13px;

  opacity: 0.8;
}

/* Body */

.chat-body {
  flex: 1;

  overflow: auto;

  padding: 20px;

  background: #eef5ff;
}

/* Bot */

.bot-message {
  background: #fff;
  padding: 15px;
  border-radius: 16px;

  max-width: 100%;

  margin-bottom: 15px;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);

  line-height: 1.6;
}

.bot-message,
.user-message{
    animation: messageFade .35s ease;
}

@keyframes messageFade{

from{
    opacity:0;
    transform:translateY(15px);
}

to{
    opacity:1;
    transform:translateY(0);
}

}

/* User */

.user-message {
  margin-left: auto;

  background: var(--purple);

  color: #fff;

  padding: 15px;

  border-radius: 16px;

  max-width: 75%;

  margin-bottom: 15px;
}

/* Buttons */

.quick-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 20px;
}

.quick-buttons button {
  border: none;

  background: #fff;

  border: 1px solid #dbe7ff;

  padding: 11px 15px;

  border-radius: 30px;

  cursor: pointer;

  transition: 0.3s;
}

.quick-buttons button:hover {
  background: #0066ff;

  color: #fff;
}

/* Footer */

.chat-footer {
  padding: 18px;

  background: #fff;

  display: flex;

  gap: 12px;

  border-top: 1px solid #eee;
}

.chat-footer input {
  flex: 1;

  border: 1px solid #ddd;

  border-radius: 40px;

  padding: 13px 18px;

  outline: none;
}

.chat-footer button {
  width: 50px;

  height: 50px;

  border: none;

  border-radius: 50%;

  background: var(--purple);

  color: #fff;

  cursor: pointer;

  font-size: 18px;
}

/* Mobile */

@media (max-width: 500px) {
  .chat-box {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }

  .chat-toggle {
    right: 20px;
    bottom: 20px;
  }
}

/* ─── Coverage Area ─────────────────────────────── */

.coverage-card {
  border-left: 5px solid;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.coverage-card.show-card {
  opacity: 1;
  transform: translateY(0);
}

/* Success */
.coverage-success {
  border-left-color: #198754;
  background: #f8fff9;
}

/* Danger */
.coverage-danger {
  border-left-color: #dc3545;
  background: #fff8f8;
}

/* ─── HERO ─────────────────────────────── */
/* Hero Layout */

.hero-wrapper {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 70px;
  min-height: 85vh;
}

/* Left */

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: calc(100% + 5px);
}

/* Buttons */

.hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-buttons a {
  text-decoration: none;
}

/* Trust */

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 35px;
}

/* Right */

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile */

@media (max-width: 992px) {
  .hero-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-trust {
    justify-content: center;
  }
}

.hero-section {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--white);
  /* background-image: url('../image/banner.png'); */
}

.hero-bg-split {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-split::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
   top: -2px;
   inset: -2px;
    bottom: -2px;
  background: linear-gradient(
    135deg,
    var(--purple) 0%,
    var(--purple-dark) 100%);
  clip-path: polygon(0 0, 78% 0, 65% 100%, 0 100%);
}

.hero-bg-split::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  bottom: 0;
  transform: translateZ(0);
    backface-visibility: hidden;
  background: linear-gradient(
    135deg,
    var(--light-grey) 0%,
    var(--off-white) 100%
  );
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

/* decorative circles */
.hero-circle-1 {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, 0.05);
  top: -80px;
  left: -80px;
  z-index: 1;
}

.hero-circle-2 {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 40px solid rgba(107, 154, 40, 0.12);
  bottom: 60px;
  right: 100px;
  z-index: 1;
}

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

.hero-left h1 {
  font-size: clamp(1.6rem, 1rem + 3.8vw, 3.4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.hero-left h1 span {
  color: var(--green-light);
}

.hero-left p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  margin: 0;
  max-width: 420px;
}

.btn-hero-primary {
  background: var(--green);
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  border: none;
  transition:
    background 0.2s,
    transform 0.15s;
  display: inline-block;
  text-decoration: none;
}

.btn-hero-primary:hover {
  background: var(--green-dark);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-hero-secondary {
  background: transparent;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.72rem 1.6rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  margin-left: 0.75rem;
  transition: border-color 0.2s;
  display: inline-block;
}

.btn-hero-secondary:hover {
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--white);
}

/* Hero speed card */
.hero-right {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.speed-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2.5rem 2.2rem;
  box-shadow:
    0 24px 64px rgba(91, 45, 142, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.06);
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.speed-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--purple), var(--green));
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

.speed-number {
  font-family: "Poppins", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--purple), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.speed-unit {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.speed-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.speed-stat-item .label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  display: block;
}

.speed-stat-item .value {
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* Hero trust bar */
.hero-trust {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 500;
}

.trust-item i {
  color: var(--green-light);
  font-size: 0.9rem;
}

/* ─── STATS BAR ─────────────────────────── */
:root {
  --primary: #6f42c1;
  --primary-dark: #5b2da8;
}

.stats-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8f7fd 100%);
}

.stat-card {
  background: #fff;
  border-radius: 20px;
  padding: 35px 20px;
  text-align: center;
  height: 100%;
  border: 1px solid rgba(111, 66, 193, 0.12);
  box-shadow: 0 12px 35px rgba(111, 66, 193, 0.08);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6f42c1, #9b6dff);
}

.stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(111, 66, 193, 0.18);
}

.icon-box {
  width: 70px;
  height: 70px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6f42c1, #9b6dff);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 12px 25px rgba(111, 66, 193, 0.25);
  transition: 0.4s;
}

.stat-card:hover .icon-box {
  transform: rotateY(180deg) scale(1.08);
}

.stat-icon {
  font-size: 28px;
  color: #fff;
}

.counter {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}

.stat-card p {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   FLEX & GRID LAYOUT SYSTEM
   Replaces the old Bootstrap .row / .col-* markup. Each section
   below gets a purpose-named CSS Grid or Flexbox container.
   Desktop-first: full column counts live here, responsive.css
   scales them down at each breakpoint.
   ═══════════════════════════════════════════════════════════ */

/* Stats — 4 across on desktop */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

/* Features intro text block (was col-lg-5) */
.features-intro {
  max-width: 620px;
  margin-bottom: 3rem;
}

/* "Why GSurf" 6-card grid — 3 across on desktop */
.why-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* "How It Works" 4-step grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

/* Coverage map — 7:5 split on desktop */
.coverage-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2.5rem;
  align-items: center;
}

/* Testimonials — 3 across on desktop */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* Contact — 5:7 split, no gutter (was .row.no-gutters) */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
}

/* Footer — 3:2:2:2:3 split on desktop */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem 2rem;
}

@media (max-width: 768px) {
  .stat-card {
    padding: 25px 15px;
  }

  .icon-box {
    width: 60px;
    height: 60px;
  }

  .stat-icon {
    font-size: 24px;
  }

  .stat-card p {
    font-size: 14px;
  }
}

/* Our partners */

.partners-section{
  padding: 5rem 0px;
    background: var(--off-white);
}

.partners-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.partner-card {
  width: 180px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(111, 66, 193, 0.08);
  box-shadow: 0 10px 30px rgba(111, 66, 193, 0.08);
  transition: 0.35s ease;
}

.partner-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(111, 66, 193, 0.15);
  border-color: #6f42c1;
}

.partner-card img {
  max-width: 170px;
  max-height: 100px;
  object-fit: contain;
  transition: 0.35s;
  filter: grayscale(100%);
  opacity: 0.8;
}

.partner-card:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .partners-wrapper {
    gap: 20px;
  }

  .partner-card {
    width: 140px;
    height: 100px;
    padding: 15px;
  }

  .partner-card img {
    max-width: 90px;
    max-height: 80px;
  }
}

/* About us css */

/* Main Layout */

.about-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

/* Image */

.about-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img {
  width: 100%;
  max-width: 550px;
}

/* Right Side */

.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Feature Cards */

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

/* Buttons */

.about-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* Mobile */

@media (max-width: 992px) {
  .about-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .about-buttons {
    justify-content: center;
  }
}
/* ======================================================================== */
/* About us */

/* ===========================
   Inner Page Banner
=========================== */

.page-banner{
    position:relative;
    padding:170px 0 100px;
    overflow:hidden;
    background:linear-gradient(135deg,var(--purple) 0%,var(--purple-light) 100%);
    color:#fff;
}

.page-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../image/banner-pattern.png");
    opacity:.08;
}

.page-banner::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-180px;
    right:-150px;
}

.banner-content{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
}

.banner-tag{
    display:inline-block;
    padding:8px 20px;
    border-radius:30px;
    background:rgba(255,255,255,.12);
    color: white;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:20px;
}

.banner-content h1{
    font-size:3.3rem;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
}

.banner-content h1 span{
    color: var(--green-light);
}

.banner-content p{
    font-size:1.15rem;
    color:rgba(255,255,255,.85);
    max-width:700px;
    margin:0 auto 30px;
}

.breadcrumb{
    background:none;
    padding:0;
    margin:0;
}

.breadcrumb-item a{
    color:#ffffff;
    text-decoration:none;
}

.breadcrumb-item.active{
    color: var(--green-light);
}

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

@media(max-width:768px){

.page-banner{
    padding:130px 0 70px;
}

.banner-content h1{
    font-size:2.2rem;
}

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

}

.why-gsurf {
  background: linear-gradient(180deg, #ffffff 0%, #f8f7fd 100%);
  overflow: hidden;
}

.section-tag {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(111, 66, 193, 0.08);
  color: var(--primary);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.sectiontag {
  width: 105px;
}

.why-gsurf h2 {
  color: #222;
  line-height: 1.2;
}

.why-gsurf h2 span {
  color: var(--primary);
}

.lead-text {
  color: #6c757d;
  line-height: 1.9;
  font-size: 1.05rem;
}

.hero-img {
  max-width: 95%;
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(111, 66, 193, 0.15);
  border-radius: 18px;
  padding: 25px;
  transition: 0.35s;
  height: 100%;
  box-shadow: 0 12px 35px rgba(111, 66, 193, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-card i {
  font-size: 40px;
  color: var(--primary);
  margin-bottom: 15px;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(111, 66, 193, 0.18);
}

.feature-card h5 {
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-card p {
  color: #666;
  margin: 0;
  line-height: 1.7;
}

.btn-primary {
  background: var(--primary);
  border: none;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
}

/* ─── SECTION STYLES ─────────────────────── */
.section-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 0.6rem;
}

.coveragemap {
  border-radius: 15px;
  border: 2px solid purple;
}

.section-heading {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.35rem, 0.95rem + 1.8vw, 2.3rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.section-sub {
  font-size: 0.97rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 540px;
}

.section-title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.25rem, 0.95rem + 1.4vw, 2rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}

/* ── WhatsApp wrapper ── */
.wa-wrapper {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;

  /* Important */
  pointer-events: none;
}

.wa-fab,
.wa-popup {
  pointer-events: auto;
}

/* Popup card */
.wa-popup {
  width: 300px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.85) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.wa-popup.wa-popup-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Popup header */
.wa-popup-header {
  background: #075e54;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.wa-avatar img {
  width: 42px;
  border-radius: 50%;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background-color: #fff;
}

.wa-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: #25d366;
  border-radius: 50%;
  border: 2px solid #075e54;
}

.wa-popup-info {
  flex: 1;
  min-width: 0;
}

.wa-popup-name {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.wa-popup-status {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

.wa-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}

.wa-close-btn:hover {
  color: #fff;
}

/* Chat bubble */
.wa-popup-body {
  background: #ece5dd;
  padding: 16px;
}

.wa-bubble {
  background: #fff;
  border-radius: 0 12px 12px 12px;
  padding: 10px 14px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.55;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  position: relative;
  max-width: 90%;
}

.wa-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  border-width: 0 8px 8px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

/* Start chat CTA */
.wa-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: #fff !important;
  text-decoration: none !important;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 20px;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}

.wa-start-btn:hover {
  background: #1ebe5d;
  text-decoration: none !important;
}

/* FAB button */
.wa-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.chat-icon {
    font-size: 40px;
    color: white;
}

.wa-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

.wa-fab-open,
.wa-fab-close {
  position: absolute;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.wa-fab-close {
  font-size: 20px;
  color: #25d366;
  opacity: 1;
  transform: rotate(-90deg);
  font-style: normal;
}

.wa-fab.wa-fab-active .wa-fab-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}

.wa-fab.wa-fab-active .wa-fab-close {
  opacity: 1;
  transform: rotate(0deg);
}

/* Notification dot (pulse) */
.wa-notification-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #ff4444;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: wa-pulse 1.8s infinite;
}

.wa-notification-dot.wa-dot-hidden {
  display: none;
}

@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
  }
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .wa-wrapper {
    bottom: 18px;
    right: 16px;
  }

  .wa-popup {
    width: calc(100vw - 48px);
    max-width: 300px;
  }

  .wa-fab {
    width: 52px;
    height: 52px;
  }
}

/* ─── PLANS ─────────────────────────────── */
.plans-section {
  padding: 5rem 0;
  background: var(--off-white);
}

.plan-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  border: 1.5px solid var(--border);
  position: relative;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(91, 45, 142, 0.12);
}

.plan-card.featured {
  border-color: var(--purple);
  background: linear-gradient(
    180deg,
    rgba(91, 45, 142, 0.03) 0%,
    var(--white) 100%
  );
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--purple), var(--green));
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.9rem;
  border-radius: 20px;
  white-space: nowrap;
}

.plan-name {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.plan-speed {
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}

.plan-speed span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.plan-price {
  margin: 1.25rem 0;
}

.plan-price .amount {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--green);
}

.plan-price .period {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--text-dark);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan-features li i {
  color: var(--green);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.btn-plan {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  border: 2px solid var(--purple);
  color: var(--purple);
  background: transparent;
  transition: all 0.2s;
  width: 100%;
  text-align: center;
  display: block;
  text-decoration: none;
}

.btn-plan:hover,
.btn-plan.active {
  background: var(--purple);
  color: var(--white);
  text-decoration: none;
}

.plan-card.featured .btn-plan {
  background: var(--purple);
  color: var(--white);
}

.plan-card.featured .btn-plan:hover {
  background: var(--purple-dark);
}

/* ─── FEATURES ─────────────────────────── */
.features-section {
  padding: 5rem 0;
  background: var(--white);
}

.feature-item {
  padding: 2rem 1.5rem;
  border-radius: 14px;
  background: var(--light-grey);
  height: 100%;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(91, 45, 142, 0.09);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}

.feature-icon.purple {
  background: rgba(91, 45, 142, 0.1);
  color: var(--purple);
}

.feature-icon.green {
  background: rgba(107, 154, 40, 0.1);
  color: var(--green);
}

.feature-item h5 {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.6rem;
}

.feature-item p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ─── HOW IT WORKS ─────────────────────── */
.how-section {
  padding: 5rem 0;
  background: var(--off-white);
}

.step-item {
  text-align: center;
  padding: 1rem;
}

.step-number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.step-connector {
  position: relative;
}

.step-connector::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(50% + 40px);
  width: calc(100% - 80px);
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--green));
}

.step-item h5 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.step-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─── COVERAGE ─────────────────────────── */
.coverage-section {
  padding: 5rem 0;
  background: var(--white);
}

.coverage-map-box {
  background: var(--light-grey);
  border-radius: 16px;
  overflow: hidden;
  height: 340px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverage-map-placeholder {
  text-align: center;
}

.coverage-map-placeholder i {
  font-size: 3.5rem;
  color: var(--purple);
  opacity: 0.3;
  display: block;
  margin-bottom: 1rem;
}

.coverage-map-placeholder p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* city coverage pills */
.city-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.city-pill {
  background: rgba(91, 45, 142, 0.07);
  color: var(--purple);
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  border: 1px solid rgba(91, 45, 142, 0.15);
}

/* ─── TESTIMONIALS ─────────────────────── */
.testimonials-section {
  padding: 5rem 0;
  background: linear-gradient(
    135deg,
    var(--purple-dark) 0%,
    var(--purple) 100%
  );
}

.testimonials-section .section-heading {
  color: var(--white);
}

.testimonials-section .section-eyebrow {
  color: var(--green-light);
}

.testimonials-section .section-sub {
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  height: 100%;
}

.testimonial-stars {
  color: #f4c430;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
}

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

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}

.av-purple {
  background: linear-gradient(135deg, var(--purple-light), var(--green));
}

.av-green {
  background: linear-gradient(135deg, var(--green), var(--purple-light));
}

.testimonial-name {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.1rem;
}

.testimonial-role {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── CTA BAND ──────────────────────────── */
.cta-band {
  padding: 4.5rem 0;
  background: var(--off-white);
  border-top: 1px solid var(--border);
}

.cta-band h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

.cta-band p {
  color: var(--text-muted);
  font-size: 0.97rem;
  margin-bottom: 2rem;
}

.btn-cta-green {
  background: var(--green);
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  border: none;
  transition:
    background 0.2s,
    transform 0.15s;
  display: inline-block;
  margin: 0.3rem;
  text-decoration: none;
}

.btn-cta-green:hover {
  background: var(--green-dark);
  color: var(--white);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-cta-outline {
  background: transparent;
  color: var(--purple);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.72rem 1.8rem;
  border-radius: 8px;
  border: 2px solid var(--purple);
  display: inline-block;
  margin: 0.3rem;
  transition: all 0.2s;
}

.btn-cta-outline:hover {
  background: var(--purple);
  color: white;
  text-decoration: none;
}

/* ─── FOOTER ─────────────────────────── */
.gsurf-footer {
  background: var(--text-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 3.5rem 0 1.5rem;
}

.footer-brand img {
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.65;
  max-width: 240px;
}

.footer-heading {
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--green-light);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.footer-contact-item .contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.footerblock {
  display: flex;
  flex-direction: row;
  color: rgba(255, 255, 255, 0.6);
}

.footeritem {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footeritem a {
  text-decoration: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
}

.footer-contact-item i {
  color: var(--green-light);
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 2rem 0 1.25rem;
}

.footer-bottom {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.social-icons a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  margin-left: 1rem;
  transition: color 0.2s;
}

.social-icons a:hover {
  color: var(--green-light);
}

/* ─── UTILITIES ─────────────────────────── */
.divider-green {
  width: 40px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

@media (max-width: 992px) {

  .hero-bg-split::before {
    clip-path: none;
  }

  .hero-bg-split::after {
    display: none;
  }

  .hero-bg-split::before {
    background: linear-gradient(160deg, var(--purple-dark), var(--purple));
  }
}

@media (max-width: 767px) {
  .hero-left h1 {
    font-size: 2rem;
  }

  .speed-card {
    margin-top: 2rem;
  }

  .hero-left p {
    color: rgba(255, 255, 255, 0.85);
  }

  .step-connector::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════
         LEAD / PLAN POPUP FORM
         ═══════════════════════════════════════════ */

/* Overlay */
#gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 8, 35, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  animation: gsOverlayIn 0.3s ease forwards;
}

#gs-overlay.gs-hidden {
  display: none !important;
}

@keyframes gsOverlayIn {
  to {
    opacity: 1;
  }
}

/* Modal box */
#gs-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(91, 45, 142, 0.28);
  animation: gsModalIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#gs-modal::-webkit-scrollbar {
  display: none;
}

@keyframes gsModalIn {
  from {
    transform: translateY(36px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Header gradient */
.gs-modal-head {
  background: var(--purple);
  padding: 1.75rem 1.75rem 1.5rem;
  position: relative;
  text-align: center;
  border-radius: 20px 20px 0 0;
}

.gs-head-icon {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  font-size: 1.45rem;
  color: #fff;
}

.gs-modal-head h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.25rem;
}

.gs-modal-head p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.5;
}

.gs-close-btn {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}

.gs-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Body */
.gs-modal-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

/* Fields */
.gs-field {
  margin-bottom: 0.95rem;
}

.gs-field label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.gs-field label .gs-req {
  color: #e03;
}

.gs-field input,
.gs-field select,
.gs-field textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: var(--text-dark);
  background: var(--off-white);
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.gs-field input:focus,
.gs-field select:focus,
.gs-field textarea:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 45, 142, 0.09);
}

.gs-field textarea {
  resize: vertical;
  min-height: 78px;
}

.gs-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b2d8e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* Plan select only shown in plan-mode */
#gs-plan-row {
  display: none;
}

#gs-overlay.gs-plan-mode #gs-plan-row {
  display: block;
}

/* 2-col grid */
.gs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Error hints */
.gs-field .gs-err {
  font-size: 0.72rem;
  color: #c0392b;
  margin-top: 0.25rem;
  display: none;
}

.gs-field.gs-invalid input,
.gs-field.gs-invalid select,
.gs-field.gs-invalid textarea {
  border-color: #c0392b;
}

.gs-field.gs-invalid .gs-err {
  display: block;
}

/* Submit */
.gs-submit {
  width: 100%;
  background: var(--purple);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.78rem 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0.4rem;
  transition:
    opacity 0.2s,
    transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.gs-submit:hover {
  opacity: 0.91;
  transform: translateY(-1px);
}

.gs-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.gs-submit .gs-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gsSpin 0.7s linear infinite;
  display: none;
}

.gs-submit.gs-loading .gs-spin {
  display: block;
}

.gs-submit.gs-loading .gs-btn-text {
  display: none;
}

@keyframes gsSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Footer note */
.gs-modal-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.gs-modal-note i {
  color: var(--green);
}

/* Success state */
#gs-success {
  display: none;
  text-align: center;
  padding: 2.5rem 2rem;
}

.gs-success-icon {
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, var(--green), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-size: 1.8rem;
  color: #fff;
}

#gs-success h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

#gs-success p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.gs-close-success {
  background: var(--purple);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.gs-close-success:hover {
  background: var(--purple-dark);
}

/* Highlighted plan badge inside form */
#gs-plan-badge {
  display: none;
  background: linear-gradient(
    135deg,
    rgba(91, 45, 142, 0.08),
    rgba(107, 154, 40, 0.08)
  );
  border: 1px solid rgba(91, 45, 142, 0.18);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 1rem;
  text-align: center;
}

#gs-overlay.gs-plan-mode #gs-plan-badge {
  display: block;
}

/* ==========================
   GSURF FAQ Section
========================== */

.gsurf-faq{
    background:#f8f9fc;
    padding:80px 0;
}

.faq-badge{
    display:inline-block;
    background:#7ab51d;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

.faq-title{
    color:#4d2387;
    font-weight:800;
    font-size:42px;
    margin-top:15px;
}

.faq-title span{
    color:#7ab51d;
}

.faq-subtitle{
    max-width:700px;
    margin:15px auto 40px;
    color:#666;
    line-height:1.8;
}

.faq-card{
    border:0;
    border-radius:15px !important;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.35s;
}

.faq-card:hover{
    transform:translateY(-3px);
}

.faq-card .card-header{
    padding:0;
    background:#fff;
    border:0;
}

.faq-btn{
    width:100%;
    padding:22px 70px 22px 25px;
    text-align:left;
    color:#4d2387;
    font-weight:700;
    font-size:18px;
    text-decoration:none !important;
    position:relative;
    white-space:normal;
    line-height:1.6;
}

.faq-btn:hover{
    color:#7ab51d;
}

.faq-btn:focus{
    box-shadow:none;
}

.faq-btn .icon{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    background:#7ab51d;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:bold;
    transition:.3s;
}

.faq-btn[aria-expanded="true"] .icon{
    background:#4d2387;
    transform:translateY(-50%) rotate(45deg);
}

.card-body{
    padding:0 25px 25px;
    color:#666;
    font-size:16px;
    line-height:1.8;
}


/* ==========================
   Tablet
========================== */

@media (max-width:991px){

    .gsurf-faq{
        padding:60px 0;
    }

    .faq-title{
        font-size:34px;
    }

    .faq-btn{
        font-size:17px;
    }

}


/* ==========================
   Mobile
========================== */

@media (max-width:767px){

    .gsurf-faq{
        padding:50px 0;
    }

    .faq-badge{
        font-size:11px;
        padding:7px 16px;
    }

    .faq-title{
        font-size:28px;
        line-height:1.3;
    }

    .faq-subtitle{
        font-size:15px;
        line-height:1.7;
        padding:0 10px;
    }

    .faq-card{
        margin-bottom:15px;
        border-radius:12px !important;
    }

    .faq-btn{

        padding:
            18px
            55px
            18px
            18px;

        font-size:16px;
        line-height:1.6;
    }

    .faq-btn .icon{

        width:30px;
        height:30px;
        right:15px;
        font-size:18px;

    }

    .card-body{

        padding:
            0
            18px
            20px;

        font-size:15px;
        line-height:1.8;

    }

}


/* ==========================
   Small Mobile
========================== */

@media (max-width:480px){

    .faq-title{
        font-size:24px;
    }

    .faq-btn{
        font-size:15px;
    }

    .card-body{
        font-size:14px;
    }

}


/* ═══════════════════════════════════════════
       CONTACT SECTION — catchy split layout
       ═══════════════════════════════════════════ */
.contact-section {
  padding: 5rem 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.contact-section .deco-circle-1 {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 50px solid rgba(91, 45, 142, 0.04);
  top: -100px;
  right: -80px;
  z-index: 0;
}

.contact-section .deco-circle-2 {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(107, 154, 40, 0.05);
  bottom: -60px;
  left: -60px;
  z-index: 0;
}

.contact-wrap {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(91, 45, 142, 0.22);
}

.contact-left {
  background: linear-gradient(
    135deg,
    var(--purple-dark) 0%,
    var(--purple) 55%,
    var(--green-dark) 100%
  );
}

.contact-info-col {
  padding: 3rem 2.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.contact-info-col::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.12);
  top: -50px;
  right: -60px;
}

.contact-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-light);
  margin-bottom: 0.7rem;
}

.contact-info-col h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.contact-info-col > p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 360px;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.contact-detail-icon {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #fff;
}

.contact-detail-text .label {
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.contact-detail-text .value {
  font-size: 0.9rem;
  color: #fff;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.contact-detail-text .value a {
  color: #fff;
  text-decoration: none;
}

.contact-detail-text .value a:hover {
  color: var(--green-light);
}

.contact-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.contact-social a {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s;
}

.contact-social a:hover {
  background: var(--green);
  transform: translateY(-3px);
}

/* Form column */
.contact-form-col {
  background: #fff;
  padding: 3rem 2.5rem;
  position: relative;
}

.contact-form-col h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
}

.contact-form-col .form-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}

.cf-field {
  margin-bottom: 1.05rem;
}

.cf-field label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.32rem;
}

.cf-field label .cf-req {
  color: #e03;
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 0.65rem 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: var(--text-dark);
  background: var(--off-white);
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 45, 142, 0.09);
}

.cf-field textarea {
  resize: vertical;
  min-height: 96px;
}

.cf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b2d8e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.3rem;
}

.cf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.cf-field.cf-invalid input,
.cf-field.cf-invalid select,
.cf-field.cf-invalid textarea {
  border-color: #c0392b;
}

.cf-field .cf-err {
  font-size: 0.72rem;
  color: #c0392b;
  margin-top: 0.25rem;
  display: none;
}

.cf-field.cf-invalid .cf-err {
  display: block;
}

.cf-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--purple), var(--green));
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.82rem 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 0.3rem;
  transition:
    opacity 0.2s,
    transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.cf-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.cf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cf-submit .cf-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cfSpin 0.7s linear infinite;
  display: none;
}

.cf-submit.cf-loading .cf-spin {
  display: block;
}

.cf-submit.cf-loading .cf-btn-text {
  display: none;
}

@keyframes cfSpin {
  to {
    transform: rotate(360deg);
  }
}

.cf-alert {
  display: none;
  margin-top: 0.9rem;
  padding: 0.65rem 0.95rem;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}

.cf-success {
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
}

.cf-success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--green), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-size: 1.7rem;
  color: #fff;
}

.cf-success h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.cf-success p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .contact-info-col {
    padding: 2.5rem 2rem;
  }

  .contact-form-col {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 575px) {
  .cf-grid-2 {
    grid-template-columns: 1fr;
  }

  .contact-wrap {
    border-radius: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PLANS SLIDER — speed tabs + Swiper carousel
   ═══════════════════════════════════════════════════════════ */

.plans-section {
  position: relative;
  overflow: hidden;
}

/* Speed tier tabs */
.speed-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.75rem;
}

.speed-tab {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 1.5rem;
  border-radius: 30px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.speed-tab:hover {
  border-color: var(--purple-light);
  color: var(--purple);
}

.speed-tab.active {
  background: linear-gradient(135deg, var(--purple), var(--green));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(91, 45, 142, 0.25);
}

/* Slider groups: only the active tier's slider is shown */
.plan-tier-group {
  display: none;
}

.plan-tier-group.active {
  display: block;
}

/* Swiper container */
.plan-swiper {
  padding: 1rem 0.25rem 3.25rem;
  overflow: visible;
}

.plan-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* Reuse existing .plan-card styling, extend for duration cards */
.plan-card {
  width: 100%;
}

.plan-duration-tag {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: rgba(107, 154, 40, 0.1);
  padding: 0.22rem 0.7rem;
  border-radius: 20px;
  margin-bottom: 0.85rem;
}

.plan-gst-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: -0.85rem 0 1rem;
}

.plan-savings {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--purple);
  background: rgba(91, 45, 142, 0.08);
  padding: 0.18rem 0.6rem;
  border-radius: 14px;
  margin-left: 0.5rem;
}

/* Modem deposit mini-table inside card */
.plan-deposit-box {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 1.25rem;
}

.plan-deposit-box .deposit-title {
  font-family: "Poppins", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.deposit-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-dark);
  padding: 0.2rem 0;
}

.deposit-row strong {
  color: var(--purple);
  font-weight: 700;
}

.deposit-row .deposit-nil {
  color: var(--text-muted);
  font-style: italic;
}

/* Swiper navigation arrows */
.plan-swiper-nav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 18px rgba(91, 45, 142, 0.1);
}

.plan-swiper-nav:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.plan-swiper-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.plan-swiper-nav::after {
  display: none;
}

/* remove default swiper icon font */

/* Swiper pagination dots */
.plan-swiper-pagination {
  position: relative;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.plan-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--border);
  opacity: 1;
  border-radius: 50%;
  transition: all 0.25s;
}

.plan-swiper-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--purple), var(--green));
}

/* Nav row wrapping arrows + pagination */
.plan-swiper-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: -0.5rem;
}

/* Footer note under all sliders */
.plans-footer-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

@media (max-width: 767px) {
  .speed-tabs {
    gap: 0.45rem;
  }

  .speed-tab {
    font-size: 0.8rem;
    padding: 0.5rem 1.1rem;
  }

  .plan-swiper {
    padding-bottom: 3rem;
  }
}


/* ══════════════════════════════════════════════════════════
   COVERAGE CHECK POPUP  (added — nothing above changed)
   ══════════════════════════════════════════════════════════ */

#cov-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 8, 35, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  animation: covOverlayIn 0.28s ease forwards;
}
#cov-overlay.cov-hidden { display: none !important; }
@keyframes covOverlayIn { to { opacity: 1; } }

#cov-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 32px 80px rgba(91,45,142,0.28);
  overflow: hidden;
  animation: covModalIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes covModalIn {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.cov-head {
  background: var(--purple);
  padding: 1.75rem 1.75rem 1.5rem;
  position: relative;
  text-align: center;
}
.cov-head-icon {
  width: 54px; height: 54px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.85rem;
  font-size: 1.45rem; color: #fff;
}
.cov-head h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: #fff; margin: 0 0 0.25rem;
}
.cov-head p {
  font-size: 0.82rem; color: rgba(255,255,255,0.82);
  margin: 0; line-height: 1.5;
}
.cov-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background: rgba(255,255,255,0.2);
  border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.cov-close:hover { background: rgba(255,255,255,0.38); }

.cov-body { padding: 1.5rem 1.75rem 1.75rem; }

.cov-field { margin-bottom: 1rem; }
.cov-field label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.32rem;
}
.cov-field label .req { color: #e03; }
.cov-field input {
  width: 100%;
  padding: 0.65rem 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem; color: var(--text-dark);
  background: var(--off-white); outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.cov-field input:focus {
  border-color: var(--purple); background: #fff;
  box-shadow: 0 0 0 3px rgba(91,45,142,0.09);
}
.cov-field.cov-invalid input { border-color: #c0392b; }
.cov-field .cov-err {
  font-size: 0.72rem; color: #c0392b;
  margin-top: 0.25rem; display: none;
}
.cov-field.cov-invalid .cov-err { display: block; }

.cov-submit {
  width: 100%;
  background: var(--purple);
  color: #fff; font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 0.95rem;
  padding: 0.78rem 1rem; border: none;
  border-radius: 10px; cursor: pointer;
  margin-top: 0.3rem;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  transition: opacity 0.2s, transform 0.15s;
}
.cov-submit:hover   { opacity: 0.91; transform: translateY(-1px); }
.cov-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cov-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: covSpin 0.7s linear infinite; display: none;
}
.cov-submit.cov-loading .cov-spin     { display: block; }
.cov-submit.cov-loading .cov-btn-text { display: none; }
@keyframes covSpin { to { transform: rotate(360deg); } }

#cov-alert {
  display: none; margin-top: 0.85rem;
  padding: 0.6rem 0.9rem; border-radius: 8px;
  font-size: 0.83rem; font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

/* Result screen */
#cov-result {
  display: none;
  text-align: center;
  padding: 2.25rem 1.75rem 2rem;
}
.cov-result-icon {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem; font-size: 1.8rem; color: #fff;
}
.cov-icon-yes  { background: linear-gradient(135deg, #4d7019, #6b9a28); }
.cov-icon-no   { background: linear-gradient(135deg, #922b21, #c0392b); }

#cov-result h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 1.1rem; margin-bottom: 0.65rem;
}
.cov-result-detail {
  background: rgba(107,154,40,0.08);
  border: 1px solid rgba(107,154,40,0.2);
  border-radius: 10px; padding: 0.85rem 1rem;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.85rem; color: var(--text-dark);
  text-align: left; line-height: 1.75;
  display: none;
}
.cov-result-detail strong { color: var(--purple); }
#cov-result p.cov-msg {
  font-size: 0.88rem; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 1.5rem;
}
.cov-btn-done {
  background: var(--purple); color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600; font-size: 0.88rem;
  padding: 0.55rem 1.75rem;
  border: none; border-radius: 8px;
  cursor: pointer; transition: background 0.2s;
}
.cov-btn-done:hover { background: var(--purple-dark); }

/* "Check My Address" trigger button in coverage section */
.btn-check-address {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--purple);
  color: #fff; font-family: 'Poppins', sans-serif;
  font-weight: 600; font-size: 0.88rem;
  padding: 0.65rem 1.6rem; border-radius: 9px;
  border: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  margin-top: 1.25rem;
}
.btn-check-address:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }

#map img{
    border: 2px solid var(--purple);
    border-radius: 15px;
}

/* ═══════════════════════════════════════════════════════════
   RELATED LINKS / EXPLORE MORE SECTION
   ═══════════════════════════════════════════════════════════ */
.related-links-section {
  padding: 4rem 0;
  background: var(--light-grey);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.related-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.related-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--text-dark);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}

.related-link-card i {
  color: var(--purple);
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

.related-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(91, 45, 142, 0.14);
  border-color: var(--purple);
  color: var(--purple);
  text-decoration: none;
}

.related-link-card:hover i {
  color: var(--green);
}