/* ==========================================================================
   AL-FALAH SCHOOL KIKAMBALA - MOBILE RESPONSIVENESS & TOUCH OPTIMIZATION
   Comprehensive, Production-Grade Responsive Architecture
   Targeting: Samsung Galaxy S8 (360px), iPhone 14 Pro Max (430px), Narrow 320px+
   Preserving: Desktop/Tablet Grids, Existing Brand Identity & Functionality
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS, SAFE AREAS & OVERFLOW CONTAINMENT
   -------------------------------------------------------------------------- */
:root {
  --af-mobile-gap: 14px;
  --af-touch-target: 44px;
  --af-theme-green: #095c32;
  --af-theme-green-light: #0c6d3b;
  --af-theme-accent: #266e00;
}

html {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  position: relative;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Ensure long unbroken text never causes horizontal layout blowout */
p, h1, h2, h3, h4, h5, h6, a, span, li, label, .box-title, .sec-title, .hero-title {
  overflow-wrap: break-word !important;
  word-break: break-word;
}

/* Offcanvas Drawers & Overlays - Guaranteed Fixed Positioning & Zero Flow Impact */
.preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.preloader.dismissed,
.preloader[style*="display: none"],
.preloader[style*="opacity: 0"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.sidemenu-wrapper {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 100% !important;
  z-index: 999998 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.sidemenu-wrapper.show {
  width: 100% !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.popup-search-box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999997 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.popup-search-box.show {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.th-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.th-menu-wrapper.th-body-visible {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fluid responsive images and media */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Minimum accessible touch target for interactive elements */
button, 
.th-btn, 
.th-menu-toggle, 
.sideMenuCls, 
.searchClose,
.hero-video-modal-close,
.mobile-slider-dot {
  min-height: var(--af-touch-target);
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   2. FLUID TYPOGRAPHY SYSTEM (clamp() FOR HARMONIOUS SCALE)
   -------------------------------------------------------------------------- */
/* Hero Headings */
.hero-title,
.hero-style1 .hero-title,
.hero-style2 .hero-title,
.hero-style3 .hero-title,
.h1, h1 {
  font-size: clamp(26px, 6.2vw, 56px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: clamp(14px, 3vw, 24px) !important;
}

/* Section Headings */
.sec-title,
.h2, h2 {
  font-size: clamp(21px, 5vw, 38px) !important;
  line-height: 1.25 !important;
  margin-bottom: clamp(12px, 2.5vw, 20px) !important;
}

/* Card & Widget Titles */
.box-title,
.h3, h3 {
  font-size: clamp(17px, 3.8vw, 24px) !important;
  line-height: 1.32 !important;
  margin-bottom: 10px !important;
}

.h4, h4 {
  font-size: clamp(15px, 3vw, 20px) !important;
  line-height: 1.35 !important;
}

.h5, h5 {
  font-size: clamp(14px, 2.6vw, 18px) !important;
  line-height: 1.4 !important;
}

.h6, h6 {
  font-size: clamp(13px, 2.2vw, 16px) !important;
  line-height: 1.4 !important;
}

/* Section Subtitles */
.sub-title {
  font-size: clamp(12px, 2.5vw, 14px) !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

/* Body & Description Text */
.sec-text,
.sec-text.style2,
.hero-text,
.hero-subtitle,
.box-text,
p {
  font-size: clamp(14px, 1.8vw + 6px, 16px);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE SECTION SPACING & CONTAINER PADDING
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .space {
    padding-top: clamp(48px, 9vw, 80px) !important;
    padding-bottom: clamp(48px, 9vw, 80px) !important;
  }
  .space-top {
    padding-top: clamp(48px, 9vw, 80px) !important;
  }
  .space-bottom {
    padding-bottom: clamp(48px, 9vw, 80px) !important;
  }
  .title-area.mb-50,
  .title-area.mb-60,
  .title-area.mb-40 {
    margin-bottom: clamp(24px, 5vw, 36px) !important;
  }
}

@media (max-width: 575px) {
  .container, 
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sub-title {
    padding-left: 32px !important;
  }
  .sub-title::before {
    width: 22px !important;
  }
}

@media (max-width: 375px) {
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   4. NAVIGATION, TOP BAR, HEADER & MOBILE MENU
   -------------------------------------------------------------------------- */
/* Top Contact Bar - Phone View: Email Left, Socials Right in 1 Single Row, No Phone Number */
@media (max-width: 767px) {
  .header-top {
    padding: 6px 0 !important;
    font-size: 11.5px !important;
  }
  .header-top .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .header-top .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .header-top .col-auto {
    padding: 0 !important;
  }
  .header-top-notice {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-top-phone {
    display: none !important;
  }
  .header-top-email {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
  }
  .header-top-email a {
    color: #ffffff !important;
    text-decoration: none !important;
  }
  .header-top-social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-top-social a {
    color: #ffffff !important;
    font-size: 11px !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transition: background 0.2s ease !important;
  }
  .header-top-social a:hover,
  .header-top-social a:active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
  }
}

/* Sticky Header on Mobile (Top Bar & Navbar Pinned Together) */
@media (max-width: 1199px) {
  .th-header,
  header.th-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  }
  .header-top {
    position: relative !important;
    top: 0 !important;
    z-index: 1001 !important;
  }
  .header-middle {
    position: relative !important;
    top: 0 !important;
    z-index: 1002 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
  }
  .header-middle .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .header-middle .row {
    margin: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .header-middle .header-logo img {
    max-height: 44px !important;
    max-width: 145px !important;
    width: auto !important;
    height: auto !important;
  }
  .header-middle-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .header-user-profile {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .header-user-profile .user-avatar-circle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 15px !important;
  }
  .header-user-profile .user-text-content {
    margin-left: 6px !important;
  }
  .user-welcome-label {
    display: none !important;
  }
  .user-login-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    color: #095c32 !important;
  }
  .header-middle .th-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
  }
  .header-middle .th-menu-toggle:hover,
  .header-middle .th-menu-toggle:active {
    background: #e2e8f0 !important;
    color: var(--af-theme-green) !important;
  }

  /* In the navbar: remove make donation button and eliminate empty navbar bar on phone view for home page */
  .shofy-menu-area,
  .header-default .sticky-wrapper,
  .header-layout1 .sticky-wrapper {
    display: none !important;
  }
  .menu-area .header-donate-btn,
  .shofy-menu-area .header-donate-btn {
    display: none !important;
  }
  .header-first-btn-col,
  .curriculum-download-btn,
  .header-sticky-logo {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .header-middle .header-logo img {
    max-height: 40px !important;
    max-width: 130px !important;
  }
  .user-login-link {
    font-size: 12px !important;
  }
  .header-middle-actions {
    gap: 8px !important;
  }
  .header-middle .th-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  .header-middle .header-logo img {
    max-height: 34px !important;
    max-width: 105px !important;
  }
  .header-user-profile .user-text-content {
    display: none !important;
  }
  .header-middle .th-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 430px) {
  .header-donate-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .header-donate-btn i {
    margin-right: 4px !important;
  }
}

@media (max-width: 360px) {
  .header-sticky-logo img {
    max-height: 36px !important;
    max-width: 105px !important;
  }
  .header-donate-btn {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }
  .th-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin-left: 6px !important;
  }
}

/* Mobile Offcanvas Navigation Drawer */
.th-menu-wrapper {
  z-index: 999999 !important;
}

.th-menu-wrapper .th-menu-area {
  max-width: 88vw !important;
  width: 320px !important;
  max-height: 100vh !important;
  background: #ffffff !important;
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.28) !important;
  border-left: 1px solid #e2e8f0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 24px 20px 36px 20px !important;
}

.th-menu-wrapper .th-menu-toggle {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 18px !important;
}

.th-mobile-menu ul li a {
  padding: 12px 14px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  color: #1e293b !important;
}

.th-mobile-menu ul li a:hover,
.th-mobile-menu ul li a:active {
  background: #f8fafc !important;
  color: var(--af-theme-green) !important;
}

/* --------------------------------------------------------------------------
   5. MOBILE CARD SLIDERS: NATIVE TOUCH-FRIENDLY HORIZONTAL CAROUSELS
   Applies to Feature Cards, Blog Cards, Event Cards, Sponsor Cards, Facilities
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Slider Container Rules */
  .mobile-card-slider,
  .feature-sec-1 .container > .row,
  .blog-area-1 .container > .row.gy-4,
  .event-card-wrap,
  .children-grid-5,
  .facility-grid-slider,
  .pillars-slider,
  .about1-area .feature-card_wrapp-row,
  .professor-cards-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 16px !important;
    padding-top: 6px !important;
    padding-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    /* Sleek touch scrollbar: hidden completely to remove sliding dash bar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* Remove sliding dash bar (scrollbar) completely on mobile view */
  .mobile-card-slider::-webkit-scrollbar,
  .feature-sec-1 .container > .row::-webkit-scrollbar,
  .blog-area-1 .container > .row.gy-4::-webkit-scrollbar,
  .event-card-wrap::-webkit-scrollbar,
  .children-grid-5::-webkit-scrollbar,
  .facility-grid-slider::-webkit-scrollbar,
  .pillars-slider::-webkit-scrollbar,
  .about1-area .feature-card_wrapp-row::-webkit-scrollbar,
  .professor-cards-slider::-webkit-scrollbar,
  .contact-cards-slider::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  .mobile-card-slider::-webkit-scrollbar-track,
  .feature-sec-1 .container > .row::-webkit-scrollbar-track,
  .blog-area-1 .container > .row.gy-4::-webkit-scrollbar-track,
  .event-card-wrap::-webkit-scrollbar-track,
  .children-grid-5::-webkit-scrollbar-track,
  .facility-grid-slider::-webkit-scrollbar-track,
  .pillars-slider::-webkit-scrollbar-track,
  .about1-area .feature-card_wrapp-row::-webkit-scrollbar-track,
  .professor-cards-slider::-webkit-scrollbar-track,
  .contact-cards-slider::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
  }

  .mobile-card-slider::-webkit-scrollbar-thumb,
  .feature-sec-1 .container > .row::-webkit-scrollbar-thumb,
  .blog-area-1 .container > .row.gy-4::-webkit-scrollbar-thumb,
  .event-card-wrap::-webkit-scrollbar-thumb,
  .children-grid-5::-webkit-scrollbar-thumb,
  .facility-grid-slider::-webkit-scrollbar-thumb,
  .pillars-slider::-webkit-scrollbar-thumb,
  .about1-area .feature-card_wrapp-row::-webkit-scrollbar-thumb,
  .professor-cards-slider::-webkit-scrollbar-thumb,
  .contact-cards-slider::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
  }

  /* Slider Card Items: Exactly 1 complete card per frame on all mobile widths */
  .mobile-card-slider > *,
  .feature-sec-1 .container > .row > .col-xl-3,
  .blog-area-1 .container > .row.gy-4 > .col-lg-4,
  .event-card-wrap > .event-card,
  .children-grid-5 > .child-card,
  .facility-grid-slider > *,
  .pillars-slider > *,
  .about1-area .feature-card_wrapp-row > *,
  .professor-cards-slider > *,
  .contact-cards-slider > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  /* Inner Card Equal-Height Alignment */
  .feature-card,
  .blog-card,
  .event-card,
  .child-card,
  .facility-card,
  .pillar-card,
  .professor-card,
  .contact-card-item {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  /* Interactive Swipe Dot Indicators (clean scroll dots only, no dash bar) */
  .mobile-slider-indicators {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }

  .mobile-slider-dot {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    max-width: 9px !important;
    max-height: 9px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    opacity: 0.65 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-slider-dot.active {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    border-radius: 50% !important;
    background: var(--af-theme-green) !important;
    opacity: 1 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 2px 6px rgba(9, 92, 50, 0.35) !important;
  }

  /* Swiper card sliders: ensure 100% full-width frame on mobile */
  .th-slider.has-shadow {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Hide mobile indicators on tablet & desktop */
@media (min-width: 768px) {
  .mobile-slider-indicators {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. COMPONENT-SPECIFIC RESPONSIVE TUNING
   -------------------------------------------------------------------------- */
/* Feature Cards */
.feature-card {
  padding: clamp(16px, 3.5vw, 22px) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.feature-card .box-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  font-size: 20px !important;
  margin-bottom: 12px !important;
}

/* Reduced spacing between feature cards slider and about image on mobile phoneview */
@media (max-width: 767px) {
  .homepage .feature-sec-1,
  .feature-sec-1 {
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }

  .feature-sec-1 .mobile-slider-indicators {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    padding: 2px 0 !important;
  }

  .homepage .about1-area,
  .about1-area {
    padding-top: 14px !important;
  }
}

/* Hero Section Fluid Layout on Mobile: Full-bleed Overlay Reaching the Very Top */
@media (max-width: 991px) {
  .th-hero-wrapper,
  .hero-1 {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .hero-1 .swiper,
  .hero-1 .swiper-wrapper {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }

  .hero-1 .swiper-slide {
    height: auto !important;
    min-height: calc(100vh - 120px) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-1 .hero-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100vh - 120px) !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 0 36px 0 !important;
    margin: 0 !important;
    top: 0 !important;
    overflow: hidden !important;
  }

  /* Full-bleed overlay reaching the very top edge with zero uncovered space */
  .hero-1 .hero-inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(3, 6, 14, 0.72) 0%, rgba(3, 6, 14, 0.76) 50%, rgba(3, 6, 14, 0.88) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .hero-1 .th-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  .hero-1 .hero-inner .container {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (max-width: 767px) {
  .hero-1 .hero-inner .row {
    row-gap: 16px !important;
  }
  .hero-1 .hero-video {
    padding: 10px 0 20px 0 !important;
    margin: 0 !important;
  }
  .hero-1 .video-play-btn {
    width: 58px !important;
    height: 58px !important;
    line-height: 58px !important;
    font-size: 20px !important;
  }
  .homepage .hero-style1,
  .hero-style1 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    text-align: center !important;
  }
  .hero-1 .hero-style1 .hero-title,
  .hero-title {
    font-size: clamp(23px, 6vw, 32px) !important;
    line-height: 1.24 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .hero-1 .hero-style1 .hero-text,
  .hero-text {
    font-size: clamp(13px, 3.2vw, 14.5px) !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    text-align: center !important;
  }
  .hero-1 .hero-style1 .btn-wrap,
  .hero-btn-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-1 .hero-style1 .btn-wrap .th-btn,
  .hero-btn-group .th-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
    font-size: 13.5px !important;
  }
}

/* About Section */
@media (max-width: 991px) {
  .about-wrap1 {
    padding: 0 !important;
  }
  .about-img-box {
    margin-bottom: 24px !important;
  }
  .about-experience-badge {
    position: static !important;
    margin-top: 16px !important;
    display: inline-flex !important;
  }
  /* Left-align heading and description in phoneview and mobile */
  .homepage .about1-area .title-area,
  .homepage .about-content .title-area,
  .about1-area .title-area,
  .about1-area .title-area *,
  .about1-area .sec-title,
  .about1-area .sec-text,
  .about-content,
  .about-content .title-area,
  .about-content .title-area *,
  .about-content .sec-title,
  .about-content .sec-text {
    text-align: left !important;
  }
  .homepage .about1-area .sec-title,
  .homepage .about1-area .sec-text,
  .about1-area .sec-title,
  .about1-area .sec-text {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* About Feature Boxes - Fit Headings on One Line in Phoneview */
  .about-feature .box-title {
    font-size: clamp(15px, 3.8vw, 17px) !important;
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   5b. COUNTER & STATS SECTION
   Desktop (≥992px): dark/black strip — handled in style.css @media (min-width: 992px)
   Mobile/Tablet (≤991px): 2×2 grid of stat cards
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .counter-area1 {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    padding: clamp(32px, 5vw, 52px) 0 !important;
    position: relative !important;
  }

  .counter-wrap1 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .counter-wrap1 .divider {
    display: none !important;
  }

  .counter-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    padding: clamp(18px, 3.5vw, 24px) clamp(10px, 2vw, 16px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  }

  .counter-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
  }

  .counter-card .box-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #111111 0%, #266e00 100%) !important;
    box-shadow: 0 4px 10px rgba(35, 24, 10, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
    margin: 0 auto 12px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .counter-card .box-icon img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .counter-card .media-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .counter-card .box-number {
    color: #0b132a !important;
    font-family: var(--title-font) !important;
    font-size: clamp(18px, 4.5vw, 22px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 3px 0 !important;
    text-align: center !important;
  }

  .counter-card .box-number span,
  .counter-card .counter-number {
    color: #0b132a !important;
    font-weight: 800 !important;
  }

  .counter-card .box-text {
    color: #4b5563 !important;
    font-family: var(--body-font) !important;
    font-size: clamp(11px, 2.5vw, 12px) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    opacity: 1 !important;
    max-width: 135px !important;
  }
}

@media (max-width: 767px) {
  .counter-card .box-number,
  .homepage .counter-card .box-number,
  .about-page .counter-card .box-number {
    font-size: clamp(17px, 4.2vw, 20px) !important;
    margin-bottom: 2px !important;
  }

  .counter-card .box-text,
  .homepage .counter-card .box-text,
  .about-page .counter-card .box-text {
    font-size: clamp(10.5px, 2.4vw, 11.5px) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 360px) {
  .counter-wrap1 {
    gap: 8px !important;
  }

  .counter-card .box-number,
  .homepage .counter-card .box-number,
  .about-page .counter-card .box-number {
    font-size: 15px !important;
  }

  .counter-card .box-text,
  .homepage .counter-card .box-text,
  .about-page .counter-card .box-text {
    font-size: 10px !important;
  }
}

/* Giving & Donation Section & Forms */
@media (max-width: 991px) {
  .giving-area .title-area,
  .homepage .giving-area .title-area,
  .giving-area .title-area *,
  .homepage .giving-area .title-area *,
  .giving-area .sec-title,
  .homepage .giving-area .sec-title,
  .giving-area .sec-text,
  .homepage .giving-area .sec-text {
    text-align: left !important;
  }

  .giving-area .sec-text,
  .homepage .giving-area .sec-text {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .giving-card {
    padding: clamp(18px, 4.5vw, 28px) !important;
    border-radius: 16px !important;
  }
}

.giving-fund-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.giving-fund-pill {
  min-height: 40px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
}

@media (max-width: 575px) {
  .giving-fund-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .giving-fund-pill {
    width: 100% !important;
    min-height: 40px !important;
    padding: 6px 3px !important;
    font-size: clamp(10.5px, 2.9vw, 12px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    letter-spacing: -0.01em !important;
  }
}

@media (max-width: 380px) {
  .giving-fund-pills {
    gap: 6px !important;
  }

  .giving-fund-pill {
    font-size: 10px !important;
    padding: 5px 2px !important;
    letter-spacing: -0.02em !important;
    min-height: 38px !important;
  }
}

/* Quick Amount Pills */
.amount-pills-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.amount-pill-btn {
  min-height: 44px !important;
  padding: 8px 4px !important;
  font-size: clamp(13px, 3vw, 15px) !important;
  font-weight: 700 !important;
}

@media (max-width: 380px) {
  .amount-pills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

/* Payment Method Cards */
.payment-methods-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 420px) {
  .payment-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.payment-method-card {
  min-height: 52px !important;
  padding: 10px 12px !important;
}

/* Form Fields on Mobile (16px font-size prevents iOS Safari zoom) */
.giving-text-input,
.auth-field-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  font-size: 16px !important;
  min-height: 46px !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

/* Form Placeholders - Reduced Text Weight & Opacity */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.giving-text-input::placeholder,
.giving-amount-input::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 0.65 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
.giving-text-input::-webkit-input-placeholder,
.giving-amount-input::-webkit-input-placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 0.65 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder,
.form-control::-moz-placeholder,
.giving-text-input::-moz-placeholder,
.giving-amount-input::-moz-placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 0.65 !important;
}

/* Donation Currency / Amount Field Box */
.giving-input-box {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  margin-bottom: 5px !important;
}

.giving-input-curr,
.giving-input-box .giving-input-curr {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #4b5563 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

.giving-amount-input,
.giving-input-box .giving-amount-input,
.giving-input-box input[type="text"] {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  font-family: inherit !important;
}

.giving-cta-btn,
.auth-submit-btn {
  min-height: 48px !important;
  font-size: clamp(14px, 3.5vw, 16px) !important;
  width: 100% !important;
}

/* Event Cards Layout: Mobile Slider matching Blog Cards (1 card per frame) */
@media (max-width: 767px) {
  .event-card-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 16px !important;
    padding-top: 6px !important;
    padding-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: none !important;
  }

  .event-card-wrap > .event-card,
  .event-card-wrap > .mobile-slider-item,
  .event-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    height: auto !important;
  }

  .event-card:not(:last-child) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .event-card:nth-child(2n+2) {
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .event-card-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
  }

  .event-card-img::before {
    display: none !important;
  }

  .event-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .event-card-tag {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #111111 0%, #266e00 100%) !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 4 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    padding-bottom: 4px !important;
  }

  .event-card-tag .tag-number {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    padding: 4px 10px 2px !important;
    color: #ffffff !important;
    display: block !important;
  }

  .event-card .event-content {
    padding: 20px 20px 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .event-card .event-wrapp {
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .event-card .box-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    max-width: 100% !important;
  }

  .event-card .box-title a {
    color: #111827 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    display: block !important;
    transition: color 0.3s ease !important;
  }

  .event-card .box-title a:hover {
    color: #266e00 !important;
  }

  .event-card .box-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    letter-spacing: normal !important;
    flex: 1 1 auto !important;
  }

  .event-card .blog-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 12.5px !important;
  }

  .event-card .blog-meta a,
  .event-card .blog-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: #4b5563 !important;
    white-space: normal !important;
    margin-right: 0 !important;
    line-height: 1.4 !important;
  }

  .event-card .blog-meta a::after,
  .event-card .blog-meta span::after {
    display: none !important;
  }

  .event-card .blog-meta a i,
  .event-card .blog-meta span i {
    color: #266e00 !important;
    font-size: 13px !important;
    min-width: 14px !important;
    text-align: center !important;
    margin-right: 0 !important;
  }

  .event-card .btn-wrap {
    margin-top: auto !important;
    padding-top: 0 !important;
    width: 100% !important;
  }

  .event-card .btn-wrap .th-btn {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #111111 0%, #266e00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
  }

  .event-card .btn-wrap .th-btn:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #2e8500 100%) !important;
    color: #ffffff !important;
  }
}

/* Blog Cards */
.blog-card {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.blog-card .blog-img-box {
  height: 200px !important;
}

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

/* Facilities Gallery Swiper: seamless flush strip without rounded corners */
.story-slider1 {
  margin: 0 !important;
}

.story-slider1 .swiper-slide {
  height: auto !important;
  margin-right: 0 !important;
}

.story-card,
.story-card .box-img,
.story-card .box-img img {
  border-radius: 0 !important;
  overflow: hidden !important;
}

.story-card .box-img {
  height: 220px !important;
}

.story-card .box-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Children Grid 5 (Sponsor Page) */
@media (min-width: 768px) {
  .children-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 16px !important;
  }
}

.child-card {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.child-card .child-img-wrap {
  height: 140px !important;
}

.child-card-body {
  padding: 14px !important;
}

/* --------------------------------------------------------------------------
   7. FLOATING ACTION BUTTONS & WIDGET OVERLAP PREVENTION
   -------------------------------------------------------------------------- */
/* Floating AI Assistant Launcher */
.af-chat-launcher {
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 999990 !important;
}

@media (max-width: 480px) {
  .af-chat-launcher {
    bottom: 14px !important;
    left: 12px !important;
    height: 42px !important;
    padding: 4px 14px 4px 4px !important;
    font-size: 13px !important;
  }
  .af-launcher-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .af-launcher-avatar .af-mascot-svg {
    width: 32px !important;
    height: 32px !important;
  }
  .af-launcher-label {
    font-size: 13px !important;
  }
}

/* Floating AI Assistant Chat Window */
@media (max-width: 576px) {
  .af-chat-window {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
    z-index: 999998 !important;
  }
  .af-chat-header {
    padding: 12px 14px !important;
  }
  .af-chat-input-area {
    padding: 10px 12px !important;
  }
}

/* Scroll To Top Button (Opposite Bottom-Right Corner) */
.scroll-top {
  bottom: 16px !important;
  right: 16px !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  z-index: 999980 !important;
}

@media (max-width: 480px) {
  .scroll-top {
    bottom: 14px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}

/* --------------------------------------------------------------------------
   8. MODALS & POPUPS MOBILE OPTIMIZATION
   -------------------------------------------------------------------------- */
/* Auth Modal */
.popup-login-register {
  width: 94vw !important;
  max-width: 460px !important;
  margin: 20px auto !important;
  border-radius: 16px !important;
}

.auth-split-card {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.auth-split-media {
  display: none !important;
}

@media (min-width: 768px) {
  .popup-login-register {
    max-width: 780px !important;
  }
  .auth-split-media {
    display: flex !important;
  }
}

.auth-split-form {
  padding: clamp(20px, 4vw, 32px) clamp(16px, 3.5vw, 28px) !important;
}

.auth-tabs-nav {
  margin-bottom: 20px !important;
}

.auth-tab-btn {
  min-height: 44px !important;
  font-size: 14.5px !important;
}

/* Hero Video Modal */
#hero-video-modal {
  padding: 16px !important;
}

.hero-video-modal-inner {
  width: 100% !important;
  max-width: 800px !important;
  border-radius: 12px !important;
}

.hero-video-modal-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 20px !important;
  top: -48px !important;
  right: 0 !important;
}

/* --------------------------------------------------------------------------
   9. FOOTER RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer-default .footer-top,
  .footer-wrapper .footer-top,
  .footer-top {
    padding: 24px 0 18px 0 !important;
    text-align: left !important;
  }
  .footer-logo {
    text-align: left !important;
  }
  .footer-logo img,
  .footer-default .footer-logo img {
    margin: 0 !important;
    display: inline-block !important;
    max-height: 58px !important;
    max-width: 165px !important;
  }
  /* Delete "Have questions? Contact us today" in phoneview only */
  .footer-top .client-group-wrap,
  .footer-default .client-group-wrap,
  .footer-wrapper .client-group-wrap {
    display: none !important;
  }
  .footer-widget {
    margin-bottom: 28px !important;
  }
  .footer-info a {
    font-size: 13.5px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .th-social a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .copyright-text {
    font-size: 13px !important;
    text-align: center !important;
  }

  /* Footer Quick Links & Our Programs: side-by-side in phoneview */
  .footer-default .widget-area .row > .col-sm-6,
  .footer-wrapper .widget-area .row > .col-sm-6,
  .widget-area .row > .col-sm-6,
  .widget-area .row > .footer-nav-col,
  .footer-nav-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .footer-widget.widget_nav_menu {
    margin-bottom: 30px !important;
  }

  .footer-widget.widget_nav_menu .widget_title {
    font-size: clamp(17px, 4.5vw, 19px) !important;
    line-height: 1.25 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 0 10px !important;
    white-space: nowrap !important;
  }

  .footer-widget.widget_nav_menu .widget_title:after {
    height: 15px !important;
    top: 4px !important;
    width: 3px !important;
  }

  .footer-widget.widget_nav_menu ul.menu,
  .footer-widget.widget_nav_menu > ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .footer-widget.widget_nav_menu li {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  .footer-widget.widget_nav_menu a {
    font-size: clamp(13px, 3.4vw, 14px) !important;
    line-height: 1.35 !important;
    padding: 0 0 0 13px !important;
    margin-bottom: 11px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
  }

  .footer-widget.widget_nav_menu a:hover {
    color: var(--theme-color) !important;
  }

  .footer-widget.widget_nav_menu a:before {
    font-size: 13px !important;
    top: 2px !important;
    left: 0 !important;
  }

  /* Campus Life Instagram Gallery: expand images to fit the section fully */
  .th-widget-instagram,
  .th-widget-instagram .instagram-feeds {
    max-width: 100% !important;
    width: 100% !important;
  }

  .th-widget-instagram .instagram-feeds {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .th-widget-instagram .insta-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .th-widget-instagram .insta-thumb img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 10px !important;
  }

  /* Delete event card meta (location, date, time) in phoneview only */
  .event-card .blog-meta,
  .mobile-card-slider .event-card .blog-meta {
    display: none !important;
  }

  /* Lock background page scrolling when modal/popup is open in phoneview */
  html.modal-scroll-locked,
  body.modal-scroll-locked {
    overflow: hidden !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ==========================================================================
     INNER PAGES PHONEVIEW (ALL PAGES EXCEPT HOMEPAGE)
     Targeted via .header-layout2 to preserve home page header layout1
     ========================================================================== */

  /* 1. Topbar: Email on left, Login | Register on right */
  .header-layout2 .header-top {
    padding: 8px 0 !important;
  }

  .header-layout2 .header-top .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .header-layout2 .header-top .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .header-layout2 .header-top .row > .col-auto:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 128px) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .header-layout2 .header-top .row > .col-auto:last-child {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin-left: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .header-layout2 .header-top-notice {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  /* Hide Tel container and separator on phoneview */
  .header-layout2 .header-top-notice > div:nth-child(n+2),
  .header-layout2 .header-top-notice > span {
    display: none !important;
  }

  .header-layout2 .header-top-notice > div:first-child {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* Hide literal 'Email:' text so the email address fits without clipping */
  .header-layout2 .header-top-notice > div:first-child > span {
    display: none !important;
  }

  .header-layout2 .header-top-notice > div:first-child i {
    font-size: 13px !important;
    margin-right: 6px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
  }

  .header-layout2 .header-top-notice > div:first-child a {
    font-size: clamp(10.5px, 2.7vw, 12px) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 100% !important;
    display: inline-block !important;
  }

  .header-layout2 .header-top-auth {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .header-layout2 .header-top-auth i {
    font-size: 12px !important;
    margin-right: 6px !important;
  }

  .header-layout2 .user-login-link {
    font-size: clamp(11.5px, 2.8vw, 13px) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    color: #ffffff !important;
  }

  /* 2. Navbar: Logo on left, Menu toggle button on right */
  .header-layout2 .sticky-wrapper {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
  }

  .header-layout2 .menu-area {
    display: block !important;
    visibility: visible !important;
    padding: 12px 0 !important;
    background: #ffffff !important;
  }

  .header-layout2 .menu-area .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .header-layout2 .menu-area .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .header-layout2 .header-logo img {
    max-height: 48px !important;
    width: auto !important;
    display: block !important;
  }

  .header-layout2 .header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  /* Strictly hide everything in header-right except the hamburger menu toggle */
  .header-layout2 .header-right > *:not(.th-menu-toggle),
  .header-layout2 .header-donate-btn,
  .header-layout2 .header-search,
  .header-layout2 .searchBoxToggler,
  .header-layout2 .sideMenuToggler,
  .header-layout2 .icon-btn,
  .header-layout2 .icon-btn.sideMenuToggler {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .header-layout2 .th-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 18px !important;
    margin-left: auto !important;
  }

  /* 3. Breadcrumb Menus: Strictly Left-Aligned */
  .breadcumb-wrapper,
  .breadcumb-wrapper .breadcumb-content,
  .breadcumb-wrapper .breadcumb-title,
  .breadcumb-wrapper .breadcumb-menu,
  .breadcumb-wrapper .breadcumb-menu li,
  .about-page .breadcumb-wrapper .breadcumb-content,
  .sponsor-page .breadcumb-wrapper .breadcumb-content,
  .impact-page .breadcumb-wrapper .breadcumb-content,
  .faq-page .breadcumb-wrapper .breadcumb-content,
  .contact-page .breadcumb-wrapper .breadcumb-content,
  .donate-page .breadcumb-wrapper .breadcumb-content {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .breadcumb-wrapper .breadcumb-title {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .breadcumb-wrapper .breadcumb-menu {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* 4. About Us Page Video Area & Background Image Responsiveness */
  .video-area-1 {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 110px 0 !important;
    min-height: 240px !important;
  }

  .video-thumb1-1 .video-play-btn {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    font-size: 20px !important;
  }

  #hero-video-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    min-height: 100vh !important;
    z-index: 9999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(8px) !important;
  }

  #hero-video-modal.active {
    display: flex !important;
  }

  .hero-video-modal-inner {
    position: relative !important;
    width: 100% !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    margin: auto !important;
    border-radius: 14px !important;
    overflow: visible !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  }

  .hero-video-modal-inner video {
    width: 100% !important;
    max-height: 72vh !important;
    display: block !important;
    border-radius: 14px !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  .hero-video-modal-close {
    position: absolute !important;
    top: -46px !important;
    right: 2px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
  }

  /* 5. Core Pillars of Care: Left-align heading/description & Exactly 1 Card Per Frame */
  .bg-smoke .title-area,
  .bg-smoke .title-area .sec-title,
  .bg-smoke .title-area .sec-text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .bg-smoke .mobile-card-slider,
  .pillars-card-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bg-smoke .mobile-card-slider > .feature-card_wrapp,
  .bg-smoke .mobile-card-slider > .col-12,
  .bg-smoke .mobile-card-slider > div,
  .pillars-card-slider > .feature-card_wrapp,
  .pillars-card-slider > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 6. School Administration: Left-align heading & Modern Cards Design */
  #professor-sec .title-area,
  #professor-sec .sec-title {
    text-align: left !important;
    margin-left: 0 !important;
  }

  #professor-sec .mobile-card-slider > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .professor-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(9, 92, 50, 0.12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(9, 92, 50, 0.04) !important;
    padding: 16px !important;
    gap: 16px !important;
    flex-direction: column !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .professor-card .professor-img {
    width: 100% !important;
    max-height: 290px !important;
    aspect-ratio: 4 / 3.4 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .professor-card .professor-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .professor-card .professor-content {
    text-align: left !important;
    margin-top: 4px !important;
    width: 100% !important;
    padding: 0 4px !important;
  }

  .professor-card .professor-content .box-title {
    font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    text-align: left !important;
    margin-bottom: 4px !important;
  }

  .professor-card .professor-content .box-title a {
    color: #1a202c !important;
    text-decoration: none !important;
  }

  .professor-card .professor-content .box-text {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--af-theme-green, #095c32) !important;
    text-align: left !important;
    margin-bottom: 14px !important;
  }

  .professor-card .professor-content .professor-details {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }

  .professor-card .professor-content .professor-contact {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    text-decoration: none !important;
    color: #2d3748 !important;
    font-size: 14px !important;
  }

  .professor-card .professor-content .professor-contact span:not(.admin-icon-pill) {
    font-family: var(--title-font, "Marcellus", "Marcellus SC", Georgia, serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    letter-spacing: 0.01em !important;
    word-break: break-all !important;
  }

  /* Circular Modern Icon Badges for Email & Phone */
  .admin-icon-pill {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(9, 92, 50, 0.12) 0%, rgba(38, 110, 0, 0.18) 100%) !important;
    color: #095c32 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
  }

  /* 7. Blog Section & Cards in About Us: Modern Cards, Heading Fix & Title Font */
  #blog-sec {
    padding-top: 50px !important;
    overflow: visible !important;
  }

  #blog-sec .title-area,
  #blog-sec .sec-title {
    text-align: left !important;
    padding-top: 6px !important;
    line-height: 1.28 !important;
    overflow: visible !important;
    margin-left: 0 !important;
  }

  .blog-grid,
  .blog-grid.style2 {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(9, 92, 50, 0.12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(9, 92, 50, 0.04) !important;
    overflow: hidden !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  .blog-grid .blog-img,
  .blog-grid.style2 .blog-img {
    width: 100% !important;
    min-width: 100% !important;
    height: 200px !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
  }

  .blog-grid .blog-img img,
  .blog-grid.style2 .blog-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .blog-grid .box-content,
  .blog-grid.style2 .box-content {
    padding: 20px 18px !important;
    text-align: left !important;
    width: 100% !important;
  }

  .blog-grid .box-title,
  .blog-grid.style2 .box-title {
    font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1a202c !important;
    text-align: left !important;
    margin-bottom: 14px !important;
  }

  .blog-grid .box-title a,
  .blog-grid.style2 .box-title a {
    color: #1a202c !important;
    text-decoration: none !important;
  }

  .blog-grid .blog-meta,
  .blog-grid.style2 .blog-meta {
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .blog-grid .blog-meta a,
  .blog-grid.style2 .blog-meta a {
    font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .blog-grid .blog-date,
  .blog-grid.style2 .blog-date {
    font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
    border-radius: 12px !important;
  }

  .blog-grid .blog-date-title,
  .blog-grid.style2 .blog-date-title,
  .blog-grid .blog-date-text,
  .blog-grid.style2 .blog-date-text {
    font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
  }

  /* 8. Phoneview: Remove Center-Aligned Buttons (e.g. View All Stories) */
  .sec-btn,
  .blog-area-2 .sec-btn,
  #blog-sec .sec-btn,
  .story-area-1 .sec-btn,
  .event-area-1 .sec-btn,
  .blog-area-1 .sec-btn,
  .col-auto:has(> .sec-btn),
  .row > .col-auto:has(.sec-btn) {
    display: none !important;
  }

  /* 9. Sponsor Page: What Sponsorship Intends to Support Cards Colors matching hero feature cards */
  .pillars-slider > div:nth-child(1) .pillar-card {
    background-color: #FFF6F8 !important;
    border: 1px solid rgba(220, 100, 120, 0.15) !important;
  }
  .pillars-slider > div:nth-child(2) .pillar-card {
    background-color: #EEF1F4 !important;
    border: 1px solid rgba(80, 100, 130, 0.15) !important;
  }
  .pillars-slider > div:nth-child(3) .pillar-card {
    background-color: #F3F0F8 !important;
    border: 1px solid rgba(120, 90, 160, 0.15) !important;
  }
  .pillars-slider > div:nth-child(4) .pillar-card {
    background-color: #F0FFF6 !important;
    border: 1px solid rgba(50, 160, 90, 0.18) !important;
  }

  /* 10. Sponsor Page Phoneview: Exclude Donations, Child Sponsorship & Anonymous Giving, leaving donation form */
  .sponsor-giving-info-col,
  #sponsor-pledge-section .col-lg-5 {
    display: none !important;
  }

  #sponsor-pledge-section {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #sponsor-pledge-section > .row {
    margin: 0 !important;
  }

  #sponsor-pledge-section .col-lg-7 {
    padding: 0 !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html, body, .mobile-card-slider, * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   11. CONTACT PAGE: PHONEVIEW NON-SLIDER CARDS, COLORS & FRAME-FIRST LAYOUT
   -------------------------------------------------------------------------- */
.contact-cards-sec .row > div:nth-child(1) .contact-card-item {
  background-color: #FFF6F8 !important;
  border: 1px solid rgba(220, 100, 120, 0.15) !important;
}
.contact-cards-sec .row > div:nth-child(2) .contact-card-item {
  background-color: #EEF1F4 !important;
  border: 1px solid rgba(80, 100, 130, 0.15) !important;
}
.contact-cards-sec .row > div:nth-child(3) .contact-card-item {
  background-color: #F3F0F8 !important;
  border: 1px solid rgba(120, 90, 160, 0.15) !important;
}

@media (max-width: 767px) {
  /* Contact cards in phoneview: stacked, not sliders */
  .contact-cards-sec .row,
  .contact-cards-row,
  .contact-cards-slider {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    gap: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .contact-cards-sec .row > div,
  .contact-cards-row > div,
  .contact-cards-slider > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .contact-cards-sec .mobile-slider-indicators {
    display: none !important;
  }

  /* Preloader responsiveness on mobile */
  .preloader {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .preloader-inner {
    width: 90% !important;
    max-width: 260px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .preloader-inner img,
  .preloader-inner .preloader-logo {
    max-width: 110px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
    object-fit: contain !important;
  }
  .preloader .loader {
    font-size: 18px !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .preloader .loading-text {
    font-size: 18px !important;
    letter-spacing: 1px !important;
  }
}

@media (max-width: 991px) {
  /* In phoneview/tablet, contact frame comes before contact form */
  .contact-form-card .row {
    display: flex !important;
    flex-direction: column !important;
  }
  .contact-form-card .contact-frame-col,
  .contact-form-card .col-lg-5 {
    order: 1 !important;
    margin-bottom: 28px !important;
  }
  .contact-form-card .col-lg-7 {
    order: 2 !important;
  }

  /* 1. Widen aerial & campus image in homepage and about us page to fit container */
  .about-award-wrapper,
  .about-award-img-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Left align section headings and delete center-aligned buttons */
  #facilities-gallery .title-area,
  #facilities-gallery .sec-title,
  #event-sec .title-area,
  #event-sec .sec-title,
  #blog-sec .title-area,
  #blog-sec .sec-title,
  .story-area-1 .title-area,
  .event-area-1 .title-area,
  .blog-area-1 .title-area,
  .blog-area-2 .title-area {
    text-align: left !important;
  }

  #facilities-gallery .sec-btn,
  #event-sec .sec-btn,
  #blog-sec .sec-btn,
  .story-area-1 .sec-btn,
  .event-area-1 .sec-btn,
  .blog-area-1 .sec-btn,
  .blog-area-2 .sec-btn,
  .col-auto:has(> .sec-btn) {
    display: none !important;
  }

  /* 3. Inner pages sticky topbar and navbar (logo on left, menu button on right) */
  .header-layout2 {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  }

  .header-layout2 .header-top {
    position: relative !important;
    z-index: 10 !important;
  }

  .header-layout2 .sticky-wrapper {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .header-layout2 .menu-area {
    display: block !important;
    visibility: visible !important;
    padding: 10px 0 !important;
    background: #ffffff !important;
  }

  .header-layout2 .menu-area .container,
  .header-layout2 .menu-area .th-container4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  .header-layout2 .menu-area .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .header-layout2 .header-logo {
    display: flex !important;
    align-items: center !important;
  }

  .header-layout2 .header-logo img {
    max-height: 48px !important;
    width: auto !important;
    display: block !important;
  }

  .header-layout2 .header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .header-layout2 .header-right > *:not(.th-menu-toggle),
  .header-layout2 .header-right .header-donate-btn,
  .header-layout2 .header-right .header-search,
  .header-layout2 .header-right .searchBoxToggler,
  .header-layout2 .header-right .sideMenuToggler,
  .header-layout2 .header-right .icon-btn {
    display: none !important;
  }

  .header-layout2 .th-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    margin-left: auto !important;
  }

  .header-layout2 .th-menu-toggle:hover {
    background: #e2e8f0 !important;
    color: var(--af-theme-green) !important;
  }

  /* Breadcrumb menus: strictly left-aligned */
  .breadcumb-wrapper,
  .breadcumb-wrapper .breadcumb-content,
  .breadcumb-wrapper .breadcumb-title,
  .breadcumb-wrapper .breadcumb-menu,
  .breadcumb-wrapper .breadcumb-menu li {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* 4. Stat cards everywhere (phoneview & tablet): same pastel colors as cards below hero section */
  .counter-area1 {
    background: transparent !important;
    padding: 24px 0 !important;
  }

  .counter-wrap1 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .counter-wrap1 .divider {
    display: none !important;
  }

  .counter-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .counter-card .box-number {
    color: #103317 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }

  .counter-card .box-text {
    color: #4a5568 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: normal !important;
  }

  .counter-card .box-icon {
    margin-bottom: 10px !important;
  }

  .counter-card .box-icon img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(548%) hue-rotate(95deg) brightness(92%) contrast(98%) !important;
  }

  /* 4 Pastel Colors matching hero feature cards */
  .counter-wrap1 > .counter-card:nth-child(1),
  .counter-wrap1 > .counter-card:nth-child(1 of .counter-card),
  .counter-wrap1 > .counter-card:nth-of-type(1),
  .counter-area1 .counter-card:nth-of-type(1),
  .impact-counter-row > div:nth-child(1) .impact-counter-card,
  .impact-counter-area .impact-counter-card:nth-of-type(1),
  .row > div:nth-child(1) > .impact-counter-card {
    background-color: #FFF6F8 !important;
    border: 1px solid rgba(220, 100, 120, 0.22) !important;
  }

  .counter-wrap1 > .counter-card:nth-child(3),
  .counter-wrap1 > .counter-card:nth-child(2 of .counter-card),
  .counter-wrap1 > .counter-card:nth-of-type(2),
  .counter-area1 .counter-card:nth-of-type(2),
  .impact-counter-row > div:nth-child(2) .impact-counter-card,
  .impact-counter-area .impact-counter-card:nth-of-type(2),
  .row > div:nth-child(2) > .impact-counter-card {
    background-color: #EEF1F4 !important;
    border: 1px solid rgba(80, 100, 130, 0.22) !important;
  }

  .counter-wrap1 > .counter-card:nth-child(5),
  .counter-wrap1 > .counter-card:nth-child(3 of .counter-card),
  .counter-wrap1 > .counter-card:nth-of-type(3),
  .counter-area1 .counter-card:nth-of-type(3),
  .impact-counter-row > div:nth-child(3) .impact-counter-card,
  .impact-counter-area .impact-counter-card:nth-of-type(3),
  .row > div:nth-child(3) > .impact-counter-card {
    background-color: #F3F0F8 !important;
    border: 1px solid rgba(120, 90, 160, 0.22) !important;
  }

  .counter-wrap1 > .counter-card:nth-child(7),
  .counter-wrap1 > .counter-card:nth-child(4 of .counter-card),
  .counter-wrap1 > .counter-card:nth-of-type(4),
  .counter-area1 .counter-card:nth-of-type(4),
  .impact-counter-row > div:nth-child(4) .impact-counter-card,
  .impact-counter-area .impact-counter-card:nth-of-type(4),
  .row > div:nth-child(4) > .impact-counter-card {
    background-color: #F0FFF6 !important;
    border: 1px solid rgba(50, 160, 90, 0.24) !important;
  }
}

@media (max-width: 575px) {
  .counter-wrap1 {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   IPAD MINI & TABLET VIEWPORT ADJUSTMENTS (768px - 991px & up to 1199px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Footer logo & "Have questions? Contact us today" in 1 line: logo left, text right */
  .footer-default .footer-top .row,
  .footer-top .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .footer-default .footer-top .row > .col-xl-auto,
  .footer-top .row > .col-xl-auto {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .footer-default .footer-top .client-group-wrap,
  .footer-top .client-group-wrap {
    display: block !important;
    text-align: right !important;
    margin: 0 !important;
  }

  .footer-default .footer-top .client-group-wrap .title,
  .footer-top .client-group-wrap .title {
    margin: 0 !important;
    font-size: 19px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* 1. Event cards on iPad Mini: Slider, 2 cards per frame, same cards as phoneview */
  .event-card-wrap,
  .event-area-1 .event-card-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 20px !important;
    padding-top: 6px !important;
    padding-bottom: 14px !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .event-card-wrap::-webkit-scrollbar {
    display: none !important;
  }

  .event-card-wrap > .event-card,
  .event-card-wrap > * {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  /* Same cards as phoneview: hide blog-meta (location, date, time) */
  .event-card .blog-meta {
    display: none !important;
  }

  /* 2. Stories & School News cards on iPad Mini: Slider, 2 cards per frame */
  #blog-sec .mobile-card-slider,
  .blog-area-1 .container > .row.gy-4 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 20px !important;
    padding-top: 6px !important;
    padding-bottom: 14px !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #blog-sec .mobile-card-slider::-webkit-scrollbar,
  .blog-area-1 .container > .row.gy-4::-webkit-scrollbar {
    display: none !important;
  }

  #blog-sec .mobile-card-slider > *,
  .blog-area-1 .container > .row.gy-4 > .col-lg-4 {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  /* 3. School Administration in About Us: Left align heading, same cards as phoneview, 2 cards per row */
  #professor-sec .title-area,
  #professor-sec .sec-title {
    text-align: left !important;
  }

  #professor-sec .row.gy-30,
  #professor-sec .professor-cards-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 20px 0 !important;
  }

  #professor-sec .professor-cards-slider > .col-xl-6,
  #professor-sec .professor-cards-slider > * {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  #professor-sec .professor-card {
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(9, 92, 50, 0.12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05) !important;
    padding: 16px !important;
    gap: 16px !important;
    flex-direction: column !important;
    text-align: left !important;
  }

  #professor-sec .professor-card .professor-img {
    width: 100% !important;
    max-height: 250px !important;
    aspect-ratio: 4 / 3.4 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #professor-sec .professor-card .professor-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* 4. Latest Stories & Updates in About Us: 2 cards per row, same cards as phoneview */
  .blog-area-2 #blog-sec .title-area,
  #blog-sec .title-area {
    text-align: left !important;
  }

  .blog-area-2 .row.gx-24 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .blog-area-2 .row.gx-24 > .col-xl-6 {
    display: contents !important;
  }

  .blog-area-2 .blog-grid,
  .blog-area-2 .blog-grid.style2 {
    margin-top: 0 !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(9, 92, 50, 0.12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  .blog-area-2 .blog-grid .blog-img,
  .blog-area-2 .blog-grid.style2 .blog-img {
    width: 100% !important;
    min-width: 100% !important;
    height: 190px !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
  }

  .blog-area-2 .blog-grid .blog-img img,
  .blog-area-2 .blog-grid.style2 .blog-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .blog-area-2 .blog-grid .box-content,
  .blog-area-2 .blog-grid.style2 .box-content {
    padding: 18px 16px !important;
    text-align: left !important;
    width: 100% !important;
  }

  .blog-area-2 .blog-grid .box-title,
  .blog-area-2 .blog-grid.style2 .box-title {
    font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1a202c !important;
    margin-bottom: 12px !important;
  }

  /* 5. Sponsor a Child page: Children cards slider, 3 cards per frame */
  .children-grid-5,
  .sponsor-page .children-grid-5 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 14px !important;
    padding-top: 6px !important;
    padding-bottom: 14px !important;
    width: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .children-grid-5::-webkit-scrollbar {
    display: none !important;
  }

  .children-grid-5 > *,
  .children-grid-5 > .child-card {
    flex: 0 0 calc((100% - 28px) / 3) !important;
    max-width: calc((100% - 28px) / 3) !important;
    width: calc((100% - 28px) / 3) !important;
    min-width: calc((100% - 28px) / 3) !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  /* 6. Contact Us page: 3 contact cards in 1 row, landscape, reduced font sizes */
  .contact-cards-sec .row,
  .contact-cards-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
  }

  .contact-cards-sec .row > div,
  .contact-cards-row > div {
    flex: 0 0 calc((100% - 24px) / 3) !important;
    width: calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .contact-card-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 8px !important;
    min-height: 155px !important;
    border-radius: 14px !important;
    height: 100% !important;
  }

  .contact-icon-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  .contact-card-item h4 {
    font-size: 13.5px !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
  }

  .contact-card-item p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
  }

  .contact-card-item a {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.3px !important;
    word-break: break-all !important;
    display: inline-block !important;
  }
}

/* --------------------------------------------------------------------------
   12. SITEWIDE: NO BUTTON BACKGROUND GLOW
   -------------------------------------------------------------------------- */
.th-btn,
.btn,
.faq-ask-btn,
.contact-form-btn,
.header-dept-btn,
.curriculum-download-btn,
.auth-submit-btn,
.giving-btn,
.header-donate-btn,
button[type="submit"],
.sec-btn,
[class*="-btn"] {
  box-shadow: none !important;
  filter: none !important;
}

.th-btn:hover,
.btn:hover,
.faq-ask-btn:hover,
.contact-form-btn:hover,
.header-dept-btn:hover,
.curriculum-download-btn:hover,
.auth-submit-btn:hover,
.giving-btn:hover,
.header-donate-btn:hover,
button[type="submit"]:hover,
.sec-btn:hover,
[class*="-btn"]:hover {
  box-shadow: none !important;
  filter: none !important;
}

/* --------------------------------------------------------------------------
   13. COMPREHENSIVE MOBILE RANGE SUPPORT (320px - 430px)
   Targeting: Samsung Galaxy S8 (360px), iPhone 14 Pro Max (430px), Narrow 320px+
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Spacing normalization: prevent oversized desktop padding on phones */
  .space {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .space-top {
    padding-top: 50px !important;
  }
  .space-bottom {
    padding-bottom: 50px !important;
  }

  /* Universal button touch targets and wrapping */
  .btn-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: center !important;
  }

  .th-btn,
  .btn,
  .hero-btn-gradient,
  .hero-btn-translucent,
  .contact-form-btn,
  .auth-submit-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  /* Fluid typography: proportional sizing across 320px - 430px */
  .hero-1 .hero-style1 .hero-title {
    font-size: clamp(23px, 6.8vw, 30px) !important;
    line-height: 1.25 !important;
  }

  .hero-1 .hero-style1 .hero-text {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .h1, h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .h2, h2, .sec-title {
    font-size: clamp(20px, 5.8vw, 26px) !important;
    line-height: 1.3 !important;
  }

  .h3, h3 {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.35 !important;
  }

  .h4, h4, .box-title {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.4 !important;
  }

  .sec-text, p {
    font-size: clamp(13px, 3.8vw, 14.5px) !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 380px) {
  /* Samsung Galaxy S8 (360px) and narrower: prevent button text truncation */
  .hero-1 .hero-style1 .btn-wrap {
    gap: 8px !important;
  }

  .hero-1 .hero-style1 .btn-wrap .th-btn,
  .about-wrap1 .btn-wrap .th-btn {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px) !important;
    padding: 10px 12px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 340px) {
  /* Ultra-narrow (320px) viewport: cleanly stack buttons so text never clips */
  .hero-1 .hero-style1 .btn-wrap,
  .about-wrap1 .btn-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .hero-1 .hero-style1 .btn-wrap .th-btn,
  .about-wrap1 .btn-wrap .th-btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
}

/* ==========================================================================
   Header Right: Search on Left, Make Donation on Right, Remove Dotted Menu
   ========================================================================== */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Suppress header search button beside Make Donation */
.header-search.searchBoxToggler,
.header-layout2 .header-search,
.header-layout1 .header-search {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.header-right .header-donate-btn {
  order: 1 !important;
}

.header-right .th-menu-toggle {
  order: 2 !important;
}

/* Eliminate dotted icon / sideMenuToggler anywhere in headers */
.sideMenuToggler,
.icon-btn.sideMenuToggler,
a[class*="sideMenuToggler"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   School Administration Cards: Phoneview Layout Across All Viewports
   ========================================================================== */
#professor-sec .title-area,
#professor-sec .sec-title {
  text-align: left !important;
}

#professor-sec .professor-card,
.professor-area-1 .professor-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(9, 92, 50, 0.12) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(9, 92, 50, 0.04) !important;
  padding: 18px !important;
  gap: 16px !important;
  text-align: left !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#professor-sec .professor-card:hover,
.professor-area-1 .professor-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(9, 92, 50, 0.08) !important;
}

#professor-sec .professor-card .professor-img,
.professor-area-1 .professor-card .professor-img {
  width: 100% !important;
  max-height: 290px !important;
  aspect-ratio: 4 / 3.4 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  flex-shrink: 0 !important;
}

#professor-sec .professor-card .professor-img img,
.professor-area-1 .professor-card .professor-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}

#professor-sec .professor-card .professor-content,
.professor-area-1 .professor-card .professor-content {
  text-align: left !important;
  margin-top: 4px !important;
  width: 100% !important;
  padding: 0 4px !important;
}

#professor-sec .professor-card .professor-content .box-title,
.professor-area-1 .professor-card .professor-content .box-title {
  font-family: var(--title-font, "Marcellus", Georgia, serif) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #1a202c !important;
  text-align: left !important;
  margin-bottom: 4px !important;
}

#professor-sec .professor-card .professor-content .box-title a,
.professor-area-1 .professor-card .professor-content .box-title a {
  color: #1a202c !important;
  text-decoration: none !important;
}

#professor-sec .professor-card .professor-content .box-text,
.professor-area-1 .professor-card .professor-content .box-text {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--af-theme-green, #095c32) !important;
  text-align: left !important;
  margin-bottom: 14px !important;
}

#professor-sec .professor-card .professor-content .professor-details,
.professor-area-1 .professor-card .professor-content .professor-details {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}

#professor-sec .professor-card .professor-content .professor-contact,
.professor-area-1 .professor-card .professor-content .professor-contact {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  text-decoration: none !important;
  color: #2d3748 !important;
  font-size: 14px !important;
  margin-right: 0 !important;
}

#professor-sec .professor-card .professor-content .professor-contact span:not(.admin-icon-pill),
.professor-area-1 .professor-card .professor-content .professor-contact span:not(.admin-icon-pill) {
  font-family: var(--title-font, "Marcellus", "Marcellus SC", Georgia, serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  letter-spacing: 0.01em !important;
  word-break: break-all !important;
}

#professor-sec .admin-icon-pill,
.professor-area-1 .admin-icon-pill {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(9, 92, 50, 0.08) !important;
  color: var(--af-theme-green, #095c32) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  margin-right: 10px !important;
}