/* =========================================
    Root & General Setup
   ========================================= */
:root {
    --main-bg: #0c003b;
    --text-main: #ffffff;
    --text-secondary: #0c003b;
    --highlight: #88DDFB;
    --accent-color: #f37748;
    --secondary-blue: #61b7c6;
    --grey-light: #ebebeb;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    background-color: var(--main-bg);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

p,
li {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-main);
}


h1,
.h1,
.exercise-title {
    font-family: 'Karantina', sans-serif;
    font-size: clamp(80px, 12vw, 156px);
    font-weight: 400;
    line-height: clamp(64px, 10vw, 124.8px);
    letter-spacing: clamp(4px, 0.6vw, 7.8px);
    color: var(--text-main);
    text-align: right;
    margin-bottom: 1rem;
}

h2,
.h2,
.section-title {
    font-family: 'Karantina', sans-serif;
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
    color: var(--text-main);
    text-align: right;
    margin-bottom: 1rem;
}

h3,
.h3 {
    font-family: 'open', sans-serif !important;
}

#startup-app,
#exercise-app {
    overflow-x: clip;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* =========================================
    Background Vectors
   ========================================= */
#startup-app::before,
#exercise-app::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: -1;
}

#startup-app::after,
#exercise-app::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background-size: 20px 20px;
    transform: rotate(45deg);
    z-index: -1;
}

/* =========================================
    Header & Navigation
   ========================================= */
.menu-icon,
.logo-icon {
    color: #ffffff;
    cursor: pointer;
}

.main-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

header {
    background-color: var(--main-bg);
    z-index: 1000;
    position: sticky;
    top: 0;
    padding: 1.05rem 1.05rem !important;
    /* Slightly larger than original default p-3 (1rem) */
}

.desktop-nav {
    display: none !important;
}

