/* --- VARIABLES --- */
:root {
    /*--font-gothambook: 'Gotham', sans-serif;*/
    --font-gothambook: "Roboto", sans-serif;
    --font-basefont: "Roboto", sans-serif;
    --yellow: #FDD106;
    --light-yellow: #FFE157;
    --purple: #8B297E; 
    --purple-dark: #6a1b54;
    --blue: #005C9F;
    --text-dark: #333333;
    --text-gray: #4a4a4a;
    --light-gray: #E7E7E7;
    --bg-light: #f9f9f9;
    --p-fontsize: 1.35em;
    --p-lineheight: 1.7em;
    --p-fontsize2: 1.2em;
    --p-lineheight2: 1.5em;
    --p-padding: 80px;
}

/* --- GOTHAM FONT DECLARATIONS --- */

/* 1. Gotham Book (Regular - Weight 400) */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Book.woff2') format('woff2'),
         url('../fonts/Gotham-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Performance: Show fallback text immediately */
}

/* 2. Gotham Medium (Medium - Weight 500) */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Medium.woff2') format('woff2'),
         url('../fonts/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* 3. Gotham Bold (Bold - Weight 700) */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Bold.woff2') format('woff2'),
         url('../fonts/Gotham-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Black.woff2') format('woff2'),
        url('../fonts/Gotham-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

a { color: inherit; text-decoration: none; }

h1,h2,h3{font-family: var(--font-gothambook); font-size: 2.8em; font-weight: 800;}
p{font-size: var(--p-fontsize); line-height: var(--p-lineheight);}
.yellowText{color: var(--yellow);}



img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}


/* --- RESET & UTILS --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-basefont); color: var(--text-dark); overflow-x: hidden; background: #000; }
img { display: block; max-width: 100%; height: auto; }
.headingCtnr h2{margin: 0em 1em 1em 1em;}
.headingCtnr h5{font-family: var(--font-gothambook); font-size: 1.2em; font-weight: 800; color: var(--purple); text-align: left; width: 75%; margin: 0 auto 1em auto;}
.section-heading{font-size: 2.8rem; margin-bottom: var(--p-padding);}
.headingCtnr p{font-size: var(--p-fontsize); line-height: var(--p-lineheight); width: 78%; margin: 0 auto;}
.text-link{color: var(--text-dark); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; text-decoration: none; border-bottom: 2px solid var(--yellow); letter-spacing: 1px; word-spacing: 2px;}

.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.container.fullWidth{max-width: 100%; padding: 0;}
.text-center { text-align: center; }
.bold { font-weight: 700; }

.btn {
    display: inline-block; padding: 14px 32px;
    background: var(--yellow); color: #333;
    font-weight: 700; text-transform: uppercase; text-decoration: none;
    border-radius: 4px; font-size: 0.9rem; letter-spacing: 0.5px;
    transition: transform 0.2s;
    font-family: var(--font-gothambook); font-weight: 700;
}
.btn:hover { transform: translateY(-2px); }

/* --- 1. FIXED HERO (Underlayer) --- */
.fixed-hero-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    object-fit: cover; z-index: -10;
}
.hero-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 100%);
    z-index: -2;
}

small{font-size: 0.7em;}

/* --- 2. HEADER --- */
header {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: 20px 0; transition: background 0.3s;
}
header.scrolled { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); padding: 15px 0; }
header.scrolled .logo img{filter: none;}
header.scrolled .logo img { display: block; max-width: 100%; height: auto; }
header.scrolled .nav-links a{color: #111;}

.nav-inner { display: flex; justify-content: space-between; align-items: center; }

.logo { color: white; text-decoration: none; font-weight: 800; font-size: 1.1rem; line-height: 1.1; text-transform: uppercase; width:180px; }
.logo img{filter: brightness(0) invert(1);}
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: white; text-decoration: none; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; opacity: 1; }

.badge { color: white; padding: 0; font-size: 0.8rem; width: 75px; position: fixed; bottom: 20px; right: 20px; z-index: 999;}
.badge img{width: 100%;}

/* --- 3. HERO CONTENT (Spacer) --- */
/* This is transparent so we see the fixed image behind it */
.hero-spacer {
    height: 100vh; width: 100%;
    display: flex; align-items: flex-end;
    padding-bottom: 80px; position: relative; z-index: 1;
}
.hero-text { color: white; max-width: 700px; margin-left: 5%; }
.hero-h1 { font-size: 4rem; line-height: 1.1; margin: 15px 0 30px; font-family: var(--font-gothambook); font-weight: 800;}

/* --- 4. MAIN SCROLL WRAPPER --- */
/* Everything below this point has a background color to cover the fixed image */
.main-content {
    position: relative; z-index: 2;
    
}

/* --- SECTION STYLES (Used in Templates) --- */
.section-pad { padding: 80px 0; }
.section-purple { background: var(--purple); color: white; }
.section-yellow { background: var(--yellow); color: var(--text-dark); }
.brush-stroke { 
    display: inline-block; position: relative; z-index: 1; 
}
.brush-stroke::after {
    content: ''; position: absolute; bottom: -30%; right: -30px; width: 239px; height: 15px; background: url(../images/brush-stroke.png) no-repeat top right; z-index: -1; opacity: 0.8; transform: skewX(-10deg); background-size: 100%;
}
.text-purple { color: var(--purple); }

/* Card Grids */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 50px auto 0 auto; width: 90%;}
.feature-card { border-radius: 12px; overflow: hidden; color: white; min-height: 380px; position: relative; padding: 0px; display: flex; flex-direction: column; justify-content: flex-end;
    perspective: 2000px; background: none;
}

/* 2. Inner Wrapper (The Moving Part) */
.feature-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    /* Smooth, premium easing (no bounce) */
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.6s ease;
    transform-style: preserve-3d;
}

/* FLIP TRIGGER */
.feature-card:hover .feature-card-inner {
    transform: rotateY(180deg);
    
}

/* 3. Shared Face Styles */
.card-front, .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    overflow: hidden;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* --- FRONT: Color Block --- */
.card-front {
    color: white;
    z-index: 2;
    transform: rotateY(0deg); /* Explicitly set start point */
}


/* --- BACK: Image + Title --- */
.card-back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Image Styling */
.card-back .card-img-abs {
    opacity: 1; /* Keep full brightness for premium look */
    z-index: 0;
    transition: transform 0.8s ease;
}

/* Optional: Slight zoom on image when flipped for extra polish */
.feature-card:hover .card-back .card-img-abs {
    transform: scale(1.1);
}

/* Dark overlay to ensure text is readable over image */
.card-back::after {
    
}
/* Content z-index adjustment */
.card-back h3, .card-back .card-title-lg {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    
}

/* Loading Animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }


.philosohy-points{display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; font-weight: 700; color: var(--yellow); font-size: 1.1rem; padding: 1em 0;}
.philosohy-points span{font-family: var(--font-gothambook); font-weight: 700; font-size: 1.5rem;}
.tmpl-philosophy h2{font-size: 2.5rem; margin-bottom: 40px;}
.tmpl-philosophy .container p{margin-top: 30px; opacity: 1; max-width: 800px; margin-left: auto; margin-right: auto; font-size: var(--p-fontsize); line-height: var(--p-lineheight);}

.video-training{position: relative; margin-top: var(--p-padding); width: 80%; margin-left: 26%; overflow: hidden;}
.video-training img, .video-training video{width: 100%; display: block; border-radius: 200px 0 0 0;}
.video-training iframe{position: absolute; top: 0; left: 0; width: 100%; height: 102.6%; border-radius: 100px 0 0 0; z-index: 1;}
.tmpl-training{padding-bottom:0;}
.tmpl-training .headingCtnr p{text-align: left; width: 75%; margin: 0 auto;}
.tmpl-training .training-copy{width: 75%; margin: 0 auto; text-align: left; font-size: var(--p-fontsize); line-height: var(--p-lineheight);}
.tmpl-training .headingCtnr .training-copy p{width: 100%; margin: 0; font-size: inherit; line-height: inherit;}
.tmpl-training .training-copy p + p,
.tmpl-training .training-more-copy{margin-top: 1em;}
.tmpl-training .training-more-copy[hidden]{display: none;}
.tmpl-training .training-read-toggle{
    display: block;
    width: fit-content;
    margin: 1.25em 0 0;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--purple);
    cursor: pointer;
    font-family: var(--font-gothambook);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}
.tmpl-training .training-read-toggle:focus-visible{outline: 2px solid currentColor; outline-offset: 4px;}

.tmpl-community h2{margin: var(--p-padding) 0 1em 0;}
.tmpl-community p{margin-bottom: 2em;}
.tmpl-community .text-link{margin-bottom:var(--p-padding); display: inline-block;}
.tmpl-community .img-auto-center{height: auto; margin: 3% auto 0 auto; left: -3%; max-width: 110%; position: relative;}


.tmpl-multidisciplinary .grid-1-col .img-auto-center{left: 0; height: auto; width: 90%; margin-bottom: 3em;}
.tmpl-multidisciplinary .grid-1-col p{width: 90%; margin: 0 auto 1em auto;}

/*Addition*/
/* --- EXTRACTED HELPERS --- */

