/* Main CTA Styling */
.cta-main {
    background-color: #9b7ede; /* A lighter shade for distinction */
    color: #ffffff; /* White text for readability */
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center; /* Centered text */
    margin-bottom: 20px; /* Space before the next section */
}

.cta-main h3 {
    margin-bottom: 15px; /* Spacing between title and text */
}

.cta-main a {
    color: #ffffff; /* Ensure link is visible */
    text-decoration: underline; /* Underline for emphasis */
}

.cta-main a:hover {
    color: #ccd1ff; /* Lighter on hover for interaction */
}

/* Combined CTA for Social Media */
.cta-socialmedia {
    padding: 20px;
    border-radius: 8px; /* Consistent with main CTA */
    background-color: #f4f4f8; /* Light background for a softer look */
    color: #333; /* Dark text for contrast */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Matching shadow */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 10px; /* Space between elements */
    text-align: center; /* Center alignment for content */
}

.cta-socialmedia h4, .cta-socialmedia p {
    margin: 5px 0; /* Reduced margin for a denser look */
}

.cta-socialmedia a {
    color: #6200ea; /* Theme color for links */
    text-decoration: underline; /* Underline for clarity */
}

.cta-socialmedia a:hover {
    color: #7b6cd7; /* Lighter shade for hover effect */
}

/* Adjustments for small screens */
@media (max-width: 768px) {
    .cta-socialmedia {
        /* Adjust for smaller screens if necessary */
        padding: 15px;
        gap: 5px; /* Less space between elements */
    }
}