/* ==========================================================================
   Islamabad Visa Services — Homepage visual refresh
   Additive only: extends existing classes, touches no HTML structure other
   than the small hero CTA already added alongside this file. Safe to delete
   this file + its <link> tag to fully revert.
   ========================================================================== */

:root {
  --ref-gold: #b8912f;
  --ref-gold-light: #e7d4a1;
  --ref-black: #0b0b0c;
}

/* ---------- Hero ---------- */

.hero-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--ref-gold-light);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.hero-btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}

.hero-btn-outline:hover {
  background: #ffffff;
  color: var(--ref-black);
  border-color: #ffffff;
}

/* ---------- Section titles, sitewide ---------- */

.sectionTitle__title {
  position: relative;
  display: inline-block;
}

.sectionTitle__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--ref-gold);
  border-radius: 2px;
}

.sectionTitle.-md {
  text-align: center;
}

/* ---------- Destination cards ---------- */

.citiesCard {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.citiesCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(11, 11, 12, 0.18);
}

.citiesCard__bottom .button {
  transition: background 0.25s ease, color 0.25s ease;
}

.citiesCard:hover .citiesCard__bottom .button {
  background: var(--ref-gold);
  color: #ffffff;
}

/* ---------- Service cards (Visa Consultancy / Tickets & Bookings) ---------- */

.ctaCard {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.ctaCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(11, 11, 12, 0.18);
}

.ctaCard__content .button {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ctaCard:hover .ctaCard__content .button {
  background: var(--ref-gold);
  color: #ffffff;
  border-color: var(--ref-gold);
}

/* ---------- Feature icons (Best Price / Easy Booking / 24-7 Care) ---------- */

.featureIcon.-type-1 {
  padding: 30px 20px;
  border-radius: 14px;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.featureIcon.-type-1:hover {
  background: #faf9f6;
  box-shadow: 0 14px 30px rgba(11, 11, 12, 0.1);
  transform: translateY(-3px);
}

/* ---------- Blog cards ---------- */

.blogCard {
  transition: transform 0.3s ease;
}

.blogCard:hover {
  transform: translateY(-4px);
}

.blogCard:hover .blogCard__image img {
  transform: scale(1.04);
}

.blogCard__image {
  overflow: hidden;
  border-radius: 8px;
}

.blogCard__image img {
  transition: transform 0.4s ease;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .citiesCard,
  .ctaCard,
  .featureIcon.-type-1,
  .blogCard,
  .blogCard__image img,
  .citiesCard__bottom .button,
  .ctaCard__content .button {
    transition: none !important;
  }
  .citiesCard:hover,
  .ctaCard:hover,
  .featureIcon.-type-1:hover,
  .blogCard:hover {
    transform: none !important;
  }
}