/*
0-600px : Phone
600px-900px : Tablet portrait
900px-1200px : Tablet landscape
1200-1800 : Normal style
1800px + : Big desktop

$breakpoint argument choices ::after
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typo > general layout + grid > page layout > components

1em = 16px
*/
*,
*::after,
*::before {
  padding: 0px;
  box-sizing: inherit;
  margin: 0; }

html {
  font-size: 10px; }
  @media (min-width: 112.5em) {
    html {
      font-size: 12px; } }
  @media (max-width: 75em) {
    html {
      font-size: 8px; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 6px; } }

body {
  box-sizing: border-box; }

@keyframes bg-slide {
  0% {
    background-position: -100%; }
  100% {
    background-position: 0%; } }

@keyframes animate-bg {
  0% {
    background-position: left; }
  100% {
    background-position: right; } }

@keyframes animate-caroussel {
  0% {
    opacity: 1; }
  30% {
    opacity: 1; }
  33% {
    opacity: 0; }
  97% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes animate-caroussel-1 {
  0% {
    opacity: 0; }
  30% {
    opacity: 0; }
  33% {
    opacity: 1; }
  62% {
    opacity: 1; }
  65% {
    opacity: 0; }
  100% {
    opacity: 0; } }

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.7; }

.heading-primary {
  font-size: 10rem;
  font-weight: 500;
  text-align: center;
  background-image: linear-gradient(to right, #9f1627, #cc028c, #b538c8, #035bb4, #0eb9c6, #5fc495, #e2c406 50%, #e2c406 50%, #5fc495, #0eb9c6, #05abe2, #035bb4, #b538c8, #cc028c, #9f1627);
  background-position: -100%;
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: 2rem;
  animation: bg-slide 4s alternate infinite ease-in-out;
  z-index: -1; }
  @media (max-width: 37.5em) {
    .heading-primary {
      font-size: 6rem;
      letter-spacing: .5rem; } }

.heading-secondary {
  background-image: linear-gradient(to right, #e2c406 30%, #5fc495, #0eb9c6, #05abe2, #035bb4, #b538c8, #cc028c, #9f1627 75%);
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  position: relative;
  font-size: 9rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  letter-spacing: .6rem;
  margin-bottom: 3rem; }
  @media (max-width: 37.5em) {
    .heading-secondary {
      font-size: 5rem;
      letter-spacing: .4rem; } }

.heading-tertiary {
  background-image: linear-gradient(to right bottom, #035bb4, #05abe2, #0eb9c6);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 4rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  letter-spacing: .4rem;
  margin-top: 5rem;
  margin-bottom: 2rem; }
  @media (max-width: 37.5em) {
    .heading-tertiary {
      font-size: 3rem;
      letter-spacing: .3rem; } }

.paragraph-main {
  font-size: 2.5rem;
  letter-spacing: .3rem;
  text-align: justify;
  color: #035bb4;
  margin-top: 1rem; }
  .paragraph-main a {
    color: #035bb4; }

.legal {
  font-size: 2rem;
  letter-spacing: .2rem;
  text-align: justify;
  color: #fafafa;
  margin-top: 1rem;
  text-decoration: none;
  transition: .3s ease-in-out; }
  @media (max-width: 37.5em) {
    .legal {
      font-size: 1.5rem; } }
  .legal:hover {
    transform: skewY(1deg) scale(1.05); }
  .legal__title {
    font-size: 3rem;
    font-weight: 500;
    color: #035bb4;
    letter-spacing: .3rem;
    padding: 1rem 0rem;
    margin-top: 2rem; }
    @media (max-width: 37.5em) {
      .legal__title {
        padding: 1rem 0rem; } }
  .legal__text {
    font-size: 2rem;
    color: #035bb4;
    letter-spacing: .2rem; }

.u-center-text {
  text-align: center; }

.u-margin-bottom-big {
  margin-bottom: 8rem; }

.u-margin-bottom-medium {
  margin-bottom: 4rem; }

.u-margin-bottom-small {
  margin-bottom: 1rem; }

.logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 15rem;
  aspect-ratio: 1;
  z-index: 100;
  border-radius: 50%;
  margin: 2rem;
  cursor: pointer; }
  .logo__p {
    --logo-size: 15rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20%;
    aspect-ratio: 1;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--logo-size) * 0.1) #5fc495;
    z-index: 100;
    transition: .5s ease-in; }
    .logo__p::after {
      content: "";
      height: 200%;
      aspect-ratio: 1/4;
      background-color: #5fc495;
      position: absolute;
      top: 50%;
      left: -50%; }
  .logo__l {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    aspect-ratio: 1;
    background-color: #05abe2;
    clip-path: polygon(0 0, 16.667% 0, 16.667% 83.333%, 100% 83.333%, 100% 100%, 0 100%);
    z-index: 98; }
  .logo__x {
    height: 90%;
    width: 10%;
    background-color: #035bb4;
    transition: transform 0.9s 0.5s cubic-bezier(0, 0.92, 0.95, 1.1); }
    .logo__x--m45deg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform: translate(-50%, -50%) rotate(-45deg);
      z-index: 99; }
    .logo__x--p45deg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform: translate(-50%, -50%) rotate(45deg);
      z-index: 97; }
    .logo__x__half-top--p45deg {
      z-index: 101;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform: translate(-50%, -50%) rotate(45deg); }

