/*

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: #3cf;
}

a:hover {
  color: #fc3;
}

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

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

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: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.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 0.3s;
}

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

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.15);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.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 0.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: rgba(250, 250, 250, 0.15);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

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

.header-area .main-nav .logo {
  line-height: 100px;
  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: 30px;
  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: 14px;
  text-transform: uppercase;
  color: #fff;
  -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: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #f5a425 !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: 5px;
  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 0.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: 13px;
  font-weight: 400;
  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: rgba(255, 255, 255, 0.2); /* semi-transparent white */
    backdrop-filter: blur(10px); /* frosted glass blur */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    padding: 0px 15px;
    height: 100px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* soft shadow for depth */
    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: rgba(31, 39, 43, 0.75);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.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 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

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

.main-banner .caption p {
  color: #fff;
  font-size: 14px;
  max-width: 570px;
}

.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; /* optional: remove or reduce */
  position: relative;
  width: 100%;
  z-index: 2;

  /* ✅ Background fix */
  background-color: #2c2c2c; /* match About Us */
  background-image: url(../images/services-bg.jpg); /* optional background */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 80px 0; /* spacing for top & bottom */
}

.services .item {
  background-image: url(../images/service-item-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 40px;
  transition: transform 0.3s ease-in-out; /* smooth hover */
}

.services .item:hover {
  transform: translateY(-10px);
}

.services .item .icon {
  max-width: 60px;
  margin: 0 auto;
}

.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.services .item p {
  color: #f1f1f1;
  font-size: 13px;
}

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

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

.services .owl-nav .owl-next {
  opacity: 1;
  transition: all 0.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;
}

/* -------------------
   About Us Section
   ------------------- */
.about-us {
  position: relative;
  background: url("assets/images/about-bg.jpg") center center/cover no-repeat;
  color: #fff;
  z-index: 1;
  overflow: hidden;
}

.about-us .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.about-us h2 {
  font-size: 2.5rem;
  font-weight: 700;
}

.about-us p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Carousel Images */
.carousel-inner img {
  height: 350px;
  width: 100%;
  object-fit: cover;
  animation: zoomInOut 12s infinite alternate ease-in-out;
  border-radius: 12px;
}

/* Zoom Animation */
@keyframes zoomInOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .about-us h2 {
    font-size: 2rem;
  }
  .carousel-inner img {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .about-us {
    text-align: center;
  }
  .about-us h2 {
    font-size: 1.8rem;
  }
  .carousel-inner img {
    height: 220px;
  }
}

/*
---------------------------------------------
apply now
---------------------------------------------
*/

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

section.apply-now .item {
  background-color: rgba(250, 250, 250, 0.15);
  padding: 40px;
  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;
}

.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;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}

/* ============================================================
   Our Facts – Modern & Attractive
   ============================================================ */
section.our-facts {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url(../images/class.jpg) center center / cover no-repeat fixed;
  padding: 120px 0 100px 0;
  position: relative;
  overflow: hidden;
}

/* Section Heading – Single line, gradient shine */
section.our-facts h2 {
  font-size: 42px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 60px;
  background: linear-gradient(90deg, #f5a425, #fff, #f5a425);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  line-height: 1.2;
}


@keyframes shine {
  0% { background-position: -200px; }
  100% { background-position: 200px; }
}

/* Count Boxes – glassy with hover lift */
.count-area-content {
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border-radius: 25px;
  padding: 30px 25px;
  margin: 15px 0;
  transition: transform 0.4s, box-shadow 0.4s;
}

.count-area-content:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0,0,0,0.6);
}

.count-digit {
  font-size: 38px;
  font-weight: 800;
  color: #f5a425;
  margin: 10px 0;
}

.count-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
}

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

/* Video Container – cinematic, hover effects */
/* Video Container – full width, cinematic, hover effects */
section.our-facts .video {
  position: relative;
  width: 100%;       /* full width of parent container */
  max-width: 100%;   /* prevent overflow */
  aspect-ratio: 16/9; /* maintain 16:9 ratio */
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.4s, box-shadow 0.4s;
  background: url(../images/about3.jpg) center center / cover no-repeat;
}

section.our-facts .video:hover {
  transform: scale(1.02); /* subtle hover */
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
}

/* Play Button – glowing */
section.our-facts .video img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  transition: transform 0.4s, filter 0.4s;
  filter: drop-shadow(0 0 10px #f5a425);
}

section.our-facts .video:hover img {
  transform: translate(-50%, -50%) scale(1.3);
  filter: drop-shadow(0 0 25px #f5a425);
}

/* Local video – overlay inside container */
#localVideo {
  position: absolute;       /* overlay video on container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: none;
  object-fit: cover;        /* fills container nicely */
  z-index: 2;
}


/* Responsive */
@media (max-width: 991px) {
  section.our-facts h2 { font-size: 36px; }
  .count-digit { font-size: 32px; }
  section.our-facts .video { max-width: 320px; height: 200px; }
}

