/* Start Variables */
:root {
  --main-Color: #10cab7;
  --secondary-color: #2c4755;
  --section-padding: 60px;
  --main-transition: 0.3s linear;
  --bg-light-gray: rgba(238, 238, 238, 0.5);
  --main-shadow: 0 0 20px 10px #ddd;
  --border-radius: 10px;
}
/* End Variables */
/* Global Rules */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Work Sans", sans-serif;
  margin: 0;
}
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.card-style {
  background-color: var(--bg-light-gray);
  border: 3px solid var(--main-Color);
  border-radius: var(--border-radius);
  box-shadow: var(--main-shadow);
  transition: var(--main-transition);
}
.hover-scale:hover {
  transform: scale(0.97);
}

.special-heading {
  font-size: 150px;
  font-weight: 800;
  margin: 0;
  color: rgba(0, 0, 0, 0.1);
  text-align: center;
  & + p {
    margin: -30px 0 0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    text-align: center;
  }
}

/* start header */

.header {
  padding: 20px;

  text-transform: capitalize;

  position: relative;

  label {
    position: absolute;

    top: 1px;

    z-index: 2;

    user-select: none;

    color: transparent;

    cursor: pointer;
  }

  input {
    position: absolute;

    top: 10px;

    right: 10px;

    display: none;

    cursor: none;
  }

  .container {
    display: flex;

    justify-content: space-between;

    align-items: center;

    input:checked ~ nav ul {
      display: block;
    }

    .logo {
      width: 60px;
    }

    .links {
      position: relative;

      z-index: 2;

      &:hover .icon-berger span:nth-of-type(2) {
        width: 100%;
      }

      .icon-berger {
        display: flex;

        flex-direction: column;

        align-items: flex-end;

        width: 30px;

        z-index: 5;

        right: 0;

        transition: 0.3s linear;

        & > span {
          width: 100%;

          background-color: #333;

          height: 2px;

          margin-bottom: 5px;
        }

        &:has(input:checked) span {
          transform: rotateY(360deg);
        }

        span {
          transition: 0.3s linear;
        }

        span:nth-of-type(2) {
          width: 60%;
        }
      }

      ul {
        position: absolute;

        list-style: none;

        margin: 0;
        padding: 0;
        right: 0;
        top: calc(100% + 15px);

        min-width: 200px;

        background-color: #f6f6f6;

        display: none;

        transition: 0.3s linear;

        border-radius: 10px;

        &::before {
          content: "";

          position: absolute;

          width: 0;

          height: 0;

          border: 10px solid;

          border-color: transparent transparent #f6f6f6 transparent;

          top: -20px;

          right: 5px;
        }

        li {
          &:not(:last-child) {
            border-bottom: 1px solid #ddd;
          }

          a {
            display: block;

            padding: 15px;

            text-decoration: none;

            color: #333;

            transition: 0.3s linear;
            -webkit-transition: 0.3s linear;
            &:hover {
              padding-left: 25px;
            }
          }
        }
      }
    }
  }
}
/* Landing */
.landing {
  background-image: url(../images/pexels-photo-355747.jpeg);
  background-size: cover;
  height: calc(100vh - 64px);
  position: relative;
  .intro-text {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 320px;
    h1 {
      font-size: 50px;
      color: var(--main-Color);
      margin: 0;
    }
    p {
      font-size: 19px;
      line-height: 1.6;
    }
  }
}

/* Features */
.features {
  padding: var(--section-padding) 0;
  background-color: #f6f6f6;
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    justify-content: center;
  }
  .feat {
    padding: 20px;
    text-align: center;
    i {
      color: var(--main-Color);
      font-size: 30px;
    }
    h2 {
      font-weight: 800;
      font-size: 19px;
    }
    p {
      line-height: 1.8;
      color: #777;
    }
  }
}

/* Services */
.services {
  padding: var(--section-padding) 0;
  .services-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px;
    margin-top: 100px;
    justify-content: center;
    .srv {
      display: flex;
      margin-bottom: 40px;
      padding: 20px;
      i {
        color: var(--main-Color);
        flex-basis: 60px;
        font-size: 25px;
      }
      .text {
        flex: 1;
        h3 {
          margin: 0 0 20px;
        }
        p {
          color: #444;
          font-weight: 300;
          line-height: 1.6;
        }
      }
    }
    .image {
      text-align: center;
      position: relative;
      img {
        width: 260px;
        border-radius: 10px;
      }
      &::before {
        content: "";
        background-color: var(--secondary-color);
        width: 100px;
        height: calc(100% + 100px);
        top: -50px;
        position: absolute;
        right: 0;
        z-index: -1;
      }
    }
  }
}
/* start protofilo */
.Portfolio {
  padding: var(--section-padding) 0;
  background-color: #f6f6f6;
  .prtfolio-landing {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 100px;
    .column {
      border-radius: 10px;
      -webkit-border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 300px;
      }
    }
    .exampel {
      background-color: white;
      padding: 20px;
      line-height: 1.6;
      margin-top: -2px;
    }
  }
}
/* end protofilo */
/* start about */
.about {
  padding: var(--section-padding) 0;
  text-transform: capitalize;
  .about-landing {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    margin-bottom: 50px;
    .about-me,
    .text-about {
      flex-basis: 40%;
    }
    .about-me {
      display: grid;
      place-items: center;
      img {
        border-radius: 10px;
        width: 200px;
        height: 200px;
      }
    }
    .text-about {
      p:first-child {
        font-weight: bold;
        line-height: 1.8;
        font-size: 18px;
        margin-top: 0;
      }
      P:last-child {
        font-weight: 300;
        line-height: 1.8;
        font-size: 14px;
        margin-bottom: 0;
      }
      hr {
        display: inline-block;
        border-color: var(--main-Color);
        width: 50%;
      }
    }
  }
}
/* end about */
/* start contact */
.contact {
  padding: var(--section-padding) 0;
  background-color: var(--secondary-color, #2c4755);
  h2,
  p {
    color: rgb(255, 255, 255, 0.5);
  }
  .contact-section {
    margin-top: 100px;
    h3 {
      color: var(--main-Color);
      max-width: 800px;
      font-size: 50px;
      letter-spacing: -3px;
      a {
        text-decoration: none;
        color: rgba(238, 238, 238, 0.5);
        letter-spacing: 1px;
      }
    }
    .icons {
      color: rgba(238, 238, 238, 0.5);
      font-size: 14px;
      i {
        margin-right: 5px;
        margin-left: 20px;
      }
    }
  }
}
/* end contact */
/* fotter */
footer {
  text-transform: capitalize;
  font-size: 14px;
  background-color: var(--main-Color);
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 20px;
  span {
    color: var(--secondary-color);
  }
}