@charset "utf-8";
/* Centerleader.org | Home: Responsive V1.0 | CSS */

/* =========================
   MENU - DESKTOP CHANGES
========================= */
/* Desktop changes */
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 40px;
  height: 4px;
  background: #00013B;
  margin: 8px 0;
}

.desktop-only {
  display: inline-flex;
}

/* =========================
   MENU - MOBILE: PANEL
========================= */
.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 65vw;
	max-width: 550px;
	height: 100vh;
	background: rgba(0, 20, 70, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-left: 1px solid #000;
	box-shadow: -6px 0 20px rgba(0,0,0,.12);
	transform: translateX(100%);
	transition: transform .35s ease;
	z-index: 2000;
	padding: 60px 32px;
}

.mobile-menu.open {
	transform: translateX(0);
}

.menu-close {
	position: absolute;
	top: 0;
	right: 24px;
	font-size: 40px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	z-index: 2100;
}

.mobile-nav {
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mobile-nav a {
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
}

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

  .site-header {
    height: auto;
    padding: 20px 0;
  }

  .header-inner {
    position: relative;
    width: 100%;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* Hamburger */
  .menu-toggle {
    position: absolute;
    top: 16px;
    right: 20px;
    display: block;
    z-index: 2001;
  }

  .logo img {
    max-height: 72px;
    margin: 0 auto;
    display: block;
  }

  .btn.btn-apply {
    margin-top: 5px;
    font-size: 16px;
    padding: 1px 22px;
  }

  /* Hide desktop nav */
  .main-nav,
  .desktop-only {
    display: none;
  }
}

@media (max-width: 480px) {
	.site-header {
		padding: 16px 0;
	}

	.header-inner {
		gap: 12px;
		padding: 0 16px;
	}

	/* Hamburger */
	.menu-toggle {
		top: 0;
		right: 25px;
	}
	
	.menu-toggle {
		right: 55px;
	}
	
	/* Hamburger shape */
	.menu-toggle span {
		width: 26px;
		height: 3px;
		margin: 6px 0;
	}

	.logo img {
		max-height: 56px;
	}

	/* Mobile menu links */
	.mobile-nav a {
		font-size: 20px;
	}

	.menu-close {
		top: 16px;
		right: 35px;
	}
}

/* =========================
   HERO – MOBILE
========================= */
@media (max-width: 768px) {

  .hero {
    padding: 40px 0;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 46px;
  }

  .hero-copy p {
    font-size: 16px;
  }

  .hero .btn {
    font-size: 18px;
    padding: 12px 26px;
  }

  .hero-image img {
    width: 100%;
    max-width: 100%;
	max-height: 225px;
    margin: 0 auto;
  }
}

/* =========================
   HERO – SMALL PHONES
========================= */
@media (max-width: 480px) {

  .hero {
    padding: 32px 0;
  }

  .hero-inner {
    padding: 0 20px;
    gap: 24px;
  }

  .hero-copy h1 {
    font-size: 46px;
  }

  .hero-copy p {
    font-size: 15px;
    line-height: 1.8;
  }

  .hero .btn {
    font-size: 16px;
    padding: 10px 22px;
  }

  .hero-image img {
    max-width: 100%;
	max-height: 225px;
    border-radius: 4px;
  }
}

/* =========================
   STATS – TABLET
========================= */
@media (max-width: 768px) {

  .stats {
    padding: 20px 0;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    border-left: none;
    border-right: none;
    border-top: 2px solid #1EDCB8;
    border-bottom: 2px solid #1EDCB8;
  }

  .stat {
    padding: 24px 16px;
  }

  .stat:not(:last-child) {
    border-right: none;
  }

  /* vertical divider between columns */
  .stat:nth-child(odd) {
    border-right: 1px solid #1EDCB8;
  }

  /* horizontal divider between rows */
  .stat:nth-child(-n + 2) {
    border-bottom: 1px solid #1EDCB8;
  }
}

/* =========================
   STATS – MOBILE (SMALL)
========================= */
@media (max-width: 480px) {

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    border: none ;
    position: relative;
	margin: 0 20px 30px;
  }

  .stat {
    padding: 24px 12px;
    border-right: none;
    border-bottom: none;
  }

  /* vertical divider */
  .stats-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #1EDCB8;
    transform: translateX(-50%);
  }
}


