/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --primary-color: #ff5200;
    --text-color: #1a1a1a;
    --gray-text: #666;
    --bg-light: #fff;
}

body {
    background-color: var(--bg-light);
    overflow-x: hidden;
}

/* --- FIXED HEADER STYLE --- */
#my-header {

    position: fixed !important; /* জোর করে ফিক্সড রাখা হচ্ছে */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999; /* অন্য সব কিছুর উপরে থাকবে */
    padding: 15px 5%;
    background: transparent; /* শুরুতে ব্যাকগ্রাউন্ড থাকবে না */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease; /* স্মুথ কালার চেঞ্জ */
}

/* --- STICKY STYLE (স্ক্রল করার পর) --- */
#my-header.sticky-active {
    background-color: #ffffff !important; /* সাদা ব্যাকগ্রাউন্ড */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* শ্যাডো */
    
}

/* স্টিকি অবস্থায় টেক্সট কালার কালো হবে */
#my-header.sticky-active .logo,
#my-header.sticky-active ul li a,
#my-header.sticky-active i {
    color: #222222 !important;
}

/* Header Styles */
header {
    z-index: 900000000000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: transparent;
    position: relative;
    z-index: 100;
}
.logo_image{

    height: 40px;
    width: 40px;
}
.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    color: var(--primary-color);
    font-size: 28px;
    font-style: italic;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.navbar a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
    transition: 0.3s;
}

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

.navbar i {
    font-size: 10px;
    margin-left: 3px;
}

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

.header-socials a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 14px;
    background: #f5f5f5;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.header-socials a:hover {
    background: var(--primary-color);
    color: white;
}

.menu-btn {
    background: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
}

/* Hero Section Layout */
.hero {
    display: flex;
    min-height: 90vh;
    padding: 0 5%;
    align-items: center;
    position: relative;
    overflow: hidden; /* To keep animated text inside */
    padding-top: 80px;
}

/*profile image*/
.slider-profile{
   height: 500px; 
   z-index: 3;
  
}

@media only screen and (max-width: 768px) {
    /* আপনার ইমেজের ক্লাস বা আইডি এখানে দিন */
    .hero-img img {
        width: 100% !important;  /* স্ক্রিন জুড়ে থাকবে */
        max-width: 100%;         /* স্ক্রিনের বাইরে যাবে না */
        height: auto;            /* চ্যাপ্টা হবে না */
        display: block;
        margin: 0 auto;          /* মাঝখানে থাকবে */
    }
    
    /* ইমেজের বাইরের প্যারেন্ট ডিভ */
    .hero-img-container {
        padding: 0 15px;         /* দুপাশে একটু ফাঁকা রাখবে */
        overflow: hidden;        /* বাইরে গেলে স্ক্রল বার আসবে না */
    }
}
/* Background Shape */
.bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        #f9f9f9 10px,
        #f9f9f9 20px
    );
    z-index: -1;
    opacity: 0.5;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.hero-content {
    flex: 1;
    padding-right: 50px;
    z-index: 10;
}

.hero-text .greeting {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

.hero-text h1 {
    font-size: 55px;
    line-height: 1.2;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* Typewriter Styles */
.hero-text .highlight {
    color: var(--primary-color);
    position: relative;
    white-space: nowrap;
}

.hero-text .highlight::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 40px;
    background-color: #333;
    margin-left: 5px;
    vertical-align: middle;
    animation: blink 0.7s infinite;
}

.hero-text p {
    color: var(--gray-text);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 500px;
}

.btn {
    display: inline-block;
    padding: 15px 35px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3);
    transition: transform 0.3s;
}

.btn:hover {
    transform: translateY(-3px);
}

/* --- Hero Image & Animated Background --- */
.hero-image-container {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 80vh;
}

.person-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 5; /* Image stays above text */
}

/* The Bottom Outline Text */
.bg-text-outline-stroke {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    font-weight: 900;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px #ddd;
    z-index: 1;
    width: 100%;
    text-align: center;
    opacity: 0.5;
}

/* --- ANIMATED TEXT (MARQUEE) --- */
.scroll-text-container {
    position: absolute;
    top: 45%; /* Positioned behind the head area */
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 2; /* Behind the person image */
    overflow: hidden;
    white-space: nowrap;
}

.scroll-track {
    z-index: 1;
    display: flex;
    gap: 50px;
    animation: scrollMove 15s linear infinite;
}

.scroll-track span {
    font-size: 50px;
    font-weight: 900;
    color: #7b7b7b; /* Dark color as seen in screenshot */
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Animation Keyframes */
@keyframes scrollMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Moves left continuously */
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Side Icon Bars (Pink circle icon) */
.side-bar {
    position: absolute;
    bottom: 30px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}
.msg-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
}
.scroll-icon {
    width: 50px;
    height: 50px;
    background: #000;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 992px) {
    .hero {
        flex-direction: column;
        padding-top: 50px;
    }
    .navbar { display: none; }
    .hero-content { padding-right: 0; text-align: center; margin-bottom: 50px;}
    .hero-text h1 { font-size: 40px; }
    .bg-shape { width: 100%; height: 50%; }
    .scroll-text-container { top: 40%; }
    .scroll-track span { font-size: 60px; }
    .hero-image-container { height: 50vh; width: 90%; }
}


