/*
Theme Name: sairmehillside
Theme URI: https://sairmehillside.com/
Author: TinaDevs
Author URI: https://codepen.io/ponycorn
Description: This theme was developed in 2025 by Valentina Noeloquence https://tinadevs.com/ as a blank wordpress theme and adapted for your design. This theme is fully charged with success, cash and zen
Version: 2025.1
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: bootstrap, jquery, html5, sass, css3
Text Domain: sairmehillside
*/
:root {
    --light-green: #edf5e9;
    --color-light: #eff5ea;

    --d-green: #143924;
    --s-green: #198754;
    --mint: #a7eccc;
}

@font-face {
    font-family: 'nateli';
    src: url('inc/fonts/bpg_nateli_mtavruli-22682544617.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Tatishvili';
    src: url('inc/fonts/gl-tatishvili-metal-bold-38807891663.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}

html {
    --hfont: "Merriweather", serif;
    --bfont: "Roboto Flex", sans-serif;
}

html[lang="ka-GE"] {
    --hfont: 'Tatishvili', sans-serif;
    --bfont: 'nateli', sans-serif;
}

html :where(.wp-block) {
    max-width: initial;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--hfont);
}

body {
    font-family: var(--bfont);
}

a,
a:hover {
    color: inherit;
    text-decoration: none;
}

img {
    object-fit: cover;
}

ol,
ul {
    padding-left: 0;
}

@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .navbar .nav-item .dropdown-menu {
        margin-top: 0;
    }
}

.eagles {
    justify-content: center;
    background: #171e19;
    display: flex;
    color: #295a38;
    font-size: small;
    padding: 2px;
}

.eagles a {
    color: #399454;
    margin-left: 5px
}

.eagles .emoji {
    opacity: 0;
    transition: .3s;
    transform: translate(10px, 0) rotate(90deg);
    margin-left: 5px;
}

.eagles:hover .emoji {
    opacity: 1;
    transform: none;
}

main#content {
    min-height: 300px;
}

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}

.mobilemenu {
    display: none;
}

.social-links svg {
    width: 32px;
    height: 32px;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    text-align: center !important;
}

.carousel-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.top,
header#header {
    background: var(--light-green);
}

section.top {
    padding-top: 1rem;
    color: var(--d-green);
}

section.top .phone {
    font-size: 1.5vw;
    font-weight: 300;
}

.btn {
    border-radius: 4px;
}

.btn-primary,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.tabs .nav-pills .nav-link.active,
.tabs .nav-pills .nav-link:hover {
    background: var(--s-green);
    border-color: var(--s-green);
    color: white;
}

.btn:focus-visible {
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--s-green);
    border-color: var(--s-green);
}

.lang-switch .dropdown ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.lang-switch .dropdown {
    position: absolute;
    width: 0px;
    left: 40%;
    top: 0;
    background: none;
    overflow: hidden;
    transition: 0.3s;
}

.lang-switch {
    text-transform: uppercase;
    position: relative;
    font-weight: 300;
    font-size: 1.3vw;
    cursor: pointer;
}

.lang-switch:hover .dropdown {
    width: 90px;
}

.lang-switch:hover .current-lang,
.lang-switch:hover a:hover {
    text-decoration: underline 1px double var(--d-green);
}

section.top .social-links svg {
    height: 20px;
}

div#requestModal {
    width: 100%;
}



button.btn.btn-primary {
    width: fit-content;
}

.lang-switch .current-lang:after {
    content: '\f078';
    color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='20' height='20' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23bfbfbf' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpolyline points='6 9 12 15 18 9' /%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    transition: 0.4s;
}

.lang-switch:hover .current-lang:after {
    transform: rotate(-90deg);
    opacity: 0.5;
}

section.top .social-links {
    justify-content: end;
}

.carousel-caption h2 {
    font-size: 6vw;
    text-transform: uppercase;
    color: var(--mint);
}

.video-embed-object-fit-cover {
    position: absolute;

    /* ensure positioning regardless of parent flex settings */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 100%;

    /* important */
    container-type: size;

    /* cut off overflowing video */
    overflow: hidden;
}

.video-embed-object-fit-cover>iframe {
    position: absolute;
    /* keep video centered both vertically and horizontally */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    height: 100%;

    /* force aspect ratio based on parent container */
    @container (min-aspect-ratio: 16/9) {
        height: 56.25cqw;
        /* 100*9/16 */
    }

    @container (max-aspect-ratio: 16/9) {
        width: 177.78cqh;
        /* 100*16/9 */
    }

    /* prevent interaction */
    pointer-events: none;
}

