/*Universal Box-Sizing Reset */
*, *::before, *::after {
    box-sizing: border-box;/*1*/
}

body {
    font-family:'Tahoma', Verdana, sans-serif; 
    margin: 0; 
    line-height: 1.3; 
    color: #fffefe;
    background-color: #000000;
}
/* Crucial for fixed landing page: Hide overflow initially */
html, body {
    margin:0;
    padding:0;
    overflow-x: hidden;
    
    overflow-y: hidden; 
    height: 100%;/
}
/* Optional: Smooth scrolling for when scrolling is re-enabled */
html {
    scroll-behavior:smooth;
}

.image-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in the same position even when scrolling */
    z-index: 999; /* Higher than most content, but lower than your header's z-index: 1000 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if image is larger than viewport */
    background-color: rgba(0, 0, 0, 0.738); /* Black background with 90% opacity */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /* Add a smooth transition for showing/hiding if using opacity/visibility */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-image {
    max-width: 90%; /* Keep image within 90% of modal width */
    max-height: 90%; /* Keep image within 90% of modal height */
    display: block; /* Remove extra space below image */
    margin: auto; /* Center image within flex container fallback */
    
    user-select: none; /* Prevent selection (copy/paste) */
    -webkit-user-select: none; /* For Webkit browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
    pointer-events: auto; /* Ensure events work on image */
}

