/* Basic Reset to Avoid Conflicts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


/* Apply Font Family */
html,
body {
    font-family: Arial, sans-serif;
    background-color: #272729;
    color: white;
}

.caution {
background-color: #000000;
font-size: 1em;
}
/* Basic Styles for Hero Section */
.hero {
    background-image: url('images/hero-image.jpg');
    /* Your desired background image */
    background-size: cover;
    /* Ensures the image fully covers the area */
    background-position: center center;
    /* Keeps the image centered */
    background-repeat: no-repeat;
    /* Prevents the image from repeating */
    height: 100vh;
    /* Makes the hero section take up the full viewport height */
    display: flex;
    flex-direction: column;
    /* Stack content vertically */
    justify-content: center;
    /* Vertically center the main content (title and description) */
    align-items: center;
    /* Horizontally center the content */
    text-align: center;
    color: white;
    position: relative;
    /* Makes it the reference for absolutely positioned elements */
}

.hero-content {
    max-width: 800px;
    /* Limit the width of the content */
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Stack the text and button vertically */
    justify-content: center;
    /* Vertically center the content */
    align-items: center;
    /* Horizontally center the content */
}

.hero h1 {
    font-size: 3em;
    color: #ff00a6;
    text-shadow: 2px 2px 5px rgba(255, 0, 166, 0.5);
}

.hero .artist-title {
    font-size: 1.2em;
    margin-top: 15px;
    /* Space between the title and description */
}

.wip {
    /*position: fixed; */
    top: 100px;
    left: 100px;

}

.wip h1 {
    text-align: center;
    font-size: 1em;
    color: #ffffff;
}

/* Social Media Links in Top Left Corner */
/* Social Media Links in Top Left Corner */
/* Social Media Links in Top Left Corner */
/* Social Media Links in Top Left Corner */
/* Social Media Links in Top Left Corner */
.social-links {
    position: fixed !important;
    /* Fix the social icons to top-left */
    top: 20px;
    /* Distance from the top of the page */
    left: 20px;
    /* Distance from the left of the page */
    display: flex;
    gap: 20px;
    /* Space between the icons */
    z-index: 1000;
    /* Ensure they stay above other content */
    margin: 0;
}











/* Navigation bar stays at the top-right */
nav {
    position: fixed !important;
    top: 20px;
    /* Distance from the top of the page */
    right: 20px;
    /* Distance from the right of the page */
    z-index: 999;
    /* Ensures navigation bar stays above content, but below social icons */
}

/* Social Icon Styles */
.social-icon {
    text-decoration: none;
    color: white;
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: limegreen;
    transform: scale(1.1);
}

/* Navigation bar links (add if necessary) */
nav a {
    text-decoration: none;
    color: white;
    padding: 10px;
    font-size: 1.2em;
}

nav a:hover {
    color: limegreen;
}

/* Ensure header (and any other elements) don't interfere */
header {
    position: relative !important;
    z-index: 1;
    /* Keep header below social icons and navigation bar */
}

/*bahhhh*/



/* Hero Content Styling (Title and Button) */

/* New Button Container for Flexbox */
.button-container {
    display: flex;
    gap: 20px;
    /* Space between the buttons */
    margin-top: 20px;
}

.cta-button {
    padding: 15px 30px;
    font-size: 1.2em;
    background-color: limegreen;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    flex-grow: 1;
    /* Makes both buttons have the same width */
    text-align: center;
    /* Center text inside the buttons */
}

/* Hover effect for both buttons */
.cta-button:hover {
    background-color: #00ff7f;
    transform: scale(1.05);
}

/* Navigation Menu on Top Right */
header {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    /* Ensure it's on top of other elements */
}

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

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: limegreen;
}

/* Dropdown Menu with Slide Down and Fade In Effect */
.dropdown {
    position: relative !important;
    display: inline-block !important;
}

.dropbtn {
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
    /* Make it behave like a link */
}

