/*

TemplateMo 569 Edu Meeting

https://templatemo.com/tm-569-edu-meeting

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif; 
  /* font-weight: 400; */ 
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: rgb(0, 0, 0);
}

a:hover {
	color: rgb(0, 0, 0);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
      font-size: 16px;
    line-height: 25px;
    text-align: justify;
    color: #0d0c0c;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #f5a425;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-red a {
  font-size: 18px;
  color: #fff;
  background-color: #FB9919;
  padding: 20px 50px;
  margin-bottom: 80px;
  display: inline-block;
  border-radius: 2px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading {
  text-align: center;
  position: relative;
  margin-bottom: 60px;
}

/* ===== HEADING ===== */

.section-heading h2 {
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  display: inline-block;

  /* Gradient text */
  background: linear-gradient(90deg,#1a8bba,#00d2ff,#1a8bba);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: gradientMove 6s linear infinite,
             floatTitle 4s ease-in-out infinite;
}

/* ===== GLOW UNDERLINE ===== */

.section-heading h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg,#00d2ff,#1a8bba);
  box-shadow: 0 0 15px #00d2ff;

  animation: underlineGrow 2s ease forwards;
}

/* ===== ANIMATIONS ===== */

/* Moving gradient */

@keyframes gradientMove {
  0%   { background-position: 0%; }
  100% { background-position: 300%; }
}

/* Floating motion */

@keyframes floatTitle {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Underline reveal */

@keyframes underlineGrow {
  to { width: 70%; }
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .section-heading h2 {
    font-size: 30px;
  }
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.services-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #84D7F9 0%, #ffffff 100%);
}

.section-title h2 {
  font-weight: 700;
  font-size: 36px;
  color: #222;
}

.section-title span {
  color: #FA9A1B;
}

.section-title p {
  color: #555;
  margin-bottom: 50px;
}

/* Service Card */
.service-card {
  background: #fff;
  padding: 35px 25px;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

/* Hover Effect */
.service-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.service-card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #84D7F9, #FA9A1B);
  top: 0;
  left: 0;
}

/* Icon */
.service-card .icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: #FA9A1B;
  animation: float 3s ease-in-out infinite;
}

/* Title */
.service-card h4 {
  font-weight: 600;
  margin-bottom: 15px;

  color: #222;
}

/* Text */
.service-card p {
  color: #666;
  font-size: 14px;
}

/* Floating Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .section-title h2 {
    font-size: 26px;
  }
}

.sub-header {
  background-color: #1f272b;
  position: relative;
  z-index: 1111;
}

.sub-header .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
   font-style: normal;
   color: #f5a425;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849!important;
}

.background-header .nav li a.active {
  color: #fb5849!important;
}

.header-area {
  /* background-color: rgb(0 0 0 / 79%); */
  background-color: rgb(255 255 255);
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

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

.header-area .main-nav .nav {
  float: right;
  margin-top: 20px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

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

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  text-transform: capitalize;
  color: #000;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  /* letter-spacing: 2px; */
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #000!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f5a425!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 1px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

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

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

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

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

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

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #f5a425!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #f5a425!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgb(40 47 49 / 85%);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: relative;
  top: 50%;
  /* transform: translateY(-50%); */
  text-align: center;
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}



.main-banner .caption h2 em {
  font-style: normal;
  color: #f5a425;
  font-weight: 900;
}

/* 1. The Glow Animation */
@keyframes studentFocusGlow {
  0% { text-shadow: 0 0 10px rgba(245, 164, 37, 0.5), 0 0 20px rgba(0, 0, 0, 0.4); }
  50% { text-shadow: 0 0 20px rgba(245, 164, 37, 0.8), 0 0 30px rgba(245, 164, 37, 0.6); }
  100% { text-shadow: 0 0 10px rgba(245, 164, 37, 0.5), 0 0 20px rgba(0, 0, 0, 0.4); }
}

/* 2. Style for the h6 (Getting 100/100...) */
.main-banner .caption h6 {
  background: rgba(245, 164, 37, 0.9); /* Your theme orange */
  display: inline-block;
  padding: 8px 15px;
  border-radius: 4px;
  color: #fff !important;
  font-weight: 700 !important;
  margin-bottom: 15px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  text-align:center;
}

/* 3. Style for the h2 (Welcome to OnlineMaths) */
.main-banner .caption h2 {
	color: #ffffff !important;
	font-size: 77px;
	text-transform: none;
	/* background: rgba(0, 0, 0, 0.4);  */
	text-align:center;
	font-weight: 700;
}

/* 4. Style for the paragraph */
.main-banner .caption p {
  color: #fff !important;
  font-size: 16px !important;
  display: inline-block;
  text-align:center;
  font-weight: 500;
}

.main-banner .caption .main-button-red {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

}


/*
---------------------------------------------
services
---------------------------------------------
*/

.services {
  margin-top: -135px;
  position: relative; /* Changed from absolute to prevent layout overlap */
  width: 100%;
  z-index: 10;
}

.services .item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  text-align: center;
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 100%;
}

/* Remove the old dark overlay */
.services .item::before {
  display: none;
}

/* Base style for text - now dark for readability against pastels */
.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 22px;
  color: #2a2a2a !important; /* Dark text */
  font-weight: 700;
  text-shadow: none !important;
}

.services .item p {
  color: #4a4a4a !important; /* Darker grey text */
  font-size: 15px;
  font-weight: 400;
  text-shadow: none !important;
  line-height: 1.6;
}

