/* =================================================================== CTA section css =================================================================== */
/* Closing "Send your requirement" panel on every inner page. */
.cta {
    & .cta__panel {
        position: relative;
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        align-items: center;
        gap: var(--sp60);
        padding: var(--sp80) var(--sp70);
        background: var(--ink);
        border-radius: var(--r-xl);
        overflow: hidden;

        &::before,
        &::after {
            position: absolute;
            width: 55%; aspect-ratio: 1;
            content: '';
            pointer-events: none;
        }
        &::before { top: -60%; left: -15%; background: radial-gradient(circle, var(--glow-blue) 0%, transparent 65%); opacity: .35; }
        &::after { right: -20%; bottom: -70%; background: radial-gradient(circle, var(--glow-warm) 0%, transparent 65%); opacity: .3; }
    }

    & .cta__main,
    & .cta__side { position: relative; z-index: 1; }

    & .cta__side {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp30);
    }

    & .cta__actions {
        display: flex; flex-wrap: wrap;
        gap: var(--sp15);
    }

    & .cta__phone {
        display: flex; align-items: center;
        gap: var(--sp15);
        color: var(--white-muted);
    }

    & .cta__phone-icon {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 50px; height: 50px;
        background: var(--primary);
        border-radius: var(--r-full);
        color: var(--white);
    }

    & .cta__phone-label {
        display: block;
        font-family: var(--font-mona);
        font-weight: 500;
        color: var(--white);
    }

    & .cta__phone-value:hover { color: var(--white); }

    & .cta__note {
        font-size: var(--f14);
        color: var(--white-muted);
    }
}

/* =================================================================== CTA responsive =================================================================== */
@media (max-width: 1199.98px) {
    .cta {
        & .cta__panel { grid-template-columns: 1fr; gap: var(--sp40); padding: var(--sp60) var(--sp40); }
    }
}

@media (max-width: 575.98px) {
    .cta {
        & .cta__panel { padding: var(--sp60) var(--sp20) var(--sp40); border-radius: var(--r-lg); }
        & .cta__side { align-items: stretch; }
    }
}