body {overflow-x: hidden;}
/* Team */

.teamcontainer {
  display: grid;
}

.team-item {
  position: relative;
  min-height: 560px;
  min-width: 573px;
  background: url(../images/team/team-bg.svg) no-repeat center bottom 30px;
  text-align: center;
}

.image-container {
  position: absolute;
  width: 100%;
  height: 100%;
}


/* Left Image */
.team-item .left-image.normal-image {
        position: absolute;
    left: 26px;
    bottom: 70px;
    height: 375px;
    opacity:1;
    transition: opacity 0.5s ease, transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
     z-index:3;
    transform: scale(.95);
}

.team-item .left-image.hover-image {
  position: absolute;
  left: 40px;
  bottom: 90px;
  height: 375px;
  opacity: 0;
  transform: scale(1) translateY(8%) translateX(2%) rotate(0deg);
  transition:opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);	z-index:3;
}

/* right Image */
.team-item .right-image.normal-image {
  position: absolute;
    left: 183px;
    bottom: 60px;
    height: 375px;
    opacity: 1;
    transition: opacity 0.5s ease, transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
    transform: scale(.95); z-index:1;
}

/* Hover Image */
.team-item .right-image.hover-image {
  position: absolute;
  left: 230px;
  bottom: 20px;
  height: 375px;
  opacity: 0;
  transform: scale(1); /* Start at normal size */
  transition: 
    opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); z-index:1;
}



/* Normal Image */
.team-item .center-image.normal-image {
  position: absolute;
    left: 100px;
    bottom: 80px;
    height: 375px;
    opacity: 1;
    transition: opacity 0.5s ease, transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
    transform: scale(.95); z-index:2;
}

/* Hover Image */
.team-item .center-image.hover-image {
  position: absolute;
  left: 120px;
  bottom: 90px;
  height: 375px;
  opacity: 0;
  transform: scale(1); /* Start at normal size */
  transition: opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);z-index:2;
}

.team-item.thirdperson .left-image.normal-image {left: 18px;}
.team-item.thirdperson .center-image.normal-image {left: 116px; bottom:65px}
.team-item.thirdperson .right-image.normal-image {    left: 212px; bottom: 60px; transform: scale(.9) rotate(5deg);}
.team-item.thirdperson .left-image.hover-image {left: -40px;}
.team-item.specialrow .left-image.hover-image {left: 9px;transform: scale(1) translateY(12%) translateX(14%) rotate(-3deg);}
.team-item.specialrow .right-image.hover-image {left: 200px; bottom: 30px;}

.valuesupport .team-item{min-height: 500px;}

/* Title Block */
.titleblock {
  position: absolute;
  bottom: 28px;
  z-index: 3; left:0;right:0
}
.titlebg{position: relative;
  min-width: 358px;
  min-height: 105px;
  background: url(../images/team/ellipse-medium.png) no-repeat center;
  text-align: center; display: flex;
    justify-content: center;
    align-items: center;}
  .titlebg h3{font-family:var(--font-family-secondary);
font-size: 30px;
font-weight: 400;
line-height: 36px; color:rgba(21, 21, 22, 1); margin:0; -webkit-transform: rotate(5deg); 
        -moz-transform: rotate(5deg);    
        transform:rotate(5deg) }

.valuesupport{padding:90px; background: rgba(66, 39, 106, 1); margin: 60px 0 0;}
.valuesupport h3{font-family:var(--font-family-secondary);
font-size: 40px;
font-weight: 400;
line-height: 48px; color:rgba(165, 140, 202, 1);    text-align: center;
    margin-bottom: 75px;
}
.valuesupport h3 span{color:var(--themeprimary)}

.bg-transparent{background:transparent;align-items: center;
    display: flex;justify-content: center;}
.commentssection{display:flex;font-family: var(--font-family-secondary); color:var(--themewhite);  justify-content: space-between;
    width: 100%;    margin-top: 30px;
}
.commentssection div{}
.andsymbol{width:40%;
font-size: 94px;
font-weight: 400;
line-height: 112.8px;
text-align: left;  display: flex;
    align-items: center;
}

.teamsection img{margin: 35px 0;}
.teamsection{width:60%;display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 60%;font-family: var(--font-family-secondary); color:var(--themewhite);
font-size: 30px;
font-weight: 400;
line-height: 36px;
text-align: center
}

.valuesupport .team-item .right-image.normal-image {left: 190px;
    bottom: 77px;height:auto;
    transform: rotate(7deg) scale(.95);}
