:root {
	--page-wrapper: 1.25rem;
	--banner-highlight-wrapper: 1.25rem;
}

html,
body {
	font-size: 12px;
}

img {
	user-drag: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

.page-wrapper .section a{
	color: red;
}

/* Layout */
.page-wrapper {
	padding: 0;
	padding-left: var(--page-wrapper);
	padding-right: var(--page-wrapper);
}

.home-page,
.courses-page,
.contact-us-page {
	.container {
		padding-left: var(--page-wrapper);
		padding-right: var(--page-wrapper);
		max-width: 1440px;
	}
}


/* Font */
.semi-bold {
	font-weight: 600;
}

/* Margin */
.mb-0 {
	margin-bottom: 0 !important;
}

/* Header */
/* header.navigation {
	position: relative;
	padding: 0;

	nav {
		flex-wrap: nowrap;

		.mobile-nav-button {
			margin-left: 0;

			@media (min-width: 992px) {
				display: block;
			}

			@media (min-width: 1200px) {
				display: none;
			}
		}

		.nav-logo {
			.top-bar {
				height: 35%;
				margin-top: -4%;
			}
		}

		ul.nav-menu {
			display: none;

			@media (min-width: 1200px) {
				display: block;
			}

			li {
				a {
					font-size: 1.25rem;
				}
			}
		}

		.nav-member {
			.btn-signup {
				display: none;
			}
		}
	}

	.sidenav-mobile {
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);

		ul.sidenav-menu {
			margin: 0;

			.logo-sidenav {
				height: 56px;

				a {
					font-size: 18px;
				}
			}

			li.menu-item {
				border-bottom: 1px solid #9E9E9E;
			}

			li.menu-item:last-child {
				border-bottom: none;
			}
		}
	}
} */

/* Navbar */
header {
	position: relative;
	/* padding: 0.875em 0; */
}

header.navigation {
	padding: 0;
}

header.navigation nav {
	margin: 0.625em 0;
}

/* header .page-wrapper {
	padding: 0 8.625rem;
} */
nav .brand-logo {
	position: relative;
	float: left;
}

nav .main-navigator {
	margin-left: 2rem;
}

nav .top-bar {
	/* height: 40%; */
	height: 60%;
}

nav.nav-top-bar {
	position: relative;
	z-index: 9999;
}

nav.nav-top-bar,
header.navigation {
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	-webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

header.navigation.program-header {
	position: absolute;
	box-shadow: none;
	-webkit-box-shadow: none;
}

header.navigation {
	& nav {
		& .mobile-nav-button {
			@media (min-width: 992px) {
				display: block;
			}

			@media (min-width: 1200px) {
				display: none;
			}
		}
		
		& .hide-on-mobile {
			display: none;
		
			@media (min-width: 1200px) {
				display: block;
			}
		}
		

		ul.nav-menu {
			display: none;

			@media (min-width: 1200px) {
				display: block;
			}
		}
	}
}

.navigation {
	background: rgba(255, 255, 255, 0) !important;
	padding: 0 0.25em 0 !important;
	position: sticky !important;
	margin-top: -64px;
	transition: 300ms ease-in-out;
}

.navigation .nav-wrapper {
	background: none;
}

.navigation.scrolled {
	background: rgba(255, 255, 255, 0.9) !important;
}

.main {
	height: auto;
}

.nav-logo {
	height: inherit;
}

.top-bar {
	height: 40%;
	vertical-align: middle;
}

.nav-member .user-avatar {
	width: 36px;
	height: 36px;
	object-fit: cover;
	object-position: center center;
	border-radius: 100%;
	border: 2px solid white;
}

header .nav-logo .top-bar {
	/* height: 60%; */
	margin-top: -10px;
}

header .nav-menu {
	margin: 0 5em;
}

header.program-header {
	margin-top: 0;
	background: white !important;
	position: sticky;
}

.fixed {
	position: fixed;
}

/* .user-avatar {
	width: 36px;
	height: 36px;
	object-fit: cover;
	object-position: center center;
	border-radius: 100%;
	border: 2px solid white;
} */

/* Sidenav Mobile */
.sidenav .nav-close i {
	position: relative;
	top: 10px;
	right: 10px;
}

.sidenav li.sidenav-item {
	border-bottom: 1px solid #BDBDBD;
}

.sidenav li.sidenav-item:last-child {
	border-bottom: 0;
}

/* Footer */
footer {
	#sitemap {
		padding: 0;
		padding: 2rem var(--page-wrapper);
		padding-top: 2.5rem;

		.content-address,
		.content-contact,
		.content-line-desc {
			font-size: 1.125rem;
		}

		.sitemap-menu {
			font-size: 1.125rem;

			li {
				padding: 0.125rem 0;
			}
		}

		.content-line-oa {
			width: 100%;
			max-width: 175px;
			float: left !important;
		}
	}

	.copyright {
		padding-top: 0.125rem;
		padding-bottom: 0.125rem;

		.footer-copyright {
			font-size: 0.75rem;
		}
	}
}

/* Splide */
.splide-highlight {
	.splide {
		.splide__track {
			.splide__list {
				.splide__slide {
					.splide-link {
						display: block;
						position: relative;

						img {
							display: block;
							height: auto;
						}

						.splide-content {
							width: 35%;
							position: absolute;
							top: 50%;
							left: 8%;
							transform: translateY(-50%);

							@media (min-width: 375px) {
								width: 50%;
							}

							@media (min-width: 768px) {
								top: 60%;
								width: 40%;
							}

							@media (min-width: 992px) {
								top: 60%;
								width: 40%;
							}

							@media (min-width: 1200px) {
								top: 50%;
								width: 33%;
							}

							@media (min-width: 1400px) {
								top: 50%;
								width: 35%;
							}

							@media (min-width: 1800px) {
								top: 50%;
								width: 30%;
							}

							.content-title {
								font-size: 1.125rem;
								line-height: 1.25;
								margin: 0;
								position: relative;

								@media (min-width: 425px) {
									font-size: 1.25rem;
								}

								@media (min-width: 768px) {
									font-size: 1.5rem;
								}

								@media (min-width: 992px) {
									font-size: 1.625rem;
								}

								@media (min-width: 1200px) {
									font-size: 2rem;
								}

								@media (min-width: 1400px) {
									font-size: 2.5rem;
									line-height: 1.25;
								}
							}

							.content-title::before {
								content: "";
								width: 20%;
								min-width: 2em;
								position: absolute;
								top: -0.625rem;
								left: 0;
								border-top: 4px solid red;

								@media (min-width: 425px) {
									top: -0.875rem;
								}

								@media (min-width: 992px) {
									border-top: 5px solid red;
								}

								@media (min-width: 1200px) {
									top: -1.125rem;
									border-top: 6px solid red;
								}
							}

							.content-brief {
								font-size: 1.25rem;
								line-height: 1.4;
								margin: 0;
								margin-top: 1rem;
								display: none;

								@media (min-width: 768px) {
									display: block;
									font-size: 1rem;
								}

								@media (min-width: 992px) {
									font-size: 1rem;
								}

								@media (min-width: 1200px) {
									font-size: 1.125rem;
								}

								@media (min-width: 1400px) {
									font-size: 1.25rem;
									line-height: 1.4;
								}
							}
						}
					}
				}
			}
		}

		.splide__arrows {
			.splide__arrow:focus {
				background-color: #CCCCCC;
			}
		}

		.splide__pagination {
			bottom: 0.5em;

			@media (min-width: 768px) {
				bottom: 1.5em;
			}

			.splide__pagination__page {
				margin: 6px;
			}

			.splide__pagination__page:focus {
				background: #CCCCCC;
			}

			.splide__pagination__page.is-active {
				background: red;
				opacity: 1;
				width: 30px;
				border-radius: 10px;
				transform: scale(1);

				@media (min-width: 768px) {
					transform: scale(1.2);
				}
			}
		}
	}
}

/* Banner */
.banner-highlight {
	position: relative;

	.carousel {
		position: relative;
		height: fit-content;

		.carousel-item {
			position: relative;

			.carousel-content {
				position: absolute;
				top: 25%;
				left: var(--banner-highlight-wrapper);
				right: 0;
				bottom: 0;
				z-index: 2;
				width: 50%;

				.carousel-title {
					margin: 0;
					position: relative;
					font-size: 1.875rem;
				}

				.carousel-title::before {
					content: "";
					width: 20%;
					min-width: 2em;
					position: absolute;
					top: -1.125rem;
					left: 0;
					border-top: 5px solid red;
				}

				.carousel-brief {
					font-size: 1.125rem;
				}
			}

			img {
				display: block;
				width: 100%;
				height: calc(100vh - 56px);
				object-fit: cover;
				object-position: top;
				aspect-ratio: 16 / 9;
			}
		}

		.banner-logo-brand {
			display: block;
		}
	}

	.banner-bottom {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		background: black;
		padding: 2.75rem var(--banner-highlight-wrapper);

		.banner-container {
			color: white;

			.banner-title {
				margin: 0;
				position: relative;
				margin-bottom: 1.625rem;
			}

			.banner-title::after {
				content: "";
				width: 12%;
				min-width: 2em;
				position: absolute;
				bottom: -0.75rem;
				left: 0;
				border-top: 3px solid red;
			}

			.banner-brief {
				font-size: 1.125rem;
				margin: 0;
				margin-top: 1rem;
			}
		}
	}

	.banner-element-monitor {
		display: none;
		position: absolute;
		right: var(--banner-highlight-wrapper);
		bottom: -2rem;
		z-index: 3;
		width: 500px;

		.banner-image {
			position: absolute;
			top: 1.125rem;
			left: 1.125rem;
			right: 1.125rem;
			border-radius: 4px;
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.banner-logo-brand {
		display: none;
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		height: 90px;
		width: 90px;
		background-image: url('//dinsoradvertising.com/public/img/logo/dinsor-24years-logo.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: bottom;
		z-index: 4;
	}
}

.banner-page-theme {
	position: relative;
	overflow: hidden;

	img {
		display: block;
		object-fit: cover;
		height: 150px;
	}

	.banner-content {
		position: absolute;
		/* top: 22%; */
		top: 20%;
		/* transform: translateY(-50%); */
		left: var(--page-wrapper);
		right: var(--page-wrapper);
		z-index: 3;
		/* width: 40%; */

		.banner-title {
			font-size: 1.625rem;
			margin: 0;
			position: relative;
			width: fit-content;
		}

		.banner-title::after {
			content: "";
			width: 20%;
			min-width: 4rem;
			position: absolute;
			bottom: -0.625rem;
			left: 0;
			border-top: 4px solid red;
		}

		.banner-brief {
			display: none;
			margin: 0;
			margin-top: 1.375rem;
			font-size: 1.125rem;
			line-height: 1.67;
		}
	}

	.bg-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 30%;
		z-index: 2;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0) 70%);
	}
}

/* Section */
.section-theme {
	padding: 2rem 0;

	.section-title {
		font-size: 1.625rem;
		margin-bottom: 1.375rem;
	}
}

.section-customers {
	.row {
		margin: 0 -0.75rem;

		.card-customer {
			margin: 1.625rem 0;
			text-align: center;

			img {
				width: auto;
				max-width: 100%;
				height: 35px;
				object-fit: contain;
			}

			.card-title {
				margin: 0.5rem 0;
				font-size: 0.875rem;
				color: #616161;
				height: calc(0.875rem * 1.5 * 1);
			}
		}
	}
}

.section-example-course {
	.program-course {
		margin: 0 -0.875rem;

		.splide__track {
			/* padding: 0 0.625rem !important; */

			ul.splide__list {
				li.splide__slide {
					padding: 2.25rem 0;
					padding-top: 1.25rem;
				}
			}
		}

		.splide__arrows {
			.splide__arrow {
				width: 2.5em;
				height: 2.5em;
				background: red;
				top: 100%;

				svg {
					fill: white;
				}
			}

			.splide__arrow.splide__arrow--prev {
				left: 0.5rem;
			}

			.splide__arrow.splide__arrow--next {
				right: 0.5rem;
			}
		}

		.splide__pagination {
			bottom: -0.5em;

			.splide__pagination__page.is-active {
				background: red;
				opacity: 1;
			}
		}
	}

	.btn-all-courses {
		text-align: right;
		margin-top: 2rem;

		.btn {
			text-transform: capitalize;
		}
	}
}

.section-product-feature {
	position: relative;
	padding-top: 3.375rem;

	.feature-lists {
		.card-feature {
			margin: 0 -0.75rem;

			.card-image {
				img {
					width: 100%;
					display: block;
				}
			}

			.card-content {
				padding-top: 2.25rem;

				.card-topic {
					position: relative;
					margin-bottom: 2.25rem;

					.card-title {
						font-size: 1.875rem;
						margin: 0;
						margin-bottom: 0.5rem;
					}

					.card-brief {
						font-size: 1.5rem;
						line-height: 1.167;
						margin: 0;
					}
				}

				.card-topic::after {
					content: "";
					width: 20%;
					position: absolute;
					bottom: -1.25rem;
					left: 0;
					border-top: 5px solid red;
				}

				.card-detail {
					margin: 0;
					font-size: 1.125rem;
				}
			}
		}

		.splide__arrows {
			.splide__arrow {
				width: 2.5em;
				height: 2.5em;
				top: 25%;
				background: red;

				svg {
					fill: white;
				}
			}

			.splide__arrow.splide__arrow--prev {
				left: 0.5rem;
			}

			.splide__arrow.splide__arrow--next {
				right: 0.5rem;
			}
		}
	}

	.card-feature-bottom {
		position: relative;
		padding: 2.75rem 0;
		background-repeat: no-repeat;
		margin-top: 3rem;

		.card-content {
			position: relative;
			z-index: 2;
			width: 100%;
			color: white;

			.card-title {
				font-size: 1.5rem;
				/* font-size: 1.75rem; */
				margin: 0;
				margin-bottom: 1.875rem;
				position: relative;
			}

			.card-title::after {
				content: "";
				width: 12%;
				min-width: 2em;
				position: absolute;
				bottom: -0.75rem;
				left: 0;
				border-top: 4px solid red;
			}

			.card-brief {
				font-size: 1.125rem;
				margin: 0;
			}
		}

		.bg-black {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: black;
			background-repeat: no-repeat;
			backdrop-filter: blur(2px);
			-webkit-backdrop-filter: blur(2px);
		}
	}

	.element-laptop {
		display: none;
		width: 600px;
		position: absolute;
		right: var(--banner-highlight-wrapper);
		bottom: 1.25rem;
		z-index: 2;
	}
}

.section-about-us {
	.section-content {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		.col {
			flex: 1;
		}
	}
}

#authen form {
	height: 38.5em;
}

