/* --- FONT --- */
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* --- FINE FONT --- */


/* --- GENERALE --- */
html {
    overflow-x: hidden; /* oppure clip, vedi nota sotto */
    touch-action: pan-y pinch-zoom; /* su device touch: solo pan verticale */
    overscroll-behavior-x: contain; /* evita “rimbalzi” laterali */
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* il contenuto occupa tutto lo spazio disponibile */
}

footer.footer {
    margin-top: auto; /* si ancora al fondo */
}

/* --- FINE GENERALE --- */


/* --- NAVBAR --- */
/*
    -- il collapse deve chiudersi se si clicca sopra
    -- allineare logo a sinistra in visualizzazione mobile
    -- allineare men� a destra
    -- al click fuori dal men� in visualizzazione mobile il men� si deve chiudere

*/
.navbar {
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease-in-out;
    z-index: 10;
    padding: 20px 50px;
}

.navbar-brand img{
    width: 60px;
}

@media (max-width: 992px) {
    .navbar-brand img {
        width: 40px;
    }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E") !important;
    transition: all 0.3s ease;
    
}

/*Al click diventa verde*/
.navbar-toggler-icon.clicked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2300c3a5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E") !important;
}

.navbar.dark {
    background-color: #333 !important;
}

/* link base */
.nav-link {
    position: relative;
    padding: .25rem .75rem;
    color: #eaeaea;
    z-index: 1; /* testo sopra al rettangolo */
}

.navbar-nav {
    position: relative;
    gap: 45px;
}



/* rettangolo della voce attiva (Home) */
#indicatore {
    content: "";
    position: absolute;
    left: 0px;
    height: 32px; /* altezza del “pill” */
    width: 100px;
    background: #00c3a5; /* colore brand */

    z-index: -1; /* dietro al testo */
    transition: transform 250ms ease, width 250ms ease;
    /* taglio obliquo a destra (come nello screenshot) */
    clip-path: polygon( 0 0, 100% 0, calc(100% - 18px) 100%, 0 100% );
}

@media (max-width: 992px) {
    .navbar {
        padding: 15px 25px;
    }

    #indicatore {
        display: none;
    }

    .navbar-collapse {
        padding: 25px;
        margin: 0;
        align-items: center;
    }

        .navbar-collapse > ul > li {
            text-align: center;
        }

    #mainNav > li > a:hover {
        transition: all 0.3s ease;
        color: #00a084 !important;
    }
}
/* --- FINE NAVBAR --- */






/* --- FOOTER --- */
/* DOPO (o semplicemente rimuovi la regola) */
.footer {
    position: static !important;
    white-space: normal !important;
    width: 100%;
    background-color: #333;
    z-index: 9; /* opzionale */
}
.footer-element {
   /* niente altezza fissa */
    min-height: 300px; /* opzionale: mantiene un aspetto �alto� ma elastico */
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;  
}

.footer-text {
    overflow-wrap: anywhere; /* sicurezza per parole/lurl lunghi */
    max-width: 38ch; /* (solo estetica) righe pi� leggibili su desktop */  
}

.footer-title {
    font-family: "Merriweather";
    font-weight: 400;
    font-size: 20px;
    color: #00a084
}

.footer-text {
    margin-top: 20px;
    font-family: "Chivo";
    font-weight: 400;
    font-size: 15px;
    color: white;
    line-height: 1.8;
    max-width: 100%
}

.footer-social {
    margin-top: 12px;
    display: flex;
    gap: 12px;
}

    .footer-social .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        /*border-radius: 50%;*/
        background-color: #f2f2f2;
        color: #333;
        font-size: 18px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

        .footer-social .social-link:hover {
            background-color: #00a084; /* il tuo colore brand */
            color: #fff;
        }

.btn-contattaci {
    width: 150px !important;
}

