.nav_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.nav-bar {
  padding: 20px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  background: #fff;
}
.btn_nav {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.nav-bar .ul a {
  transition: var(--transition);
  font-family: "font_reg", sans-serif !important;
}

.nav-bar .ul {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.nav-bar .ul li {
  font-size: 18px;
  color: var(--p) !important;
  position: relative;
}

.nav-bar .ul li.active    {
  color:  var(--orang_o) !important;
  font-weight: bold;
}

.nav-bar .ul li:hover   {
  color:  var(--orang_o)  !important;
  font-weight: bold;
}

.y {
  display: none;
}

.lang_ar a {
  font-size: 14px;
  color: #B6BAC5 !important;
}

.lang_ar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--h2);
  gap: 10px;
}
.lang_ar a.active {
  color: var(--h2) !important;
}
 
.d_line {
  width: 1px;
  height: 17px;
  background: #B6BAC5;
}
.load_logo img {
  width: auto;
  height: auto;
}

.menu .bars {
  width: auto;
  height: auto;
  max-width: 50px;
cursor: pointer;
}
 
 
.nav_bar .buttom_fill {
  margin-right: 30px !important;
}

.border_nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #5D6267;
  z-index: -1;
}

.border_nav {
  position: relative;
  height: 80px;
  gap: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}





.fixed_navbar {
    box-shadow: 0 0 53px #757b8b42;
  }
 
.logo-main {
    max-width: 130px;
    height: auto;
    width: auto;
}
 


@-webkit-keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}


.navbar_fullscreen {
  transition: all ease 700ms;
  width: 100%;
  height: 0;
 pointer-events: none;
 display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  background:  linear-gradient(45deg, #181a21, #1f212a, #272b35);
  overflow: hidden;
}
.navbar_fullscreen_active {
  height: 100%;
  pointer-events: visible;
  overflow: visible;
 } 
 
.navbar_fullscreen .close {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  background: #ee3224;
  border-radius: 50%;
  position: absolute;
  right: 50px;
  top: 50px;
}
.navbar_fullscreen ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 32px;
  padding: 150px;
  font-weight: bold;

}

.navbar_fullscreen ul li { 
      color: #fff;
        transition: all ease 500ms;
}
.navbar_fullscreen ul li:hover { 
      color: #757b8b;
}

.buttom_fill {
  padding: 15px 35px;
  border: 1px solid transparent;
  color: #fff !important ;
  background: var(--btn);
  font-size:  14px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.buttom_fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: scale(0);
  transition: transform 0.5s ease;
}

.buttom_fill:hover::after {
  transform: scale(4);
}

.buttom_fill:hover {
  color: var(--btn) !important ;
  background-color: transparent;
  border: 1px solid var(--btn);
}
 
.flex_btn {
  display: flex;
  gap: 15px;
  align-items: center;
}
.left_nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.buttom_embty {
  padding: 15px 35px;
  border: 1px solid var(--btn);
  background-color: transparent;
  color: #454851 !important ;
  font-size:  14px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.buttom_embty::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: scale(0);
  transition: transform 0.5s ease;
}

.buttom_embty:hover::after {
  transform: scale(4);
}

.buttom_embty:hover {
  background: var(--btn);
  color: #fff !important ;
}