:root{
    --orange : #FFAA23;
    --red : #FE6150;
    --blue : #124E70;
    --light-blue : #1BC0C6;
    --gray : #DFE0E5;
    --white : #fff;
    --main-font: 'El Messiri', sans-serif;
    --main-font2: 'Tajawal', sans-serif;
}
body{
    transition: all 0.5s;
}
@font-face {
  font-family: testfont;
  src: url(../fonts/ArbFONTS-Montserrat-Arabic-Regular.ttf);
}
@font-face {
  font-family: testfont2;
  src: url(../fonts/ArbFONTS-Montserrat-Arabic-Light.ttf);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .headernew{
    direction: rtl;
    background-color: var(--white);
  }
  .logo{
    width : 125px;
    height : auto;
    margin-right: 5vh;
}
@media only screen and (max-width : 850px){
  .logo{
    margin-right: 2vh;
  }
}
.wrapper{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--blue);
clip-path: circle(0px at calc(5% - 0px) 15px);
transition: all 0.3s ease-in-out;
z-index: 10000;

}
#active:checked ~ .wrapper{
clip-path: circle(75%);
}
.menu-btn{
position: fixed; /*abs*/
z-index: 10001;
/* right: 20px; */
left: 20px;
top: 0px;
height: 50px;
width: 50px;
text-align: center;
line-height: 0px;
border-radius: 50%;
font-size: 20px;
color: var(--blue);
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.desktop-nav{
display: none;
}  
.desktop-link{
text-decoration: none;
}  
.desktop-tamweel-container{
  display: none;
}
@media only screen and (min-width:  1200px) {
   .menu-btn{
            display:none;
    }
    .desktop-nav{
      display: block;
      position: fixed;
      height: max-content;
      top: 2.5vh;
      right: 30vh;
      z-index: 5;
      text-align: center;
      margin: auto;
    }
    .desktop-tamweel-container{
      display: block;
      position: fixed;
      top: 2.5vh;
      left: 5vh;
      z-index: 5;
    }
    .desktop-tamweel{
      color: var(--blue);
      text-decoration: none;
      font-size: 2.5vh;
      padding-top: 0;
      padding-bottom: 0;
      border: 3px solid;
      /* font-weight: bold; */
      border-radius: 0;    
      font-family: testfont;
      transition: 0.25s all;
    }
    .desktop-tamweel:hover{
      color: var(--orange);
      border-color: var(--orange);
    }
    .desktop-list{
      list-style: none;
    }
    .desktop-list-item{
      display: inline-block;
      margin: auto 2vh;
      color: var(--blue);
      font-family: testfont;
      font-size: 20px;
      padding-top: 0;
      /* font-weight: bold; */
    }
    .wrapper{
           display :none;
    }
}
@media only screen and (min-width:  1400px) {
  .desktop-tamweel-container{
    top: 2.5vh;
      left: 2.5vh;
  }
  .desktop-tamweel{
        font-size : 2.25vh;
    }  
  .desktop-nav{
    top: 2.5vh;
    right : 25vh;
  }
}
#active:checked ~ .menu-btn{
color: var(--blue);
}
#active:checked ~ .menu-btn i:before{
content: "\f00d";
}
.wrapper ul{
position: absolute;
top: 50%;
left: 48%;
transform: translate(-48%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li{
margin: 35px 0;
opacity: 0;
}
#active:checked ~ .wrapper ul li{
animation: fade 0.5s linear forwards;
}
#active:checked ~ .wrapper ul li:nth-child(2){
animation-delay: 0.25s;
}
#active:checked ~ .wrapper ul li:nth-child(3){
animation-delay: 0.5s;
}
#active:checked ~ .wrapper ul li:nth-child(4){
animation-delay: 0.75s;
}
#active:checked ~ .wrapper ul li:nth-child(5){
animation-delay: 1s;
}
.wrapper ul li a{
    color: none;
    text-decoration: none;
    padding: 5px 30px;
    color: var(--white);
    border-radius: 50px;
    background: transparent;
    position: relative;
    line-height: 50px;
    transition: all 0.3s ease;
    font-family: testfont2;
    text-transform: uppercase;
}
.wrapper ul li #menu-home{
color: var(--white);
}
.wrapper ul li a:hover:after{
transform: scaleY(1);
}
.wrapper ul li a:hover{
color: var(--white);
}
/*input[type="checkbox"]{
display: none;
}*/
.headernew-checkbox{
    display: none;
}
@media only screen and (max-width:  900px) {
    .wrapper ul{
    left: 40%;
    top: 50%;
    transform: translate( -40% , -50%);
    }  
    .menu-btn{
    top: 0;
    }
    .wrapper ul li{
    margin: 20px;
    }
    .wrapper ul li a{
    padding: 5px 0;
    }
    .wrapper ul li a{
    font-size: 4vh;
    }
}
@keyframes fade {
0%{
  /* transform: translateX(1000px); */
transform: scale(0);
  opacity: 0;
}
100%{
transform: scale(1);
  opacity: 1;
  /* transform: translateX(0); */
}
}


