/*-- Use For Custom Styling --*/

.anim-text-white {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-gradient(linear, left top, right top, from(#0718fe), color-stop(50%, #0718fe), color-stop(50%, #FFFFFF));
    background-image: linear-gradient(to right, #F7EA2A, #F7EA2A 50%, #FFFFFF 50%);
    background-size: 200% 100%;
    background-position: 100%;
}


::-webkit-scrollbar-thumb {
    background: #F7EA2A;
    width: 0;
    height: 25%;
}


/* Stile di base del pulsante WhatsApp */
.btn-main {
    width: 50px; /* Dimensione del pulsante circolare */
    height: 50px;
    border-radius: 50%; /* Rende il pulsante circolare */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff; /* Colore dell'icona bianco */
    background-color: #25D366; /* Verde WhatsApp */
    border: solid 1px #25D366; /* Bordo verde WhatsApp */
    transition: background-color 0.3s, color 0.3s; /* Transizione fluida */
    font-size: 24px; /* Dimensione dell'icona */
}

/* Stile quando l'utente passa sopra il pulsante */
.btn-main:hover {
    background-color: #F7EA2A; /* Giallo al passaggio del mouse */
    color: #23262C; /* Colore dell'icona grigio scuro */
    border-color: #F7EA2A; /* Bordo giallo */
}

/* Stile quando il pulsante viene cliccato */
.btn-main:active {
    background-color: #F7EA2A; /* Rimane giallo quando cliccato */
    color: #23262C; /* Colore dell'icona grigio scuro */
    border-color: #F7EA2A; /* Bordo giallo */
}

/* Media Query per dispositivi mobili - Ingrandire solo l'icona */
@media (max-width: 767px) {
    .btn-main i { 
        font-size: 36px; /* Aumenta la dimensione dell'icona sui dispositivi mobili */
    }
}






.pdf-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000; /* Cambia il colore come preferisci */
}

.pdf-link i {
    font-size: 24px;
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.pdf-link:hover i {
    transform: scale(1.2);
}

.auth-item p {
    margin: 0;
}



.servizi-sec {
    position: relative; /* Aggiungi questa linea se non è già presente */
}


.servizi-sec:before {
    content: '';
    width: 200px; /* Modifica la larghezza del logo come desideri */
    height: 200px; /* Modifica l'altezza del logo come desideri */
    position: absolute;
    background: url('/sitiwebMT/andreasirottami/dark-agency/img/quadrato-logo-andreasi-rottami.png') no-repeat center center; /* Aggiungi il logo al posto del quadrato */
    background-size: contain; /* Assicura che il logo si adatti allo spazio */
    top: 20px; /* Distanza dal bordo superiore, modifica se necessario */
    right: 20px; /* Distanza dal bordo destro, modifica se necessario */
    z-index: -1; /* Assicurati che il logo non copra il contenuto */
}


@media (max-width: 991.98px) {
    .servizi-sec:before {
        display: none; /* Nasconde il quadrato bianco su schermi piccoli */
    }
}




.certificate {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Aggiungi transizione per un effetto più fluido */
}

.certificate i {
    color: white;
    font-size: 36px;
    transition: transform 0.3s ease; /* Aggiungi transizione per l'effetto di zoom */
}

.certificate:hover i {
    transform: scale(1.2); /* Modifica il valore per aumentare o diminuire l'effetto di zoom */
}


/* CSS per l'effetto di zoom delle icone PDF */
.zoom-effect {
    transition: transform 0.3s ease-in-out; /* Transizione fluida per l'effetto di zoom */
}

.zoom-effect:hover {
    transform: scale(1.2); /* Modifica il valore per aumentare o diminuire l'effetto di zoom */
}


/* Aumenta grandezza del logo */
header .navbar-brand img {
    max-width: 130px;
}





/* Zoom per le icone */
.cert-box:hover .zoom-effect {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}







/* Stile per la sezione Copyright */
.copyright-sec {
    padding: 20px 0;
}

/* Stile per i link */
.copyright-sec a:hover {
    color: #ffffff; /* Colore al passaggio del mouse sui link */
    text-decoration: underline; /* Sottolinea i link quando si passa sopra */
}










/* Per schermi fino a 2500px */
@media (max-width: 2500px) {
    /* Side Menu */
    .side-menu {
        width: 50%; /* Ridotto leggermente per garantire che il testo non venga tagliato */
    }
    .side-menu .inner-wrapper {
        padding: 2rem 3rem; /* Ridotto leggermente per dare più spazio al contenuto */
    }
    .navbar-nav .nav-link {
        font-size: 50px; /* Manteniamo il testo leggermente più grande per migliorare la leggibilità */
    }
}

/* Per schermi fino a 991.98px */
@media (max-width: 991.98px) {
    /* Side Menu */
    .side-menu {
        width: 100%; /* Aumentato per dare più spazio al contenuto */
    }
    .side-menu .inner-wrapper {
        padding: 2rem 4rem; /* Aggiustato per dare più spazio al contenuto */
    }
    .navbar-nav .nav-link {
        font-size: 25px; /* Testo leggermente più grande per migliorare la leggibilità */
    }
    .side-menu-inner-content {
        max-width: 100%; /* Assicurati che il contenitore usi tutta la larghezza disponibile */
    }
    .row.w-100 {
        width: 100%; /* Assicurati che il row utilizzi tutta la larghezza disponibile */
    }
}








/* Stile per la linea gialla nel menu*/
.menu-line {
    position: absolute;
    left: -50px;
    font-size: 3.6rem;
    font-weight: bolder;
    color: #F7EA2A;
    top: 32px; /* Puoi aggiustare questo valore se necessario */
    display: block;
    text-align: center;
    width: auto;
    height: 75px;
    pointer-events: none;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
    transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}

/* Trasformazioni per gli stati attivi e hover */
.nav-icon .navbar-nav .nav-link:nth-child(1).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(1):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.nav-icon .navbar-nav .nav-link:nth-child(2).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(2):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 85px, 0); /* Aggiusta in base all'altezza dei link */
    transform: translate3d(0, 85px, 0);
}

.nav-icon .navbar-nav .nav-link:nth-child(3).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(3):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 170px, 0); /* Aggiusta in base all'altezza dei link */
    transform: translate3d(0, 170px, 0);
}

.nav-icon .navbar-nav .nav-link:nth-child(4).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(4):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 255px, 0); /* Aggiusta in base all'altezza dei link */
    transform: translate3d(0, 255px, 0);
}

.nav-icon .navbar-nav .nav-link:nth-child(5).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(5):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 340px, 0); /* Aggiusta in base all'altezza dei link */
    transform: translate3d(0, 340px, 0);
}

.nav-icon .navbar-nav .nav-link:nth-child(6).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(6):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 425px, 0); /* Aggiusta in base all'altezza dei link */
    transform: translate3d(0, 425px, 0);
}

.nav-icon .navbar-nav .nav-link:nth-child(7).active ~ .menu-line,
.nav-icon .navbar-nav .nav-link:nth-child(7):hover ~ .menu-line {
    -webkit-transform: translate3d(0, 510px, 0); /* Aggiusta in base all'altezza dei link */
    transform: translate3d(0, 510px, 0);
}