:root {
    --background: #00af97;
    --white: rgba(255, 255, 255, 0.93);
    --nav: rgba(0, 142, 167, 0.32);
    --menu: rgb(0, 142, 167);
    --hover: #a7feffed;
    --datiFooter: #cbcbcbed;
}

body {
    background-color: var(--background);
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
}

.button-navbar {
    background-color: var(--datiFooter);
    padding: 0.5em;
    text-decoration: none;
    color: white;

    border-radius: 10px;
}

.padding-3 {
    padding: 3em;
}

.swiper {

    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;

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

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spacing-top {
    padding-top: 3em;
}

.link-card {
    text-decoration: none;
}

.padding-2 {
    padding-bottom: 0;
    padding: 2em;
}

.padding-left-2 {
    padding-left: 2em;
}

.title-servizi {
    color: var(--white);

}

.white-bk {
    background-color: var(--white);
}

.link-footer {
    text-decoration: none;
    color: var(--white);
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.link-footer:hover {
    text-decoration: none;
    color: var(--hover);
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.subtitle-sez-white {
    font-size: calc(20px + (25 - 20) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    background-color: var(--background);
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.title-sez-white {
    font-weight: 700;
    font-size: calc(20px + (55 - 20) * ((100vw - 300px) / (1920 - 300)));
    background-color: var(--background);
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;


}

.sezioni {
    padding-bottom: 0;
    padding: 4em;
    padding-top: 5em;
    height: auto;

}

.text-servizi {
    padding: 1em;
}

.logo-nav {
    width: 120px;
}

.text {
    font-size: calc(14px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.text-footer-white {
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
    color: var(--white);
}

.text-white {
    color: var(--white);
    font-size: calc(14px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.navbar {
    background-color: var(--nav);

}

.navbar-list {
    gap: 2rem;
    display: inline-flex;
    list-style: none;
    align-items: center;
    margin-bottom: 0;
}


.bordered-top {
    border-top: 5px solid var(--white);
}

.bordered-bottom {
    border-bottom: 5px solid var(--white);
}

.offcanvas {
    background-color: var(--menu);
}

.nav-link {
    color: var(--white);
    font-size: calc(14px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.sez-contatti {
    padding: 2em;
}

.title {
    font-size: calc(20px + (55 - 20) * ((100vw - 300px) / (1920 - 300)));
    color: var(--white);
    text-transform: uppercase;
}

.subtitle {
    color: var(--white);
    text-transform: uppercase;
    font-size: calc(20px + (25 - 20) * ((100vw - 300px) / (1920 - 300)));
}

.back1 {
    background-image: url("../img/card/1.jpg");
    background-size: cover;
}

.separatore {
    width: 80%;
    height: 1vh;
    background: #00af97;
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
}

.list {
    color: var(--white);
    padding-left: 8em;
    font-size: calc(14px + (23 - 14) * ((100vw - 300px) / (1920 - 300)));
}

/*FORM*/
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.form-control:focus {
    border: 1px solid #00af97;

}

/*FORM*/
/*Card*/
.back-1 {
    background: url("../img/card/1.jpg");
    background-size: cover;

}

.back-2 {
    background: url("../img/card/2.jpg");
    background-size: cover;
    background-position: center center;
}

.back-3 {
    background: url("../img/card/3.jpg");
    background-size: cover;
    background-position: center center;
}

.back-4 {
    background: url("../img/card/4.jpg");
    background-size: cover;
    background-position: center center;
}

.back-5 {
    background: url("../img/card/5.jpg");
    background-size: cover;
    background-position: center center;
}

.back-6 {
    background: url("../img/card/6.jpg");
    background-size: cover;
    background-position: center center;
}

.back-7 {
    background: url("../img/card/7.jpg");
    background-size: cover;
    background-position: center center;
}

.back-8 {
    background: url("../img/card/8.jpg");
    background-size: cover;
    background-position: bottom bottom;
}

.back-9 {
    background: url("../img/card/9.jpg");
    background-size: cover;
    background-position: center center;
}
.back-10 {
    background: url("../img/card/10.jpg");
    background-size: cover;
    background-position: center center;
}

.back-home {
    background-image: url("../img/back.jpg");
    background-size: cover;
    border-radius: 38% 25% 0% 43% / 37% 0% 25% 40%;
    background-position: center center;

}


/*Card*/
.hover {
    background-color: black;

}

.card {
    border: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    font-weight: 600;
    min-height: 45vh;
    -webkit-box-shadow: 2.5px 2px 8px 0 #000000;
    -moz-box-shadow: 2.5px 2px 8px 0 #000000;
    box-shadow: 2.5px 2px 8px 0 #000000;

}

.title-uffici {
    padding-left: 6em;
}

.card-span {
    font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1920 - 300)));
    padding: 1em;
    height: 10vh;
    width: 100%;
    background-color: var(--background);
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    color: white;
    position: relative;
    z-index: 2;

}

.sez-contatti {
    border-top: #00af97 solid 2px;
    border-bottom: #00af97 solid 2px;

}

.row-contatti {

    display: flex;
    justify-content: center;
    padding: 2em;
}

.title-page {
    font-weight: 700;
    padding-top: 4em;
    padding-left: 3em;
}

.text-condominiali {
    padding: 3em;
    padding-left: 7em;
}

.button {
    white-space: nowrap;
    text-decoration: none;
    color: var(--white);
    padding: 0.5em;
    border-radius: 20px;
    background-color: var(--background);
    ;
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
}

.button:hover {
    white-space: nowrap;
    text-decoration: none;
    color: var(--hover);
    padding: 0.5em;
    border-radius: 20px;
    background-color: var(--background);
    ;
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
}

.title-h2 {
    font-size: calc(24px + (37 - 24) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 700;
    text-align: center;
    background-color: var(--background);
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.back-condominio {

    display: flex;
    align-items: center;
    background-image: url("../img/gallery/condominiali/condominio.jpg");
    background-size: cover;
    background-position: 20% 20%;
    min-height: 60vh;
    opacity: 52%
}

.back-industriali {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/industriali/industriali.jpg");
    background-size: cover;
    background-position: 20% 20%;
    min-height: 60vh;
    opacity: 52%
}

.back-uffici {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/uffici/ufficio.jpg");
    background-size: cover;
    background-position: 30% 65%;
    min-height: 60vh;
    opacity: 52%
}

.back-ville {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/ville/ville.jpg");
    background-size: cover;
    background-position: 30% 90%;
    min-height: 60vh;
    opacity: 52%
}

.back-giardinaggio {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/giardinaggio/giardinaggio.jpg");
    background-size: cover;
    background-position: 50% 50%;
    min-height: 60vh;
    opacity: 52%
}

.back-imbiancature {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/imbiancature/imbiancature.jpg");
    background-size: cover;
    background-position: 30% 50%;
    min-height: 60vh;
    opacity: 52%
}

.back-idrolavaggi {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/idrolavaggi/header.jpg");
    background-size: cover;
    background-position: 30% 50%;
    min-height: 60vh;
    opacity: 52%
}
.back-rifiuti {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/rifiuti/header.jpg");
    background-size: cover;
    background-position: 30% 50%;
    min-height: 60vh;
    opacity: 52%
}

.back-solare {

    display: flex;
    align-items: center;
    background-image: url("../img/gallery/pannelli-solari/solari.jpg");
    background-size: cover;
    background-position: 20% 20%;
    min-height: 60vh;
    opacity: 52%
}
.back-post-ristrutturazione {
    display: flex;
    align-items: center;
    background-image: url("../img/gallery/pulizie-post-ristrutturazioni/pulizie.png");
    background-size: cover;
    background-position: 20% 20%;
    min-height: 60vh;
    opacity: 52%;
}
#map {
    height: 250px;
}

.footer {
    background-color: var(--background);
    background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
}

.subtitle-footer {
    font-size: calc(28px + (30 - 28) * ((100vw - 300px) / (1920 - 300)));
    padding-bottom: 0.5em;
}

@media only screen and (max-width:1624px) {
    .card-span {
        
        height: 15vh;
       
    }
}

@media only screen and (max-width:1024px) {
     .card-span {
        
        height: 10vh;
       
    }
    .card-container {
        margin-top: 1rem;
    }

    .col-button {
        margin-top: 2rem;
    }

    .back-condominio {

        display: flex;
        align-items: center;
        background-image: url("../img/gallery/condominiali/condominio.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-industriali {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/industriali/industriali.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-uffici {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/uffici/ufficio.jpg");
        background-size: cover;
        background-position: 30% 65%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-ville {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/ville/ville.jpg");
        background-size: cover;
        background-position: 30% 90%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-giardinaggio {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/giardinaggio/giardinaggio.jpg");
        background-size: cover;
        background-position: 50% 50%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-imbiancature {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/imbiancature/imbiancature.jpg");
        background-size: cover;
        background-position: 30% 50%;
        min-height: 45vh;
        opacity: 52%
    }

}

@media only screen and (max-width:768px) {
    .title-uffici {
        padding-left: 1em;
    }

    .back-condominio {

        display: flex;
        align-items: center;
        background-image: url("../img/gallery/condominiali/condominio.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-industriali {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/industriali/industriali.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-uffici {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/uffici/ufficio.jpg");
        background-size: cover;
        background-position: 30% 65%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-ville {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/ville/ville.jpg");
        background-size: cover;
        background-position: 30% 90%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-giardinaggio {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/giardinaggio/giardinaggio.jpg");
        background-size: cover;
        background-position: 50% 50%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-imbiancature {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/imbiancature/imbiancature.jpg");
        background-size: cover;
        background-position: 30% 50%;
        min-height: 45vh;
        opacity: 52%
    }

    .back-idrolavaggi {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/idrolavaggi/header.jpg");
        background-size: cover;
        background-position: 100% 50%;
        min-height: 45vh;
        opacity: 52%
    }
    .back-rifiuti {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/rifiuti/header.jpg");
        background-size: cover;
        background-position: 100% 50%;
        min-height: 45vh;
        opacity: 52%
    }
    .back-solare {

        display: flex;
        align-items: center;
        background-image: url("../img/gallery/pannelli-solari/solari.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 30vh;
        opacity: 52%
    }

    .col-button {
        margin-top: 2rem;
    }

    .button {
        white-space: nowrap;
        margin-top: 2rem;
    }

    .subtitle-sez-white {

        padding: 2em;
        padding-bottom: 0;

    }

    .text {
        padding: 2em;
    }

    .sezioni {
        height: auto;
        padding: 0
    }

    .card {
        min-height: auto;
        height: 35vh;
        margin-bottom: 2rem;
    }

    .logo-home {
        padding: 2em;

    }

    .sezioni {
        padding-left: 0;
        padding-bottom: 0;
        height: auto;
    }

    .title-sez-white {
        padding-left: 2em;
        padding: 1em;
    }

    .sezione-servizi {
        height: auto;
    }

    .back-home {

        border-radius: unset
    }
}

@media only screen and (max-width:450px) {
    .button {
        white-space: nowrap;

    }

    .list {
        padding-left: 4em;
    }

    .back-condominio {

        display: flex;
        align-items: center;
        background-image: url("../img/gallery/condominiali/condominio.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-industriali {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/industriali/industriali.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-uffici {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/uffici/ufficio.jpg");
        background-size: cover;
        background-position: 30% 65%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-ville {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/ville/ville.jpg");
        background-size: cover;
        background-position: 30% 90%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-giardinaggio {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/giardinaggio/giardinaggio.jpg");
        background-size: cover;
        background-position: 50% 50%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-imbiancature {
        display: flex;
        align-items: center;
        background-image: url("../img/gallery/imbiancature/imbiancature.jpg");
        background-size: cover;
        background-position: 30% 50%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-solare {

        display: flex;
        align-items: center;
        background-image: url("../img/gallery/pannelli-solari/solari.jpg");
        background-size: cover;
        background-position: 20% 20%;
        min-height: 30vh;
        opacity: 52%
    }

    .back-home {
        height: 20vh;
        border-radius: unset
    }

    #map {
        height: 200px;
    }

    .sezioni {
        height: auto;
        padding: 0;
    }

    .sezione-servizi {
        height: auto;
    }

    .card {
        min-height: auto;
        height: 28vh;
        margin-bottom: 2rem;
    }

    #contatti {
        text-align: left;
        padding: 2em;
    }

    .logo-home {
        padding: 2em;
    }

    .separatore {
        height: 1vh;
        background: #00af97;
        background: -webkit-linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
        background: linear-gradient(151deg, #00af97 0%, #2d2e5a 100%);
    }

    .nav-link {
        color: var(--white);
        font-size: calc(20px + (28 - 20) * ((100vw - 300px) / (1920 - 300)));
    }

    .title-sez-white {
        padding-top: 2em;
        padding-bottom: 1em;
        border-bottom: 2px solid var(--background);
        font-size: calc(25px + (32 - 25) * ((100vw - 300px) / (1920 - 300)));
    }

    .title-page {
        font-size: calc(25px + (32 - 25) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 700;
        padding-top: 5em;
        padding-left: 1em;
    }

    .title-h2 {
        font-size: calc(25px + (27 - 25) * ((100vw - 300px) / (1920 - 300)));
    }

    .subtitle-servizi {
        padding-top: 2em;
    }

    .subtitle {
        font-size: calc(15px + (17 - 15) * ((100vw - 300px) / (1920 - 300)));
    }

    .text-condominiali {
        font-size: calc(17px + (21 - 17) * ((100vw - 300px) / (1920 - 300)));
        padding: 1em;
    }

    .sez-contatti {
        padding: 0.5em;
    }

    .padding-bottom {
        padding-bottom: 2em;
    }

    @media only screen and (max-width:320px) {
        .title-page {
            font-size: calc(22px + (25 - 22) * ((100vw - 300px) / (1920 - 300)));
            font-weight: 700;
            padding-top: 5em;
            padding-left: 1em;
        }

        .text-condominiali {
            padding: 1em;
        }

        .sez-contatti {
            padding: 1em;
        }

        .list {
            font-size: calc(17px + (25 - 22) * ((100vw - 300px) / (1920 - 300)));
            padding-left: 2em;
        }
    }

}