/* 

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
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
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, body {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE and Edge */
}

/* 2. Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar, 
body::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
}

* 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;
  -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: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}
/*
---------------------------
Privacy Policy
--------------------------
*/

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            /* Pašalintas overflow-x, nes pataisėme priežastį */
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.7;
            background-color: #f8f9fa;
            color: #333;
            margin: 0;
            padding: 0; /* Pašalintas 20px padding */
        }

        /* ========================================
        "Sticky Footer" Sprendimas
        ========================================
        */
        .page-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Priverčia būti viso ekrano aukščio */
        }

        main.content-wrap {
            flex-grow: 1; /* Užpildo visą laisvą erdvę */
        }
        
        /* ========================================
        Privatumo Politikos Stiliai
        ========================================
        */
        .privacy-wrapper {
            /* 150px viršuje (kad "pabėgtų" po fiksuotu header), auto šonuose, 40px apačioje */
            margin: 150px auto 40px auto; 
            max-width: 900px;
            padding: 40px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }
        
        #privacy-name{
            margin-top: 50px;
            color: #2c3e50;
            text-align: center;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }

        .privacy-wrapper h2 { /* Patikslintas selektorius, kad veiktų tik čia */
            color: #7a6ad8;
            margin-top: 40px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }

        .privacy-wrapper p, 
        .privacy-wrapper ul {
            margin-bottom: 16px;
            color: #555;
        }

        .privacy-wrapper ul {
            padding-left: 25px;
        }

        .privacy-wrapper li {
            margin-bottom: 10px;
        }

        .privacy-wrapper a {
            color: #7a6ad8;
            text-decoration: none;
            font-weight: 500;
        }

        .privacy-wrapper a:hover {
            text-decoration: underline;
        }

        .policy-intro p {
            text-align: center;
            font-size: 1.1em;
            color: #444;
            margin-bottom: 20px;
        }

        #contact p {
            font-size: 1.1em;
            font-weight: 500;
        }
        
/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/


html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #7a6ad8;
  color: #fff;
}

::-moz-selection {
  background: #7a6ad8;
  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: #7a6ad8;
  font-style: normal;
}

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

.main-button a {
  display: inline-block;
  background-color: #fff;
  color: #7a6ad8;
  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: #7a6ad8;
  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: #7a6ad8;
  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: #7a6ad8;
  border-radius: 50%;
}

/* 
---------------------------------------------
Pop-up Style
--------------------------------------------- 
*/


/* Grid layout */
/* Fullscreen overlay */
/* =========================================
   POPUP STYLES
   ========================================= */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none; 
  justify-content: center;
  align-items: center; 
  z-index: 2147483648; 
}

.popup-content {
  position: relative;
  background-image: url(../images/bridge.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 40px;
  overflow: hidden;
  padding: 60px;
  
  /* DIMENSIONS: Kept large as requested */
  width: 92%; 
  height: 90vh; 
  max-width: 1500px; 
  
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  animation: fadeInScale 0.3s ease;
}

/* Overlay & Blob Effects */
.popup-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(160, 91, 255, 0.35) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(74, 141, 255, 0.35) 0%, transparent 60%),
    rgba(255,255,255,0.65);
  z-index: 0;
}

