@font-face {
 font-family: 'LipiGhorBangla';
 src: url('../fonts/LipiGhor/Li Purno Pran Unicode.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'LipiGhorBangla';
 src: url('../fonts/LipiGhor/Li Purno Pran Unicode Italic.ttf') format('truetype');
 font-weight: 400;
 font-style: italic;
}
@font-face {
 font-family: 'LipiGhorHeading';
 src: url('../fonts/LipiGhor/LiZahirRayhanUnicode-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'LipiGhorHeading';
 src: url('../fonts/LipiGhor/LiZahirRayhanUnicode-Italic.ttf') format('truetype');
 font-weight: 400;
 font-style: italic;
}
@font-face {
 font-family: 'LipiGhorAccent';
 src: url('../fonts/LipiGhor/LiNiladriNurUnicode-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'LipiGhorAccent';
 src: url('../fonts/LipiGhor/LiNiladriNurUnicode-Italic.ttf') format('truetype');
 font-weight: 400;
 font-style: italic;
}
@font-face {
 font-family: 'TiroBangla';
 src: url('../fonts/Bangla_font/TiroBangla-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'TiroBangla';
 src: url('../fonts/Bangla_font/TiroBangla-Italic.ttf') format('truetype');
 font-weight: 400;
 font-style: italic;
}
@font-face {
 font-family: 'AdorNoirrit';
 src: url('../fonts/Bangla_font/Li%20Ador%20Noirrit%20Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'AdorNoirrit';
 src: url('../fonts/Bangla_font/Li%20Ador%20Noirrit%20SemiBold.ttf') format('truetype');
 font-weight: 600;
 font-style: normal;
}
@font-face {
 font-family: 'AdorNoirrit';
 src: url('../fonts/Bangla_font/Li%20Ador%20Noirrit%20Bold.ttf') format('truetype');
 font-weight: 700;
 font-style: normal;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 overflow-x: hidden; /* safety net: nothing on this page should be able to force horizontal scroll */
}

img, video, iframe {
 max-width: 100%;
 height: auto;
}

/* Hero Slider
 KEY FIX: .hero-slider has a fixed height. Slides are absolute-positioned
 inside it. The <img> fills the fixed box via object-fit:cover so the
 container NEVER resizes based on image dimensions.
 */

/* Desktop 1024px */
.hero-slider {
 position: relative !important;
 width: 100% !important;
 /* near-full viewport height, like the reference site */
 max-height: 92vh !important;
 min-height: 600px !important; /* never collapse too short on small/wide screens */
 overflow: hidden !important;
 background: #111;
 box-shadow: 0 12px 24px -6px rgba(0,0,0,0.28);
 /* Cancel body's default header-offset padding so the hero image
 starts at the very top of the viewport, with the floating header
 overlapping on top of it - matches the reference site's look. */
}

.hero-slide {
 display: none;
 position: absolute !important; /* stack slides inside the fixed container */
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 width: 100% !important;
 height: 100% !important;
}

.hero-slide.active { display: block !important; }

/* Image covers the fixed box - crops if needed, never overflows */
.slide-bg {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 width: 100% !important;
 height: 100% !important;
 min-width: 100% !important;
 min-height: 100% !important;
 max-width: none !important;
 object-fit: cover !important;
 object-position: center !important;
 display: block !important;
 margin: 0 !important;
}

.slide-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 100%);
 display: flex;
 align-items: center;
 padding: 0 60px;
}

.slide-content {
 max-width: 560px;
 color: #fff;
 animation: slideFadeIn 0.5s ease;
}

.slide-title {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: clamp(24px, 4vw, 42px);
 font-weight: 400;
 line-height: 1.3;
 margin-bottom: 14px;
 text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.slide-desc {
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: clamp(14px, 1.8vw, 18px);
 line-height: 1.7;
 opacity: 0.92;
 text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Slider Controls */
.slider-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(255,255,255,0.15);
 border: 2px solid rgba(255,255,255,0.3);
 color: #fff;
 width: 46px;
 height: 46px;
 border-radius: 50%;
 font-size: 1rem;
 cursor: pointer;
 transition: background 0.2s;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 10;
}
.slider-btn:hover { background: rgba(245,166,35,0.7); border-color: #F5A623; }
.slider-prev { left: 18px; }
.slider-next { right: 18px; }

.home-description-inner {
 margin-right: auto;
 margin-left: auto;
 position: relative;
 z-index: 5;
 text-align: center;
 max-width: 1400px;
 background: #fff;
 border-radius: 18px;
 padding: 40px 20px 20px;
 box-shadow:
 0 16px 34px rgba(26,26,26,0.1),
 0 4px 12px rgba(245,166,35,0.1),
 0 1px 3px rgba(26,26,26,0.05);
}

.home-description {
 padding: 50px;
 background: #f7f7f7;
}

.home-description-inner p {
 position: relative;
 z-index: 1;
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: clamp(16px, 4vw, 20px);
 letter-spacing: 0.2px;
 line-height: 1.9;
 background-size: 300% 100%;
 background-clip: text;
 color: #2b2b2b;
 filter: drop-shadow(0 0 3px rgba(245,166,35,0.16)) drop-shadow(0 4px 6px rgba(26,26,26,0.14));
}
.home-description-inner p:last-child { margin-bottom: 0; }

@keyframes textShimmer {
 from { background-position: 0% 0; }
 to { background-position: -300% 0; }
}

.home-content-separator{
 /* margin-top: -125px; */
 width: 100%;
 /* height: 190px; */
 background: #f7f7f7;
}

/* Under Dev */
.under-dev {
 max-width: 860px;
 margin: 80px auto;
 padding: 50px 20px;
 text-align: center;
 opacity: 0;
 transform: translateY(15px);
 animation: fadeUp 0.5s ease forwards;
}
.under-dev i { font-size: 40px; color: #F5A623; margin-bottom: 15px; display: block; }
.under-dev h1 { font-family: 'AdorNoirrit', 'Poppins', sans-serif; color: #1A1A1A; font-size: clamp(24px, 4vw, 36px); margin-bottom: 10px; }
.under-dev p { font-family: 'TiroBangla', 'Poppins', sans-serif; color: #555; font-size: 16px; }

/* Animations */
@keyframes slideFadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
 from { opacity: 0; transform: translateY(15px); }
 to { opacity: 1; transform: translateY(0); }
}

/*
 RESPONSIVE Tablet & Mobile slider heights + layout tweaks
 */

/* Tablet: 601px - 1023px - aspect-ratio based so width/height stay
 proportional (vh alone made the crop depend on device height, not
 width, cutting off the sides of wide banner images) */
@media (max-width: 1023px) and (min-width: 601px) {
 .hero-slider { height: auto !important; aspect-ratio: 16 / 8 !important; max-height: none !important; min-height: 420px !important; }
 .slide-overlay { padding: 0 36px; }
 .slider-btn { width: 40px; height: 40px; font-size: 0.9rem; }
 .batch-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: <=600px - aspect-ratio based (same reasoning as tablet above:
 a fixed vh height ignores the device's WIDTH, so on a narrow/tall
 phone the wide banner image gets cropped down to a thin center
 sliver. Tying height to width via aspect-ratio keeps a consistent,
 much less aggressive crop on every phone size.) */
@media (max-width: 600px) {
 .hero-slider { height: auto !important; aspect-ratio: 16 / 7 !important; max-height: none !important; min-height: 230px !important; }
 .slide-overlay { padding: 0 16px; }
 .slide-content { max-width: 100%; }
 .slider-btn { width: 32px; height: 32px; font-size: 0.78rem; }
 .slider-prev { left: 8px; }
 .slider-next { right: 8px; }
 .home-description { padding: 24px 12px 20px; }
 .home-description-inner { width: 100%; max-width: 100%; padding: 30px 18px 22px; }
}

/*
 BATCH SECTION
 */
.batch-section {
 /* margin-top: -90px; */
 padding: 50px 31px 60px;
 background: #f7f7f7;
 position: relative;
}

.batch-section-inner {
 max-width: 1140px;
 margin: 0 auto;
}

.batch-section-header {
 /* margin-top: 87px; */
 text-align: center;
 margin-bottom: 0px;
}

/*
 SECTION HEADING simple, clean, Amber & Charcoal theme
 Reused by both " " and "" titles
 */
/* Each section below has its OWN heading-wrap / heading-3d class
 (intro-video-, batch-, features-, testimonials-, donation-)
 they used to share one .section-heading-wrap/.section-heading-3d
 pair, which meant editing one section's heading accidentally
 changed all the others. Kept fully independent now, on purpose,
 even though the declarations start out identical. */

.intro-video-heading-inner,
.batch-heading-wrap,
.features-heading-wrap,
.testimonials-heading-wrap,
.donation-heading-wrap {
 padding-bottom: 30px;
 margin-top: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
 opacity: 0;
 transform: translateY(14px);
 animation: sectionHeadingIn 0.6s ease forwards;
}

/* Certificate-style frame with small corner accents around the heading */
.heading-frame {
 position: relative;
 display: inline-block;
 padding: 14px 32px;
 border: 1px solid rgba(255,255,255,0.55);
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(245,166,35,0.10));
 backdrop-filter: blur(14px) saturate(160%);
 -webkit-backdrop-filter: blur(14px) saturate(160%);
 box-shadow:
 0 8px 28px rgba(245,166,35,0.18),
 inset 0 1px 0 rgba(255,255,255,0.65),
 inset 0 -1px 6px rgba(245,166,35,0.08);
}

.heading-frame .corner {
 position: absolute;
 width: 14px;
 height: 14px;
 border: 2px solid #F5A623;
}

.heading-frame .corner.tl { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.heading-frame .corner.tr { top: -3px; right: -3px; border-left: none; border-bottom: none; }
.heading-frame .corner.bl { bottom: -3px; left: -3px; border-right: none; border-top: none; }
.heading-frame .corner.br { bottom: -3px; right: -3px; border-left: none; border-top: none; }

.intro-video-heading-3d,
.batch-heading-3d,
.features-heading-3d,
.testimonials-heading-3d,
.donation-heading-3d {
 position: relative;
 display: inline-block;
 margin: 0;
}

.intro-video-heading-3d span,
.batch-heading-3d span,
.features-heading-3d span,
.testimonials-heading-3d span,
.donation-heading-3d span {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: clamp(17px, 2.3vw, 25px);
 font-weight: 700;
 letter-spacing: 0.2px;
 color: #1A1A1A;
}

@keyframes sectionHeadingIn {
 from { opacity: 0; transform: translateY(14px); }
 to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
 .heading-frame {
 padding: 10px 20px;
 border-radius: 10px;
 }
 .heading-frame .corner {
 width: 10px;
 height: 10px;
 border-width: 1.5px;
 }
 .intro-video-heading-3d span,
 .batch-heading-3d span,
 .features-heading-3d span,
 .testimonials-heading-3d span,
 .donation-heading-3d span {
 font-size: clamp(15px, 4.2vw, 19px);
 }
 .home-description-inner {
 padding: 34px 20px 26px;
 }
 .home-description-inner p {
 font-size: 15px;
 line-height: 1.8;
 }
}

/*
 BATCH GRID all cards shown at once, wraps into rows
 */
.batch-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px 28px;
 align-items: stretch;
}

/*
 BATCH CARD "Admission Ledger" concept
 A card styled like a formal enrollment slip: a wax-seal
 stamp for the batch/level, a dashed perforation dividing
 header from body (like a ticket stub), a boarding-pass
 style info strip, and a faint 8-point star watermark
 echoing the hero banner's geometric corner motif.
 */
.batch-card {
 position: relative;
 background: #FFFBF3;
 border: 1px solid rgba(26,26,26,0.08);
 border-radius: 18px;
 padding: 20px;
 box-shadow:
 0 1px 2px rgba(26,26,26,0.05),
 0 8px 16px rgba(26,26,26,0.09),
 0 22px 34px rgba(26,26,26,0.07),
 inset 0 1px 0 rgba(255,255,255,0.7);
 display: flex;
 flex-direction: column;
 height: 100%;
 overflow: hidden;
 transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Page-fold corner, echoing the departments-page card */
.batch-card::after {
 content: '';
 position: absolute;
 right: 0;
 bottom: 0;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 0 28px 28px;
 border-color: transparent transparent #F5A623 transparent;
 filter: drop-shadow(-2px -2px 3px rgba(26,26,26,0.18));
 transition: border-width 0.35s cubic-bezier(0.34,1.56,0.64,1);
 z-index: 1;
 pointer-events: none;
}

.batch-card:hover {
 transform: translateY(-8px);
 box-shadow:
 0 2px 4px rgba(26,26,26,0.06),
 0 14px 24px rgba(26,26,26,0.11),
 0 32px 48px rgba(26,26,26,0.1),
 0 6px 16px rgba(245,166,35,0.22),
 inset 0 1px 0 rgba(255,255,255,0.8);
 border-color: rgba(245,166,35,0.35);
}
.batch-card:hover::after { border-width: 0 0 40px 40px; }

/* Image - full-width banner across the top of the card, same as the departments page */
.batch-card-image-wrap {
 position: relative;
 width: calc(100% + 40px);
 height: 180px;
 margin: -20px -20px 14px -20px;
 overflow: hidden;
 background: #E9F3EC;
 flex-shrink: 0;
}
.batch-card-image-wrap img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.batch-card:hover .batch-card-image-wrap img {
 transform: scale(1.06);
}
.batch-card-image-placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, #3D2B0F, #F5A623);
}
.batch-card-image-placeholder i {
 font-size: 2.4rem;
 color: rgba(255,255,255,0.55);
}

/* Body - padded content area below the image */
.batch-card-body {
 position: relative;
 z-index: 1;
 display: flex;
 flex-direction: column;
 flex: 1;
 padding: 0;
}

/* Badge - shown as a wax-seal style pill next to the title, matching the departments-page batch-count tag */
.batch-title-badge {
 font-family: 'Poppins', sans-serif;
 display: inline-flex;
 align-items: center;
 background: #1A1A1A;
 color: #F5A623;
 border: 1.5px dashed rgba(245,166,35,0.55);
 font-size: 0.66rem;
 font-weight: 700;
 letter-spacing: 0.3px;
 white-space: nowrap;
 padding: 5px 10px;
 border-radius: 999px;
}

/* Title */
.batch-title {
 position: relative;
 z-index: 1;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 4px 8px;
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: 1.02rem;
 font-weight: 700;
 color: #1A1A1A;
 padding-bottom: 14px;
 margin-bottom: 16px;
 line-height: 1.35;
 border-bottom: 2px dashed rgba(26,26,26,0.14);
}

/* Description - line-clamped + fixed min-height so every card
 ends up the same size no matter how much text a batch has */
.batch-desc {
 position: relative;
 z-index: 1;
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 0.87rem;
 color: #777;
 line-height: 1.65;
 margin-bottom: 18px;
 min-height: calc(1.65em * 3);
 display: -webkit-box;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* Button - solid dark pill CTA, same as the departments-page card button */
.btn-batch-detail {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 position: relative;
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 text-align: center;
 background: #1A1A1A;
 color: #ffffff;
 border: none;
 text-decoration: none;
 padding: 12px 16px;
 border-radius: 50px;
 font-size: 0.85rem;
 font-weight: 600;
 transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
 margin-top: auto;
}
.btn-batch-detail i {
 font-size: 0.75rem;
 transition: transform 0.3s ease;
}
.btn-batch-detail:hover {
 background: linear-gradient(135deg, #F5A623, #e09400);
 color: #1A1A1A;
 box-shadow: 0 8px 18px rgba(245,166,35,0.35);
}
.btn-batch-detail:hover i {
 transform: translateX(4px);
}

/* Batch responsive */
@media (max-width: 600px) {
 .batch-section { padding: 30px 12px 40px; }
 .batch-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
 .batch-card { padding: 12px; border-radius: 14px; }
 .batch-card-image-wrap { width: calc(100% + 24px); height: 100px; margin: -12px -12px 10px -12px; }
 .batch-card-image-placeholder i { font-size: 1.4rem; }
 .batch-card-body { padding: 0; }
 .batch-title { font-size: 0.8rem; padding-bottom: 8px; margin-bottom: 8px; }
 .batch-title-badge { font-size: 0.55rem; padding: 4px 8px; }
 .batch-desc { font-size: 0.65rem; line-height: 1.5; min-height: calc(1.5em * 2); margin-bottom: 10px; -webkit-line-clamp: 2; line-clamp: 2; }
 .btn-batch-detail { font-size: 0.65rem; padding: 8px 8px; gap: 4px; justify-content: center; }
 .btn-batch-detail i { font-size: 0.6rem; }
}

/*
 FEATURES SECTION
 Full-width layout + Neumorphic/3D Amber-Charcoal cards
 */
/*
 FEATURES SECTION "Seal-Medallion" concept
 Each card carries a pinned circular medallion (its icon)
 overlapping the top edge same visual language as the
 batch-card's wax-seal badge, tying the whole page together
 instead of a generic soft neumorphic box.
 */
.features-section {
 /* Fluid side padding shrinks the "empty gutter" feeling on
 large monitors while still breathing room on small screens.
 padding-bottom (not margin-bottom) so the spacing stays inside
 the section's own background — no raw gap exposed between
 this section and the next one. */
 padding-bottom: 60px;
 background: #ffffff;
}

.features-section-inner {
 /* Wider ceiling than before so the section actually uses the
 screen instead of stopping hard at 1200px */
 max-width: 1450px;
 margin: 0 auto;
}

.features-section-header {
 text-align: center;
 /* margin-bottom: 40px; */
}

.features-section-title {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: clamp(22px, 3.5vw, 32px);
 font-weight: 400;
 color: #1a1a2e;
}

/* Perfect 2-column grid */
.features-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 32px 32px;
 row-gap: 44px;
}

/* Ledger-style feature card, cream background matching the
 batch/department cards, with a dashed divider under the
 title tying it into the rest of the site's language. */
.feature-card {
 position: relative;
 background: #FFFBF3;
 border: 1px solid rgba(26,26,26,0.08);
 border-radius: 16px;
 padding: 28px 28px 28px;
 overflow: visible;
 box-shadow:
 0 1px 2px rgba(26,26,26,0.05),
 0 8px 16px rgba(26,26,26,0.08),
 0 20px 32px rgba(26,26,26,0.06),
 inset 0 1px 0 rgba(255,255,255,0.7);
 transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
 box-shadow 0.35s ease,
 border-color 0.35s ease;
}

.feature-card:hover {
 transform: translateY(-7px);
 box-shadow:
 0 2px 4px rgba(26,26,26,0.06),
 0 14px 24px rgba(26,26,26,0.1),
 0 30px 46px rgba(26,26,26,0.09),
 0 6px 16px rgba(245,166,35,0.2),
 inset 0 1px 0 rgba(255,255,255,0.8);
 border-color: rgba(245,166,35,0.4);
}

.feature-title {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: 1.3rem;
 font-weight: 700;
 color: #1a1a2e;
 padding-bottom: 14px;
 margin-bottom: 14px;
 line-height: 1.4;
 border-bottom: 2px dashed rgba(26,26,26,0.14);
}

.feature-desc {
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 1rem;
 color: #666;
 line-height: 1.85;
}

/* Features responsive */
@media (max-width: 1279px) and (min-width: 1024px) {
 .features-section-inner { max-width: 1200px; }
}
@media (max-width: 1023px) and (min-width: 601px) {
 .features-grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 40px; }
}
@media (max-width: 600px) {
 .features-section { padding: 30px 12px 40px; }
 .features-grid { grid-template-columns: 1fr; gap: 26px; }
 .feature-card { padding: 26px 18px 20px; border-radius: 14px; }
 .feature-card:hover { transform: translateY(-6px); }
 .feature-title { font-size: 1.05rem; padding-bottom: 10px; margin-bottom: 10px; }
 .feature-desc { font-size: 0.88rem; line-height: 1.75; }
}

/*
 TESTIMONIALS SECTION
 Scroll-snap carousel, Amber & Charcoal theme, matches the
 Seal-Medallion / ticket-stub visual language used above.
 */
.testimonials-section {
 padding: 20px 24px 80px;
 background: #f7f7f7;
}

.testimonials-section-inner {
 max-width: 1450px;
 margin: 0 auto;
}

.testimonials-section-header {
 text-align: center;
 margin-bottom: 10px;
}

/* Carousel shell arrows sit just outside the track */
.testimonial-carousel {
 position: relative;
 display: flex;
 align-items: center;
 gap: 45px;
}

.testimonial-track {
 flex: 1;
 display: flex;
 gap: 24px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scroll-behavior: smooth;
 padding: 6px 4px 20px;
 -ms-overflow-style: none;
 scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }

/* Nav arrows charcoal circles, amber on hover */
.testimonial-nav {
 flex-shrink: 0;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: none;
 background: #f7ad1fe0;
 color: #fff;
 font-size: 0.9rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 12px rgba(26,26,26,0.18);
 transition: background 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}
.testimonial-nav:hover { background: #F5A623; color: #1A1A1A; transform: translateY(-2px); }
.testimonial-nav.is-disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Card quote box with amber-topped border */
.testimonial-card {
 scroll-snap-align: start;
 flex: 0 0 calc((100% - 48px) / 3);
 background: #fff;
 border-radius: 16px;
 border-top: 4px solid #F5A623;
 padding: 26px 24px 24px;
 box-shadow:
 0 1px 2px rgba(26,26,26,0.05),
 0 8px 16px rgba(26,26,26,0.08),
 0 20px 32px rgba(26,26,26,0.06);
 display: flex;
 flex-direction: column;
 transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.testimonial-card:hover {
 transform: translateY(-6px);
 box-shadow:
 0 2px 4px rgba(26,26,26,0.06),
 0 14px 24px rgba(26,26,26,0.1),
 0 28px 44px rgba(26,26,26,0.09),
 0 6px 16px rgba(245,166,35,0.22);
}

.testimonial-stars {
 color: #F5A623;
 font-size: 0.85rem;
 letter-spacing: 2px;
 margin-bottom: 14px;
}
.testimonial-stars .far { color: #ddd; }

.testimonial-message {
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 0.9rem;
 color: #444;
 line-height: 1.85;
 margin-bottom: 20px;
 flex: 1;
}

.testimonial-person {
 display: flex;
 align-items: center;
 gap: 12px;
 padding-top: 16px;
 border-top: 1px solid rgba(26,26,26,0.08);
}

.testimonial-avatar {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid #F5A623;
 flex-shrink: 0;
}
.testimonial-avatar-placeholder {
 display: flex;
 align-items: center;
 justify-content: center;
 background: #1A1A1A;
 color: #F5A623;
 font-size: 1.1rem;
}

.testimonial-person-info {
 display: flex;
 flex-direction: column;
 gap: 2px;
 overflow: hidden;
}

.testimonial-name {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: 0.98rem;
 font-weight: 400;
 color: #1A1A1A;
}

.testimonial-role {
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 0.75rem;
 color: #888;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 1023px) and (min-width: 601px) {
 .testimonial-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
 .testimonials-section { padding: 10px 14px 50px; }
 .testimonial-carousel { gap: 0; }
 .testimonial-nav { display: none; } /* touch-swipe (see index.js) replaces arrows on phones frees up width for the card */
 .testimonial-card { flex: 0 0 92%; padding: 22px 20px 20px; }
 .testimonial-message { font-size: 0.9rem; line-height: 1.8; }
 .testimonial-avatar { width: 40px; height: 40px; }
 .testimonial-name { font-size: 0.86rem; }
 .testimonial-role { font-size: 0.68rem; }
}

/*
 QUICK DONATION SECTION Amber & Charcoal theme
 Single-row form ( / - / / )
 UI only for now submission wiring comes with the payment system.
 */
.donation-quick-section {
 padding: 20px 24px 90px;
 background: #ffffff;
}

.donation-quick-inner {
 max-width: 1100px;
 margin: 0 auto;
}

.donation-quick-header {
 text-align: center;
 margin-bottom: 6px;
}

.donation-quick-form {
 display: flex;
 align-items: flex-end;
 gap: 20px;
 max-width: 860px;
 margin: 0 auto;
 background: linear-gradient(135deg, #F5A623, #DB8E15);
 border-radius: 18px;
 padding: 34px 38px;
 box-shadow: 0 16px 34px rgba(245,166,35,0.28), 0 4px 12px rgba(26,26,26,0.08);
 flex-wrap: wrap;
}

.donation-field {
 flex: 1 1 200px;
 min-width: 240px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.donation-field label {
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: 1.05rem;
 font-weight: 400;
 color: #1A1A1A;
 display: flex;
 align-items: center;
 gap: 6px;
}

.donation-field label .req { color: #7a2b12; }

.donation-info-icon {
 font-size: 0.75rem;
 color: #1A1A1A;
 opacity: 0.6;
 cursor: help;
}

.donation-field select,
.donation-field input {
 font-family: 'Poppins', sans-serif;
 font-size: 0.95rem;
 color: #1A1A1A;
 background: #ffffff;
 border: 1px solid rgba(26,26,26,0.15);
 border-radius: 10px;
 padding: 14px 16px;
 outline: none;
 width: 100%;
 transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.donation-field select:focus,
.donation-field input:focus {
 border-color: #1A1A1A;
 box-shadow: 0 0 0 3px rgba(26,26,26,0.1);
}

/* Kill the browser's default red glow/outline on empty required
 fields (Firefox especially highlights untouched required selects
 in red) validation styling comes later with the payment logic */
.donation-field select:invalid,
.donation-field input:invalid,
.donation-field select:required,
.donation-field input:required {
 box-shadow: none;
 outline: none;
}
.donation-field select:-moz-ui-invalid,
.donation-field input:-moz-ui-invalid {
 box-shadow: none;
}

.donation-amount-wrap {
 position: relative;
 display: flex;
 align-items: center;
}

.donation-currency {
 position: absolute;
 left: 14px;
 font-weight: 600;
 color: #1A1A1A;
 pointer-events: none;
}

.donation-amount-wrap input { padding-left: 30px; }

.btn-donation-submit {
 flex: 0 0 auto;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 height: 52px;
 background: #1A1A1A;
 color: #fff;
 border: none;
 border-radius: 10px;
 padding: 0 32px;
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: 1.05rem;
 font-weight: 400;
 cursor: pointer;
 transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-donation-submit:hover {
 background: #1A1A1A;
 color: #F5A623;
 transform: translateY(-2px);
 box-shadow: 0 10px 20px rgba(26,26,26,0.25);
}

/* Success/fail banner after gateway redirect back to this section */
.donation-banner {
 display: flex;
 align-items: center;
 gap: 10px;
 justify-content: center;
 max-width: 700px;
 margin: 0 auto 18px;
 padding: 14px 18px;
 border-radius: 12px;
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 0.9rem;
 text-align: center;
}
.donation-banner-success {
 background: rgba(245,166,35,0.1);
 color: #F5A623;
 border: 1px solid rgba(245,166,35,0.3);
}
.donation-banner-fail {
 background: rgba(179,38,30,0.08);
 color: #b3261e;
 border: 1px solid rgba(179,38,30,0.3);
}

/* Inline submit error hidden until JS fills it in */
.donation-quick-error {
 display: none;
 text-align: center;
 max-width: 700px;
 margin: 14px auto 0;
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 0.85rem;
 color: #b3261e;
}
.donation-quick-error.is-visible { display: block; }

/* Donation responsive */
@media (max-width: 1023px) and (min-width: 601px) {
 .donation-quick-form { padding: 24px 22px; }
}
@media (max-width: 600px) {
 .donation-quick-section { padding: 10px 14px 60px; }
 .donation-quick-form { flex-direction: column; align-items: stretch; padding: 22px 18px; gap: 14px; }
 .donation-field { flex: 0 0 auto; min-width: 100%; }
 .btn-donation-submit { width: 100%; }
}
/*
 INTRO VIDEO SECTION
 */
.intro-video-section {
 margin-bottom: 20px;
 margin-top: -90px;
 padding: 60px 31px 60px;
 background: #f7f7f7;
 overflow: hidden;
}
.intro-video-heading-wrap {
 position: relative;
 z-index: 1;
 max-width: 1140px;
 margin: 0 auto;
}
/* soft ambient glows behind the card, amber tones, on brand */
.intro-video-section::before,
.intro-video-section::after {
 content: '';
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 z-index: 0;
}
.intro-video-section::before {
 top: -80px;
 left: 6%;
 width: 340px;
 height: 340px;
 background: radial-gradient(circle, rgba(245,166,35,0.14), transparent 70%);
}
.intro-video-section::after {
 bottom: -100px;
 right: 8%;
 width: 380px;
 height: 380px;
 background: radial-gradient(circle, rgba(193,127,23,0.12), transparent 70%);
}

.intro-video-inner {
 position: relative;
 z-index: 1;
 max-width: 1140px;
 margin: 0 auto;
 background: #fff;
 border-radius: 20px;
 border: 1px solid rgba(26, 26, 26, 0.08);
 box-shadow: 0 3px 16px rgba(26,26,26,0.06);
 overflow: hidden;
 display: grid;
 grid-template-columns: 1.0fr 1fr;
 align-items: stretch;
}
.intro-video-media { position: relative; background: #3D2B0F; min-height: 320px; }
.intro-video-frame { position: relative; width: 100%; height: 100%; aspect-ratio: 16 / 9; }
.intro-video-frame iframe,
.intro-video-frame video {
 position: absolute; inset: 0; width: 100%; height: 100%;
 display: block; border: none; object-fit: cover; background: #000;
}
.intro-video-empty {
 display: flex; align-items: center; justify-content: center;
 background: linear-gradient(135deg, #3D2B0F, #F5A623);
}
.intro-video-empty i { font-size: 3rem; color: rgba(255,255,255,0.5); }

.intro-video-text {
 position: relative;
 padding: 30px 38px;
 flex-direction: column;
 justify-content: center;
 background: #FCFAF6;
 overflow: hidden;
}
/* subtle glow tucked in the corner of the text panel */
.intro-video-text::before {
 content: '';
 position: absolute;
 top: -50px;
 right: -50px;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(245,166,35,0.13), transparent 68%);
 pointer-events: none;
}
.intro-video-title {
 position: relative;
 z-index: 1;
 font-family: 'AdorNoirrit', 'Poppins', sans-serif;
 font-size: clamp(20px, 2.6vw, 28px);
 font-weight: 400; color: #1A1A1A;
 margin-bottom: 16px; padding-bottom: 12px;
}
.intro-video-title::after {
 content: ''; position: absolute; left: 0; bottom: 0;
 width: 46px; height: 3px; border-radius: 2px; background: #F5A623;
}
.intro-video-desc {
 position: relative;
 z-index: 1;
 font-family: 'TiroBangla', 'Poppins', sans-serif;
 font-size: 0.95rem; line-height: 1.85; color: #555;
}

@media (max-width: 860px) {
 .intro-video-inner { grid-template-columns: 1fr; }
 .intro-video-media { min-height: 220px; }
 .intro-video-text { padding: 26px 22px; }
}
@media (max-width: 600px) {
 .intro-video-section { padding: 36px 12px 30px; }
 .intro-video-inner { border-radius: 14px; }
 .intro-video-title { font-size: 18px; }
 .intro-video-desc { font-size: 13px; line-height: 1.75; }
}