/* Custom Styles */
h1, h2, h3 {
    color: #333;
}

p {
    line-height: 1.6;
    color: #666;
}

.view-more-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.view-more-btn:hover {
    background-color: #555;
}

.project-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.project-item h3 {
    margin-top: 10px;
}

.project-item p {
    color: #666;
}

.overlay-text {
    font-size: 4rem; /* Adjust the size as needed */
    color: white; /* Text color */
    text-shadow: 2px 2px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black, 1px 1px 0px black; /* Black border effect */
    text-align: center; /* Center the text */
}

.carousel-image {
    width: 100%;           /* Image takes up full width of the container */
    height: 100%;          /* Image height adjusts automatically to maintain aspect ratio */
    object-fit: contain;   /* Ensures the entire image is displayed without being cropped */
}

.carousel-item {
    height: auto;          /* Removes any fixed height that might cause the image to be cropped */
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center;     /* Centers the image vertically */
}

.custom-logo {
    width: 65%;         /* Set the width to 50% of its default size */
    max-width: none;     /* Ensure it doesn't get constrained by any max-width rule */
    height: auto;        /* Maintain the aspect ratio */
}

.custom-heading {
    text-align: center;   /* Centers the <h1> text */
    font-size: 2rem;      /* Adjust the size as necessary */
    margin-bottom: 20px;  /* Adds space below the heading */
}

.custom-paragraph {
    font-size: 1.25rem;   /* Increases the size of the paragraph text */
    line-height: 1.6;     /* Adds better readability with increased line spacing */
}

.custom-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Ensures the image stays responsive */
}

@media (max-width: 768px) {
    .custom-logo {
        width: 80%; /* Adjust image size for smaller screens */
    }
}

.carousel-caption {
    top: 20px; /* Position from the top of the image */
    bottom: auto; /* Disable default bottom positioning */
    text-align: left; /* Optional: Align text to the left or center as needed */
}

#service-areas {
    margin-top: 40px;
}

#service-areas h2 {
    margin-bottom: 20px;
    font-size: 2.5rem; /* Adjust the size as necessary */
}

#service-areas p {
    font-size: 1.25rem; /* Adjust size for readability */
}

.embed-responsive {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Aspect Ratio 16:9 */
}

.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.grey-background {
    background-color: #f7f7f7; /* Light grey color */
}

/* Social Media and Contact Icons */
.header-social a {
    font-size: 1.5rem;  /* Adjust size as needed */
    color: white;
    text-decoration: none;
    margin-right: 15px;
}

.header-social a:hover {
    color: #ffffff;  /* Hover color effect */
}