@import url(variables.css);

/* =================================== COMPONENTS ======================================== */

/* BTN YOUTUBE */
.btn-yt {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-xl);
  border: var(--border-xs) solid var(--neutral-pure-black);
  padding: 8px 18px;
  transition: .2s;
  font-weight: var(--fw-bold);
  font-size: var(--fs-m);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--neutral-pure-black);
  height: fit-content;
  background-color: var(--neutral-pure-white);
}

.btn-yt img {
  width: 32px;
  height: 32px;
}

.btn-yt:hover {
  background-color: var(--extra-youtube-200);
  border: var(--border-xs) solid var(--extra-youtube-100);
  box-shadow: 5px 8px 0 -3px var(--neutral-pure-black);
  transform: translate(-3px, -3px);
}


/* =================================== WEB PAGE ======================================== */

/* NAVBAR */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 40px;
  background: var(--neutral-pure-white);
  z-index: 999;
  border-bottom: var(--border-s, 2px) solid var(--neutral-pure-black);
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.15);
}

.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
}

.header__logo {
  width: 64px;
}

.header__navbar {
  display: flex;
  gap: 48px;
}

.header__navbar a {
  font-size: var(--fs-m);
  color: var(--neutral-pure-black);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: .3s;
}

.header__navbar a:hover {
  opacity: 40%;
}

#check {
  display: none;
}

.icons {
  cursor: pointer;
  right: 240px;
  display: none;
}

/* CONTAINERS */

/* HERO */
.bg-hero {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: fit-content;
  overflow: hidden;
}

/* BG-HERO IMAGES */
.bg-hero--downloads {
  background-image: url('/assets/img/bg/abstract-07.webp');
}

.bg-hero--courses {
  background-image: url('/assets/img/bg/abstract-05.webp');
}

.bg-hero--r4fica {
  background-image: url('/assets/img/bg/smoke-01.webp');
}

.hero {
  margin-top: 80px;
  padding: 80px 40px 80px 40px;
}

.hero__content {
  display: flex;
  max-width: 1440px;
  height: auto;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  gap: 48px 32px;
}

.hero__content--reverse {
  flex-direction: row-reverse;
}

.hero__text {
  text-align: center;
  display: flex;
  max-width: 50%;
  flex-direction: column;
  justify-content: center;
  font-family: var(--ff-body);
  color: var(--neutral-pure-black);
  overflow: hidden;
}

.hero__title {
  text-align: center;
  font-size: var(--fs-9xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-s);
}

.hero__body p {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ml);
}

.hero__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn-primary {
  background-color: transparent;
  border: var(--border-sm) solid var(--neutral-pure-black);
  padding: 8px 32px;
  justify-content: center;
  align-items: center;
  color: var(--neutral-pure-black);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-s);
  transition: .3s ease-out;
}

.btn-primary:hover {
  background-color: var(--neutral-pure-black);
  color: var(--primary-400);
}

.hero__img-container {
  max-width: 704px;
}

.hero__img {
  width: 100%;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--neutral-pure-white);
  padding: 32px 48px;
  border-radius: var(--radius-ml);
  max-width: 530px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 7px 7px rgba(0, 0, 0, 0.2);
  align-items: center;
}

.modal-content h3 {
  color: var(--neutral-pure-black);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-s);
}

.modal-content p {
  color: var(--neutral-pure-black);
  font-size: var(--fs-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ml);
}

.modal-content button {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: var(--border-xs) solid var(--neutral-pure-black);
  background: var(--primary-100);
  color: var(--neutral-pure-black);
  font-size: var(--fs-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-s);
  max-width: 110px;
  cursor: pointer;
}

.modal-content button:hover {
  border: var(--border-xs) solid var(--primary-800);
  background: var(--primary-200);
  color: var(--primary-800);
}


/* POST */
.post-hero {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 80px;
}

.post-hero__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 80px 240px 0 240px;
  background-image: url('/assets/img/bg/abstract-02.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: auto;
}

.post-hero__title {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 480px 0;
}

.post-hero__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.post-hero__link {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.post-hero__arrow-left-icon {
  width: 24px;
  position: relative;
  height: 24px;
}

.post-hero__link-text {
  position: relative;
  line-height: var(--lh-ml);
  color: var(--neutral-pure-white);
  font-size: var(--fs-xl);
}

.post-hero__link-text:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.post-hero__h1 {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-7xl);
  line-height: var(--lh-s);
  font-weight: var(--fw-semibold);
  color: var(--neutral-pure-white);
}

