body {
    font-family:"Poppins", sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #16110d, #050403);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-anchor: none;
    overflow-x: hidden;
    width: 100%;
}

button {
    font-family: "Poppins", sans-serif; /* Apply Poppins font */
}   

 /* Header container */
header {
    color: white;
    text-align: center;
    position: relative;
    height: 40vh;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;

}

.header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/generic/background.jpg');
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Text styles for the header */
h1 {
    background-image: url('../images/generic/ahmetyuksek.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 900px;
    height: 335px;
    margin: 0;
    position: relative;
    /* Hide the text but keep it accessible for SEO */
    text-indent: -9999px;
    overflow: hidden;
}

h2 {
    background-image: url('../images/generic/espresso.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 291px;
    height: 55px;
    margin-left: 27px;
    margin-right: 0px;
    margin-top: 0rem;
    margin-bottom: 0rem;
    position: relative;
    /* Hide the text but keep it accessible for SEO */
    text-indent: -9999px;
    overflow: hidden;

}   

h3 {
    background-image: url('../images/generic/the journey begins.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 250%;
    height: 670px;
    position: relative;
    /* Hide the text but keep it accessible for SEO */
    text-indent: -9999px;
    overflow: hidden;
    margin-bottom: -42rem;

}

/* Dark mist effect */
.dark-mist {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 250vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Section heading styles */
h2 {
    font-size: 3em;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
}

#gallery {
    margin: 0;
    margin-top: 2rem;
    border: none;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

#donation {
    display: none;
}


.photo-grid {
    display: flex;
    gap: 20px;
    padding: 20px;
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
}

.photo-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(33.333% - 14px);
    height: fit-content;
    transition: height 0.8s ease-out;
}

.photo-grid a {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.95); /* Start slightly smaller for smoother animation */
}

.photo-grid a.visible {
    opacity: 1;
    transform: scale(1); /* Scale back to original size */
}

.photo-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    transform: scale(1);
    will-change: transform;
}

.photo-grid a:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.photo-grid a:hover img {
    transform: scale(1.1);
}

.bio-content {
    max-width:1022px;
    margin: 2rem auto;
    padding: 4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    margin-top: 0rem;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
}

.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.bio-content p {
    margin: 0;
    line-height: 1.6;
    color: #fff;
    font-size: 17px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: justify;
}