/* Pastel Colors for each item */
.services .item1 { background-color: #E3F2FD; } /* Light Blue */
.services .item2 { background-color: #F3E5F5; } /* Light Purple */
.services .item3 { background-color: #E8F5E9; } /* Light Green */
.services .item4 { background-color: #FFFDE7; } /* Light Yellow */
.services .item5 { background-color: #FBE9E7; } /* Light Peach */

/* ✨ Enhanced Hover Animation */
.services .item:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  background-color: #ffffff; /* Turns white on hover */
}

/* Floating Icon Animation */
.services .item .icon {
  max-width: 70px;
  margin: 0 auto;
  transition: all 0.5s ease;
  background: white;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.services .item:hover .icon {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}/* --- 1. Animation Definitions --- */

/* Card Entrance (Pop and Slide) */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(50px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Continuous Soft Floating for Icons */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- 2. Services Section Styles --- */

.services {
  margin-top: -135px;
  position: relative;
  z-index: 10;
}

.services .item {
  position: relative;
  overflow: hidden;
  border-radius: 15px; /* Softer corners */
  text-align: center;
  padding: 15px 20px;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 2px solid transparent;
  height: 100%;
  /* Apply Entrance Animation */
  animation: cardEntrance 0.8s ease-out forwards;
  opacity: 0; /* Starts hidden for the animation */
}

/* --- 3. Staggered Delays (One by one entrance) --- */
.services .item1 { background-color: #eef7ff; animation-delay: 0.1s; }
.services .item2 { background-color: #f9f2ff; animation-delay: 0.2s; }
.services .item3 { background-color: #f0fff4; animation-delay: 0.3s; }
.services .item4 { background-color: #fffdf0; animation-delay: 0.4s; }
.services .item5 { background-color: #fff5f2; animation-delay: 0.5s; }

/* --- 4. Content Visibility --- */

.services .item h4 {
  margin-top: 25px;
  font-size: 22px;
  color: #1a1a1a;
  font-weight: 800;
  transition: color 0.3s ease;
}

.services .item p {
  color: #555;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 15px;
}

/* --- 5. Icon Animation --- */

.services .item .icon {
  max-width: 80px;
  margin: 0 auto;
  background: #ffffff;
  padding: 18px;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Constant Floating Effect */
  animation: iconFloat 4s infinite ease-in-out;
}

/* --- 6. Interactive Hover States --- */

.services .item:hover {
  transform: translateY(-20px);
  background-color: #ffffff;
  border-color: #f5a425; /* Your theme orange */
  box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.services .item:hover .icon {
  background: #f5a425; /* Icon background turns orange on hover */
  transform: scale(1.1) rotate(5deg);
  animation: none; /* Stop floating on hover for better focus */
}

.services .item:hover .icon img {
  /* filter: brightness(0) invert(1); Makes SVG icons white on orange background */
}
/* Container for the text and dot */
.live-text {
  position: relative;
  color: #f5a425; /* Your theme orange */
  margin-left: 5px;
}

/* The solid red dot */
.live-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ff0000;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  position: relative;
}

/* The pulsing outer ring */
.live-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  border-radius: 50%;
  z-index: -1;
  animation: live-pulse 2s infinite;
}

/* Animation for the glow */
@keyframes live-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
/* Feature Grid Layout */
.feature-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  text-align: left;
}

.f-item {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeInRight 0.5s ease forwards;
  opacity: 0;
}

/* Staggered entrance for icons */
.f-item:nth-child(1) { animation-delay: 0.1s; }
.f-item:nth-child(2) { animation-delay: 0.2s; }
.f-item:nth-child(3) { animation-delay: 0.3s; }
.f-item:nth-child(4) { animation-delay: 0.4s; }
.f-item:nth-child(5) { animation-delay: 0.5s; }

.f-item i {
  color: #f5a425; /* Your theme orange */
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.f-item span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

/* Entrance Animation */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hover Effect for Icons */
.course-card:hover .f-item i {
  transform: scale(1.2);
  transition: 0.3s;
  text-shadow: 0 0 8px rgba(245, 164, 37, 0.6);
}
.services .item:hover h4 {
  color: #f5a425;
}

.best{
  color: black;
  font-size: large;
}

.services .owl-nav {
  display: inline-block !important;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25px);
}
    
.services .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
  opacity: 0;
}

.services .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.services .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.services .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

section.upcoming-meetings {
  /* background-image: url(../images/try1.jpg); */
  background-color: white;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
}

section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all .3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: #a12c2f;
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  font-size: 14px;
}
/* ===== COURSE CARDS ===== */

.maths-courses .course-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 420px;
  cursor: pointer;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
  transition: 0.5s;
  animation: float 5s ease-in-out infinite;
}

.course-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

/* Glow hover */
.course-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.course-card:hover img {
  transform: scale(1.1);
}

/* ===== CONTENT ===== */

.course-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  text-align: center;
}

.course-content h3 {
  font-weight: 700;
}

.course-content .short {
  opacity: 0.9;
}

/* ===== HOVER OVERLAY ===== */

.course-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,#4facfe,#00f2fe);
  color: white;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  transform: translateY(100%);
  transition: 0.5s ease;
}

.course-card:hover .course-hover {
  transform: translateY(0);
}

.course-hover h4 {
  font-weight: 700;
  margin-bottom: 15px;
}

.course-hover p {
  font-size: 15px;
  margin-bottom: 20px;
}

.course-hover button {
  background: white;
  color: #0077ff;
  border: none;
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: 600;
  transition: 0.3s;
}

.course-hover button:hover {
  background: #0077ff;
  color: white;
}

/* ===== DIFFERENT BOARD COLORS ===== */

.course-card.cbse .course-hover {
  background: linear-gradient(135deg,#ff7a18,#ffb347);
}

.course-card.icse .course-hover {
  background: linear-gradient(135deg,#43e97b,#38f9d7);
}

.course-card.ib .course-hover {
  background: linear-gradient(135deg,#667eea,#764ba2);
}

/* ===== FLOAT ANIMATION ===== */

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .maths-courses .course-card {
    height: 380px;
    margin-bottom: 25px;
  }
}
/* ===== CARD ===== */

.exam-courses .course-card {
  position: relative;
  height: 420px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transition: 0.5s;
}

/* Image */

.course-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}

/* Dark overlay */

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.4),
    transparent
  );
  transition: 0.5s;
}

/* Content */

.course-content {
  position: absolute;
  bottom: -4px;
  left: 5px;
  right: 25px;
  color: #fff;
  z-index: 2;
}

.course-content h3 {
  font-weight: 700;
  margin-top: 8px;
}

/* Badge */

.badge {
  background: #f5b400;
  color: #000;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}

/* Hidden details */

.details {
  max-height: 0;
  opacity: 0;
  transition: 0.5s ease;
  overflow: hidden;
}

/* Button */

.details1 button {
  margin-bottom: -42px;
  border: none;
  background: #f5b400;
  color: #000;
  padding: 10px 18px;
  border-radius: 25px;
  font-weight: 600;
  transition: 0.3s;
}

.details button:hover {
  background: #fff;
}

/* ===== HOVER EFFECT ===== */

.course-card:hover img {
  transform: scale(1.1);
}

.course-card:hover .overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95),
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.2)
  );
}

