/* =========================================
   TSC Lesson Hero Engine v1.2
========================================= */


.tsc-hero{

    background:#ffffff;

    border-radius:25px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    display:block;
text-align:center;

    gap:35px;

    align-items:center;

    margin:30px 0;

}


/* Lesson Image */

.tsc-hero-image{

    text-align:center;

    flex-shrink:0;

}


.tsc-hero-image img{

    width:100%;

    max-width:360px;

    height:auto;

    border-radius:25px;

}



/* Lesson Content */

.tsc-hero-content h1{

    font-size:38px;

    color:#12355B;

    margin-bottom:15px;

}



.tsc-description{

    font-size:18px;

    line-height:1.6;

    color:#555;

}



/* Information Cards */

.tsc-meta{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-top:30px;

}



.tsc-meta div{

    background:#F8FAFC;

    padding:18px;

    border-radius:18px;

    text-align:center;

}



/* Start Lesson Button */

.tsc-start-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    margin-top:35px;


    background:#F26B38;


    color:white !important;


    padding:16px 40px;


    border-radius:50px;


    font-size:18px;


    font-weight:700;


    text-decoration:none;


    box-shadow:0 8px 20px rgba(242,107,56,0.25);


    transition:all .3s ease;

}



.tsc-start-button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(242,107,56,0.35);

}



.tsc-start-button:active{

    transform:scale(.96);

}



/* =========================================
   Mobile Design
========================================= */


@media(max-width:768px){


    .tsc-hero{

        flex-direction:column;

        padding:25px;

    }


    .tsc-hero-content h1{

        font-size:30px;

    }


    .tsc-description{

        font-size:16px;

    }


    .tsc-meta{

        grid-template-columns:1fr;

    }


    .tsc-hero-image img{

        max-width:100%;

    }


}

.tsc-progress-card {

padding:20px;
border-radius:12px;
background:#ffffff;
box-shadow:0 4px 15px rgba(0,0,0,0.08);

}


.tsc-progress-bar {

width:100%;
height:12px;
background:#e5e5e5;
border-radius:20px;
overflow:hidden;
margin-top:15px;

}


#tsc-progress-fill {

height:100%;
width:0%;
background:#4CAF50;
border-radius:20px;
transition:width 0.5s ease;

}