/* ============================================
           ROOT VARIABLES
        ============================================ */
        :root {
            /* Colors */
            --primary-blue: #211d52;
            --secondary-blue: #3f53a1;
            --accent-yellow: #f2b800;
            --action-red: #d00001;
            --brand-orange: #eb5d00;
            --nature-green: #5f8748;
            --text-dark: #333333;
            --text-light: #555555;
            --bg-grey: #F4F6F8;
            --border-color:   #e0e0e0;
            --white: #ffffff;



            
            /* Typography */
            --font-primary: 'IBM Plex Sans', Arial, sans-serif; 
            --fs-xs: 0.75rem;
            --fs-sm: 0.875rem;
            --fs-base: 1rem;
            --fs-lg: 1.125rem;
            --fs-xl: 1.25rem;
            --fs-2xl: 1.5rem;
            --fs-3xl: 1.875rem;
            --fs-4xl: 2.25rem;
            --fs-5xl: 3rem;
        }

           /* ============================================
           RESET & BASE
        ============================================ */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-primary);
            color: var(--text-dark);
            line-height: 1.6;
            background-color: var(--white);
            scroll-behavior: smooth;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: 0.3s ease;
        }

        ul {
            list-style: none;
        }