/* === LARGE TEXT OVERLAY (Blue/Purple Text) === */
.large-text-overlay {
  position: absolute;
  
  /* MOVED DOWN: From 42% back to 50% (Center) */
  top: 50%; 
  
  left: 5%;
  transform: translateY(-50%);
  
  font-size: clamp(2rem, 5vw, 5.35rem); 
  
  font-weight: 900;
  background: linear-gradient(90deg, #5794ff, #aa6efe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
  
  line-height: 1.1; 
  text-align: center;
  z-index: 2;
  width: 50%;
  pointer-events: none;
  
  -webkit-text-stroke: 2px rgba(126, 59, 138, 0.423);
  text-shadow: 0 4px 15px rgba(0,0,0,0.1);
  overflow-wrap: break-word;
}

/* === TEXT CONTENT (Black Text) === */
.popup-text-content {
  position: absolute;
  text-align: center;
  
  /* ALIGNED: Kept at 50% so it matches the big text */
  top: 50%; 
  
  right: 60px;
  transform: translateY(-50%);
  max-width: 500px;
  z-index: 3;
}

.popup-text-content h2 {
  font-size: 2rem; 
  margin-bottom: 20px;
  color: #1e1e1e;
  line-height: 1.3;
}

.popup-text-content p {
  font-size: 1.15rem; 
  color: #333;
  margin-bottom: 30px;
  max-width: 600px;
}

/* === CTA BUTTON === */
.popup-button {
  display: inline-block;
  padding: 15px 35px; 
  font-size: 1.1rem; 
  border-radius: 50px;
  background: linear-gradient(90deg, #4A8DFF, #A05BFF);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 8px 25px rgba(74,141,255,0.4);
}
.popup-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(74,141,255,0.5);
}

/* === CLOSE BUTTON === */
.popup-close {
  position: absolute;
  top: 25px;
  right: 30px;
  font-size: 32px;
  cursor: pointer;
  color: rgba(0,0,0,0.4);
  font-weight: normal;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 4;
}
.popup-close:hover {
  color: rgba(0,0,0,0.75);
  transform: rotate(90deg);
}

/*
--------------------------
WIDGET OPTION
--------------------------
*/

  
  /* Pakeičiame nuolaidos burbulo spalvą (jei jis naudojamas) */ 

  /* Sukuriame naują stilių "Siųsti" mygtukui su gradientu */
/* Jūsų formos mygtuko gradientas */
/* Standartinis mygtukas (formoje) */
  .gradient-button {
    background: rgb(48, 116, 194);
    background: linear-gradient(90deg, rgb(48, 116, 194) 0%, rgb(221, 68, 255) 100%);
    border: none !important;
    color: #fff !important;
    transition: all 0.3s ease;
  }
  .gradient-button:hover {
    background: linear-gradient(90deg, rgb(221, 68, 255) 0%, rgb(48, 116, 194) 100%);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(221, 68, 255, 0.4);
  }

  /* Teksto spalvos */
  .blue-text { color: rgb(48, 116, 194); }
  .purple-text { color: rgb(221, 68, 255) !important; }

  /* --- CALENDLY MYGTUKO STILIUS --- */
  
  /* 1. Apibrėžiame animaciją rėmeliui */
  @keyframes gradientBorderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* 2. Paties mygtuko išvaizda */
  .calendly-badge-content {
    /* Teksto stilius */
    color: rgb(128, 48, 194) !important; 
    font-weight: 700 !important;
    transition: color 0.4s ease, transform 0.2s ease !important;

    /* Fonas ir Rėmelis (Double-layer trick) */
    border: 2px solid transparent !important; /* Skaidrus rėmelis, kad matytųsi fonas */
    
    /* Čia sukuriame du sluoksnius: 
       1. Baltas fonas viduje (padding-box)
       2. Gradientas, kuris veikia kaip rėmelis (border-box) 
    */
    background-image: 
        linear-gradient(white, white), 
        linear-gradient(90deg, rgb(48, 116, 194), rgb(221, 68, 255), rgb(48, 116, 194)) !important;
    
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    
    /* Padidiname fono dydį, kad galėtume jį animuoti */
    background-size: 200% 100% !important; 
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  }

  /* 3. Veiksmas užvedus pelytę (HOVER) */
  .calendly-badge-content:hover {
    /* Paleidžiame rėmelio judėjimo animaciją */
    animation: gradientBorderMove 2s infinite linear !important;
    
    /* Tekstas tampa violetinis */
    color: rgb(148, 82, 228) !important;
    
    /* Šiek tiek pakeliame mygtuką */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(48, 116, 194, 0.25) !important;
  }

  @media only screen and (max-width: 768px) {
    .calendly-badge-widget {
        bottom: 15px !important;
        right: 15px !important;
        left: auto !important; /* Užtikrina, kad necentruotų per prievartą */
    }
    
    .calendly-badge-content {
        display: block !important;
        padding: 10px 20px !important; /* Mažesni tarpai */
        font-size: 14px !important;    /* Mažesnis šriftas */
        max-width: 250px !important;   /* Kad neišsiplėstų per visą ekraną */
        text-align: center;
        white-space: normal !important; /* Leidžia tekstui persikelti į kitą eilutę */
    }
  }

/* =========================================
   RESPONSIVE MEDIA QUERIES
   ========================================= */

/* === TABLET (<= 992px) === */
@media (max-width: 992px) {
  .popup-content {
    padding: 40px;
  }
  
  .large-text-overlay {
    margin-top: 70px; 
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-bottom: 25px;
    font-size: clamp(3rem, 8vw, 4.5rem);
  }
  
  .popup-text-content {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    max-width: 100%;
  }
  
  .popup-text-content h2 {
    font-size: 1.8rem; 
  }
  
  .popup-button {
    display: block;
    width: 70%; 
    max-width: 320px;
    margin: 0 auto;
    padding: 14px 24px; 
  }
}

/* === MOBILE (<= 600px) === */
@media (max-width: 600px) {
  .popup-overlay {
    padding: 15px; 
    align-items: center; 
  }

  .popup-content {
    padding: 50px 20px 30px; 
    
    /* FORCE HEIGHT ON MOBILE */
    height: 85vh; 
    width: 96%; 
    
    margin-top: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto; 
  }
  
  .large-text-overlay {
    font-size: clamp(1.6rem, 10vw, 3.2rem);
    margin-bottom: 15px;
    margin-top: -10px; 
    line-height: 1.2;
    padding: 0 5px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  
  .popup-text-content {
    padding: 0 5px;
    margin-top: 0;
  }
  
  .popup-text-content h2 {
    font-size: 1.4rem; 
    margin-bottom: 10px;
  }
  
  .popup-text-content p {
    font-size: 0.95rem; 
    margin-bottom: 20px;
  }
  
  .popup-button {
    width: 90%; 
    padding: 12px 0; 
    font-size: 1rem; 
    margin: 5px auto 0;
  }
  
  .popup-close {
    top: 15px;
    right: 15px;
    font-size: 30px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}

/* === SMALL MOBILE (<= 400px) === */
@media (max-width: 400px) {
  .popup-content {
    padding: 45px 15px 25px;
  }
  
  .large-text-overlay {
    font-size: clamp(1.5rem, 9.5vw, 2.8rem);
    margin-top: -15px;
  }
}
/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

/* when scrolled */
.header-area.background-header {
  position: fixed !important;
  top: 15px !important;
  left: 50px;
  right: 50px;
  height: 74px !important;

  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 37px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15) !important;

  isolation: isolate;
}

.header-area .main-nav { position: relative; z-index: 1; }

.background-header {
  isolation: isolate; /* creates a new top-level stacking context */
}

.header-area {
  position: fixed;
  background-color: transparent;
  top: 50px;
  right: 50px;
  left: 50px;

    /* top-most layer, isolated from page stacking contexts */
  z-index: 9999;            /* maxed */
  isolation: isolate;
  transform: translateZ(0);       /* own compositing layer */

  -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 .logo-img{
  width: auto;
  height: 50px;
}

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

.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: flex;
  align-items: center;   /* keeps logo + text aligned vertically */
  gap: 10px;             /* space between image and text */
  margin: 0; 
}



.header-area .main-nav .logo-name {
    -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;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    padding-right: 20px;
    background: linear-gradient(90deg, #4A8DFF, #A05BFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.background-header .main-nav .logo, .background-header .main-nav .logo-name{
  padding-top: 15px;
}



.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: 400;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: rgb(32, 32, 32);
  -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: 80px;
  line-height: 80px;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
  color: #1e1e1e;
}
/* Base link styles */
.header-area .main-nav .nav li a {
  position: relative; /* needed for pseudo-element underline */
  overflow: hidden;   /* keeps underline inside */
}

.header-area .main-nav .nav li a.active {
  color: #1e1e1e; /* darker text */
  background-color: transparent; /* optional: remove background highlight */
  opacity: 1;
}

/* The underline (hidden by default) */
.header-area .main-nav .nav li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px; /* adjust distance from text */
  transform: translateX(-50%) scaleX(0); /* hidden */
  transform-origin: center;
  width: 60%; /* underline length */
  height: 2px;
  background: linear-gradient(90deg, #639cff, #b27aff);
  transition: transform 0.3s ease;
  border-radius: 2px;
}

/* Show underline when active */
.header-area .main-nav .nav li a.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Optional: also show on hover */
.header-area .main-nav .nav li a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  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: #9f9f9f;
}

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

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

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

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

.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: 992px) {
  /* Prevent horizontal overflow */


  html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: calc(100%-20px);
    position: relative;
  }
  
  * {
    box-sizing: border-box;
  }
  
  /* HEADER - Use viewport units correctly */
