/* ==========================================================================
   Volt — Recharge Application Website
   Core stylesheet
   ========================================================================== */

:root{
  --primary:#0A66FF;
  --secondary:#1E88E5;
  --accent:#38BDF8;
  --bg:#F5F9FF;
  --card:#FFFFFF;
  --text:#1E293B;
  --text-soft:#5B6B82;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 4px 14px rgba(10,102,255,0.08);
  --shadow-md:0 12px 32px rgba(10,102,255,0.14);
  --shadow-lg:0 24px 60px rgba(10,102,255,0.18);
  --gradient-primary:linear-gradient(135deg,var(--primary),var(--accent));
  --ease:cubic-bezier(.22,.9,.32,1.1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; }

.container{ width:min(1200px,90%); margin-inline:auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border-radius:100px;
  font-weight:600;
  font-size:0.96rem;
  position:relative;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--gradient-primary);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-outline{
  background:transparent;
  color:var(--primary);
  border:1.5px solid rgba(10,102,255,0.3);
}
.btn-outline:hover{ background:rgba(10,102,255,0.06); border-color:var(--primary); transform:translateY(-2px); }
.btn-ghost{
  background:transparent; color:var(--text); font-weight:500; padding:10px 18px;
}
.btn-ghost:hover{ color:var(--primary); }
.btn-dark{
  background:#0F1B33; color:#fff;
}
.btn-dark:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,0.25); }
.btn-lg{ padding:16px 34px; font-size:1.02rem; }
.btn-block{ width:100%; }

.ripple{ isolation:isolate; }
.ripple-circle{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.55);
  transform:scale(0); animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
.btn-outline .ripple-circle,.btn-ghost .ripple-circle{ background:rgba(10,102,255,0.18); }
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* ===== Eyebrow / section head ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--primary);
  background:rgba(10,102,255,0.08);
  padding:7px 16px; border-radius:100px;
  margin-bottom:16px;
}
.section-head{ text-align:center; max-width:600px; margin:0 auto 56px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; color : white; }

/* ===== Loader ===== */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .5s ease, visibility .5s ease;
}
.loader.hidden{ opacity:0; visibility:hidden; }
.loader-bolt{ animation:boltPulse 1.1s ease-in-out infinite; }
.loader-bolt svg path{ fill:rgba(10,102,255,0.12); }
@keyframes boltPulse{ 0%,100%{ transform:scale(1); opacity:0.6; } 50%{ transform:scale(1.15); opacity:1; } }
.loader-text{ font-weight:700; letter-spacing:0.08em; color:var(--primary); font-size:0.9rem; text-transform:uppercase; }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,120%);
  background:#0F1B33; color:#fff;
  padding:14px 24px; border-radius:100px;
  display:flex; align-items:center; gap:10px;
  font-size:0.9rem; font-weight:500;
  z-index:3000;
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  transition:transform .4s var(--ease);
}
.toast.show{ transform:translate(-50%,0); }
.toast i{ color:#4ADE80; }

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
}
.navbar.scrolled{
  padding: 10px 0;
  background: rgb(3 19 42 / 85%);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(10, 102, 255, 0.08);
  border-bottom: 1px solid #ffffff6b;
}
.nav-inner{
  width:min(1200px,90%); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.25rem; color: white; }
