/* =========================================
   Global Variables & Base Styles
========================================= */
:root {
   --primary-color: #b4a46b;
   --sub-color: #3d3d3d;
   /*--bg-light: #fff9f9;*/
   --bg-light: #ffffff;
   --btn-primary-color: #b99515;
   --bg-footer-primary: #5c5c5c;
   --text-white: #ffffff;
   --low-primary-color: rgb(180 164 107 / 10%);
   --border-primary-color: 1px solid rgb(180 164 107 / 42%);
}

body {
   font-family: 'Segoe UI', Lato, Tahoma, Geneva, Verdana, sans-serif;
   color: var(--sub-color);
   background-color: var(--bg-light);
   /*background-color:white;*/
   overflow-x: hidden;
}

/* --- Default English Fonts --- */
/*body {
   font-family: 'Lato', sans-serif;
}*/

h1, h2, h3, h4, h5, h6, .nav-link, .btn, .navbar-brand {
   font-family: 'Geneva', sans-serif;
}

/* --- Khmer Fonts (Kantumruy Pro is very modern and matches Montserrat well) --- */
body.lang-kh {
   font-family: 'Kantumruy Pro', sans-serif;
   line-height: 1.8; /* Khmer characters are taller, so they need a bit more breathing room! */
}

   body.lang-kh h1, body.lang-kh h2, body.lang-kh h3, body.lang-kh h4, body.lang-kh h5, body.lang-kh h6,
   body.lang-kh .nav-link, body.lang-kh .btn, body.lang-kh .navbar-brand {
      font-family: 'Kantumruy Pro', sans-serif;
      font-weight: 700;
   }

/* --- Traditional Chinese Fonts --- */
body.lang-tw {
   font-family: 'Noto Sans TC', sans-serif;
}

   body.lang-tw h1, body.lang-tw h2, body.lang-tw h3, body.lang-tw h4, body.lang-tw h5, body.lang-tw h6,
   body.lang-tw .nav-link, body.lang-tw .btn, body.lang-tw .navbar-brand {
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 700;
   }

/* =========================================
   Home Page
========================================= */
/* Presentation Mobile Styling */
@media (max-width: 768px) {
   /* Hide the next/prev arrows on phones so they don't block the slide content */
   #presentationCarousel .carousel-control-prev,
   #presentationCarousel .carousel-control-next {
      display: none !important;
   }
   /* Make sure the slide indicator text isn't too big on phones */
   #slideIndicator {
      font-size: 0.9rem !important;
      margin-bottom: 1rem;
   }
}

/* Default for mobile and tablets: allow the section to expand naturally */
.job-vacancies-section {
   max-height: none;
}

   .job-vacancies-section > .container {
      min-height: 70vh;
   }
/* For PC / Desktop (screens 992px and wider) */
@media (min-width: 992px) {
   .job-vacancies-section {
      max-height: 700px;
   }
      .job-vacancies-section > .container {
         min-height: auto;
      }
}

/* Make the close button easy to tap with a thumb */
.mobile-close-btn {
   position: absolute;
   right: 10px;
   top: 10px;
   z-index: 1055;
   padding: 15px !important; /* Larger tap area */
   background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark circle */
   border-radius: 50%;
}

/* PDF Watermark Overlay Styling */
/*Text Use style*/
/*.watermark-overlay {
		position: absolute;
		top: 50%;
		left: 40%;*/
/*transform: translate(-25%, -50%) rotate(-35deg);*/ /* Centers and tilts the text */
/*font-size: 2vw;*/ /* Responsive font size */
/*font-weight: bold;
		color: #b4a46b47;*/ /* Light grey and very transparent */
/*pointer-events: none;*/ /* VERY IMPORTANT: Lets the user scroll the PDF through the text! */
/*z-index: 10;*/ /* Keeps it above the iframe */
/*white-space: nowrap;
		user-select: none;*/ /* Prevents users from highlighting the watermark text */
/*}*/

/*Image use this style*/
/* Logo Watermark Overlay Styling */
/*.watermark-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);*/ /* Keeps it perfectly centered */
/*width: 40%;*/ /* Adjust this percentage to make the logo bigger or smaller */
/*max-width: 400px;*/ /* Prevents it from getting too massive on huge desktop monitors */
/*opacity: 0.15;*/ /* Controls the transparency (0.0 is invisible, 1.0 is solid) */
/*pointer-events: none;*/ /* VERY IMPORTANT: Lets the user scroll the PDF right through the image! */
/*z-index: 10;*/ /* Keeps it above the iframe */
/*user-select: none;*/ /* Prevents users from highlighting it */
/*-webkit-user-drag: none;*/ /* Prevents users from trying to drag the image to save it */
/*}*/

/* Tiled Diagonal Logo Watermark Styling */
.watermark-overlay {
   position: absolute;
   top: 5%;
   left: 15%;
   width: 60%;
   background-repeat: repeat;
   background-size: 10px;
   /* transform: rotate(-30deg); */
   opacity: 0.1;
   pointer-events: none;
   z-index: 10;
   user-select: none;
   height: 50%;
}

/* Ensure the massive tilted box doesn't spill out of the video player area */
.ratio-16x9 {
   overflow: hidden !important;
}

/* =========================================
   Cover Image Container Effects
========================================= */

.overflow-hidden {
   /* Uses your gold color for the subtle inner shadow */
   box-shadow: inset 0 0 50px var(--low-primary-color);
}

   .overflow-hidden img {
      transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
   }

   /* Slow zoom effect */
   .overflow-hidden:hover img {
      transform: scale(1.05);
   }

/* =========================================
   Custom Carousel Controls
========================================= */

