/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #444444;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #545454;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #42634b;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #444444;
  /* The default color of the main navmenu links */
  --nav-hover-color: #42634b;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #42634b;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a,a:visited{
  color: black;
    text-decoration: none !important;
}

a:hover,
a:active,
a:focus {
  color: #42634b;
  text-decoration: none !important;
  transition: 0.3s;
}


.nedd {
  color: black;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  margin-bottom: .7rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;

}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
  box-shadow: 0px 0px 20px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .topbar {
  background-color: #504d4d;
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: none;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--accent-color);
}

.header .branding {
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 80px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 26px;
  padding: 0 0 0 8px;
  margin: 11px 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 8px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
    list-style: none;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 14px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* =========================
   MOBILE HEADER + MENU FIX
   ========================= */
@media (max-width: 991.98px) {

  /* Header spacing */
  #header .container.position-relative.d-flex.align-items-center.justify-content-between {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 10px !important;
  }

  /* Logo area */
  #header .logo img {
    max-width: 240px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Burger icon */
  .mobile-nav-toggle {
    font-size: 34px !important;
    line-height: 1 !important;
    margin-left: auto !important;
    padding: 4px 6px !important;
    flex-shrink: 0 !important;
  }

  /* Mobile menu box */
  .navmenu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 18px 18px 24px !important;
    border-radius: 18px !important;
    max-height: 78vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Remove bullets completely */
  .navmenu ul li,
  .navmenu ul li::marker,
  .navmenu ul li::before {
    list-style: none !important;
    content: none !important;
  }

  /* Menu item links */
  .navmenu a,
  .navmenu a:focus {
    font-size: 18px !important;
    line-height: 1.35 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Dropdown arrow circles */
  .navmenu .toggle-dropdown {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #f1f1f1 !important;
    font-size: 16px !important;
    margin-left: auto !important;
  }

  /* Admin button full width and clean */
  .navmenu .button,
  .navmenu a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding: 14px 18px !important;
    border-radius: 999px !important;
  }

  /* Dropdown inner lists */
  .navmenu .dropdown ul {
    padding: 8px 0 8px 12px !important;
    margin: 6px 0 10px !important;
    border-radius: 12px !important;
  }

  .navmenu .dropdown ul a {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
}


/* =========================
   MOBILE PAGE TITLE FIX
   ========================= */
@media (max-width: 767.98px) {
  .page-title .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .page-title h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .breadcrumbs ol {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
}


/* =========================
   TIMETABLE MOBILE FIX
   ========================= */

   /* ===== Time Table Fix ===== */
.timetable-col{
  margin-left: 26%;
}

.schedule-card{
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  padding: 28px;
  overflow: hidden;
}

.schedule-header,
.schedule-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  gap: 14px;
}

.schedule-header{
  font-size: 1.1rem;
  font-weight: 800;
  color: #3d3d3d;
  text-align: center;
  margin-bottom: 18px;
}

.schedule-row{
  margin-bottom: 14px;
  padding: 18px 22px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  background: #fff;
}

.schedule-row.green{
  background: #42634b;
  color: #fff;
  border-color: #42634b;
}

.schedule-row .label{
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
}

.schedule-row .time{
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
}

/* ===== Tablet ===== */
@media (max-width: 991.98px){
  .timetable-col{
    margin-left: 0 !important;
    width: 100%;
  }

  #contact .container h1{
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  .schedule-card{
    padding: 20px;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767.98px){
  #contact .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .timetable-col{
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .schedule-card{
    padding: 16px;
    border-radius: 20px;
  }

  .schedule-header,
  .schedule-row{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .schedule-header{
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .schedule-row{
    padding: 14px 12px;
    margin-bottom: 10px;
    border-radius: 14px;
  }

  .schedule-row .label{
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
  }

  .schedule-row .time{
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
  }
}

/* ===== Extra small phones ===== */
@media (max-width: 480px){
  #contact .container h1{
    font-size: 1.6rem;
  }

  .schedule-card{
    padding: 12px;
  }

  .schedule-header{
    font-size: 0.82rem;
  }

  .schedule-row{
    padding: 12px 10px;
  }

  .schedule-row .label{
    font-size: 0.82rem;
  }

  .schedule-row .time{
    font-size: 0.82rem;
  }
}
@media (max-width: 991.98px) {

  /* Any timetable wrapper/section */
  .timetable-wrapper,
  .time-table-wrapper,
  .table-responsive-custom,
  .schedule-wrapper,
  .calendar-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
  }

  /* Generic tables inside timetable pages */
  table {
    max-width: none !important;
  }

  .timetable-wrapper table,
  .time-table-wrapper table,
  .table-responsive-custom table,
  .schedule-wrapper table,
  .calendar-wrapper table,
  .table-responsive table {
    min-width: 700px !important;
    width: max-content !important;
  }

  /* If your timetable is built with cards/boxes instead of a table */
  .time-table,
  .timetable,
  .schedule-container,
  .tt-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prevent inner cards from being clipped */
  .time-table *,
  .timetable *,
  .schedule-container *,
  .tt-container * {
    box-sizing: border-box !important;
  }
}


/* =========================
   EXTRA SMALL DEVICES
   ========================= */
@media (max-width: 575.98px) {

  #header .logo img {
    max-width: 210px !important;
  }

  .mobile-nav-toggle {
    font-size: 30px !important;
  }

  .navmenu ul {
    left: 14px !important;
    right: 14px !important;
    top: 78px !important;
    width: auto !important;
  }

  .navmenu a,
  .navmenu a:focus {
    font-size: 17px !important;
    padding: 11px 12px !important;
  }
}

/* =========================
   EXTRA SMALL DEVICES
   ========================= */
@media (max-width: 575.98px) {

  #header .logo img {
    max-width: 210px !important;
  }

  .mobile-nav-toggle {
    font-size: 30px !important;
  }

  .navmenu ul {
    left: 14px !important;
    right: 14px !important;
    top: 78px !important;
    width: auto !important;
  }

  .navmenu a,
  .navmenu a:focus {
    font-size: 17px !important;
    padding: 11px 12px !important;
  }
}


/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

.current{
  color: #5faa73;
}
/*--------------------------------------------------------------
# events design
--------------------------------------------------------------*/

/* ===== Event Section Styling ===== */
.event-section{
  --brand:#42634b;
  --border: rgba(0,0,0,0.10);
  --shadow: 0 18px 38px rgba(0,0,0,0.10);
  padding: 60px 0;
}
/* ✅ If still not clickable, force proper layering/clickability */
.eg-lb-prev, .eg-lb-next{
  z-index: 10002;
  pointer-events: auto;
}
.eg-lb-stage{
  pointer-events: none;        /* only image area ignores clicks */
}
.eg-lb-img{
  pointer-events: none;
}
.eg-lb-close{
  z-index: 10003;
  pointer-events: auto;
}

.eg-lb-close{ pointer-events: auto; z-index: 10000; }

.eg-video{
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: rgba(0,0,0,0.04);
  display:block;
}
@media (max-width: 768px){
  .eg-video{ height: 300px; }
}

.event-head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 22px;
}

.event-title{
  font-weight: 950;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  display:inline-block;
}

.event-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin: 10px auto 0;
  background: var(--brand);
  border-radius: 999px;
}

.event-desc{
  margin:0 auto;
  color: rgba(0,0,0,0.62);
  line-height: 1.7;
}

/* ===== Gallery ===== */
.event-gallery{
  margin-top: 18px;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 52px 18px;
}

.eg-viewport{
  overflow: hidden;
  border-radius: 14px;
}

.eg-track{
  display:flex;
  gap: 14px;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.eg-slide{
  flex: 0 0 100%;
  margin:0;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,0.03);
  cursor: zoom-in;
}

/* IMPORTANT: works for vertical/horizontal images */
.eg-slide img{
  width: 100%;
  height: 420px;
  object-fit: contain;           /* no crop */
  background: rgba(0,0,0,0.04);  /* looks clean when contain shows borders */
  display:block;
}

.eg-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  display:grid;
  place-items:center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  cursor:pointer;
  transition: transform .2s ease, filter .2s ease;
}

.eg-btn i{ color: var(--brand); }

.eg-btn:hover{
  transform: translateY(-50%) scale(1.05);
  filter: brightness(0.98);
}

.eg-prev{ left: 10px; }
.eg-next{ right: 10px; }

/* dots */
.eg-dots{
  display:flex;
  justify-content:center;
  gap: 8px;
  margin-top: 14px;
}

.eg-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(66,99,75,0.25);
  border: 0;
  cursor:pointer;
}
.eg-dot.is-active{
  background: var(--brand);
  width: 22px;
}

/* responsive */
@media (max-width: 768px){
  .event-gallery{ padding: 14px 44px; }
  .eg-slide img{ height: 300px; }
}

/* ===== Lightbox ===== */
.eg-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(15,15,15,0.92);
  display:none;
  z-index: 9999;
}