.ham {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin-left: -10px;
margin-top: 1%;
}
.hamRotate.active {
transform: rotate(45deg);
}
.hamRotate180.active {
transform: rotate(180deg);
}
.line {
fill:none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke:var(--blue);
stroke-width:5.5;
stroke-linecap:round;
}

.ham6 .top {
stroke-dasharray: 40 172;
animation: top 3s linear 0s infinite forwards;
}
.ham6 .middle {
stroke-dasharray: 40 111;
animation: middle 3s linear 0s infinite forwards;
}
.ham6 .bottom {
stroke-dasharray: 40 172;
animation: bottom 3s linear 0s infinite forwards;
}
.ham6.active .top {
stroke-dashoffset: -132px;
}
.ham6.active .middle {
stroke-dashoffset: -71px;
}
.ham6.active .bottom {
stroke-dashoffset: -132px;
}

.ham6.active .line{
stroke:var(--white);
} 

/* @keyframes top {
0%{
transform: translateY(0);
}
100%{
transform: translateY(50px);
}
} */

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

/* Track */
::-webkit-scrollbar-track {
background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: var(--blue);
border-radius: 50px;

}


/* Mouse Tracking */
/* @media only screen and (min-width:  900px) {

.cursor {
width: 25px;
height: 25px;
border-radius: 100%;
border: 1px solid var(--offwhite);
transition: all 200ms ease-out;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
transform: translate(calc(-50% + 15px), -50%);
z-index: 2000001;
}

.cursor2 {
width: 20px;
height: 20px;
border-radius: 100%;
background-color: var(--gold1);
opacity: .3;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width .3s, height .3s, opacity .3s;
z-index: 2000000;
}

.hover {
background-color: var(--gold1);
width: 40px;
height: 40px;
opacity: 0.7;
}
.hover2 {
background-color: var(--gold1);
width: 40px;
height: 40px;
opacity: 0.7;
}
.cursorinnerhover {
width: 50px;
height: 50px;
opacity: .5;
}

} */
/* Preloader */

/* #preloader{
z-index: 20000003;
position: fixed;
width: 100%;
height: 100%;
top: 0;
text-align: center;
background-color: var(--blue1);
}
#preloader img{
display: none;
}
#preloader #video{
width: 100%;
height: auto;
}
@media only screen and (max-width:  900px) {
#preloader #video{
position: absolute;
left: 0;
top: 0%;
}
}
@media only screen and (max-width:  900px) and (orientation : portrait){
#preloader img{
position: absolute;
left: 0;
top: 35%;
width: 100%;
height: auto;
display: block;
}
#preloader #video{
display: none;
}
} */

/* @keyframes changebk{
to{
background-color: var(--white);
}
}
@keyframes changecolor{
to{
color: var(--blue);
}
}
@keyframes changebkback{
to{
background-color: transparent;
}
}
@keyframes changecolorback{
to{
color: var(--blue);
}
} */
.navbar-container{
    position: fixed;
    background-color: transparent ; /*var(--white);*/
    z-index: 5;
    width: 100%;
    padding-top: 0%;
    padding-left: 4%;
    padding-bottom: 0%;
    top : 0;
    transition : 0.5s all;
}
@media only screen and (min-width:  1400px) {
.navbar-container{
  padding-top: 0.5%;
  top : 0;
}
}
@media only screen and (max-width: 850px) {
  .navbar-container{
    padding-top: 2%;
  }
}
@media only screen
and (max-device-width : 375px)
and (-webkit-min-device-pixel-ratio: 2){
/*  .menu-btn{
display : none;
}
.wrapper{
  display : none;
}*/
  .navbar-container{
    padding-bottom: 2.5%;
  }
}