@charset "UTF-8";
:root {
    --title-color: #010916;

    --black-color: #000000;
    --black-color3: #4E4E4E;

    --gray-color: #F2F7FF;


    --white-color: #ffffff;
    --title-font: "Satoshi";
    --body-font: "Inter", sans-serif;
    --icon-font: "Font Awesome 6 Pro";
    --section-space: 120px;
    --section-space-mobile: 80px;
    --ripple-ani-duration: 5s;
}

/*------------------- 2.4. Slick Slider -------------------*/

.th-slider.has-shadow {
    padding-left: 12px;
    padding-right: 12px;
    margin: -25px -12px;
}
.th-slider.has-shadow .swiper-wrapper {
    padding: 25px 0;

}

.swiper-fade .swiper-slide {
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
    opacity: 0 !important;
}
.swiper-fade .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

.swiper-pagination-bullets {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: 50px 0 0 0;
    --swiper-pagination-bottom: 0;
}
.swiper-pagination-bullets .swiper-pagination-bullet {
    --swiper-pagination-bullet-horizontal-gap: 10px;
    display: inline-block;
    width: 40px;
    height: 6px;
    border-radius: 10px;
    margin: 5px 7px;
    opacity: 1;
    background-color: #ffffff;
    position: relative;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    cursor: pointer;
}
.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #1f7671; /*no se donde sea*/
    width: 60px;
}

.slider-pagination.swiper-pagination-progressbar {
    width: -webkit-fill-available;
    position: relative;
    height: 1px;
    background: #ffffff;
    top: auto;
    bottom: 0;
    margin: 70px 0 0;
}
.slider-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    height: 1px;
    top: auto;
    bottom: 0;
    background: #1f736f; /*linea scrollbar de las cards*/
}

.slider-pagination {
    --swiper-pagination-bottom: 0;
    bottom: var(--swiper-pagination-bottom, 0px);
}
.slider-pagination.style2 .swiper-pagination-bullet {
    background: transparent;
    border: 1px solid #ffffff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.slider-pagination.style2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #1f7671;
    border-color: #eb9e06;
}
.slider-pagination.style3 .swiper-pagination-bullet {
    background: #1f6e29;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    --swiper-pagination-bullet-size: 8px;
}
.slider-pagination.style3 .swiper-pagination-bullet:before {
    border: 0;
}
.slider-pagination.style3 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: transparent;
}
.slider-pagination.style3 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    border: 1px solid #eb9e06;
}
.slider-pagination.style4 .swiper-pagination-bullet {
    background: transparent;
    border: 1px solid #000000;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.slider-pagination.style4 .swiper-pagination-bullet:before {
    opacity: 0;
    inset: -14px;
}
.slider-pagination.style4 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #1f7671;
    border-color: #e82323;
}
.slider-pagination.style4 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    opacity: 1;
}

.slider-area {
    position: relative;
}

.slider-arrow {
    display: inline-block;
    padding: 0;
    background-color: rgb(232, 35, 35);
    color: #ffffff;
    position: absolute;
    top: 50%;
    border: none;
    left: var(--pos-x, -90px);
    width: var(--icon-size, 56px);
    height: var(--icon-size, 56px);
    line-height: var(--icon-size, 56px);
    font-size: 18px;
    margin-top: calc(var(--icon-size, 56px) / -2);
    z-index: 3;
    border-radius: 99px;
}
.slider-arrow.default {
    position: relative;
    --pos-x: 0;
    margin-top: 0;
}
.slider-arrow.slider-next {
    right: var(--pos-x, -90px);
    left: auto;
}
.slider-arrow:hover {
    background-color: #eb9e06;
    color: #ffffff;
}

