@import url("FAfont.css");

html {
    position: relative;
    min-height: 100%;
}

body {
    Overflow: auto !important;
    letter-spacing: -.1px;
    background: #fafafa;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.uw-sl__item {
    position: absolute;
    top: -9999px;
    left: 0;
}

    .uw-sl__item:focus {
        position: static;
        background: #000;
        color: #fff;
        padding: 1rem;
        z-index: 9999;
    }

#s4-workspace {
    display: block;
    min-height: 100vh;
    overflow: auto;
    position: relative;
    height: auto !important;
}

#s4-bodyContainer {
    padding-bottom: 0 !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    display: flex !important;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* width */
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

dl, ol, ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.pointer {
    cursor: pointer;
}

a, a:active, a:visited, a.Qcard, a:not([href]):not([class]) {
    color: var(--bs-blue);
	  appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-block: none;
    border-inline: none;
    text-decoration: none;
}

 a:hover {
	
	outline-offset: -2px;
        color: var(--bs-link-hover-color-rgb);
        text-decoration: none;
}

.bg-2 {
    background: #fbfcff
}

.page-link {
    margin-right: -1px !important;
    min-width: 35px;
    font-weight: bold;
    font-size: 14px;
}

.contact-cards-card .contact-card img, .contact-cards-card .contact-card svg {
    height: 30px;
    width: 30px;
}

.btnSubscription {
    height: 21px;
}

.services-catalog {
    position: fixed;
    bottom: 240px;
    box-shadow: 0 6px 6px rgb(0 0 0 / 5%);
    z-index: 999;
    left: 25px;
    border-radius: 30px;
    padding: 8px 16px;
    color: var(--bs-blue) !important;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to left, #E4F3FF, #ffffff);
    border: 1px solid #BAD9ED;
    transition: all ease-in-out .3s;
}

    .services-catalog svg {
        height: 26px;
        width: 19px;
        margin: -3px -5px;
    }

    .services-catalog span {
        margin: 0 12px;
    }

    .services-catalog:hover {
        color: #61829d !important;
        box-shadow: 0 0px 6px rgb(0 0 0 / 5%);
    }
/* #### Header Start */
.mainnav {
    position: relative;
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.1);
    background-color: #008bff !important;
    background-image: url(../images/Header.svg);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    
}

/* Reflection below */
html[dir=ltr] .mainnav {
    /* background-image: url(../images/Header-Reflection.svg); */
}

    .mainnav a {
        color: #ffffff;
        font-weight: bold;
        display: inline-block;
        /*min-width: 100px;*/
        transition: all ease-in-out .5s;
    }

.iconSearch a, .iconSearch div[role=dialog] {
    color: var(--bs-white);
    cursor: pointer;
    background: rgba(0, 0, 0, .1);
    display: inline-block;
    min-width: 45px;
    text-align: center;
    padding: 4px 15px;
    border-radius: 25px;
    height: 45px;
    line-height: 38px;
}

.sticky.mainnav a {
    min-width: auto;
}

.navbar {
    padding: 0;
}

.mainnav-links ul.navbar li {
    position: relative;
    margin-left: 18px;
    margin-bottom: 8px;
}

.mainnav-links ul.navbar > li.dropmenu {
    background-image: url(../images/down.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 9% 18px;
    width: auto;
    transition: all ease-in-out .3s;
    border-radius: 14px;
}

    .mainnav-links ul.navbar > li.dropmenu:hover {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11.002" height="6.5" viewBox="0 0 11.002 6.5"><path d="M-6736.206,15264.707l-3.792-3.792-3.8,3.792a1,1,0,0,1-1.414,0,1,1,0,0,1,0-1.413l4.5-4.5a1,1,0,0,1,.709-.291.994.994,0,0,1,.7.291l4.5,4.5a1,1,0,0,1,0,1.413,1,1,0,0,1-.707.294A1,1,0,0,1-6736.206,15264.707Z" transform="translate(6745.501 -15258.501)" fill="%230070cd"/></svg>');
        background-position: 9% 21px;
        background-color: #fff;
        border-radius: 14px 14px 0 0;
    }

        .mainnav-links ul.navbar > li.dropmenu:hover > a {
            color: var(--bs-blue) !important;
        }

.mainnav-links ul.navbar li a {
    padding: 10px;
    font-size: 16px;
}

.mainnav-links ul.navbar li.dropmenu a {
    margin-left: 17px;
}

.mainnav-links ul.navbar li.dropmenu .link-children {
    /*display: none;*/
    position: absolute;
    top: 50px;
    background-color: #ffffff;
    min-width: 213px;
    width: auto;
    z-index: 999;
    border-radius: 14px 0 14px 14px;
    box-shadow: 0px 3px 6px 0 rgb(0 18 35 / 10%);
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out .5s;
}

    .mainnav-links ul.navbar li.dropmenu .link-children li {
        margin: 2px auto;
        border-top: 1px solid #efefef;
        width: 98%;
    }

        .mainnav-links ul.navbar li.dropmenu .link-children li:first-child, .mainnav-links ul.navbar li.dropmenu .link-children li a:hover, .mainnav-links ul.navbar li.dropmenu .link-children li:has(a:hover) + li {
            border-color: rgba(255,255,255,0);
        }

        .mainnav-links ul.navbar li.dropmenu .link-children li a {
            color: #444444;
            padding: 9px 0;
            font-size: .85em;
            display: block;
            margin: 0;
            padding-right: 18px;
            line-height: 26px;
            border-radius: 14px;
        }

            .mainnav-links ul.navbar li.dropmenu .link-children li a:hover {
                background: #efefef;
                color: var(--bs-blue);
            }

.mainnav-links ul.navbar li.dropmenu:hover .link-children {
    visibility: visible;
    opacity: 1;
    top: 44px;
}

.fixedLinks {
    background: rgba(0,0,0,.1);
    border-radius: 24px 24px 0 0;
    padding: 8px 12px 2px;
    margin-bottom: 0;
    font-size: 16px;
    height: 40px;
    line-height: 1.85;
    position: relative;
    text-align: center;
}

    .fixedLinks:after, .fixedLinks:before {
        content: "";
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19.712" height="18.094" viewBox="0 0 19.712 18.094"><path d="M-6629.287,24135H-6649v-16c0-.691.03-1.395.09-2.09a19.946,19.946,0,0,0,19.623,18.09Z" transform="translate(6648.999 -24116.908)" opacity="0.1"/></svg>');
        position: absolute;
        bottom: 0;
        width: 19.71px;
        height: 18.09px;
    }

html[dir=rtl] .fixedLinks:after {
    left: -19.71px;
    transform: rotateY(180deg);
}

html[dir=rtl] .fixedLinks:before {
    right: -19.71px;
}

html[dir=ltr] .fixedLinks:after {
    right: -19.71px;
}

html[dir=ltr] .fixedLinks:before {
    left: -19.71px;
    transform: rotateY(180deg);
}

.fixedLinks a:hover {
    opacity: .4;
}

.callcenter span {
    color: #86AECD;
    font-size: 12px;
    margin-top: 0px;
    display: block;
}

.callcenter div {
    color: #ffffff;
    font-weight: bold;
}

.linkVariation {
    /* border-color: rgba(255,255,255,.2) !important;*/
}

.link-item > span {
    color: var(--bs-white);
    cursor: pointer;
    background: rgba(2, 28, 56, 0.2);
    display: inline-block;
    min-width: 100px;
    text-align: center;
    padding: 4px 15px;
    border-radius: 25px;
    height: 45px;
    line-height: 38px;
}

.userM-Bg {
    background: rgba(2, 28, 56, 0.2);
    line-height: 1.15;
    padding: 0px 6px;
    border-radius: 25px;
    height: 45px;
}

.divLine {
    background: rgba(182,216,236,.3);
    width: 1px;
    height: 24px;
    margin: 3px 0;
    border-radius: 10px;
}
/** {
    outline: none;
    forced-color-adjust: none !important;
}
*/
a:focus, a:focus-visible{
   outline: var(--bs-btn-hover-border-color) auto 2px !important;
    outline-offset: -2px;
   
}
/* #### Header ..End */

/* #### Bread crump Start*/
.bread-crump {
    background-image: url(../images/BreadCrumbBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1rem 0;
    background-position: center;
    font-size: 14px;
    letter-spacing: -.1px;
    font-weight: bold;
    box-shadow: 0 3px 3px rgba(0,0,0,.05);
    color: var(--bs-gray-dark);
}

    .bread-crump .pageTitle {
        font-size: 1.5rem;
        color: var(--bs-dark) !important;
    }
/* #### Bread crump ..End*/

/* #### Footer Start*/
footer {
    clear: both;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    color: var(--bs-dark);
    font-size: 14px;
    background-color: #f1f8fb;
    background-image: linear-gradient(rgba(255,255,255,.0), rgba(255,255,255,.2)), url(../images/footer-bg.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255,255,255,0.9);
}

    footer > .foot {
        background: var(--bs-blue);
        background-image: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95));
        padding: 12px 0;
        font-size: 14px;
        clear: both;
    }

.foota a {
    opacity: .3;
    color: #ffffff;
    background: var(--bs-dark);
    border-radius: 100%;
    margin: 0 0 0 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    transition: all ease .5s;
}

    .foota a:hover {
        opacity: 1;
    }

.foot-logo {
    display: block;
    position: relative;
}

    .foot-logo img {
        width: 100%;
        height: auto;
        margin: 15px 0;
    }

    .foot-logo + p {
        text-align: justify;
        line-height: 1.4;
        margin-bottom: 10px;
        font-size: 12px;
        opacity: .6;
    }

