.h-btn {
    display: inline-block;

    margin: 3.0rem 0 0;
    padding: 1.6rem 2.4rem;

    border-width: 1px;
    border-style: solid;
    border-radius: 0.8rem;

    transition: color 0.3s ease-out,
                background 0.3s ease-out;
}


.banners {
    margin: 12.0rem 0 0;
    overflow: hidden;
}

.banners .splide__slide a {
    width: 100vw;
    height: 82.0rem;
}

.banners .splide__slide a:after {
    inset: 0;
    z-index: 10;

    content: '';
    display: block;
    position: absolute;

    background: rgba(0,0,0, 0.4);
}

.banners .splide__slide a .text,
.banners .splide__slide a .title {
    max-width: 50%;
}

.banners .splide__slide a .title {
    margin: 0 0 3.2rem;
}

.banners .splide__slide a .image {
    inset: 0;
}


body .banners .splide .splide__pagination {
    left: 50%;
    margin: 0;
    padding: 0 13.2rem;

    width: calc(var(--theme-wrapper-size) + 13.2rem + 13.2rem);
    bottom: 6.5rem;
    position: absolute;
    transform: translateX(-50%);

    counter-reset: banners-page;
}

body .banners .splide .splide__pagination li {
    counter-increment: banners-page;
}

body .banners .splide .splide__pagination .splide__pagination__page:after {
    color: #ABAAAA;

    left: 50%;
    bottom: calc(100% + 2rem);

    content: "0" counter(banners-page);
    display: block;
    position: absolute;

    font-size: 1.6rem;
    font-weight: 600;
    font-family: 'Termina';
    line-height: 1;

    transform: translateX(-50%);
}

body .banners .splide .splide__pagination .splide__pagination__page.is-active:after {
    color: #D8B68A;
}

@media (max-width: 1100px) {
    .banners .splide__slide a {
        height: 65rem;
    }

    .banners .splide__slide a .text,
    .banners .splide__slide a .title {
        max-width: 100%;
    }

    .banners .splide__slide a .title br {
        display: none;
    }

    body .banners .splide .splide__pagination {
        padding: 0;
        width: calc(100% - 40px);
        bottom: 3.5rem;
    }
}



.intro {
    overflow: hidden;
}

.intro .text,
.intro .title,
.intro .h-btn {
    margin: 3.2rem 0 0;
}

.intro .left,
.intro .right {
    width: 41.6666%;
}

.intro .right {
    padding-bottom: 0;
}

.intro .right .bg {
    top: 0;
    left: 0;
    width: 60vw;
    bottom: 0;
}

.intro .right .icon {
    left: calc(-20% + 2.5rem);
    width: calc(120% - 5.0rem);
}

.intro .right .image {
    left: -20%;
    width: 120%;
    height: 100%;
    bottom: 0;
    object-position: center bottom;
}

@media (max-width: 1100px) {
    .intro .left,
    .intro .right {
        width: 100%;
    }

    .intro .right .bg {
        left: -20px;
        width: calc(100% + 40px);
    }

    .intro .right .icon,
    .intro .right .image {
        left: 50%;
        width: 100%;
        max-width: 60rem;
        transform: translateX(-50%);
    }

    .intro .wrapper {
        flex-wrap: wrap;
    }
}


.projects {
    background: white;
}

.projects .hat,
.projects .title,
.projects .text {
    text-align: center;
    margin-bottom: 3.2rem;
}

.projects .text {
    margin: auto;
    max-width: 83.3333%;
    margin-bottom: 6.4rem;
}

.projects .type {
    margin: 0 1.5rem 4.8rem;
    padding: 1.6rem 2.4rem;

    transition: color 0.3s ease-out,
                background 0.3s ease-out;

    border-radius: 6.0rem;
}

.projects .type.selected {
    color: white;
    background: var(--theme-color-500);
}


.projects .list { display: none }
.projects .list.selected { display: flex }

