/* ============================================================
   ROYAL PASSION — CANVA DARK PREMIUM THEME
   Replacement for baseTheme.css

   IMPORTANT:
   - No body selector
   - No :root selector
   - Existing HTML/classes preserved
   - Designed to work before component CSS
   - Scoped primarily through .container
   ============================================================ */


/* ============================================================
   01. THEME VARIABLES
   ============================================================ */

.container {
    --rp-bg: #1a1a2e;
    --rp-bg-2: #16213e;
    --rp-card: #252540;
    --rp-card-2: #1e1e38;
    --rp-card-3: #292944;
    --rp-border: #333355;
    --rp-border-light: #414166;
    --rp-white: #ffffff;
    --rp-text: #e0e0f0;
    --rp-text-soft: #d1d5db;
    --rp-muted: #9ca3af;
    --rp-muted-2: #b0adc4;
    --rp-cyan: #00bcd4;
    --rp-cyan-light: #67e8f9;
    --rp-magenta: #e91e8c;
    --rp-pink: #f472b6;
    --rp-amber: #f5a623;
    --rp-amber-light: #fbbf24;
    --rp-purple: #9c27b0;
    --rp-green: #22c55e;
    --rp-green-light: #6ee7b7;
    --rp-red: #ef4444;
    --rp-radius: 16px;
    --rp-radius-sm: 12px;
    --rp-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    --rp-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.32);
    --rp-transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}


/* ============================================================
   02. MAIN CANVAS
   ============================================================ */

