/* FONT + BASE */
body,p,h1,h2,h3,h4,h5,h6,.btn {
    font-family: 'Montserrat', Arial, sans-serif;
}
h2{font-weight:bold!important;font-size:23px!important}
p{font-size:15px}
.padding-section{
    padding:90px 0 0px 0;
}
#loader {
    position: fixed;
    inset: 0;
    background: #fff; /* colore sfondo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

    #loader img {
        width: 120px;
        animation: fadeIn 1.5s ease-in-out infinite alternate;
    }
.loghi-web,.loghi-mobile {
 margin-top:50px!important
}
.logo-box {
    height: 180px; /* altezza uniforme */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-box img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }
/* Animazione semplice */

@keyframes fadeIn {
    from {
        opacity: 0.4;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.loghi-mobile {
    display: none
}
.btn-mobile {
    display: none!important
}
/* Loader nascosto */
#loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.navbar {
    background: #0f2a44 !important
}
    .navbar a {
        color: #fff;
        font-family: 'Montserrat';
        font-weight:600;
        font-size:16px!important;
        margin-left:20px
    }
        .navbar a:hover{color:#fff}
#dynamic-font {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
}
#back-to-top {
    position: fixed;
    top: 50%;
    right: 30px;
    display: none; /* nascosto inizialmente */
    background-color: #0f2a44;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 9999;
    transition: all 0.3s ease;
}

    #back-to-top svg {
        display: block;
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
    }

    #back-to-top:hover {
        background-color: #1a3b61;
    }

        #back-to-top:hover svg {
            transform: translateY(-2px);
        }
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px; /* spostato a destra */
    width: 60px;
    height: 60px;
    background: #25D366; /* verde WhatsApp */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: transform 0.2s ease;
}

    .whatsapp-btn:hover {
        transform: scale(1.1);
    }

    .whatsapp-btn svg {
        width: 32px;
        height: 32px;
    }
        /* HERO */
.hero {
            background: #0f2a44;
            color: white;
            padding: 140px 20px;
            text-align: center;
        }

    .hero h1 {
        font-size: 45px;
        font-weight: 700;
        margin:20px 0 80px 0
    }
        .hero h1 span {
            color: #FFD984!important
        }

    .hero p {
       
        margin: 0px auto;
    }
    .hero .title, .hero .subtitle {
        font-size: 24px;
        font-weight: bold
    }
.hero-strip {
    display: inline-block; /* larghezza = lunghezza testo */
    background-color: #0f2a44; /* blu */
    padding: 0.3em 0.6em; /* spazio sopra e sotto, piccolo margine laterale */
    transform: rotate(-1deg); /* inclinazione barra */
    margin: 0; /* rimuove margini default */
    color: white;
    transform-origin: left center; /* per inclinazione corretta */
}

    .hero-strip span {
        display: inline-block;
        transform: rotate(1deg); /* compensa inclinazione per testo dritto */
    }
.custom-toggler {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

    /* linee hamburger */
    .custom-toggler span {
        display: block;
        width: 50px; /* grande */
        height: 10px; /* spesse */
        background: white;
        position: relative;
    }

        /* effetto "linee doppie" */
        /*.custom-toggler span::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 3px;
            opacity: 0.5;
        }*/

        /* linea centrale inclinata */
        .custom-toggler span:nth-child(2) {
            transform: rotate(8deg);
        }
.social-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}
    .social-icons a:first-child svg {
        transform: translateY(2px); /* regola: 1px o 2px */
    }
    .social-icons a:last-child svg {
        transform: translateY(2px); /* regola: 1px o 2px */
    }
    .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
    }
/* BOTTONI */
.btn-custom, .btn-custom-2, .btn-custom-blu {
    border-radius: 10px !important;
    padding: 5px 25px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
    .btn-custom:hover, .btn-custom-2:hover {
        color: var(--bs-btn-color)!important;
        opacity:0.9;
    }
    .btn-custom,
    .btn-custom-2,
    .btn-custom-blu {
        width: 300px;
    }

.btn-custom {    
    background-color: #FFD984 !important;  
    
}
.btn-custom-2 {
    background-color: #FBEFE3 !important;
}
.btn-custom-blu {
    background-color: #0f2a44 !important;
    color:#fff!important
}
/* SERVIZI */
.service-box {
    text-align: center;
    padding: 60px 15px 0px 15px;
}
    .service-box p {
        font-size: 16px;
        font-weight: bold;
        margin-bottom:0px
    }
    .service-box img {
        margin-bottom: 10px;
        max-width:130px
    }

/* LOGHI */
/*.clients img {
    opacity: 0.7;
    transition: 0.3s;
}

    .clients img:hover {
        opacity: 1;
    }*/

/* CARD SECTION */
.cards-section, .about-2 {
    background: #FFD984;
    padding: 80px 0;
}

.card {
    border: none;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}



/* ABOUT */
.about {
    padding: 80px 0;
}

/* FORM */
.contact {
    background: #E9E9E9;
    padding: 80px 0;
}

.form-control {
    border-radius: 10px;
    padding: 12px;
}

/* FOOTER */
footer {
    background: #0f2a44;
    color: white;
    padding: 20px 0;
    position: relative;
}
footer p{
    font-size:16px;
    font-weight:700
}
footer a {
    color: #fff !important;
    text-decoration: none !important
}
.pre-footer {
    background: #0f2a44;
    color: white;
    padding: 50px 0;
    position: relative;
}
.wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
}

    .wave path {
        fill: #0f2a44; /* STESSO colore del footer */
    }
