/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: white;
    overflow: auto;
}

/* Page Management */
.page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.page.active {
    display: block;
}

/* Container */
.container {
    width: 1440px;
    height: 1024px;
    margin: 0 auto;
    position: relative;
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Header */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 180px;
    z-index: 100;
}

.logo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -1.68px;
    color: black;
    cursor: pointer;
    transition: opacity 0.3s;
}

.logo:hover {
    opacity: 0.7;
}

.nav {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-item {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.45;
    letter-spacing: -0.12px;
    text-transform: capitalize;
    cursor: pointer;
    transition: all 0.3s;
}

.nav-item:hover {
    opacity: 0.7;
}

.nav-item.active {
    text-decoration: underline;
    text-underline-offset: 8px;
}

/* Content Wrapper */
.content-wrapper {
    position: absolute;
    left: 162px;
    top: 115px;
    width: 1115px;
    height: 793px;
    overflow: hidden;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Intro Overlay */
.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(130, 128, 128, 0.3);
    backdrop-filter: blur(20px);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.intro-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -1.28px;
    color: white;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(133, 133, 133, 0.5), 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 120px;
    margin-bottom: 80px;
}

.intro-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.45;
    letter-spacing: -0.16px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: left;
    max-width: 760px;
    text-transform: capitalize;
}

.intro-text p {
    margin-bottom: 24px;
}

/* Buttons */
.btn-primary {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.45;
    letter-spacing: -0.12px;
    text-transform: uppercase;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    min-width: 120px;
    text-align: center;
    margin-top: 60px;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
}

.btn-primary.btn-bottom-right,
.btn-primary-small.btn-bottom-right {
    position: absolute;
    bottom: 40px;
    right: 40px;
    margin-top: 0;
    z-index: 30;
}

.btn-primary-small {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: -0.06px;
    text-transform: uppercase;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 120px;
    text-align: center;
    transition: all 0.3s;
}

.btn-primary-small:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Quiz Options */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -40px;
    width: 100%;
    max-width: 800px;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.quiz-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.quiz-option.selected {
    background: rgba(255, 255, 255, 0.15);
}

.checkbox-icon {
    width: 36px;
    height: 36px;
    border: 3px solid white;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-option.selected .checkbox-icon::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 16px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    margin-bottom: 4px;
}

.quiz-option p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.45;
    letter-spacing: -0.16px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-transform: capitalize;
}

/* Quiz Feedback */
.quiz-feedback {
    margin-top: 8px;
    padding: 16px 45px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-feedback.correct {
    background: rgba(22, 101, 52, 0.7);
}

.quiz-feedback.wrong {
    background: rgba(126, 12, 0, 0.7);
}

.quiz-feedback p {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Training Wrapper */
.training-wrapper {
    position: relative;
}

.cpr-background {
    position: absolute;
    left: -38px;
    top: -1px;
    width: 1191px;
    height: 794px;
    object-fit: cover;
    z-index: 1;
}

.person-image {
    position: absolute;
    left: -166px;
    top: 164px;
    width: 841px;
    height: 561px;
    object-fit: cover;
    z-index: 6;
    pointer-events: none;
}

.person-image-2 {
    position: absolute;
    left: 408px;
    top: 130px;
    width: 861px;
    height: 574px;
    object-fit: cover;
    transform: rotate(180deg) scaleY(-1);
    z-index: 5;
}

.ground-image {
    position: absolute;
    left: 131px;
    top: 275px;
    width: 933px;
    height: 622px;
    object-fit: cover;
    z-index: 9;
    pointer-events: none;
}

.shocked-man {
    position: absolute;
    left: 154px;
    top: 82px;
    width: 466px;
    height: 466px;
    object-fit: cover;
    z-index: 4;
}

.cpr-woman {
    position: absolute;
    left: 124px;
    top: 208px;
    width: 598px;
    height: 399px;
    object-fit: cover;
    z-index: 5;
}

.head-tilt-image {
    position: absolute;
    left: 182px;
    top: 331px;
    width: 816px;
    height: 544px;
    object-fit: cover;
    z-index: 8;
}

.rescue-breath-image {
    position: absolute;
    left: 162px;
    top: 361px;
    width: 401px;
    height: 269px;
    object-fit: cover;
    z-index: 7;
}

/* Training Cards */
.training-card {
    position: absolute;
    display: flex;
    width: 340px;
    padding: 8px 12px 16px 12px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 15px;
    background: rgba(130, 128, 128, 0.70);
    backdrop-filter: blur(20px);
    z-index: 20;
}

.training-card:not(.active) {
    display: none;
}

.training-card.active {
    display: flex;
}

.training-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-transform: capitalize;
    text-align: center;
    margin: 0;
}

.training-card ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
    width: 100%;
}

