/* Add these styles at the top of your CSS file */
html, body {
    height: auto; /* Ensure the full height of the content dictates the height */
    min-height: 100%; /* Minimum height should be at least the viewport height */
    margin: 0;
    padding: 0;
    overflow: auto; /* Allow scrolling on the entire document */
}

body {
    display: flex;
    flex-direction: column;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #fff;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

header, nav {
    box-shadow: none; /* Remove box shadow if present */
}

/* Reset some basic elements */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* Main content area */
header {
    flex: 1 0 auto;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url('images/alaska.jpg');
    background-size: cover;
    background-position: center;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ff4081; /* Bright pink */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4),
                 0 0 3px rgba(0, 0, 0, 0.3),
                 0 0 6px rgba(0, 0, 0, 0.2);
}

.hero h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff; /* White */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    margin-top: -10px;
}

.cta-button {
    background-color: #e91e63;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px; /* Add some space above the button */
}

nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0); /* Change to a darker shade or increase opacity */
}

nav .container {
    display: flex;
    justify-content: flex-end; /* Right justify the buttons */
    width: 100%; /* Ensure the container spans the full width */
    padding-right: 0; /* Remove any padding on the right */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    padding: 10px 20px; /* Adjust padding for spacing */
    transition: color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for color and shadow */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
    border: 1px solid transparent; /* Transparent border for consistent sizing */
}

nav ul li a:hover {
    color: #ff4081; /* Change text color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
    border: 1px solid #ff4081; /* Add border on hover */
}

.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.content h2 {
    color: #333;
    margin-bottom: 20px;
}

.content p, .content ul {
    margin-bottom: 20px;
}

.about-page {
    height: 100vh;
    overflow: hidden;
}

.about-header {
    background-image: url('images/bears_alaska.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff; /* Missing closing brace added here */
}

.about-header h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 5px; /* Reduced from 10px to 5px */
    color: #ff4081; /* Bright pink */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4),
                 0 0 5px rgba(0, 0, 0, 0.3),
                 0 0 10px rgba(0, 0, 0, 0.2);
    margin-top: -100px;
}

.about-header h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff; /* White */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    margin-top: 0px; /* Reduced from -10px to 0px */
}

/* Styles for the rentals page */
.rentals-page {
    position: relative; /* For positioning the content */
    overflow: visible; /* Explicitly allow overflow */
}

header, .rentals-header, .rentals-hero, .rental-listings, .container {
    overflow: visible; /* Override any potential hidden overflow settings */
}

.rentals-header {
    height: 50vh; /* Adjust to cover half the viewport height */
    background-image: url('images/alaska_river.jpg'); /* First background image */
    background-size: cover;
    background-position: center;
    position: relative; /* Change to relative */
}

.rentals-hero {
    position: absolute;
    top: 200px; /* Adjust as needed */
    left: 0;
    right: 0;
    text-align: center;
}

.rentals-hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ff4081; /* Bright pink */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4),
                 0 0 5px rgba(0, 0, 0, 0.3),
                 0 0 10px rgba(0, 0, 0, 0.2);
}

.rentals-hero h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff; /* White */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Rental listings styles */
.rental-listings {
    position: relative; /* Position relative to allow negative margin usage */
    margin-top: -100px; /* Negative margin to pull the grid up into the header area */
    padding: 20px 0;
    background-image: url('images/alaska_drone_2.jpg'); /* Second background image */
    background-size: cover;
    background-position: center;
    background-color: transparent; /* Ensure background doesn't block header image */
}

.rental-listings .container {
    display: flex; /* Use flexbox to align children */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically in the container */
    align-items: center; /* Center children horizontally */
    height: 100%; /* Take full height of its parent */
}

.rental-grid {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally */
    gap: 30px; /* Space between items */
    padding: 20px; /* Padding around the grid */
    max-width: 1200px; /* Maximum width of the grid */
    width: 100%; /* Full width to utilize the space */
}

.rental-item {
    width: 300px; /* Fixed width for each box */
    height: 500px; /* Adjusted height to be 500px */
    display: flex; /* Use flexbox for layout inside each item */
    flex-direction: column; /* Stack children vertically */
    justify-content: space-between; /* Distribute space between items */
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.rental-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.9); /* More opaque on hover */
}

.rental-item h3, .rental-item p, .rental-item a {
    color: #000; /* Set text color to black */
    padding: 5px 15px; /* Reduced padding for headings and paragraphs */
}

