@charset "UTF-8";
/*------------------------------------*\
  #Fonts
\*------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100;200;300;400;500;600;700;800;900&display=swap");
/*------------------------------------*\
  #Colors
\*------------------------------------*/
/*------------------------------------*\
  #Elements
\*------------------------------------*/
body,
html {
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  padding: 1rem;
}
main section {
  max-width: 1300px;
}

@media (min-width: 751px) and (max-width: 1024px) {
  main {
    width: 100%;
  }
  main section {
    max-width: 800px;
  }
}
@media (min-width: 601px) and (max-width: 750px) {
  main {
    width: 100%;
  }
  main section {
    max-width: 600px;
  }
}
@media (max-width: 600px) {
  main {
    width: 100%;
    padding: 0.5rem;
  }
  main section {
    max-width: 400px;
  }
}
/*------------------------------------*\
  #User Experience
\*------------------------------------*/
/* Ocultar barras de desplazamiento en ejes X - Y */
body,
html {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE y Edge */
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari y Opera */
}

/*------------------------------------*\
    #NavBar
\*------------------------------------*/
nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background-color: transparent;
  position: fixed;
  width: 100%;
  z-index: 1000;
  padding: 0px 5px;
  margin-top: 0;
}
nav .nav_brand {
  margin-left: 1rem;
}
nav .nav_brand a {
  display: inline-block;
}
nav .nav_brand a img {
  width: 100px;
  height: 30px;
  max-width: 100%;
  display: block;
  margin-top: 10px;
}
nav .nav_links {
  margin-left: auto;
  display: flex;
  gap: 2.5rem;
  margin-right: 3.125rem;
  list-style: none;
  align-items: center;
}
nav .nav_links a {
  color: #9F9F9F;
  font-size: 18px;
}
nav .nav_links a:hover {
  color: #FFFFFC;
  font-weight: 600;
}
nav .nav_links a img {
  width: 30px;
  height: auto;
}
nav .menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
  margin-right: 1.5rem;
  z-index: 1100;
}
nav .menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: #9F9F9F;
  margin: 4px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}
nav .menu-toggle.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
nav .menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
}
nav .menu-toggle.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

body.scrolled nav {
  background-color: rgba(255, 255, 252, 0.2);
  transition: background-color 0.3s ease;
}

/*------------------------------------*\
    #Social Bar styles
\*------------------------------------*/
.socialBar {
  position: fixed;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  border-radius: 1.25rem;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem;
}
.socialBar .socialBar_red {
  padding: 0.625rem;
  transition: all 0.3s ease;
}
.socialBar .socialBar_red img {
  width: 1.25rem;
  height: 1.25rem;
  transition: filter 0.3s ease;
}
.socialBar .socialBar_red:hover img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(40%) saturate(500%) hue-rotate(110deg) brightness(90%) contrast(100%);
}

