@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');
:root {
    --primary-blue: #0d47a1; /* Deep Blue for contrast */
    --premium-dark: #0f172a; /* Rich dark blue-black for Navbar/Footer */
    --crimson: #DC143C;      /* Your Logo Color */
    --text-muted: #a0aec0;
}
body {
    font-family: 'Hind Siliguri', sans-serif !important;
    background-color: #fcfcfc;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}
/* ন্যাভবার এবং ফুটার টেক্সট যাতে ফ্যাকাশে না লাগে */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:hover, 
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--crimson) !important;
}

/* ফুটার টাইটেল আন্ডারলাইন */
.footer-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: white;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--crimson);
}
.social-circle { width: 42px; height: 42px; border-radius: 50%; background: #1a202c; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: 0.3s; border: 1px solid #333; }
.social-circle:hover { background: var(--crimson); border-color: var(--crimson); transform: translateY(-5px); color: #fff; }
.hover-crimson:hover { color: var(--crimson) !important; }
/* ==========================================================================
   ২. হেডার ও ন্যাভবার (Header & Navbar)
   ========================================================================== */
.social-icon-top { margin: 0 8px; color: #333; transition: 0.3s; font-size: 16px; }
.social-icon-top:hover { color: var(--crimson); transform: translateY(-2px); }
.navbar-nav { margin-left: auto; margin-right: auto; }

/* --- Dropdown Hover & Click Fix --- */

/* শুধুমাত্র বড় স্ক্রিনে (Desktop) হোভার কাজ করবে */
@media (min-width: 992px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* গ্যাপ দূর করার জন্য */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .dropdown > .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }

    /* অদৃশ্য ব্রিজ (Bridge) তৈরি করা যাতে মাউস সরালে মেনু বন্ধ না হয় */
    .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -15px; /* মেনুর উপরে একটি অদৃশ্য লেয়ার */
        left: 0;
        width: 100%;
        height: 15px;
        background: transparent;
    }
}

/* ড্রপডাউন আইটেম হোভার কালার - আপনার ক্রিমসন থিমের সাথে ম্যাচিং */
.dropdown-item:hover {
    background-color: var(--crimson) !important;
    color: white !important;
}

/* ড্রপডাউন মেনুর ওপরের বর্ডার ডিজাইন */
.dropdown-menu {
    border-top: 3px solid var(--crimson) !important;
    border-radius: 0 0 10px 10px !important;
    padding: 10px 0;
}
/* ==========================================================================
   ৩. হিরো সেকশন ও এনিমেটেড বাটন (Hero Section & Animated Buttons)
   ========================================================================== */
.hero-section { background: linear-gradient(135deg, #fff 0%, #fce4ec 100%); padding: 80px 0; }
.hero-video-box { border: 6px solid #fff; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; }

.btn-seminar-animate {
    position: relative;
    z-index: 1;
}
.btn-seminar-animate::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; border: 2px solid var(--crimson); border-radius: 50px;
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; z-index: -1;
}
        .seminar-hero-card { border: none; border-radius: 25px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); overflow: hidden; background: #fff; margin-top: 30px; }
        .info-side { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; padding: 50px; }
        .form-side { padding: 50px; }
        
        .section-tag { color: #3b82f6; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; display: block; margin-bottom: 10px; }
        .form-label { font-weight: 700; color: #475569; font-size: 14px; margin-bottom: 8px; }
        .form-control, .form-select { border-radius: 12px; border: 1.5px solid #e2e8f0; padding: 12px 15px; transition: 0.3s; }
        .form-control:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); outline: none; }
        
        .benefit-item { display: flex; align-items: start; gap: 15px; margin-bottom: 25px; }
        .benefit-icon { width: 45px; height: 45px; background: rgba(255,255,255,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
        
        .btn-seminar { background: #1e3a8a; color: white; border: none; padding: 15px; border-radius: 12px; font-weight: 800; font-size: 18px; width: 100%; transition: 0.3s; margin-top: 10px; }
        .btn-seminar:hover { background: #1e40af; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(30, 58, 138, 0.2); }
        
        @media (max-width: 768px) { .info-side, .form-side { padding: 30px; } }

@keyframes pulse-ring {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    80%, 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* ==========================================================================
   ৪. কেন আমরাই সেরা? (Why Choose Us Section) - [নতুন যুক্ত হয়েছে]
   ========================================================================== */
.feature-card {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    transition: var(--transition);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-bottom: 4px solid transparent;
}

.feature-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid var(--primary-blue);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: #f0f7ff;
    color: var(--primary-blue);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.feature-card:hover .feature-icon {
    background: var(--primary-blue);
    color: #ffffff;
    transform: rotateY(360deg);
}

/* ==========================================================================
   ৫. স্টিকি অফার (Sticky Offer)
   ========================================================================== */
.site-offer { position: fixed; left: 15px; top: 50%; transform: translateY(-50%); width: 220px; z-index: 1050; transition: 0.5s ease-in-out; }
.offer-img-wrapper { border-radius: 15px; background: #fff; border: 3px solid #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: 0.3s; }
.offer-img-wrapper:hover { transform: scale(1.05); }
.offer-close-btn { position: absolute; top: -12px; right: -12px; width: 30px; height: 30px; background: #f44336; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1060; border: 2px solid #fff; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.activeNow { display: none !important; }

/* ==========================================================================
/* --- Gorgeous Course Category Styles --- */
.cat-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 20px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* কার্ড হোভার ইফেক্ট */
.cat-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* আইকন র‍্যাপার ডিজাইন */
.cat-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 20px; /* আধুনিক স্কুইয়ার-রাউন্ড লুক */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #ffffff;
    transition: 0.5s;
}

.cat-card:hover .cat-icon-wrapper {
    transform: scale(1.1) rotate(10deg);
}

/* ক্যাটাগরি গ্রাডিয়েন্টস */
.graphics-gradient { background: linear-gradient(135deg, #ff416c, #ff4b2b); }
.web-gradient { background: linear-gradient(135deg, #0d6efd, #00c6ff); }
.marketing-gradient { background: linear-gradient(135deg, #11998e, #38ef7d); }
.basic-gradient { background: linear-gradient(135deg, #8e2de2, #4a00e0); }

/* হোভার করলে নিচের কালারফুল লাইন */
.cat-hover-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: #ff416c;
    transition: 0.4s;
}

.cat-card:hover .cat-hover-line {
    width: 100%;
}

.cat-hover-line.line-blue { background: #0d6efd; }
.cat-hover-line.line-green { background: #11998e; }
.cat-hover-line.line-purple { background: #8e2de2; }

/* টাইপোগ্রাফি এডজাস্টমেন্ট */
.cat-card h6 {
    font-size: 16px;
    line-height: 1.4;
    transition: 0.3s;
}

.cat-card:hover h6 {
    color: #000;
}
/* --- Review Slider Custom Styling --- */
.review-fb-card {
    background: #f8f9fa;
    transition: transform 0.3s ease;
    min-height: 380px;
}

.review-fb-card:hover {
    transform: translateY(-5px);
}
/* --- Popular Course Section Gorgeous Styling --- */
.premium-course-card {
    border-radius: 15px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #fff;
    overflow: hidden;
}

.premium-course-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* ইমেজ অ্যাডজাস্টমেন্ট (Fixed Ratio 16:9 or 4:3) */
.course-img-wrapper {
    position: relative;
    height: 180px; /* ডেক্সটপে ফিক্সড হাইট */
    overflow: hidden;
}

.course-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ইমেজ কাটবে না, সুন্দরভাবে অ্যাডজাস্ট হবে */
    transition: transform 0.6s ease;
}

.premium-course-card:hover .course-img-wrapper img {
    transform: scale(1.1) rotate(2deg);
}

/* ক্যাটাগরি ব্যাজ */
.category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-pink);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ইমেজের ওপর হোভার ওভারলে */
.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 110, 253, 0.6); /* প্রাইমারি কালার ওভারলে */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
    z-index: 1;
}

.premium-course-card:hover .img-overlay {
    opacity: 1;
}

/* টাইটেল এবং টাইপোগ্রাফি */
.course-title {
    height: 42px; /* ২ লাইনের বেশি হবে না */
    overflow: hidden;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* মোবাইল ভিউর জন্য বিশেষ ফিক্স */
@media (max-width: 576px) {
    .course-img-wrapper {
        height: 200px; /* মোবাইলে ইমেজ একটু বড় দেখাবে */
    }
    .section-title {
        font-size: 24px;
    }
    .premium-course-card {
        margin-bottom: 10px;
    }
}
/* স্লাইডার কন্ট্রোল বাটন ডিজাইন */
.custom-control {
    width: 60px !important; /* বাটনের এরিয়া */
    opacity: 1 !important;
}

.custom-control-icon {
    width: 50px;
    height: 50px;
    background-color: var(--crimson) !important; /* আপনার ক্রিমসন কালার ভ্যারিয়েবল */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
}

.custom-control-icon:hover {
    background-color: #a50f2d !important; /* ডার্ক হোভার কালার */
    transform: scale(1.1);
}

/* মোবাইল ভিউতে বাটন পজিশন ঠিক করা */
@media (max-width: 991px) {
    .custom-control {
        display: none; /* মোবাইলে সোয়াইপ সাপোর্ট করবে, বাটন চাইলে রাখতে পারেন */
    }
    .carousel-inner {
        padding-left: 0;
        padding-right: 0;
    }
}
/* ==========================================================================
   ৭. কাউন্টার ও পেমেন্ট (Counter & Payment)
   ========================================================================== */
.counter-card { transition: var(--transition); border-radius: 15px; }
.counter-icon { font-size: 30px; color: var(--crimson); width: 60px; height: 60px; line-height: 60px; background: rgba(220, 20, 60, 0.1); border-radius: 50%; display: inline-block; transition: 0.4s; }
.counter-card:hover .counter-icon { background: var(--crimson); color: #fff; transform: rotateY(360deg); }

.payment-card { border-radius: 20px; transition: var(--transition); background: #fff; border: 1px solid #f1f1f1 !important; }
.payment-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; border-color: var(--primary-blue) !important; }

/* ==========================================================================
   ৮. ফুটার ও স্ক্রল বাটন (Footton)
   ========================================================================== */
.social-circle { width: 40px; height: 40px; border-radius: 50%; background: #333; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.social-circle:hover { background: var(--accent-pink); transform: translateY(-5px); color: #fff; }

/* --- Back to Top Button Styling --- */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: none; /* শুরুতে লুকানো থাকবে, স্ক্রল করলে দেখা যাবে */
    width: 50px;
    height: 50px;
    border-radius: 50% !important; /* নিখুঁত গোল */
    background-color: var(--crimson); /* আপনার ক্রিমসন কালার ভ্যারিয়েবল */
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
    transition: all 0.3s ease;
    padding: 0;
    text-align: center;
    line-height: 50px; /* আইকন সেন্টারে রাখার জন্য */
    font-size: 20px;
}

#scrollTopBtn:hover {
    background-color: #a50f2d; /* হোভার করলে একটু গাঢ় লাল হবে */
    transform: translateY(-5px); /* হালকা উপরে উঠবে */
    box-shadow: 0 6px 20px rgba(220, 20, 60, 0.6);
    color: #fff;
}

/* মোবাইল ডিভাইসে বাটনের সাইজ কিছুটা ছোট করা */
@media (max-width: 576px) {
    #scrollTopBtn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .site-offer { width: 160px; left: 10px; }
    .offer-close-btn { width: 25px; height: 25px; font-size: 12px; }
    .hero-section { padding: 40px 0; }
    .section-title { font-size: 24px; }
}
/* ==========================================================================
   About Us Page Styles
   ========================================================================== */

.page-header {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
    color: white;
}

/* About Section Specifics */
.img-premium {
    border-radius: 20px;
    border: 8px solid #fff;
    box-shadow: 0 15px 45px rgba(0,0,0,0.1);
}

.about-card {
    border: none;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    background: #fff;
    transition: transform 0.4s ease;
}

.about-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}

/* Mission Box Styling */
.mission-box {
    border-left: 5px solid #e91e63; /* Accent Color */
    padding-left: 20px;
    background: #fff8f9;
    border-radius: 0 15px 15px 0;
}

.mission-box h4 {
    color: #e91e63;
}

/* Glow Animation for Button */
.btn-glow {
    animation: pulse-blue-glow 2s infinite;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 600;
}

@keyframes pulse-blue-glow {
    0% { box-shadow: 0 0 0 0px rgba(13, 110, 253, 0.4); }
    100% { box-shadow: 0 0 0 15px rgba(13, 110, 253, 0); }
}

/* Global Section Adjustments for About Page */
.mb-n3 {
    margin-bottom: -1rem !important;
}

.me-n3 {
    margin-right: -1rem !important;
}
/* ==========================================================================
   CEO Page Specific Styles
   ========================================================================== */

.ceo-page-bg {
    background-color: #f4f7f6;
}

.ceo-hero { 
    background: linear-gradient(135deg, #0d47a1 0%, #002171 100%); 
    color: white; 
    padding: 100px 0 60px; 
    border-bottom-left-radius: 100px;
}

.ceo-img { 
    border: 8px solid rgba(255,255,255,0.2); 
    border-radius: 20px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); 
    transition: 0.3s;
}

.ceo-img:hover { 
    transform: scale(1.02); 
}

.ceo-info-card { 
    border: none; 
    border-radius: 15px; 
    background: #fff; 
    height: 100%; 
}

.ceo-section-title { 
    font-weight: 700; 
    position: relative; 
    padding-bottom: 10px; 
    margin-bottom: 30px; 
}

.ceo-section-title::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 50px; 
    height: 3px; 
    background: #DC143C; /* Accent Crimson */
}

.ceo-progress { 
    height: 8px; 
    border-radius: 10px; 
    margin-bottom: 20px; 
}

.ceo-timeline-item { 
    border-left: 2px solid #0d47a1; 
    padding-left: 20px; 
    position: relative; 
    margin-bottom: 25px; 
}

.ceo-timeline-item::before { 
    content: ''; 
    position: absolute; 
    left: -9px; 
    top: 0; 
    width: 16px; 
    height: 16px; 
    background: #DC143C; 
    border-radius: 50%; 
}

.btn-download { 
    background: #DC143C; 
    color: white; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 50px; 
    font-weight: 600; 
    transition: 0.3s; 
}

.btn-download:hover { 
    background: #b71132; 
    color: white !important; 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(220, 20, 60, 0.3); 
}
/* ==========================================================================
   Graphics & Multimedia Page Styles
   ========================================================================== */

.category-hero-header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

/* Premium Course Card */
.premium-course-card {
    border-radius: 20px !important;
    transition: all 0.4s ease;
    overflow: hidden;
}

.premium-course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

.card-img-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.premium-course-card:hover .card-img-container img {
    transform: scale(1.1);
}

.badge-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #e91e63;
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}

.card-img-overlay-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
    z-index: 1;
}

.premium-course-card:hover .card-img-overlay-custom {
    opacity: 1;
}

.course-title-limit {
    height: 50px;
    overflow: hidden;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Pulse animation for hero button */
.pulse-btn {
    animation: pulse-white-glow 2s infinite;
}

@keyframes pulse-white-glow {
    0% { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.4); }
    100% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
}
/* ==========================================================================
   Course Details Page Specific Styles
   ========================================================================== */

/* Hero Section Specifics */
.course-details-hero {
    background-image: linear-gradient(to right, #ffffff, #f0f7ff);
}

.section-title-left {
    position: relative;
    padding-bottom: 10px;
}
.section-title-left::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #0d6efd;
}

/* Curriculum List Styling */
.curriculum-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.curriculum-list li {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 14px;
    transition: 0.3s;
}

.curriculum-list li:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

/* Admission Card Styles */
.price-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
}

/* Facility Card Styles */
.facility-card {
    background: #fff;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid #f1f1f1;
}

.facility-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: #0d6efd;
}

.facility-icon {
    width: 60px;
    height: 60px;
    background: #fff0f3;
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    margin: 0 auto 20px;
}

.facility-icon.icon-blue { background: #e7f1ff; color: #0d6efd; }
.facility-icon.icon-green { background: #e6f9f0; color: #198754; }
.facility-icon.icon-orange { background: #fff5e6; color: #fd7e14; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .curriculum-list {
        grid-template-columns: 1fr;
    }
}
/* --- For Whom Freelancing Styles --- */
.for-whom-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 15px;
    transition: all 0.3s ease;
    border: 1px solid #f1f1f1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.for-whom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--primary-blue);
}

.for-whom-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: 0.4s;
}

.for-whom-card:hover .for-whom-icon {
    transform: rotateY(360deg);
}

/* আইকন ব্যাকগ্রাউন্ড কালারস (সফট ভার্সন) */
.bg-soft-pink { background-color: #fff0f3; color: #e91e63; }
.bg-soft-blue { background-color: #e7f1ff; color: #0d6efd; }
.bg-soft-green { background-color: #e6f9f0; color: #198754; }
.bg-soft-orange { background-color: #fff5e6; color: #fd7e14; }
.bg-soft-purple { background-color: #f3e5f5; color: #8e2de2; }
.bg-soft-cyan { background-color: #e0f7fa; color: #00acc1; }

.for-whom-card h6 {
    font-size: 14px;
    color: #444;
    margin-bottom: 0;
}

/* মোবাইল ভিউর জন্য অ্যাডজাস্টমেন্ট */
@media (max-width: 576px) {
    .for-whom-card {
        padding: 20px 10px;
    }
    .for-whom-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    .for-whom-card h6 {
        font-size: 13px;
    }
}
/* ==========================================================================
   Web & Software Page Specific Styles
   ========================================================================== */

.web-hero-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.section-title-white {
    position: relative;
    padding-bottom: 10px;
}

.section-title-white::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #0dcaf0; /* Cyan color matching web theme */
}

/* অন্যান্য ক্যাটাগরি ও পেজের কমন এনিমেশন আগের মতোই থাকবে */



 /* টাইটেল ২ লাইনের বেশি হবে না যাতে কার্ডের সাইজ সমান থাকে */
    .course-title-limit {
        height: 50px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.4;
        transition: 0.3s;
    }
    
    .premium-course-card:hover .course-title-limit {
        color: #0d6efd !important;
    }

    /* কার্ড গ্রাফিক্স ও এনিমেশন */
    .premium-course-card {
        border-radius: 20px !important;
        transition: all 0.4s ease-in-out;
        background: #fff;
    }

    .premium-course-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    }

    .card-img-container {
        position: relative;
        height: 200px;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
    }

    .card-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .premium-course-card:hover .card-img-container img {
        transform: scale(1.1);
    }
    /* ==========================================================================
   Freelancing Page Specific Styles
   ========================================================================== */

.freelance-hero {
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.freelance-card {
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: none;
}

.section-title-left {
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.section-title-left::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #0d6efd;
}

/* Marketplace Logo Styling */
.market-logo-box {
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.market-logo-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    border-color: #0d6efd !important;
}

.market-logo-box img {
    max-height: 50px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.market-logo-box:hover img {
    filter: grayscale(0%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .freelance-hero {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 30px 0;
    }
    .market-logo-box {
        height: 60px;
    }
}
/* ==========================================================================
   Contact Page Specific Styles
   ========================================================================== */

.contact-info-card {
    background: #fff;
    overflow: hidden;
}

.contact-info-header {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
    padding: 40px;
    text-align: center;
}

.info-icon {
    width: 45px;
    height: 45px;
    background: #e7f1ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    flex-shrink: 0;
}

.form-control:focus {
    background-color: #fff !important;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.1);
    border: 1px solid #0d6efd !important;
}

.is-invalid {
    border: 1px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}

.map-wrapper {
    transition: transform 0.3s ease;
}

.map-wrapper:hover {
    transform: translateY(-5px);
}

/* --- Gallery Modern Card Styling --- */
/* ==========================================================================
   Photo Gallery Hero Section (Gorgeous Version)
   ========================================================================== */

.gallery-hero {
    /* একটি আকর্ষণীয় ডার্ক গ্রাডিয়েন্ট ব্যবহার করা হয়েছে */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #DC143C 100%);
    background-size: cover;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* ব্যাকগ্রাউন্ডে একটি হালকা প্যাটার্ন ইফেক্ট (ঐচ্ছিক) */
.gallery-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.1;
    pointer-events: none;
}

.gallery-hero h1 {
    font-size: 3.5rem;
    letter-spacing: 2px;
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0;
}

/* টাইটেলের নিচের আধুনিক ডিভাইডার */
.title-divider {
    width: 80px;
    height: 4px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.gallery-hero p {
    font-size: 1.2rem;
    font-weight: 400;
    color: #f1f1f1 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 768px) {
    .gallery-hero {
        padding: 60px 0;
    }
    .gallery-hero h1 {
        font-size: 2.5rem;
    }
    .gallery-hero p {
        font-size: 1rem;
    }
}
/* ==========================================================================
   Success History Page Styles
   ========================================================================== */

.success-hero {
    /* আপনার লোগোর কালারের সাথে ম্যাচ করে ক্রিমসন গ্রাডিয়েন্ট */
    background: linear-gradient(135deg, #DC143C 0%, #a50f2d 100%);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative;
    overflow: hidden;
}

/* ব্যাকগ্রাউন্ডে হালকা প্যাটার্ন (ঐচ্ছিক) */
.success-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/white-diamond.png');
    opacity: 0.1;
}

/* প্রফেশনাল ভিডিও কার্ড */
.video-card-premium {
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #fff;
    overflow: hidden;
}

.video-card-premium:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.video-card-premium .ratio {
    border-bottom: 3px solid #f1f1f1;
}

/* মোবাইল রেসপন্সিভ এডজাস্টমেন্ট */
@media (max-width: 768px) {
    .success-hero {
        padding: 40px 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .success-hero h1 {
        font-size: 2rem;
    }
}
/* --- Admission Wizard Styles --- */
.wizard-header {
    background: linear-gradient(135deg, #0b0f19 0%, #1e3c72 100%);
}

.timer-card {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    border-bottom: 4px solid var(--crimson);
}

.form-control, .form-select {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: #fcfcfc;
}

.form-control:focus {
    box-shadow: 0 0 12px rgba(13, 110, 253, 0.1);
    border-color: #0d6efd;
}

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

/* Step transition effect */
.form-step {
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
   Digital Marketing Page Specific Styles
   ========================================================================== */

.marketing-hero-header {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); /* Teal to Light Green */
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.section-title-marketing {
    position: relative;
    padding-bottom: 10px;
}

.section-title-marketing::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #ffc107; /* Gold/Yellow color matching marketing theme */
}

/* ==========================================================================
   Basic Trade Page Specific Styles
   ========================================================================== */

.basic-hero-header {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.section-title-basic {
    position: relative;
    padding-bottom: 10px;
}

.section-title-basic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #ffc107; /* Yellow/Orange matching theme */
}
  .upload-area { border: 2px dashed #cbd5e1; border-radius: 15px; padding: 20px; cursor: pointer; transition: 0.3s; background: #f8fafc; text-align: center; }
        .upload-area:hover, .upload-area.dragover { border-color: crimson; background: #fff1f2; }
        .preview-box img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: none; margin: 10px auto; }
        .timer-card { background: white; padding: 15px; border-radius: 12px; border-bottom: 4px solid crimson; }
        .wizard-header { background: crimson; color: white; border-radius: 15px 15px 0 0; }
        .bg-crimson { background: crimson !important; }