.header-area {
    position: fixed;
    /* EXTERNAL SPACING: Your desired margin from the top of the screen */
    top: 25px; 
    
    /* HORIZONTAL STABILITY: Centering method that prevents scrollbar shift */
    left: 50%;
    transform: translateX(-50%); 
    
    /* SIZE: Forces the width to be 100vw minus 10px margin on each side (20px total) */
    width: calc(100vw - 20px); 
    max-width: calc(100vw - 20px); 
    
    /* INTERNAL SPACING: Your desired padding (20px top/bottom, 15px left/right) */
    padding: 20px 15px; 
    
    box-sizing: border-box; /* Ensures padding is included within the width/max-width */
    z-index: 9999;

    /* VISUALS: Keep the visual styles clean */
    background-color: transparent;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.background-header {
    /* Set the positioning properties */
position: fixed !important;
    top: 0 !important; 
    
    /* FIX: Match the stable positioning */
    left: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 8px 15px 8px 15px !important; /* Top and bottom padding are now equal (8px) */    
    max-width: none !important;
    transform: none !important;
    display: flex;
    align-items: center;

}
  
  /* Override ALL Bootstrap container stuff */
  .header-area .container,
  .header-area .row,
  .header-area .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  /* Main nav - simple flexbox centering */
  .header-area .main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  /* Hide menu items and menu trigger */
  .header-area .main-nav .nav,
  .header-area .main-nav .menu-trigger,
  .header-area .main-nav .border-button {
    display: none !important;
  }
  
  /* Logo container */
  .header-area .main-nav .logo-headbar,
  .header-area .main-nav .logo {
    margin: 0;
    padding: 0;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
  }
  
  /* Logo image */
  .header-area .main-nav .logo img,
  .header-area .main-nav .logo-img {
    max-height: 40px;
    margin: 0; 
    padding: 0;
    width: auto;
    display: block;
  }
  
  /* Logo name */
  .header-area .main-nav .logo-name {
    margin: 0;
    padding: 0;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
  }
  
  .header-area .main-nav .logo-name h1 {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
  }
  
  /* Remove any pseudo-elements that might cause overflow */
  .header-area .container::before,
  .header-area .container::after {
    display: none !important;
  }
}
/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.top-part {
  background-color: white;
}

.top-part .inner-top-part {
    border-radius: 50px;
    margin: 5px;
    background: linear-gradient(135deg, rgba(74, 141, 255, 0.15) 0%, rgba(160, 91, 255, 0.15) 100%);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: white; /* base color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Gradient blobs */
.top-part .inner-top-part::before,
.top-part .inner-top-part::after,
.top-part::before,
.top-part::after {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  filter: blur(140px);
  z-index: -1;
  opacity: 0.35; /* softer look */
}

/* Bottom-left blobs */
.top-part .inner-top-part::before {
  background: rgb(221, 68, 255); /* soft purple */
  top: auto;      /* reset top */
  right: auto;    /* reset right */
  bottom: -150px; /* move down past the container */
  left: -100px;   /* move left past the container */
}

.top-part .inner-top-part::after {
  background: rgb(48, 150, 194); /* soft blue */
  top: auto;      /* reset top */
  right: auto;    /* reset right */
  bottom: 50px;   /* move down */
  left: -50px;    /* move left */
}

/* Right-of-center blobs */
.top-part::before {
  background: rgb(255, 170, 68); /* soft orange */
  top: auto;
  left: 50%; /* Start at the center */
  transform: translateX(50px); /* Move slightly to the right */
  bottom: 100px;
  right: auto;
}

.top-part::after {
  background: rgb(150, 48, 194); /* soft pink/purple */
  top: auto;
  left: 50%; /* Start at the center */
  transform: translateX(100px); /* Move slightly to the right, a bit further */
  bottom: -50px;
  right: auto;
}



/* Ensure your header + banner text stay above blobs */

.main-banner {
/*background-image: url(../images/banner-bg.jpg); */
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 170px 0px 120px 0px;
}


.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: #7a6ad8;
  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;
  font-size: 25px;
  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: #7a6ad8;
  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: #7a6ad8;
  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);
}



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

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

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

