:root {
  --brand:#22391f;
  --accent:#f1c40f;
  --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:#22391f!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;
  font-size:1.3rem;
}

/* 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); }
#newsListCompact .list-group-item { border:none; padding:.6rem 0; }
#newsListCompact .news-link { display:flex; justify-content:space-between; gap:.5rem; text-decoration:none; color:var(--brand); }
#newsListCompact .news-meta { color:#6b6b6b; font-size:.85rem; white-space:nowrap; margin-left:auto; }



/* small screens */
@media (max-width:767.98px) {
  .about-image { max-height:360px; }
  #newsListCompact { max-height:220px; }
 
}
/* Vertical auto-scrolling news (upward) */
#newsListCompact {
  overflow:hidden;
  position:relative;
  max-height:300px; /* adjust as needed */
  padding-right:6px;
}

/* Track that will be animated (we duplicate content via JS) */
#newsListCompact .vertical-track {
  display:block;
  will-change: transform;
}

/* Each news item: dotted separator and spacing */
#newsListCompact .vertical-item {
  padding:0.6rem 0;
  border-bottom: 1px dotted rgba(105, 195, 93, 0.5); /* dotted/dashed separator */
  display:block;
}

/* Link style inside item */
#newsListCompact .vertical-item a {
  display:flex;
  justify-content:space-between;
  gap:0.5rem;
  align-items:center;
  text-decoration:none;
  color:var(--brand);
  padding-right:8px;
}

/* meta / date on right */
#newsListCompact .vertical-meta {
  color:#6b6b6b;
  font-size:0.85rem;
  white-space:nowrap;
  margin-left:auto;
}

/* Animation using CSS variable for distance and duration */
@keyframes verticalScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(var(--scroll-distance) * -1)); }
}

/* Apply animation when JS sets --scroll-duration and adds class */
#newsListCompact .vertical-track.running {
  animation-name: verticalScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

/* Pause on hover so user can click */
#newsListCompact:hover .vertical-track.running {
  animation-play-state: paused;
}

/* smaller screens adjustments */
@media (max-width:767.98px) {
  #newsListCompact { max-height:220px; }
  #newsListCompact .vertical-item { padding:0.5rem 0; }
}
/* -------- 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); /* translucent green */
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  z-index: 1;
}

/* 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 {
  width: 100%;
  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 FIX --- */
.achievement-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.achievement-track {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  animation: scrollAchievements linear infinite;
}

/* Image sizes */
.achievement-track img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 12px;
}

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

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

/* Animation */
@keyframes scrollAchievements {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}