.valuesupport .titleblock {transform: rotate(0deg);}



  .nameleftside{position: absolute; bottom:30px; 
  min-width: 188px;
  min-height: 85px;
  background: url(../images/team/item1-left.png) no-repeat center;
  text-align: center; display: flex;
    justify-content: center;
    align-items: center;
		transform: translateY(42%) translateX(45%) rotate(-20deg);
    scale: 1.1;}
		.nameleftside p{transform:rotate(18deg); margin:0;font-family: var(--font-family-secondary); color:rgba(21, 21, 22, 1);
font-size: 18px;
font-weight: 400;
line-height: 29px;}
.namerightside{position: absolute; bottom:30px; 
  min-width: 194px;
  min-height: 64px;
  background: url(../images/team/item1-right.png) no-repeat center;
  text-align: center; display: flex;
    justify-content: center;
    align-items: center;
		transform: translateY(46%) translateX(51%) rotate(13deg);scale: 1.1;}
		.namerightside p{transform:rotate(-8deg); margin:0;font-family: var(--font-family-secondary); color:rgba(21, 21, 22, 1);
font-size: 20px;
font-weight: 400;
line-height: 29px;}
.namecenterside{position: absolute; bottom:30px; 
  min-width: 258px;
  min-height: 85px;
  background: url(../images/team/item2.png) no-repeat center;
  text-align: center; display: flex;
    justify-content: center;
    align-items: center;
		transform: translateY(50%) translateX(14%) rotate(-4deg)}
		.namecenterside p{transform:rotate(-2deg); margin:0;font-family: var(--font-family-secondary); color:rgba(21, 21, 22, 1);
font-size: 24px;
font-weight: 400;
line-height: 29px;}
.item3 .namecenterside{transform: translateY(50%) translateX(24%) rotate(-4deg)}
.item4 .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: 1.1;    transform: translateY(44%) translateX(42%) rotate(12deg);}
.item4 .nameleftside p{transform:rotate(-13deg);}
.item4 .namerightside{min-width: 185px; min-height: 95px; background: url(../images/team/item4-right.png) no-repeat center;transform: translateY(46%) translateX(51%) rotate(-24deg);
    scale: 1.1;}
.item4 .namerightside p{transform:rotate(22deg);}
.item5 .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: 1.1;    transform: translateY(44%) translateX(42%) rotate(12deg);}
.item5 .nameleftside p{transform:rotate(-13deg);}
.item5 .namerightside{min-width: 185px; min-height: 95px; background: url(../images/team/item4-right.png) no-repeat center;transform: translateY(46%) translateX(51%) rotate(-24deg);
    scale: 1.1;}
.item5 .namerightside p{transform:rotate(22deg);}
.item6 .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: 1.1;    transform: translateY(44%) translateX(42%) rotate(12deg);}
.item6 .nameleftside p{transform:rotate(-13deg);}
.item6 .namerightside{min-width: 185px; min-height: 95px; background: url(../images/team/item4-right.png) no-repeat center;transform: translateY(46%) translateX(51%) rotate(-24deg);
    scale: 1.1;}
.item6 .namerightside p{transform:rotate(22deg);}
.item7 .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: 1.1;    transform: translateY(44%) translateX(36%) rotate(12deg);}
.item7 .nameleftside p{transform:rotate(-13deg);}
.item7 .namerightside{min-width: 185px; min-height: 95px; background: url(../images/team/item4-right.png) no-repeat center;transform: translateY(46%) translateX(55%) rotate(-24deg);
    scale: 1.1;}
.item7 .namerightside p{transform:rotate(22deg);}
.item9 .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: 1.1;    transform: translateY(44%) translateX(32%) rotate(12deg);}
.item9 .nameleftside p{transform:rotate(-13deg);}
.item9 .namerightside{min-width: 185px; min-height: 95px; background: url(../images/team/item4-right.png) no-repeat center;transform: translateY(46%) translateX(46%) rotate(-24deg);
    scale: 1.1;}
.item9 .namerightside p{transform:rotate(22deg);}
.thirdperson .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: .9;    transform: translateY(56%) translateX(37%) rotate(12deg);}
.thirdperson .nameleftside p{transform:rotate(-13deg);}
.thirdperson .namerightside{min-width: 195px; min-height: 95px; background: url(../images/team/item4-left.png) no-repeat center;transform: translateY(55%) translateX(80%) rotate(14deg);  scale: .8;}
.thirdperson .namerightside p{transform:rotate(-8deg);}
.thirdperson .namecenterside{ background: url(../images/team/item4-right.png) no-repeat center; transform: translateY(56%) translateX(26%) rotate(-22deg);scale: .85;}
.thirdperson .namecenterside p{transform:rotate(20deg);font-size:20px}
    .team-item.thirdperson:hover .left-image.hover-image {
        transform: scale(.9);
        transition: opacity 0.5s ease, transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
        opacity: 1;
        transform: scale(1.05) translateY(-15%) translateX(8%) rotate(-14deg);
        left: -80px;
    }
	
	.valuesupport .team-item h3 {
     color: rgba(21, 21, 22, 1);
	margin-bottom: 0;    font-size: 30px;
    line-height: 36px;}
	.valuesupport .nameleftside{min-width: 194px; min-height: 85px; background: url(../images/team/item4-left.png) no-repeat center;scale: 1.1;    transform: translateY(44%) translateX(35%) rotate(12deg);}
