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

:root {
  --main-color: #02844d;
  --second-color: #fefdfb;
  --background-color: #000303;
  --p-color-in-light: #000303;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: var(--main-color);
  font-size: 22px;
}

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--second-color);
}

ul,
ol {
  list-style: none;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.dark {
  background-color: var(--background-color);
  color: var(--second-color);
}

.light {
  background-color: var(--second-color);
  color: var(--main-color);
}

.padding {
  padding: 50px 0;
}

/* Header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  .head-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12.5px 20px;
    margin: 0 auto;
    width: 100%;
    max-height: 75px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px #ffffffe2;
    backdrop-filter: blur(10px);

    .icon {
      display: none;
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s ease-in-out;
    }

    .web_icon {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }

    .menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 45%;
      padding: 0;
      margin: 0;
      list-style: none;

      li a {
        text-decoration: none;
        color: #000;
        font-size: 18px;
        transition: all 0.3s ease-in-out;
        font-weight: 500;
        outline: none;
        border: none;
        position: relative;
      }

      li a:after {
        content: "";
        position: absolute;
        background-color: var(--main-color);
        height: 1.5px;
        width: 0;
        left: 0;
        bottom: -5px;
        transition: 0.3s;
      }

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

      li a:hover {
        color: var(--main-color);
      }
      li a.active {
        color: var(--main-color);
      }
      li a.active::after {
        width: 100%;
      }
    }

    .signUp {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 20%;
      padding: 0;
      margin: 0;
      list-style: none;

      a {
        text-decoration: none;
        color: #000;
        font-size: 18px;
        transition: all 0.3s ease-in-out;
        font-weight: 400;
        outline: none;
        border: 2px solid var(--main-color);
        position: relative;
      }

      a:hover {
        color: var(--second-color);
      }
    }
  }
}

@media (max-width: 992px) {
  .header {
    .head-container {
      justify-content: flex-end;
      gap: 20px;
      .icon {
        display: block;
        visibility: visible;
        opacity: 1;
        cursor: pointer;
        font-size: 25px;
      }

      .menu {
        position: absolute;
        top: -500px;
        left: 0;
        width: 100%;
        height: 300px;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        background-color: #fff;
        box-shadow: 0px 20px 20px 0px #717171e2;
        transition: all 0.5s ease-in-out;

        li {
          padding: 10px 0;
        }
      }

      .menu.active {
        top: 75px;
      }

      .web_icon {
        margin-right: auto;
      }
      .signUp {
        width: 28%;
        justify-content: flex-end;
        gap: 10px;
      }
    }
  }
}

@media (max-width: 768px) {
  .header {
    .head-container {
      .signUp {
        width: 50%;
        justify-content: flex-end;
        gap: 10px;
      }
    }
  }
}

@media (max-width: 576px) {
  .header {
    .head-container {
      .signUp {
        width: 60%;
        justify-content: flex-end;
        gap: 10px;
      }
    }
  }
}

/* Home */

.home {
  .content-card {
    height: calc(100vh - 95px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    margin: 45px 0 0;
    width: 100%;

    .welcome {
      width: 50%;
      padding: 0 20px;
      margin: 0;
      text-align: center;

      h1 {
        color: var(--main-color);
        text-align: center;
        margin: 10px 0;
        font-weight: 400;
        margin-bottom: 20px;

        span {
          font-weight: 700;
        }
      }
      p {
        color: var(--second-color);
        text-align: center;
        margin-bottom: 40px;
      }

      a {
        transition: all 0.3s ease-in-out;
      }

      a:hover {
        transform: scale(1.1) translateY(-5px);
        margin-left: 10px;
        margin-right: 10px;
      }
    }

    .home-img {
      width: 40%;
      height: 100%;
      position: relative;
      animation: moveUp 1s ease-in-out infinite alternate;
      .img-fluid {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 1199px) {
  .home {
    .content-card {
      .welcome {
        width: 100%;
        margin: 0 0 20px;
      }
      .home-img {
        display: none;
      }
    }
  }
}

/* Projects Section */

.projects {
  .head-section {
    padding: 0 0 30px;
    h2 {
      color: var(--main-color);
      margin: 0 0 10px;
      font-weight: 700;
      font-size: 28px;
    }
    p {
      color: var(--p-color-in-light);
      text-align: center;
      margin-bottom: 0;
      font-weight: 400;
    }
  }

  .container-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;

    .project-card.long {
      height: 490px;
    }

    .project-card.special {
      height: 490px;
    }

    .project-card {
      height: 300px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      border: 2px solid var(--main-color);
      padding: 10px;

      h3 {
        color: var(--main-color);
        margin: 10px 0;
        font-weight: 700;
        font-size: 20px;
        text-align: center;
      }

      .project-img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        margin-bottom: 10px;
        transition: all 0.3s ease-in-out;

        &:hover {
          transform: scale(1.05) translateY(-5px);
          box-shadow: 0px 0px 20px 0px #02844d;
        }
      }

      .text-description {
        height: 87px;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        p {
          color: var(--p-color-in-light);
          text-align: center;
          margin: 10px 0;
          font-weight: 400;
        }
      }
      .text-description.height {
        height: auto;
      }

      .project-link {
        display: flex;
        justify-content: space-around;
        bottom: 10px;
        width: 100%;
        position: absolute;
        left: 0;
        .link-project {
          text-decoration: none;
          color: var(--main-color);
          transition: all 0.3s ease-in-out;
          font-weight: 500;
          outline: none;
          position: relative;
          padding: 5px 10px;
          text-align: center;
          width: 45%;

          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: var(--main-color);
            bottom: 0;
            left: 0;
          }

          @media (hover: hover) {
            &:hover {
              background-color: var(--main-color);
              color: var(--second-color);
              box-shadow: 0px 0px 20px 0px #02844d;
              transform: scale(1.05) translateY(-5px);
            }
          }

          &:active {
            background-color: var(--main-color);
            color: var(--second-color);
            box-shadow: 0px 0px 20px 0px #02844d;
            transform: scale(1.05) translateY(-5px);
          }
        }
        .details {
          background-color: transparent;
          border: none;
          outline: none;
          color: var(--main-color);
          font-weight: 500;
          padding: 5px 10px;
          text-align: center;
          width: 45%;
          cursor: pointer;
          transition: all 0.3s ease-in-out;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: var(--main-color);
            bottom: 0;
            left: 0;
          }

          @media (hover: hover) {
            &:hover {
              background-color: var(--main-color);
              color: var(--second-color);
              box-shadow: 0px 0px 20px 0px #02844d;
              transform: scale(1.05) translateY(-5px);
            }
          }

          &:active {
            background-color: var(--main-color);
            color: var(--second-color);
            box-shadow: 0px 0px 20px 0px #02844d;
            transform: scale(1.05) translateY(-5px);
          }
        }
      }
      &:hover {
        transform: scale(1.05) translateY(-5px);
        box-shadow: 0px 0px 20px 0px #02844d;
      }
    }
  }
}

@media (max-width: 1299px) {
  .projects {
    & .container-projects {
      .project-card.long {
        height: 440px;
      }
      .project-card.special {
        height: 440px;
      }
    }
  }
}

@media (max-width: 767px) {
  .projects {
    & .container-projects {
      .project-card.long {
        height: 400px;
      }
      .project-card.special {
        height: 400px;
      }
      .project-card {
        &:hover {
          transform: scale(1.01);

          .project-img {
            &:hover {
              transform: scale(1.01);
            }
          }
        }
      }
    }
  }
}

/* About Me */

.about-section {
  .head-section {
    h2 {
      color: var(--main-color);
      margin: 0 0 10px;
      font-weight: 700;
      font-size: 28px;
    }
  }
  .text-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    text-align: left;
    .text-about {
      width: 50%;

      p {
        margin-bottom: 30px;
        line-height: 1.8;
      }
    }

    .skill {
      line-height: 2.3;
      .my-skill {
        font-weight: 700;
        color: var(--second-color);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 0;
        padding: 5px 10px;

        li {
          border: 2px solid var(--main-color);
          border-radius: 5px;
          margin: 5px 0;
          padding: 5px 10px;
          cursor: pointer;

          &::before {
            content: "✓";
            color: var(--main-color);
            font-weight: bold;
            display: inline-block;
            width: 1em;
          }

          @media (hover: hover) {
            &:hover {
              background-color: var(--main-color);
              color: var(--second-color);
              box-shadow: 0px 0px 20px 0px #02844d;
              transform: scale(1.05) translateY(-5px);
            }
            &:hover::before {
              color: var(--second-color);
            }
          }

          &:active {
            background-color: var(--main-color);
            color: var(--second-color);
            box-shadow: 0px 0px 20px 0px #02844d;
            transform: scale(1.05) translateY(-5px);
          }
          &:active::before {
            color: var(--second-color);
          }
        }
      }

      h3 {
        text-align: center;
        font-weight: 700;
      }
    }
  }
}