.desktop-nav .nav-link {
    color: #ffffff;
    font-size: 1.125rem;
    /* Restored to original default */
    font-weight: 600;
    transition: color 0.3s ease;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:focus,
.desktop-nav .nav-link.active {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.desktop-nav .dropdown-menu {
    background-color: #ffffff;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
}

.desktop-nav .dropdown-item {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 1.125rem;
    /* Restored to original default */
    padding: 10px 20px;
    /* Restored to original default */
    text-align: right;
    transition: all 0.2s ease;
}

.desktop-nav .dropdown-item.active,
.desktop-nav .dropdown-item:hover,
.desktop-nav .dropdown-item:focus {
    background-color: transparent;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}

/* Open dropdown on hover for desktop */
.desktop-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* =========================================
    Mobile Menu (Offcanvas)
   ========================================= */
.custom-menu {
    background-color: var(--main-bg) !important;
    color: var(--text-main);
    width: 280px !important;
}

.senior-nav .nav-link {
    color: var(--text-main);
    padding: 15px 20px;
    font-size: 20px;
    border-bottom: 1px solid var(--grey-light);
    transition: background 0.3s;
}

/* =========================================
    Typography & Brand Elements
   ========================================= */
h1,
h2,
h3 {
    font-family: 'Karantina', system-ui !important;
    letter-spacing: 0.05em;
}

h1 {
    font-size: 3.5rem !important;
}

h2 {
    font-size: 2.5rem !important;
}

h3 {
    font-size: 2rem !important;
}

.subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    line-height: 1.4;
    max-width: 320px;
}

@media (min-width: 768px) {
    .subtitle {
        max-width: 800px;
        font-size: 1.25rem;
    }
}

.max-w-100-percent,
.max-w-100 {
    max-width: 100% !important;
}

.max-w-none {
    max-width: none !important;
}

hr.section-divider {
    border-top: 2px solid var(--highlight);
    margin: 4rem auto;
    width: 100%;
}

/* =========================================
    Interactive Elements (Buttons & Boxes)
   ========================================= */

/* Base Styles */
.unit-box,
.draggable-chip,
.submit-btn,
.custom-carousel-control {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
    min-height: 44px;
    /* מינימום נגישות */
}

/* Accordion Plus to Minus Toggle */
[aria-expanded="true"] .vertical-line {
    display: none;
}

.unit-box {
    background-color: var(--highlight);
    border: 1px solid var(--main-bg);
    border-radius: 6px;
    padding: 15px 10px;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 1.125rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.square-unit-btn {
    aspect-ratio: 1 / 1;
    width: 60%;
    max-width: 140px;
    margin: 0 auto;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Hover effect - Desktop only */
@media (hover: hover) {
    .unit-box:hover:not(:disabled) {
        background-color: var(--grey-light);
        border-color: var(--highlight);
        transform: translateY(-2px);
    }

    .draggable-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

/* Active effect - Mobile & Desktop Feedback */
.unit-box:active,
.draggable-chip:active,
.submit-btn:active,
.custom-carousel-control:active {
    transform: scale(0.96) !important;
    background-color: var(--grey-light) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.unit-box:disabled {
    background-color: #4A4659;
    border-color: #8A8B9A;
    color: #8A8B9A;
    cursor: not-allowed;
    opacity: 0.8;
}

/* =========================================
    Animated Card Components
   ========================================= */
.animated-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: 200px;
    margin: 0 auto;
    border-radius: 16px;
    color: var(--text-secondary);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: var(--highlight);
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
    border: 1px solid rgba(97, 183, 198, 0.5);
}

.animated-card:hover,
.animated-card:active {
    transform: translateY(-5px);
    background-color: #ffffff;
}

.animated-card-content {
    position: relative;
    z-index: 3;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    padding: 15px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.card-icon {
    width: 36px;
    height: 36px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

i.card-icon {
    font-size: 36px;
    line-height: 1;
    display: inline-block;
    width: auto;
    height: auto;
}

.animated-card:hover .card-icon {
    transform: scale(1.18);
}


.animated-card.role-card {
    aspect-ratio: auto;
    min-height: 90px;
    max-width: 100%;
}

/* =========================================
    Compass Layout (Unit 2)
   ========================================= */
.compass-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
    align-items: center;
    justify-items: center;
    margin: 3rem auto;
    max-width: 900px;
}

.compass-center img {
    width: 220px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0px 0px 30px rgba(230, 180, 50, 0.4));
}

.compass-text {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    max-width: 180px;
}

.compass-north {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.compass-south {
    grid-column: 2;
    grid-row: 3;
    text-align: center;
}

.compass-east {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
    justify-self: end;
}

.compass-west {
    grid-column: 3;
    grid-row: 2;
    text-align: center;
    justify-self: start;
}

.compass-center {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================
    Drag & Drop (Unit 2)
   ========================================= */
.draggable-chip {
    touch-action: none;
    padding: 10px 20px;
    border-radius: 40px;
    background-color: var(--grey-light);
    color: var(--text-secondary);
}

.draggable-chip.selected {
    background-color: var(--secondary-blue) !important;
    color: white !important;
    transform: scale(1.05);
}

.drop-zone {
    border: 2px dashed #ccc;
    min-height: 60px;
    transition: all 0.2s;
}

.drop-zone.success-drop {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
}

.drop-zone.error-drop {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    animation: shake 0.4s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25%,
    75% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }
}

/* =========================================
    Responsive Breakpoints
   ========================================= */
@media (max-width: 576px) {
    .compass-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.5rem;
        margin: 2rem auto;
    }

    .compass-center img {
        width: 90px;
    }

    .compass-text {
        font-size: 1.125rem;
        max-width: 110px;
    }

    .compass-north,
    .compass-east,
    .compass-center,
    .compass-west,
    .compass-south {
        max-width: 100%;
    }
}

@media (min-width: 1025px) {
    .desktop-nav {
        display: flex !important;
    }

    .mobile-menu-wrapper {
        display: none !important;
    }
}

/* =========================================
    Animations & Utils
   ========================================= */
.arrow-down {
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
    Additional Components (Resilience, Contact, etc)
   ========================================= */
.hint-box {
    background: rgba(12, 0, 59, 0.55);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 4px solid var(--highlight);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: fit-content;
    margin: 0 auto 2rem auto !important;
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
}

.hint-box-icon {
    color: var(--highlight);
    font-size: 1.5rem;
    margin-left: 1rem;
}

.hint-box-text {
    margin-bottom: 0;
    color: #ffffff;
    opacity: 0.9;
    font-size: 1.125rem;
    text-align: right;
}



/* =========================================
    3D Team Carousel
   ========================================= */

.team-3d-card {
    position: absolute;
    width: 200px;
    height: 250px;
    background: transparent;
    border-radius: 20px;
    text-align: center;
    padding: 0;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    user-select: none;
    border: none;
    box-shadow: none;
}

.team-3d-card .img-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 2px solid #ffffff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transition: all 0.6s ease;
}

.team-3d-card .team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pseudo element for the purple tint on side cards */
.team-3d-card .img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(30, 10, 80, 0.6);
    mix-blend-mode: color;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.team-3d-card.active .img-wrapper::after {
    opacity: 0;
    /* Remove tint for center card */
}

.team-3d-card.active {
    transform: translateX(0) scale(1) translateZ(0);
    z-index: 10;
}

.team-3d-card.prev-1 {
    transform: translateX(-140px) scale(0.85) translateZ(-100px);
    z-index: 5;
}

.team-3d-card.next-1 {
    transform: translateX(140px) scale(0.85) translateZ(-100px);
    z-index: 5;
}

.team-3d-card.prev-2 {
    transform: translateX(-240px) scale(0.7) translateZ(-200px);
    z-index: 4;
}

.team-3d-card.next-2 {
    transform: translateX(240px) scale(0.7) translateZ(-200px);
    z-index: 4;
}

.team-3d-card.hidden {
    transform: translateX(0) scale(0.5) translateZ(-300px);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .team-carousel-wrapper {
        height: 260px;
    }

    .team-3d-card {
        width: 140px;
        height: 180px;
    }

    .team-3d-card.prev-1 {
        transform: translateX(-80px) scale(0.85) translateZ(-100px);
        z-index: 5;
    }

    .team-3d-card.next-1 {
        transform: translateX(80px) scale(0.85) translateZ(-100px);
        z-index: 5;
    }

    .team-3d-card.prev-2,
    .team-3d-card.next-2 {
        transform: translateX(0) scale(0.5) translateZ(-300px);
        z-index: 1;
        opacity: 0;
        pointer-events: none;
    }
}

@media (min-width: 992px) {
    #teamPrevBtn {
        right: -80px !important;
        left: auto !important;
    }

    #teamNextBtn {
        left: -80px !important;
        right: auto !important;
    }
}


/* =========================================
    Workflow Vertical Scroll Animation
   ========================================= */
.workflow-scroll-container {
    position: relative;
}

.workflow-steps-col {
    /* Create empty space at start and end so first and last items can reach the center */
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.workflow-timeline-wrapper {
    position: absolute;
    top: 2vh;
    bottom: 2vh;
    right: 94px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.1) 85%, transparent);
    z-index: 0;
}

.workflow-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* Will be updated via JS */
    background: linear-gradient(to bottom, rgba(97, 183, 198, 0), #61b7c6);
    border-radius: 2px;
}

.workflow-timeline-dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #61b7c6;
    box-shadow: 0 0 10px #61b7c6, 0 0 20px #61b7c6;
    z-index: 2;
}

