/* About Us Page Styles */

/* Base Layout */
.about-story-section {
    padding: 50px 0 0 0;
}

.story-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 75px;
    margin-bottom: 40px;
}

/* Title Column */
.story-title-col {
    flex-shrink: 0;
    max-width: 300px;
}

.story-title {
  color: #000;
  font-family: Golden;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 2.5px;
  margin: 0;
}

/* Text Columns */
.story-text-col {
    display: flex;
    gap: 50px;
}

.story-text-left, .story-text-right {
    width: 50%;
    color: #535353;
    font-family: Outfit, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.7;
}

.story-text-col p {
    margin-top: 0px;
    margin-bottom: 24px;
}
.story-text-col p:last-child {
    margin-bottom: 0;
}

.story-text-col strong {
    font-weight: 600;
    color: #1A1A1A;
}

/* Video Block */
.story-video-container {
    width: 100%;
}

.story-video-bg {
    width: 100%;
    height: 635px;
    border-radius: 20px;
    background-color: #E6DFD4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-video-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.15); /* Slight overlay */
    border-radius: inherit;
    pointer-events: none;
}

.story-play-btn {
    position: relative;
    z-index: 2;
    display: block;
    width: 92px;
    height: 92px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.story-play-btn:hover {
    transform: scale(1.05);
}

/* Mission & Values Section */
.about-mv-section {
    padding: 100px 0 0 0;
}

.about-quote-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
  max-width: 1114px;
  margin: 0 auto 80px;
  text-align: center;
}

.about-quote-text {
   color: #000;
   text-align: center;
   font-family: Outfit;
   font-size: 25px;
   font-style: normal;
   font-weight: 200;
   line-height: normal;
}

.about-quote-icon-left svg,
.about-quote-icon-right svg {
    flex-shrink: 0;
}

.about-quote-icon-right {
    align-self: flex-end;
    padding-bottom: 5px;
    transform: translateY(20px);
}

/* Cards Grid */
.about-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.about-card {
  border-radius: 30px;
  background: #FFF;
  padding: 20px 30px 30px 30px;
}

.about-card-header {
    display: flex;
    align-items: end;
    margin-bottom: 15px;
    gap: 15px;
}

.about-card-icon {
    width: 60px;
    height: auto;
    object-fit: contain;
}

.about-card-title {
  color: #000;
  font-family: Golden;
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1.75px;
  margin: 0;
  padding-bottom: 8px;
}

.about-card-body {
  color: #000;
  font-family: Outfit;
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 27px;
}

.about-card-body p {
    margin-top: 0;
    margin-bottom: 20px;
}

.about-card-body p:last-child {
    margin-bottom: 0;
}

.about-card-body strong {
   font-weight: 600;
}

/* Team Introduction Section */
.about-team-section {
    padding: 80px 0 140px 0;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.team-heading {
  color: #000;
  font-family: Golden;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 2.5px;
  margin: 0;
}

/* Reusing services nav arrows styling logic */
.services-nav-arrows {
    display: flex;
    gap: 15px;
    align-items: center;
}

.team-prev, .team-next {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.team-prev:hover, .team-next:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.team-prev.swiper-button-disabled,
.team-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* Team Card Inside Swiper */
.team-card {
    display: flex;
    flex-direction: column;
}

.team-photo {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 15px;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    display: block;
}

.team-name {
  color: #093A58;
  font-family: Outfit;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 1px;
  margin: 0 0 8px 0;
}

.team-title {
  color: #40494E;
  font-family: Outfit;
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 27px;
  margin-bottom: 6px;
}

.team-desc {
  color: #000;
  font-family: Outfit;
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 27px;
}

/* Intro Divider Reset from home-intro to fit here */
.intro-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-top: 110px;
}
.divider-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(26, 26, 26, 0.10); /* Thin elegant line */
  z-index: 1;
}

/* About Features Section (Alternating) */
.about-features-section {
    padding: 0 0 180px 0;
}

.about-features-list {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

.about-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Alternate rows layout */
.about-feature-row:nth-child(even) {
    flex-direction: row-reverse;
}

.feature-text-col {

}

.feature-title-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 30px;
}

