/* ==========================================================================
   Al-Nasr TRAVELS - LUXURY ISLAMIC & ANIMATED THEME ENHANCEMENTS
   ========================================================================== */

:root {
  --islamic-gold: #c59b27;
  --islamic-gold-light: #f7e7a9;
  --islamic-gold-dark: #9a7414;
  --islamic-gold-gradient: linear-gradient(135deg, #d4af37 0%, #f3e096 50%, #aa7c11 100%);
  --islamic-emerald: #0b6e4f;
  --islamic-emerald-light: #159f73;
  --islamic-emerald-dark: #064431;
  --islamic-purple: #5b2c86;
  --islamic-purple-dark: #3b1759;
  --islamic-purple-light: #7b3eb5;
  --islamic-cream: #faf7f2;
  --islamic-sand: #f4ede2;
  --islamic-card-bg: rgba(255, 255, 255, 0.96);
  --islamic-dark-card: #181326;
  --islamic-border-gold: rgba(212, 175, 55, 0.35);
  --islamic-shadow: 0 15px 35px rgba(91, 44, 134, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04);
  --islamic-shadow-hover: 0 20px 40px rgba(91, 44, 134, 0.16), 0 8px 25px rgba(212, 175, 55, 0.2);
}

/* --------------------------------------------------------------------------
   1. ISLAMIC GEOMETRIC PATTERN BACKGROUNDS
   -------------------------------------------------------------------------- */
body.home-hiking-bg {
  background-color: #f6f2e8 !important;
  background-image: 
    radial-gradient(ellipse 55% 55% at 0% 0%, rgba(91, 44, 134, 0.40) 0%, rgba(91, 44, 134, 0.18) 45%, transparent 75%),
    radial-gradient(ellipse 55% 55% at 100% 0%, rgba(212, 175, 55, 0.45) 0%, rgba(197, 155, 39, 0.22) 45%, transparent 75%),
    radial-gradient(ellipse 55% 55% at 0% 100%, rgba(91, 44, 134, 0.38) 0%, rgba(91, 44, 134, 0.16) 45%, transparent 75%),
    radial-gradient(ellipse 55% 55% at 100% 100%, rgba(11, 110, 79, 0.38) 0%, rgba(212, 175, 55, 0.20) 45%, transparent 75%),
    linear-gradient(to right, rgba(91, 44, 134, 0.26) 0%, rgba(91, 44, 134, 0.10) 8%, rgba(246, 242, 232, 0) 22%, rgba(246, 242, 232, 0) 78%, rgba(197, 155, 39, 0.10) 92%, rgba(197, 155, 39, 0.28) 100%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c59b27' stroke-width='0.9' stroke-opacity='0.22'%3E%3Cpath d='M40 8 L48 24 L64 16 L56 32 L72 40 L56 48 L64 64 L48 56 L40 72 L32 56 L16 64 L24 48 L8 40 L24 32 L16 16 L32 24 Z' fill='%23d4af37' fill-opacity='0.03'/%3E%3Ccircle cx='40' cy='40' r='10' stroke='%235b2c86' stroke-opacity='0.15' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%23c59b27' fill-opacity='0.28' stroke='none'/%3E%3Cpath d='M0 0 L80 80 M80 0 L0 80' stroke-opacity='0.12'/%3E%3Cpath d='M40 0 L40 80 M0 40 L80 40' stroke-opacity='0.14'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23c59b27' fill-opacity='0.24' stroke='none'/%3E%3Ccircle cx='80' cy='0' r='5' fill='%23c59b27' fill-opacity='0.24' stroke='none'/%3E%3Ccircle cx='0' cy='80' r='5' fill='%23c59b27' fill-opacity='0.24' stroke='none'/%3E%3Ccircle cx='80' cy='80' r='5' fill='%23c59b27' fill-opacity='0.24' stroke='none'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 80px 80px !important;
  color: #2b2b2b;
}

.body-bg-one {
  background-color: #fcf9f2 !important;
  background-image: 
    linear-gradient(to right, rgba(91, 44, 134, 0.14) 0%, rgba(252, 249, 242, 0) 12%, rgba(252, 249, 242, 0) 88%, rgba(197, 155, 39, 0.16) 100%),
    radial-gradient(circle at 50% 0%, rgba(197, 155, 39, 0.12) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c59b27' stroke-width='0.75' stroke-opacity='0.14'%3E%3Cpath d='M40 8 L48 24 L64 16 L56 32 L72 40 L56 48 L64 64 L48 56 L40 72 L32 56 L16 64 L24 48 L8 40 L24 32 L16 16 L32 24 Z' fill='%23d4af37' fill-opacity='0.02'/%3E%3Ccircle cx='40' cy='40' r='3.5' fill='%23c59b27' fill-opacity='0.18' stroke='none'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 100% 100%, 100% 100%, 80px 80px !important;
}

.body-bg-three {
  background: linear-gradient(145deg, #150e24 0%, #1e1533 50%, #121927 100%) !important;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(11, 110, 79, 0.12) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0l3 3-3 3-3-3zm0 20l3 3-3 3-3-3z' fill='%23d4af37' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* --------------------------------------------------------------------------
   2. ISLAMIC TOP ANNOUNCEMENT TICKER / RIBBON
   -------------------------------------------------------------------------- */
.islamic-top-ticker {
  background: linear-gradient(90deg, #381557 0%, #5b2c86 35%, #0b6e4f 70%, #381557 100%);
  color: #ffffff;
  padding: 7px 0;
  font-size: 13.5px;
  overflow: hidden;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  position: relative;
  z-index: 99;
}

.ticker-content-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: tickerSlide 38s linear infinite;
}

.ticker-content-track:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 40px;
  color: #fff9e6;
  font-weight: 500;
}

.ticker-item .gold-icon {
  color: #f7e089;
  filter: drop-shadow(0 0 4px rgba(247, 224, 137, 0.6));
}

.ticker-bismillah {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 17px;
  color: #ffd700;
  letter-spacing: 1px;
}

@keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   3. HERO BANNER MAKEOVER (LUXURY, ANIMATED, ISLAMIC)
   -------------------------------------------------------------------------- */
.rts-banner-area-two.slider-banner {
  position: relative;
  overflow: hidden;
  min-height: 680px;
}

/* Animated Flight Airplane Over Hero */
.hero-animated-flight {
  position: absolute;
  top: 18%;
  left: -120px;
  z-index: 10;
  pointer-events: none;
  animation: flightAcrossHero 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-animated-flight .flight-body {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(212, 175, 55, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.5);
  transform: rotate(-4deg);
}

.hero-animated-flight .flight-icon {
  font-size: 22px;
  color: var(--islamic-purple);
  animation: airplanePropel 1.5s ease-in-out infinite alternate;
}

.hero-animated-flight .flight-text {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}

.hero-animated-flight .flight-trail {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 2px;
  border-top: 2px dashed rgba(255, 255, 255, 0.7);
  opacity: 0.8;
}

@keyframes flightAcrossHero {
  0% {
    left: -200px;
    top: 22%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    left: 110%;
    top: 14%;
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  50% {
    left: 110%;
    top: 75%;
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  95% {
    left: -200px;
    top: 68%;
    opacity: 1;
    transform: scaleX(-1);
  }
  100% {
    left: -200px;
    top: 22%;
    opacity: 0;
  }
}

@keyframes airplanePropel {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-3px) rotate(4deg); }
}

/* Floating Islamic Ornamental Elements in Hero */
.hero-floating-decor {
  position: absolute;
  pointer-events: none;
  z-index: 8;
}

.hero-floating-decor.decor-crescent {
  top: 12%;
  right: 8%;
  color: rgba(247, 224, 137, 0.35);
  font-size: 75px;
  filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.4));
  animation: floatSlow 6s ease-in-out infinite;
}

.hero-floating-decor.decor-star {
  bottom: 25%;
  right: 14%;
  color: rgba(255, 215, 0, 0.4);
  font-size: 42px;
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.5));
  animation: spinSlow 20s linear infinite, floatSlow 8s ease-in-out infinite;
}

.hero-floating-decor.decor-kaaba {
  top: 35%;
  right: 4%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 14px 22px;
  border-radius: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
  animation: floatSlow 7s ease-in-out infinite 1s;
}

.hero-floating-decor.decor-kaaba .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--islamic-gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #1a1a1a;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.hero-floating-decor.decor-kaaba .decor-info h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.hero-floating-decor.decor-kaaba .decor-info span {
  font-size: 12px;
  color: #f3e096;
}

