:root {
      --s4p-red: #e0402a;
      --s4p-red-dark: #c23621;
      --s4p-red-darker: #a92e1b;
      --s4p-black: #1c1c1c;
      --s4p-gray: #6c6c6c;

      --np-red: #e42027;
      --np-red-dark: #c9181f;
      --np-track: #8c8c8c;
      --np-text: #1b2a4a;
      --np-sub: #3a3a3a;
      --np-card-radius: 14px;
      --np-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);

      --fl-red: #dc3b34;
      --fl-red-dark: #c22e28;
      --fl-text: #1c1c1c;
      --fl-sub: #4a4a4a;
      --fl-bg-start: #fdeef0;
      --fl-bg-end: #fbf7f8;

      --nm-red: #e5352c;
      --nm-bg: #e9eefb;
      --nm-heading: #1c1c1c;
      --nm-text: #2b2b2b;

      --pt-text: #1c1c1c;
      --pt-sub: #3a3a3a;

      --ft-bg: #e9e9e9;
      --ft-heading: #1c1c1c;
      --ft-text: #5c5c5c;
      --ft-link: #4a4a4a;
      --ft-red: #e5352c;
      --ft-dark: #333;

      /*  */
      --ink: #1c1c2e;
      --teal: #1b7a8a;
      --teal-dark: #125863;
      --text-body: #2b2b2b;
      --c-red: #b5352b;
      --c-blue: #1f4e9c;
      --c-brown: #7a4a1e;
      --c-orange: #c2571b;
      --border: #e3e3e3;
      --bg: #ffffff;
      --max-width: 1000px;

      --label: #837e70;
      --input-bg: #ececec;
      --input-border: #d3d3d3;
      --red: #e6302a;
      --grey-dot: #77776f;
      --teal: #2bb5a3;
      --teal-dark: #1f9686;
  }

  * {
      box-sizing: border-box;
  }

  html,
  body {
      max-width: 100%;
      overflow-x: hidden;
      /* fixes overflow on both desktop & mobile */
  }

  body {
      font-family: 'Poppins', sans-serif;
      color: var(--s4p-black);
      margin: 0;
  }

  img {
      max-width: 100%;
  }

  .container {
      max-width: 1240px;
  }

  /* ===================== STICKY TOP BAR ===================== */
  .s4p-topbar {
      background: #fff;
      padding: 14px 0;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      z-index: 1030;
      transition: box-shadow .25s ease;
  }

  .s4p-topbar.scrolled {
      box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
  }

  .s4p-topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: nowrap;
  }

  /* Logo - left, auto width */
  /* Logo - left, auto width */
  .s4p-logo {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      width: auto;
      flex-shrink: 0;
  }

  .s4p-logo img {
      height: 60px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      display: block;
  }

  @media (max-width: 768px) {
      .s4p-logo img {
          height: 35px;
      }
  }

  /* Search - flexible, shrinks safely instead of overflowing */
  .s4p-search {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 420px;
  }

  .s4p-search input {
      width: 100%;
      border: 1px solid #d8d8d8;
      border-radius: 6px;
      padding: 10px 40px 10px 16px;
      font-size: 14px;
      color: #444;
      background: #fff;
  }

  .s4p-search input::placeholder {
      color: #9a9a9a;
  }

  .s4p-search input:focus {
      outline: none;
      border-color: var(--s4p-red);
      box-shadow: 0 0 0 3px rgba(224, 64, 42, .12);
  }

  .s4p-search i {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #9a9a9a;
      font-size: 15px;
  }

  /* Right cluster: flags -> account -> toggle */
  .s4p-right {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
  }

  .s4p-flags {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .s4p-flags .flag-btn {
      width: 28px;
      height: 20px;
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid #e2e2e2;
      padding: 0;
      cursor: pointer;
      background: #f2f2f2;
  }

  .s4p-flags .flag-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .s4p-account {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--s4p-black);
      font-size: 17px;
      flex-shrink: 0;
  }

  /* Single toggle button (used on BOTH desktop + mobile) */
  .s4p-toggle-btn {
      background: var(--s4p-red);
      border: none;
      width: 44px;
      height: 44px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      flex-shrink: 0;
      transition: background .2s ease;
  }

  .s4p-toggle-btn:hover,
  .s4p-toggle-btn:active {
      background: var(--s4p-red-darker);
  }

  /* Toggle button: mobile/tablet only, hidden on desktop */
  @media (min-width:992px) {
      .s4p-toggle-btn {
          display: none;
      }
  }


  /*  */
  /* ===================== MAIN NAVBAR (desktop) ===================== */
  .s4p-navbar {
      background: var(--s4p-red);
  }

  .s4p-nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
  }

  .s4p-nav-item {
      position: relative;
  }

  .s4p-nav-item>a {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 14.5px;
      padding: 16px 11px;
      white-space: nowrap;
      transition: background .2s ease;
  }

  .s4p-nav-item>a i {
      font-size: 11px;
      transition: transform .2s ease;
  }

  .s4p-nav-item:hover>a,
  .s4p-nav-item.active>a {
      background: var(--s4p-red-darker);
  }

  .s4p-has-dropdown:hover>a i {
      transform: rotate(180deg);
  }

  /* dropdown panel */
  .s4p-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 270px;
      background: var(--s4p-red-darker);
      list-style: none;
      margin: 0;
      padding: 6px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
      z-index: 1020;
      box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
  }

  .s4p-has-dropdown:hover .s4p-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .s4p-dropdown li a {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      padding: 10px 22px;
      text-decoration: none;
      transition: background .15s ease, padding-left .15s ease;
  }

  .s4p-dropdown li a:hover {
      background: rgba(0, 0, 0, .18);
      padding-left: 28px;
  }

  /* hide on mobile/tablet — offcanvas already handles that */
  @media (max-width: 991.98px) {
      .s4p-navbar {
          display: none;
      }
  }

  /*  */

  /* ===================== OFFCANVAS SIDEBAR (from LEFT, desktop + mobile) ===================== */
  .s4p-offcanvas {
      background: var(--s4p-red);
      width: 320px;
      max-width: 88vw;
  }

  .s4p-offcanvas .offcanvas-header {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, .15);
  }

  .s4p-offcanvas .btn-close {
      filter: brightness(0) invert(1);
      opacity: .9;
  }

  .s4p-offcanvas .offcanvas-body {
      padding: 0;
      overflow-x: hidden;
  }

  .s4p-offcanvas .nav-link {
      color: #fff !important;
      font-weight: 600;
      font-size: 15px;
      padding: 14px 20px !important;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .s4p-offcanvas .nav-item.active>.nav-link {
      background: var(--s4p-red-darker);
  }

  .s4p-offcanvas .dropdown-menu {
      position: static !important;
      transform: none !important;
      border: 0;
      border-radius: 0;
      background: var(--s4p-red-darker);
      margin: 0;
      padding: 0;
      width: 100%;
  }

  .s4p-offcanvas .dropdown-item {
      color: #fff;
      padding: 10px 32px;
      font-size: 14px;
  }

  .s4p-offcanvas .dropdown-item:hover {
      background: rgba(0, 0, 0, .2);
      color: #fff;
  }

  .s4p-offcanvas .dropdown-toggle::after {
      float: right;
      margin-top: 8px;
  }

  .s4p-offcanvas-search {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .15);
  }

  .s4p-offcanvas-search input {
      width: 100%;
      border: none;
      border-radius: 6px;
      padding: 10px 40px 10px 14px;
      font-size: 14px;
  }

  .s4p-offcanvas-search {
      position: relative;
  }

  .s4p-offcanvas-search i {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #9a9a9a;
  }

  /* ===================== BANNER / SLIDER (compact image, not full width) ===================== */
  .s4p-banner {
      padding: 15px 0;
      background: #fff;
      overflow: hidden;
  }

  .s4p-banner-quote {
      font-size: 34px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--s4p-black);
      max-width: 460px;
      margin: 0;
  }

  .s4p-banner-img-wrap {
      max-width: 560px;
      margin-left: auto;
      aspect-ratio: 5/3;
  }

  .s4p-banner-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .s4p-carousel .carousel-indicators {
      position: static;
      margin-top: 32px;
  }

  .s4p-carousel .carousel-indicators [data-bs-target] {
      background-color: var(--s4p-red);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      opacity: .35;
  }

  .s4p-carousel .carousel-indicators .active {
      opacity: 1;
  }

  .s4p-carousel .carousel-control-prev,
  .s4p-carousel .carousel-control-next {
      width: 5%;
      opacity: 0;
      transition: opacity .2s ease;
  }

  .s4p-banner:hover .carousel-control-prev,
  .s4p-banner:hover .carousel-control-next {
      opacity: .75;
  }

  .s4p-carousel .carousel-control-prev-icon,
  .s4p-carousel .carousel-control-next-icon {
      background-color: var(--s4p-red);
      border-radius: 50%;
      padding: 12px;
      background-size: 45%;
  }

  /* Mobile tuning */
  @media (max-width:767.98px) {
      .s4p-banner {
          padding: 32px 16px 40px;
      }

      .s4p-banner-quote {
          font-size: 19px;
          text-align: left;
          max-width: 100%;
          margin-bottom: 20px;
      }

      .s4p-banner-img-wrap {
          max-width: 100%;
          margin-left: 0;
          aspect-ratio: 16/10;
      }

      .s4p-carousel .carousel-indicators {
          margin-top: 20px;
      }
  }

  @media (max-width:575.98px) {
      .s4p-search {
          display: none;
      }

      /* search hides on very small screens, still in sidebar */
      .s4p-logo-text .en {
          font-size: 15px;
      }

      .s4p-logo-text .ar {
          font-size: 11px;
      }

      .s4p-logo-badge {
          width: 40px;
          height: 40px;
      }
  }

  @media (max-width:991.98px) {
      .s4p-search {
          max-width: 220px;
      }
  }

  /* Toggle button: desktop e lagbe na, sudu tablet/mobile e thakbe */
  @media (min-width:992px) {
      .s4p-toggle-mobile-only {
          display: none !important;
      }
  }

  /*end  */


  /* start */
  .np-section {
      padding: 25px 0 0px;
  }

  .np-heading {
      font-weight: 800;
      font-size: 1.9rem;
      margin-bottom: 32px;
      color: var(--np-text);
  }

  .np-card {
      background: #fff;
      border-radius: var(--np-card-radius);
      box-shadow: var(--np-shadow);
      padding: 14px;
      height: 100%;
      max-width: 360px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      transition: transform .25s ease, box-shadow .25s ease;
      border: 1px solid #eee;
  }

  .np-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  }

  .np-img-wrap {
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 4/3;
      margin-bottom: 16px;
  }

  .np-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s ease;
  }

  .np-card:hover .np-img-wrap img {
      transform: scale(1.06);
  }

  .np-title {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.4;
      color: var(--np-text);
      margin-bottom: 14px;
      height: calc(1.4em * 3);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .np-progress {
      width: 100%;
      height: 18px;
      background: var(--np-track);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 18px;
      position: relative;
  }

  .np-progress-bar {
      height: 100%;
      background: var(--np-red);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      min-width: 34px;
      border-radius: 3px 0 0 3px;
  }

  .np-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 18px;
  }

  .np-stat-label {
      font-weight: 700;
      font-size: .82rem;
      color: var(--np-text);
      margin-bottom: 4px;
  }

  .np-stat-value {
      font-size: .85rem;
      color: var(--np-sub);
      font-weight: 500;
  }

  .np-btn {
      background: var(--np-red);
      color: #fff;
      border: none;
      font-weight: 700;
      font-size: .9rem;
      padding: 10px 22px;
      border-radius: 8px;
      align-self: flex-start;
      margin-top: auto;
      transition: background .2s ease, transform .15s ease;
  }

  .np-btn:hover {
      background: var(--np-red-dark);
      color: #fff;
      transform: translateY(-1px);
  }

  @media (max-width:767.98px) {
      .np-heading {
          font-size: 1.5rem;
          text-align: center;
      }

      .np-btn {
          align-self: stretch;
          text-align: center;
      }

      .np-card {
          padding: 12px;
          max-width: 100%;
      }
  }

  /* end */

  /* start */

  .fl-section {
      /* background: linear-gradient(180deg, var(--fl-bg-start) 0%, var(--fl-bg-end) 60%, #ffffff 100%); */
      padding: 60px 20px 70px;
  }

  .fl-heading {
      font-weight: 800;
      font-size: 2rem;
      text-align: center;
      max-width: 900px;
      margin: 0 auto 18px;
      line-height: 1.3;
  }

  .fl-subheading {
      text-align: center;
      font-size: 1rem;
      color: var(--fl-sub);
      max-width: 750px;
      margin: 0 auto 55px;
  }

  .fl-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      row-gap: 45px;
      column-gap: 20px;
      max-width: 1150px;
      margin: 0 auto 55px;
  }

  .fl-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .fl-flag {
      width: 78px;
      height: 78px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      margin-bottom: 14px;
      background: #eee;
  }

  .fl-flag img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .fl-name {
      font-weight: 600;
      font-size: .95rem;
      color: var(--fl-text);
  }

  .fl-btn-wrap {
      text-align: center;
  }

  .fl-btn {
      display: inline-block;
      background: var(--fl-red);
      color: #fff;
      border: none;
      font-weight: 600;
      font-size: .95rem;
      padding: 14px 32px;
      border-radius: 6px;
      text-decoration: none;
      transition: background .2s ease, transform .15s ease;
  }

  .fl-btn:hover {
      background: var(--fl-red-dark);
      color: #fff;
      transform: translateY(-1px);
  }

  @media (max-width:991.98px) {
      .fl-grid {
          grid-template-columns: repeat(3, 1fr);
          row-gap: 35px;
      }

      .fl-heading {
          font-size: 1.6rem;
      }
  }

  @media (max-width:575.98px) {
      .fl-grid {
          grid-template-columns: repeat(2, 1fr);
          row-gap: 30px;
      }

      .fl-flag {
          width: 66px;
          height: 66px;
      }

      .fl-heading {
          font-size: 1.35rem;
      }

      .fl-subheading {
          font-size: .9rem;
      }

      .fl-btn {
          width: 100%;
      }
  }

  /* end */

  /* start */

  .nm-section {
      padding: 60px 20px;
  }

  .nm-card {
      max-width: 1180px;
      margin: 0 auto;
      background: var(--nm-bg);
      border-radius: 14px;
      display: flex;
      align-items: center;
      overflow: hidden;
      position: relative;
      min-height: 420px;
  }

  .nm-media {
      flex: 0 0 44%;
      position: relative;
      height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .nm-blob {
      position: absolute;
      left: -40px;
      top: 50%;
      transform: translateY(-50%);
      width: 340px;
      height: 340px;
      background: var(--nm-red);
      border-radius: 50% 50% 0 50%;
      z-index: 1;
  }

  .nm-photo {
      position: relative;
      z-index: 2;
      height: 480px;
      max-height: 115%;
      filter: grayscale(100%);
      object-fit: cover;
      display: block;
  }

  .nm-text {
      flex: 1 1 56%;
      padding: 40px 50px 40px 30px;
      position: relative;
      z-index: 2;
  }

  .nm-heading {
      font-weight: 800;
      font-size: 2rem;
      color: var(--nm-heading);
      margin-bottom: 22px;
  }

  .nm-quote {
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--nm-text);
      margin-bottom: 26px;
      max-width: 520px;
  }

  .nm-author {
      font-size: 1rem;
      color: var(--nm-text);
      font-weight: 500;
  }

  @media (max-width:991.98px) {
      .nm-card {
          flex-direction: column;
          min-height: auto;
          padding-top: 60px;
      }

      .nm-media {
          flex: 0 0 auto;
          width: 100%;
          height: 280px;
      }

      .nm-blob {
          width: 240px;
          height: 240px;
          left: 50%;
          top: 60%;
          transform: translate(-50%, -50%);
      }

      .nm-photo {
          height: 340px;
      }

      .nm-text {
          padding: 20px 30px 45px;
          text-align: center;
      }

      .nm-quote {
          margin-left: auto;
          margin-right: auto;
      }

      .nm-heading {
          font-size: 1.6rem;
      }
  }

  @media (max-width:575.98px) {
      .nm-media {
          height: 230px;
      }

      .nm-blob {
          width: 190px;
          height: 190px;
      }

      .nm-photo {
          height: 270px;
      }

      .nm-heading {
          font-size: 1.4rem;
      }

      .nm-quote {
          font-size: .95rem;
      }
  }

  /* end */

  /* start */

  .nm-section {
      padding: 60px 20px;
  }

  .nm-card {
      max-width: 1180px;
      margin: 0 auto;
      background: var(--nm-bg);
      border-radius: 14px;
      display: flex;
      align-items: center;
      overflow: hidden;
      position: relative;
      min-height: 420px;
  }

  .nm-media {
      flex: 0 0 44%;
      position: relative;
      height: 100%;
      align-self: stretch;
      display: flex;
      align-items: flex-end;
      justify-content: center;
  }

  .nm-blob {
      position: absolute;
      left: -40px;
      top: 50%;
      transform: translateY(-50%);
      width: 340px;
      height: 340px;
      background: var(--nm-red);
      border-radius: 50% 50% 0 50%;
      z-index: 1;
  }

  .nm-photo {
      position: relative;
      z-index: 2;
      height: 105%;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: bottom;
      filter: grayscale(100%);
      display: block;
  }

  .nm-text {
      flex: 1 1 56%;
      padding: 40px 50px 40px 30px;
      position: relative;
      z-index: 2;
  }

  .nm-heading {
      font-weight: 800;
      font-size: 2rem;
      color: var(--nm-heading);
      margin-bottom: 22px;
  }

  .nm-quote {
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--nm-text);
      margin-bottom: 26px;
      max-width: 520px;
  }

  .nm-author {
      font-size: 1rem;
      color: var(--nm-text);
      font-weight: 500;
  }

  @media (max-width:991.98px) {
      .nm-card {
          flex-direction: column;
          min-height: auto;
          padding-top: 50px;
      }

      .nm-media {
          flex: 0 0 auto;
          width: 100%;
          height: 280px;
      }

      .nm-blob {
          width: 240px;
          height: 240px;
          left: 50%;
          top: 60%;
          transform: translate(-50%, -50%);
      }

      .nm-photo {
          height: 95%;
      }

      .nm-text {
          padding: 20px 30px 45px;
          text-align: center;
      }

      .nm-quote {
          margin-left: auto;
          margin-right: auto;
      }

      .nm-heading {
          font-size: 1.6rem;
      }
  }

  @media (max-width:575.98px) {
      .nm-media {
          height: 230px;
      }

      .nm-blob {
          width: 190px;
          height: 190px;
      }

      .nm-photo {
          height: 90%;
      }

      .nm-heading {
          font-size: 1.4rem;
      }

      .nm-quote {
          font-size: .95rem;
      }
  }

  /* end */

  /* start */

  .pt-section {
      padding: 70px 20px;
  }

  .pt-wrap {
      max-width: 1250px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 40px;
  }

  .pt-left {
      flex: 0 0 320px;
      max-width: 320px;
  }

  .pt-heading {
      font-weight: 700;
      font-size: 1.9rem;
      line-height: 1.35;
      color: var(--pt-text);
      margin-bottom: 20px;
  }

  .pt-joint {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: .95rem;
      color: var(--pt-text);
  }

  .pt-joint .arrow {
      font-size: 1.1rem;
      line-height: 1;
  }

  .pt-right {
      flex: 1;
  }

  .pt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      row-gap: 40px;
      column-gap: 30px;
      align-items: center;
      justify-items: center;
  }

  .pt-logo {
      max-width: 100%;
      max-height: 130px;
      width: auto;
      height: auto;
      object-fit: contain;
  }

  @media (max-width:991.98px) {
      .pt-wrap {
          flex-direction: column;
          text-align: center;
      }

      .pt-left {
          max-width: 100%;
          flex: 0 0 auto;
      }

      .pt-joint {
          justify-content: center;
      }

      .pt-grid {
          grid-template-columns: repeat(3, 1fr);
          row-gap: 30px;
          column-gap: 20px;
      }

      .pt-logo {
          max-height: 100px;
      }
  }

  @media (max-width:575.98px) {
      .pt-heading {
          font-size: 1.5rem;
      }

      .pt-grid {
          grid-template-columns: repeat(2, 1fr);
          row-gap: 28px;
      }

      .pt-logo {
          max-height: 80px;
      }
  }

  /* end */


  /* who are we start  */
  /* ===================== ABOUT US SECTION ===================== */
  .ab-section {
      padding: 60px 20px 70px;
  }

  .ab-heading {
      text-align: center;
      font-weight: 700;
      font-size: 2.2rem;
      color: var(--s4p-black);
      margin-bottom: 40px;
  }

  .ab-img-wrap {
      max-width: 350px;
      margin: 0 auto 40px;
      border: 2px solid var(--s4p-red);
      padding: 0px;
  }

  .ab-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
  }

  .ab-content {
      max-width: 920px;
      margin: 0 auto;
  }

  .ab-content p {
      font-size: 1rem;
      line-height: 1.8;
      color: var(--s4p-black);
      margin-bottom: 22px;
  }

  .ab-note {
      font-size: 0.95rem;
      color: var(--s4p-gray);
      margin-bottom: 0;
  }

  @media (max-width: 767.98px) {
      .ab-heading {
          font-size: 1.7rem;
      }

      .ab-img-wrap {
          max-width: 260px;
      }
  }

  /* who are we end */



  /* start */
  /* ===================== BOARD OF DIRECTORS ===================== */
  .bod-section {
      padding: 40px 20px 40px;
  }

  .bod-heading {
      text-align: center;
      font-weight: 700;
      font-size: 2rem;
      color: var(--s4p-black);
      margin-bottom: 50px;
  }

  .bod-top {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
  }

  .bod-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
  }

  .bod-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 8px 10px 0px rgba(0, 0, 0, .05), 0 14px 34px rgba(0, 0, 0, .09);
      padding: 55px 30px 42px;
      text-align: center;
      width: 320px;
      flex-shrink: 0;
      position: relative;
      transition: transform .25s ease, box-shadow .25s ease;
  }

  .bod-card:hover {
      transform: translateY(-6px);
      box-shadow: 8px 14px 0px rgba(0, 0, 0, .05), 0 20px 40px rgba(0, 0, 0, .12);
  }


  .bod-photo-wrap {
      position: relative;
      width: 165px;
      height: 165px;
      margin: 0 auto 30px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .bod-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 176px;
      height: 176px;
      border-radius: 50%;
      transform: translate(calc(-50% + 22px), -50%);
      z-index: 1;
  }

  .bod-photo-wrap img {
      position: relative;
      z-index: 2;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      background: #eee;
      box-shadow: 0 0 0 4px #fff;
  }

  .bod-name {
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--s4p-black);
      margin-bottom: 10px;
  }

  .bod-role {
      font-size: .95rem;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 0;
  }

  .bod-c1 {
      color: #3d6bd1;
  }

  .bod-c2 {
      color: var(--s4p-red);
  }

  .bod-c3 {
      color: #6c6c6c;
  }

  /* ===== responsive ===== */
  @media (max-width: 767.98px) {
      .bod-heading {
          font-size: 1.6rem;
          margin-bottom: 36px;
      }

      .bod-grid {
          gap: 24px;
      }

      .bod-card {
          width: 100%;
          max-width: 320px;
          padding: 45px 24px 34px;
      }

      .bod-photo-wrap {
          width: 140px;
          height: 140px;
      }

      .bod-ring {
          width: 150px;
          height: 150px;
      }

      .bod-photo-wrap img {
          width: 126px;
          height: 126px;
      }
  }

  /* end */

  /* start donation */
  @media (max-width: 768px) {
      .donation-ways-section {
          padding: 60px 20px !important;
      }

      .donation-ways-section h2 {
          font-size: 30px !important;
          margin-bottom: 45px !important;
      }
  }

  @media (max-width: 640px) {
      .donation-row {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center;
          gap: 22px !important;
      }

      .donation-icon {
          flex: 0 0 auto !important;
          width: 100px !important;
      }

      .donation-icon img {
          width: 100px !important;
          height: 100px !important;
      }

      .donation-content {
          padding-top: 0 !important;
      }

      .donation-content h3 {
          font-size: 22px !important;
      }

      .donation-content p {
          font-size: 15.5px !important;
          max-width: 100% !important;
      }
  }

  /* end donation  */


  /* donate start css */
  /* ===== Project Detail Card ===== */
  .project-detail-section {
      font-family: 'Poppins', sans-serif;
      padding: 60px 15px;
      background: #f4f4f6;
  }

  .project-detail-card {
      max-width: 900px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  }

  .pdc-content {
      padding: 50px 60px 30px;
  }

  .pdc-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: #111;
      text-align: center;
      line-height: 1.4;
      margin-bottom: 14px;
  }

  .pdc-subtitle {
      font-size: 0.9rem;
      color: #6a6a80;
      text-align: center;
      line-height: 1.7;
      max-width: 560px;
      margin: 0 auto 28px;
  }

  .pdc-divider {
      width: 60px;
      height: 3px;
      background: #e5352c;
      margin: 0 auto 30px;
      border-radius: 2px;
  }

  .pdc-desc-heading {
      font-size: 1.1rem;
      font-weight: 700;
      color: #111;
      text-align: center;
      margin-bottom: 18px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .pdc-desc-text {
      font-size: 0.92rem;
      color: #3a4a7a;
      line-height: 1.95;
      text-align: justify;
      margin-bottom: 35px;
  }

  .pdc-stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
      background: #faf5f5;
      border-radius: 10px;
      padding: 22px;
      margin-bottom: 40px;
  }

  .pdc-stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20px;
      border-right: 1px solid #e6d5d4;
  }

  .pdc-stat-item:last-child {
      border-right: none;
  }

  .pdc-stat-label {
      font-size: 0.7rem;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
  }

  .pdc-stat-value {
      font-size: 0.95rem;
      font-weight: 700;
      color: #e5352c;
  }

  .pdc-situation-heading {
      font-size: 1.05rem;
      font-weight: 700;
      color: #111;
      text-align: center;
      margin-bottom: 24px;
  }

  .pdc-images {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 15px;
  }

  .pdc-img-wrap {
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }

  .pdc-img-wrap img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .pdc-img-current {
      flex: 1 1 320px;
      max-width: 340px;
      aspect-ratio: 16/10;
  }

  .pdc-img-render {
      flex: 1 1 400px;
      max-width: 460px;
      aspect-ratio: 16/11;
  }

  .pdc-donate-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      background: #e5352c;
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      padding: 18px;
      text-decoration: none;
      transition: background 0.25s ease;
  }

  .pdc-donate-btn:hover {
      background: #c72a22;
      color: #fff;
  }

  .pdc-donate-btn i {
      font-size: 1.05rem;
      transition: transform 0.25s ease;
  }

  .pdc-donate-btn:hover i {
      transform: translateX(4px);
  }

  /* ===== Responsive: Tablet ===== */
  @media (max-width:768px) {
      .pdc-content {
          padding: 35px 30px 25px;
      }

      .pdc-title {
          font-size: 1.3rem;
      }

      .pdc-stat-item {
          border-right: none;
          padding: 0 14px;
      }
  }

  /* ===== Responsive: Mobile ===== */
  @media (max-width:576px) {
      .pdc-content {
          padding: 28px 20px 20px;
      }

      .pdc-title {
          font-size: 1.15rem;
      }

      .pdc-desc-text,
      .pdc-subtitle {
          font-size: 0.82rem;
          text-align: center;
      }

      .pdc-stats {
          flex-direction: column;
          gap: 16px;
          padding: 18px;
      }

      .pdc-img-current,
      .pdc-img-render {
          max-width: 100%;
          flex: 1 1 100%;
      }
  }

  /* ===== Large Desktop (22 inch monitor) ===== */
  @media (min-width:1600px) {
      .project-detail-card {
          max-width: 960px;
      }

      .pdc-content {
          padding: 60px 70px 35px;
      }
  }


  /* slider */

  /* ===== Situation Slider ===== */
  .pdc-slider {
      position: relative;
      max-width: 560px;
      margin: 0 auto 15px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }

  .pdc-slider-track {
      display: flex;
      transition: transform 0.45s ease;
  }

  .pdc-slide {
      flex: 0 0 100%;
      aspect-ratio: 16/10;
  }

  .pdc-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .pdc-slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      color: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.25s ease;
      z-index: 2;
  }

  .pdc-slider-btn:hover {
      background: #e5352c;
      color: #fff;
  }

  .pdc-slider-prev {
      left: 12px;
  }

  .pdc-slider-next {
      right: 12px;
  }

  .pdc-slider-dots {
      position: absolute;
      bottom: 12px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 6px;
      z-index: 2;
  }

  .pdc-slider-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: background 0.25s ease, transform 0.25s ease;
  }

  .pdc-slider-dot.active {
      background: #e5352c;
      transform: scale(1.2);
  }

  @media (max-width:576px) {
      .pdc-slider {
          max-width: 100%;
      }
  }

  /* donate end */

  /* get-involved start css */
  .section {
      max-width: var(--max-width);
      margin: 0 auto;
      background: var(--bg);
      padding: 56px 48px 64px;
  }

  .section__title {
      text-align: center;
      font-size: 2.4rem;
      font-weight: 700;
      color: var(--ink);
      margin: 0 0 36px;
      letter-spacing: -0.02em;
  }

  .graphic-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
  }

  .graphic-frame {
      padding: 6px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }

  .graphic-frame img {
      display: block;
      width: 265px;
      height: auto;
      max-width: 100%;
  }

  .lead {
      font-weight: 700;
      color: var(--ink);
      font-size: 1.05rem;
      margin: 0 0 18px;
  }

  .points {
      list-style: none;
      margin: 0 0 28px;
      padding: 0;
  }

  .points li {
      position: relative;
      padding-left: 22px;
      margin-bottom: 16px;
      font-size: 0.98rem;
  }

  .points li::before {
      content: "▪";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--ink);
      font-size: 0.8rem;
  }

  .points li:nth-child(1) {
      color: var(--c-blue);
  }

  .points li:nth-child(2) {
      color: var(--c-red);
  }

  .points li:nth-child(3) {
      color: var(--c-brown);
  }

  .points li:nth-child(4) {
      color: var(--c-blue);
  }

  .points li:nth-child(5) {
      color: var(--c-brown);
  }

  .points li:nth-child(6) {
      color: var(--c-blue);
  }

  .invite {
      color: var(--c-orange);
      font-size: 0.98rem;
      margin: 0 0 22px;
  }

  .invite .highlight {
      color: var(--c-blue);
  }

  .offices {
      counter-reset: office;
      list-style: none;
      margin: 0;
      padding: 0 0 0 8px;
      display: grid;
      gap: 10px;
  }

  .offices li {
      counter-increment: office;
      position: relative;
      padding-left: 30px;
      color: var(--c-blue);
      font-size: 0.98rem;
  }

  .offices li::before {
      content: counter(office) ".";
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 700;
      color: var(--ink);
  }

  @media (max-width: 640px) {
      .section {
          padding: 36px 20px 44px;
      }

      .section__title {
          font-size: 1.8rem;
          margin-bottom: 26px;
      }

      .graphic-frame img {
          width: 170px;
      }

      .points li,
      .invite,
      .offices li {
          font-size: 0.92rem;
      }
  }

  @media (max-width: 400px) {
      .section {
          padding: 28px 14px 36px;
      }

      .section__title {
          font-size: 1.5rem;
      }
  }

  /* end */



  .form-card {
      max-width: var(--max-width);
      margin: 0 auto;
      background: #ffffff;
      padding: 30px 40px 40px;
  }

  .form-card__title {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0 0 30px;
      color: #111;
  }

  /* ---- progress tracker ---- */
  .progress {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 35px;
      padding: 0 10px;
  }

  /* Continuous Horizontal Red Line */
  .progress::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 4px;
      height: 2px;
      background: var(--red);
      z-index: 0;
  }

  .progress__step {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--grey-dot);
      text-align: center;
  }

  .progress__step span:first-child {
      margin-bottom: 2px;
  }

  .progress__step .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--grey-dot);
      margin-top: 6px;
  }

  /* Active state for Step 1 */
  .progress__step.is-active {
      color: var(--red);
  }

  .progress__step.is-active .dot {
      background: var(--red);
      outline: 2px solid #ffffff;
  }

  /* Alignment for step labels */
  .progress__step:first-child {
      align-items: center;
      margin-left: 20%;
  }

  .progress__step:nth-child(2) {
      align-items: center;
  }

  .progress__step:last-child {
      align-items: center;
      margin-right: 20%;
  }

  /* ---- fields ---- */
  .field {
      margin-bottom: 18px;
  }

  .field label {
      display: block;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--label);
      margin-bottom: 6px;
  }

  .field input,
  .field select {
      width: 100%;
      height: 38px;
      padding: 6px 12px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 0px;
      font-size: 0.9rem;
      color: #000;
      outline: none;
      box-sizing: border-box;
  }

  .field select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 30px;
      cursor: pointer;
  }

  .field input:focus,
  .field select:focus {
      border-color: #000;
      background: #fdfdfd;
  }

  /* ---- footer / button ---- */
  .form-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
  }

  .btn-next {
      background: var(--teal);
      color: #ffffff;
      border: none;
      padding: 10px 32px;
      font-size: 0.85rem;
      font-weight: 700;
      border-radius: 2px;
      cursor: pointer;
      transition: background 0.2s ease;
  }

  .btn-next:hover {
      background: var(--teal-dark);
  }

  /* ---- responsive ---- */
  @media (max-width: 640px) {
      .form-card {
          padding: 20px 16px;
      }

      .progress__step:first-child {
          margin-left: 5%;
      }

      .progress__step:last-child {
          margin-right: 5%;
      }

      .btn-next {
          width: 100%;
          padding: 12px;
      }
  }

  /* get-involved end css */




  /* contuct start css */
  .contact-section {
      padding: 80px 0;
      background-color: #fff;
  }

  .main-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #1a1a1a;
  }

  .sub-description {
      font-size: 1.1rem;
      max-width: 800px;
      margin: 0 auto 60px auto;
      color: #4a4a4a;
  }

  .column-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 30px;
      color: #1a1a1a;
  }

  /* 1. Contact Details Style */
  .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 25px;
  }

  .info-item i {
      font-size: 1.2rem;
      color: #1a1a1a;
      margin-right: 15px;
      margin-top: 5px;
      /* Aligns icon with top of text */
  }

  .info-item p {
      margin: 0;
      color: #5a5a5a;
  }

  /* Follow Us Style */
  .follow-us-title {
      margin-top: 50px;
  }

  .social-icons {
      display: flex;
      gap: 20px;
  }

  .social-icons a {
      color: #1a1a1a;
      font-size: 1.3rem;
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .social-icons a:hover {
      color: #0d6efd;
      /* Bootstrap primary color on hover */
  }

  /* 2. Form Style (Same as image) */
  .custom-form .form-control {
      background-color: #f1f1f1;
      /* Gray background */
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 12px 15px;
      font-size: 1rem;
      color: #555;
      margin-bottom: 20px;
  }

  .custom-form .form-control::placeholder {
      color: #888;
  }

  .custom-form .form-control:focus {
      background-color: #f1f1f1;
      border-color: #1a1a1a;
      box-shadow: none;
      color: #1a1a1a;
  }

  .custom-form textarea.form-control {
      resize: none;
      /* Prevents manual resizing */
  }

  .btn-send {
      background-color: #ed2124;
      /* Specific red color from image */
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 12px 25px;
      font-size: 1rem;
      font-weight: 600;
      width: 100%;
      /* Spans full width on small screens */
      transition: background-color 0.3s ease;
  }

  .btn-send:hover {
      background-color: #d11c1f;
      color: #fff;
  }

  /* 3. Map Style */
  .map-container {
      width: 100%;
      height: 100%;
      min-height: 350px;
      /* Ensures visibility on all devices */
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow: hidden;
  }

  .map-container iframe {
      width: 100%;
      height: 100%;
      border: 0;
  }

  /* Desktop specific: Make map span full height of form and details */
  @media (min-width: 992px) {
      .map-container {
          min-height: 100%;
      }

      .btn-send {
          width: auto;
          /* Normal width on desktop */
      }
  }

  /* contuct end css */

  /* start */

  .ft-footer {
      background: var(--ft-bg);
      padding: 60px 20px 0;
      position: relative;
  }

  .ft-wrap {
      max-width: 1250px;
      margin: 0 auto;
  }

  .ft-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr;
      gap: 30px;
      padding-bottom: 40px;
  }

  /* Column 1 - brand */
  .ft-logo {
      width: auto;
      display: flex;
      align-items: center;
      margin-bottom: 14px;
  }

  .ft-logo img {
      height: 100px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      display: block;
  }

  .ft-org-name {
      font-weight: 700;
      font-size: .95rem;
      color: var(--ft-red);
      margin-bottom: 2px;
  }

  .ft-org-sub {
      font-weight: 700;
      font-size: .95rem;
      color: var(--ft-red);
      margin-bottom: 14px;
  }

  .ft-desc {
      font-size: .92rem;
      line-height: 1.7;
      color: var(--ft-text);
      max-width: 260px;
  }

  /* Column headings */
  .ft-col-title {
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--ft-heading);
      margin-bottom: 20px;
  }

  /* Column 2 - links */
  .ft-links {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .ft-links li {
      margin-bottom: 12px;
  }

  .ft-links a {
      color: var(--ft-link);
      text-decoration: none;
      font-size: .92rem;
      transition: color .15s ease;
  }

  .ft-links a:hover {
      color: var(--ft-red);
  }

  /* Column 3 - contact */
  .ft-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
      font-size: .92rem;
      color: var(--ft-link);
  }

  .ft-contact-item i {
      font-size: 1.05rem;
      color: var(--ft-dark);
      margin-top: 2px;
  }

  .ft-contact-item span {
      line-height: 1.5;
  }

  .ft-contact-item a {
      color: var(--ft-link);
      text-decoration: none;
  }

  .ft-contact-item a:hover {
      color: var(--ft-red);
  }

  /* Column 4 - social */
  .ft-social-text {
      font-size: .92rem;
      line-height: 1.7;
      color: var(--ft-text);
      margin-bottom: 22px;
      max-width: 280px;
  }

  .ft-social-icons {
      display: flex;
      gap: 16px;
  }

  .ft-social-icons a {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ft-dark);
      font-size: 1.1rem;
      transition: color .15s ease, transform .15s ease;
  }

  .ft-social-icons a:hover {
      color: var(--ft-red);
      transform: translateY(-2px);
  }

  /* Bottom bar */
  .ft-bottom {
      border-top: 1px solid #d9d9d9;
      padding: 20px 0;
      text-align: center;
      font-size: .88rem;
      color: var(--ft-text);
  }

  .ft-back-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      background: var(--ft-dark);
      color: #fff;
      border: none;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      cursor: pointer;
      text-decoration: none;
      transition: background .15s ease;
  }

  .ft-back-to-top:hover {
      background: var(--ft-red);
      color: #fff;
  }

  @media (max-width:991.98px) {
      .ft-grid {
          grid-template-columns: 1fr 1fr;
          row-gap: 40px;
      }
  }

  @media (max-width:575.98px) {
      .ft-grid {
          grid-template-columns: 1fr;
          text-align: left;
      }

      .ft-footer {
          padding-top: 45px;
      }

      .ft-back-to-top {
          right: 16px;
          bottom: 16px;
          width: 40px;
          height: 40px;
      }
  }

  /* end */