/* import font family is == Maven Pro ==*/
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&display=swap");
/* import font family is == Roboto ==*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*
Theme Name:     Kinder Dot
Theme URI:
Author:
Author URI:
Description:
Version:        1.0
License:
License URI:

 [Table of Content]
 01. Reset
 02. Global Style
	  01. Index Page Style
        section Index Page
            1.1. Header section
            1.2. Hero section
            1.3. Features section
            1.4. Goal section
            1.5. Services section
            1.6. Video section
            1.7. Company section
            1.8. Stats section
            1.9. Products section
            1.10. Agency section
            1.11. Testimonials section
            1.12. Blog section
            1.13. Partners section
            1.14. ContactUs section
            1.15. Footer section

    02. About Page Style
        section About Page
            2.1. About_Hero section
            2.2. Team section

    03. Contact Page Style
        section Contact Page
            3.1. Map section

    04. Projects Page Style
        section Project Page
            4.1. SubPage_Hero section

    05. Servics Page Style
        section Services Page
            5.1. Solutions section

    06. ServicsDetail Page Style
        section ServicsDetail Page
            6.1. Quote section

    07. FAQ Page Style
        section FAQ Page
             7.1. FAQ section

    08. Team Page Style

    09. Blog Page Style

    10. Testimonial Page Style

    11. 404 Page Style

    12. Comming Page Style


 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
/* =====  01. Reset  ====== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-family: "Maven Pro", sans-serif;
  line-height: 1;
  background: #ffffff;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

input:focus,
button:focus {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: #ffffff;
  -webkit-text-fill-color: #919191;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

select::-ms-expand {
  display: none;
}

label {
  font-weight: normal;
}

iframe {
  width: 100%;
}

.container {
  overflow-y: visible !important;
}

.Courses_Slider .shadow-md {
  display: flex;
}


/* coomon tag header sub header  color */

.color{
  color:#200D46 !important;
}

.bgcolor{
  background-color: #201140d4 !important;
}

.bgcolor1{
  background-color: #35167ad4 !important;
}

.bdr{
  border-color: #311669 !important;
}

.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* life at dnet */

.gallery-section {
  padding: 80px 0;
  background: #ffffff;
}

.gallery-grid.collage-style {
  display: grid;
  grid-template-areas:
    "one one two"
    "three four four"
    "five six seven"
    "eight eight seven";
  grid-gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gallery-item {
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Assign image shape areas */
.item-1 { grid-area: one; }
.item-2 { grid-area: two; }
.item-3 { grid-area: three; }
.item-4 { grid-area: four; }
.item-5 { grid-area: five; }
.item-6 { grid-area: six; }
.item-7 { grid-area: seven; }
.item-8 { grid-area: eight; }

/* Mobile Responsive */
@media (max-width: 768px) {
  .gallery-grid.collage-style {
    grid-template-areas: unset;
    grid-template-columns: 1fr 1fr;
  }

  .gallery-item {
    grid-area: unset !important;
  }
}


.gallery-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(32, 13, 70, 0.5), rgba(32, 13, 70, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.gallery-item:hover::after {
  opacity: 1;
}



/* end */

/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */

h1 {
  font-size: 67px;
  line-height: 79px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.04em;
}

h2 {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.04em;
}

h3 {
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.02em;
}

h4 {
  font-size: 30px;
  line-height: 35px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.02em;
}

h5 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.02em;
}

h6 {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.02em;
}

p {
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}

button {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  padding: 14px 35px;
  font-family: "Roboto", sans-serif;
  border: none;
  outline: none;
}

.hover1 {
  padding: 14px 30px;
  /* background-color: transparent; */
  background-color: #FFF;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease;
  /* border: 1px solid #E33D5C; */
  border: 1px solid #ffc107;
  color: #ffffff;
  z-index: 1;
  display: inline-block;
  text-align: center;
}

.hover1::before,
.hover1::after {
  content: "";
  display: block;
  width: 250%;
  height: 250%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  /* background-color: #E33D5C; */
  background-color: #ffc107;
  transition: 0.4s ease;
}

.hover1::before {
  top: -16px;
  left: -16px;
}

.hover1::after {
  left: calc(100% + 16px);
  top: calc(100% + 16px);
}

.hover1:hover::before,
.hover1:hover::after {
  height: 50px;
  width: 50px;
}

.hover1:hover {
  /* color: #E33D5C; */
  color: #0c368a ;
}

.hover1:active {
  filter: brightness(0.8);
}

.hover2 {
  padding: 14px 35px;
  background-color: transparent;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease;
  /* border: 1px solid #E33D5C; */
  border: 1px solid #0c368a ;
  color: #000;
  z-index: 1;
  display: inline-block;
  text-align: center;
}

.hover2::before,
.hover2::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  /* background-color: #E33D5C; */
  background-color: #0c368a ;
  transition: 0.4s ease;
}

.hover2::before {
  top: -16px;
  left: -16px;
}

.hover2::after {
  left: calc(100% + 16px);
  top: calc(100% + 16px);
}

.hover2:hover::before,
.hover2:hover::after {
  height: 250%;
  width: 250%;
}

.hover2:hover {
  color: #ffffff;
}

.hover2:active {
  filter: brightness(0.8);
}

.hover3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  transition: all 0.5s ease;
  /* color: #E33D5C; */
  color: #fab113;
  font-weight: 700;
}

.hover3:hover {
  color: #0c368a ;
}

.hover3 i {
  transition: 0.3s ease;
}

.hover3:hover i {
  transform: translateX(50%);
}

.hover4 {
  padding: 14px 35px;
  background-color: transparent;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid#4e35f0;
  color: #ffffff;
  z-index: 1;
  display: inline-block;
  text-align: center;
}

.hover4::before,
.hover4::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background-color: #EAF035;
  transition: 0.4s ease;
}

.hover4::before {
  top: -16px;
  left: -16px;
}

.hover4::after {
  left: calc(100% + 16px);
  top: calc(100% + 16px);
}

.hover4:hover::before,
.hover4:hover::after {
  height: 250%;
  width: 250%;
}

.hover4:hover {
  color: #171626;
}

.hover4:active {
  filter: brightness(0.8);
}

/* form validation modal */

.modal-content {
  padding: 40px;
  background: rgba(112, 62, 219, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-content img {
  margin: auto;
  width: 100px;
}

.modal-content div {
  padding: 40px 0px;
  width: 350px;
  margin: auto;
}

.modal-content h4,
.modal-content h6 {
  margin: auto;
  color: #ffffff;
  text-align: center;
}

.modal-content h6 {
  margin: 15px auto;
}

.modal .hover2 {
  width: 100px;
  padding: 12px 24px;
  color: #ffffff;
}

.modal-backdrop {
  z-index: 9;
}

/* Scroll To Top Button */

.scrollToTop {
  display: none;
  height: 60px;
  width: 60px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #1D123A;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  z-index: 999;
  transition: 0.5s ease all;
}

.scrollToTop:hover {
  transform: translateY(-15%);
}

.scrollToTop .arrowUp {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 24px;
}

.scrollToTop .water {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  /* background-color: #E33D5C; */
  background-color: #316ff4;

  transition: all 0.3s;
}

.scrollToTop .water_wave {
  width: 200%;
  position: absolute;
  bottom: 100%;
}

.scrollToTop .water_wave_back {
  right: 0;
  /* fill: #e33d5b85; */
  fill: #2c5aef7d;
  animation: wave-back 1.4s infinite linear;
}

.scrollToTop .water_wave_front {
  left: 0;
  /* fill: #E33D5C; */
  fill: #3d9ee3b7;
  margin-bottom: -1px;
  animation: wave-front 0.7s infinite linear;
}

@keyframes wave-front {
  100% {
    transform: translateX(-50%);
  }
}

@keyframes wave-back {
  100% {
    transform: translateX(50%);
  }
}
/* video */

.Hero-video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  pointer-events: none;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
  z-index: -1;
}

#mainNavbar {
  transition: background-color 0.3s ease;
}