@media only screen and (max-width: 991px) {
  .hero-floating-decor {
    display: none !important;
  }
}

/* Hero Overlay Enhancements */
.rts-hero-banner.bg {
  position: relative;
}

.rts-hero-banner.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 10, 36, 0.88) 0%, rgba(26, 15, 48, 0.72) 50%, rgba(11, 110, 79, 0.45) 100%),
              radial-gradient(circle at 10% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 60%);
  z-index: 1;
}

/* Islamic Bismillah in Banner */
.bismillah-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 30px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.bismillah-hero-badge .arabic-text {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 19px;
  color: #ffd700;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.bismillah-hero-badge .badge-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  font-weight: 600;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 10px;
}

/* Hero Content Styling */
.rts-banner-content-area .section-title {
  color: #ffffff !important;
  font-size: 56px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.rts-banner-content-area .section-title span.gold-highlight {
  background: var(--islamic-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-shadow: none;
}

.rts-banner-content-area .desc {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 17px !important;
  max-width: 620px;
  line-height: 1.65 !important;
  margin-bottom: 30px !important;
}

/* Hero Feature Badges Grid */
.hero-trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}

.hero-trust-item:hover {
  background: rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
  border-color: #ffd700;
}

.hero-trust-item i {
  color: #ffd700;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. QUICK PILGRIMAGE BOOKING & INQUIRY BAR
   -------------------------------------------------------------------------- */
.quick-booking-bar-wrapper {
  position: relative;
  z-index: 30;
  margin-top: -55px;
  margin-bottom: 40px;
}

.quick-booking-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(91, 44, 134, 0.14), 0 0 0 2px rgba(212, 175, 55, 0.25);
  padding: 24px 30px;
  position: relative;
  overflow: hidden;
}

.quick-booking-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--islamic-gold-gradient);
}

