:root {
  --neutral-400: hsl(0, 0%, 9%);
  --neutral-300: hsl(0, 0%, 31%);
  --neutral-200: hsl(0, 1%, 0%);
  --neutral-100: hsl(0, 1%, 100%);
  --primary-100: #6bbeab;
  --primary-200: #f4af91;
  --secondary-100: #005ea8;
  --secondary-200: #5386c0;
  --secondary-300: #e9f8ff;
  --grey-cursor: var(--neutral-300);
  --dark: var(--neutral-200);
  --white: var(--neutral-100);
  --green: var(--primary-100);
  --orange: var(--primary-200);
  --dark-blue: var(--secondary-100);
  --light-blue: var(--secondary-200);
  --very-light-blue: var(--secondary-300);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

ul,
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
  font-family: sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

img:not([alt]) {
  filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  background-color: var(--very-light-blue);
  display: flex;
  flex-direction: column;
}

.nav {
  margin: 2rem;
}

.header {
  width: 100vw;
  height: 100%;
  margin-bottom: 8rem;
}

@media (max-width: 1024px) {
  .header {
    margin-top: 20rem;
  }
}
.header__BigTitle {
  color: var(--dark-blue);
  font-size: 4rem;
  margin-bottom: 4rem;
  margin-right: 4rem;
  text-align: end;
}
@media (max-width: 800px) {
  .header__BigTitle {
    font-size: 2rem;
  }
}
.header__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.header__container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0rem 12rem;
  gap: 2rem;
}
@media (max-width: 1200px) {
  .header__container {
    flex-direction: column;
    margin: 0rem 4rem;
  }
}
.header__right-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
.header__img {
  position: relative;
  z-index: -1;
}
.header__img::before {
  content: "";
  position: absolute;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  width: 6rem;
  height: 6rem;
  bottom: -20px;
  left: -20px;
  z-index: 10;
}
.header__title {
  font-size: 5rem;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: var(--very-light-blue);
  font-weight: bold;
  margin-left: -6rem;
  line-height: 6rem;
}
@media (max-width: 1200px) {
  .header__title {
    margin-left: 0rem;
    font-size: 2rem;
    line-height: 3rem;
  }
}
.header__subtitle {
  font-size: 2rem;
  color: var(--orange);
}
.header__text {
  color: var(--light-blue);
}

.speech {
  display: flex;
  flex-direction: column;
  width: 100vw;
  background-color: var(--white);
  padding: 2rem 0rem;
}
.speech__title {
  margin-left: 4rem;
  margin-right: 4rem;
  text-align: end;
  font-size: 4rem;
  margin-bottom: 10rem;
  position: relative;
  width: fit-content;
  color: var(--dark-blue);
}
@media (max-width: 800px) {
  .speech__title {
    font-size: 2rem;
  }
}
.speech__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.speech__span::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -10px;
  width: 8rem;
  height: 2rem;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.speech__container {
  display: flex;
  gap: 4rem;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.speech__card-contain {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 700px) {
  .speech__card-contain {
    flex-direction: column;
  }
}
.speech__text-contain {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.speech__text-title {
  font-size: 2rem;
  color: var(--dark-blue);
}
.speech__text-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--orange);
}
.speech__text-word {
  font-size: 1rem;
  color: var(--light-blue);
}
.speech__svg {
  fill: var(--dark-blue);
}
.speech__btn-text {
  text-decoration: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  padding: 1rem 2rem;
  color: var(--dark-blue);
  border: 2px solid var(--green);
  background-color: var(--white);
  position: relative;
}
.speech__btn-text::after {
  content: "";
  position: absolute;
  background-color: var(--green);
  width: 100%;
  height: 100%;
  z-index: -1;
  bottom: 0px;
  left: 0px;
  transition: bottom 0.3s, left 0.3s;
}
.speech__btn-text:hover::after {
  bottom: -10px;
  left: 10px;
  transition: bottom 0.3s, left 0.3s;
}

