@media screen and (max-width:1670px) {
    .cta_1::before {
        width: 70px;
    }
}
@media screen and (max-width:1399px) {
    .main_heading {
        font-size: 3.5rem;
        letter-spacing: 1.5px;
        line-height: 61px;
    }
    .navbar-nav{
        gap: 6px;
    }
    .nav-item .nav-link{
        font-size: 12px;
    }

}   

@media screen and (max-width: 991px) {
    .red_box::before,
    .right_box::before {
        display: none;
    }
}

@media screen and (max-width: 767px) {

  /* ── Banner ── */
  .inner_banner.bann_pd { padding: 60px 0; }
  .bann_hd { font-size: 2rem; }
  .bann_img { display: none; }

  /* ── General spacing ── */
  .sec_pd { padding: 50px 0; }
  .sec_hd { font-size: 1.8rem; }

  /* ── Hide the center vertical line ── */
  .news_1::before { display: none; }

  /* ── Hide the timeline dots (they anchor to the line which is gone) ── */
  .date_btn h6::before { display: none; }

  /* ── Stack all news columns full-width ── */
  .news_1 .col-12,
  .news_1 .col-md-6,
  .news_1 .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 1.5rem !important;
  }

  /* ── Remove the triangle arrows on red boxes ── */
  .red_box::before,
  .right_box::before { display: none; }

  /* ── Make all red boxes look the same when stacked ── */
  .red_box { padding: 18px 20px; }

  /* ── Normalize date alignment — all left-aligned when stacked ── */
  .date_btn,
  .date_btn.text-end,
  .date_btn.mb-5 {
    text-align: left !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
  }

  /* ── For "right_date" entries: swap order so date appears ABOVE the box ──
     (on desktop, right-side entries show date first then box; keep that logic) */
  .col-12:has(.date_btn .right_date) {
    display: flex;
    flex-direction: column;
  }
  .col-12:has(.date_btn .right_date) .date_btn { order: -1; }

  /* ── Date label styling ── */
  .date_btn h6,
  .date_btn time {
    font-size: 0.85rem;
    background-color: #000000b3;
    padding: 6px 10px;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
  }

  /* ── Remove right-offset margin that was for left/right alternating ── */
  .right_box { margin-left: 0 !important; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .inner_banner.bann_pd { padding: 70px 0; }
  .bann_hd { font-size: 2.5rem; }
  .bann_img img { max-width: 90%; }
  .sec_hd { font-size: 2rem; }

  /* Hide line and dots on tablet too */
  .news_1::before { display: none; }
  .date_btn h6::before { display: none; }
  .red_box::before,
  .right_box::before { display: none; }

  /* On tablet, allow 2 columns but full-width so no overflow */
  .news_1 .col-md-6 {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Normalize date alignment on tablet */
  .date_btn.text-end {
    text-align: left !important;
  }
}