:root {
  --blue-king: #12499a;
  --dark-blue-king: #113a78;
  --extreme-dark-blue-king: #133b72;
  --blue-hover: #0d274e;
  --just-white: #fff;
  --gray-separator: #bbb;
  --elegant-gray: #808080;
  --shadow-elegant-gray: #606060;
  --naranja-br: #f28705;
}

@media (min-width: 801px) {
  /* ---------------------------------------------------------------
------------------------ HEADER -------------------------------
--------------------------------------------------------------- */
  .header-title {
    height: 545px;
    width: 100%;
    background-image: url(../Assets/images/pc/header-bead.webp);
  }

  .header-nav {
    display: inline-flex;
    padding: 0px 30px;
    position: fixed;
  }
  .header-navbar {
    display: contents;
    position: relative;
    justify-self: end;
    display: contents;
  }
  .header-navbar ul {
    margin-right: 18px;
    list-style: none;
    float: right;
  }

  .header-navbar li {
    display: inline-flex;
    background-color: var(--blue-king);
    margin: 0 2px;
  }

  .header-navbar li a {
    text-decoration: none;
    padding: 20px;
    color: rgb(255, 255, 255);
  }

  .header-navbar li a:hover {
    background-color: rgb(74, 163, 253);
    color: #00255c;
  }

  #check-navbar {
    display: none;
  }
  .button-responsive-menu {
    display: none;
  }

  /* ---------------------------------------------------------------
  -------------------TEXTO Y BOTON del HEADER ----------------------
  --------------------------------------------------------------- */

  .header-title .header-title--capa {
    height: 360px;
  }

  .header-title h1 {
    font-size: 5rem;
    line-height: 4rem;
    bottom: 160px;
    /* left: calc(50% - 420px); */
  }
  .header-title p {
    font-size: 3.2rem;
    line-height: 2.8rem;
    width: 500px;
    bottom: 160px;
    /* left: calc(50% - 420px); */
  }

  /* @media (max-width: 1000px) {
    .header-title h1 {
      left: calc(50% - 370px);
    }
    .header-title p {
      left: calc(50% - 370px);
    }
  } */
  /* ---------------------------------------------------------------
--------------------------- MAIN ---------------------------------
--------------------------------------------------------------- */

  @media (min-width: 885px) {
    .header--title__body {
      position: relative;
      right: 18%;
      animation-name: slide-title;
      animation-duration: 1s;
    }
  }
  header .header--button {
    font-size: 3rem;
    position: absolute;
    width: 220px;
    height: 55px;
    margin: -300px calc(58%);
    margin-bottom: 15px;
    -webkit-box-shadow: -1px 2px 20px 4px rgba(0, 0, 0, 0.98);
    box-shadow: -1px 2px 20px 4px rgba(0, 0, 0, 0.98);
    padding-top: 9px;
  }

  /*----------------------------------------------------------------
--------------------- section SERVICES ---------------------------
--------------------------------------------------------------- */

  .main-section-services {
    position: relative;
    top: 30px;
  }

  .services-cards-container {
    padding: 15px;
    display: flex;
    height: 316px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
}

@media (min-width: 1280px) {
  .services-cards-container {
    justify-content: center;
    scrollbar-width: none;
  }

  .main-section-services .section-services-separator-down {
    position: relative;
    top: -70px;
  }
}

.services-card {
  margin: 0 30px;
}

/*----------------------------------------------------------------
--------------------- section EVENTOS ------------------------------
--------------------------------------------------------------- */

.event-container {
  display: flex;
}

.event-container .event-body {
  width: 250px;
  position: relative;
  top: 40px;
  left: 30px;
}

.event-body h2 {
  font-size: 4rem;
}
.event-body p {
  font-size: 2rem;
}

.event-container .seminarios {
  position: relative;
  left: 260px;
}

.event-container .right-body {
  position: relative;
  left: -520px;
}