/* =========================
PROGRAM MODAL OVERLAY
========================= */

.program-modal-overlay{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.58);

    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);

    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:clamp(12px,2.2vw,28px);

    overflow:hidden;

    overscroll-behavior:contain;

    opacity:0;
    visibility:hidden;

    transition:
    opacity 0.45s ease,
    visibility 0.45s ease,
    backdrop-filter 0.45s ease;
}

.program-modal-overlay.active{
    opacity:1;
    visibility:visible;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* =========================
BODY LOCK
========================= */

html.modal-open,
body.modal-open{
    overflow:hidden;
    overscroll-behavior:none;
}

/* =========================
MAIN MODAL
========================= */

.program-modal{
    width:100%;
    max-width:1420px;
    max-height:calc(100vh - 40px);
    background:
    radial-gradient(circle at 80% 18%, rgba(255,235,235,0.95) 0, rgba(255,242,242,0.58) 24%, transparent 48%),
    linear-gradient(180deg,#ffffff 0%,#fffdfd 100%);
    border-radius:28px;
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
    padding:clamp(22px,2.4vw,34px) clamp(26px,3.1vw,46px) clamp(18px,2vw,26px);
    box-shadow:
    0 24px 80px rgba(0,0,0,0.22);
    scrollbar-width:thin;
    scrollbar-color:rgba(202,52,52,0.35) transparent;
    opacity:0;
transform:
translateY(40px)
scale(0.94);
transition:
opacity 0.45s cubic-bezier(0.22,1,0.36,1),
transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.program-modal-overlay.active .program-modal{
    opacity:1;

    transform:
    translateY(0)
    scale(1);
}
.program-modal::-webkit-scrollbar{
    width:8px;
}

.program-modal::-webkit-scrollbar-thumb{
    background:rgba(202,52,52,0.32);
    border-radius:999px;
}

.program-modal::-webkit-scrollbar-track{
    background:transparent;
}

/* =========================
CLOSE BUTTON
========================= */

.program-modal-close{
    position:absolute;
    top:22px;
    right:22px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#ffffff;
    font-size:22px;
    cursor:pointer;
    z-index:100;
    box-shadow:
    0 10px 28px rgba(0,0,0,0.10);
    transition:
    transform 0.45s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
    will-change:transform;
}

.program-modal-close:hover{
    transform:rotate(180deg) scale(1.08);
    background:#ffffff;
    box-shadow:
    0 10px 25px rgba(202,52,52,0.18);
}

.program-modal-close i{
    transition:
    color 0.35s ease;
}

.program-modal-close:hover i{
    color:#ca3434;
}

/* =========================
TOP HERO
========================= */

.program-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,0.9fr);
    gap:clamp(14px,2vw,34px);
    align-items:start;
    margin-bottom:0;
}

/* =========================
LEFT
========================= */

.program-hero-left{
    position:relative;
    z-index:35;
    padding-top:36px;
}

.program-main-title{
    font-size:clamp(54px,4.6vw,72px);
    line-height:0.94;
    font-weight:800;
    letter-spacing:0;
    margin-bottom:12px;
    color:#b30000;
}

.program-main-title .plus-text{
    color:#111827;
}

.program-main-desc{
    font-size:clamp(14px,1vw,16px);
    line-height:1.45;
    color:#606060;
    max-width:640px;
    margin-bottom:20px;
}

/* =========================
TOP INFO GRID
========================= */

.program-info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    max-width:675px;
}

.program-info-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 13px;
    border-radius:14px;
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(230,230,230,0.88);
    min-height:58px;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:
    0 12px 28px rgba(18,24,40,0.06);
}

.program-info-icon{
    width:38px;
    height:38px;
    border-radius:13px;
    background:#fff2f2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ca3434;
    font-size:15px;
    flex-shrink:0;
}

.program-info-content h4{
    font-size:13px;
    line-height:1.2;
    margin-bottom:2px;
    color:#171717;
}

.program-info-content p{
    font-size:11px;
    line-height:1.25;
    color:#5d5d5d;
}

/* =========================
RIGHT IMAGE
========================= */

.program-hero-right{
    position:relative;
    height:338px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:visible;
    padding-top:0;
    pointer-events:none;
}

