/* ================= GLOBAL ================= */
:root {
    --accent: #a555f0;
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 18px 35px rgba(0, 0, 0, 0.14);
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ================= HERO ================= */
.hero-wrapper {
    background: url("../img/index1back.jpg") center/cover no-repeat;
    position: relative;
}

.hero-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.hero-wrapper * {
    position: relative;
    z-index: 2;
}

.header-transparent {
    background: transparent;
}

.nav-link {
    color: white !important;
    font-weight: 600;
}

.hero-modern {
    padding: 160px 0 120px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 1.1rem;
}

.hero-side-img {
    max-width: 500px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

.hero-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: white;
    border-radius: 30px;
    padding: 10px 25px;
}

/* ======================================================
   UNIVERSAL HOVER SYSTEM (APPLIES TO ALL CARDS)
   ====================================================== */

/* Covers:
   - Who We Are
   - What We Offer
   - Our Success Stories
   - Our Key Services
   - Why Choose Us
*/
.card,
.universal-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover,
.universal-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

/* Prevent layout jump */
.card,
.universal-card {
    will-change: transform;
}

/* ================= ICON SYSTEM ================= */
.icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.icon-circle img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* ================= ICON COLORS ================= */
.icon-1 {
    background: #e6fff6;
}

.icon-2 {
    background: #f3edff;
}

.icon-3 {
    background: #fff8e6;
}

.icon-4 {
    background: #ffecec;
}

.icon-5 {
    background: #e6fff6;
}

.icon-6 {
    background: #f3edff;
}

.icon-7 {
    background: #fff8e6;
}

.icon-8 {
    background: #ffecec;
}

.icon-9 {
    background: #eef5ff;
}

.icon-10 {
    background: #f0fff4;
}

.icon-11 {
    background: #fff0f6;
}

.icon-12 {
    background: #f8f9fa;
}

/* ================= OFFER SECTION TUNING ================= */
.offer-icons .card {
    border: none;
}

/* ================= FOOTER SOCIAL ICONS ================= */
.social-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-right: 12px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* ================= SOLID NAVBAR (ABOUT / INNER PAGES) ================= */
.navbar-solid {
    background: #ffffff;
}

.navbar-solid .nav-link {
    color: #212529 !important;
    font-weight: 600;
}

.navbar-solid .nav-link.active {
    color: var(--accent) !important;
    font-weight: 700;
}

.navbar-solid .navbar-brand {
    color: #212529 !important;
}


/* ================= ABOUT STORY SECTION ================= */
.about-story {
    background: url("../img/aboutus2back.jpg") center/cover no-repeat;
    position: relative;
}

/* Dark overlay for readability */
.about-story::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

/* Keep content above overlay */
.about-story .container {
    position: relative;
    z-index: 2;
}

/* Improve text readability */
.about-story h2,
.about-story p {
    color: #ffffff;
}

/* ================= ABOUT HIGHLIGHT SECTION ================= */
.about-highlight {
    background: url("../img/aboutus1back.jpg") center/cover no-repeat;
    position: relative;
}

/* Overlay for readability */
.about-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* Keep content above overlay */
.about-highlight .container {
    position: relative;
    z-index: 2;
}

/* Section headings stay white */
.about-highlight h2 {
    color: #ffffff;
}

/* Cards override white text */
.about-highlight .card {
    background: #ffffff;
    color: #212529;
}

/* Ensure card text is dark */
.about-highlight .card h5,
.about-highlight .card h6,
.about-highlight .card p {
    color: #212529;
}


/* ================= CAREERS HERO ================= */
.careers-hero {
    background: url("../img/carrers1back.jpg") center/cover no-repeat;
    position: relative;
    padding: 120px 0;
}

.careers-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.careers-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

/* ================= JOB LIST + HOVER DROPDOWN ================= */
.job-list {
    display: grid;
    gap: 18px;
}

.job-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.job-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.job-card-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

/* hidden by default */
.job-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e9ecef;
    display: none;
}

.job-details {
    display: none;
}

.job-details.active {
    display: block;
}


/* ================= JOB LIST SCROLL FIX ================= */

.job-list-wrapper {
    max-height: 520px;
    /* controls visible height */
    overflow-y: auto;
    /* enables vertical scroll */
    padding-right: 6px;
    /* avoids scrollbar overlap */
}

/* smoother scrolling */
.job-list-wrapper::-webkit-scrollbar {
    width: 8px;
}

.job-list-wrapper::-webkit-scrollbar-thumb {
    background: #cfd4da;
    border-radius: 4px;
}

.job-list-wrapper::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

.job-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}