[data-theme='mangomarakuja']{
    --font-primary:'Muller', 'Times New Roman', Times, serif;
    --font-heading:'Forever Grateful', Impact;
    --font-hagin:'Hagin Caps', 'Times New Roman', Times, serif;
    --tonik-green:#0b5b4a;
    --tonik-yellow:#e9b244
}
    [data-theme='mangomarakuja'] body {
        background-color: #ce3b6d;
        overflow-x: initial;
        overflow-x: hidden;
        padding-top: 10rem
    }
[data-theme='mangomarakuja'] .fixed-bg{
    background-color:transparent;
    background-image:url(/images/tonik/bg-pattern.svg)
}
.color-tonik-yellow{
    color:var(--tonik-yellow)
}
.ff-heading{
    font-family:var(--font-heading) !important
}
.ff-hagin{
    font-family:var(--font-hagin) !important
}
.fs-h1 {
    font-size: 5.8rem;
    margin: 0;
}
@media (min-width: 768px){
    .fs-h1 {
        font-size: 9rem;
        margin: 0;
    }
}
@media (min-width: 1024px){
    .fs-h1 {
        font-size: 12rem;
        margin: 0;
    }
}
@media (min-width: 1280px){
    .fs-h1 {
        font-size: 17rem;
        margin:0;
    }
}
.mangomarakuja-content{
    position:relative;
    z-index:1;
    font-family:var(--font-primary);
    font-size:1rem;
    line-height:1.5;
    display:grid;
    color:#fff
}
.mangomarakuja-content img{
    display:block;
    max-width:100%
}
.mangomarakuja-content section{
    position:relative;
    min-width:100%;
    min-height:100vh;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.mangomarakuja-content section h2{
    font-family:var(--font-heading);
    font-size:4rem
}
@media (min-width: 1024px){
    .mangomarakuja-content section h2{
        font-size:4.8rem
    }
}
.mangomarakuja-content section p{
    font-family:inherit;
    line-height:1.5;
    font-size:1.8rem
}
@media (min-width: 768px){
    .mangomarakuja-content section p{
        font-size:2.6rem
    }
}
.mangomarakuja-content section .intro {
    font-size: 4rem;
    margin: 0;
}
@media (min-width: 768px){
    .mangomarakuja-content section .intro {
        font-size: 7rem;
    }
}
@media (min-width: 1024px){
    .mangomarakuja-content section .intro {
        font-size: 9rem;
    }
}
@media (min-width: 1280px){
    .mangomarakuja-content section .intro {
        font-size: 14rem;
    }
}
.mangomarakuja-content .landing-container{
    width:83.3333333333%;
    max-width:140rem;
    margin-inline:auto;
    padding-inline:1rem
}
@media (min-width: 1024px){
    .mangomarakuja-content .flex{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-direction:row;
        flex-direction:row;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
}
.mangomarakuja-content .flex-2{
    -ms-flex-preferred-size:60%;
    flex-basis:60%;
    padding-inline:1.6rem
}
.mangomarakuja-content .flex-1{
    -ms-flex-preferred-size:40%;
    flex-basis:40%;
    padding-inline:1.6rem
}
.mangomarakuja-content .images{
    position: relative
}
.mangomarakuja-content .images-floating{
    position:absolute;
    bottom:15%;
    right:0;
    z-index:-1;
}
.rotate-5{
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
.mangomarakuja-header {
    position:absolute;
    width:100%;
    top: -10rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:start;
    overflow:hidden
}
.mangomarakuja-header-jumper{
    width: clamp(180px, 50vw, 240px);
}
@media (min-width: 768px){
    img.mangomarakuja-header-jumper{
        display:none
    }
}
img.mangomarakuja-header-jumpers {
    max-width:50vw;
    display:none
}
@media (min-width: 768px){
    img.mangomarakuja-header-jumpers{
        display:block;
        margin-top:-10%;
        margin-left:-25%
    }
}
img.mangomarakuja-header-umbrella{
    max-width:100vw;
    -webkit-transform:translateY(-10%);
    transform:translateY(-10%)
}
@media (min-width: 1024px){
    img.mangomarakuja-header-umbrella {
        -webkit-transform: translate(5%, -5%);
        transform:translate(5%, -5%)
    }
}
.mangomarakuja-footer{
    position:relative;
    overflow-y:hidden;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:end;
    -ms-flex-align:end;
    align-items:end
}

@media (min-width: 640px){
    .mangomarakuja-footer-mobile{
        display:none !important
    }
}
.mangomarakuja-triptych {
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 3fr;
    width: clamp(30rem, 100%, 160rem);
}
.mangomarakuja-triptych-first img {
    margin-left: auto;
    margin-right: -25%;
}
.mangomarakuja-triptych-second img {
    margin-right: auto;
    margin-left: -25%;
}

@media (max-width: 767px) {
    .mangomarakuja-header{
        inset: 0;
        overflow: visible;
    }

    .mangomarakuja-header #jumpers {
        top: 0;
        position: absolute;
        left: 50%;
        transform: translate(-60%, -13%);
        display: none;
    }

    .mangomarakuja-header #jumpers img {
        max-height: 28vh;
        min-height: 160px;
        width: auto;
    }

    .mangomarakuja-header #umbrella {
        bottom: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 7%);
    }

    .mangomarakuja-header #umbrella img {
        max-height: 37vh;
        min-height: 200px;
    }

    .mangomarakuja-content .landing-container {
        text-align: center;
    }

   .mangomarakuja-content .mangomarakuja-hero {
        min-height: 520px;
        height: calc(100dvh - 10rem);
        padding-block: 10rem;
        justify-content: flex-start;
    }

    .mangomarakuja-triptych {
        grid-template-columns: 1fr;
        position: relative;
    }

    .mangomarakuja-triptych-first {
        position: absolute;
        top: 12rem;
    }

    .mangomarakuja-triptych-first img {
        max-width: clamp(200px, 40vw, 420px);
        margin-right: -15%;
    }

    .mangomarakuja-triptych-second img {
        margin: 0 0 0 auto;
        max-width: clamp(300px, 85vw, 620px);
    }

    .mangomarakuja-content .images {
        display: none;
    }

    .mangomarakuja-footer {
        flex-direction: column-reverse;
    }

    .mangomarakuja-footer-bottles img {
        width: clamp(320px, 80%, 560px);
        margin: 0 auto;
    }

}