@media (max-width: 767px) {
  .about-section {
    .text-container {
      flex-direction: column;
      .text-about {
        width: 100%;
        text-align: center;
      }
    }
  }
}

/* Contact Me */

.contact-me {
  .head-section {
    h2 {
      margin: 0;
      font-weight: 700;
      font-size: 28px;
    }
  }
  .container {
    .contact-container {
      margin: 60px 0 0;
      display: flex;
      justify-content: space-between;
      .contact-form {
        width: 70%;
        .name {
          width: 47%;
        }
        .email {
          width: 47%;
          margin-left: 5%;
        }
        .subject {
          width: 100%;
          margin: 0px 0 30px;
        }
        .massege {
          width: 100%;
          height: 250px;
        }
        .btn {
          width: 100%;
          transition: all 0.3s ease-in-out;
          margin: 15px 0;
          background-color: var(--main-color);
          color: var(--second-color);

          @media (min-width: 993px) and (hover: hover) {
            &:hover {
              color: var(--p-color-in-light);
              box-shadow: 0px 0px 20px 0px #02844d;
              transform: scale(1.05) translateY(-5px);
            }
          }
        }
        input {
          margin-bottom: 20px;
          padding: 5px 0 5px 20px;
          outline: none;
          border: none;
          border-bottom: 2px solid var(--main-color);
        }
        textArea {
          margin-bottom: 20px;
          padding: 5px 0 5px 20px;
          outline: none;
          border: none;
          border-bottom: 2px solid var(--main-color);
          resize: none;
        }
      }
      .social {
        width: 25%;
        h3 {
          text-align: center;
          font-weight: 700;
        }

        .social-link {
          padding: 0;
          margin: 0;
        }

        a {
          text-decoration: none;
          color: var(--main-color);
          width: 25px;
          height: 25px;
          display: block;
          overflow: hidden;
          background: black;
          text-align: center;
          border-radius: 50%;
          margin: 20px auto;
          transition: all 0.5s ease-in-out;
          padding: 20px;
          position: relative;

          svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.5s ease-in-out;
          }

          p {
            color: var(--main-color);
            opacity: 0;
            transition: all 0.5s ease-in-out;
            position: absolute;
            left: -100%;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
            visibility: hidden;
            font-weight: 700;
            font-size: 20px;
          }
          @media (min-width: 1200px) and (hover: hover) {
            &:hover {
              width: 100%;
              border-radius: 5px;
              text-align: left;
              height: 60px;

              svg {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 25px;
              }

              p {
                opacity: 1;
                visibility: visible;
                text-align: center;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }

              .linktree {
                width: 100%;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1199px) {
  .contact-me {
    .container {
      .contact-container {
        flex-direction: column;

        .contact-form {
          width: 100%;

          input,
          textarea {
            padding: 5px 0 5px 5px;
          }

          .name {
            width: 100%;
          }
          .email {
            width: 100%;
            margin-left: 0;
          }
        }

        .social {
          width: 100%;
          margin: 20px 0;

          a {
            width: 100%;
            height: 60px;
            border-radius: 5px;
            padding: 5px;

            svg {
              left: 30px;
              font-size: 30px;
            }

            p {
              opacity: 1;
              visibility: visible;
              text-align: center;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }

            @media (hover: hover) {
              &:hover {
                background-color: var(--main-color);
                color: #fff;
                transform: scale(1.02);

                svg {
                  color: #fff;
                }
                p {
                  color: #fff;
                }
                .linktree {
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
/* footer */

.footer {
  background-color: var(--background-color);
  text-align: center;
  padding: 10px 0;

  p {
    margin: 0;
    font-size: 16px;

    .name {
      font-weight: 700;
    }
  }
}