/*
Theme Name: MOTA
Theme URI: https://example.com/
Author: Malcomx13090
Author URI: https://yourwebsite.com/
Description: A blank starter WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blank-theme
*/


/*
    Add your custom styles here
*/
@font-face {
    font-family: 'Space Mono-Regular';
    src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Space Mono-Italic';
    src: url('fonts/SpaceMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'Space Mono-Bold';
    src: url('fonts/SpaceMono-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Space Mono-BoldItalic';
    src: url('fonts/SpaceMono-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Italic';
    src: url('fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-BoldItalic';
    src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


#hero-header {
    width: 100%; /* Full width */
    height: 962px; /* Set height */
    background-size: cover; /* Image covers the container */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    display: flex; /* Flexbox for centering content */
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}



.hero-title {
    font-family: 'Space Mono-BoldItalic';
    font-size: clamp(4rem, 10vw, 7rem); /* Responsive font size scaling */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    color: transparent; /* Transparent text fill */
    -webkit-text-stroke: 2px white; /* White outline */
    text-stroke: 2px white; /* White outline for newer browsers */
    text-align: center; /* Center text alignment */
    white-space: nowrap; /* Prevent text from wrapping to a new line */
    
}

/* Additional Media Query for Fine-Tuning */
@media (max-width: 768px) {
    .hero-title {
        -webkit-text-stroke: 1.5px white; /* Reduce stroke size for smaller screens */
        text-stroke: 1.5px white; 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust shadow for readability */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(1.5rem, 6vw, 3rem); /* Smaller font size for very small screens */
        -webkit-text-stroke: 1px white; /* Further reduce stroke size */
        text-stroke: 1px white;
        text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.5); /* Even smaller shadow */
    }
}



/* Adjust for mobile view */
@media (max-width: 768px) {
    #hero-header {
        width: 100%;
        height: 40vh; /* Adjust height on smaller screens */
    }
}



/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header-container {
    position: relative; /* Keeps the menu aligned with the header */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    background-color: white;
    z-index: 10;
    padding: 10px 20px; /* Space around header content */
    border-bottom: 1px solid #ddd;
}

@media (max-width: 768px) {
    .header-container {
        width: full-width;
        
    }
}


/* Logo */
.logo {
    width: 216px;
    height: auto; /* Maintain aspect ratio */
    margin-left: 10px; /* Adjust spacing */
}

/* Menu Container */
.menu-container {
    display: flex; /* Always visible on desktop */
    position: absolute;
    top: 100%; /* Align menu below header */
    left: 0;
    justify-content: center;
    background-color: #ffffff;
    z-index: 1000;
    
    transition: max-height 0.3s ease-in-out; /* Smooth open/close effect */
    max-height: none; /* Remove max-height constraint on desktop */
    overflow: visible; /* Ensure the menu stays visible */
}

.menu-container.active {
    /* Optional: Additional styles for active state, e.g., mobile toggle */
}



.menu-principal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Default horizontal layout for desktop */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: flex-end; /* Align menu to the right */
}

.menu-principal li {
    padding: 10px 20px;
}

.menu-principal li a {
    font-family: 'Space Mono-Regular';
font-size: 16px;
font-weight: 400;
line-height: 23.7px;
text-align: left;
text-decoration: none !important;
color: black ;
}

/* Toggle Button */
.menu-toggle {
    display: none; /* Hide on desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.burger-icon {
    font-size: 24px;
    color: #333;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* Show on mobile */
        align-items: center;
        justify-content: center;
        
        
    }

    .menu-container {
        position: absolute;
        top: 100%; /* Align below header on mobile */
        left: 0;
        width: 100%;
        display: none; /* Hidden by default */
        flex-direction: column; /* Stack links vertically */
        align-items: center;
        background-color: #ff0000;
        
    }

    .menu-container.active {
        display: flex; /* Show when active */
        max-height: 1500px; /* Show menu with height constraint */
        overflow: visible;
        
        
    }

    .menu-principal {
        flex-direction: column;
        justify-content: center; /* Align links to the left */
        margin-bottom: 130px;
    }

    .menu-principal li a {
        color: #ffffff !important;
        font-size: 44px;
        font-weight:400;
        padding: 30px;
    }
}