.booking-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto;
  gap: 18px;
  align-items: flex-end;
}

.booking-field-group {
  position: relative;
}

.booking-field-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--islamic-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.booking-field-group label i {
  color: var(--islamic-gold);
  margin-right: 5px;
}

.booking-field-group select,
.booking-field-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e0d7ea;
  background: #faf8fd;
  color: #2b2b2b;
  font-size: 14.5px;
  font-weight: 600;
  outline: none;
  transition: all 0.3s ease;
}

.booking-field-group select:focus,
.booking-field-group input:focus {
  border-color: var(--islamic-gold);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.booking-submit-btn {
  background: var(--islamic-gold-gradient) !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 13px 26px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  height: 48px;
}

.booking-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(212, 175, 55, 0.5) !important;
  color: #000000 !important;
}

@media only screen and (max-width: 991px) {
  .quick-booking-bar-wrapper {
    margin-top: 20px;
  }
  .booking-form-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   5. SECTION TITLES & ISLAMIC ORNAMENTAL DIVIDERS
   -------------------------------------------------------------------------- */
.section-title-area {
  position: relative;
}

.section-title-area .sub-title {
  color: var(--islamic-purple) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 14px !important;
  background: rgba(91, 44, 134, 0.08) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(91, 44, 134, 0.15) !important;
}

.section-title-area .section-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #1f1530 !important;
  position: relative;
  margin-top: 10px;
  margin-bottom: 12px;
}

/* Islamic Arabesque Divider */
.islamic-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px auto 0;
  max-width: 260px;
}

.islamic-header-divider .divider-line {
  flex-grow: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}

.islamic-header-divider .divider-symbol {
  color: var(--islamic-gold);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   6. WHY CHOOSE US - ISLAMIC ARCHES & STATS COUNTERS
   -------------------------------------------------------------------------- */
.why-choose-left-image-area {
  position: relative;
}

.why-choose-left-image-area .main-image {
  border-radius: 200px 200px 24px 24px !important;
  overflow: hidden !important;
  border: 4px solid #ffffff !important;
  box-shadow: var(--islamic-shadow), 0 0 0 2px rgba(212, 175, 55, 0.4) !important;
  position: relative;
}

.why-choose-left-image-area .floating-image {
  border-radius: 20px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(212, 175, 55, 0.5) !important;
}

/* Islamic Feature Floating Card */
.why-choose-floating-stats {
  position: absolute;
  bottom: -20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 16px 22px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 12px 30px rgba(91, 44, 134, 0.15);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10;
  animation: floatSlow 6s ease-in-out infinite;
}

.why-choose-floating-stats .stats-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--islamic-gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

.why-choose-floating-stats .stats-info h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--islamic-purple);
}

