/* =========================================================================
   Table of Contents:
   
   1. CSS Variables & Theme Settings
   2. Base & Reset Styles
   3. Typography & Common Elements
   4. Layout Components
   5. Button Styles
   6. Header & Navigation
   7. Page Sections
     7.1 Hero/Featured Section
     7.2 Mission Section
     7.3 Present Head Section
     7.4 Books Section
     7.5 Social Media Section
     7.6 Join Us Section
     7.7 Support Us Section
     7.8 Contact Section
   8. Utility Components
     8.1 Preloader
     8.2 Download Popup
     8.3 Back to Top Button
   9. Footer
   10. Media Queries
   11. Utility Classes
   ========================================================================= */

/* =========================================================================
   1. CSS Variables & Theme Settings
   ========================================================================= */
:root {
  /* Color Palette */
  --primary-color: #7294c2; /* Keep original soft blue, modern */
  --secondary-color: #b18acb; /* Soft violet-lavender */
  --accent-color: #f6a74d; /* Friendly orange-gold */
  --bg-color: #f6f9fc; /* Very light blue-gray */
  --card-bg: #ffffff; /* Clean white for cards */
  --section-alt-bg: #eaf1fb; /* Very soft blue for contrast */
  --text-color: #2d2d2d; /* Near-black, soft on the eyes */
  --text-light: #6c6f75; /* Neutral-gray for secondary text */
  --border-color: #dce3ea; /* Soft borders */
  --shadow-color: rgba(0, 0, 0, 0.06);
  --overlay-color: rgba(0, 0, 0, 0.5);

  --primary-color-rgb: 114, 148, 194;
  --secondary-color-rgb: 177, 138, 203;

  /* Social Media Colors */
  --facebook-color: #4267b2;
  --youtube-color: #ff0000;
  --tiktok-color: #000000;
  --whatsapp-color: #25d366;
  --twitter-color: #1da1f2;
  --instagram-color: #e1306c;
  --telegram-color: #0088cc;

  /* Typography */
  --base-font-size: 16px;
  --h1-size: 2.8rem;
  --h2-size: 2.5rem;
  --h3-size: 1.75rem;
  --h4-size: 1.25rem;
  --line-height: 1.6;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-round: 50%;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Container Width */
  --container-width: 1200px;
  --container-padding: 1rem;
}

/* Dark Mode Variables */
.dark-mode {
  --primary-color: #7aa7f9; /* Soft but vivid blue */
  --secondary-color: #b58df1; /* Light lavender */
  --accent-color: #ffb86b; /* Warm accent (orange-peach) */
  --bg-color: #0e1a2b; /* Deep navy-blue background */
  --card-bg: #162232; /* Slightly lighter than bg-color */
  --section-alt-bg: #1c2a3a; /* Blue-gray section alt */
  --text-color: #e6f0ff; /* Soft near-white text */
  --text-light: #a8b2c5; /* Muted blue-gray for secondary text */
  --border-color: #2c3a4f; /* Subtle blue-gray borders */
  --shadow-color: rgba(0, 0, 0, 0.4);
  --overlay-color: rgba(10, 20, 30, 0.8);

  --primary-color-rgb: 122, 167, 249;
  --secondary-color-rgb: 181, 141, 241;
}

/* =========================================================================
   2. Base & Reset Styles
   ========================================================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: var(--line-height);
  color: var(--text-color);
  background-color: var(--bg-color);
  overflow-x: hidden;
  transition: background-color var(--transition-normal),
    color var(--transition-normal);
  /* Fixes Google Translate position issue */
  top: 0 !important;
}

/* =========================================================================
   3. Typography & Common Elements
   ========================================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: var(--h1-size);
}
h2 {
  font-size: var(--h2-size);
}
h3 {
  font-size: var(--h3-size);
}
h4 {
  font-size: var(--h4-size);
}

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--secondary-color);
}

/* =========================================================================
   4. Layout Components
   ========================================================================= */
/* Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  padding: 0 var(--container-padding);
  margin: 0 auto;
}

/* Section Styles */
section {
  padding: var(--spacing-md) 0;
}

/* Alternating section background colors */
section:nth-child(odd) {
  background-color: var(--bg-color);
}

section:nth-child(even) {
  background-color: var(--section-alt-bg);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.section-divider {
  height: 4px;
  width: 60px;
  background: var(--primary-color);
  margin: 0 auto;
  border-radius: var(--border-radius-sm);
}

/* =========================================================================
   5. Button Styles
   ========================================================================= */
/* Basic Button */
.btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 1rem;
  text-align: center;
  width: 100%; /* Full width by default */
}

