body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0;
}

header {
    background-color: #ff4081;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* Ensure it stacks correctly */
    z-index: 10; /* Higher z-index to be above other elements */
}

.logo p {
    font-family: 'Pacifico', cursive;
    font-size: 24px;
    color: #000; /* Black color */
    margin: 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-links li {
    position: relative;
    margin: 0 15px;
}

.nav-links li a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

.nav-links li a:hover {
    text-decoration: underline;
}

.u-nav-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff; /* White background for dropdown */
    border: 1px solid #ff4081; /* Border color to match the theme */
    border-radius: 5px; /* Rounded corners */
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for better visibility */
}

.u-nav-item:hover .u-nav-popup {
    display: block;
}

.u-nav-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.u-nav-popup li {
    margin: 5px 0;
}

.u-nav-popup li a {
    color: #333; /* Dark grey for text */
    text-decoration: none;
    padding: 10px;
    display: block; /* Ensure the entire area is clickable */
}

.u-nav-popup li a:hover {
    background-color: #ff4081; /* Highlight on hover */
    color: #fff; /* White text on hover */
}

.burger {
    display: none;
    cursor: pointer;
}

.burger i {
    color: #000;
    font-size: 24px;
}

/* Filter Section */
.filter-section {
    position: relative; /* Position relative to contain the overlay */
    background-color: #000; /* Fallback color */
    background-image: url('../assets/images/IMG-20230604-WA0032.jpg'); /* Path to your background image */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    padding: 20px; /* Adjust padding as needed */
    text-align: center;
    color: #fff; /* Ensures text color is white for better contrast */
    height: 150px; /* Default height for smaller screens */
    z-index: 1; /* Ensure it is below the burger menu */
}

.filter-section::before {
    content: ""; /* Required for pseudo-element */
    position: absolute; /* Absolute position to cover the entire section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay with 50% opacity */
    z-index: 1; /* Places the overlay behind the text but above the background image */
}

.filter-section .slogan,
.filter-section .filter-container {
    position: relative; /* Ensures text and filters are above the overlay */
    z-index: 2; /* Places text and filters above the overlay */
}

/* Responsive Styles for Desktop Screens */
@media (min-width: 1024px) {
    .filter-section {
        height: 250px; /* Increased height for larger screens */
    }
}

.slogan {
    color: #ff4081; /* Updated color */
    font-size: 24px;
    font-family: 'Pacifico', cursive;
    margin: 0;
}

.filter-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.filter {
    margin: 5px;
}

.filter label {
    color: #ff4081;
    font-size: 16px;
    margin-right: 10px;
}

.filter select {
    padding: 8px 15px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #3b5998;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

section {
    padding: 10px;
    text-align: center;
    background-color: #222; /* Dark grey background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    margin: 20px auto; /* Space around sections and center alignment */
    color: #fff; /* White text for contrast */
    max-width: 95%; /* Reduced width */
}

h1, h2, h3, h4, h5, h6 {
    color: #ff4081;
}

.landscape-img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px; /* Add some space below the image */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 images per row on desktop */
    gap: 10px;
    padding: 20px;
}

.gallery img {
    width: 100%;
    height: 420px;
    border-radius: 5px;
}

footer {
    background-color: #ff4081;
    padding: 10px 0;
    text-align: center;
    color: #000;
}


.service-locations {
    background-color: #111;
    padding: 10px 10px;
}

.service-locations h2 {
    color: #ff4081;
    margin-bottom: 20px;
}

.locations-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 buttons per row on desktop */
    gap: 10px; /* Space between buttons */
    padding: 10px; /* Optional padding around the grid */
}

.location-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #000;
    background-color: #ff4081;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
    text-align: center;
    line-height: 1.5;
    box-sizing: border-box; /* Ensure padding and border are included in the element’s total width and height */
}

.location-btn:hover {
    background-color: #fff;
    transform: scale(1.05);
}

.location-btn:active {
    background-color: #c6286c;
    transform: scale(1);
}


/* Responsive Styles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        background-color: #ff4081;
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 2; /* Ensure it is above other elements */
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .burger {
        display: block;
    }

    .filter-container {
        flex-direction: column;
    }

    .locations-container {
        grid-template-columns: 1fr; /* 1 button per row on mobile */
    }

    .location-btn {
        font-size: 14px; /* Adjust font size for mobile */
        padding: 8px 16px; /* Adjust padding for mobile */
    }
	.slogan {
    color: #ff4081; /* Updated color */
    font-size: 18px;
}
}

@media (max-width: 1024px) {
    .gallery {
        grid-template-columns: 1fr; /* 1 image per row on devices smaller than desktop */
    }
 .gallery img {
    height: auto;

  }
}


/* Sticky Buttons */
.sticky-buttons {
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sticky-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 24px;
}

.call-button {
    background-color: #34b7f1; /* Phone call blue */
    animation: zoomInOut 1s infinite;
}

.whatsapp-button {
    background-color: #25d366; /* Green color for WhatsApp button */
}

@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}


/* Footer Social Icons */
.social-icons {
    margin-top: 10px;
}

.social-icons a {
    margin: 0 5px;
    color: #000;
    font-size: 24px;
    text-decoration: none;
}

.social-icons a:hover {
    color: #fff;
}


/*
     FILE ARCHIVED ON 01:52:50 Feb 26, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 04:50:02 Apr 24, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.771
  exclusion.robots: 0.067
  exclusion.robots.policy: 0.052
  esindex: 0.015
  cdx.remote: 10.256
  LoadShardBlock: 107.501 (3)
  PetaboxLoader3.resolve: 156.42 (4)
  PetaboxLoader3.datanode: 70.779 (4)
  load_resource: 123.118
*/