/* Colors */
.text-purple { color: #83276b; } /* Or var(--purple) if defined */
.text-yellow { color: #FFD200; } /* Or var(--yellow) if defined */
.bg-white { background-color: white; }

/* Hero Helpers */
.hero-intro { font-size: 1.4rem; font-weight: 600; }

/* Card Components */
.card-img-abs {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
}
.card-content-rel {
    position: relative; z-index: 2;
}
.card-title-lg {
    font-size: 1.8rem; margin-bottom: 10px;
}
.card-title-lg.mb-15 { margin-bottom: 15px; }

.card-desc {
    font-size: var(--p-fontsize2); line-height: var(--p-lineheight2); opacity: 1; margin-bottom: auto;
    position: relative; z-index: 2;
}


/* Questions Section */
.questions-section {
    position: relative; padding: 100px 0; color: white; text-align: center;
}
.bg-cover-z-minus {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -1;
}
.overlay-dark-z0 {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 0;
}
.content-z1 {
    position: relative; z-index: 1;
}

/* Community Section */
.grid-2-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.h-100 { height: 100%; }
.img-auto-center {
    width: auto; height: 100%; margin: 0 auto;
}

/* Impact Section */
/* --- IMPACT SECTION DESIGN --- */
.bg-impact {
    background: var(--purple);
    color: white;
}

/* 1. Teal Brush Stroke Correction */
.brush-teal {
    position: relative;
    display: inline-block;
}
.brush-teal::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 12px;
    background: #00c1d4 !important; /* The Teal Color */
    opacity: 1;
    z-index: -1;
    transform: skewX(-10deg);
}

/* 2. The Grid & Vertical Lines */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px; /* Remove gap to make borders look right */
    margin-top: 60px;
    text-align: left;
}

.impact-grid .impact-item{
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 50px 20px;
    text-align: center;
    color: white;
    transition: transform 0.3s ease, background 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.impact-item {
    position: relative;
    padding: 40px 10px 40px 40px;
}

/* Remove border from the first item */
.impact-item:first-child, .impact-item:nth-child(4) {
    padding-left: 0;
}

/* 3. Typography */
.impact-number {
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 10px;
    color: white;
    /* Keeps numbers stable while rolling */
    font-variant-numeric: tabular-nums; 
}

.impact-number-wrapper{font-size: 4.5rem; font-weight: 900;}

.impact-label {
    font-size: var(--p-fontsize2); line-height: var(--p-lineheight2);
    opacity: 1;
    width: 80%;
}

/* --- FEATURED STORIES (MASONRY GRID) --- */

.tmpl-featured-stories .stories-masonry {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Left column slightly wider */
    gap: 30px;
    margin-top: 40px;
}

/* Common Image Styling */
.tmpl-featured-stories .story-img-wrapper {
    position: relative;
    border-radius: 15px; /* Matches the rounded look in image */
    overflow: hidden;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,0.1); /* Loading placeholder */
}

.tmpl-featured-stories img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

/* Hover Effect */
.tmpl-featured-stories .story-img-wrapper:hover img {
    transform: scale(1.05);
}

/* Typography */
.tmpl-featured-stories .story-caption {
    font-family: var(--font-gothambook); /* Assuming Gotham from your prev files */
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-dark);
    margin-top: 10px;
}

/* --- Layout Specifics --- */

/* Left Column (Large) */
.tmpl-featured-stories .story-large .story-img-wrapper {
    /* Height calculation to align with right stack:
       (200px * 2) + Gap + Text Allowance ~ 500px range 
       Adjust this value to match your actual image aspect ratios */
    height: 480px; 
}

/* Right Column (Stack) */
.tmpl-featured-stories .story-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}

.tmpl-featured-stories .story-small .story-img-wrapper {
    height: 200px; /* Fixed height for consistency */
}

/* --- BLOGS SECTION --- */

/* 1. Grid Layout */
.tmpl-blogs .blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

/* 2. Card Styling */
.tmpl-blogs .blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tmpl-blogs .blog-img-wrapper {
    border-radius: 16px; /* Rounded corners as shown */
    overflow: hidden;
    margin-bottom: 25px;
    aspect-ratio: 16 / 10; /* Rectangular landscape ratio */
}

.tmpl-blogs .blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.tmpl-blogs .blog-card:hover .blog-img {
    transform: scale(1.05);
}

/* 3. Typography */
.tmpl-blogs .blog-title {
    font-family: var(--font-gothambook);
    font-weight: 700; /* Bold title */
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.tmpl-blogs .blog-excerpt {
    font-family: var(--font-basefont);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 25px;
    opacity: 1;
}

/* 4. Purple Arrow Link */
.link-purple-arrow {
    display: inline-flex;
    align-items: center;
    color: #8B297E; /* Purple color from design */
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    margin-top: auto; /* Pushes link to bottom if cards vary in height */
    transition: color 0.3s ease;
}

.link-purple-arrow .arrow {
    font-size: 1.2rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.link-purple-arrow:hover {
    color: #6a1b54; /* Darker purple on hover */
}

.link-purple-arrow:hover .arrow {
    transform: translateX(5px); /* Arrow moves right on hover */
}

/* --- REPORTS SECTION (CAROUSEL) --- */

.tmpl-reports {
    overflow: hidden; /* Hide overflow from slider */
}

.tmpl-reports .relative-container {
    position: relative;
}

/* 1. Header & Navigation Positioning */
.tmpl-reports .reports-header {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    justify-content: center; /* Centers the heading */
    align-items: flex-end; /* Aligns arrows to bottom of text */
}

.tmpl-reports .reports-nav {
    position: absolute;
    right: 0;
    bottom: 10px; /* Align with the text baseline */
    display: flex;
    gap: 15px;
    z-index: 10;
}

/* 2. White Circle Arrows */
.nav-arrow-white {
    width: 45px;
    height: 45px;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-arrow-white:hover {
    background: white;
    color: var(--purple);
}

.nav-arrow-white.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* 3. Slider Styles */
.tmpl-reports .reports-slider {
    padding: 10px; /* Space for shadow/hover scale */
    margin: -10px; /* Counteract padding */
    overflow: visible; /* Let slides peek if needed, or set to hidden */
}

/* Card Styling (Same as before) */
.tmpl-reports .report-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 100%;
}

.tmpl-reports .report-img-wrapper {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    aspect-ratio: 1 / 1;
    aspect-ratio: 16 / 9;
    background: rgba(255,255,255,0.1);
}

.tmpl-reports .report-img-wrapper a{
    display: block;
    height: 100%;
}

.tmpl-reports .report-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}

.tmpl-reports .report-card:hover .report-img {
    transform: scale(1.05);
}

/* Typography (White Theme) */
.tmpl-reports .report-title {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.35;
    margin-bottom: 15px;
    color: white;
}

.tmpl-reports .report-excerpt {
    font-family: var(--font-basefont);
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
}

/* White Arrow Link */
.link-white-arrow {
    display: inline-flex; align-items: center;
    color: white; font-weight: 700; text-decoration: none;
    font-size: 1rem; margin-top: auto; transition: opacity 0.3s ease;
}
.link-white-arrow .arrow {
    font-size: 1.2rem; margin-left: 8px; transition: transform 0.3s ease;
}
.link-white-arrow:hover { opacity: 0.8; }
.link-white-arrow:hover .arrow { transform: translateX(5px); }

.tmpl-reports .container{overflow: hidden;}

#websiteTnc .blueHeading, #privacyPolicy .blueHeading{
    display: block;
    font-family: var(--font-gothambook);
    font-size: 1.2em;
    font-weight: 600;
    color: var(--purple);
    text-align: left;
    width: 100%;
    margin: 2em auto 1em auto;
}

/* --- COURSES SECTION --- */

