body {
    font-family: 'Titillium Web', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #000 !important;
    background-color: #ffffff; /* Light background for the body */
}

.hero {
    padding: 50px 0;
    background-color: #ff9900; /* Slightly darker blue for contrast */
    color: #333;
}

.hero h1 {
    margin-bottom: 20px;
}

.hero p {
    margin-bottom: 30px;
}


.services {
    background-color: #ffffff; /* Light gray background to match body */
}

.service-card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

.service-card:hover {
    transform: scale(1.05); /* Slight scale effect on hover */
}


footer .btn-primary {
    background-color: #ff9900; /* Match the button to the theme blue */
    color: #fff;
    border: none; /* Optional: remove the border for a cleaner look */
    padding: 0.75em 1.5em; /* Larger padding for a bigger button */
}

/* Show the dropdown on hover */
@media (min-width: 992px) { /* Adjust this breakpoint to suit your needs */
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Optional: Change the dropdown link color on hover */
.navbar .nav-item.dropdown:hover > .nav-link {
    color: #fff;
}

.title-icon-wrapper {
    display: flex;
    align-items: center; /* Vertically centers the icon and text */
    gap: 10px; /* Optional: adds space between the icon and the text */
}

.card-title {
    margin-bottom: 0; /* Optionally remove margin for better alignment */
    margin-top:8px;
    padding-left:8px
}

.title-icon-wrapper i{
        color: #ff9900;
}

.img-fluid{
    margin-top:12px;
}

.nav-overview-title {
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #242424, 2px 2px 0 #242424, 1px 1px 0 #242424;
}

.centered-title {
    display: flex;        /* Enables flexbox */
    align-items: center;  /* Vertically center the items in the container */
    justify-content: center; /* Horizontally center the items in the container */
    text-align: center;   /* Ensures text within children (like <h2>) is centered */
}

.centered-title h1 {
    margin-left: 10px;    /* Adds spacing between the icon and the text */
    padding-top:24px;
}

.centered-title i {
    /* Optionally, adjust styling for the icon here */
    color:#ff9900;
}