/* ===================================================
   CORE.CSS
   Experteens Website
   Home | About | Impact | Contact | Blog | Partners
=================================================== */
/* 1. HOME PAGE 
==========================================================================================================================*/
/* ===================================================
   HOMEPAGE SECTION SPACING
=================================================== */
.skills-section,
.home-editorial-section,
.impact,
.path-section,
.timeline-section,
.partners,
.final-cta {
    position: relative;
}
.impact,
.path-section,
.skills-section,
.home-editorial-section,
.timeline-section,
.partners {
    margin-top: 5rem;
}
/* prevent hero spacing issue */
.home-hero+section {
    margin-top: 0;
}
/* ===================================================
   HOME HERO SLIDER
=================================================== */
.home-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}
.home-hero .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.home-hero .slide.active,
.home-hero .slide.is-active {
    opacity: 1;
}
.home-hero .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 8s ease;
}
.home-hero .slide.active img,
.home-hero .slide.is-active img {

    transform: scale(1.08);

}
.home-hero .overlay {
    position: absolute;
    inset: 0;
    background:linear-gradient(rgba(4, 30, 66, .75),rgba(4, 30, 66, .85));
    z-index: 2;
}
.home-hero .hero-content {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    width: 100%;
    padding: 2rem;
}
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}
.hero-title span {
    color: white;
}
.subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, .95);
    max-width: 700px;
    margin: 0 auto 2rem;
}
.hero-buttons {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* ===================================================
   HERO BUTTONS (MATCH FINAL CTA STYLE)
=================================================== */
.hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-weight: 700;
    text-decoration: none;
    transition: .35s ease;
}
/* Learn Skill */
.hero-buttons .btn.primary {
    background: var(--accent);
    color: white;
    border: none;
}
.hero-buttons .btn.primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);

}
/* Hire Talent */
.hero-buttons .btn.secondary {
    background: white;
    color: var(--primary);
    border: none;
}
.hero-buttons .btn.secondary:hover {
    transform: translateY(-4px);
    background: var(--accent);
    color: white;
}
/* icons */
.hero-buttons .btn i {
    font-size: 1rem;
}
.hero-proof {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.hero-proof span {
    padding: .75rem 1.25rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    backdrop-filter: blur(10px);
}
/* ===================================================
   SHARED PAGE HEROES
=================================================== */
.story-hero,
.contact-hero,
.impact-hero,
.blog-hero,
.partners-hero,
.about-hero {
    padding: 7rem 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}
.story-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 4rem;
    align-items: center;
}
.story-hero h1,
.contact-hero h1,
.impact-hero h1,
.blog-hero h1,
.partners-hero h1,
.about-hero h1 {
    color: white;
    margin-bottom: 1rem;
}
.story-hero-image img,
.programs-hero-media img {
    width: 100%;
    border-radius: var(--radius-lg);
}
/* ===================================================
   COMMON SECTION HEADER
=================================================== */
.section-header {
    max-width: 750px;
    margin: 0 auto 4rem;
    text-align: center;
}
.section-header h2 {
    margin-bottom: 1rem;
    color: var(--primary);
}
.section-header p:last-child {
    color: var(--text-muted);
    line-height: 1.7;
}
.eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .85rem;
    font-weight: 700;
}
/* ===================================================
   FEATURE CARDS
=================================================== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}
.feature-item {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: .35s ease;
}
.feature-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transition: .3s ease;
}
.feature-item:hover::before {
    transform: scaleX(1);

}
.feature-item:hover {
     transform: translateY(-8px);
}

/* responsive */
/* ===================================================
   LARGE TABLETS
=================================================== */
@media (max-width: 1024px) {

    .impact,
    .path-section,
    .skills-section,
    .home-editorial-section,
    .timeline-section,
    .partners {
        margin-top: 4rem;
    }

    .home-hero .hero-content {
        max-width: 850px;
    }

    .subtitle {
        font-size: 1.1rem;
        max-width: 650px;
    }

    .story-hero-grid {
        gap: 2.5rem;
    }

    .section-header {
        margin-bottom: 3rem;
    }
}

/* ===================================================
   TABLETS
=================================================== */
@media (max-width: 768px) {

    /* Section spacing */
    .impact,
    .path-section,
    .skills-section,
    .home-editorial-section,
    .timeline-section,
    .partners {
        margin-top: 3rem;
    }

    /* Hero */
    .home-hero {
        min-height: 85vh;
    }

    .home-hero .hero-content {
        padding: 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .subtitle {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 1.75rem;
    }

    /* Buttons */
    .hero-buttons {
        gap: .75rem;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 320px;
    }

    /* Proof badges */
    .hero-proof {
        gap: .75rem;
    }

    .hero-proof span {
        padding: .65rem 1rem;
        font-size: .9rem;
    }

    /* Shared heroes */
    .story-hero,
    .contact-hero,
    .impact-hero,
    .blog-hero,
    .partners-hero,
    .about-hero {
        padding: 5rem 0;
        text-align: center;
    }

    .story-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .story-hero-image {
        order: 2;
    }

    /* Section header */
    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    /* Feature cards */
    .feature-grid {
        gap: 1.5rem;
    }

    .feature-item {
        padding: 1.75rem;
    }
}
/* ===================================================
   MOBILE PHONES
=================================================== */
@media (max-width: 576px) {

    .home-hero {
        min-height: 80vh;
    }

    .home-hero .hero-content {
        padding: 1rem;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .subtitle {
        font-size: .95rem;
        line-height: 1.6;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-proof {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .hero-proof span {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

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

    .feature-item {
        padding: 1.5rem;
    }
}
/* ===================================================
   EXTRA SMALL DEVICES
=================================================== */
@media (max-width: 400px) {

    .hero-title {
        font-size: 1.75rem;
    }

    .subtitle {
        font-size: .9rem;
    }

    .hero-proof span {
        font-size: .85rem;
        padding: .6rem .85rem;
    }

    .feature-item {
        padding: 1.25rem;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .eyebrow {
        font-size: .75rem;
    }
}

/* ===================================================
   IMPACT SECTION
=================================================== */
.impact {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}
.impact-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 1.5rem;
}
.impact-grid-home {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}
.impact-item-home {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow:0 15px 35px rgba(0, 0, 0, .06);
    transition: .35s ease;
}
.impact-item-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    transform: scaleX(0);
    transition: .35s ease;
}
.impact-item-home:hover::before {
    transform: scaleX(1);

}
.impact-item-home:hover {
    transform: translateY(-10px);
}
.impact-item-home .icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}
.impact-item-home .icon.blue {
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
}
.impact-item-home .icon.orange {
    background: rgba(249, 115, 22, .15);
    color: #f97316;
}
.impact-item-home h3 {
    font-size: 3rem;
    color: var(--primary);
    font-weight: 800;
}
.impact-item-home p {
    color: var(--text-muted);
    font-weight: 600;
}
/* ===================================================
   CHOOSE YOUR PATH SECTION
=================================================== */
/* buttons */
.path-cards .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.8rem;
    border-radius: 999px;
    font-weight: 700;
    transition: .3s ease;
}
/* learner button */
.path-cards .btn.light {
    background: var(--accent);
    color: white;
}
.path-cards .btn.light:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}
/* supporter card */
.path-cards .supporter {
    background:linear-gradient(145deg, #ffffff, #f8fafc);
}
.path-cards .btn.dark {
    background: var(--primary);
    color: white;
}
.path-cards .btn.dark:hover {
    background: var(--accent);
    transform: translateY(-3px);
}
.path-section {
    padding-bottom: 4rem;
    background:linear-gradient(135deg, var(--primary),var(--primary-dark));
    overflow: hidden;
}
.path-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    top: -200px;
    right: -150px;
}
.path-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}
.path-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
.path-cards .card {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow:0 25px 60px rgba(0, 0, 0, .18);
    transition: .35s ease;
}
.path-cards .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background:linear-gradient(90deg,var(--accent),#2563eb);
}
.path-cards .card:hover {
    transform: translateY(-12px);
}
.path-cards h3 {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--primary);
}
.path-cards h3 i {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .12);
    color: var(--accent);
}
.path-cards p {
    color: var(--text-muted);
    line-height: 1.7;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 2rem 0;
}
.chips span {
    padding: .55rem 1rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: .85rem;
    font-weight: 600;
}
/* ===================================================
   SKILLS PROGRAMS SECTION
=================================================== */
.skills-section {
    padding: 7rem 0;
    background: #f8fafc;
}
.skills-section .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 1.5rem;
}
.home-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.home-skill-card {
    background: white;
    border-radius: 1.25rem;
    overflow: hidden;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    box-shadow:0 15px 35px rgba(0, 0, 0, .07);
    transition: .35s ease;
}
.home-skill-card:hover {
    transform: translateY(-10px);
    box-shadow:0 25px 55px rgba(0, 0, 0, .12);
}
.home-skill-top {
    padding: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--primary);
}
.home-skill-top i {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(37, 99, 235, .12);
    color: var(--accent);
}
.home-skill-content {
    padding: 0 2rem;
    flex: 1;
}
.home-skill-content p {
    color: var(--text-muted);
    line-height: 1.7;
}
.status {
    display: inline-flex;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}
