.elementor-kit-6{--e-global-color-primary:#679353;--e-global-color-secondary:#679353;--e-global-color-text:#FFFFFF;--e-global-color-accent:#679353;--e-global-color-9cea799:#121411;--e-global-color-92bc4e0:#CCCCCC;--e-global-color-03c810e:#E9E7E8;--e-global-typography-primary-font-family:"Syne";--e-global-typography-primary-font-size:35px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-letter-spacing:3px;--e-global-typography-secondary-font-family:"Syne";--e-global-typography-secondary-font-size:15px;--e-global-typography-secondary-font-weight:100;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:3px;--e-global-typography-text-font-family:"Nunito Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Nunito Sans";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:3px;background-color:#000000;font-family:"Nunito Sans", Sans-serif;font-size:15px;font-weight:300;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Syne:wght@100;200&display=swap');

/* ----------------- Video Block Container ----------------- */
.video-block { 
  width: 100%; 
  max-width: 700px; 
  margin: 40px auto; 
  font-family: 'Syne', sans-serif; 
}

/* ----------------- Video Wrapper ----------------- */
.video-wrapper { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 1.85/1; 
  background: #000; 
  overflow: hidden; 
  cursor: pointer; 
}

/* ----------------- Video Element ----------------- */
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--video-position, center 10%); /* Per-video cropping */
  display: block;
}

/* ----------------- Overlay (Titles & Subtext) ----------------- */
.video-overlay { 
  position: absolute; 
  inset: 0; 
  background: rgba(0,0,0,0); 
  pointer-events: none; 
  transition: background 0.25s ease; 
}

.overlay-title { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  color: #fff; 
  font-weight: 200; 
  font-size: 18px; 
  text-transform: uppercase; 
  letter-spacing: 3px; 
  text-align: center; 
  max-width: 95%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  opacity: 0; 
  transition: opacity 0.25s ease, transform 0.25s ease; 
}

/* ----------------- Clickable underline indicator ----------------- */
.overlay-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0%;
  height: 1px;
  background: #fff;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.overlay-subtext { 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  bottom: 8%; 
  color: #fff; 
  font-weight: 100; 
  font-size: 13px; 
  text-transform: uppercase; 
  letter-spacing: 3px; 
  text-align: center; 
  max-width: 90%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  opacity: 0; 
  transition: opacity 0.25s ease; 
}

/* ----------------- Desktop Hover Effects ----------------- */
@media (min-width: 1025px) {
  .video-wrapper:hover .video-overlay { background: rgba(0,0,0,0.3); }
  .video-wrapper:hover .overlay-title { opacity: 1; }
  .video-wrapper:hover .overlay-subtext { opacity: 1; }

  /* Animate underline on hover */
  .video-wrapper:hover .overlay-title::after {
    width: 60%;
  }
}

/* ----------------- Tablet ----------------- */
@media (max-width: 1024px) {
  .video-overlay { background: rgba(0,0,0,0.3); }
  .overlay-title { opacity: 1; white-space: normal; font-size: 14px; }
  .overlay-subtext { opacity: 1; font-size: 8px; bottom: 12%; }
  .overlay-title::after { width: 60%; } /* underline always visible */
}

/* ----------------- Mobile ----------------- */
@media (max-width: 480px) {
  .overlay-title { font-size: clamp(16px, 6vw, 18px); white-space: nowrap; }
  .overlay-subtext { font-size: 12px; bottom: 10%; }
  .video-block { margin: 50px auto; }
}

/* ----------------- Modal (Lightbox) ----------------- */
.video-modal { 
  display: none; 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.85); 
  justify-content: center; 
  align-items: center; 
  z-index: 999999 !important; 
}

.video-modal.active { display: flex; }

.video-modal-content { 
  position: relative; 
  width: 90%; 
  max-width: 1000px; 
  aspect-ratio: 1.85/1; 
  background: #000; 
  border-radius: 8px; 
  overflow: hidden; 
  box-shadow: 0 0 30px rgba(0,0,0,0.6); 
}

.video-modal-content iframe { 
  width: 100%; 
  height: 100%; 
  border: 0; 
  display: block; 
}

.video-modal-close { 
  position: absolute; 
  top: 10px; 
  right: 15px; 
  font-size: 30px; 
  color: #fff; 
  cursor: pointer; 
  background: rgba(0,0,0,0.5); 
  border-radius: 50%; 
  line-height: 1; 
  padding: 5px 10px; 
}

/* ----------------- Disable scroll when modal is open ----------------- */
body.no-scroll { overflow: hidden; }/* End custom CSS */