/* ========================================
   ABOUT US PAGE - Minimal Custom Styles
   Uses existing theme classes wherever possible
======================================== */

/* Hero Section */
.about-hero-section {
 padding: 117px 0 117px;
}


/* Values Grid */
.about-values-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 48px 32px;
}

.about-value-icon {
 width: 32px;
 height: 32px;
}

/* Timeline */
.about-timeline {
 position: relative;
 margin: 48px auto 64px;
 padding-top: 24px;
}

.about-timeline-line {
 position: absolute;
 top: 6px;
 left: 115px;
 right: 115px;
 height: 2px;
 background:#FDE0C7;
}

.about-timeline-item {
 position: relative;
 text-align: center;
 flex: 1;
 max-width: 240px;
}

.about-timeline-dot {
 position: absolute;
 top: -48px;
 left: 50%;
 transform: translateX(-50%);
 width: 14px;
 height: 14px;
 border-radius: 50%;
 border: 2px solid #FDE0C7;
 background: #FDE0C7;
}

/* Photo Collage - Masonry Grid */
.about-collage-wrapper {
 padding: 0;
 margin-top: 48px;
 width: 100%;
}

.about-collage-grid {
 column-count: 5;
 column-gap: 16px;
 padding: 0 40px;
}

.about-collage-item {
 border-radius: var(--radius-4xl);
 overflow: hidden;
 background: var(--color-dark-gray-blue);
 margin-bottom: 16px;
 break-inside: avoid;
 display: inline-block;
 width: 100%;
}

.about-collage-item img {
 width: 100%;
 height: auto;
 display: block;
 object-fit: cover;
}
.about-video-btn .watch-video-play-btn{
	transform:none;
}

/* Large desktop - 6 columns */
@media (min-width: 1400px) {
 .about-collage-grid {
   column-count: 5;
 }
}

/* Who We Serve Cards */
.about-serve-card {
   cursor:pointer;
 transition: transform 0.3s ease-in-out, border-color 0.3s ease, color 0.3s ease-in-out;
}

.about-serve-card:hover {
 border-color: rgba(222, 60, 13, 0.4);
}

.about-serve-card-icon {
 margin-bottom: 32px;
}

.about-serve-card-link {
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: color 0.3s ease;
}

.about-serve-card:hover{
 color: var(--color-orange);
 transition: color 0.3s ease;
}
.about-serve-card:hover a{
 color: var(--color-orange);
 transition: color 0.3s ease;
}
.about-serve-card:hover .support-link svg{
 fill: var(--color-orange);
 rotate: 40deg;
 transition:0.3s ease-in-out;
}
.about-serve-card:hover .support-link path{
 fill: var(--color-orange);
 stroke: var(--color-orange);
 transition:color 0.3s ease;
}

/* People Behind - Full Width Slider */
.about-people-slider-wrapper {
 width: 100%;
 overflow: hidden;
}

.about-people-item {
 border-radius: var(--card-radius);
 overflow: hidden;
 background: var(--color-dark-gray-blue);
 aspect-ratio: 4/3;
}

.about-people-item img,
.about-cometcon-item img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

/* CometCon Gallery */
.about-cometcon-item {
 border-radius: var(--radius-4xl);
 overflow: hidden;
 transition:0.5s ease-in-out;
}

/* .about-cometcon-item:hover {
 border: 1px solid #DE3C0D;
 box-shadow: 0 0 28px 0 #DE3C0D;
 transition:0.5s ease-in-out;
} */

/* Meet The Crew - cards */

.about-crew-card img{
  border-radius: var(--radius-4xl);
  border: 1px solid #2D3752;
  width:100%;
  height:358px;
  object-fit:cover;
}

/* Join Team Card */
.about-join-card,
.about-newsletter-card{
 position:relative;
 background: var(--gradient-card-full);
 border-radius: var(--card-radius);
 padding: 40px;
}

/* Video Button */
.about-video-btn {
 border-radius: 50%;
 border: none;
 cursor: pointer;
 transition: transform 0.3s ease;
}

/* Newsletter Card */

.about-newsletter-input {
 background: transparent !important;
 border: 1px solid #40508D !important;
 padding: 9px 24px 9px 14px;
 color:#97A6CF !important;
 width:100% !important;	
}
.about-newsletter-submit {
	width:348px !important;
}
.about-newsletter-input::placeholder{
  color:#97A6CF !important;
}

.about-newsletter-input:focus {
 border-color: var(--color-orange) !important;
 box-shadow: none !important;
}

/* Slider Controls - Arrow + Dots + Arrow */
.about-slider-controls {
 display: flex;
 display: none;	
 align-items: center;
 justify-content: center;
 gap: 20px;
 margin-top: 32px;
}