/* Hover effect for dropdown button */
.dropbtn:hover {
    color: limegreen;
    /* Change text color to lime green */
}

/* Dropdown content with smooth sliding and fade-in */

/* Dropdown Menu with Smooth Sliding and Fade-in */
.dropdown-content {
    position: absolute;
    background-color: transparent;
    /* Ensure no default background */
    min-width: 160px;
    left: 0;
    top: 100%;
    /* Positioned directly below the dropdown button */
    max-height: 0;
    /* Initially hidden */
    opacity: 0;
    /* Initially hidden */
    visibility: hidden;
    /* Ensure the dropdown is hidden */
    overflow: hidden;
    /* Prevent overflow when collapsed */


    z-index: 1;
    /* Ensure it's above other content */
    top: 100%;
    /* Position it directly below the dropdown button */
    left: 0;
    /* Align the dropdown items with the left side of the parent */



    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s;
    /* Smooth sliding effect */

}

/* Show dropdown content when hovered (Slide Down + Fade In) */
.dropdown:hover .dropdown-content {
    max-height: 300px;
    /* Adjust the max-height to reveal content */
    opacity: 1;
    /* Make the dropdown visible */
    visibility: visible;
    /* Ensure the dropdown is interactable */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s;
    /* Smooth slide-down + fade-in */
}

/* Dropdown links */
.dropdown-content a {
    color: white;
    padding: 10px;
    text-decoration: none;
    display: block;
    background-color: transparent !important;
    /* Set background to transparent */
    border: none;
    transition: color 0.3s ease;
    /* Smooth transition for color */
    outline: none;
    /* Remove the focus outline */
}

/* Remove the blue background on hover, focus, and active */
.dropdown-content a:hover,
.dropdown-content a:focus,
.dropdown-content a:active {
    background-color: transparent !important;
    /* Ensure no background color */
    color: limegreen;
    /* Change text color to lime green */
    outline: none !important;
    /* Ensure no focus outline */
    box-shadow: none !important;
    /* Remove any box-shadow */
}

/* Prevent the blue background when focused */
.dropdown-content a:focus-visible {
    background-color: transparent !important;
    color: inherit !important;
    /* Keep the original text color */
    outline: none !important;
    box-shadow: none !important;
}

/* Footer text in the lower-right corner */
.footer-text {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: white;
    font-size: 14px;
    font-style: italic;
    /* To give it a slightly different style */
    z-index: 1000;
    /* Ensure it's on top of other elements */
    text-align: right;
}



/* Add background image for the About page */
.about-cv {
    background-image: url('images/about-background.jpg');
    /* Path to your image */
    background-size: cover;
    /* Ensures the image covers the full area */
    background-position: center center;
    /* Keeps the image centered */
    background-repeat: no-repeat;
    /* Prevents the image from repeating */
    height: 100vh;
    /* Full viewport height */
    color: white;
    /* Change text color to ensure visibility */
}

/* Styling for the About section content */
.about-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    z-index: 10;
    position: relative;
    /* Ensure content is above background */
}

.about-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1.2em;
}

/* INSTALLATION PROJECTS PAGE FROM HERE /*

/* Basic Reset to Avoid Conflicts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Social Media Links in Top Left Corner */
.social-links {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 20px;
    z-index: 1000;
}

.social-icon {
    text-decoration: none;
    color: white;
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: limegreen;
    transform: scale(1.1);
}



/*.portfolio-title {
    padding: 20px;
    text-align: center;
}

.portfolio-title h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
} */

/* Container for the Installation Projects */
.projects-container {
    padding: 20px;
    text-align: center;
}

.projects-container h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

/* 4x2 Grid Layout for Installation Projects */
#projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 4 columns */
    grid-gap: 20px;
    /* Space between grid items */
    max-width: 1200px;
    margin: 0 auto;
}

