/**
 * Intelligent Engineering Page Styles
 * Custom styles for the Intelligent Engineering template
 */

/* CSS Variables - Brand Colors */
:root {
    --ie-color-primary-dark: #33357D;
    --ie-color-accent-coral: #D26F5D;
    --ie-color-light-blue: #E6F0F4;
    --ie-color-light-coral: #f8ebe9;
    --ie-principle-card-height: 18rem;
    --ie-principle-card-width: 30rem;
    --ie-aspect-icon-width: 4rem;
    --ie-aspect-icon-height: 3rem;
}

/* Hero Section */
.ie-hero-section {
    display: flex;
    align-items: center;
    background-size: auto 100%; /* Keep original image dimensions */
    background-position: right center; /* Position on the right */
    background-repeat: no-repeat;
    min-height: 83.9rem; /* Match original image height */
    position: relative;
}

.ie-hero-row {
    width: 100%;
}

/* Content column */
.ie-hero-content-col {
    padding: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.ie-hero-content-wrapper {
    width: auto;
}

.ie-hero-heading {
    padding-left: 10rem; /* 100px left padding */
    padding-bottom: 3.6rem; /* 36px gap to content */
    font-size: 9.6rem; /* 96px */
    font-family: 'Zilla Slab', serif;
    font-weight: 700; /* Bold */
    line-height: 1;
    color: var(--ie-color-accent-coral);
    white-space: nowrap;
}

.ie-hero-content {
    padding-left: 10rem; /* 100px left padding */
    padding-bottom: 2.3rem; /* 23px gap to subtext */
    font-size: 5rem; /* 50px */
    font-family: 'Zilla Slab', serif;
    font-weight: 500; /* Medium */
    line-height: 1.52;
    color: var(--ie-color-primary-dark);
}

@media (min-width: 1440px) {
    .ie-hero-content {
        width: 131.9rem; /* 1319px on large screens */
    }
}

.ie-hero-content p {
    margin: 0;
}

.ie-hero-subtext {
    padding-left: 10rem; /* 100px left padding */
    max-width: 54%; /* 54% of the content section width */
    font-size: 3rem; /* 30px */
    font-family: 'Zilla Slab', serif;
    font-weight: 500; /* Medium */
    line-height: 1; /* No gap between lines */
    color: var(--secondary);
}

.ie-hero-subtext p {
    margin: 0;
}

/* Hero Blocks (2 colored blocks below subtext) */
.ie-hero-blocks-wrapper {
    padding-top: 11.3rem; /* 113px gap from subtext */
    padding-left: 10rem; /* 100px left padding to align with heading */
}

.ie-hero-blocks-row {
    gap: 3.5rem; /* 35px gap between blocks */
    display: flex;
    flex-wrap: wrap;
}

.ie-hero-block {
    position: relative;
    padding: 4rem 4.4rem; /* 40px top/bottom, 44px left/right */
    border-radius: 1.2rem; /* 12px */
    width: 46rem; /* 460px */
    height: 30.1rem; /* 301px */
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.161); /* Match SVG shadow */
    overflow: hidden;
}

.ie-hero-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.7rem; /* 17px bottom bar */
    border-radius: 0 0 1.2rem 1.2rem;
}

.ie-hero-block-blue {
    background-color: #e3f0f4; /* Light blue from SVG */
}

.ie-hero-block-blue::after {
    background-color: #79b8cc; /* Darker blue for bottom strip */
}

.ie-hero-block-coral {
    background-color: var(--ie-color-light-coral);
}

.ie-hero-block-coral::after {
    background-color: #d26f5d; /* Darker coral for bottom strip */
}

.ie-hero-block-purple {
    background-color: #f0ebf5; /* Light purple */
}

.ie-hero-block-purple::after {
    background-color: #715397; /* Darker purple for bottom strip */
}

.ie-hero-block-yellow {
    background-color: #fdf5e6; /* Light yellow */
}

.ie-hero-block-yellow::after {
    background-color: #e0aa55; /* Darker yellow for bottom strip */
}

.ie-hero-block-content {
    font-family: 'Mulish', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 2.0rem; /* 20px */
    line-height: 1.43; /* ~40px line height */
    color: #4b4848; /* Dark gray from SVG */
    flex: 1;
    padding-bottom: 2rem; /* Space above icon */
}