.tmpl-courses .courses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.tmpl-courses .course-card {
    background: white;
    border-radius: 12px; /* Matches the rounded look in image */
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px; /* Ensures consistent height */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tmpl-courses .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.tmpl-courses .course-title {
    font-family: var(--font-gothambook);
    font-weight: 900; /* Bold as per image */
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 25px;
}

.tmpl-courses .course-card p {
    font-family: var(--font-basefont);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    opacity: 0.8;
    margin-bottom: 40px;
}

/* Align arrow to the left as per image */
.tmpl-courses .course-action {
    margin-top: auto;
}

/* Ensure the reused arrow class works as a link block */
.tmpl-courses .nav-arrow-black {
    display: inline-flex; /* Ensures it sits correctly */
    text-decoration: none;
}

.headingCtnr{position: relative;}
.viewAllLinks{position: absolute; font-size: 14px; text-decoration: underline; color: #83276b; top:20%; right: 5em; font-weight: 600;}
.disclaimerSm{font-size: small; margin-top: 5em; margin-bottom: 5em; line-height: 1.8em; opacity: 0.9;}
.mBot0{margin-bottom: 0;}

/* RESPONSIVE */

@media (min-width: 992px) {
    .desktop-disabled {
        pointer-events: none;
        cursor: default;
    }
}

@media (min-width: 1440px) {
    .tmpl-community .img-auto-center{left: -8%;}
}

@media (max-width: 900px) {
    .tmpl-courses .courses-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 20px;
    }
    
    .tmpl-courses .course-card {
        padding: 30px;
        min-height: auto;
    }
    
    .tmpl-courses .course-title {
        font-size: 1.5rem;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-reports .reports-nav {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        justify-content: center;
    }
    .tmpl-reports .reports-header {
        flex-direction: column;
        align-items: center;
    }

    .section-pad.tmpl-cta-saath{
        padding-bottom: 0;
    }
}

/* --- VIDEOS SECTION --- */

/* 1. Header & Layout */
.tmpl-videos .videos-header {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.tmpl-videos .videos-nav {
    position: absolute;
    right: 0;
    bottom: 10px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

/* 2. Black Navigation Arrows */
.nav-arrow-black {
    width: 45px;
    height: 45px;
    border: 1px solid var(--text-dark); /* Black Border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-arrow-black:hover {
    background: var(--text-dark);
    color: white;
}

.nav-arrow-black.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* 3. Video Card Styling */
.tmpl-videos .video-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tmpl-videos .video-thumb-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    aspect-ratio: 16 / 9; /* Video Ratio */
    background: #eee;
    cursor: pointer;
}

.tmpl-videos .video-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}

.tmpl-videos .video-thumb-wrapper:hover .video-img {
    transform: scale(1.05);
}

/* Play Button Overlay */
.tmpl-videos .play-btn-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.2); /* Slight dark tint */
    transition: background 0.3s;
}

.tmpl-videos .video-thumb-wrapper:hover .play-btn-overlay {
    background: rgba(0,0,0,0.1);
}

.tmpl-videos .play-icon {
    width: 60px; height: 60px;
    background: rgba(0,0,0,0.6);
    border-radius: 12px;
    color: white;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    padding-left: 4px; /* Visual center adjustment for triangle */
    transition: transform 0.3s;
}

.tmpl-videos .video-thumb-wrapper:hover .play-icon {
    transform: scale(1.1);
    background: rgba(139, 41, 126, 0.9); /* Turn purple on hover */
}

/* 4. Content Typography */
.tmpl-videos .video-title {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.tmpl-videos .video-excerpt {
    font-family: var(--font-basefont);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 25px;
}

/* Responsive */
@media (max-width: 768px) {
    .tmpl-videos .videos-header {
        flex-direction: column; align-items: center;
    }
    .tmpl-videos .videos-nav {
        position: relative; right: auto; bottom: auto; margin-top: 20px;
    }
}

/* --- MEDIA SECTION --- */

/* 1. Header & Layout (Matches Reports) */
.tmpl-media .media-header {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.tmpl-media .media-nav {
    position: absolute;
    right: 0;
    bottom: 10px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

/* 2. Media Card Styling */
.tmpl-media .media-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 100%;
}

.tmpl-media .media-img-wrapper {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    /* DIFFERENCE: Landscape Ratio (approx 16:10) instead of Square */
    aspect-ratio: 16 / 10; 
    background: rgba(255,255,255,0.1);
}

.tmpl-media .media-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}

.tmpl-media .media-card:hover .media-img {
    transform: scale(1.05);
}

/* 3. Typography (White) */
.tmpl-media .media-title {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.4rem; /* Slightly larger than reports */
    line-height: 1.3;
    margin-bottom: 20px;
    color: white;
}

/* Link reuse (White Arrow) */
.tmpl-media .link-white-arrow {
    margin-top: auto; 
}

/* Responsive */
@media (max-width: 768px) {
    .tmpl-media .media-header {
        flex-direction: column; align-items: center;
    }
    .tmpl-media .media-nav {
        position: relative; right: auto; bottom: auto; margin-top: 20px;
    }
}

/* --- CTA SAATH-SAATH SECTION --- */

.tmpl-cta-saath {
    /* Ensure the yellow background covers everything */
    background-color: var(--yellow); 
    padding-bottom: 0; /* Remove bottom padding so image sits flush if desired */
    overflow: hidden;
}

/* 1. Typography */
.tmpl-cta-saath .cta-heading {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 30px;
}

/* 2. The Purple Pill Button */
.tmpl-cta-saath .cta-btn-pill {
    display: inline-block;
    background-color: #8B297E; /* Purple */
    color: white;
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.5rem;
    padding: 12px 40px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    margin-bottom: 50px;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 5px 15px rgba(139, 41, 126, 0.3);
}

.tmpl-cta-saath .cta-btn-pill:hover {
    transform: translateY(-3px);
    background-color: #6a1b54; /* Darker purple */
}

/* 3. The Curved Image Container */
.tmpl-cta-saath .cta-image-container {
    width: 75%;
    max-width: 1100px; /* Limit width for aesthetics */
    margin: 0 0 0 auto;
    position: relative;
    
    /* The Magic Curve: Top-Left Corner */
    border-top-left-radius: 120px; 
    overflow: hidden;
    
    /* Ensure it acts as a block */
    display: block;
    line-height: 0; /* Removes gap at bottom of image */
}

.tmpl-cta-saath .cta-img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 300px; /* Ensure visibility on mobile */
    margin-bottom: -5px;
}

.padTopEqual{padding-top: var(--p-padding) !important;}
.padBotEqual{padding-top: var(--p-padding) !important;}
.marTopEqual{margin-top: var(--p-padding) !important;}
.marBotEqual{margin-bottom: var(--p-padding) !important;}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-cta-saath .cta-heading {
        font-size: 1.8rem;
    }
    
    .tmpl-cta-saath .cta-btn-pill {
        font-size: 1.2rem;
        padding: 10px 30px;
    }

    .tmpl-cta-saath .cta-image-container {
        border-top-left-radius: 60px; /* Smaller curve on mobile */
        width: 100%;
    }
}

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

@media (max-width: 768px) {
    .tmpl-blogs .blogs-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .tmpl-featured-stories .stories-masonry {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 40px;
    }

    .tmpl-featured-stories .story-large .story-img-wrapper {
        height: 300px; /* Smaller height on mobile */
    }

    .tmpl-featured-stories .story-small .story-img-wrapper {
        height: 220px;
    }
}

/* Mobile: Stack them and remove borders */
@media (max-width: 768px) {
    .impact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    .impact-item { border-left: none; }
    .impact-grid .impact-item { padding: 24px 16px; } /* S5 — must match desktop specificity (0,2,0) to override */
}

/* Footer */
.footer-main {
    background: #5a1245; color: white; padding: 60px 0;
}
.footer-copy {
    margin-top: 50px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem; opacity: 0.6;
}

/* Mobile Fixes for Grids */
@media(max-width: 768px) {
    .grid-2-col, .grid-3-col { grid-template-columns: 1fr; }
}
/* --- EXTRACTED HELPERS --- */

/* Colors */
.text-purple { color: #83276b; } /* Or var(--purple) if defined */
.text-yellow { color: #FFD200; } /* Or var(--yellow) if defined */
.bg-white { background-color: white; }
.bg-white.tmpl-blog-detail{padding-bottom: 1px;}

/* Hero Helpers */
.hero-intro { font-size: 1.4rem; font-weight: 600; }

/* Card Components */
.card-img-abs {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
}
.card-content-rel {
    position: relative; z-index: 2;
}
.card-title-lg {
    font-size: 1.8rem; margin-bottom: 10px;
}
.card-title-lg.mb-15 { margin-bottom: 15px; }

.card-desc {
    font-size: var(--p-fontsize2); line-height: var(--p-lineheight2); opacity: 1; margin-bottom: auto;
    position: relative; z-index: 2;
}

/* Card Arrows */
.card-arrow {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.card-arrow.white { background: white; color: #333; white; margin-top: 20px; position: relative; z-index: 2;}

.card-arrow.outline {
    border: 1px solid white; margin-top: 20px;
    position: relative; z-index: 2;
}

/* Questions Section */
.questions-section {
    position: relative; padding: 100px 0; color: white; text-align: center;
}
.bg-cover-z-minus {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -1;
}
.overlay-dark-z0 {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 0;
}
.content-z1 {
    position: relative; z-index: 1;
}

.questions-section h2.section-heading{margin-bottom: 30px;}

/* Community Section */
.grid-2-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.h-100 { height: 100%; }
.img-auto-center {
    width: auto; height: 100%; margin: 0 auto;
}

/* Footer */
.footer-main {
    background: #5a1245; color: white; padding: 60px 0;
}
.footer-copy {
    margin-top: 50px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem; opacity: 0.6;
}

/* --- STORIES SECTION --- */
.bg-blue-brand {
    background-color: #005C9F; /* Brand Blue */
    color: white;
}

/* Swiper Container */
.swiper.story-slider {
    padding-top: 50px;
    padding-bottom: 0; /* Space for pagination */
    overflow: hidden;
}

/* Slide Styling */
.story-card {
    position: relative;
    overflow: hidden;
    /* Aspect Ratio is handled via JS/CSS sizing, but this ensures height consistency */
    height: 75vh; 
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.9; /* Inactive slides are faded */
    transform: scale(1); /* Inactive slides are smaller */
}

.swiper.story-slider .swiper-pagination{bottom: 20px;}

/* The Active Slide (Center) */
.swiper-slide-active .story-card {
    opacity: 1;
    transform: scale(1); /* Active slide is full size */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); /* Premium shadow pop */
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 42%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0) 100%);
    padding: 30px;
}

.story-title {
    font-size: 1.8em; font-weight: 800; line-height: 1.5em; color: white; margin-bottom: 0.5em; width: 95%;
}

.story-overlay p{
    color: #fff;
}

.tmpl-promise.tmpl-partnerships .headingCtnr p{
    width: 90%;
    margin-bottom: 2em;
}

.tmpl-promise{padding-bottom: 0;}

.tmpl-multidisciplinary.twoblock-grid.tmpl-community .grid-2-col{
    align-items: flex-start;
}

.tmpl-multidisciplinary .headingCtnr{
    text-align: center;
}

/* Pagination Dots */
.swiper-pagination-bullet {
    background: rgba(255,255,255,0.5) !important;
    opacity: 1 !important;
    width: 10px; height: 10px;
}
.swiper-pagination-bullet-active {
    background: var(--yellow) !important;
    width: 30px !important;
    border-radius: 5px !important;
}

/* --- INSIGHTS SECTION --- */
.section-insights {
    background-color: white;
}

.section-insights .swiper-slide{border-radius: 20px; overflow: hidden;}

/* Slide/Card Styling */
.card-insight {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ECECEC;
}

.insightinfo-wrapper{
    width: 90%;
    margin:1em auto 2em auto;
}

.insight-img-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Standard article image ratio */
    margin-bottom: 25px;
}

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

