:root {
    --DARK-GREY: #181E14;
    --LIGHT-GREY: #B4B4B4;
    --MEDIUM-GREY: #797979;
    --GREY-200: #C3C3C3;
    --GREY-100: #E8E8E8;
    --NEUTRAL: #EBEBEB;
    --OLIVE: #B0B028;
    --LIME-OLIVE: #D5D54C;
    --LIGHT-OLIVE: #E0E0A7;
    --LIGHT-CREAM: #F7F7E9;
    --DARK-OLIVE: #707100;


    --DARK-GREEN: #1B4B38;
    --ARMY-GREEN: #47470E;

    --DARK-TEAL: #06313D;
    --BLUE: #455581;
    --BRIGHT-BLUE: #0E7B98;
    --LIGHT-BLUE: #ACDBE7;
    --BABY-BLUE: #CBD4E8;

    --BROWN: #9E7C63;
    --NUDE-BROWN: #EAD1B8;
    --NUDE: #F5F2EF;
    

    --WHITE: #FFFFFF;
    --WHITE-500: #F4F6F9;
    --WHITE-600: #F6F6F6;
    --WHITE-700: #F7F7F7;
    --SOFT-LATTE: #F2F2C5;
    --SOFT-IVORY: #F7F7E0;
    
    --RED: #FF3333;

    --wpforms-button-background-color: #E0E0A7!important;
    --wpforms-button-border-color: #E0E0A7!important;
    --wpforms-page-break-color: #E0E0A7!important;

    --MAX-CONTENT: 107rem;
    --SIDE-MARGIN: auto;
    --Z-BOTTOM: -10000;
    --Z-TOP: 10000;
}
.container {
    max-width: var(--MAX-CONTENT);
    margin: 0 var(--SIDE-MARGIN);
    padding: 0 1rem;
}
html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Cervo Regular';
}
a, ins{
    text-decoration: unset;
}
.main-btn:hover .btn__text{
    color: var(--WHITE)!important;
}
.main-btn.grey:hover .btn__elipse{
    filter: brightness(0) invert(1);
}
.main-btn.grey:hover{
    background-color: var(--BLUE);
}
.main-btn.olive:hover{
    background-color: var(--DARK-GREEN);
}
.main-btn.grey{
    background-color: var(--NEUTRAL);
}
.main-btn.olive{
    background-color: var(--OLIVE);
}
.main-btn .btn__union {
    display: block;                  /* fill the wrapper */
    width: 100%;
    height: 100%;
    object-fit: contain;             /* preserves aspect ratio */
    border-radius: 0;                /* reset any rounding */
}
.main-btn .btn__elipse {
    display: inline-block;
    width: 6px;
    height: 6px;
    justify-content: center;
    margin-left: 3.5em;
    top: -2px;
    position: relative;
}
.main-btn .btn__icon {
    display: inline-flex;            /* allow centering & sizing */
    width: 22px;
    height: 22px;
    padding: 4px;
    background-color: var(--WHITE);
    box-shadow: inset 0 0 0 3px #ffffff;
    border-radius: 50%;              /* perfect circle */
    align-items: center;             /* center the img */
    justify-content: center;
    margin-left: 0.5em;              /* space from text, optional */
}
html[lang="ja"] .main-btn .btn__text{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 22px;
    color: var(--DARK-GREY);
}
html[lang="en-GB"] .main-btn .btn__text{
    font-family: 'Cervo Medium';
    font-size: 22px;
    color: var(--DARK-GREY);
}
.main-btn{
    padding: 12px 30px;
    border-radius: 30px;
    transition: all 0.2s;
    height: 49px;
    border: unset;
}
.btn-outline{
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.btn-outline:hover .btn__ellipse-hover{
    display: block;
}
.btn-outline:hover .btn__ellipse{
    display: none;
}
.btn-outline:hover .btn__text{
    color: var(--LIGHT-GREY)!important;
}
.btn-outline .btn__ellipse-hover{
    display: none;
}
html[lang="ja"] .btn-outline .btn__text{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 14px;
    color: var(--DARK-GREY);
    transition: all 0.2s;
}
html[lang="en-GB"] .btn-outline .btn__text{
    font-family: 'Cervo Regular';
    font-size: 18px;
    color: var(--DARK-GREY);
    transition: all 0.2s;
}
.main-btn-dark .btn__text{
    font-family: 'Cervo Regular';
    font-size: 18px;
    color: var(--WHITE);
}
.main-btn-dark:hover {
    background-color: var(--OLIVE);
}
.main-btn-dark {
    background-color: var(--DARK-TEAL);
    border-radius: 8px;
    padding: 8px 40px;
    transition: all 0.2s;
    border: unset;
}

@font-face {
    font-family: 'Cervo Light';
    src: url('../assets/fonts/Cervo Light.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cervo Regular';
    src: url('../assets/fonts/Cervo Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cervo Medium';
    src: url('../assets/fonts/Cervo Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Animation */
.slice-title {
    overflow: hidden;
}

.title-line {
    overflow: hidden;
}

.title-line span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

.slice-title.is-active .title-line:nth-child(1) span {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
}

.slice-title.is-active .title-line:nth-child(2) span {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.4s;
}
.slice-title.is-active .title-line:nth-child(3) span {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.4s;
}