/* ═══════════════════════════════════════════════════════════
   Main site page polish — About · Contact · Employer ·
   Job Seeker · Blogs
   Brand: navy #03284a / #0a3a5c · teal #0099ac
   ═══════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --mp-navy: #03284a;
  --mp-navy-mid: #0a3a5c;
  --mp-teal: #0099ac;
  --mp-teal-deep: #065a66;
  --mp-ink: #0b2340;
  --mp-muted: #5d6673;
  --mp-surface: #f5f9fb;
  --mp-line: rgba(3, 40, 74, 0.1);
  --mp-radius: 16px;
  --mp-font: "Poppins", "Open Sans", sans-serif;
}

/* ── Shared contact / page heroes ── */
.contact-hero-section,
.page-hero-section {
  background:
    radial-gradient(ellipse 70% 80% at 15% 0%, rgba(0, 153, 172, 0.35), transparent 55%),
    linear-gradient(145deg, #021e36 0%, #03284a 48%, #065a66 100%) !important;
  padding: clamp(5.5rem, 12vh, 7.5rem) 1.25rem !important;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.contact-hero-section::before,
.page-hero-section::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: 0.45 !important;
}

.contact-hero-content,
.page-hero-content {
  max-width: 42rem;
}

.contact-hero-section .hero-title,
.page-hero-section .hero-title {
  font-family: var(--mp-font) !important;
  font-size: clamp(2.1rem, 5vw, 3.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1rem !important;
  text-shadow: none !important;
  color: #fff !important;
}

.contact-hero-section .hero-quote,
.page-hero-section .hero-quote {
  font-family: var(--mp-font) !important;
  font-style: normal !important;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem) !important;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1;
  margin-bottom: 1rem !important;
}

.contact-hero-section .hero-subtitle,
.page-hero-section .hero-subtitle {
  font-family: var(--mp-font) !important;
  font-size: 1rem !important;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1;
  max-width: 34rem;
}

.contact-section {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 !important;
  background:
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(0, 153, 172, 0.08), transparent 55%),
    var(--mp-surface) !important;
}

.contact-form-area {
  background: #fff !important;
  padding: clamp(1.75rem, 4vw, 2.75rem) !important;
  border-radius: var(--mp-radius) !important;
  border: 1px solid var(--mp-line);
  box-shadow: 0 18px 40px rgba(3, 40, 74, 0.08) !important;
}

.form-title {
  color: var(--mp-navy) !important;
  font-family: var(--mp-font) !important;
  font-size: clamp(1.45rem, 3vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem !important;
}

.form-field label {
  color: var(--mp-navy-mid) !important;
  font-family: var(--mp-font) !important;
  font-size: 0.88rem;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.form-input,
.form-textarea {
  border: 1.5px solid rgba(3, 40, 74, 0.14) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--mp-font) !important;
  background: #fbfdfe;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--mp-teal) !important;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 153, 172, 0.12) !important;
}

.submit-button {
  background: linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-navy-mid) 55%, var(--mp-teal-deep) 100%) !important;
  border-radius: 999px !important;
  padding: 0.95rem 1.5rem !important;
  font-family: var(--mp-font) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(3, 40, 74, 0.22);
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 153, 172, 0.28);
}

/* Contact info cards if present */
.contact-info-card {
  border-radius: var(--mp-radius) !important;
  border: 1px solid var(--mp-line);
  box-shadow: 0 12px 28px rgba(3, 40, 74, 0.06) !important;
  background: #fff !important;
}

/* ═══════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════ */
.about-page-wrapper {
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(0, 153, 172, 0.07), transparent 50%),
    #fff;
  padding-top: clamp(1.5rem, 4vw, 2.5rem) !important;
  padding-bottom: clamp(2rem, 5vw, 3rem) !important;
}

.about-page-wrap,
.about-page {
  position: relative;
}

/* Kill leftover Webflow empty chrome that creates tall blank bands */
.about-page .about-vertical-line,
.about-page .about-right-block,
.about-page .about-text-image-wrap {
  display: none !important;
}

.about-page {
  min-height: 0 !important;
  padding-top: 0 !important;
}

.about-content-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.about-page-header {
  margin: 0 !important;
  padding: 0 !important;
}

.about-page-header .top-margin {
  margin-top: 0.85rem !important;
}

.about-title-one {
  font-family: var(--mp-font) !important;
  color: var(--mp-teal) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1.6vw, 1rem) !important;
}

.about-title-two {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  line-height: 1.15 !important;
  font-size: clamp(1.85rem, 4.2vw, 3rem) !important;
}

.about-arrow-text {
  color: var(--mp-teal) !important;
  font-family: var(--mp-font) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem !important;
}