/* Card */
.section-example-course {
	.program-course {
		.card-link {
			display: block;
		}
	}

	.card-course {
		margin: 0 0.875rem;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		cursor: pointer !important;

		.card-image {
			display: block;
			padding-top: 50.1767%;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center top;
		}

		.card-content {
			min-height: 160px;

			.course-brief {
				height: calc(1.25rem * 1.06 * 4);
			}

			.btn {
				margin-top: 0.5rem;
			}
		}
	}

	.card-course:hover {
		box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
	}
}

.courses-page {
	.card-link {
		display: block;
	}

	.card-course {
		margin: 0;
		margin-bottom: 1.5rem;

		.card-content {
			min-height: 160px;

			@media (min-width: 992px) {
				min-height: 212px;
			}

			/* @media (min-width: 1400px) {
				min-height: 212px;
			} */
		}
	}

	.section-course-live {
		.icon-coming-soon {
			width: 150px;
			max-width: 100%;
			margin: 2.5rem 0;
		}
	}
}

.certificate-verification-page {
	.section-content {
		.container {
			width: 100%;

			@media only screen and (min-width: 576px) {
				width: 85%;
			}

			@media only screen and (min-width: 993px) {
				/*  */
			}

			.section-title {
				margin-bottom: 24px;
			}

			.card-form {
				--card-form-padding: 30px;
				padding: var(--card-form-padding);
				border-radius: 20px;
				/* min-height: 500px; */

				form {
					.input-wrapper {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						width: 100%;
						max-width: 100%;
						margin: var(--card-form-padding) auto;

						@media only screen and (min-width: 601px) {
							flex-direction: row;
							align-items: center;
							gap: var(--card-form-padding);
							width: 600px;
						}

						.input-field {
							width: 100%;
							flex: 1;
						}

						.btn {
							margin-top: -8px;

							@media only screen and (max-width: 600px) {
								padding: 0 20px;
							}
						}
					}
				}

				.card-image {
					position: relative;
					width: 100%;
					max-width: 100%;
					position: relative;
					left: calc(var(--card-form-padding) * -1);
					bottom: calc(var(--card-form-padding) * -1);

					@media only screen and (min-width: 768px) {
						width: 70%;
					}

					img {
						display: block;
						width: 100%;
						height: auto;
						object-fit: contain;
					}

					.bg-gradient {
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 2;
						width: 76.5%;
						height: 100%;
						background: linear-gradient(to bottom left, transparent, rgba(0, 0, 0, 0.04));
					}
				}

				.table-certificate-result {
					font-size: 1.125rem;
					overflow-x: auto;

					table {
						tr {
							border-bottom: none;

							td {
								padding: 8px 5px;
								white-space: nowrap;
							}

							td.table-title {
								width: 200px;
							}
						}
					}
				}

				.certificate-notfound {
					/* padding: 40px 30px; */
					
					.icon {
						width: 130px;
						height: 130px;
						display: block;
						object-fit: contain;
						margin: 0 auto;
					}
					
					.title {
						margin-top: 10px;
					}

					.btn {
						margin-top: 16px;
					}
				}
			}
		}
	}
}


/* Cookie Policy */
.privacy {
	.policy-body {
		display: flex;
		flex-direction: column;
		gap: 2rem;

		.policy-content {
			flex: 1;

			.policy-title {
				font-size: 1.125rem;
			}

			.policy-desc {
				font-size: 1rem;
			}
		}

		.policy-action {
			margin: 0;

			.btn {
				width: 100%;
				margin: 0;
				text-transform: capitalize;
			}
		}
	}
}

/* Page Loding */
.loading {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.90);
	/* backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px); */
	position: fixed;
	z-index: 9999;
	text-align: center;
	vertical-align: middle;
}

.loading:after {
	content: "";
	background-image: url('/public/img/loading/learner-loading.gif');
	background-repeat: no-repeat;
	background-size: contain;
	width: 120px;
	height: 120px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}