body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
}

/* Apple-esque text gradient */
.text-gradient {
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Premium Gradient for the middle card */
.bg-gradient-pro {
    background: linear-gradient(135deg, #000000 0%, #1a1a2e 100%);
    color: white;
}

.rounded-custom {
    border-radius: 1.5rem;
}

/* Center the Razorpay injected button */
.razorpay-btn-container form {
    display: flex;
    justify-content: center;
    width: 100%;
}

.razorpay-btn-container .razorpay-payment-button {
    width: 100% !important;
    /* Make it full width of the container */
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}

/* Added utility classes */
.letter-spacing-wide {
    letter-spacing: 0.1em;
}

.transition-all {
    transition: all 0.3s ease;
}

.transition-all:hover {
    transform: translateY(-5px);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* --- Mobile Responsiveness --- */

/* Hero Text Adjustments */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2.5rem;
        /* Slightly smaller for mobile */
    }

    .display-6 {
        font-size: 1.75rem;
        /* Smaller display headings */
    }

    .lead {
        font-size: 1.1rem;
        /* Slightly smaller subtitle text */
    }

    /* Ensure action buttons wrap or stack nicely */
    .hero-btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Pricing Card Adjustments */
@media (max-width: 991.98px) {

    /* Remove hover scale on middle tier to prevent weird overlap on mobile stack */
    .bg-gradient-pro {
        transform: scale(1) !important;
    }

    /* Ensure padding is uniform on mobile */
    .card-body {
        padding: 1.5rem !important;
    }

    .card-title {
        font-size: 1.5rem;
    }
}

/* Steps section adjustments */
@media (max-width: 767.98px) {

    /* Add extra space between steps when stacked */
    .step-col {
        margin-bottom: 2rem;
    }

    /* Hide specific connecting lines if any existed, ensure clean stacking */
    .step-col:last-child {
        margin-bottom: 0;
    }
}