@font-face {
  font-family: "Raleway";
  font-weight: normal;
  font-style: normal;
  src: url("/public/fonts/raleway/Raleway-ExtraLight.ttf");
}

@font-face {
  font-family: "Raleway";
  font-weight: 400;
  font-style: normal;
  src: url("/public/fonts/raleway/Raleway-ExtraLight.ttf");
}

@font-face {
  font-family: "Raleway";
  font-weight: 600;
  src: url("/public/fonts/raleway/Raleway-Medium.ttf");
}

@font-face {
  font-family: "Raleway";
  font-weight: 700;
  src: url("/public/fonts/raleway/Raleway-Bold.ttf");
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-300px * 6.25));
  }
}
@keyframes scroll-mobile {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 6.25));
  }
}

@media screen and (max-width: 480px) {
  .h-about-us-blob {
    height: 500px !important;
  }
}

body {
  font-family: "Raleway";
  font-optical-sizing: auto;
}

#about-us-info-1 {
  background-color: #5cb1f2;
}

#about-us-info-2 {
  background-color: #21468a;
}

#about-us-info-3 {
  background-color: #244660;
  color: white;
}

.bg-black-transparent {
  background: rgba(0, 0, 0, 0.3);
}

.bg-black-transparent.deeper {
  background: rgba(0, 0, 0, 0.75);
}

.bg-black-transparent.deep {
  background: rgba(0, 0, 0, 0.6);
}

.bg-blue-pale {
  background-color: #e7f3fd;
}

.bg-footer {
  background-color: #1265a5;
}

.bg-pattern-circles {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235cb1f2' fill-opacity='0.4'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-pattern-constelation {
  background-image: url("../img/svg/endless-constellation.svg");
}

.bg-pattern-randomized {
  background-image: url("../img/svg/pattern-randomized.svg");
}

.bg-primary {
  background-color: #7ec1f4;
}

.bg-purple-transparent {
  background: rgba(050, 61, 117, 0.6);
}

.nav-item {
  color: #5babe9;
  cursor: pointer;
}

.nav-item-active {
  color: #ffffff;
}

.nav-item:hover {
  color: #bedef6;
}

.blue-circle::before {
  background-color: #6ab8f3;
  bottom: 30px;
  content: "\A";
  display: block;
  border-radius: 50%;
  height: 70px;
  left: 0;
  margin: auto;
  position: absolute;
  /* transform: skewY(5deg); */
  right: 0;
  width: 70px;
  z-index: -1;
}

.blue-underline::after {
  background-color: #6ab8f3;
  bottom: 30px;
  content: "\A";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  /* transform: skewY(5deg); */
  width: 70px;
}

.blue-dark-underline::after {
  /* background-color: #1c1d1e; */
  background-color: #000000;
  bottom: 30px;
  content: "\A";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  /* transform: skewY(5deg); */
  width: 70px;
}

.border-primary {
  border-color: #7ec1f4;
}

.h-about-us-blob {
  height: 700px;
}

.patozuli-input {
  border-bottom: 1px solid;
  display: block;
  outline: none !important;
  padding-left: 6px;
  padding-right: 6px;
  width: 100%;
}

.start-blue-circle::before {
  background-color: #6ab8f3;
  bottom: 30px;
  content: "\A";
  display: block;
  border-radius: 50%;
  height: 70px;
  left: 0;
  margin: auto;
  position: absolute;
  /* transform: skewY(5deg); */
  width: 70px;
  z-index: -1;
}

.h-about-us-energy-blob {
  width: 100%;
}

.start-blue-underline::after {
  background-color: #6ab8f3;
  bottom: 30px;
  content: "\A";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  /* transform: skewY(5deg); */
  width: 70px;
}

.start-blue-dark-underline::after {
  /* background-color: #1c1d1e; */
  background-color: #000000;
  bottom: 30px;
  content: "\A";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  /* transform: skewY(5deg); */
  width: 70px;
}

.bold-first-letter::first-letter {
  font-size: 40px;
  font-style: normal;
  font-weight: bold;
}

.slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(300px * 12);
  /* width: calc(300px * 14); */
}

.slide {
  width: 300px;
}

.slide-track-mobile {
  animation: scroll-mobile 40s linear infinite;
  display: flex;
  /* width: calc(200px * 14); */
  width: calc(200px * 12);
}

.slide-mobile {
  width: 200px;
}

.stick-it {
  background: rgba(0, 0, 0, 0.5);
}

.tab {
  display: none;
  padding: 10px;
}
a[name="tab1"] + .tab {
  display: block;
}
:target + .tab {
  display: block;
}
:target ~ a[name="tab1"] + .tab {
  display: none;
}

.text-primary {
  /* color: #21468A; */
  color: #7ec1f4;
}