/* ==========================================================================
   QRC Solutionz — Responsive Stylesheet
   Loaded AFTER all other stylesheets so rules can override where needed.
   ONLY contains media-query-scoped rules; desktop layout is untouched.
   ========================================================================== */


/* ==========================================================================
   MOBILE / TABLET HEADER & NAVIGATION  (≤ 991.98px only)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* ── Header bar ── */
  .page_header .container-fluid.px-5 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .page_header::after {
    display: none !important;
  }

  /* ── Navbar bar ── */
  .page_header .navbar {
    padding: 8px 0;
    position: relative;
  }

  .page_header .navbar-brand {
    max-width: 130px;
    padding: 0;
    flex-shrink: 0;
  }

  .page_header .navbar-brand img,
  .page_header .navbar-brand .custom-logo {
    max-height: 36px;
    width: auto;
  }

  /* ── Hamburger button ── */
  .page_header .navbar-toggler {
    border: none !important;
    padding: 6px;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    z-index: 999;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent !important;
  }

  .page_header .navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
  }

  .page_header .navbar-toggler-icon {
    width: 24px;
    height: 24px;
    background-size: 100%;
  }

  /* ── Override Bootstrap collapse — slide-in panel instead ── */
  .page_header #navbarSupportedContent {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: -105% !important;
    left: auto !important;
    bottom: auto !important;
    width: 88vw;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 1051;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    flex-basis: auto !important;
    flex-grow: 0 !important;
  }

  .page_header #navbarSupportedContent.qrc-panel-open {
    right: 0 !important;
  }

  /* ── Close button (injected by JS) ── */
  .qrc-mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
    position: relative;
    z-index: 2;
    min-height: 52px;
    box-sizing: border-box;
  }

  .qrc-mobile-menu-close button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    line-height: 1;
    color: #23284a;
    -webkit-tap-highlight-color: transparent;
  }

  .qrc-mobile-menu-close button svg {
    width: 22px;
    height: 22px;
    stroke: #23284a;
    display: block;
  }

  /* ── Backdrop overlay (injected by JS) ── */
  .qrc-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .qrc-mobile-overlay.active {
    display: block;
    opacity: 1;
  }

  /* ── Lift header above overlay when mobile menu is open ── */
  body.qrc-mobile-menu-open .page_header {
    z-index: 1052 !important;
  }

  /* ── Nav list ── */
  .page_header #navbarSupportedContent .navbar-nav {
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    display: flex !important;
  }

  .page_header #navbarSupportedContent .navbar-nav .nav-item {
    border-bottom: 1px solid #f0f0f0;
    margin: 0 !important;
    width: 100%;
    position: relative;
  }

  .page_header #navbarSupportedContent .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }

  /* ── Nav links — touch-friendly ── */
  .page_header #navbarSupportedContent .navbar-nav .nav-link {
    padding: 15px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #23284a !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    line-height: 1.3;
    min-height: 50px;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: normal;
    word-break: break-word;
  }

  .page_header #navbarSupportedContent .navbar-nav .nav-link:hover,
  .page_header #navbarSupportedContent .navbar-nav .nav-link:focus {
    background: #f8f9fb;
    color: #21afe3 !important;
  }

  .page_header #navbarSupportedContent .navbar-nav .nav-link:active {
    background: #eef5fc;
  }

  /* ── Dropdown toggle arrow (chevron) ── */
  .page_header #navbarSupportedContent .navbar-nav .dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border: none !important;
    border-right: 2px solid #8a8fa3 !important;
    border-bottom: 2px solid #8a8fa3 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 2px;
    vertical-align: middle !important;
    background: none !important;
  }

  .page_header #navbarSupportedContent .navbar-nav .nav-item.qrc-submenu-open > .dropdown-toggle::after {
    transform: rotate(-135deg) !important;
  }

  /* ── Standard Bootstrap dropdowns (Company, Solutions, Learning, Resources) ── */
  .page_header #navbarSupportedContent .nav-item.dropdown:not(.qrc-megamenu-trigger) > .dropdown-menu {
    position: static !important;
    float: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f8f9fb !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    transform: none !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page_header #navbarSupportedContent .nav-item.dropdown.qrc-submenu-open:not(.qrc-megamenu-trigger) > .dropdown-menu {
    display: block !important;
  }

  .page_header #navbarSupportedContent .dropdown-menu .dropdown-item {
    padding: 14px 18px 14px 32px;
    font-size: 14px;
    font-weight: 400;
    color: #3a3f5c;
    border-bottom: 1px solid #eef0f4;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: normal;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
  }

  .page_header #navbarSupportedContent .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
  }

  .page_header #navbarSupportedContent .dropdown-menu .dropdown-item:hover,
  .page_header #navbarSupportedContent .dropdown-menu .dropdown-item:focus {
    background: #eef5fc;
    color: #1565c0;
  }

  .page_header #navbarSupportedContent .dropdown-menu .dropdown-item:active {
    background: #ddeaf8;
    color: #1565c0;
  }

  /* ── Mega Menu wrappers inside mobile panel ── */
  .page_header #navbarSupportedContent .qrc-megamenu-wrapper {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: none !important;
    top: auto !important;
    left: auto !important;
  }

  .page_header #navbarSupportedContent .nav-item.qrc-megamenu-trigger.qrc-submenu-open > .qrc-megamenu-wrapper {
    display: block !important;
  }

  .page_header #navbarSupportedContent .qrc-megamenu {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: auto !important;
    flex-direction: column !important;
    display: flex !important;
  }

  /* ── Mega menu backdrop — never show inside mobile panel ── */
  .qrc-megamenu-backdrop {
    display: none !important;
  }

  /* ── Mega menu sidebar ── */
  .page_header #navbarSupportedContent .qrc-megamenu__sidebar {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #e9ecf1;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: column;
    background: #f8f9fb;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__sidebar-item {
    padding: 13px 18px 13px 32px;
    font-size: 14px;
    min-height: 44px;
    border-left-width: 3px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__sidebar-item svg {
    width: 14px;
    height: 14px;
  }

  /* ── Mega menu content area ── */
  .page_header #navbarSupportedContent .qrc-megamenu__content {
    padding: 16px 18px !important;
    display: block !important;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__content-title {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__links {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__link {
    padding: 14px 8px 14px 0;
    font-size: 13px;
    border-bottom-color: #eef0f4;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__link:nth-child(odd) {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 8px !important;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__link svg {
    width: 14px;
    height: 14px;
  }

  /* ── Mega menu featured card ── */
  .page_header #navbarSupportedContent .qrc-megamenu__featured {
    width: 100% !important;
    min-width: 0 !important;
    border-left: none !important;
    border-top: 1px solid #e9ecf1;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__featured-img {
    height: 120px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__featured-title {
    font-size: 15px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__featured-desc {
    font-size: 13px;
  }

  /* ── Mega menu "Back" button ── */
  .page_header #navbarSupportedContent .qrc-megamenu-mobile-back {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #21afe3;
    cursor: pointer;
    border-bottom: 1px solid #e9ecf1;
    background: #f8f9fb;
    -webkit-tap-highlight-color: transparent;
  }

  .page_header #navbarSupportedContent .qrc-megamenu-mobile-back svg {
    width: 16px;
    height: 16px;
    stroke: #21afe3;
    transform: rotate(180deg);
  }

  /* ── Regulatory panel mobile columns ── */
  .page_header #navbarSupportedContent #panel-regulatory .qrc-mega-reg__columns {
    grid-template-columns: 1fr !important;
    gap: 16px 0 !important;
  }

  .page_header #navbarSupportedContent #panel-regulatory .qrc-mega-reg__footer {
    padding-top: 14px;
    margin-top: 14px;
  }

  .page_header #navbarSupportedContent #panel-regulatory .qrc-mega-reg__footer-link {
    font-size: 14px;
  }

  /* ── Hide language icon in mobile panel ── */
  .page_header #navbarSupportedContent .language {
    display: none !important;
  }

  /* ── Prevent body scroll when menu is open ── */
  body.qrc-mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  html.qrc-mobile-menu-open {
    overflow: hidden !important;
  }
