/* Careers Hero Section */
.careers-hero-section {
    background: #FFFFFF;
    padding: 50px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 700px; /* Use min-height for flexibility */
}

.careers-hero-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 105px;
    max-width: 1240px;
    width: 100%;
}

.careers-hero-image {
    width: 400px;
    height: 601px;
    flex-shrink: 0;
    background: url(../images/careers-hero-image.png), #ffffff;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    transform: scaleX(-1); /* Flips the image horizontally as per figma matrix */
}

.careers-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.careers-hero-text h1 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    font-size: 56px;
    line-height: 1.2;
    color: #252525;
    margin-bottom: 16px;
}

.careers-hero-text h1 .highlight {
    font-weight: 600;
    color: #168CE0;
}

.careers-hero-text p {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.btn-view-openings {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    background: #FFFFFF;
    border: 2px solid rgba(17, 129, 208, 0.8);
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #141414;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-view-openings:hover {
    background: #1583D0;
    color: #FFFFFF;
    border-color: #1583D0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .careers-hero-content {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .careers-hero-text {
        align-items: center;
    }
    .careers-hero-image {
        transform: scaleX(1); /* Un-flip image for stacked layout */
        width: 100%;
        max-width: 400px; /* constrain image width */
        height: auto;
        aspect-ratio: 400 / 601;
    }
}

/* Why Work With Us Section */
.why-work-with-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 100px;
    gap: 38px;
    background: #1181D0;
    margin-bottom: 100px; /* Increased space before footer */
}

.why-work-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    width: 100%;
    max-width: 1240px;
}

.why-work-with-us h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

.why-work-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.why-work-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.why-work-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-radius: 12px;
    flex: 1;
    min-height: 230px; /* Allow cards to grow, but maintain a minimum height */
}

.why-work-card.text-card {
    background: #EBF1FD;
    border: 2px solid #C0D4FA;
    justify-content: flex-start; /* Align content to the top */
}

.why-work-card-icon-bg {
    width: 52px;
    height: 52px;
    background: #1181D0;
    border: 3.5px solid #BDD2FC;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.why-work-card-icon-bg i {
    color: #FFFFFF;
    font-size: 24px;
}

.why-work-card h3 {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 34px;
    color: #163064;
    margin: 0;
}

.why-work-card p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #1D3F83;
    margin: 0;
}

.why-work-card.image-card {
    padding: 0; /* Image should fill the card up to the border */
    border: 2px solid #C0D4FA;
    background-size: cover; /* Fill the card, may crop */
    background-position: center;
    background-repeat: no-repeat;
}

.image-card-1 {
    background-image: url('../images/careers/IMG-20250528-WA0046.png');
}

.image-card-2 {
    background-image: url('../images/careers/IMG-20250528-WA0044.png');
}

.image-card-3 {
    background-image: url('../images/careers/IMG-20250528-WA0047.png');
}

.image-card-4 {
    background-image: url('../images/careers/IMG-20250528-WA0042.png');
}

/* Responsive adjustments for Why Work With Us */
@media (max-width: 1200px) {
    .why-work-with-us {
        padding: 50px;
    }
    .why-work-row {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .why-work-with-us {
        padding: 30px 20px;
    }
    .why-work-with-us h2 {
        font-size: 36px;
        line-height: 48px;
    }
}

/* Testimonial Section - What Our Team Says */
.testimonial-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center container */
    padding: 50px 0px;
    background: #FFFFFF;
    position: relative; /* For absolute positioning of decorative columns */
    overflow: hidden; /* To contain absolutely positioned elements if they exceed bounds */
    margin-bottom: 60px; /* Reduced space before next section */
}

.testimonial-container {
    width: 100%;
    max-width: 1440px; /* Match Figma canvas for coordinate reference */
    margin: 0 auto; /* Center the container itself */
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center title and elements-wrapper */
    position: relative; /* Keep for any unexpected absolute children */
}

