:root {
    --cake-one-hover-bg: #b00020;
    --cake-one-hover-color: white;
    --cake-one-btn-bg: #fff;
    --cake-one-btn-color: #b00020;
    
    --cake-two-hover-bg: #000;
    --cake-two-hover-color: white;
    --cake-two-btn-bg: #fff;
    --cake-two-btn-color: #000;
    
    --cake-three-hover-bg: #000;
    --cake-three-hover-color: white;
    --cake-three-btn-bg: #fff;
    --cake-three-btn-color: #000;
    
    --cake-four-hover-bg: #000;
    --cake-four-hover-color: white;
    --cake-four-btn-bg: #fff;
    --cake-four-btn-color: #000;
    
    --cake-five-hover-bg: #000;
    --cake-five-hover-color: white;
    --cake-five-btn-bg: #fff;
    --cake-five-btn-color: #000;
    
    --cake-six-hover-bg: #000;
    --cake-six-hover-color: white;
    --cake-six-btn-bg: #fff;
    --cake-six-btn-color: #000;
}

.container-menu {
    max-width: 1380px;
    margin: auto;
    padding: 100px 0;
}

.menu-cake {
    display: flex;
    align-items: stretch;
    border-radius: 50px;
    padding: 50px;
    transition: all 0.3s ease-in;
}

.menu-cake-right {
    display: flex;
    align-items: stretch;
    border-radius: 50px;
    padding: 50px;
    transition: all 0.3s ease-in;
}



.menu-img {
    width: 600px;
    position: relative;
    display: block;
    margin-right: 24px;
}

.menu-img img {
    position: absolute;
    height: auto;
    display: block;
    width: 600px;
    left: 300px;
    top: 50%;
    translate: -50% -50%;
}

.menu-img-right {
    width: 600px;
    position: relative;
    display: block;
    margin-left: 24px;
}

.menu-img-right img {
    position: absolute;
    height: auto;
    display: block;
    width: 600px;
    right: -300px;
    top: 50%;
    translate: -50% -50%;
}

.menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1024px) {
    .menu-content {
        min-height: 300px;
    }
}

.container-menu {
    color: #000;

}

.menu-content h2 {
    font-weight: 700;
    font-size: 38px;
    line-height: 1.05;
    font-family: "Baloo 2", sans-serif;
}

.menu-content p {
    margin-top: 18px;
    font-size: 18px;
    line-height: 27px;
    opacity: 0.95;
    font-family: Helvetica, sans-serif;

}

.menu-actions {
    margin-top: 26px;
    display: flex;
    gap: 14px;
}

.btn-custom {
    height: 48px;
    padding: 0 28px 0 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
    outline: none;
    border: none;
    background: transparent;
    color: #000;
}

.menu-cake:hover .btn-custom {
    padding: 0 28px;
}

.menu-cake-right:hover .btn-custom {
    padding: 0 28px;
}

.menu-cake:hover .btn-custom-outline {
    border: 1px solid #fff;
    color: #fff;
}

.menu-cake-right:hover .btn-custom-outline {
    border: 1px solid #fff;
    color: #fff;
}




.btn-custom-solid:hover {
    transform: translateY(-2px);
}

.cake-one:hover {
    background: var(--cake-one-hover-bg);
    color: var(--cake-one-hover-color);
}

.cake-one:hover .btn-custom-solid {
    background: var(--cake-one-btn-bg);
    color: var(--cake-one-btn-color);
}

.cake-two:hover {
    background: var(--cake-two-hover-bg);
    color: var(--cake-two-hover-color);
}

.cake-two:hover .btn-custom-solid {
    background: var(--cake-two-btn-bg);
    color: var(--cake-two-btn-color);
}
.cake-three:hover {
    background: var(--cake-three-hover-bg);
    color: var(--cake-three-hover-color);
}

.cake-three:hover .btn-custom-solid {
    background: var(--cake-three-btn-bg);
    color: var(--cake-three-btn-color);
}
.cake-four:hover {
    background: var(--cake-four-hover-bg);
    color: var(--cake-four-hover-color);
}

.cake-four:hover .btn-custom-solid {
    background: var(--cake-four-btn-bg);
    color: var(--cake-four-btn-color);
}
.cake-five:hover {
    background: var(--cake-five-hover-bg);
    color: var(--cake-five-hover-color);
}

.cake-five:hover .btn-custom-solid {
    background: var(--cake-five-btn-bg);
    color: var(--cake-five-btn-color);
}
.cake-six:hover {
    background: var(--cake-six-hover-bg);
    color: var(--cake-six-hover-color);
}

.cake-six:hover .btn-custom-solid {
    background: var(--cake-six-btn-bg);
    color: var(--cake-six-btn-color);
}

@media (max-width: 1279px) {
    .container-menu {
        padding: 70px 20px;
        overflow: hidden;
    }

    .menu-cake {
        margin-left: -325px;
    }

    .menu-cake-right {
        margin-right: -325px;
    }
}

@media (max-width: 1023px) {
    .menu-cake:hover {
        background: none!important;
        color: inherit;
    }

    .menu-cake-right:hover {
        background: none!important;
        color: inherit;
    }
}

@media (max-width: 1023px) {
    .btn-custom-solid {
        color: #000 !important;
    }


    .menu-img img {
        width: 520px;
    }

    .menu-cake:hover .btn-custom {
        padding: 0 28px 0 10px;
    }

    .menu-cake-right:hover .btn-custom {
        padding: 0 28px 0 10px;
    }

    .btn-custom {
        padding-left: 10px;
    }

    .menu-content h2 {
        font-size: 45px;
    }
}

@media (max-width: 767px) {
    .container-menu {
        padding: 120px 50px;
    }

    .menu-cake {
        padding: 20px;
        margin-left: -163px;
    }

    .menu-cake-right {
        padding: 20px;
        margin-right: -163px;
    }

    .menu-img,
    .menu-img img {
        width: 400px;
    }

    .menu-img-right,
    .menu-img-right img {
        width: 400px;
    }

    .menu-img img {
        left: 163px;
    }

    .menu-img-right img {
        right: -163px;
    }

    .menu-content h2 {
        font-size: 35px;
    }

    .menu-content p {
        display: none;
    }

    .menu-actions {
        margin-top: 16px;
    }

    .btn-custom {
        font-size: 13px;
        font-weight: 400;
        height: 28px;
    }
}

@media (max-width: 639px) {

    .menu-img,
    .menu-img img {
        width: 260px;
    }

    .menu-img-right {
        display: flex;
        justify-content: start;
    }

    .menu-img-right,
    .menu-img-right img {
        width: 260px;
    }

    .menu-img-right img {
        right: -80px;
    }

    .container-menu {
        padding: 60px 20px;
    }

    .btn-custom::after {
        content: '>';
        margin-left: 10px;
    }
    .menu-cake .menu-content {
        margin-left: 15px;
    }
    .menu-cake-right .menu-content {
        margin-right: 15px;
    }
}
@media (max-width: 479px)  {  .container-menu {
        padding: 35px 20px;
    } }