/* --- Hero Section Styling (Kept the same) --- */
        .serive-hero-section {
            padding: 2rem 20px 0;
            text-align: center;
        }

        .serive-hero-section h1 {
            font-size: 4.5rem;
            font-weight: 800;
            color: #333;
            line-height: 1.1;
            margin-bottom: 1.5rem;
        }

        .serive-hero-section .subtitle {
            text-align: center;
            font-size: 1.1rem;
            margin-bottom: 3rem;
            color: #555;
            font-weight: 600;
        }

        /* --- Results/Cards Section Styling (Kept the same) --- */
        .results-cards {
            display: flex;
            justify-content: center;
            gap: 2rem;
            max-width: 1100px;
            margin: 1rem auto 4rem;
            padding: 0 20px;
        }

        .serivce-card{
            flex: 1;
            min-width: 280px;
            max-width: 350px;
            
    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(14px);

    border-radius: 45px;
    padding: 0.4rem;

    border: 1px solid rgba(252, 215, 57, 0.25);

    box-shadow:
        0 25px 45px rgba(15, 23, 42, 0.08),
        0 10px 30px rgba(252, 215, 57, 0.18),
        inset 0 1px 1px rgba(255, 255, 255, 0.7);

    text-align: center;

    transition: all 0.35s ease;
        }
        .serivce-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 60px rgba(15, 23, 42, 0.12),
        0 15px 40px rgba(252, 215, 57, 0.28);
}
.serivce-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 60px rgba(15, 23, 42, 0.12),
        0 15px 40px rgba(252, 215, 57, 0.28);
}
        .serivce-card h3 {
            font-size: 1.15rem;
    font-weight: 800;
    margin-top: 0.8rem;
    margin-bottom: 1rem;
    color: #0f172a;
        }

        .serivce-card p {
            text-align: justify;
            font-size: 0.7rem;
            color: #64748b;
            padding: 0px 25px 22px 25px;
            line-height: 1.7;
            margin: 0;
        }

        /* Card Visuals Container (Kept the same) */
        .card-visual {
               background:
        repeating-linear-gradient(
            135deg,
            rgba(252, 215, 57, 0.08),
            rgba(252, 215, 57, 0.08) 12px,
            rgba(255, 255, 255, 0.08) 12px,
            rgba(255, 255, 255, 0.08) 24px
        ),

        linear-gradient(
            135deg,
            #fff8d6,
            #fff3b0
        );
            height: 200px; /* Defines the size of the top half */
            display: flex;
            align-items: center;
            justify-content: center;}
            
           /* --- height: 180px;
            border-radius: 15px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.5);  -->
        }

        /* --- Visual Styling: Card 1 (Funding) --- */
        .visual-funding {
            border-top-left-radius: 43px;
            border-top-right-radius: 43px;
            background: linear-gradient(145deg, #fffef5, #fff3c4);
        }

        .toggle-container {
            display: flex;
            align-items: center;
            background-color: rgba(255,255,255,0.85);
            backdrop-filter: blur(10px);
            padding: 10px 25px;
            border-radius: 40px;
             border: 1px solid rgba(252, 215, 57, 0.3);

    box-shadow:
        0 10px 25px rgba(252, 215, 57, 0.18),
        inset 0 1px 2px rgba(255,255,255,0.6);
            cursor: pointer; /* Indicate it's clickable */
            user-select: none; /* Prevent text selection */
        }

        .toggle-text {
            font-weight: 700;
            font-size: 1.2rem;
            color: #c89b00;
            margin-right: 15px;
            white-space: nowrap;
        }
        
        /* The main switch background */
        .toggle-switch {
            width: 70px;
            height: 35px;
            border-radius: 20px;
            position: relative;
            transition: background-color 0.3s;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(225, 202, 236, 0.5);
            /* Initial OFF state: Lighter grey/orange */
            background: linear-gradient(145deg, #d6d6d6, #b8b8b8);
        }
        
        /* State when switch is ON (Added via JS class 'active') */
        .toggle-switch.active {
            background: linear-gradient(145deg, #fcd739, #e5b700);
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(252, 215, 57, 0.45);
        }

        .toggle-knob {
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 2.5px;
            /* Initial OFF state: Left side */
            left: 2.5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 2px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        /* State when switch is ON (Knob is moved to the right) */
        .toggle-switch.active .toggle-knob {
            /* Move the knob 35px to the right: 70px width - 30px knob - 5px total padding */
            transform: translateX(35px); 
        }

        /* --- Visual Styling: Card 2 & 3 (Conversions & Market) (Kept the same) --- */
        .visual-conversions {
            border-top-left-radius: 43px;
            border-top-right-radius: 43px;
            
            background:
        linear-gradient(
            135deg,
            #fcd739 0%,
            #f5c400 35%,
            #d9a900 100%
        );
            position: relative;
        }

        .conversion-circle {
            width: 150px;
            height: 150px;
           /* background: linear-gradient(145deg, #, #ff5500); */
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
             background:
        linear-gradient(
            145deg,
            #0f172a,
            #1e293b
        );

    border-radius: 70%;
    box-shadow:
        0 20px 35px rgba(15, 23, 42, 0.35),
        inset 0 2px 12px rgba(255,255,255,0.08);

    border: 3px solid rgba(255,255,255,0.12);
            /* box-shadow: 0 15px 30px rgba(255, 85, 0, 0.5), inset 0 5px 10px rgba(255, 255, 255, 0.5); */
            position: relative;
        }
        .conversion-circle::before {
    content: "";
    position: absolute;
    inset: -8px;

    border-radius: 50%;

    border: 2px solid rgba(255,255,255,0.18);
}
--- */

        .conversion-circle .percent {
            font-size: 3rem;
            line-height: 1;
            
        }

        .conversion-circle .label {
            font-size: 0.9rem;
            font-weight: 600;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 2px 10px;
            border-radius: 10px;
            margin-top: 5px;
            backdrop-filter: blur(8px);
        }

        .visual-market {
             border-top-left-radius: 43px;
            border-top-right-radius: 43px;
            background: linear-gradient(145deg, #fffdf2, #fff3c4);
            
            flex-direction: column;
            justify-content: center;
        }

        .stats-label {
            font-size: 0.8rem;
            color: #c89b00;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .stat-pill {
            padding: 10px 7px;
            border-radius: 25px;
            margin: 8px 0;
            width: 90%;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(90deg, #111827, #1e293b);
            box-shadow: 0 5px 15px rgba(15,23,42,0.18), inset 0 0 10px rgba(255, 255, 255, 0.06);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
            transition: all 0.3s ease;
        }

        .stat-pill strong {
            font-weight: 800;
            margin-left: 5px;
            color: #fcd739;
        }

        /* --- Responsiveness (Kept the same) --- */
        @media (max-width: 1050px) {
            .serive-hero-section h1 {
                font-size: 3.5rem;
            }
            .results-cards {
                flex-wrap: wrap;
                gap: 1.5rem;
            }
            .serivce-card {
                flex: 1 1 calc(50% - 1rem); 
                max-width: none;
            }
        }

        @media (max-width: 650px) {
            .navbar {
                flex-direction: column;
                align-items: center;
            }
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                margin-top: 15px;
                padding: 0.5rem;
                width: 100%;
                box-shadow: none;
                background-color: transparent;
            }
            .nav-links a:not(.cta-link) {
                margin: 5px 10px;
                padding: 5px 0;
            }
            .logo {
                margin-right: 0;
            }
            .cta-link {
                margin: 10px auto !important;
                order: 10;
            }

            .serive-hero-section h1 {
                font-size: 2.5rem;
            }
            
            .results-cards {
                flex-direction: column;
                gap: 1.5rem;
                margin-top: 2rem;
            }

            .serivce-card {
                flex: 1 1 100%;
                padding: 0.5rem;
            }
            
            .toggle-text {
                font-size: 1rem;
            }
            .conversion-circle {
                width: 180px;
                height: 180px;
            }
            .conversion-circle .percent {
                font-size: 2.5rem;
            }
        }
        /* Base button style */
.conversion-btn {
  position: relative;

    display: inline-block;

    padding: 14px 38px;

    font-size: 16px;
    font-weight: 700;

    color: #111827;

    background:
        linear-gradient(
            180deg,
            #ffe27a,
            #fcd739,
            #eab308
        );

    border: none;

    border-radius: 50px;

    box-shadow:
        0 12px 24px rgba(252,215,57,0.35),
        inset 0 2px 5px rgba(255,255,255,0.45);

    text-shadow:
        0 1px 1px rgba(255,255,255,0.4);

    cursor: pointer;

    overflow: hidden;

    transition: all 0.35s ease;
}

/* Shine animation overlay */
.conversion-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 1s infinite;
  animation-timing-function: ease-in-out;
}

/* Glow effect (soft pulse) */
@keyframes shine {
  0% {
    left: -75%;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}

/* Hover/active interaction */
.conversion-btn:hover {
  transform: translateY(-2px);
   box-shadow:
        0 18px 35px rgba(252,215,57,0.45),
        inset 0 2px 5px rgba(255,255,255,0.55);
}

.conversion-btn:active {
  transform: translateY(1px);
}