.logo:hover .logo__p {
  transform: translate(-50%, -50%) rotate(360deg); }

.logo:hover .logo__x--m45deg {
  transform: translate(-50%, -50%) rotate(-45deg) rotate(270deg); }

.logo:hover .logo__x--p45deg {
  transform: translate(-50%, -50%) rotate(45deg) rotate(270deg); }

.logo:hover .logo__x__half-top--p45deg {
  transform: translate(-50%, -50%) rotate(45deg) rotate(270deg); }

.logo-card {
  position: relative;
  width: 10rem;
  aspect-ratio: 1;
  z-index: 100;
  border-radius: 50%;
  margin: 3rem;
  cursor: pointer; }
  .logo-card__p {
    --logo-size: 10rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20%;
    aspect-ratio: 1;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--logo-size) * 0.1) #5fc495;
    z-index: 100; }
    .logo-card__p::after {
      content: "";
      height: 200%;
      aspect-ratio: 1/4;
      background-color: #5fc495;
      position: absolute;
      top: 50%;
      left: -50%; }
  .logo-card__l {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    aspect-ratio: 1;
    background-color: #05abe2;
    clip-path: polygon(0 0, 16.667% 0, 16.667% 83.333%, 100% 83.333%, 100% 100%, 0 100%);
    z-index: 98; }
  .logo-card__x {
    height: 90%;
    width: 10%;
    background-color: #035bb4;
    transition: transform 0.9s 0.5s cubic-bezier(0, 0.92, 0.95, 1.1); }
    .logo-card__x--m45deg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform: translate(-50%, -50%) rotate(-45deg);
      z-index: 99; }
    .logo-card__x--p45deg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform: translate(-50%, -50%) rotate(45deg);
      z-index: 97; }
    .logo-card__x__half-top--p45deg {
      z-index: 101;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform: translate(-50%, -50%) rotate(45deg); }

.video {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5rem; }
  .video__item {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column; }
  .video__image {
    height: 50rem; }
    @media (max-width: 37.5em) {
      .video__image {
        height: 30rem; } }