.eg-lightbox.is-open{ display:block; }

.eg-lb-close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.eg-lb-close i{ color: #fff; font-size: 18px; }

.eg-lb-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.eg-lb-nav i{ color:#fff; font-size:18px; }

.eg-lb-prev{ left: 18px; }
.eg-lb-next{ right: 18px; }

.eg-lb-stage{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  padding: 72px 70px;
}

.eg-lb-img{
  max-width: min(980px, 92vw);
  max-height: 74vh;
  object-fit: contain; /* vertical/horizontal safe */
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}

.eg-lb-title{
  margin-top: 14px;
  color:#fff;
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 2.1rem;
  text-align:center;
}

/*--------------------------------------------------------------
# Global Footer 
--------------------------------------------------------------*/
.footer {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;

  /* 3D shadow effect */
  box-shadow: 0px 4px 6px #42634b, 0px 8px 15px rgba(66, 99, 75, 0.8);
}


.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: 100%;
  background-color: var(--contrast-color);
  color: var(--background-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -9px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
  line-height: 2.5;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: 0;
}

.hero .carousel {
  width: 100%;
  min-height: 70vh;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (max-height: 400px) {
  .hero .carousel {
    min-height: 100vh;
  }
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero .carousel-item:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-item::before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
}

.hero .carousel-container {
  position: absolute;
  inset: 90px 64px 64px 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3;
}

.hero .carousel-item h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
  animation: fadeInDown 1s both;
}

.hero .carousel-item h2 span {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero .carousel-item h2 {
    font-size: 30px;
  }
}

.hero .carousel-item p {
  animation: fadeInDown 1s both 0.2s;
}

@media (min-width: 1024px) {

  .hero h2,
  .hero p {
    max-width: 60%;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 15%;
  transition: 0.1s;
  opacity: 0.4;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

@media (min-width: 1024px) {

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  color: var(--default-color);
  font-size: 28px;
  line-height: 1;
}

.hero .carousel-indicators li {
  list-style-type: none;
  cursor: pointer;
  background: var(--accent-color);
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  margin-bottom: 180px;
  opacity: 0.2;
}

.hero .carousel-indicators li.active {
  opacity: 1;
}

@media (max-height: 768px),
(max-width: 1024px) {
  .hero .carousel-indicators li {
    margin-bottom: 20px;
  }
}

.hero .featured {
  margin-top: -150px;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
}

@media (max-height: 768px),
(max-width: 1024px) {
  .hero .featured {
    margin-top: 0;
  }
}

.hero .featured-item {
  background-color: var(--contrast-color);
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px 30px;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero .featured-item:before {
  content: "";
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.3s;
  z-index: -1;
}

.hero .featured-item .icon {
  margin-bottom: 10px;
}

.hero .featured-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: ease-in-out 0.3s;
}

.hero .featured-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.hero .featured-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.featured-item {
  width: 100%;
}

.featured-item p {
  width: 100%;
  max-width: 100%;
  text-align: left;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

.hero .featured-item:hover h4 a,
.hero .featured-item:hover .icon i,
.hero .featured-item:hover p {
  color: var(--contrast-color);
}

.hero .featured-item:hover:before {
  background: var(--accent-color);
  inset: 0;
  border-radius: 0px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/*--------------------------------------------------------------
# DISB communication in contact us
--------------------------------------------------------------*/

.disb-notice {
  max-width: 1100px;
  margin: 25px auto 45px auto; /* center + spacing */
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.disb-notice-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(66, 99, 75, 0.12); /* soft green */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}

.disb-notice-icon i {
  font-size: 18px;
  color: #42634b;
}

.disb-notice-content h5 {
  margin: 0 0 6px 0;
  font-weight: 700;
  color: #2b2b2b;
}

.disb-notice-content p {
  margin: 0;
  color: #555;
  line-height: 1.65;
  font-size: 15px;
}

/* Mobile */
@media (max-width: 576px) {
  .disb-notice {
    padding: 16px;
    border-radius: 12px;
  }
}

/*--------------------------------------------------------------
# IB overview page
--------------------------------------------------------------*/
/* ===== IB DP THEME (clean, modern) ===== */
  .ibdp{
    padding: 32px 0;
    background: #ffffff;
  }
  .ibdp-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Header */
  .ibdp-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 22px;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.05);
  }
  .ibdp-brand{
    display:flex;
    gap: 16px;
    align-items:center;
    min-width: 0;
  }
  .ibdp-logo{
    width: 52%;
    height: 52%;
    border-radius: 12px;
    padding: 8px;
    flex: 0 0 62px;
  }
  .ibdp-title h2{
    margin: 0 0 6px 0;
    font-size: 28px;
    font-weight: 900;
    color:#21322a;
    letter-spacing: .2px;
  }
  .ibdp-subtitle{
    margin: 0;
    color:#55615b;
    line-height: 1.55;
    max-width: 680px;
  }
  .ibdp-quick{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .ibdp-pill{
    border: 1px solid #eef0f2;
    background: #fbfcfd;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    color:#33403a;
    white-space: nowrap;
  }

  /* Tabs */
  .ibdp-tabs{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 16px;
    padding: 10px;
    background: #f7f8fa;
    border: 1px solid #eef0f2;
    border-radius: 14px;
  }
  .ibdp-tab{
    border: 1px solid transparent;
    background: transparent;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 800;
    color:#33403a;
    cursor: pointer;
    transition: .15s ease;
  }
  .ibdp-tab:hover{
    background: #ffffff;
    border-color:#e7eaee;
  }
  .ibdp-tab.is-active{
    background: #ffffff;
    border-color:#dfe4e8;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
  }

  .ibdp-panel { display: none; }
.ibdp-panel.is-active { display: block; }

  /* Panels */
  .ibdp-panel{ display:none; }
  .ibdp-panel.is-active{ display:block; }

  /* Shared blocks */
  .ibdp-card{
    background:#fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.04);
  }
  .ibdp-card h3{ margin: 0 0 10px; font-size: 18px; font-weight: 900; color:#21322a; }
  .ibdp-card h4{ margin: 0 0 10px; font-size: 16px; font-weight: 900; color:#21322a; }
  .ibdp-muted{ color:#5b6a63; }
  .ibdp-list{
    margin: 10px 0 0;
    padding-left: 18px;
    color:#3f4b45;
    line-height: 1.7;
  }
  .ibdp-note{
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fbfcfd;
    border: 1px solid #eef0f2;
    color:#3f4b45;
  }

  .ibdp-grid2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Structure mini blocks */
  .ibdp-structure{ display:grid; gap: 10px; margin-top: 12px; }
  .ibdp-structure-item{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    background: #fbfcfd;
  }
  .ibdp-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(66,99,75,.12);
    color:#42634b;
    font-weight: 900;
    font-size: 13px;
  }

  /* Callout */
  .ibdp-callout{
    margin-top: 16px;
    display:flex;
    gap: 12px;
    align-items:flex-start;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #eef0f2;
    background: #f7f8fa;
  }
  .ibdp-callout-icon{
    width: 34px; height: 34px;
    border-radius: 12px;
    background: rgba(66,99,75,.12);
    color:#42634b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    flex: 0 0 34px;
  }

  /* Subjects layout */
  .ibdp-subjects{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .ibdp-section-head{ margin: 8px 0 14px; }
  .ibdp-section-head h3{ margin: 0 0 6px; font-size: 20px; font-weight: 900; color:#21322a; }

  /* Timeline */
  .ibdp-timeline{
    margin-top: 10px;
    display:grid;
    gap: 14px;
  }
  .ibdp-step{
    display:flex;
    gap: 12px;
    align-items:flex-start;
  }
  .ibdp-dot{
    width: 12px; height: 12px;
    margin-top: 5px;
    border-radius: 50%;
    background: #42634b;
    box-shadow: 0 0 0 4px rgba(66,99,75,.12);
    flex: 0 0 12px;
  }

  /* Core */
  .ibdp-core{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  /* FAQ */
/* Optional small styling for FAQ links (safe to add) */
.faq-link{
  color:#42634b;
  font-weight: 700;
  text-decoration: none;
}
.faq-link:hover{ text-decoration: underline; }
.faq-dot{
  margin: 0 8px;
  color: rgba(0,0,0,0.35);
}

  .ibdp-faq{
    display:grid;
    gap: 12px;
  }
  .ibdp-qa{
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 14px 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0,0,0,.04);
  }
  .ibdp-qa summary{
    cursor:pointer;
    font-weight: 900;
    color:#21322a;
    outline: none;
  }
  .ibdp-qa p{
    margin: 10px 0 0;
    color:#3f4b45;
    line-height: 1.7;
  }

  /* Responsive */
  @media (max-width: 992px){
    .ibdp-header{ flex-direction: column; }
    .ibdp-quick{ justify-content: flex-start; }
    .ibdp-grid2{ grid-template-columns: 1fr; }
    .ibdp-subjects{ grid-template-columns: 1fr; }
    .ibdp-core{ grid-template-columns: 1fr; }
  }
/*--------------------------------------------------------------
# Faculty and stuff page
--------------------------------------------------------------*/
.staff-directory { padding: 20px 0; }

  /* Filters */
  .staff-wrapper {
  max-width: 1200px;   /* adjust: 1100–1300px if you want */
  margin: 0 auto;      /* centers the content */
  padding: 0 20px;     /* breathing space on sides */
}
  .staff-filters{
    display: grid;
    grid-template-columns: 220px 220px 1fr auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 22px;
  }
  .filter-group label{
    display:block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color:#444;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  .filter-group select,
  .filter-group input{
    width:100%;
    padding: 12px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    outline: none;
    background: #fff;
  }
  .filter-group select:focus,
  .filter-group input:focus{
    border-color: #42634b;
    box-shadow: 0 0 0 3px rgba(66,99,75,.12);
  }
  .reset-btn{
    border: 0;
    background: transparent;
    color: #6b2a7a;
    font-weight: 800;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    padding: 10px 8px;
    white-space: nowrap;
  }

  /* Grid + Cards */
  .staff-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 30px;
  }
  .staff-card{
    display:flex;
    gap: 18px;
    background:#fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(0,0,0,.05);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .staff-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }
  .staff-photo{
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 120px;
    border: 1px solid #eee;
  }
  .staff-name{
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 900;
    color:#222;
  }
  .staff-meta{
    margin: 0 0 10px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#555;
  }
  .badge{
    display:inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }
  .badge.teacher{ background: rgba(66,99,75,.12); color:#42634b; }
  .badge.admin{ background: rgba(107,42,122,.12); color:#6b2a7a; }
  .subject{ font-weight: 700; }
  .staff-classes, .staff-extra{
    margin: 0 0 6px;
    color:#444;
    line-height: 1.55;
  }
  .no-results{
    margin-top: 18px;
    color:#666;
    text-align:center;
    font-weight:700;
  }

  /* Responsive */
  @media (max-width: 992px){
    .staff-filters{ grid-template-columns: 1fr 1fr; }
    .reset-btn{ justify-content: flex-start; padding-left: 0; }
    .staff-grid{ grid-template-columns: 1fr; }
  }
/*--------------------------------------------------------------
# fees page
--------------------------------------------------------------*/
/* Fees card wrapper */
.fees-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 25px 25px;
  margin-bottom: 30px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Title */
.fees-card h3 {
  margin-bottom: 15px;
  color: #42634b;
  font-weight: 600;
}

/* Table */
.fees-table {
  width: 100%;
  border-collapse: collapse;
}

/* Cells */
.fees-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 15px;
}

/* Alternating rows */
.fees-table tr:nth-child(even) {
  background-color: #f8f8f8;
}

.fees-table tr.total td {
  background-color: #42634b;
  color: #ffffff !important;
  font-weight: 600;
}

/* Remove last border */
.fees-table tr:last-child td {
  border-bottom: none;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.curriculum-v2{
  --brand:#42634b;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 14px 30px rgba(0,0,0,0.08);
  --muted: rgba(0,0,0,0.62);
}

/* HERO */
.cv2-title{
  font-weight: 950;
  letter-spacing: -0.3px;
  display:inline-block;
  margin-bottom: 10px;
}
.cv2-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-top: 10px;
  background: var(--brand);
  border-radius:999px;
}
.cv2-lead{
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 560px;
}
.cv2-badges{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.cv2-badge{
  background: rgba(66,99,75,0.10);
  border: 1px solid rgba(66,99,75,0.18);
  color: rgba(0,0,0,0.75);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cv2-badge i{ color: var(--brand); }

.cv2-media{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.cv2-img{
  width:100%;
  height: 360px;
  object-fit: cover;
  border-radius: 14px;
}

/* CARDS */
.cv2-card, .cv2-feature{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  height: 100%;
}
.cv2-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 8px;
}
.cv2-card h3{
  font-size: 1.1rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.15px;
}
.cv2-card p{
  margin: 10px 0 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* ICON */
.cv2-icon{
  width:44px;
  height:44px;
  border-radius: 14px;
  background: rgba(66,99,75,0.10);
  border: 1px solid rgba(66,99,75,0.18);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.cv2-icon i{
  color: var(--brand);
  font-size: 18px;
}
.cv2-icon.sm{ width:42px; height:42px; border-radius: 14px; }

/* LIST */
.cv2-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:9px;
}
.cv2-list li{
  position:relative;
  padding-left: 22px;
  line-height:1.55;
  color: rgba(0,0,0,0.74);
}
.cv2-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color: var(--brand);
  font-weight: 900;
}

/* SUBJECTS GRID */
.cv2-section-head h3{
  font-weight: 950;
  margin: 0 0 6px;
  letter-spacing:-0.2px;
}
.cv2-section-head p{
  margin:0 0 14px;
  color: var(--muted);
}

.cv2-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cv2-pill{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: var(--shadow);
  font-weight: 800;
  color: rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  gap:10px;
}
.cv2-pill i{
  color: var(--brand);
}

/* responsive */
@media (max-width: 991px){
  .cv2-img{ height: 280px; }
  .cv2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .cv2-grid{ grid-template-columns: 1fr; }
}

/*button*/
.button {
  background-color: #42634b;
  border-radius: 50px;
}

.button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.button2 {
  color: white;
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;

}

.button2:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*about mission page*/
/* ===== Mission Page Visual Upgrade (keep content the same) ===== */
:root{
  --brand:#42634b;
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 36px rgba(0,0,0,0.10);
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.62);
}

.about-modern,
.mission-modern{
  padding: 60px 0;
}

/* Section title underline stays like your style */
.section-title h2{
  font-weight: 950;
  letter-spacing: -0.3px;
}
.section-title h2::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin: 10px auto 0;
  background: var(--brand);
  border-radius: 999px;
}

/* About block */

.about-modern-title{
  margin: 0 0 12px;
  font-weight: 950;
  letter-spacing: -0.25px;
  color: var(--text);
  display:inline-block;
  position: relative;
}
.about-modern-title::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-top:10px;
  background: var(--brand);
  border-radius: 999px;
}

/* nicer text */
.about-modern-card p,
.mission-modern-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  text-align: justify;
}

/* image frame */
.about-modern-media,
.mission-modern-media{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: rgba(0,0,0,0.02);
}
.about-modern-media img{
  width:100%;
  height: 520px;
  object-fit: cover;      /* no white space */
  object-position: center;
  display:block;
}



/* Mission card */
.mission-modern-card{
  background: rgba(66,99,75,0.08);
  border: 1px solid rgba(66,99,75,0.18);
  border-radius: 22px;
  padding: 55px;
}

.mission-modern-kicker{
  margin: 0 0 12px;
  font-weight: 950;
  letter-spacing: -0.3px;
  color: var(--text);
  display:inline-block;
  position: relative;
}
.mission-modern-kicker::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-top:10px;
  background: var(--brand);
  border-radius: 999px;
}

/* spacing on mobile */
@media (max-width: 992px){
  .about-modern-media img{ height: 360px; }
  .mission-modern-media img{ height: 320px; }
}
/* =========================
   school policies section
   ========================= */
.school-policies{
  --brand:#42634b;
  --brandSoft: rgba(66,99,75,0.10);
  --border: rgba(0,0,0,0.08);
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.60);
  --shadow: 0 14px 30px rgba(0,0,0,0.08);
}

.school-policies .policies-head{
  max-width: 780px;
  margin-bottom: 18px;
}
.school-policies .policies-head h2{
  font-weight: 950;
  letter-spacing: -0.3px;
  display:inline-block;
  margin: 0 0 10px;
}
.school-policies .policies-head h2::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-top:10px;
  background: var(--brand);
  border-radius:999px;
}
.school-policies .policies-head p{
  margin:0;
  color: var(--muted);
  line-height:1.7;
}

.policies-grid{
  display:grid;
  gap: 14px;
}

/* Card */
.policy-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Header button */
.policy-toggle{
  width:100%;
  background: transparent;
  border: 0;
  padding: 16px 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  cursor:pointer;
  text-align:left;
}

.policy-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.policy-icon{
  width:44px;
  height:44px;
  border-radius: 14px;
  background: var(--brandSoft);
  border: 1px solid rgba(66,99,75,0.18);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.policy-icon i{
  color: var(--brand);
  font-size: 18px;
}

.policy-toggle h3{
  margin:0;
  font-size: 1.1rem;
  font-weight: 950;
  letter-spacing: -0.2px;
  color: var(--text);
}
.policy-sub{
  display:block;
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 680px;
}

.policy-chevron{
  width:36px;
  height:36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  transition: transform .25s ease;
}
.policy-chevron i{ color: var(--brand); }

/* Body */
.policy-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.policy-card.is-open .policy-body{
  max-height: 1200px; /* enough for long text */
}
.policy-card.is-open .policy-chevron{
  transform: rotate(180deg);
}

.policy-text{
  padding: 14px 16px 16px;
  margin: 0;
  color: var(--text);
  line-height: 1.7;
}

/* Blocks inside */
.policy-block{
  padding: 14px 16px;
}
.policy-block + .policy-block{
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.policy-block h4{
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 1rem;
}

.policy-block ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 9px;
}
.policy-block li{
  position: relative;
  padding-left: 22px;
  color: rgba(0,0,0,0.75);
  line-height: 1.55;
}
.policy-block li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight: 900;
  color: var(--brand);
}

/* Mobile text wrapping */
@media (max-width: 768px){
  .policy-sub{
    white-space: normal;
    max-width: 100%;
  }
}
/* =========================
   Alumni Section
   ========================= */

.alumni .alumni-subtitle{
  margin: 10px 0 0;
  color: rgba(0,0,0,.65);
  font-size: 0.98rem;
}

/* Center the card */
.alumni-center-wrap{
  display: flex;
  justify-content: center;
}

.alumni-card{
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  padding: 34px;
  position: relative;
  overflow: hidden;
}

/* Soft green glow background */
.alumni-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 350px at 0% 0%, rgba(66,99,75,.14), transparent 60%);
  pointer-events:none;
}

/* Badge */
.alumni-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(66,99,75,.10);
  border: 1px solid rgba(66,99,75,.18);
  color: #42634b;
  font-weight: 800;
  font-size: .88rem;
  position: relative;
  z-index: 1;
}

.alumni-badge i{
  color: #42634b;
}

/* Title */
.alumni-title{
  margin: 18px 0 16px;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #1f1f1f;
  position: relative;
  z-index: 1;
}

/* Quote box */
.alumni-quote{
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 10px;
  align-items: start;
  padding: 18px;
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
}

.alumni-quote i{
  color: #42634b;
  font-size: 1.15rem;
  margin-top: 2px;
}

.alumni-quote p{
  margin: 0;
  color: rgba(0,0,0,.72);
  line-height: 1.7;
  font-size: 1rem;
}

/* List */
.alumni-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.alumni-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(0,0,0,.72);
  font-weight: 700;
}

.alumni-list li i{
  color: #42634b;
}

/* Button + note */
.alumni-actions{
  margin-top: 24px;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.alumni-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  background: #42634b;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(66,99,75,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.alumni-btn i{
  color: #fff !important;
}

.alumni-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(66,99,75,.30);
  filter: brightness(1.03);
  color: #fff !important;
}

.alumni-note{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(0,0,0,.58);
  font-weight: 700;
  font-size: .95rem;
  padding-left: 4px;
}

.alumni-note i{
  color: rgba(0,0,0,.55);
}

/* Mobile */
@media (max-width: 991px){
  .alumni-card{ padding: 22px; }
  .alumni-title{ font-size: 1.6rem; }
}

/* =========================
   Recommendation Section
   ========================= */

.recommendation .reco-subtitle{
  margin: 10px 0 0;
  color: rgba(0,0,0,.65);
  font-size: 0.98rem;
}

/* Center the card */
.reco-center-wrap{
  display: flex;
  justify-content: center;
}

.reco-card{
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  padding: 34px;
  position: relative;
  overflow: hidden;
}

/* Soft green glow background */
.reco-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 350px at 0% 0%, rgba(66,99,75,.14), transparent 60%);
  pointer-events:none;
}