/* Add media query for responsive design */
@media (max-width: 768px) {
    .bio-content {
        flex-direction: column;
        text-align: center;
        margin: 0rem 1rem;
        padding: 1.5rem;
    }
    
    .profile-image {
        width: 200px;
        height: 200px;
        margin-bottom: 1rem;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 0;
}

/* Add media queries for better responsive behavior */
@media (max-width: 1400px) {
    .photo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    header {
        margin-bottom: -1rem;
    }

    h1 {
        width: 400px;
        height: 166px;
    }

    #gallery {
        padding: 0;
    }

    .photo-grid {
        padding: 39px;
        gap: 10px;
    }

    .photo-column {
        gap: 10px;
        width: calc(33.333% - 7px);
    }

    .photo-grid a {
        border-radius: 8px;
    }

    .photo-grid img {
        border-radius: 8px;
    }

    .social-links {
        padding-top: 1.5rem;

    }

    h3 {
        margin-bottom: -22rem;
        height: 310px;
        width: 150%;
    }

    h2{
        width: 242px;
        margin-left: 10px;
        margin-bottom: -23px;
        pointer-events: none;
    }



    .bio-content {
        flex-direction: column;
        text-align: center;
        margin: 0rem 1rem;
        padding: 3.5rem;
    }

    .bio-content p {
        font-size: 13px;
    }

    .profile-image {
        width: 200px;
        height: 200px;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {


    .photo-grid {
        gap: 6px;
        padding: 39px;
    }

    .photo-column {
        gap: 6px;
        width: calc(33.333% - 4px);
    }

    .photo-grid a {
        border-radius: 6px;
    }

    .photo-grid img {
        border-radius: 6px;
    }
}

/* Bottom background section */
.bottom-background {
    display: none;
}

.payment-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.1rem;
    margin: 1rem auto;
    max-width: 700px;
    position: relative;
}

.coffee-text {
    color: white;
    font-size: 1.2rem;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.buttons-container {
    display: flex;
    gap: 1rem;
    margin-top: -2rem;
}

.payment-button {
    padding: 12px 24px; /* Slightly larger for a premium look */
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border: none;
    min-width: 120px; /* Slightly wider for better balance */
    text-align: center;
    
}

/* PayPal Button */
.paypal-button {
    background: linear-gradient(135deg, #2e2e2e, #4b4b4b); /* Dark gray gradient */
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.paypal-button:hover {
    background: linear-gradient(135deg, #3a3a3a, #5a5a5a); /* Slightly lighter on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); /* Stronger shadow for hover effect */
}


/* Revolut Button */
.revolut-button {
    background: linear-gradient(215deg, #2c2c2c, #505050); /* Dark gray gradient */
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.revolut-button:hover {
    background: linear-gradient(215deg, #3a3a3a, #636363); /* Slightly lighter on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); /* Stronger shadow for hover effect */
}


/* Shared Hover Effect */
.payment-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Softer shadow for all buttons */
}

.footer {
    position: relative;
    padding: 0;
    min-height: 54vh;
    margin-top: auto;
    transition: transform 0.8s ease-out;
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
    display: flex; /* Enable flexbox */
    flex-direction: column;
    justify-content: flex-end; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    text-align: center; /* Optional: Align text horizontally if needed */
}


.footer-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/generic/footerbackground.jpg');
    background-size: cover;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(to top, 
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(to top, 
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 0;
}

.footer-content {
    position: relative;
    max-width: 1086px;
    width: 100%;    
    margin: 0 0;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.social-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    z-index: 25;
    padding-top: 2rem;
    padding-right: 2rem;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.social-link:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.social-icon {
    width: 24px;
    height: 24px;
}

.contact-info {
    text-align: center;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
}

.contact-info p {
    margin: 0.5rem 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;

}

.copyright {
    opacity: 0.8;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.testimonial {
    
    font-size: 0.7rem;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 10;
    padding-top: 2rem;
    line-height: 12px;
    font-family: "Poppins";
}

@media (max-width: 768px) {
    
    .footer-content {
        padding: 0;
    } 

    .social-links {
        gap: 1.5rem;
        padding-bottom: 1rem;
    }

    .footer {
        padding: 20px;
    }
    
}

main {
    flex: 1;
    margin-top: 0rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Add this to ensure the page fills the viewport */
html,
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.photo-grid .video-container {
    position: relative;
    display: inline-block;
    width: 100%;
    break-inside: avoid;
}

.photo-grid .play-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Increased z-index */
    pointer-events: none;
    transition: all 0.3s ease;
    will-change: background-color; /* Add this to optimize transitions */
}

.photo-grid .play-icon::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 12px solid white;
    border-bottom: 7px solid transparent;
    margin-left: 4px;
    transition: all 0.3s ease;
    will-change: border-left-color;
}

.video-container:hover .play-icon {
    background-color: rgba(255, 255, 255, 0.7);
}

.video-container:hover .play-icon::before {
    border-left-color: black;
}

/* Update media queries */
@media (max-width: 1200px) {
    .photo-grid {
        columns: 3;
    }
}

@media (max-width: 768px) {
    .photo-grid {
        columns: 2;
    }
}

@media (max-width: 480px) {
    .photo-grid {
        columns: 1;
    }
}


#loadMoreBtn {
    background: linear-gradient(180deg, #2c2c2c, #505050); /* Dark gray gradient */
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
    letter-spacing: 0.5px;
    padding: 12px 24px; /* Slightly larger for a premium look */
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border: none;
    min-width: 120px; /* Slightly wider for better balance */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0rem auto;
    max-width: 700px;
    position: relative;
}

#loadMoreBtn:hover {
    background: linear-gradient(180deg, #3a3a3a, #636363); /* Lighter dark gradient */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); /* Subtle black shadow */
}




.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    z-index: 2;
    pointer-events: none;
    opacity: 0.5;
}

/* Z-index Hierarchy
-------------------
These are organized from highest to lowest z-index for better maintainability */

/* Level 30 - Top Level UI */
h1 {
    z-index: 30;
}
  
header {
    z-index: 25;
    height: auto;
}

/* Level 25 - Interactive Elements */
#loadMoreBtn {
    z-index: 26;
}

/* Level 24 - High Priority Content */
.bio-content {
    z-index: 25;
}

.payment-buttons {
    z-index: 25;
}

/* Level 23 - Main Content */
#gallery {
    z-index: 23;
}

.photo-grid {
    z-index: 23;
}

.photo-grid .play-icon {
    z-index: 23;
}

/* Level 22 - Footer */
.footer {
    z-index: 22;
}

/* Level 20 - Overlays */
.dark-mist {
    z-index: 24;
}

/* Level 15 - Dynamic Overlays */
.dynamic-overlay {
    z-index: 15;
}

/* Level 10 - Blur Effects */
.blur-overlay {
    z-index: 10;
}

/* Level 5 - Background Elements */
.header-image {
    z-index: 16;
}

.background-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    pointer-events: none;
    opacity: 1; /* Increased opacity for a stronger effect */
    background: linear-gradient(180deg, #1f1a14, #080706); /* Dark gray gradient */
}




/* Critical content */
header,
.bio-content,
.photo-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}




/* Optimize image loading */
.photo-grid img {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none; /* Ensures it doesn't interfere with user interactions */
}

/* Sliding Animations */
@keyframes slide-left {
    0% { background-position: 75% 50%; }
    100% { background-position: 25% 50%; }
}

@keyframes slide-right {
    0% { background-position: 25% 50%; }
    100% { background-position: 75% 50%; }
}

@keyframes slide-top {
    0% { background-position: 50% 75%; }
    100% { background-position: 50% 25%; }
}

@keyframes slide-bottom {
    0% { background-position: 50% 25%; }
    100% { background-position: 50% 75%; }
}

/* Zoom Animations */
@keyframes zoom-in {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}