@media (min-width: 769px) {
    .menu-container {
        display: flex; /* Always visible on desktop */
        position: static; /* Inline with the header */
        flex-direction: row;
    }

    .menu-toggle {
        display: none; /* Hidden on desktop */
    }
}

/* Responsive Images */
.photo-item {
    flex: 1 1 calc(50% - 10px); /* Two images per row */
    max-width: calc(50% - 10px);
    margin-bottom: 10px; /* Add spacing between rows */
}

.photo-item img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

#photo-gallery {
    display: flex;
    flex-direction: column; /* Stack items vertically by default */
    gap: 10px;
    margin: 0 auto; /* Center the gallery */
    justify-content: center; /* Center items within the gallery container */
    align-items: center; /* Ensure the images are centered horizontally */
}

/* Style for each photo item */
.photo-item {
    width: 100%; /* Ensure the image takes up full width on mobile */
    max-width: 564px; /* Limit the width of each image (use the image's resolution as a max width) */
    margin-bottom: 10px; /* Space between each image */
    display: flex;
    justify-content: center; /* Center the image inside the container */
}

/* Style for images */
.photo-item img {
    max-width: 100%; /* Ensure the image doesn't overflow its container */
    height: auto; /* Maintain the aspect ratio of the image */
}




/* For larger screens, set max-width for images */
@media (min-width: 769px) {
    #photo-gallery {
        flex-direction: column; /* Keep stacking images vertically on desktop */
        align-items: center; /* Keep the gallery centered */
    }

    .photo-item {
        width: 100%; /* Ensure the images still take up the full width of the container */
        max-width: 564px; /* Limit the width of the images to their natural resolution */
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #photo-gallery {
        flex-direction: column; /* Maintain the vertical stacking */
        align-items: center; /* Center the items */
    }

    .photo-item {
        max-width: 317px;
        width: 100%; /* Make each image take full width of the container on smaller screens */
        height: auto; /* Allow the image height to scale naturally */
    }
}


@media (min-width: 769px) {
    #photo-gallery {
        flex-direction: row; /* Arrange items in rows on larger screens */
        flex-wrap: wrap; /* Allow wrapping of images */
        justify-content: center; /* Center the images in the gallery */
        align-items: flex-start; /* Align items to the top */
        max-width: 1300px;
    }

    .photo-item {
        width: 48%; /* Show two items per row */
        margin: 10px; /* Space between items */
    }
}



/* Modal Styles */
.modale {
    
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

/* Filters and Load More Button */
/* Styles généraux pour les filtres */
/* Styles généraux pour les filtres */
#photo-filters {
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between; /* Distribute space equally between items */
    flex-wrap: nowrap; /* No wrapping */
    max-width: 1160px; /* Fix maximum width */
     /* Center align on the page */
    align-items: center; /* Vertically center items */
    gap: 10px;
}

#photo-filters select {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
}

/* Styles spécifiques pour chaque filtre */
#filter-categorie, #filter-format, #filter-date {
    width: 210px; /* Maintain fixed width */
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    margin-bottom: 12px;
}

/* Réactivité pour les petits écrans */
@media (max-width: 768px) {
    #photo-filters {
        flex-direction: column;
        align-items: center;
    }

    #photo-filters select {
        width: 240px;
        height: 43px;
    }

    #filter-categorie, #filter-format, #filter-date {
        width: 100%; /* Take full width available */
    }
}

