/* File: css/TheLivingItaly3_084130.css */
/* Media queries for responsiveness and keyframe animations. */

/* --- Keyframe Animations --- */
@keyframes TheLivingItaly-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes TheLivingItaly-fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes TheLivingItaly-zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.TheLivingItaly-animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.TheLivingItaly-animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

.TheLivingItaly-fade-in-up {
    transform: translateY(50px);
}

/* --- Media Queries --- */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .TheLivingItaly-nav-main { display: none; } /* Hide desktop nav */

    .TheLivingItaly-mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10;
    }
    .TheLivingItaly-mobile-menu-btn span {
        width: 100%;
        height: 3px;
        background: var(--TheLivingItaly-dark-color);
        border-radius: 10px;
        transition: all 0.3s linear;
    }
    
    h1, .display-4 { font-size: 2.5rem; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .TheLivingItaly-hero-section { padding: 80px 0; }
    h1, .display-4 { font-size: 2rem; }
    
    .TheLivingItaly-cookie-banner-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .TheLivingItaly-cookie-banner-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .TheLivingItaly-contact-section .row {
        flex-direction: column-reverse;
    }
}