*{
    font-family: 'Tajawal', sans-serif;
}
body, html {
    font-size:18px;
    margin: 0;
    padding: 0;
}
:root {
    --color1: #555555;
    --color2: #eb5b38;
    --color3: #fff;
    --color4: #121212;
    --color5: #70b4c5;
  }
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
                                  /*-------(============================[Top-Navbar]============================)-------*/
    img.navLogo {height: 80px;}
    .top-nav{--bs-navbar-padding-y: 0; font-size: 20px; font-weight: bold;}
    button#dropdownMenuButton1 {background: transparent; color: #121212; border: none;}
    .topNavLink{margin: 0 20px; text-align: center;}
    .mainNavigation{width: 80%; justify-content: center;}
    .rightNavSide{display:grid; justify-content: center;}
.nav-lang {
    color: var(--color2) !important;
    font-weight: bold;
    font-size: 22px;
}
                                  /*-------(============================[Top-Navbar]============================)-------*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
                                   /*-------(============================[Map]============================)-------*/
  .map-container{overflow:hidden; padding-bottom:56.25%; position:relative; height:0;}
  .map-container iframe{left:0; top:0; height:100%; width:100%; position:absolute;}
  .map-container{border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);}
                                   /*-------(============================[Map]============================)-------*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
                                   /*-------(============================[Hero]============================)-------*/
  .imageOverlapping{padding: 0; width: 400px; height: 400px;}
  .imageOverLappingOne{width: 250px; height: 250px; position: relative; z-index: 2; margin: 0px 150px 100px 0px;overflow: hidden;}
  .imageOverLappingTow{width: 250px; height: 250px; position: relative; z-index: 1; margin: -200px 0px 0px 200px; overflow: hidden;}
  .OverlappingImageOne{ width: 100%; height: 100%; max-width: 100%; object-fit: cover; border-radius: 15px;}
  .OverlappingImageTow{ width: 100%; height: 100%; max-width: 100%; object-fit: cover; border-radius: 15px;}
  .col-md-4.col-ms-4.col-xs-4.place-logo img {width: 100px; height: 100px;}
  .place-logo {width: 100px; width: 100px;}
  .col-md-4.col-ms-4.col-xs-4.place-logo img {width: 100px; height: 100px}
  .place-logo, .place-name, .place-shear {display: inline-block; align-items: center; justify-content: center;}
   @media screen  and (min-width:320px)and (max-width:480px) {
    .imageOverlapping{padding: 0; width: 200px; height: 200px;}
   .imageOverLappingOne{width: 125px; height: 125px; position: relative; z-index: 2; margin: 0px 75px 50px 0px;overflow: hidden;}
   .imageOverLappingTow{width: 125px; height: 125px; position: relative; z-index: 1; margin: -100px 0px 0px 100px; overflow: hidden;}}
                                   /*-------(============================[Hero]============================)-------*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
                                  /*-------(============================[Card]============================)-------*/
  ol, ul {padding-left: 12rem;}
  dl, ol, ul {margin-top: 0; margin-bottom: 0rem;}
  a.placeinfonav {text-decoration: none; color: #121212;}
 /*Mobile*/
 @media screen  and (min-width:320px)and (max-width:480px) {}
  /*Ipads,Tablets*/
  @media screen  and (min-width:481px)and (max-width:768px) {ol, ul {padding-left: 2rem;}}
  /*Small screens*/
  @media screen  and (min-width:769px)and (max-width:1024px) {ol, ul {padding-left: 6rem;}}
  .card{border: 0px solid rgba(0,0,0,.125);}
                                  /*-------(============================[Card]============================)-------*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
                                  /*-------(============================[Ftooter]============================)-------*/
  footer {height: 45px; background-color: var(--color1); color: var(--color3); font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 99;}
  footer .row{margin: 0; padding: 0;}
  footer .leftSide {display: flex;}
  footer .leftSide > div {    padding-right: 50px;}
  footer .rightSide {text-align: right;padding: 0;}
                                  /*-------(============================[Footer]============================)-------*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
                                  /*-------(============================[Navigation]============================)-------*/
  .center-navigation{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
  .center-navigation-item a{text-decoration: none; color: var(--color4); line-height: 60px; font-weight: bold;}
  .center-navigation-item {text-align: center; font-size: 24px;}
  .center-navigation-item:hover {border-bottom:3px solid var(--color2);}
  .center-navigation-item:hover a{color: var(--color2);}

                                    /*-------(============================[Navigation]============================)-------*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*=================================================================={Separator}===============================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
  /*============================================================================================================================================*/
@media screen and (max-width: 1199px)
  {
  /*--------Navigaton---------------*/

  .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {display: flex; flex-wrap: inherit; align-items: center; justify-content: center;}
  a.navbar-brand.navigation-brand {margin: 0px 5%; width: 14%; font-size: 25px; font-weight:600;}
  }

@media screen and (max-width: 991px)
  {
  /*--------Navigaton---------------*/

  .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {display: flex; flex-wrap: inherit; align-items: center; justify-content: center;}
  a.navbar-brand.navigation-brand {margin: 0px 5%; width: 13%; font-size: 20px; font-weight:600;}

  /*--------footer---------------*/

  footer .row.container {font-size: 14px;font-weight: 600;}

  }

@media screen and (max-width: 767px)
  {
  /*--------Navigaton---------------*/

  .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {display: flex; flex-wrap: inherit; align-items: center; justify-content: center;}
  a.navbar-brand.navigation-brand {margin: 0px 2%; width: 16%; font-size: 20px; font-weight:600;}

  /*----------footer -----------*/

  footer .row.container {font-size: 11px;font-weight: 600;}
  footer .leftSide > div {padding-right: 30px; }

  }

@media screen and (max-width: 576px)
  {
  /*--------Navigaton---------------*/

  .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {display: flex; flex-wrap: inherit; align-items: center; justify-content: center;}
  a.navbar-brand.navigation-brand {margin: 0px 2%; width: 20%; font-size: 18px; font-weight:600;}
  }

@media screen and (max-width: 481px)
  {
  /*--------Navigaton---------------*/

  .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {display: flex; flex-wrap: inherit; align-items: center; justify-content: center;}
  a.navbar-brand.navigation-brand {margin: 0px 2%; width: 22%; font-size: 16px; font-weight:600;}

  /*----------footer -----------*/

  footer .row.container {font-size: 9px;}
  footer .leftSide > div {padding-right: 10px;}

  }

@media screen and (max-width: 360px)
  {
  /*--------Navigaton---------------*/

  .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {display: flex; flex-wrap: inherit; align-items: center; justify-content: center;}
  a.navbar-brand.navigation-brand {margin: 0px 2%; width: 28%; font-size: 16px; font-weight:600;}
  }