.foLinks a {
    display: block;
    color: #1868a7;
    margin: 2px 0 0;
    padding: 6px 0;
    /*opacity: .6;*/
    font-weight: bold;
    font-size: 15px;
    transition: all ease .5s;
}

    .foLinks a:hover {
        opacity: 1;
    }

    .foLinks a:before {
        content: "\f111";
        display: inline-block;
        font: normal normal normal 7px/1 FontAwesome;
        color: #1868a7;
        vertical-align: 2px;
    }

.LnkGApp, .LnkAApp {
    display: inline-block;
    background: #000;
    border-radius: 8px;
    margin: 0 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0);
    transition: all .3s ease-in-out;
}

    .LnkGApp:hover, .LnkAApp:hover {
        background: rgba(0,0,0,.8);
        box-shadow: 0 2px 4px rgba(0,0,0,0);
    }

    .LnkGApp svg, .LnkAApp svg {
        width: 110px;
        height: 36px;
    }

.ConUs {
    display: inline-block;
    border-radius: 30px;
    box-shadow: 0px 3px 10px 0 rgb(0 18 35 / 10%);
    text-align: center;
    font-weight: bold;
    padding: 6px 6px;
    background: rgba(255,255,255,.6);
    transition: all ease .5s;
}

}

.ConUs:hover {
    background: rgba(255,255,255,.9);
}

.ConUs > span {
    background: var(--bs-blue);
    border-radius: 30px;
    padding: 6px 12px;
    text-align: center;
    display: inline-block;
}

.ConUs > samp {
    margin: 0 20px;
}

/* #### Footer ..End*/

.supplier-system {
    background-image: linear-gradient(rgba(19, 85, 149, 0.8), rgba(39, 115, 172, 0.8)), url(../images/supplier-system-back.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 10px;
}

.initiatives-link {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0;
}

    .initiatives-link a {
        max-width: 255px;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        align-items: center;
        justify-content: center;
        display: flex;
        overflow: hidden;
        padding: 0;
    }

        .initiatives-link a.sublink.link-one {
            background-image: url(../images/Saudi2030Vision-bg.jpg);
        }

        .initiatives-link a.sublink.link-two {
            background-image: url(../images/NTP2020-bg.jpg);
        }

        .initiatives-link a img {
            width: 100%;
        }

.initiatives-ul .initiativesLinks:hover .img-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.3s ease 0.1s;
    opacity: 1;
}

.initiatives-ul .initiativesLinks .img-hover {
    position: absolute;
    bottom: -100%;
    left: -100%;
    transition: all 0.3s ease 0.1s;
    opacity: 0;
}

.dfwp-list {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x)) !important;
    margin-left: calc(-.5 * var(--bs-gutter-x)) !important;
    float: none;
}

.socialInitiativesItem-container > .dfwp-item {
    width: 100%;
}

.dfwp-item {
    flex: 0 0 auto;
    width: 33.33333333%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    overflow: hidden;
}

.dfwp-list .item {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 2.5rem 1rem;
    font-weight: bold;
}

    .dfwp-list .item > a {
        display: block;
    }

