:root{
  --c1:#E73D54; /* primary */
  --c2:#035194; /* secondary */
  --c3:#FF3C00; /* accent small */
  --c4:#002744; /* deep navy */
  --c5:#181C2F; /* dark */

  --bg:#F7F9FC;
  --card:#FFFFFF;

  --ink:#0B1220;
  --text:#1E293B;
  --muted:#64748B;

  --border: rgba(2, 6, 23, .10);
  --border2: rgba(2, 6, 23, .14);

  --r:18px;
  --shadow: 0 16px 40px rgba(2, 6, 23, .10);
  --shadow2: 0 10px 22px rgba(2, 6, 23, .08);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(3,81,148,.08), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(231,61,84,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
.container{ width:min(1160px, 95%); margin:0 auto ;}
.mt12{ margin-top:12px }

/* ===== Animations ===== */
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes shine{ 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--border2);
  font-weight:900;
  letter-spacing:.2px;
  color:var(--ink);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition:.25s ease;
  position:relative;
  overflow:hidden;
  will-change:transform;
}
.btn::after{
  content:"";
  position:absolute; top:0; left:0; height:100%; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-120%);
  pointer-events:none;
}
.btn:hover{ transform:translateY(-2px) }
.btn:hover::after{ animation:shine .9s ease }
.btn:active{ transform:translateY(0) }

.btn--primary{
  color:#fff;
  background: var(--c1);
  border-color: transparent;
}
.btn--secondary{
  color:#fff;
  background: var(--c2);
  border-color: transparent;
}
.btn--ghost{
  background:#fff;
  border-color: var(--border2);
}

/* ===== Topbar ===== */
.topbar{
  background:var(--c4);
  border-bottom:1px solid var(--border);
  font-weight:800;
  font-size:12px;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; gap:10px; flex-wrap:wrap;
}
.topbar__left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); }
.topbar__right{
  color:var(--card);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:520px;
}
.pillLink{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  transition:.2s ease;
}
.pillLink:hover{ border-color: rgba(231,61,84,.35) }
.dot{
  width:8px; height:8px; border-radius:99px; background:var(--c3);
  box-shadow:0 0 0 5px rgba(255,60,0,.12);
  display:inline-block;
}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:60;
  background: rgba(247,249,252,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
   gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand__mark{
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: var(--shadow2);
  position:relative; overflow:hidden;
}
.brand__mark::after{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(120px 70px at 30% 30%, rgba(255,255,255,.45), transparent 55%);
}
.brand__name{ font-weight:1000; color:var(--ink); line-height:1.1; letter-spacing:.2px; }
.brand__tag{ display:block; font-size:12px; font-weight:800; color:var(--muted); }

.nav{ display:flex; align-items:center; gap:18px }
.nav__item{ position:relative }
.nav a, .nav__btn{
  font:inherit;
  color: rgba(11,18,32,.78);
  background:none; border:0; cursor:pointer;
  padding:10px 10px;
  border-radius:12px;
  font-weight:900;
  transition:.2s ease;
  position:relative;
}
.nav a:hover, .nav__btn:hover{ color:var(--ink); background: rgba(2,6,23,.04) }
.nav a::after, .nav__btn::after{
  content:""; position:absolute; left:10px; right:10px; bottom:7px; height:2px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  transform: scaleX(0);
  transform-origin:left;
  transition: .25s ease;
  border-radius:99px;
  opacity:.95;
}
.nav a:hover::after, .nav__btn:hover::after{ transform:scaleX(1) }
.chev{ opacity:.85 }

/* Dropdown */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:#fff;
  border:1px solid var(--border2);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
}
.hasDrop:hover .dropdown{ display:block }
.dropdown a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color: rgba(11,18,32,.82);
  font-weight:900;
}
.dropdown a:hover{
  background: rgba(2,6,23,.04);
  border-color: var(--border);
}

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

.hamburger{
  display:none;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border2);
  background:#fff;
  color:var(--ink);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.hamburger span{ width:18px; height:2px; background:var(--ink); display:block; position:relative }
.hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
}
.hamburger span::before{ top:-6px }
.hamburger span::after{ top:6px }

/* Drawer */
.drawer{
  display:none;
  position:fixed; inset:0;
  background: rgba(2,6,23,.35);
  z-index:80;
}
.drawer.is-open{ display:block }
.drawer__panel{
  position:absolute; top:0; left:0; right:0;
  background:#fff;
  border-bottom:1px solid var(--border2);
  padding:18px;
  transform:translateY(-110%);
  transition:.25s ease;
  padding-top: 28px;
}
.drawer.is-open .drawer__panel{ transform:translateY(0) }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.drawer__links{ display:grid; gap:10px; margin-top:14px }
.drawer__links a, .drawerBtn{
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border2);
  font-weight:1000;
  color: rgba(11,18,32,.86);
  cursor:pointer;
}
.drawer__links a:hover, .drawerBtn:hover{ border-color: rgba(231,61,84,.35) }
.drawer__cta{ margin-top:14px; display:grid; gap:10px }
.drawer__sub{
  display:none;
  margin-top:8px;
  padding-left:10px;
  border-left:2px solid rgba(2,6,23,.10);
}
.drawer__sub.is-open{ display:grid; gap:8px }



