.flex_nav {
  position: fixed;
  left: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 98;
  background: #353535;
  padding: 50px 12px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.icon_nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.icon_nav i {
  color: #BECCCF;
  font-size: 16px;
  transition: var(--transition);
}
.icon_nav i:hover {
  color: #14B8E1;
  transform: scale(1.2);
}
.lang_ar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lang_ar hr:not([size]) {
  height: 1px;
  background: #BECCCF    ;
  width: 100%;
  border-top:transparent;
  margin: 7px 0;
  opacity: 1;
}
.lang_ar a {
  font-size: 14px;
  color: #BECCCF !important;
}
.lang_ar a.active {
  color: #FCFDFB!important;
}
.buttom_fill {
  position: relative;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  transition: .5s;
  font-size: 14px;
  background: #00A6CE 0% 0% no-repeat padding-box;
  text-transform: uppercase;
  align-items: center;
  height: 50px;
  border: 1px solid transparent;
  z-index: 1;
  font-weight: bold;
  padding: 10px 40px;
  color: #fff !important;
text-transform: capitalize;
border: 1px solid  transparent;
}
 
 .buttom_fill::before, .buttom_fill::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -3;
  background-color: #FFF;
  transition: 1s ease;
 }

 
 .buttom_fill::before {
  top: -2em;
  left: -2em;
 }
 
 .buttom_fill::after {
  left: calc(100% + 2em);
  top: calc(100% + 2em);
 }
 
 .buttom_fill:hover::before, .buttom_fill:hover::after {
  height: 410px;
  width: 410px;
 }
 .buttom_fill:hover {
  color: #00A6CE !important;
  border: 1px solid #00A6CE ;
}
 .buttom_fill:active {
  filter: brightness(.8);
 }
 
 .flex__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
 }

 
 .nav_fullscreen {
  position: fixed;
  z-index: 997;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(45deg, #021b21bf, #011a21e3); */
  /* background-attachment: fixed; */
  background:  #000b0eed;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 200px;
  padding: 150px;
}
 
 
.nav_fullscreen.active {
  left: 0%;
}
.bars i {
  color: #FCFDFB ;  
  font-size: 20px;
}
canvas#bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: -1;
}

.nav_fullscreen ul {
display: flex;
flex-direction: column;
gap: 20px;
}
.nav_fullscreen ul li {
  -webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  font-family: "Bold_font", sans-serif !important;

} 
 .nav_fullscreen ul li a {
 
  color: #BECCCF !important;
font-size: 32px ;
font-weight: bold;
  transition: var(--transition);
}
  .nav_fullscreen ul li a:hover {
    color: #00A6CE !important;
    padding-right: 15px;
    }
  
  .img_logo_full {
    width: 39px;
    height: auto;
  }
  
  .close_i i {
    color: #fff   ;
  font-size: 25px;
  cursor: pointer;
}
.close_i   {
  position: absolute;
  top: 4%;
  left: 3%;
  cursor: pointer;
}

 
@-webkit-keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}