/* =========================================
   LOTTIE COMPARISON SECTION
========================================= */

/* MAIN INNER LAYOUT */
.weblodge-lottie-comparison-inner {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px;
    align-items: stretch;
}

/* =========================================
   TEXT SECTION (LEFT)
========================================= */

.text-section-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Layout only - heading style from global .wla-big-text
   (the span keeps its cyan from the global file) */
.text-section-page h2 {
    margin: 0 0 16px;
    text-align: center;
}

/* Layout only - style from global .wla-subtittle-text */
.text-section-page h5 {
    margin: 0 0 12px;
    text-align: center;
}

/* Layout only - style from global .wla-description-text */
.text-section-page h6 {
    max-width: 90%;
    margin: 0;
    text-align: center;
}

/* =========================================
   CARDS WRAPPER (RIGHT)
========================================= */

.cards-wrapper-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    position: relative;
    z-index: 2;
}

.card-container-page {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================
   COMPARISON CARD
========================================= */

.lottie-card-page {
    width: 100%;
    height: 270px;
    display: flex;
    flex-direction: column;
}

/* =========================================
   LOTTIE ANIMATION
========================================= */

.lottie-card-page .top {
    flex: 0 0 75%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.lottie-card-page .top dotlottie-wc {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================
   CARD TEXT
========================================= */



.lottie-card-page .heading {
    text-align: center;
    width: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 600;
    color: #26c6f9;
    margin-top: 2px;
    padding: 0 8px;
    transition: color 0.3s ease;
}

.lottie-card-page:hover .heading {
    color: #ffffff;
}

/* Layout only - card description style from global .wla-card-description-text.
   The size heading above keeps its own rule (it is the compared file size). */
.lottie-card-page .description {
    text-align: center;
    width: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    flex: 0 0 auto;
    padding: 0 10px 10px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .weblodge-lottie-comparison-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .text-section-page {
        align-items: center;
        text-align: center;
    }

    /* Heading text sizes now come from the global file */

    .cards-wrapper-page {
        grid-template-columns: repeat(3, 1fr);
    }

    .lottie-card-page {
        height: 260px;
    }

    .lottie-card-page .heading {
        font-size: 19px;
    }

    /* Card description size now comes from the global file */
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .weblodge-lottie-comparison-inner {
        gap: 25px;
    }

    .cards-wrapper-page {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* Heading text sizes now come from the global file */

    .text-section-page h6 {
        max-width: 95%;
    }

    .lottie-card-page {
        height: 220px;
    }

    .lottie-card-page .heading {
        font-size: 18px;
    }

    /* Card description size now comes from the global file */
}