.post-img {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 240px;
  margin-top: -400px;
  color: var(--neutral-pure-black);
}

.post__img__container {
  width: 100%;
  height: 800px;
  max-height: 1400px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-6xl);
}

.post__img__container img {
  object-fit: cover;
  border-radius: var(--radius-6xl);
}

.btn-yt-acceder {
  position: absolute;
  right: 32px;
  bottom: 32px;
  border-radius: var(--radius-xl);
  background-color: var(--neutral-pure-white);
  border: var(--border-xs) solid var(--neutral-pure-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  gap: 12px;
  transition-duration: 0.2s;
  text-decoration: none;
  color: var(--neutral-pure-black);
  z-index: 10;
}

.btn-yt-acceder:hover {
  background-color: var(--extra-youtube-200);
  border: var(--border-xs) solid var(--extra-youtube-100);
  box-shadow: 5px 8px 0px -3px var(--neutral-pure-black);
  transform: translate(-5px, -5px);
}

.img-btn__logo-yt {
  width: 32px;
  position: relative;
  height: 32px;
  object-fit: cover;
}

.btn-yt-text {
  position: relative;
  line-height: var(--lh-s);
}


/* TEXT POST */
.bg__post-text {
  background-color: var(--neutral-pure-white);
  background-image: url('/assets/img/bg/abstract-01.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin-top: -410px;
}

.post__writing {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 240px 180px;
  padding-top: 458px;
  box-sizing: border-box;
  gap: 36px;
  text-align: left;
}

.post__text-block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}

.post__text-title {
  font-size: var(--fs-4xl);
  line-height: var(--lh-s);
}

.post__writing-p {
  font-size: var(--fs-xl);
  line-height: var(--lh-ml);
  text-align: justify;
}

.post__writing-text {
  margin: 0;
}

/* WRITING IMAGES */
@keyframes showimg {
  from {
    opacity: 0;
    scale: 25%;
  }

  to {
    opacity: 1;
    scale: 100%;
  }
}

.writing__img {
  view-timeline-name: --image;
  view-timeline-axis: block;
  animation-timeline: --image;
  animation-name: showimg;
  animation-range: entry 25% cover 40%;
  animation-fill-mode: both;
  max-width: 75%;
  height: auto;
  border: var(--border-s) solid var(--neutral-pure-black);
  border-radius: var(--radius-sm);
}

/* SOON */
.hero-soon-bg {
  position: fixed;
  background-color: var(--neutral-base-white);
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-soon {
  padding: 40px;
}

.hero-soon__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  ;
  max-width: 1440px;
  margin: 0 auto 150px auto;
}

.hero-soon__img {
  max-width: 548px;
  overflow: hidden;
  mask-image: linear-gradient(var(--neutral-pure-black) 70%, transparent);
}

.hero-soon__img img {
  width: 100%;
  height: 100%;
}

.hero-soon__text {
  text-align: center;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.hero-soon__text__h1 {
  font-size: var(--fs-9xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-s);
  max-width: 100%;
}

.hero-soon__text__p {
  padding: 0 80px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ml);
}

/* CONTACT */
.bg-hero-contact {
  position: fixed;
  top: 80px;
  z-index: -10;
}

.bg-hero-contact img {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

.black-bubble {
  background-image: url(/assets/img/pict/black-bubble.webp);
  background-repeat: repeat-x;
  height: 131px;
  opacity: .75;
}

.bg-contact {
  z-index: -11;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 160px 40px 80px 40px;
}

.contact__form {
  display: flex;
  min-width: 320px;
  max-width: 1440px;
  padding: 64px;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  border-radius: var(--radius-4xl);
  border: var(--border-4xl) solid var(--secondary-200);
  background-color: var(--neutral-pure-white);
  margin-bottom: 200px;
}

.contact__form__headline {
  color: var(--neutral-pure-black);
  font-family: var(--ff-title);
  text-align: center;
}

.contact__form__title {
  font-size: var(--fs-7xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-s);
}

.contact__form__body {
  font-size: var(--fs-l);
  font-weight: var(--fw-light);
  line-height: var(--lh-ml);
  margin-top: 12px;
}

.contact__form__interactive {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.contact__form__inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.input-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.input-field label {
  color: var(--neutral-pure-black);
  font-size: var(--fs-ml);
  font-weight: var(--fw-bold);
  line-height: var(--lh-s);
}

.input-field input,
textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  border: var(--border-xs, 1px) solid var(--secondary-400);
  background: var(--neutral-base-white);
}

.input-field input::placeholder,
textarea::placeholder {
  color: var(--secondary-400);
  font-size: var(--fs-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-s);
}

.input-field textarea {
  resize: none;
  overflow: auto;
}

.contact__form__accept {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact__form__accept label {
  color: var(--neutral-pure-black);
  font-size: var(--fs-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-s);
}

.contact__form__accept input[type="checkbox"] {
  accent-color: var(--neutral-pure-black);
}

.btn-contact-form {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-s);
  background: var(--primary-900);
  color: var(--neutral-pure-white);
  font-size: var(--fs-ml);
  font-weight: var(--fw-bold);
  line-height: var(--lh-s);
  border: none;
  transition: .3s ease-out;
  cursor: pointer;
}

.btn-contact-form:hover {
  background: var(--primary-700);
  color: var(--primary-200);
}

.gray-link {
  color: var(--neutral-700);
  text-decoration: none;
}

.gray-link:hover {
  text-decoration: underline;
}


/* COURSES */

/* CURSOS DESTACADOS */
.news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 120px 40px;
  background: url(/assets/img/bg/abstract-02.jpg) no-repeat center center;
  background-size: cover;
}

.title-negative {
  color: var(--neutral-pure-white);
  font-size: var(--fs-7xl);
  font-weight: var(--fw-bold);
  text-align: center;
}


/* SLIDER */
.slider {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 572px;
  overflow: visible;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.item {
  position: absolute;
  max-width: 704px;
  height: 100%;
  width: 100%;
  text-align: justify;
  background-color: #fff;
  border-radius: var(--radius-3xl);
  padding: 0;
  transition: 0.5s;
  margin: 0 10px;
  opacity: 0.6;
  transform: scale(0.8);
  z-index: 1;
  cursor: pointer;
}

.card-news {
  border-radius: var(--radius-3xl);
  background-color: #fff;
  transition: .3s ease-in-out;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.item:hover .card--design {
  background-color: var(--extra-design-100);
  border-radius: var(--radius-3xl);
}

.item:hover .card--develop {
  background-color: var(--extra-develop-100);
  border-radius: var(--radius-3xl);
}

.item:hover .card--security {
  background-color: var(--extra-security-100);
  border-radius: var(--radius-3xl);
}

.item.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.card-news__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

.card-news__headline {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-news__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-base);
  text-align: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-news__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.card-news__tags {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.card-news__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-news__type {
  display: flex;
  gap: 8px;
  align-items: center;
}

.card-news__type p {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-s);
}

.card-news__level {
  display: flex;
  gap: 8px;
  align-items: center;
}

.card-news__level img {
  width: 18px;
  height: 18px;
}

.card-news__level p {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-s);
}

.card-news__access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.btn-youtube-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  border: var(--border-xs) solid var(--neutral-pure-black);
  padding: 8px 12px;
  gap: 12px;
  text-decoration: none;
  transition: .2s;
  background-color: var(--neutral-pure-white);
  width: 100%;
}

.btn-youtube-fill:hover {
  background-color: var(--extra-youtube-200);
  border: var(--border-xs) solid var(--extra-youtube-100);
  box-shadow: 5px 8px 0px -3px var(--neutral-pure-black);
  transform: translate(-5px, -5px);
}

.btn-youtube-fill img {
  width: 32px;
  height: 32px;
}

.btn-youtube-fill p {
  font-weight: var(--fw-bold);
  font-size: var(--fs-m);
  color: var(--neutral-pure-black);
}

.btn-description-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  border: var(--border-xs) solid var(--neutral-pure-black);
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  padding: 8px;
  transition: .2s;
  background-color: var(--neutral-pure-white);
  cursor: pointer;
}

