:root {
   --b-color-1: #1A1A1A;
   --b-color-2: #FB441A;
   --b-color-3: #686767;
   --b-color-4: #D5D7D6;
   --b-color-5: #FD937B;
   --b-color-6: #13282F;
   --o-color-2: #FB441A;
   --o-color-3: #686767;
   --o-color-4: #D5D7D6;
   --o-color-5: #FD937B;
}

.b-phone-whatsapp {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: 50px;
}

.b-icon-whatsapp,
.b-icon-location {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   min-width: 50px;
   height: 50px;
   min-height: 50px;
   margin-right: 15px;
   background-color: var(--b-color-2);
}

.b-phone {
   font-size: 18px;
}

.b-section {
   margin-top: 60px;
}

.b-burger {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 52px;
   height: 52px;
   cursor: pointer;
   background-color: var(--b-color-2);
}

.b-burger span {
   display: block;
   margin: 3px 0;
   height: 4px;
   background-color: white;
   border-radius: 4px;
   width: 70%;
}

.div-b-burger {
   display: none;
}

.b-nav {
   display: inline-flex;
}

.b-nav a {
   font-size: 20px;
   padding: 5px 10px;
   margin: 0 10px;
}

.b-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
}

.b-header-mobile {
   display: none;
}

.b-header-mobile__burger {
   display: flex;
   justify-content: flex-end;
}

