/* ===== About Hero Section ===== */
.about-hero {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.about-hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.about-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: -1;
}
.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
}
.about-hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  animation: fadeInDown 1.5s ease forwards;
}
.about-hero .typing-text {
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 30px;
  border-right: 3px solid #fff;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typing 4s steps(40,end) forwards, blink .8s step-end infinite alternate;
}
.about-hero-btn {
  background: #17877c;
  color: #fff;
  padding: 12px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 1rem;
  transition: transform .3s ease, background .3s ease;
}
.about-hero-btn:hover { transform: scale(1.1); background:#0f5f56; }

@keyframes typing { from{width:0;} to{width:100%;} }
@keyframes blink { from{border-color:transparent;} to{border-color:white;} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-50px);} to{opacity:1;transform:translateY(0);} }

@media(max-width:768px){
  .about-hero h1{font-size:2.2rem}
  .about-hero .typing-text{font-size:1rem}
}
@media(max-width:480px){
  .about-hero{height:80vh}
  .about-hero h1{font-size:1.8rem}
}

/* === Mission & Vision === */
.mission-vision {
  width:100%; background:#f5f7fa; padding:80px 0;
}
.mv-row { display:flex; flex-direction:column; gap:60px; }
.mv-col {
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:20px;
  opacity:0; transform:translateY(50px); transition:all .8s ease;
}
.mv-col.fade-in{opacity:1;transform:translateY(0)}
.mv-content{flex:1;min-width:280px}
.mv-content h2{font-size:2.2rem;margin-bottom:15px;color:#222;font-weight:700;position:relative}
.mv-content h2::after{content:"";position:absolute;width:60px;height:4px;background:#ff6b35;bottom:-8px;left:0;border-radius:2px}
.mv-content p{font-size:1.1rem;line-height:1.7;color:#444;margin-top:20px}
.mv-image{flex:1;text-align:center}
.mv-image img{width:100%;max-width:450px;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.1);transition:transform .4s ease}
.mv-image img:hover{transform:scale(1.05)}
.mv-mission{flex-direction:row}
.mv-vision{flex-direction:row-reverse}
@media(max-width:900px){
  .mv-col{flex-direction:column!important;text-align:center}
  .mv-content h2::after{left:50%;transform:translateX(-50%)}
}

/* === Shared section title/subtitle === */
.section-title{font-size:2.5rem;margin-bottom:10px;color:#2c3e50}
.section-subtitle{font-size:1.1rem;color:#666;margin-bottom:60px}


/* === Team === */
.team{padding:100px 10%;background:#f9fafc;text-align:center}
.team-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:60px}
.team-member{text-align:center;transition:transform .3s ease}
.member-photo{width:180px;height:180px;margin:0 auto 15px;border-radius:50%;overflow:hidden;border:6px solid #4CAF50;transition:all .4s ease}
.member-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.team-member h3{font-size:1.3rem;margin:10px 0 5px;color:#2c3e50}
.team-member p{font-size:1rem;color:#777}
.team-member:hover .member-photo img{transform:scale(1.15)}
.team-member:hover .member-photo{border-color:#ff6b6b;box-shadow:0 8px 25px rgba(0,0,0,.2)}
.team-member:hover{transform:translateY(-10px)}
@media(max-width:768px){.team-gallery{gap:40px}.member-photo{width:140px;height:140px}}
@media(max-width:480px){.member-photo{width:110px;height:110px}.team-member h3{font-size:1.1rem}}

/* === Values Orbit === */
.values-orbit{
  position:relative;
  padding:120px 20px;
  text-align:center;
  background:linear-gradient(135deg,#17877c,#1abc9c);
  overflow:hidden;
}
.values-orbit::before{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("images/pattern.png") repeat;opacity:.08;z-index:0;
}
.values-center{position:relative;z-index:2}
.values-center h2{font-size:2.5rem;color:#fff;margin-bottom:10px}
.values-center p{font-size:1.1rem;margin-bottom:50px;color:#fdfdfd}
.orbit-circle{position:relative;width:400px;height:400px;margin:0 auto;border:3px dashed rgba(255,255,255,.7);border-radius:50%;display:flex;justify-content:center;align-items:center}
.center-label{position:absolute;font-weight:bold;color:#e84118;font-size:1.2rem;background:#fff;padding:10px 15px;border-radius:30px;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.orbit-item{position:absolute;text-align:center;transition:transform .3s ease}
.orbit-item img{width:90px;height:90px;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 15px rgba(0,0,0,.1)}
.orbit-item h3{font-size:1rem;margin-top:8px;color:#333}
.orbit-item:hover{transform:scale(1.2)}
.orbit-item.top{top:-40px;left:50%;transform:translateX(-50%)}
.orbit-item.right{right:-40px;top:50%;transform:translateY(-50%)}
.orbit-item.bottom{bottom:-40px;left:50%;transform:translateX(-50%)}
.orbit-item.left{left:-40px;top:50%;transform:translateY(-50%)}
@media(max-width:768px){.orbit-circle{width:280px;height:280px}.orbit-item img{width:70px;height:70px}}

/* === CTA Split === */
.about-cta-split{display:flex;flex-wrap:wrap;align-items:stretch;min-height:70vh;background:#fff;overflow:hidden}
.cta-image{flex:1;position:relative}
.cta-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.cta-text{flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px;background:linear-gradient(135deg,#17877c,#1abc9c);color:#fff;animation:slideIn 1.5s ease forwards}
.cta-text h2{font-size:2.8rem;margin-bottom:20px}
.cta-text p{font-size:1.2rem;margin-bottom:30px;line-height:1.6}
.cta-btn{background:#fff;color:#e84118;padding:14px 36px;border-radius:30px;font-size:1.1rem;text-decoration:none;font-weight:bold;transition:all .3s ease}
.cta-btn:hover{background:#e84118;color:#fff}
@keyframes slideIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:768px){.about-cta-split{flex-direction:column}.cta-text{padding:40px 20px;text-align:center}.cta-text h2{font-size:2rem}.cta-text p{font-size:1rem}}

/* === Dark Theme === */
body.dark-theme{background:#111;color:#f5f5f5}
body.dark-theme .mission-vision,
body.dark-theme .team,
body.dark-theme .values-orbit,
body.dark-theme .about-cta-split{background-color:#111!important}
body.dark-theme .about-hero-overlay{background:rgba(0,0,0,.4)!important}
body.dark-theme h1,body.dark-theme h2,body.dark-theme h3,body.dark-theme p,body.dark-theme a{color:#f5f5f5!important}
body.dark-theme .about-hero-btn,body.dark-theme .cta-btn{background:#ff6b6b!important;color:#fff!important}
body.dark-theme img,body.dark-theme video{filter:brightness(.85) contrast(1.05)}
body.dark-theme .about-hero video{filter:none!important}
body.dark-theme .timeline-content h3{color:#ff6b6b;font-weight:600}
body.dark-theme .timeline-content p{color:#e6e6e6;line-height:1.6}
body.dark-theme .timeline-content{background:rgba(40,40,40,.95);padding:15px 20px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.6)}
body.dark-theme .timeline-content img{filter:brightness(1.1) contrast(1.05)}
body.dark-theme .orbit-circle{border:2px dashed #444}
body.dark-theme .orbit-item{background:rgba(30,30,30,.8);border:1px solid #333;border-radius:12px;padding:6px}
body.dark-theme .orbit-item img{filter:brightness(.85) contrast(1.05)}

/* WHO WE ARE TIMELINE SECTION */
.who-we-are-timeline {
  background: #f8f9fa;
  padding: 60px 0 40px 0;
}

.who-we-are-timeline .section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #2c3e50;
  font-weight: 700;
}

.who-we-are-timeline .section-subtitle {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #555;
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  background: #e1e4e8;
  transform: translateX(-50%);
  z-index: 0;
}

.timeline-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.timeline-item.left {
  flex-direction: row;
}

.timeline-item.right {
  flex-direction: row-reverse;
}

.timeline-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(44, 62, 80, 0.08);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 320px;
  max-width: 420px;
  position: relative;
}

.timeline-content img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.12);
  border: 3px solid #e1e4e8;
}

.timeline-content h3 {
  font-size: 1.3rem;
  color: #2980b9;
  margin-bottom: 8px;
  font-weight: 600;
}

.timeline-content p {
  font-size: 1rem;
  color: #444;
  margin: 0;
}

@media (max-width: 900px) {
  .timeline {
    max-width: 100%;
    padding: 0 10px;
  }
  .timeline-content {
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  .timeline-item {
    flex-direction: column !important;
    align-items: flex-start;
  }
  .timeline::before {
    left: 20px;
    transform: none;
  }
}

@media (max-width: 600px) {
  .who-we-are-timeline {
    padding: 30px 0 20px 0;
  }
  .timeline-content {
    padding: 14px;
    font-size: 0.95rem;
  }
  .timeline-content img {
    width: 60px;
    height: 60px;
  }
}

/* Dark theme for timeline */
body.dark-theme .who-we-are-timeline {
  background: #181818;
}
body.dark-theme .timeline::before {
  background: #333;
}
body.dark-theme .timeline-content {
  background: rgba(40,40,40,0.95);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
body.dark-theme .timeline-content img {
  border-color: #444;
  filter: brightness(1.1) contrast(1.05);
}
body.dark-theme .timeline-content h3 {
  color: #ff6b6b;
}
body.dark-theme .timeline-content p {
  color: #e6e6e6;
}