.dfwp-list .img-container {
    background-image: url(../images/water-drop-in-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: 75%;
    width: 70px;
    height: 100%;
    margin-left: 20px;
    color: transparent;
    position: absolute;
    right: 5px;
    top: 0px;
    transition: all 0.3s ease 0.1s;
}

    .dfwp-list .img-container.image-area-left {
        position: unset;
    }

.Qcard, .dfwp-list .item {
    background: #ffffff;
    color: #555555 !important;
    box-shadow: 0px 3px 6px 0 rgb(0 18 35 / 10%);
    /*  border-top: 1px solid rgb(0 18 35 / 4%);*/
    border-radius: 10px;
    display: flex;
    transition: all ease-in-out .5s;
    overflow: hidden;
}

.Qcarddrop {
    height: 270px;
    background: linear-gradient(#fff 0%, rgba(244, 250, 255, 0.8) 100%);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

    .Qcarddrop .bfont-lg {
        line-height: 1;
    }

    .Qcarddrop p {
        line-height: initial;
    }

.waterDrop {
    display: block;
    margin: 0 auto;
    background-image: url(../images/water-drop-in-bg.svg);
    background-repeat: no-repeat;
    background-size: 69%;
    color: var(--bs-blue) !important;
    width: 90px;
    height: 90px;
    line-height: 90px;
}

.dfwp-list .item {
    align-items: center;
}

    .Qcard, a.Qcard, .dfwp-list .item a, .newsRC-title {
        color: #555 !important;
    }

        a.Qcard:hover, .dfwp-list .item a:hover, .newsRC-title:hover {
            color: var(--bs-blue) !important;
        }

        .Qcard:hover, .dfwp-list .item:hover {
            box-shadow: 0px 1px 12px 0 rgb(0 18 35 / 20%);
        }

        .Qcard .accordion-header.collapsed {
            background: none;
            color: #555 !important;
        }

        .Qcard .accordion-header {
            background: var(--bs-blue);
            color: #ffffff !important;
            cursor: pointer;
            overflow: hidden;
        }

            .Qcard .accordion-header:after {
                content: "\f068";
                font-size: 18px;
                float: left;
                font-family: "Font Awesome 6 Free";
                font-weight: bold;
            }

            .Qcard .accordion-header.collapsed:after {
                content: "\2b";
            }

.lSSlideOuter.vertical .lSAction > a {
    right: auto;
}

.starBG {
    width: 35px;
    height: 34px;
    background-image: url(../images/star.svg);
    color: #555;
    text-align: center;
    padding: 9px 0;
    font-size: 12px;
}
/* Old CSS Start */
.level-section .dfwp-list {
    display: block;
}

.SiteMapContainer .siteMapItems .level-header {
    padding: 0px;
}

.SiteMapContainer .siteMapItems > .level-section.nothasChildren > .level-header a, .SiteMapContainer .siteMapItems > .level-section.hasChildren > .level-header a {
    display: block;
    background-color: #F3FAFF;
    font-weight: 600;
    font-size: 14px;
    padding: 15px;
    margin-top: 15px;
}

.SiteMapContainer .siteMapItems .nothasChildrenContainer > .level-section.nothasChildren > .level-header a, .SiteMapContainer .siteMapItems .nothasChildrenContainer > .level-section.hasChildren > .level-header a {
    display: block;
    background-color: #F3FAFF;
    font-size: 14px;
    padding: 19px 20px 19px 20px;
    margin-top: 15px;
}

.SiteMapContainer .siteMapItems > .level-section.hasChildren > .dfwp-list > .level-section > .level-header .headertitle a {
    display: block;
    font-weight: 600;
    font-size: 14px;
    padding: 0px;
    position: relative;
    margin-top: 15px;
}

    .SiteMapContainer .siteMapItems > .level-section.hasChildren > .dfwp-list > .level-section > .level-header .headertitle a:before {
        content: "\f111";
        display: inline-block;
        font: normal normal normal 7px/1 FontAwesome;
        margin: 0 10px;
    }

.dark-tabs .tab {
    border-radius: 6px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 175px;
    cursor: pointer;
    text-align: center;
}

    .dark-tabs .tab.active {
        background-color: #fff;
        color: #1F88A5;
    }

.info.basic .info-item {
    border-radius: 10px;
    background-color: rgba(0,0,0,.05);
    padding: 10px 28px;
    color: white;
    display: flex;
    align-items: center;
}

    .info.basic .info-item a {
        color: white;
    }

    .info.basic .info-item:nth-child(even) {
        background: transparent;
        border-radius: 0px;
    }

    .info.basic .info-item .title {
        display: inline-block;
        min-width: 30%;
    }

    .info.basic .info-item .val {
        font-weight: bold;
    }

.l-contentPages .treatedWaterService .container {
    position: relative;
}

.l-contentPages a.readmore {
    position: absolute;
    left: 35px;
    color: #2773AC;
    font-weight: bold;
    top: 5px;
}

.treatedWaterService {
    background-color: #F3F8FC;
    padding-top: 25px;
    margin-bottom: 25px;
}

.l-contentPages a.readmore:after {
    background-image: url(../images/water-drop-in-bg.svg);
    position: absolute;
    width: 21px;
    height: 30px;
    content: "";
    background-repeat: no-repeat;
    left: -10px;
    top: -7px;
}

.l-contentPages .sectorListing li {
    display: inline-block;
    width: calc((100% /2) - 2.5px);
}

    .l-contentPages .sectorListing li .item {
        padding: 0px 15px;
        margin-bottom: 20px;
    }

        .l-contentPages .sectorListing li .item a {
            display: block;
            width: 100%;
            background-color: #F3FAFF;
            border-radius: 10px;
            border-top: 6px solid rgba(39, 115, 172, 0.15);
            padding: 23px 20px;
            color: #333333;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            transition: all ease-in-out .5s;
        }

            .l-contentPages .sectorListing li .item a:hover {
                background-color: #d4e6f3;
                border-top: 6px solid rgba(39, 115, 172, 0);
            }

.l-articlePage ul li, .l-CEO-content ul li, .l-initiatives-Details ul li {
    position: relative;
    padding-right: 35px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
}

    .l-articlePage ul li:before, .l-CEO-content ul li:before, .l-initiatives-Details ul li:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #2773AC;
        border-radius: 50%;
        top: 15%;
        right: 0;
        border: 1px solid #D4E3EE;
    }

.imagesTitle {
    display: none;
}

.l-CEO-image {
    width: 255px;
    height: 255px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 30px;
    float: right;
    box-shadow: 0 0 1px 3px #ddd inset;
}

.l-CEO-data .title {
    color: #333333;
    font-size: 16px;
}

.l-CEO-data {
    font-size: 14px;
    font-weight: bold;
}

    .l-CEO-data:after {
        content: "";
        position: absolute;
        border-bottom: 1px solid rgba(39, 115, 172, 0.5);
        width: 255px;
    }

.l-articlePage h1, .l-articlePage h2, .l-articlePage h3, .l-articlePage h4, .l-articlePage h5, .l-articlePage h6, .ms-webpart-zone h1, .ms-webpart-zone h2, .ms-webpart-zone h3, .ms-webpart-zone h4, .ms-webpart-zone h5, .ms-webpart-zone h6, .l-initiatives-Details h1, .l-initiatives-Details h2, .l-initiatives-Details h3, .l-initiatives-Details h4, .l-initiatives-Details h5, .l-initiatives-Details h6 {
    font-size: 1.3rem;
    /*  color: #081A32;*/
    line-height: 38px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 20px;
}

.l-initiatives-Details h2 {
    display: inline-block;
}

.editmodeLayout .l-CEO-image {
    width: auto;
    height: auto;
    float: none;
    box-shadow: none;
    max-height: 500px;
    overflow: initial;
    border: none;
    border-radius: 0;
}

    .editmodeLayout .l-CEO-image img {
        max-height: 500px;
    }

.l-CEO-image .ms-rtestate-field {
    display: block;
    width: 100%;
    height: 100%;
}

    .l-CEO-image .ms-rtestate-field img {
        width: 100%;
        height: 100%;
    }

#important_links a.Qcard h2 {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: #555555 !important;
}

.ms-rtestate-field > img, .ms-rtestate-field > div > img, .ms-rtestate-field > p img, .ms-rtestate-field > p > strong > img {
    width: 100%;
    max-width: 100%;
}

.supplier-realtionships {
    background-image: linear-gradient(#3b7aa2 50%, rgba(0, 0, 0, 0.0)), url(../images/agreement-background.png);
    background-repeat: no-repeat;
    background-position: bottom center;
}

    .supplier-realtionships .whitediv {
        background-color: #F4F9FA;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

.waveBG {
    background-image: url(../images/wave.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.Himg-65 img {
    height: 65px;
    width: auto;
}

.l-articlePage-scrollContent {
    height: 500px;
    overflow: auto;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 14px !important;
    line-height: 1;
}

    .l-articlePage-scrollContent * {
        font-size: 14px !important;
    }

.l-articlePage-buttonsGroup {
    padding: 55px 0;
    text-align: center;
}

.btnsService .link {
    background: none;
    border: none;
    border-radius: var(--bs-border-radius-pill);
    font-size: 14px !important;
    font-weight: bold;
    color: #000;
}

    .primary-btn, .btn.primary-btn, .btnsService .link.active, a.btn-primary {
        color: #ffffff !important;
        background-image: linear-gradient(-90deg, #2773AC, #1f8cce) !important;
        border: 2px solid #2773AC !important;
    }

.link-border, .btn.link-border {
    cursor: pointer !important;
    border: none !important;
    border-bottom: 2px dotted #2773ac !important;
    background: none !important;
    border-radius: 0 !important;
}

.l-articlePage-buttonsGroup .btn {
    border: 2px solid #2773AC !important;
    color: #2773AC;
    padding: 10px 30px;
    font-weight: bold;
    border-radius: 25px;
    display: inline-block;
    margin-right: 20px;
}

.editmodeLayout .backslash {
    display: none;
}

.editmodeLayout .l-CEO-data:after {
    display: none;
}

.editmodeLayout .l-Projects-ProjectCategory,
.editmodeLayout .l-Projects-startDate,
.editmodeLayout .l-Projects-ProjectEndDate,
.editmodeLayout .l-Projects-ProjectType,
.editmodeLayout .l-Projects-location,
.editmodeLayout .l-Projects-contractor {
    width: 620px;
    background-color: #ffffff;
    margin-left: 0;
    float: none;
}

.editmodeLayout .innerDetail {
    display: none;
}

.editmodeLayout .ms-formfieldcontainer {
    display: inline-block;
}

.editmodeLayout .l-Projects-ProjectCategory svg,
.editmodeLayout .l-Projects-startDate svg,
.editmodeLayout .l-Projects-ProjectEndDate svg,
.editmodeLayout .l-Projects-ProjectType svg,
.editmodeLayout .l-Projects-location svg,
.editmodeLayout .l-Projects-contractor svg {
    float: right;
    width: 40px;
}

.editmodeLayout .l-Projects .innerDetailTitle {
    margin-top: 0;
    line-height: 26px;
}

.editmodeLayout select {
    padding: 3px 15px;
    border-color: #ddd;
    border-radius: 6px;
    background-image: url("/Style Library/images/menu-icon.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 6px;
    background-position: 5% center;
    padding-left: 35px;
}

.editmodeLayout .l-Projects input {
    padding: 3px 15px;
    border-color: #ddd;
    border-radius: 6px;
    padding-left: 35px;
}

.editmodeLayout .l-Projects-ProjectType p,
.editmodeLayout .l-Projects-location p,
.editmodeLayout .l-Projects-contractor p {
    margin-top: 0;
}

.editmodeLayout .l-Projects-location,
.l-Projects-contractor {
    margin-bottom: 24px;
}

.editmodeLayout .l-Projects-name input {
    width: 700px;
    font-size: 16px;
}

.editmodeLayout #modalID {
    border: 2px solid;
    padding: 5px 16px;
    border-radius: 6px;
}

.editmodeLayout .l-Projects-mediaGallaryUpload {
    margin: 50px 0;
}

.editmodeLayout .l-Projects-ProjectDescription .ms-formfieldcontainer {
    display: block;
}

.editmodeLayout .l-Projects-ProjectDescription .ms-rtestate-write {
    min-height: 200px;
}

.ms-dlgContent {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .ms-dlgContent .ms-dlgTitle {
        padding: 13px 19px 15px;
        white-space: nowrap;
        cursor: move;
        overflow: hidden;
        position: absolute;
        background: #2773AC;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        left: -27px;
        top: -27px;
        z-index: 2;
    }

        .ms-dlgContent .ms-dlgTitle:before {
            content: "x";
            font-size: 29px;
            color: #ffffff;
            position: absolute;
            top: 3px;
        }

.editmodeLayout .l-Projects textarea {
    width: 700px;
    border-color: #ddd;
    border-radius: 6px;
}

.ms-dlgTitleBtns {
    margin-left: 0;
    margin-right: 0;
}

.ms-dlgContent .ms-dlgTitle a {
    position: absolute;
    right: 0;
    width: 60px;
    height: 50px;
}

.ms-dlgContent .ms-dlgTitle img {
    display: none;
}

.hide {
    display: none !important;
}

a.loginLink {
    background-image: linear-gradient(-90deg, #2773AC, #1f8cce);
    color: #ffffff;
    padding: 10px 34px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 25px;
    display: inline-block;
}

.l-careers .career-link {
    padding: 25px 0;
    text-align: center;
}

.customer-service {
    background-image: linear-gradient( var(--bs-primary)-30%, rgba(75, 118, 151, 0.7)), url(../images/customer-service-guide-desktop.jpg);
    border-radius: 10px;
    border: 1px solid #525252;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    height: calc(100% - 2rem) !important;
}

    .customer-service span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 55px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        margin: 30px;
        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(235, 235, 235, 0.5));
    }

        .customer-service span > img {
            width: 33px;
            height: 38px;
            margin-right: 11px;
            margin-top: 9px;
            margin-bottom: 8px;
        }

    .customer-service strong {
        color: #f8f9fa;
        font-size: 21px;
        margin-bottom: 6px;
        line-height: 28px;
        display: block;
        text-align: center;
    }

    .customer-service samp {
        /*color: #c4e5ff;*/
        color: #e1eef8;
        font-size: 16px;
        line-height: 28px;
        display: block;
        text-align: center;
        font-weight: bold;
        max-width: 200px;
        line-height: 1;
        margin: 0 auto;
    }

    .customer-service a {
        display: flex;
        position: relative;
        background: linear-gradient(315deg, #d4edff, #ffffff);
        border-radius: 30px;
        width: 160px;
        margin: auto auto 25px;
        justify-content: space-between;
        padding: 5px;
        text-indent: 10px;
        font-weight: bold;
    }

.btn-NWC-w {
    display: block;
    position: relative;
    background: linear-gradient(315deg, #d4edff, #ffffff);
    /*   border: 1px solid #ADCFEA;*/
    border-radius: 30px;
    margin: auto;
    padding: 6px 16px;
    font-weight: bold;
}

.aboutsection-more a, .moreLink {
    position: relative;
}

.moreLink {
    padding-left: 45px !important;
}

    .aboutsection-more a:after, .moreLink:after {
        content: "";
        position: absolute;
        background-image: url(../images/arrow.svg);
        background-repeat: no-repeat;
        width: 16px;
        height: 12px;
        top: 50%;
        margin-top: -6px;
        left: 10px;
    }

.customer-service a > img {
}

#important_links .Qcard {
    background-image: url(../images/water-drop-in-bg.svg);
    background-position: 85% 50%;
    background-repeat: no-repeat;
    background-size: 75px;
    color: #555555 !important;
}

#important_links Qcard :hover {
    color: var(--bs-blue);
}

.aboutsection-desc {
    text-align: justify;
}

.aboutsection {
    background-image: linear-gradient(rgba(19, 85, 149, 0.8), rgba(39, 115, 172, 0.8)), url(../images/NTP-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

    .aboutsection .sublink {
        display: block;
        background-color: rgba(8, 26, 50, 0.3);
        border-radius: 10px;
        padding: 12px;
        text-align: center;
    }

        .aboutsection .sublink img {
            height: 90px;
        }

.youtube-section {
    background-image: linear-gradient(rgba(4, 53, 84, 0.8), rgba(4, 53, 84, 0.8)), url(../images/nwc.jpg);
    background-position: center;
    background-size: cover;
}

.YTplay-ico {
    display: flex;
    cursor: pointer;
    width: 184px;
    height: 184px;
    border-radius: 100px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="50.629" viewBox="0 0 45 50.629"><path d="M46.725,32.733,10.935,53.5A4.605,4.605,0,0,1,4,49.579V8.046a4.6,4.6,0,0,1,6.935-3.915L46.725,24.9a4.511,4.511,0,0,1,0,7.835Z" transform="translate(-4 -3.5)" fill="%23fff"/></svg>');
    background-color: rgba(8, 26, 50,.8);
    margin-top: 8px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .4;
}

    .YTplay-ico:hover {
        opacity: 1;
    }

.twittersec {
    background-image: url("../images/twitter-icon-in-bg.svg"),linear-gradient(222deg, #1DA1F2, #B4E2FF);
    background-position: bottom left;
    background-repeat: no-repeat;
    color: #fff
}

.twittersec-slider * {
    color: #fff !important;
    font-weight: normal !important;
}

.navbarSection {
    height: 450px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: cover;
    overflow: hidden;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1);
}

.projects {
    background-image: linear-gradient(#FAFCFF, #eff5f9);
    border-top: 6px solid #F3F4F6;
}

    .projects .container {
        background-image: url(../images/globe-map-icon.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

/* Old CSS ..END */
.divimage {
    height: 220px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
}

    .divimage img {
        background-size: cover;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.divimageBG {
    background-image: url(../images/ImageHolder.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
}

    .divimageBG img {
        width: 100%;
        height: auto;
    }

.divP {
    height: 145px;
    display: block;
}

.divP70 {
    min-height: 70px;
    display: block;
}

.BlueControl .lSAction > a {
    background-image: url(../Images/controls-blue.png);
}

.head-title {
    position: relative;
    font-size: 1.25rem;
    color: #003461 !important;
    letter-spacing: -.5px;
    line-height: 1;
}

.archiveTitle {
    position: relative;
    font-size: 1rem;
    letter-spacing: -.5px;
    line-height: 1rem;
}

    .archiveTitle:after {
        position: absolute;
        background-image: url(../images/water-drop-in-bg.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        content: "";
        width: 20px;
        height: 30px;
        left: -10px;
        top: -4px;
    }

.news-image {
    height: 100%;
    background-size: cover;
    background-position: 50% 10%;
    border-radius: 10px;
    min-height: 225px;
    background-color: #f7f7f7;
}

.news-image-sm {
    min-height: 150px;
}

.image-big {
    width: 50%;
    max-width: 375px;
}

    .image-big img {
        width: 100%;
        height: auto;
    }

.bluecard {
    border-radius: 10px;
    background: linear-gradient(.5turn, #ffffff, 20%, rgb(244 250 255 / 80%));
    padding: 22px 20px 28px;
    box-shadow: 0px 3px 6px #00000010;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-weight: bold;
    height: 100%;
}

.solidbluecard {
    background: var(--bs-blue);
    color: #fff;
}

.bluecardtitle {
    background: rgb(249 251 254 / 20%);
    border-radius: 10px;
    padding: 1.35rem;
    text-align: center;
    font-weight: bold;
}

.whitecardtitle {
    background: #f2f7ff;
    border-radius: 10px;
    padding: .86rem 1.4rem;
    text-align: center;
    font-weight: bold;
}

.ProjectsProjico {
    background: #ffffff;
    border-radius: 12px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
}

.map-popover {
    max-width: none;
    padding: 0;
    border: none;
    box-shadow: 0px 3px 6px #00000010;
}

    .map-popover .popover-body {
        width: 600px !important;
    }

    .map-popover h3 {
        background: #F4FAFF;
        color: var(--bs-blue) !important;
        margin: -1rem -1rem 1rem;
        padding: 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
        font-size: 1.1rem;
        text-align: center;
    }

.SubscribeIMg {
    width: 25px;
}

.projects svg {
    width: auto;
    display: block;
    max-height: 480px;
}

path#mapJazan {
    stroke-width: 5px;
    stroke: #bdd9ee !important;
}

    path#mapJazan:hover, path#mapJazan:focus, path#mapJazan.active {
        stroke: var(--bs-blue) !important;
    }

.projects svg path {
    fill: #BDD9EE !important;
    stroke: #fff;
    stroke-width: 4px;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

    .projects svg path:hover, svg path:focus, .projects svg path.active {
        fill: var(--bs-blue) !important;
        outline: none;
    }

        .projects svg path.active:hover {
            opacity: .75;
        }

.projects svg text {
    pointer-events: none;
    color: #BDD9EE;
    fill: #BDD9EE;
    opacity: 0;
    transition: all ease-in-out .5s;
}

.select-change {
    cursor: pointer;
}
/* Tracker Dots */
.trackdots, .l-careers ol, .l-articlePage ol, .l-articlePage ol li, .l-initiatives-Details o, .l-initiatives-Details ol li {
    position: relative;
}

    .trackdots li:after, .l-careers ol li:after, .l-articlePage ol li:after, .l-initiatives-Details ol li:after {
        content: counter(step-counter);
        margin-left: 15px;
        background-color: #2773AC;
        color: #ffffff;
        font-weight: bold;
        padding: 3px 0px;
        border-radius: 23px;
        box-shadow: 0 2px 20px rgb(0 0 0 / 30%);
        display: inline-block;
        width: 35px;
        height: 35px;
        text-align: center;
        position: absolute;
        right: -60px;
        top: 0;
        border: 1px solid #D4E3EE;
    }

    .trackdots li, .l-careers ol li, .l-articlePage ol li, .l-initiatives-Details ol li {
        counter-increment: step-counter;
        margin-bottom: 30px;
        font-size: 14px;
        color: #333333;
        font-weight: 600;
        line-height: 30px;
        background-color: #F3FAFF;
        margin-right: 60px;
        position: relative;
        border-radius: 10px;
        padding: 15px;
    }

    .trackdots:before, .l-careers ol:before, .l-articlePage ol:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 2px;
        right: 17px;
        border-right: 2px dashed #2773AC;
        border-radius: 5px;
    }
/* Tracker Dots */

.award-tab {
    text-align: center;
    display: block;
}

    .award-tab a {
        display: inline-block;
        font-weight: bold;
        padding: 3.7rem 1rem .6rem;
        margin: 0 .5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        color: #555;
        background-repeat: no-repeat;
        background-position: 50% 10px;
    }

        .award-tab a.active {
            background-color: var(--bs-blue);
            color: #fff;
        }

.internationalawards {
    background-image: url(../images/international-awards-icon.svg);
}

.localawards {
    background-image: url(../images/local-awards-icon.svg);
}

.internationalawards.active {
    background-image: url(../images/international-awards-icon-selected.svg);
}

.localawards.active {
    background-image: url(../images/local-awards-icon-selected.svg);
}

.pageTools .pagOptions > li a {
    font-size: 17px;
    background: transparent linear-gradient(135deg, #F3F5F8 0%, #EEF2F7 100%) 0% 0% no-repeat padding-box;
    display: inline-block;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    color: #2773AC;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

svg.icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

.ratingContainer {
    background-color: #EFF4F8;
    clear: both;
}

.rate-area {
    margin: 0 0.2rem;
    display: inline-block;
    vertical-align: middle;
}

    .rate-area tr {
        display: inline-flex;
        padding: 0;
        margin: 0;
        border-spacing: 0;
        border: 0 none;
    }

    .rate-area thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .rate-area td {
        position: relative;
    }

        .rate-area td input[type="radio"] {
            margin: 0;
            background: transparent;
            border: 0;
            position: absolute;
        }

        .rate-area td:not(:checked) > input {
            position: absolute;
            top: -9999px;
            clip: rect(0,0,0,0);
        }

        /* .rate-area > br {
        display: none;
    }*/

        .rate-area td:not(:checked) > label {
            display: inline-block;
            width: 19px;
            height: 21px;
            position: relative;
            padding: 0px;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
            line-height: 1.2;
            color: #CFCFCF;
            margin: 0;
            text-indent: 19px;
            margin: 0 2px;
        }

            .rate-area td:not(:checked) > label:before {
                content: "\f005";
                font-size: 18px;
                position: absolute;
                font-family: 'FontAwesome';
                text-indent: -20px;
            }

            .rate-area td:not(:checked) > label:hover, .rate-area td:not(:checked) > label:hover ~ label {
                color: gold;
            }

/* Reset SharePoint Layouts15 */
.ms-webpartzone-cell {
    margin: auto !important;
}

div.article, div.welcome, .article-content, .welcome-content, .cell-margin {
    padding: 0 !important;
    margin: 0 !important;
}

input[type=password], input[type=text], input[type=file], input:not([type]), textarea, .ms-inputBox, .form-select, input.form-control, .btn, input.btn, input[type=button], input[type=reset], input[type=submit], button {
    padding: 0.55rem 0.75rem;
    margin: auto;
    font-family: inherit !important;
    min-width: unset !important;
}

.form-select, input.form-control, .btn, input.btn {
    border: 1px solid rgba(39, 115, 172, 0.5) !important;
    border-radius: var(--bs-border-radius-pill);
    font-size: 14px !important;
    font-weight: bold !important;
}

    input.btn.btn-primary {
        color: #fff;
        background: var(--bs-blue);
    }

/* CSS Pie Chart */
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.pie {
    --p: 20;
    --b: 5px;
    --c: var(--bs-primary);
    --w: 60px;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    font-size: 15px;
    font-weight: bold;
    box-shadow: inset 0 0 0 5px rgb(0 0 0 / 4%);
    border-radius: 100%;
    background: url(../images/drop-prec-icon.png) no-repeat center rgba(255,255,255,.0);
    background-size: 15px;
}

    .pie:before,
    .pie:after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }

    .pie:before {
        inset: 0;
        background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
        mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    }

    .pie:after {
        inset: calc(50% - var(--b)/2);
        background: var(--c);
        transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
    }

.animate {
    animation: p 1s .5s both;
}

.noround:before {
    background-size: 0 0,auto;
}

.noround:after {
    content: none;
}

@keyframes p {
    from {
        --p: 0
    }
}

/* Slider */
#carouselslider .carousel-inner {
    background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.3)), url(../images/SliderBGar.jpg);
    background-position: center !important;
    background-size: cover;
}

#carouselslider .carousel-item {
    width: 100%;
    aspect-ratio: 4.27/1;
    max-height: 450px;
    position: relative;
}

    #carouselslider .carousel-item h1 {
        color: #FFF !important;
    }

#carouselslider.carousel-fade .active.carousel-item-start,
#carouselslider.carousel-fade .active.carousel-item-end {
    transition: opacity 2s;
}

#carouselslider .carousel-item > div .container {
    position: relative;
    z-index: 1;
}

#carouselslider .btn-slider {
    display: inline-block;
    position: relative;
    background: linear-gradient(315deg, #d4edff, #ffffff);
    /* border: 1px solid #ADCFEA;*/
    border-radius: 30px;
    margin-top: 15px;
    padding: 6px 25px;
    font-weight: bold;
}

#carouselslider .Sliderimg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-position: center !important;
    background-size: cover;
    opacity: 0;
    transition: opacity 2s;
}

#carouselslider.carousel-fade .carousel-item-start .Sliderimg, #carouselslider.carousel-fade .carousel-item-end .Sliderimg, #carouselslider.carousel-fade .active .Sliderimg,
#carouselslider.carousel-fade .carousel-item-start .SliderTube, #carouselslider.carousel-fade .carousel-item-end .SliderTube, #carouselslider.carousel-fade .active .SliderTube {
    opacity: 1;
}

#carouselslider .SliderTube {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    transition: opacity 2s;
}

    #carouselslider .SliderTube iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

.SliderTube {
    display: inline-block;
    position: relative;
}

    .SliderTube::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 32px 32px;
        opacity: 0;
        transition: opacity ease-in-out .2s;
        pointer-events: none;
    }

    .SliderTube.ended::after, .SliderTube.paused::after {
        opacity: 1;
        pointer-events: auto;
    }

    .SliderTube.ended::after {
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
    }

    .SliderTube.paused::after {
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
    }

#carouselslider .carousel-control-prev:hover, .carousel-control-prev:focus {
    background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.5)) !important;
}