.b-header-mobile__group {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.site-popupmenu__content {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.site-popupmenu__content .b-logo {
   margin-bottom: 20px;
}

.site-popupmenu__content a {
   margin: 10px;
   padding: 5px 0;
   font-size: 22px;
}

.b-section-title {
   font-family: Roboto-Bold;
   font-size: 72px;
   font-size: clamp(32px, 12vw, 72px);
   line-height: 75px;
   margin-bottom: 60px;
}

.b-section-title.light {
   color: var(--b-color-4);
}

.b-section-title span {
   color: var(--b-color-2);
}

ul.b-nav {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
}

ul.b-nav > li {
   position: relative;
}

ul.b-nav > li > a {
   display: block;
   padding: 10px 20px;
   color: var(--b-color-1);
   text-decoration: none;
}

/* Подменю */
ul.submenu {
   list-style: none;
   margin: 0;
   padding: 15px;
   position: absolute;
   top: 100%;
   left: 0;
   display: none;
   z-index: 2;
   background-color: rgb(245, 243, 243);
   width: max-content;
}

ul.submenu li a {
   display: block;
   padding: 5px 0;
   margin: 7px 0;
   color: var(--b-color-1);
   text-decoration: none;
   font-size: 16px;
}

ul.submenu li a:hover {
   color: var(--b-color-3);
}

.cover {
   width: 100%;
   /* Фоновая картинка */
   background: url('/images_beton/cover.png') no-repeat center center;
   background-size: cover;
   aspect-ratio: 16 / 9;
   position: relative;
   max-height: 600px;
}

.cover-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   color: #fff;
   width: 100%;
}

.cover-content h1 {
   font-size: clamp(32px, 10vw, 96px);
   margin-bottom: 10px;
   text-transform: uppercase;
}

.cover-content h2 {
   font-size: clamp(20px, 4vw, 32px);
   margin-bottom: 40px;
   text-transform: uppercase;
   padding: 0 10px;
}

.b-button {
   border: none;
   background: var(--b-color-2);
   color: #fff;
   cursor: pointer;
   border-radius: 4px;
   padding: 20px 60px;
   font-size: clamp(1rem, 2vw, 1.5rem);
   display: inline-block;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.b-button.b-button_s {
   padding: 10px 30px;
}

.hero-content button {
  padding: 10px 20px;
  font-size: clamp(1rem, 2vw, 1.5rem);
  border: none;
  background: #ff6600;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.b-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.blk-1 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   width: 280px;
   height: 280px;
}

.blk-1__title {
   font-size: 20px;
   font-family: Roboto-Bold;
   text-align: center;
}

.blk-1__desc {
   font-size: 16px;
   text-align: center;
}

.div-blk-1 {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 25px;
   border: solid 10px var(--b-color-2);
   background-color: rgb(245, 243, 243);;
   padding: 30px;
   border-radius: 50px;
   position: relative;
   top: -60px;
}

.b-services {
   background-color: var(--b-color-6);
}

.b-services__items {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.b-services__item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 600px;
   height: 360px;
   border: solid 1px var(--b-color-1);
   border-radius: 20px;
   padding: 20px;
   background-color: var(--b-color-4);
}

.b-services__item-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 20px;
   margin-bottom: 20px;
}

.b-services__item-title {
   font-size: 24px;
   font-family: 'Roboto-Medium';
   text-align: center;
   margin-bottom: 20px;
   color: var(--b-color-1);
}

.o-div-steps {
   background-color: var(--b-color-6);
}

.o-steps {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 100px;
}

.o-step {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 245px;
   overflow: hidden;
}

.o-step__group_1 {
   display: inline-block;
   position: relative;
}

.o-step__group_2 {
   /* text-align: center; */
   color: white;
}

.o-step__num {
   font-size: 96px;
   font-family: Inter-ExtraBold;
   color: var(--o-color-3);
   letter-spacing: -5px;
   line-height: 140px;
}

.o-step__img {
   position: absolute;
   top: 0;
   right: 10px;
   width: 140px;
   height: 140px;
   background-color: var(--o-color-2);
   border: 10px solid var(--o-color-5);
   border-radius: 75px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.o-step__img img {
   width: 65px;
   height: 65px;
}

.o-step__title {
   font-family: Roboto-Medium;
   font-size: 16px;
   margin-bottom: 15px;
}

.o-step__desc {
   font-size: 14px;
}

.b-our-work__items {
   column-count: 3;
}

.b-our-work__item img {
   width: 100%;
   margin-bottom: 15px;
   display: block;
}

.o-why {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 30px;
}

.o-why__text {
   font-family: Roboto-Light;
   font-size: 18px;
   text-transform: uppercase;
   margin-bottom: 20px;
}

.o-why__title {
   margin-bottom: 40px;
}

.o-why__title.service {
   padding-top: 60px;
}

.o-why__col_1 {
   width: 40%;
}

.o-why__col_2 {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   width: 55%;
   gap: 20px;
   max-width: 600px;
}

.o-why__item {
   display: flex;
   flex-direction: column;
   width: 260px;
   overflow: hidden;
}

.o-why__group-1 {
   display: inline-flex;
   align-items: center;
   gap: 15px;
}

.o-why__group-1 div:first-child {
   font-size: 72px;
   font-family: Inter-ExtraBold;
   color: var(--o-color-3);
}

.o-why__group-1 div:last-child {
   font-size: 18px;
   font-family: Roboto-Medium;
   text-transform: uppercase;
}

.o-why__group-2 p {
   font-size: 14px;
}

.o-why__btn_small {
   display: none;
   text-align: center;
}

.o-comments {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 40px;
   margin-top: 75px;
}

.o-comment {
   width: 300px;
   position: relative;
   border: 1px solid var(--o-color-3);
   margin-bottom: 10px;
}

.o-comment__kavychki {
   position: absolute;
   right: 30px;
   top: -35px;
   width: 70px;
   height: 70px;
}

.o-comment__kavychki img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.o-comment__desc {
   padding: 15px;
   font-size: 15px;
   padding-top: 50px;
}

.o-comment__desc p {
   margin-bottom: 10px;
}

.o-comment__desc div {
   font-weight: 600;
   font-style: italic;
}

.b-addr {
   display: inline-flex;
   align-items: center;
   color: var(--b-color-1);
   font-size: 18px;
}

.nav-services__item a {
   text-decoration: none;
   font-size: 16px;
   padding: 3px 0;
   margin: 3px 0;
}

.site-popupmenu__content .nav-services__item a {
   font-size: 22px;
}

.nav-services__item a:hover {
   color: var(--b-color-3);
}

.b-footer__title {
   font-size: 32px;
   font-family: Roboto-Bold;
   margin-bottom: 20px;
}

.b-footer__phone {
   margin-bottom: 10px;
}

.b-footer__desc {
   max-width: 400px;
}

.b-footer__group {
   display: flex;
   gap: 20px;
}

.b-footer__content {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding-bottom: 20px;
}

.b-footer__col-3 {
   min-width: 540px;
}

.b-padding-top {
   padding-top: 80px;
}

.b-padding-bottom {
   padding-bottom: 80px;
}

.b-service {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.b-service__item {
   display: flex;
   gap: 20px;
   margin-bottom: 40px;
}

.b-service__col-l {
   width: 100%;
   max-width: 375px;
}

.b-service__col-l img {
   width: 100%;
   height: auto;
   display: block;
}

.b-service__col-r {
   width: 100%;
   max-width: 520px;
}

.b-service__item:nth-child(even) {
   flex-direction: row-reverse;
}

.b-service__item-title {
   font-family: 'Roboto-Medium';
   font-size: 20px;
   margin-bottom: 20px;
}

.b-service__item-desc {
   font-size: 14px;
   margin-bottom: 20px;
}

.b-service-img {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 20vw;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: clamp(22px, 4vw, 56px);
   text-align: center;
   font-family: 'Roboto-Bold';
   color: #fff;
   margin-bottom: 60px;
}

.b-contacts {
   margin-top: 120px;
}

.b-contacts__inner {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 40px;
   width: 100%;
}

.b-contacts__col-1 {
   width: 40%;
   max-width: 400px;
}

.b-contacts__col-2 {
   width: 50%;
}

.map {
   width: 100%;
   height: 400px;
}