/* Ensure body background doesn't interfere */
    body {
        position: relative;
        min-height: 100vh;
        background: linear-gradient(-45deg, #f5f7fa, #c3cfe2, #a1c4fd, #f5f7fa);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        margin: 0;
        padding: 0;
    }
    
    @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    /* Add a pseudo-element to ensure content area is properly separated */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        z-index: -1;
    }
    
    .container {
        max-width: 1200px;
        margin: 3rem auto;
        padding: 0 20px;
        position: relative; /* Ensure it's above the animated background */
        z-index: 1;
    }
    
    .content-box {
        background: white !important;
        padding: 3rem;
        border-radius: 10px;
        box-shadow: 0 5px 30px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        position: relative;
        z-index: 2; /* Ensure it's above everything */
    }
    
    /* Rest of your existing styles remain the same */
    .last-updated {
        background: #e6f5fc;
        border-left: 4px solid #31ADDE;
        padding: 1rem 1.5rem;
        margin-bottom: 2rem;
        border-radius: 5px;
    }
    
    .last-updated p {
        color: #111111 !important;
    }
    
    h2 {
        color: #1a3a5f;
        font-size: 1.8rem;
        margin: 2rem 0 1rem 0;
        padding-top: 1rem;
        border-top: 2px solid #e6f5fc;
    }
    
    h2:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    
    h3 {
        color: #2c5c8a;
        font-size: 1.3rem;
        margin: 1.5rem 0 0.8rem 0;
    }
    
    p {
        margin-bottom: 1rem;
        color: #444;
    }
    
    ul, ol {
        margin: 1rem 0 1rem 2rem;
    }
    
    li {
        margin-bottom: 0.5rem;
        color: #444;
    }
    
    .highlight-box {
        background: #fff8e6;
        border-left: 4px solid #ffa726;
        padding: 1.5rem;
        margin: 1.5rem 0;
        border-radius: 5px;
    }
    
    .highlight-box h4 {
        color: #e65100;
        margin-bottom: 0.5rem;
    }
    
    .contact-section {
        background: #e6f5fc;
        padding: 2rem;
        border-radius: 8px;
        margin-top: 2rem;
    }
    
    .contact-section h3 {
        color: #0C7AA7;
        margin-top: 0;
    }
    
    .contact-section a {
        color: #31ADDE;
        text-decoration: none;
        font-weight: 600;
    }
    
    .contact-section a:hover {
        text-decoration: underline;
    }
    
    .footer {
        background: #1a3a5f;
        color: white;
        text-align: center;
        padding: 2rem;
        margin-top: 3rem;
    }
    
    .footer a {
        color: #31ADDE;
        text-decoration: none;
    }
    
    .footer a:hover {
        text-decoration: underline;
    }
    
    @media (max-width: 768px) {
        .header h1 {
            font-size: 2rem;
        }
        
        .content-box {
            padding: 1.5rem;
        }
        
        h2 {
            font-size: 1.5rem;
        }
        
        h3 {
            font-size: 1.2rem;
        }
    }