/* --- Tintsabo SloLuxeGuide --- */
/* File: tintsabo3_064636.css */
/* Description: Media queries for responsiveness and custom animations. */
/* Unique ID ($seed): 064636 */
/* --- */

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Helper class to apply animation via JS */
.tintsabo-animate {
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* ------------------------- */
/* 2. Mobile Navigation Styles */
/* ------------------------- */
.tintsabo-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--tintsabo-color-dark-bg);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.tintsabo-mobile-nav.active {
    transform: translateX(0);
}

.tintsabo-mobile-nav ul {
    list-style: none;
    padding: 0;
}

.tintsabo-mobile-nav li {
    margin: var(--tintsabo-spacing-lg) 0;
}

.tintsabo-mobile-nav a {
    font-family: var(--tintsabo-font-heading);
    font-size: 2rem;
    color: var(--tintsabo-color-light-text);
    text-decoration: none;
}
.tintsabo-mobile-nav a:hover {
    color: var(--tintsabo-color-primary-gold);
}


/* ------------------------- */
/* 3. Media Queries (Desktop First Approach) */
/* ------------------------- */

/* -- Large Laptops (up to 1200px) -- */
@media (max-width: 1200px) {
    .tintsabo-container {
        max-width: 960px;
    }
}

/* -- Tablets (up to 992px) -- */
@media (max-width: 992px) {
    .tintsabo-header-nav {
        display: none; /* Hide desktop nav */
    }
    .tintsabo-mobile-toggle {
        display: block; /* Show hamburger menu */
    }
    .tintsabo-hero-title {
        font-size: 2.8rem;
    }
    .tintsabo-hero-subtitle {
        font-size: 1.1rem;
    }
    .tintsabo-hotel-listing .row {
        flex-direction: column;
    }
    .tintsabo-hotel-listing .col-lg-4, 
    .tintsabo-hotel-listing .col-lg-8 {
        width: 100%;
    }
     .tintsabo-hotel-listing img {
        margin-bottom: var(--tintsabo-spacing-lg);
    }
}

/* -- Mobile Landscape & Large Phones (up to 768px) -- */
@media (max-width: 768px) {
    .tintsabo-page-title {
        font-size: 2.5rem;
    }
    .tintsabo-section-title {
        font-size: 2rem;
    }
    .tintsabo-hero-section {
        height: 70vh;
    }
    .tintsabo-hero-title {
        font-size: 2.2rem;
    }
    .row {
        flex-direction: column;
    }
     /* Remove width constraints for all columns */
    .row > div[class*="col-"] {
        width: 100%;
        margin-bottom: var(--tintsabo-spacing-lg);
    }
    .tintsabo-cookie-content {
        flex-direction: column;
        text-align: center;
    }
    .tintsabo-footer .row > div {
        text-align: center;
    }
    .tintsabo-footer-socials {
        justify-content: center;
        display: flex;
    }
}

/* -- Mobile Portrait (up to 576px) -- */
@media (max-width: 576px) {
    .tintsabo-page-title {
        font-size: 2rem;
    }
    .tintsabo-hero-title {
        font-size: 1.8rem;
    }
     .tintsabo-hero-subtitle {
        font-size: 1rem;
    }
    .tintsabo-header .tintsabo-container,
    .tintsabo-cookie-content {
        flex-direction: column;
        gap: var(--tintsabo-spacing-md);
    }
    .tintsabo-header-actions {
        margin-top: var(--tintsabo-spacing-sm);
    }
    .tintsabo-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    .tintsabo-mobile-nav a {
        font-size: 1.8rem;
    }
}