@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/***Custom Proprties, Update for your own designs**/
:root {
	--ff-primary: 'Raleway', sans-serif;

	--ff-secondary: 'Trenda Roboto' 'Source Code Pro', monospace, sans-serif;

	--fw-reg: 300;
	--fw-bold: 700;

	--clr-light: #fcfdfa;
	--clr-dark: #040404;
	--clr-grey: #707070;
	--clr-btn-blue: #0022a3;
	--clr-heading-blue: #0022a3;
	--clr-heading-pur: #21155d;

	--fs-h1: 2rem;
	--fs-h2: 2.25rem;
	--fs-h3: 1.25rem;
	--fs-body: 1rem;
}

/***General Styles**/

html {
	scroll-behavior: smooth;
}

body {
	background: #fff;
	color: var(--clr-dark);
	margin: 0;
	font-family: var(--ff-primary);
	font-size: var(--fs-body);
	line-height: 1.6;
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

.btn-primary {
	background: var(--clr-btn-blue);
	padding: 10px 30px;
	/* font-size: 12px; */
}

.btn-primary__header {
	background: var(--clr-btn-blue);
	padding: 10px 30px;
	color: #fff;
	font-size: 12px;
}

.btn-secondary {
	background: var(--clr-light);
	color: var(--clr-btn-blue);
	border-color: var(--clr-btn-blue);
	padding: 10px 20px;
}

.btn-container {
	width: 320px;
	justify-content: space-between;
}

/* ------------- Get All Trainings -------------------------------- */

.trainings-sub-heading {
	display: flex;
	justify-content: center;
	width: 700px;
	margin: 0 auto;
	font-weight: 700;
	color: var(--clr-heading-blue);
}

.header-logo img {
	width: 80px;
}

ul {
	list-style: none;
}

nav ul li {
	display: inline-block;
	margin-right: 20px;
	color: var(--clr-grey);
}

.login-link,
nav a {
	color: var(--clr-grey);
}

.hero-section {
	background-image: url('../assets/hero-bg.png');
	height: 100%;
	width: 100%;
	align-items: center;
	text-align: center;
	padding-bottom: 30px;
	margin-top: 30px;
}

.hero-section span {
	color: #3d55b0;
}

.hero-text {
	max-width: 500px;

	color: var(--clr-grey);
	/* font-size: 1.2rem; */
}

h1 {
	font-family: var(--ff-primary);
	/* font-size: var(--fs-h1); */
	font-weight: var(--fw-bold);
}

p {
	font-size: 1rem;
}

.product {
	height: 500px;
}

.accordion-container {
	position: relative;
	background: #252d4b;
	padding: 40px;
}

.trainings-btn_container {
	margin-top: 30px;
}

.accordion-item {
	width: 100%;
	background: inherit;
	color: #fff;
}

.dashboard-img {
	background: #364c9e;
}

/* --------------------------See More------------------------ */
.see-more {
	height: 100%;
	width: 100%;
	position: relative;
	background: #d4e4fc;
	margin-top: -150px;
	z-index: -100;
	padding-bottom: 40px;
}

.wave {
	position: relative;
	top: 0%;
	left: 0;
	right: 0;
}

.see-more__bg {
	padding: 10px;
}

.see-more__bg > div {
	border-radius: 20px;
	background: #fff;
}

.see-more__img-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	/* height: 600px; */
	border-radius: 20px;
	background: #fff;
	background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)),
		url('../assets/see_more.png');
	background-position: center;
	background-repeat: no-repeat;
}

.see-more__text {
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
	width: 600px;
	height: 200px;
	background: #fff;
	border-radius: 10px;
	padding: 30px;
}

.see-more__play-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
	background: var(--clr-btn-blue);
}

.see-more__play-btn > div {
	width: 0px;
	height: 0px;
	border-top: 13px solid transparent;
	border-left: 20px solid #fff;
	border-bottom: 13px solid transparent;
	/* UI Properties */
	/* background: #ffffff 0% 0% no-repeat padding-box;
  opacity: 1; */
}

.see-more__text-heading {
	font-size: var(--fs-h3);
	color: #21155d;
	font-weight: 600;
}

/* -------------------------Document------------------ */
.document h2 {
	/* font-size: var(--fs-h2); */
	margin-top: 40px;
	line-height: 1.1;
	font-weight: var(--fw-bold);
	color: var(--clr-heading-pur);
}

.smiley {
	margin-left: -35px;
}

.document h5 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: -30px;
}

.document p,
.document h6 {
	color: var(--clr-dark);
	font-size: 0.9rem;
	font-weight: 500;
}

.document h6 {
	font-size: 0.9rem;
}

.insight h3 {
	font-size: 2.4rem;
	font-weight: bold;
}

/* ------------Instructors------------------ */

