/* CSS Custom Properties (Variables) */

/* THIS CODE AFFECTS THE NOTIFICATION AT THE TOP OF THE NAV LINKS */

/* Notification Banner */
.notification-bar {
  background-color: #cb070c; 
  color: #ffffff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem; 
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
}

.notification-bar a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.3s ease;
}

.notification-bar a:hover {
  color: #1e1f4f; 
}

/* Responsive text sizes */
@media (min-width: 768px) {
  .notification-bar {
    font-size: 1rem; /* md:text-base */
    padding: 0.75rem 1rem;
  }
}

/* Optional: keep nav-links unaffected */
.nav-links {
  margin-top: 0; /* ensure banner doesn’t push nav */
}

/* Optional: small spacing between banner and nav */
.notification-bar + .nav-links {
  margin-top: 0.25rem;
}

/* Mobile friendly: make banner text wrap nicely */
.notification-bar {
  white-space: normal;
  word-wrap: break-word;
}

/* Optional: smooth fade-in animation */
.notification-bar {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


:root {
    --color-primary-dark: #ccdef8;
    --color-nic-blue: #0A5F9B;
    --color-accent-color: #FBBF24;
    --color-text-default: #374151;
    --color-white: #ffffff;
    --color-gray-50: #F9FAFB;
}

/* GLOBAL BASE STYLES */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--color-text-default);
    line-height: 1.6;
}

.container {
    max-width: 1280px;
    /* Max width of content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Helper Classes for Nunjucks Templates */
.bg-primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-gray-50 {
    background-color: var(--color-gray-50);
}

.text-nic-blue {
    color: var(--color-nic-blue);
}

.text-primary-dark {
    color: var(--color-primary-dark);
}

.text-accent-color {
    color: var(--color-accent-color);
}


/* BUTTON STYLES */

.btn-primary,
.btn-lg-primary,
.btn-accent,
.btn-primary-full {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--color-nic-blue);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #1e1f4f;
}

.btn-lg-primary {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    background-color: var(--color-nic-blue);
    color: var(--color-white);
}

.btn-lg-primary:hover {
    background-color: #1e1f4f;
}

.btn-accent {
    background-color: #cb070c;
    color: #fff;
}

.btn-accent:hover {
    background-color: #1e1f4f;
}

.btn-primary-full {
    width: 100%;
    background-color: #1e1f4f;
    color: var(--color-white);
}

/* HEADER STYLES (components/header.njk) */


:root {
    --nic-blue: #0033A1;
    --nic-red: #C8102E;
    --nic-black: #111111;
    --nic-white: #ffffff;

    --nav-height: 72px;
}

.nav-item {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.dropdown-menu a {
    padding: 12px 16px;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-menu {
    display: flex;
}

.mobile-dropdown-menu {
    display: none;
    flex-direction: column;
    padding-left: 16px;
}

.mobile-nav-item.open .mobile-dropdown-menu {
    display: flex;
}

.mobile-dropdown-toggle {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 12px 16px;
    font-size: 16px;
}

/* Mega Dropdown Container */
.mega-dropdown {
    position: relative;
}

.mega-dropdown .mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    background: #ffffff;
    padding: 25px 30px;
    width: 900px;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 9999;
}

/* Show menu on hover */
.mega-dropdown:hover .mega-menu {
    display: grid;
}

/* Column Titles */
.mega-column h4 {
    margin-bottom: 10px;
}

.mega-column h4 a {
    color: #003366;
    font-weight: 700;
    text-decoration: none;
}

/* Column links */
.mega-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-column ul li {
    margin-bottom: 6px;
}

.mega-column ul li a {
    text-decoration: none;
    color: #444;
    font-size: 0.95rem;
}

.mega-column ul li a:hover {
    color: #003366;
    text-decoration: underline;
}


/* INVEST IN LIBERIA: FOR THE LOCATION PAGE */

.liberia-location-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e1f4f;
    line-height: 1.8;
}

/* Headings */
.liberia-location-content h1 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    color: #1e1f4f;
}

.liberia-location-content h2 {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1e1f4f;
    border-left: 4px solid #cb070c;
    padding-left: 0.75rem;
}

/* Paragraphs */
.liberia-location-content p {
    font-size: 1.05rem;
    margin-bottom: 1.4rem;
}

/* List */
.liberia-location-content ul {
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.liberia-location-content ul li {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

/* Emphasis */
.liberia-location-content strong {
    color: #cb070c;
    font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .liberia-location-content {
        padding: 1.5rem 1rem;
    }

    .liberia-location-content h1 {
        font-size: 2rem;
    }

    .liberia-location-content h2 {
        font-size: 1.5rem;
    }
}

/* INVEST IN LIBERIA: FOR THE BUSINESS START-UP PROCEDURES */

.business-startup-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
    line-height: 1.8;
}

/* Headings */
.business-startup-content h1 {
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
    color: #0b3c5d;
}

.business-startup-content h2 {
    font-size: 1.9rem;
    margin-top: 2rem;
    color: #114b7a;
}

.business-startup-content h3 {
    font-size: 1.4rem;
    margin-top: 2rem;
    color: #0b3c5d;
}

.business-startup-content h4 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    color: #374151;
}

