/* --- Google Sans Font Face Rules --- */
@font-face {
    font-family: 'Google Sans';
    src: url('Fonts/Google Sans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Google Sans';
    src: url('Fonts/Google Sans Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Google Sans';
    src: url('Fonts/Google Sans SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Google Sans';
    src: url('Fonts/Google Sans Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* --- Basic Reset & Global Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* --- New Brand Palette --- */
    /* Info (Blue) */
    --info-lighter: #D9EDFE;
    --info-light: #8DBFFB;
    --info-main: #4285F4;
    --info-dark: #214BAF;
    --info-darker: #0C2375;

    /* Success (Green) */
    --success-lighter: #DCFAD8;
    --success-light: #86E48D;
    --success-main: #34A853;
    --success-dark: #1A7845;
    --success-darker: #095038;

    /* Warning (Yellow) */
    --warning-lighter: #FEF9CC;
    --warning-light: #FDE768;
    --warning-main: #FBCC05;
    --warning-dark: #B48B02;
    --warning-darker: #785800;

    /* Error (Red) */
    --error-lighter: #FDE6D6;
    --error-light: #F8A185;
    --error-main: #EA4335;
    --error-dark: #A81A27;
    --error-darker: #700A23;

    /* Grey */
    --grey-50: #F6FBFB;
    --grey-100: #EDF7F7;
    --grey-200: #DDEFEF;
    --grey-300: #B9CFD1;
    --grey-400: #8CA0A4;
    --grey-500: #546368;
    --grey-600: #3D5059;
    --grey-700: #2A3E4A;
    --grey-800: #1A2C3C;
    --grey-900: #101F31;

    /* Common */
    --common-black: #000000;
    --common-white: #FFFFFF;
    
    /* --- Mapped Theme Variables --- */
    --primary-color: var(--info-main);
    --secondary-color: var(--grey-500);
    --bg-light: var(--grey-50);
    --bg-white: var(--common-white);
    --text-dark: var(--grey-800);
    --text-light: var(--grey-500);
    --border-color: var(--grey-200);
    --shadow: 0 1rem 3rem rgba(16, 31, 49, 0.08); /* Shadow based on new --grey-900 */
    --gradient: linear-gradient(135deg, var(--info-main), var(--info-light));
}

body {
    font-family: 'Google Sans', 'Hind Siliguri', sans-serif; /* Font Updated */
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
    font-size: 16px; /* বেস ফন্ট সাইজ */
}

.container {
    max-width: 1140px; /* কন্টেইনার সাইজ সামান্য কমানো হয়েছে */
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- Header Section --- */
.header {
    background-color: transparent;
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1010;
    transition: all 0.4s ease;
}
/* ======================================== */
/* == Final Header Style Update        == */
/* ======================================== */

.header.header-solid {
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    position: fixed; /* Keep it fixed */
    z-index: 1010;
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 26px; /* ফন্ট সাইজ কমানো হয়েছে */
    font-weight: 700;
    color: var(--text-dark);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 35px; /* গ্যাপ কমানো হয়েছে */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 28px; /* গ্যাপ কমানো হয়েছে */
}

.nav-menu li a {
    color: var(--text-light);
    font-weight: 500;
    transition: color 0.3s;
    font-size: 15px; /* ফন্ট সাইজ কমানো হয়েছে */
}

.nav-menu li a:hover {
    color: var(--primary-color);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn {
    padding: 10px 24px; /* প্যাডিং কমানো হয়েছে */
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px; /* ফন্ট সাইজ কমানো হয়েছে */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--bg-white);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(66, 133, 244, 0.2); /* Shadow color updated */
}

.btn-secondary {
    background: transparent;
    border-color: var(--border-color);
    margin-right: 8px;
}

.btn-secondary:hover {
    background: var(--text-dark);
    color: var(--bg-white);
    border-color: var(--text-dark);
}

.hamburger,
.close-btn {
    display: none;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
}

/* --- Hero Section --- */
.hero {
    background-color: var(--bg-white);
    padding: 160px 0 100px 0; /* প্যাডিং কমানো হয়েছে */
    overflow: hidden;
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-content {
    flex-basis: 50%;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.8rem); /* ফন্ট সাইজ কমানো হয়েছে */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-title .line {
    display: block;
}

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 500px;
    margin-bottom: 30px;
}

/* Animation for Hero */
.hero-title,
.hero-subtitle,
.hero-buttons {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-subtitle {
    animation-delay: 0.2s;
}

.hero-buttons {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-image-container {
    flex-basis: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-hero-image {
    width: 70%;
    border-radius: 20px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 2;
}

.hero-image-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.8); /* --- আপনার পছন্দের সাদা ব্যাকগ্রাউন্ড --- */
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center; /* --- ইমেজকে কার্ডের ঠিক মাঝে আনার জন্য --- */
    animation: float 4s ease-in-out infinite;
    z-index: 3;
    /* --- যেহেতু শুধু ইমেজ আছে, তাই gap বা font-size এর দরকার নেই --- */
}

.hero-image-card img {
    width: 40px; /* --- ইমেজ সাইজ আপনার কথামতো ছোট করা হয়েছে --- */
    height: auto; /* অনুপাত ঠিক রাখার জন্য */
    
    /* --- কার্ডের নিজস্ব বর্ডার বা শ্যাডো আছে, তাই ইমেজের বর্ডার রিমুভ করা হলো --- */
    border-radius: 0;
    box-shadow: none;
}




@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* --- Common Section Styles --- */
.stats,
.why-us,
.courses,
.testimonials {
    padding: 90px 0; /* প্যাডিং কমানো হয়েছে */
}

.section-title {
    font-size: 34px; /* ফন্ট সাইজ কমানো হয়েছে */
    text-align: center;
    margin-bottom: 50px; /* মার্জিন কমানো হয়েছে */
}

/* --- Stats Section --- */
.stats {
    padding: 0;
    margin-top: -70px; /* মান পরিবর্তন করা হয়েছে */
    position: relative;
    z-index: 5;
}

.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 35px; /* প্যাডিং কমানো হয়েছে */
    gap: 25px;
    border: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px; /* গ্যাপ কমানো হয়েছে */
    padding-right: 15px;
    border-right: 1px solid var(--border-color);
}

.stat-item:last-child {
    border-right: none;
}

.stat-item i {
    font-size: 32px; /* ফন্ট সাইজ কমানো হয়েছে */
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-item h3 {
    font-size: 28px; /* ফন্ট সাইজ কমানো হয়েছে */
    font-weight: 700;
    color: var(--text-dark);
}

.stat-item p {
    font-size: 0.95rem;
    color: var(--text-light);
}


/* --- Why Choose Us --- */
.why-us {
    background: var(--bg-white);
}

.why-us-container {
    display: flex;
    align-items: center;
    gap: 60px; /* গ্যাপ কমানো হয়েছে */
}

.why-us-image {
    flex-basis: 50%;
}

.why-us-image img {
    width: 100%;
    border-radius: 20px;
}

.why-us-content {
    flex-basis: 50%;
}

.why-us-content .section-title {
    text-align: left;
    margin-bottom: 30px;
}

.why-us-content ul {
    list-style: none;
}

.why-us-content li {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.why-us-content li i {
    font-size: 22px; /* ফন্ট সাইজ কমানো হয়েছে */
    color: var(--primary-color);
    padding-top: 5px;
}

.why-us-content h4 {
    font-size: 18px; /* ফন্ট সাইজ কমানো হয়েছে */
}


/* --- Courses Section --- */
.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.course-card {
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.course-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

.course-image {
    height: 200px;
    overflow: hidden;
}

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

.course-info {
    padding: 25px;
}

.category {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.course-info h3 {
    font-size: 19px; /* ফন্ট সাইজ কমানো হয়েছে */
    line-height: 1.4;
    margin-bottom: 15px;
}

.course-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.price {
    font-size: 18px; /* ফন্ট সাইজ কমানো হয়েছে */
    font-weight: 700;
}

.enroll-btn {
    font-weight: 500;
    color: var(--primary-color);
}

/* --- Testimonials --- */
.testimonials {
    background: var(--bg-white);
}

.testimonial-card {
    max-width: 750px;
    margin: 0 auto;
    background: var(--bg-light);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.testimonial-card p {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-light);
    margin-bottom: 30px;
}

.author-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.author-info img {
    width: 55px; /* সাইজ কমানো হয়েছে */
    height: 55px;
    border-radius: 50%;
}

.author-info h4 {
    font-size: 17px;
}


/* --- Footer --- */
.footer {
    background: var(--bg-white);
    padding-top: 60px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.footer h4 {
    font-size: 17px;
}

.footer-links li a {
    margin-bottom: 10px;
    display: block;
    color: var(--text-light);
}

.footer-social a {
    font-size: 18px; /* ফন্ট সাইজ কমানো হয়েছে */
    margin-right: 15px;
    color: var(--text-light);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    text-align: center;
    color: var(--text-light);
}

/* --- Scroll Animation --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Course Page Specific Styles --- */
.page-header {
    background: var(--bg-white);
    padding: 140px 0 60px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 38px; /* ফন্ট সাইজ কমানো হয়েছে */
    margin-bottom: 10px;
}

.page-header p {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.all-courses-page {
    padding-top: 60px; /* প্যাডিং কমানো হয়েছে */
}

.filter-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.filter-btn {
    font-family: 'Google Sans', 'Hind Siliguri', sans-serif; /* ফন্ট আপডেটেড */
    padding: 10px 25px;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: 50px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s;
}

.filter-btn:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

.filter-btn.active {
    background: var(--primary-color);
    color: var(--bg-white);
    border-color: var(--primary-color);
}

/* Course Card Animation */
.course-card.hide {
    display: none;
}


/* --- Responsive & Sidebar --- */
body.no-scroll {
    overflow: hidden;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; /* সাইডবার থেকে z-index কম হবে */
}

@media (max-width: 992px) {
    .hero-container,
    .why-us-container {
        flex-direction: column;
    }
    .hero-container {
        text-align: center;
    }
    .hero-subtitle {
        margin: 0 auto 30px auto;
    }
    .course-grid {
        grid-template-columns: 1fr 1fr;
    }
    .why-us-content .section-title {
        text-align: center;
    }
    .why-us-image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }
    .header-actions .btn {
        display: none;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background-color: var(--bg-white);
        flex-direction: column;
        align-items: flex-start;
        padding: 40px;
        gap: 20px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.4s ease-in-out;
        z-index: 1002; /* ওভারলে থেকে z-index বেশি হবে */
    }
    .nav-links.active {
        right: 0;
    }
    .nav-menu {
        flex-direction: column;
        width: 100%;
    }
    .close-btn {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .course-grid {
        grid-template-columns: 1fr;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .stats {
        margin-top: -60px;
    }
    .stats-wrapper {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 20px;
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 20px;
        justify-content: center;
    }
    .stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* ======================================== */
/* == Premium Course Player Styles v7.0  == */
/* ======================================== */
:root {
    --sidebar-width: 380px;
    --page-bg: var(--grey-50); /* Updated */
    --sidebar-bg: var(--common-white); /* Updated */
    /* --border-color: #E5E7EB; (already defined above) */
    --gap: 24px;
}
.player-page-wrapper { display: flex; padding-top: 75px; background-color: var(--page-bg); }

/* Sidebar */
.player-sidebar-premium { width: var(--sidebar-width); height: calc(100vh - 75px); background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color); flex-shrink: 0; display: flex; flex-direction: column; }
.player-sidebar-premium .sidebar-header { padding: 20px; border-bottom: 1px solid var(--border-color); position: relative; }
.player-sidebar-premium .back-link { font-size: 14px; color: var(--text-light); margin-bottom: 15px; display: inline-block; }
.player-sidebar-premium .course-title-sidebar { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
.player-sidebar-premium .course-progress .progress-text { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: #4B5563; }
.player-sidebar-premium .progress-bar-container { height: 6px; background-color: var(--grey-100); border-radius: 3px; }
.player-sidebar-premium .progress-bar-fill { height: 100%; background: var(--primary-color); border-radius: 3px; }
.module-list-premium { overflow-y: auto; flex-grow: 1; }
.lesson-list-premium { list-style-type: none; }
.lesson-list-premium .lesson-item { padding: 12px 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; font-size: 14px; border-left: 3px solid transparent; }
.lesson-list-premium .lesson-item:hover { background-color: var(--grey-50); }
.lesson-list-premium .lesson-item.active { background-color: var(--info-lighter); border-left-color: var(--primary-color); font-weight: 600; color: var(--primary-color); }
.lesson-list-premium .lesson-item i { color: #9CA3AF; width: 18px; text-align: center; }
.lesson-list-premium .lesson-item.active i { color: var(--primary-color); }
.lesson-list-premium .lesson-item.completed i { color: var(--success-main); } /* Updated */

/* Main Content */
.player-main-content-premium { flex-grow: 1; height: calc(100vh - 75px); overflow-y: auto; padding: var(--gap); }
.lesson-identity-top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--gap); }
.lesson-identity-top .counter-badge { flex-shrink: 0; background-color: var(--grey-200); color: #4B5563; padding: 4px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.lesson-identity-top #lesson-title-main { font-size: 24px; font-weight: 700; color: var(--grey-900); }
.player-area { margin-bottom: var(--gap); }
.video-player-container-premium { width: 100%; aspect-ratio: 16 / 9; background-color: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.video-player-container-premium video { width: 100%; height: 100%; }

/* Meta Bar */
.player-meta-bar.final-version { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.facebook-btn-styled { justify-self: center; }
#prev-lesson-btn { justify-self: start; }
#next-lesson-btn, #abedon-btn { justify-self: end; }

/* Buttons */
.btn-meta { display: flex; align-items: center; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--common-white); cursor: pointer; font-family: 'Google Sans', 'Hind Siliguri', sans-serif; transition: all 0.2s ease; }
.nav-btn-styled { gap: 8px; }
.nav-btn-styled .main-text { font-weight: 600; font-size: 14px; color: #374151; }
.nav-btn-styled i { font-size: 14px; }
.facebook-btn-styled { color: #1877F2; gap: 8px; font-weight: 500; }
.abedon-btn { background-color: var(--error-main); color: white; border-color: var(--error-main); gap: 8px; justify-content: center; font-weight: 600; }
.abedon-btn:hover { background-color: var(--error-dark); }
.btn-meta:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile Sidebar & Toggle */
.mobile-lesson-toggle-main { display: none; }
.close-sidebar-btn { display: none; }
.player-sidebar-overlay { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; transition: opacity 0.3s, visibility 0.3s; }
.player-sidebar-overlay.active { visibility: visible; opacity: 1; }

/* Responsive Styles */
@media (max-width: 992px) {
    .player-page-wrapper { flex-direction: column; }
    .player-sidebar-premium { position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; z-index: 1002; transition: transform 0.3s ease-in-out; }
    .player-sidebar-premium.active { transform: translateX(-320px); }
    .close-sidebar-btn { display: block; }
    .lesson-identity-top #lesson-title-main { font-size: 18px; }
    .mobile-lesson-toggle-main { display: block; margin-left: auto; font-size: 20px; background: none; border: none; cursor: pointer; color: var(--text-dark); }
}
@media (max-width: 768px) {
    .player-meta-bar.final-version { grid-template-columns: 1fr 1fr; }
    .facebook-btn-styled { grid-column: 1 / -1; order: 3; justify-self: center; }
}

/* Modal and Blur styles */
.page-wrapper.blur-active { filter: blur(5px); transition: filter 0.3s ease-in-out; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(24, 39, 71, 0.6); backdrop-filter: blur(2px); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease-in-out; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background-color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 90%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { font-size: 20px; font-weight: 600; }
.close-modal-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: #9CA3AF; }
.modal-body { padding: 24px; overflow-y: auto; }
.modal-body .intro-text { line-height: 1.7; margin-bottom: 24px; color: #4B5563; }
.terms-list { list-style-type: none; padding: 0; }
.terms-list li { display: flex; gap: 16px; margin-bottom: 16px; line-height: 1.7; color: #374151; }
.terms-list li span { flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; background-color: var(--grey-100); border-radius: 50%; font-size: 14px; font-weight: 500; }
.agreement-box { margin-top: 24px; padding: 16px; background-color: var(--grey-50); border-radius: 8px; display: flex; align-items: flex-start; gap: 12px; }
.agreement-box input[type="checkbox"] { margin-top: 4px; width: 16px; height: 16px; }
.agreement-box label { font-size: 14px; color: #4B5563; cursor: pointer; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); text-align: right; }
.submit-application-btn { padding: 10px 24px; font-size: 16px; font-weight: 600; border-radius: 8px; border: none; background-color: #D1D5DB; color: #9CA3AF; cursor: not-allowed; transition: all 0.2s ease; font-family: 'Google Sans', 'Hind Siliguri', sans-serif; }
.submit-application-btn:not(:disabled) { background-color: var(--primary-color); color: #fff; cursor: pointer; }
.submit-application-btn:not(:disabled):hover { background-color: var(--info-dark); } /* Updated */


/* ======================================== */
/* == Responsive Modal (Final Centered Fix) == */
/* ======================================== */

@media (max-width: 768px) {
    .modal-overlay {
        /* This ensures the centering works correctly on all devices */
        padding: 0; 
    }

    .modal-content {
        width: 92%;
        max-width: 450px;
        max-height: 95vh;
        position: fixed;
        top: 10px;
        left:2px
        
    }

    .modal-header {
        padding: 16px 20px;
    }
    
    .modal-header h2 {
        font-size: 18px;
    }

    .modal-body {
        padding: 0 20px 20px 20px;
        overflow-y: auto; /* কনটেন্ট বেশি হলে শুধু এই অংশটি স্ক্রল হবে */
    }

    .modal-footer {
        padding: 16px 20px;
    }

    .submit-application-btn {
        width: 100%;
        padding: 12px;
    }
}



/* ======================================== */
/* == Application Form Page Styles v1.0  == */
/* ======================================== */
.application-page-container {
    padding: 120px 0 60px 0;
    background-color: var(--grey-50); /* Updated */
}
.application-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--common-white); /* Updated */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--grey-200); /* Updated */
}
.form-header {
    padding: 24px 32px;
    text-align: center;
    border-bottom: 1px solid var(--grey-200); /* Updated */
}
.form-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
}
.form-header p {
    color: var(--grey-500); /* Updated */
}
#applicationForm {
    padding: 32px;
}
.form-section {
    margin-bottom: 32px;
}
/* .section-title defined above */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    margin: 12px; /* শুধু এই মানটি 8px থেকে 12px করুন */
    color: #374151;
}


.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--grey-300); /* Updated */
    background-color: var(--grey-50); /* Updated */
    font-family: 'Google Sans', 'Hind Siliguri', sans-serif; /* Font Updated */
    font-size: 15px;
    transition: all 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1); /* Shadow color updated */
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.form-group input.error {
    border-color: var(--error-main); /* Updated */
}
.form-footer {
    text-align: right;
    border-top: 1px solid var(--grey-200); /* Updated */
    padding-top: 24px;
}
.submit-btn {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: #fff;
    cursor: pointer;
    font-family: 'Google Sans', 'Hind Siliguri', sans-serif; /* Font Updated */
    transition: all 0.2s ease;
}
.submit-btn:hover {
    background-color: var(--info-dark); /* Updated */
}

/* Success Modal Styles */
.success-modal-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    width: 90%;
}
.success-modal-content .fa-check-circle {
    font-size: 60px;
    color: var(--success-main); /* Updated */
    margin-bottom: 20px;
}
.success-modal-content h2 {
    font-size: 24px;
    margin-bottom: 12px;
}
.success-modal-content p {
    color: var(--grey-500); /* Updated */
    margin-bottom: 24px;
}
.success-modal-content button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background-color: var(--success-main); /* Updated */
    color: #fff;
    cursor: pointer;
    font-family: 'Google Sans', 'Hind Siliguri', sans-serif; /* Font Updated */
}

/* Responsive for Application Form */
@media (max-width: 768px) {
    .application-page-container {
        padding: 80px 0 40px 0;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    #applicationForm {
        padding: 24px;
    }
    .form-header {
        padding: 20px 24px;
    }
}

/* ======================================== */
/* == Contact Us Page Styles v1.0        == */
/* ======================================== */
.contact-page-container {
    padding: 120px 0 80px 0;
}
.contact-header {
    text-align: center;
    margin-bottom: 60px;
}
.contact-header h1 {
    font-size: 36px;
    margin-bottom: 12px;
}
.contact-header p {
    font-size: 18px;
    color: var(--grey-500); /* Updated */
    max-width: 600px;
    margin: 0 auto;
}
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 48px;
    background-color: var(--common-white); /* Updated */
    padding: 48px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--grey-200); /* Updated */
}
.contact-info h2, .contact-form h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}
.contact-info p {
    color: var(--grey-500); /* Updated */
    margin-bottom: 32px;
}
.info-list {
    list-style-type: none;
}
.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}
.info-list i {
    font-size: 20px;
    color: var(--primary-color);
    margin-top: 5px;
    width: 24px;
    text-align: center;
}
.info-list h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.info-list p {
    margin-bottom: 0;
    color: #4B5563;
}
#contactForm .form-group {
    margin-bottom: 20px;
}


/* Responsive for Contact Page */
@media (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 32px;
    }
}
@media (max-width: 768px) {
    .contact-page-container {
        padding: 80px 0 60px 0;
    }
    .contact-header h1 {
        font-size: 28px;
    }
    .contact-header p {
        font-size: 16px;
    }
    .contact-wrapper {
        padding: 24px;
    }
}

/* ======================================== */
/* == Application Form Custom Select Styles == */
/* ======================================== */

/* General style for Select and other form controls in the application form */
.form-group select.form-control,
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
    /* Existing Styles */
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--grey-300); /* Lighter border */
    background-color: var(--grey-50); /* Very light gray background */
    font-family: 'Google Sans', 'Hind Siliguri', sans-serif; /* Font Updated */
    font-size: 15px;
    color: #374151; /* Darker text */
    transition: all 0.2s ease;
    /* Added appearance properties for standard dropdown look */
    -webkit-appearance: none; /* Remove default arrow on Chrome/Safari */
    -moz-appearance: none;    /* Remove default arrow on Firefox */
    appearance: none;         /* Remove default arrow on others */
}

/* Focus state for consistency */
.form-group select.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--bg-white);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1); /* Shadow color updated */
}

/* Custom dropdown arrow container (wrapping the select for custom arrow) */
/* ... (rest of comment) ... */

.form-group select.form-control {
    /* Specific styling for the dropdown */
    line-height: 1.5; /* Ensures text is centered vertically */
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23546368%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13%205.1L146.2%20224.2%2018.7%2074.5a17.6%2017.6%200%200%200-25.3%2024.5l130.4%20140.4c6.7%207.3%2018%207.3%2024.7%200l130.5-140.4a17.6%2017.6%200%200%200%200-24.5c-6.8-7.2-18.1-7.2-24.8%200z%22%2F%3E%3C%2Fsvg%3E'); /* Arrow color updated to var(--grey-500) */
    background-repeat: no-repeat;
    background-position: right 12px center; /* Position the arrow */
    background-size: 10px; /* Size of the arrow */
    padding-right: 35px; /* Added padding so the text doesn't overlap the arrow */
}

/* Adjustments for the specific Course Selection group (Optional) */
.form-section .form-group select#course_id {
    font-weight: 500;
}


/* =================================
   Contact Success Modal Styles
==================================== */

.modal-overlay {
    display: none; /* Shurute hidden thakbe */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; /* Updated JS ei 'flex' diye show korbe */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0; /* Animation er jonno */
    transition: opacity 0.3s ease;
    display: none; /* JS ei display control korbe */
}

/* Modal show korar jonno JS ei class-ti add korbe na, direct style add korbe */
/* Kintu display:flex; JS theke set kora hobe */

.success-modal-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: scale(0.9); /* Animation er jonno */
    transition: transform 0.3s ease;
    width: 90%;
    max-width: 400px;
}