@keyframes shine {
    to {
        background-position: left
    }
}

.carousel-caption p {
    font-size: 1.5vw;
    font-weight: 300;
}

.carousel-caption {
    text-align: left;
    height: fit-content;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 5%;
    right: 50%;
    color: white;
}

.carousel-control-next,
.carousel-control-prev {
    width: 5%;
}

header#header {
    padding-bottom: .5rem;
    font-weight: 300;
    font-size: 15px;
    position: sticky;
    top: 0;
    z-index: 1050;
}

section.top .social-links svg {
    height: 20px;
}

section.cta.underslider {
    background: #f4f4f4;
    padding: 3rem 2rem;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -7%;
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 0 15px 0 #00000059;
    margin-bottom: 3rem;
}

section.cta.underslider .cta-form form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.cta.underslider .cta-form .wpforms-field-container {
    display: flex;
}

section.cta.underslider .cta-form div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    padding: 0;
}

section.cta.underslider .cta-form .wpforms-field-container>div {
    margin-right: 1rem !important;
}

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background: var(--d-green) !important;
    border-color: var(--d-green) !important;
    padding: 0.4rem 3rem !important;
    color: white !important;
    border-radius: 4px !important;
}

section.cta h5 {
    font-family: var(--bfont);
    font-size: 30px;
    color: var(--d-green);
}

section.cta.right-slider h5 {
    margin-bottom: 2rem;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 28px;
    color: white;
}

section.cta.underslider p {
    color: #525252;
}

section.cta.right-slider p {
    color: #b9f0d7;
}

section.cta.right-slider {
    position: absolute;
    top: 0;
    right: 5%;
    width: 30%;
    height: fit-content;
    bottom: 0;
    margin: auto;
    background: rgb(30 56 38 / 66%);
    backdrop-filter: blur(5px);
    padding: 4rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 16px 0 #0000009e;
    text-align: center;
    outline: 1px solid #198754;
    outline-offset: -1rem;
    background-size: 350%;
    background-position: left bottom;
    animation: ctashine 3s infinite linear;
}

@keyframes ctashine {
    to {
        background-position: right top;
    }
}

body .iti__country-list,
div.wpforms-container .wpforms-form .iti__country-list,
div.wpforms-container-full .wpforms-form .iti__country-list,
#wpforms-conversational-form-page .iti__country-list {
    max-width: 350px;
}

div.wpforms-container-full {
    margin: 0 !important;
}

section.cta div.wpforms-container-full .wpforms-form input[type=date],
section.cta div.wpforms-container-full .wpforms-form input[type=datetime],
section.cta div.wpforms-container-full .wpforms-form input[type=datetime-local],
section.cta div.wpforms-container-full .wpforms-form input[type=email],
section.cta div.wpforms-container-full .wpforms-form input[type=month],
section.cta div.wpforms-container-full .wpforms-form input[type=number],
section.cta div.wpforms-container-full .wpforms-form input[type=password],
section.cta div.wpforms-container-full .wpforms-form input[type=range],
section.cta div.wpforms-container-full .wpforms-form input[type=search],
section.cta div.wpforms-container-full .wpforms-form input[type=tel],
section.cta div.wpforms-container-full .wpforms-form input[type=text],
section.cta div.wpforms-container-full .wpforms-form input[type=time],
section.cta div.wpforms-container-full .wpforms-form input[type=url],
section.cta div.wpforms-container-full .wpforms-form input[type=week],
section.cta div.wpforms-container-full .wpforms-form select,
section.cta div.wpforms-container-full .wpforms-form textarea {
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}

section.cta div.wpforms-container-full .wpforms-form input[type=date]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=datetime]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=datetime-local]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=email]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=month]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=number]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=password]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=range]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=search]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=tel]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=text]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=time]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=url]::placeholder,
section.cta div.wpforms-container-full .wpforms-form input[type=week]::placeholder,
section.cta div.wpforms-container-full .wpforms-form select::placeholder,
section.cta div.wpforms-container-full .wpforms-form textarea::placeholder {
    color: white !important;
}

a.circled-text svg {
    fill: none;
    color: white;
    width: 250px;
    position: absolute;
    right: -27%;
    margin: auto;
    top: 0;
    bottom: 0;
}