.status.running {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}
.status.soon {
    background: rgba(249, 115, 22, .12);
    color: #ea580c;
}
.home-skill-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.home-skill-btn {
    color: var(--accent);
    font-weight: 700;
}
/* ===================================================
   BLOG / EDITORIAL SECTION
=================================================== */
.home-editorial-section {
    padding: 6rem 0;
    background: #f8fafc;
}
.editorial-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
}
.editorial-feature {
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow:0 20px 45px rgba(0, 0, 0, .08);
}
.editorial-feature img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.editorial-feature-content {
    padding: 2.5rem;
}
.editorial-feature-content h2 {
    color: var(--primary);
}
.editorial-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.editorial-list::before {
    content: "Recent Posts";
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
}
.editorial-post {
    background: white;
    padding: 1.5rem;
    border-radius: 1.2rem;
    box-shadow:0 12px 30px rgba(0, 0, 0, .06);
    transition: .35s ease;
}
.editorial-post:hover {
    transform: translateX(8px);
}
.editorial-post span {
    background: rgba(37, 99, 235, .1);
    color: var(--accent);
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .75rem;
}
.editorial-post h3 {
    color: var(--primary);
}
/* ===================================================
   TIMELINE SECTION
=================================================== */
.timeline-section {
    padding: 6rem 0;
    background:linear-gradient(135deg,#f8fafc,white);
}
.timeline {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    padding: 2rem 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    top: 45px;
    left: 0;
    width: 1950px;
    height: 4px;
    background: var(--accent);
}
.timeline-item {
    min-width: 250px;
    text-align: center;
}
.dot {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 50%;
    margin: auto auto 2rem;
    border: 6px solid white;
}
.content {
    background: white;
    padding: 2rem;
    border-radius: 1.25rem;
    box-shadow:0 15px 35px rgba(0, 0, 0, .08);
}
.content h4 {
    font-size: 2rem;
    color: var(--primary);
}
.content span {
    background: rgba(37, 99, 235, .1);
    color: var(--accent);
    padding: .45rem 1rem;
    border-radius: 999px;
}
/* ===================================================
   PARTNERS SECTION
=================================================== */
.partners {
    padding: 6rem 0;
    background:linear-gradient(135deg,#f8fafc,#ffffff);
    overflow: hidden;
}
.partner-titles {
    max-width: 1200px;
    margin: auto;
    padding: 0 1.5rem;
}
.partner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}
.partners-subtitle {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: .85rem;
}
.partners-title {
    color: var(--primary);
    font-size:clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
}
.view-partners {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}
.view-partners:hover {
    background: var(--accent);
    transform: translateX(5px);
}
.partners-slider {
    width: 100%;
    overflow: hidden;
}
.partners-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: partnerScroll 25s linear infinite;
    align-items: center;
}
.partners-track:hover {
    animation-play-state: paused;
}
.partners-track img {
    width: 180px;
    height: 100px;
    object-fit: contain;
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .07);
    transition: .35s ease;
}
.partners-track img:hover {
    transform: translateY(-8px);
}
@keyframes partnerScroll {

    from {
        transform: translateX(0);
    }
    to {

        transform: translateX(-50%);
    }
}
/* ===================================================
   FINAL CTA SECTION
=================================================== */
.final-cta {
    position: relative;
    padding: 7rem 1.5rem;
    text-align: center;
    background: linear-gradient(
    135deg,
    rgba(46,43,122,.95),
    rgba(74,71,150,.95)
);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.final-cta::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(249, 115, 22, .15);
    border-radius: 50%;
    top: -200px;
    right: -150px;
}
.finalcta-container {
    max-width: 850px;
    margin: auto;
    position: relative;
    z-index: 2;
    padding: 3.5rem 2.5rem;
    background: rgba(255, 255, 255, .08);
    border-radius: 2rem;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .15);
}
.final-cta h2 {
    color: white;
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 1rem;
}
.final-cta p {
    color: rgba(255, 255, 255, .85);
    max-width: 650px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.final-cta .btn {
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: .35s ease;
}
.final-cta .btn.primary {
    background: var(--accent);
    color: white;
}

.final-cta .btn.secondary {
    background: white;
    color: var(--primary);
}
.final-cta .btn:hover {
    transform: translateY(-4px);
}
/* ===================================================
   INNER PAGE COMPONENTS
=================================================== */
.content-section,
.contact-form-section,
.impact-showcase,
.faq-section {
padding: 6rem 0;
}
.modern-band-light {
    background: #f8fafc;
}
/* CONTACT */
.contact-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3rem;
}
.contact-info-panel {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.contact-info-panel i {
    color: var(--accent);
}
/* BLOG CARDS */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
.blog-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: .3s ease;
}
.blog-card:hover {
    transform: translateY(-8px);
}
.blog-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.blog-card-content {
    padding: 1.5rem;
}
/* PARTNER CARDS */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.partner-card {
    background: white;
    padding: 2rem;
    text-align: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: .3s ease;
}
.partner-card:hover {
    transform: translateY(-8px);
}
.partner-card img {
    max-height: 80px;
}
/* ===================================================
   RESPONSIVE
=================================================== */
@media(max-width:992px) {
    .story-hero-grid,
    .contact-grid,
    .editorial-grid {
        grid-template-columns: 1fr;
    }
    .partner-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media(max-width:768px) {
    .home-hero {
        min-height: 90vh;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .skills-section,
    .impact,
    .path-section,
    .home-editorial-section,
    .timeline-section,
    .partners {
        margin-top: 3rem;
    }
    .path-cards .card {
        padding: 2rem;
    }
    .home-skill-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .cta-buttons {
        flex-direction: column;
    }
    .final-cta .btn {
        width: 100%;
    }
}
/* ===================================================
   SKILLS VISIBILITY FIX
=================================================== */
.home-skills-grid {
    display: grid;
    visibility: visible;
    opacity: 1;
}
.home-skill-card {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* 2. ABOUT PAGE SPECIFIC STYLE
===========================================================================================================================*/
*/
/* ===================================================
   ABOUT HERO
=================================================== */
/* =====================================
   SHARED INNER PAGE HEROES
===================================== */
.story-hero,
.contact-hero,
.impact-hero,
.blog-hero,
.partners-hero,
.about-hero {

    padding:7rem 0;
    color:white;
}
/* =====================================
   ABOUT HERO
===================================== */
.about-hero {
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(135deg, rgba(4,30,66,.95),rgba(4,30,66,.80)),url("/static/images/training1.7b507b154bf7.jpg");
    background-size:cover;
    background-position:center;
}
/* make text visible */
.about-hero h1 {
    color:white;
}
.about-hero p {
    color:rgba(255,255,255,.9);
}
.about-hero .eyebrow {
    color:var(--accent);
}
.about-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(249, 116, 22, 0.633);
    top: -200px;
    right: -150px;
}
.about-hero .story-hero-grid {
    align-items: center;
}
.about-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}
.about-hero p {
    /* color: rgba(255, 255, 255, .9); */
    line-height: 1.8;
}

.about-hero .story-hero-image img {
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
}
/* ===================================================
   ABOUT STATS
=================================================== */
.impact-stats {
    background: var(--primary);
    padding: 4rem 1.5rem;
}
.stats-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.stat-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 1.25rem;
    text-align: center;
    transition: .35s ease;
}
.stat-card:hover {
    transform: translateY(-8px);
}
.stat-card h3 {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: .5rem;
}
.stat-card p {
    color: white;
    opacity: .9;
}
/* responive about hero and stats */
/* ===================================================
   TABLETS (1024px and below)
=================================================== */
@media (max-width: 1024px) {

    .about-hero {
        padding: 6rem 0;
    }

    .about-hero::before {
        width: 350px;
        height: 350px;
        top: -120px;
        right: -100px;
    }

    .about-hero h1 {
        font-size: clamp(2.2rem, 5vw, 3.5rem);
    }

    .impact-stats {
        padding: 3.5rem 1.5rem;
    }

    .stat-card {
        padding: 1.75rem;
    }

    .stat-card h3 {
        font-size: 2.5rem;
    }
}
/* ===================================================
   MOBILE (768px and below)
=================================================== */
@media (max-width: 768px) {

    .about-hero {
        padding: 5rem 0;
        text-align: center;
    }

    .about-hero::before {
        width: 250px;
        height: 250px;
        top: -80px;
        right: -120px;
    }

    .about-hero h1 {
        font-size: 2.2rem;
        line-height: 1.25;
        margin-bottom: 1rem;
    }

    .about-hero p {
        font-size: 1rem;
        line-height: 1.7;
        max-width: 100%;
    }

    .about-hero .story-hero-grid {
        gap: 2rem;
    }

    .about-hero .story-hero-image img {
        width: 100%;
        max-width: 500px;
        margin: auto;
        display: block;
    }

    .impact-stats {
        padding: 3rem 1rem;
    }

    .stats-grid {
        gap: 1.25rem;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .stat-card h3 {
        font-size: 2.2rem;
    }

    .stat-card p {
        font-size: .95rem;
    }
}
/* ===================================================
   SMALL PHONES (480px and below)
=================================================== */
@media (max-width: 480px) {

    .about-hero {
        padding: 4rem 0;
    }

    .about-hero::before {
        width: 180px;
        height: 180px;
        top: -50px;
        right: -90px;
        opacity: .6;
    }

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

    .about-hero p {
        font-size: .95rem;
        line-height: 1.6;
    }

    .impact-stats {
        padding: 2.5rem 1rem;
    }

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

    .stat-card {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .stat-card h3 {
        font-size: 2rem;
    }

    .stat-card p {
        font-size: .9rem;
    }
}
/* ..................... */
@media (max-width: 768px) {
    .story-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* ===================================================
   MISSION SECTION
=================================================== */
/* ==========================================
   MISSION SECTION ACCENT
========================================== */
.split-feature {
    position: relative;
    overflow: hidden;
    /* padding: 0.5rem 0; */
}
/* Orange accent corner */
.split-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
    background: var(--accent);
    border-bottom-right-radius: 100%;
    opacity: 0.15;
    z-index: 0;
}
/* Keep content above accent */
.split-feature > * {
    position: relative;
    z-index: 1;
}
.split-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.split-feature h2 {
    color: var(--primary);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}
.split-feature p {
    line-height: 1.8;
}
.mission-vision-cards {
    display: grid;
    gap: 1.5rem;
}
.mission-vision-cards article {
    background: white;
    padding: 2rem;
    border-radius: 1.25rem;
    box-shadow:0 15px 35px rgba(0, 0, 0, .08);
    position: relative;
    overflow: hidden;
    transition: .35s ease;
}
.mission-vision-cards article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transition: .35s ease;
}
.mission-vision-cards article:hover::before {
    transform: scaleX(1);
}
.mission-vision-cards article:hover {
    transform: translateY(-8px);
}
.mission-vision-cards i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
}
/* ===================================================
   MISSION SECTION RESPONSIVENESS
=================================================== */
@media (max-width: 1024px) {

    .split-feature {
        gap: 2.5rem;
    }

    .split-feature::before {
        width: 180px;
        height: 180px;
    }

    .mission-vision-cards article {
        padding: 1.75rem;
    }
}