/* Navigation Buttons - SVG already has cream bg + orange arrow */
.about-nav-btn {
 width: 48px;
 height: 48px;
 min-width: 48px;
 border-radius: 50%;
 border: none;
 background: transparent;
 padding: 0;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: transform 0.3s ease, opacity 0.3s ease;
}

.about-nav-btn:hover {
 transform: scale(1.08);
}

.about-nav-btn img {
 width: 26px;
 height: 26px;
}


/* Hide overflow so extra dots don't stretch */
.about-crew-pagination {
  max-width: 400px;
  overflow: hidden;
}




/* Swiper Pagination Dots */
.about-people-pagination,
.about-crew-pagination,
.about-serve-pagination,
.about-cometcon-pagination{
 position: relative !important;
 bottom: auto !important;
 width: auto !important;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
}

.about-people-pagination .swiper-pagination-bullet,
.about-crew-pagination .swiper-pagination-bullet,
.about-serve-pagination .swiper-pagination-bullet,
.about-cometcon-pagination .swiper-pagination-bullet{
 width: 10px;
 height: 10px;
 background: rgba(255, 255, 255, 0.3);
 opacity: 1;
 margin: 0 !important;
 transition: all 0.3s ease;
}

.about-people-pagination .swiper-pagination-bullet-active,
.about-crew-pagination .swiper-pagination-bullet-active,
.about-serve-pagination .swiper-pagination-bullet-active,
.about-cometcon-pagination .swiper-pagination-bullet-active {
 background: #fff;
}

/* Legacy Slider Navigation (keeping for reference) */
.about-slider-nav {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 margin-top: 24px;
 padding: 0 40px;
}

.about-slider-btn {
 background: transparent;
 border: none;
 padding: 0;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 transition: opacity 0.3s ease;
}

.about-slider-btn:hover {
 opacity: 0.7;
}

.about-slider-btn img {
 width: 28px;
 height: 28px;
}

.about-slider-dots {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
}

.about-slider-dots .swiper-pagination-bullet {
 width: 8px;
 height: 8px;
 background: var(--color-white-50);
 border-radius: 50%;
 opacity: 1;
 cursor: pointer;
 transition: all 0.3s ease;
 margin: 0 !important;
}

.about-slider-dots .swiper-pagination-bullet-active {
 background: #ffffff;
 width: 10px;
 height: 10px;
}

/* ========================================
  RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
 .about-hero-section {
   padding: 80px 0 60px;
 }

 .about-values-grid {
   gap: 24px 32px;
 }

.about-collage-grid {
   column-count: 4;
   column-gap: 16px;
   padding: 0 24px;
 }

 .about-join-card,
 .about-newsletter-card {
   padding: 32px;
 }

 .about-people-swiper,
 .about-crew-swiper {
   padding: 0 5%;
 }
}

@media (max-width: 767.98px) {
 .about-hero-section {
   padding: 40px 16px 40px;
   text-align: center;
 }

 .about-label {
   justify-content: center;
 }

 .about-values-grid {
   grid-template-columns: 1fr 1fr;
   gap: 24px 20px;
 }

 .about-timeline {
   margin: 32px 0 40px;
   overflow-x: auto;
   padding-bottom: 16px;
 }
 
 .about-timeline-line {
    left:55px;
    right: 0;
    min-width: 490px;
    width: 100%;
  }

 .about-timeline-items {
   min-width: 600px;
 }

 .about-collage-wrapper {
   padding: 0;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin-left: -16px;
   margin-right: -16px;
   width:100%;
 }

 .about-collage-grid {
   column-count: 5;
   column-gap: 10px;
   padding: 0 16px;
   min-width: 640px;
   width: auto;
 }

 .about-collage-item {
   margin-bottom: 12px;
   break-inside: avoid;
   display: inline-block;
   width: 100%;
 }

 .about-collage-item img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
 }

 .about-serve-card {
   padding: 24px 20px;
 }

 .about-people-swiper,
 .about-crew-swiper {
   padding: 0;
 }

 .about-cometcon-gallery {
   flex-direction: column;
 }

 .about-crew-card {
   max-width: 310px;
 }

 .about-join-card{
   padding: 24px 16px;
 }
 .about-newsletter-card {
   padding: 24px;
   text-align: center;
 }
 .about-crew-swiper .swiper-wrapper .swiper-slide{
     display:flex;
     justify-content:center;
 }
 .watch-video-play-btn svg{
     height:38px;
     width:32px;
 }
 .about-newsletter-submit {
	width:300px !important;
	}
}