/* 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;
}

/* =====  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: 42px;
  line-height: 50px;
  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: 23px;
  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;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid #E33D5C;
  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: #e40470;
  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;
}

.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;
  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;
  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;
  font-weight: 700;
}

.hover3:hover {
  color: #E33D5C;
}

.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#EAF035;
  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;

  transition: all 0.3s;
}

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

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

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

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

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

/* 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 ======== */

.nav-logo img {
  width: 100%;
}

.navbar-collapse {
  justify-content: center;
}

.right-sidbar {
  width: 280px;
  position: fixed;
  height: 100vh;
  top: 0;
  left: -355px;
  overflow-x: hidden;
  transition: 0.5s;
  padding: 12px 10px 10px 5px;
  ;
  background: #ffffff;
  z-index: 999;
}

.open-aside {
  display: none;
  z-index: 2;
}

aside .fa-xmark {
  padding: 8px 13px;
  background-color: #E33D5C;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 22px;
}

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

.right-sidbar a:focus,
aside a {
  color: #1b1117;
}

#slid-drop {
  display: none;
}

#slid-btn {
  cursor: pointer;
}

aside li {
  padding: 12px;
}

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

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

.page-btn {
  padding: 0px 0px 10px;
  color: #1B1117;
  background-color: transparent;
  border: none;
}

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

.navbar ul li a i {
  color: #E33D5C;
}

.dropdown ul .active {
  background: none;
}

.right-sidbar .nav-item a {
  color: #1b1117;
}

.right-sidbar .nav-item a:hover,
aside .nav-item .active,
.right-sidbar .active a,
.navbar ul .active,
.navbar ul li a:hover {
  color: #7c004d;
}

.dropdown ul {
  width: 200px;
}

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

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

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

.open-aside {
  padding: 0px 2px;
  background-color: #ffffff;
  border: none;
  font-size: 40px;
  font-weight: 400;
  color: #200D46;
}

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

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

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

.Hero {
  padding: 10px 0px 55px;
  background: #e7e7e7;
  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: #E33D5C;
}

.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: #1546b1;
  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: #7c004d;
  border-radius: 25px;
  padding: 30px 35px 30px 45px;
  margin: 45px 0px 0px;
}

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

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

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

.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: #000;
  padding: 15px 16px 25px 0px;
}

.About img[alt="About_Img"] {
  border-radius: 40px;
  border: 4px solid #E33D5C;
  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;
  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;
}

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

.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;
  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 #1546b1;
}

.Programs .flex-column:hover figure {
  background-color: #1546b1;
  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%;
}

/* ========= End of 1.4. Programs section ======== */
/* ========= 1.5. Courses section ======== */

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

.Courses_Choice_bg {
  background: linear-gradient(to bottom, #ffffff 10%, #7c004d 10%);
}

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

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

.Courses .position-relative {
  border-radius: 40px;
  border: 1px solid #E33D5C;
  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: 40px;
  border-top-right-radius: 40px;
  transition: 0.3s ease all;
}

.Courses .position-relative:hover {
  border: 1.3px solid #1546b1;
}

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

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

.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: #CB9F5E;
  bottom: -24px;
  filter: blur(40px);
  z-index: -1;
  left: 25%;
}

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

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

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

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

.Classes_Courses {
  padding: 50px 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: #E33D5C;
  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 {
  color: #ffffff;
  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: #1546b1;
  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 10px;
}

.Teachers .container {
  position: relative;
}

.Teachers h2 {
  color: #1F0B45;
}

.Teachers .mx-auto p {
  color: #000;
  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;
}

.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/reviews.png");
  background-repeat: no-repeat;
  background-size: cover;
}

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

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

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

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

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

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

.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: #1546b1;
  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: #E33D5C;
}

/* ========= 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: 25px;
}

.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, 92, 0.95) 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 #7c004d ;
}

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

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

.ChooseUs h6 {
  color: #200D46;
}

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

.ChooseUs .gap-lg-3:hover .rounded-circle {
  background-color: #E33D5C;
  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: 150px 0px 150px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
    url("../images/bg/slider.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: #ffffff;
}

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

.FAQ {
  padding: 60px 0px;
  background-color: #E33D5C;
  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: #EAF035;
  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: 80px 0px 100px;
}

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

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

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

.Newsletter form {
  width: 90%;
}

.Newsletter form {
  border: 1px solid #E33D5C;
  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 ======== */

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

footer img {
  width: 100%;
}

footer ul {
  padding: 35px 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/titlebg.jpg");
  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: #E33D5C;
}

.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 #7c004d;
  border-radius: 40px;
  object-fit: cover;
}

.Mission h3 {
  color: #1F0B45;
}

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

.Mission .text-center {
  padding: 40px 85px 30px;
  border: 2px solid #7c004d;
  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: #000;
  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 #E33D5C;
  border-radius: 20px;
  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: #E33D5C;
  width: 65px;
  height: 65px;
  border: 1px solid #200D46;
  border-radius: 25%;
  font-size: 28px;
}

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

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

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

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

.Reviews .position-relative {
  padding: 70px 44px 25px;
  border: 1.3px solid #E33D5C;
  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 #E33D5C;
  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: #E33D5C;
}

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

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