.testimonial-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    text-align: center;
    color: #252525;
    padding-top: 50px; /* Space from top of section */
    margin-bottom: 0; /* Title will be directly above the elements-wrapper */
    position: relative; /* Keep in flow */
    z-index: 1; /* Above background, but below potential popups if any */
}

.decorative-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: absolute;
    width: 150px;
    /* height: 588.19px; Figma's height seems too large, let content define */
    z-index: 1; /* Behind testimonial content */
}

.decorative-rect {
    box-sizing: border-box;
    width: 150px;
    height: 140px;
    background: #f8f9fa;
    border: 1px solid #BFD2FF;
    /* Reduced shadow for cleaner image display */
    box-shadow: 0px 2px 4px rgba(0, 132, 255, 0.08), 0px 1px 2px rgba(0, 132, 255, 0.04);
    /* Ensure consistent image display */
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: border-box;
}

.decorative-rect.style-blue-50 {
    background: #f0f4fd;
}

/* Interactive testimonial rectangle styles */
.decorative-rect {
    transition: all 0.3s ease;
    cursor: pointer;
}

.decorative-rect:hover {
    transform: translateY(-3px);
    box-shadow: 0px 12px 10px rgba(0, 132, 255, 0.1), 0px 4px 8px rgba(0, 132, 255, 0.08);
    border-color: #168CE0;
}

.decorative-rect.active-testimonial {
    border: 2px solid #168CE0;
    transform: translateY(-2px);
    box-shadow: 0px 10px 8px rgba(22, 140, 224, 0.15), 0px 3px 6px rgba(22, 140, 224, 0.1);
}

.decorative-rect.active-testimonial.style-blue-50 {
    background: #D6E8FD;
    border: 2px solid #168CE0;
}

/* All rectangles can now display images */
.decorative-rect {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* Ensure images load properly */
    background-color: #f0f0f0;
    /* Ensure proper image fitting */
    overflow: hidden;
    /* Add subtle border radius for better appearance */
    border-radius: 4px;
}

/* Blue rectangles get a subtle overlay to maintain visibility */
.decorative-rect.style-blue-50::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(235, 241, 253, 0.1);
    pointer-events: none;
    z-index: 1;
}

/* New wrapper for absolutely positioned elements */
.testimonial-elements-wrapper {
    width: 100%; /* Full width of testimonial-container (max 1440px) */
    height: 500px; /* Fixed height from Figma's Frame 1984079785 */
    position: relative; /* This is the new positioning context */
    margin-top: 20px; /* Space between title and this content block */
}

/* Positioning decorative columns relative to testimonial-elements-wrapper */
.decorative-column-left {
    left: 100px; /* Figma: Frame 1984079786 left: 100px */
    bottom: 0px; /* Figma: Frame 1984079786 bottom: 0px */
}

.decorative-column-middle {
    left: 310px; /* Figma: Frame 1984079787 left: 310px (author image) */
    top: 50%; /* Figma: top: calc(50% - 588.19px/2 + 0px) -> effectively 50% of its own height */
    transform: translateY(-50%);
}

.decorative-column-right {
    left: 1150px; /* Figma: Frame 1984079788 left: 1150px */
    /* right: 100px; is equivalent on 1440px canvas (1440 - 190 - 1150 = 100) */
    bottom: 0px; /* Figma: Frame 1984079788 bottom: 0px */
}

.testimonial-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 610px; /* Figma: Frame 1984079790 width: 610px */
    position: absolute;
    left: 520px; /* Figma: Frame 1984079790 left: 520px */
    top: 50%; /* Figma: top: calc(50% - 240px/2 + 28.63px) */
    transform: translateY(calc(-50% + 28.63px)); /* Approximates Figma's vertical centering for the text block */
    z-index: 2; /* Above decorative columns */
}

