@font-face {
  font-family: 'Jersey25';
  src: url('../fonts/Jersey_25/Jersey25-Regular.ttf') format('truetype');
  font-weight: normal; 
}/*botones superiores*/

@font-face {
  font-family: 'Jersey10';
  src: url('../fonts/Jersey_10/Jersey10-Regular.ttf') format('truetype');
  font-weight: normal; 

}/* esta apra los titulos     font-size: 45px; */


@font-face {
  font-family: 'Michroma';
  src: url('../fonts/Michroma/Michroma-Regular.ttf') format('truetype');
  font-weight: normal; 

}

@font-face {
  font-family: 'PixelOperator8';
  src: url('../fonts/PixelOperator8.ttf') format('truetype');
  font-weight: normal; 

}


body{
    margin: 0;
    padding: 0;
    font-family:'Michroma',sans-serif;
    font-size: 1.0em;
    background-color: black;
    color: #ffffff;
}



.content-bg{
    /* background-color: #120e3d; */
    background-image: url(../img/content_bg.png);
    background-repeat: repeat-y;
    background-position-x: center;
    min-height: 800px;
}

.nav-bar-bg{
   background-color:#120e3d;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

.top-link{
    width: 100%;
    scale: 0.6;
}

.top-button-left span{
    color:#ffffff;
    font-size: 1.2em;
    font-family: 'Jersey25',sans-serif;
}

.top-button-right span{
    color:#ffffff;
    font-size: 1.2em;
    font-family: 'Jersey25',sans-serif;
}


.anim-shadow-lg{
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 1.0);
}

.what-is-container .what-is-text-b {
    position: relative;
    top: -148px;
    right: 0px;
    font-size: 2.6em;
}

.what-is-text-a, .what-is-text-b{
    color:#ffffff;
    font-size: 2.4em;
    display: block;
}


.what-is-text-b{
    color:#10e2f8;
}

.join-button-big{
    height: 45px;
    width:65%;
}

.join-button-small{
        height: 45px;
        width:60%;
    }


.dare-conquest{
    position: relative;
    top: -8px;
}

