.fixed-menu,
.sidebar {
    position: fixed;
    
    left: 0;
    background: #FFFFFF;
   
    transition: all .5s;
}
 
.sidebar {
    left: 64px;
    background-color: #6F6AA6;
    overflow-y: auto;
}

.features-sidebar {
    width: 480px;
    height: calc(110vh - (85px + 100px)) !important;
    padding: 20px;
    z-index: 90;
    transition: all 0.5s;
}

.fixed-menu {
    position: fixed;
    left: 0;
    width: 64px;
    background: #0f4a89;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 0 3px 3px 0;
    z-index: 90;
    transition: all 0.5s;
}


 

/*
===============================*/
/* .containerDiv
{
     

} */
.innerstyle,
.innerstyle * {
    font-family: 'Expo Arabic Light' !important;
    line-height: 1.8 !important;
}

.main-heading {
    padding-top: 20px;
}
.innerpage-heading {
    padding-top: 20px;
}



body.layout-en {
    direction: ltr;
    text-align: left;
    /*background-color: red !important; */
}

body.layout-ar {
    direction: rtl;
    text-align: right;
    /*background-color: gold !important;  */
}

.news-item {
    margin: 20px auto;  
    max-width: 100%;  
    padding: 20px;  
    background-color: #f9f9f9; 
    border: 1px solid #ddd;  
    border-radius: 8px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}

.image-container {
    text-align: center;  
    margin-bottom: 20px;  
}

.news-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  */
    /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/

}

.news-title {
    font-size: 1.5rem;  
    font-weight: bold;  
    margin-bottom: 10px;  
    color: #333; 
   
}

.news-description {
    font-size: 1rem; 
    line-height: 1.6; 
    margin-bottom: 15px;  
    color: #555; 
   
}

.news-date {
    font-size: 0.9rem; 
    color: #777;  
    margin-top: 10px;  
   
}

.apptext {
    width: 150px;
    text-align: center;
}

/*======================*/


.popup-container {
    position: fixed !important;
    top: 370px !important;
    left: 50%;  
    transform: translate(-50%, -50%); 
    z-index: 9999 !important;
    width: 80%;
    max-width: 600px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: block !important;
    overflow: hidden;
}

     
    .popup-container.popup-align_en {
        left: calc(50% + 27%);  
        transform: translateX(-50%) translateY(-50%);  
    }

    .popup-container.popup-align_ar {
        left: calc(50% - 27%);  
        transform: translateX(-50%) translateY(-50%);  
    }

    .popup-container img {
        max-width: 100%;
        height: auto;
    }

.popup-box {
    max-width: 100%;
    overflow-wrap: break-word;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}



.page {
    width: 50%;
    margin: 20px auto;
    position: absolute;
    top: 100px;
    z-index: 999999;  
    text-align: center;
}

     
    .page img {
        max-width: 100%;  
        height: auto;  
        display: block; 
        margin-left: auto;  
        margin-right: auto;  
    }

 
#topbar {
    /*padding: 45px 15px;*/
    
   /* position: relative;
    background-repeat: no-repeat;
    z-index: 999999;*/
   /* border-radius: 10px;
    box-shadow: 2px 2px 40px 2px #888888 inset;*/
}

 
.popup-align-en {
    right: 0;  
    left: auto;  
    transform: none;  
}

 
.popup-align-ar {
    left: 0;  
    right: auto;  
    transform: none;  
}
/* Close button container */
/*.close-btn {
    padding: 0px 5px;
    text-align: @(localizer["lang"] == "ar" ? "left" : "right");
    background-color: #6F6AA6;
    border-radius: 10px;
}

    .close-btn img {
        width: 30px;
        height: auto;
        cursor: pointer;
    }

 
.close-btn-popup {
    position: absolute;
    top: 0;  
    right: 0;  
    cursor: pointer;
    border: 2px solid white;
    padding: 5px;
    text-align: @(localizer["lang"] == "ar" ? "left" : "right");
    background-color: #6F6AA6;
    border-radius: 50%;
    z-index: 1002;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}*/

    /* Close button image size */
    /*.close-btn-popup img {
        width: 30px;
        height: auto;
        cursor: pointer;
    }

 
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

 
.popup-box {
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 95%;  
    max-height: 95%;  
    overflow-y: auto;  
    position: relative;  
    z-index: 1001;
}
 
.insidepopup {
    width: 100%;
}*/


.main-content {
    top: 30px !important;
}

/*===============*/

.fullscreen-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rfStar {
    color: red;
    padding: 3px 5px 0 5px;
}






/*===========================*/
/*.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

    .modal.show {
        display: block;
    }*/



.news-card-background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: overlay;
}


/* Section Title */
.section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #6F6AA6;
    margin-bottom: 1rem;
    text-align: center;
}

/* Grid Layout for News */
.news-grid-all {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* News Card */
.news-card-all {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;



}

    .news-card-all:hover {
        transform: translateY(-5px);
    }

/* Image Container */
.news-image-container-all {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.news-image-all {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.news-card-all:hover .news-image-all {
    transform: scale(1.05);
}

/* News Content */
.news-content-all {
    padding: 15px;
}
.news-title-all {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #6F6AA6 !important;
    text-align: center;
   
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;
    white-space: normal;
}


.news-description-all {
    font-size: 0.9rem;
    color: #6F6AA6 !important;
    line-height: 1.4;
     
    max-height: calc(1.4em * 8);  
    
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8; 
    -webkit-box-orient: vertical;
    
    white-space: normal;
    word-break: break-word;
}


.news-date-all {
    font-size: 0.85rem;
    color: #6F6AA6 !important;
    margin-top: 10px;
}

/* Link Styling */
.news-link-all {
    text-decoration: none;
    color: inherit;
}








.IsActive_en {
    float: left !important;
}

.IsActive_ar {
    float: right !important;
}



.ql-editor {
    background-color: white !important;
    color: black;  
    min-height: 300px; /* Optional: Set a minimum height for the editor */
    padding: 10px; /* Optional: Add some padding inside the editor */
    border: 1px solid #ccc; /* Optional: Add a border for better visibility */
    border-radius: 5px; /* Optional: Rounded corners */
    overflow-y: auto; /* Ensure scrolling for large content */
}


#subPages + .divider {
    height: 1px;
    background-color: #007bff; /* Color for divider */
    margin-top: 5px;
}




/*============================================*/
.quillWrapper {
    line-height: normal;
}

span.ql-formats:first-child > .ql-picker,
span.ql-header.ql-picker {
    border: 1px solid #ddd;
    display: flex;
    height: 100%;
    padding: 2px;
    box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, 0.2);
    background: white;
}

.ql-toolbar.ql-snow {
    border: 1px solid #eee !important;
    background: #f5f5f58c;
    border-radius: 0 0 4px 4px;
}

.ql-container.ql-snow {
    background: #fff;
    width: 100%;
    min-height: 200px;
    border-top: 0 !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}

.ql-stroke {
    stroke: #555d66 !important;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: #555d66 !important;
}

.ql-editor.ql-blank::before {
    color: rgba(0, 0, 0, 0.3) !important;
    font-style: normal !important;
}

.ql-editor {
    min-height: 300px;
    font-size: 15px;
    font-family: Arial;
    line-height: 24px;
}

.ql-container {
    font-size: 15px;
    font-family: Arial;
    line-height: 24px;
}

    .ql-container p {
        margin-bottom: 10px;
    }

.ql-formats button:hover,
.ql-formats .ql-picker:hover {
    background: #abd4ff73 !important;
}

.ql-formats .ql-header.ql-picker:hover,
.ql-formats .ql-font.ql-picker:hover {
    background: white !important;
    border-color: #b4b9be;
}

.ql-picker-label {
    display: flex !important;
}

.ql-align.ql-picker.ql-icon-picker .ql-picker-label {
    display: block !important;
}

.ql-showHtml:after {
    content: "[source]";
}

button.ql-showHtml {
    width: 100% !important;
}

.custom-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    scrollbar-color: #6610f2;
}

  
    .custom-scroll::-webkit-scrollbar {
        width: 5px;  
    }

    .custom-scroll::-webkit-scrollbar-track {
        background: #f9f9f9; 
        border-radius: 8px; 
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background: #888; 
        border-radius: 8px; 
    }

        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: #555;  
        }

