html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.pagination {
    display: flex;
    justify-content: center; /* Centra i pulsanti */
    padding: 10px;
    list-style: none;
}

    .pagination li {
        margin: 5px;
    }

    .pagination a {
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 5px;
        color: white;
        background-color: #007bff; /* Colore blu */
        transition: background-color 0.3s ease-in-out;
    }

        .pagination a:hover {
            background-color: #0056b3; /* Blu più scuro */
        }

    .pagination .active span {
        padding: 8px 16px;
        border-radius: 5px;
        color: white;
        background-color: #28a745; /* Verde per la pagina attiva */
        font-weight: bold;
    }

    .pagination .disabled span {
        padding: 8px 16px;
        border-radius: 5px;
        color: #ccc;
        background-color: #f8f9fa;
    }

table {
    border-radius: 8px;
    overflow: hidden;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

.btn-primary {
    background-color: #007bff;
    border-radius: 6px;
}

/* Zoom lento tipo Ken Burns */
@keyframes zoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* Overlay scuro */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12,35,64,.40); /* stesso colore che vuoi */
    z-index: 1; /* resta sotto al testo  */
}

/* Schiarisci direttamente l’immagine di sfondo */
.hero-slide {
    /* mantieni ken‐burns se vuoi */
    animation: zoom 18s ease-in-out infinite;
    filter: brightness(1.15) saturate(1.1);
}

/* Responsività del testo */
@media (max-width: 768px) {
    .hero-caption h1 {
        font-size: 2rem;
    }

    .hero-caption p {
        font-size: 1rem;
    }
}

/* Altezza full-viewport */
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    height: 45vh; /* puoi arrivare a 100vh se vuoi full screen */
    min-height: 200px;
    overflow: hidden;
}

/* immmagini di sfondo */
.bg-1 {
    background-image: url('/images/acciaio_ca.jpg');
}

.bg-2 {
    background-image: url('/images/solaio.jpg');
}

.bg-3 {
    background-image: url('/images/materiali.jpg');
}

/* ----- 1. ELEMENTI DECORATIVI ----- */
.shape {
    position: absolute;
    pointer-events: none;
    opacity: 0; /* partono invisibili */
    transform: scale(.5);
}

.shape-circle {
    width: 90px;
    height: 90px;
    border: 3px solid #fff;
    border-radius: 50%;
    top: 20%;
    left: 8%;
}

.shape-square {
    width: 220px;
    height: 220px;
    border: 0px solid #fff;
    background: rgba(255, 255, 255, 1);
    bottom: 15%;
    right: 15%;
}

/* ----- 2. TESTO (parte da sotto + fade) ----- */
.caption-title, .caption-sub, .caption-btn {
    opacity: 0;
    transform: translateY(35px);
}

/* ----- 3. QUANDO LA SLIDE È ATTIVA ----- */
.carousel-item.active .caption-title {
    animation: slideUp .8s .2s forwards;
}

.carousel-item.active .caption-sub {
    animation: slideUp .8s .4s forwards;
}

.carousel-item.active .caption-btn {
    animation: slideUp .8s .6s forwards;
}

.carousel-item.active .shape-circle {
    animation: popIn .9s .8s forwards;
}

.carousel-item.active .shape-square {
    animation: rotateIn 1s 1.1s forwards;
}

/* ----- 4. KEYFRAMES PERSONALIZZATI ----- */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    80% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: scale(.3) rotate(-90deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ----- 5. OPTIONAL: bordo animato sull’intera slide ----- */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 2rem;
    border: 0px solid rgba(255,255,255,.4);
    opacity: 0;
    transform: scale(.8);
    transition: all .8s ease;
}

.carousel-item.active .hero-slide::after {
    opacity: 1;
    transform: scale(1);
}



/* GALLERIA STABILE — layout a due colonne con foto grandi e piccole
   (per il sito di Cadelano Ferro) */



/*  nessun margine residuo — figure eliminate */
.galleria-stab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* niente spazio sotto le <img> inline */
    border-radius: .5rem; /* stesso raggio che usavi su <figure> */
}

