@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
  font-family: 'Montserrat';
  scroll-behavior: smooth;
}


html{
  scroll-behavior: smooth;
}
/* navbar */
nav{

    font-family: 'Montserrat';
}

.navbar-light .navbar-nav .nav-link{
    color: #ffffff;
    font-size: 18px;
}

.navbar-light .navbar-nav .nav-link:hover{
    color: #FFCC00;
    font-size: 18px;
}


  .dropdown-menu {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border: none;
    border-radius: 0;
    padding: 0.7em;
  }
  @media only screen and (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
      display: flex;
    }
    .dropdown-menu.show {
      display: flex;
    }
  }
  .dropdown-menu ul {
    list-style: none;
    padding: 0;
  }
  .dropdown-menu li .dropdown-item {
    color: gray;
    font-size: 1em;
    padding: 0.5em 1em;
  }
  .dropdown-menu li .dropdown-item:hover {
    background-color: #f1f1f1;
  }
 
  .dropdown-menu li:first-child a:hover {
    background-color: #f1f1f1;
  }
  @media only screen and (max-width: 992px) {
    .dropdown-menu.show {
      flex-wrap: wrap;
      max-height: 350px;
      overflow-y: scroll;
    }
  }
  @media only screen and (min-width: 992px) and (max-width: 1140px) {
    .dropdown:hover .dropdown-menu {
      width: 40vw;
      flex-wrap: wrap;
    }
  }
/* navbar */


  /*  footer  */
  
  footer{
    font-family: 'Montserrat';
  }
  
  .nw1{ color: rgb(0, 0, 0);
      font-size: 15px;
      font-family: 'Montserrat';
  }
  
  .nw1:link {text-decoration: none 
  
  }
  
  .nw1:hover { color:#FFCC00; 
      text-decoration: none;
      font-family: 'Montserrat';
  }
  
  footer{
    background: linear-gradient(#330066,#330066);
    color: #ffffff;
  }
  
  
  /*  footer  */


  /*Principsl*/

.banner{
    font-family: 'Montserrat', sans-serif;
  width: 100%;
  height: 100vh;
  animation: banner 10s infinite linear alternate;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  @keyframes banner{
  0%, 20%{
    background-image: url("./img/DESARROLLO\ DE\ APLICACIONES\ 4.jpg");
  }
  25%, 45%{
    background-image: url("./img/DESARROLLO\ DE\ APLICACIONES\ 2.jpg");
  }
  50%, 70%{
    background-image: url("./img/DESARROLLO\ DE\ APLICACIONES\ 3.jpg");
  }
  75%, 100%{
    
    background-image: url("./img/DESARROLLO\ DE\ APLICACIONES22.jpg");
  }
  }
  .capa{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  }
  .info{
  z-index: 1;
  width: 100%;
  max-width: 550px;
  text-align: center;
  }
  .info h1{
  color: #fff;
  font-size: 45px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  }
  .info p{
  color: #c7c7c7;
  line-height: 1.7;
  margin-bottom: 30px;
  }
  .info a{
  color: #fff;
  text-decoration: none;
  background: #3088e0;
  padding: 16px 37px;
  display: inline-block;
  border-radius: 50px;
  }
  
  #Acred{
    color: #fff;
  text-decoration: none;
  background: #e0c193;
    background: #330066;
  padding: 16px 37px;
  display: inline-block;
  border-radius: 50px;
  }
  
  
  #Acred:hover{
    color: #fff;
  text-decoration: none;
  background: #FFCC00;
  padding: 16px 37px;
  display: inline-block;
  border-radius: 50px;
  }
  
  
  /*Principsl*/
  
  /* CARRUCEL */
  
  .slider {
    width: 90vw;
    height: auto;
    margin: auto;
    overflow: hidden;
  }
  
  .slider .slide-track {
    display: flex;
    animation: scroll 70s linear infinite;
    -webkit-animation: scroll 30s linear infinite;
    width: calc(200px * 30);
  }
  
  .slider .slide {
    width: 200px;
  }
  
  .slider .slide img {
    width: 100%;
  }
  
  @keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-200px * 7));
        transform: translateX(calc(-200px * 7));
    }
  }
  
  /* CARRUCEL */

  .nw1{ color: rgb(255, 255, 255);
    font-size: 15px;
}

.nw1:link {text-decoration: none 

}

.nw1:hover { color:#FFCC00;  
    text-decoration: none;
}



#A2{
    background-color: #330066;
    font-family: 'Gotham', sans-serif;
    display: inline-block;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid #330066;
    border-radius: 4px;
    transition: all 400ms ease;
    margin-bottom: 5px;
    
    }
    
    #A2:hover{
    background-color: #ffffff;
    color: #000000;
    }


    #PT1{
        font-family: 'Montserrat';
        font-size: 30px;   
        color: #FFCC00;
    }

    #a{
        font-size: 25px;
        color: #000000;
    }

    #po{
        color: #3088e0;
    }

    /*  cards */

#C1{
    font-size: 30px;
    font-family: 'Montserrat';
  color: #330066;
  }
  
  .C2{
    font-size: 20px;
    font-family:'Montserrat' ;
   
  }
  
  #Pc{
    font-size: 15px;
    font-family: 'Montserrat';
    color: #000000;
  }
  
  .container-card{
      width: 100%;
      display: flex;
      max-width: 1100px;
      margin: auto;
  }
  .title-cards{
      width: 100%;
      max-width: 1080px;
      margin: auto;
      padding: 20px;
      margin-top: 20px;
      text-align: center;
      color: #000000;
  }
  .card{
      width: 100%;
      margin: 20px;
      border-radius: 6px;
      overflow: hidden;
      background:#fff;
      box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
      transition: all 200ms ease-out;
      cursor: default;
  }
  .card:hover{
      box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
      transform: translateY(-3%);
  }
  .card img{
      width: 100%;
      height: 210px;
  }
  .card .contenido-card{
      padding: 15px;
      text-align: center;
  }
  .card .contenido-card h3{
      margin-bottom: 15px;
      color: #000000;
  }
  .card .contenido-card p{
      line-height: 1.8;
      color: #000000;
      font-size: 14px;
      margin-bottom: 5px;
  }
  .card .contenido-card a{
    font-family: 'Montserrat';
      display: inline-block;
      padding: 10px;
      margin-top: 10px;
      text-decoration: none;
      color: #330066;
      border: 1px solid #FFCC00;
      border-radius: 4px;
      transition: all 400ms ease;
      margin-bottom: 5px;
  }
  .card .contenido-card a:hover{
    font-family: 'Montserrat';
      background: #330066;
      color: #fff;
  }
  @media only screen and (min-width:320px) and (max-width:768px){
      .container-card{
          flex-wrap: wrap;
      }
      .card{
          margin: 15px;
      }
  }
  
  /*  cards */

  #griss{
    background-color: #f4f4f4;
    background-size: 100% 100%;
  }

  #get2{
    background-image: url(./img/fondo\ blockchain.png);
    background-size: 100% 100%;

  }


  #qq{
    background-image: url(./img/fondo\ blockchain.png);
    background-size: 100% 100%;
   
  }

  #Gris{

    background: linear-gradient(#d4d4d4,#dedede);
    background-size: 100% 100%;
  }

  #p{
    font-size: 20px;
  }
  
  #Cds{
    background-color:#330066;
    color: #ffffff;
  }