/*
 * Stylesheet for the Jashn 2025 website
 *
 * This file defines the colour palette and utility classes used across the
 * site. It embraces a modern, minimal aesthetic while introducing subtle
 * flourishes such as a glassy navigation bar, soft card shadows and
 * responsive layouts. Animations are handled via the `.reveal` class in
 * combination with a small IntersectionObserver defined in js/main.js.
 */

/* Colour palette based on the brief */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
:root {
  /*
   * Updated colour palette for the 2025 redesign.  The site now embraces
   * lighter, more organic tones with a pale green base, earthy reds and
   * oranges for contrast and a soft cream for highlights.  Adjust the
   * glassy backdrop tints to complement the new palette.
   */
  /*
   * Revise the palette for a more mature, semi‑formal look.  The primary
   * background is now a warm cream to avoid an overly pastel feel, while
   * the secondary and accent colours retain the earthy red and orange
   * tones for contrast.  Use pure white for light text on dark cards.
   */
   --color-primary: #F3FBF4;     /* misty mint background */
  --color-secondary: #1C5D3A;   /* rich emerald green */
  --color-accent: beige;      /* soft grassy accent */
  --color-light: #FFFFFF;      /* white for light text */
  /* Increase the opacity of the glass background so navigation text
     remains legible when overlaying coloured hero sections. */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.8);
}

/* Reset and typography */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  /*
   * Use the pale green as the page canvas and the brick red as the
   * default text colour.  This ensures good contrast on the light
   * backgrounds used throughout the site.
   */
  background-color: var(--color-primary);
  color: var(--color-secondary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Glassy navigation bar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  /*
   * Adjust sizing so the bar gently overlaps the hero section.  Remove
   * the top margin entirely to eliminate any white band between the
   * navbar and the page header.  Horizontal margins remain to provide
   * breathing room on wide screens.
   */
  width: calc(100%);
  
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.logo{
  width: 92px !important; height: auto !important; border-radius: 50%; margin-left: 5px !important; padding: 0px !important; border: 0px !important; background-color: transparent !important;
}

.nav-link{
  font-size: 17px !important;
  font-weight: 600 !important;
  color: rgb(131, 1, 1) !important;
}

.nav-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  padding: 0.25rem;
  background: var(--glass-bg);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  font-weight: 500;
}

.nav-links a {
  /* Use the warm orange accent for nav text by default.  This gives
     maximum contrast against both the creamy background of the bar and
     the colourful hero artwork when the bar overlaps it.  When the
     cursor hovers or the link is active, switch to the brick red
     secondary colour to indicate focus. */
  color: var(--color-accent);
  text-decoration: none;
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.nav-links a:hover,
/* On hover or active state switch to the darker secondary colour. */
.nav-links a:hover,
.nav-links a.active {
  color: var(--color-secondary);
}

/* Ensure the active nav link uses the secondary colour even if other
   styles are injected later in the cascade. */
.nav-links a.active {
  color: var(--color-secondary) !important;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Hero section */
.hero {
  position: relative;
  min-height: 90vh;
  /* Use one of the abstract patterns from our new palette for the hero
     backdrop.  This ties the landing page into the overall colour scheme
     without clashing with the rest of the site. */
  /* Use an earthy abstract artwork from the palette as the hero backdrop. */
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-light);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.196);
  font-family: "DM Serif Text", serif;
  

}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Apply a semi‑transparent wash of the secondary colour over the hero
     backdrop to ensure the overlaid text remains legible.  The opacity
     has been lowered slightly now that the underlying artwork already
     reflects the palette. */
  /* Tone down the overlay to allow the underlying artwork to peek through.
     A subtler wash keeps the hero inviting while ensuring text legibility. */
  background: rgba(187, 102, 83, 0.35);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 1rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero p {
  font-size: clamp(1rem, 3vw, 1.25rem);
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.main{
  background: url('../assets/Art Posters/3.jpeg') center/cover no-repeat;
  top: 0px !important;
}

.jashn{
  font-size: 7rem;
}

@media screen and (max-width: 768px) {
          /* Styles for screens 768px wide or less (e.g., mobile/tablet) */
          
          .jashn {
            font-size: 3rem ;
          }
        }


.btn {
  display: inline-block;
  border: black;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  background-color: var(--color-accent);
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}


.btn:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}

/* Theme section */
.theme {
  padding: 1rem 1rem;
  background-color: var(--color-secondary);
  color: var(--color-light);
}

.theme .container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.theme .text {
  flex: 1 1 350px;
}

.theme h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-light);
}

.theme p {
  font-size: 1rem;
  /* ensure copy on dark background remains legible */
  color: var(--color-light);
  opacity: 0.95;
}

.theme .image {
  flex: 1 1 350px;
}

.theme .image img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Events section */
.events {
  padding: 4rem 1rem;
  background-color: var(--color-primary);
}

.events h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.events-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.event-card {
  background-color: var(--color-secondary);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
  /* Invert text on dark card for contrast */
  color: var(--color-light);
  
}

