:root {
  --primary-color-400: #21bdec;

  --primary-color-dark-400: #141414;

  --secondary-color-400: #ffb273;

  --ternary-color-400: #4f5051;
}
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.fa {
  /* fill: #28282b; */
  fill: #1e88e5;
}

/* 2. Remove default margin */
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: "Osande";
  src: url("/assets/fonts/Osande\ -\ Medium\ DEMO.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "MaximaNouva";
  src: url("/assets/fonts/MaximaNouva-Regular.otf");
  font-weight: normal;
  font-style: normal;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

button {
  cursor: pointer;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

a {
  text-decoration: none;
  color: white;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;

  width: 100vw;
  height: 100%;

  color: white;

  font-family: "MaximaNouva", sans-serif;
}

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

  border-radius: 25px;
  padding: 5px;

  background: var(--primary-color-400);
}

.main-header {
  display: flex;
  width: 100vw;

  justify-content: space-between;
  align-items: center;

  min-height: 80px;

  position: relative;
}

.main-header > .logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-container > .logo {
  width: 50px;
  height: 50px;
}

.logo-container > h1 {
  margin-left: 0px;

  font-size: 1.7rem;
  color: #0a1835;
}
.main-header > .header-controls {
  display: flex;

  justify-content: flex-end;

  width: 120px;
}

.header-controls > button {
  padding: 15px;

  background-color: transparent;
  border: none;

  cursor: pointer;
}

.header-controls > button > img {
  width: 30px;
}

.main-header > .menu {
  display: none;
  flex-direction: column;

  width: 100%;
  height: 200px;
  position: absolute;

  bottom: -200px;

  z-index: 1000;
}

.main-header > .menu.show {
  display: flex;
}

.menu > ul {
  display: flex;
  flex-direction: column;

  gap: 20px;

  height: 100%;

  padding: 20px;

  background-color: white;
}

.menu > ul > li {
  display: flex;
  align-items: center;

  width: 100%;
}

.menu > ul > li > a {
  color: var(--ternary-color-400);

  font-size: 20px;
}

.menu > ul > li::after {
  content: ">";
  position: absolute;
  right: 25px;

  font-size: 25px;

  color: var(--ternary-color-400);
}

.hero {
  display: flex;
  background: #21bdec;

  position: relative;

  background: #0a1835;

  min-height: 500px;
  width: 100%;
}

.hero > .hero-content {
  display: flex;
  flex-direction: column;

  width: 200px;

  background-color: transparent;

  padding: 15px;
}

.hero-content > h1 {
  font-size: 1.4rem;

  width: 140%;
}

.hero-content > p {
  font-size: 0.9rem;
  font-weight: 100;

  width: 140%;

  line-height: 30px;

  margin-top: 10px;
}

.hero-img {
  width: 150px;
  height: 200px;

  object-fit: cover;

  position: absolute;
  right: 20px;
}

.hero-content > .btn-link {
  /* background: #cc5500; */
  outline: white;

  background: #163575;

  margin-top: 30px;

  transition: background 0.3s;
}

.hero-content > .btn-link:hover {
  background: linear-gradient(to right, #163575, #294274);
}

.services {
  width: 100%;

  color: black;
}

.services > .service-content {
  width: 100%;

  margin-top: 1rem;
}

.service-content > h3 {
  display: flex;
  justify-content: center;

  margin-bottom: 1rem;

  padding: 20px 0px;
}

.service-content > p {
  display: flex;
  justify-content: center;

  padding: 0 20px;

  font-size: 0.9rem;
  font-weight: 100;

  flex-wrap: wrap;

  line-height: 25px;

  color: white;
}

.service-show-case {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
  width: 100%;

  margin-top: 4rem;

  gap: 3rem;
}

.service-show-case > .individual-service {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  background-color: #1e1e1e;

  padding: 20px;

  width: 100%;

  transition: background 0.3s;
}

.individual-service > .individual-service-header {
  display: flex;
  width: 100%;

  align-items: center;

  margin-bottom: 5px;
}
.individual-service-header > h3 {
}
.individual-service-header > .fa {
  width: 40px;

  margin-right: 20px;
}

.individual-service > p {
  display: flex;
  justify-content: center;

  font-size: 0.9rem;
  font-weight: 100;

  flex-wrap: wrap;

  line-height: 25px;

  color: var(--ternary-color-400);

  margin-top: 10px;
  margin-bottom: 10px;
}

.advantages {
  width: 100%;

  margin-top: 5r;
  margin-bottom: 5rem;

  color: black;
}

.advantages > .advantages-content {
  width: 100%;

  padding: 20px;
}

.advantages-content > h3 {
  display: flex;
  justify-content: center;

  margin-bottom: 1rem;

  color: white;
}

.advantages-content > p {
  display: flex;
  justify-content: center;

  font-size: 0.9rem;
  font-weight: 100;

  flex-wrap: wrap;

  line-height: 25px;

  color: #f8f8ff;

  margin-top: 10px;
  margin-bottom: 10px;
}

.advantages-show-case {
  display: flex;
  flex-direction: column;

  padding: 0px 15px;

  gap: 3rem;

  margin-top: 4rem;
}

.advantages-show-case > .individual-adv {
  display: flex;

  align-items: center;
}

.individual-adv > .fa {
  width: 40px;

  margin-right: 20px;
  margin-top: 25px;
}

.individual-adv > .individual-adv-content {
  display: flex;
  flex-direction: column;

  justify-content: center;

  width: 250px;
}

.individual-adv-content > h3 {
  display: flex;

  margin-bottom: 0.2rem;

  color: #f8f8ff;
}

.individual-adv-content > p {
  display: flex;
  justify-content: center;

  font-size: 0.9rem;
  font-weight: 100;

  flex-wrap: wrap;

  line-height: 20px;

  color: #c4c4c4;

  margin-top: 10px;
  margin-bottom: 10px;
}

.footer {
  display: flex;
  flex-direction: column;

  color: white;

  width: 100%;

  padding: 40px 10px;

  gap: 15px;

  background: #0a1835;
}

.footer > h3 {
  display: flex;
  justify-content: center;

  margin-bottom: 1rem;
}

.footer > p {
  display: flex;
  justify-content: center;

  font-size: 0.9rem;
  font-weight: 100;

  flex-wrap: wrap;

  line-height: 20px;

  margin-top: 10px;
  margin-bottom: 10px;
}

.footer > .footer-contacts {
  display: flex;
  flex-direction: column;

  width: 100%;
}

.footer-contacts > h4 {
  display: flex;
  justify-content: center;

  margin-bottom: 1rem;
}

.footer-contacts > .contact-links {
  display: flex;
  justify-content: space-around;
}

.contact-links > .link {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 5px;
}

.link > .fa {
  width: 30px;

  fill: white;
}

/* Dark Mode Overrides */
body {
  background-color: #151b21;
  color: #e0e0e0;
}
body .logo-container > h1 {
  color: #1e88e5;
}

body.hero {
  background: #163575;
}

body .services,
body.advantages {
  color: #e0e0e0;
}

body .service-content > p {
  color: #c4c4c4;
}

body .link > .fa {
  fill: #f8f8ff;
}

body .individual-service {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body .individual-service > p {
  color: #f8f8ff;
}

body.advantages-content > p {
  color: #f8f8ff;
}

body .individual-adv-content > p {
  color: #c4c4c4;
}

body .fa {
  /* fill: white; */
  fill: #163575;
}

body .btn {
  background-color: #1e88e5;
  color: #ffffff;
}

body .btn-link {
  background: linear-gradient(to right, #1565c0, #1976d2);
}

body .footer {
  background: #163575;
  color: #e0e0e0;
}

body a {
  color: white;
}

body .menu > ul {
  background-color: #1e1e1e;
}

body .menu > ul > li > a {
  color: #e0e0e0;
}

body .menu > ul > li::after {
  color: #b0b0b0;
}

@media only screen and (min-width: 500px) {
  .advantages-show-case {
    display: grid;
    grid-template-columns: repeat(1, 420px);
    grid-template-rows: repeat(4, 150px);

    justify-content: center;
    align-items: center;
  }

  .advantages-show-case > .individual-adv {
    display: flex;

    align-items: center;
  }
}

@media only screen and (min-width: 600px) {
  .advantages-show-case {
    display: grid;
    grid-template-columns: repeat(1, 420px);
    grid-template-rows: repeat(4, 150px);

    justify-content: center;
  }

  .advantages-show-case > .individual-adv {
    display: flex;

    align-items: center;
  }
}

@media only screen and (min-width: 768px) {
  .hero {
    min-height: 500px;
    width: 100vw;
  }
  .hero > .hero-content {
    width: 400px;

    margin-top: 10rem;
    margin-left: 2rem;
  }

  .hero-img {
    width: 250px;
    height: 250px;

    right: 20px;
    bottom: 200px;
  }

  .services > .service-content {
    width: 100%;

    margin-top: 1rem;

    padding: 20px;
  }

  .service-content > h3 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .service-content > p {
    display: flex;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: 100;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    line-height: 25px;

    color: var(--ternary-color-400);
  }

  .service-show-case {
    display: grid;
    grid-template-columns: repeat(2, 300px);
    grid-template-rows: repeat(3, 350px);
  }

  .advantages-show-case {
    display: grid;
    grid-template-columns: repeat(1, 420px);
    grid-template-rows: repeat(4, 150px);

    justify-content: center;
  }

  .advantages-show-case > .individual-adv {
    display: flex;

    align-items: center;
  }

  .individual-adv > img {
    width: 70px;
  }

  .individual-adv > .individual-adv-content {
    justify-content: center;

    width: 300px;
  }

  .individual-adv-content > p {
    width: 120%;
  }

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

    color: white;

    width: 100%;

    padding: 40px 10px;

    gap: 15px;
  }

  .footer > h3 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .footer > p {
    display: flex;
    justify-content: center;

    font-size: 1rem;
    font-weight: 100;

    width: 80%;

    flex-wrap: wrap;

    line-height: 20px;

    margin-top: 10px;
    margin-bottom: 10px;
  }

  .footer > .footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
  }

  .footer-contacts > h4 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .footer-contacts > .contact-links {
    display: flex;
  }

  .contact-links > .link {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-right: 50px;
  }

  .link > img {
    width: 30px;
  }
}

@media only screen and (min-width: 1100px) {
  .hero {
    min-height: 500px;
  }
  .hero > .hero-content {
    width: 400px;

    margin-top: 10rem;
    margin-left: 5rem;
  }

  .hero-img {
    width: 400px;
    height: 400px;

    right: 50px;
    bottom: 80px;
  }

  .services > .service-content {
    width: 100%;

    margin-top: 1rem;

    padding: 20px;
  }

  .service-content > h3 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .service-content > p {
    display: flex;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: 100;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    line-height: 25px;

    color: var(--ternary-color-400);
  }

  .service-show-case {
    display: grid;
    grid-template-columns: repeat(3, 270px);
    grid-template-rows: repeat(2, 350px);
  }

  .advantages-show-case {
    display: grid;
    grid-template-columns: repeat(2, 420px);
    grid-template-rows: repeat(2, 250px);

    justify-content: center;
  }

  .advantages-show-case > .individual-adv {
    display: flex;

    align-items: center;
  }

  .individual-adv > img {
    width: 70px;
  }

  .individual-adv > .individual-adv-content {
    justify-content: center;

    width: 300px;
  }

  .individual-adv-content > p {
    width: 120%;
  }

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

    color: white;

    width: 100%;

    padding: 40px 10px;

    gap: 15px;
  }

  .footer > h3 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .footer > p {
    display: flex;
    justify-content: center;

    font-size: 1rem;
    font-weight: 100;

    width: 80%;

    flex-wrap: wrap;

    line-height: 20px;

    margin-top: 10px;
    margin-bottom: 10px;
  }

  .footer > .footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
  }

  .footer-contacts > h4 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .footer-contacts > .contact-links {
    display: flex;
  }

  .contact-links > .link {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-right: 50px;
  }

  .link > img {
    width: 30px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero {
    min-height: 500px;
  }
  .hero > .hero-content {
    width: 400px;

    margin-top: 10rem;
    margin-left: 10rem;
  }

  .hero-img {
    width: 500px;
    height: 500px;

    right: 100px;
    bottom: 50px;
  }

  .services > .service-content {
    width: 100%;

    margin-top: 1rem;

    padding: 20px;
  }

  .service-content > h3 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .service-content > p {
    display: flex;
    justify-content: center;

    font-size: 0.9rem;
    font-weight: 100;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    line-height: 25px;

    color: var(--ternary-color-400);
  }

  .service-show-case {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    grid-template-rows: repeat(2, 350px);
  }

  .advantages-show-case {
    display: grid;
    grid-template-columns: repeat(2, 450px);
    grid-template-rows: repeat(2, 250px);

    justify-content: center;
  }

  .advantages-show-case > .individual-adv {
    display: flex;

    align-items: center;
  }

  .individual-adv > img {
    width: 70px;
  }

  .individual-adv > .individual-adv-content {
    justify-content: center;

    width: 300px;
  }

  .individual-adv-content > p {
    width: 120%;
  }

  .footer {
    display: flex;
    flex-direction: column;

    color: white;

    width: 100%;

    padding: 40px 10px;

    gap: 15px;
  }

  .footer > h3 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .footer > p {
    display: flex;
    justify-content: center;

    font-size: 1rem;
    font-weight: 100;

    flex-wrap: wrap;

    line-height: 20px;

    margin-top: 10px;
    margin-bottom: 10px;
  }

  .footer > .footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
  }

  .footer-contacts > h4 {
    display: flex;
    justify-content: center;

    margin-bottom: 1rem;
  }

  .footer-contacts > .contact-links {
    display: flex;
  }

  .contact-links > .link {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-right: 50px;
  }

  .link > img {
    width: 30px;
  }
}