html,
  body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
  }

  body {
      font-family: "Open Sans", sans-serif;
      font-weight: normal;
      font-style: normal;
      padding: 0px;
      margin: 0px;
      transition: all .3s ease;
  }

  *,
  ::after,
  ::before {
      box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  .h1,
  .h2,
  .h3,
  .h4 {
      color: #000;
      font-weight: 900;
  }

  h1,
  .h1 {
      font-size: 1.9rem;
      padding: 0px;
      padding-bottom: 15px;
      margin: 0px;
  }

  h2,
  .h2 {
      font-size: 3rem;
      padding: 0px;
      padding-bottom: 4px;
      margin: 0px;
  }


  h3,
  .h3 {
      font-size: 1.3rem;
      padding: 0px;
      padding-bottom: 15px;
      margin: 0px;
  }

  a {
      color: rgb(215 130 50);
      font-size: 16px;
  }

  p {
      font-size: 16px;
  }

  @media (max-width: 800px) and (min-width: 100px) {

      h2 {
          font-size: 2rem;
      }
  }

  .dialog-container {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      padding: 5%;
  }

  .no-scroll {
      overflow: hidden;
  }

  .show-dialog {
      display: block;
  }

  .form-feedback {
      position: relative;
      width: 100%;
      background: #fff;
      padding: 0;
      border: 1px solid #ccc;
      box-shadow: 0 0 360px rgba(0, 0, 0, 0.7);
      border-radius: 30px;
      overflow: hidden;
      height: 96vh;
      max-height: 96vh;
      display: flex;
      flex-direction: column;
  }

  .form-feedback__body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 48px 48px 40px 40px;
      -webkit-overflow-scrolling: touch;
  }

  .close-button {
      cursor: pointer;
      font-size: 1.5rem;
      line-height: 1;
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 50%;
      color: #333;
      background: #ececec;
      transition: background 0.2s ease, color 0.2s ease;
  }

  .close-button:hover {
      background: #ddd;
      color: #000;
  }

  .des-form {
      padding: 20px 0px;
      display: flex;
      align-items: flex-starts;
      flex-direction: column;
      justify-content: flex-start;
  }

  .item-form {
      margin-bottom: 18px;
  }

  .item-form-product-chosen .product-chosen-text {
      font-size: 1.1rem;
      font-weight: 600;
      margin: 6px 0 0;
      color: #032829;
  }

  .volume-label-value {
      font-weight: 700;
      color: #032829;
  }

  .volume-range-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 6px;
  }

  .volume-manual-input {
      width: 5.5rem;
      flex-shrink: 0;
      text-align: center;
      padding-left: 0.35rem;
      padding-right: 0.35rem;
  }

  .volume-range-row .form-range {
      flex: 1;
      min-width: 0;
  }

  .order-estimate {
      margin-bottom: 18px;
  }

  .order-estimate[hidden] {
      display: none !important;
  }

  .order-estimate-inner {
      padding: 14px 16px;
      border-radius: 10px;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
  }

  .order-estimate-line {
      margin: 0 0 8px;
      font-size: 1rem;
  }

  .order-estimate-total {
      margin: 0 0 8px;
      font-size: 1.1rem;
  }

  .order-estimate-total strong {
      color: #c77800;
  }

  .order-estimate-note {
      margin: 0;
      font-size: 0.85rem;
  }

  section {
      position: relative;
      width: 100%;
      min-height: 100vh;
  }

  .head {
      z-index: 100;
      position: absolute;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all .3s ease-in-out;
      padding: 0px 24px;
  }

  .logo img {
      width: 250px;
  }

  .logo_mob {
      display: none;
  }

  @media (max-width: 800px) and (min-width: 100px) {

      .des-form {
          flex-direction: column;
          justify-content: flex-start;
      }

      .logo {
          display: none;
      }

      .logo_mob {
          display: block;
          width: clamp(50%, 1vw, 100%);
      }

      .logo_mob img {
          width: 100%;
      }

  }

  .navi ul {
      padding: 0px;
      margin: 0px;
      display: flex;
      gap: 1em;
  }

  .navi ul li {
      list-style: none;
  }

  .navi ul li a {
      text-decoration: none;
      position: relative;
      color: #fff;
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      transition: all .3s ease;
  }

  .phone {
      background: #fff;
      padding: 24px;
      border-radius: 10px 30px;
      border: 1px solid #e2e2e2;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 800px) and (min-width: 100px) {
      .logo img {
          width: 50px;
      }

      .navi {
          width: 100%;
      }

      .navi ul {
          width: 100%;
          justify-content: space-between;
          padding: 18px 0;
      }

      .navi ul li a {
          font-size: 0.5rem;
      }

      .phone {
          display: none;
      }

  }






  .bg-wrapper {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }

  .bg-wrapper .bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
  }

  .bg-wrapper em {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      background: linear-gradient(148deg, rgb(3 40 41 / 61%) 0%, rgb(49 44 34 / 39%) 100%);
  }

  .bg {
      width: 100%;
      min-height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      transform-origin: center;
      transition: all 6s ease;
      opacity: 0;
  }


  .bg1 {
      background: url(i/bg-1.jpg) top/cover;
      background-attachment: initial;
  }

  .bg2 {
      background: url(i/bg-2.jpg) bottom/cover;
      background-attachment: initial;
  }

  .bg3 {
      background: url(i/bg-3.jpg) bottom/cover;
      background-attachment: initial;
  }

  @media (max-width: 767px) {
      .bg1 {
          background: url(i/bg-1.jpg) top/cover;
          background-attachment: initial;
      }

      .bg2 {
          background: url(i/bg-2.jpg) top/cover;
          background-attachment: initial;
      }

      .bg3 {
          background: url(i/bg-3.jpg) bottom/cover;
          background-attachment: initial;
      }
  }

  .bg.active {
      transform: scale(1.1);
      animation: motion 6s;
      opacity: 1;
  }

  @keyframes motion {
      0% {
          transform: scale(1.1);
      }

      100% {
          transform: scale(1);
      }
  }

  .tizer {
      position: relative;
      height: 100vh;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      align-content: center;
      z-index: 2;
      padding-left: 24px;
      margin-bottom: 100px;
      padding: 0 8%;

  }

  .tizer .box-tizer {
      position: relative;
      width: 80%;
      padding-bottom: 5%;
  }


  .tizer h1 {
      color: #fff;
      font-size: clamp(2.3rem, 5vw, 4rem);
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: 2;
      padding-bottom: 0px;
  }

  .tizer h1>span {
      color: rgb(243 192 18);
      font-size: clamp(2.3rem, 5vw, 4rem);
  }

  .tizer h1>span.marc {
      font-size: clamp(3.5rem, 5vw, 4.5rem);
  }

  .tizer p {
      color: #fff;
      font-size: clamp(12px, 5vw, 28px);
      letter-spacing: 1;

  }

  .btn-craft {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.5);
      transition: all .3s ease;
      color: #fff;
      margin-top: 5px;
      border-radius: 10px;
      background: none !important;
      font-size: 1.5rem;
      padding: 16px 24px;
  }

  .btn-craft:hover {
      color: #fff;
      background: none !important;
      border: 1px solid rgba(255, 255, 255, 1);
  }

  .btn-craft:before {
      content: "";
      position: absolute;
      top: -20px;
      width: 900px;
      height: 200px;
      right: 0px;
      background: linear-gradient(51deg, rgb(255 205 6) 0%, rgba(247, 57, 57, 1) 35%, rgb(243 192 18) 65%, rgb(220 169 54) 85%, rgba(255, 0, 179, 1) 100%);
      animation: bg-color 6s ease-in-out 0.5s infinite alternate;
      z-index: -1;
  }

  @keyframes bg-color {
      from {
          right: 0px;
      }

      to {
          right: -400px;
      }
  }

  @media (max-width: 800px) and (min-width: 100px) {


      .bg-wrapper {
          height: 90vh;
      }

      .section-index {
          min-height: 90vh;
      }

      .tizer {
          justify-content: center;
          align-items: center;
          height: 90vh;
          padding: 0 2%;
      }

      .tizer .box-tizer {
          gap: 30px;
          width: 100%;
          height: 50vh;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
      }
  }

 

  .rubble {
      padding: 40px 40px;
      box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
  }

  .box-catalog {
      padding: 0 8%;
      position: relative;
      background: #fff;
      top: 0px;
  }

  .title-catalog {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 48px 0px;
  }

  .title-catalog h2 {
      padding: 0px;
  }

  .title-catalog p {
      margin: 4px 0;
  }

  .row-catalog {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .item-rubble {
      width: 32%;
      padding: 24px;
      border-radius: 10px;
      border: 1px solid #e2e2e2;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);

  }

  .item-rubble .img-rubble img {
      width: 100%;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
  }

  .item-rubble .title {
      font-size: 24px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0px;
      line-height: 1;
      padding: 24px 0;
  }

  .item-rubble .title span {
      text-transform: none;
      font-size: 16px;
  }

  .item-rubble .des {
      font-size: 16px;
      padding: 24px 0;
  }

  .item-rubble .price {
      font-size: 24px;
      font-weight: 700;
  }

  .item-rubble .btn-order-fraction {
      display: block;
      width: 100%;
      margin-top: 16px;
      font-size: 0.95rem;
      font-weight: 600;
  }

  .item-rubble .sert a {
      font-size: 0.8rem;
  }

  @media (max-width: 800px) and (min-width: 100px) {
      .box-catalog {
          padding: 0 2%;
      }

      .row-catalog {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
      }

      .item-rubble {
          width: auto;
          max-width: none;
          min-width: 0;
      }

      .item-rubble .title {
          font-size: 14px;
          line-height: 1.25;
      }

      .item-rubble .title span {
          font-size: 12px;
      }

      .item-rubble .des {
          font-size: 12px;
          line-height: 1.45;
      }

      .item-rubble .price {
          font-size: 14px;
      }

      .item-rubble .btn-order-fraction {
          font-size: 12px;
      }

      .item-rubble .sert a {
          font-size: 12px;
      }

      .rubble {
          padding: 10px 10px;
      }

  }



  .delivery {
      background: #fdfdfd;
      display: flex;
      justify-content: center;
      padding: 0px 40px;
      position: relative;
  }

  .delivery h2 {
      color: #fff;
  }

  .delivery em {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: linear-gradient(148deg, rgb(3 40 41 / 61%) 0%, rgb(49 44 34 / 39%) 100%);
  }

  .delivery .bg-delivery {
      background: url(i/delivery.jpg) center/cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      opacity: 0.7;
  }

  .pick-up .bg-delivery {
      background: url(i/pick-up.jpg) center/cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      opacity: 0.7;
  }


  .box-delivery {
      position: relative;
      display: flex;
      justify-content: space-between;
      z-index: 3;
  }

  .delivery-col {
      width: 50%;
  }


  .delivery-col {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
  }

  .delivery-col_colum {
      flex-direction: column;
      justify-content: center;
  }

  .delivery-col_row {
      display: flex;
      justify-content: center;
      flex-direction: row;
      gap: 8px
  }

  @media (max-width: 800px) and (min-width: 100px) {
      .box-delivery {
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          align-content: center;
      }

      .delivery-col {
          width: 100%;
          display: block;
          margin: 12px;
      }

      .delivery-col .phone {
          display: block;
          margin: 10px;
      }
  }


  .wholesale {
      background: #fdfdfd;
      display: flex;
      justify-content: center;
      padding: 0px 40px;
      position: relative;
  }

  .wholesale * {
      color: #fff;
  }

  .wholesale em {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: linear-gradient(148deg, rgb(0 0 0 / 90%) 0%, rgb(5 5 4 / 91%));
  }

  .wholesale .bg-wholesale {
      background: url(i/wholesale.jpg) center/cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      opacity: 0.7;
  }

  .box-wholesale {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      z-index: 3;
  }

  .wholesale h2 {
      color: #fff;
  }

  .wholesale-col {
      width: 50%;
  }


  .wholesale-col {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
  }

  .contact {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: stretch;
      min-height: min(75vh, 640px);
  }

  .box-contact {
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      gap: 0;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      flex-direction: row;
      flex-wrap: nowrap;
  }

  .contact-col {
      display: flex;
      justify-content: flex-start;
      gap: 8px;
      flex-direction: column;
      width: 100%;
  }

  .contact-body {
      flex: 0 0 30%;
      max-width: 30%;
      width: 30%;
      margin: 0;
      padding: 28px 20px 28px 24px;
      box-sizing: border-box;
      align-self: stretch;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .contact-heading {
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 20px;
      letter-spacing: -0.02em;
      color: #111;
      flex: 0 0 auto;
  }

  .contact-info {
      background: linear-gradient(165deg, #ffffff 0%, #f8f9fa 100%);
      border: 1px solid #e6e8eb;
      border-radius: 16px;
      padding: clamp(22px, 4vw, 36px);
      box-shadow:
          0 1px 2px rgba(15, 23, 42, 0.04),
          0 12px 40px rgba(15, 23, 42, 0.06);
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
  }

  .contact-map-col {
      flex: 1 1 70%;
      max-width: 70%;
      width: 70%;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      box-sizing: border-box;
  }

  .contact-lead {
      font-size: 1.125rem;
      font-weight: 700;
      margin: 0 0 10px;
      color: #0f172a;
      line-height: 1.4;
  }

  .contact-inn {
      font-size: 0.9375rem;
      color: #64748b;
      margin: 0 0 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid #e9eef2;
      line-height: 1.5;
  }

  .contact-label {
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      color: rgb(215 130 50);
      margin: 22px 0 8px;
      padding: 0;
  }

  .contact-label:first-of-type {
      margin-top: 0;
  }

  .contact-info > .contact-label:first-of-type {
      margin-top: 0;
  }

  .contact-text {
      margin: 0;
      font-size: 1rem;
      line-height: 1.65;
      color: #334155;
  }

  .contact-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 40px;
      margin-top: 24px;
      padding-top: 22px;
      border-top: 1px solid #e9eef2;
  }

  .contact-link-block {
      flex: 1 1 200px;
      min-width: 0;
  }

  .contact-link-block .contact-label {
      margin-top: 0;
  }

  .contact-link {
      font-weight: 600;
      color: rgb(215 130 50);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
  }

  .contact-link:hover {
      color: #b45309;
      border-bottom-color: rgba(180, 83, 9, 0.35);
  }

  .contact-link--mail {
      word-break: break-all;
  }

  @media (max-width: 800px) and (min-width: 100px) {
      .box-wholesale {
          flex-wrap: wrap;
          align-items: center;
      }

      .contact {
          min-height: 0;
      }

      .box-contact {
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: stretch;
          min-height: 0;
      }

      .contact-body {
          flex: 1 1 auto;
          max-width: 100%;
          width: 100%;
          padding: 24px 16px 12px;
          overflow: visible;
      }

      .contact-map-col {
          flex: 1 1 auto;
          max-width: 100%;
          width: 100%;
          min-height: min(55vh, 480px);
      }

      .contact-map-col .map {
          flex: 1 1 auto;
          width: 100%;
          min-height: min(55vh, 480px);
          height: auto;
      }

      .wholesale-col {
          width: 100%;
          display: block;
          margin: 12px;
      }

        .contact-col {
            width: 100%;
    display: flex;
      justify-content: flex-start;
      gap: 8px;
      flex-direction: column;
  }

 .contact-body {
    padding: 24px 16px 20px;
  }

      .contact-info {
          padding: 22px 20px;
          border-radius: 14px;
          flex: 0 1 auto;
          overflow-y: visible;
      }

      .contact-links {
          flex-direction: column;
          gap: 16px;
      }

      .contact-link-block {
          flex: 1 1 0;
      }

      .wholesale em {
          background: linear-gradient(148deg, rgb(0 0 0 / 80%) 0%, rgb(5 5 4 / 91%));
      }

  }

  .map,
  #map {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 320px;
      height: auto;
      z-index: 1;
  }

  .contact-map-col .map,
  .contact-map-col #map {
      flex: 1 1 auto;
      min-height: 320px;
      height: auto;
  }


  .footer {
      display: flex;
      align-items: center;
      padding: 12px 24px;
      min-height: 20vh;
      background: #f7f7f7;
  }

    @media (max-width: 800px) and (min-width: 100px) { 
  .footer {
    flex-wrap: wrap;
  }
    }

   .footer div {
    display: flex;
      align-items: center;
   }

  .footer * {
      padding: 0px 12px;
  }

  .footer img {
      width: 90px;
  }

  .footer p {
    font-size: 12px;
      margin-bottom: 0px;
  }