/* General Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #060A0D; /* near-black */
  color: #A47F6F; /* warm taupe */
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.large-text {
  font-size: 44px; /* Adjust size for larger text */
  line-height: 1.2; /* Control spacing for this size */
}

.small-text {
  font-size: 22px; /* Adjust size for smaller text */
  line-height: 1.5; /* Control spacing for this size */
}
/* Scenic Background */
.scenic-background {
  background-image: url("../images/scenic.jpg");
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /* Place behind all content */
  opacity: 0.7; /* Slightly transparent for visibility */
}

.hero-section {
  text-align: center;
  margin: 0;
  padding: 0;
  background: #1A1F24; /* deep charcoal */
  color: #C5630C; /* burnt orange */
  position: relative; /* Container for stacking images */
  width: 100vw; /* Full width of the viewport */
  height: 100vh; /* Full height of the viewport */
  overflow: hidden; /* Prevent content overflow */
}

/* Parallax Image Stack */
.image-stack {
  position: relative;
  width: 100%;
  height: 100vh; /* Match the viewport height */
  overflow: hidden; /* Prevent images from spilling out */
  transform-style: preserve-3d; /* Enable 3D transforms */
}

/* General Parallax Image Styles */
.parallax {
  position: absolute; /* Ensure z-index is respected */
  width: 100%;
  height: 100%; /* Ensure images cover the stack area */
  object-fit: cover;
  will-change: transform; /* Optimized for smooth scrolling animations */
}

/* Layering: Front to Back */
.fog-front-img {
  z-index: 6; /* Frontmost layer */
  transform: translateZ(0) scale(1.1); /* Moves the slowest */
}

.profile-img {
  z-index: 5;
  position: absolute; /* Keep it part of the parallax stack */
  transform: translateZ(-0.1px) scale(1.05); /* Slightly faster */
}

.halo-img {
  z-index: 4;
  transform: translateZ(-0.2px) scale(1.03);
}

.name-img {
  z-index: 3; /* Maintain its layer order */
  position: absolute; /* Needed for precise positioning */
  top: 60%; /* Default position across screen sizes */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -40%); /* Lowered further from the top */
  max-width: 80%; /* Ensure the image doesn't overflow on small screens */
  height: auto; /* Maintain aspect ratio */
}

.fog-rear-img {
  z-index: 2;
  transform: translateZ(-0.4px) scale(0.97); /* Faster */
}

.background-img {
  z-index: 1; /* Backmost layer */
  transform: translateZ(-0.5px) scale(0.95); /* Moves the fastest */
}

/* Parallax Animation Effect */
.image-stack img {
  position: absolute;
  top: 0; /* Reset for parallax effect */
  left: 0;
  width: 100%;
  height: 100%; /* Cover the container */
  object-fit: cover; /* Maintain aspect ratio */
  will-change: transform; /* Optimize for parallax animations */
}
/* Sticky Navbar Styles */
.navbar {
  display: flex;
  justify-content: center; /* Center the links */
  align-items: center; /* Centers items vertically */
  background-color: #33353A; /* Dark gray background */
  padding: 10px 0; /* Padding around the navbar */
  position: relative; /* Default position */
  z-index: 1000; /* Ensure it stays above other content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.navbar.sticky {
  position: fixed; /* Makes the navbar sticky */
  top: 0; /* Stick to the top of the viewport */
  width: 100%; /* Full width */
  background-color: #444; /* Optional: Darker color when sticky */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Stronger shadow when sticky */
}

