html { scroll-behavior: smooth; }
        body {
            background:
                radial-gradient(circle at 10% 10%, rgba(15,142,216,0.08), transparent 20%),
                radial-gradient(circle at 85% 5%, rgba(10,154,74,0.07), transparent 20%),
                linear-gradient(180deg, #ffffff 0%, #f8fbfc 45%, #ffffff 100%);
            color: #111827;
            overflow-x: hidden;
        }
        .header-glass {
            background: rgba(255,255,255,0.72)!important;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
            border-bottom: 1px solid rgb(50 152 208);
        }
        .hero-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(1.04);
            transition: opacity 1.1s ease, transform 6s ease;
            pointer-events: none;
        }
        .hero-slide.active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }
        .hero-overlay {
            background: linear-gradient(100deg, rgba(8,15,28,0.78) 10%, rgba(8,15,28,0.45) 50%, rgba(8,15,28,0.62) 100%);
        }
        .fade-up {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity .8s ease, transform .8s ease;
        }
        .fade-up.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(15, 23, 42, 0.13);
        }
        .hero-indicator.active {
            width: 2.75rem;
            opacity: 1;
            background: linear-gradient(135deg, #0F8ED8, #0A9A4A);
        }
        .hero-indicator {
            width: 1rem;
            opacity: .55;
            transition: all .35s ease;
        }
        .contact-panel {
            background:
                radial-gradient(circle at 15% 15%, rgba(15,142,216,0.14), transparent 30%),
                radial-gradient(circle at 85% 25%, rgba(10,154,74,0.14), transparent 28%),
                linear-gradient(160deg, #08111f 0%, #0f172a 45%, #07101c 100%);
        }
        .input-ui {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            color: #fff;
        }
        .input-ui::placeholder {
            color: rgba(255,255,255,0.48);
        }
        .input-ui:focus {
            outline: none;
            border-color: rgba(15,142,216,0.75);
            box-shadow: 0 0 0 4px rgba(15,142,216,0.14);
        }
        .text-gradient {
           /* background: linear-gradient(135deg, #0F8ED8 0%, #0A9A4A 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; */
            background: linear-gradient(to right, #0094d2, #00717f, #005d32);
    background: -webkit-linear-gradient(to right, #0094d2, #00717f, #005d32);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
        }
#siteHeader {background: rgb(255 255 255 / 100%);}
.text-sm2 span{font-weight: 800;}

/* Back to Top */
#backToTop {
    transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
#backToTop:hover {
    box-shadow: 0 8px 30px rgba(15, 142, 216, 0.35);
}

/* Mobile Menu */
#mobileMenu {
    transition: max-height .35s ease, opacity .3s ease;
}
.mobile-nav-link {
    font-size: 0.95rem;
    text-align: right;
}
.text-1 span {display: inline-block;}
.icon {display: inline-block;margin-right: 8px; color: #04847f;}


@media only screen and (max-width: 480px) {
    .mobile-nav-link {text-align: center;}
    .mlogo {width: 150px!important;}
    
}