/* 

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 .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: black;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: black;
}

img {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  background-color: rgba(89, 67, 228, 0.078);
}

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

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

.section {
  padding-top: 10px;
  margin-top: 10px;
}

.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: white;
  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: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

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

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

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

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
  display: flex;
  align-items: center;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 15px;
  background: #7a6ad8;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: dot 1s infinite ease-in-out;
}

.preloader-inner .dots {
  display: flex;
  margin-left: 31px;
  animation: dots 1s infinite ease-in-out;
}

.preloader-inner .dots span {
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #7a6ad8;
  border-radius: 50%;
} */

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

/* .container{
  display: flex;
  flex-direction: row; 
  align-items: center; 
  justify-content: space-between; 
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: block; 
  gap: 0;         
  padding: 0 15px; 
} */

.background-header {
  background-color: #fff;
  border-radius: 0 0 25px 25px;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transition: all 0.5s ease 0s;
}

.header-area {
  position: fixed;  /* changed from sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: lab(38.97% 58.19 -88.84);
  border-radius: 0 0 15px 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transition: all 0.5s ease 0s;
}


.header-area .main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}


.header-area .main-nav .logo {
  margin: 0; /* reset margins if needed */
  padding: 0;
  flex-shrink: 0;   /* don't allow logo to shrink */
}

.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,
.background-header .main-nav #search {
  margin-top: 18px;
}

.header-area .main-nav ul.nav {
  margin-left: auto;
  display: flex;
  height: 100%; 
  z-index: 100;
}

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

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 100%; 
  display: flex; 
  align-items: center; 
}


.header-area .main-nav .nav li a {
  display: block;
  padding: 0 20px; /* Simplified padding */
  border-radius: 20px;
  font-weight: 400; /* Adjusted for better readability */
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  transition: all 0.4s ease-in-out; /* Removed redundant vendor prefixes */
  border: none; /* Ensured no unnecessary border */
  letter-spacing: 0.25px;
  text-decoration: none; /* Prevents underlines */
}

/* Add hover effect for better UX */
.header-area .main-nav .nav li a:hover {
  background: #1708ed;
  color: #fff;
}

.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;
}
.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: #1708ed;
  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: #1708ed;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 1040;
  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: #1708ed;
  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: #1708ed;
  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: #1708ed;
}

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

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

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

.visible{
  display:inline !important;
}

@media (max-width: 767px) {
  .header-area .main-nav .nav {
    background-color: #fff;
    width: 100%;
    text-align: center;
    display: none;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    animation: slideDown 0.3s ease forwards;
    overflow: hidden;
    z-index: 100;
    padding: 20px 0; /* Increased padding */
    min-height: 400px; /* Increased container height */
  }

  .header-area .menu-trigger {
    display: block !important;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
  }

  .header-area .main-nav ul.nav {
    margin-left: auto;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%; 
    display: none;
    z-index: 100;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    border-top: 1px solid #e4e4e4;
    background-color: #f8f7ff;
    height: 70px; /* Increased height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px; /* Increased font size */
  }

  .header-area .main-nav .nav li:first-child {
    border-top: none;
  }

  .header-area .main-nav .nav li a {
    width: 100%;
    height: 100%;
    line-height: 70px;
    font-weight: 400; /* Normal weight */
    font-size: 20px; /* Increased font size */
    color: #1e1e1e;
    background-color: rgba(101, 101, 227, 0.779);
    text-align: center;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    border-radius: 0;
  }

  .header-area .main-nav .nav li a:hover {
    background-color: #dedbff;
    color: #1708ed;
  }

  .header-area .main-nav .nav li a.active {
    background-color: #1708ed;
    color: #fff;
    font-weight: 500; /* Slight emphasis */
  }

  .header-area {
    background-color: transparent;
    padding: 0 20px;
    height: 100px;
    box-shadow: none;
    position: relative;  
  }
  

  .header-area .main-nav .logo {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 24px; /* Larger logo text */
  }

  .header-area .container {
    padding: 0;
  }

  .header-area .logo {
    margin-left: 0;
    margin-top: 30px;
  }

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

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #7a6ad8 !important;
  }
  /* .header-area .main-nav .logo,
  .background-header .main-nav .logo {
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1000; 
  }

  .header-area .main-nav .logo h1 {
    margin: 0;
    padding: 0;
  } */
}

