/* ============================================
   TENTANG PAGE - MOBILE RESPONSIVE
   ============================================ */

/* Tablet & Below (991px) */
@media (max-width: 991px) {
  /* Hero Section */
  .about-hero-compact {
    margin-top: 100px;
    padding-top: 15px;
  }

  .hero-banner-compact {
    height: 280px;
  }

  /* Override hero title size for tablet */
  .about-hero-compact .hero-title-compact {
    font-size: 36px;
  }

  .hero-desc-compact {
    font-size: 15px;
  }

  /* About Section */
  .about.section {
    padding: 40px 0 80px;
  }

  .about-images-new {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 40px;
    display: block;
  }

  .years-badge {
    position: static;
    transform: none;
    margin-bottom: 20px;
    display: block;
    text-align: center;
    font-size: 14px;
  }

  .image-grid {
    padding-left: 0;
    margin-bottom: 0;
  }

  .main-image {
    min-height: 350px;
    max-height: 500px;
  }

  .circle-image {
    width: 150px;
    height: 150px;
    bottom: -20px;
    left: -20px;
  }

  .content-new {
    padding-left: 20px;
    padding-right: 20px;
  }

  .content-new .vm-mission-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
  }

  .about-label::before {
    display: none;
  }

  .about-title {
    font-size: 30px;
  }

  /* Storytelling Section */
  .story-block {
    padding: 50px 0;
  }

  .story-content {
    padding: 30px 20px;
  }

  .story-label {
    font-size: 12px;
    padding: 8px 16px;
  }

  .story-block h2 {
    font-size: 28px;
  }

  .problem-item,
  .solution-item {
    padding: 20px;
  }

  .metric-card {
    margin-bottom: 20px;
  }

  /* Vision Mission */
  .vision-mission {
    padding: 60px 0;
  }

  .vm-card {
    padding: 30px;
    margin-bottom: 30px;
  }

  /* Values */
  .company-values {
    padding: 60px 0;
  }

  .value-card {
    margin-bottom: 30px;
  }

  /* Timeline */
  .timeline::before {
    left: 30px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 90px !important;
    padding-right: 0 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .timeline-item::before {
    left: 18px !important;
  }

  .timeline-content {
    padding: 25px;
  }
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
  /* Hero Section */
  .about-hero-compact {
    margin-top: 90px;
    padding-top: 15px;
  }

  .hero-banner-compact {
    height: 240px;
  }

  .hero-content-compact {
    padding: 35px 15px;
  }

  .hero-breadcrumb {
    margin-bottom: 20px;
  }

  .hero-breadcrumb .breadcrumb {
    font-size: 11px;
    padding: 8px 15px;
  }

  .hero-label {
    font-size: 10px;
    letter-spacing: 2px;
    padding: 5px 14px;
    margin-bottom: 12px;
  }

  /* Override hero title size for mobile */
  .about-hero-compact .hero-title-compact {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .hero-desc-compact {
    font-size: 14px;
  }

  /* About Section */
  .about.section {
    padding: 30px 0 50px;
  }

  .about .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-images-new {
    padding: 0 10px;
    margin-bottom: 30px;
  }

  .years-badge {
    font-size: 12px;
    margin-bottom: 15px;
  }

  .main-image {
    min-height: 280px;
    max-height: 380px;
    border-radius: 15px;
    margin: 0 10px;
  }

  .main-image img {
    border-radius: 15px;
  }

  .circle-image {
    width: 100px;
    height: 100px;
    bottom: -15px;
    left: 5px;
    border: 5px solid white;
  }

  .content-new {
    padding: 0 20px;
  }

  .content-new .vm-heading h3 {
    font-size: 1.5rem;
  }

  .content-new .vm-mission-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  .content-new .vm-mission-items li {
    white-space: normal;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.95rem;
  }

  .content-new .vm-mission-items .check-box {
    flex-shrink: 0;
    min-width: 20px;
    width: 20px;
    height: 20px;
  }

  .content-new .vm-mission-items .check-box i {
    font-size: 0.65rem;
  }

  .content-new .vm-mission-items span {
    word-break: break-word;
    line-height: 1.4;
  }

  .content-new .vm-text {
    font-size: 14px;
  }

  .about-label {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .about-title {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .about-description {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.7;
  }

  .about-list {
    margin-bottom: 20px;
    padding: 0 5px;
  }

  .about-list li {
    margin-bottom: 10px;
    font-size: 13px;
    padding: 5px 0;
  }

  .about-list li i {
    font-size: 16px;
    margin-right: 10px;
  }

  /* Storytelling Section */
  .storytelling-section {
    padding: 40px 0;
  }

  .storytelling-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .story-block {
    padding: 30px 0;
    margin-bottom: 20px;
  }

  .story-content {
    padding: 20px;
    margin-bottom: 20px;
  }

  .story-label {
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 15px;
  }

  .story-label i {
    font-size: 12px;
  }

  .story-block h2 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 15px;
  }

  .story-block .lead {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .problem-list,
  .solution-list {
    padding: 0 10px;
  }

  .problem-item,
  .solution-item {
    padding: 15px;
    margin-bottom: 15px;
  }

  .problem-item h5,
  .solution-item h5 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .problem-item p,
  .solution-item p {
    font-size: 13px;
    line-height: 1.6;
  }

  .problem-item i,
  .solution-item .solution-icon i {
    font-size: 20px;
  }

  .solution-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-right: 12px;
  }

  .story-image {
    margin-bottom: 30px;
    padding: 0 10px;
  }

  .image-badge {
    padding: 15px;
    bottom: 15px;
    right: 15px;
  }

  .badge-number {
    font-size: 28px;
  }

  .badge-text {
    font-size: 11px;
  }

  .solution-features {
    gap: 8px;
    bottom: 15px;
    left: 15px;
  }

  .feature-badge {
    padding: 8px 12px;
    font-size: 11px;
  }

  .feature-badge i {
    font-size: 14px;
  }

  /* Impact Metrics */
  .impact-metrics {
    gap: 15px;
    padding: 0 10px;
  }

  .metric-card {
    padding: 20px 15px;
    margin-bottom: 15px;
  }

  .metric-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  .metric-icon i {
    font-size: 20px;
  }

  .metric-value {
    font-size: 32px;
  }

  .metric-label {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .metric-card p {
    font-size: 12px;
  }

  .testimonial-highlight {
    padding: 20px;
    margin: 20px 10px 0;
  }

  .testimonial-quote p {
    font-size: 14px;
    line-height: 1.6;
  }

  .testimonial-author {
    font-size: 13px;
  }

  .success-badge {
    padding: 15px;
    bottom: 15px;
    right: 15px;
  }

  .badge-title {
    font-size: 24px;
  }

  .badge-subtitle {
    font-size: 11px;
  }

  /* Vision & Mission */
  .vision-mission {
    padding: 40px 0;
  }

  .vision-mission .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .vm-card {
    padding: 25px 20px;
    margin-bottom: 20px;
  }

  .vm-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }

  .vm-icon i {
    font-size: 1.8rem;
  }

  .vm-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .vm-card p,
  .vm-card ul li {
    font-size: 14px;
    line-height: 1.7;
  }

  .vm-card ul {
    padding-left: 20px;
  }

  /* Company Values */
  .company-values {
    padding: 40px 0;
  }

  .company-values .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-heading {
    margin-bottom: 40px;
    padding: 0 10px;
  }

  .section-heading h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .section-heading p {
    font-size: 14px;
  }

  .value-card {
    padding: 25px 20px;
    margin-bottom: 20px;
  }

  .value-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .value-icon i {
    font-size: 1.8rem;
  }

  .value-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .value-card p {
    font-size: 13px;
  }

  /* Team Section */
  .team-section {
    padding: 40px 0;
  }

  .team-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .team-card {
    margin-bottom: 20px;
  }

  .team-image {
    height: 250px;
  }

  .team-info {
    padding: 20px;
  }

  .team-info h4 {
    font-size: 1.1rem;
  }

  .team-info p {
    font-size: 13px;
  }

  /* Timeline */
  .timeline-section {
    padding: 40px 0;
  }

  .timeline-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .timeline {
    padding: 20px 10px;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    padding-left: 70px !important;
    margin-bottom: 40px;
    padding-right: 10px !important;
  }

  .timeline-item::before {
    left: 8px !important;
    width: 20px;
    height: 20px;
    border-width: 4px;
  }

  .timeline-content {
    padding: 20px 15px;
    border-radius: 15px;
  }

  .timeline-year {
    font-size: 1rem;
    padding: 8px 18px;
    margin-bottom: 12px;
  }

  .timeline-icon {
    width: 50px;
    height: 50px;
    margin: 10px 0;
  }

  .timeline-icon i {
    font-size: 1.4rem;
  }

  .timeline-content h4 {
    font-size: 1.3rem;
    margin: 10px 0 8px;
  }

  .timeline-content p {
    font-size: 13px;
    line-height: 1.6;
  }

  .timeline-achievement {
    padding: 8px 15px;
    margin-top: 10px;
  }

  .timeline-achievement i {
    font-size: 14px;
  }

  .timeline-achievement span {
    font-size: 12px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  /* Hero Section */
  .about-hero-compact {
    margin-top: 85px;
    padding-top: 10px;
  }

  .hero-banner-compact {
    height: 220px;
  }

  /* Override hero title size for small mobile */
  .about-hero-compact .hero-title-compact {
    font-size: 24px;
  }

  .hero-desc-compact {
    font-size: 13px;
  }

  .hero-breadcrumb .breadcrumb {
    font-size: 10px;
    padding: 6px 12px;
  }

  /* Containers */
  .about .container,
  .storytelling-section .container,
  .vision-mission .container,
  .company-values .container,
  .team-section .container,
  .timeline-section .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .about-title {
    font-size: 20px;
  }

  .about-images-new {
    padding: 0 5px;
  }

  .main-image {
    min-height: 250px;
    max-height: 350px;
    margin: 0 5px;
  }

  .circle-image {
    width: 80px;
    height: 80px;
    bottom: -10px;
    left: 0;
    border: 4px solid white;
  }

  .content-new {
    padding: 0 15px;
  }

  .content-new .vm-heading h3 {
    font-size: 1.3rem;
  }

  .content-new .vm-mission-items li {
    font-size: 12px;
    gap: 6px;
  }

  .content-new .vm-mission-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
  }

  .about-list {
    padding: 0;
  }

  .about-list li {
    font-size: 12px;
    padding: 3px 0;
  }

  .story-block h2 {
    font-size: 20px;
  }

  .story-content {
    padding: 15px;
  }

  .problem-list,
  .solution-list {
    padding: 0 5px;
  }

  .problem-item,
  .solution-item {
    padding: 12px;
  }

  .impact-metrics {
    padding: 0 5px;
  }

  .metric-card {
    padding: 15px 12px;
  }

  .metric-value {
    font-size: 28px;
  }

  .testimonial-highlight {
    padding: 15px;
    margin: 15px 5px 0;
  }

  .vm-card,
  .value-card {
    padding: 20px 15px;
  }

  .section-heading {
    padding: 0 5px;
  }

  .timeline {
    padding: 20px 5px;
  }

  .timeline-item {
    padding-left: 60px !important;
    padding-right: 5px !important;
  }

  .timeline-content {
    padding: 15px 12px;
  }
}

/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .main-image {
    min-height: 200px;
    max-height: 300px;
  }

  .about.section {
    padding: 30px 0 40px;
  }

  .story-block {
    padding: 25px 0;
  }
}