.projects .list.residential .item {
    width: calc(33.3333% - 2rem);
    margin: 0 0 3.3rem;
    display: block;
    overflow: hidden;
}

.projects .list.residential .item,
.projects .list.residential .item:after,
.projects .list.residential .item:before {
    border-radius: 4.8rem;
}

.projects .list.residential .item:after,
.projects .list.residential .item:before {
    z-index: 30;

    top: calc(100% - 15rem);
    left: 0;
    width: calc(100% - 29rem - 5rem);
    height: 10rem;

    content: '';
    display: block;
    position: absolute;
    box-shadow: 0 5rem 0 0 white;

    border-right: 5rem solid transparent;
    border-bottom: 5rem solid transparent;
}

.projects .list.residential .item:before {
    top: calc(100% - 21rem);
    left: 50%;
    width: calc(50% - 5rem);
    box-shadow: 5rem 5rem 0 0 white;
}

.projects .list.residential .item .name {
    width: 30rem;
    height: 6.0rem;
    padding: 0 2.0rem;

    right: 0;
    bottom: 0;

    border-radius: 4.8rem 0 0 0;
    background-color: white;

    transition: color 0.3s ease-out,
                font-weight 0.3s ease-out;
}

.projects .list.residential .item .cover {
    aspect-ratio: 60 / 55;
}

.projects .list.residential .item .hover {
    inset: 0;
    background: rgba(192,125,83, 0);
    transition: background 0.3s ease-out;
}

.projects .list.residential .item .hover .circle {
    width: 12.0rem;
    height: 12.0rem;
    transform: scale(0) rotate(45deg);
    transition: transform 0.3s ease-out;
    border-radius: 50%;
}

.projects .list.residential .item .hover .circle svg {
    width: 1.2rem;
}

.projects .list.residential .item .hover .circle svg path { fill: white }


.projects .list.residential .item:nth-child(1):after,
.projects .list.residential .item:nth-child(2):after,
.projects .list.residential .item:nth-child(3):after,
.projects .list.residential .item:nth-child(1):before,
.projects .list.residential .item:nth-child(2):before,
.projects .list.residential .item:nth-child(3):before {
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(100% - 15rem);

    box-shadow: 0 -5rem 0 0 var(--theme-background);
    border-top: 5rem solid transparent;
    border-left: 5rem solid transparent;

    border-right: 0;
    border-bottom: 0;
}

.projects .list.residential .item:nth-child(1):before,
.projects .list.residential .item:nth-child(2):before,
.projects .list.residential .item:nth-child(3):before {
    top: auto;
    left: 0;
    bottom: calc(100% - 21rem);
    box-shadow: -5rem -5rem 0 0 var(--theme-background);
}

.projects .list.residential .item:nth-child(1) .name,
.projects .list.residential .item:nth-child(2) .name,
.projects .list.residential .item:nth-child(3) .name {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;

    border-radius: 0 0 4.8rem 0;
}

.projects .list.industrial .item {
    width: calc(50% - 2.6rem);
    margin: 0 0 5.5rem;
    display: block;
    overflow: hidden;
}

.projects .list.industrial .item .texts {
    flex-wrap: nowrap;
}

.projects .list.industrial .item .texts .tag {
    padding: 0.8rem 1.6rem;
    border-radius: 6.0rem;
}

.projects .list.industrial .item .texts .name {
    margin-right: 2.4rem;
}

.projects .list.industrial .item .image {
    overflow: hidden;
    margin-bottom: 2.4rem;
    border-radius: 1.6rem;
}

.projects .list.industrial .item .image .cover {
    aspect-ratio: 58 / 32;
}

.projects .list.industrial .item .image .hover {
    inset: 0;
    background: rgba(192,125,83, 0);
    transition: background 0.3s ease-out;
}

