/* ================================================================
   IEEE An-Najah — Mobile & Responsive Polish
   Loaded LAST (after theme.css). Overrides only for ≤ desktop.
   Desktop layout (>= 992px) is NEVER touched.
   ================================================================ */

/* ───────────────────────────────────────────────────────────────
   0.  BASELINE SAFETY — applied unconditionally (safe additions)
   ─────────────────────────────────────────────────────────────── */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent all media from blowing out the viewport */
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Community off-canvas sidebars: fix broken 100vh width */
.navbarwie, .navbarras, .navbarcs, .navbarpes, .navbarbh {
  width: 100vw !important;
  max-width: 360px;
}

/* Touch: disable hover-only dropdowns (they don't fire on touch) */
@media (hover: none) {
  .dropdownwie:hover .dropdownwie-menu,
  .dropdownras:hover .dropdownras-menu,
  .dropdowncs:hover .dropdowncs-menu,
  .dropdownpes:hover .dropdownpes-menu,
  .dropdownbh:hover .dropdownbh-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }
}


/* ───────────────────────────────────────────────────────────────
   1.  TABLET  ≤ 991.98px
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* ── Navbar: brand + toggler row ── */
  .navbar > .container {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .navbar-brand { flex: 0 0 auto; }

  .navbar-toggler {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.45rem 0.7rem;
    margin-left: auto;
  }

  /* ── Collapsed menu panel ── */
  .navbar-collapse {
    flex-basis: 100% !important;
    width: 100% !important;
    background: linear-gradient(160deg, #021e35 0%, #0567a0 100%);
    border-radius: 0 0 16px 16px;
    padding: 0.5rem 0.75rem 1.25rem;
    margin-top: 0.3rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar .navbar-nav {
    gap: 0.1rem;
    width: 100%;
  }

  .navbar .nav-item { width: 100%; }

  .navbar :is(.nav-link, .navbh-link, .navcs-link, .navpes-link,
              .navras-link, .navwie-link, .navWie-link) {
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center;
    width: 100% !important;
    color: rgba(255,255,255,0.90) !important;
  }

  .navbar .nav-link:hover,
  .navbar .nav-link:focus {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
  }

  /* Active state in mobile menu */
  .navbar .nav-link.nav-active {
    background: rgba(255,255,255,0.13) !important;
    color: #ffd060 !important;
    font-weight: 600 !important;
  }

  /* Join Us pill — reset on mobile */
  .navbar .nav-join {
    margin-top: 0.4rem;
  }

  /* ── Communities dropdown inside collapse ── */
  #communitiesMenu {
    background: rgba(255,255,255,0.06) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 0.25rem 0.5rem !important;
    margin-top: 0.15rem !important;
  }

  #communitiesMenu .dropdown-item {
    color: rgba(255,255,255,0.82) !important;
    padding: 0.55rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
  }

  #communitiesMenu .dropdown-item:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
  }

  /* Community sub-menus: revert absolute to static inside collapse */
  .dropdownbh-menu, .dropdowncs-menu, .dropdownpes-menu,
  .dropdownras-menu, .dropdownwie-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    display: none !important;
    box-shadow: none !important;
    margin-top: 0.25rem !important;
    padding: 0.4rem 1rem;
    border-radius: 8px;
  }

  /* ── Decorative title lines ── */
  .wie-title-container::before, .wie-title-container::after,
  .ras-title-container::before, .ras-title-container::after,
  .cs-title-container::before,  .cs-title-container::after,
  .bh-title-container::before,  .bh-title-container::after,
  .pes-title-container::before, .pes-title-container::after {
    width: 100px !important;
  }

  /* ── definition container ── */
  .definition .container {
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── Community member cards wrap ── */
  .comm-members-wrap {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.85rem !important;
  }
  .comm-member-card {
    width: 160px !important;
    flex-shrink: 0;
  }

  /* ── Table overflow ── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  thead, tbody, tfoot { min-width: max-content; }

  /* ── Admin: un-sticky sidebar on tablet ── */
  .admin-shell .col-lg-4 {
    position: static !important;
  }

  /* ── Hero badges align left on tablet ── */
  .admin-hero-badges {
    justify-content: flex-start;
  }

  /* ── Footer top stacking ── */
  .footer .top,
  .top, .topwie, .topras, .topcs, .toppes, .topbh {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.75rem !important;
  }

  .topitem {
    width: 100% !important;
    padding-right: 0 !important;
    text-align: center !important;
    border: none !important;
  }

  .borderright, .borderrightwie, .borderrightras,
  .borderrightcs, .borderrightpes, .borderrightbh {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding-bottom: 1.5rem;
  }

  .bottom, .bottomwie, .bottomras, .bottomcs, .bottompes, .bottombh {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    text-align: center;
  }
}