.about_global_pressence_box .about_global_pressence_box_items:nth-child(1), 
.about_global_pressence_box .about_global_pressence_box_items:nth-child(2), 
.about_global_pressence_box .about_global_pressence_box_items:nth-child(3), 
.about_global_pressence_box .about_global_pressence_box_items:nth-child(4), 
.about_global_pressence_box .about_global_pressence_box_items:nth-child(5), 
.about_global_pressence_box .about_global_pressence_box_items:nth-child(6), 
.about_global_pressence_box .about_global_pressence_box_items:nth-child(7){ 
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
}

/* ── Smaller mobile refinements ── */
@media (max-width: 575.98px) {

  .page_header #navbarSupportedContent {
    width: 92vw;
    max-width: none;
    z-index: 9999;
  }

  .page_header .navbar-brand {
    max-width: 110px;
  }

  .page_header .navbar-brand img,
  .page_header .navbar-brand .custom-logo {
    max-height: 30px;
  }

  .page_header #navbarSupportedContent .navbar-nav .nav-link {
    padding: 14px 15px !important;
    font-size: 14px !important;
    min-height: 48px;
  }

  .page_header #navbarSupportedContent .dropdown-menu .dropdown-item {
    padding: 11px 15px 11px 28px;
    font-size: 13px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__sidebar-item {
    padding: 14px 15px 14px 28px;
    font-size: 13px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__link {
    padding: 11px 8px 11px 0;
    font-size: 14px;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__content {
    padding: 14px 15px !important;
  }

  .page_header #navbarSupportedContent .qrc-megamenu__featured {
    padding: 14px 15px !important;
  }

  .qrc-mobile-menu-close {
    padding: 14px 15px;
  }
}

