@font-face {
  font-family: raleway;
  src: url(../fonts/Raleway/Raleway-VariableFont_wght.ttf);
  font-display: swap; }

@font-face {
  font-family: raleway-bold;
  src: url(../fonts/Raleway/static/Raleway-Bold.ttf);
  font-display: swap; }

:root {
  --offcanvas: 50vw; }

:root {
  --main-color: #ffce54;
  --background-color: #323232;
  --color-title: #fff;
  --color-text: #fff; }

:root {
  --z-back: -10;
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000; }

*,
*::after,
*::after {
  box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  background-color: var(--background-color);
  font-family: 'raleway', sans-serif;
  font-size: 1.3rem; }

.wsp {
  background-color: green;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000; }

a {
  text-decoration: none;
  color: black;
  margin-right: 1rem; }

img {
  max-width: 100%; }

h1,
h2,
p {
  margin: 0;
  padding: 0; }

.btn-send {
  background-color: var(--main-color); }

input:focus {
  outline-color: var(--main-color); }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

.resalt {
  color: var(--main-color); }

.enviado {
  background-color: #55efc4; }

.header {
  background-image: url("../images/main.svg");
  background-repeat: no-repeat; }
  @media screen and (min-width: 768px) {
    .header {
      background-image: none;
      background-repeat: none;
      background-size: auto; } }

.services h2 {
  color: var(--color-text); }

.services__title {
  min-height: 40px;
  color: var(--color-text); }

.services__text {
  color: var(--color-text); }

.services img {
  width: 96px;
  height: 96px; }

.about {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../assets/images/sobre-nosotros.jpg");
  background-size: cover; }
  @media screen and (min-width: 640px) {
    .about {
      background-position: 0 -400px; } }
  @media screen and (min-width: 768px) {
    .about {
      background-position: 0 -500px; } }
  @media screen and (min-width: 960px) {
    .about {
      background-position: 0 0px;
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../assets/images/sobre-nosotros-desktop.svg"); } }

.footer {
  background-image: url("../../assets/images/footermobile.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 70%;
  font-size: 1.1rem; }
  @media screen and (min-width: 1024px) {
    .footer {
      background-image: url("../../assets/images/footer.png");
      background-position: center; } }

.carousel-clientes {
  padding-top: 4rem; }
  .carousel-clientes__container {
    width: 100%;
    height: 100%; }
  .carousel-clientes img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    margin: 0 auto; }

.owl-item {
  display: flex;
  height: 333px; }
  .owl-item:last-child {
    padding-right: 0rem; }
  @media screen and (min-width: 600px) {
    .owl-item {
      padding-right: 1rem; } }
  @media screen and (min-width: 600px) {
    .owl-item {
      max-height: auto; } }
  .owl-item > img {
    object-fit: cover; }

.prev,
.next {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }
  .prev img,
  .next img {
    width: 10px; }

.prev {
  margin-right: 2rem; }

.owl-prev:focus,
.owl-next:focus {
  outline-style: none; }

.siguiente {
  margin-right: 1rem;
  color: var(--color-text); }

.anterior {
  margin-left: 1rem;
  color: var(--color-text); }

.elcontenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 0;
  text-align: center; }