/* 🌟 GLOBAL TRENDING GLASSMORPHISM & BRAND VARIABLES 🌟 */
:root {
    --gem-navy: #002D62;
    --gem-green: #76bc21;
    --gem-bg: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.70);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: blur(20px);
    --glass-shadow: 0 10px 40px rgba(0, 45, 98, 0.06);
}

/* 🌟 THE ELEGANT MESH GRADIENT BACKGROUND 🌟 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #334155;
    -webkit-font-smoothing: antialiased;
    
    /* The Base Color */
    background-color: var(--gem-bg);
    
    /* The Premium Mesh Gradient (Uses your Navy & Green, ultra-faded for elegance) */
    background-image: 
        radial-gradient(at 0% 0%, rgba(118, 188, 33, 0.07) 0px, transparent 60%),
        radial-gradient(at 100% 0%, rgba(0, 45, 98, 0.06) 0px, transparent 60%),
        radial-gradient(at 100% 100%, rgba(118, 188, 33, 0.07) 0px, transparent 60%),
        radial-gradient(at 0% 100%, rgba(0, 45, 98, 0.06) 0px, transparent 60%);
        
    /* Keeps the gradient locked in place while the user scrolls! */
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Reusable Glass Class for Elementor */
.gem-glass-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 24px !important;
}

/* Smooth Image Loading for SEO */
img {
    max-width: 100%;
    height: auto;
    display: block;
}