:root {
        --primary: #e40f15;
        --primary-dark: #D90000;
        --secondary: #2A2A2A;
        --text-main: #222222;
        --text-muted: #666666;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Montserrat', sans-serif !important;
    }

  
    @keyframes slideInDown {
        from {
            opacity: 0;
            transform: translateY(-30px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.95)
        }

        to {
            opacity: 1;
            transform: scale(1)
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: 0.5
        }
    }

    @keyframes buttonPulse {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(228, 15, 21, 0.7)
        }

        50% {
            box-shadow: 0 0 0 15px rgba(228, 15, 21, 0)
        }
    }

    @keyframes shimmer {
        0% {
            background-position: -1000px 0
        }

        100% {
            background-position: 1000px 0
        }
    }

    @keyframes glow {

        0%,
        100% {
            text-shadow: 0 0 10px rgba(228, 15, 21, 0.5), 0 0 20px rgba(228, 15, 21, 0.3)
        }

        50% {
            text-shadow: 0 0 20px rgba(228, 15, 21, 0.8), 0 0 30px rgba(228, 15, 21, 0.5), 0 0 40px rgba(228, 15, 21, 0.3)
        }
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-8px)
        }
    }

    @keyframes heroGlow {

        0%,
        100% {
            box-shadow: 0 0 20px rgba(228, 15, 21, 0.4), 0 0 40px rgba(228, 15, 21, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.1)
        }

        50% {
            box-shadow: 0 0 40px rgba(228, 15, 21, 0.6), 0 0 80px rgba(228, 15, 21, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.2)
        }
    }

    @keyframes borderPulse {

        0%,
        100% {
            border-color: rgba(228, 15, 21, 0.5)
        }

        50% {
            border-color: rgba(228, 15, 21, 1)
        }
    }

    @keyframes innerRipple {
        0% {
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            opacity: 1;
            transform: translate(-50%, -50%)
        }

        100% {
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            opacity: 0;
            transform: translate(-50%, -50%)
        }
    }

    @keyframes iconFloat {

        0%,
        100% {
            transform: translateX(0) scale(1);
            opacity: 0
        }

        50% {
            transform: translateX(8px) scale(1.1);
            opacity: 1
        }
    }

    @keyframes ripple {
        0% {
            transform: scale(0);
            opacity: 1
        }

        100% {
            transform: scale(4);
            opacity: 0
        }
    }

    @keyframes magneticGlow {

        0%,
        100% {
            box-shadow: 0 0 20px rgba(228, 15, 21, 0.3), 0 0 40px rgba(228, 15, 21, 0.1)
        }

        50% {
            box-shadow: 0 0 40px rgba(228, 15, 21, 0.6), 0 0 80px rgba(228, 15, 21, 0.3), inset 0 0 20px rgba(228, 15, 21, 0.1)
        }
    }

    @keyframes floatUp {
        0% {
            transform: translateY(0) rotateZ(0deg)
        }

        50% {
            transform: translateY(-12px) rotateZ(1deg)
        }

        100% {
            transform: translateY(0) rotateZ(0deg)
        }
    }

    @keyframes slideShine {
        0% {
            left: -100%;
            opacity: 0
        }

        50% {
            opacity: 1
        }

        100% {
            left: 100%;
            opacity: 0
        }
    }

    @keyframes heroZoom {

        0%,
        100% {
            background-size: cover
        }

        50% {
            background-size: 105%
        }
    }

    @keyframes overlayPulse {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: 0.95
        }
    }

    @keyframes gradientShift {

        0%,
        100% {
            opacity: 0.5
        }

        50% {
            opacity: 1
        }
    }

    @keyframes titleGlow {

        0%,
        100% {
            text-shadow: 0 0 20px rgba(228, 15, 21, 0.3), 0 10px 20px rgba(0, 0, 0, 0.5)
        }

        50% {
            text-shadow: 0 0 40px rgba(228, 15, 21, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6)
        }
    }

    .text-outline-red {
        -webkit-text-stroke: 1px #ffecedb3;
        color: transparent;
        text-shadow: 2px 2px 0px rgba(255, 200, 200, 0.2);
        font-weight: 900;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.5rem;
    }

    .hero-section {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        background-image: url(../../assets/img/rec-image.jpg);
        display: flex;
        align-items: center;
        justify-content: center;
        background-repeat: no-repeat;
    }

    @keyframes heroZoom {

        0%,
        100% {
            background-size: cover;
        }

        50% {
            background-size: 105%;
        }
    }

    .hero-overlay-dark {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(228, 15, 21, 0.1) 100%);
        animation: overlayPulse 4s ease-in-out infinite;
    }

    @keyframes overlayPulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.95;
        }
    }

    .hero-overlay-gradient {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, transparent 0%, rgba(228, 15, 21, 0.05) 50%, rgba(228, 15, 21, 0.15) 100%);
        animation: gradientShift 8s ease-in-out infinite;
    }

    @keyframes gradientShift {

        0%,
        100% {
            opacity: 0.5;
        }

        50% {
            opacity: 1;
        }
    }

    .hero-content {
        position: relative;
        z-index: 10;
        max-width: 100%;
        width: 100%;
        padding: 0 !important;
    }

    .badge-custom {
        animation: fadeIn 0.8s ease-out;
    }

    .card-custom {
        animation: slideInUp 0.8s ease-out 0.5s both;
    }

    @media (min-width: 992px) {
        .hero-content {
            padding: 2.5rem 2rem;
        }
    }

    .badge-custom {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 1rem;
        border-radius: 50px;
        background-color: rgba(255, 26, 26, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 26, 26, 0.4);
        color: white;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .pulse-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--primary);
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .main-title {
        color: white;
        font-size: 3rem;
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
        text-transform: uppercase;
        filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.3));
        animation: slideInDown 0.8s ease-out, titleGlow 3s ease-in-out infinite;
        font-family: 'Inter', sans-serif;
    }

    .btn-check:focus+.btn,
    .btn:focus {
        outline: 0;
        box-shadow: 0 0 0 .25rem #dc3545 !important;
    }

    .now_button {
        text-transform: uppercase;
        animation: slideInUp 0.8s ease-out 0.3s both, heroGlow 2.5s ease-in-out infinite;
        position: relative;
        letter-spacing: 0.08em;
        font-weight: 800 !important;
    }

    .button-icon {
        display: inline-block;
        margin-left: 8px;
        animation: iconFloat 1.5s ease-in-out infinite;
        transition: all 0.3s ease;
    }

    .now_button:hover .button-icon {
        animation: none;
        transform: translateX(12px) scale(1.2);
    }

    .button-text {
        display: inline-block;
        transition: all 0.3s ease;
    }

    /* Special Offer Card Styles */
    .special-offer-wrapper {
        animation: slideInUp 0.8s ease-out 0.4s both;
        margin-bottom: 2rem;
    }

    .special-offer-card {
        background: #ffffffe0;
        border-radius: 1.2rem;
        padding: 0.9rem;
        max-width: 300px;
        position: relative;
        border: 1px solid rgb(255 255 255 / 0.25);
        overflow: hidden;
        box-shadow: 0 15px 45px rgba(228, 15, 21, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        --tw-backdrop-blur: blur(20px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    }

    .special-offer-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(228, 15, 21, 0.03) 0%, transparent 70%);
        pointer-events: none;
    }

    .special-offer-card:hover {
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 25px 60px rgba(228, 15, 21, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: translateY(-8px);
    }

    .offer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.2rem;
        position: relative;
        z-index: 1;
    }

    .offer-label {
        font-size: 0.9rem;
        font-weight: 900;
        color: #212529;
        text-transform: uppercase;
    }

    .offer-icon {
        font-size: 1.8rem;
        color: #e40f15;
        display: flex;
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    .offer-price {
        text-align: center;
        margin-bottom: 0.8rem;
        position: relative;
        z-index: 1;
        display: flex;
        gap: 0.7rem;
        align-items: baseline
    }

    .price-comparison-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
    }

    .price-comparison-inner {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .original-price {
        text-decoration: line-through;
        color: #999;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .current-price {
        color: #e53935;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .discount-badge {
        background-color: #e53935;
        color: white;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 12px;
        text-transform: uppercase;
    }

    .currency {
        font-size: 2rem;
        color: #e40f15;
        font-weight: 600;
    }

    .amount {
        font-size: 2rem;
        font-weight: 600;
        color: #e40f15;
        display: inline;
        line-height: 1;
    }

    .only {
        font-size: 0.7rem;
        font-weight: 600;
        color: #212529;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        display: inline;
        vertical-align: super;
    }

    .offer-features {
        margin-bottom: 0.8rem;
        position: relative;
        z-index: 1;
    }

    .feature-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.7rem;
        gap: 0.7rem;
    }

    .feature-item:last-child {
        margin-bottom: 0;
    }

    .feature-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.2rem;
        height: 1.2rem;
        background: #e40f15;
        color: #fff;
        border-radius: 50%;
        font-weight: 900;
        font-size: 0.75rem;
        flex-shrink: 0;
        box-shadow: 0 2px 8px #e40f153b;
    }

    .feature-text {
        color: #212529;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.3;
    }

    .btn-register-offer {
        width: auto;
        background: #e40f15;
        color: #fff;
        border: none;
        border-radius: 2rem;
        padding: 0.6rem 1.8rem;
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        position: relative;
        z-index: 1;
        overflow: hidden;
        margin: auto;
    }

    .btn-register-offer::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .btn-register-offer:hover::before {
        left: 100%;
    }

    .btn-register-offer:hover {
        transform: translateY(-2px);
    }

    .btn-register-offer:active {
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(255, 215, 0, 0.4);
    }

    .btn-text {
        position: relative;
        z-index: 2;
    }

    .btn-arrow {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;
        font-size: 0.9rem;
    }

    .btn-register-offer:hover .btn-arrow {
        transform: translateX(2px);
    }

    @media (max-width: 576px) {

        .amount {
            font-size: 3rem;
        }

        .offer-label {
            font-size: 0.7rem;
        }

        .offer-icon {
            width: 3rem;
            height: 3rem;
            font-size: 2rem;
        }

        .feature-text {
            font-size: 0.9rem;
        }

        .btn-register-offer {
            font-size: 0.95rem;
            padding: 0.9rem 1.5rem;
        }
    }

    .subtitle {
        font-size: 1.875rem;
        font-weight: 700;
        color: white;
        margin-bottom: 1.5rem;
        animation: fadeIn 1s ease-out 0.3s both;
    }
