.date-widget-border {
    position: relative;
}

.date-widget-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 24px;
    background: radial-gradient(
        300% 300% at 88% 36%,
        #EEE2FF 0%,
        #53308D 26%,
        #262728 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* ==========================================
   FEATURE HERO
   ========================================== */

.elementor {
    --feature-hero-height: clamp(410px, 26.86vw, 550px);
    --feature-hero-content-max-width: 1320px;
    --feature-hero-gap: 30px;
}


/* ==========================================
   BACKGROUND WRAPPER
   ========================================== */

.elementor .top-page-wrapper.top-page-wrapper {
    position: absolute !important;
    width: 100% !important;
    height: var(--feature-hero-height) !important;
    min-height: var(--feature-hero-height) !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none;
    isolation: isolate;
    z-index: 0 !important;
}


/* Main background gradient */
.elementor .top-page-wrapper.top-page-wrapper::before {
    content: "" !important;
    position: absolute !important;
    top: -12% !important;
    right: -8vw !important;
    bottom: -35% !important;
    left: -8vw !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    pointer-events: none;
    background:
        radial-gradient(
            50% 40% at 45% 10%,
            rgba(255, 171, 35, 0.10) 0%,
            rgba(255, 171, 35, 0.07) 20%,
            rgba(255, 171, 35, 0.045) 40%,
            rgba(255, 171, 35, 0.02) 60%,
            transparent 80%
        ),
        radial-gradient(
            80% 70% at 50% 50%,
            rgba(54, 7, 221, 0.26) 0%,
            rgba(54, 7, 221, 0.19) 20%,
            rgba(54, 7, 221, 0.12) 40%,
            rgba(54, 7, 221, 0.06) 60%,
            rgba(54, 7, 221, 0.02) 80%,
            transparent 100%
        ),
        #0a0a0a !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    z-index: 0;
}


/* Subtle noise texture */
.elementor .top-page-wrapper.top-page-wrapper::after {
    content: "";
    position: absolute;
    top: -12%;
    right: -8vw;
    bottom: -35%;
    left: -8vw;
    opacity: 0.025;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    z-index: 1;
}


/* Disable the old empty gradient container */
.elementor .top-page-wrapper > .page-scroll-gradient {
    display: none !important;
}


/* Keep the real hero section above the background */
.elementor .top-page-wrapper + .e-con {
    position: relative;
    min-height: var(--feature-hero-height) !important;
    z-index: 1 !important;
}


/* ==========================================
   DESKTOP AND LAPTOP IMAGE BREAKOUT
   ========================================== */

@media (min-width: 1025px) {

    /* Allow the image column to extend beyond the boxed container */
    .elementor .e-con:has(> .feature-hero-image) {
        --feature-hero-breakout-right: max(
            30px,
            calc((100vw - var(--feature-hero-content-max-width)) / 2)
        );

        overflow: visible !important;
    }


    /* Extend the image column to the right viewport edge */
    .elementor .feature-hero-image.feature-hero-image {
        --feature-hero-image-width: calc(
            40% -
            var(--feature-hero-gap) +
            var(--feature-hero-breakout-right)
        );

        --width: var(--feature-hero-image-width);
        --flex-basis: var(--feature-hero-image-width);
        --flex-grow: 0;
        --flex-shrink: 0;

        flex: 0 0 var(--feature-hero-image-width) !important;
        width: var(--feature-hero-image-width) !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-right: calc(
            0px - var(--feature-hero-breakout-right)
        ) !important;

        padding: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }


    /* Keep the image attached to the right edge and move it 10% down */
    .elementor
    .feature-hero-image.feature-hero-image
    > img.e-image-base {
        display: block !important;
        position: relative !important;
        top: 10% !important;

        flex: none !important;
        align-self: center !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;

        object-fit: contain !important;
        object-position: right center !important;
    }
}


/* Prevent horizontal page scrolling */
html,
body {
    overflow-x: clip;
}


@media (max-width: 1024px) {

    /* Prevent the hero background from extending into the header */
    .elementor .top-page-wrapper.top-page-wrapper::before,
    .elementor .top-page-wrapper.top-page-wrapper::after {
        top: 0 !important;
    }
}



/* Folded container */
.folded-container {
    --fold-size: clamp(70px, 9vw, 130px);
    --fold-content-space: clamp(35px, 4.5vw, 65px);
    --fold-content-gap: 8px;
    --border-color: #9271c5;
    --border-width: 1px;
    --container-bg: #100d19;
    --top-left-radius: clamp(28px, 3vw, 44px);
    --bottom-radius: clamp(28px, 3vw, 44px);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;

    /* Keep content away from the folded corner */
    padding-right: calc(var(--fold-content-space) + var(--fold-content-gap)) !important;

    background-color: var(--container-bg);
    background-image: url('/1710438811828/wp-content/uploads/2026/07/folded-container-bg.svg');
    background-repeat: no-repeat;
    background-position: center 24%;
    background-size: 100% auto;

    border-radius:
        var(--top-left-radius)
        0
        var(--bottom-radius)
        var(--bottom-radius);

    clip-path: polygon(
        0 0,
        calc(100% - var(--fold-size)) 0,
        100% var(--fold-size),
        100% 100%,
        0 100%
    );
}

/* Container outline */
.folded-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: var(--border-width);

    background: var(--border-color);

    border-radius:
        var(--top-left-radius)
        0
        var(--bottom-radius)
        var(--bottom-radius);

    clip-path: polygon(
        0 0,
        calc(100% - var(--fold-size)) 0,
        100% var(--fold-size),
        100% 100%,
        0 100%
    );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

/* Folded corner outline */
.folded-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;

    width: var(--fold-size);
    height: var(--fold-size);

    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'>\
  <path d='M0 0 L120 120' stroke='%239271c5' stroke-width='1.5' vector-effect='non-scaling-stroke'/>\
  <path d='M0 0 L0 58 C0 96 24 120 64 120 L120 120' stroke='%239271c5' stroke-width='1.5' vector-effect='non-scaling-stroke'/>\
</svg>");
}

/* Mobile */
@media (max-width: 767px) {
    .folded-container {
        --fold-size: 64px;
        --fold-content-space: 32px;
        --fold-content-gap: 4px;
        --top-left-radius: 28px;
        --bottom-radius: 28px;

        padding-right: calc(var(--fold-content-space) + var(--fold-content-gap)) !important;

        background-position: center 20%;
        background-size: 115% auto;
    }
}



.gradient-border-container{
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 8px 24px -4px rgba(90, 63, 186, 0.35);
    background-image: 
        linear-gradient(#0d0d0d, #0d0d0d),
        radial-gradient(300% 300% at 88% 36%, #EEE2FF 0%, #53308D 26%, #262728 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;

}


.tabs-gradient-border-container .jet-tabs__control-wrapper {
    position: relative;
    isolation: isolate;
    border-radius: 24px;
    box-shadow: 0 8px 24px -4px rgba(90, 63, 186, 0.35);
}

.tabs-gradient-border-container .jet-tabs__control-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        300% 300% at 88% 36%,
        #EEE2FF 0%,
        #53308D 26%,
        #262728 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}