/* --- Basic Setup & Dark Theme (Default) --- */
:root {
  /* Default (Dark) Colors */
  --bg-color: #121212;
  --primary-color: #1e1e1e;
  --secondary-color: #2a2a2a;
  --text-color: #e0e0e0;
  /* Main text */
  --text-content: #b0b0b0;
  /* Paragraphs/secondary text */
  --accent-color: #007bff;
  --border-color: #444;
  --hover-btn-bg: #2d3748;
  --hover-btn-text: #fff;
  --shadow-color: rgba(0, 0, 0, 0.4);
  /* Darken hover effect for better contrast (especially in light themes) */
  --hover-overlay: rgba(0, 0, 0, 0.2);
  /* Darken hover effect for better contrast (especially in light themes) */
  --hover-overlay: rgba(0, 0, 0, 0.2);

  /* Red Palette (Constant across themes usually, but defined here) */
  --primary-red: #d92027;
  --hover-red: #b31a20;
  --light-bg: #ffffff;
  --text-light: #ffffff;
}

/* --- Gray Theme Variables --- */
[data-theme="gray"] {
  --bg-color: #e3e3e3;
  /* Grayish white background - darker than pure white */
  --primary-color: #f0f0f0;
  /* Light gray for cards/sections */
  --secondary-color: #dcdcdc;
  /* Slightly darker for inputs/elements */
  --text-color: #1a1a1a;
  /* Dark text for contrast */
  --text-content: #333333;
  /* Darker text for content paragraphs */
  --accent-color: #0069d9;
  /* Slightly darker blue for better contrast on light bg */
  --border-color: #bfbfbf;
  /* Visible gray border */
  --hover-btn-bg: #808080;
  /* Significantly darker gray for hover */
  --hover-btn-text: #000;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --text-light: #1a1a1a !important;
  /* Force light text utility to be dark in light theme if needed */
}

/* --- Gray Theme Sticky Nav for Desktop Only --- */
@media (min-width: 769px) {
  [data-theme="gray"] .sticky-nav {
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  [data-theme="gray"] .sticky-nav ul li a {
    color: #000;
  }

  [data-theme="gray"] .sticky-nav ul li a:hover {
    background-color: var(--accent-color);
    color: #fff;
  }

  [data-theme="gray"] #floating-button-nav,
  #floating-button-nav-2 {
    color: #000;
  }

  /* --- Upload Section (Blood Donation etc.) Lighter Background --- */
  [data-theme="gray"] .upload-section {
    background-color: #e0e0e0;
  }

  [data-theme="gray"] .upload-title,
  [data-theme="gray"] .upload-section h3,
  [data-theme="gray"] .upload-section p {
    color: #333;
  }

  [data-theme="gray"] .upload-section .link-hover-a,
  [data-theme="gray"] .upload-section .link-hover-a-2 {
    color: #1a1a1a;
  }

  [data-theme="gray"] .upload-section .link-hover-a:hover {
    color: #007bff !important;
  }

  /* --- Content Section Text Contrast --- */
  [data-theme="gray"] .content-section p {
    color: #333;
  }

  [data-theme="gray"] .content-section a[style*="color: white"],
  [data-theme="gray"] .content-section a[style*="color:white"] {
    color: #1a1a1a !important;
  }

  [data-theme="gray"] .content-section a[style*="color: white"]:hover,
  [data-theme="gray"] .content-section a[style*="color:white"]:hover {
    color: #007bff !important;
  }

  /* --- Info Nav Link Improvements --- */
  [data-theme="gray"] .info-nav-link,
  [data-theme="gray"] .info-nav-link-a {
    color: #333;
    border-color: #bbb;
  }

  [data-theme="gray"] .info-nav-link:hover,
  [data-theme="gray"] .info-nav-link-a:hover {
    background-color: #333;
    color: #fff;
  }

  /* --- Resource Links Improvements --- */
  [data-theme="gray"] .resource-link,
  [data-theme="gray"] .resources-nav-link {
    color: #333;
    border-color: #bbb;
  }

  [data-theme="gray"] .resource-link:hover,
  [data-theme="gray"] .resources-nav-link:hover {
    background-color: #333;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* --- Grid Button Improvements --- */
  [data-theme="gray"] .grid-button {
    color: #333;
  }

  [data-theme="gray"] .grid-button:hover {
    color: #fff;
  }
}

/* --- Theme Switcher Button --- */
/* --- Theme Switcher Button --- */
#theme-toggle {
  position: fixed;
  top: 2rem;
  right: 2rem;
  /* RIGHT-MOST corner as requested */
  z-index: 4000;
  padding: 0.8rem;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  cursor: pointer;
  box-shadow: 0 4px 6px var(--shadow-color);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}

#theme-toggle:hover {
  transform: scale(1.1);
  background-color: var(--accent-color);
  color: #fff;
  /* Always white on hover for high contrast against accent */
}

/* --- Mobile Responsiveness for Floating Elements --- */
@media (max-width: 768px) {

  /* Hide the floating scheduler button on mobile */
  #floating-button {
    display: none !important;
  }

  #floating-button-nav,
  #floating-button-nav-2 {
    display: block !important;
  }

  /* Make sure the sidebar link is visible (it might be hidden by default if desktop styles hide it) */
  .mobile-scheduler-link {
    display: block !important;
  }

  /* Adjust theme toggle position on mobile */
  #theme-toggle {
    right: 20px;
    /* Keep it in the corner */
    top: 20px;
  }
}

/* --- Smooth Scrolling Behavior --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Offset for fixed nav to prevent content from being hidden */
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  /* overflow-y: auto; */
  /* font-size: 2vw; */
  /* Often used as a fallback for broader support */
}

/* Replace it with this block */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  /* This is the main fix */
  align-items: center;
  /* This now centers content horizontally */
  min-height: 100vh;
  padding: 1rem;
}

/* --------------------------------------------------------------- */

.sectionFAQs,
.sectionFAQs a {
  background-color: rgba(255, 255, 255, 0.281);
  width: fit-content;
  border-radius: 5px;
  padding: 5px;
  margin: auto;
  text-align: center;
  color: white;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: 0.5s ease-in-out;
}

[data-theme="gray"] .sectionFAQs,
[data-theme="gray"] .sectionFAQs a {
  /* color: black; */
  background-color: rgba(0, 0, 0, 0.151);
  transition: 0.5s ease-in-out;
}

.sectionFAQs:hover,
[data-theme="gray"] .sectionFAQs:hover {
  background-color: black;
  transform: translateY(-3px);
}