/* ── Desktop: restore normal nav + hide mobile-only elements ── */
@media (min-width: 992px) {
  .page_header #navbarSupportedContent {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: none !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
  }
  .qrc-mobile-menu-close {
    display: none !important;
  }
  .qrc-mobile-overlay {
    display: none !important;
  }
  .page_header #navbarSupportedContent .qrc-megamenu-mobile-back {
    display: none !important;
  }
  .qrc-megamenu-backdrop {
    display: none;
  }
  .qrc-megamenu-backdrop.show {
    display: block;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 1399.98px  (Large Desktop tweaks)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1399.98px) {

  .video_banner_content .col-md-12 {
    padding: 0 40px;
  }

  .home_about_box {
    padding: 40px 50px;
  }

  .industries_serve_item {
    gap: 60px;
  }

  .pci_offer_swiper_box {
    padding: 30px 40px 35px 30px;
  }

  .pci_why_choose_swiper_box {
    padding: 40px 40px 100px 40px;
  }

  .Virtual-sec-a-box-item {
    padding: 40px 25px;
  }

  .about_leadership_box_item {
    padding: 30px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 1199.98px  (Desktop → Tablet-landscape transition)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

  /* ── Global / shared ── */
  .title_h2 {
    font-size: 36px !important;
  }

  .gotham_title {
    font-size: 40px;
    line-height: 46px;
  }

  .video_banner_content .col-md-12 {
    padding: 0 30px;
  }

  .video_banner_content h1 {
    font-size: 32px;
  }

  /* ── Home page ── */
  .home_about_box {
    padding: 35px 40px;
  }

  .milestone_box_number h2 {
    font-size: 48px;
  }

  .sec_home_d .title_h2 {
    white-space: normal;
  }

  .stack-item-inner {
    gap: 25px;
  }

  .industries_serve_item {
    gap: 40px;
  }

  .slider_four_item figure {
    width: 40%;
  }

  .insight_news {
    gap: 20px;
  }

  .ftr_contact_box {
    padding: 30px 35px;
  }

  .global_foot_box {
    flex-wrap: wrap;
  }

  /* ── Inner page banners ── */
  .pci_banner_content h1 {
    font-size: 34px;
  }

  /* ── PCI pages ── */
  .content-inner {
    padding: 40px 30px 40px 30px;
  }

  .endto_pci_btn a {
    min-width: auto;
    width: 100%;
  }

  .dds_v4_list {
    max-width: 100%;
  }

  /* ── VCISO ── */
  .Virtual-sec-a-box-item {
    padding: 35px 20px;
  }

  #vcisosTab {
    width: 100%;
  }

  /* ── Contact page ── */
  .form_contact_page figure {
    width: 38%;
  }
  .form_contact_page figcaption {
    width: 62%;
  }

  .explore_resource_right input {
    width: 280px;
  }

  .qrc_office_contact {
    height: 500px;
  }

  /* ── About page ── */
  .about_what_stand_left figure {
    width: 35%;
  }

  .why_organi {
    gap: 30px;
  }

  .testimonialtabbox {
    gap: 30px;
  }

  /* ── Swiper overflow containers ── */
  .wapt_benifits_swiper,
  .monitoring_cover_swiper {
    min-width: 0;
    width: 100%;
  }

  .slider_Five {
    min-width: 0;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 991.98px  (Tablet landscape → portrait)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* ── Global / shared ── */
  .title_h2 {
    font-size: 30px !important;
  }

  .gotham_title {
    font-size: 34px;
    line-height: 40px;
  }

  /* ── Home hero ── */
  .banner_sec_home {
    height: 60vh;
  }

  .video_banner_content {
    padding: 80px 0 60px 0;
  }

  .video_banner_content .col-md-12 {
    padding: 0 15px;
  }

  .video_banner_content h1 {
    font-size: 28px;
  }

  .video_banner_content p {
    font-size: 15px;
    line-height: 24px;
  }

  .video_banner_content a {
    padding: 14px 25px;
    font-size: 13px;
  }

  .btn-a.btn-b {
    padding: 14px 15px;
  }

  /* ── Home about box ── */
  .home_about_box {
    padding: 30px 25px;
  }

  .home_about_box a {
    width: 60px;
    height: 50px;
  }

  /* ── Milestones ── */
  .milestone_box {
    flex-wrap: wrap;
  }

  .milestone_box_number {
    width: 50%;
  }

  .milestone_box_number h2 {
    font-size: 40px;
  }

  /* ── Core capabilities / capability cards ── */
  .home_core_box {
    margin-bottom: 20px;
  }

  /* ── Stack / expand items ── */
  .stack-item-inner {
    flex-direction: column;
    gap: 20px;
  }

  .stack-item-inner figure {
    width: 100%;
  }

  /* ── Industries ── */
  .industries_serve_item {
    flex-direction: column;
    gap: 25px;
  }

  /* ── Slider four ── */
  .slider_four_item {
    flex-direction: column;
  }

  .slider_four_item figure {
    width: 100%;
  }

  /* ── Vertical slider ── */
  .vertical-center-slider {
    height: auto;
  }

  /* ── Insights ── */
  .insight_news {
    flex-direction: column;
  }

  /* ── Global footprint ── */
  .sec_home_j {
    min-height: auto;
  }

  .global_foot_item {
    width: 48%;
  }

  .global_foot_box {
    flex-wrap: wrap;
    gap: 20px;
  }

  /* ── CTA box ── */
  .ftr_contact_box {
    flex-direction: column;
    padding: 25px 20px;
    text-align: center;
    gap: 20px;
    background-size: cover !important;
  }

.ftr_contact_boxleft, .ftr_contact_boxright {
  width: 100%;
  flex-wrap: wrap;
  gap: 14px;
}
.ftr_contact_boxleft h3 br{
  display:none;
}
.ftr_contact_boxleft h3 {
  text-align: left;
}
.ftr_contact_box.pci_ftr_box h3, .ftr_contact_box.pci_ftr_box p {
  text-align: left;
}

  .ftr_contact_boxright {
    text-align: center;
  }

  /* ── Footer ── */
  .ftr_copyright {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .ftr_copyright ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  .page_footer .col-md-4 {
    margin-bottom: 30px;
  }

  /* ── Inner page banners ── */
  .pci_banner_content h1 {
    font-size: 28px;
  }

  .pci_banner_content p {
    font-size: 14px;
  }

  .pci-btn-bnr {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── PCI pages ── */
  .content-inner {
    padding: 30px 20px;
  }

  .content-inner-dpdp {
    padding-left: 20px;
  }

  .pci-page-trusted-leader-box {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .pci-page-trusted-leader-box ul {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .dds_v4_list {
    flex-direction: column;
  }

  .dds_v4_list_one,
  .dds_v4_list_two {
    width: 100%;
  }

  .pci_offer_swiper_box {
    padding: 25px 20px;
  }

  .pci_why_choose_swiper_box {
    padding: 30px 20px 80px 20px;
  }

  .pci_worldwide {
    position: relative;
    bottom: auto;
  }

  .pci_worldwide-box {
    width: 100%;
  }

  .pci_worldwide-box form {
    width: 100%;
  }

  .endto_pci_btn {
    flex-direction: column;
  }

  .endto_pci_btn a {
    min-width: auto;
    width: 100%;
  }

  .cta-btn-primary,
  .cta-btn-outline {
    width: auto;
    min-width: auto;
  }

  .pci-btn {
    width: auto;
  }

  .pci-content {
    max-width: 100%;
  }

  .notsure_pricing {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  /* ── DPDP page ── */
  .dpdp-data-protection {
    flex-direction: column;
  }

  .real_world_dpdp .pci_case_box {
    min-height: auto;
  }

  .dpdp_resource_center .pci_case_box {
    min-height: auto;
  }

  /* ── About page ── */
  .about_what_stand_left {
    flex-direction: column;
  }

  .about_what_stand_left figure {
    width: 100%;
  }

  .about_leadership_box {
    flex-direction: column;
  }

  .about_leadership_box_item {
    padding: 25px;
  }

  .why_organi {
    flex-direction: column;
    gap: 20px;
  }

  .why_organi figure,
  .why_organi figcaption {
    width: 100%;
  }

  .about_global_pressence_box {
    flex-wrap: wrap;
  }

  .about_global_pressence_box > *:nth-child(1),
  .about_global_pressence_box > *:nth-child(2),
  .about_global_pressence_box > *:nth-child(3),
  .about_global_pressence_box > *:nth-child(4),
  .about_global_pressence_box > *:nth-child(5) {
    width: 48%;
  }

  .about-we-stand-box {
    width: 100%;
  }

  /* ── Contact page ── */
 .form_contact_page {
  flex-direction: column;
  margin: 0 0 20px 0;
}

  .form_contact_page figure,
  .form_contact_page figcaption {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
.form_contact_page .form-control {
  max-height: 90px;
  font-size: 14px;
}
  .addres_list_box {
    width: 48%;
  }

  .addres_list_wrap {
    flex-wrap: wrap;
    gap: 15px;
  }

  .qrc_office_contact {
    height: 400px;
  }

  .explore_resource_right input {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .ftr_box_location {
    padding: 0 5%;
  }

  /* ── Resources page ── */
  .resources_box {
    flex-direction: column;
  }

  .resource_feature_box {
    flex-direction: column;
  }

  .resource_feature_box figure,
  .resource_feature_box figcaption {
    width: 100%;
  }

  .professionalTabs_content .resources_feature_iems {
    width: 48%;
  }

  .outcomes_list {
    flex-wrap: wrap;
  }

  /* ── VCISO page ── */
  .Virtual-sec-a-box-item {
    width: 100%;
    padding: 30px 20px;
  }

  .what_receive_swiper_box {
    min-height: auto;
  }

  .right-image-wrap {
    width: 100%;
  }

  .info-card-info {
    position: relative;
    bottom: auto;
    right: auto;
  }

  /* ── SOC Monitoring ── */
  .who_need_asses {
    flex-direction: column;
    gap: 25px;
  }

  /* ── Testimonials page ── */
  .testimonialtabbox {
    flex-direction: column;
    gap: 20px;
  }

  .testimonialtabbox figure {
    width: 100%;
  }

  .testimonial-section {
    min-height: auto;
  }

  /* ── Client testimonials ── */
  .client_tst {
    padding: 25px 20px;
  }

  .client_tst nav {
    right: 0;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
  }

  /* ── Stages / why choose section ── */
  .qrcv2-stages {
    grid-template-columns: 1fr 1fr;
  }

  /* ── VA pages ── */
  .va_receive_img img {
    height: auto;
    max-height: 350px;
    width: 100%;
    object-fit: cover;
  }

  .va_benefit_item {
    width: 100%;
  }

  .va_benefit_img img {
    height: auto;
    max-height: 350px;
    width: 100%;
    object-fit: cover;
  }

  /* ── Blog detail ── */
  .resource_details .col-md-8,
  .resource_details .col-md-4 {
    width: 100%;
  }

  .popular_article {
    margin-top: 30px;
  }

  /* ── Sticky button ── */
  .sticky_btn {
    display: none;
  }
  .page-template-home-page-template .home-page-pillar {
  padding-bottom: 0;
}
.qrc-label {
  margin: 0 0 10px 0 !important;
}
}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 767.98px  (Tablet portrait → Mobile landscape)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── Global / shared ── */
  .title_h2 {
    font-size: 28px !important;
    line-height: 1.25;
  }

  .gotham_title {
    font-size: 28px;
    line-height: 34px;
  }

  /* ── Home hero ── */
  .banner_sec_home {
    height: 50vh;
  }

  .video_banner_content {
    padding: 60px 0 40px 0;
  }

  .video_banner_content h1 {
    font-size: 24px;
  }

  .video_banner_content h1::before {
    height: 100px;
  }

  .video_banner_content p {
    font-size: 14px;
    line-height: 22px;
  }

  .video_banner_content a {
    padding: 14px 20px;
    font-size: 14px;
  }

  .banner_btn {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Home about ── */
  .home_about_box {
    padding: 25px 20px;
  }

  .home_about_bg {
    max-width: 100%;
  }

  /* ── Milestones ── */
  .milestone_box_number h2 {
    font-size: 34px;
  }

  /* ── Core capabilities ── */
  .home_core_box figcaption {
    padding: 15px;
  }

  /* ── Global footprint ── */
  .global_foot_item {
    width: 100%;
  }

  .backbone_global {
    text-align: left;
  }

  /* ── CTA box ── */
  .ftr_contact_box {
    padding: 20px 15px;
  }

  .ftr_contact_boxleft h3 {
    font-size: 22px;
  }

  /* ── Footer ── */
  .ftr_copyright {
    margin-top: 30px;
  }

  /* ── Inner page banners ── */
  .pci_banner_content {
    position: absolute;
    padding: 30px 0;
    background: transparent;
    align-items: flex-start;
  }

  .pci_banner_content h1 {
    font-size: 24px;
  }

  .pci_banner_content .col-md-6 {
    width: 100%;
  }

/*  .pci-page-banner_sec_inner picture img {
    display: none;
  }*/

/*  .pci-page-banner_sec_inner picture source {
    display: none;
  }*/

  .pci-page-banner_sec_inner {
    background: #0C2240;
  }

  .pci-btn-bnr-a,
  .pci-btn-bnr-b {
    padding: 14px 16px;
    font-size: 13px;
    width: 100%;
    text-align: center;
  }

  .banner_trusted {
    margin: 20px 0 0 0;
    flex-wrap: wrap;
  }

  /* ── PCI page subnav ── */
  .pci-page-subnav-box {
    flex-direction: column;
    gap: 10px;
  }

  .pci-page-subnav-right {
    border-left: none;
    padding-left: 0;
    overflow-x: auto;
  }

  .pci-page-subnav-crumb {
    flex-wrap: wrap;
  }

  /* ── PCI content sections ── */
  .content-inner {
    padding: 20px 15px;
  }

  .pci-what-is-card {
    flex-direction: column;
  }

  .pci-what-is-card .content-col,
  .pci-what-is-card .illustration-col {
    width: 100%;
  }

  /* ── Deliverables ── */
  .delivery_small {
    flex-direction: column;
  }

  /* ── Contact form ── */
  .form_contact_page .form-row {
    flex-direction: column;
  }

  /* ── Contact presence ── */
  .addres_list_box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .qrc_office_contact {
    height: 300px;
  }

  .contact_pressence_nav {
    flex-wrap: wrap;
  }

  #infoTab {
    flex-wrap: wrap;
  }

  #infoTab li button {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* ── Resources page ── */
  .professionalTabs_content .resources_feature_iems {
    width: 100%;
  }

  .explore_resource_right {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
.explore_resource .load-more-btn {
  margin-top: 0;
}
  /* ── About page ── */
  .about_global_pressence_box > *:nth-child(1),
  .about_global_pressence_box > *:nth-child(2),
  .about_global_pressence_box > *:nth-child(3),
  .about_global_pressence_box > *:nth-child(4),
  .about_global_pressence_box > *:nth-child(5) {
    width: 100%;
  }

  .about_decade_box {
    flex-direction: column;
  }

  /* ── Leadership ── */
  .leader_boxes {
    flex-direction: column;
    margin: 25px 0 0 0;
  }
.Home-page-testimonials .pci_leading_choose {
  padding: 0 15px;
}
  /* ── VCISO ── */
  .Virtual-sec-a-box {
    flex-direction: column;
  }

  .Virtual-sec-a-box-item {
    width: 100%;
  }

  .service-nav {
    flex-wrap: wrap;
  }

  /* ── Stages / why choose ── */
  .qrcv2-stages {
    grid-template-columns: 1fr;
  }

  /* ── Home sections with large padding ── */
  .sec_home_f .container,
  .sec_home_c .container,
  .sec_home_i .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* ── Insights section ── */
  .sec_home_i .col-md-4,
  .sec_home_i .col-md-8 {
    width: 100%;
  }

  .latest_insight {
    margin-bottom: 25px;
  }

  .insight_news_box {
    margin-bottom: 20px;
  }

  /* ── SOC Monitoring ── */
  .soc-covers-col {
    width: 100%;
  }

  /* ── VA pages ── */
  .va-stat-bar {
    flex-direction: column;
    gap: 15px;
  }

  /* ── Newsletter ── */
  /* .ftr_subscribe form {
    flex-direction: column;
  } */

  /* ── General image handling ── */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ── Prevent horizontal overflow ── */
  .container,
  .container-fluid,
  .container-xl {
    overflow-x: hidden;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 575.98px  (Mobile landscape → portrait)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

  /* ── Global / shared ── */
  .title_h2 {
    font-size: 28px;
    line-height: 1.25;
  }

  .gotham_title {
    font-size: 24px;
    line-height: 30px;
  }

  /* ── Home hero ── */
  .banner_sec_home {
    height: auto;
    min-height: 47vh;
  }
.video_banner_home {
  background: #24446e;
}
.video_banner_content {
  padding: 31px 0 30px 0;
  position: unset;
  margin: 0;
  background: #24446e;
}

  .video_banner_content h1 {
    font-size: 22px;
  }

  .video_banner_content p {
    font-size: 13px;
    line-height: 20px;
  }

  .video_banner_content a {
    padding: 10px 16px;
    font-size: 14px;
    width: 100%;
    text-align: center;
  }

  .btn-a.btn-b {
    margin-left: 0;
  }

  .banner_btn {
    flex-direction: column;
  }

  /* ── Milestones ── */
  .milestone_box_number {
    width: 100%;
  }

  .milestone_box_number h2 {
    font-size: 30px;
  }

  .milestone_box_bg21 {
    padding: 20px;
  }

  /* ── Home about ── */
  .home_about_box {
    padding: 20px 15px;
  }

  .home_about_box p {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── Core capabilities ── */
  .home_core_box figure img {
    width: 100%;
  }

  /* ── CTA box ── */
  .ftr_contact_box {
    padding: 15px;
  }

  .ftr_contact_boxleft span {
    font-size: 14px;
  }

  .ftr_contact_boxleft h3 {
    font-size: 20px;
  }

  .btn-fill-ftr {
    width: 100%;
    text-align: center;
  }

  /* ── Footer ── */
  .ftr_box_links ul {
    column-count: 1;
  }

  .ftr_box_info p,
  .ftr_box_info span,
  .ftr_box_info li a {
    font-size: 13px;
  }

  /* ── Inner page banner ── */
 .pci_banner_content {
  padding: 30px 0 20px 0;
  align-items: flex-start;
}
  .pci_banner_content h1 {
    font-size: 28px;
  }

  .pci_banner_content p {
    font-size: 13px;
  }

  .pci_banner_round {
    font-size: 10px;
    padding: 5px 10px;
  }

  .banner_content_border {
    padding-left: 0;
  }

  .banner_content_border::before {
    height: 80px;
  }

  /* ── PCI pages ── */
  .content-inner {
    padding: 15px 14px;
  }

  .check-list {
    grid-template-columns: 1fr;
  }

  /* ── Deliverables stat bar ── */
  .deliverable-card {
    padding: 15px;
  }

  /* ── Contact page ── */
  .form_contact_page figcaption {
    padding: 20px 15px;
  }

  .qrc_office_contact {
    height: 250px;
  }

  .qrc_office_card {
    padding: 15px;
  }

  /* ── About page ── */
  .about_leadership_box_item {
    padding: 20px 15px;
  }

  .about_our_mission {
    padding: 20px;
  }

  .about_value {
    padding: 20px;
  }

  /* ── Testimonials ── */
  .client_tst {
    padding: 20px 15px;
  }

  .tstperson {
    flex-direction: column;
    gap: 10px;
  }

  /* ── Resources ── */
  .resource_feature_box figcaption {
    padding: 15px;
  }

  /* ── SOC Flow ── */
  .soc-flow-grid {
    grid-template-columns: 1fr;
  }

  /* ── VA pages ── */
  .va_method_sec {
    padding: 20px 15px;
  }

  .va_receive_img img,
  .va_benefit_img img {
    max-height: 250px;
  }

  /* ── Blog single ── */
  .resource_details_header h1 {
    font-size: 22px;
  }

  .resource_details_header_box {
    flex-direction: column;
    gap: 10px;
  }

  .resource_summary {
    padding: 15px;
  }

  .resource_toc {
    padding: 15px;
  }

  /* ── Generic sections with padding ── */
  .pt-5 {
    padding-top: 2rem !important;
  }

  .pb-5 {
    padding-bottom: 2rem !important;
  }

  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .mb-5 {
    margin-bottom: 2rem !important;
  }

  .px-5 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* ── Section titles — match mobile H2 scale ── */
  .section-title {
    font-size: 25px !important;
    line-height: 1.25;
    font-weight: 500 !important;
  }

  .section-subtitle {
    font-size: 14px;
  }

  /* ── Benefits section cards ── */
  .benefit-card {
    padding: 20px;
  }

  /* ── Home page pillars ── */
  .home-pillar-item {
    padding: 20px;
  }

  .home-pillar-item h3 {
    font-size: 16px;
  }

  /* ── Testimonial cards ── */
  .testimonial-card {
    grid-template-columns: 1fr;
  }

  .testimonial-image {
    height: 200px;
  }

  /* ── Solutions cards ── */
  .qrc-card .qrc-body {
    padding: 15px;
  }

  /* ── ISMS ── */
  .isms_who_needs_list {
    grid-template-columns: 1fr;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 479.98px  (Small mobile portrait)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 479.98px) {

  .title_h2 {
    font-size: 28px;
    line-height: 1.25;
  }

  .video_banner_content h1 {
    font-size: 20px;
  }

  .milestone_box_number h2 {
    font-size: 26px;
  }

  .pci_banner_content h1 {
    font-size: 28px;
  }

  .ftr_contact_boxleft h3 {
    font-size: 18px;
  }

  .home_about_box {
    padding: 15px;
  }

  .pci-btn-bnr {
    flex-direction: column;
  }

  .pci-btn-bnr-a,
  .pci-btn-bnr-b {
    width: 100%;
  }

  .ftr_copyright p,
  .ftr_copyright ul li a {
    font-size: 14px;
  }

  .section-title {
    font-size: 25px !important;
    line-height: 1.25;
  }

  /* ── Home page stages ── */
  .qrcv2-stage {
    padding: 15px;
  }

  .qrcv2-stage-content h3 {
    font-size: 16px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 379.98px  (Very small mobile)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 379.98px) {

  .video_banner_content h1 {
    font-size: 18px;
  }

  .pci_banner_content h1 {
    font-size: 28px;
  }

  .title_h2 {
    font-size: 28px;
    line-height: 1.25;
  }

  .milestone_box_number h2 {
    font-size: 22px;
  }

  .home_about_box {
    padding: 14px;
  }

  .ftr_contact_box {
    padding: 14px;
  }

  .content-inner {
    padding: 14px 10px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL: Prevent horizontal overflow on all viewports below desktop
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

  html,
  body {
    overflow-x: hidden;
  }

  .wapt_benifits_swiper,
  .monitoring_cover_swiper {
    min-width: 0 !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .slider_Five {
    min-width: 0 !important;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE VIDEO / IFRAME / EMBED
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  iframe,
  video,
  embed,
  object {
    max-width: 100%;
  }

  .video_banner_home video {
    object-fit: cover;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE TABLES — allow horizontal scroll on narrow viewports
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: QRC Stages grid (no existing responsive query)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .qrcv2-stages {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767.98px) {
  .qrcv2-stages {
    grid-template-columns: 1fr;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: Solutions section cards (Bootstrap handles most but gap fix)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .qrc-card .qrc-img {
    height: 200px;
    object-fit: cover;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: Industries / Support section grid
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .va_support_grid .col-md-4,
  .va_support_grid .col-lg-4 {
    width: 100%;
  }

  .va_support_card {
    margin-bottom: 15px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: Testimonials heading row
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .testimonials-heading-row .col-lg-9,
  .testimonials-heading-row .col-lg-3 {
    width: 100%;
  }

  .pci_leading_choose .pci_leading_nav {
    justify-content: flex-start;
    margin-top: 10px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: Backbone / Global footprint
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .sec_home_j {
    background-position: center center !important;
    background-size: cover !important;
  }

  .sec_home_j .col-md-7 {
    width: 100%;
  }

  .global_foot_item {
    margin-top: 0 !important;
    top: 0 !important;
    position: relative !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: Partners slider
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.slider_five_item img {
  max-height: 120px;
  width: auto;
}
}


/* ──────────────────────────────────────────────────────────────────────────
   HOME PAGE: Insights section
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sec_home_i .col-md-4 {
    width: 100%;
    margin-bottom: 20px;
  }

  .sec_home_i .col-md-8 {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   ABOUT PAGE: Timeline section
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .timeline-section .col-md-6 {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   ABOUT PAGE: Life at QRC / Audit Certification boxes
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .about_life_at_qrc.audit_certi_box figcaption {
    min-height: auto;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   CONTACT PAGE: Office tabs / address cards / map
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .contact_pressence_head {
    flex-direction: column;
    gap: 15px;
  }

  #infoTab {
    gap: 8px;
  }

  #infoTab li button {
    padding: 8px 14px;
    font-size: 14px;
    gap: 8px;
  }

  .qrc_office_contact {
    height: 200px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   RESOURCES: Library grid
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .professionalTabs_content {
    flex-wrap: wrap;
  }

  .resources_feature_iems {
    width: 48% !important;
  }
}

@media (max-width: 575.98px) {
  .resources_feature_iems {
    width: 100% !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   BLOG DETAIL: Sidebar + content layout
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .resource_details .col-md-8 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .resource_details .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .resource_details .sticky-sidebar-box {
    position: static !important;
  }
}

@media (max-width: 575.98px) {
  .resource_big_img img {
    height: auto;
  }

  .resource_details_header_name {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .resource_details_content h2 {
    font-size: 20px;
  }

  .resource_details_content h3 {
    font-size: 18px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   BLOG: Others blog slider
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .others_blog_slider .swiper-slide {
    width: 85%;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   PCI PAGE: WHO require / DDS sections
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .who_require_pci {
    flex-direction: column;
  }

  .who_require_pci figure,
  .who_require_pci figcaption {
    width: 100%;
  }

  .pci_dds_v4 {
    padding: 20px 15px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   PCI PAGE: FAQ accordion
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  #faqAccordion .accordion-button {
    font-size: 14px;
    padding: 15px;
  }

  #faqAccordion .accordion-body {
    padding: 15px;
    font-size: 14px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   LEARNING PAGE / QRC Assure
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .learning-section .col-md-6 {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .learning-section {
    padding: 20px 15px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   GENERAL: Bootstrap column overrides for tablets
   When Bootstrap .col-md-* kicks in at 768px, some 2-column layouts
   should actually be single-column until 992px on this design.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {

  .sec_home_i .col-md-4,
  .sec_home_i .col-md-8,
  .resource_details .col-md-8,
  .resource_details .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .sec_home_j .col-md-7 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .form_contact_page figure,
  .form_contact_page figcaption {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   SWIPER CONTAINERS: Ensure they don't cause page-level overflow
   ────────────────────────────────────────────────────────────────────────── */
.swiper {
  max-width: 100%;
  overflow: hidden;
}


/* ──────────────────────────────────────────────────────────────────────────
   NEWSLETTER BAR: responsive (if not already handled)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .ftr_subscribe {
    margin-top: 20px;
  }

  .ftr_subscribe h4 {
    font-size: 16px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   DPDP PAGE: Services tabs
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .services-section-dpdp .services-tab-btn {
    padding: 10px 15px;
    font-size: 13px;
  }
}

@media (max-width: 575.98px) {
  .services-section-dpdp .tab-pane-inline {
    flex-direction: column;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   CSCF / SWIFT / RBI / ISMS / Cloud / Red Teaming / WAPT / SOC / VA
   These all use the same .pci-section + .pci-what-is pattern.
   Column stacking is handled above; these fix page-specific spacing.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .isms_why_leading_box {
    flex-direction: column;
  }

  .isms_why_leading_box figure,
  .isms_why_leading_box figcaption {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   LEADERSHIP PAGE: Profile modal adjustments (extend existing queries)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .leadership-profile-modal .modal-dialog {
    margin: 10px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   OFFENSIVE / RED TEAM SERVICES
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .report-body {
    flex-direction: column;
  }

  .report-btn {
    width: 100%;
    text-align: center;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   404 PAGE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .error-404 {
    padding: 20px 15px;
  }

  .error-404 .page-title {
    font-size: 24px;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   SEARCH PAGE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .search-form .search-field {
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY & SPACING IMPROVEMENTS
   Fixes inconsistencies in font sizes, line heights, weights, and
   section/component spacing across all breakpoints.
   ══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   DESKTOP TYPOGRAPHY FIXES (all viewports)
   Fix line-height / spacing issues that exist at desktop too.
   ────────────────────────────────────────────────────────────────────────── */

.stack-item-inner p {
  line-height: 30px;
}

.insight_news_box p {
  line-height: 22px;
}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 1199.98px — Typography & spacing refinements
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

  .section-title {
    font-size: 30px !important;
  }

  .section-subtitle {
    font-size: 15px;
    line-height: 24px;
  }

  .card-title {
    font-size: 18px;
  }

  .card-desc {
    font-size: 14px;
    line-height: 22px;
  }

  .cta-title {
    font-size: 24px;
    line-height: 36px;
  }

  .cta-desc {
    font-size: 15px;
    line-height: 24px;
  }

  .pci-body {
    font-size: 15px;
    line-height: 26px;
  }

  .benefits-title {
    font-size: 38px;
  }

  .rc-title {
    font-size: 38px;
    line-height: 46px;
  }

  .stack-item-inner h3 {
    font-size: 22px;
  }

  .stack-item-inner p {
    font-size: 16px;
    line-height: 27px;
  }

  .slider_four_item h3 {
    font-size: 20px;
  }

  .about_qrc h6 {
    font-size: 20px;
  }

  .about_qrc p,
  .about_what_stand p,
  .about_our_mission p {
    font-size: 16px;
  }

  .why_organi figcaption p {
    font-size: 16px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 991.98px — Typography & spacing refinements
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* ── Section titles ── */
  .section-title {
    font-size: 26px !important;
    margin-bottom: 14px;
  }

  .section-subtitle {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── Card typography ── */
  .card-title {
    font-size: 17px;
  }

  .card-desc {
    font-size: 14px;
    line-height: 21px;
  }

  /* ── CTA section ── */
  .cta-title {
    font-size: 22px;
    line-height: 32px;
  }

  .cta-desc {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── Body content ── */
  .pci-body {
    font-size: 15px;
    line-height: 25px;
  }

  /* ── Home page sections ── */
  .home_about_box p {
    font-size: 15px;
    line-height: 24px;
  }

  .home_core_box h6 {
    font-size: 16px;
  }

  .home_core_box p {
    font-size: 13px;
    line-height: 20px;
  }

  .stack-item-inner h3 {
    font-size: 20px;
  }

  .stack-item-inner p {
    font-size: 15px;
    line-height: 25px;
    margin-top: 18px;
  }

  .industries_serve_item h3 {
    font-size: 18px;
  }

  .industries_serve_item p {
    font-size: 14px;
    line-height: 22px;
  }

  .slider_four_item h3 {
    font-size: 19px;
  }

  .slider_four_item p {
    font-size: 15px;
  }

  .latest_insight p {
    font-size: 14px;
    line-height: 21px;
  }

  .insight_news_box h6 {
    font-size: 15px;
  }

  .insight_news_box p {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── Global footprint ── */
  .global_foot_item h6 {
    font-size: 18px;
    line-height: 26px;
  }

  .global_foot_item p {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── Milestones ── */
  .milestone_box_number p {
    font-size: 16px;
  }

  /* ── PCI page cards ── */
  .pci_offer_swiper_box h6 {
    font-size: 16px;
    line-height: 24px;
  }

  .pci_offer_swiper_box p {
    font-size: 14px;
  }

  .pci_why_choose_swiper_box h6 {
    font-size: 16px;
  }

  .pci_why_choose_swiper_box p {
    font-size: 14px;
  }

  .pci_case_box h6 {
    font-size: 15px;
  }

  .pci_case_box p {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── Benefits / RC / WQ titles ── */
  .benefits-title {
    font-size: 32px;
  }

  .rc-title {
    font-size: 32px;
    line-height: 40px;
  }

  .wq-title {
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  }

  /* ── About page ── */
  .about_qrc h6 {
    font-size: 19px;
  }

  .about_qrc p,
  .about_what_stand p,
  .about_our_mission p {
    font-size: 15px;
    line-height: 25px;
  }

  .about_leadership_box_item p {
    font-size: 14px;
    line-height: 22px;
  }

  .why_organi figcaption p {
    font-size: 15px;
    line-height: 25px;
  }

  .about_global_pressence_box_items p {
    font-size: 15px;
  }

  /* ── Footer typography ── */
  .ftr_title_small {
    font-size: 15px;
  }

  .ftr_box_links ul li a,
  .ftr_box_location ul li a {
    font-size: 14px;
    line-height: 24px;
  }

  .ftr_box_info p {
    font-size: 14px;
    line-height: 22px;
  }

  .ftr_box_info ul li a {
    font-size: 14px;
  }

  .ftr_box_info span {
    font-size: 14px;
  }

  .ftr_subscribe h4 {
    font-size: 17px;
    line-height: 24px;
  }

  .ftr_subscribe form input {
    font-size: 14px;
  }

  /* ── Section spacing tightening ── */
  .content-inner {
    padding: 40px 28px 40px 28px;
  }

  /* ── Banner typography ── */
  .pci_banner_content ul li {
    font-size: 14px;
    line-height: 26px;
  }

  /* ── Testimonial ── */
  .client_tst .title_h2 {
    font-size: 28px;
  }

  /* ── QRC cards ── */
  .qrc-title {
    font-size: 18px;
  }

  .qrc-desc {
    font-size: 13px;
  }
.mb-5.d-flex.align-items-center.justify-content-between.pci_what_offer_head {
  display: block !important;
}
#professionalTabs {
  flex-wrap: wrap;
  margin: 0 0 20px 0;
}
.d-flex.align-items-center.justify-content-between.mb-5 {
  flex-wrap: wrap;
  gap: 15px;
}
}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 767.98px — Typography & spacing refinements
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── Section titles — match mobile H2 scale ── */
  .section-title {
    font-size: 25px !important;
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .section-subtitle {
    font-size: 14px;
    line-height: 21px;
  }

  /* ── Card typography ── */
  .card-title {
    font-size: 16px;
  }

  .card-desc {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── CTA section ── */
  .cta-title {
    font-size: 20px;
    line-height: 28px;
  }

  .cta-desc {
    font-size: 13px;
    line-height: 21px;
  }

  /* ── Body content ── */
  .pci-body {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 14px;
  }

  /* ── Home page sections ── */
  .home_about_box p {
    font-size: 14px;
    line-height: 22px;
  }

  .home_core_box h6 {
    font-size: 16px;
  }

  .home_core_box p {
    font-size: 14px;
    line-height: 18px;
  }

  .stack-item-inner h3 {
    font-size: 18px;
  }

  .stack-item-inner p {
    font-size: 14px;
    line-height: 23px;
    margin-top: 14px;
  }

  .industries_serve_item h3 {
    font-size: 17px;
  }

  .industries_serve_item p {
    font-size: 13px;
    line-height: 21px;
  }

  .slider_four_item h3 {
    font-size: 18px;
  }

  .slider_four_item p {
    font-size: 14px;
    line-height: 22px;
  }

  .latest_insight p {
    font-size: 13px;
    line-height: 20px;
  }

  .insight_news_box h6 {
    font-size: 14px;
  }

  .insight_news_box p {
    font-size: 13px;
    line-height: 19px;
  }

  /* ── Global footprint ── */
  .global_foot_item span {
    font-size: 22px;
  }

  .global_foot_item h6 {
    font-size: 17px;
    line-height: 24px;
  }

  .global_foot_item p {
    font-size: 14px;
    line-height: 19px;
  }

  /* ── Milestones ── */
  .milestone_box_number p {
    font-size: 15px;
  }

  /* ── PCI page cards ── */
  .pci_offer_swiper_box h6 {
    font-size: 15px;
    line-height: 22px;
  }

  .pci_offer_swiper_box p {
    font-size: 13px;
    line-height: 20px;
  }

  .pci_why_choose_swiper_box h6 {
    font-size: 15px;
  }

  .pci_why_choose_swiper_box p {
    font-size: 13px;
    line-height: 20px;
  }

  .pci_case_box h6 {
    font-size: 14px;
  }

  .pci_case_box p {
    font-size: 14px;
    line-height: 19px;
  }

  /* ── Benefits / RC / WQ titles ── */
  .benefits-title {
    font-size: 26px;
  }

  .rc-title {
    font-size: 26px;
    line-height: 34px;
  }

  /* ── About page ── */
  .about_qrc h6 {
    font-size: 18px;
  }

  .about_qrc p,
  .about_what_stand p,
  .about_our_mission p {
    font-size: 14px;
    line-height: 23px;
  }

  .about_leadership_box_item p {
    font-size: 13px;
    line-height: 21px;
  }

  .about_our_mission .title_h2 {
    font-size: 26px;
  }

  .why_organi figcaption p {
    font-size: 14px;
    line-height: 23px;
  }

  .about_global_pressence_box_items p {
    font-size: 14px;
  }

  /* ── Footer typography ── */
  .ftr_title_small {
    font-size: 14px;
  }

  .ftr_box_links ul li a,
  .ftr_box_location ul li a {
    font-size: 13px;
    line-height: 22px;
    margin: 6px 0;
  }

  .ftr_box_info p {
    font-size: 13px;
    line-height: 20px;
    margin-top: 20px;
  }

  .ftr_box_info ul li a {
    font-size: 13px;
    line-height: 20px;
  }

  .ftr_box_info span {
    font-size: 13px;
    line-height: 20px;
  }

  .ftr_subscribe h4 {
    font-size: 16px;
  }

  .ftr_subscribe form input {
    font-size: 13px;
  }

  .ftr_copyright {
    margin-top: 25px;
  }

  .ftr_copyright p {
    font-size: 13px;
  }

  .ftr_copyright ul li a {
    font-size: 13px;
  }

  /* ── CTA box ── */
  .ftr_contact_boxleft span {
    font-size: 13px;
  }

  /* ── Section spacing tightening ── */
  .content-inner {
    padding: 25px 18px;
  }

  /* ── Banner typography ── */
  .pci_banner_content p {
    font-size: 13px;
    line-height: 21px;
  }

  .pci_banner_content ul li {
    font-size: 13px;
    line-height: 22px;
  }

  .pci_banner_content h6 {
    font-size: 16px;
  }

  /* ── Testimonial ── */
  .client_tst .title_h2 {
    font-size: 24px;
  }

  .tstperson h6 {
    font-size: 17px;
  }

  .slider_six_item p {
    font-size: 13px;
    line-height: 21px;
  }

  /* ── QRC cards ── */
  .qrc-title {
    font-size: 17px;
  }

  .qrc-desc {
    font-size: 13px;
  }

  /* ── Who needs / requires ── */
  .who-title {
    font-size: 19px;
  }

  /* ── Pricing cards ── */
  .pricing-card-title {
    font-size: 18px;
  }

  /* ── Info cards ── */
  .info-card-title {
    font-size: 18px;
  }

  /* ── Benefit card ── */
  .benefit-card__title {
    font-size: 16px;
  }

  /* ── WQ / RC cards ── */
  .wq-card__title {
    font-size: 16px;
  }

  .rc-card__title {
    font-size: 18px;
  }
.about_global_pressence_box_items h3 {
  font-size: 29px;
}
.testimonial-wrap .row.mb-4 {
  margin-bottom: 0 !important;
}
.testimonial-card {
  margin-bottom: 25px;
}
.va_benefit_sec .va_benefit_list {
  gap: 15px;
}
.page-template-SOC-monitoring-page-template #benefits,
.page-template-Virtual-CISO-page-template #benefits {
  padding-top: 40px !important;
}
#benefits {
  padding-top: 40px !important;
}
.page-template-Learning-page-template .who_require_pci.about_value.pt-5.pb-5.position-relative {
  padding-left: 0;
  padding-right: 0;
}
}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 575.98px — Typography & spacing refinements
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

  /* ── Section titles — match mobile H2 scale ── */
  .section-title {
    font-size: 25px !important;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .section-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  /* ── Card typography ── */
  .card-title {
    font-size: 15px;
  }

  .card-desc {
    font-size: 13px;
    line-height: 19px;
  }

  /* ── CTA section ── */
  .cta-title {
    font-size: 18px;
    line-height: 26px;
  }

  .cta-desc {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── Body content ── */
  .pci-body {
    font-size: 14px;
    line-height: 23px;
    margin-bottom: 10px;
  }

  /* ── Home page sections ── */
  .home_core_box h6 {
    font-size: 16px;
  }

  .home_core_box p {
    font-size: 14px;
    line-height: 17px;
  }

  .stack-item-inner {
    padding: 25px;
  }

  .stack-item-inner h3 {
    font-size: 17px;
  }

  .stack-item-inner p {
    font-size: 13px;
    line-height: 21px;
    margin-top: 14px;
  }

  .industries_serve_item h3 {
    font-size: 16px;
  }

  .industries_serve_item p {
    font-size: 13px;
    line-height: 20px;
  }

  .slider_four_item h3 {
    font-size: 16px;
  }

  .slider_four_item p {
    font-size: 13px;
    line-height: 20px;
  }

  .latest_insight p {
    font-size: 14px;
    line-height: 19px;
  }

  .insight_news_box h6 {
    font-size: 14px;
  }

  .insight_news_box p {
    font-size: 14px;
    line-height: 18px;
    margin: 14px 0;
  }

  /* ── Global footprint ── */
  .global_foot_item span {
    font-size: 20px;
  }

  .global_foot_item h6 {
    font-size: 16px;
    line-height: 22px;
  }

  .global_foot_item p {
    font-size: 14px;
    line-height: 18px;
  }

  /* ── Milestones ── */
  .milestone_box_number p {
    font-size: 14px;
  }

  /* ── PCI page cards ── */
  .pci_offer_swiper_box h6 {
    font-size: 14px;
    line-height: 20px;
  }

  .pci_offer_swiper_box p {
    font-size: 13px;
    line-height: 19px;
  }

  .pci_why_choose_swiper_box h6 {
    font-size: 14px;
  }

  .pci_why_choose_swiper_box p {
    font-size: 13px;
    line-height: 19px;
  }

  .pci_case_box {
    padding: 25px;
  }

  .pci_case_box h6 {
    font-size: 14px;
    margin: 10px 0;
  }

  .pci_case_box p {
    font-size: 14px;
    line-height: 18px;
  }

  .pci_case_box li {
    font-size: 14px;
    line-height: 18px;
  }

  /* ── Benefits / RC / WQ titles ── */
  .benefits-title {
    font-size: 22px;
  }

  .rc-title {
    font-size: 22px;
    line-height: 30px;
  }

  /* ── About page ── */
  .about_qrc h6 {
    font-size: 17px;
  }

  .about_qrc p,
  .about_what_stand p,
  .about_our_mission p {
    font-size: 13px;
    line-height: 21px;
  }

  .about_leadership_box_item p {
    font-size: 13px;
    line-height: 20px;
  }

  .about_our_mission .title_h2 {
    font-size: 22px;
  }

  .why_organi figcaption p {
    font-size: 13px;
    line-height: 21px;
  }

  .about_global_pressence_box_items p {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── Footer typography ── */
  .ftr_title_small {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .ftr_box_links ul {
    margin-top: 15px;
  }

  .ftr_box_links ul li a,
  .ftr_box_location ul li a {
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0;
  }

  .ftr_box_info p {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 15px;
  }

  .ftr_box_info ul li a {
    font-size: 14px;
    line-height: 18px;
  }

  .ftr_box_info span {
    font-size: 14px;
    line-height: 18px;
  }

  .ftr_subscribe form input {
    font-size: 14px;
  }

  .ftr_copyright {
    margin-top: 20px;
    padding: 14px 0;
  }

  /* ── CTA box ── */
  .ftr_contact_boxleft span {
    font-size: 11px;
  }

  .ftr_contact_boxleft h3 {
    font-size: 19px;
    line-height: 28px;
  }

  .ftr_contact_boxright a {
    font-size: 13px;
    padding: 14px 18px;
  }

  /* ── Banners ── */
  .pci_banner_content h6 {
    font-size: 15px;
  }

  .banner_title_line {
    font-size: 11px;
  }

  .pci_banner_round {
    font-size: 10px;
  }

  /* ── Testimonial ── */
  .client_tst .title_h2 {
    font-size: 20px;
  }

  .tstperson h6 {
    font-size: 16px;
  }

  .slider_six_item p {
    font-size: 14px;
    line-height: 20px;
  }

  /* ── QRC cards ── */
  .qrc-title {
    font-size: 16px;
  }

  .qrc-desc {
    font-size: 14px;
  }

  /* ── Pricing cards ── */
  .pricing-card-title {
    font-size: 17px;
  }

  /* ── Info cards ── */
  .info-card-title {
    font-size: 17px;
  }

  /* ── Benefit card ── */
  .benefit-card__title {
    font-size: 15px;
  }

  /* ── WQ / RC cards ── */
  .wq-card__title {
    font-size: 15px;
  }

  .rc-card__title {
    font-size: 17px;
  }

  /* ── Who needs ── */
  .who-title {
    font-size: 18px;
  }

  /* ── Req / deliverables ── */
  .req-title {
    font-size: 16px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 479.98px — Typography & spacing refinements
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 479.98px) {

  .section-title {
    font-size: 25px !important;
    line-height: 1.25;
  }

  .section-subtitle {
    font-size: 14px;
    line-height: 19px;
  }

  .cta-title {
    font-size: 16px;
    line-height: 24px;
  }

  .pci-body {
    font-size: 13px;
    line-height: 22px;
  }

  .benefits-title {
    font-size: 25px;
  }

  .rc-title {
    font-size: 20px;
    line-height: 28px;
  }

  .ftr_contact_boxleft h3 {
    font-size: 17px;
    line-height: 26px;
  }

  .about_our_mission .title_h2 {
    font-size: 20px;
  }

  .client_tst .title_h2 {
    font-size: 18px;
  }

  .stack-item-inner {
    padding: 20px;
  }

  .pci_case_box {
    padding: 20px;
  }

  .insight_news_box {
    padding: 20px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT: 379.98px — Typography & spacing refinements
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 379.98px) {

  .section-title {
    font-size: 25px !important;
    line-height: 1.25;
  }

  .pci-body {
    font-size: 13px;
    line-height: 21px;
  }

.ftr_contact_boxleft h3 {
  font-size: 22px;
  line-height: 1.4;
}

  .ftr_contact_boxright a {
    font-size: 14px;
    padding: 14px 15px;
  }

  .about_our_mission .title_h2 {
    font-size: 18px;
  }

  .stack-item-inner {
    padding: 15px;
  }

  .stack-item-inner h3 {
    font-size: 16px;
  }

  .stack-item-inner p {
    font-size: 14px;
    line-height: 19px;
  }

  .pci_case_box {
    padding: 15px;
  }

  .insight_news_box {
    padding: 15px;
  }

  .insight_news_box h6 {
    font-size: 13px;
  }

  .insight_news_box p {
    font-size: 11px;
    line-height: 17px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   MOBILE TYPOGRAPHY SCALE (≤ 767.98px)
   Standardizes heading, paragraph, small-text and button font sizes
   across the entire website on mobile viewports.
   Desktop and tablet remain unchanged.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── Headings ── */
  h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  h2 {
    font-size: 28px;
    line-height: 1.25;
  }

  h3 {
    font-size: 24px;
    line-height: 1.25;
  }

  h4 {
    font-size: 22px;
    line-height: 1.3;
  }

  h5 {
    font-size: 18px;
    line-height: 1.3;
  }

  h6 {
    font-size: 17px;
    line-height: 1.4;
  }

  /* ── Paragraphs ── */
  p {
    font-size: 16px;
    line-height: 1.6;
  }

  /* ── Small text ── */
  small,
  .small,
  figcaption span,
  .cat_news,
  .pci_banner_round,
  .banner_title_line {
    font-size: 11px;
    line-height: 1.45;
  }

  /* ── Buttons ── */
  .btn,
  .btn-a,
  .btn-fill-ftr,
  .pci-btn,
  .pci-btn-bnr-a,
  .pci-btn-bnr-b,
  .cta-btn-primary,
  .cta-btn-outline,
  .swiper_btn_style,
  button[type="submit"] {
    font-size: 14px;
    line-height: 1.45;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   ABOUT PAGE: yearSwiper — horizontal swipeable on tablet & mobile
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  .timeline-section .yearSwiper {
    max-width: none;
    width: 100%;
    overflow: hidden !important;
    margin-top: 30px;
  }

  /* Swiper's JS applies transform via inline !important (setProperty)
     to override the desktop transform:none!important from style.css.
     CSS here just handles the flex layout for horizontal mode. */
  .timeline-section .yearSwiper--horizontal .swiper-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }

  .timeline-section .yearSwiper .swiper-slide {
    height: auto !important;
    width: auto !important;
    flex-shrink: 0;
    justify-content: center;
    padding-right: 0;
    padding-bottom: 28px;
  }

  /* reposition the vertical line to a horizontal bottom rail */
  .timeline-section .yearSwiper::before {
    top: auto;
    bottom: 8px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
  }

  /* reposition the dot to sit on the horizontal line */
  .timeline-section .yearSwiper .swiper-slide::after {
    right: 50%;
    top: auto;
    bottom: 4px;
    margin-top: 0;
    margin-right: -4.5px;
  }

  /* active state: horizontal connector + ring repositioned */
  .timeline-section .yearSwiper .is-active::before {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 5px;
    width: 6px;
    height: 22px;
    margin-top: 0;
    margin-left: -3px;
  }

  .timeline-section .yearSwiper .is-active::after {
    right: 50%;
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-right: -8px;
  }

  .timeline-section .yearSwiper .is-active span {
    border-radius: 10px 10px 30px 30px;
    padding: 8px 14px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   PCI SUBNAV: horizontal scrollable on tablet & mobile
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  .pci-page-subnav-right {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-left: none;
    padding-left: 0;
    max-width: 100%;
  }

  .pci-page-subnav-right::-webkit-scrollbar {
    display: none;
  }

  .pci-page-subnav-right {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .pci-page-subnav-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    min-width: max-content;
  }

  .pci-page-subnav-menu li a {
    white-space: nowrap;
  }

}


/* ══════════════════════════════════════════════════════════════════════════
   SECTION SPACING — Consistent vertical rhythm on Tablet & Mobile
   Target: Tablet (≤991.98px) = 52px top / 60px bottom
           Mobile (≤767.98px) = 44px top / 52px bottom
   Desktop spacing is 100% unchanged (all rules below are in media queries).
   ══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   TABLET (≤991.98px) — section spacing normalisation
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Bootstrap utility overrides for sections using pt-5 / pb-5 / py-5 */
  .pt-5 {
    padding-top: 52px !important;
  }
  .pb-5 {
    padding-bottom: 60px !important;
  }
  .py-5 {
    padding-top: 52px !important;
    padding-bottom: 60px !important;
  }

  /* services-section: style.css has 56px 0 64px at this breakpoint — normalise */
  .services-section {
    padding: 52px 0 60px;
  }

  /* bundles-section: style.css has 52px 0 48px at this breakpoint — fix bottom */
  .bundles-section {
    padding: 52px 0 60px;
  }

  /* home-page-pillar: no responsive rule exists */
  .home-page-pillar {
    padding: 52px 0 60px;
  }

  /* Home-page-testimonials: uses Bootstrap py-5, covered above — also set directly */
  .Home-page-testimonials {
    padding-top: 52px !important;
    padding-bottom: 60px !important;
  }

  /* va_support_sec: style.css has 50px 0 at this breakpoint */
  .va_support_sec {
    padding: 52px 0 60px;
  }

  /* va_benefit_sec: style.css has 50px 0 at this breakpoint */
  .va_benefit_sec {
    padding: 52px 0 60px;
  }

  /* va_why_sec: style.css has 45px 0 55px at this breakpoint */
  .va_why_sec {
    padding: 52px 0 60px;
  }

  /* va_receive_sec: style.css has 50px 0 at this breakpoint */
  .va_receive_sec {
    padding: 52px 0 60px;
  }

  /* soc-covers / soc-flow: these use Bootstrap pt-5 pb-5 on the <section> tag,
     so they are already normalised by the Bootstrap overrides above. */

  /* timeline-section: style.css has desktop 45px 0 50px and a REVERSED rule
     at 991px where it sets 56px 0 64px (larger than desktop) — normalise */
  .timeline-section {
    padding: 52px 0 60px;
  }

  /* isms_who_needs: style.css has 40px 24px (no zero-gutter sides) — add top/bottom only */
  .isms_who_needs {
    padding-top: 52px;
    padding-bottom: 60px;
  }

}


/* ──────────────────────────────────────────────────────────────────────────
   MOBILE (≤767.98px) — section spacing normalisation
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Bootstrap utility overrides for sections using pt-5 / pb-5 / py-5 */
  .pt-5 {
    padding-top: 44px !important;
  }
  .pb-5 {
    padding-bottom: 52px !important;
  }
  .py-5 {
    padding-top: 44px !important;
    padding-bottom: 52px !important;
  }

  /* services-section: style.css has 44px 0 52px — already correct, no override needed */

  /* bundles-section: style.css has 44px 0 40px — fix bottom */
  .bundles-section {
    padding: 44px 0 52px;
  }

  /* home-page-pillar: existing responsive.css has 45px 0 — normalise */
  .home-page-pillar {
    padding: 44px 0 52px;
  }

  /* Home-page-testimonials: existing responsive.css has 45px/40px — normalise */
  .Home-page-testimonials {
    padding-top: 44px !important;
    padding-bottom: 52px !important;
  }

  /* va_support_sec: no mobile rule exists */
  .va_support_sec {
    padding: 44px 0 52px;
  }

  /* va_benefit_sec: no mobile rule exists */
  .va_benefit_sec {
    padding: 44px 0 52px;
  }

  /* va_why_sec: no mobile rule exists */
  .va_why_sec {
    padding: 44px 0 52px;
  }

  /* va_receive_sec: no mobile rule exists */
  .va_receive_sec {
    padding: 44px 0 52px;
  }

  /* soc-covers / soc-flow: these use Bootstrap pt-5 pb-5 on the <section> tag,
     so they are already normalised by the Bootstrap overrides above. */

  /* soc-benefits: inner .soc-benefits-copy drives vertical spacing intentionally;
     only normalise the section-level bottom pad that style.css sets explicitly */
  .soc-benefits {
    padding-bottom: 52px;
  }

  /* timeline-section: no mobile rule exists */
  .timeline-section {
    padding: 44px 0 52px;
  }

  /* isms_who_needs: no mobile rule */
  .isms_who_needs {
    padding-top: 44px;
    padding-bottom: 52px;
  }
  .pci_banner_content ul {
    display: none;
  }
.pci-btn-bnr {
  display: none;
}
.row.align-items-center.pci-what-is-card {
  padding-bottom: 0;
}
}