@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

:root {
	--prime: #41807c;
	--second: white;
	--bg-light: #5ea6a1;
	--bg-yellow: #f1c50e;
	--bg-black: #1e1e1e;
}
/* general css */
* {
	
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-family: "Poppins", sans-serif;

}
html {
	font-size: 62.5%;
}
.bg-prime {
	background-color: var(--prime);
	position: relative;
}

body {
	font-size: 1.6rem;
}
main{
	margin-top: 15rem;
}
p {
	font-size: 1.8rem;
}
h1 {
	font-size: 7rem;
}
h2 {
	font-size: 4.5rem;
}
h3 {
	font-size: 4rem;
}
h4 {
	font-size: 3rem;
}
h5 {
	font-size: 2rem;
}
h6 {
	font-size: 1rem;
}
section {
	/* min-height: 100vh; */
	margin: 4rem 0;
}

.logo-img {
	display: inline-block;
	height: 10rem;
}

.design-1 {
	position: absolute;
	top: -1rem;
	left: 25rem;
}

.design-2 {
	position: absolute;
	bottom: -1rem;
	right: 25rem;
}

.sub-con {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.btn-prime {
	border-radius: 50px;
	color: var(--second);
	background-color: var(--bg-yellow);
	padding: 10px;
	box-shadow: 3px 4px 0px 0.5px var(--prime);
	border: none;
	padding: 0.8rem 3rem;
	font-size: 2rem;
	font-weight: bold;
	margin-left: 2rem;
}
.btn-prime:hover {
	background-color: var(--prime);
	box-shadow: 3px 4px 0px 0.5px var(--bg-yellow);
	transition: all 0.3s;
}

.btn-prime a {
	text-decoration: none;
	color: white;
}

.btn-yellow {
	background-color: var(--bg-yellow);
	border-radius: 50px;
	border: none;
	margin-top: 10px;
	padding: 1rem 2rem;
}
.btn-yellow a{
	/* padding: 10px; */
	color: var(--bg-black);
	font-size: 2rem;
	font-weight: bolder;
	text-decoration: none;
}
.btn-yellow:hover{
	/* background-color: var(--bg-); */
	box-shadow: 2px 2px 3px 2px black;
}

.text-prime {
	color: var(--prime);
}
.white-card {
	background-color: white;
	border-radius: 1rem;
	padding: 5rem;
	margin: 5rem 10rem;
	/* border-radius:10px; */
}
.dark-card {
	background-color: white;
	border-radius: 1rem;
	padding: 10rem;
	margin: 5rem 10rem;
	/* border-radius:10px; */
}

/* navbar */
.nav-item {
	margin: 0 1rem;
}
nav a {
	font-size: 2rem;
	font-weight: 500;
	color: var(--bg-light);
}
nav a:hover {
	color: var(--prime);
}

/* hero section css */
.rounds-upper{
	width: 22rem;
	position: absolute;
	top: -6rem;
	left: -11rem;
}
.rounds-lower{
	width: 22rem;
    position: absolute;
    bottom: -6rem;
    right: -11rem;
}
.slider {
	margin: 3rem;
	width: 80%;
}
.w_75 {
	width: 75%;
}
.cr-border {
	box-shadow: 0 0 0 2rem #ecf2f1, 0 0 0 4rem #c6d8d7, 0 0 0 6rem #a0bfbd,
		0 0 1rem 8rem #7aa6a3;

	border-radius: 1rem;
}
.cr-img {
	height: 30vw;
	object-fit: cover;
	border-radius: 1rem;
}
.slider-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	transform: scale(1.24);
}
/* about section css start from here */
.ab-2 {
	margin: 4rem 0;
}


.ab-1 .trainer-content {
	margin-left: 3rem;
	width: 60%;
	/* padding: 3rem 0; */
	/* width: 70%; */
}
.ab-2 .trainer-content {
	/* margin-right: 2rem; */
}
.trainer-content h2 {
	/* line-height: 1rem; */
	/* margin-bottom: 3rem; */
	color: black;
	margin-bottom: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5rem;

}
.trainer__hr {
	border: 1px solid #41807c;
	margin: 4rem 0;
	border-radius: 1rem;
}

.trainer-heading {
	font-size: 3.5rem;
	/* padding: 1.5rem; */
	color: black;
	border-bottom: 3px solid white;
}

.trainer-text {
	font-size: 2rem;
	/* padding: 1.5rem; */
	color: white;
}

.trainer-img {
	display: inline-block;
	height: 35rem;
	width: min(30rem,40%);
	border-radius: 1rem;
	object-fit: cover;
	/* margin: 3rem; */
}