.btn:focus {
  outline: none;
}

/* Primary Button Style */
.primary-btn {
  background-color: var(--primary-color);
  color: white;
}

.primary-btn:hover {
  background-color: var(--secondary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--shadow-color);
}

/* Secondary Button Style */
.secondary-btn {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.secondary-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--shadow-color);
}

/* Button Group Container */
.btn-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-sm);
}

/* Responsive button layouts - common pattern across the site */
.btn-group,
.book-detail-content .btn-group,
.form-view-buttons,
.join-info .btn-group {
  display: flex;
  width: 100%;
  gap: var(--spacing-sm);
}

.btn-group .btn,
.book-detail-content .btn,
.form-view-buttons .btn,
.join-info .btn {
  width: 100%;
  text-align: center;
}

/* Above 480px: buttons side by side */
@media screen and (min-width: 481px) {
  .btn-group,
  .book-detail-content .btn-group,
  .form-view-buttons,
  .join-info .btn-group {
    flex-direction: row;
  }
}

/* Below 480px: buttons stacked with reduced padding */
@media screen and (max-width: 480px) {
  .btn-group,
  .book-detail-content .btn-group,
  .form-view-buttons,
  .join-info .btn-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn,
  .book-detail-content .btn,
  .form-view-buttons .btn,
  .join-info .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .navbar {
    flex-direction: column;
    align-items: center;
  }
  .nav-menu {
    top: 95px !important;
  }
  .logo .logo-text {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    margin-bottom: 8px;
  }
  .logo-text .logo-part1,
  .logo-text .logo-part2 {
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: none;
    color: #ffffff;
  }
}

/* Extra small screens */
@media screen and (max-width: 360px) {
  .btn,
  .book-detail-content .btn,
  .form-view-buttons .btn,
  .join-info .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
}

/* =========================================================================
   6. Header & Navigation
   ========================================================================= */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--primary-color);
  box-shadow: 0 2px 10px var(--shadow-color);
  transition: background-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  position: relative;
}

/* Logo styling */

.logo-text {
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: white;
  line-height: 1.1;
  transition: transform 0.3s ease, color 0.3s ease;
}

.logo-text:hover {
  transform: scale(1.02);
}

.logo-part1 {
  font-size: 1rem;
  font-weight: 600;
  color: #fafafa;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.logo-part2 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

/* Navigation menu */
.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-menu ul {
  display: flex;
  list-style: none;
  gap: 0.6rem;
  white-space: nowrap;
  padding: 0;
}

.nav-menu a {
  color: white;
  font-weight: 500;
  padding: 0.5rem 0.5rem;
  position: relative;
  font-size: 0.85rem;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: white;
  transition: width var(--transition-normal);
}

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

/* Navigation buttons area */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Theme toggle button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
  padding: 0.5rem;
}

#theme-toggle:hover {
  color: var(--accent-color);
}

.light-mode #theme-toggle .fa-sun,
.dark-mode #theme-toggle .fa-moon {
  display: none;
}

/* Mobile menu hamburger icon */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.5rem;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white;
  transition: all var(--transition-fast);
}

/* Google Translate styling */

.goog-te-gadget {
  font-family: "Poppins", sans-serif !important;
  font-size: 0 !important;
}

.goog-te-gadget .goog-te-combo {
  padding: 0.3rem 0.5rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-color);
  background-color: var(--card-bg);
  width: 120px;
}

/* Google Translate banner fix */
#\:0\.targetLanguage > img,
.goog-te-banner-frame {
  display: none !important;
}

.skiptranslate {
  opacity: 0.8;
}

/* =========================================================================
   7. Page Sections
   ========================================================================= */

/* -------------------------------------------------------------------------
   7.1 Hero/Featured Section
   ------------------------------------------------------------------------- */
.hero-section {
  padding-top: calc(80px + var(--spacing-md));
  padding-bottom: var(--spacing-md);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-color-rgb), 0.05),
    rgba(var(--secondary-color-rgb), 0.05)
  );
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.hero-text {
  flex: 0.65;
}

.hero-text h1 {
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
  display: flex;
  flex-direction: column;
  font-size: 2.5rem;
}

.title-part1,
.title-part2 {
  display: block;
}

.title-part1::after {
  content: ",";
}

.hero-image {
  flex: 0.35;
  display: flex;
  justify-content: center;
}

/* Book container with 3D effect */
.book-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3.15/4;
  perspective: 850px;
}

.book {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateZ(-100px) rotateY(20deg);
  background-color: transparent;
  will-change: transform, opacity;
}

