/* ==========================================================================
   ABOUT & DESTINATIONS PAGE PREMIUM MODULE STYLES (BEYOND TRIPS)
   Theme Colors: Primary (#16A34A), Accent (#15803D), Light (#F8FAFC)
   ========================================================================== */

/* Team Cards & Hover Zoom */
.team-avatar-box {
  height: 280px;
  position: relative;
  overflow: hidden;
}

.team-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.team-card {
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease;
  border: 1px solid #E2E8F0 !important;
  background-color: #FFFFFF;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(22, 163, 74, 0.1) !important;
  border-color: var(--primary-color, #16A34A) !important;
}

.team-card:hover .team-avatar-box img {
  transform: scale(1.08);
}

/* Icons & Structural Shape Blocks */
.icon-box-shape {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  transition: transform 0.3s ease;
}

.team-card:hover .icon-box-shape {
  transform: scale(1.1);
}

.mission-card {
  border-left: 5px solid var(--primary-color, #16A34A) !important;
}

.vision-card {
  border-left: 5px solid var(--accent-color, #15803D) !important;
}

/* Experience Stats */
.experience-stat-box {
  transition: all 0.3s ease;
  border: 1px solid #E2E8F0 !important;
}

.experience-stat-box:hover {
  transform: translateY(-6px);
  border-color: var(--primary-color, #16A34A) !important;
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.08) !important;
}

/* Destination Specific Page Classes */
.dest-banner-height {
  height: 220px;
}

.dest-detail-card {
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid #E2E8F0 !important;
}

.dest-detail-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important;
  border-color: var(--primary-color, #16A34A) !important;
}

.dest-img-wrapper {
  height: 230px;
  position: relative;
  overflow: hidden;
}

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

.dest-detail-card:hover .dest-img-wrapper img {
  transform: scale(1.07);
}

.dest-card-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.why-feature-card {
  transition: all 0.3s ease;
}

.why-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(22, 163, 74, 0.08) !important;
  border-color: var(--primary-color, #16A34A) !important;
}

/* Interactive Timeline Milestone Styles */
.timeline-track {
  position: relative;
  padding-left: 35px;
}

/* Base Gray Timeline Background Line */
.timeline-track::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #E2E8F0;
  z-index: 1;
  border-radius: 2px;
}

/* Dynamic Animated Progress Fill Line */
.timeline-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  background: linear-gradient(to bottom, #10B981 0%, #059669 100%);
  height: 0%;
  z-index: 2;
  border-radius: 2px;
  transition: height 0.1s ease-out;
}

.timeline-milestone {
  position: relative;
  margin-bottom: 3.5rem;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.45;
  transform: translateY(15px);
}

.timeline-milestone.active {
  opacity: 1;
  transform: translateY(0);
}

/* Bullet Circles on Timeline */
.timeline-milestone::before {
  content: '';
  position: absolute;
  left: -44px; /* Align perfectly over the line */
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #CBD5E1; /* Inactive gray color */
  border: 4px solid #FFFFFF;
  box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.3);
  z-index: 5;
  transition: all 0.4s ease;
}

.timeline-milestone.active::before {
  background-color: #10B981 !important; /* Active green color */
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4);
  animation: bulletPulse 1.8s infinite alternate ease-in-out;
}

/* Timeline Pulsate Keyframes */
@keyframes bulletPulse {
  0% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.15);
  }
}



/* ==========================================================================
   EXTRACTED INLINE CSS RULES FOR THIS MODULE
   ========================================================================== */
.static-style-114 { max-width: 600px; margin: 0 auto; }
.static-style-115 { width: 50px; height: 50px; min-width: 50px; font-size: 1.25rem; }
.static-style-116 { transform: rotate(-15deg); }
.static-style-117 { transform: rotate(35deg); }
.static-style-118 { display: inline-block; }
.static-style-119 { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 3px; background-color: #10B981; border-radius: 2px; }
.static-style-120 { max-width: 600px; font-size: 1.05rem; }
.static-style-121 { width: 58px; height: 58px; background-color: #E8F6EE; color: #10B981; }
.static-style-122 { transform: rotate(45deg); }
.static-style-123 { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); gap: 20px; }
.static-style-124 { width: 48px; height: 48px; object-fit: cover; }
.static-style-125 { font-size: 0.65rem; }
.testimonial-avatar-img { width: 50px !important;
    height: 50px !important;
    object-fit: cover !important; }