/* Style CSS Copyrigth 2024 by BusX */
@font-face {
	font-family: 'SukhumvitSet-Text';
	src: url('../fonts/SukhumvitSet-Text.ttf');
}

:root {
	--theme-bus: #082385;
	--text-bus: #001F74;
	--white: #ffffff;
	--green: #06c755;
	--blue: #1877f2;
	--color-link-agreement: #1877f2;

	/* Font Sizes */
	--fs-xs: 12px;
	--fs-sm: 14px;
	--fs-md: 18px;
	--fs-lg: 20px;
	--fs-xl: 24px;

	/* Font Weights */
	--fw-normal: 500;
	--fw-medium: 700;
	--fw-semibold: 900;
	--fw-bold: bold;

	--fs-title: 28px;
	--fw-title: bold;

	--fs-sub: 24px;
	--fw-sub: bold;

	--fc-title: #333;
	--fc-sub: #333;

	--radius: 10px;
	--radius-lg: 15px;
	--transition: 0.3s;
	--shadow-light: rgba(0, 0, 0, 0.06);
	--shadow-medium: rgba(0, 0, 0, 0.12);

	@media (max-width: 768px) {
		--fs-title: 20px;
		--fs-sub: 16px;
	}

	@media (max-width: 400px) {
		--fs-title: 18px;
		--fs-sub: 14px;
	}
}

body {
	font-family: 'SukhumvitSet-Text', sans-serif;
	font-size: var(--fs-md);
	font-weight: var(--fw-normal);
	color: #333333;
	background-color: #f9f9f9;
}

.text-color {
	color: var(--theme-bus);
}

.bg-gray {
	background-color: var(--white);
}

.navbar {
	background-color: var(--theme-bus);

	.container {
		max-width: 1100px;
		width: 100%;
	}

	.navbar-brand {
		img {
			width: 125px;
		}

		strong {
			font-size: 25px;
			font-weight: bold;
			line-height: 1.2;
			color: var(--white);
			letter-spacing: 2px;

		}
	}

	.navbar-toggler {
		border: none !important;
		color: var(--white);
	}

	.nav-link {
		color: var(--white);
		font-size: 16px;
		font-weight: 400;
	}

	.nav-link.active,
	.nav-link.show {
		color: var(--white);
		text-decoration: underline;
	}

	.nav-link:hover {
		color: var(--white);
		text-decoration: underline;
	}

	.card-language {
		display: flex;
		align-items: center;
		justify-content: start;

		.btn-language {
			color: var(--white);
			padding: 5px 5px;
			text-decoration: none;
			font-weight: 400;

			img {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}

			span {
				font-size: 14px;
			}
		}

		.text-span {
			color: var(--white);
			margin: 0 5px;
		}
	}
}

