@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&family=Open+Sans:wght@400;700&display=swap');

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Open sans', sans-serif;
}

:root{
   --main: #DE352E;
   --dark: #303030;
   --yellow: #FFE600;
   --blue: #01C2FF;
}

html{
   scroll-behavior: smooth;
}

body section{
   width: 100%;
   background-color: var(--dark);
   color: var(--main);
}

a{
   color: inherit;
   text-decoration: none;
}

.red{
   color: var(--main)
}

.button{
   background-color: #fff;
   color: var(--main);
   padding: 8px 20px;
   border-radius: 10px;
}

.button:hover{
   box-shadow: #fa8581 5px 5px;
}

.button.red{
   background-color: var(--main);
   color: #fff;
}

section.white{
   background-color: #fff;
   color: #000;
}

.wave{
   width: 100%;
}

ul li{
   list-style: none;
}

#redset-title{
   display: none;
}

/* NAV */

#nav{
   color: #fff;
   height: 91px;
   display: flex;
   justify-content: space-around;
   position: fixed;
   z-index: 1;
   border-bottom: 2px solid var(--main);
}

#nav div{
   display: flex;
   justify-content: space-around;
   align-items: center;
   font-size: 20px;
}

.right{
   width: 400px;
}

.left h1{
   font-family: 'Lobster Two', cursive;
   font-size: 50px;
}

.left img{
   width: 80px;
}

.left a{
   display: flex;
   width: 100px;
}

.middle{
   width: 30%;
}

/* HEADER */

#header{
   padding-top: 91px;
}

.header-content{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   width: 100%;
   position: relative;
}

.header-title{
   font-size: 35px;
   position: absolute;
   top: 0;
}

.header-macs{
   width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

#header-wave{
   padding-bottom: 0;
}

/* PLATFORMS */

.platforms-images{
   position: relative;
   height: 550px;
}

.platforms-title{
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 50px;
}

.animate-img{
   position: absolute;
   z-index: 0;
   width: 200px;
   left: 45%;
   top: 250px;
   opacity: 0;
   transition: 0.5s;
}

#img1.show{
   opacity: 1;
   transform: translateY(-140px) translateX(300px);
}

#img2.show{
   opacity: 1;
   transform: translateY(-200px) translateX(-300px);
}

#img3.show{
   opacity: 1;
   transform: translateY(200px) translateX(300px);
}

#img4.show{
   opacity: 1;
   transform: translateY(200px) translateX(-300px);
}

#img5.show{
   opacity: 1;
   transform: translateY(-200px) translateX(0);
}

#img6.show{
   opacity: 1;
   transform: translate(-365px, 45px) translateX(0);
}

#img7.show{
   opacity: 1;
   transform: translate(365px, 15px) translateX(0);
}

#img8.show{
   opacity: 1;
}

/* CHAT */

#chat{
   display: flex;
   justify-content: space-around;
}

.text-chat{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   height: 300px;
   width: 40%;
}

.text-chat-title{
   font-size: 36px;
   font-weight: bold;
}

.text-chat-desc{
   color: #fff;
   text-align: center;
   width: 40%;
   font-size: 25px;
}

.example-chat{
   width: 60%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
}

.messages{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   height: 400px;
}

.message{
   display: flex;
   justify-content: space-around;
   width: 300px;
   opacity: 0;
   transform: translateX(-400px);
}

.text-message{
   color: #fff;
   background-color: var(--main);
   padding: 10px;
   border-radius: 20px;
   width: 200px;
}

.icon{
   width: 50px;
   height: 50px;
   border-radius: 50px;
}

.icon.yellow{
   background-color: var(--yellow);
}

.icon.blue{
   background-color: var(--blue);
}

.sender{
   display: flex;
   justify-content: space-around;
   width: 350px;
}

.input{
   width: 200px;
   height: 50px;
   background-color: #fff;
   border-radius: 25px;
}

.button-message{
   padding: 15px 10px 10px 30px;
   background-color: var(--main);
   width: 100px;
   color: #fff;
   border-radius: 25px;
}

label{
   font-size: 25px;
   font-weight: bold;
}

/* TIME */

.time{
   display: flex;
   justify-content: space-around;
}

.time-title{
   font-weight: bold;
   font-size: 36px;
   margin-bottom: 50px;
}

.time-text{
   color: #fff;
   font-size: 25px;
   text-align: center;
   width: 400px;
}

.time-text#rpc{
   margin-left: 30%;
}

/* Affiliations */

#affiliations{
   padding-bottom: 200px;
}

.services img{
   width: 300px;
}

