/* css/visi.css */

.vision-mission-section {
   position: relative;
   width: 100%;
   min-height: 600px;
   display: flex;
   align-items: stretch;
   justify-content: flex-end;
   overflow: hidden;
}

.vm-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-size: cover;
   background-position: center;
   /* Efek gambar diam saat discroll */
   background-attachment: fixed;
   z-index: 1;
}

.vm-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: 2;
}

.vm-content-box {
   position: relative;
   z-index: 3;
   width: 45%;
   background-color: rgba(156, 0, 4, 0.85);
   padding: 80px 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   color: var(--color-white);
}

.vm-main-title {
   font-size: 3rem;
   font-weight: 900;
   margin-bottom: 50px;
   letter-spacing: 2px;
   border-bottom: 2px solid rgba(255, 255, 255, 0.3);
   padding-bottom: 20px;
}

.vm-block {
   margin-bottom: 40px;
}

.vm-block:last-child {
   margin-bottom: 0;
}

.vm-subtitle {
   font-size: 2.2rem;
   font-weight: 800;
   margin-bottom: 15px;
}

.vm-block p {
   font-size: 1.1rem;
   line-height: 1.6;
   font-weight: 500;
   max-width: 400px;
   margin: 0 auto;
}

@media (max-width: 992px) {
   .vision-mission-section {
      min-height: 500px;
      /* Matikan efek parallax di HP agar stabil */
      background-attachment: scroll;
   }

   .vm-content-box {
      width: 100%;
      padding: 60px 20px;
      background-color: rgba(156, 0, 4, 0.9);
   }

   .vm-main-title {
      font-size: 2.2rem;
   }
   .vm-subtitle {
      font-size: 1.8rem;
   }
   .vm-block p {
      font-size: 1rem;
   }
}