* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  color: #5d5d5c;
  line-height: 1.5;
  overflow-x: hidden;
}

header {
  width: 100%;
  position: fixed;
  z-index: 1;
}

nav.contact-stripe {
  width: 100%;
  background-color: #fff;
  border-top: 2px solid #0625b6;
  height: 35px;
  padding: 0 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

nav.contact-stripe div {
  display: flex;
  align-items: center;
}

nav.contact-stripe img {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 0.5em;
}

nav.contact-stripe a {
  color: #0625b6;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.8em;
}

.logo-menu {
  width: 100vw;
  height: 95px;
  background-color: #0625b6;
  padding: 5px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav.main-menu a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  /* padding: 0 1.6em; */
  padding: 20px;
  letter-spacing: 0.05em;
  font-weight: bold;
}

nav.main-menu a:hover,
nav.main-menu a.active {
  background-color: #fffa00;
  color: #041937;
}

.hamburger {
  display: none;
  width: 50px;
  height: 50px;
}

.hamburger:hover {
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  background-color: #ffffff;
  width: 36px;
  height: 4px;
  margin: 3px;
  border-radius: 10px;
}

.anchor {
  position: relative;
  top: -125px;
}

h1 {
  font-size: 3em;
  margin-bottom: 1em;
}

h1 div {
  border-left: 4px solid #a6a6a6;
  padding: 0 0 5px 15px;
}

h1 p {
  font-size: 0.3em;
  line-height: 1.5;
  color: #8d8c8c;
}

h2 {
  margin-bottom: 1.5em;
}

.main-container {
  padding-top: 140px;
  display: flex;
  flex-direction: column;
}

.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.page .text {
  padding: 140px 100px;
}

.text p {
  margin-top: 20px;
}

.pg1 {
  background-color: #e3edff;
}

.pg2 {
  background-color: #ebe3ff;
}

.pg3 {
  background-color: #fff9e2;
}

.pg4 {
  background-color: #e3edff;
}

.pg5 {
  background-color: #fff9e2;
}

.img-container {
  background-size: cover;
}

.imgc1 {
  background-image: url('/assets/images/nevera.webp');
}

.imgc2 {
  background-image: url('/assets/images/caja.webp');
  background-position: bottom right;
}

.imgc3 {
  background-image: url('/assets/images/van1.webp');
}

.imgc4 {
  background-image: url('/assets/images/furniture.jpg');
  background-position: bottom right;
}

.imgc5 {
  background-image: url('/assets/images/pintura1.jpg');
}

/* Servicios */
.servicios-container {
  text-align: center;
  padding-top: 100px;
}

.servicios-container h2 {
  font-size: 2em;
  margin-bottom: 0;
  margin-top: 0.5em;
}

.servicios-row {
  width: 70%;
  min-width: 950px;
  margin: 0 auto;
  padding: 100px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.servicios-row-bg-2 {
  background-color: #fff9e2;
}

.card {
  width: 307px;
  height: 378px;
  position: relative;
  z-index: 0;
}

.card.img1 {
  background-image: url('/assets/images/service1.jpg');
  background-size: cover;
  background-position: center;
}

.card.img2 {
  background-image: url('/assets/images/van.jpg');
  background-size: cover;
  background-position: center;
}

.card.img3 {
  background-image: url('/assets/images/maletas.jpg');
  background-size: cover;
  background-position: center;
}

.card.img4 {
  background-image: url('/assets/images/mudanza1.jpg');
  background-size: cover;
  background-position: center;
}

.card.img5 {
  background-image: url('/assets/images/montaje.jpg');
  background-size: cover;
  background-position: center;
}

.card.img6 {
  background-image: url('/assets/images/pintura.jpg');
  background-size: cover;
  background-position: center;
}

.card .title {
  background-color: #041937;
  width: 100%;
  height: 67px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .title h3 {
  text-transform: uppercase;
  font-weight: normal;
  color: #ffffff;
}

.card .title:hover {
  cursor: pointer;
  background-color: #0625b6;
}

.card p {
  position: absolute;
  top: 400px;
}

/* Precios */
.precios-container {
  color: #7c5f4e;
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 90px;
  padding: 100px 0;
  text-align: center;
}

.precios-container h2 {
  font-size: 2em;
  margin-top: 0.5em;
}

.pricetag {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pricetag p {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 100px;
}

.pricelist h3 {
  margin: 1.5em 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #7c5f4e;
}

.pricelist p {
  margin-bottom: 3em;
  display: flex;
  justify-content: space-between;
}

/* Contacto */
.contacto-container {
  background-color: #041937;
  padding: 100px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
gap: 150px;
color: #fff;
}

nav.contact div {
  display: flex;
  align-items: center;
  margin-bottom: 2.5em;
}

nav.contact img {
  width: 82px;
  height: 82px;
  margin-right: 1em;
}

nav.contact a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
}

nav.social img {
  margin-left: 2em;
}

section.mudanzas-barcelona {
  margin: 200px auto;
width: 80%;
}

@media only screen and (max-width: 1659px) {
  .precios-container {
    width: 90%;
  }
}

@media only screen and (max-width: 984px) {
  .openMobileNav {
    padding: 20px;
  }
  .main-container {
    width: 100vw;
    overflow: hidden;
  }
  header {
    box-sizing: border-box;
  }
  nav.main-menu {
    display: none;
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contact-stripe div:nth-of-type(2n + 1) {
    display: none;
  }

  nav.contact-stripe {
    max-width: 100vw;
    justify-content: center;
  }
  .page {
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 1fr 1fr;
    margin: 0 auto;
  }

  .servicios-container {
    padding-top: 80px;
  }

  .servicios-container h2 {
    margin-bottom: 1.5em;
  }

  .servicios-row-bg-1,
  .servicios-row-bg-2 {
    width: 100vw;
    padding: 2rem 0 3rem 0;
    margin: 0;
  }

  .servicios-row-bg-2 {
    padding-bottom: 60px;
  }

  .servicios-row {
    width: 100vw;
    min-width: none;
    padding: 0;
    grid-template-columns: 100vw;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 90px 20px;
  }

  .card {
    width: 90vw;
    height: 378px;
    position: relative;
    z-index: 0;
    margin: 0 auto;
  }

  .precios-container {
    width: 90%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 50px;
    padding-top: 0;
    margin-top: -30px;
  }

  .precios-container h2 {
    margin-bottom: 0;
  }

  .contacto-container {
    padding: 100px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (max-width: 599px) {
  .openMobileNav {
    padding: 20px 5px;
  }
  .main-container {
    padding-top: 100px;
  }

  .page {
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 1fr;
  }

  .img-container {
    display: none;
  }

  .page .text {
    padding: 70px;
  }

  .servicios-container {
    padding-top: 50px;
  }

  .servicios-container h2 {
    margin-bottom: 1em;
  }

  .precios-container {
    padding-top: 50px;
  }

  .precios-container h2 {
    margin-bottom: 0;
  }

  .pricelist p span {
    display: inline-block;
    max-width: 50%;
    text-align: left;
  }
}

@media only screen and (max-width: 449px) {
  .precios-container {
    width: 90%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -30px;
  }

  .pricetag img {
    height: 100px;
  }

  .pricetag p {
    margin-top: 20px;
  }

  .contacto-container {
    padding: 50px;
    display: flex;
    flex-direction: column;
  }

  nav.contact div {
    margin-bottom: 2em;
  }

  nav.contact img {
    width: 52px;
    height: 52px;
    margin-right: 1em;
  }

  nav.contact a {
    font-size: 1em;
  }

  nav.social img {
    margin-left: 2em;
    width: 52px;
  }
}

.animateBar1 {
  animation: flipBar1 0.5s;
  animation-fill-mode: forwards;
}

.animateBar2 {
  animation: fadeBar2 0.5s;
  animation-fill-mode: forwards;
}

.animateBar3 {
  animation: flipBar3 0.5s;
  animation-fill-mode: forwards;
}

.mobile-nav {
  display: none;
  transition: all 1s;
}

.mobile-nav a {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  padding: 10px;
  display: block;
}

.mobile-nav a:hover,
.mobile-nav a.active {
  background-color: #020c3ab5;
}

.openMobileNav {
  width: 100%;
  position: fixed;
  top: 140px;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #0626b6a5;
  color: #ffffff;
  padding: 20px 5px;
  z-index: 1;
}

@keyframes flipBar1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(45deg) translate(4px, 10px);
  }
}

@keyframes fadeBar2 {
  from {
    transform: scaleX(1);
    opacity: 1;
  }
  to {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes flipBar3 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-45deg) translate(4px, -10px);
  }
}