@import url('https://fonts.googleapis.com/css2?family=Abel&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');

/* Settings */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --light-lila: #B3ADD9;
   --medium-lila: #8091F2;
   --dark-lila: #4B61A6;
   --blue-marine: #4B61A6;
   --light-white: #F2F2F2;
   --marine-blue: #274073;
   --yellow: #EEFB03;
   --purple: #381f69;
   --light-purple-1: #5E17EB;
   --gray: #2e2e2e;
   --medium-purple: #4f3486;
   --light-purple: #7e69a8;
   --new-purple: #8C52FF;
   --medium-light-purple: #E7D8FF;
   --medium-white: #F1E9E9;
}

body {
   font-family: "Montserrat", sans-serif;
   position: relative;
   background-color: var(--light-lila);
   font-weight: 400;
   font-style: normal;
}

h1, h2, h3, h4 {
   color: #fff;
   font-weight: 300;
}

li { list-style: none; }

.flex { display: flex; }

h1 { font-size: 2.625rem; }
p { color: #fff;  }
p span.paragraph__highlight,
.text__highlight { font-weight: 700; }

.section__separator {
    position: absolute;
    content: "";
    width: 100%;
    height: .3rem;
    background-color: var(--yellow);
    margin-left: -1rem;
    bottom: 0;
}

a,
button
{ outline: none; background: none; text-decoration: none; color: #fff;; border: none; cursor: pointer;}

.big__button {
   background: #000;
   padding: .5rem 1.5rem;
   border-radius: 5rem;
   max-width: 10rem;
   margin: auto;
}

main{
   height: 100%;
   max-width: 100vw;
   flex-wrap: wrap;
   justify-content: center;
   scroll-behavior: auto;
}

main > section {
   min-height: 100vh;
   width: 100vw;
   position: relative;
   flex-direction: column;
   padding: 4rem 1rem 1rem 1rem;
   z-index: 5;
}
.section__title { color: var(--purple); font-weight: 800; }
.section__subtitle { color: #000; }
/* End settings */
/* Header settings */
.header {
   background-color: var(--purple);
   border-bottom: 3px solid #EEFB03;
   z-index: 6;
   position: fixed;
   width: 100%;
   justify-content: center;
   align-items: center;
}
.header__container {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 65rem;
    gap: 1rem;
    padding: .3rem 1rem;
}

.header__logo {
   position: relative;
   max-width: 3rem;
}

.header__logo > img {
   width: 3rem;
}

.header__button {
   color: var(--light-white);
}

.header__nav { display: none; }
.header__nav.active {
   display: flex;
   position: absolute;
   top: 0;
   right: 0;
   width: 100vw;
   height: 100vh;
}

#close-menu{ position: absolute; right: 1rem; top: 1rem;}
.header__nav::after {
   position: absolute;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   background: rgb(0,0,0);
   background: linear-gradient(180deg, rgb(48, 48, 48) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.6) 100%);
   backdrop-filter: blur(.5rem);
   -webkit-backdrop-filter: blur(.5rem);
}
.nav__links-container {
   gap: 5rem;
   flex-direction: column;
}
.nav__item.active {
   border-bottom: 2px solid var(--yellow);
   padding: 0 0 .5rem 0;
}
.nav__item.active a { color: var(--yellow); }
.nav__link {
   color: #fff;
   text-transform: uppercase;
   z-index: 0;
   font-size: 1.1rem;
}
.nav__link i{
   margin-right: 2rem;
}

.nav__ul {
   width: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5rem;
}
/* End header settings */
/* Home settings */
.home__button {
   background-color: var(--yellow);
   z-index: 10;
   color: #000;
   font-weight: 800;
   box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, .5);
}

.home {
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   min-height: 100vh;
}

.home__background {
   position: absolute;
   z-index: -1;
   min-height: 100%;
   width: 100%;
   overflow: hidden;
}
.home__background .first {
   position: absolute;
   bottom: -30%;
   left: -20%;
}
.home__background .second {
   position: absolute;
   rotate: 180deg;
   top: 0;
   right: -20%;
}

.mancha {
    position: absolute;
    width: 15rem;
    top: -3rem;
    left: -3rem;
    transform: rotate(270deg);
}
.home__background .mancha.snd {
    top: unset;
    bottom: -1rem;
    transform: rotate(90deg);
    left: unset;
    right: -2rem;
}

.home__text,
.home__titles {
   flex-direction: column;
   text-align: center;
}
.home__text {
   gap: 3rem;
   margin: 1rem 2rem;
}
.home__subtitle { order: 0; }
.home__title { order: 1; }
.home__paragraph {
   order: 2;
   text-align: left;
   color: #000;
   flex-direction: column;
   gap: .3rem;
}

a.discover {
    background-color: var(--purple);
    color: #fff;
    margin: 0 auto;
}

.down__arrow {
    position: absolute;
}
/* End home settings */
/* Intro settings */
#intro {
    flex-direction: column;
    gap: 3rem;
    min-height: unset;
}