#carouselslider .carousel-control-next:hover, .carousel-control-next:focus {
    background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0)) !important;
}

#twittersec-slider {
    height: 200px;
}

    #twittersec-slider .carousel-control-prev, #twittersec-slider .carousel-control-next {
        border: 2px solid #fff;
        border-radius: 100%;
        height: 34px;
        width: 34px;
        padding: 7px;
        cursor: pointer;
        bottom: -50px;
        top: auto;
        right: 2.5rem;
    }

    #twittersec-slider .carousel-control-prev {
        margin-right: -40px;
    }

    #twittersec-slider .carousel-control-next {
        left: -44px;
    }

.reg-val[style*="display: inline"] + input, .reg-val[style*="display: inline"] + select, .reg-val[style*="display: inline"] + textarea {
    border-color: red !important;
}

.reg-val {
    color: red;
    font-size: 14px;
}

#carouselNews .carousel-control-prev-icon, #carouselNews .carousel-control-next-icon {
    filter: brightness(0);
    width: 24px;
    height: 24px;
}

#carouselNews .carousel-control-prev, #carouselNews .carousel-control-next {
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, #E6E7E8 100%);
    width: 2.5rem;
    padding: 7px;
    cursor: pointer;
    top: 0;
    bottom: 0;
    border-radius: 8px;
    position: absolute;
}