.workflow-step {
    opacity: 0.2;
    transform: translateX(30px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.workflow-step.active {
    opacity: 1;
    transform: translateX(0);
}

.step-num {
    width: 40px;
    min-width: 40px;
    color: #61b7c6 !important;
}

.step-content {
    padding-right: 60px;
}

@media (max-width: 768px) {
    .workflow-steps-col {
        padding-top: 5vh;
        padding-bottom: 5vh;
    }

    .workflow-timeline-wrapper {
        top: 5vh;
        bottom: 5vh;
        right: 80px;
    }

    .workflow-step {
        opacity: 0.3;
        transform: translateY(20px);
        min-height: auto;
    }

    .workflow-step.active {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .workflow-timeline-wrapper {
        right: 104px;
    }

    .step-content {
        padding-right: 100px;
    }
}

/* =========================================
    Drag & Drop Inverted (Unit 2)
   ========================================= */
.principle-bucket {
    cursor: pointer;
}

.drag-over {
    border-color: #39a1bb !important;
    background-color: #f0f9fc !important;
    transform: scale(1.02);
}

.success-drop {
    border-color: #28a745 !important;
    background-color: #e8f5e9 !important;
}

.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

.error-shake {
    animation: errorShake 0.4s ease-in-out;
    border-color: #FF6B6B !important;
}

.selected-scenario {
    box-shadow: 0 0 15px rgba(57, 161, 187, 0.8) !important;
    transform: scale(1.02);
    transition: all 0.2s;
}

/* =========================================
    Goal Item Accordion (Unit 1 & 2)
   ========================================= */
.goal-item {
    cursor: pointer;
}

.goal-plus {
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-plus::before,
.goal-plus::after {
    content: '';
    position: absolute;
    background-color: #ffffff;
    border-radius: 2px;
}

/* Horizontal line (minus) */
.goal-plus::before {
    width: 28px;
    height: 3px;
}

/* Vertical line (makes it a plus) */
.goal-plus::after {
    width: 3px;
    height: 28px;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.goal-item[aria-expanded="true"] .goal-plus::after {
    transform: scaleY(0);
}

/* =========================================
    Goal Placeholders
   ========================================= */
.icon-placeholder {
    width: 28px;
    height: 28px;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    flex-shrink: 0;
    display: inline-block;
}

.goal-icon {
    width: 28px;
    height: 28px;
    stroke: var(--highlight);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), stroke 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

i.goal-icon {
    font-size: 28px;
    line-height: 1;
    color: var(--highlight);
    display: inline-block;
    width: auto;
    height: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}

i.goal-icon:hover {
    color: #ffffff;
    transform: scale(1.2) rotate(5deg);
    cursor: pointer;
}

.goal-icon:hover {
    transform: scale(1.2) rotate(5deg);
    stroke: #ffffff;
    cursor: pointer;
}

/* =========================================
    Logo Header Typography
   ========================================= */
.logo-title {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0;
}

.edut-word {
    font-family: 'Karantina', sans-serif;
    font-weight: 400;
    font-size: clamp(80px, 12vw, 156px);
    line-height: clamp(64px, 10vw, 124.8px);
    letter-spacing: clamp(4px, 0.6vw, 7.8px);
    color: #FFFFFF;
}

.number-word {
    font-family: 'Saira Extra Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(70px, 11vw, 138px);
    line-height: clamp(70px, 11vw, 136.1px);
    letter-spacing: clamp(7px, 1.1vw, 13.9px);
    color: var(--secondary-blue);
}

/* =========================================
    Flip Card Components
   ========================================= */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 340px;
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: right;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #1a1528;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.flip-card-front {
    background-color: #1a1528;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 2;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card-back {
    background-color: #E6F0F2;
    color: var(--text-secondary);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Safari fix: prevent children of flip card from bleeding through on rotation */
.flip-card-front *,
.flip-card-back * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--highlight);
    color: var(--text-secondary);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    z-index: 2;
}

.flip-card-back .flip-card-header {
    position: relative;
    background: var(--highlight);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.flip-card-back-text {
    padding: 15px;
    font-size: 18px;
    line-height: 1.4;
    flex-grow: 1;
    overflow-y: auto;
}

/* Custom scrollbar to indicate scrollability on mobile */
.flip-card-back-text::-webkit-scrollbar {
    width: 6px;
}

.flip-card-back-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 4px 0;
}

.flip-card-back-text::-webkit-scrollbar-thumb {
    background: var(--highlight);
    border-radius: 4px;
}

/* Fixed height for uniqueness modal text to prevent carousel jumping */
.uniqueness-modal-text {
    max-width: 600px;
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
    min-height: 150px;
}

@media (max-width: 768px) {
    .uniqueness-modal-text {
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    .uniqueness-modal-text {
        min-height: 260px;
    }
}

/* ==========================================================================
   Desktop Re-design Styles for 65+ Audience (Accessibility & Readability)
   ========================================================================== */

/* Limiting line width for readable paragraphs on large screens */
@media (min-width: 992px) {
    .content-paragraph {
        max-width: 65ch;
        /* ~60-65 characters (10-15 words) per line for optimal readability */
        font-size: 1.25rem !important;
        /* 20px */
        line-height: 1.8 !important;
        color: #e2e8f0;
        /* Light text for dark background */
        margin-left: auto;
        margin-right: 0 !important;
        /* Align to the right edge, matching the title axis */
        text-align: right !important;
    }

    .large-btn-desktop {
        padding: 1rem 3rem !important;
        font-size: 1.3rem !important;
    }

    .section-title-desktop {
        font-size: clamp(2.8rem, 3.8vw, 4rem) !important;
        margin-bottom: 2rem !important;
    }
}

/* Gentle hover interaction without confusing movement */
.transition-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.transition-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Finish Unit Button */
.btn-finish-unit {
    background-color: var(--main-bg) !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
    white-space: nowrap !important;
}

.btn-finish-unit:hover {
    background-color: var(--secondary-blue) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Unit Completed Section */
.unit-completed-section {
    background-color: var(--grey-light) !important;
    color: var(--text-secondary) !important;
}

.unit-completed-section p,
.unit-completed-section a:not(.btn-finish-unit) {
    color: var(--text-secondary) !important;
}


/* Site Footer */
.site-footer {
    background-color: var(--main-bg);
    color: #ffffff;
}



/* Custom Tabs Styling */
.custom-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.custom-tabs .nav-link {
    color: #ffffff;
    opacity: 0.7;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    font-weight: 600;
}

.custom-tabs .nav-link:hover {
    opacity: 1;
    color: var(--highlight);
    border-color: rgba(255, 255, 255, 0.2);
}

.custom-tabs .nav-link.active {
    background-color: var(--highlight) !important;
    color: var(--text-secondary) !important;
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(97, 183, 198, 0.4);
}

/* On mobile, stack tab buttons vertically */
@media (max-width: 768px) {
    .custom-tabs {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }

    .custom-tabs .nav-item {
        width: 100% !important;
        max-width: 280px !important;
    }

    .custom-tabs .nav-link {
        width: 100% !important;
    }
}

/* =========================================
    Utility / Extracted Styles
   ========================================= */
.nav-icon-link {
    min-width: 44px;
    min-height: 44px;
}

.nav-icon-img {
    height: 44px;
    width: auto;
}

.main-content-area {
    max-width: 1200px;
}

.hero-image {
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
    border: 1px solid rgba(97, 183, 198, 0.5);
    max-width: 800px;
    width: 100%;
}

.fit-content-right {
    width: fit-content;
    text-align: right;
}

.fs-18 {
    font-size: 18px;
}

.arrow-down-img {
    width: 44px;
    height: auto;
}

.contact-section {
    background-color: var(--grey-light);
    color: var(--text-secondary);
}

.contact-section p,
.contact-section a {
    color: var(--text-secondary) !important;
}

.opacity-90 {
    opacity: 0.9;
}

.google-form-wrapper {
    max-width: 640px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    padding-top: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Unit 1 Extracted Styles */
.main-content-wide {
    max-width: 1700px;
}

.hero-dna-image {
    max-width: 1000px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
}

.collapse-text-custom {
    font-size: 1.125rem;
    opacity: 1;
}

.max-w-75ch {
    max-width: 75ch;
}

.max-w-65ch {
    max-width: 65ch;
}

.max-w-400px {
    max-width: 400px;
}

.max-w-550px {
    max-width: 550px;
}

.stat-number-custom {
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-color);
    font-family: 'Karantina', system-ui;
}

.stat-desc-custom {
    max-width: 65ch;
    opacity: 0.9;
}

.me-8px {
    margin-inline-end: 8px;
}

.video-container-wrapper {
    max-width: 800px;
    aspect-ratio: 16/9;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
    overflow: hidden;
}

.video-container-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flip-card-icon-container {
    width: 100%;
    height: 100%;
    background: #2a253d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.opacity-60 {
    opacity: 0.6;
}

.video-placeholder-wrapper {
    max-width: 800px;
    aspect-ratio: 16/9;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
    background-color: #1a1528;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.play-btn-dark {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ms-5px {
    margin-left: 5px;
}

.carousel-btn-custom {
    width: 80px;
    z-index: 100;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 1;
}

.border-w-2px {
    border-width: 2px;
}

.font-heebo {
    font-family: 'Heebo', sans-serif;
}



.btn-close-custom {
    width: 48px;
    height: 48px;
    background-size: 24px;
    margin: 0;
}

.modal-team-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid #39a1bb;
}

.modal-team-bio {
    max-width: 600px;
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
}

.py-5vh {
    padding: 5vh 0;
}

.project-card-custom {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-media-container {
    aspect-ratio: 16/9;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
    background-color: #1a1528;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-media-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-project-link {
    background-color: var(--main-bg);
    border: 1px solid var(--highlight);
    color: #fff;
}

.project-media-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================
    Print Styles (Unit 1 Connection Task)
   ========================================= */
@media print {
    body.print-connection-task {
        background-color: #fff !important;
    }

    body.print-connection-task * {
        visibility: hidden;
    }

    body.print-connection-task #connection-task-section,
    body.print-connection-task #connection-task-section * {
        visibility: visible;
        color: #000 !important;
    }

    body.print-connection-task #connection-task-section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.print-connection-task #connection-task-textarea {
        display: none !important;
    }

    body.print-connection-task #print-text-display {
        display: block !important;
        background-color: #f9f9f9 !important;
        border: 1px solid #ccc !important;
        padding: 15px !important;
        border-radius: 8px !important;
        min-height: 100px;
    }

    body.print-connection-task .no-print {
        display: none !important;
    }
}

/* Desktop Sidebar Styles */
.desktop-sidebar-sticky {
    top: 100px;
    z-index: 10;
}

.desktop-sidebar-card {
    background: rgba(12, 0, 59, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.desktop-sidebar-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(12, 0, 59, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 12px 40px 0 rgba(0, 0, 0, 0.5);
}

.text-cyan {
    color: var(--highlight) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.desktop-sidebar-list {
    padding-right: 0;
    margin-bottom: 0;
}

.desktop-sidebar-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 8px;
    padding: 6px 12px;
    margin: 0 -12px;
}

.desktop-sidebar-item:hover {
    padding-right: 18px;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--highlight) !important;
}

/* Subtle glowing container background for active section in the learning unit */
.desktop-sidebar-item:has(.bi-arrow-left-circle-fill) {
    background-color: rgba(136, 221, 251, 0.1);
    color: #ffffff !important;
}

/* =========================================
    Generic Reusable Utility Classes
   ========================================= */

.max-w-900px {
    max-width: 900px;
}

.list-unstyled-rtl {
    list-style: none;
    padding-right: 0;
    margin-right: 0;
}

.custom-bullet-list {
    list-style: none;
    padding-right: 0;
    margin-right: 0;
}

.custom-bullet-list li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.custom-bullet-list li::before {
    content: "\2022";
    position: absolute;
    right: 0;
    top: -0.1rem;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.25rem;
}

.text-start-important {
    text-align: right !important;
}

.white-space-pre-wrap {
    white-space: pre-wrap;
}

.fs-2rem {
    font-size: 2rem;
}

/* Unit 2 Scenarios & Progress */
.scenarios-container-wrapper {
    max-width: 600px;
    min-height: 300px;
}

.scenario-card-style {
    height: 100%;
    border-radius: 16px;
    padding: 2rem;
    overflow: hidden;
}

.word-bank-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .word-bank-container {
        height: 100%;
        justify-content: space-between;
        gap: 0;
    }
}

.scenario-counter {
    color: #39a1bb;
    font-size: 18px;
}

.scenario-progress-container {
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
}

.progress-bar-accent {
    background-color: var(--accent-color) !important;
}

.badge-accent {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
    font-size: 20px !important;
}

.w-16-6 {
    width: 16.66%;
}

.w-33-3 {
    width: 33.33%;
}

.w-66-6 {
    width: 66.66%;
}

.w-83-3 {
    width: 83.33%;
}

/* Unit 2 Word Bank */
.principle-title {
    color: var(--text-secondary) !important;
    font-size: 18px;
    transition: color 0.2s ease;
}


.modal-icon-lg {
    font-size: 3rem;
}

/* Z-Index Utils */
.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.z-4 {
    z-index: 4;
}

.z-5 {
    z-index: 5;
}

.z-6 {
    z-index: 6;
}

/* Unit 2 Interactive Task Styles */
.principle-btn {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 60px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.principle-btn:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.principle-btn:hover .principle-title {
    color: var(--text-secondary) !important;
}

.principle-btn.success-drop {
    background-color: #e8f5e9 !important;
    border-color: #28a745 !important;
}

.principle-btn.success-drop .principle-title {
    color: #28a745 !important;
}

.principle-btn.error-drop {
    background-color: #ffeeba !important;
    border-color: #dc3545 !important;
}

.principle-btn.error-drop .principle-title {
    color: #dc3545 !important;
}

.feature-card {
    background: rgba(12, 0, 59, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    height: 100%;
}

.feature-icon {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--highlight);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

i.feature-icon {
    font-size: 40px;
    line-height: 1;
    color: var(--highlight);
    display: inline-block;
    width: auto;
    height: auto;
}

/* Standard Play Icon inside play button */
.play-icon {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Carousel Control Icons */
.carousel-arrow-icon {
    width: 48px;
    height: 48px;
    fill: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

i.carousel-arrow-icon {
    font-size: 48px;
    line-height: 1;
    color: #ffffff;
    display: inline-block;
    width: auto;
    height: auto;
}

/* Standard Video Container */
.video-container {
    aspect-ratio: 16/9;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(97, 183, 198, 0.5);
    background-color: var(--main-bg);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container iframe,
.video-container video,
.video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}







.custom-btn-close {
    width: 48px !important;
    height: 48px !important;
    background-size: 24px !important;
    margin: 0 !important;
}

/* Modal Content Elements */
.modal-avatar-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--secondary-blue);
}

.modal-heebo-title {
    font-family: 'Heebo', sans-serif;
}

.modal-bio-text {
    max-width: 600px;
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Enforce right-alignment for all large paragraphs (Design Update) */
.card-text,
.modal-bio-text,
.tab-pane p {
    text-align: right !important;
}

.tab-pane h3 {
    color: var(--accent-color) !important;
}

p.system-desc,
p.info-system-desc {
    text-align: right !important;
    font-size: 1.125rem;
    /* 18px */
    color: #ffffff;
}

.welcome-container {
    max-width: 680px;
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}

.welcome-container ul {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* Ensure card text is always 100% opacity for readability */
.card-text {
    opacity: 1 !important;
}


/* =========================================
    Global Typography Enforcement
   ========================================= */
/* Ensure minimum font size is 18px across the board */
small,
.small,
.fs-6 {
    font-size: 18px !important;
}

/* Enforce 20px for subheadings (excluding main H1-H3 titles) */
h4,
h5,
h6,
.h4,
.h5,
.h6,
.card-title,
.subtitle,
.fs-5 {
    font-size: 20px !important;
}

h5,
.h5 {
    color: var(--accent-color) !important;
}

/* Grounding custom SVG icons color mapping to #f37748 */
.grounding-icon {
    filter: invert(62%) sepia(48%) saturate(1487%) hue-rotate(334deg) brightness(101%) contrast(96%);
}

#section-grounding h3 {
    color: var(--accent-color) !important;
}

/* Uniqueness cards vector illustrations styling */
.flip-card-front {
    background-color: #020e28 !important;
    /* Matches the exact dark blue background of the illustrations (RGB: 2 14 40) */
    border-color: #020e28 !important;
    /* Merges the card border into the background */
}

.flip-card-front img.uniqueness-illust {
    object-fit: contain !important;
    padding: 75px 45px 45px 45px !important;
    /* Zoom out and clear absolute header */
    background-color: #020e28 !important;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 85%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 85%);
    /* Seamlessly fades the square image edges to transparent */
    transition: none !important;
}

.flip-card:hover .uniqueness-illust {
    transform: none !important;
    /* Removes hover scaling animation */
}

/* =========================================
    Unit 3 Specific & Exercise Input Classes
   ========================================= */

.exercise-inputs-container {
    max-width: 500px;
    width: 100%;
}

.exercise-input-number {
    min-width: 25px;
    display: inline-block;
}

.step-summary-container {
    min-height: 70vh;
    animation: fadeIn 2s ease-in-out;
}

.summary-subtext {
    font-size: 1.125rem;
    color: #e6e6e6;
}

.video-container-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
    Content Editor Professional Unit (Job1)
   ========================================= */
.tag-chip {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.tag-chip:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--highlight) !important;
    transform: translateY(-1px);
}

.tag-chip.selected {
    background-color: var(--highlight) !important;
    color: var(--text-secondary) !important;
    border-color: var(--highlight) !important;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(97, 183, 198, 0.4);
}

.summary-option-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.summary-option-card:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(97, 183, 198, 0.4) !important;
    transform: translateX(-5px);
}

.summary-option-card.selected {
    background-color: rgba(97, 183, 198, 0.08) !important;
    border-color: var(--highlight) !important;
    box-shadow: 0 0 15px rgba(97, 183, 198, 0.2);
}

.ethical-card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s ease;
}

.btn-ethical {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff;
    transition: all 0.2s ease;
}

.btn-ethical:hover {
    border-color: var(--highlight) !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-ethical.selected-public {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #28a745 !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.4);
}

.btn-ethical.selected-archive {
    background-color: var(--secondary-blue) !important;
    color: #ffffff !important;
    border-color: var(--secondary-blue) !important;
    box-shadow: 0 0 10px rgba(57, 161, 189, 0.4);
}

/* =========================================
    Quality Control (QC) Exercise Styles
   ========================================= */
.qc-container {
    max-width: 750px;
    margin: 0 auto;
    direction: rtl;
}

.qc-progress-wrapper {
    margin-bottom: 2rem;
}

.qc-progress-bar-bg {
    background-color: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.qc-progress-bar-fill {
    background-color: var(--highlight);
    height: 100%;
    width: 0%;
    /* Will be updated via JS */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.qc-card {
    background: rgba(12, 0, 59, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 2rem;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 2rem;
}

.qc-card.fade-out,
.qc-feedback-box.fade-out {
    opacity: 0;
    transform: scale(0.98) translateY(-5px);
}

.qc-card.fade-in,
.qc-feedback-box.fade-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.qc-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--highlight);
    margin-bottom: 1.5rem;
    text-align: right;
}

.qc-card-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #ffffff;
    text-align: justify;
}

.qc-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.btn-qc {
    flex: 1;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* 🔴 Decline Button */
.btn-qc-reject {
    background-color: #2b0e14;
    border-color: #a81c25;
    color: #fca5a5;
}

.btn-qc-reject:hover {
    background-color: #4a1219;
    border-color: #ef4444;
    color: #ffffff;
}

/* 🟢 Approve Button */
.btn-qc-approve {
    background-color: #0b2218;
    border-color: #107c41;
    color: #a7f3d0;
}

.btn-qc-approve:hover {
    background-color: #113824;
    border-color: #22c55e;
    color: #ffffff;
}

/* Feedback Box */
.qc-feedback-box {
    background: rgba(12, 0, 59, 0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 2rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 2rem;
}

.qc-feedback-box.error-theme {
    border-right: 6px solid #ef4444;
}

.qc-feedback-box.success-theme {
    border-right: 6px solid #22c55e;
}

.qc-feedback-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: right;
}

.qc-feedback-box.error-theme .qc-feedback-title {
    color: #fca5a5;
}

.qc-feedback-box.success-theme .qc-feedback-title {
    color: #a7f3d0;
}

.qc-feedback-list {
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.qc-feedback-list li {
    margin-bottom: 0.75rem;
    position: relative;
    list-style-type: none;
}

.qc-feedback-list li::before {
    content: "\2022";
    color: var(--accent-color);
    position: absolute;
    right: -1.25rem;
    font-weight: bold;
}

.qc-fixed-text-title {
    font-weight: bold;
    color: var(--highlight);
    margin-bottom: 0.75rem;
}

.qc-fixed-text-box {
    background-color: rgba(97, 183, 198, 0.05);
    border: 1px dashed rgba(97, 183, 198, 0.3);
    border-radius: 8px;
    padding: 1.25rem;
    line-height: 1.8;
    color: #ffffff;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Success Box styles */
.qc-success-box {
    background-color: var(--grey-light) !important;
    border: 2px solid var(--main-bg) !important;
    border-radius: 16px !important;
    padding: 3rem 2rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    max-width: 640px;
    width: 100%;
    text-align: center;
    margin: 0 auto 2rem auto;
}

.qc-success-title {
    font-family: 'Karantina', sans-serif !important;
    color: var(--accent-color) !important;
    font-size: clamp(2.2rem, 4.5vw, 2.85rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px;
    margin-bottom: 1.25rem !important;
    line-height: 1.2;
}

.qc-success-text {
    color: var(--text-secondary) !important;
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.75rem !important;
    font-weight: 400;
}

.btn-summary-white {
    background-color: #ffffff !important;
    color: var(--main-bg) !important;
    border: 1px solid rgba(12, 0, 59, 0.12) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    border-radius: 10px !important;
    padding: 0.65rem 1.8rem !important;
    min-width: 170px;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-summary-white:hover {
    background-color: #f1f3f7 !important;
    color: var(--main-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.btn-summary-dark {
    background-color: var(--main-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--main-bg) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    border-radius: 10px !important;
    padding: 0.65rem 1.8rem !important;
    min-width: 170px;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-summary-dark:hover {
    background-color: var(--secondary-blue) !important;
    border-color: var(--secondary-blue) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile responsive fixes */
@media (max-width: 576px) {
    .qc-actions {
        gap: 0.75rem;
    }

    .btn-qc {
        font-size: 1.125rem;
        padding: 0.85rem;
    }

    .qc-card {
        padding: 1.25rem;
    }

    .qc-feedback-box {
        padding: 1.25rem;
    }

    .exercise-success-card {
        padding: 1.5rem !important;
    }

    .btn-finish-unit,
    .btn-repeat-exercise {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        white-space: nowrap !important;
        font-size: 1.1rem !important;
    }
}

/* Enforce minimum height of 48px for all mobile buttons (Touch Targets) */
@media (max-width: 768px) {
    button:not(.btn-close),
    .btn:not(.btn-close) {
        min-height: 48px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-close {
        min-height: 48px !important;
        min-width: 48px !important;
        box-sizing: border-box !important;
    }
}

/* Quality Control Button Adjustments for Dark Background */
#btn-qc-next,
#btn-finish-exercise-scroll,
#btn-expo-qc-next,
#btn-finish-expo-exercise-scroll,
#btn-title-qc-submit,
#btn-title-qc-next,
#btn-finish-title-exercise-scroll {
    background-color: #ffffff !important;
    color: var(--text-secondary) !important;
    border: none !important;
    transition: all 0.2s ease;
}

#btn-qc-next:hover,
#btn-finish-exercise-scroll:hover,
#btn-expo-qc-next:hover,
#btn-finish-expo-exercise-scroll:hover,
#btn-title-qc-submit:hover,
#btn-title-qc-next:hover,
#btn-finish-title-exercise-scroll:hover {
    background-color: var(--highlight) !important;
    color: var(--text-secondary) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

#btn-qc-next:disabled,
#btn-finish-exercise-scroll:disabled,
#btn-expo-qc-next:disabled,
#btn-finish-expo-exercise-scroll:disabled,
#btn-title-qc-submit:disabled,
#btn-title-qc-next:disabled,
#btn-finish-title-exercise-scroll:disabled {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================
   Simulated Form UI & Title QC Exercise
   ========================================= */
.simulated-form-card {
    background-color: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    color: var(--text-secondary) !important;
    direction: rtl !important;
    text-align: right !important;
}

/* Faculty Footer */
.faculty-footer {
    background-color: var(--highlight);
    color: var(--text-secondary);
    width: 100%;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1.35;
}

.faculty-footer p,
.faculty-footer a {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

.faculty-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.faculty-footer-logo {
    max-height: 54px;
    width: auto;
}

.faculty-footer-text {
    text-align: right;
}

.faculty-footer a {
    color: var(--text-secondary);
    text-decoration: underline;
    font-weight: 600;
}

.faculty-footer a:hover {
    color: var(--text-secondary);
    opacity: 0.8;
}

@media (max-width: 768px) {
    .faculty-footer .container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .faculty-footer-text {
        text-align: center;
    }
}

.simulated-form-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 20px;
    direction: rtl;
}

@media (max-width: 768px) {
    .simulated-form-row {
        flex-direction: column-reverse;
        gap: 10px;
        align-items: stretch;
    }
}

.simulated-counter-col {
    min-width: 100px;
    text-align: left;
    color: #71717a;
    font-family: monospace;
    font-size: 1.15rem;
    font-weight: bold;
    direction: ltr;
    /* Keeps "100 / [number]" aligned correctly as LTR text */
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 40px;
    /* Align with the textarea box vertically on desktop */
}

@media (max-width: 768px) {
    .simulated-counter-col {
        margin-top: 0;
        justify-content: flex-start;
        padding-left: 10px;
    }
}

.simulated-counter-num {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}

.simulated-counter-num.valid {
    background-color: #fef08a;
    /* Yellow highlight as in the image */
    color: var(--text-secondary);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.simulated-counter-num.invalid {
    background-color: #fca5a5;
    /* Red highlight for overlimit */
    color: #7f1d1d;
    border: 1px solid rgba(239, 68, 68, 0.4);
    animation: blink-red-counter-bg 1s infinite alternate;
}

@keyframes blink-red-counter-bg {
    0% {
        opacity: 0.8;
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.3);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
    }
}

.simulated-input-col {
    flex-grow: 1;
    text-align: right;
}

.simulated-input-label {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 4px !important;
    display: block;
}

.simulated-input-sublabel {
    font-size: 1.125rem !important;
    color: #71717a !important;
    display: block;
    margin-bottom: 2px !important;
}

.simulated-input-example {
    font-size: 1.125rem !important;
    color: #71717a !important;
    display: block;
    margin-bottom: 8px !important;
    font-style: italic;
}

.simulated-textarea-box {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px 16px;
    min-height: 70px;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: right;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: text;
}

.simulated-textarea-box mark {
    background-color: #fef08a !important;
    color: var(--text-secondary) !important;
    padding: 2px 4px;
    border-radius: 2px;
}

/* Diagonal lines grab handle icon at the bottom-left corner */
.simulated-textarea-box::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-image: linear-gradient(-45deg, transparent 50%, #888 50%, #888 60%, transparent 60%, transparent 70%, #888 70%);
    opacity: 0.6;
}

.simulated-note-box {
    background-color: rgba(24, 24, 27, 0.03) !important;
    border-right: 4px solid #71717a !important;
    padding: 12px 16px !important;
    margin-top: 15px !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 1.125rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    text-align: right !important;
}

.qc-radio-option {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: right;
    color: #ffffff;
    user-select: none;
}

.qc-radio-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(97, 183, 198, 0.3);
    transform: translateX(-4px);
}

.qc-radio-option.selected {
    background: rgba(97, 183, 198, 0.08);
    border-color: var(--highlight);
    box-shadow: 0 0 10px rgba(97, 183, 198, 0.15);
}

.qc-radio-option input[type="radio"] {
    margin-left: 15px;
    margin-right: 0;
    accent-color: var(--highlight);
    transform: scale(1.25);
    cursor: pointer;
}

.qc-radio-option span {
    font-size: 1.125rem;
    line-height: 1.6;
}

/* Standalone Example Box style */
.example-box {
    background-color: rgba(97, 183, 198, 0.03);
    border-right: 4px solid var(--highlight);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.example-box strong {
    color: var(--highlight);
    display: block;
    margin-bottom: 0.5rem;
}

/* Custom About Modal Styles */
.modal-content,
.custom-modal-content,
.team-modal-content {
    background-color: var(--main-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.modal-content .modal-header,
.custom-modal-content .modal-header,
.team-modal-content .modal-header {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modal-content .modal-footer,
.custom-modal-content .modal-footer,
.team-modal-content .modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modal-content .modal-title,
.custom-modal-content .modal-title,
.team-modal-content .modal-title {
    color: var(--text-main) !important;
}

.modal-content a,
.custom-modal-content a,
.team-modal-content a {
    color: var(--highlight) !important;
}

.modal-content a:hover,
.custom-modal-content a:hover,
.team-modal-content a:hover {
    color: #ffffff !important;
}

.modal-content .btn-outline-dark,
.custom-modal-content .btn-outline-dark,
.team-modal-content .btn-outline-dark {
    border-color: var(--text-main) !important;
    color: var(--text-main) !important;
}

.modal-content .btn-outline-dark:hover,
.custom-modal-content .btn-outline-dark:hover,
.team-modal-content .btn-outline-dark:hover {
    background-color: var(--highlight) !important;
    color: var(--text-secondary) !important;
}




.body {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.25rem !important;
    /* 20px */
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-main) !important;
}



/* Shutter Logo Header Elements */
.logo-title-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    direction: ltr;
}

.shutter-badge-wrapper {
    position: relative;
    padding: 24px;
    transition: transform 0.4s ease;
}

.shutter-badge-wrapper:hover {
    transform: rotate(45deg);
}

.shutter-badge-wrapper .bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--highlight) !important;
}

.shutter-badge-wrapper .bracket.top-left {
    top: 0;
    left: 0;
    border-top: 3px solid var(--highlight);
    border-left: 3px solid var(--highlight);
}

.shutter-badge-wrapper .bracket.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid var(--highlight);
    border-right: 3px solid var(--highlight);
}

.shutter-svg {
    color: #ffffff;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.shutter-badge-wrapper:hover .shutter-svg {
    transform: scale(1.1);
}

/* התאמה למסכים קטנים/מובייל - גופן גוף 16px */
@media (max-width: 768px) {
    body {
        font-size: 16px !important;
    }

    p,
    li,
    .body {
        font-size: 1rem !important;
        /* 16px */
    }
}

@media (min-width: 768px) {
    .border-start-md {
        border-inline-start: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
}

/* Scenario navigation hover styles */
.prev-scenario-btn:hover:not(:disabled),
.next-scenario-btn:hover:not(:disabled) {
    opacity: 1 !important;
    transform: scale(1.15);
}

/* Custom About Modal - Light Theme Override & Compact Layout */
#aboutModal .modal-content {
    background-color: #ebebeb !important;
    color: #0c003b !important;
    border: 1px solid rgba(12, 0, 59, 0.15) !important;
    box-shadow: 0 10px 30px rgba(12, 0, 59, 0.25) !important;
}

#aboutModal .modal-header,
#aboutModal .modal-footer {
    border-color: rgba(12, 0, 59, 0.1) !important;
    padding: 0.75rem 1.25rem !important;
}

#aboutModal .modal-body {
    padding: 1.25rem !important;
}

#aboutModal .modal-title {
    font-size: 1.2rem !important;
}

#aboutModal h4 {
    font-size: 1.25rem !important;
}

#aboutModal p {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
}

#aboutModal .body {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
}

#aboutModal li {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
}

#aboutModal .modal-title,
#aboutModal h4,
#aboutModal p,
#aboutModal strong,
#aboutModal .body,
#aboutModal li {
    color: #0c003b !important;
}

#aboutModal .text-cyan {
    color: #0b5b70 !important;
    /* Darker cyan for high contrast on light background */
}

#aboutModal a {
    color: #f37748 !important;
    /* Accent orange for links for high contrast */
    text-decoration: underline !important;
}

