body{
font-family:'Noto Sans Bengali', sans-serif;
background:#f4f6f9;
}

.top-bar{
background:#198754;
color:white;
padding:8px 0;
font-size:14px;
}

.navbar{
border-radius:20px;
margin-top:15px;


}


.carousel img{
height:450px;
object-fit:cover;
}

.carousel-caption{
background:rgba(0,0,0,0.5);
padding:15px;
border-radius:10px;
}

.card{
border:none;
border-radius:20px;
transition:0.3s;
background-color: rgb(255, 255, 255);
}

.card:hover{
transform:translateY(-5px);
}

.notice-box{
padding:8px 0;
}
/* TEACHER CARD */
.teacher-card{
    background:rgb(228,239,246);
    border-radius:20px;
    transition:.3s;
}

.teacher-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

.teacher-img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #198754;
    display:block;
    margin:0 auto 15px auto;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.section-title h3{
    display:inline-block;
    position:relative;
    font-weight:700;
}

.section-title h3::after{
    content:'';
    width:60px;
    height:3px;
    background:#198754;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-10px;
    border-radius:5px;
}

/* LEARNING SECTION */
.learning-card {
    background: #c5dbf1;
    padding: 25px;
    border-radius: 15px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.learning-card:hover {
    transform: translateY(-5px);
}

.learn-btn {
    background: #198754;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
}

.card-form{
    max-height:0;
    overflow:hidden;
    transition:all 0.4s ease;
    opacity:0;
    
}

.card-form.active{
    max-height:500px;   /* enough height for form */
    opacity:1;
    margin-top:15px;
    
}

.card-form input{
    width:100%;
    padding:8px;
    margin-top:8px;
    border-radius:8px;
    border:1px solid #ddd;
}

/* MOBILE FIX */
@media(max-width:768px){
.carousel img{
height:250px;
}
.navbar{
border-radius:10px;
}
}