/* =========================================
   ABOUT HERO
========================================= */
.about-hero-section {
    position: relative;
    padding-block: 60px;
    background-image: url('../images/about-hero-bg.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    /* border-top: 2px solid var(--dts-secondary); */
    /* border-bottom: 4px solid #1E4FD8; */
    overflow: hidden;
}

.about-hero-inner {
    position: relative;
    z-index: 1;
}

.about-hero-content {
    /* max-width: 560px; */
}

.about-hero-title {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    font-size: 4.375rem;
    line-height: 69px;
    color: var(--dts-white-color);
    margin-bottom: 1.75rem;
}

.about-hero-title .highlight {
    color: var(--dts-secondary);
}

.about-hero-buttons .dts-btn {
    font-size: 18px;
    padding: 12px 28px;
    font-weight: 600;
    margin-top: 25px;
    display: inline-block;
}
.about-story-intro {
    grid-area: intro;
    max-width: 100%;
    margin: 0;
    text-align: left;
    font-size: 24px;
    font-weight: 400;
    line-height: 35px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .about-hero-title {
        font-size: 2.1rem;
    }
}

@media (max-width: 768px) {
    .about-hero-section {
        padding-block: 40px;
        background-position: 75% center;
    }

    .about-hero-title {
        font-size: 3rem; /* 48px — standard mobile h1 */
        line-height: 1.2;
        margin-bottom: 1.25rem;
    }

    .about-hero-content {
        max-width: 100%;
    }

    .about-hero-buttons .dts-btn {
        font-size: 14px; /* standard mobile button */
    }

    .about-story-intro {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .about-hero-title {
        font-size: 3rem; /* keep 48px standard mobile h1 across phone sizes */
    }

    .about-hero-buttons .dts-btn {
        /* width: 100%; */
        text-align: center;
    }
}



/* =========================================
   ABOUT STORY (Mission / Vision)
========================================= */
.about-story-section {
    position: relative;
    overflow: hidden;

    /* Replace this URL with your actual image */
    background-image: url('../images/aboutsec2frame.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 90px 0px;
}

.about-story-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
        "heading        mission-media"
        "intro          mission-media"
        "mission-text   vision-media"
        "vision-text    vision-media";
    column-gap: 6rem;
    row-gap: 1.75rem;
}


.about-story-heading {
    grid-area: heading;
    font-family: var(--dts-font-inter);
    font-weight: 600;
    font-size: 48px;
    line-height: 69px;
    /* color: var(--dts-primary); */
    color: #000000;
    align-self: end;
}

.about-story-heading .highlight {
    color: var(--dts-secondary);
}

.about-story-block--mission {
    grid-area: mission-text;
}

.about-story-block--vision {
    grid-area: vision-text;
}

.about-story-block__title {
    font-family: var(--dts-font-inter);
    font-weight: 600;
    font-size: 36px;
    line-height: 69px;
    /* color: var(--dts-primary);*/
    color: #000000; 
    margin-bottom: 0.75rem;
}

.about-story-block__text {
    font-size: 24px;
    line-height: 35px;
        font-weight: 400;

    color: var(--dts-text);
}

.about-story-media--mission {
    grid-area: mission-media;
}

.about-story-media--vision {
    grid-area: vision-media;
}

.about-story-media {
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
}

.about-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .about-story-inner {
        column-gap: 2.5rem;
    }

    .about-story-heading {
        font-size: 2rem;
    }
}

@media (max-width: 900px) {
    .about-story-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "intro"
            "mission-text"
            "mission-media"
            "vision-text"
            "vision-media";
        row-gap: 40px;
    }

    .about-story-media img {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .about-story-heading {
        font-size: 2.25rem; /* 36px — standard mobile h2 */
        line-height: 1.2;
    }

    .about-story-block__title {
        font-size: 1.25rem; /* 20px — standard mobile h3 */
        line-height: 1.3;
    }

    .about-story-block__text {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.6;
    }

    .about-story-media img {
        height: 180px;
    }
}

/* =========================================
   MEET THE TEAM
========================================= */
.team-section,
.why-career-section{
    padding:90px 0px;
} 
.team-header {
    max-width: 1113px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.team-title {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    color: #1A1A1A;
    font-size: 48px;
    line-height: 56px;
    margin-block: 0.75rem;
}

.team-title .highlight {
    color: var(--dts-secondary);
}

.team-desc {
    font-size: 24px;
    font-weight: 400;
    line-height: 29.25px;
    color: var(--dts-text);
}

.team-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.team-slider {
    flex: 1 1 auto;
    min-width: 0;
}

.team-slide {
    padding: 0 10px;
    box-sizing: border-box;
}

.team-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.team-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.25rem 1rem;
    background: linear-gradient(0deg, rgba(216,27,96,0.75) 0%, rgba(13,43,110,0.55) 60%, rgba(13,43,110,0) 100%);
    color: var(--dts-white-color);
    text-align: center;
}

.team-card__name {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    font-size: 40px;
    line-height: 56px;
    margin-bottom: 2px;
}

.team-card__role {
    font-size: 24px;
      font-weight: 400;
    line-height: 56px;
    opacity: 0.9;
}

/* ---- Arrow: filled pale-pink circle, no border (matches target) ---- */
.team-slider-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(216, 27, 96, 0.12);
    color: var(--dts-secondary);
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--dts-transition-effects);
}