.moreJobHome {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

   .moreJobHome:hover {
      background-color: var(--btn-primary-color) !important;
      color: var(--text-white) !important;
      border-color: var(--btn-primary-color) !important;
      transform: scale(1.1);
   }

/* =========================================
   Typography & Headings
========================================= */
.heading-brand {
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: 2.5rem;
   color: #1a1a1a;
   line-height: 1.2;
   margin-bottom: 1rem;
   letter-spacing: -0.5px;
}

.body-text {
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   font-size: 1.1rem;
   color: #4a4a4a;
   line-height: 1.6;
}

.section-title {
   color: var(--sub-color);
   font-weight: 800;
   text-transform: uppercase;
   position: relative;
   padding-bottom: 15px;
   margin-bottom: 50px;
   text-align: center;
}

   .section-title::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background-color: var(--primary-color);
   }

/* =========================================
   Navbar & Navigation
========================================= */
.navbar {
   background-color: rgba(248, 249, 250, 0.85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(39, 44, 44, 0.1);
   box-shadow: 0 4px 20px rgba(39, 44, 44, 0.05);
}

.navbar-brand {
   color: var(--sub-color) !important;
   font-weight: 800;
   letter-spacing: 1px;
   font-size: 1.4rem;
}

.nav-link {
   color: var(--sub-color) !important;
   font-weight: 600;
   transition: color 0.3s;
   margin: 0 8px;
}

   .nav-link:hover,
   .nav-link.active {
      color: var(--primary-color) !important;
   }

/* =========================================
   Dropdowns & Language/Menu Buttons
========================================= */
.dropdown-menu {
   background-color: rgba(248, 249, 250, 0.95);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--primary-color);
   border-radius: 4px;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.1);
   padding: 10px 0;
   margin-top: 15px;
}

.dropdown-item {
   color: var(--sub-color);
   font-weight: 600;
   padding: 10px 20px;
   transition: all 0.2s ease;
}

   .dropdown-item:hover,
   .dropdown-item.active,
   .dropdown-item:active {
      background-color: var(--primary-color);
      color: #ffffff;
      padding-left: 26px;
   }

/* Combined identical classes for .menu-btn and .lang-btn */
.menu-btn,
.lang-btn {
   color: var(--sub-color);
   font-weight: 700;
   font-size: 0.95rem;
   padding: 5px 10px;
   border: 1px solid transparent;
   border-radius: 50px;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
}

   .menu-btn:hover,
   .menu-btn[aria-expanded="true"],
   .lang-btn:hover,
   .lang-btn[aria-expanded="true"] {
      background-color: rgba(180, 164, 107, 0.1);
      color: var(--primary-color);
   }

.lang-flag {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #ffffff;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.lang-dropdown-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 15px;
}

/* =========================================
   Hero Carousel
========================================= */

.unset-carousel-item {
   height: unset !important;
   min-height: unset !important;
}

.carousel-item {
   height: 70vh;
   min-height: 400px;
   /*background-color: var(--sub-color);*/
   text-align: center;
   position: relative;
}

   .carousel-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
   }

.carousel-caption {
   bottom: 30%;
   z-index: 10;
}

.carousel-indicators [data-bs-target] {
   background-color: var(--primary-color);
   z-index: 10;
}

@media (max-width: 768px) {

   .unset-carousel-item {
      height: 35vh;
      min-height: 250px;
   }

   .carousel-item {
      height: 35vh;
      min-height: 250px;
   }

   .carousel-caption h1 {
      font-size: 1.8rem;
   }

   .carousel-caption p.lead {
      font-size: 1rem;
   }
}

/* =========================================
   Layout Sections
========================================= */
.programs-section {
   padding: 80px 0;
   background-color: var(--bg-light);
   /*background-color: white;*/
}

.intro-section {
   padding: 80px 0;
}

.page-header {
   background-size: cover;
   background-position: center;
   padding: 100px 0;
   text-align: center;
   position: relative;
}

   .page-header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(39, 44, 44, 0.8);
      z-index: 1;
   }

   .page-header .container {
      position: relative;
      z-index: 2;
   }

   .page-header h1 {
      color: var(--primary-color);
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
   }

   .page-header p {
      color: #ffffff;
      font-size: 1.1rem;
      opacity: 0.9;
   }

.filter-section {
   background-color: #ffffff;
   padding: 30px;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(39, 44, 44, 0.05);
   margin-top: -40px;
   position: relative;
   z-index: 10;
}

/* =========================================
   Cards
========================================= */
.card-custom {
   background-color: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(39, 44, 44, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border-bottom: 4px solid transparent;
   overflow: hidden;
}

   .card-custom:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(39, 44, 44, 0.12);
      border-bottom: 4px solid var(--primary-color);
   }

.card-img-top {
   height: 220px;
   object-fit: cover;
   /*opacity: 0.9;*/
}

.card-custom .card-title {
   color: var(--primary-color);
   font-weight: 800;
   font-size: 1.15rem;
}

.text-muted-custom {
   color: rgba(39, 44, 44, 0.7) !important;
}

/* =========================================
   Buttons & Forms
========================================= */
.form-control, .form-select {
   border: 1px solid rgba(39, 44, 44, 0.2);
   height: 45px;
}

   .form-control:focus, .form-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(180, 164, 107, 0.25);
   }

.btn-custom {
   background-color: var(--primary-color);
   color: #ffffff;
   border: none;
   border-radius: 4px;
   padding: 6px 24px;
   transition: background-color 0.3s ease;
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: 700;
}

   .btn-custom:hover {
      background-color: var(--sub-color);
      color: #ffffff;
   }

/* =========================================
   Video Section
========================================= */
.video-container {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
   height: 0;
   overflow: hidden;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.15);
   border: 1px solid rgba(39, 44, 44, 0.1);
}

   .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }



.video-caption {
   margin-top: 15px;
   color: var(--sub-color);
   font-weight: 700;
   font-size: 1.1rem;
   text-align: center;
}

.video-sub-caption {
   color: rgba(39, 44, 44, 0.7);
   font-size: 0.9rem;
   text-align: center;
   margin-bottom: 30px;
}

