/* RESPONSIVE MOBILE */

@media (max-width: 321px) {

  body{
    scroll-behavior: smooth;
    color: #fff !important;
    background-color: #050505 !important;
  }

    .scroll-container{
      padding: 0px;
    }
  
    /* NAVBAR */
  
    #inice {
      display: none;
    }
  
    .container-hero{
      margin: 0;
      gap: 40px;
      display: flex;
      justify-content: center;
    }
  
    .hero{
      height: 80vh;
    }
  
    .container-image-hero{
      display: none;
    }
  
    .container-subtitle-hero{
      display: flex;
      justify-content: center;
    }
  
    .subtitle-hero{
      font-size: 30px;
    }
  
    .container-title-hero{
      display: flex;
      justify-content: center;
    }
  
    .title-hero{
      font-size: 55px;
      align-items: center;
      text-align: center;
    }
  
    .container-paragraph-hero{
      display: flex;
      justify-content: center;
    }
  
    .paragraph-hero{
      font-size: 15px;
      text-align: center;
    }
  
    .container-button-hero{
      display: flex;
      justify-content: center;
      padding: 0px;
    }
  
    .blob-btn{
      padding: 20px;
    }
  
  
    .container-image-information{
      display: none;
    }
  
    .container-information{
      display: flex;
      padding: 0px 10px 100px 10px;
    }
  
    .container-information-information{
      padding: 0px;
    }
    
  
    .container-title-information{
      display: flex;
      justify-content: center;
      text-align: center;
    }
  
    .title-information{
      font-size: 40px;
    }
  
  
    .container-paragraph-information{
      display: flex;
      justify-content: center;
    }
  
    .paragraph-information{
      font-size: 18px;
    }
  
  
    .container-benefices{
      display: flex;
      gap: 70px;
      padding: 0px 20px;
    }
  
    .container-paragraph-benefices{
      margin: 0px;
      padding-top: 20px;
    }
  
    .paragraph-benefices{
      font-size: 25px;
    }
  
    .container-elements-benefices{
      display: flex;
      flex-direction: column;
      gap: 70px;
      padding: 0px 20px;
  
    }
  
    .benefices {
      gap: 30px;
      width: 250px;
    }
  
  
  
    .container-elements-benefices h3 {
      font-size: 35px;
    }
  
    .container-elements-benefices p {
      font-size: 20px;
      padding: 0px 10px;
    }
  
    .container-time-benefices p {
    }

    /* SERVICES */

    .container-services-mobile{
      display: block;
    }
  
    .container-services{
      display: none;
    }
    
  
    .carousel-item.active{
      align-items: center;
      text-align: center;
    }

    .container-services-mobile{
      display: block;
    }
  
    .container-services{
      display: none;
    }

    .container-title-services-mobile{
      padding: 60px 0px;
    }

    .title-services-mobile{
      font-size: 45px;
      text-align: center;
      background: linear-gradient(19deg, #21D4FD 20%, #64228b 59%, #9a9a9a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    

    .title-pack-mobile h3{
      text-align: center;
      font-size: 26px !important;
      background: linear-gradient(19deg, #21D4FD 20%, #B721FF 59%, #9a9a9a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 30px;
    }
    
    .information-pack{
      text-align: center;
      font-size: 20px;
    }
    
    .pack-mobile {
      background-color: rgb(10, 10, 10);
      border-radius: 30px;
      padding: 20px;
      box-shadow: 1px 3px 3px 1px #0000004c;
      text-align: center;
      margin: 0px 50px;
    }
    

    /* ABOUT US */

    .container-about-us {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 15zpx;
      padding: 30px 0px;
    }

    .container-about-us p {
      margin: 0px;
    }

    .container-packs{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 100px;
      padding-top: 60px;
    }
    
    .pack{

      min-width: 100px;
      max-width: 200px;
      background-color: rgb(10, 10, 10);
      border-radius:  20px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-shadow: 1px 3px 3px 1px #0000004c;        
    }

    .container-recomended{
      padding-top: 5px;
      position: relative;
      bottom: 30px;
      left: 40px;
      text-align: center;
      background-color: #ffff;
      border-radius: 50px;
      width: 120px;
      height: 30px;
      color: #030303;
      font-weight: 700;
    }
    
    
    .pack-2{
      transform: scale(1); /* Escala el contenedor al 110% del tamaño original */
    }
    
    .title-pack{
      text-align: center;
      font-size: 30px;
      background: linear-gradient(19deg, #21D4FD 20%, #B721FF 59%, #9a9a9a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 30px;
    }
    
    .information-pack{
      text-align: center;
      font-size: 20px;
    }
    
    .extra-pack{
      padding-top: 20px;
      text-align: center;
      font-size: 16px;
      color: #C281E1;
      text-shadow: 0 0 7px #fff, 0 0  ;
    }
    .container-contact{
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
    }

    .container-title-contact{

    }

    .title-contact{
        font-size: 40px;
 
    }


    .open-menu{
      display: block;
      width: 40px;
    }
    
    .navbar-logo{
      margin-left: 0px;
  }

    .navbar-logo img{
      width: 60px;
      margin: 0px;
    }

    .navbar{
      display: flex;
      justify-content:space-around;
      align-items: center;
      position:initial;
      z-index: 2;
      width: 100%;
    }

    .nav{
      opacity: 0;
      visibility: hidden;
    }

    .nav{
      display: flex;
      flex-direction: column;
      position: absolute;
      flex-wrap: nowrap;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: #050505;
      width: 100%;
      z-index: 1000;
    }
    
    .nav.visible{
      opacity: 1;
      visibility: visible;
    }
.nav ul {
      display: flex;
      margin-top: 50px;
      flex-direction: column;
      height: 100%;
      gap: 70px;
    }

    .nav ul li {
      justify-content: center;
      text-align: center;
      align-items: center;
      margin: 0px;
    }

    .nav ul li a {
      font-size: 20px;
      align-items: center;
      text-align: center;
    }

    .nav.visible ~ body {
      overflow: hidden;
    }

    .nav ul {
      display: flex;
      margin-top: 50px;
      flex-direction: column;
      height: 100%;
      gap: 70px;
    }

    .nav ul li {
      justify-content: center;
      text-align: center;
      align-items: center;
      margin: 0px;
    }

    .nav ul li a {
      font-size: 20px;
      align-items: center;
      text-align: center;
    }

    .nav.visible ~ body {
      overflow: hidden;
    }

    .nav.visible ~ body {
      overflow: hidden;
    }

    .close-menu{
      display: block;
    }

    body.menu-open {
      overflow: hidden;
    }

    .container-close-menu{
      margin: 20px auto;
    }

    .close-menu{
      background-color: transparent;
      border: none;
      color: #ffff;
    }

    .bi-x{
      font-size: 40px;
    }

    .open-menu{
      background-color: transparent;
      border: none;
      color: #fff;
    }

    .bi-list{
      font-size: 40px;
    }

    /* FOOTER */

      /* FOOTER */

.container-footer{
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 50px;
}

.container-about{
  width: 100%;

}

.container-about h6{
  padding-bottom: 10px;
}

.container-copyright-footer{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.container-contact-footer{

}

.container-contact-footer h6{
  padding-bottom: 10px;
}

.container-quicklinks-footer{

}

.container-quicklinks-footer h6{
  padding-bottom: 10px;
}

.site-footer
{
  background-color:#090909e9;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}

.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left:0;
  list-style:none;
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373;
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0;
  text-align: center;
}

.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}

  }
}