@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --primary : #707070;
    --black : #000000;
    --secondaryy : #D9D9D9;
    --dark : #141414
}
html{scroll-behavior: smooth !important;}
body{background-color: var(--secondaryy) !important;}
a{text-decoration: none;}
.text-primary{color: var(--primary) !important;}
.text-black{color: var(--black) !important;}
.bg-dark{background-color: var(--dark) !important;}
.fs-48{font-size: 48px;}
.fs-36{font-size: 36px;}
.fs-21{font-size: 21px;}
.fs-25{font-size: 25px;}
.fs-16{font-size: 16px;}
li.nav-item {
    margin: 0px 10px;
}
.height_fill{
    height: -webkit-fill-available;
}
.logo-wrap{
    width: 90%;
}
.banner_wrap {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    aspect-ratio: 1;
    & img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.qoutes{
    position: relative !important; 
}
.qoutes::before {
    content : url('../images/inverted_comma.png');
    position: absolute;
    top: -40px;
    left: -70px;
    color: #fff;
}
.qoutes::after {
    content: url(../images/inverted_comma_2.png);
    position: absolute;
    bottom: -28px;
    right: -5px;
    color: #fff;
}
.qoutes{font-size: 48px;}
.zindex-l{z-index: 1;}
.z-index-max{z-index: 999999999;}
.opacity-20{opacity: 20%;}

/* Mandatory CSS for the service boxes and overlay functionality */
.service-box {
    position: relative; /* Ensures the overlay is positioned relative to the service box */
    overflow: hidden; /* Prevents the overlay from spilling outside the service box */
}

.service-box .overlay {
    position: absolute; /* Positions the overlay relative to the service box */
    top: 0;
    left: 0; /* Ensures the overlay starts at the top-left corner */
    width: 100%; /* Makes the overlay cover the full width of the service box */
    height: 100%; /* Makes the overlay cover the full height of the service box */
    background-color: rgba(0, 0, 0, 1); /* Fully opaque black background */
    opacity: 0; /* Initially invisible */
    transition: opacity 0.3s ease; /* Smooth fade-in effect on hover */
    z-index: 1; /* Ensures the overlay appears above the image */
}

.service-box:hover .overlay {
    opacity: 100; /* Makes the overlay visible when hovering over the service box */
}

.service-box img {
    display: block; /* Ensures the image does not have extra space below it */
    width: 100%; /* Ensures the image scales to fit the service box */
    height: auto; /* Maintains the aspect ratio of the image */
}

.service-box h3 {
    position: absolute; /* Positions the text over the service box */
    top: 50%; /* Centers the text vertically */
    left: 50%; /* Centers the text horizontally */
    transform: translate(-50%, -50%); /* Adjusts for the text's dimensions */
    color: #fff; /* White text for contrast */
    text-align: center; /* Centers the text */
    z-index: 2; /* Ensures the text appears above the overlay */
}

.text-box {
    border-radius: 5px;
    background-color: grey;
}
.bg-dark {
    margin: 0;
    padding: 0;
}

#banner {
    margin: 0;
    padding: 0;
}

.banner_wrap {
    margin: 0;
    padding: 0;
}

.banner_wrap img {
    margin: 0;
    padding: 0;
    display: block; /* Prevents extra space below the image */
}
.banner_wrap {
    width: 100%;
    height: 80vh; /* Adjust height as needed */
}

.banner_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    display: block; /* Prevents extra space below the image */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');