/* Style for the close button */
.close-button {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above the image */
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


header {
    z-index: 1000; /* Make sure this is still present and higher than the modal's z-index */
    position: sticky; /* Or fixed if it was */
}
.container {
    max-width: 1200px; /*Limits the maximum width of content within elements
    that use the .container class, preventing content from stretching too wide on large screens.*/
    margin: 0 auto;
    padding: 0 15px;
}

/* Global Button Styling (used for View My Art, Send Message) */
.button {
    display:inline-block; 
    background-color: #9b20ff;
    color: rgb(255, 255, 255);
    padding: 12px 20px; /*top/bottom padding and left/right padding*/
    border-radius: 20px; /*rounds corner of button*/
    border-color:#000000;
    border-style: solid;
    box-shadow:0 1px 30px #35005e;

    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    }

.button:hover {
    background-color: #550780; /*adds a colour when cursor is taken to the button*/
    transform: translateY(-2px); /*gives a bouncy feature when hovered over button*/
    }

/*---Header Styles ---*/
header {
    background-color: #272727; /*sets a dark grey background for header*/
    color: white;/* changes colour of text in Header*/
    padding: 1rem;/*Adds vertical padding
    (1rem = typically 16px) to the header, no horizontal padding as the .container handles that.*/
    position:sticky; /*header will stay at the top after scrolling*/
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    top: 0; /* Add top: 0 for sticky positioning to work */
    z-index: 1000;
    /*Ensures the header stays on top of other content if elements overlap.
    A higher z-index means it's "closer" to the user.*/
    box-shadow: 0 8px 10px rgba(0,0,0,0.2); /*adds shadow to header*/
}

header .container {
    display: flex;
    /*Turns the .container inside the header into a flex container
    allowing its direct children (h1 and nav) to be laid out using flexbox*/
    justify-content: space-between; /*Distributes space evenly between the h1 and nav items, pushing them to opposite ends of the header*/
    align-items:center; /*Vertically centers the h1 and nav items within the header.*/
    /*h1 is the title and nav are the buttons*/
}

header h1 {
    margin:0;/*removes default margin from header*/
    font-size: 1.8em;
}

header h1 a {
    color:white;
    text-decoration: none;
}

header h1 a:hover {
    color: #f0f0f0;
}

header nav ul {
    list-style: none; /*removes list bullets(or whatver list type is there)*/
    margin: 0;
    padding: 0;
    display: flex; /*Makes the list items <li> display in a row using flexbox*/
    gap:20px;
}

header nav ul li {
    margin-left: 15px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bolder;

    padding: 0px 0px; /* Start with no padding */
    background-color: transparent; /* Start with no background */
    border-radius: 0px; /* Start with no border-radius */

    /* IMPORTANT: Include ALL properties that change on hover in the transition */
    transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;

    /* REMOVE THIS LINE: You are already handling spacing with 'gap' on 'ul' or 'margin-left' on 'li' */
    /* margin-left: 15px; */
}

header nav ul li a:hover,
header nav ul li a.active {
    color: #000000; /* Text color changes to black */
    background-color: white; /* Background becomes white */
    border-radius: 20px; /* Corners become rounded */
    padding: 8px 22px; /* Padding expands */
}

.hero-section {
    /* Your existing background settings for the whole hero section */
    background-color: rgb(0, 0, 0); /* Or any other background color for the hero section */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    color: rgb(255, 255, 255); /* Sets default text color for content within hero-section */
    text-align: center; /* Centers inline-level text directly within hero-section, but Flexbox will govern main children */

    /* Full viewport height for the entire hero section */
    min-height: 100vh; /* Ensures the hero section takes up at least the full viewport height */
    width: 100%; /* Ensures it takes full width */
    position: relative; /* Essential for positioning the ::before overlay and other children */
    overflow: hidden; /* Helps prevent unwanted scrollbars within the hero section itself */

    /* *** FLEXBOX FOR THE MAIN LAYOUT ( arranging .top-visual-area and .container ) *** */
    display: flex; /* Makes .hero-section a flex container */
    flex-direction: column; /* Stacks its direct children (.top-visual-area and .container) vertically */
    justify-content: flex-start; /* IMPORTANT: Aligns content to the top. We'll control distribution with flex-grow on children. */
    align-items: center; /* Horizontally centers its direct children (the visual area and the text container) */

    padding: 0;
    transition: opacity 0.8s ease-out;

}

.hero-section::before {
    content: '';/*: Required for ::before and ::after pseudo-elements to display.*/
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    /*Makes the pseudo-element cover the entire area of its parent (.hero-section).*/

    /*Creates a semi-transparent black overlay (40% opacity)
    for readability of text on the background image.*/
    /*background-color: rgba(0, 0, 0, 0.4);*/
    z-index: 1;
    /*Places the overlay above the background image but below the hero section's content.*/
}
.hero-section .top-visual-area {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Placed below text content */
    overflow: hidden;
    box-shadow: 0px 1px 50px rgba(160, 29, 247, 0.534);
    transition: all 0.5s ease-in-out; /* Downward shadow, slightly blurred, semi-transparent black */
}

/* Styles for the actual image/video element within .top-visual-area */
.hero-section .top-visual-area img,
.hero-section .top-visual-area video { /* Target both images and videos */
    width: 100%; /* Make the image/video stretch to fill the .top-visual-area horizontally */
    height: 100%; /* Make the image/video stretch to fill the .top-visual-area vertically */
    object-fit: cover; /* IMPORTANT: This will make the image/video cover the entire area, cropping if necessary. Use 'contain' if you want to see the whole image without cropping, but it might leave black bars. */
    display: block; /* Removes any extra space below images sometimes */
}
.hero-section .container {
    position: relative;
    /*Ensures the container's content (h2, p, buttons)
    is positioned relative to the container itself, and z-index works correctly for it.*/
    z-index: 2;/*Places the container's content above the ::before overlay.*/
    width:100%;
    max-width: 800px;

    display: flex;
    flex-direction: column;
    align-items: center;
    /*Makes the container a flex container.
    Stacks content vertically.*/
    padding: 35px;
    padding-bottom: 50px;
    justify-content: center;

}
/* Reduce gap between H2 and P tags */
.hero-section .container h2 {
    margin-bottom: 1%;
    ;
}

.hero-section .container p {
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 1.1em;
    
}

/*.hero-section .button
{

}*/
.hero-section h2 {
    font-size: 1.7em; /*increases size of teh text*/
}
.hero-section p {
    font-size: 1.1em; /* 86 */
}

.hero-section .container .button {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.1em;
}

/* Media Query for Larger Screens (Desktop/Tablet Landscape) */
@media screen and (min-width: 768px) {
    #hero.hero-section {
        flex-direction: row; /* CHANGED: Reverses the order - GIF on left, Text on right */
        justify-content: space-between;
        align-items: stretch;
        text-align: right; /* CHANGED: Align text to the right for the hero section overall */
        /*padding: 0 50px;*/
    }

    #hero .container {
        flex: 1;
        max-width: 50%;
        padding: 0;
        text-align: right; /* CHANGED: Align text to the right within its container */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 20px;
        padding-left: 40px;
        
    }

    #hero .top-visual-area {
        
        flex: 1;
        height: auto;
        display: flex;
        justify-content: flex-end; /* CHANGED: Pushes the GIF to the left */
        align-items: stretch;
        overflow: hidden;
    }

    #hero .top-visual-area img,
    #hero .top-visual-area video {
        
        height: auto;
        object-fit:cover;
        object-position: center; /* CHANGED: Positions the GIF content to the left */
        filter: brightness(1);
        align-items: stretch;
    }

    .scroll-down {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 942px)
{
    #hero .container .button
    {
        display: flex;
        flex-direction: column;
        margin-left: auto;
        
    }
}