.ie-hero-block-content p {
    margin: 0;
}

.ie-hero-block-icon {
    position: absolute;
    bottom: 3rem; /* 30px from bottom (above the bar) */
    right: 4rem; /* 40px from right */
    width: 6.4rem; /* ~64px icon size */
    height: 6.4rem;
}

.ie-hero-block-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Section Heading Component */
.ie-section-heading {
    font-size: 4rem; /* 40px */
    font-family: 'Zilla Slab', serif;
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
}

.ie-heading-primary {
    color: var(--ie-color-primary-dark);
}

.ie-heading-accent {
    color: var(--ie-color-accent-coral);
}

/* Introduction Section Content */
.introduction-content {
    font-size: 2.2rem; /* 24px */
    font-family: 'Mulish', sans-serif;
    line-height: 1.6;
    margin-top: 5rem; /* 50px gap from heading */
}

.introduction-content p {
    margin-bottom: 1.5rem; /* 15px between paragraphs */
}

.introduction-content p:last-child {
    margin-bottom: 0;
}

/* Quote Block */
.ie-quote-block {
    background: rgba(210, 111, 93, 0.198); /* Light coral with 0.198 opacity */
    border-radius: 1.2rem; /* 12px */
    padding: 9rem 5rem 5rem 5.5rem; /* 90px top, 55px left, 50px right/bottom */
    position: relative;
    flex-basis: 36%;
    height: 30rem; /* Fixed 300px height to match video */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ie-quote-icon {
    position: absolute;
    top: 4rem; /* 40px from top */
    left: 5.5rem; /* 55px from left */
    width: 4.9rem; /* 49.15px from SVG */
    height: 4.9rem; /* 49.274px from SVG */
}

.ie-quote-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ie-quote-text {
    font-family: 'Mulish', sans-serif;
    font-size: 2rem; /* 20px */
    font-weight: 700; /* Bold */
    line-height: 1.25; /* Line height for readability */
    color: var(--ie-color-primary-dark); /* #33357d */
}

.ie-quote-text p {
    margin: 0;
    text-indent: 2rem; /* Move first line to the right */
}

/* Introduction Media Section (Image + Video) */
.ie-intro-media-wrapper {
    display: flex;
    gap: 5rem; /* 50px gap between items */
    align-items: stretch;
}

.ie-media-item {
    height: 30rem; /* 300px */
    min-height: 30rem;
    max-height: 30rem;
    border-radius: 1.2rem; /* 12px */
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}

.ie-media-image {
    max-width: 52.1rem; /* 521px max */
    flex-basis: 38%;
    height: 30rem;
}

.ie-media-video {
    max-width: 85.3rem; /* 853px max */
    flex-basis: 60%;
    height: 30rem;
}

.ie-media-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ie-media-video-container {
    position: relative;
    cursor: pointer;
}

.ie-media-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ie-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3rem;
    transition: background 0.3s ease;
}

.ie-media-video-container:hover .ie-video-overlay {
    background: transparent;
}

.ie-video-text {
    color: white;
    text-align: left;
    width: 60%; /* Increased width for title and author */
    margin-left: 40%; /* Start from 40% to accommodate wider text */
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.ie-video-title {
    font-family: 'Zilla Slab', serif;
    font-size: 2.6rem; /* 26px */
    font-weight: 600;
    line-height: 1.3;
    padding: 0;
    color: white;
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
    overflow-wrap: break-word;
}

.ie-video-author {
    font-family: 'Mulish', sans-serif;
    font-size: 1.8rem; /* 18px */
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: white;
    opacity: 0.9;
}

.ie-video-play-btn {
    position: absolute;
    bottom: 3rem;
    right: 4rem; /* 40px from right */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease;
}

.ie-video-play-btn:hover {
    transform: scale(1.1);
}

.ie-video-play-btn svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.ie-video-play-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.ie-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.ie-video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive adjustments for video and quote blocks */
@media (max-width: 768px) {
    .ie-intro-media-wrapper {
        flex-direction: column;
        gap: 3rem;
    }

    .ie-quote-block {
        flex-basis: 100%;
        width: 100%;
        height: auto;
        min-height: 25rem;
        padding: 6rem 3rem 3rem 3rem;
    }

    .ie-quote-icon {
        top: 2rem;
        left: 3rem;
        width: 4rem;
        height: 4rem;
    }

    .ie-quote-text {
        font-size: 1.8rem;
    }

    .ie-quote-text p {
        text-indent: 1.5rem; /* Move first line to the right on mobile */
    }

    .ie-media-video {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        height: 30rem;
    }

    .ie-media-item {
        position: relative;
        height: 30rem;
    }

    .ie-media-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    .ie-video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 3rem;
    }

    .ie-video-text {
        width: calc(100% - 6rem);
        margin-left: 0;
        padding: 0;
    }

    .ie-video-text {
        width: 45%; /* Reduce width to move text more to the right */
        margin-left: 55%; /* Push text more to the right */
    }

    .ie-video-title {
        font-size: 2.2rem;
    }

    .ie-video-author {
        font-size: 1.6rem;
    }

    .ie-video-play-btn {
        position: absolute;
        bottom: 2rem;
        right: 2rem;
    }
}