/* Subtitle */
.business-startup-content .subtitle {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1.5rem;
}

/* Text */
.business-startup-content p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}

/* Lists */
.business-startup-content ul,
.business-startup-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.business-startup-content li {
    margin-bottom: 0.75rem;
}

/* Links */
.business-startup-content a {
    color: #0b3c5d;
    text-decoration: underline;
}

.business-startup-content a:hover {
    text-decoration: none;
}

/* Emphasis */
.business-startup-content strong {
    color: #0b3c5d;
    font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
    .business-startup-content {
        padding: 1.5rem 1rem;
    }

    .business-startup-content h1 {
        font-size: 2rem;
    }

    .business-startup-content h2 {
        font-size: 1.6rem;
    }
}


/* INVEST IN LINERIA: FOR THE PREFERENTIAL MARKET ACCESS PAGE */

.market-access-rows {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
}

/* Header */
.market-access-header {
    margin-bottom: 3rem;
}

.market-access-header h1 {
    font-size: 2.6rem;
    color: #0b3c5d;
    margin-bottom: 1rem;
}

.market-access-header p {
    font-size: 1.15rem;
    max-width: 720px;
    color: #374151;
}

/* FORCE 2x2 GRID WITH EQUAL ROWS */
.market-access-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); 
    gap: 2rem;
    align-items: stretch; /* important */
}

/* Cards stretch to fill cell */
.market-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: center;
    height: 100%; 
    padding: 2rem;
    background-color: #f8fafc;
    border-radius: 14px;
    border-left: 5px solid #0b3c5d;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.market-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.1);
}

/* Flag */
.market-flag {
    width: 64px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Text */
.market-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.market-info h2 {
    font-size: 1.4rem;
    color: #114b7a;
    margin-bottom: 0.5rem;
}

.market-info p {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Footer */
.market-access-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.95rem;
    color: #4b5563;
}

/* 📱 Mobile fallback */
@media (max-width: 900px) {
    .market-access-list {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}


/* INVEST IN LIBERIA: FOR THE FREE ZONE PAGE */

.free-zones-page .free-zones-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
}

.free-zones-page .free-zones-header {
    margin-bottom: 3rem;
}

.free-zones-page .free-zones-header h1 {
    font-size: 2.6rem;
    color: #0b3c5d;
    margin-bottom: 1rem;
}

.free-zones-page .free-zones-header p {
    font-size: 1.15rem;
    max-width: 720px;
    color: #374151;
}

.free-zones-page .free-zone-section {
    margin-bottom: 3rem;
}

.free-zones-page .free-zone-section h2 {
    font-size: 1.9rem;
    color: #0b3c5d;
    margin-bottom: 1rem;
}

.free-zones-page .free-zone-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.free-zones-page .free-zone-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.free-zones-page .free-zone-list {
    margin: 1rem 0 1.5rem 1.5rem;
    list-style-type: disc;
}

.free-zones-page .external-link a {
    color: #0b3c5d;
    text-decoration: underline;
}

.free-zones-page .external-link a:hover {
    color: #114b7a;
}


/* INVEST IN LIBERIA: SPECIAL INCENTIVES STYLES */

/* Expand/Collapse Buttons */
.special-incentives-page .toggle-buttons {
  margin-top: 1rem;
  text-align: center;
}

.special-incentives-page .toggle-buttons button {
  background-color: #004B87;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  margin: 0 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.special-incentives-page .toggle-buttons button:hover {
  background: #003a68;
}

/* Accordion Styles */
.special-incentives-page .accordion-header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  align-items: center;
}

.special-incentives-page .accordion-icon {
  font-size: 1.5rem;
  transition: transform 0.3s;
}

.special-incentives-page .accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}

.special-incentives-page .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.special-incentives-page .accordion-item.open .accordion-content {
  max-height: 500px;
  margin-top: 1rem;
}

/* INVEST IN LIBERIA: FOR THE EXISTING INVESTORS PAGE */

.investors-page {
  max-width: 1000px;
  margin: auto;
  padding: 40px 20px;
}

.investors-header {
  text-align: center;
  margin-bottom: 30px;
}

.show-map-btn {
  background: #0073e6;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.investor-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.investor-filters input,
.investor-filters select {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.investor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 25px;
}

.investor-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.investor-logo {
  max-width: 100px;
  max-height: 60px;
  object-fit: contain;
  margin-bottom: 12px;
}

.view-more-btn {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #444;
  color: #fff;
  border: none;
  cursor: pointer;
}

.investor-details {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}


/* INVEST IN LIBERIA: BUSINESS LINKAGES STYLES */

.business-linkages-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  line-height: 1.7;
  color: #222;
}

