body {
    font-family: Ebrima, sans-serif;
    background-color: rgb(232, 240, 241); /* Azzurro chiaro */
    color: rgb(1, 125, 125); /* verde acqua */
    margin: 0;
    padding: 0;
}

h2 {
    text-align: center;
}

h1 {
    text-align: center;
    font-size: 35px;
}

button {
    align-items: center;
}

header {
    background: linear-gradient(90deg, rgb(1, 100, 100), rgb(1, 125, 125),rgb(0, 100, 100));
    padding: 1px;
    text-align: center;
    font-size: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
    margin: 0;
    color:rgb(56, 207, 181);
}

header img {
    width: 100%;
    max-width: 240px;
}

nav {
    background: linear-gradient(90deg, rgb(1, 100, 100), rgb(1, 125, 125),rgb(0, 100, 100));
    display: flex;
    height: 50%; /* Altezza del box */
    justify-content: center; /* Centra le voci di navigazione */
    align-items: center;
    flex-wrap: wrap; /* Permette di andare a capo su schermi piccoli */

}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}


nav ul li {
    position: relative;
}
nav ul li a {
    display: block;
    border-radius: 18px;
    color:  rgba(186, 245, 240, 0.836);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: transform 0.5s, box-shadow 0.5s, background-color 0.5s, color 0.5s;

}
nav ul li a:hover {
    background-color: rgb(4, 141, 141);
    border-radius: 18px;
    /*color:rgb(56, 207, 181);*/
    color: white;
    box-shadow: 0px 2px 3px rgba(1, 44, 44, 0.109);
    transform: scale(1.05);
}

nav ul li ul {
    display: none;
    position: absolute;
    border-radius: 8px;
    background-color: rgba(2, 120, 120, 0.885);
    min-width: 160px;
    z-index: 1;
    box-shadow: 0px 2px 3px rgba(1, 44, 44, 0.109);
    transition: transform 1.5s, box-shadow 1.5s, background-color 1.5s;
}
nav ul li ul li {
    float: none;
}
nav ul li ul li a {
    padding: 12px 16px;
    transition: transform 0.5s, box-shadow 0.5s, background-color 0.5s;
}

nav ul li ul li a:hover {
    background-color: rgb(4, 141, 141);
    border-radius: 8px;
    /*color:rgb(56, 207, 181);*/
    box-shadow: 2px 4px 5px rgba(0, 108, 108, 0.687);
    color: white;
}


nav ul li:hover ul {
    display:block;
    animation: slideDown 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

section {
    padding: 20px;
}


/* HOME css */

.slideshow-box {
    position: relative;
    width: 100%;
    height: 550px; /* Altezza del box */
    overflow: hidden;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    
    transition:transform 0.5s, box-shadow 0.5s, color 0.5s, background-image 1s ease-in-out;

    opacity: 0; /* Inizialmente nascosto */
    animation: slideDown 1s forwards; /* Applica l'animazione */

}

.slideshow-box:hover{
    transform: scale(1.02);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.slideshow-content {
    position: relative;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: flex-end; /* Allinea gli elementi a destra */
    align-items: center; /* Centra verticalmente */
    height: 520px; /* Altezza del contenitore */
}

.intro {
    position: relative;

    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Larghezza del contenitore */
    height: auto; /* Altezza del contenitore */

}

.box_intro {
    background: linear-gradient(180deg, rgba(48, 81, 81, 0.307), rgba(38, 99, 99, 0.4),rgba(35, 56, 60, 0.2));
    background-size: cover;
    width: 20%;
    padding: 50px;
    margin: 20px;
    border-radius: 8px;
    color: rgb(251, 251, 251); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 20px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s, background-color 0.5s;
    backdrop-filter: blur(8px);

    margin-left: auto; /* Spinge l'elemento verso destra */

}

.box_intro:hover{
    background-color: rgba(27, 126, 121, 0.435);
}

.box_intro p{
    font-size: 20px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.box_intro p:hover{
    transform: scale(1.05);
}

.box_intro strong {
    color: rgb(255, 255, 255); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    font-size: 23px;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    opacity: 0;
}

.box1{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.208), rgba(0, 4, 5, 0.423), rgba(0, 4, 5, 0.208)), url('media/modelli.jpg') no-repeat center center;
    background-size: cover;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    font-size: 18px;
    text-align: center;

    color: rgb(233, 255, 251); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.box2 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.208), rgba(0, 4, 5, 0.385), rgba(0, 4, 5, 0.208)), url('media/sbiancamento02.png') no-repeat center center;
    background-size: cover;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    font-size: 18px;
    text-align: center;

    color: rgb(233, 255, 251); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.box3 {
    background: linear-gradient(180deg, rgba(7, 23, 23, 0.207), rgba(0, 4, 5, 0.522), rgba(0, 4, 5, 0.385)), url('media/tac.jpg') no-repeat center center;
    background-size: cover;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    font-size: 18px;
    text-align: center;

    color: rgb(233, 255, 251); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.box4 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.208), rgba(0, 4, 5, 0.457), rgba(0, 4, 5, 0.208)), url('media/ortodonzia_home.png') no-repeat center center;
    background-size: cover;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    font-size: 18px;
    text-align: center;

    color: rgb(233, 255, 251); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: all 1s;
    overflow: hidden;
}