.banner {
  min-height: 70vh;
  padding: 54px 0 24px;
  position: relative;
  background-image: url("../assets/images/test.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

}



.banner__grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: center;
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(231,61,84,.10);
  border:1px solid rgba(231,61,84,.22);
  color: var(--c1);
  font-weight:1000;
  font-size:12px;
}
.badge i{
  width:10px; height:10px; border-radius:99px;
  background: var(--c1);
  box-shadow:0 0 0 4px rgba(231,61,84,.12);
  display:inline-block;
}

h1{
  margin:14px 0 12px;
  color: var(--ink);
  font-size:clamp(34px,4vw,56px);
  line-height:1.03;
  letter-spacing:-.6px;
  text-align: justify;
}
.lead{
  margin:0 0 16px;
  color: var(--muted);
  line-height:1.75;
  font-weight:800;
  max-width:62ch;
  text-align: justify;
}
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px }

.bannerCard{
  background:#fff;
  border-radius:24px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.bannerCard__img{
  height:380px;
  background:
    /* linear-gradient(180deg, rgba(11,18,32,.06), rgba(11,18,32,.16)), */
    url("../assets/images/home.jpg") center/cover no-repeat;
}
.bannerCard__cap{
  padding:16px 16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.mini{ font-weight:1000; color: rgba(11,18,32,.86); font-size:13px; }
.mini span{ display:block; color: var(--muted); font-weight:800; margin-top:4px }

/* ===== Section headings ===== */
.section{ padding:70px 0 }
.head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 10px;
  font-weight:1000;
  color: rgba(11,18,32,.78);
  letter-spacing:.2px;
}
.kicker::before{
  content:"";
  width:18px; height:6px; border-radius:99px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: 0 10px 30px rgba(231,61,84,.10);
}
h2{
  margin:0; color: var(--ink);
  font-size: clamp(26px,2.4vw,36px);
  line-height:1.15;
  letter-spacing:-.3px;
}
.sub{
  margin:8px 0 0;
  color: var(--muted);
  font-weight:800;
  line-height:1.75;
  max-width:72ch;
  font-size:14px;
}

/* ===== Cards ===== */
.card{
  background:#fff;
  border:1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}
.card:hover{ transform: translateY(-3px); border-color: rgba(231,61,84,.26) }
.icon{
  width:44px; height:44px; border-radius:16px;
  border:1px solid var(--border);
  background: rgba(2,6,23,.03);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow2);
  margin-bottom:12px;
}
.icon::after{
  content:"";
  width:12px; height:12px; border-radius:99px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 6px rgba(231,61,84,.08);
  display:block;
}
.card h3{ margin:8px 0 8px; color: var(--ink); font-size:16px; font-weight:1000 }
.card p{ margin:0; color: var(--muted); line-height:1.7; font-weight:800; font-size:13px }

/* Reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:.7s ease }
.reveal.is-in{ opacity:1; transform:none }

/* ===== Trust sticky ===== */
.stickyWrap{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:16px;
  align-items:start;
}
.stickyMedia{
  position:sticky;
  top:110px;
  height:420px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border2);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(11,18,32,.06), rgba(11,18,32,.22)),
    url("https://picsum.photos/1200/900?random=21") center/cover no-repeat;
}
.trustGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}


/* ===== Forms ===== */
form{ display:grid; gap:12px; padding:18px }
.formGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
label{ font-weight:900; color: rgba(11,18,32,.78); font-size:12px }
input,select,textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:#fff;
  color: var(--ink);
  outline:none;
  font-weight:800;
  transition:.2s ease;
}
textarea{ min-height:120px; resize:vertical }
input:focus,select:focus,textarea:focus{
  border-color: rgba(231,61,84,.40);
  box-shadow:0 0 0 6px rgba(231,61,84,.10);
}
.formActions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }


