:root {
    --primary-color: #7b4397;      /* লোগো পার্পল */
    --secondary-color: #29b6cc;    /* লোগো সায়ান */
    --accent-color: #d12e8d;       /* লোগো ম্যাজেন্টা */
    --heading-color: #4d4d4d;      /* লোগো টেক্সট গ্রে */
    --text-color: #555555;    /* স্ট্যান্ডার্ড টেক্সট */
    --bg-light: #fdfdfd;           /* ক্লিন ব্যাকগ্রাউন্ড */
    --white:#fff;
}

h1, h2, h3, h4 {
    color: var(--heading-color);
    font-weight: 700;
}

p {
    color: var(--text-color);
}

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Manrope", sans-serif;
            background: #f5f5f5;
            color: var(--ink);
        }

        a {
            text-decoration: none;
        }

        .topbar {
            background: var(--primary-color);
            /*border-bottom: 1px solid var(--line);*/
        }

        .topbar-wrap {
            min-height: 48px;
            gap: 1rem;
            flex-wrap: nowrap;
        }

        .top-contact,
        .top-social,
        .footer-social {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            flex-wrap: nowrap;
        }

        .top-contact a,
        .top-social a,
        .footer-social a,
        .footer-links a,
        .copyright-links a {
            color:var(--white);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .top-contact a:hover,
        .top-social a:hover,
        .footer-social a:hover,
        .footer-links a:hover,
        .copyright-links a:hover {
            color: var(--white);
            transform: translateY(-1px);
        }

        .top-social a,
        .footer-social a {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 50%;
        }

        .site-header {
            background:#fff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .site-header .container {
            min-height: 88px;
        }

        .header-shell {
            position: relative;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 1.5rem;
        }

        .brand img {
            display: block;
            max-width: 100%;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 0.95rem;
            color: var(--white);
        }

        .brand-icon,
        .footer-logo-icon {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent), #f25d6a);
            color: var(--white);
            font-size: 1.25rem;
            box-shadow: 0 16px 30px rgba(207, 32, 47, 0.22);
        }

        .brand-text small,
        .footer-logo-text small {
            display: block;
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #6b7c8e;
            margin-bottom: 2px;
        }

        .brand-text strong,
        .footer-logo-text strong {
            font-size: 1.35rem;
            color: var(--white);
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 1.7rem;
            justify-self: center;
        }

        .desktop-nav a,
        .submenu-toggle {
            color:#000;
            font-weight: 700;
            font-size: 0.96rem;
            text-transform: uppercase;
        }

        .nav-item {
            position: relative;
        }

        .submenu-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            background: transparent;
            border: none;
            padding: 0;
        }

        .submenu-toggle i {
            font-size: 0.75rem;
            transition: transform 0.2s ease;
        }

        .nav-submenu {
            position: absolute;
            top: calc(100% + 18px);
            left: 0;
            min-width: 220px;
            padding: 0.8rem;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: #171717;
            box-shadow: 0 22px 40px rgba(0, 0, 0, 0.28);
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
            z-index: 15;
        }

        .nav-submenu a {
            padding: 0.7rem 0.8rem;
            border-radius: 12px;
            font-size: 0.92rem;
        }

        .nav-submenu a:hover {
            background: rgba(207, 32, 47, 0.16);
        }

        .has-submenu.is-open .nav-submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .has-submenu.is-open .submenu-toggle i {
            transform: rotate(180deg);
        }

        .desktop-nav a:hover,
        .submenu-toggle:hover {
            color:#D12E8D;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            justify-self: end;
        }

       .donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1.4rem;
    border-radius: 0px;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* box-shadow: 0 14px 24px rgba(207, 32, 47, 0.28); */
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

        .donate-btn:hover {
    transform: translateY(-1px);
    color: var(--white);
    /*box-shadow: 0 18px 28px rgba(207, 32, 47, 0.34);*/
    background:var(--secondary-color);
}

        .topbar-donate {
            display: none;
            min-height: 40px;
            padding: 0 1.1rem;
            font-size: 0.9rem;
            box-shadow: none;
            margin-left: auto;
        }

        .search-widget {
            position: relative;
        }

        .search-toggle,
        .search-form button {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 50%;
            background:var(--primary-color);
            color: var(--white);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .search-toggle:hover,
        .search-form button:hover {
            background: var(--secondary-color);
        }

        .search-form {
            position: absolute;
            top: calc(100% + 14px);
            right: 0;
            width: 320px;
            padding: 0.8rem;
            border-radius: 18px;
            background: #171717;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 22px 40px rgba(0, 0, 0, 0.28);
            display: flex;
            align-items: center;
            gap: 0.55rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
            z-index: 18;
        }

        .search-widget.is-active .search-form {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .search-form input {
            width: 100%;
            min-width: 0;
            height: 48px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            background: #ffffff;
            color: #1d1d1d;
            padding: 0 1rem;
            outline: none;
        }

        .search-form input::placeholder {
            color: #7a7a7a;
        }

        .menu-toggle {
            width: 52px;
            height: 52px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            background: var(--navy-soft);
            color: var(--white);
            font-size: 1.2rem;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: none;
        }

        .menu-toggle:hover,
        .menu-toggle:focus {
            background: var(--accent);
            color: var(--white);
        }

        .offcanvas {
            background: var(--navy);
            color: var(--white);
        }

        .offcanvas-header {
            border-bottom: 1px solid var(--line);
        }

        .offcanvas .btn-close {
            filter: invert(1);
            opacity: 1;
        }

        .mobile-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
        }

        .mobile-brand strong {
            color: var(--white);
            font-size: 1.2rem;
        }

        .mobile-menu {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-top: 1rem;
        }

        .mobile-menu > a,
        .mobile-submenu-title,
        .mobile-submenu-links a {
            color: rgba(255, 255, 255, 0.88);
            font-size: 1rem;
            font-weight: 700;
            padding-bottom: 0.85rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        .mobile-submenu-links {
            display: none;
            flex-direction: column;
            gap: 0.8rem;
            padding-left: 1rem;
            padding-top: 0.35rem;
        }

        .mobile-submenu-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            border-top: none;
            border-left: none;
            border-right: none;
            text-align: left;
        }

        .mobile-submenu-title::after {
            content: "\f107";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.8rem;
            transition: transform 0.2s ease;
        }

        .mobile-submenu-group.is-open .mobile-submenu-links {
            display: flex;
        }

        .mobile-submenu-group.is-open .mobile-submenu-title::after {
            transform: rotate(180deg);
        }

       .carousel-item img{
        height:800px;
        width:100%;
        object-fit: cover;
       }

        .section-space {
            padding: 50px 0;
        }

        .about-highlight {
            background:
                radial-gradient(circle at top left, rgba(207, 32, 47, 0.08), transparent 38%),
                linear-gradient(180deg, #fff8f8 0%, #f6f3f3 100%);
        }

        .inner-page-section {
            min-height: 60vh;
        }

        .about-media {
            position: relative;
            overflow: hidden;
            border-radius: 0px;
            box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
        }

        .about-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.18));
        }

        .about-media img {
            width: 100%;
            height: 100%;
            min-height: 520px;
            object-fit: cover;
            display: block;
        }

        .about-copy {
            padding-left: 1rem;
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            padding: 0.55rem 1rem;
            border-radius: 999px;
            background: rgba(207, 32, 47, 0.1);
            color: var(--accent-dark);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 1.2rem;
        }

        .about-copy h1,
        .about-copy h2 {
            font-size:35px;
            line-height: 1.18;
            font-weight: 800;
            color: var(--heading-color);
            margin-bottom: 1.2rem;
        }

        .about-copy p {
            font-size: 1rem;
            line-height: 1.9;
            color:var(--text-color);
            margin-bottom: 1rem;
            max-width: 590px;
        }

        .projects-section {
            background: linear-gradient(180deg, #fffefe 0%, #f3efef 100%);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1.35rem;
        }

        .project-card {
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 0px;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid rgba(17, 17, 17, 0.06);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
        }

        .project-card-image img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            display: block;
        }

        .project-card-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 1.4rem;
        }

        .project-card-body h3 {
            font-size: 1.3rem;
            line-height: 1.28;
            font-weight: 800;
            color:var(--heading-color);
            margin-bottom: 0.75rem;
        }
        .project-card-body h3:hover {
            color:#D12E8D;
        }

        .project-card-body p {
            color:var(--text-color);
            line-height: 1.85;
            margin-bottom: 1.15rem;
            flex: 1;
        }

        .project-card-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--accent-dark);
            font-weight: 800;
        }

        .read-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            min-height: 48px;
            padding:10px 30px;
            margin-top: 1rem;
            border-radius: 0px;
            background:var(--primary-color)!important;
            color: var(--white);
            font-weight: 800;
            letter-spacing: 0.03em;
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 16px 28px rgba(17, 17, 17, 0.2);
        }

        .read-more-btn i {
            transition: transform 0.2s ease;
        }

        .read-more-btn:hover {
            background: var(--secondary-color)!important;
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 18px 32px rgba(207, 32, 47, 0.28);
        }

        .read-more-btn:hover i {
            transform: translateX(4px);
        }

        .section-heading {
            max-width: 760px;
            margin: 0 auto 2.8rem;
        }

        .section-heading h2 {
            font-size: 35px;
            line-height: 1.2;
            font-weight: 800;
            color:var(--primary-color);
            margin-bottom: 1rem;
        }

        .section-heading p {
            margin: 0;
            color:var(--text-color);
            line-height: 1.9;
        }

        .impact-section {
            background: linear-gradient(180deg, #111111 0%, #050505 100%);
        }

        .impact-shell {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
            gap: 3rem;
            align-items: center;
            padding: 1rem 0;
        }

        .impact-intro {
            max-width: 470px;
        }

        .impact-intro h2 {
            font-size: 35px;
            line-height: 1.15;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 1rem;
        }

        .impact-intro p {
            margin: 0;
            color: rgba(255, 255, 255, 0.72);
            line-height: 1.85;
            max-width: 430px;
        }

        .impact-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2rem 1.5rem;
        }

        .impact-card {
            display: grid;
            grid-template-columns: 38px 1fr;
            column-gap: 0.9rem;
            align-items: center;
            padding: 0.25rem 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .impact-stat-head {
            display: contents;
        }

    .impact-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / span 2;
    align-self: center;
    border-radius: 50%;
    /* background: #e60c0c; */
    color: var(--primary-color);
    font-size: 1rem;
    border: 1px solid var(--white);
}

        .impact-icon i {
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .impact-card h3 {
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
    color: var(--white);
    margin: 0;
    letter-spacing: -0.03em;
    grid-column: 2;
}

        .impact-card p {
    margin: 0;
    padding-left: 0;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    margin-top: 0.2rem;
    grid-column: 2;
}

        .work-section {
            background:
                linear-gradient(180deg, #fff7f7 0%, #f7f1f1 100%);
        }

        .work-intro {
            max-width: 440px;
        }

        .work-intro h2 {
            font-size: 35px;
            line-height: 1.2;
            font-weight: 800;
            color: #101010;
            margin-bottom: 1rem;
        }

        .work-intro p {
            color: #555555;
            line-height: 1.9;
            margin-bottom: 0;
        }

        .work-steps {
            display: grid;
            gap: 1.2rem;
        }

        .work-step {
            display: grid;
            grid-template-columns: 84px 1fr;
            gap: 1.2rem;
            padding: 1.5rem;
            border-radius: 24px;
            background: var(--white);
            border: 1px solid rgba(17, 17, 17, 0.06);
            box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
        }

        .work-step-number {
            width: 84px;
            height: 84px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #111111;
            color: var(--white);
            font-size: 1.35rem;
            font-weight: 800;
        }

        .work-step h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: #101010;
            margin-bottom: 0.55rem;
        }

        .work-step p {
            margin: 0;
            color: #565656;
            line-height: 1.85;
        }

        .gallery-section {
            background: linear-gradient(180deg, #111111 0%, #050505 100%);
        }

        .gallery-section .section-heading p,
        .gallery-section .section-tag {
            color: var(--white);
        }

        .gallery-section .section-tag {
            background: rgba(255, 255, 255, 0.08);
        }

        .gallery-section .section-heading p {
            color: rgba(255, 255, 255, 0.72);
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1.25rem;
        }

        .gallery-card {
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            min-height: 290px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
        }

        .gallery-card img {
            width: 100%;
            height: 100%;
            min-height: 290px;
            object-fit: cover;
            display: block;
            transition: transform 0.35s ease;
        }

        .gallery-trigger {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.55));
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .gallery-plus {
            width: 68px;
            height: 68px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.28);
            color: var(--white);
            font-size: 1.35rem;
            transform: scale(0.86);
            transition: transform 0.25s ease, background 0.25s ease;
        }

        .gallery-card:hover img {
            transform: scale(1.06);
        }

        .gallery-card:hover .gallery-trigger,
        .gallery-card:focus-within .gallery-trigger {
            opacity: 1;
        }

        .gallery-card:hover .gallery-plus,
        .gallery-card:focus-within .gallery-plus {
            transform: scale(1);
            background:var(--secondary-color);
        }

        .gallery-modal .modal-content {
            background: #050505;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 28px;
            overflow: hidden;
        }

        .gallery-modal .modal-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 1rem 1.2rem;
        }

        .gallery-modal .modal-title {
            color: var(--white);
            font-size: 1.2rem;
            font-weight: 800;
        }

        .gallery-modal .modal-body {
            padding: 0;
        }

        .gallery-modal .carousel-item img {
            width: 100%;
            height: min(78vh, 760px);
            object-fit: cover;
            display: block;
        }

        .gallery-carousel-control {
            width: 54px;
            height: 54px;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            opacity: 1;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 50%;
        }

        .gallery-carousel-control.carousel-control-prev {
            left: 20px;
        }

        .gallery-carousel-control.carousel-control-next {
            right: 20px;
        }

        .gallery-carousel-control .carousel-control-prev-icon,
        .gallery-carousel-control .carousel-control-next-icon {
            filter: brightness(0) invert(1);
        }

        .blog-section {
            background: linear-gradient(180deg, #fff8f8 0%, #f5f3f3 100%);
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.4rem;
        }

        .blog-card {
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid rgba(17, 17, 17, 0.06);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
        }

        .blog-card-image img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            display: block;
        }

        .blog-card-body {
            padding: 1.55rem;
        }

        .blog-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            color: #7b7b7b;
            font-size: 0.9rem;
        }

        .blog-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .blog-card h3 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.32;
    color: var(--heading-color);
    margin-bottom: 0.85rem;
}
.blog-card h3:hover {
    color: #D12E8D;
}

        .blog-card p {
            color: var(--text-color);
            line-height: 1.8;
            margin-bottom: 1.2rem;
        }

        .blog-link {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--primary-color);
            font-weight: 800;
        }

        .detail-page-section {
            background:#f5f5f5;
        }

        .detail-main-card,
        .sidebar-card {
            background: #ffffff;
            /*border: 1px solid rgba(17, 17, 17, 0.06);
            box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);*/
        }

        .detail-main-card {
            overflow: hidden;
        }

        .detail-media img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            display: block;
        }

        .detail-content-wrap {
            padding: 2rem;
        }

        .detail-title {
            font-size: 2.4rem;
            line-height: 1.2;
            font-weight: 800;
            color: #111111;
            margin: 0 0 1rem;
        }

        .detail-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.1rem;
            margin-bottom: 1.4rem;
            color: #636363;
            font-size: 0.95rem;
            font-weight: 700;
        }

        .detail-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .detail-copy p {
            color: #4c4c4c;
            line-height: 1.95;
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .detail-quote {
            margin: 1.6rem 0;
            padding: 1.4rem 1.5rem;
            border-left: 4px solid var(--accent);
            background: #fff5f5;
            color: #202020;
            font-size: 1.06rem;
            line-height: 1.85;
            font-weight: 700;
        }

        .detail-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .sidebar-card {
            padding: 1.4rem;
        }

        .sidebar-heading {
            margin-bottom: 1rem;
            padding-bottom: 0.85rem;
            border-bottom: 1px solid rgba(17, 17, 17, 0.08);
        }

        .sidebar-heading h3 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 800;
            color: #111111;
        }

        .sidebar-post-list {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .sidebar-post-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.85rem;
    align-items: center;
    color: inherit;
    /* padding: 0.55rem; */
    border-radius: 16px;
    transition: background 0.2s ease, transform 0.2s ease;
}

        .sidebar-post-item:hover,
        .sidebar-featured-list a:hover,
        .sidebar-icon-list a:hover {
            background: #fff5f5;
            transform: translateX(4px);
        }

        .sidebar-post-item img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    /* border-radius: 14px; */
    display: block;
}

        .sidebar-post-item strong {
            display: block;
            color: #111111;
            font-size: 0.95rem;
            line-height: 1.45;
            margin-bottom: 0.35rem;
        }

        .sidebar-post-item span {
            color: #7a7a7a;
            font-size: 0.86rem;
        }

        .sidebar-featured-list,
        .sidebar-icon-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }

        .sidebar-featured-list a,
        .sidebar-icon-list a {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            padding: 0.85rem 0.95rem;
            border-radius: 14px;
            background: #faf7f7;
            color: #1b1b1b;
            font-weight: 700;
            line-height: 1.6;
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .contact-page-section {
            background:
                radial-gradient(circle at top left, rgba(207, 32, 47, 0.08), transparent 28%),
                linear-gradient(180deg, #fffefe 0%, #f4f0f0 100%);
        }

        .contact-panel,
        .contact-map-card {
            background: #ffffff;
            border: 1px solid rgba(17, 17, 17, 0.06);
            box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);
        }

        .contact-panel {
            padding: 2rem;
        }

        .contact-title,
        .contact-form-title {
            font-size: 2.1rem;
            line-height: 1.2;
            font-weight: 800;
            color:var(--heading-color);
            margin: 0 0 1rem;
        }

        .contact-intro {
            color: #575757;
            line-height: 1.9;
            margin-bottom: 1.8rem;
        }

        .contact-info-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .contact-info-item {
            display: grid;
            grid-template-columns: 76px 1fr;
            gap: 1rem;
            align-items: start;
            padding: 1.15rem;
            background: #faf7f7;
            border: 1px solid rgba(17, 17, 17, 0.05);
        }

        .contact-info-icon {
            width: 76px;
            height: 76px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background:var(--primary-color);
            color: var(--white);
            font-size: 1.35rem;
        }

        .contact-info-copy h3 {
            margin: 0 0 0.45rem;
            font-size: 1.15rem;
            font-weight: 800;
            color:var(--heading-color);
        }

        .contact-info-copy p {
            margin: 0;
            color: #5a5a5a;
            line-height: 1.8;
        }

        .contact-form {
            margin-top: 1.1rem;
        }

        .contact-label {
            display: block;
            margin-bottom: 0.55rem;
            color: #111111;
            font-size: 0.95rem;
            font-weight: 700;
        }

        .contact-input {
            width: 100%;
            min-height: 56px;
            padding: 0 1rem;
            border: 1px solid rgba(17, 17, 17, 0.1);
            background: #faf7f7;
            color: #111111;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .contact-input:focus {
            border-color: rgba(207, 32, 47, 0.55);
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(207, 32, 47, 0.08);
        }

        .contact-input::placeholder {
            color: #8b8b8b;
        }

        .contact-textarea {
            min-height: 180px;
            padding: 1rem;
            resize: vertical;
        }

        .contact-submit-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            min-height: 50px;
            padding: 0 1.5rem;
            border: none;
            background:var(--primary-color);
            color: var(--white);
            font-weight: 800;
            letter-spacing: 0.02em;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-submit-btn:hover {
            transform: translateY(-2px);
            background:var(--secondary-color);
        }

        .contact-map-card {
            overflow: hidden;
            min-height: 420px;
        }

        .contact-map-card iframe {
            display: block;
            min-height: 420px;
        }

        .about-details-section {
            background: #f7f5f5;
        }

        .about-details-content,
        .about-simple-box {
            background: #ffffff;
            /*border: 1px solid rgba(17, 17, 17, 0.08);*/
        }

        .about-details-content {
            padding: 2rem;
        }

        .about-details-content h1 {
            margin: 0 0 1.2rem;
            font-size: 2.3rem;
            line-height: 1.2;
            font-weight: 800;
            color: #111111;
        }

        .about-details-content p {
            margin-bottom: 1rem;
            color: #4d4d4d;
            line-height: 1.9;
            font-size: 1rem;
        }

        .about-details-side {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .about-simple-box {
            padding: 1.5rem;
        }

        .about-simple-box h2 {
            margin: 0 0 0.8rem;
            font-size: 1.35rem;
            font-weight: 800;
            color: #111111;
        }

        .about-simple-box p {
            margin: 0;
            color: #5a5a5a;
            line-height: 1.8;
        }

        .sidebar-featured-list i,
        .sidebar-icon-list i {
            color: var(--accent);
            margin-top: 0.2rem;
            font-size: 0.95rem;
        }

        .vision-mission-wrap {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.5rem;
            margin-top: 4rem;
        }

        .info-card {
            padding: 2rem;
            border-radius: 0px;
            background:var(--primary-color);
            color: var(--white);
            box-shadow: 0 22px 45px rgba(0, 0, 0, 0.14);
        }

        .info-card-icon {
            width: 58px;
            height: 58px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), #ef4657);
            color: var(--white);
            font-size: 1.25rem;
            margin-bottom: 1.2rem;
        }

        .info-card h3 {
            font-size: 1.45rem;
            font-weight: 800;
            margin-bottom: 0.8rem;
            color:#fff;
        }

        .info-card p {
            margin: 0;
            line-height: 1.85;
            color: rgba(255, 255, 255, 0.78);
        }

        .join-card{
            background: var(--primary-color);
            color:#fff;
            padding:10px;
        }

        .join-card p{
            color:#fff;
        }

        /*resources*/
.resource-card {
    border-radius: 0px;
    transition: all 0.4s ease;
    background: #fff;
    padding: 50px 10px;
    text-align: center;
    height:100%;
}

    .resource-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        background: #f8fff9; /* হালকা গ্রিন টিন্ট */
    }

    .icon-box {
        width: 70px;
        height: 70px;
        background: rgba(0, 106, 78, 0.1); /* NEBAF Green transparent */
        color:var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto;
        font-size: 1.8rem;
        transition: 0.3s;
    }

    .resource-card:hover .icon-box {
        background:var(--secondary-color);
        color: #fff;
        transform: rotateY(180deg);
    }

    .resource-card h5 {
    font-size: 20px;
    color: var(--heading-color);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

   .resource-card p {
    font-size: 16px;
}

    .resource-card a {
        font-size: 0.9rem;
        transition: 0.3s;
        color:var(--primary-color);
    }

    .resource-card a:hover {
        letter-spacing: 1px;
    }
        /*resources*/


        /*event*/
        .section-title { font-size: 2.5rem; line-height: 1.2; }
    
    /* Arrow Styles */
    .slider-arrow {
        background:var(--primary-color); /* Image color theme */
        border: none;
        width: 50px;
        height: 40px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        border-radius: 4px;
    }
    .slider-arrow:hover { background:var(--secondary-color); }

    /* Card Styles as per image_1e1e1a.jpg */
    .event-card-premium {
        background: #fdf2e4; /* Light beige/orange tint from image */
        border: 1px dashed #ffb366;
        overflow: hidden;
    }
    .card-img img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    .card-content { padding: 25px; }
    .meta-info { font-size: 0.85rem; color: #777; }
    .meta-info i { color:var(--primary-color); }
    
    /*.read-more-btn {
        background: #ffb366;
        color: white;
        font-weight: 600;
        padding: 10px 25px;
        border-radius: 0;
        margin-top: 15px;
        display: inline-block;
    }
    .read-more-btn:hover { background: #e68a00; color: white; }*/

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .section-title { font-size: 1.5rem; }
    }
        /*event*/


        /*volunteer*/
        /* Member Card Styling based on image_1d2371.jpg */
    .member-card {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .member-card img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease; /* Zoom Animation */
    }

    /* Hover State: Image Zoom */
    .member-card:hover img {
        transform: scale(1.1);
    }

    /* Overlay Info */
    .member-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        color: white;
        text-align: center;
        transition: all 0.4s ease;
    }

    /* Hover Animation for Info */
    .member-card:hover .member-info {
        background: rgba(255, 179, 102, 0.9); /* Hover করলে ইমেজের থিম কালার হবে */
    }

    .member-info h5 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .member-info p {
        font-size: 0.9rem;
        margin-bottom: 0;
        opacity: 0.8;
    }

    /* List Icons */
    .volunteer-section ul li {
        font-size: 0.95rem;
        color: #555;
    }
    .volunteer_heading{
        color:var(--primary-color);
        text-transform: uppercase;
    }
        /*volunteer*/

        .footer-main {
            background:var(--primary-color);
            color: var(--white);
            padding: 64px 0 30px;
        }

        .footer-logo {
            display: inline-flex;
            align-items: center;
            gap: 0.95rem;
            margin-bottom: 1rem;
        }

        .footer-logo-text strong,
        .footer-main h5 {
            color: var(--white);
        }

        .footer-about {
            color: rgba(255, 255, 255, 0.76);
            line-height: 1.8;
            max-width: 320px;
            margin-bottom: 1.4rem;
        }

        .footer-main h5 {
            font-size: 1.08rem;
            font-weight: 800;
            margin-bottom: 1.2rem;
            color:#29B6CC;
            text-transform: uppercase;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 0.8rem;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            color:#CCCCCC;
        }

        .footer-links a i {
    /* width: 28px; */
    /* height: 28px; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 50%; */
    /* border: 1px solid rgba(255, 255, 255, 0.18); */
    color: #CCCCCC;
    font-size: 0.78rem;
}

        .footer-contact {
            color: rgba(255, 255, 255, 0.76);
            line-height: 1.9;
            display: flex;
            flex-direction: column;
            gap: 0.95rem;
        }

        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
        }

        .footer-contact-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: var(--white);
            background: rgba(255, 255, 255, 0.04);
        }

        .copyright-bar {
            background: #000000;
            color: rgba(255, 255, 255, 0.72);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 18px 0;
        }

        .copyright-links {
            display: flex;
            gap: 1.2rem;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        @media (max-width: 991.98px) {
            .header-shell {
                grid-template-columns: auto 1fr;
            }

            .hero-slide {
                min-height: 680px;
                padding: 60px 0 110px;
            }

            .hero-slide-content {
                display: flex;
            }

            .hero-copy h1,
            .hero-copy h2 {
                max-width: 13ch;
            }

            .about-copy {
                padding-left: 0;
            }

            .projects-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .impact-shell {
                grid-template-columns: 1fr;
                gap: 2.25rem;
            }

            .gallery-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .blog-grid {
                grid-template-columns: 1fr;
            }

            .blog-card-large {
                grid-row: auto;
            }

            .impact-intro {
                max-width: none;
            }

            .work-step {
                grid-template-columns: 72px 1fr;
            }

            .work-step-number {
                width: 72px;
                height: 72px;
            }

            .vision-mission-wrap {
                grid-template-columns: 1fr;
            }

            .desktop-nav {
                display: none;
            }

            .header-actions {
                gap: 0.6rem;
                grid-column: 2;
            }

            .header-donate {
                display: none;
            }

            .site-header .container {
                min-height: 78px;
            }

            .menu-toggle {
                display: inline-flex;
            }
        }

        @media (max-width: 767.98px) {
            .topbar-wrap {
                justify-content: space-between !important;
                gap: 0.75rem;
            }

            .hero-slide {
                min-height: auto;
                padding: 42px 0 105px;
            }

            .hero-kicker {
                min-height: 38px;
                padding: 0 0.85rem;
                font-size: 0.72rem;
            }

            .hero-copy h1,
            .hero-copy h2 {
                font-size: 2.35rem;
                max-width: none;
            }

            .hero-copy p {
                font-size: 0.98rem;
            }

            .hero-actions {
                gap: 0.75rem;
            }

            .hero-actions .donate-btn {
                min-height: 44px;
                padding: 0 1.1rem;
                font-size: 0.92rem;
            }

            .hero-panel,
            .hero-control {
                display: none;
            }

            .hero-indicators {
                bottom: 24px;
            }

            .top-contact {
                display: none;
            }

            .top-social {
                justify-content: flex-start;
                width: auto;
                gap: 0.45rem;
            }

            .header-actions {
                gap: 0.55rem;
                justify-self: end;
            }

            .topbar-donate {
                display: inline-flex;
                min-height: 36px;
                padding: 0 0.9rem;
                font-size: 0.82rem;
            }

            .search-toggle,
            .search-form button,
            .menu-toggle {
                width: 42px;
                height: 42px;
            }

            .search-form {
                right: 0;
                width: min(84vw, 280px);
            }

            .section-space {
                padding: 64px 0;
            }

            .about-media img {
                min-height: 300px;
            }

            .projects-grid {
                grid-template-columns: 1fr;
            }

            .section-heading h2,
            .work-intro h2 {
                font-size: 1.9rem;
            }

            .impact-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .gallery-card,
            .gallery-card img {
                min-height: 240px;
            }

            .gallery-plus {
                width: 58px;
                height: 58px;
            }

            .gallery-carousel-control {
                width: 46px;
                height: 46px;
            }

            .blog-card-body {
                padding: 1.25rem;
            }

            .detail-media img {
                height: 320px;
            }

            .detail-content-wrap,
            .sidebar-card {
                padding: 1.2rem;
            }

            .detail-title {
                font-size: 1.9rem;
            }

            .contact-panel {
                padding: 1.25rem;
            }

            .contact-title,
            .contact-form-title {
                font-size: 1.75rem;
            }

            .contact-info-item {
                grid-template-columns: 62px 1fr;
                padding: 1rem;
            }

            .contact-info-icon {
                width: 62px;
                height: 62px;
                font-size: 1.1rem;
            }

            .contact-map-card,
            .contact-map-card iframe {
                min-height: 300px;
            }

            .about-details-content {
                padding: 1.25rem;
            }

            .about-details-content h1 {
                font-size: 1.9rem;
            }

            .about-simple-box {
                padding: 1.2rem;
            }

            .sidebar-post-item {
                grid-template-columns: 64px 1fr;
            }

            .sidebar-post-item img {
                width: 64px;
                height: 64px;
            }

            .work-step {
                grid-template-columns: 1fr;
            }

            .work-step-number {
                width: 60px;
                height: 60px;
                font-size: 1.05rem;
            }

            .about-copy h1,
            .about-copy h2 {
                font-size: 1.9rem;
            }

            .read-more-btn {
                min-height: 44px;
                padding: 0 1.2rem;
            }

            .brand img {
                height: 48px !important;
            }

            .footer-main {
                padding-top: 50px;
            }

            .copyright-bar .row {
                text-align: center;
                gap: 0.75rem;
            }

            .copyright-links {
                justify-content: center;
            }
        }











       /* ===============*/
       /* Left Side Styling (image_78495b.png inspired) */
    .badge-custom {
        background-color: #fce4e4;
        color: #d63031;
        padding: 8px 20px;
        border-radius: 50px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .content-left h2 {
        color: #2d3436;
        line-height: 1.2;
    }

    .btn-discover {
        background-color: #ffb142;
        color: white;
        padding: 15px 35px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        box-shadow: 0 10px 20px rgba(255, 177, 66, 0.3);
        transition: all 0.3s ease;
    }

    .btn-discover:hover {
        background-color: #ff9f1a;
        transform: translateY(-3px);
        color: white;
    }

    /* Right Side Styling (image_784a3c.png inspired) */
    .feature-box {
        padding: 10px;
        transition: transform 0.3s ease;
    }

    .icon-wrap {
        font-size: 2.5rem;
        color:var(--primary-color);
        border-right: 2px solid #f1f2f6;
        padding-right: 15px;
        display: flex;
        align-items: center;
    }

    .text-wrap h4 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 8px;
    }

    .text-wrap p {
        font-size: 0.9rem;
        color: #7f8c8d;
        line-height: 1.5;
        margin: 0;
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .icon-wrap {
            border-right: none;
            border-bottom: 2px solid #f1f2f6;
            margin-bottom: 10px;
            padding-right: 0;
            padding-bottom: 10px;
        }
    }
       /* ===============*/


      /* ==========*/
      .partners-section {
        /*border-top: 1px solid #eee;*/
    }

    .partner-slider {
        padding: 10px 0;
    }

    .partner-logo-box {
        background: #fff;
        height: 150px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 10px 5px;
        padding: 5px;
        border-radius: 0px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        /* Grayscale effect that turns color on hover */
       /* filter: grayscale(100%);
        opacity: 0.6;*/
    }

    .partner-logo-box:hover {
        filter: grayscale(0%);
        opacity: 1;
        border-color: #0d6efd;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    .partner-logo-box img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /* Slick dots styling if needed */
    .slick-dots li button:before {
        color: #0d6efd;
    }
      /* ==========*/



.breadcrumb-section {
    background: linear-gradient(rgba(10, 48, 59, 0.8), rgba(10, 48, 59, 0.8)), 
                url('images/banner.webp'); /* Apnar image path ekhane hobe */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    min-height: 350px;
}

.breadcrumb-section h1 {
    font-family: 'Arial', sans-serif; /* Ba apnar preference onujayi */
    letter-spacing: 1px;
}

.breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb-item a:hover {
    color: #ff5e14;
}

/* Breadcrumb separator "/" color */
.breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff;
}

/* Active Page Color (Orange) */
.breadcrumb-item.active {
    color: #ff5e14 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .breadcrumb-section {
        padding: 60px 0;
        min-height: 250px;
    }
    .breadcrumb-section h1 {
        font-size: 2.5rem;
    }
}

