.header-page {
  border-bottom   : 1px solid #c8c8c8;
  position        : fixed;
  width           : 100%;
  z-index         : 100;
  background-color: #fff;
}

.banner_top {
  padding-top: 8em;
}

.header-page nav.navbar {
  padding: 14px 0;
}

.header-page ul.navbar-nav {
  gap: 35px;
}

.header-page nav.navbar ul li a.nav-link,
.header-page nav.navbar .nav-drop button.nav-link {
  color      : #626262;
  font-size  : 14px;
  padding    : 0 0 5px;
  background : transparent;
  position   : relative;
  font-weight: 500;
  border     : none;
  width      : auto;
}

.header-page nav.navbar ul li a.nav-link:before {
  content   : "";
  position  : absolute;
  width     : 0px;
  transition: 0.2s;
}

.header-page nav.navbar .nav-drop button.nav-link.show::after {
  transform : rotate(180deg);
  transition: 0.3s all;
}

.header-page nav.navbar .nav-drop .dropdown-menu.show li {
  padding: 10px 0;
  width  : 500px;
  display: flex !important;
}

.header-page nav.navbar .nav-drop .dropdown-menu.show .dropdown-item {
  font-size    : 14px;
  border-bottom: 1px solid #c8c8c899;
  margin       : 0px 16px;
  text-align   : left;
  padding      : 6px 0;
  color        : #111;
  font-size    : 16px;
  font-weight  : 500;
  background   : none;
}

.header-page nav.navbar .nav-drop .dropdown-menu.show .dropdown-item:active {
  background-color: yellow;
  color           : #000;
}

.social-links {
  width          : auto !important;
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  gap            : 10px;
}

.nav-btn {
  border         : 1px solid transparent;
  border-radius  : 48px;
  color          : #fff !important;
  padding        : 12px 25px;
  background     : #111;
  width          : 128px;
  transition     : 0.2s;
  text-align     : center;
  font-size      : 12px;
  text-decoration: none;
}

.nav-btn:hover {
  background: #f6911d;
  text-align: left;
  transition: 0.5s;
}

.navbar-nav li {
  position: relative;
}

/* Hover Underline Start */
.services-dropdown .nav-link::after,
.navbar-nav .nav-item .nav-link::after {
  content         : "";
  display         : block;
  position        : absolute;
  bottom          : -2px;
  left            : 0;
  width           : 0;
  height          : 2px;
  background-color: rgb(0, 0, 0);
  transition      : width 0.3s ease;
}

.services-dropdown .nav-link:hover::after,
.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item .nav-link.active::after {
  width: 100%;
}

/* Hover Underline End */

/* DropDown Start */
.services-dropdown {
  display    : inline-flex;
  align-items: center;
  cursor     : pointer;

}

.services-dropdown a {
  color          : #000;
  font-size      : 14px;
  padding        : 0 0 5px;
  background     : transparent;
  position       : relative;
  font-weight    : 500;
  border         : none;
  width          : auto;
  color          : black;
  padding        : 12px 16px;
  text-decoration: none;
  display        : block;
}

.dropdown-content ul li a {
  width        : 210px;
  border-bottom: 1px solid #c8c8c8ad;
  margin       : 0 40px 0 0;
}

.dropdown-content ul li a:hover {
  color: #000;
}

.services-dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display      : none;
  position     : absolute;
  left         : -108px;
  top          : 30px;
  min-width    : 160px;
  box-shadow   : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width        : 540px;
  /* height    : 285px; */
  border-radius: 8px;
  border       : 1px solid #ffd3a073;
  background   : #FFF;
  padding      : 20px 0 30px 0;
}

.dropdown-content ul li {
  list-style: none;
  padding   : 0;
  display   : flex;
}



.dropdown-content a:hover {
  background-color: #f1f1f1;
}


.services-dropdown:hover .arrow-down {
  transition: all 0.5s ease-in-out;
  display   : none;
}

