/* =========================================================
   MODERN CSS - Ma'had Izzatuna Islamic School
   Design: Clean, modern, Islamic aesthetic
   Override file - loaded after style.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Amiri:wght@400;700&display=swap');

/* =========================================================
   CSS VARIABLES
   ========================================================= */
:root {
  --primary: #1a6b4a;         /* Deep Islamic green */
  --primary-light: #2d9068;   /* Medium green */
  --primary-dark: #0f4a32;    /* Dark green */
  --accent: #c8a84b;          /* Gold/amber accent */
  --accent-light: #e8c96a;    /* Light gold */
  --accent-dark: #a88830;     /* Dark gold */
  --bg-light: #f8f6f1;        /* Warm off-white */
  --bg-white: #ffffff;
  --bg-dark: #0f2d1f;         /* Very dark green */
  --text-dark: #1a2820;       /* Near black */
  --text-mid: #3d5248;        /* Mid dark green */
  --text-muted: #7a8f85;      /* Muted text */
  --border: #e0ddd5;          /* Soft border */
  --shadow-sm: 0 2px 12px rgba(26,107,74,0.08);
  --shadow-md: 0 8px 32px rgba(26,107,74,0.12);
  --shadow-lg: 0 16px 48px rgba(26,107,74,0.16);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   GLOBAL RESET & BASE
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background-color: var(--bg-light) !important;
  color: var(--text-dark) !important;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: var(--text-dark);
}

a {
  transition: var(--transition);
}

img {
  max-width: 100%;
}

section {
  position: relative;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.header-topbar {
  background: var(--primary-dark) !important;
  padding: 10px 0 !important;
  border-bottom: 2px solid var(--accent) !important;
}

.header-top_address {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.header-top_list {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-top_list span {
  color: var(--accent-light) !important;
  font-size: 14px;
}

.header-top_login,
.header-top_login2 {
  display: none !important; /* clean topbar */
}

/* =========================================================
   NAVBAR
   ========================================================= */
[data-toggle="affix"],
[data-toggle="affix"] > * {
  background: var(--bg-white) !important;
}

.nav-menu2 {
  padding: 0 !important;
}

.navbar2,
.navbar.navbar2 {
  background: var(--bg-white) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar-nav > li {
  margin: 0 4px !important;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light2 .navbar-nav .nav-link {
  color: var(--text-dark) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 28px 14px !important;
  letter-spacing: 0.3px;
  position: relative;
  text-transform: uppercase;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.navbar-light .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: var(--transition);
}

.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after {
  width: 60%;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active > .nav-link {
  color: var(--primary) !important;
}

.nav-brand2 img,
.navbar-brand img {
  height: 56px !important;
  width: auto !important;
}

.navbar-toggler,
.navbar-toggler2 {
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  background: transparent !important;
  margin: 12px 0 !important;
}

.icon-menu {
  color: var(--primary) !important;
  font-size: 18px;
}

/* Sticky nav */
.affix [data-toggle="affix"],
.affix {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* =========================================================
   HERO SLIDER
   ========================================================= */
.slider_img {
  position: relative;
  overflow: hidden;
}

.slider_img img {
  height: 600px !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: brightness(0.65) !important;
}

@media (max-width: 768px) {
  .slider_img img {
    height: 400px !important;
  }
}

.carousel-indicators {
  bottom: 24px !important;
}

.carousel-indicators li {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.5) !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
  margin: 0 5px !important;
  transition: var(--transition) !important;
}

.carousel-indicators .active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  width: 32px !important;
  border-radius: 5px !important;
}

.carousel-caption {
  bottom: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 10% !important;
  right: 10% !important;
  text-align: center !important;
  padding: 0 !important;
}

.slider_title h1 {
  font-size: 52px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px;
}

.slider_title h4 {
  font-size: 18px !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3) !important;
}

.slider-btn {
  margin-top: 32px !important;
}

.slider-btn .btn-default {
  background: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  color: #fff !important;
  padding: 14px 40px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  transition: var(--transition) !important;
}

.slider-btn .btn-default:hover {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,168,75,0.4) !important;
}

.fa-slider {
  background: rgba(255,255,255,0.15) !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  border-radius: 50% !important;
  width: 48px;
  height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  padding: 0 !important;
  backdrop-filter: blur(4px);
  transition: var(--transition) !important;
}

.fa-slider:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.carousel-control-prev,
.carousel-control-next {
  width: 60px !important;
  opacity: 1 !important;
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */
div[style*="position:fixed"] {
  left: 24px !important;
  bottom: 24px !important;
}

div[style*="position:fixed"] button {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  border: none !important;
  border-radius: 50px !important;
  height: 48px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

div[style*="position:fixed"] button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.5) !important;
}

div[style*="position:fixed"] button img {
  width: 22px !important;
  height: 22px !important;
}

/* =========================================================
   ABOUT SECTION (Selamat Datang)
   ========================================================= */
.about.about-style2 {
  padding: 80px 0 !important;
  background: var(--bg-white) !important;
  position: relative;
  overflow: hidden;
}

.about.about-style2::before {
  content: '﷽';
  position: absolute;
  top: -20px;
  right: -40px;
  font-size: 180px;
  color: rgba(26,107,74,0.04);
  font-family: 'Amiri', serif;
  line-height: 1;
  pointer-events: none;
}

.about.about-style2 h2 {
  color: var(--primary-dark) !important;
  font-size: 36px !important;
  margin-bottom: 16px !important;
  position: relative;
  text-align: left !important;
}

.about.about-style2 h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primary-light));
  border-radius: 2px;
  margin-top: 12px;
}