.navbar-scrolled {
  padding: 20px 20px 10px 20px;
  background-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.navbar-scrolled li a {
  color: #050505 !important;
}
.navbar-scrolled .dropdown-item {
  color: #050404 !important;
}

.navbar-scrolled .dropdown-item:hover {
  color: #007bff !important;
  background-color: #f0f0f0;
}


.fade-in {
  animation: fadeInVideo 1s ease-in-out;
}

@keyframes fadeInVideo {
  from { opacity: 0; }
  to { opacity: 1; }
}

.Hero .btn:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}


/* pre_lodaer */
.site-wrapper {
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

body.preloader-active {
  overflow: hidden;
  transition: all 0.5s ease;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F4F0FC;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader-text {
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-size: 80px;
  font-weight: 800;
  background: #E33D5C;
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientMove 3s infinite linear;
  width: -webkit-fill-available;
  text-align: center;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
    transform: translateY(0);
  }

  50% {
    background-position: 100% 50%;
    transform: translateY(-20px);
  }

  100% {
    background-position: 0% 50%;
    transform: translateY(0);
  }
}

.rotate-animation {
  animation: rotate 20s linear infinite;
}

.hover-rotate:hover {
  animation: tilt 2s ease-in-out infinite;
}

.bounce-animation {
  animation: bounce 2s ease-in-out infinite;
}

.bounce-button:hover {
  animation: bounceButton 0.5s ease-in-out;
}

.bounce-slow {
  animation: slowBounce 2s ease-in-out infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes bounceButton {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slowBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ===== End of 02. Global Style ===== */
/* ========= 1.1. Header section ======== */
/* ========== LOGO ========== */
.nav-logo img {
  width: 120px;
}

/* ========== NAVBAR ========== */
.navbar-collapse {
  justify-content: center;
}

.navbar ul li a,
.navbar ul li a:focus {
  color: #1b1117;
  padding: 15px;
}


.navbar ul li a i {
  color: #340c8a !important;
}

.navbar ul li a:hover,
.navbar ul .active {
  color: #0c368a !important;
}

/* ========== DROPDOWN ========== */
.dropdown ul {
  width: 200px;
}

.dropdown ul li a {
  color: #1B1117;
  font-weight: 600;
  border-radius: 10px;
  background: transparent;
}

.dropdown ul li a:hover {
  background-color: transparent;
}

.dropdown ul .active {
  background: none;
}

.dropdown-menu {
  padding: 15px 10px;
  background-color: #ffffff;
  box-shadow: 0px 16px 18px 0px #0000001A;
  overflow: hidden;
  transition: all 0.5s ease-in;
  visibility: hidden;
  display: block;
}

.navbar .dropdown:hover .dropdown-menu {
  display: block;
  border-radius: 10px;
}

/* ========== ASIDE SIDEBAR ========== */
.right-sidbar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background-color: #fff;
  overflow-y: auto;
  transition: right 0.3s ease-in-out;
  z-index: 10000;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.right-sidbar.active {
  right: 0;
}

.right-sidbar .nav-item a {
  display: block;
  padding: 12px 16px;
  color: #1b1117;
  font-weight: 500;
  text-decoration: none;
}

.right-sidbar .nav-item a:hover,
.right-sidbar .active a,
aside .nav-item .active {
  color: #0c368a;
  background-color: #f8f9fa;
}

/* Sidebar Close Button */
.right-sidbar .fa-xmark {
  font-size: 24px;
  padding: 10px;
  background: #0c368a;
  color: #fff;
  border-radius: 37%;
  cursor: pointer;
  border: none;
}

aside .fa-xmark:hover {
  color: #200D46;
}

/* ========== ASIDE DROPDOWN ========== */
#slid-btn {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
}

#slid-drop {
  display: none;
  padding-left: 20px;
}

#slid-drop li,
aside li {
  padding: 12px 0px;
}

.aside-dropdwon {
  display: block !important;
}

aside .fa-caret-down {
  color: #0c368a;
  font-size: 18px;
  padding-bottom: 5px;
}

.page-btn {
  padding-bottom: 10px;
  background: transparent;
  border: none;
  color: #1b1117;
  font-weight: 500;
  font-size: 16px;
}

/* ========== TOGGLE BUTTON ========== */
.open-aside {
  display: none;
  background-color: transparent;
  border: none;
  font-size: 28px;
  color: #0c368a;
  cursor: pointer;
  z-index: 10001;
  padding: 0 2px;
  font-weight: 400;
}

.open-aside:hover {
  color: #E41C1F;
}

/* ========== RESPONSIVE HEADER/NAV ========== */
@media (max-width: 991.98px) {
  .navbar-collapse {
    display: none !important;
  }

  .open-aside {
    display: block !important;
  }
}

/* news update */

.blog-section {
  padding-bottom: 146px;
}

.blog-section .section-title p {
  max-width: 550px
}

.blog-section .blog-posts .blog-post.without-thumb:hover .blog-thumbnail:before {
  display: none
}

.blog-section .blog-posts .blog-post .blog-thumbnail {
  position: relative;
  margin-bottom: 20px
}

.blog-section .blog-posts .blog-post .blog-thumbnail:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-in-out
}

.blog-section .blog-posts .blog-post .blog-thumbnail>a img,
.blog-section .blog-posts .blog-post .blog-thumbnail>img {
  border-radius: 20px
}

.blog-section .blog-posts .blog-post .blog-thumbnail .category {
  position: absolute;
  bottom: -12px;
  left: 20px;
  padding: 0 20px;
  color: #f12828;
  font-size: 14.23px;
  height: 24px;
  line-height: 24px;
  background-color: #ffd31d;
  border-radius: 30px
}

.blog-section .blog-posts .blog-post:hover .blog-thumbnail:before {
  opacity: 1;
  visibility: visible
}

.blog-section .blog-posts .blog-post .blog-info {
  padding: 0 20px
}

.blog-section .blog-posts .blog-post .blog-info>h3 {
  color: #2b2b2b;
  font-size: 20.32px;
  font-weight: 500;
  margin-bottom: 4px
}

.blog-section .blog-posts .blog-post .blog-info>h3:hover {
  color: #1260a0
}

.blog-section .blog-posts .blog-post .blog-info p {
  margin-bottom: 13px
}

.blog-section .blog-posts .blog-post .blog-info .read-more {
  display: inline-block;
  color: #155799;
  font-size: 14.23px;
  font-weight: 600
  
}

.blog-section .blog-posts .blog-post .blog-info .read-more i {
  padding-left: 3px
}

.read-more {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid #0c368a; /* Adjust color */
  border-radius: 6px;         /* Optional: rounded corners */
  color: #0c368a;             /* Text color */
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.read-more:hover {
  background-color: #0c368a;
  color: #fff !important;
}

/* end news update */


/* ========= End of 1.1. Header section ======== */
/* ========= 1.2. Hero section ======== */

.Hero {
  padding: 85px 0px 55px;
  /* background: #F4F0FC; */
  width: 95%;
  margin: auto;
  border-radius: 40px;
}

.Hero .text-center h1 {
  color: #200D46;
}

.Hero .text-center p {
  padding: 15px 200px 20px;
  color: #565656;
}

.Hero .text-center .hover1 {
  width: 200px;
}

.Hero h2 {
  color: #E41C1F;
}

.Hero .gap-2 p {
  color: #181818;
  font-size: 14px;
  width: min-content;
  min-width: 100%;
  text-align: center;
}

.Hero hr {
  width: 174.48px;
  margin: 30px 0px 20px;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #C2C2C2;
  opacity: 1;
}

.Hero .m-0 {
  position: relative;
  z-index: 2;
}

.Hero .m-0::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 4.5%;
  width: 95%;
  height: 75%;
  background: #703EDB;
  border-radius: 50%;
  z-index: -1;
}

.Hero img[alt="plane"] {
  width: 220px;
  top: -16px;
  left: 1%;
}

.Hero img[alt="pencils"] {
  bottom: 0px;
  left: 1%;
  width: 107px;
}

