/* Default (mobile first – let Bootstrap handle it) */

/* Laptop / Desktop – height control */
@media (min-width: 992px) {
  .top-image img {
    max-height: 220px;     /* yahan adjust karo 180–240 */ /* image cut NAHI hogi */
  }
}
@media (max-width: 576px) {
  .custom-navbar {
    zoom: 0.55;          /* 🔽 bas thoda aur */
  }

  .custom-navbar .nav-link {
    padding: 5px 6px;   /* 🔽 1px kam */
    font-size: 12px;
    font-weight: bold;  /* 🔽 halka sa */
  }
}

.custom-navbar {
  margin-top: 8px;
  background: linear-gradient(to bottom, #9b1c1c, #c9302c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
              0 4px 10px rgba(0,0,0,0.35);
  padding: 0;
}

.custom-navbar .nav-link {
  color: #fff;
  font-weight: 500;
  padding: 12px 18px;
  transition: all 0.25s ease;
}

.custom-navbar .nav-link:hover {
  background: white;
  color: black;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 7px;
  font-weight: 800;
}

/* Dropdown */
.custom-navbar .dropdown-menu {
  background: rgba(155, 28, 28, 0.95); /* red + transparent */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 6px 15px rgba(0,0,0,0.35);
  padding: 5px 0;
}

/* Dropdown text */
.custom-navbar .dropdown-item {
  color: #ffffff;
  font-weight: 600;
  padding: 10px 18px;
  transition: background 0.3s ease;
}

/* Hover effect */
.custom-navbar .dropdown-item:hover {
  background: linear-gradient(
    to bottom,
    rgba(255, 120, 120, 0.85),   /* light red top */
    rgba(155, 28, 28, 0.95)     /* deep red bottom */
  );
  color: #ffffff;

  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.9);
}
/* Hover dropdown (desktop + mobile both) */
.custom-navbar .dropdown:hover .dropdown-menu {
  display: block;
}



/* ======================
   CAROUSEL STYLING
====================== */

/* Desktop height */
.carousel-img {
  height: 440px;
  object-fit: cover;
}

/* Arrow buttons */
.custom-arrow {
  width: 60px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 18px;
  background-size: 100% 100%;
}

/* Indicators position */
.custom-indicators {
  bottom: 12px;
}

