/* GLOBAL STYLES */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #1a1a1a; /* Your 'border' color */
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nav-left, .nav-icons-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust this to change the space between the text and icons */
}

html {
    scroll-behavior: smooth; /* This enables the smooth sliding effect */
}

/* SECTION CONTAINER */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 80vh; /* Minimum height is 80% of screen */
    height: auto;      /* Allows expansion if content is long */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    padding-bottom: 20px; /* Space for the gray border at the bottom */
    scroll-margin-top: 60px;
}

/* BACKGROUND IMAGE LAYER */
.section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh; /* Fixed height so it doesn't scale weirdly */
    object-fit: cover; /* Acts like background-size: cover */
    z-index: 1; 
}

/* LOGO POSITIONING */
.logo-wrapper {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.main-logo {
    width: 676px;
    height: auto;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3));
}

@media (max-width: 600px) {
    .main-logo { width: 400px; }
}

/* TEXT BLOCKS */
.overlay-text {
    position: relative; /* Default is relative to stack naturally */
    z-index: 10;
    background-color: rgba(40, 40, 40, 0.75); 
    color: white;
    padding: 20px 30px;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(3px);
    width: auto;
    max-width: 800px;
    margin-bottom: 20px; /* Space before the GIF */
}

/* CONTENT STACK (For Sections 2 & 3) */
.content-stack {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin-top: 5vh; /* Initial offset from top */
}

/* INSET IMAGES / GIFS */
.inset-image-wrapper {
    position: absolute;
    z-index: 5;
}

.inset-img {
    position: relative;
    z-index: 10;
    display: block;
    height: auto;
}

/* UTILITY CLASSES */
.pos-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Pushes the content-stack to the left side */
.align-left {
    align-items: flex-start !important; 
    padding-left: 5%; /* Keeps text from touching the screen edge */
}

/* Pushes the content-stack to the right side */
.align-right {
    align-items: flex-end !important;
    padding-right: 5%; /* Keeps text from touching the screen edge */
}

/* Inside the stack, make the text align to the left for better readability */
.align-left .overlay-text {
    text-align: left;
}

/* Inside the stack, make the text align to the right to match the layout */
.align-right .overlay-text {
    text-align: left; /* Usually keeps text left-aligned inside the block for legibility */
}

/* When inside an align-left section, align the text inside the stack to the left */
.align-left .content-stack {
    align-items: flex-start; /* Keeps the block and images to the left */
    text-align: left;
    margin-left: 5%; /* Adds a buffer from the left edge */
    margin-right: auto;
}

/* When inside an align-right section, align the text inside the stack to the right */
.align-right .content-stack {
    align-items: flex-end; /* Keeps the block and images to the right */
    text-align: left; /* Keep text left-aligned inside the gray box for readability */
    margin-right: 5%; /* Adds a buffer from the right edge */
    margin-left: auto;
}

/* Fix the image row alignment within these sections */
.align-left .image-row {
    justify-content: flex-start;
}

.align-right .image-row {
    justify-content: flex-end;
}

.align-left .overlay-text, .align-right .overlay-text {
    max-width: 550px; /* Adjust this number to match your screenshot preference */
}

.image-row {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
    width: 100%; /* Take up the full width of the stack to allow centering */
    justify-content: center !important; /* Forces images to stay in the middle */
}

.row-img {
    width: 300px; /* Adjust based on your screenshot's size */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.straddle {
    position: relative;
    z-index: 999;       /* Higher than the background images (1) and text (10) */
    margin-top: 100px; /* Adjust this number to change how much it 'straddles' */
    margin-bottom: 0px;
}

/* Optional: Add a 'glow' or border to make the straddling image stand out */
.straddle img {
    border: 3px solid #1a1a1a; /* Matches your gray border/background color */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.side-by-side {
    display: flex;
    flex-direction: row;
    align-items: center;    /* Vertically aligns images with the center of the text */
    justify-content: center;
    align-items: flex-start; /* Aligns the tops of both columns */
    gap: 40px;               /* Space between images and text */
    width: 100%;
}

/* The column for your two images */
.image-column {
    display: flex;
    flex-direction: column;
    gap: 20px;               /* Space between the two images */
    flex: 1;                 /* Allows it to take up space proportionally */
    max-width: 500px;        /* Limits how big the images get */
}

.side-img {
    width: 100%;
    height: auto;
    border: 3px solid #1a1a1a;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Ensure the text block stays tidy next to images */
.side-by-side .overlay-text {
    flex: 1.5;               /* Gives the text a bit more room than the images */
    margin-bottom: 0;        /* Reset margin since gap handles it now */
}

/* MOBILE FIX: Stack them vertically when the screen is narrow */
@media (max-width: 1000px) {
    .side-by-side {
        flex-direction: column-reverse; /* Puts images below text on phones */
        align-items: center;
    }
    .image-column {
        max-width: 100%;
    }
}




.top-nav {
    position: sticky; /* Keeps it at the top as you scroll */
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #222; /* Match your dark gray theme */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes content to the far left and right */
    padding: 0 5%;
    z-index: 9999; /* Higher than everything else */
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Left Side Styling */
.nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    font-size: 0.9rem;
}

.nav-icon img {
    height: 24px; /* Adjust based on your icon size */
    width: auto;
    display: block;
    transition: transform 0.2s;
}

.nav-icon:hover img {
    transform: scale(1.1);
}

/* Right Side Styling */
.nav-right {
    display: flex;
    gap: 30px;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #00acee; /* Highlight color on hover */
}

.nav-link.active {
    color: #55acee; /* Different color for the active page */
}

.map-responsive {
    width: 791px !important; 
    max-width: 100% !important; 
    height: auto !important;
    flex-shrink: 1;
    display: block;
    margin: 0 auto;
    min-width: 0;
}