@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bungee+Spice&family=Caveat:wght@400..700&family=Irish+Grover&family=Madimi+One&family=Oswald:wght@200..700&family=Peralta&family=Permanent+Marker&family=Pixelify+Sans:wght@400..700&family=Rubik+Scribble&family=Tac+One&display=swap');
@import url('Loader.css');
@import url('navBtn.css');
@import url('modals.css');
@import url('footer.css');

html {
  scroll-behavior: smooth;
}


body{
    margin: 0pc;
    border: 0pc;
    padding: 0pc;
    background-color: rgb(0, 0, 13);
    background-repeat: no-repeat;
    height: auto;
    color: aliceblue;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;

}

h3, h4{
  font-family: "Oswald", sans-serif;
  font-weight: 550;
}

body::-webkit-scrollbar{
  background-color: #000c13;
}
body::-webkit-scrollbar-thumb{
  border-radius: 15px;
  background-image: linear-gradient(100deg, blue 10%, rgb(0, 238, 255) 50%, rgb(255, 255, 255) 100%);
}

.mainBackground{
  width: 100%;
  height: 100vh;
  position: fixed;
}
.btn-nav{
  display: none;
}
.container-fluid{
  height: 5430px;
  position: relative;
}
.wrapper{
  display: none;
}
a{
    font-size: 20px;
    color: aliceblue;
    text-decoration: none; 
    font-weight: 550;
}
.navbar{
  background-color: rgba(219, 255, 249, 0);
  border-radius: 3px;
  position: absolute;
  z-index: 35;
  font-family: "Share Tech Mono", monospace;
  transition: 1s;
}
nav{
  width: 100%;
  position: relative;
  background-color: #32323200;
}

.menu {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 99%;
  margin: 0 auto;
  padding-top: 10px;
  height: 10vh;
  list-style: none;
  position: relative;


  #img{
    animation: none;
    background: none;
  }
  img{
    width: 65px;
    height: 65px;
    border-radius: 15px;
    transition: 0.5s;
  }img:hover{
    transform: scale(1.3);
  }
}


.menu li {
  width: 125px;
  height: 50px;
  transition: background-position-x 0.9s linear;
  text-align: center;
}
.menu li a {
  font-size: 22px;
  color: #e3e8ff;
  text-decoration: none;
  transition: all 0.45s;
}
.menu li:hover {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
  -webkit-animation: line 1s;
  animation: line 1s;
}
.menu li:hover a {
  color: #00eeff;
}
.menu li:not(:last-child) {
  margin-right: 30px;
}

@-webkit-keyframes line {
  0% {
    background-position-x: 390px;
  }
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }
}

.secciones{
  position: relative;
  overflow: hidden;
  background-color: #00000000;
  min-height: 500px;
  border-radius: 20px;
  height: auto;
  border: solid 1px rgb(20, 17, 70);  
}
.uno{
    height: 500px;
    top: 100px;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70);  

  .divo{
    position: absolute;
    width: 100%;
    height: 100%;
    .background1{
      position: relative;
      width:98%;
      height: 100%;
      border: rgba(255, 255, 0, 0) solid;
      #cool{
        position: absolute;
        width: 120%;
        min-width: 500px;
        height: 200%;
        top: -150px;
    }
    }
  }
   
    .paraELBackground{
        height: 500px;
        position: relative;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        z-index: 1;
        
        .background{
            width: 50%;
            height: 50%;
            border: solid 3px rgba(56, 114, 239, 0.815);
            border-bottom: rgb(30, 36, 49) 3px solid;
            position: absolute;
            transition: 1s;
            h1{
              font-family: "Nunito Sans", sans-serif;
              font-family: 750;
              color: #d4e2ff;
              text-shadow: 1.5px 0.5px 4px blueviolet;
            }
            h3{
            position: relative;
            top: 50%;
            left: 55%;
            text-shadow: 1px 0px 2px rgb(133, 131, 131);
            color: #120d14;  
            }
        }

        .text{
            width: 50%;
            height: 50%;
            position: absolute;
            border: solid 3px rgb(30, 36, 49);
            border-top:rgba(56, 114, 239, 0.815) 3px solid;
            background-color: #74727200;
            left:49.8%;
            color: #bfb4f8;
            font-weight: 400;
            font-size: 20px;
            text-align: end;
            top: 50%;
            transition: 1s;   
        }
        .text:hover{
          background-color: #1313134e;

        }
        
    }
}
.boxes {
  --size: 32px;
  --duration: 800ms;
  height: calc(var(--size) * 2);
  width: calc(var(--size) * 3);
  position: relative;
  left: 30%;
  top: 70%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  margin-top: calc(var(--size) * 1.5 * -1);
  -webkit-transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
          transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}

