/* Article Section Styles */
article.mt-5 {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Heading Styles */
article.mt-5 h2, 
article.mt-5 h3, 
article.mt-5 h4 {
    margin-bottom: 20px;
    padding-bottom: 10px;
}

article.mt-5 h2 {
    font-size: 1.8em;
    color:  #000080;
    border-bottom: 2px solid #1976d2;
}

article.mt-5 h3 {
    font-size: 1.5em;
    color: #008000;
    margin-top: 20px;
}

article.mt-5 h4 {
    font-size: 1.4em;
    color: #800000; /* Choose your desired color */
    
}


/* Paragraph Styles */
article.mt-5 p {
    margin-bottom: 1.5rem;
    font-size: 1.2em;
    line-height: 1.8;
}
/* Indented Paragraph Styles */
.indented {
    margin-left: 20px; /* Adjust the value for the desired indentation */
    text-align: center;
    font-size: 1.2em;
}
ol {
    font-size: 1.2em; /* Match this to the paragraph size */
    padding-left: 20px; /* Optional: Indent the list */
}

ol li {
    font-size: 1.2em; /* Ensure the list items are the same size as the paragraphs */
}

/* List Styles */
ul li {
    font-size: 1.2em;
}

/* Highlight and Emphasis Styles */
.highlight, .highlight-box {
    background-color: #f0f4f1;
    border-left: 3px solid #388e3c;
    padding: 15px;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Call-to-Action Section */
.cta-section {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

.cta-link {
    color: #1976d2;
    text-decoration: none;
}

.cta-link:hover {
    text-decoration: underline;
}

/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Image Styles */
.img-fluid, 
.responsive-img, 
.image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.image-container img {
    max-height: 80vh; /* 80% of the screen height */
}

/* Responsive Styles */
@media (max-width: 768px) {
    article.mt-5 h2 { font-size: 1.5em; }
    article.mt-5 h3 { font-size: 1.2em; }
    article.mt-5 p { font-size: 1rem; }

    .cta-section, .highlight-box {
        padding: 12px;
    }

    .responsive-img {
        width: 90%;
        max-width: 500px;
    }
}

@media (min-width: 768px) {
    .image-container img {
        max-width: 70%; /* Restrict size on larger screens */
    }
}

img {
    max-width: 100%; /* Ensures the image scales down to fit its container */
    height: auto; /* Maintains the aspect ratio */
    
}

/* General Styles */
body {
    font-family: Arial, sans-serif; /* Ensure consistent font across devices */
    line-height: 1.6; /* Improved readability */
    margin: 0;
    padding: 0;
}

/* Container Styles */
.cuteness-substance-section,
.real-world-application-section,
.cultural-context-section,
.learning-quality-section,
.potential-solutions {
    background-color: #ffffff; /* Light background for contrast */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

/* Quote Box Styles */
.quote-box {
    background-color: #fff8e1; /* Light yellow for quote box */
    border-left: 4px solid #ffab00; /* Bright yellow for emphasis */
    padding: 10px 15px;
    margin: 20px 0;
    font-style: italic;
    text-align: center;
}

/* Image Styles */
.wise-owl-image,
.visualization-container img,
.visualize-concept img,
.cultural-impact img {
    border-radius: 8px; /* Rounded corners for images */
    width: 100%; /* Ensure images take full width of their container */
    height: auto; /* Maintain aspect ratio */
    max-width: 800px; /* Limit max width for large screens */
    margin: 0 auto; /* Center images */
    display: block; /* Ensures images behave as block elements */
    
}

/* Section Heading Styles */
h2 {
    color: #00796b; /* Dark teal for headings */
    margin-bottom: 15px; /* Space below headings */
}

h3 {
    color: #00796b; /* Dark teal for subheadings */
    margin: 15px 0 10px; /* Space around subheadings */
}

/* Text Styles */
p {
    margin: 10px 0; /* Space between paragraphs */
}

/* Solution Section Styles */
.solution-section {
    background-color: #ffffff; /* White background for sections */
    border: 1px solid #e0e0e0; /* Light gray border for separation */
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0; /* Spacing between sections */
}

ul {
    padding-left: 20px; /* Indent for list items */
}

a {
    color: #00796b; /* Link color */
    text-decoration: underline; /* Underline for links */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* Adjust padding and margin for smaller screens */
    .cuteness-substance-section,
    .real-world-application-section,
    .cultural-context-section,
    .learning-quality-section,
    .potential-solutions {
        padding: 15px;
    }
    
    .quote-box {
        font-size: 1.1em; /* Adjust font size for smaller screens */
    }

    h2, h3 {
        font-size: 1.5em; /* Slightly smaller headings */
    }

    p {
        font-size: 1.1em; /* Slightly smaller text */
    }
    .benefits-list, .weaknesses-list {
        margin: 1rem 0;
        padding: 1rem;
        background-color: #f9f9f9; /* Light background for emphasis */
        border-radius: 8px; /* Rounded corners */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    }
    
    .benefits-list ul, .weaknesses-list ul {
        list-style-type: none; /* Remove default list style */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
    }
    
    .benefits-list li, .weaknesses-list li {
        margin-bottom: 1rem; /* Spacing between list items */
        font-size: 1.1em; /* Slightly larger font for emphasis */
    }
    
    .benefits-list li strong, .weaknesses-list li strong {
        color: #007bff; /* Emphasized color for headers */
    }
    .language-exchange-grid {
        margin-bottom: 2rem; /* Adds space below the grid */
        position: relative; /* Ensures the pseudo-element is positioned correctly */
    }
    
    .language-exchange-grid .table {
        border-collapse: collapse; /* Ensures borders don't double up */
        width: 100%; /* Makes the table take the full width */
        margin-bottom: 0; /* Removes the bottom margin to avoid extra space */
    }
    
    .language-exchange-grid .table th,
    .language-exchange-grid .table td {
        border: 1px solid #dddddd; /* Adds borders to the table cells */
        padding: 8px; /* Adds padding for better readability */
        text-align: left; /* Align text to the left */
    }
    
    .language-exchange-grid .table th {
        background-color: #f2f2f2; /* Light background for table header */
    }
    
    /* Added border styling directly to the grid for more visibility */
    .language-exchange-grid::after {
        content: ""; /* Creates a pseudo-element */
        display: block; /* Makes it a block element */
        height: 2px; /* Thickness of the line */
        background-color: #007bff; /* Color of the line */
        margin-top: 1rem; /* Space above the line */
    }
    
    /* Ensure the after pseudo-element is positioned below the table */
    .language-exchange-grid {
        border-bottom: 1px solid #007bff; /* Optional: Adds a border below the grid as a fallback */
    }

     
}