.rental-item img {
    width: 80%; /* Reduce width to not cover the full box width */
    height: 200px; /* Set a fixed height */
    object-fit: cover; /* Ensure the image covers the area without distorting */
    border-radius: 5px; /* Optional: add a border radius if desired */
    margin: 20px auto; /* Center the image horizontally and add space above and below */
}

.rental-item .btn {
    display: inline-block;
    background-color: #e91e63;
    color: #fff; /* Ensure button text is also white */
    padding: 8px 16px; /* Slightly reduced padding for the button */
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    margin: 5px 15px 15px; /* Reduced margin around the button */
    transition: background-color 0.3s ease;
}

.rental-item .btn:hover {
    background-color: #ff4081; /* Lighter pink on hover */
    color: #fff; /* Ensure hover text is also white */
}

/* Styles for the contact page */
.contact-page {
    height: 100vh;
    overflow: hidden;
}

.contact-header {
    background-image: url('images/alaska_mountain.jpg'); /* Ensure this path is correct */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contact-hero {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Remove or adjust the background-color property */
    /* background-color: rgba(0, 0, 0, 0.3); */
}

.contact-hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ff4081; /* Bright pink */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4),
                 0 0 5px rgba(0, 0, 0, 0.3),
                 0 0 10px rgba(0, 0, 0, 0.2);
}

.contact-hero h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff; /* White */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.email-button {
    background-color: #e91e63;
}

.call-button {
    background-color: #e91e63;
}

.call-button:hover {
    background-color: #ff4081;
}

.contact-buttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.contact-button {
    display: inline-block;
    background-color: #e91e63;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-button:hover {
    background-color: #ff4081;
    transform: translateY(-2px);
}

.email-button {
    background-color: #e91e63;
}

/* Carousel styles */
.carousel-container {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0; /* Light gray background to see the container */
    min-height: 300px; /* Ensure a minimum height */
}

.carousel {
    height: 100%;
    position: relative; /* Ensure relative positioning */
}

.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel img.active {
    opacity: 1;
    z-index: 1; /* Ensure active image is on top */
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

/* Responsive adjustments */
@media (max-height: 600px) {
    .carousel-container {
        height: 30vh;
    }
}

/* Styles for the photos page */
.photos-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.photos-header {
    background-image: url('carousel_images/alaska_glacier.jpg');
    background-size: cover;
    background-position: center;
    height: 50vh; /* Reduced to 50% of viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.photos-hero {
    text-align: center;
}

.photos-hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ff4081; /* Bright pink */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4),
                 0 0 5px rgba(0, 0, 0, 0.3),
                 0 0 10px rgba(0, 0, 0, 0.2);
}

.photos-hero h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffffff; /* White */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.carousel-container {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0; /* Light gray background */
    height: 50vh; /* Set to 50% of viewport height */
}

.carousel {
    height: 100%;
    position: relative;
}

.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel img.active {
    opacity: 1;
    z-index: 1;
}

.instagram-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.instagram-item {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}

.instagram-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden; /* Check if this needs adjustment */
}

.about-content {
    position: absolute; /* Position it over the photo */
    top: 75%; /* Adjust this value to position it correctly over the photo */
    left: 50%;
    transform: translate(-50%, -50%); /* Center it perfectly */
    width: 50%; /* Adjust width as necessary */
    padding: 20px;
    background-color: transparent; /* No background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds subtle shadow for depth */
    z-index: 5; /* Lower than header to keep text on top */
}

.about-text-box {
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    text-align: center; /* Ensures text is centered if it breaks into multiple lines */
    padding: 20px; /* Provides padding around the content */
    background-color: rgba(255, 255, 255, 0.8); /* Example background */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
}

.about-text-box p {
    color: rgba(0, 0, 0, 1); 
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-text-box p:last-child {
    margin-bottom: 20px;
}

.scroll-indicator {
    position: absolute;
    bottom: 200px; /* Position it at the bottom of the header */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's perfectly centered */
    font-size: 2rem; /* Adjust size as needed */
    color: white; /* Choose a color that stands out from the background */
    z-index: 1000; /* Higher index to ensure it's on top */
    animation: bounce 2s infinite; /* Add a bouncing animation */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-20px);
    }
    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@media (max-width: 768px) {
    .about-header {
        top: -30px; /* Less movement on smaller screens */
    }

    .about-content {
        top: 60%; /* Adjust positioning for smaller devices */
        width: 100%; /* Full width on smaller screens */
    }
}