.projects .list.industrial .item .image .hover .circle {
    width: 12.0rem;
    height: 12.0rem;
    transform: scale(0) rotate(45deg);
    transition: transform 0.3s ease-out;
    border-radius: 50%;
}

.projects .list.industrial .item .image .hover .circle svg {
    width: 1.2rem;
}

.projects .list.industrial .item .image .hover .circle svg path { fill: white }

@media (max-width: 1100px) {
    .projects .list.residential .item {
        width: calc(50% - 1.5rem);
    }

    .projects .list.residential .item:before {
        left: 70%;
        width: calc(30% - 5rem);
    }
}

@media (max-width: 767px) {
    .projects .list.residential .item,
    .projects .list.industrial .item {
        width: 100%;
    }
}



.testimonials {

}


.testimonials .icon {
    width: 3rem;
    margin: 0 0 3rem;
}

.testimonials .title {
    margin: 0 0 6.4rem;
    text-align: center;
}

.testimonials:after,
.testimonials:before {
    top: 0;
    width: calc(50% - 35rem);
    height: 100%;

    content: '';
    display: block;
    position: absolute;

    background: url(../images/pattern-02.png);
    background-size: auto 64rem;
    background-repeat: repeat;
}

.testimonials:after { left: 0; background-position: right center }
.testimonials:before { right: 0; background-position: left center }

.testimonials .text {
    text-align: center;
}

.testimonials .name {
    margin: 4.8rem 0 0;
}

.testimonials .splide__slide { width: 100% }

@media (max-width: 1100px) {
    .testimonials .title br {
        display: none;
    }

    .testimonials .name {
        text-align: center;
    }
    .testimonials .name strong {
        display: block;
    }
}


.clients {
    overflow: hidden;
}

.clients .title {
    text-align: center;
}

.clients .splide {
    margin: 3.2rem 0 0;
}

.clients .splide:after,
.clients .splide:before {
    z-index: 2;

    top: 0;
    width: 20.0rem;
    height: 100%;

    content: '';
    display: block;
    position: absolute;

    pointer-events: none;
}

.clients .splide .splide__slide img {
    width: 16.5rem;
    height: 16.5rem;
    padding: 0.5rem;
    object-fit: contain;
    background: white;
}

