/* Global website font */
body {
    font-family: 'Roboto', sans-serif !important;
}




/* Navbar Link Colors */
.navbar .nav-link {
    color: #7a7a7a !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #90a076 !important;
}

/* Active Menu */
.navbar .nav-link.active {
    color: #90a076 !important;
}

/* Dropdown Items */
.dropdown-menu .dropdown-item:hover {
    background-color: #333333 !important;
    color: #fff !important;
}

.dropdown-menu .dropdown-item:active {
    background-color: #333333 !important;
    color: #fff !important;
}




:root {
        --bs-btn-service-bg: #90a076; 
    }

    /* 2. Custom Class for Button Styling */
    .btn-service-custom {
        /* Apply initial color and white text (using !important ensures it overrides Bootstrap's default btn styles) */
        background-color: var(--bs-btn-service-bg) !important;
        color: white !important;
        transition: background-color 0.2s, box-shadow 0.2s; /* Smooth transition */
        border: none;
    }

    /* 3. Custom Class for BLACK Hover Effect */
    .btn-service-custom:hover {
        /* Apply the black background color */
        background-color: black !important;
        color: white !important;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Optional: Remove shadow on hover for a "pressed" look */
    }

    /* 4. Custom Class for Header Styling */
    .service-area-header {
        /* Set font size (32px) and attempt to match Courgette/sans-serif combination */
        font-size: 32px;
        /* Courgette is a custom font, so we list it first, followed by a generic sans-serif fallback */
        font-family: 'Courgette', cursive, sans-serif; 
        color: #3e4433; /* Dark color similar to the image's heading */
    }




.btn-custom-dark {
    /* Normal State (Background and Border Color) */
    --bs-btn-bg: #333333;
    --bs-btn-border-color: #333333;

    /* Normal State (Text and Icon Color) */
    --bs-btn-color: #fff;
}



/* owl Carousel */

.client-slider .item img {
    width: 120px;
    height: auto;
    margin: auto;
    filter: grayscale(20%);
    transition: 0.3s;
}

.client-slider .item img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.owl-nav button {
    font-size: 30px !important;
    color: #555 !important;
    border: none !important;
    background: none !important;
}

.owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #aaa !important;
    border-radius: 50%;
    display: block;
}

.owl-dots .owl-dot.active span {
    background: #333 !important;
}
.owl-nav {
    position: absolute;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.owl-nav button {
    pointer-events: auto;
    font-size: 30px !important;
    color: #555 !important;
    background: none !important;
    border: none !important;
}
.owl-dots {
    margin-top: 20px; 
    text-align: center;
}