/* responsive.css - Media Queries */

/* Media Queries for responsiveness */
@media screen and (max-width: 768px) {
    .post {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 576px) {
    .post {
        width: calc(100% - 20px);
    }
}

.fancy-title h1::after {
    width: 60px;
    @media screen and (max-width: 480px) {
        h1 {
            font-size: 8px;
        }
    }
}

.fancy-title h2::after {
    width: 60px;
    @media screen and (max-width: 480px) {
        h2 {
            font-size: 8px;
        }
    }
}

.fancy-title h3::after {
    width: 60px;
    @media screen and (max-width: 480px) {
        h3 {
            font-size: 8px;
        }
    }
}
/* Mobile-friendly Additions */
@media screen and (max-width: 767px) {
    .container {
        margin-left: 0;
    }

    .box {
        width: 100%;
        max-width: calc(100% - 20px);
        margin: 20px 0;
    }

    .latest-news {
        flex-direction: column;
        align-items: center;
    }

    .latest-news .box {
        width: calc(100% - 40px); /* Adjusted width to fill the width with margin */
        max-width: calc(100% - 40px);
        margin: 20px 0;
    }
}
/* Styles for sidebar */
.sidebar {
    width: 300px; /* Adjust width as needed */
    height: 100%; /* Make it fill the full height of the page */
    position: fixed; /* Fixed position so it stays in place */
    top: 0; /* Align to the top */
    right: 0; /* Align to the right */
    padding: 20px; /* Add padding for spacing */
    background-color: #f2f2f2; /* Background color for the sidebar */
    border-left: 1px solid #ddd; /* Add border for separation */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
}
/* Mobile-friendly adjustments to sidebar */
@media screen and (max-width: 767px) {
    .sidebar {
        width: 100%;
        position: relative;
        top: unset;
        right: unset;
        padding: 10px;
        background-color: #f2f2f2;
        border-left: none;
        overflow-y: auto;
    }
}
/* Ensure merchandise store appears below the small navigation bar */
#wrapper {
    position: relative;
    z-index: 1000; /* Set a lower z-index */
}