/* ══════════════════════════════════════════════════════════════
   CODER DROP — MOBILE RESPONSIVE CSS  (final)
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — hide desktop header, let JS-topbar take over
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #cd-main-header { display: none !important; }
    .cd-sticky-bar  { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   REVOLUTION SLIDER — tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .forcefullwidth_wrapper_tp_banner,
    .rev_slider_wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: 380px !important;
        width: 100% !important;
        overflow: hidden !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .rev_slider {
        height: auto !important;
        min-height: 0 !important;
    }
    /* Kill the empty space the theme/RS injects AFTER the slider */
    .forcefullwidth_wrapper_tp_banner + *,
    .rev_slider_wrapper + *,
    #rev_slider_wrapper + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* The outer div RS wraps everything in */
    .tp-fullwidth-forcer {
        height: 0 !important;
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   REVOLUTION SLIDER — force images visible on ALL mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .tp-caption img,
    .tp-parallax-wrap img,
    .rev_slider img,
    .tp-caption > img {
        display:     block      !important;
        visibility:  visible    !important;
        opacity:     1          !important;
    }
}
@media (max-width: 575px) {
    .forcefullwidth_wrapper_tp_banner,
    .rev_slider_wrapper {
        max-height: 320px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .tp-caption h1, .tp-caption h2 { font-size: 20px !important; line-height: 1.3 !important; }
    .tp-caption p  { font-size: 12px !important; }

    .tp-caption img,
    .tp-parallax-wrap img {
        max-width: 130px !important;
        width:     auto  !important;
        height:    auto  !important;
    }
}
@media (max-width: 400px) {
    .forcefullwidth_wrapper_tp_banner,
    .rev_slider_wrapper {
        height: 360px !important;
        min-height: 360px !important;
    }
    .rev_slider { height: 360px !important; }
    .tp-caption img, .tp-parallax-wrap img { max-width: 100px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HOSTING PLANS — control bar
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .cd-control-bar { padding: 14px 12px; border-radius: 14px; }
    .cd-control-inner { flex-direction: column; align-items: center; gap: 10px; }
    .cd-period-group  { order: -1; justify-content: center; flex-wrap: wrap; }
    .cd-currency-group, .cd-loc-group { flex: 0 0 auto; justify-content: center; }
    .cd-control-divider { display: none; }
    .cd-period-pill { padding: 8px 14px; font-size: 12px; }
    .cd-cur-btn     { padding: 7px 14px; font-size: 12px; }
    .cd-loc-btn     { padding: 6px 11px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   PRICING CARDS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .cd-plan-card          { margin-bottom: 20px; }
    .cd-plan-card.featured { transform: none; }
    .cd-price-main         { font-size: 30px; }
    .cd-plan-top           { padding: 20px 16px 16px; }
    .cd-plan-body          { padding: 14px 16px; }
    .cd-plan-footer        { padding: 12px 16px 18px; }
    .cd-feat-list li       { font-size: 12.5px; }
    .cd-order-btn          { padding: 11px 16px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   DOMAIN SEARCH SECTION
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .cd-domain-section { padding: 40px 0 35px; }
    .cd-domain-title   { font-size: 24px !important; }
    .cd-search-wrap input  { padding: 13px 16px; font-size: 14px; }
    .cd-search-btn     { padding: 13px 18px; font-size: 13px; }
    .cd-tld-pill       { min-width: 76px; padding: 8px 12px; }
    .cd-domain-actions { flex-direction: column; align-items: center; gap: 8px; }
    .cd-dom-btn        { width: 100%; max-width: 300px; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   OFFERS PAGE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .offer-hero { padding: 90px 0 65px; }
    .offer-main-title { font-size: 30px; }
}
@media (max-width: 575px) {
    .offer-hero { padding: 78px 0 50px; }
    .offer-main-title { font-size: 26px; }
    /* Keep countdown on ONE line */
    .offer-countdown    { gap: 6px; flex-wrap: nowrap; }
    .countdown-box      { padding: 10px 8px; flex: 1; min-width: 0; }
    .countdown-box .num { font-size: 22px; }
    .countdown-box .lbl { font-size: 9px; letter-spacing: 0; }
    .offer-cta-btn      { width: 100%; justify-content: center; padding: 12px 20px; }
    .offer-section-wrap { padding: 20px 14px; border-radius: 16px; }
    .offer-section-header h2 { font-size: 22px; }
    .op-card   { padding: 20px 16px; }
    .op-price  { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .comp-table th     { padding: 10px 6px; }
    .comp-table th .t-name  { font-size: 12px; }
    .comp-table th .t-price { font-size: 15px; }
    .comp-table td     { padding: 8px 6px; font-size: 12px; }
    .t-order           { padding: 4px 10px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    footer .col-md-4,
    footer .col-xs-4 { width:100% !important; flex:0 0 100% !important; max-width:100% !important; margin-bottom:20px; }
    footer .subfooter { text-align: center; }
    footer .subfooter .col-md-8,
    footer .subfooter .col-md-4 { text-align: center !important; }
}
@media (max-width: 575px) {
    footer .container { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   GENERAL SECTIONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pg-section     { padding: 36px 0; }
    section h2      { font-size: 24px !important; }
    section p.lead  { font-size: 14px !important; }
    .container      { padding-left: 16px; padding-right: 16px; }
    .no-top.no-bottom h1 { font-size: 28px !important; }

    /* ── Hosting / inner page hero banner with data-bgimage ── */
    /* The section itself — override Designesia JS min-height   */
    section.no-top.no-bottom[data-bgimage],
    section.no-top.no-bottom[data-stellar-background-ratio] {
        min-height: 0 !important;
        height: auto !important;
    }
    /* The overlay wrapper */
    section.no-top.no-bottom[data-bgimage] .overlay-gradient,
    section.no-top.no-bottom[data-bgimage] > div:first-child {
        min-height: 0 !important;
        height: auto !important;
    }
    /* .center-y — Designesia sets this to display:table height:100% */
    section.no-top.no-bottom[data-bgimage] .center-y {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 0 !important;
    }
    /* Remove the mt50 extra top margin on mobile */
    section.no-top.no-bottom[data-bgimage] .center-y.mt50 {
        margin-top: 0 !important;
    }
}
@media (max-width: 480px) {
    body  { font-size: 14px; }
    h1    { font-size: 24px !important; }
    h2    { font-size: 22px !important; }
    h3    { font-size: 18px !important; }
    .btn  { padding: 10px 20px; font-size: 13px; }
    section.no-top.no-bottom[data-bgimage] .center-y {
        padding: 8px 0 !important;
    }
    section.no-top.no-bottom[data-bgimage] h1 { font-size: 22px !important; }
    section.no-top.no-bottom[data-bgimage] p.lead { font-size: 13px !important; }
}
@media (max-width: 480px) {
    body  { font-size: 14px; }
    h1    { font-size: 24px !important; }
    h2    { font-size: 22px !important; }
    h3    { font-size: 18px !important; }
    .btn  { padding: 10px 20px; font-size: 13px; }
}