@media (max-width: 767px) {
  section.our-facts h2 { font-size: 28px; white-space: normal; }
  .count-digit { font-size: 28px; }
  section.our-facts .video { max-width: 280px; height: 180px; margin-top: 20px; }
}
/* ================= 3D SPINNING CUBE LOADER ================= */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.6s ease;
}

#loader-wrapper.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Loader container */
.cube-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 3D Cube */
.cube {
  position: relative;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  animation: rotateCube 2.5s linear infinite;
}

.cube .face {
  position: absolute;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff0057, #ff7e00, #00f7ff);
  border: 2px solid #fff;
  opacity: 0.85;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.cube .front  { transform: rotateY(  0deg) translateZ(40px); }
.cube .back   { transform: rotateY(180deg) translateZ(40px); }
.cube .left   { transform: rotateY(-90deg) translateZ(40px); }
.cube .right  { transform: rotateY( 90deg) translateZ(40px); }
.cube .top    { transform: rotateX( 90deg) translateZ(40px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(40px); }

@keyframes rotateCube {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

.loading-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00f7ff;
  text-shadow: 0 0 10px #00f7ff, 0 0 20px #ff0057;
  animation: blink 1.2s infinite alternate;
}

@keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0.5; }
}

/* ===== Testimonials Section ===== */
.testimonial-section {
  background: linear-gradient(135deg, #0b0b0c, #1a1a1a);
  padding: 80px 20px;
  text-align: center;
  color: #fff;
  position: relative;
}

.testimonial-heading h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #f5a425;
}

.testimonial-heading p {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 40px;
}

/* Slider container */
.testimonial-slider {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* Track for sliding */
.testimonial-track {
  display: flex;
  gap: 20px;
  transition: transform 0.7s ease-in-out;
  width: 100%;
}

/* Testimonial Card */
.testimonial-card {
  flex: 0 0 calc((100% - 40px) / 3); /* 3 cards per row minus 2 gaps */
  background: #121318;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  text-align: center;
  transition: transform 0.3s;
  box-sizing: border-box;
}

.testimonial-card:hover {
  transform: scale(1.05);
}

/* Profile Image */
.profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
  object-fit: cover;
  border: 3px solid #f5a425;
}

/* Name & Role */
.testimonial-card h3 {
  margin: 5px 0;
  font-size: 1.3rem;
  color: #fff;
}

.testimonial-card .role {
  font-size: 0.9rem;
  color: #bbb;
  margin-bottom: 10px;
}

/* Stars */
.stars {
  font-size: 1.2rem;
  color: #f5a425;
  margin-bottom: 10px;
}

/* Text */
.testimonial-text {
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.5;
}

/* Controls */
.testimonial-controls {
  margin-top: 30px;
}

.testimonial-controls button {
  background: #f5a425;
  color: #0b0b0c;
  border: none;
  padding: 10px 15px;
  margin: 0 8px;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.testimonial-controls button:hover {
  background: #fff;
  color: #f5a425;
}

/* ===== Responsive Breakpoints ===== */

/* Tablets - 2 per row */
@media (max-width: 1023px) {
  .testimonial-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

/* Mobile - 1 per row */
@media (max-width: 768px) {
  .testimonial-card {
    flex: 0 0 100%;
  }
}

/* =============================
   CONTACT SECTION STYLING
   ============================= */
#contact {
  padding: 80px 0;
  background: #0b0b0c;
  position: relative;
  overflow: hidden;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1rem;
  color: #b9bcc3;
  margin-bottom: 40px;
}

/* Company Info Card */
.company-info {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 25px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.company-info:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px rgba(255, 255, 255, 0.15);
}

.company-info h3 {
  font-size: 1.8rem;
  color: #ffb84d;
  margin-bottom: 15px;
}

.company-info p {
  font-size: 0.95rem;
  color: #ccc;
}

.company-info ul {
  padding-left: 0;
  margin-top: 15px;
  list-style: none;
}

.company-info ul li {
  color: #b9bcc3;
  font-size: 0.95rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.company-info ul li i {
  color: #ffb84d;
  margin-right: 10px;
  font-size: 1.1rem;
}

/* Contact Form */
.contact-form {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 25px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.contact-form:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px rgba(255, 255, 255, 0.15);
}

.contact-form .form-label {
  font-weight: 600;
  color: #fff;
}

.glass-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.glass-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffb84d;
}

/* Submit Button */
.glow-btn {
  background: #ffb84d;
  color: #000;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 15px rgba(255, 184, 77, 0.5);
}

.glow-btn:hover {
  background: #ffaa33;
  transform: scale(1.05);
  box-shadow: 0px 0px 20px rgba(255, 184, 77, 0.8);
}

/* =============================
   FOOTER STYLING
   ============================= */
.footer-section {
  background-color: #0b0b0c;
  padding: 25px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-section p {
  color: #b9bcc3;
  margin: 5px 0;
}

.footer-section strong {
  color: #ffb84d;
}

.footer-section .social-icons {
  margin-top: 12px;
}

.footer-section .social-icons a {
  color: #fff;
  font-size: 1.2rem;
  margin: 0 8px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-section .social-icons a:hover {
  color: #ffb84d;
  transform: scale(1.1);
}

/* =============================
   RESPONSIVE FIXES
   ============================= */
@media (max-width: 992px) {
  #contact {
    padding: 50px 0;
  }

  .company-info,
  .contact-form {
    margin-bottom: 30px;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 1.6rem;
  }

  .glow-btn {
    width: 100%;
  }
}


/*
---------------------------------------------
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;
}
/* ===============================
   Meetings Page Styling (Updated)
   =============================== */

/* Animated Heading */
.animated-heading {
  text-align: center;
  font-size: 48px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* Wrap each letter in a span for animation */
.animated-heading span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.6s ease;
}

/* Active class triggers animation */
.animated-heading.active span {
  opacity: 1;
  transform: translateY(0);
}

/* Automatic stagger using CSS variable */
.animated-heading span {
  transition-delay: calc(var(--i) * 0.05s);
}

/* Meetings Page Section */
section.meetings-page {
  padding: 60px 0;
  background: #1f272b;
  position: relative;
}

/* Filters */
section.meetings-page .filters {
  list-style: none;
  text-align: center;
  margin-bottom: 50px;
  padding: 0;
}
section.meetings-page .filters li {
  display: inline-block;
  margin: 0 12px;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}
section.meetings-page .filters li:hover,
section.meetings-page .filters li.active {
  background: #1f272b;
  color: #fff;
  border-color: #1f272b;
}

/* Row Flexbox */
section.meetings-page .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  position: relative;
}

/* Meeting Item Column */
.templatemo-item-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 31%;
  min-width: 280px;
  transition: all 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: scale(1);
}

