/* =========================================
   Global Variables & Reset
========================================= */
:root {
    --brand-blue: #143d8d;
    --brand-red: #d32f2f;
    --accent-yellow: #ffc107;
    --bg-light: #f1f5f9;
    --text-dark: #333;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    scroll-behavior: smooth;
    overflow-x: hidden; /* ডানে-বামে স্ক্রল বন্ধ করার জন্য */
}

a { text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

/* =========================================
   Top Bar
========================================= */
.top-bar {
    background-color: #0b2254;
    color: white;
    padding: 8px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    flex-wrap: wrap;
}

.top-contact {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.top-contact span i { margin-right: 5px; color: var(--accent-yellow); }

/* =========================================
   Header & Navigation
========================================= */
#mainHeader {
    background: white;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-area img { max-height: 60px; }
.logo-text h1 { font-size: 22px; margin: 0; }
.logo-text p { font-size: 12px; color: #666; font-weight: bold; letter-spacing: 1px; }

.nav-menu {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-menu a {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.nav-menu a:hover, .nav-menu a.active {
    color: var(--brand-red);
}

.header-cta {
    background: var(--brand-red);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.header-cta:hover { background: #b71c1c; }

/* =========================================
   Hero Section
========================================= */
.hero {
    background: linear-gradient(rgba(20,61,141,0.85), rgba(20,61,141,0.9)), url('images/hero-bg.jpg') center/cover;
    padding: 100px 5%;
    text-align: center;
    color: white;
}

.admission-hero-badge {
    background: var(--accent-yellow);
    color: var(--brand-blue);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.hero h2 { font-size: 40px; margin: 15px 0; }
.hero h2 span { color: var(--accent-yellow); }
.hero-subtitle { font-size: 18px; font-style: italic; }
.hero-info-text { max-width: 700px; margin: 20px auto; font-size: 15px; line-height: 1.6; }
.hero-btn {
    background: var(--brand-red);
    color: white;
    padding: 12px 30px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(211,47,47,0.4);
}

/* =========================================
   General Sections & Titles
========================================= */
section { padding: 60px 5%; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h3 {
    font-size: 28px;
    color: var(--brand-blue);
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.section-title h3::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--brand-red);
}

/* =========================================
   Messages (Director/Principal)
========================================= */
.messages-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
.message-box {
    background: white; padding: 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--brand-blue);
}
.msg-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.msg-header img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-blue); }
.msg-content p { font-style: italic; color: #555; line-height: 1.6; font-size: 15px; }

/* =========================================
   Faculty Section
========================================= */
.faculty-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;
}
.faculty-card {
    background: white; padding: 20px; text-align: center; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s;
}
.faculty-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.person-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid #eee; }
.person-name { color: var(--brand-blue); font-size: 18px; margin-bottom: 5px; }
.person-role { font-weight: bold; color: var(--brand-red); font-size: 14px; margin-bottom: 8px; }
.person-info { font-size: 13px; color: #666; }

/* =========================================
   Courses Grid
========================================= */
.courses-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto;
}
.course-card {
    background: white; padding: 25px 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.3s; position: relative; border: 1px solid #eaeaea;
}
.course-card:hover { border-color: var(--brand-blue); transform: translateY(-5px); }
.course-icon { font-size: 40px; color: var(--brand-blue); margin-bottom: 15px; }
.course-card h4 { font-size: 16px; margin-bottom: 10px; color: #333; }
.level-badge { background: #e3f2fd; color: var(--brand-blue); padding: 4px 10px; font-size: 12px; font-weight: bold; border-radius: 4px; }

/* =========================================
   Stats Section
========================================= */
.stats-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; background: var(--brand-blue); color: white; padding: 40px 5%; border-radius: 8px; margin: 0 5%; text-align: center; }
.stat-box h3 { font-size: 36px; color: var(--accent-yellow); margin-bottom: 5px; }

/* =========================================
   Gallery Section
========================================= */
.gallery-filters { text-align: center; margin-bottom: 30px; }
.filter-btn { background: none; border: 2px solid var(--brand-blue); padding: 8px 20px; margin: 5px; border-radius: 20px; cursor: pointer; font-weight: bold; color: var(--brand-blue); transition: 0.3s; }
.filter-btn.active, .filter-btn:hover { background: var(--brand-blue); color: white; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.gallery-item { border-radius: 8px; overflow: hidden; display: none; }
.gallery-item.show { display: block; animation: fadeIn 0.5s ease; }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s; }
.gallery-item img:hover { transform: scale(1.05); }

/* =========================================
   Video & Projects
========================================= */
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; max-width: 800px; margin: 0 auto; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; max-width: 1000px; margin: 0 auto; }
.project-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.project-img { width: 100%; height: 200px; object-fit: cover; }
.project-info { padding: 20px; }
.project-badge { background: #fee2e2; color: var(--brand-red); padding: 4px 8px; font-size: 12px; font-weight: bold; border-radius: 4px; display: inline-block; margin-bottom: 10px; }
.project-info h4 { font-size: 18px; margin-bottom: 10px; color: var(--brand-blue); }
.project-info p { font-size: 14px; color: #555; line-height: 1.5; }

/* =========================================
   Special Offers
========================================= */
.special-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; padding: 0 5% 60px; }
.offer-box { display: flex; align-items: center; gap: 15px; padding: 20px; border-radius: 8px; color: white; }
.offer-free { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.offer-rpl { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.offer-box i { font-size: 40px; opacity: 0.8; }

/* =========================================
   Form Styling (Admission Page)
========================================= */
.a4-form-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
}
.a4-form-title p { color: var(--brand-red); font-size: 14px; font-weight: bold; margin-bottom: 15px; }

/* Form Grids */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; }

.form-group-a4 { display: flex; flex-direction: column; }
.form-group-a4.full-width { grid-column: 1 / -1; }
.form-group-a4 label { font-weight: bold; margin-bottom: 5px; color: #333; font-size: 14px; }
.req { color: red; }

.form-control-a4 { 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-family: inherit; 
    font-size: 14px; 
    width: 100%; 
    box-sizing: border-box; 
    transition: border-color 0.3s; 
}
.form-control-a4:focus { border-color: var(--brand-blue); outline: none; }
.file-note { font-size: 12px; color: #666; margin-top: 4px; }

.check-radio-group { 
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; 
    padding: 10px; border: 1px solid #eee; border-radius: 4px; background: #fcfcfc; 
}
.check-radio-item { display: flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }

.form-section-divider { 
    grid-column: 1 / -1; 
    background: var(--brand-blue); 
    color: white; 
    padding: 8px 15px; 
    border-radius: 4px; 
    margin-top: 15px; 
    font-weight: bold; 
    display: flex; 
    align-items: center; gap: 8px; 
}

.submit-btn-a4 { 
    grid-column: 1 / -1; 
    background: var(--brand-red); 
    color: white; border: none; padding: 12px; 
    font-size: 16px; font-weight: bold; border-radius: 4px; 
    cursor: pointer; transition: 0.3s; 
}
.submit-btn-a4:hover { background: #b71c1c; }

/* =========================================
   Footer
========================================= */
footer { background: #111; color: #ccc; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding: 50px 5%; }
.footer-section h4 { color: white; font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-section h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--brand-red); }
.footer-section p { margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
.social-links { display: flex; gap: 10px; margin-top: 15px; }
.social
/* মোবাইল রেসপনসিভ করার মাস্টার কোড - ফাহাদ ভাই এটি শেষে বসান */
@media screen and (max-width: 600px) {
    /* ১. মেইন সাদা কন্টেইনার স্ক্রিনে ফিট করা */
    .a4-form-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        border: none !important; /* মোবাইলে বর্ডার দরকার নেই */
    }

    /* ২. বড় লেখা "SD IT TRAINING INSTITUTE" ছোট করা */
    .official-header-web h1, 
    .official-header-web .inst-title, 
    .inst-title {
        font-size: 18px !important; /* লেখাটি স্ক্রিনে ধরে যাবে */
        white-space: normal !important;
        line-height: 1.2 !important;
        margin: 10px 0 !important;
    }

    /* ৩. সরকারি টেক্সট (The Government of...) ঠিক করা */
    .gov-text {
        font-size: 10px !important;
        white-space: normal !important; /* লাইন ভেঙে নিচে নামবে */
        line-height: 1.4 !important;
        display: block !important;
        width: 100% !important;
    }

    /* ৪. লোগোগুলো একটার নিচে একটা আনা */
    .header-main-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .logo-side {
        width: auto !important;
        text-align: center !important;
    }

    /* ৫. গ্রিড (৩ কলাম বা ২ কলাম) এক কলামে আনা */
    .form-grid-3, .form-grid-2 {
        display: block !important;
    }

    .form-group-a4 {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* ৬. ইনপুট বক্স মোবাইলে বড় করা */
    .form-control-a4 {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* ৭. ফটো প্রিভিউ বক্স সেন্টারে আনা */
    .photo-preview-box {
        margin: 0 auto 20px auto !important;
    }

    /* ৮. সেকশন ডিভাইডার (Personal Info...) */
    .form-section-divider {
        font-size: 14px !important;
        margin-top: 20px !important;
    }
}
/* ফাহাদ ভাই, এই কোডটি আগের সব মোবাইল কোড রিপ্লেস করবে */
@media screen and (max-width: 768px) {
    
    /* ১. মেইন হেডার ফিক্স (লোগো আর মেনু আলাদা করা) */
    header#mainHeader {
        display: flex !important;
        flex-direction: column !important; /* লোগো উপরে, মেনু নিচে */
        height: auto !important;
        padding: 15px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .logo-area {
        margin-bottom: 15px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .logo-area img {
        max-height: 45px !important;
    }

    .logo-text h1 {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    /* ২. নেভিগেশন মেনু (হোম, বাণী...) জটলা পাকানো ঠিক করা */
    .nav-menu {
        display: flex !important;
        flex-wrap: wrap !important; /* জায়গা না হলে নিচে নামবে */
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .nav-menu a {
        font-size: 13px !important;
        padding: 5px 8px !important;
    }

    /* ৩. সাদা এ৪ ফরম কন্টেইনার ফিক্স */
    .a4-form-container {
        width: 98% !important;
        min-width: 98% !important; /* জোর করে স্ক্রিনে আনা */
        max-width: 100% !important;
        margin: 5px auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* সাইড দিয়ে কাটা বন্ধ হবে */
        border: 1px solid #ddd !important;
    }

    /* ৪. "SD IT TRAINING INSTITUTE-MADHABDI" লেখাটি ছোট করা */
    .official-header-web h1, 
    .official-header-web .inst-title, 
    .inst-title {
        font-size: 18px !important; 
        white-space: normal !important; /* লাইন ভেঙে নিচে আসবে */
        word-wrap: break-word !important;
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* ৫. সরকারি টেক্সট ছোট ও রেসপনসিভ করা */
    .gov-text {
        font-size: 10px !important;
        white-space: normal !important; 
        line-height: 1.4 !important;
        display: block !important;
        text-align: center !important;
    }

    /* ৬. ইনপুট বক্স ও গ্রিডগুলো এক কলামে আনা */
    .form-grid-3, .form-grid-2 {
        display: block !important; /* কলাম থেকে ব্লকে রূপান্তর */
    }

    .form-group-a4 {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .form-control-a4 {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ৭. ফটো প্রিভিউ বক্স */
    .photo-preview-box {
        margin: 10px auto !important;
    }
}