.btn-description-mini:hover {
  background-color: var(--neutral-100);
  box-shadow: 5px 8px 0px -3px var(--neutral-pure-black);
  transform: translate(-5px, -5px);
}

#next,
#prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background-color: transparent;
  border: none;
  font-size: xx-large;
  font-family: monospace;
  font-weight: bold;
  cursor: pointer;
}

#prev {
  left: 20px;
}

#next {
  right: 20px;
}

/* CATEGORIES */
.categories {
  background-image: url('/assets/img/bg/abstract-07.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 162px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.title-positive {
  font-weight: var(--fw-bold);
  font-size: var(--fs-7xl);
  color: var(--neutral-pure-black);
  text-align: center;
}

.categories__cards {
  display: flex;
  max-width: 1440px;
  gap: 32px;
  margin: 0 auto;
}

.card-category {
  border-radius: var(--radius-l);
  background-color: var(--neutral-pure-white);
  border: var(--border-xs) solid var(--global-secondary);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 18px;
  transition: .3s;
  cursor: pointer;
  padding: 24px;
}

.card-category--design:hover {
  background-color: var(--extra-design-100);
  border: var(--border-xs) solid var(--neutral-pure-black);
}

.card-category--develop:hover {
  background-color: var(--extra-develop-100);
  border: var(--border-xs) solid var(--neutral-pure-black);
}

.card-category--security:hover {
  background-color: var(--extra-security-100);
  border: var(--border-xs) solid var(--neutral-pure-black);
}

.card-category__headline {
  display: flex;
  align-items: center;
  gap: 28px;
}

.card-category__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-category__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
}

