:root {
    --color-primary: #097166;
    --color-secondary: #abd156;
    --color-sabbia: rgb(201, 186, 66);
    --color-sabbia-light: rgb(243, 242, 236);
    --color-red: #f05a57;
    --color-background: rgba(58, 58, 58, 0.25);
    --color-background-light: rgba(255, 255, 255, 0.7);
    --interno: 40px;
    --sezione: 80px;
    --altezza-navbar: 80px;
    --svg: 20px;
}

img {
    max-width: 100%;
}

body {
    background-color: whitesmoke;
    padding-bottom: 2rem;
}

/* CUSTOM */
.pit {
    padding-top: var(--interno);
}

.pib {
    padding-bottom: var(--interno);
}

.pst {
    padding-top: var(--sezione);
}

.psb {
    padding-bottom: var(--sezione);
}

.regular-svg {
    width: var(--svg);
    height: var(--svg);
}

.big-svg {
    width: calc(var(--svg)*1.5);
    height: calc(var(--svg)*1.5);
}

.my_title-card {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bg-fake-sabbia {
    background-color: var(--color-sabbia-light);
}

.form-control,
.form-select {
    &:focus {
        border-color: var(--color-primary);
        box-shadow: none;
    }
}

.wpcf7-acceptance {
    .wpcf7-list-item {
        margin: 0;
    }
}

#smooth-content {
    padding-bottom: 2rem;
}

/* OWL CAROUSEL GENERAL */
.owl-carousel {
    position: relative;

    .owl-dots {
        padding-top: 15px;

        .owl-dot {
            &.active {
                span {
                    background-color: var(--color-secondary);
                }
            }
        }
    }

    .owl-nav {
        position: absolute;
        left: -30px;
        right: -30px;
        top: 50%;
        transform: translateY(-50px);
        display: flex;
        justify-content: space-between;

        .owl-prev,
        .owl-next {
            svg {
                fill: black;
            }

            &:hover {
                background: transparent !important;
            }
        }
    }
}

/* HEADER E FOOTER */
.header,
#footer {
    width: 90%;
    max-width: 1728px;
    margin: 0 auto;
    background-color: var(--color-background-light);
    color: var(--color-primary);
    font-weight: bold;

    backdrop-filter: blur(5px);

    &:hover {
        background-color: white;
    }

    span {
        color: var(--color-primary);
    }

    span:hover {
        color: var(--color-red);
    }
}

.header {
    margin: 30px auto 0;
    border-radius: var(--bs-border-radius-xxl);
    box-shadow: var(--bs-box-shadow-sm);
    transition: 1s;

    &.reduced {
        width: 100%;
        max-width: 1920px;
        border-radius: 0;
        margin: 0 auto;
        background-color: var(--color-primary) !important;

        span {
            color: white !important;
        }

        span:hover {
            color: var(--color-secondary) !important;
        }

        svg * {
            fill: white !important;
        }
    }

    .navbar {
        width: 100%;
        max-width: 1728px;
        margin: 0 auto;
    }

    .navbar-brand {
        svg {
            width: 300px;
        }
    }

    .navbar-toggler {
        border: none;
        box-shadow: none;

        &:focus {
            border: none;
            box-shadow: none;
        }
    }

    .navbar-toggler-icon {
        background-image: none;
    }
}

/* MAIN */
.hero {
    position: relative;
    width: 95%;
    margin: 0 auto;
    margin-top: 15px;
    max-width: 1824px;
    height: 500px;

    display: flex;
    align-items: end;
    justify-content: center;

    .title {
        margin-bottom: 20px;
        padding: 10px 25px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        h1 {
            font-weight: bold;
            color: white;
        }
    }

    &.homepage {
        height: 625px;
    }
}

.padding-first {
    padding-top: 190px;
}

.flip-card {
    height: 400px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.img-immobile {
    height: 600px;
    overflow: hidden;
}

/* FILTRI */
#filter-form {

    select,
    input {
        width: 65%;
    }
}

/* FOOTER */
#footer {
    font-weight: normal;

    .brand {
        svg {
            width: 250px;
        }
    }

    svg {
        width: 30px;
        height: 30px;
        fill: var(--color-primary);

        &:hover {
            fill: var(--color-red);
        }
    }

    img {
        width: 25px;
    }
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-grey);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-red);
}

/* MAPS ACF */
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

.acf-map img {
    max-width: inherit !important;
}

/* PAGINAZIONE ARTICOLI */
.navigation.pagination {
    justify-content: center;

    .nav-links {
        padding: 5px 10px;
        background-color: var(--color-primary);
        border-radius: 10px;
        color: var(--color-secondary);

        a {
            color: white;

            &:hover {
                color: var(--color-secondary);
            }
        }
    }
}

/* BUTTON */
a,
button {
    transition: 0.4s;
}

.button-white {
    border: none !important;
    background-color: white;
    color: var(--color-primary);

    &:hover {
        color: var(--color-sabbia);
    }
}

.button-white-outline {
    border: 1px solid white;
    background-color: white;
    color: black;

    &:hover {
        border: 1px solid var(--color-primary);
        background-color: white;
    }
}

.button-sabbia,
.wpcf7-submit {
    border: 1px solid var(--color-sabbia) !important;
    background-color: var(--color-sabbia) !important;
    color: white !important;

    &:hover {
        background-color: white !important;
        color: var(--color-sabbia) !important;
        border: 1px solid var(--color-sabbia) !important;
    }
}

.wrapper-button {
    display: inline-block;
    padding: 5px 5px 5px 15px;
    border-radius: var(--bs-border-radius-xxl) !important;

    .link-animato {
        display: flex;
        align-items: center;
        position: relative;

        p {
            z-index: 3;
            font-weight: bold;
        }

        svg {
            z-index: 3;
        }

        .bounce {
            z-index: 1;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            position: absolute;
            top: 50%;
            transform: translatey(-50%);
            left: -0.65em;
        }
    }
}

.link-primary {
    background-color: var(--color-primary);

    p {
        color: white;
    }

    svg {
        fill: white;
    }

    .bounce {
        background-color: var(--color-secondary);
    }
}

.link-secondary {
    background-color: var(--color-secondary);

    p {
        color: white;
    }

    svg {
        fill: white;
    }

    .bounce {
        background-color: var(--color-primary);
    }
}

.link-tertiary {
    background-color: var(--color-sabbia);

    p {
        color: white;
    }

    svg {
        fill: white;
    }

    .bounce {
        background-color: var(--color-primary);
    }
}

.link-white {
    background-color: white;

    p {
        color: var(--color-primary);
    }

    .bounce {
        background-color: var(--color-sabbia-light);
    }

    svg {
        fill: var(--color-primary);
    }
}

.link-white-tertiary {
    background-color: white;

    p {
        color: var(--color-sabbia);
    }

    .bounce {
        background-color: var(--color-sabbia-light);
    }

    svg {
        fill: var(--color-sabbia);
    }
}

/* ACCORDION */
.accordion-button:not(.collapsed) {
    background-color: var(--color-sabbia-light) !important;
    color: black !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

/* RECENSIONI */
.recensioni {
    iframe {
        max-width: 100%;
        overflow: hidden;
    }
}

/* COLLAPSE IMMOBILE */
.my-collapse {
    display: none;

    &.active {
        display: block;
    }
}

/* MODAL */
.my-modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(128, 128, 128, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    .content {
        width: 90%;
        max-width: 450px;
        margin: 0 auto;
    }

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