/* ===== INTRODUCTION SECTION ==== */

.introduction {
  background: var(--light);
  outline: 1.25rem solid var(--green);
  outline-offset: -1.25rem;
  /* display: none; */
}

.introduction .content {
  max-width: 75.625rem;
  width: 100%;
  margin: 0 auto;
}

.logo {
  width: 94px;
  height: auto;
  margin-top: 2.5rem;
  margin-left: 2.9375rem;
  text-decoration: none;
}

.link_introduction {
  margin-top: 3rem;
  margin-right: 3.4375rem;
}

.heading {
  width: 31.75rem;
  height: 27.0625rem;
  margin-top: 2.6875rem;
  display: flex;
  align-items: end;
}

.texts {
  display: flex;
  flex-direction: column;
  margin-right: 2.3125rem;
}

.text_field {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 4.4375rem;
  width: 100%;
  max-width: 33.125rem;
  height: auto;
}

.scratch {
  height: 2.81rem;
  width: auto;
}

.text_content {
  margin-top: 0.1875rem;
  margin-left: 1rem;
  width: 90%;
}

.doodla_anim {
  height: 9.7vw;
  width: 19.8vw;
  margin-left: 4rem;
  margin-top: 2rem;
  position: relative;
}

.kolajnice {
  position: absolute;
  width: auto;
  height: 100%;
  bottom: 0;
  right: 0;
}

.vozik {
  position: absolute;
  width: 40%;
  height: auto;
  top: 0;
  left: 0;
  animation: jazdi 3s ease-in-out infinite;
}

/* ========== DOODLA ANIMATION ========== */
@keyframes jazdi {
  0% {
    top: 0;
    left: 0;
  }
  15% {
    top: 25%;
    left: 12%;
  }
  50% {
    top: -50%;
    left: 78%;
  }
  65% {
    top: -70%;
    left: 60%;
  }
}

.scrolluj {
  width: 4.1887rem;
  height: 5.6725rem;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: calc(50% - (4.1887rem / 2));
  bottom: 5rem;
}

.review {
  position: relative;
  color: var(--green);
  margin-left: 4.8125rem;
}

#review_1 {
  position: absolute;
  left: -4.375rem;
  top: calc(-5.375rem - 4.375rem - 4.375rem);
  color: var(--turquoise);
}

#review_2 {
  position: absolute;
  left: 0;
  top: calc(-5.375rem - 4.375rem);
}

#review_3 {
  position: absolute;
  left: 4.375rem;
  top: -5.375rem;
  color: var(--dark);
}

/* ========== RESPONSIVE ========= */
@media (orientation: landscape) and (max-width: 1300px) {
  .introduction .content {
    width: 95%;
  }

  .texts {
    margin-right: 0;
  }

  .scrolluj {
    bottom: 2.5rem;
  }
}

@media (orientation: landscape) and (max-width: 1220px) {
  .introduction .content {
    width: 90%;
    gap: 3rem;
  }

  .heading {
    margin-top: -1rem;
    margin-left: -2rem;
    scale: 0.9;
  }

  .text_field {
    margin-top: 2rem;
  }

  .text_content {
    width: 85%;
  }
}

@media (orientation: landscape) and (max-width: 1100px) {
  .heading {
    margin-top: -2rem;
    margin-left: -2rem;
    scale: 0.8;
  }

  .scratch {
    height: 4vw;
  }
}

@media (orientation: landscape) and (max-width: 1050px) {
  .text_content {
    width: 80%;
  }

  .heading {
    margin-left: -3rem;
  }

  .text_content {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: clamp(2rem, 3.8vw, 2.5rem);
  }
}

@media (orientation: landscape) and (max-width: 985px) {
  .introduction .content {
    gap: 0;
  }

  .text_content {
    width: 85%;
  }

  .heading {
    margin-left: -4rem;
    margin-top: -3.65rem;
    scale: 0.7;
  }
}

@media (orientation: landscape) and (max-width: 860px) {
  .heading {
    scale: 0.65;
    margin-left: -5rem;
  }
}

