/* Base Styles */
body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #141414; /* Website background color */
    font-family: 'Poppins', sans-serif; /* Custom font */
}

/* Header Styles */
#site-header {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10; /* Ensures it appears above the video */
}

#site-header h2 {
    margin: 0;
    font-size: 2rem; /* Medium heading size */
    color: yellow; /* Bright yellow color */
    opacity: 0.8; /* 80% opacity */
    font-weight: 700; /* Bold weight */
    text-transform: uppercase; /* Optional: Makes text uppercase */
    letter-spacing: 2px; /* Adds spacing for a clean look */
    text-shadow: 0px 2px 8px rgba(0, 0, 0, .35); /* Subtle shadow for more spread */
}

/* Video Container Styles */
/* Center the video in its container */
.video-container {
    position: relative;
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    overflow: hidden; /* Hide any overflow */
    height: 100vh; /* Full viewport height */
    width: 100%;
}

.video-container video {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for the center */
    min-width: 100%; /* Ensure it covers the width */
    min-height: 100%; /* Ensure it covers the height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    z-index: -1; /* Keep behind other elements */
}

/* Overlay styles */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #14141420; /* Semi-transparent black overlay */
    z-index: 1; /* Ensures the overlay is above the video */
    pointer-events: none; /* Prevents the overlay from blocking interactions */
}

/* Link Section Styles */
.link-section {
    text-align: center;
    background: url('../media/Artboard\ 1\ -\ 20.png') repeat fixed, #000000f5; /* Background image and semi-transparent overlay */
    background-attachment: scroll;
}

.link-section a {
    font-size: 1.5rem; /* Adjust size for visibility */
    color: white; /* Default text color */
    text-decoration: none; /* Remove default underline */
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease; /* Smooth transition for text color */
}

.link-section a:hover {
    color: white; /* Keep text white on hover */
}

/* Animated Underline */
.link-section a::after {
    content: ''; /* Pseudo-element for the underline */
    position: absolute;
    left: 0;
    bottom: -5px; /* Position the underline below the text */
    width: 0; /* Start with no width */
    height: 2px; /* Thickness of the underline */
    background: yellow; /* Yellow underline */
    transition: width 0.3s ease; /* Smooth animation for underline */
}

.link-section a:hover::after {
    width: 100%; /* Expand underline to full width on hover */
}

/* Separator Line */
.separator {
    height: 8px; /* Increased height */
    background-color: black;
    width: 100%; /* Stretches across the viewport */
    margin: 0; /* Ensures no extra spacing */
}


/* Dynamic Section Styles */
.dynamic-section {
    padding: 10px;
    color: white;
    text-align: center;
    /* min-height: 300px; /* Minimum height to ensure a defined section area */
    min-height: 20vh;
}

#dynamic-content {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 20px auto;
}

/* Styles for the main video */
.video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

/* Styles for content-specific videos */
.content-video {
    display: block; /* Ensures it's block-level */
    margin: 20px auto; /* Center horizontally with some vertical margin */
    max-width: 80%; /* Limits video width to 80% of container */
    height: auto; /* Maintains aspect ratio */
}

/* Base styles for links */
.link-section a {
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

/* Animated underline for hover */
.link-section a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: yellow;
    transition: width 0.3s ease;
}

.link-section a:hover::after {
    width: 100%;
}

/* Active link underline */
.link-section a.active::after {
    width: 100%; /* Fully underline the active link */
    background: yellow; /* Yellow underline for active link */
}

footer {
    background-color: black;
}

/* Footer Styling */
.footer-container {
    width: 100%; /* Full width of the screen */
    color: white;
    padding: 30px;
    padding-right: 40px;
    display: flex;
    justify-content: space-between; /* Space between branding and links */
    align-items: center; /* Vertically center items */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    max-width: 1200px; /* Restrict footer content width */
    margin: 0 auto; /* Center the container horizontally */
}

/* Branding (Left-aligned) */
footer h3 {
    margin: 0;
    font-size: 1.6rem;
    color: white; /* Yellow color for the text */
    padding-left: 10px; /* Add space between text and border */
}

footer a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    position: relative;
    font-size: 1.2rem;
    display: inline-block;
    transition: all 0.3s ease;
}

footer .footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: yellow;
    transition: width 0.3s ease;
}

footer .branding {
    padding-left: 5px; /* Add space between text and border */
    border-left: 2px solid yellow; /* Yellow left border */
    text-align: left;
}


/* Links (Right-aligned) */
footer .footer-links {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: flex-end; /* Align links to the right */
    margin: 0; /* Reset default margin */
    padding: 0; /* Reset default padding */
    list-style: none; /* Remove bullet points */
}

footer .footer-links a {
    text-decoration: none;
    color: white;
    margin-bottom: 5px; /* Vertical spacing between links */
    transition: color 0.3s ease;
}

footer .branding a {
    color: rgb(119, 201, 252) !important;
}

footer a:hover::after {
    width: 100%;
}

.email-copy button {
    all: unset; /* Resets all inherited styles */
    cursor: pointer; /* Ensures the pointer shows for clickable buttons */
    font-size: 1.2rem; /* Adjusts font size */
    color: white; /* Sets default color */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.email-copy button:hover {
    color: yellow;
}

.gallery-section {
    column-count: 3; /* Number of columns in the masonry layout */
    gap: 10px; /* Space between items */
    width: 100%;
    box-sizing: border-box; /* Includes padding in the overall size */
    align-items: center;
}

.gallery-section img {
    width: 100%;
    height: auto;
    border: 15px solid white; /* Add a 20px white border */
    box-sizing: border-box; /* Ensures border is part of the element's dimensions */
    margin-top: 5px;
    margin-bottom: 5px;
}

.gallery-section {
    column-count: 2; /* Default for small screens */
}

@media (min-width: 600px) {
    .gallery-section {
        column-count: 2; /* Two columns for medium screens */
    }
}

/* Medium screens - tablets */
@media (min-width: 768px) and (max-width: 1279px) {
    /* Styles for small and medium tablets */
    .gallery-section {
        column-count: 3; /* Three columns for medium screens */
    }
}

/* Large screens - small laptops */
@media (min-width: 1279px) {
    /* Styles for small laptops */
    .gallery-section {
        column-count: 4; /* Four columns for larger screens */
    }
}

/* Snap container */
.snap-container {
    scroll-snap-type: y mandatory; /* Enable vertical snapping */
    overflow-y: scroll; /* Allow vertical scrolling */
    height: 100vh; /* Full viewport height */
    scroll-behavior: smooth; /* Smooth scroll effect */
}

/* Override the overflow for the heading over the video */
#site-header {
    position: absolute !important;
}

/* Each snap section */
.snap-container > section {
    scroll-snap-align: start; /* Align the top of the section with the viewport */
}

/* Link section with free scrolling */
.link-section {
    scroll-snap-align: start end; /* Allow snapping to this section */
    scroll-snap-stop: normal; /* Stop enforcing further snapping after reaching this section */
}

.free-scroll-area {
    scroll-snap-type: none; /* Disable snap behavior for this block */
}

footer {
    scroll-snap-align: end; /* Allow the footer to align at the bottom */
}

.min-height-100vh {
    min-height: 100vh;
}


/* Video wrapper */
.landing-video {
    height: 100vh;
    display: flex;
    align-items: flex-end;
    position: relative; /* Important for the branding overlay */
}

.dynamic-section-content {
    min-height: 100vh;;
}

.gallery-name {
    text-align: left;
}