.slider-arrow.style3 {
    background: #1f6e29; /* sfondo slider bullet*/
    color: #ffffff;
    --icon-size: 40px;
    width: 64px;
    height: 64px;
    line-height: 60px;
    border-radius: 40px;
}
.slider-arrow.style3 img {
    -webkit-filter: brightness(0) invert(0);
    filter: brightness(0) invert(0);
    -webkit-transition: -webkit-filter 0.3s ease;
    transition: -webkit-filter 0.3s ease;
    transition: filter 0.3s ease;
    transition: filter 0.3s ease, -webkit-filter 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.slider-arrow.style3:hover {
    background: #eb9e06; /* sfondo slider bullet*/
    color: #ffffff;
}
.slider-arrow.style3:hover img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.slider-arrow.style-border {
    background: transparent;
    border: 1px solid #000000;
    color: #000000;
}
.slider-arrow.style-border:hover {
    background: #eb9e06;
    border-color: #eb9e06 !important;
    color: #ffffff;
}

.arrow-margin .slider-arrow {
    top: calc(50% - 30px);
}

.arrow-wrap {
    position: relative;
}
.arrow-wrap .slider-arrow {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
}
.arrow-wrap:hover .slider-arrow {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Extra large devices */
@media (max-width: 1500px) {
    .slider-arrow {
        --arrow-horizontal: -20px;
        --pos-x: 0px;
    }
}
/* Medium Large devices */
@media (max-width: 1399px) {
    .slider-arrow {
        --arrow-horizontal: 40px;
        --pos-x: -30px;
    }
}
/* Medium devices */
@media (max-width: 991px) {
    .slider-arrow {
        display: none;
    }
}
.icon-box {
    /* Medium devices */
}
.icon-box .slider-arrow {
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
    transform: none;
}
.icon-box .slider-arrow:not(:last-child) {
    margin-right: 8px;
}
@media (max-width: 991px) {
    .icon-box .slider-arrow {
        display: inline-block !important;
    }
}

/* Medium devices */
@media (max-width: 991px) {
    .slider-arrow {
        --icon-size: 40px;
        line-height: 38px;
        margin-right: 40px;
        font-size: 14px;
    }
    .slider-arrow.slider-next {
        margin-right: 0;
    }
    .slick-dots {
        margin: 40px 0 0 0;
    }
    .icon-box .slider-arrow {
        margin-right: 0;
    }
}
.slider-scrollbar {
    border-radius: 0;
    background: rgba(215, 215, 215, 0.2);
    height: 3px;
    width: 100%;
    bottom: 0;
    cursor: -webkit-grab;
    cursor: grab;
    z-index: 1;
    margin-top: 32px;
}
.slider-scrollbar .swiper-scrollbar-drag {
    border-radius: 0;
    height: 3px;
    top: 0;
    left: 0;
    background: #1f736f;
}

/*slider-drag-cursor**************/
.slider-drag-cursor {
    pointer-events: none;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: -2px;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    background: #ffffff;
    border: 5px solid rgba(19, 24, 43, 0.3);
    width: 120px;
    height: 120px;
    line-height: 110px;
    text-align: center;
    border-radius: 100%;
    color: #06263e;
    opacity: 0;
    cursor: none;
}
.slider-drag-cursor.active {
    opacity: 1;
}

/*------------------- 3.4. Common -------------------*/


.shape-mockup {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.shape-mockup.z-index-3 {
    z-index: 3;
    pointer-events: none;
}
.shape-mockup.z-index-1 {
    z-index: 1;
    pointer-events: none;
}
.shape-mockup .svg-img {
    height: 110px;
    width: 110px;
}


.box-icon img {
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.box-text {
    margin-bottom: -0.5em;
}


.color-masking {
    position: relative;
    display: inline-block;
}
.color-masking .masking-src {
    position: absolute;
    inset: 0;
    mix-blend-mode: color;
    background: #930d0d;
}

/*------------------- 3.10. Animation -------------------*/
.ripple-animation, .play-btn:after, .play-btn:before {
    -webkit-animation-duration: var(--ripple-ani-duration);
    animation-duration: var(--ripple-ani-duration);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: ripple;
    animation-name: ripple;
}

@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
    30% {
        opacity: 0.4;
    }
    100% {
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
    30% {
        opacity: 0.4;
    }
    100% {
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }
}
@-webkit-keyframes ripple2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
    30% {
        opacity: 0.4;
    }
    100% {
        -webkit-transform: scale(2.8);
        transform: scale(2.8);
        opacity: 0;
    }
}
@keyframes ripple2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
    30% {
        opacity: 0.4;
    }
    100% {
        -webkit-transform: scale(2.8);
        transform: scale(2.8);
        opacity: 0;
    }
}
.fancy-animation {
    -webkit-animation: morph 8s ease-in-out infinite;
    animation: morph 8s ease-in-out infinite;
}

@-webkit-keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
    }
}
.movingX {
    -webkit-animation: movingX 8s linear infinite;
    animation: movingX 8s linear infinite;
}