/* Badge */
.reco-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(66,99,75,.10);
  border: 1px solid rgba(66,99,75,.18);
  color: #42634b;
  font-weight: 800;
  font-size: .88rem;
  position: relative;
  z-index: 1;
}

.reco-badge i{
  color: #42634b;
}

/* Title */
.reco-title{
  margin: 18px 0 16px;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #1f1f1f;
  position: relative;
  z-index: 1;
}

/* Quote box */
.reco-quote{
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 10px;
  align-items: start;
  padding: 18px;
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
}

.reco-quote i{
  color: #42634b;
  font-size: 1.15rem;
  margin-top: 2px;
}

.reco-quote p{
  margin: 0;
  color: rgba(0,0,0,.72);
  line-height: 1.7;
  font-size: 1rem;
}

/* List */
.reco-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.reco-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(0,0,0,.72);
  font-weight: 700;
}

.reco-list li i{
  color: #42634b;
}

/* Button + note */
.reco-actions{
  margin-top: 24px;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.reco-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  background: #42634b;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;

  /* Force text white */
  color: #fff !important;

  box-shadow: 0 14px 30px rgba(66,99,75,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.reco-btn i{
  color: #fff !important;
}

.reco-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(66,99,75,.30);
  filter: brightness(1.03);
  color: #fff !important;
}

.reco-note{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(0,0,0,.58);
  font-weight: 700;
  font-size: .95rem;
  padding-left: 4px;
}

.reco-note i{
  color: rgba(0,0,0,.55);
}

/* Mobile */
@media (max-width: 991px){
  .reco-card{ padding: 22px; }
  .reco-title{ font-size: 1.6rem; }
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# admission procedure section design
--------------------------------------------------------------*/
/* ===== Admission Procedure (NEW STYLE) ===== */
.ap{
  --brand:#42634b;
  --brandSoft: rgba(66,99,75,0.10);
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 36px rgba(0,0,0,0.10);
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.62);
}

/* grid */
.ap-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* card */
.ap-card{
  grid-column: span 6;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  position: relative;
  overflow:hidden;
}

/* subtle top glow */
.ap-card::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-60%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(66,99,75,0.14), transparent 60%);
  transform: rotate(12deg);
  pointer-events:none;
}