.link-hover-a {
  /* background-color: #fcfcfc; */
  color: rgb(0, 0, 0);
  padding: 2px;
}


.link-hover-a:hover {
  color: rgba(0, 0, 0, 0.534) !important;
  font-weight: bold;
  transition: 0.3s ease;
  transform: translateY(-3px);
}

.link-hover-a-2 {
  color: antiquewhite;
}

.link-hover-a-3:hover {
  color: white !important;
  transition: 0.3s ease;
  transform: translateY(-3px);
}

.link-hover-a-4:hover {
  /* link for freemediaheckyeah */
  transition: 0.3s ease;
  background-color: #48797F !important;
}

.link-hover-a-5:hover {
  /* link for freemediaheckyeah */
  transition: 0.3s ease;
  background-color: #009400 !important;
}

.link-hover-a-6:hover {
  /* link for freemediaheckyeah */
  transition: 0.3s ease;
  background-color: #017df0 !important;
}

.link-hover-a-2:hover {
  color: black !important;
  transition: 0.3s ease;
  transform: translateY(-3px);
  background-color: white;
  padding: 5px;
  border-radius: 2px;

}





/* --------------------------------------------------------------- */









/* --- Main Container --- */
.container {
  width: 100%;
  max-width: 800px;
  text-align: center;
  height: 100vh;
  margin-top: 10vh;
  /* margin-bottom: 10rem; */
}

/* --- Logo --- */
.logo {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

/* --- Modified Search Bar Section --- */
.search-section {
  margin-bottom: 2.5rem;
}

.search-label {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-content);
}

.search-hint {
  margin-top: 0.75rem;
  color: var(--text-content);
}

/* Changed .search-bar to .search-input to match new HTML and JS */
.search-input {
  width: 100%;
  max-width: 500px;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: var(--text-color);
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  /* Pill shape */
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input::placeholder {
  color: #888;
}

.search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* --- Search Container & Results --- */
.search-container {
  position: relative;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.search-results {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 350px;
  overflow-y: auto;
  max-height: 350px;
  overflow-y: auto;
  background-color: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 16px var(--shadow-color);
  z-index: 1000;
  text-align: left;
}

.result-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

.result-item:last-child {
  border-bottom: none;
}

.result-item:hover,
.result-item.active {
  background-color: var(--accent-color);
}

.result-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--text-color);
}

.result-item:hover .result-title,
.result-item.active .result-title {
  color: #fff;
}

.result-code,
.result-dept {
  font-size: 0.85rem;
  color: var(--text-content);
  margin-right: 15px;
}

.result-item:hover .result-code,
.result-item:hover .result-dept,
.result-item.active .result-dept {
  color: var(--hover-btn-text);
}

.highlight {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.1);
  border-radius: 3px;
  padding: 1px 2px;
}

.no-results {
  padding: 15px;
  color: #999;
  text-align: center;
}

/* --- Button Grid Layout --- */
.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.5rem;
}

.grid-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  aspect-ratio: 1 / 1;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.grid-button:hover {
  background-color: var(--hover-btn-bg);
  /* Use the darker hover variable */
  transform: translateY(-5px);
  filter: brightness(0.9);
  /* Additional dimming for "darker effect" */
}

/* ======== ADD THESE NEW STYLES TO THE END OF YOUR CSS FILE ======== */


/* --- Content Sections --- */
.content-wrapper {
  width: 100%;
}

.content-section {
  /* height: 100vh; */
  min-height: 100dvh;
  /* margin-top: 10vh; */
  padding: 5rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 20rem;
  /* min-height: 40vh; */
  /* padding: 2rem; */
  /* Give sections some height */
  text-align: left;
}

.content-section h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.5rem;
  display: inline-block;
}

.content-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-content);
}

/* Alternate background colors for sections to distinguish them */
.content-section:nth-of-type(even) {
  background-color: var(--primary-color);
}


/* --- Sticky Navigation Bar --- */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(30, 30, 30, 0.85);
  /* Semi-transparent background */
  backdrop-filter: blur(10px);
  /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem 0;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Initially hidden and off-screen */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* The state when the nav should be visible */
.sticky-nav.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.sticky-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-nav ul li a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sticky-nav ul li a:hover {
  background-color: var(--accent-color);
  color: #fff;
}

/* ========================================================== */
/* ===== ADD THESE NEW STYLES TO THE END OF YOUR CSS FILE ===== */
/* ========================================================== */

/* Prevent scrolling when the mobile menu is open */
body.no-scroll {
  overflow: hidden;
}

/* --- Mobile Menu Toggle (Hamburger Button) --- */
.menu-toggle {
  display: none;
  /* Hidden on desktop */
  position: fixed;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  z-index: 3001;
  /* Must be on top of everything */
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-color);
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
}

/* --- Overlay --- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2999;
  /* Below menu, above content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}


/* Styling for the Upload Section */

.upload-section {
  background-color: #3a3a3a;
  padding: 2rem 1rem;
  text-align: center;
}

.upload-title {
  color: #ffffffcd;
  font-weight: normal;
  margin-bottom: 2rem;
}

.upload-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* Allows cards to wrap on smaller screens */
  gap: 2rem;
  /* Creates space between the cards */
  margin-bottom: 1.5rem;
}

