/* =========================================  head top start  ======================================== */
 .head-top {
   margin: 0;
 }

 .head-top .head-address {}

 .head-top .head-address .top-addrss {
   display: block;
 }

 .head-top .head-address .top-mail {
   display: block;
 }

 .head-top .head-address .top-phone {
   display: block;
 }

 .head-top .head-address ul {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px 0;
 }

 .head-top .head-address ul li {
   list-style: none;
   margin: 0 20px 0 0;
   font-size: 15px;
 }

 .head-top .head-address ul li i {
   color: #f26726;
   font-size: 16px;
   margin: 0 4px 0 0;

 }

 .head-top .head-address ul li a {}

 .follow-us {}

 .follow-us ul {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px 0;
 }

 .follow-us ul li {
   list-style: none;
   margin: 0 8px 0 0;
   font-size: 15px;
 }

 .follow-us ul li a {}

 .follow-us ul li a i {
   color: #f26726;
 }

 .follow-us ul li a i:hover {
   color: #333;
 }

 /* =========================================  head top end ======================================== */

 nav {
   position: fixed;
   top: 44px;
   left: 0;
   width: 100%;
   height: 100%;
   height: 80px;
   background: #333;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

 nav .navbar {
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: auto;
   /* background: red; */
   padding: 0 90px;
 }

 .navbar .logo a {
   font-size: 30px;
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   position: absolute;
   top: -44px;
 }

 .navbar .logo a img {
   width: 112px;
 }


 .navbar .logo::before {
   position: absolute;
   top: 0;
   left: -70px;
   -webkit-transform: skewX(-40deg);
   transform: skewX(-40deg);
   z-index: -1;
   background-color: #ffffff;
   width: 410px;
   height: 88px;
   content: "";
 }

 nav .navbar .nav-links {
   line-height: 70px;
   height: 100%;
   padding: 0 0 0 250px;
 }

 nav .navbar .links {
   display: flex;
 }

 nav .navbar .links li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   list-style: none;
   padding: 5px 14px;
 }

 nav .navbar .links li .rental-arrow {
   color: #fff !important;
 }

 nav .navbar .links li a {
   height: 100%;
   text-decoration: none;
   white-space: nowrap;
   color: #fff;
   font-size: 15px;
 }

 .links li:hover .htmlcss-arrow,
 .links li:hover .js-arrow {
   transform: rotate(180deg);
 }

 nav .navbar .links li .arrow {
   /* background: red; */
   height: 100%;
   width: 22px;
   line-height: 70px;
   text-align: center;
   display: inline-block;
   color: #333;
   transition: all 0.3s ease;
 }

 nav .navbar .links li .sub-menu {
   position: absolute;
   top: 70px;
   left: 0;
   line-height: 40px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   border-radius: 0 0 4px 4px;
   display: none;
   z-index: 2;
 }

 nav .navbar .links li:hover .htmlCss-sub-menu,
 nav .navbar .links li:hover .js-sub-menu {
   display: block;
 }

 .navbar .links li .sub-menu .more .more-sub-menu.sub-menu li {
   padding: 0 22px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
 }
 .navbar .links li .sub-menu li {
   padding: 0 22px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
 }
 .navbar .links li .sub-menu .more { 
   padding: 0 10px 10px 10px;
 }

 .navbar .links li .sub-menu li:hover {
   background: #f26726;
   
 }

 .navbar .links li .sub-menu li:hover a {
   color: #fff;
 }

 .navbar .links li .more-sub-menu.sub-menu li a {
   color: #333 !important;
 }

 .navbar .links li .more-sub-menu.sub-menu li:hover a {
   color: #fff !important;
 }

 .navbar .links li .sub-menu a {
   color: #333;
   font-size: 15px;
   font-weight: 500;
 }

 .navbar .links li .sub-menu .more-arrow {
   line-height: 40px;
   position: absolute;
   right: 0;
   top: 0;
   height: auto;
   color: #333;
 }
 .navbar .links li .sub-menu li:hover i{ 
   color: #fff;
 }

 .navbar .links li .htmlCss-more-sub-menu {
   /* line-height: 40px; */
 }

 .navbar .links li .sub-menu .more-sub-menu {
   position: absolute;
   top: 0;
   left: 100%;
   border-radius: 0 4px 4px 4px;
   z-index: 1;
   display: none;
 }

 .links li .sub-menu .more:hover .more-sub-menu {
   display: block;
 }

 .navbar .search-box {
   position: relative;
   height: 40px;
   width: 40px;
 }

 .navbar .search-box i {
   position: absolute;
   height: 100%;
   width: 100%;
   line-height: 40px;
   text-align: center;
   font-size: 22px;
   color: #333;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .navbar .search-box .input-box {
   position: absolute;
   right: calc(100% - 40px);
   top: 80px;
   height: 60px;
   width: 300px;
   background: #f26726;
   border-radius: 6px;
   opacity: 0;
   pointer-events: none;
   transition: all 0.4s ease;
 }

 .navbar.showInput .search-box .input-box {
   top: 65px;
   opacity: 1;
   pointer-events: auto;
   background: #f26726;
 }

 .search-box .input-box::before {
   content: '';
   position: absolute;
   height: 20px;
   width: 20px;
   background: #f26726;
   right: 10px;
   top: -6px;
   transform: rotate(45deg);
 }

 .search-box .input-box input {
   position: absolute;
   top: 50%;
   left: 50%;
   border-radius: 4px;
   transform: translate(-50%, -50%);
   height: 35px;
   width: 280px;
   outline: none;
   padding: 0 15px;
   font-size: 16px;
   border: none;
 }

 .navbar .nav-links .sidebar-logo {
   display: none;
 }

 .navbar .bx-menu {
   display: none;
 }

 .navbar .links li .sub-menu .more {
  padding: 0 10px 0px 22px;
}

 @media (max-width:920px) {
   nav .navbar {
     max-width: 100%;
     padding: 0 25px;
   }

   nav .navbar .logo a {
     font-size: 27px;
   }

   nav .navbar .links li {
     padding: 0 10px;
     white-space: nowrap;
     flex-wrap: wrap;
   }

   nav .navbar .links li a {
     font-size: 15px;
     color: #333;
   }
 }

 @media (max-width:800px) {


   nav {
     /* position: relative; */
   }

   .navbar .bx-menu {
     display: block;
   }

   nav .navbar .nav-links {
     position: fixed;
     top: 0;
     left: -100%;
     display: block;
     max-width: 470px;
     width: 100%;
     background: #fff;
     line-height: 40px;
     padding: 20px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     transition: all 0.5s ease;
     z-index: 1000;
     overflow: scroll;
   }

   .navbar .nav-links .sidebar-logo {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }

   .navbar .nav-links .sidebar-logo img {
     width: 70px;
   }

   .sidebar-logo .logo-name {
     font-size: 25px;
     color: #fff;
   }

   .sidebar-logo i,
   .navbar .bx-menu {
     font-size: 25px;
     color: #333;
   }

   nav .navbar .links {
     display: block;
     margin-top: 20px;
     overflow-y: scroll;
     height: -webkit-fill-available;
   }

   nav .navbar .links li .arrow {
     line-height: 40px;
     color: #333;
   }

   nav .navbar .links li {
     display: block;
   }

   nav .navbar .links li .sub-menu {
     position: relative;
     top: 0;
     box-shadow: none;
     display: none;
   }

   nav .navbar .links li .sub-menu li {
     border-bottom: none;

   }
   .navbar .links li .sub-menu .more:hover
   {
    padding: 0 10px 10px 22px;
   }

   .navbar .links li .sub-menu .more-sub-menu {
     display: none;
     position: relative;
     left: 0;
   }

   .navbar .links li .sub-menu .more-sub-menu li {
     display: flex;
     align-items: center;
     justify-content: space-between; 
   }

   .links li:hover .htmlcss-arrow,
   .links li:hover .js-arrow {
     transform: rotate(0deg);
   }

   .navbar .links li .sub-menu .more-sub-menu {
     display: none;
   }

   .navbar .links li .sub-menu .more span {
     /* background: red; */
     display: flex;
     align-items: center;
     justify-content: space-between;
   }

   .links li .sub-menu .more:hover .more-sub-menu {
     display: none;
   }

   nav .navbar .links li:hover .htmlCss-sub-menu,
   nav .navbar .links li:hover .js-sub-menu {
     display: none;
   }

   .navbar .nav-links.show1 .links .htmlCss-sub-menu,
   .navbar .nav-links.show3 .links .js-sub-menu,
   .navbar .nav-links.show2 .links .more .more-sub-menu {
     display: block;
   }

   .navbar .nav-links.show1 .links .htmlcss-arrow,
   .navbar .nav-links.show3 .links .js-arrow {
     transform: rotate(180deg);
   }

   .navbar .nav-links.show2 .links .more-arrow {
     transform: rotate(90deg);
   }
 }

 @media (max-width:370px) {
   nav .navbar .nav-links {
     max-width: 100%;
   }
 }

 nav.sticky {
   top: 0;

 }

 nav.sticky .navbar .logo a img {
   width: 80px;
 }

 nav.sticky .navbar .logo a {
   top: 0;
 }

 @media only screen and (min-width : 1601px) and (max-width : 1920px) {}

 @media only screen and (min-width : 1481px) and (max-width : 1600px) {}

 @media only screen and (min-width : 1366px) and (max-width : 1480px) {

   nav.sticky .navbar .logo a img {
     width: 75px;
   }

   .navbar .logo a img {
     width: 101px;
   }

   .navbar .logo::before {
     width: 300px;
     height: 75px;
   }

   .head-top .head-address ul {
     padding: 8px 0;
   }

   .follow-us ul {
     padding: 8px 0;
   }

   nav {
     top: 40px;
     height: 75px;
   }

   nav .navbar .links li {
     padding: 3px 14px;
   }

   nav .navbar {
     padding: 0 50px;
   }

   nav .navbar .links {
     padding: 0 0 0 100px;
   }

 }

 @media only screen and (min-width : 1281px) and (max-width : 1365px) {

   nav.sticky .navbar .logo a img {
     width: 75px;
   }

   .navbar .logo a img {
     width: 101px;
   }

   .navbar .logo::before {
     width: 300px;
     height: 75px;
   }

   .head-top .head-address ul {
     padding: 8px 0;
   }

   .follow-us ul {
     padding: 8px 0;
   }

   nav {
     top: 40px;
     height: 75px;
   }

   nav .navbar .links li {
     padding: 3px 14px;
   }

   nav .navbar {
     padding: 0 50px;
   }

   nav .navbar .links {
     padding: 0 0 0 100px;
   }
 }

 @media only screen and (min-width : 1200px) and (max-width : 1280px) {

   nav.sticky .navbar .logo a img {
     width: 70px;
   }

   nav .navbar .links li a {
     font-size: 14px;
   }

   nav .navbar .nav-links {
     padding: 0 0 0 30px;
   }

   .navbar .logo a img {
     width: 101px;
   }

   .navbar .logo::before {
     width: 270px;
     height: 75px;
   }

   .head-top .head-address ul {
     padding: 8px 0;
   }

   .follow-us ul {
     padding: 8px 0;
   }

   nav {
     top: 40px;
     height: 75px;
   }

   nav .navbar .links li {
     padding: 3px 14px;
   }

   nav .navbar {
     padding: 0 50px;
   }

   nav .navbar .links {
     padding: 0 0 0 140px;
   }
 }

 @media only screen and (min-width : 1024px) and (max-width : 1199px) {

   nav.sticky .navbar .logo a img {
     width: 60px;
   }

   nav .navbar .nav-links {
     padding: 0px;
   }

   .follow-us {
     display: block;
   }

   .navbar .logo a img {
     width: 89px;
   }

   .navbar .logo::before {
     width: 270px;
     height: 60px;
   }

   .head-top .head-address ul {
     padding: 8px 0;
   }

   .follow-us ul {
     padding: 8px 0;
   }

   nav {
     top: 40px;
     height: 60px;
   }

   nav .navbar .links li {
     padding: 0px 12px;
   }

   nav .navbar {
     padding: 0 50px;
   }

   nav .navbar .links {
     padding: 0 0 0 140px;
   }


 }

 @media only screen and (min-width : 768px) and (max-width : 1023px) {

   nav.sticky .navbar .logo a img {
     width: 55px;
   }

   nav .navbar .links li .rental-arrow {
     color: #333 !important;
   }

   .follow-us {
     display: none;
   }

   .head-top .head-address ul {
     justify-content: flex-end;
   }

   nav {
     position: fixed;
     height: 50px;
   }

   .navbar .logo a img {
     width: 80px;
   }

   .navbar .logo {
     position: absolute;
     top: 0;
   }

   .navbar .bx-menu {
     position: absolute;
     right: 20px;
     z-index: 99999;
     color: #fff !important;
   }

   .header-event {
     position: absolute;
     right: 60px;

   }

   .navbar .logo::before {
     width: 230px;
     height: 50px;
   }

 }

 @media only screen and (min-width : 150px) and (max-width : 767px) {

   nav.sticky .navbar .logo a img {
     width: 40px;
   }

   nav .navbar .links li .rental-arrow {
     color: #333 !important;
     position: absolute;
     right: 0;
     top: 0;
     height: auto;
   }

   nav {
     position: fixed;
     height: 40px;
     top: 34px;
   }

   .navbar .logo a img {
     width: 73px;
   }

   .navbar .logo {
     position: absolute;
     top: 0;
   }

   .navbar .bx-menu {
     position: absolute;
     right: 20px;
     z-index: 99999;
     color: #fff !important;
   }

   .header-event {
     position: absolute;
     right: 60px;

   }

   .navbar .logo::before {
     width: 190px;
     height: 40px;
   }

   .head-top .head-address .top-addrss {
     display: none;
   }

   .head-top .head-address .top-mail i {
     font-size: 14px;
   }

   .head-top .head-address .top-mail a {
     font-size: 14px;
   }

   .head-top .head-address .top-phone {
     display: none;
   }


   .head-top .head-address ul {
     justify-content: flex-end;
     padding: 5px 0;
   }

   .follow-us {
     display: none;
   }

 }