.banner{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),url(source/designstudio-background.png?v=1);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(6, 137, 206, 0.1) !important;
}

.banner{
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),url('source/designstudio-background.jpg?v=1');
}

.content h1{
    white-space: nowrap;
}

.m1, .m2, .m3, .m4, .m5, .m6, .m-last{
    position: relative;
    z-index: 1;
    margin-bottom: clamp(40px, 10vw, 80px);
    padding: clamp(25px, 8vw, 60px);
}

.m-last{
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Design Studio steps spacing */
.d1 {
    margin-bottom: clamp(30px, 8vw, 50px);
}

.d1 h1 {
    margin-bottom: clamp(12px, 3vw, 18px);
}

.d1 p {
    margin-bottom: clamp(20px, 5vw, 30px);
}

/* Decrease image width and height on desktop (laptop/PC interface) */
@media (min-width: 992px) {
    .d1 div:last-child img {
        width: 70%;
        max-height: 350px;
        margin: 0 auto;
        display: block;
    }
}

.m1 img, .m3 img, .m5 img, .m6 img{
    max-width: 100%;
    height: auto;
    display: block;
}

.quiz-section{
    
    padding: 0;
    clear: both;
    margin-bottom: 60px; 
    position: relative;
    z-index: 0;
    margin-left: 0;
    margin-right: 0;
}

.quiz-frame {
    border: 3px solid #0689ce;
    border-radius: 15px;
    padding: 15px;
    background: white;
    box-shadow: 0 4px 20px rgba(235, 89, 95, 0.15);
    position: relative;
    margin: 0;
}

.quiz-section-panel {
    transition: opacity 0.3s ease-in-out;
}

#quizSection0 > div:not(:first-child) {
    margin-bottom: 25px;
}

#quizSection0 > div:first-of-type > div > div {
    margin-bottom: 15px;
}

#quizSection0 > div {
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

#quizSection0 > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#quizSection0 {
    width: calc(100% + 35px) !important;
    margin-left: -50px !important;
    margin-right: -50px !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
    border-radius: 0 !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
    background: #f9f9f9 !important;
}

.quiz-title{
    
    width: 50%;
    
    margin: auto;
    
    text-align: center;
}

.quiz-title h1{
   
   font-size: clamp(28px, 6vw, 45px);
}

.quiz-display{
    
    display: flex;
    
    width: 100%;
    
    justify-content: space-evenly;
    align-items: flex-start; 
}

.quiz-display > div:first-child{
    
    margin: 25px;
    
    height: 200px;
}

.quiz-display div h1{
    
    font-size: clamp(24px, 5vw, 35px);
    
    width: 100%;
    
    margin: 25px 0 25px 0;
}

.quiz-display div p{
    
    font-size: clamp(14px, 3vw, 20px);
}

.quiz-display div img{
    
    display: block;
}

.m2{
    
    margin: 30px 0 20px 0;
}

.m2 div{
    
    text-align: center;
    
    border-radius: 10px;
    
    cursor: pointer;
    
    margin: auto;
    
    width: 872px;
    
    height: 490px;
    
    overflow: hidden;
    
    background: url('source/designstudio-m2-img.png?v=1');

}

.m3{
    
    padding: 50px;
    
    margin: 0 0 100px 0;
    
    text-align: center;
}

.t3 h1{
    
    font-size: clamp(28px, 6vw, 45px);
    
    margin: 0 0 15px 0;
}

.t3 p{
    
    font-size: clamp(16px, 3vw, 19px);
    
    margin: 0 0 30px 0;
}

.m3 .d3{
    
    display: flex;
    
    flex-wrap: wrap;
    
    justify-content: space-evenly;
}

.m3 .d3 div{
    
    width: clamp(100px, 20vw, 150px);
    
    height: clamp(100px, 20vw, 150px);
    
    background: #0689ce;
}

.m3 .d3 div img{
    
    width: clamp(100px, 20vw, 150px);
    
    height: clamp(100px, 20vw, 150px);
}

.t4{
    
    width: 75%;
    
    margin: auto;
}

.t4 h1{
    
    font-size: 45px;
    
    width: 100%;
}

.d4{
    
    width: 75%;
    
    margin: auto;
}

