/* 

TemplateMo 586 Scholar

https://templatemo.com/tm-586-scholar

*/

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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* Fonts (Inter, JetBrains Mono) are linked in index.html, see identity.css */
/* 
---------------------------------------------
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: 'Inter', system-ui, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #0f172b;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #45556c;
}

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

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Inter', system-ui, sans-serif;
}

::selection {
  background: #9237d2;
  color: #fff;
}

::-moz-selection {
  background: #9237d2;
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: #9237d2;
  font-style: normal;
}

.section-heading h6 {
  color: #9237d2;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.main-button a {
  display: inline-block;
  background-color: #fff;
  color: #9237d2;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #9237d2;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #9237d2;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #9237d2;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #9237d2 !important;
  border-radius: 0px 0px 25px 25px;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: background-color .5s ease 0s;
  -moz-transition: background-color .5s ease 0s;
  -o-transition: background-color .5s ease 0s;
  transition: background-color .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex
}

.header-area .main-nav .logo {
  -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;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo {
  margin-top: 18px;
}

.header-area .main-nav #search {
  position: relative;
}

.header-area .main-nav #search input {
  background-color: rgba(255, 255, 255, 0.10);
  height: 44px;
  width: 250px;
  border-radius: 23px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  padding: 0px 20px 0px;
}

.header-area .main-nav #search input::placeholder {
  color: rgba(250, 250, 250, 0.75);
}

.header-area .main-nav #search i {
  position: absolute;
  color: #fff;
  right: 20px;
  top: 15px;
  font-size: 16px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-right: 0px;
  justify-content: right;
  -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:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #9237d2;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

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

.background-header .main-nav .nav li {
  height: 40px;
  line-height: 40px;
}

.background-header .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
}
.header-area .main-nav .nav li a.active {
  color: #000;
  background-color: rgba(0, 0, 0, 0.10);
  opacity: 1;
}

.background-header .main-nav .nav li:hover a {
  opacity: 0.8;
}
.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.10);
  opacity: 1;
}

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

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

.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: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.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: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.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: #fff;
}

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

.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: #fff;
}

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

/* .background-header .header-area.header-sticky .nav li a.active {
  color: #fff;
} */

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #f7f2fe;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #0f172b;
    background-color: #f7f2fe;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #e2e8f0;
    background-color: #f7f2fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #9237d2!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: rgba(0,0,0, 0.5);
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    margin-top: 20px;
  }
  .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 #e2e8f0;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-color: #fff;
  padding: 60px 0px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Diagonal purple left half — soft feathered edge via angled gradient */
.main-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    #8129bd 0%,
    #8129bd calc(45% - 2px),
    rgba(255, 255, 255, 0) calc(45% + 2px),
    rgba(0, 0, 0, 0.0) 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 0;
}

/* Animated pink circles — upper-left of the purple section */
.banner-circles {
  position: absolute;
  top: 32%;
  left: 14%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.banner-circles span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 7px solid rgba(165, 12, 165, 0.85);
  animation: banner-circle-pulse 3.5s ease-in-out infinite;
}

.banner-circles span:nth-child(1) { width: 120px; height: 120px; animation-delay: 0s; }
.banner-circles span:nth-child(2) { width: 260px; height: 260px; animation-delay: 0.8s; }
.banner-circles span:nth-child(3) { width: 420px; height: 420px; animation-delay: 1.6s; }

@keyframes banner-circle-pulse {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1;    transform: translate(-50%, -50%) scale(0.8); }
  70%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.15); }
}

.main-banner .container-fluid {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  z-index: 1;
}

