:root {
  --bys-body-bg: #f0f9ff;
  --bys-navbar-bg: #e0f2fe;
  --bys-dark-blue: #111827;
}

html {
  height: 100%;
}

body {
  background-color: var(--bys-body-bg);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#topNavigation,
#topMenu {
  background-color: var(--bys-navbar-bg);
}

.lang {
  text-decoration: none;
}

.lang-title {
  font-size: 0.75rem;
}

.lang,
#topMenu,
#mobileMenu {
  font-weight: 500;
}

.lang,
#topMenu .navbar-collapse .nav-link {
  color: #1b3459;
  font-weight: 600;
}

.lang:hover,
#topMenu .navbar-collapse .nav-link:hover {
  color: rgba(27, 52, 89, 0.6);
}

#topMenu .navbar-toggler {
  border-width: 0.3rem !important;
  border-color: #1b3459;
}

#topMenu .navbar-toggler:focus {
  box-shadow: none;
}

#topMenu .navbar-toggler .navbar-toggler-icon {
  height: 2.5rem;
  width: 2.5rem;
}

#logo {
  width: 180px;
}

@media (max-width: 991.98px) {
  #logo {
    width: 140px;
  }
}

#mobileMenuOffcanvas,
#catMenuOffcanvas {
  background-color: var(--bys-navbar-bg);
}

#footerMenuAndCopyright {
  background-color: var(--bys-dark-blue);
  color: #fff;
}

#footerMenuAndCopyright img {
  width: 180px;
}

#footerMenuAndCopyright a {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

#footerMenuAndCopyright a:hover {
  color: #e5e7eb;
}

@media (max-width: 991.98px) {
  #footerMenuAndCopyright img {
    width: 140px;
  }
}

#copyright {
  font-size: 0.75rem;
}

#mCopyright img {
  width: 125px;
}

#mCopyright a {
  font-weight: 500;
  text-decoration: none;
  font-size: 0.875rem;
}

.mt-178 {
  margin-top: 178px;
}

@media (max-width: 991.98px) {
  .mt-178 {
    margin-top: 153px;
  }
}

#contactForm input:not([type="checkbox"]),
#contactForm textarea {
  background-color: #f5f5f5;
}

#contactInformation h2 {
  background-color: #f3f4f6;
  font-weight: 700;
}

#contactInformation a,
.employee a {
  color: var(--bs-body-color);
  text-decoration: none;
}

#contactInformation iframe {
  height: 100%;
  width: 100%;
}

@media (max-width: 991.98px) {
  #contactInformation iframe {
    height: 200px;
  }
}

#catMenu,
#photoGallery {
  top: 210px;
}

#catMenu h2,
#contents h3 {
  font-weight: 700;
}

#contents a,
#solutions .solution,
#projects .project {
  color: var(--bs-body-color);
  text-decoration: none;
  transition: 0.5s;
}

#contents a:not(:first-child) {
  margin-top: 1rem;
}

#contents a:hover,
#solutions a:hover,
#projects a:hover {
  box-shadow: var(--bs-box-shadow) !important;
}

.custom-ul {
  color: var(--bs-secondary);
}

#content .btn-primary,
#about .btn-primary,
#p404 .btn-primary,
#back-to-top.btn-primary,
#solutions .btn-primary,
#projects .btn-primary,
#JAF .btn-primary,
.employee .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1b3459;
  --bs-btn-border-color: #1b3459;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #25497d;
  --bs-btn-hover-border-color: #25497d;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1b3459;
  --bs-btn-active-border-color: #1b3459;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

@media (min-width: 768px) {
  .overflow-hidden {
    overflow: visible !important;
  }
}

.fw-700 {
  font-weight: 700;
}

#bigCarousel {
  position: relative;
}

#bigCarousel .owl-prev,
#bigCarousel .owl-next,
#ProjectsCarousel .owl-prev,
#ProjectsCarousel .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  font-size: 1.25rem !important;
  transition: 0.3s;
}

#bigCarousel .owl-prev:hover,
.owl-next:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

#bigCarousel .owl-prev {
  left: 20px;
}

#bigCarousel .owl-next {
  right: 20px;
}

#bigCarousel .owl-item-content {
  height: 600px;
}

#back-to-top {
  position: fixed;
  display: none;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  font-size: 2rem;
  width: 66px;
  height: 66px;
}

.vertical-menu .selected {
  color: #c33727 !important;
  font-size: 1.1rem;
}

#ProjectsCarousel.owl-carousel .owl-stage {
  display: flex;
}

#ProjectsCarousel.owl-carousel .owl-stage-outer {
  height: calc(100% + 30px);
  margin: -15px;
  padding: 15px;
  width: calc(100% + 30px);
}

#ProjectsCarousel .owl-item-content {
  height: 100%;
}

#ProjectsCarousel .owl-prev,
#ProjectsCarousel .owl-next {
  background-color: #1b3459 !important;
}

#ProjectsCarousel .owl-prev:hover,
#ProjectsCarousel .owl-next:hover {
  background-color: #25497d !important;
}

#ProjectsCarousel .owl-prev {
  left: -60px;
}

#ProjectsCarousel .owl-next {
  right: -60px;
}

@media (min-width: 992px) {
  #topMenu.navbar .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }

  #topMenu.navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    transition: 0.5s;
    opacity: 1;
  }
}

.vertical-menu .list-group-item {
  padding: 0;
}

.vertical-menu .vertical-menu-item {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  display: block;
  text-decoration: none;
  width: 100%;
  color: #1b3459;
  font-weight: 600;
}

.vertical-menu .vertical-menu-item:hover {
  color: rgba(27, 52, 89, 0.6);
}

.vertical-menu .dropdown-menu {
  position: static !important;
  transform: none !important;
}

.vertical-menu .dropdown-item {
  white-space: normal;
  font-weight: 500 !important;
  font-size: 0.875rem;
}

.vertical-menu .dropdown-toggle {
  position: relative;
}

.vertical-menu .dropdown-toggle::after {
  position: absolute;
  right: 0;
  bottom: 45%;
  font-size: 1.5rem;
  transition: transform 0.2s ease-in-out;
}

.vertical-menu .show.dropdown-toggle::after {
  transform: rotate(-180deg);
}

.employee-header {
  background-color: #f3f4f6;
}

.employee-header h2 {
  font-weight: 700;
}

#policies a,
#downloads a {
  color: #1b3459;
  text-decoration: none;
  font-weight: 600;
}

#policies a:hover,
#downloads a:hover {
  color: rgba(27, 52, 89, 0.6);
}