.Hero .p-0 {
  position: absolute;
  background: url("../images/icon/dotted_Circle.svg");
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
  bottom: -4%;
  left: 4.5%;
  width: 82px;
  height: 82px;
}

.Hero img[alt="bulb"] {
  width: 124px;
  top: 20%;
  right: 15%;
}

.Hero .p-0.z-1 {
  left: unset;
  border: unset;
  right: 22%;
  top: 31%;
}

.Hero img[alt="Baloon"] {
  top: -16px;
  right: 1%;
  width: 50px;
}

.Hero .mx-0 {
  /* background: #1F0B45; */
  background: #0c368a;
  border-radius: 40px;
  padding: 30px 35px 30px 45px;
  margin: 70px 0px 0px;
}

.Hero .mx-0 h6,
.Hero .mx-0 h5,
.Hero .mx-0 p {
  color: #ffffff;
}

.Hero .align-items-sm-start {
  border: 1px solid #FFFFFF26;
  padding: 20px 20px 20px 25px;
  border-radius: 20px;
  transition: 0.3s ease all;
}

.Hero .align-items-sm-start:hover {
  background: #fab013;
}

.Hero .align-items-sm-start h6 {
  font-size: 18px;
  padding: 8px 0px;
}

.Hero .align-items-sm-start p {
  font-size: 14px;
  flex-grow: 1;
}

.Hero .gap-lg-2 {
  width: 36%;
}

.Hero .gap-lg-2 p {
  padding: 10px 50px 0px 0px;
}

.Hero .flex-sm-row img {
  width: 52px;
  height: 66px;
}

/* ========= End of 1.2. Hero section ======== */
/* ========= 1.3. About section ======== */

.About {
  padding: 150px 0px 100px;
}

.About .col-lg-4 h2 {
  color: #1F0B45;
}

.About .col-lg-4 p {
  color: #565656;
  padding: 15px 16px 25px 0px;
}

.About img[alt="About_Img"] {
  border-radius: 40px;
  /* border: 4px solid #E33D5C; */
  border: 4px solid #0c368a;
  object-fit: cover;
}

.About .ms-1 {
  margin: 150px 0px 0px;
}

.About .gap-lg-3 h6 {
  font-size: 18px;
  color: #1F0B45;
}

.About .gap-lg-3 p {
  font-size: 14px;
  color: #000;
  padding: 5px 0px 0px;
}

.About .gap-lg-3 figure {
  background: #200D46;
  padding: 20px;
  width: 75px;
  height: 75px;
}

.About .gap-lg-3 figure img {
  width: 36px;
  height: 36px;
}

.About .col-lg-8 .position-relative {
  margin: 0px 0px 0px 30px;
  gap: 16px;
}

.About .position-absolute {
  bottom: -50px;
  right: 0px;
  width: 88%;
  /* background-color: #E33D5C; */
  background-color: #0c368a ;
  border-radius: 50px;
  padding: 56px 31px;
  color: #FFFFFF;
  z-index: -1;
}

.About .position-absolute p {
  width: 37%;
  float: right;
}

.About img[alt="kite"] {
  position: absolute;
  bottom: -170px;
  width: 324px;
  left: 5%;
}

.About img[alt="baloon"] {
  position: absolute;
  right: 0px;
  top: -116px;
  width: 332px;
}

.About .mb-lg-5 p {
  width: 61%;
  color: #565656;
}
.value-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem;
  transition: transform 0.3s;
  text-align: center;
  background-color: #fff;
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-icon i {
  font-size: 24px;
}

.value-underline {
  height: 3px;
  width: 30px;
  margin-top: 10px;
  border-radius: 2px;
}

@media (min-width: 1200px) {
  .custom-col-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}


/* ========= End of 1.3. About section ======== */
/* ========= 1.4. Programs section ======== */


.card-hover-effect:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 10px rgba(0,0,0,0.12) !important;
}
.divider-line {
  position: relative;
}
.divider-line:after {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid #4cc9f0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.Programs {
  padding: 100px 0px;
  background: #ffffff;
}

.Programs .flex-column h5 {
  color: #1F0B45;
  padding: 23px 0px 10px;
}

.Programs .flex-column p {
  color: #565656;
  font-size: 14px;
}

.Programs .flex-column {
  /* border: 1px solid #E33D5C; */
  border: 1px solid #d4502a;
  /* border: 1px solid #dee2e6; */
  padding: 40px 34px;
  border-radius: 40px;
  background-color: #FFFFFF;
}

.Programs .flex-column figure {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background-color: #F4F0FC;
  transition: 0.3s ease all;
}

.Programs .flex-column:hover {
  border: 1px solid #62166c;
  /* border: 1px solid #E41C1F;
   */
}

.Programs .flex-column:hover figure {
  background-color: #62166c;
  /* background-color: #E41C1F; */
  transform: translateY(-10%);
}

.Programs .flex-column img {
  width: 70px;
  height: 70px;
  transition: 0.3s ease all;
}

.Programs .flex-column:hover img {
  filter: grayscale(100%) brightness(300%);
}

.Programs .text-md-start h2 {
  padding: 0px 236px 0px 0px;
  color: #1F0B45;
}

.Programs .text-md-start p {
  color: #565656;
  padding: 16px 141px 24px 0px;
  flex-grow: 1;
}

.Programs .text-md-start {
  padding: 0px 25px 0px;
}

.Programs .position-relative {
  z-index: 2;
}

.Programs .position-absolute {
  width: 60%;
  height: 20%;
  background-color: #C9BCDD;
  bottom: -16px;
  filter: blur(30px);
  z-index: -1;
  left: 20%;
}

.Programs.px-0 .flex-column p {
  width: 80%;
  margin: auto;
}

.Programs.px-0 .mx-auto p {
  padding: 15px 0px 40px;
  width: 50%;
}
/*  time line  */
/* Advanced Timeline Styles */
/* Timeline Section */
.Timeline {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  overflow: hidden;
}

.timeline-wrapper {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.timeline {
  position: relative;
  padding: 50px 0;
}

/* Timeline Line */
.timeline::before {
  content: '';
  position: absolute;
  width: 4px;
  background: linear-gradient(to bottom, 
    rgba(74, 107, 255, 0.2), 
    rgba(74, 107, 255, 0.8), 
    rgba(255, 107, 107, 0.8), 
    rgba(255, 107, 107, 0.2));
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(74, 107, 255, 0.3);
}

/* Timeline Items */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 0;
  margin-bottom: 30px;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.timeline-item.show {
  opacity: 1;
  transform: scale(1);
}

/* Alternate item positioning */
.timeline-item:nth-child(odd) {
  left: 0;
  padding-right: 50px;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  padding-left: 50px;
  text-align: left;
}

/* Timeline Content */
.timeline-content {
  position: relative;
  padding: 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

.timeline-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #4a6bff, #ff6b6b);
  transition: all 0.4s ease;
}

.timeline-item:nth-child(odd) .timeline-content::before {
  right: 0;
  left: auto;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

/* Year Badge */
.timeline-year {
  position: absolute;
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9),
              0 3px 15px rgba(0, 0, 0, 0.1);
  z-index: 1;
  transition: all 0.4s ease;
}

.timeline-item:nth-child(odd) .timeline-year {
  right: -35px;
  top: 30px;
}

.timeline-item:nth-child(even) .timeline-year {
  left: -35px;
  top: 30px;
}

.timeline-year i {
  font-size: 22px;
  margin-bottom: 3px;
}

/* Timeline Body */
.timeline-body {
  position: relative;
  z-index: 2;
}

.timeline-title {
  color: #2d3436;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.timeline-desc {
  color: #636e72;
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Timeline Images */
.timeline-image-container {
  /* position: relative; */
  border-radius: 8px;
  overflow: hidden;
  margin: 15px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

.timeline-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: all 0.5s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: multiply;
}

.timeline-image-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.timeline-image-container:hover .timeline-image {
  transform: scale(1.03);
}

.timeline-image-container:hover .image-overlay {
  opacity: 0.15;
}

/* Progress Bar */
.timeline-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  transition: width 1.2s ease 0.3s;
}

.timeline-item.show .timeline-progress {
  width: 100%;
}

/* Pulsing Dot */
.timeline::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a6bff;
  box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.2),
              0 0 15px rgba(74, 107, 255, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 107, 255, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(74, 107, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 107, 255, 0); }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .timeline-year {
    width: 60px;
    height: 60px;
    font-size: 14px;
  }
  
  .timeline-year i {
    font-size: 20px;
  }
  
  .timeline-item:nth-child(odd) .timeline-year {
    right: -30px;
  }
  
  .timeline-item:nth-child(even) .timeline-year {
    left: -30px;
  }
}

