@media (max-width: 768px) {
  .principal-desk {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
  }

  .principal-image {
    order: -1 !important; /* move image above text */
    width: 100% !important;
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .principal-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  .principal-content {
    width: 100% !important;
    text-align: left !important;
  }

  .principal-content h2 {
    font-size: 22px !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    color: #800020 !important;
  }

  .principal-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .about-section {
    padding: 40px 15px;
  }
  .about-box {
    padding: 25px;
  }
  .about-box h2 {
    font-size: 28px;
  }
  .about-box p {
    font-size: 16px;
    line-height: 1.6;
  }
}

@media screen and (max-width: 480px) {
  .about-section {
    padding: 30px 10px;
  }
  .about-box h2 {
    font-size: 24px;
  }
  .about-box p {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 480px) {
  .about-section {
    background-size: cover;
    background-position: top;    /* adjust to show top part of image if needed */
    padding: 30px 10px;          /* keeps spacing for mobile */
  }
}

/* Mobile responsiveness for Mission & Vision */

/* For tablets and small screens */
@media (max-width: 768px) {
  .mv-slide h1 {
    font-size: 1.8rem;
  }

  .mv-slide p {
    font-size: 0.6rem;
    line-height: 1.6;
  }

  .mv-toggle-buttons button {
    padding: 8px 20px;
    font-size: 0.9rem;
  }
}

/* For mobile devices */
@media (max-width: 480px) {
  .mv-slide h1 {
    font-size: 1rem;
  }

  .mv-slide p {
    font-size: 0.3rem;
    line-height: 1.5;
  }

  .mv-toggle-buttons {
    gap: 10px;
    flex-wrap: wrap; /* wrap buttons if needed */
  }

  .mv-toggle-buttons button {
    padding: 7px 15px;
    font-size: 0.85rem;
  }

  .mv-wrapper {
    margin: 30px 10px;
    padding: 0 10px;
  }
}