.event-card:hover {
  transform: translateY(-6px);
}

.event-card i {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.event-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.event-card p {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Footer */
footer {
  background-color: var(--color-secondary);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-light);
  border-top: 2px solid var(--color-accent);
}

footer p {
  margin-bottom: 0.5rem;
}

footer a {
  color: var(--color-accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* About page styles */
.about-section {
  padding: 4rem 1rem;
}

.about-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.about-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-content .text {
  flex: 1 1 400px;
}

.about-content .text p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.about-content .image {
  flex: 1 1 300px;
}

.about-content .image img {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Team cards */
.team-grid {
  margin-top: 3rem;
  display: grid;
  /* Default to responsive columns that wrap nicely on smaller screens */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* On medium and larger screens, arrange the team cards in exactly two
   columns to satisfy the brief. */
@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.team-card {
  background-color: var(--color-secondary);
  padding: 2rem 1rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
  /* Make sure text on the dark card is light */
  color: var(--color-light);
}

.team-card:hover {
  transform: translateY(-4px);
}

.team-card .avatar {
  font-size: 3rem;
  /* use the light colour for contrast against the card background */
  color: var(--color-light);
  margin-bottom: 0.75rem;
}

.team-card h4 {
  margin-bottom: 0.25rem;
}

.team-card p {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Articles page */
.articles-section {
  padding: 4rem 1rem;
}

.articles-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.articles-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* New layout for the articles overview page with a floating detail pane.
 * The parent uses flexbox to create two columns: a scrollable list on the
 * left and a sticky article display on the right that remains in view. */
.articles-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.articles-list {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-display {
  flex: 1 1 45%;
  background-color: var(--color-light);
  color: var(--color-secondary);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* Stay visible when scrolling */
  position: sticky;
  top: 7rem;
  max-height: 80vh;
  overflow-y: auto;
}

.article-display h3 {
  margin-bottom: 0.5rem;
}

.article-display .meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 1rem;
}

.article-display p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.articles-list .article-card {
  cursor: pointer;
}

.articles-list .article-card.active {
  border: 2px solid var(--color-accent);
  transform: translateY(-4px);
}

.article-card {
  background-color: var(--color-secondary);
  /* Reduced padding to create a smaller, more concise card footprint */
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
  /* ensure text stands out on dark card */
  color: var(--color-light);
}

.article-card:hover {
  transform: translateY(-6px);
}

.article-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.article-card .meta {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.article-card p {
  flex-grow: 1;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.article-card a {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-light);
  border-radius: 1rem;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.article-card a:hover {
  background-color: var(--color-secondary);
}

/* Article page content */
.article-page {
  padding: 4rem 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.article-page h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.article-page .meta {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 2rem;
}

.article-page p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--color-accent);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* Gallery */
.gallery-section {
  padding: 4rem 1rem;
}

.gallery-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.gallery-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.gallery-card:hover {
  transform: translateY(-6px);
}

.gallery-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.gallery-card .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  /* Replace the heavy dark gradient with a warm overlay tinted by the
     accent colour.  This provides contrast for text without making the
     card feel heavy or cluttered. */
  background: linear-gradient(to top, rgba(240, 139, 81, 0.6), transparent);
  color: var(--color-light);
}

.gallery-card h3 {
  font-size: 1.25rem;
}

.gallery-card a {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-light);
  border-radius: 1rem;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.gallery-card a:hover {
  background-color: var(--color-secondary);
}

/* 6×6 gallery grid for the redesigned gallery page */
.gallery-grid-36 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.gallery-cell {
  position: relative;
  width: 100%;
  /* maintain square aspect ratio */
  padding-top: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.gallery-cell img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-cell .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(187, 102, 83, 0.7);
  color: var(--color-light);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0.5rem;
}

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

.gallery-cell:hover .overlay {
  opacity: 1;
}

/* Gallery day page */
.gallery-page {
  padding: 4rem 1rem;
}

.gallery-page h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.image-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.image-grid img {
  width: 100%;
  /* Maintain a 1:1 aspect ratio for thumbnails in the day galleries */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

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

/* Lightbox for gallery */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  /* ensure lightbox appears above the sticky navigation */
  z-index: 2000;
}

#lightbox.show {
  opacity: 1;
  visibility: visible;
}

#lightbox img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 0.5rem;
}

/* Schedule */
.schedule-section {
  padding: 4rem 1rem;
}

/* About page redesigned grid and cards */
.about-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.about-card {
  background-color: var(--color-secondary);
  color: var(--color-light);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.about-card h3 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  color: var(--color-light);
}

.about-card p {
  margin-bottom: 1rem;
  line-height: 1.6;
  opacity: 0.95;
}

.about-card .team-image {
  width: 100%;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.team-list {
  list-style: none;
  padding-left: 0;
}

.team-list li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  /* Ensure team member text is light when displayed on a dark card */
  color: var(--color-light);
}

/* Offset anchor scrolling for in‑page links that jump to sections beneath
   the sticky navbar.  When navigating to the team section on the About page,
   ensure the heading isn’t obscured by the sticky navigation bar by
   reserving extra space above the anchor. */
#team {
  scroll-margin-top: 6rem;
}

.schedule-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.schedule-table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: var(--color-secondary);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  color: var(--color-light);
}

.schedule-table th,
  .schedule-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 248, 232, 0.2);
}

.schedule-table th {
  background-color: var(--color-accent);
  color: var(--color-light);
  text-align: left;
  font-weight: 600;
}

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

/* Responsive layout for the articles page.  On smaller screens the
   floating article pane is hidden and the cards list occupies the
   full width.  Users can tap a card to open the full article page.
 */
@media (max-width: 768px) {
  .articles-layout {
    flex-direction: column;
  }
  .articles-list {
    width: 100%;
  }
  .article-display {
    display: none;
  }
}

/* Gallery timeline list styles */
.gallery-list {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.day-entry {
  display: flex;
  align-items: center;
  background-color: var(--color-light);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.day-entry img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  flex-shrink: 0;
}

.day-entry .details {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-entry h3 {
  font-size: 1.25rem;
  color: var(--color-secondary);
}

.btn-small {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  background-color: var(--color-accent);
  color: var(--color-light);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.btn-small:hover {
  background-color: var(--color-secondary);
}

/*
 * Card‑based gallery listing
 *
 * For a cleaner, more structured gallery landing page we use a two‑column
 * grid of cards rather than a dense mosaic.  Each card displays a
 * representative image for the day, the day title and a button to view
 * that day's gallery.  The grid automatically adapts between one and
 * two columns depending on screen width.
 */
.gallery-grid-cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.day-card {
  background-color: var(--color-light);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.day-card:hover {
  transform: translateY(-6px);
}

.day-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.day-card .card-footer {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-card .card-footer h3 {
  font-size: 1.4rem;
  color: var(--color-secondary);
}

.day-card .card-footer a {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  background-color: var(--color-accent);
  color: var(--color-light);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.day-card .card-footer a:hover {
  background-color: var(--color-secondary);
}

/* Advanced lightbox with navigation and thumbnails */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 2000;
}
#lightbox.show {
  opacity: 1;
  visibility: visible;
}
#lightbox .lightbox-content {
  position: relative;
  background: var(--color-light);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#lightbox .lightbox-content img {
  max-width: 80vw;
  max-height: 60vh;
  border-radius: 0.5rem;
}
#lightbox .lightbox-prev,
#lightbox .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-light);
  border: none;
  font-size: 2rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  z-index: 1;
}
#lightbox .lightbox-prev {
  left: -3rem;
}
#lightbox .lightbox-next {
  right: -3rem;
}
#lightbox .lightbox-thumbs {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
#lightbox .lightbox-thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  opacity: 0.8;
  flex-shrink: 0;
}
#lightbox .lightbox-thumbs img.active {
  border-color: var(--color-accent);
  opacity: 1;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .nav-links {
    gap: 0.75rem;
  }
  .nav-links a {
    font-size: 0.9rem;
  }
}