.testimonial-quote-icon-container {
    width: 40px;
    height: 40px;
    background: #1583D0;
    border-radius: 50%; /* Figma used 40px, 50% is more robust */
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-quote-icon-container i {
    color: #FFFFFF;
    font-size: 18px; /* Approximated from Figma's 17.43px width/height for the SVG */
}

.testimonial-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Figma: align-items: flex-start */
    gap: 16px;
    width: 100%; /* Will be 610px due to parent */
}

.testimonial-quote {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #3E3E3E;
    margin: 0;
}

.testimonial-author-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Figma: align-items: flex-start */
    gap: 4px;
    width: 100%; /* Will be 610px due to parent */
}

.author-name {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #163064;
    margin: 0;
}

.author-title {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #575757;
    margin: 0;
}

/* Responsive adjustments for Testimonial Section */
@media (max-width: 1439px) { /* Start adjustments just below Figma's 1440px canvas */
    .decorative-column-left {
        left: 6.94%; /* 100px / 1440px */
    }
    .decorative-column-middle {
        left: 21.5%; /* 310px / 1440px */
    }
    .decorative-column-right {
        left: auto; /* Remove fixed left */
        right: 6.94%; /* 100px / 1440px */
    }
    .testimonial-content-wrapper {
        left: 36.1%; /* 520px / 1440px */
        width: 42.3%; /* 610px / 1440px */
        /* transform: translateY(calc(-50% + 28.63px)); keep vertical adjustment */
    }
}

@media (max-width: 1200px) {
    .testimonial-elements-wrapper {
        height: auto; /* Allow height to adjust */
        min-height: 400px; /* Ensure some space */
        margin-top: 30px;
        padding: 0 20px; /* Add padding to the wrapper */
    }
    .decorative-column-left, .decorative-column-right {
       display: none;
    }
    .decorative-column-middle {
        position: relative; /* Change from absolute */
        left: auto;
        top: auto;
        transform: none;
        margin: 0 auto 20px; /* Center it and add space below */
        width: 190px; /* Keep original width or make slightly smaller */
    }
    .testimonial-content-wrapper {
        position: relative; /* Change from absolute */
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 610px;
        margin: 0 auto; /* Center it */
        align-items: center; /* Center content within */
    }
    .testimonial-text-content, .testimonial-author-details {
        align-items: center; /* Center text */
    }
    .testimonial-quote {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .testimonial-title {
        font-size: 28px;
        line-height: 32px;
        padding-top: 30px;
    }
    .testimonial-elements-wrapper {
        min-height: auto;
        margin-top: 20px;
    }
    .decorative-column-middle {
        display: none; /* Hide image column */
    }
    /* .testimonial-content-wrapper, .testimonial-text-content, .testimonial-author-details, .testimonial-quote already adjusted by 1200px media query */
    .testimonial-quote {
        font-size: 16px;
        line-height: 22px;
    }
    .author-name {
        font-size: 18px;
    }
    .author-title {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .testimonial-section {
        padding: 30px 0;
    }
    .testimonial-title {
        font-size: 24px;
        line-height: 28px;
        padding-top: 20px;
    }
    .testimonial-elements-wrapper {
        margin-top: 15px;
        padding: 0 15px;
    }
}

/* Open Positions Section */
.open-positions-section {
    padding: 80px 0;
    background-color: #FFFFFF; /* Figma shows white page background */
}

.open-positions-section .container {
    max-width: 960px; /* Adjusted for Figma's content width */
    margin: 0 auto;
    padding: 0 15px;
}

.open-positions-section .section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    width: 100%;
}

.open-positions-section .section-header h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 50px;
    color: #1D2939; /* Darker text from Figma */
    margin-bottom: 16px;
    text-align: center;
}

.open-positions-section .section-header p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #575757;
    max-width: 600px; /* Limit width for readability */
    margin: 0 auto;
    text-align: center;
}

.job-listings {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch job cards to full width of this container */
    gap: 16px; /* Gap between cards from Figma */
    margin-bottom: 40px;
}

