body {
    background-color: #000000 !important;; /* Black */
    color: #ffffff; /* White text color */
    font-family: Arial, sans-serif;
    text-align: center;
    overflow-x: hidden;
}
/* Base styles */
.hamburger {
    display: none;
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }
  
  #nav-menu ul {
    display: flex;
    gap: 20px;
  }
  
  /* MOBILE styles */
  @media (max-width: 768px) {
    .hamburger {
      display: block;
      position: absolute;
      top: 25px;
      right: 20px;
      z-index: 1001;
    }
  
    #nav-menu ul {
      display: none;
      flex-direction: column;
      background-color: black;
      width: 100%;
      position: absolute;
      top: 80px;
      left: 0;
      z-index: 1000;
      padding: 10px 0;
      text-align: center;
    }
  
    #nav-menu ul.show {
      display: flex;
    }
  }
  @media (max-width: 768px) {
    .phone-number {
      display: none;
    }
  }
  
  
header {
    position: sticky;
    top: 0;
    background: #000;
    color: #fff;
    padding: 1rem 0rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; /* Ensures the header stays on top of other content */
    width: 100%;
}

header nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center; /* Add this line */
    width: 100%; /* Ensure the ul spans the full width of the nav */
    padding: 1000; /* Ensures there is no default padding */
}


header nav ul li {
    padding: 10.5px 35px;
}

header nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}
header nav ul li a:hover {
    color: #20e7ff; /* Change to your preferred hover color */
}

nav {
    width: 100%; /* Full width to ensure it can center contents within the header */
    text-align: center;
}

nav ul {
    display: inline-block; /* Allows the list to resize according to its content */
    margin: 0; /* Removes default margin */
    padding: 10px; /* Removes default padding */
}
.logo {
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the glow effect */
}

