:root {
  --primary-color: #38B6FF;
  --primary-dark: #0088e0;
  --primary-light: #e0f6ff;
  --secondary-color: #4A4A4A;
  --accent-color: #FF6B6B;
  --neutral-dark: #1F2937;
  --neutral-light: #F9FAFB;
  --neutral-medium: #6B7280;
  --neutral-primary: #002884;
  --white: #FFFFFF;
  --black: #000000;
  --b-padding-height: 7rem;
  --bs-secondary-rgb: #212529;
  --bs-text-banner-color: #212529;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-default-opacity: rgba(4, 77, 183, .6);
}

html,
body {
  --bs-body-font-family: "Barlow", sans-serif;
  overflow-x: hidden;
}

body {
  color: var( --primary-light);
  overflow: hidden;
}

.glassmorphism {
  -webkit-backdrop-filter: blur(4px) saturate(180%);
  backdrop-filter: blur(4px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.2);
}

.fw-800 {
  font-weight: 800 !important;
}

.bg-default {
  background-color: var(--neutral-primary);
}

.bg-default-opacity {
  background-color: var(--bs-default-opacity);
  backdrop-filter: blur(40px);
}

.bg-gradient-radial {
  background: #0069e0;
  background: linear-gradient(312deg, rgba(0, 105, 224, 1) 30%, rgba(56, 235, 255, 1) 100%);
}

.gradient-button {
  background-image: linear-gradient(to right, var(--primary-dark), var(--primary-color));
  color: var(--white);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 50rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

.gradient-button:hover {
  transform: scale(1.05);
  color: var(--white);
}

.outline-button {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 50rem;
  transition: all 0.3s ease;
}

.outline-button:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.bg-neutral-primary {
  background-color: var(--neutral-primary);
}

.bg-neutral-light {
  background-color: var(--neutral-light);
}

.bg-neutral-dark {
  background-color: var(--neutral-dark);
}

.text-neutral-dark {
  color: var(--neutral-dark);
}

.text-neutral-medium {
  color: var(--neutral-medium);
}

.text-neutral-300 {
  color: #d1d5db;
}

.text-primary-color {
  color: var(--primary-color);
}

.no-before::before {
  display: none;
}

.img-partner {
  max-width: 450px;
  filter: drop-shadow(14px 0 9px hsla(0, 0%, 0%, 0.7));
}

.navbar-area {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;
  --bs-navbar-padding-y: 1rem;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;

  & .navbar-collapse .navbar-nav li {
    display: inline-block;
    position: relative;
    margin: 0 1.8rem;

    & a.nav-link {
      padding-left: 0;
      padding-right: 0;
      color: #fff;
    }
  }

  & .navbar-collapse .navbar-nav li:hover:before {
    visibility: visible;
    opacity: 1;
    right: auto;
    left: 0;
    width: 100%;
  }

  & .navbar-collapse .navbar-nav li:before {
    position: absolute;
    left: auto;
    right: 0;
    top: 100%;
    content: '';
    background: var(--bs-nav-link-color);
    height: 1px;
    width: 0;
    visibility: hidden;
    opacity: 0;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
  }
}

.banner-interna {
  position: relative;
  overflow: hidden;
  display: block;
  padding: var(--b-padding-height) 0 0;
  background: var(--bs-secondary-rgb);
  width: 100%;
  min-height: 100vh;
}

.text-banner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: calc(100vh - var(--b-padding-height));
  z-index: 2;
  color: var(--bs-text-banner-color);
  width: 54%;
  margin-left: 6rem;

  & p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2rem;
    margin-bottom: 2rem;
  }

  & h1,
  & h2 {
    position: relative;
    font-weight: 900;
    font-size: 4rem;
    padding-bottom: 1.2rem;
    margin-bottom: 2rem;

    &:before {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      background: var(--bs-text-banner-color);
      height: 3px;
      width: 100px;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
    }
  }
}

.scroll-down {
  margin-top: 2rem;
  margin-bottom: 1rem;
  cursor: pointer;
  max-width: max-content;

  & i {
    background: url(../images/down.svg) center no-repeat;
    width: 20px;
    height: 50px;
    display: block;
    padding: 0 2px;
    background-size: 100% 100%;
    -webkit-animation: topImageBounce 1.2s infinite ease-in-out;
    animation: topImageBounce 1.2s infinite ease-in-out;
  }
}