/* --- Scroll Down Indicator Styles (for Hero Section) --- */
.scroll-down {
    margin-top: 25px; /* Adjust as needed for spacing from the button */
    position: relative; /* Keep if you need to position children absolutely within it */
    z-index: 2; /* Ensure it's above the overlay */
    /* If you had transform: translateY(-50%) or left: 50% here, you might need to adjust or remove them if they conflict */
}

.scroll-down a {
    display: flex;
    flex-direction: column; /* Stack children (the arrow) vertically */
    align-items: center; /* Horizontally center the arrow */
    text-decoration: none; /* Removes underline */
    color: rgb(0, 0, 0); /* Ensures the arrow's "color" (if used for border) is white, though border property is more direct */
    font-size: 1.1em; /* Can be removed if no text is present */
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease; /* Keep transitions for smooth effects */
}

.scroll-down a:hover {
    opacity: 1;
    transform: translateY(5px); /* Example: little bounce effect on hover */
}

/* --- Styles for the Arrow --- */
.arrow-down {
    /* REMOVE any existing width/height/border-left/border-right/border-top properties here */

    width: 0;
    height: 0;
    border-left: 30px solid transparent; /* Adjust size of arrow base */
    border-right: 30px solid transparent; /* Adjust size of arrow base */
    
    border-bottom: 10px solid rgb(56, 38, 79); /* *** This creates a downward-pointing white arrow *** */
    /* Adjust '10px' values to make the arrow bigger or smaller */

    margin-top: -60px; /* Space between the (now invisible) text area and the arrow */
     /* Keep your bounce animation if you like it */

    /* Ensure no conflicting transforms or positions from previous setups */
    transform: none; /* Reset any previous transforms if they are here */
}

/* Remove or comment out .scroll-down span if you completely remove the span from HTML */
/* If you keep any text in the span, just remove margin-bottom: 10px; */
/*
.scroll-down span {
    // margin-bottom: 10px; // remove this if no text
}
*/

/* --- Your bounce animation (ensure this is defined in your CSS) --- */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* Bounces up */
    }
    60% {
        transform: translateY(-5px); /* Recoil slightly */
    }
}

.main-content-wrapper {
    opacity:0;
    /*Initially hides the main-content-wrapper by making it completely transparent.*/
    transform: translateY(20px);
    /*Initially shifts the main-content-wrapper down by 20px, preparing for a subtle slide-in effect.*/
    /* >>> FIX START <<< */
    /* The previous line was 'transform: opacity 0.8s ease-out, transform 0.8s ease-out;'.
       This was overriding 'transform: translateY(20px);' and was syntactically incorrect for 'transform' as a property name within a transition.
       Transition should be a separate property. */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* >>> FIX END <<< */
    /*Animates the opacity and transform changes over 0.8 seconds.*/
    pointer-events: none;
    /*Prevents any mouse interactions (clicks, hovers) on the hidden wrapper.*/
    visibility: hidden;
    /*Hides the element from screen readers and the layout engine (more robust hiding than just opacity).*/
    width: 100%; /*wrapper takes full length*/

}

.main-content-wrapper.active {
    opacity: 1; /*Makes the main-content-wrapper fully visible when the*/
    /*active class is added by JavaScript.*/
    transform: translateY(0); /*Moves the main-content-wrapper*/
    /*back to its original vertical position, creating the slide-in effect.*/
    pointer-events: auto; /*Re-enables mouse interactions when the active class is applied.*/
    visibility: visible; /* Makes the wrapper visible to screen
    readers and layout when active*/
}


