/* Add the Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.navbar-brand .fw-bold {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Bold weight */
    color: #a1ebc0;
}

.navbar-brand small {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 400; /* Normal weight */
    color: #6c757d;
}


body {
    font-family: Arial, sans-serif;
}

.card {
    border: none;
    box-shadow: 0 4px 8px rgba(135, 199, 105, 0.784);
}

:root {
    --primary-color: #0056b3;
    --accent-color: #ffc107;
}

/* Hero section background image */

.hero-section {
    position: relative;
    background: url('images/china-chad.png') no-repeat center center/cover;
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff; /* fallback text color */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(224, 223, 223, 0.5); /* dark overlay so text is visible */
}

.hero-content {
    position: relative;
    z-index: 2; /* above overlay */
}

.hero-content h1,
.hero-content p,
.hero-content a {
    color: #ffffff; /* white text */
}


.card img {
    height: 100px;
    object-fit: cover;
}

.btn-warning {
    background-color: var(--accent-color);
    border: none;
}

footer {
    background-color: var(--primary-color);
    color: #433c6b;
}

/* Vertical language switcher - optional if you keep it */
.lang-switcher-vertical {
  position: fixed;
  top: 20px;       /* fixed near top */
  right: 0;        /* fixed right side */
  background: hwb(141 62% 16%);
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 8px rgba(44, 59, 136, 0.2);
  overflow: hidden;
  transition: width 0.3s ease;
  width: 40px;     /* collapsed width */
  z-index: 9999;
}

.lang-switcher-vertical:hover {
  width: 120px;    /* expand on hover */
}

.lang-switcher-vertical ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-switcher-vertical li {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.lang-switcher-vertical li:last-child {
  border-bottom: none;
}

.lang-switcher-vertical button.lang-option {
  background: none;
  border: none;
  width: 100%;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  transition: background 0.2s ease;
  white-space: nowrap;
  padding-left: 10px;
  text-align: left;
}

.lang-switcher-vertical button.lang-option:hover {
  background: #f0f0f0;
}

/* NEW: Navbar language dropdown adjustments */
#lang-menu .dropdown-toggle {
    cursor: pointer;
    font-weight: 600;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

#lang-menu .dropdown-menu {
    min-width: 130px;
}

#lang-menu .dropdown-item.lang-option {
    cursor: pointer;
    font-weight: 500;
}

#lang-menu .dropdown-item.lang-option:hover,
#lang-menu .dropdown-item.lang-option:focus {
    background-color: var(--accent-color);
    color: #000000 !important;
}

.logo {
         background: none;
         width: 300px;
         text-decoration-color: #bfc1c4 ;
}

