:root {
    --brand-blue: #004aad; /* corporate blue */
    --brand-yellow: #fcd21d; /* golden yellow */
    --brand-light: #eaf3ff;
    --text-dark: #1c1c1c;
    --bg-light: #f8f9fb;
  }

  body {
    font-family: "Inter", system-ui, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
  }

  /* Navbar */
  .navbar {
    background-color: var(--brand-blue) !important;
  }
  .navbar-brand strong, 
  .navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
  }
  .navbar-nav .nav-link:hover {
    background-color: var(--brand-yellow);
    color: var(--brand-blue) !important;
    border-radius: 5px;
    transition: 0.3s;
  }

  /* Hero Section */
  .hero-overlay {
    background: linear-gradient(90deg, rgba(0,74,173,0.8) 0%, rgba(252,210,29,0.2) 100%);
  }

  /* Section Headings */
  h2, h3, h4 {
    color: var(--brand-blue);
  }

  /* Buttons */
  .btn-primary {
    background-color: var(--brand-blue);
    border: none;
  }
  .btn-primary:hover {
    background-color: #003580;
  }
  .btn-outline-light:hover {
    background-color: var(--brand-yellow);
    color: var(--brand-blue);
  }

  /* Flip Cards */
  .flip-card-front {
    background: linear-gradient(180deg, #fff, #f9faff);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
  }
  .flip-card-back {
    background: linear-gradient(180deg, var(--brand-blue), #002d72);
  }

  /* Announcements Section */
  #announcements {
    background-color: #fff;
  }
  #announcements h2 {
    color: var(--brand-yellow);
  }
  #announcements .card {
    border-top: 5px solid var(--brand-blue);
  }

  /* Rates Section */
  #rates {
    background: linear-gradient(180deg, #fefefe, #f6f9ff);
  }
  #rates h2 {
    color: var(--brand-yellow);
  }
  #rates .bg-white {
    border-top: 4px solid var(--brand-blue);
  }

  /* Chart.js theme */
  #ratesChart {
    background: #fff;
    border-radius: 8px;
  }

  /* About Section */
  #about .card-title {
    color: var(--brand-blue);
  }

  /* Services Section */
  #services {
    background-color: var(--brand-light);
  }
  .badge.bg-primary-subtle {
    background-color: rgba(0, 74, 173, 0.1) !important;
    color: var(--brand-blue) !important;
  }

  /* Projects Section */
  #projects h3 {
    color: var(--brand-blue);
  }
  .project-card img {
    border-bottom: 4px solid var(--brand-yellow);
  }

  /* Footer */
  footer {
    background-color: var(--brand-blue);
    color: #fff;
  }
  footer a {
    color: var(--brand-yellow);
    text-decoration: none;
  }
  footer a:hover {
    color: #fff;
  }

  /* Utility classes */
  .accent {
    color: var(--brand-yellow);
  }
  .text-primary {
    color: var(--brand-blue) !important;
  }
  .text-warning {
    color: var(--brand-yellow) !important;
  }
  .carousel{
    opacity: 1;
  }
  :root{
      --blue-1: #00c6ff;
      --blue-2: #0072ff;
      --yellow: #ffd400;
      --card-white: #ffffff;
      --muted: #6c757d;
    }
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#111;
      background: linear-gradient(90deg,var(--blue-1),var(--blue-2));
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Shared container style for infographic card look */
    .infographic-wrap{
      max-width:1200px;
      margin:0 auto;
      padding:48px 16px;
    }

    /* HERO (Section 1) */
    .hero {
      background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
      border-radius: 14px;
      padding: 36px;
      display:flex;
      gap:24px;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }
    .hero-left{
      flex:0 0 360px;
      min-width:260px;
      background: #fff;
      border-radius:12px;
      padding:28px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
      text-align:left;
      color:#111;
    }
    .hero-left .big-amount{
      font-size:56px;
      font-weight:800;
      letter-spacing:-1px;
    }
    .hero-left .small-note{
      margin-top:12px;
      background:var(--yellow);
      padding:10px 12px;
      border-radius:6px;
      font-weight:600;
      color:#000;
    }
    .hero-left .rates {
      margin-top:18px;
    }
    .rates .rate-title{
      font-weight:700;
      font-size:18px;
      margin-bottom:8px;
    }
    .rates .rate-list{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      font-weight:700;
    }
    .rates .tiny { font-size:0.85rem; color:var(--muted); font-weight:600; }

    .hero-right {
      flex: 1 1 560px;
      min-width: 300px;
      text-align: center;
    }
    
    .hero-arrow {
      width: 160px;
      height: 160px;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    /* main arrow shape (points down) */
    .arrow-red-down {
      width: 0;
      height: 0;
      border-left: 72px solid transparent;
      border-right: 72px solid transparent;
      /* This creates the red downward-pointing triangle head */
      border-top: 104px solid #e61b1b;
      position: relative;
      margin: 0 auto;
      filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
      transform: none !important;
    }
    
    /* top rectangle (the arrow’s body) */
    .arrow-red-down::after {
      content: '';
      position: absolute;
      left: -48px;
      bottom: 104px;
      width: 96px;
      height: 60px;
      background: #e61b1b;
      display: block;
    }
    
    /* caption - force it upright and below arrow */
    .arrow-caption {
      position: absolute;
      top: 120px;
      left: 50%;
      transform: translateX(-50%) rotate(0deg) !important;
      color: #fff;
      font-weight: 800;
      font-size: 26px;
      text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    }

    .hero-right h1{
      font-size:46px;
      font-weight:800;
      color:#fff;
      text-shadow:0 6px 18px rgba(0,0,0,0.25);
      margin-top:12px;
    }
    .hero-right p.lead{
      color:#020202;
      color:rgba(0,0,0,0.85);
      background:transparent;
      margin-top:10px;
      font-size:1.05rem;
      font-weight:700;
      /* center on gradient */
      color:#fff;
      text-shadow:0 2px 8px rgba(0,0,0,0.3);
    }

    /* small pinned rate box */
    .pinned-box{
      width:320px;
      margin:22px auto 0;
      background:#fff;
      border-radius:6px;
      padding:18px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
      text-align:left;
    }
    .pinned-box .pin{
      position:relative;
    }
    .pin .push {
      position:absolute;
      right:-14px;
      top:-16px;
      background:#e53935;
      color:#fff;
      width:34px;
      height:34px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transform:rotate(-20deg);
      box-shadow:0 4px 8px rgba(0,0,0,0.2);
    }
    .pinned-table th{font-weight:800; font-size:14px}
    .pinned-table td{font-weight:700; font-size:20px}

    /* SECTION 2 breakdown card style */
    .breakdown {
      margin-top:34px;
      background:#fff;
      border-radius:12px;
      padding:0;
      overflow:hidden;
      box-shadow:0 12px 30px rgba(0,0,0,0.12);
    }
    .break-row{
      display:flex;
      align-items:center;
      gap:18px;
      padding:18px 22px;
      border-bottom:6px solid rgba(0,115,187,0.06);
      flex-wrap:wrap;
      background:linear-gradient(90deg,#f7fbff,#ffffff);
    }
    .break-row .left {
      flex:0 0 52%;
      min-width:200px;
    }
    .break-row .right {
      flex:0 0 48%;
      min-width:180px;
      text-align:right;
    }
    .break-row h5{font-weight:800; letter-spacing:1px; color:#0b61a9}
    .break-row p.desc {color:#333; margin-bottom:8px}
    .value-big { font-weight:900; font-size:36px; color:#111;}
    .value-small {font-size:0.9rem; color:var(--muted); display:block; margin-top:6px;}

    .badge-noinc { background:#d9534f; color:#fff; padding:6px 10px; border-radius:8px; font-weight:700; font-size:0.85rem; }

    .footer-note {
      margin-top:18px;
      background:var(--yellow);
      padding:18px;
      border-radius:6px;
      font-weight:700;
      color:#000;
      box-shadow:0 8px 16px rgba(0,0,0,0.08);
      line-height:1.35;
    }
    #invitation-to-bid {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}
.bid-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.3);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
}


.pdf-thumb {
  width: auto;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  background: #fff;
}

  /* Style the About button */
  .about-btn {
    background-color: #F7D85A;
    color: #123E9C !important;
    border-radius: 12px;
    font-weight: 600;
    padding: 8px 16px !important;
  }

  .about-btn:hover {
    background-color: #e6c74f;
  }

  /* Remove white background on dropdown */
  .dropdown-yellow {
    background-color: transparent;
    border: none;
    box-shadow: none;
  }

  /* Style the dropdown item */
  .bod-btn {
    background-color: #F7D85A;
    color: #123E9C !important;
    border-radius: 12px;
    font-weight: 600;
    padding: 8px 16px;
    margin-top: 5px;
  }

  .bod-btn:hover {
    background-color: #e6c74f;
  }