/***************************************
---------- TABLE OF CONTENT -------------

# Post Type
-- Our Models
-- Trending
# Filter
-- Our Blog
-- Service
# Contact Form

***************************************/

/***************************************
        # Pages Parts -- Our Models
***************************************/

.models-page{
    display: flex;
    flex-direction: column;
}


article{
    /*scroll-snap-align: start;*/
    /*scroll-snap-stop: always;*/
    display: flex;
    flex-direction: column;
}

.our-model .hero--static{
    height: 50vh;
}

.our-model__floors{
    background: var(--c-background-alt);

}
.our-model__gallery {
    background: var(--c-gradient-gray);
    z-index: 1
}

.our-model__title {
    font-size: var(--h1);
    color: var(--c-primary);
    margin: 0 0 4.8rem;
}

.our-model__overview-image,
.our-model__image {
    border-radius: var(--r-border-radius-12);
    overflow: hidden;
}

.our-model__overview-image .our-model__img,
.our-model__image .our-model__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 60rem;
    transition: all .3s ease-in-out;
}

.our-model__overview-image:hover .our-model__img,
.our-model__image:hover .our-model__img {
    opacity: .8;
    transform: scale(1.1);
}

.our-model__stats-row {
    border: 1px solid var(--c-primary-d);
    border-radius: var(--r-border-radius-12);
    padding: 3.2rem 2.4rem;
    background: hsl(0deg 0% 97% / 75%);
    margin-top: -15rem;
    backdrop-filter: blur(10px);
    margin-left: 0;
    margin-right: 0
}

.our-model__stats-row .our-model__stat-item {
    padding: .8rem 1.6rem;
    border-left: .3rem solid var(--c-accent);
    border-bottom: 0;
}

.our-model__stat-label {
    font-size: 1.3rem;
    color: var(--c-primary-b);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.our-model__stat-value {
    font-size: var(--h5);
    font-weight: 600;
    color: var(--c-primary);
}

.our-model__desc {
    font-size: 1.6rem;
    color: var(--c-primary-b);
    line-height: 1.8;
}

.our-model__desc p {
    margin: 0 0 1.6rem;
}

.our-model__desc p:last-child {
    margin-bottom: 0;
}

.our-model__image .our-model__img,
.our-model__floor-image .our-model__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-border-radius-12);
    object-fit: cover;
    transition: all .3s ease-in-out;
}

.our-model__image:hover .our-model__img,
.our-model__floor-image:hover .our-model__img {
    opacity: .8;
    transform: scale(1.1);
}
.our-model__stat-item{
    border-bottom: 1px solid var(--c-accent);
}

.our-model__variants{
    background:
            radial-gradient(
                    circle at top left,
                    #9cff57 0%,
                    #6bbf24 22%,
                    #4d9f14 38%,
                    rgba(107, 191, 36, 0.45) 52%,
                    rgba(255,255,255,0.95) 75%,
                    #ffffff 100%
            );
    position: relative;
    overflow: hidden;
}
.our-model__variants::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,0.45) 0%,
                    rgba(255,255,255,0.12) 38%,
                    rgba(255,255,255,0.02) 100%
            );
    clip-path: ellipse(85% 60% at 50% 100%);
    pointer-events: none;
}
.our-model__variants::after {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    top: -250px;
    left: -180px;
    background:
            radial-gradient(
                    circle,
                    rgba(255,255,255,0.28) 0%,
                    rgba(255,255,255,0) 70%
            );
    filter: blur(40px);
    pointer-events: none;
}
.our-model__variants .our-model__stat-label{
    color: var(--c-primary);
}

.our-model__variant-title {
    font-size: var(--h3);
    color: var(--c-primary);
    margin: 0;
}

.our-model__variant-slide > .row {
    margin-left: 0;
    margin-right: 0;
}

.our-model__img-zoom {
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--r-border-radius-12);
}

.our-model__variant-carousel .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: .8rem;
    list-style: none;
    padding: 2.4rem 0 0;
    margin: 0;
}

.our-model__variant-carousel .slick-dots li button {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--c-primary-c);
    border: none;
    padding: 0;
    font-size: 0;
    cursor: pointer;
    transition: background .2s ease;
}