.training-card li {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 8px;
}

.training-card li:last-child {
    margin-bottom: 0;
}

.training-card strong {
    font-weight: 700;
}

.training-card .btn-primary-small {
    display: block;
}

.card-1, .card-2 {
    left: 388px;
    top: 238px;
}

.card-3 {
    left: 388px;
    top: 290px;
}

.card-4 {
    left: 559px;
    top: 172px;
}

.card-5 {
    left: 558px;
    top: 220px;
}

.card-6 {
    left: 558px;
    top: 220px;
    height: 285px;
}

.critical-note {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

/* Pulse Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
}

/* Pulse Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
}

@keyframes pulseSmall {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes pulse110bpm {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.pulse-circle, .pulse-ellipse {
    position: absolute;
    animation: pulse 2s ease-in-out infinite;
    z-index: 15;
}

.pulse-circle {
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.75);
}

.pulse-ellipse {
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.75);
}

/* Training 1 Card 1 circles */
.circle-1 {
    left: 350px;
    top: 496px;
    width: 40px;
    height: 40px;
    animation: pulseSmall 2s ease-in-out infinite;
}

.circle-2 {
    left: 335px;
    top: 554px;
    width: 40px;
    height: 40px;
    animation: pulseSmall 2s ease-in-out infinite;
}

.ellipse-1 {
    left: 38px;
    top: 470px;
    width: 1058px;
    height: 280px;
    z-index: 2;
}

/* Training 1 Card 2 circles */
.card2-circles.circle-3 {
    left: 389px;
    top: 499px;
    width: 70px;
    height: 70px;
    animation: pulse 2s ease-in-out infinite;
}

.card2-circles.circle-4 {
    left: 337px;
    top: 528px;
    width: 34px;
    height: 34px;
    animation: pulseSmall 2s ease-in-out infinite;
}

/* Control visibility of circles per card */
.card1-circles {
    display: block;
}

.card2-circles {
    display: none;
}

/* Training 3 ellipses */
.ellipse-2 {
    left: 261px;
    top: 45px;
    width: 297px;
    height: 438px;
}

.ellipse-3 {
    left: 705px;
    top: 165px;
    width: 255px;
    height: 431px;
}

/* Training 4 */
.ellipse-4 {
    left: 196px;
    top: 516px;
    width: 825px;
    height: 173px;
    z-index: 2;
}

#page-training4 .circle-3 {
    left: 399px;
    top: 458px;
    width: 70px;
    height: 70px;
    z-index: 2;
}

.ellipse-5 {
    left: 317px;
    top: 298px;
    width: 204px;
    height: 195px;
}

/* Training 5 Arrow */
.compression-arrow {
    position: absolute;
    left: 435px;
    top: 495px;
    width: 3px;
    height: 33px;
    background: rgb(255, 0, 0);
    animation: pulse110bpm 0.545s ease-in-out infinite;
    z-index: 10;
}

.compression-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8.66px solid transparent;
    border-right: 8.66px solid transparent;
    border-bottom: 15px solid rgb(255, 0, 0);
}

.compression-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8.66px solid transparent;
    border-right: 8.66px solid transparent;
    border-top: 15px solid rgb(255, 0, 0);
}

/* Training 6 circles */
#page-training6 .circle-4 {
    left: 311px;
    top: 496px;
    width: 40px;
    height: 40px;
}

#page-training6 .circle-5 {
    left: 261px;
    top: 520px;
    width: 34px;
    height: 34px;
}

/* Practice Instructions */
.practice-instruction {
    position: absolute;
    left: 388px;
    top: 238px;
    display: flex;
    width: 340px;
    padding: 8px 12px 16px 12px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 15px;
    background: rgba(130, 128, 128, 0.70);
    backdrop-filter: blur(20px);
    z-index: 16;
}

.practice-instruction-right {
    left: 535px;
}

