:root {
  --brand:#1a472a;
  --accent:#ffd700;
  --white:#fff;
  --muted:#d3d3d3;
}

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

body {
  font-family:Inter,Arial,sans-serif;
  background:#ffffff;
  color:#222;
}
.topbar {
  z-index: 3000;
}
.announcement {
  z-index: 2500;
  position: relative;
}

/* Navbar */
.navbar {
  background:#1a472a!important;
  z-index: 2000 !important;
}

.navbar-brand span,
.brand-title {
  color:var(--brand);
}

.navbar-brand span {
  color:var(--accent)!important;
}

.nav-link {
  color:#fff!important;
}

.nav-link:hover {
  color:var(--accent)!important;
}

/* Announcement */
.announcement {
  background:var(--accent);
  color:#000;
  overflow:hidden;
}



@keyframes slide-left {
  0% {transform:translateX(0);}
  100% {transform:translateX(-100%);}
}

/* Hero */
.hero {
  position:relative;
}

.hero::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,rgba(0,0,0,0.65),rgba(0,0,0,0.25));
  z-index:1;
}

.hero .carousel-item img {
  height:650px;
  object-fit:cover;
}

.hero .carousel-caption {
  z-index:2;
  max-width:650px;
  left:6%;
  bottom:24%;
  text-align:left;
}

/* Course cards */
.course-card {
  background:#ffffff;
  border:1px solid #e6e6e6;
  color:#222;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}

.course-card img {
  height:200px;
  object-fit:cover;
  width:100%;
  border-radius:6px;
}

.course-card:hover {
  transform:translateY(-6px);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}

.course-card h5 {
  color:var(--accent)!important;
  font-weight:600;
  margin-top:auto;
}

/* Gallery */
.gallery img {
  object-fit:cover;
  width:100%;
  height:200px;
  border-radius:8px;
  border:1px solid #eee;
}

/* Footer */
.footer {
  background: transparent;  /* allow background image below */
  color:#fff!important;
}


.footer a {
  color:#fff!important;
}

.footer a:hover {
  color:var(--accent)!important;
}

.footer h6,
.footer-heading {
  color:var(--accent)!important;
}

.footer-text {
  max-width:320px;
  line-height:1.6;
  color:#fff;
}

.footer-bottom {
  color:#ccc;
}

/* Buttons */
.btn-brand {
  background:var(--accent);
  border-color:var(--accent);
  color:#000!important;
  font-weight:600;
}

/* Section underline */
.section-underline {
  width:90px;
  height:4px;
  background:var(--accent);
  border-radius:2px;
  margin:8px auto 0 auto;
}

/* WhatsApp floating button */
.whatsapp-float {
  position:fixed;
  bottom:22px;
  right:22px;
  background:#25D366;
  color:white;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  z-index:2000;
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}

.whatsapp-icon {
  color:#fff;
  font-size:1.6rem;
}


/* Navbar toggler icon */
.navbar-toggler-icon {
  width:30px;
  height:24px;
  position:relative;
  display:inline-block;
  background:none;
  border:none;
}

.navbar-toggler-icon span,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:3px;
  background:#fff;
  transition:all .3s ease;
}

.navbar-toggler-icon::before {
  top:0;
}

.navbar-toggler-icon span {
  top:50%;
  transform:translateY(-50%);
}

.navbar-toggler-icon::after {
  bottom:0;
}

/* Toggler animation */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
  transform:rotate(45deg);
  top:50%;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
  transform:rotate(-45deg);
  bottom:50%;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon span {
  opacity:0;
}

/* About section titles */
.about-title,
.section-title {
  color:#000;
}

/* Faculty, facilities, courses, achievements, gallery, contact background/text */
.faculty-section {
  background:#ffffff;
  color:#222;
}

.facilities-section {
  background:#f8f9fa;
  color:#222;
}

.courses-section {
  background:#ffffff;
  color:#222;
}

.achievements-section {
  background:#ffffff;
  color:#222;
}

.gallery-section {
  background:#ffffff;
  color:#222;
}

.contact-section {
  background:#ffffff;
  color:#222;
}

/* Achievements cards */
.achievements-box {
  background:#22391f;
  min-height:180px;
}

.achievements-number {
  color:var(--accent);
}

.achievements-text {
  color:#ddd;
}

/* Contact/visit */
.contact-subtitle,
.visit-text {
  color:#ccc;
}

.visit-box {
  border-color:#2f4a29!important;
}