@media (max-width: 768px) {
  .timeline::before {
    left: 30px;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 20px;
    text-align: left !important;
  }
  
  .timeline-item:nth-child(even) {
    left: 0;
  }
  
  .timeline-year {
    width: 50px;
    height: 50px;
    font-size: 12px;
    left: 10px !important;
    right: auto !important;
    top: 25px !important;
  }
  
  .timeline-year i {
    font-size: 18px;
    margin-bottom: 2px;
  }
  
  .timeline-content {
    padding: 20px !important;
  }
  
  .timeline-title {
    font-size: 18px;
  }
  
  .timeline-image {
    height: 150px;
  }
}

@media (max-width: 576px) {
  .timeline::before {
    left: 20px;
    width: 3px;
  }
  
  .timeline-item {
    padding-left: 50px;
  }
  
  .timeline-year {
    width: 40px;
    height: 40px;
    left: 5px !important;
  }
  
  .timeline-image {
    height: 120px;
  }
  
  .timeline-content::before {
    width: 3px;
  }
}

.mission-vision-container {
  max-width: 800px;
  margin: 0 auto;
}
.mission-vision-card {
  background: white;
  border-left: 4px solid;
  transition: all 0.3s ease;
}
.mission-vision-card:first-child {
  border-color: #4361ee;
}
.mission-vision-card:last-child {
  border-color: #4cc9f0;
}
.mission-vision-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
.icon-container {
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.content-wrapper {
  flex: 1;
}
@media (max-width: 768px) {
  .mission-vision-card {
    flex-direction: column;
    gap: 1.5rem;
  }
  .icon-container {
    margin-bottom: 1rem;
  }
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(to right, #4a6bff, #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Enhance timeline item spacing */
  /* .timeline-item {
    margin-bottom: 40px;
  }

  .timeline-item:last-child {
    margin-bottom: 0;
  } */

/* innovates */


/* Core Values Section */
.CoreValues {
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  position: relative;
  overflow: hidden;
}

.value-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 40px 30px !important;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.value-icon {
  transition: all 0.4s ease;
  margin-bottom: 25px !important;
}

.value-card:hover .value-icon {
  transform: scale(1.1) rotate(5deg);
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.value-card h4 {
  color: #2d3436;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.value-card p {
  color: #636e72;
  line-height: 1.6;
}

.value-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.value-card:hover .value-underline {
  width: 80px;
}

/* Gradient background effect on hover */
.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 107, 255, 0.03), rgba(255, 107, 107, 0.03));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.value-card:hover::before {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .value-card {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ========= End of 1.4. Programs section ======== */
/* our leadership */
/* Leadership/Teachers Section */
.Leadership.Teachers {
  position: relative;
  overflow: hidden;
}

.Leadership.Teachers h2 {
  position: relative;
  display: inline-block;
}

.Leadership.Teachers h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, #4a6bff, #ff6b6b);
  border-radius: 3px;
}

.leader-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
  z-index: 1;
}

.leader-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 107, 255, 0.05), rgba(255, 107, 107, 0.05));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.leader-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.leader-card:hover::before {
  opacity: 1;
}

.leader-image {
  position: relative;
  display: inline-block;
  transition: all 0.4s ease;
}