.container {
    position: relative;
    isolation: isolate;
    color: var(--rp-text);
    background: linear-gradient( 135deg, var(--rp-bg) 0%, var(--rp-bg-2) 100% ) !important;
    min-height: 100vh;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


    /* subtle background lighting */
    .container::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at 10% 5%, rgba(233, 30, 140, 0.06), transparent 30% ), radial-gradient( circle at 90% 15%, rgba(0, 188, 212, 0.06), transparent 28% ), radial-gradient( circle at 50% 100%, rgba(245, 166, 35, 0.035), transparent 30% );
        z-index: -1;
    }


    /* ============================================================
   03. TYPOGRAPHY
   ============================================================ */

    .container h1,
    .container h2,
    .container h3,
    .container h4,
    .container h5,
    .container h6 {
        color: var(--rp-white);
        letter-spacing: -0.02em;
    }

    .container p {
        color: var(--rp-text-soft);
    }

    .container a {
        transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    }

    .container strong {
        color: var(--rp-white);
    }


    /* ============================================================
   04. MAIN SECTIONS
   ============================================================ */

    .container .section,
    .container .services-section,
    .container .fresh-websites-section,
    .container .payment-options-section,
    .container .form-section,
    .container .whatsapp-section,
    .container .disclaimer-section,
    .container .happy-clients {
        position: relative;
        background: var(--rp-card) !important;
        border: 1px solid var(--rp-border) !important;
        border-radius: var(--rp-radius);
        box-shadow: var(--rp-shadow);
        overflow: hidden;
        transition: var(--rp-transition);
    }


        .container .section:hover,
        .container .services-section:hover,
        .container .fresh-websites-section:hover,
        .container .payment-options-section:hover,
        .container .form-section:hover,
        .container .whatsapp-section:hover,
        .container .disclaimer-section:hover {
            border-color: var(--rp-border-light) !important;
            box-shadow: var(--rp-shadow-hover);
        }


        /* ============================================================
   05. SECTION ACCENT LINE
   ============================================================ */

        .container .section::before,
        .container .services-section::before,
        .container .fresh-websites-section::before,
        .container .payment-options-section::before,
        .container .form-section::before,
        .container .whatsapp-section::before,
        .container .disclaimer-section::before {
            content: "";
            display: block;
            height: 3px;
            width: 100%;
            background: linear-gradient( 90deg, var(--rp-magenta) 0%, var(--rp-cyan) 25%, var(--rp-amber) 50%, #8c8c8c 75%, var(--rp-purple) 100% );
        }


    /* ============================================================
   06. BRANDING
   ============================================================ */

    .container .branding-section {
        border-radius:0px;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .container .branding {
        position: relative;
        /* background: var(--rp-card) !important;
        border: 1px solid var(--rp-border) !important;
        border-radius: var(--rp-radius);*/
        padding: 28px 20px;
        /*        box-shadow: var(--rp-shadow);
*/ overflow: hidden;
    }


        /* colored top line */
        .container .branding::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient( 90deg, var(--rp-magenta), var(--rp-cyan), var(--rp-amber), var(--rp-purple) );
        }


    /* logo */
    .container .logo-circle {
        /* background: linear-gradient( 145deg, #ffffff, #eeeeee ) !important;
        border: 3px solid var(--rp-amber) !important;
        box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.08), 0 10px 25px rgba(0, 0, 0, 0.25);*/
        overflow: hidden;
    }


    .container .branding-logo {
        object-fit: contain;
    }


    /* company name */
    .container .brand-name {
        color: var(--rp-white) !important;
        font-weight: 800;
        letter-spacing: -0.025em;
    }


    /* main title */
    .container .main-title {
        color: var(--rp-white) !important;
        font-weight: 800;
        letter-spacing: -0.025em;
    }


    /* subtitle */
    .container .subtitle-text {
        color: var(--rp-muted) !important;
    }


    /* tagline */
    .container .tagline {
        color: var(--rp-amber) !important;
        font-weight: 700;
    }


    /* ============================================================
   07. SOCIAL BUTTONS
   ============================================================ */

    .container .social-media-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }


    .container .social-btn {
        position: relative;
        min-height: 62px;
        background: var(--rp-card-2) !important;
        border: 1px solid var(--rp-border) !important;
        border-radius: 12px;
        color: var(--rp-white) !important;
        box-shadow: none !important;
        transition: var(--rp-transition);
        overflow: hidden;
    }


        .container .social-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--rp-cyan);
        }


        .container .social-btn:hover {
            transform: translateY(-2px);
            background: var(--rp-card-3) !important;
            border-color: var(--rp-border-light) !important;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
        }


        /* Individual accents */

        .container .social-btn.phone::before {
            background: var(--rp-cyan);
        }

        .container .social-btn.whatsapp::before {
            background: var(--rp-green);
        }

        .container .social-btn.location::before {
            background: var(--rp-magenta);
        }

        .container .social-btn.facebook::before {
            background: #3b82f6;
        }

        .container .social-btn.instagram::before {
            background: var(--rp-magenta);
        }

        .container .social-btn.website::before {
            background: var(--rp-amber);
        }


        .container .social-btn i,
        .container .social-btn svg {
            color: var(--rp-cyan);
        }


        .container .social-btn.whatsapp i,
        .container .social-btn.whatsapp svg {
            color: var(--rp-green);
        }

        .container .social-btn.location i,
        .container .social-btn.location svg {
            color: var(--rp-magenta);
        }

        .container .social-btn.facebook i,
        .container .social-btn.facebook svg {
            color: #60a5fa;
        }

        .container .social-btn.instagram i,
        .container .social-btn.instagram svg {
            color: var(--rp-pink);
        }

        .container .social-btn.website i,
        .container .social-btn.website svg {
            color: var(--rp-amber);
        }


    /* ============================================================
   08. CONTACT LABEL
   ============================================================ */

    .container .contact-label {
        color: var(--rp-muted) !important;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }


    /* ============================================================
   09. RATING
   ============================================================ */

    .container .modern-rating {
        /* background: var(--rp-card-2) !important;
        border: 1px solid var(--rp-border) !important;
        border-radius: 12px;*/
        padding: 16px;
        box-shadow: none !important;
    }


    .container .star-container {
        gap: 3px;
    }


    .container .star {
        color: var(--rp-amber) !important;
        filter: drop-shadow( 0 0 4px rgba(245, 166, 35, 0.18) );
    }


    .container .feedback-text,
    .container .review-text {
        color: var(--rp-muted-2) !important;
    }


    .container .stat-count {
        color: var(--rp-white) !important;
        font-weight: 800;
    }


    /* ============================================================
   10. CTA TEXT
   ============================================================ */

    .container .cta-text {
        color: var(--rp-amber) !important;
        font-weight: 700;
    }


    /* ============================================================
   11. WHAT WE DO
   ============================================================ */

    .container .what-we-do {
        background: var(--rp-card) !important;
        border: 1px solid var(--rp-border) !important;
        border-radius: var(--rp-radius);
        box-shadow: var(--rp-shadow);
        overflow: hidden;
    }


        .container .what-we-do::before {
            content: "";
            display: block;
            height: 3px;
            background: var(--rp-cyan);
        }


        .container .what-we-do h3 {
            color: var(--rp-white) !important;
            font-weight: 800;
        }


    .container .text-justify {
        color: var(--rp-text-soft) !important;
        line-height: 1.75;
    }


    /* ============================================================
   12. HAPPY CLIENTS / SLIDER
   ============================================================ */

    .container .slider {
        overflow: hidden;
        /* background: var(--rp-card-2) !important;
        border: 1px solid var(--rp-border) !important;*/
        border-radius: 12px;
    }


    .container .slider__track {
        gap: 12px;
    }


    .container .slider__slide {
        background: var(--rp-card) !important;
        /*        border: 1px solid var(--rp-border) !important;*/
        border-radius: 12px;
        overflow: hidden;
    }


    /* ============================================================
   13. SERVICES HEADER
   ============================================================ */

    .container .service-title,
    .container .section-title {
        color: #d4d84e !important;
        font-weight: 800;
        letter-spacing: -0.025em;
        font-family: 'Poppins', sans-serif;
    }


        .container .service-title::after,
        .container .section-title::after {
            content: "";
            display: block;
            width: 54px;
            height: 3px;
            margin: 10px auto 0;
            background: linear-gradient( 90deg, var(--rp-magenta), var(--rp-cyan) );
            border-radius: 10px;
        }


    /* ============================================================
   14. SERVICE CARDS
   ============================================================ */

    .container .card,
    .container .graphic-card,
    .container .food-menu-card,
    .container .ecom,
    .container .ai-review,
    .container .whatsapp-marketing,
    .container .copy-card,
    .container .biz-software-card,
    .container .website-card,
    .container .other-services-card {
        position: relative;
        background: var(--rp-card-2) !important;
        border: 1px solid var(--rp-border) !important;
        border-radius: var(--rp-radius-sm);
        box-shadow: none !important;
        overflow: hidden;
        transition: var(--rp-transition);
    }


        .container .card:hover,
        .container .graphic-card:hover,
        .container .food-menu-card:hover,
        .container .ecom:hover,
        .container .ai-review:hover,
        .container .whatsapp-marketing:hover,
        .container .copy-card:hover,
        .container .biz-software-card:hover,
        .container .website-card:hover,
        .container .other-services-card:hover {
            transform: translateY(-3px);
            border-color: var(--rp-border-light) !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
        }


        /* colored service-card top border */

        .container .card::before,
        .container .graphic-card::before,
        .container .food-menu-card::before,
        .container .ecom::before,
        .container .ai-review::before,
        .container .whatsapp-marketing::before,
        .container .copy-card::before,
        .container .biz-software-card::before,
        .container .website-card::before,
        .container .other-services-card::before {
            content: "";
            display: block;
            height: 3px;
            background: var(--rp-cyan);
        }


        .container .graphic-card::before {
            background: var(--rp-purple);
        }

        .container .food-menu-card::before {
            background: var(--rp-amber);
        }

        .container .ecom::before {
            background: var(--rp-pink);
        }

        .container .ai-review::before {
            background: var(--rp-red);
        }

        .container .whatsapp-marketing::before {
            background: var(--rp-white);
        }

        .container .copy-card::before {
            background: var(--rp-magenta);
        }

        .container .biz-software-card::before {
            background: var(--rp-green);
        }

        .container .website-card::before {
            background: var(--rp-cyan);
        }

        .container .other-services-card::before {
            background: #8c8c8c;
        }