.Authmsg {
    height: 200px;
    width: 100%;
    text-align: center;
    padding-top: 50px;
}
 
.social-btn-circle {
    width: 50px;  
    height: 50px; 
    border-radius: 50%;  
    background-color: transparent;  
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
    margin-right: 10px;
}

     
    .social-btn-circle .social-icon {
        width: 30px;  
        height: 30px; 
        object-fit: contain;  
    }

 
.social-title {
    font-size: 14px;
    color: #ffffff;
    margin-top: 5px;
    text-align: center;
}

.contact-input {
    border-radius: 10px !important;
}

.hover-bg1 {
    height: 40px;
    width: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*=================================change dark-theme========================
*/
 



.dark-theme header, .dark-theme .fixed-menu, .dark-theme .fixed-menu .menu-btn, .dark-theme .push-pull,
.dark-theme .nav-btn, .dark-theme .dropdownMenu2, .dark-theme .home-card, .dark-theme .home-card h2, .dark-theme .main-heading, .dark-theme .tab button,
.dark-theme .text, .dark-theme .about-heading, .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5
, .dark-theme h2 a   {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    color: white !important;
    background-color: #121212 !important;
}
.dark-theme .uper-bullits li a, 
.dark-theme .uper-bullits li p, 
.dark-theme .fa-bell,
.dark-theme .fa.fa-bell,
.dark-theme .navigation ul li a,
.dark-theme .fa-plus, 
.dark-theme .fa.fa-plus,
.dark-theme .fa-refresh,
.dark-theme .fa.fa-refresh,
.dark-theme .fa-minus,
.dark-theme .fa.fa-minus
 {
    background-color: #121212 !important;
    color: white !important;
}
.dark-theme .info-box,
.dark-theme .info-box-icon {
    background-color: #121212 !important;
    color: #ffffff !important;
}
/* ============= */
 
.dark-theme .txt p
 {
    background-color: #121212 !important;
    color: #ffffff !important;
}
.dark-theme p
 {
    background-color: #121212 !important;
    color: #ffffff !important;
}

.dark-theme .login-bx
 {
    border: 1px solid #555 !important;
}

.dark-theme .dashed {
    background-color: #555 !important;
}

.dark-theme .dashed:hover {
        background-color: #D0CEE3 !important;
        color: white  !important;
    }

    .dark-theme .dashed.active {
        background-color: #D0CEE3 !important;
        color: white !important;
    }




/* ============= */


 

/* Target all possible combinations */
.dark-theme,
.dark-theme body,
.dark-theme .default_pettern,
.dark-theme .container,
body.dark-theme,
body.dark-theme.default_pettern,
html.dark-theme.default_pettern {
    background: #000000 !important;
    background-image: none !important;
    background-color: #000000 !important;
}

.dark-theme .container,
.dark-theme .box {
    color: white !important;
}
body.dark-theme .fa {
    color: #fff !important; /* make icons white */
}

/* Optional: hover effect for icons */
body.dark-theme .fa:hover {
    color: #ccc !important; /* slightly lighter on hover */
}


body.dark-theme .carousel-item img {
    filter: brightness(0.5) contrast(1.2) !important;
}

/* Global dark theme variables */
body.dark-theme {
    background-color: #121212 !important;
    color: white !important;
}

body.dark-theme {
    /* --bg-color: #121212;   */
    --text-color: #fff;  
    --img-brightness: 0.5; 
    --img-contrast: 1.2; 
    --overlay-bg: rgba(0, 0, 0, 0.7);  
}

/* Dark theme applied to the body */
body.dark-theme {
    background-color: var(--bg-color);
    color: var(--text-color);
}

    /* Apply styles to all divs and elements inside the body */
    body.dark-theme div,
    body.dark-theme header,
    body.dark-theme .carousel-item {
        background-color: var(--bg-color);  
        color: var(--text-color);  
    }

    /* Styling images */
    /* body.dark-theme img {
        filter: brightness(var(--img-brightness)) contrast(var(--img-contrast)) !important;
    } */

    /* Dark overlay for carousel items */
    body.dark-theme .carousel-item {
        position: relative;
    }

        body.dark-theme .carousel-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--overlay-bg);  
            pointer-events: none;  
        }

        /* Additional styling for carousel items */
        body.dark-theme .carousel-item img {
            filter: brightness(var(--img-brightness)) contrast(var(--img-contrast)) !important;
        }

    body.dark-theme .footer {
        /* If you want to change the background image for dark mode, use a separate image for dark theme */
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('assets/images/2 1.png');
        background-size: cover; 
        background-position: center;  
    }

    /* Optional: Apply a darker background color if no background image */
    body.dark-theme .footer {
        background-color: rgba(18, 18, 18, 0.9);  
    }

    body.dark-theme .applications-english {
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('/assets/images/picture (1).png');
        background-size: cover;
        background-position: center;
    }

    body.dark-theme .applications-english {
        background-color: rgba(18, 18, 18, 0.9);
    }


    body.dark-theme .col-lg-12.mt-5.slick-container.pb-lg-5.aos-init {
        background-color: #121212;  
        color: #fff;  
        
        filter: brightness(0.5) contrast(1.2);  
    }

        
        body.dark-theme .col-lg-12.mt-5.slick-container.pb-lg-5.aos-init img {
            filter: brightness(0.5) contrast(1.2) !important;  
        }

    body.dark-theme .left-tab {
        background-image: url(/assets/images/left-tab.svg);
        background-size: cover;
        background-position: center;
    }

    body.dark-theme .right-tab {
        background-image: url(/assets/images/right-tab.svg);
        background-size: cover;
        background-position: center;
    }