.upload-card {
  /* Common styles for all cards */
  color: #ffffff;
  border-radius: 10px;
  box-shadow: 1px 2px 10px #000000;
  text-shadow: 1px 2px 1px #000000;
  font-size: medium;
  text-decoration: none;

  /* Flexbox for centering content inside the card */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 160px;
  /* A fixed width can work well here */
  height: 160px;
  /* A fixed height for consistency */
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upload-card:hover {
  transform: translateY(-5px);
  box-shadow: 2px 4px 15px #000000;
}

.upload-card-image {
  width: 150px;
  margin-bottom: -0.5rem;
  margin-top: -40px;
  margin-left: -80px;
}

.upload-card-text {
  line-height: 1.2;
}

/* Modifier classes for unique background colors */
.upload-card--questions {
  background-color: #a5ca88;
}

/* .upload-card--blood {
    background-color: #fff8f8a1;
} */

.upload-card--notes {
  background-color: #3282B8;
}

.upload-card--temp {
  background-color: #db7249;
}

.upload-footer {
  font-size: small;
  color: #ffffffb4;
  margin: 0;
}

/* Home Section Buttons */
.cta-buttons {
  margin-top: 30px;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  margin: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid var(--primary-red);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-primary {
  background-color: var(--primary-red);
  /* color: var(--text-light); */
  color: white;
}



.btn-secondary {
  background-color: var(--light-bg);
  color: var(--primary-red);
}


/* Main Content Area */
.content {
  flex-grow: 1;
  /* padding: 20px; */
  overflow-y: hidden;
}

.page-section {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.page-section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================================================= */
/* ===== STYLES FOR SEMESTER BROWSER & SEARCH SECTIONS ===== */
/* ================================================================= */

/* Reusable container for content sections */
.content-block {
  max-width: 800px;
  /* `5rem auto` provides top/bottom spacing and centers the block */
  margin: 5rem auto;
  padding: 0 1rem;
  text-align: center;
}

.content-block__title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  position: relative;
}

.content-block__anchor {
  color: white;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.content-block__anchor:hover {
  opacity: 1;
}

.content-block__hint {
  color: rgba(255, 255, 255, 0.68);
  margin-top: 0.75rem;
}


/* --- Custom Dropdown Styles --- */
.custom-dropdown {
  position: relative;
  max-width: 500px;
  margin: 1.5rem auto;
  cursor: pointer;
}

.dropdown-header {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: var(--text-color);
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  transition: border-color 0.3s ease;
}

.custom-dropdown.open .dropdown-header {
  border-color: var(--accent-color);
}

.dropdown-list {
  display: none;
  position: absolute;
  width: 100%;
  background-color: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-top: 0.5rem;
  z-index: 100;
  overflow: hidden;
}

.custom-dropdown.open .dropdown-list {
  display: block;
}

.dropdown-item {
  padding: 0.8rem 1.5rem;
  text-align: left;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--accent-color);
}


/* --- Reset Button --- */
.reset-button {
  background: none;
  border: 1px solid var(--border-color);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.reset-button:hover {
  background-color: var(--secondary-color);
  border-color: #666;
}

/* --- JS Populated Elements --- */
.semester-list {
  /* Add any styles needed for the generated semester list */
  margin-top: 1.5rem;
}

.drive-link-display {
  /* Add any styles needed for the drive link paragraph */
  margin-top: 1rem;
  color: var(--accent-color);
}

/* ========================================================= */
/* ===== NEW STYLES FOR DYNAMICALLY CREATED BUTTONS ===== */
/* ========================================================= */

.semester-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Find the .semester-button class in your CSS and add the text-decoration property */

.semester-button {
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  /* <-- ADD THIS LINE */
}

.semester-button:hover {
  background-color: #3e3e3e;
  border-color: #666;
}

/* Style for the selected/active semester button */
.semester-button.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  font-weight: bold;
}

/* ========================================= */
/* ===== STYLES FOR GENERAL INFO SECTION ===== */
/* ========================================= */

.info-section {
  margin-top: 100px;
  text-align: center;
  padding: 2rem 1rem;
}

.info-section__title {
  color: var(--text-content);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.info-nav-list {
  /* Resets for the list */
  list-style: none;
  padding: 0;
  margin: 0;

  /* Flexbox for the grid layout */
  display: flex;
  flex-wrap: wrap;
  /* Allows buttons to wrap to the next line on smaller screens */
  justify-content: center;
  gap: 15px;
  /* Creates consistent space between buttons */
}

.info-nav-link {
  /* Common styles for all navigation buttons */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.37);
  background-color: var(--secondary-color);
  color: var(--text-color);
  height: 60px;
  width: 160px;
  /* A wider width for longer text */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;

  /* Flexbox to perfectly center the text inside the button */
  display: flex;
  align-items: center;
  justify-content: center;

  transition: background-color 0.2s ease, transform 0.2s ease;
}



.info-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.info-nav-link-a {
  /* Common styles for all navigation buttons */
  box-shadow: 0 0 10px white;
  background-color: white;
  color: black;
  height: 60px;
  width: 160px;
  /* A wider width for longer text */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;

  /* Flexbox to perfectly center the text inside the button */
  display: flex;
  align-items: center;
  justify-content: center;

  transition: background-color 0.5s ease, transform 0.2s ease;
}

.info-nav-link-a:hover {
  background-color: rgb(255, 251, 0);
  box-shadow: 0 0 50px white;
  transform: translateY(-3px);
}

/* ================================================ */
/* ===== STYLES FOR INTERESTS & RESOURCES SECTION ===== */
/* ================================================ */

.resources-section {
  text-align: center;
  padding: 2rem 1rem;
}

.resources-section__title {
  color: var(--text-content);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

.resources-section__subtitle {
  margin: 0.5rem 0 2rem 0;
}

.resources-section__subtitle a {
  color: var(--text-content);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.resources-section__subtitle a:hover {
  color: #fff;
}

.resources-nav-list {
  /* Resets for the list */
  list-style: none;
  padding: 0;
  margin: 0;

  /* Flexbox for the grid layout */
  display: flex;
  flex-wrap: wrap;
  /* Allows buttons to wrap on smaller screens */
  justify-content: center;
  gap: 15px;
  /* Creates space between buttons */
}

.resources-nav-link {
  /* Common styles for all navigation links */
  background-color: var(--secondary-color);
  color: var(--text-color);
  width: 160px;
  min-height: 60px;
  /* Use min-height for flexibility */
  padding: 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;

  /* Flexbox to perfectly center the text vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transition: background-color 0.2s ease, transform 0.2s ease;
}

.resources-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.resources-nav-link small {
  font-weight: normal;
  opacity: 0.8;
  font-size: 0.75rem;
  margin-top: 4px;
  /* Adds a little space between the two lines of text */
}


/* ===================================== */
/* ===== STYLES FOR BLOG SECTION ===== */
/* ===================================== */

.blog-section {
  text-align: center;
  padding: 2rem 1rem;
}

.blog-section__title {
  color: rgba(240, 248, 255, 0.65);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.blog-nav-list {
  /* Resets for the list */
  list-style: none;
  padding: 0;
  margin: 0;

  /* Flexbox for layout */
  display: flex;
  flex-wrap: wrap;
  /* Allows links to wrap on smaller screens */
  justify-content: center;
  gap: 1.5rem 2.5rem;
  /* Vertical and horizontal gap */
}

.blog-nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  position: relative;
  transition: color 0.2s ease;
}

/* Creates an animated underline effect on hover */
.blog-nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--accent-color);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.blog-nav-link:hover {
  color: var(--text-color);
  /* Ensures text color stays bright */
}

.blog-nav-link:hover::after {
  transform: scaleX(1);
}

/* ================================== */
/* ===== STYLES FOR SITE FOOTER ===== */
/* ================================== */

.site-footer {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2rem 0;
  width: 100%;
  margin-top: auto;

  /* --- Original Layout & Text Styles --- */
  color: var(--text-content);

  /* Flexbox for layout */
  display: flex;
  flex-wrap: wrap;
  /* Allows sections to stack on small screens */
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.footer-socials,
.footer-credits {
  flex: 1;
  /* Allows both sections to share space */
  min-width: 300px;
  /* Prevents them from getting too squished */
  /* padding:2rem; */
}

.footer-credits {
  padding: 2rem;
}

.footer-heading {
  font-size: 1.2rem;
  color: var(--text-color);
  margin: 0 0 0.25rem 0;
}

.footer-subheading {
  font-size: 0.8rem;
  margin: 0 0 1.5rem 0;
}

.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.social-links a {
  color: var(--text-content);
  font-size: 2rem;
  /* Controls the size of the icons */
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: var(--text-color);
  transform: scale(1.1);
}

.credits-text {
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 1rem auto;
}

.credits-text strong {
  color: var(--text-color);
}

.credits-text a {
  color: #2edc17;
  /* Bright green color from original style */
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: bold;
}

.credits-text a:hover {
  text-decoration: underline;
}

.copyright-text {
  font-size: 0.85rem;
  color: var(--text-content);
  margin: 0;
}

/* ========================================= */
/* ===== STYLES FOR NOTICE VIEWER SECTION ===== */
/* ========================================= */

.notice-viewer-section {
  max-width: 1200px;
  /* A wider container is better for iframe content */
  margin: 4rem auto;
  /* Adds space above/below and centers the section */
  padding: 0 1rem;
}

.notice-viewer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  /* Allows items to wrap on small screens */
  gap: 1rem;
}

.back-button {
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.back-button:hover {
  background-color: #3e3e3e;
  border-color: #666;
}

.visit-site-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

.visit-site-link:hover {
  text-decoration: underline;
}

.notice-iframe {
  width: 100%;
  height: 80vh;
  /* Sets the height to 80% of the viewport's height */
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  /* A fallback background while the iframe loads */
}

/* =============================== */
/* ===== STYLES FOR MAP SECTION ===== */
/* =============================== */

.map-section {
  /* Controls the overall width and centering of the map component */
  max-width: 90%;
  margin: 50px auto;
}

.map-figure {
  /* Creates the thick, dark frame around the iframe */
  background-color: #333333d5;
  border: 15px solid #333333d5;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.267);

  /* Resets default figure margins */
  margin: 0;
  padding: 0;
}

.map-caption {
  /* Styles the link container above the map */
  max-width: 300px;
  background-color: #333;
  padding: 10px;
  border-radius: 15px;
  margin: 0 auto 15px auto;
  /* Centers the caption and adds space below it */
  text-align: center;
}

.map-caption a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: text-decoration 0.2s ease;
}

.map-caption a:hover {
  text-decoration: underline;
}

.map-iframe {
  display: block;
  /* Removes bottom space under the iframe */
  width: 100%;
  height: 450px;
  border: 0;
  /* Removes the default iframe border */
}

/* ============================================ */
/* ===== STYLES FOR CURATED RESOURCES SECTION ===== */
/* ============================================ */

.curated-resources {
  margin-top: 100px;
  text-align: center;
  padding: 2rem 1rem;
}

.curated-resources__title {

  color: rgba(240, 248, 255, 0.65);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.resource-list {
  /* Resets for the list */
  list-style: none;
  padding: 0;
  margin: 0;

  /* Flexbox for the grid layout */
  display: flex;
  flex-wrap: wrap;
  /* Allows buttons to wrap to the next line */
  justify-content: center;
  gap: 15px;
  /* Creates consistent space between buttons */
}

.resource-link {
  /* Common styles for all resource buttons */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.37);
  background-color: rgba(87, 87, 87, 0.562);
  color: #fff;
  height: 60px;
  width: 160px;
  /* A more appropriate width for longer text */
  padding: 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;

  /* Flexbox to perfectly center the text inside the button */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Handles text that wraps to a new line */

  transition: background-color 0.2s ease, transform 0.2s ease;
}

.resource-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

/* ================================== */
/* ===== STYLES FOR GO TO TOP BUTTON ===== */
/* ================================== */

.go-to-top-button {
  /* Positioning */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;

  /* Styling */
  width: 50px;
  height: 50px;
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  /* Makes it a circle */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;

  /* Centering the arrow inside */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Visibility & Transitions */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

/* This class will be added by JavaScript to show the button */
.go-to-top-button.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.go-to-top-button:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
}

/* ======================================================= */
/* ===== UPDATED STYLES FOR SCROLLING BLOG PREVIEW ===== */
/* ======================================================= */

.blog-preview {
  width: 90%;
  max-width: 800px;
  min-width: 300px;
  margin: 4rem auto;
}

.blog-preview__title {
  color: rgba(255, 255, 255, 0.776);
  padding-top: 15px;
  text-align: center;
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
}

.blog-preview__title em {
  font-style: italic;
  font-weight: normal;
}

.blog-preview__figure {
  position: relative;
  margin: 0;
  /* This is the visible height of the iframe container */
  height: 450px;
  border-radius: 12px;
  overflow: hidden;
  /* This is crucial, it crops the oversized iframe */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.blog-preview__iframe {
  display: block;
  width: 100%;
  /* Make the iframe much taller than its container to have content to scroll */
  height: 2000px;
  border: none;
  /* Link the animation to the iframe */
  animation: auto-scroll 40s linear infinite alternate;
}

/* Pause the animation when the user hovers over the preview */
.blog-preview__figure:hover .blog-preview__iframe {
  animation-play-state: paused;
}

.blog-preview__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.blog-preview__link {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.blog-preview__link:hover {
  background-color: #0056b3;
  transform: translateX(-50%) scale(1.05);
}


/* ================================== */
/* ===== STYLES FOR GO BACK BUTTON ===== */
/* ================================== */

.go-back-button {
  /* Positioning */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;

  /* Styling */
  width: 50px;
  height: 50px;
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  /* Makes it a circle */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;

  /* Centering the arrow inside */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Hidden by default, shown by JavaScript */
  display: none;

  /* Transitions for hover effect */
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.go-back-button:hover {
  background-color: var(--accent-color);
  transform: scale(1.05);
}

/* ======================================================= */
/* ===== UPDATED STYLES FOR SCROLLING BLOG PREVIEW ===== */
/* ======================================================= */

/* Define the scrolling animation */
@keyframes auto-scroll {
  0% {
    /* Start at the top */
    transform: translateY(0);
  }

  100% {
    /* End at the bottom. This value should be (iframe height - figure height) */
    /* 2000px - 450px = 1550px */
    transform: translateY(-1550px);
  }
}


/* ================================================ */
/* ===== RESPONSIVE FIX FOR SITE FOOTER ===== */
/* ================================================ */

@media (max-width: 768px) {
  .site-footer {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 2rem 0;
    width: 100%;
    margin-top: auto;


    /* --- Gray Theme Refinements for Index Page --- */
    flex-direction: column;
  }

  /* Ensure text in both sections is centered in the stacked layout */
  .footer-socials,
  .footer-credits {
    text-align: center;
  }
}

/* --- Media Query for Mobile Screens --- */
@media (max-width: 768px) {

  .cta-buttons {
    display: flex;
    flex-direction: column;
    /* Stack buttons vertically */
    align-items: center;
  }

  .btn {
    width: 90%;
    max-width: 300px;
    text-align: center;
  }

  .content-section {
    padding: 20px;

  }

  #About {
    /* padding-bottom: 70rem; */
  }

  .footer-socials,
  .footer-credits {
    min-width: 150px;
  }

  /* Show the hamburger menu */
  .menu-toggle {
    display: block;
  }

  /* Repurpose the sticky-nav to be the slide-in side menu */
  .sticky-nav {
    /* Reset desktop styles */
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    padding: 0;
    box-shadow: none;
    background-color: var(--primary-color);
    backdrop-filter: none;

    /* New side menu styles */
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    /* Width of the side menu */
    height: 100%;
    z-index: 3000;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
    /* Start off-screen to the left */
  }

  /* State for when the menu is open */
  .sticky-nav.open {
    transform: translateX(0);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
  }

  /* Override the desktop 'visible' class on mobile */
  .sticky-nav.visible {
    transform: translateX(-100%);
  }

  .sticky-nav.open.visible {
    transform: translateX(0);
  }

  /* Style the links for a vertical layout */
  .sticky-nav ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 20px 20px 20px;
    height: 100%;
  }

  .sticky-nav ul li {
    width: 100%;
  }

  .sticky-nav ul li a {
    display: block;
    padding: 15px;
    font-size: 1.1rem;
    width: 100%;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
  .logo {
    font-size: 2rem;
  }

  .button-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
  }

  .grid-button {
    font-size: 1rem;
    border-radius: 12px;
  }
}

/* ================================================================= */
/* ===== MERGED CONTENT FROM css/styles.css (Legacy Support) ===== */
/* ================================================================= */

.TG-overview {
  color: white;
  max-width: 500px;
  margin: auto;
  width: 90%;
  background-color: transparent;

  border: 1px solid black;
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 1px 1px 10px black;
  backdrop-filter: blur(2px);
}

.TG-overview a {
  color: #ECEFCA;
}

.TG-overview h3 {
  padding-top: 2rem;
  padding-bottom: 1rem;
  margin: auto;
  text-align: left;
}

.TG-overview .link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 3fr));
  padding: 1rem;
  gap: 1rem;


}

.TG-overview .tg-links {

  display: flex;
  justify-content: center;
  padding: 2rem;
}

.TG-overview .tg-links a,
.TG-overview .link-grid ul li a {
  background-color: white;
  color: black;
  text-align: center;
  width: max-content;
  margin: auto;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid black;
  box-shadow: 1px 1px 4px black;
  transition: 0.3s ease;
}

.TG-overview .link-grid .grid-links {
  background-color: white;
  color: black;
  text-align: center;
  width: max-content;
  margin: auto;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid black;
  box-shadow: 1px 1px 4px black;
  transition: 0.3s ease;
}

.TG-overview .link-grid .grid-links a {
  color: black;
  text-wrap: wrap;
}

.TG-overview .tg-links p {
  transition: 0.3s ease;
}

.TG-overview .tg-links a:hover,
.TG-overview .link-grid a:hover,
.TG-overview .tg-links p:hover,
.TG-overview .link-grid .grid-links:hover {
  transform: translateY(-5px);
}


/* ----------------------------------------------------- */
.hidden-link {
  display: none;
  /* background-color: rgba(255, 255, 255, 0.342); */
  display: block;
  height: 40px;
  position: static;
  top: 0;
  z-index: 2;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  /* box-shadow: 1px 1px 10px black; */
  /* border: 2px solid black; */
}

.hidden-link p {
  padding-top: 0.5rem;
  text-align: center;
  padding: 0.8rem;
  font-size: 0.7rem;
}

.hidden-link p a {
  /* text-decoration: underline; */
  color: #ffffff48;
}

.footer-container {
  width: 90%;
  max-width: 500px;
  /* margin-top: 100px; */
  margin: 0 auto;

}


.social-container div a {
  color: white;
  font-size: 2rem;
  padding: 0.5rem;
  text-shadow: 1px 2px 2px #000000;
  transition: transform 0.3s ease;
  /* display: flex; */
  /* justify-content: center; */

}

.social-container div a:hover {
  transform: translatey(-2px);

}

.social-container div {

  padding: 0.5rem;
  display: flex;
  justify-content: center;

}

.social-container p {
  color: #ffffff;
  text-shadow: 0px 2px 1px black;
  display: flex;
  justify-content: center;
  /* padding: 5px; */

}

.end-credits {
  background-color: #0000009a;
  backdrop-filter: blur(2px);
  border-radius: 20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.289);
  padding: 20px;
  max-width: 500px;
  margin: auto;

}

