/* ============================================================
   M/S Farrukh International Promoters — Design Tokens
   Palette: Deep Teal-Navy (trust) + Antique Gold (achievement)
   Type: Poppins (display) / Inter (body)
   ============================================================ */
 :root {
   --navy: #330D70;
   --navy-dark: #200A4A;
   --navy-light: #4A1C96;
   --gold: #C7451F;
   --gold-light: #E0713F;
   --blue-accent: #0089E1;
   --cream: #F7F4EC;
   --sage: #EAEBF5;
   --charcoal: #202826;
   --grey: #6B7876;
   --white: #FFFFFF;

   --font-display: 'Poppins', sans-serif;
   --font-body: 'Inter', sans-serif;
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: var(--font-body);
   color: var(--charcoal);
   background: var(--white);
   overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 .font-display {
   font-family: var(--font-display);
   color: var(--navy);
   font-weight: 600;
 }

 a {
   text-decoration: none;
 }

 .text-gold {
   color: var(--gold) !important;
 }

 .bg-navy {
   background: var(--navy) !important;
 }

 .bg-cream {
   background: var(--cream) !important;
 }

 .bg-sage {
   background: var(--sage) !important;
 }

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

 .brand-logo {
   height: 50px;
   width: 70px;
   border-radius: 50%;
   object-fit: cover;
   background: var(--white);
   padding: 2px;
 }

 .brand-logo-footer {
   height: 100px;
   width: 100px;
   border-radius: 50%;
   object-fit: cover;
 }

 /* ---------- Buttons ---------- */
.btn-gold {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: white;
  font-weight: 600;
  padding: .7rem 1.6rem;
  border-radius: 4px;
  transition: all .25s ease;
}

/* WhatsApp button (green) */
.btn-whatsapp {
  background: #25D366;
  border: 1px solid #25D366;
  color: #0b3d1f;
  font-weight: 700;
  padding: .7rem 1.6rem;
  border-radius: 4px;
  transition: all .25s ease;
}

.btn-whatsapp:hover {
  background: #20c056;
  border-color: #20c056;
  transform: translateY(-2px);
}

 .btn-gold:hover {
   background: var(--gold-light);
   border-color: var(--gold-light);
   color: var(--navy-dark);
   transform: translateY(-2px);
 }

 .btn-outline-cream {
   border: 1.5px solid rgba(255, 255, 255, .5);
   color: var(--white);
   padding: .68rem 1.6rem;
   border-radius: 4px;
   font-weight: 600;
   transition: all .25s ease;
 }

 .btn-outline-cream:hover {
   background: rgba(255, 255, 255, .12);
   border-color: var(--white);
   color: var(--white);
   transform: translateY(-2px);
 }

 .btn-navy-outline {
   border: 1.5px solid var(--navy);
   color: var(--navy);
   padding: .65rem 1.5rem;
   border-radius: 4px;
   font-weight: 600;
   transition: all .25s ease;
 }

 .btn-navy-outline:hover {
   background: var(--navy);
   color: var(--white);
 }

 /* ---------- Header ---------- */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, .98);
   backdrop-filter: blur(6px);
   transition: padding .3s ease, box-shadow .3s ease;
   box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
 }

 .site-header .navbar-brand {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.35rem;
   color: var(--navy) !important;
   letter-spacing: .3px;
 }

 .site-header .navbar-brand span {
   color: var(--gold);
 }

 .site-header .nav-link {
   color: var(--navy) !important;
   opacity: .8;
   font-weight: 500;
   margin: 0 .5rem;
   position: relative;
   padding-bottom: 4px !important;
 }

 .site-header .nav-link::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 2px;
   background: var(--gold);
   transition: width .25s ease;
 }

 .site-header .nav-link:hover::after,
 .site-header .nav-link.active::after {
   width: 100%;
 }

 .site-header .nav-link:hover {
   opacity: 1;
 }

 .site-header .nav-link.active {
   color: var(--navy) !important;
   opacity: 1;
 }

 .site-header .navbar-toggler {
   border-color: rgba(51, 13, 112, .3) !important;
 }

 .site-header .navbar-toggler-icon {
   filter: invert(15%) sepia(40%) saturate(2000%) hue-rotate(240deg);
 }

 /* ---------- Hero ---------- */
 .hero {
   background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
   position: relative;
   overflow: hidden;
   padding: 5.5rem 0 6rem;
 }

 .hero::before {
   content: '';
   position: absolute;
   width: 620px;
   height: 620px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(199, 150, 59, .15) 0%, rgba(199, 150, 59, 0) 70%);
   top: -180px;
   right: -160px;
 }

 .hero h1 {
   color: var(--white);
 }

 .hero p.lead {
   color: rgba(255, 255, 255, .78);
 }

 .hero-badge {
   display: inline-block;
   background: rgba(199, 150, 59, .15);
   border: 1px solid rgba(199, 150, 59, .4);
   color: var(--gold-light);
   font-size: .8rem;
   font-weight: 600;
   padding: .35rem 1rem;
   border-radius: 30px;
   letter-spacing: .5px;
   margin-bottom: 1.2rem;
 }

 /* Search bar on hero */
 .job-search-bar {
   background: var(--white);
   border-radius: 10px;
   padding: .6rem;
   box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
 }

 .job-search-bar .form-control {
   border: none;
   padding: .7rem 1rem;
 }

 .job-search-bar .form-control:focus {
   box-shadow: none;
 }

 /* Floating job chips (signature element) */
 .hero-graphic {
   position: relative;
   height: 420px;
 }

 .floating-blob {
   position: absolute;
   width: 340px;
   height: 340px;
   border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
   background: rgba(199, 150, 59, .14);
   top: 30px;
   left: 50%;
   transform: translateX(-50%);
   animation: blobmove 9s ease-in-out infinite;
 }

 @keyframes blobmove {

   0%,
   100% {
     border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
   }

   50% {
     border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%;
   }
 }

 .hero-photo-frame {
   position: relative;
   width: 100%;
   height: 460px;
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .12);
   box-shadow: 0 25px 50px rgba(0, 0, 0, .3);
 }

 .hero-photo-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .job-chip {
   position: absolute;
   background: var(--white);
   border-radius: 10px;
   padding: .7rem 1.1rem;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
   font-size: .85rem;
   font-weight: 600;
   color: var(--navy);
   display: flex;
   align-items: center;
   gap: .5rem;
   animation: bob 5s ease-in-out infinite;
   white-space: nowrap;
 }

 .job-chip i {
   color: var(--gold);
 }

 .job-chip.c1 {
   top: 10%;
   left: 4%;
   animation-delay: 0s;
 }

 .job-chip.c2 {
   top: 62%;
   left: 0%;
   animation-delay: 1.2s;
 }

 .job-chip.c3 {
   top: 4%;
   right: 2%;
   animation-delay: .6s;
 }

 .job-chip.c4 {
   top: 68%;
   right: 4%;
   animation-delay: 1.8s;
 }

 .job-chip.c5 {
   top: 38%;
   left: 30%;
   animation-delay: 2.4s;
 }

 @keyframes bob {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-14px);
   }
 }

 /* ---------- Sections ---------- */
 .section {
   padding: 5rem 0;
 }

 .section-tight {
   padding: 3.5rem 0;
 }

 .eyebrow {
   color: var(--gold);
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   font-size: .8rem;
 }

 /* Reveal on scroll */
 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .7s ease, transform .7s ease;
 }

 .reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* ---------- Cards ---------- */
 .category-card {
   background: var(--white);
   border: 1px solid #EAE6DA;
   border-radius: 12px;
   padding: 2rem 1.6rem;
   height: 100%;
   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
 }

 .category-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 18px 34px rgba(11, 61, 60, .12);
   border-color: var(--gold);
 }

 .category-card .icon-wrap {
   width: 58px;
   height: 58px;
   border-radius: 10px;
   background: var(--sage);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: var(--navy);
   margin-bottom: 1.1rem;
   transition: background .3s ease, color .3s ease;
 }

 .category-card:hover .icon-wrap {
   background: var(--navy);
   color: var(--gold-light);
 }

 .category-card .count {
   font-size: .8rem;
   color: var(--grey);
 }

 .feature-item {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
 }

 .feature-item .num {
   font-family: var(--font-display);
   font-weight: 700;
   color: var(--gold);
   font-size: 1.6rem;
   min-width: 46px;
 }

 /* Stats */
 .stat-block {
   text-align: center;
 }

 .stat-block .stat-num {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 2.6rem;
   color: #9c89ba;
 }

 .stat-block .stat-num span {
   color: var(--gold);
 }

 .stat-block .stat-label {
   color: var(--grey);
   font-size: .92rem;
 }

 /* Steps (process) */
 .step-card {
   position: relative;
   padding-top: 1rem;
 }

 .step-circle {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--navy);
   color: var(--gold-light);
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
 }

 /* Testimonials */
 .testimonial-card {
   background: var(--sage);
   border-radius: 12px;
   padding: 2rem;
   height: 100%;
 }

 .testimonial-card i.bi-quote {
   color: var(--gold);
   font-size: 1.8rem;
 }

 .avatar-circle {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--navy);
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
 }

 /* CTA band */
 .cta-band {
   background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
   border-radius: 16px;
   padding: 3rem;
   color: var(--white);
   position: relative;
   overflow: hidden;
 }

 .cta-band::after {
   content: '';
   position: absolute;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: rgba(199, 150, 59, .15);
   bottom: -120px;
   right: -60px;
 }

 /* Page hero (inner pages) */
 .page-hero {
   background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
   padding: 3.2rem 0;
   position: relative;
   overflow: hidden;
 }

 .page-hero::before {
   content: '';
   position: absolute;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(199, 150, 59, .13) 0%, rgba(199, 150, 59, 0) 70%);
   top: -150px;
   left: -100px;
 }

 .page-hero h1 {
   color: var(--white);
 }

 .breadcrumb-custom a {
   color: rgba(255, 255, 255, .65);
 }

 .breadcrumb-custom span {
   color: var(--gold-light);
 }

 /* Timeline (About) */
 .timeline {
   border-left: 2px solid var(--sage);
   margin-left: 10px;
 }

 .timeline-item {
   position: relative;
   padding: 0 0 2.2rem 2rem;
 }

 .timeline-item::before {
   content: '';
   position: absolute;
   left: -8px;
   top: 2px;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--gold);
   border: 3px solid var(--white);
   box-shadow: 0 0 0 2px var(--sage);
 }

 /* Value cards (About) */
 .value-card {
   border-left: 3px solid var(--gold);
   background: var(--cream);
   padding: 1.6rem;
   border-radius: 6px;
   height: 100%;
 }

 /* Services page */
 .service-row {
   border: 1px solid #EAE6DA;
   border-radius: 12px;
   padding: 2rem;
   transition: box-shadow .3s ease, transform .3s ease;
 }

 .service-row:hover {
   box-shadow: 0 16px 32px rgba(11, 61, 60, .1);
   transform: translateY(-4px);
 }

 .service-icon {
   width: 64px;
   height: 64px;
   border-radius: 12px;
   background: var(--navy);
   color: var(--gold-light);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
 }

 /* Contact page */
 .contact-info-card {
   background: var(--white);
   border: 1px solid #EAE6DA;
   border-radius: 12px;
   padding: 1.7rem;
   height: 100%;
   transition: transform .3s ease, box-shadow .3s ease;
 }

 .contact-info-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 32px rgba(11, 61, 60, .1);
 }

 .contact-info-card .icon-wrap {
   width: 50px;
   height: 50px;
   border-radius: 10px;
   background: var(--sage);
   color: var(--navy);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: .9rem;
 }

 .form-control:focus,
 .form-select:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 .2rem rgba(199, 150, 59, .18);
 }

 .map-frame {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #EAE6DA;
 }

 /* ---------- Footer ---------- */
 .site-footer {
   background: var(--navy-dark);
   color: rgba(255, 255, 255, .75);
 }

 .site-footer h6 {
   color: var(--white);
   font-family: var(--font-display);
   font-weight: 600;
   letter-spacing: .4px;
 }

 .site-footer a {
   color: rgba(255, 255, 255, .68);
   transition: color .2s ease;
 }

 .site-footer a:hover {
   color: var(--gold-light);
 }

 .footer-brand {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.3rem;
   color: var(--white);
 }

 .footer-brand span {
   color: var(--gold);
 }

 .footer-location {
   display: flex;
   gap: .7rem;
   align-items: flex-start;
   font-size: .92rem;
 }

 .footer-location i {
   color: var(--gold);
   margin-top: 3px;
 }

 .social-icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .8);
   transition: all .25s ease;
 }

 .social-icon:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--navy-dark);
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   font-size: .85rem;
 }

 /* Back to top */
 .back-to-top {
   position: fixed;
   right: 22px;
   bottom: 22px;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--gold);
   color: var(--navy-dark);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all .3s ease;
   z-index: 999;
 }

 .back-to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 /* ---------- Image Gallery / Team Cards (animated) ---------- */
 .media-card {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   height: 300px;
   box-shadow: 0 10px 26px rgba(11, 61, 60, .1);
 }

 .media-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s ease;
 }

 .media-card:hover img {
   transform: scale(1.1);
 }

 .media-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(7, 40, 38, 0) 40%, rgba(7, 40, 38, .88) 100%);
   z-index: 1;
 }

 .media-card .media-caption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 6.1rem 1.2rem;
   z-index: 2;
   color: var(--white);
   transform: translateY(46%);
   transition: transform .35s ease;
 }

 .media-card:hover .media-caption {
   transform: translateY(0);
 }

 .media-card .media-caption h6 {
   color: var(--white);
   margin-bottom: 2px;
 }

 .media-card .media-caption p {
   font-size: .8rem;
   color: rgba(255, 255, 255, .75);
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: all .35s ease;
   margin: 0;
 }

 .media-card:hover .media-caption p {
   max-height: 60px;
   opacity: 1;
   margin-top: 4px;
 }

 .media-card .media-tag {
   position: absolute;
   top: 14px;
   left: 14px;
   z-index: 2;
   background: rgba(199, 150, 59, .92);
   color: var(--navy-dark);
   font-size: .72rem;
   font-weight: 700;
   padding: .3rem .7rem;
   border-radius: 20px;
   letter-spacing: .3px;
 }

 /* Team member cards (About) */
 .team-card {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   box-shadow: 0 10px 26px rgba(11, 61, 60, .1);
 }

 .team-card .team-img {
   height: 300px;
   overflow: hidden;
   position: relative;
 }

 .team-card .team-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
 }

 .team-card:hover .team-img img {
   transform: scale(1.08);
 }

 .team-card .team-body {
   background: var(--white);
   padding: 1.1rem 1.2rem;
   text-align: center;
 }

 .team-card .team-body h6 {
   margin-bottom: 2px;
 }

 .team-card .team-body span {
   color: var(--gold);
   font-size: .82rem;
   font-weight: 600;
 }

 .team-card .team-overlay {
   position: absolute;
   inset: 0;
   background: rgba(7, 40, 38, .55);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .6rem;
   opacity: 0;
   transition: opacity .3s ease;
 }

 .team-card:hover .team-overlay {
   opacity: 1;
 }

 .team-overlay .social-icon {
   background: rgba(255, 255, 255, .15);
 }

 /* Office banner (About) */
 .office-banner {
   position: relative;
   border-radius: 16px;
   overflow: hidden;
   height: 340px;
 }

 .office-banner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .office-banner .banner-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(7, 40, 38, .85) 0%, rgba(7, 40, 38, .25) 70%);
   display: flex;
   align-items: center;
   padding: 0 2.5rem;
 }

 .office-banner .banner-overlay .stat-num {
   color: var(--white);
 }

 .office-banner .banner-overlay .stat-num span {
   color: var(--gold-light);
 }

 /* ---------- Jobs page ---------- */
 .filter-btn {
   border: 1.5px solid #DDD6C4;
   background: var(--white);
   color: var(--navy);
   padding: .5rem 1.2rem;
   border-radius: 30px;
   font-size: .85rem;
   font-weight: 600;
   transition: all .25s ease;
 }

 .filter-btn:hover {
   border-color: var(--gold);
   color: var(--navy);
 }

 .filter-btn.active {
   background: var(--navy);
   border-color: var(--navy);
   color: var(--white);
 }

 .job-card {
   background: var(--white);
   border: 1px solid #EAE6DA;
   border-radius: 14px;
   overflow: hidden;
   height: 100%;
   transition: transform .3s ease, box-shadow .3s ease;
 }

 .job-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 18px 34px rgba(11, 61, 60, .14);
 }

 .job-card .job-img {
   height: 170px;
   overflow: hidden;
   position: relative;
 }

 .job-card .job-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
 }

 .job-card:hover .job-img img {
   transform: scale(1.08);
 }

 .job-card .job-type-badge {
   position: absolute;
   top: 12px;
   right: 12px;
   background: var(--gold);
   color: var(--navy-dark);
   font-size: .7rem;
   font-weight: 700;
   padding: .25rem .65rem;
   border-radius: 20px;
 }

 .job-card .job-body {
   padding: 1.3rem;
 }

 .job-card .job-meta {
   font-size: .82rem;
   color: var(--grey);
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
 }

 .job-card .job-meta i {
   color: var(--gold);
   margin-right: 3px;
 }

 .job-card .job-salary {
   font-weight: 700;
   color: var(--navy);
 }

 .hidden-job {
   display: none !important;
 }

 /* ---------- FAQ Accordion ---------- */
 .faq-accordion .accordion-item {
   border: 1px solid #EAE6DA;
   border-radius: 10px !important;
   margin-bottom: 1rem;
   overflow: hidden;
 }

 .faq-accordion .accordion-button {
   font-family: var(--font-display);
   font-weight: 600;
   color: var(--navy);
   background: var(--white);
   padding: 1.1rem 1.3rem;
 }

 .faq-accordion .accordion-button:not(.collapsed) {
   background: var(--sage);
   color: var(--navy);
   box-shadow: none;
 }

 .faq-accordion .accordion-button:focus {
   box-shadow: none;
   border-color: #EAE6DA;
 }

 .faq-accordion .accordion-body {
   color: var(--grey);
   font-size: .92rem;
   padding: 0 1.3rem 1.2rem;
 }

 /* ---------- Responsive ---------- */
 @media (max-width: 991.98px) {
   .hero-graphic {
     height: 280px;
     margin-top: 2rem;
   }

   .job-chip {
     font-size: .75rem;
     padding: .5rem .8rem;
   }

   .office-banner {
     height: auto;
     padding: 1rem 0;
   }

   .office-banner .banner-overlay {
     position: static;
     background: none;
     padding: 1rem;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .reveal {
     transition: none;
     opacity: 1;
     transform: none;
   }

   .job-chip,
   .floating-blob {
     animation: none;
   }
 }



 /* ===== Reset & Base ===== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background-color: #ffffff;
     color: #333;
 }

 /* ===== Section ===== */
 .regions-section {
     background-color: #eef1f6;
     padding: 70px 20px 80px;
 }

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

 /* ===== Heading ===== */
 .section-title {
     text-align: center;
     font-size: 36px;
     font-weight: 700;
     color: #2d3748;
     margin-bottom: 16px;
     letter-spacing: -0.3px;
 }

 .section-subtitle {
     text-align: center;
     font-size: 17px;
     color: #4a5568;
     max-width: 700px;
     margin: 0 auto 50px;
     line-height: 1.7;
     font-weight: 400;
 }

 /* ===== Regions Grid ===== */
 .regions-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
 }

 /* ===== Region Card ===== */
 .region-card {
     background-color: #ffffff;
     border-radius: 14px;
     padding: 32px 24px 28px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
 }

 .region-title {
     text-align: center;
     font-size: 20px;
     font-weight: 700;
     color: #2d3748;
     margin-bottom: 22px;
 }

 /* ===== Country Grid ===== */
 .country-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
 }

 /* ===== Country Item ===== */
 .country-item {
     display: flex;
     align-items: center;
     gap: 10px;
     background-color: #e8f0fe;
     border-radius: 10px;
     padding: 12px 14px;
     text-decoration: none;
     transition: background-color 0.2s ease, transform 0.15s ease;
     cursor: pointer;
 }

 .country-item:hover {
     background-color: #d6e4fb;
     transform: translateY(-1px);
 }

 .country-flag {
     width: 36px;
     height: 26px;
     border-radius: 4px;
     object-fit: cover;
     flex-shrink: 0;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .country-name {
     font-size: 14.5px;
     font-weight: 500;
     color: #2d3748;
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .arrow-icon {
     flex-shrink: 0;
     opacity: 0.6;
     transition: opacity 0.2s ease;
 }

 .country-item:hover .arrow-icon {
     opacity: 1;
 }

 /* ===== Responsive ===== */
 @media (max-width: 992px) {
     .regions-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 640px) {
     .regions-grid {
         grid-template-columns: 1fr;
     }

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

     .section-subtitle {
         font-size: 15px;
     }

     .regions-section {
         padding: 50px 16px 60px;
     }
 }




 /* ===== Reset & Base ===== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: #ffffff;
 }

 /* ===== Section ===== */
 .jobs-section {
     padding: 60px 20px 80px;
     background-color: #ffffff;
 }

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

 /* ===== Section Title ===== */
 .section-title {
     text-align: center;
     font-size: 32px;
     font-weight: 700;
     color: #2d3748;
     margin-bottom: 50px;
     text-transform: uppercase;
     letter-spacing: 1px;
     position: relative;
 }

 .section-title::before,
 .section-title::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 30%;
     height: 1px;
     background-color: #e2e8f0;
 }

 .section-title::before {
     left: 0;
 }

 .section-title::after {
     right: 0;
 }

 /* ===== Jobs Grid - 3x3 ===== */
 .jobs-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
 }

 /* ===== Job Card ===== */
 .job-card {
     background-color: #ffffff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
 }

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

 /* ===== Job Image ===== */
 .job-image {
     width: 100%;
     height: 220px;
     overflow: hidden;
 }

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

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

 /* ===== Job Content ===== */
 .job-title {
     font-size: 20px;
     font-weight: 700;
     color: #2d3748;
     padding: 20px 20px 12px;
 }

 .job-description {
     font-size: 14px;
     color: #4a5568;
     line-height: 1.6;
     padding: 0 20px 20px;
     flex-grow: 1;
 }

 /* ===== Learn More Button ===== */
 .learn-more-btn {
     display: inline-block;
     margin: 0 20px 20px;
     padding: 10px 24px;
     border: 2px solid #3b82f6;
     color: #3b82f6;
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
     text-transform: uppercase;
     border-radius: 4px;
     transition: all 0.3s ease;
     text-align: center;
 }

 .learn-more-btn:hover {
     background-color: #3b82f6;
     color: #ffffff;
 }

 /* ===== Responsive Design ===== */
 @media (max-width: 992px) {
     .jobs-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 640px) {
     .jobs-grid {
         grid-template-columns: 1fr;
     }

     .section-title {
         font-size: 26px;
     }

     .jobs-section {
         padding: 40px 15px 60px;
     }
 }


 /* ===== FAQ Section - Unique Classes ===== */
 .recruitment-faq-wrapper {
     background-color: #f5f7fa;
     padding: 80px 20px 100px;
     width: 100%;
 }

 .recruitment-faq-inner {
     max-width: 900px;
     margin: 0 auto;
 }

 .recruitment-faq-heading {
     text-align: center;
     font-size: 32px;
     font-weight: 700;
     color: #5a6474;
     margin-bottom: 50px;
     line-height: 1.4;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 }

 .recruitment-faq-list {
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .recruitment-faq-single {
     background-color: transparent;
     border-bottom: 1px solid #e5e9ef;
     transition: background-color 0.2s ease;
 }

 .recruitment-faq-single:last-child {
     border-bottom: none;
 }

 .recruitment-faq-single:hover {
     background-color: rgba(255, 255, 255, 0.5);
 }

 .recruitment-faq-trigger {
     width: 100%;
     padding: 22px 0;
     background: transparent;
     border: none;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-align: left;
     font-family: inherit;
     transition: all 0.2s ease;
 }

 .recruitment-faq-text {
     font-size: 16px;
     font-weight: 500;
     color: #2d3748;
     line-height: 1.5;
     padding-right: 30px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

 .recruitment-faq-symbol {
     font-size: 28px;
     font-weight: 300;
     color: #5a6474;
     line-height: 1;
     flex-shrink: 0;
     transition: transform 0.3s ease;
     font-family: Georgia, serif;
 }

 .recruitment-faq-single.is-active .recruitment-faq-symbol {
     transform: rotate(45deg);
     color: #2563eb;
 }

 .recruitment-faq-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-out;
 }

 .recruitment-faq-single.is-active .recruitment-faq-content {
     max-height: 400px;
     transition: max-height 0.4s ease-in;
 }

 .recruitment-faq-body {
     padding: 0 0 22px 0;
 }

 .recruitment-faq-body p {
     font-size: 15px;
     color: #64748b;
     line-height: 1.7;
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

 /* ===== Active State ===== */
 .recruitment-faq-single.is-active {
     background-color: rgba(255, 255, 255, 0.8);
 }

 .recruitment-faq-single.is-active .recruitment-faq-text {
     color: #2563eb;
 }

 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     .recruitment-faq-wrapper {
         padding: 60px 15px 80px;
     }

     .recruitment-faq-heading {
         font-size: 24px;
         margin-bottom: 35px;
     }

     .recruitment-faq-text {
         font-size: 15px;
         padding-right: 20px;
     }

     .recruitment-faq-body p {
         font-size: 14px;
     }

     .recruitment-faq-trigger {
         padding: 20px 0;
     }
 }

 @media (max-width: 480px) {
     .recruitment-faq-heading {
         font-size: 20px;
     }

     .recruitment-faq-text {
         font-size: 14px;
     }
 }