/* Root Variables */
:root {
  --primary: #0066cc;
  --primary-dark: #004080;
  --white: #ffffff;
  --dark-bg: #1e1e1e;
  --dark-card: #2a2a2a;
  --dark-text: #f0f0f0;
  --gray: #666;
  --transition: 0.3s ease;
}

/* General Body */
body {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  background: var(--white);
  color: #333;
  transition: background var(--transition), color var(--transition);
  line-height: 1.6;
}
body.dark-mode { background: var(--dark-bg); color: var(--dark-text); }
.no-scroll { overflow: hidden; }

/* Dark mode adjustments */
body.dark-mode .carousel { background: var(--dark-card); color: var(--dark-text); }
body.dark-mode section h2 { color: var(--dark-text); }

/* Top Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary);
  color: var(--white);
  padding: 6px 14px;
  font-size: 0.9rem;
}
.ads { flex: 1; text-align: center; font-weight: 600; }
.dark-toggle {
  border: none;
  background: transparent;
  color: var(--white);
  font-weight: bold;
  cursor: pointer;
}
body.dark-mode .top-bar { background: var(--primary-dark); }

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
header h1 { margin: 0; font-size: 1.4rem; }
.logo img { width: 60px; height: 60px; }
.logo a { display: flex; align-items: center; text-decoration: none; color: inherit; }
body.dark-mode header { background: var(--dark-card); color: var(--dark-text); }

/* Hamburger */
.hamburger {
  cursor: pointer;
  font-size: 1.8rem;
  color: var(--primary);
  position: relative;
}
body.dark-mode .hamburger { color: var(--dark-text); }

/* ==========================
   DROPDOWN MENU (AUTO-SIZE)
========================== */
.dropdown-menu {
  position: fixed;
  top: 80px; /* just below header */
  right: 20px;
  background: var(--primary);
  color: var(--white);
  z-index: 2000;
  border-radius: 10px;
  padding: 20px;
  min-width: 220px;
  max-width: 280px;

  display: none;
  flex-direction: column;
  align-items: flex-start;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Menu Items */
.dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.dropdown-menu ul li {
  margin: 12px 0;
}
.dropdown-menu ul li a {
  font-size: 1.2rem;
  font-weight: 600;
  display: block;
  padding: 8px 12px;
  color: var(--white);
  text-decoration: none;
  transition: background var(--transition);
  border-radius: 6px;
}
.dropdown-menu ul li a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Close Button inside dropdown */
.close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
}


/* Dark Mode */
body.dark-mode .dropdown-menu { background: var(--primary-dark); }
body.dark-mode .dropdown-menu ul li a:hover { color: var(--primary); }

/* Mobile Adjustments */
@media(max-width: 991px) {
  .dropdown-menu ul li a {
    font-size: 1.3rem;
    padding: 10px 16px;
  }
  .dropdown-menu ul li { margin: 16px 0; }
}
@media(max-width: 600px) {
  .dropdown-menu {
    padding: 40px 20px;
    align-items: flex-start;
  }
  .dropdown-menu ul { width: 100%; }
  .dropdown-menu ul li { margin: 14px 0; }
  .dropdown-menu ul li a {
    font-size: 1.2rem;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
}

/* ==========================
   CAROUSEL SECTION
========================== */
.carousel { position: relative; overflow: hidden; border-radius: 12px; margin: 20px auto; max-width: 1000px; }
.carousel-slide { position: relative; display: none; }
.carousel-slide.active { display: block; }
.carousel-slide img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  text-align: justify;
  max-width: 90%;
}
.carousel-caption h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
.carousel-caption p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

/* Carousel Arrows & Dots */
.nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; padding: 10px; border-radius: 50%; cursor: pointer; user-select: none; }
.prev { left: 15px; }
.next { right: 15px; }
.carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
.carousel-dots .dot {
  display: inline-block;
  width: 12px; height: 12px; margin: 0 4px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%; cursor: pointer;
}
.carousel-dots .dot.active { background: #fff; }

/* ==========================
   SECTIONS & CARDS
========================== */
section { padding: 40px 20px; }
section h2 { text-align: center; margin-bottom: 20px; }
.news-section, .events-section, .scholarships-section { background: var(--primary); color: var(--white); }
.members-section, .grants-section { background: var(--white); color: #333; }
body.dark-mode .news-section, body.dark-mode .events-section, body.dark-mode .scholarships-section { background: var(--primary-dark); }

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 20px;
}
.card {
  background: var(--white);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform var(--transition);
}
.card:hover { transform: translateY(-5px); }

.news-section .card img,
.events-section .card img,
.members-section .card img,
.scholarships-section .card img,
.grants-section .card img {
  width: 100%; border-radius: 8px; object-fit: cover;
}
.news-section .card img { height: 180px; }
.events-section .card img { height: 200px; }
.members-section .card img { height: 120px; }
.scholarships-section .card img, .grants-section .card img { height: 180px; }

.card .title { font-size: 1rem; font-weight: bold; margin-bottom: 4px; color: #333; }
body.dark-mode .card .title { color: #f0f0f0; }
.card .meta {
  font-size: 0.8rem; color: var(--gray);
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.card .meta img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
body.dark-mode .members-section, body.dark-mode .grants-section { background: var(--dark-card); color: var(--dark-text); }
body.dark-mode .card { background: var(--dark-card); color: var(--dark-text); }

/* Buttons */
.card button, .contact-btn, .details-btn {
  padding: 7px 12px;
  border: none; border-radius: 5px;
  cursor: pointer; font-size: 0.85rem; margin: 3px;
  transition: background var(--transition);
}
.like-btn { background: #ff6b6b; color: #fff; }
.share-btn { background: #4caf50; color: #fff; }
.contact-btn { background: var(--primary); color: #fff; }
.follow-btn { background: #555; color: #fff; }
.details-btn { background: #f39c12; color: #fff; }
.card button:hover { opacity: 0.9; }

/* Floating Buttons */
.whatsapp-btn, .scroll-top {
  position: fixed;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 1500;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.whatsapp-btn { bottom: 20px; right: 20px; background: #25D366; color: #fff; width: 52px; height: 52px; }
.scroll-top { bottom: 85px; right: 20px; background: var(--primary); color: #fff; width: 45px; height: 45px; display: none; }

/* Footer */
footer { background: var(--primary); color: var(--white); text-align: center; padding: 15px; font-size: 0.9rem; }
footer a { color: #fff; text-decoration: underline; }

/* Modal */
#modalImg { transition: transform 0.3s ease; }

/* Google Form Section */
.google-form-section {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  background: var(--white);
}
.google-form-container {
  width: 100%;
  max-width: 900px;
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: background var(--transition), color var(--transition);
}
.google-form-container iframe {
  width: 100%;
  height: 80vh;
  border: none;
  border-radius: 8px;
}
body.dark-mode .google-form-section { background: var(--dark-bg); }
body.dark-mode .google-form-container { background: var(--dark-card); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
body.dark-mode .google-form-container iframe { background: var(--dark-card); }

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.form-btn {
  padding: 10px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}
.form-btn:hover { background: var(--primary-dark); }

/* Mobile Adjustments */
@media(max-width:600px){
  header h1 { font-size: 1rem; }
  .card img { height: auto; width: 100%; }
  .slides img { width: 100%; height: auto; }
}