/* ===== About page — shared section utilities ===== */
.df-about-section{padding:100px 15px;}
.df-about-container{max-width:1200px;margin:0 auto;}
.df-about-eyebrow{display:block;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#c88a32;margin:0 0 14px;text-align:center;}
.df-about-heading{font-family:"Poppins", Sans-serif;font-size:36px;line-height:1.25;font-weight:600;color:#171717;margin:0 0 20px;text-align:center;}
.df-about-heading span{color:#c88a32;}
.df-about-text{font-family:"DM Sans", Sans-serif;font-size:17px;line-height:28px;font-weight:400;color:#3a3a3a;margin:0 0 18px;}
.df-about-center{text-align:center;}
.df-about-lede{max-width:760px;margin:0 auto 18px;text-align:center;}
.df-about-narrow{max-width:820px;margin:0 auto;text-align:center;}

.df-about-btn{display:inline-flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#ffffff;background-color:#c88a32;padding:16px 32px;border-radius:300px;text-decoration:none;transition:background-color .3s,color .3s;}
.df-about-btn:hover{background-color:#3a0403;color:#ffffff;}
.df-about-btn--dark{background-color:#5a0808;color:#ffffff;}
.df-about-btn--dark:hover{background-color:#3a0403;color:#ffffff;}
.df-about-btn svg{width:16px;height:16px;flex:0 0 auto;}

/* 01 Hero */
.df-about-hero{position:relative;padding:263px 20px 100px;background-image:linear-gradient(180deg, #3a0403b8 31%, #3a04036b 75%), url(./banner-image.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;text-align:center;}
.df-about-hero-inner{max-width:780px;margin:0 auto;}
.df-about-hero .df-about-eyebrow{color:#c88a32;}
.df-about-hero-title{font-family:"Poppins", Sans-serif;font-size:46px;line-height:1.2;font-weight:600;color:#ffffff;margin:0 0 22px;}
.df-about-hero-text{font-family:"DM Sans", Sans-serif;font-size:18px;line-height:29px;color:#f2ede1;margin:0 0 34px;}

/* 02 About Darul Qur'an — 2 column */
#about-institute{padding-top:100px;}
.df-about-intro-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:stretch;}
.df-about-intro-img{width:100%;height:100%;object-fit:cover;border-radius:16px;}
.df-about-intro-content .df-about-heading,
.df-about-intro-content .df-about-eyebrow{text-align:left;}
.df-about-intro-content .df-about-text{text-align:left;}
.df-about-stats{display:flex;gap:56px;margin-top:32px;flex-wrap:wrap;}
.df-about-stat{flex:0 0 auto;}
.df-about-stat-number{display:block;font-family:"Poppins", Sans-serif;font-size:34px;font-weight:600;color:#c88a32;}
.df-about-stat-label{display:block;font-family:"DM Sans", Sans-serif;font-size:16px;color:#555;margin-top:4px;}

/* 03/04 Our Purpose + Our Mission — side by side */
.df-about-pm-split{display:grid;grid-template-columns:1fr 1fr;}
.df-about-pm-panel{display:flex;align-items:center;padding:100px 40px;}
.df-about-pm-inner{max-width:520px;margin:0 auto;text-align:center;}

.df-about-pm-purpose{background-image:linear-gradient(rgba(90,8,8,0.95), rgba(90,8,8,0.95)), url("./footer-bg.png");background-position:center;background-repeat:no-repeat;background-size:cover;}
.df-about-pm-purpose .df-about-heading{color:#ffffff;}
.df-about-pm-purpose .df-about-text{color:#e9e4d8;}

.df-about-pm-mission{position:relative;overflow:hidden;background-color:#faf8f2;}
.df-about-pm-mission::before{content:"";position:absolute;inset:0;background-image:url("./iqra-bismi.png");background-position:center;background-repeat:no-repeat;background-size:380px;opacity:0.06;pointer-events:none;}
.df-about-pm-mission .df-about-pm-inner{position:relative;}

/* 05 More Than Memorization */
.df-about-more{background-color:#ffffff;}
.df-about-more-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:60px;align-items:center;}
.df-about-more-content .df-about-eyebrow,
.df-about-more-content .df-about-heading,
.df-about-more-content .df-about-text{text-align:left;}
.df-about-more-list{display:flex;flex-direction:column;gap:26px;}
.df-about-more-item{display:flex;align-items:center;gap:18px;}
.df-about-more-item-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#171717;}

.df-about-card-icon{width:60px;height:60px;flex:0 0 60px;border-radius:50%;border:2px solid #c88a32;display:flex;align-items:center;justify-content:center;}
.df-about-card-icon i,
.df-about-card-icon .df-about-svg-icon{font-size:24px;width:24px;height:24px;color:#171717;}

/* 07 Our Vision — light */
.df-about-vision{background-color:#faf8f2;}
.df-about-vision .df-about-heading{color:#171717;}
.df-about-vision-sub{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;color:#c88a32;text-align:center;margin:0 0 40px;}
.df-about-vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.df-about-vision-item{display:flex;align-items:center;gap:14px;background:#ffffff;border:1px solid rgba(90,8,8,0.15);border-radius:12px;padding:20px 22px;}
.df-about-vision-item .df-about-card-icon{width:48px;height:48px;flex:0 0 48px;margin:0;border-color:#c88a32;}
.df-about-vision-item .df-about-card-icon i,
.df-about-vision-item .df-about-card-icon .df-about-svg-icon{font-size:18px;width:18px;height:18px;color:#c88a32;}
.df-about-vision-item span{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:700;color:#171717;}

/* 08/09 Learn. Grow. Serve. + Final CTA — side by side */
.df-about-lg-split{display:grid;grid-template-columns:1fr 1fr;}
.df-about-lg-panel{display:flex;align-items:center;justify-content:center;padding:100px 40px;text-align:center;}

.df-about-lgs{background-color:#c88a32;}
.df-about-lgs .df-about-heading{color:#ffffff;}
.df-about-lgs .df-about-text{color:#ffffff;}
.df-about-lgs .df-about-lede{color:#ffffff;}

/* 09 Final CTA — dark band w/ pattern */
.df-about-cta{background-image:linear-gradient(rgba(90,8,8,0.95), rgba(90,8,8,0.95)), url("./footer-bg.png");background-position:center;background-repeat:no-repeat;background-size:cover;}
.df-about-cta .df-about-heading{color:#ffffff;}
.df-about-cta .df-about-text{color:#e9e4d8;}

@media (max-width:991px){
	.df-about-pm-split{grid-template-columns:1fr;}
	.df-about-pm-panel{padding:70px 30px;}
	.df-about-lg-split{grid-template-columns:1fr;}
	.df-about-lg-panel{padding:70px 30px;}
	.df-about-intro-grid{grid-template-columns:1fr;}
	.df-about-intro-img{min-height:320px;}
	.df-about-intro-content .df-about-heading,
	.df-about-intro-content .df-about-eyebrow,
	.df-about-intro-content .df-about-text{text-align:center;}
	.df-about-vision-grid{grid-template-columns:repeat(2,1fr);}
	.df-about-more-grid{grid-template-columns:1fr;gap:36px;}
	.df-about-more-content .df-about-eyebrow,
	.df-about-more-content .df-about-heading,
	.df-about-more-content .df-about-text{text-align:center;}
	.df-about-more-list{max-width:360px;margin:0 auto;}
}
@media (max-width:767px){
	.df-about-section{padding:60px 15px;}
	.df-about-hero{padding:120px 20px 80px;}
	.df-about-hero-title{font-size:32px;}
	.df-about-heading{font-size:28px;}
	.df-about-vision-grid{grid-template-columns:1fr;}
	.df-about-stats{gap:22px;}
}