.instructors-list {
	display: flex;
	margin-top: 40px;
}
.instructors-list-container {
	display: flex;
	overflow: scroll;
	/* scroll-behavior: smooth; */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.instructors-list-container::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.instructors-list-container {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.instructor-container {
	margin-left: 30px;
}
.instructor-list {
	margin-top: 50px;
}
.instructor-list .swiper-slide img {
	/* width: 100%; */
	overflow: hidden;
	border-radius: 5px;
	width: 100%;
}
.instructor-list .instructor-text h5 {
	margin-top: 15px;
	font-size: 16px;
	text-align: center;
}

.instructor-list .instructor-text p {
	margin-top: 8px;
	font-size: 14px;
	text-align: center;
	margin-bottom: 0;
}

.similar-header h2 {
	/* font-size: var(--fs-h2); */
	font-weight: var(--fw-bold);
	color: var(--clr-heading-blue);
}

.similar-header h6 {
	font-size: 1.2rem;
}

/* -----------------Plans----------------------- */
.plans {
	width: 100%;
	/* padding: 100px; */
	/* text-align: center; */
}

.plans-container {
	margin: 0 !important;
}

.plan-card {
	background: #011f57;
	color: #fff;
	border-radius: 5px;
}

.plans-type {
	color: #ffe3b8;
	font-weight: bold;
}

.plans-text {
	text-align: center;
	line-height: 1.2;
	color: #fffefe;
	opacity: 0.8;
}

.btn-card {
	background: inherit;
	color: #fffefe;
	border-color: #fffefe;
	opacity: 0.8;
	/* padding: 5px 20px; */
	width: 100%;
}

.plans input {
	border-radius: 5px;
	border: 1px solid #fffefe;
	background: inherit;
	width: 100%;
}

/* ---------------Testimonials------------------------------- */

.testimonial {
	position: relative;
	z-index: 100;
}

.testimonial h2 {
	max-width: 400px;
	color: var(--clr-heading-blue);
	/* font-size: var(--fs-h2); */
	font-weight: var(--fw-bold);
}

.testimonial-card {
	/* border: 20px solid #f4f4f4; */
	background: #f4f4f4;
	border-radius: 10px;
	padding: 20px 30px;
}

.testimonial-card__content {
	background: #fff;
	border-radius: 10px;
}

.testimonial-card__content p {
	font-size: 0.9rem;
}

.testimonial-testifier {
	font-size: 1.2rem;
	font-weight: 600;
	color: #042b74;
}

.carousel-control-prev,
.carousel-control-next {
	position: relative !important;
	width: 60px;
	left: 35%;
	right: 35%;
	margin-right: 30px;
}

/* ---------------FAQ-------------------------- */
.faq {
	width: 100%;
	/* height: 100vh; */
	background: #252d4b;
	color: #fff;
	position: relative;
}

.faq__wave {
	position: relative;
	top: -35%;
	left: 0;
	right: 0;
}

.faq-contents .faq-header {
	/* font-size: var(--fs-h2); */
	font-weight: var(--fw-bold);
}

.develop-staff {
	padding-top: 30px;
	padding-bottom: 30px;
	color: #fff;
	text-align: center;
}

.develop-staff__bg {
	position: relative;
	width: 100%;
	/* height: 400px; */
	padding: 30px;
	background: #182c77;
	background-image: url('../assets/develop-staff.png');
	border-radius: 20px;
}

.button-container .btn-started {
	padding-left: 38px;
	padding-right: 38px;
}

.btn-get-started {
	background: #fff;
	color: #182c77;
	font-weight: 600;
}

.btn-book-demo {
	background: inherit;
	color: #fff;
	border: 1px solid #fff;
	font-weight: 600;
}

.footer {
	background: #f1f3fb;
	/* text-align: center; */
}

/* Success icon */

/* .see-more__img-container div {
  width: 100%;
  border: 30px solid #fff;
  background: #fff;
  border-radius: 20px;
}

.see-more__img-container img {
  width: 100%;
  opacity: 1;
} */

@media (min-width: 1000px) {
	:root {
		--fs-h1: 4.5rem;
		--fs-h2: 2.5rem;
		--fs-h3: 1.5rem;
		--fs-body: 1.125rem;
	}

	.btn-primary__header {
		font-size: 14px;
	}

	.header {
		height: 110vh;
	}

	.header-logo img {
		width: 140px;
	}

	.hero-section {
		height: 80vh;
		text-align: left;
		margin-top: 0;
	}

	h1 {
		font-size: var(--fs-h1);
	}

	p {
		font-size: 1.2rem;
	}

	.hero-text {
		font-size: 1.2rem;
	}

	.trainings-sub-heading {
		font-size: var(--fs-h2);
	}

	.product {
		height: 100vh;
		width: 100%;
	}

	.see-more__img-container {
		height: 600px;
	}

	.see-more__bg > div {
		padding: 30px;
	}

	.see-more__bg {
		padding: 60px;
	}

	.document h2 {
		font-size: var(--fs-h2);
		margin-top: 0px;
		line-height: 1;
		font-weight: var(--fw-bold);
		color: var(--clr-heading-pur);
	}

	.document p,
	.document h6 {
		font-size: 1rem;
	}

	.trainings-btn_container {
		position: absolute;
		bottom: 30px;
		margin-top: 0;
	}

	.similar-header {
		text-align: center;
	}

	.similar-header h2 {
		font-size: var(--fs-h2);
	}

	.instructors__header {
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.plans {
		text-align: center;
	}

	.plans-header {
		transform: translate(55%, 0);
		width: 550px;
	}

	.testimonial h2 {
		font-size: var(--fs-h2);
	}

	.testimonial-card__content p {
		font-size: 1rem;
	}

	.carousel-control-prev,
	.carousel-control-next {
		left: 40%;
		right: 40%;
		/* margin-right: 0px; */
	}

	.faq {
		width: 100%;
		height: 100vh;
		background: #252d4b;
		color: #fff;
		position: relative;
	}

	.faq-contents {
		position: absolute;
		top: 30%;
		left: 20%;
		right: 20%;
	}

	.faq-contents .faq-header {
		font-size: var(--fs-h2);
	}

	.develop-staff {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.develop-staff__bg {
		height: 400px;
		padding: 70px;
	}

	.button-container {
		position: absolute;
		text-align: center;
		bottom: 20%;
		left: 30%;
		right: 30%;
	}

	nav ul li {
		margin-right: 20px;
	}
}

@media (max-width: 1000px) {
	.container,
	.container-md,
	.container-sm {
		max-width: 900px;
	}
}

@media (max-width: 770px) {
	.container,
	.container-md,
	.container-sm {
		max-width: 600px;
	}
}