/* Animation for smooth appearance */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    
  }
}




/*
--------------------------------------------
about us 
--------------------------------------------
*/
/* About Us Image Container */
.about-us-container {
  width: 100%; /* Full width to allow centering */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically if needed */
  margin-top: 25px;
  padding: 0 15px; /* Optional: Responsive padding */
  box-sizing: border-box;
  margin-top: 80px;
}

/* About Us Image */
.about-us-container img {
  max-width: 100%;
  width: 100%;
  max-width: 250px; /* Limit the image size */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .about-us-container {
    width: 100%; /* Full width to allow centering */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically if needed */
    margin-top: 25px;
    padding: 0 15px; /* Optional: Responsive padding */
    box-sizing: border-box;
    margin-top: 5px;
  }
}
/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/
/* Main Container */
.main-container {
  width: 75%; /* Reduced from 80% */
  margin: auto;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  display: flex;
  align-items: center;
}

/* Slider */
.slider {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

/* Individual Slide */
.slide {
  display: flex;
  flex: 1 0 100%;
  min-height: 300px; /* Reduced height */
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 20px; /* Reduced padding */
  position: relative;
  border-radius: 10px;
}

/* Side-by-side container */
.content-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Left Container (Image) */
.left {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left img {
  max-width: 80%;
  height: auto;
  border-radius: 10px;
}

/* Right Container (Text) */
.right {
  width: 50%;
  padding: 5px;
  text-align: center;
  background: white; /* Set background to white */
  color: black; /* Set text color to black */
  border-radius: 10px;
  position: relative;
}

/* Quote Text */
.right p {
  font-size: 14px;
  font-style: italic;
  line-height: 2.0;
  padding: 15px;
  font-family: 'Times New Roman', Times, serif;
  color: rgb(22, 21, 21);
  border-radius: 5px;
}

/* Quote Icons */
.quote-icon {
  width: 40px;
  height: auto;
  opacity: 0.6;
}

.quote-left {
  position: absolute;
  top: -10px;
  left: -20px;
}

.quote-right {
  position: absolute;
  bottom: -10px;
  right: -20px;
}

/* Third Slide Image */
.image-container {
  width: 95%;
  max-width: 1200px;
  margin: 10px;
  overflow: hidden;
  border-radius: 15px;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center;
  }

  .left, .right {
    width: 100%;
    padding: 10px;
  }

  .quote-left {
    top: 0;
    left: 10px;
  }

  .quote-right {
    bottom: 0;
    right: 10px;
  }

  .right p {
    font-size: 13px;
    padding: 10px;
    line-height: 1.6;
  }

  .main-container {
    width: 95%; /* Increase width slightly for smaller screens */
  }

  .slide {
    flex-direction: column; /* Optional: in case slide content also needs stacking */
    padding: 10px;
  }

  .left img {
    max-width: 90%;
    height: auto;
  }
}


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


.section.courses .course-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap; /* Important for wrapping on smaller screens */
}

.left-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5448f5;
  border-radius: 10px;
  padding: 20px;
}

.left-container img {
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
}

.right-container {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right-container h2 {
  color: #333;
  margin-bottom: 20px;
}

.right-container p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}


/* Responsive layout for mobile and tablets */
@media (max-width: 768px) {
  .section.courses .course-container {
    flex-direction: column;
    padding: 20px 15px;
  }

  .left-container,
  .right-container {
    width: 100%;
    padding: 20px 10px;
  }

  .right-container {
    padding: 20px 10px; /* Adjusted for smaller screens */
    text-align: center;
  }

  .right-container h2 {
    font-size: 20px;
  }

  .right-container p {
    font-size: 14px;
  }
}


/*
--------------------------------------------
guest lectures 
--------------------------------------------
*/
/* Guest Lecture Container */
.events {
  margin-top: 10px;
}
.guest-lecture-container {
  display: flex; /* Enables centering */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  flex-direction: column; /* Ensures proper stacking */
  width: 100%; /* Full width for centering */
  margin: 10px auto; /* Adds space from other elements */
  padding: 10px; /* Adds internal spacing */
  text-align: center; /* Ensures text aligns properly */
}

