body{
    font-family: "Cairo", sans-serif;
      /*font-family: "Lato",Verdana,Geneva,sans-serif;
     height: 3000px;*/
 }
 a{
     text-decoration: none;
 }
 .owl-stage,.owl-item{
     width: 100%!important;
 }
 /*costum size*/
 
 .carousel-item {
     height: 500px!important;
     background-color: rgba(0,0,0,0.5)!important;
   }
   
   .carousel-item img {
       position: absolute!important;
       top: 0!important;
       left: 0!important;
       min-height: 500px!important;
   }
 /*end of custom size*/
 .bg-primary {
     background-color: #07355C!important;
 }
 .input-group:focus{
     outline: none;
 }
 .btn-primary {
     color: #fff;
     background-color: #07355C!important;
     /*border-color: #0d6efd;*/
 }
 #top-bar{
     background: #F5F3F3;
     color: #2c3034;
     height: 50px;
     line-height: 50px;
 }
 .top-contact,.social-media{
     list-style: none;
 }
 .col-lg-8 .top-contact{
     margin-left: -36px;
     left: 0;
     display: flex;
     justify-content: start;
 }
 .col-lg-4 .social-media {
     margin-right: -36px;
     right: 0;
     display: flex;
     justify-content: space-evenly;
 }
 
 #top-bar li{
     display: inline-block;
     text-decoration: none;
     
 }
 .social-media li{
    padding-left: 5px;
 }

 .top-contact li{
    padding-right: 5px;
 }
 #top-bar li a{
     color: #2c3034;
     text-decoration: none;
     display: inline-block;

 }
 header{
     padding: 15px 0;
 }
 .logo{
     display: flex;
     margin-top: -4px;
 }
 .logo .logo-name{
     padding: 20px 10px;
 }
 .logo .logo-name h2{
     font-size:15px ;
     color: #2c3034;
     text-transform: uppercase;
 }
 .logo .logo-name h4{
     font-size:11px ;
     color: #2c3034;
     text-transform: uppercase;
     padding-left: 0px;
     margin-top: 10px;
 }
 .searchbox{
     margin-top: 28px;
     margin-right: 22px; 
 }
 .searchbox .form-group {
    
    display: flex;
    align-items: baseline;
    
}
.form-text {
    margin-right: 1px;
    padding: 8px;
    padding-right: 104px;
    padding-left: 11px;
}

 .searchico{
     line-height: 2;
     color: #F5F3F3;
 }
 .annual-budget{
     background-color: #f5f4f4;
     padding-bottom: 60PX;
     padding-top: 5px;
 }
 .budget-text {
     margin-top: -20%;
     color: #fff;
     font-size: 16px;
 }
 .text-dark div a{
     color: #565758!important;
 }
 
 .link-light li a{
     color: #fff;
 }
 .footer{
     /*background: #123e70!important;*/
     line-height: 40px;
     padding-top: 10px;
 }

 /*Space*/
 .space{
    margin-top: 170px !important;

 }
/* Responsive Styles */
@media (max-width: 991px) {
    /* Navigation toggle button */
    .navbar-toggler {
        margin: 0 auto;
        display: block;
    }
    
    /* Logo adjustments */
    .logo {
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
    }
    
    /* Search box positioning */
    .searchbox {
        margin: 10px auto;
        width: 100%;
    }
    
    .searchbox .form-group {
        justify-content: center;
    }
    
    .form-text {
        padding-right: 50px;
    }
    
    /* Adjust carousel height */
    .carousel-item, .carousel-item img {
        height: 350px!important;
        min-height: 350px!important;
    }
    
    /* Fix top bar alignment */
    #top-bar {
        height: auto;
        text-align: center;
    }
    
    .col-lg-8 .top-contact,
    .col-lg-4 .social-media {
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    /* Improve navbar toggle button visibility */
    .navbar-toggler {
        background-color: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.3);
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    /* Adjust container padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Improve carousel navigation arrows */
    .carousel-control-prev, 
    .carousel-control-next {
        width: 10%;
        opacity: 0.8;
        background-color: rgba(0, 0, 0, 0.2);
        height: 40px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 4px;
    }
    
    /* Adjust arrow icon position and size */
    .carousel-control-prev-icon, 
    .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Add some padding to the content to avoid arrow overlap */
    .carousel-inner {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    /* Further reduce carousel height */
    .carousel-item, .carousel-item img {
        height: 250px!important;
        min-height: 250px!important;
    }
    
    /* Adjust top bar for mobile */
    #top-bar {
        line-height: 30px;
        padding: 10px 0;
    }
    
    .top-contact, .social-media {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 5px 0;
    }
    
    /* Improve search form on mobile */
    .form-text {
        width: calc(100% - 50px);
        padding-right: 15px;
    }
    
    /* Reduce spacing */
    .space {
        margin-top: 100px !important;
    }
    
    /* Budget text adjustment */
    .budget-text {
        margin-top: -30%;
        font-size: 14px;
    }
    
    /* Footer improvements */
    .footer {
        text-align: center;
    }
    /* Fix the central content layout */
    main, .main-content {
        padding: 10px;
    }
    
    /* Fix the header and logo */
    header {
        padding: 10px 0;
        text-align: center;
    }
    
    /* Adjust the emblem/logo */
    .site-emblem {
        max-width: 150px;
        margin: 0 auto;
    }
    
    /* Fix social media icons spacing */
    .social-media {
        margin-top: 10px;
    }
    
    /* Improve search form appearance */
    .search-form {
        margin: 15px auto;
        width: 100%;
        max-width: 300px;
    }
    
    /* Fix empty space at top */
    .space {
        margin-top: 50px !important;
    }
    
    /* Remove any fixed heights that cause issues */
    .row > [class*="col-"] {
        margin-bottom: 15px;
    }
    
    /* Fix the email and date display */
    header .text-end {
        text-align: center !important;
    }
    
    /* Further refinement for mobile devices */
    .carousel-control-prev, 
    .carousel-control-next {
        width: 35px;
        height: 35px;
    }
    
    /* Make carousel indicators more visible on small screens */
    .carousel-indicators {
        margin-bottom: 0;
    }
    
    .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
}

