/*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /**
  * Desktop Navigation
  */
  .navbar .dropdown:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
  }

  .navbar .dropdown .dropdown ul {
      top: 0;
      left: calc(100% - 30px);
      visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul {
      opacity: 1;
      top: 0;
      left: 100%;
      visibility: visible;
  }

  @media (max-width: 1366px) {
      .navbar .dropdown .dropdown ul {
          left: -90%;
      }

      .navbar .dropdown .dropdown:hover>ul {
          left: -100%;
      }
  }

  /**
  * Mobile Navigation
  */
  .mobile-nav-toggle {
      font-size: 22px;
      cursor: pointer;
      display: none;
      line-height: 0;
      transition: 0.5s;
  }

  @media (max-width: 991px) {
      .mobile-nav-toggle {
          display: block;
      }

      .navbar ul {
          display: none;
      }
  }

  .navbar-mobile {
      position: fixed;
      overflow: hidden;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(45, 53, 69, 0.9);
      transition: 0.3s;
      z-index: 999;
  }

    .navbar-mobile .mobile-nav-toggle {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 40px;
        color: #000;
        background: #fff;
    }
  

  .navbar-mobile ul {
      display: block;
      position: absolute;
      top: 55px;
      right: 15px;
      bottom: 15px;
      left: 15px;
      padding: 10px 0;
      background-color: #fff;
      overflow-y: auto;
      transition: 0.3s;
  }

  .navbar-mobile ul li {
      padding: 10px 5px;
  }

  .navbar-mobile a,
  .navbar-mobile a:focus {
      padding: 10px 20px;
      font-size: 15px;
      color: #414c64;
  }

  .navbar-mobile a:hover,
  .navbar-mobile .active,
  .navbar-mobile li:hover>a {
      color: #ffc107;
  }

  .navbar-mobile .dropdown ul {
      position: static;
      display: none;
      margin: 10px 20px;
      padding: 10px 0;
      z-index: 99;
      opacity: 1;
      visibility: visible;
      background: #fff;
      box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  }

  .search-box {
      display: block;
  }

  .search-box .search-control {
      display: block;
  }

  .navbar-mobile .dropdown ul li {
      min-width: 200px;
  }

  .navbar-mobile .dropdown ul a {
      padding: 10px 20px;
  }

  .navbar-mobile .dropdown ul a i {
      font-size: 12px;
  }

  .navbar-mobile .dropdown ul a:hover,
  .navbar-mobile .dropdown ul .active:hover,
  .navbar-mobile .dropdown ul li:hover>a {
      color: #ffc107;
  }

  .navbar-mobile .dropdown>.dropdown-active {
      display: block;
  }

  @media (max-width: 576px) {
      p {
          font-size: 14px !important;
          line-height: 20px !important;
      }

      .card .card-title {
          font-size: 18px;
      }

      .card p.card-text {
          font-size: 14px !important;
          margin-bottom: 5px;
      }

      h5 {
          font-size: 18px !important;
          line-height: 22px !important;
          ;
      }

      h4 {
          font-size: 16px;
      }

      .know-more-btn {
          background: #fff;
          font-size: 11px;
          color: rgb(0, 0, 0);
          border-radius: 30px;
          padding: 2px 8px;
          letter-spacing: 1px;
          transition: 0.3s;
          font-weight: 600;
      }

      /* Index */
      .header .logo img {
          max-width: 200px;
          height: auto;
          margin-right: 6px;
      }

      #hero {
          width: 100%;
          height: 300px;
          background: #15384f;
      }

      .slider-title h3 {
          font-size: 13px !important;
          font-weight: 600;
          color: #fff;
          text-transform: none;
          line-height: 1.2;
          word-spacing: 4px;
          text-shadow: 1px 6px 27px rgba(0, 0, 0, 1);
      }

      .slider-body .carousel-caption {
          position: absolute;
          right: 1%;
          top: 10%;
          left: 1%;
          padding-top: 0;
          padding-bottom: 0;
          color: #fff;
          text-align: center;
      }

      .slider-body .know-more-btn {
          background: #fff;
          font-size: 11px;
          color: #585858;
          border-radius: 30px;
          padding: 2px 8px;
          letter-spacing: 1px;
          transition: 0.3s;
          margin-bottom: 10px;
      }

      .carousel-indicators [data-bs-target] {
          box-sizing: content-box;
          flex: 0 1 auto;
          width: 5px;
          height: 5px;
          border-radius: 50px;
          padding: 0;
          margin-right: 3px;
          margin-left: 3px;
          text-indent: -999px;
          cursor: pointer;
          background-color: #fff;
          background-clip: padding-box;
          border: 0;
          opacity: .5;
          transition: opacity .6s ease;
      }

      .carousel-indicators .active {
          box-sizing: content-box;
          flex: 0 1 auto;
          width: 30px;
          height: 5px;
      }

      .about-scl-txt .content {
          margin: 0;
          padding: 20px !important;
      }

      .about-section h2 {
          font-size: 18px;
          color: #fff;
          line-height: 22px;
          margin-bottom: 20px;
      }

      .about-scl-txt p {
          color: #fff;
          line-height: 30px;
          text-align: left;
      }

      .about-section .hexagon-card .card-title {
          color: var(--color-secondary);
          font-size: 18px !important;
          margin: 10px;
          display: inline-block;
      }

      .about-section .hexagon-card .card-text {
          color: #000;
          margin: 0 10px;
          display: inline-block;
          text-align: center !important;
          font-size: 14px !important;
      }

      #edu-scl .section-header .section-title {
          font-size: 32px;
          margin-bottom: 20px !important;
      }

      #inner-hero {
          height: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          color: #ffffff;
          position: relative;
          display: flex;
          align-items: flex-end;
      }

      .inner-page-content {
          padding: 10px;
          background: #0000009e;
          margin: 10px;
          z-index: 2;
      }

      .page-title h1 {
          font-size: 28px;
          color: #fff;
          font-weight: normal;
          margin: 0;
      }

      .page-title h1:before {
          content: "";
          display: block;
          margin: 0 0 3% 0;
          width: 20%;
          height: 4px;
          background: var(--color-secondary);
      }

      .page-location,
      .page-text {
          margin-bottom: 10px;
          margin-top: 10px;
      }

      .counter {
          margin-bottom: 10px;
      }

      .counter {
          padding: 20px;
      }

      .counter .counter-value {
          color: var(--color-primary);
          font-size: 28px;
          font-weight: 800 !important;
          line-height: 20px;
          margin: 10px;
          display: block;
          transition: all 0.3s ease 0s;
      }

      #about-the-school .content-box-1,
      #about-the-school .content-box-2 {
          margin: 0;
          padding: 10px;
      }

      #about-the-school .content-box-1 h1 {
          margin: 0;
          font-size: 28px !important;
          font-weight: 600;
          line-height: 35px;
          color: var(--color-education);
          transition: all .3s;
      }

      #about-the-school .content-box-2 p {
          text-align: left;
      }

      .mission-vision .card-body {
          padding: 20px;
      }

      .mission-card,
      .vision-card {
          height: 200px;
          min-height: 200px;
      }

      .about-link-section.box-bg {
          padding: 0px;
          min-height: 400px;
      }

      .donor-partner-card {
          padding: 10px !important;
      }

      .donor-partner .donor-partner-heading .donor-partner-heading-text {
          font-size: 18px;
          padding: 0px;
          margin: 0px;
          color: #fff;
      }

      .donor-partner ul li {
          list-style-type: disc !important;
          padding-left: 1em !important;
          margin-left: 1em;
          font-size: 14px;
          margin-bottom: 5px;
      }

      .mph-the-school {
          padding: 10px !important;
      }

      #mph-the-school .content-box-1,
      #mph-the-school .content-box-2 {
          margin: 0;
          padding: 20px;
      }

      #mph-the-school .content-box-1 h1 {
          margin: 0;
          font-size: 35px;
          line-height: 40px;
      }

      #mph-the-school .content-box-2 {
          background: #ffffff93;
          max-width: 100%;
          min-width: 100%;
          height: 100%;
      }

      .mph-content ul.sidebar {
          list-style: none;
          margin: 0;
      }

      section.tab-content-item .content-box-2 h1 {
          font-size: 25px;
          margin-bottom: 20px;
      }

      .Global-Classroom .card .card-body .card-title {
          font-size: 14px !important;
          margin: 0;
      }

      .Global-Classroom .card .card-body .card-title span {
          font-size: 18px;
          font-weight: bold;
          display: block;
      }

      .mph-link-section.box-img-bg {
          padding: 10px;
          min-height: 500px;
      }

      .mph-link-section .card {
          padding: 10px;
      }

      .mph-link-section .card svg,
      .mph-link-section .card:hover svg
       {
          width: 50px;
          height: auto;
          color: #fff;
      }

      .mph-link-section .card .card-body {
          display: flex;
          align-items: center;
      }

      .mph-link-section.box-img-bg .box {
          padding: 10px;
          margin: 10px;
      }

      .mph-link-section.box-img-bg .box a {
          color: #fff;
          font-size: 16px !important;
      }

      .mph-link-section.box-bg {
          padding: 10px;
          min-height: 400px;
      }

      .list-type5 {
          width: 100%;
          margin: 10px;
      }

      .scholarship-information .know-more-btn.btn-fill {
          font-size: 14px;
      }

      #research-center-hub .section-header .section-title {
          font-size: 28px;
          margin-bottom: 20px;
      }

      #center-hub .section-header .section-title {
          font-size: 28px;
          margin-bottom: 20px;
      }

      section#center-hub {
          padding: 20px;
      }

      #research-content .section-header .section-title {
          font-size: 28px;
          margin-bottom: 20px;
      }

      .research-content section.tab-content-item .content-box-2 h1 {
          font-size: 28px;
          margin-bottom: 20px;
      }

      .research-link-section.box-img-bg {
          padding: 10px;
          min-height: 400px;
      }

      .section-header-2 h2 {
          font-size: 22px;
          font-weight: 600;
          padding-bottom: 20px;
          position: relative;
          text-transform: uppercase;
          word-spacing: 10px;
      }

      #training-section .section-header .section-title {
          font-size: 28px;
          margin-bottom: 20px;
      }

      #training-section .section-header .section-title span {
          display: inline-block;
          font-size: 14px;
      }

      .training {
          padding: 20px;
      }

      ul.center-filter {
          margin: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .center-filter a {
          font-size: 14px;
          margin: 2px 2px;
          padding: 2px 5px;
      }

      .card.filter-panel .card-body {
          height: 150px;
          min-height: 150px;
          max-height: 150px;
          overflow: scroll;
      }
  }

  @media (min-width: 576px) and (max-width: 767.98px) {
      p {
          font-size: 14px !important;
          line-height: 20px !important;
      }

      .card .card-title {
          font-size: 18px;
      }

      .card p.card-text {
          font-size: 14px !important;
          margin-bottom: 5px;
      }

      h5 {
          font-size: 18px !important;
          line-height: 22px !important;
          ;
      }

      h4 {
          font-size: 16px;
      }

      .know-more-btn {
          background: #fff;
          font-size: 14px;
          color: rgb(0, 0, 0);
          border-radius: 40px;
          padding: 5px 14px;
          letter-spacing: 1px;
          transition: 0.3s;
          font-weight: 600;
      }

      /* Index */
      .header .logo img {
          max-width: 200px;
          height: auto;
          margin-right: 6px;
      }

      #hero {
          width: 100%;
          height: 100%;
          background: #15384f;
      }


      .slider-body .carousel-caption {
        position: absolute;
        right: 1%;
        bottom: 0;
        left: 1%;
        padding-top: 0;
        padding-bottom: 0;
        color: #fff;
        text-align: center;
    }

    .slider-body .know-more-btn {
        background: #fff;
        font-size: 10px;
        color: #585858;
        border-radius: 30px;
        padding: 2px 8px;
        letter-spacing: 1px;
        transition: 0.3s;
        margin-bottom: 10px;
    }

    .carousel-indicators [data-bs-target] {
        box-sizing: content-box;
        flex: 0 1 auto;
        width: 8px;
        height: 8px;
        border-radius: 50px;
        padding: 0;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        opacity: .5;
        transition: opacity .6s ease;
        margin-top:30px;
    }

    .carousel-indicators .active {
        box-sizing: content-box;
        flex: 0 1 auto;
        width: 30px;
        height: 8px;
    }


      .slider-title h3 {
        font-size: 18px !important;
        font-weight: 600;
        color: #fff;
        text-transform: none;
        line-height: 1.2;
        margin-bottom: 30px;
    }



      /* index */
      .about-scl-txt .content {
          margin-left: 0px;
          margin-right: 0px;
      }

      .about-section h2 {
          font-size: 18px !important;
          line-height: 22px;
          margin-bottom: 20px;
      }

      .portfolio-container {
          display: none;
      }


      .about-section .portfolio-item {
          margin-bottom: 0px !important;
          overflow: hidden;
      }

      .about-section .hexagon-card .card-title {
          font-size: 16px;
          margin: 10px;
      }



      /* About */

      .inner-page-content {
        padding: 10px;
        background: #0000009e;
        margin-bottom: 20px !important;
        z-index: 2;
        margin:0;

    }

    .page-title h1 {
        font-size: 30px;
    }

    .page-location, .page-text {
        margin-bottom: 10px;
        margin-top: 10px;
    }


    #about-the-school .content-box-1, #about-the-school .content-box-2 {
        margin: 0;
        padding: 40px;
    }

    #about-the-school .content-box-1 h1 {
        margin: 0 !important;
        font-size: 35px;
        font-weight: 600;
        line-height: 40px;

    }


    .mission-vision .card-body {
        display: flex;
        justify-content: center;
        align-items: left;
        flex-direction: column;
        padding: 30px;
    }

    .mission-card {
        background: var(--color-primary);
        height: 200px;
        min-height: 200px;
    }

    .mission-card {
        background: var(--color-primary);
        height: 200px;
        min-height: 200px;
    }

    .vision-card {
        background: var(--color-research);
        height: 200px;
        min-height: 200px;
    }


    /* MPH */


    #mph-the-school .content-box-1 h1 {
        margin: 0;
        font-size: 40px;
        font-weight: 600;
        line-height: 50px;
    }

#mph-the-school .content-box-1, #mph-the-school .content-box-2 {
    margin: 0;
    padding: 20px;
}


#inner-hero {
    width:100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    position: relative;
    display: flex;
    align-items: flex-end;
}





  }

  @media (min-width: 768px) and (max-width: 991.98px) {
      p {
          font-size: 15px !important;
          line-height: 20px !important;
      }

      .card .card-title {
          font-size: 18px;
      }

      .card p.card-text {
          font-size: 14px !important;
          margin-bottom: 5px;
      }

      h5 {
          font-size: 18px !important;
          line-height: 22px !important;
          ;
      }

      h4 {
          font-size: 16px;
      }

      .know-more-btn {
          background: #fff;
          font-size: 14px;
          color: rgb(0, 0, 0);
          border-radius: 40px;
          padding: 5px 14px;
          letter-spacing: 1px;
          transition: 0.3s;
          font-weight: 600;
      }
  }

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

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

  @media (min-width: 1400px