/*

TemplateMo 569 Edu Meeting

https://templatemo.com/tm-569-edu-meeting

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* SchoolMatik theme overrides */
:root {
  --sm-primary: #c00000; /* Updated primary red */
  --sm-accent: #FCD116;  /* Pantone 108C - yellow */
  --sm-dark: #2b3a40;    /* lighter dark for homepage sections */
  --sm-dark-soft: #3a4b52;
}

.brand-name {
  text-transform: none !important;
}

/* Inner page header + theme toggle */
body.inner-page .header-area {
  background-color: #fff;
  top: 40px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

body.inner-page .header-area .main-nav .nav li a,
body.inner-page .header-area .main-nav .logo {
  color: #1f272b;
}

body.inner-page .header-area .main-nav .nav li a.active,
body.inner-page .header-area .main-nav .nav li:hover a {
  color: var(--sm-primary) !important;
}

body.inner-page .header-area .main-nav .nav li.has-sub:after {
  color: #1f272b;
}

.theme-switch {
  margin-left: 6px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.theme-toggle-btn {
  width: 34px;
  height: 34px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1f272b;
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.theme-toggle-btn.is-active {
  border-color: var(--sm-primary);
  color: var(--sm-primary);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

body.theme-dark {
  background-color: #12181b;
  color: #e8eef0;
}

body,
section,
.meeting-item,
.meeting-single-item .down-content,
.service-card,
.partner-card,
section.contact-us #contact,
.accordions,
section.upcoming-meetings .categories,
.testimonial-card,
.header-area,
.sub-header {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

body.theme-dark .sub-header {
  background-color: #1d2529;
}

body.theme-dark .header-area {
  background-color: #1d2529;
}

body.theme-dark.inner-page .header-area .main-nav .nav li a,
body.theme-dark.inner-page .header-area .main-nav .logo {
  color: #e8eef0;
}

body.theme-dark .theme-toggle-btn {
  border-color: #2a353a;
  color: #e8eef0;
  background: #1d2529;
}

body.theme-dark .theme-toggle-btn.is-active {
  border-color: var(--sm-accent);
  color: var(--sm-accent);
}

body.theme-dark section,
body.theme-dark section.meetings-page,
body.theme-dark section.upcoming-meetings,
body.theme-dark section.our-courses,
body.theme-dark section.our-facts,
body.theme-dark section.contact-us,
body.theme-dark section.partners-section,
body.theme-dark section.heading-page {
  background-color: #12181b;
}

body.theme-dark .section-heading h2,
body.theme-dark h2,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark p,
body.theme-dark li,
body.theme-dark .count-title {
  color: #f7f9fa;
}

body.theme-dark h2 {
  background-color: var(--sm-accent);
  color: #fff;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  line-height: 1.2;
}

body.theme-dark .section-heading h2 {
  background-color: var(--sm-accent);
  color: #fff;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  line-height: 1.2;
  border-bottom: none;
}

body.theme-dark .section-heading h2,
body.theme-dark .meeting-single-item .down-content p.description,
body.theme-dark .footer {
  border-color: #2a353a;
}

body.theme-dark .section-heading h2 {
  border-bottom: 1px solid #2a353a;
  opacity: 1;
}

body.theme-dark .section-heading h2,
body.theme-dark section.heading-page h2 {
  color: #f2f5f7;
}

body.theme-dark section.heading-page h6 {
  color: #f7f9fa;
}

body.theme-dark .meeting-item,
body.theme-dark .meeting-single-item .down-content,
body.theme-dark .service-card,
body.theme-dark .partner-card,
body.theme-dark section.contact-us #contact,
body.theme-dark .accordions,
body.theme-dark section.upcoming-meetings .categories,
body.theme-dark .testimonial-card {
  background-color: #1a2226;
  border-color: #2a353a;
}

body.theme-dark .meeting-item .down-content,
body.theme-dark .meeting-single-item .down-content,
body.theme-dark .service-card,
body.theme-dark .partner-card,
body.theme-dark .categories,
body.theme-dark .count-area-content {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

body.theme-dark .meeting-item .down-content,
body.theme-dark .our-courses .item .down-content,
body.theme-dark .count-area-content {
  background-color: #1a2226;
  border-color: #2a353a;
}

body.theme-dark section.our-facts .count-title {
  color: #e6edf0;
}

body.theme-dark section.upcoming-meetings .categories h4,
body.theme-dark section.upcoming-meetings .categories ul li a {
  color: #e6edf0;
}

body.theme-dark section.upcoming-meetings .categories h4,
body.theme-dark section.upcoming-meetings .categories .main-button-red {
  border-color: #2a353a;
}

body.theme-dark .sub-header .left-content p,
body.theme-dark .sub-header .right-icons ul li a {
  color: #e8eef0;
}

body.theme-dark .sub-header .left-content p em {
  color: var(--sm-accent);
}

body.theme-dark .meeting-item .thumb .price span,
body.theme-dark .meeting-single-item .thumb .price span,
body.theme-dark .meeting-single-item .thumb .date {
  background-color: rgba(26,34,38,0.9);
  color: #f2f5f7;
}

body.theme-dark .meeting-single-item .thumb .date h6,
body.theme-dark .meeting-item .down-content .date h6 {
  color: var(--sm-accent);
}

body.theme-dark .meeting-item .down-content p,
body.theme-dark .meeting-single-item .down-content p,
body.theme-dark .accordion-head,
body.theme-dark .accordion-body .content p {
  color: #e6edf0;
}

body.theme-dark .meeting-item .down-content h4,
body.theme-dark .meeting-single-item .down-content h4 {
  color: #f2f5f7;
}

body.theme-dark .meeting-item .down-content .date span,
body.theme-dark .meeting-single-item .thumb .date span {
  color: #f2f5f7;
}

body.theme-dark .partners-intro,
body.theme-dark .categories ul li a,
body.theme-dark .section-heading h2 {
  color: #e6edf0;
}

body.theme-dark .categories ul li a:hover {
  color: var(--sm-accent);
}

body.theme-dark .main-button-red a,
body.theme-dark .main-button-yellow a {
  color: #fff;
}

body.theme-dark .count-digit {
  color: var(--sm-accent);
}

body.theme-dark .footer p {
  color: #e6edf0;
}

body.theme-dark section.contact-us #contact input,
body.theme-dark section.contact-us #contact textarea {
  background-color: #10161a;
  color: #e8eef0;
}

body.theme-dark section.contact-us #contact h2 {
  color: #e8eef0;
  border-color: #2a353a;
}

body.theme-dark section.contact-us .right-info {
  background-color: transparent;
}

body.theme-dark .partners-intro {
  color: #cfd8dc;
}

body.theme-dark .footer p {
  color: #e8eef0;
}
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #3CF;
}

a:hover {
	color: var(--sm-accent);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: var(--sm-accent);
  color: #fff;
}

::-moz-selection {
  background: var(--sm-accent);
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color: var(--sm-primary);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: var(--sm-accent);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(252, 209, 22, 0.35);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.cta-buttons {
  text-align: center;
  margin-top: -25px;
  margin-bottom: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.cta-buttons a {
  display: inline-block;
  padding: 14px 30px;
  min-width: 220px;
  text-align: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 6px;
  animation: ctaBlink 0.9s ease-in-out infinite;
}

.cta-buttons .btn-outline {
  color: var(--sm-primary);
  border: 2px solid var(--sm-primary);
  background: transparent;
}

.cta-buttons .btn-solid {
  color: #fff;
  background-color: var(--sm-primary);
}

.cta-buttons .btn-whatsapp {
  color: #fff;
  background-color: var(--sm-accent);
  color: #1f272b;
}

.ad-banner {
  width: 100%;
  max-width: 1024px;
  height: 173px;
  margin: 0 auto 12px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--sm-accent);
  box-shadow: 0 18px 34px rgba(252, 209, 22, 0.22), 0 10px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  animation: adPulse 2.8s ease-in-out infinite;
}

.ad-banner .ad-banner-item,
.ad-banner img {
  width: 100%;
  height: 173px;
  object-fit: contain;
  display: block;
}

.ad-banner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1px dashed rgba(252, 209, 22, 0.6);
  pointer-events: none;
}

.ad-banner::after {
  content: "PUBLICITÉ";
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f272b;
  background: var(--sm-accent);
  box-shadow: 0 8px 16px rgba(252, 209, 22, 0.35);
  display: block;
}

@keyframes adPulse {
  0%, 100% {
    box-shadow: 0 18px 34px rgba(252, 209, 22, 0.22), 0 10px 24px rgba(0, 0, 0, 0.12);
  }
  50% {
    box-shadow: 0 22px 42px rgba(252, 209, 22, 0.35), 0 12px 26px rgba(0, 0, 0, 0.14);
  }
}

.ad-banner .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  text-align: center;
}

.ad-banner .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background: #d6d9dc;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
}

.ad-banner .owl-dots .active {
  width: 18px;
  border-radius: 6px;
  background: var(--sm-primary);
}

.header-area .main-nav {
  margin-top: 6px;
}

@media (max-width: 768px) {
  .ad-banner {
    max-width: 100%;
    height: auto;
    margin: 14px auto 16px;
  }

  .ad-banner .ad-banner-item,
  .ad-banner img {
    height: auto;
    object-fit: contain;
  }

  .ad-banner::after {
    top: 6px;
    left: 8px;
    font-size: 9px;
  }
}


@keyframes ctaBlink {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.65;
    transform: translateY(-1px);
  }
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.sub-header {
  background-color: var(--sm-dark);
  position: relative;
  z-index: 900;
  padding-top: 18px;
  padding-bottom: 12px;
}

.sub-header .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: var(--sm-accent);
}