.anuda-btn-google:hover{color: #000;

}
    @media (min-width: 768px) {
        .subtitle {
            font-size: 2.25rem;
        }
       
    }

    .subtitle span {
        color: white;
        background: linear-gradient(135deg, var(--primary) 0%, #ff3333 100%);
        padding: 8px 7px;
        border-radius: 2px;
        font-weight: 800;
        display: inline-block;
        animation: scaleIn 0.8s ease-out 0.5s both;
        box-shadow: 0 4px 15px rgba(228, 15, 21, 0.4);
    }

    .description {
        color: #e5e7eb;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 1.5rem;
        border-left: 4px solid var(--primary);
        padding-left: 1.5rem;
        animation: slideInUp 0.8s ease-out 0.2s both;
        position: relative;
    }

    .description::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
        animation: borderGlow 2s ease-in-out infinite;
    }

    @keyframes borderGlow {

        0%,
        100% {
            box-shadow: 0 0 10px rgba(228, 15, 21, 0.3)
        }

        50% {
            box-shadow: 0 0 20px rgba(228, 15, 21, 0.6)
        }
    }

    @media (min-width: 768px) {
        .description {
            font-size: 1rem;
        }
    }

    .btn-hero {
        height: 3.5rem;
        padding: 0 2.5rem;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 700;
        transition: all 0.3s ease;
        border: none;
    }

    .btn-primary-custom {
        background: linear-gradient(135deg, var(--primary) 0%, #ff3333 100%);
        color: white;
        box-shadow: 0 10px 28px rgba(228, 15, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        position: relative;
        overflow: hidden;
        font-weight: 700 !important;
        letter-spacing: 0.05em;
        border: none;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .btn-primary-custom::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
        animation: slideShine 3s infinite;
    }

    .btn-primary-custom::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .btn-primary-custom:hover {
        background: linear-gradient(135deg, #ff3333 0%, var(--primary) 100%);
        color: white;
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 18px 48px rgba(228, 15, 21, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 40px rgba(228, 15, 21, 0.35);
    }

    .btn-primary-custom:hover::after {
        opacity: 1;
    }

    .btn-primary-custom:active {
        transform: translateY(-2px) scale(0.96);
        box-shadow: 0 10px 24px rgba(228, 15, 21, 0.3);
    }

    .btn-secondary-custom {
        background-color: white;
        color: var(--text-main);
        border: 2px solid #e5e7eb;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }

    .btn-secondary-custom:hover {
        background-color: #f3f4f6;
        color: var(--text-main);
        border-color: #d1d5db;
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .material-icon-btn {
        font-size: 24px;
        color: var(--primary);
    }

    .card-custom {
        background-color: white;
        padding: 1.5rem;
        border-radius: 1.5rem;
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
        max-width: 20rem;
        border-top: 4px solid var(--primary);
        animation: slideInUp 0.8s ease-out 0.3s both;
    }

    .card-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #f3f4f6;
    }

    .card-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .card-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #fef2f2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        border: 2px solid #fee2e2;
        flex-shrink: 0;
        font-size: 1.875rem;
    }

    .card-value {
        font-size: 1.875rem;
        font-weight: 900;
        color: var(--text-main);
    }

    .card-accent {
        color: var(--primary);
    }

    .card-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #9ca3af;
        letter-spacing: 0.05em;
    }

    .modal-content {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .modal-header {
        border-radius: 1rem 1rem 0 0;
        padding: 1rem;
    }

    .modal-title {
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: 0.5px;
    }

    .form-label {
        font-weight: 500;
        color: var(--text-main);
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .form-control {
        border: 1px solid #e5e5e5;
        border-radius: 0.75rem;
        padding: 0.85rem 1.1rem;
        font-size: 14px;
        transition: all 0.3s ease;
        font-family: 'Montserrat', sans-serif;
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    }

    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(228, 15, 21, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.05);
        outline: none;
        background: white;
    }

    .form-control::placeholder {
        color: #b0b7c3;
        font-weight: 500;
    }

    .form-check {
        padding-left: 0;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .form-check-input {
        appearance: none !important;
        width: 1.1rem !important;
        height: 1.1rem !important;
        margin-top: 0.125rem !important;
        margin-right: 0.65rem !important;
        border: 2px solid #d1d5db !important;
        border-radius: 0.35rem !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        background-color: white !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    .form-check-input:checked {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 7 4 4 5-6'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 60% 60% !important;
        box-shadow: 0 4px 12px rgba(228, 15, 21, 0.25) !important;
    }

    .form-check-input:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(228, 15, 21, 0.15) !important;
        outline: none !important;
    }

    .form-check-label {
        margin-left: 0.5rem;
        font-size: 0.95rem;
        color: var(--text-main);
        cursor: pointer;
        user-select: none;
    }

    .modal-body {
        padding: 1rem 1rem !important;
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    }

    .mb-3 {
        margin-bottom: 1.25rem !important;
    }

    .modal-footer {
        padding: 1.5rem 1rem;
        gap: 0.75rem;
        background: linear-gradient(135deg, #fafbfc 0%, #f5f6f7 100%);
        border-top: 1px solid #e5e7eb;
    }

    .modal-footer .btn {
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .modal-footer .btn-secondary {
        background-color: #f3f4f6;
        color: var(--text-main);
        border: 1px solid #e5e7eb;
    }

    .modal-footer .btn-secondary:hover {
        background-color: #e5e7eb;
        color: var(--text-main);
        border-color: #d1d5db;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .modal-footer .btn-primary {
        color: white;
        box-shadow: 0 4px 15px rgba(228, 15, 21, 0.25);
    }

    .modal-footer .btn-primary:hover {
        background-color: var(--primary-dark);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(228, 15, 21, 0.35);
    }
    .bottom_fooetr{
        border-top: 1px solid #e5e5e5;
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        background-color: #fff5f5;
    }

    .form-control.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
        border-color: #dc3545;
    }

    .form-control.is-valid {
        border-color: #28a745;
        padding-right: 2.5rem;
        background-color: #f5fff8;
    }

    .form-control.is-valid:focus {
        box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.15);
        border-color: #28a745;
    }

    .form-validation-message {
        font-size: 0.85rem;
        margin-top: 0.35rem;
        display: none;
        animation: slideInUp 0.3s ease-out;
        font-weight: 500;
    }

    .form-validation-message.error {
        color: #dc3545;
        display: block;
    }

    .form-validation-message.success {
        color: #28a745;
        display: block;
    }

    .sticky-cta-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
        display: none;
        animation: slideInUp 0.5s ease-out, magneticGlow 2s ease-in-out infinite;
        padding: 1rem 2.2rem !important;
        border-radius: 50px;
        font-weight: 800;
        letter-spacing: 0.06em;
        box-shadow: 0 12px 35px rgba(228, 15, 21, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--primary) 0%, #ff3333 100%);
    }

    .sticky-cta-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.7s ease;
        z-index: 1;
    }

    .sticky-cta-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .sticky-cta-btn.show {
        display: block;
    }

    .sticky-cta-btn:hover {
        transform: translateY(-8px) scale(1.12);
        box-shadow: 0 20px 60px rgba(228, 15, 21, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 40px rgba(228, 15, 21, 0.4);
        letter-spacing: 0.08em;
        animation: none;
    }

    .sticky-cta-btn:hover::before {
        left: 100%;
    }

    .sticky-cta-btn:hover::after {
        opacity: 1;
    }

    .sticky-cta-btn:active {
        transform: translateY(-4px) scale(0.96);
        box-shadow: 0 12px 30px rgba(228, 15, 21, 0.3);
    }

    .scroll-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), #d90000);
        z-index: 1000;
        transition: width 0.1s ease;
    }

    .form-progress-bar {
        height: 3px;
        background: linear-gradient(90deg, var(--primary), #d90000);
        border-radius: 10px;
        margin-bottom: 1.5rem;
        transition: width 0.3s ease;
    }

    /* Enhanced Modal Styling */
    .modal-content {
        border: none;
        border-radius: 1.25rem;
        box-shadow: 0 25px 50px rgba(228, 15, 21, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        animation: slideInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-title {
        font-size: 1.75rem;
        font-weight: 900;
        letter-spacing: -0.01em;
    }

    .btn-close {
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        opacity: 0.8;
    }

    .btn-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    .btn-close-white {
        filter: invert(1) brightness(1.2);
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--primary), #d90000);
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #d90000, var(--primary));
    }

    .modal-footer {
        padding: 1rem 0rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        gap: 0.75rem;
    }

    .modal-body > p {
        font-size: 0.95rem;
        color: #555;
        text-align: center;
        margin-bottom: 1.5rem;
        font-weight: 500;
    }

    /* Form Label Styling */
    .form-label {
        font-weight: 600;
        color: var(--text-main);
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
        letter-spacing: -0.01em;
    }


    .form-control::placeholder {
        color: #999;
        font-weight: 500;
    }

    .form-control.is-valid {
        border-color: #28a745;
        background-color: #f8fff9;
    }

    .form-control.is-valid:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1), inset 0 0 0 1px rgba(40, 167, 69, 0.05);
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        background-color: #fff8f8;
    }

    .form-control.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1), inset 0 0 0 1px rgba(220, 53, 69, 0.05);
    }

    /* Form Validation Messages */
    .form-validation-message {
        font-size: 0.8rem;
        margin-top: 0.35rem;
        font-weight: 500;
        min-height: 18px;
    }

    .form-validation-message.success {
        color: #28a745;
    }

    .form-validation-message.error {
        color: #dc3545;
    }

    .form-check-label {
        cursor: pointer;
        color: var(--text-muted);
        font-weight: 500;
        font-size: 0.9rem;
        line-height: 1.5;
        transition: color 0.2s ease;
    }

    .form-check-label:hover {
        color: var(--text-main);
    }

    .form-check-label a {
        transition: all 0.2s ease;
    }

    .form-check-label a:hover {
        opacity: 0.8;
    }

    .form-check-input2:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(228, 15, 21, 0.1);
    }

    /* Modal Form Buttons */
    .modal-footer .btn-secondary {
        background-color: #f0f0f0;
        color: var(--text-main);
        border: none;
        font-weight: 600;
        transition: all 0.3s ease;
        padding: 0.65rem 1.75rem;
        border-radius: 0.65rem;
    }

    .modal-footer .btn-secondary:hover {
        background-color: #e5e5e5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .modal-footer .btn-primary {
        background: linear-gradient(135deg, var(--primary) 0%, #c41c0a 100%);
        font-weight: 600;
        padding: 0.65rem 1.75rem;
        border-radius: 0.65rem;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        overflow: hidden;
    }

    .modal-footer .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        transition: left 0.3s ease;
    }

    .modal-footer .btn-primary:hover {
        box-shadow: 0 8px 24px rgba(228, 15, 21, 0.35);
        transform: translateY(-2px);
    }

    .modal-footer .btn-primary:hover::before {
        left: 100%;
    }

    /* Form Row Spacing */
    .form-check ~ .form-validation-message {
        margin-top: 0.5rem;
    }

    .mb-3 {
        margin-bottom: 1.25rem;
    }

    .row > div > .mb-3 {
        margin-bottom: 0;
    }

    /* Modal Dialog Enhancement */
    .modal-dialog-centered {
        max-width: 520px;
    }

    /* Why Partner With Us Section */
    .why-partner-section {
        padding: 4rem 0;
        background: linear-gradient(180deg, #ffffff 0%, #fef9f9 100%);
        position: relative;
    }

    .why-partner-header {
        text-align: center;
        margin-bottom: 3.5rem;
    }

    .why-partner-icon {
        font-size: 2.75rem !important;
        color: var(--primary);
        margin-bottom: 1rem;
        display: block;
    }

    .why-partner-title {
        font-size: 2.75rem;
        font-weight: 900;
        color: var(--text-main);
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
        text-transform: uppercase;
    }

    .why-partner-subtitle {
        font-size: 1.15rem;
        color: var(--text-muted);
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .why-partner-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 4rem;
        position: relative;
        z-index: 2;
    }

    @media (min-width: 768px) {
        .why-partner-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 2.5rem;
        }
    }

    .why-partner-card {
        background: white;
        padding: 2rem;
        border-radius: 1.25rem;
        border: 2px solid transparent;
        text-align: center;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        position: relative;
        overflow: hidden;
        animation: slideInUp 0.6s ease-out both;
    }

    .why-partner-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, rgba(228, 15, 21, 0.5) 50%, transparent 100%);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .why-partner-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .why-partner-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .why-partner-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .why-partner-card:nth-child(4) {
        animation-delay: 0.4s;
    }

    .why-partner-card:hover {
        transform: translateY(-16px) scale(1.03);
        box-shadow: 0 32px 64px rgba(228, 15, 21, 0.2);
        background: linear-gradient(135deg, #fef9f9 0%, #fffdfd 100%);
        border-color: rgba(228, 15, 21, 0.2);
    }

    .why-partner-card:hover::before {
        transform: scaleX(1);
    }

    .why-partner-card-icon {
        width: 5rem;
        height: 5rem;
        background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        border: 3px solid rgba(228, 15, 21, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.75rem;
        /* transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); */
        box-shadow: 0 8px 24px rgba(228, 15, 21, 0.12);
        position: relative;
        /* animation: iconFloat 3s ease-in-out infinite; */
    }

    .why-partner-card:hover .why-partner-card-icon {
        background: linear-gradient(135deg, var(--primary) 0%, #d90000 100%);
        /* transform: scale(1.25) rotate(12deg); */
        box-shadow: 0 16px 40px rgba(228, 15, 21, 0.35);
        border-color: rgba(255, 255, 255, 0.4);
        /* animation: pulse 2s ease-in-out infinite; */
    }

    .why-partner-card-icon span {
        font-size: 2.2rem !important;
        color: var(--primary);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        z-index: 1;
    }

    .why-partner-card:hover .why-partner-card-icon span {
        color: white;
    }

    .why-partner-card-title {
        font-size: 1.35rem;
        font-weight: 900 !important;
        color: var(--text-main);
        margin-bottom: 1.1rem !important;
        letter-spacing: -0.5px;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .why-partner-card:hover .why-partner-card-title {
        color: var(--primary);
    }

    .why-partner-card-desc {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin: 0 !important;
        line-height: 1.8;
        transition: all 0.5s ease;
        font-weight: 500;
    }

    .why-partner-card:hover .why-partner-card-desc {
        color: #444;
    }

    .why-partner-image {
        position: relative;
        height: 400px;
        border-radius: 1.5rem;
        overflow: hidden;
        margin-top: 4rem;
    }

    .why-partner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .why-partner-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem 2rem;
    }

    /* Testimonials */
    .testimonials-header {
        text-align: center;
        margin-bottom: 2rem;
        animation: fadeIn 0.8s ease-out;
    }

    .testimonials-title {
        font-size: 2rem;
        font-weight: 900 !important;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem !important;
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .testimonials-subtitle {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.85);
        margin: 0 !important;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .testimonial-slider-container {
        position: relative;
        width: 100%;
        max-width: 900px;
    }

    .testimonials-wrapper {
        position: relative;
        overflow: hidden;
    }

    .testimonial-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .testimonial-card {
        flex: 0 0 100%;
        padding: 0;
    }

    .testimonial-content {
        background: white;
        padding: 1.75rem;
        border-radius: 0.75rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border-left: 4px solid var(--primary);
        border-top: 2px solid transparent;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: all 0.3s ease;
        animation: slideInUp 0.6s ease-out both;
    }

    .testimonial-content:hover {
        box-shadow: 0 30px 60px rgba(228, 15, 21, 0.15);
        transform: translateY(-8px);
        border-top-color: var(--primary);
    }

    .testimonial-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .testimonial-stars {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .testimonial-stars span {
        font-size: 1.25rem !important;
        color: #fbbf24;
    }

    .testimonial-badge {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-weight: 900;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--primary);
        background: #fef2f2;
        padding: 0.375rem 0.75rem;
        border-radius: 50px;
        flex-shrink: 0;
    }

    .testimonial-quote {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-main);
        margin-bottom: 1.75rem;
        font-style: italic;
        line-height: 1.7;
        position: relative;
        padding-left: 1.5rem;
    }

    .testimonial-quote::before {
        content: '"';
        position: absolute;
        left: 0;
        top: -0.5rem;
        font-size: 2.5rem;
        color: var(--primary);
        opacity: 0.3;
    }

    .testimonial-author {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid #f3f4f6;
    }

    .testimonial-avatar {
        width: 2.75rem;
        height: 2.75rem;
        background: linear-gradient(135deg, var(--primary), #d90000);
        border-radius: 50%;
        flex-shrink: 0;
    }

    .testimonial-author-info {
        flex: 1;
    }

    .testimonial-author-name {
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--text-main);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .testimonial-author-title {
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--primary);
        margin: 0.25rem 0 0;
    }

    .testimonial-location {
        font-weight: 500;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin: 0.125rem 0 0;
    }

    .slider-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 36rem;
        z-index: 10;
        padding: 0 1rem;
    }

    .slider-nav-btn {
        position: absolute;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        background: white;
        color: var(--primary);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
        top: 50%;
    }

    .slider-nav-btn#prevBtn {
        left: -36%;
        transform: translateY(-50%);
        background-color: var(--primary);
        border: none;
        color: #fff;
    }

    .slider-nav-btn#nextBtn {
        right: -36%;
        transform: translateY(-50%);
    }

    .slider-nav-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        transform: scale(1.1);
    }

    .slider-dots {
        display: none;
        gap: 0.75rem;
        justify-content: center;
        width: 100%;
    }

    .slider-dot {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background-color: #d1d5db;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        padding: 0;
    }

    .slider-dot.active {
        background-color: var(--primary);
        width: 2rem;
        border-radius: 999px;
    }

    @media (max-width: 1024px) {
        .slider-controls {
            max-width: 30rem;
        }

        .slider-nav-btn#prevBtn {
            left: -30%;
        }

        .slider-nav-btn#nextBtn {
            right: -30%;
        }

        .slider-nav-btn {
            width: 2.25rem;
            height: 2.25rem;
            font-size: 1.1rem;
        }
    }

    @media (max-width: 767px) {
        .slider-controls {
            max-width: 100%;
            padding: 0 0.5rem;
            bottom: 150px;
        }

        .slider-nav-btn {
            width: 2rem;
            height: 2rem;
            font-size: 1rem;
            position: static;
            transform: none !important;
        }

        .slider-nav-btn#prevBtn {
            left: auto;
            transform: none !important;
        }

        .slider-nav-btn#nextBtn {
            right: auto;
            transform: none !important;
        }

        .slider-dot {
            width: 0.6rem;
            height: 0.6rem;
        }

        .slider-dot.active {
            width: 1.5rem;
        }
    }

    @media (max-width: 576px) {
        .slider-controls {
            display: none !important;
        }

        .slider-nav-btn {
            width: 1.75rem;
            height: 1.75rem;
            font-size: 0.9rem;
            position: relative;
            margin: 0 0.25rem;
        }

        .slider-nav-btn#prevBtn {
            order: 1;
        }

        .slider-dots {
            order: 2;
            display: flex !important;
            width: 100%;
            margin-top: 0.75rem;
        }

        .slider-nav-btn#nextBtn {
            order: 3;
        }

        .slider-dot {
            width: 0.5rem;
            height: 0.5rem;
        }

        .slider-dot.active {
            width: 1rem;
        }
    }

    @media (max-width: 767px) {
        .bottom_fooetr{
                flex-wrap: revert;
    }
    .bottom_fooetr .btn{
            padding: 10px 12px;
                font-size: 14px;
    }
    .form-check-label{
        font-size: 14px;
    }
    .form-control{
        font-size: 14px;
    }
    .form-label{
        font-size: 14px;
    }
        .why-partner-section {
            padding: 2rem 1rem;
        }

        .why-partner-container {
            padding: 0 0.5rem;
        }

        .why-partner-header {
            margin-bottom: 2rem;
        }

        .why-partner-title {
            font-size: 1.75rem;
            font-weight: 800 !important;
            margin-bottom: 0.75rem !important;
            letter-spacing: -0.5px;
        }

        .why-partner-subtitle {
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .why-partner-icon {
            font-size: 2rem !important;
            margin-bottom: 0.75rem;
        }

        .why-partner-grid {
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .why-partner-card {
            padding: 1.5rem 1.25rem;
            border-radius: 1rem;
            border: 1.5px solid #f5e0e0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .why-partner-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 16px 32px rgba(228, 15, 21, 0.12);
        }

        .why-partner-card-icon {
            width: 4rem;
            height: 4rem;
            margin: 0 auto 1.25rem;
            box-shadow: 0 6px 16px rgba(228, 15, 21, 0.08), inset 0 1px 3px rgba(255, 255, 255, 0.6);
        }

        .why-partner-card:hover .why-partner-card-icon {
            transform: scale(1.15) rotate(10deg);
            box-shadow: 0 10px 24px rgba(228, 15, 21, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.2);
        }

        .why-partner-card-icon span {
            font-size: 1.95rem !important;
        }

        .why-partner-card:hover .why-partner-card-icon span {
            transform: scale(1.1);
        }

        .why-partner-card-title {
            font-size: 1.15rem;
            font-weight: 800 !important;
            margin-bottom: 0.9rem !important;
            letter-spacing: -0.3px;
        }

        .why-partner-card-title::after {
            bottom: -6px;
            height: 2px;
        }

        .why-partner-card:hover .why-partner-card-title::after {
            width: 60px;
        }

        .why-partner-card-desc {
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .why-partner-image {
            height: 480px;
            margin-top: 2.5rem;
            border-radius: 1rem;
        }

        .why-partner-overlay {
            padding: 1.5rem 1rem;
        }

        .testimonials-header {
            margin-bottom: 1.5rem;
        }

        .testimonials-title {
            font-size: 1.5rem;
            margin-bottom: 0.35rem !important;
        }

        .testimonials-subtitle {
            font-size: 0.9rem;
        }

        .testimonial-slider-container {
            max-width: 100%;
            width: 90vw;
            max-width: 800px;
        }

        .testimonial-content {
            padding: 1.5rem 1.25rem;
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
        }

        .testimonial-header {
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .testimonial-stars {
            gap: 0.15rem;
        }

        .testimonial-stars span {
            font-size: 1.1rem !important;
        }

        .testimonial-badge {
            font-size: 0.6rem;
            padding: 0.3rem 0.6rem;
        }

        .testimonial-quote {
            font-size: 0.9rem;
            margin-bottom: 1.25rem;
            padding-left: 1.25rem;
            line-height: 1.6;
        }

        .testimonial-quote::before {
            font-size: 2rem;
            top: -0.25rem;
        }

        .testimonial-author {
            gap: 0.75rem;
            padding-top: 1.25rem;
        }

        .testimonial-avatar {
            width: 2.5rem;
            height: 2.5rem;
        }

        .testimonial-author-name {
            font-size: 0.85rem;
            letter-spacing: 0.3px;
        }

        .testimonial-author-title {
            font-size: 0.75rem;
            margin: 0.2rem 0 0;
        }

        .testimonial-location {
            font-size: 0.7rem;
            margin: 0.1rem 0 0;
        }

        .slider-nav-btn {
            width: 2rem;
            height: 2rem;
            font-size: 1rem;
        }

        .slider-nav-btn#prevBtn {
            left: 17px;
            transform: translateY(-190%);
        }

        .slider-nav-btn#nextBtn {
            right: 17px;
            transform: translateY(-190%);
        }

        .slider-controls {
            max-width: 32rem;
            padding: 0 0.5rem;
        }

        .success-story-card {
            max-width: 100%;
            padding: 1.5rem;
        }

        .success-story-quote {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 767px) {
        .main-title {
            font-size: 2.5rem;
        }

        .modal-body {
            padding: 1.5rem !important;
        }
    }

    /* Growth Path / Stages Section */
    .growth-path-section {
        padding: 4rem 0;
        background: white;
        position: relative;
    }

    .growth-path-header {
        text-align: center;
        margin-bottom: 3.5rem;
    }

    .growth-path-icon {
        font-size: 2.75rem !important;
        color: var(--primary);
        margin-bottom: 1rem;
        display: block;
    }

    .growth-path-title {
        font-size: 2.75rem;
        font-weight: 900 !important;
        color: var(--text-main);
        text-transform: uppercase;
        letter-spacing: -1px;
        margin-bottom: 1rem !important;
    }

    @media (min-width: 768px) {
        .growth-path-title {
            font-size: 3.5rem;
        }
    }

    .growth-path-subtitle {
        font-size: 1.1rem;
        color: var(--text-muted);
        margin: 0;
    }

    .growth-path-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
        .growth-path-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            align-items: flex-start;
        }
    }

    .pricing-card {
        background: #f9fafb;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        animation: slideInUp 0.6s ease-out;
        animation-fill-mode: both;
        border: 2px solid transparent;
    }

    .pricing-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .pricing-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .pricing-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .pricing-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Add a transition to the header so the color change isn't instant/jittery */
    .pricing-header {
        transition: background 0.3s ease, color 0.3s ease;
    }

    .pricing-card:hover {
        box-shadow: 0 20px 50px rgba(228, 15, 21, 0.2);
        transform: translateY(-12px);
        border: 1px solid var(--primary);
    }
    .pricing-card:hover .pricing-rate-value {
        color: #e60000;
    }

    /* This is the magic line you needed */
    .pricing-card:hover .pricing-header {
        background: var(--primary);
        color: white;
    }
    .pricing-card:hover .pricing-feature {
        color: #222;
        font-weight: 600;
    }

    .pricing-card:hover::before {
        opacity: 1;
    }

    @media (min-width: 768px) {
        .pricing-card.featured {
            /* border: 2px solid var(--primary); */
            background: white;
        }

        .pricing-card.featured:hover {
            transform: translateY(-2.5rem);
        }
    }

    .pricing-card.featured {
        /* border: 2px solid var(--primary); */
        background: white;
    }

    .pricing-header {
        background: #222;
        color: white;
        padding: 1.5rem;
        text-align: center;
    }

    .pricing-header h3 {
        font-size: 1.5rem;
        font-weight: 900 !important;
        margin: 0 !important;
        letter-spacing: 0.5px;
    }

    .pricing-header p {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0.5rem 0 0 !important;
        opacity: 0.8;
    }

    .pricing-card.featured .pricing-header p {
        color: rgba(255, 255, 255, 0.9);
    }

    .pricing-badge {
        position: absolute;
        top: -1px;
        right: 0;
        background: var(--primary);
        color: white;
        padding: 0.4rem 1rem;
        font-size: 0.65rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-radius: 0 0 0 0.5rem;
    }

    @media (min-width: 768px) {
        .pricing-badge {
            top: 1rem;
            right: 1rem;
            border-radius: 0.5rem;
        }
    }

    .pricing-rate {
        padding: 2rem 1.5rem;
        background: #f3f4f6;
        text-align: center;
        border-bottom: 1px solid #e5e7eb;
    }

    .pricing-card.featured .pricing-rate {
        background: linear-gradient(135deg, #fef9f9 0%, #fff5f5 100%);
        border-bottom-color: #ffb3b3;
    }

    .pricing-rate-label {
        font-size: 0.85rem;
        color: #6b7280;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .pricing-rate-value {
        font-size: 2.75rem;
        font-weight: 900 !important;
        color: #222;
        letter-spacing: -1px;
    }


    .pricing-features {
        padding: 2rem 1.5rem;
        flex-grow: 1;
    }

    .pricing-feature {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.25rem;
        font-size: 0.95rem;
        color: #4b5563;
        line-height: 1.6;
    }

    .pricing-feature:last-child {
        margin-bottom: 0;
    }

    .pricing-feature-icon {
        color: var(--primary);
        font-size: 1.25rem !important;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    .pricing-action {
        padding: 2rem 0 1rem 0;
        width: 100%;
        text-align: center;
    }

    .pricing-card.featured .pricing-action {
        background: transparent;
        border-top-color: #ffb3b3;
    }

    .pricing-btn {
        padding: 1.1rem 3rem;
        background: linear-gradient(135deg, var(--primary) 0%, #ff3333 100%);
        color: white;
        border: 2px solid transparent;
        border-radius: 50px;
        font-weight: 900 !important;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        cursor: pointer;
        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 15px 40px rgba(228, 15, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        position: relative;
        overflow: hidden;
        display: inline-block;
        animation: slideInUp 0.8s ease-out both;
    }

    .pricing-btn::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
        animation: slideShine 4s infinite;
        z-index: 1;
    }

    .pricing-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 1;
    }

    .pricing-btn:hover {
        transform: translateY(-10px) scale(1.08);
        box-shadow: 0 5px 20px rgba(228, 15, 21, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 50px rgba(228, 15, 21, 0.4);
        letter-spacing: 0.18em;
        background: linear-gradient(135deg, #ff3333 0%, var(--primary) 100%);
    }

    .pricing-btn:hover::after {
        opacity: 1;
    }

    .pricing-btn:active {
        transform: translateY(-4px) scale(0.96);
        box-shadow: 0 15px 30px rgba(228, 15, 21, 0.3);
    }

    .pricing-btn:focus {
        outline: 3px solid rgba(228, 15, 21, 0.4);
        outline-offset: 3px;
    }

    @media (max-width: 767px) {
        .growth-path-section {
            padding: 2.5rem 0;
        }

        .growth-path-header {
            margin-bottom: 2.5rem;
        }

        .growth-path-icon {
            font-size: 2.25rem !important;
            margin-bottom: 0.75rem;
        }

        .growth-path-title {
            font-size: 1.75rem;
            letter-spacing: -0.5px;
            margin-bottom: 0.75rem !important;
        }

        .growth-path-subtitle {
            font-size: 1rem;
        }

        .growth-path-grid {
            gap: 1.5rem;
        }

        .pricing-card {
            border-radius: 1rem;
        }

        .pricing-card.featured {
            transform: none;
            margin-bottom: 0;
        }

        .pricing-header {
            padding: 1.25rem;
        }

        .pricing-header h3 {
            font-size: 1.25rem;
        }

        .pricing-rate {
            padding: 1.5rem;
        }

        .pricing-rate-value {
            font-size: 2rem;
        }

        .pricing-card.featured .pricing-rate-value {
            font-size: 2.5rem;
        }

        .pricing-features {
            padding: 1.5rem;
        }

        .pricing-feature {
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .pricing-action {
            padding: 1.25rem;
        }

        .pricing-btn {
            padding: 0.8rem 1.25rem;
            font-size: 0.85rem;
        }
    }

    /* Milestone Rewards Section */
    .rewards-section {
        padding: 4rem 0;
        background: #ffffff;
        position: relative;
        overflow: hidden;
    }

    .rewards-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(#000 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.1;
        pointer-events: none;
    }

    .rewards-header {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
        z-index: 1;
    }

    .rewards-icon-circle {
        width: 4rem;
        height: 4rem;
        background: rgb(0 0 0 / 20%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        backdrop-filter: blur(10px);
    }

    .rewards-icon-circle span {
        font-size: 1.875rem !important;
        color: white;
    }

    .rewards-title {
        font-size: 2.75rem;
        font-weight: 900 !important;
        color: #222222;
        text-transform: uppercase;
        letter-spacing: -1px;
        margin-bottom: 1rem !important;
    }

    @media (min-width: 768px) {
        .rewards-title {
            font-size: 3.5rem;
        }
    }

    .rewards-subtitle {
        font-size: 1.1rem;
        color: #666666;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* Rewards Cards Container */
    .rewards-cards-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        position: relative;
        z-index: 1;
        margin-bottom: 2rem;
    }

    .reward-card {
        background: white;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        flex-direction: column;
        border: 2px solid transparent;
        position: relative;
        animation: slideInUp 0.6s ease-out both;
    }

    .reward-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, rgba(228, 15, 21, 0.6) 0%, rgba(228, 15, 21, 0.3) 50%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 10;
    }

    .reward-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .reward-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .reward-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .reward-card:nth-child(4) {
        animation-delay: 0.4s;
    }

    .reward-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 10px 60px rgba(228, 15, 21, 0.15);
        border-color: rgba(228, 15, 21, 0.2);
    }

    .reward-card:hover::before {
        transform: scaleX(1);
    }

    .reward-card-header {
        padding: 1.2rem 1.5rem;
        gap: 1rem;
        background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%);
        border-bottom: 2px solid transparent;
        text-align: center;
        transition: all 0.3s ease;
    }

    .reward-card:hover .reward-card-header {
        background: linear-gradient(135deg, #fff5f5 0%, #fef9f9 100%);
        border-bottom-color: rgba(228, 15, 21, 0.1);
    }


    .stage-icon {
        height: 3rem;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
        position: relative;
        margin-bottom: 10px;
    }

    .stage-icon img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .stage-icon .user_menu_i {
        width: 70px;
        height: 66px;
        z-index: 1;
    }

    .user_menu_i2 {
        width: 40px !important;
        height: 40px !important;
        z-index: 2;
    }


    .reward-card-header.premium-header .stage-icon.diamond {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .reward-stage-name {
        font-size: 1.5rem;
        font-weight: 900 !important;
        color: var(--text-main);
        margin: 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .reward-card-body {
        padding: 1.75rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .reward-target-section {
        text-align: center;
    }

    .reward-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6b7280;
        margin: 0 0 0.5rem 0;
    }

    .reward-target {
        font-size: 2rem;
        font-weight: 900 !important;
        color: var(--primary);
        margin: 0 !important;
        letter-spacing: -0.5px;
    }

    .reward-sublabel {
        font-size: 0.85rem;
        color: #6b7280;
        margin: 0.25rem 0 0 0 !important;
        font-weight: 500;
    }

    .reward-divider {
        height: 1px;
        background: #e5e7eb;
    }

    .reward-items-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .reward-items-section .reward-label {
        text-align: left;
    }

    .reward-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.95rem;
        color: var(--text-main);
        padding: 0.85rem;
        background: #f9fafb;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        border-left: 3px solid rgba(228, 15, 21, 0.2);
    }

    .reward-card:hover .reward-item {
        background: #fff5f5;
        border-left-color: rgba(228, 15, 21, 0.4);
        transform: translateX(4px);
    }

    .reward-icon {
        color: var(--primary);
        font-size: 1.35rem !important;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .reward-text {
        font-weight: 600;
        color: var(--text-main);
        line-height: 1.4;
    }

    .reward-card-btn {
        background: linear-gradient(135deg, var(--primary) 0%, #d90000 100%);
        color: white;
        padding: 0.9rem 1.5rem;
        border: none;
        border-radius: 0.75rem;
        font-weight: 700 !important;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(228, 15, 21, 0.2);
        margin-top: auto;
        position: relative;
        overflow: hidden;
    }

    .reward-card-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        transition: left 0.4s ease;
    }

    .reward-card-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 35px rgba(228, 15, 21, 0.35);
        background: linear-gradient(135deg, #d90000 0%, var(--primary) 100%);
    }

    .reward-card-btn:hover::before {
        left: 100%;
    }

    .ultimate-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.25);
        color: white;
        padding: 0.35rem 0.75rem;
        border-radius: 50px;
        font-size: 0.65rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-left: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

    .diamond-card {
        border: 2px solid var(--primary);
        box-shadow: 0 10px 40px rgba(228, 15, 21, 0.15);
    }

    .diamond-card:hover {
        box-shadow: 0 30px 60px rgba(228, 15, 21, 0.25);
    }

    .diamond-card .reward-target {
        color: #d90000;
    }

    .premium-btn {
        background: white;
        color: var(--primary);
        border: 2px solid var(--primary);
    }

    .premium-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    @media (max-width: 767px) {
        .rewards-section {
            padding: 2.5rem 0;
        }

        .rewards-header {
            margin-bottom: 2rem;
        }

        .rewards-icon-circle {
            width: 3rem;
            height: 3rem;
            margin-bottom: 1rem;
        }

        .rewards-icon-circle span {
            font-size: 1.5rem !important;
        }

        .rewards-title {
            font-size: 1.75rem;
            letter-spacing: -0.5px;
            margin-bottom: 0.75rem !important;
        }

        .rewards-subtitle {
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .rewards-cards-container {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .reward-card {
            border-radius: 1rem;
        }

        .reward-card-header {
            padding: 1.5rem;
        }

        .stage-icon {
            height: 2.5rem;
            font-size: 1.25rem;
            margin-bottom: 15px;
        }

        .reward-stage-name {
            font-size: 1.25rem;
        }

        .reward-card-body {
            padding: 1.5rem;
            gap: 1.25rem;
        }

        .reward-target {
            font-size: 1.75rem;
        }

        .reward-label {
            font-size: 0.7rem;
        }

        .reward-item {
            padding: 0.65rem;
            font-size: 0.9rem;
        }

        .reward-icon {
            font-size: 1.2rem !important;
        }

        .reward-card-btn {
            padding: 0.8rem 1.5rem;
            font-size: 0.8rem;
        }

        .ultimate-badge {
            padding: 0.3rem 0.6rem;
            font-size: 0.6rem;
            margin-left: 0.5rem;
        }
    }

    /* Anuda Live Section */
    .anuda-live-section {
        background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
        color: white;
        padding: 6rem 0;
        position: relative;
        overflow: hidden;
    }

    .anuda-live-section::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: radial-gradient(circle at right, rgba(228, 15, 21, 0.1), transparent);
        pointer-events: none;
    }

    .anuda-live-header {
        text-align: center;
        margin-bottom: 4rem;
        position: relative;
        z-index: 1;
    }

    .anuda-live-icon {
        font-size: 3rem !important;
        color: var(--primary);
        display: block;
        margin-bottom: 1rem;
        animation: floatUp 3s ease-in-out infinite;
    }

    .anuda-live-title {
        font-size: 2.5rem;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: 1rem;
        color: white;
    }

    .anuda-live-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.7);
        max-width: 600px;
        margin: 0 auto;
    }

    .anuda-live-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
        position: relative;
        z-index: 2;
    }

    .anuda-content-left {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding-bottom: 2rem;
    }

    .anuda-content-box {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(228, 15, 21, 0.3);
        border-radius: 1.5rem;
        padding: 2rem;
        backdrop-filter: blur(10px);
    }

    .anuda-features-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .anuda-feature-item {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .anuda-feature-icon {
        font-size: 1.75rem !important;
        color: var(--primary);
        flex-shrink: 0;
        margin-top: 0.25rem;
    }

    .anuda-feature-title {
        font-size: 1rem;
        font-weight: 700;
        color: white;
        margin-bottom: 0.25rem;
    }

    .anuda-feature-desc {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
    }

    .anuda-buttons-group {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .anuda-btn {
        padding: 1rem 1.75rem !important;
        border-radius: 0.75rem !important;
        font-weight: 700;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        text-decoration: none;
        cursor: pointer;
    }

    .anuda-btn-google {
        background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
        color: #1f2937;
        min-width: 220px;
        justify-content: center;
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
    }

    .anuda-btn-google::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .anuda-btn-google:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
        background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    }

    .anuda-btn-google:hover::after {
        width: 300px;
        height: 300px;
    }

    .anuda-btn-google .material-symbols-outlined {
        font-size: 1.5rem;
    }

    .anuda-btn-register {
        background: linear-gradient(135deg, var(--primary) 0%, #cc0000 100%);
        color: white !important;
        min-width: 200px;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .anuda-btn-register::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        transition: left 0.3s ease;
    }

    .anuda-btn-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(228, 15, 21, 0.4);
    }

    .btn-text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        align-items: flex-start;
    }

    .btn-subtext {
        font-size: 0.7rem;
        opacity: 0.75;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .btn-maintext {
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    @media (min-width: 992px) {
        .anuda-content-left {
            padding-bottom: 0;
            padding-right: 2rem;
        }
    }

    .anuda-content-right {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-mockup-wrapper {
        position: relative;
        width: 100%;
        max-width: 400px;
    }

    .mobile-phone-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 19;
        background: #0a0a0a;
        border-radius: 2.5rem;
        padding: 0.75rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        overflow: hidden;
    }

    .phone-notch {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
        height: 1.5rem;
        background: #000;
        border-radius: 0 0 1.5rem 1.5rem;
        z-index: 10;
    }

    .phone-screen {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
    }

    .phone-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 2rem;
    }

    .earnings-card {
        background: linear-gradient(135deg, var(--primary) 0%, #cc0000 100%);
        padding: 1.25rem;
        border-radius: 1rem;
        margin-bottom: 1rem;
    }

    .earnings-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .earnings-amount {
        font-size: 1.75rem;
        font-weight: 900;
        color: white;
        margin-bottom: 0.5rem;
    }

    .earnings-growth {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.9);
    }

    .growth-badge {
        background: rgba(255, 255, 255, 0.2);
        padding: 0.25rem 0.75rem;
        border-radius: 0.5rem;
        font-weight: 700;
    }

    .phone-header {
        height: 1rem;
    }

    .btn-phone-play {
        background: white !important;
        color: #1f2937 !important;
        border-radius: 0.75rem !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 700;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        justify-content: center;
        transition: all 0.3s ease;
        border: 2px solid rgba(0, 0, 0, 0.1) !important;
        width: 100%;
    }

    .btn-phone-play:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
    }

    .btn-phone-play .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .play-btn-text {
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .play-arrow {
        margin-left: 0.5rem;
        font-size: 1rem !important;
    }

    @media (max-width: 991px) {
        .anuda-live-header {
            margin-bottom: 3rem;
        }

        .anuda-live-title {
            font-size: 2rem;
        }

        .anuda-content-right {
            margin-top: 2rem;
        }

        .mobile-mockup-wrapper {
            max-width: 300px;
        }

        .anuda-buttons-group {
            gap: 1rem;
        }

        .anuda-btn {
            padding: 0.875rem 1.5rem !important;
            font-size: 0.9rem;
            min-width: auto;
        }
    }

    .anuda-content-title {
        font-size: 2rem;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    @media (min-width: 768px) {
        .anuda-content-title {
            font-size: 3rem;
        }
    }

    @media (min-width: 992px) {
        .anuda-content-title {
            font-size: 3.5rem;
        }
    }

    .anuda-highlight {
        color: var(--primary);
    }

    .anuda-description {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.8;
        font-style: italic;
        margin-bottom: 2rem;
    }

    .anuda-live-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .anuda-content-left {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 2rem;
    }

    @media (min-width: 992px) {
        .anuda-content-left {
            padding-bottom: 0;
            padding-right: 2rem;
        }
    }

    .anuda-content-title {
        font-size: 2rem;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    @media (min-width: 768px) {
        .anuda-content-title {
            font-size: 3rem;
        }
    }

    @media (min-width: 992px) {
        .anuda-content-title {
            font-size: 3.5rem;
        }
    }

    .anuda-live-title {
        font-size: 2rem;
        font-weight: 900;
        line-height: 1.1;
    }

    .anuda-highlight {
        color: var(--primary);
    }

    .anuda-description {
        color: #a0a0a0;
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: 28rem;
        border-left: 3px solid var(--primary);
        padding-left: 1.5rem;
        margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
        .anuda-description {
            font-size: 1.15rem;
        }
    }

    .anuda-buttons-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    @media (min-width: 576px) {
        .anuda-buttons-group {
            flex-direction: row;
            gap: 1.5rem;
        }
    }

    .anuda-btn {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        text-align: left;
        white-space: nowrap;
    }

    .anuda-btn .material-symbols-outlined {
        font-size: 2rem;
        flex-shrink: 0;
    }

    .anuda-btn .btn-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .anuda-btn .btn-subtext {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        opacity: 0.8;
        letter-spacing: 0.05em;
    }

    .anuda-btn .btn-maintext {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .anuda-btn-primary {
        background-color: #ffffff;
        color: #111111;
        box-shadow: 0 4px 12px rgba(228, 15, 21, 0.3);
        border-radius: 50px;
        padding: 0.95rem 2.5rem;
    }

    .anuda-btn-primary:hover {
        background-color: #e40f15;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(228, 15, 21, 0.4);
    }

    .anuda-btn-secondary {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
    }

    .anuda-btn-secondary:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
    }

    .anuda-btn-secondary .btn-subtext {
        color: #a0a0a0;
    }

    .anuda-content-right {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-mockup-wrapper {
        position: relative;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .mobile-phone-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 18;
        background-color: #000;
        border-radius: 2.5rem;
        border: 8px solid #333;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        overflow: hidden;
    }

    .phone-notch {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
        height: 1.5rem;
        background-color: #000;
        border-radius: 0 0 1.5rem 1.5rem;
        z-index: 20;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }

    .phone-screen {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.9;
        display: block;
    }

    .phone-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2.5rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
        z-index: 10;
    }

    .phone-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        color: white;
    }

    .user-greeting {
        font-weight: 600;
        font-size: 1.1rem;
    }

    .user-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: #555;
        border: 2px solid var(--primary);
    }

    .earnings-card {
        background-color: var(--primary);
        border-radius: 1rem;
        padding: 1rem;
        color: white;
        box-shadow: 0 4px 12px rgba(228, 15, 21, 0.3);
        margin-bottom: 1rem;
    }

    .earnings-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        opacity: 0.85;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .earnings-amount {
        font-size: 1.75rem;
        font-weight: 900;
        margin-bottom: 0.5rem;
    }

    .earnings-growth {
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .growth-badge {
        background-color: rgba(255, 255, 255, 0.2);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }

    .btn-dashboard {
        background-color: white;
        color: #111;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1rem;
        padding: 0.75rem;
        transition: all 0.3s ease;
        border-radius: 50px;
    }

    .btn-dashboard:hover {
        background-color: #f0f0f0;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
    }

    @media (max-width: 991px) {
        .anuda-live-section {
            padding: 4rem 0;
        }

        .mobile-mockup-wrapper {
            max-width: 300px;
        }
    }

    /* FAQ Section - Enhanced Design */
    .faq-section {
        padding: 6rem 0;
        background: #fff;
        position: relative;
        overflow: hidden;
    }

    .faq-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e40f15, transparent);
    }

    .faq-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e40f15, transparent);
    }

    .faq-header-content {
        text-align: center;
        margin-bottom: 3.5rem;
    }

    .faq-title-icon {
        font-size: 3rem !important;
        color: #e40f15;
        display: block;
        margin-bottom: 1.5rem;
        animation: faqBounce 2s infinite;
    }

    @keyframes faqBounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-12px);
        }
    }

    .faq-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--text-main);
        text-transform: uppercase;
        letter-spacing: -0.5px;
        margin-bottom: 0.75rem;
    }

    .faq-section h3 {
        position: relative;
        padding-bottom: 10px;
        font-size: 16px;
        line-height: normal;
        text-transform: capitalize;
        color: #111111;
        font-weight: 600;
        text-align: left;
    }

    .faq-section h3::before {
        display: none;
    }

    @media (min-width: 768px) {
        .faq-title {
            font-size: 2.8rem;
        }
    }
