/********** Template CSS **********/

:root {
  --primary: #ef4444;
  --light: #111827;
  --dark: #0b0f19;

  --navbar-height: 80px;

  /* Glass Navbar */
  --glass-bg: rgba(48, 56, 72, 0.76);
  --glass-bg-mobile: rgba(48, 56, 72, 0.80);
  --glass-border: rgba(255, 255, 255, 0.38);

  --cyan: #22d3ee;
  --blue: #3b82f6;

  --cyan-glow: rgba(34, 211, 238, 0.35);
  --blue-glow: rgba(59, 130, 246, 0.25);
  --red-glow: rgba(239, 68, 68, 0.45);
}

/* =========================================
   UNIVERSAL RESET
   ========================================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;

  width: 100%;
  max-width: 100%;

  overflow-x: hidden !important;

  background-color: var(--dark) !important;
  color: #94a3b8 !important;
}

html,
body {
  overflow-x: hidden !important;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */

.fw-medium {
  font-weight: 600 !important;
}

.fw-semi-bold {
  font-weight: 700 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.text-dark {
  color: #f8fafc !important;
}

.text-muted {
  color: #64748b !important;
}

/* =========================================
   BACK TO TOP
   ========================================= */

.back-to-top {
  position: fixed;
  display: none;

  right: 45px;
  bottom: 45px;

  z-index: 99;
}

/* =========================================
   SPINNER
   ========================================= */

#spinner {
  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0.5s;

  z-index: 99999;
}

#spinner.show {
  transition:
    opacity 0.5s ease-out,
    visibility 0s linear 0s;

  visibility: visible;
  opacity: 1;
}

/* =========================================
   BUTTONS
   ========================================= */

.btn {
  font-family: "Nunito", sans-serif;
  font-weight: 600;

  transition: all 0.3s ease-in-out !important;
}

.btn.btn-primary,
.btn.btn-secondary {
  color: #ffffff;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-primary:focus,
.btn-primary:active {
  box-shadow: none !important;
}

.btn-primary:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;

  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(239, 68, 68, 0.4) !important;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: normal;

  border-radius: 0;
}

/* =========================================
   PREMIUM GLASS NAVBAR — 90% WHITE
   ========================================= */

.navbar {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  height: var(--navbar-height);
  min-height: var(--navbar-height);

  z-index: 1050;

  padding: 0.5rem 0;

  /*
    Ultra-bright premium frosted glass
  */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.17)
    ),
    rgba(48, 56, 72, 0.76) !important;

  /*
    Strong frosted glass effect
  */
  backdrop-filter:
    blur(30px)
    saturate(185%)
    brightness(1.12);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(185%)
    brightness(1.12);

  /*
    Bright premium glass border
  */
  border-bottom:
    1px solid rgba(255, 255, 255, 0.38);

  /*
    Deep cinematic shadow
  */
  box-shadow:
    0 8px 35px rgba(0, 0, 0, 0.38),
    0 0 25px rgba(34, 211, 238, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/*
  Ultra-premium white glass reflection
*/
.navbar::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 10%,
      rgba(255, 255, 255, 0.22) 25%,
      rgba(255, 255, 255, 0.30) 42%,
      rgba(255, 255, 255, 0.20) 55%,
      rgba(255, 255, 255, 0.12) 75%,
      transparent 100%
    );

  opacity: 1;

  mix-blend-mode: screen;
}

/*
  Premium luminous bottom edge
*/
.navbar::after {
  content: "";

  position: absolute;

  left: 6%;
  right: 6%;

  bottom: -1px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.60),
      rgba(34, 211, 238, 0.95),
      rgba(59, 130, 246, 0.85),
      rgba(239, 68, 68, 0.60),
      rgba(255, 255, 255, 0.45),
      transparent
    );

  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.50),
    0 0 20px rgba(59, 130, 246, 0.35),
    0 0 30px rgba(255, 255, 255, 0.18);

  pointer-events: none;
}

/* =========================================
   NAVBAR SHELL
   ========================================= */

.navbar-shell {
  position: relative;

  z-index: 2;

  width: min(100%, 1320px);

  margin: 0 auto;

  padding: 0 1.25rem;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

/* =========================================
   NAVBAR BRAND / LOGO
   ========================================= */

.navbar-brand {
  position: relative;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;

  z-index: 3;
}

/*
  Premium white glow around logo
*/
.navbar-brand::before {
  content: "";

  position: absolute;

  width: 120px;
  height: 70px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.32) 30%,
      rgba(255, 255, 255, 0.14) 55%,
      rgba(255, 255, 255, 0) 78%
    );

  filter: blur(18px);

  border-radius: 50%;

  opacity: 0.95;

  pointer-events: none;

  z-index: 1;
}

