/* Reset all components */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
/* Root component */
/*
>> Main Colors
  #010D26
  #0388A6
  #04ADBF
  #79F2F2
  #FCFDFF
*/
:root {
  --main-color: #79f2f2;
  --sec-color: #04adbf;
  --bg-color: #010d26;
  --bg-color-alt: #0388a6;
  --bg-color-alt-1: #fcfdff;
  --white-color: #ffffff;
  --black-color: #000000;
  --gray-color: #777777;
  --box-shadow-color: #444444;
  --main-transition: 0.2s;
}
/* Global components */
body {
  background-color: var(--bg-color);
  font-family: "Fredoka", sans-serif;
}
html {
  scroll-behavior: smooth;
  font-size: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) var(--sec-color);
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: var(--white-color, #ffffff);
}
.container {
  margin-left: 15px;
  margin-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.main_heading {
  position: relative;
  width: 10rem;
  text-align: center;
  padding: 1rem;
  margin: 5rem auto;
  font-size: 2rem;
  color: var(--white-color);
  background-color: var(--bg-color);
  transition: var(--main-transition);
  cursor: pointer;
}
.main_heading::before {
  content: "";
  position: absolute;
  width: 105%;
  height: 2.5rem;
  left: -5%;
  top: -10%;
  background-color: var(--main-color);
  z-index: -1;
  transition: var(--main-transition);
}
.main_heading::after {
  content: "";
  position: absolute;
  width: 105%;
  height: 2.5rem;
  left: 0%;
  bottom: -10%;
  background-color: var(--main-color);
  z-index: -1;
  transition: var(--main-transition);
}
.main_heading:hover {
  background-color: var(--main-color);
}
.main_heading:hover::before {
  width: 100%;
  left: 0%;
  top: 0%;
}
.main_heading:hover::after {
  width: 100%;
  left: 0%;
  bottom: 0%;
}
/* Start header section */
.header {
  height: 4.5rem;
  background-color: var(--main-color);
  box-shadow: 0 0 0.25rem var(--box-shadow-color);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  margin: 0.5rem;
  border-radius: 0.5rem;

  .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1rem;

    .logo_container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 0 1rem;

      .logo_link {
        transition: var(--main-transition);

        .logo {
          font-size: 2.5rem;
          letter-spacing: 0.25rem;
        }
      }
      .logo_link:hover {
        color: var(--bg-color-alt);
      }
    }

    @media (min-width: 801px) {
      .links_container {
        height: 100%;

        .links {
          display: flex;
          height: 100%;

          .link::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0.25rem;
            background-color: var(--bg-color-alt);
            bottom: 0;
            left: -100%;
            transition: var(--main-transition);
          }
          .link {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 0.75rem;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.1rem;
            cursor: pointer;
            overflow: hidden;
            text-align: center;
            transition: var(--main-transition);

            a {
              transition: var(--main-transition);
            }
          }
          .link:hover::before {
            left: -0%;
          }
          .link:hover {
            background-color: var(--bg-color-alt-1);
          }
          .link:hover > a {
            color: var(--bg-color-alt);
          }
        }
        .close {
          display: none;
        }
      }
      .menu_container {
        display: none;
      }
      .icons_container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 1rem;
        gap: 1rem;

        .box:nth-child(1) {
          border-right: 0.125rem solid var(--bg-color-alt-1);
          padding-right: 1rem;
        }
        .btn {
          padding: 0.4rem;
          background-color: var(--main-color);
          border-radius: 0.25rem;
          border: 0.125rem solid var(--bg-color-alt-1);
          cursor: pointer;
          transition: var(--main-transition);
          color: var(--white-color);
          font-size: 1rem;
          font-weight: bold;
          width: 2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: var(--main-transition);
        }
        .search {
          border: none;
          font-size: 1.5rem;
        }
        .lang:hover {
          background-color: var(--bg-color-alt-1);
          color: var(--bg-color-alt);
        }
        .search:hover {
          color: var(--bg-color-alt);
        }
      }
    }

    @media (max-width: 800px) {
      .logo_container {
        flex: 1;
      }
      .menu_container {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 2rem;

        .menu_bar {
          width: 2rem;
          height: 2rem;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .bar {
            height: 0.125rem;
            background-color: var(--white-color);
            transition: var(--main-transition);
          }
          .first {
            width: 100%;
          }
          .second {
            width: 80%;
          }
          .third {
            width: 60%;
          }
          .fourth {
            width: 80%;
          }
          .fifth {
            width: 100%;
          }
        }
        .menu_bar:hover > .bar {
          background-color: var(--bg-color-alt);
        }
      }
      .links_container {
        position: fixed;
        background-color: var(--main-color);
        width: 85%;
        top: 0;
        transition: var(--main-transition);
        text-align: center;
        border-radius: 0.5rem;
        box-shadow: 0 0 0.25rem var(--box-shadow-color);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        right: -100%;
        z-index: 999;

        .links {
          display: flex;
          flex-direction: column;
          width: 100%;

          .link {
            position: relative;
            display: flex;
            align-items: center;
            padding: 1rem;
            font-size: 1.2rem;
            cursor: pointer;
            overflow: hidden;
            width: 100%;
            transition: var(--main-transition);

            a {
              margin: 0 auto;
            }
          }
          .link > a {
            transition: var(--main-transition);
          }
          .link:hover > a {
            color: var(--bg-color-alt);
          }
        }

        .close {
          position: absolute;
          top: 1rem;
          right: 1rem;
          font-size: 2rem;
          color: var(--white-color);
          cursor: pointer;
          transition: var(--main-transition);
        }
        .close:hover {
          color: var(--bg-color-alt);
        }
      }
      .links_container.active {
        right: 0%;
      }
      .icons_container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 1rem;
        gap: 1rem;
        order: -1;
        height: 100%;

        .box:nth-child(1) {
          border-left: 0.125rem solid var(--bg-color-alt-1);
          padding-left: 0.75rem;
          order: 1;
        }
        .btn {
          padding: 0.4rem;
          background-color: var(--main-color);
          border-radius: 0.25rem;
          border: 0.125rem solid var(--bg-color-alt-1);
          cursor: pointer;
          transition: var(--main-transition);
          color: var(--white-color);
          font-size: 1rem;
          font-weight: bold;
          width: 2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: var(--main-transition);
        }
        .search {
          border: none;
          font-size: 1.5rem;
        }
        .lang:hover {
          background-color: var(--bg-color-alt-1);
          color: var(--bg-color-alt);
        }
        .search:hover {
          color: var(--bg-color-alt);
        }
      }
    }
  }
  @media (max-width: 800px) {
    .container {
      margin: 0;
    }
  }
}
/* Start laanding section */
.landing {
  background-image: url(/assets/files/3ME_0.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  height: 100vh;
  transition: 3s;

  .slider {
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--main-color);
    border-radius: 2rem;
    z-index: 1;

    .single_bar {
      width: 1rem;
      height: 0.5rem;
      background-color: var(--bg-color);
      border-radius: 1rem;
      cursor: pointer;
    }
    .single_bar.active {
      background-color: var(--white-color);
      transition: 1s;
    }
  }
}
.landing::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(121, 242, 242, 0.25);
}
/* Start about section */
.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 0.1rem;
  background-color: var(--main-color);
}
.about {
  position: relative;
  padding: 5rem 0;

  .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 2rem;
    gap: 2rem;

    .text_section {
      flex-basis: 50%;
      font-size: 1.7rem;
      color: var(--white-color);
      line-height: 1.6;

      .my_name {
        font-size: 3rem;
        font-weight: bold;
        color: var(--main-color);
      }
    }
    .img_section {
      flex-basis: 50%;

      img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 50%;
      }
    }
  }
  @media (max-width: 800px) {
    .container {
      flex-direction: column;
      padding: 0 0.5rem;

      .text_section {
        flex-basis: 100%;
        text-align: center;
        font-size: 1.5rem;
      }

      .img_section {
        order: 1;
        flex-basis: 100%;
      }
    }
  }
}
/* Start gallery section */
.gallery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 0.1rem;
  background-color: var(--main-color);
}
.gallery {
  position: relative;
  padding: 5rem 0;

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 1rem;

    .gallery_title {
      font-size: 1.7rem;
      color: var(--white-color);
      line-height: 1.6;
      text-align: center;
      margin: 0 5rem 2rem;
    }
    @media (max-width: 800px) {
      .gallery_title {
        margin: 0 0 2rem;
      }
    }

    .box::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      border-radius: 0.5rem;
      background-color: rgba(1, 13, 38, 0.5);
      transition: var(--main-transition);
    }
    .box {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1 0 20rem;
      margin-bottom: 1rem;
      text-align: center;
      background-color: var(--main-color);
      border-radius: 0.5rem;
      transition: var(--main-transition);
      cursor: pointer;

      img {
        border-radius: 0.5rem;
        max-width: 100%;
        height: 100%;
      }

      .page_link {
        border-radius: 0.5rem;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 4rem;
        background-color: var(--main-color);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          font-size: 1.2rem;
        }
      }
    }
    .box:hover {
      transform: translateY(-1rem);
    }
    @media (max-width: 800px) {
      .box:hover {
        transform: translateX(-0.75rem);
      }
    }
    .box:hover::before {
      width: 0;
      height: 0;
    }
  }
}