.elementor-6287 .elementor-element.elementor-element-5ca983c0{--display:flex;--min-height:510px;--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;--background-transition:0.3s;--padding-top:80px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-6287 .elementor-element.elementor-element-5ca983c0:not(.elementor-motion-effects-element-type-background), .elementor-6287 .elementor-element.elementor-element-5ca983c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F1F1;}.elementor-6287 .elementor-element.elementor-element-5ca983c0.e-con:hover{--e-con-transform-translateY:-20px;}.elementor-6287 .elementor-element.elementor-element-4fd781be .elementor-icon-wrapper{text-align:left;}.elementor-6287 .elementor-element.elementor-element-4fd781be.elementor-view-stacked .elementor-icon{background-color:#F1F1F1;}.elementor-6287 .elementor-element.elementor-element-4fd781be.elementor-view-framed .elementor-icon, .elementor-6287 .elementor-element.elementor-element-4fd781be.elementor-view-default .elementor-icon{color:#F1F1F1;border-color:#F1F1F1;}.elementor-6287 .elementor-element.elementor-element-4fd781be.elementor-view-framed .elementor-icon, .elementor-6287 .elementor-element.elementor-element-4fd781be.elementor-view-default .elementor-icon svg{fill:#F1F1F1;}.elementor-6287 .elementor-element.elementor-element-4fd781be .elementor-icon{font-size:70px;padding:30px;}.elementor-6287 .elementor-element.elementor-element-4fd781be .elementor-icon svg{height:70px;}.elementor-6287 .elementor-element.elementor-element-725f220f .elementor-heading-title{font-size:26px;color:#002480;}@media(max-width:1200px){.elementor-6287 .elementor-element.elementor-element-5ca983c0{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6287 .elementor-element.elementor-element-725f220f .elementor-heading-title{font-size:20px;}.elementor-6287 .elementor-element.elementor-element-4c873c08{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-5ca983c0 */.containercivil {
    background-color: #FFFFFF;
    transition: all 0.6s ease-in-out;
}


.containercivil:hover {
    background-color: #3d251e !important;
}


.heading h2 {
    color: #164C83 !important;
    transition: all 0.3s ease-in-out;
}


.containercivil:hover .heading h2 {
    color: #FFFFFF !important;
}


.icon svg {
    fill: #b42025 !important;
    transition: all 0.3s ease-in-out;
}


.containercivil:hover .icon svg {
    fill: #FFFFFF !important;
}


.text {
    color: #111111 !important;
    transition: all 0.3s ease-in-out;
}


.containercivil:hover .text {
    color: #FFFFFF !important;
}


/* Here's an example of how to use the transform properties for the heading - make sure you delete this if you won't be using it */

/*.container:hover .heading h2 {
    color: #FFFFFF !important;
    transform: scale(1.5) rotate(-30deg) translate(0, -30px);
} */


/* This part disables the transform effects on hover for mobile devices - devices under 767px. Delete this if you want the transform to happen on mobile or if you have no transform properties. */

@media only screen and (max-width: 767px) {

    .containercivil:hover .heading h2 {
        transform: none !important;
    }
    
     .containercivil:hover .icon svg {
        transform: none !important;
    }
    
     .containercivil:hover .text {
        transform: none !important;
    }
}


/* This part neutralizes the color change on hover for mobile devices - devices under 767px. Make sure the colors match your normal state, pre-hover colors. Delete this if you want the color changes to happen on mobile as well. */

@media only screen and (max-width: 767px) {
    
    .containercivil:hover {
    background-color: #3d251e !important;
    }
    
    .containercivil:hover .heading h2 {
        color: #FFFFFF !important;
        
    }
    
    .containercivil:hover .icon svg {
        fill: #635BFF !important;
    }
    
    .containercivil:hover .text {
        color: #FFFFFF !important;
    }
}/* End custom CSS */