/* =========================================
   Modals
========================================= */
.modal-backdrop.show {
   opacity: 0.8 !important;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   background-color: var(--sub-color) !important;
}

.glass-content {
   background-color: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
   border: 1px solid var(--primary-color);
   border-radius: 12px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
   overflow: hidden;
}

.modal-image-header {
   height: 300px;
   width: 100%;
   object-fit: cover;
}

.btn-close-floating {
   position: absolute;
   top: 15px;
   right: 15px;
   background-color: #ffffff;
   opacity: 0.9;
   border-radius: 50%;
   padding: 12px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   z-index: 10;
   transition: all 0.2s;
}

   .btn-close-floating:hover {
      opacity: 1;
      transform: scale(1.1);
      background-color: var(--primary-color);
   }

.modal-header-custom {
   background-color: var(--sub-color);
   color: var(--primary-color);
   border-bottom: 3px solid var(--primary-color);
}

   .modal-header-custom .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%);
   }

/* =========================================
   Choices.js Theme
========================================= */
.choices {
   margin-bottom: 0;
}

.choices__inner {
   background-color: #ffffff !important;
   border: 1px solid rgba(39, 44, 44, 0.2) !important;
   border-radius: 4px !important;
   min-height: 45px;
   padding: 5px 15px !important;
   transition: all 0.3s ease;
}

.is-focused .choices__inner,
.is-open .choices__inner {
   border-color: var(--primary-color) !important;
   box-shadow: 0 0 0 0.25rem rgba(180, 164, 107, 0.25) !important;
}

.choices__list--dropdown {
   border: 1px solid var(--primary-color) !important;
   border-radius: 0 0 4px 4px !important;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.15) !important;
   background-color: #ffffff !important;
   z-index: 2000 !important;
}

.choices__input {
   background-color: var(--bg-light) !important;
   border-bottom: 1px solid rgba(39, 44, 44, 0.1) !important;
   font-size: 1rem !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
   background-color: var(--primary-color) !important;
   color: #ffffff !important;
}

.choices__list--dropdown .choices__item--selectable.is-selected {
   background-color: rgba(180, 164, 107, 0.1);
   color: var(--sub-color);
}

.choices__item--selectable {
   color: var(--sub-color) !important;
   border-radius: 3px !important;
}

/* =========================================
   Career Pathway Timeline
========================================= */
.career-path-section {
   position: relative;
   padding: 40px 0;
}

   .career-path-section::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: rgba(180, 164, 107, 0.2);
      transform: translateX(-50%);
   }

.path-step {
   position: relative;
   margin-bottom: 60px;
}

   .path-step:last-child {
      margin-bottom: 0;
   }

.path-dot {
   width: 24px;
   height: 24px;
   background: var(--primary-color);
   border: 4px solid #ffffff;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
   z-index: 2;
   box-shadow: 0 0 0 4px rgba(180, 164, 107, 0.2);
}

.path-content {
   background: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 12px;
   padding: 30px;
   width: 45%;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
   transition: transform 0.3s ease, border-color 0.3s ease;
   position: relative;
}

   .path-content:hover {
      transform: translateY(-5px);
      border-color: var(--primary-color);
   }

.path-step.left .path-content {
   margin-left: auto;
   margin-right: 55%;
}

.path-step.right .path-content {
   margin-left: 55%;
}

.path-title {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.25rem;
   margin-bottom: 10px;
}

.path-subtitle {
   color: var(--primary-color);
   font-weight: 700;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 15px;
}


/* =========================================
   Footer
========================================= */
.footer {
   background-color: var(--bg-footer-primary);
   color: var(--text-white);
   padding: 60px 0 20px;
   margin-top: 60px;
}

   .footer h5 {
      color: var(--primary-color);
      margin-bottom: 20px;
      font-weight: 700;
   }

.footer-links a {
   color: rgba(248, 249, 250, 0.7);
   text-decoration: none;
   transition: color 0.3s, padding-left 0.3s;
   display: inline-block;
   margin-bottom: 12px;
}

   .footer-links a:hover {
      color: var(--primary-color);
      padding-left: 5px;
   }

.footer-contact li {
   display: flex;
   align-items: flex-start;
   color: rgba(248, 249, 250, 0.7);
}

.footer-contact i {
   margin-top: 4px;
   font-size: 1.1em;
}

.footer-contact a {
   color: rgba(248, 249, 250, 0.7);
   text-decoration: none;
   transition: color 0.3s;
}

   .footer-contact a:hover {
      color: var(--primary-color);
   }

.footer-logo {
   border: 1px solid var(--primary-color);
   border-radius: 8px;
   padding: 5px;
   background-color: rgba(255, 255, 255, 0.05);
   transition: transform 0.3s ease;
}

   .footer-logo:hover {
      transform: scale(1.05);
   }

.footer .bottom-bar {
   border-top: 1px solid rgba(248, 249, 250, 0.1);
   margin-top: 40px;
   padding-top: 20px;
   font-size: 0.85em;
   text-align: center;
   color: rgba(248, 249, 250, 0.6);
}

/* =========================================
   Vision & Mission
========================================= */

/* --- Vision & Mission Statement Cards --- */
.vm-section {
   position: relative;
   padding: 60px 0;
   z-index: 2;
}

/* --- Vision & Mission Titles --- */
.vm-card-title {
   color: var(--primary-color);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 1.2rem;
   margin-bottom: 15px;
   position: relative;
   z-index: 2; /* Keeps it above the faint background icon */
}

.vm-card {
   background: #ffffff;
   padding: 50px 40px;
   border-radius: 12px;
   box-shadow: 0 15px 40px rgba(39, 44, 44, 0.08);
   height: 100%;
   border-top: 5px solid var(--primary-color);
   transition: transform 0.3s ease;
   text-align: center;
}

   .vm-card:hover {
      transform: translateY(-5px);
   }

.vm-icon {
   font-size: 3.5rem;
   color: rgba(180, 164, 107, 0.2); /* Very faint, large background icon */
   margin-bottom: -30px; /* Pulls the text up over the icon */
   display: block;
}