.sub-header .left-content p em {
   font-style: normal;
   color: var(--sm-accent);
}

.background-header {
  background-color: #fff!important;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: var(--sm-primary)!important;
}

.background-header .nav li a.active {
  color: var(--sm-primary)!important;
}

.header-area {
  background-color: transparent;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  -webkit-transition: background-color .3s ease, box-shadow .3s ease;
  -moz-transition: background-color .3s ease, box-shadow .3s ease;
  -o-transition: background-color .3s ease, box-shadow .3s ease;
  transition: background-color .3s ease, box-shadow .3s ease;
}

body.inner-page .header-area {
  position: relative;
  top: 0;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

body.inner-page .header-area .main-nav {
  background: #fff;
}

body.inner-page .header-area .main-nav .nav li a,
body.inner-page .header-area .main-nav .logo {
  color: #1f272b !important;
}

body.inner-page .header-area .main-nav .nav li:hover a,
body.inner-page .header-area .main-nav .nav li a.active {
  color: var(--sm-primary) !important;
}

body.inner-page .header-area .main-nav .nav li.has-sub:after {
  color: #1f272b;
}

body.inner-page .header-area .main-nav .menu-trigger span,
body.inner-page .header-area .main-nav .menu-trigger span:before,
body.inner-page .header-area .main-nav .menu-trigger span:after {
  background-color: #1f272b;
}

body.inner-page section.heading-page {
  padding-top: 140px;
  padding-bottom: 80px;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo img {
  width: auto;
  max-height: 80px;
  margin-top: 10px;
}

.background-header .main-nav .logo img {
  margin-top: 10px;
  max-height: 70px;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: #1f272b;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
  text-shadow: none;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: var(--sm-accent)!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: var(--sm-accent)!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: var(--sm-accent)!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: var(--sm-accent)!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: var(--sm-accent)!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(43,58,64,0.62);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: var(--sm-accent);
  font-weight: 900;
}

.main-banner .caption h2 .yellow-text {
  color: var(--sm-accent);
}

.main-banner .caption p {
  color: #fff;
  font-size: 14px;
  max-width: 570px;
}

.main-banner .caption .hero-brand {
  font-size: 36px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

/* Bouton centré sur la vidéo, avant les textes */
.hero-center-button {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media (max-width: 767px) {
  .hero-center-button {
    /* Sur mobile, on masque le bouton centré pour garder uniquement
       le bouton sous le texte, qui a déjà la bonne taille et position */
    display: none;
  }
}

.main-banner .caption .main-button-red {
  margin-top: 30px;
}

/* Conteneur pour logo-bannière-logo */
.banner-with-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
}

/* Logos SchoolMatik autour de la bannière */
.schoolmatik-logo-left,
.schoolmatik-logo-right {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schoolmatik-logo-left img,
.schoolmatik-logo-right img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Ajuster la bannière pour qu'elle prenne l'espace restant */
.banner-with-logos .ad-banner {
  flex: 1;
  max-width: 1024px;
  margin: 0;
}

/* Animation flash pour le bouton "Cliquez pour payer" */
.flash-button a {
  animation: flash 2s infinite;
  font-size: 18px !important;
  padding: 18px 40px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(192, 0, 0, 0.4);
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.flash-button a:hover {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(192, 0, 0, 0.6);
}

/* Bouton prééminent dans cta-buttons */
.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.cta-buttons .btn-solid.flash-button {
  order: -1;
  display: block;
  width: 100%;
  max-width: 400px;
  text-align: center;
  font-size: 18px !important;
  padding: 18px 40px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.cta-buttons .btn-outline,
.cta-buttons .btn-whatsapp {
  width: 100%;
  max-width: 400px;
  margin: 0 !important;
}

.waaw-image-container {
  width: 100%;
  margin: 30px auto;
  text-align: center;
}

.waaw-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 767px) {

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

  /* Ajuster les logos sur mobile */
  .banner-with-logos {
    flex-direction: column;
    gap: 15px;
  }

  .schoolmatik-logo-left,
  .schoolmatik-logo-right {
    width: 120px;
    height: 120px;
  }
  
  /* Sur mobile : afficher un seul logo avant la bannière */
  .schoolmatik-logo-right {
    display: none;
  }

  .waaw-image-container {
    margin: 20px auto;
    padding: 0 15px;
  }

  .waaw-image {
    border-radius: 8px;
  }

  .banner-with-logos .ad-banner {
    width: 100%;
  }

  .ad-banner::after {
    display: none;
  }

  .flash-button a {
    font-size: 16px !important;
    padding: 15px 30px !important;
  }

  .manager-message {
    padding: 25px 20px;
  }

  .manager-content h3 {
    font-size: 24px;
  }

  .manager-content h3 i {
    font-size: 28px;
  }

  .manager-text .text-item {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    margin-bottom: 20px;
  }

  .manager-text .text-item .text-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
    align-self: flex-start;
  }

  .manager-text .text-item p {
    font-size: 14px;
  }

  .manager-text .text-item-thanks p {
    font-size: 16px;
  }

  .manager-photo img {
    border-width: 3px;
  }

}


/*
---------------------------------------------
services
---------------------------------------------
*/

.services {
  margin-top: -135px;
  position: absolute;
  width: 100%;
}

.services .item {
  background-image: none;
  background-color: var(--sm-primary);
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 20px 20px 24px;
  height: auto;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}

.services .owl-service-item .owl-item .item {
  height: auto;
  min-height: 230px;
}

.services .item .down-content {
  margin-top: auto;
}

.services .owl-service-item .owl-item {
  display: flex;
  align-items: stretch;
  height: auto;
}

.services .owl-service-item .owl-stage {
  display: flex;
}

.services .item .icon {
  max-width: 80px;
  margin: 0 auto;
}

.services .item .icon img {
  width: 100%;
  height: auto;
  display: block;
}

.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.services .item p {
  color: #fff;
  font-size: 13px;
}

.services .owl-nav {
  display: inline-block !important;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25px);
}
    
.services .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
  opacity: 0;
}

.services .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: var(--sm-primary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.services .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.services .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: var(--sm-primary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

section.upcoming-meetings {
  background-color: #fff;
  padding-top: 230px;
  padding-bottom: 110px;
}

section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all .3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: var(--sm-primary);
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid #e6e6e6;
  background-color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.06);
  transform: translateZ(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.upcoming-meetings .meeting-item {
  margin-bottom: 0;
}

.meeting-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meeting-item .down-content .date {
  float: none;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 0;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sm-primary);
}

.meeting-item .down-content .date span {
  display: inline-block;
  color: #1f272b;
  font-size: 16px;
  margin-top: 0;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: block;
  margin-bottom: 0;
}

.meeting-item .down-content p {
  margin-left: 0;
  color: #1f272b;
  font-size: 14px;
}



/*
---------------------------------------------
apply now
---------------------------------------------
*/

section.apply-now {
  background-image: linear-gradient(rgba(252, 209, 22, 0.6), rgba(252, 209, 22, 0.6)), url(../images/apply-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px;
  position: relative;
  overflow: hidden;
}

section.apply-now::before,
section.apply-now::after {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 180px;
  background-color: #fff;
  border-radius: 0 0 50% 50%;
  z-index: 1;
}

section.apply-now::before {
  top: -120px;
}

section.apply-now::after {
  bottom: -120px;
  border-radius: 50% 50% 0 0;
}

section.apply-now .container {
  position: relative;
  z-index: 2;
}

body.theme-dark section.apply-now::before,
body.theme-dark section.apply-now::after {
  background-color: #12181b;
}

section.apply-now .item {
  background-color: rgba(250,250,250,0.15);
  padding: 40px;
  margin-bottom: 30px;
}

section.apply-now .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.apply-now .item h3 i {
  margin-right: 10px;
  color: var(--sm-primary);
  font-size: 18px;
}

section.apply-now .item p {
  color: #fff;
  margin-bottom: 20px;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}
@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}

.benefits-accordion {
  margin-left: 0;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid #f0f1f3;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  box-shadow: 0 18px 40px rgba(31, 39, 43, 0.08);
}

.benefits-accordion .accordion {
  border-bottom: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 25px rgba(31, 39, 43, 0.06);
  margin-bottom: 14px;
  overflow: hidden;
}

.benefits-accordion .accordion:last-child {
  margin-bottom: 0;
}

.benefits-accordion .accordion-head {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 0;
}

.benefits-accordion .accordion-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.benefits-accordion .accordion-kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9499;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.benefits-accordion .accordion-kicker i {
  color: var(--sm-primary);
}

.benefits-accordion .accordion-text {
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
}

.benefits-accordion .accordion-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.benefits-accordion .accordion-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  color: #b27400;
  background: rgba(252, 209, 22, 0.18);
  border: 1px solid rgba(252, 209, 22, 0.35);
  white-space: nowrap;
}

.benefits-accordion .accordion-head .icon {
  float: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4f6f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease-in-out, background 200ms ease-in-out;
}

.benefits-accordion .accordion-head.is-open {
  color: inherit;
}

.benefits-accordion .accordion-head.is-open .accordion-text {
  color: var(--sm-primary);
}

.benefits-accordion .accordion-head.is-open .icon {
  background: rgba(192, 0, 0, 0.12);
}

.benefits-accordion .accordion-body > .content {
  padding: 0 20px 20px;
}

.benefits-accordion .accordion-body .content p {
  margin: 0;
  color: #5a6369;
  line-height: 1.7;
}

@media screen and (max-width: 991px) {
  .benefits-accordion {
    padding: 20px;
  }

  .benefits-accordion .accordion-head {
    padding: 16px;
  }

  .benefits-accordion .accordion-text {
    font-size: 16px;
  }
}

body.theme-dark .benefits-accordion {
  border-color: #2a343b;
  background: linear-gradient(180deg, #1b2226 0%, #151b1f 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

body.theme-dark .benefits-accordion .accordion {
  background: #1f272b;
  border-color: #2c363d;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

body.theme-dark .benefits-accordion .accordion-text {
  color: #e8eef0;
}

body.theme-dark .benefits-accordion .accordion-kicker {
  color: #b6c0c4;
}

body.theme-dark .benefits-accordion .accordion-tag {
  color: #f6d56a;
  background: rgba(252, 209, 22, 0.16);
  border-color: rgba(252, 209, 22, 0.3);
}

body.theme-dark .benefits-accordion .accordion-head .icon {
  background: #273038;
}

body.theme-dark .benefits-accordion .accordion-body .content p {
  color: #c9d2d6;
}


/* 
---------------------------------------------
courses
--------------------------------------------- 
*/

section.our-courses {
  background-color: #fff;
  padding-top: 140px;
  padding-bottom: 130px;
}

.our-courses .item .down-content {
  background-color: #fff;
}

.our-courses .item .down-content h4 {
  padding: 25px;
  font-size: 18px;
  color: #1f272b;
  text-align: center; 
  border-bottom: 1px solid #eee;
}

.our-courses .item .down-content .info {
  padding: 25px;
}

.our-courses .item .down-content .info ul li {
  display: inline-block;
  margin-right: 1px;
}

.our-courses .item .down-content .info ul li i {
  color: var(--sm-accent);
  font-size: 14px;
}

.our-courses .item .down-content .info span {
  color: var(--sm-primary);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.our-courses .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-45px);
}

.our-courses .owl-dots {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.our-courses .owl-dots .owl-dot {
  transition: all .5s;
  width: 7px;
  height: 7px;
  background-color: #fff;
  margin: 0px 5px;
  border-radius: 50%;
  outline: none;
}

.our-courses .owl-dots .active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}
    
.our-courses .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.our-courses .owl-nav .owl-prev span,
.our-courses .owl-nav .owl-next span {
  opacity: 0;
}

.our-courses .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.our-courses .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.our-courses .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
our facts
---------------------------------------------
*/

section.our-facts {
  background-color: #fff;
  padding: 140px 0px 125px 0px;
}

section.our-facts h2 {
  font-size: 38px;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}

.count-area-content {
  text-align: center;
  background-color: var(--sm-accent);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
  border: 1px solid var(--sm-accent);
  box-shadow: 0 12px 24px rgba(252, 209, 22, 0.35), 0 3px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.count-area-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(252, 209, 22, 0.45), 0 5px 12px rgba(0, 0, 0, 0.08);
}

.percentage .count-digit:after {
  content: '%';
  margin-left: 3px;
}

.count-digit {
    margin: 5px 0px;
    color: var(--sm-primary);
    font-weight: 700;
    font-size: 36px;
}
.count-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--sm-primary);
    letter-spacing: 0.5px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  background-image: url(../images/video-item-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}


/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/

section.contact-us {
  background-color: #fff;
  padding: 140px 0px 0px 0px;
}

section.upcoming-meetings .section-heading h2,
section.our-courses .section-heading h2,
section.our-facts h2,
section.contact-us #contact h2,
section.our-facts .count-title {
  color: #1f272b;
}

section.upcoming-meetings .section-heading h2,
section.our-courses .section-heading h2 {
  border-bottom: 1px solid #eee;
}

section#temoignages .section-heading {
  text-align: center;
}

section#equipe .section-heading {
  text-align: center;
}

section#confiance .section-heading,
section#partenaires .section-heading {
  text-align: center;
}

