body{
  background-color: #000000;
}

.sec12-p-note{
  position: absolute;
  color: white;
  bottom: 13px;
  left: 11px;
  width: 300px;
  text-align: right;
  font-weight: 700;
}

/************************************************ loader *******************************************/
        a:not(.btn){
          color: #ffffff;
          font-size: 17px;
        }

        .load__none {
          display: none;
          color:#fff;
        }
        .load__animation{
          border: 5px solid #272727;
          border-top-color: #e50914;
          border-top-style: groove;
          height: 100px;
          width: 100px;
          border-radius: 100%;
          position: relative;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          -webkit-animation: turn 1.5s linear infinite;
          -o-animation: turn 1.5s linear infinite;
          animation: turn 1.5s linear infinite;
        }

        .load {
          position: fixed;
          background-color: black;
          width: 100%;
          height: 100vh;
          display: flex;
          flex-direction: column;
          align-items:center;
          justify-content: center;
          z-index: 999999999999999999999;
          }
          #Load{
            transition: all .7s;
          }

        .load__container {
          position: relative;
        }

        @keyframes turn {
          from {transform: rotate(0deg)}
          to {transform: rotate(360deg)}
        }

        .load__title {
          color: #fff;
          font-size: 2rem;
        }


        @keyframes loadPage {
          0% {
            opacity: 1;
          }
          50% {
            opacity: .5;
          }
          100% {
            opacity: 1;
          }

        }
        .num-st-inside04{
          margin-right: -80px !important;
        }
        .name-st-inside04{
          font-size: 28px !important;
}
    #h1-01{
      font-family: Tajawal-Light;
    }
/************************************************ loader *******************************************/

    .set-blur{
      filter: blur(20px);
    }
    .slides_show{
      display: none;
    }
    p{
      font-family: Tajawal-Light !important;
    }
    .p-sections{
      opacity: 0;
      transform: translateY(-10px);
      font-family: Tajawal-Light;
    }

    .p-none-hidden{
      display: none;
      opacity: 0;
    }
    .p-section{
      font-size: 19px;
      line-height: 35px;  
    }
    .mobile{
      display: none;
    }
    .logo2{
      position: fixed;
      z-index: 999999999;
      margin-top: 25px;
      left: 10px;
      opacity: 0;
      transition: .7s;
    }
    .logo2 img {
      width: 61px;
      filter: drop-shadow(7px 7px 7px #666666d4);
    }




/* ==========================================================================
   progress bar
   ========================================================================== */
      .progress-bar-container{
        position: fixed;
        width: 100%;
        display: flex;
        flex-direction: row;
        z-index: 999999;
        opacity: 0;
        transition: .5s;
      }
      .progress-elemnt{
        width: 5.8823529411764%;
        height: 10px;
        transition: all .5s;
        border: 1px solid #000000d6;
      }
      #slide01-sec , #slide02-sec , #slide03-sec , #slide04-sec, #slide05-sec , #slide06-sec
      ,  #slide07-sec , #slide08-sec ,  #slide09-sec , #slide10-sec  ,  #slide11-sec , #slide12-sec
      ,  #slide13-sec , #slide14-sec  ,  #slide15-sec , #slide16-sec  ,  #slide17-sec , #slide18-sec
      , #slide19-sec{
        background-color: white;
        opacity: .4;
      }


/* ==========================================================================
   progress bar
   ========================================================================== */


    #page-number{
      font-size: 20px;
      margin-left: 4px;
      transition: all .6;
    }
    .pagees-container{
      position: fixed;
      bottom: 5px;
      color: white;
      z-index: 99999;
      right: 20px;
      display: flex;
      font-size: 20px;
      opacity: 0;
      transition: all .6;
    }

/* ==========================================================================
   navigators
   ========================================================================== */
   .continue-text{
      position: fixed;
      color: white;
      opacity: 0;
      margin: 0 auto;
      left: 5px;
      top: 59%;
      /* width: 50px; */
      height: 50px;
      padding: 14px 14px 0 0;
      z-index: 100;
      border-radius: 100%;
      box-sizing: border-box;
      transition: 0.3s;
      font-size: 15px;
      transition: all .6s;
   }

   .btn-arrow-right {
    fill: var(--grey-light); }

   .arrow-right {
    right: 10px;
    opacity: 0;
    position: fixed;
    margin: 0 auto;
    top: 47%;
    width: 50px;
    height: 50px;
    padding: 14px 14px 0 0;
    z-index: 100;
    cursor: pointer;
    background-color: var(--grey1);
    border-radius: 100%;
    box-sizing: border-box;
    transition: 0.3s; 
    z-index: 9999999999999999999999999999999 !important;
  }

  .arrow-right:hover {
    background-color: var(--grey-dark);
    transition: 0.3s;}


  .btn-arrow-left {
    fill: var(--red-main);  }

  .arrow-left {
    position: fixed;
    opacity: 0;
    margin: 0 auto;
    left: 10px;
    top: 47%;
    width: 50px;
    height: 50px;
    padding: 14px 14px 0 0;
    z-index: 100;
    cursor: pointer;
    background-color: #fff;
    border-radius: 100%;
    box-sizing: border-box;
    z-index: 9999999999999999999999999999999 !important;
    transition: 0.3s;  }

.arrow-left:hover {
  background-color: var(--grey-dark);
  transition: 0.3s;}


  @media (max-width: 780px) {
    .arrow-right svg, .arrow-left svg {
      width: 16px;
      height: 13px; }

    .arrow-right, .arrow-left {
      width: 40px;
      height: 40px;
      /* padding: 11px 10px 0 0;   */
    }
      .slide-top-center{
        padding: 2rem 4rem 0 4rem;
      }
  }
  @media (min-width: 1400px) {
      /* .slide-top-center {
        padding: 11rem 17rem 0 17rem  !important;
      }
      .slide-center-center {
        padding: 0 17rem  !important;
    } */
    /* .slide-bottom-center {
      padding: 0rem 17rem 0rem 17rem  !important;
    } */
  }

#desktop .sec02-col img {
  width: 100%;
}
.right-lyar{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  right: o;
  background: linear-gradient(to right,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 1));
}