.our-model__variant-carousel .slick-dots li.slick-active button {
    background: var(--c-primary)
}

.our-model__variant-carousel .slick-dots li button:before{
    opacity: 0;
}
.our-model__variant {
    display: none;
}

.our-model__variant--active {
    display: block;
}

.our-model__variants-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 2.4rem;
}

.our-model__variant-btn {
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .2rem solid var(--c-primary-d);
    border-radius: var(--r-border-radius-4);
    background: transparent;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--c-primary-d);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.our-model__variant-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.our-model__variant-btn--active {
    background: var(--c-background);
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.our-model__variant-btn--active:hover{
    color: var(--c-accent)
}
.our-model__floor + .our-model__floor {
    border-top: 1px solid var(--c-primary-d);
}

.our-model__floor-title {
    font-size: var(--h3);
    color: var(--c-primary);
    margin: 0;
}

.our-model__gallery-slider {
    position: relative;
    border-radius: var(--r-border-radius-12);
    overflow: hidden;
}

.our-model__gallery-slide {
    outline: none;
}

.our-model__gallery-img {
    width: 100%;
    height: 55rem;
    display: block !important;
    object-fit: contain;
    cursor: zoom-in;
    transition: opacity .2s ease;
}

.our-model__gallery-img:hover {
    opacity: .9;
}

.our-model__img-trigger {
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--r-border-radius-12);
}

/***************************************
  # Pages Parts -- Implemented Project
***************************************/

.imp-project{
    padding-top: 15.4rem;
}
.imp-project.bg-leaf:before{
    background-position: top;
    top: 20%;
}
.imp-project__breadcrumb,
.imp-project__breadcrumb a{
    color: var(--c-accent-d);
    font-weight: 600;
}
.imp-project__subtitle{
    font-size: var(--h6);
    line-height: var(--h6-line-height);
}
.imp-project__paragraph p{
    margin-bottom: 1.6rem;
    font-size: var(--p);
    line-height: var(--p-line-height);

}
.imp-project__paragraph p:last-of-type{
    margin-bottom: 0;
}
.imp-project__img{
    box-shadow: var(--bs-black-25);
    cursor: zoom-in;
    background-color: var(--c-background-alt);
    border-radius: var(--r-border-radius-20);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.imp-project .contact-form__overview{
    padding: 10rem 0;
    background-image: var(--comparison-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.form-wrap{
    background-color: var(--c-accent-d);
    padding: 5rem 3rem;
    box-shadow: var(--bs-black-25);
    border-radius: var(--r-border-radius-20);
}
.form-title{
    color: var(--c-background-alt);
    margin-bottom: 5rem;

}
.form-wrap form p label{
    font-size: var(--p);
    line-height: var(--p-line-height);
    color: var(--c-background-alt);
}
.imp-project .wpcf7-form-control-wrap{
    margin-top: 1rem;
}
.form-wrap form p label span input{
    border-radius: var(--r-border-radius-10);
    background: transparent;
    color: var(--c-background-alt);
    border: 2px solid var(--c-background-alt);
    text-indent: 1.6rem;
}
.form-wrap form p label span textarea{
    border-radius: var(--r-border-radius-10);
    background: transparent;
    color: var(--c-background-alt);
    border: 2px solid var(--c-background-alt);
    text-indent: 1.6rem;
}
.form-wrap form p .wpcf7-submit{
    background-color: var(--c-background-alt);
    color: var(--c-accent-d);
}




/***************************************
        # Pages Parts -- Models Archive
***************************************/

.models-archive {
    padding: 8rem 0;
    min-height: 100vh;
}
.models-archive__title {
    font-size: var(--h2);
    font-weight: 600;
    margin: 0 0 4rem 0;
    color: var(--c-primary);
}
.models-archive__link {
    display: block;
    font-size: 1.8rem;
    color: var(--c-primary-b);
    padding: 16px 20px;
    border: 1px solid var(--c-primary-d);
    border-radius: var(--r-border-radius-4);
    transition: color .25s, border-color .25s;
}
.models-archive__link:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}
.models-archive__empty {
    text-align: center;
    font-size: 1.6rem;
    color: var(--c-primary-b);
    padding: 4rem 2rem;
}


.models-archive__list {
    row-gap: 4rem;
    list-style: none;
}
.models-archive__item:hover {
    color: inherit;
}

.models-archive__card {
    height: 100%;
}
.models-archive__image {
    border-radius: var(--r-border-radius-20);
    overflow: hidden;
    box-shadow: var(--bs-black-25);
}

.models-archive__img {
    width: 100%;
    height: 30rem;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}
.models-archive:before{
    content: "";
    position: absolute;
    display: block;
    background-image: url(../images/icons/figura-logo.svg);
    background-size: contain;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.models-archive__image:hover .models-archive__img {
    transform: scale(1.05);
}
.models-archive__content {
    padding: 0 4rem;
}
.models-archive__card-title {
    font-size: var(--h4);
    color: var(--c-primary);
    margin: 0;
    font-weight: 600;
}
.models-archive__second-info .models-archive__stat-label {
    text-transform: uppercase;
    font-size: var(--p-small);
    color: #3B404A80;
    line-height: var(--p-line-height);
}
.models-archive__second-info .models-archive__stat-value {
    font-size: var(--h2);
    color: var(--c-background-b);
    line-height: var(--h2-line-height);
}

.models-archive__desc {
    font-size: 1.6rem;
    margin: 0;
    color: var(--c-primary-b);
    line-height: 1.7;
}
.models-archive__list--loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .2s ease;
}

.models-archive__pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 6.4rem;
}

.models-archive__page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1.2rem;
    border: .2rem solid var(--c-primary-d);
    border-radius: var(--r-border-radius-4);
    background: transparent;
    font-size: 1.5rem;
    color: var(--c-primary);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.models-archive__page-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.models-archive__page-btn--active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-background);
}