.vm-statement {
   font-size: 1.6rem;
   font-weight: 800;
   color: var(--sub-color);
   line-height: 1.4;
   margin-bottom: 25px;
   position: relative;
   z-index: 2;
}

.vm-text {
   color: rgba(39, 44, 44, 0.7);
   line-height: 1.8;
   font-size: 1.05rem;
   position: relative;
   z-index: 2;
}

/* --- Core Values Section (Dark Theme) --- */
.values-section {
   background-color: var(--bg-light);
   padding: 20px 0;
   color: var(--sub-color);
}

.value-card {
   background: rgb(180 164 107 / 10%); /* Extremely subtle white tint */
   border: 1px solid rgb(180 164 107 / 42%); /* Faint gold border */
   border-radius: 12px;
   padding: 40px 30px;
   text-align: center;
   height: 100%;
   transition: all 0.3s ease;
}

   .value-card:hover {
      background: rgba(180, 164, 107, 0.08);
      transform: translateY(-5px);
      border-color: var(--primary-color);
   }

.value-icon {
   width: 70px;
   height: 70px;
   margin: 0 auto 20px auto;
   border-radius: 50%;
   background: rgba(180, 164, 107, 0.1);
   color: var(--primary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   transition: transform 0.3s ease;
}

.value-card:hover .value-icon {
   transform: scale(1.1);
   background: var(--primary-color);
   color: var(--sub-color);
}

.value-title {
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 1.25rem;
   color: var(--sub-color);
   letter-spacing: 1px;
}

.value-desc {
   color: var(--sub-color);
   font-size: 0.95rem;
   line-height: 1.6;
}

/* =========================================
   Product value & Pride
========================================= */
/* --- Product Portfolio Cards --- */
.product-card {
   background: #ffffff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   border: 1px solid rgba(39, 44, 44, 0.08);
   height: 100%;
}

   .product-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(39, 44, 44, 0.12);
   }

.product-img-box {
   height: 240px;
   overflow: hidden;
   position: relative;
}

.product-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.product-card:hover .product-img {
   transform: scale(1.1); /* Smooth image zoom on hover */
}

.product-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 50%;
   background: linear-gradient(to top, rgba(39, 44, 44, 0.8) 0%, rgba(39, 44, 44, 0) 100%);
}

.product-content {
   padding: 30px;
   border-top: 4px solid var(--primary-color);
   position: relative;
   background: #ffffff;
   z-index: 2;
}

.product-icon {
   width: 50px;
   height: 50px;
   background: var(--primary-color);
   color: #ffffff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   position: absolute;
   top: -25px; /* Pulls icon halfway up into the image area */
   right: 30px;
   box-shadow: 0 4px 10px rgba(180, 164, 107, 0.4);
}

.product-title {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.25rem;
   margin-bottom: 15px;
   margin-top: 10px;
}

/* --- Pride Checklist Section --- */
.pride-section {
   background-color: var(--bg-light);
   padding: 80px 0;
}

.pride-list {
   list-style: none;
   padding-left: 0;
}

   .pride-list li {
      position: relative;
      padding-left: 50px;
      margin-bottom: 30px;
   }

   .pride-list .icon-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 35px;
      height: 35px;
      background: rgba(180, 164, 107, 0.15);
      color: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
   }

   .pride-list h5 {
      color: var(--sub-color);
      font-weight: 700;
      margin-bottom: 8px;
      font-size: 1.15rem;
   }

   .pride-list p {
      color: rgba(39, 44, 44, 0.7);
      line-height: 1.6;
      margin-bottom: 0;
   }

/* =========================================
   Achievement Award Spotlight
========================================= */

.award-spotlight {
   /*background: linear-gradient(145deg, var(--sub-color) 0%, #1a1d1d 100%); */
   background: linear-gradient(145deg, var(--bg-light) 0%, var(--primary-color) 100%);
   border: 1px solid rgba(180, 164, 107, 0.3);
   border-radius: 15px;
   padding: 60px 40px;
   color: #ffffff;
   box-shadow: 0 20px 50px rgba(0,0,0,0.2);
   position: relative;
   overflow: hidden;
}

/* The glowing gold effect behind the trophy */
.award-glow {
   position: absolute;
   top: -50px;
   right: -50px;
   width: 300px;
   height: 300px;
   /*background: radial-gradient(circle, rgba(180, 164, 107, 0.15) 0%, rgba(180, 164, 107, 0) 70%);*/
   background: radial-gradient(circle, rgb(180 164 107) 0%, rgb(180 164 107 / 0%) 70%);
   border-radius: 50%;
   z-index: 1;
}

.award-icon-large {
   font-size: 5rem;
   color: var(--primary-color);
   margin-bottom: 20px;
   position: relative;
   z-index: 2;
}

.award-title-main {
   color: var(--sub-color);
   font-weight: 900;
   font-size: 2.2rem;
   line-height: 1.25;
   margin-bottom: 15px;
   position: relative;
   z-index: 2;
}

/* --- Award Pillar Cards --- */
.pillar-card {
   background: #ffffff;
   border-top: 4px solid var(--primary-color);
   border-radius: 8px;
   padding: 40px 30px;
   height: 100%;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
   transition: transform 0.3s ease;
}

   .pillar-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(39, 44, 44, 0.1);
   }

.pillar-metric {
   font-size: 2rem;
   font-weight: 800;
   color: #b88917e6; /* Giant background number */
   position: absolute;
   top: 10px;
   right: 20px;
}

.pillar-icon {
   width: 60px;
   height: 60px;
   background: rgb(0 0 0 / 10%);
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   margin-bottom: 25px;
}

.pillar-title {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.2rem;
   margin-bottom: 15px;
}