/* Guest Lecture Image */
.guest-lecture-container img {
  width:35%; /* Makes image smaller */
  max-width: 600px; /* Limits size */
  height: auto; /* Maintains aspect ratio */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}
/* Main Container */
.main-container-guest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin: auto;
}

/* Left & Right Containers */
.left-container-guest, .right-container-guest {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* Remove padding so the image takes full space */
  border-radius: 10px;
  margin: 10px;
  height: 300px; /* Adjust height as needed */
  overflow: hidden; /* Prevents overflow issues */
  background-color: #f4f4f4; /* Optional: Background for better visibility */
}

/* Images */
.left-container-guest img, .right-container-guest img {
  width: 100%;
  height: 100%; /* Makes image fill the container */
  object-fit: contain; /* Ensures full image is visible without cutting */
  border-radius: 10px;
}

@media (max-width: 767px) {
  .main-container-guest {
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center them */
    padding: 20px;
    background: linear-gradient(135deg, #5147e0 0%, #dcd5ff 100%);
  }

  .left-container-guest,
  .right-container-guest {
    width: 100%; /* Full width on mobile */
    height: auto; /* Allow height to adjust */
    margin: 10px 0; /* Vertical spacing */
  }

  .left-container-guest img,
  .right-container-guest img {
    height: auto; /* Let image adjust naturally */
    max-height: 375px; /* Optional: limit height */
  }
  
}



/*
--------------------------------------------
Achievments 
--------------------------------------------
*/
/* Achievements Container */
.achievements-container {
  display: flex; /* Enables centering */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  flex-direction: column; /* Ensures proper stacking */
  width: 100%; /* Full width for centering */
  margin: 20px auto; /* Adds space from other elements */
  padding: 10px; /* Adds internal spacing */
  text-align: center; /* Ensures text aligns properly */
}

/* Guest Lecture Image */
.achievements-container img {
  width: 50%; /* Makes the image smaller, adjust as needed */
  max-width: 400px; /* Limits the image width to 400px */
  height: auto; /* Maintains aspect ratio */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* General styling for the main container */
.main-container-achivements {
  width: 80%; /* Reduce the width of the main container to 80% of the screen */
  max-width: 1200px; /* Set a maximum width for the container */
  margin: 20px auto; /* Center the container with space around it */
  overflow: hidden; /* Hide overflow content (images that go out of the container) */
  padding: 10px; /* Adds some internal padding */
  background-color: white;}

.second-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.second-slider-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 2;
  color: #333;
  transition: background 0.3s ease;
}

.second-slider-btn:hover {
  background: rgba(255, 255, 255, 1);
}

.second-slider-btn.prev {
  position: absolute;
  left: 10px;
}

.second-slider-btn.next {
  position: absolute;
  right: 10px;
}

@media (max-width: 767px) {
  .main-container-achivements {
    width: 100%;
  }
}

/* Style the second-slider to be a flex container for horizontal slides */
.second-slider {
  display: flex; /* Align items horizontally */
  transition: transform 0.5s ease-in-out; /* Smooth transition for sliding effect */
}

/* Each second-slide should take up the full width of the container */
.second-slide {
  flex: 0 0 100%;
    /* Makes each slide take 100% width of the container */
    display: flex;
    justify-content: center;
    /* Center the image */
    align-items: center;
    /* Center the image vertically */
}

/* Style images in the second slider */
.second-slide img { 
  border-radius: 10px;
  width: 60%; /* Make image take 60% of the slide width */
  max-width: 500px; /* Max width for the image */
  height: auto; /* Maintain aspect ratio */
}


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

.container-aboutus {
  display: flex;
  justify-content: center; /* Centers child elements horizontally */
  align-items: center; /* Centers child elements vertically */
  flex-direction: row; /* Ensures row layout, you can change this to column for stacking in mobile */
  padding: 20px; /* Optional, to add spacing around */
  max-width: 100%; /* Ensures the container does not overflow */
  margin: 0 auto; /* Centers the container in the viewport */
}

/* .about-us {
  position: relative;
  padding: 0px;
  margin-top: 80px;
  width: 90%;
} */

/* .about-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 84%;
  height: 100%;
  background-color: rgb(241, 192, 47);
  z-index: 1000;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
} */

.accordion {
  margin-top: -20px; /* Reduce negative margin if needed */
  margin-bottom: -20px;
  background-color: #5448f5;
  border-radius: 40px;
  padding: 60px 40px 40px 40px; /* Reduced padding */
}


.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: #7a6ad8;
  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: #7a6ad8;
  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-marg: 60px; */
  margin-bottom: 0px;
}
.about-us .section-heading h2 {
  color: black;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
}