/* Réactivité pour les écrans moyens et grands */
@media (min-width: 769px) {
    #photo-filters {
        justify-content: space-between;
        margin-left: auto; /* Center align on larger screens */
        margin-right: auto; 
    }

    #filter-categorie, #filter-format {
        flex: 0 0 210px; /* Fixed width for categories and format */
        margin-right: 10px; /* Ensure spacing between items */
    }

    #filter-date {
        margin-left: auto;
        margin-right: 0; /* Push the third dropdown to the right */
    }
}


#load-more-photos {
    margin-top: 20px;
    padding: 10px 20px;
   
    color: #fff;
    border: none;
    cursor: pointer;
}

#load-more-photos:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}


.menu-deco {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Default horizontal layout for desktop */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Align menu to the right */
}

/* Style for each list item */
.menu-deco li {
    padding: 10px 20px;
}

/* Link styles */
.menu-deco li a {
    font-family: 'Space Mono-Regular';
    font-size: 16px;
    font-weight: 400;
    line-height: 23.7px;
    text-align: center;
    text-decoration: none !important;
    color: rgb(0, 0, 0) !important;
}

/* Targeting the specific li inside a ul */
.menu-principal li a:hover {
    font-weight: bold;
}



/* Responsive: Stack menu items in a column on mobile */
@media (max-width: 768px) {
    .menu-deco {
        flex-direction: column; /* Switch to column layout on mobile */
        align-items: center; /* Align items to the left */
    }
}

.container-deco {
    width: 100%; /* Ensures the container takes up the full width */
    border-top: 1px solid #333; /* Adds the top border */
    box-sizing: border-box; /* Ensures the border is included within the width calculation */
}

@media (max-width: 768px) {
    .container-deco {
        width: 100%; /* Ensures the container takes up the full width on mobile */
        border-top: 1px solid #333; /* Keeps the border on mobile */
    }
}


#button-container {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

#load-more-photos {
    font-family: 'Space Mono-Regular';
    font-size: 16px;
    font-weight: 200;
    line-height: 23.7px;
    text-align: center;
    text-decoration: none !important;
    color: black !important;
    background-color: #D8D8D8 ;
    width: 272px;
    height: 50px;
}
#load-more-photos:hover {
    font-family: 'Space Mono-Regular';
    font-size: 16px;
    font-weight: 200;
    line-height: 23.7px;
    text-align: center;
    text-decoration: none !important;
    color: #D8D8D8 !important;
    background-color: black ;
    width: 272px;
    height: 50px;
}



/* Modal Overlay */


/* Modal Header */
.modale-header {
    width: 100%;
    height: 107px; /* Height of the header */
    background-image: url('https://nathalie-mota.saidiweb.shop/wp-content/uploads/2025/01/Contact-header.png');
    background-repeat: repeat-x; /* Repeat the image horizontally */
    background-position: 0% top; /* Move the background image 20% to the left */
    background-size: auto 100%; /* Stretch the background image horizontally */
    margin: 0;
    overflow: hidden; }


    @media (max-width: 768px) {
        .modale-header {
            width: 100%;
            height: 10%; /* Height of the header */
            background-image: url('https://nathalie-mota.saidiweb.shop/wp-content/uploads/2025/01/Contact-header.png');
            background-repeat: repeat-x; /* Repeat the image horizontally */
            background-position: 0% top; /* Move the background image 20% to the left */
            background-size: auto 100%; /* Stretch the background image horizontally */
            margin: 0;
            overflow: hidden; }
    }
    


/* Modal Overlay */
.modale-overlay {
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    z-index: 999; /* Below the modal content */
    display: none; /* Initially hidden */
}

.modale2-overlay {
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    z-index: 999; /* Below the modal content */
    display: none; /* Initially hidden */
}

/* Modal Container */
.modale {
    
    border: 5px solid black;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center modal */
    background-color: white;
    width: 90%;
    max-width: 500px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    
    z-index: 1000; /* Above the overlay */
    display: none; /* Initially hidden */
    padding: 0;
}

@media (max-width: 768px) { 
    .modale {
        border: 3px solid black;
        width: 70%;
    height: 85%;
    }
}

