body{
  position: relative !important ;
  background-image: url(../graphics/bk-body.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #1c1a1a;
}

 /*  Fonts  */
.font-cairo {font-family: 'Cairo', sans-serif !important; letter-spacing: -1px !important;}
.font-amiri {font-family: 'Amiri', serif !important; letter-spacing: 0 !important;}
.font-openSans {font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important; }

@font-face {
    font-family: aref-regular;
    src: url('../webfonts/aref-regular.ttf');
    }


/* color over rides */
:root {
    --vlGrey: #EBEBEB;
    --lGrey: #C3C3C3;
    --mGrey: #454040;
    --dGrey: #202020;
		--main-color: #a20014;
		--support-color: #eeba00;
}

/* coloring */
.csVLG { color: var(--vlGrey);}
.csLG { color: var(--lGrey);}
.csMG {  color: var(--mGrey);}
.csDG {  color: var(--dGrey) !important;}
.csM {  color: var(--main-color)!important;}
.csS {  color: var(--support-color);}
.csW {  color: #fff;}

.bgVLG { background-color: var(--vlGrey);}
.bgLG { background-color: var(--lGrey);}
.bgMG {  background-color: var(--mGrey);}
.bgDG {  background-color: var(--dGrey);}
.bgM {  background-color: var(--main-color);}
.bgS {  background-color: var(--support-color);}
.bgW {  background-color: #fff;}


/* .slider {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .slick-slide {
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
   */
  /* SLICK: ARROWS */
  .video-container{
      width: 80%;
      margin: auto;
  }
  .slider{
    margin-bottom: 80px;
    margin-top: 50px;
  }
  .tooltip-container{
    cursor: pointer;
  }
  .slick-custom-arrow {
    position: absolute;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 100;
    padding: 20px 16px;
    background-color: #fff;
    color: #000;
  }
  .slick-custom-arrow:hover {
    cursor: pointer;
    background-color: #000;
    color: #fff;
  }
  .slick-custom-arrow-right {
    right: 0;
    top: 50%;
  }
  .slick-custom-arrow-left {
    left: 0;
    top: 50%;
  }
  .slik-images{
      width: 200px;
      height: 200px;
      object-fit: cover;
  }
  
section {
    padding: 80px 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: #ffffff00;
}

.tooltiptext {
    visibility: hidden;
    font-size: 17px;
    width: 100%;
    right: 0;
    top: 115px;
    /* transform: translate(-50%,-50%); */
    margin: auto;
    background-color: #2d2d2d;
    color: #ffffff;
    text-align: right;
    border-radius: 6px;
    padding: 14px 14px;
    position: absolute;
    z-index: 1;
    transition: all .2s;
    cursor: pointer;
}
.lead-tooltip{
    color: white !important;
    font-size: 15px;
}
.pos{
  position: relative;
  margin-top: 40px;
}
.logo2 {
    position: absolute;
    left: 25px;
    top: 25px;
    z-index: 99999999999 !important;
}
.logopic {
    width: 115px;
}
.lyar-full{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient( #02020282,#02020282, #02020282 ,#02020282, #02020282);
}
.lyar-full02{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient( #020202c9,#020202c9, #020202c9 ,#020202c9, #020202c9);
}
.h3-head-sec01{
    margin-top: 20px;
}
a{
    color: #a20014 !important;
}
a:hover{
    color: #630611 !important;
}
#mob{
    min-height: 100vh;
}
.lead {
    font-weight: 500;
    font-size: 19px;
    line-height: 1.68421053em;
}
/* tags */
.img-rounded {  border-radius: 12px 12px 0 0; }
.img-desc-rounded {border-radius: 0 0 12px 12px; background-color: var(--vlGrey); height: 2.5em;padding-top: 0.25em;}

.close:focus, .close:hover {
  color: #fff;
}
.link-img{
    width: 26px;
}
.modal-content {
    background-color: #fff0 !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0) !important;
}
.modal-header{
    border-bottom: 1px solid #e9ecef00 !important;
}
.close{
    text-shadow: 0 1px 0 #fff0;
}
/*grids */
.reverse {
  display: grid;
  width: 100%;
  grid-gap: 2em;
  grid-template-columns: 4fr 8fr;
  grid-template-areas: "content-right content-left";  }

  .content-left  {grid-area: content-left; }
  .content-right {grid-area: content-right; }

    .scrolldownImg {width: 45px; }
    .bold {font-weight: bold;}

    .background-overlay:before{
        background-color: #000000b8;
    }

    /* addthis */

        .at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg>span {
            background-color: var(--main-color)!important;
        }
        .at-expanding-share-button[data-position=bottom-left] {
            left: 10px;
        }
    /* addthis */

        .at-expanding-share-button-mobile-container .at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg>span {
            background-color:   #71010f!important;
            color: #71010f!important;
        }
        .bk-red{
           background-color: #a20014;
           padding-top: 0px !important;
           padding-bottom: 30px!important;
        }
        #section02{
            background-image: url(../graphics/Abdulrahman\ 3.jpeg) ;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 600px;
        }
   
        #section09{
            background-image: url(../graphics/sec09.jpg) ;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 600px;
        }
        #section1101{
            background-image: url(../graphics/sec11.jpg) ;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 600px;
        }
        #section11{
            background-color: var(--main-color);
            padding-top: 20px !important;
            padding-bottom: 30px!important;
        }
        .headh3-first{
            margin-top: 0px;
        }
        .des06-01{
            font-size: 17px;
            font-weight: 600;
            width: 70%;
            line-height: 26px;
             margin-top: 10px;
        }
        .des06-02{
            margin-top: 12px;
        }
        /* inpho01-container */
                .inpho01-container{
                    display: flex;
                    width: 100%;
                    margin-top: 80px;
                    margin-bottom: 40px;
                    align-items: center;
                    justify-content: center;
                }
                .inpho01-col{
                    width: 33.3%;
                    text-align: -webkit-center;
                }
                .inpho06-row-col01 img{
                    width: 75px;
                    margin-left: 50px;
                }
                .inpho01-chart{
                    width: 200px !important;
                }


                /* inpho-06 */
                    .inpho-06{
                        display: flex;
                        margin-top: 25px;
                    }
                    .inpho-06-b{
                        display: flex;
                        width: 100%;
                        margin-top: 50px;
                        position: relative;
                    }
                    .inpho06-b-col01{
                        width: 20%;
                        background-color: #a20014;
                        margin-left: 20px;
                        display: flex;
                        flex-direction: column;
                        color: white;
                        font-size: 20px;
                        align-items: center;
                        padding-top: 16px;
                        padding-bottom: 16px;
                        border-radius: 4px;
                    }
                    .inpho06-b-col01 .num06{
                        font-size: 65px;
                        margin-top: 35px;
                        font-weight: 300;
                    }
                    .inpho06-b-col01 .des06-b{
                        font-weight: 700;
                    }


                    /* inpho10-container */
                        .inpho10-container{
                            display: flex;
                            width: 100%;
                            margin-top: 70px;
                            margin-bottom: 40px;
                        }
                        .npho10-col01{
                            color: white;
                            width: 40%;
                        }
                        .npho10-col01 .head{
                            background-color: #564c4c;
                            color: white;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 75px;
                            font-size: 20px;
                            font-weight: 500;
                        }
                        .npho10-col02 .head{
                            background-color: #564c4c;
                            color: white;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 75px;
                            font-size: 20px;
                            font-weight: 500;
                        }
                        .npho10-col02{
                            width: 20%;
                            margin-right: 20px;
                            margin-left: 20px;
                            color: white;
                        }
                        .inpho10-content{
                            background-color: #a20014;
                            flex-direction: column;
                            color: white;
                            margin-bottom: 2px;
                            padding: 20px;
                            display: flex;
                            justify-content: center;
                            font-size: 19px;
                            font-weight: 500;
                            height: 100px;
                            align-items: center;
                        }
                        .img-inpho10 img{
                            width: 50px;
                            height: 50px;
                            margin-bottom: 10px;
                        }
                        h3{
                            font-size: 32px;
                            font-weight: 400 !important;
                            margin-top: 50px;
                        }
                        .seat-person-head img{
                            width: 74px;
                            margin-bottom: 15px;
                        }
                        #mob h1{
                            font-size: 50px;
                            font-weight: 500 !important;
                            margin-bottom: 0 !important;
                        }
                        #mob h3 {
                            font-size: 24px;
                            font-weight: 600 !important;
                            margin-bottom: 6px;
                            margin-top: 2px;
                        }
                        .inpho01-col img{
                            width: 65px;
                        }
                        .inpho01-col .num{
                            color: #a3a3a3;
                            font-weight: 300;
                            font-size: 70px;
                            margin-top: 38px;
                            margin-bottom: 14px;
                        }
                        .inpho01-col .des01{
                            color: #1c1a1a;
                        }
                        .inpho01-col .des02{
                            color: #a20014;
                            margin-top: 25px;
                            font-weight: 600;
                        }
                        .des02{
                            color: #a20014;
                            margin-bottom: 45px;
                            font-weight: 600;
                            text-align: right;
                        }
                        .inpjo-p{
                            text-align: center;
                            font-weight: 700;
                            width: 201px;
                            font-size: 17px;
                            line-height: 26px;
                        }


                        /* map section */
                        .all-pin{
                            transition: all .5s;
                            cursor: pointer;
                        }
                        .all-pin:hover{
                            width: 65px !important;
                        }
                        .text-map{
                            background-color: #000000cc;
                            border-radius: 3px;
                            color: white;
                            padding: 4px;
                            font-weight: 600;
                        }
                        #main-map{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) scale(1);
                            min-height: 800px !important;
                        }
                        .map-container{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) scale(1);
                            min-height: 800px !important;
                        }
                        #section03-a{
                            height: 1000px !important;
                        }
                        #pin01{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 178px;
                            margin-left: -55px;
                            width: 55px;
                        }
                        #text-map01{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 220px;
                            margin-left: -55px;
                            width: 81px;
                            font-size: 12px;
                        }
                        #pin02{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 41px;
                            margin-left: -671px;
                            width: 55px;
                        }
                        #text-map02{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 82px;
                            margin-left: -671px;
                            font-size: 12px;
                        }
                        #pin03{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 149px;
                            margin-left: 180px;
                            width: 55px;
                        }
                        #text-map03{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 149px;
                            margin-left: 114px;
                            width: 84px;
                            font-size: 13px;
                            text-align: center;
                            line-height: 19px;
                        }
                        #pin04{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 186px;
                            margin-left: 326px;
                            width: 55px;
                        }
                        #text-map04{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 226px;
                            margin-left: 326px;
                            width: 122px;
                        }
                        #pin05{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 156px;
                            margin-left: 200px;
                            width: 55px;
                        }
                        #text-map05{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 208px;
                            margin-left: 202px;
                            text-align: center;
                            font-size: 12px;
                            width: 73px;
                        }
                        #pin06{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -132px;
                            margin-left: -216px;
                        }
                        #text-map06{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -107px;
                            margin-left: -258px;
                            font-size: 11px;                        
                        }
                        .line-map00{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(28deg);
                            margin-top: -75px;
                            margin-left: -132px;
                            border-bottom: 8px dotted #e71d36;
                            width: 59px;
                            font-size: 20px;
                            font-weight: 500;
                        }
                        .line-map0a{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(28deg);
                            margin-top: -111px;
                            margin-left: -199px;
                            border-bottom: 8px dotted #fff;
                            width: 59px;
                            font-size: 20px;
                            font-weight: 500;
                        }
                        .line-map0b{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(28deg);
                            margin-top: -37px;
                            margin-left: -71px;
                            border-bottom: 8px dotted #fff;
                            width: 59px;
                            font-size: 20px;
                            font-weight: 500;
                        }
                        #pin07{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -66px;
                            margin-left: -100px;
                        }
                        #text-map07{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -46px;
                            margin-left: -135px;                        
                            font-size: 10px;
                        }
                        #pin08{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -103px;
                            margin-left: -159px;
                        }
                        #text-map08{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -71px;
                            margin-left: -201px;
                           font-size: 10px;
                        }
                        #pin09{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: -14px;
                            margin-left: -27px;
                        }
                        #text-map09{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            margin-top: 16px;
                            margin-left: -85px;
                            font-size: 11px;
                            padding: 3px;
                            width: 100px;
                        }

                        .map-inpho-container{
                            border-radius: 3px;
                            top: 50%;
                            right: 63px;
                            transform: translateY(-50%);
                            width: 16%;
                            position: absolute;
                            background-color: #000000cc;
                            z-index: 999;
                            display: flex;
                            justify-content: center;
                            flex-direction: column;
                            align-items: baseline;
                            padding: 30px;
                            margin-top: -21px;
                        }
                        .head-map{
                            color: #e71d36;
                            font-size: 17px;
                            font-weight: 600;
                        }
                        .line-dot{
                            border-bottom: 4px dotted #e71d36;
                            width: 59px;
                            font-size: 20px;
                            font-weight: 500;
                            margin-top: 35px;
                        }
                        .line-dot-white{
                            border-bottom: 4px dotted #fff;
                            width: 59px;
                            font-size: 20px;
                            font-weight: 500;
                            margin-top: 35px;
                        }
                        .st-head .a01{
                            font-size: 17px;
                            font-weight: 600;
                            padding-top: 8px;
                        }
                        .st-head .a03{
                            font-weight: 600;
                            margin-top: 17px;
                            font-size: 14px;
                        }
                        .st-head .a04{
                            font-size: 22px;
                            margin-top: 6px;
                            font-weight: 600;
                        }
                        .head-map-des{
                            color: white;
                        }
                        .video-container{
                            width: 80%;
                            margin: auto;
                            margin-top: 40px;
                            margin-bottom: 40px;
                        }
                        .all-video{
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 55%;
                            margin-left: -120px;
                            position: absolute;
                            background-color: #000000b5;
                        }
                        .activeStory-Nav{
                            width: 60px !important;
                        }
                        .activeStory{
                            position: absolute !important;
                            z-index: 9999 !important;
                        }

                        .video-head-map{
                            font-size: 20px;
                            padding-top: 15px;
                            padding-bottom: 15px;
                            text-align: center;
                            color: white;
                            font-weight: 600;
                        }
                        .video-container-map{
                            margin: auto;
                            width: 90%;
                            padding-bottom: 25px;
                        }
                        .close-icon img{
                            width: 40px;
                            height: 40px;
                            padding-top: 10px;
                            cursor: pointer;
                        }
                        .pulse2{
                            animation: pulse2 .7s infinite;
                            animation-direction: alternate;
                            -webkit-animation-name: pulse2;
                            animation-name: pulse2;
                          }
                          @-webkit-keyframes pulse2 {
                            0% {
                                -webkit-filter: drop-shadow(2px 4px 6px #e71d36);
                            }
                            50% {
                                -webkit-filter: drop-shadow(2px 4px 6px #e71d3574);
                            }
                            100% {
                                -webkit-filter: drop-shadow(2px 4px 6px #e71d3531);
                            }
                          }
                      
                          @keyframes pulse2 {
                            0% {
                                filter: drop-shadow(2px 4px 6px #e71d36);
                            }
                            50% {
                                filter: drop-shadow(2px 4px 6px #e71d3574);
                            }
                            100% {
                                filter: drop-shadow(2px 4px 6px #e71d3531);
                            }
                          }

      @media (max-width:1300px) {
        .map-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(.7);
            min-height: 800px !important;
        }
        
      }

      @media (max-width:900px) {
        .map-inpho-container {
            border-radius: 3px;
            top: 0;
            right: 0;
            transform: unset;
            width: 100%;
            position: absolute;
            background-color: #000000cc;
            z-index: 999;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: baseline;
            padding: 10px;
            margin-top: -20px;
            padding-top: 29px;
        }
        .map-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(.7);
            min-height: 300px !important;
        }
        .all-video {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            margin-left: 0;
            position: absolute;
            background-color: #000000b5;
            margin-top: 10px;
        }
        .close-icon img {
            width: 30px;
            height: 30px;
            padding-top: 10px;
            cursor: pointer;
        }
        
      }


    @media (max-width: 720px) {
        #header-video {display: none;}
        #header-mobile {display: block;}
    }

    @media screen and (max-width: 680px)  {
        #mob h1 {
            font-size: 34px;
            font-weight: 500 !important;
            margin-bottom: 0 !important;
        }
        .seat-person-head img {
            width: 55px;
            margin-bottom: 15px;
        }
        .logopic {
            width: 80px;
        }
        .logo2 {
            position: absolute;
            left: 10px;
            top: 14px;
            z-index: 99999999999 !important;
        }
        #mob h3 {
            font-size: 18px;
            font-weight: 600 !important;
            margin-bottom: 6px;
            margin-top: 2px;
        }
        #mob h4 {
            font-size: 15px;
        }
        .inpho01-container {
            flex-direction: column;
        }
        .inpho01-col {
            width: 100%;
            text-align: -webkit-center;
        }
        .inpho01-col .num {
            color: #a3a3a3;
            font-weight: 300;
            font-size: 55px;
        }
        .inpho01-chart {
            width: 150px !important;
        }
       h3{
            font-size: 25px;
            line-height: 33px;
        }
        .inpho-06 {
            display: flex;
            margin-top: 25px;
            flex-direction: column;
            align-items: center;
        }
        .des06-01 {
            text-align: center;
            font-size: 17px;
            font-weight: 600;
            width: 100%;
            line-height: 26px;
            margin-top: 17px;
        }
        .inpho06-row-col01 img {
            width: 75px;
            margin-left: 0;
        }
        .inpho-06-b {
            display: flex;
            flex-direction: column;
        }
        .inpho06-b-col01 {
            width: 100%;
            margin-bottom: 10px;
        }
        .inpho10-container {
            display: flex;
            flex-direction: column;
        }
        .npho10-col01 {
            color: white;
            width: 100%;
            margin-bottom: 20px;
        }
        .npho10-col02 {
            width: 100%;
            margin-right: 0;
            margin-left: 0;
            color: white;
            margin-bottom: 10px;
        }
        .video-container {
            width: 100%;
            margin: auto;
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .map-inpho-container {
            border-radius: 3px;
            top: 0;
            right: 0;
            transform: unset;
            width: 100%;
            position: absolute;
            background-color: #000000cc;
            z-index: 999;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: baseline;
            padding: 10px;
            margin-top: -20px;
            padding-top: 29px;
        }
        .map-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(.5);
            min-height: 300px !important;
        }
        .all-video {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            margin-left: 0;
            position: absolute;
            background-color: #000000b5;
            margin-top: 10px;
        }
        .close-icon img {
            width: 30px;
            height: 30px;
            padding-top: 10px;
            cursor: pointer;
        }
    }