.main-banner .row {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.main-banner .order-1 {
  padding: 40px 20px;
}

.main-banner .order-2 {
  padding: 40px 20px;
}

.banner-image {
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.banner-caption {
  padding: 40px 0;
  color: white;
  position: relative;
  z-index: 1;
}

.banner-subtitle {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.banner-title {
  font-size: 3rem;
  color: white;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.banner-description {
  font-size: 1.25rem;
  color: white;
  margin-bottom: 30px;
  line-height: 1.5;
}

.main-banner .item-1 {
  background-image: url(../images/banner-item-01.jpg);
}

.main-banner .item-2 {
  background-image: url(../images/banner-item-02.jpg);
}

.main-banner .item-3 {
  background-image: url(../images/banner-item-03.jpg);
}

.main-banner .item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 25px;
  padding: 100px 100px;
  margin-left: 130px;
}

.main-banner .item span.category {
  background-color: #9237d2;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .item h2 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
}

.main-banner .item p {
  color: #fff;
  width: 65%;
}

.main-banner .item .buttons {
  display: flex;
  margin-top: 50px;
}

.main-banner .item .buttons .main-button {
  margin-right: 30px;
}

.main-banner .item .buttons .main-button a {
  font-size: 14px;
  color: #9237d2;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  font-weight: 500;
}

.main-banner .item .buttons .icon-button i {
  color: #9237d2;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 16px;
}

.main-banner .item .buttons .icon-button a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.main-banner .owl-nav {
  position: absolute;
  max-width: 1320px;
  bottom: 23px;
  left: 0;
  text-align: right;
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services .service-item:hover .icon img {
  margin-top: -10px;
}

.services .service-item {
  position: relative;
  margin-top: 95px;
}

.services .service-item .icon {
  width: 190px;
  height: 190px;
  display: inline-block;
  text-align: center;
  line-height: 190px;
  background-color: #9237d2;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: -95px;
}

.services .service-item .icon img {
  max-width: 86px;
  transition: all .2s;
}

.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: #f7f2fe;
  margin-bottom: 30px;
  margin-right: 80px;
  transition: all .4s;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
}

.services .service-item p {
  color: #45556c;
  margin-bottom: 25px;
}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

.about-us {
  position: relative;
  padding: 0px;
  margin-top: 130px;
}

.about-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 84%;
  height: 100%;
  background-color: #f7f2fe;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.accordion {
  margin-top: -40px;
  margin-bottom: -40px;
  background-color: #9237d2;
  border-radius: 40px;
  padding: 80px 50px 50px 50px;
}

.accordion-item {
  background-color: #fff;
  border-radius: 40px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion-item .accordion-button {
  outline: none;
  box-shadow: none;
  border-radius: 40px !important;
}

.accordion-button:not(.collapsed) {
  color: #9237d2;
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.accordion-button::after {
  font-size: 18px;
  font-weight: 500;
  background-image: none;
  content: '+';
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #9237d2;
  color: #fff;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  line-height: 32px;
  content: '-';
}

.accordion-body {
  padding: 0px 25px 30px 25px;
  font-size: 14px;
  line-height: 28px;
  color: #45556c;
}

.about-us .section-heading {
  margin-left: 60px;
  margin-bottom: 0px;
}

.about-us .section-heading .main-button {
  margin-top: 50px;
}


/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/

.courses {
  margin-top: 160px;
}

.event_filter {
  text-align: center;
}

.event_filter {
  background-color: #f7f2fe;
  border-radius: 50px;
  padding: 15px 40px;
  list-style: none;
  margin: 0 auto 70px;
  max-width: max-content;
}

.event_filter li {
  display: inline-block;
  margin: 0px 20px;
}

.event_filter li a {
  font-size: 14px;
  font-weight: 500;
  color: #0f172b;
  transition: all .3s;
}

.event_filter li

.event_filter li a.is_active,
.event_filter li a:hover {
  color: #9237d2;
}

.events_item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.events_item .thumb img {
  margin-bottom: -5px;
}

.events_item .thumb span.category {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #9237d2;
  background-color: rgba(250, 250, 250, 0.95);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
}

.events_item .thumb span.price {
  position: absolute;
  right: -30px;
  top: -50px;
  background-color: rgba(146, 55, 210, 0.95);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: inline-block;
  transition: all .3s;
}

.events_item .thumb span.price h6 {
  margin-top: 72px;
  margin-left: 22px;
  font-size: 28px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}

.events_item .thumb span.price em {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  vertical-align: top;
}

.events_item {
  background-color: #f7f2fe;
  border-radius: 25px;
  margin-bottom: 30px;
  position: relative;
  justify-content: center;
  align-items: center;
} 

.events_item .down-content {
  padding: 20px 30px 25px 30px;
}

.events_item .down-content span.author {
  color: #9237d2;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 6px;
}

.events_item .down-content h4 {
  font-size: 22px;
  font-weight: 600;
  transition: all .3s;
}

.events_item:hover .down-content h4 {
  color: #9237d2;
}

.events_item:hover .thumb span.price {
  transform: scale(1.2);
}


/* 
---------------------------------------------
Facts Style
--------------------------------------------- 
*/

.fun-facts {
  position: relative;
  padding: 120px 0px 80px 0px;
  overflow: hidden;
}

.fun-facts:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 95%;
  height: 100%;
  background-color: #9237d2;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}

.fun-facts:after {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 15%;
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.fun-facts .counter {
  text-align: center;
  margin-bottom: 40px;
}

.fun-facts h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
}

.fun-facts h2::after {
  content: '+';
  margin-left: 5px;
}

.fun-facts p {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
}


/* 
---------------------------------------------
Team Style
--------------------------------------------- 
*/

.team {
  margin-top: 100px;
    padding-top: 140px;
}

.team-member {
  position: relative;
}

.team-member:hover img {
  top: -120px;
}

.team-member img {
  max-width: 220px;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-110px);
  transition: all .3s;
}

.team-member .main-content {
  border-radius: 25px;
  padding: 140px 30px 40px 30px;
  background-color: #f7f2fe;
  text-align: center;
}

.team-member .main-content span.category {
  color: #9237d2;
  font-size: 15px;
}

.team-member .main-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 15px;
}

.team-member .main-content ul li {
  display: inline-block;
  margin: 0px 2px;
}

.team-member .main-content ul li a {
  background-color: #fff;
  color: #9237d2;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all .3s;
}

.team-member .main-content ul li a:hover {
  background-color: #9237d2;
  color: #fff;
}


/* 
---------------------------------------------
Testimonials Style
--------------------------------------------- 
*/

.testimonials {
  position: relative;
  padding: 80px 0px;
  margin-top: 150px;
}

.testimonials:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #f7f2fe;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.testimonials .section-heading {
  margin-bottom: 0px;
  margin-left: 60px;
  vertical-align: middle;
}

.testimonials .section-heading p {
  margin-top: 50px;
}

.testimonials .item {
  background-color: #9237d2;
  border-radius: 25px;
  padding: 80px;
}

.testimonials .item p {
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 40px;
}

.testimonials .item img {
  border-radius: 50%;
  max-width: 100px;
  float: left;
  margin-right: 25px;
}

.testimonials .item span {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}

.testimonials .item h4 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
}

.testimonials .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-5px);
  right: -25px;
  text-align: right;
}

.testimonials .owl-nav .owl-prev i,
.testimonials .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #9237d2;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.10);
  opacity: 1;
  transition: all .3s;
}

.testimonials .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.testimonials .owl-nav .owl-prev i:hover,
.testimonials .owl-nav .owl-next i:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}


/* 
---------------------------------------------
Events Style
--------------------------------------------- 
*/

.events .section-heading {
  margin-bottom: 100px;
}

.events .item {
  background-color: #f7f2fe;
  border-radius: 25px;
  position: relative;
  padding: 40px;
  margin-bottom: 96px;
}

.events .item .image {
  position: relative;
}

.events .item .image img {
  position: absolute;
  border-radius: 25px;
  max-width: 260px;
  left: 0;
  top: -70px;
}

.events .item ul li {
  display: inline-block;
  width: 17.5%;
  vertical-align: middle;
}

.events .item ul li:first-child {
  width: 35%;
}

.events .item ul li:nth-of-type(2) {
  width: 28%;
}

.events .item ul li span.category {
  font-size: 14px;
  text-transform: uppercase;
  color: #9237d2;
  background-color: #fff;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 20px;
}

.events .item ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.events .item ul li span {
  display: inline-block;
  font-size: 14px;
  color: #45556c;
  margin-bottom: 10px;
}

.events .item ul li h6 {
  font-size: 16px;
  color: #9237d2;
  font-weight: 600;
}

