/* ===================================
   LANDING PAGES STYLES - checkmywed.com
   =================================== */

/* Page Hero */
.page-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.services-hero { background-image: url("../assets/Images/Cropped-images/Services.png"); }
.partner-hero  { background-image: url("../assets/Images/Cropped-images/Partner\ Verification.png"); }
.astrology-hero{ background-image: url("../assets/Images/Cropped-images/Astrology.png"); }
.marriage-hero { background-image: url("../assets/Images/Cropped-images/Marriage\ Counselling.png"); }

/* Dark overlay for readability */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* Text styling */
.page-title {
  font-size: 3.2rem;
  margin-bottom: .75rem;
  position: relative; z-index: 2;
  color: #ffd700;
  text-shadow: 0 3px 10px rgba(0,0,0,.7);
  font-weight: 800;
  font-family: 'Playfair Display', serif;
}
.page-subtitle {
  font-size: 1.2rem;
  color: #fff; position: relative; z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Responsive hero */
@media (max-width:1024px){ .page-hero{padding:120px 0 60px} .page-title{font-size:2.6rem} .page-subtitle{font-size:1.05rem} }
@media (max-width:768px){  .page-hero{padding:100px 0 54px}  .page-title{font-size:2.2rem}  .page-subtitle{font-size:1rem} }
@media (max-width:480px){  .page-hero{padding:80px 0 40px}   .page-title{font-size:1.8rem}  .page-subtitle{font-size:.95rem} }

/* =========================
   Services Overview (polished)
   ========================= */
.services-overview { padding: 0; }

.service-detail {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
  padding: 2.25rem;
  border-radius: 20px;
  background: var(--secondary-gray);
  box-shadow: var(--shadow-soft);
}

.service-detail.reverse { grid-template-columns: 1.4fr 1.1fr; }
.service-detail.reverse .service-media   { order: 2; }
.service-detail.reverse .service-detail-content { order: 1; }

/* Per-service subtle gradients for a premium feel */
.service-detail.partner   { background: linear-gradient(180deg, #fff8f6 0%, #ffffff 70%); }
.service-detail.astrology { background: linear-gradient(180deg, #fdf6ff 0%, #ffffff 70%); }
.service-detail.counselling{background: linear-gradient(180deg, #f6fffb 0%, #ffffff 70%); }

/* Media block with consistent aspect ratio */
.service-media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transition: transform .35s ease;
}
.service-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.service-detail:hover .service-media { transform: translateY(-4px); }

/* Text */
.service-title {
  font-size: 2.2rem;
  margin-bottom: .75rem;
  color: var(--text-dark);
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.2px;
}
.service-lead {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

/* Feature pills */
.service-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem .9rem;
  margin-bottom: 1.6rem;
}
.feature-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.feature-item i { color: var(--primary-gold, #E4B564); font-size: 1.05rem; }
.feature-item span { color: var(--text-dark); font-weight: 500; font-size: .95rem; }

/* Buttons – slightly elevated gradient */
.btn.btn-primary {
  background: linear-gradient(90deg, #f6b67a, #ff7b89);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .85rem 1.25rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(255, 123, 137, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(255, 123, 137, .35); }

/* Why Choose Us */
.why-choose { background: linear-gradient(180deg, var(--primary-white) 0%, var(--secondary-gray) 100%); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2rem;
  margin-top: 3rem;
}
@media (max-width:1024px){ .why-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){  .why-grid{ grid-template-columns: 1fr; } }

.why-card {
  background: #fff;
  padding: 2.25rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.why-icon {
  width: 80px; height: 80px; margin: 0 auto 1.2rem;
  background: linear-gradient(135deg, var(--primary-gold), #f0c14b);
  border-radius: 50%; display: grid; place-items: center; color:#fff; font-size: 1.8rem;
}
.why-card h3 { font-size: 1.2rem; margin-bottom: .6rem; color: var(--text-dark); }
.why-card p  { color: var(--text-light); line-height: 1.7; }

/* CTA Section */
.cta-section { padding: 5rem 0; background: var(--primary-white); }
.cta-box {
  position: relative;
  background:
    linear-gradient(to top, rgba(163,54,92,.55), rgba(163,54,92,.25), rgba(255,255,255,0)),
    url("../assets/Images/Cropped-images/Contact.png") center/cover no-repeat;
  padding: 4rem; border-radius: 20px; text-align: center; color:#fff;
  box-shadow: var(--shadow-hover); overflow: hidden;
}
.cta-box h2 { font-size: 2.3rem; color:#fff; text-shadow: 0 3px 10px rgba(0,0,0,.7); margin-bottom: .8rem; font-family: 'Playfair Display', serif; }
.cta-box p  { font-size: 1.15rem; color:#f8f8f8; text-shadow: 0 2px 6px rgba(0,0,0,.5); margin-bottom: 1.6rem; }
@media (max-width:480px){ .cta-box{ padding: 3rem 1.5rem; } }

/* Process Steps (unchanged) */
.process-steps { padding: 5rem 0; background: var(--secondary-gray); }
.steps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2rem; margin-top: 3rem; }
.step-card { background:#fff; padding: 2.2rem; border-radius: 16px; text-align: center; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); }
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.step-number { width: 60px; height: 60px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items:center; background: linear-gradient(135deg, var(--primary-blush), var(--accent-rose)); color:#fff; font-size:1.6rem; font-weight:700; box-shadow: var(--shadow-soft); }
.step-card h3 { font-size: 1.25rem; margin-bottom: .7rem; color: var(--text-dark); }
.step-card p  { color: var(--text-light); line-height: 1.7; }

/* Forms (kept; not used here but harmless) */
.form-section { padding: 20px; background: var(--primary-white); }
.form-container { max-width: 700px; margin: 3rem auto 0; background: var(--secondary-gray); padding: 3rem; border-radius: 20px; box-shadow: var(--shadow-soft); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display:block; margin-bottom:.5rem; color: var(--text-dark); font-weight:600; font-size:.95rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.875rem 1rem; border:2px solid #e0e0e0; border-radius:10px; font-size:1rem; transition: var(--transition-smooth); background:#fff; font-family:inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color: var(--primary-blush); box-shadow: 0 0 0 3px rgba(255,182,193,.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; }
.form-submit { text-align:center; margin-top:2rem; }

/* Responsive */
@media (max-width:1024px){
  .service-detail,
  .service-detail.reverse { grid-template-columns: 1fr; }
  .service-detail.reverse .service-media,
  .service-detail.reverse .service-detail-content { order: unset; }
  .service-features { grid-template-columns: 1fr; }
}
@media (max-width:768px){
  .service-detail{ padding: 1.75rem; margin-bottom: 2.5rem; }
  .service-title{ font-size: 1.9rem; }
  .form-row{ grid-template-columns: 1fr; }
  .form-container{ padding: 2rem; }
}
@media (max-width:480px){
  .service-title{ font-size: 1.65rem; }
  .steps-container{ grid-template-columns: 1fr; }
}

/* Modal (unchanged) */
.modal{ display:none; position:fixed; z-index:2000; inset:0; background:rgba(0,0,0,.4); justify-content:center; align-items:center; }
.modal-content{ background:#fff; border-radius:12px; padding:2rem; width:90%; max-width:450px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.2); animation:popIn .3s ease; position:relative; }
.close-btn{ position:absolute; top:10px; right:20px; font-size:1.5rem; cursor:pointer; color:#777; }
#modalTitle{ font-size:1.4rem; color:#D977A0; margin-bottom:1rem; }
#modalMessage{ color:#333; font-size:1rem; line-height:1.5; }
@keyframes popIn{ from{ transform:scale(.8); opacity:0;} to{ transform:scale(1); opacity:1;} }

/* Section headers inside forms (safe to keep) */
.form-section-header{
  font-size:1.5rem; color:var(--text-dark);
  margin:2rem 0 1.5rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--primary-blush);
  display:flex; align-items:center; gap:.5rem;
}
.form-section-header i{ color:var(--primary-blush); }
.form-section-header:first-child{ margin-top:0; }

/* ================================
   READABILITY & ALIGNMENT OVERRIDES
   ================================ */

/* Keep service text left-aligned and consistent */
.service-detail-content { text-align: left; }
.service-detail .service-features { text-align: left; }

/* Strong, high-contrast text colors */
.service-detail-content h2,
.service-title,
.section-title,
.why-card h3 {
  color: #111 !important;           /* deep black for headings */
  font-weight: 800;                  /* crisp weight */
}

.service-lead,
.feature-item span,
.why-card p,
.process-steps .step-card p {
  color: #222 !important;            /* dark gray for body text */
}

/* Feature icon contrast */
/* .feature-item i { */
  /* color: #111 !important;            ensure icons aren't faint */
  /* opacity: 0.9; */
/* } */

/* Buttons remain visible but not overpower text */
/* .btn.btn-primary {
  color: #fff;
} */

/* Optional: ensure any stray center text in cards is left-aligned */
.why-card,
.step-card {
  text-align: left;
}

/* Keep enough contrast in hero subtitle on image */
.page-subtitle { color: #ffffff !important; }