.accordion {
    margin-top: -40px;
    margin-bottom: -40px;
    background: linear-gradient(to right, rgba(226, 186, 252, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 40px;
    padding: 80px 50px 50px 50px;
    /* Add a box shadow to create a blurry border effect */
    box-shadow: 0 0 20px 5px rgba(226, 186, 252, 0.4);
}

.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:rgba(226, 186, 252, 0.9);
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: 'Poppins';
  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: rgba(226, 186, 252, 0.9);
  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: #4a4a4a;
}

.about-us .section-heading {
  margin-left: 60px;
  margin-bottom: 0px;
  color: rgba(226, 186, 252, 0.9);
}

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

.about-us .container::before,
.about-us .container::after {
  content: "";
  position: absolute;
  /* Smaller size */
  width: 450px; /* Reduced from 650px */
  height: 450px; /* Reduced from 650px */
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  /* Lighter (more transparent) */
  opacity: 0.2; /* Reduced from 0.35 for a softer, lighter look */
}

/* Specific styles for the blobs on the right */

/* Top-right blob (a soft purple) */
.about-us .container::before {
  background: rgb(221, 68, 255);
  top: -100px; /* Adjusted position due to smaller size */
  right: -70px; /* Adjusted position due to smaller size */
  left: auto;
  bottom: auto;
}

/* Bottom-right blob (a soft blue) */
.about-us .container::after {
  background: rgb(48, 150, 194);
  bottom: -30px; /* Adjusted position due to smaller size */
  right: -30px; /* Adjusted position due to smaller size */
  left: auto;
  top: auto;
}

/* 
--------------------------------------------
ROADMAP Style
--------------------------------------------
*/
/* Roadmap Section Container */
      .roadmap-section {
          padding: 80px 0 40px; /* Reduced bottom padding */
          background-color: #f8fafc;
          font-family: 'Poppins', sans-serif;
          position: relative;
          overflow: hidden;
          z-index: 0; 
      }

      .roadmap-heading-content {
          text-align: center;
          margin-bottom: 60px;
      }

      .roadmap-subheading {
          color: #4f46e5;
          font-weight: 700;
          text-transform: uppercase;
          font-size: 14px;
          letter-spacing: 1px;
          margin-bottom: 10px;
          display: block;
      }

      .roadmap-heading {
          font-size: 36px;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 20px;
      }

      .roadmap-desc {
          font-size: 18px;
          color: #64748b;
          max-width: 700px;
          margin: 0 auto;
          line-height: 1.6;
      }

      /* Grid Layout */
      .roadmap-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 0; 
          position: relative;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 10px;
      }

      /* Step Item */
      .roadmap-step {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          text-align: left;
          padding-bottom: 3rem; 
      }

      /* Desktop Layout: 7 Columns in One Line */
      @media (min-width: 1024px) {
          .roadmap-grid {
              grid-template-columns: repeat(7, 1fr);
          }

          .roadmap-step {
              flex-direction: column;
              align-items: center;
              text-align: center;
              padding: 0 0.5rem; 
              min-height: 200px;
          }

          /* === HIGH / LOW WAVE LOGIC === */
          
          /* Steps 1, 3, 5, 7 stay High (default) */

          /* Steps 2, 4, 6 push Low */
          .roadmap-grid > div:nth-child(2),
          .roadmap-grid > div:nth-child(4),
          .roadmap-grid > div:nth-child(6) {
              padding-top: 100px;
          }
      }

      /* Icons */
      .step-icon {
          z-index: 3; 
          flex-shrink: 0;
          width: 80px;
          height: 80px;
          background-color: white;
          border: 4px solid #e0e7ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          position: relative;
      }

      .roadmap-step:hover .step-icon {
          border-color: #8640c8;
          /* Play indigo pulse once and hold final state */
          animation: pulse-ring-indigo 0.6s ease-out forwards;
      }

      .step-icon i {
          font-size: 1.75rem;
          color: #8640c8;
          transition: transform 0.3s;
      }

      .step-icon.orange-theme {
          border-color: #ffedd5;
      }

      /* Content */
      .step-content {
          margin-left: 1.5rem;
          flex: 1;
          position: relative;
          z-index: 2; /* Keeps text above lines */
      }
      @media (min-width: 1024px) {
          .step-content {
              margin-left: 0;
              margin-top: 1.5rem;
          }
          .step-title { font-size: 16px; }
          .step-text { font-size: 12px; }
      }

      .step-badge {
          background-color: #e0e7ff;
          color: #9738ca;
          font-size: 12px;
          font-weight: 700;
          padding: 4px 8px;
          border-radius: 9999px;
          display: inline-block;
          margin-bottom: 8px;
      }


      .step-title {
          font-size: 20px;
          font-weight: 700;
          color: #1e293b;
          margin-bottom: 8px;
      }

      .step-text {
          font-size: 14px;
          color: #64748b;
          line-height: 1.6;
      }

      /* New animations: Pulse once and stay highlighted */
      /* Indigo Pulse */
      @keyframes pulse-ring-indigo {
          0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
          50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(99, 102, 241, 0.1); }
          100% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.3); }
      }

      /* Orange Pulse */
      @keyframes pulse-ring-orange {
          0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
          50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(249, 115, 22, 0.1); }
          100% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.3); }
      }

      /* === DOTTED WAVE CONNECTORS (Invisible Default) === */
      
      .connector-line, .snake-turn {
          position: absolute;
          z-index: 1;
          border: none;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          pointer-events: none;
          /* Base line is invisible/transparent */
          background-image: none;
      }

      /* Fill Animation Layer */
      .connector-line::after, .snake-turn::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%; 
          height: 100%;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          opacity: 0; 
          clip-path: inset(0 100% 0 0); /* Hidden from right */
          transition: clip-path 0.8s ease-in-out, opacity 0.1s;
          opacity: 1;
      }

      .roadmap-step:hover .connector-line::after,
      .roadmap-step:hover .snake-turn::after {
          clip-path: inset(0 0 0 0); /* Reveal */
      }

      /* --- WAVE PATTERNS --- */

      /* 1. ODD STEPS (1, 3, 5) -> CURVE DOWN to Next */
      .roadmap-grid > div:nth-child(odd) .connector-line {
          top: 40px; 
          left: 50%;
          width: 100%; 
          height: 100px; /* Drop distance */
      }
      /* Only the ::after (Color) is defined */
      .roadmap-grid > div:nth-child(odd) .connector-line::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%236366f1' stroke-width='4' stroke-dasharray='0 8' stroke-linecap='round' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 50 0, 50 100, 100 100' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
      }

      /* 2. EVEN STEPS (2, 4, 6) -> CURVE UP to Next */
      .roadmap-grid > div:nth-child(even) .connector-line {
          top: 40px; 
          left: 50%;
          width: 100%;
          height: 100px;
      }
      .roadmap-grid > div:nth-child(even) .connector-line::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%236366f1' stroke-width='4' stroke-dasharray='0 8' stroke-linecap='round' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 50 100, 50 0, 100 0' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
      }
      
      /* Special Handling for Step 4 Turn (Use standard even logic) */
      .snake-turn {
           top: 40px;
           left: 50%;
           width: 100%;
           height: 100px;
      }
      .snake-turn::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%236366f1' stroke-width='4' stroke-dasharray='0 8' stroke-linecap='round' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 50 100, 50 0, 100 0' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
      }

      /* LAST CHILD (7) - Hide connector */
      .roadmap-grid > div:last-child .connector-line {
          display: none;
      }

      /* Mobile Vertical Line (Still Visible for structure) */
      .connector-vertical {
          top: 4rem;
          left: 40px;
          width: 0;
          height: 100%;
          border-left: 3px dashed #cbd5e1;
          transform: translateX(-50%);
          display: block;
          background: none;
      }
      .roadmap-step:hover .connector-vertical {
          border-color: #ac63f1;
          transition: border-color 0.5s ease;
      }

      @media (min-width: 1024px) {
          .connector-vertical { display: none; }
          
          /* FIXED: Ensure connector lines are visible on desktop */
          .connect-right, .connect-left, .connector-line { display: block; }
          
          /* Reset Orders from previous layout */
          .roadmap-grid > div { order: initial; margin-top: 0; justify-self: stretch; }
          .roadmap-grid > div:nth-child(8) { display: none; }
      }
      
      @media (max-width: 1023px) {
        .connect-right, .connect-left, .snake-turn, .connector-line { display: none; }
        .connector-vertical { display: none; }
        .roadmap-grid > div:nth-child(8) { display: none; }
      }