.intro .squares {
    width: 10rem;
    position: absolute;
    top: -10rem;
    left: -4rem;
    z-index: -1;
}
.intro .mancha {
    width: 30rem;
    transform: rotate(90deg);
    top: -8rem;
    left: -1rem;
    z-index: -1;
}

.section__img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
}
.section__img .img__container {
    position: relative;
}
.section__img .img__container .img-blur {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgb(75,32,194);
    background: -moz-linear-gradient(0deg, rgba(75,32,194,1) 44%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(75,32,194,1) 44%, rgba(0,0,0,0) 100%);
    background: linear-gradient(0deg, rgba(75,32,194,1) 44%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4b20c2",endColorstr="#000000",GradientType=1);
    opacity: .7;
    top: -3px;
    border-radius: 1rem;
}

.section__img .down-arrow {
    position: unset;
    color: #fff;
    filter: invert(1);
    transform: rotate(270deg);
    min-width: unset;
    width: 8rem;
    height: auto;
    
}
.section__img img {
    min-width: 13rem;
    max-width: 20rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1rem;
}

.intro__card {
    border-radius: 1rem;
    background-color: var(--purple);
    padding: 0 2rem;
    gap: 1.5rem;
    height: 20rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.intro__card .card__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--yellow);
    text-align: center;
}
/* End Intro settings */
/* Services settings */
.services {
    gap: 2rem;
}

.services__title{
	color: var(--gray);
}
.services__paragraph{
    color: #000;
}

.services__selection{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1.5rem;
    height: 100%;
}

.selection__card {
    position: relative;
    border-radius: 1rem;
    min-height: 13rem;
    background-color: var(--medium-purple);
}

.selection__card .card__img{
    width: 7.5rem;
    position: absolute;
    right: .5rem;
    bottom: 0;
}
.selection__card .card__title{
    font-weight: 800;
    font-size: 1.2rem;
    margin: .5rem .5rem 0;
}

.service__button {
    background-color: var(--yellow);
    color: #000;    
    font-weight: 800;
    padding: .5rem 1rem;
    border-radius: 1rem;
    max-width: 10rem;
    margin: 6.5rem 1rem 0;
}

.service__description {
    padding: .5rem;
    /* margin-top: 4.5rem; */
    margin-bottom: 1rem;
    display: none;
}
.service__description.active {
    display: block;
}

.service__button {
    background-color: var(--yellow);
    color: #000;
    font-weight: 800;
    padding: .8rem 1rem;
    border-radius: 1rem;
    max-width: 10rem;
    margin: 3rem 1rem 1rem;
}

.description__ul li {
    list-style: unset;
    color: #fff;
    font-weight: 800;
}
.description__ul {
    margin-left: 2rem;
}
/* End Services settings */
/* About us settings */
.nosotros {
    gap: 2rem;
    padding: unset;
}

.slider {
    overflow: hidden;
    margin-top: 3rem;
}

.nosotros__slider {
    height: 3rem;
    background-color: rgba(255, 255, 255, .3);
}
.slider__elements {
    align-items: center;
    height: 100%;
    animation: 5.5s slide linear infinite;
}