/* Social icons */
.social-icon {
  color:#fff;
  
}
.social-icon {
  font-size: 1.3rem;
  transition: transform .25s ease, color .25s ease;
}

/* Hover scale */
.social-icon:hover {
  transform: scale(1.25);
}

/* Brand hover colors */
.social-fb:hover i { color: #1877F2; }
.social-insta:hover i { color: #E4405F; }
.social-yt:hover i { color: #FF0000; }

/* Courses link */
.courses-link {
  color:var(--accent);
}


/* Team / Faculty cards */
/* -------------------------------
   NEW TEAM CARD DESIGN (2025)
--------------------------------*/
/* NEW UPDATED CARD SIZE + FULL PHOTO + EQUAL HEIGHT */
/* NEW yellow theme for team cards */
/* Make card narrower but taller */
/* Faculty Card Design 1 - Elevated Circular */
.faculty-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.faculty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.faculty-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 60px rgba(34, 57, 31, 0.25);
}

.faculty-card .photo-wrapper {
  width: 140px;
  height: 140px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--accent);
  box-shadow: 0 8px 25px rgba(241, 196, 15, 0.4);
  transition: transform 0.3s ease;
}

.faculty-card:hover .photo-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.faculty-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faculty-card h5 {
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.faculty-card p {
  color: #666;
  font-size: 0.95rem;
  margin: 0;
}


.navbar-logo {
  max-height: 48px;  /* change 48px up/down as you like */
  height: auto;
  width: auto;
}

.navbar-brand img {
  display: block;
}

/* Constrain mega dropdown within viewport/container */


/* Mega wrapper full width and uses flex layout */
.mega-wrapper {
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  list-style:none;
  padding: 0;
  margin: 0;
}


/* --- ABOUT + NEWS responsive tweaks --- */
#about .about-title { color:#000; }
#about .about-image { width:100%; height:100%; object-fit:cover; border-radius:8px; max-height:460px; display:block; }
.about-image-wrap { width:100%; height:100%; display:flex; align-items:flex-start; justify-content:center; }

/* Right news panel */
.news-panel { border-radius:12px; border:2px solid var(--brand); }
















/* -------- Announcement Scroller FIX -------- */
.announcement {
  background: var(--accent);
  overflow: hidden;
  white-space: nowrap;
}

.ticker {
  display: inline-block;
  padding-left: 100%;
  animation: tickerMove 18s linear infinite;
  font-weight: 600;
  font-size: 15px;
}

@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Pause on hover */
.announcement:hover .ticker {
  animation-play-state: paused;
}

/* Achievement Image Carousel */
.achievement-img {
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  position: relative;
}

/* Light translucent theme overlay */
.achievement-overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 57, 31, 0.18);  /* very light green overlay */
  border-radius: 12px;
  z-index: 1;
}

/* Make sure overlay stays on top of image */
.carousel-item {
  position: relative;
}

.carousel-item img {
  position: relative;
  z-index: 0;
}

/* Smooth fade transition */
.carousel.carousel-fade .carousel-item {
  transition: opacity 1.2s ease-in-out;
}
/* ABOUT section background image + overlay */
.about-bg {
  position: relative;
  background: url('../images/bg/bg1.jpg') center/cover no-repeat;
  z-index: 1;
}

/* Light translucent overlay */
.about-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.938); /* light white overlay */
  z-index: -1;
}



/* Make sure section content stays above overlay */
.about-bg > .container {
  position: relative;
  z-index: 2;
}

/* FOOTER BACKGROUND WITH TRANSLUCENT OVERLAY */
/* FOOTER GLASS EFFECT – FIXED & WORKING */
.footer-bg {
  position: relative;
  background: url('../images/bg/bg2.jpg') center/cover no-repeat fixed;
  overflow: hidden;
}

/* Light soft green glass overlay */
.footer-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(64, 103, 59, 0.25);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  z-index: 1;

  pointer-events: none; /* 🔥 THIS IS THE FIX */
}

/* Keep footer content on top */
.footer-bg .container {
  position: relative;
  z-index: 10;
}
/* -----------------------------------------
   FIX: Faculty / Team Card Responsive on Mobile
------------------------------------------*/
@media (max-width: 576px) {

  /* Make card padding smaller so content fits */
  .faculty-card {
    padding: 1.5rem 1rem;
  }

  /* Responsive photo size */
  .faculty-card .photo-wrapper {
    width: 110px;
    height: 110px;
    border-width: 4px;
  }

  /* Fix image layout inside wrapper */
  .faculty-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Reduce title size */
  .faculty-card h5 {
    font-size: 1rem;
  }

  /* Reduce description text size */
  .faculty-card p {
    font-size: 0.85rem;
  }
}

