/* =========================
   SECTION COLORS
========================= */

.hero.hero--white {
    background-color: var(--white);
}

.hero.hero--green {
    background-color: var(--primario-chiaro);
}

.hero .card--white {
    background-color: var(--white);
}

.hero .card--green {
    background-color: var(--primario);
}

.hero .block__title--green {
    color: var(--primario);
}

.hero .block__title--white {
    color: var(--white);
}

.hero .block__description--white {
    color: var(--white);
}

.hero .block__description--blue {
    color: var(--secondario);
}

/* =========================
   HERO BLOCK
========================= */

.hero {
    width: 100%;
    padding-bottom: 48px;
}

.hero .hero_box {
    border-radius: 24px;
}

.hero .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.hero .hero__content {
    display: flex;
    flex-direction: column;
    align-self: center;
    /* width: 610px;
    padding: 45px 28px 45px 45px; */
    width: 521px;
    padding: 64px 36px 64px 32px;
    flex: auto;
}

.hero .hero__content .hero__tag {
    display: inline-flex;
    /* max-width: 245px; */
    width: fit-content;
    padding: 4px 12px;
    align-items: center;
    gap: 8px;
    background-color: var(--carouselpink);
    border-radius: 9999px;
    margin-bottom: 24px;
}

.hero .hero__content .hero__tag .hero__tag-icon {
    display: inline-block;
    width: 10px;
    height: 12px;
}

.hero .hero__content .hero__tag .hero__tag-text {
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--secondario);
    font-family: var(--font-primary-bold);
}

.hero .hero__content .hero__title {
    font-size: 54px;
    font-style: normal;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -1px;
    margin-bottom: 24px;
    padding: 0;
    font-family: var(--font-primary-extrabold);
}

.hero .hero__content .hero__description {
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    font-family: var(--font-primary);
    /* margin-bottom: 40px; */
    margin-bottom: 0px;
}

.hero .hero__content .hero__description p {
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    font-family: var(--font-primary);
    margin: 0;
}

.hero .hero__content .hero__description b,
.hero .hero__content .hero__description p b,
.hero .hero__content .hero__description strong,
.hero .hero__content .hero__description p strong {
    font-family: var(--font-primary-bold);
}

.hero .hero__content .hero__cta-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero .hero__content .hero__cta-group--has-cta {
    margin-top: 24px;
}

.hero .hero__content .hero__cta-item {
    display: inline-flex;
}

.hero .hero__content .hero__cta-item--hidden {
    visibility: hidden;
    pointer-events: none;
}

/* IMAGE */
.hero .hero__media {
    text-align: center;
    /* width: 560px; */
    max-width: 585px;
    flex: auto;
}

.hero .hero__media .hero__image {
    width: 100%;
    /* height: 100%; */
    height: auto;
    border-radius: 0 24px 24px 0;
}

/* =========================
   MODALS
========================= */

.hero-modals-section {}

.hero-modals-section .modal-dialog {
    max-width: 869px;
}

.hero-modals-section .modal-content {
    background-color: var(--primario);
    color: var(--white);
    border: none;
    border-radius: 24px;
    box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 32px;
    overflow: hidden;
}

