/* =========================
   ABOUT PAGE STYLING
   ========================= */

body {
  background-color: #f9fdfd;
}

/* HERO SECTION */
.about-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
  display: flex; /* Tambah ini */
  flex-direction: column; /* Arah vertikal */
  justify-content: center; /* Tengahkan vertikal */
  align-items: center; /* Tengahkan horizontal */
  text-align: center; /* Rapi untuk teks */
}

.about-hero video {
  object-fit: cover;
  filter: brightness(60%);
}

.about-hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 162, 190, 0.35) 0%,
    rgba(0, 72, 99, 0.65) 100%
  );
}

.about-hero h1 {
  font-weight: 700;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.about-hero p {
  font-size: 1.1rem;
  color: #f1f1f1;
}

/* ABOUT SECTION */
.about-desc {
  background: linear-gradient(135deg, #e0f7fa 0%, #faffff 100%);
  position: relative;
  overflow: hidden;
}

.about-desc img {
  border-radius: 1rem;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.about-desc img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* VISI MISI */
.visi-misi {
  background: linear-gradient(135deg, #e0f7fa 0%, #faffff 100%);
  position: relative;
  overflow: hidden;
}

.visi-misi::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 200%;
  height: 120px;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(0, 150, 170, 0.25) 30%,
    transparent 70%
  );
  animation: waveMotion 6s linear infinite;
  transform: rotate(180deg);
}

.visi-misi .card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.visi-misi .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 160, 160, 0.25);
}

/* Animasi Air Bergerak */
@keyframes waterFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Ombak Gerak */
@keyframes waveMotion {
  0% {
    transform: translateX(0) rotate(180deg);
  }
  100% {
    transform: translateX(-50%) rotate(180deg);
  }
}

/* =========================
   PERBAIKAN WARNA TULISAN & BUTTON
   ========================= */

/* 1. Warna "Siapa Kami" */
.about-desc h2 {
  color: rgb(28, 168, 168) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 2. Warna "Visi & Misi" */
.visi-misi h3 {
  color: rgb(28, 168, 168) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.visi-misi h5 {
  color: rgb(28, 168, 168) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 3. Tombol "Konsultasi Sekarang" */
.about-desc .btn-primary {
  background: linear-gradient(
    135deg,
    rgb(28, 168, 168),
    rgb(20, 120, 120)
  ) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(28, 168, 168, 0.4);
}

.about-desc .btn-primary:hover {
  background: linear-gradient(
    135deg,
    rgb(20, 120, 120),
    rgb(15, 100, 100)
  ) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(28, 168, 168, 0.45);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .about-hero {
    height: 60vh;
  }
  .about-hero h1 {
    font-size: 1.8rem;
  }
  .about-hero p {
    font-size: 1rem;
  }
}