@media (max-width: 576px){
    .footer-element {
        margin-left: 0;
        display: flex;
        flex-direction: column; /* impila verticalmente */
        align-items: center; /* centra in orizzontale TUTTO */
        text-align: center; /* centra anche il testo */
        gap: 12px; /* spazio uniforme tra elementi */
    }

    .footer-text {
        max-width: 100%;
    }

    .btn-contattaci {
        width: 100% !important;
    }
}



/* --- FINE FOOTER --- */


/* --- HERO --- */
#hero {
    position: relative;
    background: linear-gradient( rgba(0, 0, 0, 0.75), /* colore scuro sopra */
    rgba(0, 0, 0, 0.5) );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1080px; /* tutta l�altezza viewport */
    width: 100%;
    color: white;
    display: flex; /* flexbox */
    flex-direction: column; /* impila titolo e testo in colonna */
    justify-content: center; /* centra in verticale */
    align-items: center; /* centra in orizzontale */
}

#hero > .container-fluid {
    margin-top: -305px;
}


/*Titolo e sottotitolo dell'hero*/
.title {
    font-family: "Merriweather";
    font-weight: 400;
    font-size: 48px;
    margin-bottom: 0px;
}

.subtitle {
    font-family: "Chivo";
    font-weight: 400;
    font-size: 24px;
    color: #00a084;
    margin-bottom:30px;
}

/*Pulsanti*/
.btn-white {
    display: inline-block;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 16px;
    width: 240px;
    height: 48px;
    line-height: 48px;
    color: white;
    border: thick;
    border-color: white !important;
    text-decoration: none;
    border: 1px solid white;
    margin: 0 7.5px;
    transition: background-color 0.5s ease,
                color 0.5s ease, 
                border-color 0.5s ease;
    text-align: center;
    cursor: pointer;
}

.btn-grey {
    display: inline-block;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 16px;
    width: 240px;
    height: 48px;
    line-height: 48px;
    color: #333;
    border: thick;
    border-color: #333 !important;
    text-decoration: none;
    border: 1px solid white;
    margin: 0 7.5px;
    transition: all 0.5s ease;
    text-align: center;
    cursor: pointer;
}

.btn-white:hover, .btn-grey:hover{
    background-color: #00a084 !important;
    border-color: #00a084 !important;
    color: white;
}

/*Video*/
.video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.rete {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(800px, 95vw, 1600px);
    height: auto;
    pointer-events: none;
}


/*Immagini a forma di griglia*/
.griglia {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}


.griglia-hero {
    bottom: -6%;
    left: 0;
    width: 100%;
    height: auto;
    z-index:1
}
/* --- FINE HERO --- */


/* --- MARMO --- */
.marmo {
    position: relative;
    background-image: url("/media/Marmo.jpg");
    background-size: cover;
}
/* -- FINE MARMO --- */


/* --- ABOUT --- */
.griglia-container-left {
    position: relative;
    left: 51px;
    display: flex;
}

.griglia-about {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0
}

.griglia-about-left {
    z-index: 2;
    clip-path: inset(0 60% 0 0); /* mostra solo la met� alta */
}

.griglia-about-right {
    z-index: 0;
    clip-path: inset(0 0 0 40%); /* mostra solo la met� bassa */
}


.griglia-about-dx {
    position: absolute;
    top: 0; /* percentuale adattiva */
    right: 100px; /* la sposti dal lato destro invece di fissare in px */
    width: 37%; /* stessa larghezza */
    height: auto;
}

.griglia-container-right {
    position: relative;
    right: 426px;
    display: flex;
    background-color:red;
}

/*Griglia sottosopra*/
.griglia-sottosopra {
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index:0;
}

/*In visualizzazione mobile tutte le griglie scompaiono tranne quella dell'hero*/
@media (max-width: 992px) {
    .griglia:not(.griglia-hero) {
        display: none;
    }
}


/*card bianca*/
#about {
    background-color: none;
    height: auto;
    position:relative;
}

.about-row {
    display:flex;
    padding-top: 230px;
}