.card-insight:hover .insight-img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.insight-meta {
    font-family: var(--font-basefont);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    opacity: 0.7;
    margin-bottom: 10px;
}

.insight-title {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.5em;
    color: var(--text-dark);
    margin-bottom: 15px;
    
    /* Force height to match 2 lines exactly */
    min-height: 3em; /* 1.3 line-height * 2 lines */
    
    /* Truncate after 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insight-excerpt {
    font-family: var(--font-basefont);
    font-size: var(--p-fontsize);
    line-height: var(--p-lineheight);
    color: var(--text-gray);
    margin-bottom: 25px;
    
    /* Force height to match 2 lines exactly */
    min-height: 3.2em; /* 1.6 line-height * 2 lines */
    
    /* Truncate after 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-insights.tmpl-insights .insight-excerpt{
    display: none;
}

/* Reusable Button Style (Yellow) */
.btn-yellow-sm {
    display: inline-block;
    background: var(--yellow);
    color: var(--text-dark);
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    width: fit-content;
    transition: transform 0.2s;
}
.btn-yellow-sm:hover {
    transform: translateY(-2px);
}

/* Custom Navigation Arrows */
.insights-nav-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.nav-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-dark);
    background: transparent;
}

.nav-arrow:hover {
    background: var(--text-dark);
    color: white;
}

.nav-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.tmpl-insights .swiper{width: 90%;}

/*Footer*/
/* --- FOOTER SECTION (Exact Design Match) --- */
.cpc-footer {
    background-color: #7A2168; /* Exact Purple from design */
    color: white;
    padding-top: 70px;
    padding-bottom: 30px;
    font-family: var(--font-basefont);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* TOP SECTION LAYOUT */
.cpc-footer .footer-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
}

/* --- LEFT SIDE (Form & Contact) --- */
.cpc-footer .footer-left {
    width: 65%;
    padding-right: 50px;
}

.cpc-footer h3 {
    font-family: var(--p-fontsize);
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 35px;
}

.cpc-footer .footer-right h3{
    font-size:1.3rem;
}

/* Horizontal Form Layout */
.cpc-footer .footer-form-row {
    display: flex;
    gap: 30px; /* Space between inputs */
    margin-bottom: 5px;
}

.cpc-footer .form-group {
    flex: 1; /* Each input takes equal width */
    position: relative;
}

.cpc-footer input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding: 10px 0;
    color: white;
    font-size: 1rem;
    outline: none;
    border-radius: 0;
}

.cpc-footer input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.cpc-footer input:focus {
    border-bottom-color: var(--yellow);
}

.cpc-footer .required-note {
    text-align: right;
    font-size: 0.75rem;
    margin-bottom: 0;
    opacity: 0.8;
    display: block;
}

.cpc-footer .btn-submit {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 10px 30px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-gothambook);
}

.cpc-footer .btn-submit:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--text-dark);
}

/* Contact Info Text */
.cpc-footer .contact-info-block {
    margin-top: 40px;
}

.cpc-footer .contact-line {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-family: var(--font-basefont);
}

.cpc-footer .contact-line strong {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.8rem;
    margin-left: 5px;
    display: block;
}


.cpc-footer textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding: 10px 0;
    color: white;
    font-size: 1rem;
    outline: none;
    border-radius: 0;
    resize: none; /* Prevents dragging */
    font-family: var(--font-basefont);
    height: 75px; /* Matches input height roughly */
    overflow: hidden; /* Hides scrollbar for single line feel */
    padding-top: 42px;
}

.cpc-footer textarea::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.cpc-footer textarea:focus {
    border-bottom-color: var(--yellow);
}

.cpc-footer .email-bold {
    font-weight: 700;
}

/* --- VERTICAL DIVIDER --- */
.cpc-footer .vertical-divider {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 40px;
}

/* --- RIGHT SIDE (Links & QR) --- */
.cpc-footer .footer-right {
    width: 20%;
    display: flex;
    justify-content: space-between;
}

.cpc-footer .links-col {
    flex: 1;
}

.cpc-footer ul {
    list-style: none;
    padding: 0;
}

.cpc-footer ul li {
    margin-bottom: 18px;
}

.cpc-footer ul a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    opacity: 1;
    line-height: 1.5em;
}

/* QR Code Card */
.cpc-footer .qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cpc-footer .qr-card {
    width: 170px;
}

.cpc-footer .qr-img {
   width: 100%; height: auto; display: block; margin-bottom: 10px; display: inline-block; width: 150px; margin-left: -30px; float: left;
}

.cpc-footer .contact-line p{float: left; width: 70%; margin-left: 2em; font-size: 1.3em;}

.clear,.after {
    clear: both
}

.clear:after,.after:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

* html .clear,* html .after {
    zoom:1;clear: both;
    font-size: 1px!important;
    line-height: 1px!important
}

:first-child+html .clear,:first-child+html .after {
    zoom:1;clear: both;
    font-size: 1px!important;
    line-height: 1px!important
}

.cpc-footer .qr-text {
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 600;
}

/* Bubble Badge "saath saath" */
.cpc-footer .bubble-badge {
    position: absolute;
    bottom: 20px;
    left: -40px;
    background: #8B297E; /* Dark Purple Circle */
    color: var(--yellow);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--yellow);
    z-index: 2;
    text-align: center;
    line-height: 1;
}

/* --- BOTTOM BAR --- */
.cpc-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cpc-footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    line-height: 1.2;
    font-family: var(--font-gothambook);
}
.cpc-footer .footer-logo img {
    height: 40px;
}

.cpc-footer .social-icons {
    display: flex;
    gap: 20px;
}

.cpc-footer .social-icon {
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
}

.cpc-footer .legal-links {
    display: flex;
    gap: 30px;
}

.cpc-footer .legal-links a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
}

.cpc-footer .disclaimer {
    width: 100%; text-align: left; font-size: 0.75rem; opacity: 0.7; margin-top: 10px; position: relative; top: 20px;
}

/* --- ELEMENT ANIMATIONS --- */

/* Base State: Hidden & Pushed Down */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

/* Active State: Visible & In Place */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays (One by One) */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }

/*Partnership*/
.tmpl-innerheader{height: 100vh; width: 100%; display: flex; align-items: flex-end; padding-bottom: 80px; position: relative; z-index: 1;}
.inner-header-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -10; background: #872572;
}

/*Partnership Ends*/

.hero-overlay-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(110, 37, 133, 0.85); /* Your Brand Purple */
    z-index: -1;
}

/* 2. Create the transparent gap */
.innerpage-wrapper .hero-spacer {
    height: 100vh; /* Adjust height for how much purple you want to see */
    display: flex;
    align-items: center;
    background: var(--purple);
}

.innerpage-wrapper{
    margin-top: 100vh;
}

.innerpage-wrapper .hero-h1{
    font-size: 6em;
}

.innerpage-wrapper .hero-p{
    font-size: 1.4em;
    font-weight: 600;
}

.innerheader{
    position: fixed; height: 100vh; width: 100%; top: 0; z-index: 2;
}

.innerpage-wrapper .container{
    width: 100%;
}

.innerpage-wrapper .hero-spacer{
    padding-bottom: 0;
}

.innerpage-wrapper .hero-text {
    color: white;
    width: 100%;
    max-width: 90%;
}

.hero-p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--yellow);
}

.innerpage-wrapper .blogheader .hero-h1{
    font-size: 3.5em;
}

/* 3. The sliding curtain */
.main-content {
    position: relative;
    z-index: 10;
    background: #ffffff; /* Must be solid to cover the purple on scroll */
    min-height: 100vh;
}

/* --- PARTNERSHIPS SECTION SLIDER --- */

/* 1. Base Section Style */
.tmpl-partnerships .headingCtnr p {
    text-align: left; 
    width: 75%; 
    margin: 0 auto;
}

/* 2. Text Slider (Top) */
.tmpl-partnerships .partner-text-slider {
    padding-bottom: 40px; /* Space for pagination dots */
    cursor: grab;
}

.tmpl-partnerships .partner-text-slider .swiper-slide {
    opacity: 0.3; /* Inactive slides are dim */
    transition: opacity 0.4s ease;
}

.tmpl-partnerships .partner-text-slider .swiper-slide-active {
    opacity: 1; /* Active slide is fully visible */
}

/* 3. Pagination Dots */
.tmpl-partnerships .partner-pagination .swiper-pagination-bullet {
    background: #333;
    opacity: 0.2;
    transition: all 0.3s;
}