/* 2x3 Grid Layout for Visuals & VJ Projects */
#visuals-vj-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns */
    grid-gap: 20px;
    /* Space between grid items */
    max-width: 1200px;
    margin: 40px auto 0 auto;
    /* Space from the previous section */
}

/* Each project item */
.project-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Adjust the image size */
.project-item img {
    width: 100%;
    /* Set the image width to fill the grid cell */
    height: auto;
    /* Maintain aspect ratio */
    object-fit: cover;
    /* Ensure the image covers the area without distorting */
    border-radius: 8px;
    transition: transform 0.3s ease;
    max-height: 350px;
    /* Adjust this value to increase or decrease the height */
}

.project-item:hover img {
    transform: scale(1.05);
    /* Slight zoom effect on hover */
}

/* Title for each project */
.project-title {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 1.2em;
    border-radius: 0 0 8px 8px;
}

/* FOR PROJECT 1 */
h1 {
    text-align: center;
    font-size: 3em;
    margin-top: 100px;
    /* Adjusted for header */
}

.project-details {
    padding: 40px;
    text-align: left;
}


.large-image {
    width: 80%;
    /* Adjust as needed */
    max-width: 1000px;
    margin: 20px auto;
    display: block;
}

.project-description {
    font-size: 1.2em;
    margin-top: 20px;
    line-height: 1.6;
    max-width: 900px;
    margin: 20px auto;
}

.video-embed {
    margin-top: 30px;
    text-align: center;
}

iframe {
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
    display: block;
}

footer {
    padding: 20px;
    background-color: #111;
    color: white;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;

}

/* Alternative Images Section */
/* Alternative Images Section */
.alternative-images {
    margin-top: 30px;
    text-align: center;
}

.alternative-images h2 {
    text-align: center;
    margin-bottom: 20px;
    /* Add space between the title and images */
}

/* Image container to hold both the image and credit */
#vj-alt-images,
#installation-alt-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    /* Ensures images wrap when needed */
    align-items: center;
    overflow-x: auto;
    /* Enables horizontal scrolling if needed */
    /* Keeps all images aligned at the top */
    margin-top: 20px;
}

.image-container {
    display: flex;
    flex-direction: column;
    /* Keeps image & credit stacked within each box */
    align-items: center;
    text-align: center;
    width: auto;
    /* Prevents stretching */
    margin: 10px;
    /* Adds spacing below each image-credit pair */
}

#vj-alt-images img {
    width: auto;
    max-width: 100%;

    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}


#installation-alt-images img {
    max-width: 100%;
    /* Limits image width so they fit in a row */
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}





.alt-image {
    width: auto;
    /* Let the image define its own width */
    max-width: 40%;
    /* Ensure they don’t stretch too wide */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 8px;
    transition: transform 0.3s ease;
    max-height: 600px;
    /* Ensures they don’t become too tall */
}





/* Style for the images */
.alt-image {
    max-width: 850px;
    /* Increase the maximum width */
    width: 100%;
    /* Ensures they scale properly */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 8px;
    /* Optional rounded corners */
    transition: transform 0.3s ease;
}

.alt-image:hover {
    transform: scale(1.08);
    /* Slight zoom effect on hover */
}




/* Styling for the image credit */
/* Ensuring the image credit stays directly below the image */
.image-credit {
    font-size: 14px;
    margin-top: 5px;
    color: #bbb;
    text-align: center;
    max-width: 300px;
}

@media (max-width: 768px) {

    #installation-alt-images, #vj-alt-images {
        flex-wrap: wrap;
        /* Allow images to stack on smaller screens */
    }

    #projects-grid,
    #visuals-vj-grid {
        grid-template-columns: 1fr;
    }

    .alt-image {
        max-width: 100%;
        /* Scale images better for smaller screens */
    }

    nav {
        position: absolute;
        top: 10px;
        right: 10px;


    }

    nav ul {
        display: flex;
        flex-direction: column;
    }
}