/* header */
.ap-top{
  display:flex;
  align-items:flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.ap-step{
  font-weight: 950;
  letter-spacing: -0.3px;
  color: var(--brand);
  background: var(--brandSoft);
  border: 1px solid rgba(66,99,75,0.18);
  padding: 8px 12px;
  border-radius: 14px;
  line-height: 1;
}
.ap-title{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.25px;
  color: var(--text);
}

/* text */
.ap-text{
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 12px;
}

/* links */
.ap-link{
  color: var(--brand);
  font-weight: 900;
  text-decoration:none;
}
.ap-link:hover{ text-decoration: underline; }

/* lists */
.ap-list{
  margin: 0;
  padding-left: 18px;
}
.ap-list li{ margin-bottom: 8px; }
.ap-sublist{
  margin-top: 8px;
  padding-left: 18px;
}
.ap-sublist li{ margin-bottom: 6px; }

/* footer chips */
.ap-foot{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 12px;
}
.ap-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 850;
  font-size: 0.92rem;
  color: rgba(0,0,0,0.72);
}
.ap-chip i{ color: var(--brand); }

/* special accent card (Welcome) */
.ap-accent{
  background: linear-gradient(180deg, rgba(66,99,75,0.10), #fff 55%);
  border: 1px solid rgba(66,99,75,0.22);
}

/* responsive */
@media (max-width: 992px){
  .ap-card{ grid-column: span 12; }
}
/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/

.section-title h2{
  font-weight: 800;
  letter-spacing: -0.3px;
}
.section-title h2::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--brand);
  border-radius: 999px;
}

/* ---------- Skills ---------- */
/* keep the underline under section titles */
.section-title h2::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  margin: 10px auto 0;
  background: #42634b; /* underline color kept */
  border-radius: 999px;
}

/* keep underline */
.section-title h2::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin:10px auto 0;
  background:#42634b;
  border-radius:999px;
}

/* image side */
.skills-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}
.skills-visual img{
  max-width: 88%;
  height:auto;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.10));
}

/* right text */
.skills .content h3{
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}
.skills .content .fst-italic{
  color: rgba(0,0,0,0.65);
  line-height: 1.7;
  margin-bottom: 22px;
}

/* card */
.skills-card{ margin-top: 14px; }
.skills-box{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* skill row */
.skill-item{ margin-bottom: 18px; }
.skill-item:last-child{ margin-bottom: 0; }

.skill-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 8px;
}
.skill-name{
  font-weight: 800;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.78);
}
.skill-val{
  font-weight: 900;
  font-size: 0.95rem;
  color:#42634b;
}

/* track + fill */
.skill-track{
  width:100%;
  height:10px;
  background: rgba(0,0,0,0.08);
  border-radius:999px;
  overflow:hidden;
}
.skill-fill{
  width:0%;
  height:10px;
  background:#42634b;
  border-radius:999px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Application ---------- */
.app-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  height: 100%;
}

.app-header h3{
  font-weight: 900;
  margin-bottom: 6px;
}
.fact{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
}
.app-subtitle{
  color: var(--text-soft);
  margin: 10px 0 18px;
}

.app-steps{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.app-steps li{
  display:flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.78);
}
.app-steps li:last-child{
  border-bottom: none;
}
.app-steps i{
  color: var(--brand);
  margin-top: 3px;
}

