@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Londrina+Sketch&family=Spicy+Rice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee+Tint&family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Londrina+Sketch&family=Spicy+Rice&display=swap');

:root {
    --Playfair: 'Playfair Display', serif;
    --Quicksand: 'Quicksand', sans-serif;
    --Roboto: 'Roboto', sans-serif;
    --Spicy: 'Spicy Rice', serif;
    --Strange: "Chakra Petch", sans-serif;
    --dark: #3c393d;
    --exDark: #2b2b2b;
}

* {
    margin: 0;
    box-sizing: border-box;
}

.text-wrapper {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    justify-content: flex-start;
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    margin-top: 15px;

}


.titles {
    display: flex;
    animation: move-rtl 23s linear infinite;

}

.titles-item {
    font-size: 48px;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #fff;
    white-space: nowrap;
    letter-spacing: 1px;
    padding: 0 6rem;
}

.titles-item a {
    color: #FAAD06;
    text-decoration: none;
    font-size: 30px;
}

@keyframes move-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.league-spartan-sponsor {
    margin-top: 0 !important;
}


@keyframes move-rtl1 {
    0% {
        transform: translateX(-100%);
        /* Inizia fuori dalla destra */
    }

    100% {
        transform: translateX(0%);
        /* Termina fuori dalla sinistra */
    }
}

.text-wrapper1 {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    justify-content: flex-start;
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.titles1 {
    display: flex;
    animation: move-rtl1 23s linear infinite;

}

.titles-item1 {
    font-size: 48px;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #fff;
    white-space: nowrap;
    letter-spacing: 1px;
    padding: 0 6rem;
    color: #282D30 !important;
}

.titles-item1 a {
    color: #282D30 !important;
    text-decoration: none;
    font-size: 30px;
    font-family: var(--Strange);
    font-weight: 700;
    font-style: normal;
}


.heading {
    min-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
}



.navbarMain {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

#map {
    z-index: 1 !important;
}

#maps {
    z-index: 1 !important;
}

#maps {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}


.bglobe22 {
    font-size: 38px;
    color: #FAAD06;
}

.bglobe2 {
    font-size: 48px;
    color: #FAAD06;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title i {
    margin-left: 10px;
    /* Aggiungi spazio tra il link e l'icona */
}

.piuRecensioni{
    background-color: rgb(27,32,35);
}

.miglioriRecensite{
    background-color: rgb(27,32,35);
}

.ricercas{
    background-color: rgb(27,32,35);
}

.banner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.h5 {
    font-family: Open Sans;
    margin-top: 8px;
    margin-bottom: 8px;
    align-self: baseline;
}



.h5:hover .arrow-icon1 {
    color: #FFAA00;
    /* Cambia il colore dell'icona quando passi sopra il div */
    cursor: pointer;
}

.h5:hover .arrow-icon2 {
    color: #FFAA00;
    /* Cambia il colore dell'icona quando passi sopra il div */
    cursor: pointer;
}

.h5:hover .arrow-icon3 {
    color: #FFAA00;
    /* Cambia il colore dell'icona quando passi sopra il div */
    cursor: pointer;
}

.h5:hover .arrow-icon4 {
    color: #FFAA00;
    /* Cambia il colore dell'icona quando passi sopra il div */
    cursor: pointer;
}

.h5:hover .arrow-icon5 {
    color: #FFAA00;
    /* Cambia il colore dell'icona quando passi sopra il div */
    cursor: pointer;
}

.h5:hover .arrow-icon6 {
    color: #FFAA00;
    /* Cambia il colore dell'icona quando passi sopra il div */
    cursor: pointer;
}


.linkNav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FFAA00;
    transition: width 0.3s ease-out;
}

.linkNav:hover::after {
    width: 100%;
}

.linkNav {
    text-decoration: none;
    color: #333;
    position: relative;
}



.arrow-icon1 {
    position: absolute;
    right: -170px;
    /* La sposta completamente a destra */
    top: 50%;
    transform: translateY(-50%);
    /* La centra verticalmente */
    font-size: 1.2rem;
    /* Puoi regolare la dimensione dell'icona */
    color: #333;
    /* Cambia colore se necessario */
}

.arrow-icon2 {
    position: absolute;
    right: -120px;
    /* La sposta completamente a destra */
    top: 50%;
    transform: translateY(-50%);
    /* La centra verticalmente */
    font-size: 1.2rem;
    /* Puoi regolare la dimensione dell'icona */
    color: #333;
    /* Cambia colore se necessario */
}

.arrow-icon3 {
    position: absolute;
    right: -200px;
    /* La sposta completamente a destra */
    top: 50%;
    transform: translateY(-50%);
    /* La centra verticalmente */
    font-size: 1.2rem;
    /* Puoi regolare la dimensione dell'icona */
    color: #333;
    /* Cambia colore se necessario */
}

