:root {
  --blue: #3a83ca;
  --gray: #e9e9e9;
  --gray-dark: #282425;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Arial', sans-serif;
  color: var(--gray-dark);
}

.font-arial {
  font-family: 'Arial', sans-serif;
}
.font-myriad {
  font-family: 'Myriad Pro', sans-serif;
}
.font-myriad-variable-concept {
  font-family: 'Myriad Variable Concept', sans-serif;
}
.font-navigo {
  font-family: 'Navigo', sans-serif;
}
.font-oswald {
  font-family: 'Oswald', sans-serif;
}

.bg-blue {
  background-color: var(--blue);
}
.text-blue {
  color: var(--blue);
}
.text-gray-dark {
  color: var(--gray-dark);
}

.btn-white-gray {
  background-color: white;
  color: var(--blue);
  border: 1px solid var(--gray);
}
.btn-white-gray:hover {
  background-color: var(--gray);
  color: var(--blue);
}
.btn-blue-white {
  background-color: var(--blue);
  color: white;
  border: 1px solid white;
}
.btn-blue-white:hover {
  background-color: white;
  color: var(--blue);
}

.navbar .navbar-brand img {
  height: 50px;
}

.navbar .offcanvas .offcanvas-header .offcanvas-title .logo-offcanvas {
  height: 50px;
}
.navbar .offcanvas .offcanvas-body .navbar-nav .nav-link {
  color: white;
}
.navbar .offcanvas .offcanvas-body .navbar-nav .nav-link:hover {
  color: var(--gray);
}
.navbar .navbar-toggler {
  border: none;
}
.navbar .navbar-toggler:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

#welcome {
  margin-top: 76px;
}
#welcome .carousel .carousel-inner .carousel-item {
  width: 100vw;
  height: calc(100vh - 76px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#welcome .carousel .carousel-inner .carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#welcome .carousel .carousel-inner .carousel-item .title-welcome {
  color: white;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  text-shadow: black 0px 0px 10px;
}
#welcome .carousel .carousel-indicators button {
  background-color: var(--gray);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  opacity: 0.5;
  margin: 0 0.5rem;
}
#welcome .carousel .carousel-indicators button.active {
  background-color: var(--blue);
  opacity: 1;
}

#about-us .splide .splide__slide {
  max-width: 100%;
}
#about-us .splide .splide__slide img {
  width: auto;
  height: 100%;
}

#what-we-do {
  background-image: url(../images/bg-services.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#what-we-do .content {
  padding: 0 2rem;
}
#what-we-do .content-blue {
  padding: 2rem;
  background-color: rgba(0, 15, 70, 0.75);
  height: 100%;
  border-radius: 1rem;
}

#contact {
  background-color: var(--blue);
}
.form-control {
  border-radius: 1rem;
  background-color: white;
  color: var(--gray-dark);
  border: 1px solid var(--gray);
}

footer {
  background-color: var(--gray);
  color: var(--gray-dark);
}
footer .logo-footer {
  height: 2.5rem;
}
footer .icon-footer {
  width: 1.5rem;
}
footer a {
  color: var(--gray-dark);
  text-decoration: none;
  transition: all 0.3s;
}
footer a:hover {
  color: var(--blue);
}
footer .whatsapp {
  position: absolute;
  top: -6.5rem;
  right: 0;
  opacity: 0.8;
  transition: all 0.3s;
}
footer .whatsapp:hover {
  opacity: 1;
}
footer .whatsapp img {
  width: 6rem;
  height: 6rem;
}