.card-category__body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-ml);
}

.card-category__count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.card-category__icon-count {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-category__count p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-m);
}

/* COURSES */

.courses {
  background-image: url('/assets/img/bg/abstract-06.jpg');
  background-size: cover;
  background-position: center;
  padding: 120px 40px 190px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.courses__content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1440px;
}

.no-results {
  color: var(--neutral-pure-black);
  font-size: var(--fs-2xl);
  text-align: center;
  width: 100%;
  padding: 40px 0;
  grid-column: 1 / -1;
  justify-self: center;
}

.no-results--white {
  color: var(--neutral-pure-white);
}

.courses__bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.courses__search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 490px;
}

.courses__search input {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  max-width: 490px;
  width: 100%;
  display: flex;
  align-items: center;
}

.courses__search input::placeholder {
  font-weight: var(--fw-regular);
  font-size: var(--fs-m);
  color: var(--secondary-400);
  position: relative;
  top: 50%;
  transform: translateY(-90%);
}

.courses__search input:focus {
  outline: none;
}

.courses__search__icon {
  padding: 4px;
  position: absolute;
  right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.courses__tags {
  display: flex;
  gap: 32px;
  width: fit-content;
}

.courses__category,
.courses__difficulty {
  position: relative;
  display: flex;
  align-items: center;
}

.courses__category select,
.courses__difficulty select {
  border: none;
  width: 240px;
  height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  z-index: 1;
  font-size: var(--fs-m);
  font-weight: var(--fw-regular);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--neutral-pure-white) url('/assets/icons/ui/arrow-down.svg') no-repeat;
  background-position: calc(100% - 16px) center;
  background-size: 12px;
  text-overflow: ellipsis;
}

.courses__category select:focus,
.courses__difficulty select:focus {
  outline: none;
}


/* CARDS */
.courses__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@keyframes showCard {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-courses {
  max-width: 458px;
  border-radius: var(--radius-l);
  background-color: var(--neutral-pure-white);
  padding: 22px;
  border: var(--border-xs) solid var(--global-secondary);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  animation: showCard 0.5s ease forwards;
}

.card-courses--design,
.card-courses--develop,
.card-courses--security {
  background-color: var(--neutral-pure-white);
  transition: .3s;
}

.card-courses.card-courses--design:hover {
  background-color: var(--extra-design-100);
}

.card-courses.card-courses--develop:hover {
  background-color: var(--extra-develop-100);
}

.card-courses.card-courses--security:hover {
  background-color: var(--extra-security-100);
}

.card-courses__img {
  border-radius: var(--radius-ml);
  width: 100%;
  height: auto;
}

.card-courses__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
}

.card-courses__body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-m);
}