/*---section heading general styles (for consistency) ---*/
.about-section h2,
.gallery-section h2,
.contact-section h2 {
    padding-top: 0%;
    margin-bottom: 60px; /*gives padding after section headings*/
    position: relative;
    /*Establishes a positioning context for the ::after pseudo-element used for the underline.*/
    padding-bottom: 10px;
    /*Adds space below the heading text but above the ::after underline.*/
    font-size: 2.5em;
    font-family:'Tahoma' Verdana, Geneva, Tahoma, sans-serif;
    color: #d8d8d8;
    text-shadow: 0 2px 3px #0a0a0a;
}
/*adding underlines after the headings*/
.about-section h2::after,
.gallery-section h2::after,
.contact-section h2::after {
    content: '';/*Required for the pseudo-element.*/
    position: absolute;
    left: 50%;
    /*Moves the pseudo-element's left edge to the horizontal center of the h2.*/
    transform: translateX(-50%);
    bottom: 0;
    width:100px;
    height: 5px;
    background-color: #9500ff;
    border-radius: 3px;
}
/*---about section styles---*/
.about-section {
    padding: 80px;
    background-color: #1a1a1a ;
    text-align: center;
    box-shadow: 0 2px 20px #1c1c1c;
    margin-bottom: 40px;
}

.about-section p {
    max-width: 1600px;/*Limits the width of paragraphs for readability.*/
    margin: 0 auto 15px auto;/* Centers paragraphs and adds 15px bottom margin*/
    font-size: 1.2em;
    line-height: 1.4;
}

/*---Gallery section styles---*/
.gallery-section {
    padding: 40px;
    background-color: rgb(0, 0, 0);
    text-align: center;
}
/*filter-buttons*/
.filter-buttons {
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;/*Allows filter buttons to wrap to the next line on smaller screens.*/
    justify-content: center;
    gap: 10px;
    
}
.filter-btn {
    background-color: #000000;
    color: #4d4d4d;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    /* CHANGE THIS LINE: Add 'transform 0.2s ease' to the transition */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border-width: 2px;
    border-color: #212121;
    border-style: solid;
}

.filter-btn:hover {
    background-color: #d0d0d0;
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: #8420ff; /* 175 */
    color: white; /* 176 */
    box-shadow: 0 4px 8px rgba(106, 0, 255, 0.3); /* 177 */
}
/*gallery grid layout using CSS grid*/
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 30px; /* Keep your column gap */
    row-gap: 0px; /* Adjust this as desired, perhaps start with 0px for tight packing */
    padding-top: 20px;
    align-items: start; /* Keep this, it helped with internal item stretching */

    /* >>> NEW / MODIFIED LINE <<< */
    /* Instead of grid-auto-rows: 1px;, let's try 'min-content' or a more robust auto-sizing. */
    /* If 'masonry' was widely supported, it would be: grid-template-rows: masonry; */

    /* For non-masonry browsers, grid-auto-rows: 1px is the best bet, but let's ensure items truly don't expand. */
    /* We can also ensure items within grid don't stretch */
    grid-auto-flow: row dense; /* Tells grid to fill rows completely and use space efficiently */
    grid-auto-rows:1px; /* This is the key. Make auto-rows only as tall as their content. */
}

/*--individual gallery item style--*/
.gallery-item {
    background-color: #202020;
    border-radius:8px;
    overflow: hidden;/*Hides any content that spills outside the rounded corners,
    especially useful for images.*/
    box-shadow: 0 4px 15px  rgba(69, 69, 69, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;

}

.gallery-item img { /* This should be .gallery-item img - fixing the colon to space */
    width: 100%;
    /*Makes images take full width of their card.*/
    height: auto;
    display: block; /*Scales and crops the image to fill the
    given dimensions without distortion.*/
}
.gallery-item:hover {
    transform: translateY(-8px);/*adds animation*/
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    /*shadow increases when hovering*/
}
.gallery-item h3 {
    font-size: 1.3em; /* 194 */
    margin: 15px 15px 5px 15px; /* 195 */
    color: #c7c7c7; /* 196 */
}

.gallery-item p {
    font-size: 0.7em; /* 197 */
    color: #ffffffc8; /* 198 */
    margin: 0 15px 15px 15px; /* 199 */
    line-height: 1.5; /* 200 */
}

/*--Contact section syles--*/
.contact-section {
    padding:80px;
    background-color: white;
    text-align: center;
    box-shadow:  0 0px 20px rgba(0, 0, 0, 0.293);
    background-color: #1a1a1a ;
}
.contact-section p {
    max-width: 700px;
    margin: 0 auto 30px auto; /* 206 */
    font-size: 1.3em; /* 207 */
    line-height: 1.4; /* 208 */
}

.contact-section form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: #696969;
    border-radius: 10px;
    box-shadow: 8px; /* This looks like an incomplete or incorrect box-shadow value. It should be 4 values + color. */
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
}

