*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: lora, 'Times New Roman', Times, serif;
}

h1{font-size: 2.5em; }
h2{font-size: 2em; font-weight: 500;}
h3{font-size: 1.3em; font-weight: 500;}
p{font-size: 1em;}
body {
  background-color: rgb(250, 250, 250);
  
}

:root{
  --light-bg-color: rgb(250, 250, 250);
  --dark-bg-color: rgb(245, 245, 245);
  --company-gold: rgb(186, 161, 35);
  --isuzu-red: rgb(230, 0, 0);
  --company-blue: rgb(0, 94, 171);
}

a{
  text-decoration: none;
  color: #000000;
}

i{
  color: black;
  font-size: 2em;
}

html {
  scroll-behavior: smooth;
 } 


body{
  min-width: 320px;
  background: linear-gradient(rgb(255, 255, 255), rgb(245, 245, 245), rgb(255, 238, 238),rgb(245, 245, 245), rgb(255, 255, 255)  );
  
}



.teams-header{
  width: 100%;
  height: 5em;
  background-color: rgb(244, 244, 244); 
  padding:0 2em;
  align-items: center;
  justify-content: center;
  color: var(--company-blue);
  display: flex;
  flex-direction: row;
}

.teams-header-text{
  flex: 1;
}

.teams-header-button{
  width: auto;
  height: 3em;
  background-color: var(--company-blue);
  align-content: center;
  padding: 0 1em;
  color: var(--light-bg-color);
  border-radius: 0.6em;
}

.heading-divider{
  width: 10%;
  height: 1.5px;
  background-color: var(--company-gold);
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 1em; */
}

.teamstext{
  width: 60%;
  height: auto;
  align-content: center;
  text-align: center;
  margin: 2em auto;
  /* font-size: 1.1em; */
}

#our-team{display: grid; place-content: center; overflow: hidden;}

.top{
  width: 100%;
  height: auto;
  /* background-color: aquamarine; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 2em;
  justify-items: center;
  padding: 2em 0;
  /* margin: 0 auto; */
  
}

.team-member{
  width: 100%;
  height: 90%;
  object-fit: cover;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

 .top-designation{
  width: 100%;
  height: 10%;
  background-color: var(--company-gold);
  text-align: center;
  font-size: 1.2em;
  align-content: center;
  color: var(--company-blue);
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
 }

.designation{
  width: 100%;
  height: 10%;
  background-color: var(--company-blue);
  text-align: center;
  font-size: 1.2em;
  align-content: center;
  color: aliceblue;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.indiv-pic-holder, .indiv-pic-holder2{
  width: 25em;
  height: 100%;
  /* background-color: blue; */
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.268);
  background: rgba(255, 255, 255, 0);
  border-radius: 0.7em;

}

.mid{
  width: 100%;
  height: auto;
  /* background-color: aqua; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding-top: 2em;
  row-gap: 3em;
  padding-bottom: 2em;
}

.team-pic{
  width: 100%;
  height:auto;
  justify-content: center;
  display: flex;
  padding: 4em;
}

.team-picture{
  border-radius: 1em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.268);
  width: auto;
  object-fit: contain;
  height: 30em;

}

.upbtn{
  width: 100%;
  display: flex;
  height: 4em;
  justify-content: end;
  align-items:center;
  padding-right:0.7em;
  /* margin-bottom: 1em; */
}

.back-to-top{
  width: 3em;
  height: 3em;
  background-color: var(--company-blue);
  /* position: absolute; */
  z-index: 100;
  font-size: 1em;
  border-radius: 100%;
  text-align: center;
  align-content: center;
  /* margin: 1em; */
    transition: transform 0.5s ease;
}

.back-to-top:hover{
  transform: scale(1.1);
}

.back-to-top:active{
  transform: scale(0.9);
}


.arrow{
  width: 1.7em;
  transform: rotate(90deg);
  margin-top: 0.1em;

  
}





/* 
@media(max-width:2650px){
    h1 { font-size: 2.2em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; }
  p  { font-size: 0.95em; }
  button, a { font-size: 0.95em; }
} */

 @media (max-width:1210px){

   .mid{
     grid-template-columns: repeat(2, 1fr);
   }
 }


 @media (max-width:1024px) {

  h1 { font-size: 2.2em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; }
  p  { font-size: 0.95em; }
  button, a { font-size: 0.95em; }

  .mid{
    grid-template-columns: repeat(2, 1fr);
  }


}


@media (max-width: 950px){
  .top, .mid{
    grid-template-columns: repeat(1, 1fr);
  }
  .top{
    gap: 2em;
    padding-bottom: 3em;
    
  }


  
}


@media (max-width: 860px) {
  h1 { font-size: 2.1em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; }
  p  { font-size: 0.9em; }
  button, a { font-size: 0.9em; }  

  .team-picture{
    height: 25em;
  }

}

@media (max-width: 770px){
  .team-picture{
    height: 20em;
  }
}

@media (max-width: 630px){

    #teams{
    margin-top: 2em;
    grid-template-columns: repeat(2, 1fr);
  }

  .info-icon{
    margin-right: 0.3em;
  }

    .team-picture{
    height: 17em;
  }
    
} 


  @media (max-width:585px){
    #teams{
      grid-template-columns: repeat(1, 1fr);
    }

    .indiv-pic-holder, .indiv-pic-holder2{
    width: 22em;
  }

    .team-picture{
    height: 15em;
  }
  }



    


@media (max-width: 450px){


   p{font-size: 0.85em;}

  #teams{
    grid-template-columns: repeat(1, 1fr);
  }

  .teams-header-button{
    width: auto;
    font-size: small;
  }

  .team-picture{
    height: 13em;
  }

}

@media (max-width: 425px){

   p{font-size: 0.85em;}

  .indiv-pic-holder, .indiv-pic-holder2{
    width: 20em;
  }
}

@media (max-width:370px){
   .team-picture{
    height: 11em;
  }
}


@media (max-width:365px){

  .indiv-pic-holder, .indiv-pic-holder2{
    width: 17em;
  }

  .gallery-header-button{
    font-size: smaller;
  }
}