/* Navbar Links */
.navbar a {
  color: #FFA871; /* Light orange */
  text-decoration: none; /* Remove underline */
  font-size: 16px; /* Base font size */
  font-weight: bold;
  padding: 0 15px; /* Spacing between links */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.navbar a:hover {
  color: #C5630C; /* Burnt orange on hover */
  font-size: 18px; /* Slight increase in font size */
  transform: scale(1.3); /* Enlarge slightly */
  cursor: pointer;
}

/* Social Media Navbar */
.social-navbar {
  display: flex;
  flex-direction: column; /* Arrange icons vertically */
  align-items: center; /* Center icons horizontally within the navbar */
  position: sticky; /* Attach to main navbar */
  top: 50px; /* Stick right below the main navbar */
  z-index: 999; /* Keep above other elements */
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  border-radius: 5px; /* Rounded corners */
  padding: 0; /* Remove padding */
  width: 100px; /* Manually set the background width */
  height: auto; /* Adjust height automatically */
}

/* Adjust spacing between icons */
.social-navbar a {
  margin: 1px 0; /* Space between icons */
}

/* Social Media Icons */
.social-icon {
  width: 80px; /* Default size */
  height: auto; /* Maintain aspect ratio */
  margin: 10px 0; /* Space between icons */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth hover effect for size and opacity */
  cursor: pointer; /* Show pointer cursor on hover */
  opacity: 0.5; /* Set starting opacity */
}

/* Hover Effect */
.social-icon:hover {
  transform: scale(2.0); /* Enlarge on hover */
  opacity: 1; /* Increase to full opacity on hover */
}

/* Text Animation for Scrollytelling */
.content-box .content-text {
  opacity: 0; /* Start hidden */
  transform: translateX(-100%); /* Off-screen */
  transition: all 0.7s ease-out; /* Smooth entry animation */
  font-size: 32px; /* Slightly larger text size */
  font-weight: bold; /* Bold text */
  color: #FF914D; /* Darker color for readability */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9); /* Default shadow */
}

.content-box.in-view .content-text {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Slide into place */
}

.content-box.exiting .content-text {
  opacity: 0; /* Hide text */
  transform: translateX(-100%); /* Slide out to the left */
}
/* Content Box Styles (Frosted Glass Effect) */
.content-box {
  position: relative;
  margin: 100px auto; /* Add spacing between sections */
  width: 150%; /* Adjust width of the box */
  max-width: 1600px; /* Optional: cap the max width */
  background: rgba(255, 255, 255, 0.3); /* Transparent white */
  backdrop-filter: blur(10px); /* Apply frosted glass blur */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  padding: 5px;
  border-radius: 10px; /* Rounded corners */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  min-height: 400px; /* Increase the minimum height */	
}
.content-section {
  margin: 0 auto; /* Center content */
  padding: 30px 0; /* Equal top and bottom padding */
  width: 100%; /* Adjust as needed for layout */
  max-width:inherit
}

/* General Carousel Container */
.carousel-container, .blogazine-carousel-container {
  position: relative;
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center; /* Centers images vertically */
  overflow: visible; /* Allow enlarged images to display */
  height: 400px; /* Automatically adjust to content */
}

/* Video Gallery Carousel */
#video-gallery .carousel-container {
  height: 350px; /* Adjust height for the video gallery carousel */
}

#video-gallery .carousel img {
  width: 350px; /* Base width for video gallery images */
  height: auto; /* Maintain aspect ratio */
  margin: 0 20px; /* Specific margin for video gallery images */
  cursor: pointer; /* Indicate interactivity */
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; /* Smooth hover scaling and margin changes */
  object-fit: contain; /* Ensure the entire image remains visible */
}

/* Blogazine Carousel */
#blogazine .carousel-container {
  height: 600px; /* Adjust height for the blogazine carousel */
}

#blogazine .carousel img {
  width: 400px; /* Base width for blogazine images */
  height: auto; /* Maintain aspect ratio */
  margin: 0 20px; /* Specific margin for blogazine images */
  cursor: pointer; /* Indicate interactivity */
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; /* Smooth hover scaling and margin changes */
  object-fit: contain; /* Ensure the entire image remains visible */
}
/* General Carousel Track */
.carousel, .blogazine-carousel {
  display: flex; /* Align items horizontally */
  transition: transform 0.5s ease; /* Smooth sliding transition */
  will-change: transform; /* Optimize for smooth animations */
  padding: 50px 0; /* Add padding to prevent clipping on hover */
}

/* General Carousel Images */
.carousel img, .blogazine-carousel img {
  width: 350px; /* Base width */
  height: auto; /* Maintain aspect ratio */
  margin: 0 1px; /* Space between images */
  cursor: pointer; /* Indicate interactivity */
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; /* Smooth hover scaling and margin changes */
  object-fit: contain; /* Ensure the entire image remains visible */
}

/* Hover Effect for Carousel Images */
.carousel img:hover, .blogazine-carousel img:hover {
  transform: scale(1.15); /* Scale up the image */
  margin: 0 10px; /* Increase margin to make room for the enlarged image */
  z-index: 10; /* Bring hovered image to the foreground */
}
/* Explore Section Buttons */
.explore-section, .blogazine-explore-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Adjust spacing between elements */
  margin-top: 10px; /* Add some spacing from the carousel */
}

/* Back and Next Buttons */
.explore-button, .blogazine-back-button, .blogazine-next-button {
  width: 150px; /* Adjust this value to resize the buttons */
  height: auto; /* Maintain aspect ratio */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.explore-button:hover, .blogazine-back-button:hover, .blogazine-next-button:hover {
  transform: scale(1.1); /* Slight enlargement on hover */
}

.back-button, .blogazine-back-button {
  order: -1; /* Ensures it appears to the left of the text */
}

.next-button, .blogazine-next-button {
  order: 1; /* Ensures it appears to the right of the text */
}
	
/* Footer Styles */
footer p {
  margin: 0;
  font-size: 14px;
}