section.features {
    background: var(--color-light);
    padding: 5% 0;
    outline: 1px solid var(--d-green);
    outline-offset: -1rem;
}

section.features h3 {
    font-size: 1.8vw;
    font-weight: 300;
    margin-bottom: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--d-green);
}

section.features h3 b {
    font-weight: 700;
    color: var(--s-green);
    font-size: 2vw;
}

section.features p {
    color: gray;
}

.single-feature:after {
    content: '';
    height: 50%;
    width: 1px;
    background: #6d635257;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.single-feature {
    position: relative;
    height: 100%;
    padding: 0 1rem;
}

.features .row>div:last-child .single-feature:after {
    display: none;
}

.single-feature .num {
    font-family: var(--hfont);
    font-size: 15vw;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 0;
    z-index: 0;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #cea14e4a;
}

section.about {
    padding: 5% 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(130deg, #87d8e7, var(--color-light));
    outline: 1px solid white;
    outline-offset: -1rem;
}

section.about h2,
section.floors h2 {
    font-size: 7vw;
    margin-bottom: 3rem;
    position: relative;
    color: var(--d-green);
}

section.about .icons {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
}

section.about .icons>.icon {
    width: 50%;
    display: flex;
    align-items: start;
    position: relative;
    padding: 1rem;
}

section.about .icons>.icon img {
    width: 50px;
    opacity: 0.8;
}

section.about .icons>.icon .image {
    width: 20%;
}

section.about .icons>.icon .text {
    width: 80%;
}

section.about .icons>.icon:nth-child(1):after,
section.about .icons>.icon:nth-child(2):after {
    content: '';
    position: absolute;
    width: 50%;
    height: 1px;
    background: var(--light-green);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

section.about .icons>.icon:nth-child(1):before,
section.about .icons>.icon:nth-child(3):before {
    content: '';
    position: absolute;
    background: var(--light-green);
    height: 50%;
    width: 1px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

section.about img.about-img {
    position: absolute;
    top: 0%;
    left: -14%;
    width: 50%;
}

section.about .cloud {
    width: 40%;
    height: 30%;
    position: absolute;
    background-size: 100% 100%;
    animation: cloud 30s infinite linear;
    left: -40%;
    mix-blend-mode: screen;
    opacity: 0.7;
}

@keyframes cloud {
    to {
        left: 100%
    }
}

section.about .cloud:nth-child(1) {
    background-image: url(img/cloud1.png);
}

section.about .cloud:nth-child(2) {
    top: 0;
    background-image: url(img/cloud2.png);
    animation-delay: 10s;
}

section.about .cloud:nth-child(3) {
    background-image: url(img/cloud3.png);
    animation-delay: 20s;
    top: -4%;
}

section.features-carousel {
    padding: 5% 0;
    background: #2f2f2f;
    outline: 1px solid var(--d-green);
    outline-offset: -1rem;
    background-color: #eff5ea;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
    background-blend-mode: soft-light, screen;
}

.single-car-feature {
    background: var(--mint);
    padding: 2rem;
    height: 100%;
    display: flex;
    box-shadow: 0 0 0 0 #00000082;
    align-items: center;
    color: var(--d-green);
    outline: 1px solid var(--d-green);
    outline-offset: -1rem;
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
}

.owl-item.center .single-car-feature {
    box-shadow: 0 0 10px 0 #00000082;
}

.single-car-feature h4 {
    color: var(--d-green);
    font-size: 2vw;
    margin-bottom: 2rem;
    position: relative;
    word-break: unset;
}

.owl-item {
    min-height: 100%;
}

.owl-stage {
    display: flex;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    width: 44px;
    height: 44px;
    background: var(--d-green);
    border-radius: 100%;
    font-size: 36px;
    line-height: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
    color: white;
}

.owl-carousel .owl-nav button.owl-next {
    right: -2rem;
}

.owl-carousel .owl-nav button.owl-prev {
    left: -2rem;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: var(--s-green);
}

.owl-carousel .owl-nav button.owl-next span,
.owl-carousel .owl-nav button.owl-prev span {
    position: absolute;
    left: 0;
    right: 0;
    height: fit-content;
    width: 44px;
    margin: auto;
    top: -7px;
    bottom: 0;
    font-weight: 300;
}

.owl-item:not(.center) .single-car-feature {
    transform: scale(0.95);
}

.owl-item {
    transition: 0.3s;
}

.owl-stage {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

section.features-carousel h2.heading {
    font-size: 7vw;
    color: var(--d-green);
    margin-bottom: 3rem;
}

section.features-carousel p.subheader {
    font-size: 1.5vw;
    color: var(--d-green);
    font-weight: 300;
    width: 60%;
    margin-bottom: 2rem;
}

section.tabs {
    background: var(--d-green);
    padding: 5% 0;
    outline: 1px solid var(--s-green);
    outline-offset: -1rem;
    position: relative;
    overflow: hidden;
}

section.tabs>svg {
    position: absolute;
    fill: var(--s-green);
    opacity: 0.1;
    width: 1214px;
    height: 277px;
    top: -2%;
}

.tabs .nav-pills .nav-link {
    display: flex;
    align-items: center;
    justify-content: start;
    text-align: left;
    border-bottom: 1px solid var(--s-green);
    border-radius: 0;
    padding: 1rem;
    color: var(--mint);
}

.tabs .nav-pills .nav-link:last-child {
    border-bottom: none;
}

.tabs .nav-pills .nav-link svg {
    width: 45px;
    height: 45px;
    margin-right: 1rem;
    stroke: var(--mint);
}

.tabs .nav-pills .nav-link.active svg,
.tabs .nav-pills .nav-link:hover svg {
    stroke: white;
}

.nav-link {
    color: var(--d-green);
}

.nav-link:focus,
.nav-link:hover {
    color: var(--s-green);
}

section.tabs h2 {
    font-size: 7vw;
    color: var(--mint);
    margin-bottom: 3rem;
}

.tabs p.subheaded {
    font-size: 1.5vw;
    color: var(--light-green);
    font-weight: 300;
    width: 70%;
    margin-bottom: 3rem;
}

section.projects-section {
    padding: 5% 0;
    background: #2f2f2f;
    outline: 1px solid var(--d-green);
    outline-offset: -1rem;
    background-color: #DCD9D4;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), radial-gradient(at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.50) 50%);
    background-blend-mode: soft-light, screen;
    position: relative;
    overflow: hidden;
}

section.projects-section>svg {
    width: 1160px;
    height: 545px;
    position: absolute;
    fill: black;
    z-index: 0;
    top: -20%;
    opacity: 0.05;
}

section.projects-section>* {
    position: relative;
}

ul.projects-filter-nav {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

ul.projects-filter-nav li.btn-filter {
    border: 1px solid var(--d-green);
    width: 100%;
    text-align: center;
    padding: 1rem;
    cursor: pointer;
    transition: .3s;
}

ul.projects-filter-nav li.btn-filter:hover,
ul.projects-filter-nav li.btn-filter.btn-active {
    background: var(--d-green);
    color: white;
}

.appt-modal .btn-close {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    font-size: 20px;
    z-index: 999;
    transition: .3s;
}

.image-fade {
    position: relative;
    width: fit-content;
}

.image-fade img:nth-child(2) {
    position: absolute;
    top: 0;
    z-index: 0;
}

.image-fade img {
    height: 100%;
}

.image-fade img:first-child {
    position: relative;
    z-index: 1;
    transition: 0.3s;
    opacity: 1;
}

.single-project:hover .image-fade img:first-child {
    opacity: 0;
}

section.projects-section .single-project {
    cursor: pointer;
    background: white;
}

.app-gallery .carousel-indicators button {
    width: 50px;
    height: 50px;
    background-size: cover;
}

section.features-carousel>svg {
    width: 1160px;
    height: 545px;
    position: absolute;
    fill: black;
    z-index: 0;
    top: -20%;
    opacity: 0.05;
}

section.features-carousel {
    position: relative;
    overflow: hidden;
}

section.features-carousel>* {
    position: relative;
}

.sqm:before {
    content: '';
    width: 25px;
    height: 25px;
    background-image: url(img/plan.png);
    display: block;
    background-size: cover;
    margin-right: 0.5rem;
}

.sqm {
    display: flex;
    align-items: center;
}

.bedroom:before {
    content: '';
    width: 25px;
    height: 25px;
    background-image: url(img/bed.png);
    display: block;
    background-size: cover;
    margin-right: 0.5rem;
}

.bedroom {
    display: flex;
    align-items: center;
}

.shdesc {
    display: flex;
}

.shdesc>div {
    margin-right: 1rem;
}

.price {
    font-family: var(--hfont);
    color: var(--d-green);
    font-size: 3vw;
}

.price span {
    font-size: 2vw;
}

.appt-modal h2 {
    font-size: 3vw;
}

.project-content {
    padding: 1rem;
    padding-bottom: 2rem;
}

section.projects-section h2.heading {
    font-size: 7vw;
    color: var(--d-green);
    margin-bottom: 3rem;
}

section.projects-section p.subheader {
    font-size: 1.5vw;
    color: var(--d-green);
    font-weight: 300;
    width: 60%;
    margin-bottom: 2rem;
}

section.cta {
    background-size: 100%;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    padding: 5% 0;
    color: white;
    outline: 1px solid white;
    outline-offset: -1rem;
    font-weight: 200;
}

section.cta:after {
    content: '';
    background: rgb(30 56 38 / 65%);
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    outline: 1px solid #bcd0c5;
    outline-offset: -1rem;
}

section.cta>* {
    position: relative;
    z-index: 1;
}

section.cta h2 {
    font-size: 7vw;
    color: var(--mint);
    margin-bottom: 3rem;
}

section.cta p.subheader {
    font-size: 1.5vw;
}

section.cta.right-slider:after {
    display: none;
}

section.floors {
    background: var(--light-green);
    padding: 5% 0;
    outline: 1px solid var(--d-green);
    outline-offset: -1rem;
}

section.floors svg {
    width: 100%;
    height: auto;
}

.svgfloor {
    mix-blend-mode: multiply;
    opacity: 0;
    transition: 0.4s;
    cursor: pointer;
    fill: #2B9206;
    fill-opacity: 0.5;
}

path.svgappt.sold {
    opacity: 1;
    fill: rgb(0, 0, 0);
    fill-opacity: 0.7;
}

.svgfloor:hover,
.svgfloor.active {
    opacity: 1;
}

.floors-description,
.appt-description {
    position: absolute;
    pointer-events: none;
    background: var(--mint);
    padding: 1rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 200;
    min-width: 100px;
    clip-path: circle(0.0% at 50% 50%);
    transition: clip-path 0.3s;
    z-index: 50;
}


.floors-description.active,
.appt-description.active {
    clip-path: circle(150.0% at 50% 50%);
}


.floors-description h4 {
    font-size: 1rem;
}

.svgappt {
    opacity: 0;
    transition: 0.3s;
    cursor: pointer;
    fill: #2B9206;
    fill-opacity: 0.5;
}

.svgappt:hover {
    opacity: 1;
}

.floors-images {
    position: relative;
    min-height: 600px;
}

.floor-image {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: 0.6s;
    pointer-events: none;
}

.floor-image.active {
    opacity: 1;
    pointer-events: all;
}

#apptModal .modal-content {
    background: #c0c0c0;
}

div#apptModal .description {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    font-weight: 800;
}

.sqm-icon {
    border: 1.5px solid;
    border-radius: 4px;
    font-size: 0.7rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    background: var(--light-green);
}

div#apptModal .description>div {
    align-items: center;
}

div#apptModal .description svg {
    stroke: var(--d-green);
    fill: var(--light-green);
}

.floors-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.floors-links h3 {
    color: gray;
    text-transform: uppercase;
    font-size: 1.2rem;
    cursor: pointer;
    width: 100%;
    padding: 1rem 0;
}

.floors-links h3.active {
    color: var(--d-green);
}

button.btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.modal-header {
    position: relative;
}

#apptModal .modal-title {
    text-transform: uppercase;
    font-size: 2rem;
    color: var(--d-green);
    margin-bottom: 5rem;
    text-align: center;
}