.practice-instruction h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-transform: capitalize;
    text-align: center;
    margin: 0;
}

.instruction-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.08px;
    color: rgba(255, 0, 0, 0.7);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin: 0;
}

/* Interactive Elements */
.interactive-circle, .interactive-ellipse {
    position: absolute;
    cursor: pointer;
    animation: pulse 2s ease-in-out infinite;
    transition: transform 0.2s;
    z-index: 15;
}

.interactive-circle {
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.75);
}

.interactive-ellipse {
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.75);
}

.interactive-circle:hover, .interactive-ellipse:hover {
    transform: scale(1.1);
}

/* Practice 1 */
.practice1-circle1 {
    left: 350px;
    top: 496px;
    width: 40px;
    height: 40px;
    animation: pulseSmall 2s ease-in-out infinite;
}

.practice1-circle2 {
    left: 335px;
    top: 554px;
    width: 40px;
    height: 40px;
    animation: pulseSmall 2s ease-in-out infinite;
}

.practice1-ellipse1 {
    left: 38px;
    top: 470px;
    width: 1058px;
    height: 280px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    z-index: 2;
}

/* Practice 2 */
.practice2-circle1 {
    left: 337px;
    top: 524px;
    width: 34px;
    height: 34px;
}

.practice2-circle2 {
    left: 389px;
    top: 495px;
    width: 70px;
    height: 70px;
}

/* Practice 3 */
.practice3-ellipse1 {
    left: 261px;
    top: 77px;
    width: 297px;
    height: 438px;
    z-index: 10;
}

.practice3-ellipse2 {
    left: 705px;
    top: 165px;
    width: 255px;
    height: 431px;
    z-index: 10;
}

/* Practice Cards */
.practice-card {
    position: absolute;
    background: rgba(255, 0, 0, 0.4);
    border-radius: 10px;
    padding: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.264px;
    z-index: 20;
    animation: fadeIn 0.3s ease-in-out;
}

