/* Base Styles */
* {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 0;
	overflow-x: hidden; /* Prevent horizontal scrolling */
	font-family: 'Merriweather', serif;
	background-color: #fff2e4;
	color: #333;
	scroll-behavior: smooth;
}

.primaryColor {
	color: rgb(182 103 53);
}

.bgcolor-white {
	background-color: white !important;
}
bgcolor-gray {
	background-color: #f7f4f2 !important;
}
.text-align-right { text-align: right; }

.centered-div {
    display: flex;
    justify-content: center; /* Horizontally centers the text */
    align-items: center;     /* Vertically centers the text */
}

#headerBgBar {
	height: 80px;
	background-color: rgb(182 103 53);
	position: absolute;
	top: 30px;
	left: 0;
	width: 100vw;
}

#pageContent {
	margin: 0 auto;
	height: 100px;
	top: 30px;
	position: absolute;
}

#nav-persona-header {
	background-color: #fff2e4;
	height: 75px;
	color: rgb(182 103 53);
	text-align: center;
	padding-top: 10px;
	margin-left: 30px;
}

#nav-persona-header h2{
	margin-bottom: 10px;
}

#nav-main-links {
	height: 80px;
	line-height: 80px;
}

#nav-main-links a {
	text-decoration: none;
	padding: 0px 20px;
	color: #FFF;
	font-weight:bold;
	font-size: 1.2em;
}

.main-hero-section {
	height: calc(85vh - 120px);
}
.hero-container-bgImage {
	background-size: cover; /* Cover the entire container */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
}


.main-section {
	min-height: 200px;
	background-color: #e07b41;
}

.main-section h2.quoteheader {
	text-align: center;
	color: #FFF;
	height: 200px;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap; /* To allow wrapping on smaller screens */
}

.image-70cover {
	height: 68%; /* Set image height to 70% of the parent */
	width: auto; /* Keep the image's aspect ratio */
	object-fit: cover; /* Optional: ensure the image covers its box */
}

.hero-main-text {
	padding: 70px 40px;
	font-size: 32px;
	text-align: center;
	color: rgb(182 103 53);
}

.child1, .child2 {
	padding: 10px; /* Optional for spacing */
}

/* For larger screens */
.child15 {
	width: 15%;
}
.child25 {
	width: 25%;
}

.child30 {
	width: 30%;
}

.child70 {
	width: 70%;
}
.child80 {
	width: 80%;
}

.hero-main-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 50px;
}

.main-hero-section button {
	background-color: rgb(182, 103, 53);
	color: white;
	border: none;
	padding: 15px 20px;
	font-size: 16px;
	font-family: Arial, sans-serif;
	cursor: pointer;
	border-radius: 5px;
	display: flex;
	align-items: center;
	gap: 6px;
}

		.hero-main-buttons button:hover {
			background-color: rgb(150, 85, 44);
		}

		.hero-main-buttons button i {
			font-size: 20px;
		}
.social-icons {
	padding-top: 30px;
	text-align: right;
	font-size: 22px;
}

.social-icons a {
	color: rgb(182, 103, 53); /* Match button color for consistency */
	font-size: 28px;
	text-decoration: none;
	margin: 0 5px;
}

	.social-icons a:hover {
		color: rgb(150, 85, 44); /* Slightly darker on hover */
	}

/* Media query for mobile screens (max-width: 768px) */
@media only screen and (max-width: 768px) {
	.child1, .child2 {
		width: 100%; /* Both divs take 100% width on small screens */
	}
}


.hero-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-slide {
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translateX(100%); /* Start off-screen to the right */
	transition: opacity 0.7s ease, transform 0.7s ease; /* Slower slide and fade animation */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

	.hero-slide.active {
		opacity: 1; /* Show the active slide */
		transform: translateX(0); /* Move into view */
	}

	.hero-slide.outgoing {
		opacity: 0; /* Hide the outgoing slide */
		transform: translateX(-100%); /* Move out to the left */
	}

.prev-button, .next-button {
	position: absolute;
	bottom: 20px;
	padding: 10px 15px; /* Add some padding */
	font-size: 1.5rem; /* Adjust icon size */
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.8); /* Light background for buttons */
	border: none; /* No border */
	border-radius: 5px; /* Rounded corners */
	transition: background-color 0.3s; /* Smooth background color change */
}

.prev-button {
	left: 20px; /* Positioning the previous button */
}

.next-button {
	right: 20px; /* Positioning the next button */
}

	.prev-button:hover, .next-button:hover {
		background-color: rgba(255, 255, 255, 1); /* Full background on hover */
	}

.hero-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.4s ease-in-out; /* Fade transition - 1 second for overlap visibility */
}

	.hero-slide.active {
		opacity: 1; /* Fully visible */
	}

.fade-in {
	animation: fadeIn 1s forwards; /* Fade in animation - 1 second */
}

.fade-out {
	animation: fadeOut 1s forwards; /* Fade out animation - 1 second */
}

