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

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* video behind */
}

/* Center both text and SVG together */
.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2; /* in front of the video */
}

/* Title styling */
#title {
  font-size: 100px;
  margin: 0;
}

/* SVG styling */
#logo {
  display: block;
  width: 5rem;
  margin: 20px auto 0; /* space below the text */

}
#video-button {
  display: inline-block;
  padding: 10px 20px;
  color: white;
}

#video-button:hover {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: var(--ras-darkblue);
}
#video-button h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 12px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}


.overlay-content a {
  text-decoration: none;
}

#fullscreen-overlay {
  position: fixed; /* Stays in place even if you scroll */
  top: 0;
  left: 0;
  width: 100vw;    /* 100% of the viewport width */
  height: 100vh;   /* 100% of the viewport height */
  background-color: black; /* Hides the page behind it */
  z-index: 9999;   /* High number to sit above Navbars/Footers */
  display: none;   /* Hidden by default */
  opacity: 0;      /* Started at 0 for the Anime.js fade-in */
}

#full-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Keeps aspect ratio without cropping */
  /* Use 'cover' instead of 'contain' if you want it to bleed edge-to-edge like a background */
}

#close-video {
  position: absolute;
  top: 30px;
  right: 40px;
  color: white;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000; /* Must be higher than the overlay */
  transition: transform 0.3s ease;
}

#close-video:hover {
  transform: scale(1.2);
}

.video-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10001;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    color: white;
    padding: 8px 15px;
    cursor: pointer;
    font-family: inherit;
    min-width: 80px;
}

.progress-container {
    flex-grow: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
}

#progress-bar {
    height: 100%;
    background: var(--ras-darkblue, #007bff); /* Or your brand color */
    width: 0%;
}

/* after video animations */

.text-container {


    padding-top: 10rem;
    padding-bottom: 10rem;
    background-color: var(--ras-darkblue);
    text-align: left;


}


@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5
  }
  to {
    opacity: 1;
    scale: 1;
  }
  
}

.block {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0 cover 40%;
}

#mission-statement {
    color: var(--ras-white);
    display: flex;
    justify-content: flex-start;
    text-align: left;
    width: 90%;
    padding-left: 5rem;
    padding-bottom: 10rem;

}

#mission-statement h1 {
  font-size: 5rem;
  font-family: 'Bodoni', serif;

}

.text h1{
  font-family: 'Theinhard', sans-serif;
  color: var(--ras-white);
  width: 90%;
  padding-left: 5rem;

}

.text h1 a {
  color: inherit;         /* Takes the color from var(--ras-white) */
  text-decoration: none;  /* Removes the default underline */
  font-family: inherit;   /* Ensures it uses 'Theinhardt' */
  font-size: inherit;     /* Matches the h1 size exactly */
}

.text h1 a:hover {
  opacity: 0.8;
  text-decoration: underline; 
  text-decoration-color: var(--ras-electricblue);
}




.logo-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    gap: 4rem;               /* Perfect spacing between logos without margins */
    padding: 2rem;
    flex-wrap: wrap;         /* Automatically stacks on mobile */
}

.logo-container img {
    max-width: 200px;        /* Limits size */
    height: auto;
    object-fit: contain;
}

.block svg {
  color: white;
  width: 10rem;
  display: block;
  margin: 0 auto;

}