/* Hero Background CSS Mimicking the Design */
.hero-light-bg {
    background-color: #f0f7ff !important;
    background-image: 
        /* Top right faint circle */
        radial-gradient(circle at 80% 10%, rgba(255,255,255, 0.8) 0%, transparent 20%),
        /* Center light burst */
        radial-gradient(circle at 50% 50%, rgba(255,255,255, 0.9) 0%, transparent 60%),
        /* Bottom left sweeping wave curve */
        radial-gradient(ellipse at 10% 100%, rgba(214, 235, 255, 0.7) 0%, transparent 50%),
        /* Bottom center-right sweeping curve */
        radial-gradient(ellipse at 70% 100%, rgba(220, 240, 255, 0.8) 0%, transparent 60%),
        /* Subtle tech dots pattern */
        radial-gradient(rgba(13, 110, 253, 0.08) 1.5px, transparent 1.5px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 30px 30px !important;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Floating 3D Orbs / Bubbles */
.hero-light-bg::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #a3ccff);
    border-radius: 50%;
    bottom: 20%;
    left: 25%;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.15);
    z-index: -1;
    opacity: 0.8;
}

.hero-light-bg::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #a3ccff);
    border-radius: 50%;
    top: 15%;
    right: 25%;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.15);
    z-index: -1;
    opacity: 0.6;
}

/* Base styling for carousel arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none; /* Hide default icons */
}