:root {
  --mainfont: 'Montserrat';
  --primary-color: #00121C;
  --secondary-color: #0B6A7E;
  --tprimary-bg-color: #22D7FF;
  --tsecondary-bg-color: #0B6A7E;
  --tthird-bg-color: #3FC0DC;
  --tnav-bg-color: #00121C;
  --tfourth-bg-color: #03242D;
  --tfifth-bg-color: #031216;
  --sixth-color: #01070A;
  --background-multiply-1: rgba(48,90,120,0.52);
  --link-nested: #c4c4c4;
  --header-backg-shadow: rgba(0,18,28,0.6);
  --contact-gradient: rgba(34,215,255,0.2);
  --contact-gradient2: rgba(11,106,126,0.2);
}

body {
  font-family: var(--mainfont);
}

.weight-900 {
  font-weight: 900;
}

.weight-700 {
  font-weight: 700;
}

.z-0 {
  z-index: 0;
}

.z-99 {
  z-index: 99;
}

.w-500 {
  font-weight: 500;
}

body {
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .flex-end-768 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

@media (max-width: 996px) {
  .width-on-mobile {
    height: 202px !important;
    width: auto !important;
  }
}

@media (max-width: 300px) {
  .width-on-mobile-300 {
    width: 80% !important;
  }
}

#sync2 span, #sync4 span {
  text-transform: capitalize;
}

.nav-scroll {
  position: fixed !important;
  height: 60px;
  background-color: var(--primary-color) !important;
  transition: height 0.5s ease-in;
}

.subnav-scroll {
  position: fixed !important;
  top: 60px;
  transition: top 0.5s ease-in;
}

.nav-scroll .navbar-brand img {
  width: 100px !important;
  transition: width 0.5s ease-in;
}

@media (max-width: 1023px) {
  .hide-lg {
    display: none;
  }
}

.bg-second {
  background-color: #3fc0dc !important;
}

.bg-third-contact {
  background-color: rgba(11,106,126,0.8) !important;
}

.bg-fourth {
  background-color: #03242D !important;
}

.bg-five {
  background-color: var(--tfifth-bg-color) !important;
}

@media (max-width: 991px) {
  .wht-bg {
    background-color: rgba(255,255,255,0.6);
  }
}

@media (max-width: 991px) {
  .wht-bg {
    background-color: rgba(255,255,255,0.6);
  }
}

.secondaryfont {
  font-family: var(--secondaryfont);
}

.background-trans {
  background-color: var(--background-trans);
}

.bg-third {
  background-color: var(--tsecondary-bg-color);
}

.w-500 {
  font-weight: 500;
}

.bg-primary {
  background-color: var(--tprimary-bg-color) !important;
}

@media (max-width: 1200px) {
  .logo {
    width: 300px !important;
  }
}

.title h2 {
  color: var(--primary-color);
}

.title span {
  color: var(--secondary-color);
}

.secondary-color {
  color: var(--secondary-color);
}

a {
  color: #0d6efd;
  text-decoration: none !important;
}

.bd-sixth {
  background-color: var(--sixth-color);
}