.section {

	padding-inline: clamp(80px, 16vw, 300px);

	padding-block: 100px;

}



.section .about-us {

	gap: 30px;

}



.section-about {

	background-color: var(--white);

}



.section .about-us > div {

	flex: 0 0 50%;

}



.president-signature {

	width: min(40%, 230px);

}



.president-photo {

	width: 50%;

}



.president-text {

	padding-left: clamp(80px, 16vw, 300px);

	padding-block: 50px;

}



.carousel-section {

	padding: 100px 0;

	background-color: var(--white);

}



.team-box {

	position: relative;

	display: flex;

	flex-direction: column;

	align-items: stretch;

	height: 100%;

}



.team-box p {

	font-size: 14px;

}



.team-info {

	padding: 32px 20px;

	background-color: var(--primary);

	height: 100%;

	border-color: var(--primary) !important;

}





.team-text {

	max-height: 0px;

	overflow: hidden;

	transition: max-height 0.3s ease;

}



.team-box:hover .team-text {

	max-height: 200px;

}



.team-name {

	width: 100%;

	color: var(--white);

	text-align: center;

	display: flex;

	justify-content: center;

	flex-direction: column;

	align-items: center;



	z-index: 3;

	transition: color .2s ease, background-color .2s ease;

}



.team-name p {

	z-index: 3;

}





.team-name .name {

	font-size: 20px;

	font-weight: 600;

}



.team-name .title {

	font-size: 18px;

}



.view-more-btn {

	transition: color .2s ease;

	position: absolute;

	top: 16px;

	right: 16px;

}



.team-social-icon {

	display: inline-block;

	width: 50px;

	height: 50px;

	border-radius: 500px;

	background-color: var(--white);

	border: 1px solid var(--line-color);

	color: var(--grey-4);

	transition: color .2s ease, border-color .2s ease;

	font-size: 24px;

	display: flex;

	justify-content: center;

	align-items: center;

}



.view-more-btn:hover .team-social-icon {

	color: var(--primary);

	border-color: var(--primary);

}



.view-more-btn:hover {

	color: var(--primary);

}



.team-box .modal-body h3 {

	font-size: 18px;

}



.team-box .modal-body p {

	font-size: 14px;

}



.team-member-img {

	width: 120px;

	height: 120px;

	overflow: hidden;

}



@media (min-width: 768px) {

	.team-box .modal-body h3 {

		font-size: 24px;

	}



	.team-box .modal-body p {

		font-size: 18px;

	}



	.team-member-img {

		width: 200px;

		height: 200px;

	}

}



@media (min-width: 992px) {

	.team-name {

		width: 100%;

		color: var(--black);

		text-align: center;

		display: flex;

		justify-content: center;

		flex-direction: column;

		align-items: center;

		z-index: 3;

		transition: color .2s ease, background-color .2s ease;

	}



	.team-info {

		background-color: var(--white);

		border-color: var(--line-color) !important; 

		transition: background-color .2s ease;

	}

	

	.team-name p {

		z-index: 3;

	}

	

	.team-box:hover {

		background-color: var(--primary);

	}



	.team-box:hover .team-info {

		background-color: var(--primary);

		border-color: var(--primary) !important;

	}

	

	.team-box:hover .team-name {

		color: var(--white);

	}

	

}



@media only screen and (max-width: 1440px) {

	.section {

		padding-inline: clamp(100px, 6vw, 200px);

		padding-block: 80px;

	}



	.president-text {

		padding-left: clamp(50px, 6vw, 80px);

	}

}



@media only screen and (max-width: 1280px) {

	.section {

		padding-inline: clamp(24px, 6vw, 100px);

		padding-block: 50px;

	}



	.president-text {

		padding-left: clamp(24px, 6vw, 100px);

	}



	.section .about-us {

		gap: 50px;

	}



	.carousel-section {

		padding: 50px 0;

		background-color: var(--white);

	}

}



@media only screen and (max-width: 992px) {

	.section .about-us {

		gap: 20px;

	}



	.president-section {

		background-image: none;

	}

	

}



@media only screen and (max-width: 768px) {

	.about-us img {

		width: min(100%, 450px);

	}



	.section-text {

		color: var(--grey);

	}



	.section {

		padding-inline: 16px;

		padding-block: 36px;

	}



	.president-text {

		padding-inline: 16px;

	}



	.president-photo {

		width: 100%;

	}



	.carousel-section {

		padding: 36px 0;

		background-color: var(--white);

	}

}