/* --- Company History Timeline --- */
.company-timeline {
   position: relative;
   /*max-width: 1000px;*/
   margin: 0 auto;
   padding: 40px 0;
}

   /* The central gold line */
   .company-timeline::after {
      content: '';
      position: absolute;
      width: 4px;
      background-color: rgba(180, 164, 107, 0.3); /* Faint gold */
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -2px;
      z-index: -1;
   }

.timeline-item {
   padding: 10px 40px;
   position: relative;
   background-color: inherit;
   width: 50%;
}

   /* Left and Right positioning */
   .timeline-item.left {
      left: 0;
   }

   .timeline-item.right {
      left: 50%;
   }


/* The Year Badge (Center Dot) */
.timeline-year {
   position: absolute;
   width: 70px;
   height: 70px;
   right: -35px;
   background-color: var(--primary-color);
   border: 4px solid #ffffff;
   top: 15px;
   border-radius: 50%;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   font-weight: 800;
   font-size: 1.1rem;
   box-shadow: 0 0 0 4px rgba(180, 164, 107, 0.2);
}

.timeline-item.right .timeline-year {
   left: -35px;
}

/* The Content Card */
.timeline-card {
   padding: 30px;
   background-color: #ffffff;
   position: relative;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.08);
   border-top: 4px solid var(--primary-color);
   transition: transform 0.3s ease;
}

   .timeline-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(39, 44, 44, 0.15);
   }

.timeline-img {
   width: 100%;
   border-radius: 8px;
   margin-bottom: 20px;
   /*max-height: 200px;*/
   max-height: fit-content;
   object-fit: cover;
}

.timeline-title {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.3rem;
   margin-bottom: 10px;
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
   .company-timeline::after {
      left: 40px;
   }

   .timeline-item {
      width: 100%;
      padding-left: 90px;
      padding-right: 15px;
   }

      .timeline-item.right {
         left: 0;
      }

         .timeline-item.left .timeline-year,
         .timeline-item.right .timeline-year {
            left: 5px;
         }
}


/* =========================================
   Company Address
========================================= */

/* --- HQ Contact Card --- */
.contact-section {
   position: relative;
   margin-top: -80px; /* Pulls the card up over the header banner! */
   z-index: 10;
}

.hq-card {
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 20px 50px rgba(39, 44, 44, 0.1);
   overflow: hidden;
   border-top: 5px solid var(--primary-color);
}

/* Contact Info List */
.contact-info-list {
   list-style: none;
   padding: 40px;
   margin: 0;
   height: 100%;
   background-color: #ffffff;
}

.contact-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 30px;
}

   .contact-item:last-child {
      margin-bottom: 0;
   }

.contact-icon {
   width: 50px;
   height: 50px;
   background: rgba(180, 164, 107, 0.1);
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   margin-right: 20px;
   flex-shrink: 0; /* Prevents icon from squishing */
}

.contact-details h5 {
   color: var(--sub-color);
   font-weight: 700;
   margin-bottom: 5px;
   font-size: 1.1rem;
}

.contact-details p {
   color: rgba(39, 44, 44, 0.7);
   margin-bottom: 0;
   line-height: 1.6;
}

/* --- Google Map Wrapper --- */
.map-wrapper {
   height: 100%;
   min-height: 400px;
   width: 100%;
}

   .map-wrapper iframe {
      width: 100%;
      height: 100%;
      border: 0;
   }

/* --- Branch Network Cards --- */
.branch-card {
   background: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 8px;
   padding: 30px;
   transition: all 0.3s ease;
   height: 100%;
}

   .branch-card:hover {
      border-color: var(--primary-color);
      box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
      transform: translateY(-5px);
   }

.branch-city {
   color: var(--primary-color);
   font-weight: 800;
   font-size: 1.2rem;
   margin-bottom: 15px;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.company-logo-size {
   height: 3rem;
}

/* --- Mobile Responsive Fixes for HQ Card --- */
@media (max-width: 768px) {
   /* 1. Pull the card up a bit less so it doesn't crowd the title */
   .contact-section {
      margin-top: -40px;
   }

   /* 2. Shrink the header padding to match the new mobile size */
   .page-header {
      padding: 80px 0 100px 0 !important;
   }

   /* 3. Make the map shorter so applicants can actually scroll down to the address! */
   .map-wrapper {
      min-height: 250px;
   }

   /* 4. Reduce the massive desktop padding inside the card */
   .contact-info-list {
      padding: 25px 20px;
   }

      .contact-info-list h3 {
         font-size: 1rem;
         text-align: center;
      }

   .company-logo-size {
      height: 2rem;
   }

   /* 5. Slightly shrink the gold icons to give the text more breathing room */
   .contact-icon {
      width: 40px;
      height: 40px;
      font-size: 1rem;
      margin-right: 15px;
   }

   /* 6. Adjust the text sizes slightly for small screens */
   .contact-details h5 {
      font-size: 1rem;
   }

   .contact-details p {
      font-size: 0.9rem;
   }
}


/* =========================================
   Benefits
========================================= */
/* --- Benefit Cards --- */
.benefit-card {
   background: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 12px;
   padding: 40px 30px;
   text-align: center;
   transition: all 0.3s ease;
   height: 100%;
   position: relative;
   overflow: hidden;
}

   /* Subtle Gold Top Border on Hover */
   .benefit-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--primary-color);
      transform: scaleX(0); /* Hidden by default */
      transition: transform 0.3s ease;
      transform-origin: center;
   }

   .benefit-card:hover::before {
      transform: scaleX(1); /* Expands on hover */
   }

   .benefit-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(39, 44, 44, 0.08);
   }

