.bg-gray-transparent {
    background-color: #eeeceeda
}

.bg-bubbles-training {
    background-image: url('../images/bgs/bubbles-training.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.bg-footer {
    background: linear-gradient(-65deg, #d1232a, #cccccc, #ced4da);
    background-size: 400% 400%;
    -webkit-animation: bg-footer-animation 15s ease infinite;
    -moz-animation: bg-footer-animation 15s ease infinite;
    animation: bg-footer-animation 15s ease infinite;
}

.bg-lighter-gray {
    background-color: #dcdcdc;
}

.circled-numbers {
    width: 4rem;
    height: 4rem;
    line-height: 3.5rem;
    border-color: #e9c4bd !important;
}

@-webkit-keyframes bg-footer-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes bg-footer-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes bg-footer-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.bg-slider {
    --initialTextColor: black;
    --slideTextColor: white;
    --initialBgColor: transparent;
    --slideBgColor: #a865a4;
    
    color: var(--initialTextColor);
    background-image: linear-gradient(90deg, var(--initialBgColor) 0%, var(--initialBgColor) 50%, var(--slideBgColor) 50%, var(--slideBgColor) 100%);
    background-size: 400%;
    transition: background-position .3s cubic-bezier(.47, .1, 1, .63), color .2s linear;
    transition-delay: 0.0s, 0.15s;
}

.bg-slider:hover {
    color: var(--slideTextColor);
    cursor: pointer;
    background-position: -50% 100%;
}

.bg-projects {
    background-color: white;
    transition: background-color .3s cubic-bezier(.47, .1, 1, .63), color .2s linear;
    transition-delay: 0.0s, 0.15s;
}
.bg-projects:hover {
    background-color: #a865a436;
}

.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/home/banner.png");
    /* Set a specific height */
    height: 50%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.section-title::before {
    display: inline-block;
    content: "";
    width: 3rem;
    margin: 0 1rem;
    transform: translateY(-.5rem);
}

.section-title.primary::before {
    border-top: .3rem solid #8f89b7 !important;
}

.section-title.secondary::before {
    border-top: .3rem solid #c82b28 !important;
}

.more-development {
    fill: #edd8ae;
}

.less-developed {
    fill: #d5434e;
}

.medium-development {
    fill: #e7b66a;
}
.legenda-regions-square {
    width: 1.5rem;
    height: 1.5rem;
}
.legenda-more-development {
    background-color: #edd8ae;
}

.legenda-less-developed {
    background-color: #d5434e;
}

.legenda-medium-development {
    background-color: #e7b66a;
}

.legenda-hospitals {
    color: #193343;
}
.legenda-private {
    color: #b74e09;
}
.legenda-network {
    color: #1e4761;
}

.oeci-centre {
    color: #18bb92;
}
.centre-list:hover {
    color: #d5434e;
}
.centre:hover {
    fill: #d1232a !important;
    stroke: white !important;
    stroke-width:1px !important;
}
.centre-hover {
    fill: #d1232a !important;
    stroke: white !important;
    stroke-width: 1px !important;
    scroll-margin: 25px;
}
.centre-list {
    scroll-margin: 25px;
}
.cursor-pointer {
    cursor: pointer;
}
.bg-primary-darker {
    background-color: #67589d;
}

/* Animazioni CSS */
.section-hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}