/* ===== TOURS ===== */

.experience-tours {

    width: min(1200px, 90%);
    margin: 4rem auto 0;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

}

.tour-card {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 12px;

    text-decoration: none;

}

.tour-card img {

    width: 100%;
    height: 300px;

    object-fit: cover;

    display: block;

}

.tour-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 1.5rem;

}


/* -----   -overlay-    ----  */
.tour-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 1.5rem;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 0.25),
        transparent
    );

}

.tour-overlay h3 {

    color: white;

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: .35rem;

}

.tour-overlay span {

    color: white;

    font-size: .95rem;

    transition: .3s ease;

}




.tour-card img {

    width: 100%;
    height: 300px;

    object-fit: cover;

    display: block;

    transition: transform .5s ease;

}

.tour-card:hover img {

    transform: scale(1.05);

}

.tour-card:hover .tour-overlay span {

    color: var(--color-accent);

}


/* ===== CTA CAROUSEL ===== */

.cta-gallery-top {

    overflow: hidden;

    width: 100%;

    margin-bottom: 4rem;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

}

.cta-track {

    display: flex;

    gap: 1rem;

}

.cta-track img {

    width: 320px;

    height: 220px;

    object-fit: cover;

    border-radius: 12px;

    flex-shrink: 0;

}

/* ----- SCROLLING ANIMATION MOVE----- */
.cta-track {

    display: flex;

    gap: 1rem;

    width: max-content;

    animation: cta-scroll 60s linear infinite;

}

@keyframes cta-scroll {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}

.cta-track:hover {

    animation-play-state: paused;

}