.events .item a {
  position: absolute;
  right: 0;
  top: 22px;
  background-color: #9237d2;
  width: 60px;
  height: 120px;
  display: inline-block;
  text-align: center;
  line-height: 120px;
  font-size: 18px;
  z-index: 1;
  color: #fff;
  border-radius: 60px 0px 0px 60px;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us {
  margin-top: 80px;
  position: relative;
  padding: 50px 0px;
}

.contact-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #f7f2fe;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}


.contact-us  .section-heading {
  margin-right: 110px;
  margin-bottom: 0px;
}

.contact-us  .section-heading p {
  margin-top: 50px;
}

.contact-us .special-offer {
  margin-top: 50px;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 120px;
  display: inline-block;
  position: relative;
}

.contact-us .special-offer span.offer {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #9237d2;
  width: 80px;
  padding: 30px 8px;
  line-height: 25px;
  height: 120px;
  border-radius: 15px 60px 60px 15px; 
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
}

.contact-us .special-offer span.offer em {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.contact-us .special-offer h6 {
  font-size: 15px;
  color: #45556c;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

.contact-us .special-offer h6 em {
  font-style: normal;
  color: #9237d2;
  font-weight: 600;
}

.contact-us .special-offer h4 {
  font-size: 22px;
  font-weight: 600;
}

.contact-us .special-offer h4 em {
  font-style: normal;
  color: #9237d2;
}

.contact-us .special-offer a {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background-color: #9237d2;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 80px;
  background-color: #9237d2;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content::after {
  background: url(../images/contact-dec-02.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: '';
  z-index: 2;
}

#contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form input::placeholder {
  color: #fff;
}

#contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 20px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form textarea::placeholder {
  color: #fff;
}

#contact-form button {
  border: none;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #9237d2;
  transition: all .4s;
  position: relative;
  z-index: 3;
}

#contact-form button:hover {
  opacity: 0.8;
}

.contact-us-content .form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-us-content .form-captcha {
  margin: 0 0 18px;
  min-height: 65px;
}

.contact-us-content .form-status {
  margin: 18px 0 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.contact-us-content .form-status.is-error {
  background: rgba(255,255,255,0.95);
  color: #ec003f;
}

.contact-us-content button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.contact-us-content .more-info {
  text-align: center;
  background: rgb(85,0,227);
  background: linear-gradient(90deg, rgba(85,0,227,1) 0%, rgba(198,61,255,1) 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  margin-top: 150px;
  position: relative;
  background-color: #9237d2;
  vertical-align: middle;
  min-height: 150px;
  border-radius: 150px 150px 0px 0px;
}

footer .social-icons {
  list-style: none; 
  padding: 20px 0; 
  display: flex; 
  justify-content: center;
}

footer .social-icons li {
  margin: 0 25px;
}

footer .social-icons li a {
  color: white; 
  font-size: 2rem;
}

footer p {
  text-align: center;
  color: #fff;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

footer::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }
  .header-area .main-nav .logo h1 {
    border-right: none;
  }
  
  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
  }
  .main-banner .owl-nav {
    left: 30px !important;
  }
  .event_filter  {
    padding: 15px 20px;
  }
  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

/* tablet: nav sits on the purple banner, so links are white */
@media (max-width: 991px) and (min-width: 768px) {
  .header-area .main-nav .nav li a {
    color: #fff;
  }
  .header-area.header-sticky .nav li a.active {
    color: #fff;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    font-size: 34px;
  }
  .header-area .main-nav .logo {
    border-right: none;
  }
  
  .main-banner .row {
    flex-direction: column-reverse;
  }
  
  .main-banner .order-lg-1 {
    order: 2;
  }
  
  .main-banner .order-lg-2 {
    order: 1;
  }
  
  .main-banner .item {
    padding: 100px 60px 140px 60px;
    margin-left: 0px;
    text-align: center;
  }
  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }
  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
  }
  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }
  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }
  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }
  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }
  .services {
    margin-top: 80px;
  }
  .about-us {
    margin-top: 100px;
  }
  .accordion {
    padding: 40px 25px 10px 25px;
  }
  .services .service-item .icon {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }
  .about-us .section-heading {
    margin-left: 0px;
    margin-top: 120px;
  }
  .about-us::before,
  .testimonials::before,
  .contact-us::before {
    display: none;
  }
  .about-us .section-heading p,
  .testimonials .section-heading p,
  .contact-us .section-heading p {
    margin-top: 30px;
  }
  .about-us .section-heading .main-button {
    margin-top: 30px;
  }
  .about-us .main-button a {
    background-color: #9237d2;
    color: #fff;
  }
  .courses {
    margin-top: 100px;
  }
  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }
  .fun-facts {
    margin-top: 70px;
  }
  .fun-facts::before {
    width: 95%;
  }
  .team {
    margin-top: 160px;
  }
  .team-member {
    margin-bottom: 140px;
  }
  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }
  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 40px;
  }
  .testimonials .item {
    padding: 40px 40px 60px 40px;
  }
  .testimonials .item h4 {
    font-size: 17px;
  }
  .testimonials .item img {
    margin-right: 15px;
  }
  .testimonials .owl-nav {
    display: none;
  }
  .events {
    margin-top: 80px;
  }
  .events .item {
    margin-bottom: 66px;
  }
  .events .item .image img {
    position: relative;
    max-width: 100%;
  }
  .events .item ul {
    margin-top: -40px;
  }
  .events .item ul li:first-child {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
  }
  .events .item ul li:nth-child(2) {
    width: 40% !important;
  }
  .events .item ul li {
    display: inline-block;
    width: 28% !important;
  }
  .events .item ul li:last-child {
    text-align: right;
  }
  .events .item a {
    bottom: 150px;
    top: auto;
  }
  .events .item ul li h6 {
    font-size: 14px;
  }
  .contact-us {
    padding-top: 20px;
  }
  .contact-us .section-heading {
    margin-right: 0px;
  }
  .contact-us .special-offer {
    background-color: #f7f2fe;
    margin-bottom: 60px;
    padding: 34px 30px 34px 100px;
    width: 100%;
  }
  .contact-us .special-offer h4 {
    font-size: 17px;
  }
  .contact-us .special-offer a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 15px;
    right: 15px;
  }
  .contact-us .contact-us-content {
    padding: 30px;
  }
  footer {
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav #search input {
    width: 200px;
  }
  .header-area .main-nav .nav li.has-sub:after {
    right: 15px;
  }
  .fun-facts:before {
    width: 95%;
  }
}