.bl-header {
  text-align: center;
  margin-bottom: 40px;
}

.bl-header h1 {
  font-size: 2.3rem;
  margin-bottom: 12px;
}

.bl-section {
  margin-bottom: 30px;
}

.bl-section h2 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: #003366;
}

.bl-section p {
  margin-bottom: 15px;
}

.bl-section ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.bl-section li {
  margin-bottom: 8px;
}

/* INVEST IN LIBERIA: FAQS STYLES */

.faqs-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  line-height: 1.7;
  color: #222;
}

.faq-controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.faq-controls button {
  padding: 8px 14px;
  background: #003366;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.faq-controls button:hover {
  background: #002244;
}

.faq-list details {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  background: #fafafa;
}

.faq-list summary {
  font-size: 1.1rem;
  cursor: pointer;
  font-weight: bold;
}

.faq-table {
  width: 100%;
  margin: 15px 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.faq-table th,
.faq-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.faq-table th {
  background: #003366;
  color: white;
}

/* FOR INDUSTRIES: GROWING DEMAND */

.gdm-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: "Inter", sans-serif;
}

/* Subtitle */
.gdm-subtext {
    font-size: 1.2rem;
    color: #545454;
    margin-bottom: 2rem;
    text-align: center;
}

/* Hero Image */
.gdm-hero {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;
}

.gdm-hero-img {
    width: 100%;
    max-width: 800px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.4s ease;
}

.gdm-hero-img:hover {
    transform: scale(1.02);
}

/* Info Box */
.gdm-info-box {
    background: #f8fafc;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    border-left: 5px solid #1d7fbf;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-bottom: 2rem;
}

/* List */
.gdm-list {
    margin: 1rem 0;
    padding-left: 1.4rem;
}

.gdm-list li {
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

/* Source */
.gdm-source {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #777;
    text-align: center;
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: gdmFadeIn 0.7s ease forwards;
}

@keyframes gdmFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE RESPONSIVE STYLINGS */
@media (max-width: 1024px) {
    .gdm-page {
        padding: 1.5rem 1rem;
    }

    .gdm-subtext {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .gdm-hero-img {
        max-width: 100%;
    }

    .gdm-info-box {
        padding: 1.2rem 1.5rem;
    }

    .gdm-list {
        padding-left: 1.2rem;
    }
}

@media (max-width: 700px) {
    .gdm-subtext {
        font-size: 1rem;
    }

    .gdm-info-box {
        padding: 1rem 1rem;
        border-left-width: 4px;
    }

    .gdm-list {
        padding-left: 1rem;
    }

    .gdm-hero-img {
        border-radius: 10px;
    }
}


/* INDUSTRIES: FOR THE LABOUR PAGE*/
.labour-page {
    max-width: 950px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    font-family: "Inter", sans-serif;
}

.labour-intro {
    font-size: 1.15rem;
    text-align: center;
    color: #555;
    margin-bottom: 2.5rem;
}

/* --- GRID FOR INDICATORS --- */
.labour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
}

.labour-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #e5e8ef;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: transform .3s ease, box-shadow .3s ease;
}

.labour-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

.labour-icon {
    width: 58px;
    margin-bottom: 1rem;
}

/* --- IMAGE SECTIONS --- */
.labour-img-wrap {
    text-align: center;
    margin: 2rem 0;
}

.labour-img-wrap img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* --- SOURCE TEXT --- */
.labour-source {
    font-size: 0.9rem;
    color: #777;
    text-align: center;
    margin-top: -0.5rem;
    margin-bottom: 2.5rem;
}

/* --- DOWNLOAD BUTTON --- */
.labour-download-wrapper {
    text-align: center;
    margin-top: 2.5rem;
}

.labour-download-btn {
    display: inline-block;
    background: #0067c5;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.25s ease;
}

.labour-download-btn:hover {
    background: #004f9d;
    transform: translateY(-3px);
}

/* --- Fade-in Animation --- */
.fade-in {
    opacity: 0;
    transform: translateY(14px);
    animation: labourFadeIn 0.7s ease-out forwards;
}

@keyframes labourFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE STYLINGS FOR MOBILE DEVICES */
@media (max-width: 900px) {
    .sbc-page-container {
        padding: 1rem;
    }

    .sbc-grid {
        grid-template-columns: 1fr; /* stack cards vertically */
        gap: 1.5rem;
    }

    .sbc-card {
        padding: 1.25rem; /* slightly smaller padding for small screens */
    }

    .sbc-title {
        font-size: 1.2rem; /* adjust title size */
    }

    .sbc-desc {
        font-size: 0.95rem; /* adjust description size */
    }

    .sbc-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
    }

    .sbc-highlight-metric h3 {
        font-size: 2rem;
    }
    
    .sbc-intro {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .sbc-download-btn {
        padding: 0.75rem 1.4rem;
        font-size: 0.95rem;
    }
}


/* INDUSTRIES: FOR THE BUSINESS CLIMATE PAGE */