#aboutModal a:hover {
    color: #0c003b !important;
}

#aboutModal .btn {
    background-color: #ffffff !important;
    color: #0c003b !important;
    border: 2px solid rgba(12, 0, 59, 0.15) !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    /* matches rounded-3 */
    padding: 6px 24px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

#aboutModal .btn:hover {
    background-color: #0c003b !important;
    color: #ebebeb !important;
    border-color: #0c003b !important;
    box-shadow: 0 6px 15px rgba(12, 0, 59, 0.15) !important;
}

#aboutModal .about-modal-logo-img {
    max-height: 38px !important;
}

#aboutModal .about-modal-logo-container .about-modal-logo-img {
    max-height: 55px !important;
}

#aboutModal .about-modal-logo-img[src*="magnific" i],
#aboutModal .about-modal-logo-img.logo-magnific {
    max-height: 22px !important;
}

#aboutModal .btn-close {
    filter: none !important;
    /* Force standard dark close button */
}

/* About Modal Logo Styling */
.about-modal-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    max-width: 100%;
}

.about-modal-logo-img {
    max-height: 50px;
    width: auto;
    transition: transform 0.2s ease;
}

.about-modal-logo-img:hover {
    transform: scale(1.05);
}

/* 3D Team Carousel Styles */
.team-carousel-wrapper {
    max-width: 600px;
    height: 350px;
}