.leader-image img {
  transition: all 0.4s ease;
  border: 5px solid white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.leader-card:hover .leader-image img {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.leader-image::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 2px dashed #4a6bff;
  opacity: 0;
  transition: all 0.4s ease;
  animation: spin 15s linear infinite;
}

.leader-card:hover .leader-image::after {
  opacity: 0.6;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.leader-card h4 {
  color: #2d3436;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.leader-card h4::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #4a6bff, #ff6b6b);
  transition: width 0.3s ease;
}

.leader-card:hover h4 {
  color: #4a6bff;
}

.leader-card:hover h4::after {
  width: 60px;
}

.leader-card .text-primary {
  transition: all 0.3s ease;
}

.leader-card:hover .text-primary {
  color: #ff6b6b !important;
  transform: scale(1.05);
  margin-top: 4px;
  display: inline-block;
}

.leader-card p:last-child {
  position: relative;
}

.leader-card p:last-child::before {
  content: '“';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  color: rgba(74, 107, 255, 0.1);
  font-family: serif;
  line-height: 1;
  transition: all 0.3s ease;
}

.leader-card:hover p:last-child::before {
  color: rgba(74, 107, 255, 0.2);
  transform: translateX(-50%) scale(1.1);
}

/* Social hover effect (if you add social links later) */
.leader-social {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  opacity: 0;
  transition: all 0.3s ease;
}

.leader-card:hover .leader-social {
  bottom: 20px;
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .leader-card {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ========= 1.5. Courses section ======== */

.Courses {
  padding: 40px 10px;
  /* background: url("../images/bg/Courses_bg.webp"); */
  background-repeat: no-repeat;
  background-size: cover;
}

.Courses_Choice_bg {
  /* background: linear-gradient(to bottom, #ffffff 10%, #0c368a  10%); */
  background: #ffffff;
}

.Courses .mx-auto h1 {
  color: #1F0B45;
}

.Courses .mx-auto p {
  color: #565656;
  padding: 10px 322px 60px;
}

.Courses .position-relative {
  border-radius: 20px;
  /* border: 1px solid #d4502a; */
  background-color: #FFFFFF;
  margin-bottom: 100px;
}

.Courses figure {
  margin: 7px 7px 0px 7px;
  overflow: hidden;
  /* border-top-left-radius: 40px; */
  /* border-top-right-radius: 40px; */
}

.Courses figure:hover img {
  scale: 1.1;
}

.Courses img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: 0.3s ease all;
}

/* .Courses .position-relative:hover {
  border: 1.3px solid #878487;
} */

.Courses .position-relative h4 {
  color: #1F0B45;
}

.Courses .position-relative p {
  color: #181818;
}

.Courses .position-relative .text-center {
  padding: 30px 64px;
}

.Courses .position-relative .text-center p {
  padding: 20px;
}

.Courses .position-absolute {
  width: 50%;
  height: 20%;
  background-color: #f8f8f8 !important;
  /* bottom: -24px; */
  filter: blur(1px);
  z-index: -1;
  /* left: 25%; */
}

.Courses .col-lg-4 {
  padding: 0px 12px;
}

.Courses .slick-dots li button:before {
  width: 12px;
  height: 12px;
  color: #d4502a;
}

.Courses .slick-dots li.slick-active button:before {
  border: none;
  color: #0c368a ;
}

.Courses .slick-dots {
  position: relative;
  bottom: 25px;
}

.Classes_Courses {
  padding: 100px 0px;
  background: none;
}

.Classes_Courses .position-relative {
  margin-bottom: 65px;
}


/* ========= End of 1.5. Courses section ======== */
/* ========= 1.6. Choice section ======== */

.Choice {
  padding: 150px 0px 100px;
}

.Choice .text-center {
  padding: 50px 60px;
  border: 3px solid #FFFFFF;
  background: #EAF035;
  border-radius: 60px;
}

.Choice .text-center h2 {
  color: #1F0B45;
}

.Choice .text-center h6 {
  color: #181818;
  font-size: 18px;
}

.Choice .w-100 img {
  border-radius: 40px;
  border: 3px solid #EAF035;
  object-fit: cover;
}

.Choice .text-md-start {
  padding: 80px 156px 60px 0px;
}

.Choice .text-md-start p {
  color: #ffffff;
  padding: 15px 0px 0px;
}

.Choice .text-md-start h2 {
  color: #ffffff;
}

.Choice .ps-lg-3 img {
  transition: 0.3s ease all;
}

.Choice .ps-lg-3 figure {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ffffff;
  transition: 0.3s ease all;
}

.Choice .ps-lg-3 .align-items-md-start:hover figure {
  /*  */
  background: #d4502a;
  transform: translateY(-10%);
}

.Choice .ps-lg-3 .align-items-md-start:hover figure img {
  filter: brightness(0) invert(1);
}

.Choice .ps-lg-3 .flex-column p {
  color: #FFFFFF;
  font-size: 14px;
  width: 67%;
}

.Choice .ps-lg-3 h6 {
  font-size: 18px;
  color: #FFFFFF;
  padding: 17px 0px 7px;
}

.Choice .ps-lg-3 figure img {
  width: 60px;
  height: 60px;
}

.Choice .gap-lg-3 {
  padding: 65px 0px 0px;
}

.Choice .hover1 {
  width: 200px;
}

.Choice .hover1:hover {
  /*   */
  border: 1px solid #EAF035A6;
}

.Choice .hover2 {
  border: 1.3px solid #EAF035A6;
  color: #ffffff;
}

.Choice .hover2:hover {
  color: #000;
}

.Choice .hover2::before,
.Choice .hover2::after {
  background-color: #EAF035;
}

.Choice img[alt="magicWand"] {
  border: none;
  width: 13%;
  left: 21%;
  top: -20%;
}

.Choice img[alt="kite"] {
  filter: invert(100%);
  top: -15%;
  right: 20%;
  width: 51%;
}

/* ========= End of 1.6. Choice section ======== */
/* ========= 1.7. Learning section ======== */

.Learning {
  padding: 100px 0px;
}

.Learning h1 {
  color: #1F0B45;
}

.Learning h6 {
  color: #200D46;
}

.Learning p {
  color: #565656;
}

.Learning .hover1 {
  width: 200px;
}

.Learning .text-md-start p {
  padding: 15px 40px 45px 0px;
}

.Learning .gap-lg-3 figure {
  width: 75px;
  height: 75px;
  background-color: #EAF035;
  transition: 0.3s ease all;
}

.Learning .gap-lg-3:hover figure {
  background: #62166c;
  transform: translateY(-10%);
}

.Learning .gap-lg-3:hover img {
  filter: brightness(0) invert(1);
}

.Learning .gap-lg-3 img {
  width: 40px;
  height: 40px;
}

.Learning .gap-lg-3 p {
  font-size: 14px;
  width: 65%;
}

.Learning .position-relative figure {
  width: fit-content;
}

.Learning img[alt="plane"] {
  width: 139px;
  left: 0px;
  bottom: 6%;
}

.Learning img[alt="turtle"] {
  width: 70px;
  left: 20%;
  top: 9%;
}

.Learning img[alt="magicWand"] {
  width: 50px;
  left: 40%;
  bottom: -10%;
}

/* ========= End of 1.7. Learning section ======== */
/* ========= 1.8. Teachers section ======== */

.Teachers {
  padding: 75px 0px 100px;
}

.Teachers .container {
  position: relative;
}

.Teachers h2 {
  color: #1F0B45;
}

.Teachers .mx-auto p {
  color: #6C6C6C;
  padding: 15px 330px 70px;
}

.Teachers hr {
  position: absolute;
  width: 100%;
  margin: 0px;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #C2C2C2;
  opacity: 1;
  top: -75px;
  left: 0px;
}

.Teachers .position-relative figure {
  width: 100%;
  border-radius: 50%;
  display: flex;
  transition: transform 0.6s ease;
  overflow: hidden;
  margin: 0;
  object-fit: cover;
  object-position: top;
}

.Teachers .position-relative img {
  width: 100%;
  transition: all 0.6s ease;
  transform-origin: top;
}

.Teachers .position-relative:hover img {
  transform: scale(1.2);
}

.Teachers .position-absolute {
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  display: none;
  transition: all 0.6s ease;
}

.Teachers .position-relative:hover .position-absolute {
  opacity: 1;
  display: flex;
  /* background: #E33D5CC7; */
  background: #0457f2b3;
}

.Teachers .position-absolute h3 {
  color: #ffffff;
  margin: 80px 0px 0px;
}

.Teachers .position-absolute p {
  color: #ffffff;
  padding: 15px 0px 30px;
}

.Teachers .position-absolute i {
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  display: flex;
  color: #ffffff;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  font-size: 12px;
  transition: 0.3s ease all;
}

.Teachers .position-absolute i:hover {
  color: #EAF035;
  border: 1px solid #EAF035;
}

.Teachers .hover1 {
  width: 200px;
  margin: 70px 0px 0px;
}

.Teachers.px-0 {
  padding: 100px 0px;
}

/* ========= End of 1.8. Teachers section ======== */
/* ========= 1.9. Testimonial section ======== */

.Testimonial {
  padding: 150px 0px;
  /* background: url("../images/bg/testimional_bg.webp"); */
  background-repeat: no-repeat;
  background-size: cover;
}

.Testimonial h2 {
  color: #1F0B45;
  padding: 0px 0px 50px;
}

.Testimonial p {
  color: #565656;
  padding: 22px 341px 28px;
}

.Testimonial .rounded-circle {
  width: 150px;
}

.Testimonial .Testimonial_Slider {
  z-index: 2;
}

.Testimonial h5 {
  color: #f35c24;
  padding: 10px 0px 5px;
}

.Testimonial .fa-star {
  color: #F5B83D;
}

.Testimonial .flex-column .d-flex p {
  color: #000000;
}

.Testimonial img[alt="quotation_Marks"] {
  left: 0px;
  bottom: 0px;
  width: 278px;
}

.Testimonial img[alt="ball"] {
  left: 0px;
  top: 0px;
  width: 70px;
}

.Testimonial img[alt="testimional_kite"] {
  right: 0px;
  bottom: 0px;
  width: 134px;
}

.Testimonial .slick-prev:before {
  content: "\f053";
}

.Testimonial .slick-next:before {
  content: "\f054";
}

.Testimonial .slick-next:before,
.Testimonial .slick-prev:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  background-color: #0c368a ;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  transition: all 0.3s ease;
  font-size: 16px;
}

.Testimonial .slick-next:hover:before,
.Testimonial .slick-prev:hover:before {
  background-color: #d4502a;
}

/* ========= End of 1.9. Testimonial section ======== */
/* ========= 1.10. Moments section ======== */

.Moments {
  padding: 100px 0px;
}

.Moments h1,
.Moments h6,
.Moments p {
  color: #ffffff;
}

.Moments p {
  padding: 15px 330px 60px;
}

.Moments img {
  box-shadow: 0px 4px 15px 0px #6676FF1A;
  border-radius: 40px;
}

.Moments .position-absolute {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(227, 61, 92, 0) 39.3%, rgba(227, 61, 202, 80%) 94.04%);
  border-radius: 40px;
  color: white;
  transition: 0.3s ease all;
}

.Moments .position-absolute h6 {
  font-size: 18px;
  padding: 0px 15px 30px;
}

.Moments .position-relative:hover .position-absolute {
  opacity: 1;
}

.Moments .hover4 {
  margin: 60px 0px 0px;
  width: 32%;
}

.Moments.px-0 {
  padding: 100px 0ex;
}

.Moments.px-0 p {
  color: #181818;
}

.Moments.px-0 h2 {
  color: #200D46;
}


/* ========= End of 1.10. Moments section ======== */
/* ========= 1.11. ChooseUs section ======== */

.ChooseUs {
  padding: 100px 0px;
}

.ChooseUs img[alt="chooseUs"] {
  border-radius: 40px;
  border: 4px solid #f35c24;
}

.ChooseUs .text-md-start h2 {
  color: #1F0B45;
  width: 70%;
}

.ChooseUs .text-md-start p {
  color: #565656;
  padding: 15px 147px 35px 0px;
}

.ChooseUs h6 {
  color: #200D46;
}

.ChooseUs .rounded-circle {
  background-color: #0c368a ;
  width: 75px;
  height: 75px;
  transition: 0.3s ease all;
}

.ChooseUs .gap-lg-3:hover .rounded-circle {
  background-color: #d4502a;
  transform: translateY(-10%);
}

.ChooseUs .rounded-circle img {
  width: 40px;
}

.ChooseUs .gap-lg-3 p {
  font-size: 14px;
  color: #565656;
}

.ChooseUs hr {
  position: absolute;
  width: 91%;
  margin: auto;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #C2C2C2;
  opacity: 1;
  top: -100px;
  left: 4%;
}

/* ========= End of 1.11. ChooseUs section ======== */
/* ========= 1.12. Enroll section ======== */

.Enroll {
  padding: 100px 0px 250px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
    url("../images/banner5.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.Enroll h1 {
  color: #FFFFFF;
  padding: 0px 233px;
}

.Enroll p {
  color: #FFFFFF;
  padding: 15px 191px 20px;
}

.Enroll .hover1 {
  width: 200px;
}

.Enroll .hover1:hover {
  color: #0c368a ;
}

/* ========= End of 1.12. Enroll section ======== */
/* ========= 1.13. FAQ section ======== */

.FAQ {
  padding: 60px 0px;
  background-color: #659d43;
  border-radius: 60px;
  max-width: 1400px;
  margin: auto;
  position: relative;
  top: -130px;
  width: 95%;
}

.FAQ .m-0 {
  position: relative;
  z-index: 2;
}

.FAQ .m-0::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 86%;
  background: #ffc107;
  border-radius: 50%;
  z-index: -1;
}

.FAQ .position-relative {
  margin: 80px 0px 0px;
}

.FAQ .position-absolute {
  top: -120px;
  right: -65px;
  width: 196px;
}

.FAQ h1 {
  color: #FFFFFF;
  padding: 0px 35px 20px;
}

.FAQ .accordion-header:focus {
  background-color: transparent;
}

.FAQ .accordion,
.FAQ .accordion-item,
.FAQ .accordion-header {
  background-color: transparent;
  border-radius: 10px;
}

.FAQ .accordion-body {
  padding: 20px 137px 10px 55px;
}

.FAQ .accordion-item {
  border: none;
  margin: 15px 0px 0px;
}

.FAQ .accordion p {
  color: #ffffff;
}

.FAQ .accordion-button {
  color: #1B1117;
  font-family: "Maven Pro", sans-serif;
  font-size: 18px;
  font-weight: 700;
  justify-content: space-between;
  background-color: transparent;
  border-radius: 60px;
  gap: 10px;
  background-color: #FFFFFF;
  border: none;
  padding: 22px 30px 22px 35px;
}

.FAQ .accordion-button:active,
.FAQ .accordion-button:focus {
  box-shadow: none;
  outline: none;
}

.FAQ .accordion-item:last-of-type .accordion-button,
.FAQ .accordion-item:first-of-type .accordion-button {
  border-radius: 60px;
}

.FAQ .accordion-button:not(.collapsed) {
  border-radius: 60px;
  color: #171626;
  padding: 22px 30px 22px 35px;
  box-shadow: 0px 35px 58px 0px #0000001A;
}

.FAQ .accordion-button:not(.collapsed)::after {
  background-image: url("../images/icon/Accordian_Minus.svg");
  background-position: -100%;
}

.FAQ .accordion-button::after {
  background-image: url("../images/icon/Accordian_Plus.svg");
}

.FAQ.z-2 {
  margin: 100px auto;
  position: static !important;
  border-radius: 80px;
}

/* ========= End of 1.13. FAQs section ======== */
/* ========= 1.14. Newsletter section ======== */

.Newsletter {
  padding: 0px 0px 100px;
}

.Newsletter h2 {
  color: #200D46;
  width: 84%;
}

.Newsletter p {
  color: #565656;
  padding: 10px 103px 35px 0px;
}

.Newsletter .flex-column {
  padding: 0px 0px 0px 60px;
}

.Newsletter form {
  width: 90%;
}

.Newsletter form {
  border: 1px solid #d4502a;
  position: relative;
  width: 100%;
  border-radius: 60px;
}

.Newsletter input {
  padding: 20px 30px;
  width: 100%;
  color: #565656;
  font-size: 16px;
  border: none;
  border-radius: 60px;
}

.Newsletter .hover1 {
  padding: 20px 30px;
  border-radius: 60px;
  position: absolute;
  right: -1px;
  top: -1px;
  width: 146px;
}

.Newsletter .hover1:hover {
  background-color: #ffffff;
}

/* ========= End of 1.14. Newsletter section ======== */
/* ========= 1.15. footer section ======== */


.tsk{
  background-color: #686769;
}





footer {
  padding: 80px 0px 0px;
  /* background: url("../images/bg/footer_bg.webp"); */
  /* background: url("../images/bg/footer_bg_new.png"); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 100;
}

footer img {
  width: 151px;
}

footer ul {
  padding: 20px 0px 0px;
  gap: 30px;
}

footer h6,
footer p,
footer ul a {
  color: #ffffff;
}

footer ul a:hover {
  color: #EAF035;
}

footer hr {
  width: 100%;
  margin: 30px 0px;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #FFFFFF;
  opacity: 1;
}

footer .gap-lg-3 hr {
  width: 1px;
  height: 25px;
  margin: 0px;
}

footer .flex-md-row {
  padding: 60px 0px 0px;
}

footer .flex-md-row i {
  color: #ffffff;
  font-size: 20px;
  height: 47px;
  width: 47px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
}

footer .flex-md-row .gap-lg-4:hover i {
  background-color: #EAF035;
  border: 1px solid #EAF035;
  color: #000;
}

footer .flex-md-row .gap-lg-4:hover p,
footer .flex-md-row .gap-lg-4:hover h6 {
  color: #EAF035;
}

footer .flex-md-row p {
  font-size: 14px;
}

footer .flex-md-row hr {
  width: 1px;
  height: 85px;
  margin: 0px 60px;
}

footer .w-100 p {
  font-size: 14px;
  padding: 15px 0px;
}


/* ========= End of 1.15. footer section ======== */
/* ========= 2.1. Subpage_Hero section ======== */

.Subpage_Hero {
  padding: 100px 0px;
  position: relative;
}

.Subpage_Hero::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(90deg, #1F0B45 0%, rgba(31, 11, 69, 0.3) 100%), url("../images/bg/subpage_hero_bg.webp"); */
  background: linear-gradient(20deg, #1F0B45 0%, rgba(31, 11, 69, 0.3) 45%), url("../images/bg/subpage_hero_bg.webp");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.Subpage_Hero h1,
.Subpage_Hero p {
  color: #ffffff;
}

.Subpage_Hero p {
  padding: 20px 0px 0px;
  width: 44%;
}

/* ========= End of 2.1. Subpage_Hero section ======== */
/* ========= 2.2. Stats section ======== */

.Stats h5 {
  padding: 0px 0px 45px;
  color: #200D46;
}

.Stats h2 {
  color: #E41C1F;
}

.Stats p {
  color: #565656;
  font-size: 14px;
  padding: 5px 0px 0px;
  width: 80%;
}

.Stats hr {
  width: 1px;
  height: 128px;
  margin: 0px 50px;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #C2C2C2;
  opacity: 1;
}

/* ========= End of 2.2. Stats section ======== */
/* ========= 2.3. Mission section ======== */

.Mission {
  padding: 100px 0px;
}

.Mission img {
  border: 4px solid #E41C1F;
  border-radius: 40px;
  object-fit: cover;
}

.Mission h3 {
  color: #1F0B45;
}

.Mission p {
  color: #565656;
  padding: 16px 0px 0px;
}

.Mission .text-center {
  padding: 40px 85px 30px;
  border: 1px solid #E41C1F;
  border-radius: 40px;
}

/* ========= End of 2.3. Mission section ======== */
/* ========= 3.1. Contact section ======== */
.Contact {
  margin: 100px auto 360px;
  padding: 60px 0px;
  box-shadow: 0px 25px 40px 0px #0000001A;
  border-radius: 40px;
  max-width: 1400px;
  width: 95%;
  background-color: #ffffff;
  position: relative;
  z-index: 100;
}

.Contact p {
  color: #565656;
  padding: 25px 150px 30px 0px;
}

.Contact h3 {
  color: #200D46;
}

.Contact form .w-100,
.Contact form {
  gap: 20px;
}

.Contact textarea::placeholder,
.Contact input::placeholder {
  color: #565656;
}

.Contact input[type="number"]::-webkit-outer-spin-button,
.Contact input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.Contact textarea:focus {
  outline: none;
}

.Contact textarea,
.Contact input {
  border: 1px solid #0c368a ;
  border-radius: 40px;
  padding: 20px;
  width: 100%;
  color: #565656;
}

.Contact .hover1 {
  border-radius: 40px;
  padding: 20px;
  margin: 10px 0px 0px;
}

.Contact hr {
  width: 1px;
  height: 100%;
  margin: 0px 50px;
  border-right: var(--bs-border-width) solid;
  border: 1px solid #C2C2C2;
  opacity: 1;
}

.Contact .flex-column p {
  padding: 25px 45px 30px 0px;
}

.Contact .flex-column i {
  color: #0c368a ;
  width: 65px;
  height: 65px;
  border: 1px solid #200D46;
  border-radius: 50%;
  font-size: 28px;
}

.Contact .flex-column a:hover i {
  border: 1px solid #0c368a ;
  background-color: #0c368a ;
  color: #ffffff;
}

.Contact .flex-column a:hover p {
  color: #0c368a ;
}

.Contact .gap-lg-4 p {
  width: 65%;
}

.Contact .mt-lg-5 {
  padding: 20px 0px 0px;
}

.Contact .mt-lg-4 {
  gap: 35px;
}

.Contact .mt-lg-4 i {
  color: #200D46;
}

/* ========= End of 3.1. Contact section ======== */
/* ========= 3.2. Map section ======== */

.Map {
  position: relative;
}

.Map iframe {
  position: absolute;
  z-index: 1;
  top: -480px;
}

/* ========= End of 3.2. Map section ======== */
/* ========= 4.1. Testimonial section ======== */
.Reviews {
  padding: 120px 0px 100px;
}

.Reviews .row {
  gap: 70px 0px;
}

.Reviews img {
  width: 86px;
  border: 2px dashed #000000;
  padding: 2px;
}

.Reviews p {
  color: #000000;
}

.Reviews h6 {
  color: #E41C1F;
}

.Reviews .fa-star {
  color: #F5B83D;
  font-size: 18px;
}

.Reviews .position-relative {
  padding: 70px 44px 25px;
  border: 1.3px solid #E41C1F;
  border-radius: 60px;
}

.Reviews .position-absolute {
  top: -13%;
}

.Reviews .flex-column .flex-column figure {
  padding: 20px 0px;
}


/* ========= End of 4.1. Testimonial section ======== */
/* ========= 7.1. Classes_Detail section ======== */

.Classes_Detail {
  padding: 100px 0px;
}

.Classes_Detail .row {
  margin: 60px 0px 0px;
}

.Classes_Detail img {
  border-radius: 100px;
}

.Classes_Detail h2 {
  color: #1F0B45;
  padding: 0px 0px 20px;
}

.Classes_Detail h5 {
  color: #000000;
}

.Classes_Detail p {
  color: #181818;
  padding: 10px 90px 30px 0px;
}

.Classes_Detail ul {
  padding: 10px 0px 30px;
}

.Classes_Detail ul li {
  font-family: "Roboto";
  color: #181818;
  position: relative;
  padding: 10px 20px 0px 20px;
}

.Classes_Detail ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 70%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: 0.5px solid #181818;
  border-radius: 50%;
  background-color: transparent;
}

.Classes_Detail .flex-column {
  border: 1px solid #E41C1F;
  border-radius: 40px;
  padding: 25px;
}

.Classes_Detail .flex-column h5 {
  color: #200D46;
  padding: 0px 0px 10px;
}

.Classes_Detail .flex-column p {
  padding: 0px;
}

.Classes_Detail .pt-1,
.Classes_Detail .pt-0 {
  font-size: 14px;
}

/* ========= End of 7.1. Classes_Detail section ======== */
/* ========= 11.1. ComingSoon section ======== */

.ComingSoon {
  padding: 100px 0px;
  position: relative;
}

.ComingSoon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(31, 11, 69, 0.9) 0%, rgba(31, 11, 69, 0.45) 100%),
    url("../images/ComingSoon/ComingSoon_img.webp") center no-repeat;
  background-size: cover;
  z-index: -1;
}

.ComingSoon p {
  color: #FFFFFF;
  width: 50%;
}

.ComingSoon h1 {
  color: #FFFFFF;
}

.ComingSoon h1 span {
  background: transparent;
  -webkit-text-stroke: 2px #FFFFFF;
  color: transparent;
  font-size: 130px;
  padding: 20px 0px 50px;
}

.ComingSoon .flex-column {
  padding: 200px 0px 0px;
}

.ComingSoon .flex-column figure {
  padding: 30px 0px 15px;
}

.ComingSoon .flex-column i {
  color: #ffffff;
  font-size: 17px;
}

.ComingSoon .flex-column i:hover {
  color: #E41C1F;
}

.ComingSoon .flex-column p:nth-child(1) {
  width: 26%;
}

.Error::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(31, 11, 69, 0.9) 0%, rgba(31, 11, 69, 0.45) 100%),
    url("../images/bg/error_img.webp")
}