.card-courses__info {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.card-courses__access {
  display: flex;
  gap: 16px;
  align-items: center;
}

.btn-yutube {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background-color: var(--neutral-pure-white);
  color: var(--neutral-pure-black);
  font-weight: var(--fw-bold);
  font-size: var(--fs-m);
  border: var(--border-xs) solid var(--neutral-pure-black);
  border-radius: var(--radius-xl);
  padding: 8px 18px;
  transition: .2s;
  width: 100%;
}

.btn-yutube:hover {
  background-color: var(--extra-youtube-200);
  border: var(--border-xs) solid var(--extra-youtube-100);
  box-shadow: 5px 8px 0px -3px var(--neutral-pure-black);
  transform: translate(-5px, -5px);
}

.btn-yutube img {
  width: 32px;
  height: 32px;
}

.card-courses__level,
.card-courses__type {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-s);
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* PAGINATION */
.num-pag {
  display: flex;
  align-items: center;
  gap: 24px;
}

.num-pag__icon {
  width: 9px;
  height: 13px;
  cursor: pointer;
  color: var(--neutral-pure-white);
}

.num-pag__numbers {
  display: flex;
  align-items: center;
  gap: 24px;
}

.num-pag__number__nexts {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-l);
  color: var(--secondary-300);
  opacity: 50%;
  transition: opacity 0.3s ease;
}

.num-pag__number__nexts:hover {
  opacity: 0.8;
}

.num-pag__number__current {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-l);
  color: var(--neutral-pure-white);
}

/* DOWNLOADS */
/* NEW DOWNLOADS */
.slider-container {
  position: relative;
  width: 100%;
  max-width: min(1440px, 100vw);
  overflow: hidden;
  margin: 0 40px;
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.slider-downloads {
  position: relative;
  width: 100%;
  height: 533px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow: visible;
}

.btn-news-downloads {
  position: absolute;
  width: 912px;
  height: 100%;
  border-radius: var(--radius-4xl);
  overflow: hidden;
  transition: all 0.5s ease;
  display: flex;
  opacity: 0;
  transform: translateX(100%) scale(0.8);
  visibility: hidden;
}

.btn-news-downloads img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-4xl);
  filter: blur(0);
  transition: filter 0.3s ease-in-out;
  pointer-events: none;
}

.btn-news-downloads.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  visibility: visible;
  z-index: 2;
  filter: none;
  max-height: 100%;
}

.btn-news-downloads.prev,
.btn-news-downloads.next {
  opacity: 0.5;
  visibility: visible;
  z-index: 1;
  filter: grayscale(100%);
  pointer-events: none;
  max-height: 100%;
}

.btn-news-downloads.prev {
  transform: translateX(-96%) scale(0.8);
}

.btn-news-downloads.next {
  transform: translateX(96%) scale(0.8);
}

/* Hover effects */
.btn-news-downloads.active:hover img {
  filter: blur(5.5px);
}

.btn-news-downloads.prev:hover img,
.btn-news-downloads.next:hover img {
  filter: grayscale(100%);
}

.btn-news-downloads__buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  height: fit-content;
  gap: 84px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  z-index: 3;
}

.btn-news-downloads.active:hover .btn-news-downloads__buttons {
  opacity: 1;
  visibility: visible;
}

/* ALL DOWNLOADS (CARDS) */
.downloads {
  background-image: url('/assets/img/bg/abstract-01.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: fit-content;
  overflow-x: hidden;
  padding: 120px 40px;
}

.downloads__content {
  margin: 0 auto;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1440px;
}

.downloads__category-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 20px;
  flex-wrap: wrap;
}

.downloads__category-group {
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.downloads__category-group::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--neutral-pure-black);
  transform: translateX(-50%);
  transition: width 0.3s ease-in-out;
}

.downloads__category-group h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--neutral-pure-black);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.downloads__category-group.active-filter h3 {
  opacity: 1;
}

.downloads__category-group.active-filter::after {
  width: 30%;
}

.downloads__category-group:hover:not(.active-filter)::after {
  width: 15%;
}

.downloads__category-group:hover h3 {
  opacity: 0.8;
}

/* Animation for filtered items */
.post-box {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
  will-change: opacity, transform;
}

.post-box.hide {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.post-box.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

.downloads__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin: 0 auto;
}

.card-downloads {
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px;
  background-color: var(--neutral-pure-white);
  animation: fadeIn 0.5s ease forwards;
  transition: background-color 0.3s ease-in-out;
}

.card-downloads.hide {
  animation: fadeOut 0.5s ease forwards;
}

.design,
.develop,
.security {
  transition: background-color 0.3s ease-in-out;
}

.develop:hover {
  background-color: var(--extra-develop-100);
}

.design:hover {
  background-color: var(--extra-design-100);
}

.security:hover {
  background-color: var(--extra-security-100);
}

.card-downloads__img {
  height: fit-content;
  overflow: hidden;
  border-radius: var(--radius-m);
}

