/* Style Khusus untuk Halaman Tentang Kami (aboutus.css) - Desain Keren */

/* ================================== */
/* ABOUT HEADER SECTION (DRAMATIS) */
/* ================================== */
.about-header-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 100px 0; /* Padding lebih besar */
  background-color: #f8f9fa; /* Background sedikit abu-abu */
}

.about-header-container {
  max-width: 1100px;
  width: 100%;
  text-align: center;
  padding: 0 20px;
}

.about-header-title {
  font-size: 3.8rem; /* Ukuran font lebih besar */
  margin-bottom: 25px;
  font-weight: 900; /* Lebih Bold */
  color: #212529;
  position: relative;
  /* Aksen oranye di bawah judul */
}
.about-header-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 6px;
    background: #ff5003; 
    margin: 15px auto 0;
    border-radius: 5px;
}

.about-header-paragraph {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #555;
  max-width: 900px;
  margin: 20px auto 0;
}

.contact-email {
    margin-top: 30px !important; /* Jarak yang lebih jelas */
    font-weight: 600;
}

.contact-email a {
    color: #ff5003;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-email a:hover {
    color: #cc4002;
}

.highlight-orange {
  color: #ff5003;
}


/* ================================== */
/* VISI MISI SECTION (BARU) */
/* ================================== */
.vismis-section {
    padding: 80px 20px;
    background-color: #ffffff; /* Putih bersih */
}

.vismis-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    text-align: left;
}

.vismis-card {
    flex: 1;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* Shadow tegas */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-left: 8px solid #ff5003; /* Aksen oranye tebal di kiri */
    background: #fdfdfd;
}

.vismis-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 20px 50px rgba(255, 80, 3, 0.2); /* Shadow oranye saat hover */
}

.vismis-card i {
    font-size: 3.5rem; 
    color: #ff5003;
    margin-bottom: 25px;
}

.vismis-card h3 {
    font-size: 1.7rem;
    margin-bottom: 20px;
    color: #212529;
    font-weight: 700;
}

.vismis-card ul {
    list-style-type: none;
    padding-left: 0;
}

.vismis-card li {
    margin-bottom: 12px;
    line-height: 1.7;
    color: #495057;
    position: relative;
    padding-left: 30px;
}

/* Custom bullet oranye */
.vismis-card li::before {
    content: '\f00c'; /* Ikon centang */
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900; 
    color: #ff5003;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1rem;
}


/* ================================== */
/* WHY CHOOSE US SECTION (BARU) */
/* ================================== */
.why-choose-us-section {
    padding: 80px 20px;
    background-color: #f8f9fa; /* Background abu-abu muda */
    text-align: center;
}

.why-choose-us-container {
    max-width: 1100px;
    margin: 0 auto;
}

.why-choose-us-title {
    font-size: 2.5rem;
    color: #212529;
    margin-bottom: 50px;
    font-weight: 800;
}

.point-card-container {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.point-card {
    flex: 1;
    padding: 40px 30px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.point-card:hover {
    background: #fff8f5; /* Latar belakang oranye sangat muda saat hover */
    border-color: #ff5003;
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(255, 80, 3, 0.15); /* Shadow oranye halus */
}

.point-card i {
    font-size: 3rem; 
    color: #ff5003; /* Ikon oranye */
    margin-bottom: 25px;
}

.point-card h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #212529;
    font-weight: 700;
}

.point-card p {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
}

/* ================================== */
/* MEDIA QUERIES (RESPONSIVE) */
/* ================================== */

@media (max-width: 1024px) {
  .vismis-container,
  .point-card-container {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .about-header-title {
    font-size: 3rem;
  }
  .about-header-title::after {
    width: 50px;
    height: 4px;
  }
  .vismis-container {
    flex-direction: column;
  }
  .point-card-container {
    flex-wrap: wrap; 
    gap: 20px;
  }
  .point-card {
    flex: 1 1 45%; 
  }
  .why-choose-us-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .about-header-title {
    font-size: 2.2rem;
  }
  .about-header-paragraph {
    font-size: 1rem;
    max-width: 100%;
  }
  .point-card {
    flex: 1 1 100%; /* Satu kolom di HP */
    max-width: 100%;
  }
  .vismis-card {
    padding: 30px;
  }
  .vismis-card i {
    font-size: 2.5rem;
  }
}
/* Tambahan agar section lama tidak polos dan sesuai tema */
.about-skill-title, .about-team-title {
    color: #212529 !important;
    font-weight: 800 !important;
}

/* Mengubah warna progress bar skills menjadi oranye */
.bar-label, .bar-label::before {
    color: #ff5003 !important;
}
.bar-fill {
    background: linear-gradient(90deg, #ff5003, #ff8c42) !important;
}

/* Mengubah warna lingkaran skills menjadi oranye */
.circle-label {
    background-color: #ff5003 !important;
}
.skill-circle circle.progress {
    stroke: #ff5003 !important;
}

/* ... (CSS Visi Misi sebelumnya) ... */

/* ================================== */
/* STRUKTUR ORGANISASI SECTION */
/* ================================== */
.org-structure-section {
    padding: 80px 20px;
    background-color: #ffffff; /* Putih bersih */
    text-align: center;
}

.org-structure-container {
    max-width: 1100px;
    margin: 0 auto;
}

.org-structure-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* opsional, biar sudut agak melengkung */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* opsional, efek bayangan */
    margin-bottom: 30px;
}


.org-structure-title {
    font-size: 2.5rem;
    color: #212529;
    margin-bottom: 50px;
    font-weight: 800;
}