body{
    margin: 0px;
    height: 100%;
          }
     .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 20px;
      padding: 20px
     }    
     .grid-item{
      -ms-grid-column-align: center;
      
     }
    h1{
      color: #FFc107;
    }
    
    .grid-2div-sub {
            display: flex;
        }
        .tab-button {
            border: none;
            cursor: pointer;
        }
        .tab-button.active, .tab-button:active{
            background-color: #facc15;
            transition: 0.5s;
        }
        .tab-content {
            display: none;
            transition: opacity 0.3s ease-in-out;
        }
        .tab-content.active {
            display: block;
            opacity: 1;
            height: 400px; 
            overflow-y: scroll;
        }
        .founders-address{
          display: grid;
          grid-template-columns: 75% 1fr;
        }

        .our-impact-con1{
          display: grid;
          grid-template-columns: 75% 1fr;
        }

        #pic{
          height: 150px; 
          width: 150px;
          border-radius: 10px;
        }

        .image-container {
            position: relative;
            width: 280px;
            height: 200px;
            margin-left: 25px;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            transition: 0.5s ease;
            border-radius: 10px;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            opacity: 0;
            transition: 0.5s ease;
            border-radius: 10px;
        }

        .image-container:hover img {
            filter: brightness(50%);
        }

        .image-container:hover .overlay {
            opacity: 1;
            background: rgba(0, 0, 0, 0.5);
        }
        @media (min-width: 1024px){
          .image-container{
            width: 200px;
          }
          .team-lead{
            display: flex;
            align-items: center;
          }
          .overlay{
            font-size: 15px;
          }
        }
        @media (max-width: 992px){
          .team-lead{
            margin-left: 0;
          }
        }
        @media (max-width: 820px){
          .image-container{
            width: 150px;
            height: 150px;
          }
          .overlay{
            font-size: 15px;
          }
        }
        @media (max-width: 768px){
          .overlay{
            font-size: 12px;
          }
        }
        @media (max-width: 430px){

          .gid{
            place-self: center;
          }
          .team-lead{
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            row-gap: 20px;
            margin-left: 5px;
          }
          .overlay{
            font-size: 15px;
          }
          .image-container{
            margin-left: 0;
            width: 200px;
            height: 200px;
          }
        }

        @media (max-width: 375px){
          .tab-content.active {
            margin-left: 0;
            padding: 15px;
          }
          .our-impact-con1 {
          grid-template-columns: 1fr;
          }
          .founders-address {
          grid-template-columns: 1fr;
          }
          #pic {
          width: 300px;
          margin: auto;
          height: 210px;
          margin-bottom: 10px;
          }
          .team-lead{
            margin-left: 0;
          }
          .image-container {
              margin-left: 0;
              width: 160px;
              height: 160px;
              place-self: center;
          }
          .tab-buttons{
            width: fit-content;
            margin-left: 10px;
            gap: 10px;
          }
          }
  

        @media (max-width: 360px){
          .tab-content.active {
            margin-left: 20px;
          }

          .team-lead{
            margin-left: 0;
          }
          .image-container {
              margin-left: 0;
              width: 150px;
              height: 150px;
              place-self: center;
          }
          }
  
        @media (max-width: 320px){
          .tab-content.active {
            margin-left: 10px;
            width: 280px;
          }
          .founders-address{
          grid-template-columns: 1fr;
          }
          .founders-vision{
            width: 260px;
          }
          .our-impact-con1{
          grid-template-columns: 1fr;
          }
          #pic{
            height: 200px;
            width: 250px;
          }
          #resize{
            width: 100%;
          }
          #pic {
          margin: 0;
          }
          .team-lead{
            gap: 0;
            row-gap: 20px;
          }
          .overlay{
            font-size: 10px;
          }
          .image-container{
            margin-left: 0;
            width: 150px;
            height: 150px;
          }
          .tab-buttons{
            width: 270px;
            margin-left: 25px;
            gap: 1px;
          }
          
        }
        @media(max-width: 240px){
          .tab-content.active {
            overflow: scroll;
            width: 200px;
        }
        .tab-buttons {
            width: 200px;
            margin-left: 15px;
            gap: 1px;
        }
        #pic{
          height: 150px;
          width: 150px;
        }
        .team-lead-head h1{
          font-size: 25px;
        }
        .image-container {
        width: 100px;
        height: 100px;
        }
        }