.bg {
  /* The image used */
  background-image: url("../image/banner/banner.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.text-justify {
	text-align: justify;
	text-justify: inter-word;
}

.box {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 4px;
}

.thumb-container {
  position: relative;
  padding-bottom: 100px;
  margin: 0px;
  overflow: hidden;
  /*border: 1px solid black;*/
}

.thumb-img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  padding: 5px;
  overflow: hidden;
  border: 0px;
}

.thumb-img img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: -100%;
  height:100%;
  margin: auto;
  width: auto;
}

.bp-color-gradient {
  background: -webkit-linear-gradient(45deg, #cc0000, #FF3F33);
}

.text-color-gradient {
  background: -webkit-linear-gradient(45deg, #cc0000, #FF3F33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.map-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.styled-table {
  border-collapse: collapse;
  text-align: center;
  margin: auto;
}

.styled-table th,
.styled-table td {
  border: 1px solid #000;
  padding: 8px;
  font-size: 18px;
}

.styled-table thead th {
  background: rgb(245,255,0);
  background: linear-gradient(19deg, rgba(245,255,0,1) 0%, rgba(240,188,120,1) 100%);
  font-weight: bold;
}

.main-tabs-wrapper {
		max-width: 900px;
		margin: 0 auto;

		padding: 8px;

		background: #ffffff;

		border: 1px solid #eeeeee;
		border-radius: 16px;

		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	}

	.main-tabs {
		display: flex;
		justify-content: center;

		gap: 8px;

		border: none;
	}

	.main-tabs .nav-item {
		flex: 1;
	}

	.main-tabs .nav-link {
		position: relative;

		width: 100%;

		display: flex;
		align-items: center;
		justify-content: center;

		gap: 8px;

		padding: 14px 20px;

		border: none;
		border-radius: 10px;

		background: transparent;

		color: #666;

		font-size: 15px;
		font-weight: 600;

		transition:
			all 0.25s ease;
	}

	/* Icon */
	.main-tabs .nav-link i {
		font-size: 18px;
	}

	/* Hover */
	.main-tabs .nav-link:hover {
		color: #dc3545;

		background: #fff5f5;

		transform: translateY(-2px);
	}

	/* Active */
	.main-tabs .nav-link.active {
		color: #ffffff;

		background: linear-gradient(
			135deg,
			#dc3545,
			#b02a37
		);

		box-shadow:
			0 5px 15px rgba(220, 53, 69, 0.25);
	}

	/* Active hover */
	.main-tabs .nav-link.active:hover {
		color: #ffffff;

		background: linear-gradient(
			135deg,
			#dc3545,
			#b02a37
		);

		transform: translateY(-2px);
	}

	.main-tab-content {
		min-height: 400px;
	}

	.main-tab-content .tab-pane {
		animation: tabFadeIn 0.35s ease;
	}

	@keyframes tabFadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (max-width: 767px) {

		.main-tabs {
			display: grid;
			grid-template-columns: repeat(2, 1fr);

			gap: 6px;
		}

		.main-tabs .nav-item {
			width: 100%;
		}

		.main-tabs .nav-link {
			flex-direction: column;

			gap: 4px;

			padding: 12px 6px;

			font-size: 12px;
		}

		.main-tabs .nav-link i {
			font-size: 20px;
		}
	}