@media (max-width: 768px) {

    .split-feature {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .split-feature::before {
        width: 140px;
        height: 140px;
        opacity: .12;
    }

    .split-feature h2 {
        font-size: 2rem;
    }

    .mission-vision-cards article {
        padding: 1.5rem;
    }

    .mission-vision-cards i {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {

    .split-feature {
        gap: 1.5rem;
    }

    .split-feature h2 {
        font-size: 1.75rem;
    }

    .split-feature p {
        font-size: .95rem;
        line-height: 1.7;
    }

    .mission-vision-cards article {
        padding: 1.25rem;
        border-radius: 1rem;
    }
}
/* ===================================================
   VALUES
=================================================== */
/* ==========================================
   ABOUT VALUES - GLASS STYLE
========================================== */
.values-section {
    background: var(--primary);
    padding:40px 20px;
    position:relative;
    overflow:hidden;
}
.values-section .container {
    max-width:1200px;
    margin:auto;
}
/* Header */
.values-section .section-header {
    text-align:center;
    margin-bottom:3rem;
}
.values-section .eyebrow {
    color:var(--accent);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}
/* .values-section h2 {
    color:white;
    font-size:clamp(2rem,4vw,3rem);
} */
 
.we-work {
    color:white;
    font-size:clamp(2rem,4vw,3rem);
}
/* GRID */
.values-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
/* Glass cards */
.value-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    padding: 2rem;
    text-align: center;
    transition: .35s ease;
}
.value-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transition: .35s ease;
}
.value-card:hover::before {
    transform: scaleX(1);
}
.value-card:hover {
    transform: translateY(-8px);
}
/* Hover */
.value-card:hover {
    transform:translateY(-8px);
    background: rgba(255,255,255,.16);
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}
/* Accent top line */
.value-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
}
/* Title */
.value-card h3 {
    color: var(--accent);
    font-size:1.35rem;
    font-weight:800;
    margin-bottom:1rem;
}
/* Description */
.value-card p {
    color:white;
    line-height:1.7;
    margin:0;
}
/* ===================================================
   VALUES RESPONSIVENESS
=================================================== */
@media (max-width: 1024px) {

    .values-grid {
        gap: 1.5rem;
    }

    .value-card {
        padding: 1.75rem;
    }
}