@media (max-width: 576px) {
    /* Small mobile adjustments */
    .carousel-item, .carousel-item img {
        height: 200px!important;
        min-height: 200px!important;
    }
    
    /* Make logo smaller */
    .logo img {
        max-width: 70px;
    }
    
    .logo .logo-name h2 {
        font-size: 13px;
    }
    
    .logo .logo-name h4 {
        font-size: 10px;
    }
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Adjust search box */
    .searchbox {
        margin-top: 10px;
    }
    /* Very small screens */
    body {
        font-size: 14px;
    }
    
    /* Improve header area */
    .site-header {
        padding: 5px 0;
    }
    
    /* Flag and contact info adjustments */
    .flag-container, .contact-info {
        text-align: center;
        margin: 5px auto;
    }
    
    /* Fix any overflow issues */
    .container {
        overflow-x: hidden;
    }
    
    /* Ensure content doesn't get cut off */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .col, [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Make the date and email more readable */
    .date-display, .email-display {
        font-size: 13px;
        display: block;
        margin: 5px 0;
    }
    
    /* Even smaller screens */
    .carousel-control-prev, 
    .carousel-control-next {
        width: 30px;
        height: 30px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 15px;
        height: 15px;
    }
    
    /* Make sure the indicators have proper spacing */
    .carousel-indicators {
        bottom: 5px;
    }
    
    .carousel-indicators [data-bs-target] {
        margin-right: 3px;
        margin-left: 3px;
    }
    
    /* Ensure the Arabic text in carousel is properly sized */
    .carousel-caption h3,
    .carousel-caption h5 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .carousel-caption p {
        font-size: 12px;
        margin-bottom: 5px;
    }
}

/* Fix for RTL layout issues in mobile */
[dir="rtl"] .navbar-toggler {
    margin-right: auto;
    margin-left: 0;
}

/* Fix for flexbox issues in small screens */
@media (max-width: 480px) {
    .d-flex {
        flex-wrap: wrap;
    }
    
    /* Ensure the flag and icons are properly visible */
    .flag-icon {
        display: inline-block;
        margin: 0 auto;
        text-align: center;
    }
    
    /* Make sure important elements are visible without scrolling */
    .site-main {
        margin-top: 20px;
    }
}

/* Fix for carousel arrows in responsive view */
@media (max-width: 991px) {
    /* Improve carousel navigation arrows */
    .carousel-control-prev, 
    .carousel-control-next {
        width: 10%;
        opacity: 0.8;
        background-color: rgba(0, 0, 0, 0.2);
        height: 40px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 4px;
    }
    
    /* Adjust arrow icon position and size */
    .carousel-control-prev-icon, 
    .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Add some padding to the content to avoid arrow overlap */
    .carousel-inner {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    /* Further refinement for mobile devices */
    .carousel-control-prev, 
    .carousel-control-next {
        width: 35px;
        height: 35px;
    }
    
    /* Make carousel indicators more visible on small screens */
    .carousel-indicators {
        margin-bottom: 0;
    }
    
    .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
}

@media (max-width: 576px) {
    /* Even smaller screens */
    .carousel-control-prev, 
    .carousel-control-next {
        width: 30px;
        height: 30px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 15px;
        height: 15px;
    }
    
    /* Make sure the indicators have proper spacing */
    .carousel-indicators {
        bottom: 5px;
    }
    
    .carousel-indicators [data-bs-target] {
        margin-right: 3px;
        margin-left: 3px;
    }
    
    /* Ensure the Arabic text in carousel is properly sized */
    .carousel-caption h3,
    .carousel-caption h5 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .carousel-caption p {
        font-size: 12px;
        margin-bottom: 5px;
    }
}

/* RTL specific fixes for carousel controls */
[dir="rtl"] .carousel-control-prev {
    right: 0;
    left: auto;
}

[dir="rtl"] .carousel-control-next {
    right: auto;
    left: 0;
}

/* Fix for Bootstrap's carousel controls in RTL mode */
[dir="rtl"] .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

[dir="rtl"] .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

/* Specific styling for news items with embassy emblem images */
.ministry-announcement img,
.embassy-emblem img {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 15px auto;
}

@media (max-width: 767px) {
    .ministry-announcement img,
    .embassy-emblem img {
        max-width: 100px;
    }
}

@media (max-width: 576px) {
    .ministry-announcement img,
    .embassy-emblem img {
        max-width: 80px;
    }
    
    /* Improve spacing between news items */
    .news-separator {
        margin: 15px 0;
        border-bottom: 1px solid #eee;
    }
    
    /* Better date formatting on mobile */
    .news-date {
        display: block;
        text-align: center;
        color: #07355C;
        font-weight: 600;
        margin-top: 5px;
    }
}

/* Additional responsive image styling */
@media (max-width: 991px) {
    /* Ensure all content images are responsive */
    .site-main img,
    .entry-content img,
    .post-thumbnail img,
    article img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    /* Fix for emblem/logo images */
    .site-emblem img,
    .post img {
        max-width: 90%;
        margin: 10px auto;
    }
}

@media (max-width: 767px) {
    /* Improve image display on smaller screens */
    .news-item img,
    .post-thumbnail img {
        max-width: 85%;
        margin: 10px auto;
    }
    
    /* Better spacing for content with images */
    .news-item,
    .post {
        padding: 10px 0;
        margin-bottom: 15px;
    }
    
    /* Add proper padding around news content */
    .news-content,
    .post-content {
        padding: 0 10px;
    }
    
    /* Center align titles and dates */
    .news-title,
    .post-title,
    .news-date,
    .post-date {
        text-align: center;
    }
}

@media (max-width: 576px) {
    /* Further adjustments for very small screens */
    .news-item img,
    .post-thumbnail img {
        max-width: 100%;
    }
    
    /* Adjust news item layout */
    .news-item {
        display: flex;
        flex-direction: column;
    }
    
    /* Ensure proper thumbnail/image sizing */
    .news-thumbnail,
    .post-thumbnail {
        margin-bottom: 10px;
    }
    
    /* Improve date and title appearance */
    .news-date,
    .post-date {
        margin-bottom: 5px;
        font-size: 12px;
    }
    
    .news-title h3,
    .post-title h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    /* Ensure RTL alignment for Arabic content */
    [dir="rtl"] .news-content,
    [dir="rtl"] .post-content {
        text-align: right;
    }
    
    [dir="rtl"] .news-title,
    [dir="rtl"] .post-title {
        text-align: right;
    }
}

/* Enhanced 404 page search styling */
.error-404 .search-form,
.error-404 form {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 25px auto;
}

.error-404 .search-form .search-field,
.error-404 input[type="search"] {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 5px 0 0 5px;
    height: 45px;
    background-color: #fff;
    font-family: "Cairo", sans-serif;
    width: 70%;
}

.error-404 .search-form .search-submit,
.error-404 input[type="submit"],
.error-404 button[type="submit"] {
    background-color: #07355C;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    height: 45px;
}

/* RTL support for search form */
[dir="rtl"] .error-404 .search-form .search-field,
[dir="rtl"] .error-404 input[type="search"] {
    border-right: 1px solid #ddd;
    border-left: none;
    border-radius: 0 5px 5px 0;
}

[dir="rtl"] .error-404 .search-form .search-submit,
[dir="rtl"] .error-404 input[type="submit"],
[dir="rtl"] .error-404 button[type="submit"] {
    border-radius: 5px 0 0 5px;
}

/* Adjust search button hover state */
.error-404 .search-form .search-submit:hover,
.error-404 input[type="submit"]:hover,
.error-404 button[type="submit"]:hover {
    background-color: #05274a;
}

/* Improve search button on mobile */
@media (max-width: 576px) {
    .error-404 .search-form,
    .error-404 form {
        flex-direction: row;
        width: 90%;
    }
    
    .error-404 .search-form .search-field,
    .error-404 input[type="search"] {
        width: 65%;
    }
    
    .error-404 .search-form .search-submit,
    .error-404 input[type="submit"],
    .error-404 button[type="submit"] {
        width: 35%;
        padding: 10px;
    }
}