.card {
  width: 60rem;
  height: 40rem;
  z-index: 50;
  border-radius: 3rem;
  margin: 0 auto;
  background-image: linear-gradient(to right bottom, #9f1627, #cc028c, #b538c8);
  box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(42, 42, 42, 0.7);
  display: grid;
  grid-template: "b a a" "c c c" "c c c"; }
  @media (max-width: 37.5em) {
    .card {
      width: 55rem;
      height: 38rem; } }
  .card__item {
    display: grid;
    place-items: center; }
    .card__item--left {
      grid-area: b; }
    .card__item--top-right {
      grid-area: a; }
      .card__item--top-right__title {
        color: #fafafa;
        text-align: center;
        font-size: 3rem;
        font-weight: 500;
        letter-spacing: .8rem; }
    .card__item--bottom-right {
      grid-area: c; }
      .card__item--bottom-right__mail {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 2rem; }
        .card__item--bottom-right__mail__text {
          position: relative;
          color: #fafafa;
          text-align: center;
          font-size: 2.5rem;
          font-weight: 300;
          letter-spacing: .5rem; }
          @media (max-width: 37.5em) {
            .card__item--bottom-right__mail__text {
              font-size: 2rem; } }
        .card__item--bottom-right__mail__logo {
          position: relative;
          background-repeat: no-repeat;
          height: 3rem;
          width: 3rem;
          filter: invert(1); }
          .card__item--bottom-right__mail__logo--mail {
            background-image: url(/img/envelope-solid.svg); }
          .card__item--bottom-right__mail__logo--phone {
            background-image: url(/img/phone-solid.svg); }

.hamburger {
  position: fixed;
  right: 5rem;
  top: 5rem;
  z-index: 1001;
  background: radial-gradient(#0eb9c6, #05abe2, #035bb4);
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  box-shadow: 0.1rem 0.3rem 0.3rem 0 rgba(42, 42, 42, 0.7);
  transition: .4s ease-in-out;
  cursor: pointer; }
  .hamburger__button {
    position: fixed;
    right: 5rem;
    top: 5rem;
    z-index: 1002;
    height: 10rem;
    width: 10rem;
    pointer-events: none; }
    .hamburger__button__item {
      height: .5rem;
      width: 50%;
      background-color: #fafafa;
      position: absolute;
      border-radius: 3rem;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.7); }
      .hamburger__button__item:nth-of-type(2) {
        top: 37%;
        width: 60%; }
      .hamburger__button__item:nth-of-type(3) {
        top: 63%;
        width: 60%; }

.hamburger__checkbox {
  display: none; }

.hamburger:hover ~ .hamburger__button .hamburger__button__item:nth-of-type(2) {
  top: 32%; }

.hamburger:hover ~ .hamburger__button .hamburger__button__item:nth-of-type(3) {
  top: 68%; }

.hamburger__checkbox:checked ~ .hamburger__button .hamburger__button__item:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0; }

.hamburger__checkbox:checked ~ .hamburger__button .hamburger__button__item:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg); }

.hamburger__checkbox:checked ~ .hamburger__button .hamburger__button__item:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg); }

.hamburger__checkbox:checked ~ .hamburger {
  scale: 30;
  opacity: .8; }

.hamburger__checkbox:checked ~ .navigation {
  visibility: visible;
  opacity: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh; }

