/* Design Navbar in mobile  */
.hamburger {
  position: relative;
  z-index: 999;
  cursor: pointer;
}
.hamburger:hover {
  cursor: pointer;
}
.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: #2F0006;
  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;}
  .nav-mobile .links .listMediaCenter a:last-child{  border-bottom: 0.2px solid rgba(255, 255, 255, 0.30);;}
.elementOpen.no-border {
  border-bottom: none !important;
}
.nav-mobile .links .fx-ListHeader{gap: 4px;}
.nav-mobile .links .DivListHeader .listMediaCenter{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.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: 100%;
  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;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 50px;
  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: 24%;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: 600;  color: #d51d36;}
header .fxHeader .linksHeader a:hover{
  color: #840718;
  fill: #840718;
  font-weight: 600;
}
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 .searchPart{gap: 32px;}
header .fxHeader .searchPart button{background: none;}
header .fxHeader .searchPart .langBtn{font-size: 22px;}
/* DropDown list Media Center */
 .DivListHeader {position: relative;}
 header .DivListHeader .listMediaCenter{
  position: absolute;
  background-color: #690412;
  border-radius: 10px 10px 10px 10px;
  display: none;
  flex-direction: column;
  width: 10em;
  top: 3rem;
  transition: 0.3s;
 }
  header .DivListHeader .listMediaCenter a{
  padding: 10px 16px;
  border-bottom:0.5px solid #940e20;
  }
header .DivListHeader .listMediaCenter a:hover{
  font-weight: 500;
  background:#fffbfb ;
}
header .DivListHeader .listMediaCenter a:first-child{
  border-radius: 10px 10px 0 0;
}
header .DivListHeader .listMediaCenter a:last-child{
  border-bottom: 0;
  border-radius: 0 0 10px 10px;
}
#menu-toggle img{cursor: pointer;width: 90%;}
/* 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 .searchPart .langBtn{color: #000;}
.headerWhite .fxHeader .linksHeader .fx-ListHeader img,
.headerWhite .fxHeader .searchPart button img{filter: brightness(1) invert(1);}
.headerWhite .DivListHeader .listMediaCenter a{color: #fff;}
.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: #44020c;
  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;
}
.searchNavbar{
  justify-content: center;
  padding: 22px 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);;
}
.searchNavbar .boxSearchNavbar{
  gap: 12px;
  justify-content: center;
  border-radius: 5px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.60);
  width: 100%;
  height: 46px;
  transition: all 0.3s ease;
}
.searchNavbar .boxSearchNavbar input {
  background: none;
  border: none;
  width: 40%;
  color: #000;
  font-size: 16px;
  height: 100%;
  line-height: 25.6px;
  text-transform: capitalize;
  transition: width 0.4s ease;
}
.searchNavbar.active .boxSearchNavbar input {
  width: 80%;
}
.searchNavbar .boxSearchNavbar input::placeholder{color: #000;}
.formLang{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 22px 0;
}
.formLang button,
.formLang span{
  background: none;
  font-size: 16px;
}
.navbarWhite .searchNavbar .boxSearchNavbar{background: #f2d4d8;}
.navbarWhite .searchNavbar{
  border-bottom: 0.2px solid #f2d4d8;
}
.formLang button.active{color: #B63B4E;}
.navbarWhite .searchNavbar .boxSearchNavbar input{color: #44020c;}
.navbarWhite .formLang button,
.navbarWhite .formLang span{color:#44020c;}
.navbarWhite .formLang button.active{color: #44020c; font-weight: 600;}
@media (min-width:1706.67px) {
  header .fxHeader{height: 95px;}
  header .fxHeader .searchPart .langBtn{font-size: 24px;}
  header .fxHeader .searchPart img{width: 35px;}
  header .fxHeader .linksHeader,
  header .fxHeader .searchPart{gap: 40px;}
  header .fxHeader{height: 90px;}
  header .fxHeader.scrolled {height: 75px;}
   header .DivListHeader .listMediaCenter{width: 12em;}
   header .DivListHeader .listMediaCenter a{padding: 16px;font-size: 17px;}
}
@media (min-width:1920px) {
  header .fxHeader{height: 115px;}
  header .fxHeader .searchPart .langBtn{font-size: 27px;}
  header .fxHeader .searchPart img{width: 40px;}
  header .fxHeader .linksHeader,
  header .fxHeader .searchPart{gap: 48px;}
  header .fxHeader{height: 110px;}
  header .fxHeader.scrolled {height: 85px;}
}
@media (min-width:2048px) {
 header .fxHeader{height: 120px;}
  header .fxHeader.scrolled {height: 95px;}
  header .fxHeader .searchPart .langBtn{font-size: 30px;}
}
@media (min-width:2304px) {
 header .fxHeader{position: absolute;}}
 .headerWhite .fxHeader{position: absolute;}
@media (min-width:3072px) {}
@media (max-width:1396.36px) {
  header .fxHeader .searchPart .langBtn{font-size: 20px;}
  header .fxHeader .searchPart .searchIcon{width: 25px;}
}
@media (max-width:1228.8px) {
  header .fxHeader .linksHeader,
  header .fxHeader .searchPart{gap: 24px;}
  header .fxHeader{height: 75px;}
  header .fxHeader .searchPart .langBtn{font-size: 18px;}
}
@media (max-width:1024px) {
  header .fxHeader{height: 90px;}
  header .fxHeader .searchPart .langBtn{font-size: 16px;}
  header .fxHeader .searchPart .searchIcon{width: 20px;}
}
@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: block;}

  .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;}
  .searchNavbar .boxSearchNavbar{height: 51px;}
}
@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: 100%;}
  .nav-mobile.open.NavInTop{min-height: 73vh !important;}

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