.valuesupport .nameleftside p{    transform: rotate(-13deg);
    width: 90%;
    font-size: 17px;line-height: 22px;}
.valuesupport .namerightside{min-width: 185px; min-height: 95px; background: url(../images/team/item4-right.png) no-repeat center;transform: translateY(46%) translateX(46%) rotate(-24deg);
    scale: 1.1;}
.valuesupport .namerightside p{transform:rotate(22deg);
    width: 90%;
    font-size: 17px;line-height: 22px;}
	
  @media (min-width: 992px) {

.teamcontainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin: 0 auto;
  max-width: 1200px;
}

.team-item:hover .left-image.normal-image {
  opacity: 1; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}

.team-item:hover .left-image.normal-image, .team-item:hover .right-image.normal-image {
  opacity:0;transition: 
    opacity 0.5s ease,
}
/* Hover Image */
.team-item:hover .right-image.hover-image {
  position: absolute;
  left: 250px;
  bottom: 60px;
  height: 375px;
  opacity: 0;
  transform: scale(.9); /* Start at normal size */
  transition: 
    opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

.team-item:hover .right-image.hover-image {
  opacity: 1; /* Fade in */
  transform: scale(1.2) translateY(-13%) translateX(14%) rotate(10deg); /* Move and rotate */
}

.team-item:hover .right-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}
.team-item:hover .center-image.hover-image {
  bottom: 60px;
}

/* Hover Effect with Light Elastic Motion, Move Up, and Rotate */
.team-item:hover .center-image.hover-image {
  opacity: 1; /* Fade in */
  transform: scale(1) translateY(-30%) translateX(0%) rotate(0); /* Move and rotate */
}

.team-item:hover .center-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}
.team-item.specialrow:hover .left-image.hover-image{padding:25px;transform: scale(1.2) translateY(-12%) translateX(11%) rotate(-14deg);left: -68px;}
.team-item.specialrow:hover .right-image.hover-image{padding:25px;left: 230px;bottom: 68px;transform: scale(1.2) translateY(-13%) translateX(14%) rotate(14deg)}
.team-item:hover .left-image.hover-image {
  transform: scale(.9);
  transition: 
    opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); rotate(7deg);
	 opacity: 1; /* Fade in */
  transform: scale(1.1) translateY(-15%) translateX(8%) rotate(-14deg);    left: -60px;
}

.team-item:hover .left-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}

.team-item:hover .left-image.normal-image, .team-item:hover .right-image.normal-image {
  opacity:0;transition: 
    opacity 0.5s ease,
}
/* Hover Image */
.team-item:hover .right-image.hover-image {
  position: absolute;
  left: 250px;
  bottom: 60px;
  height: 375px;
  opacity: 0;
  transform: scale(.9); /* Start at normal size */
  transition: 
    opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

.team-item:hover .right-image.hover-image {
  opacity: 1; /* Fade in */
  transform: scale(1) translateY(-21%) translateX(4%) rotate(20deg); /* Move and rotate */
}

.team-item:hover .right-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}
.team-item:hover .center-image.hover-image {
  bottom: 60px;
}

/* Hover Effect with Light Elastic Motion, Move Up, and Rotate */
.team-item:hover .center-image.hover-image {
  opacity: 1; /* Fade in */
  transform: scale(1) translateY(-30%) translateX(0%) rotate(0); /* Move and rotate */
}

.team-item:hover .center-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}
.team-item.specialrow:hover .left-image.hover-image{padding:25px;transform: scale(1.2) translateY(-12%) translateX(11%) rotate(-14deg);left: -68px;}
.team-item.specialrow:hover .right-image.hover-image{padding:25px;left: 230px;bottom: 68px;transform: scale(1.2) translateY(-13%) translateX(14%) rotate(14deg)}

.valuesupport-container{display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin: 0 auto;
  max-width: 1200px;}
  

}
  
