* {
    margin: 0;
    padding: 0;

}
.banner {
    background-image: url(banner.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 10px;
}
.logo {
    width: 50px;
top: 5px;
right: 90px;
    position: absolute;
}
.title {
    color: white;
    text-align: center;
    font-size: 40px;
    font-family: sans-serif;
    font-weight: 900;
    text-transform:uppercase;
    margin: 190px 0px 0px 0px;;
    animation: title 5s cubic-bezier(0.075, 0.82, 0.165, 1)  ;
    position:relative; 
}
@keyframes title {
    0% {
transform: translateY(-500px);
    }
    90% {
        text-shadow: 0px 0px 0px white;
    }
    91% {
        text-shadow: 0px 0px 30px white;
    }
    92% {
        text-shadow: 0px 0px 0px white;
    }
    93% {
        text-shadow: 0px 0px 30px white;
    }
    94% {
        text-shadow: 0px 0px 0px white;
    }
    95% {
        text-shadow: 0px 0px 30px white;
    }
    99% {
        text-shadow: 0px 0px 0px white;
    }
    100% {
        transform: translateY(00px);

    }

}
.nav {
    position: fixed;
padding: 20px 30px;
font-size: 20px;
font-family: sans-serif;
z-index: 10;
width: 100%;
background-color: rgba(0, 0, 0, 0.082);
}
.nav a{
    color: white;
    padding: 0px 0px;
    font-weight: 550;
text-decoration:none ;
text-shadow: 0px 0px 10px white;
}
.policy {
    position: absolute;
padding: 10px 10px;
}
.policy a {
    color: white;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    
}
.nav a:hover {
    color: rgb(207, 233, 255);
}
.slogan {
    color: white;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    font-style: italic;
}

.line {
    background-color: white;
    width: 200px;
    margin: 3px 0px 10px 0px;
    height: 5px;
    border-radius: 30px;
}

.downloads {
    background-color: black;
    padding: 50px 20px 300px 0px;
}
.stores {
    padding:  0px;
}
.stores img {
    filter: brightness(1);
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
transform: scale(1);

}
.stores img:hover {
    filter: brightness(1.3);
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
 box-shadow: 0px 0px 20px rgb(0, 174, 255);
transform: scale(1.1);
}
.download {
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    font-family: sans-serif;

}
.stores img {
    border-radius: 20px;
    width: 300px;
}
@media only screen and (max-width: 372px ){
    .stores img {
        border-radius: 20px;
        width: 230px;
    }
}
.bottom {
    color: rgb(206, 206, 206);
    background-color: black;
    padding: 10px 20px;
    font-family: sans-serif;
    font-size: 15px;
}
.bottom-mail:hover {
    text-decoration: underline;
}
.rights {
    text-align: center;
    color: gray;
    padding: 20px 0px;
}
.bottom-mail{
    float: right;
    color: rgb(221, 221, 221);
    text-decoration: none;
    cursor: pointer;
}
.mail {
    color: white;
    text-decoration: none;
    cursor: pointer;
    
 
}
.mail:hover {
    text-decoration: underline;

}

@keyframes circle {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    20% {
        width: 50px;
        height: 50px;
        opacity: .5;

    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;

    }
}
* {
    scroll-behavior:smooth;
}
.app-image {
    width: 300px;

    position: relative;
box-shadow: 0px 0px 20px black;
border-radius: 20px;;
padding: 0;
}
@media only screen and (max-width: 356px) {
    .app-image {
        width: 260px;
    }
}
@media only screen and (max-width: 300px) {
    .app-image {
        width: 240px;
    }
}

.why {
    color: white;
    background-color: black;
    font-size: 30px;
    font-family: sans-serif;
    text-align: center;
    padding: 0;
    margin: 0;;
    font-weight: 600;
}


.reasons {
    background-color: black;
    text-align: center;
   
color: rgba(255, 255, 255, 0.425);
}
.reasons li {
    display: inline-block;
    list-style: none;
    padding: 0px 20px;;
}
.circle-reason {
background-color: rgba(128, 128, 128, 0.336);
width: 20px;
height: 20px;;
margin: 5px 0px;;
border-radius: 100%;
transform: translateX(-15px);
position: absolute;
}






.reasons1 {
    display: flex;
   
    background-color: black;
}


.reasonz {
color: white;
padding: 10px 30px;
font-size: 30px;
font-weight: 700;
font-family: sans-serif;
background-image: linear-gradient(20deg, rgb(59, 47, 168), rgb(0, 157, 255));
animation: reasonsanimated 5s cubic-bezier(0.215, 0.610, 0.355, 1) infinite alternate;
background-size: 200%;
 border-radius: 10px;;
margin: 0px 10px;
transition: .5s;

}

@keyframes reasonsanimated {
    0% {
        background-position:left;
        
    }
    100% {
        background-position:right;
    }
}
.explanation {
    color: white;
    background-color: rgba(46, 46, 46, 0.37);
    padding : 10px 20px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.397);
    border-radius: 20px;
    font-size: 20px;
    font-weight: 500;
    
}
@media only screen and (max-width: 890px){
    .reasons1 {
display: grid;
    }
    .reasonz {
      margin: 20px 30px;
   
    }
}
.title-buttons {
    text-align: center;
    padding: 0px 10px;
    
}
.button {
    font-size: 20px;;
    font-family: sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: white;
    border-radius: 10px;
    border: 2px white solid;
    padding: 10px 20px;
    box-shadow: inset 0px 0px 20px rgba(43, 189, 226, 0.233), inset 00px 0px 0px white;
    margin: 0px 10px;
    transition: .5s;

}
.button:hover {
    box-shadow: inset 0px 0px 20px rgba(43, 189, 226, 0.233), inset 400px 0px 0px white;
    transition: .5s;
    color: black;

}
@media only screen and (max-width: 450px){
 .button {
   display:grid;
   margin: 10px 0px;
 }

    }
    .scrolldown {
        color: rgba(255, 255, 255, 0.397);
        font-size: 20px;
       position: absolute;
        margin: 100px 5%;
    }
    .linescroll {
        width: 2px;
        height: 30px;
        margin: 0px -5px;
        background-color: rgba(255, 255, 255, 0.349);
        position: absolute;
    }
    .arrow {
        position: absolute;
        font-family: sans-serif;
        font-weight: 900;
        font-size: 15px ;
        margin: 0px 45px;
        animation: scrolldown 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        

    }
    @keyframes scrolldown {
        0% {
            transform:translateY(-5px);
            opacity: .5;
        }
        50% {
            transform:translateY(-10px);
            opacity: 1;
        }
      100% {
            transform:translateY(-5px);
            opacity: .5;
        }
    }
    ::-webkit-scrollbar {
        width: 10px;
       background-color: rgb(0, 119, 255, 0);
    }
    ::-webkit-scrollbar-thumb {
        background-image: linear-gradient(purple, blue, rgb(0, 217, 255));
        border-radius: 10px;
      
        
    }
    ::-webkit-scrollbar-thumb:hover {
        background-image: linear-gradient(rgb(96, 0, 96), rgb(0, 0, 196), rgb(0, 156, 183));
    
        border-radius: 10px;
        
    }
    ::-webkit-scrollbar-track {
        
      background-color: rgb(71, 71, 71);
      box-shadow: inset 0 0 10px rgb(0, 0, 0);
    
    }
    ::-webkit-scrollbar-corner {
        background-color: rgba(0, 0, 0, 0.486);
        border-radius: 20px;
    }
    .gradient {
   
        width: 100%;
       left: 0;
      transform: translateY(-310px);
        height: 320px;;
       position: absolute;
       background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
    }