.Error h1 {
  padding: 50px 0px 20px;
}

.Error h1 span {
  font-size: 250px;
  padding: 0px 0px 70px;
}

.Error .hover1 {
  margin: 50px 0px 0px;
}
.nav-link:hover {
  color: #EAF035 !important; /* Hex color for hover */
} 
/* ========= End of 11.1. ComingSoon section ======== */


.pv-lms-area {
  padding: 145px 0 130px;

  @media (min-width: 1000px) and (max-width: 1200px) {
    padding: 80px 0 40px;
  }

  .lms-brand-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;

    @media (min-width: 768px) and (max-width: 991px) {
      grid-template-columns: repeat(3, 1fr) !important;
    }

    @media (max-width: 767px) {
      grid-template-columns: repeat(2, 1fr) !important;
      place-items: center;
    }

    .lms-brand {
      width: 220px;
      height: 220px;
      border-radius: 120px;
      background: #fff;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: -22px ;

      @media (max-width: 1200px) {
        margin-left: 0;
        margin: 0 auto 30px;
      }

      @media (min-width: 768px) and (max-width: 991px) {
        width: 180px;
        height: 180px;
      }

      @media (max-width: 767px) {
        width: 160px;
        height: 160px;
        padding: ;
      }

      &.lms-brand-1,
      &.lms-brand-3,
      &.lms-brand-5 {
        margin-top: -30px;

        @media (max-width: 1200px) {
          margin-top: 0;
        }
      }
    }
  }
}

