/* Color reference: club logo — pink, sky blue, green and warm beige.
   Palette only: keep the existing Crafto eLearning layout and interactions. */
:root {
    --club-paper: #fcfaf7;
    --club-surface: #f3eee7;
    --club-blue: #237da3;
    --club-sky: #35a6d7;
    --club-orange: #eb80a5;
    --club-gold: #a58c6f;
    --club-green: #75bf85;
    --base-color: #237da3;
    --dark-gray: #333333;
    --medium-gray: #66615c;
    --yellow: #f8dce7;
    --extra-medium-gray: #ddd5cb;
}

body { background-color: var(--club-paper); color: #54504b; }
.bg-tranquil { background-color: var(--club-surface); }
.bg-gradient-tranquil-white { background-image: linear-gradient(#fff, var(--club-paper)); }
.bg-gradient-aztec-green, .bg-gradient-deep-zuccini-green {
    background-image: linear-gradient(135deg, #333333, #222222);
}
.text-medium-gray { color: var(--medium-gray) !important; }
.text-yellow { color: #a74770 !important; }
h2.text-dark-gray { color: var(--club-blue) !important; }
.bg-yellow { background-color: var(--yellow); }

/* Light title areas, with the existing background decoration in place. */
section.top-space-margin.bg-dark-gray {
    background-color: var(--club-paper) !important;
    background-image:
        radial-gradient(ellipse at 8% 20%, #f8dce733, transparent 40%),
        radial-gradient(ellipse at 92% 85%, #35a6d720, transparent 40%) !important;
}
section.top-space-margin .text-white { color: var(--dark-gray) !important; }
section.top-space-margin h1.text-white,
section.top-space-margin h1.text-yellow { color: var(--club-blue) !important; }
section.top-space-margin p.text-white { color: #54504b !important; opacity: 1 !important; }
section.top-space-margin .text-yellow:not(h1) { color: #a74770 !important; }
section.top-space-margin .background-position-center-top { opacity: .18; }

/* Shared eLearning-style header. */
header.club-header .club-navbar {
    background: #00483e !important;
    border: 0;
}
header.club-header .container-fluid { padding-inline: 3%; }
header.club-header .site-logo {
    display: inline-block;
    color: #fff !important;
    font-size: clamp(18px, 1.5vw, 24px);
    padding-block: 26px;
}
header.club-header .navbar-brand img.club-logo {
    display: block !important;
    width: clamp(180px, 19vw, 280px);
    height: auto;
    max-height: none;
}
header.club-header .navbar-nav .nav-link,
header.club-header .header-icon a { color: #fff !important; }
header.club-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    font-size: 17px;
    font-weight: 600;
}
header.club-header .nav-link .nav-menu-icon {
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1;
    color: inherit;
}
header.club-header .navbar-nav .nav-item.active > .nav-link {
    color: #a4c5bd !important;
}
header.club-header .navbar-nav .nav-link:hover,
header.club-header .header-icon a:hover { color: #d6df23 !important; }
header.club-header .navbar-toggler-line { background-color: #fff !important; }
header.club-header .navbar-collapse { background-color: #00483e; }
header.club-header a:focus-visible,
header.club-header button:focus-visible { outline-color: #d6df23; }
section.subpage-mv { padding-top: 84px; }
@media (max-width: 991px) {
    header.club-header .site-logo { padding-block: 20px; }
    header.club-header .navbar-nav .nav-link { padding: 15px 24px; }
    header.club-header .navbar-collapse { border-top: 1px solid #ffffff26; }
    section.subpage-mv { padding-top: 72px; }
}

.navbar.header-light .navbar-nav .nav-item.active > .nav-link,
.navbar.header-light .navbar-nav .nav-link:hover { color: var(--club-blue); }
.btn.btn-base-color {
    background: var(--club-blue); border-color: var(--club-blue); color: #fff;
}
.btn.btn-base-color:hover, .btn.btn-base-color:focus-visible,
.btn.btn-base-color:active {
    background: #1c6685; border-color: #1c6685; color: #fff;
}
.btn.btn-dark-gray { background: #222; border-color: #222; color: #fff; }
.btn.btn-dark-gray:hover, .btn.btn-dark-gray:focus-visible,
.btn.btn-dark-gray:active {
    background: var(--club-blue); border-color: var(--club-blue); color: #fff;
}

/* Program colors: learning / music / free time / holidays. */
.palette-blue { --program-ink: #237da3; --program-tint: #e3f3fa; }
.palette-orange { --program-ink: #a74770; --program-tint: #fbe7ef; }
.palette-green { --program-ink: #377c48; --program-tint: #e8f5e9; }
.palette-gold { --program-ink: #78634e; --program-tint: #f1e9dd; }
.feature-box[class*="palette-"] .bg-yellow { background-color: var(--program-tint); }
.feature-box[class*="palette-"] .feature-box-icon i,
.feature-box[class*="palette-"] .feature-box-content > .text-dark-gray,
.feature-box[class*="palette-"] > .text-dark-gray { color: var(--program-ink) !important; }
.info-list li::before { background: var(--club-green); }

/* Usage information: soft red background and rounded white cards. */
section.usage-section { background: #fff2f0; }
.usage-section .row > div > div {
    background: #fff !important;
    border-radius: 40px !important;
    box-shadow: none !important;
    padding: 40px !important;
}
.usage-section .row > div > div > span {
    color: #df0031 !important;
    padding-bottom: 20px;
    margin-bottom: 24px !important;
    border-bottom: 1px dashed #f3a5b2;
}
.usage-section .text-yellow { color: #df0031 !important; }
.usage-section .info-list li::before { background: #ffdf47; }
@media (max-width: 767px) {
    .usage-section .row > div > div {
        border-radius: 28px !important;
        padding: 28px 24px !important;
    }
}

/* Tables and form controls keep their existing sizing and spacing. */
.pricing-table-simple thead th { background: var(--club-blue); color: #fff; }
.pricing-table-simple tbody tr:nth-child(even) { background: #f5f8fc; }
.pricing-table-simple tbody td:first-child { color: var(--club-blue); }
input, select, textarea { accent-color: var(--club-blue); }
.form-control:focus, .form-select:focus {
    border-color: var(--club-blue) !important;
    box-shadow: 0 2px 0 var(--club-blue);
}
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--club-sky); outline-offset: 4px;
}

/* Warm yellow invitation panel, charcoal footer. */
footer .bg-base-color { background-color: #f8dce7 !important; }
footer .footer-dark, footer .footer-dark p,
footer .footer-dark a, footer .text-medium-gray { color: #e8e2da !important; }
footer .footer-dark a:hover { color: #f8dce7 !important; }
footer .site-logo.text-white { color: #fff !important; }
footer .border-color-transparent-white-light { border-color: #ffffff33 !important; }

/* Clearly outlined contact fields. */
.contact-form-style-03 .form-label { margin-bottom: 8px !important; }
.contact-form-style-03 .form-control {
    border: 1px solid #a58c6f !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    padding: 14px 64px 14px 16px !important;
    min-height: 54px;
}
.contact-form-style-03 textarea.form-control { min-height: 160px; }
.contact-form-style-03 .form-group .form-icon {
    right: 16px;
    pointer-events: none;
}
.contact-form-style-03 .form-select { background-position: right 40px center; }
.contact-form-style-03 .form-control:focus {
    border-color: var(--club-blue) !important;
    box-shadow: 0 0 0 3px #35a6d726;
}
.contact-form-style-03 .form-control.is-invalid,
.contact-form-style-03.was-validated .form-control:invalid {
    border-color: #c33e61 !important;
}
.contact-form-style-03 input[type="checkbox"] {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-right: 8px;
    vertical-align: middle;
    appearance: auto;
}

/* Logo palette: light surfaces with darker companion colors for readable text. */
:root {
    --club-pink: #eb80a5;
    --club-beige: #a58c6f;
    --club-ink: #635445;
}
header.club-header .club-navbar,
header.club-header .navbar-collapse { background: #fcfaf7 !important; }
header.club-header .navbar-nav .nav-link,
header.club-header .header-icon a { color: var(--club-ink) !important; }
/* current page: same colour as the other links (no highlight) */
header.club-header .navbar-nav .nav-item.active > .nav-link { color: var(--club-ink) !important; opacity: 1; }
header.club-header .navbar-nav .nav-link:hover,
header.club-header .header-icon a:hover { color: #a74770 !important; opacity: 1; }
header.club-header .navbar-toggler-line { background-color: var(--club-ink) !important; }
/* The mobile menu is moved outside the header by main.js. */
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .nav-link {
    color: var(--club-ink) !important;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item.active .nav-link,
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .nav-link:hover {
    color: #a74770 !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .nav-menu-icon { color: #a74770; }
[data-mobile-nav-style=modern] .navbar-modern-inner .nav-link:focus-visible {
    outline: 2px solid #237da3;
    outline-offset: 4px;
}
header.club-header .navbar-collapse { border-color: #e8dfd4; }
header.club-header a:focus-visible,
header.club-header button:focus-visible { outline-color: var(--club-blue); }
header.club-header .nav-item:nth-child(1) .nav-menu-icon { color: #237da3; }
header.club-header .nav-item:nth-child(2) .nav-menu-icon { color: #377c48; }
header.club-header .nav-item:nth-child(3) .nav-menu-icon { color: #a74770; }
.home-mv, section.subpage-mv {
    background-color: #f5f7f0;
    background-image: radial-gradient(ellipse at 95% 15%, #f8dce7 0, transparent 48%), radial-gradient(ellipse at 5% 90%, #dff2fb 0, transparent 55%), linear-gradient(120deg, #faf7f0, #edf6ee);
    color: var(--club-ink);
}
.home-mv {
    background-image:
        linear-gradient(to top, #fff 0, rgba(255, 255, 255, .98) 55px, rgba(255, 255, 255, .82) 125px, rgba(255, 255, 255, 0) 260px),
        radial-gradient(ellipse at 95% 15%, #f8dce7 0, transparent 48%),
        radial-gradient(ellipse at 5% 90%, #dff2fb 0, transparent 55%),
        linear-gradient(120deg, #faf7f0, #edf6ee);
}
.home-mv h1, .subpage-mv h1 { color: var(--club-ink); }
.home-mv-eyebrow, .subpage-mv-label { color: #a74770; }
.home-mv-copy > p, .home-mv-features span { color: #685e54; }
.home-mv-primary { background: #f4bdd1; color: #593447; }
.home-mv-primary:hover { background: #eda2be; color: #593447; }
.home-mv-secondary { color: #237da3; }
.home-mv-secondary:hover { color: #a74770; }
.home-mv-features strong { color: var(--club-ink); border-color: var(--club-sky); }
.home-mv-features > div:nth-child(2) strong { border-color: var(--club-pink); }
.home-mv-features > div:nth-child(3) strong { border-color: var(--club-green); }
.subpage-mv-ring { border-color: #75bf852b; }
.subpage-mv-dot { background: var(--club-sky); box-shadow: -780px 235px 0 3px var(--club-pink); }
.home-mv-decoration, .subpage-mv-art img { visibility: hidden; }
.home-mv-visual::after, .subpage-mv-art::after {
    content: "";
    position: absolute;
    width: 32%;
    aspect-ratio: 1;
    top: 27%;
    right: 0;
    border: 40px solid var(--club-pink);
    border-top-color: transparent;
    border-radius: 50%;
    transform: rotate(25deg);
    pointer-events: none;
}
footer .footer-dark { background: transparent !important; }
footer .bg-base-color { background: #f8dce7 !important; }
footer .bg-base-color h6, footer .bg-base-color .text-dark-gray { color: var(--club-ink) !important; }
footer .footer-dark a:hover { color: #f4bdd1 !important; }

/* Contact panels inspired by the spacious information-page layout. */
.contact-page .contact-lead .col-lg-9 { width: 100%; }
.contact-page #contact-lead-heading {
    position: relative;
    max-width: 1000px;
    color: #df0031 !important;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.8;
    padding-left: 14px;
}
.contact-page #contact-lead-heading::before {
    content: ""; position: absolute; left: -3px; top: 10px;
    width: 11px; height: 11px; border-radius: 50%; background: #df0031;
}
.contact-page .contact-phone-section { padding-top: 40px; }
.contact-phone-section .col-lg-8,
.contact-form-section .col-lg-8,
.contact-form-section .col-xl-9,
.contact-privacy-section .col-lg-8 { width: 100%; }
.contact-page .contact-phone-section .bg-tranquil {
    display: grid;
    grid-template-columns: 280px 1fr;
    column-gap: 48px;
    align-items: center;
    background: #fff2f0;
    border-radius: 24px !important;
    padding: 48px !important;
    text-align: left !important;
}
.contact-phone-section .bg-tranquil > span {
    grid-row: 1 / 3;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 210px;
    margin: 0 !important;
    padding: 24px;
    background: white;
    border-radius: 28% 24% 26% 22%;
    color: #4d4d4d !important;
}
.contact-phone-section .bg-tranquil > span i {
    color: #df0031 !important; font-size: 44px; margin: 0 0 22px !important;
}
.contact-page .contact-phone-section a[href^="tel:"] {
    align-self: end;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.5;
    color: #df0031 !important;
    padding-bottom: 16px;
    border-bottom: 1px dashed #f3a5b2;
    margin-bottom: 16px !important;
}
.contact-phone-section .bg-tranquil > p { align-self: start; }
.contact-page .contact-form-section { padding-top: 40px; padding-bottom: 32px; }
.contact-form-section > .container {
    background: #fff2f0;
    padding: 48px;
    border-radius: 24px;
}
.contact-form-section h2 {
    position: relative; isolation: isolate;
    text-align: left;
    font-size: clamp(24px, 2.5vw, 32px);
    letter-spacing: 0 !important;
    color: #4d4d4d !important;
    border-bottom: 1px dashed #f3a5b2;
    padding-bottom: 24px;
    margin-bottom: 28px;
}
.contact-form-section h2::before {
    content: ""; position: absolute; z-index: -1;
    width: 24px; height: 24px; left: -10px; top: -3px;
    background: #ffdf47; border-radius: 50%;
}
.contact-form-section form { background: white; padding: 40px; border-radius: 32px; }
.contact-page .contact-form-section .form-control {
    background: #fff !important;
    border: 1px solid #e4cecc !important;
    border-radius: 12px !important;
    padding: 16px 45px 16px 16px !important;
}
.contact-form-section .form-label { margin-bottom: 10px !important; }
.contact-page .contact-form-section .form-control:focus {
    border-color: #df0031 !important; outline: 2px solid #f9d8df; outline-offset: 2px;
}
.contact-page .contact-form-section button[type="submit"] {
    background: #df0031; border-color: #df0031; color: white;
    min-width: 240px; box-shadow: none;
}
.contact-page .contact-form-section button[type="submit"]:hover { background: #b90029; }
.contact-page .contact-privacy-section .bg-tranquil {
    background: #fff2f0; border-radius: 24px !important; padding: 32px 48px !important;
}
@media (max-width: 767px) {
    .contact-page .contact-phone-section .bg-tranquil {
        grid-template-columns: 1fr; gap: 20px; padding: 24px !important;
        text-align: center !important;
    }
    .contact-phone-section .bg-tranquil > span { grid-row: auto; min-height: 150px; border-radius: 32px; }
    .contact-phone-section .bg-tranquil > p { font-size: 14px; }
    .contact-form-section > .container { width: calc(100% - 30px); padding: 30px 20px; }
    .contact-form-section form { padding: 24px 16px; border-radius: 24px; }
    .contact-page .contact-privacy-section .bg-tranquil { padding: 28px 24px !important; }
}

/* Contact headings: rounded underline with a separated terminal dot. */
.contact-page h2,
.contact-page #contact-lead-heading {
    position: relative;
    display: inline-block;
    max-width: 100%;
    width: fit-content;
    padding: 0 0 20px;
    border-bottom: 0;
    color: #303b42 !important;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.7;
    letter-spacing: 0 !important;
}
.contact-page h2::before,
.contact-page #contact-lead-heading::before {
    content: "";
    position: absolute;
    z-index: auto;
    left: 0;
    right: 16px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 6px;
    border-radius: 999px;
    background: #168326;
}
.contact-page h2::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #168326;
}
.contact-page .contact-form-section .text-center { text-align: left !important; }
.contact-page .contact-form-section form .text-center { text-align: center !important; }

/* Re-tone the original decorative assets without changing the source images. */
img[src*="deco-ring-white.png"], img[src*="demo-elearning-bg-04.png"],
img[src*="deco-ring-gray.png"] {
    filter: sepia(.3) hue-rotate(-18deg) saturate(.65); opacity: .45;
}