/* Indicator boxes */
.custom-indicators button {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: #cfcfcf;
  border: none;
  margin: 0 4px;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Active indicator */
.custom-indicators .active {
  background-color: #0b7a3b;
  transform: scale(1.2);
}

/* Smooth fade transition */
.carousel-fade .carousel-item {
  transition: opacity 1s ease-in-out;
}

/* Soft zoom effect */
.carousel-item img {
  transform: scale(1.05);
  transition: transform 6s ease;
}

.carousel-item.active img {
  transform: scale(1);
}

/* MOBILE VIEW – half breadth + small indicators */
@media (max-width: 768px) {
  .carousel-img {
    height: 120px;
  }

  .custom-indicators button {
    width: 8px !important;
    height: 8px !important;
    margin: 0 3px;
  }
}

/* ======================
   WELCOME SECTION – FINAL ADJUSTED
====================== */

/* OUTER */
.welcome-wrapper {
  margin: 10px 14px;
  padding: 0;
}

/* MAIN BOX */
.welcome-box {
  display: flex;
  gap: 14px;                          /* proper gap */
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 65%, #9acd32);
  width: 100%;
  box-sizing: border-box;
}

/* LEFT 70% */
.welcome-left {
  width: 70%;
  padding: 14px;
  box-sizing: border-box;
  min-height: 220px;                 /* DESKTOP looks bigger */
}

.welcome-left h3 {
  font-size: 30px;
  color: #8b0000;
  border-bottom: 1px solid gray ;
  margin-bottom: 6px;
  font-weight: bold;
}

.welcome-left p {
  font-size: 20px;                 /* text size reduced */
  line-height: 1.35;
  margin-bottom: 4px;
  color: #333;
}

.more-link {
  font-size: 20px;
  color: #8b0000;
  font-weight: bold;
  text-decoration: none;
  margin-top: 4px;
}

/* RIGHT 30% */
.welcome-right {
  width: 30%;
  padding: 10px;
  border-left: 1px solid #cfcfcf;
  box-sizing: border-box;
  min-height: 220px;                 /* match left height */
}

.welcome-right h4 {
  font-size: 25px;
  color: #8b0000;
  text-align: center;
  margin-bottom: 6px;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
}

/* VISITORS */
.visitors-scroll {
  height: 150px;
  overflow: hidden;
}

.visitors-scroll ul {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: visitorsMove 25s linear infinite;
}

.visitors-scroll li {
  font-size: 18px;
  padding: 5px 0;
  color: #444;
}

/* Hover pause */
.welcome-right:hover ul {
  animation-play-state: paused;
}

/* Animation */
@keyframes visitorsMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
/* ======================
   MOBILE – COMPACT & SAME AS CAROUSEL
====================== */
@media (max-width: 768px) {

  .welcome-wrapper {
    margin: 2px;
  }

  .welcome-box {
    height: 120px;                   /* EXACT carousel height */
    flex-wrap: nowrap;
    gap: 6px;
  }

  .welcome-left,
  .welcome-right {
    height: 120px;
    overflow: hidden;
    min-height: unset;
  }

  .welcome-left h3 {
    font-size: 10px;
    margin-bottom: 3px;
    padding-bottom: 5px;
  }

  .welcome-left p {
    margin-top: 10px;
    font-size: 7px;
    line-height: 1.25;
  }

  .more-link {
    font-size: 7px;
  }
  .welcome-right h4 {
  font-size: 10px;
  }
  .visitors-scroll {
    height: 80px;
  }

  .visitors-scroll li {
    color: #8b0000;
    font-size: 8px;
    padding: 3px 0;
  }
  .visitors-scroll ul {
     animation: visitorsMove 49s linear infinite;
  
  }
}
/* ======================
   GALLERY SECTION – FINAL STYLED
====================== */
.gallery-wrapper {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 6px;
  background: linear-gradient(to bottom, #ffffff 65%, #9acd32);
  margin: 6px 8px;   /* thoda tight */
}

/* Center title with underline */
.gallery-title {
  text-align: center;
  margin-bottom: 8px;
}

.gallery-title span {
  font-size: 28px;
  font-weight: bold;
  color: #8b0000;
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}

/* Line under Gallery text */
.gallery-title span::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background-color: #0b7a3b;
  margin: 4px auto 0;
}

/* Clickable wrapper */
.gallery-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

/* Gallery box – welcome jaisa greenish bottom */
.gallery-slider {
  width: 100%;
  overflow: hidden;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 65%, #9acd32);
  padding: 6px 0;
}

/* Moving track */
.gallery-track {
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  animation: galleryMove 28s linear infinite;
}

/* Images – DESKTOP BIGGER */
.gallery-track img {
  height: 130px;              /* BIGGER on laptop */
  width: auto;
  object-fit: cover;
  border-radius: 4px;
  border: 3px solid #ffffff;  /* WHITE BORDER */
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* Hover par stop */
.gallery-slider:hover .gallery-track {
  animation-play-state: paused;
}

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

/* ======================
   MOBILE OPTIMIZATION
====================== */
@media (max-width: 768px) {

  .gallery-wrapper {
    margin: 2px;
  }

  .gallery-title span {
    font-size: 13px;
  }

  .gallery-track {
    gap: 8px;
    animation-duration: 10s;   /* slower on phone */
  }

  .gallery-track img {
    height: 65px;              /* phone size remains good */
    border-width: 2px;
  }
}
  /* Gallery title ke niche ka gap kam */
  .gallery-title {
    margin-bottom: 2px;   /* pehle 8px jaisa lag raha tha */
  }

  .gallery-title span {
    padding-bottom: 2px;
  }

  .gallery-title span::after {
    margin-top: 2px;      /* underline aur images ke beech gap kam */
  }

  /* Gallery box upar se chipkao */
  .gallery-slider {
    padding-top: 2px;     /* pehle zyada tha */
  }

  /* Track ka upar ka padding kam */
  .gallery-track {
    padding-top: 2px;
    padding-bottom: 4px;
  }

/* ======================
   CERTIFICATES & FUTURE PLANS
====================== */

.cf-wrapper {
  margin: 8px;
}

/* Main box */
.cf-box {
  display: flex;
  gap: 24px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 65%, #9acd32);
  padding: 10px;
  box-sizing: border-box;
}

/* Each column – 50% */
.cf-col {
  width: 50%;
}

/* Headings */
.cf-title {
  text-align: center;
  color: #8b0000;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
}

/* Images container */
.cf-images {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Images style */
/* ======================
   CERTIFICATES & FUTURE PLANS – IMAGE FIX
====================== */
.cf-images img {
  width: 48%;
  aspect-ratio: 1 / 1.41;   /* A4 look maintained */
  object-fit: cover;       /* BOX FULLY FILL */
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}


/* ======================
   MOBILE OPTIMIZATION
====================== */
@media (min-width: 992px) {
  .cf-images img {
    width: 46%;
  }
}

@media (max-width: 768px) {

  .cf-wrapper {
    margin: 4px;
  }

  .cf-box {
    gap: 16px;
    padding: 6px;
  }

  .cf-title {
    font-size: 12px;
  }


  .cf-images img {
    width: 48%;
    border-width: 1px;        /* white kam dikhe */
  }
}
/* ======================
   FOOTER – SOLID GREEN ONLY
====================== */

.site-footer {
  background: #9acd32;     /* EXACT same green */
  color: #333;
  margin-top: 12px;
  border-top: 1px solid #cfcfcf;
}

/* Main footer box */
.footer-box {
  display: flex;
  gap: 12px;
  padding: 10px;          /* compact height */
}

/* Columns */
.footer-col {
  width: 50%;
}

.footer-col h4 {
  font-size: 28px;
  margin-bottom: 6px;
  color: #8b0000;         /* same heading color */
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 3px;
}

.footer-col p {
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  color: #333;
}

/* Map */
.footer-map iframe {
  width: 100%;
  height: 85px;           /* thoda compact */
  border: 2px solid #ffffff;
  border-radius: 4px;
}

/* Bottom strip */
.footer-bottom {
  text-align: center;
  background: #9acd32;    /* SAME SOLID GREEN */
  padding: 6px 4px;
  font-size: 11px;
  color: #333;
  border-top: 1px solid rgba(0,0,0,0.2);
}

.footer-bottom span {
  font-weight: bold;
  color: #000;
}
.designer-link {
  color: inherit;          /* footer ka color hi rahe */
  text-decoration: none;
  font-weight: 500;
}

.designer-link:hover {
  text-decoration: underline;
  color: #0b7a3b;          /* same green family */
}

/* ======================
   MOBILE FOOTER
====================== */
@media (max-width: 768px) {

  .footer-box {
    gap: 8px;
    padding: 8px;
  }

  .footer-col h4 {
    font-size: 13px;
  }

  .footer-col p {
    font-size: 11px;
  }

  .footer-map iframe {
    height: 70px;         /* phone me aur compact */
  }

  .footer-bottom {
    font-size: 10px;
  }
}
/* ======================
   NEEDS & FUTURE PLAN PAGE
====================== */

.needs-wrapper {
  margin: 10px;
}

.needs-box {
  display: flex;
  gap: 20px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;   /* SAME green */
}

.needs-col {
  width: 50%;
  background: #ffffff;
  padding: 12px;
  border-radius: 4px;
}

.needs-col h3 {
  text-align: center;
  color: #8b0000;
  font-size: 25px;
  margin-bottom: 8px;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
}

.needs-col ul {
  padding-left: 18px;
  margin: 0;
}

.needs-col li {
  font-size: 18px;
  margin-bottom: 6px;
  color: #333;
}

/* MOBILE */
@media (max-width: 768px) {
  .needs-box {
    gap: 10px;
    padding: 8px;
  }

  .needs-col {
    padding: 8px;
  }

  .needs-col h3 {
    font-size: 14px;
  }

  .needs-col li {
    font-size: 11px;
  }
}
/* ======================
   INTRODUCTION PAGE
====================== */

.intro-wrapper {
  margin: 10px;
}

.intro-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 14px;
  background: #9acd32;          /* SAME GREEN */
}

.intro-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #8b0000;
  margin-bottom: 10px;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
}

.intro-box p {
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #333;
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
}

/* MOBILE */
@media (max-width: 768px) {
  .intro-wrapper {
    margin: 6px;
  }

  .intro-box {
    padding: 10px;
  }

  .intro-title {
    font-size: 18px;
    font-weight: bold;
  }

  .intro-box p {
    font-size: 12px;
    line-height: 1.5;
  }
}
/* ======================
   CERTIFICATES SECTION
====================== */

.cert-wrapper {
  margin: 10px;
}

.cert-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;
}