.arrow-icon4 {
    position: absolute;
    right: -45px;
    /* La sposta completamente a destra */
    top: 50%;
    transform: translateY(-50%);
    /* La centra verticalmente */
    font-size: 1.2rem;
    /* Puoi regolare la dimensione dell'icona */
    color: #333;
    /* Cambia colore se necessario */
}

.arrow-icon5 {
    position: absolute;
    right: -75px;
    /* La sposta completamente a destra */
    top: 50%;
    transform: translateY(-50%);
    /* La centra verticalmente */
    font-size: 1.2rem;
    /* Puoi regolare la dimensione dell'icona */
    color: #333;
    /* Cambia colore se necessario */
}

.arrow-icon6 {
    position: absolute;
    right: -210px;
    /* La sposta completamente a destra */
    top: 50%;
    transform: translateY(-50%);
    /* La centra verticalmente */
    font-size: 1.2rem;
    /* Puoi regolare la dimensione dell'icona */
    color: #333;
    /* Cambia colore se necessario */
}

.banner1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 8rem;
    margin-top: 5rem;
    text-align: center;
    color: #fff;
}

.banner-title {
    font-size: 3rem;
    font-family: var(--Open);
    font-weight: bold !important;
    line-height: 1.2;
    align-items: center;
    text-shadow: 8px 2px 5px black;

}

.banner-title-1 {
    font-size: 4rem;
    color: white;
    -webkit-text-stroke: 1px black;
    font-family: var(--Open);
    font-weight: bold !important;
    line-height: 1.2;
    align-items: center;
    text-shadow: 8px 2px 5px black;

}

.banner-title span {
    font-family: var(--Playfair);
    color: var(--exDark);
}

.banner p {
    padding: 1rem 0 2rem 0;
    font-size: 1.2rem;
    text-transform: capitalize;
    font-family: var(--Roboto);
    font-weight: 300;
    word-spacing: 2px;
}

.banner form {
    background: #fff;
    border-radius: 2rem;
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
}




.white-line {
    width: 100%;
    height: 5px;
    /* Puoi regolare l'altezza della linea */
    background: repeating-linear-gradient(90deg,
            rgb(255, 255, 255),
            rgb(255, 255, 255) 30px,
            /* Segmento bianco più lungo */
            #1B2023 30px,
            /* Grigio più scuro per maggiore contrasto */
            #1B2023 60px
            /* Lunghezza totale del pattern */
        );
    background-size: 60px 100%;
    animation: moveLine 1s linear infinite;
    /* Animazione leggermente più veloce */
    /* border-right: solid 2px rgb(73, 73, 73); */
    /* border-left: solid 2px rgb(73, 73, 73); */

}


.black-line1 {
    width: 100%;
    height: 20px;
    /* Puoi regolare l'altezza della linea */
    background: repeating-linear-gradient(90deg,
            #15191C,
            #15191C 30px,
            /* Segmento bianco più lungo */
            #15191C 30px,
            /* Grigio più scuro per maggiore contrasto */
            #15191C 60px
            /* Lunghezza totale del pattern */
        );
    background-size: 200% 100%;
    animation: moveLine 5s linear infinite;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* Animazione leggermente più veloce */
    /* border-top: solid 5px white; */
    /* border-right: solid 2px rgb(73, 73, 73);
    border-left: solid 2px rgb(73, 73, 73); */

}

.black-line2 {
    width: 100%;
    height: 20px;
    /* Puoi regolare l'altezza della linea */
    background: repeating-linear-gradient(90deg,
            #15191C,
            #15191C 30px,
            /* Segmento bianco più lungo */
            #15191C 30px,
            /* Grigio più scuro per maggiore contrasto */
            #15191C 60px
            /* Lunghezza totale del pattern */
        );
    background-size: 200% 100%;
    animation: moveLine 5s linear infinite;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* Animazione leggermente più veloce */
    /* border-bottom: solid 2px rgb(73, 73, 73);
    border-right: solid 2px rgb(73, 73, 73);
    border-left: solid 2px rgb(73, 73, 73); */

}

.righe {
    box-shadow: 0px 0px 10px 1px rgba(200, 150, 2, 0.349);
    padding-right: 0;
    width: 30%;
    border-radius: 8px;
    border: solid 0.1rem #FAAD06;
}


.strada {
    position: relative;
    /* Imposta la sezione strada come riferimento */
    padding-top: 158px;

}


.animated-logo {
    position: absolute !important;
    /* Sovrappone l'immagine */
    top: 13% !important;
    /* left: 40%;  */
    z-index: 2;
    /* Assicura che l'immagine sia sopra */


}