.hero-modals-section .modal-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 573px;
    height: 409px;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 573 409'%3E%3Cpath fill='white' fill-opacity='0.3' d='M448.329 -40.5976C495.62 -157.424 443.93 -292.675 328.594 -347.281C213.259 -401.886 65.7412 -352.662 9.14541 -233.122L-32.451 -145.546L-46.7698 -190.12L-106.01 -171.082L-69.4673 -57.3389C-66.9345 -49.4897 -61.4037 -42.9613 -54.0675 -39.1872L-50.3104 -37.2414C-50.0101 -37.0992 -49.7098 -36.957 -49.4095 -36.8149C-42.2846 -33.4416 -34.126 -32.8872 -26.5856 -35.3323L87.1579 -71.8748L68.1198 -131.115L22.6334 -116.492L65.393 -206.525C107.307 -295.054 213.427 -333 301.983 -291.073C385.953 -251.318 424.35 -153.773 392.301 -68.2935L328.832 -98.3426C263.402 -128.485 185.443 -100.33 154.541 -35.06C123.639 30.2104 151.575 109.336 217.255 140.432C282.935 171.528 361.651 143.398 392.747 77.7178L421.982 15.9688C500.17 62.0765 531.808 161.334 492.234 244.922C450.32 333.45 344.2 371.396 255.644 329.47L-49.5794 184.963C-81.1363 170.022 -94.6479 132.213 -79.7073 100.656L-54.3109 47.0145L-110.573 20.3775L-135.969 74.0188C-165.592 136.587 -138.784 211.602 -76.2165 241.225L229.007 385.732C348.546 442.327 491.86 391.112 548.456 271.573C605.051 152.033 557.718 20.2151 448.274 -40.6234L448.329 -40.5976ZM243.894 84.2372C209.225 67.8233 194.376 26.2733 210.79 -8.39563C227.204 -43.0646 268.754 -57.9129 303.423 -41.499L366.291 -11.7343L336.527 51.1338C320.113 85.8027 278.563 100.651 243.894 84.2372Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    opacity: 0.4;
}

.hero-modals-section .modal-header {
    padding: 0px;
    border: none;
}

.hero-modals-section .modal-header h2.modal-title {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    font-family: var(--font-primary-bold);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 24px;
}

.hero-modals-section .modal-header .btn-close {
    color: var(--white);
    background: none;
    opacity: 1;
    position: absolute;
    right: 32px;
    top: 32px;
    width: auto;
    height: auto;
}

.hero-modals-section .modal-body .modal-description {
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    font-family: var(--font-primary);
    margin-bottom: 24px;
}

.hero-modals-section .modal-body .modal-description p {
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    font-family: var(--font-primary);
    margin: 0;
}

.hero-modals-section .modal-body .modal-description b,
.hero-modals-section .modal-body .modal-description p b,
.hero-modals-section .modal-body .modal-description strong,
.hero-modals-section .modal-body .modal-description p strong {
    font-family: var(--font-primary-bold);
}

.hero .btn-primary:focus-visible {
    border-radius: var(--radius) !important;
}

/* new site */

.hero .container-site.card--white.hero_box {
    max-height: 600px;
    overflow: hidden;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1280px) {
    .hero .hero__content {
        width: 50%;
        padding: 24px;
    }

    .hero .hero__media {
        /* width: 50%; */
    }
}

@media (max-width: 1180px) {
    .hero .hero__content .hero__title {
        font-size: 46px;
        font-style: normal;
        font-weight: 700;
        line-height: 52px;
        margin-bottom: 16px;
        padding: 0;
    }
}

@media (max-width: 1024px) {
    .hero .hero__content .hero__title {
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%;
        margin-bottom: 16px;
        padding: 0;
    }

    .hero-modals-section .modal-header h2.modal-title {
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        margin-bottom: 16px;
    }
}

@media (max-width: 992px) {
    .hero {
        padding-bottom: 40px;
    }

    .hero .hero__content {
        width: 100%;
    }

    .hero .container-site.card--white.hero_box {
        max-height: none;
    }

    .hero .hero__content .hero__tag {
        margin-bottom: 16px;
    }

    .hero .hero__content .hero__description {
        /* margin-bottom: 24px; */
    }

    .hero .hero__media {
        width: 100%;
        max-width: 100%;
    }

    .hero .hero__media .hero__image {
        border-radius: 0 0 24px 24px;
    }
}

@media (max-width: 450px) {
    .hero .hero__media .hero__image {
        /* max-height: 300px; */
    }

    .hero-modals-section .modal-body {
        padding: 0;
    }
}