.box1 p, .box2 p, .box3 p, .box4 p{
    font-size: 22px;
}

.box1:hover, .box2:hover, .box3:hover, .box4:hover {
    color:  rgba(255, 255, 255, 0.836);
    transform: scale(1.05); /* Assicurati che l'elemento venga scalato */
    box-shadow: 0px 15px 14px rgba(0, 0, 0, 0.687);
    opacity: 1; /* Assicurati che l'elemento sia visibile */
}


.box1::before, .box2::before, .box3::before, .box4::before {
    content: "";
    position: absolute;
    height: 0%;
    width: 100%;
    border-radius: 8px;
    bottom: -50px;
    left: 0;
    transform: skew();
    background-color: rgba(1, 17, 17, 0.231);
    z-index: -1;
    transition: all 0.8s;
    backdrop-filter: blur(10px);
}

.box1:hover::before, .box2:hover::before, .box3:hover::before, .box4:hover::before {
    height: 160%;
}



.container.visible, .container_home.visible {
    animation: fadeIn 2s forwards; /* Applica l'animazione */
    opacity: 1; /* Assicurati che l'elemento sia visibile */
}

.box_intro.visible{
    animation: zoomIn 1s forwards; /* Applica l'animazione */
}

.button1 {
    border: none;
    font-size: 17px;
    background:  rgb(0, 122, 122);
    color:  rgb(218, 218, 218);
    padding: 10px;
    border-radius: 8px;
    transition-duration: 0.2s;
   }
   
   .button1:before {
    content: "»";
    opacity: 0;
    margin-left: -15px;
    transition-duration: 0.2s;
   }
   
   .button1:hover:before {
    margin-left: 0px;
    opacity: 1;
   }
   
   .button1:hover {
    color: rgb(255, 255, 255);
    background: transparent;
    border: solid 2px rgb(25, 140, 140);
   }


@keyframes glowing-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 85, 124, 0.91);
    }
  
    70% {
      box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
    }
  
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  
  .button2 {
    position: relative;
    display: inline-block;
    background: linear-gradient(-50deg, rgb(4, 116, 150), rgb(4, 113, 127));
    border: none;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: glowing-pulse 2s infinite;
  }
  
  .button2::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    box-shadow: 0 0 20px #06816e;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  
  .button2:hover::before {
    opacity: 1;
  }
  

.container_home {
    background: linear-gradient(90deg, rgba(0, 69, 69, 0.691), rgba(1, 125, 125, 0.751), rgba(0, 85, 85, 0.658)), url('media/sorriso.png') no-repeat center center;
    display: flex;
    background-size: cover;
    padding: 80px;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.3s, box-shadow 0.3s;
    opacity: 0;
}