.form-search {
	position: relative;
	margin-bottom: 20px;

	.warpper-search {
		position: relative;
		background-size: cover;
		background-position: bottom;
		height: 400px;
		padding-top: 80px;
		padding-bottom: 100px;

		.background {
			display: contents;

			img {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				filter: brightness(0.9);
			}
		}

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.45);
		}

		.content {
			position: relative;
			z-index: 1;
			padding: 0 55px;

			.title {
				font-size: 36px;
				font-weight: bold;
				text-align: center;
				color: var(--white);
				margin: 0;
			}

			.desc {
				font-size: 16px;
				font-weight: 500;
				text-align: center;
				color: rgba(255, 255, 255, 0.9);
				margin: 10px 0 24px;

				@media (max-width: 576px) {
					& {
						font-size: 14px;
						margin: 8px 0 18px;
					}
				}
			}

			.box-centent {
				max-width: 1000px !important;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

				.form-search-trip {

					.card-origin,
					.card-destination,
					.card-departure,
					.card-return,
					.card-passenger {
						background-color: var(--white) !important;
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.warpper-search {
			height: 600px;
			padding-top: 90px;
			padding-bottom: 0px;
		}
	}

	@media (max-width: 991px) {
		.warpper-search {
			height: 550px;
			padding-top: 75px;
		}
	}

	@media (max-width: 768px) {
		.warpper-search {
			height: 700px;
			padding-top: 55px;

			.background {
				img {
					object-position: 55% 55%;
				}
			}
		}
	}

	@media (max-width: 576px) {
		.warpper-search {
			.content {
				padding: 0 40px;

				.title {
					display: grid;
				}
			}
		}
	}

	@media (max-width: 480px) {
		.warpper-search {
			padding-top: 35px;

			.content {
				padding: 0 20px;
			}
		}
	}
}

.modalNews {
	.btn-close-custom {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border: none;
		z-index: 999999;
		pointer-events: auto;
		font-size: 35px;
		line-height: 40px;
		text-align: center;
	}
}

/* Home sections - shared header */
.section-header {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;

	h2 {
		font-size: var(--fs-title);
		font-weight: var(--fw-title);
		color: var(--fc-title);
		margin: 0;
	}

	.view-all {
		color: var(--text-bus);
		text-decoration: none;
		font-size: var(--fs-sm);
		white-space: nowrap;
	}

	@media (max-width: 768px) {
		& {
			gap: 8px;
		}
	}
}

/* News / Promotions */
.news-promotions {
	background-color: #F4F4F4;
	padding: 80px 0 60px;

	@media (max-width: 768px) {
		& {
			padding: 60px 0 50px;
		}
	}

	.section-content {
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;

		.news-card {
			display: block;
			color: inherit;
			text-decoration: none;
			background-color: var(--white);
			border: 1px solid #eee;
			border-radius: var(--radius);
			overflow: hidden;
			transition: var(--transition);

			&:hover {
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
				transform: translateY(-4px);

				.news-image img {
					transform: scale(1.05);
				}
			}

			.news-image {
				height: 160px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					transition: var(--transition);
				}
			}

			.news-content {
				padding: 14px 16px 18px;

				.news-date {
					display: block;
					font-size: var(--fs-xs);
					color: #999;
					margin-bottom: 4px;
				}

				.news-title {
					display: block;
					font-size: 15px;
					color: #333;
				}
			}
		}

		@media (max-width: 992px) {
			& {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 576px) {
			& {
				grid-template-columns: 1fr;
			}
		}
	}
}

/* Top Destinations */
.destinations {
	padding: 20px 0 60px;

	.section-content {
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;

		.route-card {
			border: 1px solid #eee;
			border-radius: var(--radius);
			overflow: hidden;
			transition: var(--transition);

			&:hover {
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
				transform: translateY(-4px);
			}

			.route-image {
				height: 180px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: top;
				}
			}

			.route-content {
				padding: 20px;

				.route-path {
					display: flex;
					align-items: center;
					gap: 8px;
					font-weight: bold;
					color: #333;
					margin-bottom: 12px;
					font-size: 15px;

					i {
						color: var(--theme-bus);
					}
				}

				.route-meta {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: var(--fs-xs);
					color: #6c6c6c;
					margin-bottom: 16px;

					.route-price {
						color: var(--theme-bus);
						font-weight: bold;
					}
				}

				.route-button {
					display: block;
					text-align: center;
					padding: 10px 20px;
					background-color: var(--theme-bus);
					color: var(--white);
					border-radius: 5px;
					font-size: var(--fs-sm);
					font-weight: bold;
					text-decoration: none;
				}
			}
		}

		@media (max-width: 992px) {
			& {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 576px) {
			& {
				grid-template-columns: 1fr;
			}
		}
	}
}

/* FAQs */
.faqs {
	padding: 20px 0 60px;

	.section-content {
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 24px;
		align-items: start;

		.faq-item {
			border: 1px solid #eee;
			border-radius: var(--radius);
			overflow: hidden;
			background: var(--white);
			transition: var(--transition);

			&:has(.faq-question[aria-expanded="true"]) {
				border-color: var(--theme-bus);
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
			}

			.faq-question {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 12px;
				padding: 18px 20px;
				background: var(--white);
				cursor: pointer;
				font-size: var(--fs-md);
				font-weight: bold;
				color: #333;

				.faq-icon {
					flex-shrink: 0;
					color: var(--theme-bus);
					transition: var(--transition);
				}

				&[aria-expanded="true"] .faq-icon {
					transform: rotate(180deg);
				}
			}

			.faq-answer {
				padding: 0 20px 18px;
				font-size: var(--fs-sm);
				color: #6c6c6c;
				line-height: 1.6;
			}
		}

		@media (max-width: 768px) {
			& {
				grid-template-columns: 1fr;
				gap: 12px;

				.faq-item {
					.faq-question {
						padding: 14px 16px;
						font-size: 15px;
					}

					.faq-answer {
						padding: 0 16px 14px;
					}
				}
			}
		}
	}
}

/* Gallery */
.gallery {
	background-color: #F4F4F4;
	padding: 50px 0;

	.card-header {
		max-width: 1100px;
		width: 100%;
		margin: 0 auto 24px;

		h2 {
			font-size: var(--fs-title);
			font-weight: var(--fw-title);
			color: var(--fc-title);
			margin: 0;
		}
	}

	.card-content {
		.gallery-wrap {
			max-width: 1100px;
			width: 100%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16px;

			.gallery-item {
				border-radius: var(--radius);
				overflow: hidden;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				transition: var(--transition);

				a {
					display: block;
				}

				img {
					width: 100%;
					height: 220px;
					object-fit: cover;
					object-position: center;
					transition: var(--transition);
				}

				&:hover img {
					transform: scale(1.05);
				}
			}

			@media (max-width: 768px) {
				& {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (max-width: 480px) {
				& {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}

.banner-inc {
	position: relative;

	.card-img {
		img {
			height: 380px;
			object-fit: cover;
			width: 100%;
			opacity: 0.5;
			object-position: 10% 10%;
		}
	}

	.card-text {
		display: none;
		position: relative;
		top: 36%;
		left: 50%;
		transform: translate(-50%, -356%);

		.text-title {
			font-size: 30px;
			font-weight: 700;
			color: #000000;
			text-align: center;
		}

		.text-link {
			text-align: center;
			font-size: 24px;
			color: #000000;

			a {
				font-size: 24px;
				color: #000000;
				text-decoration: none;
			}
		}
	}

	.card-text-nd {
		position: relative;
		top: 36%;
		left: 50%;
		transform: translate(-50%, -270%);

		.text-title {
			font-size: 30px;
			font-weight: 700;
			color: #000000;
			text-align: center;
		}

		.text-link {
			text-align: center;
			font-size: 24px;
			color: #000000;

			a {
				font-size: 24px;
				color: #000000;
				text-decoration: none;
			}
		}
	}
}

.about {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: 1100px;
			width: 100%;
			padding: 20px;

			.text-header {
				margin: 30px 0;

				h2 {
					font-weight: bold;
					font-size: 30px;
				}
			}

			.content {
				display: flex;
				flex-direction: column;

				.content-card {
					background-color: #f9f9f9;
					border-radius: 5px;
					padding: 20px;
					margin-bottom: 30px;

					p {
						font-size: 16px;
						color: var(--fc-title);
						line-height: 1.6;

						strong {
							font-weight: bold;
							color: var(--theme-bus);
							margin-right: 5px;
							margin-left: 5px;
						}
					}

					.row-slogan {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
						gap: 20px;
						margin-top: 20px;

						.slogan {
							display: flex;
							flex-direction: column;
							align-items: center;
							text-align: center;

							strong {
								border: 1px solid var(--theme-bus);
								padding: 10px 20px;
								border-radius: 50px;
								font-size: 18px;
								color: var(--theme-bus);
							}

							span {
								margin-top: 10px;
								font-size: 16px;
								font-weight: bold;
								color: var(--fc-title);
							}
						}

						@media (max-width: 576px) {
							& {
								grid-template-columns: 1fr;
							}
						}
					}

					h3 {
						font-size: 24px;
						color: var(--fc-title);
						margin-top: 10px;
						margin-bottom: 5px;
					}

					h4 {
						font-size: 20px;
						color: var(--fc-title);
						margin-top: 20px;
						margin-bottom: 10px;
					}

					h5 {
						font-size: 18px;
						color: var(--fc-title);
						margin-top: 15px;
						margin-bottom: 10px;
					}

					ul {
						list-style-type: disc;
						padding-left: 20px;
						margin-top: 10px;

						li {
							font-size: 16px;
							color: var(--fc-title);
							line-height: 1.6;
							margin-bottom: 5px;
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					padding: 10px;

					.text-header {
						margin: 20px 0;

						h2 {
							font-size: 24px;
						}
					}

					.content {
						.content-card {
							padding: 15px;

							h3 {
								font-size: 20px;
							}

							h4 {
								font-size: 18px;
							}

							h5 {
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
}

.timetables {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: 1100px;
			width: 100%;
			padding: 20px;

			.text-header {
				margin: 30px 0;

				h2 {
					font-weight: bold;
					font-size: 30px;
				}
			}

			.content {

				/* Ticket Counters */
				.ticket-counters {
					margin-bottom: 40px;

					h3 {
						font-size: 20px;
						font-weight: bold;
						color: var(--fc-title);
						margin-bottom: 16px;
					}

					.counter-list {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: 16px;

						.counter-item {
							border: 1px solid #eee;
							border-radius: var(--radius);
							padding: 16px 18px;

							.counter-station {
								font-size: 15px;
								font-weight: bold;
								color: #333;
								margin-bottom: 4px;
							}

							.counter-detail {
								font-size: 13px;
								color: #6c6c6c;
								margin-bottom: 8px;
							}

							.counter-contact {
								font-size: 14px;
								font-weight: bold;
								color: var(--theme-bus);

								i {
									margin-right: 6px;
								}
							}
						}
					}
				}

				/* Routes - 2 column card grid */
				.route-list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 20px;

					.route-card {
						border: 1px solid #eee;
						border-radius: var(--radius);
						padding: 20px;

						.route-card-header {
							font-size: 16px;
							font-weight: bold;
							color: #333;
							margin-bottom: 14px;
							padding-bottom: 12px;
							border-bottom: 1px solid #eee;
						}

						.route-schedule-table {
							margin-bottom: 18px;

							table {
								width: 100%;
								border-collapse: collapse;
								text-align: center;

								thead {
									th {
										background-color: var(--theme-bus);
										color: var(--white);
										font-size: 13px;
										padding: 8px;
									}
								}

								tbody {
									td {
										border: 1px solid #eee;
										font-size: 13px;
										font-weight: bold;
										color: #333;
										padding: 8px;
									}
								}
							}
						}

						.route-map {
							.route-map-label {
								font-size: 13px;
								font-weight: bold;
								color: #6c6c6c;
								margin-bottom: 10px;
							}

							.route-points {
								list-style: none;
								margin: 0;
								padding: 0 0 0 16px;
								max-height: 260px;
								overflow-y: auto;

								.route-point {
									position: relative;
									padding: 0 0 16px 16px;
									border-left: 2px solid #ddd;
									font-size: 13px;
									color: #444;

									&::before {
										content: "";
										position: absolute;
										left: -5px;
										top: 2px;
										width: 8px;
										height: 8px;
										border-radius: 50%;
										background-color: #ccc;
									}

									&:last-child {
										border-left: 2px solid transparent;
										padding-bottom: 0;
									}

									&.point-origin,
									&.point-destination {
										font-weight: bold;
										color: #333;

										&::before {
											left: -6px;
											width: 10px;
											height: 10px;
											background-color: var(--theme-bus);
										}
									}
								}
							}
						}
					}

					@media (max-width: 768px) {
						& {
							grid-template-columns: 1fr;
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					padding: 10px;

					.text-header {
						margin: 20px 0;

						h2 {
							font-size: 24px;
						}
					}

					.content {
						.ticket-counters {
							.counter-list {
								grid-template-columns: 1fr;
							}
						}
					}
				}
			}
		}
	}
}

.news {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: 1100px;
			width: 100%;
			padding: 20px;

			.text-header {
				margin: 30px 0;

				h2 {
					font-weight: bold;
					font-size: 30px;
				}
			}

			.content {
				.news-list {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 24px;

					.news-card {
						display: flex;
						flex-direction: column;
						height: 100%;
						border: 1px solid #eee;
						border-radius: var(--radius);
						overflow: hidden;
						text-decoration: none;
						color: inherit;
						background-color: var(--white);
						transition: var(--transition);

						&:hover {
							box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
							transform: translateY(-4px);

							.news-image img {
								transform: scale(1.05);
							}
						}

						.news-image {
							height: 180px;
							flex-shrink: 0;
							overflow: hidden;

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
								transition: var(--transition);
							}
						}

						.news-content {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding: 16px 18px 18px;

							.news-date {
								display: block;
								font-size: var(--fs-xs);
								color: #999;
								margin-bottom: 6px;
							}

							.news-title {
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								font-size: 15px;
								font-weight: bold;
								color: #333;
								line-height: 1.5;
								min-height: 3em;
							}
						}
					}

					@media (max-width: 768px) {
						& {
							grid-template-columns: repeat(2, 1fr);
						}
					}

					@media (max-width: 576px) {
						& {
							grid-template-columns: 1fr;
						}
					}
				}

				.detail {
					font-size: 16px;
					margin-bottom: 0px;
					color: var(--fc-title);
				}
			}

			@media (max-width: 575px) {
				& {
					padding: 10px;

					.text-header {
						margin: 20px 0;

						h2 {
							font-size: 24px;
						}
					}

					.content {
						.news-list {
							.news-card {
								.news-image {
									height: 160px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.news-detail {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: 1100px;
			width: 100%;
			padding: 20px;

			.text-header {
				margin: 30px 0;

				h2 {
					font-weight: bold;
					font-size: 30px;
				}
			}

			.content {
				.content-image {
					text-align: center;
					margin-bottom: 20px;

					img {
						max-width: 100%;
						height: auto;
						border-radius: 5px;
					}
				}

				.content-detail {
					font-size: 16px;
					line-height: 1.8;
					color: #333;
					margin-bottom: 0px;

					p {
						margin-bottom: 15px;
					}

					img {
						max-width: 100%;
						height: auto;
					}

					a {
						color: var(--theme-bus);
						text-decoration: none;
						margin: 0 5px;
					}
				}

				.content-meta {
					display: flex;
					flex-direction: column;
					gap: 10px;
					font-size: 14px;
					color: #333333;

					.time,
					.views {
						display: flex;
						align-items: center;

						i {
							margin-right: 5px;
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					padding: 10px;

					.text-header {
						margin: 20px 0;

						h2 {
							font-size: 24px;
						}
					}

					.content {
						.content-detail {
							font-size: 14px;
							line-height: 1.6;
						}

						.content-meta {
							font-size: 12px;

							.time,
							.views {
								i {
									margin-right: 3px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.container-footer {
	position: relative;
	width: 100%;

	@media (max-width: 767px) {
		.container {
			max-width: 100%;
		}
	}

	.card-popular-routes {
		background-color: #F4F4F4;
		padding: 30px 0;

		.container {
			display: flex;
			justify-content: center;
			align-items: center;

			.card-wapper {
				max-width: 1100px;
				width: 100%;

				.card-header {
					position: relative;
					padding-bottom: 15px;
					text-align: start;

					h2 {
						font-size: var(--fs-title);
						color: var(--fc-title);
						margin: 0;
					}
				}

				.card-content {

					.card-link-img {
						a {
							position: relative;
							text-decoration: none;
							display: flex;
							flex-direction: column;
							justify-content: start;
							gap: 10px;

							.card-img {
								position: relative;
								overflow: hidden;
								border-radius: 10px;
								box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
								transition: 0.3s;

								&:hover {
									transform: scale(1.05);
								}

								img {
									width: 100%;
									height: 100%;
									object-fit: cover;
									object-position: center;
								}

								.card-overlay {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									background-color: rgba(0, 0, 0, 0.5);
									display: flex;
									justify-content: center;
									align-items: center;
									opacity: 0.5;
								}
							}

							.card-text {
								position: absolute;
								bottom: 0;
								width: 100%;
								padding: 10px 0;
								text-align: center;

								strong {
									font-size: 16px;
									font-weight: 900;
									color: var(--white);
								}
							}

						}
					}

					.card-link {
						a {
							text-decoration: none;

							.card-text {
								text-align: start;

								strong {
									font-size: 16px;
									font-weight: 900;
									color: var(--theme-bus);
								}
							}

						}
					}

				}
			}
		}
	}

	.card-footer {
		background-color: #000000;

		.container {
			display: flex;
			justify-content: center;

			.card-wapper {
				max-width: 1100px;
				width: 100%;
				padding: 50px 0 30px 0;

				.card-content-left {

					h2 {
						font-size: 24px;
						font-weight: var(--fw-title);
						color: var(--white);
						margin: 0;
					}

					h2:first-child {
						margin-bottom: 10px;
					}

					h2:nth-child(3) {
						margin-top: 20px;
						margin-bottom: 10px;
					}

					strong {
						font-size: 16px;
						font-weight: bold;
						color: var(--white);
					}

					a {
						text-decoration: none;
						display: block;
						font-size: 16px;
						font-weight: 400;
						color: var(--white);
						margin-top: 10px;

						&:hover {
							color: var(--white);
						}
					}
				}

				.card-content-center {
					.card-menu {
						h2 {
							font-size: 24px;
							color: var(--white);
							margin: 0;
						}

						a {
							text-decoration: none;
							display: block;
							font-size: 16px;
							font-weight: 400;
							color: var(--white);
							margin-top: 10px;

							&:hover {
								color: var(--white);
							}
						}
					}

					@media (max-width: 767px) {
						& {
							margin-top: 20px;
							margin-bottom: 10px;
						}
					}
				}

				.card-content-right {
					.card-payment-channel {
						.card-header {
							h2 {
								font-size: 24px;
								color: var(--white);
								margin: 0;
								margin-bottom: 10px;
							}
						}

						.card-content {
							.card-list {
								display: flex;
								flex-wrap: wrap;
								gap: 10px;

								img {
									width: auto;
									height: 30px;
								}
							}
						}
					}

					.card-download {
						.card-header {
							h2 {
								font-size: 24px;
								color: var(--white);
								margin: 0;
								margin-top: 20px;
								margin-bottom: 10px;
							}
						}

						.card-content {
							.card-list {
								display: flex;
								flex-wrap: wrap;
								gap: 10px;

								a {
									text-decoration: none;
									display: flex;
									align-items: center;
									justify-content: center;
									padding: 0;

									img {
										width: auto;
										height: 40px;
									}
								}
							}
						}
					}

					@media (max-width: 768px) {
						.card-payment-channel {
							.card-header {
								margin-top: 20px;
								margin-bottom: 10px;
							}
						}

						.card-download {
							.card-header {
								margin-top: 20px;
								margin-bottom: 10px;
							}
						}
					}
				}

				.card-bottom {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20px;

					.card-copyright {
						display: flex;
						align-items: center;
						gap: 5px;

						span {
							font-size: 16px;
							font-weight: 400;
							color: var(--white);
						}

						a {
							text-decoration: none;
							font-weight: bold;
							color: var(--white);
						}
					}

					.card-referral {
						display: flex;

						a {
							text-decoration: none;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0;
							font-size: 16px;
							font-weight: 400;
							color: var(--white);

							&:hover {
								color: var(--white);
							}

							&:last-child {
								color: #ff6700;
								font-weight: bold;
							}
						}

						span {
							font-size: 16px;
							font-weight: 400;
							color: var(--white);
						}
					}

					@media (max-width: 622px) {
						& {
							flex-direction: column;
							align-items: center;
							justify-content: center;
						}
					}

					@media (max-width: 550px) {
						flex-direction: column;

						.card-copyright {
							margin-bottom: 10px;
						}
					}

					@media (max-width: 340px) {
						& {
							margin-top: 20px;

							.card-copyright {
								strong {
									display: grid;
									text-align: center;
								}
							}

							.card-referral {
								display: grid;
								text-align: center;
							}
						}
					}

				}
			}
		}
	}

}

.contact-us {
	.wrapper-row {
		display: flex;
		justify-content: center;

		.wrapper-body {
			max-width: 1100px;
			width: 100%;
			padding: 20px;

			.text-header {
				margin: 30px 0;

				h2 {
					font-weight: bold;
					font-size: 30px;
				}
			}

			.content {
				.contact-info {
					.contact-company {
						border: 1px solid var(--text-bus);
						border-radius: 5px;
						padding: 10px 15px;

						h3 {
							font-weight: bold;
							font-size: 20px;
							margin-top: 10px;
							color: var(--theme-bus);
						}

						p {
							font-size: 16px;
							line-height: 1.5;
						}
					}

					.contact-social {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						grid-gap: 15px;
						margin-top: 20px;

						.social-item {
							border-radius: 5px;
							margin-bottom: 15px;

							&:nth-child(1) {
								background-color: var(--theme-bus);
								border: 1px solid var(--theme-bus);
							}

							&:nth-child(2) {
								background-color: var(--green);
								border: 1px solid var(--green);
							}

							&:nth-child(3) {
								background-color: var(--blue);
								border: 1px solid var(--blue);
							}

							.social-item-content {
								display: flex;
								flex-direction: column;
								align-items: center;
								text-decoration: none;
								padding: 15px;

								i {
									font-size: 30px;
									color: var(--white);
									margin-top: 10px;
								}

								p {
									color: var(--white);
									margin: 0;
									font-size: 16px;
								}
							}
						}
					}
				}

				.contact-form {
					border: 1px solid var(--text-bus);
					border-radius: 5px;
					padding: 15px;

					h3 {
						font-weight: bold;
						font-size: 20px;
						color: var(--theme-bus);
						margin-bottom: 20px;
					}

					.form {
						.form-floating {
							margin-bottom: 15px;

							.form-control:focus {
								border-color: var(--theme-bus);
								box-shadow: unset;
							}

							&.company {
								position: absolute;
								left: -9999px;
								top: -9999px;
								height: 0;
								overflow: hidden;
							}

							&.callback {
								margin-top: 15px;
								margin-bottom: 15px;

								span {
									font-size: 16px;
								}

								.form-check-label {
									font-size: 16px;
								}

								.form-check-input:checked {
									background-color: var(--theme-bus);
									border-color: var(--theme-bus);

									&:focus {
										box-shadow: 0 0 0 0.25rem rgba(128, 53, 172, 0.25);
									}
								}
							}

							textarea.form-control {
								height: 100px;
							}

							label::after {
								background-color: unset !important;
							}
						}

						.form-group {
							.btn-contact {
								background-color: var(--theme-bus);
								color: var(--white);
								border: none;
								padding: 10px 20px;
								border-radius: 5px;
								font-size: 16px;
								width: 100%;
								cursor: pointer;
							}
						}
					}
				}
			}

			@media (max-width: 768px) {
				& {
					.content {
						.contact-info {
							.contact-social {
								grid-template-columns: 1fr 1fr;
							}
						}
					}
				}
			}

			@media (max-width: 575px) {
				& {
					padding: 10px;

					.text-header {
						margin: 20px 0;

						h2 {
							font-size: 24px;
						}
					}

					.content {
						.contact-info {
							.contact-company {
								h3 {
									font-size: 18px;
								}

								p {
									font-size: 14px;
								}
							}

							.contact-social {
								grid-template-columns: 1fr;

								.social-item {
									a {
										p {
											font-size: 14px;
										}
									}
								}
							}
						}

						.contact-form {
							h3 {
								font-size: 18px;
							}

							.form {
								.form-floating {
									textarea.form-control {
										height: 80px;
									}
								}

								.form-group {
									.btn-contact {
										font-size: 14px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}