/* Video-based Mission Section for index-v2 */

.mission {
  padding: 0;
  min-height: 75vh;
  height: 75vh;
  background: #E1DAC8;
}

@media (max-width: 991px) {
  .mission {
    padding-bottom: 100px; 
  }
}

.mission .container-fluid {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.mission .row {
  min-height: 75vh;
  width:100%;
}

.video-container {
  position: relative;
  overflow: hidden;
  height: 75vh;
}

.video-right video {
  object-fit:cover;
}

.video-left video {
  object-fit: contain;
}

.video-left
{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Image styles for mission section */
.mission-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-left .mission-image {
  object-fit: contain;
}

.video-right .mission-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Legacy video styles (keeping for backwards compatibility) */
.mission-video {
  height: 100%;
  width: 100%;
  transition: transform 0.5s ease;
}

.mission-video.video-right {
  width: 100%;
  height: 100%;
  position: relative;
}

.mission-video.video-right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Play videos on hover */
.video-container .mission-video {
  cursor: pointer;
}

.video-container:hover .mission-video.video-left video {
  width:50%;
}

.mission-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

}

.mission-title, .mission-title-low, .mission-title-high {
  font-family: 'Adventure V1', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 56px;
  line-height: 67.2px;
  letter-spacing: -1.12px;
  vertical-align: middle;
  color: var(--color-white);
  transition: transform 0.3s ease;
  text-align: center;
  text-transform: lowercase;
}

/* Specific styling for "to serve, to love" text */
.mission-title {
  line-height: 60px;
}

.mission-title-high {
  display: block;
  margin: 0;
  transform: translateX(-80px);
}

.mission-title-low {
  display: block;
  margin: 0;
  transform: translateX(10px);
}


/* Responsive styles */
@media (max-width: 991px) {
  .mission .row {
    min-height: auto;
  }
  
  .video-container {
    height: 50vh;
  }
  
  .mission-title, .mission-title-high, .mission-title-low {
    font-size: var(--font-size-xl);
  }
}

/* Mobile screens */
@media (max-width: 991px) {
  .mission {
    height: auto;
    min-height: auto;
  }
  
  .mission .row {
    flex-direction: column;
  }
  
  .video-container {
    height: 50vh;
  }
  
  .video-left, .video-right {
    width: 100%;
  }
  
  /* Mobile positioning to balance text properly */
  .mission-title-high {
    margin-left: 0;
    transform: translateX(-50px); /* Reduced from -60px to balance with right side */
  }
  
  .mission-title-low {
    margin-left: 0;
    transform: translateX(15px); /* Reduced from 10px to match the balance */
  }
  
  /* Mobile styling for "on a mission" text */
  .mission-title-high, .mission-title-low {
    font-family: 'Adventure V1', sans-serif;
    font-weight: 500;
    font-size: 49px !important;
    line-height: 47.2px;
    letter-spacing: -1.12px;
    vertical-align: middle;
  }
  
  /* Mobile styling for "to serve to love" text */
  .mission-title {
    font-family: 'Adventure V1', sans-serif;
    font-weight: 500;
    font-size: 42px !important;
    line-height: 48px;
    letter-spacing: -1.12px;
    vertical-align: middle;
  }
}

/* Extra small screens */
@media (max-width: 576px) {
  .video-container {
    height: 40vh;
  }
  
  .mission-title, .mission-title-high, .mission-title-low {
    font-size: var(--font-size-lg);
  }

}