.models-archive__page-btn--active:hover {
    color: var(--c-background);
}

/***************************************
        # Filter
***************************************/

.buildings-filter{
    z-index: 1;
}

.buildings-filter__row{
    border-radius: var(--r-border-radius-12);
    padding: 3.2rem 2.4rem;
    background: var(--c-accent-d);
    margin-top: -4rem;
    backdrop-filter: blur(10px);
    margin-left: 0;
    margin-right: 0;
    box-shadow: var(--bs-black-25);
}
.buildings-filter__field{
    display: flex;
    gap: 2rem;
}
.buildings-filter__label{
    color: var(--c-background-alt);
    font-size: var(--h6);
    line-height: var(--h6-line-height);
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.buildings-filter__dropdown{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: .2rem solid var(--c-background-alt);
    border-radius: var(--r-border-radius-10);
    color: var(--c-background-alt);
    font-size: var(--h6);
    line-height: var(--h6-line-height);
    font-weight: 600;
    padding: 1rem 1.5rem;
    position: relative;
}
.buildings-filter__dropdown.is-open{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    z-index: 1;
}
.buildings-filter__trigger{
    background-color: transparent;
    padding: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.buildings-filter__trigger-text{
    color: var(--c-background-alt);
    font-size: var(--h6);
    line-height: var(--h6-line-height);
    font-weight: 600;
}
.buildings-filter__list{
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .1s ease-in-out;
    background: var(--c-accent-d);
    width: calc(100% + 4px);
    position: absolute;
    left: -2px;
    top: 4rem;
    border-bottom-left-radius: var(--r-border-radius-10);
    border-bottom-right-radius: var(--r-border-radius-10);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.buildings-filter__dropdown.is-open .buildings-filter__list{
    max-height: 22rem;
    padding: 1rem 1.5rem;
    border: .2rem solid var(--c-background-alt);
    border-top: 0;
}
.buildings-filter__option{
    list-style: none;
    cursor: pointer;
}
.buildings-filter__option:hover{
    color: var(--c-background-b);
}
.buildings-filter__option--active{
    display: none;
}
.buildings-filter__option--disabled{
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    display: none;
}
/***************************************
        -- Our Blog
***************************************/

.blog-post .hero--static{
    height: 50vh
}
/***************************************
        -- Service
***************************************/

.hero--static{
    position: relative;
    height: 50vh;
}