* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --cyan-600: #4D96A9;
  --cyan-300: #8FE3F9;
  --cyan-300: rgb(143, 227, 249);
  --purple-600: #855FB1;
  --purple-300: #D9B8FF;
  --slate-900: #28283D;
  --slate-600: #87879D;
  --slate-300: #D1D1DF;
  --white: #FAFAFA;

  --spacing-1400: 7rem;   /* 112px */
  --spacing-1000: 5rem;   /* 80px */
  --spacing-900: 4.5rem;  /* 72px */
  --spacing-800: 4rem;    /* 64px */
  --spacing-700: 3.5rem;  /* 56px */
  --spacing-600: 3rem;    /* 48px */
  --spacing-500: 2.5rem;  /* 40px */
  --spacing-400: 2rem;    /* 32px */
  --spacing-300: 1.5rem;  /* 24px */
  --spacing-200: 1rem;    /* 16px */
  --spacing-100: 0.5rem;  /* 8px */
  --spacing-50: 0.25rem;  /* 4px */
}

body {
  font-family: "Red Hat Display", sans-serif;
  font-style: normal;
  color: var(--slate-900);
  background-color: var(--white);
}

.text-preset-1 {
  font-size: 4rem; /* 64px */
  font-weight: 900;
  line-height: 1.1;
}

.text-preset-2 {
  font-size: 2.5rem; /* 40px */
  font-weight: 900;
  line-height: 1.1;
}

.text-preset-3 {
  font-size: 1rem; /* 16px */
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan-600);
}

.text-preset-4 {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.1;
}

.text-preset-5 {
  font-size: 1rem; /* 16px */
  font-weight: 900;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .text-preset-1 {
    font-size: 3rem; /* 48px */
  }

  .text-preset-2 {
    font-size: 2.25rem; /* 36px */
  }

  .text-preset-3 {
    font-size: 0.875rem; /* 14px */
  }

  .text-preset-4 {
    font-size: 1rem; /* 16px */
  }
}

@media (max-width: 375px) {
  .text-preset-1 {
    font-size: 2.5rem; /* 40px */
  }

  .text-preset-2 {
    font-size: 2rem; /* 32px */
  }

  .text-preset-3 {
    font-size: 0.75rem; /* 12px */
  }
}

/* Classes for text colors */
.text-slate-900 {
  color: var(--slate-900);
}

.text-slate-600 {
  color: var(--slate-600);
}

a {
  text-decoration: none;
}

header{
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-1000);
}


/***** START - CSS for hero section *****/
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30.5rem; /* 488px */
  
  position: relative;
  overflow: hidden;

  padding: var(--spacing-800) 0px;
}

.left-image,
.right-image {
  position: absolute;
}

.left-image {
  left: -30px;
}

.right-image {
  right: -30px;
}

.hero img {
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-400);

  text-align: center;
  max-width: 28rem;
}

.hero-content p {
  margin: 0 var(--spacing-200);
  line-height: 1.5;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-200);
}

.link {
  padding: var(--spacing-200) var(--spacing-500);
  border-radius: 29px;
  cursor: pointer;
  transition: all ease-in-out 0.2s;

  color: var(--white);
}

@media (min-width: 1920px) {
  .hero {
    max-width: 1920px;
    margin: 0 auto;
  }
}

@media (max-width: 1200px) {
  .hero {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-900);
  }

  .hero-content {
    padding: 0 var(--spacing-400);
  }

  .left-image {
    position: initial;    
  }

  .right-image {
    display: none;
  }
}

@media (max-width: 768px) {
  header {
    margin-top: var(--spacing-600);
  }

  .hero-content {
    gap: var(--spacing-300);
  }
}

@media (max-width: 450px) {
  .hero {
    gap: var(--spacing-600);
    padding: var(--spacing-800) 0px var(--spacing-400);
  }
  
  .hero-buttons {
    flex-wrap: wrap;
  }
}

/***** END - CSS for hero section *****/

/***** START - CSS for buttons *****/
.cyan-btn {
  background-color: var(--cyan-600);
}
.cyan-btn:hover {
  background-color: #71C0D4;
}

.cyan-btn .version-download {
  color: var(--cyan-300);
}

.purple-btn {
  background-color: var(--purple-600);
}

.purple-btn:hover {
  background-color: #B18BDD;
}

.purple-btn .version-download {
  color: var(--purple-300);
}
/***** END - CSS for buttons *****/

.divider {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divider hr {
  height: 80px;
  background-color: var(--slate-300);
  border: 0;
  width: 1px;
}

.circle {
  color: var(--slate-600);
  border: 1px solid var(--slate-300);
  border-radius: 100%;
  padding: 1rem 1.1875rem;
  line-height: normal;
  background-color: var(--white);
}


/***** START - CSS for main content *****/
main {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
  margin: var(--spacing-700) auto var(--spacing-900);
  padding: 0 var(--spacing-400);
}

.main-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-400);

  margin: var(--spacing-800) 0;
}

.main-images img {
  border-radius: 8px;
  max-width: 256px;
  max-height: 256px;
  object-fit: cover;
}

.main-footer {
  max-width: 34rem; /* 544px */
}

.main-footer h3 {
  margin: var(--spacing-200) 0 var(--spacing-400);
  padding: 0 var(--spacing-600);
}

@media (max-width: 768px) {
  main {
    margin: var(--spacing-700) auto var(--spacing-800);
  }

  .main-images {
    gap: var(--spacing-300);
  }

  .main-images img {
    max-width: 152px;
    max-height: 160px;
  }
}

@media (max-width: 500px) {
  .main-footer h3 {
    margin: var(--spacing-200) 0 var(--spacing-400);
    padding: 0;
  }
}

@media (max-width: 400px) {
  main {
    margin: var(--spacing-400) auto var(--spacing-800);
  }

  .main-images {
    gap: var(--spacing-200);
  }

  .main-images img {
    max-width: 147px;
    max-height: 144px;
  }
}

@media (max-width: 375px) {
  main {
    padding: 0 var(--spacing-400);
  }
}

/***** END - CSS for main content *****/

/***** START - CSS for footer *****/

footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-1000);

  padding: var(--spacing-1400) var(--spacing-400);
  margin-top: -24px;


  background:
    linear-gradient(rgba(27, 126, 151, 0.822), rgba(28, 113, 134, 0.822)),
    url(./assets/desktop/image-footer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--white);
}

footer h2 {
  flex-basis: 22.1875rem; /* 355px */
}

footer p {
  flex-basis: 22.1875rem; /* 355px */
}

@media (max-width: 1150px) {
  footer {
    padding: var(--spacing-800) var(--spacing-400);
    gap: var(--spacing-300);
  }
}

@media (max-width: 768px) {
  footer {
    background:
    linear-gradient(rgba(27, 126, 151, 0.822), rgba(28, 113, 134, 0.822)),
    url(./assets/tablet/image-footer.jpg);
    text-align: center;
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 375px) {
  footer {
    background:
    linear-gradient(rgba(27, 126, 151, 0.822), rgba(28, 113, 134, 0.822)),
    url(./assets/mobile/image-footer.jpg);
    background-size: cover;
    background-position: center;
  }
}