@media (max-width: 992px) {
	.valuesupport-container{display:grid}
  .team-item {min-width: 450px; margin: 0 auto; min-height: 470px;scale: .8;}

/* Left Image */
.team-item .left-image.normal-image {left: -34px;}
.team-item .left-image.hover-image {left: -40px;}
.team-item:hover .left-image.hover-image {left: -110px;}
.team-item .right-image.normal-image {left: 130px;}
.team-item .right-image.hover-image {left: 150px;}
.team-item:hover .right-image.hover-image {left: 170px;}
.team-item .center-image.normal-image {left: 37px;}
.team-item .center-image.hover-image {left: 50px;}

.team-item.thirdperson .left-image.normal-image {left: -51px;}
.team-item.thirdperson .center-image.normal-image {left: 46px;}
.team-item.thirdperson .right-image.normal-image {    left: 150px; bottom: 66px;}
.team-item.thirdperson .left-image.hover-image {left: -40px;}
.team-item.specialrow .left-image.hover-image {left: 9px;transform: scale(1) translateY(12%) translateX(14%) rotate(-3deg);}
.team-item.specialrow .right-image.hover-image {left: 200px; bottom: 30px;}
.team-item.specialrow:hover .left-image.hover-image{left: -138px;}
.team-item.specialrow:hover .right-image.hover-image{left: 110px;}
.valuesupport .team-item.bg-transparent{    min-height: 200px;        scale: 1;}
.valuesupport .team-item .left-image.normal-image {left: -20px; bottom: 70px;}
	.valuesupport .team-item .right-image.normal-image {left: 130px; bottom: 80px;}
.valuesupport {padding: 10px 0;}
.valuesupport h3{font-size: 22px;line-height: 38px; margin: 35px 0 0 0; padding:0 10px}
.valuesupport .team-item h3 {margin:0; padding:0}
.commentssection {margin-top: 0;justify-content: center;align-items: center; flex-direction: column;}
.andsymbol {
    width: auto; 
    font-size: 48px;
    line-height: 57px;
}
.teamcontainer {overflow: hidden;}
.teamsection {
    width: auto;
    align-items: center;
    font-size: 24px;
    line-height: 28px;
    text-align: center;        margin-top: 20px;
}
.teamsection img {
    margin: 20px 0 60px;
}


.team-item.in-view .left-image.hover-image {
  transition: 
    opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); rotate(7deg);
	 opacity: 1; /* Fade in */
  transform: scale(1) translateY(-15%) translateX(7%) rotate(-8deg);    left: -100px;
}

.team-item.in-view .left-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}

.team-item.in-view .left-image.normal-image, .team-item.in-view:hover .right-image.normal-image {
  opacity:0;transition: 
    opacity 0.5s ease,
}
/* Hover Image */
.team-item.in-view .right-image.hover-image {
  position: absolute;
  left: 250px;
  bottom: 60px;
  height: 375px;
  opacity: 0;
  transform: scale(1); /* Start at normal size */
  transition: 
    opacity 0.5s ease, 
    transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

.team-item.in-view .right-image.hover-image {
  opacity: 1; /* Fade in */
  transform: scale(1) translateY(-20%) translateX(-22%) rotate(17deg); /* Move and rotate */
}

.team-item.in-view .right-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}
/* Hover Effect with Light Elastic Motion, Move Up, and Rotate */
.team-item.in-view .center-image.hover-image {
  opacity: 1; /* Fade in */
  transform: scale(1) translateY(-30%) translateX(0%) rotate(0); /* Move and rotate */
}

.team-item.in-view .center-image.normal-image {
  opacity: 0; /* Fade out */
  transform: scale(1.05) translateY(-5px); /* Slight zoom and upward motion */
  transition: transform 400ms cubic-bezier(0.25, 0.25, 0.5, 1.9); /* Elastic transition */
}
    .team-item.item4.in-view .right-image.hover-image {
        opacity: 1;
        transform: scale(1) translateY(-22%) translateX(-24%) rotate(12deg);
    }
	    .team-item.item4.in-view .left-image.hover-image {
        transform: scale(1) translateY(-15%) translateX(13%) rotate(-6deg);
        left: -100px;
    }
	    .team-item.item7.in-view .left-image.hover-image {
        transform: scale(1) translateY(-15%) translateX(18%) rotate(-5deg);
        left: -100px;
    }
	
    .team-item.item7.in-view .right-image.hover-image {
        opacity: 1;
        transform: scale(1) translateY(-17%) translateX(-22%) rotate(13deg);
    }
	    .team-item.item9.in-view .left-image.hover-image {
        transform: scale(1) translateY(-15%) translateX(18%) rotate(-5deg);
        left: -100px;
    }
	
    .team-item.item9.in-view .right-image.hover-image {
        opacity: 1;
        transform: scale(1) translateY(-17%) translateX(-22%) rotate(13deg);
    }
	.thirdperson.in-view .namerightside{transform: translateY(68%) translateX(52%) rotate(14deg);}
	    .team-item.thirdperson.in-view .center-image.hover-image {
        opacity: 1;
        transform: scale(1) translateY(-28%) translateX(4%) rotate(-1deg);
    }
	.team-item.in-view {
    transition: transform 0.3s ease-in-out;
  }
}
@media (max-width: 430px) {
.team-item {left: -1%;}	}
@media (max-width: 415px) {
.team-item {left: -3%;}	}
@media (max-width: 400px) {
.team-item {left: -6%;}	}
@media (max-width: 380px) {
	.team-item {left: -7%;}
	
}