/* Tablet size fixes */
@media (max-width: 768px) {
  .faculty-card .photo-wrapper {
    width: 120px;
    height: 120px;
  }
}


/* ------------------------------------
   SCROLL ANIMATION SYSTEM — 2025
-------------------------------------*/

/* Initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s ease;
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s ease;
}

/* When element becomes visible */
.reveal-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}


/* Lightbox Gallery */
.gallery-img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: .3s ease;
  cursor: pointer;
}

.gallery-img:hover {
  transform: scale(1.05);
}

#lightboxModal img {
  max-width: 100%;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}


/* Gallery Hover Title Overlay */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .3s ease;
}

/* Title popup */
.gallery-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 10px;
  background: rgba(0,0,0,0.60);
  color: #fff;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(100%);
  transition: all .3s ease;
  text-align: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Hover effect */
.gallery-item:hover img {
  transform: scale(1.10);
}

.gallery-item:hover .gallery-title {
  opacity: 1;
  transform: translateY(0);
}

/* Trial */
/* Base: container must be relative */
.gallery-item {
  position: relative;
  overflow: hidden;
}

/* Green tint overlay (initially invisible) */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 57, 31, 0.35); /* brand green tint with transparency */
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: 10px;
}

/* Show tint on hover */
.gallery-item:hover::after {
  opacity: 1;
}

/* Existing zoom effect */
.gallery-item:hover img {
  transform: scale(1.10);
}




/* Trial */



.topbar .social-icons a {
  color: #22391f; /* brand green */
  font-size: 1rem;
  transition: color .3s ease;
}

.topbar .social-icons a:hover {
  color: var(--accent); /* yellow */
}

.topbar .btn-call,
.topbar .btn-mail {
  background: var(--brand); /* dark green */
  color: #fff !important;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 4px;
  transition: background .3s ease;
}

.topbar .btn-call:hover,
.topbar .btn-mail:hover {
  background: #1a2e16; /* slightly darker */
}
/* 1. Announcement bar fixed at top */
.announcement {
  background: var(--accent);
  color: #000;
  z-index: 1050;        /* Higher than normal fixed bars */
  height: 34px;         /* define height */
  display: flex;
  align-items: center;
}

/* 2. This spacer pushes the layout down equal to announcement height */
.header-space {
  height: 34px;         /* SAME as .announcement height */
}

/* 3. Topbar sticky under announcement */
.topbar {
  background: var(--brand) !important;  /* very light green */
  z-index: 1040;
  padding: 6px 0;
}

/* 4. Navbar automatically sits below topbar */
.navbar {
  z-index: 1030;
}
.topbar-text {
  color: #22391f;           /* brand green */
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;      /* prevent breaking in small screens */
}

@media (max-width: 576px) {
  .topbar-text {
    font-size: 0.8rem;
  }
}
/* Top Bar Social Icons — original brand colors */
.topbar .social-icons a i {
  font-size: 1.1rem;
  transition: transform .3s ease;
}

.topbar .social-icons a .bi-facebook {
  color: #1877F2;   /* Facebook blue */
}

.topbar .social-icons a .bi-instagram {
  color: #E4405F;   /* Instagram pink/red */
}

.topbar .social-icons a .bi-linkedin {
  color: #0A66C2;   /* LinkedIn blue */
}

.topbar .social-icons a .bi-youtube {
  color: #FF0000;   /* YouTube red */
}

/* Hover effect */
.topbar .social-icons a:hover i {
  transform: scale(1.2);
}


/* Faculty Section with light logo background */
/* Faculty Section with large faint logo */
#faculty {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* Larger logo background */
#faculty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/logo.png') center/520px no-repeat;  /* BIGGER SIZE */
  opacity: 0.08;   /* very light watermark */
  z-index: 1;
}

/* Keep content above logo */
#faculty > .container {
  position: relative;
  z-index: 5;
}

@media (max-width: 576px) {
  .topbar .container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center;
    gap: 6px;
  }

  .topbar-text {
    width: 100%;
    font-size: 0.8rem;
  }

  .topbar .social-icons {
    width: 100%;
    justify-content: center;
  }

  .topbar .d-flex.gap-3 {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 576px) {
  .topbar {
    padding: 4px 0 !important;
  }
}
.topbar .btn-call,
.topbar .btn-mail {
  padding: 6px 10px;     /* smaller padding for icon-only buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;           /* uniform square shape */
  height: 32px;
  border-radius: 6px;
}

