body:not(.home) .page-banner {
    padding-top: 40px;
}
.page-banner {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-banner img {
  width: 100vw !important;
  height: auto !important;
  object-fit: cover !important;
  margin-top: 43px !important;
  padding-bottom: 40px;
}

/******************************************************************************/
/* Basic Video Banner Styles*/
/******************************************************************************/
.video-banner-container {
    position: relative;
    width: 100vw; /* Full viewport width */
    min-height: 100vh; /* Changed from height to min-height for flexibility */
    overflow: hidden;
}

.video-banner {
    object-fit: cover;  /* Ensures the video fills the container */
    width: 100%;        /* Make sure the video spans the entire width */
    height: 100%;       /* Make sure the video spans the entire height */
    position: absolute; /* Position it absolutely to fill the container */
    top: 0;             /* Align to the top */
    left: 0;            /* Align to the left */
}

/* Banner text container */
.banner-text {
    position: absolute;
    bottom: 120px; /* Move text above the button */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 100%; /* Ensure full width of the screen */
}

/* Video Titles Styling */
.video-titles {
  margin: auto 0;
  font-size: 45px; /* Default to 45px on desktop */
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  text-align: center;
  max-width: 90%; /* Limit the width of the title area */
  margin-bottom: 20px; /* Space between title and button */
  white-space: normal; /* Allow wrapping */
  word-wrap: break-word; /* Allow words to break and wrap */
  overflow-wrap: break-word; /* Ensure the text wraps properly */
}

/* Ensure the titles are initially hidden */
.video-title {
    display: block;
    opacity: 0; /* Initially hide the title */
    transition: opacity 1s ease-in-out; /* Fade transition */
    position: absolute; /* Overlay titles in the same spot */
    width: 100%; /* Make sure titles fill the container */
}

/* When the title becomes active, make it visible */
.video-title.active {
    opacity: 1; /* Show title when it has the 'active' class */
}

/* Button text styling */
.video-button-text {
    margin:auto 0;
    font-size: 25px; /* Keep the button text size at 25px */
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    /* For tablets (768px to 1024px) */
    .video-titles {
        font-size: 40px; /* Adjust to 40px for tablet screens */
        max-width: 90%; /* Allow a larger area for title text */
    }

    .video-button-text {
        font-size: 25px; /* Keep the button text size at 25px */
        margin-top: 30px;
    }

    .banner-text {
        bottom: 90px; /* Move banner text a bit higher on smaller screens */
    }
}

@media (max-width: 768px) {
    /* For smaller screens (phones, 480px to 768px) */
    .video-titles {
        font-size: 35px; /* Adjust to 35px for smaller screens */
    }

    .video-button-text {
        font-size: 25px; /* Keep the button text size at 25px */
    }

    .banner-text {
        bottom: 60px; /* Move text further up on very small screens */
    }
}

@media (max-width: 480px) {
    /* For very small screens (phones < 480px) */
    .video-titles {
        font-size: 30px; /* Adjust to 30px for very small screens */
    }

    .video-button-text {
        font-size: 25px; /* Keep the button text size at 25px */
    }

    .banner-text {
        bottom: 50px; /* Further adjust positioning on small screens */
    }
}

/******************************************************************************/
/* BOARD OF DIRECTORS */
/******************************************************************************/
.bod-section {
  padding: 40px 20px;
}

.bod-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.bod-card {
  flex: 0 0 calc(33.333% - 40px);
  text-align: center;
  position: relative;
  min-width: 200px;
}

/* Tooltip wrapper */
.bod-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

/* Image */
.bod-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Change opacity on hover */
.bod-tooltip-wrapper:hover .bod-image {
  opacity: 0.6;         /* semi-transparent */
  transform: scale(1.05); /* optional zoom effect */
}

/* Name */
.bod-name {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 5px;
  transition: color 0.3s ease;
  cursor: pointer;
}

.bod-tooltip-wrapper:hover .bod-name {
  color: #0056b3;
}

/* Tooltip square */
.bod-tooltip {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%) scale(0.7);

  width: 420px;             /* fixed square */
  height: auto;            /* fixed square */
  box-sizing: border-box;
  padding: 15px;

  background: #D6AB33;      /* yellow-gold */
  color: #ffffff;           /* white text */
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;

  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);

  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Show tooltip on hover */
.bod-tooltip-wrapper:hover .bod-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%) scale(1);
}

/******************************************************************************/
/* PTA */
/******************************************************************************/
.pta-section {
  padding: 40px 20px;
}

/* Row Layout — EXACT MATCH to .bod-row */
.pta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;               /* same spacing as BOD */
  justify-content: center; /* center align like BOD */
}

/* PTA Card — EXACT MATCH to .bod-card */
.pta-card {
  flex: 0 0 calc(33.333% - 40px); /* same width as BOD */
  text-align: center;
  position: relative;
  min-width: 200px;              /* same minimum width */
}

/* Wrapper for hover effect on image */
.pta-wrapper {
  display: inline-block;
  position: relative;
}

/* PTA Image — same size as BOD image */
.pta-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;           /* same margin as BOD image */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover effect on image ONLY (no tooltip) */
.pta-wrapper:hover .pta-image {
  opacity: 0.6;
  transform: scale(1.05);
}

/* PTA Member Name */
.pta-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}