.sbc-page-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f8fafc;
    font-family: "Helvetica Neue", sans-serif;
}

.sbc-intro {
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
}

.sbc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.sbc-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sbc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.sbc-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

.sbc-title {
    font-size: 1.35rem;
    color: #0b3d91;
    margin-bottom: 0.75rem;
}

.sbc-desc {
    font-size: 1rem;
    line-height: 1.55rem;
    color: #444;
}

.sbc-highlight-metric {
    text-align: center;
    margin: 3rem 0;
}

.sbc-highlight-metric h3 {
    font-size: 2.5rem;
    color: #0b3d91;
    margin-bottom: 0.3rem;
}

.sbc-source {
    font-size: 0.85rem;
    color: #777;
    margin-top: 0.5rem;
}

.sbc-download-section {
    text-align: center;
    margin-top: 2rem;
}

.sbc-download-btn {
    background: #0b3d91;
    padding: 0.9rem 1.6rem;
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .2s ease;
}

.sbc-download-btn:hover {
    background: #062c63;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .sbc-grid {
        grid-template-columns: 1fr;
    }
}

/* MOBILE RESPONSIVENESS FOR BUSINESS CLIMATE PAGE */

/* Tablets and below */
@media (max-width: 1200px) {
    .sbc-page-container {
        padding: 1.5rem;
    }

    .sbc-intro {
        font-size: 1.15rem;
    }

    .sbc-card {
        padding: 1.5rem;
    }

    .sbc-icon {
        width: 56px;
        height: 56px;
    }

    .sbc-title {
        font-size: 1.25rem;
    }

    .sbc-desc {
        font-size: 0.95rem;
    }

    .sbc-highlight-metric h3 {
        font-size: 2rem;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .sbc-page-container {
        padding: 1rem;
    }

    .sbc-intro {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .sbc-grid {
        grid-template-columns: 1fr; /* single column layout */
        gap: 1.5rem;
    }

    .sbc-card {
        padding: 1.25rem;
    }

    .sbc-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
    }

    .sbc-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .sbc-desc {
        font-size: 0.9rem;
    }

    .sbc-highlight-metric h3 {
        font-size: 1.8rem;
    }

    .sbc-download-btn {
        padding: 0.75rem 1.4rem;
        font-size: 0.95rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .sbc-page-container {
        padding: 0.8rem;
    }

    .sbc-intro {
        font-size: 1rem;
    }

    .sbc-highlight-metric h3 {
        font-size: 1.6rem;
    }
}

/* INDUSTRIES: FOR THE INVESTMENT PAGE */

.invx-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 2.5rem;
    font-family: "Helvetica Neue", sans-serif;
    background: #f4f7fb;
}

.invx-intro {
    text-align: center;
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 2.5rem;
}

/* GRID */
.invx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* CARD STYLE */
.invx-card {
    background: #ffffff;
    border-radius: 1.3rem;
    padding: 1.8rem;
    text-align: left;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    opacity: 0;
    transform: translateY(20px);
}

/* Hover Effect */
.invx-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Icon */
.invx-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1rem;
}

/* Titles & Text */
.invx-title {
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
    color: #0b4a8f;
}

.invx-text {
    font-size: 1rem;
    color: #444;
    line-height: 1.55rem;
}

.invx-source {
    font-size: 0.85rem;
    color: #666;
    margin: 1rem 0 2.5rem;
}

/* IMAGE BLOCK */
.invx-image-block {
    margin: 1.5rem 0;
    text-align: center;
}

.invx-image-block img {
    width: 100%;
    max-width: 1100px;
    border-radius: 1rem;
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

/* Fade-in Animation */
.fade-in {
    animation: fadeSlideUp .9s ease forwards;
}

@keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 800px) {
    .invx-container {
        padding: 1.5rem;
    }
}

/* MOBILE RESPONSIVE */

/* Grid adjusts for smaller screens */
@media (max-width: 1024px) {
    .invx-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* Single column for very small screens */
@media (max-width: 600px) {
    .invx-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .invx-card {
        padding: 1.5rem;
    }

    .invx-title {
        font-size: 1.25rem;
    }

    .invx-text {
        font-size: 0.95rem;
        line-height: 1.5rem;
    }

    .invx-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 0.8rem;
    }

    .invx-image-block img {
        max-width: 100%;
    }
}

/* Additional spacing tweaks for very small screens */
@media (max-width: 400px) {
    .invx-container {
        padding: 1rem;
    }

    .invx-intro {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
}


/* INDUSTRIES: FOR THE GOL SUPPORT */

.gxs-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 2.5rem;
    font-family: "Inter", sans-serif;
    background: #f8fafc;
}

