@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;600;700&family=Playfair+Display:wght@400;500;600&display=swap");

/****************/
/* FONTS USED */
/***************/
/* "Lato" , "Open Sans" , "Playfair Display" */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/****************************/
/* Colors Declarations */
/****************************/
:root {
  --dark-text: #212529;
  --text-color: #343a40;
  --light-black: #555;
  --text-main: #162353;
  --dark-grey: #dee2e6;
  --grey: #e9ecef;
  --light-grey: #f8f9fa;
  --blue-color: #339af0;
  --light-blue: rgba(51, 155, 240, 0.856);
}

/******************/
/* Padding Space */
/******************/
:root {
  --big-space: 9.6rem;
  --mid-space: 8rem;
  --low-space: 6rem;
}

html {
  font-size: 62.5%;
}

body {
  line-height: 1;
  font-weight: 400;
  background-color: var(--light-grey);
  font-family: "Lato";
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-text);
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
p::selection,
li::selection,
span::selection,
br::selection,
img::selection {
  /* color: var(--blue-color); */
  color: #7950f2;
  background-color: var(--grey);
}

p {
  line-height: 1.5;
}

/****************************/
/* HEADER SECTION CSS */
/****************************/
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 1.2rem 8.2rem 0.8rem 8.2rem; */
  padding: 0.8rem 9rem;
  height: 10vh;
}

.header .logo a {
  font-size: 2.4rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -1px;
}

.header .logo img {
  width: 50px;
  height: 50px;
}

.header .nav .nav_links {
  display: flex;
  justify-content: space-evenly;
}

.header .nav .nav_links li {
  list-style: none;
  padding: 0.8rem 2.4rem 0 2.4rem;
  font-size: 1.8rem;
}

.header .nav .nav_links li a {
  text-decoration: none;
  color: var(--dark-text);
}

.nav_sticky {
  position: sticky;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 10vh;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #f8f9fafb;
  z-index: 100;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

/****************************/
/* NAVBAR ACTIVATION CSS */
/****************************/
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  display: none;
}

.burger .line {
  width: 30px;
  background-color: var(--text-color);
  height: 3px;
}

/****************************/
/* MAIN SECTION ALL CSS */
/* HERO SECTION CSS */
/****************************/

.section {
  padding: var(--big-space) 0;
}

.section__1 {
  padding: var(--low-space) 0;
}

.section__1 .section__1__col_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.section__1 .section__1__col_1 h1 {
  font-size: 5.8rem;
  font-family: "Lato";
  line-height: 1.4;
  letter-spacing: -1px;
  font-family: "Playfair Display";
  color: var(--dark-text);
}

.section__1 .section__1__col_1 h1 span {
  color: var(--blue-color);
  background-color: var(--grey);
  padding: 0 1.2rem;
  /* clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%); */
  font-family: "Playfair Display";
  border-radius: 1rem;
}

.section__1 .section__1__col_1 h4 {
  font-size: 3rem;
  font-weight: 600;
  color: var(--dark-text);
}

.section__1 .section__1__col_1 .ctaDiv {
  margin-top: 2rem;
}

.section__1 .section__1__col_1 .ctaDiv a {
  text-decoration: none;
  font-size: 2rem;
  font-size: 2.5rem;
  font-weight: 600;
  border: 2px solid var(--blue-color);
  padding: 0.6rem 2rem;
  border-radius: 1rem;
  transition: all 0.4s;
  color: #fff;
  background-color: var(--blue-color);
  text-transform: uppercase;
}

.section__1 .section__1__col_1 .ctaDiv a:hover {
  color: var(--blue-color);
  background-color: var(--light-grey);
}

.section__1 .section__1__col_2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section__1 .section__1__col_2 .hero__img {
  width: 90%;
}

/* SECOND SECTION */
.section__2__col_1 {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.section__2__col_1 h4 {
  color: var(--blue-color);
  font-size: 2.4rem;
  font-weight: 700;
  font-family: "Open Sans";
  letter-spacing: 1px;
}

.section__2__col_1 h2 {
  font-size: 3.6rem;
  color: var(--dark-text);
  letter-spacing: 0.5px;
  font-family: "Lato";
}

/****************************/
/* SECTION 2 SECOND ROW */
/****************************/
.section__2__row__2__col__1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.section__2__row__2__col__1 img {
  width: 70%;
  /* filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.1)); */
}

.unique__row {
  padding: var(--big-space) 0;
}

.unique__row:last-child {
  padding: var(--big-space) 0 0 0;
}

.section__2__row__2__col__2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section__2__row__2__col__2 .secondsec___text__div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  width: 70%;
}

