/* ------------------------ */
/* Small Mobile: 0 – 480px  */
/* ------------------------ */
@media (max-width: 480px) {
    /* Counter cards: 1 column on small mobile */
    .elementor-element-43bbe6f,
    .elementor-element-70b3a4b {
        grid-template-columns: 1fr !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure counter card containers don't overflow */
    .elementor-element-1bdd699,
    .elementor-element-335f27e {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }
    
    /* Individual counter boxes */
    .gem-counter-box {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Tab/accordion panel headings - increase line-height */
    .gem-tta-panel .styled-subtitle,
    .gem-tta-panel-body .styled-subtitle,
    .styled-subtitle, #thegem-heading-eaa0e93 {
        line-height: 35px !important;
    }
    
    /* 3-column cards: 1 column on small mobile, centered */
    .elementor-element-437f92a {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .elementor-element-437f92a > * {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure parent container has proper padding */
    .elementor-element-633d1ac {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    
    /* Flip container adjustments for small mobile */
    .flipper {
        height: 200px;
    }
    
    .front, .back {
        padding: 15px;
    }
    
    /* Reduce font sizes on flip cards */
    .front h2, .back h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    .back p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Adjust image sizes in flip cards */
    .flip-container .front img,
    .flip-container .font img {
        width: 20% !important;
        max-width: 50px !important;
        height: auto !important;
    }
    
    /* 1 column on small mobile - centered */
    .elementor-element-f602954,
    .elementor-element-d7eda3e {
        align-items: center !important;
    }
    
    .elementor-element-f602954 > .flip-container,
    .elementor-element-d7eda3e > .flip-container {
        flex: 0 1 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .gem-tta-panels .gem-tta-panel-respbody{
        padding: 0 !important;
    }
}

/* ----------------------------------- */
/* Mobile General: 481px – 768px       */
/* ----------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    .gem-tta-panels .gem-tta-panel-respbody{
        padding: 0 !important;
    }
    /* Counter cards: 1 column on mobile */
    .elementor-element-43bbe6f,
    .elementor-element-70b3a4b {
        grid-template-columns: 1fr !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure counter card containers don't overflow */
    .elementor-element-1bdd699,
    .elementor-element-335f27e {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }
    
    /* 3-column cards: 1 column on mobile, centered */
    .elementor-element-437f92a {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .elementor-element-437f92a > * {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure parent container has proper padding */
    .elementor-element-633d1ac {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    
    /* Flip container adjustments for mobile */
    .flipper {
        height: 220px;
    }
    
    .front, .back {
        padding: 18px;
    }
    
    .front h2, .back h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    .back p {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    
    .flip-container .front img,
    .flip-container .font img {
        width: 22% !important;
        max-width: 60px !important;
        height: auto !important;
    }
    
    /* 1 column on larger mobile - centered */
    .elementor-element-f602954,
    .elementor-element-d7eda3e {
        align-items: center !important;
    }
    
    .elementor-element-f602954 > .flip-container,
    .elementor-element-d7eda3e > .flip-container {
        flex: 0 1 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* ------------------------------ */
/* Mobile (global): ≤768px       */
/* ------------------------------ */
@media (max-width: 768px) {
    /* CF7 submit button width on mobile */
    .elementor-3543 .elementor-element.elementor-element-5cb39f3 .wpcf7-submit {
        width: 55% !important;
    }
    
    /* Counter cards: 1 column on all mobile */
    .elementor-element-43bbe6f,
    .elementor-element-70b3a4b {
        grid-template-columns: 1fr !important;
    }
    
    
    /* Enable tap on mobile instead of hover */
    .flip-container {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 1 column on all mobile - centered */
    .elementor-element-f602954,
    .elementor-element-d7eda3e {
        align-items: center !important;
    }
    
    .elementor-element-f602954 > .flip-container,
    .elementor-element-d7eda3e > .flip-container {
        flex: 0 1 100% !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------- */
/* Tablets: 769px – 992px              */
/* ----------------------------------- */
@media (min-width: 769px) and (max-width: 992px) {
    /* 3-column cards: 1 column in this range, centered */
    .elementor-element-437f92a {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    
    .elementor-element-437f92a > * {
        max-width: 400px !important;
    }
}

/* ----------------------------------- */
/* Tablets: 769px – 1024px             */
/* ----------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Counter cards: 2 columns on tablets */
    .elementor-element-43bbe6f,
    .elementor-element-70b3a4b {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 3-column cards: 1 column on tablets, centered */
    .elementor-element-437f92a,
    .elementor-element-0923401 {
        grid-template-columns: 1fr !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-items: center !important;
    }
    
    
    
    /* Flip container adjustments for tablets */
    .flipper {
        height: 230px;
    }
    
    .front, .back {
        padding: 20px;
    }
    
    .front h2, .back h2 {
        font-size: 22px !important;
    }
    
    .back p {
        font-size: 16px !important;
    }
    
    /* 2 columns on tablets */
    .elementor-element-f602954 > .flip-container,
    .elementor-element-d7eda3e > .flip-container {
        flex: 0 1 calc(50% - 20px) !important;
        min-width: calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
    }
    
    /* Reduce image size for 2-column layout */
    .flip-container .front img,
    .flip-container .font img {
        width: 25% !important;
    }
}

/* ------------------------------- */
/* Desktop (global): ≥1024px       */
/* ------------------------------- */
@media (min-width: 1024px) {

}

/* ----------------------------------- */
/* Desktop Baseline: 1025px – 1279px   */
/* ----------------------------------- */
@media (min-width: 1025px) and (max-width: 1279px) {
    /* Counter cards: 2 columns on smaller desktop */
    .elementor-element-43bbe6f,
    .elementor-element-70b3a4b {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 3-column cards: keep 3 columns on smaller desktop */
    .elementor-element-437f92a {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    
    .elementor-element-394a7f9{
        margin-top: 0 !important;
    }
    
    /* 2 columns on smaller desktop for cleaner 2x2 grid */
    .elementor-element-f602954 > .flip-container,
    .elementor-element-d7eda3e > .flip-container {
        flex: 0 1 calc(50% - 20px) !important;
        min-width: calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
    }
    
    /* Reduce image size for 2-column layout */
    .flip-container .front img,
    .flip-container .font img {
        width: 25% !important;
    }
}

/* ------------------------------- */
/* Small Desktop (global): ≥1280px */
/* ------------------------------- */
@media (min-width: 1280px) {

}

/* ----------------------------------- */
/* Small Desktop: 1280px – 1439px      */
/* ----------------------------------- */
@media (min-width: 1280px) and (max-width: 1439px) {
    /* Increase counter text height to accommodate 3-line wrapping */
    .gem-counter-text {
        min-height: 4.5em !important;
    }
    
    .elementor-element-394a7f9{
        margin-top: 0 !important;
    }
    
    
    /* 4 columns on small desktop, but adjust if needed */
    .elementor-element-f602954 > .flip-container,
    .elementor-element-d7eda3e > .flip-container {
        flex: 0 1 calc(25% - 20px) !important;
        min-width: 240px !important;
        max-width: calc(25% - 20px) !important;
    }
}

/* ------------------------------- */
/* Large Desktop (global): ≥1440px */
/* ------------------------------- */
@media (min-width: 1440px) {

}

/* ----------------------------------- */
/* Large Desktop: 1440px – 1919px      */
/* ----------------------------------- */
@media (min-width: 1440px) and (max-width: 1919px) {

}

/* ------------------------ */
/* Ultra Wide: ≥1920px      */
/* ------------------------ */
@media (min-width: 1920px) {

}