/* ===== Responsive ===== */
@media (max-width: 980px){
  .nav{ display:none }
  .hamburger{ display:flex }
  .banner__grid{ grid-template-columns:1fr }
  .stickyWrap{ grid-template-columns:1fr }
  .stickyMedia{ top:90px; height:340px }
  .grid6{ grid-template-columns:repeat(2,1fr) }
  .trustGrid{ grid-template-columns:1fr 1fr }
  .aboutGrid{ grid-template-columns:1fr }
  .aboutImg{ height:320px }
  .testGrid{ grid-template-columns:1fr }
  .compare{ grid-template-columns:1fr }
  .footerGrid{ grid-template-columns:1fr }
  .formGrid{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .trustGrid{ grid-template-columns:1fr }
  .grid6{ grid-template-columns:1fr }
  .topbar__right{ display: none; }
  .header__cta_btn{display: none;}
}
/* TRUST SECTION - fixed background like banner */
.trustSec--bg{
  position: relative;
  min-height: 60vh;
  background-image: url("../assets/images/black1.jpg"); /* your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* sticky-like */
  padding: 80px 0; /* looks premium */
}

/* overlay so text is readable */
.trustSec--bg::before{
  content:"";
  position:absolute;
  inset:0;
  /* background: rgba(255,255,255,.78); light overlay */
  backdrop-filter: blur(2px);
}

/* keep content above overlay */
.trustSec--bg > .container{
  position: relative;
  z-index: 1;
}

/* Trust grid - 4 cards */
.trustSec .trustGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* cards look good on bg */
.trustSec .card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}

/* responsive */
@media (max-width: 980px){
  .trustSec .trustGrid{ grid-template-columns: 1fr; }
  .trustSec--bg{ background-attachment: scroll; } /* better on mobile */
}

/* =========================================

========================================= */

/* Attach this class to the section:
   <section class="section servicesSec servicesSec--bg" id="services"> ... */
.servicesSec{
  position: relative;
}

/* 1) Sticky / fixed background image */
.servicesSec--bg{
  min-height: 70vh;
  padding: 90px 0;                    /* premium spacing */
  background-image: url("../assets/images/service.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;       /* fixed bg effect */
}

/* 2) Light overlay for readability */
.servicesSec--bg::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter: blur(2px);
}

/* 3) Keep content above overlay */
.servicesSec--bg > .container{
  position: relative;
  z-index: 1;
}

/* 4) Optional: premium “head” panel look (remove if you want plain) */
.servicesSec--bg .head{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
}

/* 5) Grid layout */
.servicesSec .grid6{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* 6) Card base */
.servicesSec .serviceCard{
  position: relative;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  transition: .35s ease;
  overflow: hidden;
}

/* 7) Top accent line */
.servicesSec .serviceCard::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, #E73D54, #035194);
  transition: .25s ease;
}

/* 8) Glow blob (shows on hover) */
.servicesSec .serviceCard::after{
  content:"";
  position:absolute;
  width: 190px;
  height: 190px;
  right: -80px;
  top: -80px;
  background: radial-gradient(circle, rgba(231,61,84,.22), transparent 60%);
  opacity: 0;
  transform: scale(.9);
  transition: .35s ease;
  pointer-events:none;
}

/* 9) Hover effects */
.servicesSec .serviceCard:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.28);
}
.servicesSec .serviceCard:hover::after{
  opacity: 1;
  transform: scale(1);
}

/* 10) Top row (icon + tag) */
.servicesSec .serviceCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}

/* 11) Icon block */
.servicesSec .serviceIcon{
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E73D54, #035194);
  box-shadow: 0 12px 30px rgba(231,61,84,.16);
  transition: .4s ease;
  position: relative;
}

/* Little inner dot for “premium” feel */
.servicesSec .serviceIcon::after{
  content:"";
  position:absolute;
  inset:auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px rgba(255,255,255,.35);
}

/* icon motion on hover */
.servicesSec .serviceCard:hover .serviceIcon{
  transform: rotate(10deg) translateY(-2px) scale(1.02);
}

/* 12) Tag pill */
.servicesSec .serviceTag{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(3,81,148,.08);
  color: #035194;
  border: 1px solid rgba(3,81,148,.14);
}

/* 13) Title & text */
.servicesSec .serviceCard h3{
  font-size: 18px;
  font-weight: 1000;
  color: #0B1220;
  margin: 6px 0 10px;
}
.servicesSec .serviceCard p{
  font-size: 14px;
  font-weight: 750;
  color: #64748B;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* 14) Link */
.servicesSec .serviceLink{
  font-weight: 1000;
  font-size: 14px;
  color: #E73D54;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .25s ease;
  position: relative;
}

/* underline motion on hover */
.servicesSec .serviceLink::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, #E73D54, #035194);
  transform: scaleX(0);
  transform-origin: left;
  transition: .25s ease;
}
.servicesSec .serviceLink:hover{
  color: #035194;
  gap: 10px;
}
.servicesSec .serviceLink:hover::after{
  transform: scaleX(1);
}

/* 15) Responsive + mobile background fix */
@media (max-width: 980px){
  .servicesSec .grid6{ grid-template-columns: repeat(2, 1fr); }
  .servicesSec--bg{ background-attachment: scroll; } /* better on mobile */
}
@media (max-width: 560px){
  .servicesSec .grid6{ grid-template-columns: 1fr; }
}