/* Enhanced responsive styles for main-banner */
@media (max-width: 576px) {
  .main-banner {
    padding: 30px 0px;
    min-height: auto;
  }
  
  .main-banner .order-1,
  .main-banner .order-2 {
    padding: 15px 10px;
  }
  
  .banner-caption {
    padding: 20px 15px;
    text-align: center;
  }
  
  .banner-subtitle {
    font-size: 0.9rem;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }
  
  .banner-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
    line-height: 1.4;
  }
  
  .banner-description {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }
  
  .main-banner .main-button a {
    font-size: 0.85rem;
  }
  
  .banner-image {
    margin-bottom: 15px;
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  .main-banner {
    padding: 40px 0px;
    min-height: auto;
  }
  
  .main-banner .order-1,
  .main-banner .order-2 {
    padding: 20px 15px;
  }
  
  .banner-caption {
    padding: 25px 20px;
    text-align: center;
  }
  
  .banner-subtitle {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  
  .banner-title {
    font-size: 1.85rem;
    margin-bottom: 15px;
    line-height: 1.35;
  }
  
  .banner-description {
    font-size: 1rem;
    margin-bottom: 22px;
  }
  
  .main-banner .main-button a {
    font-size: 0.9rem;
  }
  
  .banner-image {
    margin-bottom: 18px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .main-banner {
    padding: 50px 0px;
    min-height: 90vh;
  }
  
  .main-banner .order-1,
  .main-banner .order-2 {
    padding: 30px 25px;
  }
  
  .banner-caption {
    padding: 35px 30px;
    text-align: center;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
    margin-bottom: 14px;
  }
  
  .banner-title {
    font-size: 2rem;
    margin-bottom: 18px;
    line-height: 1.3;
  }
  
  .banner-description {
    font-size: 1.1rem;
    margin-bottom: 25px;
  }
  
  .main-banner .main-button a {
    font-size: 0.95rem;
  }
}
/* Language switcher – CSS hover dropdown */
.main-nav .nav .lang-switcher {
  display: flex;
  align-items: center;
  position: relative;
  height: 40px;
}
.main-nav .nav .lang-switcher .lang-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  cursor: pointer;
}
.main-nav .nav .lang-switcher #current-lang-flag {
  font-size: 18px;
  line-height: 1;
  color: #9237d2;
  display: block;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.main-nav .nav .lang-switcher:hover #current-lang-flag {
  /* opacity: 0.8; */
}
/* In sticky/dark-bg header the globe stays white; in transparent header match nav text */
.background-header .main-nav .nav .lang-switcher #current-lang-flag {
  color: rgba(255,255,255,0.85);
}
.main-nav .nav .lang-switcher .lang-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 135px;
  /* Use padding-top (not margin-top) so there is no gap between toggle and menu.
     A gap would cause the :hover to be lost before the user reaches the menu items. */
  padding: 6px 0 4px;
  list-style: none;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 9999;
}
/* Hover opening only on devices with a real pointer; touch uses the .open class (custom.js) */
@media (hover: hover) {
  .main-nav .nav .lang-switcher:hover .lang-dropdown-menu {
    display: block;
  }
}
.main-nav .nav .lang-switcher .lang-dropdown-menu .lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  color: #314158;
  text-decoration: none;
  white-space: nowrap;
}
.main-nav .nav .lang-switcher .lang-dropdown-menu .lang-option .fi {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.main-nav .nav .lang-switcher .lang-dropdown-menu .lang-option:hover {
  background-color: #f1f5f9;
  color: #8129bd;
}
.main-nav .nav .lang-switcher .lang-dropdown-menu .lang-option.active {
  font-weight: 600;
  color: #8129bd;
  background-color: #f7f2fe;
}
/* Sticky / scrolled header state */
.background-header .main-nav .nav .lang-switcher {
  height: 40px;
}
/* Mobile nav: lang-switcher inline with other items */
@media (max-width: 767px) {
  .main-nav .nav .lang-switcher {
    height: 50px;
    border-top: 1px solid #e2e8f0;
    background-color: #f7f2fe;
    border-radius: 0px 0px 25px 25px;
    justify-content: flex-start;
    padding-left: 20px;
  }
  .main-nav .nav .lang-switcher .lang-dropdown-menu {
    top: auto;
    bottom: 100%;
    right: auto;
    left: 0;
  }
}

/* ---------------------------------------------
   Responsive fixes
--------------------------------------------- */

/* Language toggle is a <button> (keyboard + touch accessible) */
.main-nav .nav .lang-switcher .lang-dropdown-toggle {
  background: transparent;
  border: 0;
  font: inherit;
}
.main-nav .nav .lang-switcher.open .lang-dropdown-menu {
  display: block;
}

/* Tablet nav: white links and globe on the purple banner */
@media (min-width: 768px) and (max-width: 991px) {
  .main-nav .nav .lang-switcher #current-lang-flag {
    color: #fff;
  }
  .header-area .main-nav .nav li a.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
  }
}

