/* OpenSans Font Definition */
@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables for Template Colors */
:root {
    --primary-color: #001b4d;
    --secondary-color: #ffde59;
}

/* Default font settings */
body {
    font-family: 'OpenSans', sans-serif !important;
}

/* Apply to common text elements */
p, span, div, input, textarea, select, button, .btn {
    font-family: 'OpenSans', sans-serif !important;
}

/* Headings can use different weights if needed */
h1, h2, h3, h4, h5, h6 {
    font-family: 'OpenSans', sans-serif !important;
}

/* Service Single Item Style Two Style Three - Customizations */
.service_single_item.style_two.style_three:hover .service_thumb:before {
    opacity: 0 !important;
}

.service_single_item.style_two.style_three:hover .service_thumb img {
    transform: none !important;
}

.service_single_item.style_two.style_three .service_content h4 {
    color: var(--secondary-color) !important;
}

.service_single_item.style_two.style_three:hover .service_content h4 {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
    background: var(--secondary-color) !important;
}

/* Override any existing orange background */
.service_area.style_two.style_three.inner_page .service_single_item.style_two.style_three:hover .service_content h4 {
    background-color: #ffde59 !important;
    background: #ffde59 !important;
    color: #001b4d !important;
}

/* Override h4:before pseudo-element that might be causing orange */
.service_single_item.style_two.style_three:hover .service_content h4:before {
    display: none !important;
    background: none !important;
}

.service_area.style_two.style_three.inner_page .service_single_item.style_two.style_three:hover .service_content h4:before {
    display: none !important;
    background: none !important;
}

/* Service Details Image - Responsive */
.service_details_img {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

.service_details_img img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}