.theme-icon.selected {
    border-radius: 50%;
    background-color: #D0CEE3;
}

 /* ======================= */
 body.dark-theme div:not(.ng-select),
 body.dark-theme header,
 body.dark-theme .carousel-item {
     background-color: var(--bg-color);
     color: var(--text-color);
 }
/* Closed ng-select (input box) */
body.dark-theme .ng-select .ng-select-container {
    background-color: #000 !important;
    border: 1px solid #555 !important;
    color: #fff !important;
}

/* Placeholder text */
body.dark-theme .ng-select .ng-placeholder {
    color: #bbbbbb !important;
}

/* Selected value (input) */
body.dark-theme .ng-select .ng-value-container,
body.dark-theme .ng-select .ng-value,
body.dark-theme .ng-select .ng-value span,
body.dark-theme .ng-select .ng-value-label,
body.dark-theme .ng-select .ng-input input {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

/* Arrow */
body.dark-theme .ng-select .ng-arrow {
    border-top-color: #fff !important;
}

/* Opened dropdown panel */
body.dark-theme .ng-dropdown-panel {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    z-index: 9999 !important;
}

/* Dropdown options */
body.dark-theme .ng-dropdown-panel .ng-option {
    background-color: #000 !important;
    color: #fff !important;
}

/* Hover on options */
body.dark-theme .ng-dropdown-panel .ng-option:hover {
    background-color: #222 !important;
}

/* Selected option in dropdown */
body.dark-theme .ng-dropdown-panel .ng-option.ng-option-selected {
    background-color: #333 !important;
    color: #fff !important;
}

/* Multi-select chips */
body.dark-theme .ng-select.ng-select-multiple .ng-value {
    background-color: #333 !important;
    color: #fff !important;
}
/* Table dark theme inside .table-responsive */
body.dark-theme .table-responsive {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #555 !important; /* optional for table container */
    padding: 10px; /* optional spacing */
}

/* Table itself */
body.dark-theme .table-responsive table {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Table header */
body.dark-theme .table-responsive table thead th {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Table body cells */
body.dark-theme .table-responsive table tbody td {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Hover effect (optional) */
body.dark-theme .table-responsive table tbody tr:hover {
    background-color: #222 !important;
}
/* Pagination container */
body.dark-theme .pagination {
    background-color: #000 !important;
    padding: 5px;
    border-radius: 4px;
    
}

/* Pagination items */
body.dark-theme .pagination .page-item {
    background-color: #000 !important;
    margin: 0 2px;
}

/* Pagination links */
body.dark-theme .pagination .page-link {
    color: #fff !important;
    background-color: #000 !important;
    border: 1px solid #555 !important;
}

/* Hover effect for links */
body.dark-theme .pagination .page-link:hover {
    background-color: #222 !important;
    color: #fff !important;
}

/* Active page */
body.dark-theme .pagination .page-item.active .page-link {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Disabled links */
body.dark-theme .pagination .page-item.disabled .page-link {
    background-color: #000 !important;
    color: #777 !important;
    border-color: #555 !important;
}
/* =========input======= */
 /* Dark mode for text inputs */
/* Normal form controls: input, textarea, select — dark mode */
body.dark-theme .form-control,
body.dark-theme textarea,
body.dark-theme select {
    background-color: #000 !important; /* black background */
    color: #fff !important;            /* white text */
    border: 1px solid #555 !important; /* visible border */
}

/* Placeholder text for normal inputs */
body.dark-theme .form-control::placeholder,
body.dark-theme textarea::placeholder,
body.dark-theme select::placeholder {
    color: #bbb !important;
    opacity: 1 !important;
}

/* Focus effect */
body.dark-theme .form-control:focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #888 !important;
    box-shadow: none !important;
}


/* Dark mode for fieldsets */
body.dark-theme fieldset {
    background-color: #000 !important; /* black background */
    color: #fff !important;            /* white text */
    border: 1px solid #555 !important; /* visible border */
    padding: 10px;                     /* optional padding */
    border-radius: 4px;                /* optional rounded corners */
}

/* Legend text */
body.dark-theme fieldset legend {
    color: #fff !important;            /* white legend text */
}
 /* Dark mode for unordered lists */
body.dark-theme ul {
    color: #fff !important;        /* text inside ul white */
       
}

/* List items */
body.dark-theme ul li {
    color: #fff !important;        /* text inside li white */
}

/* Optional: nested lists */
body.dark-theme ul li ul,
body.dark-theme ul li ol {
    color: #fff !important;
}
/* Dark mode for links inside info-box */
body.dark-theme .info-box span a {
    color: #fff !important;       
    text-decoration: none;          
}

/* Optional: hover effect */
body.dark-theme .info-box span a:hover {
    color: #ccc !important;       /* lighter white on hover */
    text-decoration: underline;   /* optional: underline on hover */
}
/* Dark mode: override .bg-blue */
body.dark-theme .bg-blue[_ngcontent-ng-c961730181] {
    background-color: #000 !important; /* black background */
    color: #fff !important;     
    padding-bottom: 55px;
}
.info-box
{
padding-bottom: 59px;
}

body.dark-theme .sidebar
{
    background-color:#181818 !important;
}


/* =============================== */


/*============  Font Type  ===========*/


/*body.alternate-font * {
    font-family: 'Courier New', monospace !important;
}*/
/* Dashed Container */
.feature-box {
 
    
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center;  
    padding: 20px;
    border: 1px solid #ddd;  
    border-radius: 5px; 
}
.fi-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  
    flex-grow: 1;
}


.dashed-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0px;
}

 
.dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 7px;
    background-color: #6F6AA6;
    border-radius: 20%;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
/*.ft{
    background-color:green;
}*/
    
    .dashed:hover {
        background-color: #D0CEE3;
        color: white;
    }

    .dashed.active {
        background-color: #D0CEE3;
        color: white;
        font-weight: bold;
    }
     
 
    body.font-1 *:not(.ic-22):not(.ic-16):not(.ic-20):not(.ic-28):not(.ic-bg):not(.ic-bg *):not(.service-box):not(.sicon):not(.ic-14):not(.fa):not(.fas):not(.far):not(.fab):not(.icon-ICON-SJC_Icon-7):not(.icon-ICON-SJC_Icon-7 *):not(.icon-ICON-SJC_Icon-4):not(.icon-ICON-SJC_Icon-4 *):not(.icon-ICON-SJC_Icon-2):not(.icon-ICON-SJC_Icon-2 *):not(.icon-ICON-SJC_Icon-3):not(.icon-ICON-SJC_Icon-3 *):not(.icon-ICON-SJC_Icon-6):not(.icon-ICON-SJC_Icon-6 *):not(.icon-ICON-SJC_Icom-5):not(.icon-ICON-SJC_Icom-5 *):not(.icon-ICON-SJC_Icon-1):not(.icon-ICON-SJC_Icon-1 *)
    {
        font-family: 'Courier New', monospace !important;
    }
    body.font-2 *:not(.ic-22):not(.ic-16):not(.ic-20):not(.ic-28):not(.ic-bg):not(.ic-bg *):not(.service-box):not(.sicon):not(.ic-14):not(.fa):not(.fas):not(.far):not(.fab):not(.icon-ICON-SJC_Icon-7):not(.icon-ICON-SJC_Icon-7 *):not(.icon-ICON-SJC_Icon-4):not(.icon-ICON-SJC_Icon-4 *):not(.icon-ICON-SJC_Icon-2):not(.icon-ICON-SJC_Icon-2 *):not(.icon-ICON-SJC_Icon-3):not(.icon-ICON-SJC_Icon-3 *):not(.icon-ICON-SJC_Icon-6):not(.icon-ICON-SJC_Icon-6 *):not(.icon-ICON-SJC_Icom-5):not(.icon-ICON-SJC_Icom-5 *):not(.icon-ICON-SJC_Icon-1):not(.icon-ICON-SJC_Icon-1 *)
    {
    font-family: 'Arial',   sans-serif !important;
}

body.font-3 *:not(.ic-22):not(.ic-16):not(.ic-20):not(.ic-28):not(.ic-bg):not(.ic-bg *):not(.service-box):not(.sicon):not(.ic-14):not(.fa):not(.fas):not(.far):not(.fab):not(.icon-ICON-SJC_Icon-7):not(.icon-ICON-SJC_Icon-7 *):not(.icon-ICON-SJC_Icon-4):not(.icon-ICON-SJC_Icon-4 *):not(.icon-ICON-SJC_Icon-2):not(.icon-ICON-SJC_Icon-2 *):not(.icon-ICON-SJC_Icon-3):not(.icon-ICON-SJC_Icon-3 *):not(.icon-ICON-SJC_Icon-6):not(.icon-ICON-SJC_Icon-6 *):not(.icon-ICON-SJC_Icom-5):not(.icon-ICON-SJC_Icom-5 *):not(.icon-ICON-SJC_Icon-1):not(.icon-ICON-SJC_Icon-1 *)
{
    font-family: 'Times New Roman',   serif !important;
}

body.font-4 *:not(.ic-22):not(.ic-16):not(.ic-20):not(.ic-28):not(.ic-bg):not(.ic-bg *):not(.service-box):not(.sicon):not(.ic-14):not(.fa):not(.fas):not(.far):not(.fab):not(.icon-ICON-SJC_Icon-7):not(.icon-ICON-SJC_Icon-7 *):not(.icon-ICON-SJC_Icon-4):not(.icon-ICON-SJC_Icon-4 *):not(.icon-ICON-SJC_Icon-2):not(.icon-ICON-SJC_Icon-2 *):not(.icon-ICON-SJC_Icon-3):not(.icon-ICON-SJC_Icon-3 *):not(.icon-ICON-SJC_Icon-6):not(.icon-ICON-SJC_Icon-6 *):not(.icon-ICON-SJC_Icom-5):not(.icon-ICON-SJC_Icom-5 *):not(.icon-ICON-SJC_Icon-1):not(.icon-ICON-SJC_Icon-1 *)
{
    font-family: Algerian !important;
}






/*============  Font Size  ===========*/

/*body.larger-font * {
    font-size: 16px !important;
}*/
/* Different font sizes for dots */
.dashed:nth-child(1) {
    font-size: 10px;
}

.dashed:nth-child(2) {
    font-size: 12px;
}

.dashed:nth-child(3) {
    font-size: 14px;
}

.dashed:nth-child(4) {
    font-size: 16px;
}


/* Default font size classes */
body.font-size-1 * {
    font-size: 16px !important;
}

body.font-size-2 * {
    font-size: 17px !important;
}

body.font-size-3 * {
    font-size: 18px !important;
}

body.font-size-4 * {
    font-size: 19px !important;
}

/* Responsive font size adjustments */
@media (max-width: 576px) { /* Mobile screens */
    body.font-size-1 * {
        font-size: 14px !important;
    }

    body.font-size-2 * {
        font-size: 15px !important;
    }

    body.font-size-3 * {
        font-size: 16px !important;
    }

    body.font-size-4 * {
        font-size: 17px !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) { /* Tablets */
    body.font-size-1 * {
        font-size: 15px !important;
    }

    body.font-size-2 * {
        font-size: 16px !important;
    }

    body.font-size-3 * {
        font-size: 17px !important;
    }

    body.font-size-4 * {
        font-size: 18px !important;
    }
}

@media (min-width: 992px) { /* Laptops and larger screens */
    body.font-size-1 * {
        font-size: 16px !important;
    }

    body.font-size-2 * {
        font-size: 17px !important;
    }

    body.font-size-3 * {
        font-size: 18px !important;
    }

    body.font-size-4 * {
        font-size: 19px !important;
    }
}

@media (min-width: 1200px) { /* Extra large screens */
    body.font-size-1 * {
        font-size: 18px !important;
    }

    body.font-size-2 * {
        font-size: 20px !important;
    }

    body.font-size-3 * {
        font-size: 21px !important;
    }

    body.font-size-4 * {
        font-size: 22px !important;
    }
}







/*==================Letter Spacing=========*/

/*body.wider-spacing * {
    letter-spacing: 2px !important;
}
*/
/* Letter Spacing Classes */
body.spacing-1 * {
    letter-spacing: 1px !important;
}

body.spacing-2 * {
    letter-spacing: 2px !important;
}

body.spacing-3 * {
    letter-spacing: 3px !important;
}

body.spacing-4 * {
    letter-spacing: 3.5px !important;
}

html.lang-ar body.spacing-1 { word-spacing: 2px; }
html.lang-ar body.spacing-2 { word-spacing: 4px; }
html.lang-ar body.spacing-3 { word-spacing: 6px; }
html.lang-ar body.spacing-4 { word-spacing: 8px; }

/*================================*/


/* ================line space ===================*/
 
body.wider-line-spacing {
    line-height: 1.8;  
}

    
    body.wider-line-spacing p,
    body.wider-line-spacing h1,
    body.wider-line-spacing h2,
    body.wider-line-spacing h3,
    body.wider-line-spacing h4,
    body.wider-line-spacing h5,
    body.wider-line-spacing h6 {
        line-height: 1.8;  
    }

body.line-spacing-1 * {
    line-height: 1.9 !important;
}

body.line-spacing-2 * {
    line-height: 2.0 !important;
}

body.line-spacing-3 * {
    line-height: 2.1 !important;
}

body.line-spacing-4 * {
    line-height: 2.2 !important;
}

/* ================== High-Contrast Modes ================ */
 /* Contrast levels (affects all elements globally) */
 /* ================= Contrast Level 1 (Soft/Easy on Eyes) ================= */
body.contrast-1 {
    filter: contrast(0.85) brightness(1.05);
}

body.contrast-1 *,
body.contrast-1 *::before,
body.contrast-1 *::after {
    filter: contrast(0.85) brightness(1.05);
}

body.contrast-1 img,
body.contrast-1 video,
body.contrast-1 canvas,
body.contrast-1 svg,
body.contrast-1 i,
body.contrast-1 .icon,
body.contrast-1 [class*="fa-"],
body.contrast-1 [class*="icon-"] {
    filter: contrast(0.85) brightness(1.05);
    opacity: 0.95;
}

/* Background images */
body.contrast-1 [style*="background-image"],
body.contrast-1 .bg-image,
body.contrast-1 .banner,
body.contrast-1 .hero,
body.contrast-1 [class*="bg-"] {
    filter: contrast(0.85) brightness(1.05);
}

body.contrast-1 * {
    font-weight: 400;
}

body.contrast-1 button,
body.contrast-1 input,
body.contrast-1 select,
body.contrast-1 .card {
    border-width: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ================= Contrast Level 2 (Normal/Balanced) ================= */
body.contrast-2 {
    filter: contrast(1.4) brightness(0.98) saturate(1.1);
}

body.contrast-2 *,
body.contrast-2 *::before,
body.contrast-2 *::after {
    filter: contrast(1.4) brightness(0.98) saturate(1.1);
}

body.contrast-2 img,
body.contrast-2 video,
body.contrast-2 canvas,
body.contrast-2 svg,
body.contrast-2 i,
body.contrast-2 .icon,
body.contrast-2 [class*="fa-"],
body.contrast-2 [class*="icon-"] {
    filter: contrast(1.4) saturate(1.2) brightness(0.95);
    border: 2px solid rgba(0, 0, 0, 0.15);
}

/* Background images with contrast */
body.contrast-2 [style*="background-image"],
body.contrast-2 .bg-image,
body.contrast-2 .banner,
body.contrast-2 .hero,
body.contrast-2 [class*="bg-"] {
    filter: contrast(1.4) brightness(0.95) saturate(1.2);
}

/* Icons specific styling */
body.contrast-2 svg path,
body.contrast-2 svg circle,
body.contrast-2 svg rect {
    stroke-width: 2;
}

body.contrast-2 * {
    text-shadow: 0 0 0.3px currentColor;
    font-weight: 500;
}

body.contrast-2 button,
body.contrast-2 input,
body.contrast-2 select,
body.contrast-2 textarea,
body.contrast-2 .card {
    border-width: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

body.contrast-2 h1, 
body.contrast-2 h2, 
body.contrast-2 h3 {
    font-weight: 600;
}

/* ================= Contrast Level 3 (Strong/Enhanced) ================= */
body.contrast-3 {
    filter: contrast(1.8) brightness(0.90) saturate(1.3);
}

body.contrast-3 *,
body.contrast-3 *::before,
body.contrast-3 *::after {
    filter: contrast(1.8) brightness(0.90) saturate(1.3);
}

body.contrast-3 img,
body.contrast-3 video,
body.contrast-3 canvas,
body.contrast-3 svg,
body.contrast-3 i,
body.contrast-3 .icon,
body.contrast-3 [class*="fa-"],
body.contrast-3 [class*="icon-"] {
    filter: contrast(1.8) saturate(1.4) brightness(0.88);
    border: 3px solid rgba(0, 0, 0, 0.35);
}

/* Background images with strong contrast */
body.contrast-3 [style*="background-image"],
body.contrast-3 .bg-image,
body.contrast-3 .banner,
body.contrast-3 .hero,
body.contrast-3 [class*="bg-"] {
    filter: contrast(1.8) brightness(0.88) saturate(1.4);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
}

/* Icons thicker strokes */
body.contrast-3 svg path,
body.contrast-3 svg circle,
body.contrast-3 svg rect,
body.contrast-3 svg line {
    stroke-width: 3;
}

body.contrast-3 i,
body.contrast-3 .icon {
    text-shadow: 0 0 2px currentColor;
    font-weight: 900;
}

body.contrast-3 * {
    text-shadow: 0 0 0.8px currentColor, 0 1px 1px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    letter-spacing: 0.3px;
}

body.contrast-3 button,
body.contrast-3 input,
body.contrast-3 select,
body.contrast-3 textarea,
body.contrast-3 .card,
body.contrast-3 .modal {
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

body.contrast-3 h1, 
body.contrast-3 h2, 
body.contrast-3 h3, 
body.contrast-3 h4 {
    font-weight: 700;
    letter-spacing: 0.5px;
}

body.contrast-3 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ================= Contrast Level 4 (Very Strong/Bold) ================= */
body.contrast-4 {
    filter: contrast(2.5) brightness(0.80) saturate(1.5);
}

body.contrast-4 *,
body.contrast-4 *::before,
body.contrast-4 *::after {
    filter: contrast(2.5) brightness(0.80) saturate(1.5);
}

body.contrast-4 img,
body.contrast-4 video,
body.contrast-4 canvas,
body.contrast-4 svg,
body.contrast-4 i,
body.contrast-4 .icon,
body.contrast-4 [class*="fa-"],
body.contrast-4 [class*="icon-"] {
    filter: contrast(2.5) saturate(1.6) brightness(0.80);
    border: 5px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Background images with very strong contrast */
body.contrast-4 [style*="background-image"],
body.contrast-4 .bg-image,
body.contrast-4 .banner,
body.contrast-4 .hero,
body.contrast-4 [class*="bg-"] {
    filter: contrast(2.5) brightness(0.78) saturate(1.6);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

/* Icons extra thick */
body.contrast-4 svg path,
body.contrast-4 svg circle,
body.contrast-4 svg rect,
body.contrast-4 svg line,
body.contrast-4 svg polygon {
    stroke-width: 5;
}

body.contrast-4 i,
body.contrast-4 .icon {
    text-shadow: 0 0 3px currentColor, 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 900;
    transform: scale(1.1);
}

body.contrast-4 * {
    text-shadow: 0 0 1.5px currentColor, 0 2px 3px rgba(0, 0, 0, 0.4);
    font-weight: 700;
    letter-spacing: 0.5px;
}

body.contrast-4 button,
body.contrast-4 input,
body.contrast-4 select,
body.contrast-4 textarea,
body.contrast-4 .card,
body.contrast-4 .modal,
body.contrast-4 .dropdown-menu {
    border-width: 5px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

body.contrast-4 h1, 
body.contrast-4 h2, 
body.contrast-4 h3, 
body.contrast-4 h4, 
body.contrast-4 h5, 
body.contrast-4 h6 {
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.contrast-4 a {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    font-weight: 800;
}

body.contrast-4 p,
body.contrast-4 span,
body.contrast-4 div {
    line-height: 1.8;
}

/* ================= High-Contrast Mode (Black & White Maximum) ================= */
body.high-contrast {
    filter: grayscale(1) contrast(4) brightness(1.2) !important;
    background-color: #ffffff !important;
}

body.high-contrast *,
body.high-contrast *::before,
body.high-contrast *::after {
    filter: grayscale(1) contrast(4) brightness(1.2);
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
}

body.high-contrast img,
body.high-contrast video,
body.high-contrast canvas {
    filter: grayscale(1) contrast(4) brightness(0.9) invert(0) !important;
    border: 8px solid #000000 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
    outline: 3px solid #000000 !important;
    outline-offset: 5px;
}

/* Background images in high contrast */
body.high-contrast [style*="background-image"],
body.high-contrast .bg-image,
body.high-contrast .banner,
body.high-contrast .hero {
    filter: grayscale(1) contrast(4) brightness(0.8) !important;
    border: 8px solid #000000 !important;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.7) !important;
}

/* All background colors to white in high contrast */
body.high-contrast [class*="bg-"],
body.high-contrast .bg-primary,
body.high-contrast .bg-secondary,
body.high-contrast .bg-light,
body.high-contrast .bg-dark,
body.high-contrast .bg-info,
body.high-contrast .bg-warning,
body.high-contrast .bg-danger,
body.high-contrast .bg-success {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* SVG and Icons in high contrast */
body.high-contrast svg,
body.high-contrast i,
body.high-contrast .icon,
body.high-contrast [class*="fa-"],
body.high-contrast [class*="icon-"] {
    filter: grayscale(1) contrast(4) brightness(0) !important;
    color: #000000 !important;
}

body.high-contrast svg path,
body.high-contrast svg circle,
body.high-contrast svg rect,
body.high-contrast svg line,
body.high-contrast svg polygon {
    fill: #000000 !important;
    stroke: #000000 !important;
    stroke-width: 8 !important;
}

body.high-contrast i,
body.high-contrast .icon {
    text-shadow: 0 0 5px #000000 !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 2px #000000;
    transform: scale(1.2);
}

body.high-contrast button,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 6px solid #000000 !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 0, 0, 0.1) !important;
    font-size: 110% !important;
}

body.high-contrast button:hover,
body.high-contrast button:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 1) !important;
    transform: scale(1.05);
}

body.high-contrast .card,
body.high-contrast .modal-content,
body.high-contrast .dropdown-menu,
body.high-contrast header,
body.high-contrast footer,
body.high-contrast nav,
body.high-contrast aside,
body.high-contrast section {
    background-color: #ffffff !important;
    border: 8px solid #000000 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
}

body.high-contrast a {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 4px !important;
    text-underline-offset: 6px;
    font-weight: 900 !important;
    background-color: #ffff00 !important;
    padding: 2px 6px;
    border: 3px solid #000000;
}

body.high-contrast a:hover,
body.high-contrast a:focus {
    background-color: #000000 !important;
    color: #ffff00 !important;
    text-shadow: 0 0 10px #ffff00 !important;
    box-shadow: 0 0 20px #ffff00 !important;
}

body.high-contrast *:focus {
    outline: 8px solid #ff0000 !important;
    outline-offset: 6px;
    box-shadow: 0 0 30px #ff0000 !important;
    z-index: 9999;
}

body.high-contrast h1, 
body.high-contrast h2, 
body.high-contrast h3 {
    border-bottom: 5px solid #000000;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

body.high-contrast table,
body.high-contrast tr,
body.high-contrast td,
body.high-contrast th {
    border: 4px solid #000000 !important;
}

/* Logo images */
body.high-contrast .logo,
body.high-contrast [class*="logo"] {
    filter: grayscale(1) contrast(5) brightness(0) !important;
    border: 5px solid #000000 !important;
}

/* Pseudo elements for icons */
body.high-contrast *::before,
body.high-contrast *::after {
    color: #000000 !important;
    border-color: #000000 !important;
}

 


 /* =============end contrast============== */

/*Hide Image*/





/*.hidden-images img {
    display: none !important;
}

.hidden-images * {
    background-image: none !important;
}*/






/*reading-mask*/
.innerstyle.reading-mask-enabled {
    background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
    color: white;
    padding: 20px;
    /* Add padding or space to ensure readability */
}

    /* Highlight text areas */
    .innerstyle.reading-mask-enabled p,
    .innerstyle.reading-mask-enabled div,
    .innerstyle.reading-mask-enabled h1,
    .innerstyle.reading-mask-enabled h2,
    .innerstyle.reading-mask-enabled h3,
    .innerstyle.reading-mask-enabled h4,
    .innerstyle.reading-mask-enabled span,
    .innerstyle.reading-mask-enabled a {
        background-color: rgba(255, 255, 255, 0.8); /* Light background behind text */
        color: black; /* Ensure text is readable */
        padding: 4px 6px;
        border-radius: 5px; 
        display: inline-block;
        /*z-index: 10000;*/  
    }

    /* Exclude interactive elements like buttons or links */
    .innerstyle.reading-mask-enabled .switch,
    .innerstyle.reading-mask-enabled input,
    .innerstyle.reading-mask-enabled button {
        pointer-events: auto;
        /*z-index: 10001;*/
    }






/*===========================Service Slider=================*/


@media (max-width: 992px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }

        .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(16.6%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-16.6%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}




/*.pop-serv-card life-event {
    height: 375px;
}

.divhfix {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    height: 265px;
}*/
.divhfix {
    height: 210px;
}

.owl-carousel .home-card img {
    width: 102px !important;
    height: 102px !important;
}

.gallery-img {
    max-width: 100%;
    height: 280px !important;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.gallery-img-Modal {
    width: 100%;  
    max-width: 800px;  
    height: 450px;  
    object-fit: cover;  
    border-radius: 8px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
    margin: 0 auto;  
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hint {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.btnspace {
    margin: 0 10px 0 10px;
}

.vh-50 {
    min-height: 50vh !important;
}

.vh-60 {
    min-height: 60vh !important;
}

.vh-70 {
    min-height: 70vh !important;
}



/*===========================Videos Gallery=================*/
/*.video-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
}

    .video-card:hover {
        transform: scale(1.05);
    }

.video-thumbnail {
    position: relative;
}

    .video-thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 10px;
}

.video-title {
    padding: 10px;
    text-align: center;
}*/

/* Full container row */
.row {
    display: flex;
    align-items: flex-start;
}

/* Video player container */
.video-player-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 480px;
    background: black;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.video-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Video list styling */

.video-list-container {
    max-height: 600px; /* Ensure it doesn't overflow */
    overflow-y: auto;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


    .video-list-container::-webkit-scrollbar {
        width: 5px;
    }

    .video-list-container::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .video-list-container::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }




.video-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    transition: background 0.2s ease-in-out;
}

    .video-item:hover {
        background: #e0e0e0;
    }

.video-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-right: 10px;
}

.video-title {
    font-size: 14px;
    font-weight: bold;
    color: #6F6AA6;
     
}
.active-month {
    background: #3498db;
    border-radius: 999px;
    padding: 10px 30px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    /*display: flex;*/
    align-items: center;
    text-align: center;
    border: none;
    color: white;
    border: 2px solid transparent;
    font-family: 'Expo Arabic Bold';
}


/*==================Images Galley==================*/

#imageGalleryContainer {
    height: 600px; 
    overflow-y: auto;  
    overflow-x: hidden; 
    scroll-behavior: smooth; 
    border: 1px solid #ddd; 
    padding: 10px; 
}


    #imageGalleryContainer::-webkit-scrollbar {
        width: 5px; /* Scrollbar width */
    }

    #imageGalleryContainer::-webkit-scrollbar-track {
        background: #f9f9f9;  
        border-radius: 8px;  
    }

    #imageGalleryContainer::-webkit-scrollbar-thumb {
        background: #888;  
        border-radius: 8px; 
    }

        #imageGalleryContainer::-webkit-scrollbar-thumb:hover {
            background: #555;  
        }



.gallery-row {
    margin-bottom: 20px; /* Space between rows */
}
.row-space{
    padding-bottom:15px;
}


/* Month card styles */
.month-card {
    margin-bottom: 20px; /* Space between items */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Button style for months */
.btn-month {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    width: 100%;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-month:hover {
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Active month button style */
.btn-month.active {
    background-color: #007bff;
    color: white;
    border: none;
}

/* Month name text style */
.month-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Owl carousel styles */
.pop-serv2-carousel .item {
    padding: 0 10px; /* Padding between items */
}

/* Owl carousel responsive breakpoints */
@media (max-width: 576px) {
    .btn-month {
        padding: 10px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .btn-month {
        padding: 15px;
    }
}

@media (min-width: 768px) {
    .btn-month {
        padding: 20px;
    }
}



/*============our application================*/
.fixed-card {
    width: 200px; /* Set a fixed width */
    height: 250px; /* Set a fixed height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.fixed-image {
    width: 96px; /* Fixed width */
    height: 128px; /* Fixed height */
    object-fit: contain; /* Ensures the whole image is visible */
}

.apptext {
    max-width: 100%;
    text-align: center;
    /*white-space: nowrap;*/
    /*overflow: hidden;
    text-overflow: ellipsis;*/
}



.search-container {
    position: relative;
    width: 250px;
}

.search-input {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search img {
    cursor: pointer;
    margin-left: -25px;
    vertical-align: middle;
}


/*===================Search Bar===============*/

/* .search-page {
 
    
} */

.search-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #6F6AA6;
}

.search-box {
    display: flex;
    width: 50%;
    max-width: 600px;
    gap: 10px;
}

.search-input {
    flex-grow: 1;
    padding: 10px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.search-btn, .clear-btn {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 18px;
}

.search-results {
    width: 100%;
    
    list-style: none;
    padding: 0;
    margin-top: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

    .search-results li {
        padding: 12px;
        cursor: pointer;
        transition: background 0.3s;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        color: #6F6AA6;
    }

        .search-results li i {
            margin-right: 10px;
            color: #007bff;
        }

        .search-results li:hover {
            background: #D0CEE3;
            color: white;
        }

.no-results {
    margin-top: 15px;
    font-size: 18px;
    color: #6F6AA6;
}





.main-container {
    padding-top: 0px;
    background-color: antiquewhite;
    height: 250vh;
    /*background-image: url('assets/images/homepage_en.png');*/
    
    background-repeat: no-repeat;
    width: 85%;
}

.section {
    padding: 20px;
    margin: 0px 0;
    text-align: center;
    color: black;
    font-weight: bold;
    border-radius: 5px;
    opacity: 0.9;  

}

/* .section-1 {
       

}
.section-2 {
     
}
.section-3 {
     
} */
.section-4 {
   
    height: 50vh;
    margin-bottom: 17px;
}
.section-5 {
     
    height: 20vh;
    margin-bottom: 80px;
}
.section-6 {
    
    height: 55vh;
    margin-bottom: 42px;
}
.section-7 {
    
    height: 73vh;
    margin-bottom: 18px;
}
.section-8 {
     
    height: 25vh;
}
/* .spanediticon
{
     
} */
.lbl {
    font-size: 16px;
    color: #6F6AA6;
    font-family: 'Expo Arabic light';
    font-weight: 300;
}



/*.chat-container {
    width: 350px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.chat-header {
    font-weight: bold;
    padding: 10px;
    background-color: #6F6AA6;
    color: white;
    text-align: center;
    border-radius: 5px 5px 0 0;
}

.chat-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.chat-message {
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
}

.user-message {
    background-color: #007bff;
    color: white;
    text-align: right;
}

.bot-message {
    background-color: #f1f1f1;
    color: black;
    text-align: left;
}*/

.chat-footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
}

    .chat-footer input {
        flex: 1;
        padding: 5px;
 border-radius:10px;
        }

    .chat-footer button {
        background-color: #6F6AA6;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
    }


/*=====================Gallery=====================*/
.gallery-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    height: 100%;
    min-height: 404.6px;
}

.gallery-img {
    width: 100%;
    height: 220px; /* Fixed height for uniformity */
    object-fit: cover;
    border-radius: 8px;
}

.gallery-img-modal {
    width: 100%;
    max-height: 400px; /* Ensure uniform height in modal */
    object-fit: contain; /* Show full image properly */
    border-radius: 8px;
}

.text-container {
    width: 100%;
    padding: 10px 0;
    color: #6F6AA6;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* .custom-shadow {
    
} */
.pubdiv
{
    padding:15px !important;
}
.pindiv
{
    padding-top:15px;
}
.pin-button-modern {
    color: #6F6AA6;
    border: 2px solid #6F6AA6;
    background-color: transparent;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pin-button-modern:hover {
        background-color: #9B98C9; /* Lighter shade of #6F6AA6 */
        color: white;
        border-color: #9B98C9;
    }






.month-row {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.month-col {
    flex: 1 1 30%;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (max-width: 767px) {
    .month-col {
        flex: 1 1 100%;
        margin: 10px 0;
    }
}


.main-btn-2 {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    text-align: center;
}
.main-btn-2 {
    background: #dc3545;
    border-radius: 999px;
    padding: 10px 30px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    /*display: flex;*/
    align-items: center;
    text-align: center;
    border: none;
    color: white;
    border: 2px solid transparent;
    font-family: 'Expo Arabic Bold' !important;
}

    .main-btn-2:hover {
        box-shadow: rgba(190, 185, 185, 0.685) 0px 2px 8px 0px;
        background-color: #D0CEE3;
        color: #6F6AA6;
        border: 2px solid #6F6AA6;
    }

.main-btn-nrl {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    text-align: center;
}

.main-btn-nrl {
    background: #6F6AA6;
    border-radius: 10px;
    padding: 5px 18px;
    font-style: normal;
    font-size: 12px;
    /*display: flex;*/
    align-items: center;
    text-align: center;
    border: none;
    color: white;
    border: 2px solid transparent;
    font-family: 'Expo Arabic' !important;
}

    .main-btn-nrl:hover {
        box-shadow: rgba(190, 185, 185, 0.685) 0px 2px 8px 0px;
        background-color: #D0CEE3;
        color: #6F6AA6;
        border: 2px solid #6F6AA6;
    }


.active-month {
    box-shadow: rgba(190, 185, 185, 0.685) 0px 2px 8px 0px;
    background-color: #dc3545;
    color: #6F6AA6;
    border: 2px solid #6F6AA6;
}



/*.left-tab {
    background-image: url("/assets/images/left-tab-active.svg") !important;
}
.right-tab {
    background-image: url("/assets/images/left-tab-active.svg") !important;
}*/

/* p {
    
    font-family: 'Expo Arabic Book' !important;
} */


.publication-img {
    width: 240px;
    height: 300px;
    /*object-fit: cover;*/
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom:10px;
}

.card-body-pub {
    text-align: center;
}

.tablinks.active.left-tab {
    background: url('../assets/images/left-tab-active.svg') no-repeat center center;
    background-size: cover;
    color: white;
}

.tablinks.active.right-tab {
    background: url('../assets/images/right-tab-active.svg') no-repeat center center;
    background-size: cover;
    color: white;
}


.newsMulti-image {
    height: 200px;
    width: 300px;
    border: 3px solid white;
}
/* .newsdetailsimages
{
   
} */
/* .gallery-newdetail {
} */
.gmap_iframe11 {
    width: 100%; /* Ensures full container width */
    max-width: 1200px; /* Adjust this value as needed */
    height: 400px; /* Keep or modify height */
    border: none; /* Removes iframe border */
}


/*=======================================*/
/* Default Styles for Larger Screens */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-box {
    /*background: white;*/
    padding: 20px;
    border-radius: 10px;
    /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);*/
    max-width: 95%;
    max-height: 90vh;  
    /*overflow: hidden;*/
    position: relative;
    z-index: 1001;
    /*overflow-y: auto;*/
}
 

.insidepopup {
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Close button styles */
.close-btn-popup {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    border: 2px solid white;
    padding: 5px;
    text-align: right;
    background-color: #6F6AA6;
    border-radius: 50%;
    z-index: 1002;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

    .close-btn-popup img {
        width: 30px;
        height: auto;
        cursor: pointer;
    }

/* Adjustments for Small Screens (Tablets and below) */
@media (max-width: 768px) {
    .popup-box {
        max-width: 90%;
        padding: 15px;
    }

    .popup-overlay {
        background: rgba(0, 0, 0, 0.7); /* Darker background for smaller screens */
    }

    .close-btn-popup {
        top: 5px;
        right: 5px;
    }

        .close-btn-popup img {
            width: 25px; /* Smaller image for small screens */
        }

    .insidepopup {
        font-size: 14px; /* Adjust font size for better readability */
        max-height: calc(100vh - 50px); /* Adjust max height to prevent overflow */
    }
}

/* Adjustments for Very Small Screens (Phones and below) */
@media (max-width: 480px) {
    .popup-box {
        max-width: 80%;
        padding: 10px;
    }

    .popup-overlay {
        background: rgba(0, 0, 0, 0.8); /* Even darker background for phones */
    }

    .close-btn-popup {
        top: -1px;
        right: 0px;
    }

        .close-btn-popup img {
            width: 20px; /* Smaller image for very small screens */
        }

    .insidepopup {
        font-size: 12px; /* Adjust font size further for small screen */
        max-height: calc(100vh - 60px); /* Further reduce max height for very small screens */
    }
}
/* Ensuring the image fits within the popup */
.popup-box img {
    max-width: 100%;
    height: auto;
    max-height: 80vh; /* Limits image height to 80% of the viewport height */
    object-fit: contain;
    border-radius:10px;
}


/* Ensure popup content is well-contained */
.insidepopup {
    width: 100%;
    max-height: calc(100vh - 40px); /* Adjusts height to prevent overflow */
    overflow-y: auto;
    padding-bottom: 20px; /* Adds some space at the bottom to avoid content touching the footer */
}

/*
===========================*/
 


.consultation-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    border-left: 6px solid #2E3192;
    position: relative;
    overflow: hidden;
}

    .consultation-card:hover {
        transform: translateY(-5px);
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
    }


.status {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
}

.open {
    color: #27ae60;
    background: rgba(39, 174, 96, 0.1);
}

.closed {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}


.consultation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
}


.consultation-card h2 {
    font-size: 2rem;
    color: #2E3192;
    font-weight: bold;
    margin: 10px 0;
}


.consultation-card p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}


.btn-start {
    display: inline-block;
    padding: 10px 15px;
    background: #6F6AA6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s ease;
}

    .btn-start:hover {
        background: #D0CEE3;
        color: #6F6AA6;
    }

/*    ===================================*/

.news-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    
}

.news-card22 {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #fff;
}

.news-content {
     
    color: #fff;
}

.image-container-home {
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  
    margin-bottom: 1rem;
}

.news-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;  
}

.HnewsTitle {
    font-family: 'Expo Arabic Light',sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: white;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 54px;
    margin-top: -15px !important;
}



/*====================Image croop=========*/

.image-frame {
    width: 400px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border: 2px solid #ccc;
}


/*#imageAdjustmentModal * {
    direction: ltr !important;
    text-align: left !important;
}*/

.image-adjustment-container {
    border: 2px dashed #ccc;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
}



.image-previewer {
    height: 300px;
    width: 300px;
    display: flex;
    border-radius: 10px;
    border: 1px solid lightgrey;
}