.course-card:hover .details {
  max-height: 200px;
  opacity: 1;
}

/* Glow lift */

.course-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}

/* ===== BOARD COLORS ===== */

.course-card.jee .badge { background:#ffcc00; }
.course-card.neet .badge { background:#00d084; }
.course-card.foundation .badge { background:#ff7a18; }

/* ===== MOBILE ===== */

@media (max-width: 768px) {

  .exam-courses .course-card {
    height: 380px;
    margin-bottom: 25px;
  }

  /* Always show details on mobile */

  .details {
    max-height: 212px;
    opacity: 1;
  }

  .overlay {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.95),
      rgba(0,0,0,0.6),
      transparent
    );
  }
}
.coursep{
  color: white !important;
}


/*
---------------------------------------------
apply now
---------------------------------------------
*/
.maths-cta {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  /* border-radius: 25px; */
  /* background-image: url(../images/math-paper-4.jpg); */
  background: linear-gradient(rgb(21 21 21), rgb(7 7 7 / 60%)), url(../images/math-paper-4.jpg);
}

/* Video */
.cta-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay for readability */
.cta-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.75)
  );
}

/* Content */
.cta-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 20px;
}

.cta-content h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 15px;
  text-shadow: 0 4px 25px rgba(0,0,0,0.6);
}

.cta-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  font-weight: 700;
  text-align: center;
  color: #FB9919;
  opacity: 0.95;
}