.end-credits div {
  margin-bottom: 10px;
  margin-top: 10px;
}

.end-credits div p {
  /* color: rgb(254, 254, 254); */
  width: 80%;
  max-width: 550px;
  font-size: 1rem;
  text-shadow: 0px 1px 1px black;
}

.end-credits p {
  color: rgb(255, 255, 255);
  width: 95%;
  max-width: 500px;
  font-size: 1rem;
  /* font-style: italic; */
  text-shadow: 0px 2px 1px black;
  margin: auto;
  display: flex;
  justify-content: center;

}



/* ---------------------------------------------------- */


/* html {
  zoom: 100%;
  scroll-behavior: smooth;
} */

/* https://stackoverflow.com/questions/10853881/how-to-remove-underline-from-a-link-in-html*/

/* a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

} */



/*    .topnav3     */
/* FOR BLOGGER IFRAME HEADER */

.topnav-3 {
  overflow: hidden;
  background-color: #333;
  border-radius: 15px 15px 0 0;
  font-size: large;
  padding-top: 15px;
}




/* -----------------------------------------------------------------  */


/* TOP BAR CSS [ 1 ] */
/* Reset margin and font */
/* body {
  background-color: #FAF9F6;
  margin: 0;
  font-size: large;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

} */

/* .bg-style {
  background-image: url(images/portrait-bg.jpg) !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
} */

