@media (max-width: 767px) {
    .top-video-file {
        height: 100vh;
    }

    .main-content-section {
        width: 100%;
        height: 100vh;
        gap: 5vh;
        padding: 10px 0px;
        
         
    }
 
.category {
  font-size: 10px;
}
.logo {
  height: 25px;
  width: 100px;
  filter: brightness(0) invert(1);
  cursor: pointer;
}

    /* top-sectiion */
    .top-sectiion {
        padding: 0px 20px;
        gap: 10px;

    }
.institutional-grid-head{
    font-size: 12px;
}
.bottom-logo {
  height: 20px;
  width: 130px;
}
    .category-section {
        gap: 9px;
    }

    /* third-section */
    .third-section {
        padding: 20px;
        gap: 25px;
    }
    .third-section {
    margin-top: auto;   /* pushes it down */
    margin-bottom: auto; /* pushes it up */
  }

    .third-section-top {
        width: 100%;
    }

    .heading {
        font-size: 38px;
        width: 100%;
        line-height: 1.4em;
    }

    .third-section-bottom {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .third-section-bottom-left {
        width: 100%;
    }

    .third-section-bottom-right {
        width: 100%;
        gap: 10px;
    }

    .length-arrow {
        height: 10px;
        width: auto;
    }

    .company-overview-text {
        font-size: 10px;
    }

    .company-line {
        width: 40%;
        height: 1px;
        background-color: #ffffff;
    }
 

    .overview-row {
        gap: 5px;
    }

    /* institutional-section */
    .institutional-section {
    height: auto;        /* allow natural height */
    padding: 20px;       /* smaller padding */
  }

  .institutional-section .overlay {
    height: 100%; /* will still cover fully */
  }

    .heading.b {
        font-size: 16px;
        width: 100%;
    }

    .institutional-grid {
        width: 80%;
        padding-left: 10px;
    }

    .institutional-content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        transform: translateX(10%);
    }

   

    .text.i {
        font-size: 8px;
        font-weight: 100;
    }

    .institutional-section .content {
        padding: 30px 0px;
        gap: 20px;
        width: 80%;
    }

    .body-content-grid {
        gap: 5vh;
        width: 100%;
        height: auto;
        padding: 0px 20px;
    }

    .team-text {
        width: 100%;
        font-size: 18px;
        line-height: 1.4em;
    }

    .team-grid-section {
        width: 100%;
    }

    .team-text.b {
        font-size: 13px;
    }

    .text.b {
        width: 100%;
        font-size: 8px;
    }
.text.c {
    font-size: 8px;
}
    /* body-content */
    .body-content {
        padding: 8vh 0px;
        height: auto;
    }

    /* image-section */
    .image-section {
        height: 30vh;
    }

    /* bottom-section */
    .bottom-section {
        gap: 6vh;
    }

    .capital-section-top {
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding: 5vh 0px;
        width: 100%;
    }

    .team-text.c {
        font-size: 18px;
        line-height: 1.3em;
        width: 100%;
    }

    .bottom-logo-section {
        padding-top: 8vh;
    }

    .bottom-logo-grid {
        width: 30%;
    }

    .bottom-logo-grid-head {
        font-size: 12px;
    }

    .capital-section {
        padding: 0px 20px;
    }

    .body-content-grid.d {
        gap: 40px;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        /* prevents overflow */
    }


    .team-text.d {
        width: 100%;
        text-align: center;
        font-size: 18px;
        line-height: 1.2em;
    }

    .footer {
        padding: 3vh 0px;
    }

    .footer-section {
        width: 100%;
    }

    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
    }

    /* Logos */
    .footer-logos {
        width: 100%;
        justify-content: center;
        display: flex;
        gap: 20px;
    }

    .footer-logo {
        height: 40px;
        display: none;
    }
    .footer-logo.b{
  display: inline;
}

    .footer-logo.small {
        height: 30px;
        padding-top: 0;
        display: inline;
    }

    /* Contact Info */
    .footer-contact {
        flex-direction: column;
        gap: 5px;
        align-items: center;
        width: 100%;
    }

    .address {
        width: 100%;
        font-size: 12px;
        line-height: 1.4em;
        text-align: center;
    }

    .footer-contact div {
        width: 100%;
        text-align: center;
    }

    .footer-contact .email,
    .footer-contact .phone {
        font-size: 12px;
        text-align: center;
    }

    /* Footer Links */
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        font-size: 12px;
    }

    /* Footer Note */
    .footer-note {
        font-size: 11px;
        text-align: center;
        margin-top: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
     .footer {
    padding: 8vh 15px;
  }

  .footer-section {
    width: 95%; /* give more breathing room */
  }

  .footer-top {
    flex-direction: column; /* stack logo & links vertically */
    align-items: flex-start;
    gap: 40px;
  }

  /* Logos */
  .footer-logos {
    width: 100%;
    justify-content: flex-start; /* align left */
    gap: 20px;
  }

  .footer-logo {
    height: 50px;
  }

  .footer-logo.small {
    height: 35px;
    padding-top: 5px;
  }

  /* Contact Info */
  .footer-contact {
    flex-direction: column; /* stack address, email, phone */
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    width: 100%;
  }

  .address,
  .footer-contact .email,
  .footer-contact .phone {
    width: 100%; /* take full width */
    text-align: left;
    font-size: 12px;
  }

  /* Footer Links */
  .footer-links {
    flex-wrap: wrap; /* allow wrapping */
    justify-content: flex-start;
    font-size: 12px;
    gap: 10px;
  }

  /* Footer Note */
  .footer-note {
    font-size: 11px;
    line-height: 1.4em;
  }

  .footer-link-section {
    width: 100%;
  }
  /* main-content-section */
.main-content-section {
  position: absolute;  
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  
  width: 100%;
  height: 100vh;

  opacity: 0;
  background-color: #000000; /* start with no bg */
  transition: opacity 1.5s ease-in-out, background-color 1.5s ease-in-out;
  z-index: 2;
  
  display: flex;
  gap: 5vh;
  flex-direction: column;
  padding: 6vh 0;
}
/* top-sectiion */
    .top-sectiion {
        padding: 0px 20px;
        gap: 0px;

    }
    /* third-section */
    .third-section {
        padding: 20px;
        gap: 20px;
    }

}

@media (min-width: 992px) and (max-width: 1200px) {}

@media (min-width: 1201px) and (max-width: 1400px) {}