.agree_text{
    margin: 0; font-size: 0.90rem;
}
    .faq-subtitle {
        font-size: 1.1rem;
        margin: 0;
        font-weight: 500;
    }

    .faq-container {
        max-width: 950px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .faq-item {
        background: white;
        border: 2px solid transparent;
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 4px 20px rgba(228, 15, 21, 0.08);
        position: relative;
        animation: slideInUp 0.6s ease-out both;
    }

    .faq-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 2px;
        width: 100%;
        background: linear-gradient(90deg, #e40f15 0%, #f43638 50%, transparent 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .faq-item:hover {
        border-color: rgba(228, 15, 21, 0.2);
        box-shadow: 0 20px 40px rgba(228, 15, 21, 0.15);
        transform: translateY(-6px);
    }

    .faq-item:hover::before {
        transform: scaleX(1);
    }

    .faq-item.active::before {
        transform: scaleX(1);
    }

    .faq-item.active {
        background: linear-gradient(135deg, #e40f15 0%, #c41c0a 100%);
        border-color: rgba(228, 15, 21, 0.3);
        box-shadow: 0 20px 50px rgba(228, 15, 21, 0.25);
    }

    .faq-header {
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s ease;
        background: white;
    }

    .faq-item:hover:not(.active) .faq-header {
        background: linear-gradient(135deg, #fef9f9 0%, #fff5f5 100%);
    }

    .faq-item.active .faq-header {
        background-color: rgba(0, 0, 0, 0.12);
    }

    .faq-question {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-main);
        transition: color 0.3s ease;
        line-height: 1.6;
        flex: 1;
    }

    @media (min-width: 768px) {
        .faq-question {
            font-size: 1rem;
        }
    }

    .faq-item.active .faq-question {
        color: white;
        font-weight: 700;
    }

    .faq-icon {
        flex-shrink: 0;
        font-size: 1.75rem !important;
        color: #e40f15;
        margin-left: 1.5rem;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .faq-item.active .faq-icon {
        color: white;
        border-color: rgba(255, 255, 255, 0.3);
        transform: rotate(180deg);
        animation: spin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* FAQ Section - Enhanced Design */
    .faq-section {
        padding: 6rem 0;
        background: #fff;
        position: relative;
        overflow: hidden;
    }

    .faq-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e40f15, transparent);
    }

    .faq-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e40f15, transparent);
    }

    .faq-header-content {
        text-align: center;
        margin-bottom: 3.5rem;
    }

    .faq-title-icon {
        font-size: 3rem !important;
        color: #e40f15;
        display: block;
        margin-bottom: 1.5rem;
        animation: faqBounce 2s infinite;
    }

    @keyframes faqBounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-12px);
        }
    }

    .faq-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--text-main);
        text-transform: uppercase;
        letter-spacing: -0.5px;
        margin-bottom: 0.75rem;
    }

    @media (min-width: 768px) {
        .faq-title {
            font-size: 2.8rem;
        }
    }

    .faq-subtitle {
        font-size: 1.1rem;
        margin: 0;
        font-weight: 500;
    }

    .faq-container {
        max-width: 950px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .faq-item {
        background: white;
        border: none;
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 4px 20px rgba(228, 15, 21, 0.08);
        position: relative;
    }

    .faq-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #e40f15 0%, #f43638 100%);
        transform: scaleY(0);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .faq-item:hover {
        border-color: #f43638;
        box-shadow: 0 12px 32px rgba(228, 15, 21, 0.15);
        transform: translateY(-4px);
    }

    .faq-item.active::before {
        transform: scaleY(1);
    }

    .faq-item.active {
        background: linear-gradient(135deg, #e40f15 0%, #c41c0a 100%);
        border-color: #a41208;
        box-shadow: 0 16px 40px rgba(228, 15, 21, 0.25);
    }


    .faq-item:hover:not(.active) .faq-header {
        background-color: #fef9f9;
    }

    .faq-item.active .faq-header {
        background-color: rgb(255 26 26 / var(--tw-bg-opacity, 1))
    }

    .faq-question {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-main);
        transition: color 0.3s ease;
        line-height: 1.6;
        flex: 1;
    }
.line-through2{
    text-decoration: line-through;
    font-size: 2rem;
    font-weight: 600;
    color: #6d6d6d;
    display: inline;
    line-height: 1;
    
}
    @media (min-width: 768px) {
        .faq-question {
            font-size: 1rem;
        }
    }

    .faq-item.active .faq-question {
        color: white;
        font-weight: 700;
    }



    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
        opacity: 0;
        display: block;
    }

    .faq-item.active .faq-content {
        max-height: 500px;
        opacity: 1;
    }

    .faq-answer {
        padding: 1rem 1.5em;
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.8;
        color: #475569;
        background-color: #fef9f9;
        border-top: 2px solid #fee2e2;
        font-weight: 500;
    }

    .faq-item.active .faq-answer {
        color: #000;
        border-top-color: rgba(255, 255, 255, 0.15);
        background: #fff;
        padding: 1rem 1.5em;
    }

    .faq-button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
        animation: slideInUp 0.6s ease-out both;
        animation-delay: 0.5s;
    }

    .faq-button-container .btn-primary-custom {
        min-width: 200px;
        padding: 1rem 2.5rem !important;
        font-size: 1rem;
        border-radius: 50px;
    }

    @media (max-width: 767px) {
        .faq-section {
            padding: 3.5rem 0;
        }

        .faq-header-content {
            margin-bottom: 2.5rem;
        }

        .faq-title-icon {
            font-size: 2.25rem !important;
            margin-bottom: 1rem;
        }

        .faq-title {
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
            letter-spacing: -0.3px;
        }

        .faq-subtitle {
            font-size: 1rem;
        }

        .faq-container {
            gap: 1.25rem;
        }

        .faq-header {
            padding: 1.5rem 1.5rem;
        }

        .faq-item:hover:not(.active) .faq-header {
            background-color: white;
        }

        .faq-question {
            font-size: 0.85rem;
        }

        .faq-icon {
            font-size: 1.5rem !important;
            margin-left: 1rem;
            width: 2.25rem;
            height: 2.25rem;
        }

        .faq-answer {
            padding: 1.5rem;
            font-size: 0.85rem;
            line-height: 1.7;
        }
    }

    /* FAQ Search Bar */


    .faq-item.hidden {
        display: none;
    }

    .faq-item.visible {
        animation: slideInUp 0.3s ease-out;
    }

    .faq-no-results {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--text-muted);
        font-size: 1.05rem;
    }

    .faq-no-results span {
        font-size: 3rem;
        display: block;
        margin-bottom: 1rem;
    }

    /* Custom Select Dropdown Styling */
    .form-control {
        position: relative;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 2.5rem;
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.25rem;
    }

    .form-control[type="select"],
    select.form-control {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e40f15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        padding-right: 2.5rem;
    }

    #state,
    #city {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e40f15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.25rem;
        padding-right: 2.5rem;
        cursor: pointer;
    }

    #state:focus,
    #city:focus {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c41c0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    }

    .form-check-input2 {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 2px;
        cursor: pointer;
        accent-color: #e40f15;
        border-color: #e40f15;
    }

    .form-check-custom {
        padding-left: 0;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Multi-step Form Modal Styling */
    .modal-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
        color: white;
        border: none;
    }

    .modal-title {
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .modal-title .material-symbols-outlined {
        font-size: 1.5rem;
    }

    /* Step Indicator */
    .step-indicator-wrapper {
        margin-bottom: 2rem;
    }

    .step-title-indicator {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }

    .step-name {
        font-size: 0.75rem;
        color: var(--primary);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .step-counter {
        font-size: 0.75rem;
        color: #999;
        font-weight: 600;
    }

    .form-progress-bar {
        width: 100%;
        height: 6px;
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
        transition: all 0.5s ease;
        --progress-width: 0%;
    }

    .form-progress-bar::after {
        content: '';
        display: block;
        height: 100%;
        width: var(--progress-width);
        background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
        border-radius: 2px;
        transition: width 0.5s ease;
    }

    /* Step Indicator */
    .step-indicator {
        text-align: center;
        margin-bottom: 2rem;
    }

    .step-label {
        font-size: 0.75rem;
        color: var(--primary);
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: 0.75rem;
    }

    .step-label-right {
        float: right;
        color: #999;
    }

    /* Form Step Content */
    .form-step {
        animation: slideInUp 0.3s ease-out;
    }

    .step-header {
        text-align: center;
        margin-bottom: 1rem;
    }

    .step-icon {
        font-size: 3rem;
        color: var(--primary);
        margin-bottom: 1rem;
        display: block;
    }

    .step-icon.success {
        color: #28a745;
    }

    .step-title {
        font-size: 1.4rem;
        font-weight: 900;
        margin: 1rem 0 0.5rem;
        color: var(--text-main);
    }

    .step-subtitle {
        color: var(--text-muted);
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.6;
    }

    /* Required Field Asterisk */
    .form-label span {
        color: var(--primary);
    }

    /* Info Box */
    .info-box {
        background: #fef9f9;
        padding: 1.25rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid #e40f15;
    }

    .info-box-content {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 0;
    }

    .info-box-icon {
        color: #e40f15;
        flex-shrink: 0;
    }

    .info-box-text {
        margin: 0;
        font-size: 0.9rem;
        color: #666;
    }

    .info-box .price-row {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e40f152e;
    }

    /* Price Box */
    .price-box {
        background: white;
        border: 2px solid #e5e5e5;
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .price-row-last {
        border-top: 1px solid #e5e5e5;
        padding-top: 0.75rem;
        margin-bottom: 0;
    }

    .price-label {
        font-weight: 600;
        color: var(--text-main);
    }

    .price-label-total {
        font-weight: 700;
        color: var(--text-main);
    }

    .price-amount {
        font-size: 1.3rem;
        font-weight: 900;
        color: var(--primary);
    }
    .price-amount2{
            text-decoration: line-through;
    }

    .price-amount-total {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--primary);
    }

    /* Summary Box */
    .summary-box {
        background: linear-gradient(135deg, #f0f9ff 0%, #f5f9ff 100%);
        padding: 1.5rem;
        border-radius: 0.75rem;
        border: 2px solid #e0f2fe;
        margin-bottom: 1.5rem;
    }

    .summary-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #0369a1;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(3, 105, 161, 0.1);
    }

    .summary-row-last {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .summary-label {
        color: var(--text-main);
        font-weight: 500;
    }

    .summary-value {
        font-weight: 600;
        color: var(--text-main);
    }

    /* Security Box */
    .security-box {
        background: #fef5e7;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        border-left: 4px solid #ff9500;
        margin-bottom: 1.5rem;
        display: flex;
        gap: 0.75rem;
    }

    .security-icon {
        color: #ff9500;
        flex-shrink: 0;
        font-size: 1.2rem;
    }

    .security-text {
        margin: 0;
        font-size: 0.85rem;
        color: #856404;
    }

    /* Form Message */
    #formMessage {
        display: none;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 1rem;
    }

    /* Modal Buttons */
    #backBtn {
        display: none;
    }

    #nextBtn {
        background-color: var(--primary);
        border: none;
        color: #fff;
    }

    #submitBtn {
        background-color: var(--primary);
        border: none;
    }

    /* Hidden Step (Initial State) */
    .form-step[style*="display: none"],
    #step2 {
        display: none;
    }

    /* Terms Link Styling */
    .agree_text a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }

    /* Summary Amount Display */
    .summary-row-last span:last-child {
        font-weight: 700;
        color: var(--primary);
        font-size: 1.1rem;
    }

    /* Back Button Icon */
    .back-icon {
        font-size: 1rem;
        margin-right: 0.5rem;
    }