.services{
   padding-left: 200px;
   transform: translateX(-100px);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   color: #fff;
   align-items: center;
}
.services p{
   width: 300px;
}

.affiliations-title{
   font-size: 36px;
   text-align: center;
   margin-bottom: 50px;
}

/* FOOTER */

#footer{
   position: relative;
}

#footer .wave{
   position: absolute;
   bottom: 180px;
}


.footer{
   color: #fff;
   background-color: var(--main);
   display: flex;
   justify-content: space-around;
   padding-bottom: 20px;
}

.left-footer img{
   width: 100px;
}

.middle-footer div{
   display: flex;
   justify-content: space-around;
}

.middle-footer h1{
   text-align: center;
}

.middle-footer > div{
   width: 300px;
}

.copy{
   background-color: var(--main);
   text-align: center;
   color: #fff;
   font-weight: normal;
}

.right-footer{
   width: 250px
}

.right-footer div{
   width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.merch-btn{
   padding: 10px;
   background-color: #fff;
   color: var(--main);
   border-radius: 7px;
}

/* HELP CENTER */

#help_center{
   padding-top: 91px;
   padding-bottom: 600px;
   /* height: 600px; */
   position: relative;
}

#help_center h1{
   font-size: 48px;
   text-align: center;
}

.disapear{
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

/* FAQ */

#faq{
   padding-bottom: 400px;

}

.questions{
   display: flex;
   justify-content: space-around;
   color: #fff;
}

.round{
   width: 40px;
   height: 40px;
   border-radius: 40px;
   background-color: var(--main);
   cursor: pointer;
}

.type{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   height: 300px;
}

.int{
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 100%;
   width: 300px;
}

.answer p{
   width: 300px;
   text-align: center;
   font-size: 13px;
   display: none;
}

/* mail */

.more-help{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
}

form{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   height: 800px;
   color: #fff;
   padding: 20px 20px;
}

.success{
   background-color: rgb(23, 255, 2);
   color: #fff;
   padding: 20px;
}

.error{
   background-color: rgb(255, 2, 2);
   padding: 20px;
   color: #fff;
}

input{
   border: 3px solid var(--main);
   padding: 10px 20px;
   border-radius: 20px;
   color: #fff;
   outline: none;
   background-color: var(--dark);
   width: 600px;
   height: 50px;
   font-size: 25px;
}

textarea{
   border: 3px solid var(--main);
   padding: 10px 20px;
   border-radius: 20px;
   color: #fff;
   outline: none;
   width: 600px;
   background-color: var(--dark);
}

button{
   background-color: var(--main);
   border: 0;
   padding: 10px;
   color: #fff;
   outline: none;
   width: 300px;
   height: 50px;
   font-size: 25px;
   padding: 2px;
}

/* TEAM */

#team{
   height: 800px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 1100px;
}

.teamate{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   width: 400px;
   margin: 35px 0;
}

.teamate-p{
   color: #fff;
}

.pp{
   width: 100px;
   height: 100px;
   border-radius: 100px;
}

.pp > img{
   width: 100px;
   height: 100px;
   border-radius: 100px;
}

/* PARTNERS */

#partners{
   color: #fff;
   padding-bottom: 300px;
}

.partners-title{
   margin-bottom: 50px;
   text-align: center;
   width: 80%;
   margin-left: 10%;
}

.partners-title h1{
   color: var(--main);
}

.affiliate_branch{
   display: flex;
   justify-content: space-around;
   flex-direction: column;
   align-items: center
}

.affiliate_branch a{
   /* width: 200px; */
}

#tos #nav{
   position: static;
}

/* state */

#state{
   background-color: var(--dark);
   color: #fff;
}

.rounded-platform{
   width: 75px;
   height: 75px;
   border-radius: 75px;
}

.greencircle{
   background-color: rgb(0, 255, 85);
}

.redcircle{
   background-color: var(--main);
}

#platforms-list{
   margin-left: 20%;
   width: 60%;
   padding: 150px 0 50px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

#platforms-list > li{
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 20px 20px;
   width: 300px;
}

.legend{
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 100%;
   padding-bottom: 300px;
}

.legend > div{
   display: flex;
   align-items: center;
   justify-content: space-around;
   width: 200px;
}

#become-partner{
   width: 100%;
   display: flex;
   justify-content: center;
   height: 500px;
}

#become-partner > a{
   height: 40px;
}