.container_home p {
    color: #ffffff; /* Colore del testo bianco */
    text-align: left;
    font-size: 24px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;

}

.container_home p:hover{
    transform: scale(1.05);
}

.container_home:hover {
    transform: scale(1.005);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.box, .box_h2, .box_h3 {
    background: linear-gradient(rgba(131, 131, 131, 0.091), rgba(131, 131, 131, 0.091)), url('media/impianto1.png') no-repeat center center;
    background-size: cover;
    width: 40%;
    padding: 150px;
    margin: 20px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: rgb(233, 255, 251); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 18px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}



.box img, .box_h2 img, .box_h3 img, .box_h4 img {
    max-width: 100%;
    height: auto;
    color: aquamarine;
}

.box:hover, .box_h2:hover, .box_h3:hover, .box_h4:hover {
    color: #ffffff;
    transform: scale(1.02);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.box_h2 {
    background: linear-gradient(rgba(131, 131, 131, 0.091), rgba(131, 131, 131, 0.091)), url('media/poltrona_33.jpg') no-repeat center center;
    background-size: cover;
}

.box_h3 {
    background: linear-gradient(rgba(131, 131, 131, 0.091), rgba(131, 131, 131, 0.091)), url('media/arcata.png') no-repeat center center;
    background-size: cover;
}


.container_home.visible {
    animation: fadeIn 3s forwards; /* Applica l'animazione */
}


/* Media Queries per schermi piccoli */
@media (max-width: 768px) {
    .intro {
        width: 100%; /* Larghezza del contenitore al 100% su schermi piccoli */
        height: auto; /* Altezza automatica su schermi piccoli */
    }

    .box_intro {
        height: auto; /* Altezza automatica su schermi piccoli */
    }
}

@media (max-width: 1300px) {
    .intro {
        width: 100%; /* Larghezza del contenitore al 100% su schermi piccoli */
        height: auto; /* Altezza automatica su schermi piccoli */
    }

    .box_intro {
        height: auto; /* Altezza automatica su schermi piccoli */
    }
}




/* Media Queries per schermi piccoli */
@media (max-width: 900px) {
    .container {
        flex-direction: column; /* Cambia la direzione del flex a colonna */
        align-items: center; /* Centra gli elementi */
    }

    .box1, .box2, .box3, .box4 {
        width: 80%; /* Aumenta la larghezza dei box su schermi piccoli */
        margin: 10px 0; /* Riduce il margine tra i box */
    }
}



/* Media Queries per schermi piccoli */
@media (max-width: 1100px) {
    .container_home {
        flex-direction: column; /* Cambia la direzione del flex a colonna */
        align-items: center; /* Centra gli elementi */
    }

    .box, .box_h2, .box_h3 {
        width: 38%; /* Aumenta la larghezza dei box su schermi piccoli */
        margin: 10px 0; /* Riduce il margine tra i box */
    }
}

/* fine CSS per la pagina HOME */


footer {
    color:rgb(204, 251, 247);
    background: linear-gradient(90deg, rgb(1, 100, 100), rgb(1, 125, 125),rgb(0, 100, 100));
    text-align: center;
    padding: 10px;
    position: relative;
    width:auto;
    bottom: 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/*----------------------------------------------------------------*/

.intro_corone {
    background: linear-gradient(90deg, rgba(1, 125, 125, 0.225), rgba(1, 74, 74, 0.182),rgba(1, 125, 125, 0.071),rgba(197, 182, 182, 0.058),rgba(197, 182, 182, 0.058)), url('media/corone01.JPG') no-repeat center center;
    display: flex;
    background-size: cover;
    width: 100%;
    height: 550px; /* Altezza del box */

    padding: 0 0;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.3s, box-shadow 0.3s;
    animation: fadeIn 1s forwards; /* Applica l'animazione */

}

.intro_corone:hover {
    transform: scale(1.01);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.5);
}

.intro_corone h2 {
    color: #ffffff; /* Colore del testo bianco */
    text-align: center;
}

.intro_corone p {
    color: #ffffff; /* Colore del testo bianco */
    text-align: center;
    font-size: 20px;
}

.box_intro_corone {
    background: linear-gradient(80deg, rgba(165, 207, 207, 0.274), rgba(62, 130, 130, 0.32), rgba(56, 120, 125, 0.274));
    background-size: cover;
    width: 20%;
    padding: 50px;
    margin: 20px;
    border-radius: 8px;
    color: rgb(255, 255, 255); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 20px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s, background-color 0.5s;
    backdrop-filter: blur(6px);

    margin-left: auto; /* Spinge l'elemento verso destra */
}

.box_intro_corone:hover{
    background-color: rgba(27, 126, 121, 0.435);
}


.box_intro_chir.visible{
    animation: zoomIn 2s forwards; /* Applica l'animazione */
}

.box_intro_corone p {
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.box_intro_corone p:hover {
    transform: scale(1.05);
} 


.container_corone {
    background:none;
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    transition: transform 0.3s, box-shadow 0.3s;
}

.container_corone:hover {
    transform: scale(1.001);
}

.box1_corone {
    background: linear-gradient(180deg, rgb(0, 108, 120),rgba(0, 138, 145, 0.884), rgb(100, 164, 168));
    background-size: cover;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    color: rgb(180, 234, 225); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 22px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s, scale 0.5s;
}
.box1_corone img , .box2_corone img {
    max-width: 100%;
    height: auto;
}

.box1_corone strong , .box2_corone strong {
    color: #ffffff;
}

.box1_corone:hover , .box2_corone:hover{
    color: #ffffff;
    scale: 1.01;
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);

}
p {
    font-size: 18px;
    text-align: center;
}

.box1_corone.visible, .flip-card-front.visible{
    animation: zoomIn 2s forwards; /* Applica l'animazione */
}



@media (max-width: 1100px) {

    .box_intro_corone {
        width: 95%;
        text-align: center;
        padding: 20px;
    }

    .intro_corone {
        padding: 80px;
        height: auto; /* Altezza automatica su schermi piccoli */
    }
}

@media (max-width: 900px) {
    .container_corone {
        flex-direction: column; /* Cambia la direzione del flex a colonna */
        align-items: center; /* Centra gli elementi */
    }

    .box1_corone {
        width: 80%; /* Aumenta la larghezza dei box su schermi piccoli */
        margin: 10px 0; /* Riduce il margine tra i box */
    }
}



/*----------------------------------------------------------------*/

/* CSS Chirurgia */
.intro_chir {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.11), rgba(2, 36, 36, 0.13)), url('media/caso02.png') no-repeat left center;
    display: flex;
    background-size: cover;
    width: 100%;
    height: 550px; /* Altezza del box */

    padding: 0 0;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.3s, box-shadow 0.3s;
    animation: fadeIn 1s forwards; /* Applica l'animazione */

}

