/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/blocks/anniversary-hero-white/style.css ***!
  \*************************************************************************************************************************************************************************************************/
/**
 * Anniversary Hero White - Frontend Styles
 */

.cpm-anniversary-hero.cpm-anniversary-hero-white {
    position: relative;
    color: #000000;
    aspect-ratio: 1730 / 1420;
    overflow: visible;
    background-color: transparent;
    .cpm-anniversary-hero__content {
        top: 45%;
    }
}

.cpm-anniversary-hero-white-container {
    display: block;
    /* max-width: 1360px; */
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1730 / 1420;
    /* max-height: 100vh; */
}

.cpm-anniversary-hero-white-container.is-contained {
    max-width: 1214px;
    width: 100%;
    height: 430px;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: auto;
    margin-top: 60px;
    margin-bottom: 60px;

    .cpm-anniversary-hero.cpm-anniversary-hero-white {
        .cpm-anniversary-hero__content {
            top: 48%;
        }
    }
    .circle-index-3,
    .circle-index-8,
    .circle-index-10,
    .circle-index-16 {
        display: none;
    }
    @media (min-width: 768px) {
        .circle-index-4 {
            top: -16%;
        }
        .circle-index-5 {
            top: 0%;
            left: 48%;
        }
        .circle-index-6 {
            top: 5%;
        }
        .circle-index-7 {
            left: 61%;
            width: 10%;
            top: 3%;
        }
        .circle-index-11 {
            top: 0;
        }
        .circle-index-13 {
            top: 62.5%;
            left: 10%;
        }
        .circle-index-14 {
            top: 75%;
            left: 17%;
        }
        .circle-index-16 {
            top: 67%;
        }
        .circle-index-18 {
            top: 85%;
        }
        .circle-index-19 {
            top: 70%;
        }
        .circle-index-20 {
            top: 75%;
            left: 87%;
        }
        .circle-index-21 {
            left: 77%;
        }
        .circle-index-22 {
            left: 84%;
        }
        .circle-index-23 {
            left: 91%;
        }
        .circle-index-25 {
            top: 89%;
            left: 9.5%;
        }
    }
}

.cpm-anniversary-hero-white-container.is-contained .cpm-anniversary-hero {
    height: 100%;
}

.cpm-anniversary-hero-white-container.is-contained
    .cpm-anniversary-hero__canvas {
    margin: 0;
    border-radius: 24px;
}

.cpm-anniversary-hero-white-container.is-contained .cpm-anniversary-hero__logo {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.cpm-anniversary-hero-white .cpm-anniversary-hero__canvas {
    margin: 0;
    border-radius: 0;
    pointer-events: none;
    overflow: visible;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f8 100%);
}

.cpm-anniversary-hero-white .cpm-anniversary-hero__canvas a {
    pointer-events: none;
}

.cpm-anniversary-hero-white .cpm-anniversary-hero__canvas .cpm-hero-circle {
    opacity: 1;
}

.cpm-anniversary-hero-white
    .cpm-anniversary-hero__canvas
    .cpm-hero-circle.is-story {
    pointer-events: auto;
    pointer-events: none;
}

.cpm-anniversary-hero-white .cpm-anniversary-hero__subheadline {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin: 0;
    max-width: unset;
    .cpm-anniversary-hero__subheadline_text {
        color: #058167;
        font-weight: 600;
        font-size: 25px;
        line-height: 1.4;
        letter-spacing: 0%;
        text-align: center;
    }
    .cpm-btn-primary {
        color: white !important;
        font-weight: 600;
    }
}

.cpm-anniversary-hero-white .cpm-anniversary-hero__site-mark {
    color: #333333;
}

.cpm-anniversary-hero-white .cpm-hero-circle {
    background: rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cpm-anniversary-hero-white .cpm-hero-circle__fill {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.12),
        rgba(0, 0, 0, 0.02)
    );
    box-shadow: inset 0 18px 32px rgba(0, 0, 0, 0.04);
}

/* Adjust placeholder colors for white background if needed */

.cpm-anniversary-hero-white .cpm-hero-circle__fill.placeholder-2 {
    background: linear-gradient(
        135deg,
        rgba(0, 163, 125, 0.26),
        rgba(0, 0, 0, 0.04)
    );
}

.cpm-anniversary-hero-white .cpm-hero-circle__fill.placeholder-3 {
    background: linear-gradient(
        135deg,
        rgba(82, 115, 216, 0.24),
        rgba(12, 26, 67, 0.12)
    );
}

.cpm-anniversary-hero-white .cpm-hero-circle__fill.placeholder-4 {
    background: linear-gradient(
        135deg,
        rgba(189, 132, 255, 0.24),
        rgba(12, 26, 67, 0.12)
    );
}

@media (max-width: 768px) {
     .cpm-anniversary-hero.cpm-anniversary-hero-white {
        .cpm-anniversary-hero__content {
            top: unset !important;
        }
    }
    .cpm-anniversary-hero-white-container {
        .cpm-anniversary-hero__subheadline_text {
            max-width: 228px;
        }
        .cpm-hero-circle.circle-index-8 {
            left: 66%;
        }
        .cpm-hero-circle.circle-index-18 {
            top: 74%;
            left: 43%;
        }
    }
    .cpm-anniversary-hero-white-container.is-contained {
        height: unset;
        margin: 0;
        .cpm-anniversary-hero {
            height: unset;
            aspect-ratio: unset;
            .cpm-anniversary-hero__logo {
                width: 70vw;
            }
        }
        .cpm-anniversary-hero__heading {
            margin-bottom: 16px;
        }
        .cpm-hero-circle {
            transform: scale(1.35);
        }
        .cpm-hero-circle.circle-index-3,
        .cpm-hero-circle.circle-index-6,
        .cpm-hero-circle.circle-index-8,
        .cpm-hero-circle.circle-index-10 {
            display: block;
        }

        .cpm-anniversary-hero__canvas {

            display: none;
            height: 85vh;
            width: 200vw;
            left: 67%;
        }
        .cpm-anniversary-hero__content {
            top: 41%;
        }
    }
}

/* responsive adjustments if needed */

@media (max-width: 1199px) {
    .cpm-anniversary-hero-white .cpm-anniversary-hero__subheadline {
        margin: 0 20px;
        flex-direction: column;
        gap: 20px;
    }
}


/*# sourceMappingURL=style-index.css.map*/