/* ==========================================================================
   Table of Contents:
   1. Global Variables and Root Styles
   2. Hero Landing Section
   3. Community Content Section
   4. Social Feed Section
   5. Community Efforts Section
   6. Community Slideshow Section
   7. Community Partners Section
   8. Media Queries
   ========================================================================== */

/* ==========================================================================
   1. Global Variables and Root Styles
   ========================================================================== */
:root {
  --stroke-0: #231f20;
  --fill-0: #2d3648;
  --primary-text: #231f20;
  --secondary-text: #63656a;
  --background-light: #fafafa;
  --background-gray: #f5f5f5;
  --accent-blue: #457b9d;
  --accent-blue-hover: #3d6f8d;
}

/* ==========================================================================
   2. Hero Landing Section
   ========================================================================== */
.hero-landing-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  padding: 108px 1rem;
  position: relative;
  width: 100%;
  height: 100%;
}

.landing-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1360px;
  width: 100%;
  gap: 1rem;
}

.title-copy-frame {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 500px;
}

.title-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: flex-start;
  color: white;
  text-align: left;
  width: 100%;
  max-width: 500px;
}

.sup-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
}

.hero-main-title {
  font-size: 65px;
  line-height: 78px;
  font-weight: bold;
  color: #fafafa;
  margin: 0;
}

.script {
  font-family: "Brownhill Script";
  font-size: 3.5rem;
  line-height: 48px;
}

.copy-button-frame {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  color: white;
}

.intro-text p {
  font-size: 1rem;
  line-height: 1.5;
  color: white;
}

.intro-bold {
  font-weight: bold;
}

.cta-button {
  background-color: #ffffff;
  color: #000000;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #f0f0f0;
}

/* Hero Mobile/Tablet Image */
.image-mobile {
  display: block;
  width: 100%;
}

/* Hero Desktop Image */
.image-desktop {
  display: none;
}

.right-side-content-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  flex-shrink: 0;
}

.feature-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 4px 15px 0px rgba(35, 31, 32, 0.3);
  width: 310.63px;
  height: 212px;
}

@media screen and (max-width: 480px) {
 .community-content-title>h1, .social-feed-title,  .community-partners-heading>.main-title, .community-efforts-main-title>h1, .community-slideshow-title {
    font-size: 32px;
  }
   .hero-main-title{
    font-size: 42px;
  }
  .hero-content{
    padding: 40px 1rem;
  }
  .script {
    font-size: 48px;
  }
}

/* ==========================================================================
   3. Community Content Section
   ========================================================================== */
/* --- Community Content Section --- */
.community-content-section {
  width: 100%;
  padding: 40px 16px;
  box-sizing: border-box;
  background-color: #fafafa;
}

.community-section-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1360px;
  margin: 0 auto;
  align-items: center;
}

/* Video component */
.community-video-component {
  flex: 1;
  min-width: 300px;
}

.community-video-component .video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.community-video-component .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Content component */
.community-content-component {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.community-content-title h1 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 42px;
  line-height: 1.1;
  font-weight: bold;
  color: #21272a;
  margin: 0;
}

.community-description p {
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
  margin: 0;
}

/* Bullet points */
.community-bullet-points ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.community-bullet-points li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.community-bullet-points li span {
  font-size: 1rem;
  color: #4a5568;
}

/* Stats */
.community-stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.community-stats-column {
  flex: 1;
  min-width: 150px;
}

.community-stat-value p {
  font-size: 2rem;
  font-weight: bold;
  color: #21272a;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.community-stat-label p {
  font-size: 1rem;
  color: #4a5568;
  margin: 0;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .community-section-wrapper {
    flex-direction: column;
  }

  .community-video-component,
  .community-content-component {
    width: 100%;
  }
}

/* ==========================================================================
   4. Social Feed Section
   ========================================================================== */
/* Social Feed Section Styles */
.social-feed-section {
  background-color: #fafafa;
  padding: 40px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-feed-container {
  max-width: 1360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.social-feed-title {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 44px;
  color: #000000;
  margin: 0;
}

.social-feed-description p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #63656a;
  margin-bottom: 0 !important;
}

.hashtag {
  font-weight: 700;
}

.social-feed-grid {
  width: 100%;
  position: relative;
  min-height: 500px;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
  .social-feed-section {
    padding: 32px 20px;
  }
}

@media screen and (max-width: 480px) {
  .social-feed-section {
    padding: 24px 16px;
  }
  .social-feed-grid {
    min-height: unset;
  }
  .social-feed-title {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   5. Community Efforts Section
   ========================================================================== */
/* CSS Variables */
:root {
  --stroke-0: #231f20;
  --fill-0: #2d3648;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f8fafc;
  height: 100vh;
  overflow-x: auto;
}

/* Main Layout */
.community-efforts-main-container {
  background-color: #f8fafc;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.community-efforts-content-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem;
  position: relative;
  width: 100%;
  height: 100%;
}

.community-efforts-max-width-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1360px;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

/* Header Styles */
.community-efforts-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  width: 1360px;
  max-width: 100%;
}

.community-efforts-header-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 0;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  text-align: left;
  width: 90%;
}

.community-efforts-main-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.community-efforts-main-title h1 {
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 44px;
  color: #231f20;
  white-space: pre;
  margin-bottom: 0;
}

.community-efforts-subtitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  width: min-content;
}