/* Intro text */
.gxs-intro {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Cards */
.gxs-card {
    background: #fff;
    padding: 2rem;
    border-radius: 1.3rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
    transition: transform .25s ease, box-shadow .25s ease;
    opacity: 0;
    transform: translateY(20px);
}

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

/* Grid for incentives */
.gxs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

/* Lists */
.gxs-list {
    padding-left: 1.2rem;
}

.gxs-list li {
    margin-bottom: .6rem;
    line-height: 1.5rem;
}

/* Notes & sources */
.gxs-note {
    margin-top: .8rem;
    font-size: .9rem;
    color: #666;
}

.gxs-source {
    font-size: .85rem;
    color: #777;
    margin-top: 1rem;
}

/* Button */
.gxs-btn-wrapper {
    text-align: center;
    margin-top: 3rem;
}

.gxs-btn {
    display: inline-block;
    background: #0052a3;
    color: #fff;
    padding: .9rem 2.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}

.gxs-btn:hover {
    background: #003d7a;
    transform: translateY(-3px);
}

/* Fade-in animation */
.fade-in {
    animation: fadeUp .85s ease forwards;
}

/* 3×2 Grid Layout */
.gxs-grid-3x2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

/* Responsive behavior */
@media (max-width: 1024px) {
    .gxs-grid-3x2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .gxs-grid-3x2 {
        grid-template-columns: 1fr;
    }
}


@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 800px) {
    .gxs-container {
        padding: 1.5rem;
    }
}

/* INDUSTRIES: FOR THE CASE STUDY PAGE */

.case-studies-page {
  max-width: 850px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-family: "Inter", sans-serif;
  color: #1f1f1f;
  animation: fadeIn 0.6s ease;
}

.case-studies-page h1 {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: #0a3d62;
  margin-bottom: 2.5rem;
  letter-spacing: -0.5px;
}

/* Case Study Cards */
.case-study-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 14px;
  margin-bottom: 2.5rem;
  box-shadow: 0px 6px 18px rgba(0,0,0,0.08);
  border-left: 6px solid #3c9d9b;
  transition: transform .25s ease, box-shadow .25s ease;
}

.case-study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 22px rgba(0,0,0,0.12);
}

.case-study-card h2 {
  font-size: 1.8rem;
  color: #0a3d62;
  margin-bottom: 1rem;
}

.case-study-card h3 {
  font-size: 1.3rem;
  color: #3c9d9b;
  margin-bottom: 0.8rem;
}

.case-study-card ul {
  margin-left: 1.2rem;
  padding-left: 0;
}

.case-study-card li {
  padding: 4px 0;
}

/* Button */
.case-studies-btn-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.case-studies-btn {
  background: #3c9d9b;
  color: #fff !important;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  transition: background 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

.case-studies-btn:hover {
  background: #2f7d7b;
  transform: translateY(-3px);
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .case-studies-page h1 {
    font-size: 2.2rem;
  }

  .case-study-card {
    padding: 1.5rem;
  }

  .case-study-card h2 {
    font-size: 1.5rem;
  }

  .case-studies-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
  }
}

/* LIGHT MANUFACTURING: CASE STUDIES */


/* FOR THE EXPRESSION OF INTEREST PAGE */
.eoi-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #f7f9fc;
}

.eoi-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #0b3d91;
}

.eoi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.eoi-card {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eoi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.eoi-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #0b3d91;
}

.eoi-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.eoi-card-desc {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.eoi-btn {
  text-align: center;
  background-color: #0b3d91;
  color: #fff;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.eoi-btn:hover {
  background-color: #062c63;
}

/* Responsive layout for tablets and mobile */
@media screen and (max-width: 1200px) {
  .eoi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .eoi-grid {
    grid-template-columns: 1fr;
  }
}



/* NAV BASE */
#nic-nav {
    background: var(--nic-white);
    border-bottom: 1px solid #cb070c;
}

.nav-container {
    max-width: 1250px;
    margin: 0 auto;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

/* ----------------------------
   LOGO
----------------------------- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    height: 60px;
    width: auto;
}

/* DESKTOP NAV LINKS */
.nav-links {
    display: none;
    gap: 2rem;
}

.nav-links a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.nav-links a:hover {
    color: #cb070c;
}

/* DESKTOP ACTIONS */
.nav-actions {
    display: none;
    align-items: center;
    gap: 1rem;
}

.search-btn svg {
    width: 24px;
    height: 24px;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    transition: 0.2s;
}

.search-btn:hover {
    color: var(--nic-blue);
}

.nav-cta {
    background: var(--nic-blue);
    color: var(--nic-white);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.nav-cta:hover {
    background: #001e5e;
}

/* ----------------------------
   MOBILE TOGGLE
----------------------------- */
.mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
}

.mobile-toggle svg {
    width: 30px;
    height: 30px;
    color: var(--nic-black);
}

/* ----------------------------
   MOBILE MENU
----------------------------- */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--nic-white);
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.mobile-menu a {
    padding: 1rem 0;
    text-decoration: none;
    color: #444;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
}

.mobile-menu a:last-child {
    border-bottom: none;
}

.mobile-menu.open {
    display: flex;
}