/* =========================================
   BENEFITS SECTION - Premium Upgrade
========================================= */

.benefits{
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

/* Card Base */
.benefitCard{
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 28px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  transition: .35s ease;
  position: relative;
  overflow: hidden;
}

/* Left Accent Bar */
.benefitCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background: linear-gradient(180deg, #E73D54, #035194);
  border-radius: 24px 0 0 24px;
}

/* Hover effect */
.benefitCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.25);
}

/* Number Container */
.benefitLeft{
  position: relative;
}

.benefitNumber{
  font-size: 42px;
  font-weight: 1000;
  background: linear-gradient(135deg, #E73D54, #035194);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* Big Soft Background Circle */
.benefitNumber::after{
  content:"";
  position:absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(231,61,84,.08);
  left: -20px;
  top: -15px;
  z-index: -1;
}

/* Content */
.benefitContent h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 1000;
  color: #0B1220;
}

.benefitContent p{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #64748B;
  line-height: 1.7;
  max-width: 800px;
}

/* Responsive */
@media (max-width: 768px){
  .benefitCard{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .benefitNumber{
    font-size: 34px;
  }

  .benefitNumber::after{
    width: 70px;
    height: 70px;
    left: -15px;
    top: -10px;
  }
}
/* =========================================
   COMPARE SECTION (BG + PREMIUM CARDS)
========================================= */

/* section background */
.compareSec{
  position: relative;
}

/* add fixed bg like trust/services */
.compareSec--bg{
  min-height: 70vh;
  padding: 90px 0;
  background-image: url("../assets/images/comp.jpg"); /* change image if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* overlay */
.compareSec--bg::before{
  content:"";
  position:absolute;
  inset:0;
  /* background: rgba(255,255,255,.84); */
  backdrop-filter: blur(2px);
}

/* content above overlay */
.compareSec--bg > .container{
  position: relative;
  z-index: 1;
}

/* optional premium head panel (same style as services) */
.compareSec--bg .head{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
}

/* grid layout */
.compareGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

/* card base */
.compareCard{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  transition: .35s ease;
  position: relative;
  overflow: hidden;
}

/* top gradient bar */
.compareCard::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:5px;
  background: linear-gradient(90deg, #E73D54, #035194);
}

/* glow blob */
.compareCard::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  right: -100px;
  top: -110px;
  opacity: .0;
  transform: scale(.92);
  transition: .35s ease;
  pointer-events:none;
  background: radial-gradient(circle, rgba(231,61,84,.22), transparent 60%);
}

/* hover */
.compareCard:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.26);
}
.compareCard:hover::after{
  opacity: 1;
  transform: scale(1);
}

/* good/bad accents */
.compareCard--good{
  border-color: rgba(231,61,84,.18);
}
.compareCard--good::after{
  background: radial-gradient(circle, rgba(231,61,84,.22), transparent 60%);
}
.compareCard--bad{
  border-color: rgba(3,81,148,.18);
}
.compareCard--bad::after{
  background: radial-gradient(circle, rgba(3,81,148,.20), transparent 60%);
}
.compareCard--bad::before{
  background: linear-gradient(90deg, #035194, #E73D54);
}

/* top row */
.compareTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

/* badge */
.compareBadge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(2,6,23,.03);
  color: rgba(11,18,32,.86);
}

/* dot inside badge */
.compareBadge .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#E73D54;
  box-shadow: 0 0 0 5px rgba(231,61,84,.10);
}

/* badge variants */
.compareBadge--good{
  border-color: rgba(231,61,84,.18);
  background: rgba(231,61,84,.08);
  color: #8c1e2f;
}
.compareBadge--good .dot{
  background:#E73D54;
}
.compareBadge--bad{
  border-color: rgba(3,81,148,.18);
  background: rgba(3,81,148,.08);
  color: #035194;
}
.compareBadge--bad .dot{
  background:#035194;
  box-shadow: 0 0 0 5px rgba(3,81,148,.10);
}