.services-dropdown .arrow-down,
.services-dropdown .arrow-up {
  margin-top  : -4px;
  padding-left: 10px;
}

.services-dropdown .arrow-up {
  display   : none;
  transition: all 0.5s ease-in-out;

}

.services-dropdown:hover .arrow-up {

  transition: all 0.5s ease-in-out;
  display   : inline-block;
}

/* DropDown End */


@media only screen and (max-width: 991px) {
  .header-page .navbar-light .navbar-toggler {
    background-color: #fff;
    position        : absolute;
    right           : 0;
    z-index         : 0;
  }

  .header-page :focus {
    box-shadow: none !important;
  }

  .navbar-collapse {
    position        : fixed;
    background-color: #3a3a3a;
    width           : 300px;
    right           : -300px;
    z-index         : 1000;
    margin          : 0;
    padding         : 20px;
    height          : 100%;
    transition      : 0.2s;
    top             : 0;
  }

  .navbar-collapse button span img {
    width        : 16px;
    position     : absolute;
    top          : 50%;
    left         : 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);
  }

  .navbar-collapse.show {
    transition: all 0.5s;
    right     : 0;
  }

  ul.navbar-nav.align-items-center.gap-5 {
    padding-top: 50px;
    gap        : 25px !important;
  }

  .header-page .claim-btn {
    margin-top: 20px !important;
  }

  .navbar-toggler {
    background: #fff;
    position  : absolute;
    right     : 15px;
  }

  .navbar-toggler.res-nav {
    left  : 10px;
    top   : 10px;
    width : 30px;
    height: 30px;
  }

  .header-page nav.navbar .nav-drop button.nav-link::after {
    content        : "";
    border         : none;
    margin         : 0;
    position       : relative;
    background     : url("../../images/wht_down-arrow.png") no-repeat;
    background-size: contain;
    top            : 3px;
    left           : 3px;
    width          : 12px;
    height         : 8px;
    line-height    : 1;
    transform      : rotate(0deg);
    transition     : 0.3s all;
  }


}

@media (1024px <=width <=1200px) {
  .header-page ul.navbar-nav {
    gap: 17px;
  }

  .social-links {
    width          : auto !important;
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    gap            : 0px;
  }
}

@media (992px <=width <=1024px) {
  .header-page nav.navbar ul li a {
    font-size: 13px;
  }

  .header-page nav.navbar .nav-drop .dropdown-menu.show .dropdown-item {
    padding: 3px 10px;
  }

  ul.navbar-nav.align-items-center.gap-5 {
    gap: 30px !important;
  }

  .social-links {
    gap: 0px;
  }

  .header-page ul.navbar-nav {
    gap: 18px;
  }
}

@media (width <=992px) {
  .header-page ul.navbar-nav {
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
  }

  .dropdown-content ul li {
    display: block;
  }

  .dropdown-content {
    /* top       : -70px; */
    left      : -97px;
    width     : 280px;
    height    : 220px;
    z-index   : 1;
    overflow-y: scroll;
  }

  .dropdown-content::-webkit-scrollbar {
    width: 3px;
  }

  .dropdown-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius   : 5px;
  }

  .dropdown-content::-webkit-scrollbar-track {
    background-color: #f2d9ec;
  }

  .services-dropdown .nav-link::after,
  .navbar-nav .nav-item .nav-link::after {
    background-color: rgb(255, 255, 255);
  }

  .social-links a img,
  .services-dropdown .arrow-up,
  .services-dropdown .arrow-down {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(355deg) brightness(102%) contrast(104%);
  }

  .social-links a {
    border       : 1px solid #fff;
    border-radius: 5px;
    padding      : 4px;
    transition   : all .5s ease-in-out;
  }

  .social-links a:hover {
    border       : 1px solid #fff;
    /* border    : 1px solid #f6911d; */
    background   : #f6911d;

  }
}

@media (width <=678px) {
  .banner_top {
    padding-top: 6em;
  }
}