/**
 * Team Members Block - Frontend Styles
 * These styles are loaded on the frontend
 */

.team-members-block { padding: 120px 0; }
.team-members-block .heading { text-align: center; margin-bottom: 45px; }
.team-members-block .heading h2 { color: var(--primary-color); }

.team-members-wrap {display: flex;flex-wrap: wrap;justify-content: center;gap: 40px;}
.team-members-wrap .team-members-list {width: 31.1%;text-align: center;}
.team-member-bg img { background-color: var(--white-color); border-radius: 50%;width: 100%;height: 100%;object-fit: cover;margin: 0 auto;}

.team-members-inner { text-align: center; padding: 0 0 27px 0;height: 100%;border-radius: 16px; position: relative;}
.team-members-inner::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 85px); border-radius: 16px; background-color: var(--white-color); z-index: 0; }
.team-member-bg { text-align: center; position: relative; }
.team-member-info { padding: 24px; position: relative; margin-top: 12px; }
.team-member-info h3 { font-size: 24px; line-height:28px; color: var(--primary-color); margin-bottom: 8px; }
.team-member-info h3 a { font-size: 24px; line-height:28px; color: var(--primary-color); margin-bottom: 8px; }
.team-member-info p { font-size: 18px; line-height:24px; color:  var(--primary-color); margin: 0; }
.team-member-bg a { display: table; margin: 0 auto; position: relative; }
.team-member-bg a:before { content: ""; position: absolute; top: 50%; left: 50%; width: 175px; height: 175px; display: block; border-radius: 100%; border: 2px solid var(--light-red-color); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.team-member-bg a:hover:before { background-color: var(--light-red-color); animation-name: team-member; animation-duration: 1s; }
.team-member-bg a .member-bg { width: 160px; height: 160px; position: relative; z-index: 1; }
@keyframes team-member {
	0% {
		background-color: transparent;
	}

	100% {
		background-color: var(--light-red-color);
	} 
}

/* Team Member Popup Css Start Here */
body.lity-opened { overflow: hidden; }
.lity { background: rgba(0, 0, 0, 0.4); }
.lity-content:after { content: ""; display: none; }
.team-member-popup { max-width: 902px;margin: 0 auto;width: 100%;border-radius: 16px; overflow: auto; }
.team-member-popup-wrap { padding: 48px 64px; }
.team-member-popup-bg img { border: 6px solid var(--light-red-color); background-color: var(--white-color); border-radius: 50%;width: 121px;height: 121px;object-fit: cover;margin: 0 auto; }
.team-member-popup-info { text-align: center; }
.team-member-popup-info h3 { font-size: 24px; line-height:28px; color: var(--primary-color); margin-bottom: 8px; }
.team-member-popup-info p { font-size: 18px; line-height:24px; color:  var(--primary-color); margin: 0; }
.team-member-popup-bg { margin-bottom: 32px; }
.team-member-popup-content { margin-top: 24px; }
.team-member-popup-content p { font-size: 16px; line-height:28px; color:  var(--primary-color); margin-bottom: 15px; }
.lity-container button.lity-close { display: none; }
.lity-container button.popup-close { background-image: url(./close.svg); background-repeat: no-repeat; position: relative; top: 30px;
right: -95%; font-size: 0; width: 14px; height: 14px; background-color: transparent; border: 0; cursor: pointer; z-index: 0; }

/*Responsive Css Start Here*/
@media only screen and (max-width: 1280px) {
    .team-members-wrap { gap: 38px; }
}
@media only screen and (max-width: 1200px) {
    .team-members-block {padding: 80px 0;}
    .team-members-wrap { gap: 31px; }
}
@media only screen and (max-width: 1024px) {
    .team-members-block {padding: 60px 0;}
}
@media only screen and (max-width: 991px) {
    .team-member-bg img { width: 100%;height: 100%; }
    .team-member-bg a .member-bg { width: 140px; height: 140px; }
    .team-member-bg a:before { width: 160px; height: 160px; }
    .team-members-inner::before { content: ""; height: calc(100% - 70px); }
    .team-member-info { padding: 15px; }
    .team-members-wrap .team-members-list { width: 47%; }
    .team-members-wrap { max-width: 720px; margin: 0 auto; width: 100%; }
    .team-member-popup { max-width: 720px; }
    .team-member-popup-wrap { padding: 40px 30px; }
    .team-member-info h3 { font-size: 22px; line-height:24px; }
    .team-member-info h3 a { font-size: 22px; line-height:24px; }
}
@media only screen and (max-width: 767px) {
    .team-members-block {padding: 40px 0;}
    .team-members-block .heading { margin-bottom:48px; }
    .team-member-info { padding: 20px 12px; }
    .team-member-popup { max-width: 560px; }
    .team-member-popup-content p { font-size: 14px; line-height:24px; margin-bottom: 12px; }
    .team-member-info h3 { font-size: 24px; line-height:26px; }
    .team-member-info h3 a { font-size: 24px; line-height:26px; }
}
@media only screen and (max-width: 640px) {
    .team-member-popup { max-width: 460px; }
    .team-member-popup-wrap { padding: 30px; }
}
@media only screen and (max-width: 575px) {
    .team-member-bg a .member-bg { width: 105px; height: 105px; }
    .team-member-bg a:before { width: 120px; height: 120px; }
    .team-members-inner::before { content: ""; height: calc(100% - 50px); }
    .team-members-wrap .team-members-list { width: 100%; }
    .team-members-wrap { max-width: 343px; margin: 0 auto; width: 100%; gap: 28px; }
    .team-members-inner { padding: 0 0 0 0; }
    .team-member-info { padding: 24px; }
    .team-member-popup { max-width: 343px;  }
    .team-member-popup-wrap { padding: 44px 24px 16px 24px; }
    .lity-container button.popup-close { position: relative; top: 10px; right: -90%; }
    .team-member-popup-bg img { width: 72px; height: 72px; }
}