:root{
      --bw-primary:#39bc3c; /* new primary green */
      --bw-secondary:#022e5d; /* new secondary navy */
      --ink:#0f172a;
      --muted:#64748b;
      --bg:#f4f7fb;
      --bgwhite: #ffffff;
      --card:#ffffff;
      --blue:       #3082ff;
      --cyan:       #00cfea;
      --teal:       #00b89e;
      --green:      #00dfa2;
      --red:        #ff4060;
      --amber:      #ffaa00;
      --text:       #c4d6ef;
      --dim:        #ebf5ff;
      --dimmer:     #c4cad1;
      --mono: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
      --sans:'Familjen Grotesk', sans-serif;
      --surface:    #022e5d;
  --surface-hi: #022e5d;
  --border:     rgba(120, 174, 255, 0.13);
  --border-hi:  rgba(48, 130, 255, 0.32);
    }
    
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--ink); background:var(--bgwhite);
    }
    /* Top bar */
    .topbar{
      position:sticky; top:0; z-index:10;
      background:linear-gradient(90deg, var(--bw-secondary) 0%, var(--bw-primary) 100%);
      color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06);
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Basic header style */
.site-header {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #39bc3c, #022e5d);
  height: 65px;
}

.topbar-inner{
    margin:0 auto; 
    display:flex; 
    align-items:center; 
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: Arial, sans-serif;
    gap: 150px;
}

@media screen and (min-width: 1500px) and (max-width: 2559px) {
  .topbar-inner {
    max-width: 1500px;
    padding: 0px;
  }
  .shell {
    max-width: 1500px;
  }

  .announcement {
    max-width: 1500px;
    margin: 0px auto !important;
  }
}