@-webkit-keyframes movingX {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes movingX {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.shake {
    -webkit-animation: shake 2s linear infinite;
    animation: shake 2s linear infinite;
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes shake {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
.movingCar {
    -webkit-animation: movingCar 25s linear infinite;
    animation: movingCar 25s linear infinite;
}

@-webkit-keyframes movingCar {
    0% {
        -webkit-transform: translateX(0) rotateY(0deg);
        transform: translateX(0) rotateY(0deg);
    }
    50% {
        -webkit-transform: translateX(calc(-100vw + 108%));
        transform: translateX(calc(-100vw + 108%));
    }
    51% {
        -webkit-transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
        transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
    }
    100% {
        -webkit-transform: translateX(0) rotateY(180deg);
        transform: translateX(0) rotateY(180deg);
    }
}

@keyframes movingCar {
    0% {
        -webkit-transform: translateX(0) rotateY(0deg);
        transform: translateX(0) rotateY(0deg);
    }
    50% {
        -webkit-transform: translateX(calc(-100vw + 108%));
        transform: translateX(calc(-100vw + 108%));
    }
    51% {
        -webkit-transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
        transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
    }
    100% {
        -webkit-transform: translateX(0) rotateY(180deg);
        transform: translateX(0) rotateY(180deg);
    }
}
.moving {
    -webkit-animation: moving 8s linear infinite;
    animation: moving 8s linear infinite;
}

@-webkit-keyframes moving {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes moving {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.movingY {
    -webkit-animation: movingY 8s linear infinite;
    animation: movingY 8s linear infinite;
}

@-webkit-keyframes movingY {
    0% {
        left: 0;
    }
    50% {
        left: calc(100% - 20px);
    }
    100% {
        left: 0;
    }
}

@keyframes movingY {
    0% {
        left: 0;
    }
    50% {
        left: calc(100% - 20px);
    }
    100% {
        left: 0;
    }
}
.jump {
    -webkit-animation: jumpAni 7s linear infinite;
    animation: jumpAni 7s linear infinite;
}

@-webkit-keyframes jumpAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes jumpAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.jump-reverse {
    -webkit-animation: jumpReverseAni 7s linear infinite;
    animation: jumpReverseAni 7s linear infinite;
}

@-webkit-keyframes jumpReverseAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes jumpReverseAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.spin {
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.spin-reverse {
    -webkit-animation: spin2 10s linear infinite;
    animation: spin2 10s linear infinite;
}

@-webkit-keyframes spin2 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes spin2 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
.bounce {
    -webkit-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@-webkit-keyframes animate-positive {
    0% {
        width: 0;
    }
}
@keyframes animate-positive {
    0% {
        width: 0;
    }
}
.fadein,
.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-name: var(--animation-name);
    animation-name: var(--animation-name);
}

.swiper-slide-active .fadein {
    --animation-name: fadein;
}
.swiper-slide-active .scalein {
    --animation-name: scalein;
}
.swiper-slide-active .slidetopleft {
    --animation-name: slidetopleft;
}
.swiper-slide-active .slidebottomright {
    --animation-name: slidebottomright;
}
.swiper-slide-active .slideinleft {
    --animation-name: slideinleft;
}
.swiper-slide-active .slideinright {
    --animation-name: slideinright;
}
.swiper-slide-active .slideinup {
    --animation-name: slideinup;
}
.swiper-slide-active .slideindown {
    --animation-name: slideindown;
}
.swiper-slide-active .rollinleft {
    --animation-name: rollinleft;
}
.swiper-slide-active .rollinright {
    --animation-name: rollinright;
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes slideinup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slideinup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes slideinright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(180px);
        transform: translateX(180px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideinright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(180px);
        transform: translateX(180px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes slideindown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slideindown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes slideinleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideinleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes slidebottomright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(120px) translateY(120px);
        transform: translateX(120px) translateY(120px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
    }
}
@keyframes slidebottomright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(120px) translateY(120px);
        transform: translateX(120px) translateY(120px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
    }
}
@-webkit-keyframes slidetopleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px) translateY(-100px);
        transform: translateX(-100px) translateY(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
    }
}
@keyframes slidetopleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px) translateY(-100px);
        transform: translateX(-100px) translateY(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
    }
}
/*animation bubble****************/
.animation-bubble {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.animation-bubble div[class^=bubble-] {
    height: 1px;
    width: 1px;
    position: absolute;
    background: url(../img/shape/star.svg) no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}

@media (max-width: 1024px) {
    .animation-bubble > :nth-child(even) {
        display: none;
    }
}
.bubble-1 {
    bottom: -5px;
    left: 68%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -6.57s;
    animation: bubble-animation 4.5s infinite ease-in -6.57s;
}

.bubble-2 {
    bottom: -71px;
    left: 97%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -5.07s;
    animation: bubble-animation 4.5s infinite ease-in -5.07s;
}

.bubble-3 {
    bottom: -71px;
    left: 43%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -6.73s;
    animation: bubble-animation 4.5s infinite ease-in -6.73s;
}

.bubble-4 {
    bottom: -3.8px;
    left: 82%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -4.04s;
    animation: bubble-animation 4.5s infinite ease-in -4.04s;
}

.bubble-5 {
    bottom: -73.4px;
    left: 29%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -3.11s;
    animation: bubble-animation 4.5s infinite ease-in -3.11s;
}

.bubble-6 {
    bottom: -71px;
    left: 41%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -5.95s;
    animation: bubble-animation 4.5s infinite ease-in -5.95s;
}

.bubble-7 {
    bottom: -79.4px;
    left: 14%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -3.68s;
    animation: bubble-animation 4.5s infinite ease-in -3.68s;
}

.bubble-8 {
    bottom: -115.4px;
    left: 90%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -3.89s;
    animation: bubble-animation 4.5s infinite ease-in -3.89s;
}

.bubble-9 {
    bottom: -44.6px;
    left: 33%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -1.09s;
    animation: bubble-animation 4.5s infinite ease-in -1.09s;
}

.bubble-10 {
    bottom: -6.2px;
    left: 59%;
    -webkit-animation: bubble-animation 4.5s infinite ease-in -0.96s;
    animation: bubble-animation 4.5s infinite ease-in -0.96s;
}

@-webkit-keyframes bubble-animation {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        height: 1px;
        width: 1px;
    }
    100% {
        -webkit-transform: translate3d(-50%, -280px, 0);
        transform: translate3d(-50%, -280px, 0);
        height: 30px;
        width: 30px;
    }
}

@keyframes bubble-animation {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        height: 1px;
        width: 1px;
    }
    100% {
        -webkit-transform: translate3d(-50%, -280px, 0);
        transform: translate3d(-50%, -280px, 0);
        height: 30px;
        width: 30px;
    }
}
@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
/*custom-animation**********************/
.custom-anim-right {
    -webkit-animation: custom-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    animation: custom-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

@-webkit-keyframes custom-anim-right {
    0% {
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes custom-anim-right {
    0% {
        -webkit-transform: translateX(5%);
        transform: translateX(5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
.custom-anim-left {
    -webkit-animation: custom-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    animation: custom-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
    opacity: 0;
}

@-webkit-keyframes custom-anim-left {
    0% {
        -webkit-transform: translateX(-5%);
        transform: translateX(-5%);
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes custom-anim-left {
    0% {
        -webkit-transform: translateX(-5%);
        transform: translateX(-5%);
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
.custom-anim-top {
    -webkit-animation: custom-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    animation: custom-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

@-webkit-keyframes custom-anim-top {
    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes custom-anim-top {
    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
.custom-anim-bottom {
    -webkit-animation: custom-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    animation: custom-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

@-webkit-keyframes custom-anim-bottom {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        clip-path: inset(100% 0 0 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes custom-anim-bottom {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        clip-path: inset(100% 0 0 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
.fadeinup {
    opacity: 0;
    -webkit-animation: fadeinup 1.3s forwards 1;
    animation: fadeinup 1.3s forwards 1;
}

@-webkit-keyframes fadeinup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeinup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeinright {
    opacity: 0;
    -webkit-animation: fadeinright 1.3s forwards 1;
    animation: fadeinright 1.3s forwards 1;
}

@-webkit-keyframes fadeinright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeinright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.fadeinleft {
    opacity: 0;
    -webkit-animation: fadeinleft 1.3s forwards 1;
    animation: fadeinleft 1.3s forwards 1;
}

@-webkit-keyframes fadeinleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeinleft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


.circle-tag {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    border: 38px solid rgba(255, 255, 255, 0.3);
    width: 244px;
    height: 244px;
    border-radius: 50%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.circle-tag .icon-btn {
    position: relative;
    z-index: 6;
    background: transparent;
    width: auto;
    height: auto;
    font-size: 47px;
}

.circle-title-anime {
    display: inline-block;
    height: 223px;
    width: 223px;
    border-radius: 50%;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--title-font);
    color: #ffffff;
    line-height: normal;
    text-align: center;
    -webkit-animation: spin 20s linear infinite;
    animation: spin 20s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -111.5px;
    margin-top: -111.5px;
}
.circle-title-anime span {
    --rotate-letter: 9.4deg;
    height: 116px;
    position: absolute;
    width: 20px;
    left: 45.5%;
    top: -5px;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotate(var(--rotate-letter));
    transform: rotate(var(--rotate-letter));
}
.circle-title-anime span.char2 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 2));
    transform: rotate(calc(var(--rotate-letter) * 2));
}
.circle-title-anime span.char3 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 3));
    transform: rotate(calc(var(--rotate-letter) * 3));
}
.circle-title-anime span.char4 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 4));
    transform: rotate(calc(var(--rotate-letter) * 4));
}
.circle-title-anime span.char5 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 5));
    transform: rotate(calc(var(--rotate-letter) * 5));
}
.circle-title-anime span.char6 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 6));
    transform: rotate(calc(var(--rotate-letter) * 6));
}
.circle-title-anime span.char7 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 7));
    transform: rotate(calc(var(--rotate-letter) * 7));
}
.circle-title-anime span.char8 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 8));
    transform: rotate(calc(var(--rotate-letter) * 8));
}
.circle-title-anime span.char9 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 9));
    transform: rotate(calc(var(--rotate-letter) * 9));
}
.circle-title-anime span.char10 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 10));
    transform: rotate(calc(var(--rotate-letter) * 10));
}
.circle-title-anime span.char11 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 11));
    transform: rotate(calc(var(--rotate-letter) * 11));
}
.circle-title-anime span.char12 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 12));
    transform: rotate(calc(var(--rotate-letter) * 12));
}
.circle-title-anime span.char13 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 13));
    transform: rotate(calc(var(--rotate-letter) * 13));
}
.circle-title-anime span.char14 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 14));
    transform: rotate(calc(var(--rotate-letter) * 14));
}
.circle-title-anime span.char15 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 15));
    transform: rotate(calc(var(--rotate-letter) * 15));
}
.circle-title-anime span.char16 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 16));
    transform: rotate(calc(var(--rotate-letter) * 16));
}
.circle-title-anime span.char17 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 17));
    transform: rotate(calc(var(--rotate-letter) * 17));
}
.circle-title-anime span.char18 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 18));
    transform: rotate(calc(var(--rotate-letter) * 18));
}
.circle-title-anime span.char19 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 19));
    transform: rotate(calc(var(--rotate-letter) * 19));
}
.circle-title-anime span.char20 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 20));
    transform: rotate(calc(var(--rotate-letter) * 20));
}
.circle-title-anime span.char21 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 21));
    transform: rotate(calc(var(--rotate-letter) * 21));
}
.circle-title-anime span.char22 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 22));
    transform: rotate(calc(var(--rotate-letter) * 22));
}
.circle-title-anime span.char23 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 23));
    transform: rotate(calc(var(--rotate-letter) * 23));
}
.circle-title-anime span.char24 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 24));
    transform: rotate(calc(var(--rotate-letter) * 24));
}
.circle-title-anime span.char25 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 25));
    transform: rotate(calc(var(--rotate-letter) * 25));
}
.circle-title-anime span.char26 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 26));
    transform: rotate(calc(var(--rotate-letter) * 26));
}
.circle-title-anime span.char27 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 27));
    transform: rotate(calc(var(--rotate-letter) * 27));
}
.circle-title-anime span.char28 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 28));
    transform: rotate(calc(var(--rotate-letter) * 28));
}
.circle-title-anime span.char29 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 29));
    transform: rotate(calc(var(--rotate-letter) * 29));
}
.circle-title-anime span.char30 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 30));
    transform: rotate(calc(var(--rotate-letter) * 30));
}
.circle-title-anime span.char31 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 31));
    transform: rotate(calc(var(--rotate-letter) * 31));
}
.circle-title-anime span.char32 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 32));
    transform: rotate(calc(var(--rotate-letter) * 32));
}
.circle-title-anime span.char33 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 33));
    transform: rotate(calc(var(--rotate-letter) * 33));
}
.circle-title-anime span.char34 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 34));
    transform: rotate(calc(var(--rotate-letter) * 34));
}
.circle-title-anime span.char35 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 35));
    transform: rotate(calc(var(--rotate-letter) * 35));
}
.circle-title-anime span.char36 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 36));
    transform: rotate(calc(var(--rotate-letter) * 36));
}
.circle-title-anime span.char37 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 37));
    transform: rotate(calc(var(--rotate-letter) * 37));
}
.circle-title-anime span.char38 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 38));
    transform: rotate(calc(var(--rotate-letter) * 38));
}
.circle-title-anime span.char39 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 39));
    transform: rotate(calc(var(--rotate-letter) * 39));
}
.circle-title-anime span.char40 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 40));
    transform: rotate(calc(var(--rotate-letter) * 40));
}
.circle-title-anime span.char41 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 41));
    transform: rotate(calc(var(--rotate-letter) * 41));
}
.circle-title-anime span.char42 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 42));
    transform: rotate(calc(var(--rotate-letter) * 42));
}
.circle-title-anime span.char43 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 43));
    transform: rotate(calc(var(--rotate-letter) * 43));
}
.circle-title-anime span.char44 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 44));
    transform: rotate(calc(var(--rotate-letter) * 44));
}
.circle-title-anime span.char45 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 45));
    transform: rotate(calc(var(--rotate-letter) * 45));
}
.circle-title-anime span.char46 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 46));
    transform: rotate(calc(var(--rotate-letter) * 46));
}
.circle-title-anime span.char47 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 47));
    transform: rotate(calc(var(--rotate-letter) * 47));
}
.circle-title-anime span.char48 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 48));
    transform: rotate(calc(var(--rotate-letter) * 48));
}
.circle-title-anime span.char49 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 49));
    transform: rotate(calc(var(--rotate-letter) * 49));
}
.circle-title-anime span.char50 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 50));
    transform: rotate(calc(var(--rotate-letter) * 50));
}
.circle-title-anime span.char51 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 51));
    transform: rotate(calc(var(--rotate-letter) * 51));
}
.circle-title-anime span.char52 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 52));
    transform: rotate(calc(var(--rotate-letter) * 52));
}
.circle-title-anime span.char53 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 53));
    transform: rotate(calc(var(--rotate-letter) * 53));
}
.circle-title-anime span.char54 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 54));
    transform: rotate(calc(var(--rotate-letter) * 54));
}
.circle-title-anime span.char55 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 55));
    transform: rotate(calc(var(--rotate-letter) * 55));
}
.circle-title-anime span.char56 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 56));
    transform: rotate(calc(var(--rotate-letter) * 56));
}
.circle-title-anime span.char57 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 57));
    transform: rotate(calc(var(--rotate-letter) * 57));
}
.circle-title-anime span.char58 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 58));
    transform: rotate(calc(var(--rotate-letter) * 58));
}
.circle-title-anime span.char59 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 59));
    transform: rotate(calc(var(--rotate-letter) * 59));
}
.circle-title-anime span.cha60 {
    -webkit-transform: rotate(calc(var(--rotate-letter) * 60));
    transform: rotate(calc(var(--rotate-letter) * 60));
}