.boxes .box {
  width: var(--size);
  height: var(--size);
  top: 0;
  left: 0;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.boxes .box:nth-child(1) {
  -webkit-transform: translate(100%, 0);
      -ms-transform: translate(100%, 0);
          transform: translate(100%, 0);
  -webkit-animation: box1 var(--duration) linear infinite;
  animation: box1 var(--duration) linear infinite;
}

.boxes .box:nth-child(2) {
  -webkit-transform: translate(0, 100%);
      -ms-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-animation: box2 var(--duration) linear infinite;
  animation: box2 var(--duration) linear infinite;
}

.boxes .box:nth-child(3) {
  -webkit-transform: translate(100%, 100%);
      -ms-transform: translate(100%, 100%);
          transform: translate(100%, 100%);
  -webkit-animation: box3 var(--duration) linear infinite;
  animation: box3 var(--duration) linear infinite;
}

.boxes .box:nth-child(4) {
  -webkit-transform: translate(200%, 0);
      -ms-transform: translate(200%, 0);
          transform: translate(200%, 0);
  -webkit-animation: box4 var(--duration) linear infinite;
  animation: box4 var(--duration) linear infinite;
}

.boxes .box > div {
  --background: #3567d4;
  --top: auto;
  --right: auto;
  --bottom: auto;
  --left: auto;
  --translateZ: calc(var(--size) / 2);
  --rotateY: 0deg;
  --rotateX: 0deg;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background);
  top: var(--top);
  right: var(--right);
  bottom: var(--bottom);
  left: var(--left);
  -webkit-transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
          transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
}

.boxes .box > div:nth-child(1) {
  --top: 0;
  --left: 0;
}

.boxes .box > div:nth-child(2) {
  --background: #0045db;
  --right: 0;
  --rotateY: 90deg;
}

.boxes .box > div:nth-child(3) {
  --background: #44ecf5;
  --rotateX: -90deg;
}

.boxes .box > div:nth-child(4) {
  --background: #5d75a7b1;
  --top: 0;
  --left: 0;
  --translateZ: calc(var(--size) * 3 * -1);
}

@-webkit-keyframes box1 {
  0%, 50% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }

  100% {
    -webkit-transform: translate(200%, 0);
            transform: translate(200%, 0);
  }
}
@keyframes box1 {
  0%, 50% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  100% {
    -webkit-transform: translate(200%, 0);
    transform: translate(200%, 0);
  }
}

@-webkit-keyframes box2 {
  0% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }

  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}
@keyframes box2 {
  0% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }

  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

@-webkit-keyframes box3 {
  0%, 50% {
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
  }

  100% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}
@keyframes box3 {
  0%, 50% {
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
  }

  100% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}

@-webkit-keyframes box4 {
  0% {
    -webkit-transform: translate(200%, 0);
    transform: translate(200%, 0);
  }

  50% {
    -webkit-transform: translate(200%, 100%);
    transform: translate(200%, 100%);
  }

  100% {
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
  }
}
@keyframes box4 {
  0% {
    -webkit-transform: translate(200%, 0);
    transform: translate(200%, 0);
  }

  50% {
    -webkit-transform: translate(200%, 100%);
    transform: translate(200%, 100%);
  }

  100% {
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
  }
}



.dos{
    top: 250px;
    background-color: rgb(0, 0, 0);
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70);  
    color: #b0e6ea;
    
  .divo{
    position: absolute;
    width: 100%;
    height: 100%;
    .background1{
      position: relative;
      width:98%;
      height: 100%;
      border: rgba(255, 255, 0, 0) solid;
      #cool{
        position: absolute;
        width: 120%;
        min-width: 500px;
        height: 200%;
        top: -150px;
    }
    }
  }
  
   
    .paraELBackground{
        width: 100%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;

        .content{
            width: 90%;
            height: 80px;
            font-size: 20px;
            font-weight: 600;
        }
        .content:hover{
            color: #ffffff;
        }
    }
    .paraElTexto{
        width: 100%;
        height: 80%;
        border: solid 1px rgb(22, 4, 96);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;

        .content{
            width: 90%;
            height: 350px;
            min-height: 250px;
            
            font-size: 20px;
            font-weight: 600;
            transform: scale(0.4);
            transition: 0.9s;

        }
        .content:hover{
            transform: none;
        }
    }
}