/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/

.courses {
  margin-top: 75px;
}

.courses .section-heading {
  position: relative;
}

/* Common styles for the blobs */
.courses .section-heading::before,
.courses .section-heading::after {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(140px);
  z-index: 0;
  opacity: 0.2;
}

/* Specific styles for the individual blobs */

/* Left blob (a soft purple) */
.courses .section-heading::before {
  background: rgb(221, 68, 255);
  top: 50%;
  left: -200px;
  transform: translateY(-50%);
}

/* Right blob (a soft blue) */
.courses .section-heading::after {
  background: rgb(7, 36, 76);
  top: 50%;
  right: -200px;
  transform: translateY(-50%);
}



.courses .event_box {
  position: relative; /* container for blobs */
  z-index: 0;  
  margin-bottom: 100px;       /* create stacking context */
}

.courses .event_box::before,
.courses .event_box::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(160px);
  opacity: 0.25;
  z-index: -1;        /* <-- push blobs behind */
  transform: translate(-50%, -50%);
}

/* First blob – purple, top-left center */
.courses .event_box::before {
  background: rgb(221, 68, 255);
  top: 65%;
  left: 60%;
}

/* Second blob – blue, bottom-right center */
.courses .event_box::after {
  background: rgb(58, 123, 213);
  top: 40%;
  left: 35%;
}


.event_filter {
  text-align: center;
}

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

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

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

.event_filter li

.event_filter li a.is_active,
.event_filter li a:hover {
  color: #7a6ad8;
}

/*
----------------------------
Events styles
--------------------------------
*/

.events_item .thumb {
  position: relative;
  border-radius: 25px;
  width: 100%; /* Make width responsive */
  height: 0; /* Use padding-bottom technique for aspect ratio */
  padding-bottom: 84.34%; /* 350/415 = 0.8434 * 100% (maintains 415x350 ratio) */
  overflow: hidden !important;
  display: block;
  contain: layout paint style;
}

.events_item .thumb .event_photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alternative aspect ratios you can use:
  padding-bottom: 75%;     // 4:3 ratio
  padding-bottom: 56.25%;  // 16:9 ratio  
  padding-bottom: 100%;    // 1:1 square
*/

@media (max-width: 768px) {
  .events_item .thumb {
    border-radius: 15px;
    /* Remove fixed width/height - it will use the aspect ratio */
  }
  
  /* Optional: Different aspect ratio for mobile */
  .events_item .thumb {
    padding-bottom: 70%; /* Taller on mobile if needed */
  }
}

.events_item{
  z-index: 20;
}

.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: #7a6ad8;
  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: linear-gradient(
    45deg,
    rgba(197, 141, 243, 0.95),
    rgba(90, 172, 245, 0.95)
  );
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.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{
    z-index: 1000;
}

/* make sure full description is hidden via CSS (slideToggle will show it) */
.events_item .full-description {
  display: none;
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.6;
  overflow: visible;

}

/* ensure Bootstraps' row doesn't stretch columns vertically */
.row.event_box {
  align-items: flex-start; /* keep items top aligned so expanding one pushes rows below */
}

/* make each item a vertical flex container so its content expands naturally */
.event_outer {
  display: flex;
  flex-direction: column;
}
.events_item {
  display: flex;
  flex-direction: column;
  /* existing rules you already have */
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  margin-bottom: 30px;
  position: relative;
}
.events_item .down-content {
  /* allow the content area to grow */
  flex: 0 0 auto;
}

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

.events_item .down-content span.author {
  color: #7a6ad8;
  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: #7a6ad8;
}

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

.title-and-button {
  display: flex; /* Enables flexbox layout */
  justify-content: space-between; /* Pushes children to opposite ends of the container */
  align-items: center; /* Vertically centers the children */
  margin-bottom: 10px; /* Add some space between this container and the description */
}

/* Remove the float, margin-top, and position from the existing button class */
.more-button {
  /* No float here, flexbox handles placement */
  /* No margin-top needed, as align-items: center handles vertical alignment */
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #bdb1ff79, #81b2f77a);
  border-radius: 25px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* No changes to the pseudo-element or hover states */
.more-button::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  bottom: -8px;
  border-radius: 25px;
  background: linear-gradient(135deg, rgba(122, 106, 216, 0.6), rgba(58, 123, 213, 0.6));
  filter: blur(12px);
  z-index: -1;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.more-button:hover {
  color: #fff;
  transform: translateY(-2px);
}

.more-button:hover::after {
  opacity: 1;
  filter: blur(16px);
}


.events_item .down-content span.time {
  color: #7a6ad8;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between clock icon and text */
  margin-bottom: 6px;
}

.events_item .down-content span.time i {
  font-size: 14px;
}

.events_item.has-discount .thumb span.price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Stilizuoja naują "senos kainos" elementą:
  - Mažesnis šriftas
  - Perbraukimas
  - Šiek tiek permatoma spalva
*/
.events_item.has-discount .thumb span.price .old-price {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65); /* Nublukusi balta */
  text-decoration: line-through;
  line-height: 1;
  margin-top: 30px;
  margin-right: 10px;
}

/* Pritaikoma "small" žyma senos kainos viduje */
.events_item.has-discount .thumb span.price .old-price small {
  font-size: 18px; /* Truputį mažesnis € simbolis */
  font-weight: 500;
  vertical-align: top;
}

/* Panaikiname fiksuotas paraštes (margin) iš naujos kainos (h6), 
  nes dabar ją centruoja "flex" konteineris.
*/
.events_item.has-discount .thumb span.price h6 {
  margin: 0; /* Panaikina originalius 'margin-top: 72px' ir 'margin-left: 22px' */
  margin-top: 2px; /* Prideda mažą tarpelį tarp kainų */
  line-height: 1;
}

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

