/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container{
  margin: 0 auto;
}

@keyframes zoomInAndOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.hero{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.hero-image {
  width: 100vw;
  height: 100vh;
  background-size:  cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/2.jpg);
  animation: zoomInAndOut 15s ease-in-out infinite;
}
.hero-nav{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  z-index: 100;
}
.hero-nav .logo{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}
.hero-nav .idioma{
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.hero-nav .idioma span{
  font-weight: 800;
}


.hero-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}
.hero-content .titulo {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 0.5rem;
}
@media (max-width: 540px){
  .hero-content .titulo{
    font-size: 3rem;
  }
}
@media (max-width: 390px){
  .hero-content .titulo{
    font-size: 2rem;
  }
}
.hero-content .subtitulo{
  margin-bottom: 4rem;
}
.hero-content .booking{
  margin-top: 5rem;
  background-color: transparent;
  border: 1px solid white;
  padding: 1rem 3rem;
  transition: 0.8s ease;
}
@media (max-width: 540px){
  .hero-content .booking{
    display: block;
  }
}
.hero-content .booking:hover{
  background-color: white;
  color: black;
}

.hero-footer{
  position: absolute;
  bottom: 0;
  left: calc(50% - 50px);
  transform: translateX(-50%);
  color: white;
  text-align: center;
  padding-bottom: 2%;
  width: 100px
}

/* =================================================================================== */
/* Seccion 2*/
/* =================================================================================== */

.seccion2{
  margin: 10% 0 25%;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 5%;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px){
  .seccion2{
    gap: 0;
  }
}
@media (max-width: 540px){
  .seccion2{
    grid-template-columns: 1fr;
  }
}
.info{
  padding: 10% 5%;
  color: black;
}
@media (max-width: 1024px){
  .info{
    padding: 10%;
  }
}
@media (max-width: 950px){
  .info{
    padding: 5%;
  }
}
@media (max-width: 768px){
  .info{
    padding: 8%;
  }
}
.info .titulo{
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.25rem;
  padding: 1rem 0;
}
@media (max-width: 768px){
  .info .titulo{
    font-size: 1.5rem;
  }
}
@media (max-width: 540px){
  .info .titulo{
    text-align: center;
  }
}
.info .descripcion{
  font-size: 1rem;
  font-weight: 300;
  line-height: 2rem;
  padding: 1rem 0;
}
@media (max-width: 768px){
  .info .descripcion{
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
}
@media (max-width: 540px){
  .info .descripcion{
    text-align: center;
  }
} 
.imgs {
  width: 100%;
  height: 100%;
  position: relative;
}
.imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgs .img1{
  position: absolute;
  width: 50%;
  height: 70% ;
  top: 40%;
  left: 0;
}
@media (max-width: 540px){
  .imgs .img1{
    left: 10%
  }
}
.imgs .img2{
  margin-right: 5%;
  float: right;
  width: 70%;
  max-height: 75vh;
}

/* =================================================================================== */
/* Hero 2 */
/* =================================================================================== */

.hero2{
  margin-top: -10%;
  width: 100vw;
  height: 80vh;
  overflow: hidden;
  position: relative;
}
.hero2:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.hero2-image {
  width: 100vw;
  height: 80vh;
  background-size:  cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/6.jpg);
}
.hero2-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 10;
}
@media (max-width: 540px){
  .hero2-content{
    width: 80%;
  }
}
.hero2-content .titulo {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.3rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 540px){
  .hero2-content .titulo{
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
  }
}
@media (max-width: 390px){
  .hero2-content .titulo{
    font-size: 1.5rem;
  }
}

/* =================================================================================== */
/* Hero 3 */
/* =================================================================================== */

.hero3{
  width: 100vw;
  height: 80vh;
  overflow: hidden;
  position: relative;
}
.hero3:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.hero3-image {
  width: 100vw;
  height: 80vh;
  background-size:  cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/3.jpg);
}
.hero3-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 10;
}
@media (max-width: 540px){
  .hero3-content{
    width: 80%;
  }
}
.hero3-content .titulo {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.3rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 540px){
  .hero3-content .titulo{
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
  }
}
@media (max-width: 390px){
  .hero3-content .titulo{
    font-size: 1.5rem;
  }
}


/* =================================================================================== */
/* Hero 4 */
/* =================================================================================== */