/* Banner on tablet and phone: text first, readable on a solid purple background */
@media (max-width: 991px) {
  .main-banner {
    padding-top: 110px;
    min-height: auto;
  }
  .main-banner::before {
    background: linear-gradient(180deg, #8129bd 0%, #8129bd 55%, #6e2aa6 100%);
  }
  .main-banner .row {
    flex-direction: column;
  }
  .main-banner .order-lg-1 {
    order: 1;
  }
  .main-banner .order-lg-2 {
    order: 2;
  }
  .banner-caption {
    text-align: center;
    padding-bottom: 0;
  }
  .banner-image {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  .banner-circles {
    display: none;
  }
}

@media (max-width: 767px) {
  .main-banner {
    padding-top: 90px;
  }
  /* Only the last item of the open mobile menu gets rounded corners */
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li,
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    border-radius: 0;
  }
  .header-area .main-nav .nav li:last-child {
    border-radius: 0 0 25px 25px;
  }
  .header-area {
    background-color: #9237d2;
    border-radius: 0 0 25px 25px;
  }
  .header-area .main-nav .logo img {
    height: 34px;
  }
  .team {
    margin-top: 100px;
  }
  .team-member {
    margin-bottom: 110px;
  }
  .fun-facts {
    padding: 80px 0 40px 0;
  }
  .fun-facts:before {
    width: 100%;
    border-radius: 0 60px 60px 0;
  }
  .fun-facts .counter {
    margin-bottom: 30px;
  }
  .fun-facts h2 {
    font-size: 34px;
  }
  .fun-facts p {
    font-size: 13px;
  }
  .contact-us .contact-us-content {
    margin-top: 10px;
  }
  .main-nav .nav .lang-switcher .lang-dropdown-toggle {
    background-color: #9237d2;
  }
}

/* Discord button: keep the icon next to the text, allow wrapping on narrow columns */
.about-us .main-button a {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 40px;
  line-height: 1.3;
  padding: 10px 25px;
}

/* Czech and Polish headings: no English-style Title Case */
html:lang(cs) .section-heading h2,
html:lang(pl) .section-heading h2 {
  text-transform: none;
}

/* Small phones */
@media (max-width: 400px) {
  .header-area .main-nav .logo {
    left: 20px;
  }
  .contact-us .contact-us-content {
    padding: 20px;
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .banner-circles span {
    animation: none;
    opacity: 0.4;
  }
  .banner-circles,
  .banner-image {
    transition: none;
  }
}

/* ---------------------------------------------
   Design refresh – cleaner, calmer visuals
--------------------------------------------- */

/* Hero: soft lavender right side instead of the dark gradient */
@media (min-width: 992px) {
  .main-banner::before {
    background: linear-gradient(
      105deg,
      #8129bd 0%,
      #8129bd calc(45% - 1px),
      #f7f2fe calc(45% + 1px),
      #f1e7fc 100%
    );
  }
}
.banner-circles span {
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.1);
}
.banner-subtitle {
  font-size: 1rem;
  letter-spacing: 2.5px;
  opacity: 0.85;
}
.banner-description {
  opacity: 0.9;
}
.main-banner .main-button a {
  height: 48px;
  line-height: 48px;
  padding: 0 30px;
  border-radius: 24px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.main-banner .main-button a:hover {
  background-color: #fff;
  color: #9237d2;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

/* Desktop nav: brand-tinted active pill instead of grey */
@media (min-width: 992px) {
  .header-area .main-nav .nav li a.active {
    color: #9237d2;
    background-color: rgba(146, 55, 210, 0.08);
    font-weight: 500;
  }
  .background-header .main-nav .nav li a.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
  }
}

/* Feature cards: equal height, compact icon inside the card, gentle hover */
.services .row > [class*="col-"] {
  display: flex;
}
.services .service-item {
  display: flex;
  flex: 1;
  margin: 0 0 30px 0;
}
.services .service-item .icon {
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 22px;
  top: 34px;
  left: 34px;
  right: auto;
  box-shadow: 0 10px 22px rgba(146, 55, 210, 0.25);
  z-index: 1;
}
.services .service-item .icon img {
  max-width: 36px;
  vertical-align: middle;
}
.services .service-item:hover .icon img {
  margin-top: 0;
}
.services .service-item .main-content {
  flex: 1;
  margin: 0;
  padding: 130px 34px 34px 34px;
  border: 1px solid #e2e8f0;
  transition: transform .3s ease, box-shadow .3s ease;
}
.services .service-item:hover .main-content {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(146, 55, 210, 0.12);
}
.services .service-item:hover .icon {
  transform: translateY(-6px);
}
.services .service-item .icon {
  transition: transform .3s ease;
}
.services .service-item p {
  margin-bottom: 0;
}

/* Fun facts: tighter "+" and balanced vertical spacing */
.fun-facts {
  padding: 90px 0 50px 0;
}
.fun-facts h2::after {
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.55);
}
.fun-facts p {
  opacity: 0.9;
}

/* Team cards: subtle border and hover like the feature cards */
.team-member .main-content {
  border: 1px solid #e2e8f0;
  transition: box-shadow .3s ease;
}
.team-member:hover .main-content {
  box-shadow: 0 18px 40px rgba(146, 55, 210, 0.12);
}
.team-member .main-content ul li a {
  transition: all .2s ease;
}

/* Footer: lighter shape */
footer {
  margin-top: 100px;
  border-radius: 60px 60px 0 0;
  padding-bottom: 10px;
}
footer .social-icons li a {
  font-size: 1.6rem;
  opacity: 0.9;
  transition: opacity .2s ease, transform .2s ease;
  display: inline-block;
}
footer .social-icons li a:hover {
  opacity: 1;
  transform: translateY(-2px);
}
footer p {
  font-size: 13px;
  opacity: 0.8;
}

/* FAQ: keep space between the question and the + icon */
.accordion-item .accordion-button {
  gap: 14px;
}
.accordion-button::after {
  flex-shrink: 0;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #a258dd;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .services .service-item .icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    top: 28px;
    left: 28px;
  }
  .services .service-item .main-content {
    padding: 112px 28px 28px 28px;
  }
}
@media (max-width: 767px) {
  .services {
    margin-top: 40px;
  }
  .about-us {
    margin-top: 40px;
  }
  .fun-facts {
    margin-top: 40px;
  }
  footer {
    border-radius: 40px 40px 0 0;
  }
  footer::before {
    display: none;
  }
  footer {
    margin-top: 60px;
  }
}

/* ---------------------------------------------
   Header: always fixed, switches as one piece
--------------------------------------------- */

/* The header used to scroll away with the page and pop back in as a fixed bar
   once the whole banner was gone, with its background fading in on a
   different timing than the links. Now it stays fixed all the time. At the
   very top it is transparent; after a few pixels of scrolling custom.js fades
   the whole header out, swaps it to the purple bar and fades it back in, so
   there is never a half-transparent mix of the two looks. */