/* ==========================================================================
   Grids
   ========================================================================== */
   #mobile{
    display: none;
  }

  .slide-bottom-center {
    display: grid;
    align-content: flex-end;
    justify-content: center;
    padding: 0rem 10rem 10rem 10rem;    }

 .slide-center-center {
        display: grid;
        align-content: center;
        justify-content: center;
        padding: 0 10rem;        }

  .slide-top-center {
    display: grid;
    align-content: flex-start;
    justify-content: center;
    padding: 10rem 10rem 0 10rem;    }

  .slide-center-center.text-right h1,
  .slide-center-center.text-right h2,
  .slide-center-center.text-right p 
  {
    width: 40%; } 
  
  .text-right.slide-center-center {
    padding: 1rem 7rem;
  }

/* ==========================================================================
   sections
   ========================================================================== */
  

   .goHome{
    position: fixed;
    top: 25px;
    left: 84px;
    z-index: 9999999;
    opacity: 0;
   }
   .goHome a img{
    width: 30px;
    filter: drop-shadow(7px 7px 7px #666666a8);
    -webkit-filter: drop-shadow(7px 7px 7px #66666685);
  }
   .main-wrapper {
       width: 100vw;
       height: 100vh;
   }

   .display-slide {
      display: block !important; 
   }

   .slide {
    width: 100vw;
    height: 100vh;  
    /* transition: 0.2s; */
   }

   .slide-bg {
    position: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    width: 100vw;
    height: 100vh; 
    top: 0; 
    display: none;
   }

   .slide-blur {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    /* transition: 0.1s; */
    }

    .slide-overlay-bottom {
      background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.28),rgba(0, 0, 0, 1));
  }
    
    .slide-overlay-left {
    background-image: linear-gradient(90deg, #000000 0%, rgba(0,0,0,0.00) 100%);
    } 

    .slide-overlay-right {
    background-image: linear-gradient(-90deg, #000000 0%, rgba(0,0,0,0.00) 100%);
    } 

    .slide-overlay-top {
      background-image: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.00) 100%);
    } 
  

    #section01 {
      opacity: 1;
      transition: all 1s;
      z-index: 1;
    }
    #section01-container{
      opacity: 1;
      transition: all 1s;
      position: relative;
    }


  /* ==========================================================================
section02
   ========================================================================== */

    #section02 {
     opacity: 0;
     transition: all 1s;
     position: relative;
    }
    #sec02-bk{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      z-index: -1;
    }
    #p2-02{
      opacity: 0;
      display: none;
    }
    /* .sec02-row{
      display: flex;
      flex-direction: row;
    } */
     .sec02-row{
      display: flex;
      align-items: baseline;
      flex-direction: row;
      margin-bottom: 30px;
      justify-content: center;
      transition: all .3s;
    }
    .sec02-col{
      width: 16.66666%;
    }
    #desktop .sec02-col{
      width: auto;
      margin-left: 25px;
    }
    .sec02-img01{
      opacity: 0;
      transform: translateY(-10px);
    }
    .sec02-img02{
      opacity: 0;
      transform: translateY(-10px);
    }
    .sec02-img03{
      opacity: 0;
      transform: translateY(-10px);
    }
    .sec02-img04{
      opacity: 0;
      transform: translateY(-10px);
    }
    .sec02-img05{
      opacity: 0;
      transform: translateY(-10px);
    }
    .sec02-img06{
      opacity: 0;
      transform: translateY(-10px);
    }
    #p2-04{
      opacity: 0;
      transform: translateY(-10px);
    }
    .section02-container02{
      width: 100%;
      height: 100%;
    }
/* ==========================================================================
section02
   ========================================================================== */

 
   /* ==========================================================================
section03
   ========================================================================== */
    #section03 {
      background-image: url(../graphics/zingabar-01.jpg);
      background-size: cover !important;
      background-position: center bottom !important;
      background-repeat: no-repeat !important;
      opacity: 0;   
    }

/* ==========================================================================
section03
   ========================================================================== */

   /* ==========================================================================
section04
   ========================================================================== */

  #section04 {
    opacity: 0;
    transition: all 1s;   
  }
  
   .map01-holder {
      transform: scale(1.2);
      transform-origin: 23% 96%;
      position: relative;
      min-height: 100%;
      min-width: 1024px;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
  #sec04-bk{
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 800px;
    transform: translate(-50%, -50%) scale(.3);
  }
   .map-bk01{
      position: absolute;
      width: 100%;
      height: 100%;
      top:0;
      /* transform:translateX(80px);
      filter: blur(100px); */
    }
    .pointer01{
      width: 23px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 170px;
      margin-left: -241px;
      opacity: 0;
    }
    .path01{
      width: 23px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 19px;
      margin-left: -254px;
      opacity: 0;
    }
    .sec04-name01{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -112px;
      margin-left: -318px;
      font-size: 34px;
      font-weight: 800;
      font-family: Tajawal-Bold;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }

    #p4-011{
      position: absolute;
      width: 35%;
      top: 50%;
      left: 50%;
      margin-top: 187px;
      margin-left: -33px;
      font-size: 15px;
      font-weight: 600;
      line-height: 27px;
      text-align: right;
      color: #ffffff;
      opacity: 0;
      font-family: Tajawal-Bold !important;
    }
    #p4-012{
      position: absolute;
      width: 38%;
      top: 50%;
      left: 50%;
      margin-top: 95px;
      margin-left: -109px;
      font-size: 15px;
      font-weight: 600;
      font-family: Tajawal-Bold !important;
      line-height: 27px;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }
    .sec04-name02{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -72px;
      margin-left: -353px;
      text-align: right;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      opacity: 0;
    }
    .sec04-num01{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -49px;
      margin-left: -378px;
      text-align: right;
      color: #ffffff;
      font-size: 75px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }
    .sec04-name03{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 4px;
      margin-left: -364px;
      text-align: right;
      color: #ffffff;
      font-size: 18px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }

/* ************************************************************************* */
    .sec04-name04{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -94px;
      margin-left: -146px;
      text-align: right;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      opacity: 0;
    }
    .sec04-num02{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -74px;
      margin-left: -157px;
      text-align: right;
      color: #ffffff;
      font-size: 75px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }
    .sec04-name05{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -23px;
      margin-left: -144px;
      text-align: right;
      color: #ffffff;
      font-size: 18px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }
    .sec04-name06{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -135px;
      margin-left: -150px;
      font-size: 34px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }

    .pointer03{
      width: 23px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 132px;
      margin-left: -168px;
      opacity: 0;
    }
    .path02{
      width: 23px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -5px;
      margin-left: -158px;
      opacity: 0;
    }
    .sec04-name09{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 210px;
      margin-left: -488px;
      text-align: right;
      color: #ffffff;
      font-size: 18px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }

