/* Design Navbar in mobile  */
/* hamburger Style */
.hamburger {
  position: relative;
  z-index: 999;
  direction: rtl;
  cursor: pointer;
  top: -0.5rem;
}
.hamburger.active{display: none;}
.hamburger:hover {cursor: pointer;}
.hamburger div {
  background-color:#fff ;
  border-radius: 1px;
  height: 2px;
  width: 22.42px;
  direction: rtl;
}
.hamburger .div1{width: 25.11px;}
.hamburger .div2 {width: 18.63px;}
.hamburger .div3{width: 12.55px;}
.hamburger div:not(:last-child) {margin-bottom: 5px;}
.nav-mobile {
  background-image: url(../images/footer-background.png);
  background-position: top;
  background-size: cover;
  position: absolute;
  min-height: min-content;
  max-height: 100%;
  margin-bottom: 2rem;
  width:70%;
  transition: transform 0.3s;
  z-index: 9999;
  border-radius: 5px;
  top: 55px;
  left: 50%;
  transform: translate(-50%,0);
  font-family: 'Inter';
  overflow-y: scroll;
  background: #164A46;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.nav-mobile.topNav{
  min-height: max-content;
  overflow: hidden;
}
.nav-mobile.open {
  opacity: 1;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.nav-mobile::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(232, 232, 232, 0.3);
	border-radius: 10px;
	background-color: transparent;
}
.nav-mobile::-webkit-scrollbar
{
  width:5px;
	background-color: transparent;
}
.nav-mobile::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(235, 235, 235, 0.3);
	background-color: #f3667b ;
}
.nav-mobile .logo {
  text-align: center;
  width: 50%;
  margin: 0 auto 2rem auto;
  display: block;
}
.nav-mobile .logo img {
  border-radius: 50%;
  width: 100%;
}
.nav-mobile .links .fx-links{
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.nav-mobile .links a {
  text-decoration: none;
  font-size: 0.8rem;
  padding: 22px;
  border-bottom: 0.2px solid rgba(255, 255, 255, 0.30);;
  color: #fff;
}
.navbarWhite .nav-mobile .links a {
  border-bottom: 0.2px solid #f2d4d8;
}
 .nav-mobile .links a:last-child{border-bottom: none;}
.elementOpen.no-border {
  border-bottom: none !important;
}
.nav-mobile .links .fx-ListHeader{gap: 4px;}

.nav-mobile .links .listOpen {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.nav-mobile .links .listOpen.open {
  max-height: 100%;
}
.nav-mobile .links a.active{
    letter-spacing: 1px;
    color: #fff;
}
.nav-mobile .links .list-link a:last-child{border-bottom: none;padding-bottom: 0;}
.nav-mobile .links .list-link a.active{background-color: #3b082c;color: #fff;padding:8px 10px;border-radius: 4px;}
.nav-mobile .btn-list.active a{font-weight: bold ;}
nav, .hamburger {
  transition: transform 0.3s;
  display: none;
}
.navbar-mobile{
  display: none;
  position: relative;
  z-index: 1000;
  width: 100%;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.5);
}
.navbar-mobile #menu-toggle{
  display: flex;align-items: center;justify-content: center;
}
.navbar-mobile .flex-head{
  box-shadow: 0px 12px 74px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}
.navbar-mobile .flex-head img{
  width: 60%;
  object-fit: contain;
}
 /* Header Style  */
header{  
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  z-index:999;
}
header .fxHeader{
  justify-content: space-between;
  width: 100%;
  height: 85.31px;
  padding: 0 40px;
  position: fixed;
  z-index: 100;
  transition: all 0.3s ease;
}
header .fxHeader.scrolled {
  background: rgba(0, 0, 0, 0.7);
  height: 70px;
  transition: all 0.3s ease;
}
header .fxHeader .divLogo{width: 17%;object-fit: cover;}
header .fxHeader .divLogo img{width: 100%;}
header .fxHeader .linksHeader{gap: 32px;}
header .fxHeader .linksHeader a{
  text-decoration: none;
  transition: color 0.2s, fill 0.2s;
}
header .fxHeader .linksHeader a.active{font-weight: 700;}
header .fxHeader .linksHeader a:hover{font-weight: 700;}
header .fxHeader .linksHeader .fx-ListHeader{gap: 4px;transition: 0.3s;}
header .fxHeader .linksHeader .fx-ListHeader:hover span,
header .fxHeader .linksHeader .fx-ListHeader.active span{font-weight: 600;color: #d51d36;}
header .fxHeader .linksHeader .fx-ListHeader:hover img,
header .fxHeader .linksHeader .fx-ListHeader.active img {
  filter: invert(28%) sepia(93%) saturate(6264%) hue-rotate(342deg) brightness(87%) contrast(106%);
}

header .fxHeader .lastPart{gap: 0.8rem;}
header .fxHeader .lastPart .contactUsBtn{
  border-radius: 10px;
  background: #0F3330;
  padding: 0 1.2rem;
  transition: 0.3s;
}
header .fxHeader .lastPart .contactUsBtn:hover{
  background: #061a19;
  opacity: 0.9;
}
header .fxHeader .lastPart .langBtn{
  border-radius: 33554400px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.10);
  height: 38px;
  padding: 0 1rem;
  transition: 0.3s;
}
header .fxHeader .lastPart .langBtn:hover{
  background: rgba(255, 255, 255, 0.30);
}
/* Div Search */
.searchDiv{
  height: 100vh;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 0 15%;
  position: fixed;
  right: 0;
  top: 0;
  transition: .3s;
  z-index: 9998;
  background-color: rgba(0, 0, 0, .8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
.searchDiv.active {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.searchDiv .fx-searchDiv{
  height: 55px;
  width: 80%;
  gap: 8px;
}
.searchDiv .fx-searchDiv input{
  border-color: #F2F2F240;
  border-width: 0px 0px 1px 0px;
  border-radius: 60px;
  background: #ffffff;
  padding: 12px;
  font-size: 25px;
  line-height: 1.8;
  color: #00372A;
  width: 90%;
  text-align: center;
}
.searchDiv .fx-searchDiv .closeSearch{
  width: 28px; height: 28px; cursor:pointer;
}
/* End Search Div */
/* Header White */
.headerWhite{position: relative;}
.headerWhite .fxHeader{
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10);
  position: fixed;
  top: 0;
  width: 100%;
  transition: background 0.3s ease, top 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  background: #FFF;
}
.headerWhite .fxHeader .linksHeader a,
.headerWhite .fxHeader .linksHeader .fx-ListHeader span,
.headerWhite .fxHeader .linksHeader .fx-ListHeader img,
.headerWhite .fxHeader.scrolled{
    opacity: 0.95;
    background: #FFF;
    position: fixed;
}
.navbarWhite .nav-mobile{
  background: #fff;
}
.navbarWhite .nav-mobile .links a,
.navbarWhite .nav-mobile .links a span{
  color: #164A46;
  font-weight: 500;
  font-family: 'Tajawal Medium';
}
.navbarWhite .nav-mobile .links .fx-ListHeader img{
filter: invert(88%) sepia(53%) saturate(6264%) hue-rotate(342deg) brightness(87%) contrast(106%);
}
.nav-mobile.topNav .links a{
  -webkit-tap-highlight-color: transparent;
   outline: none;
}

@media (min-width:1706.67px) {
  header .fxHeader{height: 95px;}
  header .fxHeader .linksHeader,
  header .fxHeader{height: 90px;}
  header .fxHeader .lastPart .langBtn{height: 42px;}
  header .fxHeader.scrolled {height: 75px;}
}
@media (min-width:1920px) {
  header .fxHeader{height: 115px;}
  header .fxHeader .linksHeader,
  header .fxHeader{height: 110px;}
  header .fxHeader.scrolled {height: 85px;}
  header .fxHeader .lastPart .langBtn{height:50px;padding: 0 1.5rem;}
header .fxHeader .lastPart .langBtn img{width: 20px;height: 20px;}
}
@media (min-width:2048px) {
 header .fxHeader{height: 120px;}
  header .fxHeader.scrolled {height: 95px;}
}
@media (min-width:2304px) {
 header .fxHeader{position: absolute;}}
 .headerWhite .fxHeader{position: absolute;}
@media (min-width:3072px) {}
@media (max-width:1396.36px) {
}
@media (max-width:1228.8px) {
  header .fxHeader .linksHeader,
  header .fxHeader{height: 75px;}
}
@media (max-width:1024px) {
  header .fxHeader{height: 90px;}
    header .fxHeader .lastPart .langBtn{height: 30px;padding: 0 10px;}
    header .fxHeader .lastPart .langBtn img{width: 12px;height: 12px;}
}
@media (max-width:877.71px) {
  header{display: none;}
  .navbar-mobile{display: block;position:fixed;padding:8px 100px;height:65px;}
  .navbarWhite{position: fixed;background: #fff;box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10);}
  .navbarWhite .flex-head{box-shadow: none;}
  .navbarWhite #menu-toggle img{filter: brightness(1) invert(1);}
  .navbarWhite.scrolledNavbar{background: #fff !important;}
  .hamburger{display: flex;flex-direction: column;align-items: end;}

  .navbar-mobile.scrolledNavbar{height: 45px;position:fixed;}
  .nav-mobile{top: 65px;width: 78%;}
  .nav-mobile.topNav{top: 45px;}
  .nav-mobile.topNav .links a{
    padding:12px 16px;
  }
}
@media (max-width:768px) {
  .navbar-mobile{padding:8px 24px;}
  .nav-mobile{width: 95%;}
  .nav-mobile .links a,
  .nav-mobile .links .fx-ListHeader span{font-size: 16px;}
}

@media screen and (max-width: 1280px) and (min-height: 800px) {
  .nav-mobile.open{min-height: max-content !important;}
}
@media screen and (max-width: 1024px) and (min-height: 1366px) {
  .nav-mobile.open{min-height: max-content !important;}
}
@media screen and (max-width: 820px) and (min-height: 1180px) {
  .nav-mobile.open{min-height: max-content !important;}
  .navbar-mobile{height: 90px;}
  .navbar-mobile.scrolledNavbar{height: 70px;}
  .nav-mobile.topNav{top: 70px;}
  .nav-mobile{top: 90px;width: 100%;}
  .nav-mobile .links a,
  .nav-mobile .links .fx-ListHeader span{font-size: 1.1rem;}
  .navbar-mobile{padding: 8px 16px;}
  .nav-mobile.topNav .links a {padding: 16px;}
}
@media screen and (max-width: 768px) and (min-height: 1024px) {
  .nav-mobile.open{min-height: max-content !important;}
  .navbar-mobile{height: 90px;}
  .navbar-mobile.scrolledNavbar{height: 70px;}
  .nav-mobile.topNav{top: 70px;}
  .nav-mobile{top: 90px;}
}
@media (min-height:800px) {
  .nav-mobile .links a, .nav-mobile .links .fx-ListHeader span,
  .formLang button, .formLang span{font-size: 20px;}
}
@media (max-width:614.4px) {
  .navbar-mobile{padding:8px 20px;}
  .navbar-mobile .flex-head img{width: 70%;}
  .navbar-mobile{height: 76.338px;}
  .navbar-mobile.scrolledNavbar{
    height: 65px;
    background: rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
  }
  .nav-mobile{top: 76.338px;width: 100%;
  min-height:77vh;
  }
  .nav-mobile.topNav{top: 65px;}
  .nav-mobile.topNav .links a{padding:12px;}
  .navbar-mobile .flex-head a{width: 76%;}
  .navbar-mobile .flex-head .logo-image{width: 60%;}
  .nav-mobile.open.NavInTop{min-height: 73vh !important;}

}
@media (max-width:512px) {
  
}