.carouselServCatcont {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

    .carouselServCatcont > span, .owl-dots > button > span {
        height: 16px;
        width: 16px;
        display: inline-block;
        border-radius: 10px;
        background: var(--bs-blue);
        cursor: pointer;
        transition: all ease-in-out .25s;
    }

        .carouselServCatcont > span:hover, .owl-dots > button.active > span {
            width: 28px;
            background: rgba(0, 112, 205,.75);
        }

.owl-dots > button {
    display: inline-block;
    margin: 0 2px;
}

.owl-dots {
    text-align: center;
}

.btn-close {
    background-size: 11px;
    border-radius: 100%;
    border: 2px solid rgba(0,0,0,.8) !important;
    background-color: rgba(255,255,255,.8);
    cursor: pointer !important;
    pointer-events: auto !important;
}

html[dir=rtl] .fa-magnifying-glass {
    transform: rotateZ(90deg);
}

.link-item > span i, .link-item > span svg, .iconSearch i { /*opacity:.8;*/
}

.link-item:hover > span, .user-h:hover, .iconSearch a:hover {
    background-color: rgba(0, 0, 0, .25);
}

    .link-item:hover > span i, .link-item:hover > span svg, .iconSearch a:hover i {
        opacity: 1;
    }

@media (min-width:1370px) {
    html {
        font-size: 18px;
    }

    .head-title {
        font-size: 1.75rem;
    }

    .archiveTitle, .bfont-lg {
        font-size: 1.313rem;
    }

    .Qcarddrop .bfont-lg {
        line-height: initial;
        min-height: 35px;
    }
}

@media (min-width:991px) {

    #carouselNews .carousel-control-prev {
        right: -3rem;
        left: auto;
    }

    #carouselNews .carousel-control-next {
        left: -3rem;
        right: auto;
        background: linear-gradient(90deg, #E6E7E8 0%, rgba(255,255,255,1) 100%);
    }

    .carousel-item.d-lg-flex, .carousel-item.d-md-flex {
        display: none !important;
        background: #fff;
    }

        .carousel-item.d-lg-flex.active, .d-lg-flex.carousel-item-next, .d-lg-flex.carousel-item-prev, .carousel-item.d-md-flex.active, .d-md-flex.carousel-item-next, .d-md-flex.carousel-item-prev {
            display: flex !important;
        }

    #carouselNews .carousel-item-next:not(.carousel-item-start),
    #carouselNews .carousel-item-end.active {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0) !important;
    }

    #carouselNews .carousel-item-prev:not(.carousel-item-end),
    #carouselNews .carousel-item-start.active {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0) !important;
    }

    #carouselServCat .carousel-item-next:not(.carousel-item-start),
    #carouselServCat .carousel-item-end.active {
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0) !important;
    }

    #carouselServCat .carousel-item-prev:not(.carousel-item-end),
    #carouselServCat .carousel-item-start.active {
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0) !important;
    }

    #twittersec-slider {
        height: auto !important;
    }
}

@media (max-width:1200px) and (min-width: 991px) {
    .container {
        max-width: 100% !important;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
}

@media (max-width:1500px) and (min-width: 991px) {
    #carouselslider .carousel-item {
        padding-right: 150px;
    }
}

@media (max-width:990px) and (min-width: 768px) {
    .container {
        max-width: 100% !important;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    #important_links img {
        width: 40px;
        margin: 0.5rem !important;
    }

    div.aboutsection-inner, div.customer-service {
        margin: 0rem !important;
    }

    div.customer-service {
        padding-bottom: 15px;
    }

    footer .col-12.col-md-4 {
        width: 50%;
    }
}