/*
  Extra soft white light behind logo
*/
.navbar-brand::after {
  content: "";

  position: absolute;

  width: 75px;
  height: 45px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background:
    rgba(255, 255, 255, 0.18);

  filter: blur(14px);

  border-radius: 50%;

  pointer-events: none;

  z-index: 1;
}

.logo-img {
  position: relative;

  z-index: 3;

  height: 70px;
  width: auto;

  display: block;

  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

/*
  Premium logo hover
*/
.navbar-brand:hover .logo-img {
  transform: scale(1.04);

  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 16px rgba(34, 211, 238, 0.45))
    drop-shadow(0 0 25px rgba(59, 130, 246, 0.25));
}

/* Brand text fallback */

.navbar-brand h1 {
  color: #fff !important;
}

.navbar-brand i {
  color: var(--primary) !important;
}

/* =========================================
   NAVBAR COLLAPSE
   ========================================= */

.navbar-collapse {
  position: relative;

  z-index: 3;

  flex-grow: 1;

  justify-content: flex-end;
}

/* =========================================
   NAVBAR NAV
   ========================================= */

.navbar-nav {
  display: flex;

  align-items: center;

  gap: 0.2rem;
}

/* =========================================
   NAVIGATION LINKS
   ========================================= */

.navbar-light .navbar-nav .nav-link {
  position: relative;

  margin: 0 0.15rem;

  padding: 0.58rem 0.85rem;

  color: #e2e8f0 !important;

  font-size: 0.86rem;

  font-weight: 600;

  letter-spacing: 0.025em;

  text-transform: uppercase;

  outline: none;

  border-radius: 999px;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/*
  Individual navigation glow layer
*/
.navbar-light .navbar-nav .nav-link::before {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      135deg,
      rgba(34, 211, 238, 0.12),
      rgba(59, 130, 246, 0.08)
    );

  opacity: 0;

  transform: scale(0.85);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  z-index: -1;
}

/* Hover */

.navbar-light .navbar-nav .nav-link:hover {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(34, 211, 238, 0.12),
      rgba(59, 130, 246, 0.08)
    );

  box-shadow:
    0 0 15px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transform: translateY(-1px);
}

.navbar-light .navbar-nav .nav-link:hover::before {
  opacity: 1;

  transform: scale(1);
}

/* Active */

.navbar-light .navbar-nav .nav-link.active {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(34, 211, 238, 0.16),
      rgba(59, 130, 246, 0.12)
    );

  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* =========================================
   DROPDOWN ARROW
   ========================================= */