/* Mobile CTA */
.mobile-cta {
    margin-top: 1rem;
    background: var(--nic-blue);
    color: white !important;
    text-align: center;
    padding: 0.8rem;
    border-radius: 4px;
    font-weight: 600;
}

/* ----------------------------
   RESPONSIVE
----------------------------- */
@media (min-width: 992px) {
    .nav-links {
        display: flex;
    }

    .nav-actions {
        display: flex;
    }

    .mobile-toggle {
        display: none;
    }

    .mobile-menu {
        display: none !important;
    }
}

/* HERO SECTION */
.hero-section {
    position: relative;
    height: 60vh;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/images/nic-mining-in-liberia.jpeg");
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 1rem;
    margin: 0 auto;
}

.hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media(min-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
}

.accent-text {
    color: #cb070c;
    /* accent color */
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

@media(min-width: 768px) {
    .hero-subtitle {
        font-size: 1.5rem;
    }
}

/* Button */
.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #cb070c;
    /* primary blue */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #1e1f4f;
}

/* STATISTICS BAR */
.stats-bar {
    background-color: #1e1f4f;
    /* nic-blue */
    padding: 1.5rem 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    text-align: center;
}

@media(min-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-item {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 0.5rem;
}

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

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

/* .stat-label {
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: 0.05em;
} */


/* FOOTER STYLES */

/* NIC Colors */
:root {
    --nic-blue: #0033A1;
    --nic-red: #C8102E;
    --nic-white: #ffffff;
    --nic-black: #111111;
    --footer-bg: #0f0f0f;
    --footer-text: #c3c3c3;
    --footer-border: #3a3a3a;
}

#nic-footer {
    background: #7d7a7a;
    color: #000000;
    padding: 3rem 1rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Grid layout */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #cb070c;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.col-wide {
    grid-column: span 2;
}

/* Titles */
.footer-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1rem;
}

.footer-desc {
    max-width: 350px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Social icons placeholder style */
.footer-socials {
    display: flex;
    gap: 1rem;
}

/* Headings */
.footer-heading {
    font-size: 1.1rem;
    color: #cb070c;
    margin-bottom: 1rem;
}

/* Lists */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 0.6rem;
}

.footer-col ul li a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: #cb070c;
}

/* Contact link */
.contact-link {
    margin-top: 1rem;
    display: inline-block;
    color: var(--nic-red);
    font-weight: 600;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

/* Bottom bar */
.footer-bottom {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-links {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.footer-links a {
    color: #000000;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #cb070c;
}

.footer-socials .social-icon {
    margin-right: 10px;
    color: #1e1f4f;
    text-decoration: none;
    font-size: 1.5rem;
    transition: color 0.2s;
}

.footer-socials .social-icon:last-child {
    margin-right: 0;
}

.footer-socials .social-icon:hover {
    color: #cb070c;
}


/* HOMEPAGE SECTIONS STYLES*/

/* Key Stats Bar (Below Hero) */
.bg-nic-blue {
    background-color: var(--color-nic-blue);
}

.border-white\/30 {
    border-color: rgba(255, 255, 255, 0.3);
    /* Transparent white border */
}

/*  Pillars Section */

:root {
    --nic-blue: #0033A1;
    --nic-red: #C8102E;
    --nic-white: #FFFFFF;
    --nic-black: #1A1A1A;
    --gray-light: #F8F8F8;
}

/* Section */
#pillars {
    padding: 4rem 1rem;
    background: var(--gray-light);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Title */
.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e1f4f;
    margin-bottom: 3rem;
}

.blue-text {
    color: var(--nic-blue);
}

/* Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pillars-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Cards */
.pillar-card {
    background: #e2e3e6;
    padding: 2rem;
    border: 1px solid #000000;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Icons */
.pillar-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    color: #1e1f4f;
}

/* Text */
.pillar-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #cb070c;
    margin-bottom: 0.7rem;
}

.pillar-card p {
    color: #666;
    line-height: 1.6;
}

/* CTA */
.cta {
    margin-top: 3rem;
}

.cta a {
    font-size: 1.1rem;
    font-weight: 600;
    color: #cb070c;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cta a:hover {
    color: #1e1f4f;
}

/* FOR THE PARTNERS */

.partners-section {
  padding: 60px 20px;
  background: #e7e2e2;
  text-align: center;
}

.partners-section h2 {
  font-size: 2rem;
  margin-bottom: 32px;
  font-family: Arial, sans-serif;
  color: #1e1f4f;
}

.partners-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.partners-track {
  display: flex;
  width: max-content;
  animation: scroll-left 20s linear infinite;
}

.partners-track img {
  height: 80px;
  margin: 0 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.partners-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Animation */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .partners-track img {
    height: 60px;
    margin: 0 24px;
  }

  .partners-section h2 {
    font-size: 1.5rem;
  }
}


/* --------------------------------------------- */
/* MOBILE SCROLLING      */
/* --------------------------------------------- */
@media (max-width: 768px) {

    /* Scroll wrapper */
    .pillars-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        margin: 0 -16px;
        /* edge-to-edge touch area */
    }

    /* Horizontal list */
    .pillars-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        padding: 0 16px;
    }

    /* Cards */
    .pillar-card {
        flex: 0 0 75%;
        min-width: 75%;
        max-width: 75%;
        scroll-snap-align: start;
        border-radius: 12px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .pillars-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }
}