.summary {
  margin: 6rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: end;
}
.summary__title {
  text-align: center;
  margin-right: 8rem;
  font-size: 4rem;
  margin-bottom: 10rem;
  position: relative;
  width: fit-content;
  color: var(--dark-blue);
}
@media (max-width: 800px) {
  .summary__title {
    font-size: 2rem;
  }
}
.summary__title::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -10px;
  width: 8rem;
  height: 2rem;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.summary__line {
  width: 100%;
  height: 2px;
  background-color: var(--green);
  margin-bottom: 6.5rem;
  position: relative;
}
@media (max-width: 1200px) {
  .summary__line {
    margin-bottom: 3.5rem;
  }
}
.summary__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.summary__contain {
  width: 80%;
}
@media (max-width: 800px) {
  .summary__contain {
    width: 100%;
  }
}
.summary__month {
  flex: 0 0 100%;
  opacity: 0.5;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: row;
  gap: 4rem;
}
@media (max-width: 1400px) {
  .summary__month {
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    width: 100%;
  }
}
.summary__img {
  margin-left: 5rem;
  position: relative;
}
@media (max-width: 1200px) {
  .summary__img {
    margin-left: 0rem;
  }
}
.summary__absolute {
  position: relative;
  display: flex;
  align-items: center;
}
.summary__absolute::before {
  content: var(--month);
  position: absolute;
  top: -30%;
  left: 15%;
  color: var(--dark-blue);
  font-size: 3rem;
}
@media (max-width: 1200px) {
  .summary__absolute::before {
    font-size: 1.5rem;
    top: -20%;
  }
}
.summary__absolute::after {
  content: "";
  position: absolute;
  top: -35%;
  left: 25%;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--green);
  background-color: var(--very-light-blue);
}
.summary__left-contain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.summary__left-title {
  color: var(--dark-blue);
}
.summary__left-subtitle {
  font-size: 1rem;
  color: var(--orange);
}
.summary__left-text {
  width: 30rem;
  color: var(--light-blue);
}
@media (max-width: 1200px) {
  .summary__left-text {
    font-size: 0.75rem;
    width: 20rem;
  }
}

.carousel-container {
  position: relative;
  max-width: 100%;
}

.summary__contain {
  list-style: none;
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item.active {
  opacity: 1;
}

.highlight__btn-carrousel {
  position: absolute;
  top: 85%;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  background-color: var(--green);
  padding: 1rem 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  z-index: 10;
  height: fit-content;
}
@media (max-width: 800px) {
  .highlight__btn-carrousel {
    top: 34%;
  }
}

.highlight__btn-carrousel::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid var(--green) 2px;
  bottom: 0px;
  left: 0px;
  transition: bottom 0.3s, left 0.3s;
  z-index: 10;
}

.highlight__btn-carrousel:hover::after {
  bottom: -10px;
  left: 10px;
  transition: bottom 0.3s, left 0.3s;
  z-index: 10;
}

.carousel-SVG {
  width: 2rem;
}
@media (max-width: 800px) {
  .carousel-SVG {
    width: 1rem;
  }
}

.prevBtn {
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.nextBtn {
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.highlight {
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--white);
  padding: 5rem 0rem;
}
.highlight__title {
  margin-left: 4rem;
  margin-right: 4rem;
  text-align: end;
  font-size: 4rem;
  margin-bottom: 10rem;
  position: relative;
  width: fit-content;
  color: var(--dark-blue);
}
@media (max-width: 800px) {
  .highlight__title {
    font-size: 2rem;
  }
}
.highlight__title::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -10px;
  width: 8rem;
  height: 2rem;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.highlight__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.highlight__contain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  width: 100%;
  gap: 6rem;
}
.highlight__card {
  width: min-content;
  height: min-content;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.highlight__img-contain {
  position: relative;
  padding: 2rem;
}
.highlight__img-contain::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
  top: 0px;
  left: 0px;
  transition: all 0.5s;
}
.highlight__img-contain::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
  bottom: 0px;
  right: 0px;
  transition: all 0.5s;
}
.highlight__svg-absolute {
  position: absolute;
  top: 45%;
  left: 45%;
}
@media (max-width: 800px) {
  .highlight__svg-absolute {
    top: 40%;
    left: 40%;
  }
}
.highlight__card:hover .highlight__text-contain::before,
.highlight__card:hover .highlight__text-contain::after,
.highlight__card:hover .highlight__img-contain::after,
.highlight__card:hover .highlight__img-contain::before {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  z-index: -2;
  cursor: pointer;
}
.highlight__img {
  width: min-content;
  height: min-content;
}
.highlight__text-contain {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding: 2rem;
  text-decoration: none;
}
.highlight__text-contain::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
  bottom: 0px;
  right: 0px;
  transition: all 0.5s;
}
.highlight__text-contain::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
  top: -2px;
  left: 0px;
  transition: all 0.5s;
}
.highlight__subtitle {
  color: var(--orange);
}
.highlight__text {
  color: var(--light-blue);
}