.appt-arrows svg {
    stroke: var(--d-green);
    width: 100%;
    height: 100%;
    stroke-width: 0.5px;
}

.appt-arrows.btn {
    width: 80%;
    padding: 0;
}



/*------------------------------------
------------MOBILE QUERUES------------
-------------------------------------*/
@media only screen and (max-width: 600px) {
    .mobilemenu {
        display: block;
    }

    #mobmenubtn span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    #mobmenubtn span:nth-child(2) {
        top: 0;
        bottom: 0;
        margin: auto;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    #mobmenubtn span:nth-child(3) {
        bottom: 0;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    #mobmenubtn.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -13px;
        left: 0;
    }

    #mobmenubtn.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    #mobmenubtn.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 15px;
        left: 0;
    }

    div#mobmenubtn {
        width: 40px;
        margin: auto;
        height: 29px;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        z-index: 6;
    }

    div#mobmenubtn span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: var(--d-green);
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .mobmenu-container.show {
        width: 100%;
        height: 100%;
        background: #ffffffb8;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 5;
        backdrop-filter: blur(6px);
        visibility: visible;
    }

    .mobmenu-container {
        transition: .4s;
        position: fixed;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        padding: 2em;
    }

    section.mobilemenu ul {
        font-size: 5vw;
        text-transform: uppercase;
        line-height: 3;
    }

    section.mobilemenu .socials {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: fit-content;
        color: white;
    }

    section.mobilemenu .socials>div {
        background: var(--primary-color);
        border-radius: 100%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5px;
    }

    .main-timeline .timeline {
        width: 100%;
        padding-top: 40px;
    }

    section.cta.right-slider {
        position: relative;
        width: 91%;
        right: 0;
        margin-top: -10%;
        background: var(--d-green);
        padding: 2rem;
    }

    section.cta.right-slider h5 {
        font-size: 5vw;
    }

    section.cta.right-slider p {
        color: var(--light-green);
        font-size: 3vw;
    }

    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=date],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=datetime],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=datetime-local],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=email],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=month],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=number],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=password],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=range],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=search],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=tel],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=text],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=time],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=url],
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=week],
    section.cta.right-slider div.wpforms-container-full .wpforms-form select,
    section.cta.right-slider div.wpforms-container-full .wpforms-form textarea {
        border-bottom-color: var(--light-green);
    }

    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=date]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=datetime]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=datetime-local]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=email]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=month]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=number]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=password]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=range]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=search]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=tel]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=text]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=time]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=url]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form input[type=week]::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form select::placeholder,
    section.cta.right-slider div.wpforms-container-full .wpforms-form textarea::placeholder {
        color: var(--light-green) !important;
    }

    .carousel-caption {
        bottom: 5%;
        top: 37%;
        right: 3%;
        left: 3%;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .carousel-caption h2 {
        font-size: 9vw;
    }

    .carousel-caption p {
        font-size: 3.5vw;
    }

    header#header {
        display: none;
    }

    section.top .phone {
        font-size: 5vw;
    }

    .lang-switch {
        font-size: 4vw;
    }

    section.top {
        padding-top: 0.5rem;
        padding-bottom: 1rem;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .mobmenu-container.show .logo {
        width: 75%;
    }

    .lang-switch select {
        background: none;
        color: inherit;
        text-transform: uppercase;
        border: none;
        font-weight: 300;
    }

    :focus-visible {
        outline: none;
    }

    section.features h3 {
        font-size: 4vw;
        margin-bottom: 0.5rem;
    }

    section.features h3 b {
        font-size: 5vw;
    }

    .single-feature {
        padding: 1rem;
    }

    .features .row>div:nth-child(even) .single-feature:after {
        display: none;
    }

    section.features p {
        font-size: 3.5vw;
        line-height: 1.2;
    }

    .features .row>div:not(:last-child) .single-feature:before {
        content: '';
        position: absolute;
        width: 60%;
        height: 1px;
        bottom: 0;
        display: block;
        background: #6d635257;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0.5rem;
    }

    section.features {
        background: none;
    }

    section.about h2,
    section.about h2,
    section.floors h2 {
        font-size: 9vw;
        text-align: center;
    }

    section.about {
        font-size: 3.5vw;
        display: flex;
        flex-direction: column-reverse;
    }

    section.about .cloud {
        height: 10%;
    }

    section.about .icons>.icon {
        width: 100%;
    }

    section.about p.about-text {
        width: 94%;
        margin: auto;
    }

    section.about img.about-img {
        top: 9%;
        position: relative;
        width: 80%;
        left: 0;
        right: 0;
        margin: auto;
        order: 1;
    }

    section.about .icons>.icon:before,
    section.about .icons>.icon:after {
        display: none;
    }

    .owl-carousel .owl-nav button.owl-prev {
        left: -1rem;
    }

    .owl-carousel .owl-nav button.owl-next {
        right: -1rem;
    }

    .owl-carousel .owl-nav button.owl-next,
    .owl-carousel .owl-nav button.owl-prev {
        width: 30px;
        height: 30px;
        opacity: 0.5;
    }

    .owl-carousel .owl-nav button.owl-next span,
    .owl-carousel .owl-nav button.owl-prev span {
        width: 30px;
    }

    .single-car-feature h4 {
        font-size: 7vw;
    }

    section.features-carousel {
        text-align: center;
        overflow: hidden;
    }

    section.features-carousel h2.heading {
        font-size: 10vw;
    }

    section.features-carousel p.subheader {
        font-size: 3.5vw;
        width: 100%;
        color: black;
    }

    .owl-carousel .owl-item img {
        width: 50%;
        margin: auto;
    }

    .carouselio {
        width: 85%;
        margin: auto;
    }

    .single-car-feature {
        background: var(--color-light);
        padding: 1rem;
    }

    .owl-item.center .single-car-feature {
        box-shadow: none;
    }

    .tabs p.subheaded {
        font-size: 1.5vw;
        color: gray;
        font-weight: 300;
        width: 70%;
        margin-bottom: 3rem;
    }

    section.tabs h2 {
        font-size: 10vw;
        text-align: center;
    }

    .tabs p.subheaded {
        font-size: 3.5vw;
        width: 100%;
        text-align: center;
        padding: 0 1rem;
        color: wheat;
    }

    .tabs .nav-pills .nav-link svg {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .tabs .nav-pills .nav-link {
        width: fit-content;
        padding: 2px;
        border-radius: 2em;
        font-size: 3vw;
        border: 1px solid var(--d-green);
        margin: 2px;
        color: var(--mint);
    }

    .tabs .nav-pills {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 10px;
        justify-content: center;
        margin-bottom: 1rem;
    }

    section.features-carousel>svg {
        width: 100%;
        height: 30%;
        top: -5%;
        left: -5%;
    }

    section.tabs>svg {
        width: 100%;
        height: 30%;
        top: -2%;
    }

    section.projects-section h2.heading {
        font-size: 10vw;
        text-align: center;
    }

    section.projects-section p.subheader {
        font-size: 3.5vw;
        width: 100%;
        text-align: center;
        padding: 0 1rem;
        color: black;
    }

    ul.projects-filter-nav {
        flex-wrap: wrap;
        padding: 5px;
    }

    ul.projects-filter-nav li.btn-filter {
        width: fit-content;
        padding: 2px 5px;
        border-radius: 1em;
        font-size: 3.5vw;
    }

    .owl-carousel .owl-item .image-fade img {
        width: 100%;
    }

    .appt-modal h2 {
        font-size: 7vw;
    }

    .price {
        font-size: 8vw;
        text-align: center;
        margin-bottom: 1rem;
    }

    .price span {
        font-size: 5vw;
    }

    .mobmenu-container .logo {
        margin-bottom: 3rem;
    }

    section.top .mobmenu-container .social-links {
        justify-content: space-between;
        width: 45%;
        margin: auto;
    }

    section.top .mobmenu-container .social-links svg {
        width: 2rem;
        height: 2rem;
    }

    .image-fade img:nth-child(2) {
        display: none;
    }

    .owl-carousel .owl-item .image-fade img {
        pointer-events: none;
    }

    section.cta h2 {
        font-size: 10vw;
        text-align: center;
        margin: 0;
    }

    section.cta p.subheader {
        font-size: 3.5vw;
        text-align: center;
        padding: 1rem;
    }

    section.cta .cta-form {
        margin: 1rem;
    }

    section.cta {
        background-size: cover;
    }

    .carousel-inner video {
        height: 50vh;
    }

    section#about button.btn.btn-primary {
        margin: auto;
        display: block;
        z-index: 5;
        position: relative;
    }

    button.btn.btn-primary {
        width: 100%;
        padding: 1rem;
    }

    #apptModal .modal-title {
        margin-bottom: 0;
    }

    .appt-arrows.btn {
        width: 15vw;
        position: absolute;
        top: 19vh;
    }

    .btn-prev-appt {
        left: -5%;
    }

    .btn-next-appt {
        right: -5%;
    }

    .appt-arrows svg {
        stroke-width: 1.5px;
    }

    section.floors h2 {
        margin: 2rem 0;
    }

    .floors-images {
        min-height: 425px;
    }

    .carousel-item {
        height: 53vh;
    }

    .floors-links {
        flex-wrap: wrap;
        margin: auto;
        text-align: center;
        margin-top: 1rem;
    }

    .floors-links h3 {
        width: 50%;
    }
}