/* ------------------------------------------
   Global Styles
------------------------------------------ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ------------------------------------------
   Main Section Layout
------------------------------------------ */
main {
  padding: 2rem 0;
}

.section {
  margin: 4rem 0;
  padding: 3rem 0;
  position: relative;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.section-title h1 {
  font-family: var(--font-secondary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.1rem;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.section-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.section-content p {
  font-family: var(--font-primary);
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #252422;
}

.section-content a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.section-content a:hover {
  opacity: 0.8;
}

/* ------------------------------------------
   Section-wise Colors (inspired by resources page)
------------------------------------------ */

/* Get In Touch: Blue color (#2E86AB) */
.get-in-touch-section {
  border-top: 4px solid #2E86AB;
  background: linear-gradient(135deg, rgba(46, 134, 171, 0.05) 0%, rgba(46, 134, 171, 0.02) 100%);
}

.get-in-touch-section .section-title h1 {
  color: #2E86AB;
}

.get-in-touch-section .section-content a:hover {
  color: #2E86AB;
}

/* Volunteer: Orange color (#F18F01) */
.volunteer-section {
  border-top: 4px solid #F18F01;
  background: linear-gradient(135deg, rgba(241, 143, 1, 0.05) 0%, rgba(241, 143, 1, 0.02) 100%);
}

.volunteer-section .section-title h1 {
  color: #F18F01;
}

.volunteer-section .section-content a:hover {
  color: #F18F01;
}

/* Careers: Purple color (#8E44AD) */
.careers-section {
  border-top: 4px solid #8E44AD;
  background: linear-gradient(135deg, rgba(142, 68, 173, 0.05) 0%, rgba(142, 68, 173, 0.02) 100%);
}

.careers-section .section-title h1 {
  color: #8E44AD;
}

.careers-section .section-content a:hover {
  color: #8E44AD;
}

/* Donate: Green color (#27AE60) */
.donate-section {
  border-top: 4px solid #27AE60;
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, rgba(39, 174, 96, 0.02) 100%);
}

.donate-section .section-title h1 {
  color: #27AE60;
}

.donate-section .section-content a:hover {
  color: #27AE60;
}

/* ------------------------------------------
   Donate Section Special Styling
------------------------------------------ */
.donate-section .section-content {
  max-width: 100%;
  padding: 0;
}

/* Ensure the donate section uses existing footer styling */
.donate-section .donate {
  /* Inherits styles from main.css footer donate section */
}

/* ------------------------------------------
   Responsive Design
------------------------------------------ */

/* Tablet and below */
@media (max-width: 1023px) {
  .section {
    margin: 3rem 0;
    padding: 2rem 0;
  }

  .section-content {
    padding: 0 1.5rem;
  }

  .section-title h1 {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .section-content p {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
}

/* Mobile */
@media (max-width: 767px) {
  main {
    padding: 1rem 0;
  }

  .section {
    margin: 2rem 0;
    padding: 1.5rem 0;
  }

  .section-content {
    padding: 0 1rem;
  }

  .section-title {
    margin-bottom: 1.5rem;
  }

  .section-title h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .section-content p {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
    margin-bottom: 1rem;
  }
}

/* Small mobile */
@media (max-width: 479px) {
  .section {
    margin: 1.5rem 0;
    padding: 1rem 0;
  }

  .section-content {
    padding: 0 0.8rem;
  }

  .section-title h1 {
    font-size: clamp(1.6rem, 10vw, 2.2rem);
    letter-spacing: -0.05rem;
  }
}

/* ------------------------------------------
   Footer Social Icons Fix
------------------------------------------ */
.footer_socials {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
  margin-bottom: 0.8rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.footer_socials picture {
  display: inline-block !important;
}

.footer_socials img {
  width: 45px !important;
  height: 45px !important;
  filter: brightness(0) invert(1) !important;
  transition: transform 0.3s ease !important;
  display: block !important;
}

.footer_socials img:hover {
  transform: scale(1.1) !important;
  cursor: pointer !important;
}