@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap');

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

body {
    font-family: 'Vazirmatn', sans-serif;
}

.banner {
    min-height: 100vh;
    background: linear-gradient(135deg,
            #fde8ee 0%,
            #fbdce5 50%,
            #f7d4df 100%);
    overflow: hidden;
}


.desktop-layout {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ribbon-side {
    flex: 1;
    text-align: center;
}

.ribbon-side img {
    width: 100%;
    max-width: 550px;
}

.content-side {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-side h1 {
    font-size: 5rem;
    font-weight: 900;
    color: #c93667;
    margin-bottom: 60px;
}

.cta-btn {
    display: inline-block;

    background: linear-gradient(90deg,
            #d63c72,
            #e64f84);

    color: #fff;
    text-decoration: none;

    padding: 28px 70px;

    font-size: 2rem;
    font-weight: 800;

    border-radius: 100px;

    transition: .3s;

    box-shadow:
        0 15px 35px rgba(214, 60, 114, .35);
}

.cta-btn:hover {
    transform: translateY(-4px);
}



.mobile-layout {
    display: flex;
    min-height: 100vh;

    padding: 40px 25px;

    text-align: center;

    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.mobile-ribbon {
    width: 80%;
    max-width: 280px;
    margin-bottom: 30px;
}

.mobile-layout h1 {
    font-size: 3rem;
    color: #c93667;
    font-weight: 900;
    margin-bottom: 35px;
}

.mobile-layout .cta-btn {
    font-size: 1.2rem;
    padding: 22px 35px;
    width: 100%;
    max-width: 350px;
}


@media (max-width: 768px) {


    .mobile-layout {
        display: flex;
    }

}