.contact__form {
  width: 100%;
  display: flex;
  gap: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem; }
  .contact__form__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: .5rem; }
    .contact__form__item__text {
      font-size: 2rem;
      letter-spacing: .2rem;
      color: #fafafa; }
    .contact__form__item__name, .contact__form__item__email, .contact__form__item__message {
      font-size: 1.5rem;
      letter-spacing: .1rem;
      border-radius: 1rem; }
    .contact__form__item__name, .contact__form__item__email {
      width: 30rem;
      padding: .5rem;
      text-align: center; }
    .contact__form__item__message {
      padding: 2rem;
      width: 60%;
      height: 30rem;
      text-align: justify; }
    .contact__form__item__send {
      padding: .8rem 1rem;
      border-radius: 1rem;
      transition: .2s ease-in-out;
      cursor: pointer;
      font-size: 2rem; }
      .contact__form__item__send:hover {
        transform: scale(1.05); }

.header {
  position: relative;
  height: 50vh;
  height: 50dvh;
  display: grid;
  place-items: center; }

.services {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10rem; }
  .services__flex-container {
    background-color: #fafafa;
    width: 100%;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    -webkit-clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    padding: 0 8rem 5rem 8rem; }

.navigation {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  height: 50vh;
  height: 50dvh;
  width: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5rem;
  transition: .3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; }
  .navigation__link {
    position: relative;
    text-decoration: none;
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7rem;
    color: transparent;
    opacity: 1;
    transition: background-position .4s ease-out;
    background-image: linear-gradient(to right, #e2c406, #5fc495, #035bb4, #b538c8, #cc028c, #9f1627 50%, #fafafa 50%, #fafafa);
    background-position: -100%;
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    pointer-events: visible; }
    @media (max-width: 37.5em) {
      .navigation__link {
        width: 100%;
        text-align: center; } }
    .navigation__link:hover {
      background-position: -200%; }

.logo:hover .navigation {
  width: 130rem; }
  @media (max-width: 37.5em) {
    .logo:hover .navigation {
      width: 90vw; } }

.logo:hover .navigation__link {
  opacity: 1;
  background-color: rgba(3, 91, 180, 0.3); }

.cookies {
  background-color: #fafafa;
  padding: 5rem;
  position: fixed;
  bottom: 0;
  z-index: 0;
  border-top: 0.2rem solid #035bb4; }
  .cookies__text {
    color: #035bb4;
    font-size: 2rem; }
  .cookies__button {
    cursor: pointer;
    background-color: #035bb4;
    color: #fafafa;
    width: 5rem;
    font-size: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    padding: 1rem;
    margin: 0 auto; }

.footer {
  flex-wrap: wrap; }
  .footer__item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center; }
    .footer__item:nth-of-type(2) {
      flex-grow: 1; }
  @media (max-width: 37.5em) {
    .footer__img {
      height: 10rem; } }
  .footer__copyright {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    margin-top: 2rem; }

.parallax {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px; }
  .parallax__header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 100;
    z-index: -1; }
  .parallax__title {
    font-size: 4rem;
    color: #aaa;
    letter-spacing: .4rem; }
  .parallax__img {
    position: absolute;
    height: 100%;
    z-index: -1; }
  .parallax__background {
    object-fit: cover;
    width: 100%;
    transform: translateZ(-10px) scale(2.1); }
  .parallax__description {
    font-size: 3rem;
    font-weight: 700;
    color: #aaa;
    text-shadow: .3rem .3rem black;
    letter-spacing: .1rem;
    padding: 10rem;
    text-align: center;
    display: flex;
    gap: 5rem; }
    @media (max-width: 37.5em) {
      .parallax__description {
        flex-direction: column;
        gap: 20rem; } }
    .parallax__description__item {
      width: 50%;
      border-radius: 1rem; }
      @media (max-width: 37.5em) {
        .parallax__description__item {
          width: 100%; } }
    .parallax__description__paragraph {
      padding: 2rem;
      color: #fafafa;
      letter-spacing: .2rem; }
    .parallax__description__caroussel {
      position: relative; }
      .parallax__description__caroussel__item {
        width: 100%;
        object-fit: contain;
        border-radius: 1rem;
        position: absolute;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .parallax__description__caroussel__item:nth-of-type(2) {
          animation: animate-caroussel-1 21s linear infinite; }
        .parallax__description__caroussel__item:nth-of-type(3) {
          animation: animate-caroussel 21s linear infinite; }

.section-about {
  background-color: #fafafa;
  padding: 8rem 15rem; }
  @media (max-width: 37.5em) {
    .section-about {
      padding: 8rem 5rem; } }

.section-services, .section-contact {
  padding: 8rem 15rem;
  background-image: radial-gradient(circle at 0% 0%, #0eb9c6, transparent 30%), radial-gradient(circle at 100% 0%, #0eb9c6, transparent 30%), radial-gradient(circle at 50% 100%, #05abe2, transparent 30%), linear-gradient(to right bottom, #035bb4, black, #035bb4);
  background-size: 200%;
  background-position: left;
  animation: animate-bg 5s alternate ease-in-out infinite; }
  @media (max-width: 37.5em) {
    .section-services, .section-contact {
      padding: 8rem 2rem;
      animation: none; } }

.section-portfolio {
  background: #fafafa;
  padding: 8rem 15rem; }
  @media (max-width: 37.5em) {
    .section-portfolio {
      padding: 8rem 5rem; } }

.section-contact {
  position: relative;
  padding: 8rem 15rem; }
  @media (max-width: 37.5em) {
    .section-contact {
      padding: 8rem 1rem; } }

.section-legal, .section-confidential {
  background: #fafafa;
  padding: 8rem 15rem; }
  @media (max-width: 37.5em) {
    .section-legal, .section-confidential {
      padding: 8rem; } }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  background: radial-gradient(#0eb9c6, #05abe2, #035bb4);
  padding: 3rem 8rem;
  margin-top: -3px; }
  @media (max-width: 37.5em) {
    .footer {
      padding: 3rem 3rem; } }