/* ==========================================================
   ZENTIOHUB
   CTA.CSS
   Version: 1.0
   ========================================================== */

/* ==========================================================
   CTA SECTION
========================================================== */

.cta {

    padding-block: var(--space-9);

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    color: #ffffff;

}

/* ==========================================================
   CONTAINER
========================================================== */

.cta .container {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}

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

.cta__title {

    color: #ffffff;

    margin-bottom: var(--space-4);

}

.cta__description {

    max-width: 700px;

    margin: 0 auto var(--space-6);

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

    font-size: var(--font-size-lg);

}

/* ==========================================================
   BUTTON
========================================================== */

.cta__button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .75rem;

    padding: 1rem 2.5rem;

    background: #ffffff;

    color: var(--color-primary);

    border-radius: var(--radius-pill);

    font-weight: var(--font-weight-bold);

    font-size: var(--font-size-md);

    box-shadow: var(--shadow-lg);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal);

}

.cta__button:hover {

    background: #f8fafc;

    transform: translateY(-3px);

    box-shadow: 0 20px 40px rgba(0,0,0,.18);

}

/* ==========================================================
   NOTE
========================================================== */

.cta__note {

    margin-top: var(--space-5);

    font-size: var(--font-size-sm);

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

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .cta{

        padding-block: var(--space-8);

    }

    .cta__description{

        font-size: var(--font-size-md);

    }

    .cta__button{

        width:100%;

    }

}