html {
  scroll-padding-top: 80px;
}
.header-area,
.header-area.background-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  height: 80px !important;
  border-radius: 0;
  opacity: 1;
  -webkit-transition: opacity .2s ease-out, transform .25s ease-out;
  -moz-transition: opacity .2s ease-out, transform .25s ease-out;
  -o-transition: opacity .2s ease-out, transform .25s ease-out;
  transition: opacity .2s ease-out, transform .25s ease-out;
}
.header-area.is-fading {
  opacity: 0;
  -webkit-transition: opacity .12s ease-in;
  -moz-transition: opacity .12s ease-in;
  -o-transition: opacity .12s ease-in;
  transition: opacity .12s ease-in;
}
/* While the look is swapped nothing inside may animate on its own */
.header-area.is-swapping,
.header-area.is-swapping * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.header-area {
  box-shadow: none !important;
}
.header-area.background-header {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) !important;
}
.header-area .main-nav .logo,
.background-header .main-nav .logo {
  margin-top: 18px;
}
.header-area .main-nav .nav,
.background-header .main-nav .nav {
  margin-top: 20px;
}
.header-area .main-nav .logo,
.header-area .main-nav ul.nav {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.header-area .main-nav .nav li a {
  -webkit-transition: opacity .2s ease, background-color .2s ease;
  -moz-transition: opacity .2s ease, background-color .2s ease;
  -o-transition: opacity .2s ease, background-color .2s ease;
  transition: opacity .2s ease, background-color .2s ease;
}
.main-nav .nav .lang-switcher #current-lang-flag {
  transition: opacity .2s ease;
}
/* Both looks share the same height and position, so the bar never jumps */
@media (min-width: 768px) {
  .header-area {
    background-color: transparent;
  }
}
.header-area,
.header-area.background-header {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .header-area,
  .header-area.background-header,
  .header-area.is-fading {
    transition: none;
  }
}

/* ---------------------------------------------
   Hero on narrower (4:3, 5:4) screens
--------------------------------------------- */

/* The purple half used to be a 105° gradient, so its edge moved left as the
   screen got taller and the white text ran onto the light background.
   The purple shape is now drawn with fixed percentages and the text column
   is kept narrower than the purple area at the text's lowest point. */
@media (min-width: 992px) {
  .main-banner::before {
    background: linear-gradient(105deg, #f7f2fe 0%, #f1e7fc 100%);
  }
  .main-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #8129bd;
    -webkit-clip-path: polygon(0 0, 54% 0, 40% 100%, 0 100%);
    clip-path: polygon(0 0, 54% 0, 40% 100%, 0 100%);
    z-index: 0;
    pointer-events: none;
  }
  /* Width of the purple area ~ 44 vw at the bottom of the text, minus the
     container's left margin and some breathing room */
  .banner-caption {
    --container: 960px;
    max-width: calc(var(--container) / 2 - 6vw - 44px);
  }
  .banner-title {
    font-size: 2.1rem;
  }
}
@media (min-width: 1200px) {
  .banner-caption {
    --container: 1140px;
  }
  .banner-title {
    font-size: 2.5rem;
  }
}
@media (min-width: 1400px) {
  .banner-caption {
    --container: 1320px;
  }
  .banner-title {
    font-size: 2.75rem;
  }
}

/* ---------------------------------------------
   Language choice in the mobile menu
--------------------------------------------- */

/* The globe button was purple on a purple square, so it looked empty, and a
   dropdown inside the dropdown menu was awkward to use. In the phone menu the
   last row now shows all languages side by side (they wrap on very narrow
   phones). */
@media (max-width: 767px) {
  .header-area .main-nav .nav li.lang-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto;
    min-height: 58px;
    line-height: normal;
    padding: 10px 8px !important;
    background-color: #f7f2fe;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 25px 25px;
  }
  .main-nav .nav .lang-switcher .lang-dropdown-toggle {
    display: none;
  }
  .main-nav .nav .lang-switcher .lang-dropdown-menu,
  .main-nav .nav .lang-switcher.open .lang-dropdown-menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    position: static;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .header-area .main-nav .nav .lang-dropdown-menu li,
  .header-area .main-nav .nav .lang-dropdown-menu li:first-child,
  .header-area .main-nav .nav .lang-dropdown-menu li:last-child {
    width: auto;
    height: auto;
    line-height: normal;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .header-area .main-nav .nav .lang-dropdown-menu li a.lang-option {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    font-size: 14px;
    color: #314158;
    background-color: #fff;
    border: 1px solid #e2e8f0;
  }
  .header-area .main-nav .nav .lang-dropdown-menu li a.lang-option.active {
    color: #fff !important;
    background-color: #9237d2;
    border-color: #9237d2;
    font-weight: 500;
  }
}

/* Flags served from this site, so they show even when the flag-icons CDN
   is slow or blocked */