/* ************************************************************************* */
/* ************************************************************************* */
    .sec04-name07{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 106px;
      margin-left: -426px;
      font-size: 34px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }
    .sec04-name08{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 141px;
      margin-left: -479px;
      text-align: right;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      opacity: 0;
    }
    .sec04-num03{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 159px;
      margin-left: -453px;
      text-align: right;
      color: #ffffff;
      font-size: 64px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }
    .pointer04{
      width: 23px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 54px;
      margin-left: -395px;
      opacity: 0;
    }
    .path03{
      width: 1px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 83px;
      margin-left: -384px;
      opacity: 0;
    }
/* ************************************************************************* */

    .pointer02{
      width: 19px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -44px;
      margin-left: -444px;
      opacity: 0;
    }
    .img-map02{
      width: 170px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 39px;
      margin-left: -507px;
      z-index: 1;
      opacity: 0;
    }
    .line02{
        width: 1px;
        height: 157px;
        object-fit: contain;
        border: solid 3px #ffffff;
    }
    .sec04-num04{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 158px;
      margin-left: -379px;
      text-align: right;
      color: #ffffff;
      font-size: 64px;
      font-weight: 200;
      font-family: Tajawal-Light !important;
      opacity: 0;
    }
    .sec04-name10{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 92px;
      margin-left: -330px;
      font-size: 34px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }
    .sec04-name11{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 132px;
      margin-left: -327px;
      text-align: right;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      opacity: 0;
    }
    .path044 {
      width: 2px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -19px;
      margin-left: -435px;
      opacity: 0;
    }
    .path04{
      width: 41px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -214px;
      margin-left: 328px;
      opacity: 0;
    }
/* ==========================================================================
section04
   ========================================================================== */




      /* ==========================================================================
section04-a
   ========================================================================== */

  #section04-a {
    opacity: 0;
    transition: all 1s;   
  }
  
   .map02-holder {
      transform: scale(1);
      transform-origin: 23% 96%;
      position: relative;
      min-height: 100%;
      min-width: 1024px;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
  #sec04-a-bk{
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 800px;
    transform: translate(-50%, -50%) scale(.8);
  }
    #p4-013{
      position: absolute;
      width: 45%;
      top: 50%;
      left: 50%;
      margin-top: -103px;
      margin-left: -570px;
      font-size: 17px;
      line-height: 40px;
      font-weight: 300;
      font-family:  Tajawal-Light !important;
      line-height: 35px;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }
    #p4-014{
      position: absolute;
      width: 45%;
      top: 50%;
      left: 50%;
      margin-top: -103px;
      margin-left: -570px;
      font-size: 17px;
      line-height: 40px;
      font-weight: 300;
      font-family:  Tajawal-Light !important;
      line-height: 35px;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }
    .pointer05{
      width: 27px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -47px;
      margin-left: 314px;
      opacity: 0;
    }
    .path04{
      width: 41px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -214px;
      margin-left: 328px;
    }
    .section04-a-name01{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -302px;
      margin-left: 310px;
      font-size: 42px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      text-align: right;
      color: #ffffff;
      opacity: 0;
    }
    .section04-a-name02{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -241px;
      margin-left: 277px;
      text-align: right;
      color: #ffffff;
      font-size: 19px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      opacity: 0;
    }
    .sec04-a-dubi{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 409px;
      margin-top: -319px;
      margin-left: -371px;
      text-align: right;
      color: #ffffff;
      font-size: 15px;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      opacity: 0;
    }
    .p04-container01{
      text-align: center;
      position: absolute;
      width: 100%;
      opacity: 0;
    }
    .p04-container02{
      width: 80%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
/* ==========================================================================
section04
   ========================================================================== */




 /* ==========================================================================
section05
   ========================================================================== */
   #section04-b {
    background-image: url(../graphics/dubai-large.jpg);
    opacity: 0;
    position: relative;   
  }
  #canvas {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .8;
    top: 0;
    right:0; }

  .sec04-b-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , 0%);
  }

  #section04-b h3{
    opacity: 0;
  }
  #section04-b p{
    opacity: 0;
  }
  .lyar04-b{
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #00000093;
      -webkit-filter: blur(17px);
      filter: blur(17px);
  }
  .layer-smoked{
    background: linear-gradient(rgba(0, 0, 0, 0.40),rgba(0, 0, 0, 0.35),rgba(0, 0, 0, 0.69));
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  #canvas2 {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }

 /* ==========================================================================
section05
 ========================================================================== */




   /* ==========================================================================
section05
   ========================================================================== */
    #section05 {
      background-image: url(../graphics/img-9672.jpg);
      opacity: 0;   
    }
    canvas {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%; }

    .sec05-container{
      position: absolute;
      top: 23%;
      left: 50%;
      transform: translate(-50% , 0%);
      z-index: 99;
    }

    #section05 h3{
      opacity: 0;
      color: #ff0000 !important;
      font-weight: 800;
      font-family: Tajawal-Bold !important;
      font-size: 44px;
    }
    #section05 p{
      opacity: 0;
    }
    .slide-overlay-bottom2 {
      background: linear-gradient(rgba(0, 0, 0, 0.40),rgba(0, 0, 0, 0.35),rgb(0, 0, 0));
    }
   /* ==========================================================================
section05
   ========================================================================== */


      /* ==========================================================================
section06
   ========================================================================== */
   /* #section06 {
    background-image: url(../graphics/img-9808.png);
    opacity: 0;   
  } */
  canvas {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%; }

  #section06 p{
    opacity: 0;
  }
  .p06-container01{
    text-align: center;
    position: absolute;
    width: 100%;
    opacity: 0;
  }
  .p06-container02{
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
 /* ==========================================================================
section06
 ========================================================================== */




      /* ==========================================================================
section07
   ========================================================================== */
   #section07 {
    opacity: 0;
    /* transform: scale(1.4); */
    position: relative;   
  }
  .sec07-map-head{
    position: absolute;
    color: white;
    font-size: 19px;
    font-family: Tajawal-Bold;
    font-weight: 900;
    line-height: 35px;
    top: 8%;
    right: 22px;
    padding: 1px;
    background-color: #08090b05;
  }
  
  .lyar07{
    background-color: #000000e0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  #sec07-bk{
    position: absolute;
    top: 50%;
    right: 50%;
    min-height: 800px;
    transform: translate(-50%, -50%) scale(.35);
  }
  .sec07-container{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 80%;
    right: 0;
    left: 0;
    margin: 0 auto;
  }
  .sec07-container02{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 80%;
    right: 0;
    left: 0;
    margin: 0 auto;
  }
  #section07 h3{
    opacity: 0;
  }
 
  #sec7-p02{
    opacity: 0;
  }
  #sec7-p03{
    opacity: 0;
  }
  #sec7-p04{
    opacity: 0 ;
  }
  #circle-01{
    width: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 11px;
    margin-left: -539px;
  }
  .p-locations{
    color: white;
    font-weight: bold;
    font-size: 20px;
  }
  #locations01 {
    width: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 103px;
    margin-left: -539px;
}
  #locations02{
      width: 88px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 272px;
      margin-left: -539px;
  }
  #locations03{
    width: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 275px;
    margin-left: -446px;
  }
  #locations04{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -78px;
    margin-left: -386px;
  }
  #locations05{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -138px;
    margin-left: -539px;
  }
  #locations06{
    width: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 316px;
    margin-left: -550px;
  }
  #locations07{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 39px;
    margin-left: -363px;
  }
  #locations08{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 245px;
    margin-left: -365px;
  }
  #locations09{
    margin-top: -70px;
    margin-left: -2px;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #circle-02{
    width: 58px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 211px;
    margin-left: -524px;
  }
  #circle-03{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 274px;
    margin-left: -367px;
    width: 30px;
  }
  #circle-04{
    width: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 19px;
    margin-left: -329px;
  }
  #circle-05{
    width: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -112px;
    margin-left: 13px;
  }
  #circle-06{
    width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 293px;
    margin-left: -467px;
  }
  #circle-07{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -117px;
    margin-left: -522px;
    width: 36px;
  }
  #circle-08{
    position: absolute;
    width: 36px;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -429px;
  }
  #circle-09{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 295px;
    margin-left: -426px;
    width: 48px;
  }
 /* ==========================================================================
section07
 ========================================================================== */