.logo:hover {
    box-shadow: 0 0 15px rgba(5, 255, 255, 0.75); /* White glow */
}
.phone-number a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: -1rem;
    position: absolute; /* or fixed */
    right: 200px; /* Move it left from the edge */
    white-space: nowrap;
}
.hours {
    font-size: 12px;
    opacity: 0.8;
  }
  body {
    background-color: black;
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
}
.image-container {
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px;
    border-radius: 2px;
    box-shadow: 0 0 20px #00ffccaa;
  }
  
        .slider-container {
            width: 100%;
            margin: auto;
            overflow: hidden;
            position: relative;
            backdrop-filter: blur(6px);
            background-color: rgba(0, 0, 0, 0.5);
            padding: 2px;
            border-radius: 2px;
            box-shadow: 0 0 20px #00ffccaa;
        }
        .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }
        .slide img {
            width: 30%;
            height: auto;
            border-radius: 10px;
        }
        .content-box {
            background-image: url('assets/background.png'); /* Path to your image */
            background-color: #ffffff; /* or any color you prefer */
            color: #fff; /* for text color */
            padding: 20px;
            max-width: 1200px; /* or any max width you prefer */
            margin: auto; /* centers the box horizontally */
            overflow: hidden; /* ensures all content is contained within the box */
            box-shadow: 220 400px 800px rgba(0,0,0,0.1); /* optional: adds shadow for better visibility */
            border-radius: 10px; /* optional: rounds the corners of the box */
        }
        #hero h1 {
            font-family: "Montserrat", Sans-serif;
            font-size: 40px;
            font-weight: 700;
            letter-spacing: -1.5px;
            color: #ffffff;
            display: center;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .description {
            max-width: 800px;
            margin: 2px auto;
            font-size: 1.0rem;
            text-align: fixed;
            line-height: 2.0;
            padding: 10px;
            color: #e9e9e9;
        }
        
            .service-item {
                width: 10%; /* Adjust based on your layout needs */
                margin: 20px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adds a subtle shadow */
                padding: 20px;
                background-color: #fff; /* White background for each item */
                text-align: center; /* Center-aligns the text */
            }
            
            .service-item img {
                width: 10%; /* Ensures the image fills the container */
                height: auto; /* Keeps the image aspect ratio */
            }
            
            .service-item h3 {
                color: #333; /* Dark grey color for headings */
            }
            
            .service-item p {
                color: #666; /* Lighter text for descriptions */
                padding: 0 10px;
            }
            
            .btn {
                display: inline-block;
                padding: 10px 20px;
                margin-top: 10px;
                background-color: #20e7ff; /* Example blue */
                color: white;
                text-decoration: none; /* Removes underline from links */
                border-radius: 5px; /* Rounded corners for the button */
            }
            
            .btn:hover {
                background-color: #20e7ff; /* Darker blue on hover */
            }
            @media (max-width: 768px) {
                .service-item {
                    width: 100%; /* Stacks them vertically on smaller screens */
                }
            }
            body, html {
                margin: 0;
                padding: 0;
                font-family: Arial, sans-serif; /* Use a modern font */
                background-color: #f8f9fa; /* Light grey background similar to the screenshot */
            }
            
            .page-section {
                padding: 60px 0;
            }
            
            .container {
                width: 95%;
                max-width: 1200px; /* Centered max-width for larger screens */
                margin: 0 auto;
            }
            
            .text-center {
                text-align: center;
            }
            
            .section-heading {
                color: #20e7ff; /* Bright blue color for headings */
                margin-bottom: 20px;
                text-transform: uppercase;
                font-size: 30px;
            }
            
            .section-subheading {
                color: #6c757d; /* Grey color for subheadings */
                font-size: 20px;
            }
            
            .row {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around; /* This will evenly space your portfolio items */
            }
            
            .col-sm-6.col-lg-4 {
                width: 30%; /* Makes three columns */
                margin-bottom: 30px;
            }
            
            .portfolio-item {
                background: white;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add subtle shadow for depth */
                border-radius: 10px; /* Rounded corners */
                overflow: hidden;
            }
            
            .portfolio-item img {
                width: 100%;
                height: auto;
                display: block;
                transition: transform 0.2s ease; /* Smooth transform on hover */
            }
            
            .portfolio-item:hover img {
                transform: scale(1.05); /* Slight zoom on hover */
            }
            
            .portfolio-caption {
                padding: 15px;
                text-align: center; /* Centered text */
            }
            
            .portfolio-caption-heading {
                color: #333; /* Darker text for better readability */
                font-size: 18px;
                font-weight: bold;
                margin: 10px 0 5px;
            }
            
            .portfolio-caption-subheading {
                color: #666; /* Lighter grey for subheading */
                font-size: 14px;
            }
            
            .portfolio-hover {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
                opacity: 0;
                transition: opacity 0.5s ease;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .portfolio-link {
                position: relative;
                display: block;
            }
            
            .portfolio-link:hover .portfolio-hover {
                opacity: 1; /* Show hover effect on hover */
            }
            
            .fas.fa-plus {
                color: white; /* White color for icons */
                font-size: 24px; /* Larger icon */
            }
            
    /* General styles */
    body, html {
        margin: 0;
        padding: 0;
        font-family: 'Arial', sans-serif; /* Modern, readable font */
        background-color: #ffffff; /* Consistent white background */
    }
    
    h2 {
        font-family: "Montserrat", Sans-serif;
        text-align: center; /* Center-align the heading */
        font-size: 28px; /* Larger font size for heading */
        color: #00d7df; /* Dark grey for text */
        margin-top: 20px; /* Space above the heading */
        margin-bottom: 40px; /* Space below the heading */
    }  
    
    .services-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 40px 20px;
        color: #00e6ff;
        text-align: center;
      }
      
      .service-item {
        max-width: 600px;
        margin-bottom: 40px;
      }
      
      .service-item img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
      }
      
      .service-description {
        margin-top: 15px;
        font-size: 1.1rem;
      }
      .contact-button {
        display: inline-block;
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #eff3f3;
        color: #000;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.3s ease;
      }
      
      .contact-button:hover {
        background-color: #ffffff;
        color: #fff;
      }
      
/* Gallery container */
.gallery, .gallery2, .gallery3, .gallery4 {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    margin: 0 auto; /* Center align gallery and set uniform margin */
    max-width: 1200px; /* Max width for large screens */
    background-color: #000000; /* optional: adds a background color */
    border-radius: 10px; /* optional: rounds the corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* optional: adds a shadow for depth */
    padding: 2px; /* adds padding around each item */
}

/* Image and description container */
.right, .left {
    display: flex;
    margin-bottom: 20px; /* Space between rows */
}