.lang-option .fi {
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lang-option .fi.fi-cz {
  background-image: url(../images/flags/cz.svg);
}
.lang-option .fi.fi-gb {
  background-image: url(../images/flags/gb.svg);
}
.lang-option .fi.fi-pl {
  background-image: url(../images/flags/pl.svg);
}

/* ---------------------------------------------
   Desktop menu with six links
--------------------------------------------- */

/* With Stavebnice and AI Lab in the menu the links reach further left, so
   they are packed tighter to stay clear of the purple hero shape. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-area .main-nav .nav li {
    padding-left: 0;
    padding-right: 0;
  }
  .header-area .main-nav .nav li a {
    padding-left: 6px;
    padding-right: 6px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 1400px) {
  .header-area .main-nav .nav li a {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------------------------------------------
   Kit (3D animation + modules) and AI Lab sections
--------------------------------------------- */

.kit {
  margin-top: 120px;
}
.kit .section-heading {
  margin-bottom: 30px;
}
.kit3d {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  /* closest-side: the glow fades out fully before it reaches any edge */
  background: radial-gradient(closest-side circle at 50% 52%, #f1e7fc 0%, #f1e7fc 40%, rgba(241, 231, 252, 0) 100%);
}
.kit3d-fallback {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  max-width: 70%;
  max-height: 90%;
  transition: opacity .5s ease;
}
.kit3d.kit3d-ready .kit3d-fallback {
  opacity: 0;
}
.kit3d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  animation: kit3d-in .6s ease-out both;
  cursor: grab;
  /* Horizontal drag turns the kit, vertical swipe still scrolls the page */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.kit3d-canvas.is-dragging {
  cursor: grabbing;
}
@keyframes kit3d-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Under the animation: one dot per sample project (the active one is
   stretched) and a small card naming the project and its modules */
.kit3d-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  margin: 6px 0 0 0;
  pointer-events: none;
}
.kit3d-dots {
  display: flex;
  pointer-events: auto;
}
/* Each dot is a button with a larger hit area than the visible pill */
.kit3d-dots button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 24px;
  padding: 0 6px;
  margin: 0 -3px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kit3d-dots button:focus-visible {
  outline: 2px solid #9237d2;
  outline-offset: 0;
  border-radius: 6px;
}
.kit3d-dots button:hover i {
  background: #c4a5ef;
}
.kit3d-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #e6d3fa;
  transition: width .4s ease, background-color .4s ease;
}
.kit3d-dots .is-active i,
.kit3d-dots .is-active:hover i {
  width: 22px;
  background: #9237d2;
}
.kit3d-text {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 10px;
  max-width: 100%;
  padding: 8px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(146, 55, 210, 0.08);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.kit3d-text.is-on {
  opacity: 1;
  transform: none;
}
.kit3d-text b {
  color: #9237d2;
  font-weight: 600;
}
.kit3d-text span {
  color: #62748e;
  font-size: 13px;
}
.kit-facts {
  list-style: none;
  padding: 0;
  margin: 26px 0 0 0;
}
.kit-facts li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: #45556c;
  font-size: 15px;
  line-height: 24px;
}
.kit-facts li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background-color: #9237d2;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.module-grid {
  list-style: none;
  padding: 0;
  margin: 60px 0 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.module-card {
  background-color: #f7f2fe;
  border: 1px solid #e2e8f0;
  border-radius: 25px;
  padding: 18px 16px 22px 16px;
  text-align: center;
  transition: box-shadow .3s ease;
}
.module-card:hover {
  box-shadow: 0 18px 40px rgba(146, 55, 210, 0.12);
}
.module-card img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin: 0 auto 8px auto;
  transition: transform .3s ease;
}
.module-card:hover img {
  transform: translateY(-6px);
}
.module-code {
  display: block;
  color: #9237d2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}
.module-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 4px 0 6px 0;
}
.module-card p {
  font-size: 13px;
  line-height: 20px;
  color: #45556c;
  margin: 0;
}
.module-more {
  text-align: center;
  margin: 26px 0 0 0;
  color: #45556c;
  font-size: 14px;
}

.ai-lab {
  position: relative;
  padding: 90px 0 80px 0;
}
.ai-lab::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3%;
  right: 3%;
  z-index: -1;
  background-color: #f7f2fe;
  border-radius: 60px;
}
.ai-lab .section-heading {
  margin-bottom: 40px;
}
.ai-lab-shot {
  max-width: 1100px;
  margin: 0 auto;
}
.ai-lab-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  box-shadow: 0 30px 60px rgba(146, 55, 210, 0.16);
}
.ai-lab-steps {
  list-style: none;
  padding: 0;
  margin: 50px 0 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ai-lab-steps li {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 25px;
  padding: 28px 24px;
}
.ai-lab-steps .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background-color: #9237d2;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
  box-shadow: 0 10px 22px rgba(146, 55, 210, 0.25);
}
.ai-lab-steps h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.ai-lab-steps p {
  font-size: 14px;
  line-height: 24px;
  color: #45556c;
  margin: 0;
}
.ai-lab-cards {
  margin-top: 24px;
}
.ai-lab-cards > [class*="col-"] {
  display: flex;
}
.ai-lab-card {
  flex: 1;
  background-color: #9237d2;
  border-radius: 25px;
  padding: 34px;
  margin-bottom: 24px;
  color: #fff;
}
.ai-lab-card i {
  font-size: 26px;
  opacity: 0.85;
  margin-bottom: 14px;
}
.ai-lab-card h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.ai-lab-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 26px;
  margin: 0;
}
.ai-lab-cta {
  text-align: center;
  margin-top: 16px;
}
.ai-lab-cta a {
  background-color: #9237d2;
  color: #fff;
  height: 48px;
  line-height: 48px;
  padding: 0 30px;
  border-radius: 24px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(146, 55, 210, 0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-lab-cta a:hover {
  background-color: #9237d2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(146, 55, 210, 0.32);
}

@media (max-width: 1199px) {
  .module-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ai-lab-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991px) {
  .kit3d {
    max-width: 440px;
  }
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .kit {
    margin-top: 60px;
  }
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 40px;
  }
  .module-card {
    padding: 14px 12px 16px 12px;
    border-radius: 20px;
  }
  .ai-lab {
    padding: 60px 0;
  }
  .ai-lab::before {
    left: 0;
    right: 0;
    border-radius: 40px;
  }
  .ai-lab-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }
  .ai-lab-card {
    padding: 28px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .module-card img,
  .kit3d-canvas,
  .kit3d-dots i,
  .kit3d-text {
    transition: none;
    animation: none;
  }
}

/* Header bar is a plain rectangle (no rounded bottom corners) */
.header-area,
.header-area.background-header,
.header-area .main-nav ul.nav {
  border-radius: 0 !important;
}

/* ── AI Lab video (#ai-lab) ──────────────────────────────────────────────── */
.ai-lab-video-wrap {
  position: relative;
}
.ai-lab-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background-color: #020618;
  box-shadow: 0 30px 60px rgba(146, 55, 210, 0.16);
  cursor: pointer;
}
.ai-lab-video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: #9237d2;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity .25s ease, transform .2s ease;
}
.ai-lab-video-wrap:hover .ai-lab-video-toggle,
.ai-lab-video-toggle:focus-visible,
.ai-lab-video-toggle[aria-pressed="false"] {
  opacity: 1;
}
.ai-lab-video-toggle:hover {
  transform: scale(1.06);
}
.ai-lab-video-caption {
  text-align: center;
  max-width: 720px;
  margin: 18px auto 0 auto;
  color: #45556c;
  font-size: 14px;
  line-height: 22px;
}