.tmpl-partnerships .partner-pagination .swiper-pagination-bullet-active {
    background: var(--purple) !important; /* Brand Purple */
    opacity: 1;
    width: 30px; /* Elongated dot */
    border-radius: 4px;
}

.tmpl-partnerships h2{text-align: center;}

/* 4. Image Slider (Bottom) */
.tmpl-partnerships .partner-img-slider {
    margin-top: 30px;
    width: 100%; /* Matching your previous video width */
    margin-left: auto; 
    margin-right: 0;
}

.tmpl-partnerships .headingCtnr h5{
    width: 90%;
    font-size: 1.5em;
}

.tmpl-partnerships .headingCtnr p{
    width: 90%;
    font-size: 1.4em;
    width: 80%;
    margin-left: 5%;
}

.tmpl-partnerships .swiper-pagination{
    padding-left: 5%; text-align: left;
}

.tmpl-partnerships .partner-img-slider img {
    width: 100%;
    display: block;
}

/* --- PARTNER VOICES SECTION --- */

/* 1. Layout */
.tmpl-partner-voices .voices-grid {
    display: grid;
    grid-template-columns: 30% 65%; /* Image left, Text right */
    gap: 5%;
    align-items: center;
    padding-bottom: 40px; /* Space for pagination */
}

/* 2. Image Side (The White Box) */
.tmpl-partner-voices .voice-img-wrapper {
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1 / 0.85; /* Matches the rectangular shape in your image */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.tmpl-partner-voices .voice-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Text Content */
.tmpl-partner-voices blockquote {
    font-family: var(--font-basefont); /* Roboto based on your file */
    font-size: var(--p-fontsize2);
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-weight: 500;
}

.tmpl-partner-voices .voice-author {
    margin-top: 20px;
}

.tmpl-partner-voices .author-name {
    color: var(--purple);
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.tmpl-partner-voices .author-title {
    font-size: 1.2rem;
    opacity: 0.8;
    line-height: 1.4;
}

/* 4. Custom Pagination (Purple & White dots) */
/* Force position to align under the text column */
.tmpl-partner-voices .swiper-pagination.voices-pagination {
    position: absolute;
    bottom: 0;
    left: 45%; /* Starts where the text column starts */
    width: auto;
    text-align: left;
}

.tmpl-partner-voices .voices-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: white; /* Inactive dots are white */
    opacity: 1;
    margin: 0 6px;
    transition: all 0.3s ease;
}

.tmpl-partner-voices .voices-pagination .swiper-pagination-bullet-active {
    background: var(--purple) !important; /* Active dot is purple */
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tmpl-partner-voices .voices-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .tmpl-partner-voices .swiper-pagination.voices-pagination {
        left: 0;
        width: 100%;
        text-align: center;
    }
}

/* --- PARTNER NETWORK SECTION (FIXED) --- */

/* 1. Container Height (CRITICAL FOR GRID) */
.tmpl-partner-network .network-slider {
    width: 100%;
    /* Height Calculation: 
       (LogoBox Height * 2) + Gap + Pagination Space
       140px * 2 + 30px + 40px = ~350px 
    */
    height: 360px; 
    padding-bottom: 40px;
}

/* 2. Slide Height (CRITICAL FOR GRID) */
.tmpl-partner-network .swiper-slide {
    /* Forces slides to fit exactly 2 rows */
    height: calc((100% - 30px) / 2) !important; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Logo Box Styling */
.tmpl-partner-network .logo-box {
    width: 100%;
    height: 100%; /* Fill the slide height */
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5pxpx;
    transition: all 0.3s ease;
}

.tmpl-partner-network .logo-box:hover {
    border-color: var(--purple);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.tmpl-partner-network .logo-box img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.3s;
}

.tmpl-partner-network .logo-box:hover img {
    transform: scale(1.05);
}

/* 4. Pagination */
.tmpl-partner-network .network-pagination .swiper-pagination-bullet {
    width: 10px; height: 10px; background: var(--yellow)!important; opacity: 1; margin: 0 5px;
}
.tmpl-partner-network .network-pagination .swiper-pagination-bullet-active {
    background: var(--purple) !important; width: 25px; border-radius: 5px;
}

.tmpl-stories .story-overlay{height: 40%;}
.tmpl-stories .story-overlay .story-title{font-size: 1.6em; width: 90%; margin-top: 5%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1%;
    text-shadow: 2px 2px 3px #000;
    }

.tmpl-stories .story-overlay p{font-size: 1.2em;
/* The 2-Line Ellipsis Magic */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Strict height limit (1.2em * 1.5 * 2 lines = 3.6em approx max height) */
    /* Often simply setting max-height to (line-height * lines) is safest */
    max-height: 3.0em;
}

/* MOBILE ADJUSTMENT */
@media (max-width: 768px) {
    /* On mobile, we might want just 1 row or smaller boxes */
    .tmpl-partner-network .network-slider {
        height: 300px; /* Smaller height for mobile */
    }
}

/*CPC Starts*/
/* --- CPC QUOTE SECTION --- */

.tmpl-cpc-quote .quote-wrapper {
    max-width: 1000px;
    margin: 40px auto;
    /* The Yellow Line */
    border-left: 6px solid var(--yellow); 
    padding-left: 50px; /* Space between line and text */
}

.tmpl-cpc-quote blockquote {
    font-family: var(--font-gothambook);
    font-size: 1.8rem; /* Large, readable size */
    line-height: 1.4;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-weight: 400; /* Regular weight as per design */
}

.tmpl-cpc-quote cite {
    display: block;
    font-family: var(--font-basefont); /* Roboto */
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    font-weight: 500;
}

.gray-bg{
    background: var(--light-gray);
}

.twoblock-grid.tmpl-community h2{
    margin-top: 0;
}

.twoblock-grid.tmpl-community .grid-2-col{
    grid-template-columns: 0.75fr 1fr;
}

.twoblock-grid.tmpl-community .grid-2-col p{
    margin-bottom: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-cpc-quote .quote-wrapper {
        padding-left: 25px;
        border-left-width: 4px; /* Thinner line on mobile */
        margin: 20px 0;
    }

    .tmpl-cpc-quote blockquote {
        font-size: 1.3rem;
    }
    
    .tmpl-cpc-quote cite {
        font-size: 1rem;
    }
}

/* --- MILESTONES SECTION --- */

/* 1. Card Styling */
.tmpl-milestones .milestone-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 400px; /* Tall cards as per design */
    width: 100%;
    /* Optional: Yellow border on hover as hinted in design */
    border: 2px solid transparent; 
    transition: border-color 0.3s ease;
}

.tmpl-milestones .milestone-card:hover {
    border-color: var(--yellow);
}

.tmpl-milestones .milestone-img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.tmpl-milestones .milestone-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tmpl-milestones .milestone-card:hover .milestone-img {
    transform: scale(1.05);
}

/* Gradient Overlay for text readability */
.tmpl-milestones .overlay-gradient {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* 2. Year Badge (Teal Pill) */
.tmpl-milestones .year-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #00C1D4; /* Teal Color */
    color: white;
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.7rem;
    padding: 8px 20px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 3. Content */
.tmpl-milestones .milestone-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
}

.tmpl-milestones .milestone-content p {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* 4. Navigation (Centered Bottom) */
.tmpl-milestones .milestones-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

/* Reusing .nav-arrow-black from Videos section */
/* Ensure .nav-arrow-black is defined in CSS (it was provided in previous step) */

/* Brush Teal Helper (If not already added) */
.brush-teal {
    position: relative;
    display: inline-block;
}
.brush-teal::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: #00C1D4;
    opacity: 0.8;
    z-index: -1;
    transform: skewX(-10deg);
}

.tmpl-milestones .milestones-slider{
    overflow: visible;
    margin-top: var(--p-padding);
}

.white-bg{background: #fff;}

.tmpl-multidisciplinary .card-grid .feature-card:first-child p{
    color: #000;
}

.tmpl-multidisciplinary .card-grid .feature-card:first-child p.card-desc{
    color: #fff;
}

.tmpl-multidisciplinary .card-grid{margin-top: var(--p-padding); grid-template-columns: repeat(2, 1fr);}

/* --- TESTIMONIALS SECTION --- */

.tmpl-testimonials {
    background-color: var(--yellow);
    overflow: hidden;
}

.tmpl-testimonials .testimonials-wrapper {
    position: relative;
    margin: 40px auto 0 auto;
    padding: 0 60px; /* Space for quotes on sides */
}

/* 1. Quote Icons */
.tmpl-testimonials .quote-icon {
    position: absolute;
    width: 80px; /* Adjust based on your actual image size */
    height: auto;
    z-index: 1;
    opacity: 1;
}

.tmpl-testimonials .quote-left {
    top: -20px;
    left: 0;
}

.tmpl-testimonials .quote-right {
    bottom: 20px;
    right: 0;
}

/* 2. Testimonial Text */
.tmpl-testimonials .testimonial-content {
    text-align: center;
    padding: 20px 0 50px 0; /* Bottom padding for pagination */
}

.tmpl-testimonials .testimonial-content p {
    font-family: var(--font-basefont);
    font-size: 1.4rem; /* Large readable text */
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-weight: 500;
    width: 80%;
    margin: 0 auto 30px auto;
}

.tmpl-testimonials .testimonial-content cite {
    display: block;
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--purple);
    font-style: normal;
}

/* 3. Pagination (Purple & White) */
.tmpl-testimonials .testimonial-pagination {
    bottom: 0 !important;
}

.tmpl-testimonials .testimonial-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: white;
    opacity: 1;
    margin: 0 6px;
}

