@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

* {margin: 0;box-sizing: border-box;}
body {overflow-x: hidden; background-color: #000000;}
html {scroll-behavior: smooth;}

.anim-wrapper {
    overflow: hidden;
  }

/* BOTTONI CONTATTI */

.iconawh {position: fixed;display: flex;bottom: 60px;right: 20px;font-size: 2.5em;cursor: pointer;z-index: 1000;}
.iconaig {position: fixed;display: flex;bottom: 10px;right: 20px;font-size: 2.5em;cursor: pointer;z-index: 1000;}
.iconawh:hover, .iconaig:hover {transform: scale(1.1);}

/* FINE BOTTONI CONTATTI */

/* NAVBAR */

 .hamburger {display: none;flex-direction: column;cursor: pointer;gap: 5px;margin-right: 20px;}
 .hamburger span {width: 25px;height: 3px;background: #E51C9B;border-radius: 3px;}
 nav img {width: 4%; height: 10vh;}
 nav {display: flex;flex-direction: row;justify-content: space-between;height: 10vh;width: 100%;background-color: rgb(109, 95, 146, 0.4);}
 nav ul {list-style: none;display: flex;flex-direction: row;gap: 20px;}
 nav ul li a {text-decoration: none;font-size: 36px;line-height: 10vh;color: #E51C9B;font-family: Georgia, serif;}
 nav ul li a:hover{border-bottom: 2px solid #E51C9B;transition: all 0.3s ease;}
 nav button {background-color:#E51C9B; width: 10%; height: 7vh; margin-right: 20px;cursor:pointer;}
 nav button {margin-top: 1.5vh;border-radius: 10px; border: none;transition: all 0.3s ease;}
 nav button:hover{transform: scale(1.1);}
 nav button a {text-decoration: none;color: black;font-size: 22px;font-family: Georgia, serif;}

/* FINE NAVBAR */

/* HERO */

 .hero {position: relative;}
 .hero::before {top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 1;}
 .hero::before {content: "";position: absolute;}
 .hero img {width: 100%;height: 90vh;}
 .hero-text {position: absolute;top: 30%;left: 10%;text-align: center;width: 35%;z-index: 2;}
 .hero-text h1 {font-size: 36px;color: rgb(109, 95, 146);margin-top: 0.5vh;font-family: 'PlayFair Display',sans-serif;}
 .hero-text h2 {font-size: 26px;color:rgb(229, 28, 155);margin-top: 0.5vh;font-family: 'PlayFair Display',sans-serif;}
 .hero-text button {width: 30%;height: 7vh;background-color: #E51C9B;border: none;margin-top: 2.5vh;cursor: pointer;}
 .hero-text button {border-radius: 10px;transition: all 0.3s ease;}
 .hero-text button:hover {transform: scale(1.1);}
 .hero-text button a {text-decoration: none;color: #000000;font-size: 22px;}

/* FINE HERO */

/* SEZIONE CHI SONO */

#sezioneChiSiamo {width: 100%;}
#sezioneChiSiamo h2 {text-align: center;color: #E51C9B;text-transform: uppercase;font-size: 42px;}
#sezioneChiSiamo h2 {font-family: 'PlayFair Display',sans-serif;}
.containerChiSiamo {width: 100%;display: flex;flex-direction: row;margin-bottom: 10vh;}
.boxTestoChiSiamo {width: 50%;display: flex;justify-content: center;align-items: center;height: 70vh;flex-direction: column;}
.boxTestoChiSiamo p {color: #fff;width: 60%;font-size: 26px;font-family: 'Lato',sans-serif;margin-top: 2vh;text-align: center;}
.boxFotoChiSiamo {width: 50%;display: flex;justify-content: center;align-items: center;height: 70vh;}
.boxImmagineChiSiamo {width: 300px;height: 350px;}
.rotazionePositiva {transform: rotate(5deg);}
.rotazioneNegativa {transform: rotate(-5deg);}
.scotch {width: 15%;position: absolute;right: -17.5px;transform: rotate(5deg);height: 5vh;top: -7px;}
.scotch2 {width: 15%;position: absolute;left: -17.5px;transform: rotate(100deg);height: 5vh;top: -10px;}
.boxImmagineChiSiamo img {width: 100%;height: 100%;}
.boxTestoChiSiamo button {width: 20%;height: 6vh;border: none;background-color: #E51C9B;border-radius: 10px;}
.boxTestoChiSiamo button {margin-top: 2vh;transition: all 0.3s ease;cursor: pointer;}
.boxTestoChiSiamo button:hover {transform: scale(1.1);}
.boxTestoChiSiamo button a {text-decoration: none;color: #000000;font-size: 20px;}

/* FINE SEZIONE CHI SONO */

/* SEZIONE VIDEO */

#sezioneVideo {width: 100%;height: 100vh;box-sizing: border-box;margin-bottom: 20vh;}
.video-container{width: 100%;height: 120vh;display: flex;justify-content: center;align-items: center;overflow: hidden;position: relative;}
.video-container video {width: 100%;height: 100%;object-fit: cover;filter: brightness(50%);}

/* FINE SEZIONE VIDEO */

/* SEZIONE SERVIZI / RECENSIONI */

#sezioneServizi {width: 100%;display: flex;flex-direction: column;}
#sezioneServizi h2 {text-align: center;color: #E51C9B;text-transform: uppercase;font-size: 42px;}
#sezioneServizi h2 {font-family: 'PlayFair Display',sans-serif;margin-bottom: 3vh;margin-top: 3vh;}
.pServizi {color: #fff;margin-bottom: 3vh;text-transform: uppercase;font-family: 'PlayFair Display',sans-serif;}
.pServizi {font-size: 24px; width: 100%;text-align: center;}
.containerServizi {width: 100%;display: flex; flex-direction: row;}
.containerServizi {height: 70vh;justify-content: space-around;}
.boxServizi {width: 25%;border: none;gap: 20px;margin-top: 5vh;margin-bottom: 5vh;height: 55vh;}
.boxServizi {transition: all 0.3s ease;cursor: pointer;position: relative;}
.boxServizi:hover {transform: translateY(-20px);}
.boxServizi:nth-of-type(2) {margin-top: 10vh;}
.boxServizi img {width: 100%;height: 100%;filter: brightness(50%);}
.boxServizi h3 {position: absolute;top: 160px;left: 5%;color: white;font-size: 24px;}
.boxServizi h3 {font-family: 'Playfair Display', sans-serif;text-transform: uppercase;z-index: 2;}
.boxServizi p {position: absolute;top: 240px;left: 5%;color: white;font-size: 24px;}
.boxServizi p {font-family: 'Playfair Display', sans-serif;text-transform: uppercase;z-index: 2;}
.containerRecensioni {width: 100%;display: flex;flex-wrap: wrap; flex-direction: row;justify-content: space-around;margin-bottom: 5vh;}
.boxRecensione {width: 33%;height: 50vh;text-align: center;color: #fff;font-size: 22px;transition: all 0.3s ease;}
.boxRecensione {cursor: pointer;}
.boxRecensione:hover {transform: scale(1.05);}
.boxRecensione p {font-family: 'Lato',sans-serif;width: 80%;margin-left: 10%;margin-top: 4vh;}
.boxRecensione h4 {margin-top: 5vh;color: #E51C9B;}


/* FINE SEZIONE SERVIZI / RECENSIONI */

/* SEZIONE GALLERY */

#sezioneGallery {padding: 4rem 2rem;text-align: center;}
#sezioneGallery h2 {text-align: center;color: #E51C9B;text-transform: uppercase;font-size: 42px;}
#sezioneGallery h2 {font-family: 'PlayFair Display',sans-serif;margin-bottom: 3vh;margin-top: 3vh;}
#sezioneGallery p {color: #fff;margin-bottom: 3vh;text-transform: uppercase;font-family: 'PlayFair Display',sans-serif;}
#sezioneGallery p {font-size: 24px; width: 100%;}
.gallery-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1rem;cursor: pointer;}
.gallery-grid img {width: 100%;height: 50vh;border: 2px solid #fff;border-radius: 8px;transition: all 0.4s ease;}
.gallery-grid img:hover {transform: scale(1.05);filter: brightness(1.2);}

/* FINE SEZIONE GALLERY */

/* CALL FINALE */

#sezioneCall {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#sezioneCall img {width: 100%;height: 100%;filter: brightness(20%);}
.boxCall {position: absolute;align-items: center;display: flex;flex-direction: column;gap: 20px;}
.boxCall h2 {color: #E51C9B;width: 90%;font-size: 36px;font-family: 'Lato',sans-serif;}
.boxCall p {font-family: 'Lato',sans-serif;color: white;font-size: 26px;}
.boxCall button {padding: 10px;width: 15%;border-radius: 10px;border: none;transition: all 0.3s ease;cursor: pointer;}
.boxCall button:hover {transform: scale(1.1);}
.boxCall button:nth-of-type(1) {background-color: rgb(0, 128, 0, 0.6);}
.boxCall button:nth-of-type(2) {background-color: rgb(229, 28, 155, 0.6);}
.boxCall button a {text-decoration: none;color: #000000;font-family: 'Lato',sans-serif;font-size: 16px;}


/* FINE CALL FINALE */

/* FOOTER */

footer {display: flex;flex-direction: column;width: 100%;}
.footerUp {display: flex;flex-direction: row;justify-content: space-between;height: 60vh;text-align: center;}
.footerUp img {height: 70%; padding: 10px;}
.footerUp h3 {font-family: Georgia, 'Times New Roman', Times, serif;font-size: 32px;color: #fff;margin-top: 8.5vh;margin-bottom: 10px;}
.footerUp ul {list-style: none;}
.footerUp ul li a {text-decoration: none;color: #E51C9B;display: flex;flex-direction: column;gap: 30px;transition: all 0.3s ease;}
.footerUp ul li a:hover {font-size: 18px;}
.footerUp ul:nth-of-type(2) li {color: #fff;margin-right: 20px;font-family: 'Lato',sans-serif;}
.footerUp ul:nth-of-type(2) {display: flex;flex-direction: column;gap: 10px;}
.footerDown {display: flex;flex-direction: row;width: 100%;height: 20vh;justify-content: space-between;}
.footerDownLeft {display: flex;flex-direction: column;padding: 10px;gap: 10px;}
.footerDownLeft p {display: flex;flex-direction: column;gap: 20px;color: #fff;font-family: 'Lato',sans-serif;font-size: 16px;}
.footerDownRight {margin-right: 20px;}
.boxSocial {text-align: center;}
.boxSocial img {width: 15%;margin-bottom: 10px;}
.footerDownRight button {padding: 10px 20px;background-color: #ff4081;color: white;}
.footerDownRight button {border: none;border-radius: 5px;cursor: pointer;}
.footerDownRight input {border: none; border-radius: 5px;padding: 10px;}

/* FINE FOOTER */