.job-card {
    background-color: #F0F5FA; /* Light blue-grey card background from Figma */
    border: 1px solid #DCE6F1; /* Border from Figma */
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: row; /* Desktop: Row layout */
    align-items: flex-start; /* Align tops of content and button container */
    justify-content: flex-start; /* Let job-apply's margin-left: auto handle right alignment */
    width: 100%; /* Ensure card takes available width within centered container */
    /* max-width: 800px; */ /* Removed to make cards wider, respecting parent container's width */
    box-sizing: border-box; /* Crucial for width/padding calculations */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.job-card:hover {
    border-color: #AECBFA; /* Slightly darker blue border on hover */
    background-color: #E6EFFD; /* Slightly lighter blue background on hover */
}

.job-card-pattern {
    display: none; /* Remove pattern */
}

.job-card-content {
    padding: 0; /* Parent .job-card handles padding */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap between title, meta, tags */
    flex-grow: 1;
    min-width: 0; /* Allow content to shrink and prevent pushing button */
    overflow: hidden; /* Prevent content from overflowing and affecting layout */
}

.job-details h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500; /* Figma uses Medium */
    font-size: 18px; /* Figma size */
    line-height: 28px;
    color: #101828; /* Darker text from Figma */
    margin: 0;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px; /* Adjusted gap from Figma */
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    color: #475467; /* Grey text from Figma */
    margin-bottom: 4px; /* Reduced margin */
}

.job-meta span {
    display: flex;
    align-items: center;
}

.job-meta i {
    margin-right: 6px;
    color: #475467; /* Match text color for icons */
    font-size: 14px;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0; /* No margin if it's the last item in job-card-content */
}

.job-tags .tag {
    background-color: #FFFFFF; /* White background for tags from Figma */
    color: #344054; /* Dark grey text for tags */
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    border: 1px solid #D0D5DD; /* Light grey border for tags */
    border-radius: 16px;
}

.job-apply {
    margin-left: auto; /* Push button to the far right */
    padding-left: 20px; /* Add space between content and button */
    flex-shrink: 0; /* Prevent button from shrinking */
}

.btn-apply-now {
    display: inline-block;
    background-color: #FFFFFF; /* White background */
    color: #344054; /* Dark grey text */
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 16px; /* Figma padding */
    border: 1px solid #D0D5DD; /* Light grey border */
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-apply-now:hover {
    background-color: #F9FAFB; /* Slightly off-white hover */
    border-color: #B4BCCB; /* Darker grey border on hover */
}

.view-more-container {
    margin-top: 32px; /* Figma margin */
    text-align: center;
}

.btn-view-more {
    background-color: transparent;
    color: #1583D0; /* Primary blue for this button */
    border: 1px solid #1583D0;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-view-more:hover {
    background-color: #1583D0;
    color: #FFFFFF;
}

/* Responsive adjustments for Open Positions Section */
@media (max-width: 768px) {
    .open-positions-section .section-header h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .open-positions-section .section-header p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 40px;
    }
    .job-card {
        flex-direction: column; /* Mobile: Stack content and button */
        align-items: flex-start; /* Mobile: Align items to start */
        padding: 16px;
    }
    .job-apply {
        margin-left: 0; /* Mobile: Remove left margin */
        margin-top: 16px;
        width: 100%;
    }
    .btn-apply-now {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .open-positions-section {
        padding: 40px 0;
    }
    .open-positions-section .section-header h2 {
        font-size: 28px;
        line-height: 36px;
    }
    .open-positions-section .section-header p {
        font-size: 16px;
        margin-bottom: 32px;
    }
    .job-details h3 {
        font-size: 16px; /* Adjusted for smaller screens */
        line-height: 24px;
    }
    .job-meta {
        font-size: 13px;
    }
    .job-meta i {
        font-size: 13px;
    }
    .btn-apply-now, .btn-view-more {
        font-size: 14px;
        padding: 10px 12px;
    }
    .btn-view-more {
        padding: 10px 18px;
    }
}