:root{
    /*--InternalBG: #fdfcfc;
    --InternalBG: #fbfbfb;*/
    --InternalBG: #f7f7f7;
    --primary: #172C45;
    --secondary: #000b1c;
    --blue2: #1368ff;
}

.stext{
    text-decoration:none;
    margin-top:15px;
}
.gallery_div{
    background-color: white;
    min-height: 200px;
    vertical-align: middle;
    margin-bottom: 30px;
    box-shadow: 2px 2px 2px 1px #f1f1f1;
}
.gallery_title{
    padding: 10px 5px;
}
.gallery_thumb{
    overflow:hidden;
    height: 210px;
}
/* These two class NAMES are chosen per language by the templates
   (trans('layout.text_align') gives "text-right" on /ar, "text-left" on /en),
   so they must keep their literal meaning in the mirrored build. Without the
   rtlcss ignore below, .text-right became text-align:left and every Arabic
   page body came out left-aligned. */
/*rtl:begin:ignore*/
.text-left{
    text-align:left;
}
.text-right{
    text-align:right;
}
/*rtl:end:ignore*/
.required{
    color:red;
}

.err_info{
    font-size: 10px;
    color: #cf0707;
    position: relative;
    bottom: 5px;
}

.mandatory_field{
    background-color: #f4e7e7;
}

.carousel_img{
    /*height: calc(100vh - 200px);*/
    height: 550px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-style-align-center{
    text-align: center;
}
/* CKEditor writes these classes into the stored article HTML when an editor
   aligns an image. The choice is the editor's and is already made in the
   article's own language, so the names must stay literal: mirroring them moved
   every left-aligned image in Arabic content to the right. */
/*rtl:begin:ignore*/
.image-style-align-left{
    text-align: left;
}
.image-style-align-right{
    text-align: right;
}


img.image-style-align-left{
    text-align: left;
    float: left;
    margin-left: 0;
    margin-right: 15px;
    height: auto;
}

img.image-style-align-right{
    text-align: right;
    float: right;
    margin-right: 0;
    margin-left: 15px;
    height: auto;
}
/*rtl:end:ignore*/

.ev_forms{
    border-radius: 7px;
    box-shadow: 0px 0px 6px 2px #e0e0e0;
    padding: 10px 10px 20px 10px;
}

/*.carousel-caption {
    position: absolute;
    right: 15%;
    top: 30%;
    color: #fff;
    text-align: right;
    width: 400px;
    max-width: 100%;
    line-height: 150%;
}
*/
.carousel-caption {
    top: 30%;
}
.carousel-caption h2{
    font-size: 2.5rem;
    margin-top: 20px;

}
.carousel-caption h2 a{
    color: #FFF;
    color: #FFF;
    text-shadow: 1px 3px 1px #333333;
}

.srch_strong{
    background: yellow;
}

.pagination_div .pagination{
    color: #FFFFFF;
}

.pagination_div .page-link{
    color: #333333;
}

.pagination_div  .active>.page-link, .pagination_div  .page-link.active {
    color: #FFFFFF;
    background-color: var(--primary);
    border-color: var(--primary);
}

.pagination_div .text-muted{
    display: none;
}

.title{
    margin-top:15px;
    font-size:30px;
    color:#333333;
    font-weight:bold;
}
.sm-title{
    margin-top:15px;
    font-size:18px;
    color:#333333;
    font-weight:bold;
}


/* These two key on the dir attribute the editor stored in the article HTML, so
   they are already per-direction and must survive the mirrored build untouched.
   rtlcss was turning [dir="rtl"] into text-align:left, which left-aligned every
   CMS paragraph and list item on /ar -- the page body looked left-aligned even
   though the layout around it was correct. */
/*rtl:begin:ignore*/
#all_body *[dir="rtl"]{
    text-align: right;
}

#all_body *[dir="ltr"]{
    text-align: left;
}
/*rtl:end:ignore*/

.body_content img{
    max-width:800px !important;
}
.info-img img{
    width:100%;
    
}
.list-img{
    width:100%;
}
.right_side_cont{
    min-height:400px;
    /*background-color:white;
    padding-top:15px;*/
    margin-bottom:15px;
}
.right_side_cont ul li{
    list-style: disc;
    margin-bottom: 7px;
    margin-top: 15px;
}
.right_side_cont li a{
    font-size:0.85rem;
    font-weight:bold;
    color:#333;
    text-decoration:none;
    transition: all 0.5s;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    display: block;
}