@keyframes topImageBounce {
  0% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px)
  }
}

.timeline {
  position: relative;
  text-align: center;
  min-height: 80px;
  height: auto;

  &:after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 50%;
    border-left: 3px solid #BCBCD2;
    transform: translate(-50%);
    min-height: 60px;
  }
}

.images-animation {
  position: absolute;
  right: 0;
  top: 0;
  width: 41.66666667%;
  height: 100%;
  object-fit: cover;
  max-width: inherit;
  z-index: 1;
  display: flex;
  overflow: hidden;

  .grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns of equal width */
    grid-auto-rows: 15px;
    gap: 15px;
    /* Optional: space between grid items */
  }

  .grid-item {
    display: flex;
    align-items: start;
    padding: 1rem;
    color: var(--bs-text-banner-color);
    font-weight: 500;
    font-size: 18px;

    & table>tbody>tr>td {
      background: transparent;
      border: 0;
      padding: .3rem;
    }

    & .col table:first-child>tbody>tr>td {
      color: #fff;
    }
  }

  .grid-item:nth-child(1) {
    grid-row: span 8;
    background-color: #84d3eb;
  }

  .grid-item:nth-child(2) {
    grid-row: span 9;
    background-color: #84d3eb;
  }

  .grid-item:nth-child(3) {
    grid-row: span 10;
    background-color: #3f576c;
    color: #fff;
  }

  .grid-item:nth-child(4) {
    grid-row: span 11;
    background-color: #5e99aa;
    color: #fff;
  }

  .grid-item:nth-child(5) {
    grid-row: span 10;
    background-color: #84d3eb;
  }

  .grid-item:nth-child(6) {
    grid-row: span 8;
    background-color: #84d3eb;
  }
}

.skeleton-item {
  height: 18px;
  border-radius: 10px;
  background: rgba(252, 251, 251, 0.9);
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(252, 251, 251, 0.9)), color-stop(18%, rgba(252, 251, 251, 0.3)), color-stop(33%, rgba(252, 251, 251, 0.9)));
  background: linear-gradient(to right, rgba(252, 251, 251, 0.9) 8%, rgba(252, 251, 251, 0.6) 18%, rgba(252, 251, 251, 0.9) 33%);
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}