.about.about-style2 p {
  color: var(--text-mid) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  text-align: left !important;
}

.about-img {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 4px solid var(--border) !important;
}

/* =========================================================
   LATEST ARTICLES (Our Courses section)
   ========================================================= */
.our_courses {
  background: var(--bg-light) !important;
  padding: 80px 0 !important;
}

.our_courses h2 {
  font-size: 36px !important;
  color: var(--primary-dark) !important;
  margin-bottom: 8px !important;
  font-weight: 800 !important;
}

.our_courses h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primary-light));
  border-radius: 2px;
  margin-top: 12px;
  margin-bottom: 32px;
}

.our_courses .courses_box {
  background: var(--bg-white) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  transition: var(--transition) !important;
  min-height: unset !important;
}

.our_courses .courses_box:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--primary-light) !important;
}

.course-img-wrap {
  overflow: hidden;
  height: 200px;
}

.course-img-wrap img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.our_courses .courses_box:hover .course-img-wrap img {
  transform: scale(1.05);
}

.course-box-content {
  display: block !important;
  padding: 20px !important;
  text-decoration: none !important;
}

.course-box-content h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  text-align: left !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  transition: color 0.2s !important;
}

.our_courses .courses_box:hover .course-box-content h3 {
  color: var(--primary) !important;
}

.btn-courses {
  background: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  color: #fff !important;
  padding: 14px 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  transition: var(--transition) !important;
  margin-top: 16px;
}

.btn-courses:hover {
  background: transparent !important;
  color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm) !important;
}

/* =========================================================
   EVENTS / ANNOUNCEMENT SECTION
   ========================================================= */
.event {
  background: var(--bg-white) !important;
  padding: 80px 0 !important;
  border-top: 1px solid var(--border);
}

.event h2 {
  color: var(--primary-dark) !important;
  font-size: 36px !important;
}

.event-img2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-img2 .row {
  background: var(--bg-light) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  margin: 0 0 16px 0 !important;
  transition: var(--transition) !important;
  align-items: center;
}

.event-img2 .row:hover {
  border-color: var(--primary-light) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateX(4px);
}

.event-img2 .row img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  filter: hue-rotate(100deg) saturate(0.6) !important;
}