.ie-intro-media-text {
    margin-top: 3rem; /* 30px gap from media */
    font-size: 2.2rem; /* 24px */
    font-family: 'Mulish', sans-serif;
    line-height: 1.6;
}

.ie-intro-media-text p {
    margin-bottom: 1.5rem; /* 15px between paragraphs */
}

.ie-intro-media-text p:last-child {
    margin-bottom: 0;
}

/* How IE Works Section */
.ie-framework-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    margin: 0 auto;
    min-height: auto;
    padding-bottom: 5rem;
    gap: 6%;
}

.ie-framework-diagram {
    position: relative;
    z-index: 1;
    width: 62%; /* Reduced from 67% to 55% */
    height: auto;
    flex-shrink: 0;
}

.ie-framework-diagram img {
    width: 100%;
    height: auto; /* Auto height maintains aspect ratio */
    object-fit: contain;
    display: block;
}

.ie-aspects-overlay {
    position: relative; /* Changed from absolute */
    z-index: 2;
    width: 35%; /* Increased from 25% to 35% */
    padding-top: 4rem;
    flex-shrink: 0;
}

.ie-aspects-overlay .aspect-item {
    background: transparent;
    padding: 0;
    margin-bottom: 3rem;
}

.ie-aspects-overlay .aspect-item:last-child {
    margin-bottom: 0;
}

.ie-aspects-overlay .aspect-item-title {
    font-size: 2.2rem; /* 24px */
    color: var(--ie-color-primary-dark);
    margin-bottom: 1rem;
}

.ie-aspects-overlay .aspect-item-content {
    font-size: 1.8rem; /* 20px */
    line-height: 1.6;
    color: #707070;
    margin-left: 0 !important;
    font-family: 'Mulish', sans-serif;
}

.ie-aspects-overlay .aspect-item-icon {
    width: 4rem !important;
    height: 4rem !important;
}

/* Client Logos Section */
.client-logos-scroll {
    scrollbar-width: thin;
}

.client-logos-container {
    width: max-content;
    gap: 3rem;
}

.client-logo-item {
    min-width: 150px;
    max-width: 200px;
    height: 80px;
    flex: 0 0 auto;
}

.client-logo-img {
    max-height: 50px;
    object-fit: contain;
}

/* Principle Cards */
.principle-card {
    background-color: var(--ie-color-light-blue);
    height: var(--ie-principle-card-height);
    width: var(--ie-principle-card-width);
    max-width: 100%; /* Ensure cards don't exceed container */
}

