@media (min-width: 601px) {

	/* Header */
	header.navigation {
		
		nav {
			.nav-member {
				.btn-signup {
					display: block;
				}
			}
		}
	}
	
	/* Footer */
	footer {
		#sitemap {
			.content-line-oa {
				margin-top: 1.5rem;
			}
		}
	}

	/* Banner */
	.banner-highlight {
		.carousel {
			.carousel-item {
				img {
					height: calc(100vh - 64px);
				}
			}
		}
	}

}

@media (min-width: 768px) {
	:root {
		--page-wrapper: 2.5rem;
		--banner-highlight-wrapper: 7%;
	}

	/* Header */
	header.navigation {
		/* position: absolute; */
		top: 0;
		left: 0;
		right: 0;
		/* padding: 0.75rem 0; */
		
		background: rgba(255,255,255,0) !important;
		padding: 0 0.25em 0 !important;
		position: sticky !important;
		margin-top: -64px;
		transition: 300ms ease-in-out;

		nav {
			.nav-logo {
				.top-bar {
					height: 45%;
				}
			}
		}
		
	}

	/* Footer */
	footer {
		#sitemap {
			.content-line-oa {
				max-width: 180px;
			}
		}
	}

	/* Banner */
	.banner-highlight {
		.carousel {
			.carousel-item {
				.carousel-content {
					width: 40%;

					.carousel-title {
						font-size: 3rem;
					}

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

				img {
					height: 100vh;
				}
			}
		}

		.banner-bottom {

			.banner-container {
				width: 50%;

				.banner-title {
					font-size: 1.5rem;
				}

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

		.banner-element-monitor {
			display: block;
			width: 330px;

			.banner-image {
				top: 12px;
				left: 12px;
				right: 12px;
			}
		}
	}

	.banner-page-theme {
		img {
			height: 280px;
		}

		.banner-content {
			top: 30%;
			width: 35%;

			.banner-title {
				font-size: 2.25rem;
			}

			.banner-brief {
				display: block;
				font-size: 1rem;
				line-height: 1.5;
			}
		}
	}

	/* Section */
	.section-theme {
		.section-title {
			font-size: 1.875rem;
		}
	}

	.section-customers {
		.row {

			.card-customer {

				img {
					height: 55px;
				}
			}
		}
	}

	.section-example-course {
		.program-course {
			.splide__arrows {
				.splide__arrow {
					top: 50%;
				}
			}
		}

		.btn-all-courses {
			margin-top: 0;
		}
	}

	.section-product-feature {
		padding-top: 4.25rem;

		.feature-lists {
			.card-feature {
				.card-image {
					img {
						width: 65%;
						margin: auto;
					}
				}

				.card-content {
					.card-topic {
						.card-title {
							font-size: 2.125rem;
						}

						.card-brief {
							font-size: 1.625rem;
						}
					}
				}
			}

			.splide__arrows {
				.splide__arrow {
					top: 30%;
				}
			}
		}
	}

	.section-about-us {
		.section-content {
			.col {
				.map-image {
					width: 70%;
					margin: auto;
				}
			}
		}
	}

	/* Cookie Policy */
	.privacy {
		.policy-body {
			flex-direction: row;
			align-items: center;
			gap: 3.5rem;

			.policy-action {
				.btn {
					width: fit-content;
				}
			}
		}
	}
}

@media (min-width: 992px) {

	:root {
		--banner-highlight-wrapper: 5%;
	}

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

	/* Footer */
	footer {
		#sitemap {

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

			.content-line-oa {
				max-width: 180px;
				margin-top: 0;
				/* float: right !important; */
			}
		}
	}

	/* Banner */
	.banner-highlight {
		.carousel {
			.carousel-item {
				.carousel-content {
					width: 40%;

					.carousel-title {
						font-size: 2.5rem;
					}

					.carousel-title::before {
						border-top: 6px solid red;
					}

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

		.banner-bottom {

			.banner-container {
				width: 55%;

				.banner-title {
					font-size: 1.5rem;
				}

				.banner-brief {
					font-size: 1rem;
				}
			}
		}

		.banner-element-monitor {
			width: 380px;
		}
	}

	.banner-page-theme {
		img {
			height: 380px;
		}

		.banner-content {
			top: 25%;

			.banner-brief {
				display: block;
				font-size: 0.875rem;
			}
		}
	}

	/* Section */
	.section-customers {
		.row {
			.card-customer {
				img {
					height: 65px;
				}
			}
		}
	}

	.section-product-feature {
		.feature-lists {
			.card-feature {
				.card-image {
					img {
						width: 80%;
					}
				}
			}
		}
	}

	#authen form {
		height: 36.5em;
	}

}

@media (min-width: 1200px) {

	/* Banner */
	.banner-highlight {
		.carousel {
			.carousel-item {
				.carousel-content {
					width: 45%;

					.carousel-title {
						font-size: 2rem;
					}
				}
			}
		}

		.banner-bottom {

			.banner-container {
				width: 55%;
			}
		}

		.banner-element-monitor {
			width: 420px;
		}
	}

	.banner-page-theme {
		img {
			height: 400px;
		}

		.banner-content {
			top: 25%;
		}
	}

	/* Section */
	.section-customers {
		.row {

			.card-customer {

				img {
					height: 70px;
				}
			}
		}
	}

	.section-product-feature {
		.feature-lists {
			.card-feature {
				margin: 0 -1.25rem;

				.col {
					padding: 0 1.25rem;
				}

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

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

					.card-topic {
						.card-title {
							font-size: 2rem;
						}

						.card-brief {
							font-size: 1.375rem;
						}
					}

					.card-detail {
						font-size: 1rem;
					}
				}
			}

			.splide__arrows {
				.splide__arrow {
					top: 50%;
				}
			}
		}

		.card-feature-bottom {
			margin-top: -0.75rem;

			.card-content {
				width: 65%;

				.card-title {
					font-size: 1.5rem;
				}

				.card-brief {
					font-size: 1rem;
				}
			}

			.bg-black {
				background: rgba(0, 0, 0, 0.5);
			}
		}

		.element-laptop {
			display: block;
			width: 500px;
		}
	}

	.section-about-us {
		.section-content {
			flex-direction: row;
			align-items: center;

			.col {
				.map-image {
					width: 100%;
				}
			}
		}
	}

}

@media (min-width: 1400px) {

	/* Banner */
	.banner-highlight {

		.carousel {
			.carousel-item {
				.carousel-content {

					.carousel-title {
						font-size: 2.25rem;
					}

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

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

		.banner-bottom {
			position: absolute;
			background: rgba(0, 0, 0, 0.5);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);
		}

		.banner-element-monitor {
			width: 450px;
		}

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

	.banner-page-theme {
		img {
			height: fit-content;
		}

		.banner-content {
			top: 22%;
			width: 40%;

			.banner-title {
				font-size: 2.75rem;
			}

			.banner-title::after {
				bottom: -0.375rem;
				border-top: 5px solid red;
			}

			.banner-brief {
				font-size: 1.125rem;
				line-height: 1.67;
			}
		}
	}

	/* Section */
	.section-customers {
		.row {

			.card-customer {

				img {
					height: 80px;
				}
			}
		}
	}

	.section-product-feature {
		.feature-lists {
			.card-feature {
				.card-content {
					.card-topic {
						.card-title {
							font-size: 2.125rem;
						}

						.card-brief {
							font-size: 1.75rem;
						}
					}
				}
			}
		}
	}

}

@media (min-width: 1600px) {

	:root {
		--banner-highlight-wrapper: 7%;
	}

	/* Banner */
	.banner-highlight {
		.carousel {
			.carousel-item {
				.carousel-content {
					width: 40%;

					.carousel-title {
						font-size: 3.125rem;
					}

					.carousel-title::before {
						border-top: 7px solid red;
					}

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

		.banner-bottom {

			.banner-container {

				.banner-title {
					font-size: 1.75rem;
				}

				.banner-title::after {
					border-top: 4px solid red;
				}

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

		.banner-element-monitor {
			width: 500px;
		}
	}

	/* Section */
	.section-theme {

		.section-title {
			margin-bottom: 2.5rem;
		}
	}

	.section-example-course.section-theme {
		.section-title {
			margin-bottom: 1.5rem;
		}

		.program-course {
			.splide__arrows {
				.splide__arrow.splide__arrow--prev {
					left: -3.375rem;
				}

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

	.section-product-feature {
		padding-top: 5.25rem;

		.feature-lists {
			.card-feature {
				.card-content {
					padding-top: 3.125rem;

					.card-topic {
						.card-title {
							font-size: 2.5rem;
						}

						.card-brief {
							font-size: 1.75rem;
						}
					}

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

			.splide__arrows {
				.splide__arrow.splide__arrow--prev {
					left: -4.375rem;
				}

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

		.card-feature-bottom {
			margin-top: -0.875rem;

			.card-content {
				width: 70%;

				.card-title {
					font-size: 1.75rem;
					margin-bottom: 1.625rem;
				}

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

		.element-laptop {
			width: 600px;
		}
	}

	/* Cookie Policy */
	.privacy {
		.policy-body {
			.policy-content {

				.policy-title,
				.policy-desc {
					max-width: 90%;
				}
			}
		}
	}

}