/* =========================
CIRCLES
========================= */

.program-circle{
    position:absolute;
    border-radius:50%;
    border:1px dashed rgba(202,52,52,0.13);
    top:47%;
    left:50%;
    transform:translate(-50%,-50%);
}

.circle-1{
    width:394px;
    height:394px;
    border:
    1px dashed
    rgba(202,52,52,0.12);
}

.circle-2{
    width:522px;
    height:522px;
    border:
    1px dashed
    rgba(202,52,52,0.10);
}

.circle-3{
    width:650px;
    height:650px;
    border:
    1px dashed
    rgba(202,52,52,0.08);
}

/* =========================
STUDENT CIRCLE
========================= */

.program-student-circle{
    width:334px;
    height:334px;
    border-radius:50%;
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(
        circle at center,
        rgba(232,38,32,0.72) 0%,
        rgba(238,65,58,0.58) 36%,
        rgba(250,223,223,1) 72%
    );
    display:flex;
    align-items:flex-start;
    justify-content:center;
    z-index:10;
    box-shadow:
    0 28px 60px rgba(255,70,70,0.08);
}

.program-student-circle::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.18),
        transparent 68%
    );
    pointer-events:none;
}

.program-student-image{
    position:absolute;
    width:305px;
    object-fit:contain;
    left:50%;
    top:12px;
    transform:
    translateX(-50%)
    scale(1.05);
    z-index:15;
    filter:
    drop-shadow(
        0 18px 24px
        rgba(0,0,0,0.15)
    );
}

/* =========================
FLOATING ICONS
========================= */

.floating-icon{
    position:absolute;
    width:62px;
    height:62px;
    border-radius:50%;
    background:
    rgba(255,255,255,0.74);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ca3434;
    font-size:19px;
    box-shadow:
    0 18px 42px rgba(20,20,20,0.10);
    z-index:30;
    animation:
    floatIcon 4s ease-in-out infinite;
}

.floating-icon-1{
    left:20%;
    top:128px;
}

.floating-icon-2{
    right:18%;
    top:116px;
}

@keyframes floatIcon{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* =========================
FEATURE GRID
========================= */

.program-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:-82px;
    position:relative;
    z-index:50;
    align-items:stretch;
    grid-auto-rows:1fr;
    isolation:isolate;
}

.program-feature-grid::before{
    content:"";
    position:absolute;
    left:-2px;
    right:-2px;
    top: 0px;
    bottom:-2px;
    border-radius:0 0 20px 20px;
    background:rgba(255,255,255,0.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    pointer-events:none;
    z-index:0;
}

.program-feature-card{
    display:flex;
    flex-direction:column;
    background:rgba(255,255,255,0.64);
    border:1px solid rgba(232,232,232,0.9);
    border-radius:17px;
    padding:18px 20px;
    min-height:148px;
    height:100%;
    backdrop-filter:blur(26px) saturate(1.08);
    -webkit-backdrop-filter:blur(26px) saturate(1.08);
    box-shadow:
    0 18px 44px rgba(18,24,40,0.08);
    position:relative;
    z-index:1;
}

.program-feature-card:nth-child(n+3){
    background:rgba(255,255,255,0.58);
    backdrop-filter:blur(34px) saturate(1.12);
    -webkit-backdrop-filter:blur(34px) saturate(1.12);
}

.feature-top{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:14px;
}

.feature-icon{
    width:40px;
    height:40px;
    border-radius:14px;
    background:
    linear-gradient(135deg,#fff5f5 0%,#fff0f0 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ca3434;
    font-size:17px;
    flex-shrink:0;
    box-shadow:
    0 8px 18px rgba(202,52,52,0.08);
}

.feature-top h3{
    font-size:17px;
    line-height:1.25;
    font-weight:800;
    color:#161616;
}

.feature-list{
    list-style:none;
    padding-left:0;
    margin:0;
}

.feature-list li{
    position:relative;
    font-size:13px;
    line-height:1.55;
    margin-bottom:5px;
    color:#333;
    padding-left:18px;
}

.feature-list li::before{
    content:"";
    position:absolute;
    left:2px;
    top:0.72em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#ca3434;
    transform:translateY(-50%);
}

.feature-desc{
    font-size:13px;
    line-height:1.55;
    color:#333;
    margin:0;
}

.timing-item h4{
    font-size:13px;
    line-height:1.2;
    margin-bottom:3px;
    color:#151515;
}

.timing-item p{
    font-size:13px;
    line-height:1.35;
    color:#333;
}

.timing-divider{
    width:100%;
    height:1px;
    background:#ececec;
    margin:12px 0;
}

/* =========================
COURSE STRUCTURE
========================= */

.course-structure-section{
    margin-top:18px;
    position:relative;
    z-index:60;
}

.course-structure-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.course-structure-icon{
    width:32px;
    height:32px;
    border-radius:12px;
    background:#fff3f3;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ca3434;
    font-size:15px;
}

.course-structure-title h2{
    font-size:20px;
    line-height:1.25;
    font-weight:800;
    color:#111111;
}

.course-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
}

.course-card{
    position:relative;
    border:1px solid #ececec;
    border-radius:17px;
    background:rgba(255,255,255,0.78);
    padding:16px 22px 18px;
    min-height:0;
    height:100%;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:
    0 12px 28px rgba(18,24,40,0.045);
}

.course-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    background:
    linear-gradient(
        135deg,
        #ff3b30,
        #c41212
    );
    color:#ffffff;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    margin-bottom:12px;
    box-shadow:
    0 8px 18px rgba(202,52,52,0.18);
}

