/**
 * Bright Infosystem Website
 *
 * @file cta-section.css
 * @description Styles for the final Call to Action section.
 * @version 1.1 (Added Fading Grid Shape)
 */

.cta-section {
    padding: 100px 20px;
}
.cta-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 50px;
    border-radius: 30px;
    border: 1px solid var(--divider-color);
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--secondary-color);
}
/* Gradient corners like service cards */
.cta-container::before, .cta-container::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    z-index: 1;
}
.cta-container::before {
    top: -80px;
    left: -80px;
    background: var(--accent-color);
}
.cta-container::after {
    bottom: -80px;
    right: -80px;
    background: var(--accent-secondary-color);
}

/* Animated Shapes */
.cta-shape {
    position: absolute;
    opacity: 0.1;
    z-index: 1;
}
.cta-shape-1 {
    top: 20px;
    left: 20px;
    width: 100px;
    animation: rotateShape 20s linear infinite;
}
.cta-shape-2 {
    bottom: 20px;
    right: 20px;
    width: 80px;
    animation: rotateShapeReverse 25s linear infinite;
}

/* New Fading Grid Shape */
.cta-grid-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px;
    height: 250px;
    background-image: 
        linear-gradient(var(--dark-divider-color) 1px, transparent 1px), 
        linear-gradient(to right, var(--dark-divider-color) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.2;
    z-index: 1;
    mask-image: radial-gradient(circle at bottom right, white 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle at bottom right, white 0%, transparent 60%);
}


@keyframes rotateShape {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes rotateShapeReverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.cta-content {
    position: relative;
    z-index: 2;
}
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid var(--dark-divider-color);
    border-radius: 50px;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 30px;
    background: rgba(10, 10, 10, 0.5);
}
.cta-badge .badge-icon {
    width: 16px;
    height: 16px;
}
.cta-heading {
    font-size: 44px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 auto 40px auto;
    max-width: 700px;
    line-height: 1.3;
}
.cta-heading .gradient-text {
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.5s ease-in-out;
}
.cta-heading:hover .gradient-text {
    background-position: 100% 0%;
}
.cta-button-wrapper .btn-primary {
    margin: 0 auto; /* Center the button */
}

/* Staggering animation delays */
.cta-badge.is-visible { transition-delay: 0.1s; }
.cta-heading.is-visible { transition-delay: 0.2s; }
.cta-button-wrapper.is-visible { transition-delay: 0.3s; }

/* --- Responsive Styles --- */
@media (max-width: 768px) {
    .cta-container {
        padding: 60px 20px;
    }
    .cta-heading {
        font-size: 32px;
    }
    .cta-grid-shape {
        width: 150px;
        height: 150px;
    }
}