@media screen and (min-width: 2560px) {
  .topbar-inner {
    max-width: 1700px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1490px) {
      .topbar-inner {
        padding: 0px 60px;
      }
  }

@media (max-width: 768px) {
      .topbar-inner {
        padding: 0px 30px;
      }
  }

.navbar {
  display: flex;
  overflow: hidden;
  background-color: transparent;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

.navbar a {
  font-size: 14px;
  color: white;
  text-align: center;
  display: flex;
  padding: 0px 16px;
  text-decoration: none;
  height: 100%;
  font-weight: 600;
  align-items: center;
}


.dropdown, .dropdownDo {
  overflow: hidden;
  height: 65px;
  display: block;
}

.dropdown .dropbtn, .dropdownDo .dropbtn {
  cursor: pointer;
  font-size: 14px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  height: 100%;
  font-weight: 600;
}

.navbar a:hover, .dropdown:hover .dropbtn, 
.dropdownDo:hover .dropbtn {
  background-color: #29882b;
  color: #FFFFFF;
  text-decoration: none;
}

.dropbtn:focus {
  background-color: #f9f9f9;
  color: var(--bw-primary);
  text-decoration: none;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  left: 0;
  right: 0;
  padding: 30px 60px;
}

.dropdown-content a {
  float: none;
  color: var(--bw-secondary);
  padding: 12px 16px 12px 0px;
  text-decoration: none;
  display: block;
  text-align: left;
  height: auto !important;
}

.dropdown-content p {
  color: var(--bw-primary);
  padding: 12px 16px 12px 0px;
  font-size: 14px;
  font-weight: 700;
}

.dropdown-content h2 {
    color: var(--bw-primary);
    font-size: 22px;

}

.dropdown-content h4 {
    color: var(--bw-primary);
    font-size: 18px;
    margin-bottom: 0px;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: var(--bw-secondary);
  text-decoration: underline;
}

.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.dropdown-grid-sm {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.dropdown-wedo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.drop-sub {
  padding: 0px 20px;
}

.show {
  display: block;
}

    .logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; padding: 10px 0px; }
    .logo-mark{
      width:34px; height:34px; border:2px solid rgba(255,255,255,.9); border-radius:6px;
      display:grid; place-items:center; font-weight:900; font-size:18px;
    }
    .logo span{opacity:.95}
    .nav{display:flex; gap:26px; margin-left:12px; font-weight:700}
    .nav a{color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.6px; font-size:13px}
    .nav a:hover{opacity:.9; text-decoration:underline}
    .search{border:none; background: #fff; padding:6px 8px; border-radius:6px; min-width:180px; }
    .search-box { display: flex; align-items: center; justify-content: space-between; }
    .search input{
      font-size: 15px;
      float: left;
      width: 80%;
      background: #fff;
      border:none;
    }
    .search input:focus {
      outline: none; /* Removes the default browser focus outline */
      border: 0; /* Optional: if you also want to remove a standard border */
      box-shadow: none; /* Optional: removes shadows, common in frameworks like Bootstrap */
    }
    .search button {padding:6px 10px; border:none; border-radius: 6px; cursor: pointer}
    .search button i { font-size: 14px; }
     .culture-code img {
        width: 650px;
        margin-top: 20px;
      }
    /* Shell */
    .shell{margin:60px auto; display:grid; grid-template-columns:280px 1fr 420px; gap:22px; padding:0 60px}
    @media (max-width:1160px){
      .shell{grid-template-columns:220px 1fr;}
      .aside-right{grid-column:1/-1}
    }
    @media (max-width:860px){
      .shell{grid-template-columns:1fr}
      .leftnav{order:2}
      .main{order:1}
      .aside-right{order:3}
    }

    .article-area {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    /* Left navigation */
    .leftnav{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; }
    .leftnav h3{margin:0 0 10px 0; font-size:14px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted)}
    .culture-list{display:flex; flex-direction:column; gap:6px}
    .culture-item{display:grid; grid-template-columns:8px 1fr; gap:10px; align-items:center; padding:6px 8px; border-radius:8px}
    .culture-item:hover{background:#f7fafc}
    .bar{width:8px; height:22px; border-radius:999px}
    .culture-item span{font-weight:600}

    /* Main content */
    .section-title{font-size:18px; font-weight:800; color:var(--ink); margin:2px 0 12px}
    .spotlight{background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; height: 100%;}
    .spotlight-header{background:var(--bw-secondary); color:#fff; padding:14px 18px; font-weight:700; letter-spacing:.2px;}
    .hero{
      position:relative; height:350px; overflow:hidden; background:linear-gradient(180deg, #bfe3ff 0%, #cfe9ff 30%, #eef6ff 100%);
      display:flex; align-items:center; justify-content:center;
    }
    .hero-img{
      position:absolute; 
      inset:0; 
      background: radial-gradient(1200px 300px at 50% 100%, rgba(0,0,0,.6), transparent 60%),
      url('../img/ship_image.jpg');
      background-size:cover; background-position:center; filter:saturate(.9) contrast(.95);
      background-repeat: no-repeat;
    }

    .hero-img-2 {
      position:absolute; 
      inset:0; 
       background: radial-gradient(1200px 300px at 50% 100%, rgba(0,0,0,.6), transparent 60%),
      url('../img/award_pic1.jpg');
      background-size:cover; background-position: top center; filter:saturate(.9) contrast(.95);
      background-repeat: no-repeat;
    }

    .hero-img-3{
      position:absolute; 
      inset:0; 
      background: radial-gradient(1200px 300px at 50% 100%, rgba(0,0,0,.6), transparent 60%),
      url('../img/stac_slide_3.jpg');
      background-size:contain; background-position:center; filter:saturate(.9) contrast(.95);
      background-repeat: no-repeat;
    }

    .spotlight-2 {
      position:absolute; 
      inset:0; 
       background: radial-gradient(1200px 300px at 50% 100%, rgba(0,0,0,.6), transparent 60%),
      url('../img/img_mgcc.jpg');
      background-size:contain; background-position: top center; filter:saturate(.9) contrast(.95);
      background-repeat: no-repeat;
    }

    .bw-watermark{position:absolute; right:14%; top:50%; transform:translateY(-50%); font-size:180px; font-weight:800; color:rgba(255,255,255,.6); letter-spacing:-6px}
    .hero-label{position:absolute; left:18px; bottom:18px; background:rgba(57, 188, 60,.9); color:#fff; padding:6px 10px; font-size:12px; border-radius:6px; letter-spacing:.3px}
    .hero-title{position:relative; z-index:1; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); width:90%; max-width:720px}
    .hero-title h1{margin:0; font-weight:800; font-size:42px}
    .hero-title .date{font-size:12px; opacity:.95}


    @media (min-width:2560px){
      .shell{margin:60px 400px;}
      .hero{
          height:450px;
      }
      .culture-code img {
        width: 100%;
      }

    }

    .spot-text{padding:18px 20px 22px}
    .spot-text h2{margin:0 0 8px 0; font-size:26px; line-height:1.25; color:var(--bw-secondary)}
    .spot-text p{margin:0; color:var(--muted)}

    /* Right column */
    .aside-right h3{margin:0 0 12px 0; font-size:22px; color:var(--bw-primary)}
    .news-list{display:flex; flex-direction:column; gap:14px}
    .news-card{display:grid; grid-template-columns:1fr 88px; gap:14px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px}
    .news-card:hover{background-color: #ddd;}
    .news-item{text-decoration: none;}
    .news-date{font-size:12px; font-weight:800; color:var(--bw-primary); text-transform:uppercase}
    .news-title{margin:6px 0 8px 0; font-size:18px; font-weight:800; color:var(--bw-secondary)}
    .news-meta{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px}
    .news-thumb{width:100px; height:100px; border-radius:50%; background:#e8f9f1; display:grid; place-items:center; font-weight:900}
    .news-thumb img { width: 100px; height: 100px; object-fit: cover; }
    .badge{display:inline-flex; align-items:center; gap:6px; padding:3px 8px; background:#ebf5ff; color:var(--bw-secondary); border-radius:999px; font-size:12px; font-weight:700}
    .dot{width:8px; height:8px; background:var(--bw-primary); border-radius:999px}

    a{color:var(--bw-secondary); text-decoration:none}
    a:hover{text-decoration:underline}

.img_below { object-fit: cover; height: 305px; width: 100%;}

.new-joiners-tasks {
  padding: 30px 60px 20px;
  font-family: Arial, sans-serif;
}
.new-joiners-tasks .container {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}
.new-joiners h2, .tasks-apps h2 {
  color: #022e5d;
  margin-bottom: 10px;
}
.joiner-card {
  display: flex;
  align-items: flex-start;
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  position: relative;
}
.joiner-card img {
  border-radius: 50%;
  margin-right: 10px;
}
.joiner-card .details a {
  color: #39bc3c;
  font-weight: bold;
  text-decoration: none;
}
.joiner-card .started {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 12px;
  color: #555;
}

@media (min-width:2560px) { 
  .new-joiners-tasks {
    padding: 30px 450px 20px;
  }
}

.tasks-apps .task-box {
  border: 1px solid #ddd;
  padding: 10px;
  background: #fafafa;
  margin-bottom: 10px;
  border-radius: 6px;
}
.tasks-apps .task-box button {
  background: #39bc3c;
  border: none;
  color: #fff;
  padding: 6px 12px;
  margin-top: 5px;
  border-radius: 4px;
  cursor: pointer;
}
.tasks-apps .see-tasks {
  display: block;
  margin: 10px 0;
  color: #39bc3c;
  text-decoration: none;
}
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  gap: 15px;
}
.apps-grid .app img {
  width: 140px;
  height: 60px;
  object-fit: contain;
}

/* New footer links */
.see-more, .settings-link {
  display: inline-block;
  margin-top: 10px;
  color: #39bc3c;
  text-decoration: none;
  font-weight: bold;
}
.see-more:hover, .settings-link:hover {
  text-decoration: underline;
}


.career-opportunities {
  padding: 20px 60px;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
}

@media (min-width:2560px) { 
  .career-opportunities {
      padding: 20px 450px;
  }
}

.tools {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}
.career-box {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 20px 10px;
  text-align: center;
}
.career-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #022e5d;
  font-weight: bold;
  margin-bottom: 15px;
}
.career-title {
  color: #022e5d;
  font-size: 20px;
  margin-bottom: 5px;
}
.career-meta {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-meta-front {
   font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 5px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-deadline {
  font-weight: bold;
  color: #022e5d;
  margin-bottom: 10px;
}
.career-desc {
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;
}
.career-links {
  display: flex;
  justify-content: center;
  gap: 120px;
  font-weight: bold;
}
.career-links a {
  color: #39bc3c;
  text-decoration: none;
}
.career-links a:hover {
  text-decoration: underline;
}




.integrity-section {
  padding: 20px 60px;
  background: linear-gradient(to right, #39bc3c, #022e5d);
  font-family: Arial, sans-serif;
  margin-top: 180px;
}
.integrity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  color: #fff;
}
.integrity-card {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 15px;
  text-align: left;
}
.integrity-card img {
  width: 100%;
  height: 305px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.integrity-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #fff;
}
.integrity-card p {
  font-size: 14px;
  line-height: 1.5;
  color: #FFF;
}
.integrity-card a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  display: block;
  height: 100%;
}
.integrity-card a:hover {
  text-decoration: none;
}

@media (min-width:2560px) { 
  .integrity-section {
    padding: 20px 450px;
  }
}

.site-footer {
  margin-top: 120px;
  background: linear-gradient(to right, #39bc3c, #022e5d);
  font-family: Arial, sans-serif;
  color: #fff;
  padding: 60px;
}
.site-footer .logo {
    font-size: 2em;
    color: #34d399;
    margin-bottom: 10px;
}

@media (min-width:2560px) { 
  .site-footer {
    padding: 60px 450px;
  }
}

.quick-finder {
    margin-bottom: 10px;
}
.quick-finder h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: bold;
}
.quick-finder ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.quick-finder ul li {
    margin: 5px 0;
    font-size: 1em;
}
.quick-finder ul li a {
    color: white;
    text-decoration: none;
}
.quick-finder ul li a:hover {
    text-decoration: underline;
}
.copyright {
    font-size: 0.8em;
}

.mt-15 {
  margin-top: 15px;
}

.read-more {
  font-weight: 600;
  font-size: 15px;
}

.container-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 120px;
  padding: 60px 80px;
}

.container-body {
  padding: 60px 80px;
}

@media (min-width:2560px) { 
  .container-main {
    padding: 60px 450px;
  }

  .container-body {
    padding: 60px 450px;
  }

}

.subtitle {
  font-size: 1.2em;
  color: #000;
  font-weight: 400;
  line-height: 1.5;
}

.main-content h2 {
  font-size: 2.5em;
  font-weight: 400;
  background: linear-gradient(to right, #27ae60, #2ecc71);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 20px 0;
  animation: fadeInDown 1s ease-out;
  }

  @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
  }
  .subtext {
      font-size: 1.5em;
      color: #27ae60;
      text-align: center;
      margin-bottom: 30px;
      font-style: italic;
  }
  .image-section {
      text-align: center;
      margin: 30px 0;
  }
  .image-section img {
      max-width: 100%;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.15);
      transition: transform 0.3s ease;
  }
  .image-section img:hover {
      transform: scale(1.05);
  }
 
  @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  .container-about {
      max-width: 1200px;
      margin: 60px auto;

  }
  
  .toc-card {
      background: #fff;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
  }
  .toc-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
  .toc-card h3 {
      color: #27ae60;
      margin-bottom: 10px;
  }
  .section-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
  }

  .card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  }
  .main-content-card h2 {
      color: var(--bw-primary);
      font-size: 1.8em;
      margin-bottom: 20px;
      text-align: center;
  }
  .main-content-card h3 {
      color: var(--bw-secondary);
      margin-top: 40px;
      margin-bottom: 10px;
  }
  .main-content-card ul {
      list-style-type: none;
      padding: 0;
  }

  .main-content-card ol {
    list-style-type: disc;
    padding-left: 60px;
  }

  .main-content-card ul li {
      margin: 10px 0;
      padding-left: 20px;
      position: relative;
  }

   .main-content-card ol li{
      margin: 10px 0;
      padding-left: 0px;
      position: relative;
  }

  .main-content-card ul li::before {
    content: "\25B6";
    color: #39bc3c;
    position: absolute;
    left: 0;
  }

  .main-content-card ol li::before{
    content: '';
  }

.main-content-card p {
  font-size: 1em;
  line-height: 1.7;
  margin: 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.value-card {
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  color: #27ae60;
  transition: transform 0.3s ease;
}
.value-card:hover {
    transform: scale(1.05);
}
.leadership-image {
    text-align: center;
    margin: 20px 0;
}
.leadership-image img {
    max-width: 100%;
    border-radius: 10px;
}
  .contact-card {
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      color: #fff;
      padding: 40px;
      text-align: center;
      border-radius: 20px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }

  .section-divider {
      margin: 40px 0px;
      width: 50%;
      border-top: 2px solid var(--bw-primary);
      padding-top: 10px;
    }
  
  @media (max-width: 768px) {
      .main-content h2  { font-size: 1.5em; }
      .section-cards { grid-template-columns: 1fr; }
  }

  .section-subtitle {
      color: #39bc3c;
      font-size: 20px;
      font-weight: 700;
      margin: 0;
    }

    .main-content-card{
      padding-bottom: 30px;
    }

    /* Sidebar */
    .sidebar {
        padding: 0 40px;
    }

    .sidebar h3 {
      color: var(--bw-secondary);
      font-size: 18px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0;
    }
    .sidebar ul li {
      margin: 10px 0;
    }
    .sidebar ul li a {
      text-decoration: none;
      color: var(--bw-secondary);
      font-weight: 500;
      font-size: 1em;
    }
    .sidebar ul li a:hover {
      color: var(--bw-primary);
    }
    .sidebar .expand {
      font-weight: 800;
      font-size: 20px;
      margin-left: 5px;
    }

    .img-retention {
      margin: 30px 0;
    }

    .container {
            max-width: 100%;
            margin: 0 auto;
            background-color: white;
        }

        .quarter-header {
            background-color: white;
            padding: 20px 30px;
            border-bottom: 2px solid #e0e0e0;
        }

        .quarter-header h3 {
            font-size: 28px;
            font-weight: bold;
            color: #333;
        }

        .update-row {
            display: flex;
            align-items: center;
            padding: 30px;
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-decoration: none;
            color: inherit;
        }

         .update-row.hidden {
            display: none;
        }

        .update-row:hover {
            background-color: #f0f8ff;
        }

        .update-content {
            flex: 1;
            padding-right: 30px;
        }

        .update-date {
            color: #0066a1;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .update-title {
            color: #0066a1;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .update-tags {
            color: #0066a1;
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .update-description {
            color: #333;
            font-size: 15px;
            line-height: 1.6;
        }

        .update-image {
            flex-shrink: 0;
            width: 300px;
            height: 180px;
            background-color: #e8f4f8;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            overflow: hidden;
        }

        .update-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .placeholder-text {
            color: #999;
            font-size: 14px;
            text-align: center;
        }

        .placeholder-text img {
          object-fit: cover;
          width: 100%;
        }

        /* Filter Section */
        .filter-section {
            background-color: #f9f9f9;
            padding: 30px;
            border-bottom: 2px solid #e0e0e0;
        }

        .filter-header {
            margin-bottom: 20px;
        }

        .filter-header h3 {
            display: inline;
            color: var(--bw-secondary);
            font-size: 18px;
            margin-right: 10px;
        }

        .hide-toggle {
            color: var(--bw-primary);
            cursor: pointer;
            font-size: 14px;
        }

        .filter-tabs {
            display: flex;
            gap: 30px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }

        .filter-tab {
            color: var(--bw-secondary);
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            position: relative;
        }

        .filter-tab.active::after {
            content: '';
            position: absolute;
            bottom: -11px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: var(--bw-secondary);
        }

        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .filter-option {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-option input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--bw-secondary);
        }

        .filter-option label {
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            color: #333;
        }

        .selected-filters {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }

        .selected-filters-label {
            font-weight: bold;
            color: #333;
        }

        .filter-tag {
            background-color: white;
            border: 2px solid var(--bw-secondary);
            color: var(--bw-secondary);
            padding: 5px 12px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 14px;
        }

        .clear-filters {
            color: var(--bw-secondary);
            text-decoration: underline;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
        }

        .news-detail-page {
          padding: 40px 0px;
          max-width: 900px;
        }

        /* Detail Page Styles */
        .detail-page {
            display: none;
            padding: 40px 0px;
            max-width: 900px;
        }

        .detail-page.active {
            display: block;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            color: #0066a1;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 30px;
            text-decoration: none;
        }

        .back-button:hover {
            text-decoration: underline;
        }

        .back-button::before {
            content: '←';
            margin-right: 8px;
            font-size: 20px;
        }

        .detail-header {
            margin-bottom: 30px;
        }

        .detail-date {
            color: #0066a1;
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 15px;
        }

        .detail-title {
            color: #0066a1;
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .detail-tags {
            color: #0066a1;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .detail-image {
            width: 100%;
            height: 400px;
            background-color: #e8f4f8;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .detail-image img {
            width: 100%;
            height: 400px;
            object-fit: contain;

        }

        .detail-body {
            color: #333;
            font-size: 16px;
            line-height: 1.8;
        }

        .detail-body p {
            margin-bottom: 20px;
        }

        .detail-body h3 {
            color: #0066a1;
            font-size: 22px;
            margin-top: 30px;
            margin-bottom: 15px;
        }

        .detail-body ul {
            margin-left: 25px;
            margin-bottom: 20px;
        }

        .detail-body li {
            margin-bottom: 10px;
        }

        .list-page {
            display: block;
        }

        .list-page.hidden {
            display: none;
        }


        @media (max-width: 768px) {
            .update-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .update-content {
                padding-right: 0;
                margin-bottom: 20px;
            }

            .update-image {
                width: 100%;
            }

            .filter-tabs {
                flex-direction: column;
                gap: 15px;
            }

            .detail-page {
                padding: 20px;
            }

            .news-detail-page {
               padding: 20px;
            }


            .detail-title {
                font-size: 28px;
            }

            .detail-image {
                height: 250px;
            }
        }


.features-btn-area {
  margin-top: 40px;
  width: 50%;
  display: flex;
  justify-content: center;
}

.btn-primary {
  text-decoration: none;
  padding: 20px 60px;
  border-radius: 10px;
  background-color: var(--bw-primary);
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 600;
  width: auto;
}

.btn-primary:hover {
  text-decoration: none;
  background-color: var(--bw-secondary);
}

.features-title {
  color: var(--bw-secondary);
  font-weight: 700;
  font-size: 1.8rem;
}

.btn-primary-small {
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: var(--bw-primary);
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: 500;
  width: auto;
}

.btn-primary-small:hover {
  text-decoration: none;
  background-color: var(--bw-secondary);
}

.img-connect-exp {
    height: 400px;
    object-fit: cover;
    width: 100%;
    border-radius: 15px;

}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 400px;
  perspective: 1000px;
}

@media (max-width: 767.98px) { 
    .flip-card {
       margin-bottom: 40px;
    }
}


.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 15px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 15px;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #FFFFFF;
  color: #121212;
  transform: rotateY(180deg);
  border-radius: 15px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-overlay {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 15px;
    /*background-image: linear-gradient(180deg, rgb(57, 188, 60)rgba(18, 18, 19, 0.7) 69%, rgba(2, 46, 93, 0.8) 19%); */
    background-image: linear-gradient(to bottom, rgba(2, 46, 93, 0.7) 45%, rgba(57, 188, 60, 0.7) 100%); 
    background-size: cover; /* Ensures the image covers the entire element */
    background-position: center; /* Centers the background image */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 10px;
  
}

.flip-front-title {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 700;
    margin: 0;
}

.flip-back-title {
    font-size: 1.2rem;
    color: #121212;
    font-weight: 700;
    margin: 0;
}

.carousel {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: 450px;
    padding-bottom: 20px;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    top: 0;
    left: 100%;
}

.carousel-item.active {
    left: 0;
    transition: all 0.3s ease-out;
}

.mySlides {display: none;}

.annSlides { display: none; }

.ic_announcement {
  margin-left: 60px;;
}

.annBody {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 80px;
}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  position: relative;
  margin: auto;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.announcement {
  width: auto;
  margin: 0px 60px;
  background-color: #005667;
  padding: 10px 60px;
  display: flex;
  gap: 80px;
  align-items: center;
}

.announcement p, .announcement a, .announcement h2 {
  color: #FFFFFF;
}

.announcement-title {
  font-size: 17px;
  margin: 0px;
  padding-bottom: 5px;
}

.announcement-link {
  font-size: 22px;
  text-decoration: underline;
}

.announcement-subtitle {
  font-size: 15px;
  margin: 0px;
  padding-top: 5px;
}

.announcement img {
  width: 40px;
  height: 40px;
}

.ann-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #FFF;
  padding: 0 8px;
  z-index: 10;
  line-height: 1;
}

.ann-arrow:hover {
  color: #afafaf;
}

.ann-arrow-left  { left: 0; }
.ann-arrow-right { right: 0; }

@media (min-width:2560px) {
  .announcement {
    margin: 0px 450px;
  }
}
        
.open-sign-styles {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

a.open-sign-styles:hover {
  text-decoration: none;
}

.apps-grid .app .img-opensign {
  height: 50px;
  width: 50px;
}

.open-sign-styles span {
  font-size: 1.3rem;
  font-weight: 400;
  color: #070707;
}

/* Grid Container */
.grid-container {
    display: grid;
    /* Creates responsive columns: auto-fit tries to fit as many columns of at least 200px as possible */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; /* Space between grid items */
}

/* Grid Item Styling and Hover Effect */
.grid-item {
    position: relative;
    overflow: hidden; /* Ensures hover effect stays within bounds */
    border-radius: 8px; /* Optional: adds rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.grid-item img {
  position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the area without stretching */
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
}

.grid-item:hover img {
    transform: scale(1.05); /* Slightly scales the image on hover */
}

/* Optional: Add text overlay on hover */
.grid-item::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    text-align: center;
    padding: 1rem 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-item:hover::after {
    opacity: 1;
}

/* Media Queries for different screen sizes (example breakpoints) */
@media (max-width: 768px) {
    .grid-container {
        /* On medium screens, show two columns */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid-container {
        /* On small screens, stack images vertically in a single column */
        grid-template-columns: 1fr;
    }
}

#background-video {
    position: fixed; /* Fixes the video relative to the viewport */
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    z-index: -1; /* Sends the video behind other content */
    /* Ensure the video covers the entire screen while maintaining aspect ratio */
    object-fit: cover; 
}


.video-preview { position: relative; cursor: pointer; width: 100%; height: 100%;}
.video-preview video { width: 100%; border-radius: 8px; }

.video-preview-link { position: relative; cursor: pointer; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: center; }
.video-preview-link video { width: 80%; border-radius: 8px; }


/* The Modal (Background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
}

/* Modal Content */
.modal-content {
    position: relative;
    margin: 10% auto;
    width: 80%;
    max-width: 800px;
}

.close-btn {
    position: absolute;
    top: -40px; right: 0;
    color: white; font-size: 40px; cursor: pointer;
}

.news-index {
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 20px;
  display: grid;
}

 .oil-widget {
    width: 100%;
    border-radius: 10px;
    background-color: #022e5d;
    color: #ffffff;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }


  .widget-header {
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .widget-header img {
    width: 15px;
    margin-right: 8px;
  }

 

  .price-section {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  .price-change {
    font-size: 13px;
    font-weight: normal;
  }

  .price-up {
    color: #4CAF50;
  }

  .price-down {
    color: #F44336;
  }

  .sparkline {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .timestamp {
    font-size: 11px;
     color: #e2e2e2;
    text-align: center;
  }

  /* ── Header ── */
.oil-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #d6d6d6;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.barrel-icon {
  width: 40px; height: 40px;
  background: linear-gradient(140deg, #1a3a6a 0%, #0b1e3a 100%);
  border: 1px solid rgba(48,130,255,0.3);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 0 16px rgba(48,130,255,0.15);
}

.brand-text h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--bw-secondary);
}

.brand-text p {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a587a;
  margin-top: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pill-live {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  background: rgba(0, 192, 141, 0.2);
  border: 1px solid rgba(0,223,162,0.18);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bw-primary);
}

.pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bw-primary);
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 4px var(--bw-primary); }
  50%      { opacity: 0.3; box-shadow: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  background: transparent;
  border: 1px solid var(--bw-secondary);
  border-radius: 7px;
  color: var(--bw-secondary);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.btn:hover:not(:disabled) { background: rgba(2, 46, 93, 0.2); border-color: var(--bw-secondary); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn.spinning .ico { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Grid ── */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "brent bonny nfem";
  gap: 1.2rem;
}

.card-brent { grid-area: brent; }
.card-bonny { grid-area: bonny; }
.card-nfem  { grid-area: nfem; }

/* ── Oil Card ── */
.oil-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.6rem 1.7rem 1.3rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s;
  display: flex;
  flex-direction: column;
  height: 260px;
}

.oil-card:hover { border-color: rgba(48,130,255,0.28); }

/* top accent line per card */
.oil-card-brent::before { content:''; position:absolute; top:0;left:0;right:0;height:2px; background: linear-gradient(90deg, transparent, #3082ff 40%, #00cfea, transparent); opacity:.55; }
.oil-card-bonny::before { content:''; position:absolute; top:0;left:0;right:0;height:2px; background: linear-gradient(90deg, transparent, #00b89e 40%, #00cfea, transparent); opacity:.55; }
.oil-card-nfem::before  { content:''; position:absolute; top:0;left:0;right:0;height:2px; background: linear-gradient(90deg, transparent, #ffaa00 40%, #ff8c00, transparent); opacity:.45; }

/* corner watermark */
.card-watermark {
  position: absolute;
  bottom: -12px; right: -8px;
  font-size: 6rem;
  line-height: 1;
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.card-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.card-source {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--dimmer);
  letter-spacing: 0.08em;
  margin-top: 3px;
}


/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.22rem 0.55rem;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.badge-up   { background: rgba(0,223,162,0.1); color: var(--green); border: 1px solid rgba(0,223,162,0.2); }
.badge-down { background: rgba(255,64,96,0.1);  color: var(--red);   border: 1px solid rgba(255,64,96,0.2); }
.badge-flat { background: rgba(255,170,0,0.08); color: var(--amber); border: 1px solid rgba(255,170,0,0.18); }

/* ── Price ── */
.price-val {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #dceeff;
  margin-bottom: 0.2rem;
}

.price-unit {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}

/* ── Sparklines ── */
.chart-wrap {
  margin-top: auto;
  padding-top: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.chart-lbl {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.chart-range {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--dimmer);
}

canvas.spark {
  width: 100%;
  height: 72px;
  display: block;
}

/* ── NFEM layout ── */
.nfem-body {
  display: block;
  align-items: start;
}

.nfem-price-block .price-val { font-size: 1.4rem; }

.nfem-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

table.fx {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.68rem;
  white-space: nowrap;
}

table.fx thead tr {
  background: rgba(48,130,255,0.05);
  border-bottom: 1px solid var(--border);
}

table.fx th {
  padding: 0.55rem 0.85rem;
  text-align: left;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 400;
}

table.fx td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(48,130,255,0.05);
  color: var(--text);
}

table.fx tr:last-child td { border-bottom: none; }
table.fx td:not(:first-child),
table.fx th:not(:first-child) { text-align: right; }

.fx-nfem { color: var(--cyan) !important; font-weight: 500; }

/* alternating row tint */
table.fx tbody tr:nth-child(even) td { background: rgba(48,130,255,0.02); }

/* ── Updated line ── */
.updated {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--dimmer);
  letter-spacing: 0.08em;
  margin-top: 0.85rem;
}

/* ── Shimmer ── */
.shim {
  background: linear-gradient(90deg, var(--surface-hi) 25%, rgba(48,130,255,0.06) 50%, var(--surface-hi) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Error banner ── */
#errBanner {
  display: none;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: rgba(255,170,0,0.06);
  border: 1px solid rgba(255,170,0,0.2);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--amber);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 660px) {
  .grid { grid-template-columns: 1fr; grid-template-areas: "brent" "bonny" "nfem"; }
  .nfem-body { grid-template-columns: 1fr; }
  .price-val { font-size: 1.4rem; }
  header { flex-direction: column; align-items: flex-start; }
}

/* staggered card entrance */
.oil-card { animation: cardIn 0.5s ease both; }
.card-brent { animation-delay: 0.05s; }
.card-bonny { animation-delay: 0.12s; }
.card-nfem  { animation-delay: 0.19s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Core tooltip CSS */
.tip {
  position: relative;
  cursor: pointer;
}

.tip .bubble {
  position: absolute;
  background: #1e1e1e;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  width: 700px; 

  /* hidden by default */
  opacity: 0;
  visibility: hidden;                        /* add this */
  transition: opacity 0.15s ease,
              visibility 0.15s ease,         /* add this */
              transform 0.15s ease;

  /* position: top */
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);

  white-space: normal;  /* was: nowrap */ 
  line-height: 1.4;
}

/* show on hover */
.tip:hover .bubble {
  opacity: 1;
  visibility: visible;      
}

/* arrow */
.tip .bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e1e1e;
}


.main-content-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 30px;
}

.main-content-card th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.main-content-card th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
}

.main-content-card tr:hover {
  background-color: #fafafa;
}