.course-card-inner{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}

.course-column + .course-column{
    border-left:1px solid #eeeeee;
    padding-left:clamp(18px,2.4vw,34px);
}

.course-column h3{
    font-size:14px;
    line-height:1.25;
    color:#a52727;
    margin-bottom:9px;
    font-weight:800;
}

.course-column ul{
    list-style:none;
    padding-left:0;
    margin:0;
}

.course-column li{
    position:relative;
    font-size:13px;
    line-height:1.48;
    color:#333;
    margin-bottom:7px;
    padding-left:18px;
}

.course-column li::before{
    content:"";
    position:absolute;
    left:1px;
    top:0.74em;
    width:7px;
    height:7px;
    border:1px solid #ca3434;
    border-radius:50%;
    transform:translateY(-50%);
    box-sizing:border-box;
}

/* =========================
APPLY BUTTON
========================= */

.program-apply-wrapper{
    margin-top:14px;
    min-height:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

/* =========================
APPLY BUTTON
========================= */

.program-apply-btn{
    position:relative;
    height:54px;
    padding:
    0 6px
    0 24px;
    border-radius:999px;
    background:
    linear-gradient(
        135deg,
        #ff5a4f 0%,
        #e1281d 45%,
        #c41212 100%
    );
    color:#ffffff;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    font-size:17px;
    font-weight:700;
    letter-spacing:0;
    overflow:hidden;
    transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.45s ease;
    box-shadow:
    0 10px 28px rgba(202,52,52,0.28);
}

/* SHINE EFFECT */

.program-apply-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.28),
        transparent
    );
    transform:skewX(-25deg);
    transition:0.7s;
}

/* HOVER */

.program-apply-btn:hover{
    transform:
    translateY(-3px)
    scale(1.02);
    background:
    linear-gradient(
        135deg,
        #ff6d63 0%,
        #ef3024 45%,
        #d91616 100%
    );
    box-shadow:
    0 18px 34px rgba(202,52,52,0.34);
}

.program-apply-btn:hover::before{
    left:130%;
}

/* TEXT */

.program-apply-btn strong{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:6px;
}

/* RIGHT ARROW CIRCLE */