.breaking-area {
    border-top: 1px solid rgba(0,0,0,.1);
    background: #fff;
}
 .breaking-news {
/*    background-color: #fff;*/
    /* color: #721c24; */
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    padding:15px 0px
}

/* Wrapper to hold the slider */
.breaking-news .news-wrapper {
    overflow: hidden;
    flex: 1; /* Allow it to take up remaining space */
    position: relative;
    /*padding:10px 0px;*/
}

/* Slider container */
.breaking-news .news-slider {
    display: flex;
    gap: 50px; /* Space between news items */
    animation: slide-left 35s linear infinite; /* Smooth scrolling animation */
}

@media (max-width: 768px) {
    .breaking-news .news-slider {
        animation: slide-left 10s linear infinite; /* মোবাইলের জন্য দ্রুত স্লাইড */
    }
}

.breaking-news .news-item {
    white-space: nowrap;
    /* font-size: var(--news--title-font-size); */
    font-size: 16px;
    font-weight: 600;
}

/* Smooth scrolling animation */
@keyframes slide-left {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Pause animation on hover */
.breaking-news .news-slider:hover {
    animation-play-state: paused !important;
}

.three-column-add img{
    height: 200px;
    width:100%;
    object-fit: cover;
}

.double-add img{
    height: 200px;
    width:100%;
    object-fit: cover;
}