@media (max-width: 768px) {

    .values-section {
        padding: 3rem 1rem;
    }

    .values-section .section-header {
        margin-bottom: 2rem;
    }

    .we-work {
        font-size: 2rem;
    }

    .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
    }

    .value-card {
        padding: 1.5rem;
    }

    .value-card h3 {
        font-size: 1.2rem;
    }

    .value-card p {
        font-size: .95rem;
    }
}

@media (max-width: 480px) {

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

    .we-work {
        font-size: 1.75rem;
    }

    .value-card {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .value-card p {
        font-size: .9rem;
        line-height: 1.6;
    }
}
.value-card {
    position: relative;
    overflow: hidden;
}
/* ===================================================
   APPROACH
=================================================== */
/* ==========================================
   OUR MODEL SECTION ACCENT
========================================== */
.approach-detail-grid {
    position: relative;
    overflow: hidden;
    padding: 3rem;
    border-radius: 1.5rem;
}
/* Orange corner accent */
.approach-detail-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg,var(--accent),#ffb347);
    border-bottom-right-radius: 100%;
    opacity: 0.15;
    z-index: 0;
}
/* Keep cards above accent */

.approach-detail-card {
    position: relative;
    z-index: 1;
}
.content-section{
    background: #f8fafc;
}
.approach-detail-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.approach-detail-card {
    background: white;
    padding: 2.5rem;
    border-radius: 1.25rem;
    text-align: center;
    box-shadow:0 15px 35px rgba(0, 0, 0, .06);
    transition: .35s ease;
}
.approach-detail-card:hover {
    transform: translateY(-10px);
}
.approach-number {
    width: 70px;
    height: 70px;
    margin: auto auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
}
.approach-number.navy {
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
}
.approach-number.orange {
    background: rgba(249, 115, 22, .15);
    color: #f97316;
}
/* ===================================================
   APPROACH RESPONSIVENESS
=================================================== */
@media (max-width: 1024px) {

    .approach-detail-grid {
        padding: 2rem;
        gap: 1.5rem;
    }

    .approach-detail-card {
        padding: 2rem;
    }

    .approach-detail-grid::before {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 768px) {

    .approach-detail-grid {
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .approach-detail-card {
        padding: 1.75rem;
    }

    .approach-number {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {

    .approach-detail-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        border-radius: 1rem;
    }

    .approach-detail-grid::before {
        width: 120px;
        height: 120px;
    }

    .approach-detail-card {
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .approach-detail-card h3 {
        font-size: 1.15rem;
    }

    .approach-detail-card p {
        font-size: .9rem;
        line-height: 1.6;
    }

    .approach-number {
        width: 55px;
        height: 55px;
        font-size: 1.1rem;
    }
}
/* TEAM */
/* ==========================================
   TEAM SECTION
========================================== */
.team-section {
    padding:7rem 0;
    background:linear-gradient(135deg,#f8fafc,#ffffff);
}
.team-section .container {
    max-width:100%;
    margin:auto;
    padding:0 1.5rem;
}
/* Heading */
.team-section h2 {
    text-align:center;
    color:var(--primary);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    margin-bottom:3.5rem;
}
.team-section h2::after {
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:var(--accent);
    margin:1rem auto 0;
    border-radius:20px;
}
/* GRID */
/* .team-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:2rem;
} */
 .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
/* CARD */
.team-card {
    background:white;
    border-radius:1.5rem;
    overflow:hidden;
    position:relative;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s ease;
}
/* Accent top border */
.team-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--accent),#2563eb);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}
.team-card:hover::before {
    transform:scaleX(1);
}
.team-card:hover {
    transform:translateY(-12px);
    box-shadow:0 25px 55px rgba(0,0,0,.15);
}
/* IMAGE */
.team-photo {
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:.5s ease;
    padding:0;
    border-radius:0;

    /* padding: 20px;
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
    transition:.5s ease;
    border-radius: 50%; */
}
.team-card:hover .team-photo {
    transform:scale(1.05);
}
/* INFO */
.team-info {
    padding:1.5rem;
    text-align:center;
}
.team-info h3 {
    /* color:var(--primary);
    font-size:1.35rem;
    font-weight:800;
    margin-bottom:.5rem; */

    color:var(--primary);
    font-size:1.25rem;
    font-weight:800;
    margin-bottom:.35rem;
}
/* Role */
.team-role {
    color:var(--accent);
    font-weight:700;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin-bottom:1rem;
}
/* Bio */
.team-bio {
    color:var(--text-muted);
    line-height:1.7;
    font-size:.95rem;
}
.team-section h2 {
    position: relative;
    display: inline-block;
    margin-top: 3rem;
}
/* Orange notch */
.team-section h2::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-top: 45px solid var(--accent);
}
.teams{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -50px;
    margin-bottom: 25px;
}
.teams p{
    color: var(--text-muted);
    text-align: center;
    margin-top: -50px;
}

.team-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 58, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
    z-index: 2;

    overflow-y: auto;
}

.team-card:hover .team-overlay {
    opacity:1;
    visibility:visible;
}

.overlay-content {
    text-align:center;
    color:white;
    transform:translateY(20px);
    transition:.4s ease;
}

.team-card:hover .overlay-content {
    transform:translateY(0);
}

.overlay-content h4 {
    /* font-size:1.3rem; */
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin-bottom:1rem;
    color:white;
    font-weight:700;
}

.overlay-content p {
    /* line-height:1.8;
    font-size:.95rem; */
    line-height: 1.6;
    font-size: clamp(.85rem, 1.8vw, .95rem);
    color:rgba(255,255,255,.9);
}
/* Mobile */
@media(max-width:768px){
    .team-section {
        padding:5rem 0;
    }
    .team-photo {
        height:250px;

    }
}
/* tablet breakpoint */
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-photo {
        height: 280px;
    }
}
/* ==========================================
   LINKEDIN BUTTON
========================================== */
.linkedin-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.65rem 1.2rem;
    border-radius:999px;
    background:#0077b5;
    color:white;
    text-decoration:none;
    font-size:.85rem;
    font-weight:700;
    transition:.35s ease;
}
.linkedin-btn i {
    font-size:1.1rem;

}
.linkedin-btn:hover {
    background:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}