/* 🌟 WhatsApp Glow Button */
.whatsapp-btn {
  display: inline-block;
  padding: 16px 36px;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background: linear-gradient(45deg, #ff8f1f, #eaa2a0);
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 0 20px #25D366;
  transition: 0.3s;
  animation: glowPulse 1.8s infinite;
}

/* Hover */
.whatsapp-btn:hover {
  transform: scale(1.08);
  color: white;
  box-shadow: 0 0 35px #25D366, 0 0 60px #25D366;
}

/* Glow Animation */
@keyframes glowPulse {
  0% { box-shadow: 0 0 15px #25D366; }
  50% { box-shadow: 0 0 35px #25D366, 0 0 60px #25D366; }
  100% { box-shadow: 0 0 15px #25D366; }
}

/* Mobile */
@media (max-width: 768px) {
  .maths-cta {
    height: 360px;
  }

  .cta-content h2 {
    font-size: 2rem;
  }

  .whatsapp-btn {
    font-size: 18px;
    padding: 14px 28px;
  }
}

section.apply-now {
  background-image: url(../images/math1.png);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px;
}

section.apply-now .item {
  background-color: rgba(0, 0, 0, 0.93);
  padding: 40px;
  height: 200px;
  border-radius: 25px;
  margin-bottom: 30px;
}

section.apply-now .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.apply-now .item p {
  color: #fff;
  margin-bottom: 20px;
  text-align: justify;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}
@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  padding: 0px !important;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}
.founder-section {
  padding: 0px 0;
  margin-bottom: 40px;
  background: white;
  border-radius: 25px;
}

.founder-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgb(255 255 255);
}

.founder-message h4 {
  color: #1e2a78;
    font-weight: 700;
    margin-top: 30px;
    /* margin-top: -107px; */
    font-size: 35px;
    margin-bottom: 19px;
    /* text-transform: uppercase; */
    border-bottom: 2px solid #161d39;
}
.founder-features {
    list-style: none;
    padding: 0;
}

.founder-features li {
    display: flex;
    align-items: center;
    /* margin-bottom: 20px; */
    font-size: 16px;
}

.icon-wrap {
    width: 45px;
    height: 45px;
    border-radius: 12px; /* Sleek rounded square look */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 18px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

/* --- Individual Colorful Styles --- */

/* Yellow/Orange for Concept/Idea */
.feat-concept .icon-wrap i { color: #FFD700; }
.feat-concept .icon-wrap { 
    border: 1px solid rgba(255, 215, 0, 0.3); 
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

/* Pink/Purple for Brain/Understanding */
.feat-understanding .icon-wrap i { color: #FF6AC1; }
.feat-understanding .icon-wrap { 
    border: 1px solid rgba(255, 106, 193, 0.3); 
    box-shadow: 0 0 15px rgba(255, 106, 193, 0.1);
}

/* Blue/Cyan for Confidence/Shield */
.feat-confidence .icon-wrap i { color: #00D4FF; }
.feat-confidence .icon-wrap { 
    border: 1px solid rgba(0, 212, 255, 0.3); 
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

/* Green for Success/Strategy */
.feat-success .icon-wrap i { color: #4EEE94; }
.feat-success .icon-wrap { 
    border: 1px solid rgba(78, 238, 148, 0.3); 
    box-shadow: 0 0 15px rgba(78, 238, 148, 0.1);
}

/* Hover Effect: Make the icon pop */
.founder-features li:hover .icon-wrap {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.1);
}

.founder-features span strong {
    color: #000000;
}
.math-social-vertical {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

/* Icon Style */
.social-icon {
  width: 65px;
  height: 65px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  transition: 0.35s;
  position: relative;
  animation: floatIcon 4s ease-in-out infinite;
}

/* Brand Colors */
.whatsapp { background: linear-gradient(45deg,#25D366,#128C7E); }
.youtube  { background: linear-gradient(45deg,#ff0000,#cc0000); }
.instagram{ background: linear-gradient(45deg,#feda75,#d62976,#962fbf); }
.facebook { background: linear-gradient(45deg,#1877f2,#0d47a1); }

/* Hover effect */
.social-icon:hover {
  transform: translateY(-8px) scale(1.15);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* Glow effect */
.social-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%);
  opacity: 0;
  transition: 0.4s;
}

.social-icon:hover::after {
  opacity: 1;
  animation: pulseGlow 1.2s infinite;
}

/* Floating animation */
@keyframes floatIcon {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Pulse animation */
@keyframes pulseGlow {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.3); opacity: 0; }
}


/* Button style (if not already present) */
.main-button-yellow a {
  display: inline-block;
  padding: 12px 28px;
  background: #ffd43b;
  float: right;
  color: #000;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.main-button-yellow a:hover {
  background: #ffc107;
  transform: translateY(-3px);
}


/* 
---------------------------------------------
courses
--------------------------------------------- 
*/
#preloader {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
    z-index: 11000;
    position: fixed;
    display: block
}

.preloader {
    position: absolute;
    margin: 0 auto;
    left: 1%;
    right: 1%;
    top: 45%;
    width: 95px;
    height: 95px;
    background: center center no-repeat none;
    background-size: 95px 95px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}
.loader-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:8888;
}
.loader-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #ffffff;
  z-index: -1;
  transition: top 1.2s linear 3.1s;
}
.loader-container:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #ffffff;
  z-index: -1;
  transition: bottom 1.2s linear 3.1s;
}
.loader-container.done:before {
  top: -50%;
}
.loader-container.done:after {
  bottom: -50%;
}
.progress-br {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Circle container */
.progress__item {
  width: 120px;
  height: 120px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;

  /* Optional smooth pulse animation */
  animation: pulse 1.5s infinite ease-in-out;
}

/* Logo image */
.progress__item img {
  width: 70px;
  height: auto;
}

/* Pulse animation (nice modern effect) */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.shadow{
	box-shadow: none !important;
}
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 70px;
  right: 5px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;
  animation: pulse 1.5s infinite;
  transition: transform 0.3s ease;
}

.whatsapp-float i {
  line-height: 60px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  animation: none;
  color: white;
}

/* Pulse Animation */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.playstore-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 5px;
  right: 5px;
  background: rgb(246, 26, 26);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 9999;
  animation: pulse 1.5s infinite;
  transition: transform 0.3s ease;
}

.playstore-float i {
  line-height: 60px;
}

.playstore-float:hover {
  transform: scale(1.1);
  animation: none;
  color: white;
}

/* Pulse Animation */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* SECTION */

.trusted-section{
  padding: 50px 20px;
  background: #f6f8ff;
  text-align: center;
}

/* HEADING */

.trusted-heading h2{
  font-size: 42px;
  font-weight: 800;
  color: #ff5050;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.trusted-heading h2::after{
  content: "";
  display: block;
  width: 70px;
  height: 5px;
  background: linear-gradient(90deg,#ff2b70,#7b4bff,#1592d0);
  margin: 12px auto 0;
  border-radius: 4px;
}

.trusted-heading p{
  color: #555;
  margin-bottom: 60px;
  font-size: 16px;
}

/* GRID */

.parents-testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

/* CARD */

.parent-card{
  position: relative;
  padding: 70px 30px 35px;
  border-radius: 40px;
  color: #fff;
  text-align: center;
  transition: .4s;
}

/* SPEECH TAIL */

.parent-card::after{
  content: "";
  position: absolute;
  bottom: -22px;
  left: 60px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 35px solid;
}

/* AVATAR */

.avatar{
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.avatar img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* TEXT */

.parent-card p{
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: white;
}

.stars{
  color: #ffd700;
  font-size: 18px;
  margin-bottom: 10px;
}

.parent-card h4{
  margin: 6px 0 2px;
  font-weight: 700;
}

.parent-card span{
  font-size: 13px;
  opacity: 0.9;
}

/* COLORS */

.pink{ background: #FA9B1C; }
.purple{ background: #0d86b8; }
.blue{ background: #FA9B1C; }

.pink::after{ border-top-color:#FA9B1C; }
.purple::after{ border-top-color:#0d86b8; }
.blue::after{ border-top-color:#FA9B1C; }

/* HOVER */

.parent-card:hover{
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* RESPONSIVE */

@media(max-width: 992px){
  .parents-testimonials{
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width: 576px){
  .parents-testimonials{
    grid-template-columns: 1fr;
  }

  .trusted-heading h2{
    font-size: 32px;
  }
}


/*
---------------------------------------------
our facts
---------------------------------------------
*/

section.our-facts {
  background-image: url(../images/mathss.png);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 125px 0px;
}

section.our-facts h2 {
  font-size: 38px;
  color: #ffa020;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}
/* CENTER CONTAINER */


/* BUTTON STYLE */

/* .video a{
  position: relative;
  display:inline-flex;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  justify-content:center;
  align-items:center;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
} */

/* ICON SIZE */


/* GLOW RING */

/* HOVER EFFECT */

.video a:hover{
  transform: scale(1.12);
  transition: .3s;
}
.count-area-content {
  text-align: center;
  background-color: rgb(0 0 0 / 65%);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
}
.hero-maths-heading {
  font-size: 52px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;

  /* Glow effect */
  text-shadow:
    0 0 10px rgba(255,255,255,0.6),
    0 0 20px rgba(0,180,255,0.8),
    0 0 40px rgba(0,180,255,0.6);

  margin-bottom: 40px;

  /* Animation */
  animation: fadeSlideDown 1s ease-out;
}

/* Animation */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.percentage .count-digit:after {
  content: '%';
  margin-left: 3px;
}

.count-digit {
    margin: 5px 0px;
    color: #f5a425;
    font-weight: 700;
    font-size: 36px;
}
.count-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  height: 400px;
  background-image: url(../images/learnmath.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}


/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/
/* ===== SECTION BACKGROUND ===== */

.edu-stats-wrap{
  background: linear-gradient(135deg,#f8fbff,#eef5ff);
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

/* Floating circles */
.edu-stats-wrap::before,
.edu-stats-wrap::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(0,123,255,0.08);
  animation: eduFloat 10s infinite linear;
}

.edu-stats-wrap::before{
  width:320px;
  height:320px;
  top:-120px;
  left:-120px;
}

.edu-stats-wrap::after{
  width:240px;
  height:240px;
  bottom:-100px;
  right:-100px;
  animation-duration:12s;
}

@keyframes eduFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(30px)}
  100%{transform:translateY(0)}
}

/* ===== LAYOUT ===== */

.edu-stats-box{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;
}

/* ===== LEFT SIDE ===== */

.edu-stats-left{
  flex:1;
}

.edu-title-main{
  font-size:42px;
  font-weight:800;
  color:#0d1b2a;
  margin-bottom:40px;
}

/* Grid */
.edu-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

/* Card */
.edu-stat-card{
  background:#fff;
  border-radius:18px;
  padding:30px;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  transition:.4s;
  position:relative;
  overflow:hidden;
}

/* Hover gradient overlay */
.edu-stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#007bff,#00c6ff);
  opacity:0;
  transition:.4s;
}

.edu-stat-card:hover{
  transform:translateY(-10px);
  color:#fff;
}

.edu-stat-card:hover::before{
  opacity:1;
}

.edu-stat-card:hover *{
  position:relative;
  z-index:1;
  color:#fff;
}

/* Number */
.edu-stat-number{
  font-size:44px;
  font-weight:800;
  color:#FA9B1C;
  display:block;
}

/* Text */
.edu-stat-card p{
  font-weight:600;
  margin-top:8px;
  text-align: center;
}

/* ===== VIDEO AREA ===== */

.edu-video-area{
  flex:1;
  text-align:center;

  /* Banner image */
  background: url("../images/learnmath.jpg")
              center/cover no-repeat;

  padding:170px 20px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

/* Dark overlay */
.edu-video-area::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgb(0 0 0 / 6%);
}

/* Keep content above overlay */
.edu-video-area > *{
  position:relative;
  z-index:2;
}

/* Video Button */
.edu-video-btn{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#007bff,#00c6ff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:52px;
  color:#fff;
  text-decoration:none;
  margin:auto;
  position:relative;
  box-shadow:0 0 40px rgba(0,123,255,0.6);
  animation: eduPulse 2s infinite;
}

/* Ripple rings */
.edu-video-btn::before,
.edu-video-btn::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:-25px;
  border:2px solid rgba(0,123,255,0.4);
  animation: eduRipple 2.5s infinite;
}

.edu-video-btn::after{
  animation-delay:1.2s;
}

@keyframes eduRipple{
  0%{transform:scale(0.8);opacity:1}
  100%{transform:scale(1.7);opacity:0}
}

@keyframes eduPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* Video text */
.edu-video-text{
  margin-top:18px;
  font-weight:600;
  color:#fff; /* white looks better on banner */
}
/* Mobile view adjustments */
@media (max-width: 768px) {
  .edu-video-area {
    width: 100%;
    padding: 100px 15px; /* reduce padding for smaller screens */
    border-radius: 10px;  /* slightly smaller radius */
  }

  .edu-video-btn {
    width: 50px;
    height: 50px;
    font-size: 40px;
  }

  .edu-video-btn::before,
  .edu-video-btn::after {
    inset: -20px;
    border-width: 1.5px;
  }

  .edu-video-text {
    font-size: 16px;
    margin-top: 12px;
  }
}
/* ===== RESPONSIVE ===== */

@media(max-width:768px){

  .edu-stats-box{
    flex-direction:column;
    text-align:center;
  }

  .edu-title-main{
    font-size:30px;
  }

  .edu-stats-grid{
    grid-template-columns:1fr;
  }

}
section.contact-us {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 0px 0px;
}

section.contact-us #contact {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact button {
  font-size: 13px;
  color: #fff;
  background-color:#FA9B1D;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us .right-info {
  background-color:#1e95c6;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

section.contact-us .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.contact-us .right-info ul li h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

section.contact-us .right-info ul li span {
  display: block;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}
.math-footer {
  background: linear-gradient(135deg, #238ea9, #2a525b);
  color: #fff;
  padding: 70px 0 25px;
  position: relative;
  overflow: hidden;
  margin-top: 30px;
}

/* Floating shapes animation */
.math-footer::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  top: -200px;
  left: -200px;
  animation: floatBg 12s linear infinite;
}

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

/* Boxes */
.footer-box {
  margin-bottom: 30px;
}

.footer-box h4 {
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
}

/* Orange underline */
.footer-box h4::after {
  content: "";
  width: 45px;
  height: 3px;
  background: #ffa726;
  position: absolute;
  bottom: -8px;
  left: 0;
}

/* Links */
.footer-box ul {
  list-style: none;
  padding: 0;
}

.footer-box ul li {
  margin-bottom: 10px;
}

.footer-box ul li a {
  color: #ffffff;
  text-decoration: none;
  transition: 0.3s;
}

.footer-box ul li a:hover {
  color: #ffa726;
  padding-left: 6px;
}

/* Social Icons */
.footer-social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0f6b82;
  transition: 0.35s;
}

.footer-social a:hover {
  background: #ffa726;
  color: #fff;
  transform: translateY(-6px) scale(1.1);
}

/* Contact icons */
.contact-info li i {
  margin-right: 8px;
  color: #ffa726;
}

/* Newsletter */
.newsletter {
  display: flex;
  margin-top: 15px;
}

.newsletter input {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px 0 0 6px;
  outline: none;
}

.newsletter button {
  padding: 12px 18px;
  border: none;
  background: #ffa726;
  color: #000;
  font-weight: 600;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: 0.3s;
}

.newsletter button:hover {
  background: #ff9800;
}

/* Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 14px;
}


/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}


/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  background-image: url(../images/meetings-page-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 0px;
}

section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: #a12c2f;
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: #a12c2f;
  color: #fff;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

section.meetings-page .pagination ul li {
  display: inline-block;
}

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all .3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: #a12c2f;
  color: #fff;
}

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250,250,250,0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all .3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: #f5a425;
}

/* Meeting item column */
.templatemo-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.templatemo-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.templatemo-item-col {
		width: 100%;
	}
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1300px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .caption {
    top: 35%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 30px;
    text-align: center;
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
     margin-top: -80px !important;
  }

  section.upcoming-meetings {
    padding-top: 850px !important;
  }
  
  section.upcoming-meetings {
	     padding-bottom: 40px !important; 
  }
  .live-img {
	      display: none;
  }

  section.upcoming-meetings .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .accordions {
    margin-left: 0px;
  }

  .new-students {
    margin-top: 15px;
  }

  section.our-facts .video {
    margin-left: 0px;
    margin-top: 15px;
  }

  section.contact-us #contact {
    margin-bottom: 30px;
  }

}

@media (max-width: 767px) {

  .sub-header .left-content p {
    display: none;
  }

  .sub-header .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }

}
.services {
  margin-top: -120px;
  position: absolute;
  width: 100%;
}



/* 🔹 Dark overlay for readability */
.maths-wave-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* adjust darkness */
  z-index: 0;
}

/* 🔹 Keep content above overlay */
.maths-wave-section .container {
  position: relative;
  z-index: 1;
}

.section-title h2 {
  font-weight: 800;
  font-size: 2.5rem;
}

.section-title span {
  color: #6c63ff;
}

.wave-wrapper {
  display: flex;
  gap: 25px;

  /* ⭐ IMPORTANT FIX */
  padding: 20px 60px;        /* space on left & right */
  overflow-x: auto;
  overflow-y: visible;

  justify-content: flex-start; /* don't center */
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep scrolling */
.wave-wrapper::-webkit-scrollbar {
  display: none;
}

/* Card style */
.wave-card {
  min-width: 220px;
  padding: 25px;
  border-radius: 20px;
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  animation: wave 3s ease-in-out infinite;
  box-shadow: 0 20px 30px rgba(0,0,0,0.15);
  transition: 0.4s;
}

/* Individual colorful gradients */
.wave-card:nth-child(1) { background: linear-gradient(135deg,#ff758c,#ff7eb3); animation-delay: 0s; }
.wave-card:nth-child(2) { background: linear-gradient(135deg,#42e695,#3bb2b8); animation-delay: 0.3s; }
.wave-card:nth-child(3) { background: linear-gradient(135deg,#f6d365,#fda085); animation-delay: 0.6s; }
.wave-card:nth-child(4) { background: linear-gradient(135deg,#a18cd1,#fbc2eb); animation-delay: 0.9s; }
.wave-card:nth-child(5) { background: linear-gradient(135deg,#84fab0,#8fd3f4); animation-delay: 1.2s; }
.wave-card:nth-child(6) { background: linear-gradient(135deg,#fccb90,#d57eeb); animation-delay: 1.5s; }

/* Text inside */
.wave-card h4 {
  font-size: 1.1rem;
  margin: 10px 0;
}

.wave-card p {
  font-size: 0.85rem;
  font-weight: normal;
}

/* Wavy animation */
@keyframes wave {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-25px); }
}

/* Hover */
.wave-card:hover {
  transform: scale(1.1);
}

/* Hide scrollbar */
.wave-wrapper::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {

  .wave-wrapper {
    padding: 15px 20px;   /* reduce side spacing */
  }

  .wave-card {
    min-width: 180px;     /* slightly smaller cards */
    padding: 20px;
  }

}

.wave-wrapper {
  display: flex;
  gap: 20px;

  /* ⭐ KEY FIX */
  flex-wrap: nowrap;          /* prevents vertical layout */

  padding: 20px 60px;
  overflow-x: auto;
  overflow-y: visible;

  justify-content: flex-start;
  scroll-behavior: smooth;
}

/* Hide scrollbar */
.wave-wrapper::-webkit-scrollbar {
  display: none;
}

/* Card */
.wave-card {
  flex: 0 0 auto;             /* ⭐ IMPORTANT — no shrinking */
  min-width: 220px;

  padding: 25px;
  border-radius: 20px;
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;

  animation: wave 3s ease-in-out infinite;
  box-shadow: 0 20px 30px rgba(0,0,0,0.15);
  transition: 0.4s;
}
.parents{
  /* padding: 7px; */
  text-align: left !important;
}
.thoughts{
  padding: 14px;
}
.about-maths {
  padding: 80px 20px;
  background: linear-gradient(135deg, #e0f7ff, #f6fbff);
  text-align: center;
  font-family: "Poppins", sans-serif;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #0d47a1;
}

/* Grid Layout */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

/* Cards */
.about-card {
  background: #fff;
  padding: 30px 25px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}

/* Hover Glow */
.about-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 45px rgba(13,71,161,0.2);
}

/* Icon */
.about-card .icon {
  font-size: 48px;
  margin-bottom: 15px;
  animation: float 3s infinite ease-in-out;
}

/* Floating Animation */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Ensure the Live Classes dropdown allows side-menus to overflow */
.main-nav .nav li.has-sub ul.sub-menu {
    overflow: visible !important;
}

/* Position the CBSE item as the anchor */
.main-nav .nav .sub-menu li.second-level {
    position: relative !important;
}

/* Move the CBSE sub-menu (One-to-One/Group) to the right side */
.main-nav .nav .sub-menu li.second-level > .sub-menu {
    left: 100% !important;  /* Push to the right edge */
    top: 0 !important;       /* Align with the top of 'CBSE' */
    margin-top: 0 !important;
    display: none;           /* Hide by default */
    background-color: #f7f7f7; /* Matching template color */
    border-radius: 0 5px 5px 5px;
}

/* Show only the CBSE sub-menu when hovering over the CBSE link */
.main-nav .nav .sub-menu li.second-level:hover > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Visual cue: Add a small right arrow next to 'CBSE' */
.main-nav .nav .sub-menu li.second-level > a::after {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float: right;
}


.rvideo-section{
  padding:80px 20px;
  background:#e4f1f7;
  text-align:center;
}

.rvideo-title{
  font-size:38px;
  font-weight:700;
  margin-bottom:50px;
}

/* GRID */
.rvideo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  max-width:930px;
  margin:auto;
}

/* CARD */
.rvideo-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
  transition:.4s;
}

.rvideo-card:hover{
  transform:translateY(-8px);
}

/* VIDEO */
.rvideo-player{
  width:100%;
  height:100%;   /* perfect for vertical videos */
  object-fit:cover;
  display:block;
}

/* INFO */
.rvideo-info{
  padding:18px;
}

.rvideo-info h4{
  margin:0;
  font-size:20px;
  font-weight:600;
}

.rvideo-info p{
  margin-top:6px;
  color:#777;
}

/* RESPONSIVE */

@media (max-width:992px){
  .rvideo-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){
  .rvideo-grid{
    grid-template-columns:1fr;
    /* max-width: 500px; */
  }

  .rvideo-player{
    /* height:80%; */
  }
}
.social-premium{
  display:flex;
  flex-direction:row;   /* Vertical */
  align-items:center;      /* Center horizontally */
  gap:25px;
  margin-top:40px;
  margin-left: 200px;
}
.social-card{
  width:260px;          /* Fixed width (important) */
  height:120px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding:20px 25px;
  text-decoration:none;
  background:#ffffff;
  color:#0d47a1;
  font-size:20px;
  font-weight:600;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  transition:.4s;
}

/* Icon */
.social-card i{
  font-size:42px;
  width:55px;
  text-align:center;
}
.facebook{
  background:#1877f2;
  color:#fff;
}
.instagram{
  background:linear-gradient(45deg,#ff007a,#ff7a00,#ffd600);
  color:#fff;
}
.youtube{
  background:#ff0000;
  color:#fff;
}
.whatsapp{
  background:#25d366;
  color:#fff;
}
.facebook:hover{
  background:#1877f2;
  color:#fff;
  transform:translateY(-8px);
}

.instagram:hover{
  background:linear-gradient(45deg,#ff007a,#ff7a00,#ffd600);
  color:#fff;
  transform:translateY(-8px);
}

.youtube:hover{
  background:#ff0000;
  color:#fff;
  transform:translateY(-8px);
}

.whatsapp:hover{
  background:#25d366;
  color:#fff;
  transform:translateY(-8px);
}

@media (max-width:768px){

  .social-premium{
    flex-direction:column;  /* Mobile → vertical */
    align-items:center;
    margin-left:0;
  }

  .social-card{
    width:90%;              /* Fit mobile screen */
    max-width:320px;
  }

}
.learnf{
  color: rgb(255, 204, 110);
  font-weight: 500;

}
.live-img{
  width:150px;
  height:100px;
  vertical-align:middle;
  /* margin-left:8px; */
}



/* IMAGE SIDE */

.aura-who-right{
  flex:1;
  position:relative;
  z-index:1;
}

.aura-who-right img{
  width:100%;
  border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

/* Floating card */

.aura-floating-card{
  position:absolute;
  bottom:-20px;
  left:30px;
  background:#fff;
  padding:18px 22px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
  text-align:center;
}

.aura-floating-card h4{
  font-size:26px;
  color:#1a73e8;
}

.aura-floating-card span{
  font-size:14px;
  color:#555;
}


/* ===== FOUNDER ===== */

.aura-founder-area{
  margin-bottom:130px;
  display:flex;
  justify-content:center;
}

.aura-founder-panel{
  display:flex;
  align-items:center;
  gap:40px;
  background:#f5f9ff;
  padding:45px;
  border-radius:24px;
  max-width:1000px;
}

.aura-founder-panel img{
  width:220px;
  background-color: lightsteelblue;
  border-radius:18px;
}

.aura-founder-content h2{
  color:#0d47a1;
}

.aura-founder-content h4{
  color:#ff6f00;
  margin-bottom:15px;
}

.aura-founder-content p{
  color:#555;
  line-height:1.7;
}

.aura-sign{
  margin-top:20px;
  font-style:italic;
  color:#1a73e8;
}


/* ===== WHY CHOOSE ===== */

.aura-title{
  text-align:center;
  font-size:36px;
  color:#0d47a1;
  margin-bottom:60px;
}

.aura-feature-list{
  max-width:900px;
  margin:auto;
}

.aura-feature{
  display:flex;
  align-items:center;
  gap:25px;
  background:#f8fbff;
  padding:22px 28px;
  border-radius:16px;
  margin-bottom:18px;
  transition:.3s;
  border-left:5px solid #1a73e8;
}

.aura-feature span{
  font-size:30px;
  font-weight:700;
  color:#1a73e8;
}

.aura-feature:hover{
  transform:translateX(12px);
  background:#e3f2fd;
}


/* ===== RESPONSIVE ===== */

@media(max-width:992px){

  .aura-who-area{
    flex-direction:column;
    text-align:center;
  }

  .aura-founder-panel{
    flex-direction:column;
    text-align:center;
  }

  .aura-floating-card{
    left:50%;
    transform:translateX(-50%);
  }
}

@media(max-width:600px){

  .aura-who-left h2{
    font-size:28px;
  }

  .aura-title{
    font-size:28px;
  }

  .aura-founder-panel img{
    width:180px;
  }
}


.edu-benefits-section {
    padding: 70px 20px;
    /* background: linear-gradient(to right, #f9fbff, #eef3ff); */
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

/* Heading */
.edu-main-heading {
    font-size: 40px;
    font-weight: 800;
    color: #1e2a78;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.edu-subheading {
    font-size: 18px;
    color: #555;
    margin-bottom: 50px;
}

/* Grid */
.edu-points {
    max-width: 1100px;
    margin: auto;
    display: grid;
    gap: 20px;
}

/* Cards */
.edu-card {
    padding: 18px 20px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    cursor: pointer;
}

.edu-card:hover {
    transform: translateY(-6px) scale(1.03);
}

/* Number Badge */
.edu-card span {
    background: rgba(255,255,255,0.25);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
}

/* Different Fun Colors */
.card1 { background: linear-gradient(45deg, #4e73df, #6f8cff); }
.card2 { background: linear-gradient(45deg, #1cc88a, #38d9a9); }
.card3 { background: linear-gradient(45deg, #f6c23e, #ffd166); }
.card4 { background: linear-gradient(45deg, #e74a3b, #ff6b6b); }
.card5 { background: linear-gradient(45deg, #858796, #a5a7b8); }
.card6 { background: linear-gradient(45deg, #36b9cc, #4dd0e1); }
.card7 { background: linear-gradient(45deg, #6f42c1, #9b59b6); }
.card8 { background: linear-gradient(45deg, #fd7e14, #ff9f43); }
.card9 { background: linear-gradient(45deg, #20c997, #63e6be); }

/* Mobile (default) */
.edu-points {
    grid-template-columns: 1fr;
}

/* Responsive */
@media (max-width: 768px) {
    .edu-main-heading {
        font-size: 30px;
    }
}

/* Tablet */
@media (min-width: 768px) {
    .edu-points {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop → 3 cards in one line */
@media (min-width: 992px) {
    .edu-points {
        grid-template-columns: repeat(3, 1fr);
    }
}

.result-section{
  padding: 90px 20px;
  background: #fff;
  text-align: center;
}

/* HEADING */

.result-heading h2{
  font-size: 42px;
  font-weight: 800;
  color: #ff5050;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}
.resultbox{
	width: 200px;
    border: 1px solid #000;
    border-radius: 10px;
}

.resultbox img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.dynamic-text {
    color: #f5b400;
    font-weight: 700;
    transition: 0.3s ease;
}

/* ABOUT US PAGE  */

.aura-about-wrap {
    padding: 100px 20px 40px 20px;
    background: linear-gradient(135deg, #eef2ff, #f8fbff);
    font-family: 'Poppins', sans-serif;
}

/* Section Title */
.section-title {
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    color: #1e2a78;
    margin-bottom: 25px;
    position: relative;
}

.section-title::after {
    content: "";
    width: 70px;
    height: 4px;
    background: #e74c3c;
    display: block;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* About Text */
.about-container {
    max-width: 1300px;
    margin: auto;
    text-align: center;
    margin-bottom: 30px;
	background: #ffffff;
    padding: 20px;
}

.about-text {
    font-size: 18px;
    line-height: 1.9;
    color: #555;
}

/* Mission & Vision */
.mission-vision-container {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 30px;
}

.info-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    text-align: left;
}

.info-card:hover {
    transform: translateY(-8px);
}

.info-card h3 {
    font-size: 26px;
    margin-bottom: 20px;
    color: #e74c3c;
}

.info-card p {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
}

/* Founder Section */
.founderSection {
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
    background: #ffffff;
    padding: 60px;
    border-radius: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.founder-image img {
    width: 320px;
    border-radius: 20px;
}

.founder-content h3 {
    font-size: 30px;
    margin-bottom: 20px;
    color: #1e2a78;
}

.founder-content p {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
}

.founder-name {
    display: block;
    margin-top: 25px;
    font-weight: 600;
    color: #e74c3c;
}

/* Responsive */
@media (max-width: 992px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
    }

    .founderSection {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
}



/* Achievement Section */
.achievement-section {
    padding: 100px 20px;
    /* background: linear-gradient(135deg, #4e73df, #6f42c1); */
	background: #fff;
    text-align: center;
    color: #fff;
    position: relative;
}

/* Fun background circles */
.achievement-section::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    top: 20px;
    left: 50px;
}

.achievement-section::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    bottom: 40px;
    right: 60px;
}

.white-title {
    color: #1e2a78;
    margin-bottom: 60px;
}

/* Achievement Grid */
.achievement-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Boxes */
.achievement-box {
    background: rgb(255 150 9);
    padding: 40px 20px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    transition: 0.3s;
}

.achievement-box:hover {
    transform: translateY(-10px);
}

.achievement-box h3 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.achievement-box p {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 992px) {
    .achievement-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .achievement-container {
        grid-template-columns: 1fr;
    }
}

.btn-warning {
    padding: 15px 30px !important;
    color: #fff !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.about-list {
    list-style: disc !important;
    padding-left: 25px !important;
    margin: 15px 0 25px 0;
}

.about-list li {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 8px;
    color: #333;
	list-style: disc;
	text-align: justify;
}

/* 📱 Mobile View → 2 Icons Per Row */
@media (max-width: 768px) {

    .math-social-vertical {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 10px 78px;
    }

}