/* Colori personalizzati */
:root {
    --color-white: #FFFFFF;
    --color-orange: #FFA500; /* Arancio */
    --color-green: #32CD32; /* Verde LimeGreen per un tocco vivace */
    --color-blue: #87CEEB; /* Azzurro SkyBlue */
    --color-dark-blue: #2c3e50; /* Un blu scuro per il contrasto */
}

.text-orange { color: var(--color-orange) !important; }
.bg-orange { background-color: var(--color-orange) !important; }
.btn-orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
}
.btn-orange:hover {
    background-color: #e69500; /* Arancio più scuro all'hover */
    border-color: #e69500;
    color: var(--color-white);
}
.btn-outline-light {
    border-color: var(--color-white);
    color: var(--color-white);
}
.btn-outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-orange);
}


.text-green { color: var(--color-green) !important; }
.bg-green { background-color: var(--color-green) !important; }
.btn-green {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}
.btn-green:hover {
    background-color: #28a745; /* Verde più scuro all'hover */
    border-color: #28a745;
    color: var(--color-white);
}

.text-blue { color: var(--color-blue) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.btn-blue {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}
.btn-blue:hover {
    background-color: #6aaddf; /* Azzurro più scuro all'hover */
    border-color: #6aaddf;
    color: var(--color-white);
}

.bg-light-green { background-color: #e6ffe6; /* Un verde molto chiaro */ }
.bg-dark-blue { background-color: var(--color-dark-blue) !important; }
.text-dark-blue { color: var(--color-dark-blue) !important; }


/* Stili generali */
body {
    font-family: 'Arial', sans-serif;
    padding-top: 70px; /* Per compensare il fixed header */
}

/* Hero Section */
#hero {
    background: linear-gradient(45deg, var(--color-orange), var(--color-blue));
    /* Puoi aggiungere un'immagine di sfondo qui per un effetto migliore */
    /* background-image: url('path/to/your/hero-bg.jpg'); */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden; /* Nasconde gli elementi che escono dal viewport durante le animazioni */
}

/* Animazione di sfondo per Hero (opzionale, più avanzata) */
/*
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(255,165,0,0.3) 0%, transparent 50%),
                radial-gradient(circle at bottom right, rgba(135,206,235,0.3) 0%, transparent 50%);
    animation: pulseBackground 10s infinite alternate;
}

@keyframes pulseBackground {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
*/

/* Navbar */
.navbar-brand {
    font-size: 1.8rem;
}
.nav-link {
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: var(--color-orange) !important; /* Cambia colore all'hover */
}

/* Sezioni */
section {
    padding: 60px 0;
}

/* Immagini con ombra */
.img-fluid.rounded.shadow-lg, .img-fluid.rounded.shadow {
    transition: transform 0.3s ease-in-out;
}
.img-fluid.rounded.shadow-lg:hover, .img-fluid.rounded.shadow:hover {
    transform: scale(1.02);
}

/* Slider Prodotti */
.carousel-item {
    padding: 40px 0;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 15px;
}

/* Footer */
footer {
    background-color: #343a40 !important; /* Grigio scuro per il footer */
}
footer a {
    color: var(--color-white);
}
footer a:hover {
    color: var(--color-orange);
}
.social-icons a {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}
.social-icons a:hover {
    color: var(--color-orange) !important;
}

/* Modale */
.modal-header {
    border-bottom: none;
}
.modal-footer {
    border-top: none;
}