:root {
    --primary-color: #6B5B95;
    --secondary-color: #4B3C75;
    --text-dark: #2E1A47;
    --text-medium: #4a3d5f;
    --text-light: #6B5B95;
    --background-light: #f7f8fc;
    --background-medium: #f9f9fb;
    --background-gradient-start: #f0e4ff;
    --background-gradient-end: #e6d0ff;
    --shadow-light: 0 2px 6px rgba(0, 0, 0, 0.1);
    --border-radius-small: 5px;
    --border-radius-medium: 10px;
    --border-radius-large: 30px;
    --spacing-xs: 8px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 50px;
    --spacing-xxl: 100px;
}
    /* NAVBAR */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 5%; /* Use percentage for padding */
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .logo a {
        text-decoration: none;
        color: inherit;
    }

    .logo h1 {
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        margin: 0;
        letter-spacing: 3px;
        background: linear-gradient(90deg, #6B5B95, #B8A1D9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .logo span {
        font-size: 12px;
        color: var(--text-light);
        letter-spacing: 2px;
    }

    .nav-links {
        display: flex;
        gap: 28px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-links a {
        color: var(--text-dark);
        font-weight: 500;
        transition: .3s;
        text-decoration: none;
    }

    .nav-links a:hover {
        color: var(--primary-color);
    }

    .dropdown {
        position: relative;
    }

    .dropdown-list {
        display: none;
        position: absolute;
        background: #fff;
        padding: 8px 0;
        top: 110%;
        left: 0;
        min-width: 200px;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        list-style: none;
    }

    .dropdown-list li {
        padding: 0;
    }

    .dropdown-list li a {
        display: block;
        padding: 10px 20px;
        color: var(--text-dark);
        font-size: 15px;
        transition: 0.3s;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    
    .dropdown-list li:last-child a {
        border-bottom: none;
    }

    .dropdown-list li a:hover {
        color: var(--primary-color);
        background: rgba(107, 91, 149, 0.07);
    }

    .dropdown:hover .dropdown-list {
        display: block;
    }

    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .hamburger div {
        width: 28px;
        height: 3px;
        background-color: var(--text-dark);
        transition: 0.3s;
        border-radius: 2px;
    }

    /* --- RESPONSIVE MEDIA QUERIES --- */

    /* For Tablets and smaller devices */
    @media (max-width: 992px) {
        .service-centered {
            padding: 40px 0;
        }
        .footer-container {
            text-align: center;
            justify-content: center;
        }
        .footer-social {
            justify-content: center;
            display: flex;
        }
    }

    /* For Mobile devices */
    @media (max-width: 768px) {
        .navbar {
            padding: 15px 20px;
        }
        .hamburger {
            display: flex;
        }

        .nav-links {
            display: none;
            flex-direction: column;
            background: #fff;
            width: 100%;
            position: absolute;
            top: 100%; /* Position below navbar */
            left: 0;
            padding: 15px 0;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border-radius: 0 0 15px 15px;
            text-align: center;
        }

        .nav-links.active {
            display: flex;
        }

        .dropdown-list {
            position: static;
            box-shadow: none;
            background: transparent;
            text-align: center;
            min-width: unset;
            padding: 0;
        }
        
        .dropdown-list li a {
            padding: 12px 20px;
            border-color: rgba(0,0,0,0.04);
        }

        .dropdown:hover .dropdown-list {
            display: none; /* Disable hover on mobile */
        }
        
        .dropdown.open .dropdown-list {
            display: block; /* Show with JS on click */
        }

        .hamburger.open div:nth-child(1) {
            transform: rotate(45deg) translateY(7px);
        }

        .hamburger.open div:nth-child(2) {
            opacity: 0;
        }

        .hamburger.open div:nth-child(3) {
            transform: rotate(-45deg) translateY(-7px);
        }
        
        .service-section {
            padding: 40px 0;
        }
        
        .product-testing-section {
            border-radius: 30px;
        }
    }