.app-note{
  margin-top: 14px;
  background: var(--brand-soft);
  border: 1px solid rgba(66,99,75,0.18);
  border-radius: 14px;
  padding: 14px 14px 14px 44px;
  position: relative;
}
.app-note i{
  position:absolute;
  left: 14px;
  top: 12px;
  color: var(--brand);
  font-size: 18px;
}
.app-note p{
  margin: 0;
  color: rgba(0,0,0,0.72);
  line-height: 1.6;
  font-style: italic;
}

.form-preview-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-preview-link img{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.form-preview-link:hover img{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.form-actions{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.btn-primary-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .2s ease, filter .2s ease;
}
.btn-primary-soft:hover{
  transform: translateY(-2px);
  filter: brightness(0.95);
}
.form-hint{
  color: rgba(0,0,0,0.55);
}

/* ---------- GLightbox close button (clean) ---------- */
.glightbox-close{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.glightbox-close::before{
  color: var(--brand);
}
/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}



/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: #42634b;
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--heading-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 20px;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}


/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.schedule-card {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  font-family: Arial, sans-serif;
}

/* Header */
.schedule-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

/* Rows */
.schedule-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.schedule-row .label {
  padding: 14px 18px;
  font-weight: 600;
}

.schedule-row .time {
  padding: 14px 18px;
  text-align: center;
}

/* Green rows */
.schedule-row.green {
  background-color: #42634b;
  color: white;
}

/* White rows */
.schedule-row:not(.green) {
  background-color: #ffffff;
  color: #333;
  border: 1px solid #e5e5e5;
}

/* subtle hover */
.schedule-row:hover {
  transform: translateY(-1px);
  transition: 0.2s ease;
}

.fact {
  background-color: #42634b;
  color: #fff;
}

.make {
  border: 5px solid black;
}

/*start calender 24-25*/
/* =========================
   CALENDAR MOBILE FIX
   keeps desktop look on phone
   ========================= */

.calendar-scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.calendar-scroll table,
.calendar-table{
  border-collapse: collapse !important;
  min-width: 1400px !important;   /* keeps all columns visible like desktop */
  width: 1400px !important;
  max-width: none !important;
  table-layout: fixed !important;
  background: #fff !important;
}

.calendar-scroll td,
.calendar-scroll th,
.calendar-table td,
.calendar-table th,
.calendar-scroll [class^="xl"],
.calendar-table [class^="xl"]{
  border: 1px solid #000 !important;
  font-family: Calibri, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  padding: 4px 6px !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Left labels مثل Monday / Tuesday */
.calendar-scroll td:first-child,
.calendar-table td:first-child{
  min-width: 110px !important;
  width: 110px !important;
  text-align: left !important;
  font-weight: 500 !important;
}

/* Month columns */
.calendar-scroll td,
.calendar-scroll th{
  min-width: 80px !important;
}

/* Top title row */
.calendar-scroll tr:first-child td,
.calendar-scroll tr:first-child th,
.calendar-table tr:first-child td,
.calendar-table tr:first-child th{
  font-size: 18px !important;
  font-weight: 700 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Month names row */
.calendar-scroll tr:nth-child(2) td,
.calendar-scroll tr:nth-child(2) th,
.calendar-table tr:nth-child(2) td,
.calendar-table tr:nth-child(2) th{
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Make sure colored cells stay visible with borders */
.calendar-scroll .xl67,
.calendar-scroll .xl68,
.calendar-scroll .xl69,
.calendar-scroll .xl70,
.calendar-scroll .xl71,
.calendar-scroll .xl72,
.calendar-scroll .xl73,
.calendar-scroll .xl74,
.calendar-scroll .xl75,
.calendar-scroll .xl76,
.calendar-scroll .xl77,
.calendar-scroll .xl78,
.calendar-scroll .xl79,
.calendar-scroll .xl80,
.calendar-scroll .xl81,
.calendar-scroll .xl82,
.calendar-scroll .xl83,
.calendar-scroll .xl84,
.calendar-scroll .xl85,
.calendar-scroll .xl86,
.calendar-scroll .xl87,
.calendar-scroll .xl88,
.calendar-scroll .xl89,
.calendar-scroll .xl90,
.calendar-scroll .xl91,
.calendar-scroll .xl92,
.calendar-scroll .xl93,
.calendar-scroll .xl94,
.calendar-scroll .xl95,
.calendar-scroll .xl96,
.calendar-scroll .xl97,
.calendar-scroll .xl98,
.calendar-scroll .xl99,
.calendar-scroll .xl100{
  border: 1px solid #000 !important;
  overflow: visible !important;
}

/* Mobile page spacing */
@media (max-width: 767.98px){
  .calendar-scroll{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .calendar-scroll table,
  .calendar-table{
    min-width: 1450px !important;
    width: 1450px !important;
  }

  .calendar-scroll td,
  .calendar-scroll th,
  .calendar-scroll [class^="xl"]{
    font-size: 13px !important;
    padding: 3px 5px !important;
  }

  .calendar-scroll tr:first-child td,
  .calendar-scroll tr:first-child th{
    font-size: 16px !important;
  }
}
 tr
	{mso-height-source:auto;}
col
	{mso-width-source:auto;}
br
	{mso-data-placement:same-cell;}
.style0
	{mso-number-format:General;
	text-align:general;
	vertical-align:bottom;
	white-space:nowrap;
	mso-rotate:0;
	mso-background-source:auto;
	mso-pattern:auto;
	color:black;
	font-size:10.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman";
	mso-generic-font-family:auto;
	mso-font-charset:204;
	border:none;
	mso-protection:locked visible;
	mso-style-name:Normal;
	mso-style-id:0;}
.font9
	{color:windowtext;
	font-size:12.0pt;
	font-weight:700;
	font-style:italic;
	text-decoration:none;
	font-family:Calibri, serif;
	mso-font-charset:0;}
.font10
	{color:windowtext;
	font-size:12.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font11
	{color:windowtext;
	font-size:11.0pt;
	font-weight:700;
	font-style:italic;
	text-decoration:none;
	font-family:Calibri, serif;
	mso-font-charset:0;}
.font12
	{color:windowtext;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font13
	{color:windowtext;
	font-size:9.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, serif;
	mso-font-charset:0;}
.font14
	{color:windowtext;
	font-size:9.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font15
	{color:windowtext;
	font-size:7.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, serif;
	mso-font-charset:0;}
.font16
	{color:windowtext;
	font-size:7.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font17
	{color:windowtext;
	font-size:9.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font18
	{color:windowtext;
	font-size:8.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font19
	{color:windowtext;
	font-size:8.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, serif;
	mso-font-charset:0;}
.font20
	{color:windowtext;
	font-size:6.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font21
	{color:windowtext;
	font-size:8.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, serif;
	mso-font-charset:0;}
.font22
	{color:windowtext;
	font-size:8.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman", serif;
	mso-font-charset:0;}
.font23
	{color:windowtext;
	font-size:9.5pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Arial MT", sans-serif;
	mso-font-charset:0;}
td
	{mso-style-parent:style0;
	padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:black;
	font-size:10.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Times New Roman";
	mso-generic-font-family:auto;
	mso-font-charset:204;
	mso-number-format:General;
	text-align:left;
	vertical-align:top;
	border:none;
	mso-background-source:auto;
	mso-pattern:auto;
	mso-protection:locked visible;
	white-space:nowrap;
	mso-rotate:0;}
.xl65
	{mso-style-parent:style0;
	border:.5pt solid black;
	white-space:normal;}
.xl66
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	text-align:right;
	border:.5pt solid black;
	background:red;
	mso-pattern:black none;
	white-space:normal;
	padding-right:12px;
	mso-char-indent-count:1;}
.xl67
	{mso-style-parent:style0;
	border:.5pt solid black;
	background:#92D04F;
	mso-pattern:black none;
	white-space:normal;}
.xl68
	{mso-style-parent:style0;
	border:.5pt solid black;
	background:#FFC000;
	mso-pattern:black none;
	white-space:normal;}
.xl69
	{mso-style-parent:style0;
	vertical-align:middle;
	border:.5pt solid black;
	white-space:normal;}
.xl70
	{mso-style-parent:style0;
	color:windowtext;
	font-size:8.0pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	border:.5pt solid black;
	white-space:normal;}
.xl71
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	border:.5pt solid black;
	white-space:normal;
	padding-left:24px;
	mso-char-indent-count:2;}
.xl72
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	text-align:right;
	border:.5pt solid black;
	white-space:normal;
	padding-right:24px;
	mso-char-indent-count:2;}
.xl73
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	border:.5pt solid black;
	white-space:normal;
	padding-left:12px;
	mso-char-indent-count:1;}
.xl74
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	border:.5pt solid black;
	white-space:normal;}
.xl75
	{mso-style-parent:style0;
	font-size:9.5pt;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:0;
	border:.5pt solid black;
	background:#92D04F;
	mso-pattern:black none;
	white-space:nowrap;
	mso-text-control:shrinktofit;}
.xl76
	{mso-style-parent:style0;
	font-size:9.5pt;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:0;
	border:.5pt solid black;
	white-space:nowrap;
	mso-text-control:shrinktofit;}
.xl77
	{mso-style-parent:style0;
	vertical-align:bottom;
	border:.5pt solid black;
	white-space:normal;}
.xl78
	{mso-style-parent:style0;
	border:.5pt solid black;
	background:red;
	mso-pattern:black none;
	white-space:normal;}
.xl79
	{mso-style-parent:style0;
	font-size:9.5pt;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:0;
	border:.5pt solid black;
	background:red;
	mso-pattern:black none;
	white-space:nowrap;
	mso-text-control:shrinktofit;}
.xl80
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;
	border:.5pt solid black;
	background:#BFBFBF;
	mso-pattern:black none;
	white-space:normal;}
.xl81
	{mso-style-parent:style0;
	font-size:9.5pt;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:0;
	border:.5pt solid black;
	background:#BFBFBF;
	mso-pattern:black none;
	white-space:nowrap;
	mso-text-control:shrinktofit;}
.xl82
	{mso-style-parent:style0;
	vertical-align:bottom;
	border:.5pt solid black;
	background:#BFBFBF;
	mso-pattern:black none;
	white-space:normal;}
.xl83
	{mso-style-parent:style0;
	font-size:9.5pt;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:0;
	border:.5pt solid black;
	background:#FFC000;
	mso-pattern:black none;
	white-space:nowrap;
	mso-text-control:shrinktofit;}
.xl84
	{mso-style-parent:style0;
	font-size:9.5pt;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:0;
	border:.5pt solid black;
	background:yellow;
	mso-pattern:black none;
	white-space:nowrap;
	mso-text-control:shrinktofit;}
.xl85
	{mso-style-parent:style0;
	color:windowtext;
	font-size:9.5pt;
	font-family:"Arial MT";
	mso-generic-font-family:auto;
	mso-font-charset:0;
	border:.5pt solid black;
	white-space:normal;}
.xl86
	{mso-style-parent:style0;
	vertical-align:bottom;
	border:.5pt solid black;
	background:red;
	mso-pattern:black none;
	white-space:normal;}
.xl87
	{mso-style-parent:style0;
	border-top:.5pt solid black;
	border-right:none;
	border-bottom:.5pt solid black;
	border-left:.5pt solid black;
	white-space:normal;}
.xl88
	{mso-style-parent:style0;
	border-top:.5pt solid black;
	border-right:none;
	border-bottom:.5pt solid black;
	border-left:none;
	white-space:normal;}
.xl89
	{mso-style-parent:style0;
	border-top:.5pt solid black;
	border-right:.5pt solid black;
	border-bottom:.5pt solid black;
	border-left:none;
	white-space:normal;}
.xl90
	{mso-style-parent:style0;
	border-top:.5pt solid black;
	border-right:none;
	border-bottom:.5pt solid black;
	border-left:.5pt solid black;
	background:yellow;
	mso-pattern:black none;
	white-space:normal;
	padding-left:24px;
	mso-char-indent-count:2;}
.xl91
	{mso-style-parent:style0;
	border-top:.5pt solid black;
	border-right:.5pt solid black;
	border-bottom:.5pt solid black;
	border-left:none;
	background:yellow;
	mso-pattern:black none;
	white-space:normal;
	padding-left:24px;
	mso-char-indent-count:2;}

/*end of calender 24-25*/

/*flash news*/
.news-ticker {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background-color: #3c3c3c;
  /* Background color matches your footer */
}

.ticker-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.ticker-content {
  display: inline-block;
  color: white;
  /* Text color set to white */
  animation: scroll 60s linear infinite;
  /* Slower scrolling speed */
  will-change: transform;
  /* Optimize performance for the animation */
}

.ticker-content span {
  padding: 0 50px;
}

@keyframes scroll {
  from {
    transform: translateX(100%);
    /* Start just off the right edge */
  }

  to {
    transform: translateX(-100%);
    /* Move completely off the left edge */
  }
}

/*timeline*/

/* =========================================
   TIMELINE: KEEP DESKTOP AS IS
   FIX MOBILE TO LOOK LIKE DESKTOP
   ========================================= */
@media (max-width: 767.98px) {

  /* timeline container scrolls horizontally */
  .timeline {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
  }

  /* keep the whole desktop timeline width */
  .timeline .timeline-count.desktop {
    min-width: 1280px !important;
    width: 1280px !important;
    padding: 40px !important;
    background: #fff !important;
    overflow: visible !important;
  }

  /* keep rows horizontal */
  .timeline .timeline-count.desktop .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    direction: ltr !important;
  }

  /* each box same desktop width */
  .timeline .timeline-box {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
    height: 320px !important;
    position: relative !important;
    padding: 0 !important;
  }

  /* reset bootstrap cols */
  .timeline .timeline-box.col-md-4,
  .timeline .timeline-box.col-lg-4,
  .timeline .timeline-box.col-xs-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
  }

  /* year */
  .timeline .timeline-box .age-item {
    text-align: center !important;
  }

  .timeline .timeline-box .age-item h4 {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    margin-bottom: .7rem !important;
  }

  /* straight timeline line */
  .timeline .timeline-box .timeline-line {
    width: 100% !important;
    height: 3px !important;
    border-top: 3px solid #42634b !important;
    position: relative !important;
  }

  /* center bullet */
  .timeline .timeline-box .bullet {
    width: 10px !important;
    height: 10px !important;
    border-radius: 100px !important;
    background: #42634b !important;
    margin: 0 !important;
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
  }

  /* vertical connector */
  .timeline .vertical-line {
    position: relative !important;
    width: 100% !important;
  }

  .timeline .vertical-line .wrapper-line {
    width: 2px !important;
    height: 40px !important;
    background-color: #42634b !important;
    margin: 0 auto !important;
  }

  /* cards */
  .timeline .featured-item2 {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* keep edge logic like desktop */
  .timeline-count .row:first-child .timeline-box:first-child .timeline-line:before {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 100px !important;
    background: #42634b !important;
    position: absolute !important;
    top: -6px !important;
    left: 0 !important;
    display: block !important;
  }

  .timeline-count .row:last-child .timeline-box:last-child .timeline-line:before {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 100px !important;
    background: #42634b !important;
    position: absolute !important;
    top: -6px !important;
    right: 0 !important;
    left: auto !important;
    display: block !important;
  }

  /* same transparent edge rules as desktop */
  .timeline-count .row:nth-child(even) .timeline-box:first-child .timeline-line,
  .timeline-count .row:nth-child(even) .timeline-box:last-child .timeline-line,
  .timeline-count .row:nth-child(odd) .timeline-box:first-child .timeline-line,
  .timeline-count .row:nth-child(odd) .timeline-box:last-child .timeline-line {
    border-top-color: transparent !important;
  }

  .timeline-count .row:last-child .timeline-box:last-child .timeline-line,
  .timeline-count .row:first-child .timeline-box:first-child .timeline-line {
    border-top: 3px solid #42634b !important;
  }

  /* keep desktop curved connectors on mobile too */
  .timeline-count .row:nth-child(odd) .timeline-box:last-child:before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 40px !important;
    width: 100% !important;
    height: 323px !important;
    border-top: 3px solid #42634b !important;
    border-right: 3px solid #42634b !important;
    border-bottom: 3px solid #42634b !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    display: block !important;
  }

  .timeline-count .row:nth-child(even) .timeline-box:last-child:before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 40px !important;
    width: 100% !important;
    height: 323px !important;
    border-top: 3px solid #42634b !important;
    border-left: 3px solid #42634b !important;
    border-bottom: 3px solid #42634b !important;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
    display: block !important;
  }

  .timeline-count .row:last-child .timeline-box:last-child:before {
    content: unset !important;
  }

  /* even rows stay rtl like desktop */
  .timeline-count .row:nth-child(even) {
    direction: rtl !important;
  }

  /* but text/cards stay normal */
  .timeline-count .row:nth-child(even) .timeline-box,
  .timeline-count .row:nth-child(even) .timeline-detail,
  .timeline-count .row:nth-child(even) .featured-item2,
  .timeline-count .row:nth-child(even) .featured-item2 p,
  .timeline-count .row:nth-child(even) .age-item {
    direction: ltr !important;
  }

  /* title centered */
  .timeline-title {
    text-align: center !important;
    margin-left: 0 !important;
  }
}

/* ===== FIX CURVE ON MOBILE ONLY ===== */
@media (max-width: 767.98px) {

  /* show right-side curve */
  .timeline-count .row:nth-child(odd) .timeline-box:last-child:before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 40px !important;
    width: 100% !important;
    height: 323px !important;
    border-top: 3px solid #42634b !important;
    border-right: 3px solid #42634b !important;
    border-bottom: 3px solid #42634b !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    display: block !important;
  }

  /* show left-side curve */
  .timeline-count .row:nth-child(even) .timeline-box:last-child:before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 40px !important;
    width: 100% !important;
    height: 323px !important;
    border-top: 3px solid #42634b !important;
    border-left: 3px solid #42634b !important;
    border-bottom: 3px solid #42634b !important;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
    display: block !important;
  }

  /* keep last item clean */
  .timeline-count .row:last-child .timeline-box:last-child:before {
    content: unset !important;
  }
}

  .timeline-form .table td, .timeline-form .table th{
    vertical-align: middle ;
  }
  .timeline-count.desktop{
    padding:40px;
    background: #FFf;  
  
  }
  .timeline-form .custom-control{
    display: inline-block;
    min-height: unset;
    padding-left: 0px;
  }
  .timeline-form .custom-control-label{
    margin-right: 0px !important;
  }
  .timeline-form .custom-control-label::before,
  .timeline-form .custom-control-label::after{
    top: -12px;
    left: 0px;
  }
  .timeline-form .age-box{
    width: 100px;
  }
  .timeline-form .btn-add{
    margin-left: 0px !important;
  }
  .timeline-form table{
    width: auto !important;
  }
  .timeline-count{
    padding: 15px;
  }
  .timeline-box{
    padding: 0px !important;
    position: relative;
    height: 320px;
  }
  .timeline-box .age-item{
    text-align: center;
    font-family: 'fs-elliot-bold';
  }
  .timeline-box .bullet {	
    width:10px;
    height:10px;
    border-radius:100px;
    background:#42634b;
    margin:0px auto;
    position: relative;
    top: -6px;
  }
  .timeline-box .timeline-line{
    width: 100%;
      position: relative;
      height: 3px;
      border-top: 3px solid #42634b;
  }
  
  .vertical-line{
    position: relative;
      width: 100%;
  }
  .vertical-line .wrapper-line{
        width: 2px;
      height: 40px;
      background-color: #42634b;
      margin: 0 auto;
  }
 
  .timeline-count .row:first-child .timeline-box:first-child .timeline-line:before{
    content: '';
    width:10px;
    height:10px;
    border-radius:100px;
    background:#42634b;
    position: absolute;
    top: -6px;
  }
  .timeline-count .row:last-child .timeline-box:last-child .timeline-line:before{
    content: '';
    width:10px;
    height:10px;
    border-radius:100px;
    background:#42634b;
    position: absolute;
    top: -6px;
    right: 0;
  }
  .timeline-count .row:nth-child(even) .timeline-box:first-child .timeline-line,
  .timeline-count .row:nth-child(even) .timeline-box:last-child .timeline-line,
  .timeline-count .row:nth-child(odd) .timeline-box:first-child .timeline-line,
  .timeline-count .row:nth-child(odd) .timeline-box:last-child .timeline-line{
    border-top-color: transparent !important;
  }
  .timeline-count .row:last-child .timeline-box:last-child .timeline-line,
  .timeline-count .row:first-child .timeline-box:first-child .timeline-line{
    border-top: 3px solid #42634b !important;
  }
  .timeline-count .row:last-child .timeline-box:last-child:before{
    content: unset !important;
  }
  .timeline-count .row:nth-child(odd) .timeline-box:last-child:before{
    content: '';
    position: absolute;
    right: 0;
    top: 40px;
    width: 100%;
    height:323px;
    border-top: 3px solid #42634b;
    border-right:3px solid #42634b;
    border-bottom: 3px solid #42634b;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .timeline-count .row:nth-child(even) .timeline-box:last-child:before{
    content: '';
    position: absolute;
    right: 0;
    top: 40px;
    width: 100%;
    height:323px;
    border-top: 3px solid #42634b;
    border-left:3px solid #42634b;
    border-bottom: 3px solid #42634b;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }
  .timeline-count .row:nth-child(even){
    direction: rtl;
  }
  .vertical-timeline .vertical-box{
    padding-left: 30px;
      border-left: 3px solid #42634b;
      padding-bottom: 30px;
      position: relative;
  }
  .vertical-timeline .vertical-box:last-child{
    padding-bottom: 0px ;
  }
  .vertical-timeline .vertical-box:after{
    content: '';
      width: 10px;
      height: 10px;
      border-radius: 100px;
      background-color: #42634b;
      position: absolute;
      left: -6.2px;
      top: 15px;
  }
  .vertical-timeline .vertical-box-detail{
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
      border-radius: 5px;
      padding: 10px 15px;
  }
  .vertical-timeline .vertical-box-detail p{
    padding-bottom: 0px;
  }

  .timeline-title{
  text-align:center;
  margin-left: 20%;
  font-weight:700;
  margin-bottom:40px;
  color:#42634b;
}

 /*featured item for timeline*/

.featured-item2 {
  width: 100%;
  height: 160px;              /* 🔹 FIXED HEIGHT (change if needed) */
  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */
  text-align: center;
  padding: 20px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;           /* 🔹 prevents box from expanding */
}

.featured-item2 p {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;
}

 
.hero .featured-item2 {
  background-color: var(--contrast-color);
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 20px 20px;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 80%;
  position: relative;
  z-index: 1;
}

.hero .featured-item2:before {
  content: "";
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.3s;
  z-index: -1;
}

.hero .featured-item2 .icon {
  margin-bottom: 10px;
}

.hero .featured-item2 .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: ease-in-out 0.3s;
}

.hero .featured-item2 h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.hero .featured-item2 h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.hero .featured-item2 p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}