/* card icon */
.card-pic {
    width: 300px;
    margin: auto;
}

.container .card-icon {
    color: var(--rp-cyan) !important;
    background: rgba(0, 188, 212, 0.10) !important;
    border: 1px solid rgba(0, 188, 212, 0.18);
}


.container .card-content {
    color: var(--rp-text-soft);
}


    .container .card-content h3,
    .container .card-content h4 {
        margin: 50px 0 30px 0;
        color: var(--rp-white) !important;
        font-weight: 700;
    }


/* ============================================================
   15. DEMO BUTTONS
   ============================================================ */

.container .demo-btn {
    background: var(--rp-cyan) !important;
    color: #1a1a2e !important;
    border: 0 !important;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: none !important;
    transition: var(--rp-transition);
}


    .container .demo-btn:hover {
        background: var(--rp-cyan-light) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 188, 212, 0.16) !important;
    }


    /* ============================================================
   16. SERVICE COLOR MODIFIERS
   ============================================================ */

    .container .demo-btn.aqua {
        background: var(--rp-cyan) !important;
        color: #16213e !important;
    }

    .container .demo-btn.forest {
        background: #22c55e !important;
        color: #14251b !important;
    }

    .container .demo-btn.garnet {
        background: var(--rp-magenta) !important;
        color: #ffffff !important;
    }

    .container .demo-btn.chocolate {
        background: #c08457 !important;
        color: #1f1720 !important;
    }

    .container .demo-btn.blonde {
        background: var(--rp-amber) !important;
        color: #1a1a2e !important;
    }

    .container .demo-btn.teal {
        background: #14b8a6 !important;
        color: #09201e !important;
    }

    .container .demo-btn.olive {
        background: #a3b18a !important;
        color: #172015 !important;
    }

    .container .demo-btn.indigo {
        background: #818cf8 !important;
        color: #161633 !important;
    }




