body {
            font-family: 'Inter', sans-serif;
        }

        /* Navbar Customization */
        .custom-navbar {
            background-color: #ffffff;
            padding-top: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        /* Logo Text Style (If image not used) */
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: #707070;
            text-decoration: none;
        }
        .logo-text span {
            color: #ff2d95; /* Pink color from image */
        }

        /* Nav Links */
        .navbar-nav .nav-link {
            color: #333333 !important;
            font-size: 15px;
            font-weight: 500;
            margin: 0 10px;
            transition: color 0.3s;
        }
        .navbar-nav .nav-link:hover {
            color: #ff2d95 !important;
        }

        /* Buttons Style */
        .btn-join-customer {
            color: #ff2d95;
            border: 1.5px solid #ff2d95;
            border-radius: 10px;
            font-weight: 600;
            padding: 8px 20px;
            transition: all 0.3s;
            background: transparent;
            text-decoration: none;
            display: inline-block;
        }
        .btn-join-customer:hover {
            background-color: #fff0f6;
            color: #ff2d95;
        }

        .btn-join-partner {
            background-color: #ff2d95;
            color: #ffffff;
            border: 1.5px solid #ff2d95;
            border-radius: 10px;
            font-weight: 600;
            padding: 8px 20px;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(255, 45, 149, 0.2);
        }
        .btn-join-partner:hover {
            background-color: #e61e7c;
            color: #ffffff;
            transform: translateY(-1px);
        }

        /* Responsive spacing for mobile */
        @media (max-width: 991px) {
            .navbar-nav {
                padding: 20px 0;
                text-align: center;
            }
            .nav-auth-buttons {
                flex-direction: column;
                gap: 10px;
                width: 100%;
            }
            .btn-join-customer, .btn-join-partner {
                width: 100%;
                text-align: center;
            }
        }

        :root {
        --pink-primary: #ff2d95;
    }

    .hero-section {
        background: linear-gradient(135deg, #f0f3ff 0%, #e0e7ff 50%, #f9ebff 100%);
        position: relative;
        overflow: hidden;
        padding-bottom: 100px;
    }

    .hero-title {
        color: #1a1a1a;
        line-height: 1.1;
        letter-spacing: -1px;
    }

    /* Buttons */
    .btn-hero-pink {
        background-color: var(--pink-primary);
        color: white;
        padding: 12px 35px;
        border-radius: 12px;
        font-weight: 600;
        box-shadow: 0 10px 20px rgba(255, 45, 149, 0.3);
        transition: all 0.3s;
    }
    .btn-hero-pink:hover {
        background-color: #e61e7c;
        color: white;
        transform: translateY(-3px);
    }

    .btn-hero-outline {
        background-color: white;
        color: var(--pink-primary);
        padding: 12px 35px;
        border-radius: 12px;
        font-weight: 600;
        border: 1px solid #eee;
        transition: all 0.3s;
    }
    .btn-hero-outline:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transform: translateY(-3px);
    }

    /* Illustration Animation */
    .floating-animation {
        animation: floating 3s ease-in-out infinite;
        z-index: 2;
        position: relative;
    }

    @keyframes floating {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
    }

    /* Bottom Wave */
    .hero-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        line-height: 0;
    }
    .hero-wave svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 60px;
    }
    .hero-wave .shape-fill {
        fill: #FFFFFF;
    }

    /* Responsive */
    @media (max-width: 991px) {
        .hero-title {
            font-size: 2.5rem;
        }
        .hero-section {
            text-align: center;
            padding-bottom: 50px;
        }
    }


   /* partner*/
   .partner-section {
        background-color: #ffffff;
        padding: 60px 0;
    }

    .partner-title {
        font-size: 22px;
        color: #4a4a4a !important;
        margin-bottom: 40px;
        position: relative;
    }

    /* Logo Styling */
    .partner-logo {
        max-height: 50px; /* Logos ka size barabar rakhne ke liye */
        width: auto;
        opacity: 0.7; /* Shuruat mein thoda halka dikhega */
        filter: grayscale(100%); /* Image ki tarah black & white effect */
        transition: all 0.3s ease;
    }

    /* Hover Effect */
    .partner-logo:hover {
        opacity: 1;
        filter: grayscale(0%); /* Mouse le jane par original color ayega */
        transform: scale(1.05);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .partner-logo {
            max-height: 40px;
            margin-bottom: 20px;
        }
        .partner-title {
            font-size: 18px;
        }
    }
   /* partner*/


   /*how it works*/
   .how-it-works {
        background-color: #ffffff;
    }

    .section-title {
        font-size: 32px;
        color: #1a1a1a;
    }

    /* Circle Step Style */
    .step-number {
        width: 80px;
        height: 80px;
        background-color: #fff0f6; /* Very light pink */
        color: #ff2d95; /* Pink text */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        margin: 0 auto;
        transition: transform 0.3s;
    }

    .step-box:hover .step-number {
        transform: scale(1.1);
        background-color: #ff2d95;
        color: #ffffff;
    }

    /* Curved Dotted Lines Styling */
    .curved-line {
        position: absolute;
        top: 20%;
        z-index: 1;
    }

    .line-1 {
        left: 18%; /* Positioning between step 1 and 2 */
        top: 45px;
    }

    .line-2 {
        left: 51%; /* Positioning between step 2 and 3 */
        top: 10px;
    }

    .step-box {
        position: relative;
        z-index: 2; /* To stay above the lines */
    }

    /* Text Adjustments */
    .text-muted.small {
        line-height: 1.6;
        color: #777 !important;
    }

    /* Mobile view adjustments */
    @media (max-width: 767px) {
        .step-number {
            width: 70px;
            height: 70px;
        }
    }
   /*how it works*/


   .rewards-preview {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .section-title {
        font-size: 36px;
        color: #1a1a1a;
        margin-bottom: 15px;
    }

    /* Card Styling */
    .reward-card {
        transition: all 0.3s ease;
    }

    .reward-img-container {
        border-radius: 25px; /* ইমেজের মতো রাউন্ডেড কর্নার */
        overflow: hidden;
        aspect-ratio: 1 / 1; /* ইমেজগুলোকে সমান স্কয়ার সাইজ রাখতে */
    }

    .reward-img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ইমেজ যাতে ফেটে না যায় */
        transition: transform 0.5s ease;
    }

    /* Hover Effect */
    .reward-card:hover .reward-img {
        transform: scale(1.1);
    }

    .reward-card h5 {
        font-size: 20px;
        color: #1a1a1a;
        margin-top: 15px;
    }

    .reward-card p {
        line-height: 1.6;
        color: #6c757d !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .section-title {
            font-size: 28px;
        }
        .reward-img-container {
            border-radius: 20px;
        }
    }




    /* Section Styling */
    .who-can-join {
        overflow: hidden;
    }

    /* Checkmark List Styling */
    .check-icon {
        width: 35px;
        height: 35px;
        background-color: #ff2d95; /* Pink color */
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(255, 45, 149, 0.3);
    }

    .join-list li {
        color: #333;
    }

    /* Image Grid Styling */
    .join-img-box {
        border-radius: 20px;
        overflow: hidden;
        height: 250px; /* Fixed height for consistency */
    }

    .join-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .join-img-box:hover img {
        transform: scale(1.1);
    }

    /* Fade-out effect for the first image like the screenshot */
    .fade-left {
        position: relative;
    }
    .fade-left::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
        pointer-events: none;
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .join-img-box {
            height: 200px;
        }
        .fade-left::after {
            display: none; /* Mobile এ ফেড ইফেক্ট দরকার নেই */
        }
    }



    /* Section Main Style */
    .why-rewards {
        background-color: #ffffff;
    }

    /* Card Box Style */
    .benefit-card {
        background: #ffffff;
        border: 1px solid #eeeeee; /* হালকা বর্ডার ইমেজের মতো */
        border-radius: 20px;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .benefit-card:hover {
        border-color: #ff2d95; /* হোভার করলে পিঙ্ক বর্ডার */
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    /* Icon Circle Style */
    .benefit-icon {
        width: 70px;
        height: 70px;
        background-color: #fff0f6; /* হালকা পিঙ্ক ব্যাকগ্রাউন্ড */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff2d95; /* গাঢ় পিঙ্ক আইকন */
        font-size: 24px;
        transition: all 0.3s ease;
    }

    .benefit-card:hover .benefit-icon {
        background-color: #ff2d95;
        color: #ffffff;
    }

    /* Text Style */
    .benefit-card p {
        font-size: 15px;
        line-height: 1.5;
        color: #333333;
    }

    /* Responsive */
    @media (max-width: 991px) {
        .benefit-card {
            padding: 30px 20px !important;
        }
    }


    /* Pricing Card Basic Styles */
    .pricing-card {
        background: #ffffff;
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        position: relative;
    }

    /* Standard Card (Highlighted Pink) */
    .pricing-card.highlighted {
        background-color: #ff2d95; /* ইমেজের মতো পিঙ্ক কালার */
        transform: scale(1.05); /* মাঝখানের কার্ডটি একটু বড় দেখাবে */
        z-index: 2;
        box-shadow: 0 15px 40px rgba(255, 45, 149, 0.3);
    }

    .price-text {
        font-size: 42px;
    }

    /* List Item Styles */
    .pricing-features li {
        font-size: 15px;
        color: #555;
    }
    .pricing-card.highlighted .pricing-features li {
        color: rgba(255,255,255,0.9);
    }

    /* Button Styles */
    .purchase-btn {
        border-radius: 12px;
        text-transform: none;
        background: white; /* ইমেজে বাটনগুলো সাদা */
        border: none;
        color: #000;
    }
    
    .pricing-card:not(.highlighted) .purchase-btn {
        background: #ffffff;
        border: 1px solid #eee;
    }

    .pricing-card:hover {
        transform: translateY(-10px);
    }
    
    .pricing-card.highlighted:hover {
        transform: scale(1.05) translateY(-10px);
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .pricing-card.highlighted {
            transform: scale(1);
            margin: 20px 0;
        }
        .pricing-card.highlighted:hover {
            transform: translateY(-10px);
        }
    }


    /* Section Styling */
    .benefits-section {
        overflow: hidden;
    }

    /* Pink Checkbox Style */
    .pink-check {
        width: 30px;
        height: 30px;
        background-color: #ff2d95; /* ইমেজের মতো পিঙ্ক কালার */
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex-shrink: 0;
    }

    /* List Text */
    .benefit-list li span:last-child {
        font-size: 16px;
        font-weight: 500;
    }

    /* Custom Rounded Corner for Image */
    .rounded-40 {
        border-radius: 40px !important;
    }

    .benefit-img-wrapper img {
        width: 100%;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        height: 400px;
    }

    /* Divider for Desktop only */
    @media (min-width: 768px) {
        .border-start-md {
            border-left: 1px solid #f0f0f0;
        }
    }

    /* Heading Adjustments */
    .benefits-section .display-5 {
        letter-spacing: -1px;
    }


    /* CTA Background Box */
    .cta-box {
        background-color: #ff2d95; /* ইমেজের সিগনেচার পিঙ্ক কালার */
        border-radius: 60px; /* অনেক বেশি রাউন্ডেড কর্নার ইমেজের মতো */
        box-shadow: 0 20px 40px rgba(255, 45, 149, 0.2);
    }

    /* White Button Style */
    .btn-partner-white {
        background-color: #ffffff;
        color: #ff2d95;
        border: none;
        border-radius: 12px;
        transition: all 0.3s;
    }
    .btn-partner-white:hover {
        background-color: #f8f9fa;
        color: #e61e7c;
        transform: translateY(-3px);
    }

    /* Outline Button Style */
    .btn-demo-outline {
        background-color: transparent;
        border: 1.5px solid rgba(255, 255, 255, 0.8);
        border-radius: 12px;
        transition: all 0.3s;
    }
    .btn-demo-outline:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: #ffffff;
        transform: translateY(-3px);
    }

    /* Typography Adjustments */
    .cta-box h2 {
        line-height: 1.2;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .cta-box {
            border-radius: 30px;
            padding: 40px 20px !important;
        }
        .display-4 {
            font-size: 2rem;
        }
    }


    /* ইমেজগুলোর চারপাশ সুন্দর করতে হালকা স্টাইল */
    .banner-wrapper img {
        border-radius: 30px; /* ইমেজের মতো রাউন্ডেড কর্নার */
        transition: transform 0.3s ease;
        object-fit: cover;
    }

    .banner-wrapper img:hover {
        transform: scale(1.02); /* মাউস নিলে হালকা বড় হবে */
    }

    @media (max-width: 767px) {
        .banner-wrapper img {
            border-radius: 20px;
            margin-bottom: 10px;
        }
    }



    /* Footer Main Card */
    .main-footer{
        background-color: #ff2d95;
    }

    .footer-card {
        border-radius: 50px; /* ইমেজের মতো বড় রাউন্ডেড কর্নার */
        background-color: white;
    }

    /* Left Pink Side with Smooth S-Curve */
    .footer-left-side {
        background-color: #ff2d95;
        position: relative;
        z-index: 1;
        /* Custom path for the "Same to Same" curve */
        clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
        padding-right:30px;
    }

    /* Contact Icon Box */
    .f-icon-box {
        color: white;
        font-size: 18px;
    }

    .f-icon-box i {
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 10%;
}

    /* Social Icons Circle */
    .f-social-icon {
        width: 32px;
        height: 32px;
        background: white;
        color: #ff2d95;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 13px;
        transition: 0.3s ease;
    }
    .f-social-icon:hover {
        background: #f0f0f0;
        transform: scale(1.1);
    }

    /* Link List Styling */
    .f-link-list li {
        margin-bottom: 15px;
    }
    .f-link-list a {
        color: #6c757d;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
    }
    .f-link-list a:hover {
        color: #ff2d95;
        padding-left: 5px;
    }

    /* Frame Image Positioning */
    .f-frame-img {
    position: absolute;
    bottom: 0;
    right: 0px;
    height: 130px;
    pointer-events: none;
}

    /* Responsive Logic */
    @media (max-width: 991px) {
        .footer-left-side {
            clip-path: none;
            border-radius: 40px 40px 0 0;
        }
        .footer-card {
            border-radius: 30px;
        }
        .f-frame-img {
            display: none;
        }
    }