@keyframes fadeIn {
	from {
		opacity: 0; /* Start fully transparent */
	}

	to {
		opacity: 1; /* End fully opaque */
	}
}

@keyframes fadeOut {
	from {
		opacity: 1; /* Start fully opaque */
	}

	to {
		opacity: 0; /* End fully transparent */
	}
}


.quote-slider {
	position: relative;
	overflow: hidden; /* Hide overflowing slides */
}

.quote-container {
	display: flex;
	transition: transform 0.5s ease-in-out; /* Transition for sliding effect */
	padding: 30px;
}

.quote-slide {
	min-width: 100%; /* Each slide takes full width */
	box-sizing: border-box; /* Include padding and border in element's total width and height */
	display: flex;
	justify-content: center;
	opacity: 0; /* Initially hidden */
	transition: opacity 0.5s ease-in-out; /* Fade transition */
}

	.quote-slide.active {
		opacity: 1; /* Fully visible when active */
	}

.quote-image {
	font-size: 50px; /* Size of the icon */
	color: #FFF; /* Change to your preferred color */
	margin-bottom: 10px; /* Space between icon and quote */
}

blockquote {
	text-align: center;
	font-style: italic;
	padding-top: 22px;
	font-size: 27px;
	color: #FFF;
}

cite {
	display: block; /* Block display for citation */
	margin-top: 5px; /* Space above citation */
}

/* Hero featured section */
.hero-featured-section {
	background-color: #f7f4f2;
	display: flex;
	justify-content: space-between;
	padding: 50px;
	gap: 20px;
}

	/* Each featured item */
	.hero-featured-section .featured-item {
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		flex: 1;
		padding: 30px;
		text-align: center;
		transition: transform 0.3s ease;
	}

		/* Hover effect for featured items */
		.hero-featured-section .featured-item:hover {
			transform: translateY(-10px);
		}

		/* Headings for featured items */
		.hero-featured-section .featured-item h3 {
			font-size: 1.5rem;
			color: #333;
			margin-bottom: 20px;
		}

		/* Paragraph styling */
		.hero-featured-section .featured-item p {
			font-size: 1rem;
			color: #555;
			margin: 15px 0;
		}

	/* Call-to-action button styling */
	.hero-featured-section .cta-button {
		display: inline-block;
		padding: 10px 20px;
		background-color: #ff6600;
		color: white;
		text-decoration: none;
		border-radius: 5px;
		transition: background-color 0.3s ease;
	}

		.hero-featured-section .cta-button:hover {
			background-color: #e65c00;
		}

	/* Featured images styling */
	.hero-featured-section .featured-image {
		width: 100%;
		border-radius: 5px;
		object-fit: cover;
		margin-bottom: 15px;
	}

	.featured-image.course {
		height: 213px;
	}

.featured-image.book {
	height: 213px;
}


/*Carousel Style*/
/* Carousel section styling */
.book-carousel-section {
	padding: 20px 0;
	text-align: center;
}

.carousel-container {
	position: relative;
	width: 90vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.carousel {
	display: flex;
	gap: 20px;
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
	margin: 0 40px;
}

.carouselVideos img { border: solid 5px white; }

.carousel-item {
	border-radius: 10px;
	padding: 15px;
	width: 270px;
	text-align: center;
	transition: transform 0.3s ease-in-out; /* Smoother hover effect */
}

.carouselBooks .carousel-item:hover {
	transform: scale(1.3);
}

.carouselVideos .carousel-item:hover {
	transform: scale(1.1);
}

	/* Book title styling */
	.carousel-item h4 {
		font-size: 1rem;
		color: #333;
		margin-top: 10px;
	}

/* Carousel control styling */
.carousel-control {
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 2.5rem;
	border: none;
	cursor: pointer;
	padding: 10px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	transition: background-color 0.3s ease;
}

	.carousel-control:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

/* Carousel image styling */
.carousel-image {
	max-width: 100%;
	border-radius: 5px;
	object-fit: cover;
}

/*End Carousel Styles*/

/* Footer Styles */
.footer {
	padding: 40px 0;
	color: #fff; /* Text color */
}

.footer-widgets-inner {
	display: flex;
	justify-content: space-between;
	padding: 0 40px;
	margin: 0 auto;
}

.footer-box {
	flex: 1; /* Each box takes equal width */
	margin: 0 10px; /* Space between columns */
}

	.footer-box h4 {
		margin-bottom: 15px;
		font-size: 1.25rem; /* Adjust font size */
		color: #ffb84d; /* Accent color for headings */
	}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.footer-menu li {
		margin: 8px 0;
		padding-bottom: 5px;
		border-bottom: solid 1px #666;
	}

	.footer-menu a {
		color: #fff; /* Link color */
		text-decoration: none; /* Remove underline */
		transition: color 0.3s ease; /* Smooth color transition */
	}

		.footer-menu a:hover {
			color: #ffb84d; /* Change color on hover */
		}

/* End Footer Styles */