.nosotros__slider .slider__element {
    margin: 0 1rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.nosotros__slider .element__text{
    color: #000;
    background-color: var(--new-purple);
    padding: .5rem;
    border-radius: .5rem;
    font-weight: 600;
    margin-left: .5rem;
}

.nosotros__text {
    background-color: var(--medium-light-purple);
    border-radius: 2rem;
    width: 100vw;
    flex-direction: column;
    gap: 2rem;
}
.nosotros__title { color: var(--gray); font-weight: 700; text-align: center; margin-top: 1rem;}
.nosotros__title .text__highlight { color: var(--light-purple-1); }

.nosotros__strats {
    flex-direction: column;
    gap: 1rem;
}

.strat__element .img__container {
    min-width: 4rem;
    max-width: 4rem;
    height: 4rem;
    background-color: #fff;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.strat__element img {
    width: 65%;
    height: 65%;
    object-fit: cover;
}
.strat__element {
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}
.strat__title { color: #000; font-weight: 600;}
.strat__paragraph { color: #000; }

.nosotros-button {
    max-width: unset;
    font-weight: 700;
    background-color: var(--yellow);
    color: #000;
}
/* End About us settings */
/* Contact settings */
.contact-us {
    justify-content: center;
}

.contact__form-container {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

.contact__paragraph {
    color: #000;
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    font-family: "Montserrat", sans-serif;
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.form__input {
    font-family: "Montserrat", sans-serif;
    border: none;
    background-color: var(--medium-white);
    padding: 1rem;
    position: relative;
}

.form__button {
    font-weight: 800;
    letter-spacing: .1rem;
    background-color: var(--light-purple-1);
    width: 100%;
    padding: .7rem;
    font-size: 1.1rem;
}

.form__label.required::after {
    content: " *";
    color: red;
}
/* End Contact settings */
/* Footer settings */
.footer {
    background-color: var(--purple);
    width: 100vh;
    padding: 1rem;
    gap: 2rem;
    flex-direction: column;
}

.footer__logo {
    align-items: center;
    gap: .5rem;
}
.footer .logo__img {
    width: 5rem;
}
.footer .logo__text {
    font-weight: 600;
}

.footer__social {
    flex-direction: column;
    gap: 1rem;
}
.footer .social__title {
    font-weight: 600;
}
.footer .social__logos {
    gap: 1rem;
    font-size: 2rem;
    color: #fff;
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #fff;
}
.footer__contact .contact__info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.contact__element .contact-logo { 
    font-size: 1.3rem; 
    width: 2rem;
    height: 2rem;
    display: flex;    
    justify-content: center;
}
.contact__location .contact-logo { color: red; }

.footer__contact .contact__element {
    display: flex;
    gap: .5rem;
}
/* End Footer settings */
/* QR settings */
.main__title {
    color: #000;
    font-weight: 600;
    text-align: center;
}

.game .main__paragraph {
    color: #000;
    font-weight: 600;
    text-align: center;
}

.game__buttons {
    /* background-color: var(--purple); */
    /* border-radius: 1rem; */
    gap: 1rem;
    /* flex-direction: column; */
    justify-content: center;
    flex-wrap: wrap;
}

section.game__container {
    justify-content: center;
    gap: 2rem;
    padding-bottom: unset;
    padding-top: unset;
}

.game__buttons button {
    background-color: var(--purple);
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    width: 7rem;
    height: 7rem;
}
.game__buttons button.founded {
    background-color: var(--yellow);
    color: #000;
}

.game__buttons .inactive {
    opacity: .5;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 100px; /* Location */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black background with opacity */    
}
  
.modal-content  
{
    background-color: var(--purple);
    position: relative;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}   

#modalText {
    color: #fff;
    font-weight: 700;
    text-align: center;
}
/* End QR settings */
/* Keyframes settings */
@keyframes slide {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}

@media (min-width: 820px) {
    .header { height: 5.5rem; }
    .header__nav { display: flex; }
    .nav__links-container { flex-direction: row; }     
    
    .header__button,
    .header__nav::after,
    .nav-icon {
        display: none !important;
    }
}