body {
    font-family: 'Inter', sans-serif;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hero-title {
    font-size: 2.5rem; /* Default for mobile */
}

.site-title, .footer-site-title {
    font-size: 1.25rem; /* Default for mobile */
}

.section-title, .modal-article-title, .modal-section-title, .article-title, .news-title {
    font-size: 1.25rem; /* Default for mobile */
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.5rem; /* Tablet */
    }
    .site-title, .footer-site-title {
        font-size: 1.8rem; /* Tablet */
    }
    .section-title, .modal-article-title, .modal-section-title {
        font-size: 2rem; /* Tablet */
    }
    .article-title, .news-title {
        font-size: 1.5rem; /* Tablet */
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.5rem; /* Desktop */
    }
    .site-title, .footer-site-title {
        font-size: 2rem; /* Desktop */
    }
    .section-title, .modal-article-title, .modal-section-title {
        font-size: 2.5rem; /* Desktop */
    }
    .article-title, .news-title {
        font-size: 1.75rem; /* Desktop */
    }
}

.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-card img {
    flex-shrink: 0;
}

.article-card .p-6 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-card .flex-grow {
    flex-grow: 1;
}

.article-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
}

.article-modal .p-6 {
    flex-grow: 1;
}

.word-break-all {
    word-break: break-all;
}
/* Parent container styles */
.userClauseNet {
    margin-top: 20px; /* Top margin for the container */
    margin-inline: 15px; /* Side margins for the container (left and right) */
    /* You might want to add a max-width for better readability on large screens */
    /* max-width: 800px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Heading styles */
.userClauseNet h1 {
    font-size: 2.2rem; /* Moderate font size for H1 */
    font-weight: 700; /* Bold font weight */
    line-height: 1.2; /* Line height for readability */
    margin-top: 1.5em; /* Top margin for spacing */
    margin-bottom: 0.8em; /* Bottom margin for spacing */
}

.userClauseNet h2 {
    font-size: 1.8rem; /* Moderate font size for H2 */
    font-weight: 600; /* Slightly less bold than H1 */
    line-height: 1.2;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
}

.userClauseNet h3 {
    font-size: 1.5rem; /* Moderate font size for H3 */
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.3em;
    margin-bottom: 0.6em;
}

.userClauseNet h4 {
    font-size: 1.2rem; /* Moderate font size for H4 */
    font-weight: 500; /* Standard font weight */
    line-height: 1.4;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.userClauseNet h5 {
    font-size: 1.1rem; /* Moderate font size for H5 */
    font-weight: 500;
    line-height: 1.4;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
}

/* Paragraph styles */
.userClauseNet p {
    font-size: 1rem; /* Base font size for paragraphs */
    line-height: 1.6; /* Line height for readability */
    margin-bottom: 1em; /* Bottom margin for spacing between paragraphs */
}

/* Unordered list styles */
.userClauseNet ul {
    list-style: disc; /* Default disc style for unordered lists */
    margin-top: 1em; /* Top margin for spacing */
    margin-bottom: 1em; /* Bottom margin for spacing */
    padding-left: 1.5em; /* Indentation for list items */
}

/* List item styles */
.userClauseNet li {
    font-size: 1rem; /* Inherit or set base font size */
    line-height: 1.6; /* Line height for readability */
    margin-bottom: 0.5em; /* Bottom margin for spacing between list items */
}