/* ...existing code... */
:root{
  --dark: #040e26;
}
/* Replace any hard-coded uses of #262626 below if needed */
*:not(svg) {
  /* example override for elements using the old dark color */
  color: inherit;
}
.navbar-brand .navbar-logo{
  max-height:80px;  /* Increased from 50px */
  width:auto;
  display:inline-block;
}
@media (max-width:767px){
  .navbar-brand .navbar-logo{ max-height:60px;  /* Increased from 40px */ }
}
/* Equal height boxes for Vision & Mission */
.services-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.services-wrap .img {
    height: 300px; /* Fixed height for images */
    background-size: cover;
    background-position: center;
}

.services-wrap .text {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 300px; /* Minimum height for text content */
}

.services-wrap .text p {
    flex: 1;
    margin-bottom: 0;
}

.services-wrap .text h2 {
    margin-bottom: 1rem;
}

.services-wrap .text .icon {
    margin-bottom: 1rem;
}

/* Make boxes same width on mobile */
@media (max-width: 767px) {
    .services-wrap {
        margin-bottom: 30px;
    }
}

.video-container {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.video-background { position: absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0; background:#000; }
.hero-video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; z-index:0; }
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background: rgba(0,0,0,0.35); }
.hero-wrap .container { position:relative; z-index:2; }

/* play/pause control */
.video-control { position:absolute; bottom:20px; right:20px; z-index:3; background:rgba(0,0,0,0.6); color:#fff; border:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.video-control .fa { font-size:18px; }

.hero-wrap {
    position: relative;
    overflow: hidden;
    height: 100vh; /* full viewport height on desktop */
}

/* Ensure the gif image fills and crops like background-size: cover */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-background .hero-image,
.hero-background img.hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* keeps aspect ratio and fills container */
    object-position: center; /* adjust focal point */
}

/* Mobile: reduce hero height so GIF doesn't dominate screen */
@media (max-width: 767px) {
    .hero-wrap { height: 60vh; } /* adjust as needed: 50-70vh */
    .hero-background .hero-image { object-position: center top; }
}

/* ...existing code... */