/* ============================================================
   15. PAYMENT OPTIONS — COMPLETE REDESIGN
   ============================================================ */

.container .payment-options-section {
    position: relative;
    background: linear-gradient( 145deg, #252540 0%, #22223b 100% ) !important;
    border: 1px solid #38385b !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}


    /* payment top accent */

    .container .payment-options-section::before {
        content: "";
        display: block;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #00bcd4 0%, #9c27b0 35%, #e91e8c 65%, #f5a623 100% );
    }


    /* ============================================================
   PAYMENT TITLE
   ============================================================ */

    .container .payment-options-section .section-title {
        color: #ffffff !important;
        font-weight: 800 !important;
        line-height: 1.25;
        letter-spacing: -0.025em;
        margin-bottom: 8px;
    }


        .container .payment-options-section .section-title::after {
            content: "";
            display: block;
            width: 52px;
            height: 3px;
            margin: 10px auto 0;
            border-radius: 999px;
            background: linear-gradient( 90deg, #00bcd4, #f5a623 );
        }


    /* ============================================================
   PAYMENT CONTAINER
   ============================================================ */

    .container .payment-options-section .payment-container {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        padding: 0;
    }


    /* ============================================================
   PAYMENT OPTIONS LIST
   ============================================================ */

    .container .payment-options-section .payment-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }


    /* ============================================================
   INDIVIDUAL PAYMENT OPTION
   ============================================================ */

    .container .payment-options-section .payment-option {
        position: relative;
        /*        display: flex;*/
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        min-height: 62px;
        padding: 13px 16px;
        box-sizing: border-box;
        background: #1e1e38 !important;
        border: 1px solid #373757 !important;
        border-radius: 12px;
        color: #ffffff !important;
        transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
    }


        /* left cyan indicator */

        .container .payment-options-section .payment-option::before {
            content: "";
            width: 3px;
            min-width: 3px;
            height: 28px;
            border-radius: 999px;
            background: #00bcd4;
            flex-shrink: 0;
        }


        /* hover */

        .container .payment-options-section .payment-option:hover {
            transform: translateY(-2px);
            background: #252540 !important;
            border-color: #4b4b70 !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
        }


        /* ============================================================
   PAYMENT OPTION TEXT
   ============================================================ */

        .container .payment-options-section .payment-option h3,
        .container .payment-options-section .payment-option h4,
        .container .payment-options-section .payment-option strong {
            color: #ffffff !important;
            font-weight: 700;
            line-height: 1.35;
        }


        .container .payment-options-section .payment-option p,
        .container .payment-options-section .payment-option span {
            color: #d1d5db !important;
            line-height: 1.55;
        }


        /* ============================================================
   PAYMENT OPTION ICON
   ============================================================ */

        .container .payment-options-section .payment-option i,
        .container .payment-options-section .payment-option svg {
            color: #67e8f9 !important;
            flex-shrink: 0;
        }


    /* ============================================================
   PAYMENT BUTTONS
   ============================================================ */

    .container .payment-options-section .btn,
    .container .payment-options-section button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 118px;
        min-height: 40px;
        height: 40px;
        padding: 9px 17px;
        box-sizing: border-box;
        border-radius: 9px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap;
        text-align: center;
        cursor: pointer;
        transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
    }


        .container .payment-options-section .btn:hover,
        .container .payment-options-section button:hover {
            transform: translateY(-2px);
            filter: brightness(1.08);
        }


    /* ============================================================
   PRIMARY PAYMENT BUTTON
   ============================================================ */

    .container .payment-options-section .btn--garnet {
        /*        background: #e91e8c !important;
*/ color: #ffffff !important;
        border: 0 !important;
        box-shadow: none !important;
    }


        .container .payment-options-section .btn--garnet:hover {
            background: #f472b6 !important;
            box-shadow: 0 7px 18px rgba(233, 30, 140, 0.18) !important;
        }


    /* ============================================================
   FULL WIDTH BUTTON
   ============================================================ */

    .container .payment-options-section .btn-block {
        width: 100%;
        min-width: 0;
    }


    /* ============================================================
   PAYMENT CONTENT / EXPANDED AREA
   ============================================================ */

    .container .payment-options-section .payment-content {
        margin-top: 8px;
        padding: 16px;
        background: #1a1a31 !important;
        border: 1px solid #353553 !important;
        border-radius: 11px;
        color: #d1d5db !important;
        line-height: 1.65;
    }


        /* readable links inside payment */

        .container .payment-options-section .payment-content a {
            color: #67e8f9 !important;
            font-weight: 600;
        }


            .container .payment-options-section .payment-content a:hover {
                color: #ffffff !important;
            }


    /* ============================================================
   CHEVRON / ACCORDION ICON
   ============================================================ */

    .container .payment-options-section .chevron {
        color: #67e8f9 !important;
        transition: transform 0.25s ease;
    }


    /* ============================================================
   16. PAYMENT GATEWAY
   ============================================================ */

    .container .payment-options-section .gateway-section,
    .container .gateway-section {
        margin-top: 14px;
        padding: 17px;
        background: #1e1e38 !important;
        border: 1px solid #373757 !important;
        border-radius: 12px;
    }


        /* gateway heading */

        .container .gateway-section h3,
        .container .gateway-section h4 {
            color: #ffffff !important;
            font-weight: 800;
        }


        /* gateway note */

        .container .gateway-section .gateway-note,
        .container .gateway-note {
            color: #c7c9d4 !important;
            font-size: 13px;
            line-height: 1.6;
        }


/* ============================================================
   GATEWAY BUTTON GROUP
   ============================================================ */

.container .gateway-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}