.hero .featured-item2:hover h4 a,
.hero .featured-item2:hover .icon i,
.hero .featured-item2:hover p {
  color: var(--contrast-color);
}

.hero .featured-item2:hover:before {
  background: var(--accent-color);
  inset: 0;
  border-radius: 0px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* school services section page*/
/* ===== School Services (NEW STYLE) ===== */
.ss{
  --brand:#42634b;
  --brandSoft: rgba(66,99,75,0.10);
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 36px rgba(0,0,0,0.10);
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.62);
}

/* grid */
.ss-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* card */
.ss-card{
  grid-column: span 4;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow:hidden;
  height: 100%;
}

.ss-card::before{
  content:"";
  position:absolute;
  right:-40%;
  top:-60%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(66,99,75,0.12), transparent 62%);
  pointer-events:none;
}

/* top */
.ss-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.ss-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: var(--brandSoft);
  border: 1px solid rgba(66,99,75,0.18);
  flex: 0 0 auto;
}

.ss-icon i{
  color: var(--brand);
  font-size: 20px;
}

.ss-title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.25px;
  color: var(--text);
  line-height: 1.1;
}

.ss-sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
}

/* text */
.ss-text{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  text-align: justify;
}

/* responsive */
@media (max-width: 1200px){
  .ss-card{ grid-column: span 6; }
}
@media (max-width: 768px){
  .ss-card{ grid-column: span 12; }
}