.cta-ready {
    background-color: #cb070c;
    /* NIC Blue */
    color: #ffffff;
    padding: 4rem 1.5rem;
    text-align: center;
}

/* Container */
.cta-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Title */
.cta-ready h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

/* Supporting Text */
.cta-ready .cta-text {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* Button Wrapper */
.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 640px) {
    .cta-buttons {
        flex-direction: row;
    }
}

/* Primary CTA Button */
.cta-primary {
    background-color: #d62828;
    /* NIC Red */
    color: white;
    padding: 0.9rem 1.8rem;
    border-radius: 6px;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s, box-shadow 0.3s;
    display: inline-block;
}

.cta-primary:hover {
    background-color: #b71f1f;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Secondary Transparent Button */
.cta-secondary {
    border: 2px solid #ffffff;
    padding: 0.9rem 1.8rem;
    border-radius: 6px;
    color: #ffffff;
    background: transparent;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}

.cta-secondary:hover {
    background-color: #ffffff;
    color: #1d4e89;
    /* NIC Blue */
}



/* Investible Sectors Section */
/* Colors */
:root {
    --nic-red: #C8102E;
    --nic-blue: #0033A0;
    --nic-black: #000000;
    --nic-white: #ffffff;
}

/* Section styles */
.sectors-section {
    padding: 80px 0;
    background: var(--nic-white);
}

.sectors-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.sectors-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e1f4f;
    margin-bottom: 40px;
}

/* Grid layout */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Sector cards */
.sector-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    border: 1px solid #000000;
}

.sector-card:hover {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
}

.sector-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e1f4f;
    margin-bottom: 12px;
}

.sector-text {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}

.sector-link {
    color: #cb070c;
    font-weight: 600;
    text-decoration: none;
}

.sector-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.sector-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sector-card:hover .sector-image img {
    transform: scale(1.05);
}

/* ===============================
   HORIZONTAL SLIDER WRAPPER
================================ */
.sectors-scroll-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
}

/* Optional scrollbar styling */
.sectors-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}
.sectors-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

/* ===============================
   SLIDER GRID
   Supports unlimited cards
================================ */
.sectors-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
}

/* Each card snaps cleanly */
.sector-card {
    scroll-snap-align: start;
}

/* ===============================
   IMAGE SUPPORT
================================ */
.sector-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
}

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

/* ===============================
   RESPONSIVE
================================ */

/* Tablet */
@media (max-width: 1024px) {
    .sectors-grid {
        grid-auto-columns: minmax(260px, 1fr);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .sectors-grid {
        grid-auto-columns: minmax(220px, 1fr);
    }

    .sector-image {
        height: 150px;
    }
}



/* MOBILE: Horizontal scroll */
@media (max-width: 768px) {

    .sectors-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding: 10px 0;
        margin: 0 -12px;
    }

    .sector-card {
        flex: 0 0 60%;
        min-width: 60%;
        max-width: 70%;
        scroll-snap-align: start;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .sectors-scroll-wrapper {
        scroll-snap-type: x mandatory;
    }
}

.sectors-footer {
    margin-top: 40px;
}

.sectors-btn {
    display: inline-block;
    background: #cb070c;
    color: var(--nic-white);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.sectors-btn:hover {
    background: #1e1f4f;
}




/* NEWS AND UPDATES */



.latest-news-grid {
    padding: 2rem 1rem;
}

.latest-news-grid .section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #1f2937;
}

/* Grid layout */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* News card */
.news-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Image */
.news-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* Text under image */
.news-text {
    padding: 0.75rem 1rem 1rem 1rem;
}

.news-date {
    display: block;
    font-size: 0.875rem;
    color: #000000;
    margin-bottom: 0.25rem;
}

.news-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #cb070c;
    margin: 0;
    text-decoration: none;
}

/* .news-title:hover {
    color: #1e1f4f;
} */

/* View all link */
.view-all {
    display: inline-block;
    margin-top: 1.5rem;
    font-weight: 500;
    color: #cb070c;
    text-decoration: none;
}

.view-all:hover {
    color: #1e1f4f;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .latest-news-grid .section-title {
        font-size: 1.75rem;
    }

    .news-title {
        font-size: 1rem;
    }

    .news-image {
        height: 150px;
    }
}

@media (max-width: 768px) {

    /* Scroll wrapper */
    .news-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        margin: 0 -16px;
        /* edge-to-edge scroll zone */
    }

    /* Horizontal list */
    .news-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        padding: 0 16px;
    }

    /* Each card becomes a slide */
    .news-card {
        flex: 0 0 75%;
        /* card width on mobile */
        min-width: 75%;
        max-width: 75%;
        scroll-snap-align: start;

        /* Optional — matches your pillar/sector mobile styling */
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    /* Image should fit the card */
    .news-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Hide scrollbar (optional) */
    .news-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }
}