.contact-section label {
    font-weight: bold;
    font-family: 'Tahoma' Verdana, Geneva, Tahoma, sans-serif;
    margin-bottom: 5px;
    display: block; /*Makes labels take up their own line.*/
    color: #ffffff;
}

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
    width: 100%;
    padding: 12px;
    border: 3px solid #000000;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-section input[type="text"]:focus,
.contact-section input[type="email"]:focus,
.contact-section textarea:focus {
    border-color: #9500ff;
    outline:none;
    box-shadow:0 0 0 5px rgba(112, 0, 225, 0.25);
}

.contact-section textarea {
    resize:vertical; /*looks the text area to be only resizable veritcally*/
    min-height: 120px;
}
.contact-section button[type="submit"] {
    background-color: #8420ff;
    color: white;
    padding:12px 25px;
    border:none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-family: 'Tahoma', Verdana, Geneva, Tahoma, sans-serif;
    align-self: flex-start;
    /*Aligns the submit button to the left within the flex column.*/
    margin-top: 7px;/*adds space above button*/
}

.contact-section button[type="submit"]:hover {
    background-color: #550780;
    transform: translateY(-2px);/*animate when hovering*/
}

/*--footer style---*/
footer {
    background-color: #333;
    color: white;
    padding: 30px; /*top/bottom padding for footer*/
    text-align: center;
    font-size: 0.9em;

}

footer .container {
    display: flex; /*makes footer container a flex container*/
    flex-direction: column;/*Stacks footer content (copyright, social links)
    vertically on small screens.*/
    align-items: center;/*align flex container in center*/
    gap: 5px;
}

footer .social-links a {
    color: white;
    text-decoration: none;/*removes under*/
    margin: 0 5px;
    transition: color 0.3s ease;
}

footer .social-links a:hover { /* Fixed typo: footer.social-links to footer .social-links */
    color: #9500ff;
}

/*responsive adjustments for footer*/
@media(min-width:768px) /* Added 'px' to media query */
{
    footer .container
    {
       flex-direction: row;
       justify-content: space-between;
    }
}
/*same for hero section*/
@media(max-width:768px) /* Added 'px' to media query */
{
    .hero-section h2
    {
       font-size: 2em;
    }
    .hero-section p
    {
       font-size: 0.8em;
    }
    .hero-section .button
    {
        padding : 8px 16px;
        font-size: 0.8em;
        margin-bottom: 24px;
    }
    .scroll-down
    {
        /* This bottom positioning might conflict if hero section changes its layout. */
        /* Consider adjusting if you still see issues */
        bottom:20px;
    }
}