.event-img2 h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.event-img2 h3 a {
  color: var(--text-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.event-img2 h3 a:hover {
  color: var(--primary) !important;
}

.event-img2 span {
  font-size: 12px !important;
  color: var(--accent-dark) !important;
  font-weight: 600 !important;
  background: rgba(200,168,75,0.12) !important;
  padding: 2px 10px !important;
  border-radius: 50px !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.event-img2 p {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  margin: 4px 0 0 !important;
  line-height: 1.6 !important;
}

/* =========================================================
   STATS COUNTER SECTION
   ========================================================= */
.detailed_chart {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-dark) 100%) !important;
  padding: 60px 0 !important;
  position: relative;
  overflow: hidden;
}

.detailed_chart::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(200,168,75,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(200,168,75,0.10) 0%, transparent 50%);
  pointer-events: none;
}

.detailed_chart .col-md-3,
.detailed_chart [class*="col-"] {
  text-align: center !important;
  padding: 24px !important;
}

.chart-img {
  margin-bottom: 16px !important;
}

.chart-img img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9;
}

.chart-text p {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  letter-spacing: 0.5px;
}

.chart-text .counter {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--accent-light) !important;
  display: block !important;
  line-height: 1.1;
}

.chart_bottom {
  border-right: 1px solid rgba(255,255,255,0.15) !important;
}

@media (max-width: 768px) {
  .chart_bottom {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    margin-bottom: 8px !important;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  background: var(--bg-dark) !important;
  padding: 72px 0 40px !important;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
}

.foot-logo {
  padding: 0 0 24px !important;
}

.foot-logo img {
  height: 56px !important;
  width: auto !important;
  margin-bottom: 16px !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9;
}

.foot-logo p {
  color: rgba(255,255,255,0.55) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  padding: 0 !important;
}

footer h3 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 0 16px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

footer h3::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: 10px;
}

.sitemap ul {
  padding: 0 !important;
  margin: 0 !important;
}

.sitemap ul li {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.sitemap ul li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 10px 0 !important;
  display: block !important;
  transition: var(--transition) !important;
}

.sitemap ul li a:hover,
.sitemap ul li :hover {
  color: var(--accent-light) !important;
  padding-left: 6px !important;
  text-decoration: none !important;
}

.address p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  padding: 0 0 12px !important;
}

.address p span {
  color: rgba(255,255,255,0.85) !important;
}

/* Social Icons */
.footer-social-icons {
  display: flex !important;
  gap: 10px !important;
  padding: 8px 0 0 !important;
  flex-wrap: wrap;
}

.footer-social-icons li {
  list-style: none !important;
  margin: 0 !important;
  float: none !important;
}

.footer-social-icons li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-size: 16px !important;
  transition: var(--transition) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

.footer-social-icons li a:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(200,168,75,0.4) !important;
}

.fa-fb, .fa-in, .fa-tw {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* =========================================================
   ABOUT / PROFIL PAGE
   ========================================================= */
.welcome_about {
  padding: 72px 0 !important;
  background: var(--bg-white) !important;
}

.welcome_about:nth-child(even) {
  background: var(--bg-light) !important;
}

.welcome_about h2 {
  color: var(--primary-dark) !important;
  font-size: 32px !important;
  margin-bottom: 20px !important;
  position: relative;
}

.welcome_about h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primary-light));
  border-radius: 2px;
  margin-top: 12px;
}

.welcome_about h3 {
  color: var(--primary) !important;
  font-size: 20px !important;
  margin: 20px 0 8px !important;
}

.welcome_about p {
  color: var(--text-mid) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.welcome_about img {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 4px solid var(--border) !important;
}

/* =========================================================
   BLOG PAGE
   ========================================================= */
.our_blog {
  background: var(--bg-light) !important;
  padding: 80px 0 !important;
}

.our_blog h2 {
  color: var(--primary-dark) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
}

.blog_box {
  background: var(--bg-white) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: var(--transition) !important;
  margin-bottom: 28px !important;
}

.blog_box:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--primary-light) !important;
}

.blog-img img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.blog_box:hover .blog-img img {
  transform: scale(1.05) !important;
}

.blog-content {
  padding: 20px !important;
}

.blog-content h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

.blog-content h3 a {
  color: var(--text-dark) !important;
  text-decoration: none !important;
}

