@media (min-width: 768px) {
    .top_menu {
        display: flex; /* Hide the menu container by default */
        width: 100%;
    }
     #menu-toggle {
        display: none;
        visibility: hidden;
    }

.dp-arrow{
    display: none;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}

/* Sub-submenu */
.sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
}
}
@media (max-width: 767px) {
    /* CSS rules for devices with a screen width of 767px or less */
/* General Mobile Styles */
body {
    font-size: 1rem!important; /* Adjust base font size for readability on mobile */
    padding: 0px 20px!important;
}
.video-container {
     /* Make the container 60% of the width of its parent */
    width: 100% !important;
    padding-bottom: 56.25% !important;
}


.mitde{
    width: 145px!important;
}

.mitdeimg{
    width: 100%;
}
body::before,
body::after {
    content: '';
    position: absolute;
    top: 0;
    width: 20px!important; /* Adjust to the width of your image */
    height: 100%; /* Initially set to 100% height */
    min-height: 100%; /* Ensure it covers the full length of the content */
    background-repeat: repeat-y; /* Repeat the image vertically */
    background-size: contain; /* Ensures the image fits within the width */
    z-index: 10; /* Keeps the border above the content */
}
.topborder{
    width: 100%;
    height: 20px!important;
    background-image: url(../images/bordv.jpg);
    background-repeat: repeat-x; /* Repeat the image vertically */
    background-size: contain;
}
.rugaciuni{
    display: flex;
    align-items: center!important; /* Aligns the content to the top of the image */
    margin: 20px 0;
    flex-direction: column;
}

.leftbanner{
	width: 100px;
	height: 150px;
}
.rightbanner{
	width: 100px;
	height: 150px;
}
/* Top Menu Adjustments */
    #menu-toggle {
        width: 100%;
        display: block;
        visibility: visible;
        align-items: center;
        background-color: var(--menu-background-color);
        color: black;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 1rem;
        position: relative;
    }

    .menu-text {
        display: block; /* Show text by default */
        font-size: 1.2rem;
        font-weight: bold;
    }

    .menu-icon {
        display: none; /* Hide icon by default */
        font-size: 1.5rem;
    }

    .top_menu {
        display: none; /* Hide the menu container by default */
        flex-direction: column;
        width: 100%;
    }

    .top_menu ul{
        position: relative!important;
    }

    .top_menu {
        
        flex-direction: column;
        width: 100%;
    }

    .top_menu li {
        margin: 0;
        text-align: center;
    }

.dp-arrow{
    display: inline;
    padding-left: 10px;
}

/* When menu is toggled open */
.top_menu.show {
    display: flex;
}

/* Toggle button styles when menu is visible */
.menu-text.hidden {
    display: none; /* Hide text */
}

.menu-icon.show {
    display: block; /* Show icon */
}

/* Banner Adjustments */
.banner {
    height: 10vh; /* Adjust height for visibility */
    background-size: cover; /* Ensure the background covers the div */
}

.bannertext{
	text-align: center;
	font-size: 0.8rem;
}

/* Sidebar Adjustments */
#left-sidebar, #right-sidebar {
    order: 3;
    width: 100%; /* Full width on mobile */
    margin: 10px 0; /* Add some margin */
}

/* Main Content Adjustments */
.main-content {
    order: 1;
    width: 100%; /* Full width on mobile */
    margin: 10px 0; /* Add some margin */
}

/* Footer Adjustments */
#the_footer {
    padding: 15px; /* Reduce padding for smaller screens */
    text-align: center; /* Ensure text is centered */
}

/* Post Adjustments */
.post img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    margin: 10px 0; /* Adjust margins */
}

.post-title {
    font-size: 1rem!important; /* Adjust font size */
    text-align: center; /* Center text */
}

.read-more {
    width: 100%; /* Full width button */
    text-align: center; /* Center text */
    float: none; /* Remove float */
    margin: 10px 0; /* Adjust margins */
}
.post-content{
	padding: 0px 10px;
}

/* Responsive Utility Classes */
.clear-both {
    display: block; /* Ensure it clears floats properly */
    width: 100%;
    height: auto;
}

.text-center {
    text-align: center; /* Center text */
}

/* Content Wrapper Adjustments */
.content-wrapper {
	 display: flex;
    flex-direction: column; /* Stack items vertically */

    padding: 10px; /* Adjust padding */
}

}