.about-white-card {
    background-color: #ffffffcc;
    width: min(1389px, calc(100% - 100px));
    margin-left: 50px;
    margin-right: 50px;
    transform: translateX(-500px);
}

.about-white-content {
    margin-top:132px;
    margin-left: 190px;
    margin-right: 190px;
    margin-bottom: 132px;
}

.aboutUsTitle {
    font-family: "Merriweather";
    font-weight: 400;
    font-size: 48px;
    color: #00a084;
}

.aboutUsDescription {
    margin-top:50px;
    font-family: "Chivo";
    font-weight: 400;
    margin-bottom: 35px;
}


@media (min-width: 992px) {
    .aboutUsDescription {
        font-size: calc(24/1920 * 100vw)
    }
}

/*card nera*/
.about-black-card {
    width: min(1389px, calc(100% - 100px));
    margin-left: 50px;
    margin-right: 50px;
    background-color: #333333cc !important;
    transform: translateX(500px);
}

.about-black-content {
    text-align:end !important;
    margin-left: 190px;
    margin-top: 118px;
    margin-right: 190px;
    margin-bottom: 118px;
    color: white;
}

/*Animazioni in entrata*/
.reveal {
    opacity: 0;
    transition: all 0.8s ease-out;
    transition-delay: 0.2s;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 992px) {


    /* Riga: wrapping, centratura e spacing */
    .about-row {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 16px;
        padding-top: 32px;
    }

    /* Card bianca */
    .about-white-card {
        transform: none !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 16px;
        margin-right: 16px;
    }

    /* Card nera */
    .about-black-card {
        transform: none !important;
        right: auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 16px;
        margin-right: 16px;
    }

    /* Contenuti interni */
    .about-white-content,
    .about-black-content {
        margin: 0 !important;
        padding: 20px;
    }

    /* Leggibilit� su device piccoli */
    .about-black-content {
        text-align: start !important;
    }

    /* Griglie decorative: off su mobile/tablet (vedi nota per tablet) */
    .griglia-container {
        left: 0 !important;
    }

    .griglia-about {
        display: none;
    }

    /* Animazione coerente */
    .reveal {
        transform: translateY(24px);
    }

        .reveal.visible {
            transform: none;
        }
}

