.hero-bg-mobile{
display: none;
}
.hero-section {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.hero-section:before{
content: "";
position: absolute;
top: 0;
height: 250px;   width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
z-index: 1;
}
.hero-section .container{
position: relative;
max-width: 1920px;
width: 100%;
padding: 0;
height: 1080px;
display: flex;
flex-direction: column;
justify-content: end;
}
.hero-inner-title{
max-width: 1920px;
position: relative;
width: 100%;
height: 100%;
padding: 20px 60px 50px 60px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: end;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.hero-inner-title:before{
content: "";
width: 100%;
height: 480px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
position: absolute;
bottom: 0;
left: 0;
opacity: 0.7;
}
.background-hero-image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
}
.hero-title{
color: var(--color-white);
margin-bottom: 11px;
max-width: 440px;
text-transform: uppercase;
font-weight: 600;
z-index: 1;
}
.hero-subtitle{
color: var(--color-white);
display: block;;
max-width: 240px;
font-weight: 600;
z-index: 1;
}
.hero-advantages-wrapper{
max-width: 1920px;
background-color: var(--color-accent);
display: flex;
justify-content: space-between;
align-items: center;
height: 195px;
}
.hero-advantages-item{
color: var(--color-white);
display: flex;
flex-direction: column;
padding: 50px;
justify-content: center;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
.hero-advantages-item svg{
flex: 35px 1 0;
}
.hero-advantages-item:last-child{
background-color: var(--color-primary);
flex-direction: row;
justify-content: center;
gap: 40px;
align-items: center;
height: 100%;
cursor: pointer;
}
.hero-advantages-item:last-child:hover{
background-color: var(--color-white);
}
.hero-advantages-item:last-child:hover .hero-advantages-subtitle{
color: var(--color-primary);
}
.hero-advantages-item:last-child:hover svg circle{
fill: var(--color-text-red);
opacity: 1;
}
.hero-advantages-item:last-child:hover svg path{
stroke: var(--color-primary);
}
.hero-advantages-item .hero-advantages-title{
font-weight: 600;
text-align: left;
}
.hero-advantages-inner{
display: flex;
flex-direction: column-reverse;
max-width: 310px;
}
.hero-advantages-inner .hero-advantages-title{
color: var(--color-text-red);
text-transform: uppercase;
}
.hero-advantages-inner .hero-advantages-subtitle{
color: #d9d9d9;
}
.hero-advantages-title{
font-size: 1.5rem;
margin-bottom: 0.625rem;
}
.hero-advantages-subtitl{
font-size: 1rem;
}
.hero-block{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-white);
right: 4rem;
top: 320px;
}
.hero-block__image-rating{
position: absolute;
top: 0;
right: 0;
background-color: var(--color-white);
width: 198px;
padding: clamp(0.438rem, 0.211vw + 0.371rem, 0.625rem) 0 clamp(0.625rem, 0.282vw + 0.537rem, 0.875rem) clamp(0.438rem, 0.211vw + 0.371rem, 0.625rem);
}
.hero-block__image{
max-width: 350px;
width: 100%;
object-fit: cover;
padding: 1.25rem;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}
.hero-block__text{
font-size: 1.625rem;
line-height: 0.95;
text-align: center;
max-width: 240px;
margin-bottom: clamp(1.25rem, 0.493vw + 1.096rem, 1.688rem);
}
.hero-block__btn{
padding: 1.563rem 1rem;
width: 100%;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}  .about-the-project { margin-top: clamp(60px, 10vw, 160px);
margin-bottom: clamp(60px, 10vw, 160px);
background-repeat: no-repeat;
background-position-y: 130px;
background-position-x: 0;
}
.about-the-project .container{
max-width: 1560px;
width: 100%;
margin: 0 auto;
}
.about-the-project-wrapper{
display: flex;
justify-content: space-between;
gap: 30px;
}
.about-the-project-image {
margin-bottom: 100px;
}
.about-the-project-item{
width: 25%;
}
.about-the-project-item img{
height: 115px;
}
.about-the-project-item-title{
font-size: 2rem;
padding-top: 40px;
margin-bottom: 30px;
font-weight: 400;
line-height: 1.1;
}
.about-the-project-item-subtitle{
font-size: 19px;    
}
.about-the-project-icon{
display: none;
}
.about-the-project-inner{
display: flex;
flex-direction: column;
align-items: center;
}
.about-the-project-title{
font-size: 60px;
}
.about-the-project-subtitle{
max-width: 1000px;;
text-align: center;
padding-top: 39px;
margin-bottom: 39px;
}
.about-the-project-link{
font-size: 18px;
color: var(--color-accent);
font-weight: 600;
margin-bottom: 100px;
text-decoration: none;
padding: 1.363rem 1rem;
border: 1px solid var(--color-accent);
max-width: 350px;
width: 100%;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
.about-the-project-link:hover{
background-color: var(--color-accent);
color: var(--color-white);
}  .house{
background-color: var(--color-primary);
}
.house .container{
padding-top: clamp(60px, 10vw, 160px); padding-bottom: clamp(60px, 10vw, 160px);
}
.house-header{
color: var(--color-light);
display: flex;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 45px;
}
.house-header__text{
max-width: 430px;
}
.house-header__title{
font-size: 60px;
font-weight: 400;
line-height: 1;
}
.house-header__subtitle{
font-size: 16px;
}  .filter-cards{
display: flex;
flex-wrap: wrap;
gap: clamp(0.5rem, 0.2rem + 1.28vw, 1rem);
align-items: start;
justify-content: end;
}
.filter-cards__btn {
font-size: clamp(0.875rem, 0.5rem + 1.6vw, 1.5rem);
line-height: 1;
cursor: pointer;
padding: clamp(0.938rem, 0.75rem + 0.8vw, 1.25rem) clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--color-white);
border-radius: 100px;
background-color: transparent;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
.filter-cards__btn.active{
background-color: var(--color-white);
color: var(--color-text-light);
}   .house-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: clamp(20px, 5vw, 70px); }
.house-grid .card {
transition: opacity 0.3s ease, transform 0.6s ease;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: opacity 0.3s ease, transform 0.6s ease;
-moz-transition: opacity 0.3s ease, transform 0.6s ease;
-ms-transition: opacity 0.3s ease, transform 0.6s ease;
-o-transition: opacity 0.3s ease, transform 0.6s ease;
} .card {
width: 100%;
margin: 0 auto;
background: #fff;
overflow: hidden;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}
.card.card--hidden {
opacity: 0;
position: absolute;
transform: scale(0.8);
pointer-events: none;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
} .card__gallery {
width: 100%; 
}
.card__gallery .swiper-pagination{
bottom: 31px !important;
}
.card__gallery .swiper-pagination-bullet{
height: 3px;
width: 60px;
background-color: var(--color-white);
opacity: 1;
border-radius: 1000px;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
-ms-border-radius: 1000px;
-o-border-radius: 1000px;
}
.card__gallery .swiper-pagination-bullet-active{
background-color: var(--color-text-red);
} .card__gallery img{
width: 100%;
height: 365px;
object-fit: cover;  }
.card__gallery .swiper-wrapper .swiper-slide:last-child img{
object-fit: contain;
}
.card__status {
position: absolute;
top: clamp(1.25rem, 1.137rem + 0.48vw, 1.438rem);
left: 50%;
transform: translateX(-50%);
z-index: 1;
font-size: clamp(0.875rem, 0.8rem + 0.32vw, 1rem);
padding: clamp(0.5rem, 0.2rem + 1.28vw, 1rem) clamp(1.75rem, 1.6rem + 0.64vw, 2rem);
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
.card__status.card__status--done{
color: var(--color-white);
background-color: #7CB008;
}
.card__status.card__status--not{
color: var(--color-primary);
background-color: var(--color-white);
}
.card__body{
padding: clamp(2.5rem, 2.2rem + 1.28vw, 3rem) clamp(1.25rem, 0.688rem + 2.4vw, 2.188rem) clamp(6.875rem, 6.2rem + 2.88vw, 8rem) clamp(1.25rem, 0.688rem + 2.4vw, 2.188rem);
color: var(--color-text-light);
}
.card__body .card__title{
font-size: clamp(2rem, 1.925rem + 0.32vw, 2.125rem);
line-height: 1;
margin-bottom: 1.5rem;
}
.card__items{
display: flex;
flex-wrap: wrap;
column-gap: 2.188rem;
}
.card__item{
display: flex;
flex-direction: column;
}
.card__item-label{
opacity: .6;
}
.card__item-value{
font-size: 1.25rem;
}
.card__btn{
position: absolute;
bottom: 0;
width: 100%;
left: 0;
padding: clamp(1.563rem, 1.337rem + 0.96vw, 1.938rem) 1rem;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}  .pay{ background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}
.pay .container{
padding-top: clamp(5rem, 2rem + 12.8vw, 10rem);
padding-bottom: clamp(5rem, 2rem + 12.8vw, 10rem);
display: flex;
justify-content: space-between;
row-gap: 2.125rem;
column-gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.pay-wrapper-left{
color: var(--color-text);
letter-spacing:  -0.01em;
}
.pay-title{
font-size: clamp(4.25rem, 2.3rem + 8.32vw, 7.5rem);
font-weight: 400;
}
.pay-title span{
color: #7CAF08;
}
.pay-subtitle{
font-size: clamp(1rem, 0.55rem + 1.92vw, 1.75rem);
}
.pay-wrapper-right{
}
.pay-inner{
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
max-width: 344px;
width: 100%;
margin-bottom: 1.625rem;
}
.pay-image{
width: 101px;
height: 101px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
.pay-inner-text{
color: var(--color-primary);
font-size: 1.5rem;
}
.pay-button{
width: 100%;
padding: 1.563rem 1rem;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.pay-bg-mobile{
display: none;
}  .team-section{
background-image: var(--color-light);
color: var(--color-text);
background-repeat: no-repeat;
background-size: 50%;
background-position: 100% 41%;
}
.team-section .container{ padding-top: clamp(60px, 10vw, 160px);
padding-bottom: clamp(60px, 10vw, 160px);
}
.team-wrapper{
display: flex;
justify-content: space-between;
align-items: stretch;
column-gap: 1rem;
}
.team-left{
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.5rem;
flex: 320px 0 1;
font-size: clamp(1rem, 0.887rem + 0.48vw, 1.188rem);
}
.team-left__logo{
max-width: 212px;
width: 100%;
}
.team-right{
flex: 780px 0 1;
}
.team-title{
font-size: clamp(2rem, 1.515rem + 2.071vw, 4rem);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 1.25rem;
}
.team-subtitle{
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: clamp(2.5rem, 1.62rem + 2.817vw, 5rem);
}
.team-subtitle__logo{
width: 93px;
}
.team-subtitle__text{
font-size: 1.188rem;
font-weight: 400;
max-width: 230px;
display: block;
}
.team-pros{
display: flex;
flex-wrap: wrap;
gap: clamp(1.25rem, 0.174rem + 2.459vw, 3.125rem);
}
.team-pros__item{
}
.team-pros__text{
display: flex;
flex-direction: column;
font-size: 4.375rem;
font-weight: 400;
letter-spacing: -2.22px;
}
.team-pros__text span {
display: inline-block;
letter-spacing: 0;
font-size: 1.188rem;
}
.workers{
display: flex;
gap: clamp(0.938rem, 0.471rem + 1.066vw, 1.75rem);
}
.workers-grid{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(0.938rem, 0.471rem + 1.066vw, 1.75rem);
}
.workers-wrapper{
max-width: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.workers-wrapper__title{
font-size: 3.75rem;
font-weight: 400;
line-height: 1;
}
.workers-inner{
}
.workers-inner__text{
font-size: 1.25rem;
margin: 2rem 0;
display: inline-block;
}
.workers-inner-btn{
padding: 1.563rem;
width: 100%;
}  .kviz{
background-color: var(--color-primary); padding-top: clamp(60px, 10vw, 160px);
padding-bottom: clamp(60px, 10vw, 160px);
}
.kviz__text{
display: block;
font-size: clamp(1.25rem, 0.845vw + 0.986rem, 2rem);
max-width: 825px;
margin: 0 auto;
text-align: center;
font-weight: 400;
color: var(--color-white);
padding-bottom: 3.75rem;
}
.kviz .marquiz__container_has_button{
background-color: var(--color-primary);
}
.kviz .marquiz__container_has_button .marquiz__button{
width: 100%;
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
.kviz .marquiz__container_has_button .marquiz__button:hover{
background-color: var(--color-dark); 
} .footer-title{
color: var(--color-light);
} .revies {
background-position: right bottom;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.revies .container{ padding-top: clamp(60px, 10vw, 160px);
padding-bottom: clamp(60px, 10vw, 160px);
}
.revies__title{
font-size: 60px;
line-height: 1;
font-weight: 400;
}
.revies-wrap{
display: flex;
justify-content: space-between;
gap: 1.25rem;
align-items: center;
margin-bottom: clamp(2.5rem, 1.408vw + 2.06rem, 3.75rem);
}
.revies-swiper .swiper-slide{
box-sizing: border-box;
background-color: var(--color-white);
padding: clamp(2.375rem, 1.761vw + 1.825rem, 3.938rem) clamp(2.375rem, 4.366vw + 1.011rem, 6.25rem) clamp(2.375rem, 1.761vw + 1.825rem, 3.938rem) 2.375rem
}
.revies-wrap, .revies .swiper{
max-width: 960px;
margin-left: 0;
}
.revies-buttons{
display: flex;
justify-content: end;
align-items: center;
gap: 12px;
}
.revies-prev:after, .revies-next:after{
content: "" !important;
display: none;
}
.revies-prev, .revies-next{
width: 64px !important;
height: 64px !important;
position: relative !important;
margin: 0 !important;
top: unset !important;
left: unset !important;
margin-top: 0 !important;
right: unset !important;
}
.revies-bg-mobile{
display: none;
}
.review-card{
}
.review-card__header{
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: 5px;
}
.review-card__name {
display: inline-block;
font-size: clamp(1.125rem, 0.536vw + 0.857rem, 1.5rem);
font-weight: 600;
width: fit-content;
}
.review-card__rating {
display: inline-block;
font-size: clamp(1.125rem, 0.536vw + 0.857rem, 1.5rem);
font-weight: 600;
width: fit-content;
}
.review-card__rating svg {
width: 20px;
height: 20px;   
margin-bottom: -2px;
margin-right: 5px;
}
.review-card__date {
display: block;
font-size: clamp(1rem, 0.357vw + 0.821rem, 1.25rem);
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.review-card__text {
font-size: clamp(1rem, 0.179vw + 0.911rem, 1.125rem);
} @media screen and (max-width: 1400px){
.hero-section .container {
height: 900px;
}
.hero-advantages-item{
padding: 20px;
}
.hero-block{
top: 170px;
}
}
@media screen and (max-width: 1200px){
.hero-inner-title {
padding: 20px 20px 50px 20px;
}
}
@media screen and (max-width: 1024px){
.hero-advantages-wrapper{
flex-wrap: wrap;
height: auto;
}
.hero-advantages-item{
padding: 20px;
width: 50%;
}
.hero-advantages-item:last-child{
height: auto;
}
.hero-block{
top: 170px;
}
.hero-block__image-rating{
width: 141px;
left: 0;
}
.hero-block__image{
aspect-ratio: 16/9;
}
.about-the-project-wrapper{
flex-wrap: wrap;
row-gap: 60px;
}
.about-the-project-item{
width: calc(50% - 15px);
}
.house-header{
flex-wrap: wrap;
}
.filter-cards{
justify-content: start;
}
.workers{
flex-wrap: wrap;
gap: 2rem;
}
.workers-wrapper{
max-width: 100%;
}
.workers-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap:0;
}
}
@media screen and (max-width: 767px){
.hero-advantages-item{
width: 100%;
}
.hero-advantages-item:last-child {
justify-content: start;
}
.hero-advantages-item svg {
flex: unset;
}
.hero-advantages-item{
padding: 20px 30px;
}
.hero-section .container {
height: auto;
}
.hero-inner-title{
height: 520px;
background-position-y: 70px;
background-size: 0;
padding-bottom: 34px;;
}
.background-hero-image{
display: none;
}
.hero-bg-mobile {
display: block;
position: absolute;
z-index: -1;
left: 0;
right: 0;
object-fit: cover;
width: 100%;
height: 100%;
bottom: 0;
top: 17px;
object-position: top;
}
.hero-block{
position: relative;
top: unset;
right: unset;
left: unset;
max-width: 400px;
margin: 0 auto;
}
.hero-block__image{
max-width: 400px;
}
.about-the-project{
background-size: 0;
}
.about-the-project-item{
width: 100%;
}
.about-the-project .container{
padding: 0;
}
.about-the-project-inner,.about-the-project-wrapper{
padding-left: 20px;
padding-right: 20px;
}
.about-the-project-inner{
gap: 30px;
}
.about-the-project-item-image {
width: 100%;
}
.about-the-project{ }
.about-the-project-icon{
display: block;
width: 54px;
}
.about-the-project-subtitle{
padding-top: 0;
margin-bottom: 0;
}
.about-the-project-link{
margin-bottom: 60px;
}
.about-the-project-image{
margin-bottom: 60px;
height: 350px;
object-fit: cover;
}
.team-wrapper{
flex-direction: column;
}
.team-left{
margin-bottom: 2.5rem;
flex: unset;
}
.team-left__logo{
margin: 0 auto;
}
.team-right{
flex: unset;
}
.team-section .container{
padding-left: 0;
padding-right: 0;
}
.team-wrapper, .team-workers, .workers-wrapper{
padding-left: 20px;
padding-right: 20px;
}
.revies{
background-size: 0;
overflow: hidden;
}
.revies-wrap{
gap: 1.25rem;
flex-wrap: wrap;
}
.revies-bg-mobile{
display: block;
position: absolute;
z-index: -1;    
left: 0;
right: 0;
object-fit: cover;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 550px){
.house-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card__gallery img{
height: 265px;
}
.card__gallery .swiper-pagination{
bottom: 20px !important;
}
.pay {
background-image: var(--bg-mobile, var(--bg-desktop));
}
.pay-wrapper-right{
width: 100%;
}
.pay-inner{
gap: 0.5rem;
max-width: 320px;
width: 100%;
}
.pay{
position: relative;
background-size: 0;
}
.pay-bg-mobile{
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
object-fit: cover;
object-position: left;
z-index: -1;
}
}
@media screen and (max-width: 480px){
.hero-advantages-item svg {
display: none;
}
}
@media screen and (max-width: 450px){
}