/* Team Section Fixes - Only affects .team section */
#team {
  padding-top: 30px; /* ADJUST AS NEEDED */
}

#team, 
.team-section {
  position: relative;
  /* Lower than the header's 9999 */
  z-index: 0; 
}

/* This is the heading's wrapper div.
   It controls the space BETWEEN the heading and carousel. */
#team-heading-wrapper {
  margin-bottom: 60px; /* ADJUST AS NEEDED */
}


/* ===== ORIGINAL STYLES (NOW UPDATED) ===== */

/* This is the wrapper for the carousel itself.
   CRITICAL FIX: margin-top is now 0. */
.team.section {
  margin-top: 0; /* Replaced margin-top: -80px; */
  padding-top: 0; /* Replaced padding: 40px 0; */
  position: relative;
  z-index: 0;
  /* Note: original padding-bottom: 40px is still active */
  padding-bottom: 40px; 
}

/* This rule nullifies the old ID. */
#team-heading {
  margin-top: 0;
}

.team::before,
.team::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
}

.team::before {
  width: 500px;
  height: 500px;
  background: rgba(74, 141, 255, 0.5);
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.team::after {
  width: 500px;
  height: 500px;
  background: rgba(160, 91, 255, 0.5);
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
}

.team .container {
  display: block;
  position: relative;
  z-index: 2;
}

.team .owl-carousel {
  margin-left: 0 !important;
  position: relative;
  z-index: 2;
}

/* Fix team member cards */
.team .team-member {
  height: 520px; /* Adjusted to fit larger image + compact text */
  width: 100%;   /* Width is controlled by JS items now */
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin: 10px 0; /* Vertical margin only */
  padding: 15px;  /* Reduced padding */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s;
}

.team .team-member:hover {
  overflow: hidden;
  transform: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team .team-member img {
  height: 350px !important; /* Made Larger */
  width: 100% !important;
  max-width: 260px; /* Constraint to keep ratio nice */
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto 10px; /* Tiny margin below image */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.team .team-member:hover img {
  transform: none;
}

.team .team-member .main-content {
  width: 100%;
  text-align: center;
  
  /* Use Flexbox to stack items */
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* CRITICAL: Controls space between Name, Subject, Uni, QS */
  gap: 2px; 
}

.team .team-member .main-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c2c2c;
}

.team .team-member .main-content .category {
  color: #7a6ad8;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding-bottom: 0;
}

/* Fix Owl Carousel items */
.team .owl-carousel .owl-item {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}

.team .owl-carousel,
.team .owl-stage-outer,
.team .owl-stage,
.team .owl-item {
  position: relative;
  z-index: 1 !important;
}

/* Add navigation styles */
.team .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.team .owl-nav button {
  position: absolute !important;
  background: rgba(242, 251, 255, 0.9) !important;
  color: #606060 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  font-size: 25px !important;
  pointer-events: auto;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.team .owl-nav button:hover {
  background: #7b6ad8aa !important;
  color: white !important;
}

.team .owl-nav .owl-prev {
  left: -65px;
}

.team .owl-nav .owl-next {
  right: -65px;
}

/* ===== RESPONSIVE FIXES (MERGED & CLEANED) ===== */
@media (max-width: 1200px) {
  .team .team-member {
    width: 350px !important;
    height: 570px;
    padding: 25px;
  }
  
  .team .team-member img {
    height: 390px !important;
    width: 270px !important;
  }
}

@media (max-width: 992px) {
  .team .team-member {
    width: 320px !important;
    height: 540px;
    padding: 20px;
  }
  
  .team .team-member img {
    height: 360px !important;
    width: 240px !important;
  }
}

/* Extra small devices */
@media (max-width: 576px) {
  .team.section {
    padding: 5px 0 !important;
  }
  
  .team .team-member {
    width: 260px !important;
    height: 460px;
    padding: 15px;
  }
  
  .team .team-member img {
    height: 300px !important;
    width: 200px !important;
  }
}

@media (max-width: 768px) {

  /* 1. Let the card grow vertically to fit the text */
  .team .team-member {
    height: auto !important; /* Disable fixed height */
    min-height: 480px;       /* Minimum baseline */
    padding-bottom: 25px;    /* Extra space at the bottom for safety */
  }

  /* 2. Shrink the image to make room for text */
  .team .team-member img {
    height: 260px !important; /* Reduced from 350px */
    margin-bottom: 10px;
  }

  /* 3. Reduce Font Sizes slightly to prevent wrapping */
  .team .team-member h4 {
    font-size: 18px; /* Name */
  }

  .team .team-member .study {
    font-size: 12px; /* Subject */
  }

  .team .team-member .university {
    font-size: 13px; /* University */
    min-height: auto; /* Let it shrink if text is short */
    margin-bottom: 5px;
  }
  
  /* 4. Ensure the Main Content container doesn't restrict height */
  .team .team-member .main-content {
    height: auto;
    display: block; /* Simplifies layout on mobile */
  }
}

/* Special mobile fixes, now using new structure */
@media (max-width: 768px) {
  
  /* NEW: Replaces old margin-top: 250px on heading */
  #team {
    padding-top: 150px; /* ADJUST AS NEEDED */
  }
  
  /* NEW: Adds space below heading on mobile */
  #team-heading-wrapper {
     margin-bottom: 40px; /* Space on mobile */
  }

  /* NEW: Replaces old margin-top: -20px !important */
  .team.section {
    padding: 0 !important;
    margin-top: 0 !important; 
  }
  
  /* Nullify old mobile rule */
  #team-heading {
    margin-top: 0;
  }

  .team .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .team .team-member {
    transform: scale(1) !important; /* Force original size */
  }
  
  /* These rules were from your old @media (max-width: 768px) block */
  .section-heading {
    margin-bottom: 5px !important;
    transform: translateY(0); /* Remove the negative transform */
    position: relative;
    /* top: -50px !important; -- This is no longer needed */
  }
  
  .team .owl-carousel {
    margin-top: 0 !important; /* Reset carousel margin */
    position: relative;
    /* top: -40px !important; -- This is no longer needed */
  }
}