/* Hidden state for filter */
.templatemo-item-col.hidden {
  display: none;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Meeting Item Card */
.meeting-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.meeting-item:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Thumbnail */
.meeting-item .thumb {
  position: relative;
  overflow: hidden;
}
.meeting-item .thumb img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.meeting-item:hover .thumb img {
  transform: scale(1.1);
}

/* Date Badge */
.meeting-item .date {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #1f272b;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.meeting-item .date h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.meeting-item .date span {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

/* Content */
.meeting-item .down-content {
  flex-grow: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Titles & Paragraph Alignment */
.meeting-item h4,
.meeting-item h5,
.meeting-item p {
  margin: 0 0 12px 0;
  padding: 0;
  text-align: left;
}

.meeting-item h4 {
  font-size: 20px;
  color: #1f272b;
  font-weight: 600;
}

.meeting-item h5 {
  font-size: 15px;
  color: #777;
  font-weight: 500;
}

.meeting-item p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 0;
  text-align: justify;
}

/* ===============================
   Responsive
   =============================== */
@media (max-width: 1200px) {
  .templatemo-item-col {
    flex: 0 0 45%;
  }
}
@media (max-width: 768px) {
  .templatemo-item-col {
    flex: 0 0 100%;
  }
  .meeting-item .thumb img {
    height: 200px;
  }
}

/* ---------------------------------------------
   Responsive Fixes (Overall)
   --------------------------------------------- */

/* Equal height + proper alignment between 1024px–1390px */
@media (min-width: 992px) and (max-width: 1390px) {
  .upcoming-meetings .row > .col-lg-6 {
    display: flex;
  }

  .upcoming-meetings .meeting-item {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .upcoming-meetings .meeting-item .down-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* keeps content at top */
  }

  /* Fix the date alignment */
  .upcoming-meetings .meeting-item .down-content .date {
    float: none;
    margin: 0 0 15px;
    text-align: left;
  }

  /* Reset text margin so it aligns cleanly */
  .upcoming-meetings .meeting-item .down-content p {
    margin-left: 0;
    margin-top: auto;
  }
}

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

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

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

/* === 992px === (Tablet) */
@media (max-width: 992px) {
  .main-banner .caption {
    top: 60%;
  }
  .main-banner .caption h2 {
    margin: 10px 0;
    font-size: 22px;
  }
  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
    margin-top: 60px;
  }

  section.upcoming-meetings {
    padding-top: 400px;
  }
  section.upcoming-meetings .categories {
    margin: 0 0 30px 0;
  }

  .accordions,
  section.our-facts .video {
    margin-left: 0;
  }

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

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

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

  /* Filters Fix (Tablet) */
  .meetings-page .filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0;
  }

  .meetings-page .filters li {
    flex: 1 1 auto;
    max-width: 150px;
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
    background: #f5f5f5;
    cursor: pointer;
    transition: 0.3s ease;
  }

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

/* === 767px === (Mobile Landscape) */
@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;
  }
}

/* === 576px === (Mobile Portrait) */
@media (max-width: 576px) {
  /* Filters Fix (Mobile) */
  .meetings-page .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .meetings-page .filters li {
    width: 100%;
    max-width: none;
    font-size: 15px;
  }
}