.navbar .dropdown-toggle::after {
  border: none;

  content: "\f107";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  vertical-align: middle;

  margin-left: 6px;

  color: rgba(255, 255, 255, 0.65);

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.navbar .dropdown:hover .dropdown-toggle::after {
  color: var(--cyan);

  transform: rotate(180deg);
}

/* =========================================
   JOIN NOW BUTTON
   ========================================= */

.join-now-btn {
  position: relative;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #ef4444,
      #dc2626
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 999px;

  padding: 0.58rem 1rem !important;

  margin-left: 0.3rem;

  box-shadow:
    0 5px 20px rgba(239, 68, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/*
  Join Now external glow
*/
.join-now-btn::before {
  content: "";

  position: absolute;

  inset: -3px;

  border-radius: inherit;

  background: rgba(239, 68, 68, 0.35);

  filter: blur(10px);

  opacity: 0.5;

  z-index: -1;

  transition: opacity 0.3s ease;
}

.join-now-btn:hover,
.join-now-btn[aria-expanded="true"] {
  background:
    linear-gradient(
      135deg,
      #f87171,
      #dc2626
    ) !important;

  color: #ffffff !important;

  transform: translateY(-2px);

  box-shadow:
    0 8px 25px rgba(239, 68, 68, 0.45),
    0 0 20px rgba(239, 68, 68, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.join-now-btn:hover::before {
  opacity: 0.9;
}

/* =========================================
   DESKTOP DROPDOWNS
   ========================================= */

@media (min-width: 992px) {

  .navbar .nav-item .dropdown-menu {
    display: block;

    margin-top: 0;

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    pointer-events: none;

    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0.3s ease;
  }

  .navbar .nav-item:hover .dropdown-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }

  .navbar .dropdown-menu.fade-down {
    top: 100%;

    transform-origin: 0 0;
  }
}

/* =========================================
   GLASS DROPDOWN
   ========================================= */

.navbar-light .dropdown-menu {
  background:
    linear-gradient(
      135deg,
      rgba(17, 24, 39, 0.75),
      rgba(7, 12, 24, 0.82)
    ) !important;

  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: 14px !important;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 25px rgba(34, 211, 238, 0.08) !important;

  padding: 10px 8px !important;
}

/* Dropdown items */

.navbar-light .dropdown-item {
  color: #cbd5e1 !important;

  background: transparent !important;

  border-radius: 9px !important;

  padding: 10px 18px !important;

  margin-bottom: 2px;

  font-weight: 500;

  font-size: 0.95rem;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.navbar-light .dropdown-item:hover,
.navbar-light .dropdown-item:focus,
.navbar-light .dropdown-item.active {
  color: #ffffff !important;

  background:
    linear-gradient(
      90deg,
      rgba(34, 211, 238, 0.12),
      rgba(59, 130, 246, 0.08)
    ) !important;

  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.08);

  transform: translateX(3px);
}

/* =========================================
   JOIN NOW DROPDOWN
   ========================================= */

.join-now-menu {
  background:
    linear-gradient(
      135deg,
      rgba(17, 24, 39, 0.82),
      rgba(7, 12, 24, 0.9)
    ) !important;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: 12px !important;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(239, 68, 68, 0.08) !important;
}

.join-now-menu .dropdown-item {
  color: #cbd5e1 !important;

  padding: 10px 18px !important;

  border-radius: 8px !important;
}

.navbar-light .join-now-menu .dropdown-item:hover,
.navbar-light .join-now-menu .dropdown-item:focus {
  background:
    linear-gradient(
      90deg,
      rgba(239, 68, 68, 0.2),
      rgba(239, 68, 68, 0.08)
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 0 15px rgba(239, 68, 68, 0.12);
}

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

@media (max-width: 991.98px) {

  :root {
    --navbar-height: 72px;
  }

  .navbar {
    height: var(--navbar-height);

    min-height: var(--navbar-height);

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.27),
        rgba(255, 255, 255, 0.15)
      ),
      rgba(48, 56, 72, 0.80) !important;

    backdrop-filter:
      blur(30px)
      saturate(185%)
      brightness(1.12);

    -webkit-backdrop-filter:
      blur(30px)
      saturate(185%)
      brightness(1.12);

    border-bottom:
      1px solid rgba(255, 255, 255, 0.38);

    box-shadow:
      0 8px 35px rgba(0, 0, 0, 0.42),
      0 0 25px rgba(34, 211, 238, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .navbar-shell {
    padding: 0 1rem;
  }

  .logo-img {
    height: 58px;
  }

  /* Mobile menu glass */

  .navbar-collapse {
    margin-top: 8px;

    padding: 14px !important;

    background:
      linear-gradient(
        135deg,
        rgba(17, 24, 39, 0.78),
        rgba(7, 12, 24, 0.88)
      ) !important;

    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 0 0 18px 18px;

    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.5),
      0 0 25px rgba(34, 211, 238, 0.08);
  }

  .navbar-nav {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-light .navbar-nav .nav-link {
    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding: 14px 18px !important;

    margin: 4px 0;

    font-size: 16px;

    border-radius: 12px;

    text-align: left !important;
  }

  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link.active {
    background:
      linear-gradient(
        90deg,
        rgba(34, 211, 238, 0.13),
        rgba(59, 130, 246, 0.08)
      );

    box-shadow:
      0 0 15px rgba(34, 211, 238, 0.08);
  }

  /* Mobile dropdown */

  .navbar-light .dropdown-menu {
    display: none !important;

    visibility: visible;

    opacity: 1;

    transform: none;

    box-shadow: none !important;

    border: none !important;

    background:
      rgba(15, 23, 42, 0.65) !important;

    backdrop-filter: blur(12px);

    padding: 8px !important;

    margin-top: 5px !important;

    pointer-events: auto;
  }

  .navbar-light .dropdown.show .dropdown-menu,
  .navbar-light .dropdown-menu.show {
    display: block !important;

    animation:
      slideDownMobile 0.3s ease-out forwards;
  }

  .navbar-light .dropdown-menu .dropdown-item {
    color: #e5e7eb !important;

    padding: 12px 20px !important;

    margin-bottom: 4px;

    border-radius: 8px !important;
  }

  .navbar-light .dropdown-menu .dropdown-item:hover,
  .navbar-light .dropdown-menu .dropdown-item:focus {
    background:
      rgba(34, 211, 238, 0.1) !important;

    color: var(--cyan) !important;
  }

  /* Join Now */

  .join-now-btn {
    width: 100% !important;

    justify-content: center;

    margin: 10px 0 4px !important;

    padding: 13px !important;
  }
}

/* =========================================
   MOBILE DROPDOWN ANIMATION
   ========================================= */

@keyframes slideDownMobile {

  from {
    opacity: 0;

    transform: translateY(-10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

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

.navbar-light .navbar-toggler {
  position: relative;

  z-index: 10;

  background:
    rgba(17, 24, 39, 0.65) !important;

  border:
    1px solid rgba(34, 211, 238, 0.3) !important;

  border-radius: 8px !important;

  padding: 7px 10px !important;

  transition:
    all 0.3s ease-in-out !important;

  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.1) !important;

  outline: none !important;
}

.navbar-light .navbar-toggler:hover,
.navbar-light .navbar-toggler:focus {
  background:
    rgba(31, 41, 55, 0.85) !important;

  border-color:
    var(--cyan) !important;

  box-shadow:
    0 0 15px rgba(34, 211, 238, 0.5),
    inset 0 0 8px rgba(34, 211, 238, 0.2) !important;

  transform: translateY(-2px);
}

/* Hamburger */

.navbar-light .navbar-toggler-icon {
  background-image: none !important;

  display: inline-block;

  width: 24px;

  height: 2px;

  background-color: #ffffff !important;

  position: relative;

  transition:
    all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  vertical-align: middle;

  margin-top: 6px;

  margin-bottom: 6px;

  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.4);
}

.navbar-light .navbar-toggler-icon::before,
.navbar-light .navbar-toggler-icon::after {
  content: "";

  position: absolute;

  width: 24px;

  height: 2px;

  background-color: #ffffff !important;

  left: 0;

  transition:
    all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.4);
}

.navbar-light .navbar-toggler-icon::before {
  top: -7px;
}

.navbar-light .navbar-toggler-icon::after {
  top: 7px;
}

/* Hamburger X */

.navbar-light
.navbar-toggler[aria-expanded="true"]
.navbar-toggler-icon {
  background-color: transparent !important;

  box-shadow: none !important;
}

.navbar-light
.navbar-toggler[aria-expanded="true"]
.navbar-toggler-icon::before {
  top: 0;

  transform: rotate(45deg);
}

.navbar-light
.navbar-toggler[aria-expanded="true"]
.navbar-toggler-icon::after {
  top: 0;

  transform: rotate(-45deg);
}

/* =========================================
   HERO / PAGE HEADER
   ========================================= */

.page-header {
  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  min-height: 50vh;

  display: flex;

  align-items: center;
}

.hero-gradient {
  background:
    linear-gradient(
      to right,
      rgba(15, 23, 42, 0.98) 0%,
      rgba(15, 23, 42, 0.75) 45%,
      rgba(15, 23, 42, 0.1) 100%
    );
}

@media (max-width: 991.98px) {

  .hero-gradient {
    background:
      linear-gradient(
        to right,
        rgba(15, 23, 42, 0.95) 0%,
        rgba(15, 23, 42, 0.85) 100%
      );
  }
}

.page-header-inner {
  background:
    rgba(15, 23, 43, 0.7);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--light);
}

/* =========================================
   SECTION TITLE
   ========================================= */

.section-title {
  position: relative;

  display: inline-block;

  text-transform: uppercase;
}

.section-title::before {
  position: absolute;

  content: "";

  width: calc(100% + 80px);

  height: 2px;

  top: 4px;

  left: -40px;

  background: var(--primary);

  z-index: -1;
}

.section-title::after {
  position: absolute;

  content: "";

  width: calc(100% + 120px);

  height: 2px;

  bottom: 5px;

  left: -60px;

  background: var(--primary);

  z-index: -1;
}

.section-title.text-start::before {
  width: calc(100% + 40px);

  left: 0;
}

.section-title.text-start::after {
  width: calc(100% + 60px);

  left: 0;
}

/* =========================================
   SERVICES
   ========================================= */

.service-item {
  background: var(--light);

  transition: 0.5s;

  border-radius: 10px;

  overflow: hidden;

  padding: 0 !important;
}

.service-item .service-content {
  padding: 1.5rem;
}

.service-item-img {
  width: 100%;

  height: 220px;

  object-fit: cover;

  border-bottom: 3px solid var(--primary);
}

.service-item * {
  transition: 0.5s;
}

.service-item:hover * {
  color: var(--light) !important;
}

/* =========================================
   COURSES
   ========================================= */

.category img,
.course-item img {
  transition: 0.5s;
}

.course-item {
  padding: 0 !important;

  overflow: hidden;

  border-radius: 16px !important;
}

.course-item .course-content {
  padding: 1.5rem;
}

.course-img-top {
  width: 100%;

  height: 220px;

  object-fit: cover;

  border-bottom: 3px solid var(--primary);
}

/* =========================================
   TEAM
   ========================================= */

.team-item img {
  transition: 0.5s;
}

.team-item:hover img {
  transform: scale(1.1);
}

/* =========================================
   CINEMATIC BACKGROUNDS
   ========================================= */

.cinematic-bg {
  background-color: #0b0f19 !important;

  background-image:
    linear-gradient(
      rgba(11, 15, 25, 0.88),
      rgba(11, 15, 25, 0.95)
    ),
    url("../img/hero_ai_2_1774331956382.png") !important;

  background-size: cover !important;

  background-attachment: scroll;

  background-position: center !important;
}

.cinematic-bg-alt {
  background-color: #0f172a !important;

  background-image:
    linear-gradient(
      rgba(15, 23, 42, 0.92),
      rgba(15, 23, 42, 0.92)
    ),
    url("../img/course_cloud_1774332038696.png") !important;

  background-size: cover !important;

  background-attachment: fixed !important;

  background-position: center !important;

  padding: 100px 0;

  border-top:
    1px solid rgba(255, 255, 255, 0.05);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================
   CINEMATIC CARD SYSTEM
   ========================================= */

.course-item,
.project-img-card,
.wcu-card,
.service-item,
.service-icon-box,
.team-item,
.testimonial-item,
.placement-box {
  position: relative;

  border-radius: 16px !important;

  background:
    rgba(17, 24, 39, 0.4) !important;

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: none !important;

  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(109, 40, 217, 0.1) !important;

  transition:
    all 0.4s cubic-bezier(
      0.25,
      0.8,
      0.25,
      1
    ) !important;

  z-index: 1;
}

/* Gradient border */

.course-item::before,
.project-img-card::before,
.wcu-card::before,
.service-item::before,
.service-icon-box::before,
.team-item::before,
.testimonial-item::before,
.placement-box::before {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 16px;

  padding: 2px;

  background:
    linear-gradient(
      135deg,
      #22d3ee,
      #3b82f6,
      #6d28d9
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  mask-composite: exclude;

  pointer-events: none;

  z-index: 20;

  opacity: 0.5;

  transition:
    all 0.4s ease;
}

/* Inner glass highlight */

.course-item::after,
.project-img-card::after,
.wcu-card::after,
.service-item::after,
.service-icon-box::after,
.team-item::after,
.testimonial-item::after,
.placement-box::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 16px;

  box-shadow:
    inset 0 1px 1px
    rgba(255, 255, 255, 0.1);

  pointer-events: none;

  z-index: 10;
}

/* Card content */

.course-item .course-content,
.service-item .service-content {
  background: transparent !important;
}

.course-item .course-content * {
  color: inherit !important;
}

.course-item .course-content p {
  color: #94a3b8 !important;
}

.course-img-top {
  border-bottom: none !important;
}

/* Hover */

.course-item:hover,
.project-img-card:hover,
.wcu-card:hover,
.service-item:hover,
.service-icon-box:hover,
.team-item:hover,
.testimonial-item:hover,
.placement-box:hover {
  transform:
    translateY(-8px)
    scale(1.01) !important;

  background:
    rgba(17, 24, 39, 0.6) !important;

  box-shadow:
    0 0 30px rgba(34, 211, 238, 0.3),
    0 20px 40px rgba(109, 40, 217, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Border hover */

.course-item:hover::before,
.project-img-card:hover::before,
.wcu-card:hover::before,
.service-item:hover::before,
.service-icon-box:hover::before,
.team-item:hover::before,
.testimonial-item:hover::before,
.placement-box:hover::before {
  opacity: 1;
}

/* =========================================
   SERVICE ICON BOX
   ========================================= */

.service-icon-box {
  padding: 35px 20px;

  text-align: center;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

.service-icon-box i {
  color: #cbd5e1;

  margin-bottom: 20px;

  transition: all 0.3s ease;
}

.service-icon-box h5 {
  color: #e2e8f0 !important;

  margin-bottom: 0;

  transition: all 0.3s ease;
}

.service-icon-box:hover i {
  color: var(--primary) !important;

  transform: scale(1.15);
}

/* =========================================
   PROJECT IMAGE CARDS
   ========================================= */

.project-img-card {
  position: relative;

  height: 250px;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  cursor: pointer;
}

.project-img-card img {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;

  z-index: 1;
}

.project-img-overlay {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.3) 100%
    );

  z-index: 2;

  transition: all 0.4s ease;
}

.project-img-card h5 {
  position: relative;

  z-index: 3;

  color:
    rgba(255, 255, 255, 0.85) !important;

  margin-bottom: 20px;

  font-weight: 700;

  letter-spacing: 0.5px;

  transition: all 0.4s ease;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.project-img-card:hover {
  transform:
    translateY(-10px) !important;

  box-shadow:
    0 15px 35px rgba(59, 130, 246, 0.3),
    0 0 15px rgba(59, 130, 246, 0.2) !important;
}

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

.project-img-card:hover .project-img-overlay {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(59, 130, 246, 0.25) 100%
    );
}

.project-img-card:hover h5 {
  color: #ffffff !important;

  transform: translateY(-5px);

  text-shadow:
    0 0 12px rgba(59, 130, 246, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

.project-img-card img,
.project-img-card .project-img-overlay {
  border-radius: 14px !important;
}

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

.wcu-card {
  position: relative;

  padding: 40px 28px;

  min-height: 340px;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;
}

.wcu-content {
  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;

  opacity: 1;

  transform: translateY(0);
}

.wcu-content i {
  color: var(--primary);

  font-size: 52px;

  margin-bottom: 22px;
}

.wcu-content h5 {
  color: #fff;

  font-size: 24px;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.5px;

  margin-bottom: 18px;

  min-height: 68px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.wcu-content p {
  color: #cbd5e1;

  font-size: 15px;

  line-height: 1.9;

  letter-spacing: 0.3px;

  text-align: center;

  margin: 0;
}

/* =========================================
   TESTIMONIAL
   ========================================= */

.testimonial-carousel::before {
  position: absolute;

  content: "";

  top: 0;
  left: 0;

  height: 100%;

  width: 0;

  background:
    linear-gradient(
      to right,
      rgba(11, 15, 25, 1),
      rgba(11, 15, 25, 0)
    );

  z-index: 1;
}

.testimonial-carousel::after {
  position: absolute;

  content: "";

  top: 0;
  right: 0;

  height: 100%;

  width: 0;

  background:
    linear-gradient(
      to left,
      rgba(11, 15, 25, 1),
      rgba(11, 15, 25, 0)
    );

  z-index: 1;
}

@media (min-width: 768px) {

  .testimonial-carousel::before,
  .testimonial-carousel::after {
    width: 200px;
  }
}

@media (min-width: 992px) {

  .testimonial-carousel::before,
  .testimonial-carousel::after {
    width: 300px;
  }
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
  transition: 0.5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
  background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
  color: #ffffff !important;
}

.testimonial-carousel .owl-dots {
  margin-top: 24px;

  display: flex;

  align-items: flex-end;

  justify-content: center;
}

.testimonial-carousel .owl-dot {
  position: relative;

  display: inline-block;

  margin: 0 5px;

  width: 15px;

  height: 15px;

  border: 1px solid #cccccc;

  transition: 0.5s;
}

.testimonial-carousel .owl-dot.active {
  background: var(--primary);

  border-color: var(--primary);
}

/* Testimonial cards */

.testimonial-carousel .owl-item .testimonial-item {
  background:
    rgba(0, 0, 0, 0.4) !important;

  border-radius: 16px !important;

  padding: 25px 20px !important;

  margin: 30px 15px;

  opacity: 0.6;

  filter: blur(1px);

  transform: scale(0.85);

  transition:
    all 0.4s cubic-bezier(
      0.25,
      0.8,
      0.25,
      1
    ) !important;

  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4) !important;

  border: none !important;
}

.testimonial-carousel
.owl-item
.testimonial-item h4 {
  font-size: 1.1rem !important;

  margin-bottom: 0.5rem !important;

  color: #e5e7eb !important;
}

.testimonial-carousel
.owl-item
.testimonial-item p {
  font-size: 0.95rem !important;

  color: #e5e7eb !important;
}

.testimonial-avatar {
  width: 65px;

  height: 65px;

  font-size: 26px;

  font-weight: bold;

  border: 3px solid var(--cyan);

  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.4);

  margin-bottom: 1rem !important;
}

.testimonial-carousel
.owl-item
.testimonial-item:hover {
  transform: scale(0.95);

  opacity: 0.9;

  filter: blur(0);

  box-shadow:
    0 10px 30px rgba(255, 255, 255, 0.15) !important;
}

.testimonial-carousel
.owl-item.center
.testimonial-item {
  background: #ef4444 !important;

  opacity: 1;

  filter: blur(0);

  transform: scale(1);

  box-shadow:
    0 15px 35px
    rgba(239, 68, 68, 0.4) !important;

  z-index: 10;
}

.testimonial-carousel
.owl-item.center
.testimonial-item h4,
.testimonial-carousel
.owl-item.center
.testimonial-item p {
  color: #ffffff !important;
}

.testimonial-carousel
.owl-item.center
.testimonial-avatar {
  border-color: #ffffff !important;

  box-shadow:
    0 0 15px
    rgba(255, 255, 255, 0.4) !important;
}

/* =========================================
   CONTACT FORM
   ========================================= */

.form-control {
  background-color: transparent !important;

  border:
    1px solid rgba(255, 255, 255, 0.2) !important;

  border-radius: 8px !important;

  color: #fff !important;

  height: 55px;

  transition:
    all 0.3s ease !important;

  box-shadow:
    0 0 8px
    rgba(255, 255, 255, 0.05) !important;
}

.form-floating > .form-control {
  padding-left: 20px !important;

  padding-right: 20px !important;
}

textarea.form-control {
  min-height: 150px !important;

  height: auto !important;
}

.form-control::placeholder {
  color: #9ca3af !important;

  opacity: 1;
}

.form-control:focus,
.form-control:hover {
  background-color: transparent !important;

  border-color:
    var(--cyan) !important;

  box-shadow:
    0 0 15px rgba(34, 211, 238, 0.4),
    inset 0 0 8px
    rgba(34, 211, 238, 0.1) !important;

  outline: none !important;
}

.form-floating > label {
  color: #9ca3af !important;

  padding-left: 20px !important;

  transition: all 0.3s ease;
}

.form-floating >
.form-control:focus ~ label,
.form-floating >
.form-control:not(:placeholder-shown) ~ label {
  color: var(--cyan) !important;

  background-color:
    #0b0f19 !important;

  padding: 0 8px !important;

  transform:
    scale(0.85)
    translateY(-1.1rem)
    translateX(0.5rem) !important;

  height: auto !important;

  border-radius: 4px;
}

.mail {
  cursor: pointer;
}

/* =========================================
   GLOBAL SECTION SPACING
   ========================================= */

section:not(#home):not(.hero-banner-section) {
  margin: 0 !important;

  padding: 40px 0 !important;

  background-size: cover !important;

  background-position: center !important;

  background-repeat: no-repeat !important;

  height: auto !important;

  min-height: 50vh !important;
}

.hero-banner-section {
  margin: 0 !important;

  padding: 0 !important;
}

header#home {
  padding-top: var(--navbar-height);
}

.container,
.container-fluid,
.container-xxl,
.row {
  margin-top: 0 !important;

  margin-bottom: 0 !important;
}

section.container-fluid.p-0,
header.container-fluid.p-0 {
  width: 100% !important;

  max-width: 100% !important;
}

/* =========================================
   HERO VIDEO
   ========================================= */

#home .owl-carousel-item {
  position: relative;

  min-height:
    calc(100vh - var(--navbar-height));

  height:
    calc(100vh - var(--navbar-height));

  overflow: hidden;
}

#home .hero-video {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  display: block;
}

#home .hero-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(8, 12, 24, 0.82) 0%,
      rgba(8, 12, 24, 0.45) 55%,
      rgba(8, 12, 24, 0.12) 100%
    );
}

.hero-title {
  font-size:
    clamp(1.8rem, 5vw, 3rem) !important;
}

/* =========================================
   HERO NAVIGATION
   ========================================= */

#home .header-carousel .owl-nav {
  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  transform: translateY(-50%);

  display: flex;

  justify-content: space-between;

  padding: 0 20px;

  z-index: 100;

  pointer-events: none;
}

#home .header-carousel .owl-prev,
#home .header-carousel .owl-next {
  pointer-events: auto;

  width: 32px;

  height: 32px;

  display: flex !important;

  align-items: center;

  justify-content: center;

  background:
    rgba(0, 0, 0, 0.35) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.4) !important;

  border-radius: 10px !important;

  color: #fff !important;
}

