@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-arabic-wght-normal.8c4cadc1.woff2") format("woff2-variations");
  unicode-range: U+6??, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-cyrillic-ext-wght-normal.3f3d8af2.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-cyrillic-wght-normal.5aadfd28.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-hebrew-wght-normal.452a3556.woff2") format("woff2-variations");
  unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-latin-ext-wght-normal.08c61594.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Rubik Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("rubik-latin-wght-normal.3ba363a2.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Serif Display;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("dm-serif-display-latin-ext-400-normal.31eab736.woff2") format("woff2"), url("dm-serif-display-latin-ext-400-normal.646a71e1.woff") format("woff");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Serif Display;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("dm-serif-display-latin-400-normal.1c9628a2.woff2") format("woff2"), url("dm-serif-display-latin-400-normal.126da7be.woff") format("woff");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Orbitron Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("orbitron-latin-wght-normal.aa24a348.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Red Hat Mono Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("red-hat-mono-latin-ext-wght-normal.c36f9235.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Red Hat Mono Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("red-hat-mono-latin-wght-normal.1e7e8af4.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("manrope-cyrillic-ext-wght-normal.4faff236.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Manrope Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("manrope-cyrillic-wght-normal.71e7645c.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Manrope Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("manrope-greek-wght-normal.a5e28610.woff2") format("woff2-variations");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Manrope Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("manrope-vietnamese-wght-normal.cc6da6e9.woff2") format("woff2-variations");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Manrope Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("manrope-latin-ext-wght-normal.80f39a53.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Manrope Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("manrope-latin-wght-normal.25695ad9.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Montserrat Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("montserrat-cyrillic-ext-wght-normal.75a8a17c.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Montserrat Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("montserrat-cyrillic-wght-normal.b46fa966.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Montserrat Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("montserrat-vietnamese-wght-normal.b6df36f8.woff2") format("woff2-variations");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Montserrat Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("montserrat-latin-ext-wght-normal.86c17da6.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Montserrat Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("montserrat-latin-wght-normal.f4323122.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-cyrillic-ext-wght-normal.9ddfc41f.woff2") format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-cyrillic-wght-normal.a9a79be1.woff2") format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-greek-ext-wght-normal.d5168b48.woff2") format("woff2-variations");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-greek-wght-normal.c2e3dda6.woff2") format("woff2-variations");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-vietnamese-wght-normal.14b3d008.woff2") format("woff2-variations");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-latin-ext-wght-normal.375fc33d.woff2") format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Roboto Slab Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("roboto-slab-latin-wght-normal.cfc8cf02.woff2") format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  :root {
    --sp: 1.25rem;
    --sp-s: .75rem;
    --sp-content: calc(var(--sp) * 2);
    --ff: "Rubik Variable", serif;
    --ff-headings: "Montserrat Variable", sans-serif;
    --fw: 300;
    --fw-bold: 800;
    --fw-headings: 600;
    --fs: 1rem;
    --lh: 1.4;
    --clr-bg: #fff;
    --clr-text: #000;
    --clr-line: #ccc;
    --clr-main: #467be6;
    --clr-main-dark: #224b9c;
  }

  body {
    font-family: var(--ff);
    font-size: var(--fs);
    font-weight: var(--fw);
    line-height: var(--lh);
    background-color: var(--clr-bg);
    color: var(--clr-text);
    min-height: 100dvh;
    margin: 0;
    padding-block-start: 3rem;
  }

  main {
    padding: var(--sp);
  }

  h1, h2, h3, h4 {
    font-family: var(--ff-headings);
    font-weight: var(--fw-headings);
  }

  h1, h2, h3, b, strong {
    font-weight: var(--fw-bold);
  }

  img, picture, svg, video {
    max-width: 100%;
    display: block;
  }

  .content {
    max-inline-size: 60ch;
    padding: 0 var(--sp);
    padding-bottom: var(--sp-content);
    color: var(--clr-main);
    margin-inline: auto;
    font-size: 1.125rem;
  }

  @media (width >= 800px) {
    .content {
      font-size: 1.25rem;
    }
  }

  .content2 {
    max-inline-size: 70rem;
    margin-inline: auto;
  }

  .content-header {
    font-size: 2rem;
  }
}

@layer components {
  nav * {
    margin: 0;
    padding: 0;
  }

  body {
    min-height: 100vh;
  }

  nav {
    background-color: var(--clr-main);
    z-index: 20;
    block-size: var(--header-size);
    position: fixed;
    inset: 0 0 auto;
  }

  nav ul {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    list-style: none;
    display: flex;
  }

  nav li {
    height: 60px;
  }

  nav a {
    color: #fff;
    align-items: center;
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    transition: all .3s;
    display: flex;
    position: relative;
  }

  nav a:after {
    content: "";
    background-color: var(--clr-main-dark);
    width: 0%;
    height: 5px;
    transition: width .3s;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  nav a:hover:after {
    width: 100%;
  }

  nav li:first-child {
    margin-right: auto;
  }

  .sidebar {
    z-index: 20;
    background-color: var(--clr-main);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 250px;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
  }

  .sidebar li, .sidebar a {
    width: 100%;
  }

  .menu-button {
    display: none;
  }

  @media (width <= 800px) {
    .hideOnMobile {
      display: none;
    }

    .menu-button {
      display: block;
    }

    .sidebar {
      width: 100%;
    }
  }

  html {
    scroll-behavior: smooth;
  }

  section {
    scroll-margin-top: 100px;
  }

  .logo {
    align-items: center;
    margin-inline-start: 20px;
    display: flex;
  }

  .logo img {
    width: auto;
    height: 10px;
  }

  .footer {
    background-color: var(--clr-main);
    padding: var(--sp);
    justify-content: space-between;
    display: flex;
  }

  .footer-left {
    color: #fff;
    align-items: center;
    font-size: 1.125rem;
    display: flex;
  }

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

  .hero {
    width: 100%;
    min-height: 100vh;
    display: block;
  }

  img {
    object-fit: cover;
    object-position: center;
    min-block-size: 100%;
    min-inline-size: 100%;
    display: block;
  }

  .grid {
    gap: var(--sp);
    padding-bottom: var(--sp-content);
    padding-left: var(--sp);
    padding-right: var(--sp);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  @media (width <= 800px) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .grid-item {
    border-radius: 20px;
    transition: transform .3s ease-in-out;
    display: block;
    position: relative;
    overflow: hidden;

    & h3 {
      z-index: 2;
      color: #fff;
      background-image: linear-gradient(#0000004d 20%, #0000);
      margin: 0;
      padding-block: 1.2em 3em;
      padding-inline: 1.5em;
      font-size: 1.5rem;
      position: absolute;
      inset: 0 0 auto;
    }

    & img {
      inline-size: 100%;
    }

    & .grid-content {
      z-index: 2;
      background-color: var(--clr-main);
      color: var(--clr-bg);
      padding-block: 1.5em;
      padding-inline: 2em;
      position: absolute;
      inset: auto 0 0;
    }

    @media (hover: hover) {
      & .grid-content {
        background-color: var(--clr-main);
        padding-block-start: 1.5em;
        transition: transform .3s ease-in-out;
        transform: translateY(120%);
      }

      &:hover {
        transition: transform .3s ease-in-out;
        transform: scale(.98);

        & .grid-content {
          transform: translateY(0);
        }
      }
    }
  }
}
/*# sourceMappingURL=index.1eedbe5f.css.map */