.trainer__box {
	margin-bottom: 5rem;
	padding: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; 
}
.trainer__btn{
	display: flex;
	justify-content: center;
}
.trainer__btn button{
	font-weight: 800;
	font-size: 2.5rem;
	/* color: var(--prime); */

}
/* testimonials */
.experts {
	background-color: var(--prime);
}
.experts h2 {
	font-size: 5rem;
	border-bottom: 0.5rem solid white;
	margin-bottom: 3rem;
	/* padding: 1rem; */
}
.profile-pic {
	border-radius: 50%;
	width: 10rem;
	height: 10rem;
	object-fit: cover;
	border: 0.7rem solid white;
	margin-right: 1rem;
}
.testimonial-cards {
	/* width: 70%; */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.expert-card {
	flex-basis: 30%;
	max-width: 300px;
	border-radius: 10%;
	padding: 2.5rem;
	color: var(--second);
	margin: 1rem;
}
.expert-card p {
	font-size: 1.6rem;
}
.expert-card .name {
	font-size: 2.5rem;
}
.msg {
	font-size: 1.5rem;
}
.center {
	display: flex;
	align-items: center;
	/* justify-content: center; */
}
.expert-card:first-child,
.testimon-slider .carousel-item:nth-child(1).expert-card {
	background-color: var(--bg-black);
}
.expert-card:nth-child(3n + 2),
.testimon-slider .carousel-item:nth-child(2) .expert-card {
	background-color: var(--bg-yellow);
}
.expert-card:nth-child(3n + 3),
.testimon-slider .carousel-item:nth-child(3) .expert-card {
	background-color: var(--bg-light);
}
.name {
	font-size: 3rem;
	font-weight: bolder;
}
.desig {
	font-size: 2.5rem;
	opacity: 0.7;
}
.carousel-indicators {
	position: relative;
}
.carousel-indicators li {
	height: 2rem;
	width: 2rem;
	border-radius: 50%;
	margin: 0 1rem;
}
.testimon-slider {
	display: none;
}
/* carousel indicator with different colors*/
/* .carousel-indicators li:nth-child(1){
    background-color: var(--bg-black);
}
.carousel-indicators li:nth-child(2){
    background-color: var(--bg-yellow);
}
.carousel-indicators li:nth-child(3){
    background-color: var(--bg-light);
}
.carousel-indicators li:nth-child(1).active{
    background-color: var(--bg-black);
}
.carousel-indicators li:nth-child(2).active{
    background-color: var(--bg-yellow);

}   
.carousel-indicators li:nth-child(3).active {
  background-color: var(--bg-light); 
} */

/* contact form css */
.contact {
	justify-content: space-between;
}
.contact-text__heading {
	margin-bottom: 3rem;
	font-weight: 700;
	font-size: 4.5rem;
}
.contact-text__info {
	font-size: 2.5rem;
}
.contact-form {
	background-color: var(--bg-light);
	border-radius: 3rem;
	padding: 4rem;
	width: 40%;
	/* width: 50%; */
}
.contact input,
.contact textarea {
	background-color: white;
	border: none;
	margin: 1rem 0;
	font-size: 2rem;
	border-radius: 3rem;
	padding: 1.5rem;
}
.contact input,
.contact textarea:focus-visible {
	/* border: 0.5rem solid var(--prime); */
	border: none;
}
input[type="checkbox"] {
	appearance: none;
	border-radius: 0.5rem;
	border: var(--bg-light);
	background-color: #ffffff;
	width: 1rem;
	height: 1rem;
	position: relative;
}
input[type="checkbox"]:checked {
	background-color: var(--prime);
	box-sizing: border-box;
	box-shadow: inset 0px 0px 0 3px #c6d8d7;
	color: #c6d8d7;
}
input[type="checkbox"]:checked::before {
	/* Custom style for checked state */
	content: "\2713"; /* Unicode for checkmark */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	font-weight: bold;
	color: white;
}
.form-tc a {
	color: #235451;
}
.form-tc span {
	margin: 0 1rem;
}
.form-tc {
	display: flex;
	font-size: 2rem;
	align-items: center;
	/* justify-content: center; */
	color: white;
}

.contact-text {
	padding-right: 2rem;
}



/* trainer section  */
.trainer__top{
	color: white;
	margin-bottom: 5rem;
}
.trainer__top h1{
	border-bottom: 1rem solid black;
	display: inline-block;
	margin-bottom: 3rem;
	
}
.container-text{
	text-align: left;
}
.container-list_item {
	padding: 0.5rem 0;
	display: flex;
}
.container-icon {
	height: 3rem;
	display: inline-block;
}
.container-list_text {
	display: inline-block;
	font-size: 1.8rem;
	margin-left: 2rem;
	color: white;
}
.container-list {
 list-style: none;
}