/* Icon Styling */
.benefit-icon-box {
   width: 80px;
   height: 80px;
   background-color: rgba(180, 164, 107, 0.1);
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   margin: 0 auto 25px auto;
   transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon-box {
   background-color: var(--primary-color);
   color: #ffffff;
   transform: rotateY(180deg); /* Cool 3D flip effect on hover */
}

.benefit-title {
   color: var(--sub-color);
   font-weight: 700;
   font-size: 1.25rem;
   margin-bottom: 15px;
}

.benefit-desc {
   color: rgba(39, 44, 44, 0.7);
   font-size: 0.95rem;
   line-height: 1.6;
}

/* --- Feature Section (Staff Loan) --- */
.feature-box {
   /*background-color: var(--sub-color);*/
   background: linear-gradient(145deg, var(--bg-light) 0%, var(--primary-color) 100%);
   border-radius: 15px;
   overflow: hidden;
   color: var(--sub-color);
}

.feature-content {
   padding: 60px;
}

.feature-list li {
   margin-bottom: 12px;
   display: flex;
   align-items: center;
}

.feature-list i {
   color: var(--sub-color);
   margin-right: 15px;
}

/* --- Tangible Perks Album Cards --- */
.perk-album-card {
   background: #ffffff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 8px 20px rgba(39, 44, 44, 0.06);
   transition: all 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
}

   .perk-album-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(39, 44, 44, 0.12);
   }

.perk-img-wrapper {
   height: 220px;
   overflow: hidden;
   position: relative;
}

.perk-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

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

.perk-caption {
   padding: 20px 15px;
   text-align: center;
   border-top: 3px solid var(--primary-color); /* Gold accent line */
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.perk-title {
   color: var(--sub-color);
   font-weight: 700;
   font-size: 1.05rem;
   margin: 0;
   line-height: 1.4;
}


/* =========================================
   Work-Life Balances
========================================= */

/* --- Work-Life Feature Cards --- */
.wlb-feature {
   background: var(--low-primary-color);
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
   margin-bottom: 40px;
   transition: transform 0.3s ease;
}

   .wlb-feature:hover {
      transform: translateY(-5px);
      border-color: rgba(180, 164, 107, 0.5); /* Soft gold border on hover */
   }

.wlb-img-box {
   height: 100%;
   min-height: 300px;
   position: relative;
}

.wlb-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
}

.wlb-content {
   padding: 50px 40px;
}

.wlb-icon {
   width: 60px;
   height: 60px;
   background-color: var(--sub-color);
   color: var(--primary-color);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   margin-bottom: 20px;
}

/* --- Life at Chailease Gallery --- */
.gallery-container {
   margin-top: 60px;
}

.gallery-item {
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   height: 250px;
}

.gallery-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease, filter 0.3s ease;
}

.gallery-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to top, rgba(39, 44, 44, 0.9) 0%, rgba(39, 44, 44, 0) 50%);
   opacity: 0;
   transition: opacity 0.3s ease;
   display: flex;
   align-items: flex-end;
   padding: 20px;
}

.gallery-item:hover .gallery-img {
   transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
   opacity: 1;
}

.gallery-text {
   color: #ffffff;
   font-weight: 700;
   font-size: 1.1rem;
   transform: translateY(20px);
   transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-text {
   transform: translateY(0);
}

/* Image Gallery Grid Layout */
.wlb-img-gallery {
   display: grid;
   grid-template-columns: 2fr 1fr; /* Main image takes 2/3 width, side images take 1/3 */
   gap: 10px;
   height: 100%;
   min-height: 350px;
}

.gallery-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px;
}

.gallery-side {
   display: grid;
   grid-template-rows: 1fr 1fr; /* Stack the two small images evenly */
   gap: 10px;
}

   .gallery-side img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
   }

/* Typography and Icon Styling */
.wlb-icon-box {
   background-color: #383533; /* Dark box from mockup */
   color: #d1b47b; /* Gold/Tan umbrella icon */
   width: 50px;
   height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   font-size: 24px;
   margin-bottom: 20px;
}

