* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
   
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

/* style.css */

::selection {
  background-color: var(--brand-main);
  color: #ffffff; /* selected text color */
}


h4,
h6,
h2,
h3,
label,
input,
span,ul,li

p{
    font-family: "Rubik", sans-serif;
    font-style: normal;
    letter-spacing: .5px;

}
h1{
  font-family: "Rubik", sans-serif;
  
  font-weight: 900;
  font-style: normal;
}
    :root {
      --brand-main: #7BAF4B;
      --brand-accent: #E6E1C9;
      --brand-secondary: #076050;
      --light-bg: #F7F7F7;

      --white: #ffffff;
      --black: #000000;

     
    }






    body {
      overflow-x: hidden !important;
    }

    /* ========== Navbar ========== */
    /* GLASS NAVBAR */
    .custom-navbar {
      background: rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(12px) saturate(160%);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      position: sticky;
      top: 0;
      z-index: 2000;
    }

    /* NAV LINKS */
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: 600;
      padding: 8px 15px;
      border-radius: 25px 0 25px 0;
      transition: 0.1s;
      position: relative;
      overflow: hidden;
      
    }
    .navbar-nav .nav-link,
.side-menu .nav-link {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500;
    letter-spacing: 1px;
}


    .navbar-nav .nav-link::before {
      content: "";
      position: absolute;
      top: 0;
      right: -120%;
      width: 120%;
      height: 100%;
      background: linear-gradient(to left,
          rgba(255, 255, 255, 0) 0%,
          rgb(123, 175, 75) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: skewX(-25deg);
      transition: none;
      /* no transition on idle state */
    }

    .navbar-nav .nav-link:hover::before {
      right: 120%;
      transition: 0.6s ease;
      /* only animate on hover */
    }


    .navbar-nav .nav-link:hover {
      color: #E6E1C9;

      background: rgba(255, 255, 255, 0.05);
      /* barely-there glass layer */
      backdrop-filter: blur(10px);
      /* the actual magic */
      -webkit-backdrop-filter: blur(10px);
      /* for Safari being dramatic * /* translucent border */

    }




    /* IF YOU WANT ICONS TO MATCH */
    .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.5) !important;
    }

    .navbar-toggler-icon {
      filter: brightness(0) invert(1);
    }