/* ==========================================================================
buttons
   ========================================================================== */

 .btn {
     padding: 1em;
     font-size: 15px;
     background-color: var(--primary);
     border-radius: 25px;
     cursor: pointer;
     z-index: 100000;
 }  

 .btn.large {
     width: 150px; }


/* ==========================================================================
video bk
   ========================================================================== */
     video { 
      position: fixed;
      top: 0;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      transform: translateX(-50%);
      /* background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat; */
      background-size: cover;
      transition: 1s opacity;
  }
  #bgvid{
    position: fixed;
    bottom: 0;
    top: unset;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%);
    /* background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat; */
    background-size: cover;
    transition: 1s opacity;
  }
  #buttonVid{
    opacity: 1;
    border-radius: 22.5px;
    border: solid 1px #a20014;
    padding: 7px 40px 7px 40px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    color: white;
    width: 200px;
    margin: 0 auto;
    transition: all .5s;
    bottom: 15%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }


  #blurSvg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: -169px;
    left: 149px;
    opacity: 0;
    transform: scale(2) rotate(19deg);
  }
  #blurSvg2{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: -169px;
    left: 149px;
    opacity: 0;
  }
  /* #blurSvg2{
    position:absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 999;
    top: 0;
    left: 0;
  } */

  /* #blurSvg image {
    width: 100%;
    height: 100%;
  }
  #blurSvg2 image {
    width: 100%;
    height: 100%;
  } */

   /* ==========================================================================
section08
   ========================================================================== */

   #section08 {
    opacity: 0;
    transition: all 1s;
    position: relative;
   }
   #section08  
    .slide-bottom-center {
      padding: 0rem 10rem 4rem 10rem;
   }
   #p8-02{
    font-size: 19px !important;
    line-height: 31px !important;
    }
    #p8-03{
      font-size: 19px !important;
      line-height: 31px !important;
    }
   #sec08-bk{
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
     z-index: -1;
     object-fit: cover;
   }
   .sec08-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 10px;
   }
   .sec08-col{
    /* width: 13.1111%; */
    margin-left: 10px;
   }
   .sec08-col img{
    width: 100px;
   }
   
   .sec08-img01{
     opacity: 0;
     transform: translateY(-10px);
     width: 80px;
   }
   .sec08-img02{
    opacity: 0;
    transform: translateY(-10px);
    width: 80px;
    }
   .sec08-img08{
     opacity: 0;
     transform: translateY(-10px);
     width: 80px;
   }
   .sec08-img03{
     opacity: 0;
     transform: translateY(-10px);
     width: 80px;
   }
   .sec08-img04{
     opacity: 0;
     transform: translateY(-10px);
     width: 80px;
   }
   .sec08-img05{
     opacity: 0;
     transform: translateY(-10px);
     width: 80px;
   }
   .sec08-img06{
     opacity: 0;
     transform: translateY(-10px);
     width: 80px;
   }
   .sec08-img07{
    opacity: 0;
    transform: translateY(-10px);
    width: 80px;
    }
    .sec08-img08{
      opacity: 0;
      transform: translateY(-10px);
      }
      .sec08-img09{
        opacity: 0;
        transform: translateY(-10px);
        }
        .sec08-img10{
          opacity: 0;
          transform: translateY(-10px);
          }
          .sec08-img11{
            opacity: 0;
            transform: translateY(-10px);
            }
            .sec08-img12{
              opacity: 0;
              transform: translateY(-10px);
              }
              .sec08-img13{
                opacity: 0;
                transform: translateY(-10px);
                }
                .sec08-img14{
                  opacity: 0;
                  transform: translateY(-10px);
                  }
                  .sec08-img15{
                    opacity: 0;
                    transform: translateY(-10px);
                    }
                    .sec08-img16{
                      opacity: 0;
                      transform: translateY(-10px);
                      }
                      .sec08-img17{
                        opacity: 0;
                        transform: translateY(-10px);
                        }
                        .sec08-img18{
                          opacity: 0;
                          transform: translateY(-10px);
                          }
                          .sec08-img19{
                            opacity: 0;
                            transform: translateY(-10px);
                            }
                            .sec08-img20{
                              opacity: 0;
                              transform: translateY(-10px);
                              }
                              .sec08-img21{
                                opacity: 0;
                                transform: translateY(-10px);
                                }
   .section08-container08{
     width: 100%;
     height: 100%;
   }
   #p8-02{
    opacity: 0;
    transform: translateY(-10px);
   }
   #p8-03{
     display: none;
    opacity: 0;
    transform: translateY(-10px);
   }
