.elementor-10 .elementor-element.elementor-element-72eeca6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-c484ecc{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-f7cee0c{--display:flex;}.elementor-10 .elementor-element.elementor-element-2722c81{text-align:center;}.elementor-10 .elementor-element.elementor-element-2722c81 .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-30a11b6{text-align:center;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-f9b6891{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-6dc3a69{--display:flex;}.elementor-10 .elementor-element.elementor-element-056b5aa{--display:flex;}.elementor-10 .elementor-element.elementor-element-1a71385{--display:flex;}.elementor-10 .elementor-element.elementor-element-7e49cab{--display:flex;}.elementor-10 .elementor-element.elementor-element-3f6d41b{--display:flex;}.elementor-10 .elementor-element.elementor-element-3a99604{--display:flex;}.elementor-10 .elementor-element.elementor-element-ceaff51{--display:flex;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-328329f{--display:flex;}.elementor-10 .elementor-element.elementor-element-7fb86fe{--display:flex;}.elementor-10 .elementor-element.elementor-element-406134a .elementor-heading-title{color:#111111;}.elementor-10 .elementor-element.elementor-element-f5d148c{--display:flex;}.elementor-10 .elementor-element.elementor-element-4609242{--display:flex;}.elementor-10 .elementor-element.elementor-element-bbd7e24{--display:flex;}.elementor-10 .elementor-element.elementor-element-6d7aada{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */:root {
    --pie-size: min(80vw, 700px) !important;
    --ring-gap: 60px !important;
    --ring-size: calc(var(--pie-size) + var(--ring-gap) * 2) !important;
    --shared-center-y: 90vh !important;
}

/* ===========================================
GLOBAL TYPOGRAPHY
=========================================== */

body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

/* ===========================================
MAIN HERO
=========================================== */

#mainhero.main-container {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    color: #fff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    isolation: isolate !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#mainhero.main-container .e-con,
#mainhero.main-container .e-con-inner {
    --gap: 0px !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

#mainhero.main-container .bg-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    transition:
        background-color 0.8s cubic-bezier(0.65, 0, 0.35, 1),
        background-image 0.8s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* ===========================================
INFO LAYER
=========================================== */

#mainhero.main-container .info-layer {
    position: absolute !important;
    top: 10% !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 10 !important;
}

#mainhero.main-container .info-layer > .e-con-inner {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
}

#mainhero.main-container .text-content {
    text-align: center !important;
    max-width: 40% !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#mainhero.main-container .title {
    margin-bottom: 20px !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    overflow: visible !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

#mainhero.main-container .title h1 {
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

#mainhero.main-container .description {
    width: 100% !important;
    overflow: visible !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #eee!important;
}

#mainhero.main-container .description p {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ===========================================
NAVIGATION
=========================================== */

#mainhero.main-container .nav-layer {
    position: absolute !important;
    top: 55% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
    z-index: 10 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

#mainhero.main-container .nav-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#mainhero.main-container .nav-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* ===========================================
FLAVOR DATA
=========================================== */

#mainhero.main-container .flavors-data,
#mainhero.main-container #flavors-data {
    display: none !important;
}

/* ===========================================
CIRCLE CONTAINER
=========================================== */

#mainhero.main-container .circle-container {
    position: absolute !important;
    left: 50% !important;
    top: var(--shared-center-y) !important;
    width: var(--ring-size) !important;
    height: var(--ring-size) !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 6 !important;
    display: block !important;
}

/* ===========================================
RING
=========================================== */

#mainhero.main-container .ring {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: block !important;
}

#mainhero.main-container .flavor-item {
    position: absolute !important;
    top: -40px !important;
    left: 50% !important;
    transform-origin: 50% calc(var(--ring-size) / 2 + 40px) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
    margin-left: -50px !important;
    width: 100px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
#mainhero.main-container .flavor-char {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 30px !important;
    margin-left: -15px !important;
    text-align: center !important;
    color: #ccc !important;
    transition: color 0.2s ease !important;
    transform-origin: 50% calc(var(--ring-size) / 2 + 40px) !important;
}

#mainhero.main-container .flavor-item:hover .flavor-char {
    color: #ddd !important;
}

#mainhero.main-container .flavor-item.active .flavor-char {
    color: #fff !important;
    font-weight: 600 !important;
}

/* ===========================================
INDICATOR RING
=========================================== */

#mainhero.main-container .indicator-ring {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 50% !important;
    display: block !important;
}

/* ===========================================
INDICATOR DOT
=========================================== */

#mainhero.main-container .indicator-dot {
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

/* ===========================================
HERO LAYER
=========================================== */

#mainhero.main-container .hero-layer {
    position: absolute !important;
    top: var(--shared-center-y) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: var(--pie-size) !important;
    height: var(--pie-size) !important;
    max-width: none !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ===========================================
PIE CONTAINER
=========================================== */

#mainhero.main-container .pie-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    display: block !important;
}

#mainhero.main-container .pie-container > .elementor-widget,
#mainhero.main-container .hero-pie.elementor-widget {
    display: none !important;
}

#mainhero.main-container img.hero-pie {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    transform-origin: center center !important;
}

/* ===========================================
TABLET + MOBILE
=========================================== */

@media (max-width: 1024px) {

    :root {
        --pie-size: min(80vw, 700px) !important;
        --ring-gap: 20px !important;
        --ring-size: calc(var(--pie-size) + var(--ring-gap) * 2) !important;
        --shared-center-y: 100vh !important;
    }

    #mainhero.main-container .indicator-dot {
        display: none !important;
    }

    #mainhero.main-container .text-content {
        max-width: 90% !important;
        padding: 0 15px !important;
    }

    #mainhero.main-container .bg-overlay {
        width: 100% !important;
        height: 100% !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }
}/* End custom CSS */