.team .team-member h4 {
  font-size: 20px; /* Slightly larger header */
  font-weight: 700;
  color: #2c2c2c;
  margin: 0;       /* Remove all default margins */
  line-height: 1.2;
  padding-bottom: 2px; /* Tiny buffer */
}

.team .team-member h4::after {
  content: none; /* Ensures the line is gone */
  display: none;
}

.team .team-member .study {
  color: #7a6ad8;
  
  /* INCREASED SIZE (Was 10px) */
  font-size: 14px; 
  
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}

.team .team-member .university {
  color: #333; /* Darker grey for better readability */
  
  /* INCREASED SIZE (Was 13px) */
  font-size: 15px; 
  
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  min-height: 36px; /* Slightly taller to fit larger text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.team .team-member .university::before {
  content: none; /* Ensures the icon is gone */
  display: none;
}

/* The QS Rank Badge */
.qs-badge {
  display: inline-block;
  width: auto;
  background: #EC7505;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px; /* Tiny space separate from Uni */
  line-height: 1.3;
}

/* 4. Country Carousel Styles (Center Mode) */
/* 1. Minimized Country Carousel */
.owl-countries {
  width: 100%;
  max-width: 550px; /* INCREASED from 380px */
  margin: 0 auto 10px auto; /* Added a bit more bottom margin */
  position: relative;
  background: #b067da; 
  border-radius: 50px;
  padding: 10px 0;
  box-shadow: 0 5px 15px rgba(122, 106, 216, 0.4);
  z-index: -1;
}

/* Tiny arrow connector */
.owl-countries::after {
  content: "▼";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: #b067da;
  font-size: 20px;
  line-height: 1;
  z-index: -1;
}

.owl-countries .country-item {
  display: flex !important;
  align-items: center;
  justify-content: center; /* Horizontally Center */
  width: 100%;
  height: 30px;
  
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Text Styles */
.owl-countries .country-text {
  color: #ffffff;
  font-size: 15px; /* Slightly larger base font */
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.5px;
  
  opacity: 0.4; /* Faded side items */
  transform: scale(0.9);
  transition: all 0.3s ease;
}

.owl-countries .country-item.active-country .country-text {
  opacity: 1;
  font-weight: 800;
  transform: scale(1.2); /* Make center text bigger */
}

/* 2. State Styles */
.owl-countries .country-item.active-country {
  opacity: 1; /* Fully visible white */
  transform: scale(1.1);
}

/* 3. The Flag */
.owl-countries .flag { 
  font-size: 26px; 
  line-height: 1; 
  display: block;
  
  /* Text color is white (for text-based flags like 'UK') */
  color: #ffffff; 
}

/* 4. The Name - HIDDEN by default */
.owl-countries .name { 
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  
  /* Reveal Animation */
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* 5. Show Name ONLY on Active Item */
.owl-countries .country-item.active-country .name {
  color: #7a6ad8; /* Purple Text */
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
  max-height: 20px;
  max-width: 200px;
  opacity: 1;
}

.owl-item.center .team-member {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  z-index: 10;
}

.team .owl-dots {
  margin-top: 20px !important;
  text-align: center;
}

.team .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 5px;
  background: #d6d6d6; /* Inactive Grey */
  display: block;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.team .owl-dots .owl-dot.active span {
  /* NEW: Active Purple Dot */
  background: #7a6ad8 !important; 
  transform: scale(1.3);
  box-shadow: 0 2px 5px rgba(122, 106, 216, 0.5);
}
/* 
---------------------------------------------
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: #f1f0fe;
  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: #7a6ad8;
  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: #7a6ad8;
  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);
}



/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/
.contact-us {
  position: relative;
  padding: 0px;
  margin-top: 130px;
  margin-bottom: 50px;
  z-index: 0;
}

/* Rounded white background shape on the left */
.contact-us::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* Changed from 'right' */
  z-index: -1;
  width: 84%;
  height: 100%;
  background-color: #ffffff;
  content: '';
  border-top-right-radius: 500px; /* Changed from 'top-left' */
  border-bottom-right-radius: 500px; /* Changed from 'bottom-left' */
}

/* Blob shapes for the Contact Us container, mirrored from About Us */
.contact-us .container::before,
.contact-us .container::after {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  opacity: 0.2;
}

/* Top-left blob (a soft purple) */
.contact-us .container::before {
  background: rgb(221, 68, 255);
  top: -100px;
  left: -70px; /* Adjusted to be on the left side */
  right: auto;
  bottom: auto;
}

/* Bottom-left blob (a soft blue) */
.contact-us .container::after {
  background: rgb(48, 116, 194);
  bottom: -30px;
  left: -30px; /* Adjusted to be on the left side */
  right: auto;
  top: auto;
}

/* Styles for the contact form wrapper, mimicking the accordion's style */
.contact-us-content {
  margin-top: -40px;
  margin-bottom: -40px;
  /* Updated gradient to go from purple to blue instead of white */
  background: linear-gradient(to left, rgba(232, 198, 255, 0.817) 0%, rgba(195, 213, 255, 0.8) 100%);
  border-radius: 40px;
  padding: 80px 50px 50px 50px;
  box-shadow: 0 0 20px 5px rgba(226, 186, 252, 0.4);
  position: relative; /* Add position: relative; to contain the pseudo-elements */
  overflow: hidden; /* Hide the overflow of the pseudo-elements */
}

/* New blobs for the contact form itself */
.contact-us-content::before,
.contact-us-content::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.3;
}

/* Top-right blob inside the form */
.contact-us-content::before {
  background: rgba(226, 186, 252, 0.6);
  width: 200px;
  height: 200px;
  top: -50px;
  right: -50px;
}

/* Bottom-left blob inside the form */
.contact-us-content::after {
  background: rgba(186, 206, 252, 0.6);
  width: 150px;
  height: 150px;
  bottom: -40px;
  left: -40px;
}

/* Styling for all form fields (input, textarea, select) */
.contact-us-content fieldset {
  border: none;
  margin-bottom: 20px;
  padding: 0;
}
#contact {
  scroll-margin-top: 100px; /* adjust to your header height */
}