/* -------------------------------------------------------------- */


/* Navigation bar container */
.topnav-1 {
  display: flex;
  justify-content: flex-end;
  background-color: #333;
  min-height: 50px;
  width: 100%;

  position: relative;
  z-index: 100;
  overflow: visible !important;


}

/* Navigation links */


/* ----------------------------------------------------------- */
.dropdown-content div.navigation1,
.dropdown-content div.navigation2,
.dropdown-content div.navigation3,
.dropdown-content div.navigation4,
.dropdown-content div.navigation5 {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  font-size: large;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.dropdown-content div.navigation1:hover,
.dropdown-content div.navigation2:hover,
.dropdown-content div.navigation3:hover,
.dropdown-content div.navigation4:hover,
.dropdown-content div.navigation5:hover {
  background-color: #2478ff;
  color: rgb(255, 255, 255);
}

/* ----------------------------------------------------------- */



.topnav-1 a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  text-decoration: none;
  padding: 10px 15px;
  font-size: 17px;
  white-space: nowrap;


}

.topnav-2 {
  display: flex;
  justify-content: flex-end;
  background-color: #33333300;
  color: #000000;
  min-height: 50px;
  width: 100%;
  font-size: small;
  position: relative;
  /* Ensure proper stacking context */
  z-index: 100;
  /* Higher z-index for the navbar */
  overflow: visible !important;
  /* Critical: allows dropdowns to extend outside */

}