.feature-icon {
    flex-shrink: 0;
    width: 70px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon img,
.feature-icon svg {
    max-width: 100%;
    height: auto;
}

.feature-title {
  color: #000;
  font-family: Outfit;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.5px;
  margin: 0;
}

.feature-desc {
  color: #000;
  font-family: Outfit;
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 27px;
}

.feature-desc p {
    margin-top: 0;
    margin-bottom: 20px;
}

.feature-desc p:last-child {
    margin-bottom: 0;
}

.feature-image-col {
    flex-shrink: 0;
}

.feature-image-col img {
    width: 100%;
    height: 417px;
    object-fit: cover;
    display: block;
}

.feature-image-placeholder {
    width: 100%;
    height: 380px;
    background: #ccc;
    border-radius: 20px;
}
@media screen and (max-width: 1279px) {
   .about-story-section {
     padding: 40px 0 0 0;
   }
   .story-grid {
     flex-direction: column;
     display: flex;
     gap: 0;
     margin-bottom: 24px;
   }
   .story-text-col {
     flex-direction: column;
     display: flex;
     gap: 12px;
   }
   .story-text-left, .story-text-right {
    width: 100%;
   }
   .story-title-col {
    max-width: 100%;
    margin-bottom: 10px;
   }
   .story-title {
    font-size: 40px;
   }
   .story-video-bg {
    height: 355px;
   }
   .story-text-col p {
    margin-bottom: 12px;
   }
   .about-mv-section {
    padding: 50px 0 0 0;
   }
   .about-quote-icon-left svg, .about-quote-icon-right svg {
    height: 37px;
   }
   .about-quote-text {
    font-size: 20px;
   }
   .about-quote-container {
    gap: 18px;
    margin: 0 auto 60px;
   }
   .about-card-icon {
    width: 45px;
   }
   .about-card {
    padding: 20px 22px 22px 30px;
   }
   .about-card-title {
    font-size: 25px;
   }
   .about-card-body {
    font-size: 16px;
   }
   .team-heading {
    font-size: 40px;
   }
   .team-header {
    margin-bottom: 10px;
   }
   .team-photo img {
    height: 170px;
   }
   .team-name {
    font-size: 18px;
    margin-bottom: 4px;
   }
   .team-title {
    font-size: 15px;
   }
   .team-desc {
    font-size: 16px;
   }
   .intro-divider {
    margin-top: 80px;
   }
   .about-team-section {
    padding: 50px 0 80px 0;
   }
   .about-feature-row,
   .about-feature-row:nth-child(even) {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-areas:
           "title title"
           "image desc";
       gap: 20px 20px;
   }
   .feature-text-col {
       display: contents;
   }
   .feature-title-wrap {
       grid-area: title;
       margin-bottom: 0;
   }
   .feature-image-col {
       grid-area: image;
       width: 100%;
   }
   .feature-desc {
       grid-area: desc;
   }
   .swiper.testimonialsSwiper {
    padding-bottom: 50px;
   }
   .feature-icon {
    width: 60px;
   }
   .feature-title-wrap {
    gap: 10px;
   }
   .feature-title {
    font-size: 25px;
   }
   .about-features-list {
    gap: 60px;
   }
   .feature-image-col img {
    height: 254px;
   }
   .feature-desc {
    font-size: 16px;
    line-height: 22px;
   }
   .about-features-section {
    padding: 0 0 50px 0;
   }
}
@media screen and (max-width: 726px) {
   .about-feature-row,
   .about-feature-row:nth-child(even) {
       grid-template-columns: 1fr;
       grid-template-areas:
           "title"
           "image"
           "desc";
       gap: 20px;
   }
   .about-features-list {
       gap: 60px;
   }
   .feature-title {
       font-size: 24px;
       line-height: 1.2;
   }
   .feature-icon {
       width: 50px;
   }
   .feature-desc {
       font-size: 16px;
   }
   .feature-image-col img {
       height: 250px;
       aspect-ratio: 4 / 3;
   }
   .feature-title-wrap {
       gap: 15px;
       margin-bottom: 0;
   }
   .story-title {
    font-size: 27px;
   }
   .about-story-section {
    padding: 15px 0 0 0;
   }
   .story-text-left, .story-text-right {
    font-size: 15px;
   }
   .story-video-bg {
    height: 200px;
  }
  .about-quote-icon-left svg, .about-quote-icon-right svg {
    height: 25px;
  }
  .about-quote-container {
    flex-direction: column;
    gap: 10px;
    margin: 0 auto 40px;
  }
  .about-quote-text {
    font-size: 16px;
  }
  .about-card-body {
    font-size: 15px;
  }
  .about-cards-grid {
    flex-direction: column;
    display: flex;
    gap: 20px;
  }
  .team-heading {
    font-size: 27px;
    font-style: normal;
  }
  .team-prev svg, .team-next svg {
    width: 21px;
    height: 21px;
  }
   .team-photo img {
    height: 270px;
  }
  .team-desc {
    font-size: 15px;
  }
  .feature-title {
    font-size: 20px;
  }
  .feature-desc {
    font-size: 15px;
  }
  .about-features-list {
    gap: 50px;
  }
}