/* icon blob (top right) */
.compareIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(231,61,84,.18), rgba(3,81,148,.14));
  border: 1px solid rgba(2,6,23,.10);
  position: relative;
  transition: .35s ease;
}
.compareIcon::after{
  content:"";
  position:absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background: linear-gradient(135deg, #E73D54, #035194);
  box-shadow: 0 0 0 6px rgba(231,61,84,.10);
}
.compareIcon--alt::after{
  background: linear-gradient(135deg, #035194, #E73D54);
  box-shadow: 0 0 0 6px rgba(3,81,148,.10);
}
.compareCard:hover .compareIcon{
  transform: rotate(10deg) translateY(-2px);
}

/* title + sub */
.compareTitle{
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 1000;
  color: #0B1220;
}
.compareSub{
  margin: 0 0 16px;
  color: #64748B;
  font-weight: 700;
  line-height: 1.7;
  font-size: 14px;
}

/* list */
.compareList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.compareList li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(2,6,23,.02);
  color: rgba(11,18,32,.82);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.55;
}

/* check icons via pseudo */
.compareList li::before{
  content:"✓";
  font-weight: 1000;
  color: #E73D54;
  margin-top: 1px;
}
.compareCard--bad .compareList li::before{
  content:"✕";
  color:#035194;
}

/* CTA link */
.compareCta{
  display:inline-flex;
  margin-top: 16px;
  font-weight: 1000;
  color: #E73D54;
  gap: 6px;
  align-items:center;
  transition:.25s ease;
  position: relative;
}
.compareCta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, #E73D54, #035194);
  transform: scaleX(0);
  transform-origin: left;
  transition: .25s ease;
}
.compareCta:hover{
  color:#035194;
  gap: 10px;
}
.compareCta:hover::after{
  transform: scaleX(1);
}

/* responsive */
@media (max-width: 980px){
  .compareGrid{ grid-template-columns: 1fr; }
  .compareSec--bg{ background-attachment: scroll; } /* mobile smooth */
}

/* =========================================
   ABOUT SECTION - Premium Light UI
========================================= */

.aboutSec{
  position: relative;
}

/* layout */
.aboutWrap{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

/* Left media card */
.aboutMedia{
  border-radius: 26px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  overflow:hidden;
  position: relative;
  transition: .35s ease;
}
.aboutMedia:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.22);
}

/* image */
.aboutMedia__img{
  height: 460px;
  background:
    linear-gradient(180deg, rgba(11,18,32,.06), rgba(11,18,32,.18)),
    url("https://picsum.photos/1200/900?random=51") center/cover no-repeat;
  transform: scale(1.01);
  transition: .55s ease;
}
.aboutMedia:hover .aboutMedia__img{
  transform: scale(1.06);
}

/* badge on image */
.aboutMedia__badge{
  position:absolute;
  left: 16px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}
.aboutMedia__badge b{
  display:block;
  color:#0B1220;
  font-weight:1000;
  font-size: 13px;
}
.aboutMedia__badge span{
  display:block;
  color:#64748B;
  font-weight:800;
  font-size: 12px;
  margin-top: 2px;
}

/* small dot used in pills */
.abDot{
  width:10px;height:10px;border-radius:999px;
  background:#E73D54;
  box-shadow: 0 0 0 5px rgba(231,61,84,.10);
  display:inline-block;
}

/* Right content panel */
.aboutPanel{
  border-radius: 26px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 26px;
  position: relative;
  overflow:hidden;
  transition:.35s ease;
}

/* soft glow */
.aboutPanel::after{
  content:"";
  position:absolute;
  width:240px;height:240px;
  right:-120px; top:-120px;
  background: radial-gradient(circle, rgba(3,81,148,.14), transparent 60%);
  opacity: .0;
  transform: scale(.92);
  transition: .35s ease;
  pointer-events:none;
}
.aboutPanel:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(2,6,23,.14);
  border-color: rgba(3,81,148,.20);
}
.aboutPanel:hover::after{
  opacity: 1;
  transform: scale(1);
}
.aboutPanel > *{ position:relative; z-index:1; }

/* pill */
.aboutPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(3,81,148,.08);
  border: 1px solid rgba(3,81,148,.14);
  color:#035194;
  font-weight:1000;
  font-size: 12px;
}

.aboutH3{
  margin: 12px 0 10px;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -.3px;
  color:#0B1220;
  font-weight: 1000;
}

.aboutText{
  margin: 0 0 18px;
  color:#64748B;
  font-weight: 700;
  line-height: 1.75;
}

/* points list */
.aboutPoints{
  display:grid;
  gap: 12px;
  margin: 10px 0 18px;
}

.aboutPoint{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(2,6,23,.02);
  transition:.25s ease;
}
.aboutPoint:hover{
  border-color: rgba(231,61,84,.20);
  background: rgba(231,61,84,.05);
}

.ptIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  position: relative;
  flex: 0 0 44px;
}
.ptIcon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E73D54, #035194);
  box-shadow: 0 0 0 6px rgba(231,61,84,.10);
}

.aboutPoint b{
  display:block;
  color:#0B1220;
  font-weight: 1000;
  margin-bottom: 4px;
}
.aboutPoint span{
  display:block;
  color:#64748B;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.6;
}