/* ===================================================
   ABOUT TIMELINE - History
=================================================== */
.timeline-band {
    background: #f8fafc;
}
.about-timeline {
    max-width: 900px;
    margin: auto;
    position: relative;
}
.about-timeline::before {
    content: "";
    position: absolute;
    left: 80px;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
}
.about-timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.about-timeline-year {
    min-width: 80px;
    font-weight: 800;
    color: var(--accent);
    font-size: 1.25rem;
}
.about-timeline-content {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    flex: 1;
    box-shadow:0 10px 25px rgba(0, 0, 0, .06);
}
@media(max-width:768px) {
    .split-feature {
        grid-template-columns: 1fr;
    }
    .about-timeline::before {
        display: none;
    }
    .about-timeline-item {
        flex-direction: column;
        gap: .75rem;
    }
}
@media (max-width: 768px) {

    .team-section {
        padding: 4rem 0;
    }

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

    .team-photo {
        height: 280px;
    }

    .team-info {
        padding: 1.25rem;
    }

    .team-info h3 {
        font-size: 1.1rem;
    }

    .team-role {
        font-size: .8rem;
    }

    .team-overlay {
        padding: 1.25rem;
    }

    .overlay-content h4 {
        font-size: 1rem;
    }

    .overlay-content p {
        font-size: .85rem;
        line-height: 1.5;
    }

    .linkedin-btn {
        width: 100%;
    }
}
/* extra small phones */
@media (max-width: 480px) {

    .team-photo {
        height: 240px;
    }

    .overlay-content {
        max-height: 90%;
        overflow-y: auto;
    }

    .overlay-content p {
        font-size: .8rem;
    }

    .team-section .container {
        padding: 0 1rem;
    }
}
/* ==========================================================
   3. IMPACT PAGE
   Premium Impact / Storytelling Design
============================================================================================================= */
/* =========================
   IMPACT HERO
========================= */
.impact-hero {
    position: relative;
    padding: 7rem 0 5rem;
    background:linear-gradient(135deg,rgba(8, 27, 52, 0.96),rgba(8, 27, 52, 0.85));
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.impact-hero::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: var(--accent);
    opacity: .12;
    border-radius: 50%;
    top: -120px;
    right: -100px;
}
.story-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}
.impact-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-weight: 800;
}
.impact-hero p {
    color: rgba(255,255,255,.82);
    font-size: 1.1rem;
    max-width: 620px;
    line-height: 1.8;
}
/* Buttons */
.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}
.btn {
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    transition: .3s ease;
}
.btn.primary {
    background: var(--accent);
    color: white;
}
.btn.primary:hover {
    transform: translateY(-4px);
    background: var(--accent-hover);
}
.btn.secondary {
    border: 1px solid rgba(255,255,255,.4);
    color: white;
}
.btn.secondary:hover {
    background:white;
    color:var(--navy-blue);
}
/* =========================
   DONATION FLOW CARD
========================= */
.donation-flow-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 25px;
    border:1px solid rgba(255,255,255,.15);

    box-shadow:
    0 25px 60px rgba(0,0,0,.25);
}
.donation-flow-card h3 {
    color:white;
    font-size:1.5rem;
    margin-bottom:2rem;
}
.flow-step {
    display:flex;
    gap:1rem;
    align-items:flex-start;
    margin-bottom:1.5rem;
}
.flow-step span {
    min-width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--accent);
    color:white;
    font-weight:800;
}
.flow-step p {
    margin:0;
    font-size:.95rem;
}
/* =========================
   IMPACT SHOWCASE
========================= */
.impact-showcase {
    padding:6rem 0;
    background:var(--background-light);
}
.impact-container {
    width:min(1200px,90%);
    margin:auto;
}
.section-header {
    text-align:center;
    max-width:750px;
    margin:auto;
    margin-bottom:4rem;
}
.section-header h2 {
    font-size:clamp(2rem,4vw,3rem);
    color:var(--navy-blue);
    font-weight:800;
}
.section-description {
    color:#666;
    line-height:1.8;
}
/* =========================
   VIDEO STORY CARD
========================= */
.impact-video-card {
    position:relative;
    height:520px;
    overflow:hidden;
    margin-bottom:4rem;
    box-shadow:0 30px 70px rgba(0,0,0,.18);
}
.impact-video-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
}
.impact-video-card:hover img {
    transform:scale(1.08);
}
.video-overlay {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:3rem;
    background:linear-gradient(transparent,rgba(0,0,0,.85));
}
.play-btn {
    width:70px;
    height:70px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:white;
    font-size:1.5rem;
    margin-bottom:auto;
    cursor:pointer;
}
.video-content h3 {
    color:white;
    font-size:2rem;
}
.video-content p {
    color:white;
    max-width:650px;
}
/* =========================
   STATISTICS CARDS
========================= */
.impact-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}
.impact-item {
    background:white !important;
    border-radius:25px !important;
    padding:2rem !important;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}