/*  layout desktop (≥992 px) */
@media (min-width:992px) {
    .galleria-stab .img-grid { /* sostituiamo la .row con Grid */
        display: grid !important;
        grid-template-columns: 3fr 1fr; /* 75 % / 25 % → foto grande più piena */
        gap: 1rem;
        min-height: 420px; /* regola facilmente questa quota */
    }

    .galleria-stab .right-stack {
        display: grid !important;
        grid-template-rows: 1fr 1fr; /* due righe di pari altezza     */
        gap: 1rem;
    }
}

/*  padding laterale solo su desktop per non “attaccare” le foto ai bordi */
@media (min-width:992px) {
    .galleria-stab {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.gallery-img {
    transition: transform .4s ease;
    cursor: pointer;
}

    .gallery-img:hover {
        transform: scale(1.04);
    }



p {
    max-width: 65ch;
}
/* line-length ideale */
section {
    scroll-margin-top: 6rem;
}
/* ancore perfette sotto la navbar */
@media (min-width:992px) {
    .galleria-stab .row {
        min-height: 420px;
    }


    /* ----------  HERO CAROUSEL  ---------- */
    .hero-carousel .carousel-item { /* slide full-screen */
        height: 100vh; /* 100% viewport */
        min-height: 580px;
    }

    /* 2) La “hero‐slide” con background + kenburns */
    .hero-slide {
        position: relative;
        display: flex; /* otteniamo automaticamente align-items + justify-content */
        align-items: flex-start;
        justify-content: center; /* centro orizzontale */
        width: 100%;
        height: 100%;
        padding-top: 2rem; /* spazio per il testo in alto */
        background-size: cover;
        background-position: center;
        animation: zoom 18s ease-in-out infinite;
    }

    /* ----------  CAPTION  ---------- */
    .hero-caption {
        position: relative;
        z-index: 2; /* sopra l’overlay   */
        text-align: center;
        color: #fff;
        margin-top: 8rem;
        padding: 0 1rem; /* respiro laterale  */
    }

    .caption-title, .caption-sub, .caption-btn {
        opacity: 0;
        transform: translateY(40px);
    }

    .carousel-item.active .caption-title {
        animation: slideUp .8s .2s forwards;
    }

    .carousel-item.active .caption-sub {
        animation: slideUp .8s .4s forwards;
    }

    .carousel-item.active .caption-btn {
        animation: slideUp .8s .6s forwards;
    }

    /* ----------  KEYFRAME  ---------- */
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* frecce bianche più visibili su overlay scuro */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(1);
    }

    .footer-custom {
        background-color: white; /* o qualsiasi colore preferito */
        color: black;
        padding: 1rem 0;
    }

    .footer-custom a {
        color: #f28f38;
    }

    .footer-custom a:hover {
        color: #fff;
        text-decoration: underline;
    }
    .login-page-content {
        max-width: 1400px;
        margin: 3rem auto;
        padding: 1.5rem;
        background: #fff;
        border-radius: .75rem;
        box-shadow: 0 0 1.5rem rgba(0,0,0,0.15);
    }
    .cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #0C2340;
        z-index: 1050;
        font-family: "Source Sans Pro", system-ui, sans-serif;
        font-size: 0.95rem;
        line-height: 1.4;
    }

        .cookie-banner .btn-secondary {
            background-color: #F28F38;
            border: none;
            color: #fff;
        }

            .cookie-banner .btn-secondary:hover {
                background-color: #e07d2c;
            }

        .cookie-banner .btn-outline-light {
            border-color: #fff;
            color: #fff;
        }

            .cookie-banner .btn-outline-light:hover {
                background-color: rgba(255,255,255,0.1);
            }

        .cookie-banner a {
            color: #F28F38;
        }
    /* Rimuove QUALSIASI marker dai menu Bootstrap */
    .navbar-nav li,
    .navbar-nav .nav-item {
        list-style: none !important;
    }

        .navbar-nav li::marker,
        .navbar-nav li::before {
            content: none !important;
        }




}