/* Form Styles */
.modale-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-self: center;
    padding: 20px; /* Optional, add padding to the form */
    border: 1px solid #72727262;
    

top: 23px;
gap: 0px;
border-radius: 8px 8px 8px 8px;
border: 1px 1px 1px 1px;


}

.modale label {
    font-family: 'Poppins-Regular' ;
    color: #000000;
    
    font-size: 1.2rem;
    
    margin-left: 80px;
}

.modale-form input,
.modale-form textarea {
    width: 80%;
    padding: 12px; /* Increased padding for better spacing */
    
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 10px; /* Add margin to the bottom of the fields */
}

.modale-form .input {
    height: 40px; /* Adjust the height of the input fields */
    
}

.modale .textarea {
   
        height: 70px;
        width: 60%;
        resize: none;
    
}

.modale .submit-button {
    font-family: 'Poppins-Regular';
    width: 70%;
    height:80px;
    padding: 10px 20px;
    background-color: #ccc;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-transform: uppercase; /* Optional: uppercase text */
    transition: background-color 0.3s ease;
    margin-left: 75px;
    justify-items: center;
}




@media (max-width: 768px) { 
    .modale .submit-button {
        font-family: 'Poppins-Regular';
        width: 95%;
        height: 45px;
        padding: 10px 20px;
        background-color: #ccc;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
        text-transform: uppercase; /* Optional: uppercase text */
        transition: background-color 0.3s ease;
        margin-left: 7px;
        justify-items: center;
}

.modale-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-self: center;
    padding: 20px; /* Optional, add padding to the form */
    border: 1px solid #72727262;
    top: 23px;
    gap: 0px;
    border-radius: 8px 8px 8px 8px;
    border: 1px 1px 1px 1px;


}

.modale label {
    font-family: 'Poppins-Regular';

    color: #000000;
    
    font-size: 1.2rem;
    
    margin-left: 05px;
}

.modale-form input,
.modale-form textarea {
    width: 80%;
    /* Increased padding for better spacing */
    height: 10%;
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 10px; /* Add margin to the bottom of the fields */
}

.modale .input {
    height: 10px; /* Adjust the height of the input fields */
    width: 80%;
    
}

.modale .textarea {
    height: 70px;
    width: 80%;
    resize: none;



}

}
.modale-form .submit-button:hover {
    background-color: #bbb;
}

/* Close Button */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

#nodis {
    opacity: 0.0;
    color: #ffffff;
}

/* Modal Content */
.modale-content {
    border: 2px solid #000000;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}


/* Lightbox overlay */
.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    
    
}

.lightbox.hidden {
    display: none; /* Hidden state */
}

/* Lightbox content container */
.lightbox-content {
  
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;    /* Center align them horizontally */
    justify-content: center; /* Center align them vertically (optional) */
   
    max-width: fit-content;
    
   
    text-align: center;
   
}

.lightbox.show {
    display: flex; /* Display as flex to center content */
}

/* Lightbox image styling */
.lightbox-image {
    max-width: 100%;
        max-height: 80%;
        width: auto;
       
        margin-top: 40px; /* Ensure the image is contained within the bounds (aspect ratio maintained) */
   
}

/* Close button styling */
.open-single-photo {
    font-family: 'Poppins-Regular';
   
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ccc;
    border: none;
    border-radius: 5px;
    cursor: text;
    font-size: 1rem;
    text-transform: uppercase; /* Optional: uppercase text */
    transition: background-color 0.3s ease;
    
    justify-items: center;
}


#open-single-photo:hover {
    background-color: #ddd;
}


/* Desktop-specific adjustments */
@media screen and (min-width: 768px) {
    .lightbox-content {
        width: 70%; /* Allow more width on larger screens */
        height: auto;
    }

    .lightbox-image {
        max-width: 100%; /* Let the image be slightly larger on desktop */
        max-height: 80%; /* Keep the height limit for large images */
    }
}