.section__2__row__2__col__2 .secondsec___text__div .iconHolder .Ionicon {
  font-size: 4rem;
  padding: 2rem;
  /* background-color: var(--light-blue); */
  background-color: #1623539d;
  border-radius: 50%;
  color: #fff;
  margin-bottom: 1rem;
}

.section__2__row__2__col__2 .secondsec___text__div h2 {
  color: var(--dark-text);
  font-weight: 700;
  font-family: "Lato";
}

.section__2__row__2__col__2 .secondsec___text__div p {
  font-size: 1.6rem;
  color: #555;
}

/****************************/
/* THIRD SECTION CSS */
/****************************/
.section__3 .section__3__col__1 {
  background-color: #fff;
  margin: var(--low-space) 0 0 0;
  border-radius: 10px;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.1);
}
.section__3__col__1 .btn___Holders {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  top: -2rem;
}

.section__3__col__1 .CTA___btn {
  border: none;
  font-size: 2rem;
  font-weight: 600;
  font-family: "Open Sans";
  background: none;
  padding: 1rem 2rem;
  border-radius: 10px;
  background-color: #162353da;
  color: #fff;
}

.section__3__col__1 .CTA___btn:hover {
  background-color: #162353;
}

.section__3__col__1 .activedBTN {
  transition: all 0.3s;
  background-color: var(--light-blue);
}

.section__3__col__1 .activedBTN:hover {
  background-color: var(--blue-color);
}

.third__sec__content__Box {
  display: flex;
  padding: 2rem 4rem;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  display: none;
}

.third__sec__content__Box__activated {
  display: flex;
}

.third__sec__content__Box .Content__Box__Icon {
  font-size: 4rem;
  padding: 2rem;
  background-color: #1623539d;
  border-radius: 50%;
  color: #fff;
  margin-bottom: 1rem;
}

.third__sec__content__Box h2 {
  font-weight: 600;
  font-family: "Open Sans";
  font-size: 2.4rem;
}

.third__sec__content__Box p {
  font-size: 1.6rem;
  color: var(--text-color);
}

/****************************/
/* FOURTH SECTION */
/****************************/
.section__4 .slides {
  margin-top: 5rem;
}

.section__4 .slides .silde__card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  border-radius: 10px;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 1s;
}

.section__4 .slides .silde__card .slideIcon {
  align-self: flex-start;
}

.section__4 .slides .silde__card p {
  font-size: 1.6rem;
  color: grey;
}

.section__4 .slides .silde__card h4 {
  /* text-transform: uppercase; */
  letter-spacing: -0.2px;
  color: #162353;
  font-family: "Playfair Display";
  font-size: 2rem;
}

.slides p::selection,
.slides h4::selection {
  color: rgb(255, 174, 0);
}

.section__4 .slides .silde__card .student___img {
  border-radius: 50%;
  height: 100px;
  max-width: 100px;
  border: 4px solid var(--blue-color);
}

.section__4 .slides .silde__card .star__ratings .star {
  color: rgb(255, 174, 0);
  font-size: 2rem;
}

.section__4 .slides .silde__card:hover {
  background-color: var(--light-blue);
}
.section__4 .slides .silde__card:hover p,
.section__4 .slides .silde__card:hover h4 {
  color: #fff;
}
.section__4 .slides .silde__card:hover .student___img {
  border-right: 5px solid white;
  border-top: 5px solid white;
  border-left: 5px solid white;
  cursor: pointer;
}

/****************************/
/* SECTION FIFTH DESIGN */
/****************************/
.section__5__col__1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
}

.section__5__col__1 h3 {
  font-size: 4.2rem;
  font-weight: 600;
  text-align: center;
  color: #555;
  letter-spacing: -0.5px;
}

.section__5__col__1 .Last___Cta a {
  text-decoration: none;
  font-size: 2.4rem;
  padding: 0.6rem 2.4rem;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: var(--light-blue);
  color: #fff;
  transform: all 0.4s;
}

.section__5__col__1 .Last___Cta a:hover {
  background-color: var(--blue-color);
}

/****************************/
/* FOOTER DESIGN */
/****************************/
.footer {
  background-color: var(--dark-text);
  padding: var(--big-space) 0 0 0;
  color: #fff;
}