.team-slider-arrow:hover {
    background: var(--dts-secondary);
    color: var(--dts-white-color);
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
    .team-header {
        margin-bottom: 1.75rem;
    }

    .team-title {
        font-size: 2.25rem; /* 36px — standard mobile h2 */
        line-height: 1.2;
    }

    .team-desc {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.5;
    }

    /* Name/role overlay text sized down for narrow slider cards —
       not one of the named h1–h3/p tiers, treated as a card title (h3)
       and a caption respectively; flag if you want a different size */
    .team-card__name {
        font-size: 1.25rem; /* 20px, matched to h3/card-title scale */
        line-height: 1.2;
    }

    .team-card__role {
        font-size: 0.875rem; /* 14px, caption-style under the name */
        line-height: 1.3;
    }

    .team-slider-wrap {
        gap: 0.5rem;
    }

    .team-slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
}

/* =========================================
   CAREERS / JOIN THE TEAM
========================================= */
.careers-section {
    position: relative;
    overflow: hidden;

    /* Override .dts-dark-background's image with the Figma gradient + pink glow */
    background:
        radial-gradient(ellipse 700px 500px at 78% 50%, rgba(216, 27, 96, 0.35) 0%, rgba(216, 27, 96, 0) 70%),
        linear-gradient(135deg, #001E40 0%, #001F63 100%);
    background-size: cover;
    background-repeat: no-repeat;
}
.careers-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.careers-content {
    flex: 1 1 55%;
    min-width: 0;
}

.careers-media {
    flex: 1 1 40%;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.careers-media__img {
    width: 100%;
    max-width: 744px;
    height: auto;
    display: block;
}

.careers-title {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: var(--dts-white-color);
    margin: 0.75rem 0 1.5rem;
}

.careers-title .highlight {
    color: var(--dts-secondary);
}

.careers-block {
    margin-bottom: 40px;
}

.careers-block:last-child {
    margin-bottom: 0;
}

.careers-block__title {
    font-family: var(--dts-font-inter);
    font-weight: 600;
    font-size:36px;
    line-height: 56px;
    color: var(--dts-secondary);
    margin-bottom: 0.6rem;
}

.careers-block__text {
    font-size: 24px;
    line-height: 29.25px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .careers-inner {
        gap: 2rem;
    }

    .careers-title {
        font-size: 2rem;
    }
}

@media (max-width: 900px) {
    .careers-inner {
        flex-direction: column-reverse;
    }

    .careers-content,
    .careers-media {
        flex: 1 1 100%;
        width: 100%;
    }

    .careers-media__img {
        max-width: 360px;
    }
}

@media (max-width: 600px) {
    .careers-title {
        font-size: 2.25rem; /* 36px — standard mobile h2 */
        line-height: 1.2;
    }

    .careers-block__title {
        font-size: 1.25rem; /* 20px — standard mobile h3 */
        line-height: 1.3;
    }

    .careers-block__text {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.5;
    }

    .careers-media__img {
        max-width: 280px;
    }
    .team-section,
.why-career-section{
    padding:60px 0px;
} 
}


/* =========================================
   WHY BUILD YOUR CAREER WITH US
========================================= */
.why-career-title {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    font-size: 48px;
    color: #1A1A1A;
    margin-bottom: 89px;
    line-height: 58px;
}

.why-career-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.why-career-card {
    position: relative;
    padding: 1.75rem;
    border: 1px solid #E5E7EF;
    border-radius: 17px;
    background: radial-gradient(180px 184px at 100% 0%, rgba(216, 27, 96, 0.18) 0%, rgba(216, 27, 96, 0) 75%);
    overflow: hidden;
}

.why-career-card__icon {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: var(--dts-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.why-career-card__icon img {
    width: 58px;
    height: 58px;
    filter: brightness(0) invert(1);
}

.why-career-card__title {
    font-family: var(--dts-font-inter);
    font-weight: 600;
    font-size: 24px;
    line-height: 56px;
    color: #1A1A1A;
    margin-bottom: 20px;
}

.why-career-card__text {
    font-size: 24px;
    font-weight: 400;
    line-height: 29.25px;
    color: var(--dts-text);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .why-career-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 900px) {
    .why-career-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .why-career-title {
        font-size: 2.25rem; /* 36px — standard mobile h2 */
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .why-career-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .why-career-card {
        padding: 1.5rem;
    }

    .why-career-card__title {
        font-size: 1.25rem; /* 20px — standard mobile h3 */
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .why-career-card__text {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.5;
    }
}


/* =========================================
   JOIN THE TEAM CTA
========================================= */
.join-cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    background:
        radial-gradient(ellipse 500px 400px at 85% 60%, rgba(216, 27, 96, 0.45) 0%, rgba(216, 27, 96, 0) 70%),
        linear-gradient(120deg, #0B1B3A 0%, #0A0A14 55%, #150818 100%);
}

.join-cta-title {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    color: var(--dts-white-color);
    margin-bottom: 30px;
}

.join-cta-text {
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    font-weight: 400;
    max-width: 719px;
    margin-inline: auto;
    margin-bottom: 30px;
}

.join-cta-email {
    display: inline-block;
    font-family: var(--dts-font-inter);
    font-weight: 600;
        line-height: 29.25px;
    font-size: 24px;
    
    margin-bottom: 1.75rem;
}


.join-cta-email .email-label {
    color: #ffffff;
}

.join-cta-email .email-link {
    color: var(--dts-secondary);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.join-cta-email .email-link:hover {
    opacity: 0.8;
}

.join-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.join-cta-buttons .dts-btn-secondary {
    color: var(--dts-white-color);
    border-color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    line-height: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .join-cta-card {
        padding: 2.25rem 1.5rem;
    }

    .join-cta-title {
        font-size: 2.25rem; /* 36px — standard mobile h2 */
        line-height: 1.2;
    }

    .join-cta-text {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.5;
    }

    .join-cta-email {
        font-size: 1rem; /* 16px, matched to mobile p scale */
        line-height: 1.4;
    }

    .join-cta-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .join-cta-buttons .dts-btn {
        width: 100%;
        text-align: center;
    }

    .join-cta-buttons .dts-btn-secondary {
        font-size: 14px; /* standard mobile button */
    }
}

@media (max-width: 480px) {
    .join-cta-card {
        padding: 1.75rem 1.25rem;
        border-radius: 18px;
    }

    .join-cta-title {
        font-size: 2.25rem; /* keep 36px standard mobile h2 */
    }
}


/* =========================================
   TESTIMONIALS HEADER (About page only)
========================================= */
.testimonials-header {
    margin-bottom: 2rem;
}

.testimonials-title {
    font-family: var(--dts-font-inter);
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    /* color: #1A1A1A; */
    color: #000000 !important;
    margin: 0px 0 26px;
}

.testimonials-title .highlight {
    color: var(--dts-secondary);
}

.testimonials-desc {
    font-size: 24px;
    color: var(--dts-text);
    max-width: 946px;
    font-weight: 400;
    line-height: 29.25px;
    margin: 0px auto 66px;

}

@media (max-width: 768px) {
    .testimonials-title {
        font-size: 2.25rem; /* 36px — standard mobile h2 */
        line-height: 1.2;
    }

    .testimonials-desc {
        font-size: 1rem; /* 16px — standard mobile p */
        line-height: 1.5;
        margin: 0px auto 32px;
    }
}