/* GENERAL RESET & CONFIGURATIONS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Noto Sans Bengali', sans-serif;
    scroll-behavior: smooth;
    transition: all 0.3s ease;
}

:root {
    --primary-red: #E0115F; /* Crimson Premium Japan Red */
    --navy-dark: #0A1128; /* Deep Corporate Navy Background */
    --card-bg: #111C44; /* Dark Card/Header Background */
    --text-white: #FFFFFF;
    --text-gray: #A0AEC0;
}

body {
    background-color: var(--navy-dark);
    color: var(--text-white);
    overflow-x: hidden;
}

/* TOP ANNOUNCEMENT BAR */
.top-bar {
    background-color: var(--primary-red);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 6%;
    font-size: 13px;
    font-weight: 500;
}

.top-info span {
    margin-right: 20px;
}

.top-info i, .top-notice i {
    margin-right: 6px;
}

/* MAIN HEADER & NAVBAR */
.main-header {
    background-color: rgba(17, 28, 68, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 6%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Logo Design */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.japan-sun {
    width: 18px;
    height: 18px;
    background-color: var(--primary-red);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--primary-red);
}

.logo {
    color: var(--text-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.logo span {
    color: var(--primary-red);
}

/* Navbar Menu Links */
.navbar a {
    color: var(--text-gray);
    text-decoration: none;
    margin: 0 20px;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding: 5px 0;
}

.navbar a:hover, .navbar a.active {
    color: var(--text-white);
}

.navbar a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-red);
    transition: 0.3s ease;
}

.navbar a:hover::after, .navbar a.active::after {
    width: 100%;
}

/* Header Action Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-white);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--text-white);
}

.portal-btn {
    background-color: var(--primary-red);
    color: var(--text-white);
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(224, 17, 95, 0.3);
}

.portal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 17, 95, 0.5);
}

.menu-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-white);
}

/* MOBILE RESPONSIVE NAVBAR LAYOUT */
@media (max-width: 992px) {
    .top-bar {
        display: none; /* মোবাইলে টপ বার হাইড থাকবে ক্লিন লুকের জন্য */
    }
    .menu-toggle {
        display: block;
    }
    .navbar {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--card-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        gap: 30px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
    .navbar.active {
        left: 0;
    }
    .navbar a {
        margin: 0;
        font-size: 18px;
    }
}
/* HERO SECTION CORE LAYOUT */
.hero-section {
    min-height: calc(100vh - 70px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 6%;
    background: linear-gradient(180deg, rgba(10, 17, 40, 0.5) 0%, var(--navy-dark) 100%);
    overflow: hidden;
}

/* Background Cultural Visual Context Elements */
.sakura-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(224, 17, 95, 0.05) 1px, transparent 0);
    background-size: 24px 24px;
    z-index: 1;
}

.hero-container {
    width: 100%;
    max-width: 1300px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* LEFT SIDE INTERACTIVE CONTENT BUILD */
.hero-content {
    max-width: 750px;
}

/* Live seat tracker engine pill element */
.live-tracker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(224, 17, 95, 0.25);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 25px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #00FF66; /* Glowing Online Activity Indicator Green */
    border-radius: 50%;
    box-shadow: 0 0 10px #00FF66, 0 0 20px #00FF66;
    animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

.live-tracker p {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
    letter-spacing: 0.5px;
}

.live-tracker strong {
    color: #00FF66;
    font-size: 14px;
}

/* Typography & Headline Branding structures */
.hero-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.highlight-text {
    background: linear-gradient(135deg, #FF6B6B 0%, var(--primary-red) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(224, 17, 95, 0.1);
}

.hero-desc {
    color: var(--text-gray);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Button interface engine */
.hero-action-btns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary-hero {
    background: linear-gradient(135deg, var(--primary-red) 0%, #B00E46 100%);
    color: var(--text-white);
    text-decoration: none;
    padding: 15px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(224, 17, 95, 0.35);
}

.btn-primary-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(224, 17, 95, 0.5);
}

.btn-secondary-hero {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    text-decoration: none;
    padding: 15px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-secondary-hero:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-red);
}

/* RIGHT SIDE GRAPHIC ENGINE */
.hero-graphic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.graphic-glow-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(224, 17, 95, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 1;
}

.hero-graphic img {
    width: 100%;
    max-width: 440px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    z-index: 2;
}

/* Dynamic floating UI structures */
.floating-badge {
    position: absolute;
    background: rgba(17, 28, 68, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 20px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.floating-badge i {
    font-size: 24px;
    color: var(--primary-red);
}

.floating-badge h4 {
    font-size: 16px;
    font-weight: 700;
}

.floating-badge p {
    font-size: 12px;
    color: var(--text-gray);
}

/* পুরোনো অংশটুকু কেটে এই নতুন কোডটুকু বসিয়ে দিন */
.badge-1 {
    top: 20% !important;
    left: -40px !important; /* বামে কিছুটা বাড়িয়ে দেওয়া হলো */
    animation: floatAnim 4s ease-in-out infinite;
}

.badge-2 {
    bottom: 15% !important;
    right: -40px !important; /* ডানে কিছুটা বাড়িয়ে দেওয়া হলো */
    animation: floatAnim 4.5s ease-in-out infinite alternate;
}

@keyframes floatAnim {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}


/* RESPONSIVE SCALING ADAPTATIONS (TABLETS & PHONES) */
@media (max-width: 1200px) {
    .badge-1 { left: -5%; }
    .badge-2 { right: 0; }
    .hero-title { font-size: 38px; }
}

@media (max-width: 992px) {
    .hero-section {
        padding-top: 40px;
    }
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }
    .hero-content {
        max-width: 100%;
    }
    .hero-action-btns {
        justify-content: center;
    }
    .hero-graphic {
        max-width: 380px;
        margin: 0 auto;
    }
    .badge-1 { left: -10%; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 28px; }
    .hero-action-btns { flex-direction: column; width: 100%; }
    .btn-primary-hero, .btn-secondary-hero { justify-content: center; width: 100%; }
    .floating-badge { padding: 8px 14px; gap: 8px; }
    .floating-badge i { font-size: 18px; }
    .floating-badge h4 { font-size: 13px; }
}
/* COURSES SECTION STYLES */
.courses-section {
    padding: 80px 6%;
    background-color: var(--navy-dark);
    position: relative;
}

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

.section-subtitle {
    color: var(--primary-red);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 10px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-white);
}

/* GRID LAYOUT ENGINE */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* PREMIUM GLASSMORPHISM CARD LAYOUT */
.course-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.course-card:hover {
    transform: translateY(-10px);
    border-color: rgba(224, 17, 95, 0.4);
    box-shadow: 0 15px 40px rgba(224, 17, 95, 0.15);
}

/* Highlight Featured Card */
.course-card.popular {
    border: 1px solid rgba(224, 17, 95, 0.5);
    box-shadow: 0 15px 35px rgba(224, 17, 95, 0.1);
}

.badge-level {
    position: absolute;
    top: 25px;
    right: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.badge-popular {
    position: absolute;
    top: -15px;
    left: 30px;
    background-color: var(--primary-red);
    color: var(--text-white);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(224, 17, 95, 0.4);
}

.card-icon {
    font-size: 35px;
    color: var(--primary-red);
    margin-bottom: 20px;
}

.course-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-white);
}

.course-card p {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Bullet list features */
.course-features {
    list-style: none;
    margin-bottom: 30px;
}

.course-features li {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-features li i {
    color: #00FF66; /* Green checkmark icon */
    font-size: 12px;
}

/* Bottom Actions pricing & CTA button */
.card-footer-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    margin-top: auto;
}

.course-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
}

.btn-enroll {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.course-card:hover .btn-enroll, .course-card.popular .btn-enroll {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    box-shadow: 0 4px 15px rgba(224, 17, 95, 0.3);
}

/* RESPONSIVE SCALING */
@media (max-width: 768px) {
    .section-title { font-size: 28px; }
    .courses-grid { grid-template-columns: 1fr; }
}
/* QUIZ SECTION STYLES */
.quiz-section {
    padding: 80px 6%;
    background: linear-gradient(180deg, var(--navy-dark) 0%, #0d1530 100%);
    position: relative;
}

.quiz-container {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Progress Bar Component */
.quiz-progress-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.05);
}

.progress-fill {
    width: 20%;
    height: 100%;
    background-color: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Internal Architecture */
.quiz-body {
    padding: 40px;
}

.question-number {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.question-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 30px;
}

/* Interactive Grid Options Buttons */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.option-btn {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 24px;
    border-radius: 12px;
    color: var(--text-white);
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.option-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.option-btn.selected {
    background-color: rgba(224, 17, 95, 0.1);
    border-color: var(--primary-red);
    box-shadow: 0 0 15px rgba(224, 17, 95, 0.15);
}

/* Footer elements Controls */
.quiz-footer {
    padding: 20px 40px 40px;
    display: flex;
    justify-content: flex-end;
}

.btn-quiz-next {
    background-color: var(--primary-red);
    color: var(--text-white);
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-quiz-next:disabled {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* LEAD BOX & RESULT FRAMEWORKS STYLE */
.lead-box, .result-box {
    padding: 50px 40px;
    text-align: center;
}

.lead-icon, .result-badge {
    font-size: 45px;
    color: var(--primary-red);
    margin-bottom: 20px;
}

.lead-box h3, .result-box h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.lead-box p, .result-box p {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Capture Form Setup Layout */
.quiz-form {
    max-width: 450px;
    margin: 0 auto;
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-gray);
}

.form-group input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--text-white);
    font-size: 15px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-red);
}

.btn-submit-lead, .btn-quiz-reset {
    width: 100%;
    background-color: var(--primary-red);
    color: var(--text-white);
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    margin-top: 10px;
}

/* Result Engine view attributes */
.score-display {
    font-size: 18px;
    color: var(--text-gray);
    margin-bottom: 10px;
}

.score-display strong {
    color: #00FF66;
    font-size: 28px;
}

.level-badge {
    background-color: rgba(0, 255, 102, 0.1);
    color: #00FF66;
    border: 1px solid rgba(0, 255, 102, 0.2);
    display: inline-block;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Helper Class Utilities */
.hidden {
    display: none !important;
}

@media (max-width: 480px) {
    .quiz-body, .lead-box, .result-box { padding: 25px 20px; }
    .question-text { font-size: 18px; }
}
/* DASHBOARD SECTION LAYOUT */
.dashboard-section {
    padding: 80px 6%;
    background-color: var(--navy-dark);
}

.portal-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Tabs switcher controls */
.portal-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.tab-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-gray);
    padding: 12px 26px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-white);
}

.tab-btn.active {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--text-white);
    box-shadow: 0 4px 15px rgba(224, 17, 95, 0.3);
}

/* PANEL 1: STUDENT PORTAL PROFILE STYLES */
.student-profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
}

