@media screen and (max-width: 424px) {
  .hero {
    background-image: url("../img/news-events-mbil.webp");
    background-position: center;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    height: 600px;
  }
  .stylecontactherocontent {
    position: absolute;
    max-width: 400px;
    top: 20%;
    left: 15%;
  }
}
@media screen and (min-width: 425px) and (max-width: 426px) {
  .hero {
    background-image: url("../img/news-events-mbil.webp");
    background-position: center;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    height: 550px;
  }
  .stylecontactherocontent {
    position: absolute;
    max-width: 400px;
    top: 15%;
    left: 10%;
  }
}
@media screen and (min-width: 427px) and (max-width: 768px) {
  .hero {
    background-image: url("../img/news-events-tab.webp");
    background-position: center;
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    height: 750px;
  }
  .stylecontactherocontent {
    position: absolute;
    max-width: 400px;
    left: 25%;
    top: 20%;
  }
}
@media screen and (min-width: 769px) {
  .hero {
    background-image: url("../img/news-and-events.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 40vh;
  }
  .stylecontactherocontent {
    position: absolute;
    left: 35%;
    top: 25%;
    max-width: 300px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 2000px) {
  .hero {
    background-image: url("../img/news-and-events.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
  }
  .stylecontactherocontent {
    position: absolute;
    left: 40%;
    /* right: 6%; */
    top: 35%;
    max-width: 400px;
  }
}    :root{
      --accent-blue: #143f91;
      --accent-outline: #2b63ff;
      --accent-orange: #ff8a2b;
      --muted: #222;
      --card-bg: #ffffff;
      --page-bg: #fff;
    }
     .tabs-wrap { display:flex; justify-content:center; gap:16px; margin:36px 0 10px; }

    /* tab buttons look */
    .tab-pill {
      border-radius: 999px;
      padding: 10px 28px;
      border: 2px solid rgba(43,99,255,0.25);
      background: transparent;
      color: var(--accent-outline);
      font-weight:600;
      cursor:pointer;
      transition: all .18s ease;
    }
    .tab-pill.active {
      background: linear-gradient(180deg,#143f91,#0e2f6d);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(20,63,145,0.12);
    }

    /* Cards grid look */
    .cards-row { margin-top: 30px; }
    .news-card, .event-card {
      border: 0;
      border-radius: 6px;
      background: var(--card-bg);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .news-card:hover, .event-card:hover { transform: translateY(-6px); box-shadow: 0 8px 22px rgba(30,40,50,0.06); }

    .card-img-top { height: 370px; object-fit: contain; border-radius: 6px 6px 0 0; }

    .meta-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:0.92rem; color:#1a57a8; margin-top:10px; }

    .card-title { font-size:1.6rem; font-weight:700; margin:10px 0; color:#131418; }

    .card-text { color:#444; line-height:1.75; }

    .read-btn {
      border-radius:28px;
      padding:8px 20px;
      border:2px solid rgba(43,99,255,0.3);
      background:transparent;
      color:var(--accent-outline);
      font-weight:600;
    }

    /* hidden utility */
    .d-none-js { display:none !important; }

    /* responsive */
    @media (max-width: 767px) {
      .card-img-top { height:160px; }
      .tab-pill { padding:8px 18px; }
      .card-title { font-size:1.15rem; }
    }
    .card-img-top{
        transition: all 0.5s ease-in-out;
        overflow: hidden;
    }
    .card-img-top:hover{
        transform: scale(1.05);
    }