/* Container */
.resources-container {
    max-width: 75%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* Hero Section */
.resources-hero {
    background-color: var(--color-primary4);
    color: var(--color-text);
    text-align: center;
    padding-bottom: 50px;
    margin-top: 80px;
    width: 100%;
    box-sizing: border-box;
}

.resources-hero h1,
.resources-hero p {
    text-align: left; /* Left-justify the text */
}

.resources-hero h1 {
    font-size: var(--h1-font-size);
    padding: 20px;
    margin: 0 auto;
}

.resources-hero p {
    font-size: var(--body-font-size);
    line-height: 1.8;
    margin: 0 auto;
    padding: 0 10px;
}

/* Books Section */
.resources-books,
.resources-websites,
.resources-courses,
.resources-journals,
.resources-community {
    padding: 50px 20px;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}

.resources-books {
    background-color: var(--color-background2);
}

.resources-websites {
    background-color: var(--color-background2);
}

.resources-journals {
    background-color: var(--color-background2);
}

.resources-courses,
.resources-community {
    background-color: var(--color-background1);
}

.resources-books h2,
.resources-books h3,
.resources-books p,
.resources-books ul,
.resources-websites h2,
.resources-websites p,
.resources-websites ul,
.resources-courses h2,
.resources-courses p,
.resources-courses ul,
.resources-journals h2,
.resources-journals p,
.resources-journals ul,
.resources-community h2,
.resources-community p,
.resources-community ul {
    text-align: left; /* Left-justify the text */
}

.resources-books h2,
.resources-websites h2,
.resources-courses h2,
.resources-journals h2,
.resources-community h2 {
    font-size: var(--h1-font-size);
    margin-bottom: 20px;
}

.resources-books h3 {
    font-size: var(--h3-font-size);
    margin-bottom: 10px; /* Added margin for separation */
}

.resources-books p,
.resources-websites p,
.resources-courses p,
.resources-journals p,
.resources-community p {
    font-size: var(--body-font-size);
    line-height: 1.8;
}

.resources-books ul,
.resources-websites ul,
.resources-courses ul,
.resources-journals ul,
.resources-community ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resources-books li,
.resources-websites li,
.resources-courses li,
.resources-journals li,
.resources-community li {
    margin-bottom: 20px; /* Space between each entry */
    font-size: var(--body-font-size);
}

.book-title,
.website-title,
.course-title,
.journal-title,
.community-title {
    font-size: var(--h4-font-size);
    margin-bottom: 10px;
    display: block;
}

.book-card,
.website-card,
.course-card,
.journal-card,
.community-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.book-image-container,
.website-image-container,
.course-image-container,
.journal-image-container,
.community-image-container {
    flex: 1;
    max-width: 200px;
    margin-right: 20px;
}

.book-image,
.website-image,
.course-image,
.journal-image,
.community-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 5px;
}

.book-details,
.website-details,
.course-details,
.journal-details,
.community-details {
    flex: 2;
}

.book-description,
.website-description,
.course-description,
.journal-description,
.community-description {
    font-size: var(--body-font-size);
    line-height: 1.8;
}

/* Specific styling for different links */

/* Styled Link */
.styled-link {
    color: var(--color-secondary2); 
    font-weight: bold;
    text-decoration: none; 
}

.styled-link:hover {
    color: var(--color-secondary2); 
    text-decoration: underline; 
}

/* Amazon Link */
.amazon-link {
    color: var(--color-secondary2); 
    font-weight: bold;
    text-decoration: underline; 
}

.amazon-link:hover {
    color: var(--color-primary2); 
}

/* Ensure no horizontal overflow */
body, html {
    overflow-x: hidden;
}

/* Responsive Card Layout */
@media (max-width: 768px) {
    .book-card,
    .website-card,
    .course-card,
    .journal-card,
    .community-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-image-container,
    .website-image-container,
    .course-image-container,
    .journal-image-container,
    .community-image-container {
        margin-bottom: 20px;
    }

    .book-details,
    .website-details,
    .course-details,
    .journal-details,
    .community-details {
        width: 100%;
    }
}

.styled-text-graybg {
    color: var(--color-secondary2);
    font-weight: bold;
}