/*------------------------------------*\
    #Modal styles
\*------------------------------------*/
.pdfModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 50px;
  box-sizing: border-box;
  z-index: 9999;
  overflow-y: auto;
}
.pdfModal .pdfdiv {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.pdfModal .pdfdiv iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.pdfModal .pdfdiv .pdfclose {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 14px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s ease;
}
.pdfModal .pdfdiv .pdfclose:hover {
  background: #000;
  transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 768px) {
  .pdfModal {
    padding: 20px;
  }
  .pdfModal .pdfdiv {
    border-radius: 8px;
  }
  .pdfModal .pdfclose {
    top: 8px !important;
    right: 8px !important;
  }
}
/*------------------------------------*\
    #Caption Text styles
\*------------------------------------*/
.caption_text {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0, 158, 102, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.caption_text h3 {
  position: absolute;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  padding: 0 1rem;
}
.caption_text h3.active {
  opacity: 1;
  transform: translateY(0);
}
.caption_text h3.exit {
  opacity: 0;
  transform: translateY(-50px);
}

/*------------------------------------*\
    # Title_shadow
\*------------------------------------*/
.title_shadow {
  color: #009E66;
  font-size: 1.5rem;
  font-weight: 700;
}
.title_shadow span {
  color: #F9F9F9;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
  font-size: 4rem;
  position: absolute;
  z-index: -1;
  opacity: 0.1;
}

/*------------------------------------*\
    #3D Carrousel
\*------------------------------------*/
.carrousel_3d {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 120px;
}
.carrousel_3d .carrousel_3d_item {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 80px;
  padding: 10px;
  border-radius: 10px;
  background-color: #0F0F0F;
  border-bottom: 4px solid rgba(255, 255, 255, 0.25);
  border-right: 4px solid rgba(255, 255, 255, 0.25);
  box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.25);
  transition: all 0.8s ease;
}
.carrousel_3d .carrousel_3d_item img {
  border-radius: 50px;
  width: 70px;
  height: 70px;
  margin-right: 20px;
}
.carrousel_3d .carrousel_3d_item a {
  font-family: "Lexend Giga";
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  font-size: 20px;
}
.carrousel_3d .carrousel_3d_item.center {
  transform: scale(1);
  opacity: 1;
  z-index: 3;
}
.carrousel_3d .carrousel_3d_item.left, .carrousel_3d .carrousel_3d_item.right {
  transform: scale(0.6);
  opacity: 0.2;
  z-index: 1;
}

/*------------------------------------*\
    #FAQ Section
\*------------------------------------*/
.FAQ {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.FAQ .FAQ_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
}
.FAQ .FAQ_title h2 {
  font-family: "Baloo 2", cursive;
  font-size: 2.5rem;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
}
.FAQ .FAQ_title p {
  font-family: "Work Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  color: #C4C4C4;
  margin: 0;
  text-align: center;
}
.FAQ .FAQ_item {
  margin-bottom: 1.25rem;
  padding: 0 1rem;
  text-align: justify;
}
.FAQ .FAQ_item h3 {
  font-family: "Baloo 2", cursive;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}
.FAQ .FAQ_item p {
  font-family: "Work Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: bold;
  color: #C4C4C4;
  margin: 0;
}

/*------------------------------------*\
    #MAIN FAQ 
\*------------------------------------*/
.MAIN_FAQ {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  text-align: justify;
  max-width: 1300px;
  border-radius: 40px;
  padding: 40px;
  background: linear-gradient(to top right, rgba(0, 158, 102, 0.6) 0%, rgb(18, 18, 18) 30%);
}
.MAIN_FAQ h2 {
  font-size: 40px;
  font-weight: bold;
}
.MAIN_FAQ .FAQ_LIST {
  display: flex;
  flex-direction: column;
  margin: 0px 50px;
}
.MAIN_FAQ .FAQ_LIST h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0;
}
.MAIN_FAQ .FAQ_LIST p {
  font-size: 14px;
  font-weight: 300;
  margin-top: 12px;
  margin-bottom: 20px;
}
.MAIN_FAQ .FAQ_LIST span {
  color: #37BF32;
  font-weight: bold;
}

/*------------------------------------*\
    #Footer MLA
\*------------------------------------*/
.MLA_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #009E66;
}
.MLA_footer h2 {
  color: #FFFFFF;
  font-family: "Lexend Giga";
  font-weight: bold;
  font-size: 40px;
  text-align: center;
}
.MLA_footer .footer_contact {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-self: center;
}
.MLA_footer .footer_contact .footer_contact_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.MLA_footer .footer_contact .footer_contact_item img {
  width: 80px;
  height: 80px;
}
.MLA_footer .footer_contact .footer_contact_item h3 {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 0;
}
.MLA_footer .footer_contact .footer_contact_item a {
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 24px;
  margin-top: 0;
}

/*------------------------------------*\
    #Copyright Section
\*------------------------------------*/
.copyright {
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: #C4C4C4;
  margin-top: 2rem;
  margin-bottom: 0;
  text-align: center;
}
.copyright a {
  color: #009E66;
  -webkit-text-emphasis: none;
          text-emphasis: none;
  text-decoration: none;
}

/*------------------------------------*\
  #Featured Project
\*------------------------------------*/
.featured_project {
  max-width: 1300px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 6rem;
  /* Imagen */
  /* Contenido */
}
.featured_project__media {
  grid-column: 1/8;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}