.footer .footer__col__1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer .footer__col__1 .footerMain {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer .footer__col__1 .footerMain img {
  width: 60px;
  height: 60px;
}

.footer .footer__col__1 .footerMain h2 {
  color: #fff;
  font-size: 3rem;
  letter-spacing: -1px;
}

.footer .footer__col__1 p {
  font-size: 1.4rem;
  color: #fff;
}

.footer .footer__col__2 ul,
.footer .footer__col__3 ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}

.footer .footer__col__2 ul li,
.footer .footer__col__3 ul li {
  list-style: none;
}

.footer .footer__col__2 ul li a,
.footer .footer__col__3 ul li a {
  text-decoration: none;
  font-size: 1.6rem;
  color: #fff;
  transition: all 0.4s;
}

.footer .footer__col__2 ul li a:hover,
.footer .footer__col__3 ul li a:hover {
  border-bottom: 5px ridge #fff;
  padding-bottom: 0.3rem;
  font-size: 2rem;
}

.footerrow {
  padding-bottom: 2.4rem;
}

.footer__lastPara {
  font-size: 1.8rem;
  text-align: center;
}

/****************/
/* CONTACT PAGE*/
/***************/
.contact___section__col_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.contact___section__col_1 h2,
.contact___section__col_2 h2 {
  font-size: 3rem;
  font-weight: 600;
  color: var(--blue-color);
  text-transform: capitalize;
}

.contact___section__col_1 form {
  width: 100%;
}

.contact___section__col_1 .form___item__Container .form__item,
.contact___section__col_1 .form___item__Container .form__item_textarea {
  width: 100%;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  padding: 1rem;
  border: none;
  outline: none;
  background-color: #e9ecef;
}
.contact___section__col_1 .form___item__Container .form__item_textarea {
  min-height: 15rem;
}

.contact___section__col_1 .contact__Form__Btn {
  border: none;
  outline: none;
  background-color: var(--light-blue);
  text-transform: uppercase;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 1rem 2rem;
  transition: all 0.3s;
}

.contact___section__col_1 .contact__Form__Btn:hover {
  background-color: var(--blue-color);
}

.contact___section__col_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 4rem;
}

.contact___section__col_2 .contact___section__col_2__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
}

.contact___section__col_2 .contact__headers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact___section__col_2 h3 {
  font-size: 2rem;
  font-weight: 600;
}

.contact___section__col_2 h4 {
  font-size: 2rem;
  color: var(--blue-color);
  font-weight: 600;
}

.contact___section__col_2 p {
  font-size: 1.8rem;
}

.contact___section__col_2 .contact__Ion_Icon {
  font-size: 3.5rem;
  padding: 1rem;
  border-radius: 50%;
  background-color: rgba(170, 168, 168, 0.384);
}

.contact___section__col_2 .contact__items {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/********************/
/* FAQ SECTION */
/********************/
.FAQ__section h1 {
  text-transform: uppercase;
  font-family: "Lato";
  letter-spacing: -1px;
  word-spacing: 5px;
  text-align: center;
  margin-bottom: 5rem;
  font-weight: 600;
  font-size: 4rem;
  color: var(--blue-color);
}

.FAQ__section .FAQ__SECTION__Col_1 {
  box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
  background-color: #fff;
  border-radius: 1rem;
}

.FAQ__section .FAQ__SECTION__Col_1 h4 {
  font-size: 2.4rem;
  font-weight: 600;
  color: rgb(145, 145, 145);
}

.FAQ__section .FAQ__SECTION__Col_1 p {
  font-size: 1.6rem;
  color: var(--text-color);
  display: none;
  margin-top: 2rem;
}

.FAQ__section .faq--lists {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
}

.FAQ__section .faq--lists li {
  list-style: none;
}

.FAQ__section .FAQ__SECTION__Col_1 .DOWN___IONICON {
  background-color: var(--blue-color);
  color: #fff;
  padding: 0.3rem;
  font-size: 3rem;
  cursor: pointer;
  border-radius: 50%;
}

.FAQ__section .faq--list--visible {
  display: flex;
  justify-content: space-between;
}

.FAQ__section .faq--lists .faq__para__active p {
  display: block;
}

.FAQ__section .faq--lists .faq__para__active h4 {
  color: var(--text-color);
}

/********************/
/* ERROR PAGE CSS */
/********************/
.Error__Section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Error__Section__col__1 {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}
.Error__Section__col__1 .GoBack {
  border: none;
  outline: none;
  font-size: 2.4rem;
  background-color: var(--light-blue);
  color: #fff;
  padding: 1rem 2rem;
  cursor: pointer;
  font-weight: 600;
  font-family: "Playfair Display";
  box-shadow: 0.1rem 0.3rem 1rem rgba(0, 0, 0, 0.4);
  transition: all 0.3s;
}

.Error__Section__col__1 .GoBack:hover {
  background-color: var(--light-blue);
}

.Error__Section__col__1 img {
  width: 100%;
}

/**************************/
/* ADMIN PANNEL PAGE CSS */
/*************************/
.adminPannelConfirmation__section .adminPannelConfirmation__section__col_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}