/* ───────────────────────────────────────────────────────────────
   2.  MOBILE  ≤ 767.98px
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── Section spacing ── */
  section, .section       { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-5                   { padding-top: 2rem !important;   padding-bottom: 2rem !important; }
  .py-4                   { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  /* ── mycontainer ── */
  .mycontainer {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Hero / index carousel ── */
  .index-header .carousel-item img {
    height: 44vh !important;
    min-height: 200px !important;
  }

  /* ── .new + .descriptions (news / all community pages) ── */
  .new {
    width: 100% !important;
    padding: 1.25rem 1rem !important;
    align-items: center;
  }
  .new img {
    width: 80% !important;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }
  .descriptions {
    width: 100% !important;
    padding: 1.25rem 1rem !important;
  }

  /* ── definition .row ── */
  .definition .row {
    gap: 1rem !important;
  }

  /* ── Team cards ── */
  .team-card {
    width: 46% !important;
    min-width: 140px;
  }

  /* ── Member images (community pages old layout) ── */
  .member-image-admin,
  .member-image-adminras,
  .member-image-adminras1,
  .member-image-admincs,
  .member-image-admincs1,
  .member-image-adminbh,
  .member-image-adminwie,
  .member-image-adminpes {
    width: 7.5rem !important;
  }

  /* ── Administrative rows with negative positions ── */
  .Administrative {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .socialmediamanager {
    width: 100% !important;
    flex-wrap: wrap !important;
    top: 0 !important;
    position: relative !important;
    justify-content: center !important;
  }
  .vice-chairs {
    top: 0 !important;
    position: relative !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .adminsoc {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .chairs {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .InfoAdmincs1 {
    position: static !important;
    left: unset !important;
    top: unset !important;
    width: 90% !important;
    margin: 0 auto !important;
  }
  .InfoAdminras1 {
    position: static !important;
    left: unset !important;
    top: unset !important;
    width: 90% !important;
    margin: 0 auto !important;
  }
  .member {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  /* ── Community header sections → stack vertically ── */
  .wieparent,
  .cysparent,
  .comparent,
  .pesparent,
  .bhparent,
  .rasparent,
  .csparent {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .wieparent > .w-50,
  .cysparent > .w-50,
  .comparent > .w-50,
  .pesparent > .w-50,
  .bhparent  > .w-50,
  .rasparent > .w-50,
  .csparent  > .w-50 {
    width: 100% !important;
    padding: 0 1rem !important;
    margin: 0 !important;
  }

  /* Fix logo images inside community headers */
  .cysparent .comlogo img,
  .comparent .comlogo img,
  .pesparent .comlogo img,
  .bhparent  .comlogo img,
  .rasparent .comlogo img,
  .csparent  .comlogo img,
  .wieparent .comlogo img {
    width: 160px !important;
    max-width: 55vw !important;
  }

  /* Comm-members-wrap full width when stacked */
  .cysparent .comm-members-wrap,
  .comparent .comm-members-wrap,
  .pesparent .comm-members-wrap,
  .bhparent  .comm-members-wrap,
  .rasparent .comm-members-wrap,
  .csparent  .comm-members-wrap,
  .wieparent .comm-members-wrap {
    width: 100% !important;
  }

  .wieparent .img-containerr {
    margin: 0 auto !important;
    width: 75% !important;
    max-width: 220px;
  }

  /* ── Footer ── */
  .footer, .footerwie, .footerras, .footercs, .footerpes, .footerbh {
    height: auto !important;
    min-height: unset !important;
    margin-top: 0 !important;
  }
  .telfooter, .telfooterwie, .telfooterras,
  .telfootercs, .telfooterpes, .telfooterbh {
    font-size: 1.6rem !important;
    width: 100% !important;
    text-align: center;
  }
  .top, .topwie, .topras, .topcs, .toppes, .topbh,
  .footer .top {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.75rem !important;
  }
  .topitem, .footer .topitem {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: center;
  }
  .borderright, .borderrightwie, .borderrightras,
  .borderrightcs, .borderrightpes, .borderrightbh {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 1.5rem;
  }
  .bottom, .bottomwie, .bottomras, .bottomcs, .bottompes, .bottombh {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    text-align: center;
  }
  .footerlogo  { width: 50% !important; }
  .sociallinks {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    width: 100%;
    margin-top: 1rem;
  }
  .footer .sociallinks { margin-top: 1.25rem; }
  .footer h2  { margin-top: 0.5rem; }
  .footer p   { text-align: center; }
  .footer .contactussmall {
    max-height: none !important;
    padding: 10px !important;
    position: static !important;
    bottom: unset !important;
  }
  .marginsmalltop { margin-top: 1.5rem !important; }

  /* ── generator-container ── */
  .generator-container {
    width: 100% !important;
    padding: 1rem !important;
  }

  /* ── Contact page ── */
  .header-contact {
    min-height: 120px !important;
    padding: 1.5rem 0 !important;
  }
  .telandemail .row {
    flex-direction: column !important;
  }
  .telph {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
  }

  /* ── Carousel arrows on mobile ── */
  .carousel-control-prev { left: 4px !important; }
  .carousel-control-next { right: 4px !important; }

  /* ── Activity cards — 2 per row on mobile ── */
  .activities-page .activity .childes {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    align-items: start !important;
    flex-direction: unset !important;
  }

  .activities-page .activity .child {
    width: 100% !important;
    max-width: 100% !important;
    min-height: unset !important;
    align-self: start !important;
  }

  /* shrink image */
  .activities-page .activity .child .image {
    height: 110px !important;
    width: 100% !important;
    left: 0 !important;
  }

  /* shrink text & layout */
  .activities-page .child .holder {
    flex: none !important;
    padding: 0.3rem 0.4rem 0.5rem !important;
  }
  .activities-page .child .info {
    flex: none !important;
    font-size: 0.72rem !important;
    padding: 2px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .activities-page .child .title    { font-size: 0.78rem !important; margin-bottom: 0.15rem !important; }
  .activities-page .child .date     { font-size: 0.62rem !important; margin-bottom: 0 !important; }
  .activities-page .child .locdate  { display: none !important; }
  .activities-page .child .activity-card-meta { margin-top: 0.2rem !important; }
  .activities-page .child .activity-read-more {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.55rem !important;
    width: auto !important;
    min-width: unset !important;
    margin-top: 0.35rem !important;
  }

  /* ── Community member cards ── */
  .comm-member-card {
    width: 140px !important;
  }

  /* ── Hide decorative floating circles ── */
  .offercircleimg1, .offercircleimg2 {
    display: none !important;
  }

  /* ── Different-services (tabbed hero) ── */
  .deifferentservices {
    height: auto !important;
    min-height: 55vh;
    overflow: hidden;
  }
  .tab {
    height: auto !important;
    position: relative !important;
    flex-direction: column !important;
    top: unset !important;
    bottom: unset !important;
  }
  .tablinks {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 12px 16px !important;
    width: 100% !important;
  }
  .tablinks h2 { font-size: 13px !important; }
  .tablinks p  { font-size: 10px !important; width: 100% !important; }

  /* ── Offer section ── */
  .offer { padding: 2rem 0 !important; }

  /* ── Testimonials ── */
  .testimonials { min-height: auto !important; }
  .testimonials h2 {
    font-size: 1.2rem !important;
    width: 100% !important;
  }
  .testimonials .aboutus  { font-size: 1rem !important; padding: 0.5rem !important; }
  .testimonials p.w-50 {
    width: 92% !important;
    font-size: 1rem !important;
    padding: 0.75rem !important;
    line-height: 1.6 !important;
  }

  /* ── Fingertips section ── */
  .fingertips { background-image: none !important; }

  /* ── Our Price ── */
  .ourprice h2 { font-size: 1.5rem !important; margin-bottom: 1.25rem !important; }
  #myTabs {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  #myTabs .nav-item {
    width: calc(50% - 0.25rem) !important;
  }
  #myTabs .btn-custom {
    font-size: 0.83rem !important;
    padding: 0.4rem 0.6rem !important;
    width: 100%;
  }

  /* ── Price / content stacking ── */
  .priceimg, .content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
  }

  /* ── item grid (services items, 45% width) ── */
  .item:nth-child(1), .item:nth-child(2), .item:nth-child(3),
  .item:nth-child(4), .item:nth-child(5), .item:nth-child(6),
  .item:nth-child(7), .item:nth-child(8), .item:nth-child(9) {
    width: 100% !important;
  }

  /* ── btn1 / btn2 ── */
  .btn1, .btn2 {
    width: 100% !important;
    max-width: 300px;
    height: 52px !important;
  }
  .btn1 a, .btn2 a {
    white-space: normal;
  }

  /* ── CTA button row ── */
  .d-flex.gap-3.justify-content-center.align-items-center.w-100.mt-4 {
    flex-direction: column !important;
    gap: 0.6rem !important;
    align-items: stretch !important;
  }

  /* ── Touch buttons — all primary actions ── */
  .submit-btn, .scedule,
  .bookatablebtnras, .bookatablebtncs, .bookatablebtnwie,
  .bookatablebtnpes, .bookatablebtnbh, .bookatablebtn,
  .btn-custom, .activity-read-more {
    min-height: 44px !important;
  }

  /* ── FAQ section ── */
  .faq .row {
    flex-direction: column-reverse !important;
    gap: 1.5rem !important;
  }
  .faq img {
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto 1.25rem auto;
    display: block;
  }
  #accordionExample { width: 100% !important; }
  .faq-item { padding: 1.25rem !important; }
  .faq-question { font-size: 15px !important; }
  .faq-answer   { font-size: 13px !important; }
  .faq-question .w-75, .faq-question .w-25 { width: auto !important; }

  /* ── Title decorative lines ── */
  .wie-title-container::before, .wie-title-container::after,
  .ras-title-container::before, .ras-title-container::after,
  .cs-title-container::before,  .cs-title-container::after,
  .bh-title-container::before,  .bh-title-container::after,
  .pes-title-container::before, .pes-title-container::after {
    width: 60px !important;
  }

  /* ── Modal ── */
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  /* ── Activity section ── */
  .activity { width: 100% !important; }

  /* ── News container ── */
  .news .container {
    width: 100% !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* ── CV builder page ── */
  .cvb-hero { padding: 1.75rem 0 1.25rem !important; }
  .cvb-main { padding: 1rem !important; }

  /* ── Member/admin dashboard ── */
  .member-page-shell { padding-top: 8rem !important; }
  .hero-card         { padding: 1.25rem !important; }
  .member-profile-header .member-header-title { font-size: 1.25rem !important; }
  .points-pill { min-width: 110px !important; padding: 0.75rem 1rem !important; }
  .points-pill strong { font-size: 1.8rem !important; }
  .admin-shell .container-fluid,
  .member-page-shell .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .admin-shell table,
  .member-page-shell table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── Announcement rows ── */
  .ann-row { padding: 0.75rem !important; font-size: 0.87rem; }

  /* ── chooseus background ── */
  .chooseus { background: none !important; }
}


/* ───────────────────────────────────────────────────────────────
   3.  SMALL MOBILE  ≤ 575.98px
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

  /* ── Containers ── */
  .container, .container-fluid {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  /* ── Typography ── */
  h1, .h1 { font-size: 1.55rem !important; line-height: 1.25 !important; }
  h2, .h2 { font-size: 1.3rem  !important; line-height: 1.3  !important; }
  h3, .h3 { font-size: 1.1rem  !important; }
  h4, .h4 { font-size: 1rem    !important; }

  /* ── Navbar brand ── */
  .navbar-brand img { max-height: 38px !important; }

  /* ── Hero ── */
  .index-header .carousel-item img {
    height: 38vh !important;
    min-height: 175px !important;
  }

  /* ── Team cards full-width ── */
  .team-card {
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Img containers in team section ── */
  .img-container {
    width: 50% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .img-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ── Info boxes (team name/position) ── */
  .Infonad, .InfoAdmin, .InfoAdminpes,
  .InfoAdminwie, .InfoAdminras, .InfoAdminBH, .InfoAdmincs {
    width: 49% !important;
    text-wrap: wrap !important;
    align-items: center !important;
  }

  /* ── Footer phone heading ── */
  .telfooter, .telfooterwie, .telfooterras,
  .telfootercs, .telfooterpes, .telfooterbh {
    font-size: 1.25rem !important;
    width: 100% !important;
  }

  /* ── Social icons ── */
  .social1, .social1wie, .social1ras, .social1cs,
  .social1pes, .social1bh {
    width: 38px !important;
    height: 38px !important;
  }

  /* ── Community member cards ── */
  .comm-member-card { width: 130px !important; }

  /* ── Forms: 16px prevents iOS auto-zoom ── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select,
  .form-control,
  .form-select {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea, .form-control[rows] { min-height: auto !important; }

  /* ── Buttons: 44px touch target ── */
  .btn-custom, .submit-btn,
  .scedule, .bookatablebtnras, .bookatablebtncs,
  .bookatablebtnwie, .bookatablebtnpes, .bookatablebtnbh,
  .bookatablebtn, .activity-read-more {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  /* Scoped to legacy community CTA buttons only — do NOT apply to all .btn */
  .bookatablebtn,
  .bookatablebtnras, .bookatablebtncs,
  .bookatablebtnwie, .bookatablebtnpes, .bookatablebtnbh {
    min-width: 135px !important;
    height: 46px !important;
    margin: 8px 6px !important;
  }

  /* ── Aboutres card ── */
  .aboutres { padding: 1.25rem 0.9rem !important; }

  /* ── Contact page iframe ── */
  .contactusiframe { height: 220px !important; }

  /* ── Offer circles: always hidden on mobile ── */
  .offercircleimg1, .offercircleimg2 { display: none !important; }

  /* ── CV builder ── */
  .bookatablebtn {
    width: auto !important;
    padding: 10px 18px !important;
  }

  /* ── Title containers ── */
  .cs-title-container, .pes-title-container, .wie-title-container,
  .ras-title-container, .bh-title-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    white-space: nowrap !important;
    font-size: 17px !important;
  }
  .cs-title-container::before,  .cs-title-container::after,
  .pes-title-container::before, .pes-title-container::after,
  .wie-title-container::before, .wie-title-container::after,
  .ras-title-container::before, .ras-title-container::after,
  .bh-title-container::before,  .bh-title-container::after {
    width: 50px !important;
  }

  /* ── Modal ── */
  .modal-body, .modal-header, .modal-footer { padding: 1rem !important; }
  .modal-dialog { margin: 0.4rem !important; max-width: calc(100% - 0.8rem) !important; }

  /* ── Summary grid on member profile ── */
  .summary-grid { grid-template-columns: 1fr !important; }
  .member-card  { padding: 1rem !important; border-radius: 16px !important; }
}


/* ───────────────────────────────────────────────────────────────
   4.  EXTRA SMALL  ≤ 479px  (320 – 479px range)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {

  /* ── Containers ── */
  .container, .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* ── Typography ── */
  h1, .h1 { font-size: 1.35rem !important; }
  h2, .h2 { font-size: 1.15rem !important; }
  h3, .h3 { font-size: 1rem    !important; }

  /* ── Navbar brand ── */
  .navbar-brand img { max-height: 34px !important; }

  /* ── Hero image ── */
  .index-header .carousel-item img {
    height: 34vh !important;
    min-height: 155px !important;
  }

  /* ── Footer phone ── */
  .telfooter, .telfooterwie, .telfooterras,
  .telfootercs, .telfooterpes, .telfooterbh {
    font-size: 1.05rem !important;
  }

  /* ── Community member cards ── */
  .comm-member-card { width: 110px !important; }
  .comm-member-name { font-size: 0.73rem !important; }
  .comm-member-role { font-size: 0.63rem !important; }

  /* ── Member images ── */
  .member-image-admin, .member-image-adminras, .member-image-admincs,
  .member-image-adminbh, .member-image-adminwie, .member-image-adminpes {
    width: 5.5rem !important;
  }

  /* ── Tab links ── */
  .tablinks h2 { font-size: 11px !important; }
  .tablinks p  { font-size: 9px  !important; }

  /* ── Our Price ── */
  .ourprice h2 { font-size: 1.2rem !important; }

  /* ── Testimonials ── */
  .testimonials h2 { font-size: 1rem !important; }

  /* ── .new image ── */
  .new img { width: 92% !important; }

  /* ── FAQ ── */
  .faq-question { font-size: 13px !important; }
  .faq-answer   { font-size: 12px !important; }

  /* ── Activity cards — keep 2 columns on very small screens ── */
  .activities-page .activity .childes {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
  }

  /* ── Btn pair ── */
  .btn1, .btn2 { max-width: 100%; }
}


/* ───────────────────────────────────────────────────────────────
   5.  LANDSCAPE PHONES  (≤ 812px width, ≤ 500px height)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 812px) and (max-height: 500px) and (orientation: landscape) {

  .navbar.navbar-expand-lg { min-height: 50px !important; }

  .index-header .carousel-item img {
    height: 75vw !important;
    min-height: 130px !important;
  }

  .footer, .footerwie, .footerras, .footercs, .footerpes, .footerbh {
    height: auto !important;
    min-height: unset !important;
  }

  .deifferentservices {
    height: auto !important;
    min-height: 45vw;
  }

  section, .section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   6.  TOUCH DEVICE ENHANCEMENTS (pointer: coarse = touch)
   ─────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {

  /* Minimum tap targets for all interactive elements */
  a, button, [role="button"],
  .nav-link, .navbar-toggler,
  .tablinks, .faq-item,
  .activity-read-more, .btn, .btn1, .btn2,
  .submit-btn, .scedule,
  .bookatablebtnras, .bookatablebtncs, .bookatablebtnwie,
  .bookatablebtnpes, .bookatablebtnbh, .bookatablebtn,
  .btn-custom, .carousel-control-prev, .carousel-control-next,
  .social1, .social1wie, .social1ras, .social1cs,
  .social1pes, .social1bh, .social-icon,
  .comm-linkedin, .member-linkedin {
    min-height: 44px;
    min-width: 44px;
  }

  /* Disable hover-only transforms (they "stick" on touch) */
  .team-card:hover             { transform: none !important; }
  .member-card:hover           { transform: none !important; }
  .comm-member-card:hover      { transform: none !important; }
  .services:hover              { transform: none !important; }
  .activities-page .activity .child:hover { transform: none !important; }

  /* Keep overlays visible without hover on touch */
  .member-card:active .member-overlay,
  .comm-member-card:active .comm-overlay {
    opacity: 1;
  }

  /* Smooth momentum scrolling on scroll containers */
  .navbar-collapse,
  .table-responsive,
  .modal-body {
    -webkit-overflow-scrolling: touch;
  }

  /* Hide custom cursor on touch (it's invisible anyway) */
  #cursor { display: none !important; }

  /* Prevent text selection on interactive cards */
  .child, .team-card, .comm-member-card, .member-card {
    -webkit-user-select: none;
    user-select: none;
  }

  /* App-store buttons full width on touch */
  .app-store-button { width: 100% !important; }
}


/* ───────────────────────────────────────────────────────────────
   7.  REDUCED MOTION — respect user preferences
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carousel { --bs-carousel-transition-duration: 0ms; }
}


/* ───────────────────────────────────────────────────────────────
   8.  TICKER — mobile refinements
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .ticker-label {
    font-size: 0.58rem !important;
    padding: 0 0.6rem !important;
    letter-spacing: 0.8px !important;
  }
  #announcementTicker { height: 32px !important; }
  .ticker-close { padding: 0 0.5rem !important; }
}

@media (max-width: 479px) {
  /* On very small phones, hide the "IEEE News" label so text gets full width */
  .ticker-label { display: none !important; }
  #announcementTicker { height: 30px !important; }
  .ticker-item { padding: 0 0.75rem !important; }
  .ticker-item-title { font-size: 0.7rem !important; }
}


/* ───────────────────────────────────────────────────────────────
   9.  COMMUNITY HEADER — description text scaling
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .cysparent p.fs-5,
  .comparent p.fs-5,
  .pesparent p.fs-5,
  .bhparent  p.fs-5,
  .rasparent p.fs-5,
  .csparent  p.fs-5,
  .wieparent p.fs-5 {
    font-size: 0.93rem !important;
    line-height: 1.65 !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   10. CAROUSEL — hide placeholder skeleton on mobile once loaded
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  #carouselExampleControls { border-radius: 0 !important; }
}


/* ───────────────────────────────────────────────────────────────
   11. PAGE TRANSITION — respect reduced-motion
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body, body.is-leaving { animation: none !important; }
}


/* ───────────────────────────────────────────────────────────────
   12. NEWS PAGE — live-event-card mobile layout
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  .live-event-card {
    padding: 1rem 0.5rem !important;
    border-radius: 14px !important;
    margin-bottom: 2rem !important;
  }

  /* Title+image block: override Bootstrap text-nowrap, go full-width */
  .live-event-card .new {
    width: 100% !important;
    padding: 0 0 0.75rem !important;
    white-space: normal !important;
    text-align: center;
  }

  .live-event-card .news-title {
    font-size: 1.1rem !important;
    white-space: normal !important;
    word-break: break-word;
    margin-bottom: 0.6rem;
    line-height: 1.35 !important;
  }

  .live-event-card .news-cover {
    width: 100% !important;
    max-height: 210px !important;
    border-radius: 12px !important;
  }

  /* Description: full-width, left-aligned, tighter font */
  .live-event-card .news-description,
  .live-event-card .descriptions {
    width: 100% !important;
    padding: 0.25rem 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    text-align: start !important;
  }

  /* Attendance form: stack the 3 col-md-4 columns vertically */
  .live-attendance-box {
    padding: 0.85rem !important;
    border-radius: 10px !important;
  }

  .live-attendance-box .row.g-2 {
    flex-direction: column !important;
  }

  .live-attendance-box .row.g-2 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .live-attendance-box .d-grid,
  .live-attendance-box .btn {
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  .live-event-card .news-title { font-size: 1rem !important; }
  .live-event-card .news-cover { max-height: 175px !important; }
  .live-event-card .news-description { font-size: 0.83rem !important; }
}


/* ───────────────────────────────────────────────────────────────
   13. COMMUNITY PAGES — dynamic event cards grid
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* 2-column grid for community event cards (same treatment as activities page) */
  .community-live-section .childes {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    align-items: start !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }

  .community-live-section .child {
    width: 100% !important;
    max-width: 100% !important;
    min-height: unset !important;
    align-self: start !important;
  }

  .community-live-section .child .image {
    height: 110px !important;
    width: 100% !important;
    left: 0 !important;
    overflow: hidden;
  }

  .community-live-section .child .image img,
  .community-live-section .child .image .carousel,
  .community-live-section .child .image .carousel-inner,
  .community-live-section .child .image .carousel-item,
  .community-live-section .child .image .carousel-item img {
    height: 110px !important;
    object-fit: cover;
    width: 100%;
  }

  .community-live-section .child .holder {
    flex: none !important;
    padding: 0.3rem 0.4rem 0.5rem !important;
  }

  .community-live-section .child .info {
    flex: none !important;
    font-size: 0.72rem !important;
    padding: 2px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .community-live-section .child .title {
    font-size: 0.78rem !important;
    margin-bottom: 0.15rem !important;
    word-break: break-word;
  }

  .community-live-section .child .date {
    font-size: 0.62rem !important;
    margin-bottom: 0 !important;
  }

  .community-live-section .child .locdate { display: none !important; }

  .community-live-section .child .community-card-meta { margin-top: 0.2rem !important; }

  .community-live-section .child .activity-read-more {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.55rem !important;
    width: auto !important;
    min-width: unset !important;
    margin-top: 0.35rem !important;
  }

  /* Community header section spacing */
  .community-live-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

@media (max-width: 479px) {
  .community-live-section .childes {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
  }
  .community-live-section .child .image { height: 90px !important; }
  .community-live-section .child .image img,
  .community-live-section .child .image .carousel-item img {
    height: 90px !important;
  }
}