.dimmed {
  opacity: 0.5;
  transition: all 0.5s;
  cursor: pointer;
}

.KeyNumber {
  margin: 5rem 0rem 5rem 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  gap: 6rem;
}
.KeyNumber__title {
  margin-right: 8rem;
  text-align: end;
  font-size: 4rem;
  margin-bottom: 10rem;
  position: relative;
  width: fit-content;
  color: var(--dark-blue);
  margin-bottom: 3rem;
}
@media (max-width: 800px) {
  .KeyNumber__title {
    font-size: 2rem;
  }
}
.KeyNumber__title::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -10px;
  width: 8rem;
  height: 2rem;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.KeyNumber__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.KeyNumber__contain {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  gap: 6rem;
  flex-wrap: wrap;
}
.KeyNumber__card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  width: 15rem;
}
.KeyNumber__svg {
  width: 180px;
}
.KeyNumber__text {
  text-align: center;
  color: var(--light-blue);
}
.KeyNumber__subtitle {
  font-size: 3rem;
  color: var(--orange);
  background-color: var(--white);
  padding: 1rem 1rem;
}
.KeyNumber__span-subtitle {
  font-size: 1rem;
  font-weight: bold;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--orange);
  color: transparent;
}
.KeyNumber__button-contain {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.KeyNumber__button {
  text-decoration: none;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  background-color: var(--green);
  color: var(--very-light-blue);
  position: relative;
}
@media (max-width: 800px) {
  .KeyNumber__button {
    text-align: center;
    font-size: 1rem;
    width: 80%;
  }
}
.KeyNumber__button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--green);
  bottom: 0;
  right: 0;
  transition: all 0.3s;
}
.KeyNumber__button:hover::after {
  bottom: -10px;
  right: -10px;
  transition: all 0.3s;
}

.publication {
  margin-top: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 6rem;
  margin-bottom: 4rem;
}
.publication__title {
  margin-right: 8rem;
  margin-left: 4rem;
  text-align: end;
  font-size: 4rem;
  margin-bottom: 10rem;
  position: relative;
  width: fit-content;
  color: var(--dark-blue);
  margin-bottom: 3rem;
}
@media (max-width: 800px) {
  .publication__title {
    font-size: 2rem;
  }
}
.publication__title::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -10px;
  width: 8rem;
  height: 2rem;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.publication__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.publication__contain {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8rem;
  flex-wrap: wrap;
}
.publication__object {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1rem;
  transition: all 0.5s;
}
.publication__object::after {
  content: "";
  position: absolute;
  width: 10%;
  height: 10%;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
  right: 0;
  bottom: 0;
  transition: all 0.3s;
}
.publication__object::before {
  content: "";
  position: absolute;
  width: 10%;
  height: 10%;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
  left: 0;
  top: 0;
  transition: all 0.3s;
}
.publication__object:hover::before,
.publication__object:hover::after {
  width: 100%;
  height: 100%;
}
.publication__img {
  margin-bottom: 2rem;
}
.publication__subtitle {
  font-size: 1rem;
  text-align: center;
  color: var(--orange);
}