.blog-content h3 a:hover {
  color: var(--primary) !important;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact {
  padding: 80px 0 !important;
  background: var(--bg-light) !important;
}

.contact h2 {
  color: var(--primary-dark) !important;
}

.contact .form-control {
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: border-color 0.2s !important;
  background: var(--bg-white) !important;
}

.contact .form-control:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(26,107,74,0.1) !important;
  outline: none !important;
}

/* =========================================================
   GALLERY PAGE
   ========================================================= */
.gallery {
  padding: 80px 0 !important;
  background: var(--bg-light) !important;
}

.gallery h2 {
  color: var(--primary-dark) !important;
}

.gallery img {
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
}

.gallery img:hover {
  transform: scale(1.03) !important;
  box-shadow: var(--shadow-md) !important;
}

/* =========================================================
   PAGE BANNER / BREADCRUMB
   ========================================================= */
.about-nav,
.breadcrumb-nav,
.page-header {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  padding: 60px 0 !important;
}

.about-nav h1,
.about-nav h2 {
  color: #fff !important;
}

/* =========================================================
   PENGUMUMAN / ANNOUNCEMENT
   ========================================================= */
.pengumuman-item,
.announcement-card {
  background: var(--bg-white) !important;
  border-radius: var(--radius-md) !important;
  border-left: 4px solid var(--primary) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
}

.pengumuman-item:hover {
  border-left-color: var(--accent) !important;
  transform: translateX(4px) !important;
}

/* =========================================================
   DOWNLOAD / PPDB
   ========================================================= */
.download-item,
table.table {
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
}

table.table th {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  border: none !important;
}

table.table td {
  padding: 12px 16px !important;
  border-color: var(--border) !important;
  font-size: 14px !important;
}

table.table tbody tr:hover {
  background: rgba(26,107,74,0.05) !important;
}

/* =========================================================
   GENERIC BUTTONS
   ========================================================= */
.btn-default {
  background: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  color: #fff !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  transition: var(--transition) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.btn-default:hover,
.btn-default:focus {
  background: transparent !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,107,74,0.2) !important;
}

/* =========================================================
   ISLAMIC GEOMETRIC DECORATION
   ========================================================= */
.our_courses::before,
.event::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0L37 13L51 13L40 22L44 36L30 27L16 36L20 22L9 13L23 13Z' fill='none' stroke='%231a6b4a' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.4;
  pointer-events: none;
}

/* =========================================================
   SECTION HEADERS (universal)
   ========================================================= */
.section-header {
  margin-bottom: 48px;
}

.section-header h2 {
  color: var(--primary-dark);
  font-size: 36px;
  font-weight: 800;
}

.section-label {
  display: inline-block;
  background: rgba(26,107,74,0.1);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 12px;
}

/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */
@media (max-width: 991px) {
  .slider_title h1 {
    font-size: 36px !important;
  }

  .navbar-light .navbar-nav .nav-link {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-dark) !important;
  }

  .navbar-light .navbar-nav .nav-link::after {
    display: none !important;
  }

  .our_courses h2,
  .about.about-style2 h2,
  .event h2 {
    font-size: 28px !important;
  }
}

@media (max-width: 576px) {
  .header-top_address {
    flex-direction: column;
    gap: 8px;
  }

  .slider_title h1 {
    font-size: 26px !important;
  }

  .slider_title h4 {
    font-size: 15px !important;
  }

  .chart-text .counter {
    font-size: 36px !important;
  }
}

/* =========================================================
   SMOOTH SCROLL INDICATOR
   ========================================================= */
html::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 9999;
  width: 0%;
  animation: none;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination .page-link {
  color: var(--primary) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  margin: 0 2px;
}

.pagination .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  background: var(--bg-light) !important;
  color: var(--primary-dark) !important;
}

/* =========================================================
   MISC UTILITIES
   ========================================================= */
.text-islamic-green { color: var(--primary) !important; }
.bg-islamic-green { background: var(--primary) !important; }
.text-islamic-gold { color: var(--accent) !important; }
.divider-gold {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 32px 0;
}