#home .header-carousel .owl-prev:hover,
#home .header-carousel .owl-next:hover {
  background:
    #06bbcc !important;

  border-color:
    #06bbcc !important;
}

#home .header-carousel .owl-prev span,
#home .header-carousel .owl-next span {
  font-size: 30px;

  line-height: 1;
}

/* =========================================
   FOOTER
   ========================================= */

.footer {
  background-color:
    #070a12 !important;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.05);
}

.footer,
.footer p,
.footer span {
  color: #94a3b8 !important;
}

.footer a {
  color: #cbd5e1 !important;
}

.footer a:hover {
  color: var(--primary) !important;
}

.footer .btn.btn-social {
  margin-right: 5px;

  width: 35px;

  height: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--light);

  font-weight: normal;

  border:
    1px solid #ffffff;

  border-radius: 35px;

  transition: 0.3s;
}

.footer .btn.btn-social:hover {
  color: var(--primary);
}

.footer .btn.btn-link {
  display: block;

  margin-bottom: 5px;

  padding: 0;

  text-align: left;

  color: #ffffff;

  font-size: 15px;

  font-weight: normal;

  text-transform: capitalize;

  transition: 0.3s;
}

.footer .btn.btn-link::before {
  position: relative;

  content: "\f105";

  font-family:
    "Font Awesome 5 Free";

  font-weight: 900;

  margin-right: 10px;
}

