/*!
Theme Name: finishline
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: finishline
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

finishline is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
:root {
   --accent: #FFBE68;
   --accentbg: #FFBE6820;
   --black: #1d1d1d;
   --accent-gray: #606063;
   --light-gray: #f5f5f5;
   --medium-gray: #d9d9d9;
   --white: #ffffff;
   --gray: #777777;
   --grayblue: #EEF3F6;
   --graybluetext: #97A1AE;
   --shadow: 3px 3px 15px #00000030;
   --transition: all .3s ease-in-out;
   --radius: 6px;
}

* {
   font-family: 'Montserrat', sans-serif;
   box-sizing: border-box;
}

html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
}

body {
   overflow-x: hidden;
   margin: 0;
}

main {
   display: block;
   min-height: calc(100vh - 250px);
}

img {
   border-style: none;
}

.no-scroll {
   overflow: hidden;
}

.container {
   padding-left: 5%;
   padding-right: 5%;
   padding-left: 16px;
   padding-right: 16px;
   max-width: 1410px;
   width: 100%;
   margin: auto;
}

h1 {
   font-size: 28px;
   font-weight: 500;
   color: var(--black);
   text-transform: uppercase;
   text-align: center;
   margin-bottom: 64px;
}

h1._right {
   margin-top: 0;
   margin-bottom: 32px;
   text-align: left;
}

h2 {
   font-size: 24px;
   font-weight: 500;
   position: relative;
   display: inline-block;
   left: 50%;
   transform: translateX(-50%);
   margin-bottom: 32px;
   margin-top: 64px;
}

h2::after {
   content: '';
   display: block;
   width: 85px;
   height: 2px;
   margin-top: 15px;
   background-color: var(--accent);
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 35px;
   padding-bottom: 35px;
}

.btn {
   color: var(--black);
   text-decoration: none;
   background-color: var(--accent);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
}

.btn:hover {
   text-decoration: none;
}

.mobile-logo {
   display: none;
}

.logo img {
   max-width: 180px;
}

.menu {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 90px;
}

.menu a {
   text-decoration: none;
   color: var(--black);
   font-size: 18px;
   transition: all .15s ease-in-out;
}

.menu a:hover {
   color: var(--accent-gray);
}

.contacts {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
}

.social {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
}

.social a img {
   width: 30px;
   height: 30px;
}

.phones {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
}

.phones a {
   text-decoration: none;
   color: var(--black);
   font-size: 18px;
}

.breadcrumbs {
   margin-bottom: 50px;
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
}

.breadcrumb-item {
   color: var(--black);
   text-decoration: none;
}

.breadcrumb-item:hover {
   text-decoration: none;
}

.breadcrumb-item._active {
   color: var(--gray);
}

.banner img {
   width: 100%;
}

.projects {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
}

.project-card {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding-bottom: 24px;
}

.project-card__image {
   display: block;
   height: 250px;
   overflow: hidden;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
}

.project-card__image img {
   width: 100%;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
}

.project-card__image-bg {
   display: block;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
   transition: var(--transition);
}

.project-card__image-bg.lazyloaded {
   transition: var(--transition);
}

.project-card:hover .project-card__image-bg {
   transform: scale(1.1);
}

.project-card__title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 32px;
   margin-bottom: 40px;
   padding-left: 16px;
   padding-right: 16px;
   position: relative;
}

.project-card__title-name {
   color: var(--black);
   border-bottom: 1px dashed;
   font-weight: 500;
   font-size: 22px;
   text-decoration: none;
}

.project-card__title-name:hover {
   text-decoration: none;
}

.project-card__title-square {
   font-size: 22px;
   font-weight: 500;
}

.project-card__title-sizes {
   position: absolute;
   right: 16px;
   top: -24px;
   color: var(--gray);
   display: flex;
   align-items: center;
   gap: 3px;
   font-size: 20px;
}

.project-card__info {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 16px;
   padding-right: 16px;
}

.project-card__info-item {
   color: var(--gray);
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 4px;
}

.project-card__info-item img {
   margin-right: 2px;
   width: 28px;
}

.project-card ._quantity {
   font-weight: 500;
   font-size: 18px;
}

.project-card__detail {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 15px;
   padding-right: 15px;
   margin-top: 40px;
}

.project-card__detail-price {
   color: var(--accent);
   font-size: 22px;
   font-weight: 500;
}

.project-card__detail-btn {
   font-size: 16px;
   padding: 12px 24px;
}

.btn._show-more {
   font-weight: 500;
   font-size: 16px;
   padding: 20px 45px;
   margin-top: 64px;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}

.complex-service-list__item {
   display: grid;
   grid-template-columns: 30px 1fr;
   align-items: center;
   gap: 12px;
   font-size: 16px;
   margin-bottom: 12px;
}

.complex-service-list__item::before {
   content: '';
   display: block;
   width: 100%;
   height: 30px;
   background-image: url('/wp-content/themes/finishline/img/icons/check-orange.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.gift-project {
   display: flex;
   justify-content: space-between;
   gap: 80px;
}

.gift-project__img {
   width: 100%;
   max-width: 500px;
   margin: auto;
}

.gift-project__text {
   font-size: 16px;
   line-height: 150%;
}

.gift-project__text p:not(:last-of-type) {
   margin-top: 0;
   margin-bottom: 24px;
}

.gift-project__text p:last-of-type {
   margin-top: 0;
   margin-bottom: 0;
}

.detail-info {
   display: flex;
   gap: 64px;
}

.detail-info__images {
   max-width: 600px;
}

.detail-info__images img {
   width: 100%;
}

.detail-info__images .slick-prev,
.detail-info__images .slick-next {
   width: 35px;
   height: 35px;
   background-color: var(--grayblue);
   border-radius: 50%;
   opacity: .90;
   z-index: 1;
}

.detail-info__images .slick-prev {
   left: 20px;
}

.detail-info__images .slick-next {
   right: 20px;
}

.detail-info__images .slick-prev::before,
.detail-info__images .slick-next::before {
   content: '';
   display: block;
   width: 12px;
   height: 12px;
   background-image: url('/wp-content/themes/finishline/img/icons/arrow-orange-right.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   opacity: 1;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.detail-info__images .slick-prev::before {
   transform: translate(-50%, -50%) rotate(180deg);
}

.detail-info__images.slick-dotted.slick-slider {
   margin-bottom: 0;
}

.detail-info__images .slick-dots {
   bottom: unset;
}

.detail-info__images .slick-dots li button:before {
   content: '';
   width: 10px;
   height: 10px;
   background-color: var(--medium-gray);
   border-radius: 50%;
   opacity: 1;
}

.detail-info__images .slick-dots li.slick-active button:before {
   opacity: 1;
   background-color: var(--accent);
}

.detail-price {
   font-size: 24px;
   font-weight: 500;
   color: var(--accent);
}

.detail-info__data {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
   gap: 48px;
}

.detail-info__data h1._right {
   margin-bottom: 18px;
}

.detail-info__properties {
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 32px;
   column-gap: 64px;
}

.detail-property {
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 18px;
   font-weight: 500;
   color: var(--gray);
}

.detail-property img {
   width: 35px;
}

.detail-info__prices-title {
   font-size: 20px;
}

.detail-info__prices-toggler {
   margin-top: 24px;
   margin-bottom: 16px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border-radius: var(--radius);
}

.detail-info__prices-toggler__item {
   padding: 12px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   color: var(--gray);
   transition: var(--transition);
   cursor: pointer;
   border-radius: var(--radius);
}

.detail-info__prices-toggler__item._active {
/* .detail-info__prices-toggler__item._active:not(:only-child) { */
   background-color: var(--accentbg);
}