.cert-title {
  text-align: center;
  font-size: 30px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.cert-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

/* GRID */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cert-item {
  background: #ffffff;
  padding: 6px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

.cert-item img {
  width: 100%;
  aspect-ratio: 1 / 1.41;
  object-fit: cover;
  border: 2px solid #ffffff;
  border-radius: 4px;
  cursor: zoom-in;
}

/* ======================
   POPUP
====================== */

.cert-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.cert-modal-img {
  max-width: 90%;
  max-height: 90%;
  background: #fff;
  border: 4px solid #ffffff;
  border-radius: 6px;
}

.cert-close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 30px;
  color: #ffffff;
  cursor: pointer;
}

/* MOBILE */
@media (max-width: 768px) {
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cert-title {
    font-size: 16px;
  }

  .cert-intro {
    font-size: 12px;
  }
}
/* ======================
   GALLERY PAGE
====================== */

.gallery-page-wrapper {
  margin: 10px;
}

.gallery-page-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;   /* SAME GREEN */
}

.gallery-page-title {
  text-align: center;
  font-size: 28px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.gallery-page-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

/* GRID – SMALLER THAN CERTIFICATES */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* more images per row */
  gap: 10px;
}

.gallery-item {
  background: #ffffff;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 0 3px rgba(0,0,0,0.15);
}

