.elementor-kit-34{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-34 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ═════════════ CARD FAN ═════════════ */
.card-fan {
    --gold: #D4AF4A;
    --gold-soft: rgba(212, 175, 74, 0.45);
    container-type: inline-size;       /* cards size themselves from the available width */
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    /* no padding here: your Elementor padding is respected */
}

.card-fan > .gold-card {
    --cw: min(300px, calc(100cqw / 5.4));   /* card width, always fits inside the padding */
    --angle: 3.6deg;                        /* rotation step between neighbouring cards */
    --i: 0;                                 /* position from centre, set by the script */

    width: var(--cw) !important;
    flex: 0 0 var(--cw) !important;
    min-width: 0;
    min-height: calc(var(--cw) * 1.75);
    margin-bottom: calc(var(--cw) * 0.3);   /* room for the outer cards that drop lower */

    position: relative;
    background: linear-gradient(180deg, #171512 0%, #100f0d 100%);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);

    /* shared pivot far below the cards = a true fan */
    transform-origin: 50% calc(50% + var(--cw) * 16);
    transform: rotate(calc(var(--i) * var(--angle)));
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* stack every card on the first one, the pivot then spreads them out */
.card-fan > .gold-card + .gold-card { margin-left: calc(var(--cw) * -1) !important; }

/* fallback positions (the script overrides these) */
.card-fan > .gold-card:nth-child(1) { --i: -2; z-index: 1; }
.card-fan > .gold-card:nth-child(2) { --i: -1; z-index: 2; }
.card-fan > .gold-card:nth-child(3) { --i:  0; z-index: 3; }
.card-fan > .gold-card:nth-child(4) { --i:  1; z-index: 2; }
.card-fan > .gold-card:nth-child(5) { --i:  2; z-index: 1; }

/* hover: lift along the card's own axis, keeping its place in the fan */
.card-fan > .gold-card:hover {
    z-index: 10 !important;
    transform: rotate(calc(var(--i) * var(--angle))) translateY(calc(var(--cw) * -0.1));
}

/* ═════════════ FRAME ═════════════ */

/* thin inner hairline */
.gold-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--gold-soft);
    border-radius: 6px;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

/* corner brackets + corner dots */
.gold-card::after {
    content: "";
    position: absolute;
    inset: -4px;                       /* lets the dots sit just outside the card */
    pointer-events: none;
    background:
        /* top-left bracket */
        linear-gradient(var(--gold), var(--gold)) 8px 8px / 26px 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) 8px 8px / 2px 26px no-repeat,
        /* top-right bracket */
        linear-gradient(var(--gold), var(--gold)) calc(100% - 8px) 8px / 26px 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) calc(100% - 8px) 8px / 2px 26px no-repeat,
        /* bottom-left bracket */
        linear-gradient(var(--gold), var(--gold)) 8px calc(100% - 8px) / 26px 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) 8px calc(100% - 8px) / 2px 26px no-repeat,
        /* bottom-right bracket */
        linear-gradient(var(--gold), var(--gold)) calc(100% - 8px) calc(100% - 8px) / 26px 2px no-repeat,
        linear-gradient(var(--gold), var(--gold)) calc(100% - 8px) calc(100% - 8px) / 2px 26px no-repeat,
        /* corner dots */
        radial-gradient(circle, var(--gold) 0 1.6px, transparent 2px) 0 0 / 8px 8px no-repeat,
        radial-gradient(circle, var(--gold) 0 1.6px, transparent 2px) 100% 0 / 8px 8px no-repeat,
        radial-gradient(circle, var(--gold) 0 1.6px, transparent 2px) 0 100% / 8px 8px no-repeat,
        radial-gradient(circle, var(--gold) 0 1.6px, transparent 2px) 100% 100% / 8px 8px no-repeat;
}

.gold-card:hover::before { border-color: var(--gold); }

/* ═════════════ EMBLEM ═════════════ */
.card-emblem {
    position: relative;
    padding: 14px;
    border-radius: 50%;
}

.card-emblem::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, var(--gold-soft) 0 1deg, transparent 1deg 4deg);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 100%);
            mask: radial-gradient(circle, transparent 62%, #000 63% 100%);
    pointer-events: none;
}

.card-emblem img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;               /* keeps the image circular, not oval */
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: #0d0c0a;
}

/* ═════════════ TABLET / MOBILE: swipeable row instead of a fan ═════════════ */
@media (max-width: 1024px) {
    .card-fan {
        justify-content: flex-start !important;
        gap: 16px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .card-fan > .gold-card,
    .card-fan > .gold-card + .gold-card {
        --cw: min(260px, 72cqw);
        margin-left: 0 !important;
        margin-bottom: 0;
        transform: none !important;
        z-index: auto !important;
        scroll-snap-align: center;
    }
}/* End custom CSS */