/* .pv-lms-area {
  padding: 145px 0 130px;
  @media(max-width:1200px) {
      padding: 80px 0 40px;
  }
  .lms-brand-wrap {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      position: relative;
      @media (max-width:1400px) {
          grid-template-columns: repeat(4, 1fr) !important;
       
      }
      @media (max-width:1200px) {
          grid-template-columns: repeat(6, 1fr) !important;
          width: 200px !important;
          height: 200px !important;
      }
      @media (max-width:991px) {
          grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width:575px) {
          grid-template-columns: repeat(1, 1fr);
          place-items: center;
      }
      .lms-brand {
          width: 240px;
          height: 240px;
          border-radius: 120px;
          background: #FFF;
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: -20px ;
          @media (max-width:1400px) {
              margin-left: 0;
              margin-bottom: 30px;
              transform: ;
              margin: 0 auto 30px;
          }
          &.lms-brand-1,
          &.lms-brand-3,
          &.lms-brand-5 {
              margin-top: -30px;
              @media (max-width:1400px) {
                  margin-top: 0;
              }
          }
      }
  }
}

.lms-brand img {
  transition: transform 0.3s ease;

}
.lms-brand img:hover{

    transform: scale(1.1);
  } 
  .lms-brand {
    transition: transform 0.3s ease;
    cursor: pointer;
  } */