/* ==========================================================================
section08
  ========================================================================== */



  /* ==========================================================================
section09
  ========================================================================== */
  #section09 {
    opacity: 0;
    transition: all 1s;
    position: relative;
   }

  .section09-container09{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    opacity: 0;
  }
  #sec09-bk{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
  }
  .img09-sec09{
    width: 20%;
  }
  #p9-01{
    width: 50%;
    margin-left: 25px;
  }

  /* ==========================================================================
section09
  ========================================================================== */


  


     /* ==========================================================================
section10
  ========================================================================== */
    #section10 {
      background-image: url(../graphics/section10.jpg);
      opacity: 0;   
    }
    .sec10-width{
      width: 40%;
      z-index: 99;
      font-size: 19px !important;
      line-height: 31px !important;
    }
    
  /* ==========================================================================
section10
  ========================================================================== */


      /* ==========================================================================
section11
  ========================================================================== */
  #section11 {
    opacity: 0;
    position: relative;
  }
  #sec11-p01{
    padding-top: 0;
    padding-right: 10px;
    color: black !important;
    width: 60%;
    font-size: 19px !important;
    font-weight: 600;
  }
  #sec11-bk{
    position: absolute;
    top: 50%;
    right: 50%;
    min-height: 800px;
    transform: translate(-50%, -50%) scale(.35);
  }
  .sec11-elm01{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -191px;
    margin-left: 373px;
    /* opacity: 0; */
  }
  .sec11-elm02{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -163px;
    margin-left: -392px;
    /* opacity: 0; */
  }
  .sec11-elm03{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -124px;
    margin-left: -417px;
    /* opacity: 0; */
  }
  .sec11-elm04{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -63px;
    margin-left: -419px;
    /* opacity: 0; */
  }
  .sec11-elm04 a{
    flex-direction: row-reverse;
  }
  .sec11-elm04 a p{
    flex-direction: row-reverse;
    margin-left: 6px;
  }
  .sec11-elm05{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: 0px;
    /* opacity: 0; */
  }
  .sec11-elm06{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 104px;
    margin-left: 64px;
    /* opacity: 0; */
  }
  .sec11-elm07{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 88px;
    margin-left: -433px;
    /* opacity: 0; */
  }
  .sec11-elm07 a{
    flex-direction: row-reverse;
  }
  .sec11-elm07 a p{
    flex-direction: row-reverse;
    margin-left: 6px;
  }
  .sec11-elm08{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 16px;
    margin-left: -450px;
    /* opacity: 0; */
  }
  .sec11-elm09{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 200px;
    margin-left: -482px;
    /* opacity: 0; */
  }
  .sec11-elm10{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 277px;
    margin-left: -419px;
    /* opacity: 0; */
  }
  .sec11-elm11{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -64px;
    margin-left: 408px;
    /* opacity: 0; */
  }
  .sec11-elm12{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 150px;
    margin-left: 20px;
    /* opacity: 0; */
  }
  .sec11-elm13{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 259px;
    margin-left: -439px;
    /* opacity: 0; */
  }
  .sec11-elm13 a{
    flex-direction: row-reverse;
  }
  .sec11-elm13 a p{
    margin-left: 6px;
  }
  .sec11-elm14{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 323px;
    margin-left: -235px;
    /* opacity: 0; */
  }
  .sec11-elm14 a{
    flex-direction: row-reverse;
  }
  .sec11-elm14 a p{
    margin-left: 6px;
  }
  .sec11-elm15{
    width: 23px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 119px;
    margin-left: -469px;
    /* opacity: 0; */
  }
  .sec11-elm15 a{
    flex-direction: row-reverse;
  }
  .sec11-elm15 a p{
    margin-left: 6px;
  }
  .map03-holder {
    transform: scale(.9);
    transform-origin: 23% 96%;
    position: relative;
    min-height: 100%;
    min-width: 1024px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .map03-holder a {
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    width: 190px;
  }
  .map03-holder a img{
    width: 30px;
  }
  .sec11-elmnt-p{
    font-size: 11px;
    font-weight: 600;
    line-height: 7px;
    color: #ffffff;
    margin-right: 6px;
  }
  
/* ==========================================================================
section11
========================================================================== */


/* ==========================================================================
section12
========================================================================== */
    #section12 {
      opacity: 0;   
    }
    .sec12-container{
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 60px;
      right: 0;
      left: 0;
      margin: auto;
    }
    .sec12-col{
      width: 50%;
      text-align: center;
      position: relative;
    }
    .video-container12{
      background-image: url(../graphics/mobile-cover.png);
      background-position: center !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
    }
    .videoCover{
      width: 371px;
      height: 658px;
      margin: 0 auto;
      left: 50%;
      display: block;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      min-width: auto !important;
      min-height: auto !important;
    }
    #myVideo {
      margin: 0 auto;
      display: block;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      min-width: auto !important; 
      min-height: auto !important; 
    }
    @media only screen and (max-height:658px) {
      .videoCover{
        width: 299px;
        height: 510px;
      }
      #myVideo {
        width: 381px;
        border-radius: 77px;
        height: 510px;
      }
      
    }
    .sec12-col p {
      width: 70%;
    }
   
    
/* ==========================================================================
section12
========================================================================== */


/* ==========================================================================
section13
========================================================================== */
    #section13 {
      opacity: 0;   
    }
    .sec13-container{
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 60px;
    }
    .sec13-col{
      width: 50%;
      text-align: center;
      position: relative;
    }
    .sec13-col p{
      width: 70%;
    }
/* ==========================================================================
section13
========================================================================== */


/* ==========================================================================
section14
========================================================================== */
    #section14 {
      opacity: 0;   
    }
    .sec14-container{
      display: flex;
      align-items: center;
      flex-direction: column;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding-right: 10%;
      padding-left: 10%;
    }
    .sec14-col img{
        width: 100%;
        margin-bottom: 50px;
    }
    .sec14-col p{
      width: 70%;
      margin: 0 auto;
    }

/* ==========================================================================
section14
========================================================================== */


/* ==========================================================================
section15
========================================================================== */
  #section15 {
    background-image: url(../graphics/01-1.jpg);
    opacity: 0;   
  }


/* ==========================================================================
section15
========================================================================== */