.why-choose-floating-stats .stats-info p {
  margin: 0;
  font-size: 12.5px;
  color: #666666;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. HAJJ & UMRAH PACKAGE CARDS (LUXURY ARCHED STYLING & ANIMATIONS)
   -------------------------------------------------------------------------- */
.hajj-pkg-card {
  background: var(--islamic-card-bg) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: var(--islamic-shadow) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
}

.hajj-pkg-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--islamic-shadow-hover), 0 0 20px rgba(212, 175, 55, 0.25) !important;
  border-color: var(--islamic-gold) !important;
}

.hajj-pkg-card .image-area {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0 !important;
}

.hajj-pkg-card .image-area img {
  transition: transform 0.6s ease;
}

.hajj-pkg-card:hover .image-area img {
  transform: scale(1.08);
}

.hajj-pkg-card .image-area .tag {
  background: var(--islamic-gold-gradient) !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.hajj-pkg-card .image-area .category-badge {
  background: rgba(26, 15, 48, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  color: #f7e089 !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.pkg-header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pkg-header-meta .pkg-badge {
  background: rgba(91, 44, 134, 0.1);
  color: var(--islamic-purple);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pkg-header-meta .pkg-duration {
  background: rgba(11, 110, 79, 0.1);
  color: var(--islamic-emerald);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hajj-pkg-card .content .title a {
  color: #1f1530 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  transition: color 0.3s ease;
}

.hajj-pkg-card .content .title a:hover {
  color: var(--islamic-purple) !important;
}

/* Pricing Grid */
.pkg-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #f8f5fc;
  padding: 12px 10px;
  border-radius: 12px;
  margin: 16px 0;
  border: 1px solid #ebe2f5;
}

.pkg-pricing-grid .price-item {
  text-align: center;
}

.pkg-pricing-grid .price-item .bed-type {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #7d6b91;
  text-transform: uppercase;
}

.pkg-pricing-grid .price-item .price-val {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--islamic-purple);
  margin-top: 2px;
}

.pkg-pricing-grid .price-item .price-val small {
  display: block;
  font-size: 10.5px;
  color: #666666;
  font-weight: 600;
}

/* Inclusions Feature Icons List */
.pkg-inclusions-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  border-top: 1px dashed #e5dcfa;
  border-bottom: 1px dashed #e5dcfa;
  margin-bottom: 15px;
}

.pkg-inclusions-list .inc-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555555;
  font-weight: 600;
}

.pkg-inclusions-list .inc-item i {
  font-size: 15px;
  color: var(--islamic-gold);
}

/* Book Button with Shimmer Sweep */
.hajj-pkg-card .button-area .rts-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  background: var(--islamic-purple) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 12px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(91, 44, 134, 0.25) !important;
}

.hajj-pkg-card .button-area .rts-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: none;
}

.hajj-pkg-card:hover .button-area .rts-btn::after {
  left: 140%;
  transition: all 0.75s ease;
}