.adminPannelConfirmation__section .adminPannelConfirmation__section__col_1 h1 {
  font-size: 3rem;
  font-weight: 600;
  text-transform: capitalize;
}

.adminPannelConfirmation__section
  .adminPannelConfirmation__section__col_1
  input {
  width: 80%;
  font-size: 2rem;
  padding: 1rem 2rem;
  caret-color: var(--blue-color);
  border: none;
  outline: none;
  background-color: #e9ecef;
  border-radius: 1rem;
}

.adminPannelConfirmation__section
  .adminPannelConfirmation__section__col_1
  input::placeholder {
  color: #868e96;
}

.adminPannelConfirmation__section
  .adminPannelConfirmation__section__col_1
  .admin__entry__btn {
  border: none;
  background-color: var(--light-blue);
  border-radius: 0.3rem;
  color: #fff;
  padding: 0.8rem 2rem;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 600;
}

.adminPannelConfirmation__section
  .adminPannelConfirmation__section__col_1
  .admin__entry__btn:hover {
  background-color: var(--blue-color);
}

/********************************/
/* ADMIN PANNEL INPUT SECTION */
/*******************************/
.admin__pannel__Input__section {
  display: none;
}
.admin__pannel__Input__section .admin__notes {
  align-self: flex-start;
}
.admin__pannel__Input__section h2 {
  font-size: 3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue-color);
}
.admin__pannel__Input__section p {
  font-size: 1.6rem;
  color: var(--text-color);
}

.admin__pannel__Input__section__COL__1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}

.admin__pannel__Input__section input {
  width: 100%;
  font-size: 2rem;
  padding: 1rem 2rem;
  caret-color: var(--blue-color);
  border-radius: 1rem;
  border: none;
  outline: none;
  background-color: #e9ecef;
}

.admin__pannel__Input__section input::placeholder {
  color: #868e96;
}

.admin__pannel__Input__section form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.admin__pannel__Input__section .admin__data__upload__btn {
  border: none;
  background-color: var(--light-blue);
  border-radius: 0.3rem;
  color: #fff;
  padding: 0.8rem 2rem;
  cursor: pointer;
  font-size: 2rem;
}

.admin__pannel__Input__section .admin__data__upload__btn:hover {
  background-color: var(--blue-color);
}

/**********************/
/* ABOUT SECTION CSS */
/**********************/
.about__section {
  padding: var(--big-space) 0;
}

.about__section .about__section__col__1 {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.about__section .about__section__col__1 h2 {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #7950f2;
}
.about__section .about__section__col__1 h3 {
  font-weight: 600;
  font-size: 2.4rem;
}

.about__section .about__section__col__1 p {
  font-size: 1.6rem;
}

.about__section .about__section__col__1 strong {
  text-transform: uppercase;
  color: var(--blue-color);
}

/********************/
/* SERVICE PAGE CSS*/
/********************/
.service__section_1 {
  padding: var(--low-space) 0;
}

.service__section_1 .heading____main {
  text-align: center;
  text-transform: uppercase;
  color: var(--blue-color);
  margin-bottom: 5rem;
  font-size: 4rem;
  font-weight: 600;
}

.service__section_1 .hyperRow {
  margin-bottom: 5rem;
}

.service__section_1 .service__Cards {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  cursor: pointer;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.service__section_1 .service__Cards:hover {
  transform: scale(1.15);
}

.service__section_1 .service__Cards .ion_serviceIcon {
  font-size: 4rem;
  color: var(--blue-color);
}

.service__section_1 .service__Cards p {
  font-size: 1.4rem;
}

.service__section_1 .service__Cards h3 {
  font-size: 1.8rem;
}