.footer .btn.btn-link:hover {
  letter-spacing: 1px;

  box-shadow: none;
}

.footer .copyright {
  padding: 25px 0;

  font-size: 15px;

  border-top:
    1px solid
    rgba(256, 256, 256, 0.1);
}

.footer .copyright a {
  color: var(--light);
}

.footer .footer-menu a {
  margin-right: 15px;

  padding-right: 15px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.1);
}

.footer .footer-menu a:last-child {
  margin-right: 0;

  padding-right: 0;

  border-right: none;
}

/* =========================================
   SECTION TITLE BACKGROUND
   ========================================= */

.cinematic-bg .section-title {
  background-color:
    #0b0f19 !important;
}

.cinematic-bg-alt .section-title {
  background-color:
    #0f172a !important;
}

/* =========================================
   TABS
   ========================================= */

@media (max-width: 991px) {

  .custom-tabs .nav-link {
    min-height: 58px !important;

    font-size: 14px !important;

    padding: 12px 8px !important;
  }

  .wcu-card {
    min-height: 280px !important;

    padding: 28px 20px !important;
  }
}

/* =========================================
   PROJECT / IMAGE MOBILE
   ========================================= */

@media (max-width: 768px) {

  .project-img-card {
    height: 210px !important;
  }

  .mv-image-wrap {
    height: 320px !important;

    max-width: 100% !important;
  }
}

