/*
File: public/assets/css/sections/cta.css
Description: Styling for the Call-to-Action Bar (Reverse Color Scheme).
*/

.cta-bar-section {
    background-color: #1a965a; /* Strong Green Background */
    background-image: linear-gradient(
        135deg,
        #1a965a 0%,
        #157e4e 100%
    ); /* Subtle gradient */
    color: white;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.cta-heading {
    font-size: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.cta-subtitle {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 1rem auto 0;
    color: rgba(255, 255, 255, 0.8); /* Light text on dark background */
}

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

/* Primary Button (White fill, Green text) */
.cta-btn-primary {
    background-color: white !important;
    color: #1a965a !important; /* Green text color */
    border: none;
    transition: all 0.3s ease;
}

.cta-btn-primary:hover {
    background-color: #f0f0f0 !important;
    transform: translateY(-2px);
}

/* Secondary Button (Outline) */
.cta-btn-secondary {
    border: 2px solid white !important;
    color: white !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

.cta-btn-secondary:hover {
    background-color: white !important;
    color: #1a965a !important; /* On hover, fill with white, change text to green */
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .cta-heading {
        font-size: 1.8rem;
    }
    .cta-buttons {
        flex-direction: column; /* Mobile par buttons ko stack karein */
    }
    .cta-buttons a {
        padding: 8px 16px !important; /* Smaller padding */
        font-size: 0.8rem !important; /* Smaller text */
        border-radius: 30px !important; /* Slightly smaller pill */
    }
}