/* core features */
/* Core Features Area Styles - Converted from SCSS to Bootstrap + CSS */

.pv-feature-area h2 {
  color: #141417;
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
}

@media (max-width: 991px) {
  .pv-feature-area h2 {
    text-align: center;
  }
  .pv-feature-area h2 br {
    display: none;
  }
}

.pv-feature-area .sub-title {
  margin-left: 170px;
  color: #808080;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 60px;
}

@media (max-width: 991px) {
  .pv-feature-area .sub-title {
    margin-left: 0;
    text-align: center;
  }
}

.pv-feature-area .description {
  color: #141417;
}

.feature-style-1 .inner .thumbnail {
  max-width: 410px;
  height: 290px;
  border-radius: 30px;
  padding: 40px;
  position: relative;
}

@media (max-width: 991px) {
  .feature-style-1 .inner .thumbnail {
    margin: 0 auto;
  }
}

.thumbnail-1 {
  background: #FAE2DD;
}

.thumbnail-1 .feature-img-2 {
  border-radius: 10px;
  position: absolute;
  right: 40px;
  bottom: 40px;
  animation: bounceSlide 2.5s infinite both;
}

.thumbnail-2 {
  background: #DBEDDD;
}

.thumbnail-2 .feature-img-1 {
  border-radius: 10px;
  position: absolute;
  left: 110px;
  top: 75px;
}

@media (max-width: 991px) {
  .thumbnail-2 .feature-img-1 {
    left: 60px;
  }
  .thumbnail-2 .feature-img-2 {
    right: 20px;
  }
  .thumbnail-2 .feature-img-3 {
    left: 20px;
  }
  .thumbnail-2 .feature-img-4 {
    right: 90px;
  }
}

.thumbnail-2 .feature-img-2,
.thumbnail-2 .feature-img-3 {
  border-radius: 10px;
  position: absolute;
  bottom: 40px;
}

.thumbnail-2 .feature-img-2 {
  right: 40px;
}

.thumbnail-2 .feature-img-3 {
  left: 40px;
  bottom: 60px;
}

.thumbnail-2 .feature-img-4 {
  position: absolute;
  right: 116px;
  bottom: 116px;
}

.thumbnail-3 {
  background: #F2EBCF;
}

.thumbnail-3 .title {
  color: #0D0D0D;
  font-family: 'Spartan', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
}

.thumbnail-3 .counterup-item {
  width: 90px;
  height: 70px;
  padding: 10px 10px;
  border-radius: 10px;
  display: inline-flex;
  background: #F9B81F;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.15);
  color: #0D0D0D;
  font-family: 'Spartan', sans-serif;
  font-size: 30px;
  font-weight: 700;
  position: relative;
  left: 73%;
  top: -30px;
}

.counterup-item .percent {
  font-size: 16px;
}

.content-counter {
  max-width: 300px;
  background: #ffffff;
  border-radius: 10px;
  padding: 30px 40px 15px;
  margin-top: -60px;
}

.single-progressbar {
  margin-bottom: 10px;
}

.single-progressbar .progress-title {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.progressbar {
  width: 100%;
  height: 7px;
  background: #D9D9D9;
  border-radius: 4px;
  position: relative;
  margin-top: 5px;
  margin-bottom: 25px;
}

.progressbar .proggress {
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1AB69D 0%, #31B978 100%);
  position: relative;
  z-index: 1;
}

.progressbar-two .proggress {
  background: #D9D9D9;
}

.percentCount {
  float: right;
  margin-top: -38px;
  font-size: 14px;
  font-weight: 600;
}

.feature-style-1 .content {
  text-align: center;
  padding: 30px 50px;
}

.feature-style-1 .content .title {
  font-size: 20px;
  font-weight: 700;
}

.feature-style-1 .content p {
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
}

@keyframes bounceSlide {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes round {
  from {
      transform: rotate(0deg) translateX(10px) rotate(0deg)
  }

  to {
      transform: rotate(360deg) translateX(10px) rotate(-360deg)
  }
}
.round {
  will-change: transform;
  transform: rotate(45deg) translateX(10px) translateZ(2000px) rotate(-45deg);
  animation: round 4s infinite linear;
}
.progressbar .proggress {
  transition: width 1.2s ease-in-out;
}
.percentCount {
  font-weight: bold;
  font-size: 14px;
  margin-top: -38px;
}


/* Olympiad & Super  and ESCP Protocol
  */

.icon-xl {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
.hover-lift:hover .icon-xl {
  transform: scale(1.1);
}
.hover-zoom {
  transition: transform 0.5s ease;
}
.hover-zoom:hover {
  transform: scale(1.05);
}
/*  Research and development  */
.text-gradient-primary {
  background: linear-gradient(90deg, #0d6efd, #00b4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}
.team-card {
  transition: all 0.3s ease;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
.hover-zoom-img {
  overflow: hidden;
}
.hover-zoom-img img {
  transition: transform 0.5s ease;
}
.hover-zoom-img:hover img {
  transform: scale(1.05);
}
.btn-hover-lift {
  transition: all 0.3s ease;
}
.btn-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
}


/* Olympiad & Super 30 */
.achievement-scroller {
  height: 80px;
  overflow: hidden;
  position: relative;
}
.scroller-content {
  position: absolute;
  width: 100%;
  animation: scroll 15s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  25% { transform: translateY(-30px); }
  50% { transform: translateY(-60px); }
  75% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}
.card {
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* Achievers Carousel Styles */
.achievers-carousel {
  padding: 10px 0;
}
.scroller-container {
  width: 100%;
  overflow-x: hidden;
}
.scroller-track {
  animation: scroll-horizontal 30s linear infinite;
  width: max-content;
}
.achiever-item {
  min-width: 100px;
  transition: transform 0.3s;
}
.achiever-item:hover {
  transform: translateY(-5px);
}
@keyframes scroll-horizontal {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* Research & Development */

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.hover-zoom-img {
  transition: transform 0.5s ease;
  overflow: hidden;
}

.hover-zoom-img:hover img {
  transform: scale(1.05);
}

.hover-scale {
  transition: all 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.03);
}

.btn-hover-lift {
  transition: all 0.3s ease;
}

.btn-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

.team-carousel .team-member {
  transition: all 0.3s ease;
  border-radius: 10px;
}

.team-carousel .team-member:hover {
  transform: translateY(-10px);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.1);
}

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

.max-w-800 {
  max-width: 800px;
}

/*  */
/* Parent Feedback Form */
/* Accordion arrow animation */
details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary .arrow {
  display: inline-block;
  transition: transform 0.2s;
}
details[open] summary .arrow {
  transform: rotate(90deg);
}

/* WhatsApp button hover effect */
.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
}

/* Contact icon containers */
.contact-icon {
  transition: all 0.3s ease;
}
.contact-icon:hover {
  background-color: rgba(13, 110, 253, 0.2) !important;
}


/* hover custome */
.custom-hover {
  background-color: #200D46;
  color: white;
  transition: background-color 0.3s ease;
}

.custom-hover:hover {
  background-color: #5e4ae3 !important;
  color: white;
}

/* event */
/* Add to your global CSS if not using Bootstrap 5 */
.object-fit-cover {
  object-fit: cover;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.z-1 {
  z-index: 1;
}

.hover-orange:hover {
  color: #f97316; /* Tailwind's orange-500 */
  transition: color 0.2s ease;
}