/*
 * Custom CSS
 */
@import url('https://fonts.cdnfonts.com/css/luckiest-guy');
@import url("https://fonts.cdnfonts.com/css/exo-2");

:root {
  --bs-body-bg: var(--bs-gray-100);
}

body {
  background-color: #FAF9F7 !important;
}

.navbar {
 background-color: #691ECC !important;
}
.navbar .nav-link {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 200;
  font-size: 20px;
}
.navbar-nav .nav-link.active {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 400;
  font-size: 20px;
}
.navbar-toggler {
  color: #FAF9F7 !important;
  border-color: #FAF9F7 !important;
}

.nav-link {
  font-family: "Exo 2", sans-serif !important;
  color: #666666 !important;
  font-weight: 200;
  font-size: 20px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.game-title {
  font-family: "Luckiest Guy", sans-serif !important;
  color: #FAF9F7 !important;
  font-size:  calc(1.525rem + 3vw);  
}

.blue-bg {
  background-image: linear-gradient(to bottom, #691ECC, #FFFFFF);
}

.gray_bg {
  background-color: #FAF9F7 !important;
  color: #494747;
}

.game-title-text {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 200;
  font-size: 16px;  
}

.gray-title {
  font-family: "Exo 2", sans-serif !important;
  color: #494747 !important;
  font-weight: 700;
  font-size: calc(1.2rem + 2vw); 
}
.gray-text {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 200;
  font-size:  calc(0.1rem + 1.2vw);  
}
.gray-text-2 {
  font-family: "Exo 2", sans-serif !important;
  color: #494747 !important;
  font-weight: 400;
  font-size:  calc(0.1rem + 1.1vw);  
}

.white-text {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 200;
  font-size: 16px;  
}
.white-title {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 700;
  font-size: calc(1.2rem + 2vw); 
}

.container-1 {
    background-image: url("./Resources/image_header_Landing_SpaceNumber.png"), linear-gradient(to bottom, #691ECC, #691ECC 90%, #FAF9F7, #FAF9F7 10%) ;
    height: 100%; /* You must set a specified height */
    background-position: top right; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain ; /* Resize the background image to cover the entire container */
    padding-top: 1.5rem;
}

.container-navbar {
    margin-left:12px !important;
    margin-right:12px !important;
    max-width: none !important;
}

.row {
  font-family: "Exo 2", sans-serif !important;
  color: #FAF9F7 !important;
  font-weight: 200;
  font-size: calc(10px + 0.5vw);    
}
.btn {
  --bs-btn-padding-x: 0rem;
}
.btn-appstore {
    background-image: url("./Resources/icon-AppStore.png");
    height: calc(35px + 2vw);
    width: calc(180px + 2vw);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain; /* Resize the background image to cover the entire container */
}
.btn-appstore:active {
    background-image: url("./Resources/icon-AppStore.png");
    height: calc(35px + 2vw);
    width: calc(180px + 2vw);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain; /* Resize the background image to cover the entire container */
    opacity: 0.75;
}
.btn-gplay {
    background-image: url("./Resources/icon-GooglePlay.png");
    height: calc(35px + 2vw);
    width: calc(180px + 2vw);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain; /* Resize the background image to cover the entire container */
}
.btn-gplay:active {
    background-image: url("./Resources/icon-GooglePlay.png");
    height: calc(35px + 2vw);
    width: calc(180px + 2vw);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain; /* Resize the background image to cover the entire container */
    opacity: 0.75;
}

.caracteristiques-1 {
    background-image: url("./Resources/Caracteristiques_image_1_Landing_SpaceNumber.png"), url("./Resources/Caracteristiques_image_2_Landing_SpaceNumber.png");
    height: 1130px;
    background-position: right top, left top;
    background-repeat: no-repeat, no-repeat;
    /*background-size: contain;
    /*margin-top: -11rem;*/
}
.caracteristiques-2 {
    background-image: url("./Resources/Caracteristiques_image_2_Landing_SpaceNumber.png");
    height: 1130px;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    /*margin-top: -4rem;
    margin-left: -11rem;*/
}
.text-caracteristiques-1 {
    position: relative;
    bottom: 78%;
    left: 36%;
}

.caracteristiques {
    background-image: url("./Resources/Caracteristiques_image_Landing_SpaceNumber.png");
    height: 740px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    /*margin-top: -11rem;*/
}

.check-caracteristiques {
    width: 40px;
    height: auto;;
    max-width: 200%;
}

.container-intervencions {
    background-image: url("./Resources/Intervencio_LayerBackground_1_Landing_SpaceNumber.png");
    height: 100%; /* You must set a specified height */
    background-position: top right; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover ; /* Resize the background image to cover the entire container */
    padding-top: 1.5rem;
}

.container-iniciativa {
    background-image: url("./Resources/Iniciativa_LayerBackground_1_Landing_SpaceNumber.png");
    height: 100%; /* You must set a specified height */
    background-position: top right; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover ; /* Resize the background image to cover the entire container */
    padding-top: 1.5rem;
    /*background-color: #691ECC !important;*/
}

.mask1 {
    -webkit-mask: url(./Resources/Caracteristiques_image_2_Landing_SpaceNumber.png) no-repeat;
    mask: url(./Resources/Caracteristiques_image_2_Landing_SpaceNumber.png) no-repeat;
}

.img-funciona {
    width:90%;
}

.card {
    margin: 0 10% 0 0 !important;
    padding: 0;
    border: 0;
    background-color: transparent;
}

.cards {
  padding-left: 10% !important;
  padding-right: 3% !important;
}
.card-img-overlay {
    margin:-3% 20% 0 7%;
}

    .buttons-prova {
        z-index: 3;
        margin-top: -28%;
        margin-left: 8vh;
    }


@media only screen and (max-width: 900px) and (min-width: 768px){
}

@media only screen and (max-width: 767px) and (min-width: 428px){
/*.container-1 {
    background-image: None;
    padding-top: 0;
  margin-top: -1rem;

  }*/
    .cards {
      padding-left: .25rem !important;
      padding-right: .25rem !important;
    }
    .card {
       margin: 0 1% 0 1% !important; 
    }

    .gray-text {
      font-family: "Exo 2", sans-serif !important;
      color: #FAF9F7 !important;
      font-weight: 200;
      font-size:  calc(0.35rem + 1.25vw);  
    }
    
    .gray-text-2 {
      font-size:  calc(0.1rem + 3vw);  
    }
    
    .iniciativa-bg-text {
         min-height: 300vw;
    }
    .container-iniciativa {
        padding-top: 10rem;
    }

    .container-2 { 
      margin-top: -60px !important;
    }
    .btn-appstore {
        height: 37px; /* You must set a specified height */
        width: 122px;
    }
    .btn-appstore:active {
        height: 37px; /* You must set a specified height */
        width: 122px;

    }
    .btn-gplay {
        height: 37px; /* You must set a specified height */
        width: 122px;
    }
    .btn-gplay:active {
        height: 37px; /* You must set a specified height */
        width: 122px;
    }

    .game-title {
        margin-top: 50vw;
    }
    .white-title {
        font-size: calc(1.1rem + 2vw); 
    }

    .white-title-special {
        padding-top:3rem !important;
    }
    
    .iniciativa-footer {
        margin-top: -30rem !important;
    }
    .gray-title {
      font-family: "Exo 2", sans-serif !important;
      color: #494747 !important;
      font-weight: 700;
      font-size: calc(1rem + 1.9vw); 
    }
    .caracteristiques-text{
        margin-top: 2% !important;
    }
    .caracteristiques-image-2 {
        margin-bottom: -3rem !important;
    }
    .caracteristiques-image-1 {
        margin-top: 14vw !important;
    }
}

@media only screen and (max-width: 428px){
    .caracteristiques-text{
        margin-top: -3.7rem !important;
    }
    .caracteristiques-title {
        padding-left: 21% !important;
    }
    .caracteristiques-image-1 {
        margin-top: -1rem !important;
    }
    .caracteristiques-image-2 {
        margin-bottom: -4rem !important;
        /*margin-left: 10%;*/
    }
    .gray-text {
      font-size:  calc(0.3rem + 1.1vw);  
    }
    .gray-text-2 {
      font-size:  calc(0.42rem + 1.05vw);  
    }
    .caracteristiques-text-box {
        margin-top: -67% !important;
        width: 82% !important;
        margin-left: 11% !important;
    }
    
    .buttons-prova {
        margin-left: 10vh !important;
    }
    .container-1 {
        padding-top: 14.5rem;
    }

    .check-caracteristiques {
        width: 40px !important;
    }
    .white-title-special {
        padding-top: 10rem !important;
    }

}

@media only screen and (max-width: 361px){
    .gray-text {
      font-size:  calc(0.29rem + 1.1vw) !important;  
    }
}

@media only screen and (max-width: 850px) and (min-width: 768px){
    .caracteristiques-text{
        margin-top: -3.7rem !important;
    }
    .caracteristiques-title {
        padding-left: 21% !important;
    }
    .caracteristiques-image-1 {
        margin-top: -3.5rem !important;
    }
    .buttons-prova {
        margin-top: -28%;
        margin-left: 6.5vh !important;
        padding-right: 1vw;    
    }
    
}

@media only screen and (max-width: 1199px) and (min-width: 851px){
    .gray-text {
      font-family: "Exo 2", sans-serif !important;
      color: #FAF9F7 !important;
      font-weight: 200;
      font-size:  calc(0.1rem + 1.1vw);  
    }
    .gray-title {
      font-family: "Exo 2", sans-serif !important;
      color: #494747 !important;
      font-weight: 700;
      font-size: calc(1.2rem + 1.8vw); 
    }
    .caracteristiques-text{
        margin-top: -4% !important;
    }
    .caracteristiques-image-1 {
        margin-top: -3rem !important;
    }
    
    .buttons-prova {
        margin-left: 7vh;
    }
}

 @media only screen and (min-width: 1200px) and (max-width: 1399px){
     .buttons-prova {
        margin-left: 17vh;
    }
}

 @media only screen and (min-width: 1400px){
     .buttons-prova {
        margin-left: 36vh !important;
    }
}