.about-header-details .details-text,
.about-header-details p.details-text {
  color: var(--mp-muted) !important;
  font-family: var(--mp-font) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  max-width: 42rem;
}

.about-page-image {
  border-radius: 18px !important;
  box-shadow: 0 22px 48px rgba(3, 40, 74, 0.14);
  object-fit: cover;
}

.about-image-wrap {
  overflow: hidden;
  border-radius: 18px;
}

.ceo-quote-wrap {
  background: linear-gradient(180deg, #f7fbfc 0%, #fff 100%) !important;
  border-top: 1px solid var(--mp-line);
  border-bottom: 1px solid var(--mp-line);
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.ceo-image {
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgba(3, 40, 74, 0.12);
}

.name-and-id,
.ceo-name,
.ceo-id {
  font-family: var(--mp-font) !important;
}

.ceo-quote-text {
  font-family: var(--mp-font) !important;
  color: var(--mp-muted) !important;
  line-height: 1.7 !important;
  font-size: 1rem !important;
}

.about-service-title,
.about-content-title,
.section-header-title-2 {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
}

.about-service-details,
.about-content {
  font-family: var(--mp-font) !important;
  color: var(--mp-muted) !important;
  line-height: 1.65 !important;
}

.about-service-card,
.about-services-item {
  border-radius: 14px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.about-service-card:hover,
.about-services-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(3, 40, 74, 0.08);
}

/* Soften leftover Webflow chrome on about */
.about-vertical-line,
.about-text-line,
.about-right-block {
  opacity: 0.35;
}

/* ═══════════════════════════════════════════
   EMPLOYER
   ═══════════════════════════════════════════ */
.hero-area-two {
  position: relative;
  background:
    radial-gradient(ellipse 55% 50% at 85% 15%, rgba(0, 153, 172, 0.18), transparent 50%),
    linear-gradient(160deg, #f4f9fb 0%, #ffffff 45%, #eef6f8 100%) !important;
  overflow: hidden;
}

.hero-title-three {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  line-height: 1.12 !important;
  font-size: clamp(1.85rem, 4.5vw, 3.1rem) !important;
}

.hero-title-three .text-span-2 {
  color: var(--mp-teal) !important;
}

.hero-discription {
  font-family: var(--mp-font) !important;
  color: var(--mp-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  max-width: 34rem;
}

.hero-button-wrapper a,
.hero-area-two .primary-button,
.hero-area-two .w-button,
.hero-area-two .button-text {
  font-family: var(--mp-font) !important;
}

.hero-area-two .approach-button,
.hero-area-two .hero-button-wrapper .w-inline-block {
  border-radius: 999px !important;
  overflow: hidden;
}

.hero-circle-shape,
.hero-union {
  opacity: 0.55;
  filter: saturate(0.85);
}

.hero-area-two .layer {
  background: linear-gradient(135deg, var(--mp-navy), var(--mp-teal)) !important;
}

.section-title-description,
.section-header-title-2,
.section-header-details {
  font-family: var(--mp-font) !important;
}

.section-header-title-2 {
  color: var(--mp-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.section-title-description {
  color: var(--mp-muted) !important;
  line-height: 1.6;
}

/* Employer / shared client logo bands */
.clients-section,
.logo-marquee-section,
.infra-clients-section {
  background: var(--mp-surface);
}

/* Employer contact form (inline styles on page — reinforce brand) */
.employer .contact-form-area,
body .contact-form-area {
  border: 1px solid var(--mp-line);
}

/* ═══════════════════════════════════════════
   JOB SEEKER
   ═══════════════════════════════════════════ */
.hero-section-2 .hero-title-3 {
  font-family: var(--mp-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.hero-section-2 .number-prefix {
  font-family: var(--mp-font) !important;
  color: #fff !important;
}

.hero-section-2 .counter-name-2 {
  font-family: var(--mp-font) !important;
  letter-spacing: 0.04em;
}

/* Job listing / content blocks below hero */
.job-section,
.jobs-section,
.job-list-section,
.featured-jobs,
.job-description-section {
  font-family: var(--mp-font);
}

.approach-button-2,
.ja-submit,
.job-apply-btn {
  border-radius: 999px !important;
  font-family: var(--mp-font) !important;
}

/* ═══════════════════════════════════════════
   BLOGS
   ═══════════════════════════════════════════ */
.blog-hero-section {
  background:
    linear-gradient(120deg, rgba(2, 30, 54, 0.88) 0%, rgba(3, 40, 74, 0.72) 45%, rgba(6, 90, 102, 0.7) 100%),
    url("../images/people-meeting-seminar-office-concept.jpg") center / cover no-repeat !important;
  padding: clamp(5.5rem, 14vh, 8rem) 1.25rem !important;
  text-align: center;
  color: #fff;
  position: relative;
}

.blog-hero-content {
  max-width: 40rem;
  margin: 0 auto;
}

.blog-hero-section h1 {
  font-family: var(--mp-font) !important;
  font-size: clamp(2.1rem, 5vw, 3.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  margin-bottom: 1rem !important;
  line-height: 1.1;
}

.blog-hero-section p {
  font-family: var(--mp-font) !important;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  opacity: 0.88;
  line-height: 1.6;
  margin-bottom: 0 !important;
}

.blog-categories {
  padding: clamp(3rem, 7vw, 4.5rem) 0 !important;
  background: var(--mp-surface) !important;
}

.categories-header h2,
.blog-header h2 {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem) !important;
}

.category-card {
  background: #fff !important;
  padding: 1.75rem 1.35rem !important;
  border-radius: 14px !important;
  border: 1px solid var(--mp-line);
  box-shadow: 0 8px 22px rgba(3, 40, 74, 0.05) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.category-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 153, 172, 0.35);
  box-shadow: 0 16px 32px rgba(3, 40, 74, 0.1) !important;
}

.category-icon {
  background: linear-gradient(145deg, var(--mp-navy-mid), var(--mp-teal)) !important;
  box-shadow: 0 8px 18px rgba(0, 153, 172, 0.25);
}

.category-card h3 {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
  font-weight: 600 !important;
}

.category-card p {
  font-family: var(--mp-font) !important;
  color: var(--mp-muted) !important;
}

.blog-section {
  padding: clamp(3.5rem, 8vw, 5rem) 0 !important;
  background: #fff;
}

.blog-header h2 {
  margin: 0;
}

.filter-btn {
  padding: 0.55rem 1.15rem !important;
  border: 1.5px solid rgba(0, 153, 172, 0.45) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mp-teal-deep) !important;
  font-family: var(--mp-font) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.filter-btn.active,
.filter-btn:hover {
  background: linear-gradient(135deg, var(--mp-navy), var(--mp-teal-deep)) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.blog-grid {
  gap: 1.75rem !important;
}

.blog-card {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid var(--mp-line);
  box-shadow: 0 10px 28px rgba(3, 40, 74, 0.06) !important;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.blog-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 36px rgba(3, 40, 74, 0.12) !important;
}

.blog-image {
  height: 180px !important;
}

.blog-title {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.blog-excerpt,
.blog-meta,
.author-info p {
  font-family: var(--mp-font) !important;
  color: var(--mp-muted) !important;
}

.blog-category {
  background: rgba(0, 153, 172, 0.1) !important;
  color: var(--mp-teal-deep) !important;
  border-radius: 999px !important;
  font-family: var(--mp-font) !important;
  font-weight: 600 !important;
}

.author-info h4 {
  font-family: var(--mp-font) !important;
  color: var(--mp-navy) !important;
}

.read-more-btn {
  background: linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-teal-deep) 100%) !important;
  border-radius: 999px !important;
  font-family: var(--mp-font) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.25rem !important;
}

.read-more-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(0, 153, 172, 0.28) !important;
}

.newsletter-section {
  background:
    radial-gradient(ellipse 50% 60% at 20% 0%, rgba(0, 153, 172, 0.28), transparent 55%),
    linear-gradient(145deg, #021e36, #03284a 50%, #065a66) !important;
  padding: clamp(3.5rem, 8vw, 5rem) 0 !important;
}

.newsletter-section h2 {
  font-family: var(--mp-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem) !important;
}

.newsletter-section p {
  font-family: var(--mp-font) !important;
}

.newsletter-form input {
  border-radius: 999px !important;
  padding: 0.9rem 1.35rem !important;
  font-family: var(--mp-font) !important;
}

.newsletter-form button {
  border-radius: 999px !important;
  font-family: var(--mp-font) !important;
  background: #fff !important;
  color: var(--mp-navy) !important;
  font-weight: 600 !important;
}

.newsletter-form button:hover {
  background: #e8f6f8 !important;
}

.pagination-btn {
  border-radius: 999px !important;
  border: 1.5px solid rgba(0, 153, 172, 0.4) !important;
  color: var(--mp-teal-deep) !important;
  font-family: var(--mp-font) !important;
  font-weight: 600 !important;
}

.pagination-btn.active,
.pagination-btn:hover {
  background: var(--mp-navy) !important;
  border-color: var(--mp-navy) !important;
  color: #fff !important;
}

/* ── Responsive tweaks ── */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .about-page-image {
    border-radius: 12px !important;
  }
}