.impact-item::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    height:5px;
    width:0;
    background:var(--accent);
    transition:.35s ease;
}
.impact-item:hover::before {
    width:100%;
}
.impact-item:hover {
    transform:translateY(-10px);
}
.icon {
    width:60px;
    height:60px;
    margin:auto;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:rgba(0,123,255,.1);
    color:var(--primary);
    font-size:1.5rem;
}
.impact-item h3 {
    font-size:2.8rem;
    color:var(--navy-blue);
    margin:1rem 0 .5rem;
}
.impact-item p {
    color:#666;
}
/* =========================
   QUOTE CARD
========================= */
.impact-quote {
    background:linear-gradient(135deg,var(--accent-hover),var(--accent)) !important;
    padding:3rem !important;
    border-radius:30px !important;
    box-shadow:0 25px 60px rgba(0,0,0,.2);
}
.quote-icon {
    font-size:2rem;
}
blockquote {
    font-size:1.5rem;
    line-height:1.7;
}
.quote-author {
    display:flex;
    align-items:center;
    gap:1rem;
    margin-top:2rem;
}
.quote-author img {
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid white;
}
/* =========================
   TESTIMONIALS
========================= */
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}
.testimonial-card {
    background:white;
    padding:2rem;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.3s ease;
}
.testimonial-card:hover {
    transform:translateY(-8px);
    border-top:4px solid var(--accent);
}
.testimonial-card p {
    color:#555;
    line-height:1.8;
    font-style:italic;
}
.testimonial-card strong {
    display:block;
    margin-top:1.5rem;
    color:var(--navy-blue);
}
.testimonial-card span {
    color:#777;
}
/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){
.story-hero-grid,
.impact-grid,
.testimonials-grid{
grid-template-columns:1fr;

}
.impact-video-card{
    height:420px;
}
}
@media(max-width:600px){
.impact-hero{
    padding:5rem 0;
}
.hero-buttons{
    flex-direction:column;
}
.video-overlay{
    padding:1.5rem;
}
.video-content h3{
    font-size:1.5rem;
}
blockquote{
    font-size:1.1rem;
}
}
/* ==================================================
   6. PARTNERS PAGE
======================================================================================================== */
/* Hero */
.hero-get-involved {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient( rgba(7, 28, 63, 0.82), rgba(7, 28, 63, 0.82) );
}
.hero-get-involved::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: rgba(255, 122, 0, 0.15);
    border-radius: 50%;
    top: -80px;
    right: -80px;
    filter: blur(30px);
}
.hero-get-involved::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(255, 122, 0, 0.1);
    border-radius: 50%;
    bottom: -70px;
    left: -70px;
    filter: blur(25px);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    padding: 2rem;
}
.hero-content h1 {
    color: var(--white);
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    margin-bottom: 1rem;
    line-height: 1.1;
}
.hero-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    max-width: 650px;
    margin: 0 auto;
}
/* ==================================================
   SECTION TITLES
================================================== */
.section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}
.section-title::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 70px;
    height: 5px;
    background: var(--accent-color);
    border-radius: 999px;
}
.text-center .section-title::before {
    left: 50%;
    transform: translateX(-50%);
}
.section-text {
    max-width: 800px;
    margin: auto;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ==================================================
   PARTNER GRIDS
================================================== */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.partners-grid.featured {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* ==================================================
   PARTNER CARDS
================================================== */
.partner-card {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}
.partner-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: transparent;
    transition: all 0.3s ease;
}
.partner-card:hover::before {
    background: var(--accent-color);
}
.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}
/* Featured Card */
.partner-card.featured {
    padding: 2.5rem;
    border: none;
    background:linear-gradient(180deg,#ffffff,#fafcff);
}
.partner-card.featured::after {
    content: "Featured";
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--accent-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 2.5rem;
    transform: rotate(45deg);
    letter-spacing: 1px;
}
/* ==================================================
   LOGOS
================================================== */
.partner-logo {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.partner-logo img {
    max-width: 220px;
    max-height: 120px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.partner-card:hover .partner-logo img {
    transform: scale(1.05);
}
.partner-logo-small {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.partner-logo-small img {
    max-width: 150px;
    max-height: 70px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.partner-card:hover .partner-logo-small img {
    transform: scale(1.08);
}
/* ==================================================
   CONTENT
================================================== */
.partner-name {
    color: var(--navy-blue);
    margin-bottom: 0.75rem;
}
.partner-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: rgba(255,122,0,0.1);
    color: var(--accent-color);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.partner-description,
.partner-description-short {
    color: var(--text-light);
    line-height: 1.8;
}
.partner-description {
    margin-bottom: 1.5rem;
}
.partner-description-short {
    margin-bottom: 1rem;
}
/* ==================================================
   META
================================================== */
.partner-meta {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.partner-since {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
/* ==================================================
   LINKS
================================================== */
.partner-link,
.partner-link-small {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.partner-link:hover,
.partner-link-small:hover {
    letter-spacing: 0.5px;
}
/* ==================================================
   CTA SECTION
================================================== */
.cta-box {
    position: relative;
    background:linear-gradient(135deg, var(--navy-blue),#0f3b7a);
    color: white;
    border-radius: 24px;
    padding: 4rem;
    text-align: center;
    overflow: hidden;
}
.cta-box::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    top: -120px;
    right: -120px;
}
.cta-box h2 {
    color: white;
}
.cta-box p {
    color: rgba(255,255,255,0.85);
    max-width: 750px;
    margin: auto;
}
/* Benefits */
.partnership-benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}
.benefit-item {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    font-weight: 500;
}
.benefit-item::before {
    content: "✓";
    color: var(--accent-color);
    margin-right: 0.5rem;
    font-weight: 700;
}
/* CTA Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.cta-buttons .btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
}
.cta-buttons .btn-primary:hover {
    transform: translateY(-3px);
}
.cta-buttons .btn-outline {
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
}
.cta-buttons .btn-outline:hover {
    background: white;
    color: var(--navy-blue);
}
/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 768px) {

    .hero-get-involved {
        min-height: 45vh;
    }

    .cta-box {
        padding: 2.5rem 1.5rem;
    }

    .partners-grid.featured {
        grid-template-columns: 1fr;
    }

    .partner-card.featured {
        padding: 2rem;
    }

    .partnership-benefits {
        flex-direction: column;
        align-items: center;
    }
}

/* ===================================================
   4. CONTACT PAGE
============================================================================================================ */

/* ==========================================
   CONTACT HERO
========================================== */
.contact-hero {
    position: relative;
    overflow: hidden;
    background:linear-gradient(135deg, rgba(4,30,66,.95), rgba(4,30,66,.80)), url("/static/images/training.a2ed6c5286f0.jpg");
    background-size: cover;
    background-position: center;
}
.contact-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: rgba(249,115,22,.12);
    border-radius: 50%;
    transform: translate(30%, -30%);
}
.contact-hero .story-hero-grid {
    position: relative;
    z-index: 2;
}
/* ==========================================
   CONTACT INFO PANEL
========================================== */
.contact-info-panel {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(15px);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 1.5rem;
    padding: 2rem;
    display: grid;
    gap: 1.5rem;
    box-shadow:0 25px 50px rgba(0,0,0,.18);
}
.contact-info-panel > div {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    border-radius: 1rem;
    background:rgba(255,255,255,.05);
    transition: .3s ease;
}
.contact-info-panel > div:hover {
    background: rgba(255,255,255,.10);
    transform: translateX(8px);
}
.contact-info-panel i {
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: .4rem;
}
.contact-info-panel strong {
    color: white;
    font-size: 1rem;
}
.contact-info-panel span {
    color: rgba(255,255,255,.85);
}
/* ==========================================
   CONTACT FORM SECTION
========================================== */
.contact-form-section {
    padding: 7rem 0;
    background:linear-gradient(135deg,#f8fafc,#ffffff);
}
.contact-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 4rem;
    align-items: start;
}
/* ==========================================
   LEFT CONTENT
========================================== */
.contact-side-copy h2 {
    color: var(--primary);
    margin: 1rem 0;
    font-size:clamp(2rem,4vw,3rem);
}
.contact-side-copy p {
    color: var(--text-muted);
    line-height: 1.8;
}
/* ==========================================
   MINI CARDS
========================================== */
.contact-mini-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.contact-mini-cards span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    background: white;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition: .3s ease;
}
.contact-mini-cards span:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-3px);
}
/* ==========================================
   FORM CARD
========================================== */
.contact-form-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}
.contact-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background:linear-gradient(90deg,var(--accent),#2563eb);
}
/* ==========================================
   FORM LAYOUT
========================================== */
.form-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem;
}
.form-group {
    margin-bottom: 1.5rem;
}
.form-label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
    color: var(--primary);
}
/* Django fields */
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid #dbe2ea;
    border-radius: .9rem;
    background: #f8fafc;
    transition: .3s ease;
}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: white;
    box-shadow:0 0 0 4px rgba(249,115,22,.12);
}
.contact-form-card textarea {
    min-height: 180px;
    resize: vertical;
}
/* ==========================================
   BUTTON
========================================== */
.contact-form-card .btn.primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}
.contact-form-card .btn.primary:hover {
    transform: translateY(-3px);
    box-shadow:0 15px 30px rgba(0,0,0,.15);
}
/* ==========================================
   FAQ SECTION
========================================== */
.faq-section {
    padding: 7rem 0;
    background: white;
}
.faq-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap: 2rem;
}
.faq-grid article {
    background: white;
    border-radius: 1.25rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    transition: .35s ease;
}
.faq-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s ease;
}
.faq-grid article:hover::before {
    transform: scaleX(1);
}
.faq-grid article:hover {
    transform: translateY(-8px);
    box-shadow:0 25px 45px rgba(0,0,0,.12);
}
.faq-grid h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}
.faq-grid p {
    color: var(--text-muted);
    line-height: 1.7;
}
/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-info-panel {
        margin-top: 2rem;
    }
}
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .contact-form-card {
        padding: 2rem;
    }
    .contact-form-section,
    .faq-section {
        padding: 5rem 0;
    }
}
/* ===================================================
   CONTACT CONFIRMATION PAGE
=================================================== */
.modal-overlay {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:linear-gradient(135deg, rgba(4,30,66,.94), rgba(4,30,66,.82)),url("/static/images/cyberclass.7f8b3c617220.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* Decorative glow */
.modal-overlay::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(249,115,22,.12);
    border-radius: 50%;
    top: -180px;
    right: -120px;
}
.modal-overlay::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    bottom: -120px;
    left: -80px;
}
/* ===================================================
   CONFIRMATION CARD
=================================================== */
.confirmation-modal {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 750px;
    padding: 4rem 3rem;
    text-align: center;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 2rem;
    box-shadow:0 30px 60px rgba(0,0,0,.25);
    animation: fadeUp .6s ease;
}
/* ===================================================
   SUCCESS ICON
=================================================== */
.confirmation-modal::before {
    content: "✓";
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 2.5rem;
    font-weight: 800;
    box-shadow:0 15px 35px rgba(249,115,22,.35);
}
/* ===================================================
   TYPOGRAPHY
=================================================== */
.confirmation-title {
    color: white;
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
}
.confirmation-text {
    max-width: 600px;
    margin: 0 auto 2rem;
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    line-height: 1.8;
}
/* ===================================================
   BUTTONS
=================================================== */
.confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.confirmation-actions .btn-primary {
    background: var(--accent);
    color: white;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: .35s ease;
}
.confirmation-actions .btn-primary:hover {
    transform: translateY(-4px);
    box-shadow:0 15px 35px rgba(249,115,22,.35);
}
.confirmation-actions .btn-outline {
    background: white;
    color: var(--primary);
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: .35s ease;
}
.confirmation-actions .btn-outline:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-4px);
}
/* ===================================================
   SOCIAL SECTION
=================================================== */
.social-follow {
    padding-top: 2rem;
    border-top:1px solid rgba(255,255,255,.15);
}
.social-follow p {
    color: white;
    font-weight: 600;
    margin-bottom: .75rem;
}
.social-links {
    color: rgba(255,255,255,.75);
    line-height: 1.7;
}
/* ===================================================
   ANIMATION
=================================================== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===================================================
   MOBILE
=================================================== */
@media (max-width: 768px) {
    .confirmation-modal {
        padding: 3rem 1.5rem;
    }
    .confirmation-actions {
        flex-direction: column;
    }
    .confirmation-actions a {
        width: 100%;
    }
    .confirmation-title {
        font-size: 2rem;
    }
}

