*,
:before,
:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    font-size: 10px;
}

body {
    height: 100%;
    width: 100%;
    font-family: Bellota, sans-serif!important;
    font-size: 1.6rem;
    font-weight: 100;
}

.bellota {
    font-family: Bellota, sans-serif;
}

.recoleta,
h1,
h2,
h3,
h4 {
    font-family: Recoleta, sans-serif;
}

main {
    min-height: 100vh;
}

img {
    max-width: 100%;
}

.fullView {
    height: 100vh;
    width: 100vw;
}

@media (max-width: 768px) {
    .fullView {
        height: unset;
        min-height: 100vh;
    }
}

.section {
    max-width: 100%;
    overflow: hidden;
}

svg {
    max-width: 100%;
    display: inline-block;
}

body.mobile-nav-active {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

h2 {
    font-weight: 400;
}

.herobanner {
    width: 100%;
    min-height: 100vh;
    text-align: center;
    background-color: #fff9e1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
}

.herobanner:after {
    content: "";
    width: 110%;
    height: 100%;
    object-fit: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='1512' height='539' viewBox='0 0 1512 539' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1510.07 122.415C1502.65 145.444 1490.54 166.831 1480.18 191.675C1469.13 218.15 1447.26 245.406 1418.61 243.568C1390.92 241.788 1366.67 212.832 1340.27 221.355C1322.13 227.212 1314.15 247.68 1305.86 264.852C1284.24 309.716 1245.22 345.919 1198.86 364.147C1181.46 370.981 1162.61 375.403 1144.08 372.9C1107.45 367.949 1080.17 338.051 1054.57 311.415C1028.97 284.78 996.818 257.776 960.038 261.371C924.764 264.817 899.096 294.899 875.22 321.075C848.965 349.859 820.298 376.437 789.62 400.454C766.364 418.659 741.109 435.762 712.247 442.033C683.384 448.304 650.052 441.62 631.312 418.797C612.824 396.285 610.572 361.724 587.133 344.449C559.063 323.774 517.332 341.589 496.282 369.373C475.244 397.169 466.856 432.408 449.621 462.708C430.881 495.649 400.445 522.894 363.849 532.76C327.254 542.627 284.798 533.036 259.509 504.815C242.562 485.898 234.415 460.904 221.569 439.001C208.724 417.097 187.398 396.56 162.029 397.812C136.303 399.076 117.023 422.162 106.303 445.571C95.5825 468.979 89.6077 495.075 73.6137 515.256C60.9403 531.244 36.0532 544.487 15.5092 536.424C-5.03479 528.361 0.422921 519.942 0.422924 502.61L0.423013 -3.08008C-2.3001 -3.08008 -5.02321 -3.08008 -7.75781 -3.06859L1516.92 -3.06833C1516.94 24.7735 1516.98 52.6268 1517 80.4686C1517 95.6185 1514.3 109.275 1510.07 122.404L1510.07 122.415Z' fill='%23BEE4EC'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
}

@media screen and (max-width: 786px) {
    .herobanner:after {
        height: 20rem;
        width: 100%;
        background-size: cover;
        top: 0;
    }
}

@media screen and (max-width: 786px) {
    .herobanner {
        min-height: unset;
    }
}

.herobanner > div > svg,
.herobanner > div > img {
    z-index: 2;
    height: 65rem;
    max-width: 100%;
    object-fit: contain;
    display: block;
    position: relative;
}

@media screen and (max-width: 786px) {
    .herobanner > div > svg,
    .herobanner > div > img {
        height: auto;
        width: 100%;
        padding-top: 12rem;
        padding-bottom: 2rem;
    }
}

@media screen and (max-width: 991px) {
.navbar ul li a {
	padding: 0.5rem 5px!important;
}
}

.herobanner > div > img {
    display: none;
}

.herobanner > div > h2 {
    color: #346906;
    z-index: 2;
    margin-top: 2rem;
    font-family: Bellota, sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    display: block;
    position: relative;
}

.herobanner > div > h1 {
    color: #346906;
    z-index: 2;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
    position: relative;
}

@media screen and (max-width: 786px) {
    .herobanner > div > h1 {
        font-size: 3.6rem;
    }
}

.tasty {
    background-color: #fff9e1;
    padding: 10vw 0 10vw 10vw;
}

@media screen and (max-width: 786px) {
    .tasty {
        padding: 6rem 7.5vw;
    }
}

.tasty > div {
    transform-origin: center;
    align-items: center;
    display: flex;
}

@media screen and (max-width: 786px) {
    .tasty > div {
        flex-direction: column;
        align-items: flex-start;
    }
}

.tasty > div > p {
    color: #346906;
    font-size: 4rem;
}

@media screen and (max-width: 786px) {
    .tasty > div > p {
        text-align: center;
        margin-bottom: 1.2rem;
        font-size: 3.2rem;
    }
}

.tasty div.input-wrapper {
    min-width: 8rem;
    margin-left: 2.4rem;
    display: block;
    position: relative;
}

@media screen and (max-width: 786px) {
    .tasty div.input-wrapper {
        margin: 0;
    }
}

.tasty div.input-wrapper:before {
    content: "";
    width: 16rem;
    height: 16rem;
    transform-origin: 0;
    background-color: #e2eab3;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-10%, -50%) scale(1.3);
}

@media screen and (max-width: 786px) {
    .tasty div.input-wrapper:before {
        width: 4rem;
        height: 4rem;
    }
}

.tasty div.input-wrapper > .placeholder {
    appearance: none;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    color: #346906;
    background-color: #0000;
    border: none;
    font-family: Recoleta, sans-serif;
    font-size: 7.2rem;
    line-height: 1;
    display: block;
    position: relative;
}

@media screen and (max-width: 786px) {
    .tasty div.input-wrapper > .placeholder {
        font-size: 3.6rem;
    }
}

.tasty div.input-wrapper > .placeholder:before,
.tasty div.input-wrapper > .placeholder:after {
    text-transform: lowercase;
    white-space: nowrap !important;
}

.tasty div.input-wrapper > .placeholder:before {
    content: "​";
    content: "​" / "Tasty";
    alt: "Tasty";
    white-space: break-spaces;
    will-change: content;
    animation: typed-0 13.04s linear 1s infinite forwards;
}

.tasty div.input-wrapper > .placeholder:after {
    content: "​";
    white-space: nowrap;
    border-right: 2px solid;
    padding-right: 2px;
    animation: typed-0-caret 0.75s linear 1s infinite forwards;
    display: inline-block;
    position: relative;
}

@keyframes typed-0 {
    0%,
    .510247% {
        content: "​T";
        content: "​T" / "Tasty";
        alt: "Tasty";
    }

    .511247%,
    1.02149% {
        content: "​Ta";
        content: "​Ta" / "Tasty";
        alt: "Tasty";
    }

    1.02249%,
    1.53274% {
        content: "​Tas";
        content: "​Tas" / "Tasty";
        alt: "Tasty";
    }

    1.53374%,
    2.04399% {
        content: "​Tast";
        content: "​Tast" / "Tasty";
        alt: "Tasty";
    }

    2.04499%,
    13.1892% {
        content: "​Tasty";
        content: "​Tasty" / "Tasty";
        alt: "Tasty";
    }

    13.1902%,
    13.5982% {
        content: "​Tast";
        content: "​Tast" / "Tasty";
        alt: "Tasty";
    }

    13.5992%,
    14.0072% {
        content: "​Tas";
        content: "​Tas" / "Tasty";
        alt: "Tasty";
    }

    14.0082%,
    14.4162% {
        content: "​Ta";
        content: "​Ta" / "Tasty";
        alt: "Tasty";
    }

    14.4172%,
    14.8252% {
        content: "​T";
        content: "​T" / "Tasty";
        alt: "Tasty";
    }

    14.8262%,
    19.9377% {
        content: "​";
        content: "​" / "Tasty";
        alt: "Tasty";
    }

    19.9387%,
    20.4489% {
        content: "​W";
        content: "​W" / "Tasty";
        alt: "Tasty";
    }

    20.4499%,
    20.9601% {
        content: "​Wa";
        content: "​Wa" / "Tasty";
        alt: "Tasty";
    }

    20.9611%,
    21.4714% {
        content: "​Wal";
        content: "​Wal" / "Tasty";
        alt: "Tasty";
    }

    21.4724%,
    21.9826% {
        content: "​Wall";
        content: "​Wall" / "Tasty";
        alt: "Tasty";
    }

    21.9836%,
    22.4939% {
        content: "​Walle";
        content: "​Walle" / "Tasty";
        alt: "Tasty";
    }

    22.4949%,
    23.0051% {
        content: "​Wallet";
        content: "​Wallet" / "Tasty";
        alt: "Tasty";
    }

    23.0061%,
    23.5164% {
        content: "​Wallet-";
        content: "​Wallet-" / "Tasty";
        alt: "Tasty";
    }

    23.5174%,
    24.0276% {
        content: "​Wallet-f";
        content: "​Wallet-f" / "Tasty";
        alt: "Tasty";
    }

    24.0286%,
    24.5389% {
        content: "​Wallet-fr";
        content: "​Wallet-fr" / "Tasty";
        alt: "Tasty";
    }

    24.5399%,
    25.0501% {
        content: "​Wallet-fri";
        content: "​Wallet-fri" / "Tasty";
        alt: "Tasty";
    }

    25.0511%,
    25.5614% {
        content: "​Wallet-frie";
        content: "​Wallet-frie" / "Tasty";
        alt: "Tasty";
    }

    25.5624%,
    26.0726% {
        content: "​Wallet-frien";
        content: "​Wallet-frien" / "Tasty";
        alt: "Tasty";
    }

    26.0736%,
    26.5839% {
        content: "​Wallet-friend";
        content: "​Wallet-friend" / "Tasty";
        alt: "Tasty";
    }

    26.5849%,
    27.0951% {
        content: "​Wallet-friendl";
        content: "​Wallet-friendl" / "Tasty";
        alt: "Tasty";
    }

    27.0961%,
    38.2403% {
        content: "​Wallet-friendly";
        content: "​Wallet-friendly" / "Tasty";
        alt: "Tasty";
    }

    38.2413%,
    38.6493% {
        content: "​Wallet-friendl";
        content: "​Wallet-friendl" / "Tasty";
        alt: "Tasty";
    }

    38.6503%,
    39.0583% {
        content: "​Wallet-friend";
        content: "​Wallet-friend" / "Tasty";
        alt: "Tasty";
    }

    39.0593%,
    39.4673% {
        content: "​Wallet-frien";
        content: "​Wallet-frien" / "Tasty";
        alt: "Tasty";
    }

    39.4683%,
    39.8763% {
        content: "​Wallet-frie";
        content: "​Wallet-frie" / "Tasty";
        alt: "Tasty";
    }

    39.8773%,
    40.2853% {
        content: "​Wallet-fri";
        content: "​Wallet-fri" / "Tasty";
        alt: "Tasty";
    }

    40.2863%,
    40.6943% {
        content: "​Wallet-fr";
        content: "​Wallet-fr" / "Tasty";
        alt: "Tasty";
    }

    40.6953%,
    41.1033% {
        content: "​Wallet-f";
        content: "​Wallet-f" / "Tasty";
        alt: "Tasty";
    }

    41.1043%,
    41.5123% {
        content: "​Wallet-";
        content: "​Wallet-" / "Tasty";
        alt: "Tasty";
    }

    41.5133%,
    41.9213% {
        content: "​Wallet";
        content: "​Wallet" / "Tasty";
        alt: "Tasty";
    }

    41.9223%,
    42.3303% {
        content: "​Walle";
        content: "​Walle" / "Tasty";
        alt: "Tasty";
    }

    42.3313%,
    42.7393% {
        content: "​Wall";
        content: "​Wall" / "Tasty";
        alt: "Tasty";
    }

    42.7403%,
    43.1483% {
        content: "​Wal";
        content: "​Wal" / "Tasty";
        alt: "Tasty";
    }

    43.1493%,
    43.5573% {
        content: "​Wa";
        content: "​Wa" / "Tasty";
        alt: "Tasty";
    }

    43.5583%,
    43.9663% {
        content: "​W";
        content: "​W" / "Tasty";
        alt: "Tasty";
    }

    43.9673%,
    49.0788% {
        content: "​";
        content: "​" / "Tasty";
        alt: "Tasty";
    }

    49.0798%,
    49.59% {
        content: "​H";
        content: "​H" / "Tasty";
        alt: "Tasty";
    }

    49.591%,
    50.1013% {
        content: "​He";
        content: "​He" / "Tasty";
        alt: "Tasty";
    }

    50.1023%,
    50.6125% {
        content: "​Hea";
        content: "​Hea" / "Tasty";
        alt: "Tasty";
    }

    50.6135%,
    51.1237% {
        content: "​Heal";
        content: "​Heal" / "Tasty";
        alt: "Tasty";
    }

    51.1247%,
    51.635% {
        content: "​Healt";
        content: "​Healt" / "Tasty";
        alt: "Tasty";
    }

    51.636%,
    52.1462% {
        content: "​Health";
        content: "​Health" / "Tasty";
        alt: "Tasty";
    }

    52.1472%,
    63.2914% {
        content: "​Healthy";
        content: "​Healthy" / "Tasty";
        alt: "Tasty";
    }

    63.2924%,
    63.7004% {
        content: "​Health";
        content: "​Health" / "Tasty";
        alt: "Tasty";
    }

    63.7014%,
    64.1094% {
        content: "​Healt";
        content: "​Healt" / "Tasty";
        alt: "Tasty";
    }

    64.1104%,
    64.5184% {
        content: "​Heal";
        content: "​Heal" / "Tasty";
        alt: "Tasty";
    }

    64.5194%,
    64.9274% {
        content: "​Hea";
        content: "​Hea" / "Tasty";
        alt: "Tasty";
    }

    64.9284%,
    65.3364% {
        content: "​He";
        content: "​He" / "Tasty";
        alt: "Tasty";
    }

    65.3374%,
    65.7454% {
        content: "​H";
        content: "​H" / "Tasty";
        alt: "Tasty";
    }

    65.7464%,
    70.8579% {
        content: "​";
        content: "​" / "Tasty";
        alt: "Tasty";
    }

    70.8589%,
    71.3691% {
        content: "​P";
        content: "​P" / "Tasty";
        alt: "Tasty";
    }

    71.3701%,
    71.8804% {
        content: "​Pl";
        content: "​Pl" / "Tasty";
        alt: "Tasty";
    }

    71.8814%,
    72.3916% {
        content: "​Pla";
        content: "​Pla" / "Tasty";
        alt: "Tasty";
    }

    72.3926%,
    72.9029% {
        content: "​Plan";
        content: "​Plan" / "Tasty";
        alt: "Tasty";
    }

    72.9039%,
    73.4141% {
        content: "​Plane";
        content: "​Plane" / "Tasty";
        alt: "Tasty";
    }

    73.4151%,
    73.9254% {
        content: "​Planet";
        content: "​Planet" / "Tasty";
        alt: "Tasty";
    }

    73.9264%,
    74.4366% {
        content: "​Planet-";
        content: "​Planet-" / "Tasty";
        alt: "Tasty";
    }

    74.4376%,
    74.9479% {
        content: "​Planet-f";
        content: "​Planet-f" / "Tasty";
        alt: "Tasty";
    }

    74.9489%,
    75.4591% {
        content: "​Planet-fr";
        content: "​Planet-fr" / "Tasty";
        alt: "Tasty";
    }

    75.4601%,
    75.9704% {
        content: "​Planet-fri";
        content: "​Planet-fri" / "Tasty";
        alt: "Tasty";
    }

    75.9714%,
    76.4816% {
        content: "​Planet-frie";
        content: "​Planet-frie" / "Tasty";
        alt: "Tasty";
    }

    76.4826%,
    76.9929% {
        content: "​Planet-frien";
        content: "​Planet-frien" / "Tasty";
        alt: "Tasty";
    }

    76.9939%,
    77.5041% {
        content: "​Planet-friend";
        content: "​Planet-friend" / "Tasty";
        alt: "Tasty";
    }

    77.5051%,
    78.0154% {
        content: "​Planet-friendl";
        content: "​Planet-friendl" / "Tasty";
        alt: "Tasty";
    }

    78.0164%,
    89.1606% {
        content: "​Planet-friendly";
        content: "​Planet-friendly" / "Tasty";
        alt: "Tasty";
    }

    89.1616%,
    89.5696% {
        content: "​Planet-friendl";
        content: "​Planet-friendl" / "Tasty";
        alt: "Tasty";
    }

    89.5706%,
    89.9786% {
        content: "​Planet-friend";
        content: "​Planet-friend" / "Tasty";
        alt: "Tasty";
    }

    89.9795%,
    90.3876% {
        content: "​Planet-frien";
        content: "​Planet-frien" / "Tasty";
        alt: "Tasty";
    }

    90.3886%,
    90.7966% {
        content: "​Planet-frie";
        content: "​Planet-frie" / "Tasty";
        alt: "Tasty";
    }

    90.7976%,
    91.2055% {
        content: "​Planet-fri";
        content: "​Planet-fri" / "Tasty";
        alt: "Tasty";
    }

    91.2065%,
    91.6146% {
        content: "​Planet-fr";
        content: "​Planet-fr" / "Tasty";
        alt: "Tasty";
    }

    91.6155%,
    92.0235% {
        content: "​Planet-f";
        content: "​Planet-f" / "Tasty";
        alt: "Tasty";
    }

    92.0245%,
    92.4325% {
        content: "​Planet-";
        content: "​Planet-" / "Tasty";
        alt: "Tasty";
    }

    92.4335%,
    92.8415% {
        content: "​Planet";
        content: "​Planet" / "Tasty";
        alt: "Tasty";
    }

    92.8425%,
    93.2505% {
        content: "​Plane";
        content: "​Plane" / "Tasty";
        alt: "Tasty";
    }

    93.2515%,
    93.6595% {
        content: "​Plan";
        content: "​Plan" / "Tasty";
        alt: "Tasty";
    }

    93.6605%,
    94.0685% {
        content: "​Pla";
        content: "​Pla" / "Tasty";
        alt: "Tasty";
    }

    94.0695%,
    94.4775% {
        content: "​Pl";
        content: "​Pl" / "Tasty";
        alt: "Tasty";
    }

    94.4785%,
    94.8865% {
        content: "​P";
        content: "​P" / "Tasty";
        alt: "Tasty";
    }

    94.8875%,
    100% {
        content: "​";
        content: "​" / "Tasty";
        alt: "Tasty";
    }
}

@keyframes typed-0-caret {
    75% {
        border-color: #0000;
    }
}

.leftRight {
    width: 100%;
    display: flex;
}

@media screen and (max-width: 786px) {
    .leftRight {
        flex-direction: column;
    }
}

.leftRight .left {
    width: 50%;
}

@media screen and (max-width: 786px) {
    .leftRight .left {
        width: 100%;
    }
}

.leftRight .right {
    width: 50%;
}

@media screen and (max-width: 786px) {
    .leftRight .right {
        width: 100%;
    }
}

.products .leftRight {
    min-height: 100vh;
}

.products .leftRight > div {
    text-align: center;
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    display: flex;
}

.products .leftRight > div > h2 {
    font-size: 4.8rem;
    line-height: 1;
    display: block;
}

.products .leftRight > div > p {
    margin-top: 0.4rem;
    font-size: 2.4rem;
}

.products .leftRight > div > a {
    color: #fff;
    text-align: center;
    background-color: #0003;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 1.6rem;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

.products .leftRight > div > a:hover {
    background-color: #0006;
}

.products .leftRight .left {
    background-color: #72C974;
}

@media screen and (max-width: 786px) {
    .products .leftRight .left {
        padding: 6rem 7.5vw;
    }
}

.products .leftRight .right {
    background-color: #68ccf0;
}

@media screen and (max-width: 786px) {
    .products .leftRight .right {
        padding: 6rem 7.5vw;
    }
}

.science {
    background: #e2eab3;
}

.science .leftRight > div {
    color: #346906;
    flex-direction: column;
    display: flex;
}

.science .leftRight > div > h2 {
    max-width: 50rem;
    font-size: 4.8rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .science .leftRight > div > h2 {
        font-size: 3.6rem;
    }
}

.science .leftRight > div > p {
    color: #2e2b26;
    max-width: 54rem;
    margin-top: 0.4rem;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    line-height: 1.5;
}

.science .leftRight > div > a {
    width: auto;
    color: #fff;
    text-align: center;
    background-color: #346906;
    border-radius: 10px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

.science .leftRight > div > a:hover {
    background-color: #346906b3;
}

.science .leftRight .left {
    justify-content: center;
    align-items: center;
}

.science .leftRight .left img {
    display: block;
}

.science .leftRight .right {
    padding: 10vw 10vw 10vw 0;
}

@media screen and (max-width: 786px) {
    .science .leftRight .right {
        margin-top: -4rem;
        padding: 7.5vw 7.5vw 6rem;
    }
}

.planet {
    background-color: #fff9e1;
}

.planet .leftRight .left {
    height: 95vh;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .left {
        height: 100%;
    }
}

.planet .leftRight .left video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .left video {
        position: relative;
    }
}

.planet .leftRight .right {
    flex-direction: column;
    justify-content: center;
    padding-left: 5vw;
    padding-right: 5vw;
    display: flex;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right {
        padding: 6rem 7.5vw;
    }
}

.planet .leftRight .right > h2 {
    max-width: 54rem;
    color: #346906;
    font-size: 4.4rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right > h2 {
        font-size: 3.6rem;
    }
}

.planet .leftRight .right > ul {
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
}

.planet .leftRight .right > ul li {
    justify-content: space-between;
    display: flex;
    position: relative;
}

.planet .leftRight .right > ul li > span {
    color: #cf5d5e;
    margin-left: 4rem;
    font-family: Recoleta, sans-serif;
    font-size: 5.2rem;
    font-weight: 500;
    line-height: 1;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right > ul li > span {
        margin-left: 0;
        font-size: 3.2rem;
    }
}

.planet .leftRight .right > ul li > span > span {
    font-family: Bellota, sans-serif;
    line-height: 1;
    display: inline-block;
    transform: translateX(-8px);
}

.planet .leftRight .right > ul li > p {
    max-width: 100%;
    color: #2e2b26;
    font-size: 1.8rem;
}

.planet .leftRight .right > ul li > p span {
    color: #346906;
    font-weight: 700;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right > ul li > p {
        max-width: 65%;
        font-size: 1.4rem;
    }
}

.planet .leftRight .right > ul li:not(:last-of-type) {
    margin-bottom: 3.2rem;
}

.planet .leftRight .right > ul li:not(:last-of-type):before {
    content: "";
    width: 1px;
    height: 150%;
    background-color: #484848;
    position: absolute;
    top: calc(50% + 0.6rem);
    left: 0.55rem;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right > ul li:not(:last-of-type):before {
        display: none;
    }
}

.planet .leftRight .right > ul li:nth-last-of-type(1):before {
    content: "";
    width: 1px;
    height: 150%;
    background-color: #fff9e1;
    position: absolute;
    top: calc(50% + 0.6rem);
    left: 0.55rem;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right > ul li:nth-last-of-type(1):before {
        display: none;
    }
}

.planet .leftRight .right > ul li:after {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background-color: #cf5d5e;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 0.6rem);
    left: 0;
}

@media screen and (max-width: 786px) {
    .planet .leftRight .right > ul li:after {
        display: none;
    }
}

.planet .leftRight .right > a {
    z-index: 5;
    background-color: #cf5d5e;
    align-self: flex-start;
    position: relative;
}

.planet .leftRight .right > a:hover {
    background-color: #cf5d5eb3;
}

a.primaryBtn {
    color: #fff;
    text-align: center;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

.categories {
    background-color: #e2eab3;
    padding: 4rem 10vw;
}

@media screen and (max-width: 786px) {
    .categories {
        padding: 6rem 0;
    }
}

.categories > div h2 {
    color: #346906;
    text-align: center;
    margin-bottom: 6rem;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .categories > div h2 {
        margin-bottom: 2rem;
        padding-left: 7.5vw;
        padding-right: 7.5vw;
        font-size: 3.6rem;
    }
}

.categories > div ul {
    justify-content: space-between;
    list-style-type: none;
    display: flex;
}

@media screen and (max-width: 786px) {
    .categories > div ul {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

.categories > div ul li {
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}

@media screen and (max-width: 786px) {
    .categories > div ul li {
        width: 100%;
        min-width: 40%;
    }
}

.categories > div ul li img {
    width: 14rem;
    height: 14rem;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 786px) {
    .categories > div ul li img {
        width: 8rem;
        height: 8rem;
    }
}

.categories > div ul li span {
    color: #484848;
    margin-top: 2rem;
    font-family: Recoleta, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .categories > div ul li span {
        white-space: nowrap;
        font-size: 14px;
    }
}

.recepie > div {
    position: relative;
}

.recepie > div > h2 {
    color: #fff;
    text-align: center;
    z-index: 4;
    margin-bottom: 6rem;
    font-size: 4.4rem;
    font-weight: 400;
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 786px) {
    .recepie > div > h2 {
        font-size: 3.6rem;
        top: 2.8rem;
    }
}

.recepie > div ul {
    scroll-snap-type: x mandatory;
    list-style-type: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}

.recepie > div ul li {
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .recepie > div ul li {
        width: 100%;
        min-width: 90%;
    }
}

.recepie > div ul li img {
    /* height: 80rem; */
    object-fit: cover;
    width: 100%;
    width: 100%;
    transition: all 0.35s ease-in-out 50ms;
    display: block;
}

.recepie > div ul li h3 {
    width: auto;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    transition: all 0.35s ease-in-out;
    position: absolute;
    bottom: 8rem;
    left: 50%;
    transform: translateX(-50%) scale(1);
}

/* .recepie > div ul li:hover img {
  transform: scale(1.15);
} */

.recepie > div ul li:hover h3 {
    transform: translateX(-50%) scale(1.15);
}

.delivery {
    background: #ffca61;
    overflow: hidden;
}

.delivery > div {
    align-items: center;
    display: flex;
}

@media screen and (max-width: 786px) {
    .delivery > div {
        flex-direction: column;
    }
}

.delivery > div > h2 {
    color: #2e2b26;
    width: 35%;
    padding-left: 5vw;
    font-size: 4.4rem;
    font-weight: 400;
    transform: translateX(5vw);
}

@media screen and (max-width: 786px) {
    .delivery > div > h2 {
        width: 100%;
        text-align: center;
        padding: 4.8rem 0 7.5vw;
        transform: translateX(0) !important;
    }
}

.delivery > div > div {
    width: 65%;
    padding-top: 12rem;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .delivery > div > div {
        width: 100%;
        padding: 0 7.5vw;
    }
}

.delivery > div > div .scooterCircle {
    width: 60%;
    height: 0;
    z-index: 1;
    background-color: #fff9e1;
    border-radius: 50%;
    padding-bottom: 60%;
    position: absolute;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-30%);
}

.delivery > div > div > img {
    z-index: 4;
    width: 85%;
    display: block;
    position: relative;
}

@media screen and (max-width: 786px) {
    .delivery > div > div > img {
        width: 100%;
    }
}

.delivery > div > div > span {
    z-index: 3;
    display: block;
    position: absolute;
    bottom: 0;
    right: 10rem;
}

@media screen and (max-width: 786px) {
    .delivery > div > div > span {
        right: 0;
    }
}

.delivery > div > div > span > img {
    width: 20rem;
}

@media screen and (max-width: 786px) {
    .delivery > div > div > span > img {
        width: 10rem;
    }
}

.subscribe {
    background-color: #fff9e1;
    padding: 8rem 5vw;
}

@media screen and (max-width: 786px) {
    .subscribe {
        padding: 6rem 7.5vw;
    }
}

.subscribe > div {
    max-width: 90rem;
    margin: 0 auto;
}

.subscribe > div > h2 {
    text-align: center;
    color: #2e2b26;
    margin-bottom: 4rem;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .subscribe > div > h2 {
        font-size: 3.6rem;
    }
}

.subscribe > div > ul {
    max-width: 70rem;
    gap: 4rem;
    margin: 0 auto;
    list-style-type: none;
}

.subscribe > div > ul li img {
    max-height: 40rem;
    width: 100%;
    object-fit: contain;
    border-radius: 16px;
    margin-bottom: 1.2rem;
    padding: 4rem 2rem;
    display: block;
}

.subscribe > div > ul li h3 {
    font-size: 2.4rem;
    font-weight: 400;
}

.subscribe > div > ul li a {
    background-color: #346906;
    margin-top: 2.8rem;
}

.subscribe > div > ul li a:hover {
    background-color: #346906b3;
}

.subscribe > div > ul li:nth-of-type(1) img {
    background-color: #72c974;
}

.subscribe > div > ul li:nth-of-type(2) img {
    background-color: #68ccf0;
}

.subscribe > div > ul:nth-of-type(2) {
    max-width: 60rem;
    align-items: center;
}

@media screen and (max-width: 786px) {
    .subscribe > div > ul:nth-of-type(2) {
        flex-direction: row;
        justify-content: space-around;
    }
}

.subscribe > div > ul:nth-of-type(2) li img {
    height: 12rem;
    width: auto;
    background-color: #fff9e1;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 786px) {
    .subscribe > div > ul:nth-of-type(2) li img {
        height: 8rem;
    }
}

.subscribe > div > ul:nth-of-type(2) li a {
    background-color: #0000;
}

@media screen and (max-width: 786px) {
    .subscribe > div > ul:nth-of-type(2) li a {
        justify-content: center;
        align-items: center;
        display: flex;
    }
}

.subscribe > div > p {
    text-align: center;
    margin-top: 6.8rem;
    margin-bottom: 6rem;
    font-size: 2.8rem;
    line-height: 1;
    position: relative;
}

.subscribe > div > p span {
    z-index: 2;
    background-color: #fff9e1;
    padding: 0 0.8rem;
    position: relative;
}

.subscribe > div > p:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #2e2b26;
    position: absolute;
    top: calc(50% + 2px);
    left: 0;
}

.listone {
    visibility: hidden;
    display: inline-block;
}

.ppHero {
    position: relative;
    overflow: hidden;
}

.ppHero > div {
    height: 100vh;
    position: relative;
}

.ppHero > div img {
    width: 100%;
    display: block;
}

@media screen and (max-width: 786px) {
    .ppHero > div img {
        min-height: 100vh;
        object-fit: cover;
    }
}

.ppHero > div video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ppHero > div > h1 {
    color: #fff;
    font-size: 3.6rem;
    font-weight: 400;
    display: block;
    position: absolute;
    bottom: 5vw;
    right: 5vw;
}

@media screen and (max-width: 786px) {
    .ppHero > div > h1 {
        right: unset;
        padding-left: 5vw;
        display: none;
        left: 0;
    }
}

.ppDaily {
    background-color: #e6e8e9;
    padding-top: 2rem;
    padding-bottom: 3.2rem;
}

@media screen and (max-width: 786px) {
    .ppDaily {
        padding-top: 4rem;
    }
}

.ppDaily > div {
    padding: 5vw 0;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .ppDaily > div {
        padding: 0;
    }
}

.ppDaily > div h2 {
    max-width: 400px;
    text-align: center;
    margin: 0 auto;
    font-size: 4.4rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .ppDaily > div h2 {
        font-size: 3.6rem;
    }
}

.ppDaily > div ul {
    list-style-type: none;
}

@media screen and (max-width: 786px) {
    .ppDaily > div ul {
        margin-bottom: -8rem;
    }
}

.ppDaily > div ul li {
    max-width: 400px;
    text-align: center;
    margin: 0 auto;
    padding: 3.2rem 0;
}

@media screen and (max-width: 786px) {
    .ppDaily > div ul li:not(:nth-of-type(1)) {
        margin-top: -8rem;
    }
}

.ppDaily > div ul li > div h3 {
    font-size: 2.4rem;
    font-weight: 400;
}

.ppDaily > div ul li span {
    width: 40%;
    height: 50%;
    display: block;
    position: absolute;
}

@media screen and (max-width: 786px) {
    .ppDaily > div ul li span {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        left: 0;
        transform: none !important;
    }
}

.ppDaily > div ul li span img {
    object-fit: contain;
    object-position: center;
    display: block;
}

.ppDaily > div ul li:nth-of-type(2) h3 {
    color: #df9d43;
}

.ppDaily > div ul li:nth-of-type(2) span {
    z-index: 2;
    top: 0;
    left: 0;
    transform: translateY(35%);
}

.ppDaily > div ul li:nth-of-type(2) span img {
    object-position: left center;
}

.ppDaily > div ul li:nth-of-type(1) h3 {
    color: #e46a01;
}

.ppDaily > div ul li:nth-of-type(1) span {
    z-index: 2;
    top: 0;
    right: 0;
    transform: translateY(35%);
}

.ppDaily > div ul li:nth-of-type(1) span img {
    object-position: right center;
}

.ppDaily > div ul li:nth-of-type(4) h3 {
    color: #cebb72;
}

.ppDaily > div ul li:nth-of-type(4) span {
    z-index: 2;
    bottom: 0;
    left: 0;
    transform: translateY(18%);
}

.ppDaily > div ul li:nth-of-type(4) span img {
    object-position: left center;
}

.ppDaily > div ul li:nth-of-type(3) h3 {
    color: #6f3d2b;
}

.ppDaily > div ul li:nth-of-type(3) span {
    object-position: right center;
    z-index: 2;
    bottom: 0;
    right: 0;
    transform: translateY(18%);
}

.ppGlass > div img,
.ppReplace > div img {
    width: 100%;
    display: block;
}

.ppGreen > div {
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    padding: 0 7.5vw 7.5vw;
    display: flex;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ppGreen > div {
        justify-content: flex-start;
        padding: 6rem 7.5vw;
    }
}

.ppGreen > div > img,
.ppGreen > div > picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0;
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.ppGreen > div > img img,
.ppGreen > div > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.ppGreen > div > h2 {
    color: #c1d85a;
    margin-bottom: 4rem;
    font-size: 4.4rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .ppGreen > div > h2 {
        font-size: 3.6rem;
    }
}

.ppGreen > div > ul {
    list-style-type: none;
}

.ppGreen > div > ul > li:not(:last-of-type) {
    margin-bottom: 2rem;
}

.ppGreen > div > ul > li > h3 span:nth-of-type(1) {
    color: #fff;
    margin-right: 1.2rem;
    font-size: 3.6rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .ppGreen > div > ul > li > h3 span:nth-of-type(1) {
        font-size: 2.8rem;
    }
}

.ppGreen > div > ul > li > h3 span:nth-of-type(2) {
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .ppGreen > div > ul > li > h3 span:nth-of-type(2) {
        font-size: 1.6rem;
    }
}

.ppGreen > div > ul > li > p {
    color: #c1d85a;
    font-family: Recoleta, sans-serif;
    font-size: 2.4rem;
}

.ppChild {
    background-color: #fff9e1;
    padding: 7.5vw 7.5vw 0;
    display: none;
}

@media screen and (max-width: 786px) {
    .ppChild {
        padding-top: 6rem;
        display: block;
    }
}

.ppChild > img {
    width: 100%;
    margin: 4rem auto 6rem;
}

.ppChild > h2 {
    max-width: 550px;
    z-index: 2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 4.4rem;
    font-weight: 400;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ppChild > h2 {
        font-size: 3.6rem;
    }
}

@media screen and (max-width: 786px) {
    .hideMobile {
        display: none !important;
    }
}

.ppchild-row-1 {
    text-align: center;
    background-color: #fff9e1;
    margin: 0 auto;
}

.ppchild-row-1 > h2 {
    max-width: 550px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    font-size: 4.4rem;
    font-weight: 400;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ppchild-row-1 > h2 {
        font-size: 3.6rem;
    }
}

.ppchild-row-1 > h3 {
    color: #484848;
    z-index: 2;
    margin-top: 4rem;
    font-size: 3.2rem;
    font-weight: 400;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ppchild-row-1 > h3 {
        font-size: 2.4rem;
    }
}

.ppchild-row-1 > div {
    position: relative;
}

.ppchild-row-1 > div:after {
    content: "";
    width: 50%;
    height: 0;
    background-color: #fff4c6;
    border-radius: 50%;
    padding-bottom: 50%;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ppchild-row-1 > div > img {
    max-width: 950px;
    z-index: 2;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
}

.ppchild-row-1 > p {
    color: #484848;
    z-index: 2;
    font-family: Recoleta, sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ppchild-row-1 > p {
        font-size: 1.8rem;
    }
}

.ppchild-row-2 {
    max-width: 1250px;
    text-align: center;
    background-color: #fff9e1;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 8rem auto 0;
    display: grid;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .ppchild-row-2 {
        grid-template-columns: 1fr;
    }
}

.ppchild-row-2 h3 {
    color: #484848;
    z-index: 2;
    font-size: 2.4rem;
    font-weight: 400;
    position: relative;
}

.ppchild-row-2 p {
    max-width: 200px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.ppchild-row-2 > div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ppchild-row-2 > div {
        margin-bottom: 4rem;
    }
}

.ppchild-row-2 > div:after {
    content: "";
    width: 100%;
    height: 0;
    background-color: #fff4c6;
    border-radius: 50%;
    padding-bottom: 100%;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ppchild-row-2 > div img {
    width: 100%;
    z-index: 2;
    display: block;
    position: relative;
}

.recepie.pprecepie ul li {
    width: 50%;
}

@media screen and (max-width: 786px) {
    .recepie.pprecepie ul li {
        width: 100%;
    }
}

.recepie.pprecepie ul li img {
    width: 100%;
}

.faq {
    background-color: #fff9e1;
    padding: 5vw;
}

.faq .container {
    max-width: 900px;
    margin: 0 auto;
}

.faq .container-inner {
    width: 100%;
    margin: 0 auto;
}

.faq .section-title h2 {
    color: #484848;
    text-align: center;
    margin: 0 auto;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
}

.faq h3 {
    color: #4d4e58;
    max-width: calc(100% - 24px);
    margin: 0;
    font-size: 2.4rem;
    font-weight: 400;
}

.faq ul li,
.faq p {
    color: #484848;
    font-size: 2rem;
    font-weight: 400;
}

.faq p {
    line-height: 1.6;
}

.faq a {
    color: #0d5236;
    cursor: pointer;
    text-decoration: none;
}

.faq .tab-accordian ul {
    padding-left: 22px;
}

.faq .tab-accordian p {
    margin-top: 0;
}

.faq .tab-accordian {
    width: 100%;
    background: none;
    border-bottom: 1px solid #d6d6d6;
    overflow: hidden;
}

.faq .titleWrapper {
    cursor: pointer;
    user-select: none;
    background: #fff9e1;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 0;
    transition: background-color 0.8s linear;
    display: flex;
}

.faq .desWrapper {
    max-height: 500px;
    background: #fff9e1;
    padding-bottom: 20px;
    font-size: 1.6rem;
    transition: max-height 1s ease-in;
    display: none;
}

.faq .collapse-icon {
    position: relative;
}

.faq .collapse-icon .acc-close {
    height: 20px;
    opacity: 1;
    border-left: 2px solid #0a7a7f;
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
}

.faq .collapse-icon .acc-open {
    width: 19px;
    border-top: 2px solid #0a7a7f;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 43%;
    right: -8px;
    transform: rotate(90deg);
}

.faq .titleWrapper.active .collapse-icon {
    transition: all 0.5s ease-in-out;
    transform: rotate(180deg);
}

.faq .titleWrapper.inactive .collapse-icon {
    transition: all 0.5s ease-in-out;
    transform: rotate(-180deg);
}

.faq .titleWrapper.active .collapse-icon .acc-open {
    opacity: 0;
}

.jpHero > div {
    height: 100vh;
}

.jpHero > div video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.jpVideoScroll {
    z-index: 50;
    position: relative;
}

.jpVideoScroll .video-container {
    text-align: center;
}

.jpVideoScroll .video-scrub {
    width: 100vw;
    height: 100vh;
    object-position: center;
    object-fit: cover;
    display: block;
}

.jpNotMilk {
    height: 100vh;
}

.jpNotMilk > div {
    width: 100%;
    height: 100%;
    position: relative;
}

.jpNotMilk > div > img,
.jpNotMilk > div > picture,
.jpNotMilk > div > img img,
.jpNotMilk > div > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.jpSection {
    min-height: 100vh;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
}

.jpSection h2 {
    color: #fff;
    margin-bottom: 2.8rem;
    font-size: 5.2rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .jpSection h2 {
        font-size: 2.4rem;
    }
}

@media (min-height: 30em) {
    .jpSection {
        height: 100vh;
    }
}

.jpNotMilk-1 > div {
    height: 100%;
}

.jpNotMilk-1 > div > div {
    height: 100vh;
    width: 50%;
    background: linear-gradient(90deg, #0000007a 0%, #0000 100%);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 7.5vw;
    display: flex;
    position: relative;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-1 > div > div {
        width: 90vw;
        padding: 6rem 7.5vw;
    }
}

.jpNotMilk-1 > div > div > * {
    max-width: 460px;
}

.jpNotMilk-1 > div > div > svg {
    margin-bottom: 2rem;
    display: block;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-1 > div > div > svg {
        max-width: 100%;
    }
}

.jpNotMilk-1 > div > div > h2 {
    font-size: 4.8rem;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-1 > div > div > h2 {
        font-size: 2rem;
    }
}

.jpNotMilk-1 > div > div > h3 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-1 > div > div > h3 {
        font-size: 2rem;
    }
}

.jpNotMilk-1 > div > div ul {
    color: #fff;
    margin-bottom: 2rem;
    font-size: 2rem;
    list-style-type: none;
}

.jpNotMilk-1 > div > div ul li {
    align-items: center;
    display: flex;
}

.jpNotMilk-1 > div > div ul li span {
    border: 1px solid red;
    border-radius: 50%;
    margin-right: 1.2rem;
    padding: 0.8rem;
    display: block;
    position: relative;
}

.jpNotMilk-1 > div > div ul li span:after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(-45deg);
}

.jpNotMilk-1 > div > div ul li span img {
    width: 3.2rem;
    height: 3.2rem;
    object-fit: contain;
    display: block;
}

.jpNotMilk-1 > div > div ul li:not(:last-of-type) {
    margin-bottom: 1.2rem;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-2 > div {
        padding: 6rem 7.5vw;
    }
}

.jpNotMilk-2 > div > div {
    z-index: 2;
    color: #fff;
    width: 40%;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    display: flex;
    position: relative;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-2 > div > div {
        width: 100%;
        justify-content: flex-start;
    }
}

.jpNotMilk-2 > div > div > * {
    max-width: 460px;
}

.jpNotMilk-2 > div > div > h2 {
    margin-bottom: 0.8rem;
}

.jpNotMilk-2 > div > div p {
    font-size: 2rem;
}

.jpNotMilk-3 > div > div {
    z-index: 2;
    color: #fff;
    width: 38%;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    padding-left: 7.5vw;
    display: flex;
    position: relative;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-3 > div > div {
        width: 90vw;
        justify-content: flex-start;
        padding: 6rem 7.5vw;
    }
}

.jpNotMilk-3 > div > div > * {
    max-width: 480px;
}

.jpNotMilk-3 > div > div > h2 {
    margin-bottom: 0.8rem;
}

.jpNotMilk-3 > div > div p {
    font-size: 2rem;
}

.jpNotMilk-3 > div > div > div {
    margin-top: 6rem;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-3 > div > div > div {
        margin-top: 60%;
    }
}

.jpNotMilk-3 > div > div > div > p {
    margin-bottom: 1.2rem;
}

.jpNotMilk-3 > div > div > div > div {
    margin-bottom: 1.6rem;
    display: flex;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-3 > div > div > div > div {
        flex-wrap: wrap;
        gap: 1.6rem 0;
    }
}

.jpNotMilk-3 > div > div > div > div a {
    white-space: nowrap;
    background-color: #346906;
    margin-right: 1.6rem;
    display: inline-flex;
}

.jpNotMilk-3 > div > div > div > div a:hover {
    background-color: #346906b3;
}

.jpNotMilk-3 > div > div > div > a {
    color: #fff;
    align-items: center;
    font-size: 1.8rem;
    text-decoration: none;
    display: flex;
}

.jpNotMilk-3 > div > div > div > a svg {
    margin-left: 1.2rem;
}

.jpNotMilk-4 > div > div {
    z-index: 2;
    color: #0d5236;
    width: 38%;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    display: flex;
    position: relative;
}

@media screen and (max-width: 786px) {
    .jpNotMilk-4 > div > div {
        width: 100%;
        justify-content: flex-start;
        padding: 6rem 7.5vw;
    }
}

.jpNotMilk-4 > div > div > * {
    max-width: 480px;
}

.jpNotMilk-4 > div > div > h2 {
    color: #0d5236;
    margin-bottom: 0.8rem;
}

.jpNotMilk-4 > div > div p,
.jpSubscribe > div > .leftRight > .left p {
    font-size: 2rem;
}

.jpSubscribe > div > .leftRight > .left h2 {
    color: #2e2b26;
    margin-top: 1.2rem;
    font-size: 4.4rem;
    font-weight: 400;
}

.jpSubscribe > div > ul:nth-of-type(1) li:nth-of-type(2) img {
    background-color: #6bc06d;
}

@media screen and (max-width: 786px) {
    .jpSubscribe > div > ul li h2 {
        display: none;
    }
}

.aboutHero > div {
    width: 100vw;
    height: 100vh;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .aboutHero > div {
        align-items: flex-start;
        padding-top: 14rem;
    }
}

.aboutHero > div > h2 {
    z-index: 2;
    color: #484848;
    padding-left: 7.5vw;
    font-size: 5.2rem;
    font-weight: 400;
    position: relative;
}

@media screen and (max-width: 786px) {
    .aboutHero > div > h2 {
        font-size: 3.6rem;
    }
}

.aboutHero > div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.aboutDiff {
    background-color: #fff9e1;
}

.aboutDiff > div.leftRight {
    color: #484848;
    align-items: center;
}

.aboutDiff > div.leftRight .left {
    width: 55%;
}

@media screen and (max-width: 786px) {
    .aboutDiff > div.leftRight .left {
        width: 100%;
    }
}

.aboutDiff > div.leftRight .left img {
    width: 100%;
    display: block;
}

.aboutDiff > div.leftRight .right {
    width: 45%;
    text-align: left;
    padding: 4rem 7.5vw;
}

@media screen and (max-width: 786px) {
    .aboutDiff > div.leftRight .right {
        width: 100%;
    }
}

.aboutDiff > div.leftRight .right > * {
    max-width: 500px;
}

.aboutDiff > div.leftRight .right h2 {
    margin-bottom: 2rem;
    font-size: 4rem;
    font-weight: 400;
}

.aboutDiff > div.leftRight .right p {
    color: #484848;
    font-size: 1.8rem;
    line-height: 1.6;
}

.aboutDiff > div.leftRight .right p strong {
    margin-top: 2.4rem;
    display: block;
}

.aboutDiff > div.leftRight .right p + p {
    margin-bottom: 2.8rem;
}

.aboutPlantBased {
    background-color: #fff9e1;
}

.aboutPlantBased > div.leftRight {
    color: #484848;
    flex-direction: row-reverse;
    align-items: center;
}

@media screen and (max-width: 786px) {
    .aboutPlantBased > div.leftRight {
        flex-direction: column;
    }
}

.aboutPlantBased > div.leftRight .left {
    width: 55%;
}

@media screen and (max-width: 786px) {
    .aboutPlantBased > div.leftRight .left {
        width: 100%;
    }
}

.aboutPlantBased > div.leftRight .left img {
    width: 100%;
    display: block;
}

.aboutPlantBased > div.leftRight .right {
    width: 45%;
    text-align: left;
    padding: 4rem 7.5vw;
}

@media screen and (max-width: 786px) {
    .aboutPlantBased > div.leftRight .right {
        width: 100%;
    }
}

.aboutPlantBased > div.leftRight .right > * {
    max-width: 520px;
}

.aboutPlantBased > div.leftRight .right h2 {
    margin-bottom: 2rem;
    font-size: 4rem;
    font-weight: 400;
}

.aboutPlantBased > div.leftRight .right p {
    color: #484848;
    font-size: 1.7rem;
    line-height: 1.6;
}

.aboutPlantBased > div.leftRight .right p strong {
    margin-top: 2.4rem;
    display: block;
}

.aboutPlantBased > div.leftRight .right p + p {
    margin-bottom: 2.8rem;
}

.aboutPlantBased > div.leftRight .right ul {
    list-style-type: none;
    display: flex;
}

.aboutPlantBased > div.leftRight .right ul li {
    width: 50%;
}

.aboutPlantBased > div.leftRight .right ul li strong {
    margin-bottom: 0.4rem;
}

.aboutPlantBased > div.leftRight .right ul li span {
    line-height: 1.6;
}

.aboutClient {
    background: #ffca61;
}

.aboutClient .leftRight {
    align-items: center;
    padding-top: 8rem;
}

@media screen and (max-width: 786px) {
    .aboutClient .leftRight {
        flex-direction: column-reverse;
    }
}

.aboutClient .leftRight .left {
    color: #484848;
    padding: 7.5vw 7.5vw 4rem;
    position: relative;
    overflow: hidden;
}

.aboutClient .leftRight .left:after {
    content: "";
    width: 100%;
    height: 0;
    background-color: #fff9e1;
    border-radius: 50%;
    padding-bottom: 100%;
    position: absolute;
    top: 0;
    left: -10%;
}

.aboutClient .leftRight .left:before {
    content: "";
    width: 10rem;
    height: 20rem;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg width='265' height='343' viewBox='0 0 265 343' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200.994 254.616C194.115 256.837 187.066 258.207 179.856 258.764C172.654 259.31 165.485 259.009 158.348 257.862C155.709 257.421 153.072 256.88 150.516 256.345C148.426 255.899 146.266 255.455 144.14 255.085C126.921 252.033 105.854 253.776 88.1836 259.611C115.867 270.377 144.179 273.386 172.423 268.539C186.201 266.156 195.807 261.487 201.037 254.629L201.014 254.613L200.994 254.616ZM82.309 259.045C82.4562 258.569 82.7778 258.232 83.2386 258.062C102.112 250.975 125.642 248.662 144.668 252.03C146.837 252.412 149.019 252.872 151.136 253.304C153.65 253.826 156.267 254.371 158.834 254.794C166.437 256.03 174.076 256.269 181.74 255.503C189.415 254.744 196.859 253.005 204.084 250.293C204.74 250.039 205.306 250.18 205.776 250.699C206.247 251.217 206.318 251.795 206.008 252.43C201.071 262.34 190.241 268.604 172.912 271.577C142.793 276.741 112.61 273.168 83.1793 260.935C82.532 260.667 82.2154 260.172 82.2327 259.468C82.2365 259.318 82.2517 259.175 82.2976 259.037L82.309 259.045Z' fill='%2391DB91'/%3E%3Cpath d='M49.8357 177.494C44.6416 179.452 41.4527 185.443 40.6348 190.681C39.9014 195.313 40.3824 199.964 40.888 204.871C41.0669 206.872 41.3015 208.963 41.4209 211.024C41.5624 213.442 41.5666 215.934 41.5552 218.278C41.4812 222.215 41.6974 226.151 42.2004 230.067C42.8219 233.572 43.6732 237.017 44.7542 240.402C46.0703 244.447 47.0288 248.564 47.6135 252.776C47.7795 254.359 47.8631 255.986 47.9332 257.535C48.1032 261.149 48.2701 264.573 49.5871 267.647C50.1478 268.91 50.9374 269.994 51.9593 270.917C52.9811 271.839 54.1405 272.518 55.4569 272.949C56.827 273.401 58.1457 273.271 59.4163 272.579C62.6383 266.031 60.18 256.53 58.1832 248.87L57.6571 246.83C51.8694 224.096 49.2515 200.999 49.823 177.537L49.8357 177.494ZM38.432 186.661C40.3127 180.687 44.6343 175.049 51.1851 173.926C51.6742 173.861 52.0886 173.998 52.4445 174.317C52.8117 174.643 52.9914 175.042 52.9756 175.525C52.1999 199.424 54.7643 222.96 60.6654 246.115L61.1882 248.136C63.3632 256.415 66.0436 266.788 61.9821 274.433C61.8605 274.655 61.6934 274.844 61.4886 274.99C60.4739 275.657 59.3683 276.09 58.165 276.25C56.9617 276.41 55.784 276.315 54.6285 275.946C52.8702 275.392 51.3136 274.503 49.9473 273.27C48.5811 272.036 47.5261 270.579 46.7822 268.897C45.2343 265.303 45.0934 261.454 44.8882 257.696C44.8169 256.197 44.7434 254.628 44.583 253.135C44.0208 249.109 43.1122 245.163 41.8574 241.298C40.7332 237.78 39.8583 234.199 39.2131 230.558C38.6749 226.498 38.443 222.414 38.5173 218.307C38.5013 215.978 38.4878 213.548 38.3371 211.192C38.2199 209.2 38.0034 207.156 37.8085 205.178C37.3142 200.279 36.7929 195.225 37.5785 190.203C37.7785 188.997 38.0596 187.797 38.4366 186.63L38.432 186.661Z' fill='%2391DB91'/%3E%3Cpath d='M82.8841 255.461C82.8178 253.131 82.8247 250.817 82.8087 248.488C82.6626 233.248 82.5141 217.478 78.4422 202.974C78.1223 201.828 77.7795 200.667 77.4368 199.505C75.2339 192.042 72.9607 184.29 75.1211 176.706L75.213 176.43C75.4312 175.902 75.5145 175.347 75.494 174.77C75.3324 174.417 75.0953 174.148 74.7518 173.958C74.4083 173.768 74.0576 173.709 73.6737 173.746C72.4966 173.941 71.489 174.477 70.6591 175.343C65.089 180.308 63.1989 188.696 64.622 201.731C66.1413 215.26 69.1315 228.441 73.6042 241.285C75.3751 246.501 78.0833 252.615 82.8727 255.453L82.8841 255.461ZM62.5905 182.626C63.6969 178.87 65.7104 175.666 68.6037 173.029C69.9488 171.673 71.5624 170.881 73.4559 170.661C75.5526 170.515 78.0133 171.768 78.5045 174.124C78.652 175.2 78.5448 176.249 78.1715 177.265L78.0956 177.519C76.1608 184.273 78.3217 191.553 80.3998 198.588C80.7459 199.769 81.1002 200.938 81.4235 202.103C85.6054 217.009 85.7489 232.98 85.9094 248.417C85.9398 251.575 85.9668 254.713 86.0292 257.825C86.043 258.364 85.8274 258.792 85.3823 259.109C84.9567 259.424 84.479 259.497 83.9687 259.326C76.5796 256.791 72.9987 248.888 70.697 242.292C66.1481 229.242 63.1091 215.839 61.5687 202.073C60.9321 196.359 60.5431 189.079 62.5905 182.626Z' fill='%2391DB91'/%3E%3Cpath d='M111.765 225.747C110.442 217.13 106.617 208.918 102.902 200.937C98.9273 192.382 94.7996 183.582 93.6073 174.051C93.2134 170.416 93.0366 166.763 93.0803 163.112C93.1602 159.094 92.9224 155.092 92.3784 151.112C92.0872 149.271 91.1106 147.46 90.143 146.848C89.8007 146.607 89.4307 146.552 89.0409 146.67C88.5835 146.86 88.1786 147.12 87.8294 147.472C82.9206 151.982 81.3127 159.749 82.9171 171.241C84.6317 183.595 87.8769 195.541 92.6184 207.056C94.5127 211.66 96.7345 216.478 100.223 220.294C102.229 222.556 105.047 223.446 108.034 224.386C109.258 224.803 110.509 225.206 111.75 225.72L111.765 225.747ZM80.58 153.541C81.5541 150.288 83.2709 147.506 85.75 145.192C86.4402 144.501 87.2535 143.999 88.1898 143.685C89.4758 143.311 90.6671 143.483 91.7864 144.219C93.9122 145.56 95.066 148.501 95.4321 150.6C96.0032 154.734 96.2487 158.896 96.1765 163.072C96.1319 166.604 96.2963 170.128 96.6699 173.647C97.8506 182.71 101.84 191.293 105.724 199.614C109.958 208.676 114.326 218.053 115.201 228.231C115.259 228.851 115.023 229.333 114.481 229.668C113.95 230.011 113.4 230.017 112.863 229.69C111.03 228.708 109.123 227.93 107.132 227.366C103.881 226.342 100.531 225.215 98.0048 222.382C94.2052 218.16 91.7399 212.865 89.8341 208.252C84.9789 196.487 81.6703 184.291 79.9002 171.677C78.8475 164.324 79.0889 158.306 80.588 153.53L80.58 153.541Z' fill='%2391DB91'/%3E%3Cpath d='M222.717 229.775C208.292 228.908 193.472 228.19 178.974 229.779C176.872 230.005 174.721 230.3 172.637 230.574C166.62 231.373 160.406 232.187 154.181 231.852C151.635 231.715 149.086 231.389 146.621 231.088C144.368 230.801 142.062 230.492 139.787 230.359C137.782 230.228 135.783 230.016 133.866 229.81C128.317 229.217 123.011 228.641 117.982 230.169C129.24 238.525 141.893 241.112 157.2 242.326C168.193 243.201 180.949 243.968 193.422 241.963C205.037 240.087 215.087 235.901 222.728 229.783L222.717 229.775ZM113.39 229.208C113.525 228.774 113.811 228.464 114.218 228.273C120.761 225.269 127.587 226.011 134.205 226.708C136.092 226.909 138.06 227.116 140.003 227.238C142.383 227.393 144.716 227.687 147.042 227.992C149.367 228.297 151.928 228.631 154.362 228.757C160.293 229.074 166.379 228.272 172.26 227.496C174.364 227.22 176.526 226.932 178.679 226.707C194.658 224.95 210.972 225.968 226.703 226.918C227.371 226.961 227.831 227.301 228.063 227.942C228.295 228.582 228.161 229.136 227.67 229.592C219.288 237.49 207.62 242.789 193.931 244.997C181.148 247.057 168.148 246.272 156.973 245.388C140.095 244.059 126.321 241.076 113.902 230.88C113.459 230.517 113.277 230.049 113.349 229.485C113.363 229.393 113.388 229.308 113.413 229.224L113.39 229.208Z' fill='%2391DB91'/%3E%3Cpath d='M244.283 197.255L209.519 204.03C202.705 205.479 195.83 206.578 188.91 207.305C182.601 207.865 176.118 207.825 169.863 207.775C158.342 207.723 147.363 207.676 137.051 210.876C139.35 211.777 141.579 212.849 143.727 214.086C145.441 215.018 147.17 215.978 149.161 216.832C155.763 219.734 163.535 219.299 170.391 218.954C186.832 218.118 203.765 217.236 219.439 211.549C228.548 208.218 236.837 203.459 244.305 197.271L244.322 197.248L244.283 197.255ZM130.284 210.705C130.423 210.241 130.718 209.919 131.156 209.733C143.381 204.587 156.84 204.621 169.854 204.683C176.055 204.713 182.465 204.736 188.615 204.183C195.438 203.473 202.208 202.402 208.929 200.99L249.19 193.135C249.528 193.066 249.848 193.121 250.154 193.268C250.459 193.414 250.69 193.645 250.853 193.946C251.007 194.26 251.062 194.571 250.991 194.913C250.94 195.252 250.779 195.531 250.532 195.784C241.765 204.11 231.699 210.331 220.358 214.461C204.335 220.33 187.123 221.22 170.473 222.063C163.28 222.427 155.112 222.891 147.856 219.682C145.789 218.791 143.953 217.79 142.181 216.818C138.811 214.944 135.623 213.248 131.531 212.69C131.192 212.639 130.886 212.492 130.653 212.243C130.4 211.997 130.268 211.699 130.218 211.358C130.189 211.133 130.221 210.917 130.292 210.694L130.284 210.705Z' fill='%2391DB91'/%3E%3Cpath d='M247.783 177.113C244.452 177.584 241.103 177.838 237.736 177.875L184.176 179.551C180.153 179.673 176.01 179.795 171.989 180.326C169.081 180.703 166.228 181.271 163.4 182.045C172.441 190.037 184.868 193.965 198.725 193.119C217.598 191.999 234.714 186.37 247.783 177.113ZM158.96 180.867C159.131 180.357 159.453 180.02 159.967 179.871C163.778 178.645 167.68 177.775 171.646 177.273C175.815 176.726 180.047 176.598 184.139 176.475L237.692 174.81C243.128 174.642 249.297 174.427 254.395 171.976C254.735 171.807 255.1 171.773 255.469 171.879C255.838 171.985 256.134 172.193 256.359 172.504C256.575 172.827 256.656 173.173 256.603 173.563C256.551 173.952 256.385 174.262 256.1 174.521C241.918 187.156 221.613 194.872 198.965 196.22C183.206 197.178 169.148 192.273 159.363 182.429C158.951 182.02 158.816 181.533 158.958 180.968L158.971 180.875L158.96 180.867Z' fill='%2391DB91'/%3E%3Cpath d='M132.119 114.901C131.425 117.004 131.008 119.149 130.842 121.35C130.067 128.272 129.272 135.418 130.083 142.363C132.124 159.685 143.21 173.887 158.614 179.157C157.886 172.918 156.203 166.945 153.577 161.247C151.869 157.882 149.988 154.616 147.935 151.451C146.978 149.926 145.992 148.347 145.064 146.757C139.178 136.773 134.871 126.143 132.151 114.856L132.127 114.89L132.119 114.901ZM128.932 114.706C129.473 112.87 130.387 111.229 131.68 109.803C132.101 109.349 132.616 109.199 133.227 109.373C133.826 109.538 134.184 109.926 134.32 110.533C136.895 122.827 141.373 134.378 147.753 145.187C148.674 146.738 149.637 148.301 150.571 149.81C152.681 153.065 154.609 156.433 156.362 159.881C159.484 166.643 161.347 173.766 161.933 181.201C161.978 181.743 161.793 182.176 161.382 182.518C160.971 182.86 160.508 182.961 159.982 182.812C142.238 177.84 129.313 162.107 127.033 142.725C126.169 135.418 126.984 128.099 127.786 120.992C127.963 118.849 128.348 116.75 128.929 114.687L128.932 114.706Z' fill='%2391DB91'/%3E%3Cpath d='M251.662 152.054C236.077 152.741 220.354 152.871 204.812 152.43C203.957 152.408 203.06 152.375 202.155 152.352C195.101 152.082 187.173 151.793 181.662 154.856C185.729 162.165 194.523 167.357 204.49 168.261C214.813 169.193 224.989 166.016 233.588 162.805C240.367 160.291 247.12 157.231 251.666 152.074L251.662 152.054ZM178.201 153.839C178.302 153.501 178.506 153.235 178.801 153.033C185.162 148.64 194.64 148.979 202.309 149.273C203.206 149.306 204.083 149.343 204.946 149.353C221.505 149.828 238.308 149.639 254.88 148.81C255.515 148.779 255.981 149.038 256.296 149.584C256.612 150.13 256.595 150.663 256.257 151.193C251.32 158.7 242.605 162.733 234.697 165.664C225.782 169.011 215.193 172.29 204.252 171.316C192.455 170.251 182.543 163.982 178.29 154.924C178.129 154.572 178.114 154.204 178.232 153.843L178.201 153.839Z' fill='%2391DB91'/%3E%3Cpath d='M177.28 155.389C176.301 152.127 173.963 149.342 171.501 146.418C170.881 145.675 170.261 144.932 169.644 144.209C166.049 139.721 163.201 134.703 160.439 129.829L146.688 105.572C146.422 114.948 147.411 122.973 149.761 130.131C152.503 138.501 157.104 145.486 163.078 150.35C167.971 154.301 172.319 156.675 177.272 155.401L177.28 155.389ZM143.847 104.206C144.142 103.083 144.816 102.245 145.847 101.725C146.276 101.55 146.699 101.506 147.146 101.598C147.592 101.69 147.97 101.905 148.287 102.23C148.385 102.333 148.475 102.447 148.557 102.573L163.143 128.287C165.834 133.042 168.623 137.951 172.064 142.246C172.65 142.964 173.236 143.683 173.848 144.437C176.788 147.918 179.798 151.517 180.642 156.184C180.706 156.553 180.648 156.904 180.462 157.217C180.276 157.529 180.007 157.767 179.66 157.897C172.314 160.66 166.237 156.866 161.165 152.755C154.729 147.532 149.81 140.052 146.858 131.107C144.386 123.591 143.355 115.212 143.642 105.443C143.649 105.021 143.706 104.601 143.824 104.19L143.847 104.206Z' fill='%2391DB91'/%3E%3Cpath d='M248.241 130.73C242.362 131.115 236.453 130.694 230.703 130.266C227.895 130.065 224.995 129.85 222.154 129.745C210.04 129.276 201.304 131.13 194.792 135.57C196.359 139.45 200.704 142.896 205.383 143.782C214.346 145.582 221.78 145.506 228.099 143.573C235.805 141.267 242.373 135.998 248.229 130.722L248.241 130.73ZM191.494 134.513C191.599 134.195 191.783 133.932 192.04 133.737C199.267 128.403 208.883 126.145 222.276 126.661C225.167 126.767 228.087 126.978 230.926 127.184C238.044 127.704 245.443 128.235 252.531 127.149C252.873 127.099 253.181 127.145 253.49 127.312C253.8 127.478 254.019 127.7 254.162 128.005C254.305 128.311 254.359 128.621 254.297 128.953C254.235 129.284 254.093 129.559 253.854 129.801C246.89 136.241 238.995 143.544 229.051 146.56C222.217 148.643 214.287 148.745 204.816 146.844C199.488 145.791 193.191 141.484 191.539 135.346C191.461 135.07 191.453 134.791 191.514 134.51L191.494 134.513Z' fill='%2391DB91'/%3E%3Cpath d='M187.783 133.369C187.342 131.764 186.06 130.266 184.905 128.926C176.777 119.513 169.346 109.569 162.606 99.103C161.943 97.8873 161.079 96.8368 160.022 95.9402C159.475 95.5552 158.865 95.3313 158.189 95.2991C159.122 103.865 161.333 111.317 164.776 117.453C168.99 124.966 175.172 130.624 182.183 133.405C184.048 134.051 185.909 134.046 187.778 133.4L187.794 133.377L187.783 133.369ZM155.056 93.6935C155.17 93.3133 155.401 93.0327 155.735 92.8243C156.715 92.303 157.761 92.1005 158.849 92.2009C159.949 92.3093 160.938 92.6974 161.799 93.388C163.172 94.4897 164.274 95.8092 165.141 97.3395C171.795 107.71 179.158 117.557 187.204 126.894C188.821 128.764 190.829 131.096 190.992 134.091C191.02 134.656 190.816 135.092 190.363 135.421C187.916 137.23 183.605 137.251 181.026 136.239C173.359 133.203 166.621 127.051 162.083 118.884C158.262 112.073 155.867 103.792 154.976 94.268C154.969 94.059 154.997 93.8739 155.052 93.6741L155.056 93.6935Z' fill='%2391DB91'/%3E%3Cpath d='M242.725 113.504C242.725 113.504 242.773 113.435 242.755 113.388C242.743 113.26 242.531 112.907 241.154 112.416C238.14 111.321 235.011 110.195 231.876 110.241C229.232 110.292 226.595 111.183 224.028 112.021C216.375 114.567 208.494 117.193 201.623 121.415C208.391 122.626 215.176 122.674 221.975 121.538C228.766 120.413 235.17 118.165 241.203 114.82C241.856 114.546 242.37 114.106 242.725 113.504ZM196.159 121.767C196.272 121.437 196.457 121.175 196.732 120.977C204.709 115.231 214.025 112.114 223.037 109.091C225.674 108.2 228.682 107.195 231.786 107.144C235.49 107.088 239.045 108.36 242.166 109.497C243.141 109.808 245.372 110.66 245.752 112.836C245.977 114.068 245.603 115.885 242.649 117.541C228.907 125.183 213.239 127.346 197.236 123.752C196.798 123.648 196.456 123.407 196.237 123.015C196.018 122.623 195.967 122.211 196.101 121.777L196.124 121.794L196.159 121.767Z' fill='%2391DB91'/%3E%3Cpath d='M195.658 119.932C195.293 119.505 194.878 119.077 194.451 118.641C193.896 118.097 193.365 117.519 192.869 116.915C186.143 108.539 179.932 99.7925 174.273 90.6497C173.648 89.6477 172.988 88.6217 172.129 88.171C171.762 88.0149 171.39 88.0095 171.015 88.155C170.913 88.2028 170.834 88.2667 170.782 88.366C170.752 88.7715 170.82 89.1601 170.966 89.5351C172.971 96.5526 174.894 102.814 177.894 108.536C178.984 110.598 180.53 113.202 182.808 114.956C184.836 116.484 187.404 117.318 189.903 118.103L195.685 119.917L195.658 119.932ZM167.818 87.4416C168.144 86.4438 168.792 85.7401 169.762 85.3308C171.009 84.7928 172.235 84.8192 173.455 85.3871C175.13 86.2061 176.101 87.7583 176.879 89.004C182.479 98.037 188.611 106.677 195.27 114.954C195.664 115.436 196.143 115.943 196.653 116.455C198.223 118.053 200.012 119.873 199.924 122.471C199.904 122.985 199.693 123.382 199.275 123.685C198.858 123.988 198.399 124.058 197.92 123.891L188.969 121.009C186.362 120.182 183.417 119.254 180.98 117.387C178.214 115.307 176.435 112.334 175.235 109.991C172.079 104.005 170.106 97.5729 168.031 90.3873C167.684 89.427 167.623 88.4466 167.86 87.4543L167.842 87.4074L167.818 87.4416Z' fill='%2391DB91'/%3E%3Cpath d='M224.024 48.7283C221.969 50.9486 219.965 53.2902 218.032 55.5793C211.963 62.7341 205.675 70.1272 196.983 74.1259L196.373 74.4126C192.906 75.9984 189.325 77.624 188.273 80.7706L188.239 80.8665C187.509 83.166 188.378 85.9073 189.211 88.0442C191.987 95.0072 199.585 103.672 205.499 109.226C210.087 108.326 219.934 99.9916 221.716 97.869C225.332 93.5245 225.014 87.1135 224.702 80.9619L224.635 79.6023C224.535 77.3674 224.362 74.9953 224.192 72.4724C223.699 64.7107 223.12 56.1731 224.055 48.7329L224.024 48.7283ZM185.299 79.9079L185.353 79.7583C186.828 75.357 191.226 73.3686 195.1 71.5917L195.722 71.313C203.783 67.6044 209.562 60.7906 215.702 53.5834C218.746 49.8593 221.998 46.2989 225.424 42.9285C225.674 42.6947 225.971 42.5629 226.313 42.5133C226.646 42.4751 226.97 42.5488 227.259 42.7184C227.549 42.8881 227.764 43.141 227.899 43.4577C228.034 43.7744 228.061 44.1001 227.968 44.4267C225.942 52.3776 226.665 62.892 227.291 72.162C227.479 74.7318 227.637 77.1267 227.731 79.3924L227.795 80.7326C228.111 87.1938 228.48 94.5269 224.081 99.8387C222.386 101.886 210.987 112.113 205.038 112.38C204.612 112.404 204.236 112.26 203.926 111.973C197.424 105.971 189.393 96.8312 186.347 89.1844C185.333 86.5285 184.28 83.1288 185.307 79.8965L185.299 79.9079Z' fill='%2391DB91'/%3E%3Cpath d='M136.636 201.74C136.897 200.543 136.938 199.345 136.748 198.137C136.706 197.494 136.647 196.753 136.606 195.889C136.366 190.896 134.481 186.06 132.646 181.395L121.504 152.989C119.517 147.91 117.261 142.148 117.94 136.114C117.985 135.685 118.05 135.253 118.104 134.814C118.354 132.978 118.602 131.243 117.818 130.079C116.757 128.532 114.078 128.609 112.241 129.67C107.964 132.118 106.066 137.995 106.607 147.119C107.867 168.801 112.984 189.53 121.956 209.286C122.588 210.957 123.507 212.439 124.725 213.738C126.435 213.269 131.814 208.527 134.728 204.865C135.556 203.93 136.197 202.898 136.644 201.729L136.636 201.74ZM104.615 135.015C105.774 131.329 107.811 128.601 110.66 126.973C113.752 125.193 118.213 125.225 120.314 128.322C121.77 130.47 121.418 132.984 121.107 135.221L120.958 136.428C120.39 141.722 122.489 147.101 124.357 151.841L135.499 180.247C137.326 184.923 139.412 190.225 139.682 195.733C139.716 196.558 139.771 197.279 139.81 197.903C140.086 201.608 140.023 203.081 137.084 206.777C135.411 208.891 128.361 216.447 124.807 216.846C124.123 216.946 123.512 216.772 122.978 216.345C121.119 214.817 120.076 212.737 119.096 210.565C109.963 190.457 104.742 169.366 103.465 147.297C103.194 142.42 103.57 138.32 104.607 135.026L104.615 135.015Z' fill='%2391DB91'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -10rem;
    right: 10%;
    transform: scale(1.3);
}

.aboutClient .leftRight .left > * {
    max-width: 450px;
    z-index: 2;
    position: relative;
}

.aboutClient .leftRight .left h2 {
    color: #484848;
    margin-bottom: 1.2rem;
    font-size: 4rem;
    font-weight: 400;
}

.aboutClient .leftRight .left h3 {
    margin-bottom: 2rem;
    font-weight: 400;
}

.aboutClient .leftRight .left a {
    background-color: #346906;
}

.aboutClient .leftRight .left a:hover {
    background-color: #346906b3;
}

@media screen and (max-width: 786px) {
    .aboutClient .leftRight .right {
        padding: 0 7.5vw 7.5vw;
    }
}

.aboutClient .leftRight .right > div {
    max-width: 550px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem 4rem;
    display: grid;
}

.aboutClient .leftRight .right > div > img {
    max-height: 85%;
}

.fadeInSection .wrapper {
    height: 100vh;
}

.fadeInSection section {
    height: 100vh;
    width: 100vw;
    background: #e2eab3;
    justify-content: center;
    align-items: flex-start;
    display: flex;
    position: absolute;
}

.fadeInSection section > div {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

@media screen and (max-width: 786px) {
    .fadeInSection section > div {
        padding: 8rem 0;
    }
}

.fadeInSection section h1 {
    text-align: center;
    margin-bottom: 1.2rem;
    font-size: 4rem;
    font-weight: 400;
}

.fadeInSection section img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.fadeInSection .section2 {
    background: #dbf4ff;
}

.fadeInSection .section3 {
    background: #275f91;
}

.ppFadeInSection.fadeInSection .section1,
.ppFadeInSection.fadeInSection .section2,
.ppFadeInSection.fadeInSection section.milksection2 {
    background: #fff9e1;
}

.ppFadeInSection.fadeInSection img {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.ppFadeInSection.fadeInSection .wrapper.wrapperMilk .content {
    justify-content: flex-end;
}

@media screen and (max-width: 786px) {
    .fadeInSection.bluefadeSection {
        display: none;
    }
}

.imHero {
    background-color: #fff9e1;
    padding: 5vw 5vw 0;
}

.imHero > div {
    min-height: 95vh;
    align-items: center;
}

.imHero > div .left {
    width: 55%;
}

@media screen and (max-width: 786px) {
    .imHero > div .left {
        width: 100%;
        margin-bottom: 2rem;
        padding-top: 8rem;
    }
}

.imHero > div .left img {
    display: block;
    transform: scale(1.1);
}

@media screen and (max-width: 786px) {
    .imHero > div .left img {
        transform: scale(1);
    }
}

.imHero > div .right {
    width: 45%;
    text-align: center;
    padding-left: 5vw;
}

@media screen and (max-width: 786px) {
    .imHero > div .right {
        width: 100%;
        padding-left: 0;
    }
}

.imHero > div .right h1 {
    color: #346906;
    margin-bottom: 1.2rem;
    font-size: 4.4rem;
    font-weight: 400;
}

.imHero > div .right p {
    color: #346906;
    max-width: 500px;
    margin: 0 auto;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
}

.imProblem .leftRight {
    position: relative;
}

.imProblem .leftRight h2 {
    z-index: 10;
    margin-bottom: 2.4rem;
    font-size: 4.4rem;
    font-weight: 400;
    position: relative;
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight h2 {
        font-size: 3.6rem;
    }
}

.imProblem .leftRight ul {
    z-index: 10;
    list-style-type: none;
    position: relative;
}

.imProblem .leftRight ul li {
    font-size: 2rem;
    line-height: 1.6;
}

.imProblem .leftRight ul li strong {
    display: block;
}

.imProblem .leftRight ul li span {
    color: #cf5d5e;
    font-weight: 600;
}

.imProblem .leftRight ul li:not(:last-of-type) {
    margin-bottom: 2rem;
}

.imProblem .leftRight .middle-svg {
    width: 50%;
    aspect-ratio: 1 / 1;
    z-index: 2;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}

.imProblem .leftRight .middle-svg img {
    display: block;
}

.imProblem .leftRight .left {
    padding: 5vw;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight .left {
        padding: 6rem 7.5vw 12rem;
    }
}

.imProblem .leftRight .left:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #eaeaea;
    position: absolute;
    top: 0;
    left: 0;
}

.imProblem .leftRight .left > * {
    max-width: 60%;
    color: #5c6553;
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight .left > * {
        max-width: 100%;
    }
}

.imProblem .leftRight .left h2 {
    color: #5c6553;
}

.imProblem .leftRight .left .middle-svg {
    top: 50%;
    right: 0%;
    transform: translate(50%, -50%);
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight .left .middle-svg {
        top: 100%;
        right: 50%;
    }
}

.imProblem .leftRight .left .middle-svg img {
    animation: rotating 20s linear infinite;
    display: block;
}

.imProblem .leftRight .right {
    padding: 5vw;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight .right {
        padding: 12rem 7.5vw 6rem;
    }
}

.imProblem .leftRight .right:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #bee4ec;
    position: absolute;
    top: 0;
    left: 0;
}

.imProblem .leftRight .right > * {
    max-width: 60%;
    text-align: right;
    color: #27687c;
    margin-left: auto;
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight .right > * {
        max-width: 100%;
        text-align: left;
    }
}

.imProblem .leftRight .right h2 {
    color: #27687c;
}

.imProblem .leftRight .right .middle-svg {
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 786px) {
    .imProblem .leftRight .right .middle-svg {
        top: 0;
        left: 50%;
    }
}

.imProblem .leftRight .right .middle-svg img {
    animation: rotating 20s linear infinite;
}

.imProblem .leftRight .middle {
    width: 25%;
    height: 0;
    z-index: 2;
    padding-bottom: 25%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.imProblem .leftRight .middle-svg1 {
    width: 100%;
    height: 100%;
    z-index: 2;
    animation: rotating 20s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
}

.imProblem .leftRight .middle-svg1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.imProblem .leftRight .middle-svg2 {
    width: 100%;
    height: 100%;
    z-index: 4;
    animation: rotating 20s linear infinite reverse;
    position: absolute;
    top: 0;
    left: 0;
}

.imProblem .leftRight .middle-svg2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.imFermen {
    background-color: #e2eab3;
    justify-content: center;
    align-items: center;
    padding: 2.5vw 5vw 5vw;
    display: flex;
}

@media screen and (max-width: 786px) {
    .imFermen {
        padding: 2rem 0 0;
        display: block;
    }
}

.imFermen .fermen-mobile {
    display: none;
}

@media screen and (max-width: 786px) {
    .imFermen .fermen-mobile {
        width: 100%;
        display: block;
    }
}

.imFermen .fermen-desktop {
    max-height: 600px;
}

@media screen and (max-width: 786px) {
    .imFermen .fermen-desktop {
        display: none;
    }
}

.imFuture {
    text-align: center;
    background-color: #fff9e1;
    justify-content: center;
    align-items: center;
    padding: 5vw;
    display: flex;
}

@media screen and (max-width: 786px) {
    .imFuture {
        display: none;
    }
}

.imFuture h2 {
    color: #346906;
    max-width: 1000px;
    margin-bottom: 2.4rem;
    font-size: 4.4rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .imFuture h2 {
        font-size: 3.6rem;
    }
}

.imDifference {
    text-align: center;
    background-color: #fff9e1;
    justify-content: center;
    align-items: center;
    padding: 5vw;
    display: flex;
}

.imDifference .imDifference-logo {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    margin-bottom: 2.4rem;
}

.imDifference .imDifference-logo figure {
    width: 100px;
}

.imDifference .imDifference-logo figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width: 786px) {
    .imDifference {
        z-index: 2;
        padding: 6rem 7.5vw;
        position: relative;
    }
}

.imDifference > div {
    text-align: center;
}

.imDifference > div > h2 {
    color: #346906;
    max-width: 1000px;
    margin-bottom: 2.4rem;
    font-size: 4.4rem;
    font-weight: 400;
}

@media screen and (max-width: 786px) {
    .imDifference > div > h2 {
        font-size: 3.6rem;
    }
}

.imDifference > div > p {
    color: #346906;
    max-width: 1000px;
    font-size: 1.8rem;
}

.imDifference > div > p + p {
    margin-top: 2.8rem;
}

.imDifference > div > div {
    margin-top: 4rem;
}

.imDifference > div > div > h3 {
    color: #346906;
    margin-bottom: 2.4rem;
    font-weight: 400;
}

.imDifference > div > div div + div {
    margin-top: 2.8rem;
}

.imDifference > div > div > div > p {
    width: 100%;
    max-width: 500px;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
}

.imDifference > div > div > div > p:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #346906;
    position: absolute;
    bottom: -1.2rem;
    left: 0;
}

.imDifference > div > div > div > p > span:nth-of-type(2) {
    color: #252a48;
    background-color: #e2eab3;
    border-radius: 67rem;
    padding: 0.4rem 1.2rem;
    font-size: 1.4rem;
}

.imDifference > div > div > div > div {
    width: 100%;
    max-width: 500px;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.imDifference > div > div > div > div > button {
    cursor: pointer;
    text-align: center;
    background: none;
    border: none;
    font-family: inherit;
    position: relative;
}

.imDifference > div > div > div > div > button:after {
    content: "";
    width: 12px;
    height: 12px;
    opacity: 0;
    background-color: #346906;
    border-radius: 50%;
    position: absolute;
    top: -1.5rem;
    left: 50%;
}

.imDifference > div > div > div > div > button:hover,
.imDifference > div > div > div > div > button.active {
    color: #346906;
}

.imDifference > div > div > div > div > button.active:after {
    opacity: 1;
}

.imDifference > div ul {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 6rem;
    list-style-type: none;
    display: flex;
}

.imDifference > div ul li {
    width: 30%;
    aspect-ratio: 1 / 1;
    text-align: center;
    min-width: 180px;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: flex;
}

@media screen and (max-width: 786px) {
    .imDifference > div ul li {
        width: 80%;
        margin-bottom: 2rem;
    }
}

.imDifference > div ul li svg {
    margin-bottom: 0.4rem;
}

.imDifference > div ul li h3 {
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
    font-size: 1.8rem;
    font-weight: 400;
}

.imDifference > div ul li p {
    font-size: 4.4rem;
}

.imDifference > div ul li p + p {
    font-size: 1.4rem;
}

.imDifference > div ul li:nth-of-type(1) {
    color: #067fb0;
    background-color: #dbf4ff;
}

.imDifference > div ul li:nth-of-type(1) h3 {
    color: #067fb0;
}

.imDifference > div ul li:nth-of-type(2) {
    color: #7a6304;
    background-color: #fff4c6;
}

.imDifference > div ul li:nth-of-type(2) h3 {
    color: #7a6304;
}

.imDifference > div ul li:nth-of-type(3) {
    color: #346906;
    background-color: #e2eab3;
}

.imDifference > div ul li:nth-of-type(3) h3 {
    color: #346906;
}

.ccHero {
    background-color: #fff9e1;
    justify-content: center;
    align-items: center;
    padding: 16rem 5vw 0;
    display: flex;
    position: relative;
    overflow: hidden;
}

.ccHero:after {
    content: "";
    width: 110%;
    height: 100%;
    object-fit: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='1512' height='539' viewBox='0 0 1512 539' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1510.07 122.415C1502.65 145.444 1490.54 166.831 1480.18 191.675C1469.13 218.15 1447.26 245.406 1418.61 243.568C1390.92 241.788 1366.67 212.832 1340.27 221.355C1322.13 227.212 1314.15 247.68 1305.86 264.852C1284.24 309.716 1245.22 345.919 1198.86 364.147C1181.46 370.981 1162.61 375.403 1144.08 372.9C1107.45 367.949 1080.17 338.051 1054.57 311.415C1028.97 284.78 996.818 257.776 960.038 261.371C924.764 264.817 899.096 294.899 875.22 321.075C848.965 349.859 820.298 376.437 789.62 400.454C766.364 418.659 741.109 435.762 712.247 442.033C683.384 448.304 650.052 441.62 631.312 418.797C612.824 396.285 610.572 361.724 587.133 344.449C559.063 323.774 517.332 341.589 496.282 369.373C475.244 397.169 466.856 432.408 449.621 462.708C430.881 495.649 400.445 522.894 363.849 532.76C327.254 542.627 284.798 533.036 259.509 504.815C242.562 485.898 234.415 460.904 221.569 439.001C208.724 417.097 187.398 396.56 162.029 397.812C136.303 399.076 117.023 422.162 106.303 445.571C95.5825 468.979 89.6077 495.075 73.6137 515.256C60.9403 531.244 36.0532 544.487 15.5092 536.424C-5.03479 528.361 0.422921 519.942 0.422924 502.61L0.423013 -3.08008C-2.3001 -3.08008 -5.02321 -3.08008 -7.75781 -3.06859L1516.92 -3.06833C1516.94 24.7735 1516.98 52.6268 1517 80.4686C1517 95.6185 1514.3 109.275 1510.07 122.404L1510.07 122.415Z' fill='%23BEE4EC'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

.ccHero > div {
    z-index: 2;
    background-color: #fff;
    border-radius: 2.4rem;
    padding: 3.2rem 3.2rem 0;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ccHero > div {
        padding: 2rem;
    }
}

.ccHero > div .faq {
    background-color: #fff;
    padding: 0;
}

.ccHero > div .faq .titleWrapper,
.ccHero > div .faq .desWrapper {
    background-color: #fff;
}

.ccHero > div .left {
    flex-direction: column;
    justify-content: space-between;
    padding-right: 3.2rem;
    display: flex;
}

@media screen and (max-width: 786px) {
    .ccHero > div .left {
        padding-right: 0;
    }
}

.ccHero > div .left h2 {
    padding-top: 1.6rem;
    font-size: 4rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .ccHero > div .left h2 {
        padding-top: 0;
        font-size: 2.8rem;
    }
}

.ccHero > div .left img {
    display: block;
}

.ccForm {
    background-color: #fff9e1;
    padding: 4rem 5vw 5vw;
    overflow: hidden;
}

.ccForm .leftRight {
    align-items: flex-end;
    padding-bottom: 12rem;
}

@media screen and (max-width: 786px) {
    .ccForm .leftRight {
        flex-direction: column-reverse;
    }
}

.ccForm .leftRight .left {
    position: relative;
}

.ccForm .leftRight .left h2 {
    z-index: 2;
    font-size: 4rem;
    font-weight: 400;
    display: block;
    position: relative;
}

@media screen and (max-width: 786px) {
    .ccForm .leftRight .left h2 {
        font-size: 3.6rem;
    }
}

.ccForm .leftRight .left h2 span {
    color: #346906;
}

.ccForm .leftRight .left svg {
    display: block;
    position: absolute;
    top: 50%;
    left: -6vw;
}

.ccForm .right {
    background-color: #fff;
    border-radius: 2.4rem;
    padding: 3.2rem;
}

@media screen and (max-width: 786px) {
    .ccForm .right {
        margin-bottom: 2rem;
        padding: 2rem;
    }
}

.ccForm .right h2 {
    font-size: 2.8rem;
    font-weight: 400;
    display: block;
}

form.contactForm {
    flex-direction: column;
    display: flex;
}

form.contactForm input {
    color: #346906;
    background: none;
    border: none;
    border-bottom: 2px solid #c6c6c6;
    padding: 2px;
    font-family: Recoleta, sans-serif;
    font-size: 18px;
}

form.contactForm input:focus,
form.contactForm input:active {
    outline: none;
}

form.contactForm input[type="submit"] {
    color: #fff;
    cursor: pointer;
    background: #346906;
    border: none;
    border-radius: 10px;
    margin-top: 2.8rem;
    padding: 1.2rem;
    font-family: inherit;
    font-size: 1.6rem;
}

form.contactForm input[type="submit"]:hover {
    color: #346906;
    background-color: #e2eab3;
}

form.contactForm .input-group {
    width: 100%;
    margin-top: 2rem;
    display: inline-block;
    position: relative;
}

form.contactForm .input-group label {
    color: #999;
    pointer-events: none;
    transform-origin: 0 0;
    font-family: Bellota, sans-serif;
    transition: transform 0.2s linear;
    position: absolute;
    transform: scale(0.9) translateY(100%);
}

form.contactForm .input-group label.animate-label {
    transition: transform 0.2s linear;
    transform: scale(0.6) translateY(0%);
}

form.contactForm .input-group input,
form.contactForm .input-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding-top: 20px;
}

form.contactForm .input-group--text {
    padding-bottom: 10rem;
}

.recepieVideo {
    padding: 12rem 2.5vw 2.5vw;
}

@media screen and (max-width: 786px) {
    .recepieVideo {
        padding-top: 8rem;
    }
}

.recepieVideo > div {
    max-width: 840px;
    margin: 0 auto;
}

.recepieVideo > div h2 {
    margin-bottom: 2rem;
    padding: 0 2.5vw;
    font-size: 4rem;
    font-weight: 400;
    display: block;
}

.recepieVideo > div video {
    max-width: 100%;
    border-radius: 2.4rem;
    display: block;
}

.recepieStep {
    padding: 2.8rem 2.5vw 2.5vw;
}

.recepieStep ul {
    max-width: 840px;
    background-color: #e2eab366;
    border-radius: 2.4rem;
    margin: 0 auto;
    padding: 5vw;
    list-style-type: none;
}

@media screen and (max-width: 786px) {
    .recepieStep ul {
        padding: 2rem;
    }
}

.recepieStep ul li p {
    color: #346906;
}

.recepieStep ul li h3 {
    color: #2e2b26;
    margin-top: 0.4rem;
    font-family: Bellota, sans-serif;
}

.recepieStep ul li .right p {
    color: #595959;
    font-size: 1.7rem;
}

.recepieStep ul li:not(:last-of-type) {
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 2.4rem;
    padding-bottom: 2.4rem;
}

.recepieList {
    padding: 2.5vw 5vw 5vw;
}

@media screen and (max-width: 786px) {
    .recepieList {
        padding-top: 4rem;
    }
}

.recepieList h2 {
    margin-bottom: 2.8rem;
    font-size: 4rem;
    font-weight: 400;
    display: block;
}

.recepieList ul {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    list-style-type: none;
    display: grid;
}

@media screen and (max-width: 991px) {
    .recepieList ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .recepieList ul {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.recepieList ul li a {
    color: #2e2b26;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
}

.recepieList ul li a img {
    width: 100%;
    border-radius: 2.4rem;
    margin-bottom: 1.2rem;
}

.recepieList ul li a:hover {
    color: #346906;
    text-shadow: 0.5px 0;
}

.bsHero {
    min-height: 100vh;
    background-color: #fff9e1;
    padding: 12rem 5vw 5vw;
    position: relative;
    overflow: hidden;
}

.bsHero:after {
    content: "";
    width: 110%;
    height: 100%;
    object-fit: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='1512' height='539' viewBox='0 0 1512 539' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1510.07 122.415C1502.65 145.444 1490.54 166.831 1480.18 191.675C1469.13 218.15 1447.26 245.406 1418.61 243.568C1390.92 241.788 1366.67 212.832 1340.27 221.355C1322.13 227.212 1314.15 247.68 1305.86 264.852C1284.24 309.716 1245.22 345.919 1198.86 364.147C1181.46 370.981 1162.61 375.403 1144.08 372.9C1107.45 367.949 1080.17 338.051 1054.57 311.415C1028.97 284.78 996.818 257.776 960.038 261.371C924.764 264.817 899.096 294.899 875.22 321.075C848.965 349.859 820.298 376.437 789.62 400.454C766.364 418.659 741.109 435.762 712.247 442.033C683.384 448.304 650.052 441.62 631.312 418.797C612.824 396.285 610.572 361.724 587.133 344.449C559.063 323.774 517.332 341.589 496.282 369.373C475.244 397.169 466.856 432.408 449.621 462.708C430.881 495.649 400.445 522.894 363.849 532.76C327.254 542.627 284.798 533.036 259.509 504.815C242.562 485.898 234.415 460.904 221.569 439.001C208.724 417.097 187.398 396.56 162.029 397.812C136.303 399.076 117.023 422.162 106.303 445.571C95.5825 468.979 89.6077 495.075 73.6137 515.256C60.9403 531.244 36.0532 544.487 15.5092 536.424C-5.03479 528.361 0.422921 519.942 0.422924 502.61L0.423013 -3.08008C-2.3001 -3.08008 -5.02321 -3.08008 -7.75781 -3.06859L1516.92 -3.06833C1516.94 24.7735 1516.98 52.6268 1517 80.4686C1517 95.6185 1514.3 109.275 1510.07 122.404L1510.07 122.415Z' fill='%23BEE4EC'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

.bsHero:before {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: contain;
    background: url("images/bs-hero.png") no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

.bsHero .right {
    z-index: 3;
    background-color: #fff;
    border-radius: 2.4rem;
    padding: 4rem;
    position: relative;
}

.subForm {
    margin-bottom: 8rem;
}

.subForm > div {
    max-width: calc(1200px + 10vw);
    margin: 12rem auto 0;
    padding: 0 5vw;
}

.subForm > div button {
    font-family: inherit;
}

.subForm > div > h2 {
    margin-bottom: -3.2rem;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .subForm > div > h2 {
        margin-bottom: 0;
        font-size: 2.4rem;
    }
}

.subForm > div > form .formRow {
    border-bottom: 1px solid #34690633;
    gap: 0.8rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
    display: flex;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow {
        flex-wrap: wrap;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }
}

.subForm > div > form .formRow-item {
    position: relative;
}

.subForm > div > form .formRow-item > input {
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.subForm > div > form .formRow-item > div img {
    max-height: 40rem;
    width: 100%;
    object-fit: contain;
    border-radius: 16px;
    margin-bottom: 1.2rem;
    display: block;
}

.subForm > div > form .formRow-item > div h3 {
    font-size: 2.4rem;
    font-weight: 400;
}

.subForm > div > form .formRow-item > div button {
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: #346906;
    border: none;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow.product .formRow-item {
        width: 48%;
    }
}

.subForm > div > form .formRow.formRowWithLabel {
    justify-content: flex-start;
    gap: 5%;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow.formRowWithLabel {
        flex-direction: column;
    }

    .subForm > div > form .formRow.formRowWithLabel > label,
    .subForm > div > form .formRow.formRowWithLabel > div {
        width: 100%;
    }
}

.subForm > div > form .formRow.formRowWithLabel label {
    width: 35%;
    font-family: Recoleta, sans-serif;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow.formRowWithLabel label {
        width: 100%;
        margin-bottom: 2rem;
        font-size: 2.4rem;
    }
}

.subForm > div > form .formRow.formRowWithLabel > div {
    width: 60%;
    display: flex;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow.formRowWithLabel > div {
        width: 100%;
    }
}

.subForm > div > form .formRow.frequency > div {
    gap: 0.8rem;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow.frequency > div {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
}

.subForm > div > form .formRow.frequency > div .formRow-item span {
    display: block;
}

.subForm > div > form .formRow.frequency > div .formRow-item span:nth-of-type(1) {
    color: 696969;
    font-size: 1.4rem;
}

.subForm > div > form .formRow.frequency > div .formRow-item span:nth-of-type(2) {
    color: #2e2b26;
    margin: 0.8rem 0;
    font-family: Recoleta, sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
}

.subForm > div > form .formRow.frequency > div .formRow-item span:nth-of-type(3) {
    color: 696969;
    font-size: 1.4rem;
}

.subForm > div > form .formRow.frequency > div .formRow-item button {
    margin-top: 1.2rem;
}

.subForm > div > form .formRow.date.formRowWithLabel > .formRow-item {
    flex: 1;
    align-items: center;
    gap: 1.2rem;
    display: flex;
}

@media screen and (max-width: 786px) {
    .subForm > div > form .formRow.date.formRowWithLabel > .formRow-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.subForm > div > form .formRow.date.formRowWithLabel > .formRow-item button {
    color: #fff;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    background-color: #346906;
    border: none;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

.subForm > div > form .formRow.date.formRowWithLabel > .formRow-item button:hover {
    background-color: #346906b3;
}

.subForm > div > form .formRow.date.formRowWithLabel > .formRow-item > div {
    width: 100%;
    flex: 1;
    gap: 0.8rem;
    display: flex;
    position: relative;
}

.subForm > div > form .formRow.date.formRowWithLabel > .formRow-item > div > input[type="date"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.subForm
    > div
    > form
    .formRow.date.formRowWithLabel
    > .formRow-item
    > div
    input[type="date"]::-webkit-calendar-picker-indicator {
    color: #0000;
    cursor: pointer;
    height: auto;
    width: auto;
    background: none;
    position: absolute;
    inset: 0;
}

.subForm > div > form .formRow.date.formRowWithLabel > .formRow-item > div > span {
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 1.2rem 2.4rem;
    transition: all 0.2s ease-in;
    display: block;
}

.subForm > div > form .formRow.address.formRowWithLabel {
    flex: 1;
}

.subForm > div > form .formRow.address.formRowWithLabel > div {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    display: flex;
}

.subForm > div > form .formRow.address.formRowWithLabel > div .formRow-item {
    width: 100%;
    gap: 1.2rem;
    display: flex;
}

.subForm > div > form .formRow.address.formRowWithLabel > div .formRow-item input {
    opacity: 1;
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    outline: none;
    padding: 1.2rem 0.8rem;
    font-family: inherit;
    font-size: 1.4rem;
    position: relative;
}

.subForm > div > form .formRow.address.formRowWithLabel > div .formRow-item input:hover {
    border-color: #346906;
}

.subForm > div > form .formRow.address.formRowWithLabel > div .formRow-item input:active {
    border-color: #346906b3;
}

.subForm > div > form .formRow.address.formRowWithLabel > div .formRow-item input::placeholder {
    color: #848484;
    opacity: 1;
    font-size: 1.2rem;
}

.subForm > div > form .formRow.address.formRowWithLabel > div .formRow-item button {
    color: #fff;
    text-align: center;
    cursor: pointer;
    width: 100%;
    background-color: #346906;
    border: none;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 1.2rem;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

#tomBtn.selected {
    outline-offset: 2px;
    outline: 1px solid #346906;
}

.datePickerWrap {
    border-radius: 10px;
}

.datePickerWrap.selected {
    outline-offset: 2px;
    outline: 1px solid #346906;
}

.wrapperRadio {
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.wrapperRadio + div {
    border-radius: 16px;
    outline: 1px solid #0000;
    padding: 0.8rem;
    transition: all 0.2s ease-in;
}

.wrapperRadio + div:after {
    content: "";
    width: 2rem;
    height: 2rem;
    opacity: 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 20 20' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg' style=' fill: %23346906;%0A'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
}

.wrapperRadio:hover + div {
    transform: translateY(-4px);
}

.wrapperRadio:hover + div > button:hover {
    background-color: #34690633 !important;
}

.wrapperRadio:checked + div {
    outline: 1px solid #346906b3;
    transform: translateY(-4px);
}

.wrapperRadio:checked + div:after {
    opacity: 1;
}

.wrapperRadio:checked + div button {
    outline-offset: 2px;
}

.setlayout {
    max-width: calc(1200px + 10vw);
    justify-content: space-between;
    margin: 12rem auto 8rem;
    padding: 0 5vw;
    display: flex;
}

@media screen and (max-width: 786px) {
    .setlayout {
        flex-direction: column;
        margin-top: 8rem;
    }
}

.setlayout > aside {
    width: 35%;
}

@media screen and (max-width: 786px) {
    .setlayout > aside {
        width: 100%;
    }
}

.setlayout > aside > h2 {
    margin-bottom: 4rem;
    font-size: 4.4rem;
    font-weight: 400;
    display: block;
}

@media screen and (max-width: 786px) {
    .setlayout > aside > h2 {
        margin-bottom: 0;
        font-size: 2.4rem;
    }
}

.setlayout > aside > ul {
    list-style-type: none;
}

@media screen and (max-width: 786px) {
    .setlayout > aside > ul {
        margin-bottom: 2rem;
        display: flex;
        overflow: auto;
    }
}

.setlayout > aside > ul li {
    border-radius: 10px;
    padding: 2rem;
}

@media screen and (max-width: 786px) {
    .setlayout > aside > ul li {
        white-space: nowrap;
        padding: 1.2rem;
    }
}

.setlayout > aside > ul li a {
    width: 100%;
    color: #2e2b26;
    font-family: Recoleta, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
    display: block;
}

@media screen and (max-width: 786px) {
    .setlayout > aside > ul li a {
        font-size: 1.6rem;
    }
}

.setlayout > aside > ul li.active {
    background-color: #e2eab3;
}

.setlayout > div {
    width: 60%;
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-left: 4rem;
}

@media screen and (max-width: 786px) {
    .setlayout > div {
        width: 100%;
        margin-left: 0;
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.generalSettingForm {
    padding: 5vw;
}

.generalSettingForm > p {
    flex-direction: column;
    display: flex;
}

.generalSettingForm > p label {
    margin-bottom: 0.8rem;
    font-family: Recoleta, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    display: block;
}

.generalSettingForm > p input {
    background-color: #fff;
    border: 1px solid #0000;
    border-radius: 10px;
    outline: none;
    padding: 0.8rem;
    font-family: inherit;
    font-size: 1.4rem;
    display: block;
}

.generalSettingForm > p input:hover {
    border-color: #0d5236;
}

.generalSettingForm > p:not(:last-of-type) {
    margin-bottom: 2rem;
}

.subscriptionWrap {
    justify-content: space-between;
    padding: 5vw;
    display: flex;
}

@media screen and (max-width: 786px) {
    .subscriptionWrap {
        flex-direction: column;
    }
}

.subscriptionWrap h3 {
    margin-top: 0.4rem;
    margin-bottom: 0;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    display: block;
}

@media screen and (max-width: 786px) {
    .subscriptionWrap h3 {
        margin-bottom: 2rem;
    }
}

.subscriptionWrap h3 span {
    margin-top: 0.8rem;
    font-family: Bellota, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    display: block;
}

.subscriptionWrap > div {
    flex-direction: column;
    display: flex;
}

.subscriptionWrap > div button {
    color: #fff;
    text-align: center;
    cursor: pointer;
    width: 100%;
    background-color: #346906;
    border: 1px solid #0000;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    padding: 1.2rem 2.4rem;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.2s ease-in;
    display: inline-flex;
}

.subscriptionWrap > div button:hover {
    background-color: #346906b3;
}

.subscriptionWrap > div button:nth-of-type(2) {
    color: #0d5236;
    background-color: #fff;
    border: 1px solid #0d5236;
    margin-top: 1.2rem;
}

.subscriptionWrap > div button:nth-of-type(2):hover {
    color: #346906b3;
    border-color: #346906b3;
}

.pastInvoicesWrap {
    padding: 5vw;
}

.pastInvoicesWrap > h3 {
    margin-bottom: 1.2rem;
    font-size: 2.4rem;
    font-weight: 500;
    display: block;
}

.pastInvoicesWrap > p {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    display: flex;
}

@media screen and (max-width: 786px) {
    .pastInvoicesWrap > p {
        flex-direction: column;
        align-items: flex-start;
    }

    .pastInvoicesWrap > p > span {
        margin-top: 1.2rem;
    }
}

.pastInvoicesWrap > p input[type="date"] {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    outline: none;
    padding: 0.8rem;
}

.pastInvoicesWrap > ul {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2rem;
    list-style-type: none;
    display: grid;
}

@media screen and (max-width: 640px) {
    .pastInvoicesWrap > ul {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

.pastInvoicesWrap > ul img {
    width: 100%;
    margin-bottom: 0.8rem;
    display: block;
}

.pastInvoicesWrap > ul h4 {
    font-weight: 600;
}

.pastInvoicesWrap > ul p {
    font-size: 1.4rem;
}

.loginWrap .leftRight {
    min-height: 100vh;
}

@media screen and (max-width: 786px) {
    .loginWrap .leftRight {
        min-height: unset;
    }
}

.loginWrap .leftRight .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.loginWrap .leftRight .right {
    align-items: center;
    padding-left: 5vw;
    display: flex;
}

@media screen and (max-width: 786px) {
    .loginWrap .leftRight .right {
        padding: 6rem 5vw;
    }
}

.loginWrap .leftRight .right > div h1 {
    max-width: 400px;
    margin-bottom: 1.2rem;
    font-size: 4.4rem;
    font-weight: 500;
    display: block;
}

@media screen and (max-width: 786px) {
    .loginWrap .leftRight .right > div h1 {
        font-size: 3.6rem;
    }
}

.loginWrap .leftRight .right > div form {
    flex-direction: column;
    display: flex;
}

.loginWrap .leftRight .right > div form input,
.loginWrap .leftRight .right > div form button {
    background: #f7f7f7;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    outline: none;
    margin-bottom: 1.2rem;
    padding: 1.2rem;
    font-family: inherit;
    display: block;
}

.loginWrap .leftRight .right > div form input:hover,
.loginWrap .leftRight .right > div form button:hover {
    border-color: #0d5236;
}

.loginWrap .leftRight .right > div form button {
    color: #fff;
    background-color: #346906;
}

.loginWrap .leftRight .right > div form button:hover {
    background-color: #346906b3;
}

.loginWrap .leftRight .right > div p {
    font-size: 1.4rem;
}

.nav-wrapper {
    z-index: 20;
    width: 100%;
    background-color: #0000;
    transition: all 0.2s;
    position: fixed;
    top: 0;
    left: 0;
}

.nav-wrapper.nav-scrolled {
    background-color: #fff9e1;
}

.navbar {
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5vw;
    display: flex;
    overflow: hidden;
}

.navbar img {
    height: 4rem;
    width: auto;
    justify-self: start;
    display: block;
}

.navbar ul {
    align-items: center;
    gap: 1.2rem;
    list-style: none;
    display: flex;
    transform: translateY(-0.6rem);
}

.navbar ul li a {
    border-radius: 10px;
    padding: 0.5rem 2.4rem;
    display: inline-block;
    transform: translateY(0.6rem);
}

.nav-item a {
    color: #000;
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease-out;
}

.nav-item a:hover {
    color: #346906;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    -o-transition: all 0.3s ease-in-out;
    background-color: #3f3f3f;
    border-radius: 4px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

.menu-toggle {
    justify-self: end;
    display: none;
}

.menu-toggle:hover {
    cursor: pointer;
}

#mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media only screen and (max-width: 720px) {
    .navbar {
        grid-template-columns: 1fr 1fr;
    }

    .navbar a,
    .navbar .menu-toggle {
        z-index: 30;
        position: relative;
    }

    .navbar ul {
        width: 100%;
        height: 100vh;
        text-align: center;
        z-index: 10;
        background-color: #fff9e1;
        flex-direction: column;
        justify-content: start;
        padding-top: 6rem;
        transition: all 0.3s;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        overflow: auto;
        transform: translate(-101%);
    }

    .navbar li {
        padding: 5px;
    }

    .navbar li:first-child {
        margin-top: 50px;
    }

    .navbar li a {
        font-size: 2rem;
    }

    .menu-toggle,
    .bar {
        cursor: pointer;
        display: block;
    }

    .mobile-nav {
        transform: translate(0%) !important;
    }
}

.footer {
    background-color: #0d5236;
    padding: 7.5vw;
}

.footer > div:nth-of-type(1) {
    justify-content: space-between;
    display: flex;
}

@media screen and (max-width: 786px) {
    .footer > div:nth-of-type(1) {
        flex-direction: column;
    }
}

.footer > div:nth-of-type(1) .footer-logo svg {
    width: 70%;
}

.footer > div:nth-of-type(1) .footer-logo > a {
    color: #fff;
    margin-top: 1.2rem;
    text-decoration: none;
    display: block;
}

.footer > div:nth-of-type(1) .footer-logo > .view {
    font-size: 20px;
}

.footer > div:nth-of-type(1) .footer-links {
    display: flex;
}

@media screen and (max-width: 786px) {
    .footer > div:nth-of-type(1) .footer-links {
        margin-top: 4rem;
    }
}

.footer > div:nth-of-type(1) ul {
    color: #fff;
    list-style-type: none;
}

.footer > div:nth-of-type(1) ul:not(:last-of-type) {
    margin-right: 8rem;
}

.footer > div:nth-of-type(1) ul li {
    margin-bottom: 1.2rem;
}

.footer > div:nth-of-type(1) ul li a {
    color: #fff;
    text-decoration: none;
}

.footer > div:nth-of-type(1) ul li a:hover {
    color: #c0d85a;
}

.footer > div:nth-of-type(2) {
    border-top: 1px solid #fff;
    margin-top: 4rem;
    padding-top: 4rem;
}

.footer > div:nth-of-type(2) ul {
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    list-style-type: none;
    display: flex;
}

@media screen and (max-width: 786px) {
    .footer > div:nth-of-type(2) ul {
        justify-content: flex-start;
    }
}

.footer > div:nth-of-type(2) ul li a,
.footer > div:nth-of-type(2) ul li a svg {
    display: block;
}

.footer > div:nth-of-type(2) ul li a:hover path,
.footer > div:nth-of-type(2) ul li a:hover circle {
    fill: #c0d85a;
}

.footer > div:nth-of-type(2) ul li a:hover circle + path {
    fill: #fff;
}

.stampSvg,
.bigBoxHero,
.smallBoxHero,
#leaf1,
#leaf2,
#leaf3,
#leaf4,
#leaf5,
#leaf6,
#leaf7,
#leaf8,
#leaf9,
#leaf10 {
    visibility: hidden;
}

.floating-btns {
    position: relative;
}
.floating-btns .left-float-btn {
    position: fixed;
    width: 150px;
    top: 50%;
    z-index: 1000;
    left: 5%;
}

.floating-btns .left-float-btn img,
.floating-btns .right-float-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.floating-btns .right-float-btn {
    position: fixed;
    width: 150px;
    top: 50%;
    z-index: 1000;
    right: 5%;
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px){
.floating-btns .left-float-btn,
.floating-btns .right-float-btn{
width: 100px;
}
} 

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  /* .floating-btns .left-float-btn{
display: none;
} */

.floating-btns .right-float-btn{
  top: unset;
  bottom: 5%;
  width: 60px;
}
.floating-btns .left-float-btn{
  top: 90px;
  width: 60px;
}
}