@media (orientation: landscape) and (max-width: 780px) {
  .heading {
    scale: 0.55;
    margin-left: -6.5rem;
    margin-top: -5rem;
  }

  .logo {
    margin-top: 1.5rem;
    margin-left: 2rem;
    width: 4.5rem;
  }

  .link_introduction {
    margin-top: 1.5rem;
    margin-right: 3rem;
  }
}

@media (orientation: landscape) and (max-width: 750px) {
  .heading {
    margin-left: -7rem;
  }

  .texts {
    margin-left: -2.5rem;
  }

  .text_content {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}

@media (orientation: landscape) and (max-width: 720px) {
  .introduction {
    outline: 0.625rem solid var(--green);
    outline-offset: -0.625rem;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .introduction {
    outline: 0.625rem solid var(--green);
    outline-offset: -0.6188rem;
  }

  .scrolluj {
    width: 3rem;
    height: auto;
    margin: 0 auto;
    margin-top: -2rem;
    display: block;
    position: sticky;
    left: calc(50% - (3.125rem / 2));
    bottom: 2rem;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .introduction .content {
    flex-direction: column;
    align-items: center;
  }

  .text_field {
    margin-top: 7rem;
  }

  .doodla_anim {
    height: 19.4vw;
    width: 39.6vw;
  }

  .scrolluj {
    bottom: 3rem;
  }
}

@media (orientation: portrait) and (max-width: 820px) {
  .introduction .content {
    flex-direction: column;
    align-items: center;
  }

  .heading {
    margin-top: -3rem;
    scale: 0.8;
  }

  .texts {
    margin-right: 0;
  }

  .text_field {
    margin-top: 1rem;
  }

  .doodla {
    margin-top: 1.5rem;
  }

  .scrolluj {
    bottom: 2rem;
  }
}

@media (orientation: portrait) and (max-width: 650px) {
  .introduction {
    outline: 0.625rem solid var(--green);
    outline-offset: -0.625rem;
  }

  .introduction .content {
    width: 85%;
  }

  .logo {
    margin-top: 1.75rem;
    margin-left: 2rem;
  }

  .link_introduction {
    margin-top: 2.5rem;
    margin-right: 3rem;
  }

  .heading {
    margin-left: -1rem;
  }

  .text_field {
    justify-content: space-between;
    margin-top: 1rem;
  }

  .text_content {
    width: 85%;
  }

  .doodla {
    margin-top: 2rem;
    margin-left: 5rem;
    height: auto;
    width: 40vw;
  }
}

@media (orientation: portrait) and (max-width: 490px) {
  .introduction .content {
    width: 85%;
  }

  .logo {
    margin-top: 1.5rem;
    margin-left: 1.5rem;
  }

  .link_introduction {
    margin-top: 2.5rem;
    margin-right: 2.5rem;
  }

  .heading {
    scale: 0.7;
    margin-top: -4.5rem;
  }

  .texts {
    margin-top: -2rem;
  }

  .text_field {
    margin-top: 1rem;
  }

  .text_content {
    width: 100%;
    margin: 0;
  }

  .scratch {
    display: none;
  }

  .doodla {
    margin: 0 auto;
    margin-top: 1rem;
    height: auto;
    width: 40vw;
  }

  .scrolluj {
    width: 3.125rem;
    height: auto;
    margin: 0 auto;
    display: block;
    position: absolute;
    left: calc(50% - (3.125rem / 2));
  }
}

@media (orientation: portrait) and (max-width: 460px) {
  .logo {
    width: 4rem;
  }

  .link_introduction {
    margin-top: 1.75rem;
  }
}

@media (orientation: portrait) and (max-width: 420px) {
  .heading {
    scale: 0.6;
    margin-top: -5rem;
  }

  .texts {
    margin-top: -4rem;
  }

  .text_content {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }
}

@media (orientation: portrait) and (max-width: 420px) {
  .heading {
    scale: 0.5;
    margin-top: -7rem;
  }

  .texts {
    margin-top: -6rem;
  }

  .text_content {
    font-size: 1.25rem;
  }
}