.about-us .section-heading p {
  color: black;
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a4a;
  margin-bottom: 20px;
}


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


/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/
/*
.courses {
  margin-top: 160px;
}

.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;
}

.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_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: #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-color: rgba(122, 106, 216, 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: #f1f0fe;
  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: #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);
}

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

/* .fun-facts {
  position: relative;
  padding: 30px 0px 30px 0px;
  overflow: hidden;
  margin: 50px;
}

.fun-facts:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 80%;
  height: 70%;
  background-color: #5448f5;
  content: '';
  border-top-right-radius: 300px;
  border-bottom-right-radius: 300px;
}

.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;
  padding: 20px;
}

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

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

.fun-facts p {
  color: #0b0a0a;
  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
} */


/* ===== Fun Facts Section ===== */
.fun-facts {
  background: linear-gradient(135deg, #5147e0 0%, #dcd5ff 100%);
  padding: 80px 0;
  text-align: center;
  width: 100%;
}

.fun-facts .counter {
  background: #fff;
  border-radius: 15px;
  padding: 30px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

.fun-facts .counter:hover {
  transform: translateY(-5px);
}

.fun-facts .count-title {
  font-size: 48px;
  font-weight: 700;
  color: #1708ed;
  margin-bottom: 10px;
}

.fun-facts .count-text {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

/* ===== Responsive Styling ===== */
@media (max-width: 991px) {
  .fun-facts .count-title {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .fun-facts {
    padding: 60px 20px;
  }

  .fun-facts .count-title {
    font-size: 32px;
  }

  .fun-facts .count-text {
    font-size: 16px;
  }

  .fun-facts .counter {
    padding: 25px 15px;
  }
}


/* 
---------------------------------------------
Team Style
--------------------------------------------- 
*/
/* Team Section */
/* .team {
  margin-top: 80px;
  padding-top: 40px;
}


.team-member {
  position: relative;
  text-align: center;
  margin-bottom: 150px; 
}


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


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


.team-member .main-content {
  border-radius: 25px;
  padding: 120px 30px 30px 30px;
  background-color: #5448f5;
  text-align: center;
  position: relative;
  transition: all 0.3s ease-in-out;
}


.team-member .main-content span.category {
  color: rgb(193, 179, 96);
  font-size: 15px;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}


.team-member .main-content h4 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 5px;
  color: white;
}


@media (max-width: 992px) {
  .team {
    padding-top: 100px;
  }

  .team-member img {
    max-width: 180px;
    top: -90px;
  }

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

  .team-member .main-content {
    padding: 120px 25px 30px 25px;
  }
}

@media (max-width: 767px) {
  .team {
    padding-top: 80px;
  }

  .team-member img {
    max-width: 160px;
    top: -80px;
  }

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

  .team-member .main-content {
    padding: 100px 20px 20px 20px;
  }

  .team-member .main-content h4 {
    font-size: 20px;
  }

  .team-member .main-content ul li a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
  }
} */

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

.testimonial_head-container {
  display: flex; /* Enables centering */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  flex-direction: column; /* Ensures proper stacking */
  width: 100%; /* Full width for centering */
  margin: 20px auto; /* Adds space from other elements */
  padding: 10px; /* Adds internal spacing */
  text-align: center; /* Ensures text aligns properly */
  background-color: gainsboro;
}

/* Guest Lecture Image */
.testimonial_head-container img {
  width: 50%; /* Makes the image smaller, adjust as needed */
  max-width: 110px; /* Limits the image width to 400px */
  height: auto; /* Maintains aspect ratio */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* Scoped custom styles for testimonial slider */
.testimonials.custom-slider {
  margin-top: 20px;
  position: relative;
}

.testimonials.custom-slider .owl-carousel {
  text-align: center;
}

.testimonials.custom-slider .owl-carousel .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonials.custom-slider .owl-carousel .item img {
  width: auto;
  height: 400px;
  max-width: 100%;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Override nav button positioning */
.testimonials.custom-slider .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  pointer-events: none;
}

.testimonials.custom-slider .owl-nav button {
  pointer-events: all;
  background-color: #fff;
  color: #7a6ad8;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.testimonials.custom-slider .owl-nav button:hover {
  background-color: #7a6ad8;
  color: #fff;
}

/* Font Awesome Arrow Fix (already in your project) */
.fa-angle-left::before {
  content: "\f104";
}

.fa-angle-right::before {
  content: "\f105";
}
@media (max-width: 767px) {
  .testimonials.custom-slider .owl-nav {
    padding: 0 10px; /* tighter padding on small screens */
  }

  .testimonials.custom-slider .owl-nav button.owl-prev {
    margin-left: 0;
    left: 0;
  }

  .testimonials.custom-slider .owl-nav button.owl-next {
    margin-right: 0;
    right: 0;
  }
  .testimonials.custom-slider .owl-carousel .item {
    display: block;
    text-align: center;
    padding: 0;
    margin-top: 20px;
  }

  .testimonials.custom-slider .owl-carousel .item img {
    width: 75%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* keep consistent */
  }
}



/* 
---------------------------------------------
Events Style
--------------------------------------------- 
*/
/*
.events .section-heading {
  margin-bottom: 100px;
}

.events .item {
  background-color: #f1f0fe;
  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: #7a6ad8;
  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: #4a4a4a;
  margin-bottom: 10px;
}

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

.events .item a {
  position: absolute;
  right: 0;
  top: 22px;
  background-color: #7a6ad8;
  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: 45px;
  position: relative;
  padding: 50px 0px;
}

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


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

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

.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: #7a6ad8;
  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: #4a4a4a;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

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

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

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

.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: #7a6ad8;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  margin-top: 25px;
  padding: 80px;
  background-color: rgb(85,0,227);
  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: #f9ebff26;
  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: #5500e3;
  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(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: 50px;
  position: relative;
  background-color: rgb(85,0,227);
  vertical-align: middle;
  min-height: 80px;
  border-radius: 150px 150px 0px 0px;
}

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

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
--------------------------------------------- 
*/
/* Prevents Horizontal Scrolling */
/* body {
  overflow-x: hidden;
} */

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
  .header-area {
    top: 0;
  }

  .header-area .main-nav .logo h1 {
    border-right: none;
  }

  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
    text-align: center;
  }

  .main-banner .owl-nav {
    left: 50%;
    transform: translateX(-50%);
  }

  .event_filter {
    padding: 15px 20px;
    text-align: center;
  }

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

  .menu-trigger {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

/* Tablet Styles (max-width: 992px) */
@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;
  }

  .main-banner {
    padding-top: 100px;
  }

  .main-banner .item {
    padding: 100px 60px 140px 60px;
    text-align: center;
  }

  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
    width: 100%;
  }

  .main-banner .item .buttons {
    display: block;
    text-align: center;
  }

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

  .main-banner .owl-nav {
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
  }

  .services {
    margin-top: 80px;
  }

  .about-us {
    margin-top: 10px;
  }

  .accordion {
    padding: 40px 25px 10px 25px;
  }

  .services .service-item .icon {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }

  .about-us .section-heading {
    margin-top: 70px;
  }

  .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 .main-button a {
    background-color: #7a6ad8;
    color: #fff;
  }

  .courses {
    margin-top: 10px;
  }

  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }

  .fun-facts {
    margin-top: 25px;
  }

  .fun-facts::before {
    width: 95%;
  }

  .team {
    margin-top: 160px;
  }

  .team-member {
    margin-bottom: 140px;
  }

  .testimonials {
    margin-top: -50px;
    padding: 0;
  }

  .testimonials .section-heading {
    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: 5px;
  }

  .events .item {
    margin-bottom: 66px;
  }

  .events .item .image img {
    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;
  }

  .events .item ul li h6 {
    font-size: 14px;
  }

  .contact-us {
    padding-top: 20px;
  }

  .contact-us .special-offer {
    background-color: rgb(85,0,227);
    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;
  }
}

/* Large Screens (max-width: 1200px) */
@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%;
  }
}