/* =========================================================
   DigitalShri – Service Hero (Elementor widget "DS Service Hero")
   Selectors are prefixed with .ds-hero so the Elementor kit's global
   h1/h2/button styles can't override them.
   ========================================================= */
.ds-hero {
  --h-primary: #851CF2;
  --h-secondary: #1E51F1;
  --h-text: #17181C;
  --h-accent: #F38218;
  --h-muted: rgba(23, 24, 28, 0.72);
  font-family: "Montserrat", sans-serif;
  color: var(--h-text);
  padding: 150px 24px 60px; /* top clears the fixed site header; adjustable in Elementor: Style → Spacing */
  background: #FFFFFF;
  box-sizing: border-box;
}
.ds-hero *, .ds-hero *::before, .ds-hero *::after { box-sizing: border-box; }

.ds-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

/* ---------- Text column ---------- */
/* Badge/eyebrow – may be an H1, so every typographic property is set explicitly */
.ds-hero .ds-hero-badge {
  display: inline-block;
  margin: 0;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--h-secondary);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.ds-hero .ds-hero-title {
  margin: 18px 0 20px;
  font-family: inherit;
  font-size: var(--ds-h2-size, 40px); /* global H2 scale, see digitalshri-custom.css */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--h-text);
}

/* Rotating text inside the heading: letters of the old phrase fade out one by one,
   then the new phrase fades in letter by letter, in the same place.
   JS reserves the width of the longest phrase so the words after it don't move. */
.ds-hero .ds-rotate {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  text-align: left;
}
.ds-hero .ds-rotate-word { color: var(--h-primary); }
.ds-hero .ds-rotate-word .ds-l { transition: opacity 0.25s ease; }
.ds-hero .ds-rotate-word .ds-l.is-hidden { opacity: 0; }

.ds-hero .ds-hero-desc, .ds-hero .ds-hero-desc p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--h-muted);
}
.ds-hero .ds-hero-desc p + p { margin-top: 12px; }
.ds-hero .ds-hero-desc a { color: var(--h-primary); }

.ds-hero .ds-hero-points {
  list-style: none;
  margin: 24px 0 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-hero .ds-hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--h-text);
}
.ds-hero .ds-hero-points svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--h-primary);
}

/* ---------- Buttons ---------- */
/* Colours, shape and hover come from the site-wide .ds-btn-universal (Elementor kit),
   same as the homepage buttons. Here we only add layout and the icons. */
.ds-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.ds-hero .ds-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.ds-hero .ds-hero-btn-arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.3s ease; }
.ds-hero .ds-hero-btn:hover .ds-hero-btn-arrow { transform: translateX(4px); }
.ds-hero .ds-hero-btn:focus-visible { outline: 3px solid var(--h-primary); outline-offset: 3px; }

.ds-hero .ds-hero-btn-icon { display: inline-flex; width: 16px; height: 16px; }
.ds-hero .ds-hero-btn-icon svg { width: 100%; height: 100%; fill: currentColor; }
.ds-hero .ds-hero-btn-icon i { font-size: 16px; line-height: 1; }

/* Outline variant for the second button */
.ds-hero .ds-hero-btn-outline {
  padding: 12px 30px;
  border: 2px solid var(--h-accent);
  border-radius: 50px;
  background: transparent;
  color: var(--h-accent) !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  transition: background 0.3s ease, color 0.3s ease;
}
.ds-hero .ds-hero-btn-outline:hover,
.ds-hero .ds-hero-btn-outline:focus-visible {
  background: var(--h-accent);
  color: #FFFFFF !important;
}

/* ---------- Media column: image (shown exactly as uploaded) ---------- */
.ds-hero-media { position: relative; }
.ds-hero-visual { animation: dsHeroFade 0.45s ease both; }
.ds-hero .ds-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 24px;
}
/* Elementor placeholder, only while no image is chosen */
.ds-hero .ds-hero-img.is-placeholder {
  aspect-ratio: 74 / 60;
  object-fit: cover;
  background: rgba(133, 28, 242, 0.06);
}

/* ---------- Media column: form card ---------- */
.ds-hero-form {
  position: relative;
  padding: 34px 32px 30px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid rgba(133, 28, 242, 0.14);
  box-shadow: 0 24px 60px rgba(23, 24, 28, 0.12);
  animation: dsHeroFade 0.45s ease both;
}
.ds-hero-form[hidden] { display: none; }
.ds-hero.is-form-open .ds-hero-visual { display: none; }

.ds-hero .ds-hero-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(133, 28, 242, 0.08);
  color: var(--h-text);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ds-hero .ds-hero-close svg { width: 18px; height: 18px; }
.ds-hero .ds-hero-close:hover, .ds-hero .ds-hero-close:focus-visible { background: var(--h-primary); color: #FFFFFF; transform: rotate(90deg); outline: none; }

.ds-hero .ds-hero-form-title {
  margin: 0 48px 6px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--h-text);
}
.ds-hero .ds-hero-form-sub {
  margin: 0 0 26px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--h-muted);
}
/* Phone + Budget side by side here (the shared .ds-cf7 style makes selects full width) */
.ds-hero-form .ds-cf7 p:has(select) { grid-column: auto; }
.ds-hero-form .ds-word-count { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(23, 24, 28, 0.6); }
.ds-hero-form .ds-word-count.is-over { color: var(--h-accent); font-weight: 600; }

/* Honeypot field: invisible to people, still in the DOM for bots */
.ds-cf7 p:has(.ds-hp), .ds-hp-wrap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@keyframes dsHeroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .ds-hero { padding: 130px 24px 50px; }
  .ds-hero-inner { gap: 40px; }
}
@media (max-width: 900px) {
  .ds-hero-inner { grid-template-columns: 1fr; }
  .ds-hero-media { max-width: 620px; width: 100%; margin: 0 auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ds-hero { padding: 115px 16px 40px; }
  .ds-hero .ds-hero-desc, .ds-hero .ds-hero-desc p { font-size: 16px; }
  .ds-hero .ds-hero-points li { font-size: 15px; }
  .ds-hero-actions { flex-direction: column; align-items: stretch; }
  .ds-hero .ds-hero-btn { width: 100%; }
  .ds-hero-form { padding: 28px 18px 22px; }
  .ds-hero .ds-hero-form-title { font-size: 20px; margin: 0 44px 6px; }
  .ds-hero .ds-hero-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-hero-visual, .ds-hero-form { animation: none !important; }
  .ds-hero .ds-rotate-word .ds-l { transition: none !important; }
  .ds-hero .ds-hero-btn-arrow, .ds-hero .ds-hero-btn-outline, .ds-hero .ds-hero-close { transition: none !important; }
}