/* ============================================
   CRE Academy — Responsive overrides
   Loaded after style.css
============================================ */

@media (max-width: 1400px) {

    .head_para {
        font-size: 16px;
    }


    /* keep the decorative glass shape off the last core card's text */
    .intro__cta {
        margin-top: 183px;
    }



    .core__element {
        width: 230px;
        right: -150px;
    }
    .core_card__item {
        padding: 25px 28px 25px;
    }
    .core_card__desc {
        font-size: 14px;
    }
    .core_card__name {
        font-size: 18px;
    }



    .roles__foot {
        gap: 20px;
        margin-top: 40px;
        flex-direction: column;
        align-items: flex-start;
    }
    .roles__note {
        margin: 0;
        max-width: 738px;
    }
    .step_pill {
        font-size: 14px;
    }
}

@media (max-width: 1200px) {
    .core__element {
        display: none;
    }

    .intro__cta {
        margin-top: 138px;
    }

    .world_card__head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* horizontal roles accordion: slimmer closed panels down to the 980px stack breakpoint */
@media (min-width: 980.02px) and (max-width: 1200px) {
    .roles_panel {
        flex-basis: 80px;
    }

    .roles_panel--open {
        flex-basis: calc(100% - 240px);
    }

    .roles_panel__media {
    min-width: 240px;
    }
}

/* recognition swap: tighter behind-image offset in the 992–1024px band */
@media (min-width: 992px) and (max-width: 1024px) {
    .recog__img--main.is-behind {
        z-index: 0;
        transform: translate(20px, 0px) rotate(2deg) scale(.94);
        opacity: .75;
    }
}

@media (max-width: 980px) {
    /* mobile header always uses the footer logo */
    .cre_navbar .cre_navbar__logo img:not(.cre_navbar__logo--scrolled) {
        display: none;
    }

    .cre_navbar .cre_navbar__logo .cre_navbar__logo--scrolled {
        display: block;
        filter: none;
        height: 55px;
        top: -27px;
    }

    .corner-shape {
        border-radius: 20px;
        corner-shape: squircle;
    }

    .menu-toggle {
        display: flex;
    }

    .cre_navbar .cre_btn--sm {
        display: none;
    }

    /* mobile header: flatten the curved navbar into a simple bar */
    .cre_navbar {
        position: fixed;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 80px;
        padding: 0 20px;
        clip-path: none;
        background: linear-gradient(90deg, rgba(13, 42, 94, .92) 0%, rgba(8, 22, 49, .92) 100%);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 100;
    }

    .cre_navbar__bg {
        display: none;
    }

    .cre_navbar__logo img {
        height: 50px;
    }

    .cre_navbar__links {
        display: none;
    }

    .about_hero {
        padding: 100px 0 90px;
    }

    .about_hero__title {
        font-size: 30px;
        line-height: normal;
    }

    .contact_hero {
        padding: 120px 0 100px;
    }

    .about_hero__media .about_hero__img {
        height: 320px;
        object-fit: cover;
    }

    .hero__element {
        width: 240px;
        left: -70px;
    }

    .core_card {
        flex-direction: column;
    }

    .core_card__item + .core_card__item {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .core__element {
        width: 110px;
        right: -40px;
    }

    .practical__list {
        margin-left: 0;
    }

    .practice__step + .practice__step::before {
        right: calc(100% + 3px);
        width: 5px;
    }

    .practice__step {
        padding: 8px 10px;
        font-size: 13px;
    }

    .vm_card {
        padding: 30px 20px;
    }

    .world__grid {
        grid-template-columns: 1fr 1fr;
        margin-top: 15px;
    }

    .world_card__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .world_card .sec_text {
        margin-top: 5px;
    }

    .world_card {
        padding: 30px 25px 30px;
    }

    .world_card--lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .roles__acc {
        display: flex;
        flex-direction: column;
        height: auto;
        border-radius: 20px;
    }

    .roles_panel {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 66px;
        padding: 0 24px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .roles_panel__num {
        font-size: 18px;
    }

    .roles_panel__label {
        font-size: 16px;
    }

    .roles_panel:first-child {
        border-top: 0;
    }

    .roles_panel--open {
        flex-basis: 540px;
    }

    .roles_panel__label {
        position: static;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .roles_panel__body {
        flex-direction: column;
        padding: 20px 15px 26px;
        min-width: auto;
    }

    .roles_panel__info {
        min-width: 0;
        padding: 10px;
    }

    .roles_panel__head img {
        width: 40px;
    }

    .roles_chips {
        margin-top: 26px;
    }

    .roles_panel__media {
        width: 100%;
        min-width: 0;
        flex: 1;
    }

    .roles__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .roles__sub {
        margin: 40px 15px 15px;
        font-size: 18px;
    }

    .roles__note {
        margin-left: 0;
        max-width: none;
    }

    .team_card {
        flex-basis: 32vw;
        width: 32vw;
    }

    .vm {
        background-attachment: scroll;
    }

    .vm__grid {
        grid-template-columns: 1fr;
    }

    .fac_card {
        flex-basis: calc((100% - 20px) / 2);
    }

    .scope_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .scope_skills__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .track_card {
        flex-direction: column;
    }

    .track_card__media {
        flex-basis: auto;
        height: 360px;
        order: -1;
    }

    .placed__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .track_card__body {
        flex-direction: column;
        padding: 45px 15px;
    }

    .track__list {
        flex-direction: column;
    }

    .track_card__cta {
        margin-top: 60px;
        align-self: flex-start;
    }
}

/* taller role images on tablets (768–992px): open panel grows, media gets the extra room */
@media (min-width: 768px) and (max-width: 991.98px) {
    .roles_panel--open {
        flex-basis: 660px;
    }

    .roles_panel__media {
        min-height: 35\\\\\\0px;
    }
}

@media (max-width: 767px) {
    .footer {
        background-image: url('../images/footer-bg-respo.webp');
        background-size: cover;
    }

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

    .journey__grid {
        margin-top: 15px;
    }

    .journey_card {
        padding: 30px 20px 36px;
    }

    .journey__grid > div:nth-child(even) .journey_card {
        transform: none;
    }

    .footer__blur {
        margin: 15px;
        backdrop-filter: blur(46px);
        -webkit-backdrop-filter: blur(10px);
        background: rgb(0 0 0 / 64%);
        padding: 50px 15px 15px 10px;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    /* text testimonials: one card per slide, natural height, centered */
    .testi__line .testi__cards {
        display: flex;
        align-items: stretch;
        justify-content: center;
        height: 100%;
    }

    .testi__line .testi_card {
        width: calc(100% - 32px);
        max-width: 420px;
        height: 100%;
        margin: 0 auto;
    }

    /* video testimonial: center in the slide on mobile */
    .testi__vid .testi_slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .testi__vid .testi__video {
        width: calc(100% - 32px);
        max-width: 420px;
    }

    .beyond_card__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 15px;
    }

    .track_card__title {
        font-size: 25px;
    }
}

@media (max-width: 680px) {
    .team_card {
        flex-basis: 46vw;
        width: 46vw;
    }

    .testi__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .testi__video {
        min-height: 500px;
    }
}

@media (max-width: 568px) {
    /* step pills — drop the dashed connector + left offset on stacked pills */
    .step_pill + .step_pill {
        margin-left: 0;
    }

    .step_pill + .step_pill::before {
        display: none;
    }
}

@media (max-width: 556px) {
    .contact__form {
        padding: 40px 20px;
    }
}

@media (max-width: 560px) {
    .scope_cards {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .scope_skills__list {
        grid-template-columns: repeat(2, 1fr);
    }
    /* .career__cards {
        grid-template-columns: 1fr;
    } */

    .fac_card {
        flex-basis: 100%;
    }

    .contact__row {
        flex-direction: column;
        gap: 0;
    }

    .contact__info {
        padding: 55px 20px;
    }

    .contact__info_title {
        font-size: 28px;
        max-width: 250px;
    }

    .contact__title {
        margin: 50px 0 20px;
    }

    .placed__grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 50px 0 60px;
    }

    .hero__content {
        padding-top: 160px;
    }

    .hero__actions {
        flex-direction: row;
    }

    .hero__element {
        width: 190px;
        left: -80px;
        bottom: -40px;
    }

    .whatsapp_tab {
        top: auto;
        bottom: 120px;
        transform: scale(.85);
        transform-origin: bottom right;
    }

    .whatsapp_tab span {
        font-size: 18px;
    }

    .intro__cta {
        margin-top: 36px;
    }

    .intro__steps {
        flex-direction: column;
        gap: 14px;
        margin-top: 0;
        align-items: flex-start;
    }
    
    .prog_hero__steps .intro__step {
        font-size: 14px;
    }
    
    .intro__step + .intro__step::before {
        display: none;
    }

    .intro__media {
        margin-top: 25px;
        height: 200px;
    }

    .scope_skills {
        padding: 25px 20px;
    }

    .prog_hero__actions {
        right: inherit;
        left: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .path_card {
        padding: 30px 26px 36px;
    }

    .paths__grid {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .path_card__ribbon {
        top: 25px;
        right: -60px;
        width: 190px;
        padding: 5px 0;
        font-size: 12px;
    }

    .path_card__title {
        font-size: 20px;
    }

    .paths__note {
        padding: 11px 10px;
        font-size: 12px;
        text-align: center;
        white-space: normal;
        max-width: 88%;
        width: 100%;
    }

    .practical__cta {
        margin-top: 40px;
    }

    .cta_card {
        padding: 70px 30px;
    }

    .cta__actions {
        flex-direction: column;
    }

    .world__grid {
        grid-template-columns: 1fr;
    }

    
    .roles__steps {
        align-items: flex-start;
        gap: 10px;
    }

    .scope_skill {
        padding: 15px;
        font-size: 15px;
    }

    .scope_skill i {
        font-size: 18px;
        width: 45px;
        height: 45px;
        line-height: 45px;
    }

    .syllabus_accordion {
        margin-top: 15px;
    }

    .roadmap__header {
        margin-bottom: 15px;
    }

}

/* video section — below lg, slick shows one video per view */
@media (max-width: 991.98px) {
    .recog .row > .col-lg-5 {
        order: 2;
    }

    .recog .row > .col-lg-6 {
        order: 1;
        margin-top: 0;
        margin-bottom: 40px;
    }

    .recog__media {
        max-width: none;
    }

    .recog__nav {
        max-width: none;
    }

    .intro__cta {
        margin-top: 40px;
    }

    .testi__vid {
        padding: 0;
    }

    .testi__line {
        border-left: 0;
        border-top: 1px solid var(--border-soft);
        padding: 0;
        padding-top: 40px;
    }

    .video__grid {
        margin-top: 10px;
    }

    .video__nav {
        display: flex;
    }
}

@media (max-width: 680px) {

    .video__play {
        width: 48px;
        height: 48px;
    }

    .video__play i {
        font-size: 15px;
    }

    .video_modal__close {
        top: -10px;
        right: -10px;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .hero__badge {
        padding: 6px 10px;
        font-size: 10px;
    }

    .cre_btn {
        gap: 8px;
        padding: 6px 6px 6px 12px;
        font-size: 14px;
    }

    .hero__actions {
        margin-top: 80px;
        gap: 12px;
    }

    .hero__subtitle {
        margin-top: 0px;
        font-size: 13px;
    }
}

@media (max-width: 991.98px) {
    .why-cre__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-cre__card,
    .why-cre__card:nth-child(4) {
        grid-column: auto;
    }

    .why-cre__card:nth-child(5) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        justify-self: center;
    }
}

@media (max-width: 767px) {
    .why-cre__grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }

    .why-cre__card:nth-child(5) {
        grid-column: auto;
        width: auto;
    }
}

/* ============================================
   Roadmap responsive styling
============================================ */
@media (max-width: 1200px) {
    .roadmap_card {
        padding: 48px 40px 60px;
    }
    .roadmap_steps {
        --roadmap-gap: 24px;
    }
    .roadmap_step__title {
        font-size: 15px;
    }
    .roadmap_step__desc {
        font-size: 13.5px;
    }
}

@media (max-width: 991.98px) {
    .roadmap_card {
        padding: 36px 28px 44px;
        border-radius: 28px;
    }
    .roadmap_card__top {
        margin-bottom: 36px;
    }
    .roadmap_steps {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding-left: 8px;
    }
    .roadmap_step {
        display: grid;
        grid-template-columns: 24px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 8px;
        position: relative;
    }
    .roadmap_step__phase {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 4px;
    }
    .roadmap_step__marker {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: 100%;
        margin-bottom: 0;
        align-items: flex-start;
        padding-top: 6px;
    }
    .roadmap_step__node {
        margin-top: 2px;
    }
    .roadmap_step__line {
        left: 6px;
        top: 20px;
        width: 1.5px;
        height: calc(100% + 32px);
        transform: none;
        background: linear-gradient(180deg, rgba(24, 162, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
    }
    .roadmap_step:last-child .roadmap_step__line {
        height: 100%;
        width: 1.5px;
    }
    .roadmap_step:last-child .roadmap_step__line::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -2px;
        transform: translateX(-50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid rgba(255, 255, 255, 0.75);
        border-bottom: 0;
    }
    .roadmap_step__content {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 576px) {
    .roadmap_card {
        padding: 28px 20px 36px;
        border-radius: 22px;
    }
    .roadmap_card__top {
        margin-bottom: 28px;
    }
    .roadmap_badge {
        font-size: 11px;
        padding: 5px 14px;
    }
    .roadmap_brand {
        font-size: 13px;
    }
    .phase_pill {
        font-size: 11px;
        padding: 4px 12px;
    }
    .roadmap_step__title {
        font-size: 14.5px;
    }
    .roadmap_step__desc {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* ============================================
   Course Features Responsive
============================================ */
@media (max-width: 991.98px) {
    .course_features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .course_features__card {
        padding: 28px 24px 30px;
    }
}

@media (max-width: 576px) {
    .course_features__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .course_features__card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .course_features__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 16px;
    }

    .course_features__title {
        font-size: 17px;
        margin: 0 0 2px;
    }

    .course_features__card .sec_text {
        font-size: 14px;
    }
}

/* ============================================
   Course Syllabus Responsive
============================================ */
@media (max-width: 1200px) {
    .syllabus_col_title {
        flex: 0 0 280px;
    }
    .syllabus_title {
        font-size: 21px;
    }
    .syllabus_body_grid {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 20px;
    }
    .syllabus_media_card {
        max-width: 220px;
    }
}

@media (max-width: 991.98px) {
    .syllabus_trigger {
        display: grid;
        grid-template-columns: 50px 1fr 40px;
        column-gap: 14px;
        row-gap: 0;
        padding: 22px 0 !important;
        align-items: flex-start;
        transition: padding 0.45s cubic-bezier(0.25, 1, 0.5, 1), row-gap 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .syllabus_item.is-open .syllabus_trigger {
        row-gap: 20px;
        padding: 26px 25px!important;
    }

    .syllabus_col_num {
        flex: none;
        grid-column: 1;
        grid-row: 1;
    }

    .syllabus_num {
        font-size: 26px;
    }

    .syllabus_col_title {
        flex: none;
        grid-column: 2;
        grid-row: 1;
        padding-right: 0;
    }

    .syllabus_title {
        font-size: 18px;
    }

    .syllabus_col_arrow {
        flex: none;
        grid-column: 3;
        grid-row: 1;
        padding-top: 0 !important;
    }

    .syllabus_col_body {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 0;
    }

    .syllabus_body_grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 24px;
    }

    .syllabus_media_card {
        max-width: 100%;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 767.98px) {
    .syllabus_body_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .syllabus_col_media {
        justify-content: flex-start;
    }

    .syllabus_media_card {
        max-width: 100%;
        max-height: 220px;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 576px) {
    .syllabus_trigger {
        grid-template-columns: 42px 1fr 34px;
        column-gap: 0px;
        padding: 20px 15px !important;
    }

    .syllabus_num {
        font-size: 22px;
    }

    .syllabus_title {
        font-size: 16px;
    }

    .syllabus_list li {
        font-size: 14px;
        padding-left: 18px;
    }

    .syllabus_arrow {
        width: 32px;
        height: 32px;
    }

    .syllabus_arrow svg {
        width: 18px;
        height: 18px;
    }

    .syllabus_media_card {
        max-height: 190px;
        border-radius: 12px;
    }

    
    .hero__title {
        margin-top: 30px;
    }

    .call_fab {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .whatsapp_tab {
        display: none;
    }

    .whatsapp_fab {
        display: flex;
        font-size: 20px;
        bottom: 85px;
    }

    .recog__img--swap {
        transform: translate(0px, 20px) rotate(-2deg) scale(.94);
    }

    .recog__img--main.is-behind {
        transform: translate(0px, 26px) rotate(2deg) scale(.94);
    }

    .footer__bar p {
        font-size: 10px;
        line-height: 1.8;
    }

    .footer__bar {
        padding: 20px 0px;
    }

    .footer__logo {
        width: 70px;
        border-radius: 10px;
    }

    .value__text {
        margin-top: 10px;
    }

    .fac__slider {
        margin-top: 20px;
    }

    .found_card {
        padding: 20px;
    }

    .career_card {
        padding: 15px 15px;
    }

    .career__text {
        margin-top: 10px;
    }

    .career_card__roles {
        font-size: 14px;
        margin: 5px 0 0;
    }

    .career_card__name {
        font-size: 16px;
        
    }
}


/* ============================================
   Hero responsive styling
============================================ */
@media (max-width: 991.98px) {
    .hero {
        background-image: linear-gradient(to right, rgb(2 10 22), rgb(2 10 22 / 29%)), url(../images/respo-herobg.webp);
        background-attachment: scroll;
        background-color: #020a16;
    }

    .intro__media::before {
        border-radius: 20px;
    }
}