.hero4{
  width: 100vw;
  height: 80vh;
  overflow: hidden;
  position: relative;
}
.hero4:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.hero4-image {
  width: 100vw;
  height: 80vh;
  background-size:  cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/2.jpg);
}
.hero4-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 10;
}
@media (max-width: 540px){
  .hero4-content{
    width: 80%;
  }
}
.hero4-content .titulo {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.3rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 540px){
  .hero4-content .titulo{
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
  }
}
@media (max-width: 390px){
  .hero4-content .titulo{
    font-size: 1.5rem;
  }
}

/* =================================================================================== */
/* Seccion 4 */
/* =================================================================================== */
.seccion4{
  margin: 10% 0;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 5%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 540px){
  .seccion4{
    grid-template-columns: 1fr;
  }
}
.seccion4 .imgs {
  margin-left: 20%;
  display: flex;
  gap: 10%;
  width: 75%;
  height: 65vh;
}
@media (max-width: 540px){
  .seccion4 .imgs{
    gap: 5%;
    margin: 0 auto;
    width: 90vw;
    height: 50vh; 
  }
}
.seccion4 .imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 540px){
  .seccion4 .imgs img{
    overflow: hidden;
  }
}
.seccion4 .contenido{
  height: 95vh;
  width: 100%;
  padding: 10% 10% 10% 35%;
  color: black;
  background-color: rgb(245, 243, 237);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 540px){
  .seccion4 .contenido{
    padding: 5% 10%;
  }
}
.seccion4 .contenido .titulo{
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.1rem;
  padding: 1rem 0;
}
@media (max-width: 800px){
  .seccion4 .contenido .titulo{
    font-size: 2rem;
  }
}
.seccion4 .contenido .descripcion{
  font-size: 1rem;
  font-weight: 300;
  line-height: 2rem;
  padding: 1rem 0;
}
@media (max-width: 800px){
  .seccion4 .contenido .descripcion{  
    line-height: 1.5rem;
  }
}


