* {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
html {
  scroll-behavior: smooth;
}
h1 {
  font-size: clamp(28px, 5vw, 56px);
}
h2 {
  font-size: clamp(26px, 4vw, 46px);
}
h3 {
  font-size: clamp(20px, 3vw, 32px);
}
h4 {
  font-size: clamp(18px, 3vw, 26px);
}
h5 {
  font-size: clamp(14px, 3vw, 24px);
}
h6 {
  font-size: clamp(12px, 3vw, 24px);
}
a {
  color: white;
  text-decoration: none;
}
body {
  overflow-x: hidden;
  color: white;
  background-color: rgb(30, 30, 30);
}
button {
  cursor: pointer;
}
.title {
  padding-bottom: clamp(40px, 4vw, 60px);
  span {
    color: rgb(246, 115, 0);
    text-shadow: 0px 5px 15px rgb(255, 179, 0, 0.5);
  }
}
header {
  z-index: 100;
  position: absolute;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgb(30, 30, 30, 0.4);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0px 5px 11px rgba(255, 255, 255, 0.1);
  .container_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(10px, 1.6vw, 15px) clamp(10px, 8vw, 200px);
    color: white;
    .logo {
      img {
        width: clamp(90px, 15vw, 160px);
      }
    }
    .btn_burger {
      display: none;
      outline: none;
      border: 0;
      background-color: transparent;
      img {
        width: 25px;
      }
    }
    nav {
      display: flex;
      gap: clamp(8px, 2vw, 45px);
      a {
        font-size: clamp(14px, 2.7vw, 20px);
        color: white;
        transition: all 0.5s ease;
        &:hover {
          text-shadow: 0px 5px 15px rgba(255, 255, 255, 0.5);
          transform: scale(105%);
        }
      }
    }
  }
}
.burger_menu {
  z-index: 10000000;
  position: fixed;
  /* display: flex; */
  display: none;
  justify-content: end;
  width: 100%;
  height: 100%;
  background-color: rgb(30, 30, 30, 0.4);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  .container_content {
    width: 70%;
    height: 100vh;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgb(30, 30, 30);
    .nav_btn {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      div {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 40px 40px;
        a {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: clamp(22px, 4.7vw, 26px);
          color: white;
          transition: all 0.5s ease;
          img {
            width: 25px;
          }
          &:hover {
            text-shadow: 0px 5px 15px rgba(255, 255, 255, 0.5);
            transform: scale(105%);
          }
        }
      }
    }
  }
}
section {
  padding: 50px clamp(10px, 8vw, 200px);
}
footer {
  padding: clamp(10px, 1.6vw, 15px) clamp(10px, 8vw, 200px);
}
.modal_window_project {
  z-index: 50000;
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: clamp(10px, 3vw, 60px);
  background-color: rgb(30, 30, 30, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  .btn_close {
    position: absolute;
    top: 0;
    right: 0;
  }
  img {
    width: 70%;
    height: 90%;
    object-fit: contain;
  }
  button {
    outline: none;
    border: none;
    background-color: transparent;
    img {
      width: clamp(45px, 4vw, 60px);
      height: clamp(45px, 4vw, 60px);
      object-fit: contain;
      filter: contrast(0%) brightness(10000%);
    }
  }
}
.section_banner {
  position: relative;
  padding: 0;
  margin-bottom: clamp(10px, 2vw, 50px);
  min-height: fit-content;
  height: 100vh;
  .container_blur {
    z-index: 2;
    position: absolute;
    bottom: clamp(-5%, 50vw, -25%);
    width: 100%;
    height: clamp(100px, 5vw, 200px);
    filter: blur(10px);
    backdrop-filter: blur(20px);
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      white 30%,
      white 70%,
      transparent 100%
    );
  }
  .container_img {
    overflow: hidden;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(60%);
    }
  }
  .container_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: clamp(20px, 1.6vw, 30px);
    padding: 0px clamp(10px, 8vw, 200px);
    .container_suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(10px, 2vw, 40px);
      h4 {
        position: relative;
        padding: clamp(8px, 1.2vw, 12px) clamp(15px, 3vw, 25px);
        font-weight: 400;
        letter-spacing: 1.2px;
        text-wrap: nowrap;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background-color: rgb(30, 30, 30, 0.4);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0px 5px 11px rgba(255, 255, 255, 0.1);
        &:nth-child(1) {
          &::after {
            content: "2";
            position: absolute;
            top: 20%;
            font-size: clamp(14px, 1.5vw, 16px);
          }
        }
      }
    }
    h1,
    p,
    strong {
      color: white;
    }
    strong {
      font-weight: 600;
    }
    a {
      width: fit-content;
      padding: clamp(8px, 1.2vw, 12px) clamp(20px, 3vw, 45px);
      font-size: clamp(20px, 3vw, 32px);
      font-weight: 400;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: clamp(8px, 3vw, 16px);
      background-color: rgb(246, 115, 0);
      transition: all 0.5s ease;
      &:hover {
        transform: scale(105%);
        background-color: white;
        color: black;
      }
    }
  }
}
.section_projects {
  .container_projects {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 20px;
    gap: clamp(60px, 5vw, 80px);
    .container_btn_more {
      display: flex;
      justify-content: center;
      button {
        display: flex;
        align-items: center;
        padding: clamp(8px, 1.2vw, 15px) clamp(20px, 3vw, 45px);
        gap: 10px;
        font-size: clamp(20px, 3vw, 32px);
        font-weight: 400;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: clamp(8px, 3vw, 16px);
        color: rgb(30, 30, 30);
        background-color: rgb(246, 115, 0);
        transition: all 0.5s ease;
        h6 {
          position: relative;
          font-weight: 400;
        }
        img {
          margin-top: 2.2px;
          width: 25px;
          height: 20px;
          rotate: -90deg;
        }
        &:hover {
          transform: scale(108%);
          background-color: white;
        }
      }
      .back {
        img {
          rotate: 90deg;
          margin: 0;
        }
      }
    }
    .item_projects {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: start;
      grid-template-areas: "page text";
      gap: clamp(20px, 2.5vw, 70px);
      .container_text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-area: text;
        display: flex;
        flex-direction: column;
        gap: clamp(15px, 3vw, 30px);
        ul {
          display: flex;
          flex-direction: column;
          gap: clamp(2px, 1.2vw, 8px);
          padding-left: 0;
          list-style-position: outside;
          margin-left: 1em;
          font-weight: 400;
          font-size: clamp(22px, 1.5vw, 24px);
          line-height: clamp(24px, 1.8vw, 30px);
          color: rgb(163, 163, 163);
        }
        .container_param {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: clamp(20px, 2vw, 40px);
          div {
            display: flex;
            align-items: center;
            gap: clamp(5px, 2vw, 15px);
            text-align: end;
            h3 {
              text-wrap: nowrap;
            }
            &:nth-child(1) {
              position: relative;
              h3 {
                &::after {
                  content: "2";
                  position: absolute;
                  top: 10%;
                  font-size: clamp(14px, 1.5vw, 16px);
                }
              }
            }
            &:nth-child(2) {
              .container_img {
                img {
                  height: clamp(12px, 2vw, 36px);
                }
              }
            }
            .container_img {
              display: flex;
              justify-content: center;
              align-items: center;
              width: clamp(25px, 3.5vw, 55px);
              height: clamp(25px, 3.5vw, 55px);
              border-radius: 86px;
              border: 1px solid rgba(255, 255, 255, 0.153);
              background-color: rgb(246, 115, 0);
              img {
                height: clamp(15px, 3vw, 45px);
              }
            }
          }
        }
      }
      .container_page {
        grid-area: page;
        position: relative;
        display: flex;
        width: 100%;
        height: clamp(200px, 55vw, 650px);
        .btn_magnifying_glass {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          button {
            z-index: 10000;
            cursor: zoom-in;
            padding: clamp(5px, 3vw, 40px);
            outline: none;
            border: none;
            background-color: transparent;
            opacity: 0%;
            transition: opacity 0.5s ease;
            img {
              width: clamp(40px, 7vw, 80px);
              opacity: 50%;
              filter: brightness(10000%);
            }
          }
        }
        &:hover {
          .btn_magnifying_glass {
            button {
              opacity: 100%;
            }
          }
          .container_count_slide {
            opacity: 100%;
          }
          .container_btn {
            opacity: 100%;
          }
        }
        .container_overflow {
          width: 100%;
          height: 100%;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.153);
          border-radius: 26px;
          .container_img {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
        .container_count_slide {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: end;
          width: 100%;
          height: 100%;
          margin-top: -30px;
          gap: 10px;
          opacity: 0%;
          transition: opacity 0.5s ease;
          .count_slide {
            display: flex;
            align-items: center;
            gap: 10px;
          }
          button {
            overflow: hidden;
            padding: 0;
            width: clamp(35px, 4vw, 50px);
            height: clamp(40px, 5vw, 60px);
            outline: none;
            background-color: transparent;
            border: 1px solid rgba(0, 0, 0, 0.407);
            border-radius: clamp(4px, 2vw, 8px);
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.534));
            transition: transform 0.5s ease;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            &:hover {
              transform: scale(110%);
            }
          }
          .active {
            transform: scale(110%);
          }
        }
        .container_btn {
          position: absolute;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          opacity: 0%;
          transition: opacity 0.5s ease;
          button {
            z-index: 100;
            margin: clamp(8px, 3vw, 30px);
            border: 0;
            border-radius: 100px;
            outline: none;
            background-color: rgb(246, 115, 0);
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.534));
            transition: all 0.5s ease;
            &:nth-child(1) {
              padding: 5px 8px 5px 5px;
            }
            &:nth-child(2) {
              padding: 5px 5px 5px 8px;
            }
            img {
              width: clamp(20px, 4vw, 32px);
              object-fit: cover;
            }
            &:hover {
              transform: scale(110%);
              background-color: white;
            }
          }
        }
      }
    }
  }
}
.section_cost_calculation {
  .container_cost_calculation {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: clamp(8px, 3vw, 16px);
    border-collapse: collapse;
    .container_count {
      display: flex;
      justify-content: space-between;
      padding: clamp(12px, 1.2vw, 20px) clamp(15px, 3vw, 25px);
      background-color: rgb(246, 115, 0);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: clamp(8px, 3vw, 16px) clamp(8px, 3vw, 16px) 0px 0px;
      h3 {
        font-weight: 400;
      }
    }
    .container_text {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 0 clamp(15px, 3vw, 25px);
      .text_type {
        font-weight: 400;
      }
      .error {
        color: red;
      }
    }
    .container_flex_type {
      display: grid;
      grid-template-columns: 3fr 2fr;
      padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 25px);
      padding-top: 0;
      gap: 15px;
      .container_type {
        display: grid;
        align-items: center;
        gap: clamp(8px, 2vw, 15px);
        .base {
          grid-area: base;
        }
        .premium {
          grid-area: premium;
        }
        .luks {
          grid-area: luks;
        }
        .house {
          grid-area: house;
        }
        .apartment {
          grid-area: apartment;
        }
        .office {
          grid-area: office;
        }
        .com_premises {
          grid-area: com_premises;
        }
        .do50 {
          grid-area: do50;
        }
        .ot50do100 {
          grid-area: ot50do100;
        }
        .ot100do500 {
          grid-area: ot100do500;
        }
        .bolee500 {
          grid-area: bolee500;
        }
        .ranche {
          grid-area: ranche;
        }
        .herez12 {
          grid-area: herez12;
        }
        .polgoda {
          grid-area: polgoda;
        }
        .herezgod {
          grid-area: herezgod;
        }
        .num {
          text-align: center;
          grid-area: num;
        }
        .squre {
          position: relative;
          &::after {
            content: "2";
            position: absolute;
            top: 20%;
            font-size: clamp(14px, 1.5vw, 16px);
          }
        }
      }
      .container_btn {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: clamp(8px, 2vw, 15px);
        button {
          padding: clamp(8px, 1.2vw, 12px) clamp(25px, 3vw, 55px);
          &:last-child {
            background-color: rgb(246, 115, 0);
            &:hover {
              transform: scale(105%);
              background-color: white;
              color: black;
            }
          }
        }
      }
      .active {
        transform: scale(105%);
        background-color: white;
        color: black;
      }
      button {
        position: relative;
        padding: clamp(8px, 1.2vw, 12px) clamp(15px, 3vw, 25px);
        text-wrap: nowrap;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background-color: rgb(30, 30, 30, 0.4);
        color: white;
        transition: all 0.5s ease;
        font-size: clamp(14px, 3vw, 24px);
        font-weight: 400;
        letter-spacing: 1.2px;
        &:hover {
          transform: scale(105%);
          background-color: white;
          color: black;
        }
      }
    }
  }
}
.section_advantage {
  .container_advantage_card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 180px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    .container_card {
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      .diss {
        filter: grayscale(100%);
        .container_name_card {
          div {
            background-color: rgb(255, 255, 255);
            h3 {
              color: rgb(30, 30, 30);
            }
          }
        }
      }
      .like {
        .container_name_card {
          div {
            background-color: rgb(246, 115, 0);
            box-shadow: 0px 9px 30px 20px rgb(255, 179, 0, 0.2);
            h3 {
              color: rgb(30, 30, 30);
            }
          }
        }
      }
      .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: clamp(20px, 5vw, 40px);
        gap: clamp(18px, 2.8vw, 30px);
        border: 1px solid rgba(255, 255, 255, 0.153);
        border-radius: clamp(12px, 2.4vw, 24px);
        .container_name_card {
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: clamp(8px, 1.1vw, 12px) clamp(20px, 2vw, 25px);
            gap: clamp(2px, 1.2vw, 10px);
            border-radius: clamp(12px, 2vw, 16px);
            img {
              width: clamp(15px, 6vw, 35px);
              height: clamp(18px, 6vw, 35px);
              object-fit: contain;
            }
          }
        }
        .img {
          width: 100%;
          height: clamp(250px, 25vw, 500px);
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 16px;
          }
        }
        ul {
          display: flex;
          flex-direction: column;
          padding-left: 0;
          list-style-position: outside;
          margin-left: 1em;
          gap: clamp(2px, 1.2vw, 8px);
          list-style-type: "— ";
          font-weight: 400;
          font-size: clamp(22px, 1.5vw, 24px);
          line-height: clamp(26px, 2vw, 34px);
          text-wrap: wrap;
        }
      }
    }
  }
}
.section_about_me {
  .container_about_me {
    display: grid;
    grid-template-columns: 2fr 3fr;
    justify-content: space-between;
    gap: clamp(40px, 2.5vw, 70px);
    div {
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 2vw, 70px);
      &:nth-child(2) {
        ul {
          display: flex;
          flex-direction: column;
          padding-left: 0;
          list-style-position: outside;
          margin-left: 1em;
          gap: clamp(2px, 1.2vw, 8px);
          list-style-type: "✔ ";
          text-wrap: wrap;
          font-weight: 400;
          font-size: clamp(22px, 1.5vw, 24px);
          line-height: clamp(24px, 1.8vw, 32px);
        }
        p {
          font-weight: 400;
          font-size: clamp(22px, 1.5vw, 26px);
        }
      }
      &:nth-child(1) {
        display: flex;
        flex-direction: row;
        justify-content: left;
        img {
          width: 100%;
          height: clamp(300px, 40vw, 580px);
          object-fit: cover;
          border-radius: 16px;
        }
      }
    }
  }
}
.section_stages {
  .container_stages {
    display: flex;
    flex-direction: column;
    gap: 20px;
    div {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: clamp(12px, 2vw, 16px) clamp(20px, 4vw, 35px);
      border: 1px solid rgba(255, 255, 255, 0.153);
      border-radius: clamp(12px, 2vw, 16px);
      p {
        font-weight: 300;
        font-size: clamp(22px, 1.5vw, 24px);
        line-height: clamp(24px, 1.8vw, 32px);
      }
    }
  }
}
.section_contact {
  .container_contact {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(15px, 3vw, 120px);
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: clamp(10px, 3vw, 40px) 0px;
      gap: clamp(10px, 2vw, 15px);
      border: 1px solid rgba(255, 255, 255, 0.153);
      border-radius: 16px;
      transition: all 0.5s ease;
      img {
        width: clamp(50px, 9vw, 100px);
        height: clamp(50px, 9vw, 100px);
        object-fit: contain;
      }
      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.1);
        transform: scale(103%);
      }
    }
  }
}
footer {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  margin-top: clamp(50px, 15vw, 100px);
  gap: clamp(10px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.153);
  img {
    width: clamp(100px, 15vw, 160px);
  }
  .container_contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: clamp(5px, 2vw, 10px);
    .support {
      display: flex;
      align-items: center;
      gap: 10px;
      h6,
      a {
        font-size: 14px;
        font-weight: 200;
        color: rgba(255, 255, 255, 0.399);
      }
      a {
        text-decoration: underline;
      }
    }
  }
  .flex {
    display: flex;
    align-items: center;
    justify-content: right;
    flex-wrap: wrap;
    gap: clamp(8px, 2.2vw, 30px);
    font-size: clamp(22px, 1.5vw, 24px);
    line-height: clamp(24px, 1.8vw, 32px);
    font-weight: 300;
    &:nth-child(2) {
      justify-content: center;
    }
    a {
      img {
        width: 25px;
        height: 25px;
        object-fit: contain;
      }
      transition: all 0.5s ease;
      &:hover {
        text-shadow: 0px 5px 15px rgba(255, 255, 255, 0.5);
        transform: scale(105%);
      }
    }
  }
}
@media (max-width: 1200px) {
  footer {
    grid-template-columns: 1fr;
    padding: 10px clamp(10px, 5vw, 200px);
    .flex {
      justify-content: start;
      font-size: clamp(16px, 3.2vw, 28px);
      line-height: clamp(22px, 4.4vw, 32px);
      &:nth-child(2) {
        justify-content: start;
      }
    }
  }
  header {
    .container_header {
      padding: 10px clamp(10px, 5vw, 200px);
    }
  }
  section {
    padding: clamp(20px, 1.4vw, 50px) clamp(10px, 5vw, 250px);
  }
  .section_banner {
    .container_text {
      padding: 0px clamp(10px, 5vw, 200px);
    }
    .container_img {
    }
  }
  .section_projects {
    .container_projects {
      .item_projects {
        grid-template-columns: 1fr;
        grid-template-areas: "page" "text";
        .container_page {
          width: 100%;
          height: clamp(200px, 75vw, 700px);
          .container_count_slide {
            margin-top: -15px;
            button {
              width: clamp(35px, 5vw, 50px);
              height: clamp(40px, 7vw, 60px);
            }
          }
        }
        .container_text {
          .container_param {
            justify-content: left;
            gap: clamp(15px, 5vw, 40px);
            div {
              &:nth-child(2) {
                .container_img {
                  img {
                    height: clamp(12px, 5vw, 36px);
                  }
                }
              }
              .container_img {
                width: clamp(25px, 6.5vw, 55px);
                height: clamp(25px, 6.5vw, 55px);
                img {
                  height: clamp(20px, 6vw, 45px);
                }
              }
            }
          }
          ul {
            font-size: clamp(16px, 3.2vw, 28px);
            line-height: clamp(22px, 3.4vw, 32px);
            padding-left: 0;
            list-style-position: outside;
            margin-left: 1em;
          }
        }
      }
    }
  }
  .section_advantage {
    .container_advantage_card {
      grid-template-columns: 1fr;
      justify-content: center;
      .container_card {
        .card {
          width: clamp(300px, 80vw, 600px);
          ul {
            font-size: clamp(16px, 3.2vw, 28px);
            line-height: clamp(22px, 4.4vw, 32px);
          }
          .img {
            width: 100%;
            height: clamp(250px, 45vw, 500px);
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 16px;
            }
          }
        }
      }
    }
  }
  .section_about_me {
    .container_about_me {
      grid-template-columns: 1fr;
      div {
        &:nth-child(2) {
          ul {
            gap: clamp(2px, 1.2vw, 8px);
            font-size: clamp(16px, 3.2vw, 28px);
            line-height: clamp(22px, 4.4vw, 32px);
          }
          p {
            font-size: clamp(17px, 3.2vw, 29px);
            line-height: clamp(23px, 4.4vw, 38px);
          }
        }
        &:nth-child(1) {
          flex-direction: row;
          justify-content: center;
          img {
            width: clamp(300px, 90vw, 682px);
            height: clamp(300px, 80vw, 630px);
          }
        }
      }
    }
  }
  .section_stages {
    .container_stages {
      div {
        p {
          font-size: clamp(16px, 3.2vw, 28px);
          line-height: clamp(22px, 4.4vw, 32px);
        }
      }
    }
  }
}
@media (max-width: 520px) {
  header {
    .container_header {
      padding: 10px clamp(10px, 2vw, 200px);
      .nav_button {
        display: none;
      }
      .btn_burger {
        display: block;
      }
    }
  }
  section {
    padding: clamp(20px, 1.4vw, 50px) clamp(10px, 2vw, 250px);
  }
  .section_banner {
    .container_text {
      padding: 0px clamp(10px, 2vw, 200px);
    }
  }
  .section_advantage {
    .container_advantage_card {
      .container_card {
        .card {
          width: 100%;
        }
      }
    }
  }
  .section_about_me {
    .container_about_me {
      div {
        &:nth-child(1) {
          img {
            width: 100%;
            height: clamp(300px, 80vw, 630px);
          }
        }
      }
    }
  }
  .section_cost_calculation {
    .container_cost_calculation {
      .container_flex_type {
        grid-template-columns: 1fr;
        .container_btn {
          flex-direction: row;
          justify-content: center;
        }
      }
    }
  }
}
@media (max-height: 520px) {
  .section_banner {
    .container_text {
      padding: 50px clamp(10px, 2vw, 200px);
    }
  }
}