/* Digital ID Card Generation Look */
.student-id-card {
    background: linear-gradient(145deg, #16224f 0%, #0d1535 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.id-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.id-card-header h4 {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-gray);
}

.id-photo {
    width: 90px;
    height: 90px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--primary-red);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--text-gray);
    margin-bottom: 15px;
}

.student-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.student-id {
    font-size: 12px;
    color: var(--primary-red);
    font-weight: 600;
    margin-bottom: 20px;
}

.id-details {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 12px;
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    margin-bottom: 20px;
}

.id-details p {
    margin-bottom: 6px;
    color: var(--text-gray);
}

.id-details strong {
    color: var(--text-white);
}

.id-footer-barcode {
    font-family: monospace;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.15);
    letter-spacing: 2px;
}

/* Main content stats & tables */
.student-main-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-box {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 14px;
    text-align: center;
}

.stat-box h5 {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 5px;
}

.stat-box p {
    font-size: 24px;
    font-weight: 700;
    color: #00FF66;
}

.schedule-box {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 16px;
}

.schedule-box h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-item {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.schedule-item h5 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.schedule-item p {
    font-size: 12px;
    color: var(--text-gray);
}

.btn-zoom {
    background-color: #00C2FF; /* Zoom theme sky blue */
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* PANEL 2: ADMIN / CRM PANNEL ARCHITECTURE STYLES */
.admin-summary-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.summary-card i {
    font-size: 32px;
    color: #00FF66;
}

.summary-card.status-active i {
    color: var-text-white;
}

.summary-card h4 {
    font-size: 26px;
    font-weight: 700;
}

.summary-card p {
    font-size: 13px;
    color: var(--text-gray);
}

.leads-table-container {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 16px;
}

.leads-table-container h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-responsive {
    overflow-x: auto;
}

.leads-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.leads-table th, .leads-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.leads-table th {
    color: var(--text-gray);
    font-weight: 500;
}

.leads-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

.btn-delete-lead {
    background: transparent;
    border: none;
    color: var(--primary-red);
    cursor: pointer;
    font-size: 14px;
}

.btn-delete-lead:hover {
    transform: scale(1.15);
}

/* RESPONSIVE SCALING */
@media (max-width: 992px) {
    .student-profile-grid { grid-template-columns: 1fr; }
    .student-id-card { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 580px) {
    .stats-row, .admin-summary-cards { grid-template-columns: 1fr; }
}
/* CONTACT SECTION LAYOUT STYLES */
.contact-section {
    padding: 80px 6%;
    background: linear-gradient(180deg, #0d1530 0%, var(--navy-dark) 100%);
    position: relative;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 50px;
    align-items: start;
}

/* Info Cards sidebar columns */
.contact-info-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 22px 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.info-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(224, 17, 95, 0.1);
    border-radius: 12px;
    color: var(--primary-red);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.info-card p {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.4;
}

/* Form block packaging design styles */
.contact-form-box {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.form-row-twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form-box select, .contact-form-box textarea {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 16px;
    border-radius: 8px;
    color: var(--text-white);
    font-size: 15px;
}

.contact-form-box select:focus, .contact-form-box textarea:focus {
    outline: none;
    border-color: var(--primary-red);
}

.btn-submit-contact {
    background-color: var(--primary-red);
    color: var(--text-white);
    border: none;
    padding: 14px 35px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(224, 17, 95, 0.3);
}

.btn-submit-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 17, 95, 0.5);
}

/* PREMIUM FOOTER ARCHITECTURE */
.main-footer {
    background-color: #050917;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 6% 30px;
}

.footer-top-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-about {
    max-width: 450px;
}

.footer-about p {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 25px;
}

.social-icons-row {
    display: flex;
    gap: 12px;
}

.social-icons-row a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-icons-row a:hover {
    background-color: var(--primary-red);
    color: var(--text-white);
    border-color: var(--primary-red);
    box-shadow: 0 4px 12px rgba(224, 17, 95, 0.3);
}

.footer-links-col h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-links-col ul {
    list-style: none;
}

.footer-links-col ul li {
    margin-bottom: 12px;
}

.footer-links-col ul li a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 14px;
}

.footer-links-col ul li a:hover {
    color: var(--text-white);
    padding-left: 5px;
}

/* Bottom strip elements */
.footer-bottom-bar {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    text-align: center;
    font-size: 13px;
    color: var(--text-gray);
}

/* RESPONSIVE SCALING BREAKPOINTS */
@media (max-width: 992px) {
    .contact-container { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
    .form-row-twin { grid-template-columns: 1fr; }
    .contact-form-box { padding: 25px 20px; }
}
/* ছবি লোড না হলেও লেআউট ঠিক রাখার ফিক্স */
.hero-graphic {
    min-height: 400px; /* ছবি না থাকলেও যেন জায়গা ফাঁকা থাকে */
    width: 100%;
}

.hero-graphic img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover; /* ছবিকে নিখুঁতভাবে বক্সের সাথে ফিট করবে */
    background-color: rgba(255, 255, 255, 0.02); /* ছবি লোড হওয়ার আগ পর্যন্ত হালকা ব্যাকগ্রাউন্ড */
}

/* ছোট ডিভাইসে ব্যাজের পজিশন আরও নিখুঁত করা */
@media (max-width: 1200px) {
    .badge-1 { left: 0px !important; top: 10% !important; }
    .badge-2 { right: 0px !important; bottom: 10% !important; }
}
/* ১. ব্যাজগুলোকে ছবির দুই পাশে সুন্দরভাবে বের করার চূড়ান্ত ফিক্স */
.hero-graphic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px; /* দুই পাশে অতিরিক্ত জায়গা তৈরি করা হলো */
}

.badge-1 {
    top: 25% !important;
    left: -30px !important; /* জোরপূর্বক বামে বের করা হলো */
    background: rgba(224, 17, 95, 0.95) !important; /* হালকা ডার্ক কেটে আকর্ষণীয় লাল ব্যাকগ্রাউন্ড */
    border: 1px solid #ff4d8d !important;
}

.badge-2 {
    bottom: 20% !important;
    right: -30px !important; /* জোরপূর্বক ডানে বের করা হলো */
    background: rgba(17, 28, 68, 0.95) !important; /* ডার্ক থিমের প্রিমিয়াম কর্পোরেট ব্যাকগ্রাউন্ড */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ২. নিচের ছোট ডেসক্রিপশন লেখাটি স্পষ্ট করার ফিক্স */
.hero-desc {
    color: #e2e8f0 !important; /* টেক্সটের কালার আরও ব্রাইট ও সাদাটে করা হলো */
    background: rgba(255, 255, 255, 0.05); /* লেখার নিচে হালকা সুন্দর একটি ব্যাকগ্রাউন্ড শেড */
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-red); /* বাম পাশে জাপানিজ রেড বর্ডার */
    line-height: 1.8 !important;
}

/* ব্যাজের ভেতরের লেখাগুলো স্পষ্ট করার জন্য হোয়াইট কালার */
.floating-badge h4, .floating-badge p {
    color: #ffffff !important;
}
.floating-badge p {
    color: #cbd5e1 !important; /* ছোট সাবটাইটেল রিডেবল গ্রে */
}
/* ডান পাশের নেটিভ শিক্ষক ব্যাজের ব্যাকগ্রাউন্ড পরিবর্তন */
.badge-2 {
    background: rgba(224, 17, 95, 0.95) !important; /* উজ্জ্বল লাল ব্যাকগ্রাউন্ড */
    border: 1px solid #ff4d8d !important; /* হালকা বর্ডার শ্যাডো */
}

/* ব্যাজের ভেতরের আইকন ও লেখার কালার ফিক্স */
.badge-2 i, .badge-2 h4, .badge-2 p {
    color: #ffffff !important; /* ভেতরের সব লেখা সম্পূর্ণ সাদা */
}