.d4 h4{
    
    font-size: clamp(20px, 4vw, 30px);
    
    font-weight: bold;
}   

.d4 p{
    
    font-size: clamp(16px, 3vw, 23px);
}

.d4 div{
    
    background: #ffd5d5;
    
    margin: 20px;
    
    padding: 10px;
    
    border-radius: 5px;
    
    cursor: pointer;
}

.quiz-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 14px; align-items:start; }

.choice-card { cursor: pointer; background: #fff; border: 1.5px solid #eee; border-radius: 12px; overflow: hidden; display:flex; flex-direction:column; align-items:stretch; }

.choice-card img { width:100%; height:200px; object-fit:cover; display:block; }
.choice-label { padding: 12px; font-weight:600; text-align:center; font-size:1rem; }

.choice-card.selected { border-color: #28a745; box-shadow: 0 12px 30px rgba(40,167,69,0.08); }

.choice-card.disabled { opacity: 0.55; pointer-events: none; filter: grayscale(.05); }

.choice-counter { margin-top: 8px; font-size: 0.95rem; color:#333; }

.choice-badge { position: absolute; right:10px; top:10px; background: rgba(40,167,69,0.95); color:#fff; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; box-shadow: 0 6px 14px rgba(40,167,69,0.12); }

.choice-card .card-inner { position: relative; }

.choice-card:focus { outline: none; box-shadow: 0 0 0 3px rgba(40,167,69,0.12); }

 .quiz-choices{grid-template-columns: repeat(auto-fit,minmax(140px,1fr));}

.quiz-display > div:last-child { height: auto !important; position: relative; z-index: 1; }

.quiz-display > div:last-child .quiz-choices { margin-left: 6px; }

.quiz-slideshow { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; margin-top: 12px; background: transparent; padding: 0; border-radius: 0; position: relative; width: 100%; margin-left: 0; margin-right: 0; }

.slide-nav { background: rgba(6, 137, 206, 0.35); color: #fff; border: none; border-radius: 50%; width: 56px; height: 56px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; }
.slide-nav:hover { background: rgba(5, 64, 132, 0.8); }
.slide-nav-prev { left: 20px; }
.slide-nav-next { right: 20px; left: auto; }

.slide-container { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 1; width: 100%; max-width: 100%; min-height: auto; position: relative; }

.slide-viewer { width: 2336px; height: 1824px; margin: 0 auto; background: #fff; border: none; border-radius: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 2336 / 1824; max-width: 100%; }
.slide-viewer img { width: 100%; height: 100%; object-fit: cover; }

.slide-label { font-weight: 600; font-size: 1.3rem; color: #333; text-align: center; margin-bottom: 8px; display: none; }

.slide-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 0; flex-wrap: wrap; width: auto; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: transparent; z-index: 8; }

.slide-select-btn { padding: clamp(10px, 2vw, 14px) clamp(25px, 5vw, 40px); font-size: clamp(0.95rem, 2vw, 1.05rem); font-weight: 600; border: none; border-radius: 8px; cursor: pointer; position: relative; z-index: 5; opacity: 0.75; }
.slide-select-btn:not(.selected) { background: #0689ce; color: #fff; }
.slide-select-btn:not(.selected):hover { background: #054084; opacity: 1; }
.slide-select-btn.selected { background: #0689ce; color: #fff; }
.slide-select-btn.selected:hover { background: #054084; opacity: 1; }
.slide-select-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.slide-counter { position: absolute; top: 12px; right: 12px; font-size: 0.85rem; color: #333; font-weight: 700; background: rgba(255,255,255,0.55); padding: 6px 10px; border-radius: 6px; letter-spacing: -0.5px; z-index: 9; }

#nextBtn0, #nextBtn1, #nextBtn2, #nextBtn3, #nextBtn4, #nextBtn5, #nextBtn6 {
    position: absolute !important;
    top: 35px !important;
    right: 0 !important;
    bottom: auto !important;
    opacity: 1 !important;
    z-index: 15 !important;
}

#nextBtn0:hover, #nextBtn1:hover, #nextBtn2:hover, #nextBtn3:hover, #nextBtn4:hover, #nextBtn5:hover, #nextBtn6:hover {
    opacity: 1 !important;
    background: #054084 !important;
}

  .slide-nav { width: 48px; height: 48px; font-size: 18px; }
  .slide-container { max-width: 100%; min-height: 500px; }
  .slide-viewer { min-height: 450px; }
  .slide-controls { gap: 12px; }
  .slide-select-btn { padding: 12px 32px; font-size: 1rem; }
  .slide-counter { font-size: 0.8rem; padding: 5px 8px; }

.quiz-question { margin-top: 30px; padding-top: 20px; border-top: 2px solid #eee; }
.quiz-question h2 { font-size: 1.5rem; font-weight: 600; color: #333; margin-bottom: 12px; }
.quiz-question p { font-size: 1rem; color: #666; margin-bottom: 16px; }

    #quizSection0 {
        width: calc(100% + 35px) !important;
        padding: 30px 40px !important;
    }

    .quiz-frame {
        border-radius: 15px;
        padding: 15px;
    }
    
    #quizSection0 {
        width: calc(100% + 35px) !important;
        margin-left: -50px !important;
        margin-right: -50px !important;
        padding: 30px 40px !important;
    }

    #quizSection0 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 25px 20px !important;
        margin-bottom: 15px !important;
    }
    
    .quiz-frame {
        border-radius: 10px;
        padding: 10px;
        border: 2px solid #0689ce;
    }
    
    .slide-viewer {
        width: 100% !important;
        height: auto !important;
        max-width: 800px;
        aspect-ratio: 2336 / 1824 !important;
    }
    
    .slide-select-btn {
        padding: 12px 30px !important;
        font-size: 0.95rem !important;
    }
    
    .slide-nav {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }
    
    h1 { font-size: 28px !important; }
    h2 { font-size: 22px !important; }
    p { font-size: 16px !important; }

    h1 { font-size: 22px; margin-bottom: 15px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }
    p { font-size: 14px; line-height: 1.5; }

    .m1, .m2, .m3, .m4, .m5, .m6, .m-last {
        padding: 25px 15px;
        margin-bottom: 40px;
    }

    .quiz-section {
        padding: 0;
        margin-bottom: 30px;
    }
    
    .quiz-frame {
        border: 2px solid #0689ce;
        border-radius: 8px;
        padding: 10px;
        box-shadow: none;
    }

    #quizSection0 {
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
        border-radius: 0 !important;
    }

    #quizSection0 > div:first-of-type > div > div {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    label { font-size: 14px !important; margin-bottom: 5px !important; }
    input, select {
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
    }

    .slide-viewer {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        aspect-ratio: 2336 / 1824 !important;
    }
    
    .slide-viewer img {
        width: 100% !important;
        height: 100% !important;
    }
    
    .slide-controls {
        bottom: 10px !important;
        gap: 10px !important;
    }
    
    .slide-select-btn {
        padding: clamp(8px, 2vw, 12px) clamp(20px, 4vw, 32px) !important;
        font-size: clamp(13px, 2vw, 15px) !important;
    }
    
    .slide-nav {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        left: 10px !important;
        right: auto !important;
    }
    
    .slide-nav-next {
        right: 10px !important;
        left: auto !important;
    }
    
    .slide-counter {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    label[style*="flex"] {
        flex-direction: column !important;
    }

    input[type="file"] {
        padding: 15px 10px !important;
    }

    button {
        padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 30px) !important;
        font-size: clamp(14px, 2vw, 17px) !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    #nextBtn0, #nextBtn1, #nextBtn2, #nextBtn3, #nextBtn4, #nextBtn5, #nextBtn6 {
        position: static !important;
        margin-top: 20px !important;
        width: 100% !important;
    }

    .quiz-choices {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .choice-card img {
        height: clamp(120px, 30vw, 200px) !important;
    }

    #quizReviewSection {
        padding: clamp(12px, 3vw, 15px) !important;
        margin-top: 20px !important;
    }
    
    #quizReviewSection h2 {
        font-size: clamp(16px, 3vw, 18px) !important;
    }

    #reviewItems img {
        width: clamp(80px, 20vw, 100px) !important;
        height: clamp(60px, 15vw, 80px) !important;
    }