/* =========================
   FONT & BASE STYLES
========================= */
@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

html {
  font-size: 16px; /* minimum base font size */
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}


/* Change close button color */
.lb-close {
  color: white !important;
  font-size: 30px !important;
}

/* Darker overlay */
.lb-overlay {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* Style captions */
.lb-caption {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #f8f8f8;
}

/* =========================
   NAVBAR STYLES
========================= */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    z-index: 1000;
    transition: background-color 0.5s ease;
    background-color: transparent;  /* transparent at top */
}

.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.8);  /* visible on scroll */
}

.nav-left {
    display: flex;
    align-items: center;
}

.logo-text {
    color: white;
    font-size: 24px;
    margin-right: 10px;
}

.logo {
    height: 80px;
    transform: scale(2.2);
    padding-left: 40px;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    transition: color 0.3s;
    padding: 10px;
    -webkit-text-stroke: #000;
    background: rgba(0, 0, 0, 0.5); /* black, semi-transparent */
    padding: 0.05em 0.3em; /* space around text */
    border-radius: 2em;   /* curved corners */
    display: inline-block; /* shrink wrap around text */

}

.nav-links a:hover {
    color: #007bff;
}

/* =========================
   HERO SECTION (TOP IMAGE + MOTTO)
========================= */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 0 20px;
}

.motto {
    font-size: 4rem;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* black, semi-transparent */
    padding: 0.05em 0.3em; /* space around text */
    border-radius: 2em;   /* curved corners */
    display: inline-block; /* shrink wrap around text */
}

.smallerMoto {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.2em 0.5em;
    border-radius: 0.8em;
    
}
/* =========================
   ABOUT SECTION
========================= */
.about-section {
    background-color: #dbeeff;
    padding: 80px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    gap: 40px;
    flex-wrap: wrap;
}

.about-quote {
    flex: 1;
    font-size: 32px;
    font-weight: bold;
    color: #003366;
    text-align: left;
    min-width: 250px;
    display: flex;
    align-items: center; /* vertically center quote */
}

.about-box {
    flex: 1;
    background-color: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    text-align: left;
}

.about-box h3 {
    font-size: 26px;
    margin-bottom: 15px;
    color: #003366;
}

.about-box p {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

/* =========================
   MISSION STATEMENT SECTION
========================= */
.mission-section {
    background-color: #e6f2ff;
    padding: 80px 40px;
}

.mission-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.mission-text {
    flex: 1;
    min-width: 300px;
}

.mission-text h2 {
    font-size: 32px;
    color: #003366;
    margin-bottom: 20px;
}

.mission-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
}

.mission-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.mission-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mission-container {
        flex-direction: column;
        text-align: center;
    }

    .mission-text h2 {
        font-size: 28px;
    }

    .mission-text p {
        font-size: 16px;
    }
}


/* =========================
   COMMUNITY SNAPSHOT SECTION
========================= */
.community-section {
    position: relative;
    background: url('TopImages/GalleryBackground.jpg') no-repeat center center/cover;
    padding: 100px 20px;
    color: white;
    text-align: center;
}

.community-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  max-width: 1500px;   /* shrink the box a bit */
  margin: 0 auto;
  
  /* Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* ✅ vertical centering */
  align-items: center;       /* ✅ horizontal centering */

  min-height: 400px;   /* control height (adjust as needed) */
  padding: 20px;       /* reduced padding so it's not too tall */
}

.community-title {
    font-size: 36px;
    margin-bottom: 10px;
}

.community-subtitle {
    font-size: 20px;
    margin-bottom: 5px;
    color: #ddd;
}

/* Glide.js gallery container */
.community-gallery.glide {
    position: relative;
    /* optional: add padding below to avoid cropping */
    padding-bottom: 20px;
    justify-content: center;
    align-items: center;       /* ✅ vertical centering */
}

/* Glide slide styles */
.glide__slides {
    display: flex !important;
    flex-wrap: nowrap !important;  
    justify-content: center; /* ✅ center all slides */
    align-items: center;       /* ✅ vertically center slides */
    gap: 20px;
    
}

/* Individual slide */
.glide__slide {
    /* Prevent shrinking */
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    padding-top: 15px;   /* Add some vertical breathing room */
    padding-bottom: 15px;
}

/* Images inside slides */
.glide__slide img {
    height: 280px;
    border-radius: 15px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    width: 100%; /* make sure image fills slide */
}

/* Hover effect on images */
.glide__slide img:hover {
    transform: scale(1.10);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3);
}

/* Optional bullets container */
.glide__bullets {
    margin-top: 20px;
    text-align: center;
}

.glide__bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.glide__bullet:hover,
.glide__bullet.glide__bullet--active {
    background: white;
}

/* =========================
   CURVED SECTIONS (if needed)
========================= */
.curved-section {
    background: rgba(0, 0, 0, 0.4);
    background-image: url('tree.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    border-radius: 30px;
    margin: 50px auto;
    max-width: 1000px;
    padding: 10px 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.curved-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    border-radius: inherit;
    z-index: 0;
}

.curved-section h2,
.curved-section p {
    position: relative;
    z-index: 1;
}

/* =========================
   RESPONSIVE STYLES
========================= */
@media (max-width: 768px) {
    .motto {
        font-size: 2rem;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .nav-links li {
        margin: 10px 0;
    }

    .about-container {
        flex-direction: column;
    }

    .about-quote, .about-box {
        min-width: 100%;
        text-align: center;
    }

    .about-quote {
        font-size: 24px;
    }



}


/* ===================
Contact section
======================
*/

/* Contact Section */
.contact-section {
    background-color: #000;
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
}

.contact-box h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #00aaff;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.social-links a img {
    width: 50px;
    height: 50px;
    transition: filter 0.3s ease;
}

.social-links a:hover img {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

.invertImage {
    filter: brightness(0) invert(1);
}

.email-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 18px;
}

.email-bar img {
    width: 30px;
    height: 30px;
}

.email-bar a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.email-bar a:hover {
    color: #00aaff;
}

.location-bar {
    margin-bottom: 40px;
}




/* MOBILE SCALING SECTION */

/* Responsive for contact */
@media (max-width: 768px) {
    .social-links {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .nav-left {
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }

    .logo {
        height: 50px;
        transform: scale(1.2);
        padding-left: 0;
    }

    .logo-text {
        font-size: 18px;
        margin-right: 0;
        margin-top: 5px;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* optional for contrast */
        padding: 10px 0;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .nav-links a {
        font-size: 16px;
        padding: 8px 0;
    }
}

@media (max-width: 768px) {
  .about-section {
    padding: 60px 20px;
  }

  .about-container {
    flex-direction: column;
    align-items: center;         /* ✅ center children horizontally */
    justify-content: center;     /* ✅ center vertically (if needed) */
    text-align: center;
    padding: 0;
    margin: 0 auto;              /* ✅ ensure container itself is centered */
    width: 100%;
  }

  .about-quote,
  .about-box {
    width: 100%;
    max-width: 500px;            /* ✅ prevent full width on large phones */
    min-width: unset;
    margin: 10px 0;
    text-align: center;
    display: flex;
    justify-content: center;     /* ✅ horizontally center contents */
    align-items: center;
  }

  .about-box {
    flex-direction: column;
    padding: 20px;
  }

  .about-quote {
    font-size: 22px;
  }
}


html {
  font-size: 16px; /* minimum base font size */
}