/* For very large screens (e.g., desktop or widescreens) */
@media screen and (min-width: 1200px) {
    .lightbox-content {
        width: 60%; /* Further reduce the width on very large screens */
    }

    .lightbox-image {
        max-width: 100%;
        max-height: 700px;
        width: auto;
        
        margin-top: 40px;/* A bit smaller height limit for larger screens */
    }
}

@media (max-width: 768px) {
    .photo-image² {    
        
        order: ;  
    }

    .responsive-img² {
        max-width: 100%;
        height: auto;
        
    }
}


.photo-image² {
    width: 100%; /* Ensures the image takes up the full width of the container */
    height: auto; /* Maintains the aspect ratio of the image */
    max-width: 100%; /* Ensures the image doesn't overflow the container */
    display: block; /* Removes any unwanted space around the image */
}

.responsive-img² {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}



@media (max-width: 768px) {
    .photo-bio{
        display: flex;
        flex-direction: column !important;
    }

    .photo-header² {
        order:99; 
        margin-right: 0px;
        
    }
    .photo-main² {
        order: -40;
    }
    
}



.photo-main² {
   

}

.contact-butt {
    order: 9;
}


.photo-bio {
    display: flex;
    justify-content: space-between;
}

.single-photo-container² {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.photo-header² {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 10px;
    justify-content: end;
    border-bottom: 1px solid #333;
    
    
    margin-bottom: 5px;
}





@media screen and (min-width: 768px) {
    .photo-main² {
        width: 50%;
    }

    .photo-header² {
        width: 50%;
    }
}







.metasingle {
    font-family: 'Space Mono-Regular';
}


.photo-title² {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.photo-meta² {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 1rem;
    line-height: 1.5;
}

.photo-question² {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.contact-button² {
    padding:  20px;
    background-color: #eaeaea;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1rem;
    margin-bottom: 35px;
    margin-left: 41px;
    width: 200px;
    
}


.metasingle² {
    font-family: 'Space Mono-Regular';
    margin-bottom: 35px;
    font-size: large;
}

.underpic{
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    display: flex;
    flex-direction: row;
}

@media (max-width: 768px) {
    .underpic{
        flex-direction: column;
    }
    .contact-button² {
        width: 100%;
        margin-left: 0px;
    }
}



.related-photos² {
    margin-top: 40px;
}

.related-photos² h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.related-photos-grid² {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.related-photo-item² img {
    width: 100%;
    height: auto;
    display: block;
}
  .photo-title² {
    font-family: 'Space Mono-Regular';
    font-size: 50px;
    text-transform: uppercase;
  }



  .underpic {
    position: relative;
}

.pagination-arrows {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pagination-arrows a {
    font-size: 24px;
    color: #333;
    text-decoration: none;
    padding: 10px;
}

.pagination-arrows .next-photo-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    
}

.pagination-arrows .next-photo-thumbnail {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 70px;
}



.pagination-arrows .prev-photo,
.pagination-arrows .next-photo {
    font-size: 30px;
}

 



@media (max-width: 768px) {
    .pagination-arrows {
        display: none;
    }
    
    .pagination-arrows a {
        display: none;
    }
    
    .pagination-arrows .next-photo-preview {
        display: none;
    }
    
    .pagination-arrows .next-photo-thumbnail {
        display: none;
    }
    
    .pagination-arrows a:hover {
        display: none;
    }
    
    .pagination-arrows .prev-photo,
    .pagination-arrows .next-photo {
        display: none;
    }
    
}

/*
.filter-default {
    color: #000000; /* Gray color for unselected filters 
    background-color: #f9f9f9; /* Light background 
    border: 1px solid #ccc;
    transition: all 0.3s ease; /* Smooth transition effect 
}

.filter-active {
    background-color: #ffffff !important; /* Red background for active filters 
    color: #000000; /* White text for active filters 
    border: 1px solid #ffffff !important;
    font-weight: bold;
    transition: all 0.3s ease; /* Smooth transition effect 
}

/* Hover effect for both default and active filters 
.filter-default:hover,
.filter-active:hover {
    background-color: #ff0000 !important; /* Red background on hover 
    color: #000000; /* White text on hover 
    border-color: #ff0000 !important;
    transition: all 0.3s ease; /* Smooth transition effect */




    #photo-filters3 {
        margin-top:80px;
        margin-bottom:40px;
        max-width: 1300px;
        border-radius: 8px;
        padding: 12px 16px;
        display: flex;
        justify-self: center;
        gap: 280px;
        align-items: center;
        background-color: #fff;
        cursor: pointer;
        margin-bottom: 12px;
      }

      @media (max-width: 768px) {
        #photo-filters3 {
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
    
        #photo-filters3 select {
            width: 270px;
            height: 43px;
        }
    
        #filter-categorie3, #filter-format3, #filter-date3 {
            width: 100%; /* Take full width available */
        }
    }
      
      .custom-dropdown3 {
        position: relative;
        width: 200px;
      }
      
      .custom-select3 {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
         background-color: #fff;
        cursor: pointer;
        color: #333;
        font-family: 'Poppins-Regular';
        font-weight: 200;
      }
      
      .custom-options3 {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 10;
        font-family: 'Poppins-Regular';
        font-weight: 200;
      }
      
      .custom-options3 li {
        padding: 10px 15px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
      }
      
      .custom-options3 li:hover {
        background-color: red;
        color: white;
      }

      .dropdown-arrow3 {
        display: flex !important;
        flex-direction: row-reverse;
      }

      .dropdown-arrow3 ::after {
        display: flex !important;
        flex-direction: row-reverse;
      }


    .photo-item img {
        width: 100%;
        height: auto;
        border: 1px solid #ccc;
        transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover effect */
    }
    
    .photo-item {
        position: relative;
        
        
        margin-bottom: 10px; /* Add spacing between rows */
        overflow: hidden; /* Hide overflow to contain the overlay */
    }
    
    .photo-item img {
        width: 100%;
        height: auto;
        border: 1px solid #ccc;
        transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover effect */
    }
    
    .photo-item:hover img {
        transform: scale(1.05); /* Slight zoom on hover */
        opacity: 0.8; /* Slight opacity change on hover */
    }
    
    /* Overlay effect */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); /* Dark overlay */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .photo-item:hover .overlay {
        opacity: 1; /* Show overlay on hover */
    }
    
    /* Logo icon */
    .logo-icon {
        font-size: 24px;
        color: white;
        margin-top: 2px;
        cursor: pointer;
    }
    
    /* Text zones */
    .text-left,
    .text-right {
       
        color: white;
        font-size: 14px;
        padding: 5px;
        z-index: 2;
        background: none;
    }
    
    .text-left {
        background: none;
        position: absolute;
        bottom: 10px;
        left: 10px;
       
        color: white;
        font-size: 14px;
        padding: 5px;
        z-index: 2;
        text-transform: white !important; /* Set text color to white */ font-family: 'Poppins-Regular', sans-serif;
    }
    
    
    .text-right {
        background: none;
        align-self: flex-end;
        margin-right: 10px;
        margin-bottom: 10px;
        text-transform: white !important; /* Set text color to white */ font-family: 'Poppins-Regular', sans-serif;
    }
    

    .text-right a {
        color: #ffffff !important; /* !important forces this style to be applied */
      }

    /* Top-right button (hidden for now) */
    .top-right-button {
        position: absolute;
        
        right: 10px;
        background-color: white;
        color: black;
        border: none;
        padding: 5px 10px;
        border-radius: 3px;
        cursor: pointer;
        display: none; /* Hide the button for now */
    }



    .fa-expand {
        color: white;
    font-size: xx-large;
    display: flex;
    cursor: pointer;
    margin-left: 505px;
    margin-top: 10px;
    }



    .lightbox-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        color: #fff;
        border: none;
        font-size: 17px;
        font-family: 'Arial', sans-serif;
        cursor: pointer;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        z-index: 1000;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        transition: color 0.2s, transform 0.2s;
    }
    
    
    
    .left-arrow {
        left: 20px;
        justify-content: flex-start;
        font-size: 17px;
        font-family: 'Space Mono-Regular';
        color: #ffffff;
        text-decoration: none !important;
        font-weight: 100;
    }
    


    .left-arrow:hover {
        
        font-weight: 900;
    }


    .right-arrow:hover {
        font-weight: 900;
    }

    .right-arrow {
        right: 20px;
        justify-content: flex-end;
        font-size: 17px;
        font-family: 'Space Mono-Regular';
        color: #ffffff;
        text-decoration: none !important;
        font-weight: 100;
    }
    
    .lightbox-arrow span {
        display: flex;
        align-items: center;
    }
    
    .left-arrow span::before,
    .right-arrow span::after {
        display: inline-block;
        margin: 0 5px;
    }
    
    .left-arrow span::before {
        content: '\2190'; /* Left arrow Unicode */
    }
    
    .right-arrow span::after {
        content: '\2192'; /* Right arrow Unicode */
    }
    
    .lightbox-texts9 {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding: 0 20px;
        width: 100%;
        font-family: 'Arial', sans-serif;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        font-size: 16px;
    }
    
    .text-left9 {
        text-align: left;
        font-weight: bold;
    }
    
    .text-right9 {
        text-align: right;
        font-style: italic;
        font-size: 14px;
        background: none;
    }
    

    .text-right10 a {
        color: #ffffff !important; 
        background: none;/* !important forces this style to be applied */
      }

      .text-right10 {
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        color: white;
        font-size: 20px;
        padding: 5px;
        font-family: 'Space Mono-Regular';
        z-index: 2;
        pointer-events: none;
        background: none;
    }

    .text-right10 {
        align-self: flex-end;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 200px;
        background: none;
    
    }

    .text-left10 a {
        color: #ffffff !important;
         /* !important forces this style to be applied */
         background: none;
      }

      .text-left10 {
       
        color: white;
        font-size: 20px;
        padding: 5px;
        z-index: 2;
        font-family: 'Poppins-Regular';
        background: none;
    }

    .text-left10 {
        align-self: flex-end;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 30px;
        margin-right: 200px;
        pointer-events: none;
        background: none;
    
    }

    .ligthbox10 {
        display: flex;
    }



    @media screen and (max-width: 768px) { /* Adjust max-width as needed for your smartphone breakpoint */
        .lightbox, 
        .lightbox-overlay, 
        .lightbox.hidden, 
        .lightbox-content, 
        .lightbox.show, 
        .lightbox-image, 
        .lightbox-arrow, 
        .lightbox-arrow span, 
        .lightbox-texts9 {
            display: none !important; /* Hide all lightbox elements */
            pointer-events: none; /* Disable clicking or interactions */
        }
    }
    


    @media screen and (max-width: 768px) { /* Adjust max-width as needed for your breakpoint */
        
        
        .text-left,
        .text-right,
        .top-right-button,
        .fa-expand {
            display: none !important; /* Hide all overlay-related elements */
             /* Disable clicking or interaction */
        }



        .logo-icon {
            margin-top: 125px;
        }
    }






    @media (max-width: 768px) { 
        .menu-container {
            position: absolute;
       
        left: 0;
        width: 100%;
        display: none; /* Hidden by default */
        flex-direction: column; /* Stack links vertically */
        align-items: center;
        background-color: #ff0000;
        
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden; /* Ensure it takes up the full viewport height and width */
            z-index: 9999; 
            

        max-height: 1500px;
       
        margin-top: 70px;

        }

        .menu-toggle {
            display: block; /* Show toggle on smaller screens */
            display: flex;
        }
    }