/*------------------- 4.00. Service -------------------*/
/* Service Card ---------------------------------- */
.service-bg-shape1-1 {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.service-card {
    position: relative;
    padding: 20px;
    background: #ffffff;
    border-radius: 24px;
    -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.06);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    margin-bottom: 215px;
    /* Medium devices */
    /* Small devices */
    /* Medium Large devices */
    /* Medium devices */
    /* Small devices */
    /* Extra small devices */
}
@media (max-width: 991px) {
    .service-card {
        padding: 20px;
    }
}
.service-card .box-icon {
    margin-bottom: 24px;
}
.service-card .box-icon .color-masking {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.service-card .box-icon .masking-src {
    background: transparent;
}
@media (max-width: 767px) {
    .service-card {
        padding: 20px;
    }
}
.service-card .box-title {
    margin-bottom: -0.3em;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: #06263e;
    text-align: center;
    text-transform: uppercase;
}
.service-card .box-title a {

}
.service-card .box-title a:hover {
    color: #e02454;
    text-decoration: underline dotted 2px #1f736f;
    text-underline-offset: 3px
}
.service-card .box-text {
    margin: 15px 5px;
    color: #06263e;
    width: 100%;
    height: 100px;
}
.service-card .circle-tag {
    width: 130px;
    height: 130px;
    border: 0;
    background: #ffffff;
}
.service-card .circle-tag .circle-title-anime {
    color: #06263e; /* color texto rotante */
    font-size: 14px;
    font-weight: 500;
    width: 125px;
    height: 125px;
    top: 88%;
    left: 88%;
}
.service-card .circle-tag .circle-title-anime span {
    --rotate-letter: 15.4deg;
    height: 63px;
    left: 41.5%;
    top: 0;
}
.service-card .box-img {
    margin-top: 0;
    margin-bottom:15px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    width: 100%;
}
.service-card .box-img .img_realta_provinciale {
    object-fit: cover;
    width: 100%;
    height: 200px;
}
@media (max-width: 1299px) {
    .service-card .box-thumb img {
        width: 100%;
    }
    .service-card .box-content {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        width: -webkit-fill-available;
        margin: 32px;
        opacity: 0;
    }
}
@media (max-width: 991px) {
    .service-card .box-content {
        padding: 50px;
    }
}
@media (max-width: 767px) {
    .service-card .box-thumb img {
        height: 400px;
    }
    .service-card .box-content {
        padding: 40px;
    }
    .service-card .box-number {
        font-size: 30px;
    }
    .service-card .box-title a {
        font-size: 20px;
    }
    .service-card .icon-btn {
        --btn-size: 40px;
        font-size: 24px;
    }
}
@media (max-width: 575px) {
    .service-card .box-content {
        padding: 30px;
    }
    .service-card .box-number {
        font-size: 24px;
    }
    .service-card .box-title {
        max-width: 210px;
    }
    .service-card .box-title a {
        font-size: 20px;
    }
}
.service-card.style1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    background: #1f736f;
    z-index: -1;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    margin-bottom: 0;
}
.service-card.style1 .box-icon .color-masking {
    -webkit-transform: scale(-1) rotate(180deg);
    transform: scale(-1) rotate(180deg);
    background: transparent;
}
.service-card.style1 .box-icon .color-masking img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}
.service-card.style1 .box-img{
    margin-top: 0;
    margin-bottom:15px;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    width: 100%;
}
.service-card.style1 .box-img .img_realta_provinciale{
    object-fit: cover;
    width: 100%;
    height: 100px;
}
.service-card.style1 .box-title {
    color: #ffffff;
    margin-top:14px;
}
.service-card.style1 .box-title a {
    color: #ffffff;
}
.service-card.style1 .box-title a:hover {
    color: #ffffff;
}
.service-card.style1 .box-text {
    color: #ffffff;
    width: 100%;
    height: 170px;

}
.service-card.style2 {
    position: unset;
    opacity: 1;
    visibility: visible;
    background: var(--white-color);
    margin: 0;
    padding: 34px;
    /* Medium devices */
}
@media (max-width: 991px) {
    .service-card.style2 {
        padding: 30px;
    }
}
.service-card.style2 .box-icon .color-masking {
    -webkit-transform: scale(-1) rotate(180deg);
    transform: scale(-1) rotate(180deg);
    background: transparent;
}
.service-card.style2 .box-icon .color-masking img {
    -webkit-filter: none;
    filter: none;
}
.service-card.style2 .box-img img {
    width: 100%;
}
.service-card.style2 .box-title a {
    color: var(--title-color);
}
.service-card.style2 .box-title a:hover {
    color: var(--title-color);
}
.service-card.style2 .box-text {
    color: var(--black-color3);
    max-width: 550px;
}
.service-card.style2:hover {
    background: #eb9e06;
}
.service-card.style2:hover .box-title a {
    color: var(--white-color);
}
.service-card.style2:hover .box-text {
    color: var(--white-color);
}
.service-card.style2:hover .box-icon .color-masking img {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.service-slider {
    margin-top: 0;
    padding: 0 15px;
}
.service-slider .swiper-slide {
    margin-top: 30px;
}
.service-slider .slider-pagination-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    max-width: 745px;
    position: relative;
    margin-left: auto;
    top: -65px;
    margin-right: 356px;
    margin-top: -70px;
    /* Large devices */
}
@media (max-width: 1730px) {
    .service-slider .slider-pagination-wrap {
        margin-right: 0px;
    }
}
@media (max-width: 1199px) {
    .service-slider .slider-pagination-wrap {
        top: 0;
        margin: 0;
    }
}
.service-slider .slider-pagination-wrap .slider-pagination2 {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}
.service-slider .slider-pagination-wrap .slider-pagination2 .current-slide {
    font-size: 56px;
    font-weight: 500;
    font-family: var(--title-font);
    color: var(--title-color);
    /* Small devices */
}
@media (max-width: 767px) {
    .service-slider .slider-pagination-wrap .slider-pagination2 .current-slide {
        font-size: 30px;
    }
}
.service-slider .slider-pagination-wrap .slider-pagination2 .divider,
.service-slider .slider-pagination-wrap .slider-pagination2 .total-slides {
    font-size: 20px;
    font-family: var(--title-font);
}
.service-slider .slider-pagination-wrap .slider-pagination {
    margin-top: 0;
}
.service-slider .slider-pagination-wrap .icon-box {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.service-slider .swiper-slide-active .service-card {
    opacity: 0;
    visibility: hidden;
}
.service-slider .swiper-slide-active .service-card.style1 {
    opacity: 1;
    visibility: visible;
}

/* Service Area 2 ---------------------------------- */
.service-wrap {
    max-width: 1840px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 24px 24px;
    margin-top: 0;
    /*  background: #eb9e06; sfondo area cards le nostre realtà */
    /* Medium devices */
}
@media (max-width: 991px) {
    .service-wrap {
        padding: 0 10px;
    }
}


.space,
.space-top {
    padding-top: 5px;
}

.space,
.space-bottom {
    padding-bottom: 5px;
}

/* Medium devices */
@media (max-width: 991px) {
    .space,
    .space-top {
        padding-top: 10px;
    }
    .space,
    .space-bottom {
        padding-bottom: 10px;
    }
}
/*------------------- RTL -------------------*/