/* Smartphone (ulteriori ritocchi) */
@media (max-width: 575.98px) {
    .aboutUsTitle {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .aboutUsDescription {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 16px;
        margin-bottom: 20px;
    }

    /* Opzionale: un tocco di profondit� */
    .about-white-card, .about-black-card {
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
}
/* --- FINE ABOUT --- */






/* --- SERVICES --- */
/*Da creare uno solo con quello di about e metterlo in generale*/
.services-row {
    display:flex;
    padding-top:230px;
}

.services-card {
    background-color: #ffffffcc !important;
    transform: none !important;
    left: auto !important;
    width: 1646px !important;
    margin: 0 50px;
    /*background: blue !important;*/
}

@media (max-width: 992px) {
    /* Card bianca */
    .services-card {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.servicesTitle {
    font-family: "Merriweather";
    font-weight: 400;
    font-size: 48px;
    color: #00a084;
    margin-bottom: 37px !important;
    padding: 0 calc(30 / 1920 * 100vw);
}

.servicesContent {
    margin: calc(132/1920 * 100vw) calc(179/1920 * 100vw);
}


/*Carosello*/
.carousel {
    --gap: 40px;
    --items-per-view: 3; /* desktop: 3 per vista */
    max-width: 1646px; /* opzionale: contenitore largo */
    margin-inline: auto;
    align-content: center;
    overflow: hidden;
/*    overflow: visible; 
    background: yellow; */
}

.carousel__viewport {
    height: calc(600/1920 * 100vw);
    display: flex;
    gap: var(--gap);
    padding: calc(30/1920 * 100vw); /* evita tagli ombra */
    /*nascondi scrollbar (facoltativo) */
    scrollbar-width: none;
    position: relative;
/*    background: red;
    overflow: visible;*/
}

.carousel__item {
    flex: 0 0 calc((100% - (var(--gap) * (var(--items-per-view) - 1))) / var(--items-per-view));
    scroll-snap-align: start;
    transition: transform .25s ease; /* durata e curva di easing dello slide */
    will-change: transform;
}

.carousel__item.expanded {
    transform: scale(1.6);
}


.carousel__item.is-hidden {
    display: none !important;
}

.carousel__controls {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}

/* Stile base per le immagini-pulsanti */
.carousel__btn {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform .3s ease, filter .2s ease;
    user-select: none; /* non selezionabili */
}

.carousel__btn:hover {
    transform: scale(1.1);
    filter: brightness(0.85);
}

.carousel__btn:active {
    transform: scale(1.0);
}

.fs-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4; /* proporzione simile allo screenshot */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
    transform: translateZ(0);
}

/* Contenuto centrato */
.fs-card__body {
    position: absolute;
    inset: 0;
    display: inline-grid;
    width: auto;
    height: auto;
    align-content: center;
    justify-items: center;
    gap: calc(80/1920 * 100vw);
    text-align: center;
    color: #fff;
    padding: calc(15/1920 * 100vw);
}



/* Titolo su due righe, pesantezza come in mockup */
.fs-card__title {
    margin: 0;
    font-family: "Montserrat";
    font-weight: 500;
    font-size: calc(24/1920 * 100vw); 
}

/* Descrizione centrata, larghezza controllata */
.fs-card__desc {
    margin: 0;
    font-family: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
    font-size: calc(20/1920 * 100vw); /*21 pixel*/
}




.btn-responsive {
    width: auto !important;
    font-size: calc(16/1920 * 100vw) !important;
    height: calc(48/1920 * 100vw) !important;
    line-height: calc(48/1920 * 100vw) !important;
    padding: 0 calc(15/1920 * 100vw)
}


/*card espansa*/
.fs-card__body_expanded {
    inset: 0;
    position: absolute;
    width: 100%;
}

.card-expanded-content {
    margin-top: calc(73/1920*100vw);
    margin-left: calc(82/1920*100vw);
    margin-right: calc(82/1920*100vw);
}

.goBack {
    display: inline-block; /* d� �corpo� all�ancora */
    width: calc(50/1920 * 100vw); /* scegli tu */
    height: calc(50/1920 * 100vw); /* scegli tu */
    -webkit-mask: url("/media/FrecciaGoBack.svg") no-repeat center;
    mask: url("/media/FrecciaGoBack.svg") no-repeat center;
    background-color: white; /* colore normale */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* adatta l�SVG */
    position: relative; /* abilita z-index */
    cursor: pointer;
    transition: background-color 0.3s;
}


.goBack:hover {
    background-color: #00a084
}

.descrizione-servizio {
    margin-top: calc(60/1920* 100vw);
    margin-bottom: calc(40/1920* 100vw);
    font-family: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: white;
    width: 100%;
    max-width: 630px;
    margin-right: 0;
}

    /* Vignettatura/overlay per testo leggibile */
    .fs-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.55) 100% );
    pointer-events: none;
}






@media (min-width: 576px) and (max-width: 992px) {
    .servicesTitle {
        font-size: 30px;
    }

    .fs-card__title {
        font-size: calc(40/1920 * 100vw) !important;
    }

    .fs-card__desc {
        font-size: calc(40/1920 * 100vw) !important;
        padding: calc(20/1920 * 100vw)
    }

    .btn-responsive {
        font-size: calc(32/1920 * 100vw) !important;
        height: calc(96/1920 * 100vw) !important;
        line-height: calc(96/1920 * 100vw) !important;
        padding: 0 calc(30/1920 * 100vw)
    }

    .fs-card__body {
        gap: calc(50/1920 * 100vw)
    }

    .carousel {
        --items-per-view: 2;
    }

    .carousel__viewport {
        height: calc(900/1920 * 100vw);
    }

    .descrizione-servizio {
        font-size: calc(16/1920 * 200vw)
    }

    .goBack {
        width: calc(100/1920 * 100vw); /* scegli tu */
        height: calc(100/1920 * 100vw); /* scegli tu */
    }
    
}