.topbar .btn-call i,
.topbar .btn-mail i {
  font-size: 16px;
}
/* COMMON HOVER EFFECT FOR ALL TOP BAR ICONS */
.topbar i {
  transition: transform .25s ease;
}

/* Hover Effect on icons on top bar*/
.topbar a:hover i {
  transform: scale(1.25);
  
}
.topbar a:hover .bi-facebook {
  color: #0E5DF8;
}

.topbar a:hover .bi-instagram {
  color: #ff2f78;
}

.topbar a:hover .bi-linkedin {
  color: #0A5BB5;
}

.topbar a:hover .bi-youtube {
  color: #cc0000;
}

.topbar a:hover .bi-telephone,
.topbar a:hover .bi-envelope {
  color: var(--accent); /* your theme yellow */
}

/* --- Achievement Slider NEW FIX --- */

.achievement-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.achievement-track {
  display: flex;
  align-items: center;
  gap: 8px;                         /* 🔥 Smaller spacing between images */
  white-space: nowrap;
  animation: scrollAchievements linear infinite;
}

/* Desktop – show near-actual size */
.achievement-track img {
  height: auto;                     /* 🔥 natural height */
  width: auto;                      /* 🔥 natural width */
  max-height: 240px;                /* adjust as needed */
  max-width: 100%;
  object-fit: contain;              /* FULL IMAGE, NO CROPPING */
  flex-shrink: 0;
  border-radius: 12px;
}

/* Tablet */
@media (max-width: 992px) {
  .achievement-track img {
    max-height: 180px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .achievement-track img {
    max-height: 130px;
  }
}


/* Base Masonry Container */
.masonry {
    column-count: 4;        /* Desktop */
    column-gap: 18px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* Images auto-fit inside columns */
.masonry-img {
    width: 100%;
    display: block;
    border-radius: 12px;
    transition: transform .3s ease;
}

/* Hover Zoom */
.masonry-item:hover .masonry-img {
    transform: scale(1.08);
}

/* Hover Caption */
.masonry-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 6px 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(100%);
    transition: all .3s ease;
    text-align: center;
}

.masonry-item:hover .masonry-caption {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------
   RESPONSIVE BREAKPOINTS
--------------------------------*/

/* Tablets */
@media (max-width: 992px) {
    .masonry {
        column-count: 3;
        column-gap: 16px;
    }
}

/* Large Mobiles */
@media (max-width: 768px) {
    .masonry {
        column-count: 2;
        column-gap: 14px;
    }

    .masonry-img {
        border-radius: 10px;
    }
}

/* Small Mobiles */
@media (max-width: 480px) {
    .masonry {
        column-count: 1;   /* FULL WIDTH SINGLE COLUMN */
        column-gap: 0;
    }

    .masonry-img {
        width: 100%;
        border-radius: 10px;
    }

    .masonry-item {
        margin-bottom: 14px;
    }
}
/* ------------------------------------
   FACILITIES CARDS — FINAL VERSION
------------------------------------- */

.facility-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 1.6rem;
  height: 100%;                          /* Equal height */
  position: relative;
  overflow: hidden;
  transition: all .30s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Title */
.facility-card h5 {
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.45rem;
  font-size: 1.15rem;
}

/* Badge */
.facility-card .badge {
  font-size: 0.70rem;
  padding: 4px 7px;
  border-radius: 6px;
}

/* Description */
.facility-card p {
  color: #555;
  font-size: 0.88rem;
  margin: 0;
}

/* Hover Elevation */
.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* Icons sizing */
.facility-icon {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

/* Mobile spacing fix */
@media (max-width: 576px) {
  .facility-card {
    padding: 1.3rem;
  }
}
/* ------------------------------------
   GREEN THEMED HOVER GLOW (Facilities)
--------------------------------------*/
.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(34, 57, 31, 0.32); /* soft green glow */
  border-color: var(--brand);
}
.enquiry-page-container {
  background: #f7f7f7;
}

.enquiry-card {
  background: #ffffff;
  width: 100%;
  max-width: 650px;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.enquiry-title {
  font-size: 28px;
  color: #222;
}

.enquiry-underline {
  width: 70px;
  height: 3px;
  background: #c62828; /* SAO Theme Red */
  border-radius: 3px;
  margin-top: 4px;
}

.enquiry-form .form-control,
.enquiry-form .form-select {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
}

.enquiry-form label {
  font-size: 14px;
  color: #444;
}

.enquiry-form button {
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
}

@media (max-width: 576px) {
  .enquiry-card {
    padding: 25px 20px;
  }
}
.input-group-icon {
  position: relative;
}

.input-group-icon .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #c62828;  /* SAO red theme */
  z-index: 5;
}

.input-group-icon .form-control,
.input-group-icon .form-select {
  padding-left: 42px;
  height: 48px;
}

.textarea-icon {
  top: 18%;
}

textarea.form-control {
  padding-left: 42px !important;
  padding-top: 12px;
  min-height: 100px;
}


/* News panel fixed height + vertical scroll only */
#newsListCompact {
    
    overflow-y: auto;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    scrollbar-width: thin;   
    height:100%;      /* Firefox */
}

/* Smooth look of items */
#newsListCompact .list-group-item {
    border: none;
    border-bottom: 1px solid #e6e6e6;
    padding: 0.65rem 0.75rem;
    background: transparent;
}