/* stats */
.aboutStats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 6px 0 18px;
}
.statBox{
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.statBox b{
  display:block;
  font-weight: 1000;
  color:#0B1220;
  margin-bottom: 4px;
}
.statBox span{
  display:block;
  font-weight: 800;
  color:#64748B;
  font-size: 12px;
}

.aboutActions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 980px){
  .aboutWrap{ grid-template-columns: 1fr; }
  .aboutMedia__img{ height: 340px; }
  .aboutH3{ font-size: 24px; }
  .aboutStats{ grid-template-columns: 1fr; }
}

/* =========================================
   ABOUT SECTION - Premium Light UI
========================================= */

.aboutSec{
  position: relative;
}

/* layout */
.aboutWrap{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

/* Left media card */
.aboutMedia{
  border-radius: 26px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  overflow:hidden;
  position: relative;
  transition: .35s ease;
}
.aboutMedia:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.22);
}

/* image */
.aboutMedia__img{
  height: 460px;
  background:
    linear-gradient(180deg, rgba(11,18,32,.06), rgba(11,18,32,.18)),
    url("../assets/images/a1.jpg") center/cover no-repeat;
  transform: scale(1.01);
  transition: .55s ease;
}
.aboutMedia:hover .aboutMedia__img{
  transform: scale(1.06);
}

/* badge on image */
.aboutMedia__badge{
  position:absolute;
  left: 16px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}
.aboutMedia__badge b{
  display:block;
  color:#0B1220;
  font-weight:1000;
  font-size: 13px;
}
.aboutMedia__badge span{
  display:block;
  color:#64748B;
  font-weight:800;
  font-size: 12px;
  margin-top: 2px;
}

/* small dot used in pills */
.abDot{
  width:10px;height:10px;border-radius:999px;
  background:#E73D54;
  box-shadow: 0 0 0 5px rgba(231,61,84,.10);
  display:inline-block;
}

/* Right content panel */
.aboutPanel{
  border-radius: 26px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 26px;
  position: relative;
  overflow:hidden;
  transition:.35s ease;
}

/* soft glow */
.aboutPanel::after{
  content:"";
  position:absolute;
  width:240px;height:240px;
  right:-120px; top:-120px;
  background: radial-gradient(circle, rgba(3,81,148,.14), transparent 60%);
  opacity: .0;
  transform: scale(.92);
  transition: .35s ease;
  pointer-events:none;
}
.aboutPanel:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(2,6,23,.14);
  border-color: rgba(3,81,148,.20);
}
.aboutPanel:hover::after{
  opacity: 1;
  transform: scale(1);
}
.aboutPanel > *{ position:relative; z-index:1; }

/* pill */
.aboutPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(3,81,148,.08);
  border: 1px solid rgba(3,81,148,.14);
  color:#035194;
  font-weight:1000;
  font-size: 12px;
}

.aboutH3{
  margin: 12px 0 10px;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -.3px;
  color:#0B1220;
  font-weight: 1000;
}

.aboutText{
  margin: 0 0 18px;
  color:#64748B;
  font-weight: 700;
  line-height: 1.75;
}

/* points list */
.aboutPoints{
  display:grid;
  gap: 12px;
  margin: 10px 0 18px;
}

.aboutPoint{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(2,6,23,.02);
  transition:.25s ease;
}
.aboutPoint:hover{
  border-color: rgba(231,61,84,.20);
  background: rgba(231,61,84,.05);
}

.ptIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  position: relative;
  flex: 0 0 44px;
}
.ptIcon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E73D54, #035194);
  box-shadow: 0 0 0 6px rgba(231,61,84,.10);
}

.aboutPoint b{
  display:block;
  color:#0B1220;
  font-weight: 1000;
  margin-bottom: 4px;
}
.aboutPoint span{
  display:block;
  color:#64748B;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.6;
}

/* stats */
.aboutStats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 6px 0 18px;
}
.statBox{
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.statBox b{
  display:block;
  font-weight: 1000;
  color:#0B1220;
  margin-bottom: 4px;
}
.statBox span{
  display:block;
  font-weight: 800;
  color:#64748B;
  font-size: 12px;
}

.aboutActions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 980px){
  .aboutWrap{ grid-template-columns: 1fr; }
  .aboutMedia__img{ height: 340px; }
  .aboutH3{ font-size: 24px; }
  .aboutStats{ grid-template-columns: 1fr; }
}

/* =========================================
   TESTIMONIALS (BG + PREMIUM CARDS)
========================================= */

.testiSec{
  position: relative;
}

/* Fixed background like trust/services */
.testiSec--bg{
  min-height: 70vh;
  padding: 90px 0;
  background-image: url("../assets/images/rv.jpg"); /* change file if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* overlay */
.testiSec--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(39, 39, 39, 0.84);
  backdrop-filter: blur(2px);
}

/* content above overlay */
.testiSec--bg > .container{
  position: relative;
  z-index: 1;
}

/* optional head panel */
.testiSec--bg .head{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
}