.card-downloads__img img {
  width: 100%;
  height: 264px;
  object-fit: cover;
  border-radius: var(--radius-m);
}

.card-downloads__txt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 50%;
}

.card-downloads__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-downloads__title {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-s);
}

.card-downloads__body {
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--fw-regular);
  font-size: var(--fs-m);
  line-height: var(--lh-ml);
}

.card-downloads__acces {
  display: flex;
  gap: 12px;
}

.btn-yt--downloads {
  width: fit-content;
  height: fit-content;
  border-radius: var(--radius-round);
  padding: 8px;
}

.btn-yt--downloads p {
  display: none;
}

.btn-buymeacoffee {
  display: flex;
  padding: 8px 18px;
  gap: 12px;
  align-items: center;
  border-radius: var(--radius-xl);
  border: var(--border-xs) solid var(--neutral-pure-black);
  background-color: var(--neutral-pure-white);
  height: fit-content;
  text-decoration: none;
  transition: .2s;
}

.btn-buymeacoffee__icon {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  position: relative;
}

.btn-buymeacoffee__icon img {
  position: absolute;
  transition: opacity .3s;
  width: 100%;
  height: 100%;
}

.btn-buymeacoffee__icon-nonhover {
  opacity: 1;
}

.btn-buymeacoffee__icon-hover {
  opacity: 0;
}

.btn-buymeacoffee:hover .btn-buymeacoffee__icon-nonhover {
  opacity: 0;
}

.btn-buymeacoffee:hover .btn-buymeacoffee__icon-hover {
  opacity: 1;
}

.btn-buymeacoffee p {
  color: var(--neutral-pure-black);
  font-weight: var(--fw-bold);
  font-size: var(--fs-m);
}

.btn-buymeacoffee:hover {
  border: var(--border-xs) solid var(--extra-buymeacoffee-100);
  background-color: var(--extra-buymeacoffee-200);
  box-shadow: 5px 8px 0 -3px var(--neutral-pure-black);
  transform: translate(-3px, -3px);
}

.btn-news-downloads__buttons a {
  display: block;
  transition: transform 0.3s;
  width: 200px;
  height: 200px;
}

.btn-news-downloads__buttons a:hover {
  transform: scale(1.1);
}

.btn-news-downloads__buttons img {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
  filter: none !important;
}

.btn-news-downloads__buttons a:hover img {
  opacity: 1;
}

/* Corregir posición de las flechas */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  height: fit-content;
  z-index: 4;
  transition: opacity 0.3s ease;
  display: none;
}

#prevBtn {
  left: 0;
}

#nextBtn {
  right: 0;
}

.arrow:hover {
  opacity: 0.7;
}

/* Pagination Styles */
.downloads__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 100px;
}

.pagination__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.pagination__btn:hover:not(:disabled) {
  opacity: 1;
}

.pagination__btn:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.pagination__numbers {
  display: flex;
  gap: 16px;
  align-items: center;
}

.pagination__number {
  font-size: var(--fs-l);
  font-weight: var(--fw-semibold);
  color: var(--neutral-pure-black);
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px 8px;
  position: relative;
}

.pagination__number::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--neutral-pure-black);
  transform: translateX(-50%);
  transition: width 0.3s ease-in-out;
}

.pagination__number:hover:not(.active) {
  opacity: 0.8;
}

.pagination__number:hover:not(.active)::after {
  width: 50%;
}

.pagination__number.active {
  opacity: 1;
}

.pagination__number.active::after {
  width: 100%;
}


/* R4FICA */
.r4fica-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 120px 40px;
  background: url(/assets/img/bg/abstract-08.jpg) no-repeat center center;
  background-size: cover;
}

.about {
  width: 100%;
}

.about__content {
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 160px;
}

.about__block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 540px;
  width: 100%;
}

.about__block__img {
  max-width: 960px;
}

.about__block__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__block__img--left {
  position: absolute;
  left: 0;
}

.about__block__img--right {
  position: absolute;
  right: 0;
}

.about__block-txt {
  width: 100%;
  max-width: 704px;
  padding: 0 40px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  gap: 20px;
}

.about__block:first-child .about__block-txt,
.about__block:last-child .about__block-txt {
  margin-left: auto;
  margin-right: 0;
}

.about__block-txt--right {
  margin-left: auto;
}

.about__block-txt__title {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-7xl);
  color: var(--neutral-pure-white);
  text-align: center;
  line-height: var(--lh-base);
}