/*club page */
/* ===== Clubs Section Styling ===== */
.clubs-section{
  --brand:#42634b;
  --brandSoft: rgba(66,99,75,0.10);
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 36px rgba(0,0,0,0.10);
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.62);
  padding: 60px 0;
}

.clubs-head{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 22px;
}

.clubs-title{
  font-weight: 950;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  display:inline-block;
}
.clubs-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin: 10px auto 0;
  background: var(--brand);
  border-radius: 999px;
}

.clubs-sub{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

/* Club Card */
.club-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Header / Badge */
.club-top{
  padding: 22px 22px 14px;
}

.club-badge{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

.club-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: var(--brandSoft);
  border: 1px solid rgba(66,99,75,0.18);
  flex: 0 0 auto;
}
.club-icon i{
  color: var(--brand);
  font-size: 20px;
}

.club-name{
  margin: 0 0 8px;
  font-weight: 950;
  letter-spacing: -0.25px;
  color: var(--text);
}

.club-desc{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 980px;
}

/* Tags */
.club-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.club-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 800;
  color: rgba(0,0,0,0.72);
  font-size: 0.92rem;
}
.club-tag i{
  color: var(--brand);
}

/* Grid */
.club-grid{
  padding: 0 16px 16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* A nice “magazine” layout */
.club-photo{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
  transition: transform .22s ease, filter .22s ease;
}

.club-photo:hover{
  transform: translateY(-3px);
  filter: brightness(0.98);
}

.club-photo img{
  width:100%;
  height: 100%;
  display:block;
  object-fit: cover;  /* works well for vertical + horizontal */
}

/* Size pattern */
.club-photo:nth-child(1){ grid-column: span 6; height: 260px; }
.club-photo:nth-child(2){ grid-column: span 3; height: 260px; }
.club-photo:nth-child(3){ grid-column: span 3; height: 260px; }
.club-photo:nth-child(4){ grid-column: span 4; height: 220px; }
.club-photo:nth-child(5){ grid-column: span 4; height: 220px; }
.club-photo:nth-child(6){ grid-column: span 4; height: 220px; }

/* CTA */
.club-cta{
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
}

.club-cta-left{
  display:flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
}
.club-cta-left strong{ color: var(--text); }

.club-btn{
  text-decoration: none;
  background: var(--brand);
  color:#fff !important;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 26px rgba(0,0,0,0.16);
}
.club-btn:hover{ filter: brightness(0.97); }

/* Responsive */
@media (max-width: 992px){
  .club-photo:nth-child(1){ grid-column: span 12; height: 260px; }
  .club-photo:nth-child(2){ grid-column: span 6; height: 220px; }
  .club-photo:nth-child(3){ grid-column: span 6; height: 220px; }
  .club-photo:nth-child(4){ grid-column: span 6; height: 210px; }
  .club-photo:nth-child(5){ grid-column: span 6; height: 210px; }
  .club-photo:nth-child(6){ grid-column: span 12; height: 240px; }
}

@media (max-width: 576px){
  .club-top{ padding: 18px; }
  .club-grid{ grid-template-columns: 1fr; padding: 0 12px 12px; }
  .club-photo{ height: 220px !important; }
  .club-cta{ flex-direction: column; align-items: stretch; }
  .club-btn{ text-align:center; }
}

/*academic page event*/
/* ===== Academic Events (different style from Clubs) ===== */
.acad-events{
  --brand:#42634b;
  --brandSoft: rgba(66,99,75,0.10);
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 36px rgba(0,0,0,0.10);
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.62);
  padding: 60px 0;
}