/* ============================================================
   GATEWAY BUTTONS
   ============================================================ */

.container .gateway-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 130px;
    height: 42px;
    min-height: 42px;
    padding: 10px 18px;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}


    .container .gateway-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.07);
    }


/* Razorpay */

.container .razorpay-btn {
    background: #00bcd4 !important;
    color: #12212a !important;
}


/* PayPal */

.container .paypal-btn {
    background: #f5a623 !important;
    color: #1a1a2e !important;
}


/* ============================================================
   BANK DETAILS
   ============================================================ */

.container .payment-options-section .bank-details,
.container .bank-details {
    margin-top: 12px;
    padding: 15px 16px;
    background: #1a1a31 !important;
    border: 1px solid #373757 !important;
    border-radius: 11px;
    color: #d1d5db !important;
    line-height: 1.65;
}


    .container .bank-details strong {
        color: #ffffff !important;
    }


/* ============================================================
   17. ALL THEME BUTTONS — UNIFIED SIZE SYSTEM
   ============================================================ */

/*
   This keeps buttons throughout the page visually consistent.
   Individual sections can override width when necessary.
*/

.container .demo-btn,
.container .btn,
.container .gateway-btn,
.container .whatsapp-btn,
.container .primary-btn,
.container .secondary-btn {
    box-sizing: border-box;
    min-height: 40px;
    font-family: inherit;
    letter-spacing: 0;
}