.tres{
    top: 550px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70);  
    .divo{
      position: absolute;
      width: 100%;
      height: 100%;
      .background1{
        position: relative;
        width:98%;
        height: 100%;
        border: rgba(255, 255, 0, 0) solid;
        #cool{
          position: absolute;
          width: 120%;
          min-width: 500px;
          height: 200%;
          top: -150px;
      }
      }
    }
    
    .paraELBackground{
      /* width: 100%; */
      position: relative;
      p{
        width: 80%;
        margin: auto;
        text-indent: 30px;
      }
    }
    .back{
    width: 200px;
    height: 200px;
    position: relative;
    margin: auto;
    }
    .paraElTexto{
        position: relative;
        h3{
          margin-top: 75px;
        }
        p{
          width: 80%;
          margin: 30px auto;
          text-indent: 35px;
        }
        figure{
          margin: auto;
          width: 45%;
          height: 150px;
          position: relative;
          img{
            width: 100%;
            height: 100%;
          border-radius: 10px;

          }
        }
    }

   
}
.cube-loader {
  position: relative;
  width: 35px;
  height: 35px;
  left: 10%;
  top: 10%;
  font-size: 9px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.cube-loader .cube-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0; */
  transform-style: preserve-3d;
}

.cube-loader .cube-wrapper .cube-span {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);
  background: linear-gradient(
    to bottom,
    hsl(330, 3.13%, 25.1%) 0%,
    hsl(177.27, 21.71%, 32.06%) 5.5%,
    hsl(176.67, 34.1%, 36.88%) 12.1%,
    hsl(176.61, 42.28%, 40.7%) 19.6%,
    hsl(176.63, 48.32%, 43.88%) 27.9%,
    hsl(176.66, 53.07%, 46.58%) 36.6%,
    hsl(176.7, 56.94%, 48.91%) 45.6%,
    hsl(176.74, 62.39%, 50.91%) 54.6%,
    hsl(176.77, 69.86%, 52.62%) 63.4%,
    hsl(176.8, 76.78%, 54.08%) 71.7%,
    hsl(176.83, 83.02%, 55.29%) 79.4%,
    hsl(176.85, 88.44%, 56.28%) 86.2%,
    hsl(176.86, 92.9%, 57.04%) 91.9%,
    hsl(176.88, 96.24%, 57.59%) 96.3%,
    hsl(176.88, 98.34%, 57.93%) 99%,
    hsl(176.89, 99.07%, 58.04%) 100%
  );
}

.cube-top {
  position: absolute;
  width: 35px;
  height: 35px;
  background: hsl(330, 3.13%, 25.1%) 0%;
  /* width 75px / 2 = 37.5px */
  transform: rotateX(90deg) translateZ(37.5px);
  transform-style: preserve-3d;
}

.cube-top::before {
  content: '';
  position: absolute;
/* u can choose any size */
  width: 35px;
  height: 35px;
  background: hsl(176.61, 42.28%, 40.7%) 19.6%;
  transform: translateZ(-90px);
  filter: blur(10px);
  box-shadow: 0 0 10px #323232,
  0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,
  0 0 30px #323232,
  0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;
}


/* 4 */
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  
  .container .glass {
    position: relative;
    width: 180px;
    height: 200px;
    background: linear-gradient(#fff2, transparent);
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    border-radius: 10px;
    margin: 0 -45px;
    backdrop-filter: blur(10px);
    transform: rotate(calc(var(--r) * 1deg));
  }
  
  .container:hover .glass {
    transform: rotate(0deg);
    margin: 0 10px;
  }
  
  .container .glass::before {
    content: attr(data-text);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .container .glass svg {
    font-size: 2.5em;
    fill: #fff;
  }
  
.cuatro{
    top: 700px;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70); 

    .divo{
      position: absolute;
      width: 100%;
      height: 100%;
      .background1{
        position: relative;
        width:98%;
        height: 100%;
        border: rgba(255, 255, 0, 0) solid;
        #cool{
          position: absolute;
          width: 120%;
          min-width: 500px;
          height: 200%;
          top: -150px;
      }
      }
    }
    .paraELBackground{
        z-index: 10;
        width: 90%;
        max-width: 100%;
        height: 90vh;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
/* cinco */
.cinco{
    top: 850px;
    bottom: 10rem;
    margin-bottom: 3em;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70); 
    .divo{
      position: absolute;
      width: 100%;
      height: 100%;
      min-width: 800px;
      .background1{
        position: relative;
        width:98%;
        height: 100%;
        border: rgba(255, 255, 0, 0) solid;
        #cool{
          position: absolute;
          width: 120%;
          min-width: 500px;
          height: 200%;
          top: -150px;
      }
      }
    }
    .text{
        width: 70%;
        height: auto;
        margin: auto;
        position: inherit;
        top: 7rem;
    }
}

    /* seis */