.community-efforts-subtitle p {
  display: block;
  line-height: 27px;
  color: #63656a;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

/* Arrow Controls */
.arrow-controls {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}

.arrow-button {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.arrow-button-inner {
  position: absolute;
  inset: -5%;
}

.arrow-button svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Cards Container */
.cards-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  height: 500px;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  width: 1360px;
  touch-action: pan-x pinch-zoom;
  will-change: transform;
  overflow: visible;
}

@media (max-width: 768px) {
  .cards-container {
    width: 100%;
    justify-content: flex-start;
    overflow: visible;
    padding: 0 !important;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .cards-container {
    width: 100%;
    justify-content: flex-start;
    overflow: hidden;
    touch-action: pan-x pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
  .community-efforts-content-wrapper {
    padding: 32px 16px;
  }
}

/* Card Styles */
.card {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 0 1px 0;
  position: relative;
  flex-shrink: 0;
  transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: width, transform;
  opacity: 1;
  visibility: visible;
  z-index: 1; /* base */
}

@media (max-width: 768px) {
  .card {
    min-width: calc(100vw - 2rem);
    width: calc(100vw - 2rem) !important;
    margin: 0;
    position: relative;
    z-index: 1; /* default for collapsed cards */
  }
  .cards-container {
    overflow: visible !important;
    touch-action: pan-x pinch-zoom;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .card.expanded {
    width: calc(100vw - 2rem) !important;
    z-index: 10; /* bring expanded card above collapsed */
  }

  .card.collapsed {
    width: calc(100vw - 2rem) !important;
    opacity: 1;
    visibility: visible;
    z-index: 1; /* below expanded */
  }
  .card-content-container {
    overflow: visible !important;
  }
}

.card.clickable {
  cursor: pointer;
}

.card.expanded {
  width: 75%;
  z-index: 10; /* top layer */
}

.card.collapsed {
  width: 11%;
}

/* CRITICAL: Card Content Container - This creates the slide-up effect */
.card-content-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* This is key - the container extends beyond the card to allow content to slide up from below */
  height: 200%;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
}

.card-content-wrapper {
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
  flex-shrink: 0;
  width: 100%;
  will-change: transform, opacity;
  pointer-events: auto;
  /* Always maintain auto height - no height scaling */
  height: auto;
  min-height: fit-content;
}

/* Base states - no transitions, immediate application */
.card-content-wrapper.expanded {
  /* Final position - at the bottom of the card */
  transform: translateY(0%);
  opacity: 1;
}

.card-content-wrapper.collapsed {
  /* Hidden position - completely below the card */
  transform: translateY(100%);
  opacity: 1;
}

/* Animation states for expanding */
.card-content-wrapper.expanding {
  /* Start completely hidden below the card */
  transform: translateY(100%);
  opacity: 0;
  /* Exact React Motion timing: duration: 0.4, ease: "easeOut", delay: 0.1 */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
    opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.card-content-wrapper.expanding.animate-in {
  /* Slide up to final position */
  transform: translateY(0%);
  opacity: 1;
}

/* Animation states for collapsing */
.card-content-wrapper.collapsing {
  /* Start from visible position */
  transform: translateY(0%);
  opacity: 1;
  /* Exact React Motion timing: duration: 0.3, ease: "easeIn" */
  transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19),
    opacity 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.card-content-wrapper.collapsing.animate-out {
  /* Slide down to hidden position */
  transform: translateY(100%);
  opacity: 0;
}

.card-content-inner {
  overflow: visible;
  position: relative;
  width: 100%;
  height: 100%;
}

.card-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 32px;
  position: relative;
  width: 100%;
  min-height: fit-content;
}

/* Card Typography */
.card-title {
  text-shadow: rgba(10, 13, 18, 0.06) 0px 1px 2px,
    rgba(10, 13, 18, 0.1) 0px 1px 3px;
  display: flex;
  flex-direction: column;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  justify-content: center;
  line-height: 0;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  font-size: 28px;
  text-align: left;
  color: #fafafa;
  white-space: nowrap;
}

.card-title p {
  display: block;
  line-height: 31px;
  white-space: pre;
  margin-bottom: 0;
}

.card-description {
  text-shadow: rgba(10, 13, 18, 0.06) 0px 1px 2px,
    rgba(10, 13, 18, 0.1) 0px 1px 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 0;
  min-width: 100%;
  position: relative;
  flex-shrink: 0;
  text-align: left;
  width: min-content;
  font-variation-settings: "wdth" 100;
}

.card-description p {
  line-height: 24px;
  color: #fafafa;
  font-size: 16px;
  margin-bottom: 0;

  display: block;
}

.description-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #fafafa;
  font-variation-settings: "wdth" 100;
}

/* Button Styles */
.read-more-button {
  background-color: #457b9d;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px 16px;
  position: relative;
  border-radius: 2px;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.read-more-text {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  line-height: 0;
  font-style: normal;
  position: relative;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.4px;
}

.read-more-text p {
  color: #fafafa;
  font-size: 20px;
  letter-spacing: 0.4px;
  display: block;
  line-height: 25px;
  white-space: pre;
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .header,
  .cards-container {
    width: 100%;
  }

  .header-content {
    width: calc(100% - 200px);
  }
}

/* ===========================
   Mobile Layout (≤768px)
   =========================== */
@media (max-width: 768px) {
  /* Section wrapper */
  .community-efforts-main-container {
    padding: 2rem 0;
  }

  /* Header layout */
  .community-efforts-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }

  .community-efforts-main-title h1 {
    font-size: 31px;
  }

  .community-efforts-subtitle {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Arrow controls */
  .arrow-controls {
    margin-top: 1rem;
    gap: 0.75rem;
  }

  /* Cards container */
  .cards-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
    padding: 0;
    justify-content: flex-start;

    overflow-x: auto; /* horizontal swipe */
    overflow-y: visible; /* expanded content won’t clip */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pinch-zoom;
  }

  /* Individual card */
  .card {
    flex: 0 0 auto;
    min-width: calc(100vw - 2rem); /* full width minus padding */
    width: calc(100vw - 2rem) !important;
    scroll-snap-align: center;
  }

  /* Expanded vs collapsed */
  .card.expanded {
    flex-grow: 1;
  }

  .card.expanded .card-content-container {
    overflow: visible !important; /* expanded content shows */
  }

  .card.collapsed .card-content-container {
    overflow: hidden; /* collapsed stays clipped */
  }

  /* Inner content spacing */
  .card-content {
    padding: 1rem;
  }

  .card-title p {
    font-size: 1.25rem;
    text-wrap: auto;
  }

  .card-description p {
    font-size: 0.95rem;
  }

  .read-more-button {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}

/* Hover Effects */
.arrow-button:hover {
  opacity: 0.8;
}

.read-more-button:hover {
  background-color: #3d6b89;
}

.card.clickable:hover {
  transform: scale(1.002);
  transition: transform 0.2s ease-out,
    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Animation helper classes */
.card-content-wrapper.animating {
  pointer-events: none;
}

/* Ensure content wrapper respects the card boundaries */
.card.collapsed .card-content-container {
  /* For collapsed cards, we still want the content to be positioned but hidden */
  overflow: hidden;
}

.card.expanded .card-content-container {
  /* For expanded cards, allow the content to be visible */
  overflow: visible !important;
}

/* Make title/description styling resilient to extra wrappers */
.card-title,
.card-title * {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #fafafa;
  text-shadow: rgba(10, 13, 18, 0.06) 0px 1px 2px,
    rgba(10, 13, 18, 0.1) 0px 1px 3px;
  line-height: 31px; /* keep readable even if <p> is injected */
  white-space: nowrap;
}

.card-description,
.card-description * {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #fafafa;
  text-shadow: rgba(10, 13, 18, 0.06) 0px 1px 2px,
    rgba(10, 13, 18, 0.1) 0px 1px 3px;
  line-height: 24px;
}

/* If line-height:0 on containers conflicts with auto <p>, reset it */
.card-title,
.card-description {
  line-height: initial;
}

/* Make header title/description resilient to WP <p> wrappers */
.header .main-title,
.header .main-title * {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 44px !important;
  color: #231f20;
  white-space: normal; /* prevent clipping if WP adds tags */
}

.header .subtitle,
.header .subtitle * {
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px !important;
  color: #63656a;
  white-space: normal;
}

/* If a parent previously set line-height:0, restore sane defaults here */
.header .main-title,
.header .subtitle {
  line-height: initial;
}

/* ==========================================================================
   6. Community Slideshow Section
   ========================================================================== */

/* Community Slideshow Section Styles */
.community-slideshow-container {
  background-color: #f5f5f5;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  align-items: center;
}

.community-slideshow-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

.community-slideshow-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
sr7-content {
  width: 100% !important;
  left: 0 !important;
}

div#slidePauseV7,
div#slidePlayV7 {
  left: 0 !important;
}

/* Title section */
.community-slideshow-title-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.community-slideshow-title {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #231f20;
  line-height: 1.2;
}

.community-slideshow-subtitle {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #63656a;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Slideshow main container */
.community-slideshow-main {
  position: relative;
  width: 100%;
  max-width: 80rem;
}

/* Image container */
.community-slideshow-image-container {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #000;
}

.community-slides-wrapper {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease-in-out;
  width: 600%; /* 6 slides * 100% */
}

.community-slide {
  width: 16.666667%; /* 100% / 6 slides */
  height: 100%;
  flex-shrink: 0;
}

.community-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navigation buttons */
.community-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 0.125rem;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-nav-button:hover {
  background: rgba(0, 0, 0, 0.5);
}

.community-nav-button-prev {
  left: 0.5rem;
}

.community-nav-button-next {
  right: 0.5rem;
}

.community-nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Pagination */
.community-pagination-container {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.community-pagination-dots {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 0.125rem;
  padding: 0.5rem 1rem;
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
}

.community-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.3125rem;
  border: none;
  background-color: #bbbbbb;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.community-dot:hover {
  background-color: #999999;
}

.community-dot.active {
  background-color: #457b9d;
}

/* Responsive design */
@media (min-width: 768px) {
  .community-slideshow-container {
    padding: 3rem 0;
  }

  .community-slideshow-wrapper {
    padding: 0 1.5rem;
  }

  .community-slideshow-content {
    gap: 2rem;
  }

  .community-slideshow-title-container {
    gap: 24px;
  }

  .community-slideshow-title {
    font-size: 1.875rem;
  }

  .community-slideshow-subtitle {
    font-size: 16px;
  }

  .community-slideshow-image-container {
    aspect-ratio: 2.09/1;
  }

  .community-nav-button {
    padding: 0.75rem;
  }

  .community-nav-button-prev {
    left: 1rem;
  }

  .community-nav-button-next {
    right: 1rem;
  }

  .community-nav-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 1024px) {
  .community-slideshow-wrapper {
    padding: 0 2rem;
  }

  .community-slideshow-title {
    font-size: 2.625rem;
    line-height: 2.75rem;
  }

  .community-slideshow-subtitle {
    font-size: 16px;
  }
}

/* Logo Strip Section Styles */
.community-partners-section {
  background-color: #f5f5f5;
  width: 100%;
}

.community-partners-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.community-partners-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  width: 100%;
  max-width: 1360px;
}

.community-partners-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Heading Container */
.community-partners-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.community-partners-heading .main-title {
  font-size: 24px;
  line-height: 1.2;
  color: #231f20;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  text-align: center;
}

/* Description */
.community-partners-description p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #63656a;
  text-align: center;
  max-width: 768px;
  padding: 0 16px;
  margin-bottom: 0;
}

.community-partners-description p {
  line-height: 1.6;
}

/* Partners Grid */
.community-partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.community-partner-item {
  width: 100%;
}

.community-partner-logo {
  background-color: white;
  height: 80px;
  position: relative;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.community-partner-image {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.community-partner-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0px 16px 20px -4px rgba(10, 13, 18, 0.12),
    0px 6px 8px -2px rgba(10, 13, 18, 0.05);
}

/* Responsive Styles for Logo Strip */
@media (min-width: 640px) {
  .community-partners-wrapper {
    gap: 32px;
    padding: 64px 24px;
  }

  .community-partners-inner {
    gap: 24px;
  }

  .community-partners-heading .main-title {
    font-size: 32px;
  }

  .community-partners-description {
    font-size: 16px;
  }

  .community-partners-grid {
    gap: 16px;
  }

  .community-partner-item {
    width: calc(50% - 8px);
  }

  .community-partner-logo {
    height: 96px;
  }
}
@media screen and (max-width: 480px) {
  .community-partners-heading .main-title {
    font-size: 32px;
  }
}

@media (min-width: 768px) {
  .community-partners-wrapper {
    padding: 80px 32px;
  }

  .community-partners-heading > .main-title,
  .community-content-title > h1,
  .social-feed-title,
  .community-efforts-main-title > h1,
  .community-slideshow-title {
    font-size: 36px;
  }

  .community-partners-grid {
    gap: 20px;
  }

  .community-partner-item {
    width: calc(33.333% - 13.33px);
  }

  .community-partner-logo {
    height: 112px;
  }
}

@media (min-width: 1024px) {
  .community-partners-wrapper {
    padding: 60px 40px;
  }

  .community-partners-heading .main-title {
    font-size: 42px;
  }

  .community-partner-item {
    width: calc(25% - 15px);
  }

  .community-partner-logo {
    height: 105px;
  }
}

@media (min-width: 1280px) {
  .community-partner-item {
    width: calc(20% - 16px);
  }
}