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

body{
    margin:0px;
    padding:0px;
  /* background: radial-gradient(circle, rgba(252,70,107,1) 0%, rgba(63,94,251,1) 100%);*/
}

/* WhatsApp Button */

.whatsApp{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
}
.my-whatsApp{
    margin-top:16px;
}

/* WhatsApp Button */



.navigation{
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
 
}

.navigation .btn{
  background: rgba(255, 255, 255, 0.5);
  width: 12px;
  height: 12px;
  margin: 10px;
  border-radius: 50%;
  cursor: pointer;
  border:solid 1px black;
}

.navigation .btn.active{
  background: #2696E9;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.top-container{
    width:100%;
     position: relative;    
}

.top-container img{
     width:100%;
     z-index: -1
}

.top-container-text{
    position: absolute;
    width:50%;
    height:200px;
   /*border: 2px solid red;*/
    z-index:1;
   
   top:100px;
   left:50px;
}

.top-container-text h4{
    font-size:36px;
    color:white;
     text-align:center;
}



.container {
  color: #e5e5e5;
  font-size: 2.26rem;
  text-transform: uppercase;
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
  background-color:black;
  height:5rem;
  width:100%;
}

.container p {
    text-shadow: 0 0 9px rgba(255,255,255,.3), 0 0 3px rgba(255,255,255,.3);
}

.animation {
  height:50px;
  overflow:hidden;
  margin-left: 1rem;
 
}

.animation > div > div {
  padding: 0.25rem 0.75rem;
  height:50px;
  margin-bottom: 2.5rem;
  display:inline-block; 
 width:300px;
}

.animation div:first-child {
  animation: text-animation 8s infinite;
}

.first div {
  background-color:#20a7d8;
}
.second div {
  background-color:#CD921E;
}
.third div {
  background-color:#c10528;
}

@keyframes text-animation {
  0% {margin-top: 0;}
  10% {margin-top: 0;}
  20% {margin-top: -5.62rem;}
  30% {margin-top: -5.62rem;}
  40% {margin-top: -11.24rem;}
  60% {margin-top: -11.24rem;}
  70% {margin-top: -5.62rem;}
  80% {margin-top: -5.62rem;}
  90% {margin-top: 0;}
  100% {margin-top: 0;}
}



.middle-container{
   width:90%;
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   justify-content: space-between;
   margin: auto;
   margin-top:50px;
   
}

.middle-items{
    flex: 2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin:30px;
    border:1px solid black;
    border-radius:15px;
    height:300px;
    gap:5px;
}

.middle-items .middle-image {
    text-align:center;
    height:30%;
}

.middle-items .middle-image img {
    max-width:20%;
    
}




.middle-items .middle-text p {
  color: black;
   text-align:center;
  height:70%;
  font-size: 16px;
}

.headerLinks{
    
    margin-top:0px;
    display: flex;
    align-items:center;
    justify-content:center;
    width:100%;  
}

.nav-link{
    color: black; 
}

.imgbox img{
     max-width:300px;
    
     height:auto;
}

.logos img{
     max-width:200px;
     height:auto;
}

.logo img{
    max-width:200px;
    height:auto;
}

.transbox{
    
   width:50%;
   margin: auto;
}

.transbox h4{
    font-size:16px;
}

.form{
    align-items:center;
    display:flex;
    flex-direction:column;
}

.passDiv{
    padding:0px;
    display:flex;
    justify-content:flex-start;
    margin-bottom:10px;
    width:80%;
}

.txt{
   width:80%; 
   margin:10px 0px 10px 0px;
}

.password{
   width:80%; 
   margin-right:10px;
  
}

.btn{
    width:60%; 
}


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

@media only screen and (max-width: 540px){}

@media only screen and (max-width: 400px){}

@media (max-width: 991px){

}

@media (max-width: 810px){

}

@media (max-width: 750px){

.middle-items{
    margin:10px;
}

.middle-items .middle-image img {
    max-width:30%;
    
}

.middle-items .middle-text p {
 
  font-size: 14px;
}

.transbox{
   width:80%;
   
}

.module input{
    font-size: 12px;
}
}

@media (max-width: 576px){

  
.middle-container{
    flex-direction:column;
    justify-content: center;
    }
    
.middle-items .middle-image img {
    max-width:20%;
}
}

@media (max-width: 420px){

.top-container-text{
    width:55%;
    height:100px;
    left:20px;
}

.top-container-text h4{
    font-size:20px;
    
   
}
}


/*
@media (max-width: 767px){
  
  .container{
       height: 375px;
  }
  
  .img-slider{
    width: 600px;
    height: 375px;
  }
}


@media (max-width: 620px){
  .img-slider{
    width: 400px;
    height: 250px;
  }

  .img-slider .slide .info{
    padding: 10px 20px;
  }

  .img-slider .slide .info h2{
    font-size: 30px;
  }

  .img-slider .slide .info p{
    width: 80%;
    font-size: 13px;
  }

  .img-slider .navigation{
    bottom: 15px;
  }

  .img-slider .navigation .btn{
    width: 8px;
    height: 8px;
    margin: 6px;
  }
}

@media (max-width: 420px){
  .img-slider{
    width: 320px;
    height: 200px;
  }

  .img-slider .slide .info{
    padding: 5px 10px;
  }

  .img-slider .slide .info h2{
    font-size: 25px;
  }

  .img-slider .slide .info p{
    width: 90%;
    font-size: 11px;
  }

  .img-slider .navigation{
    bottom: 10px;
  }
}*/