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

body {
    color: #a28256!important;
    font-family: 'Roboto', sans-serif;

}

a {
    color:#a28256!important;
}

.bg-brand {
    background: #333335!important;
}

.services-slide-1 {
    background: url(../img/1.jpg?2)
}
.services-slide-2 {
    background: url(../img/2.jpg?2)
}
.services-slide-3 {
    background: url(../img/3.jpg?2)
}
.services-slide-4 {
    background: url(../img/4.jpg?2)
}
.services-slide-5 {
    background: url(../img/5.jpg?2)
}
.slick-slider {
    height: 100%
}
.services-slider div {
    background-size: cover!important;
    height: 100%
}

.slick-dots  {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.slick-dots li  {
    display: inline-block;
    margin: 0 0.3rem 1rem;
}

.slick-dots li button   {
    width: 0.5rem;
    border: 0;
    font-size: 0;
    height: 0.5rem;
    padding: 0;
    border-radius: 50%;
    background: #333335;
}

.slick-dots li.slick-active button   {
    background: #a28256;
}

.valign {
    transform: translate(0, -50%);
    top: 50%;
    position: relative;
    z-index: 2;
}

.contacts {
    font-weight: 500;
    bottom: 2rem;
    left: 2rem;
    position: absolute;
}

.constatn {
    top: 50%;
    transform: translate(0%, -50%);
    position: relative;
}

@media (min-width: 767px) {
    body {
        padding: 5%;
    }
    .constatn  {

        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }
    .constatn:before {
        padding-top: 42.857143%;
        display: block;
        content: "";
    }
    .constatn_inner {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

@media (max-width: 767px) {
    body {
        background: #333335!important
    }
    .w-25 {
        width: 100%!important;
        display: block;
        margin: 0 auto;
    }
    .side {
        height: 25vh;
    }
    .services-slider div {
        height: 33.3333vh;
        background-size: cover!important;
    }
    .valign {
        transform: translate(0, 0);
        top: 50%;
        position: static;
        z-index: 2;
    }
    .w-75 {
        width: 30%!important;
        float: right;
    }
    .contacts {
        bottom: 1rem;
        left: 1rem;
    }
    .slick-dots {
        position: absolute;
    }

    .logo {
        position: relative;
        height: 33.3333vh;
        z-index: 2;
        padding: 1.5rem 2rem;
    }
    .constatn {
        top: 0%;
        transform: translate(0%, 00%);
        position: relative;
    }
}