:root {
    --primary-color: #688E4E;
    --secondary-color: #3C5148;
    --highlight-color: rgb(28, 53, 44);
    --background-image: url('../images/terms-and-service/Terms-and-condition.jpg');
}

.containers {
    margin: 2rem 3rem;
    /* Using rem for better scalability */
}

.hero::after {
    background-image: var(--background-image);
}

.hero {
    gap: 0;
}

nav {
    background: rgba(104, 113, 94, 0.3);
}

ul {
    margin-left: 1.25rem;
    /* Using rem for consistency */
    list-style: square;
}

h1,
h2 {
    color: var(--primary-color);
    margin: 1rem 0;
    /* Using rem for consistency */
}

h3 {
    margin: 0.625rem 0;
    /* Using rem for consistency */
    color: var(--secondary-color);
}

div p {
    margin: 0.625rem 0;
    /* Using rem for consistency */
}

ul li {
    margin: 0.625rem 0;
    /* Using rem for consistency */
}

li::marker {
    color: var(--primary-color);
}

.highlight {
    color: var(--highlight-color);
    font-size: 1.25rem;
    /* Adjust font size for better readability */
    font-weight: 600;
}

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

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .containers {
        margin: 1rem;
        /* Reduce margins on smaller screens */
    }

    h1,
    h2,
    h3 {
        font-size: 1.5rem;
        /* Adjust font sizes for readability */
    }
}