/*=========================================
CALL TO ACTION
=========================================*/

.cta-section {

    background:
        linear-gradient(rgba(22, 101, 52, .78), rgba(22, 101, 52, .78)),
        url('https://kankrajhorehomestays.com/uploads/banner/pattern.webp');

    background-size: cover;

    background-position: center;

    margin-top: 20px;

}

.cta-wrapper {

    max-width: 1450px;

    margin: auto;

    padding: 25px 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

}

.cta-text {
    max-width: 650px;
}

.cta-text h2 {

    color: #fff;

    font-size: 40px;

    margin-bottom: 12px;

    font-weight: 700;

}

.cta-text p {

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

    font-size: 18px;

    line-height: 1.8;

}

.cta-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 30px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.cta-btn-yellow {

    background: #f4c430;

    color: #222;

}

.cta-btn-yellow:hover {

    background: #e4b31b;

}

.cta-btn-outline {

    border: 2px solid rgba(255, 255, 255, .5);

    color: #fff;

}

.cta-btn-outline:hover {

    background: #fff;

    color: #166534;

}



/* =====================================
   MOBILE RESPONSIVE (STEP 9)
   CTA Section
===================================== */

@media (max-width:768px) {

    .cta-wrapper {

        flex-direction: column !important;

        align-items: center !important;

        text-align: center;

        padding: 40px 20px;

        gap: 30px;

    }

    .cta-wrapper>div:first-child {

        max-width: 100% !important;

    }

    .cta-wrapper h2 {

        font-size: 30px !important;

        line-height: 1.3;

        margin-bottom: 15px !important;

    }

    .cta-wrapper p {

        font-size: 16px !important;

        line-height: 1.8;

    }

    .cta-wrapper>div:last-child {

        display: flex;

        width: 100%;

        flex-direction: column;

        gap: 15px;

        padding-top: 0 !important;

    }

    .cta-btn {

        width: 100%;

        justify-content: center;

        padding: 15px;

    }

}