.right_side_poll{
    padding: 10px 15px;

}
.poll_question{
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.poll_ul{
    list-style: none;
    padding-inline-start: 10px;
}
.poll_ul li{
    margin-bottom: 10px;

}

.send_poll{
    background: var(--primary);
    border: 2px solid var(--primary);
    color: #FFF;
    padding: 7px 15px 10px;
    font-weight: 600;
    transition: all .5s;
}

.send_poll:hover{
    background: transparent !important;
    color: var(--secondary) !important;
    border: 2px solid var(--secondary);
}

.right_side_cont li a:hover, .right_side_cont li.active a{
    color: var(--primary);
    border-color: var(--primary);
}

.right_side_cont ul li i {
    /*display: none;*/
    transition: all 0.5s;
    position: relative;
}

.right_side_cont ul li i{
    left:  0;
}

/* Already the Arabic version of the rule above, so the mirrored build must
   leave it alone -- rtlcss was turning this back into left:0 and the sidebar
   arrows indented towards the wrong edge on /ar. Same for the :hover rule. */
/*rtl:begin:ignore*/
.right_side_cont ul li i:lang(ar){
    right:  0;
}
/*rtl:end:ignore*/

.right_side_cont li a:hover i,.right_side_cont li.active a i{
    /*display: inline;*/
    left: -5px;
}


/*rtl:begin:ignore*/
.right_side_cont li a:lang(ar):hover i,.right_side_cont li.active a i:lang(ar){
    /*display: inline;*/
    right: -5px;
}
/*rtl:end:ignore*/


.right_side_cont ul.rel_ul li:last-child a{
    border-bottom: 0;
}

.rel_ul{
    padding-right:7px;
    padding-left:7px;
}
.rel_ul img{
    width:100px;
    padding:5px;
    border:solid 1px #ccc;
    margin-left:5px;
}
.rel_ul li{
    list-style:none !important;
    /*min-height:80px;*/
}

.news_icon,.news-icon{
    font-size:13px;
}

.news_icon i{
    color: var(--secondary);
    font-size: 14px;
}

/* see the note on .text-right above */
/*rtl:begin:ignore*/
.text-right{
    text-align:right !important;
}
/*rtl:end:ignore*/
.box-shadow-div{
    background-color:white;
}
.cat-title{
    background-color:var(--InternalBG);
    color:#333333 !important;
    /*padding:5px;*/
    height:90px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.vid_gal_cont{
    width:100%;border:solid 1px #ccc;overflow:hidden;height:160px;overflow:hidden;
}
.video_gallery_thumb{
    width:100% !important;
}
.box-shadow-div{
    /*height:235px;*/
    margin-bottom:15px;
}
.cat_box-shadow-div{
    height:380px;
    background-color:white;
    padding:7px;
    margin-bottom:15px;
}
.catline_thumb_div{
    height:150px;
    overflow:hidden;
    background-image: url("../../images/image-gallery.png");
    background-position: center center;
    background-size: 35%;
    background-repeat: no-repeat;
    background-color: #a8a8a8;

    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.cat_thumb_div{
    /*height:165px;*/
    overflow:hidden;
    background-image: url("../../images/image-gallery.png");
    background-position: center center;
    background-size: 35%;
    background-repeat: no-repeat;
    background-color: #a8a8a8;

    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;

}

.catline_thumb_div.without_bg, .cat_thumb_div.without_bg{
    background: none;
}

.cat_thumb_div img{
    /*width:100% !important;*/
}

.art_cat_thumb_div{
    height:280px;
    overflow:hidden;
}

.art_cat_thumb_div img{
    max-width:100% !important;
}

.btitle{
    font-weight:bold;
    line-height:140%;
    color:#333333;
    font-size:16px;
}

.btitle1{
    font-weight:bold;
    line-height:140%;
    color:#333333;
    font-size:16px;
}
.file_div{
    margin-bottom:15px;
    padding: 0px 15px;
}
.file_div3{
    overflow:hidden;
    height:450px;
}
.file_div3 img{
    width:100%;
}
.file-title{
    background-color:white;
    padding:0 7px;
    /*height:65px;*/
}
.file-title2{
    padding:7px;
}
.cat_cont{
    position:relative;
}
.cart_cont{
    position:relative;
}
.col3-cat{
    height:220px;
    overflow:hidden;
    margin-bottom:15px; 
}
.col3-cat img{
    transition: transform .5s; /* Animation */
}
.col3-cat img:hover{
    transform: scale(1.2);
}

.cat_thumb_div img{
    transition: transform .5s; /* Animation */
    min-height: 100%;
}
.cat_thumb_div img:hover{
    transform: scale(1.1);
}

.redBgHead{
    background: var(--red);
}
.defBgHead{
    background: var(--oldColor);
}
.greenBgHead{
    background: var(--green);
}

#titlebar {
    margin-bottom: 15px;
}

#titlebar .titlebar-heading h1 {
    line-height: 20px;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase
}

#titlebar.titlebar-size-medium .titlebar-heading h1 {
    line-height: 20px;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase
}