.box_intro_chir {
    background: linear-gradient(230deg, rgba(82, 235, 255, 0.347), rgba(48, 161, 181, 0.319), rgba(0, 89, 134, 0.253));
    background-size: cover;
    width: 20%;
    padding: 50px;
    margin: 20px;
    border-radius: 8px;
    color: rgb(180, 234, 225); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 20px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s, background-color 0.5s;
    backdrop-filter: blur(8px);

    margin-left: auto; /* Spinge l'elemento verso destra */
}

.box_intro_chir:hover{
    background-color: rgba(27, 126, 121, 0.435);
}


.intro_chir:hover {
    transform: scale(1.005);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.intro_chir h2 {
    color: #ffffff; /* Colore del testo bianco */
    text-align: center;
}

.intro_chir p {
    color: #ffffff; /* Colore del testo bianco */
    text-align: left;
}

.intro_chirurgia {
    background: linear-gradient(50deg, rgb(2, 108, 108), rgba(5, 95, 108, 0.818), rgba(2, 68, 102, 0.75));
    background-size: cover;
    padding: 50px;
    border-radius: 8px;
    color: rgb(180, 234, 225); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: left;
    font-size: 22px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.intro_chirurgia:hover {
    transform: scale(1.005);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.intro_chirurgia p {
    color: rgb(180, 234, 225); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.intro_chirurgia p:hover {
    color: rgb(255, 255, 255); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
}

.intro_chirurgia h2 {
    color: #ffffff; /* Colore del testo bianco */
    text-align: center;
}

.container_chirurgia {
    background: linear-gradient(180deg, rgb(1, 117, 130), rgba(1, 125, 125, 0.81), rgba(1, 114, 114, 0.871), rgba(0, 101, 119, 0.995)), url(media/tac22.png) no-repeat center;
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.3s, box-shadow 0.3s;
    opacity: 0; /* Inizialmente nascosto */

}

.container_chirurgia p, .container_chirurgia2 p, .container_corone2 p{
    font-size: 22px;
}


.container_corone2 {
    background: linear-gradient(90deg, rgba(2, 110, 127, 0.7), rgba(1, 125, 125, 0.85), rgba(1, 114, 114, 0.85), rgba(0, 119, 117, 0.7));
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.8s;
    opacity: 0; /* Inizialmente nascosto */

}

.container_corone2:hover {
    background-color: rgb(59, 128, 121);
}


.container_chirurgia:hover {
    transform: scale(1.001);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.container_chirurgia2 {
    background: linear-gradient(180deg, rgba(2, 110, 127, 0.858), rgba(1, 125, 125, 0.81), rgba(1, 114, 114, 0.871), rgba(0, 119, 117, 0.995));
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.8s;
    opacity: 0; /* Inizialmente nascosto */

}

.container_chirurgia2:hover {
    background-color: rgb(46, 143, 160);

}

.box1_chirurgia {
    background: none;
    background-size: cover;
    width: 20%;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    color: rgb(180, 234, 225); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 22px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}


.box1_chirurgia p , .box3_chirurgia p, .box_intro_chir p{
    text-align: center;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}



.box1_chirurgia p:hover, .box3_chirurgia p:hover{
    transform: scale(1.05);
    color: rgb(255, 255, 255);
}

.box_intro_chir p:hover{
    transform: scale(1.05);
    color: rgb(255, 255, 255);
}


.box2_chirurgia {
    background: none;
    background-size: cover;
    width: 40%;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    color: rgb(1, 125, 125); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 22px;
    opacity: 0;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.box2_chirurgia strong {
    color: rgb(1, 125, 125);
}

.box3_chirurgia {
    background: none;
    background-size: cover;
    width: 40%;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    color: rgb(180, 234, 225); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 22px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.box1_chirurgia img, .box2_chirurgia img, .box3_chirurgia img {
    max-width: 100%;
    height: auto;
}

.shadow {
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

.box1_chirurgia:hover {
    color: #ffffff;
}


.rounded-video {
    border-radius: 8px; /* Smussa i bordi del video */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombra leggera */
}


.container_chirurgia.visible, .container_chirurgia2.visible, .box_intro_chir.visible, .box1_chirurgia.visible, .box3_chirurgia.visible, .box2_chirurgia.visible, .container_corone2.visible, .box1_corone2.visible{
    animation: zoomIn 2s forwards; /* Applica l'animazione */
}



/* Media Queries per schermi piccoli */
@media (max-width: 1300px) {

    intro_chir{
        padding: 80px;
        width: 40%;

    }

    .box_intro_chir{
        width: 90%;
        text-align: center;
        padding: 20px;
    }

    .container_chirurgia2 {
        flex-direction: column; /* Cambia la direzione del flex a colonna */
        align-items: center; /* Centra gli elementi */
    }

    .container_corone2 {
        flex-direction: column; /* Cambia la direzione del flex a colonna */
        align-items: center; /* Centra gli elementi */
    }


    .box2_chirurgia, .box3_chirurgia {
        width: 80%; /* Aumenta la larghezza dei box su schermi piccoli */
        margin: 10px 0; /* Riduce il margine tra i box */
    }

    .intro_chir h2 {
        font-size: 18px;
    }
    
    .intro_chir p {
        font-size: 18px;
        text-align: center;
    }

    .rounded-video {
        border-radius: 8px; /* Smussa i bordi del video */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombra leggera */
        width: 100%;
        height: auto;
    }

}


@media (max-width: 762px) {
    .container_chirurgia{
        flex-direction: column; /* Cambia la direzione del flex a colonna */
        align-items: center; /* Centra gli elementi */
    }

    .box1_chirurgia{
        width: 80%; /* Aumenta la larghezza dei box su schermi piccoli */
        margin: 10px 0; /* Riduce il margine tra i box */
    }

    .intro_chir h2 {
        font-size: 18px;
    }
    
    .intro_chir p {
        font-size: 18px;
        text-align: center;
    }
}


/* =================================================================*/

.container_cont {
    background: none;
    text-align: center;
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    transition: transform 0.3s, box-shadow 0.3s;
}

.box1_cont {
    background: linear-gradient(-180deg, rgba(1, 71, 71, 0.083), rgba(1, 71, 71, 0), rgba(1, 71, 71, 0.087));    background-size: cover;
    width: 35%;
    margin: 20px 20px;
    padding: 20px;
    border-radius: 8px;
    color: rgb(1, 125, 125); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 18px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;

}
.box1_cont a {
    color: rgb(1, 125, 125); /* Colore dei link */
    text-decoration: none; /* Rimuove la sottolineatura */
}
.box1_cont a:hover {
    color: rgb(0, 68, 68); /* Colore dei link al passaggio del mouse */
}

.box2_cont {
    background: linear-gradient(-180deg, rgba(1, 71, 71, 0.083), rgba(1, 71, 71, 0), rgba(1, 71, 71, 0.087));    background-size: cover;
    width: 70%;
    margin: 20px 20px;
    padding:20px;
    border-radius: 8px;
    color: rgb(1, 125, 125); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 14px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.map {
    width: 100%;
    height: 500px;
    border-radius: 8px;
}

.container_cont.visible{
    animation: fadeIn 1s forwards; /* Applica l'animazione */
}


/* Media query per schermi piccoli */
@media (max-width: 768px) {
    .container_cont {
        flex-direction: column;
        align-items: center;
    }

    .box1_cont, .box2_cont {
        width: 90%;
    }
}
/* =================================================================*/

.intro_sbianc {
    background: linear-gradient(90deg,rgba(0, 9, 68, 0.156),rgba(4, 39, 39, 0.439)), url('media/sb1.png') no-repeat left center;
    display: flex;
    background-size:cover;
    width: 100%;
    height: 550px; /* Altezza del box */
    padding: 0 0;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.3s, box-shadow 0.3s;
}

.box_intro_sbianc{
    background:linear-gradient(360deg,rgba(123, 0, 255, 0.349), rgba(76, 0, 255, 0.257),rgba(0, 166, 255, 0.277),rgba(2, 163, 163, 0.349));
    background-size: cover;
    backdrop-filter: blur(8px);
    width: 25%;
    padding: 50px;
    margin: 20px;
    border-radius: 8px;
    color: rgb(255, 255, 255); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 20px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s, background-color 0.5s;
    opacity: 0;
}

.box_intro_sbianc:hover{
    background-color: rgba(27, 126, 121, 0.435);
}



.sb_img {
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.sb_img:hover{
    transform: scale(1.025);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}



.box_intro_sbianc p{
    text-align: center;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.box_intro_sbianc P:hover{
    transform: scale(1.05);
}

.box_intro_sbianc2{
    background:  none;
    background-size: cover;
    width: 80%;
    padding: 80px;
    margin: 20px 1px;
    border-radius: 8px;
    color: rgb(255, 255, 255); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: center;
    font-size: 18px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}


.intro_sbianc:hover {
    transform: scale(1.005);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}

.intro_sbianc h2 {
    color: #ffffff; /* Colore del testo bianco */
    text-align: center;

}

.intro_sbianc p {
    color: #ffffff; /* Colore del testo bianco */
    text-align: center;

}

.container_sb {
    background: none;
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.container_sb p{
    font-size: 22px;
}

.intro_sbianc.visible, .container_sb.visible{
    animation: fadeIn 1s forwards; /* Applica l'animazione */
}

.box_intro_sbianc.visible{
    animation: zoomIn 1s forwards;
}


.container_sb_2 {
    background: none;
    display: flex;
    background-size: cover;
    padding: 30px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    transition: transform 0.3s, box-shadow 0.3s;

}

.container_sb_2 img{
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.container_sb_2 img:hover {
    transform: scale(1.05);
    box-shadow: 0px 12px 14px rgba(0, 0, 0, 0.687);
}


/* Media query per schermi piccoli */
@media (max-width: 768px) {
    .intro_sbianc {
        flex-direction: column;
        align-items: center;
    }

    .box_intro_sbianc, .box_intro_sbianc2 {
        width: 90%;
        text-align: center;
    }

    .box_intro_sbianc {
        padding: 20px;
    }

    .box_intro_sbianc2 {
        padding: 20px;
    }

    .container_sb {
        flex-direction: column;
        align-items: center;
    }

    .box2_chirurgia {
        width: 90%;
        margin: 10px 0;
    }
}


/*----------------------------------------------------------------*/

.intro_orto {
    background: linear-gradient(90deg,rgba(69, 110, 106, 0.15),rgba(181, 181, 181, 0.124)), url('media/orto.jpg') no-repeat left center;
    display: flex;
    background-size: cover;
    width: 100%;
    height: 550px; /* Altezza del box */

    padding: 0 0;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.501);
    transition: transform 0.3s, box-shadow 0.3s;
}


.box_intro_orto{
    background: linear-gradient(-230deg, rgba(0, 0, 0, 0.263),rgba(75, 88, 90, 0.252) , rgba(149, 149, 149, 0.279));
    background-size: cover;
    width: 20%;
    padding: 50px;
    margin: 20px;
    border-radius: 8px;
    color: rgb(255, 255, 255); /* Colore del testo bianco per contrastare con l'immagine di sfondo */
    text-align: left;
    font-size: 20px;
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s, background-color 0.5s;
    margin-left: auto; /* Spinge l'elemento verso destra */
    backdrop-filter: blur(8px);
    opacity: 0;
}

.box_intro_orto:hover{
    background-color: rgba(27, 126, 121, 0.435);
}


.box_intro_orto p{
    transition: transform 0.5s, box-shadow 0.5s, color 0.5s;
}

.box_intro_orto p:hover{
    transform: scale(1.05);
}

.container_orto {
    background: linear-gradient(45deg, rgba(0, 125, 125, 0.886), rgba(11, 109, 116, 0.827), rgba(32, 122, 161, 0.876));
    display: flex;
    border-radius: 8px;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    backdrop-filter: blur(10px);

    transition: transform 0.3s, box-shadow 0.3s, background-color 0.5s;
}

.container_orto p{
    font-size: 22px;
}

.container_orto:hover {
    background-color: #006377;

}


.intro_orto.visible {
    animation: fadeIn 1s forwards; /* Applica l'animazione */
}

.box_intro_orto.visible, .container_orto.visible{
    opacity: 1; /* Mostra l'elemento */
    animation: zoomIn 1s forwards; /* Applica l'animazione */
}

/* Media query per schermi piccoli */
@media (max-width: 768px) {
    .intro_orto {
        flex-direction: column;
        align-items: center;
    }

    .box_intro_orto {
        width: 90%;
        text-align: center;
        padding: 20px;
    }

    .container_orto {
        flex-direction: column;
        align-items: center;
    }

    .box_intro_orto {
        width: 90%;
        margin: 10px 0;
    }
}