/* =================base */
@font-face {
	font-family: "Poppins";
	src: url(../fonts/Poppins-Regular.ttf) format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Sen";
	src: url(../fonts/Sen-VariableFont_wght.ttf) format("truetype");
	font-weight: 100 900;
	font-style: normal;
}

:root {
	--color1: #fff;
	--color2: #2f3a3b;
	--color3: #494949;
	--color4: #1ebfc1;
	--color5: #fffcf4;
	--color6: #767e7e;
	--color7: #fff;

	--font1: "Poppins", sans-serif;
	--font2: "Sen", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	font-family: var(--font1);
	line-height: normal;
}

/* ===============common */

a {
	text-decoration: none;
}

.btn {
	width: 108px;
	height: 48px;
	border-radius: 6px;
	border: 1px solid var(--color4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn:hover {
	cursor: pointer;
	opacity: 0.9;
}

.main-content {
	width: 1170px;
	max-width: calc(100% - 48px);
	margin: 0 auto;
}

.heading-lv2 {
	color: #0d1111;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.34;
}

.title {
	color: #0d1111;
	font-size: 10px;
	font-weight: 500;
}

.desc {
	color: #9da6a5;
	font-size: 18px;
	line-height: 1.78;
}

/* ===============header */
.header {
	background: var(--color5);
}

.header .body {
	padding-top: 55px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 5px;
}

.header .logo {
	width: 127px;
	height: 37px;
}

.header .nav ul {
	display: flex;
	gap: 39px;
}

.header .nav a {
	color: var(--color2);
}

.header .nav a:hover {
	font-weight: 600;
}

.header .action {
	display: flex;
	align-items: center;
}

.header .action .sign-in {
	color: var(--color3);
}

.header .action .sign-in:hover {
	font-weight: 600;
}

.header .action .btn-sign-up {
	margin-left: 12px;
	color: var(--color4);
}

.header .action .btn-sign-up:hover {
	color: var(--color1);
	background: var(--color4);
}

.header.fixed {
	position: sticky;
	top: -50px;
	z-index: 1;
}

main {
	background: var(--color5);
}

/* ==================hero */
.hero {
	padding-top: 45px;
	padding-bottom: 79px;
	/* background: var(--color5); */
}

.hero .body {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero .hero-sumary {
	/* width: 40%; */
}

.hero .title {
	color: var(--color6);
	font-size: 14px;
}

.hero .heading-lv2 {
	margin-top: 18px;
	color: #0d1111;
	font-size: 6.2rem;
	font-weight: 700;
	line-height: 1.16;
}

.hero .desc {
	margin-top: 46px;
}

.hero .action {
	margin-top: 52px;
	display: flex;
	align-items: center;
}

.hero .get-started {
	width: 186px;
	height: 68px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	background: var(--color4);
}

.hero .watch-video {
	margin-left: 50px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0px 22px 50px 0px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero .media-block {
	padding-left: 40px;
	position: relative;
}

.hero .img {
	width: 576px;
	height: 631px;
	object-fit: cover;
}

/* info 1 */

.hero .info {
	border-radius: 24px;
	background: #fff;
	box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.05);
	position: absolute;
}

.hero .info1 {
	width: 157px;
	height: 75px;
	left: 0;
	top: 149px;
}

.hero .stats {
	margin: 17px 25px 18px;
	display: flex;
	position: relative;
}

.hero .stats .book2 {
	position: absolute;
	left: 4px;
	bottom: 8px;
}

.hero .title1 {
	display: inline-block;
	margin-left: 18px;
}

/* info 2 */

.hero .info2 {
	width: 124px;
	height: 132px;
	left: 0;
	bottom: 46px;
}

.hero .schedule {
	margin: 0px 25px 23px;
}

.hero .title2 {
	text-align: center;
	margin-top: 16px;
}

.hero .schedule .group4 {
	width: 26px;
	height: 6px;
	border-radius: 99px;
	background: #edf1f5;
}

.hero .schedule .group {
	margin: 0 auto;
}

/* info 3 */

.hero .info3 {
	width: 207px;
	height: 90px;
	right: 45px;
	bottom: 41px;
	padding-left: 35px;
}

.hero .img-student {
	width: 33px;
	height: 33px;
	border-radius: 50%;
	object-fit: cover;
	margin-top: 8px;
	margin-left: -7px;
}

.hero .img-student:first-child {
	margin-left: 0;
}

.hero .student {
	display: flex;
}

.hero .stats-2 {
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: #1ebfc1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	margin-top: 8px;
	margin-left: -7px;
}

.hero .title3 {
	display: inline-block;
	margin-top: 17px;
	margin-left: 0;
}

/* ==============features */

.body-feature {
	padding: 65px 0;
	margin-right: 146px;
}

.features .top-title {
	color: #767e7e;
	font-size: 12px;
	font-weight: 700;
}

.features .heading-lv2 {
	margin-top: 18px;
	width: 577px;
	height: 112px;
}

.features .desc {
	margin-top: 18px;
	width: 590px;
}

.features .feature-list {
	margin-top: 80px;
	display: flex;
	gap: 200px;
}

.features .icon-title {
	margin-top: 26px;
	color: #0d1111;
	font-size: 20px;
	font-weight: 600;
}

.features .icon-desc {
	margin-top: 16px;
	color: #9da6a5;
	line-height: 1.69;
}

/* ==============courses */

.courses .body {
	padding: 65px 0 189px;
}

.courses .heading-lv2 {
	margin-top: 18px;
}

.courses .row-top {
	margin-top: 19px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.courses .desc {
	width: 525px;
}

.courses .all-courses {
	color: #1ebfc1;
	font-size: 14px;
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

/* item 1 */

.courses .course-list {
	display: flex;
	margin-top: 79px;
	justify-content: space-between;
}

.courses .course-item {
	position: relative;
}

.courses .thumb {
	width: 359px;
	height: 393px;
	object-fit: cover;
	border-radius: 8px;
	opacity: 0.7;
}

.courses .course-detail {
	width: 325px;
	height: 195px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0px 16px 90px 0px rgba(0, 0, 0, 0.05);
	position: absolute;
	left: 17px;
	top: 322px;
}

.courses .wrap-item {
	margin: 18px 25px 29px;
}

.courses .cost {
	margin-top: 16px;
	color: #767e7e;
	font-size: 16px;
}

.courses .cost span,
.courses .heading-lv3 {
	color: #0d1111;
	font-size: 22px;
	font-weight: 700;
}

.courses .desc {
	margin-top: 6px;
	font-size: 14px;
}

.courses .static span {
	color: #9da6a5;
	font-size: 14px;
	margin-top: 18px;
}

.courses .static span::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1ebfc1;
	margin: 0 10px 2px;
}

/* =====================countdown */

.countdown .body {
	padding: 65px 154px;
	margin-top: 135px;
}

.countdown .countdown-list {
	display: flex;
	justify-content: space-between;
}

.countdown .static {
	color: #0d1111;
	font-size: 62px;
	font-weight: 700;
}

.countdown .desc {
	margin-top: 11px;
}

/* ======================feedback */

/* left */
.feedback .body {
	padding: 65px 0;
	margin-top: 134px;
	display: flex;
	gap: 72px;
}

.feedback .feeedback-info {
	width: 420px;
}

.feedback .comment {
	margin-top: 27px;
	color: #5d6564;
	font-size: 32px;
	line-height: 1.5;
}

.feedback .desc {
	margin-top: 33px;
}

.feedback .desc strong {
	color: #070707;
	font-size: 16px;
	font-weight: 600;
}

.feedback .desc strong::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 2px;
	background: #070707;
	margin-right: 5px;
	margin-bottom: 5px;
}

.feedback .feedback-cta {
	margin-top: 52px;
	display: flex;
	gap: 30px;
}

.feedback .btn-cta {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #2ac9bf;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feedback .btn-cta:hover {
	opacity: 0.9;
	cursor: pointer;
}

/* right */

.feedback .feedback-img {
	position: relative;
}

.feedback .ava-fb {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	object-fit: cover;
	position: absolute;
}

.feedback .ava-fb-1 {
	top: 258px;
}

.feedback .ava-fb-2 {
	left: 212px;
	top: 403px;
}

.feedback .ava-fb-3 {
	left: 569px;
	top: 374px;
}

.feedback .ava-fb-4 {
	width: 92px;
	height: 92px;
	left: 114px;
	top: -37px;
}

.feedback .ava-fb-5 {
	width: 110px;
	height: 110px;
	top: -18px;
	left: 569px;
}

.feedback .ava-fb-6 {
	width: 235px;
	height: 235px;
	left: 273px;
	top: 117px;
}

/* =========================admit */
.admit {
	background: #def6f5;
}
.admit .body {
	padding: 76px 0 88px;
	margin-top: 65px;
	display: flex;
	align-items: center;
	gap: 410px;
}

.admit .desc {
	margin-top: 18px;
}

.admit .btn {
	width: 186px;
	height: 68px;
	background: #2ac9bf;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
}

/* ========================footer */

.footer .body {
	padding: 130px 0 50px;
}

.footer .row-top {
	display: flex;
	justify-content: space-between;
}

.footer .title {
	color: #2e2e2e;
	font-size: 18px;
	font-weight: 600;
}

.footer .list a {
	display: inline-block;
	margin-top: 25px;
	color: #535353;
	font-size: 16px;
}

.footer .list .social-icon {
	margin-right: 13px;
}

/* copyright */

.cpr-block .copyright {
	padding-top: 80px;
	text-align: center;
	color: #b0b5b4;
	font-size: 18px;
}