/* ==========================================================================
section16
========================================================================== */
  #section16 {
    opacity: 0;
    background-image: url(../graphics/10bk.jpg);   
  }
  #sec16-p02{
    opacity: 0;
    display: none;
  }
/* ==========================================================================
section16
========================================================================== */

/* ==========================================================================
section17
========================================================================== */
  #section17 {
    opacity: 0;
    /* background-image: url(../graphics/05-19.png);    */
  }
  #sec17-bk{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    object-fit: cover;
  }
  .sec17-container02{
    opacity: 0;
    display: none;
  }
  .sec17-row{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
  }
  .sec17-num{
      font-size: 40px;
      font-weight: 600;
      color: #ffffff;
  }
  .sec17-text{
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 15px;
  }
  .sec17-year{
    font-size: 55px;
    font-weight: 200;
    font-family:Tajawal-Light !important;
    color: #a20014;
  }
  .sec17-row-el{
    margin-left: 35px;
  }
  .sec17-text02{
    color: white;
    font-size: 16px;
    line-height: 31px;
    margin-bottom: 15px;
    width: 100px;
  }

/* ==========================================================================
section17
========================================================================== */

/* ==========================================================================
section18
========================================================================== */
  #section18 {
    opacity: 0;
    background-image: url(../graphics/04.jpg);      
  }
  .sec18-container{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

/* ==========================================================================
section18
========================================================================== */


/* ==========================================================================
section19
========================================================================== */
#section19 {
  opacity: 0;
  background-image: url(../graphics/07-1.jpg);
  position: relative !important;

}
.sec19-container{
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lyar-sec19{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000d1;
  z-index: 1;
  display: none;
}

/* ==========================================================================
section19
========================================================================== */


/* ==========================================================================
TeamArij
========================================================================== */
    .team {
      font-size: 31px;
      margin-top: 50px;
      font-weight: 500;
      color: white;
    }
    #sec19-cont-team{
      z-index: 2;
      display: none;
    }
    #sec19-cont-team p{
      color: white;
      font-size: 17px;
    }
    .teamFooter .first {
      font-size: 20px;
      font-weight: 700;
      font-family: Tajawal-Bold;
      color: #a20014 !important;
      margin-top: 20px;
    }
    .teamFooter .secound {
      font-size: 18px;
      font-weight: 500;
      color: white;
      margin-top: 7px;
    }

/* ==========================================================================
TeamArij
========================================================================== */


/* ==========================================================================
GENRAL CLASSES
========================================================================== */

    .pulseClass{
      animation: pulse 1.5s infinite;
      animation-direction: alternate;
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }
    @-webkit-keyframes pulse {
      0% {
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 0 0 rgba(172, 23, 23, 0.337);
      }
      50% {
        -webkit-transform: scale(1.1);
        -webkit-box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
      }
      100% {
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(172, 23, 23, 0.4);
        border-radius: 50%;
      }
      50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
        border-radius: 50%;
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
        border-radius: 50%;
      }
    }


    .pulseClass2{
      animation: pulse2 1.5s infinite;
      animation-direction: alternate;
      -webkit-animation-name: pulse2;
      animation-name: pulse2;
    }
    @-webkit-keyframes pulse2 {
      0% {
        -webkit-transform: scale(1);
      }
      50% {
        -webkit-transform: scale(1.1);
      }
      100% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes pulse2 {
      0% {
        transform: scale(1);
        border-radius: 50%;
      }
      50% {
        transform: scale(1.1);
        border-radius: 50%;
      }
      100% {
        transform: scale(1);
        border-radius: 50%;
      }
    }

    /* ==========================================================================
GENRAL CLASSES
========================================================================== */



@media only screen and (min-width: 1800px) {
  .sec07-container-map{
    transform: scale(1.5);
  }
  #sec04-bk{
    transform: translate(-50%, -50%) scale(.4);
  }
  #p4-011 {
    margin-top: 187px;
    margin-left: -352px;
  }
}
@media (min-width:375px)  and (max-width:480px) {
  .map01-holder {
    transform-origin:unset;
  }
  #sec04-bk {
    position: absolute;
    top: 50%;
    left: 83px;
    min-height: 800px;
  }
    
}
@media (min-width:1024px)  and (max-width:1200px) {
    .map03-holder {
      transform: scale(.8);
      transform-origin: 68% 96%;
      position: relative;
      min-height: 100%;
      min-width: 1024px;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #p4-013{
      position: absolute;
      margin-top: -103px;
      margin-left: -418px;
    }

    #p4-014{
      margin-top: -103px;
      margin-left: -418px;
    }
    .sec07-container-map{
      transform: scale(.8);
      position: relative;
    }
}

@media (min-width:700px)  and (max-width:1024px) {
  .map01-holder {
    transform: scale(.8);
    transform-origin: 132% 62%;
    position: relative;
    min-height: 100%;
    min-width: 1024px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  #p4-013 {
    margin-left: -210px;
    background-color: #0000004a;
    padding: 10px;
    font-size: 18px;
  }
  #p4-014 {
    margin-left: -210px;
    background-color: #0000004a;
    padding: 10px;
    font-size: 18px;
  }
  .sec04-a-dubi{
    display: none;
  }
  .p04-container02 {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-28%, -50%);
  }
  .sec07-container-map{
    position: relative;
    transform: scale(.8);
    left: 12%;
  }
  .sec08-col {
    /* width: 13.1111%; */
    margin-left: 7px;
  }
  .sec08-col img {
    width: 88px;
  }
  #p8-03 {
    font-size: 19px !important;
    line-height: 31px !important;
    background-color: #00000073;
    padding: 13px;
    margin-bottom: 17px;
    display: none;

  }
  #p8-02 {
    font-size: 19px !important;
    line-height: 31px !important;
    background-color: #00000073;
    padding: 13px;
    margin-bottom: 17px;
  }
  #p9-01 {
    width: 100%;
    margin-left: 25px;
  }
  .img09-sec09 {
    width: 200px;
    margin-bottom: 14px;
  }
  .section09-container09 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sec10-width {
    width: 80%;
  }
  .map03-holder {
    transform: scale(0.7549);
    transform-origin: 126% 51%;
    position: relative;
    min-height: 100%;
    min-width: 1024px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
    #sec11-p01 {
      padding-top: 0;
      padding-right: 10px;
      color: black !important;
      width: 73%;
      font-size: 19px !important;
      font-weight: 600;
      margin-right: 16%;
    }
    .sec12-col p {
      width: 90%;
      font-size: 24px;
      line-height: 36px;
  }
    .sec12-col {
      width: 50%;
      text-align: center;
      position: relative;
      margin-right: 94px;
    }
    .font-size-2 {
      font-size: 22px;
      line-height: 30px;
      transition: 0.3s;
      margin-right: 59px;
  }
  #section12 .font-size-2 {
    margin-right: 14px;
  }
}
@media only screen and (max-height: 700px) {

  .sec08-col img {
    width: 77px;
}
}