.tmpl-testimonials .testimonial-pagination .swiper-pagination-bullet-active {
    background: var(--purple) !important;
}

/* Wrapper to prevent styles leaking elsewhere */
.cpc-course-content {
    font-family: var(--font-basefont, "Roboto", sans-serif);
    color: var(--text-dark, #333);
    line-height: 1.6;
    font-size: 1rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 5em 0;
}

/* The Purple Heading Style */
.blog-body .cpc-course-content .purple-heading {
    font-family: var(--font-gothambook, "Gotham", sans-serif);
    color: var(--purple, #8B297E);
    font-weight: 700;
    font-size: 1.3rem; /* Matches the visual hierarchy in the image */
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Remove top margin for the very first item */
.cpc-course-content .purple-heading:first-child {
    margin-top: 0;
}

/* List Styling */
.blog-body .cpc-course-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
    list-style-type: disc;
}

.blog-body .cpc-course-content li {
    margin-bottom: 1em;
    padding-left: 5px;
    font-size: var(--p-fontsize2);
    line-height: var(--p-lineheight2);
}

/* Paragraph spacing */
.blog-body .cpc-course-content p {
    margin-bottom: 1em;
}

/* Link Styling */
.cpc-course-content a {
    color: var(--text-dark, #333);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.3s ease;
}

.cpc-course-content a:hover {
    color: var(--purple, #8B297E);
}


.cpc-course-content .divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-testimonials .testimonials-wrapper {
        padding: 0;
        margin-top: 60px; /* Make room for top quote */
    }
    
    .tmpl-testimonials .quote-icon {
        width: 50px;
    }
    
    .tmpl-testimonials .quote-left {
        top: -50px;
        left: 10px;
    }
    
    .tmpl-testimonials .quote-right {
        bottom: -20px;
        right: 10px;
    }

    .tmpl-testimonials .testimonial-content p {
        font-size: 1.1rem;
    }
}

/* --- TEAM SECTION --- */

.tmpl-team .team-desc {
    max-width: 800px;
    margin: 0 auto 50px auto;
    opacity: 1;
}

/* 1. Team Card */
.tmpl-team .team-card {
    text-align: left;
    transition: transform 0.3s ease;
}

.tmpl-team .team-card:hover {
    transform: translateY(-5px);
}

/* 2. Image Styling */
.tmpl-team .team-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Square images */
    border-radius: 20px; /* Rounded corners */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.tmpl-team .team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Focus on faces */
    transition: transform 0.5s ease;
}

.tmpl-team .team-card:hover .team-img {
    transform: scale(1.05);
}

/* 3. Typography */
.tmpl-team .team-name {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.tmpl-team .team-role {
    font-family: var(--font-basefont);
    font-size: 1.1rem;
    color: var(--text-gray);
    font-weight: 400;
}

/* 4. Navigation Layout */
.tmpl-team .team-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

/*CPC Ends*/

/*Saath Saath*/
/* --- SAATH-SAATH CONNECT SECTION (Float Layout) --- */

/* Utility to clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* 1. Image Styling (Floated) */
.tmpl-saath-connect .saath-img-wrapper {
    float: left;
    width: 45%; /* Image takes ~45% width */
    margin-right: 50px; /* Space between image and text */
    margin-bottom: 20px; /* Space if text wraps under */
    
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    /* No fixed height, lets image determine it */
}

.tmpl-saath-connect .saath-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 2. Content & Typography */
.tmpl-saath-connect .saath-content {
    display: block; /* Standard block flow */
}

.tmpl-saath-connect .section-heading {
    text-align: left;
    margin-bottom: 30px;
    margin-top: 0; /* Align top with image */
    line-height: 1.2;
}

.tmpl-saath-connect .saath-body p {
    font-family: var(--font-basefont);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 25px;
}

.tmpl-saath-connect .saath-body strong {
    color: var(--text-dark);
    font-weight: 700;
}

.tmpl-saath-connect .section-heading span{display: inline;}
.tmpl-saath-connect .section-heading {margin-bottom: 1.5em;}

/* RESPONSIVE */
@media (max-width: 900px) {
    .tmpl-saath-connect .saath-img-wrapper {
        float: none; /* Disable float on mobile */
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
        max-height: 400px; /* Limit height if needed */
    }

    .tmpl-saath-connect .saath-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* --- SAATH IMPACT SECTION --- */

.tmpl-saath-impact {
    background-color: var(--purple); /* Brand Purple */
}

/* 1. Card Styling */
.tmpl-saath-impact .impact-card {
    background: rgba(255, 255, 255, 0.1); /* Lighter purple block effect */
    border-radius: 12px;
    padding: 50px 20px;
    text-align: center;
    color: white;
    transition: transform 0.3s ease, background 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tmpl-saath-impact .impact-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

/* 2. Typography */
.tmpl-saath-impact .impact-val {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 4rem; /* Big impact numbers */
    line-height: 1;
    margin-bottom: 15px;
    color: white;
}

.tmpl-saath-impact .impact-lbl {
    font-family: var(--font-basefont);
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 1;
}

/* 3. Pagination Dots (Yellow Active, Light Inactive) */
.tmpl-saath-impact .saath-pagination {
    position: relative;
    margin-top: 50px;
}

.tmpl-saath-impact .saath-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.4);
    opacity: 1;
    width: 12px; height: 12px;
    margin: 0 6px;
}

.tmpl-saath-impact .saath-pagination .swiper-pagination-bullet-active {
    background: var(--yellow);
    transform: scale(1.2);
}

.tmpl-saath-impact .saath-impact-slider{overflow: visible;}

/* --- SAATH POSTER SECTION (Updated) --- */

/* 1. Typography & Alignment Overrides */

/* Ensure the heading container is strictly left-aligned with no padding */
.tmpl-saath-poster .headingCtnr {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100%;
}

/* Ensure the heading itself has no left space */
.tmpl-saath-poster .section-heading {
    text-align: left;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 30px;
    font-size: 2.5rem;
    line-height: 1.2;
}

.tmpl-saath-poster .poster-body p {
    font-family: var(--font-basefont);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 25px;
}

.tmpl-saath-poster .poster-body strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* 2. Download Link Style */
.tmpl-saath-poster .download-link {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--font-gothambook);
    font-weight: 700;
    color: var(--purple);
    font-size: 1.4rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    text-decoration: underline;
}

.tmpl-saath-poster .download-link:hover {
    color: var(--purple-dark);
    border-bottom-color: var(--purple-dark);
}

/* 3. Poster Image Styling (Straight) */
.tmpl-saath-poster .poster-img-wrapper {
    width: 100%;
    /* Create a "Paper" effect */
    background: white;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    /* Rotation removed here */
    transition: transform 0.3s ease;
}

.tmpl-saath-poster .poster-img-wrapper:hover {
    /* Only scale on hover, no rotation fix needed */
    transform: scale(1.02);
}

.tmpl-saath-poster .poster-img {
    width: 100%;
    height: auto;
    display: block;
}

.tmpl-saath-poster .grid-2-col{
    /*grid-template-columns:1fr 0.7fr;*/
    grid-template-columns:2fr 0.7fr;
    align-items: flex-start;
    gap: 20px;
}

/*.tmpl-saath-poster .section-heading span{display: inline;}*/
.tmpl-saath-poster .section-heading{margin-bottom: 1.5em;}

.tmpl-saath-poster p{
    width: 90%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-saath-poster .poster-img-wrapper {
        margin-top: 30px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    
    .tmpl-saath-poster .section-heading {
        font-size: 1.8rem;
    }
}

/* --- SAATH HELP SECTION --- */

.tmpl-saath-help {
    background-color: var(--yellow);
    overflow: hidden; /* Prevent horizontal scroll from hanging icons on mobile */
}

/* 1. Grid Layout */
.tmpl-saath-help .help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 140px; /* Large gap to accommodate hanging icons */
    margin-top: 50px;
    padding: 0 20px; /* Safety padding */
}

/* 2. Card Styling */
.tmpl-saath-help .help-card {
    background-color: rgba(255, 255, 255, 0.45); /* Creamy/Glassy effect */
    border-radius: 20px;
    padding: 40px 30px 40px 70px; /* Extra Left padding for icon */
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px; /* Ensure visual balance */
    cursor: pointer;
}

/* 3. Hanging Icon */
.tmpl-saath-help .help-icon-wrapper {
    position: absolute;
    left: -45px; /* Hangs off the left edge */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.tmpl-saath-help .icon-circle {
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 4. Typography */
.tmpl-saath-help .help-content p {
    font-family: var(--font-basefont);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
}

.tmpl-saath-help .text-purple {
    color: #8B297E;
    font-weight: 700;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .tmpl-saath-help .help-grid {
        grid-template-columns: 1fr;
        gap: 80px; /* More vertical space between stacked cards */
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .tmpl-saath-help .help-card {
        padding: 30px 20px 30px 60px;
    }
    
    .tmpl-saath-help .help-icon-wrapper {
        left: -30px; /* Slightly less overhang on smaller screens */
    }
    
    .tmpl-saath-help .icon-circle {
        width: 70px;
        height: 70px;
    }
}

/* --- LETS TALK / RESOURCES SECTION --- */

.tmpl-lets-talk {
    background-color: var(--yellow);
    padding-bottom: 0;
}

/* 1. Header & Description */
.tmpl-lets-talk .section-desc {
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-family: var(--font-basefont);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-dark);
}

/* 2. Slider Layout */
.tmpl-lets-talk .slider-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 0 10px;
}

.tmpl-lets-talk .sub-heading {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 2rem;
    color: #8B297E; /* Purple */
    margin: 0;
}

.tmpl-lets-talk .slider-nav {
    display: flex;
    gap: 15px;
}

/* 3. Resource Card (Flyer/Poster) */
.tmpl-lets-talk .resource-card {
    background: transparent;
    padding: 10px;
    border-radius: 12px;
}

.tmpl-lets-talk .resource-img-wrapper {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    /* Aspect ratio for flyers typically portrait A4 */
    aspect-ratio: 210 / 297; 
}

.tmpl-lets-talk .resource-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}

.tmpl-lets-talk .resource-card:hover .resource-img {
    transform: scale(1.02);
}

/* 4. Action Bar (Dropdown + Download) */
.tmpl-lets-talk .resource-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}

/* Custom Select Styling */
.tmpl-lets-talk .lang-dropdown {
    position: relative;
    display: inline-block;
}

/* This styles the select to look like text + arrow */
.tmpl-lets-talk .lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    padding-right: 20px; /* Space for arrow */
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 10px;
}

