/* *{*/
/*    border: 0.1px dotted red;*/
/*} */
:root {
  --main-color: #243746;
  --sec-color: #cf3339;
  --timing: 1s;
}
header.fixed-header {
    padding: 2px 35px;
    background: #243746C7;
  }
.section{
    min-height:45vh;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    padding:25px 0 0 0;
    overflow:hidden;
    position:relative
}
.section h1{
    color:#d13038;
    font-size:50px;
    line-height:50px;
    margin:0 0 25px
}
.section h1 strong{
    font-weight:700
}
.banner-wrap{
    background:#243746 no-repeat center fixed;
    background-size:cover;
    z-index: 1 !important;
}
.banner-wrap p{
    color:#fff;
    font-size:16px;
    width:100%;
    margin:0
}
.team-wrap{
    background-color: #fff;
    color:#243746;
    padding:10vh 0 0;
    overflow:visible;
    min-height:1px
}
.team-wrap h2{
    font-size:73px;
    margin:0
}
.team-wrap h3{
    font-size:25px
}
.team-wrap h3 strong{
    font-size:29px;
    display:block
}
.team-wrap h5{
    font-size:16px
}
.team-wrap .teambox h3{
    font-size:30px
}
.team-wrap .teambox h4{
    font-size:22px
}
.team-wrap .teambox h4 strong{
    display:block
}
.team-wrap .teambox img{
    width:72%;
    margin-top:-40px;
    position:relative
}
.team-wrap .teambox h2{
    position:absolute;
    top:140px;
    right:-22%
}
.team-wrap .teambox.ceo h2{
    top:70px;
    left:73%;
    right:unset;
    width:299px
}
.team-wrap .teambox .team-pic img{
    width:100%;
    margin-top:0
}
/*#region team section*/
.bottom-sec {
  margin-bottom: 7rem;
}
.team-cont {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  width: 100%;
  flex-flow: row wrap;
  column-gap:3rem;
}
.section h1.departments{
  font-size: 40px;
}
.personImg {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  z-index: 2;
  background-color: white;
}
.skeleton{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightgrey;
  -webkit-animation: pulse2 5s ease-in-out infinite;
  animation: pulse2 5s ease-in-out infinite;
  opacity: 0.5;
  z-index: 0;
  aspect-ratio: 9/10.2;
}
.skeleton::after{
border: 2px solid white;
border-top: 2px solid #273643;
border-radius: 50%;
/* width: 50%; */
height: 20%;
aspect-ratio: 1;
content: "";
animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
100%{
  rotate: 360deg;
}
}
@-webkit-keyframes pulse2 {

50% {
  opacity: 0.7;
}
}
section .overlay {
  z-index: 3;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  mix-blend-mode: blend;
  transition: all var(--timing) ease-in-out;
  object-fit: cover;
  mask: linear-gradient(#000 0 0),
    linear-gradient(-30deg, #000 50%, #0000 0) content-box 100% 100%/200% 200%
      no-repeat;
  -webkit-mask: linear-gradient(#000 0 0),
    linear-gradient(-30deg, #000 50%, #0000 0) content-box 100% 100%/200% 200%
      no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.employeeCard:hover .overlay {
  opacity: 1;
  -webkit-mask-position: 0% 0%;
}

.images {
  position: relative;
  width: 100%;
  display: flex;
}
.employeeCard {
  position: relative;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0rem 1.5rem;
}
.likeDis {
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: fit-content;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(10%, -50%);
  opacity: 0;
  transition: all var(--timing) ease-in-out;
  gap: 1rem;
}
.employeeCard:hover .likeDis {
  opacity: 1;
}
h1.position,
h1.name,
h3.header,
h4.content {
  margin: 0;
  padding: 10px 10px;
  margin: 1px 0;
  display: flex;
  width: fit-content;
  text-transform: lowercase;

  position: relative;
}
h1.name {
  color: var(--main-color);
}
h1.position {
  opacity: 0;
  text-align: center;
  position: absolute;
}
.thisDiv {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
}

.employeeCard:hover .person-name {
  display: none !important;
}
.employeeCard:hover .person-designation {
  display: block !important;
  color: var(--sec-color);
}
.employeeCard h2 {
  text-align: center;
  height: 69px;
  font-size: 1.5rem;
}

h3.header {
  color: var(--main-color);
  background-color: var(--sec-color);
  width: max-content;
  padding: 0;
}
h4.content {
  color: white;
  background-color: var(--main-color);
  padding: 0;
  width: 120%;
  z-index: 999;
  max-width: max-content;
  min-width: min-content;
}

/*#endregion*/
/*#region media queries*/
@media only screen and (min-width: 86em) {
  h4.content {
    color: white;
    background-color: var(--main-color);
    padding: 0;
    width: max-content;
    max-width: 20ch;
    z-index: 999;
  }
  h3.header,
  h4.content {
    font-size: 1.25rem;
  }
}
/* Extra large devices (desktops) up to 85em (1360px) */
@media only screen and (max-width: 85em) {
  h3.header,
  h4.content {
    font-size: 1.25rem;
  }
  .likeDis {
    transform: translate(30%, -50%);
  }
}

/* Large devices (desktops) up to 74.375em (1190px) */
@media only screen and (max-width: 74.375em) {
  h3.header,
  h4.content {
    font-size: 1.25rem;
  }

  .likeDis {
    transform: translate(5%, -50%);
  }
}

/* Medium devices (small laptops and large tablets) up to 62em (992px) */
@media only screen and (max-width: 62em) {
  .team-wrap {
    padding: unset;
  }
  h3.header,
  h4.content {
    font-size: 1rem;
  }
  .team-cont {
    grid-template-columns: repeat(2, 1fr);
    column-gap:2rem;
  }
  .employeeCard {
    position: relative;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem;
  }
}

/* Small devices (tablets) up to 48em (768px) */
@media only screen and (max-width: 48em) {
    .team-screen{
        text-align: center;
    }
    .banner-wrap.team-screen{
        padding-top: 8rem;
    }
    .banner-wrap {
        padding: 60px 0;
        background-size: contain;
        background-position: 50% -10%;
    }
    .section {
        min-height: 1px;
        padding: 40px 0;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .team-wrap {
        padding: unset;
      }
  h3.header,
  h4.content {
    font-size: 1rem;
  }
  .col-xl-4.col-lg-5.col-sm-offset-2.offset-lg-6.wow.fadeInUp {
    padding-top: 3rem;
  }
  .team-cont {
    grid-template-columns: repeat(2, 1fr);
    column-gap:unset;
  }
  .employeeCard h2 {
    font-size: 1.25rem;
  }
  .employeeCard {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0rem 1.5rem;
  }
}

/* Extra small devices (phones) up to 36em (576px) */
@media only screen and (max-width: 36em) {
    .banner-wrap.team-screen{
        padding-top: 10rem;
        z-index: 1 !important;
    }
  h3.header,
  h4.content {
    font-size: 1.25rem;
  }
  .team-cont {
    grid-template-columns: 1fr;
  }
  .col-xl-4.col-lg-5.col-sm-offset-2.offset-lg-6.wow.fadeInUp h2{
    padding-top: 3rem;
  }
  .col-xl-4.col-lg-5.col-sm-offset-2.offset-lg-6.wow.fadeInUp {
    padding-top: unset;
  }
}
/*#endregion*/