/* =========================================
   VIDEO RESPONSIVENESS
   ========================================= */

.video-box {
  height: auto !important;

  aspect-ratio: 16 / 9;

  max-height: 320px;
}

@media (max-width: 576px) {

  .video-box {
    max-height: 240px;
  }
}

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

@media (max-width: 991.98px) {

  #home .owl-carousel-item {
    height: 600px;
  }

  #home .hero-video {
    object-position: center;
  }

  #home h1 {
    font-size: 44px;

    line-height: 1.2;
  }
}

@media (max-width: 767.98px) {

  #home .owl-carousel-item {
    height: 520px;
  }

  #home .hero-video {
    object-fit: cover;

    object-position: center;
  }

  #home .hero-overlay {
    justify-content: center;

    text-align: center;
  }

  #home h1 {
    font-size: 32px;

    line-height: 1.25;
  }

  #home p {
    font-size: 15px;
  }

  #home .btn {
    width: 210px;
  }
}

/* =========================================
   MOBILE SMALL SCREEN
   ========================================= */

@media (max-width: 575.98px) {

  .navbar-shell {
    padding-left: 0.75rem;

    padding-right: 0.75rem;
  }

  .logo-img {
    height: 52px;
  }

  .navbar-collapse {
    padding: 12px !important;
  }

  .navbar-light .navbar-nav .nav-link {
    font-size: 15px;

    min-height: 50px;

    padding: 13px 16px !important;
  }

  .join-now-btn {
    font-size: 15px;

    min-height: 50px;
  }
}