.tmpl-lets-talk .lang-select:focus {
    outline: none;
}

/* Download Button (Purple Circle) */
.tmpl-lets-talk .download-btn {
    width: 35px; height: 35px;
    background-color: #8B297E;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    transition: transform 0.2s ease, background 0.2s ease;
}

.tmpl-lets-talk .download-btn:hover {
    background-color: #6a1b54;
    transform: translateY(-2px);
}

.lightyellow-bg{background: var(--light-yellow);}

/*Saath Saath Ends*/

/*Stories of Care*/
/* --- STORY HIGHLIGHT SECTION --- */

.tmpl-story-highlight {
    background-color: var(--yellow);
}

/* 1. Grid Layout */
.tmpl-story-highlight .story-grid {
    display: grid;
    /* Image gets 1.3fr, Content gets 1fr (approx 55/45 split) */
    grid-template-columns: 1.3fr 1fr; 
    gap: 60px;
    align-items: center;
}

/* 2. Image Styling */
.tmpl-story-highlight .story-img-wrapper {
    border-radius: 20px; /* Consistent rounded corners */
    overflow: hidden;
    width: 100%;
    /* Aspect ratio roughly matches 4:3 landscape */
    aspect-ratio: 4 / 3; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.tmpl-story-highlight .story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tmpl-story-highlight .story-img-wrapper:hover .story-img {
    transform: scale(1.03);
}

/* 3. Typography */
.tmpl-story-highlight .story-heading {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.tmpl-story-highlight .story-desc {
    font-family: var(--font-basefont);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 30px;
}

/* Reusing .link-purple-arrow from previous sections */
/* If not defined globally yet: */
.link-purple-arrow {
    font-family: var(--font-gothambook);
    font-weight: 700;
    color: #8B297E; /* Purple */
    text-decoration: none;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.3s;
}
.link-purple-arrow .arrow {
    margin-left: 8px;
    transition: transform 0.3s;
}
.link-purple-arrow:hover .arrow {
    transform: translateX(5px);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .tmpl-story-highlight .story-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 30px;
    }

    .tmpl-story-highlight .story-heading {
        font-size: 1.6rem;
    }
}

/* --- STORIES GRID SECTION --- */

/* 1. Grid Layout */
.tmpl-stories-grid .stories-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns */
    gap: 50px; /* Generous gap */
    row-gap: 60px;
    margin-top: 40px;
}

/* 2. Card Styling */
.tmpl-stories-grid .story-card-grid {
    display: flex;
    flex-direction: column;
}

.tmpl-stories-grid .story-img-wrapper {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    aspect-ratio: 16 / 9; /* Landscape ratio */
    background: #f0f0f0;
}

.tmpl-stories-grid .story-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}

.tmpl-stories-grid .story-card-grid:hover .story-img {
    transform: scale(1.05);
}