.book.active {
  opacity: 1;
  transform: translateZ(0) rotateY(0);
}

.book.exit {
  opacity: 0;
  transform: translateZ(-50px) rotateY(-20deg);
}

/* Subtle hover effect for books */
@media (hover: hover) {
  .book-container:hover .book.active {
    transform: translateZ(20px) rotateY(-5deg);
  }
}

/* -------------------------------------------------------------------------
   7.2 Mission Section
   ------------------------------------------------------------------------- */
.mission-section {
  position: relative;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.mission-section .section-header h2 {
  color: var(--text-color);
}

.mission-cards {
  margin-top: var(--spacing-lg);
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.mission-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 5px 15px var(--shadow-color);
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 400px;
  border: 1px solid var(--border-color);
}

.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px var(--shadow-color);
}

.mission-card .icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
  color: var(--primary-color);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--primary-color-rgb), 0.1);
  border-radius: 50%;
  padding: 1.5rem;
  margin-bottom: var(--spacing-md);
}

.mission-card h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-color);
  font-size: 1.5rem;
}

/* Mission swiper for mobile */
.mission-swiper {
  display: none;
  width: 100%;
  height: 460px;
}

.mission-swiper .swiper-pagination-bullet {
  background-color: var(--primary-color);
  opacity: 0.5;
}

.mission-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   7.3 Present Head Section
   ------------------------------------------------------------------------- */
.head-section {
  background-color: var(--section-alt-bg);
}

.head-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.head-image {
  flex: 0.6;
  display: flex;
  justify-content: end;
}

.head-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 12%;
  box-shadow: 0 10px 20px var(--shadow-color);
  border: 5px solid var(--primary-color);
  padding: 5px;
}

.head-info {
  flex: 1.2;
  padding-left: var(--spacing-xs);
}

.head-info h3 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
  font-size: 1.8rem;
}

.head-info .tagline {
  font-style: italic;
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
  font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
   7.4 Books Section
   ------------------------------------------------------------------------- */
.books-section {
  background-color: var(--bg-color);
}

.books-view-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

.view-btn {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.books-container {
  margin-top: var(--spacing-lg);
}

/* Grid View */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-md);
  max-width: 1000px;
  margin: 0 auto;
}

.book-card-grid {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 5px 15px var(--shadow-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  transition: transform var(--transition-normal);
  text-align: center;
}

.book-card-grid:hover {
  transform: translateY(-5px);
}

.book-card-grid img {
  width: auto;
  height: 180px;
  margin: 0 auto var(--spacing-md);
  transition: transform var(--transition-normal);
  object-fit: contain;
  background-color: transparent;
}

.book-card-grid:hover img {
  transform: rotate3d(0, 1, 0, -15deg);
}

.book-card-grid h3 {
  margin-bottom: var(--spacing-xs);
  color: var(--primary-color);
  font-size: 1.3rem;
}

.book-card-grid .author {
  text-decoration: underline;
  font-weight: 500;
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}

.book-card-grid p {
  flex-grow: 1;
  font-size: 0.9rem;
}

.book-card-grid .btn-group {
  flex-direction: column;
  gap: 0.5rem;
}
/* Coming Soon Label */
.coming-soon {
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  display: inline-block;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-top: auto;
  width: 100%;
  text-align: center;
}

/* Detail View (Slider) */
.books-swiper {
  width: 100%;
  height: auto;
  padding: var(--spacing-md) 0;
}

.books-swiper .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

.book-card-detail {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 5px 15px var(--shadow-color);
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 400px;
  transition: transform var(--transition-normal);
}

.book-detail-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-detail-image img {
  max-width: 250px;
  max-height: 350px;
  transition: transform var(--transition-normal);
  background-color: transparent;
}

.book-detail-content {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  padding-left: var(--spacing-lg);
}

.book-detail-content h3 {
  color: var(--primary-color);
  font-size: 1.8rem;
  margin-bottom: var(--spacing-xs);
}

.book-author {
  font-style: italic;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.book-detail-content p {
  flex-grow: 1;
  margin-bottom: var(--spacing-md);
}

/* -------------------------------------------------------------------------
   7.5 Social Media Section
   ------------------------------------------------------------------------- */
.social-section {
  background-color: var(--section-alt-bg);
}

.social-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.social-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 5px 15px var(--shadow-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.social-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px var(--shadow-color);
}

.social-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.social-card .icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
  align-self: center;
}

/* Social media platform-specific colors */
.social-card.facebook .icon {
  color: var(--facebook-color);
}
.social-card.youtube .icon {
  color: var(--youtube-color);
}
.social-card.tiktok .icon {
  color: var(--tiktok-color);
}
.social-card.whatsapp .icon {
  color: var(--whatsapp-color);
}

.social-card.facebook h3 {
  color: var(--facebook-color);
}
.social-card.youtube h3 {
  color: var(--youtube-color);
}
.social-card.tiktok h3 {
  color: var(--tiktok-color);
}
.social-card.whatsapp h3 {
  color: var(--whatsapp-color);
}

.social-card.facebook a {
  background-color: var(--facebook-color);
}
.social-card.youtube a {
  background-color: var(--youtube-color);
}
.social-card.tiktok a {
  background-color: var(--tiktok-color);
}
.social-card.whatsapp a {
  background-color: var(--whatsapp-color);
}

.social-card h3 {
  margin-bottom: var(--spacing-sm);
  text-align: center;
  font-size: 1.2rem;
}

.social-card p {
  text-align: center;
  flex-grow: 1;
  margin-bottom: 0;
  font-size: 0.95rem;
}

.social-card-buttons {
  margin-top: var(--spacing-xs);
  text-align: center;
}

.social-card a {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  color: white;
  border-radius: var(--border-radius-md);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  width: 100%;
}

.social-card a:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   7.6 Join Us Section
   ------------------------------------------------------------------------- */
.join-section {
  background-color: var(--bg-color);
}

.join-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 10px 30px var(--shadow-color);
}

