:root{
  --bg:#ffffff;
  --blue:#0b1a5e;
  --red:#b30000;
  --text:#222;

  --container: 1200px;
  --px: clamp(16px, 2.5vw, 28px);
  --section-py: clamp(30px, 5vw, 30px);
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.95;                 /* ✅ screenshot style */
}

.container{
  width: min(var(--container), 100% - (var(--px) * 2));
  margin-inline:auto;
}
/* =========================================
   HERO SLIDER
========================================= */
.hero-slider {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
}

/* Dark overlay */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* Content */
.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: min(92%, 900px);
}

.slide-content .breadcrumb {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 10px;
}

.slide-content h1 {
  font-size: 44px;
  font-weight: 800;
  margin: 0;
}

/* Arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
}

.arrow:hover {
  background: #ff3c2f;
}

.prev { left: 20px; }
.next { right: 20px; }

/* Slider responsive */
@media (max-width: 768px) {
  .hero-slider { height: 300px; }
  .slide-content h1 { font-size: 28px; }
}


/* main wrapper */
.seo-main{
  background: #fff;
}


/* ================= INTRO ================= */
.yt-section{
  padding: var(--section-py) 0;
}

.yt-title{
  text-align:center;
  font-family:"Playfair Display", serif;
  color: var(--blue);
  font-weight:700;
  font-size: clamp(28px, 3.6vw, 54px);
  margin-bottom: 8px;
}

.yt-subtitle{
  text-align:center;
  color: var(--red);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 22px);
  margin-bottom: clamp(18px, 2.2vw, 30px);
}

.yt-content{
  max-width: 1100px;
  margin: 0 auto;
}

.yt-content p{
  font-size: 16px;
  margin-bottom: 18px;
}

/* ================= BENEFITS ================= */
.benefit-section{
  padding: var(--section-py) 0;
}

.section-title{
  text-align:center;
  font-family:"Playfair Display", serif;
  color: #0a0f3a;
  font-weight:700;
  font-size: clamp(28px, 3.4vw, 52px);
  margin-bottom: 14px;
}

.section-desc{
  text-align:center;
  max-width: 1000px;
  margin: 0 auto clamp(28px, 3vw, 55px);
  font-size: 16px;
  color:#333;
}

/* ✅ Exactly like screenshots: 2 columns desktop */
.benefit-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 6vw, 110px);
  row-gap: clamp(60px, 7vw, 130px);
  align-items:start;
}

.benefit-item{
  text-align:center;
}

.benefit-icon{
  width: clamp(120px, 12vw, 165px);  /* ✅ big icons like screenshot */
  height:auto;
  margin: 0 auto 18px;
}

.benefit-title{
  font-family:"Playfair Display", serif;
  color:#0a0f3a;
  font-weight:700;
  font-size: clamp(22px, 2.2vw, 34px);
  margin-bottom: 10px;
}

.benefit-text{
  max-width: 520px;
  margin: 0 auto;
  font-size: 16px;
  color:#333;
}

/* ================= SERVICES ================= */
.youtube-services{
  padding: var(--section-py) 0;
}

/* ✅ 3 columns like screenshot */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 90px);
  row-gap: clamp(60px, 7vw, 120px);
  margin-top: clamp(18px, 2vw, 30px);
}

.services-grid-6{
  margin-top: clamp(55px, 6vw, 95px); /* gap between top 3 and next 6 */
}

.service-item{
  text-align:center;
}

.service-icon{
  width: clamp(90px, 9vw, 130px);
  height:auto;
  margin: 0 auto 14px;
}

.service-title{
  font-family:"Playfair Display", serif;
  color:#0a0f3a;
  font-weight:700;
  font-size: clamp(22px, 2.1vw, 32px);
  margin-bottom: 10px;
}

.service-text{
  max-width: 520px;
  margin: 0 auto;
  font-size: 16px;
  color:#333;
}

/* ================= RESPONSIVE ================= */
/* Tablet */
@media (max-width: 992px){
  .benefit-grid{
    grid-template-columns: 1fr;      /* screenshot jaisa mobile flow */
    row-gap: 55px;
  }

  .services-grid{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 55px;
  }
}

/* Mobile */
@media (max-width: 600px){
  .services-grid{
    grid-template-columns: 1fr;
  }

  .benefit-text, .service-text{
    max-width: 100%;
  }

  .yt-content{
    max-width: 100%;
  }
}