.vm-section {
  background: #ffffff;
  padding: 60px 0;
}
.vm-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.section-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  color: #00264d;
  margin-bottom: 38px;
  letter-spacing: 0.5px;
  position: relative;
}
.section-title .section-underline {
  display: block;
  margin: 12px auto 0 auto;
  width: 60px;
  height: 5px;
  background: #96071a;
  border-radius: 2px;
  content: "";
}
.vm-title-red {
  color: #96071a;
}

/* Vision & Mission Rows */
.vm-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-bottom: 32px;
  min-height: 340px;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.vm-vision-row {
  background: #122239;
  border-radius: 12px 12px 12px 12px; /* Curved edges on top of vision card */
}
.vm-mission-row {
  background: #122239;
  flex-direction: row;
  border-radius: 12px 12px 12px 12px; /* Curved edges on bottom of mission card */
}

.vm-vision-content,
.vm-mission-content {
  flex: 1 1 0;
  padding: 60px 48px 60px 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 320px;
  background: transparent;
}
.vm-mission-content {
  background: transparent;
  padding: 60px 7vw 60px 48px;
}

.vm-image-title {
  font-size: 2.1rem;
  font-weight: bold;
  color: #fff;
  margin: 0 0 18px 0;
  letter-spacing: 0.5px;
  text-align: left;
}
.vm-vision-title {
  color: #fff;
}
.vm-mission-title {
  color: #fff;
}

.vm-image-desc {
  font-size: 1.13rem;
  color: #e3e5ff;
  line-height: 1.75;
  margin: 0;
  text-align: left;
  max-width: 520px;
}

.vm-image-wrap {
  flex: 1 1 0;
  min-width: 320px;
  max-width: 50vw;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: transparent;
  margin: 0;
  padding: 20px; /* Added padding to all sides of the image wrapper */
  box-sizing: border-box;
}
.vm-image-wrap img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 350px !important;
  margin: 0 auto !important;
  padding: 15px; /* Added padding to all sides of the image */
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  border-radius: 12px !important; /* Enhanced rounded corners to match the cards */
}

/* Responsive */
@media (max-width: 900px) {
  .vm-row {
    flex-direction: column !important;
    min-height: 0;
    margin-bottom: 24px;
    gap: 0;
    overflow: visible;
  }
  .vm-vision-row,
  .vm-mission-row {
    gap: 0;
    overflow: visible;
  }

  /* Keep border radius in responsive mode */
  .vm-vision-row {
    border-radius: 12px 12px 12px 12px !important;
  }

  .vm-mission-row {
    border-radius: 12px 12px 12px 12px !important;
  }

  /* The colored background must wrap both text and image */
  .vm-vision-row,
  .vm-mission-row {
    padding: 0;
  }
  .vm-vision-content,
  .vm-mission-content {
    max-width: 100vw;
    min-width: 0;
    width: 100vw;
    align-items: center;
    text-align: center;
    padding: 24px 6vw 16px 6vw;
    background: none;
  }
  .vm-vision-row {
    background: #122239 !important;
  }
  .vm-mission-row {
    background: #122239 !important;
    flex-direction: column !important;
  }
  .vm-image-title,
  .vm-image-desc {
    text-align: center !important;
    margin-left: 0;
  }
  .vm-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 170px;
    margin: 0;
    padding: 15px 15px 25px 15px; /* Added more padding to bottom */
    background: none !important;
    display: flex;
    align-items: center; /* Center image vertically */
    justify-content: center; /* Center image horizontally */
    box-sizing: border-box;
  }
  .vm-image-wrap img {
    width: 85% !important; /* Increased from previous value */
    max-width: 85% !important; /* Increased from previous value */
    min-width: 240px !important; /* Set minimum width for mobile */
    height: auto !important;
    min-height: 170px !important;
    max-height: none !important; /* Remove max height restriction */
    margin: 0;
    padding: 10px; /* Reduced padding for mobile */
    object-fit: contain;
    display: block;
    background: none !important;
    box-sizing: border-box;
    border-radius: 12px !important; /* Enhanced rounded corners to match the cards */
  }

  /* Show Mission text first, then image: use column-reverse */
  .vm-mission-row {
    display: flex !important;
    flex-direction: column-reverse !important;
    background: #122239 !important;
  }
}

@media (max-width: 900px) {
  .vm-row {
    flex-direction: column !important;
    min-height: 0;
    margin-bottom: 24px;
    gap: 0;
    overflow: visible;
  }
  .vm-vision-row,
  .vm-mission-row {
    gap: 0;
    overflow: visible;
    padding: 0 !important;
  }

  .vm-vision-content,
  .vm-mission-content {
    max-width: 100vw;
    min-width: 0;
    width: 100vw;
    align-items: center;
    text-align: center;
    padding: 24px 6vw 16px 6vw;
    background: none;
  }
  .vm-image-title,
  .vm-image-desc {
    text-align: center !important;
    margin-left: 0;
  }
  .vm-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 200px; /* Increased from previous value */
    margin: 0;
    padding: 15px 15px 25px 15px; /* Added more padding to bottom */
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .vm-image-wrap img {
    width: 85% !important; /* Increased from previous value */
    max-width: 85% !important; /* Increased from previous value */
    min-width: 240px !important; /* Set minimum width for mobile */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important; /* Remove max height restriction */
    margin: 0 auto !important;
    padding: 10px; /* Reduced padding for mobile */
    object-fit: contain;
    display: block;
    box-sizing: border-box;
    border-radius: 12px !important; /* Enhanced rounded corners to match the cards */
  }
  .vm-mission-row {
    display: flex !important;
    flex-direction: column-reverse !important;
    background: #122239 !important;
  }
}

@media (max-width: 600px) {
  .vm-section {
    padding: 14px 0;
  }
  .section-title {
    font-size: 1.18rem;
  }
  .vm-image-title {
    font-size: 1.13rem;
  }
  .vm-image-desc {
    font-size: 0.98rem;
  }
  .vm-vision-content,
  .vm-mission-content {
    padding: 14px 0 8px 0;
  }

  /* Vision card curved edges */
  .vm-vision-row {
    border-radius: 12px 12px 12px 12px !important;
  }

  /* Mission card curved edges */
  .vm-mission-row {
    border-radius: 12px 12px 12px 12px !important;
  }

  .vm-image-wrap {
    min-height: 200px; /* Increased from 100px */
    padding: 10px 10px 25px 10px; /* Added more padding to bottom */
    margin: 0;
    width: 100% !important;
    box-sizing: border-box;
  }
  .vm-image-wrap img {
    width: 90% !important; /* Increased width for small mobile devices */
    max-width: 90% !important;
    min-width: 200px !important;
    height: auto !important;
    min-height: 180px !important; /* Increased minimum height */
    max-height: none !important; /* Removed max-height restriction */
    margin: 0 auto !important;
    padding: 8px;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
    border-radius: 12px !important; /* Enhanced rounded corners to match the cards */
  }
}