/* ============================================================
   TenderMENA — Responsive Additions
   Drop this AFTER home.css and common.css in your <head>.
   Breakpoints:
     xl  : ≤ 1280px
     lg  : ≤ 1024px
     md  : ≤ 768px
     sm  : ≤ 480px
     xs  : ≤ 360px
   All rules are additive — nothing here overrides desktop
   intent, only adapts layout/sizing for smaller viewports.
   ============================================================ */

/* Home Page CSS  */

/* ─── 0. BASE RESETS ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg {
  max-width: 100%;
}

/* ─── 1. HEADER / NAVIGATION ─────────────────────────────── */


/* Large desktop — no change */

/* ≤ 1280px : tighten nav spacing */
@media (max-width: 1280px) {
  .nav-inner {
    padding: 0 20px;
  }
  .nav-menu a,
  .nm-item > a {
    padding: 0 10px;
    font-size: 13.5px;
  }
}

/* ≤ 1024px : collapse nav into a hamburger */
@media (max-width: 820px) {

  .btn-register {
    /* font-size: 12px;
    padding: 6px 12px; */
    display: none;
  }
  /* Hamburger button — inject via JS or add in HTML */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
    order: 3;
    z-index: 200;
  }
  .nav-hamburger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
  }
  .nav-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
  }


  /* Hide desktop nav by default on tablet/mobile */


  .nav-menu a,
  .nm-item > a {
    padding: 10px 16px;
    font-size: 14px;
    border-left: none !important;
    width: 100%;
  }

  /* Mega menus — stack inline on mobile */
  .mega {
    position: static !important;
    display: none;
    flex-direction: column;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    width: 100%;
    border-radius: 0;
    gap: 0;
  }
  .nm-item.mega-open > .mega {
    display: flex;
  }
  .mega .mc {
    padding: 8px 24px;
  }
  .mega .mc-title {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .mega .mc a {
    padding: 5px 0;
    font-size: 13px;
  }

  .nm-item > a .caret {
    float: right;
    transition: transform 0.2s;
  }
  .nm-item.mega-open > a .caret {
    transform: rotate(180deg);
  }

  .nav-right {
    gap: 8px;
    margin-left: auto;
  }
  .btn-register {
    font-size: 13px;
    padding: 7px 14px;
  }
  .lang-btn {
    font-size: 13px;
    padding: 6px 10px;
  }
 
}

@media (min-width : 1040px){
  .logo{
    margin-right: 0;
  }
}

@media (max-width : 1040px){
   .nav-inner {
    flex-wrap: wrap;
    padding: 0 16px;
    position: relative;
  }
    .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 4;
    background: inherit;
    padding: 8px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0;
  }
  .nav-menu.open {
    display: flex;
  }
}

/* ≤ 480px : hide language button, shrink register */
@media (max-width: 480px) {
/* @media (min-width: 377px) and (max-width: 480px) { */
  .lang-btn {
    display: none;
  }
  /* .btn-register {
    font-size: 12px;
    padding: 6px 12px;
    display: none;
  } */
}
/* Css for Make register button responsive for mobile screen */
/* @media (max-width: 376px) {
  .btn-register{
    font-size: 11px;  
    padding: 5px 4px;
    margin-left: -36px;
  }
} */


