.elementor-422 .elementor-element.elementor-element-3a66277{--display:flex;}.elementor-422 .elementor-element.elementor-element-d01e6cb{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-422 .elementor-element.elementor-element-038b5dc .elementor-heading-title{font-family:"Rozha One", Sans-serif;font-size:41px;font-weight:600;color:#FFFFFF;}.elementor-422 .elementor-element.elementor-element-360877e{--display:flex;--min-height:401px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-422 .elementor-element.elementor-element-1203a5b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-422 .elementor-element.elementor-element-52420ca img{height:271px;}.elementor-422 .elementor-element.elementor-element-77b9bea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-422 .elementor-element.elementor-element-795d1a0{text-align:start;}.elementor-422 .elementor-element.elementor-element-795d1a0 .elementor-heading-title{font-family:"Rubik Dirt", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-422 .elementor-element.elementor-element-e5b3cfd .elementor-heading-title{color:#FFFFFF;}.elementor-422 .elementor-element.elementor-element-93a3285{--display:flex;}@media(min-width:768px){.elementor-422 .elementor-element.elementor-element-360877e{--content-width:1600px;}.elementor-422 .elementor-element.elementor-element-1203a5b{--width:33.3333%;}.elementor-422 .elementor-element.elementor-element-77b9bea{--width:66.6666%;}}/* Start custom CSS for html, class: .elementor-element-ec7b11b *//* ---------------------------------------------------- */
/* --- GLOBAL LAYOUT & CAPSULE STYLES --- */
/* ---------------------------------------------------- */
.service-section {
    display: flex; /* Forces horizontal arrangement */
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 15px;
}

.service-box {
    flex: 1; /* Makes all boxes equal width */
    margin: 0 15px;
    position: relative;
    overflow: hidden;
    
    /* Capsule Effect */
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    /* Default State */
    background-color: white;
    color: black;
    
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.box-content {
    padding: 30px;
    min-height: 400px; 
    position: relative;
}

/* Base Title Styling */
.service-box h2 {
    font-size: 24px;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

/* ---------------------------------------------------- */
/* --- LOGO IMAGE STYLING (ALWAYS VISIBLE) --- */
/* ---------------------------------------------------- */
.icon-wrapper {
    margin-bottom: 20px;
}

.icon-wrapper .icon-image {
    /* Set the size of your logo image */
    width: 60px; 
    height: auto;
    display: block;
}

/* ---------------------------------------------------- */
/* --- HOVER EFFECT: ORANGE BACKGROUND & WHITE TEXT --- */
/* ---------------------------------------------------- */
.service-box:hover {
    /* The main orange color */
    background-color: #EF6F33; 
    color: white; 
    box-shadow: 0 10px 30px rgba(239, 111, 51, 0.5); 
}

/* Ensure all text (titles and body text) changes color on hover */
.service-box:hover h2,
.service-box:hover p {
    color: white;
}

/* ---------------------------------------------------- */
/* --- RESPONSIVENESS (Mobile/Tablet) --- */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    .service-section {
        flex-direction: column; /* Stack boxes vertically on small screens */
    }
    .service-box {
        margin: 15px 0; 
    }
    
    /* Ensure the color changes when a user taps a box on mobile */
    .service-box:active {
        background-color: #EF6F33;
        color: white;
    }
    .service-box:active h2,
    .service-box:active p {
        color: white;
    }
}/* End custom CSS */