@media only screen and (max-width: 850px) {
   /* navbar */

   #nav{
      height: 150px;
   }

   .left{
      width: 20%;
   }
   .left h1{
      font-size: 30px;
   }
   .left img{
      width: 40px;
      height: 40px;
   }
   .middle{
      width: 40%;
      flex-direction: column;
   }
   #home-a{
      display: none;
   }

   .middle a{
      font-size: 15px;
   }
   .right{
      width: 20%;
      flex-direction: column;
   }
   .right img{
      width: 50px
   }
   .button{
      width: 60px;
      padding: 5px;
      font-size: 10px;
   }

   /* header */

   .header-title{
      font-size: 15px;
      text-align: center;
   }

   /* platforms */

   .platforms-title{
      font-size: 15px;
   }

   .animate-img{
      width: 100px;
      left: 35%;
   }

   #img1.show{
      opacity: 1;
      transform: translateY(-100px) translateX(100px);
   }
   
   #img2.show{
      opacity: 1;
      transform: translateY(-100px) translateX(-100px);
   }
   
   #img3.show{
      opacity: 1;
      transform: translateY(100px) translateX(-100px);
   }
   
   #img4.show{
      opacity: 1;
      transform: translateY(100px) translateX(100px);
   }
   
   #img5.show{
      opacity: 1;
      transform: translateY(-150px) translateX(0);
   }

   /* chat */

   .text-chat{
      width: auto;
   }

   .text-chat-title{
      font-size: 15px;
   }

   .text-chat-desc{
      font-size: 15px;
   }

   .message{
      width: 150px;
   }

   .text-message{
      width: 100px;
   }

   .input{
      width: 100px;
   }

   .sender{
      width: 200px;
   }

   .button-message{
      padding: 13px 2px 2px 17px;
      width: 75px;
   }

   /* TIME */

   .time-img img{
      width: 100px;
   }

   .time-title{
      font-size: 15px;
   }
   
   .time-text{
      font-size: 15px;
      width: auto;
   }

   .time-desc{
      width: 200px;
   }

   /* affiliations */

   .affiliations-title{
      font-size: 15px;
   }

   .service img{
      width: 100px
   }

   /* footer */

   #footer .wave{
      display: none;
   }

   .left-footer img{
      width: 50px;
   }

   .left-footer{
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .middle-footer > div{
      width: 150px;
   }

   .middle-footer div{
      flex-direction: column;
      align-items: center;
   }

   .middle-footer a{
      font-size: 15px;
   }

   .right-footer{
      font-size: 15px;
   }

   .support{
      flex-direction: column;
   }

   .support img{
      width: 50px;
   }

   .social img{
      width: 25px;
   }

   /* help center */

   #help_center{
      padding-top: 91px;
      height: 250px;
      padding-bottom: 0px;
   }

   #help_center h1{
      font-size: 36px;
   }

   .disapear{
      display: none;
   }

   #faq{
      width: 100%;
   }

   #questions{
      flex-direction: column;
   }

   /* team */

   #team{
      height: 1800px;
   }

   .teamate{
      width: 200px;
   }

   /* .pp{
      width: 75px;
      height: 75px;
      border-radius: 75px;
   } */
   
   .teamate-h1{
      font-size: 20px;
   }

   #program-a{
      font-size: 12px;
   }


   .partner .time img {
      width: 200px;
   }

   #partner-div{
      height: 2400px;
   }

}

.partner:nth-child(4){
   height: 800px;
}


/* #partner-div{
   height: 3400px;
} */

.partner .time{
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.partner:nth-child(3) .time-text{
   height: 400px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
}

.partner:nth-child(4) {
   height: 850px;
   display: flex;
   justify-content: center;
   /* align-items: center; */
}

.slider{
   width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   flex-direction: column;
   position: relative;
   background-color: #fff;
   height: 500px;
}

.cards{
   display: flex;
   width: 1800px;
   padding-left: 200px;
   padding-right: 230px;
}

.card{
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   width: 500px;
   height: 500px;
   border-radius: 50px;
   padding-top: 10px;
}

.card-img{
   background-color: #303030;
}

.slider-btn{
   width: 10px;
   cursor: pointer;
}

.sld-cards{
   display: flex;
   justify-content: space-around;
   align-items: center;
   position: absolute;
   /* left: 100px; */
   height: 500px;
   width: 100%;
}

.buttons{
   position: absolute;
   bottom: 0px;
}

.page1{
   animation: slideto1 1s ease;
   animation-fill-mode: forwards;
}
.page2{
   animation: slideto2 1s ease;
   animation-fill-mode: forwards;
}
.page3{
   animation: slideto3 1s ease;
   animation-fill-mode: forwards;
}

@keyframes slideto1{
   100%{
      left: 0px;
   }
}
@keyframes slideto2{
   100%{
      left: -1600px;
   }
}
@keyframes slideto3{
   100%{
      left: -3400px;
   }
}