.principle-card-title {
    color: var(--ie-color-primary-dark);
    font-size: 2.2rem !important;
    font-family: 'Zilla Slab', serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.principle-card-icon {
    max-height: 5rem;
    max-width: 5rem;
    width: auto;
    height: auto;
}

.principle-cards-wrapper {
    max-width: 95rem;
}

.border-bottom-custom {
    border-bottom: 1rem solid !important;
}

/* Info Card */
.ie-info-card {
    background-color: #6c5493;
    min-height: 25rem;
    position: relative;
}

.ie-info-card-bg {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 40%;
    opacity: 0.3;
    z-index: 1;
}

.ie-info-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ie-info-card-content {
    z-index: 2;
}

.ie-info-card-header {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    color: white;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ie-info-card-title {
    font-family: "zilla_slabbold";
    font-weight: 700;
    color: white;
    font-size: 2.2rem;
    line-height: 1.3;
}

.ie-info-card-title .ie-heading-accent {
    color: var(--ie-color-accent-coral);
}

.ie-info-card-brief {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    color: white;
    font-size: 1.8rem;
    line-height: 1.6;
}

.ie-info-card-brief p {
    margin-bottom: 1rem;
}

.ie-info-card-brief p:last-child {
    margin-bottom: 0;
}

.ie-info-card-button {
    z-index: 3;
}

/* Mobile adjustments for info card */
@media (max-width: 768px) {
    .ie-info-card-content {
        padding-right: 8rem; /* Space for button on mobile */
        padding-bottom: 2rem;
    }
    
    .ie-info-card-brief {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limit to 3 lines */
        line-clamp: 3; /* Standard property */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 9.6rem; /* 3 lines at 1.6 line-height * 1.8rem font-size */
    }
    
    .ie-info-card-button {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        padding: 0;
    }
}

/* Aspect Items */
.aspect-item-icon {
    width: var(--ie-aspect-icon-width);
    height: var(--ie-aspect-icon-height);
}

.aspect-item-icon img {
    max-height: 3rem;
    max-width: 3.5rem;
    width: auto;
}

.aspect-item-title {
    color: var(--ie-color-primary-dark);
}

/* Mulish font class */
.mulish {
    font-family: 'Mulish', sans-serif !important;
}

/* Responsive adjustments */
@media (max-width: 1600px) {
    .ie-hero-heading {
        font-size: 7.5rem;
        padding-left: 7rem;
    }

    .ie-hero-content {
        font-size: 4rem;
        padding-left: 7rem;
    }

    .ie-hero-subtext {
        font-size: 2.5rem;
        padding-left: 7rem;
        max-width: 50%;
    }

    .ie-hero-blocks-wrapper {
        padding-left: 7rem;
        padding-top: 9rem;
    }

    .ie-hero-block {
        width: 38rem;
        height: 26rem;
        padding: 3rem 3.5rem;
    }

    .ie-hero-block-content {
        font-size: 2.0rem;
        padding-bottom: 1.5rem;
    }

    .ie-hero-block-icon {
        width: 5.5rem;
        height: 5.5rem;
        bottom: 2.5rem;
        right: 3.5rem;
    }

    .ie-hero-section {
        min-height: 70rem;
    }
}

@media (max-width: 1400px) {
    .ie-hero-heading {
        font-size: 6.5rem;
        padding-left: 5rem;
    }

    .ie-hero-content {
        font-size: 3.5rem;
        padding-left: 5rem;
    }

    .ie-hero-subtext {
        font-size: 2.2rem;
        padding-left: 5rem;
        max-width: 55%;
    }

    .ie-hero-blocks-wrapper {
        padding-left: 5rem;
        padding-top: 8rem;
    }

    .ie-hero-block {
        width: 35rem;
        height: 24rem;
        padding: 2.5rem 3rem;
    }

    .ie-hero-block-content {
        font-size: 2.0rem;
        line-height: 1.4;
        padding-bottom: 1.2rem;
    }

    .ie-hero-block-icon {
        width: 5rem;
        height: 5rem;
        bottom: 2.2rem;
        right: 3rem;
    }

    .ie-hero-section {
        min-height: 65rem;
    }
}

@media (max-width: 1200px) {
    .ie-hero-heading {
        font-size: 5.5rem;
        padding-left: 4rem;
    }

    .ie-hero-content {
        font-size: 3rem;
        padding-left: 4rem;
    }

    .ie-hero-subtext {
        font-size: 2rem;
        padding-left: 4rem;
        max-width: 60%;
    }

    .ie-hero-blocks-wrapper {
        padding-left: 4rem;
        padding-top: 7rem;
    }

    .ie-hero-block {
        width: 32rem;
        height: 22rem;
        padding: 2.2rem 2.5rem;
    }

    .ie-hero-block-content {
        font-size: 2rem;
        line-height: 1.35;
        padding-bottom: 1rem;
    }

    .ie-hero-block-icon {
        width: 4.5rem;
        height: 4.5rem;
        bottom: 2rem;
        right: 2.5rem;
    }

    .ie-hero-section {
        min-height: 60rem;
    }

    /* Introduction media section */
    .ie-intro-media-wrapper {
        gap: 3rem;
    }

    .ie-media-image {
        width: 40rem;
    }

    .ie-media-video {
        width: 65rem;
    }
}

@media (max-width: 992px) {
    .ie-hero-section {
        background-size: 50% auto; /* Make background smaller on tablet */
        background-position: right top;
        min-height: 70rem;
    }

    .ie-hero-content-col {
        max-width: 100%; /* Allow content to use full width */
    }

    .ie-hero-heading {
        font-size: 6rem;
        padding-left: 3rem;
        white-space: normal;
    }

    .ie-hero-content {
        font-size: 3.5rem;
        padding-left: 3rem;
    }

    .ie-hero-subtext {
        font-size: 2.2rem;
        padding-left: 3rem;
        max-width: 70%;
    }

    .ie-hero-blocks-wrapper {
        padding-left: 3rem;
        padding-top: 5rem;
    }

    .ie-hero-block {
        width: 100%;
        max-width: 46rem;
        height: auto;
        min-height: 25rem;
        padding: 3rem;
    }

    .ie-hero-block-content {
        font-size: 2.0rem;
    }

    .ie-hero-block-icon {
        width: 5rem;
        height: 5rem;
        bottom: 2.5rem;
        right: 3rem;
    }

    .ie-hero-blocks-row {
        flex-direction: column;
        gap: 3rem;
    }

    /* Introduction media section - stack vertically on tablet */
    .ie-intro-media-wrapper {
        flex-direction: column;
        gap: 3rem;
    }

    .ie-media-image,
    .ie-media-video {
        width: 100%;
        max-width: 100%;
        height: 30rem;
        min-height: 30rem;
        max-height: 30rem;
    }

    .ie-media-item {
        height: 30rem;
        min-height: 30rem;
        max-height: 30rem;
    }

    /* How IE Works section - stack vertically on tablet */
    .ie-framework-wrapper {
        flex-direction: column;
        gap: 3rem;
    }

    .ie-aspects-overlay,
    .ie-framework-diagram {
        width: 100%;
    }

    /* Team cards - single column on tablet */
    .ie-team-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem;
    }

    .ie-team-card {
        height: auto;
        min-height: 50rem;
    }

    .ie-team-card-top {
        height: auto;
        min-height: 25rem;
    }

    .ie-team-card-title {
        font-size: 2.8rem;
        padding-right: 4rem;
    }

    .ie-team-card-button-icon {
        width: 5rem;
        height: 5rem;
    }

    .ie-team-card-bottom {
        height: auto;
        min-height: 20rem;
    }

    .ie-team-card-bio {
        font-size: 1.6rem;
    }

    .ie-team-card-image-wrapper {
        top: 13.1rem;
        right: 3rem;
        transform: none;
        width: 18rem;
        height: 18rem;
    }
}

@media (max-width: 768px) {
    .ie-hero-section {
        background-size: 40% auto; /* Smaller background on mobile */
        background-position: right top;
        min-height: 60rem;
    }

    .ie-hero-heading {
        font-size: 5rem;
        padding-left: 2rem;
    }

    .ie-hero-content {
        font-size: 3rem;
        padding-left: 2rem;
    }

    .ie-hero-subtext {
        font-size: 2rem;
        padding-left: 2rem;
        max-width: 90%;
    }

    .ie-hero-blocks-wrapper {
        padding-left: 2rem;
    }

    .ie-hero-block {
        padding: 2.5rem;
    }

    .client-logo-item {
        min-width: 120px !important;
        max-width: 150px !important;
        height: 60px !important;
    }

    .client-logo-img {
        max-height: 40px !important;
    }

    .client-logos-container {
        gap: 2rem !important;
    }

    .principle-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 16rem;
    }

    /* Introduction media section - keep same height on mobile */
    .ie-media-item {
        height: 30rem;
        min-height: 30rem;
        max-height: 30rem;
    }

    .ie-media-image,
    .ie-media-video {
        height: 30rem;
        min-height: 30rem;
        max-height: 30rem;
    }
}

