/* ================================
   HERO (Scoped only to .xyz-hero)
   ✅ No CTA overflow (Call Now + Get Quote)
   ✅ Bulletproof box-sizing + width control
   ✅ Responsive + professional
================================ */
/* ✅ IMPORTANT: stops overflow issues caused by global box-sizing */
.xyz-hero,
.xyz-hero *{
  box-sizing: border-box;
}
.xyz-hero{
  --xyz-yellow:#ffb400;
  --xyz-white:#ffffff;
  --xyz-muted:rgba(255,255,255,0.78);
  --xyz-overlay:rgba(7,10,18,0.74);
  --xyz-overlay2:rgba(7,10,18,0.52);
  --xyz-radius:18px;
  --xyz-speed:220ms;
  position: relative;
  min-height: clamp(420px, 62vh, 640px);
  display: grid;
  align-items: center;
  overflow: hidden;        /* ✅ prevent horizontal scroll */
  isolation: isolate;
}
/* ===== Background slider ===== */
.xyz-hero .xyz-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.xyz-hero .xyz-hero__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.08);
  opacity:0;
  animation:xyzHeroSlide 18s infinite;
  will-change:opacity,transform;
}
.xyz-hero .xyz-hero__slide--1{
  background-image:url("https://bestastrologervishnu.com/wp-content/uploads/2025/09/love-marriage-specialist1-68d3a493e0207.webp");
  animation-delay:0s;
}
.xyz-hero .xyz-hero__slide--2{
  background-image:url("https://bestastrologervishnu.com/wp-content/uploads/2025/09/love-marriage-specialist-68d3a493a9fd3.webp");
  animation-delay:6s;
}
.xyz-hero .xyz-hero__slide--3{
  background-image:url("https://bestastrologervishnu.com/wp-content/uploads/2025/09/psychic-reading-1-68d3a495a00ce.webp");
  animation-delay:12s;
}
@keyframes xyzHeroSlide{
  0%{opacity:0;transform:scale(1.08)}
  8%{opacity:1;transform:scale(1.04)}
  33%{opacity:1;transform:scale(1.00)}
  41%{opacity:0;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.08)}
}
/* ===== Overlay ===== */
.xyz-hero .xyz-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 600px at 20% 40%, var(--xyz-overlay2), transparent 55%),
    linear-gradient(90deg, var(--xyz-overlay) 0%, rgba(7,10,18,0.55) 55%, rgba(7,10,18,0.25) 100%);
}
/* ===== Container ===== */
.xyz-hero .xyz-hero__container{
  position:relative;
  z-index:2;
  width:min(1200px, 92%);
  margin-inline:auto;
  padding:clamp(26px,4vw,52px) 0;
}
.xyz-hero .xyz-hero__content{
  max-width:880px;
}
/* ===== Title ===== */
.xyz-hero .xyz-hero__title{
  margin:0 0 14px;
  color:var(--xyz-white);
  font-weight:900;
  letter-spacing:-0.8px;
  line-height:1.08;
  font-size:clamp(30px,4.2vw,56px);
}
/* ===== Typing keyword ===== */
.xyz-hero .xyz-hero__typingWrap{
  display:inline-flex;
  align-items:baseline;
  margin-left:10px;
}
.xyz-hero .xyz-hero__typing{
  color:var(--xyz-yellow);
  font-weight:900;
  white-space:nowrap;
  display:inline-block;
  min-width:1ch;
}
.xyz-hero .xyz-hero__caret{
  width:2px;
  height:1.05em;
  background:var(--xyz-yellow);
  display:inline-block;
  margin-left:6px;
  transform:translateY(2px);
  animation:xyzCaretBlink .9s step-end infinite;
}
@keyframes xyzCaretBlink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}
/* underline highlight */
.xyz-hero .xyz-hero__hl2{
  color:var(--xyz-white);
  position:relative;
}
.xyz-hero .xyz-hero__hl2::after{
  content:"";
  position:absolute;
  left:0;
  right:14%;
  bottom:-10px;
  height:6px;
  border-radius:999px;
  background:var(--xyz-yellow);
  transform:skewX(-14deg);
  opacity:.95;
}
/* ===== Subtitle ===== */
.xyz-hero .xyz-hero__subtitle{
  margin:0 0 18px;
  color:var(--xyz-muted);
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.7;
}
.xyz-hero .xyz-hero__brand{
  color:var(--xyz-yellow);
  font-weight:800;
}
/* ===== Bullet points ===== */
.xyz-hero .xyz-hero__points{
  margin:0 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.xyz-hero .xyz-hero__points li{
  color:var(--xyz-white);
  opacity:.92;
  font-weight:800;
  font-size:clamp(15px,1.25vw,18px);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.xyz-hero .xyz-hero__points li::before{
  content:"👉";
  flex:0 0 auto;
  transform:translateY(1px);
}
/* ===============================
   ✅ CTA Buttons (NO OVERFLOW)
================================ */
.xyz-hero .xyz-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:stretch;
  max-width:100%;
}
.xyz-hero .xyz-hero__btn{
  /* ✅ width discipline */
  max-width: 100%;
  flex: 1 1 240px;    /* 2 per row desktop, 1 per row small */
  min-width: 0;       /* ✅ prevents flex overflow */
  text-decoration:none;
  border:0;
  cursor:pointer;
  padding:14px 18px;
  border-radius:18px;
  font-weight:900;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  white-space:nowrap;
  line-height:1;
  transition: transform var(--xyz-speed) ease,
              box-shadow var(--xyz-speed) ease,
              filter var(--xyz-speed) ease,
              background var(--xyz-speed) ease;
  user-select:none;
}
.xyz-hero .xyz-hero__btnIco{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.18);
  flex:0 0 auto;
}
.xyz-hero .xyz-hero__btn--primary{
  background:#e40000;
  color:#fff;
  box-shadow:0 16px 34px rgba(228,0,0,0.28);
}
.xyz-hero .xyz-hero__btn--primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 20px 44px rgba(228,0,0,0.34);
}
.xyz-hero .xyz-hero__btn--ghost{
  background:rgba(255,255,255,0.95);
  color:#111;
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
}
.xyz-hero .xyz-hero__btn--ghost:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,0.22);
}
/* ✅ Mobile polish (keeps SAME look) */
@media (max-width: 720px){
  .xyz-hero{
    min-height:auto;
    padding:26px 0 34px;
  }
  .xyz-hero .xyz-hero__overlay{
    background:
      radial-gradient(900px 520px at 15% 35%, rgba(7,10,18,0.62), transparent 60%),
      linear-gradient(180deg, rgba(7,10,18,0.80) 0%, rgba(7,10,18,0.66) 60%, rgba(7,10,18,0.56) 100%);
  }
  .xyz-hero .xyz-hero__content{
    max-width:100%;
    padding:18px 16px;
    border-radius:18px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 18px 40px rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    overflow:hidden; /* ✅ ensures inner doesn't cause side scroll */
  }
  .xyz-hero .xyz-hero__title{
    font-size:32px;
    line-height:1.12;
    letter-spacing:-0.25px;
    margin-bottom:12px;
  }
  .xyz-hero .xyz-hero__cta{
    flex-direction:column;
    gap:12px;
  }
  .xyz-hero .xyz-hero__btn{
    flex: 1 1 auto;
    width: 100%;
  }
  .xyz-hero .xyz-hero__slide{ animation-duration:24s; }
  .xyz-hero .xyz-hero__slide--2{ animation-delay:8s; }
  .xyz-hero .xyz-hero__slide--3{ animation-delay:16s; }
}
/* extra small phones */
@media (max-width: 380px){
  .xyz-hero .xyz-hero__title{ font-size:28px; }
  .xyz-hero .xyz-hero__content{ padding:16px 14px; }
}
/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .xyz-hero .xyz-hero__slide{
    animation:none;
    opacity:1;
    transform:none;
  }
  .xyz-hero .xyz-hero__caret{
    animation:none;
    opacity:1;
  }
  .xyz-hero .xyz-hero__btn{ transition:none; }
}