/* ===================================================
   5. BLOG PAGE
=============================================================================================================================*/
/* ===================================================
   BLOG HERO
=================================================== */
.blog-hero-modern {
    position: relative;
    padding: 8rem 0;
    text-align: center;
    overflow: hidden;
    background:linear-gradient(135deg,rgba(4,30,66,.95),rgba(4,30,66,.80)),url("/static/images/training.a2ed6c5286f0.jpg");
    background-size: cover;
    background-position: center;
}
.blog-hero-modern::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(249,115,22,.12);
    border-radius: 50%;
    top: -250px;
    right: -150px;
}
.blog-hero-modern .container {
    position: relative;
    z-index: 2;
}
.blog-hero-modern .eyebrow {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.blog-hero-modern h1 {
    color: white;
    font-size: clamp(2.5rem, 5vw, 4rem);
    max-width: 900px;
    margin: 0 auto 1rem;
}
.blog-hero-modern p {
    color: rgba(255,255,255,.85);
    font-size: 1.1rem;
}
/* ===================================================
   BLOG SECTION
=================================================== */
.blog-index-section {
    padding: 6rem 0;
    background: #f8fafc;
}
/* ===================================================
   FILTERS
=================================================== */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
}
.blog-filters a {
    padding: .75rem 1.4rem;
    border-radius: 999px;
    background: white;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    transition: .3s ease;
}
.blog-filters a:hover,
.blog-filters a.active {
    background: var(--accent);
    color: white;
    transform: translateY(-3px);
}
/* ===================================================
   FEATURED ARTICLE
=================================================== */
.featured-blog-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: white;
    border-radius: 2rem;
    overflow: hidden;
    padding: 2rem;
    margin-bottom: 5rem;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.featured-blog-modern img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 1.5rem;
    transition: .5s ease;
}
.featured-blog-modern:hover img {
    transform: scale(1.03);
}
.featured-blog-modern h2 {
    color: var(--primary);
    font-size: clamp(2rem,3vw,2.8rem);
    margin-bottom: 1rem;
    line-height: 1.3;
}
.featured-blog-modern p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
/* ===================================================
   CATEGORY BADGE
=================================================== */
.blog-category {
    display: inline-flex;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(249,115,22,.12);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}
