:root {
    /* --gradient-blue: linear-gradient(to left, #1C184E, #c4a1fe); */
    --gradient-blue: linear-gradient(to left, #ffffff, #0070c0);
    /* --gradient-blue: linear-gradient(to left, #ffffff, #0ac5cac7); */
    /* --gradient-blue: linear-gradient(to left, #19184efa, #0ac5cac7); */

    --gradient-green: linear-gradient(to left, #ffffff, #2ac000);
    --gradient-yellow: linear-gradient(to left, #ffffff, #c0c000);
    --gradient-orange: linear-gradient(to left, #ffffff, #EF2E24);
    --gradient-red: linear-gradient(to left, #ffffff, red);
    --gradient-pink: linear-gradient(to left, #ffffff, pink);
    --gradient-brown: linear-gradient(to left, #ffffff, brown);
    --gradient-violate: linear-gradient(to left, #ffffff, rgb(118, 42, 165));
    --gradient-skyblue: linear-gradient(to left, #ffffff, rgba(62, 191, 210, 0.957));

}

 body {
     font-family: 'Poppins', sans-serif;
     scroll-behavior: smooth;
 }

 /* Hero Section */
 .bg-blue-gradient {
    background: var(--gradient-blue);
}

.bg-green-gradient {
    background: var(--gradient-green);
}

.bg-yellow-gradient {
    background: var(--gradient-yellow);
}

.bg-orange-gradient {
    background: var(--gradient-orange);
}

.bg-red-gradient {
    background: var(--gradient-red);
}

.bg-pink-gradient {
    background: var(--gradient-pink);
}

.bg-brown-gradient {
    background: var(--gradient-brown);
}

.bg-violate-gradient {
    background: var(--gradient-violate);
}

.bg-skyblue-gradient {
    background: var(--gradient-skyblue);
}

/* Hero Section */
.hero {
    background: var(--gradient-blue);
    min-height: 100vh;
    color: white;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

 .hero h1 {
     font-weight: 700;
 }

 .hero p {
     font-size: 1.2rem;
     margin-top: 15px;
 }

 .hero img {
     max-width: 100%;
     border-radius: 10px;
 }

 .hero-heading {
    font-size: 4em;
 }

 /* Counters */
 .counter {
     font-size: 2.5rem;
     font-weight: bold;
 }

 .gradient-text {
     background: linear-gradient(to left, #ffffff, #0070c0);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;
 }


 /* Testimonials */
 .testimonial-card {
     background: white;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 /* Scroll to top */
 #scrollTopBtn {
     position: fixed;
     bottom: 30px;
     right: 30px;
     display: none;
     background: var(--gradient-blue);
     color: white;
     border: none;
     border-radius: 50%;
     width: 45px;
     height: 45px;
     cursor: pointer;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 button {
     background: var(--gradient-blue);
     color: #ffffff !important;
 }

 /* Footer */
 footer {
     background: #f8f9fa;
     padding: 20px 0;
 }

 .glass {
    background-color: rgba(#4A2DF5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
 }

 .btn-primary {
    background-color: #1A194A !important;
 }

 .text-primary {
    color: #1A194A !important;
 }

 .tooltip-card,
 .tooltip-card2,
 .tooltip-card3 {
    max-width: 280px;
    animation: waveBounce 5s ease-in-out infinite;
 }

.tooltip-card::after {
    content: "";
    position: absolute;
    bottom: -15px;
    /* arrow below the box */
    right: 0px;
    /* horizontal position of arrow */
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #6EAEDB;
}

.tooltip-card2::after {
    content: "";
    position: absolute;
    top: -15px;
    /* arrow above the box */
    right: 0px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #6EAEDB;
    /* arrow pointing upward */
}

.tooltip-card3::after {
    content: "";
    position: absolute;
    bottom: -15px;
    /* arrow below the box */
    left: 0;
    /* horizontal position of arrow */
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #6EAEDB;
}

.circle-icon {
    width: 90px;
    height: 90px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
}

.step-number {
    position: absolute;
    top: -12px;
    left: -12px;
    background: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

 @keyframes waveBounce {

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

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

 small {
    font-size: 11px !important;
 }

 @media (max-width: 700px) {
    .hero-heading {
        font-size: 3em;
     }
 }

 @media (max-width: 510px) {
    .hero-heading {
        font-size: 2.1em;
    }

    .hero p {
        font-size: 15px;
        margin-top: 20px;
    }
 }