/* --- SERVICES & STATISTICS SECTION STYLES --- */

.stats-section {
    padding: 80px 5%; /* Hero section এর সাথে সামঞ্জস্য রেখে প্যাডিং */
    background-color: #fff;
}

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

/* --- Services Grid (Top Part) --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.service-card {
    background: #fff;
    border: 1px solid #ffeef2; /* খুব হালকা পিংক বর্ডার */
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}

.service-card:hover {
    box-shadow: 0 10px 30px rgba(255, 0, 85, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.icon-box {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* আউটলাইন আইকনের জন্য স্ট্রোক ইফেক্ট (FontAwesome) */
.service-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.service-card p {
    color: var(--gray-text);
    font-size: 14px;
    font-weight: 500;
}

/* --- Experience & Stats Layout (Bottom Part) --- */
.experience-container {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

/* Left Side: Experience Box */
.experience-box {
    flex: 1; /* বাম পাশের অংশ */
    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
    padding: 50px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.exp-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.big-num {
    font-size: 100px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}

.exp-title h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.exp-desc {
    color: var(--gray-text);
    font-size: 15px;
    line-height: 1.7;
}

/* Right Side: Stats Grid */
.stats-grid {
    flex: 1.2; /* ডান পাশের অংশ একটু বড় বা সমান */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.stat-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

/* স্ক্রিনশট অনুযায়ী নিচে পিংক শ্যাডো ইফেক্ট */
.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.stat-card:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.stat-card:hover::after {
    transform: scaleX(1); /* হোভার করলে নিচে দাগ আসবে */
}

.stat-num {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 10px;
}

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

/* Responsive Design */
@media (max-width: 992px) {
    .experience-container {
        flex-direction: column;
    }
    
    .experience-box {
        padding: 30px;
        text-align: center;
    }

    .exp-header {
        flex-direction: column; /* মোবাইলে উপর-নিচে দেখাবে */
        gap: 0;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr; /* মোবাইলে এক লাইনে সব */
    }
}
/* =========================================
   SKILLS SECTION STYLES
   ========================================= */

.skills-section {
    padding: 80px 5%;
    background-color: #fff;
}

/* দুই কলামের লেআউট */
.skills-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.skill-column {
    flex: 1; /* সমান ভাগে ভাগ হবে */
}

/* হেডারের স্টাইল (লেখা + দাগ + ডট) */
.skill-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.skill-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap; /* লেখা যাতে ভেঙে না যায় */
}

/* লেখার পাশের চিকন দাগটি */
.header-line {
    flex: 1;
    height: 1px;
    background: #ff5200;
    position: relative;
    max-width: 200px; /* দাগটি কতটুকু লম্বা হবে */
}

/* দাগের শুরুতে গোল ডট */
.header-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #ff5200;
    border-radius: 50%;
}

/* প্রতিটি স্কিল আইটেম */
.skill-item {
    margin-bottom: 30px;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.skill-info span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* প্রোগ্রেস বারের পেছনের ধূসর ব্যাকগ্রাউন্ড */
.progress-bg {
    width: 100%;
    height: 7px;
    background-color: #f5f5f5; 
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* আসল প্রোগ্রেস বার (রঙিন অংশ) */
/* Progress Bar Container */

.progress-bg {
    width: 100%;
    background: #f0f0f0; /* বারের পেছনের কালার */
    height: 10px; /* উচ্চতা */
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

/* Actual Progress Bar */
.progress-bar {
    height: 100%;
    background: #ff5200; /* আপনার থিম কালার */
    width: 0; /* শুরুতে উইথ ০ থাকবে */
    border-radius: 5px;
    transition: width 1.5s ease-in-out; /* ১.৫ সেকেন্ড ধরে এনিমেশন হবে */
}

/* মোবাইল রেসপনসিভ */
@media (max-width: 768px) {
    .skills-wrapper {
        flex-direction: column; /* মোবাইলে উপর-নিচে দেখাবে */
        gap: 50px;
    }
}

/* =========================================
   LATEST SERVICE SECTION STYLES
   ========================================= */

.latest-service-section {
    padding: 20px 5%;
    background-color: #fff;
}

/* Centered Title Styles */
.section-title-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.sub-title {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.section-title-center h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.2;
}

.title-desc {
    color: var(--gray-text);
    font-size: 15px;
    line-height: 1.6;
}

/* Content Wrapper (Two Columns) */
.service-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* --- Left Side: List Items --- */
.service-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-list-item {
    background: #f8f9fa; /* Light Gray Background */
    padding: 30px;
    border-radius: 15px;
    cursor: pointer;
    border: 1px solid transparent; /* Invisible border initially */
    transition: all 0.3s ease;
}

.service-list-item h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
}

.service-list-item p {
    font-size: 14px;
    color: var(--gray-text);
    line-height: 1.6;
}

/* Active State Design (Matches Screenshot) */
.service-list-item.active, 
.service-list-item:hover {
    background: #fff;
    border-color: var(--primary-color); /* Pink Border */
    box-shadow: 0 10px 30px rgba(255, 0, 85, 0.1); /* Soft Pink Shadow */
    transform: translateX(10px); /* Slightly moves right */
}

/* --- Right Side: Image & Shapes --- */
.service-image-area {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px; /* Adjust based on image */
}

.main-service-img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 5;
    /* Image clipped to circle/blob shape if needed, 
       but screenshot shows cutout man. 
       Using rounded bottom for style */
    border-radius: 0 0 200px 200px; 
}

/* Abstract Shapes (CSS Generated) */
.shape {
    position: absolute;
    z-index: 1;
}

/* Big Gray Circle Background */
.gray-circle {
    width: 400px;
    height: 400px;
    background-color: #f2f2f2;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Pink Solid Dot (Top Left) */
.pink-dot-fill {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 50%;
    top: 20%;
    left: 15%;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
}

/* Pink Outline Circle (Right) */
.pink-dot-outline {
    width: 30px;
    height: 30px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    top: 30%;
    right: 15%;
}

/* Pink Semicircle (Bottom Right) */
.pink-semicircle {
    width: 80px;
    height: 40px; /* Half of width */
    background-color: var(--primary-color);
    border-radius: 0 0 100px 100px; /* Create Semicircle */
    bottom: 25%;
    right: 5%;
    transform: rotate(-30deg);
}

/* Pink Outline Circle Large (Bottom Left) */
.pink-outline-circle-large {
    width: 80px;
    height: 80px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    bottom: 15%;
    left: 10%;
}

/* Responsive Design */
@media (max-width: 992px) {
    .service-content-wrapper {
        flex-direction: column-reverse; /* Image on top in mobile usually looks better, or remove reverse for bottom */
        gap: 60px;
    }
    
    .section-title-center h2 {
        font-size: 30px;
    }
    
    .service-image-area {
        height: auto;
        margin-bottom: 30px;
    }
    
    .gray-circle {
        width: 300px;
        height: 300px;
    }
}
/* =========================================
   EDUCATION SECTION STYLES
   ========================================= */

.education-section {
    padding: 100px 5%;
    background-color: #fff;
}

/* Sub-heading Style (Education with Line) */
.edu-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.edu-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
}

.edu-line {
    width: 100px; /* Length of the line */
    height: 1px;
    background: #e0e0e0;
    position: relative;
}

/* The small dot at the start of the line */
.edu-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 50%;
}

/* Grid Layout for Cards */
.education-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 30px;
}

/* Card Styles */
.edu-card {
    background: #f8f9fa; /* Light grey background */
    padding: 40px;
    border-radius: 20px;
    border-bottom: 3px solid var(--primary-color); /* Pink line at bottom */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.edu-card:hover {
    transform: translateY(-5px); /* Lift up effect */
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.edu-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.edu-year {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
}

.edu-card p {
    color: var(--gray-text);
    font-size: 15px;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .education-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    .section-title-center h2 {
        font-size: 32px; /* Smaller title on mobile */
    }
}
```css
/* =========================================
   EXPERIENCE SECTION STYLES
   ========================================= */
/* =========================================
   RESPONSIVE EXPERIENCE SECTION
   ========================================= */
@media (max-width: 991px) {
    
    /* ১. মেইন র‍্যাপারকে কলাম করা (উপরে-নিচে) */
    .experience-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    /* ২. বাম পাশ এবং ডান পাশের উইথ ১০০% করা */
    .experience-content, 
    .experience-image {
        width: 100%;
        padding-right: 0; /* ডান পাশের গ্যাপ রিমুভ */
    }

    /* ৩. ইমেজ সেকশন */
    .experience-image {
        margin-top: 30px;
        text-align: center; /* ইমেজ মাঝখানে থাকবে */
    }
    .experience-image img {
        width: 100%;
        max-width: 400px; /* খুব বেশি বড় না হয় */
    }

    /* ৪. এক্সপেরিয়েন্স কার্ড ফিক্স */
    .experience-item {
        padding: 25px 20px; /* প্যাডিং কমানো */
        margin-bottom: 20px;
    }

    /* ৫. ট্যাগ (JOB / EXPERIENCE) ফিক্স */
    .exp-tag {
        font-size: 12px; /* ফন্ট ছোট করা */
        padding: 5px 10px;
        top: 20px; /* পজিশন ঠিক করা */
        right: 20px;
    }

    /* ৬. কার্ডের ভেতরের লেখা */
    .experience-item h4 {
        font-size: 18px; /* টাইটেল ছোট করা */
        margin-right: 60px; /* ট্যাগের সাথে লেগে না যায় */
    }
    
    .experience-item p {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* খুব ছোট মোবাইল (Galaxy Fold বা পুরানো ফোন) */
@media (max-width: 480px) {
    .exp-tag {
        position: relative; /* ফিক্সড না রেখে নরমাল করা */
        display: inline-block;
        margin-bottom: 10px;
        top: 0;
        right: 0;
    }
    .experience-item h4 {
        margin-right: 0;
    }
}
.experience-section {
    padding: 100px 5%;
    background-color: #fff;
}

.experience-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Left Column Styling --- */
.experience-content {
    flex: 1;
}

/* Header Style (Matching previous Education Header) */
.exp-header-style {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
}

.exp-header-style h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
}

.exp-line {
    width: 80px;
    height: 1px;
    background: #ff5200;
    position: relative;
}

.exp-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #ff5200;
    border-radius: 50%;
}

/* Individual Experience Item */
.experience-item {
    margin-bottom: 40px;
}

.experience-item:last-child {
    margin-bottom: 0;
}

.exp-tag {
    display: inline-block;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.experience-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 5px;
}

.exp-role {
    display: block;
    font-size: 16px;
    color: #444; /* Dark gray for role */
    font-weight: 500;
    margin-bottom: 15px;
}

.experience-item p {
    color: var(--gray-text);
    line-height: 1.7;
    font-size: 15px;
    max-width: 90%;
}

/* --- Right Column Styling (Image) --- */
.experience-image {
    flex: 1;
    position: relative;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
}

.experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ছবি যাতে কেটে না যায় এবং বক্স পূর্ণ করে */
    border-radius: 20px;
    transition: transform 0.5s ease;
}

/* Hover Effect on Image */
.experience-image:hover img {
    transform: scale(1.05); /* মাউস নিলে ছবি একটু জুম হবে */
}

/* Responsive Design */
@media (max-width: 992px) {
    .experience-wrapper {
        flex-direction: column; /* মোবাইলে ছবি নিচে চলে যাবে */
        gap: 40px;
    }
    
    .experience-image {
        width: 100%;
        height: 300px; /* মোবাইলে ছবির হাইট কমানো */
    }
    
    .experience-item p {
        max-width: 100%;
    }
}
/* =========================================
   BLOG SECTION STYLES
   ========================================= */

.blog-section {
    padding: 100px 5%;
    background-color: #fff; /* White background usually, or light gray if needed */
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* Blog Card Styling */
.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

.blog-card:hover {
    transform: translateY(-10px); /* Lift up effect */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Image Area */
.blog-img-box {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.blog-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-box img {
    transform: scale(1.1); /* Zoom effect on hover */
}

/* Meta Tag (User & Date overlay) */
.blog-meta {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    padding: 8px 15px;
    border-radius: 50px;
    display: flex;
    gap: 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-meta i {
    color: var(--primary-color);
    margin-right: 5px;
}

/* Content Area */
.blog-content {
    padding: 30px;
}

.blog-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 20px;
}

.read-more {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

.read-more:hover {
    color: var(--primary-color);
    gap: 10px; /* Arrow moves slightly */
}

/* Responsive */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   CONTACT SECTION STYLES
   ========================================= */

.contact-section {
   padding: 50px 5% 100px 5%; 
    
    background-color: #fff;
    margin-bottom: 50px;
}

/* Main Grey Card Wrapper */
.contact-wrapper {
    background-color: #ffffff; /* হালকা ধূসর ব্যাকগ্রাউন্ড যেমন ছবিতে আছে */
    padding: 80px 60px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* লম্বালম্বি মাঝখানে */
    gap: 60px;
    position: relative;
    /* ডানদিকে এবং নিচে পিংক বর্ডার ইফেক্ট */
    border-right: 3px solid var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}

/* Left Side Text */
.contact-text {
    flex: 0.8; /* বাম পাশের টেক্সট এরিয়া একটু ছোট */
}

.contact-text .sub-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 15px;
    display: block;
    letter-spacing: 1px;
}

.contact-text h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.2;
}

.contact-text p {
    color: var(--gray-text);
    font-size: 15px;
    line-height: 1.7;
}

/* Right Side Form */
.contact-form {
    flex: 1.2; /* ফর্ম এরিয়া একটু বড় */
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* দুই কলাম */
    gap: 20px;
    margin-bottom: 20px;
}

/* Input & Textarea Styles */
input, textarea {
    width: 100%;
    padding: 18px 20px;
    background-color: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-color);
    outline: none;
    transition: 0.3s;
    font-family: 'Poppins', sans-serif;
}

/* Input Focus Color */
input:focus, textarea:focus {
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Placeholder color adjustments to match generic look */
::placeholder {
    color: #999;
}

textarea {
    resize: none; /* ইউজার যাতে সাইজ নষ্ট না করতে পারে */
    margin-bottom: 30px;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    padding: 18px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-submit:hover {
    background-color: #d40045; /* Darker pink on hover */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 0, 85, 0.3);
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
        padding: 40px;
    }
    
    .contact-text {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .form-row {
        grid-template-columns: 1fr; /* মোবাইলে এক কলাম */
    }
}

/* =========================================
   FOOTER SECTION STYLES
   ========================================= */

/* ১. ব্রাউজারের ডিফল্ট মার্জিন রিমুভ করার জন্য (যদি আগে না থাকে) */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* হরাইজন্টাল স্ক্রল বন্ধ করতে */
}

.footer-section {
    background-color: #f9f9f9;
    width: 100%; /* ২. এটি ফুল উইথ নিশ্চিত করবে */
    padding: 80px 0 40px 0; /* ডানে-বামে প্যাডিং সরিয়ে দেওয়া হলো, যাতে কন্টেন্ট মাঝখানে আনা যায় */
}

.footer-content {
    /* ৩. কন্টেন্ট মাঝখানে রাখার জন্য ম্যাক্সিমাম উইথ এবং মার্জিন অটো */
    max-width: 1200px; /* আপনার ওয়েবসাইটের কন্টেইনার সাইজ অনুযায়ী এটি বাড়াতে বা কমাতে পারেন */
    margin: 0 auto;    /* মাঝখানে আনার জন্য */
    padding: 0 15px;   /* মোবাইলে যাতে একদম লেগে না যায় */
    
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

/* --- Column 1: Brand & Newsletter --- */
.footer-logo {
    margin-bottom: 25px;
}

.footer-headline {
    font-size: 32px;
    color: var(--text-color);
    line-height: 1.3;
    margin-bottom: 30px;
}

.footer-headline strong {
    font-weight: 800;
}

.footer-headline .light-text {
    font-weight: 300;
    color: var(--text-color);
}

/* Newsletter Input Style */
.newsletter-form {
    position: relative;
    max-width: 300px;
    border-bottom: 1px solid #ddd;
}

.newsletter-form input {
    width: 100%;
    border: none;
    padding: 10px 0;
    background: transparent;
    font-size: 14px;
    color: var(--gray-text);
}

.newsletter-form input:focus {
    box-shadow: none;
    border: none;
    outline: none;
}

.newsletter-form button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-color);
}

/* --- Column 2: Quick Links --- */
.footer-col h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-color);
}

.links-col ul {
    list-style: none;
    padding: 0; /* ডিফল্ট প্যাডিং রিমুভ */
}

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

.links-col ul li a {
    text-decoration: none;
    color: var(--gray-text);
    font-size: 15px;
    transition: 0.3s;
}

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

/* --- Column 3: Contact Info --- */
.contact-list {
    list-style: none;
    padding: 0; /* ডিফল্ট প্যাডিং রিমুভ */
    margin-bottom: 25px;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: var(--gray-text);
    font-size: 14px;
}

.icon-circle {
    width: 30px;
    display: flex;
    justify-content: center;
    color: var(--text-color);
    font-size: 16px;
}

/* Footer Social Icons */
.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 35px;
    height: 35px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--text-color);
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

.footer-socials a:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Bottom Line */
.footer-bottom-line {
    border-top: 1px solid #e0e0e0;
    margin-top: 40px;
    max-width: 1200px; /* লাইনটিকেও মাঝখানের কন্টেইনারের সমান রাখা */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================
   TEAM SECTION STYLES
   ========================================= */

.team-section {
    padding: 100px 5%;
    background-color: #fff;
   padding-top: 40px;
}

.team-grid {
    display: grid;
    /* এখানে '4' মানে এক লাইনে ৪টা কার্ড থাকবে */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    margin-top: 50px;
}

/* Card Styling */
.team-card {
    background: #fff;
    border-radius: 20px; /* আপনার সাইটের রাউন্ডেড থিমের সাথে মিল রেখে */
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0; /* খুব হালকা বর্ডার */
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* Image Area */
.team-img-box {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.team-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .team-img-box img {
    transform: scale(1.1); /* হোভার করলে ছবি জুম হবে */
}

/* Social Icons Animation (Floating Up Effect) */
.team-socials-overlay {
    position: absolute;
    bottom: -60px; /* শুরুতে নিচে লুকিয়ে থাকবে */
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9); /* হালকা সাদা ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড */
    padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    transition: bottom 0.4s ease-in-out;
}

/* হোভার করলে আইকনগুলো উপরে উঠে আসবে */
.team-card:hover .team-socials-overlay {
    bottom: 0;
}

.team-socials-overlay a {
    width: 35px;
    height: 35px;
    background: var(--primary-color); /* আপনার থিমের পিংক কালার */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.team-socials-overlay a:hover {
    background: #1a1a1a; /* হোভার করলে কালো হবে */
    transform: rotate(360deg); /* আইকন ঘুরবে */
}

/* Member Info */
.team-info {
    padding: 25px 15px;
}

.team-info h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 5px;
}

.team-role {
    font-size: 14px;
    color: var(--primary-color); /* রোলটি পিংক কালারের হবে */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* --- STATS GRID & CARD (STRICT FIX) --- */

.stats-grid {
    display: grid;
    /* কার্ডগুলো ফিক্সড সাইজ রাখার জন্য */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 25px;
    margin-top: 30px;
}

.stat-card {
    background: #f8f9fa;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: 0.3s;
    height: 100%; /* হাইট সমান রাখার জন্য */
}

/* ইমেজের বক্স (গোল ডিজাইন - STRICT) */
.stat-img-box {
    width: 100px !important;       /* ফিক্সড চওড়া */
    height: 100px !important;      /* ফিক্সড উচ্চতা */
    margin: 0 auto 20px auto !important; /* মাঝখানে */
    
    border-radius: 50% !important; /* গোল */
    overflow: hidden !important;   /* বাড়তি অংশ কাটা */
    
    background: #f5f5f5;
    border: 3px solid #ffffff;     /* সাদা বর্ডার */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* শ্যাডো */
    
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* ইমেজের সাইজ কন্ট্রোল (STRICT) */
.stat-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ইমেজ সুন্দরভাবে ফিট হবে */
    display: block !important;
    border-radius: 50% !important;
}

/* নাম্বার স্টাইল */
.stat-num {
    font-size: 36px;
    font-weight: 800;
    color: #222;
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 16px;
    color: #666;
    margin: 0;
}
/* --- STATS LAYOUT FIX (2x2 GRID & TOP ALIGN) --- */

/* ১. মেইন র‍্যাপার (বাম ও ডান পাশ সমান লেভেলে রাখার জন্য) */
.stats-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    /* এই লাইনটি ওপরের লেভেল সমান রাখবে */
    align-items: flex-start !important; 
    padding: 60px 0;
}

/* ২. গ্রিড এরিয়া (২ কলাম ফিক্সড) */
.stats-grid {
    flex: 2;
    display: grid;
    /* এখানে repeat(2, 1fr) মানেই হলো পাশাপাশি ২টা করে বসবে */
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 30px;
    /* ওপরের বাড়তি জায়গা বা মার্জিন সরিয়ে দেওয়া হলো */
    margin-top: 0 !important; 
}

/* মোবাইল রেসপনসিভ (মোবাইলে ১টা করে দেখাবে) */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* --- EDUCATION SECTION (Animated Bottom Border) --- */

/* ১. গ্রিড লেআউট (এক লাইনে ২টি) */
.education-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ডেস্কটপে ২টি */
    gap: 30px;
    margin-top: 40px;
}

/* ২. কার্ড ডিজাইন */
.edu-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    /* একটি হালকা বর্ডার চারপাশে থাকবে */
    border: 1px solid #f0f0f0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* ইমেজ ও লেখা পাশাপাশি রাখার জন্য */
    display: flex; 
    align-items: flex-start; 
    gap: 20px;
    
    /* অ্যানিমেশনের জন্য জরুরি */
    position: relative;
    overflow: hidden; /* বর্ডার যেন বাইরে না যায় */
    transition: all 0.4s ease;
}

/* --- সুন্দর নিচের বর্ডার এনিমেশন (নতুন যুক্ত করা হয়েছে) --- */
.edu-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%; /* শুরুতে বর্ডার দেখা যাবে না */
    height: 4px; /* বর্ডারের পুরুত্ব */
    background: #ff5200; /* আপনার থিম কালার (লাল/গোলাপি) */
    transition: all 0.4s ease-in-out; /* স্মুথ এনিমেশন */
}

/* হোভার ইফেক্ট */
.edu-card:hover {
    transform: translateY(-7px); /* কার্ড একটু উপরে উঠবে */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* শ্যাডো বাড়বে */
    border-color: transparent; /* হোভারে চারপাশের বর্ডার মুছে যাবে */
}

/* হোভার করলে নিচের বর্ডারটি পুরোটা জুড়ে আসবে */
.edu-card:hover::after {
    width: 100%;
}


/* ৩. ইমেজের বক্স (বামে) */
.edu-img-box {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #f8f8f8;
    border-radius: 10px;
    overflow: hidden;
}
.edu-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ৪. ডান পাশের কন্টেন্ট */
.edu-content { flex-grow: 1; }

.edu-content h4 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.edu-year {
    display: block;
    font-size: 14px;
    color: #ff0055;
    font-weight: 600;
    margin-bottom: 10px;
}

.edu-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ৫. মোবাইল রেসপনসিভ */
@media (max-width: 768px) {
    .education-grid {
        grid-template-columns: 1fr; /* মোবাইলে ১টি করে */
    }
}

/* --- SOCIAL SECTION STYLES --- */

.social-section {
    /*padding: 80px 0;/*
    /*background: #f9f9f9; /* হালকা ব্যাকগ্রাউন্ড */
    overflow: hidden;    /* স্ক্রিনের বাইরে গেলে হাইড করবে */
}

/* ১. স্লাইডার এরিয়া */
.social-slider {
    margin-top: 50px;
    width: 100%;
    padding: 20px 10px; /* উপরে-নিচে ২০ পিক্সেল জায়গা রাখা হলো */
    position: relative;
    overflow: hidden;
}

/* ২. ট্র্যাক (যেটি নড়াচড়া করবে) */
.slider-track {
    display: flex;
    gap: 30px; /* কার্ডের মাঝখানের গ্যাপ */
    width: max-content; /* কন্টেন্ট অনুযায়ী লম্বা হবে */
    
    /* বাম দিকে চলার অ্যানিমেশন (20s = স্পিড) */
    animation: scrollLeft 20s linear infinite;
}

/* মাউস নিলে স্লাইড থামবে */
.slider-track:hover {
    animation-play-state: paused;
}

/* ৩. কার্ড ডিজাইন */
.social-card {
    background: #ffffff;
    width: 250px;       /* কার্ডের ফিক্সড সাইজ */
    padding: 30px 20px;
    border-radius: 15px;
    border: 1px solid #eee;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    
    /* লিংক স্টাইল ফিক্স */
    display: block;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0; /* কার্ড চ্যাপ্টা হবে না */
}

/* কার্ড হোভার ইফেক্ট */
.social-card:hover {
    transform: translateY(-10px);
    border-color: #ff5200;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* আইকন ডিজাইন */
.soc-icon {
    font-size: 40px;
    color: #ff5200;
    margin-bottom: 15px;
}

/* টেক্সট ডিজাইন */
.social-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.social-card p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* ৪. অ্যানিমেশন (ডান থেকে বামে) */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
    /* -50% কারণ আমরা ডাটা ডাবল করেছি */
}

/* মোবাইল রেসপনসিভ */
@media (max-width: 768px) {
    .social-card {
        width: 200px;
        padding: 20px;
    }
    .slider-track {
        gap: 15px;
    }
}
/* --- SOCIAL SECTION TITLE CENTERED --- */

/* ১. টাইটেল মাঝখানে আনার জন্য */
.social-section .section-title {
    text-align: center;   /* টেক্সট মাঝখানে থাকবে */
    margin-bottom: 50px;  /* টাইটেল এবং স্লাইডারের মাঝে গ্যাপ */
    max-width: 700px;     /* টাইটেলের এরিয়া ফিক্স করা */
    margin-left: auto;    /* অটো মার্জিন দিয়ে ব্লক মাঝখানে আনা */
    margin-right: auto;
}

/* ২. সাব-টাইটেল ডিজাইন (কমলা রঙের ছোট লেখাটি) */
.social-section .sub-title {
    color: #ff5200;       /* আপনার থিম কালার */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;       /* নতুন লাইনে দেখাবে */
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* ৩. মেইন টাইটেল ডিজাইন (বড় লেখাটি) */
.social-section h2 {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    margin: 0;
}

 .home-blog-section { padding: 80px 0; background-color: #f9f9f9; }
        .section-title { text-align: center; margin-bottom: 50px; }
        .section-title h2 { font-size: 2.5rem; color: #1f1f1f; font-weight: 700; margin-bottom: 10px; }
        .section-title p { color: #6c757d; }
        
        .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        
        .blog-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s; border: 1px solid #eee; display: flex; flex-direction: column; }
        .blog-card:hover { transform: translateY(-5px); }
        
        .blog-thumb { height: 200px; overflow: hidden; }
        .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
        .blog-card:hover .blog-thumb img { transform: scale(1.1); }
        
        .blog-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
        .blog-date { font-size: 0.85rem; color: #ff4a17; margin-bottom: 10px; display: block; }
        .blog-title { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.4; }
        .blog-title a { color: #1f1f1f; text-decoration: none; transition: 0.3s; }
        .blog-title a:hover { color: #ff4a17; }
        .blog-desc { font-size: 0.9rem; color: #666; margin-bottom: 20px; line-height: 1.6; }
        
        .read-more { margin-top: auto; color: #ff4a17; font-weight: 600; text-decoration: none; font-size: 0.9rem; }
        .read-more:hover { text-decoration: underline; }

        .view-all-btn-container { text-align: center; margin-top: 40px; }
        .view-all-btn { display: inline-block; padding: 12px 30px; background: #ff4a17; color: #fff; text-decoration: none; border-radius: 30px; font-weight: 600; transition: 0.3s; }
        .view-all-btn:hover { background: #e03e10; transform: translateY(-2px); }

               /* ================= LIGHT THEME STYLES ================= */
        body { 
            background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
            color: #444444;            /* কালো টেক্সট */
            font-family: 'Poppins', sans-serif; 
        }
        
        /* হেডার এরিয়া (হেডার আগের মতোই ডার্ক থাকবে সুন্দর কন্ট্রাস্টের জন্য) */
        header { background-color: #1e1e2d; color: #fff; }
        .navbar ul li a { color: #f9f9f900  !important; } /* মেনু কালার ফিক্স */

        /* লেআউট স্পেসিং */
        .blog-details-wrapper { padding-top: 120px; padding-bottom: 80px; min-height: 80vh; background: #fff; }
        
        /* গ্রিড সিস্টেম */
        .row { display: flex; flex-wrap: wrap; gap: 40px; }
        .col-left { flex: 2; min-width: 300px; } 
        .col-right { flex: 1; min-width: 300px; } 

        /* --- বাম পাশ: মেইন পোস্ট --- */
        .details-img-box img {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: cover;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* হালকা শ্যাডো */
        }

        .meta-info {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #666; /* হালকা কালো */
        }
        .meta-info span i { color: #ff5200; margin-right: 5px; }

        .main-title {
            font-size: 32px;
            font-weight: 700;
            color: #222; /* ডিপ কালো */
            margin-bottom: 25px;
            line-height: 1.4;
        }

        .full-description {
            font-size: 16px;
            line-height: 1.8;
            color: #555; /* পড়ার সুবিধার জন্য গ্রে */
            text-align: justify;
        }

        /* ব্যাক বাটন */
        .btn-back { 
            color: #ff0055; 
            text-decoration: none; 
            font-weight: 600; 
            font-size: 16px; 
            display: inline-flex; 
            align-items: center; 
            gap: 8px;
            margin-bottom: 20px;
        }
        .btn-back:hover { text-decoration: underline; color: #333; }

        /* --- ডান পাশ: সাইডবার উইজেট (লাইট থিম) --- */
        .sidebar-widget {
            background: #ffffff;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            /* স্ক্রিনশটের মত শ্যাডো ইফেক্ট */
            box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
            border: 1px solid #f0f0f0;
        }

        /* সার্চ বক্স */
        .search-box { display: flex; position: relative; }
        .search-box input {
            width: 100%;
            padding: 15px;
            padding-right: 60px;
            border-radius: 10px;
            border: 1px solid #eee;
            background: #f9f9f9; /* ইনপুট ফিল্ড হালকা গ্রে */
            color: #333;
            outline: none;
        }
        .search-box button {
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            width: 50px;
            background: #ff5200;
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        /* উইজেট টাইটেল */
        .widget-title {
            color: #222;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .widget-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 50px;
            height: 2px;
            background: #ff5200;
        }

        /* ক্যাটাগরি লিস্ট */
        .cat-list li {
            list-style: none;
            border-bottom: 1px solid #f0f0f0;
            padding: 12px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: 0.3s;
        }
        .cat-list li:last-child { border-bottom: none; }
        .cat-list li a { color: #555; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: 0.3s; font-weight: 500; }
        .cat-list li a:hover { color: #ff0055; padding-left: 5px; }
        .cat-list li span { color: #999; font-size: 13px; }

        /* রিসেন্ট পোস্ট */
        .recent-post-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #f9f9f9;
            padding-bottom: 15px;
        }
        .recent-post-item:last-child { border-bottom: none; padding-bottom: 0; }
        
        .recent-post-item img {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 10px;
        }
        .recent-post-info h4 {
            font-size: 15px;
            margin: 0 0 5px;
            line-height: 1.4;
        }
        .recent-post-info h4 a { color: #333; text-decoration: none; transition: 0.3s; font-weight: 600; }
        .recent-post-info h4 a:hover { color: #ff0055; }
        .recent-post-info span { font-size: 12px; color: #888; }
        
        /* ফুটার */
        .footer-section { background-color: #f9f9f9; color: #fff; } /* ফুটার ডার্ক থাকবে */
        
        /* রেসপনসিভ */
        @media (max-width: 991px) {
            .row { flex-direction: column; }
        }

/* =========================================
       UNIFIED HEADER STYLE (SAME FOR ALL DEVICES)
       ========================================= */
    
    /* ১. হেডার সবসময় উপরে ফিক্সড থাকবে এবং দেখা যাবে */
    header#my-header {
        position: sticky; /* অথবা fixed দিতে পারেন */
        top: 0;
        left: 0;
        width: 100%;
        background: #ffffff00; /* ব্যাকগ্রাউন্ড কালার */
        z-index: 9999;
        
        padding: 10px 0;
        
        /* সব কিছু ফ্লেক্সবক্সে সাজানো */
        display: flex;
        flex-wrap: wrap; /* জায়গা না হলে নিচে নামবে */
        justify-content: space-between;
        align-items: center;
    }

    /* ২. হ্যামবার্গার মেনু বাটন সবসময় লুকানো থাকবে */
    .menu-btn {
        display: none !important;
    }

    /* ৩. মেনু বার ডিজাইন (সব ডিভাইসে এক রকম) */
    .navbar {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
    }

    .navbar ul {
        display: flex !important;
        flex-direction: row; /* পাশাপাশি */
        flex-wrap: wrap; /* মোবাইল স্ক্রিনে জায়গা না হলে অটোমেটিক নিচে সাজবে */
        justify-content: center;
        gap: 15px; /* মেনু আইটেমগুলোর মাঝখানে গ্যাপ */
        padding: 0;
        margin: 0;
    }

    .navbar ul li {
        margin: 0;
        list-style: none;
    }

    .navbar ul li a {
        text-decoration: none;
        color: #333;
        font-weight: 600;
        font-size: 14px;
        padding: 5px 10px;
        display: block;
    }

    /* ৪. লোগো এবং সোশ্যাল আইকন ফিক্স */
    .logo {
        padding-left: 60px; /* বামে একটু জায়গা */
    }
    .header-socials {
        padding-right: 15px; /* ডানে একটু জায়গা */
        display: flex;
        gap: 10px;
    }

    /* ৫. মোবাইল স্পেশাল ফিক্স (যাতে লেখাগুলো ভেঙে না যায়) */
    @media (max-width: 768px) {
        header#my-header {
            flex-direction: column; /* মোবাইলে লোগো উপরে, মেনু নিচে */
            gap: 10px;
        }
        
        .logo, .header-socials {
            padding: 0;
            justify-content: center;
        }
        
        .navbar ul {
            justify-content: center;
            gap: 10px;
        }
        
        .navbar ul li a {
            font-size: 13px; /* মোবাইলে ফন্ট একটু ছোট */
            padding: 5px;
        }
    }/* মোবাইল বা ছোট স্ক্রিনের জন্য প্যাডিং ফিক্স */
/* =========================================
   BLOG DETAILS PADDING FIX (FORCE !IMPORTANT)
   ========================================= */

@media (max-width: 768px) {
    
    /* ১. মেইন কন্টেইনারে দুই পাশে জোর করে প্যাডিং দেওয়া */
    .blog-details-section .container,
    .blog-details-wrapper .container,
    .section .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* সাইড স্ক্রল বন্ধ করবে */
    }

    /* ২. যদি কন্টেইনারে কাজ না করে, তবে সরাসরি প্যারাগ্রাফ বা টেক্সটে প্যাডিং */
    .post-content, 
    .main-post-content,
    .blog-desc {
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: justify !important; /* লেখাগুলো দুই পাশে সমান রাখার জন্য */
    }

    /* ৩. ছবি যেন স্ক্রিনের বাইরে না যায় */
    .blog-details-section img,
    .post-content img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}