@media only screen and (min-height: 700px) {
  /* #section01 .slide-top-center {
    display: grid;
    align-content: center;
    justify-content: center;
    padding: 10rem 10rem 0 10rem;
  } */
  #section02 .slide-top-center {
    display: grid;
    align-content: center;
    justify-content: center;
    padding: 10rem 10rem 0 10rem;
  }
 

}
@media only screen and (max-width: 480px) {
  #section13 .videoCover {
    width: 150px !important;
    height: 250px !important;
    margin-top: 13px !important;
}
#section13 #myVideo {
  width: 292px !important;
  margin-top: -36px;
  height: 243px !important;
  /* top: -71px; */
}
#section13 .col12-p {
  margin-top: 52px;
}
  #section13 .sec13-col p {
    width: 100%;
}
  #section11 .col12-p {
    margin-top: 150px !important;
}
/* section04-a */
.section04-a-name01 {
  margin-top: -209px;
  margin-left: 333px;
  font-size: 19px;
}
#myVideo {
  margin: 0 auto;
  display: block;
  position: absolute;
  transform: translateX(-50%) translateY(-29%);
  min-width: auto !important;
  min-height: auto !important;
}
.sec10-width {
  width: 30%;
  z-index: 99;
  margin-right: 10px;
  font-size: 14px !important;
  line-height: 21px !important;
}
.path04 {
  width: 31px;
  margin-top: -166px;
  margin-left: 329px;
}
.pointer05 {
  width: 18px;
  margin-top: -38px;
  margin-left: 320px;
}
.section04-a-name02 {
  margin-top: -180px;
  margin-left: 296px;
  font-size: 13px;
  font-weight: 800;
  font-family: Tajawal-Bold;
}
#p4-013{
    padding: 4px 9px 2px 1px;
    width: 28%;
    background-color: #00000096;
    margin-top: 19px;
    margin-left: 209px;
    font-size: 13px;
    line-height: 21px;
}
#p4-014{
    padding: 4px 9px 2px 1px;
    width: 28% !important;
    background-color: #00000096;
    margin-top: 28px !important;
    margin-left: 209px !important;
    font-size: 13px !important;
    line-height: 21px !important;
}
/* section04-a */

/* section07 */
  .sec07-container-map{
    transform: scale(.5);
    margin-left: 258px;
    margin-top: 13px
  }
  .sec07-container-map #sec04-bk{
    top: 50% !important;
    left: 50% !important;
    min-height: 800px !important;
    transform: translate(-50%, -50%) scale(.4) !important;
    position: absolute !important;
  }
  #sec7-p03{
    opacity: 0;
    display: none;
  }
  #sec7-p04{
    opacity: 0 ;
    display: none;
  }
  .sec07-container p{
    width: 97%;
  }

/* section07 */

/* section08 */
  .sec08-col {
    width: 7.1111%;
    margin-left: 10px;
  }
  .sec08-col img {
    width: 40px;
  }
  #section08 #p8-02{
    margin-right: 10%;
    font-size: 14px !important;
    line-height: 21px !important;
    width: 80%;
  }
  #section08 #p8-03{
    margin-right: 10%;
    font-size: 14px !important;
    line-height: 21px !important;
    width: 80%;
    display: none;
  }
  #section08 .slide-bottom-center {
    display: grid;
    align-content: center;
    justify-content: center !important;
    padding: 4rem 4rem 0rem 4rem !important;
}
/* section08 */

/* section11 */
  #section11  .map03-holder{
    transform: scale(.4);
    transform-origin: center;
    margin-right: -486px;
  }
  #section11  #sec04-bk {
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 800px;
    transform: translate(-50%, -50%) scale(.4);
}
#sec11-p01{
    padding-top: 0;
    padding-right: 10px;
    color: black !important;
    width: 100%;
    font-size: 25px !important;
    line-height: 35px;
    font-weight: 600;
    font-family: Tajawal-Bold;
    margin-right: 609px;
}

/* section11 */


/* section12 */
    .videoCover {
      width: 150px !important;
      height: 250px !important;
      margin-top: 102px !important;
    }
    #myVideo {
      width: 292px !important;
      margin-top: 51px;
      height: 243px !important;
      /* top: -71px; */
    }
    .video-container12 {
      background-image: unset !important;
    }
    .sec12-col {
      width: 100%;
      height: 100px;
      text-align: center;
      position: relative;
    }
    .sec12-container {
      display: flex;
      flex-direction: column;
    }
    .sec12-col p {
      width: 100%;
    }
    .col12-p{
      margin-top: 150px;
    }
    .col13-p{
      margin-top: 150px;
    }
    .sec13-col {
      width: 100%;
      height: 100px;
      text-align: center;
      position: relative;
    }
    .sec13-container {
      display: flex;
      flex-direction: column;
    }