@media (max-width: 991px) {
    .sticky {
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        height: 77px;
        animation-duration: 1s;
        transition: all ease-in-out .5s;
        z-index: 99;
    }

        .sticky .fixedLinks {
            display: none;
        }

    .mainnav-logo > a > img {
        height: 45px;
        width: 153px;
    }

    .userway_buttons_wrapper {
        bottom: 35px !important;
    }

    .grecaptcha-badge { /*pointer-events: none; transform: scale(.4); margin: 35px;*/
        display: none !important;
    }

    .news-image-sm {
        min-height: 225px;
    }

    #carouselNews .carousel-item .text-black.text-opacity-75 {
        line-height: 1.2;
        height: 58px;
    }

    #carouselNews {
        padding-bottom: 50px;
    }

    html[dir=rtl] #carouselNews .carousel-control-prev, html[dir=rtl] #carouselNews .carousel-control-next {
        right: 50%;
        bottom: 0;
        top: auto;
        margin-right: -40px;
    }

    html[dir=rtl] #carouselNews .carousel-control-next {
        margin-right: 0;
        background: linear-gradient(90deg, #E6E7E8 0%, rgba(255,255,255,1) 100%);
    }

    html[dir=ltr] #carouselNews .carousel-control-prev, html[dir=ltr] #carouselNews .carousel-control-next {
        left: 50%;
        bottom: 0;
        top: auto;
        margin-left: -42px;
    }

    html[dir=ltr] #carouselNews .carousel-control-next {
        margin-left: 0;
        background: linear-gradient(90deg, #E6E7E8 0%, rgba(255,255,255,1) 100%);
    }

    #carouselslider .carousel-item {
        height: 219px;
        aspect-ratio: unset !important;
    }

    .fixedLinks {
        font-size: 14px;
    }

    .navbarSection {
        background-size: auto;
    }

    .mainnav {
        box-shadow: inset 0 -4px 0 rgb(0 0 0 / 10%);
        background-size: cover;
    }

    .aboutsection-inner, .customer-service {
        margin: 1.5rem !important;
    }

    .twittersec {
        padding: 1.5rem;
    }

    .youtube-section {
        min-height: 300px;
        box-shadow: inset 0 0 60px rgb(0 0 0 / 30%);
    }

    .services-catalog {
        width: 42px;
        overflow: hidden;
        white-space: nowrap;
        left: 6px;
        bottom: 75px;
    }

    .fixedLinks {
        padding: 8px 6px 0 !important;
        margin-bottom: 4px;
    }

    div.fixedLinks > a {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .dfwp-item {
        width: 100%;
    }

    .dfwp-list {
        margin: 0 !important;
    }

    .btnsService .link {
        padding: 0.55rem 0.6rem;
    }

    #navbarCollapse, .mainnav-links ul.navbar, .mainnav-links ul.navbar li {
        width: 100% !important;
    }

    .sm-w100 {
        width: 100%;
    }

    .map-popover .popover-body {
        width: 100% !important;
    }

    .mapSvg {
        visibility: hidden;
        width: 1px;
        height: 1px;
    }

    #twittersec-slider .carousel-control-prev, #twittersec-slider .carousel-control-next {
        bottom: 0;
    }

    .link-item > span {
        font-size: 12px;
        padding: 4px 12px !important;
        min-width: auto !important;
    }

    /*#navbarCollapse {
            margin-bottom: 12px;
        }

        .navbar-toggler {
            border-color: rgba(255,255,255,.2);
        }

        .navbar-toggler-icon {
            filter: invert(1) grayscale(100);
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .navbar-toggler:hover {
            background: rgba(0,0,0,.1);
            border-color: rgba(0,0,0,.2);
        }*/

    label.navbar-toggler {
        width: 44px;
        height: 44px;
        direction: ltr;
        padding: 10px;
        z-index: 999;
        display: flex;
        flex-direction: column;
        border: none;
    }

        label.navbar-toggler span {
            background: #ffffff;
            border-radius: 10px;
            height: 2px;
            margin: 3px 0;
            transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
            position: relative;
            z-index: 1;
        }

            label.navbar-toggler span:nth-of-type(1) {
                width: 65%;
            }

            label.navbar-toggler span:nth-of-type(2) {
                width: 100%;
            }

            label.navbar-toggler span:nth-of-type(3) {
                width: 75%;
            }

        label.navbar-toggler input[type="checkbox"] {
            display: none;
        }

        label.navbar-toggler:not(.collapsed) span:nth-of-type(1) {
            transform-origin: bottom;
            transform: rotatez(45deg) translate(3px,3px);
        }

        label.navbar-toggler:not(.collapsed) span:nth-of-type(2) {
            transform-origin: top;
            transform: rotatez(-45deg)
        }

        label.navbar-toggler:not(.collapsed) span:nth-of-type(3) {
            Atransform-origin: bottom;
            width: 50%;
            transform: translate(10px,-4px) rotatez(45deg);
        }

    .mainnav-links ul.navbar li.dropmenu .link-children {
        position: relative;
        top: 14px !important;
        height: 0;
    }

    .mainnav-links ul.navbar li.dropmenu:hover .link-children {
        height: auto;
    }

    .divimage {
        height: auto;
    }

    .carousel-item .d-flex > .container {
        width: 80%;
    }

    .info.basic .info-item .title {
        min-width: 50%;
    }

    #carouselslider .SliderTube iframe {
        aspect-ratio: 10 / 9;
    }
}

@media (max-width: 450px) {
    .LnkGApp, .LnkAApp { /*width: 47%;*/
        max-width: 180px;
        padding: 1px 0;
        text-align: center;
    }

        .LnkGApp svg, .LnkAApp svg {
            width: 150px;
            height: 41px;
        }

    .mainnav {
        box-shadow: none;
    }

        .mainnav a {
            min-width: auto;
        }

    .fixedLinks {
        padding: 0px !important;
        width: 100%;
        background: none;
        overflow: hidden;
    }

    div.fixedLinks > a {
        font-size: 13.5px;
        width: 50%;
        float: right;
        text-align: center;
        margin: 0 0 3px !important;
        padding: 6px !important;
        background: linear-gradient(rgba(255,255,255,25%), rgba(255,255,255,10%));
        border: 1px solid rgba(255,255,255,5%) !important;
        box-shadow: 0 3px 3px rgba(0,0,0,.05);
        border-radius: 0 100px 100px 0;
        text-shadow: rgba(0,0,0,.07) 1px 1px 1px;
        transition: all ease-in-out .5s;
    }

        div.fixedLinks > a + a {
            border-radius: 100px 0 0 100px;
            border-right-color: rgba(0,0,0,.1) !important;
        }

        div.fixedLinks > a:hover {
            background: linear-gradient(rgba(255,255,255,5%), rgba(255,255,255,30%));
        }

    .l-contentPages .sectorListing li {
        display: inline-block;
        width: calc((100%) - 2.5px);
    }
}

/* Employment career form*/
.boxSlider {
    border: 1px solid #eeeeee;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .05);
    border-radius: 8px;
    padding: 30px;
}

.blue {
    color: var(--bs-blue) !important;
}

.stepTabs li.nav-item {
    list-style: none;
    position: relative;
    min-width: 80px;
    margin: 0 5px;
}

.stepTabs .nav-link {
    text-indent: -99999em;
    display: flex;
}

    .stepTabs .nav-link::before {
        content: "";
        background-color: #F3F8FC;
        border-radius: 8px;
        display: inline-block;
        width: 100%;
        height: 8px;
        position: absolute;
        z-index: 999;
    }

    .stepTabs .nav-link.active::before {
        background-color: var(--bs-blue);
    }

.divided-title {
    padding: 8px 8px;
    font-weight: bold;
    font-size: 18px;
    color: var(--bs-blue);
    margin: 5px 0 15px;
    background: var(--bs-gray-100);
    position: relative;
    border-radius: 3px;
}

    .divided-title::before {
        content: "";
        width: 6px;
        height: 100%;
        background: var(--bs-blue);
        position: absolute;
        border-radius: 10px;
        top: 0;
        margin-inline-start: -10px;
    }

    .divided-title span {
        display: inline-block;
        width: 22px;
        line-height: 32px;
        text-align: end;
        border-radius: 100%;
        font-weight: bold;
        color: var(--bs-blue);
        margin: 0;
        padding: 0 20px 0 14px;
    }

.stepTabs label {
    font-weight: bold;
    font-size: 14px;
}

.stepTabs .form-control, .stepTabs input.form-control, .stepTabs .ui-selectmenu-button.ui-button {
    box-shadow: inset 0 10px 10px rgba(0,0,0,.02), 0 1px 5px rgba(0,0,0,.03) !important;
    border: 1px solid #E5E5E5 !important;
    color: #555 !important;
    font-size: 15px !important;
    background-color: #fff;
    padding: 0.64rem 0.75rem;
}

    .stepTabs .form-control::placeholder {
        opacity: 0.4;
    }

    .stepTabs .form-control.upload::placeholder {
        opacity: 1;
        color: var(--bs-blue);
    }

    .stepTabs .form-control.upload {
        box-shadow: 0 0 !important;
        border: 0 none !important;
    }

.mandatory::after {
    content: " *";
    color: red;
    font-size: 1.2em;
    line-height: 1em;
}

.stepTabs select.form-control, .stepTabs .ui-selectmenu-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left .75rem center;
    background-size: 16px 12px;
}

.checkcontainer input, .checktab input, .appointment-acc-type input {
    position: absolute;
    visibility: hidden;
}

    .checkcontainer input + label, .appointment-acc-type input + label {
        cursor: pointer;
    }

        .checkcontainer input + label::before, .appointment-acc-type input + label::before {
            transition: all .5s ease-in-out;
            font-size: 16px;
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 22px;
            border: 1px solid #ccc;
            content: "\00a0";
            color: white;
            background-clip: padding-box;
            background-color: #f9f9f9;
            text-align: center;
            border-radius: 100%;
            margin: 0 0 0 0.5em;
            font-family: FontAwesome;
            content: "\f00c";
        }

    .checkcontainer input:checked + label::before, .appointment-acc-type input:checked + label::before {
        background-color: var(--bs-green);
        border: 2px solid var(--bs-green);
        box-shadow: inset 0 0 3px 2px var(--bs-green);
    }

label.browse {
    text-indent: -200px;
    font-size: 0.01rem;
    overflow: hidden;
    padding: 1px;
    padding-right: 1px;
    padding-left: 1px;
    /* background: var(--bs-green);
    border-color: var(--bs-green); */
    color: #fff;
    line-height: 1;
    width: 85px;
}

    label.browse::after {
        content: "\f0ee";
        font: normal normal normal 18px/1 FontAwesome;
        width: 50px;
        position: absolute;
        left: 17px;
        top: 13px;
        text-indent: 0;
    }

.attached-files {
    background-color: var(--bs-blue);
    background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9));
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 3px 3px rgb(0 0 0 / 5%);
    border-radius: 8px;
    margin: 0.1rem;
    padding: 1rem;
}

.fu, input.fu {
    height: 0px !important;
    opacity: 0;
}

span.reg-val[style*="inline"] {
    display: inline-block !Important;
    font-size: 0.89em;
}

.form-horizontal .form-group {
    margin-right: 15px !important;
    margin-left: 0px !important;
}

.clearUpload {
    z-index: 3;
    padding: 6px 4px 0;
    /* font-size: 1.3em; */
    color: lightgray;
    border-radius: 0px 5px 5px 0px;
    /*width: 36.5px;*/
    min-height: 36.5px;
    line-height: 2;
    text-align: center;
    display: block;
    background-color: #f4f6f9;
    padding-right: 16px !important;
    padding-left: 16px !important;
    border: 1px solid #e5e5e5 !important;
}

    .clearUpload:hover {
        color: #a94442;
        background-color: #d19c9c;
        opacity: 0.7;
    }

/*confirmation GDA*/

.Confirmation .modal-header, .Confirmation .modal-footer {
    background-color: #EBF4FE;
}

.confirmation-close {
    opacity: 0.2 !important;
}

.btn-default {
    background: #fff;
}
/* added by Tarek */
.btn-secondary {
    background: #fff;
    border: solid 1px var(--bs-blue);
    color: var(--bs-blue) !important;
}
/* added by Tarek */

/*fixed sticky header GDA*/