.how-it-works {
    background-image: url(../img/bg_puntos_2.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

.how-it-works .anim-col {
    height: 250px;
}


.wallet-anim
{
    scale: 0.25;
    margin-left: -359px;
    margin-top: -251px;
}


.wallet-text{
    position: relative;
    top: 0px;
}

.how-it-works h2.first-text{
    font-size: 60px;
    color: #fff;
    margin-bottom: 20px;
}

.how-it-works h2.second-text{
    font-size: 60px;
    color: #007bff;
    margin-bottom: 20px;
}

.how-it-woks-list{
    background-image: url(../img/bg_bullet_list.png);
    padding-left: 0;
    background-size: 100% 100%;
}

.how-it-woks-list ul{
    list-style: none;
    padding-left: 0;
    font-size: 0.85em;
    margin: 0px;
    padding-top: 1em;
    padding-bottom: 1em;
}
.how-it-woks-list li{
    position: relative; 
    padding-left: 40px; 
    line-height: 1.8em; 
    margin-left: 0.5em;
    padding-bottom: 4px;
    padding-top: 4px;
}

.how-it-woks-list li::before {
  content: ''; /* Required for pseudo-elements */
  position: absolute; /* Position the image independently */
  left: 0; /* Align to the left of the list item */
  top: 10%; /* Vertically center the image */
  /* transform: translateY(-50%); Adjust for exact vertical centering */
  width: 30px; /* Set the width of your custom image */
  height: 30px; /* Set the height of your custom image */
  background-image: url(../img/tilde.png); /* Replace with your image path */
  background-size: contain; /* Ensure the image fits within the defined dimensions */
  background-repeat: no-repeat; /* Prevent image repetition */
  background-position: center; /* Center the image within its container */


}

/* .nav-overlay-text {} */

/* Position and style the text overlay */
.image-overlay-text{
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  padding: 1rem;
  color: white;
}

.medals-text{
    top: auto;
    bottom: -50px;
    color: white;
}

.economy{
    background-image: url(../img/bg_economy_sm2.png), url(../img/bg_economy_3.png), url(../img/bg_economy_3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: top, 690px, bottom;

}

.coins-row{
    margin-top: 170px;
}

.economy-coin{
    display: none;
}

.economy-diamond{
    display: none;
}

.coins-description{
    padding-top: 0px;
}

.economy-text-a{
    color: #ffffff;
    font-size: 1.0em;
}
    

/*.economy-text-b{
    color:#fddf17;
    font-size: 1.0em;*/
}

/* .cta{
    
} */

.cta .join-us{
    max-width: 30%;
}

.cta .join-us span{
    font-style: italic;
    font-size: 3em;
}

.cta .more-info{
    padding-top: 400px;
    font-size: 1.5em;
}

.more-info p, .what-is-text-a , .what-is-text-b{
    background-image: linear-gradient(to bottom, #e3861e 15%, #fffa91 70%, #e3861e 15%); 
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    line-height: 1em;
    font-size: 2.5em;
}

.detailed-info, .more-info p{
    font-size: 1.2em;
}

.more-info p{
    font-size: 1.0em;
}

.whitepaper-link{
    max-width: 50%;
    
}

.whitepaper-link span{
    color: white;
    font-size: 0.7em;
}

.join-text{
    font-size: 1.0em;
    font-style: italic;
    color: rgb(47, 47, 47);
    font-weight: 500;
}

.join-text-big{
    font-size: 1.4em;
}

.join-text-small{
    font-size: 1.3em;
    padding-top: 15px;
}

.power-text{
    font-size: 2.5em;
}


.info-text{
    margin-left: 50px;
    margin-right: 50px;
    text-align: justify;
    color: white;
}

.text-box-blue-bg{
    background-color:rgb(0 0 0 / 20%)
}

.section-title{
    font-family: 'Jersey10';
    font-size: 3em;
}

.section-title-big{
    font-family: 'Jersey10';
    font-size: 3.5em;
}


.logo-row{
    height: 340px;
}

.logo_bw {
    scale: 0.55;
}



.more-info-row{
    margin-top: 40px;
}

.whitepaper-link-img{
    width: 70%;
}

.whitepaper-text{
    font-size: 0.7em;
}

.what-is-container{
    background-image: url(assets/img/what_is_sd_bg.png);
    background-repeat: no-repeat;
    background-position-y: 65%;
    background-size: 100% 80%;
    background-position-x: right;
    max-height: 300px;
}

.what-is-container img{
    scale: 0.75;
    position: relative;
    top: -141px;
    left: 0px;
}
  
/*-------------------------------------------------- */

@media (min-width: 768px) { 
    body{
        font-size: 1.3em;
    }

    .content-container {
        width: 990px; 
        margin: 0 auto; 
    }

    .top-link{
        width: 100%;
        scale: 1.0;
    }

    .top-button-left span{
        font-size: 0.8em;
    }

    .top-button-right span{
        font-size: 0.8em;
    }


    .image-overlay-text,.nav-overlay-text {
        position: absolute;
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        padding: 1rem;
       
    }

    .section-title{
        font-size: 2.5em;
    }

    .more-info p, .what-is-text-a , .what-is-text-b{
        font-size: 3.5em;
    }

    .what-is-container{
        background-image: url(../img/what_is_sd_bg.png);
        background-repeat: no-repeat;
        background-position-y: 65%;
        background-size: 100% 80%;
        background-position-x: right;
        max-height: 420px;
    }

    .what-is-container .what-is-text-b {
        position: relative;
        top: -559px;
        right: -276px;
        font-size: 2.6em;
    }

    .dare-conquest{
        position: static;
        top: auto;
    }

    .wallet-text{
        position: relative;
        top: -40px;
    }

    .what-is-container img{
        scale: 0.52;
        position: relative;
        top: -250px;
        left: -171px;
    }

    .join-button-big{
        height: 50px;
        width:100%;
    }


.join-button-small{
        height: 50px;
        width:45%;
    }


    .what-is-container .what-is-text-b {
        top: -570px;
        right: -230px;
        font-size: 3.5em;
    }

    .how-it-works .anim-col{
        height: 400px;
    }

    .wallet-anim{  
        scale: 0.40;
        margin-left: -248px;
        margin-top: -74px;
    }

    .how-it-works{
        /* background-size: 98% 98%; */
        background-position-x: right;
        background-position-y: -126px;
        max-height: none;
    }

    .how-it-works .wallet-row{
        max-height: 500px;
    }

    .how-it-works .anim-col{
        height: auto;
    }

    .economy{
        background-image: url(../img/bg_economy.png);
        background-size: contain;
        background-repeat: no-repeat; 
        background-position: center; 
        background-position-y: top;
        height: 1800px;
    }

    .economy-coin{
        display: inline;
        position: relative;
        left: 70px;
        top: -36px;
        scale: 1.;
    }

    .economy-diamond{
        display: inline;
        scale: 1.2;
        position: relative;
        top: 0px;
        left: -60px;
    }

    .coins-description{
        padding-top: 70px;
    }

    .logo_bw{
        position: relative;
        scale: 0.4;
        top: -105px;
        left: 0px;
    }

    .logo-row
    {
        height: 560px;
    }

    .join-text, .join-text-small{
        font-size: 1.6em;
    }

    .more-info .detailed-info{
        font-size: 1.2em;
    }

    .whitepaper-link-img{
        width: auto;
    }

    .whitepaper-text{
        font-size: 0.9em;
    }

    .video-demo{
        position: relative;
        top: -553px;
        left: 259px;
        width: 55%;
    }
}