.animated-stripes {
    position: absolute;
    top: 58%;
    /* Posiziona al centro verticale rispetto al contenitore */
    left: 35%;
    width: 30%;
    height: 40px;
    /* Altezza regolabile per sovrapporre le righe al logo */
    overflow: hidden;
    z-index: 2;
    /* Più alto del logo per sovrapporsi a esso */
    pointer-events: none;
    /* Per evitare interferenze con altre interazioni */
}

.stripe {
    position: absolute;
    width: 20%;
    height: 4px;
    /* Altezza della riga */
    background-color: #C99701;
    opacity: 0;
    /* Le righe sono invisibili all'inizio */
    animation: slideStripes 3s linear infinite;
}

/* Posizioni delle righe con ritardo */
.stripe:nth-child(1) {
    top: 2px;
    animation-delay: 0s;
}

.stripe:nth-child(2) {
    top: 8px;
    animation-delay: 0.5s;
}

.stripe:nth-child(3) {
    top: 14px;
    animation-delay: 1s;
}

@keyframes slideStripes {
    0% {
        transform: translateX(100%);
        /* Inizia dal vuoto a destra */
        opacity: 1;
        /* Completamente visibile mentre entra */
    }

    80% {
        transform: translateX(0);
        /* La riga è visibile al centro */
        opacity: 1;
        /* Rimane visibile */
    }

    100% {
        transform: translateX(-100%);
        /* Fuori dal margine sinistro */
        opacity: 0;
        /* Scompare immediatamente quando raggiunge il margine sinistro */
    }
}

@keyframes moveLine {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -60px 0;
        /* La stessa lunghezza del pattern */
    }
}


@media screen and (min-width: 768px) {

    .banner-title {
        font-size: 5rem !important;
    }

}

@media (min-width: 1200px) {

    .animated-logo {
        left: 39% !important;
    }

}

@media (max-width: 1200px) {

    .animated-logo {
        left: 36% !important;
    }

}

@media (max-width: 992px) {

    .animated-logo {
        left: 30% !important;
    }

    .righe {
        width: 50%;
    }




}

@media (min-width: 540px) {

    .imgPiccola {
        display: none;
    }



}




@media (max-width: 540px) {


    .strada {
        padding-top: 0px;
    }

    .imgPiccola {
        display: block;
    }

    .animated-logo {
        display: none;
    }

    .white-line {
        display: none;
    }

    .black-line1 {
        display: none;
    }

    .black-line2 {
        display: none;
    }

    .righe {
        display: none !important;
    }

    .allineaRighe {
        display: none;
    }


}


@media (max-width: 768px) {

    .animated-logo {
        left: 21% !important;
    }

    .righe {
        width: 70%;
    }

    .bi-globe2 {
        font-size: 30px;
    }


}


/* 
@media screen and (min-width: 992px) {

    .animated-logo {
        left: 36% !important;
    }

} */


@media screen and (max-width: 438px) {

    .banner-title {
        font-size: 2rem !important;
    }

    .bi-globe2 {
        font-size: 20px;
    }

    .righe {
        width: 100%;
    }


}

/* @media screen and (max-width: 992px) {


    .containerMappa {
        height: 600px;
        width: 800px;
    }


} */

.imgAbbonati {
    width: 100%;
    height: auto;
}


.computer-container {
    position: relative;
    width: 566.4px;
    height: 676px;
    background-image: url('/imgs/iphone.png');
    /* Immagine del computer */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-self: center;
}

/* Mantiene le proporzioni corrette e la posizione della mappa */
.map-container {
    position: absolute;
    width: 286px;
    /* Adatta alle dimensioni dello schermo dell'immagine */
    height: 630.67px;
    /* Adatta alle dimensioni dello schermo dell'immagine */
    overflow: hidden;
    border-radius: 30px;
    margin-top: 20px;
}

/* Aggiungi media queries per diverse risoluzioni di schermo */

.containerMappa {
    display: flex;
    justify-content: center;
}



@media screen and (max-width: 450px) {

    .map-container {
        border: solid 5px #FAAD06;
    }

    .computer-container {

        background-image: none;
    }


}

.bottone-abbonamento:hover {
    position: relative;
    display: inline-block;
    color: #FAAD06;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cerchio {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: rgba(166, 159, 159, 0.277);
    text-align: center;
    position: relative;
}

.cerchio img {
    height: 60px;
    width: 60px;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 50%;
}

.cerchio:hover {
    cursor: pointer;
}

.cerchio:hover {
    background-color: #FAAD06;
}

a {
    color: #282D30;
}


.d-flex-center-wrap {
    display: flex;
    justify-content: center;
    /* Distribuisce gli elementi con spazi uguali */
    flex-wrap: wrap;
    /* Permette agli elementi di andare a capo se non c'è abbastanza spazio */
}

@media screen and (max-width: 768px) {

    .d-flex-center-wrap {
        justify-content: center;
    }


}