body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: auto;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/Images/ak-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: blur(5px);
    z-index: 0;
    animation: zoomIn 10s infinite; /* Add zoom animation */
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* Zoom in */
    }
    100% {
        transform: scale(1);
    }
}

header, main, footer {
    position: relative; /* Ensure these elements stay above the blurred background */
    z-index: 1; /* Ensure they are above the background */
}

header {
    background: rgba(51, 51, 51, 0.7); /* Darker semi-transparent background */
    color: #fff;
    padding: 20px 0;
    text-align: center;
    animation: fadeIn 1s; /* Add fade-in animation */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

.header-title {
    font-family: 'Playfair Display', serif; /* Different font for header */
    font-size: 2.5em; /* Increase font size */
    color: #ffcc00; /* Gold color for the title */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

h2 {
    font-size: 1.3em; /* Adjust size as needed */
    margin-bottom: 10px; /* Add space below headings */
}

nav {
    position: relative;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold; /* Make links bold */
    transition: color 0.3s; /* Smooth color transition */
}

nav ul li a:hover {
    color: #ffcc00; /* Change color on hover */
}

main {
    padding: 20px;
}

.hover-effect {
    transition: color 0.3s; /* Smooth transition for color change */
}

.hover-effect h2 {
    transition: color 0.3s; /* Smooth transition for h2 color */
}

.hover-effect:hover h2 {
    color: #ffd700; /* Golden color for the h2 element on hover */
}

section {
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.85); /* Lighter semi-transparent background */
    padding: 20px;
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Start with opacity 0 for fade-in effect */
    animation: slideIn 0.5s forwards; /* Add slide-in animation */
}

section:nth-child(even) {
    animation-delay: 0.2s; /* Delay for even sections */
}

.gallery-images {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    justify-content: center; /* Center align the images */
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scroll */
    padding: 10px; /* Uniform padding around the gallery */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.gallery-images::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.gallery-images img {
    width: 160px; /* Fixed width for images */
    height: auto; /* Maintain aspect ratio */
    margin: 10px; /* Equal margin around images */
    border-radius: 10px; /* Rounded corners for images */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for scale and shadow */
}

.gallery-images img:hover {
    transform: scale(1.1); /* Scale image on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
}


label {
    margin-top: 10px;
}

.contact-link {
    color: #ffcc00; /* Change this to your desired color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth transition on hover */
}

.contact-link:hover {
    color: #e6b800; /* Darker shade on hover */
}


footer {
    text-align: center;
    padding: 20px 0;
    background: rgba(51, 51, 51, 0.7); /* Semi-transparent background */
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
}

footer::before {
    content: '';
    position: absolute; /* Positioning for footer blur */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit; /* Use the same background as the footer */
    filter: blur(10px); /* Adjust blur level here */
    z-index: -1; /* Send the blur behind the footer content */
}

/* Keyframe animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}