/* Modal show hole animation */
.modal-overlay[style*="display: flex"] {
    opacity: 1;
}
.modal-overlay[style*="display: flex"] .success-modal-content {
    transform: scale(1);
}


.success-modal-content i.fa-check-circle {
    font-size: 60px;
    color: var(--success-main); /* Updated */
    margin-bottom: 20px;
}

.success-modal-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.success-modal-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: 25px;
}

.success-modal-content #closeSuccessModal {
    background-color: var(--primary-color); /* Updated */
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.success-modal-content #closeSuccessModal:hover {
    background-color: var(--info-dark); /* Updated */
}

/* === Hero Card er Notun 6ti Position === */
/* Purono card er CSS gulo (card1 theke card5) replace korun */

.card1 { /* Marketing */
    top: 5%;
    left: 10%; /* --- আপনার অনুরোধে ডানে সরানো হলো --- */
    animation-delay: -1s;
}

.card2 { /* Production */
    top: 40%;
    left: 5%; /* Ektu beshi baire */
    animation-delay: -3s;
}

.card3 { /* Engineering */
    bottom: 15%;
    left: 10%;
    animation-delay: -5s;
}
.card4 { /* Design */
    top: 10%;
    right: 10%;
    animation-delay: -2s;
}

.card5 { /* Team Funding */
    top: 35%; /* --- ওভারল্যাপ এড়াতে উপরে সরানো হলো --- */
    right: 3%; /* Ektu beshi baire */
    animation-delay: -4s;
}

.card6 { /* Resource */
    bottom: 15%; /* --- ওভারল্যাপ এড়াতে নিচে সরানো হলো --- */
    right: 5%;
    animation-delay: -6s;
}

/* --- ডান পাশের নির্দিষ্ট কার্ডগুলো ছোট করার জন্য --- */
.hero-image-card.card4 img,
.hero-image-card.card5 img,
.hero-image-card.card6 img {
    width: 38px; /* 50px থেকে কমিয়ে 40px করা হলো */
}


@media (max-width: 768px) {
    .hero-image-card img,
.hero-image-card.card3 img,
.hero-image-card.card2 img,
.hero-image-card.card1 img 
.hero-image-card.card4 img,
.hero-image-card.card5 img,
.hero-image-card.card6 img {
    width: 30px; /* 50px থেকে কমিয়ে 40px করা হলো */
}



}


/* --- ডাইনামিক লোগো ইমেজের জন্য স্টাইল --- */
.logo img.dynamic-logo {
    height: 40px; /* আপনার হেডারের উচ্চতা অনুযায়ী সাইজ অ্যাডজাস্ট করুন (e.g., 40px) */
    width: auto;
    vertical-align: middle; /* হেডার লিংকের সাথে লোগোকে মাঝখানে রাখে */
}