/* ─── 2. HERO SECTION ────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero-h1 {
    font-size: clamp(22px, 4vw, 38px);
    br { display: none; }
  }
  .hero-sub {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 16px 0;
  }
  .hero-inner {
    padding: 0;
    text-align: center;
  }
  .hero-h1 {
    font-size: clamp(20px, 5.5vw, 32px);
    line-height: 1.3;
  }
  .hero-h1 br {
    display: none;
  }
  .hero-sub {
    font-size: 13.5px;
    margin: 10px auto;
    max-width: 90%;
  }

  /* Search box — stack vertically */
  .search-box {
    flex-direction: column;
    gap: 8px;
    border-radius: 12px;
    padding: 10px;
  }
  .cs {
    width: 100%;
  }
  .cs-trigger {
    width: 100%;
    justify-content: flex-start;
    height: 40px;
    border-radius: 10px;

  }
  .cs-drop {
    width: 100%;
  }
  .sb-input {
    width: 100%;
    /* border-left: none; */
    /* border-top: 1px solid rgba(255,255,255,0.12); */
    padding: 10px 12px;
    border: 1px solid #eaf2fb;
    border-radius: 10px;
  }
  .sb-btn {
    width: 100%;
    justify-content: center;
    padding: 11px;
    border-radius: 8px;
  }

  /* Quick links — wrap */
  .hero-ql {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .ql {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* CTA buttons — stack */
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .btn-hero-pri,
  .btn-hero-wa,
  .btn-hero-out {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-badge {
    font-size: 11px;
    padding: 5px 12px;
  }
  .hero-h1 {
    font-size: 22px;
  }
}

/* ─── 3. STATS STRIP ─────────────────────────────────────── */

@media (max-width: 768px) {
  .stats-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stats-strip::-webkit-scrollbar {
    display: none;
  }
  .stats-inner {
    min-width: max-content;
    gap: 0;
    padding: 0 8px;
  }
  .stat-it {
    padding: 14px 18px;
    min-width: 90px;
  }
  .stat-val {
    font-size: 20px;
  }
  .stat-lbl {
    font-size: 10px;
  }
}

/* ─── 4. FREE TRIAL BANNER ───────────────────────────────── */

@media (max-width: 768px) {
  .trial-banner {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
  }
  .tb-features {
    flex-wrap: wrap;
    gap: 6px;
  }
  .tb-feat {
    font-size: 11px;
    padding: 4px 8px;
  }
  .tb-cta {
    width: 100%;
    text-align: center;
  }
}

/* ─── 5. SECTOR / KEYWORD GRID ───────────────────────────── */

@media (max-width: 1024px) {
  .kw-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .kw-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kw-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .kw-img {
    font-size: 24px;
    min-width: 36px;
    text-align: center;
  }
  .kw-name {
    font-size: 13px;
  }
  .kw-count {
    font-size: 11px;
  }
  .cc-btn {
    font-size: 11px;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .kw-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .kw-card {
    flex-direction: column;
    text-align: center;
    padding: 12px 8px;
  }
  .kw-body {
    align-items: center;
  }
  .cc-btn {
    display: none; /* declutter on tiny screens */
  }
}

/* ─── 6. COUNTRY GRID ────────────────────────────────────── */

@media (max-width: 1024px) {
  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .country-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .country-card {
    padding: 16px 14px;
  }
  .cc-flag .fi {
    font-size: 28px;
  }
  .cc-name {
    font-size: 14px;
  }
  .cc-count,
  .cc-val {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .country-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .country-card {
    padding: 12px 10px;
  }
  .cc-flag .fi {
    font-size: 24px;
  }
}

/* ─── 7. TWO-COLUMN TENDER + SIDEBAR GRID ────────────────── */

@media (max-width: 1024px) {
  .page-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  /* Sidebar stacks below main on tablet */
  aside {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .reg-box,
  .wa-box,
  .pro-box {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .page-grid {
    padding: 0 12px;
  }
  aside {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* t2 — stack the two tender columns */
  .t2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ─── 8. TENDER LIST CARDS ───────────────────────────────── */

@media (max-width: 768px) {
  .tlc {
    border-radius: 10px;
  }
  .tlc-hd {
    padding: 12px 14px;
  }
  .tlc-hd h3 {
    font-size: 14px;
  }

  .tr {
    padding: 10px 14px;
    gap: 6px;
  }
  .tr-row1 {
    flex-wrap: wrap;
    gap: 4px;
  }
  .tr-title {
    font-size: 13px;
    line-height: 1.4;
  }
  .tr-id {
    font-size: 10px;
  }
  .tr-row2 {
    flex-wrap: wrap;
    gap: 5px;
    font-size: 11px;
  }
  .tr-dl {
    margin-left: 0 !important;
    width: 100%;
    text-align: right;
  }
}

@media (max-width: 480px) {
  .tr-sec {
    display: none; /* prioritise title + deadline on tiny screens */
  }
  .tr-dl {
    font-size: 11px;
  }
}

/* ─── 9. SECTION HEADERS ─────────────────────────────────── */

@media (max-width: 768px) {
  .sec-top h2 {
    font-size: clamp(18px, 4vw, 26px);
    margin-bottom: 6px;
  }
  .sec-top p {
    font-size: 13px;
  }
  .section {
    padding: 28px 0;
  }
  .sec-wrap {
    padding: 0 16px;
  }
}

/* ─── 10. PRICING BAR ────────────────────────────────────── */

@media (max-width: 768px) {
  .pricing-bar {
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
    text-align: center;
  }
  .pb-left h2 {
    font-size: 18px;
  }
  .pb-checks {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pb-chk {
    font-size: 12px;
  }
  .pb-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .btn-pricing {
    width: 100%;
    max-width: 280px;
    padding: 12px 20px;
  }
  .pb-trial {
    font-size: 12px;
  }
}

/* ─── 11. TESTIMONIALS ───────────────────────────────────── */

@media (max-width: 1024px) {
  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .testi-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tcard {
    padding: 18px 16px;
  }
  .tcard-q {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

/* ─── 12. FAQ ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .faq-item {
    padding: 0;
  }
  .faq-q {
    font-size: 14px;
    padding: 14px 16px;
    line-height: 1.4;
  }
  .faq-a {
    font-size: 13.5px;
    padding: 0 16px 14px;
    line-height: 1.6;
  }
}

/* ─── 13. SEO FOOTER LINKS ───────────────────────────────── */

@media (max-width: 1024px) {
  .seo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .seo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .seo-col h4 {
    font-size: 13px;
  }
  .seo-col a {
    font-size: 12px;
  }
  .seo-inner {
    padding: 24px 16px;
  }
}

@media (max-width: 480px) {
  .seo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ─── 14. MAIN FOOTER ────────────────────────────────────── */

@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 32px 20px;
  }
  .ft-col:first-child {
    grid-column: 1 / -1; /* brand block spans full width */
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    padding: 24px 16px;
    gap: 20px;
  }
  .ft-col:first-child {
    grid-column: 1 / -1;
  }
  .ft-desc {
    font-size: 13px;
  }
  .footer-btm {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 14px 16px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .ft-col:first-child {
    grid-column: auto;
  }
}

/* ─── 15. FLOATING WHATSAPP BUTTON ───────────────────────── */

@media (max-width: 768px) {
  .float-group {
    bottom: 16px;
    right: 16px;
  }
  .float-btn {
    font-size: 13px;
    padding: 10px 16px;
  }
}

/* ─── 16. SIDEBAR BOXES ──────────────────────────────────── */

@media (max-width: 768px) {
  .reg-box,
  .wa-box,
  .pro-box {
    padding: 16px;
    border-radius: 10px;
  }
  .reg-box h4,
  .pro-box h4 {
    font-size: 15px;
  }
  .reg-box p,
  .pro-box p {
    font-size: 13px;
  }
  .rb {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 13px;
  }
}

/* ─── 17. UTILITY — general spacing helpers ───────────────── */

/* Prevent horizontal scroll globally */
body {
  overflow-x: hidden;
}

/* Respect user font-size preferences */
html {
  -webkit-text-size-adjust: 100%;
}

/* Smooth scroll for anchor nav */
html {
  scroll-behavior: smooth;
}

/* Details Page CSS */


/* ─── 20. DETAIL PAGE ────────────────────────────────────── */

/* Layout: 2-col → 1-col */
@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px 40px;
  }
  .sidebar {
    position: static;
  }
}

/* Tender Hero */
@media (max-width: 768px) {
  .tender-hero {
    padding: 16px 0;
  }
  .tender-hero-inner {
    padding: 0 14px;
  }
  .th-title {
    font-size: 16px;
    letter-spacing: -.2px;
  }
  .th-meta-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .th-meta-sep {
    display: none;
  }
  .th-sector-tag {
    font-size: 10px;
  }
  /* Stats row — scroll horizontally */
  .th-stats-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding-top: 12px;
    margin-top: 8px;
  }
  .th-stats-row::-webkit-scrollbar { display: none; }
  .th-stat {
    min-width: 110px;
    padding-right: 16px;
    margin-right: 16px;
  }
  .th-stat-lbl { font-size: 9px; }
  .th-stat-val { font-size: 13px; }
}

/* Breadcrumb bar */
@media (max-width: 768px) {
  .breadcrumb-inner {
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .bc-actions {
    gap: 6px;
  }
  .bc-action-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
  /* Hide print button on mobile */
  .bc-action-btn:nth-child(2) {
    display: none;
  }
}

/* Key Details Grid: 2-col → 1-col */
@media (max-width: 600px) {
  .kd-grid {
    grid-template-columns: 1fr;
  }
  .kd-item:nth-child(odd) {
    padding-right: 0;
    border-right: none;
    padding-left: 0px;

  }
  .kd-item:nth-child(even) {
    padding-left: 0;
  }
  .kd-item:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border-light);
  }
  .kd-item:last-child {
    border-bottom: none;
  }
}

/* Section cards */
@media (max-width: 768px) {
  .sec-card-hd {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sec-card-hd h2 {
    font-size: 13px;
  }
  .sec-card-body {
    padding: 14px 16px;
  }
  .kd-label { font-size: 10px; }
  .kd-value { font-size: 13px; }
}

/* Tab bar */
@media (max-width: 768px) {
  .tab-bar {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

/* Documents */
@media (max-width: 600px) {
  .doc-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .doc-info {
    flex: 1 1 100%;
    min-width: 0;
  }
  .doc-dl-btn,
  .doc-locked {
    width: 100%;
    justify-content: center;
  }
}

/* Sidebar — Inquiry form */
@media (max-width: 768px) {
  .inquiry-hd {
    padding: 14px 16px;
    gap: 10px;
  }
  .inquiry-hd h2 { font-size: 14px; }
  .inquiry-body { padding: 16px; }
  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
  .form-submit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Deadline countdown card */
@media (max-width: 768px) {
  .countdown { gap: 4px; }
  .cbox-n { font-size: 18px; }
  .dl-date { font-size: 18px; }
}

/* Similar tenders */
@media (max-width: 768px) {
  .sim-title { font-size: 12px; }
  .sim-meta-item { font-size: 11px; }
}

/* Detail layout padding on small screens */
@media (max-width: 480px) {
  .detail-layout {
    padding: 12px 10px 32px;
  }
  .tender-hero-inner {
    padding: 0 12px;
  }
  .th-title { font-size: 15px; }
  .breadcrumb-inner { padding: 8px 12px; }
}

/* ─── 21. LISTING PAGE ───────────────────────────────────── */

/* Page Hero */
@media (max-width: 768px) {
  .page-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
  }
  .page-hero-title { font-size: 16px; }
  .page-hero-meta  { font-size: 11px; }
  .page-hero-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .hero-stat-pill { padding: 6px 8px; }
  .hsp-val        { font-size: 14px; }
  .hsp-lbl        { font-size: 7.5px; }
}

/* Filter bar — stack vertically on mobile */
@media (max-width: 820px) {
  .filter-bar-wrap {
    position: static;
  }
  .filter-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 14px;
    gap: 8px;
  }
  .fb-keyword    { width: 100%; order: 1; flex: none;}
  .fb-divider    { display: none; }
  .fb-country    { flex: 1; order: 2; }
  .fb-country-btn{ min-width: unset; width: 100%; }
  .fb-multi-wrap { flex: 1; order: 3; }
  .fb-multi-btn  { width: 100%; }
  .fb-more-btn   { order: 4; flex: 1; justify-content: center; }
  .fb-search-btn { order: 5; width: 100%; justify-content: center; }
  .fb-multi-btn  {width: 100% !important;}
}

/* Expanded filters panel */
@media (max-width: 768px) {
  .filter-expanded {
    position: static;
  }
  .filter-expanded-inner {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 14px;
  }
  .fe-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 8px;
  }
  .fe-apply,
  .fe-clear { flex: 1; }
}

@media (max-width: 480px) {
  .filter-expanded-inner {
    grid-template-columns: 1fr;
  }
}

/* Listing toolbar */
@media (max-width: 768px) {
  .listing-wrap { padding: 14px 12px 32px; }
  .listing-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  .lt-right { width: 100%; justify-content: flex-end; }
}

/* Tender cards grid */
@media (max-width: 1024px) {
  .tender-grid { grid-template-columns: 1fr; }
}

/* List-view card — responsive revert */
@media (max-width: 768px) {
  .tender-grid.list-view .tcard {
    display: flex;
    flex-direction: column;
  }
  .tender-grid.list-view .tcard-stripe {
    width: 100%;
    height: 3px;
  }
  .tender-grid.list-view .tc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
  }
  .tender-grid.list-view .tc-meta {
    flex-wrap: wrap;
    justify-content: center;
  }
  .tender-grid.list-view .tc-title {
    -webkit-line-clamp: 2;
    padding: 0;
  }
  .tender-grid.list-view .tc-footer {
    border-left: none;
    border-top: 1px solid var(--border-light);
    width: 100%;
    padding: 10px 14px;
  }
}

/* Card footer on small screens */
@media (max-width: 480px) {
  .tc-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tc-view-btn { width: 100%; justify-content: center; }
  .tc-title    { font-size: 13px; }
}

/* Sector tags card */
@media (max-width: 768px) {
  .gulf-card {
    margin: 16px 12px;
    padding: 14px 14px 20px;
  }
  .tags-wrapper { gap: 6px; }
  .sector-tag   { font-size: 12px; padding: 5px 10px; }
  .card-footer  { flex-direction: column; align-items: flex-start; }
  .stats-row    { gap: 14px; }
}

/* Pagination */
@media (max-width: 600px) {
  .pagination-wrap {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .pg-info { font-size: 12px; }
  .pg-btn  { min-width: 32px; height: 32px; font-size: 12px; }
  .pg-btn.pg-nav { padding: 0 10px; }
  /* Hide middle page numbers on tiny screens */
  .pagination .pg-btn:not(.active):not(.pg-nav) {
    display: none;
  }
  .pagination .pg-btn.active,
  .pagination .pg-ellipsis {
    display: inline-flex;
  }
}

/* Select sector dropdown css */

@media (min-width: 346px) and (max-width: 425px) {
  .fb-multi-menu.open {
    left: inherit;
    right: 0;
  }
}