.contact-us-content input,
.contact-us-content select,
.contact-us-content textarea {
  width: 100%;
  padding: 15px 25px;
  border: 1px solid #ddd;
  border-radius: 25px; /* Rounded corners for inputs */
background-color: rgba(255, 255, 255, 0.441);
  font-size: 14px;
  color: #4a4a4a;
  outline: none;
}

.contact-us-content textarea {
  resize: vertical; /* Allow vertical resizing only */
  min-height: 150px;
}



/* Styling for the submit button, now with a purple gradient */
.orange-button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  font-weight: 600;
  color: #ff0000;
  /* Changed from orange to a purple-blue gradient */
  background: linear-gradient(135deg, #d2caff, #aacdff);
  border-radius: 25px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  overflow: hidden;
  border: none; /* Remove default button border */
  cursor: pointer;
}

/* Gradient shadow for the button via pseudo-element */
.orange-button::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  bottom: -8px;
  border-radius: 25px;
  /* Changed from orange to a purple-blue gradient with transparency */
  background: linear-gradient(135deg, rgba(122, 106, 216, 0.6), rgba(58, 123, 213, 0.6));
  filter: blur(12px);
  z-index: -1;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.orange-button:hover {
  transform: translateY(-2px);
}

.orange-button:hover::after {
  opacity: 1;
  filter: blur(16px);
  transform: translateY(0);
}

/* Styles for the Special Offer section, to match the aesthetic */
.special-offer {
  background: #f8f9fa;
  border-radius: 25px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.special-offer .offer {
  position: absolute;
  top: -20px;
  right: -20px;
  background: linear-gradient(to bottom right, #f7945d, #f16f5c);
  color: #fff;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  text-align: center;
  padding-top: 25px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.special-offer h6 {
  color: #7a6ad8;
  font-size: 15px;
}

.special-offer h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 5px;
}

.special-offer a {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

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

#contact-form input::placeholder {
  color: rgba(0, 0, 0, 0.457);
}

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

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

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

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

.contact-us-content .more-info {
  text-align: center;
  background: rgb(0, 0, 0);
  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;
}

#contact-form select {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.441); /* ✅ same as input + textarea */
  border: none;
  outline: none;
  padding: 0px 20px;
  font-size: 14px;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
  appearance: none;       /* removes default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}

#contact-form select:invalid {
  color: rgba(0, 0, 0, 0.45); /* faded, same style as input placeholders */
}

#contact-form select option {
  background-color: #c0aff7db; /* dropdown background */
  color: #fff;               /* option text color */
}

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

footer {
    position: relative;
    padding: 50px 0 30px;
    /* PADIDINTA: Padidinome atotrūki iki 150px */
    margin-top: 150px; 
    background: linear-gradient(135deg, #d1a1f1 40%, #72e0fe 100%);
    overflow: hidden;
    border-radius: 150px 150px 0px 0px;
}
footer p {
    color: #fff;
    font-weight: 400;
    text-align: center;
    position: relative;
    z-index: 0;
    font-size:medium;
}

footer p a {
    color: #fff;
    transition: all .3s;
    text-decoration: none;
}

footer p a:hover {
    opacity: 0.75;
}

/* Pseudo-elements for the blob shapes (adjusted for smaller size) */
footer::before,
footer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    background: #7a64dbc7;
    z-index: 1;
}

/* Blob 1 */
footer::before {
    width: 300px; /* Smaller blob */
    height: 300px;
    top: -75px; /* Adjusted position */
    left: -100px;
    transform: rotate(45deg);
    background: #c18bf1;
    z-index: 0;
}

/* Blob 2 */
footer::after {
    width: 200px; /* Smaller blob */
    height: 200px;
    bottom: -75px;
    right: -75px;
    transform: rotate(-30deg);
    background: #66baffab;
    z-index: 0;
}

footer .footer-name {
    text-align: center;
    font-size: 80px; /* Reduced font size */
    font-weight: 1000;
    color: #fff;
    margin-top: -30px; /* Adjusted margin */
    opacity: 0.65; /* Slightly more prominent */
}

.combined-column {
    margin: 10px auto; /* Reduced vertical margin */
}

.combined-column h4 {
    font-size: 18px; /* Smaller font size */
    margin-bottom: 10px; /* Reduced space below heading */
    font-weight: 700;
    color: #fff;
    opacity: 0.9;
}

.combined-column ul {
    list-style: none;
    padding: 0;
}

.combined-column ul li {
    margin-bottom: 5px; /* Reduced space between list items */
}

.combined-column ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
}

.combined-column ul li a:hover {
    opacity: 0.75;
}

/* --- Social Media Icons --- */
.social-icons a {
    display: inline-block;
    color: #fff;
    font-size: 20px; /* Smaller icons */
    margin: 0 5px; /* Reduced horizontal margin */
    transition: all 0.3s ease;
}

.social-icons a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

@media (max-width: 768px) {
    footer {
        padding: 40px 0 20px;
        margin-top: 100px; 
        border-radius: 80px 80px 0px 0px; /* Reduced from 100px */
        overflow: hidden; /* Ensure this is present */
    }
    
    footer .footer-name {
        font-size: 40px; 
        margin-top: -10px; /* Reduced negative margin */
    }

    /* Adjust blob positions for mobile */
    footer::before {
        width: 200px; 
        height: 200px;
        top: -40px; /* Reduced negative positioning */
        left: -40px; /* Reduced negative positioning */
    }

    footer::after {
        width: 150px; 
        height: 150px;
        bottom: -40px; /* Reduced negative positioning */
        right: -40px; /* Reduced negative positioning */
    }

    /* Rest of your existing mobile styles... */
    .combined-column h4 {
        font-size: 16px;
        margin-bottom: 8px; 
    }

    .combined-column ul li a {
        font-size: 14px;
    }

    .combined-column ul li {
        margin-bottom: 3px;
    }

    .social-icons a {
        font-size: 18px;
        margin: 0 4px;
    }
}
/* 
---------------------------------------------
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;
  }
}

@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 {
    padding-top: 100px;
  }
  .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: #7a6ad8;
    color: #fff;
  }
  .courses {
    margin-top: 90px;
  }
  .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 #ddd;
  }
  .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: #f1f0fe;
    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 .nav li.has-sub:after {
    right: 15px;
  }
  .fun-facts:before {
    width: 95%;
  }
}