/* ============================================================
   WHATSAPP BUTTON
   ============================================================ */

.container .whatsapp-btn,
.container .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    height: 42px;
    padding: 10px 20px;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap;
}


/* ============================================================
   SECONDARY BUTTON
   ============================================================ */

.container .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    height: 42px;
    padding: 10px 20px;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap;
}


/* ============================================================
   18. RESPONSIVE DIGITAL SERVICES
   ============================================================ */

@media (max-width: 768px) {

    .container .services-section .websites-container,
    .container .services-section .services-container,
    .container .fresh-websites-section .websites-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .container .services-section .card-content {
        padding: 16px;
    }


        .container .services-section .card-content h3,
        .container .services-section .card-content h4,
        .container .services-section .card-title {
            font-size: 16px;
        }


        .container .services-section .card-content p,
        .container .services-section .card-content span {
            font-size: 13.5px;
        }


    .container .services-section .demo-btn {
        min-height: 42px;
        height: 42px;
    }


    .container .payment-options-section .payment-option {
        align-items: flex-start;
        gap: 12px;
        min-height: 58px;
        padding: 12px 13px;
    }


        .container .payment-options-section .payment-option .btn,
        .container .payment-options-section .payment-option button {
            min-width: 105px;
            height: 40px;
        }


    .container .gateway-btn {
        min-width: 120px;
    }
}


/* ============================================================
   19. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .container .services-section {
        border-radius: 14px;
    }


        .container .services-section .card,
        .container .services-section .graphic-card,
        .container .services-section .food-menu-card,
        .container .services-section .ecom,
        .container .services-section .ai-review,
        .container .services-section .whatsapp-marketing,
        .container .services-section .copy-card,
        .container .services-section .biz-software-card,
        .container .services-section .website-card,
        .container .services-section .other-services-card {
            border-radius: 11px;
        }


        .container .services-section .card-content {
            padding: 15px;
        }


        .container .services-section .card-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            margin-bottom: 11px;
        }


        .container .services-section .demo-btn {
            width: 100%;
            height: 42px;
            min-height: 42px;
            font-size: 12.5px !important;
            padding: 9px 12px;
        }


    .container .payment-options-section .payment-option {
        /* display: grid;
        grid-template-columns: 3px minmax(0, 1fr);*/
        align-items: center;
        gap: 10px;
    }


        .container .payment-options-section .payment-option::before {
            width: 3px;
            height: 26px;
        }


        .container .payment-options-section .payment-option .btn,
        .container .payment-options-section .payment-option button {
            grid-column: 2;
            width: 100%;
            min-width: 0;
            height: 40px;
        }


    .container .gateway-buttons {
        flex-direction: column;
        width: 100%;
    }


    .container .gateway-btn {
        width: 100%;
        min-width: 0;
        height: 42px;
    }


    .container .whatsapp-btn,
    .container .primary-btn,
    .container .secondary-btn {
        width: 100%;
        height: 42px;
    }
}


/* ============================================================
   20. TEXT READABILITY OVERRIDES
   ============================================================ */

/*
   These intentionally use brighter colors than the previous
   theme. The supplied Canva reference uses grey text, but the
   existing page has more content, so readability needs priority.
*/