#titlebar.titlebar-size-large .titlebar-heading h1 {
    line-height: 55px;
    font-size: 48px;
    letter-spacing: 2px;
    text-transform: uppercase
}

#titlebar .parallax-image {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
#titlebar .section-overlay {
    position: absolute!important;
    width: 100%;
    height: 100%;
    background-color: transparent;
    left: 0!important;
    top: 0!important;
    z-index: 1!important;
}

#titlebar .section-overlay {
    background-color: #2c3e50;
    opacity: .65;
    filter: alpha(opacity=65)
}

#titlebar .titlebar-wrapper {
    /* height: 260px;
    min-height: 260px; */
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

#titlebar.titlebar-type-transparent .titlebar-wrapper {
    padding-bottom: 45px
}
#titlebar.titlebar-size-large .titlebar-heading h1 {
    line-height: 55px;
    font-size: 48px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#titlebar.titlebar-scheme-light .titlebar-content h1 {
    color: #fff!important;
}
#titlebar.titlebar-size-large .titlebar-heading h1 {
    font-size: 50px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.internal-page.Article #titlebar.titlebar-size-large .titlebar-heading h1{
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 1.5px;
}


@media(max-width:575px){
    .titlebar-content .titlebar-heading h1{
        font-size: 1rem !important;
        line-height: inherit !important;
    }
}


#titlebar.titlebar-scheme-light #breadcrumbs span {
    color: #eee;
}
#titlebar #breadcrumbs span {
    display: inline-block;
    padding: 0 2px;
    color: #999;
}
#titlebar.titlebar-scheme-light #breadcrumbs span {
    color: #eee;
}
#titlebar #breadcrumbs span {
    display: inline-block;
    padding: 0 2px;
    color: #999;
}
#titlebar .titlebar-content {
    display: table-cell;
    vertical-align: middle;
}
#titlebar.titlebar-scheme-light #breadcrumbs a, #titlebar.titlebar-scheme-light #breadcrumbs a:hover {
    color: #fcfcfc;
}
#titlebar #breadcrumbs span a {
    color: #666;
}
#titlebar .titlebar-subcontent {
    font-style: ;
    font-weight: ;
    letter-spacing: 1px;
    text-transform: uppercase
  }

.gfloat-img{
    margin-bottom:15px;height:250px;overflow:hidden;float:right;padding-right:7px;padding-left:7px;
}
.gfloat-img img{
 width:100%;
}

.page-top{
    transition: all 0.5s;
    background-color: #fff;
    /*padding: 15px 0px 10px 0px;*/
    /*border-bottom: 3px solid rgb(34, 115, 163);*/
}

.fixed_header {
    position: fixed;
    z-index: 999;
    /*top: 0;*/
    width: 100%;
    background-color: #fff;
}

.page-top h6 {
    font-size: 14px;
    margin-left: auto;
}
.page-top h6 a{
    color: #767676;
    text-decoration: none;
}

.fixed_header.page-top{
    padding: 0;
}


.tel_span{
    display: inline-block;
    direction: ltr;
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    display: none;
    background-color: var(--primary);
    color: #fff;
    z-index: 999;
}

#btn-back-to-top:hover {
    box-shadow: 0 0 3px 2px var(--secondary);
}


.bottom_footer {
    background-color: #194e7a70;
    padding: 5px;
    text-align: center;
}

.footer {
    background-color: #f5f5f5;
    /*padding: 40px;*/
}

.footer_menu a {
    color: #5c5c60;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}
.cat-htitle{
    position:absolute;
    min-height:40px;
    padding:10px;
    color:white;
    font-weight:bold;
    bottom:0px;
    width:100%;
    background-color:#00000047;
}
.gtext{
    color:white;
    font-size:14px;
}
.wtitle{
    color:white;
    font-weight:bold;
    font-size:18px;
    text-decoration:none;
}
.wtitle a{color:white;text-decoration:none;}
.options_div{
    float:left;
}
.options_div:lang(en){
    float:right;
}

.internal_div{
    color:#000;
    /* Was min-height:1000px. Every internal page was padded out to 1000px
       regardless of how much content it had, so a short page scrolled through
       hundreds of pixels of nothing before reaching the footer. On the Partners
       page the content ended at 715px and this pushed the wrapper to 1099px --
       384px of dead scroll.

       A guard against a fully collapsed wrapper is still worth having, so it is
       kept, just small enough that it can never invent empty space: the footer
       is ~770px tall on its own and already fills the bottom of any viewport. */
    min-height:320px;
    padding-bottom:20px;
/*    min-height:1000px;
    min-height:500px;
    padding-bottom:20px;*/
}
#all_body{
    padding: 2rem;
    background: #ffffffc7;
    min-height: 300px;
}
.intimg-cap{
    padding:5px;
    text-align:center;
    background-color:white;
    color:#333333;
}
.art-img{
    border:solid 1px #ccc;
    
}
.file_div4{
    overflow:hidden;
}