.clients .splide:after { left: -1px; background: linear-gradient(90deg, #FBF9F6FF 0%, #FBF9F600 100%) }
.clients .splide:before { right: -1px; background: linear-gradient(-90deg, #FBF9F6FF 0%, #FBF9F600 100%) }

@media (max-width: 1100px) {
    .clients .splide:after,
    .clients .splide:before {
        display: none;
    }

    .clients .splide .splide__slide img {
        width: 14rem;
        height: 14rem;
    }
}


.awards {
    overflow: hidden;
    background: white;
}

.awards .left {
    width: 50%;
}

.awards .left .text {
    margin: 0 0 4.8rem;
}

.awards .left .title {
    margin: 0 0 2.4rem;
}

.awards .right {
    width: calc(50% - 3.0rem);
}

.awards .right .image {
    width: 100%;
    height: 43.0rem;
    margin: 0 0 6.4rem;

    display: block;
    overflow: hidden;

    border-radius: 1.6rem;
}

.awards .splide {
    width: calc(100% + (100vw - var(--theme-wrapper-size))/2);
}

.awards .splide__slide {
    width: 34.0rem;
}

.awards .splide__slide h6 {
    margin: 0 0 2.4rem;
}

.awards .splide__slide .flex {
    flex-wrap: nowrap;
}

.awards .splide__slide .badge {
    width: 10.0rem;
    margin: 0 3.2rem 0 0;
    max-height: 15rem;
    object-position: top center;
}

body .awards .splide .splide__arrows {
    top: 20%;
    left: -8rem;
}


@media (max-width: 1100px) {
    .awards .left,
    .awards .right {
        width: 100%;
    }

    .awards .right {
        order: -2;
    }

    .awards .splide {
        width: calc(100% + 20px);
    }

    .awards .wrapper {
        flex-wrap: wrap;
    }
}


.contact {
    overflow: hidden;
}

.contact:after {
    inset: 0;
    z-index: 1;
    opacity: 0.32;

    content: '';
    display: block;
    position: absolute;

    background: url(../images/pattern-01.png);
    background-repeat: repeat;
}

.contact .left {
    width: 66.6666%;
}

.contact .left .bg {
    inset: 0;

    left: auto;
    width: 70vw;

    background: url(../images/contact.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.contact .right {
    width: 33.3333%;
}

.contact .right .form {
    width: 150%;
    margin: 0 0 0 -50%;
}

.contact .right .form .box .text { margin: 2.2rem 0 }

.contact .right .form .btn {
    padding: 1.6rem 0;
}

.contact .right .form .btn svg {
    width: 1.6rem;
    margin: 0 0 0 2.0rem;
    transition: transform 0.3s ease-out;
}
.contact .right .form .box {
    padding: 3.2rem;

    background: white;
    box-shadow: 0 0.2rem 0.4rem rgba(0,0,0, 0.04);

    border-radius: 3.2rem;
}

.contact .right .form .box .input { margin: 0 0 1.6rem }
.contact .right .form .box .input.half { width: calc(50% - 0.5rem) }

.contact .right .form .box .input label {
    margin: 0 0 0.8rem;
    display: block;
}

.contact .right .form .box .input input,
.contact .right .form .box .input select,
.contact .right .form .box .input textarea {
    width: 100%;
    padding: 1.2rem 2.4rem;

    border-width: 1px;
    border-style: solid;
    border-color: #ABAAAA;
    border-radius: 1.2rem;
}

.contact .right .form .box .input select {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzIxMjdfMTYwMiIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgeD0iMjQiIHk9IjI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMjQgMjQpIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTI3XzE2MDIpIj4KPHBhdGggZD0iTTEyIDEzLjJMMTYuNiA4LjZMMTggMTBMMTIgMTZMNiAxMEw3LjQgOC42TDEyIDEzLjJaIiBmaWxsPSIjNzA3MDcwIi8+CjwvZz4KPC9zdmc+Cg==");
    background-size: 2.4rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 2.4rem) center;
}

.contact .right .form .box .input textarea {
    height: 11.0rem;
}

.contact .right .form .pattern {
    top: 0;
    right: 16.6666%;
    width: 50vw;
    bottom: 0;
}

.contact .right .form .pattern:after {
    inset: 0;
    opacity: 0.32;

    content: '';
    display: block;
    position: absolute;

    background: url(../images/pattern-01.png);
    background-repeat: repeat;
}

@media (max-width: 1100px) {
    .contact .left {
        width: 0;
        overflow: visible;
    }

    .contact .left .bg {
        display: none;
    }
    .contact .right {
        width: 100%;
    }
    .contact .right .form {
        width: 100%;
        margin: 0 auto;
        max-width: 70rem;
    }

    .contact .right .form .box .input.half {
        width: 100%;
    }
}




@media (any-hover: hover) {
    .h-btn:hover {
        background: var(--theme-color-100);
    }

    .projects .type:not(.selected):hover {
        background: rgba(0,0,0, 0.2);
    }

    .projects .list.residential .item:hover .name {
        color: var(--theme-color-300);
        font-weight: 600;
    }

    .projects .list.residential .item:hover .hover {
        background: rgba(192,125,83, 0.46);
    }

    .projects .list.residential .item:hover .hover .circle {
        transform: scale(1) rotate(0deg);
    }

    .projects .list.industrial .item:hover .image .hover {
        background: rgba(192,125,83, 0.46);
    }

    .projects .list.industrial .item:hover .image .hover .circle {
        transform: scale(1) rotate(0deg);
    }

    .contact .form .btn:hover svg {
        transform: rotate(45deg);
    }
}