.seis{
    top: 950px;
    background-color: #230232;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70); 
    .divo{
      position: absolute;
      width: 100%;
      height: 100%;
      .background1{
        position: relative;
        width:98%;
        height: 100%;
        border: rgba(255, 255, 0, 0) solid;
        #cool{
          position: absolute;
          width: 120%;
          min-width: 500px;
          height: 200%;
          top: -150px;
      }
      }
    }

    .div{
        width: 600px;
        max-width: 100%;
        min-height: 350px;
        height: auto;
        position: relative;
        margin: auto;
        display: grid;
        grid-template-columns: auto;
        justify-content: center;
    }
    .div2{
      width: 600px;
      max-width: 100%;
      min-height: 350px;
      height: auto;
      position: relative;
      margin: auto;
      display: grid;
      grid-template-columns: auto;
      justify-content: center;
     }  
  .div1{
    width: 600px;
    max-width: 100%;
    min-height: 350px;
    height: auto;
    position: relative;
    margin: auto;
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
  }
    
}
.absolute {
    position: absolute;
  }
  /*  */
  .svg-frame {
    position: relative;
    margin-top: -40px;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .svg-frame svg {
    position: absolute;
    transition: .5s;
    z-index: calc(1 - (0.2 * var(--j)));
    transform-origin: center;
    width: 344px;
    height: 344px;
    fill: none;
  }
  
  .svg-frame:hover svg {
    transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
  }
  
  .svg-frame svg #center {
    transition: .5s;
    transform-origin: center;
  }
  
  .svg-frame:hover svg #center {
    transform: rotate(-30deg) translateX(45px) translateY(-3px);
  }
  
  #out2 {
    animation: rotate16 7s ease-in-out infinite alternate;
    transform-origin: center;
  }
  
  #out3 {
    animation: rotate16 3s ease-in-out infinite alternate;
    transform-origin: center;
    stroke: #ff0;
  }
  
  #inner3,
  #inner1 {
    animation: rotate16 4s ease-in-out infinite alternate;
    transform-origin: center;
  }
  
  #center1 {
    fill: #ff0;
    animation: rotate16 2s ease-in-out infinite alternate;
    transform-origin: center;
  }
  
  @keyframes rotate16 {
    to {
      transform: rotate(360deg);
    }
  }
  /*  */
  .inline-block {
    display: inline-block;
  }
  
  .loader {
    width: 300px;
    height: 150px;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: center;
    margin: 0.25em 0;
  }  
  .w-2 {
    width: 0.5em;
  }
  .dash {
    animation: dashArray 4s ease-in-out infinite,
      dashOffset 3s linear infinite;
  }
  .dash:hover, .spin:hover{
    animation: none;
  }
  .spin {
    animation: spinDashArray 3s ease-in-out infinite,
      spin 8s ease-in-out infinite,
      dashOffset 4s linear infinite;
    transform-origin: center;
  }
  
  @keyframes dashArray {
    0% {
      stroke-dasharray: 0 1 359 0;
    }
  
    50% {
      stroke-dasharray: 0 359 1 0;
    }
  
    100% {
      stroke-dasharray: 359 1 0 0;
    }
  }
  
  @keyframes spinDashArray {
    0% {
      stroke-dasharray: 270 90;
    }
  
    50% {
      stroke-dasharray: 0 360;
    }
  
    100% {
      stroke-dasharray: 270 90;
    }
  }
  
  @keyframes dashOffset {
    0% {
      stroke-dashoffset: 365;
    }
  
    100% {
      stroke-dashoffset: 5;
    }
  }
  
  @keyframes spin {
    0% {
      rotate: 0deg;
    }
  
    12.5%,
    25% {
      rotate: 270deg;
    }
  
    37.5%,
    50% {
      rotate: 540deg;
    }
  
    62.5%,
    75% {
      rotate: 810deg;
    }
  
    87.5%,
    100% {
      rotate: 1080deg;
    }
  }
  
  .siete{
    top: 1100px;
    min-height: 450px;
    position: relative;
    overflow: hidden;
    background-color: #00000000;
    min-height: 500px;
    border-radius: 20px;
    height: auto;
    border: solid 1px rgb(20, 17, 70); 
    .divo{
      position: absolute;
      width: 100%;
      height: 100%;
      .background1{
        position: relative;
        width:98%;
        height: 100%;
        border: rgba(255, 255, 0, 0) solid;
        #cool{
          position: absolute;
          width: 120%;
          min-width: 500px;
          height: 200%;
          top: -150px;
      }
      }
    }

    .divContainer{
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .minD__4{
      opacity: 10%;
    }
    .minD{
        display: flex;
        align-items: center;
        justify-content: start;   
        gap: 8px;
        border: solid rgb(82, 82, 255);
        border-top: solid transparent;
        border-left: solid transparent;
        border-right: solid transparent;
        width: 45%;
        padding: 5px;
        
        div{
            width: 130px;
            height: 120px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            figure{
              width: 130px;
              height: 120px;
              overflow: hidden;
              border-radius: 10px;
              img{
                width: 100%;
                height: 100%;
              }
            }
        }
      
        .modalButton{
          width: 120px;
          height: 50px;
          position: relative;
          top: 35px;
          color: white;
          text-decoration: none;
          font-size: 25px;
          border: none;
          background: none;
          font-weight: 600;
          font-family: 'Poppins', sans-serif;
        }
        
        .modalButton::before {
          margin-left: auto;
        }
        
        .modalButton::after, button::before {
          content: '';
          width: 0%;
          height: 2px;
          background: #00a2ff;
          display: block;
          transition: 0.5s;
        }
        
        .modalButton:hover::after, button:hover::before {
          width: 100%;
        }
    }

  }