/* ── Project gallery (#projects) ─────────────────────────────────────────── */
.projects {
  padding: 100px 0 40px 0;
}
.projects .section-heading {
  margin-bottom: 50px;
}
.project-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.project-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 25px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.project-card:hover {
  box-shadow: 0 18px 40px rgba(146, 55, 210, 0.12);
  transform: translateY(-4px);
}
.project-open {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background-color: #d9d8df;
  cursor: pointer;
  overflow: hidden;
}
.project-open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}
.project-card:hover .project-open img {
  transform: scale(1.04);
}
.project-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background-color: rgba(146, 55, 210, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding-left: 4px;
  box-shadow: 0 10px 24px rgba(146, 55, 210, 0.35);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .25s ease, transform .25s ease;
}
.project-card:hover .project-play,
.project-open:focus-visible .project-play {
  opacity: 1;
  transform: scale(1);
}
.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px 20px;
}
.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}
.project-level {
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.project-level.level-1 { background-color: #ecfdf5; color: #007a55; }
.project-level.level-2 { background-color: #fffbeb; color: #bb4d00; }
.project-level.level-3 { background-color: #f7f2fe; color: #9237d2; }
.project-cat {
  color: #62748e;
}
.project-body h4 {
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  margin: 0 0 8px 0;
}
.project-body p {
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  color: #45556c;
  margin: 0 0 14px 0;
}
.project-modules {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project-modules li {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  background-color: #f7f2fe;
  color: #9237d2;
}
.project-try {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: #9237d2;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.project-try i {
  font-size: 12px;
  transition: transform .2s ease;
}
.project-try:hover i {
  transform: translateX(3px);
}
.projects-more {
  text-align: center;
  max-width: 640px;
  margin: 40px auto 0 auto;
  color: #45556c;
  font-size: 15px;
  line-height: 26px;
}

/* Lightbox with the AI Lab embed page */
body.project-lightbox-open {
  overflow: hidden;
}
.project-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}
.project-lightbox[hidden] {
  display: none;
}
.project-lightbox.is-open {
  opacity: 1;
}
.project-lightbox-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(2, 6, 24, 0.8);
}
.project-lightbox-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  max-height: 100%;
  background-color: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}
.project-lightbox-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 22px;
  border-bottom: 1px solid #e2e8f0;
}
.project-lightbox-bar h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-lightbox-link {
  color: #9237d2;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.project-lightbox-link:hover {
  color: #9237d2;
  text-decoration: underline;
}
.project-lightbox-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background-color: #f7f2fe;
  color: #0f172b;
  font-size: 18px;
  cursor: pointer;
}
.project-lightbox-close:hover {
  background-color: #f1e7fc;
}
.project-lightbox-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: calc(100vh - 160px);
  background-color: #f8fafc;
}
/* Shown until the embed page paints over it */
.project-lightbox-frame::before {
  content: attr(data-loading);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #62748e;
  font-size: 15px;
}
.project-lightbox-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.project-lightbox-note {
  margin: 0;
  padding: 9px 22px;
  border-top: 1px solid #e2e8f0;
  color: #62748e;
  font-size: 13px;
  line-height: 20px;
}

@media (max-width: 1199px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 767px) {
  .projects {
    padding: 70px 0 20px 0;
  }
  .projects .section-heading {
    margin-bottom: 32px;
  }
  .project-card {
    border-radius: 20px;
  }
  .project-lightbox {
    padding: 0;
  }
  .project-lightbox-dialog {
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .project-lightbox-bar {
    padding: 10px 10px 10px 16px;
  }
  .project-lightbox-link span {
    display: none;
  }
  .project-lightbox-frame {
    flex: 1;
    aspect-ratio: auto;
    max-height: none;
  }
}
@media (max-width: 575px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
  .ai-lab-video,
  .project-open img {
    border-radius: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-open img,
  .project-play,
  .project-lightbox {
    transition: none;
  }
}

/* ---------------------------------------------
   Eduingo account menu (assets/js/account.js)
--------------------------------------------- */
.main-nav .nav .account-switcher {
  display: flex;
  align-items: center;
  position: relative;
  height: 40px;
}
.main-nav .nav .account-switcher[hidden],
.main-nav .nav .account-switcher [hidden] {
  display: none !important;
}
.header-area .main-nav .nav .account-switcher .account-signin,
.main-nav .nav .account-switcher .account-toggle,
.header-area .main-nav .nav .account-switcher .account-menu .account-option {
  text-transform: none;
}
.main-nav .nav .account-switcher .account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 6px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #9237d2;
  cursor: pointer;
}
.background-header .main-nav .nav .account-switcher .account-toggle {
  color: #fff;
}
.main-nav .nav .account-switcher .account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-nav .nav .account-switcher .account-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9237d2, #8129bd);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}
.main-nav .nav .account-switcher .account-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 210px;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 9999;
}
.main-nav .nav .account-switcher.open .account-menu {
  display: block;
}
@media (hover: hover) {
  .main-nav .nav .account-switcher:hover .account-toggle:not([hidden]) + .account-menu {
    display: block;
  }
}
.main-nav .nav .account-switcher .account-menu li {
  border: 0;
  background: transparent;
}
.header-area .main-nav .nav .account-switcher .account-menu .account-option {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  color: #314158;
  opacity: 1;
  white-space: nowrap;
  cursor: pointer;
}
.header-area .main-nav .nav .account-switcher .account-menu .account-option:hover {
  background-color: #f1f5f9;
  color: #8129bd;
}
@media (min-width: 768px) and (max-width: 991px) {
  .main-nav .nav .account-switcher .account-toggle {
    color: #fff;
  }
}
@media (max-width: 767px) {
  .header-area .main-nav .nav li.account-switcher {
    height: auto;
    line-height: normal;
    flex-direction: column;
    align-items: stretch;
    border-radius: 0;
    background-color: #f7f2fe;
  }
  .header-area .main-nav .nav .account-switcher .account-menu li {
    height: auto;
    border-top: 0;
    border-radius: 0;
    background: transparent;
  }
  .header-area .main-nav .nav .account-switcher .account-signin {
    border-radius: 0;
  }
  .main-nav .nav .account-switcher .account-toggle {
    justify-content: center;
    height: 50px;
    padding: 0 20px;
    color: #0f172b;
  }
  /* In the mobile menu the account links are listed right away, without a dropdown. */
  .main-nav .nav .account-switcher .account-toggle:not([hidden]) + .account-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 6px;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }
  .header-area .main-nav .nav .account-switcher .account-menu .account-option {
    padding: 10px 20px;
    text-align: center;
    color: #314158;
    background: transparent;
  }
}