section#partenaires .section-heading h2 {
  color: #1f272b;
  border-bottom: 1px solid #eee;
}

section.contact-us #contact {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

section.contact-us #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
  transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
  transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

section.contact-us #contact input:hover,
section.contact-us #contact textarea:hover,
section.contact-us #contact input:focus,
section.contact-us #contact textarea:focus {
  background-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.12), 0 10px 22px rgba(31, 39, 43, 0.08);
}

section.contact-us #contact button {
  font-size: 13px;
  color: #fff;
  background-color: var(--sm-primary);
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us .right-info {
  background-color: var(--sm-primary);
  border-radius: 28px;
  padding: 36px 32px;
}

.contact-panel {
  background: #fff;
  border-radius: 32px;
  padding: 48px;
  border: 1px solid rgba(192, 0, 0, 0.12);
  box-shadow: 0 24px 60px rgba(31, 39, 43, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.contact-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(31, 39, 43, 0.16);
}
.contact-panel-title {
  font-size: 28px;
  letter-spacing: 0.04em;
}

.contact-panel-form .main-button-red a,
.contact-panel-form .main-button-yellow a {
  border-radius: 30px;
}

.contact-panel .button {
  border-radius: 30px;
  box-shadow: 0 14px 26px rgba(192, 0, 0, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.contact-panel .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(192, 0, 0, 0.24);
}

.contact-panel-info {
  border-left: 1px solid rgba(31, 39, 43, 0.08);
  padding-left: 28px;
}

.contact-panel .right-info {
  background-color: var(--sm-primary);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: none;
  transition: none;
}

.contact-panel .right-info ul li {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: none;
  position: relative;
}

.contact-info-head {
  display: block;
  margin-bottom: 10px;
}

.contact-info-icon {
  display: none;
}

.contact-panel .right-info ul li h6 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.contact-panel .right-info ul li span {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  padding-left: 0;
  line-height: 1.6;
}


.contact-panel-form {
  padding-right: 20px;
}

.contact-panel-info {
  border-left: 1px solid #eee;
  padding-left: 24px;
}

.contact-panel .right-info ul li h6 {
  color: #fff;
}

@media (max-width: 991px) {
  .contact-panel {
    padding: 28px;
  }

  .contact-panel-form {
    padding-right: 0;
  }

  .contact-panel-info {
    border-left: 0;
    border-top: 1px solid #eee;
    padding-left: 0;
    padding-top: 24px;
  }
}

body.theme-dark .contact-panel {
  background: #1b2226;
  border-color: rgba(252, 209, 22, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

body.theme-dark .contact-panel:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

body.theme-dark .contact-panel-info {
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .contact-info-icon {
  background: rgba(252, 209, 22, 0.12);
  color: var(--sm-accent);
}

body.theme-dark .contact-panel .right-info .contact-info-icon {
  background: #fff;
  color: var(--sm-primary);
}

body.theme-dark section.contact-us #contact input:hover,
body.theme-dark section.contact-us #contact textarea:hover,
body.theme-dark section.contact-us #contact input:focus,
body.theme-dark section.contact-us #contact textarea:focus {
  background-color: #0f1418;
  box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.16), 0 12px 24px rgba(0, 0, 0, 0.35);
}


body.theme-dark section.contact-us .right-info ul li {
  border-color: #2a343b;
}

body.theme-dark section.contact-us .right-info ul li h6 {
  color: #e8eef0;
}

body.theme-dark section.contact-us .right-info ul li span {
  color: #c9d2d6;
}

section.contact-us .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

section.contact-us .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.contact-us .right-info ul li h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

section.contact-us .right-info ul li span {
  display: block;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  word-break: break-word;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

section.contact-us .right-info ul li span.email-primary,
section.contact-us .right-info ul li span.email-secondary {
  font-size: 12.5px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.contact-panel .right-info ul li span.email-primary,
.contact-panel .right-info ul li span.email-secondary {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 15px;
  font-weight: 600;
}

.contact-panel .right-info ul li {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-panel .right-info ul li h6 {
  color: #fff;
}

.contact-panel .right-info ul li span {
  color: rgba(255, 255, 255, 0.92);
}

.chat-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  border: none;
  background-color: rgba(255,255,255,0.95);
  color: #1f272b;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: all .2s ease;
}

.chat-toggle:hover {
  transform: translateY(-2px);
}

.chat-widget {
  position: fixed;
  right: 18px;
  bottom: 70px;
  width: 320px;
  max-width: calc(100% - 36px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
  overflow: hidden;
  display: none;
  z-index: 9999;
}

.chat-widget.open {
  display: block;
}

.chat-header {
  background: var(--sm-primary);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.chat-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.chat-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 12px;
  background: #fafafa;
}

.chat-message {
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.chat-message.bot {
  background: #fff;
  border: 1px solid #eee;
}

.chat-message.user {
  background: rgba(200,59,78,0.12);
  border: 1px solid rgba(200,59,78,0.2);
  text-align: right;
}

.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eee;
}

.chat-input input {
  flex: 1;
  border-radius: 999px;
  border: 1px solid #ddd;
  padding: 8px 12px;
  font-size: 13px;
}

.chat-input button {
  background: var(--sm-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

.testimonial-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 32px 32px 28px;
  height: 100%;
  border: 1px solid #eef0f2;
  box-shadow: 0 16px 32px rgba(31, 39, 43, 0.08);
  color: #1f272b;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(31, 39, 43, 0.12);
}

.testimonial-card h4 {
  margin-bottom: 12px;
  font-size: 18px;
  color: #1f272b;
}

.testimonial-card p {
  font-size: 15px;
  color: #5a6369;
  line-height: 1.7;
}

.testimonial-quote {
  position: absolute;
  top: 14px;
  right: 22px;
  font-size: 56px;
  color: rgba(245, 164, 37, 0.16);
  line-height: 1;
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.testimonial-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: #1f272b;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  border: 1px solid #e6e9ed;
  box-shadow: 0 10px 20px rgba(31, 39, 43, 0.08);
}

.testimonial-meta h4 {
  margin-bottom: 8px;
}

.testimonial-subrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.testimonial-rating i {
  color: var(--sm-accent);
  font-size: 12px;
}

.testimonial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #1f272b;
  background: #f1f3f5;
  border: 1px solid #e7eaee;
}

.testimonial-badge i {
  color: #20a35a;
}

body.theme-dark .testimonial-card {
  background: #1b2226;
  border-color: #2a353a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

body.theme-dark .testimonial-card h4 {
  color: #f2f5f7;
}

body.theme-dark .testimonial-card p {
  color: #c9d2d6;
}

body.theme-dark .testimonial-quote {
  color: rgba(252, 209, 22, 0.25);
}

body.theme-dark .testimonial-avatar {
  background: #151b1f;
  color: #f2f5f7;
  border-color: #2a353a;
}

body.theme-dark .testimonial-badge {
  color: #f2f5f7;
  background: #242c31;
  border-color: #2f3a40;
}

.owl-testimonials .item {
  display: flex;
  justify-content: center;
  padding: 6px;
}

.owl-testimonials .owl-dots {
  text-align: center;
  margin-top: 25px;
}

.owl-testimonials .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  background-color: #d0d0d0;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.owl-testimonials .owl-dots .active {
  width: 24px;
  border-radius: 6px;
  background-color: var(--sm-primary);
}

.owl-team .item {
  display: flex;
}

.owl-team .meeting-item {
  width: 100%;
}

.our-courses .owl-team .meeting-item .down-content {
  text-align: center;
  align-items: center;
  gap: 6px;
}

.our-courses .owl-team .meeting-item .down-content h4 {
  width: 100%;
  margin-bottom: 8px;
}

.our-courses .owl-team .meeting-item .down-content p {
  width: 100%;
  margin: 0;
}

/* Section Mot du Manager Général */
.manager-message {
  background: #ffffff;
  border-radius: 25px;
  padding: 50px;
  box-shadow: 0 20px 60px rgba(192, 0, 0, 0.15), 0 8px 25px rgba(254, 221, 0, 0.1);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out;
  border: 3px solid #FEDD00;
}

.manager-message::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(254, 221, 0, 0.02) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.manager-message::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(192, 0, 0, 0.02) 0%, transparent 70%);
  animation: rotate 25s linear infinite reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.manager-photo {
  text-align: center;
  position: relative;
  z-index: 1;
  animation: slideInLeft 0.8s ease-out 0.2s both;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.manager-photo img {
  max-width: 100%;
  border-radius: 25px;
  box-shadow: 0 15px 40px rgba(192, 0, 0, 0.25), 0 5px 15px rgba(254, 221, 0, 0.2);
  border: 4px solid #FEDD00;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.manager-photo img:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(192, 0, 0, 0.35), 0 10px 25px rgba(254, 221, 0, 0.25);
  border-color: #c00000;
}

.manager-content {
  position: relative;
  z-index: 2;
  animation: slideInRight 0.8s ease-out 0.3s both;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(2px);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.manager-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid #FEDD00;
  position: relative;
}

.manager-header::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 3px;
  background: #c00000;
  animation: expandWidth 1s ease-out 0.5s both;
}

@keyframes expandWidth {
  from {
    width: 0;
  }
  to {
    width: 80px;
  }
}

.manager-content h3 {
  font-size: 32px;
  font-weight: 800;
  color: #c00000;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9),
               0 1px 2px rgba(192, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.manager-content h3 i {
  color: #FEDD00;
  font-size: 36px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.manager-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.manager-title i {
  color: #c00000;
  font-size: 20px;
}

.manager-text {
  color: #1f272b;
  line-height: 1.9;
  position: relative;
  z-index: 2;
}

.manager-text .text-item {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  border-left: 4px solid #FEDD00;
  transition: all 0.3s ease;
  animation: fadeIn 0.6s ease-out both;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.manager-text .text-item:nth-child(1) {
  animation-delay: 0.4s;
}

.manager-text .text-item:nth-child(2) {
  animation-delay: 0.5s;
}

.manager-text .text-item:nth-child(3) {
  animation-delay: 0.6s;
}

.manager-text .text-item:nth-child(4) {
  animation-delay: 0.7s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.manager-text .text-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(254, 221, 0, 0.2), transparent);
  transition: left 0.5s ease;
}

.manager-text .text-item:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 25px rgba(192, 0, 0, 0.15);
  border-left-color: #c00000;
  background: rgba(255, 255, 255, 1);
}

.manager-text .text-item:hover::before {
  left: 100%;
}

.manager-text .text-item .text-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #c00000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 15px rgba(192, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.manager-text .text-item:hover .text-icon {
  transform: rotate(5deg) scale(1.1);
  box-shadow: 0 6px 20px rgba(192, 0, 0, 0.4);
}

.manager-text .text-item p {
  margin: 0;
  font-size: 16px;
  flex: 1;
  color: #1a1a1a;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.manager-text .text-item-thanks {
  background: rgba(254, 221, 0, 0.12);
  border-left-color: #c00000;
  border-left-width: 5px;
}

.manager-text .text-item-thanks p {
  font-size: 18px;
  color: #c00000;
}

.manager-text .text-item-thanks .text-icon {
  background: #FEDD00;
  color: #1f272b;
}

.owl-testimonials .item {
  display: flex;
  justify-content: center;
}

.owl-testimonials .owl-dots {
  text-align: center;
  margin-top: 25px;
}

.owl-testimonials .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  background-color: #d0d0d0;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.owl-testimonials .owl-dots .active {
  width: 24px;
  border-radius: 6px;
  background-color: var(--sm-primary);
}

.footer {
  text-align: center;
  margin-top: 140px;
  border-top: 1px solid #eee;
  padding: 50px 0px;
}
.footer p {
  text-transform: uppercase;
  font-size: 14px;
  color: #1f272b;
}

.partners-section {
  background-color: #fff;
  padding: 80px 0 120px 0;
}

.partners-grid {
  justify-content: center;
}

.partners-carousel .item {
  padding: 6px;
}

.partners-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.partners-carousel .owl-dots {
  text-align: center;
  margin-top: 18px;
}

.partners-carousel .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  background-color: #d6d9dc;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.partners-carousel .owl-dots .active {
  width: 22px;
  border-radius: 6px;
  background-color: var(--sm-primary);
}

/* Garantir la visibilité des carrousels - Permettre les transformations pour le défilement */
.owl-carousel .owl-item,
.owl-service-item .owl-item,
.partners-carousel .owl-item,
.ad-banner-carousel .owl-item {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.partners-intro {
  text-align: center;
  max-width: 900px;
  margin: -30px auto 25px auto;
  color: #5a5a5a;
  font-size: 15px;
}

.service-cards {
  margin-top: 20px;
}

.service-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-top: 3px solid rgba(252, 209, 22, 0.45);
  border-radius: 20px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(252, 209, 22, 0.12);
}

.service-card .icon-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}

.service-card h4 {
  font-size: 18px;
  margin-bottom: 12px;
}

.service-steps {
  list-style: none;
  padding-left: 0;
}

.service-steps li {
  margin-bottom: 10px;
}

.partners-grid {
  justify-content: center;
}

.partner-card {
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06), 0 6px 14px rgba(252, 209, 22, 0.12);
  border-radius: 16px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-card img {
  max-height: 48px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner-card img.partner-logo-emoney {
  max-height: 58px;
}

.partners-carousel .partner-card {
  height: 90px;
}

.partners-carousel .partner-card img {
  max-width: 120px;
  max-height: 52px;
  object-fit: contain;
}

/* Assurer la visibilité et le fonctionnement du carrousel des partenaires */
.partners-carousel {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  min-height: 150px;
}

.partners-carousel .owl-stage-outer {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.partners-carousel .owl-stage {
  display: flex !important;
  align-items: center !important;
}

.footer p a {
  color: var(--sm-accent);
}


/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-color: #fff;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #1f272b;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #1f272b;
  letter-spacing: 1px;
}

section.heading-page.hero-image {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

section.heading-page.hero-image:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

section.heading-page.hero-image .container {
  position: relative;
  z-index: 1;
}

section.heading-page.hero-image h6,
section.heading-page.hero-image h2 {
  color: #fff;
}


/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  background-color: #fff;
  padding-top: 140px;
  padding-bottom: 0px;
}

section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .section-heading h2 {
  color: #1f272b;
  border-bottom: 1px solid #eee;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: var(--sm-primary);
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: var(--sm-primary);
  color: #1f272b;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

section.meetings-page .pagination ul li {
  display: inline-block;
}

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all .3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: var(--sm-primary);
  color: #fff;
}

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.06);
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250,250,250,0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sm-primary);
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all .3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: var(--sm-accent);
}

/* Meeting item column */
.templatemo-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.templatemo-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.templatemo-item-col {
		width: 100%;
	}
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1300px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
  
  /* Ajuster la taille des logos sur écrans moyens */
  .banner-with-logos .schoolmatik-logo-left,
  .banner-with-logos .schoolmatik-logo-right {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
    margin-top: 60px;
  }

  section.upcoming-meetings {
    padding-top: 400px;
  }

  section.upcoming-meetings .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .accordions {
    margin-left: 0px;
  }

  .new-students {
    margin-top: 15px;
  }

  section.our-facts .video {
    margin-left: 0px;
    margin-top: 15px;
  }

  section.contact-us #contact {
    margin-bottom: 30px;
  }

}