/* grid */
.testiGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* card base */
.testiCard{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  transition: .35s ease;
  position: relative;
  overflow: hidden;
}

/* top accent bar */
.testiCard::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background: linear-gradient(90deg, #E73D54, #035194);
}

/* glow blob */
.testiCard::after{
  content:"";
  position:absolute;
  width: 240px;
  height: 240px;
  right: -120px;
  top: -120px;
  opacity: 0;
  transform: scale(.92);
  transition: .35s ease;
  pointer-events:none;
  background: radial-gradient(circle, rgba(231,61,84,.20), transparent 60%);
}

/* hover - lift + slight tilt */
.testiCard:hover{
  transform: translateY(-8px) rotate(-.2deg);
  box-shadow: 0 32px 90px rgba(2,6,23,.14);
  border-color: rgba(231,61,84,.26);
}
.testiCard:hover::after{
  opacity: 1;
  transform: scale(1);
}

/* top row */
.testiTop{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}

/* avatar */
.avatar{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  background:
    linear-gradient(135deg, rgba(231,61,84,.25), rgba(3,81,148,.18));
  flex: 0 0 46px;
  position: relative;
}
.avatar::after{
  content:"";
  position:absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: linear-gradient(135deg, #E73D54, #035194);
  box-shadow: 0 0 0 6px rgba(231,61,84,.10);
}
.avatar--b{ background: linear-gradient(135deg, rgba(3,81,148,.22), rgba(231,61,84,.16)); }
.avatar--c{ background: linear-gradient(135deg, rgba(255,60,0,.18), rgba(3,81,148,.16)); }

/* name */
.whoWrap b{
  display:block;
  color:#0B1220;
  font-weight: 1000;
  line-height: 1.1;
}
.whoWrap span{
  display:block;
  color:#64748B;
  font-weight: 800;
  font-size: 12px;
  margin-top: 3px;
}

/* stars */
.stars{
  margin-left:auto;
  font-weight: 1000;
  color: #FF3C00;
  letter-spacing: 1px;
  font-size: 13px;
  opacity: .95;
}

/* title + text */
.testiTitle{
  margin: 10px 0 10px;
  font-size: 18px;
  font-weight: 1000;
  color:#0B1220;
  line-height: 1.25;
}
.testiText{
  margin: 0 0 16px;
  color:#64748B;
  font-weight: 700;
  line-height: 1.75;
  font-size: 14px;
}

/* bottom badges */
.testiBottom{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.badgeMini{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(231,61,84,.08);
  border: 1px solid rgba(231,61,84,.16);
  color: #8c1e2f;
  font-weight: 900;
  font-size: 12px;
}
.badgeMini .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #E73D54;
  box-shadow: 0 0 0 5px rgba(231,61,84,.10);
}

.badgeMini--blue{
  background: rgba(3,81,148,.08);
  border-color: rgba(3,81,148,.16);
  color: #035194;
}
.badgeMini--blue .dot{
  background: #035194;
  box-shadow: 0 0 0 5px rgba(3,81,148,.10);
}

/* responsive */
@media (max-width: 980px){
  .testiGrid{ grid-template-columns: 1fr; }
  .testiSec--bg{ background-attachment: scroll; } /* mobile smooth */
}

/* =========================================
   FAQ SECTION - Premium UI
========================================= */

.faqWrap{
  display:grid;
  gap: 14px;
  margin-top: 18px;
}

/* Item card */
.faqItem{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  overflow:hidden;
  transition: .35s ease;
  position: relative;
}

/* top gradient bar */
.faqItem::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, #E73D54, #035194);
  opacity: .85;
}

/* Hover */
.faqItem:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 80px rgba(2,6,23,.12);
  border-color: rgba(231,61,84,.22);
}

/* summary row */
.faqItem summary{
  list-style:none;
  cursor:pointer;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  user-select:none;
}

.faqItem summary::-webkit-details-marker{ display:none; }

/* question */
.faqQ{
  font-weight: 1000;
  font-size: 16px;
  color: #0B1220;
  line-height: 1.25;
}

/* plus/minus icon */
.faqIcon{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(2,6,23,.03);
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
  position: relative;
  flex: 0 0 40px;
  transition: .3s ease;
}

/* + sign */
.faqIcon::before,
.faqIcon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2px;
  background: #0B1220;
  transform: translate(-50%,-50%);
  border-radius: 99px;
  transition: .3s ease;
}
.faqIcon::after{
  width:2px;
  height:16px;
}

/* open state => minus */
.faqItem[open] .faqIcon{
  background: rgba(231,61,84,.08);
  border-color: rgba(231,61,84,.18);
  transform: rotate(90deg);
}
.faqItem[open] .faqIcon::after{
  opacity:0; /* removes vertical line => minus */
}

