/* ============================================================
   Online Tour King — custom + responsive overrides
   Loaded AFTER style.css. The base template shipped with NO media
   queries, so all mobile/tablet behaviour lives here.
   ============================================================ */

/* ---------- Pagination polish (Bootstrap markup comes from otk_pagination_config) ---------- */
.pagination { gap: 4px; }
.pagination .page-link { color: #0a4ed1; border-radius: 6px; border-color: #dbe4f3; min-width: 40px; text-align: center; }
.pagination .page-item.active .page-link { background: #0a4ed1; border-color: #0a4ed1; color: #fff; }
.pagination .page-link:hover { background: #eef4ff; }

/* never let anything cause horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ============================================================
   TABLET  (<= 991px)
   ============================================================ */
@media (max-width: 991.98px) {
    /* listing: sidebar + content stack full width */
    .allagents_list .sticky,
    .allagents_list .filter-column,
    .allagents_list .colLeft {
        position: static !important;
        width: 100% !important;
        float: none !important;
        top: auto !important;
        margin-bottom: 24px;
    }
    .allagents_list .agnt_lists,
    .allagents_list .pkgDtl {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
    }

    /* banner hero text down-scales */
    .display-1 { font-size: 2.4rem; }
    .bannerNrml { min-height: 200px; }
    .bannerNrml h1 { font-size: 26px; }

    /* featured promo block padding */
    .sectionb-bg { padding: 40px 20px !important; background-size: cover !important; }
    .sectionb-bg-col02, .sectionb-bg-col { padding: 2rem !important; }

    /* remove the giant decorative overlay that forces height on small screens */
    #Bannerslider-section::after { display: none; }
}

/* ============================================================
   MOBILE  (<= 767px)
   ============================================================ */
@media (max-width: 767.98px) {
    /* top utility bar: stack + center, allow wrapping */
    .cta { text-align: center; padding: 6px 0; }
    .cta .p-0 { width: 100%; }
    .social { justify-content: center !important; flex-wrap: wrap; padding-right: 0 !important; gap: 6px; }
    .social .btn-secondary { margin-left: 0 !important; }
    .bta-cta { font-size: 12px; }

    /* top utility bar: hide the redundant "Plan Your Trip" pill (it's in the nav) */
    .cta .btn-secondary { display: none; }

    /* header bar: logo left, toggler right */
    .container-fluid.header-bar { padding: 8px 15px !important; flex-wrap: wrap; }
    .navigtaion-wrapper { width: 100%; }
    .navbar { width: 100%; }
    .navbar-nav { padding: 10px 0; }
    .navbar-nav .nav-link { padding: 8px 4px; }
    .ml-auto.ms-5 { margin-left: 0 !important; }
    /* login control: show icon only so it never overflows the row */
    .navigtaion-wrapper .ml-auto.ms-5 .nav-link span { display: none; }

    /* inner-page banner heading: wrap instead of clipping off-screen */
    .bannerNrml { padding: 22px 12px; }
    .bannerNrml .container { max-width: 100%; padding: 0 12px; }
    .bannerNrml h1 { font-size: 22px !important; white-space: normal; word-break: break-word; line-height: 1.25; }
    .bannerNrml h1:after { margin: 0 auto; }

    /* hero — keep everything inside the viewport (base template is right-aligned & oversized) */
    .bannerNrml { overflow-x: hidden; }
    .bannerNrml .container { padding-left: 15px !important; padding-right: 15px !important; }
    .bannerNrml .row { margin-left: 0 !important; margin-right: 0 !important; }
    .bannerNrml [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
    .silde-text, .display-1, .slide-tex_2, .silde-tex_3 { word-break: break-word; }
    .slide-content, .slide-content p { max-width: 100%; }
    .display-1 { font-size: 2rem; text-align: left; line-height: 1; }
    .slide-tex_2 { font-size: 1.3rem !important; text-align: left !important; }
    .silde-tex_3 { font-size: 13px; white-space: normal !important; text-align: left; }
    .slide-content hr { position: static; width: 140px; height: 5px; margin: 10px 0; }
    .blog-serach-box, .custom-search-form, .custom-search-form form { width: 100% !important; max-width: 100% !important; }
    #Bannerslider-section { margin-top: 20px; }

    /* stats strip */
    .top-search-features .search-body { font-size: 14px; }
    .top-search-features .text-end { text-align: center !important; }

    /* section headings / animated titles shrink */
    .animate-title { font-size: 22px !important; line-height: 1.3; }
    .destination-head { text-align: center; }

    /* package listing card: image on top, details below */
    .packg_item.row { flex-direction: column; }
    .packg_item .packg_thumb,
    .packg_item .item_detail { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .packg_item .packg_thumb img { width: 100%; object-fit: cover; }
    /* inner rows (details/buttons and seller/price) must stack, not sit side-by-side */
    .packg_item [class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    .item-description .col-md-4 { margin-top: 12px; }
    .item-footer .price { text-align: left !important; margin-top: 6px; }
    .item-footer .price p { white-space: normal; }

    /* agent listing card: logo on top */
    .result_list_item.row { flex-direction: column; text-align: center; }
    .result_list_item .agent_logo,
    .result_list_item .agent_detail { width: 100% !important; flex: 0 0 100% !important; }
    .result_list_item .review-star { justify-content: center; display: flex; }

    /* result count header stacks */
    .result-count { text-align: center; }
    .result-count h2 { margin-bottom: 6px; }

    /* package detail thumb + tabs */
    .pkgDtl .pkg_thumb img { width: 100%; }
    .pkg_allinfo .nav-tabs { flex-wrap: wrap; }
    .pkg_allinfo .nav-tabs .nav-link { padding: 6px 10px; font-size: 14px; }

    /* footer columns spacing */
    .footerTop .row > [class*="col-"] { margin-bottom: 26px; }
    .copyright .text-end { text-align: center !important; margin-top: 10px; }
    .copyright .col-md-6 { text-align: center; }

    /* forms: full-width buttons feel better on phones */
    .popupForm .btn-lg { width: 100%; }
}

/* ============================================================
   SMALL PHONES  (<= 479px)
   ============================================================ */
@media (max-width: 479.98px) {
    .display-1 { font-size: 1.6rem; }
    .bannerNrml h1 { font-size: 19px !important; }
    .animate-title { font-size: 18px !important; }
    .social .call, .bta-cta { font-size: 11px; }
}