/* =================================================================================== */
/* Seccion 5 */
/* =================================================================================== */
.seccion5{
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}
@media (max-width: 1024px){
  .seccion5{
    grid-template-columns: repeat(2, 1fr);
    /* que el que sobra abarque el 100% */
  }
  .bloque3{
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
@media (max-width: 540px){
  .seccion5{
    grid-template-columns: 1fr;
    height: 200vh;
  }
  .bloque3{
    grid-column-start: 1;
    grid-column-end: 2;
  }
}
.bloque1, 
.bloque2,
.bloque3{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@-webkit-keyframes scale-down-center{0%{-webkit-transform:scale(1.01);transform:scale(1.01)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-down-center{0%{-webkit-transform:scale(1.01);transform:scale(1.01)}100%{-webkit-transform:scale(1);transform:scale(1)}}
.seccion5 .imagen {
  width: 100%;
  height: 100%;
  background-size:  cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  animation: scale-down-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.01);transform:scale(1.01)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.01);transform:scale(1.01)}}
.seccion5 .imagen:hover {
  animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.imagen1{
  background-image: url(../img/7.jpg);
}
.imagen2{
  background-image: url(../img/3.jpg);
}
.imagen3{
  background-image: url(../img/4.jpg);
}
.imagen4{
  background-image: url(../img/2.jpg);
}
.seccion5 .contenido{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
/* .seccion5 .imagen:hover .contenido{
  opacity: 1;
  visibility: visible; 
} */
.seccion5 .contenido .margen{
  background-color: #fff;
  width: 85%;
  height: 85%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.5px solid #868686;
  transition: opacity 0.5s ease;
}
/* .seccion5 .imagen:hover .contenido .margen{
  opacity: 1;
  visibility: visible; 
} */
.seccion5 .contenido .margen .titulo{
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  padding: 1rem 0;
}
@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(15px);transform:translateY(15px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-top{0%{-webkit-transform:translateY(15px);transform:translateY(15px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.imagen:hover .contenido .margen .titulo{
  -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.seccion5 .contenido .margen .subtitulo{
  font-weight: 300;
}
@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(15px);transform:translateY(15px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-top{0%{-webkit-transform:translateY(15px);transform:translateY(15px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.imagen:hover .contenido .margen .subtitulo{
  -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;
  animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;
}
.seccion5 .bloque2{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =================================================================================== */
/* Seccion 6 */
/* =================================================================================== */

.seccion6{
  margin: 10% auto;
  width: 90%
}
.seccion6 .parte-sup{
  display: grid;
  grid-template-columns: 20% 30% 50%;
  margin-bottom: 1rem;
}
@media (max-width: 540px){
  .seccion6 .parte-sup{
    display: none;
  }
  .seccion6 .parte-sup .espacio{
    display: none;
  }
}
@media (max-width: 300px){
  .seccion6 .parte-sup{
    grid-template-columns: 1fr;
    gap: 5%;
  }
  .seccion6 .parte-sup .img{
    grid-row: 2;
    margin-bottom: 5%;
  }
}
.seccion6 .parte-sup .img{
  width: 100%;
  height: 100%;
}
@media (max-width: 300px){
  .seccion6 .parte-sup .img{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.seccion6 .parte-sup img{
  width: 100%;
  max-width: 200px;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  float: right;
}
@media (max-width: 300px){
  .seccion6 .parte-sup img{
    width: 100%;
    height: 100%;
  }
}
.seccion6 .parte-sup .contenido{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 85%;
  margin-left: 15%;
}
.seccion6 .parte-sup .contenido .subtitulo{
  font-size: 0.8rem;
  padding: 0.3rem 0;
  letter-spacing: 0.2rem;
}
@media (max-width: 1024px){
  .seccion6 .parte-sup .contenido .subtitulo{
    padding: 0.2rem 0;
    letter-spacing: 0.15rem;
  }
}
@media (max-width: 400px){
  .seccion6 .parte-sup .contenido .subtitulo{
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
  }
}
.seccion6 .parte-sup .contenido .titulo{
  font-size: 2.5rem;
  font-weight: 800;
  padding: 0.3rem 0;
  letter-spacing: 0.1rem;
  transition: 0.5s ease;
}
.seccion6 .parte-sup .contenido .titulo:hover{
  color: #e81919;
  cursor: pointer;
}
@media (max-width: 1024px){
  .seccion6 .parte-sup .contenido .titulo{
    font-size: 2rem;
  }
}
@media (max-width: 526px){
  .seccion6 .parte-sup .contenido .titulo{
    font-size: 1.5rem;
  }
}
@media (max-width: 400px){
  .seccion6 .parte-sup .contenido .titulo{
    font-size: 1rem;
  }
}
.seccion6 .parte-sup .contenido .info{
  font-size: 1rem;
  font-weight: 300;
  line-height: 2rem;
  padding: 0.3rem 0;
}
@media (max-width: 1024px){
  .seccion6 .parte-sup .contenido .info{
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
}
@media (max-width: 400px){
  .seccion6 .parte-sup .contenido .info{
    font-size: 0.7rem;
    line-height: 1.3rem;
  }
}
.seccion6 .parte-med{
  display: grid;
  grid-template-columns: 18% 30% 48%; 
  gap: 2%;
  margin-bottom: 1rem;
}
@media (max-width: 300px){
  .seccion6 .parte-med{
    display: none;
  }
}
.seccion6 .parte-med .uno{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
}
.seccion6 .parte-med .uno .img1{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.seccion6 .parte-med .uno .img1 img{
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.seccion6 .parte-med .uno .img2 img{
  width: 300px;
  height: 200px;
  object-fit: cover; 
}
.seccion6 .parte-med .dos{
  width: 100%;
  height: 100%;
}
.seccion6 .parte-med .dos img{
  width: 100%;
  height: 25rem;
  object-fit: cover;
}
.seccion6 .parte-med .tres{
  width: 100%;
  height: 100%;
  display: flex;
  gap: 5%;
}
@media (max-width: 300px){
  .seccion6 .parte-med .tres{
    display: none;
  }
}
.seccion6 .parte-med .tres .img1{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.seccion6 .parte-med .tres .img1 img{
  width: 22rem;
  height: 20rem;
  object-fit: cover;
}
.seccion6 .parte-med .tres .img2{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 540px){
  .seccion6 .parte-med .tres .img2{
    align-items: center;
  }
}
.seccion6 .parte-med .tres .img2 img{
  width: 8rem;
  height: 8rem;
  object-fit: cover;
}
.seccion6 .parte-inf{
  display: grid;
  grid-template-columns: 20% 30% 50%;
}
@media (max-width: 540px){
  .seccion6 .parte-inf{
    display: none;
  }
}
.seccion6 .parte-inf .uno{
  display: flex;
  gap: 1.5rem;
}
.seccion6 .parte-inf .uno .img1{
  width: 100%;
  height: 100%;
}
.seccion6 .parte-inf .uno .img1 img{
  width: 30rem;
  height: 10rem;
  object-fit: cover;
}
.seccion6 .parte-inf .uno .img2{
  width: 100%;
  height: 100%;
}
.seccion6 .parte-inf .uno .img2 img{
  width: 7rem;
  height: 7rem;
  object-fit: cover;
}


/* =================================================================================== */
/* Footer */
/* =================================================================================== */
footer{
  background-color: rgb(14, 27, 37);
  color: #fff;
}
footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}
footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
footer .logo {
  width: 120px;
  height: 120px;
  padding: 1rem;
}
footer .footer-horarios{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  justify-content: center;
  align-items: center;
}
@media (max-width: 778px){
  footer .footer-horarios{
    grid-template-columns: 1fr;
    text-align: center;
  }
}
footer .footer-horarios .horario {
  font-weight: 800;
  cursor: default;
  transition: all 0.5s ease;
}
footer .footer-horarios .horario:hover {
  color:rgb(167, 167, 167);
}
footer .footer-horarios .horario span{
  font-weight: 400;
}
footer .footer-redes{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 5%;
}
footer .footer-redes a{
  padding: 0.8rem;
  border: 0.4px solid rgb(50, 61, 69);
  transition: 0.5s ease;
}
footer .footer-redes a:hover.instagram{
  color: #e4405f;
}
footer .footer-redes a:hover.soundcloud{
  color: rgb(235,85,41);
}
footer .footer-redes a:hover.spotify{
  color: rgb(30,215,96);
}
footer .linea{
  width: 100%;
  height: 1px;
  background-color: rgb(50, 61, 69);
  margin: 3rem auto 2rem auto;
}
footer .derechos{
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  padding: 0.5rem 0;
}
@media (max-width: 540px){
  footer .derechos{
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
}




/* =================================================================================== */
/* Mobile Menu */
/* =================================================================================== */

.mobile-menu{
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
}
.mobile-menu-content{
  width: 100%;
  height: 100%;
  display: flex;
}
.mobile-menu .mobile-menu-links{
  width: 100vw;
  padding: 5%;
  background-color: rgb(39, 39, 40);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-menu-links .logo {
  width: 100px;
  height: auto;
  padding: 1rem;
}
.mobile-menu-links .links {
  padding-left: 5%;
  display: flex;
  flex-direction: column;
}
.mobile-menu-links .link{
    display: block;
    color: white;
    font-size: 2.5rem;
    margin: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.3rem;
}
@media (max-width: 540px){
  .mobile-menu-links .link{
      font-size: 1.5rem;
      margin: 1.2rem;
  }
}
@media (max-width: 393px){
  .mobile-menu-links .link{
      font-size: 1rem;
      margin: 1rem;
  }
}
.mobile-menu-links .line{
  width: 90%;
  height: 1px;
  background-color: white;
  margin: 1rem auto;
}
.mobile-menu-links .social-networks{
  margin-left: 5%;
  display: flex;
  align-items: center;
  color: white;
  font-size: 2rem;
}
.mobile-menu-links a{
  margin-right: 1rem;;
}
.mobile-menu-secondary{
  width: 40vw;
  padding: 5%;
  background-color: rgb(152, 152, 152);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@-webkit-keyframes rotate-center-inverse{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes rotate-center-inverse{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}
.mobile-menu-secondary .close-burger-menu{
  position: absolute;
  top: 5%;
  right: 8%;
  cursor: pointer;
  -webkit-animation: rotate-center-inverse 0.6s ease-in-out both;
  animation: rotate-center-inverse 0.6s ease-in-out both;
}
@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.mobile-menu-secondary .close-burger-menu:hover{
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}
.mobile-menu-secondary .links{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-menu-secondary a{
  font-size: 1.5rem;
  margin-bottom: 1rem;;
}
.active{
  display: block;
}

/* =================================================================================== */
/* Scroll Button */
/* =================================================================================== */
.scrollBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.5s ease;
    -webkit-animation: rotate-center-inverse 0.6s ease-in-out both;
    animation: rotate-center-inverse 0.6s ease-in-out both;
}
.scrollBtn:hover {
    -webkit-animation: rotate-center 0.6s ease-in-out both;
    animation: rotate-center 0.6s ease-in-out both;
    color: rgb(19, 46, 87);
    background-color: #fff;
    border: 1px solid rgb(19, 46, 87);
}