.img {
  transition: transform 0.25s ease-in-out; /* Smooth transition for the transform */
  transform-origin: center; /* Set the origin point for the scaling, if needed */
}

/* Apply the scale effect when the image is hovered over */
.img:hover {
  transform: scale(1.07); /* Scales the image up to 110% of its original size */;
}

.aadyant-logo {
  transition: transform 0.25s ease-in-out; /* Smooth transition for the transform */
  transform-origin: center; /* Set the origin point for the scaling, if needed */
  scale: 70%;
}

/* Apply the scale effect when the image is hovered over */
.aadyant-logo:hover {
  transform: scale(1.07); /* Scales the image up to 110% of its original size */;
}

.countdown-container{
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-top: 30px;
  width: 500px;
  max-width: 90vw;
  
}

.value-container{
  height: 100px;
  width: 100px;
  padding-top: 7.5px;
  background-color: rgba(53, 0, 0, 0.301);
  margin: auto;
  border-radius: 15px;
  align-items: center !important; 
  border: 2px solid rgb(44, 0, 0);
  margin-top: 20px;
  color: white;
  
}

.value{
  font-size: 35px;
  align-items: center !important; 
  font-weight: 800;
  text-shadow: 2px 2px 3px rgb(14, 14, 14);

}

.xyz{
  align-items: center !important; 
  font-size: 17.5px !important;
}
.video{
  width: 50%;
  min-width: 275px;
  margin: auto;
}

.credit{
  text-align: center;
  color: #1C5D3A;
  cursor: auto;
  font-size: 20px;
  margin-top: 5px;
  font-style: italic;
}

.credit:hover{
  color: #1C5D3A;
}

.article-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.article-thumb {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}
/* Quote cards styling */
.quote-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 20px;
}

.quote-card {
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 10px;
  border-left: 5px solid #4a90e2;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  font-style: italic;
  transition: 0.2s ease;
}

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

.quote-card .author {
  text-align: right;
  font-weight: bold;
  margin-top: 10px;
  color: #444;
  font-style: normal;
}