.wlb-title {
   color: var(--sub-color, #333); /* Fallback to dark gray if CSS var is missing */
   font-weight: 800;
   margin-bottom: 15px;
}

.wlb-text {
   line-height: 1.8;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
   .wlb-img-gallery {
      min-height: 250px;
   }
}


/* Simple animation */
@keyframes zoomIn {
   from {
      transform: scale(0.95);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}




/* =========================================
   Growth 
========================================= */
/* --- Training & Development Cards --- */
.training-card {
   background: var(--primary-color);
   color: #ffffff;
   border-radius: 12px;
   padding: 40px 30px;
   height: 100%;
   transition: all 0.3s ease;
   text-align: center;
}

   .training-card:hover {
      background: var(--low-primary-color); /* Slightly darker on hover */
      color: var(--primary-color);
      transform: translateY(-8px);
      border: var(--border-primary-color);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   }

      .training-card:hover > .training-icon {
         color: var(--primary-color);
      }

      .training-card:hover > .training-title {
         color: var(--primary-color);
      }

      .training-card:hover > .training-desc {
         color: var(--primary-color);
      }

.training-icon {
   font-size: 2.5rem;
   color: var(--text-white);
   margin-bottom: 20px;
}

.training-title {
   font-weight: 700;
   margin-bottom: 15px;
}

.training-desc {
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.95rem;
   line-height: 1.6;
}


/* =========================================
   Management Sharing
========================================= */

/* --- Executive Sharing Cards --- */
.executive-card {
   background-color: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
   margin-bottom: 60px; /* Large gap between executives */
   position: relative;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

   .executive-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(39, 44, 44, 0.1);
   }

/* Image Container */
.exec-img-wrapper {
   height: 100%;
   min-height: 400px; /* Ensures the image is tall enough to match the text */
   position: relative;
}

.exec-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-bottom: 5px solid var(--primary-color); /* Gold accent line */
}

/* Text Content Area */
.exec-content {
   padding: 60px;
   position: relative;
   z-index: 2;
}

.exec-name {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.8rem;
   margin-bottom: 5px;
}

.exec-title {
   color: var(--primary-color);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 0.8rem;
   margin-bottom: 25px;
}

.exec-story {
   color: rgba(39, 44, 44, 0.8);
   line-height: 1.8;
   font-size: 1.1rem;
   text-align: justify;
}

/* =========================================
   Internship Sharing
========================================= */
/* --- Internship Highlights --- */
.highlight-box {
   text-align: center;
   padding: 30px 20px;
   transition: transform 0.3s ease;
}

   .highlight-box:hover {
      transform: translateY(-5px);
   }

.highlight-icon-wrapper {
   width: 70px;
   height: 70px;
   background-color: rgba(180, 164, 107, 0.1);
   color: var(--primary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   margin: 0 auto 20px auto;
}

.highlight-title {
   color: var(--sub-color);
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 10px;
}

/* --- Intern Testimonial Cards --- */
.intern-card {
   background: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 12px;
   padding: 60px 30px 30px; /* Extra top padding for the image */
   margin-top: 60px; /* Pushes card down to make room for avatar */
   position: relative;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   text-align: center;
   height: calc(100% - 60px);
   border-bottom: 4px solid transparent;
}

   .intern-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(39, 44, 44, 0.1);
      border-bottom: 4px solid var(--primary-color);
   }

/* The Overlapping Circular Avatar */
.intern-avatar {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid #ffffff;
   box-shadow: 0 5px 15px rgba(39, 44, 44, 0.15);
   position: absolute;
   top: -50px; /* Pulls it halfway out of the card */
   left: 50%;
   transform: translateX(-50%); /* Centers it perfectly */
}

.intern-name {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.25rem;
   margin-bottom: 5px;
}

.intern-school {
   color: var(--primary-color);
   font-size: 0.85rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 20px;
}

.intern-quote {
   font-style: italic;
   color: rgba(39, 44, 44, 0.8);
   line-height: 1.6;
   font-size: 0.95rem;
}

   .intern-quote::before {
      content: '"';
      font-size: 1.5rem;
      color: var(--primary-color);
      font-family: Georgia, serif;
      margin-right: 5px;
   }

   .intern-quote::after {
      content: '"';
      font-size: 1.5rem;
      color: var(--primary-color);
      font-family: Georgia, serif;
      margin-left: 5px;
   }



/* =========================================
   Careers
========================================= */

/* --- Filter Section --- */
.filter-section {
   background-color: #ffffff;
   padding: 30px;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(39, 44, 44, 0.05);
   margin-top: -40px;
   position: relative;
   z-index: 10;
}

.form-control, .form-select {
   border: 1px solid rgba(39, 44, 44, 0.2);
   height: 45px;
}

   .form-control:focus, .form-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(180, 164, 107, 0.25);
   }
/* --- Job Cards --- */
.job-card {
   background-color: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 8px;
   padding: 25px;
   margin-bottom: 20px;
   transition: all 0.3s ease;
   border-left: 4px solid transparent;
}

   .job-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(39, 44, 44, 0.08);
      border-left: 4px solid var(--primary-color);
   }

.job-title {
   color: var(--sub-color);
   font-weight: 700;
   font-size: 1.25rem;
   text-decoration: none;
   transition: color 0.3s;
}

   .job-title:hover {
      color: var(--primary-color);
   }

.job-meta {
   font-size: 0.9rem;
   color: rgba(39, 44, 44, 0.7);
   margin-top: 10px;
   margin-bottom: 15px;
}

   .job-meta i {
      color: var(--primary-color);
      margin-right: 5px;
   }

.job-badge {
   background-color: rgba(180, 164, 107, 0.1);
   color: var(--primary-color);
   padding: 5px 12px;
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: 600;
   display: inline-block;
   margin-right: 8px;
}

.btn-custom {
   background-color: var(--btn-primary-color);
   color: var(--bg-light);
   border: none;
   border-radius: 4px;
   padding: 8px 24px;
   font-weight: 700;
   text-transform: uppercase;
   transition: background-color 0.3s ease;
}

   .btn-custom:hover {
      background-color: var(--sub-color);
      color: #ffffff;
   }

/* --- Application Modal Header Restored --- */
.modal-header-custom {
   background-color: var(--sub-color);
   color: var(--primary-color);
   border-bottom: 3px solid var(--primary-color);
   border-radius: 5px 5px 0px 0px;
}

   /* Makes the close X white */
   .modal-header-custom .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%);
   }

/* --- SweetAlert Structural Overrides --- */
.custom-swal-popup {
   padding: 0 !important;
   border-radius: 8px !important;
}
   /* Forces the custom header to touch the edges by removing default Swal margins */
   .custom-swal-popup .swal2-html-container {
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important; /* Prevents badge clipping */
   }


/* --- URGENT Job Card Special Styling --- */
.job-card.urgent-card {
   border-left: 6px solid var(--primary-color);
   /*background-color: rgba(180, 164, 107, 0.02);*/ /* Extremely subtle gold tint to the background */
   position: relative; /* Required for the ribbon */
   box-shadow: 0 4px 15px rgba(180, 164, 107, 0.15); /* Slight gold shadow instead of grey */
   transform: scale(1.01); /* Makes the card fractionally larger to stand out */
}

   .job-card.urgent-card:hover {
      transform: scale(1.02) translateY(-3px);
      box-shadow: 0 12px 30px rgba(180, 164, 107, 0.25);
   }

/* The "Urgent" Ribbon */
.urgent-ribbon {
   position: absolute;
   top: -5px;
   right: 20px;
   background-color: #dc3545; /* Bootstrap Danger Red for high urgency */
   color: white;
   padding: 5px 15px;
   font-size: 0.75rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
}

   .urgent-ribbon::before {
      content: "";
      position: absolute;
      top: 0;
      left: -5px;
      border-top: 5px solid #a71d2a; /* Darker red for the folded shadow effect */
      border-left: 5px solid transparent;
   }

/* Upgraded Urgent Badge */
.job-badge.badge-urgent {
   background-color: #dc3545;
   color: #ffffff;
   animation: pulse-badge 2s infinite; /* Grabs attention */
}