.about__block-txt__title>span {
  color: var(--global-secondary);
}

.about__block-txt__body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-l);
  color: var(--neutral-pure-white);
}

.history {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 100px;
}

.history__video {
  max-width: 1194px;
  width: 100%;
  aspect-ratio: 16/9;
}

.history__video iframe {
  content-visibility: auto;
}

iframe {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  display: block;
}

/* POLITICS */
.bg-politics {
  position: fixed;
  top: 80px;
  z-index: -10;
}

.politics {
  margin-top: 80px;
  padding: 80px 40px;
}

.politics__content {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
}

.politics__img {
  max-width: 581px;
}

.politics__img img {
  width: 100%;
  height: 100%;
}

.politics__text {
  width: 100%;
}

.hero__title--politics {
  max-width: 100% !important;
}

.writing {
  padding: 0 40px 220px 40px;
}

.writing__content {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1440px;
  margin: 0 auto;
}

.post__text-block h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
}

.post__text-block>ul,
.post__text-block>ol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style-position: inside;
  padding-left: 44px;
  text-align: justify;
  width: 100%;
}

.post__text-block>ul>li,
.post__text-block>ol>li {
  font-size: var(--fs-xl);
  text-align: start;
}

ul ul {
  margin-left: 44px;
}

.non-mark {
  list-style: none;
}

.non-mark li {
  display: flex;
  gap: 16px;
}

/* 404 PAGE */
.backlink {
  display: flex;
  text-decoration: none;
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  gap: 8px;
}

/* INDEX */
/* HERO INDEX */
.hero-index {
  position: relative;
  margin-top: 80px;
  max-width: 100vw;
  max-height: 864px;
  overflow: hidden;
}

.hero-index__content {
  z-index: 2;
}

.hero-index video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -10;
}

.hero-index__capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -9;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}

.hero-index__caricature {
  width: min(624px, 90vw);
  height: auto;
  aspect-ratio: 624/865;
  position: relative;
  cursor: url('/assets/icons/ui/see-more-cursor.svg') 16 16, pointer;
  margin: 0 auto;
}

.hero-index__caricature img {
  width: 100%;
  height: 100%;
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
  transition: filter 0.3s ease, transform 0.3s ease;
  cursor: inherit;
  z-index: -1;
  object-fit: contain;
}

.hero-index__caricature:hover img {
  filter: brightness(70%) blur(2px);
  transform: scale(1.03);
}

.hero-index__caricature img:last-child {
  z-index: 6;
}

.dark-branch-left,
.dark-branch-right {
  max-width: 572px;
  position: absolute;
  z-index: -2;
}

.dark-branch-left {
  top: -136px;
  left: 0;  /* Comienza en el borde izquierdo */
  transform: translateX(-50%);  /* Solo muestra la mitad de la rama */
}

.dark-branch-right {
  top: -136px;
  right: 0;  /* Comienza en el borde derecho */
  transform: translateX(50%);  /* Solo muestra la mitad de la rama */
}

.low-smoke,
.low-smoke-left,
.low-smoke-right {
  position: absolute;
}

.low-smoke {
  max-height: 540px;
  width: 100%;
  bottom: 0;
  z-index: -4;
}

.low-smoke-left {
  max-width: 1460px;
  max-height: 399px;
  left: -200px;
  bottom: 0;
  z-index: -2;
}

.low-smoke-right {
  max-width: 1460px;
  max-height: 399px;
  right: -200px;
  bottom: 0;
  z-index: -3;
}

.hero-index__title {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -5;
}

.hero-index__title h1 {
  font-size: 340px;
  font-weight: var(--fw-extrabold);
  opacity: .3;
  line-height: var(--lh-s);
}

.black-bubble-1 {
  background-image: url(../assets/img/pict/black-bubble.webp);
  background-repeat: repeat-x;
  background-size: cover;
  height: 131px;
  margin-top: -91px;
}

/* TECH SECTION */
.tech {
  height: 360px;
  background-color: var(--neutral-pure-black);
  overflow: hidden;
  position: relative;
  padding: 100px 0;
}

.tech__content {
  display: flex;
  gap: 80px;
  max-height: 100%;
  position: absolute;
  left: 0;
  animation: scroll 30s linear infinite;
}

.tech__content img {
  width: 160px;
  height: 160px;
  user-select: none;
  -webkit-user-drag: none;
  flex-shrink: 0;
}

