@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap');

@font-face {
    font-family: 'Intro';
    src: url(../fonts/Intro-Black-Caps.ttf);
    font-family: 'Intro';
}

html, body{
    overflow-x: hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    overflow-x: hidden;
}

a{
    text-decoration: none;
}

a{
    color: #000;
}

ul{
    padding: 0;
    list-style: none;
}

img{
    max-width: 100%;
}

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

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

.wrapper{
    width: 1200px;
    margin: 0 auto;
}

.just{
    text-align: justify;
    line-height: 27px;
}

.ff-roboto{
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    max-width: 500px;
    margin: 15px 0;
}

.white{
    color: white;
}

.black{
    color: black;
}

.y-b-l{
    border-left: 8px #EFBB20 solid;
    padding-left: 15px;
}

.y-b-r{
    border-right: 5px #EFBB20 solid;
    padding-right: 15px;
    display: inline-block;
}

.btn{
    background: #EFBB20;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
}

.btn:hover{
    background: #e09d20; 
}

h1{
    font-size: 48px;
    max-width: 700px;

}

h2{
    text-align: center;
    font-size: 34px;
    margin: 30px 0;
}

h6{
    text-align: center;
    font-size: 16px;
    margin: 20px 0;
}

.submit-app img{
    width: 30px;
}

header{
    height: auto !important;
}

#main{
    background-image: url(../images/banner/banner-main.webp);
    background-size: 100%;
    background-position-y: bottom;
    background-repeat: no-repeat;
    position: relative;
    font-family: 'Intro', serif;
}

#main h1{
    font-family: 'Intro', serif;
    margin-bottom: 50px;
}

#main h2{
    position: absolute;
    right: 30px;
    top: 30px;
    text-align: right;
    max-width: 400px;
    font-family: 'Intro', serif;
    color: #FFF;
    background: rgba(0, 0, 0, 0.6);
}

.our-services{
    margin-top: 150px;
    display: flex;
    align-items: center;
}

#main p.y-b-l{
    margin: 15px 0;
    font-size: 24px;
}

.main-dark-block{
    background: rgba(0, 0, 0, 0.6);
    display: inline-block;
    padding: 20px;
    padding-top: 100px;
    margin-left: 20px;
}

.main-dark-block p{
    display: flex;
    align-items: flex-start;
}

.main-dark-block p img{
    width: 30px;
    margin-right: 15px;
}

.our-services img{
    width: 40px;
    margin-right: 10px;
}

.rent-left{
    position: relative;
    width: 50%;
    text-align: right;
    padding-right: 100px;
}

.rent-right{
    width: 50%;
}

.rent-right h2{
    text-align: left;
}

.big-text{
    color: #7e7e7e;
    font-size: 24px;
}

.rent-abs{
    position: absolute;
    transform: rotate(-90deg);
    left: -100px;
    top: 50px;
}

#rent{
    margin-bottom: 120px;
}

#rent img:nth-child(1){
    width: 600px;
}

#rent img:nth-child(2){
    width: 350px;
    position: absolute;
    left: -100px;
    bottom: -50px;
}

#rent img:nth-child(3){
    width: 250px;
    position: absolute;
    bottom: -80px;
    right: 50px;
}

.bullets{
    width: 200px;
}

.bullets div{
    background: grey;
    width: 30px;
    color: white;
    height: 30px;
}

#services, #services h6, #services h2{
    font-family: 'Intro';
}

.services-block{
    background-image: url(../images/services-bg.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 80px;
    height: 430px;
}

.main-page h2{
    font-family: 'Intro', sans-serif;
}

.intro{
    font-family: 'Intro', sans-serif;
}

.benefit{
    background: #FFF;
    width: 100%;
    border: 1px solid rgb(224, 224, 224);
    padding: 20px;
    padding-bottom: 80px;
    position: relative;
    top: 20px;
}

.benefit p{
    max-width: 240px;
    font-size: 18px;
}

.benefit img{
    width: 170px;
}

#services{
    font-family: 'Intro', serif;
}

.services-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 50px;
    column-gap: 15px;
    margin-top: 210px;
}

.services-list a{
    width: calc(100% / 3 - 15px);
}

.services-item img{
    max-width: 100% !important;
    transition-duration: 0.4s;
    max-height: 267px;
    width: 100%;
}

.services-item:hover > img{
    transform: scale(1.2);
}

.service-name{
    background-color: #EFBB20;
    padding: 20px;
    position: relative;
    top: -5px;
    padding-right: 90px;
}

.services-item:hover .service-name{
    background: #e09d20;
}

.service-name::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 25px;
    border-left: 8px solid #FFF;
    border-top: 5px solid #FFF;
    height: 30px;
    background: #000;
}

.services-list a:nth-child(6) .service-name, .services-list a:nth-child(7) .service-name, .services-list a:nth-child(8) .service-name, .services-list a:nth-child(9) .service-name{
    padding-right: 200px;
}

.services-item{
    overflow: hidden;
}