.container .services-section,
.container .payment-options-section {
    color: #e0e0f0;
}


    .container .services-section p,
    .container .payment-options-section p {
        color: #d1d5db !important;
    }


    .container .services-section small,
    .container .payment-options-section small {
        color: #bfc2cc !important;
    }


    .container .services-section label,
    .container .payment-options-section label {
        color: #e0e0f0 !important;
        font-weight: 600;
    }


    /* links remain clearly identifiable */

    .container .services-section a:not(.demo-btn),
    .container .payment-options-section a:not(.btn):not(.gateway-btn) {
        color: #67e8f9 !important;
        font-weight: 600;
    }


        .container .services-section a:not(.demo-btn):hover,
        .container .payment-options-section a:not(.btn):not(.gateway-btn):hover {
            color: #ffffff !important;
        }


    /* ============================================================
   21. PREVENT TEXT / BUTTON OVERFLOW
   ============================================================ */

    .container .services-section *,
    .container .payment-options-section * {
        box-sizing: border-box;
    }


    .container .services-section h1,
    .container .services-section h2,
    .container .services-section h3,
    .container .services-section h4,
    .container .services-section p,
    .container .payment-options-section h1,
    .container .payment-options-section h2,
    .container .payment-options-section h3,
    .container .payment-options-section h4,
    .container .payment-options-section p {
        overflow-wrap: anywhere;
    }


    /* Buttons should not break awkwardly */

    .container .services-section .demo-btn,
    .container .payment-options-section .btn,
    .container .payment-options-section .gateway-btn,
    .container .whatsapp-btn,
    .container .primary-btn,
    .container .secondary-btn {
        overflow: hidden;
        text-overflow: ellipsis;
    }


        /* ============================================================
   22. ACCESSIBILITY / FOCUS
   ============================================================ */

        .container .demo-btn:focus-visible,
        .container .btn:focus-visible,
        .container .gateway-btn:focus-visible,
        .container .whatsapp-btn:focus-visible,
        .container .primary-btn:focus-visible,
        .container .secondary-btn:focus-visible {
            outline: 2px solid #67e8f9 !important;
            outline-offset: 3px;
        }


/* ============================================================
   17. PAYMENT SECTION
   ============================================================ */

/*.container .payment-options-section {
    background: var(--rp-card) !important;
}


.container .payment-container {
    background: transparent !important;
}


.container .payment-options {
    gap: 10px;
}


.container .payment-option {
    background: var(--rp-card-2) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px;
    color: var(--rp-white) !important;
    transition: var(--rp-transition);
}


    .container .payment-option:hover {
        background: var(--rp-card-3) !important;
        border-color: var(--rp-cyan) !important;
    }*/


/* ============================================================
   18. STANDARD BUTTONS
   ============================================================ */

/*.container .btn {
    border-radius: 999px;
    font-weight: 700;
    transition: var(--rp-transition);
}


.container .btn--garnet {
    background: var(--rp-magenta) !important;
    color: #ffffff !important;
    border: 0 !important;
}


    .container .btn--garnet:hover {
        background: var(--rp-pink) !important;
        transform: translateY(-2px);
    }


.container .btn-block {
    width: 100%;
}


.container .btn--animated:hover {
    transform: translateY(-2px);
}*/


/* ============================================================
   19. PAYMENT CONTENT / ACCORDION
   ============================================================ */

/*.container .payment-content {
    background: var(--rp-card-2) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px;
    color: var(--rp-text-soft);
}


.container .chevron {
    color: var(--rp-cyan) !important;
}*/


/* ============================================================
   20. RESPONSIVE IMAGES
   ============================================================ */

/*.container .responsive-img {
    border-radius: 12px;
    border: 1px solid var(--rp-border);
}*/


/* ============================================================
   21. BANK DETAILS
   ============================================================ */

/*.container .bank-details {
    background: var(--rp-card-2) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px;
    color: var(--rp-text-soft);
}*/


/* ============================================================
   22. PAYMENT GATEWAY
   ============================================================ */

/*.container .gateway-section {
    background: var(--rp-card-2) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 12px;
    padding: 18px;
}


.container .gateway-note {
    color: var(--rp-muted) !important;
}


.container .gateway-buttons {
    gap: 10px;
}


.container .gateway-btn {
    border-radius: 999px;
    border: 0 !important;
    font-weight: 700;
    transition: var(--rp-transition);
}


    .container .gateway-btn:hover {
        transform: translateY(-2px);
    }


.container .razorpay-btn {
    background: var(--rp-cyan) !important;
    color: #17212d !important;
}


.container .paypal-btn {
    background: var(--rp-amber) !important;
    color: #1a1a2e !important;
}


.container .paypal-form {
    background: transparent !important;
}*/


/* ============================================================
   23. DISCLAIMER
   ============================================================ */

.container .disclaimer-section {
    background: var(--rp-card) !important;
}