.toggler-item-name {
   font-size: 14px;
   text-align: center;
}

.detail-info__prices-toggler__item img {
   width: 64px;
}

.toggler-item-price {
   font-weight: 500;
}

.detail-info__prices-info {
   font-size: 14px;
   color: var(--gray);
}

.detail-plan {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 64px;
}

.detail-plan a {
   text-align: center;
}

.detail-plan img {
   width: 80%;
   margin: auto;
}

.specification-list__item {
   font-size: 16px;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
   gap: 5px;
}

.specification-list__item-name::after {
   content: '-';
   margin-left: 5px;
}

.specification-list__item-value {
   font-weight: 600;
}

.features {
   display: flex;
   justify-content: center;   
}

.feature {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 25%;
}

.feature-img {
   margin-bottom: 20px;
   width: 70px;
   height: 70px;
}

.feature-name {
   font-size: 18px;
   font-weight: 500;
   text-align: center;
}

.feature-subtext {
   margin-top: 12px;
   font-size: 13px;
   max-width: 250px;
   text-align: center;
}

.feature-subtext-mobile {
   display: none;
}

.detail-tabs {
   margin-top: 64px;
   padding: 0;
}

.detail-tab-nav {
   padding: 3px;
   background-color: var(--light-gray);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
}

.tab-btn {
   cursor: pointer;
   color: var(--accent-gray);
   font-size: 14px;
   transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20%;
   text-align: center;
   border-radius: 4px;
   padding-left: 12px;
   padding-right: 12px;
   height: 100%;
}