@keyframes wave-lines {
  0% {
    background-position: -468px 0;
  }

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

.base-section {
  padding: 7rem 0;

  & .swiper-slide {
    display: table;
    table-layout: fixed;
    width: 100%;
    min-height: 100vh;
    position: relative;
    color: #000;
  }

  article.section {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }

  & span {
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  & h2 {
    position: relative;
    padding-bottom: 1.2rem;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 900;

    &:before {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      content: '';
      background: var(--bs-primary-rgb);
      height: 3px;
      width: 60px;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
    }

    &.left:before {
      left: 0;
      right: inherit;
    }

    &.right:before {
      left: inherit;
      right: 0;
    }

    &.primary:before {
      background: #4285f4;
    }

    &.secondary:before {
      background: #fdbd00;
    }

    &.third:before {
      background: #d4145a;
    }

    &.fourd:before {
      background: #39b54a;
    }
  }

  & p {
    max-width: 800px;
    margin: 0 auto 1rem;
  }
}

.icon-eduassistant {
  position: relative;
  display: block;
  width: 500px;
  height: 500px;
  margin: 40px auto;
  max-width: 100%;
  background-image: url(../images/eduassistant.svg);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;

  & .info {
    max-width: 300px;
    width: 100%;
    position: absolute;
    z-index: 2;

    h5 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    & .line {
      width: 100%;
      border-top: 1px dashed #000;
      position: absolute;

      &::before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #000;
        content: '';
        z-index: 2;
        display: block;
        position: absolute;
        right: -4px;
        bottom: -4px;
      }
    }
  }

  & .info.ps2 {
    right: 100%;
    top: 22px;
    text-align: right;

    & .line {
      bottom: 37%;
      left: 105%;
      width: 78%;
    }
  }

  & .info.ps3 {
    right: 113%;
    top: 35%;
    text-align: right;

    & .line {
      bottom: 44%;
      left: 105%;
      width: 40%;
    }
  }

  & .info.ps4 {
    left: 113%;
    top: 28%;
    text-align: left;

    & .line {
      bottom: 44%;
      right: 105%;
      left: auto;
      width: 30%;

      &::before {
        left: -4px;
        right: auto;
      }
    }
  }

  & .info.ps5 {
    left: 79%;
    bottom: 0;
    text-align: left;

    & .line {
      top: 15%;
      bottom: auto;
      right: 104%;
      left: auto;
      width: 45%;

      &::before {
        left: -4px;
        right: auto;
      }
    }
  }
}

.col-lg-3:first-child .circle::after,
.col-lg-3:first-child .circle::before {
  display: none;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 0 30px;
  position: relative;

  &::before {
    width: 245%;
    height: 1px;
    background: #fff;
    content: '';
    position: absolute;
    right: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  &::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent #fff;
    display: block;
    width: 7px;
    height: 7px;
    z-index: 1;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
  }

  &.primary {
    background: #4285f4;
    background: -moz-linear-gradient(left, #4285f4 0, #7fd9e7 100%);
    background: -webkit-linear-gradient(left, #4285f4 0, #7fd9e7 100%);
    background: -o-linear-gradient(left, #4285f4 0, #7fd9e7 100%);
    background: -ms-linear-gradient(left, #4285f4 0, #7fd9e7 100%);
    background: linear-gradient(to right, #4285f4 0, #7fd9e7 100%);
  }

  &.secondary {
    background: #fdbd00;
    background: -moz-linear-gradient(left, #fdbd00 0, #ff7878 100%);
    background: -webkit-linear-gradient(left, #fdbd00 0, #ff7878 100%);
    background: -o-linear-gradient(left, #fdbd00 0, #ff7878 100%);
    background: -ms-linear-gradient(left, #fdbd00 0, #ff7878 100%);
    background: linear-gradient(to right, #fdbd00 0, #ff7878 100%);
  }

  &.third {
    background: #d4145a;
    background: -moz-linear-gradient(left, #d4145a 0, #f2976a 100%);
    background: -webkit-linear-gradient(left, #d4145a 0, #f2976a 100%);
    background: -o-linear-gradient(left, #d4145a 0, #f2976a 100%);
    background: -ms-linear-gradient(left, #d4145a 0, #f2976a 100%);
    background: linear-gradient(to right, #d4145a 0, #f2976a 100%);
  }

  &.fourd {
    background: #39b54a;
    background: -moz-linear-gradient(left, #39b54a 0, #caf0a0 100%);
    background: -webkit-linear-gradient(left, #39b54a 0, #caf0a0 100%);
    background: -o-linear-gradient(left, #39b54a 0, #caf0a0 100%);
    background: -ms-linear-gradient(left, #39b54a 0, #caf0a0 100%);
    background: linear-gradient(to right, #39b54a 0, #caf0a0 100%);
  }
}

@media (min-width: 768px) {
  .dvh-80 {
    height: 80dvh !important;
  }
}

@media (max-width: 844px) {
  .navbar-area {
    background-color: rgba(4, 77, 183, .6);
    backdrop-filter: blur(40px);

    & #logo {
      height: 50px;
    }
  }

  .base-section {
    padding: 3.5rem 0;

    & h2 {
      font-size: 1.8rem;
    }
  }

  .icon-eduassistant {
    width: 100%;
    height: auto;
    background: none;

    & .info {
      position: relative;
      max-width: 100%;

      & .line {
        display: none;
      }
    }

    & .info.ps2,
    & .info.ps3,
    & .info.ps4,
    & .info.ps5 {
      top: inherit;
      left: inherit;
      right: inherit;
      bottom: inherit;
      text-align: center;
    }
  }

  .col-lg-3:first-child .circle::after,
  .col-lg-3:first-child .circle::before {
    display: block;
  }

  footer {
    text-align: center;

    & h3 {
      font-size: 3rem;
    }

    & .nav {
      text-align: center;
      flex-direction: inherit;
      justify-content: center;
      margin: 2rem 0;
      flex-wrap: inherit;
    }
  }

  .img-partner {
    max-width: 350px;
    filter: none;
    margin-top: 2rem;
  }
}

@media (max-width: 1180px) {
  .circle {
    width: 50px;
    height: 50px;
    margin-bottom: 13px;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 120px;
  }

  .circle {
    width: 25px;
    height: 25px;
    margin: 6px 13px 6px 0;
  }

  .img-partner {
    max-width: 100%;
  }
}