@media (max-width: 576px) {
    .servicesTitle {
        text-align: center !important;
        margin: 15px 0  !important;
    }

    .fs-card__body {
        gap: calc(300/1920 * 100vw);
    }

    .fs-card__title {
        font-size: calc(80/1920 * 100vw) !important;
    }

    .fs-card__desc {
        font-size: calc(80/1920 * 100vw) !important;
    }

    .btn-responsive {
        font-size: calc(50/1920 * 100vw) !important;
        height: calc(130/1920 * 100vw) !important;
        width: calc(600/1920 * 100vw) !important;
        line-height: calc(130/1920 * 100vw) !important;
    }

    .carousel {
        --items-per-view: 1;
    }

    .carousel__viewport {
        height: calc(2000/1920 * 100vw);
    }

    .fs-card__body {
        padding: 0 calc(50/1920 * 100vw)
    }

    .goBack {
        width: calc(150/1920 * 100vw); /* scegli tu */
        height: calc(150/1920 * 100vw); /* scegli tu */
    }

    .descrizione-servizio {
        margin-top: calc(200/1920 * 100vw) !important;
        text-align: justify;
    }

    .btn-consulenza {
        width: 100% !important;
        margin-top: calc(400/1920 * 100vw) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    
}

/*@media (min-width: 576px) and (max-width: 1336px) {
    .carousel {
        --items-per-view: 2;
    }
}*/

/*Visualizzazione mobile/tablet*/
@media (max-width: 575.98px) {
    .services-row {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 16px;
        padding-top: 32px;
    }

    .servicesTitle {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    /* Opzionale: un tocco di profondit� */
    .services-card {
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }

    .servicesContent {
        margin: 0 !important;
        padding: 20px;
    }
}
/* --- FINE SERVICES --- */








/* --- PARTNERS --- */

.partners-card {
    background-color: #333 !important;
    transform: none !important;
    left: auto !important;
    width: 1646px !important;
    margin: 0 50px;
    margin-bottom: 50px;
}

.partners-title {
    font-family: "Merriweather";
    font-weight: 400;
    font-size: 48px;
    color: #00a084;
    margin-bottom: 37px !important;
}

.partners-content {
    margin: calc(50/1920 * 100vw) calc(40/1920 * 100vw);
    padding: calc(30/1920 * 100vw); /* evita tagli ombra */
    height: calc(940/1920 * 100vw);
    /*margin: calc(50/1920 * 100vw) calc(97/1920 * 100vw); DIMENSIONI REALI*/
    /*background: red;*/
}

.partners-viewport {
    display: block; /* lascia alla .row il layout */
    overflow: visible;
}

.partner-element {
    position: relative;
    width: 100%; /* riempi la colonna */
    /*aspect-ratio: 2/4;*/ 
    aspect-ratio: 4/3;
    height: auto; /* lascia calcolare */
    padding: clamp(12px, 42/1920 * 100vw, 28px);
    box-sizing: border-box;
    background: white;
    transition: transform 0.25s ease;
    cursor: pointer;
    margin-bottom: 20px;
    z-index: 5;
}




.element-content {
    display: block;
    box-sizing: border-box;
    padding: 18% 0;
    height: 100%;
    text-align: center;
    transition: padding 0.35s
}


.row.mobileView {
    display: none;
}

.row.mobileView .element-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.row.mobileView .partner-description {
    height: calc(300/1920 * 100vw)
}

.row.mobileView .btn-sito {
    width: 100% !important;
}

    .row.mobileView .img {
        object-fit: contain;
        height: 100% !important;
    }



@media (max-width: 992px) {
    .row.mobileView {
        display: flex;
    }

    .row.pcView {
        display: none;
    }
}



@media (min-width: 576px) and (max-width: 992px) {

    .row.mobileView .partner-description {
        height: calc(100/992 * 100vw) !important;
    }

    .row.mobileView .btn-sito {
        width: 100% !important;
        font-size: calc(15/992 * 100vw);
        height: calc(40/992 * 100vw);
        line-height: calc(40/992 * 100vw);
    }
}

@media (max-width: 576px){
    .row.mobileView .partner-description {
        height: calc(190/992 * 100vw) !important;
    }


    .row.mobileView .btn-sito {
        font-size: calc(25/992 * 100vw);
        height: calc(50/992 * 100vw);
        line-height: calc(50/992 * 100vw);
    }

}


.btn-sito {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: calc(16 / 1920 * 100vw); /* 16px -> responsive */
    width: calc(140 / 1920 * 100vw); /* 140px */
    height: calc(45 / 1920 * 100vw); /* 45px */
    line-height: calc(45 / 1920 * 100vw); /* 45px */
    color: #333;
    border: calc(1 / 1920 * 100vw) solid white; /* 1px border */
    border-color: #333;
    text-decoration: none;
    margin: 0 calc(7.5 / 1920 * 100vw); /* 7.5px */
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    text-align: center;
    cursor: pointer;
    float: left; /* resta a sinistra */
    transition: background-color 0.35s;
}

    .btn-sito:hover {
        color: white;
        background-color: #00a084;
        border-color: #00a084; 
    }


.img {
    /*background: red;*/
    align-self: center;
    display: block;
    max-width: 100%;
    width: 75%;
    max-height: 100%;
    height: calc(112/1920 * 100vw);
    object-fit: cover; /* nel caso avessi height o box vincolati */
    overflow: visible;
    transition: transform 0.35s;
    margin-left: auto; /* centra i block */
    margin-right: auto;
}

/*.img.nellik-img {
    width: 100%;
}

.img.eleviaius-img {
    width: 200%;*/
    
    /*background: red;*/
/*}

.img.energeticamente-img {*/
    
    /*width: calc(400/1920 * 100vw);*/
/*}

.img.quantum-img {
    width: 200%;
}*/

.toShow {
    display: none;
}

.partner-description {
    text-align: start;
    font-family: "Chivo";
    font-size: calc(23/1920 * 100vw);
    height: calc(450/1920 * 100vw);
    font-weight: 200;
    padding: calc(40/1920 * 100vw) 0
}

.griglia-partners {
    bottom: -50%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1
}



@media (min-width: 576px) and (max-width: 992px) {
    .partners-card {
        margin-left: 16px;
        margin-right: 16px;
        height: calc(850/992 * 100vw);
    }



/*    .partners-viewport {
        gap: calc(21/992 * 100vw)
    }

    .partner-element {
        width: calc(412.595/992 * 100vw);
        height: calc(338.32790/992 * 100vw)
    }

    .partners-title {
        font-size: 30px;
    }
    partners-content {
        height: calc(900/1920 * 100vw);
    }

    .img {
        height: 100%;
    }*/

}

@media (max-width: 576px) {
    .partners-viewport {

        gap: calc(21/992 * 100vw)
    }

    .partners-card {
        margin-left: 16px;
        margin-right: 16px;
        height: calc(1750/576 * 100vw) !important;
    }

    .partners-title {
        font-size: calc(40/576 * 100vw);
        text-align: center;
    }

    .partner-description {
        height: calc(350/1920 * 100vw);
        font-size: calc(12/576 * 100vw);
    }
    /*
    .partners-title {
        text-align: center !important;
        font-size: 30px;
    }*/
}

/* --- FINE PARTNERS --- */


/* DA FIXARE
    - logo finanservice pi� vicino al bordo da cellulare
    - men� distante dal bordo quanto logo finanservice
    - altezza marmo, soprattutto mobile

   DA AGGIUNGERE
    - Immagine griglia partners
*/