/* Team Cards Section */
.ie-team-section {
    padding: 5rem 0;
}

.ie-team-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin-top: 5rem;
}

.ie-team-card {
    background: white;
    border-radius: 1.2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 59.8rem;
    box-shadow: 0px 5px 25px rgba(82, 87, 93, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.ie-team-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0px 8px 30px rgba(82, 87, 93, 0.12);
}

/* Top section - 50% height with rotating colors */
.ie-team-card-top {
    height: 29.9rem;
    flex-shrink: 0;
}

/* Default coral color */
.ie-team-card:nth-child(4n+1) .ie-team-card-top {
    background: var(--tertiary); /* Coral #D26F5D */
}

/* Blue for 2nd, 6th, 10th... cards */
.ie-team-card:nth-child(4n+2) .ie-team-card-top {
    background: var(--sky-blue); /* Light blue #79B8CC */
}

/* Purple for 3rd, 7th, 11th... cards */
.ie-team-card:nth-child(4n+3) .ie-team-card-top {
    background: var(--secondary); /* Purple #715397 */
}

/* Golden for 4th, 8th, 12th... cards */
.ie-team-card:nth-child(4n) .ie-team-card-top {
    background: var(--quaternary); /* Golden #E0AA55 */
}

.ie-team-card-icon {
    position: absolute;
    top: 3rem;
    left: 3rem;
    width: 5rem;
    height: 5rem;
}

.ie-team-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ie-team-card-title {
    font-family: 'Zilla Slab', serif;
    font-size: 3.6rem;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    padding-right: 8rem;
}

.ie-team-card-button-icon {
    width: 6rem;
    height: 6rem;
}

.ie-team-card-button-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* White bottom section - 50% height */
.ie-team-card-bottom {
    background: white;
    height: 29.9rem;
    flex-shrink: 0;
}

/* Custom padding utility for team card bottom section */
.ie-team-card-bottom.pt-6 {
    padding-top: 6rem !important;
}

@media (min-width: 768px) {
    .ie-team-card-bottom.pt-md-6 {
        padding-top: 6rem !important;
    }
}

/* Custom padding utility for team card bottom section */
.ie-team-card-bottom.pt-6 {
    padding-top: 6rem !important;
}

@media (min-width: 768px) {
    .ie-team-card-bottom.pt-md-6 {
        padding-top: 6rem !important;
    }
}

.ie-team-card-name {
    font-family: 'Mulish', sans-serif;
    font-size: 2.0rem;
    font-weight: 600;
    color: #33357D;
    line-height: 1.3;
}

.ie-team-card-bio {
    font-family: 'Mulish', sans-serif;
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--neutral-text);
}

