.sub-header-info{
 padding-top: 150px;
 padding-bottom: 150px;
}
.banner-section{
    background-image: url(../img/banner/PECBuilding_F1.png);
    background-position: center;
  position: relative;
    
}
.side-menu{
    background-color: green;
    color: #fff;
    padding-top: 20px;
    padding-left: 20px;
    font-family: poppins;
    border: silver;

}

.accordion{
  display: none;
}

@media (max-width:575px){
  .accordion{
    display:block;
  }
}

.content{
    font-family:'Arial Narrow';
    font-size: 18px;
    text-align: justify;

}
.chairman{
    border: #5bcc27;
}
.p
    {
        font-family: "Hind", sans-serif;
        font-size: 16px;
        font-weight: normal;
        color: #6d6e75;
        margin-bottom: 15px;
        line-height: 26px;
        text-align: justify;
    }

    .headingsfonts {
        font-size: 20px;
        color: #155b2e;
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    }
    .padding10 {
        padding: 10px;
      }
      .sidelinks a {
        background-color: #fff;
        padding: 8px;
        display: block;
        color: #333;
        border: 1px solid #ccc;
        margin: 2px;
        font-size: 14px;
      }

      .sidelinks a:hover {
        background-color: #155b2e;
        padding: 8px;
        display: block;
        color: #fff;
        border: 1px solid #155b2e;
        margin: 2px;
        font-size: 14px;
      }
      .chairman-img{
        max-width: 150px;
      }
      .head-1{
        color: #155b2e;
        font-size: 18px;
        font-weight: 1.0px;
        font-family: "Hind", sans-serif ;
      }
      .p{
        letter-spacing: 0px;
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
        font-size: 16px;
        text-emphasis-color: #000;
      }
      .members{
            font-size: 20px;
            font-weight: 600;
            color: #3db166;
            text-align: center;
            font-family: "Hind", sans-serif ;
        
        }
        .background-overlay{
          color: #3db166;
        }
        .animated {
          text-align: center;
          color: #fff;
          padding-top: 10px;
        }
        .team-member-title{
          text-align: center;
          font-family: "Hind, sans-serif " ;
          font-size: 25px;
        }
        .team-position{
          text-align: center;
          font-size: 20px;
        }
        .team-short-bio{
          text-align: justify;
          font-size: 16px;
          word-break: 0.30px;
        }
        .h6{
          padding-top: 50px;

        }
        .list-unstyled {
          font-size: 16px;
          font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
          text-align: justify;
          color: #000;
          font-weight: 400px;
          letter-spacing: 0px;
          
      
        }
        .text-primary {
          padding-top: 10px;
          font-family: "Hind, sans-serif ";

        }
        .main-images{
            width: 400px;
            padding-top: 20px;
        }
        .submenu{
          /* font-size: 20px;
          font-weight: 300px;
          font-family: 'Courier New', Courier, monospace; */
        }
        .overlay{
          position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
        }
        .bodsy-overlay{
          background-color: #0D4700;
          opacity: 0.6;
          transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
          width: 100%;
          height: 100%;
          left: 0;
          position: absolute;
        }
        .table {
          width: 100%;
          text-align: center;
          border-spacing: 2px;
          border-collapse: separate;
          margin-bottom: 20px;
      }

      ol li :hover {
        color: green;
      }



      .tabcontent {
        display: none;
        padding: 6px 12px;
       
        
      }


      #gallery {
        padding-top: 40px;
        @media screen and (min-width: 991px) {
          padding: 60px 30px 0 30px;
        }
      }
      
      .img-wrapper {
        position: relative;
        margin-top: 15px;
        
        img {
          width: 100%;
          height: 150px;
          
        }
      }
      .img-overlay {
        background: rgba(0,0,0,0.7);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        i {
          color: #fff;
          font-size: 3em;
        }
      }
      
      #overlay {
        background: rgba(0,0,0,0.7);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        // Removes blue highlight
        -webkit-user-select: none;
        -moz-user-select: none;    
        -ms-user-select: none; 
        user-select: none; 
        .img {
          margin: 0;
          width: 80%;
          height: auto;
          object-fit: contain;
          padding: 5%;
          @media screen and (min-width:768px) {
              width: 60%;
          }
          @media screen and (min-width:1200px) {
              width: 50%;
          }
        }
      }
      
      #nextButton {
        color: #fff;
        font-size: 2em;
        transition: opacity 0.8s;
        &:hover {
          opacity: 0.7;
        }
        @media screen and (min-width:768px) {
          font-size: 3em;
        }
      }
      
      #prevButton {
        color: #fff;
        font-size: 2em;
        transition: opacity 0.8s;
        &:hover {
          opacity: 0.7;
        }
        @media screen and (min-width:768px) {
          font-size: 3em;
        }
      }
      
      #exitButton {
        color: #fff;
        font-size: 2em;
        transition: opacity 0.8s;
        position: absolute;
        top: 15px;
        right: 15px;
        &:hover {
          opacity: 0.7;
        }
        @media screen and (min-width:768px) {
          font-size: 3em;
        }
      }
      
      #overlay #prevButton img {
        height: 400px;
      }
      
      
      .pagination {
        display: inline-block;
        padding-top: 20px;;
      }
      
      .pagination a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
      }
      
      .pagination a.active {
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
      }
      
      .pagination a:hover:not(.active) {
        background-color: #ddd;
        border-radius: 5px;
      }
      
      #gallery {
        padding-top: 40px;
        @media screen and (min-width: 991px) {
          padding: 60px 30px 0 30px;
        }
      }
      
      .img-wrapper {
        position: relative;
        margin-top: 15px;
        
        img {
          width: 100%;
          height: 150px;
          
        }
      }
      .img-overlay {
        background: rgba(0,0,0,0.7);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        i {
          color: #fff;
          font-size: 3em;
        }
      }
      
      #overlay {
        background: rgba(0,0,0,0.7);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        // Removes blue highlight
        -webkit-user-select: none;
        -moz-user-select: none;    
        -ms-user-select: none; 
        user-select: none; 
        .img {
          margin: 0;
          width: 80%;
          height: auto;
          object-fit: contain;
          padding: 5%;
          @media screen and (min-width:768px) {
              width: 60%;
          }
          @media screen and (min-width:1200px) {
              width: 50%;
          }
        }
      }
      
      #nextButton {
        color: #fff;
        font-size: 2em;
        transition: opacity 0.8s;
        &:hover {
          opacity: 0.7;
        }
        @media screen and (min-width:768px) {
          font-size: 3em;
        }
      }
      
      #prevButton {
        color: #fff;
        font-size: 2em;
        transition: opacity 0.8s;
        &:hover {
          opacity: 0.7;
        }
        @media screen and (min-width:768px) {
          font-size: 3em;
        }
      }
      
      #exitButton {
        color: #fff;
        font-size: 2em;
        transition: opacity 0.8s;
        position: absolute;
        top: 15px;
        right: 15px;
        &:hover {
          opacity: 0.7;
        }
        @media screen and (min-width:768px) {
          font-size: 3em;
        }
      }
      
      #overlay #prevButton img {
        height: 400px;
      }
      
      
      .pagination {
        display: inline-block;
        padding-top: 20px;;
      }
      
      .pagination a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
      }
      
      .pagination a.active {
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
      }
      
      .pagination a:hover:not(.active) {
        background-color: #ddd;
        border-radius: 5px;
      }
/* Inline style inside same page */
      .dropdown-menu .dropdown-item:hover {
        background-color: #7A5546 !important; /* darker color on hover */
        color: #ffffff !important; /* text becomes white */
      }