/* পুরো কন্টেইনার প্রথমে লুকানো থাকবে */
.custom-course-container {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

/* যখন show ক্লাস যুক্ত হবে, কন্টেইনার দেখা যাবে */
.custom-course-container.show {
    opacity: 1;
    transform: translateY(0);
}


/* শিরোনাম */
.section-title {
    color: green;
    margin-bottom: 25px;
    font-size: 24px;
    text-transform: uppercase;
}

/* গ্রিড লেআউট: কম্পিউটারে ৪ কলামে দেখাবে */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

/* প্রতিটি বৈশিষ্ট্য বা আইটেম */
.feature-item {
    color: black;
    padding: 15px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    
    background-color: white;
    border: 1px solid #dde4e1; /* আইটেম বর্ডার গ্রীণ */
    box-shadow: 0 0 15px #e6e6e6,        /* বাইরের হালকা গ্লো */
                inset 0 0 10px #808080; /* ভিতরের শক্তিশালী গ্লো */
    
    transform: translateY(-5px);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ============================= */
/* রেসপনসিভ: মোবাইলের জন্য */
/* ============================= */
@media (max-width: 600px) {

    /* প্রতিটি বৈশিষ্ট্য বা আইটেম */
    .feature-item {
        color: black;
        padding: 10px;
        border: 1px solid #cfcfcf;
        border-radius: 10px;
        background-color: white;
        border: 1px solid #dde4e1; /* আইটেম বর্ডার গ্রীণ */
        box-shadow: none; /* ভিতরের শক্তিশালী গ্লো */
        
        transform: translateY(-5px);
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .features-grid {
        grid-template-columns: 1fr; /* মোবাইলে শুধু উপর-নিচে এক কলামে দেখাবে */
    }
    
    .section-title {
        font-size: 20px;
    }
}

/* Job CSS */

        .job-header {
            text-align: justify;
            margin-bottom: 20px;
        }
        /* টেবিল রেসপন্সিভ করার মূল ট্রিক */
        .table-wrapper {
            width: 100%;
            overflow-x: auto; /* ডানে-বামে স্ক্রোল হবে */
            -webkit-overflow-scrolling: touch;
        }
        table.job-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 750px; /* মোবাইল স্ক্রিনেও যেন টেবিলটি সংকুচিত না হয় */
            background: white;
        }
        table.job-table td {
            padding: 10px 15px;
            border: 1px solid #ddd;
            text-align: center;
        }
        table.job-table th {
            padding: 10px 10px;
            border: 1px solid #ddd;
            text-align: center;
        }
        /* টেবিল হেডার স্টাইল */
        table.job-table thead tr {
            background-color: #d32f2f; /* লাল রঙ */
            color: #ffffff;
        }
        /* রো স্ট্রাইপিং এবং হোভার ইফেক্ট */
        table.job-table tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }


        
    /* Banner */
    .banner{
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

    /* Slides */
    .slide{
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
    }

    .slide img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .active{
        opacity: 1;
    }

    /* Overlay */
    .overlay{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,0.55);
        color:white;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
    }

    /* Institution Name Center */
    .overlay h1{
        font-size:50px;
        letter-spacing:3px;
        animation: zoomFade 2s ease-in-out;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    }

    /* Name Animation */
    @keyframes zoomFade {
        0%{
            opacity:0;
            transform: scale(0.7);
        }
        100%{
            opacity:1;
            transform: scale(1);
        }
    }

    /* Motivational Text */
    .marquee{
        position:absolute;
        bottom:20px;
        width:100%;
        overflow:hidden;
        white-space: nowrap;
    }

    .marquee p{
        display:inline-block;
        padding-left:100%;
        animation: marquee 12s linear infinite;
        font-size:22px;
    }

    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    /* Responsive */
    @media(max-width:768px){
        .overlay h1{
            font-size:28px;
        }
        .banner{
            height:350px;
        }
    }