.bg-primary {
    background-color: #1d3671 !important;
}
.border-primary {
    border-color: #1d3671 !important;
}
.border-top {
    border-top: 2px solid #1d3671 !important;
}
.border-bottom {
    border-bottom: 2px solid #1d3671 !important;
}

body {
    font-family: 'Montserrat', sans-serif;
}
.bg-customGrey {
    background-color: #e7ebf1 !important;
}

/* Specifico per il titolo h1 che abbiamo creato prima */
h1.display-4 {
    font-weight: 700;
    text-transform: uppercase;
}

/* CSS aggiuntivo per riprodurre gli effetti hover originali */
.marchio-card {
    transition: transform 0.3s ease;
}
.marchio-card:hover {
    transform: translateY(-5px);
}
.marchio-card .btn {
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease;
}
.marchio-card:hover .btn {
    opacity: 1;
}

/* Imposta il font Montserrat per tutto il menu */
#offcanvasNavbar {
    font-family: 'Montserrat', sans-serif;
}

/* Rimuove l'effetto hover predefinito di Bootstrap per i link */
#offcanvasNavbar .nav-link {
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-transform: none; /* Cambia in uppercase se lo vuoi tutto maiuscolo */
}

/* Effetto di apparizione fluida del testo */
.offcanvas.show .menu-link {
    animation: slideUpFade 0.5s ease forwards;
}

@keyframes slideUpFade {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Stile per i link al passaggio del mouse */
#offcanvasNavbar .nav-link:hover {
    opacity: 0.7;
    transform: translateX(5px);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/"; /* Sostituisce la freccia di default con lo slash */
    color: #6c757d; /* Colore grigio chiaro per lo slash */
}

.small {
    font-size: 0.8rem; /* Rende il testo del breadcrumb leggermente più piccolo */
}

/* Colore Rosso #c02828 per Sfondo e Bottoni */
.bg-custom-red, .btn-custom-red {
    background-color: #c02828 !important;
    border-color: #c02828 !important;
    color: white !important;
    transition: background-color 0.3s ease;
}

/* Effetto hover specifico per il bottone rosso */
.btn-custom-red:hover {
    background-color: #a02020 !important; /* Un rosso leggermente più scuro all'hover */
    border-color: #a02020 !important;
    color: white !important;
}

/* 2. ANIMAZIONE DEL TRIANGOLO (SCENDE DI 10px) */
.marchio-triangle {
    transition: top 0.3s ease-in-out; /* Transizione fluida per la proprietà 'top' */
}

/* Quando si va in hover sulla card, il triangolo scende */
.marchio-card:hover .marchio-triangle {
    top: -46px !important; /* Scende di 10px rispetto all'originale -56px */
}

/* 3. ANIMAZIONE DEL BOTTONE (APPARIZIONE FLUIDA) */
.btn-overlay {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: translateY(15px); /* Parte leggermente più in basso */
}

.marchio-card:hover .btn-overlay {
    opacity: 1;
    transform: translateY(0); /* Torna alla posizione originale */
}

/* Utility per mostrare il cursore a mano su tutta la card */
.cursor-pointer {
    cursor: pointer;
}