.topnav-2 a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  text-decoration: none;
  padding: 10px 15px;
  font-size: x-small;
  white-space: nowrap;


}


/* Hover effect */
.topnav-1 a:hover,
.topnav-2 a:hover {
  background-color: #BBE1FA;
  color: rgb(255, 255, 255);
}



/* Active link style */
.topnav-1 a.active-1,
.topnav-2 a.active-1 {
  background-color: #197dd500;
  color: white;
  font-size: large;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Small text within links */
.topnav-1 small,
.topnav-2 small {
  display: block;
  text-align: center;
  line-height: 1.2;
}

.topnav-1 a:hover,
.topnav-2 a:hover {
  background-color: #2478ff;
  color: rgb(255, 255, 255);
}



/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */


/* Container for the dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Button styling */
.dropbtn {
  background-color: #4caf4f00;
  color: white;
  padding: 10px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  /* border-radius: 4px; */
  /* font-size: large; */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* .dropbtn:hover {
  background-color: #197dd5;
  color: rgb(255, 255, 255);
} */

/* The dropdown content (hidden by default) */
.dropdown-content {
  min-height: 100px;
  display: none;
  position: absolute;
  right: 0;
  /* Align to the right side of the button */
  left: auto;
  /* Override default left alignment */
  background-color: #00000000;
  color: #000000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* z-index: 1; */
  border-radius: 4px;
  overflow-y: scroll;


}

/* Style for the links inside the dropdown */
.dropdown-content a {
  margin: 5px;
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Change color on hover */
.dropdown-content a:hover,
.dropdown-content a:active {
  background-color: #BBE1FA;
  color: #ffffff;
  /* z-index: 2; */
}

.dropdown-content div:hover {

  background-color: #2478ff;
  color: #ffffff;
}


.show {
  display: block;
}

/* Change the background color of the dropdown button when hovering */
.dropdown:hover .dropbtn {
  background-color: #2478ff;
}

/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */

/*blog windows css [ 2 ]*/

/* Hide scrollbars for Chrome, Safari and Opera */

.notice-iframe {
  scroll-margin-top: 50vh;
  width: 100%;
  height: 50vh;
  /* top: -200px !important; */
  /* overflow: hidden; */
  /* animation: alternate; */
  border: none;
  /* transform: scaleY(-500px); */
}

.top-bar-2 {
  position: relative;
  width: 100%;
  height: 250px;
  background-color: #1a1a1a;
  border-bottom: 1px solid #000000;
  overflow: hidden;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.iframe-container-2 {
  width: 100%;
  height: 200%;
  overflow: hidden;
  position: relative;

}

.iframe-container-2 iframe {
  width: 103%;
  height: 200%;
  border: none;
  position: absolute;
  top: -125px;
  left: 0;
  pointer-events: none;
  /* Prevents interaction with the iframe */
}

/* SCROLL TEXT (MARQUEE IS OLD) */

.scroll-container {
  height: 100px;
  /* Visible area */
  overflow: clip;
  position: relative;
}

.scroll-text {

  position: absolute;
  white-space: normal;
  animation: scroll-vertical 20s linear infinite;
}

@keyframes scroll-vertical {
  from {
    transform: translateY(5%);
  }

  to {
    transform: translateY(-40%);
  }
}


/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */

/* IMG SCROLL */

.img-container {
  z-index: 1;
  padding: 2%;
  border-radius: 5px !important;
  width: 100%;
  height: 35vh;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: white;

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #445f9d #f1f1f1;
}

/* For Chrome, Edge, and Safari */
.img-container::-webkit-scrollbar {
  width: 5px;
}

.img-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0 4px 4px 0;
}

.img-container::-webkit-scrollbar-thumb {
  background: #445f9d;
  border-radius: 5px;
}

.img-container::-webkit-scrollbar-thumb:hover {
  background: #37498a;
}

/* The image itself */
.img-container img {
  width: 100%;
  display: block;
}

/* Smooth scroll effect */
.img-container {
  scroll-behavior: smooth;
}

/* Scroll indicator - optional */
.scroll-indicator {
  text-align: center;
  padding: 10px;
  color: #666;
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #eee;
}


/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */

/*View More*/


.view-more-link-2 {
  float: right;
  position: relative;
  bottom: 40px;
  right: 10px;
  text-align: center;
  background-color: #000000b7;
  color: rgb(255, 255, 255);
  padding: 8px 15px;

  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  z-index: 0;
  transition: background-color 0.3s;
}

.view-more-link-2:hover {
  background-color: #004c99;
}

.content-2 {
  padding: 20px;

}

/* Overlay to prevent iframe interaction */
.overlay-2 {
  /* float: right; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
}

/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* ----------GOOGLE DRIVE IFRAME [ 4 ] to ARCHIVE-------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */



/* HIGHLIGHTS SECTION [ 5 ] 
now Browse Curated Resources*/

.semester-heading {
  margin-top: 20px !important;
  color: black;
  background-color: white;
  width: fit-content;
  margin: auto;
  padding: 5px;
  border-radius: 15px;
  box-shadow: 0 0 10px white;
}

.semester-heading:hover {
  background-color: black;
  color: white;
}

.container-5 {
  max-width: 800px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  /* background-color: #1B262C; */
  background-color: #213448;
  border-radius: 15px;
  margin-top: 25px;
  margin: auto;
  border-radius: 15px;
  padding: 25px;
  margin: 20px auto;
  width: 95%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

}


.drive-link-5 {
  margin-bottom: 20px;
}

.drive-link-5 a {
  color: #a8a8c7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.drive-link-5 a:hover {
  color: #ffffff;
}

.highlights-5 {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  margin-top: -5px;
  /* text-align: center; */
  /* justify-content: center;
  display: flex; */
}

.resources-table-5 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  margin-top: 15px;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
}


.resources-table-5 td {
  background-color: #00000044;
  border-radius: 8px;
  padding: 0;
  /* Remove padding from td */
  transition: background-color 0.3s ease;
  text-align: center;
  /* Center the content */
}

.resources-table-5 td:hover {
  background-color: rgba(42, 81, 181, 0.694);
}

/* FOR CLICKABLE BUTTON DIV */

.resources-table-5 td {

  /* max-width: 250px; */
}

.resources-table-5 .cell-link {
  /* max-width: 200px; */
  margin: auto;
  color: #ffffffba;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8%;
  transition: color 0.3s ease;
  width: 100%;
  box-sizing: border-box;

  /* Disable mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-tap-highlight-color: transparent;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
}



/* Add rules for all link states to maintain the same color */
.resources-table-5 .cell-link:link,
.resources-table-5 .cell-link:visited,
.resources-table-5 .cell-link:active,
.resources-table-5 .cell-link:focus {
  color: #ffffffba;
  /* Keep the same color for all states */
  outline: none;
}

/* Only change color on hover */
.resources-table-5 .cell-link:hover {
  color: #ffffff;
}



.resources-table-5 a {
  text-align: center;
  color: #ffffffba;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: color 0.3s ease;
}

.resources-table-5 a:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .resources-table-5 {
    display: flex;
    flex-direction: column;
  }

  .resources-table-5 tr {
    display: flex;
    flex-direction: column;
  }

  .resources-table-5 td {
    margin: 5px 0;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */


/* HOME BUTTON */
/* .home-button {
  bottom: 65px;
  right: 20px;
} */

.home-button {
  z-index: 100;

  position: fixed;
  bottom: 65px;
  right: 20px;

  /* top: 20px;
  left: 20px;
  bottom: 0px;
  right: 0px; */

  background-color: #007bff;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;

  /* Disable mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-tap-highlight-color: transparent;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;

}



/* Add rules for all link states to maintain the same color */
.home-button:link,
.home-button:visited,
.home-button:active,
.home-button:focus {
  color: #ffffff;
  /* Keep the same color for all states */
  outline: none;
}


.home-button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

.home-icon {
  width: 30px;
  height: 30px;
}

/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */

/* BACK BUTTON */




/* .back-icon {
  bottom: 65px;
  right: 65px;
} */

.back-btn-container {
  /* display: none; */
  display: flex;
  justify-content: flex-end;
  margin-bottom: -100px;
  margin-right: 20px;
  margin-top: 50px;

}

.notice-iframe:hover .back-btn-container {
  /* display: block; */
}

.back-icon {
  box-sizing: content-box !important;
  z-index: 1;
  position: fixed;
  /* top: 70px;
  left: 20px; */
  bottom: 65px;
  right: 65px;
  background-color: var(--accent-color);
  color: #fff;
  padding: 8px 10px;
  /* border-radius: 50%; */
  text-decoration: none;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

  width: 20px;
  /* Fixed width */
  height: 25px;
  /* Fixed height */
  line-height: 50px;
  /* Centering the icon */
  border-radius: 50%;

  /* Disable mobile tap highlight */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-tap-highlight-color: transparent;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;

}



/* Add rules for all link states to maintain the same color */
.back-icon:link,
.back-icon:visited,
.back-icon:active,
.back-icon:focus {
  color: #ffffff;
  /* Keep the same color for all states */
  outline: none;
}

.back-icon:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */

/* SCROLL UP OR DOWN BUTTON */

/* .scroll-button {
  bottom: 10px;
  right: 10px;
} */
.scroll-button {
  z-index: 100;

  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  bottom: 10px;
  right: 10px;
  /* top: 120px;
  left: 20px; */
  bottom: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: fixed;
  bottom: 60px;
  right: 110px;
  padding: 20px 20px;
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  /* border-radius: 5px; */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  transition: opacity 0.3s;
  opacity: 0;


  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-tap-highlight-color: transparent;
  -moz-touch-callout: none;
  /* -webkit-user-select: none; */
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll-button:hover {
  background-color: var(--accent-color);
  transform: scale(1.1);
  filter: brightness(0.9);
}

.scroll-button.visible {
  opacity: 1;
}

/* Fix arrow hover color */
.go-to-top-button:hover .arrow {
  border-color: #fff !important;
  /* Force white on hover for contrast against accent color */
}

.arrow {
  border: solid currentColor;
  /* Use text color (white) */
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transition: transform 0.3s;
}

.arrow-circle {
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-up {
  transform: rotate(-135deg);
}

.arrow-down {
  transform: rotate(45deg);
}

/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */
/* -----------------------------------------------------------------  */

/*BOTTOM BAR CSS*/

.navbar-5 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  width: 100%;
  background-color: var(--secondary-color);
  /* Example background, adjust as needed */
  color: var(--text-color);
  text-align: center;
  padding: 10px 0px 15px 0px;
  /* Add some padding to prevent text from touching edges */
  box-sizing: border-box;
  /* Crucial for responsive sizing with padding */
  z-index: 1000;
  /* Ensure it stays on top of other content */
}

.navbar-5 p {
  margin: 0;
  /* Remove default paragraph margin */
  white-space: normal;
  /* Allow text to wrap naturally */
  word-wrap: break-word;
  /* Ensure long words break */
}


/* .navbar-5 {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
} */


.navbar-5 a {
  float: right;
  display: block;
  color: var(--text-color);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar-5 a:hover {
  background: #f1f1f1;
  color: black;
}

.navbar-5 a.active {
  background-color: var(--accent-color);
  color: white;
}

.main {
  padding: 16px;
  margin-bottom: 30px;
}

/* responsive design */


/* @media (max-width: 500px) {


  .home-button {
    bottom: 65px;
    right: 20px;
  }

  .back-icon {
    bottom: 65px;
    right: 65px;
  }

  .scroll-button {
    bottom: 10px;
    right: 10px;
  }


} */
.randomBS-2 {
  display: block;
  display: flex;
  justify-content: center;
}

.show-desk {
  background-color: rgb(160, 225, 255);
  padding: 0.4rem;
  border-radius: 5px;
}

.show-mobile {
  background-color: rgb(188, 252, 225);
  padding: 0.4rem;
  border-radius: 5px;
  display: none;
}

.intro-text {
  padding-top: 5vh;
  padding-bottom: 40vh;
  text-align: center;
  width: 90%;
  margin: auto;
  max-width: 600px;
}

/* Media query for smaller screens */
@media screen and (max-width: 650px) {


  .sectionFAQs a:hover {}

  [data-theme="gray"] .sectionFAQs a:hover {}

  .TG-overview .link-grid .grid-links a {
    /* grid-template-columns: repeat(auto-fill, minmax(50px, 3fr)); */
    max-width: 20px !important;
    text-wrap: wrap;
    /* word-break: break-all; */
    word-wrap: break-word;
  }


  .show-desk {
    display: none;
  }

  .show-mobile {
    width: 70%;
    margin: auto;
    display: block;
  }

  .img-container {
    /* align-items: center; */
    height: 25vh;
  }

  .img-container img {
    /* width: 150% !important; */
    /* margin-right: -15px; */
  }

  .bottom-border-block {
    /* background-color: #333; */
    background-color: #333;
    display: block;
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0;
    z-index: 2;
    left: 0;
  }

  .hidden-link {
    display: show;
  }

  .page-border {
    margin-bottom: 40px !important;
  }

  .navbar-5 {

    background-color: #333;
    border-radius: 25px 25px 5px 5px;
    box-shadow: 0.5px 0.5px 10px black;
    box-sizing: border-box;
    color: white;
    display: block;
    height: 50px;
    left: 0;
    margin-left: 19.1px;
    margin-right: 19.1px;
    margin-top: 20px;
    max-width: -webkit-fill-available;
    max-width: -moz-fill-available;
    padding: 15px 0px 15px 0px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
  }



  .topnav-1,
  .topnav-2 {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .topnav-1 a,
  .topnav-2 a {
    padding: 8px 12px;
    font-size: 14px;
  }


  .randomBS {
    display: block !important;
    /* margin-bottom: 100px !important; */
    display: flex !important;
    justify-content: center !important;

  }

  .randomBS-2 {
    display: none;
  }

  .site-footer {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 2rem 0;
    width: 100%;
    margin-top: auto;
  }

  /*  ---  Gray  Theme  Refinements  for  Index  Page  ---  */
  [data-theme="gray"] .grid-button:hover {
    color: white !important;
  }

  [data-theme="gray"] #info .info-nav-link:hover,
  [data-theme="gray"] #info .info-nav-link-a:hover {
    background-color: #333;
    color: white;
  }

  [data-theme="gray"] #Qbank a:not(.link-hover-a):not(.link-hover-a-3):hover,
  [data-theme="gray"] #Departments a:not(.grid-button):not(.link-hover-a):hover,
  [data-theme="gray"] .info-section a.info-nav-link:hover {
    background-color: #333;
    color: white;
  }

  /* Upload Section Refinements */
  [data-theme="gray"] .upload-section {
    background-color: #e0e0e0;
    /* Lighter background */
  }

  [data-theme="gray"] .upload-title,
  [data-theme="gray"] .upload-section h3,
  [data-theme="gray"] .upload-section p {
    color: #333 !important;
  }

  [data-theme="gray"] .upload-section p small,
  [data-theme="gray"] .upload-section p .link-hover-a-2 {
    color: #333 !important;
    /* Instructions text */
  }

  [data-theme="gray"] .btn-primary:hover {
    filter: brightness(1.2);
    /* Lighter on hover */
  }

  /* ECA & Library Refinements */
  [data-theme="gray"] .resource-link,
  [data-theme="gray"] .resources-nav-link {
    transition: all 0.3s ease;
  }

  [data-theme="gray"] .resource-link:hover,
  [data-theme="gray"] .resources-nav-link:hover {
    background-color: #333;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  /* Exceptions for colored buttons */
  [data-theme="gray"] .resource-link[style*="background-color: green"]:hover,
  [data-theme="gray"] .resource-link[style*="background-color: #0285ff"]:hover,
  [data-theme="gray"] .resource-link[style*="background-color: #C034AA"]:hover,
  [data-theme="gray"] .resource-link[style*="box-shadow"]:hover,
  [data-theme="gray"] .resources-nav-link[style*="box-shadow"]:hover {
    /* Keep original hover behavior or just add shadow */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    /* For ones with specific colors, we generally want to keep them but maybe darken/lighten. 
       The generic rule above overwrites background-color, so we need to reset it 
       or use !important in HTML (which exists). 
       The HTML has inline styles, so those usually win unless !important is used here.
       But the request says "remains as is" for color, but add box-shadow. 
       Since HTML inline style > CSS class (without !important), color shouldn"t change 
       unless we force it. The generic rule above DOES NOT have !important so inline wins.
       So specific colored buttons should keep their color. 
    */
    background-color: initial;
    /* Let inline style win, effectively */
    color: white;
    /* Usually these buttons have white text */
  }

  /* About Section Refinements */
  [data-theme="gray"] #About .info-nav-link-a:hover {
    background-color: #1a1a1a;
    color: white;
  }

  /* Sticky Nav Refinements for Gray Theme */
  [data-theme="gray"] .sticky-nav {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  [data-theme="gray"] .sticky-nav ul li a {
    color: #555;
    /* Lighter font color (dark gray) as requested */
  }

  [data-theme="gray"] .sticky-nav ul li a:hover {
    background-color: #e0e0e0;
    color: #000;
  }
}