.join-image {
  flex: 0.5;
  display: flex;
  justify-content: center;
}

.join-image img {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--border-radius-md);
  box-shadow: 2px 8px 15px var(--shadow-color);
  object-fit: contain;
}

.join-info {
  flex: 1.5;
  padding-left: var(--spacing-md);
}

.join-info h3 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
}

.join-info .btn-group {
  margin-top: var(--spacing-md);
}

/* -------------------------------------------------------------------------
   7.7 Support Us Section
   ------------------------------------------------------------------------- */
.support-section {
  background-color: var(--section-alt-bg);
}

.support-content {
  text-align: center;
}

.inspire-message {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-lg);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.payment-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 5px 15px var(--shadow-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition-normal);
  height: 100%;
  min-height: 200px;
}

.payment-card:hover {
  transform: translateY(-5px);
}

.payment-card .icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.payment-card h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-color);
}

/* -------------------------------------------------------------------------
   7.8 Contact Section
   ------------------------------------------------------------------------- */
.contact-section {
  background-color: var(--bg-color);
}

.contact-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.contact-item i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.contact-form {
  position: relative;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-group {
  margin-bottom: var(--spacing-sm);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

/* =========================================================================
   8. Utility Components
   ========================================================================= */

/* -------------------------------------------------------------------------
   8.1 Preloader
   ------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity var(--transition-normal),
    visibility var(--transition-normal);
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------------------
   8.2 Download Popup
   ------------------------------------------------------------------------- */
.download-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.download-popup.visible {
  opacity: 1;
  visibility: visible;
}

.download-content {
  width: 90%;
  max-width: 500px;
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 30px var(--shadow-color);
}

.download-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-light);
}

.download-icon {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.download-content h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.download-content p {
  color: var(--text-light);
}

/* -------------------------------------------------------------------------
   8.3 Back to Top Button
   ------------------------------------------------------------------------- */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-round);
  background-color: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 99;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#backToTop.visible {
  opacity: 1;
  visibility: visible;
}

#backToTop:hover {
  background-color: var(--secondary-color);
  transform: translateY(-5px);
}

/* =========================================================================
   9. Footer
   ========================================================================= */
.footer {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-sm) 0;
  text-align: center;
}

/* =========================================================================
   10. Media Queries
   ========================================================================= */