.services-item p{
    padding-left: 15px;
    border-left: 10px solid #fff;
    text-align: left;
    margin-bottom: 0;
    padding-top: 0;
}

.not-main-services{
    margin-top: 0 !important;
}

#portfolio{
    margin: 0 15px;
}

.portfolio-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
}

.portfolio-container img{
    height: 100%;
}

.portfolio-container img:nth-child(3){
    grid-column: 3 / 5;
}

.portfolio-container img:nth-child(5){
    grid-column: 2 / 4;
}

#text p, #text li{
    font-family: 'Roboto', sans-serif;
}

#text ul{
    list-style: disc;
    padding-left: 30px;
}

.benefits-container{
    flex-wrap: wrap;
    font-family: 'Intro', serif;
}

.benefits-item{
    width: 23%;
    text-align: center;
    margin-bottom: 30px;
}

.benefits-item p{
    color: gray;
    font-size: 20px;
}

.benefits-item img{
    width: 150px;
    height: 150px;
}

.about-img-one img{
    width: 400px;
}

.about-img-two img{
    width: 300px;
}

.about-img-three img{
    width: 250px;
}

.about-bx3 .about-img-box .about-img-two{
    bottom: -60px;
    left: -20px;
}

.about-bx3 .about-img-box .about-img-three{
    bottom: -40px;
}

.about-bx3 .about-img-box .about-img-three{
    right: -60px;
}

.about-bx3 .about-img-box .about-img-one{
    padding: 0 !important;
}

.construct-action{
    background-image: url(../images/road-bg.png);
    background-size: contain;
    font-family: 'Intro', sans-serif;
}

.construct-action .row.spno{
    position: relative;
    top: -15px;
}

.construct-action a{
    color: #FFF;
}

.dark-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}

.tab-content p{
    font-size: 24px;
    color: #7e7e7e;
}

.rev_slider_container{
    height: auto !important;
}

.about-bx3 .about-contact-box .title{
    text-align: left;
    font-family: 'Intro', sans-serif;
}

.submit-icon{
    width: 50px;
}

.socials img{
    width: 30px;
    margin: 0 5px;
}

.socials{
    display: flex;
}

.thanks-container{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-image: url(../images/thanks-bg.jpg);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}

.thanks-window{
    font-family: 'Intro';
    background: #FFF;
    margin: 0 auto;
    padding: 240px 30px;
    text-align: center;
    max-width: 760px;
    background-image: url(../images/logo-monochrome.png);
    background-repeat: no-repeat;
    background-size: 250%;
    background-position: center;
    position: relative;
    z-index: 1;
}

.thanks-window h1{
    font-size: 60px;
}

.thanks-window p{
    font-size: 32px;
    color: #EFBB20;
}

.logo-white{
    width: 400px;
    margin: 20px;
    position: relative;
    z-index: 1;
}