/* =========================
   TESTIMONIALS – TABLET
========================= */
@media (max-width: 768px) {

  .testimonials {
    padding: 70px 0;
    background-size: 220px;
  }

  .testimonials-inner {
    padding: 0 24px;
  }

  .testimonials-intro {
    margin-bottom: 40px;
  }

  .testimonial-slider {
    min-height: auto;
    padding: 0 40px; /* room for arrows */
  }

  .quote {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .author img {
    width: 70px;
    height: 70px;
  }

  /* Bring arrows inside */
  .arrow {
    font-size: 26px;
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .arrow.prev {
    left: 0;
  }

  .arrow.next {
    right: 0;
  }

  .dots {
    margin-top: 30px;
  }
}

/* =========================
   TESTIMONIALS – SMALL PHONES
========================= */
@media (max-width: 480px) {

.testimonials {
	padding: 60px 0 175px;
	background: url('images/bg-bottom-left-ph.png') bottom left / contain no-repeat;
  }

.testimonial-slider {
	padding: 0 28px;
	height: 550px;
  }

  .quote {
    font-size: 15px;
    line-height: 1.7;
  }

  .author img {
    width: 64px;
    height: 64px;
  }

  .arrow {
    font-size: 24px;
	top: 25%;
  }

  .dots {
    margin-top: 24px;
    gap: 8px;
  }

  .dot {
    width: 12px;
    height: 12px;
  }
}


/* =========================
   VERY SMALL PHONES
========================= */
@media (max-width: 420px) {

  .program-grid {
    gap: 12px;
  }

  .program-card {
    height: 260px;
  }

  .module,
  .title {
    font-size: 14px;
  }
}

/* =========================
   CASE STUDIES – TABLET
========================= */
@media (max-width: 1024px) {

  .case-studies {
    padding: 90px 0;
    background-size: 260px;
  }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .case-item {
    grid-template-columns: 120px 1fr;
    gap: 40px;
  }
}

/* =========================
   CASE STUDIES – MOBILE
========================= */
@media (max-width: 768px) {
	.case-studies {
		padding: 100px 0;
		background: url('images/bg-top-right-ph.png') top right / cover no-repeat;
	}

	.case-inner {
		padding: 0 24px;
	}

	.case-grid {
		margin-top: 60px;
		gap: 48px;
	}

	.case-item {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 24px;
	}

	.case-item img {
		margin: 0 auto;
	}

	.case-copy h2 {
		font-size: 26px;
	}

	.case-copy p {
		font-size: 15px;
	}
}

/* =========================
   CASE STUDIES – SMALL PHONES
========================= */
@media (max-width: 480px) {
	.case-studies {
		padding: 100px 0;
		background: url('images/bg-top-right-ph.png') top right / contain no-repeat;
	}
	.case-grid {
		gap: 80px;
	}

	.case-item img {
		width: 120px;
		height: 120px;
	}

	.case-copy h2 {
		font-size: 24px;
	}
}

/* =========================
   TEAM – TABLET
========================= */
@media (max-width: 1024px) {

  .team {
    padding: 50px 0;
    background-size: 260px;
  }

  .team-group-title {
    margin: 60px 0 32px;
  }

  .team-grid {
    gap: 60px;
  }

  .team-grid.three {
    grid-template-columns: repeat(2, 260px);
  }

  .team-grid.two {
    grid-template-columns: repeat(2, 200px);
  }
}

/* =========================
   TEAM – MOBILE
========================= */
@media (max-width: 768px) {

  .team {
    padding: 40px 0;
    background-size: 200px;
  }

  .team-inner {
    padding: 0 24px;
  }

  .team-group-title {
    text-align: center;
    margin: 50px 0 28px;
  }

  .team-grid {
    gap: 40px;
  }

  .team-grid.three,
  .team-grid.two {
    grid-template-columns: 1fr;
  }

  .team-member img {
    width: 130px;
    height: 130px;
  }

  .team-member a,
  .team-member span {
    font-size: 15px;
  }
}

/* =========================
   TEAM – SMALL PHONES
========================= */
@media (max-width: 480px) {

  .team {
		padding: 100px 0;
		background: url('images/bg-top-right-ph.png') top right / contain no-repeat;
	}

  .team-grid {
    gap: 32px;
  }

  .team-member img {
    width: 120px;
    height: 120px;
  }

  .team-member a {
    font-size: 14px;
  }
}

/* =========================
   PROGRAMS AND RESOURCES
========================= */
@media (max-width: 768px) {
	.programs-grid {
		grid-template-columns: 1fr;
		gap: 50px;
		text-align: center;
	}

	.program-desc {
		margin-left: auto;
		margin-right: auto;
	}

	.program-list li {
		padding-left: 0;
	}

	.program-list li::before {
		display: none;
	}
}

/* =========================
   CONTACT US – SMALL PHONES
========================= */
@media (max-width: 480px) {
	.contact-inner {
		padding: 0 30px;
	}
}