/* section12 */


  .pagees-container{
    left: 20px;
    right: unset;
    display: none;
  }
  #sec19-cont-team p {
    font-size: 11px;
    line-height: 19px;
  }
  .teamFooter .first {
    font-size: 16px;
    font-weight: 700;
    font-family: Tajawal-Bold;
    margin-top: 20px;
}
  .teamFooter .secound {
    font-size: 14px;
    font-weight: 500;
    margin-top: 7px;
  }
  .sec17-text02 {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 15px;
  }
  .sec17-row-el {
    margin-left: 15px;
  }
  .sec17-row {
    margin-top: 14px;
  }
  .progress-elemnt{
    height: 7px;
    transition: all .5s;
  }
  .sec14-col img {
    margin-bottom: 10px;
  }
  .sec17-num {
    font-size: 25px;
  }
  .sec17-text {
    font-size: 12px;
    margin-bottom: 15px;
  }
  .sec17-year {
    font-size: 31px;
  }
  .logo2 img {
    width: 40px;
  }
  .sec14-col p {
    width: 95%;
  }
  .arrow-right {
    right: 1px;
    width: 41px;
    height: 42px;
    background-color: #44444452 !important;
    padding: 14px 12px 10px 12px;
    border: 1px solid #464646;
  }
  .arrow-left {
    left: 1px;
    background-color: #ffffffd1 !important;
    padding: 14px 12px 10px 12px;
    border: 1px solid #4e2c2c;
    width: 41px;
    height: 42px;
  }
  .logo2 {
    margin-top: 16px;
    left: 5px;
}
.goHome {
  top: 14px;
  left: 56px;
}
.goHome a img {
  width: 23px;
}
  #p4-011{
    width: 23%;
    top: 50%;
    left: 50%;
    margin-top: 35px;
    margin-left: 124px;
    font-size: 12px;
    font-weight: 600;
    font-family: Tajawal-Bold;
    line-height: 20px;
  }
  #sec04-bk {
    position: absolute;
    top: 50%;
    left: 80px;
    min-height: 800px;
    transform: translateY( -50%) scale(0.3);
  }
  .slide-top-center{
    padding: 4rem 3rem 0 3rem;
  }
  #desktop{
    display: none !important;
  }
  #mobile{
    display: block;
  }
  .desktop{
    display: none !important;
  }
  .mobile{
    display: block;
  }
  .continue-text {
    display: none;
  }
  .color-white {
    font-size: 12px;
    line-height: 23px;
  }
  .sec02-col img{
    width: 50px;
  }
  .sec02-col {
    width: 33.33333%;
  }
  .sec02-row {
    display: flex;
    flex-direction: column;
  }
  .mob-rows{
    display: flex;
    flex-direction: row;
  }
  .slide-bottom-center {
    padding: 0rem 4rem 4rem 4rem;
  }
  #sec02-bk {
    left: 50%;
    transform: translateX(-50%);
    width: unset;  
    right: auto;
    object-fit: cover;
  }
  /******* section 9 *******/
    .img09-sec09 {
      width: 89px;
    }
    #p9-01 {
      margin-top: 20px;
      width: 100%;
      margin-left: 0;
    }
    .section09-container09 {
      display: flex;
      flex-direction: column;
    }
    #sec09-bk {
      left: 50%;
      transform: translateX(-50%);
      width: unset;  
      right: auto;
    }
  /******* section 9 *******/


   /******* section 2 *******/
      #section02  .slide-overlay-bottom {
          background: linear-gradient(rgba(0, 0, 0, 0.24),rgba(0, 0, 0, 0.57),rgba(0, 0, 0, 1));
      }
      .sec02-row{
        margin-bottom: 5px;
      }
      #section02 .color-white{
        font-size: 12px;
        line-height: 19px;
      }
   /******* section 2 *******/




   /******* map *******/
      .pointer01 {
        width: 18px;
        margin-top: 56px;
        margin-left: 281px;
      }
      .path01 {
        width: 16px;
        margin-top: -47px;
        margin-left: 273px;
      }
      .sec04-name01 {
        margin-top: -120px;
        margin-left: 235px;
        font-size: 19px;
    }
      .sec04-name02{
        margin-top: -72px;
        margin-left: 208px;
        font-size: 10px;
      }
      .sec04-name02 {
        position: absolute;
        margin-top: -102px;
        margin-left: 208px;
        font-size: 10px;
    }
    .sec04-num01 {
      margin-top: -89px;
      margin-left: 200px;
      font-size: 34px;
    }
    .sec04-name03 {
      margin-top: -58px;
      margin-left: 200px;
      font-size: 12px;
    }
    .pointer03 {
      width: 18px;
      margin-top: 33px;
      margin-left: 327px;
    }
    .path02 {
      width: 16px;
      margin-top: -59px;
      margin-left: 336px;
  }
    .sec04-name05 {
      margin-top: -72px;
      margin-left: 296px;
      font-size: 12px;
  }
    .sec04-name04 {
      margin-top: -120px;
      margin-left: 306px;
      font-size: 10px;
  }
    .sec04-num02 {
      margin-top: -103px;
      margin-left: 305px;
      font-size: 34px;
    }
    .sec04-name06 {
      margin-top: -143px;
      margin-left: 313px;
      font-size: 18px;
    }
    .sec04-name09 {
      margin-top: 99px;
      margin-left: 142px;
      font-size: 12px;
    }
    .sec04-num03 {
      margin-top: 66px;
      margin-left: 160px;
      font-size: 34px;
    }
    .sec04-name08 {
      margin-top: 54px;
      margin-left: 146px;
      font-size: 10px;
  }
    .sec04-name07 {
      margin-top: 34px;
      margin-left: 187px;
      font-size: 18px;
    }
    #p4-012 {
      width: 25%;
      top: 50%;
      padding: 10px 5px 5px 5px;
      left: 50%;
      margin-top: 39px;
      margin-left: 118px;
      font-size: 11px;
      background-color: #00000094;
      font-weight: 600;
      font-family: Tajawal-Bold;
      line-height: 19px;
  }
    .img-map02 {
        width: 81px;
        margin-top: -34px;
        margin-left: 195px;
    }
    .path044 {
      margin-top: -37px;
      margin-left: 241px;
    }
    .sec04-name10 {
      margin-top: -44px;
      margin-left: 286px;
      font-size: 14px;
    }
    .sec04-name11 {
      margin-top: -22px;
      margin-left: 286px;
      font-size: 10px;
      font-weight: 800;
      font-family: Tajawal-Bold;
    }
    .sec04-num04 {
      margin-top: -7px;
      margin-left: 286px;
      font-size: 34px;
    }
    .p04-container02{
      width: 75%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .p04-container01{
      width: 100vw;
    }
    #section05 h3 {
      font-size: 22px;
  }
  .sec10-width {
    width: 100%;
  }
  .right-lyar{
    background: linear-gradient(to right,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 1));
  }
      
   /******* map *******/
    .slide-center-center {
      padding: 0 3rem;
    }
}  




/* on js setion 4 */
/* 


#sec04-bk {
    position: absolute;
    top: 50%;
    left: 350px;
    min-height: 800px;
    transform: translateY( -50%) scale(0.8);
}

*/

@media only screen and (max-height:735px) {
  #section08 #p8-02{
    font-size: 1.8rem;
  }
  #section08 .slide-bottom-center{
    padding: 8rem 4rem 0rem 5rem !important;
  }
}