/* Responsive Videos */
.video-container iframe,
.video-box {
    width: 100%;
    height: auto;
}

/* Adjusting Layout for Mobile */
@media only screen and (max-width: 1000px) {
    .parent-container { /* Assuming .parent-container wraps #blog-content and #sidebar */
        flex-direction: column;
    }
    #sidebar {
        display: none; /* Hide sidebar on screens 768px wide or less */
    }
    .ui.container {
        padding: 0.5rem; /* Reduced padding */
    }

    .ui.container .menu .item {
        font-size: 0.8rem; /* Smaller text */
        padding: 0.5rem 0.75rem; /* Reduced padding around menu items */
    }

    .ui.container .menu .item i {
        font-size: 1rem; /* Smaller icons */
    }

    /* Adjust other elements as needed */
    .ui.container h1, .ui.container h2, .ui.container h3 {
        font-size: 1.25rem; /* Smaller headings */
    }
    .active_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 2rem; /* Adjusted font size for mobile */
        padding: 0.5rem; /* Optional: Adjust padding to fit your design */
        margin: 0 auto; /* Optional: Adjust margin for better alignment */
        /* Other styling adjustments as needed */
    }

    #blog-content {
        width: 100%;
        margin:5px;
        padding: 10px;
        border-radius: 1%;
        font-size: .5rem; /* Larger font size for better readability */

    }
    .content-area {
        font-size: .5rem;
    }
    .main-content {
        flex-direction: column;
    }
    .content-container {
        flex-direction: column-reverse; /* Stack sidebar on top of blog content */
    }
    .chat-modal {
        display: flex;
        flex-direction: column;
        width: 100%;
        bottom: 0;
        right: 0;
    }
    .chat-modal-content {
        flex-direction: column;
    }
    button, .btn {
        padding: 15px;
        font-size: 1rem; /* Larger font size for better readability */
    }
    .menu-icon, .fas {
        font-size: 1.5rem; /* Adjust icons size */
    }
    .inner-box, .sidebar-section {
        padding: 10px; /* Adjust padding */
    }
    /* Show toggle buttons on mobile */
    .toggle-button {
        display: block;
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        background-color: #2185d0; /* Semantic UI primary color */
        color: white;
        border: none;
        cursor: pointer;
    }
    .toggle-button:hover {
        background-color: #1678c2; /* A slightly darker blue */
    }
    /* Ensure sections are initially hidden to allow for toggle functionality */
    #related-links, #related_videos {
        display: none;
    }

    /* Update grid items for a single-column layout on mobile */
    .grid-sizer, .grid-item, .grid-item--video {
        width: 100%; /* Makes each item take full width of the grid container */
    }

    .grid-item img, .grid-item--video video {
        max-width: 100%; /* Ensures images and videos are responsive within their containers */
        height: auto; /* Adjust height automatically to maintain aspect ratio */
    }

    /* Optional: Adjust the grid gap if necessary */
    .grid {
        grid-gap: 10px; /* Adjust based on your design preference */
    }
}