.container .disclaimer-primary {
    color: var(--rp-amber) !important;
    font-weight: 700;
}


.container .disclaimer-secondary {
    color: var(--rp-muted) !important;
}


/* ============================================================
   24. WHATSAPP SECTION
   ============================================================ */

.container .whatsapp-section {
    background: var(--rp-card) !important;
}


.container .whatsapp-container {
    background: transparent !important;
}


.container .input-group {
    background: transparent !important;
}


.container .input-label {
    color: var(--rp-text-soft) !important;
    font-weight: 700;
}


.container .whatsapp-input {
    background: var(--rp-card-2) !important;
    color: var(--rp-white) !important;
    border: 1px solid var(--rp-border) !important;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}


    .container .whatsapp-input::placeholder {
        color: #777792 !important;
    }


    .container .whatsapp-input:focus {
        border-color: var(--rp-green) !important;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10) !important;
    }


.container .input-help {
    color: var(--rp-muted) !important;
}


/* WhatsApp button */

.container .whatsapp-btn,
.container .primary-btn {
    background: var(--rp-green) !important;
    color: #122018 !important;
    border: 0 !important;
    border-radius: 999px;
    font-weight: 800;
    transition: var(--rp-transition);
}


    .container .whatsapp-btn:hover,
    .container .primary-btn:hover {
        background: var(--rp-green-light) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(34, 197, 94, 0.15);
    }


.container .secondary-btn {
    background: transparent !important;
    color: var(--rp-cyan) !important;
    border: 1px solid var(--rp-cyan) !important;
    border-radius: 999px;
    font-weight: 700;
}


    .container .secondary-btn:hover {
        background: rgba(0, 188, 212, 0.08) !important;
    }


/* ============================================================
   25. BUTTON ICONS
   ============================================================ */

.container .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   26. ANIMATIONS
   ============================================================ */

.container .animation-left,
.container .animation-right {
    will-change: transform, opacity;
}


.container .animation-left {
    animation: rpSlideLeft 0.6s ease both;
}


.container .animation-right {
    animation: rpSlideRight 0.6s ease both;
}


@keyframes rpSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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


@keyframes rpSlideRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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


/* ============================================================
   27. FOCUS
   ============================================================ */

.container :focus-visible {
    outline: 2px solid var(--rp-cyan) !important;
    outline-offset: 3px;
}


/* ============================================================
   28. SELECTION
   ============================================================ */

.container ::selection {
    background: var(--rp-cyan);
    color: #16213e;
}


/* ============================================================
   29. SCROLLBAR
   ============================================================ */

.container {
    scrollbar-width: thin;
    scrollbar-color: var(--rp-border-light) var(--rp-bg);
}


    .container::-webkit-scrollbar {
        width: 8px;
    }


    .container::-webkit-scrollbar-track {
        background: var(--rp-bg);
    }


    .container::-webkit-scrollbar-thumb {
        background: var(--rp-border-light);
        border-radius: 10px;
    }


        .container::-webkit-scrollbar-thumb:hover {
            background: var(--rp-cyan);
        }


/* ============================================================
   30. MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .container {
        --rp-radius: 14px;
        --rp-radius-sm: 11px;
    }

        .container .branding {
            padding: 22px 16px;
        }

        .container .social-media-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .container .social-btn {
            min-height: 58px;
        }

        .container .section,
        .container .services-section,
        .container .fresh-websites-section,
        .container .payment-options-section,
        .container .form-section,
        .container .whatsapp-section,
        .container .disclaimer-section {
            border-radius: 14px;
        }

        .container .card,
        .container .graphic-card,
        .container .food-menu-card,
        .container .ecom,
        .container .ai-review,
        .container .whatsapp-marketing,
        .container .copy-card,
        .container .biz-software-card,
        .container .website-card,
        .container .other-services-card {
            border-radius: 11px;
        }
}


@media (max-width: 480px) {

    .container .social-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .container .branding {
        padding: 20px 14px;
    }

    .container .modern-rating {
        padding: 13px;
    }

    .container .gateway-section {
        padding: 14px;
    }
}


/* ============================================================
   31. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .container *,
    .container *::before,
    .container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}