.team-carousel-btn {
    width: 80px;
    z-index: 100;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 1;
}

.team-info-section {
    max-width: 400px;
}

.team-info-hr {
    border-width: 2px;
}

.team-info-name {
    font-family: 'Heebo', sans-serif;
}

/* General Layout & Image Helpers to replace inline styles */
.content-max-width-ch {
    max-width: 65ch;
}

.video-container-max-width {
    max-width: 800px;
}

.intro-text-max-width {
    max-width: 75ch;
}

.laub-hero-image {
    max-width: 600px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.laub-caption-text {
    font-size: 0.85rem;
    color: var(--text-main);
    max-width: 600px;
    margin: 15px 0 0 0;
    text-align: start;
}

.section-laub-padding {
    padding: 5vh 0;
}

.laub-video-wrapper {
    max-width: 550px;
}

.team-3d-container {
    transform-style: preserve-3d;
}

/* Disabled state layout helpers */
.link-disabled-state {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.item-coming-soon {
    opacity: 0.5 !important;
}

/* Custom Header Logo & Menu Icon Size (Optimized, no CSS zoom) */
.logo-icon .nav-icon-img {
    height: 46px;
    /* Optimized height on mobile */
    transition: height 0.3s ease;
}

@media (min-width: 1025px) {
    .logo-icon .nav-icon-img {
        height: 54px;
        /* Optimized height on desktop */
    }
}

/* Set mobile menu button back to comfortable standard default */
.mobile-menu-wrapper .nav-icon-link {
    min-width: 44px;
    min-height: 44px;
}

.mobile-menu-wrapper .nav-icon-img {
    height: 44px;
}

.list-icon {
    margin-top: 0.3em;
}

i.list-icon {
    font-size: 20px;
    line-height: 1;
    color: var(--highlight);
    display: inline-block;
    width: auto;
    height: auto;
}

.btn-nav-arrow {
    text-decoration: none !important;
    transition: all 0.2s;
}

.min-height-90 {
    min-height: 90px !important;
}

.step-summary-container h2 {
    line-height: 1.6;
    font-size: 1.35rem;
}

/* Custom Completion Card Design for Exercises */
.exercise-success-card {
    background-color: var(--grey-light) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 16px !important;
    padding: 3rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    max-width: 600px;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.exercise-success-card h3 {
    color: var(--accent-color) !important;
    font-weight: 700 !important;
}

.exercise-success-card p {
    color: var(--text-secondary) !important;
}

.list-padding-rtl {
    padding-right: 1.25rem !important;
}

.faculty-footer-telem-logo {
    max-height: 84px;
    width: auto;
}

/* Button style for repeating exercises (solid dark theme matching the design) */
.btn-repeat-exercise {
    background-color: var(--main-bg) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.2s ease;
    white-space: nowrap !important;
}

.btn-repeat-exercise:hover {
    background-color: var(--secondary-blue) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

.text-limit-error {
    color: #ff4d4d !important;
}