.gallery-item img {
  width: 100%;
  height: 110px;          /* SMALLER thumbnails */
  object-fit: cover;
  border-radius: 4px;
  cursor: zoom-in;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .gallery-page-title {
    font-size: 16px;
  }

  .gallery-page-intro {
    font-size: 12px;
  }

  .gallery-item img {
    height: 80px;
  }
}
/* ======================
   DEPARTMENTS PAGE
====================== */

.dept-wrapper {
  margin: 10px;
}

.dept-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;   /* SAME GREEN */
}

.dept-title {
  text-align: center;
  font-size: 30px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.dept-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #333;
}

/* GRID */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* EACH DEPARTMENT */
.dept-item {
  background: #ffffff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

.dept-item h4 {
  font-size: 26px;
  color: #8b0000;
  margin-bottom: 4px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 2px;
}

.dept-item p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #333;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .dept-grid {
    grid-template-columns: 1fr; /* one by one */
    gap: 8px;
  }

  .dept-title {
    font-size: 16px;
  }

  .dept-intro {
    font-size: 12px;
  }

  .dept-item h4 {
    font-size: 13px;
  }

  .dept-item p {
    font-size: 11.5px;
  }
}
/* ======================
   DAILY SCHEDULE PAGE
====================== */

.schedule-wrapper {
  margin: 20px auto;          /* desktop pe zyada breathing space */
  max-width: 900px;           /* center + wide look */
}

.schedule-box {
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 20px;              /* DESKTOP padding increase */
  background: #9acd32;
}

.schedule-title {
  text-align: center;
  font-size: 22px;            /* DESKTOP bigger */
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.schedule-intro {
  background: #ffffff;
  padding: 12px;              /* DESKTOP bigger */
  border-radius: 6px;
  font-size: 15px;            /* DESKTOP readable */
  line-height: 1.6;
  margin-bottom: 14px;
  color: #333;
}

/* Schedule rows */
.schedule-table {
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;         /* DESKTOP row height increase */
  border-bottom: 1px solid #e0e0e0;
}

.schedule-row:last-child {
  border-bottom: none;
}

.schedule-row .time {
  font-weight: bold;
  font-size: 15px;            /* DESKTOP */
  color: #8b0000;
  width: 35%;
}

.schedule-row .activity {
  font-size: 15px;            /* DESKTOP */
  color: #333;
  width: 65%;
}

/* ======================
   MOBILE – SAME AS BEFORE
====================== */
@media (max-width: 768px) {

  .schedule-wrapper {
    margin: 8px;
    max-width: 100%;
  }

  .schedule-box {
    padding: 12px;
  }

  .schedule-title {
    font-size: 16px;
  }

  .schedule-intro {
    font-size: 12px;
  }

  .schedule-row {
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
  }

  .schedule-row .time,
  .schedule-row .activity {
    width: 100%;
    font-size: 12px;
  }
}
/* ======================
   SYLLABUS PAGE
====================== */

.syllabus-wrapper {
  margin: 10px;
}

.syllabus-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;
}

