:root {
	--bs-primary: #860907;
	--bs-primary-rgb: 134, 9, 7;
	--bs-secondary: #010080;
	--bs-secondary-rgb: 1, 8, 128;
}

/* General styles */
body {
	font-family: "DM Sans", sans-serif;
	color: #505050;
	font-size: 16px;
}

/* Primary Color: #860907 */
.bg-primary {
	background-color: #860907 !important;
}
.bg-light{
	background-color: #e9f0ff !important;
}
.text-primary {
	color: #860907 !important;
}

.form-control {	
	padding: .75rem .75rem;
}

/* Secondary Color: #010080 */
.bg-secondary {
	background-color: #010080 !important;
}

.text-secondary {
	color: #010080 !important;
}

/* Primary Button */
.btn-primary {
	background-color: #860907;
	color: #fff;
	border: 1px solid #860907;
	padding: .75rem 1.5rem;
	border-radius: 0;
	transition: background-color 0.3s, color 0.3s;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: #a50b0d;
	color: #fff;
	border-color: #a50b0d;
}

/* Secondary Button */
.btn-secondary {
	background-image:linear-gradient(135deg, #000033 0%, #010080 50%, #3333cc 100%);
	color: #fff;
	border: 1px solid #010080;
	padding: .75rem 1.5rem;	
	transition: background-color 0.3s, color 0.3s;
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-image:linear-gradient(45deg, #000033 0%, #010080 50%, #3333cc 100%);
	color: #fff;
	border-color: #0201b3;
}

/* Navbar */
.navbar {
	transition: all 0.3s ease;
}

.navbar-scrolled {
	background-color: rgba(255, 255, 255, 0.95) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
	height: 40px;
	transition: height 0.3s ease;
}

.logo-scrolled {
	height: 35px;
}

.nav-link {
	font-weight: 500;
	margin: 0 5px;
	transition: color 0.3s ease;
}

.nav-link:hover, .nav-link.active {
	color: var(--bs-primary) !important;
}

.navbar-toggler {
	border: none;
	padding: 4px 8px;
}

.navbar-toggler:focus {
	box-shadow: none;
}
.bg-light .navbar-brand .logo {
	height: 40px;
	filter: none;
}

.navbar-nav .nav-link {
	margin-left: 1rem;	
	font-weight: bold;
}

/* Navbar on scroll */
.bg-light.navbar-dark {
	background-color: #fff !important;
}

.bg-light.navbar-dark .nav-link {
	color: #000 !important;
}

/* Hero Section */
.hero {
	position: relative;
	height: 90vh;
	background: url('images/hero-background.jpg') no-repeat center center;
	background-size: cover;
	color: #fff;
	overflow: hidden;
}

.hero h1 {
	font-size: 3rem;
}

.hero p {
	font-size: 1.5rem;
}

/* Carousel */
.carousel-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #00000050, transparent);
	z-index: 1;
}

.carousel-item img {
	position: relative;
	z-index: 0;
}

.carousel-inner img {
	height: 90vh;
	object-fit: cover;
}

.carousel-caption {
	bottom: 50%;
	transform: translateY(50%);
	text-align: left;
	z-index: 999;
}

.carousel-caption h2 {
	font-size: 3rem;
	margin-bottom: 0.5rem;
}

.carousel-caption p {
	font-size: 1.5rem;
}

/* Services Section */
.services-section {
	background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
	position: relative;
	overflow: hidden;
}

.services-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 300px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d1d5db" stroke-width="1" opacity="0.3"><path d="M17.8 19.2 16 11l3.5-3.5c.8-.8.8-2 0-2.8-.8-.8-2.1-.8-2.8 0L13 8.2l-8.2-2C2.2 5.9.5 7.5.8 10.1L12 21.2c2.6.3 4.2-1.4 3.9-3.9L17.8 19.2z"/></svg>') no-repeat center center;
	background-size: contain;
	opacity: 0.1;
}

.service-card {
	background: #fff;
	border-radius: 25px;
	padding: 2rem 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.service-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.service-icon {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	color: #fff;
}

.service-card:nth-child(odd) .service-icon {
	background: linear-gradient(135deg, #000033 0%, #010080 50%, #3333cc 100%);
}

.service-card:nth-child(even) .service-icon {
	background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.service-card h5 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 0;
}

.section-title {
	text-align: center;
	margin-bottom: 4rem;
}

.section-title .subtitle {
	color: #942221;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	position: relative;
}

.section-title .subtitle::before,
.section-title .subtitle::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 50px;
	height: 2px;
	background: #010080;
}

.section-title .subtitle::before {
	left: -70px;
}

.section-title .subtitle::after {
	right: -70px;
}

.section-title h2 {
	font-size: 2rem;
	font-weight: 700;
	color: #010080;
}

/* Destinations Section */
.destinations-section {
	background: #f8f9fa;
}

.destination-card {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	height: 300px;
	margin-bottom: 2rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.destination-card:hover {
	transform: scale(1.05);
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.destination-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.destination-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	padding: 2rem 1.5rem 1.5rem;
}

.destination-name {
	background: linear-gradient(135deg, #000033 0%, #010080 50%, #3333cc 100%);
	color: #fff;
	padding: 0.5rem 1.5rem;
	border-radius: 25px;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 0;
}

.destination-card.blue .destination-name {
	background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

/* Styling for the unordered list */
ul.contact-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.contact-item-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	margin-bottom: 1rem;
}

.contact-item-group li {
	display: flex;
	align-items: center;
}

ul.contact-list li strong {
	min-width: 70px;
	display: inline-block;
	font-weight: bold;
}

ul.contact-list li span {
	color: #555;
}

ul.contact-list li i {
	margin-right: 0.5rem;
	color: #010080;
}

.contact-location {
	margin-bottom: 0.5rem;
}

.contact-info a {
	color: #007bff;
	text-decoration: none;
}

.contact-info a:hover {
	text-decoration: underline;
}

ul.social-media-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.social-media-list li {
	display: inline-block;
}

ul.social-media-list li a {
	text-decoration: none;
	align-items: center;
}

ul.social-media-list li a i {
	margin-right: 0.5rem;
	font-size: 1.2rem;
	color: #fff;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.hero h1 {
		font-size: 2rem;
	}

	.hero p {
		font-size: 1rem;
	}

	.navbar-nav .nav-link {
		margin-left: 0.5rem;
	}

	.section-title .subtitle::before,
	.section-title .subtitle::after {
		width: 30px;
	}

	.section-title .subtitle::before {
		left: -40px;
	}

	.section-title .subtitle::after {
		right: -40px;
	}

	.destination-card {
		height: 250px;
	}
	
	.carousel-caption h2 {
		font-size: 2rem;
	}
	
	.carousel-caption p {
		font-size: 1rem;
	}
}