:root {
    --primary-color: #f5f5f5; /* Light gray background */
    --secondary-color: #333333; /* Dark gray for text and accents */
    --accent-color: #888888; /* Medium gray for subtle highlights */
    --text-color: #2d2d2d; /* Dark text color */
    --subtext-color: #7a7a7a; /* Softer gray for subtext */
}

header {
    text-align: center;
    padding: 40px;
    color: var(--secondary-color); /* Dark gray for header text */
    width: 100%;
    background-color: var(--primary-color); /* Light gray background */
}

header h1 {
    font-size: 2.5rem;
    color:gray; /* Darker gray for main title */
}

header p {
    font-size: 1.2rem;
    color: var(--subtext-color); /* Softer gray for description text */
}

/* Responsive Styling */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    header p {
        font-size: 1rem;
    }
}