.featured_project__media img {
  width: 90%;
  height: 90%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s ease;
}
.featured_project__media:hover img {
  filter: brightness(1);
}
.featured_project__content {
  grid-column: 7/-1;
  text-align: right;
  z-index: 2;
}
.featured_project__label {
  display: block;
  font-size: 0.85rem;
  color: #64ffda;
  margin-bottom: 0.4rem;
  font-family: monospace;
}
.featured_project__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ccd6f6;
}
.featured_project__description {
  background-color: #1e1e1e;
  padding: 1.5rem;
  border-radius: 10px;
  color: #F9F9F9;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  margin-bottom: 1rem;
}
.featured_project__techs {
  font-family: "Poppins", sans-serif;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.featured_project__techs li {
  font-size: 0.8rem;
  color: #009E66;
}
.featured_project__links {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.featured_project__links a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured_project__links a img {
  width: 20px;
  height: 20px;
  filter: grayscale(100%) brightness(200%);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.featured_project__links a:hover img {
  filter: none;
  transform: translateY(-3px);
}

/*------------------------------------*\
    #Responsive Section
\*------------------------------------*/
@media (min-width: 601px) and (max-width: 750px) {
  /* nav {
      justify-content: space-between;
      padding: 0.75rem 1rem;

      .nav_links {
          position: fixed;
          top: 0;
          right: -100%;
          height: 100vh;
          width: 65%;
          background-color: transparent;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 2rem;
          transition: right 0.3s ease;
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

          a {
              color: variables.$gray_005;
              font-size: 1.1rem;
              font-weight: 500;
          }

          &.active {
              right: 0;
          }
      }

      .menu-toggle {
          display: flex;
      }
  } */
  .title_shadow {
    font-size: 1rem;
  }
  .title_shadow span {
    font-size: 2rem;
    left: 150px;
  }
  .MAIN_FAQ {
    display: flex;
    flex-direction: column;
    padding: 30px;
    width: 90%;
  }
  .MAIN_FAQ h2 {
    text-align: center;
  }
  .MAIN_FAQ .FAQ_LIST {
    margin: 0;
  }
  .FAQ {
    width: 80%;
  }
  .FAQ .FAQ_title {
    margin-bottom: 1.5rem;
  }
  .FAQ .FAQ_title h2 {
    font-size: 40px;
  }
  .FAQ .FAQ_title p {
    font-size: 16px;
  }
  .FAQ .FAQ_item {
    margin-bottom: 1rem;
  }
  .FAQ .FAQ_item h3 {
    font-size: 20px;
  }
  .FAQ .FAQ_item p {
    font-size: 16px;
  }
  .MLA_footer h2 {
    font-size: 30px;
  }
  .MLA_footer .footer_contact {
    flex-direction: row;
  }
  .MLA_footer .footer_contact .footer_contact_item img {
    width: 60px;
    height: 60px;
  }
  .MLA_footer .footer_contact .footer_contact_item h3 {
    font-size: 24px;
  }
  .MLA_footer .footer_contact .footer_contact_item a {
    font-size: 20px;
  }
  .copyright {
    width: 80%;
    font-size: 16px;
    margin-top: 1rem;
    text-align: center;
  }
  .copyright a {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  nav {
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }
  nav .nav_brand img {
    width: 40px;
    height: 40px;
  }
  nav .menu-toggle {
    display: flex;
  }
  nav .nav_links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 80%;
    background-color: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
  }
  nav .nav_links a {
    color: #9F9F9F;
    font-size: 1.2rem;
    font-weight: 500;
  }
  nav .nav_links.active {
    right: 0;
  }
  .caption_text h3 {
    font-size: 14px;
  }
  .carrousel_3d {
    height: 140px;
  }
  .carrousel_3d .carrousel_3d_item {
    width: 300px;
    height: 80px;
    padding: 10px;
  }
  .carrousel_3d .carrousel_3d_item img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .carrousel_3d .carrousel_3d_item a {
    font-size: 14px;
  }
  .MAIN_FAQ {
    display: flex;
    flex-direction: column;
    padding: 30px;
    width: 80%;
  }
  .MAIN_FAQ h2 {
    text-align: center;
  }
  .MAIN_FAQ .FAQ_LIST {
    margin: 0;
  }
  .socialBar {
    bottom: auto;
    top: 2rem;
    left: 0.5rem;
    right: auto;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.7);
  }
  .socialBar .socialBar_red {
    padding: 0.4rem;
  }
  .socialBar .socialBar_red img {
    width: 1rem;
    height: 1rem;
  }
  .FAQ {
    width: 80%;
  }
  .FAQ .FAQ_title {
    margin-bottom: 1.5rem;
  }
  .FAQ .FAQ_title h2 {
    font-size: 40px;
  }
  .FAQ .FAQ_title p {
    font-size: 16px;
  }
  .FAQ .FAQ_item {
    margin-bottom: 1rem;
  }
  .FAQ .FAQ_item h3 {
    font-size: 20px;
  }
  .FAQ .FAQ_item p {
    font-size: 16px;
  }
  .MLA_footer h2 {
    font-size: 30px;
  }
  .MLA_footer .footer_contact {
    flex-direction: column;
  }
  .MLA_footer .footer_contact .footer_contact_item {
    margin-top: 40px;
  }
  .MLA_footer .footer_contact .footer_contact_item img {
    width: 50px;
    height: 50px;
    margin-bottom: 0;
  }
  .MLA_footer .footer_contact .footer_contact_item h3 {
    margin-top: 0;
  }
  .copyright {
    width: 90%;
    font-size: 16px;
    margin-top: 1rem;
    text-align: center;
  }
  .copyright a {
    font-size: 16px;
  }
}
@media (max-width: 900px) {
  .featured_project {
    grid-template-columns: 1fr;
  }
  .featured_project__media {
    grid-column: 1/-1;
  }
  .featured_project__media img {
    width: 100%;
    height: auto;
  }
  .featured_project__content {
    grid-column: 1/-1;
    text-align: left;
    margin-top: -3rem;
  }
  .featured_project__techs, .featured_project__links {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .featured_project__title {
    font-size: 1.6rem;
  }
  .featured_project__description {
    font-size: 0.9rem;
  }
  .featured_project__content {
    margin-top: 1rem;
  }
}
/*------------------------------------*\
    #Contact Btn
\*------------------------------------*/
.contact_btn {
  width: 250px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E6EDF2;
  border-radius: 10px;
  border-color: transparent;
  text-align: center;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin-right: 30px;
}
.contact_btn img {
  width: 3.125rem;
  height: 3.125rem;
}
.contact_btn:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/*------------------------------------*\
    #Contact_small Btn
\*------------------------------------*/
.contact_small_btn {
  padding: 10px 20px;
  background-color: #009E66;
  color: #F9F9F9;
  font-family: "Poppins", sans-serif;
  border-radius: 20px;
  margin-top: 20px;
  margin-right: 20px;
  transition: transform 0.3s ease;
}
.contact_small_btn:hover {
  background-color: #37BF32;
  transform: scale(1.1);
  cursor: pointer;
}

/*------------------------------------*\
    #Button sparks
\*------------------------------------*/
.btn_sparks {
  padding: 1.25em 4em;
  border-radius: 1.25em;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #7570B3;
  transition: all 0.2s ease;
  font-family: "Baloo 2", cursive;
  font-weight: bold;
  font-size: 2vw;
  position: relative;
  min-width: 120px;
  min-height: 48px;
}
.btn_sparks:active {
  transform: scale(0.96);
}
.btn_sparks:before, .btn_sparks:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}
.btn_sparks:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, transparent 20%, #7570B3 20%, transparent 30%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, transparent 10%, #7570B3 15%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}
.btn_sparks:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, transparent 10%, #7570B3 15%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%), radial-gradient(circle, #7570B3 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}
@media (max-width: 600px) {
  .btn_sparks {
    font-size: 1.2rem;
    padding: 0.8em 2em;
    border-radius: 0.8em;
  }
}
@media (max-width: 400px) {
  .btn_sparks {
    font-size: 1rem;
    padding: 0.6em 1.2em;
    border-radius: 0.6em;
  }
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
/*------------------------------------*\
    #Glitch sparks
\*------------------------------------*/
.link_container {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 20px;
  width: 100%;
  padding: 20px 0;
}
@media (max-width: 768px) {
  .link_container {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}
.link_container .link_wrapper {
  position: relative;
  height: 35px;
  width: 125px;
  margin: 3px;
}
.link_container .link_wrapper input {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}
.link_container .link_wrapper input:checked + .btn_glitch {
  --primary: #009E66;
  --shadow-primary: #ffffff;
}
.link_container .link_wrapper input:hover + .btn_glitch {
  --primary: #1F7A8C;
  --font-size: 11px;
}
.link_container .link_wrapper .btn_glitch {
  --primary: #264653;
  --shadow-primary: #A8DADC;
  --color: #ffffff;
  --font-size: 9px;
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60;
  --shadow-secondary: #000000;
  --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);
  --border: 5px;
  --shimmy-distance: 5px;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  color: var(--color);
  text-transform: uppercase;
  font-size: var(--font-size);
  letter-spacing: 3px;
  position: relative;
  font-weight: 900;
  width: 100%;
  height: 100%;
  line-height: 38px;
  text-align: center;
  transition: background 0.2s, 0.3s;
}
.link_container .link_wrapper .btn_glitch .number {
  background: var(--shadow-primary);
  color: #323232;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 1px;
  position: absolute;
  width: 15px;
  height: 6px;
  top: 0;
  left: 81%;
  line-height: 6.2px;
}
.link_container .link_wrapper .btn_glitch::before, .link_container .link_wrapper .btn_glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--clip);
  z-index: -1;
}
.link_container .link_wrapper .btn_glitch::before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}
.link_container .link_wrapper .btn_glitch::after {
  background: var(--primary);
}
.link_container .link_wrapper .btn_glitch_span {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
}
.link_container .link_wrapper .btn_glitch_span::before {
  content: "";
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}
.link_container .link_wrapper input:hover + .btn_glitch,
.link_container .link_wrapper input:hover + .btn_glitch + .btn_glitch_span {
  display: block;
}
.link_container .link_wrapper input:checked + .btn_glitch,
.link_container .link_wrapper input:checked + .btn_glitch + .btn_glitch_span {
  display: block;
  animation: glitch 5s infinite;
}
@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }
  2%, 8% {
    clip-path: var(--clip-two);
    transform: translateX(calc(var(--shimmy-distance) * -1));
  }
  6% {
    clip-path: var(--clip-two);
    transform: translateX(var(--shimmy-distance));
  }
  9% {
    clip-path: var(--clip-two);
    transform: translateX(0);
  }
  10% {
    clip-path: var(--clip-three);
    transform: translateX(var(--shimmy-distance));
  }
  13% {
    clip-path: var(--clip-three);
    transform: translateX(0);
  }
  14%, 21% {
    clip-path: var(--clip-four);
    transform: translateX(var(--shimmy-distance));
  }
  25% {
    clip-path: var(--clip-five);
    transform: translateX(var(--shimmy-distance));
  }
  30% {
    clip-path: var(--clip-five);
    transform: translateX(calc(var(--shimmy-distance) * -1));
  }
  35%, 45% {
    clip-path: var(--clip-six);
    transform: translateX(calc(var(--shimmy-distance) * -1));
  }
  40% {
    clip-path: var(--clip-six);
    transform: translateX(var(--shimmy-distance));
  }
  50% {
    clip-path: var(--clip-six);
    transform: translateX(0);
  }
  55% {
    clip-path: var(--clip-seven);
    transform: translateX(var(--shimmy-distance));
  }
  60% {
    clip-path: var(--clip-seven);
    transform: translateX(0);
  }
  31%, 61%, 100% {
    clip-path: var(--clip-four);
    transform: translateX(0);
  }
}