/* Right-aligned items */
.right img, .left img {
    flex-shrink: 0; /* Prevent image from shrinking */
    width: 40%; /* Width of images */
    height: auto; /* Maintain aspect ratio */
    margin-right: 20px; /* Space between image and text */
    border-radius: 5px; /* Slightly rounded corners for the images */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

/* Left-aligned items */
.left img {
    order: 2; /* Put image on the right side */
    margin-left: 20px; /* Space between image and text */
    margin-right: 0; /* Reset right margin */
}
.blue-squares {
    display: flex-start; /* aligns blue squares in a row */
    justify-content: flex-start; /* centers the squares horizontally */
    /* additional styling for blue squares */
}
/* Descriptions */
.description2 {
    font-family: "Montserrat", Sans-serif;
    flex-grow: 1; /* Allow description to fill available space */
    padding: 10px; /* Padding inside the text box */
    background: #000000; /* Light grey background for the description */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Lighter shadow for text box */
    font-size: 20px; /* Readable font size */
    color: #a7a7a7; /* Text color */
    display: flex;
    align-items: center; /* Center text vertically */
    text-align: justify; /* Justify text */
}

.gallery-title {
    font-size: 18px; /* large text for visibility */
    color: #333; /* dark text for readability */
    margin-bottom: 10px; /* space below the title */
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .right, .left {
        flex-direction: column; /* Stack image and description vertically on small screens */
    }

    .right img, .left img {
        width: 100%; /* Full width images on small screens */
        margin: 0 0 15px 0; /* Adjust margins for mobile */
    }

    .description {
        text-align: center; /* Center-align text on small screens */
    }
}


   

        .content-box {
            background-color: #000000; /* or any color you prefer */
            color: #fff; /* for text color */
            padding: 20px;
            max-width: 1200px; /* or any max width you prefer */
            margin: auto; /* centers the box horizontally */
            overflow: hidden; /* ensures all content is contained within the box */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* optional: adds shadow for better visibility */
            border-radius: 10px; /* optional: rounds the corners of the box */
        }
        footer {
            background-color: #000000; /* Dark background */
            color: #ffffff; /* White text */
            display: flex;
            justify-content: space-between; /* Align items on opposite ends */
            align-items: center; /* Vertical alignment */
            padding: 20px 50px; /* Padding around the content */
        }
        
        .footer-left {
            text-align: left;
        }
        
        .footer-left p {
            margin: 20px 0; /* Small margin between text lines for better readability */
        }
        
        .footer-logo {
            width: 300px; /* Adjust size as needed */
            margin-bottom: 10px; /* Space below the logo */
        }
        
        .footer-right a {
            color: #fff; /* Ensures links are white */
            text-decoration: none; /* No underline */
            margin-left: 20px; /* Space between links */
            font-size: 16px; /* Font size for readability */
        }
        
        .footer-right a:hover {
            text-decoration: underline; /* Underline on hover for better UX */
        }
        
        @media (max-width: 768px) {
            footer {
                flex-direction: column;
                text-align: fixed;
            }
        
            .footer-right {
                margin-top: 20px; /* Add space between the sections */
            }
        
            .footer-right a {
                margin: 10px; /* More space around links on small screens */
            }
        }
        .footer-bottom {
            text-align: center;
            color: #aaa; /* Light gray color for less emphasis */
            font-size: 14px; /* Smaller font size */
            padding: 10px 0; /* Padding for spacing */
            border-top: 1px solid #333; /* Optional: adds a subtle line above the text */
            width: 100%; /* Ensures it spans the width of the footer */
        }
        
        .footer-bottom a {
            color: #ccc; /* Lighter color for the link */
            text-decoration: none; /* No underline */
        }
        .footer-bottom a:hover {
            text-decoration: underline; /* Underline on hover */
        }
        @media screen and (max-width: 768px) {
            header, nav ul {
              flex-direction: column;
              align-items: center;
              text-align: center;
            }
          
            nav ul li {
              margin: 10px 0;
            }
          
            .phone-number {
              margin-top: 10px;
            }
          
            .hero-image, .service-card, .description, .contact-section {
              padding: 10px;
              width: 100%;
            }
          
            .service-card img {
              width: 100%;
              height: auto;
            }
          
            .contact-left, .contact-right {
              flex-direction: column;
              width: 100%;
              padding: 10px;
            }
          
            .contact-section {
              flex-direction: column;
            }
          
            footer {
              flex-direction: column;
              text-align: center;
            }
          
            .footer-left, .footer-right {
              width: 100%;
            }
          }