/* ===================================================
   META
=================================================== */
.blog-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    color: #64748b;
    font-size: .9rem;
}
/* ===================================================
   BLOG GRID
=================================================== */
.blog-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap: 2rem;
}
/* ===================================================
   BLOG CARD
=================================================== */
.blog-card {
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.07);
    transition: .35s ease;
    position: relative;
}
.blog-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background:
    linear-gradient(90deg,var(--accent), #2563eb);
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s ease;
}
.blog-card:hover::before {
    transform: scaleX(1);
}
.blog-card:hover {
    transform: translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}
.blog-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.blog-card-content {
    padding: 1.75rem;
}
.blog-card-content h3 {
    color: var(--primary);
    margin: 1rem 0 .75rem;
    line-height: 1.4;
}

.blog-card-content p {
    color: var(--text-muted);
    line-height: 1.7;
}
/* ===================================================
   READ MORE LINK
=================================================== */
.blog-read-more {
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    transition: .3s ease;
}
.blog-read-more:hover {
    transform: translateX(6px);
}
/* ===================================================
   EMPTY STATE
=================================================== */
.empty-blog {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem;
    background: white;
    border-radius: 1.5rem;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
}
.empty-blog h2 {
    color: var(--primary);
    margin-bottom: 1rem;
}
.empty-blog p {
    color: var(--text-muted);
}
/* ===================================================
   MOBILE
=================================================== */
@media (max-width: 992px) {
    .featured-blog-modern {
        grid-template-columns: 1fr;
    }
    .featured-blog-modern img {
        height: 320px;
    }
}
@media (max-width: 768px) {
    .blog-index-section {
        padding: 4rem 0;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .featured-blog-modern {
        padding: 1.5rem;
    }
}
/* ================= BLOG DETAIL ================= */
/* =====================================================
   BLOG DETAIL PAGE
======================================================================================================== */
.blog-detail-modern {
    padding: 5rem 0 3rem;
    background: var(--white);
}
.blog-detail-modern .narrow {
    max-width: 900px;
}
/* Back button */
.blog-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    color: var(--navy-blue);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}
.blog-back:hover {
    color: var(--accent-color);
    transform: translateX(-4px);
}
/* Category badge */
.blog-detail-modern .blog-category {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 170, 120, .1);
    color: var(--accent-color);
    padding: .45rem 1rem;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
/* Main title */
.blog-detail-modern h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.12;
    color: var(--navy-blue);
    font-weight: 800;
    margin-bottom: 1.2rem;
    letter-spacing: -0.03em;
}
/* Meta information */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    color: var(--text-muted);
    font-size: .95rem;
}
.blog-meta span {
    display:flex;
    align-items:center;
    gap:.5rem;
}
.blog-meta span:first-child::before {
    content:"✦";
    color:var(--accent-color);
}
/* Featured image */
.blog-detail-image {
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:24px;
    margin-bottom:3rem;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}
/* Article content */
.blog-prose {
    font-size:1.12rem;
    line-height:1.9;
    color:#344054;
}
.blog-prose p {
    margin-bottom:1.5rem;
}
.blog-prose h2,
.blog-prose h3 {
    color:var(--navy-blue);
    margin-top:2.5rem;
    margin-bottom:1rem;
    font-weight:750;
}
/* =====================================================
   RELATED POSTS SECTION
===================================================== */
.blog-section {
    padding:5rem 0;
    background:#f8fafc;
}
.blog-section .section-header {
    text-align:center;
    margin-bottom:3rem;
}
.blog-section .section-header h2 {
    font-size:2.4rem;
    color:var(--navy-blue);
}
/* Blog grid */
.blog-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}
/* Related card */
.blog-card {
    background:var(--white);
    border-radius:22px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(0,0,0,.06);
    transition:
    transform .35s ease,
    box-shadow .35s ease;
}
.blog-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    height:4px;
    width:0;
    background:var(--accent-color);
    transition:.35s ease;
}
.blog-card:hover::before {
    width:100%;
}
.blog-card:hover {
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.12);
}
/* Card image */
.blog-card img {
    width:100%;
    height:230px;
    object-fit:cover;
}
/* Card body */
.blog-card-content {
    padding:1.8rem;

}
.blog-card-content h3 {
    font-size:1.35rem;
    line-height:1.3;
    color:var(--navy-blue);
    margin:.8rem 0;
}
.blog-card-content p {
    color:#667085;
    line-height:1.7;
    margin-bottom:1.3rem;
}
/* Read more */
.blog-read-more {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--accent-color);
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}
.blog-read-more:hover {
    gap:.8rem;
}
/* =====================================================
   MOBILE RESPONSIVE
===================================================== */
@media(max-width:768px){
.blog-detail-modern {
    padding:3rem 0;
}
.blog-detail-modern h1 {
    font-size:2rem;
}
.blog-detail-image {
    height:280px;
    border-radius:18px;
}
.blog-prose {
    font-size:1rem;
}
.blog-meta {
    gap:.8rem;
}
}