@media screen and (max-width: 714px) {
    /* Adjust padding/margins for overall sections */
    #hero.hero-section,
    .about-section,
    .gallery-section,
    .contact-section {
        padding-left: 10px; /* Smaller horizontal padding */
        padding-right: 10px; /* Smaller horizontal padding */
        padding-top: 15px; /* Adjust top padding if needed */
        padding-bottom: 15px; /* Adjust bottom padding if needed */
    }
   
    /*Header adjustments for mobile (from previous discussions, but ensure padding is right)*/
    header {
        padding: 1rem 15px; /* Smaller horizontal padding for header */
    }
    header h1 {
        font-size: 1.5em; /* Smaller title */
    }
    header nav a {
        font-size: 0.9em; /* Smaller nav links */
        padding: 5px 8px; /* Smaller nav link padding */
    }

    /* Hero section content adjustments for mobile */
    .hero-section .container {
        padding: 1% 15px 30px 15px; /* Reduced padding for mobile hero text/button area */
         /* Keep text/button aligned right as per previous request */
        text-align: right;
        font-size: 0.8em;
    }
    .hero-section h2 
    {
        font-size: 2em; /* Smaller heading */

    }
    .hero-section p {
        font-size: 0.9em; /* Smaller paragraph */
    }
    .hero-section .button {
        font-size: 0.9em; /* Smaller button text */
        padding: 8px 16px; /* Smaller button padding */
        margin-bottom: 20px; /* Adjust margin if needed */
    }
    .scroll-down {
        right: 15px; /* Adjust scroll-down position for mobile */
        bottom: 15px;
    }

    /* --- Gallery Section Specific --- */
    .gallery-section h2 {
        font-size: 1.8em; /* Smaller gallery heading */
        margin-bottom: 15px; /* Adjust margin */
    }

    .filter-buttons {
        flex-wrap: wrap; /* Allow filter buttons to wrap to next line */
        justify-content: center; /* Center buttons if they wrap */
        gap: 8px; /* Smaller gap between buttons */
        margin-bottom: 20px; /* Adjust margin */
    }
    .filter-buttons button {
        font-size: 0.8em; /* Smaller button text */
        padding: 8px 12px; /* Smaller button padding */
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* FORCES 2 COLUMNS ON MOBILE */
        column-gap: 15px; /* Reduced horizontal gap */
        row-gap: 0px; /* Reduced vertical gap */
        padding-top: 10px; /* Adjusted top padding for the grid */
    }

    .gallery-item {
        /* Adjust padding or other properties for individual items if they overflow */
         /* Example: You might need to add or adjust this */
        display: block;
    }
    .gallery-item h3 {
        font-size: 1em; /* Smaller item title */
        color: #c7c7c7;
    }
    .gallery-item p {
        font-size: 0.7em; /* Smaller item description */
    }

    /* Contact section adjustments for mobile */
    .contact-section h2 {
        font-size: 1.8em; /* Smaller heading */
        margin-bottom: 15px;
    }
    .contact-section form {
        padding: 20px; /* Reduce form padding */
    }
    .contact-section input,
    .contact-section textarea {
        font-size: 0.9em; /* Smaller form text */
        padding: 8px; /* Smaller form padding */
    }
    .contact-section button {
        font-size: 0.9em; /* Smaller button text */
        padding: 10px 20px; /* Smaller button padding */
    }
}
@media screen and (max-width: 565px)
{
    .about-section h2,
    .gallery-section h2,
    .contact-section h2
    {
        padding-top: 5%;
        margin-bottom: 30px; /*gives padding after section headings*/
        position: relative;
        /*Establishes a positioning context for the ::after pseudo-element used for the underline.*/
        padding-bottom: 10px;
        /*Adds space below the heading text but above the ::after underline.*/
        font-size: 1.5em;
    } 

    .about-section h2::after,
    .gallery-section h2::after,
    .contact-section h2::after 
    {
            align-items: center;
            width:75px;
            height: 3.25px;
            border-radius: 3px;
    }
    .about-section p 
    {
    max-width: 1200px;/*Limits the width of paragraphs for readability.*/
    margin: 0 auto 20px auto;/* Centers paragraphs and adds 15px bottom margin*/
    font-size: 0.9em;
    line-height: 1.2;
}
    }

    .gallery-item p 
    {
    font-size: 0.7em; /* 197 */
    margin: 0 10px 10px 10px; /* 199 */
    line-height: 1; /* 200 */
    }
    .gallery-item h3 {
    font-size: 0.9em; /* 194 */
    margin: 5px 8px 5px 10px; /* 195 */
    color: #c7c7c7; /* 196 */
    }

@media screen and (max-width: 565px)
    