.ie-team-card-bio p {
    margin-bottom: 1rem;
}

.ie-team-card-bio p:last-child {
    margin-bottom: 0;
}

/* Profile image overlapping both sections - 70% in coral, 30% in white */
.ie-team-card-image-wrapper {
    position: absolute;
    top: 13.1rem;
    right: 3rem;
    width: 24rem;
    height: 24rem;
    z-index: 10;
}

.ie-team-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 0.5rem solid white;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 576px) {
    .aspect-item-icon {
        width: 3rem;
        height: 2.5rem;
    }

    .aspect-item-icon img {
        max-height: 2.5rem;
        max-width: 3rem;
    }
}

/* Footer CTA - IE page specific styling */
.page-template-intelligent-engineering .join-us-card-container .write-to-us-card {
    margin: 0 10.8rem;
}

.page-template-intelligent-engineering .join-us-card-container .write-to-us-card .core-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
}

.page-template-intelligent-engineering .join-us-card-container .desc-text {
    max-width: 100%;
}

/* Principle Cards - 3 in first row, 2 centered in second row */
.ie-principle-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem 5%;
    justify-content: center;
}

.ie-principle-card-col {
    flex: 0 0 30%;
    max-width: 30%;
}

.ie-principle-cards-wrapper .principle-card {
    height: 23.6rem;
    width: 100%;
    background: var(--ie-color-light-coral) !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    border-bottom: 1.65rem solid !important;
}

/* Rotating bottom border colors for principle cards */
.ie-principle-cards-wrapper .ie-principle-card-col:nth-child(1) .principle-card {
    border-bottom-color: var(--tertiary) !important; /* Red/Coral */
}