.syllabus-title {
  text-align: center;
  font-size: 24px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.syllabus-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #333;
}

/* GRID */
.syllabus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* EACH ITEM */
.syllabus-item {
  background: #ffffff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

.syllabus-item h4 {
  font-size: 20px;
  color: #8b0000;
  margin-bottom: 6px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 2px;
}

.syllabus-item ul {
  padding-left: 18px;
  margin: 0;
}

.syllabus-item li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
  color: #333;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .syllabus-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .syllabus-title {
    font-size: 16px;
  }

  .syllabus-intro {
    font-size: 12px;
  }

  .syllabus-item h4 {
    font-size: 13px;
  }

  .syllabus-item li {
    font-size: 11.5px;
  }
}
/* ======================
   CONTACT PAGE
====================== */

.contact-wrapper {
  margin: 10px;
}

.contact-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;   /* SAME GREEN */
}

.contact-title {
  text-align: center;
  font-size: 28px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.contact-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #333;
}

/* GRID */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* EACH CONTACT CARD */
.contact-item {
  background: #ffffff;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

.contact-item h4 {
  font-size: 18px;
  color: #8b0000;
  margin-bottom: 4px;
}

.contact-item p {
  font-size: 16px;
  margin-bottom: 6px;
  color: #333;
}

.contact-item a {
  display: inline-block;
  font-size: 16px;
  color: #0b7a3b;
  font-weight: bold;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-title {
    font-size: 18px;
  }

  .contact-intro {
    font-size: 12px;
  }

  .contact-item h4 {
    font-size: 13px;
  }

  .contact-item p,
  .contact-item a {
    font-size: 12px;
  }
}
/* ======================
   VISITORS PAGE
====================== */

.visitors-wrapper {
  margin: 10px;
}

.visitors-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;
}

.visitors-title {
  text-align: center;
  font-size: 28px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.visitors-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #333;
}

/* LIST */
.visitors-list {
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 4px;
  list-style: none;
  margin: 0;
}

.visitors-list li {
  font-size: 16px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
}

.visitors-list li:last-child {
  border-bottom: none;
}

.visitors-list span {
  display: block;
  font-size: 12px;
  color: #555;
  margin-left: 10px;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .visitors-title {
    font-size: 16px;
  }

  .visitors-intro {
    font-size: 12px;
  }

  .visitors-list li {
    font-size: 12px;
  }

  .visitors-list span {
    font-size: 11px;
  }
}
/* ======================
   A SINCERE APPEAL PAGE
====================== */

.appeal-wrapper {
  margin: 10px;
}

.appeal-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;   /* SAME GREEN */
}

.appeal-title {
  text-align: center;
  font-size: 28px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.appeal-from {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.appeal-content {
  background: #ffffff;
  padding: 12px;
  border-radius: 4px;
}

.appeal-content p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 10px;
  color: #333;
}

.appeal-sign {
  margin-top: 14px;
  font-size: 13px;
  text-align: right;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .appeal-title {
    font-size: 16px;
  }

  .appeal-from {
    font-size: 12px;
  }

  .appeal-content p {
    font-size: 12px;
    line-height: 1.6;
  }

  .appeal-sign {
    font-size: 12px;
  }
}
/* ======================
   HOW TO DONATE PAGE
====================== */

.donate-wrapper {
  margin: 10px;
}

.donate-box {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 12px;
  background: #9acd32;   /* SAME GREEN */
}

.donate-title {
  text-align: center;
  font-size: 28px;
  color: #8b0000;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.donate-intro {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #333;
}

/* BANK DETAILS BOX */
.donate-details {
  background: #ffffff;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.donate-details h4 {
  font-size: 18px;
  color: #8b0000;
  margin-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 3px;
}

/* TABLE */
.donate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.donate-table td {
  padding: 6px;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
}

.donate-table tr:last-child td {
  border-bottom: none;
}

/* NOTES */
.donate-note {
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 8px;
  color: #333;
}

.donate-dua {
  text-align: center;
  font-size: 15px;
  font-style: italic;
  color: #333;
}

/* ======================
   MOBILE
====================== */
@media (max-width: 768px) {

  .donate-title {
    font-size: 20px;
  }

  .donate-intro,
  .donate-note,
  .donate-dua {
    font-size: 12px;
  }

  .donate-table {
    font-size: 12px;
  }
}