@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@keyframes slide-down {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-down-20 {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes hidden {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
html {
  font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}
* {
  margin: 0;
  color: #333333;
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.7s ease;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background: #fafafa;
}

p {
  font-size: 1rem;
  margin-left: 2rem;
  text-align: justify;
  line-height: 1.8;
}

h1 {
  font-size: clamp(1.6rem, 7vw, 3.25rem);
  line-height: 1.4;
  margin-top: 4rem;
  margin-bottom: 2.4rem;
  text-align: center;
  color: #333333;
}

h2 {
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  line-height: 1.4;
  margin-top: clamp(2rem, 8vw, 4rem);
  margin-bottom: clamp(1rem, 4vw, 2rem);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

a.blue-link {
  margin-top: 1rem;
  color: #0066CC;
  display: inline-block;
  align-self: center;
}
a.blue-link::after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: #0066CC;
  transition: 300ms;
}
a.blue-link:hover::after {
  width: 100%;
}

button,
.btn {
  background: rgb(111, 5, 211);
  color: white;
  text-decoration: none;
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 100rem;
  margin-top: 2rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover,
.btn:hover {
  background: #8912f9;
}

.on-scroll-animation {
  transition: transform 1.5s ease-in-out;
}

img {
  transition: all 1.5s ease-in-out, transform 0.3s ease-in-out;
}

hr {
  margin: auto;
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}

.container {
  width: min(80vw, 70rem);
}
@media (max-width: 750px) {
  .container {
    width: 90vw;
  }
}

.container-no-adjust {
  width: min(80vw, 70rem);
}

.flex {
  display: flex;
}

.flex-vertical {
  flex-direction: column;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.margin {
  margin-left: 2rem;
  margin-right: 2rem;
}

.clickable-text {
  cursor: pointer;
  color: #6f05d3;
  margin-top: 0;
}

.container2 {
  width: min(70vw, 60rem);
  align-self: center;
}
@media (max-width: 800px) {
  .container2 {
    width: 90vw;
  }
}

@media (max-width: 800px) {
  :root {
    font-size: clamp(11px, 3vw, 16px);
  }
}
.slide-left {
  transform: translateX(min(15vw, 20rem));
}

.slide-left-smaller {
  transform: translateX(min(9vw, 12rem));
}

.slide-left-small {
  transform: translateX(min(4vw, 5rem));
}

.slide-right {
  transform: translateX(calc(min(15vw, 20rem) * -1));
}

.slide-right-smaller {
  transform: translateX(calc(min(9vw, 12rem) * -1));
}

.slide-right-small {
  transform: translateX(calc(min(4vw, 5rem) * -1));
}

.zoom {
  transform: scale(0.9);
}

.scale-transition:hover {
  transform: scale(1.02);
}

.scale-transition-large:hover {
  transform: scale(1.06);
}

.invisible {
  opacity: 0;
}

.black {
  background: black;
}

#landing-section {
  margin-top: calc(3rem + 50px);
}
#landing-section h1 {
  max-width: 50rem;
  opacity: 0;
  animation: 1s ease 0s 1 slide-down-20, 0.9s ease 0.1s 1 appear;
  animation-fill-mode: forwards;
}
@media (max-width: 700px) {
  #landing-section h1 {
    margin-top: 2vw;
  }
}
#landing-section img {
  margin-top: min(2.5vw, 3rem);
  margin-bottom: 5rem;
  width: min(65vw, 550px);
  mix-blend-mode: multiply;
  animation: 0.3s ease 0s 1 hidden, 1.5s ease 0.3s 1 appear, 1.5s ease 0s 1 slide-down-20;
}

#requirements-section {
  background: #F5F5F7;
  padding-top: 3rem;
  padding-bottom: 4rem;
}
#requirements-section .container2 {
  margin-top: 2rem;
}
#requirements-section .list {
  gap: 10rem;
}
#requirements-section .list ul {
  flex: 1;
  padding-left: 25px;
}
#requirements-section .list ul + ul {
  padding-right: 25px;
}
#requirements-section .list li {
  line-height: 1.7;
}
#requirements-section .image {
  width: max(30rem, 55%);
}
#requirements-section .image img {
  width: 100%;
}
#requirements-section .hr {
  width: 75%;
  margin-left: 0;
  margin-right: 0;
}
#requirements-section .last-hr-with-img {
  position: relative;
}
#requirements-section .last-hr-with-img .image {
  position: absolute;
  /* width:50%; */
  /* background:lime; */
  top: 0;
  /* right:0; */
  left: 45%;
  transform: translateY(-50%);
}
#requirements-section .devices {
  position: relative;
}
#requirements-section .devices a.source-link {
  position: absolute;
  bottom: 0;
  right: 2rem;
}
@media (max-width: 800px) {
  #requirements-section .list {
    gap: 1rem;
  }
  #requirements-section .list li {
    font-size: 0.8rem;
  }
  #requirements-section h2 {
    margin-left: 1.5rem;
  }
}