.tab-btn._active {
   color: var(--black);
   background-color: var(--accent);
}

.tab-pane {
   display: none;
   transition: var(--transition);
}

.tab-pane._show {
   display: block;
}

.tab-content {
   margin-top: 24px;
   padding-left: 16px;
   padding-right: 16px;
   max-width: 1410px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

.tab-pane__content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.tab-pane__content img {
   width: auto;
   max-height: 400px;
   margin: auto;
   max-width: 100%;
}

.tab-pane__content-info ul {
   padding-left: 16px;
}

.tab-pane__content-info ul > li {
   margin-bottom: 8px;
}

.service {
   display: flex;
   gap: 100px;
}

.service-image {
   width: 600px;
}

.service-image img {
   width: 100%;
}

.service-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.service-list__item {
   display: grid;
   grid-template-columns: 32px auto;
   align-items: center;
   gap: 15px;
   max-width: 650px;
}

.service-list__item ._number {
   color: var(--accent);
   font-weight: 500;
   font-size: 14px;
   border-radius: 50%;
   border: 1px solid var(--accent);
   width: 100%;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.service-list__item ._service {
   font-size: 16px;
}

.privacy {
   line-height: 1.5;
}

.portfolio-projects {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.portfolio-card {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

.portfolio-card__image {
   display: block;
   height: 350px;
   overflow: hidden;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
}

.portfolio-card__image-bg {
   display: block;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
   transition: var(--transition);
}

.portfolio-card__image-bg.lazyloaded {
   transition: var(--transition);
}

.portfolio-card:hover .portfolio-card__image-bg {
   transform: scale(1.1);
}

.portfolio-card__title {
   padding: 32px 16px;
   text-align: center;
   background-color: var(--grayblue);
}

.portfolio-card__title a {
   color: var(--black);
   border-bottom: 1px dashed;
   font-weight: 500;
   font-size: 20px;
   text-decoration: none;
}

.detail-portfolio__images {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.detail-portfolio__item {
   display: block;
   height: 350px;
   overflow: hidden;
   border-radius: var(--radius);
}

.detail-portfolio__item-bg {
   display: block;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   transition: var(--transition);
}

.detail-portfolio__item-bg.lazyloaded {
   transition: var(--transition);
}

.detail-portfolio__item:hover .detail-portfolio__item-bg {
   transform: scale(1.1);
}

footer {
   margin-top: 80px;
   padding-top: 60px;
   padding-bottom: 60px;
   background-color: var(--grayblue);
}

.footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.f-logo-block {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 35px;
}

.f-logo img {
   max-width: 150px;
}

.f-company {
   color: var(--graybluetext);
   font-size: 12px;
}

.f-company div:first-of-type {
   margin-bottom: 5px;
}

.f-company._mobile {
   display: none;
}

.f-menu {
   display: flex;
   gap: 90px;
}

.f-menu-title {
   font-weight: 500;
   font-size: 16px;
   margin-bottom: 20px;
}

.f-menu-items {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.f-menu-items a {
   color: var(--graybluetext);
   text-decoration: none;
   font-size: 14px;
}

.f-menu-block .social {
   justify-content: flex-start;
   gap: 6px;
   margin-top: 10px;
}

.f-menu-block .social a img {
   width: 25px;
   height: 25px;
}

.footer-legal {
   text-align: center;
   font-size: 12px;
   padding: 20px 16px;
   background: #e4eaee;
   color: var(--graybluetext);
   line-height: 1.5;
}

.footer-privacy {
   border-bottom: 1px dashed;
   color: var(--graybluetext);
   text-decoration: none;
}

.footer-oferta {
   margin-top: 10px;
}

#footer-legal_info-open {
   border-bottom: 1px dashed;
   color: var(--graybluetext);
   cursor: pointer;
}

.footer-legal-modal {
   max-width: 450px;
   padding: 16px 24px;
   font-size: 13px;
   line-height: 1.3;
   border-radius: 6px;
}

.footer-legal-modal ._title {
   font-size: 14px;
   font-weight: 600;
}

.footer-legal-modal a {
   border-bottom: 1px dashed;
   color: var(--accent-gray);
   text-decoration: none;
   outline: none;
}

.footer-legal-modal ._close {
   margin: auto;
   padding: 3px 5px;
   cursor: pointer;
}

@media (max-width: 1199.9px) {
   .logo img {
      max-width: 150px;
   }

   .menu {
      gap: 65px;
   }

   .menu a {
      font-size: 16px;
   }

   .phones a {
      font-size: 16px;
   }

   .project-card__title-name {
      font-size: 18px;
   }

   .project-card__title-square {
      font-size: 18px;
   }
   
   .project-card__title-sizes {
      font-size: 18px;
   }

   .project-card__info-item img {
      width: 20px;
   }

   .project-card__info-item {
      font-size: 12px;
   }

   .project-card ._quantity {
      font-size: 14px;
   }

   .project-card__detail-price {
      font-size: 18px;
   }

   .project-card__detail-btn {
      font-size: 14px;
      padding: 12px 16px;
   }

   .detail-info {
      gap: 48px;
   }

   .detail-info__images {
      max-width: 500px;
   }

   .detail-info__prices-toggler__item {
      padding: 8px;
   }

   .detail-info__prices-toggler__item img {
      width: 48px;
   }

   .toggler-item-name {
      font-size: 12px;
   }

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

   .portfolio-card__image {
      height: 300px;
   }

   .detail-portfolio__item {
      height: 300px;
   }

}

@media (max-width: 991.9px) {

   h2 {
      margin-top: 48px;
   }

   .logo img {
      max-width: 130px;
   }
   
   .menu {
      gap: 30px;
   }

   .menu a {
      font-size: 14px;
   }

   .social a img {
      width: 25px;
      height: 25px;
   }

   .phones a {
      font-size: 14px;
   }

   .projects {
      grid-template-columns: 1fr 1fr;
   }

   .project-card__info-item img {
      width: 25px;
   }

   .btn._show-more {
      margin-top: 40px;
   }

   .gift-project {
      flex-direction: column;
      gap: 24px;
   }

   .detail-info {
      flex-direction: column;
   }

   .detail-info__images {
      margin: auto;
      max-width: 100%;
   }

   .detail-info__data {
      gap: 48px;
   }

   .detail-info__data h1._right {
      font-size: 24px;
      margin-bottom: 12px;
   }

   .detail-price {
      font-size: 20px;
   }

   .detail-info__properties {
      display: flex;
      justify-content: space-around;
      align-items: center;
   }

   .detail-property {
      font-size: 16px;
   }

   .detail-property img {
      width: 32px;
   }

   .detail-info__prices-title {
      font-size: 18px;
   }

   .detail-info__prices-toggler {
      margin-top: 16px;
   }

   .detail-plan {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .feature-img {
      width: 60px;
      height: 60px;
   }

   .feature-name {
      font-size: 15px;
   }

   .feature-subtext {
      font-size: 10px;
   }

   .detail-tabs {
      margin-top: 48px;
   }

   .detail-tabs .container {
      padding: 0;
   }

   .detail-tabs .tab-content {
      padding-left: 16px;
      padding-right: 16px;
   }

   .detail-tab-nav {
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 0;
   }

   .detail-tab-nav::-webkit-scrollbar {
      display: none;
   }
   
   .tab-btn {
      font-size: 12px;
      min-width: 200px;
   }

   .tab-pane__content {
      grid-template-columns: 1fr;
   }

   .portfolio-projects {
      grid-template-columns: repeat(2, 1fr);
   }

   .detail-portfolio__images {
      grid-template-columns: repeat(2, 1fr);
   }

   .f-logo img {
      max-width: 100px;
   }

   .f-company {
      font-size: 9px;
   }

   .f-menu {
      gap: 65px;
   }

   .f-menu-title {
      font-size: 15px;
   }

   .f-menu-items a {
      font-size: 13px;
   }


}

@media (max-width: 767.9px) {

   .accent-button {
      width: 100%;
      font-size: 16px;
      padding: 14px;
   }

   h1 {
      font-size: 20px;
      margin-top: 24px;
      margin-bottom: 24px;
   }

   h2 {
      font-size: 20px;
      margin-top: 32px;
   }

   h2::after {
      width: 50px;
      margin-top: 10px;
   }

   .mobile-logo {
      display: flex;
      margin-top: 16px;
      margin-bottom: 16px;
      align-items: center;
      justify-content: space-between;
   }

   .mobile-logo img {
      max-width: 100px;
   }

   .mobile-menu-toggler-btn {
      height: 30px;
      width: 30px;
      background-color: var(--accent);
      border-radius: var(--radius);
      position: relative;
   }

   .mobile-menu-toggler-btn span,
   .mobile-menu-toggler-btn span::before,
   .mobile-menu-toggler-btn span::after {
      width: 13px;
      height: 2px;
      background-color: var(--black);
      transition: all .5s ease-in-out;
   }

   .mobile-menu-toggler-btn span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%);
   }

   .mobile-menu-toggler-btn span::before,
   .mobile-menu-toggler-btn span::after {
      content: '';
      position: absolute;
   }

   .mobile-menu-toggler-btn span::before {
      transform: translateY(-4px);
   }

   .mobile-menu-toggler-btn span::after {
      transform: translateY(4px);
   }

   .mobile-menu-toggler-btn._active span {
      background-color: transparent;
   }

   .mobile-menu-toggler-btn._active span::before {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
   }

   .mobile-menu-toggler-btn._active span::after {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
   }

   .header {
      background-color: var(--grayblue);
      height: 100%;
      position: fixed;
      padding-top: 20px;
      z-index: 10;
      display: none;
   }

   .header._active {
      display: flex;
   }

   .logo {
      display: none;
   }

   .menu {
      gap: 15px;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 40px;
   }

   .menu a {
      font-size: 16px;
      font-weight: 500;
   }

   .contacts {
      flex-direction: column-reverse;
      align-items: flex-start;
   }

   .phones {
      gap: 10px;
   }

   .phones a {
      font-size: 16px;
      font-weight: 500;
   }

   .breadcrumbs {
      margin-bottom: 15px;
      font-size: 12px;
   }

   .projects {
      grid-template-columns: 1fr;
   }

   .project-card__title-name {
      font-size: 20px;
   }

   .project-card__title-square {
      font-size: 20px;
   }

   .project-card__info-item img {
      width: 25px;
   }

   .project-card__info-item {
      font-size: 14px;
   }

   .project-card ._quantity {
      font-size: 16px;
   }

   .project-card__info {
      justify-content: flex-start;
      gap: 20px;
   }

   .btn._show-more {
      margin-top: 32px;
      width: 100%;
      padding: 15px 45px;
      font-size: 14px;
   }

   .detail-info__properties {
      display: grid;
   }

   .detail-tabs {
      margin-top: 32px;
   }

   .complex-service-list__item {
      font-size: 14px;
   }

   .gift-project__text {
      font-size: 14px;
   }

   .service-image {
      display: none;
   }

   .service-list__item ._service {
      font-size: 14px;
   }

   .portfolio-card__image {
      height: 250px;
   }

   .portfolio-card__title a {
      font-size: 16px;
   }

   .detail-portfolio__item {
      height: 250px;
   }

   footer {
      padding-top: 15px;
      padding-bottom: 20px;
      margin-top: 48px;
   }

   .footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 25px;
   }

   .f-company {
      display: none;
   }

   .f-company._mobile {
      display: block;
   }

   .f-menu {
      flex-direction: column;
      gap: 20px;
   }

   .f-menu-title {
      margin-bottom: 10px;
   }

   .footer .phones {
      align-items: flex-start;
   }

   .f-menu-block .social {
      margin-top: 20px;
   }

   .footer-legal {
      font-size: 10px;
   }

}

@media (max-width: 574.9px) {
   .project-card__title-name {
      font-size: 18px;
   }

   .project-card__title-square {
      font-size: 18px;
   }

   .project-card__title-sizes {
      font-size: 16px;
      top: -20px;
   }

   .project-card__info-item img {
      width: 20px;
   }

   .project-card__info-item {
      font-size: 12px;
   }

   .project-card ._quantity {
      font-size: 14px;
   }

   .project-card__info {
      justify-content: space-between;
      gap: unset;
   }

   .detail-info__prices-title {
      font-size: 16px;
   }

   .detail-info__data {
      gap: 32px;
   }

   .detail-info__prices-toggler__item {
      padding: 4px;
   }

   .detail-info__prices-toggler__item img {
      width: 36px;
   }

   .toggler-item-name {
      font-size: 12px;
   }

   .toggler-item-price {
      font-size: 12px;
   }

   .detail-info__prices-info {
      font-size: 12px;
   }

   .specification-list__item {
      font-size: 14px;
      display: block;
   }

   .features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      row-gap: 40px;
   }

   .feature {
      width: 100%;
   }

   .feature-subtext {
      display: none;
   }

   .feature-subtext-mobile {
      display: block;
      font-size: 10px;
      margin-top: 24px;
      text-align: center;
   }

   .feature-name {
      font-size: 13px;
   }

   .feature-img {
      width: 40px;
      height: 40px;
   }

   .complex-service-list__item {
      grid-template-columns: 24px auto;
   }

   .complex-service-list__item::before {
      height: 24px;
   }

   .portfolio-projects {
      grid-template-columns: 1fr;
   }

   .detail-portfolio__images {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 374.9px) {
   .project-card__title-name {
      font-size: 16px;
   }

   .project-card__title-square {
      font-size: 16px;
   }

   .project-card__title-sizes {
      font-size: 14px;
      top: -18px;
   }

   .project-card__info-item img {
      width: 18px;
   }

   .project-card__info-item {
      font-size: 10px;
   }

   .project-card ._quantity {
      font-size: 12px;
   }

   .project-card__info {
      justify-content: space-between;
   }

   .project-card__detail-price {
      font-size: 16px;
   }

   .detail-info__properties {
      row-gap: 48px;
      column-gap: 32px;
   }

   .project-card__detail-btn {
      font-size: 12px;
   }

   .detail-property img {
      width: 28px;
   }

   .detail-property {
      font-size: 14px;
   }

   .detail-info__prices-toggler__item {
      padding: 2px;
   }

   .detail-info__prices-toggler__item img {
      width: 32px;
   }

   .specification-list__item {
      font-size: 12px;
   }

   .feature-name {
      font-size: 12px;
   }

   .toggler-item-name {
      font-size: 10px;
   }

   .toggler-item-price {
      font-size: 10px;
   }

   .complex-service-list__item {
      font-size: 13px;
   }

   .footer-legal-modal {
      padding: 16px;
      font-size: 12px;
   }
}