/* Button Pulse Animation */
@keyframes pulse-btn {
   0% {
      box-shadow: 0 0 0 0 rgba(180, 164, 107, 0.7);
   }

   70% {
      box-shadow: 0 0 0 10px rgba(180, 164, 107, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(180, 164, 107, 0);
   }
}

.urgent-card .btn-custom.apply-btn {
   animation: pulse-btn 2s infinite;
}

/* --- Mobile Responsiveness for Modals --- */
@media (max-width: 768px) {
   /* Reduce padding inside the application form for small screens */
   .modal-body.p-4 {
      padding: 1.25rem !important;
   }

   /* Make form inputs slightly smaller to save vertical space */
   .form-control, .form-select {
      height: 40px;
      font-size: 0.95rem;
   }

   /* Adjust the modal header text size */
   .modal-header-custom h5 {
      font-size: 1.1rem;
   }
}

/* --- Talent Pool CTA Banner --- */
.talent-pool-banner {
   position: relative;
   background-image: url('../images/home/section6.jfif');
   background-size: cover;
   background-position: center;
   border-radius: 8px;
   overflow: hidden;
   margin-top: 60px;
   margin-bottom: 20px;
   box-shadow: 0 10px 30px rgba(39, 44, 44, 0.15);
}

.talent-pool-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(39, 44, 44, 0.85); /* Heavy sub-color overlay */
   z-index: 1;
}

.talent-pool-content {
   position: relative;
   z-index: 2;
   padding: 50px 30px;
   text-align: center;
}

   .talent-pool-content h3 {
      color: var(--primary-color);
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 15px;
   }

   .talent-pool-content p {
      color: rgba(248, 249, 250, 0.9); /* Off-white for readability */
      font-size: 1.1rem;
      max-width: 600px;
      margin: 0 auto 25px auto;
      line-height: 1.6;
   }


/* =========================================
   Events - Walk-in interview
========================================= */
/* --- Hiring Events Card Styling --- */

.event-category-section {
   padding: 1em;
   margin-bottom: 1rem;
   border: var(--border-primary-color);
   border-radius: 10px;
}

.event-card {
   background: #ffffff;
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 12px;
   overflow: hidden;
   transition: all 0.3s ease;
   margin-bottom: 30px;
}

   .event-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(39, 44, 44, 0.1);
      border-color: var(--primary-color);
   }

.event-img-container {
   height: 100%;
   min-height: 50vh;
   overflow: hidden;
   max-height: 50vh;
}

.event-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

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

/* Event Content Side */
.event-body {
   padding: 30px;
}

.event-title {
   color: var(--sub-color);
   font-weight: 800;
   font-size: 1.2rem;
   margin-bottom: 15px;
}

.event-info {
   font-size: 1.2rem;
   color: rgba(39, 44, 44, 0.8);
   margin-bottom: 8px;
   display: flex;
   align-items: center;
}

   .event-info i {
      color: var(--primary-color);
      width: 25px;
      font-size: 1.1rem;
   }

.event-body p {
   font-size: 0.8rem;
}

/* Status Badges */
.status-badge {
   padding: 6px 15px;
   border-radius: 50px;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.status-begin {
   background: #e6fffa;
   color: #234e52;
   border: 1px solid #38b2ac;
}
/* Green-ish */
.status-soon {
   background: #fffaf0;
   color: #7b341e;
   border: 1px solid #ed8936;
}
/* Orange-ish */
.status-ended {
   background: #edf2f7;
   color: #4a5568;
   border: 1px solid #cbd5e0;
}
/* Grey-ish */

/* Section Headers */
.event-section-header {
   /*border-left: 5px solid var(--primary-color);*/
   /*padding-left: 15px;*/
   /*margin: 60px 0 30px 0;*/
   color: var(--sub-color);
   font-weight: 800;
}

.event-start {
   background-color: var(--primary-color);
   color: white;
   padding-left: 2em;
   padding-right: 2em;
}

.event-end {
   background-color: #970000;
   color: white;
   padding-left: 2em;
   padding-right: 2em;
}

.event-pending {
   background-color: #ededed;
   color: dimgray;
   padding-left: 2em;
   padding-right: 2em;
}



/* =========================================
   FAQ
========================================= */

/* --- FAQ Accordion Styling --- */
.faq-section {
   max-width: 900px;
   margin: 0 auto;
}

.faq-category-title {
   color: var(--primary-color);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 1.2rem;
   margin: 40px 0 20px 0;
   border-bottom: 2px solid rgba(180, 164, 107, 0.2);
   padding-bottom: 10px;
}

.accordion-item {
   border: 1px solid rgba(39, 44, 44, 0.08);
   border-radius: 8px !important;
   margin-bottom: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(39, 44, 44, 0.03);
   background: #ffffff;
}

.accordion-button {
   font-weight: 700;
   color: var(--sub-color);
   background-color: #ffffff;
   padding: 20px 25px;
   font-size: 1.05rem;
   box-shadow: none !important; /* Removes Bootstrap's default blue glow */
}

   /* Hover effect for the question */
   .accordion-button:hover {
      color: var(--primary-color);
      background-color: rgba(180, 164, 107, 0.02);
   }

   /* State when the accordion is OPEN */
   .accordion-button:not(.collapsed) {
      color: var(--primary-color);
      background-color: rgba(180, 164, 107, 0.05);
      border-bottom: 1px solid rgba(180, 164, 107, 0.1);
   }

   /* Change the dropdown arrow color to Gold */
   .accordion-button::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b4a46b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   }

   .accordion-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b4a46b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   }

.accordion-body {
   padding: 25px;
   color: rgba(39, 44, 44, 0.8);
   line-height: 1.7;
   font-size: 0.95rem;
}

/* --- Help CTA Box --- */
.help-cta {
   background-color: var(--low-primary-color);
   border: var(--border-primary-color);
   border-radius: 12px;
   padding: 40px;
   text-align: center;
   color: var(--sub-color);
   margin-top: 60px;
}