/* Remove last border */
#newsListCompact .list-group-item:last-child {
    border-bottom: none;
}

/* Responsive height for smaller screens */
@media (max-width: 768px) {
    #newsListCompact {
        max-height: 240px;
    }
}

@media (max-width: 576px) {
    #newsListCompact {
        max-height: 200px;
    }
}
.news-panel {
    height: 100%; /* allow full parent stretch */
    display: flex;
    flex-direction: column;
}

.news-panel .card-body {
    display: flex;
    flex-direction: column;
}

.news-scroll-area {
    flex: 1;               /* fills remaining space */
    overflow-y: auto;
    overflow-x: hidden;
}
/* FINAL FIX – ENSURE SCROLL AREA CAN SHRINK */
.news-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.news-scroll-area {
    flex: 1;
    min-height: 0 !important; /* ESSENTIAL for flex scrolling */
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-backdrop {
    z-index: 2000 !important;
}

.modal {
    z-index: 2050 !important;
}
.footer-legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* allows wrap only on small screens */
  font-size: 0.85rem;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap; /* prevents breaking into two lines */
}

.footer-legal-links a:hover {
  text-decoration: underline;
}

.footer-legal-links span {
  opacity: 0.5;
}



/* =========================================
   REMOVE WHITE GAP AFTER FOOTER
========================================= */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

footer {
    margin-bottom: 0 !important;
}

body {
    overflow-x: hidden;
}

/* ===============================
   BLOG LISTING (Charlie Phase)
================================ */

.blog-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(34, 57, 31, 0.28);
}

.blog-card h5 {
  font-weight: 700;
  color: var(--brand);
}

.blog-card .blog-date {
  font-size: 0.8rem;
  color: #777;
}

.blog-card .blog-excerpt {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.55;
}
.blog-card .btn-read {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all .25s ease;
}

.blog-card .btn-read:hover {
  background: var(--brand);
  color: #fff;
}
/* ===============================
   BLOG PAGINATION
================================ */

.pagination .page-link {
  color: var(--brand);
  border-radius: 6px;
  margin: 0 3px;
  border: 1px solid #e0e0e0;
  font-weight: 600;
}

.pagination .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pagination .page-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
@media (max-width: 576px) {
  .blog-card {
    padding: 0;
  }

  .blog-card h5 {
    font-size: 1rem;
  }

  .blog-card .blog-excerpt {
    font-size: 0.9rem;
  }
}

/* ===============================
   FAQ PAGE STYLES
================================ */

.accordion-button {
  font-weight: 600;
  color: var(--brand);
  background: #ffffff;
}

.accordion-button:not(.collapsed) {
  background: var(--accent);
  color: #000;
}

.accordion-body {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

.accordion-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
}

/* =========================================
   COURSES GRID – AUTO CENTER FIX
========================================= */

.courses-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 🔥 key line */
}

/* Preserve Bootstrap column widths */
.courses-row > [class*="col-"] {
  display: flex;
}
/* =========================================
   PROGRAMS SECTION — CENTER ALIGN FIX
========================================= */

#programs.programs-center .row {
  display: flex;
  justify-content: center;   /* 🔥 centers entire grid */
  flex-wrap: wrap;
}

#programs.programs-center .row > [class*="col-"] {
  display: flex;
}