.membership-hero { position: relative; overflow: hidden; padding: 90px 20px 80px; background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 55%, #edf5ff 100%); } .membership-hero::before { content: ""; position: absolute; width: 350px; height: 350px; background: #dceaff; border-radius: 50%; top: -180px; right: -100px; filter: blur(10px); opacity: 0.7; } .membership-hero-container { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 60px; position: relative; z-index: 1; } .hero-content { max-width: 650px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #e9f2ff; color: #1264e8; padding: 9px 17px; border-radius: 30px; font-size: 13px; font-weight: 600; margin-bottom: 22px; } .hero-content h1 { font-size: 56px; line-height: 1.08; color: #101828; margin: 0 0 22px; font-weight: 750; letter-spacing: -1.5px; } .hero-content h1 span { color: #1264e8; } .hero-content p { font-size: 18px; line-height: 1.7; color: #667085; max-width: 570px; margin-bottom: 30px; } .hero-buttons { display: flex; align-items: center; gap: 14px; margin-bottom: 35px; } .hero-btn { padding: 15px 25px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 600; transition: 0.25s ease; } .hero-btn-primary { background: #1264e8; color: #fff; box-shadow: 0 8px 20px rgba(18, 100, 232, 0.22); } .hero-btn-primary:hover { background: #0b52c7; transform: translateY(-2px); } .hero-btn-secondary { background: #fff; color: #1264e8; border: 1px solid #d6e2f5; } .hero-btn-secondary:hover { background: #f5f9ff; } .hero-trust { display: flex; gap: 28px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 8px; color: #667085; font-size: 13px; } .trust-item strong { color: #101828; } /* Right Visual */ .hero-visual { position: relative; display: flex; justify-content: center; } .membership-card { width: 390px; min-height: 450px; border-radius: 28px; padding: 30px; color: white; background: linear-gradient(145deg, #1264e8, #073b9c); box-shadow: 0 30px 70px rgba(18, 100, 232, 0.25); position: relative; overflow: hidden; transform: rotate(2deg); } .membership-card::before { content: ""; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; right: -100px; top: -80px; } .membership-card::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; left: -80px; bottom: -70px; } .card-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } .brand-name { font-size: 21px; font-weight: 700; } .member-badge { background: rgba(255,255,255,0.15); padding: 7px 12px; border-radius: 20px; font-size: 11px; } .card-center { position: relative; z-index: 2; margin-top: 70px; } .card-center small { opacity: 0.75; font-size: 12px; } .card-center h2 { font-size: 34px; margin: 10px 0; } .card-center p { opacity: 0.8; font-size: 13px; } .card-benefits { position: relative; z-index: 2; margin-top: 45px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .benefit { background: rgba(255,255,255,0.10); padding: 11px; border-radius: 10px; font-size: 12px; } .floating-box { position: absolute; background: #fff; color: #172033; border-radius: 14px; padding: 15px 18px; box-shadow: 0 15px 35px rgba(20, 60, 120, 0.15); font-size: 13px; font-weight: 600; z-index: 5; } .floating-box span { display: block; color: #667085; font-size: 11px; font-weight: 400; margin-top: 3px; } .floating-one { left: -20px; top: 80px; } .floating-two { right: -15px; bottom: 80px; } @media (max-width: 900px) { .membership-hero-container { grid-template-columns: 1fr; text-align: center; } .hero-content { margin: auto; } .hero-content p { margin-left: auto; margin-right: auto; } .hero-buttons, .hero-trust { justify-content: center; } .hero-visual { margin-top: 30px; } } @media (max-width: 600px) { .membership-hero { padding: 65px 15px; } .hero-content h1 { font-size: 38px; } .hero-content p { font-size: 16px; } .membership-card { width: 320px; min-height: 400px; } .floating-one { left: -5px; } .floating-two { right: -5px; } }


    .subscription-cards {
        max-width: 1200px;
        margin: 40px auto;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .subscription-card {
        position: relative;
        background: #fff;
        border: 1px solid #e4e9f2;
        border-radius: 24px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(20, 60, 120, 0.07);
        transition: all 0.3s ease;
    }

    .subscription-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 40px rgba(20, 60, 120, 0.13);
    }

    .subscription-card.popular {
        border: 2px solid #1264e8;
    }

    .popular-badge {
        position: absolute;
        top: -14px;
        right: 20px;
        background: #1264e8;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 7px 14px;
        border-radius: 20px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        background: #edf4ff;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
        margin-bottom: 18px;
    }

    .subscription-card h3 {
        margin: 0 0 8px;
        font-size: 24px;
        color: #172033;
    }

    .card-description {
        color: #7b8495;
        font-size: 14px;
        line-height: 1.6;
        min-height: 48px;
    }

    .card-price {
        margin: 22px 0;
    }

    .card-price strong {
        font-size: 38px;
        color: #172033;
    }

    .card-price span {
        color: #7b8495;
        font-size: 13px;
    }

    .card-features {
        list-style: none;
        padding: 0;
        margin: 20px 0 28px;
    }

    .card-features li {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 12px 0;
        font-size: 13px;
        color: #3e4859;
    }

    .card-features li::before {
        content: "✓";
        min-width: 21px;
        height: 21px;
        border-radius: 50%;
        background: #eaf3ff;
        color: #1264e8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 11px;
    }

    .card-btn {
        display: block;
        width: 100%;
        padding: 14px;
        border-radius: 12px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: 0.2s;
    }

    .btn-outline {
        color: #1264e8;
        border: 1px solid #1264e8;
        background: #fff;
    }

    .btn-outline:hover {
        background: #edf4ff;
    }

    .btn-primary {
        color: #fff;
        background: #1264e8;
    }

    .btn-primary:hover {
        background: #0b52c7;
    }

    @media (max-width: 900px) {
        .subscription-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .subscription-cards {
            grid-template-columns: 1fr;
        }
    }
    
    
    .membership-benefits { padding: 80px 20px; background: #ffffff; } .benefits-container { max-width: 1200px; margin: auto; } .benefits-heading { text-align: center; max-width: 700px; margin: 0 auto 50px; } .benefits-tag { display: inline-block; padding: 8px 16px; background: #edf4ff; color: #1264e8; border-radius: 30px; font-size: 13px; font-weight: 600; margin-bottom: 15px; } .benefits-heading h2 { margin: 0 0 15px; font-size: 40px; line-height: 1.2; color: #101828; } .benefits-heading h2 span { color: #1264e8; } .benefits-heading p { margin: 0; color: #667085; font-size: 16px; line-height: 1.7; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .benefit-card { padding: 30px; border: 1px solid #e7ebf2; border-radius: 20px; background: #fff; transition: all 0.3s ease; } .benefit-card:hover { transform: translateY(-6px); border-color: #cfe0ff; box-shadow: 0 15px 35px rgba(20, 60, 120, 0.09); } .benefit-icon { width: 55px; height: 55px; border-radius: 15px; background: #edf4ff; display: flex; align-items: center; justify-content: center; font-size: 25px; margin-bottom: 20px; } .benefit-card h3 { margin: 0 0 10px; color: #172033; font-size: 19px; } .benefit-card p { margin: 0; color: #667085; font-size: 14px; line-height: 1.7; } .benefit-highlight { margin-top: 45px; padding: 22px 28px; border-radius: 16px; background: linear-gradient(135deg, #f0f6ff, #f8fbff); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .benefit-highlight strong { color: #172033; font-size: 17px; } .benefit-highlight span { color: #667085; font-size: 14px; } .benefit-highlight-btn { white-space: nowrap; text-decoration: none; background: #1264e8; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; } @media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .membership-benefits { padding: 60px 15px; } .benefits-heading h2 { font-size: 32px; } .benefits-grid { grid-template-columns: 1fr; } .benefit-highlight { flex-direction: column; text-align: center; } }