@charset "utf-8";
/* CSS Document */

/**{
    margin:0;
    padding:0;
    box-sizing:border-box;
}*/



/* WRAPPER */
.program-wrapper{
    width:100%;
    max-width:1800px;
    margin:30px auto;
    padding:0 5px;
}

/* CARD */
.program-card{
    background:#fff;
    border-radius:28px;
    padding:38px 34px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    overflow:hidden;
}

/* LEFT SIDE */
.program-left{
    width:250px;
    flex-shrink:0;
}

.program-left h2{
    margin:0;
    font-size:clamp(30px, 4vw, 36px);
    line-height:1.08;
    font-weight:800;
    color:#10194d;
    letter-spacing:-1px;
}

.title-line{
    width:125px;
    height:4px;
    margin-top:26px;
    border-radius:30px;
    background:linear-gradient(
        to right,
        #7c3aed,
        #ec4899,
        #f97316,
        #facc15
    );
}

/* RIGHT SIDE */
.program-right{
    flex:1;
    display:grid;
    /*grid-template-columns:repeat(7, 1fr);*/
	    grid-template-columns:repeat(7, minmax(140px, 1fr));
    gap:20px;
    width:100%;
}

.program-item{
    text-align:center;
    min-width:0;
}

/* TOP AREA */
.top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.circle{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    flex-shrink:0;
}

/* CIRCLE COLORS */
.circle.blue{ background:#1f6df5; }
.circle.pink{ background:#ec2b87; }
.circle.orange{ background:#f59e0b; }
.circle.green{ background:#8bc220; }
.circle.magenta{ background:#ec2b87; }
.circle.purple{ background:#8b49db; }

/* TIME */
.time{
    font-size:clamp(24px, 2vw, 28px);
    font-weight:800;
    color:#10194d;
    letter-spacing:-1px;
}

/* LINE */
.line{
    height:4px;
    border-radius:20px;
    margin-bottom:22px;
    width:100%;
}

.line.pink{ background:#ec2b87; }
.line.orange{ background:#f97316; }
.line.yellow{ background:#eab308; }
.line.green{ background:#84cc16; }
.line.purple{ background:#8b49db; }
.line.blue{ background:#1f6df5; }

/* TEXT */
.text{
    color:#10194d;
    font-size:clamp(16px, 1vw, 18px);
    line-height:1.45;
    font-weight:500;
	
	
}

.text strong{
    font-weight:800;
}

/* =========================
   LARGE TABLET
========================= */
@media(max-width:1400px){

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

}

/* =========================
   TABLET
========================= */
@media(max-width:992px){

    .program-card{
        flex-direction:column;
        gap:30px;
    }

    .program-left{
        width:100%;
    }

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

}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){

    .program-wrapper{
        margin:30px auto;
        padding:0 14px;
    }

    .program-card{
        padding:28px 22px;
        border-radius:22px;
    }

    .program-left h2{
        line-height:1.15;
    }

    .program-right{
        grid-template-columns:1fr;
        gap:34px;
    }

    .circle{
        width:58px;
        height:58px;
        font-size:24px;
    }

    .top{
        gap:10px;
    }

    .line{
        margin-bottom:16px;
    }

}

/* =========================
   SMALL MOBILE
========================= */
@media(max-width:480px){

    .program-card{
        padding:22px 16px;
    }

    .text{
        font-size:15px;
    }

    .circle{
        width:52px;
        height:52px;
        font-size:20px;
    }

}