.number {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6rem;
}
.number__title {
  font-size: 4rem;
  margin-bottom: 10rem;
  position: relative;
  width: fit-content;
  color: var(--dark-blue);
  margin-right: 8rem;
  margin-bottom: 3rem;
  margin-left: 4rem;
  text-align: end;
}
@media (max-width: 800px) {
  .number__title {
    font-size: 2rem;
  }
}
.number__title::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -10px;
  width: 8rem;
  height: 2rem;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.number__span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
  font-weight: bold;
}
.number__BigContain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  margin-bottom: 6rem;
}
.number__SvgTitle-contain {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.number__subtitle {
  font-size: 2rem;
  font-weight: bolder;
  color: var(--dark-blue);
}
.number__contain {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10rem;
  margin: 0.5rem;
}
.number__card {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  cursor: pointer;
  width: 20rem;
  height: 100%;
  position: relative;
  padding: 2rem;
  align-items: center;
}
.number__card::before {
  content: "";
  position: absolute;
  width: 40%;
  height: 40%;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
  top: 0px;
  left: 0px;
  transition: all 0.5s;
}
.number__card::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 40%;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
  bottom: 0;
  right: 0;
  transition: all 0.5s;
}
.number__card.rotate {
  background-color: var(--white);
}
.number__card.rotate::before,
.number__card.rotate::after {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  z-index: 2;
}
.number__card-title {
  text-align: center;
  color: var(--dark-blue);
  font-size: 2rem;
  background-color: var(--white);
  padding: 0.5rem 1rem;
}
.number__card-title.rotate {
  background-color: var(--dark-blue);
  color: var(--white);
  transition: all 0.5s;
}
.number__card-span {
  font-size: 1.25rem;
  font-weight: bold;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--dark-blue);
  color: transparent;
}
.number__card-span.rotate {
  color: var(--white);
  transition: all 0.5s;
}
.number__card-text {
  color: var(--light-blue);
}
.number__plus-cross {
  background-color: var(--orange);
  width: 2rem;
  height: 3px;
  position: relative;
}
.number__plus-cross::before {
  content: "";
  position: absolute;
  background-color: var(--orange);
  width: 2rem;
  height: 3px;
  left: 0;
  rotate: 90deg;
  transition: all 0.5s;
}
.number__plus-cross.rotate::before {
  transform: rotate(-90deg);
  transition: all 0.3s;
}
.number__plus {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.number__card-footer {
  width: 100%;
  overflow: hidden;
  transition: opacity 0.2s, max-height 1s;
  max-height: 0;
  opacity: 0;
}
.number__card-footer.show {
  transition: opacity 0.2s, max-height 2s;
  max-height: 600px;
  opacity: 1;
}
.number__card-paragraph {
  color: var(--dark-blue);
  text-align: left;
}
.number .first-child {
  width: 12rem;
}
.number__img-title {
  width: 6rem;
}

.back__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  top: 85%;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  background-color: var(--green);
  padding: 1rem 2rem;
  margin-left: 4rem;
  margin-right: 2rem;
  z-index: 10;
}
.back__btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid var(--green) 2px;
  bottom: 0px;
  left: 0px;
  transition: bottom 0.3s, left 0.3s;
  z-index: 10;
}
.back__btn:hover::after {
  bottom: -10px;
  left: 10px;
  transition: bottom 0.3s, left 0.3s;
  z-index: 10;
}

.speech__title,
.highlight__title,
.KeyNumber__title,
.KeyNumber__contain,
.publication__contain {
  transform: translateX(-500px);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.speech__card-contain,
.highlight__contain,
.summary,
.KeyNumber__button,
.publication__title {
  transform: translateX(500px);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.highlight.parallax-active .highlight__title,
.highlight.parallax-active .highlight__contain,
.speech.parallax-active .speech__card-contain,
.speech.parallax-active .speech__title,
.summary.parallax-active,
.KeyNumber.parallax-active .KeyNumber__title,
.KeyNumber.parallax-active .KeyNumber__contain,
.KeyNumber.parallax-active .KeyNumber__button,
.publication.parallax-active .publication__title,
.publication.parallax-active .publication__contain {
  transform: translateX(0px);
  opacity: 1;
}

/*# sourceMappingURL=style.css.map */