/* Top Header Start */
.socmed_menu {
  width: 25px;
  height: auto;
  margin-right: 10px;
}
.nkLogo_menu {
  width: 45px;
  height: auto;
}
.topRight_menu {
  display: flex;
  justify-content: end;
  font-family: "Poppins", sans-serif !important;
}
.email_menu {
  margin-right: 30px;
  color: #125061 !important;
  font-size: small;
}
.email_menu img {
  width: 25px;
  height: auto;
  margin-right: 5px;
}
.telephone_menu {
  /* margin-right: 30px; */
  color: #125061 !important;
  font-size: small;
}
.telephone_menu img {
  width: 25px;
  height: auto;
  margin-right: 5px;
}
/* Top Header End */
/* - - - - - */
/* NavBar Start*/
.navbar-brand img {
  width: 120px;
  height: auto;
}
#navbar-bg {
  background-color: #0082a7 !important;
}
.navbar__container {
  max-width: 70%;
  padding: 0;
}
.navbar-nav a {
  font-size: small !important;
  color: white !important;
  font-family: "Poppins", sans-serif !important;
}
.navbar-nav a:hover {
  color: #fbc55a !important;
}
.nav-link.active {
  color: #fbc55a !important;
}
/* NavBar End */
/* Header Start */
.banner_wrap {
  background-image: url("../img/inner-cover.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.banner_bg {
  background-color: rgba(0, 0, 0, 0.2);
  padding-bottom: 50px;
}
.breadcrumb_wrapper {
  padding-top: 50px;
}
.breadcrumb_wrapper h3 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700;
}
.breadcrumb li {
  font-family: "Poppins", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700;
  color: #fbc55a !important;
}
.breadcrumb li a {
  font-family: "Poppins", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700;
}
/* // Header End */
/* - - - - - */
/* // Company Logo Start */
.section8_wrapper {
  margin: 190px 0px 60px 0px;
}
.span1 {
  color: #9c9c9c;
}
.span2 {
  color: #125061;
}
/* // Company Logo End */
/* - - - - - */
/* // Footer Start */
footer a {
  color: #2147af;
}
/* // Footer End */

/* Style for the button */
#scrollToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #125061;
  color: white;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
}
.scrollToTop svg {
  width: auto;
  height: 50px;
}

/* Style for the button when hovering over it */
#scrollToTop:hover {
  background-color: #fbc55a;
}
/* // Preloader */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.8
  ); /* Start with a fully opaque black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure the overlay is above other content */
  transition: background-color 2s; /* Add the transition for smooth fade-out */
}

.logo {
  opacity: 0;
  transform: translateY(100%);
  /* Added CSS transition for smoother animation */
  transition: opacity 1s, transform 2s; /* Adjust the duration of the transform to change the movement speed */

  /* Add the keyframes animation for the desired effects */
  animation: slideUpFadeIn 1s forwards, rotate360 1s 1s forwards,
    slideUpFadeOut 1s 2s forwards;
}

/* Your other CSS styles here, if any */

/* Keyframes for Slide up (from bottom) Fade in then stop */
/* @keyframes slideUpFadeIn {
  0% {
    transform: translateY(1000%);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* Keyframes for rotate in place 360deg then stop */
/* @keyframes rotate360 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
} */

/* Keyframes for Slide up (from its place) Fade out */
/* @keyframes slideUpFadeOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-600%);
    opacity: 0;
  }
} */

/* new here */
/* // Preloader */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Start with a fully opaque black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure the overlay is above other content */
  transition: background-color 2s; /* Add the transition for smooth fade-out */
}

.logo {
  opacity: 0;
  transform: translateY(100%);
  /* Added CSS transition for smoother animation */
  transition: opacity 1s, transform 2s; /* Adjust the duration of the transform to change the movement speed */

  /* Add the keyframes animation for the desired effects */
  animation: slideUpFadeIn 1s forwards, slideUpFadeOut 1s 4.12s forwards;
}

/* Your other CSS styles here, if any */

/* Keyframes for Slide up (from bottom) Fade in then stop */
@keyframes slideUpFadeIn {
  0% {
    transform: translateY(1000%);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Keyframes for Slide up (from its place) Fade out */
@keyframes slideUpFadeOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-600%);
    opacity: 0;
  }
}