/* style.css - modern/minimalist */
:root {
  --primary:#004080;
  --accent:#00bfa6;
  --muted:#6c757d;
  --card-bg:#ffffff;
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f8f9fa;
  color:#222;
  margin:0;
  padding:0;
}

header.bg-dark {
  background: var(--primary) !important;
  color: #fff;
}

.job-card {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
  height:100%;
}
.job-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-outline-secondary {
  color: var(--primary);
  border-color: rgba(0,0,0,0.08);
}

.form-control, .form-select {
  border-radius: 8px;
  padding: .6rem .8rem;
}

.my-textarea::placeholder {
  font-weight: bold;
}

.job-description img { max-width:100%; height:auto; }

/* responsive adjustments */
@media (max-width: 576px) {
  header .container { flex-direction: column; gap: .5rem; align-items: flex-start; }
}

.table-container {
    overflow-x: auto; /* Adds horizontal scrollbar when content overflows */
    white-space: nowrap;
    width: 100%; /* Or a fixed width, depending on your layout */
}

.no-wrap-cell {
  white-space: nowrap;
}











/* ---------------------- HEADER STYLING ---------------------- */

.main-header {
  position: relative;
  z-index: 1000;
}

.site-logo {
  height: 60px; /* Medium size (HS2) */
  width: auto;
  object-fit: contain;
}

.site-tagline {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.85); /* TC4 */
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.nav-link-custom {
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}

.nav-link-custom:hover {
  color: #0d6efd; /* Blue highlight */
}

/* ---------------------- MOBILE MENU ---------------------- */

.mobile-menu-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
}

.menu-icon {
  font-size: 28px;
  font-weight: bold;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -260px; /* Hidden initially */
  width: 260px;
  height: 100vh;
  background-color: #111; /* Dark theme sidebar (MM4) */
  color: white;
  padding: 20px;
  transition: right 0.35s ease-in-out;
  z-index: 9999;
  box-shadow: -4px 0 12px rgba(0,0,0,0.4);
}

.mobile-menu.open {
  right: 0;
}

.close-menu-btn {
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  font-weight: bold;
  float: right;
  cursor: pointer;
}

.mobile-nav-links a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: 0.3s ease;
}

.mobile-nav-links a:hover {
  color: #0d6efd;
  padding-left: 6px;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
  .site-logo {
    height: 52px;
  }

  .site-tagline {
    font-size: 0.66rem;
  }
}





/* =========================================================
   ABOUT PAGE — HERO SECTION (WM2 World Map Background)
   ========================================================= */
.about-hero {
  background: linear-gradient(rgba(0, 35, 102, 0.85), rgba(0, 35, 102, 0.85)),
              url('assets/images/world-map-bg.png') center/cover no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

/* Title styling consistency across sections */
.section-title {
  font-weight: 700;
  color: #002366; /* Corporate Blue */
}

/* Light grey background for alternating sections */
.about-light-section {
  background-color: #f7f9fc;
}


/* =========================================================
   MISSION & VISION / WHAT WE DO / WHY CHOOSE US BOXES
   ========================================================= */
.mission-box,
.service-box,
.why-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.mission-box:hover,
.service-box:hover,
.why-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 5px 14px rgba(0,0,0,0.13);
}


/* =========================================================
   MILESTONES / TIMELINE SECTION
   ========================================================= */
.timeline {
  position: relative;
  margin: 0 auto;
  padding: 10px 0;
  max-width: 800px;
  border-left: 3px solid #0d6efd;
}

.timeline-item {
  position: relative;
  padding: 0 0 25px 25px;
  margin-left: 10px;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  background: #0d6efd;
  border-radius: 50%;
  position: absolute;
  left: -8px;
  top: 3px;
}

.timeline-content h6 {
  color: #002366;
  font-weight: 700;
  margin-bottom: 4px;
}


/* =========================================================
   CTA SECTION
   ========================================================= */
.about-cta {
  background-color: #e8f0ff;
  border-top: 2px solid #0d6efd;
  border-bottom: 2px solid #0d6efd;
}

.about-cta h3 {
  color: #002366;
}


/* CONTACT PAGE */
.contact-card .card-body { padding-top: 1.1rem; padding-bottom: 1.1rem; }


/* ---------------------------------------------
   CONTACT PAGE UI ENHANCEMENTS
   Applies to layouts C1, C2, C3, C4
----------------------------------------------*/

/* Common Card Styling */
.contact-card,
.contact-block-c1 {
  transition: 0.25s ease-in-out;
  border-radius: 10px;
}
.contact-card:hover,
.contact-block-c1:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Icons */
.contact-card i,
.contact-block-c1 i {
  color: #0d6efd;
}

/* Tabbed Layout Enhancements (C3) */
#contactTab .nav-link {
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
}
#contactTab .nav-link.active {
  background: #0d6efd;
  color: #fff;
}

/* Tab Content Box */
#contactTabContent {
  background: #fff;
  border-radius: 0 6px 6px 6px;
  border: 1px solid #dee2e6;
}

/* Guided Selector (C4 Wizard) */
#wizardContent {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  margin-top: 5px;
  border-left: 3px solid #0d6efd;
}

/* US Dialer Alert Styling */
.alert-primary {
  background: #e7f1ff;
  border-left: 4px solid #0d6efd;
}

/* Address Card Styling */
.virtual-office-card {
  border-left: 4px solid #0d6efd !important;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .contact-block-c1 ul {
    font-size: 12px;
  }
}


/* 🔹 Radio Pill Styling */
.quick-country-radio + label {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #999;
  cursor: pointer;
  transition: 0.2s;
  background: #f8f9fa;
  margin-right: 6px;
}

.quick-country-radio:checked + label {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  font-weight: 600;
}

/* Hide original radio visually */
.quick-country-radio {
  opacity: 0;
  position: absolute;
}

/* 🔹 Refer Only Checkbox Pill */
.refer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid #999;
  background: #f8f9fa;
  transition: 0.2s;
  font-size: 0.9rem;
}

#refer_only:checked + .refer-pill {
  background: #198754;
  color: #fff;
  border-color: #198754;
  font-weight: 600;
}

/* Hide original checkbox */
#refer_only {
  display: none;
}