/* Container Grid */
.success-stories {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    margin: 2rem 0;
    /* padding-bottom: 20px;
    padding-top: 20px; */
}

@media (min-width: 768px) {
    .success-stories {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Story Card */
.story-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    border-top: 4px solid #d62828;
}

/* Title */
.story-card h3 {
    color: #1e1f4f;
    /* NIC Blue */
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* Metadata */
.story-card .meta {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Quote */
.story-card .quote {
    color: #4b5563;
    font-style: italic;
    line-height: 1.6;
}

/* Highlight Line */
.story-card .highlight {
    margin-top: 1rem;
    font-weight: 600;
    color: #d62828;
    /* Accent red */
}

/* SUCCESS STORIES */

/* ---------- Section Base ---------- */
#success {
    background-color: #0f172a; /* primary-dark */
    padding: 4rem 1.5rem;
}

/* ---------- Container ---------- */
#success .container {
    max-width: 1200px;
    margin: 0 auto;
    color: #ffffff;
}

/* ---------- Headings ---------- */
#success h2 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}

#success h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ---------- Success Stories Grid ---------- */
/* Adjust class names if your component differs */
.success-stories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.success-story {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.success-story:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.success-story h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.success-story p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e5e7eb;
}

/* ---------- CTA Area ---------- */
#success .text-center {
    text-align: center;
    margin-top: 2.5rem;
}

/* ---------- Accent Button ---------- */
.btn-accent {
    display: inline-block;
    background: #cb070c;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background: #1e1f4f;
    transform: translateY(-2px);
   
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    #success h2 {
        font-size: 1.75rem;
    }

    #success h3 {
        font-size: 1.25rem;
    }
}

/* RESOURCES FOR DOWNLOADS */

.downloads-section {
    padding: 4rem 1.5rem;
    background-color: #f9fafb; /* light neutral background */
}

.downloads-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.downloads-subtitle {
    text-align: center;
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 3rem;
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.download-card {
    display: flex;
    gap: 1rem;
    background: #1e1f4f;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.file-icon img {
    width: 70px;
    height: 70px;
}

.file-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #fff;     
}



.file-description {
    font-size: 0.95rem;
    color: #b9b7e8;
    margin-bottom: 0.5rem;
}

.download-link {
    font-weight: 600;
    color: #cb070c; /* blue link */
    text-decoration: none;
}

.download-link:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
    .download-card {
        flex-direction: column;
        align-items: start;
    }

    .file-icon img {
        margin-bottom: 0.75rem;
    }
}


.btn-download-resources {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 12px; /* slightly rounded */
    background-color: #cb070c;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    margin-top: 30px;
}

.btn-download-resources:hover {
    background-color: #1e1f4f;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}



/* STYLE FOR THE IFRAM */

/* Container for the dashboard widget */
.custom-dashboard-widget {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 0;
    max-width: 900px;
    margin: 30px auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Arial', sans-serif;
}

/* Dashboard title */
/* Wrapper reset (optional but recommended) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Title */
.custom-dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;        /* keeps it readable */
    color: #1f2937;
}

/* Iframe – NO SPACE ABOVE OR BELOW */
.custom-dashboard-frame {
    width: 100%;
    height: 500px;
    border: none;
    display: block;         /* removes inline whitespace */
    margin: 0;
    padding: 0;
    line-height: 0;         /* kills tiny rendering gaps */
}

/* Button */
.custom-btn-primary {
    display: inline-block;
    background-color: #2563eb;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin: 10px auto 0 auto;     /* only tiny space from iframe */
    text-align: center;
}

.custom-btn-primary:hover {
    background-color: #1e40af;
}


/* FOR THE COMMING SOON PAGE */

.coming-soon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem;
    text-align: center;
    background-color: #f9fafb; 
}

.coming-soon-message {
    max-width: 600px;
    width: 100%;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.coming-soon-message h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #cb070c;
    border-bottom: 4px solid #000;
}

.coming-soon-message p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #4b5563;
    line-height: 1.6;
}

.coming-soon-message .contact-email a {
    color: #2563eb;
    text-decoration: underline;
    margin: 0 0.25rem;
}

.btn-go-back {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #1e1f4f;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-go-back:hover {
    background-color: #cb070c;
}



/* Mobile responsiveness */
@media (max-width: 640px) {
    .coming-soon-message h1 {
        font-size: 1.5rem;
    }

    .coming-soon-message p {
        font-size: 0.95rem;
    }

    .coming-soon-hr {
        width: 95%;
    }

    .coming-soon-message {
        padding: 1.5rem;
    }
}



/* MEDIA QUERIES (Simple Responsiveness) */

@media (min-width: 768px) {

    /* Medium screens and up (md) */
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    /* Large screens and up (lg) */
    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }
}