/* Small Mobile (Landscape): 481px – 600px */
    @media (min-width: 481px) and (max-width: 600px) {
      .info-section, .info-section.reverse {
        flex-direction: column;
        margin: 18px 0;
        min-height: unset;
        max-width: 100vw;
      }
      .info-image {
        min-width: 100vw;
        height: 160px;
      }
      .info-content {
        padding: 16px;
      }
      .info-title {
        font-size: 1.2em;
      }
      .info-text {
        font-size: 1em;
      }
    }

    /* Small Tablets (Portrait): 601px – 768px */
    @media (min-width: 601px) and (max-width: 768px) {
      .info-section, .info-section.reverse {
        flex-direction: column;
        margin: 22px 0;
        min-height: unset;
        max-width: 98vw;
      }
      .info-image {
        min-width: 98vw;
        height: 180px;
      }
      .info-content {
        padding: 20px;
      }
      .info-title {
        font-size: 1.3em;
      }
      .info-text {
        font-size: 1.05em;
      }
    }

    /* Large Tablets (Landscape): 769px – 1024px */
    @media (min-width: 769px) and (max-width: 1024px) {
      .info-section, .info-section.reverse {
        max-width: 95vw;
        margin: 28px auto;
        min-height: 220px;
      }
      .info-image {
        min-width: 260px;
        height: 220px;
      }
      .info-content {
        padding: 28px;
      }
      .info-title {
        font-size: 1.5em;
      }
      .info-text {
        font-size: 1.08em;
      }
    }

    /* Small Desktops and Laptops: 1025px – 1280px */
    @media (min-width: 1025px) and (max-width: 1280px) {
      .info-section, .info-section.reverse {
        max-width: 900px;
        margin: 36px auto;
        min-height: 260px;
      }
      .info-image {
        min-width: 300px;
        height: 260px;
      }
      .info-content {
        padding: 36px;
      }
      .info-title {
        font-size: 1.7em;
      }
      .info-text {
        font-size: 1.1em;
      }
    }

    /* Large Desktops and High-Resolution Screens: 1281px – 1440px */
    @media (min-width: 1281px) and (max-width: 1440px) {
      .info-section, .info-section.reverse {
        max-width: 1100px;
        margin: 48px auto;
        min-height: 320px;
      }
      .info-image {
        min-width: 340px;
        height: 320px;
      }
      .info-content {
        padding: 48px 40px;
      }
      .info-title {
        font-size: 2em;
      }
      .info-text {
        font-size: 1.15em;
      }
    }

    /* Extra-Large Desktops: 1441px and up */
    @media (min-width: 1441px) {
      .info-section, .info-section.reverse {
        max-width: 1300px;
        margin: 56px auto;
        min-height: 340px;
      }
      .info-image {
        min-width: 400px;
        height: 340px;
      }
      .info-content {
        padding: 56px 48px;
      }
      .info-title {
        font-size: 2.2em;
      }
      .info-text {
        font-size: 1.18em;
      }
    }

/*-----> Nav Bar End <-------*/

/* Header End */

    .about-module {
      display: flex;
      margin: 8vw 8vw;
    }

    .info-section.reverse {
      flex-direction: row-reverse;
    }

    .info-image {
      flex: 3;
      min-width: 340px;
      height: 320px;
      background: #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .info-image img {
      width: 100%;
      height: 100%;
      object-fit : cover;
      border-radius: 0;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    }
    .info-content {
      flex: 3;
      padding: 10px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .info-title {
      font-size: 2em;
      font-weight: bold;
      margin-bottom: 18px;
      color: #2a3a4a;
      letter-spacing: 1px;
    }
    .info-text {
      font-size: 1.1em;
      color: #444;
      line-height: 1.4;
    }
    @media (max-width: 900px) {
      .info-section, .info-section.reverse {
        flex-direction: column;
      }
      .info-image, .info-content {
        min-width: 100%;
        width: 100%;
        height: 220px;
        padding: 24px;
      }
      .info-content {
        padding: 24px;
      }
    }

    /* Mobile-specific overrides for screens up to 768px */
    @media (max-width: 768px) {
      html, body {
        width: 100%;
        overflow-x: hidden;
      }
      
      .about-module {
        flex-direction: column !important;
        margin: 20px 5% !important;
        width: 90% !important;
      }
      
      .info-image {
        min-width: 100% !important;
        height: 200px !important;
        margin-bottom: 15px !important;
      }
      
      .info-content {
        padding: 20px 15px !important;
        width: 100% !important;
      }
      
      .info-title {
        font-size: 1.5em !important;
        margin-bottom: 12px !important;
        text-align: center !important;
      }
      
      .info-text {
        font-size: 1em !important;
        line-height: 1.5 !important;
        text-align: justify !important;
      }
      
      /* Ensure proper spacing between sections */
      .about-module:not(:last-child) {
        margin-bottom: 30px !important;
      }
      
      /* Adjust navbar for mobile */
      .aboutus .navbar {
        padding: 0 5% !important;
        height: 60px !important;
      }
      
      .logo-img {
        height: 40px !important;
      }
      
      /* Footer adjustments */
      footer .container {
        flex-direction: column !important;
        padding: 20px !important;
      }
      
      footer .sec {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
      }
      
      .sci {
        justify-content: center !important;
      }
    }

    /* Small mobile devices */
    @media (max-width: 480px) {
      .about-module {
        margin: 15px 3% !important;
        width: 94% !important;
      }
      
      .info-image {
        height: 160px !important;
      }
      
      .info-title {
        font-size: 1.3em !important;
      }
      
      .info-text {
        font-size: 0.9em !important;
      }
      
      .aboutus .navbar {
        padding: 0 3% !important;
        height: 50px !important;
      }
      
      .logo-img {
        height: 35px !important;
      }
    }