.stickyLogo {
    display: none;
}

    .stickyLogo img {
        width: 42px;
        margin-top: -11px;
    }

@media (min-width: 992px) {
    .sticky {
        position: fixed;
        right: 0;
        left: 0;
        top: -90px;
        animation-duration: 1s;
        transition: all ease-in-out .5s;
        z-index: 2;
    }

        .sticky .div-header {
            margin-top: 0 !important;
        }

        .sticky .stickyLogo {
            display: inline-block;
        }

        .sticky .change-position {
            position: relative;
            top: 70px;
            transition: all ease-in-out .5s;
        }

        .sticky .fixedLinks {
            display: none;
        }
}

/*selected item header GDA*/
.activenav, .mainnav-links ul.navbar li:hover {
    background-color: rgba(0,0,0,.1);
    border-radius: 14px;
}

/*Update Panel Loader*/
.modalLoader {
    background: rgba(0,0,0,0.75);
    max-width: 100%;
    top: 0;
    z-index: 99999;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.centerLoader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
}

.eng-grid tr {
    font-size: 0.8rem;
}
    /* added by Tarek */

    .eng-grid tr:first-child {
        background-color: var(--bs-blue);
        color: #fff;
        font-size: 0.75rem;
    }
/* added by Tarek */

.hideupload {
    opacity: 0;
    position: relative;
    height: 100px;
    border-radius: 1px !important;
}

.styleupload {
    background-image: url(../images/upload.svg);
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 3px 3px rgb(0 0 0 / 5%);
    border-radius: 8px;
    margin: 0.1rem;
    padding: 1rem;
    background-color: #f3f8fc;
}
/* added by Tarek */

/* radio style by Tarek */
input[type="radio"] {
    appearance: none;
    background-color: #eee;
    margin: 0.5rem;
    font: inherit;
    color: currentColor;
    width: 1.25em;
    height: 1.25em;
    border: 0.1em solid #aaa;
    border-radius: 50%;
}

    input[type="radio"]:checked {
        background-color: #2CBC9D;
        background-image: url(../images/check.svg);
        background-repeat: no-repeat;
        background-position: center;
        border: 0.1em solid #26A187;
    }

/* Greeting Cards Carousel*/

.boxSlider {
    border: 1px solid #eeeeee;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .05);
    border-radius: 8px;
    padding: 30px;
}

.cardSelect a {
    position: relative;
    display: inline-block
}

.cardSelect .choseImg .tripartite img {
    box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--bs-blue);
}

.cardSelect .choseImg .tripartite::before {
    content: " ";
    width: 20% !important;
    height: 20% !important;
    position: absolute;
    background: url("../images/select-Card.svg") no-repeat center center;
    display: inline-block;
    background-size: 60%;
}

.only-one-card {
    margin: 0 auto !important;
    float: none !important;
}

#carouselExample .carousel-control-prev, #carouselExample.carousel-control-next {
    background-color: #c6c6c6;
}

.cardSelect .carousel-item {
    width: 48%;
    cursor: pointer;
    margin: 0.5rem;
}

.bgBlu {
    background-color: #F2F7FA;
}

@media (max-width: 545px) {
    .p-sm-0 {
        padding: 0;
    }

    .boxSlider {
        padding: 0px;
        border: 0 none;
        box-shadow: none;
        align-items: center;
    }

    .cardSelect .carousel-item {
        width: 90%;
    }

    .carousel-edges {
        overflow: hidden;
    }

        .carousel-edges .carousel-indicators {
            margin-right: 10%;
            margin-left: 10%;
        }

        .carousel-edges .carousel-control-prev,
        .carousel-edges .carousel-control-next {
            width: 10%;
            z-index: 11;
            background-color: #D2CFCF;
        }

        .carousel-edges .carousel-inner {
            width: 240%;
            left: -10%;
        }

        .carousel-edges .carousel-item-next:not(.carousel-item-start),
        .carousel-edges .carousel-item-end.active {
            -webkit-transform: translate3d(33%, 0, 0);
            transform: translate3d(33%, 0, 0);
        }

        .carousel-edges .carousel-item-prev:not(.carousel-item-end),
        .carousel-edges .carousel-item-start.active {
            -webkit-transform: translate3d(-33%, 0, 0);
            transform: translate3d(-33%, 0, 0);
        }

        .carousel-edges .tripartite, .carousel-edges .active .tripartite {
            /* float: left; */
            position: relative;
            width: 33.33333333%;
        }

            .carousel-edges .tripartite img {
                width: 94% !important;
                margin: 0 auto;
            }
}

.carousel-edges {
    overflow: hidden;
}

    .carousel-edges .carousel-indicators {
        margin-right: 10%;
        margin-left: 10%;
    }

    .carousel-edges .carousel-control-prev,
    .carousel-edges .carousel-control-next {
        width: 10%;
        z-index: 11;
    }

    .carousel-edges .carousel-inner {
        width: 240%;
        left: -70%;
    }

    .carousel-edges .carousel-item-next:not(.carousel-item-start),
    .carousel-edges .carousel-item-end.active {
        -webkit-transform: translate3d(33%, 0, 0);
        transform: translate3d(33%, 0, 0);
    }

    .carousel-edges .carousel-item-prev:not(.carousel-item-end),
    .carousel-edges .carousel-item-start.active {
        -webkit-transform: translate3d(-33%, 0, 0);
        transform: translate3d(-33%, 0, 0);
    }

    .carousel-edges .tripartite {
        float: left;
        position: relative;
        width: 100%;
    }

        .carousel-edges .tripartite img {
            border-left: 1.3rem solid #fff;
        }

.carousel-item input[type="radio"] {
    display: none !important;
}

.rbtnlSelectCard > label {
}

.cardSelect .carousel-item {
    display: block !important;
}

/*Home Page Enhacement*/
.icon-link {
    background: url(../images/DotsBg.svg) no-repeat center;
}

.Div-Connections {
    display: none !important;
}

/*Popup Search*/
.searchPopup .modal-header .btn-close {
    border: 0 none !important;
}

.searchPopup ::placeholder {
    color: #CCC;
}

.searchPopup .modal-footer {
    background-color: var(--bs-primary-50);
}

.searchIcon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 40%;
    top: -48px;
    padding-top: 30px;
    background-color: var(--bs-primary);
}

.searchInput input.form-control, .searchInput input.btn, .searchInput select {
    border-radius: 5px;
    border-color: #E5E5E5 !important;
}
/*End Popup Search*/

.groupSelect .searchInput:first-child select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.groupSelect .searchInput:last-child select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.highlight {
    background-color: yellow;
}

