
.page_content{
	padding: 20px 0 70px;
}
.page_content h2{
	font-size: 32px;
	line-height:150%;
	color:var(--main-color);
	margin:0 0 10px;
	font-weight:600;
}
.page_content p {
	font-size: 16px;
	line-height:160%;
	color: #333;
	margin:0 0 15px;
}
.page_content p.bold_text {
	font-size: 16px; 
	margin:20px 0 8px;
	font-weight: 600;
}

.page_content ul{
	margin:0 0 0px 35px;
}
.page_content ul li{
	color:#333;
	font-size: 16px;
	line-height:160%;
	margin:0 0 10px;
} 
.two_grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    grid-gap: 30px;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.img_div img {
    width: 100%;
    max-width: 530px;
    object-fit: cover;
    margin: 0 auto;
}
.img_div {
    text-align: center;
    position: relative;
}
.img_div:before {
    position: absolute;
    content: '';
    width: 85%;
    height: 100%;
    border: 3px solid var(--main-color);
    right: 0;
    top: -25px;
    z-index: -1;
}
.mt_30{
	margin-top: 30px !important;
}
.page_content p a {
    color: var(--main-color);
    font-weight: 600;
}
.page_content p a:hover {
    color: #000; 
}


/*--------------------------------------------*/
.content_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
}
.team_div {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    max-width: 45%;
}
.member_img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}
.member_title {
    position: relative;
    left: -30px;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 7px 6px 20px 0 #00000012;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.member_title h2 {
    margin: 0;
    font-size: 20px; 
    margin-bottom: 15px;
    border-bottom: 1px solid #bcccd3ad;
    padding-bottom: 10px;
}
p.work_roll {
    font-weight: 600;
    color: #333;
    font-size: 15px;
    margin: 0 0 5px; 
}
.member_detail {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 50%;
    background-color: #fff3f1;
    padding: 20px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    opacity: 0;
    overflow-y: scroll;
}
.member_detail h2 {
    margin: 0;
    font-size: 20px;
    color: var(--main-color);
    margin-bottom: 15px;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
}
.member_detail p{
    font-size: 15px;
}
.team_div:hover .member_detail {
    height: 100%;
    opacity: 1;
}
.contact_link a i {
    color: var(--main-color);
    font-size: 16px;
}
.contact_link {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}
/*--------------------------------------------*/
@media(max-width:1300px){
	.team_div { 
	    max-width: 47%;
	}
}
@media(max-width:1200px){
	.img_div:before { 
	    right: -20px;
	}
}
@media(max-width:1100px){
	.team_div {
	    max-width: 70%;
	}
}
@media(max-width:992px){
 
	.two_grid {
	    grid-template-columns: 1fr;
	    grid-gap: 10px;
	}
	.img_div:before{
		display: none;
	}
	.page_content h2{
		font-size:20px;
	}
	.team_div {
	    max-width: 80%;
	}
}
@media(max-width:768px){
	.team_div {
	    max-width: 90%;
	}
}
@media(max-width:640px){
	.team_div {
	    max-width: 100%;
	}
}
@media(max-width:575px){
	.img_div img {
	    padding: 0 20px; 
	}
	.page_content ul li, .page_content p{ 
		font-size: 15px; 
	} 
	.team_div {
	    grid-template-columns: auto;
	}
	.member_title {
	    left: 50%;
	    top: -30px;
	    width: 90%;
	    box-shadow: unset;
	    min-height: auto;
	    transform: translateX(-50%);
	    z-index: 9;
	}
	.content_row { 
	    grid-gap: 20px;
	}
	.member_detail {
	    position: relative;
	    background-color: #fff0ed;
	    padding: 50px 20px 20px;
	    top: -60px;
	    height: auto;
	    opacity: 1;
	    bottom: auto;
	}
	.member_detail h2, .member_detail .work_roll {
	    display: none;
	}
}
@media(max-width:480px){
 
	.page_content h2{
		font-size:18px;
	}
 
}
@media(max-width:375px){
	.page_content ul {
	    margin: 0 0 0px 20px;
	}
	.img_div img {
	    padding: 0 10px; 
	}
}