h1 {
  font-size: 60px;
  font-family: "Lexend Giga";
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
}

h2 {
  font-size: 40px;
  font-family: "Lexend Giga";
}

h3 {
  font-size: 30px;
  font-family: "Lexend Giga";
}

p,
a {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  text-decoration: none;
}

/* .container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle at 50% 50%,
            #0000 0,
            #0000 2px,
            hsl(0, 0%, 4%) 2px);
    background-size: 8px 8px;
    --f: blur(1em) brightness(6);
    animation: hii 10s linear infinite;
}

@keyframes hii {
    0% {
        backdrop-filter: var(--f) hue-rotate(0deg);
    }

    to {
        backdrop-filter: var(--f) hue-rotate(360deg);
    }
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    --c: #009E66;
    background-color: #000;
    background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
    background-size:
        300px 235px,
        300px 235px,
        300px 235px,
        300px 252px,
        300px 252px,
        300px 252px,
        300px 150px,
        300px 150px,
        300px 150px,
        300px 253px,
        300px 253px,
        300px 253px,
        300px 204px,
        300px 204px,
        300px 204px,
        300px 134px,
        300px 134px,
        300px 134px,
        300px 179px,
        300px 179px,
        300px 179px,
        300px 299px,
        300px 299px,
        300px 299px,
        300px 215px,
        300px 215px,
        300px 215px,
        300px 281px,
        300px 281px,
        300px 281px,
        300px 158px,
        300px 158px,
        300px 158px,
        300px 210px,
        300px 210px,
        300px 210px;
    animation: hi 150s linear infinite;
}

@keyframes hi {
    0% {
        background-position:
            0px 220px,
            3px 220px,
            151.5px 337.5px,
            25px 24px,
            28px 24px,
            176.5px 150px,
            50px 16px,
            53px 16px,
            201.5px 91px,
            75px 224px,
            78px 224px,
            226.5px 350.5px,
            100px 19px,
            103px 19px,
            251.5px 121px,
            125px 120px,
            128px 120px,
            276.5px 187px,
            150px 31px,
            153px 31px,
            301.5px 120.5px,
            175px 235px,
            178px 235px,
            326.5px 384.5px,
            200px 121px,
            203px 121px,
            351.5px 228.5px,
            225px 224px,
            228px 224px,
            376.5px 364.5px,
            250px 26px,
            253px 26px,
            401.5px 105px,
            275px 75px,
            278px 75px,
            426.5px 180px;
    }

    to {
        background-position:
            0px 6800px,
            3px 6800px,
            151.5px 6917.5px,
            25px 13632px,
            28px 13632px,
            176.5px 13758px,
            50px 5416px,
            53px 5416px,
            201.5px 5491px,
            75px 17175px,
            78px 17175px,
            226.5px 17301.5px,
            100px 5119px,
            103px 5119px,
            251.5px 5221px,
            125px 8428px,
            128px 8428px,
            276.5px 8495px,
            150px 9876px,
            153px 9876px,
            301.5px 9965.5px,
            175px 13391px,
            178px 13391px,
            326.5px 13540.5px,
            200px 14741px,
            203px 14741px,
            351.5px 14848.5px,
            225px 18770px,
            228px 18770px,
            376.5px 18910.5px,
            250px 5082px,
            253px 5082px,
            401.5px 5161px,
            275px 6375px,
            278px 6375px,
            426.5px 6480px;
    }
} */
.container {
  background-image: url("../../assets/img/mla_header.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  padding: 0 0 20px 0;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #0D0A0B;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  margin-top: 80px;
}
header img {
  width: 340px;
  max-width: 90%;
  height: 100px;
}
header .head_btn {
  display: flex;
  flex-direction: row;
  font-weight: bold;
}
header .head_btn #contact_btn {
  font-family: "Lexend Giga";
  color: #FFFFFF;
  background-color: #009E66;
}
header .head_btn #contact_btn:hover {
  transform: scale(1.2);
  background-color: #37BF32;
}
header .head_btn #free_btn {
  font-family: "Lexend Giga";
  color: #FFFFFF;
  background-color: #2A2A2A;
}
header .head_btn #free_btn:hover {
  transform: scale(1.2);
  background-color: #D8E1E9;
  color: #0F0F0F;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  width: 100%;
}
main section {
  margin: 40px 0;
}
main .information_cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
main .information_cards div {
  background-color: #0F0F0F;
  width: 450px;
  padding: 1.5rem;
  border-bottom: 4px solid rgba(255, 255, 255, 0.25);
  border-right: 4px solid rgba(255, 255, 255, 0.25);
  border-top: none;
  border-left: none;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.25);
  margin: 10px 30px;
}
main .information_cards div h3 {
  color: #FFFFFF;
  font-size: 20x;
  font-weight: bold;
}
main .information_cards div p {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  text-align: justify;
}
main .information_cards div a {
  color: #009E66;
  font-size: 14px;
  font-weight: bold;
  text-align: end;
}
main .showcase-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
  gap: 20px;
  margin: 0 auto;
}
main .showcase-item.active {
  opacity: 1;
  transform: translateY(0);
}
main .showcase-item .text h2 {
  color: #FFFFFF;
  margin-bottom: 20px;
  text-align: left;
}
main .showcase-item .text p {
  color: #D8E1E9;
  max-width: 500px;
  text-align: justify;
}
main .showcase-item .image {
  width: 100%;
  height: 60vh;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
main .showcase-item .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main .showcase-item #ProfileX {
  color: #06BEE1;
}
main .showcase-item #PageCraft {
  color: #F4B942;
}
main .packages {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
main .packages .btn_packages {
  width: 320px;
  height: 120px;
  background-color: #009E66;
  color: #FFFFFF;
  font-family: "Lexend Giga";
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  border-radius: 10px;
}
main .packages .btn_packages:hover {
  cursor: pointer;
  transform: scale(1.1);
}
main .experiences {
  display: flex;
  flex-direction: column;
}
main .experiences h2 {
  color: #FFFFFF;
  text-align: start;
}
main .carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Navegación / progreso */
}
main .carousel .carousel-wrapper {
  position: relative;
  width: 100%;
  height: 70vh;
}
main .carousel .carousel-wrapper .carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 8%;
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s ease;
}
main .carousel .carousel-wrapper .carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}
main .carousel .carousel-wrapper .carousel-slide .carousel-text h2 {
  color: #FFFFFF;
  margin-bottom: 20px;
}
main .carousel .carousel-wrapper .carousel-slide .carousel-text p {
  max-width: 480px;
  color: #C4C4C4;
}
main .carousel .carousel-wrapper .carousel-slide .carousel-media {
  display: flex;
  justify-content: flex-end;
}
main .carousel .carousel-wrapper .carousel-slide .carousel-media img {
  width: 100%;
  max-width: 520px;
  height: 55vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
}
main .carousel .carousel-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
main .carousel .carousel-nav .nav-dot {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  transition: all 0.4s ease;
}
main .carousel .carousel-nav .nav-dot.active {
  background: linear-gradient(90deg, #009E66, rgba(0, 158, 102, 0.3));
}

.copyright {
  color: #FFFFFF;
}
.copyright a {
  color: #FFFFFF;
}

/* Responsive */
@media (max-width: 900px) {
  main .carousel .carousel-wrapper .carousel-slide {
    grid-template-columns: 1fr;
    padding: 10px 5%;
  }
  main .carousel .carousel-wrapper .carousel-slide .carousel-media img {
    height: 40vh;
  }
  main .showcase-item {
    margin: 0 auto;
    padding: 0px;
    grid-template-columns: 1fr;
  }
  main .showcase-item .image {
    height: 40vh;
  }
  main .showcase-item .image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (min-width: 601px) and (max-width: 750px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 20px;
  }
  p,
  a {
    font-size: 18px;
  }
  header .head_btn {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  main {
    width: 90%;
  }
}
@media (max-width: 600px) {
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 20px;
  }
  p,
  a {
    font-size: 18px;
  }
  header img {
    width: 280px;
    max-width: 90%;
    height: 80px;
  }
  header .head_btn {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  main {
    width: 90%;
  }
  main .information_cards {
    flex-direction: column;
    justify-content: center;
  }
  main .information_cards div {
    width: 75%;
  }
}/*# sourceMappingURL=index.css.map */