/* style.css */

.captcha-box {
    background-color: #cfe8ff;
    padding: 15px;
    text-align: center;
    font-size: 28px;
    font-style: italic;
    letter-spacing: 5px;
    border-radius: 8px;
}

.error-box {
    background-color: #ffcccc;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    color: #900;
    display: none;
}
/* Effetto hover per i contatti nella top bar */
.top-contact-link {
    transition: color 0.3s ease;
}
.top-contact-link:hover {
    color: #ffc107 !important; /* Colorerosso warning di Bootstrap */
}
.top-contact-link:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Spaziatura e stile per il menu di navigazione */
.navbar-nav .nav-link {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

/* Effetto hover e voce attiva nel menu */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #ffc107 !important; /* giallo */
}

/* ======== HERO ========= */

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    background-image: url('img/hero.jpg'); /* INSERISCI QUI LA TUA IMMAGINE */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 80vh; /* Occupa l'80% dell'altezza dello schermo */
    display: flex;
    align-items: center;
}

/* Overlay per far risaltare il testo */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); /* Nero al 65% di opacità */
    z-index: 1;
}

/* Contenuto in primo piano rispetto all'overlay */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Ombra leggera sui testi per massimizzare la leggibilità */
.shadow-text {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

/* Effetti sui bottoni Call to Action */
.btn-cta {
    transition: all 0.3s ease;
    border: none;
    padding: 0.8rem 1.5rem;
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* ========== SERVIZI ======== */

/* Stile per le immagini dei servizi */
/* --- Regola Generale --- */
.service-img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 100%;
    object-position: center;
    border-radius: 15px; /* Arrotondamento coerente */
}

/* --- Versione DESKTOP (Altezza fissa per ordine) --- */
@media (min-width: 769px) {
    .service-img {
        height: 350px;
        object-fit: cover; /* Su desktop è meglio riempire il riquadro */
    }
}

/* --- Versione MOBILE (Immagine intera) --- */
@media (max-width: 768px) {
    .service-img {
        height: auto;      /* L'altezza si adatta alla foto */
        object-fit: scale-down; /* Assicura che l'immagine sia contenuta interamente */
        /* Oppure puoi usare object-fit: contain; */
    }

    /* Applichiamo lo stesso concetto alla galleria progetti se necessario */
    .gallery-item img {
        height: auto !important;
        object-fit: contain !important;
    }
}
.service-img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

/* Titoli dei servizi */
#servizi h3 {
    color: #212529;
    position: relative;
}

/* Personalizzazione icone della lista */
.bi-check2-circle {
    font-size: 1.2rem;
    vertical-align: middle;
}

/* ========= PERCHE SCEGLIERE NOI ======= */
/* Effetto sollevamento card al passaggio del mouse */
.feature-card {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border-radius: 15px;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    background-color: #fff;
}

/* Animazione icona al passaggio del mouse */
.feature-card:hover .feature-icon-dist i {
    transform: scale(1.1);
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Stile per i titoli delle card */
.feature-card h5 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    color: #212529;
}

.feature-icon-dist i {
    display: block;
    line-height: 1;
}

/* ====== CTA ====== */
/* --- CTA RIBBON --- */
.cta-ribbon {
    background-image: url('img/CTA.jpg'); /* Usa un'immagine di dettaglio, tipo mattoni o attrezzi */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effetto Parallax */
    min-height: 150px; /* Altezza contenuta come richiesto */
    display: flex;
    align-items: center;
}

.cta-ribbon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Più scuro per far risaltare i bottoni */
    z-index: 1;
}

/* Ottimizzazione mobile: disabilita parallax su smartphone per fluidità */
@media (max-width: 768px) {
    .cta-ribbon {
        background-attachment: scroll;
    }
}

/*=========== CHI SIAMO =========== */
/* Stile per la sezione Chi Siamo */
#chi-siamo .tracking-wider {
    letter-spacing: 2px;
}

#chi-siamo img {
    transition: all 0.5s ease;
    border: 8px solid #f8f9fa; /* Crea un effetto cornice bianca */
}

#chi-siamo img:hover {
    transform: scale(1.02);
}

/* Colore per i testi secondari per migliorare la leggibilità */
.text-secondary {
    line-height: 1.7;
}

/*=========== GALLERY PROGETI ======= */

/* --- GALLERIA PROGETTI --- */
.gallery-wrapper {
    display: flex;
    overflow-x: auto; /* Permette lo scorrimento manuale su mobile */
    scroll-behavior: smooth;
    gap: 1.5rem;
    padding: 10px 0 20px 0;
    scrollbar-width: none; /* Nasconde scrollbar su Firefox */
}

.gallery-wrapper::-webkit-scrollbar {
    display: none; /* Nasconde scrollbar su Chrome/Safari */
}

.gallery-item {
    flex: 0 0 auto;
    width: 350px; /* Larghezza fissa per ogni foto */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item img {
    width: 100%;
    height: 250px; /* ALTEZZA FISSA: allinea tutte le immagini */
    object-fit: cover; /* Ritaglia l'immagine per riempire lo spazio senza deformarla */
    display: block;
}

/* Modal Lightbox Background */
#lightboxModal .modal-content {
    background: transparent;
}
 /* Stile base frecce */
.btn-scroll {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Regolazioni per Mobile */
@media (max-width: 768px) {
    .btn-scroll {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .gallery-item {
        width: 75vw; /* L'immagine occupa il 75% della larghezza, lasciando vedere la successiva */
    }

    /* Mostriamo una scrollbar sottile e moderna su mobile */
    .gallery-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px; /* Spazio per la scrollbar */
    }

    .gallery-wrapper::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .gallery-wrapper::-webkit-scrollbar-track {
        background: #e0e0e0;
        border-radius: 10px;
    }

    .gallery-wrapper::-webkit-scrollbar-thumb {
        background: #ffc107; /* Colore giallo Edil Power */
        border-radius: 10px;
    }
}

/* Desktop mantiene le vecchie impostazioni */
@media (min-width: 769px) {
    .gallery-item {
        width: 350px;
    }
    .gallery-wrapper::-webkit-scrollbar {
        display: none;
    }
}



/* ========= footer ============= */
/* --- FOOTER STYLE --- */
footer {
    font-size: 0.95rem;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a, .social-icon {
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #ffc107 !important; /* Giallo Bootstrap */
    padding-left: 5px;
}

.social-icon:hover {
    color: #ffc107 !important;
    transform: translateY(-3px);
    display: inline-block;
}

/* Colore secondario più leggibile su sfondo scuro */
.text-secondary {
    color: #32383E !important; 
}

/* =============== PAGINA RISTRUTTURAZIONI =============/*

/* Hero specifica per le pagine interne */
.hero-page {
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Numeri giganti per gli step */
.card .display-4 {
    font-family: 'Arial Black', sans-serif;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.card:hover .display-4 {
    opacity: 1;
}

/* Bottoni WhatsApp più evidenti */
.btn-success {
    background-color: #25d366;
    border: none;
}
.btn-success:hover {
    background-color: #1ebe57;
}

/*=============== PAGINA RIFACIEMNTO BAGNI ============ /*

/* Sfondi leggeri per le icone */
.bg-warning-light {
    background-color: rgba(255, 193, 7, 0.1);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bg-dark-light {
    background-color: rgba(33, 37, 41, 0.1);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Effetto dinamico al passaggio del mouse */
.custom-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid transparent !important;
}

.custom-card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    border-bottom: 3px solid #ffc107 !important;
}

.custom-card-hover h5 {
    transition: color 0.3s ease;
}

.custom-card-hover:hover h5 {
    color: #ffc107;
}