.ie-principle-cards-wrapper .ie-principle-card-col:nth-child(2) .principle-card {
    border-bottom-color: var(--secondary) !important; /* Purple */
}

.ie-principle-cards-wrapper .ie-principle-card-col:nth-child(3) .principle-card {
    border-bottom-color: var(--quaternary) !important; /* Golden */
}

.ie-principle-cards-wrapper .ie-principle-card-col:nth-child(4) .principle-card {
    border-bottom-color: var(--sky-blue) !important; /* Sky Blue */
}

.ie-principle-cards-wrapper .ie-principle-card-col:nth-child(5) .principle-card {
    border-bottom-color: var(--primary) !important; /* Dark Blue */
}

.ie-principle-cards-wrapper .principle-card-content {
    font-size: 1.8rem !important;
    line-height: 1.6 !important;
    color: var(--neutral-text) !important;
    font-family: 'Mulish', sans-serif !important;
}

@media (max-width: 991px) {
    .ie-principle-card-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ie-principle-cards-wrapper .principle-card {
        height: auto;
    }
}

/* Learn More Section */
.ie-learn-more-section {
    padding: 3rem 0;
}

.ie-learn-more-link {
    transition: opacity 0.3s ease;
}

.ie-learn-more-link:hover {
    opacity: 0.8;
}

.ie-learn-more-text {
    color: var(--ie-color-accent-coral);
    font-size: 2rem;
    font-family: 'MulishBold', sans-serif !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.ie-learn-more-button-image {
    max-height: 3rem;
    width: auto;
    transition: transform 0.3s ease;
}

.ie-learn-more-link:hover .ie-learn-more-button-image {
    transform: translateX(0.25rem);
}

@media (max-width: 768px) {
    /* Team cards - ensure single column on mobile */
    .ie-team-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .ie-team-card {
        height: auto;
        min-height: 45rem;
    }

    .ie-team-card-top {
        height: auto;
        min-height: 20rem;
    }

    .ie-team-card-title {
        font-size: 2.4rem;
        padding-right: 2rem;
    }

    .ie-team-card-button-icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .ie-team-card-bottom {
        height: auto;
        min-height: 18rem;
    }

    .ie-team-card-name {
        font-size: 1.8rem;
    }

    .ie-team-card-bio {
        font-size: 1.5rem;
    }

    .ie-team-card-image-wrapper {
        top: 13.1rem;
        right: 2rem;
        transform: none;
        width: 15rem;
        height: 15rem;
    }

    .ie-learn-more-text {
        font-size: 1.5rem;
        margin-right: 1rem;
    }

    .ie-learn-more-button-image {
        max-height: 2.5rem;
    }
}

/* Footer CTA - match hero heading left/right padding */
.page-template-intelligent-engineering .join-us-card-container {
    padding: 0 10rem 8rem;
    margin: 0;
}

.page-template-intelligent-engineering .join-us-card-container .write-to-us-card {
    padding: 0;
    margin: 0;
}

.page-template-intelligent-engineering .join-us-card-container .write-to-us-card .core-text {
    padding: 0;
    margin: 0;
    width: 75%;
}

.page-template-intelligent-engineering .join-us-card-container .desc-text {
    font-size: 2.2rem;
}

.page-template-intelligent-engineering .join-us-card-container .write-to-us-card .core-text .mailto-text {
    font-size: 2.2rem;
}

/* Responsive footer padding to match hero heading */
@media (max-width: 1400px) {
    .page-template-intelligent-engineering .join-us-card-container {
        padding: 0 7rem 8rem;
    }
}

@media (max-width: 1200px) {
    .page-template-intelligent-engineering .join-us-card-container {
        padding: 0 5rem 8rem;
    }
}

@media (max-width: 992px) {
    .page-template-intelligent-engineering .join-us-card-container {
        padding: 0 4rem 8rem;
    }
}

@media (max-width: 768px) {
    .page-template-intelligent-engineering .join-us-card-container {
        padding: 0 3rem 8rem;
    }
}

@media (max-width: 576px) {
    .page-template-intelligent-engineering .join-us-card-container {
        padding: 0 2rem 8rem;
    }
}