.tech:hover .tech__content {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-160px * 9 - 80px * 9));
  }
}

/* PRESENTATION SECTION */
.presentation {
  background-image: url(../assets/img/bg/abstract-09.jpg);
  background-size: cover;
  padding: 60px 40px 120px 40px;
}

.presentation__content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: center;
}

.presentation__txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.presentation__title {
  color: var(--neutral-base-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-8xl);
  text-align: center;
}

.presentation__body {
  padding: 0 40px;
  color: var(--neutral-base-white);
  text-align: center;
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  line-height: var(--lh-ml);
}

.r4fica-yt-channel {
  max-width: 950px;
}

.r4fica-yt-channel img {
  width: 100%;
  height: 100%;
}

/* SECTION INDEX */
.section-index--1 {
  background-image: url(../assets/img/bg/abstract-07.webp);
}

.section-index--2 {
  background-image: url(../assets/img/bg/abstract-05.webp);
}

.section-index--3 {
  background-image: url(../assets/img/bg/abstract-04.webp);
  padding-bottom: 220px !important;
}

.section-index {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 40px;
}

.section-index__content {
  max-width: 1440px;
  display: flex;
  gap: 32px;
  align-items: center;
  margin: 0 auto;
  justify-content: center;
}

.section-index__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
  max-width: 100%;
}

.section-index__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-7xl);
  line-height: var(--lh-base);
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
}

.section-index__body p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-l);
  line-height: var(--lh-ml);
  text-align: center;
}

.section-index__access {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap-reverse;
}

.btn-buymeacoffe--section-index {
  max-width: 216px;
}

.section-link {
  display: flex;
  gap: 8px;
  color: var(--neutral-pure-black);
  text-decoration: none;
  align-items: center;
}

.section-link p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-l);
  line-height: var(--lh-ml);
  white-space: nowrap;
}

.section-link:hover {
  text-decoration: underline;
}

.section-link img {
  width: 13px;
  height: 10px;
}

.section-index img {
  max-width: 581px;
  width: 100%;
}

.btn-yt--index-section {
  padding: 8px 24px;
}

/* FOOTER */
footer {
  justify-content: flex-end;
  align-items: flex-end;
  min-height: fit-content;
  display: flex;
  margin-top: 80px;
}

footer li {
  display: flex;
}

.footer {
  width: 100%;
  background: var(--secondary-300);
  min-height: 100px;
  padding: 50px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  margin-top: -50px;
  gap: 28px;
}

.footer__socials,
.footer__menu,
.footer__politics {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.footer__socials li,
.footer__menu,
.footer__politics {
  list-style: none;
  text-align: center;
}

.footer__socials li a {
  color: #1d1d1d;
  display: inline-block;
  transition: 0.5s;
}

.footer__socials li a:hover {
  transform: translateY(-10px);
}

.footer__menu li a {
  font-weight: var(--fw-semibold);
  color: #1d1d1d;
  display: inline-block;
  transition: .5s;
  font-size: var(--fs-m);
  text-decoration: none;
}

.footer__politics li a {
  font-weight: var(--fw-regular);
  color: #1d1d1d;
  display: inline-block;
  transition: .5s;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.footer__menu li a:hover,
.footer__politics li a:hover {
  opacity: 40%;
}

footer p {
  text-align: center;
  font-size: var(--fs-m);
  font-weight: var(--fw-medium);
  color: #1d1d1d;
}

footer .wave {
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(/assets/img/pict/wave.webp);
  background-size: 1000px 100px;
  position: absolute;
}

footer .wave#wave1 {
  opacity: 1;
  bottom: 0;
  animation: animateWave 4s linear infinite;
  z-index: 10;
}

footer .wave#wave2 {
  opacity: 0.5;
  bottom: 10px;
  animation: animateWave_02 4s linear infinite;
  z-index: 9;
}

footer .wave#wave3 {
  opacity: 0.2;
  bottom: 15px;
  animation: animateWave 3s linear infinite;
  z-index: 10;
}

footer .wave#wave4 {
  opacity: 0.7;
  bottom: 20px;
  animation: animateWave_02 3s linear infinite;
  z-index: 9;
}

@keyframes animateWave {
  0% {
    background-position-x: 1000px;
  }

  100% {
    background-position-x: 0px;
  }
}

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

  100% {
    background-position-x: 1000px;
  }
}