.card-p1 {
    left: 406px;
    top: 673px;
    width: 333px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-p2 {
    left: 338px;
    top: 411px;
    width: 569px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-p3 {
    left: 337px;
    top: 393px;
    width: 373px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-p3 .card-title {
    font-size: 24px;
    margin-bottom: 16px;
}

.card-p3 .card-text {
    font-size: 16px;
}

.card-p4 {
    left: 459px;
    top: 500px;
    width: 420px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Feedback Cards */
.feedback-card {
    position: absolute;
    background: rgba(255, 0, 0, 0.4);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    animation: fadeIn 0.3s ease-in-out;
}

.feedback-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    margin: 0;
    letter-spacing: -0.264px;
}

.feedback-card strong {
    font-weight: 700;
}

.feedback-p1 {
    left: 406px;
    bottom: 90px;
    width: 333px;
    min-height: 58px;
}

.feedback-p2 {
    left: 338px;
    bottom: 324px;
    width: 569px;
    min-height: 58px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-p5 {
    left: 82px;
    top: 120px;
    width: 265px;
    padding: 8px;
}

.card-p6 {
    left: 780px;
    top: 320px;
    width: 118px;
    padding: 8px;
}

/* Practice 4 */
.practice4-ellipse1 {
    left: 196px;
    top: 516px;
    width: 825px;
    height: 173px;
    z-index: 4;
}

.practice4-circle1 {
    left: 399px;
    top: 458px;
    width: 70px;
    height: 70px;
}

.practice4-ellipse2 {
    left: 317px;
    top: 298px;
    width: 204px;
    height: 195px;
}

.card-p7 {
    left: 280px;
    top: 694px;
    width: 574px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-p8 {
    left: 535px;
    top: 458px;
    width: 470px;
    height: auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.card-p9 {
    left: 535px;
    top: 345px;
    width: 449px;
    height: auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* Practice 5 */
.interactive-arrow {
    position: absolute;
    cursor: pointer;
    animation: pulse110bpm 0.545s ease-in-out infinite;
    transition: transform 0.2s;
    z-index: 10;
}

.practice5-arrow {
    left: 435px;
    top: 495px;
    width: 3px;
    height: 33px;
    background: rgb(255, 0, 0);
}

.practice5-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8.66px solid transparent;
    border-right: 8.66px solid transparent;
    border-bottom: 15px solid rgb(255, 0, 0);
}

.practice5-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8.66px solid transparent;
    border-right: 8.66px solid transparent;
    border-top: 15px solid rgb(255, 0, 0);
}

.interactive-arrow:hover {
    transform: scale(1.1);
}

.card-p10 {
    left: 479px;
    top: 395px;
    width: auto;
    max-width: 650px;
    height: auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px !important;
}

.card-p11 {
    left: 180px;
    top: 483px;
    width: auto;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: transparent;
    color: rgb(255, 0, 0);
    font-size: 24px;
    font-weight: 700;
}

.card-p10b {
    left: 280px;
    top: 694px;
    width: 388px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Practice 6 */
.practice6-circle1 {
    left: 311px;
    top: 496px;
    width: 40px;
    height: 40px;
}

.practice6-circle2 {
    left: 261px;
    top: 520px;
    width: 34px;
    height: 34px;
    background: rgba(255, 0, 0, 0.95);
}

.card-p12 {
    left: 200px;
    top: 680px;
    width: 499px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-p14 {
    left: 510px;
    top: 450px;
    width: 436px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Assessment Styles */
.assessment-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.72px;
    color: white;
    text-align: left;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 50px;
    margin-bottom: 40px;
    max-width: 1030px;
    width: 100%;
    align-self: flex-start;
}

/* Sequence Container for Drag and Drop */
.sequence-container {
    display: grid;
    grid-template-columns: repeat(3, 340px);
    gap: 26px 18px;
    margin-top: 20px;
    z-index: 20;
    justify-self: center;
}

.sequence-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 82px;
    padding: 8px 12px;
    background: rgba(130, 128, 128, 0.7);
    border-radius: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    text-transform: capitalize;
    cursor: grab;
    transition: all 0.3s;
    user-select: none;
}

.sequence-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.sequence-item.over {
    border: 2px dashed white;
}

.sequence-item:hover {
    background: rgba(130, 128, 128, 0.85);
    transform: translateY(-2px);
}

.sequence-item.correct {
    /* No style changes - keep original appearance */
}

/* Assessment Item Feedback */
.assessment-item-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 45px;
    background: rgba(22, 101, 52, 0.7);
    border-radius: 15px;
    margin-top: 72px;
}

.assessment-item-feedback .feedback-icon {
    width: 87px;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.assessment-item-feedback .feedback-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Assessment Wrong Feedback */
.assessment-wrong-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 45px;
    background: rgba(126, 12, 0, 0.7);
    border-radius: 15px;
    margin-top: 72px;
}

.assessment-wrong-feedback .feedback-icon {
    font-size: 48px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.assessment-wrong-feedback .feedback-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 617px;
}

.assessment-wrong-feedback .feedback-text p {
    margin: 0;
}

/* Assessment Complete Feedback */
.assessment-complete-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 45px;
    background: rgba(22, 101, 52, 0.7);
    border-radius: 15px;
    margin-top: 72px;
}

/* Assessment 2 Specific Feedback Spacing */
#assessment2-correct-feedback,
#assessment2-wrong-feedback {
    margin-top: 8px;
}

/* Assessment 3 Specific Feedback Spacing */
#assessment3-correct-feedback,
#assessment3-wrong-feedback {
    margin-top: 8px;
}

.assessment-complete-feedback .feedback-icon {
    width: 87px;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.assessment-complete-feedback .feedback-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 617px;
}

.assessment-complete-feedback .feedback-text p {
    margin: 0;
}

/* Checkbox Options for Multiple Selection */
.checkbox-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    width: 100%;
    max-width: 962px;
    z-index: 20;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
}

.checkbox-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

.checkbox-option input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 36px;
    height: 36px;
    border: 3px solid white;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
    background: rgba(255, 255, 255, 0.2);
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 16px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    margin-bottom: 4px;
}

.checkbox-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.1px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* End Page Styles */
.end-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: white;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 60px;
    margin-bottom: 60px;
    max-width: 900px;
}

.end-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.45;
    letter-spacing: -0.16px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: left;
    max-width: 1030px;
    margin-bottom: 40px;
}

.end-text p {
    margin: 0;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive adjustments (if needed) */
@media screen and (max-width: 1440px) {
    .container {
        transform: scale(0.9);
        transform-origin: top center;
    }
}