/* Styling for the custom navbar background */
.custom-nav,
.footer{
    background-color: #1C2526; /* Dark navy background */
}

/* Styling for the company logo */
.company-logo {
    max-height: 60px; /* Base height for larger screens */
    width: auto;
    max-width: 100%; /* Prevent overflow */
    margin-left: 10px; /* Tighter margin */
    object-fit: contain; /* Ensure proper scaling */
    box-sizing: border-box; /* Include padding/margins in size */
}

/* Adjust logo on smaller devices */
@media (max-width: 576px) {
    .company-logo {
        max-height: 4vh; /* Viewport-based height for mobile */
        max-height: 35px; /* Fallback for small screens */
        margin-left: 5px;
        margin-bottom: 15px; /* More space for hamburger menu */
    }
}

/* Add left padding on large devices */
@media (min-width: 992px) {
    .company-logo {
        padding-left: 1rem;
    }
}

/* Center hamburger menu on smaller devices */
@media (max-width: 576px) {
    .navbar-toggler {
        margin: 0 auto; /* Center horizontally */
        padding: 8px; /* Consistent padding */
    }
    .navbar-collapse {
        text-align: center; /* Center nav links */
    }
}

/* Carousel image styling */
.carousel-img {
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    object-fit: cover; /* Fill container without distortion */
    object-position: center; /* Center image content */
}

/* Adjust carousel image height on smaller devices */
@media (max-width: 768px) {
    .carousel-img {
        height: 250px; /* Smaller height for mobile */
    }
}

/* Services section image styling */
.service-img {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Fill container without distortion */
    object-position: center; /* Center image content */
}

/* Adjust service image height on smaller devices */
@media (max-width: 576px) {
    .service-img {
        height: 150px; /* Smaller height for mobile */
    }
}

/* Styling for the custom navbar background */
.custom-nav {
    background-color: #1C2526; /* Dark navy background */
}

/* Styling for the company logo */
.company-logo {
    max-height: 60px; /* Base height for larger screens */
    width: auto;
    max-width: 100%; /* Prevent overflow */
    margin-left: 10px; /* Tighter margin */
    object-fit: contain; /* Ensure proper scaling */
    box-sizing: border-box; /* Include padding/margins in size */
}

/* Adjust logo on smaller devices */
@media (max-width: 576px) {
    .company-logo {
        max-height: 4vh; /* Viewport-based height for mobile */
        max-height: 35px; /* Fallback for small screens */
        margin-left: 5px;
        margin-bottom: 15px; /* More space for hamburger menu */
    }
}

/* Add left padding on large devices */
@media (min-width: 992px) {
    .company-logo {
        padding-left: 1rem;
    }
}

/* Center hamburger menu on smaller devices */
@media (max-width: 576px) {
    .navbar-toggler {
        margin: 0 auto; /* Center horizontally */
        padding: 8px; /* Consistent padding */
    }
    .navbar-collapse {
        text-align: center; /* Center nav links */
    }
}

/* Carousel image styling */
.carousel-img {
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    object-fit: cover; /* Fill container without distortion */
    object-position: center; /* Center image content */
}

/* Adjust carousel image height on smaller devices */
@media (max-width: 768px) {
    .carousel-img {
        height: 250px; /* Smaller height for mobile */
    }
}

/* Services section image styling */
.service-img {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Fill container without distortion */
    object-position: center; /* Center image content */
}

/* Adjust service image height on smaller devices */
@media (max-width: 576px) {
    .service-img {
        height: 150px; /* Smaller height for mobile */
    }
}

/* Map container styling */
.map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

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

/* Styling for the custom navbar background */
.custom-nav {
    background-color: #1C2526; /* Dark navy background */
}

/* Styling for the company logo */
.company-logo {
    max-height: 60px; /* Base height for larger screens */
    width: auto;
    max-width: 100%; /* Prevent overflow */
    margin-left: 10px; /* Tighter margin */
    object-fit: contain; /* Ensure proper scaling */
    box-sizing: border-box; /* Include padding/margins in size */
}

/* Adjust logo on smaller devices */
@media (max-width: 576px) {
    .company-logo {
        max-height: 4vh; /* Viewport-based height for mobile */
        max-height: 35px; /* Fallback for small screens */
        margin-left: 5px;
        margin-bottom: 15px; /* More space for hamburger menu */
    }
}

/* Add left padding on large devices */
@media (min-width: 992px) {
    .company-logo {
        padding-left: 1rem;
    }
}

/* Center hamburger menu on smaller devices */
@media (max-width: 576px) {
    .navbar-toggler {
        margin: 0 auto; /* Center horizontally */
        padding: 8px; /* Consistent padding */
    }
    .navbar-collapse {
        text-align: center; /* Center nav links */
    }
}

/* Carousel image styling */
.carousel-img {
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    object-fit: cover; /* Fill container without distortion */
    object-position: center; /* Center image content */
}

/* Adjust carousel image height on smaller devices */
@media (max-width: 768px) {
    .carousel-img {
        height: 250px; /* Smaller height for mobile */
    }
}

/* Services section image styling */
.service-img {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Fill container without distortion */
    object-position: center; /* Center image content */
}

/* Adjust service image height on smaller devices */
@media (max-width: 576px) {
    .service-img {
        height: 150px; /* Smaller height for mobile */
    }
}

/* Map container styling */
.map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

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