/* body container for smooth animation */
.faqBody{
  padding: 0 18px 18px;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faqBody > *{
  overflow:hidden;
}

/* open => expand */
.faqItem[open] .faqBody{
  grid-template-rows: 1fr;
}

/* text */
.faqBody p{
  margin: 0;
  padding-top: 10px;
  color: #64748B;
  font-weight: 700;
  line-height: 1.75;
  font-size: 14px;
  border-top: 1px solid rgba(2,6,23,.08);
}


/* =========================================
   FOOTER - Premium Light UI
========================================= */

.footer--pro{
  background: #ffffff;
  border-top: 1px solid rgba(2,6,23,.10);
  padding: 34px 0 26px;
  position: relative;
  overflow: hidden;
}

/* soft background glow */
.footer--pro::before{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  left: -180px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(231,61,84,.12), transparent 60%);
  pointer-events:none;
}
.footer--pro::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  right: -200px;
  bottom: -240px;
  background: radial-gradient(circle, rgba(3,81,148,.12), transparent 60%);
  pointer-events:none;
}

/* top row */
.footerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  /* padding: 18px; */
  border-radius: 22px;
  background: rgba(247,249,252,.85);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  position: relative;
  z-index: 1;
}

/* brand */
.footerBrand{
  display:flex;
  align-items:center;
  gap: 12px;
  max-width: 720px;
}

.footerMark{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E73D54, #035194);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
  position: relative;
  overflow: hidden;
}
.footerMark::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(120px 80px at 30% 30%, rgba(255,255,255,.45), transparent 55%);
}

.footerName{
  display:block;
  font-size: 16px;
  font-weight: 1000;
  color: #0B1220;
  line-height: 1.1;
}
.footerTag{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #64748B;
  line-height: 1.5;
}

/* actions */
.footerActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* footer buttons */
.fBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 1000;
  border: 1px solid rgba(2,6,23,.12);
  background: #fff;
  color: #0B1220;
  transition: .25s ease;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.fBtn:hover{ transform: translateY(-2px); }

.fBtn--primary{
  background: #E73D54;
  color: #fff;
  border-color: transparent;
}
.fBtn--ghost{
  background: rgba(255,255,255,.80);
}

/* grid */
.footerGrid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

/* columns */
.footerCol{
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 16px 40px rgba(2,6,23,.06);
  padding: 18px;
  transition: .25s ease;
}
.footerCol:hover{
  transform: translateY(-3px);
  border-color: rgba(231,61,84,.18);
}

.footerCol h4{
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 1000;
  color: #0B1220;
}

.footerText{
  margin: 0 0 14px;
  color: #64748B;
  font-weight: 700;
  line-height: 1.75;
  font-size: 13px;
}

.footnote{
  margin: 0;
  color: #64748B;
  font-weight: 800;
  font-size: 12px;
}

/* links */
.footerLinks{
  display:grid;
  gap: 10px;
}
.footerLinks a{
  color: rgba(11,18,32,.80);
  font-weight: 900;
  transition: .2s ease;
  position: relative;
  width: fit-content;
  padding-bottom: 2px;
}
.footerLinks a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, #E73D54, #035194);
  transform: scaleX(0);
  transform-origin:left;
  transition: .25s ease;
  border-radius: 99px;
}
.footerLinks a:hover{
  color: #0B1220;
}
.footerLinks a:hover::after{
  transform: scaleX(1);
}

/* responsive */
@media (max-width: 980px){
  .footerTop{ flex-direction: column; align-items: flex-start; }
  .footerGrid{ grid-template-columns: 1fr; }
}

.ht-title--bar{
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.ht-title--bar::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:86px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}


/* =========================
   ACTIVE NAV LINK (Desktop)
========================= */
.nav a.is-active,
.nav a[aria-current="page"]{
  color: #0B1220;
  font-weight: 1000;
  position: relative;
}

/* underline gradient */
.nav a.is-active::after,
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #E73D54, #035194);
  transform: scaleX(1);
  transform-origin:left;
}

/* optional active pill background */
.nav a.is-active,
.nav a[aria-current="page"]{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(231,61,84,.08);
  border: 1px solid rgba(231,61,84,.18);
}

/* =========================
   ACTIVE LINK (Mobile Drawer)
========================= */
.drawer__links .drawerLink.is-active,
.drawer__links .drawerLink[aria-current="page"]{
  background: rgba(231,61,84,.10);
  border: 1px solid rgba(231,61,84,.18);
  color:#0B1220;
  font-weight: 1000;
  border-radius: 16px;
}
	.floatWA{
  position:fixed;
   bottom:18px;
  width:56px; height:56px;
  display:grid; place-items:center;
  z-index:10000;
  transition:.25s;
  float: right;
}
.floatWA:hover{transform:translateY(-2px); background: rgba(147,187,187,.28)}