.acad-head{
  text-align:center;
  max-width: 920px;
  margin: 0 auto 22px;
}
.acad-title{
  font-weight: 950;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  display:inline-block;
}
.acad-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin: 10px auto 0;
  background: var(--brand);
  border-radius: 999px;
}
.acad-sub{
  margin:0;
  color: var(--muted);
  line-height: 1.7;
}

/* Stack cards with strong visual separation */
.acad-grid{
  display:grid;
  gap: 18px;
}

/* Card */
.acad-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Top */
.acad-card-top{
  display:flex;
  gap: 14px;
  padding: 18px 18px 12px;
  align-items:flex-start;
}
.acad-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--brandSoft);
  border: 1px solid rgba(66,99,75,0.18);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.acad-icon i{ color: var(--brand); font-size: 20px; }

.acad-meta h3{
  margin:0 0 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
  color: var(--text);
}
.acad-meta p{
  margin:0 0 12px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 980px;
}

/* Tags row */
.acad-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.acad-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 850;
  font-size: 0.9rem;
  color: rgba(0,0,0,0.72);
}
.acad-tag i{ color: var(--brand); }

/* Photo grid (clean, academic look) */
.acad-photos{
  padding: 0 14px 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* photo tile */
.acad-photo{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
  transition: transform .22s ease, filter .22s ease;
  aspect-ratio: 4 / 3; /* default */
}
.acad-photo:hover{
  transform: translateY(-3px);
  filter: brightness(0.98);
}
.acad-photo img{
  width:100%;
  height:100%;
  object-fit: cover;         /* ✅ no white space */
  object-position: center;   /* you can change per image if needed */
  display:block;
}

/* optional ratios you can add in HTML */
.acad-photo.wide{ aspect-ratio: 16 / 9; grid-column: span 6; }
.acad-photo.tall{ aspect-ratio: 3 / 4; grid-column: span 3; }
.acad-photo:not(.wide):not(.tall){ grid-column: span 3; }

/* responsive */
@media (max-width: 992px){
  .acad-card-top{ padding: 16px; }
  .acad-photos{ grid-template-columns: repeat(6, 1fr); }
  .acad-photo.wide{ grid-column: span 6; }
  .acad-photo.tall{ grid-column: span 3; }
  .acad-photo:not(.wide):not(.tall){ grid-column: span 3; }
}
@media (max-width: 576px){
  .acad-photos{ grid-template-columns: 1fr; }
  .acad-photo,
  .acad-photo.wide,
  .acad-photo.tall{
    grid-column: span 1;
    aspect-ratio: 16 / 10;
  }
}

/*homepage*/
/* ===== Homepage New Design ===== */
:root{
  --brand:#42634b;
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.62);
  --border: rgba(0,0,0,0.10);
  --shadow: 0 16px 36px rgba(0,0,0,0.10);
}

/* Section headings */
.section-head-center{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 22px;
}
.section-head-center h2,
.section-head-between h2,
.section-title-left{
  font-weight: 950;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  display:inline-block;
}
.section-head-center h2::after,
.section-head-between h2::after,
.section-title-left::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-top:10px;
  background: var(--brand);
  border-radius:999px;
}
.section-head-center p,
.section-head-between p{ color: var(--muted); margin:0; line-height:1.7; }

.section-head-between{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap: 14px;
  margin-bottom: 18px;
}
.see-all{ color: var(--brand); font-weight: 900; text-decoration:none; }
.see-all:hover{ text-decoration: underline; }

/* ===== Hero video ===== */
.home-hero{
  position: relative;
  min-height: 82vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
}
.hero-content{ position: relative; z-index: 2; color:#fff; padding: 60px 0; }
.hero-badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  font-weight: 800;
  margin-bottom: 12px;
}
.home-hero h1{ font-weight: 950; letter-spacing: -0.6px; line-height:1.05; margin: 0 0 12px; }
.home-hero p{ color: rgba(255,255,255,0.85); line-height: 1.7; max-width: 640px; margin: 0 0 18px; }

.hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.btn-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration:none;
}
.btn-primary-hero{
  background: var(--brand);
  color:#fff !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 34px rgba(0,0,0,0.25);
}
.btn-outline-hero{
  background: rgba(255,255,255,0.10);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.btn-primary-hero:hover,
.btn-outline-hero:hover{ filter: brightness(0.98); }

.hero-mini{
  display:flex; gap: 14px; flex-wrap: wrap;
  margin-top: 10px;
}
.mini-item{
  display:flex; align-items:center; gap: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
}
.mini-item i{ color:#fff; opacity: 0.9; }

.hero-side-card{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(8px);
}
.hero-side-card h3{ margin:0 0 8px; font-weight: 950; }
.hero-side-card p{ margin:0 0 12px; color: rgba(255,255,255,0.85); }
.btn-small{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  color: var(--brand);
  font-weight: 900;
  text-decoration:none;
}

/* ===== Highlights ===== */
.home-highlights{ padding: 30px 0 10px; background: #fff; }
.h-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  height: 100%;
}
.h-icon{
  width:48px; height:48px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(66,99,75,0.10);
  border: 1px solid rgba(66,99,75,0.18);
  margin-bottom: 10px;
}
.h-icon i{ color: var(--brand); font-size: 18px; }
.h-card h4{ margin:0 0 6px; font-weight: 950; color: var(--text); }
.h-card p{ margin:0; color: var(--muted); line-height:1.6; }

/* ===== Programs ===== */
.home-programs{ padding: 60px 0; background: #fff; }
.p-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 18px;
  height: 100%;
}
.p-card h3{ margin:0 0 10px; font-weight: 950; color: var(--text); }
.p-card p{ margin:0 0 12px; color: var(--muted); line-height:1.7; }
.p-link{ color: var(--brand); font-weight: 900; text-decoration:none; }
.p-link:hover{ text-decoration: underline; }

/* ===== Why ===== */
.home-why{ padding: 60px 0; background: #fff; }
.why-photo img{
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  object-fit: cover;
  width: 100%;
  height: 420px;
}
.why-sub{ color: var(--muted); line-height:1.7; margin-bottom: 14px; }
.why-list{ display:grid; gap: 10px; margin-bottom: 14px; }
.why-item{ display:flex; gap: 10px; align-items:flex-start; color: var(--text); }
.why-item i{ color: var(--brand); margin-top: 3px; }
.why-actions{ display:flex; gap: 12px; flex-wrap: wrap; }

/* ===== Events preview ===== */
.home-events{ padding: 60px 0; background: #fff; }
.e-card{
  display:block;
  text-decoration:none;
  color: inherit;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow:hidden;
  height: 100%;
}
.e-thumb img{ width:100%; height: 220px; object-fit: cover; display:block; }
.e-body{ padding: 14px 16px 18px; }
.e-body h3{ margin:0 0 6px; font-weight: 950; color: var(--text); }
.e-body p{ margin:0; color: var(--muted); line-height:1.6; }

/* ===== CTA ===== */
.home-cta{ padding: 50px 0 30px; background: #fff; }
.cta-box{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(66,99,75,0.08);
  border: 1px solid rgba(66,99,75,0.18);
}
.cta-box h2{ margin:0 0 6px; font-weight: 950; }
.cta-box p{ margin:0; color: var(--muted); }
.cta-actions{ display:flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 768px){
  .home-hero{ min-height: 70vh; }
  .cta-box{ flex-direction: column; align-items: flex-start; }
}