.banner {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
              url('../images/index-hero-banner.webp') center/cover no-repeat;
  overflow: hidden;
}

    /* margin top */
    /* Custom top margin in pixels */
    .section-mt {
      margin-top: 32px;
      /* small screens */
    }

    /* Medium screens (tablet and up) */
    @media (min-width: 768px) {
      .section-mt {
        margin-top: 64px;
      }
    }

    /* Large screens (desktop and up) */
    @media (min-width: 1200px) {
      .section-mt {
        margin-top: 96px;
      }
    }


   
    .welcome {
      max-width: 1600px;
      margin-left: auto;
      margin-right: auto;
   
    }



    /* Make the welcome section full width and red */


    @media (min-width: 768px) {
      .welcome {
        padding-left: 80px;
        padding-right: 80px;
      }
    }

    @media (min-width: 1200px) {
      .welcome {
        padding-left: 160px;
        padding-right: 160px;
      }
    }

    /* Desktop font sizes */
    @media (min-width: 992px) {
      .welcome h4 {
        font-size: 22px;
      }

      .welcome h1 {
        font-size: 64px;
        line-height: 72px;
      }


      .welcome h6 {
        font-size: 22px;
        line-height: 32px;
      }

      .welcome img {
        max-width: 500px;
        /* main image smaller than full column */
      }
    }

    /* buttons */
    .btn.btn-custom-glass {
      color: #ffffff;
      font-weight: 500 !important;
    
      padding: 8px 15px;
      border-radius: 25px 0 25px 0;
      background: rgba(255, 255, 255, 0.12);
      /* frosted base */
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
        font-family: "Rubik", sans-serif;
      
      letter-spacing: 1.2px;
      transition: 0.5s;
      position: relative;
      overflow: hidden;
      
    }

    .btn.btn-custom-glass:hover {
     
      color: #E6E1C9;
      letter-spacing: 2px;
    }


    .btn.btn-custom-glass::before {
      content: "";
      position: absolute;
      top: 0;
      right: -120%;
      width: 120%;
      height: 100%;
      background: linear-gradient(to left,
          rgba(255, 255, 255, 0) 0%,
          rgb(123, 175, 75) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: skewX(-25deg);
      transition: 0.6s ease;

    }

    .btn.btn-custom-glass:hover::before {
      right: 120%;
    }


    /* non-glass buttons */
      .btn.btn-custom {
        background-color: #7BAF4B;
      color: #ffffff;
      font-weight: 500 !important;
    
      padding: 8px 15px;
      border-radius: 25px 0 25px 0;
      font-family: "Rubik", sans-serif;
      
      letter-spacing: 1.2px;
      transition: 0.5s;
      position: relative;
      overflow: hidden;
      
    }

    .btn.btn-custom:hover {
     
      background-color:#43704e;
      color: white;
      letter-spacing: 2px;
    }



    .glassy {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px) saturate(150%);
      -webkit-backdrop-filter: blur(10px) saturate(100%);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 2rem;

    }


    /* whole menu section spacing */
    .menu {
      padding-block: 3rem;
    }

    /* give some padding from edges if wide-container kills it */
    .menu .wide-container {
      padding-inline: 2rem;
    }

    /* flex wrapper for the 3 columns */
    .menu-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
     
      justify-content: center;
    }

  
    .menu-column {
      flex: 1 1 280px;
      max-width: 380px;
    }

    .glassy-card {
      background: rgba(255, 255, 255, 0.12) !important;
      backdrop-filter: blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 1.75rem 1.5rem;
    }

    .glassy-card h2,
    .glassy-card h3,
    .glassy-card h4 {
      color: #e9e6e6;
    }

    h4 {
      color: var(--brand-main) !important;
      font-weight: 500 !important;
    }

    /* make the description text soft grey */
    .glassy-card p {
      color: rgba(233, 233, 233, 0.6) !important;
    }

    /* if your hr turned weird, fix it too */
    .glassy-card hr {
      border-color: rgba(255, 255, 255, 0.25);
    }


    /* optional: tighter spacing in card title */
    .title-menu h4 {
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* item spacing */
    .menu-item:not(:last-child) {
      margin-bottom: 0.75rem;
    }

    /* responsive tweak */
    @media (max-width: 768px) {
      .menu .wide-container {
        padding-inline: 1rem;
      }

      .glassy-card {
        padding: 1.5rem 1.25rem;
      }
    }

    .menu-column.glassy-card {
      background-color: transparent !important;
    }

    /* Make sure all interior content sits above the blur */

section.menu {
    background:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
      url('../images/index-menu-background.webp') center / cover no-repeat;
    background-attachment: fixed;
}

/* Mobile fix */
@media (max-width: 768px) {
    section.menu {
        background-attachment: scroll;
        background-position: center;
        background-size: cover;
    }
}


    /* about section */
    .about-img {
      width: 100%;
      max-width: 350px;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      display: block;
      margin: 0 auto;
    }



    /* Make counter numbers green */
    h2.counter.fw-bold.display-5 {
      color: #7abf8a !important;
      
    }

    /* Make labels lighter */
    .facilites-accomp p {
      color: rgba(255, 255, 255, 0.7) !important;
      
    }




    /* testimonial css */
    .tinted-glass {
      background: rgba(0, 0, 0, 0.22);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4.1px);
      -webkit-backdrop-filter: blur(4.1px);
      border: 1px solid rgba(0, 0, 0, 0.27);

    }

    /* Position nav buttons */
    .owl-nav {
      margin-top: 20px;
      text-align: center;
    }

    /* Nav button container */
    .owl-nav button {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      width: 55px;
      height: 55px;
      border-radius: 14px;
      margin: 0 10px;
      transition: 0.3s ease;
    }

    /* Arrow icons (span) */
    .owl-nav button span {
      font-size: 32px !important;
      color: var(--brand-main) !important;
      line-height: 55px;
      display: block;
    }

    /* Hover effect */
    .owl-nav button:hover {
      background: rgba(255, 255, 255, 0.18) !important;
      transform: translateY(-3px);
    }

    #aboutCarousel .carousel-item {
      min-height: 70vh;
    }

    .col-lg-8.col-md-12.right-form.rounded-5.p-5.mt-5.mt-lg-0{
      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../images/contact-form-background.webp') center/cover no-repeat;

      min-height: 60vh;
      min-width: auto;


    }
form .form-control::placeholder {
  color: #bdb7b7;
}
form,textarea{
  color: #F7F7F7;
}
label.form-label.fw-semibold{
  color: #e9e6e6;
}
form .form-control {
  border-radius: 12px;
}
input.form-control.glassy.p-3 {
    background: none;
    border-color: rgba(255, 255, 255, 0.25);
    color:#F7F7F7;
}
textarea.form-control.glassy.p-3{
   background: none;
    border-color: rgba(255, 255, 255, 0.25);
    color:#F7F7F7;

}
span{
  color: #000000 !important;
}

/* footer code */
.footer a.footer-link:hover {
  text-decoration: underline;
  color: #fff;
}

.footer i {
  color: #fff;
}

.footer p, .footer h5 {
  color: #fff;
}

@media (max-width: 767px) {
  .footer .d-flex {
    justify-content: start;
  }
}

footer{
  /* background: linear-gradient(135deg, #FFB20B, #7ABF8A); */
  background: #df9c0c;
}

/* Background image container */
.stats-bg {
    background: url('../images/about-us-right-image.jpg') center/cover no-repeat;
    height: 100%;
    min-height: 350px; 
}

/* Overlay */
.stats-overlay {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    padding: 20px;
   
}

/* Counter items */
.stat-item {
    margin-bottom: 20px;
}

.stat-item h2 {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
}

.stat-item p {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: #e9e2e2 !important;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .stats-bg {
        min-height: 260px;
    }

    .stat-item {
        margin-bottom: 15px;
    }
}
/* language dropdown */
a#langDropdown{
  color: #ffffff !important;
}