.glossary_link {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    color: var(--secondary);
}

.glossary_link .tooltiptext {
    visibility: hidden;
    width: 450px;
    background-color: var(--primary);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
    margin-left: -60px;
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.glossary_link:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.morecontent span {
    display: none;
}
.morelink {
    display: block;
    color: var(--primary);
    font-size: 15px;
    float: left;
}
.morelink:hover{
    color:#ccc;
}


/*** Search Autocomplete ***/
.search_result {
    position: absolute;
    background: #fff;
    width: 100%;
    z-index: 99;
    top: 100%;
}


.search_div2{
    padding: 10px;
    box-shadow: 1px 2px 3px 2px #ccc;
    max-height: 400px;
    overflow-y: overlay;
}

.search_ul {
    list-style: none;
    padding: 0;
}

.search_ul li {
    padding: 7px 0px;
    border-bottom: 2px solid var(--primary);
    transition: all 0.5s;
}
.search_ul li a, .more_result a{
    color: var(--green1);
    display: block;
    transition: all 0.5s;
}

.search_ul li:hover{
    border-color: var(--secondary);
}
.search_ul li:hover a{
    color: var(--gray3);
}

.more_result a:hover {
    color: var(--gray3);
}
/*** END Search Autocomplete ***/



@media(min-width: 1200px) {
    .col3-cat{
        height: 245px !important;
    }
    .cat_thumb_div{
        /*height: 190px !important;*/
    }
    .cart_thumb_div{
        height: 250px !important;
    }
}

@media(max-width: 960px) {

}

@media(max-width: 780px) {
    .gfloat-img{
        height:140px;
    }

}
@media(max-width:480px){
    .cat_thumb_div{
        /*height:170px;*/
    }
    .cart_thumb_div{
        height:240px;
        overflow:hidden;
    }
    .col-cart{
        height:300px;
    }
    .gfloat-img{
        height:120px;
    }
}

/*** Bootstrap DropDOwn on hove **/
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{   }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/*** END Bootstrap DropDOwn on hove **/



.adminbar_div{
    background: #333;
    color: #FFF;
    padding: 2px 0px 4px;
    position: relative;
    z-index: 999;
}

.adminbar_div ul{
    list-style: none;
    display: inline-flex;
    align-content: center;
    margin-bottom: 0;
    padding: 0;
}

.adminbar_div ul li{
    margin-left: 10px;
    margin-right: 10px;
}

.adminbar_div ul li a{
    color: #FFF;
    font-size: 14px;
}


@media(max-width: 540px){
    .carousel_img{
        height: 250px;
    }
}




/****** New Internal Pages ******/
.internal_page_thumb{
    margin-bottom: 15px;
    text-align: center;
}
.internal_page_thumb1{
    height: 500px;
    overflow: hidden;
    text-align: center;
    background-color: #e2e2e2;
    background-repeat: no-repeat;
    background-position: center center;
    /*background-size: cover;*/
    border-radius: 10px;
    box-shadow: 1px 3px 5px 2px #bababa;
}


.internal_page_right_side{
    /*padding: 10px;*/
    background-color: var(--InternalBG);
    border-radius: 10px;
}

.internal_page_right_side .right_side_cont{
    padding: 0px 10px;
}

.right_side_header{
    background-color: var(--primary);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 10px;
    color: #fff;
}



.page-title .title h1{
    font-size: 1.7rem;
}
/******END New Internal Pages ******/



/** POP UP NOTIFICATION **/
.notification-popup .trigger-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    z-index: 99;
}

.notification-popup  .trigger-btn:hover {
    background-color: #0056b3;
}

/* Popup notification styles */
.notification-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 99;
}

.notification-popup.show {
    display: flex;
    opacity: 1;
}

.notification-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.notification-popup.show .notification-content {
    transform: translateY(0);
}

.close-btn-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

.close-btn-popup:hover {
    color: red;
}

.notification-popup button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.notification-popup button:hover {
    background-color: var(--secondary);
}
/** END POP UP NOTIFICATION **/



.page-header .container{
    position: relative;
    z-index:2;
}

.page-header .page-title{
    color:#FFFFFF;
}

.page-header .breadcrumb-nav, .page-header .breadcrumb-nav a{
    color: #FFFFFF;
    margin-bottom: 15px;
    font-size: 0.8rem;
}

.cat-post-title a{
    color: var(--primary);
}