/* =====================================================
   TAROT LUNARIA CTA BANNER
   ===================================================== */


.lunaria-cta {

    position: relative;

    width:100vw;

    max-width:none;

    margin-left:calc(50% - 50vw);

    display:flex;

    align-items:center;

    gap:45px;

    padding:25px 8%;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.16),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #211338 0%,
            #47216e 50%,
            #7650bb 100%
        );

    color:#fff;

}


/* =====================================================
   DECOR
   ===================================================== */


.lunaria-cta::before {

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-120px;

    top:-160px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}


.lunaria-cta::after {

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:25%;

    bottom:-130px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}


/* =====================================================
   IMAGE
   ===================================================== */


.lunaria-cta__image {

    position:relative;

    z-index:2;

    flex:0 0 220px;

    display:flex;

    justify-content:center;

}


.lunaria-cta__image img {

    display:block;

    width:auto;

    max-width:220px;

    max-height:240px;

    border-radius:16px;

    object-fit:contain;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);

    transition:.4s ease;

}


.lunaria-cta:hover .lunaria-cta__image img {

    transform:scale(1.04);

}


/* =====================================================
   CONTENT
   ===================================================== */


.lunaria-cta__content {

    position:relative;

    z-index:2;

    max-width:800px;

}


.lunaria-cta__label {

    display:inline-block;

    margin-bottom:10px;

    padding:6px 14px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    font-size:12px;

    letter-spacing:.15em;

    text-transform:uppercase;

}


.lunaria-cta h2 {

    margin:0 0 12px;

    font-size:34px;

    line-height:1.2;

    font-weight:700;

    color:#fff;

}


.lunaria-cta p {

    margin:0 0 22px;

    max-width:700px;

    font-size:16px;

    line-height:1.55;

    color:rgba(255,255,255,.9);

}


/* =====================================================
   GOLD BUTTON LIKE MENU "МАГАЗИН"
   ===================================================== */


.lunaria-cta-button {

    position:relative;

    z-index:5;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #f8df83,
            #d4aa38
        );

    color:#2b1748 !important;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    border:1px solid rgba(255,255,255,.45);

    box-shadow:
        0 6px 18px rgba(0,0,0,.35),
        0 0 18px rgba(248,223,131,.55);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.lunaria-cta-button:hover {

    transform:translateY(-3px);

    color:#2b1748 !important;

    background:
        linear-gradient(
            135deg,
            #ffeaa3,
            #e0b84d
        );

    box-shadow:

        0 12px 30px rgba(0,0,0,.45),

        0 0 35px rgba(248,223,131,.8);

}



/* =====================================================
   TABLET
   ===================================================== */


@media(max-width:900px){


    .lunaria-cta {

        gap:25px;

        padding:25px 40px;

    }


    .lunaria-cta__image {

        flex-basis:170px;

    }


    .lunaria-cta__image img {

        max-width:170px;

        max-height:180px;

    }


    .lunaria-cta h2 {

        font-size:28px;

    }

}



/* =====================================================
   MOBILE
   ===================================================== */


@media(max-width:650px){


    .lunaria-cta {

        flex-direction:column;

        text-align:center;

        padding:30px 20px;

        gap:20px;

    }


    .lunaria-cta__image {

        flex-basis:auto;

    }


    .lunaria-cta__image img {

        max-width:180px;

        max-height:180px;

    }


    .lunaria-cta h2 {

        font-size:24px;

    }


    .lunaria-cta p {

        font-size:15px;

    }


    .lunaria-cta-button {

        width:100%;

    }


}