/* 3. Typography */
.tmpl-stories-grid .story-title {
    font-family: var(--font-gothambook);
    font-weight: 700; /* Bold Headlines */
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.tmpl-stories-grid .story-excerpt {
    font-family: var(--font-basefont);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-stories-grid .stories-grid-layout {
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 40px;
    }
    
    .tmpl-stories-grid .story-title {
        font-size: 1.25rem;
    }
}
/*Stories of Care Ends*/

/*Blog Inner*/
/* --- BLOG DETAIL PAGE --- */

/* 1. Layout Container */
.tmpl-blog-detail .blog-container {
    max-width: 1100px; /* Limits width for readability */
    margin: 0 auto;
}

/* 2. Hero Image */
.tmpl-blog-detail .blog-hero-image {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}

.tmpl-blog-detail .blog-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Typography Defaults */
.tmpl-blog-detail .blog-body {
    font-family: var(--font-basefont);
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.tmpl-blog-detail .blog-body li{
    margin-left: 2em;
    padding-left: 5px;
    font-size: 1.1em;
}

.tmpl-blog-detail .blog-body ul{
    margin-bottom: 1.5em;
}

.tmpl-blog-detail .blog-body p {
    margin-bottom: 25px;
    font-size: var(--p-fontsize2);
    line-height: var(--p-lineheight2);
}

.tmpl-blog-detail .blog-body h3 {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.6rem;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--text-dark);
}

/* Highlight Text (Intro) */
.tmpl-blog-detail .blog-intro {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 35px;
}

/* 4. ALIGNMENT CLASSES (The core of the layout) */

/* Left Aligned Image */
.tmpl-blog-detail .align-left {
    float: left;
    width: 50%;
    margin-right: 40px;
    margin-bottom: 20px;
    margin-top: 25px;
}

/* Right Aligned Image */
.tmpl-blog-detail .align-right {
    float: right;
    width: 45%;
    margin-left: 40px;
    margin-bottom: 20px;
    margin-top: 10px;
}

/* Full Width Image */
.tmpl-blog-detail .align-full {
    width: 100%;
    margin: 40px 0;
    clear: both;
}

/* Image Styling within blocks */
.tmpl-blog-detail .align-left img, 
.tmpl-blog-detail .align-right img,
.tmpl-blog-detail .align-full img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.tmpl-blog-detail .caption, 
.tmpl-blog-detail figcaption {
    display: block;
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 10px;
    font-style: italic;
}

/* 5. COMPONENTS */

/* Saath Saath Unit (Purple Box) */
.tmpl-blog-detail .saath-widget {
    background-color: #8B297E; /* Purple */
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    max-width: 300px; /* Fixed width for the sidebar feel */
    clear: right; /* Ensure it doesn't overlap other floats awkwardly */
}

.tmpl-blog-detail .widget-title {
    font-family: var(--font-gothambook);
    font-weight: 700;
    color: #FFD200; /* Yellow Text */
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 20px;
}

.tmpl-blog-detail .widget-btn {
    display: inline-block;
    background-color: #FFD200; /* Yellow Button */
    color: var(--text-dark);
    font-family: var(--font-gothambook);
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.tmpl-blog-detail .widget-btn:hover {
    transform: scale(1.05);
}

/* Blockquote */
.tmpl-blog-detail blockquote {
    border-left: 5px solid var(--yellow);
    padding-left: 30px;
    margin: 40px 0;
    font-size: 1.4rem;
    font-style: italic;
    color: #333;
    font-family: var(--font-gothambook);
}

/* Video Embed */
.tmpl-blog-detail .video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    margin: 40px 0;
    clear: both;
}

.tmpl-blog-detail .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 6. Share Section */
.tmpl-blog-detail .blog-share {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 20px;
    clear: both;
    padding-bottom: 30px;
}

.tmpl-blog-detail .share-label {
    font-weight: 700;
    font-size: 1.2rem;
    font-family: var(--font-gothambook);
}

.tmpl-blog-detail .share-icons {
    display: flex;
    gap: 15px;
}

.tmpl-blog-detail .share-icon {
    width: 30px;
    height: 30px;
    /* Use SVGs here if not using FontAwesome, simplistic fallback styling below */
    background: #f0f0f0; 
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

.tmpl-blog-detail .share-icon:hover {
    background: var(--purple);
    color: white;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tmpl-blog-detail .align-left, 
    .tmpl-blog-detail .align-right,
    .tmpl-blog-detail .saath-widget {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 30px 0;
    }
    
    .tmpl-blog-detail .blog-intro {
        font-size: 1.15rem;
    }
    
    .tmpl-blog-detail blockquote {
        font-size: 1.2rem;
        padding-left: 20px;
    }
}

/* --- RELATED ARTICLES SECTION --- */

.bg-light-gray {
    background-color: #EAEAEA; /* Light gray from design */
}

/* 1. Grid Layout */
.tmpl-related-articles .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

/* 2. Card Styling */
.tmpl-related-articles .related-card {
    display: flex;
    flex-direction: column;
    /* No background color on card itself, it blends with section */
}

.tmpl-related-articles .related-img-wrapper {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    aspect-ratio: 16 / 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.tmpl-related-articles .related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.tmpl-related-articles .related-card:hover .related-img {
    transform: scale(1.05);
}

/* 3. Typography */
.tmpl-related-articles .related-title {
    font-family: var(--font-gothambook);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.tmpl-related-articles .related-excerpt {
    font-family: var(--font-basefont);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 20px;
}

/* Link Style (Reused but defined here if needed) */
.tmpl-related-articles .link-purple-arrow {
    font-family: var(--font-gothambook);
    font-weight: 700;
    color: #8B297E;
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    transition: opacity 0.3s;
}

.tmpl-related-articles .link-purple-arrow .arrow {
    margin-left: 8px;
    transition: transform 0.3s;
}

.tmpl-related-articles .link-purple-arrow:hover .arrow {
    transform: translateX(5px);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .tmpl-related-articles .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tmpl-related-articles .related-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}
/*Blog Inner Ends*/

.author-box {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: flex-start;
    align-items: center;
    gap: 25px;
    padding: 30px;
    margin: 40px 0;
    background: #f9f9f9; 
    border-radius: 12px;
    border-left: 5px solid var(--purple); 
}

.author-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
}

.author-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 5px;
}

.author-name {
    font-size: 1.25rem;
    margin: 0 0 10px 0;
    color: #333;
    font-weight: 700;
}

.author-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
    .author-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .author-box {
        border-left: none;
        border-top: 5px solid #634292;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 1430px) {
  .cpc-footer .qr-img {
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
    .cpc-footer .footer-top { flex-direction: column; }
    .cpc-footer .footer-left { width: 100%; padding-right: 0; margin-bottom: 40px; }
    .cpc-footer .footer-right { width: 100%; }
    .cpc-footer .vertical-divider { display: none; }
    .cpc-footer .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
    .cpc-footer .footer-form-row { flex-direction: column; gap: 15px; }
}

/* Mobile: Stack nicely */
@media (max-width: 768px) {
    .insight-title { font-size: 1.3rem; }
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .story-card { height: 350px; }
    .story-title { font-size: 1.1rem; }
}

/* Mobile Fixes for Grids */
@media(max-width: 768px) {
    .grid-2-col, .grid-3-col { grid-template-columns: 1fr; }
}
/* Mobile — hero fixes */
@media(max-width: 768px) {
    .hero-spacer  { height: 100svh; padding-bottom: 50px; }
    .hero-overlay { background: rgba(0, 0, 0, 0.6); }
    .hero-h1      { font-size: 2.5rem; line-height: 1.2; } /* line-height applies to all mobile hero sections, including inner pages */
    .hero-intro   { font-size: 1.1rem; }
    .hero-text    { margin-left: 20px; margin-right: 20px; } /* margin-right applies to all mobile hero sections, including inner pages */
    .nav-links    { display: none; }
    .card-grid    { grid-template-columns: 1fr; }
}

/* ── Mobile — global layout & typography ───────────────────────────────────
   These rules apply across all pages. Section-specific overrides at higher
   specificity (e.g. .tmpl-foo .section-heading) remain unaffected.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* G1 — Reduce section vertical spacing (was 80px top + bottom) */
    .section-pad { padding: 44px 0; }

    /* G2/G3 — Scale section headings down from 2.8rem; tighten margin */
    .section-heading { font-size: 2rem; margin-bottom: 32px; }

    /* G4 — Reduce h2 side margins inside headingCtnr (was 1em ≈ 40px per side) */
    .headingCtnr h2 { margin: 0 0.25em 0.75em; }

    /* G5 — Scale brush-stroke decoration from fixed 239px */
    .brush-stroke::after { width: 130px; right: -12px; }

    /* G6 — Widen headingCtnr paragraph from 78% */
    .headingCtnr p { width: 92%; }
}

/* ── Mobile — section-specific fixes ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* S7 — Questions section: reduce own padding from 100px */
    .questions-section { padding: 60px 0; }

    /* S1 — Training video: fix overflow caused by width 80% + margin-left 26% */
    .video-training { width: 100%; margin-left: 0; }
    .video-training img,
    .video-training video { border-radius: 40px 0 0 0; } /* soften 200px radius */
    .video-training iframe { border-radius: 20px 0 0 0; }

    /* S2 — Training copy: widen from 75% */
    .tmpl-training .training-copy  { width: 100%; }
    .tmpl-training .headingCtnr p  { width: 100%; }

    /* S3 — Training read-more: enlarge touch target from ~22px height */
    .training-read-toggle { min-height: 44px; display: inline-flex; align-items: center; }

    /* S4 — Impact numbers: scale down from 4.5rem */
    .impact-number,
    .impact-number-wrapper { font-size: 3rem; }

    /* S6 — Insights "View All": pull out of absolute position into flow */
    .viewAllLinks { position: static; display: block; margin-top: 12px; text-align: center; }

    /* S8 — Community map: prevent 110% width + left:-3% from overflowing */
    .tmpl-community .img-auto-center { max-width: 100%; left: 0; }
}

/* S10 — Flip cards: show description (back face) by default on touch devices.
   (hover: none) + (pointer: coarse) matches touchscreens; excludes mouse/trackpad.
   Desktop :hover flip behaviour is completely unchanged. */
@media (hover: none) and (pointer: coarse) {
    .feature-card .feature-card-inner { transform: rotateY(180deg); }
}

/* ── Mobile — cpc.php: inner page & section fixes ────────────────────────── */
@media (max-width: 768px) {
    /* Fix 1 — Inner page hero: fix 100vh on iOS (browser chrome excluded) */
    .innerpage-wrapper .hero-spacer { height: 100svh; }

    /* Fix 2 — Inner page hero: scale heading down from 6em (≈96px) */
    .innerpage-wrapper .hero-h1 { font-size: 2.8rem; }

    /* Fix 3 — Multidisciplinary: collapse 2-column card grid to 1 column */
    .tmpl-multidisciplinary .card-grid { grid-template-columns: 1fr; }

    /* Fix 4 — Milestones: reduce slider top margin from var(--p-padding) ≈ 80px */
    .tmpl-milestones .milestones-slider { margin-top: 32px; }

    /* Fix 5 — Community: desktop rule (.twoblock-grid.tmpl-community .grid-2-col)
       has specificity (0,3,0) and overrides the global .grid-2-col mobile fix (0,1,0).
       Must match the same specificity to win via source order. */
    .twoblock-grid.tmpl-community .grid-2-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .twoblock-grid.tmpl-community .img-auto-center {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

/* ── Mobile — saath-saath.php fixes ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Fix 1 — Saath poster: desktop rule (.tmpl-saath-poster .grid-2-col) at
       specificity (0,2,0) keeps the grid at 2fr 0.7fr, making the poster image
       ~68px wide on 320px. Match specificity so source order wins. */
    .tmpl-saath-poster .grid-2-col { grid-template-columns: 1fr; }
}

/* ── Mobile — insights-updates.php fixes ────────────────────────────────── */
@media (max-width: 768px) {
    /* Videos heading brush stroke: the <span class="brush-stroke brush-teal">
       is EMPTY — "Videos" sits outside it. On mobile, the G5 fix overrides
       brush-teal's width:100% with width:130px (absolute), but brush-teal's
       left:0 anchors the stroke at the span's position (right after "Videos"),
       extending 130px rightward off-screen. Setting left:auto removes that
       anchor so right:-12px + width:130px positions the stroke leftward, landing
       approximately under the word "Videos". */
    /* Fix A — horizontal: removes brush-teal's left:0 anchor (see comment above) */
    /* Fix A — vertical: brush-teal's bottom:5px cuts through zero-height span;
       bottom:-10px places stroke below the text baseline, matching Reports */
    .tmpl-videos .section-heading .brush-stroke::after { left: auto; bottom: -10px; }
}

/* ── Mobile — insight.php fixes ─────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Fix B — blog hero title: .innerpage-wrapper .blogheader .hero-h1 sets
       font-size:3.5em at (0,3,1), beating the global mobile fix (0,2,1).
       Match specificity here to cap it at 2rem on mobile. */
    .innerpage-wrapper .blogheader .hero-h1 { font-size: 2rem; }

    /* Fix C — hero clips long content on mobile.
       .innerheader is position:fixed + height:100vh (desktop parallax trick).
       Long title+subtitle overflows that fixed 100vh and is cut off by the
       viewport boundary. Scoped to body.single-insight only — does NOT touch
       global .innerheader or any other inner page. */
    body.single-insight .innerheader {
        position: relative;
        height: auto;
    }
    /* margin-top:100vh on .innerpage-wrapper compensates for the fixed hero.
       Once the section is in normal flow, the offset is no longer needed. */
    body.single-insight .innerpage-wrapper {
        margin-top: 0;
    }
    /* Override the mobile 100svh rule (.innerpage-wrapper .hero-spacer at 0,2,0)
       and the desktop 100vh. height:auto lets the hero grow with its content.
       padding-top:110px clears the fixed navbar (~80px) with breathing room. */
    body.single-insight .innerpage-wrapper .hero-spacer {
        height: auto;
        min-height: 100svh;
        padding-top: 110px;
        padding-bottom: 60px;
        align-items: center;
    }
    /* Subtitle: desktop sets 1.4em (~22px) which reads large on mobile
       for a multi-line paragraph alongside an already-long title. */
    body.single-insight .innerpage-wrapper .hero-p {
        font-size: 1.2rem;
        line-height: 1.6;
    }

    .cpc-footer .contact-line p{
        margin-left: 0;
    }

    .tmpl-cta-saath .cta-img{
        min-height: inherit;
    }
}