.logo-mark{
  width:38px; height:38px; border-radius:11px;
  background:var(--gradient-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-link{
  font-weight:500; font-size:0.94rem; color: white;
  position:relative; padding:6px 0; transition:color .2s;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--gradient-primary); border-radius:2px; transition:width .25s var(--ease);
}
.nav-link:hover,.nav-link.active{ color: white; }
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-auth{ display:flex; align-items:center; gap:10px; margin-left:10px; }

.hamburger{ display:none; flex-direction:column; gap:5px; width:26px; }
.hamburger span{ height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero{
  position:relative; padding:150px 0 100px; overflow:hidden;
  background:linear-gradient(180deg, #020b1a 0%, #152031 60%);
}
.hero-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; z-index:0; }
.blob-1{ width:420px; height:420px; background: #084d66; top:-120px; right:-100px; animation:float1 9s ease-in-out infinite; }
.blob-2{ width:300px; height:300px; background: #084d66; bottom:-80px; left:-60px; animation:float2 11s ease-in-out infinite; }
.blob-3{ width:200px; height:200px; background:var(--secondary); top:40%; left:60%; animation:float1 7s ease-in-out infinite reverse; }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-20px,30px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(30px,-20px);} }

.hero-inner{
  width:min(1200px,90%); margin-inline:auto;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  position:relative; z-index:1;
}
.hero-copy h1{
  font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:800; line-height:1.12; margin-bottom:20px; color: white;
}
.type-target{ color:var(--primary); border-right:3px solid var(--primary); padding-right:4px; }
.hero-sub{ font-size:1.05rem; color: white; max-width:520px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px; }
.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:500; color: white; }
.trust-item i{ color:var(--primary); }

.hero-art{ display:flex; justify-content:center; }
.pulse-card{
  width:100%; max-width:340px; aspect-ratio:340/420;
  background:#ffffff00; border-radius:28px;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
  animation:cardFloat 5s ease-in-out infinite;
}
@keyframes cardFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.pulse-svg{ width:100%; height:100%; }
.ring{ fill:none; stroke:var(--primary); stroke-width:2; opacity:0; transform-origin:170px 190px; }
.ring-1{ animation:ringPulse 2.4s ease-out infinite; }
.ring-2{ animation:ringPulse 2.4s ease-out infinite 0.8s; }
.ring-3{ animation:ringPulse 2.4s ease-out infinite 1.6s; }
@keyframes ringPulse{ 0%{ transform:scale(0.7); opacity:0.5; } 100%{ transform:scale(1.6); opacity:0; } }
.bolt{ animation:boltGlow 2s ease-in-out infinite; }
@keyframes boltGlow{ 0%,100%{ opacity:1;} 50%{ opacity:0.55;} }
.coin{ animation:coinBob 3s ease-in-out infinite; }
.coin-b{ animation-delay:0.6s; }
.coin-c{ animation-delay:1.2s; }
@keyframes coinBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* ===== Recharge Card ===== */
.recharge-section{  position:relative; z-index:2;     background: linear-gradient(45deg, #021737, #08111f);}
.recharge-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:44px;
  max-width:720px; margin:-60px auto 0;
}
.recharge-head{ text-align:center; margin-bottom:28px; }
.recharge-head h2{ font-size:1.6rem; font-weight:700; }
.recharge-head p{ color:var(--text-soft); font-size:0.92rem; margin-top:4px; }

.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:0.86rem; font-weight:600; margin-bottom:8px; color:var(--text); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.input-wrap{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid #E2E9F5; border-radius:var(--radius-sm);
  padding:14px 16px; transition:border-color .2s, box-shadow .2s;
}
.input-wrap:focus-within{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(10,102,255,0.1); }
.input-wrap i{ color:var(--primary); font-size:0.95rem; width:16px; }
.input-wrap input,.input-wrap select{ border:none; outline:none; width:100%; font-size:0.95rem; background:transparent; color:var(--text); }
.error-msg{ display:block; color:#EF4444; font-size:0.78rem; margin-top:6px; min-height:14px; }
.form-row.has-error .input-wrap{ border-color:#EF4444; }

.quick-amounts{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.chip{
  padding:8px 16px; border-radius:100px; border:1.5px solid #E2E9F5; background:#fff;
  font-size:0.84rem; font-weight:600; color:var(--text-soft); transition:all .2s;
}
.chip:hover,.chip.active{ border-color:var(--primary); color:var(--primary); background:rgba(10,102,255,0.06); }

/* ===== Services ===== */
.services-section{ padding:100px 0; }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card{
  background:var(--card); border-radius:var(--radius); padding:32px 24px;
  text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.service-icon{
  width:60px; height:60px; border-radius:16px; margin:0 auto 18px;
  background:linear-gradient(135deg,rgba(10,102,255,0.1),rgba(56,189,248,0.15));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--primary);
  transition:transform .3s var(--ease);
}
.service-card:hover .service-icon{ transform:scale(1.1) rotate(-6deg); }
.service-card h3{ font-size:1rem; font-weight:600; margin-bottom:6px; }
.service-card p{ font-size:0.84rem; color:var(--text-soft); }

/* ===== Plans ===== */
.plans-section{ padding:100px 0; background:linear-gradient(180deg,var(--bg),#EAF2FF); }
.plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:center; }
.plan-card{
  background:var(--card); border-radius:var(--radius); padding:38px 30px;
  box-shadow:var(--shadow-sm); text-align:center; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.plan-card.featured{ background:linear-gradient(160deg,#0A66FF,#1E88E5); color:#fff; transform:scale(1.05); box-shadow:var(--shadow-lg); }
.plan-card.featured:hover{ transform:scale(1.05) translateY(-8px); }
.plan-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#0F1B33; font-size:0.72rem; font-weight:700;
  padding:6px 16px; border-radius:100px; letter-spacing:0.03em;
}
.plan-card h3{ font-size:1.1rem; font-weight:600; margin-bottom:10px; }
.plan-price{ font-size:2rem; font-weight:800; margin-bottom:22px; }
.plan-price span{ font-size:0.8rem; font-weight:500; opacity:0.7; }
.plan-list{ margin-bottom:26px; text-align:left; display:inline-flex; flex-direction:column; gap:12px; }
.plan-list li{ display:flex; align-items:center; gap:10px; font-size:0.9rem; }
.plan-card.featured .plan-list i{ color:#fff; }
.plan-list i{ color:var(--primary); width:16px; }
.plan-card.featured .btn-outline{ background:#fff; color:var(--primary); border-color:#fff; }

/* ===== Offers ===== */
.offers-section{ padding:100px 0; }
.offers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.offer-card{
  border-radius:var(--radius); padding:32px 24px; color:#fff;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease);
  position:relative; overflow:hidden;
}
.offer-card:hover{ transform:translateY(-8px) scale(1.02); }
.offer-card i{ font-size:1.6rem; margin-bottom:16px; opacity:0.9; }
.offer-card h3{ font-size:1.05rem; margin-bottom:6px; }
.offer-card p{ font-size:0.85rem; opacity:0.9; }
.grad-1{ background:linear-gradient(135deg,#0A66FF,#38BDF8); }
.grad-2{ background:linear-gradient(135deg,#1E88E5,#0A66FF); }
.grad-3{ background:linear-gradient(135deg,#38BDF8,#1E88E5); }
.grad-4{ background:linear-gradient(135deg,#0F1B33,#0A66FF); }

/* ===== Why Us ===== */
.why-section{ padding:100px 0; background:linear-gradient(180deg,#EAF2FF,var(--bg)); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.why-card{
  background:var(--card); border-radius:var(--radius); padding:32px 24px; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease);
}
.why-card:hover{ transform:translateY(-6px); }
.why-icon{ font-size:2.2rem; margin-bottom:14px; display:inline-block; animation:iconFloat 3s ease-in-out infinite; }
@keyframes iconFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.why-card h3{ font-size:1rem; font-weight:600; margin-bottom:8px; }
.why-card p{ font-size:0.85rem; color:var(--text-soft); }

/* ===== Stats ===== */
.stats-section{ padding:80px 0; background:var(--gradient-primary); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-num{ font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; color:#fff; }
.stat-label{ color:rgba(255,255,255,0.85); font-size:0.9rem; margin-top:6px; }

/* ===== Testimonials ===== */
.testimonials-section{ padding:100px 0; background: linear-gradient(45deg, #04203a, #17253a);}
.testimonial-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card{
  background:var(--card); border-radius:var(--radius); padding:30px;
  box-shadow:var(--shadow-sm);
}
.stars{ color:#FBBF24; letter-spacing:2px; margin-bottom:14px; }
.testimonial-card p{ font-size:0.92rem; color:var(--text-soft); margin-bottom:20px; font-style:italic; }
.t-person{ display:flex; align-items:center; gap:12px; }
.t-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.t-person strong{ display:block; font-size:0.9rem; }
.t-person span{ font-size:0.78rem; color:var(--text-soft); }

/* ===== FAQ ===== */
.faq-section{ padding:100px 0; background:linear-gradient(180deg,var(--bg),#EAF2FF); }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:var(--card); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; font-weight:600; font-size:0.95rem; text-align:left;
}
.faq-q i{ transition:transform .3s var(--ease); color:var(--primary); }
.faq-item.open .faq-q i{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ padding:0 24px 20px; color:var(--text-soft); font-size:0.88rem; }

/* ===== Contact ===== */
.contact-section{ padding:100px 0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-form{ background:var(--card); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-sm); }
.contact-form input,.contact-form textarea{
  width:100%; border:1.5px solid #E2E9F5; border-radius:var(--radius-sm); padding:14px 16px;
  font-size:0.94rem; outline:none; transition:border-color .2s, box-shadow .2s; resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(10,102,255,0.1); }
.contact-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-placeholder{
  height:100%; min-height:320px; background:linear-gradient(135deg,#DCE9FF,#EAF2FF);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--primary);
}
.map-placeholder i{ font-size:2.4rem; }
.map-placeholder span{ font-size:0.85rem; color:var(--text-soft); }

/* ===== Newsletter ===== */
.newsletter-section{ padding:0 0 100px; }
.newsletter-card{
  background:linear-gradient(135deg,#0F1B33,#0A66FF);
  border-radius:var(--radius); padding:56px 40px; text-align:center; color:#fff;
}
.newsletter-card h2{ font-size:1.7rem; margin-bottom:8px; }
.newsletter-card p{ opacity:0.8; margin-bottom:28px; }
.newsletter-form{ display:flex; gap:12px; max-width:440px; margin:0 auto; }
.newsletter-form input{
  flex:1; padding:14px 18px; border-radius:100px; border:none; outline:none; font-size:0.94rem;
}

/* ===== Footer ===== */
.footer{ background:#0F1B33; color:rgba(255,255,255,0.8); padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.footer-brand p{ margin:14px 0 20px; font-size:0.88rem; opacity:0.7; }
.footer .logo{ color:#fff; }
.social-icons{ display:flex; gap:12px; }
.social-icons a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.social-icons a:hover{ background:var(--primary); transform:translateY(-3px); }
.footer-col h4{ color:#fff; font-size:0.95rem; margin-bottom:18px; }
.footer-col a{ display:block; font-size:0.88rem; margin-bottom:12px; opacity:0.75; transition:opacity .2s, color .2s; }
.footer-col a:hover{ opacity:1; color:var(--accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding:22px 0; text-align:center; font-size:0.82rem; opacity:0.6; }

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-4px); }

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(15,27,51,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.modal-overlay.show{ opacity:1; visibility:visible; }
.modal-card{
  background:#fff; border-radius:var(--radius); padding:44px; width:min(400px,88%);
  text-align:center; transform:scale(0.85) translateY(20px); transition:transform .35s var(--ease);
  box-shadow:var(--shadow-lg);
}
.modal-overlay.show .modal-card{ transform:scale(1) translateY(0); }
.modal-check{
  width:66px; height:66px; border-radius:50%; background:#DCFCE7; color:#22C55E;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 20px;
  animation:checkPop .4s var(--ease) .1s both;
}
@keyframes checkPop{ 0%{ transform:scale(0);} 80%{ transform:scale(1.15);} 100%{ transform:scale(1);} }
.modal-card h3{ font-size:1.25rem; margin-bottom:10px; }
.modal-card p{ color:var(--text-soft); font-size:0.9rem; margin-bottom:26px; }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Stagger children of grids on reveal */
.services-grid .service-card,.plans-grid .plan-card,.offers-grid .offer-card,.why-grid .why-card,.stats-grid .stat-item{
  opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.services-grid.in-view .service-card,.plans-grid.in-view .plan-card,.offers-grid.in-view .offer-card,.why-grid.in-view .why-card,.stats-grid.in-view .stat-item{
  opacity:1; transform:translateY(0);
}
.services-grid .service-card:nth-child(1),.plans-grid .plan-card:nth-child(1),.offers-grid .offer-card:nth-child(1),.why-grid .why-card:nth-child(1),.stats-grid .stat-item:nth-child(1){ transition-delay:0.05s; }
.services-grid .service-card:nth-child(2),.plans-grid .plan-card:nth-child(2),.offers-grid .offer-card:nth-child(2),.why-grid .why-card:nth-child(2),.stats-grid .stat-item:nth-child(2){ transition-delay:0.12s; }
.services-grid .service-card:nth-child(3),.plans-grid .plan-card:nth-child(3),.offers-grid .offer-card:nth-child(3),.why-grid .why-card:nth-child(3),.stats-grid .stat-item:nth-child(3){ transition-delay:0.19s; }
.services-grid .service-card:nth-child(4),.offers-grid .offer-card:nth-child(4),.why-grid .why-card:nth-child(4),.stats-grid .stat-item:nth-child(4){ transition-delay:0.26s; }
.services-grid .service-card:nth-child(5){ transition-delay:0.33s; }
.services-grid .service-card:nth-child(6){ transition-delay:0.4s; }
.services-grid .service-card:nth-child(7){ transition-delay:0.47s; }
.services-grid .service-card:nth-child(8){ transition-delay:0.54s; }

/* Focus visibility for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:3px;
}

/*==============================
 PREMIUM SERVICES
==============================*/

.premium-services-area{
    padding:100px 20px;
    background:
    radial-gradient(circle at top right,#1e40af22,transparent 45%),
    radial-gradient(circle at bottom left,#3b82f622,transparent 45%),
    #08111f;
    overflow:hidden;
}

.premium-container{
    max-width:1250px;
    margin:auto;
}

.premium-title-box{
    text-align:center;
    margin-bottom:70px;
}

.premium-subtitle{
    display:inline-block;
    padding:8px 22px;
    border-radius:50px;
    background:rgba(59,130,246,.12);
    color:#60a5fa;
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:600;
}

.premium-title-box h2{
    margin-top:18px;
    font-size:46px;
    color:#fff;
    font-weight:800;
    line-height:1.2;
}

.premium-title-box p{
    width:650px;
    max-width:100%;
    margin:20px auto 0;
    color:#9ca3af;
    font-size:17px;
    line-height:1.8;
}

.premium-service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:30px;
}

.premium-service-box{
    position:relative;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    border-radius:28px;
    padding:38px 30px;
    text-align:center;
    overflow:hidden;
    transition:.45s;
    border:1px solid rgba(255,255,255,.08);
}

.premium-service-box::before{
    content:'';
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:28px;
    background:linear-gradient(135deg,#3b82f6,#06b6d4,#6366f1);
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0;
    transition:.45s;
}

.premium-service-box::after{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    background:#3b82f6;
    border-radius:50%;
    filter:blur(90px);
    opacity:0;
    top:-120px;
    right:-120px;
    transition:.5s;
}

.premium-service-box:hover{
    transform:translateY(-15px);
    box-shadow:0 30px 60px rgba(0,0,0,.35);
}

.premium-service-box:hover::before{
    opacity:1;
}

.premium-service-box:hover::after{
    opacity:.28;
}

.premium-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    color:#fff;
    font-size:34px;
    box-shadow:0 18px 40px rgba(37,99,235,.45);
    transition:.45s;
}

.premium-service-box:hover .premium-icon{
    transform:rotate(-12deg) scale(1.12);
    border-radius:50%;
}

.premium-service-box h3{
    color:#fff;
    margin:28px 0 15px;
    font-size:23px;
    font-weight:700;
}

.premium-service-box p{
    color:#b8c3d6;
    font-size:15px;
    line-height:1.8;
}

@media(max-width:992px){

.premium-title-box h2{
    font-size:38px;
}

}

@media(max-width:768px){

.premium-services-area{
    padding:80px 20px;
}

.premium-title-box h2{
    font-size:32px;
}

.premium-title-box p{
    font-size:15px;
}

.premium-service-grid{
    gap:20px;
}

.premium-service-box{
    padding:30px 25px;
}

}

@media(max-width:480px){

.premium-title-box h2{
    font-size:28px;
}

.premium-icon{
    width:75px;
    height:75px;
    font-size:28px;
}

.premium-service-box h3{
    font-size:20px;
}

}

/*==============================
 PREMIUM PLAN SECTION
===============================*/

.rx-plan-section{
    padding:110px 20px;
    background:#081527;
    overflow:hidden;
}

.rx-plan-container{
    max-width:1250px;
    margin:auto;
}

.rx-plan-heading{
    text-align:center;
    margin-bottom:70px;
}

.rx-plan-subtitle{
    display:inline-block;
    padding:10px 24px;
    border-radius:40px;
    background:rgba(37,99,235,.15);
    color:#4ea5ff;
    font-weight:600;
    letter-spacing:1px;
}

.rx-plan-heading h2{
    color:#fff;
    font-size:46px;
    margin:18px 0;
    font-weight:800;
}

.rx-plan-heading p{
    color:#b9c6d8;
    max-width:650px;
    margin:auto;
    line-height:1.8;
}

.rx-plan-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.rx-plan-card{

    position:relative;
    overflow:hidden;
    padding:45px 35px;
    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.45s;
}

.rx-plan-card:hover{

    transform:translateY(-15px);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.rx-plan-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:linear-gradient(135deg,#2563eb,#00c6ff,#4f46e5);

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;
    z-index: -2;

}

.rx-plan-card:hover::before{

    opacity:1;

}

.rx-plan-circle{

    position:absolute;

    width:220px;

    height:220px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(90px);

    top:-120px;

    right:-120px;

    opacity:.18;

}

.rx-popular-tag{

    position:absolute;

    top:20px;

    right:-35px;

    background:linear-gradient(90deg,#2563eb,#00c6ff);

    color:#fff;

    padding:8px 45px;

    transform:rotate(45deg);

    font-size:12px;

    font-weight:700;

}

.rx-plan-active{

    transform:scale(1.05);

    border:2px solid #2f80ff;

}

.rx-plan-card h3{

    color:#fff;

    font-size:28px;

    margin-bottom:20px;

}

.rx-price{

    color:#fff;

    font-size:52px;

    font-weight:800;

    margin-bottom:25px;

}

.rx-price span{

    display:block;

    color:#9fb5d5;

    font-size:16px;

    margin-top:8px;

}

.rx-feature-list{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.rx-feature-list li{

    display:flex;

    align-items:center;

    gap:15px;

    color:#c9d5e8;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.rx-feature-list i{

    color:#37a5ff;

    font-size:18px;

}

.rx-plan-btn{

    width:100%;

    border:none;

    cursor:pointer;

    border-radius:14px;

    padding:16px;

    font-size:17px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    transition:.4s;

}

.rx-plan-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(37,99,235,.45);

}

/* Responsive */

@media(max-width:992px){

.rx-plan-heading h2{

    font-size:38px;

}

}

@media(max-width:768px){

.rx-plan-section{

    padding:80px 15px;

}

.rx-plan-heading h2{

    font-size:30px;

}

.rx-plan-grid{

    gap:25px;

}

.rx-plan-active{

    transform:none;

}

}

@media(max-width:480px){

.rx-price{

    font-size:42px;

}

.rx-plan-card{

    padding:35px 25px;

}

}

/*=========================
 RX OFFERS SECTION
==========================*/

.rx-offers-section{

    padding:100px 20px;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#2563eb22,transparent 35%),
    radial-gradient(circle at bottom right,#06b6d422,transparent 35%),
    linear-gradient(135deg,#06111f,#081a33,#0c2245);

}

.rx-offers-container{

    max-width:1250px;

    margin:auto;

    position:relative;

    z-index:2;

}

.rx-offers-heading{

    text-align:center;

    margin-bottom:70px;

}

.rx-offers-subtitle{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:#2563eb20;

    color:#63b3ff;

    font-weight:600;

}

.rx-offers-title{

    color:#fff;

    font-size:46px;

    margin:20px 0;

}

.rx-offers-desc{

    color:#b9c8de;

    max-width:650px;

    margin:auto;

    line-height:1.8;

}

.rx-offers-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.rx-offer-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:35px;

    transition:.4s;

}

.rx-offer-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.rx-offer-icon{

    width:75px;

    height:75px;

    border-radius:20px;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    color:#fff;

    font-size:28px;

    transition:.4s;

}

.rx-offer-card:hover .rx-offer-icon{

    transform:rotate(-12deg) scale(1.1);

}

.rx-offer-card h3{

    color:#fff;

    margin-bottom:12px;

    font-size:24px;

}

.rx-offer-card p{

    color:#c8d5e8;

    line-height:1.7;

}

/* Responsive */

@media(max-width:768px){

.rx-offers-title{

    font-size:32px;

}

}

/*===========================
    WHY CHOOSE US
============================*/

.rx-why-section{

    padding:110px 20px;

    background:
    radial-gradient(circle at top left,#2563eb20,transparent 35%),
    radial-gradient(circle at bottom right,#00c6ff15,transparent 40%),
    #081321;

    overflow:hidden;

}

.rx-why-container{

    max-width:1250px;

    margin:auto;

}

/* Heading */

.rx-why-header{

    text-align:center;

    margin-bottom:70px;

}

.rx-why-subtitle{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    background:#2563eb20;

    color:#60a5fa;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.rx-why-title{

    color:#fff;

    font-size:48px;

    margin:20px 0;

    font-weight:800;

}

.rx-why-description{

    color:#b8c4d9;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* Grid */

.rx-why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:30px;

}

/* Card */

.rx-why-card{

    position:relative;

    padding:40px 30px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;

    overflow:hidden;

}

.rx-why-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:linear-gradient(135deg,#2563eb,#00c6ff,#4f46e5);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

}

.rx-why-card:hover::before{

    opacity:1;

}

.rx-why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/* Icon */

.rx-why-icon{

    width:85px;

    height:85px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

    transition:.4s;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.rx-why-card:hover .rx-why-icon{

    transform:rotate(-12deg) scale(1.12);

    border-radius:50%;

}

/* Text */

.rx-why-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:15px;

}

.rx-why-card p{

    color:#c2d0e2;

    line-height:1.8;

    font-size:15px;

}

/* Responsive */

@media(max-width:992px){

.rx-why-title{

    font-size:38px;

}

}

@media(max-width:768px){

.rx-why-section{

    padding:80px 15px;

}

.rx-why-title{

    font-size:30px;

}

.rx-why-grid{

    gap:20px;

}

}

@media(max-width:480px){

.rx-why-title{

    font-size:26px;

}

.rx-why-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.rx-why-card{

    padding:30px 25px;

}

}

/*===========================
    RX PREMIUM STATS
===========================*/

.rx-stats-section{

    padding:110px 20px;

    background:
    radial-gradient(circle at top right,#2563eb20,transparent 35%),
    radial-gradient(circle at bottom left,#00c6ff15,transparent 35%),
    linear-gradient(135deg,#07111d,#0b1931);

    overflow:hidden;

}

.rx-stats-wrapper{

    max-width:1250px;

    margin:auto;

}

.rx-stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.rx-stat-card{

    position:relative;

    text-align:center;

    padding:45px 25px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;

    overflow:hidden;

}

.rx-stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:linear-gradient(135deg,#2563eb,#00c6ff,#4f46e5);

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.45s;

}

.rx-stat-card:hover::before{

    opacity:1;

}

.rx-stat-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.rx-stat-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    font-size:34px;

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    transition:.45s;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.rx-stat-card:hover .rx-stat-icon{

    transform:rotate(-12deg) scale(1.1);

    border-radius:50%;

}

.rx-counter{

    color:#fff;

    font-size:52px;

    font-weight:800;

    margin-bottom:12px;

}

.rx-stat-card p{

    color:#c6d2e5;

    font-size:17px;

    margin:0;

}

/* Responsive */

@media(max-width:992px){

.rx-counter{

    font-size:42px;

}

}

@media(max-width:768px){

.rx-stats-section{

    padding:80px 15px;

}

.rx-stats-grid{

    gap:20px;

}

.rx-counter{

    font-size:36px;

}

}

@media(max-width:480px){

.rx-stat-card{

    padding:35px 20px;

}

.rx-stat-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.rx-counter{

    font-size:32px;

}

.rx-stat-card p{

    font-size:15px;

}

}

/*==============================
        PREMIUM FAQ
==============================*/

.premium-faq{
    padding:110px 0;
    background:
    radial-gradient(circle at top right,#2f63ff22,transparent 45%),
    radial-gradient(circle at bottom left,#4facfe18,transparent 40%),
    #081120;
}

.faq-container{
    width:min(1180px,92%);
    margin:auto;
}

.faq-header{
    text-align:center;
    margin-bottom:60px;
}

.faq-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(55,110,255,.15);
    color:#4da3ff;
    font-weight:600;
    margin-bottom:20px;
    border:1px solid rgba(77,163,255,.25);
}

.faq-header h2{
    font-size:48px;
    color:#fff;
    margin-bottom:18px;
    font-weight:800;
}

.faq-header p{
    max-width:650px;
    margin:auto;
    color:#a7b2c9;
    font-size:17px;
    line-height:1.8;
}

.faq-wrapper{
    display:grid;
    gap:22px;
}

.faq-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    border-radius:18px;

    overflow:hidden;

    transition:.4s;
}

.faq-card:hover{

    border-color:#3f8cff;

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(45,115,255,.25);
}

.faq-title{

    width:100%;

    border:none;

    background:none;

    padding:28px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#fff;

    font-size:19px;

    font-weight:700;

    cursor:pointer;
    /* margin-bottom: 20px; */
    border-bottom: 1px solid white;
}

.faq-title i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    transition:.4s;
}

.faq-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

    padding:0 30px;
}

.faq-content p{

    color:#bfc8d8;

    line-height:1.9;

    padding-bottom: 20px;
    padding-top: 20px;

}

.faq-card.active .faq-content{

    max-height:250px;
}

.faq-card.active .faq-title i{

    transform:rotate(45deg);

    background:#00b4ff;
}

@media(max-width:768px){

.faq-header h2{

font-size:34px;

}

.faq-title{

font-size:16px;

padding:22px;

}

.faq-content{

padding:0 22px;

}

}

/*=========================
    PREMIUM CONTACT
=========================*/

.premium-contact-area{

    padding:120px 0;

    background:
    radial-gradient(circle at top right,#347dff22,transparent 35%),
    radial-gradient(circle at bottom left,#00d4ff20,transparent 40%),
    #07101f;

}

.contact-wrapper{

    width:min(1200px,92%);

    margin:auto;

}

.contact-heading{

    text-align:center;

    margin-bottom:70px;

}

.contact-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    border-radius:50px;

    background:#2563eb20;

    color:#4fa8ff;

    border:1px solid #3b82f640;

    margin-bottom:22px;

    font-weight:600;

}

.contact-heading h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.contact-heading p{

    max-width:720px;

    margin:auto;

    color:#a7b7d4;

    line-height:1.8;

    font-size:17px;

}

.contact-layout{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:40px;

}

.contact-information{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-box{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s;

}

.info-box:hover{

    transform:translateY(-6px);

    border-color:#3b82f6;

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

}

.info-box h4{

    color:#fff;

    margin-bottom:6px;

}

.info-box p{

    color:#b7c3d8;

}

.contact-map-box{

    overflow:hidden;

    border-radius:20px;

    height:280px;

    border:1px solid rgba(255,255,255,.08);

}

.contact-map-box iframe{

    width:100%;

    height:100%;

    border:none;

}

.contact-form-card{

    padding:45px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(30px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.input-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-bottom:25px;

}

.input-group{

    display:flex;

    flex-direction:column;

}

.input-group label{

    color:#d8e4ff;

    margin-bottom:10px;

    font-weight:600;

}

.input-group input,
.input-group textarea{

    background:#0f1c31;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    padding:16px 18px;

    border-radius:14px;

    outline:none;

    transition:.35s;

    font-size:15px;

}

.input-group input:focus,
.input-group textarea:focus{

    border-color:#2f8dff;

    box-shadow:0 0 0 4px rgba(52,125,255,.15);

}

.input-group textarea{

    resize:none;

}

.contact-submit-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#00b7ff);

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    margin-top: 15px;

    transition:.4s;

}

.contact-submit-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(37,99,235,.4);

}

.contact-submit-btn i{

    margin-left:10px;

}

@media(max-width:991px){

.contact-layout{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-heading h2{

font-size:34px;

}

.contact-form-card{

padding:25px;

}

.input-grid{

grid-template-columns:1fr;

gap:20px;

}

}

@media(max-width:480px){

.contact-heading h2{

font-size:28px;

}

.info-box{

padding:18px;

}

.contact-form-card{

padding:20px;

}

}

/*=========================
    NEWSLETTER PREMIUM
=========================*/

.premium-subscribe-area{

    padding:120px 0;

    background:
    radial-gradient(circle at top left,#2563eb22,transparent 35%),
    radial-gradient(circle at bottom right,#00c6ff22,transparent 40%),
    #07101f;

}

.subscribe-wrapper{

    width:min(1180px,92%);

    margin:auto;

    padding:70px;

    border-radius:30px;

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(30px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

}

.subscribe-wrapper::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(140px);

    top:-120px;

    left:-120px;

    opacity:.35;

}

.subscribe-wrapper::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:#00bfff;

    border-radius:50%;

    filter:blur(120px);

    bottom:-120px;

    right:-100px;

    opacity:.25;

}

.subscribe-content{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:760px;

    margin:auto;

}

.subscribe-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:#2563eb20;

    color:#4fa8ff;

    border:1px solid #3b82f640;

    margin-bottom:22px;

    font-weight:600;

}

.subscribe-content h2{

    color:#fff;

    font-size:46px;

    font-weight:800;

    line-height:1.25;

    margin-bottom:20px;

}

.subscribe-content p{

    color:#b7c6dd;

    font-size:17px;

    line-height:1.8;

    margin-bottom:45px;

}

.subscribe-form-box{

    position:relative;

    z-index:2;

    display:flex;

    gap:18px;

    justify-content:center;

    align-items:center;

    max-width:760px;

    margin:auto;

}

.subscribe-input{

    flex:1;

    display:flex;

    align-items:center;

    background:#0f1d33;

    border:1px solid rgba(255,255,255,.08);

    border-radius:70px;

    padding:0 24px;

    transition:.35s;

}

.subscribe-input:focus-within{

    border-color:#3b82f6;

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.subscribe-input i{

    color:#4fa8ff;

    font-size:18px;

}

.subscribe-input input{

    width:100%;

    height:65px;

    background:none;

    border:none;

    color:#fff;

    font-size:16px;

    padding-left:15px;

    outline:none;

}

.subscribe-input input::placeholder{

    color:#8fa3c4;

}

.subscribe-btn{

    border:none;

    border-radius:70px;

    padding:20px 38px;

    background:linear-gradient(135deg,#2563eb,#00b7ff);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    white-space:nowrap;

}

.subscribe-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(37,99,235,.35);

}

.subscribe-btn i{

    margin-left:10px;

}

@media(max-width:768px){

.subscribe-wrapper{

padding:45px 25px;

}

.subscribe-content h2{

font-size:34px;

}

.subscribe-form-box{

flex-direction:column;

}

.subscribe-input{

width:100%;

}

.subscribe-btn{

width:100%;

}

}

@media(max-width:480px){

.subscribe-content h2{

font-size:28px;

}

.subscribe-content p{

font-size:15px;

}

}

/*======================================
        PREMIUM RECHARGE SECTION
======================================*/

.instant-recharge-area{

    padding:120px 0;

    background:
    radial-gradient(circle at top left,#2563eb25,transparent 35%),
    radial-gradient(circle at bottom right,#00d2ff20,transparent 40%),
    #07101f;

}

.recharge-wrapper{

    width:min(1200px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:60px;

    align-items:center;

}

.recharge-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:#2563eb20;

    color:#55a8ff;

    border:1px solid #3b82f650;

    margin-bottom:25px;

}

.recharge-info-panel h2{

    color:#fff;

    font-size:50px;

    line-height:1.2;

    margin-bottom:20px;

}

.recharge-info-panel p{

    color:#b9c8df;

    line-height:1.9;

    font-size:17px;

    margin-bottom:40px;

}

.feature-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.feature-box{

    display:flex;

    gap:18px;

    align-items:center;

    padding:22px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.feature-box:hover{

    transform:translateX(10px);

    border-color:#3b82f6;

}

.feature-box i{

    width:60px;

    height:60px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563eb,#00bfff);

    color:#fff;

    font-size:22px;

}

.feature-box h4{

    color:#fff;

    margin-bottom:5px;

}

.feature-box span{

    color:#b7c3d8;

}

.recharge-form-card{

    padding:40px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 30px 60px rgba(0,0,0,.35);

}

.form-heading{

    text-align:start;

    margin-bottom:30px;

}

.form-heading h3{

    color:#fff;

    font-size:32px;

}

.form-heading p{

    color:#9fb2cf;

}

.field-group{

    margin-bottom:22px;

}

.field-row{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.field-group label{

    display:block;

    color:#d8e6ff;

    margin-bottom:10px;

    font-weight:600;

}

.field-box{

    display:flex;

    align-items:center;

    background:#101c31;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    padding:0 18px;

}

.field-box i{

    color:#54a8ff;

}

.field-box input,
.field-box select{

    width:100%;

    height:58px;

    background:none;

    border:none;

    color:#fff;

    padding-left:15px;

    outline:none;

}

.field-box select option{

    color:#000;

}

.field-box:focus-within{

    border-color:#3b82f6;

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.amount-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

    margin:25px 0;

}

.amount-grid button{

    height:48px;

    border:none;

    border-radius:12px;

    background:#13233d;

    color:#fff;

    cursor:pointer;

    transition:.35s;

}

.amount-grid button:hover{

    background:#2563eb;

    transform:translateY(-3px);

}

.recharge-submit{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.recharge-submit:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(37,99,235,.35);

}

@media(max-width:992px){

.recharge-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.recharge-info-panel h2{

font-size:34px;

}

.field-row{

grid-template-columns:1fr;

}

.amount-grid{

grid-template-columns:repeat(2,1fr);

}

.recharge-form-card{

padding:25px;

}

}

@media(max-width:480px){

.amount-grid{

grid-template-columns:1fr 1fr;

}

.recharge-info-panel h2{

font-size:28px;

}

}

.hero-section{

position:relative;

padding:120px 0;

overflow:hidden;

background:linear-gradient(135deg,#081221,#102640);

min-height:100vh;

display:flex;

align-items:center;

}

.hero-wrapper{

display:grid;

grid-template-columns:1fr 500px;

gap:80px;

align-items:center;

}

.hero-content h1{

font-size:65px;

font-weight:800;

line-height:1.15;

color:#fff;

margin:20px 0;

}

.hero-content h1 span{

color:#38bdf8;

}

.hero-content p{

font-size:18px;

color:#bfd3ec;

line-height:1.8;

margin-bottom:35px;

}

.hero-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

border-radius:50px;

background:rgba(255,255,255,.08);

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

color:#38bdf8;

font-weight:600;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.primary-btn{

padding:16px 34px;

background:#2196f3;

color:#fff;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.primary-btn:hover{

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(33,150,243,.4);

}

.secondary-btn{

padding:16px 34px;

border:1px solid rgba(255,255,255,.15);

color:#fff;

border-radius:50px;

text-decoration:none;

backdrop-filter:blur(20px);

}

.hero-stats{

display:flex;

gap:50px;

margin-top:30px;

}

.hero-stats h2{

color:#fff;

font-size:34px;

margin-bottom:6px;

}

.hero-stats span{

color:#9fb7d5;

}

.hero-image{

display:flex;

justify-content:center;

}

.mobile-card{

width:360px;

padding:28px;

border-radius:30px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.15);

box-shadow:0 30px 60px rgba(0,0,0,.35);

animation:float 4s ease-in-out infinite;

}

.mobile-top{

display:flex;

justify-content:space-between;

margin-bottom:25px;

color:#fff;

font-weight:700;

}

.signal{

width:12px;

height:12px;

border-radius:50%;

background:#32d74b;

}

.balance-card{

background:linear-gradient(135deg,#2196f3,#00bcd4);

padding:20px;

border-radius:20px;

margin-bottom:25px;

color:#fff;

}

.balance-card h2{

margin-top:10px;

font-size:34px;

}

.recharge-box{

display:flex;

flex-direction:column;

gap:12px;

}

.recharge-box input{

padding:14px;

border:none;

border-radius:12px;

background:#fff;

outline:none;

}

.recharge-box button{

padding:16px;

border:none;

border-radius:12px;

background:#2196f3;

color:#fff;

font-weight:700;

cursor:pointer;

}

.floating-success{

margin-top:25px;

padding:15px;

background:#0cb36a;

border-radius:15px;

color:#fff;

text-align:center;

font-weight:600;

}

.hero-bg-circle{

position:absolute;

border-radius:50%;

filter:blur(120px);

}

.hero-circle-1{

width:420px;

height:420px;

background:#0ea5e9;

left:-150px;

top:120px;

opacity:.18;

}

.hero-circle-2{

width:500px;

height:500px;

background:#2563eb;

right:-180px;

top:-100px;

opacity:.18;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@media(max-width:991px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;
flex-direction: column;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.hero-content h1{

font-size:48px;

}

.hero-image{

margin-top:50px;

}

.mobile-card{

width:100%;

max-width:360px;

}

}

/*==============================
 Privacy Hero Section
==============================*/

.privacy-policy-section{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;
    padding:120px 20px 80px;
    text-align:center;
    background:linear-gradient(135deg, #07152d 0%, #08121d 55%, #010812 100%);
}

.privacy-policy-section::before{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:#69585814;
    top:-120px;
    left:-100px;
    filter:blur(10px);
}

.privacy-policy-section::after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:#69585814;
    right:-80px;
    bottom:-120px;
    filter:blur(15px);
}

.privacy-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.08),
        transparent 45%),
        radial-gradient(circle at bottom left,
        rgba(0,212,255,.12),
        transparent 40%);
}

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

.page-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(12px);
    color:#7ee7ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.page-tag i{
    color:#00d4ff;
}

.privacy-policy-section h1{
    color:#fff;
    font-size:56px;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.2;
}

.privacy-policy-section p{
    color:rgba(255,255,255,.82);
    max-width:680px;
    margin:auto;
    font-size:17px;
    line-height:1.8;
}

.breadcrumb{
    margin-top:35px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    list-style:none;
    padding:0;
    flex-wrap:wrap;
}

.breadcrumb li{
    color:#fff;
    font-size:15px;
    font-weight:500;
}

.breadcrumb li i{
    font-size:13px;
}

.breadcrumb li a{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    transition:.35s;
}

.breadcrumb li a:hover{
    color:#5ed8ff;
}

.breadcrumb li:last-child{
    color:#8bd6ff;
    font-weight:600;
}

/* Floating Animation */

@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}

.page-tag{
    animation:float 4s ease-in-out infinite;
}

/* Responsive */

@media(max-width:992px){

    .privacy-policy-section{
        min-height:320px;
    }

    .privacy-policy-section h1{
        font-size:42px;
    }

}

@media(max-width:768px){

    .privacy-policy-section{
        padding:100px 20px 70px;
    }

    .privacy-policy-section h1{
        font-size:34px;
    }

    .privacy-policy-section p{
        font-size:15px;
    }

    .breadcrumb{
        gap:10px;
    }

}

@media(max-width:480px){

    .privacy-policy-section h1{
        font-size:28px;
    }

    .page-tag{
        font-size:13px;
        padding:8px 18px;
    }

}


.privacy-wrapper{
    padding:90px 20px;
    background: radial-gradient(circle at top right,#1e40af22,transparent 45%),
    radial-gradient(circle at bottom left,#3b82f622,transparent 45%),
    #08111f;
}

.privacy-container{
    max-width:1300px;
    margin:auto;
}

.privacy-header{
    text-align:center;
    margin-bottom:60px;
}

.privacy-header span{
    display:inline-block;
    padding:8px 20px;
    border-radius:40px;
    background:#0d6efd;
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.privacy-header h2{
    font-size:42px;
    color: #ffffff;
    margin:20px 0;
}

.privacy-header p{
    max-width:720px;
    margin:auto;
    color: #b4b2b2;
    line-height:1.8;
}

.privacy-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:30px;
}

.policy-card{
    background: #07262f21;
    border-radius:20px;
    padding:35px;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #edf3ff;
    position:relative;
    overflow:hidden;
}

.policy-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0d6efd,#00c6ff);
}

.policy-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(13,110,253,.18);
}

.policy-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:linear-gradient(135deg,#0d6efd,#00c6ff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
}

.policy-card h3{
    font-size:22px;
    color: #ffffff;
    margin-bottom:15px;
}

.policy-card p{
    color: #cbcbcb;
    line-height:1.8;
    margin-bottom:15px;
}

.policy-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.policy-card ul li{
    padding:10px 0;
    padding-left:28px;
    position:relative;
    color: #d8f3ff;
    border-bottom:1px solid #edf1f8;
}

.policy-card ul li:last-child{
    border:none;
}

.policy-card ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#0d6efd;
    font-weight:700;
}

@media(max-width:992px){

    .privacy-header h2{
        font-size:36px;
    }

}

@media(max-width:768px){

    .privacy-wrapper{
        padding:70px 15px;
    }

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

    .privacy-header h2{
        font-size:30px;
    }

    .policy-card{
        padding:25px;
    }

    .policy-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .policy-card h3{
        font-size:20px;
    }

}


.term-conditions-section{
    position:relative;
    padding:100px 20px;
    background:
        radial-gradient(circle at top left,#2563eb22,transparent 35%),
        radial-gradient(circle at bottom right,#06b6d422,transparent 35%),
        linear-gradient(135deg,#061126,#0a1d43,#061126);
    overflow:hidden;
}

.term-conditions-section::before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:linear-gradient(45deg,#3b82f6,#06b6d4);
    filter:blur(160px);
    opacity:.15;
    left:-100px;
    top:-120px;
}

.term-conditions-section::after{
    content:'';
    position:absolute;
    width:320px;
    height:320px;
    background:linear-gradient(45deg,#06b6d4,#2563eb);
    filter:blur(150px);
    opacity:.15;
    right:-80px;
    bottom:-120px;
}

.container-sect{
    position:relative;
    max-width:1050px;
    margin:auto;
    padding:50px;
    border-radius:30px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow);
    z-index:2;
}

/* Heading */

.container-sect h2{
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
    margin:45px 0 18px;
    color:#fff;
    font-size:28px;
    font-weight:700;
    line-height:1.4;
    padding-bottom:12px;
}

.container-sect h2:first-child{
    margin-top:0;
}

.container-sect h2::before{
    content:'';
    width:14px;
    height:14px;
    border-radius:50%;
    background:linear-gradient(135deg,#3b82f6,#06b6d4);
    box-shadow:0 0 15px #3b82f6;
    flex-shrink:0;
}

.container-sect h2::after{
    content:'';
    position:absolute;
    left:32px;
    bottom:0;
    width:90px;
    height:4px;
    border-radius:30px;
    background:linear-gradient(to right,#3b82f6,#06b6d4);
}

/* Paragraph */

.container-sect p{
    color: #ffffff;
    font-size:16px;
    line-height:1.9;
    margin-bottom:20px;
}

/* Span */

.container-sect span{
    display:inline-block;
    margin-bottom:15px;
    font-size:17px;
    font-weight:600;
    color:#fff;
    padding:10px 18px;
    border-left:4px solid var(--secondary);
    background:rgba(59,130,246,.12);
    border-radius:8px;
}

/* List */

.container-sect ul{
    list-style:none;
    margin:20px 0 35px;
    padding:0;
    display:grid;
    gap:14px;
}

.container-sect ul li{
    position:relative;
    color:#ffffff;
    padding:16px 20px 16px 58px;
    border-radius:15px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
    transition:.35s;
    line-height:1.7;
}

.container-sect ul li::before{
    content:"✓";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#3b82f6,#06b6d4);
    color:#fff;
    font-size:13px;
    font-weight:700;
    box-shadow:0 5px 15px rgba(59,130,246,.35);
}

.container-sect ul li:hover{
    transform:translateX(8px);
    background:rgba(59,130,246,.10);
    border-color:#3b82f6;
}

/* Scroll Animation */

.container-sect h2,
.container-sect p,
.container-sect span,
.container-sect ul{
    animation:fadeUp .7s ease both;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Responsive */

@media(max-width:991px){

.container-sect{
    padding:35px;
}

.container-sect h2{
    font-size:24px;
}

}

@media(max-width:768px){

.term-conditions-section{
    padding:70px 15px;
}

.container-sect{
    padding:28px 22px;
    border-radius:22px;
}

.container-sect h2{
    font-size:21px;
    gap:12px;
}

.container-sect h2::after{
    width:70px;
    left:25px;
}

.container-sect p{
    font-size:15px;
}

.container-sect span{
    width:100%;
}

.container-sect ul li{
    padding:15px 15px 15px 50px;
    font-size:15px;
}

.container-sect ul li::before{
    width:22px;
    height:22px;
    font-size:11px;
}

}

@media(max-width:480px){

.container-sect{
    padding:22px 18px;
}

.container-sect h2{
    font-size:19px;
}

.container-sect p{
    font-size:14px;
    line-height:1.8;
}

.container-sect ul li{
    font-size:14px;
}

}


.about-section{
    position:relative;
    overflow:hidden;
    padding:90px 20px;
    background:
    linear-gradient(45deg, #101621, #09162a);
}

.about-container{
    max-width:1300px;
    margin:auto;
}

.about-header{
    text-align:center;
    max-width:850px;
    margin:auto auto 70px;
}

.about-tag{
    display:inline-block;
    padding:10px 24px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#5ec8ff;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:18px;
}

.about-header h2{
    color:#fff;
    font-size:46px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:20px;
}

.about-header p{
    color:#c8d2e5;
    line-height:1.9;
    font-size:17px;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.about-card{
    position:relative;
    padding:40px 30px;
    border-radius:25px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.08);
    transition:.45s;
    overflow:hidden;
}

.about-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:25px;
    background:linear-gradient(135deg,#0ea5ff,#5b7cff,#14f1ff);
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
}

.about-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 50px rgba(0,0,0,.30);
}

.icon{
    width:72px;
    height:72px;
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    color:#fff;
    margin-bottom:25px;
    background:linear-gradient(135deg,#0099ff,#0066ff);
    box-shadow:0 15px 35px rgba(0,123,255,.35);
}

.about-card h3{
    color:#fff;
    margin-bottom:15px;
    font-size:24px;
    font-weight:600;
}

.about-card p{
    color:#d3ddee;
    line-height:1.8;
    font-size:15px;
}

.about-card:hover .icon{
    transform:rotate(-10deg) scale(1.08);
    transition:.4s;
}

/* Floating Glow */

.about-section::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:#0077ff25;
    filter:blur(120px);
    left:-150px;
    top:-100px;
}

.about-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#00d2ff20;
    filter:blur(120px);
    right:-100px;
    bottom:-100px;
}

/* Tablet */

@media(max-width:991px){

.about-header h2{
    font-size:36px;
}

.about-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* Mobile */

@media(max-width:767px){

.about-section{
    padding:70px 18px;
}

.about-header{
    margin-bottom:45px;
}

.about-header h2{
    font-size:28px;
}

.about-header p{
    font-size:15px;
}

.about-grid{
    grid-template-columns:1fr;
    gap:22px;
}

.about-card{
    padding:30px 24px;
}

.icon{
    width:65px;
    height:65px;
    font-size:24px;
}

.about-card h3{
    font-size:21px;
}

}