{
    header 
    {
        /* Ensure display: flex and justify-content: space-between are already here */
        display: flex; /* Should already be here from previous suggestions */
        justify-content: space-between; /* Should already be here */
        align-items: center; /* Should already be here */
        padding-left: 15px; /* Adjust as needed */
        padding-right: 15px; /* Adjust as needed */

        /* Prevent header from wrapping its direct children (title and nav) */
        flex-wrap: nowrap; /* Crucial: Prevents main header elements from wrapping */
    }

    header h1 {
        font-size: 1.2em; /* Keep title smaller for mobile */
        white-space: nowrap; /* Crucial: Prevents the H1 text from wrapping */
        flex-shrink: 0; /* Prevents the H1 from shrinking */
        margin-right: 5px; /* Add some space between title and nav */
        margin-left: -10px;
    }

    header nav {
        flex-grow: 1; /* Allow navigation to take remaining space */
        text-align: right; /* Keep nav items aligned to the right */
        white-space: nowrap; /* Crucial: Prevents navigation links from wrapping to a new line */
        overflow-x: auto; /* Allows horizontal scrolling WITHIN the nav if links are too long */
        -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
        /* To hide scrollbar on some browsers, but still allow scroll: */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
    }

    /* For Webkit browsers (Chrome, Safari) */
    header nav::-webkit-scrollbar {
        display: none; /* Hide scrollbar */
    }

    header nav a {
        font-size: 0.7em; /* Make navigation links even smaller if necessary */
        padding: 3px 4px; /* Reduce padding around links more if needed */
        display: inline-block; /* Ensure padding works correctly */
    }

    header nav ul
    {
     gap:14px;
     padding-left: 30px;
    }

    header nav ul li {
    margin-left: 10px;
    }

    header nav ul li a:hover,
    header nav ul li a.active 
    {
    border-radius: 20px; /* Corners become rounded */
    padding: 4px 15px; /* Padding expands */
   }
}

@media screen and (max-width: 767px) {

    /* --- HERO SECTION LAYOUT ADJUSTMENTS --- */
    #hero.hero-section {
        flex-direction: column; /* Stack children vertically */
        justify-content: flex-start; /* Align content to the start (top) of the flex container */
        align-items: center; /* Center items horizontally (like the GIF and the text block) */
        padding: 0; /* Remove padding here, it will be added to individual sections/containers */
        min-height: 100vh; /* Ensure hero section takes full viewport height for stacking */
        position: relative; /* If you have absolute/fixed children, make sure they are relative to this */
    }

    .hero-section .top-visual-area {
        width: 100%; /* Make GIF area take full width */
        /* Set a specific height for the GIF area relative to viewport height.
           This makes the GIF take roughly the top half of the screen,
           allowing text to appear below. Adjust 50vh as needed. */
        height: 50vh; /* Example: Takes 50% of viewport height */
        overflow: hidden; /* Hide any overflow if GIF aspect ratio doesn't match 50vh */
        display: flex; /* Use flex to center the image if it's smaller than the container */
        justify-content: center;
        align-items: center;
       box-shadow: 0px 1px 80px rgba(168, 46, 255, 0.471);
    }

    .hero-section .top-visual-area img {
        width: 100%; /* Ensure image fills its container horizontally */
        height: 100%; /* Ensure image fills its container vertically */
        object-fit: cover; /* Crop image to fit without distortion */
        display: block; /* Remove any extra space below image */
        box-shadow: 0px 15px 20px rgb(35, 0, 58);
    }

    .hero-section .container {
        width: 100%; /* Ensure text container takes full width below the GIF */
        
        text-align: right; /* Align text and button to the center */
        display: flex; /* Make it a flex container */
        flex-direction: column; /* Stack its own content vertically */
        justify-content: center; /* Vertically center its content */
        align-items:flex-end; /* Horizontally center its content */
        flex-grow: 1; /* Allow this container to take up remaining vertical space */
    }

    .hero-section h2 {
        font-size: 2em; /* Adjust font size as needed for mobile */
        margin-bottom: 10px;
    }

    .hero-section p {
        font-size: 0.95em; /* Adjust font size as needed for mobile */
        margin-bottom: 20px;
        max-width: 100%; /* Prevent very long lines on mobile */
    }

    .hero-section .button {
        font-size: 1em; /* Adjust button text size */
        padding: 10px 25px; /* Adjust button padding */
        
    }

    /* SCROLL-DOWN ARROW ALIGNMENT (from previous discussion, adjust as needed) */
    .scroll-down {
        /* If it's fixed/absolute, keep it relative to the viewport,
           but ensure it doesn't overlap important content. */
        right: 20px; /* Adjust as per your desire */
        bottom: 20px; /* Adjust as per your desire */
        /* It might be better to move this element or hide it on small screens
           if it interferes with the new layout */
    }


    /* --- Keep your other mobile media query styles here for header, gallery etc. --- */


}