.black-screen{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.unvalid{
    border-color: red !important;
}

.unvalid::placeholder{
    color: red;
}

.mobile-menu{
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100vh;
    width: 100vw;
    background: #EFBB20;
    box-sizing: border-box;
    font-size: 24px;
    z-index: 1000;
    padding: 30px;
    transition-duration: 0.5s;
}

.mobile-menu.active{
    left: 0;
}

.xmark{
    position: absolute;
    right: 30px;
    cursor: pointer;
}

.socials img{
    transition-duration: 0.4s;
}

.socials img:hover{
    transform: translateY(-5px);
}
@media (min-width: 768px){
    .matomba_baner:not(.matomba_baner_width).matomba_baner_left {
        right: 16px !important;
        left: unset !important;
    }
}
@media (max-width: 767px){
    .matomba_baner.matomba_baner_top {
        top: unset !important;
        bottom: 0;
    }
}
@media (min-width: 768px){
    .matomba_baner:not(.matomba_baner_width).matomba_baner_top {
        bottom: 16px;
        top: unset !important;
    }
}
@media(max-width: 1800px){
    #main{
        background-size: 100% 100%;
    }
}
@media(max-width: 1340px){
    .construct-action{
        background-size: cover;
    }
}
@media(max-width: 1310px){
    #main{
        background-size: cover;
    }
}
@media(max-width: 1260px){
    .wrapper{
        width: 960px;
    }
    .service-name{
        padding-right: 70px;
    }
    .main-dark-block{
        width: 100%;
        margin-left: 0;
    }
    #main h2{
        color: #FFF;
    }
    #main h2{
        background: none;
    }
}
@media(max-width: 1199px){
    .services-item img{
        max-height: 210px;
    }
    .about-bx3 .about-img-box .about-img-two{
        bottom: -30px;
        left: -50px;
    }
    .about-img-three img{
        width: 200px;
    }
    .about-img-two img{
        width: 250px;
    }
    .about-bx3 .about-img-box .about-img-three{
        right: -20px;
    }
    .construct-action a{
        font-size: 20px;
    }
}
@media(max-width: 1111px){
    .service-name{
        padding-right: 10px;
    }
    .about-bx3 .about-img-box .about-img-two{
        left: -20px;
    }
}
@media(max-width: 991px){
    .services-item img{
        max-height: 100%;
    }
    .logo{
        margin-top: 15px;
    }
    .footer-socials{
        margin: 10px auto !important;
        width: 100%;
        justify-content: center;
    }
    .footer-bottom .col-md-5{
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center !important;
    }
    .services-benefits{
        position: relative;
        top: 120px;
    }
    .benefit{
        padding-bottom: 50px;
    }
    .benefit p{
        font-size: 16px;
    }
    .construct-action a{
        padding: 0;
        font-size: 18px;
    }
    .rev_slider_container{
        position: static !important;
    }
    .tp-fullwidth-forcer{
        height: auto !important;
    }
    .wrapper{
        width: 730px;
    }
    .services-list a{
        width: calc(100% / 2 - 15px);
    }
    .service-name{
        padding-right: 40px;
    }
    .services-block{
        height: auto;
    }
    .main-dark-block{
        padding-top: 250px;
    }
    .about-bx3 .about-img-box .about-img-two img{
        width: 400px;
    }
    .about-img-three img{
        width: 300px;
    }
}
@media(max-width: 860px){
    .thanks-window{
        width: 90%;
        max-width: 100%;
    }
    .thanks-window h1{
        font-size: 48px;
    }
    .thanks-window p{
        font-size: 24px;
    }
}
@media(max-width: 760px){
    .services-block{
        height: 500px;
    }
    .services-benefits{
        top: 0;
    }
    .dark-bg{
        display: block;
    }
    .construct-action .row.spno{
        flex-direction: column;
        justify-content: center;
    }
    .construct-action .row.spno{
        top: 0;
    }
    .construct-action .row.spno .col-sm-6{
        max-width: 100%;
        text-align: center;
    }
    .construct-action .text-right{
        text-align: center !important;
    }
    .tp-fullwidth-forcer{
        height: 60px !important;
    }
    .about-bx3 .about-img-box .about-img-two img{
        width: 300px;
    }
    .about-img-three img{
        width: 200px;
    }
    .services-list a{
        width: 100%;
    }
    .benefits-item{
        width: 48%;
    }
    .services-block .flex{
        flex-direction: column;
    }
    .benefit{
        padding-bottom: 20px;
        text-align: center;
    }
    .benefit p{
        max-width: 100%;
    }
    .services-list{
        margin-top: 500px;
    }
    .portfolio-container{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .portfolio-container img:nth-child(3){
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    .portfolio-container img:nth-child(5){
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 28px;
    }
}
@media(max-width: 668px){
    .thanks-window{
        padding: 200px 15px;
    }
    .thanks-window h1{
        font-size: 40px;
    }
    .thanks-window p{
        font-size: 20px;
    }
    .about-bx3 .about-img-box .about-img-two{
        bottom: -50px;
    }
    .about-bx3 .about-img-box .about-img-three {
        right: -20px;
        bottom: -30px;
    }
    .about-bx3 .about-img-box .about-img-two img{
        width: 250px;
    }
    .about-bx3 .about-img-box .about-img-two{
        bottom: -40px;
        left: 15px;
    }
    .about-img-three img{
        width: 200px;
    }
    .about-bx3 .about-img-box .about-img-three{
        right: 30px;
        bottom: -30px;
    }
}
@media(max-width: 591px){
    .about-bx3 .about-img-box .about-img-two{
        bottom: -40px;
    }
    .about-bx3 .about-img-box .about-img-three {
        right: -15px;
        bottom: -30px;
    }
}
@media(max-width: 543px){
    .logo{
        margin-top: 10px;
    }
    .thanks-window{
        padding: 150px 10px;
    }
    .thanks-window h1{
        font-size: 32px;
    }
    .thanks-window p{
        font-size: 18px;
    }
    .construct-action a{
        font-size: 16px;
    }
    .wrapper{
        width: 360px;
    }
    .just{
        line-height: 24px;
    }
    .services-list{
        row-gap: 30px;
    }
    .services-block{
        padding-top: 20px;
    }
    h1{
        font-size: 28px;
    }
    #main p.y-b-l{
        font-size: 18px;
    }
    h2{
        font-size: 22px;
    }
    #main .ff-roboto{
        font-size: 18px;
    }
    .main-dark-block{
        padding-top: 150px;
    }
    #main h2{
        top: 0;
    }
}
@media(max-width: 470px){
    .logo-white{
        width: 90%;
        margin: 5%;
    }
    .thanks-window{
        padding: 120px 10px;
        background-size: 200%;
    }
    .about-bx3 .about-img-box .about-img-two img{
        width: 200px;
    }
    .about-img-three img{
        width: 150px;
    }
    .thanks-window h1{
        font-size: 26px;
    }
    .thanks-window p{
        font-size: 16px;
    }
}
@media(max-width: 392px){
    .wrapper{
        width: 92%;
    }
    .benefits-item{
        width: 100%;
    }
    .services-list{
        margin-top: 550px;
    }
    h1{
        font-size: 24px;
    }
    h2{
        font-size: 20px;
    }
}