.hajj-pkg-card .button-area .rts-btn:hover {
  background: var(--islamic-gold-gradient) !important;
  color: #1a1a1a !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

/* --------------------------------------------------------------------------
   8. SERVICES CARDS (HAJJ & UMRAH)
   -------------------------------------------------------------------------- */
.tour-wrapper-two {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  padding: 14px !important;
  box-shadow: var(--islamic-shadow) !important;
  transition: all 0.35s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.tour-wrapper-two:hover {
  transform: translateY(-5px) !important;
  border-color: var(--islamic-gold) !important;
  box-shadow: var(--islamic-shadow-hover) !important;
}

.tour-wrapper-two .image-area {
  flex-shrink: 0;
  width: 140px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
}

.tour-wrapper-two .image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tour-wrapper-two:hover .image-area img {
  transform: scale(1.1);
}

.tour-wrapper-two .content .title a {
  color: #1f1530 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  transition: color 0.3s ease;
}

.tour-wrapper-two .content .title a:hover {
  color: var(--islamic-purple) !important;
}

.tour-wrapper-two .content .service-desc {
  color: #666666 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

@media only screen and (max-width: 575px) {
  .tour-wrapper-two {
    flex-direction: column !important;
    text-align: center;
  }
  .tour-wrapper-two .image-area {
    width: 100%;
    height: 160px;
  }
}

/* --------------------------------------------------------------------------
   9. TICKETING SECTION - AIRPLANE & LIVE ROUTE BADGES
   -------------------------------------------------------------------------- */
.rts-trip-type-area {
  position: relative;
  overflow: hidden;
}

.ticket-sky-strip {
  background: linear-gradient(135deg, #181126 0%, #2f1747 50%, #0b4533 100%);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.ticket-sky-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.3;
}

.flight-routes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.flight-route-pill {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 10px 20px;
  border-radius: 30px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.flight-route-pill:hover {
  background: var(--islamic-gold-gradient);
  color: #1a1a1a;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4);
}

.flight-route-pill i.fa-plane {
  color: #ffd700;
  font-size: 14px;
}

.flight-route-pill:hover i.fa-plane {
  color: #1a1a1a;
}

.hiking-wrapper.image-transform {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 15px 25px !important;
  border: 1.5px solid rgba(197, 155, 39, 0.25) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 140px !important;
  min-height: 140px !important;
  width: 100% !important;
  transition: all 0.35s ease !important;
  position: relative !important;
}

.hiking-wrapper.image-transform:hover {
  transform: translateY(-6px) !important;
  border-color: var(--islamic-gold) !important;
  box-shadow: 0 14px 28px rgba(197, 155, 39, 0.22) !important;
}

.hiking-wrapper.image-transform .image-area {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hiking-wrapper.image-transform .image-area img,
.hiking-wrapper.image-transform .image-area .hover-image,
.hiking-wrapper.image-transform img {
  max-width: 170px !important;
  max-height: 140px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  display: block !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transition: transform 0.35s ease !important;
}

.hiking-wrapper.image-transform:hover img {
  transform: scale(1.08) !important;
}

/* --------------------------------------------------------------------------
   10. CALL TO ACTION (CTA) AREA MAKEOVER
   -------------------------------------------------------------------------- */
.rts-cta-area .cta-section-inner.hiking {
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

.rts-cta-area .cta-section-inner.hiking::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 10, 36, 0.92) 0%, rgba(91, 44, 134, 0.8) 55%, rgba(11, 110, 79, 0.6) 100%) !important;
  z-index: 1;
}

.rts-cta-area .cta-content-area {
  position: relative;
  z-index: 2;
}

.rts-cta-area .cta-content-area .section-title {
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 800 !important;
}

.rts-cta-area .cta-content-area .section-title span {
  background: var(--islamic-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   11. FLOATING ISLAMIC WHATSAPP & CONTACT RADAR BUTTON
   -------------------------------------------------------------------------- */
.floating-islamic-contact-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.floating-islamic-contact-btn .radar-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
  position: relative;
  transition: transform 0.3s ease;
}

.floating-islamic-contact-btn .radar-btn::before,
.floating-islamic-contact-btn .radar-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0.8;
  animation: radarPulse 2s ease-out infinite;
}

.floating-islamic-contact-btn .radar-btn::after {
  animation-delay: 1s;
}

.floating-islamic-contact-btn:hover .radar-btn {
  transform: scale(1.1);
}

.floating-islamic-contact-btn .contact-tooltip {
  background: #ffffff;
  color: #1a1a1a;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.floating-islamic-contact-btn .contact-tooltip i {
  color: #25d366;
}

@keyframes radarPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@media only screen and (max-width: 575px) {
  .floating-islamic-contact-btn {
    bottom: 20px;
    right: 20px;
  }
  .floating-islamic-contact-btn .contact-tooltip {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. GENERAL KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes spinSlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes goldShimmer {
  0% {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
  }
}

.gold-shimmer-anim {
  animation: goldShimmer 3s ease-in-out infinite;
}

.float-slow-anim {
  animation: floatSlow 5s ease-in-out infinite;
}