.wave {
    position: absolute;
    top: -100px; /* regola altezza onda */
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

    .wave svg {
        width: 100%;
        height: 100%;
        display: block;
    }
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #444;
    color: #fff;
    padding: 15px 20px;
    z-index: 9999;
    display: none;
    font-size: 14px;
}

.cookie-text a {
    color: #4da3ff;
    text-decoration: underline;
}

.cookie-options {
    margin-top: 10px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

    .cookie-options label {
        cursor: pointer;
        font-size: 13px;
    }

    .cookie-options input {
        margin-right: 5px;
    }

.cookie-buttons {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}
/* Contenitore messaggio */
#formMessage {
    padding: 10px 15px;
    border-radius: 6px;
    margin-top: 10px;
    text-align:center;
    font-size: 18px;
    display: none; /* nascosto di default */
    transition: all 0.3s ease;
}

    /* Messaggio successo */
    #formMessage.success {
        background-color: rgba(40, 167, 69, 0.9); /* verde scuro trasparente */
        color: #fff;
        border: 1px solid #28a745;
    }

    /* Messaggio errore */
    #formMessage.error {
        background-color: rgba(220, 53, 69, 0.9); /* rosso scuro trasparente */
        color: #fff;
        border: 1px solid #dc3545;
    }
/* Input, select e textarea */
#contactForm .form-control {
    background-color: #ffffff;
    border: 1px solid #ffffff; /* bordo bianco */
    border-radius: 12px; /* pił arrotondato */
    padding: 14px 16px; /* pił spazio interno */
    color: #333;
    box-shadow: none;
}
.light-text {
    color: #aaa !important;
}

.dark-text {
      color: #333 !important;
}
    /* Placeholder */
    #contactForm .form-control::placeholder {
        color: #999;
    }

    /* Focus */
    #contactForm .form-control:focus {
        outline: none;
        border: 1px solid #ffffff;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3); /* leggero effetto focus */
    }

/* Select freccia (opzionale miglioramento) */
#contactForm select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Checkbox */
#contactForm .form-check-input {
    border-radius: 4px;
    border: 1px solid #ffffff;
}

/* Spaziatura checkbox */
#contactForm .form-check-label {
    margin-left: 6px;
  
}



/* GRID LAYOUT */
.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 180px;
    gap: 10px;
    margin-top:50px;
}

/* IMMAGINI */
.item {
    position: relative;
    overflow: hidden;
}

    .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        transition: all 0.5s ease;
    }

    /* HOVER */
    .item:hover img {
        filter: grayscale(0%);
        transform: scale(1.05);
    }

    /* OVERLAY (leggero effetto scuro) */
    .item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.25);
        transition: 0.4s;
    }

    .item:hover::after {
        opacity: 0;
    }

/* GRANDE SINISTRA */
.item1 {
    grid-column: span 4;
    grid-row: span 2;
}

/* COLONNA DESTRA ALTA */
.item2 {
    grid-column: span 2;
}

.item3 {
    grid-column: span 2;
}   

/* BLOCCO CENTRALE */
.item4 {
    grid-column: span 1;
    grid-row: span 2;
}

.item5 {
    grid-column: span 3;
    grid-row: span 2;
}

.item6 {
    grid-column: span 2;
    grid-row: span 2;
}

/* BLOCCO MEDIO */
.item7 {
    grid-column: span 2;
    grid-row: span 2;
}

.item8 {
    grid-column: span 2;
    grid-row: span 2;
}

/* FONDO */
.item9 {
    grid-column: span 2;
    grid-row: span 2;
}

.item10 {
    grid-column: span 1;
    grid-row: span 3;
}

.item11 {
    grid-column: span 2;
    grid-row: span 3;
}

.item12 {
    grid-column: span 3;
    grid-row: span 3;
}

.item13 {
    grid-column: span 4;
    grid-row: span 4;
}

.item14 {
    grid-column: span 2;
    grid-row: span 2;
}

.item15 {
    grid-column: span 2;
    grid-row: span 2;
}
@media (max-width: 768px) {
    .loghi-web, .btn-web {
        display: none
    }
    .btn-mobile{display:flex!important;margin-top:40px}
    .loghi-mobile {
        display: block
    }
    .btn-custom-grey {
        background-color: #efefef !important;
        color: #444 !important;
    }
    .btn-custom-grey:hover {
        background-color: #0f2a44 !important;
        color: #fff !important;
    }
    .grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        max-height: 300px;
    }

        .item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
    .hero .title, .hero .subtitle {
        font-size: 20px;
        font-weight: bold;
    }
    .service-box{
        padding-bottom:10px;
        padding-top:10px
    }
    p {
        font-size: 14px
    }
    .service-box img {

        max-width: 110px
    }
    .box-content {
        display: none;
    }

    .toggle-title {
        cursor: pointer;
        position: relative;
    }

        /* freccina */
        .toggle-title::after {
            content: "+";
            position: absolute;
            right: -20px;
            font-size: 20px;
            background:#0f2a44;
            padding:2px
        }

    .box-item.active .toggle-title::after {
        content: "-";
    }

    .box-item.active .box-content {
        display: block;
        margin-top: 10px;
    }
}