*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
    body{background:#f4f6fb;color:#333}
    .section{max-width:1200px;margin:auto;padding:60px 20px}
    .section h2{text-align:center;font-size:32px;margin-bottom:40px}

    /* ===== UPDATED HEADER (OSTAD STYLE) ===== */
    .navbar{
        background:#ffffff;
        padding:12px 20px; /* কমিয়ে দেওয়া হলো */
        display:grid;
        grid-template-columns:auto 1fr auto;
        align-items:center;
        border-bottom:1px solid #e5e7eb;
    }


    .nav-left{
        display:flex;
        align-items:center;
        gap:14px;
    }

    .nav-right{
        display:flex;
        align-items:center;
        gap:22px;
        justify-content:center;
    }


    .logo{
        display:flex;
        align-items:center;
        gap:8px;
        font-weight:700;
        font-size:20px;
        color:#111827;
    }

    .logo span{
        background:#facc15;
        width:26px;
        height:26px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
    }

    .search-box{
        position:relative;
    }

    .search-box input{
        padding:8px 14px 8px 34px;
        border-radius:20px;
        border:1px solid #e5e7eb;
        outline:none;
        width:200px;
        background:#f9fafb;
    }

    .search-box::before{
        content:"🔍";
        position:absolute;
        left:10px;
        top:6px;
        font-size:14px;
    }

    .nav-right a{
        text-decoration:none;
        color:#111827;
        font-size:14px;
        font-weight:500;
    }

    .nav-btn{
        background:#ef4444;
        color:#fff;
        padding:6px 14px;
        border-radius:16px;
        font-size:13px;
    }



    /* ================= HERO (UPDATED LIKE IMAGE) ================= */
    .hero{
    background:#eef2ff;
    padding:60px 20px 40px;
    }
    .hero-box{
    max-width:1200px;
    margin:auto;
    background:#f8fafc;
    border-radius:22px;
    padding:40px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:40px;
    align-items:center;
    }
    .hero-left h1{
    font-size:42px;
    margin-bottom:16px;
    }
    .hero-left h1 span{color:#ef4444;}
    .hero-left p{
    font-size:17px;
    color:#475569;
    margin-bottom:24px;
    }
    .hero-btn{
    background:#facc15;
    border:none;
    padding:14px 28px;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    }
    .hero-logos{
    margin-top:30px;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    opacity:.85;
    }
    .hero-logos img{height:26px;}
    .hero-right img{
    width:100%;
    border-radius:18px;
    }

    /* SLIDER COMMON */
    .slider-wrapper{position:relative}
    .slider-btn{
        position:absolute;top:45%;
        background:#020617;color:#fff;
        border:none;width:40px;height:40px;
        border-radius:50%;cursor:pointer;
        z-index: 10; /* বাটনগুলি যাতে কার্ডের উপরে থাকে */
    }
    .prev{left:-20px}
    .next{right:-20px}

    /* LIVE COURSES */
    .live-slider{
        display:flex;gap:20px;
        overflow-x:auto; /* স্ক্রল করার জন্য পরিবর্তন */
        scroll-behavior:smooth;
        padding-bottom:15px; /* স্ক্রলবার বা শ্যাডো এর জন্য */
    }
    .live-slider::-webkit-scrollbar {
        height: 6px;
    }
    .live-slider::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 10px;
    }
    .live-slider::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .live-card{
        min-width:260px;background:#fff;
        border-radius:16px;padding:18px;
        box-shadow:0 10px 25px rgba(0,0,0,.08)
    }
    .live-card img{width:100%;height:150px;object-fit:cover;border-radius:12px}
    .live-card h4{margin:10px 0}
    .live-meta{font-size:13px;color:#555}
    .live-price{color:#16a34a;font-weight:bold;margin-top:5px}
    .live-card button{
        margin-top:10px;width:100%;
        padding:7px;border:none;
        border-radius:6px;background:#ef4444;color:#fff

    }

    /* VIDEO */
    .video iframe{width:100%;height:420px;border-radius:14px}

    /* COURSES */
    .courses{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:25px
    }
    .course{
        background:#fff;border-radius:16px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        overflow:hidden
    }
    /* কোর্স কার্ডের ইমেজ সাইজ এডজাস্টমেন্ট */
    .course img{width:100%;height:180px;object-fit:cover} 

    .course-content{padding:16px}
    .price{color:#16a34a;font-weight:bold}
    .course-btns{display:flex;gap:10px;margin-top:10px}
    .course-btns button{
        flex:1;padding:6px;font-size:13px;
        border:none;border-radius:6px;color:#fff
    }
    .course-btns a{
        text-decoration: none;
        color: #fff;
        display: block;
    }
    .enroll{background:#22c55e}
    .module{background:#0ea5e9}

    /* FOR WHOM (OLD SECTION - UNUSED) */
    .for-whom{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:25px
    }
    .whom-card{
        background:#fff;padding:25px;border-radius:16px;
        box-shadow:0 10px 25px rgba(0,0,0,.08)
    }
    .whom-card h3{color:#1e3a8a;margin-bottom:10px}
    .whom-card li{font-size:14px;margin-bottom:6px}


    /* INSTRUCTOR SLIDER */
    .instructor-slider{
        display:flex;gap:20px;
        overflow-x:auto; /* স্ক্রল করার জন্য পরিবর্তন */
        scroll-behavior:smooth;
        padding-bottom:15px;
        justify-content: flex-start; /* কার্ডগুলো বাম দিক থেকে শুরু হবে */
    }
    .instructor-slider::-webkit-scrollbar {
        height: 6px;
    }
    .instructor-slider::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 10px;
    }
    .instructor-slider::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .instructor-card{
        min-width:260px; /* কার্ডের ন্যূনতম প্রস্থ ঠিক রাখা */
        background:#fff;
        padding:20px;text-align:center;
        border-radius:16px;
        box-shadow:0 10px 25px rgba(0,0,0,.08)
    }
    .instructor-card img{
        width:120px;height:120px;
        border-radius:50%;margin-bottom:10px
    }
    .instructor-card span{font-size:13px;color:#0ea5e9}

    /* REVIEWS */
    .reviews{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px
    }
    .reviews iframe{width:100%;height:200px;border-radius:14px}


    /* ===== NEW VALUE SECTION ===== */
    .value-box{
    max-width:900px;margin:auto;background:#fff;border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.1);overflow:hidden
    }
    .value-header{
    background:linear-gradient(135deg,#5b2dde,#6d28d9);
    color:#fff;text-align:center;padding:18px;font-weight:600
    }
    .value-list{padding:25px}
    .value-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 0;border-bottom:1px solid #eee;font-size:14px
    }
    .value-item span:first-child::before{
    content:"✔ ";color:#6d28d9;font-weight:bold
    }
    .value-total{
    background:#5b2dde;color:#fff;text-align:center;
    padding:22px;margin:20px;border-radius:14px
    }
    .value-btn{
    display:block;margin:20px auto 30px;
    background:#6d28d9;color:#fff;border:none;
    padding:12px 30px;border-radius:10px;font-size:15px;cursor:pointer
    }


    /*কাদের জন্য */
    .target-section{
        background:#f8fafc;
        text-align:center;
    }

    .target-subtitle{
        max-width:700px;
        margin:0 auto 40px;
        color:#475569;
        font-size:15px;
    }

    .target-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:24px;
    }

    .target-card{
        background:#ffffff;
        border-radius:16px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        overflow:hidden;
        text-align:left;
    }

    .target-header{
        background:linear-gradient(135deg,#5b2dde,#6d28d9);
        color:#fff;
        padding:16px 18px;
        font-weight:600;
        font-size:16px;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .target-card p{
        padding:18px;
        font-size:14px;
        line-height:1.7;
        color:#334155;
    }

    .target-btn-wrap{
        margin-top:40px;
    }

    .target-btn{
        background:#6d28d9;
        color:#fff;
        border:none;
        padding:14px 32px;
        border-radius:10px;
        font-size:15px;
        cursor:pointer;
    }

    /**কাদের শেষ/


    /* FOOTER */
    footer{
        background:#020617;color:#fff;
        text-align:center;padding:40px 20px
    }
    footer a{color:#38bdf8;margin:0 10px;text-decoration:none}

    /* ======================================================= */
    /* =================== RESPONSIVE CSS ==================== */
    /* ======================================================= */

    /* ট্যাবলেট সাইজ (1024px পর্যন্ত) */
    @media(max-width:1024px){
        .hero-box{
            grid-template-columns: 1fr; /* এক কলামে আনা হলো */
            gap: 30px;
            padding: 30px;
        }
        .hero-right{
            order: -1; /* হিরো ইমেজকে উপরে নিয়ে আসা হলো */
        }
    }

    @media(max-width:768px){
        .section{padding: 40px 15px;}
        .section h2{font-size: 28px; margin-bottom: 30px;}

        /* নেভিগেশন বার */
        .navbar{
            grid-template-columns: auto auto; /* সার্চ বক্স সরিয়ে দেওয়া হলো */
            gap: 15px;
            padding: 10px 15px;
        }
        .nav-left{
            gap: 10px;
        }
        .nav-right{
            display: none; /* মেনু আইটেমগুলি মোবাইলে হাইড করা হলো */
        }
        .search-box{
            display: none; /* সার্চ বক্স হাইড করা হলো */
        }
        .logo{font-size: 18px;}


        /* হিরো সেকশন */
        .hero{padding: 40px 15px 20px;}
        .hero-box{
            border-radius: 16px;
        }
        .hero-left h1{font-size: 32px;}
        .hero-left p{font-size: 15px;}
        .hero-btn{padding: 12px 24px;}
        .hero-logos img{height: 22px;}


        /* স্লাইডার বাটন */
        .slider-btn{
            width: 35px;
            height: 35px;
            top: 40%;
        }
        .prev{left: -10px;}
        .next{right: -10px;}


        /* ভিডিও সেকশন */
        .video iframe{height: 300px;}


        /* রিভিউ সেকশন */
        .reviews{grid-template-columns:repeat(2,1fr)}
    }

    /* মোবাইল সাইজ (600px পর্যন্ত) */
    @media(max-width:600px){
        .section{padding: 30px 10px;}
        .section h2{font-size: 24px;}

        /* নেভিগেশন বার */
        .navbar{
            grid-template-columns: 1fr auto;
        }
        .nav-left{
            justify-content: flex-start;
        }

        /* হিরো সেকশন */
        .hero{padding: 20px 10px;}
        .hero-box{
            padding: 20px;
        }
        .hero-left h1{font-size: 28px;}


        /* কোর্স, টার্গেট, রিভিউ গ্রিড */
        .courses{grid-template-columns:1fr}
        .target-grid{grid-template-columns:1fr}
        .reviews{grid-template-columns:1fr}

        /* ভিডিও সেকশন */
        .video iframe{height: 220px; border-radius: 10px;}
        
        /* ভ্যালু সেকশন */
        .value-list{padding: 20px;}
        .value-item{
            font-size: 13px;
            padding: 8px 0;
        }
        .value-total{
            margin: 15px 10px;
            padding: 18px;
        }
        .value-total h2{font-size: 28px;}
        .value-btn{padding: 10px 25px; font-size: 14px;}
    }