@media (max-width: 768px) {
  section.apply-now::before,
  section.apply-now::after {
    height: 120px;
  }

  section.apply-now::before {
    top: -80px;
  }

  section.apply-now::after {
    bottom: -80px;
  }
}

@media (max-width: 767px) {

  .sub-header .left-content p {
    display: none;
  }

  .sub-header .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }

}

/* ============================================
   SCROLL REVEAL 3D FUTURISTE
   ============================================ */

/* Configuration 3D globale pour toutes les sections */
.section {
  perspective: 1000px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Effets 3D pour les sections principales */
.section[data-section] {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Effets 3D pour les titres */
.section-heading {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.section-heading h2 {
  transform-style: preserve-3d;
  text-shadow: 0 0 20px rgba(252, 209, 22, 0.3),
               0 0 40px rgba(192, 0, 0, 0.2),
               2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Exclusion des carrousels des effets 3D - Permettre les transformations pour le défilement */
.owl-carousel,
.owl-service-item,
.partners-carousel,
.ad-banner-carousel {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Permettre les transformations nécessaires pour le défilement - Ne pas forcer une position fixe */

.owl-carousel .owl-stage-outer,
.owl-service-item .owl-stage-outer,
.partners-carousel .owl-stage-outer,
.ad-banner-carousel .owl-stage-outer {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
}

/* Permettre les boutons de navigation */
.owl-carousel .owl-nav,
.owl-service-item .owl-nav,
.partners-carousel .owl-nav {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Effets 3D pour les cartes de services (hors carrousel) */
.services .item:not(.owl-item .item) {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1),
              box-shadow 0.6s ease;
  will-change: transform;
}

.services .item:not(.owl-item .item):hover {
  transform: perspective(1000px) rotateY(5deg) rotateX(-2deg) translateZ(20px);
  box-shadow: 0 20px 60px rgba(192, 0, 0, 0.3),
              0 10px 30px rgba(252, 209, 22, 0.2),
              inset 0 0 30px rgba(255, 255, 255, 0.1);
}

/* Effets 3D pour les meeting-items */
.meeting-item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.meeting-item:hover {
  transform: perspective(1000px) rotateX(-5deg) rotateY(5deg) translateZ(15px);
}

/* Effets 3D pour les boutons CTA */
.cta-buttons {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.cta-buttons a {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.cta-buttons a:hover {
  transform: perspective(1000px) rotateX(-5deg) translateZ(10px);
}

/* Effets 3D pour l'image waaw */
.waaw-image-container {
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
}

.waaw-image {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.waaw-image-container:hover .waaw-image {
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateZ(20px);
}

/* Effets 3D pour les items "Comment payer" */
.apply-now .item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.apply-now .item:hover {
  transform: perspective(1000px) rotateY(-3deg) translateZ(10px);
}

/* Effets 3D pour les accordions */
.accordion {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.accordion:hover {
  transform: perspective(1000px) rotateX(-2deg) translateZ(5px);
}

/* Effets 3D pour le message du manager */
.manager-message {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.manager-message:hover {
  transform: perspective(1000px) rotateX(-3deg) translateZ(10px);
}

/* Effets 3D pour les témoignages */
.testimonial-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.testimonial-card:hover {
  transform: perspective(1000px) rotateY(5deg) rotateX(-2deg) translateZ(15px);
}

/* Effets 3D pour les statistiques */
.count-area-content {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.count-area-content:hover {
  transform: perspective(1000px) rotateZ(-3deg) translateZ(10px);
}

/* Effets 3D pour la vidéo */
.video {
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.video:hover {
  transform: perspective(1000px) rotateY(-5deg) translateZ(15px);
}

/* Effets 3D pour les partenaires */
.partner-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.partner-card:hover {
  transform: perspective(1000px) rotateX(-3deg) rotateY(3deg) translateZ(10px);
}

/* Effets 3D pour le formulaire de contact */
.contact-panel {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.contact-panel:hover {
  transform: perspective(1000px) rotateX(-2deg) translateZ(5px);
}

/* Effets 3D pour les éléments de contact */
.contact-info-head {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
  will-change: transform;
}

.contact-info-head:hover {
  transform: perspective(1000px) rotateY(-3deg) translateZ(5px);
}

/* Amélioration des ombres pour effet 3D */
.section,
.services .item,
.meeting-item,
.manager-message,
.testimonial-card,
.count-area-content,
.partner-card {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}

/* Animation de brillance 3D */
@keyframes shimmer3D {
  0% {
    transform: perspective(1000px) rotateY(0deg) translateX(-100%);
  }
  100% {
    transform: perspective(1000px) rotateY(0deg) translateX(100%);
  }
}

/* Effet de brillance sur les sections au survol */
.section:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmer3D 1.5s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

/* Optimisation des performances */
.section,
.services .item,
.meeting-item,
.manager-message,
.testimonial-card,
.count-area-content,
.partner-card,
.contact-panel {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}