.program-apply-btn span{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#ffffff;
    color:#ca3434;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    flex-shrink:0;
    transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

/* ARROW ANIMATION */

.program-apply-btn:hover span{
    transform:translateX(3px);
    background:#fff5f5;
    color:#b30000;
}

/* =========================
RESPONSIVE FIT
========================= */

@media (max-height:860px) and (min-width:1025px){
    .program-modal{
        max-height:calc(100vh - 24px);
        padding:18px 34px 18px;
    }

    .program-hero-left{
        padding-top:26px;
    }

    .program-main-title{
        font-size:52px;
        margin-bottom:8px;
    }

    .program-main-desc{
        font-size:13px;
        line-height:1.35;
        margin-bottom:14px;
    }

    .program-info-grid{
        gap:10px;
    }

    .program-info-card{
        min-height:54px;
        padding:8px 10px;
        border-radius:14px;
        gap:8px;
    }

    .program-info-icon{
        width:34px;
        height:34px;
        border-radius:11px;
        font-size:14px;
    }

    .program-info-content h4{
        font-size:12px;
    }

    .program-info-content p{
        font-size:10px;
    }

    .program-hero-right{
        height:280px;
        padding-top:0;
    }

    .program-student-circle{
        width:282px;
        height:282px;
    }

    .program-student-image{
        width:258px;
        top:9px;
    }

    .circle-1{
        width:332px;
        height:332px;
    }

    .circle-2{
        width:442px;
        height:442px;
    }

    .circle-3{
        width:548px;
        height:548px;
    }

    .floating-icon{
        width:52px;
        height:52px;
        font-size:17px;
    }

    .floating-icon-1{
        left:19%;
        top:108px;
    }

    .floating-icon-2{
        right:17%;
        top:98px;
    }

    .program-feature-grid{
        gap:12px;
        margin-top:-78px;
    }

    .program-feature-card{
        padding:12px 14px;
        border-radius:14px;
        min-height:136px;
    }

    .feature-top{
        gap:10px;
        margin-bottom:8px;
    }

    .feature-icon{
        width:34px;
        height:34px;
        border-radius:11px;
        font-size:14px;
    }

    .feature-top h3{
        font-size:14px;
    }

    .feature-list li,
    .feature-desc,
    .timing-item p,
    .course-column li{
        font-size:11px;
        line-height:1.38;
    }

    .feature-list li,
    .course-column li{
        margin-bottom:4px;
    }

    .timing-item h4{
        font-size:12px;
    }

    .timing-divider{
        margin:8px 0;
    }

    .course-structure-section{
        margin-top:11px;
    }

    .course-structure-title{
        margin-bottom:8px;
        gap:8px;
    }

    .course-structure-icon{
        width:26px;
        height:26px;
        border-radius:9px;
        font-size:13px;
    }

    .course-structure-title h2{
        font-size:17px;
    }

    .course-grid{
        gap:12px;
    }

    .course-card{
        padding:12px 16px 13px;
        border-radius:14px;
    }

    .course-badge{
        padding:6px 14px;
        margin-bottom:8px;
        font-size:10px;
    }

    .course-card-inner{
        gap:18px;
    }

    .course-column + .course-column{
        padding-left:18px;
    }

    .course-column h3{
        font-size:12px;
        margin-bottom:7px;
    }

    .program-apply-wrapper{
        min-height:0;
        padding:0;
        margin-top:12px;
        border-radius:0;
    }

    .program-apply-btn{
        height:48px;
        font-size:15px;
    }

    .program-apply-btn span{
        width:36px;
        height:36px;
    }
}

@media (max-width:1180px){
    .program-modal{
        max-height:calc(100vh - 28px);
    }

    .program-hero{
        grid-template-columns:1fr;
    }

    .program-hero-right{
        position:absolute;
        top:24px;
        right:28px;
        width:42%;
        min-width:330px;
        opacity:0.38;
    }

    .program-info-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:560px;
    }

    .program-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin-top:22px;
    }
}

@media (max-width:760px){
    .program-modal-overlay{
        align-items:flex-start;
        padding:10px;
        overflow-y:auto;
    }

    .program-modal{
        max-height:none;
        border-radius:22px;
        padding:22px 18px 18px;
    }

    .program-modal-close{
        top:14px;
        right:14px;
        width:44px;
        height:44px;
    }

    .program-hero-left{
        padding-top:38px;
    }

    .program-hero-right{
        display:none;
    }

    .program-main-title{
        font-size:42px;
        line-height:1;
    }

    .program-info-grid,
    .program-feature-grid,
    .course-grid,
    .course-card-inner{
        grid-template-columns:1fr;
    }

    .course-column + .course-column{
        border-left:0;
        border-top:1px solid #eeeeee;
        padding-left:0;
        padding-top:16px;
    }

    .program-apply-wrapper{
        justify-content:center;
    }

    .program-apply-btn{
        width:100%;
        max-width:280px;
    }
}