@keyframes colores{
    0%{
        color:rgb(219, 214, 255)
    }50%{
        color:rgb(54, 54, 95)
    }100%{
        color: rgb(202, 157, 240);
    }
}

@media screen and (max-width:  900px) {
  .btn-nav{
    display: block;
  }
    .navbar{
      background-color: rgba(0, 0, 0, 0.384);
      border-radius: 3px;
      top: -110vh;
    }
    .menu {
      background-color: #323232a1;
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 95%;
      margin: 0 auto;
      height: 100vh;
      list-style: none;
      align-items: center;
    }
    .menu li:hover a {
      color: #ffffff;
    }
    .secciones{
        min-height: 400px;
        height: auto;
        display: block;
    
        .paraELBackground{
            height: 450px;
            position: relative;
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: auto;
            
            .background{
                width: 100%;
                height: 50%;
                transition: 1s;

            }
            .text, .paraElTexto{
                width: 100%;
                height: 50%;
                left: 0%;
                top: 50%;
                transition: 1s;
            }
        }
        .paraElTexto{
            height: 450px;
            position: relative;
        }

    }
    .uno{
        top: 100px;
        .paraELBackground{
          .background{
            h3{
              height: 3px;
              margin-top: 00%;
              }
          }
          .text{
            font-size: 15px;
          }
        }
       
    }
    .boxes{
      display: none;
    }

    .dos{
      .paraELBackground{
        font-size: 15px;
        position: relative;
        .content{
          padding-top: 20%;
          position: absolute;
          width: 98%;
          height: 98%;
          border: solid rgba(255, 0, 0, 0);
          text-align: center;
          text-overflow: ellipsis;
        }
      }
      .paraElTexto{
        font-size: 15px;
        position: relative;
        .content{
          padding-top: 20%;
          position: absolute;
          width: 98%;
          height: 98%;
          border: solid rgba(0, 255, 42, 0);
          text-align: center;
          text-overflow: ellipsis;
        }
      }
    }
    .cuatro{
        height: 950px;
    }
    .container {
        margin-top: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        z-index: 10;
      }
    .container .glass{
      margin: 20px 20px;
      z-index: 10;
    }

    /* cinco */
    .cinco{
    top: 850px;
    height: auto;
    padding-bottom: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .divo{
      .background1{
        #cool{
          top: 50px;
        }
      }
    }
    .text{
      width: 95%;
      text-align: center;
      text-overflow: ellipsis;
    }
  }
    .seis{
      top: 950px;
      padding: 0px 10px;
      height: auto;  
      .div2{
          min-height: 450px;
          margin: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          position: relative;

           div{
            margin: auto;
            display: grid;
            grid-template-columns: auto;
            position: absolute;
          }
      }  
      .div1{
        
          min-height: 400px;
          margin: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
           div{
            margin: auto;
            display: grid;
            grid-template-columns: auto auto auto auto;
          } 

      
      }
      
        
  }
  .projectU-footer{
    position: relative;
    top: 300px;
    left: 55%;
  }
 
}
@media screen and (max-width: 700px) {
  .modalButton{
    display: none;
  }
  .textoo{
    display:none
  }
  .siete{
    .minD{
      border: solid rgba(75, 64, 177, 0.539);
      border-top: solid transparent;
      border-left: solid transparent;
      border-right: solid transparent;
    }
  }
}