.btn.focus {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

    .btn.focus:focus, .btn.focus:focus-visible {
        outline: var(--bs-btn-hover-border-color) auto 2px !important;
        outline-offset: 3px;
        border: 2px solid var(--bs-btn-hover-border-color);
        color: #fff !important;
        box-shadow: 0 0 2px 2px var(--bs-btn-hover-border-color);
    }

@supports not selector(:focus-visible) {
    .btn.focus:focus {
        /* Fallback for browsers without :focus-visible support */
        outline: var(--bs-btn-hover-border-color) auto 2px !important;
        outline-offset: -2px;
    }
}

a {
    --bs-btn-hover-border-color: var(--bs-blue);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-block: none;
    border-inline: none;
}

    a.focus {
        --bs-btn-hover-border-color: var(--bs-blue);
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border-block: none;
        border-inline: none;
    }

    .Qcard a:focus-visible,.Qcard a:focus,.Qcard a:hover,.Qcard a:active {
        border-radius: 10px;
    }

    .Qcard a:focus-visible {
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    }
        a.focus:focus, a.focus:focus-visible, .fixedLinks a.focus:focus,
        .fixedLinks a.focus:focus-visible, .langsite.focus:focus, .langsite.focus:focus-visible, .Qcarddrop a.focus:focus, .Qcarddrop a.focus:focus-visible {
            outline: var(--bs-btn-hover-border-color) auto 2px !important;
            outline-offset: -2px;
            border: 2px solid var(--bs-btn-hover-border-color);
            box-shadow: 0 0 2px 2px var(--bs-btn-hover-border-color);
        }

.Qcarddrop a.focus:focus, .Qcarddrop a.focus:focus-visible {
    border-radius: 10px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

@supports not selector(:focus-visible) {
    a.focus {
	/* Fallback for browsers without :focus-visible support */
		outline: var(--bs-btn-hover-border-color) auto 2px !important; 
        outline-offset: -2px; 
    }
}

a:focus-visible, .QCard a:focus-visible {
    outline: var(--bs-btn-hover-border-color) auto 2px;
    outline-offset: -2px;
    border: 2px solid var(--bs-btn-hover-border-color);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

a[role="button"]:focus, select:focus, iframe:focus, input[type="submit"]:focus, button.owl-dot:focus {
    /* outline: var(--bs-btn-hover-border-color) auto 2px !important; */
    /* border-radius: 4px !important; */
}
.ms-rteTable-1 tr.ms-rteTableOddRow-1{background-color:#f9f9f9;}
input[type="submit"]:focus, button.owl-dot:focus {
    border: 4px solid #0072c6 !important;
}

.carousel-control-next:focus, .carousel-control-prev:focus {
    outline: var(--bs-btn-hover-border-color) auto 2px !important;
    border-radius: 4px;
}

.ms-accessible.ms-acc-button:focus {
    outline:1px solid rgba(255,255,255,0) !important; /* Example: Add a blue focus outline */
    opacity: 1 !important; /* Ensure visibility */
    visibility: visible;
}
/*Sevice Details page*/
.targetGroup .col h3 {
    color: #526C7C;
    line-height: initial;
}

    .targetGroup .col h3 i {
        display: block;
        font-size: 4em;
    }

    .targetGroup .col h3 .icon-commercial-1 {
        color: #009B9E !important;
    }

    .targetGroup .col h3 .icon-residential {
        color: var(--bs-blue) !important;
    }

.imageTop {
    height: max-content;
}

.sidebarRating {
    border: 1px solid #9BD2F3;
}

.sidebarBorder {
    border: 1px solid #9BD2F3;
}

.sidebarRating .servriceDetails {
    justify-content: flex-start;
    display: flex;
    margin: 4px 0;
}

.servriceDetails .fa-face-smile {
    display: none;
}

.sidebarRating .servriceDetails .fa-face-smile {
    display: inline-block;
}

.underline-tabs .nav-tabs {
    border-bottom: 2px solid #B4D7FF;
}

.underline-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    color: var(--bs-gray);
    transition: all 0.3s ease;
}

    .underline-tabs .nav-link:hover {
        border-bottom-color: var(--bs-blue);
        color: var(--bs-blue);
        border-width: 3px;
    }

    .underline-tabs .nav-link.active {
        border-bottom-color: var(--bs-blue);
        color: var(--bs-blue);
        border-width: 3px;
    }

.imgHeight {
    height: fit-content;
}

/* Step Counter Styling */
.listServicesStep ol {
    counter-reset: step-counter;
    list-style: none;
    padding: 0 20px;
    margin-top: 35px;
}

    .listServicesStep ol li {
        counter-increment: step-counter;
        position: relative;
        padding: 20px 20px;
        background: #FFF;
        border-radius: 10px;
        border: 1px solid #B4D7FF;
        margin-bottom: 33px;
        width: 85%;
        min-height: 90px;
        position: relative;
        right: 85px;
        display: flex;
        align-items: center;
    }

        /* Step Number Styling */
        .listServicesStep ol li::before {
            content: counter(step-counter, decimal-leading-zero);
            width: 88px;
            height: 88px;
            background: url(../images/bgListNumber.svg) no-repeat right top;
            color: #FFF;
            font-size: 24px;
            font-weight: bold;
            border-radius: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: -107px;
            top: 29px;
            transform: translateY(-35%);
            z-index: 1;
            /* transform: rotate(45deg); */
        }

        .listServicesStep ol li:not(:last-child)::after {
            content: "";
            position: absolute;
            right: -83px;
            top: 65px;
            height: 100%;
            width: 4px;
            opacity: 0.3;
            background: repeating-linear-gradient( to bottom, var(--bs-blue), var(--bs-blue) 5px, transparent 5px, transparent 10px );
        }

        .listServicesStep ol li img, ol li i {
            float: inline-start;
            margin: 10px 20px;
        }

        .listServicesStep ol li:nth-child(2n) {
            margin-right: 3%;
            background-color: #F0F7FF;
            width: 70%;
        }

            .listServicesStep ol li:nth-child(2n):not(:last-child)::after {
                right: -60px;
            }

.linkService a, .sidebarBorder a {
    display: inline-block;
    padding: 6px 0;
}

html[dir=ltr] .listServicesStep ol li {
    right: initial;
    left: 85px;
}
    /*html[dir=ltr] ol li::before {right:initial; left:-94px; }*/
    html[dir=ltr] .listServicesStep ol li::before {
        right: initial;
        left: -100px;
    }

    html[dir=ltr] .listServicesStep ol li:nth-child(2n) {
        margin: 0 0 30px 4%;
    }

    html[dir=ltr] .listServicesStep ol li:not(:last-child)::after {
        right: initial;
        left: -68px;
    }

    html[dir=ltr] .listServicesStep ol li:nth-child(2n):not(:last-child)::after {
        left: -48px;
    }

@media (max-width: 991px) {
    .listServicesStep ol {
        padding: 0;
    }

        .listServicesStep ol li {
            width: 75%;
        }

    html[dir=ltr] .listServicesStep ol li:nth-child(2n) {
        margin: 0 0 30px 3%;
    }

    .listServicesStep ol li::before {
        content: counter(step-counter, decimal-leading-zero);
        width: 65px;
        height: 65px;
    }

    .sidebarRating .servriceDetails {
        display: block;
    }

    .sidebarRating .rate-info {
        margin-top: 5px;
    }
}

/*Countdown counter */

#flip-clock {
    text-align: center;
    perspective: 400px;
    margin: 0px auto 16px;
}

    #flip-clock *,
    #flip-clock *:before,
    #flip-clock *:after {
        box-sizing: border-box;
    }

.flip-clock__piece {
    display: inline-block;
    margin: 0 0px;
}

.flip-clock__slot {
    font-size: 1em;
    padding-top: 10px;
    color: var(--bs-blue);
}

#flip-clock .separator {
    font-size: 2em;
    display: inline-block;
    color: var(--bs-blue);
    margin: 0 10px;
    vertical-align: top;
    margin-top: 4%;
}

#flip-clock .card {
    display: block;
    position: relative;
    padding-bottom: 0.72em;
    font-size: 5em;
    line-height: 0.95;
    margin-bottom: 0px;
}

.card__top,
.card__bottom,
.card__back::before,
.card__back::after {
    display: block;
    height: 0.72em;
    color: #fff;
    font-weight: normal;
    background: var(--bs-blue);
    padding: 0.25em 0.25em;
    border-radius: 0.15em;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    width: 1.8em;
    transform: translateZ(0);
}

.card__bottom {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    border-top: solid 1px #fff;
    background: var(--bs-blue);
    border-radius: 0.15em;
    pointer-events: none;
    overflow: hidden;
}

    .card__bottom::after {
        display: block;
        margin-top: -0.72em;
    }

    .card__back::before,
    .card__bottom::after {
        content: attr(data-value);
    }

.card__back {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0%;
    pointer-events: none;
}

    .card__back::before {
        position: relative;
        z-index: -1;
        overflow: hidden;
    }

.flip .card__back::before {
    -webkit-animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
    animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    transform-origin: center bottom;
}

.flip .card__back .card__bottom {
    transform-origin: center top;
    animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
    -webkit-animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

@-webkit-keyframes flipTop {
    0% {
        transform: rotateX(0deg);
        z-index: 2;
    }

    99% {
        opacity: 0.99;
    }

    100% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
}

@keyframes flipTop {
    0% {
        transform: rotateX(0deg);
        z-index: 2;
    }

    99% {
        opacity: 0.99;
    }

    100% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
}

@-webkit-keyframes flipBottom {
    0%, 50% {
        z-index: -1;
        transform: rotateX(90deg);
        opacity: 0;
    }

    51% {
        opacity: 0.99;
    }

    100% {
        opacity: 0.99;
        transform: rotateX(0deg);
        z-index: 5;
    }
}

@keyframes flipBottom {
    0%, 50% {
        z-index: -1;
        transform: rotateX(90deg);
        opacity: 0;
    }

    51% {
        opacity: 0.99;
    }

    100% {
        opacity: 0.99;
        transform: rotateX(0deg);
        z-index: 5;
    }
}

@media screen and (max-width: 991px) {
    #flip-clock .card {
        font-size: 2em;
    }

    .flip-clock__slot, #flip-clock .separator {
        font-size: 1em;
    }
}
/*End Countdown counter */

#carouselslider .carousel-control-prev,
#carouselslider .carousel-control-next {
    display: none;
}

#carouselslider:has(.carousel-item + .carousel-item)
.carousel-control-prev,
#carouselslider:has(.carousel-item + .carousel-item)
.carousel-control-next {
    display: block;
}
/*Form */

.field {
    position: relative;
    display: block;
    width: 100%;
}

    .field input, .field select, .field textarea {
        width: 100%;
        padding: 16px 12px 6px 12px;
        border: none;
        border: 2px solid var(--bs-light) !important;
        border-bottom-color: var(--bs-blue) !important;
        /*background: #ffffff;  */
        border-radius: 4px 4px 0 0;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s;
        /*box-sizing: content-box;*/
    }

        .field input:focus, .field select:focus, .field textarea:focus {
            border-bottom: 2px solid #0072c6; /* لون الفوكس */
			outline:var(--bs-btn-hover-border-color) auto 2px !important;
        }

    .field label {
        position: absolute;
        top: 17px;
        font-size: 14px;
        color: #666;
        pointer-events: none;
        transition: 0.2s ease all;
        width: auto;
    }

.listRadio label {
    font-size: 15px;
}

.keyMob {
    position: absolute;
    top: 12px;
    left: 10px;
    direction:ltr;
}
.listRadio .radio-validator {
    clear: both;
}
.listRadio input[type=radio] {
    float: right;
    display: inline-block;
    margin: 0.5rem 0.0rem;
}

.listRadio label {
    width: calc(100% - 50px);
    float: right;
    display: inline-block;
    padding: 0.7% 0 0;
    margin: 0 0.5%;
}

.listRadio br {
    clear: both;
    width: 100%;
    margin: 20px 0;
    display: inline-block;
}


html[dir=ltr] .listRadio label, html[dir=ltr] .listRadio input[type=radio] {
    float: left;
}
html[dir=ltr] .keyMob {
    left: initial;
    right: 10px;
}

html[dir=rtl] .field label {
    right: 12px;
}

html[dir=ltr] .field label {
    left: 12px;
}
.field input:focus + span + label, .field input:focus + label, .field select:focus + span + label, .field textarea:focus + span + label, .field input:not(:placeholder-shown) + span + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + span + label, .field select:valid + span + label{
	top: 4px;
    font-size: 12px;
    color: var(--bs-blue);
}
.field:has(input:focus) label, .field:has(input:not(:placeholder-shown)) label, .field:has(select:focus) label, .field:has(select:not(:placeholder-shown)) label, .field:has(textarea:focus) label, .field:has(textarea:not(:placeholder-shown)) label  {
	top: 4px;
    font-size: 12px;
    color: var(--bs-blue);
}
.confirmationMessage img {
    width: 256px;
    margin: 0 auto;
}

/* End form */