@media screen and (max-width: 1175px) {
  /* Adjust root variables for smaller screens */

  /* Enable hamburger menu */
  .navbar {
    justify-content: space-between;
    max-width: 100%;
    overflow: hidden;
  }

  .nav-menu {
    position: fixed;
    top: 75px;
    left: auto;
    right: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: var(--primary-color);
    transition: right var(--transition-normal);
    z-index: 999;
    transform: none;
  }

  .nav-menu.active {
    right: 0;
    left: auto;
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .nav-menu li {
    margin-bottom: var(--spacing-md);
    width: 100%;
    text-align: center;
  }

  .hamburger {
    display: flex;
  }
}
/* Larger Screens - 1025px and above */
@media screen and (min-width: 1025px) {
  /* Force mission grid to display on desktop */
  .mission-swiper {
    display: none !important;
  }

  .mission-grid {
    display: grid !important;
  }
}

/* Tablets & Smaller Desktops - 1024px and below */
@media screen and (max-width: 1024px) {
  /* Adjust root variables for smaller screens */
  :root {
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 1.5rem;
    --spacing-xl: 3rem;
    --spacing-lg: 2rem;
    --spacing-md: 1.5rem;
  }

  /* Hero section adjustments */
  .hero-content {
    flex-direction: column-reverse;
    text-align: center;
    align-items: normal;
  }
  .hero-image {
    flex: 0;
    width: 100%;
    display: block;
    text-align: center;
    margin: auto;
  }

  .hero-text h1 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Book display size */
  .book-container {
    width: 45%;
    margin-left: 12%;
  }

  /* Toggle mission grid/swiper */
  /* .mission-grid {
    display: none !important;
  } */

  .mission-swiper {
    display: none !important;
  }

  /* Book detail view */
  .book-card-detail {
    flex-direction: column;
  }

  .book-detail-content {
    padding-left: 0;
    padding-top: var(--spacing-md);
    text-align: center;
  }

  /* Book view toggle buttons */
  .books-view-toggle {
    flex-direction: row;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .books-view-toggle .view-btn {
    flex: 1;
  }
}

/* Tablets - 768px and below */
@media screen and (max-width: 768px) {
  /* Further adjust root variables */
  :root {
    --h1-size: 2rem;
    --h2-size: 1.75rem;
    --h3-size: 1.25rem;
    --spacing-xl: 2.5rem;
    --spacing-lg: 1.5rem;
    --spacing-md: 1rem;
  }

  /* Hero image */

  /* Head section - stack on mobile */
  .head-content {
    flex-direction: column;
    text-align: center;
  }
  .book-container {
    margin-left: 5%;
  }

  .head-image {
    margin-bottom: var(--spacing-md);
  }

  .head-info {
    padding-left: 0;
  }

  /* Join us section */
  .join-content {
    flex-direction: column;
    text-align: center;
  }

  .join-info {
    padding-left: 0;
    padding-top: var(--spacing-md);
  }

  /* Contact section */
  .contact-content {
    grid-template-columns: 1fr;
  }

  /* Book detail adjustments */
  .book-detail-image img {
    max-width: 180px;
    max-height: 250px;
  }

  /* Book view toggles */
  .books-view-toggle {
    width: 100%;
  }

  .books-view-toggle .view-btn {
    font-size: 0.9rem;
  }

  /* Social cards */
  .social-card {
    min-height: 250px;
    padding: var(--spacing-sm);
  }

  .social-card-buttons {
    margin-top: var(--spacing-xs);
  }

  .social-card p {
    font-size: 0.85rem;
  }

  /* Back to top button sizing */
  #backToTop {
    width: 45px;
    height: 45px;
    font-size: 1.125rem;
    bottom: 15px;
    right: 15px;
  }
}

/* Large Mobile - 480px and below */
@media screen and (max-width: 425px) {
  /* Smaller logo and nav elements */
  .logo-text {
    font-size: 1rem;
  }

  .nav-buttons {
    gap: 0.5rem;
  }

  #theme-toggle {
    font-size: 1.3rem;
    margin-left: 10px;
    padding: 0.2rem;
  }

  .hamburger {
    margin-left: 0.3rem;
  }

  .hamburger span {
    width: 20px;
    height: 2px;
  }

  /* Further reduced spacing */
  section {
    padding: 1.5rem 0;
  }

  .section-header {
    margin-bottom: 1rem;
  }

  /* Head section */
  .head-image img {
    max-width: 175px;
  }

  .head-info h3 {
    font-size: 1.5rem;
  }

  .head-info .tagline {
    font-size: 1rem;
  }

  /* Book detail view */
  .book-detail-image img {
    max-width: 140px;
    max-height: 200px;
  }

  .book-detail-content h3 {
    font-size: 1.4rem;
  }

  /* Back to top button sizing */
  #backToTop {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    bottom: 12px;
    right: 12px;
  }
}

/* Small Mobile - 320px and below */
@media screen and (max-width: 320px) {
  /* For very small screens */

  .logo-text {
    font-size: 0.9rem;
  }
}

/* =========================================================================
   11. Utility Classes
   ========================================================================= */
.hidden {
  display: none !important;
}

.books-grid.hidden,
.books-swiper.hidden {
  display: none !important;
}

#contactForm > button {
  padding: 1rem;
}