.elementor-194 .elementor-element.elementor-element-91c4305{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-ea2d64f */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SEO Services — Red & White Premium</title>

<!-- Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>

<style>
:root{
  --red:#d90429;
  --red-dark:#a0021f;
  --text:#1e293b;
  --muted:#475569;
  --card:#ffffff;
  --bg:#ffffff;
  --soft:#f7f7f7;
  --border:#f1f1f1;
}

/* RESET */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{text-decoration:none}

/* BASE */
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* CONTAINER */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(135deg,var(--red),#ff2e63);
  color:#fff;
  text-align:center;
  padding:80px 20px 70px;
}
.hero h1{ /* heading ko touch nahi karunga (sirf color inherit) */
  margin:0 0 10px;
  line-height:1.2;
}
.hero p{
  margin:0 0 24px;
  color:#fff;
  opacity:.95;
}
.btn{
  display:inline-block;
  padding:14px 28px;
  background:#fff;
  color:var(--red);
  border-radius:999px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--red);
  color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

/* ============ TRUST STRIP ============ */
.trust{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.trust .row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  padding:18px 0;
  align-items:center;
  text-align:center;
  color:var(--muted);
  font-weight:600;
}
.trust i{color:var(--red);margin-right:8px}

/* ============ SERVICES GRID ============ */
.section{
  padding:64px 0;
}
.section h2{ /* heading text untouched */
  text-align:center;
  margin:0 0 12px;
  color:var(--text);
}
.section .sub{
  text-align:center;
  margin:0 auto 36px;
  color:var(--muted);
  max-width:720px;
}

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

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease, color .2s ease;
}
.card .icon{
  width:56px;height:56px;border-radius:50%;
  background:#fff4f4;color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;margin-bottom:16px;
  transition:background .3s ease,color .3s ease;
}
.card h3{margin:0 0 8px;color:var(--red);font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* Hover: full red + zoom-out */
.card:hover{
  background:var(--red);
  transform:scale(0.95);
  box-shadow:0 16px 34px rgba(217,4,41,.28);
}
.card:hover h3,
.card:hover p{color:#fff}
.card:hover .icon{background:#fff;color:var(--red)}

/* ============ FEATURES (BULLETS) ============ */
.features{
  background:var(--soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.feature-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}
.feature{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1px solid var(--border);
  padding:16px 18px;border-radius:14px;
}
.feature i{color:var(--red);margin-top:2px}

/* ============ PROCESS STEPS ============ */
.process .steps{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.step{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:22px;box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:transform .3s ease, background .3s ease;
}
.step span{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:800;margin-bottom:10px;
}
.step:hover{background:var(--red);transform:translateY(-4px)}
.step:hover h4,.step:hover p{color:#fff}
.step h4{margin:0 0 6px}
.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* ============ PRICING TEASER (OPTIONAL) ============ */
.pricing .cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.price-card{
  border:1px solid var(--border);border-radius:18px;background:#fff;padding:26px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);text-align:center;
}
.price{font-size:34px;color:var(--red);font-weight:800;margin:8px 0 16px}
.price-card ul{list-style:none;padding:0;margin:0 0 16px;color:var(--muted)}
.price-card li{margin:8px 0}
.price-card .btn{background:var(--red);color:#fff}
.price-card .btn:hover{background:#fff;color:var(--red)}

/* ============ CTA ============ */
.cta{
  background:linear-gradient(135deg,var(--red),#ff2e63);
  color:#fff;text-align:center;padding:72px 20px;
}
.cta h2{margin:0 0 10px}
.cta p{margin:0 0 20px;color:#fff;opacity:.95}

/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width: 992px){
  .hero{padding:70px 20px}
}
@media (max-width: 768px){
  .hero{padding:56px 18px}
  .btn{padding:12px 22px}
}
@media (max-width:480px){
  .card{padding:20px}
  .price{font-size:30px}
}
</style>
</head>
<body>/* End custom CSS */