@charset "UTF-8";
/****** Utils ******/
:root {
  --white: #fff;
  --dark: #000;
  --black: #000;
  --light: #f8f8f8;
  --primary: #000;
  --primary-hover: #161618;
  --secondary: #ff3c38;
  --secondary-hover: #ed1143;
  --info-gradient: linear-gradient(
    180deg,
    rgba(217, 217, 217, 0) 0%,
    #5625e8 100%
  );
  --eduvers-primary: #f8f4f2;
  --eduvers-white-rgb: 255, 255, 255;
  --eduvers-black: #0d2944;
  --eduvers-primary-rgb: 248, 244, 242;
  --primary-gradient: var(--primary-gradient);
  --primary-100: #d6d4e4;
  --gray-100: #e7e7e7;
  --gray-200: #d1d1d1;
  --gray-300: #b0b0b0;
  --gray-400: #888888;
  --gray-500: #6d6d6d;
  --gray-600: #5d5d5d;
  --gray-700: #4f4f4f;
  --gray-800: #3d3d3d;
  --gray-900: #191919;
  --grey-10: #6c757d;
  --grey-20: #5d636f;
  --white-20: #ffffff;
  --black-30: #232a39;
  --light-100: #fefefe;
  --light-200: #fcfcfd;
  --light-300: #fbfbfd;
  --light-400: #f9fafc;
  --light-500: #f8fafb;
  --light-600: #f7f9fb;
  --light-700: #f6f8fa;
  --light-800: #f5f7fa;
  --light-900: #f4f6f9;
  --primary-transparent: #ebe9f1;
  --blue-gradient100: linear-gradient(135deg, #392c7d 0%, #5c3cff 100%);
  --pink-gradient100: linear-gradient(135deg, #7b2d8b 0%, #c53cff 100%);
  --purple-gradient100: linear-gradient(135deg, #3c2d8b 0%, #7b3cff 100%);
}

.theme-1 {
  --primary: #ff3c38;
  --primary-hover: #ed1143;
  --secondary: #f8b102;
  --secondary-hover: #dd9d02;
  --primary-transparent: #e8efef;
  --primary-100: #092425;
  --light: #e7e7e7;
  --white-100: #ffffff1a;
  --white-200: #ffffffe0;
  --secondary-gradient-100: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #f8b102 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.theme-4 {
  --primary: #9946ff;
  --primary-hover: #442c7d;
  --dark: #08131e;
  --light: #f7f0ff;
  --dark-300: #0000004d;
  --white-300: #ffffff21;
  --primary-gradient-400: linear-gradient(90deg, #442c7d 50%, #fff 50%);
  --info-gradient-400: linear-gradient(
    180deg,
    rgba(217, 217, 217, 0) 0%,
    #9946ff 100%
  );
  --light-gradient-400: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
  --white-gradient-400: linear-gradient(
    111deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffffb3 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.theme-2 {
  --primary: #9a2dff;
  --primary-hover: #8726e1;
  --primary-950: #50237a;
  --secondary: #f8b102;
  --secondary-hover: #ffd602;
  --secondary-500: #db9c02;
  --secondary-100: #e6ac2dcf;
  --secondary-950: #fff2dd;
  --info-950: #a24cff;
  --pink-950: #fd4da0;
  --indigo-900: #673bea;
  --success-950: #1cce6b;
  --gray-200: #e2e8f0;
  --white-100: #ffffff33;
}

header {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/******* Base *******/
/****** Utils ******/
body {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.5;
  background-color: var(--white);
  overflow-x: clip;
}

#rays-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a12;
  overflow: hidden;
  /* the progress % text updates every 20ms; containment keeps those updates
     from re-laying-out the page underneath */
  contain: layout paint style;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

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

@keyframes gridpulse {
  0%,
  100% {
    background: transparent;
  }
  50% {
    background: rgba(229, 57, 53, 0.04);
  }
}

/* ── Glow blob ── */
#rays-loader::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(229, 57, 53, 0.12) 0%,
    transparent 70%
  );
  animation: blobmove 4s infinite ease-in-out;
}

@keyframes blobmove {
  0%,
  100% {
    transform: translate(-80px, -60px) scale(1);
  }
  50% {
    transform: translate(80px, 60px) scale(1.2);
  }
}

/* ── Center content ── */
.loader-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: min(380px, 90vw);
}

/* ── Logo ── */
.loader-logo {
  animation: logofadein 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loader-logo img {
  width: 160px;
  filter: drop-shadow(0 0 24px rgba(229, 57, 53, 0.4));
}

@keyframes logofadein {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Progress bar ── */
.loader-bar-wrap {
  width: 100%;
  animation: logofadein 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loader-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.loader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
}

.loader-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #e53935, #ff7043);
  border-radius: 99px;
  /* progress is driven with transform: scaleX() so it animates on the compositor */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(229, 57, 53, 0.6);
}

.loader-percent {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  font-family: "Courier New", monospace;
  text-align: right;
}

/* ── Tagline ── */
.loader-tagline {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.01em;
  font-family: Georgia, serif;
}

.loader-tagline .word {
  opacity: 0;
  transform: translateY(12px);
  display: inline-block;
  animation: wordfade 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.loader-tagline .w1 {
  animation-delay: 0.5s;
}
.loader-tagline .w2 {
  animation-delay: 0.7s;
}
.loader-tagline .w3 {
  animation-delay: 0.9s;
}
.loader-tagline .w4 {
  animation-delay: 1.1s;
}

.loader-tagline .highlight {
  color: var(--secondary);
  text-shadow: 0 0 20px rgba(255, 112, 67, 0.5);
}

.loader-tagline .rupee {
  color: #2196f3;
}

@keyframes wordfade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Exit animation ── */
#rays-loader.exit {
  animation: loaderExit 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loaderExit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }
}

::selection {
  background: var(--primary);
  color: var(--white);
  text-shadow: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

* {
  outline: none;
}

button {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
button:focus {
  box-shadow: none !important;
}

p {
  margin-bottom: 20px;
}
p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--gray-900);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.3;
}

ol,
ul {
  list-style: none;
  margin-block-end: 0;
  padding: 0;
}

ul {
  list-style: none;
}
ul .btn-primary:not(:disabled):not(.disabled):active:focus,
ul .btn-primary:not(:disabled):not(.disabled).active:focus {
  box-shadow: none;
}

/****** Utils ******/
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: #03c95a !important;
  border-color: #03c95a !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-danger {
  background-color: #e70d0d !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: #03c95a !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-danger {
  background-color: #e70d0d !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--white);
}

.bg-secondary {
  background-color: var(--secondary) !important;
  border: 1px solid var(--secondary) !important;
  color: var(--white);
}

.bg-success {
  background-color: #03c95a !important;
  border: 1px solid #03c95a !important;
  color: var(--white);
}

.bg-warning {
  background-color: #ffc107 !important;
  border: 1px solid #ffc107 !important;
  color: var(--white);
}

.bg-danger {
  background-color: #e70d0d !important;
  border: 1px solid #e70d0d !important;
  color: var(--white);
}

.bg-light {
  color: var(--gray-500);
}

.bg-primary-transparent {
  background-color: var(--primary-transparent) !important;
  color: var(--primary) !important;
}
.bg-primary-transparent:hover {
  background-color: var(--primary-transparent) !important;
  color: var(--primary) !important;
}

.bg-secondary-transparent {
  background-color: #ffedf0 !important;
  color: var(--secondary) !important;
}
.bg-secondary-transparent:hover {
  background-color: #ffedf0 !important;
  color: var(--secondary) !important;
}

.bg-success-transparent {
  background-color: #d2f5e1 !important;
  color: #03c95a !important;
}
.bg-success-transparent:hover {
  background-color: #d2f5e1 !important;
  color: #03c95a !important;
}

.bg-warning-transparent {
  background-color: #fff4d2 !important;
  color: #ffc107 !important;
}
.bg-warning-transparent:hover {
  background-color: #fff4d2 !important;
  color: #ffc107 !important;
}

.bg-danger-transparent {
  background-color: #f6cece !important;
  color: #e70d0d !important;
}
.bg-danger-transparent:hover {
  background-color: #f6cece !important;
  color: #e70d0d !important;
}

.bg-skyblue-transparent {
  background-color: #e9fafe !important;
  color: #0dcaf0 !important;
}
.bg-skyblue-transparent:hover {
  background-color: #e9fafe !important;
  color: #0dcaf0 !important;
}

.bg-danger-transparent {
  background: #fae7e7;
  border-color: #fae7e7 !important;
}

.bg-info-950 {
  background: var(--info-950) !important;
}

.bg-pink-950 {
  background: var(--pink-950) !important;
}

.bg-indigo-900 {
  background: var(--indigo-900) !important;
}

.bg-success-950 {
  background: var(--success-950) !important;
}

/******* Components ******/
/****** Utils ******/
.avatar {
  position: relative;
  height: 2.625rem;
  width: 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--white);
  font-weight: 500;
}
.avatar a.badge:hover {
  color: var(--white);
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #9e9d9d;
  background: #9e9d9d;
}
.avatar.avatar-rounded {
  border-radius: 50%;
}
.avatar.avatar-rounded img {
  border-radius: 50%;
}
.avatar.online:before,
.avatar.offline:before {
  position: absolute;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  inset-inline-end: 0;
  inset-block-end: 0;
  border: 2px solid var(--white) !important;
  z-index: 1;
}
.avatar.online:before {
  background-color: #03c95a;
}
.avatar.offline:before {
  background-color: var(--gray-500);
}
.avatar.avatar-lg {
  width: 2.813rem;
  height: 2.813rem;
  line-height: 2.813rem;
  font-size: 1rem;
}
.avatar.avatar-lg.online:before,
.avatar.avatar-lg.offline:before {
  width: 0.8rem;
  height: 0.8rem;
}
.avatar.avatar-lg svg {
  width: 1.8rem;
  height: 1.8rem;
}

.avatar-list-stacked {
  padding: 0;
}
.avatar-list-stacked .avatar {
  margin-inline-end: -20px !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  transition: transform ease 200ms;
}
.avatar-list-stacked .avatar:last-child {
  margin-inline-end: 0 !important;
}
.avatar-list-stacked .avatar:hover {
  z-index: 1;
  transform: translateY(-0.188rem);
}

/****** Utils ******/

.shadow-sm {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1) !important;
}

.list-group-item {
  border-color: var(--light-900) !important;
  color: inherit;
}

.list-group a.active {
  background: var(--primary-100);
  color: var(--primary);
}
.list-group a:hover {
  background: var(--primary-100);
  color: var(--primary);
}

.custom-offcanvas.offcanvas.offcanvas-end {
  width: 600px !important;
}
.custom-offcanvas.offcanvas.offcanvas-end .offcanvas-header .close-btn {
  width: 20px;
  height: 20px;
  color: var(--white);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  background-color: var(--gray-500);
  border: 1px solid var(--gray-500);
}
.custom-offcanvas.offcanvas.offcanvas-end .offcanvas-header .close-btn:hover {
  background: #e70d0d;
  border-color: #e70d0d;
}

hr {
  border-color: var(--light-900);
}

/****** Utils ******/
.btn-primary {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
  font-size: 14px;
  font-size: 14px;
}

.btn.active,
.btn.show,
.btn.show:hover,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

button {
  cursor: pointer;
}
button:focus {
  outline: 0;
  box-shadow: none;
}

.btn {
  border-radius: 1.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 14px;
  transition: all 0.5s;
  font-weight: 500;
}
.btn:focus {
  box-shadow: none !important;
}
.btn:hover {
  transition: all 0.5s;
}
.btn.btn-xl {
  padding: 9px 16px;
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .btn.btn-xl {
    padding: 8px 12px;
    font-size: 14px;
  }
}
.btn.btn-lg {
  padding: 0.53rem 1rem;
  font-size: 14px;
}
.btn.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.btn.btn-md {
  padding: 6px 16px;
  font-size: 14px;
}
.btn.btn-xl {
  padding: 9px 16px;
  font-size: 14px;
}
.btn.btn-primary {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: var(--primary-hover);
  border: 1px solid var(--primary-hover);
  color: var(--white);
}
.btn.btn-secondary {
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
  color: var(--white);
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary.focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active {
  background-color: var(--secondary-hover);
  border: 1px solid var(--secondary-hover);
  color: var(--white);
}
.btn.btn-success {
  background-color: #03c95a;
  border: 1px solid #03c95a;
  color: var(--white);
}
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success.focus,
.btn.btn-success:active,
.btn.btn-success.active {
  background-color: #029743;
  border: 1px solid #029743;
  color: var(--white);
}
.btn.btn-danger {
  background-color: #e70d0d;
  border: 1px solid #e70d0d;
  color: var(--white);
}
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger.focus,
.btn.btn-danger:active,
.btn.btn-danger.active {
  background-color: #b70b0b;
  border: 1px solid #b70b0b;
  color: var(--white);
}
.btn.btn-primary {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: var(--primary-hover);
  border: 1px solid var(--primary-hover);
  color: var(--white);
}
.btn.btn-white {
  background-color: var(--white);
  border-color: var(--gray-100);
  color: var(--gray-900);
}
.btn.btn-white.show,
.btn.btn-white:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}
.btn.btn-dark {
  background: var(--gray-900) !important;
  border-color: var(--gray-900) !important;
  box-shadow: none;
  color: var(--white);
}
.btn.btn-dark:hover {
  background: #252a30 !important;
}

@media (max-width: 575.98px) {
  .btn {
    padding: 5px 12px;
  }
}

.theme-1 .btn-secondary {
  color: #191919 !important;
}
.theme-1 .btn-primary:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #191919 !important;
}

/****** Utils ******/
.badge.badge-soft-primary {
  background: rgba(var(--primary), 0.1);
  color: var(--primary);
}
.badge.badge-light {
  color: var(--gray-900) !important;
}
.badge.badge-light {
  color: var(--gray-900) !important;
}
.badge.badge-light {
  color: var(--gray-900) !important;
}
.badge.badge-light {
  color: var(--gray-900) !important;
}
.badge.badge-light {
  color: var(--gray-900) !important;
}
.badge.badge-light {
  color: var(--gray-900) !important;
}
.badge.badge-light {
  color: var(--gray-900) !important;
}

.badge {
  padding: 0.25rem 0.45rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

.badge.arrow {
  width: 20px;
  height: 20px;
  background: var(--light-200);
  color: var(--dark);
}
.badge.arrow:hover {
  background: var(--primary);
  color: var(--white);
}

.badge.bg-light.arrow:hover {
  background: var(--dark) !important;
}

/****** Utils ******/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--gray-900);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  margin-bottom: 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

p {
  color: var(--gray-500);
}

h1,
.h1 {
  font-size: 50px;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  h1,
  .h1 {
    font-size: 32px;
  }
}
@media (max-width: 767.98px) {
  h1,
  .h1 {
    font-size: 26px;
  }
}

h2,
.h2 {
  font-size: 32px;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  h2,
  .h2 {
    font-size: 28px;
  }
}
@media (max-width: 767.98px) {
  h2,
  .h2 {
    font-size: 24px;
  }
}

h3,
.h3 {
  font-size: 28px;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  h3,
  .h3 {
    font-size: 24px;
  }
}
@media (max-width: 767.98px) {
  h3,
  .h3 {
    font-size: 22px;
  }
}

h4,
.h4,
.main-title {
  font-size: 24px;
}
@media (max-width: 767.98px) {
  h4,
  .h4,
  .main-title {
    font-size: 22px;
  }
}

h5,
.h5,
.custom-title {
  font-size: 20px;
}
@media (max-width: 767.98px) {
  h5,
  .h5,
  .custom-title {
    font-size: 18px;
  }
}

h6,
.h6,
.sub-title {
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 767.98px) {
  h6,
  .h6,
  .sub-title {
    font-size: 16px;
  }
}

.custom-subtitle {
  font-size: 18px;
}
@media (max-width: 767.98px) {
  .custom-subtitle {
    font-size: 16px;
  }
}

.fs-8 {
  font-size: 0.5rem !important;
}

.fs-10 {
  font-size: 0.75em !important;
}

.fs-12 {
  font-size: 0.75rem;
}

.fs-13 {
  font-size: 0.8125rem;
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-16 {
  font-size: 1rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-46 {
  font-size: 2.875rem;
}

.heading-color {
  color: var(--gray-900) !important;
}

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

.text-primary {
  color: var(--primary) !important;
  opacity: 1;
}

.text-secondary {
  color: var(--secondary) !important;
  opacity: 1;
}

.text-info {
  color: #5625e8 !important;
  opacity: 1;
}

.text-success {
  color: #03c95a !important;
  opacity: 1;
}

.text-warning {
  color: #ffc107 !important;
  opacity: 1;
}

.text-danger {
  color: #e70d0d !important;
  opacity: 1;
}

.text-skyblue {
  color: #0dcaf0 !important;
  opacity: 1;
}

.text-purple {
  color: #ab47bc !important;
}

.text-dark {
  color: var(--dark) !important;
}

.text-light {
  color: var(--light) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-purple {
  color: #ab47bc !important;
}

.text-gray-5 {
  color: var(--gray-500);
}

.text-gray-9 {
  color: var(--gray-900) !important;
}

.text-purple {
  color: #ab47bc !important;
}

a {
  color: var(--gray-900);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
a:hover {
  color: var(--secondary);
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
a:focus {
  outline: 0;
}

hr.text-danger {
  border-color: #e70d0d !important;
}

/****** Utils ******/
/*============================
 12.dropdown
============================*/
.dropdown-auto {
  overflow: auto;
}

.dropdown-divider {
  margin: 0;
}

.dropdown .dropdown-toggle {
  font-weight: 400;
  font-size: 14px;
  color: var(--gray-900);
}
.dropdown .dropdown-toggle:after {
  display: inline-block;
  margin-inline-start: 0.5rem;
  vertical-align: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
}
.dropdown .dropdown-toggle.btn-primary {
  color: var(--white);
}
.dropdown .dropdown-toggle.text-gray-6.show {
  color: var(--white) !important;
  background: var(--secondary) !important;
}
.dropdown .dropdown-toggle.text-gray-6.show i {
  color: var(--white) !important;
}
.dropdown .dropdown-toggle.text-gray-6.show::after {
  color: var(--white) !important;
}
.dropdown .dropdown-menu {
  padding: 20px;
  font-family: "Inter", sans-serif;
}

.dropdown-menu {
  border-color: var(--gray-100);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  color: var(--gray-900);
  background-color: var(--white);
  padding: 0;
  z-index: 10;
  border-radius: 10px;
}

.dropdown-divider {
  border-color: var(--gray-100);
}

.dropdown-item-text {
  color: var(--gray-500);
}

.dropdown-header {
  color: var(--gray-500);
}

.dropdown-item {
  color: var(--gray-600);
  padding: 0.594rem 0.9375rem;
  font-size: 14px;
}
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--gray-500);
  opacity: 0.5;
}
.dropdown-item:not(.active):hover,
.dropdown-item:not(.active):focus,
.dropdown-item:not(.active):active {
  color: var(--white);
  background-color: var(--secondary);
  border-radius: 5px;
}
.dropdown-item.active {
  background-color: var(--light-500);
}

.dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f077";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-inline-start: 0.25rem;
  vertical-align: 0;
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  border: 0;
  font-size: 0.6rem;
  font-weight: 600;
}

.btn.dropdown-toggle-split {
  opacity: 0.85;
}

.dropdown-menu-dark {
  background-color: var(--dark);
  border-color: rgba(255, 255, 255, 0.1);
}
.dropdown-menu-dark li a {
  color: var(--white);
}

.btn-list a.dropdown-item {
  margin-block-end: 0;
}
.dropdown-menu.dropdown-menu-primary {
  background-color: var(--primary);
}
.dropdown-menu.dropdown-menu-primary li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-primary .dropdown-item:hover,
.dropdown-menu.dropdown-menu-primary .dropdown-item:focus,
.dropdown-menu.dropdown-menu-primary .dropdown-item:active,
.dropdown-menu.dropdown-menu-primary .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-secondary {
  background-color: var(--secondary);
}
.dropdown-menu.dropdown-menu-secondary li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-secondary .dropdown-item:hover,
.dropdown-menu.dropdown-menu-secondary .dropdown-item:focus,
.dropdown-menu.dropdown-menu-secondary .dropdown-item:active,
.dropdown-menu.dropdown-menu-secondary .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-warning {
  background-color: #ffc107;
}
.dropdown-menu.dropdown-menu-warning li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-warning .dropdown-item:hover,
.dropdown-menu.dropdown-menu-warning .dropdown-item:focus,
.dropdown-menu.dropdown-menu-warning .dropdown-item:active,
.dropdown-menu.dropdown-menu-warning .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-info {
  background-color: #5625e8;
}
.dropdown-menu.dropdown-menu-info li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-info .dropdown-item:hover,
.dropdown-menu.dropdown-menu-info .dropdown-item:focus,
.dropdown-menu.dropdown-menu-info .dropdown-item:active,
.dropdown-menu.dropdown-menu-info .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-success {
  background-color: #03c95a;
}
.dropdown-menu.dropdown-menu-success li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-success .dropdown-item:hover,
.dropdown-menu.dropdown-menu-success .dropdown-item:focus,
.dropdown-menu.dropdown-menu-success .dropdown-item:active,
.dropdown-menu.dropdown-menu-success .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-danger {
  background-color: #e70d0d;
}
.dropdown-menu.dropdown-menu-danger li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-danger .dropdown-item:hover,
.dropdown-menu.dropdown-menu-danger .dropdown-item:focus,
.dropdown-menu.dropdown-menu-danger .dropdown-item:active,
.dropdown-menu.dropdown-menu-danger .dropdown-item.active {
  color: var(--white);
}

.dropdown-menu.dropmenu-item-primary .dropdown-item:hover,
.dropdown-menu.dropmenu-item-primary .dropdown-item:focus,
.dropdown-menu.dropmenu-item-primary .dropdown-item:active,
.dropdown-menu.dropmenu-item-primary .dropdown-item.active {
  background-color: rgba(var(--primary), 0.1) !important;
  color: var(--primary);
}
.dropdown-menu.dropmenu-item-secondary .dropdown-item:hover,
.dropdown-menu.dropmenu-item-secondary .dropdown-item:focus,
.dropdown-menu.dropmenu-item-secondary .dropdown-item:active,
.dropdown-menu.dropmenu-item-secondary .dropdown-item.active {
  background-color: rgba(var(--secondary), 0.1) !important;
  color: var(--secondary);
}
.dropdown-menu.dropmenu-item-warning .dropdown-item:hover,
.dropdown-menu.dropmenu-item-warning .dropdown-item:focus,
.dropdown-menu.dropmenu-item-warning .dropdown-item:active,
.dropdown-menu.dropmenu-item-warning .dropdown-item.active {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107;
}
.dropdown-menu.dropmenu-item-info .dropdown-item:hover,
.dropdown-menu.dropmenu-item-info .dropdown-item:focus,
.dropdown-menu.dropmenu-item-info .dropdown-item:active,
.dropdown-menu.dropmenu-item-info .dropdown-item.active {
  background-color: rgba(86, 37, 232, 0.1) !important;
  color: #5625e8;
}
.dropdown-menu.dropmenu-item-success .dropdown-item:hover,
.dropdown-menu.dropmenu-item-success .dropdown-item:focus,
.dropdown-menu.dropmenu-item-success .dropdown-item:active,
.dropdown-menu.dropmenu-item-success .dropdown-item.active {
  background-color: rgba(3, 201, 90, 0.1) !important;
  color: #03c95a;
}
.dropdown-menu.dropmenu-item-danger .dropdown-item:hover,
.dropdown-menu.dropmenu-item-danger .dropdown-item:focus,
.dropdown-menu.dropmenu-item-danger .dropdown-item:active,
.dropdown-menu.dropmenu-item-danger .dropdown-item.active {
  background-color: rgba(231, 13, 13, 0.1) !important;
  color: #e70d0d;
}

.dropdown-menu.dropmenu-light-primary {
  background-color: rgba(var(--secondary), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-primary .dropdown-item:hover,
.dropdown-menu.dropmenu-light-primary .dropdown-item:focus,
.dropdown-menu.dropmenu-light-primary .dropdown-item:active,
.dropdown-menu.dropmenu-light-primary .dropdown-item.active {
  color: var(--white);
  background-color: var(--primary) !important;
}
.dropdown-menu.dropmenu-light-secondary {
  background-color: rgba(var(--secondary), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-secondary .dropdown-item:hover,
.dropdown-menu.dropmenu-light-secondary .dropdown-item:focus,
.dropdown-menu.dropmenu-light-secondary .dropdown-item:active,
.dropdown-menu.dropmenu-light-secondary .dropdown-item.active {
  color: var(--white);
  background-color: var(--secondary) !important;
}
.dropdown-menu.dropmenu-light-info {
  background-color: rgba(86, 37, 232, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-info .dropdown-item:hover,
.dropdown-menu.dropmenu-light-info .dropdown-item:focus,
.dropdown-menu.dropmenu-light-info .dropdown-item:active,
.dropdown-menu.dropmenu-light-info .dropdown-item.active {
  color: var(--white);
  background-color: #5625e8 !important;
}
.dropdown-menu.dropmenu-light-warning {
  background-color: rgba(255, 193, 7, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-warning .dropdown-item:hover,
.dropdown-menu.dropmenu-light-warning .dropdown-item:focus,
.dropdown-menu.dropmenu-light-warning .dropdown-item:active,
.dropdown-menu.dropmenu-light-warning .dropdown-item.active {
  color: var(--white);
  background-color: #ffc107 !important;
}
.dropdown-menu.dropmenu-light-success {
  background-color: rgba(3, 201, 90, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-success .dropdown-item:hover,
.dropdown-menu.dropmenu-light-success .dropdown-item:focus,
.dropdown-menu.dropmenu-light-success .dropdown-item:active,
.dropdown-menu.dropmenu-light-success .dropdown-item.active {
  color: var(--white);
  background-color: #03c95a !important;
}
.dropdown-menu.dropmenu-light-danger {
  background-color: rgba(231, 13, 13, 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-danger .dropdown-item:hover,
.dropdown-menu.dropmenu-light-danger .dropdown-item:focus,
.dropdown-menu.dropmenu-light-danger .dropdown-item:active,
.dropdown-menu.dropmenu-light-danger .dropdown-item.active {
  color: var(--white);
  background-color: #e70d0d !important;
}

.dropdown-divider {
  margin: 0;
}

.bd-example > .dropdown-menu {
  position: static;
  display: block;
}
.card-dropdown .dropdown-menu {
  border: 0;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0px 4px 9px -1px rgba(19, 16, 34, 0.031372549);
}
.card-dropdown .dropdown-menu li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
}
.card-dropdown .dropdown-menu li a i {
  font-size: 16px;
  margin-right: 8px;
}
.card-dropdown .dropdown-menu li a:hover {
  background: var(--light-800);
  color: var(--gray-800);
}

.dropdown-md {
  min-width: 320px !important;
}

.dropdown-sm {
  min-width: 260px !important;
}

.dropdown-menu.notes-menu {
  z-index: 99999;
}
.dropdown-menu.notes-menu a.dropdown-item {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  padding: 8px 15px;
}
.dropdown-menu.notes-menu span {
  margin-right: 8px;
}
.dropdown-menu.notes-menu svg {
  width: 14px;
  height: 14px;
  color: var(--gray-500);
}

/****** Utils ******/

.border {
  border: 1px solid var(--gray-100) !important;
}
.border.border-primary {
  border: 1px solid var(--primary) !important;
  opacity: 1;
}
.border.border-danger {
  border: 1px solid #e70d0d !important;
  opacity: 1;
}
.border.border-white {
  border: 1px solid var(--white) !important;
  opacity: 1;
}
.border.border-4 {
  border-width: 4px !important;
}
.border.border-0 {
  border: 0 !important;
}
.border.border-end-0 {
  border-inline-end: 0 !important;
}

.border-top {
  border-top: 1px solid var(--gray-100) !important;
}
.border-top.border-primary {
  border-color: var(--primary) !important;
}
.border-top.border-danger {
  border-color: #e70d0d !important;
}

.border-bottom {
  border-bottom: 1px solid var(--gray-100) !important;
}
.border-bottom.border-primary {
  border-color: var(--primary) !important;
}
.border-bottom.border-danger {
  border-color: #e70d0d !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.border-danger {
  border-color: #e70d0d !important;
}

.rounded {
  border-radius: 4px !important;
}

/****** Utils ******/
/*============================
 17.cards
============================*/
.card {
  background-color: var(--white);
  transition: all 0.5s ease-in-out;
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--gray-100);
  box-shadow: none;
  color: inherit;
  margin-bottom: 1.5rem;
}
.card .card-body {
  padding: 1.25rem;
}
@media (max-width: 767.98px) {
  .card .card-body {
    padding: 16px;
  }
}
.card .card-title {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--gray-900);
}
@media (max-width: 767.98px) {
  .card .card-title {
    font-size: 16px;
  }
}
.card .collapse-close {
  display: none;
}
.card.card .collapsed .collapse-close {
  display: block;
}
.card.card .collapsed .collapse-open {
  display: none;
}

/****** Utils ******/
/*============================
  15.forms
============================*/
.form-control {
  border-color: var(--gray-100);
  color: var(--gray-900);
  background-color: var(--white);
  font-size: 14px;
  padding: 0.5rem 1rem;
  min-height: 40px;
}
.form-control:focus {
  box-shadow: none;
  border-color: var(--gray-100);
  background: var(--white);
}

textarea {
  resize: none;
}
textarea.form-control {
  min-height: 90px;
  height: auto;
}

.form-control[type="file"] {
  padding: 0.3rem 0.5rem;
}
.form-control[type="file"].form-control-lg {
  padding: 0.5rem 1rem !important;
}

.form-select {
  background-color: var(--white);
  border: 1px solid var(--gray-100);
  color: var(--gray-500);
  font-size: 14px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-size: 1.25rem;
  line-height: 2;
}
.form-select option {
  background-color: var(--white);
  padding: 0.35rem 0.75rem;
  border-radius: 0.25rem;
  margin-block-end: 0.25rem;
}
.form-select option:last-child {
  margin-block-end: 0;
}
.form-select option:checked {
  background-color: rgba(var(var(--primary)), 0.2);
  color: var(--primary);
}
.form-select option:select {
  background-color: rgba(var(var(--primary)), 0.2);
  color: var(--primary);
}
.form-select option:hover {
  background-color: rgba(var(var(--primary)), 0.2);
  color: var(--primary);
}
.form-select option:focus {
  background-color: rgba(var(var(--primary)), 0.2);
  color: var(--primary);
}

.form-check-label {
  font-size: 14px;
  color: var(--gray-600);
}

.form-check-input {
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--white);
  border: 1px solid var(--gray-100);
}
.form-check-input:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.form-check-input:checked ~ .form-check-label {
  color: var(--gray-900);
}
.form-check-input:focus {
  box-shadow: none;
}

fieldset:disabled .btn {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-select:focus {
  border-color: rgba(var(var(--primary)), 0.5);
  outline: 0;
  box-shadow: none;
}

.btn:focus {
  background-color: none;
  border-color: none;
  outline: 0;
}

.btn.active:focus,
.btn.show:focus,
.btn:active:focus {
  box-shadow: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--light);
  color: var(--gray-500);
}

.form-control::-webkit-file-upload-button {
  color: var(--gray-500);
  background-color: #f8f9fa;
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #f8f9fa;
}

.form-control:focus {
  color: var(--gray-900);
}
.form-control:focus::-webkit-input-placeholder,
.form-control:focus::placeholder {
  color: var(--gray-300);
  padding-inline-start: 0;
}
.form-control::-webkit-input-placeholder {
  color: var(--gray-300);
  padding-inline-start: 0px;
  transition: padding-inline-start 0.1s ease-in;
}
.form-control:-moz-placeholder {
  color: var(--gray-300);
}
.form-control::-moz-placeholder {
  color: var(--gray-300);
}
.form-control:-ms-input-placeholder {
  color: var(--gray-300);
}

.form-control-lg {
  font-size: 1rem;
  padding: 0.66rem 1rem;
}

.label-info {
  background: #5625e8;
  color: var(--white);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: #03c95a;
  box-shadow: none;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #03c95a;
}

.bootstrap-tagsinput {
  border-color: var(--gray-100);
  color: var(--gray-500);
  background-color: var(--white);
  font-size: 15px;
  font-weight: 400;
  border-radius: 5px;
  padding: 0.45rem 0.625rem;
  height: 40px;
  box-shadow: none;
  overflow-y: auto;
  width: 100%;
}
.bootstrap-tagsinput .tag {
  background: var(--light);
  border: 1px solid var(--gray-100);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 14px;
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
}
.bootstrap-tagsinput .tag span::after {
  color: var(--gray-900);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: none;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: none;
}

.form-select.is-invalid:not([multiple]):not([size]) {
  padding-right: 1.125rem;
  background-size:
    16px 28px,
    calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--light);
}

.form-check {
  min-height: inherit !important;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 5px;
}

.input-group-text {
  border-radius: 4px;
}

.input-group-text {
  border-color: var(--light-900);
}

/**
Form help
 */

.input-icon {
  position: relative;
}
.input-icon .form-control:not(:last-child),
.input-icon .form-select:not(:last-child) {
  padding-right: 2.5rem;
}

/* Input Group */

.check {
  display: block;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.status-toggle.modal-status label {
  height: 16px;
  width: 30px;
  background-color: var(--white);
  border: 1px solid var(--light-900);
  margin-bottom: 0;
}

.input-icon {
  position: relative;
}

.input-icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  color: var(--gray-700);
  pointer-events: none;
  font-size: 1.2em;
}
.input-icon-addon:last-child {
  right: 0;
  left: auto;
}

input-icon {
  position: relative;
}

.input-icon .form-control:not(:last-child),
.input-icon .form-select:not(:last-child) {
  padding-right: 2.5rem;
}

.input-icon .form-control:not(:first-child),
.input-icon .form-select:not(:last-child) {
  padding-left: 2.2rem;
}

.input-icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  color: var(--gray-500);
  pointer-events: none;
  font-size: 16px;
}

.input-icon-addon:last-child {
  right: 0;
  left: auto;
}

.toggle-password {
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: var(--gray-900);
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 10px;
  pointer-events: auto;
}
.toggle-password:hover {
  color: var(--primary);
}

.toggle-passwords,
.toggle-passworda {
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: var(--gray-900);
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 10px;
}
.toggle-passwords:hover,
.toggle-passworda:hover {
  color: var(--primary);
}

.bookingrange {
  padding: 4px 8px 4px 30px;
}

/****** Utils ******/
/*============================
  21.tables
============================*/

.table > :not(caption) > * > * {
  background-color: var(--white);
}

.table {
  color: var(--gray-500);
  border-color: var(--gray-100);
  margin-block-end: 0;
}
.table tbody tr {
  border-color: var(--gray-100);
}
.table tbody tr th {
  font-weight: 500;
}
.table th,
.table td {
  padding: 20px 15px;
  vertical-align: middle;
  font-size: 14px;
  white-space: nowrap;
}
.table thead tr {
  border-color: var(--gray-100);
}
.table thead tr th {
  font-weight: 600;
  border-color: var(--gray-100);
  background: var(--gray-200);
  font-size: 14px;
  color: var(--gray-900);
}
.table.table-dark {
  color: var(--light-700);
  border-color: rgba(var(--white), 0.1);
}
.table .thead-dark th {
  background-color: var(--dark);
  color: var(--white);
}
.table.table-dark {
  background-color: var(--white);
  color: var(--black);
  --bs-table-color-state: $black;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(var(--dark-rgb), 0.1);
  --bs-table-border-color: rgba(var(--dark-rgb), 0.05);
  --bs-table-striped-bg: rgba(var(--dark-rgb), 0.2);
  --bs-table-active-bg: rgba(var(--dark-rgb), 0.2);
  --bs-table-hover-bg: rgba(var(--dark-rgb), 0.2);
}
.table.table-dark.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--dark-rgb), 0.2);
  color: var(--black);
}
.table.table-dark.table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-accent-bg);
  --bs-table-accent-bg: rgba(var(--dark-rgb), 0.4);
  color: var(--white);
}
.table.table-bordered.border-primary tbody,
.table.table-bordered.border-primary td,
.table.table-bordered.border-primary th,
.table.table-bordered.border-primary thead,
.table.table-bordered.border-primary tr {
  border-color: rgba(var(--primary), 0.1);
}
.table.table-bordered.border-danger tbody,
.table.table-bordered.border-danger td,
.table.table-bordered.border-danger th,
.table.table-bordered.border-danger thead,
.table.table-bordered.border-danger tr {
  border-color: rgba(231, 13, 13, 0.1);
}
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(var(--dark-rgb), 0.0125);
  color: var(--gray-500);
}
.table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: #f8f9fa;
  color: var(--gray-500);
}
.table thead.table-dark {
  background-color: var(--white);
  color: var(--bs-table-color);
  --bs-table-color-state: #000;
  --bs-table-color: var(--black);
  --bs-table-bg: rgba(var(--dark-rgb), 0.1);
  --bs-table-border-color: rgba(var(--dark-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--dark-rgb), 0.5);
  --bs-table-striped-color: var(--black);
  --bs-table-active-bg: rgba(var(--dark-rgb), 0.5);
  --bs-table-hover-bg: rgba(var(--dark-rgb), 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-dark {
  --bs-table-color: var(--black);
  --bs-table-color-state: $black;
  --bs-table-bg: rgba(var(--dark-rgb), 0.1);
  --bs-table-border-color: rgba(var(--dark-rgb), 0.1);
  --bs-table-striped-bg: rgba(var(--dark-rgb), 0.3);
  --bs-table-striped-color: var(--black);
  --bs-table-active-bg: rgba(var(--dark-rgb), 0.3);
  --bs-table-active-color: var(--black);
  --bs-table-hover-bg: rgba(var(--dark-rgb), 0.3);
  --bs-table-hover-color: var(--black);
  color: var(--black);
  border-color: rgba(var(--dark-rgb), 0.1);
  background-color: var(--white);
}

.table {
  margin: 0;
}
.table tbody tr td {
  color: var(--gray-700);
  font-size: 14px;
}
.table tbody tr.active {
  border-bottom: 0;
}
.table tbody tr.active td {
  font-size: 18px;
  color: var(--gray-700);
  font-weight: 600;
  border-bottom: 0;
}

.new tbody tr td {
  border-bottom: none;
}

.table {
  margin: 0;
}
.table tbody tr td {
  color: var(--gray-500);
}
.table tbody tr td a {
  color: var(--gray-900);
}
.table tbody tr td a:hover {
  color: var(--secondary);
}
.table tbody tr.active {
  border-bottom: 0;
}
.table tbody tr.active td {
  font-size: 18px;
  color: var(--gray-700);
  font-weight: 600;
  border-bottom: 0;
}

table.table-bordered thead tr th p {
  margin-bottom: 0;
}

/****** Utils ******/
.modal .modal-content {
  border: 1px solid var(--light-900);
  box-shadow: 0px 4px 74px 0px rgba(208, 208, 208, 0.2509803922);
  border-radius: 5px;
  background: var(--white);
}
.modal .modal-title {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .modal .modal-title {
    font-size: 16px;
  }
}
.modal .logo-lg img {
  width: 150px;
}
.modal .modal-header {
  border-color: var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.modal .modal-header .close,
.modal .modal-header .btn-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  color: var(--gray-900);
  opacity: 1;
  font-size: 14px;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--gray-900);
  font-weight: 700;
  background-color: transparent;
  border-radius: 50px;
}
.modal .modal-header .close:hover,
.modal .modal-header .btn-close:hover {
  border-color: #e70d0d;
  color: #e70d0d;
}
.modal .modal-footer {
  border-top: 1px solid var(--gray-100);
}
.modal .modal-footer .btn {
  margin: 0;
  font-weight: 500;
  padding: 7px 16px;
  font-size: 12px;
}
.modal .modal-footer .btn-secondary {
  background: var(--secondary);
}
.modal .modal-footer .btn-secondary:hover {
  -webkit-box-shadow: inset 0 0px 0px 100px var(--white);
  -moz-box-shadow: inset 0 0px 0px 100px var(--white);
  box-shadow: inset 0 0px 0px 100px var(--white);
  color: var(--secondary) !important;
}
.modal .note-editor.note-frame.card {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.modal-content .modal-header {
  justify-content: space-between;
}
.modal-content .modal-header .custom-btn-close {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--gray-900);
  font-size: 24px;
  margin: 0;
  padding: 0;
  background-image: none;
}
.modal-content .modal-header .custom-btn-close:hover {
  background-color: #e70d0d;
}

.modal-btn .btn {
  padding: 5px 20px;
}

.modal.animated .modal-dialog {
  transform: translate(0, 0);
}
.modal.effect-scale .modal-dialog {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-scale.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}
.modal.effect-slide-in-right .modal-dialog {
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.modal.effect-slide-in-right.show .modal-dialog {
  transform: translateX(0);
  opacity: 1;
}
.modal.effect-slide-in-bottom .modal-dialog {
  transform: translateY(20%);
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-slide-in-bottom.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
.modal.effect-newspaper .modal-dialog {
  transform: scale(0) rotate(720deg);
  opacity: 0;
}
.modal.effect-newspaper.show ~ .modal-backdrop,
.modal.effect-newspaper .modal-dialog {
  transition: all 0.5s;
}
.modal.effect-newspaper.show .modal-dialog {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
.modal.effect-fall {
  -webkit-perspective: 1300px;
  -moz-perspective: 1300px;
  perspective: 1300px;
}
.modal.effect-fall .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(600px) rotateX(20deg);
  opacity: 0;
}
.modal.effect-fall.show .modal-dialog {
  transition: all 0.3s ease-in;
  transform: translateZ(0px) rotateX(0deg);
  opacity: 1;
}
.modal.effect-flip-horizontal {
  perspective: 1300px;
}
.modal.effect-flip-horizontal .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(-70deg);
  transition: all 0.3s;
  opacity: 0;
}
.modal.effect-flip-horizontal.show .modal-dialog {
  transform: rotateY(0deg);
  opacity: 1;
}
.modal.effect-flip-vertical {
  perspective: 1300px;
}
.modal.effect-flip-vertical .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(-70deg);
  transition: all 0.3s;
  opacity: 0;
}
.modal.effect-flip-vertical.show .modal-dialog {
  transform: rotateX(0deg);
  opacity: 1;
}
.modal.effect-super-scaled .modal-dialog {
  transform: scale(2);
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-super-scaled.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}
.modal.effect-sign {
  perspective: 1300px;
}
.modal.effect-sign .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(-60deg);
  transform-origin: 50% 0;
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-sign.show .modal-dialog {
  transform: rotateX(0deg);
  opacity: 1;
}
.modal.effect-rotate-bottom {
  perspective: 1300px;
}
.modal.effect-rotate-bottom .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateY(100%) rotateX(90deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.modal.effect-rotate-bottom.show .modal-dialog {
  transform: translateY(0%) rotateX(0deg);
  opacity: 1;
}
.modal.effect-rotate-left {
  perspective: 1300px;
}
.modal.effect-rotate-left .modal-dialog {
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: all 0.3s;
}
.modal.effect-rotate-left.show .modal-dialog {
  transform: translateZ(0px) translateX(0%) rotateY(0deg);
  opacity: 1;
}

.offcanvas.offcanvas-end {
  width: auto !important;
}

.offcanvas.offcanvas-end.em-payrol-add {
  max-width: 1192px !important;
}

#delete-modal .modal-dialog {
  max-width: 400px;
}
#delete-modal .modal-dialog .delete-icon {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin: 0 auto 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  background: #f6cece;
  color: #e70d0d;
  font-size: 40px;
}
#delete-modal .modal-dialog h4 {
  font-size: 20px;
  margin-bottom: 5px;
}
#delete-modal .modal-dialog p {
  margin-bottom: 24px;
}

.custom-modal .modal-header {
  justify-content: space-between;
  align-items: center;
}

.modal-header .badge {
  box-shadow: none;
}

/****** Layout ******/
/****** Utils ******/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  border-radius: 50px !important;
}

::-webkit-scrollbar-track {
  background: var(--light-500);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-500);
}

::-webkit-scrollbar-thumb:hover {
  background: #ff3c38;
}

hr {
  border-color: var(--gray-100);
  opacity: 1;
}

.shadow-sm {
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2);
}

/****** Utils ******/
/*============================
  24.header
============================*/
header {
  background: rgba(0, 0, 0, 0.95);
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  -webkit-transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
  -ms-transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}
header.fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--primary);
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0px 4px 24px 0px rgba(57, 44, 125, 0.25);
}
header.fixed .header-nav .main-menu-wrapper .main-nav > li > a {
  color: var(--white);
}
header.fixed .header-nav .main-menu-wrapper .main-nav > li.active > a {
  color: var(--secondary);
}
header.fixed .header-btn .theme-toggle {
  color: var(--white);
}
header.fixed .header__hamburger .sidebar-menu {
  color: var(--white);
}
#mycommon-header {
  min-height: 76.5px;
}
@media (max-width: 1199.98px) {
  #mycommon-header {
    min-height: 55px;
    height: 55px;
  }
  header.header-one .navbar-header #mobile_btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  header.fixed {
    width: 100%;
  }
  header.fixed .header-nav {
    height: 55px;
  }
}
@media (max-width: 575.98px) {
  html,
  body {
    overflow-x: hidden;
  }
  .main-wrapper {
    overflow-x: hidden;
  }
  header.fixed .container-fluid {
    padding-right: 12px;
    padding-left: 12px;
  }
}
header .header-logo .logo a {
  float: left;
}
header .header-logo .logo a img {
  float: left;
  max-height: 32px;
}
header .header-logo.logo-dark {
  display: none;
}
header .header-nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  position: relative;
}
@media (max-width: 1199.98px) {
  header .header-nav {
    height: 55px;
  }
}
@media (max-width: 575.98px) {
  header .header-nav {
    display: block;
  }
}
@media (max-width: 575.98px) {
  header .header-nav .navbar-logo {
    width: auto;
  }
}
header .header-nav .main-menu-wrapper {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  position: relative;
  padding: 15px 0;
  margin-bottom: 0;
  display: block;
}
@media (max-width: 1199.98px) {
  header .header-nav .main-menu-wrapper {
    order: 3;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1060;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    /* transition intentionally omitted here - see .nav-animating below.
       Keeping it out of this breakpoint rule means simply crossing
       1199.98px during a resize never animates the panel, no matter how
       slow/paused the drag is; only a deliberate hamburger click does. */
    background-color: var(--white);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
  }
}
/* Applied only for the brief duration of an explicit open/close click
   (added and removed by script.js's #mobile_btn / #menu_close / overlay
   handlers), so the slide transition plays for deliberate interactions
   only - never as a side effect of a breakpoint being crossed mid-resize. */
header .header-nav .main-menu-wrapper.nav-animating {
  -webkit-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 1199.98px) {
  header .header-nav .main-menu-wrapper .navbar-logo {
    display: none;
  }
}
@media (max-width: 1199.98px) {
  header .header-nav .main-menu-wrapper .main-nav {
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 0;
    list-style: none;
    padding: 0;
    width: 100%;
    padding: 0 20px;
  }
}
header .header-nav .main-menu-wrapper .main-nav > li {
  padding: 8px 0;
}
@media (max-width: 1199.98px) {
  header .header-nav .main-menu-wrapper .main-nav > li {
    width: 100%;
    padding: 0;
  }
}
header .header-nav .main-menu-wrapper .main-nav > li > a {
  font-size: 13px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

header .header-nav .main-menu-wrapper .main-nav > li > a .fa-chevron-down {
  font-size: 10px !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0;
}
header .header-nav .main-menu-wrapper .main-nav > li > a:hover {
  color: var(--secondary);
}
@media (max-width: 1199.98px) {
  header .header-nav .main-menu-wrapper .main-nav > li > a {
    color: var(--gray-500) !important;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
  }
}
header
  .header-nav
  .main-menu-wrapper
  .main-nav
  > li.active.has-submenu
  > a::after {
  left: calc(50% - 6px);
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li {
  position: relative;
  padding-left: 4px;
}

header
  .header-nav
  .main-menu-wrapper
  .main-nav
  > li
  .submenu
  li:not(:last-of-type) {
  border-bottom: 1px dashed #ddd;
}

header .header-nav .main-menu-wrapper .main-nav > li .submenu li.active {
  color: var(--secondary);
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li.active > a {
  color: var(--secondary);
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  clear: both;
  white-space: nowrap;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  width: 100%;
  position: relative;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
}
@media (max-width: 1199.98px) {
  header .header-nav .main-menu-wrapper .main-nav > li .submenu li a {
    padding: 8px;
    font-size: 14px;
    color: var(--gray-500);
  }
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li a:hover {
  color: var(--secondary);
}
header .header-nav .main-menu-wrapper .main-nav > li .login-link {
  display: none;
}
@media (max-width: 575.98px) {
  header .navbar-header {
    width: 100%;
    height: inherit;
    text-align: center;
  }
}
header .navbar-header .navbar-brand {
  display: inline-block;
  padding: 0;
  line-height: 0;
}
@media (max-width: 1199.98px) {
  header .navbar-header .navbar-brand {
    margin-right: 0;
  }
}
header .navbar-header .logo-small {
  display: none;
}
@media (max-width: 575.98px) {
  header .navbar-header .logo-small {
    display: block;
    width: 100%;
    text-align: center;
  }
}
header .navbar-header #mobile_btn {
  display: none;
  margin-right: 30px;
}
@media (max-width: 1199.98px) {
  header .navbar-header #mobile_btn {
    display: inline-block;
    line-height: 0;
    position: absolute;
    top: 5px;
    right: 0;
  }
}
@media (max-width: 575.98px) {
  header .navbar-header #mobile_btn {
    right: 0;
    margin-right: 0;
    padding: 0 0px;
    position: absolute;
    z-index: 99;
  }
}
header .navbar-header #mobile_btn .bar-icon {
  display: inline-block;
  width: 31px;
  color: var(--secondary);
  font-size: 20px;
}
header .navbar-header #mobile_btn .bar-icon span {
  background-color: var(--primary);
  display: block;
  float: left;
  height: 3px;
  margin-bottom: 7px;
  width: 31px;
  border-radius: 2px;
  margin-bottom: 5px;
}
header .navbar-header #mobile_btn .bar-icon span:nth-child(2) {
  width: 20px;
}
header .navbar-header #mobile_btn .bar-icon span:nth-child(3) {
  width: 16px;
  margin-bottom: 0;
}
@media (max-width: 1199.98px) {
  header .navbar-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 575.98px) {
  header .navbar-header {
    width: 100%;
    height: inherit;
  }
}
header .main-menu-wrapper {
  margin: 0;
}
@media (min-width: 1200px) {
  header .main-menu-wrapper.active {
    position: unset;
  }
}
header .main-menu-wrapper .menu-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  display: none;
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .menu-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 65px;
    align-items: center;
    background: var(--white);
    width: 100%;
  }
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .menu-header .menu-logo img {
    width: 140px;
  }
}
header .main-menu-wrapper .menu-header .menu-close {
  font-size: 18px;
  color: var(--primary);
  border: 0;
  background: transparent;
  padding: 0;
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li .submenu > li .submenu {
    left: 0;
    top: 10%;
    margin-top: 10px;
    font-size: 14px;
    margin: 0;
    min-width: 200px;
    opacity: 0;
    padding-left: 0;
    position: absolute;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    transform: scale(1, 0);
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform-origin: 0 0;
    visibility: hidden;
    z-index: 1000;
    border-top: 0;
    display: unset;
  }
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li .submenu > li .submenu {
    left: 0;
  }
}
header
  .main-menu-wrapper
  .main-nav
  > li
  .submenu
  > li
  ul
  li.has-submenu:hover
  .submenu {
  top: 0;
  position: relative;
}
header .main-menu-wrapper .main-nav > li .submenu > li.has-submenu > a::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 12px;
}
header .main-menu-wrapper .main-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav {
    position: relative;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav.active {
    position: unset;
  }
}
header .main-menu-wrapper .main-nav:last-child {
  margin-right: 0;
}
@media (max-width: 1399.98px) {
  header .main-menu-wrapper .main-nav > li {
    margin-right: 12px !important;
  }
  header .main-menu-wrapper .main-nav > li:last-child {
    margin-right: 0;
  }
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li {
    margin-right: 10px !important;
  }
  header .main-menu-wrapper .main-nav > li:last-child {
    margin-right: 0;
    border: 0;
  }
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li {
    margin-right: 0 !important;
  }
  header .main-menu-wrapper .main-nav > li:last-child {
    margin-right: 0;
    border: 0;
  }
}
header .main-menu-wrapper .main-nav > li.active > a,
header .main-menu-wrapper .main-nav > li:hover > a {
  color: var(--secondary);
}
header .main-menu-wrapper .main-nav > li a i {
  font-size: 12px;
  margin-left: 4px;
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li a {
    display: block;
    line-height: 20px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 500;
  }
  header .main-menu-wrapper .main-nav > li a i {
    font-size: 14px;
  }
}
@media (max-width: 1199.98px) and (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li a i {
    float: right;
    margin-top: 5px;
    font-size: 14px;
  }
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li a:hover {
    color: var(--secondary);
  }
}
header .main-menu-wrapper .main-nav > li:last-child {
  margin-right: 0;
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li {
    border-bottom: 1px solid var(--gray-100);
    padding: 0;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li {
    display: block;
    position: relative;
    margin-right: 30px;
  }
  header .main-menu-wrapper .main-nav > li:last-child {
    margin-right: 0;
  }
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav > li {
    margin-right: 20px;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li > ul {
    background-color: var(--white);
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
    display: block;
    font-size: 14px;
    left: 0;
    margin: 0;
    min-width: 200px;
    opacity: 0;
    padding: 0;
    position: absolute;
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    transform: scale(1, 0);
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform-origin: 0 0;
    top: 100%;
    visibility: hidden;
    z-index: 1000;
    padding: 5px 0;
    border-radius: 0 0 10px 10px;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li.megamenu {
    position: unset;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li > ul.mega-submenu {
    width: 100%;
    padding: 0;
    border: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    min-width: 250px;
    transform-origin: center top 0;
    -webkit-transform-origin: center top 0;
    -moz-transform-origin: center top 0;
    -ms-transform-origin: center top 0;
    -o-transform-origin: center top 0;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
    -o-box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li.mega-innermenu {
    position: unset;
  }
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  .megamenu-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  .megamenu-wrapper::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-position: bottom right;
  background-size: contain;
}
header .main-menu-wrapper .main-nav > li.mega-innermenu > ul.mega-submenu h6 {
  margin-bottom: 24px;
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  ul
  li {
  margin-bottom: 16px;
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  ul
  li:last-child {
  margin-bottom: 0;
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  ul
  li
  a {
  padding: 0 0 0 14px;
  font-weight: 400;
  color: var(--gray-600);
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  ul
  li
  a::before {
  font-family: "Fontawesome";
  content: "\f054";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 12px;
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  ul
  li
  a:hover {
  padding-left: 15px;
}
header
  .main-menu-wrapper
  .main-nav
  > li.mega-innermenu
  > ul.mega-submenu
  ul
  li.active
  a {
  color: var(--secondary);
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav > li.mega-innermenu > ul.mega-submenu {
    min-width: 600px;
    width: auto;
  }
}
@media (min-width: 1200px) {
  header .main-menu-wrapper .main-nav li.has-submenu:hover > .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    border-radius: 2px;
  }
  header
    .main-menu-wrapper
    .main-nav
    li.has-submenu:hover
    > .submenu
    > .has-submenu
    .submenu {
    visibility: hidden;
    opacity: 0;
    margin-top: -1px;
    z-index: 1000;
    margin-right: 0;
    margin-top: 10px;
    top: 0;
    position: absolute;
    -webkit-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    transform: scale(1, 0);
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform-origin: 0 0;
    background: var(--white);
    left: 100%;
    box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
  }
  header
    .main-menu-wrapper
    .main-nav
    li.has-submenu:hover
    > .submenu
    > .has-submenu:hover
    > .submenu {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    margin-top: 0;
  }
  /* header .main-menu-wrapper .main-nav li.has-submenu.megamenu:hover > .submenu {
    -webkit-transform: translateY(-14px);
    -ms-transform: translateY(-14px);
    transform: translateY(-14px);
  } */
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav .has-submenu ul {
    display: none;
  }
}
header .main-menu-wrapper .main-nav li.login-link {
  display: none;
}
@media (max-width: 1199.98px) {
  header .main-menu-wrapper .main-nav li.login-link {
    display: block;
  }
}
@media (max-width: 575.98px) {
  header .header-btn {
    display: none !important;
  }
}
header .header-btn .icon-btn > a,
header .header-btn .icon-btn button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-100);
  background: var(--white);
  font-size: 16px;
  color: var(--gray-900);
}
header .header-btn .icon-btn > a:hover,
header .header-btn .icon-btn button:hover {
  background: var(--light);
}
@media (max-width: 1199.98px) {
  header .header-btn .icon-btn:last-child {
    margin-right: 0 !important;
  }
}
header .header-btn .btn {
  border-radius: 55px;
  padding: 7px 16px;
  margin-right: 12px;
}
header .header-btn .btn.btn-white:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
header .header-btn .btn.btn-white:hover a {
  color: var(--white);
}
header .header-btn .btn:last-child {
  margin-right: 0;
}
@media (max-width: 1199.98px) {
  header .header-btn .btn {
    display: none !important;
  }
}
header .header-btn .profile-dropdown {
  margin-right: 12px;
}
header .dropdown-toggle::after {
  display: none;
}
header.header-two .header-nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  position: relative;
}
@media (max-width: 575.98px) {
  header.header-two .header-nav {
    display: block;
  }
}
header.header-two .header-nav .main-navbar {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 575.98px) {
  header.header-two .header-nav .main-navbar {
    height: inherit;
  }
}
@media (max-width: 575.98px) {
  header.header-two .header-nav .navbar-logo {
    width: auto;
  }
}
header.header-two .header-btn .icon-btn {
  margin-right: 12px;
}
header.header-two .header-btn .icon-btn:last-child {
  margin-right: 24px;
}
header.header-two .header-btn .icon-btn > a,
header.header-two .header-btn .icon-btn button {
  background: var(--white);
  border-color: var(--gray-100);
}

header.header-one.fixed {
  background: rgba(0, 0, 0, 0.9);
}
header.header-one.fixed .main-menu-wrapper .main-nav > li > a {
  color: var(--white);
}
header.header-one .flag-dropdown a img {
  height: 14px;
}

header.header-one .main-menu-wrapper .main-nav > li > a {
  font-size: 15px;
}
@media (min-width: 1200px) {
  header.header-one .main-menu-wrapper .main-nav {
    display: inline-flex;
    padding: 8px;
    border-radius: 50px;
    justify-content: center;
  }
  header.header-one .main-menu-wrapper .main-nav > li {
    margin-right: 0 !important;
    padding: 0 !important;
  }

  header.header-one .main-menu-wrapper .main-nav > li > a {
    padding: 4px 16px;
    border-radius: 5px;
    display: block;
  }
  header.header-one .main-menu-wrapper .main-nav > li > a:hover {
    color: #000 !important;
    background: #fff;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  header.header-one .main-menu-wrapper .main-nav > li > a {
    padding: 4px 12px;
  }
}
@media (min-width: 1200px) {
  header.header-one .main-menu-wrapper .main-nav > li.active > a {
    /* color: var(--secondary) !important; */
    text-decoration: underline;
    text-underline-offset: 9px;
    text-decoration-color: rgb(241 7 7);
    text-decoration-thickness: 2px;
    border-width: 0px 0px 10px 0px;
    color: #fff !important;
  }
  header.header-one .main-menu-wrapper .main-nav > li.active > a:hover {
    color: #000 !important;
  }

  header.header-one .main-menu-wrapper .main-nav > li i {
    font-size: 8px;
    margin-left: 2px;
    vertical-align: middle;
  }
}

@media (min-width: 1200px) {
  header.header-one .main-menu-wrapper .main-nav > li > a {
    color: var(--white);
    transition: all 0.1s ease;
  }
}
header.header-one .header-btn .icon-btn {
  margin-right: 12px;
}
header.header-one .header-btn .icon-btn:last-child {
  margin-right: 24px;
}
header.header-one .header-btn .icon-btn > a,
header.header-one .header-btn .icon-btn button {
  background: var(--white);
  border-color: var(--white);
}
header.header-one .navbar-header #mobile_btn .bar-icon span {
  background: var(--white);
}
header.header-one.fixed .navbar-header #mobile_btn .bar-icon span {
  background: var(--primary);
}
header.header-four {
  position: fixed;
  top: 30px;
}
@media (max-width: 1199.98px) {
  header.header-four {
    top: 0;
    position: relative;
  }
}
@media (max-width: 1199.98px) {
  header.header-four .navbar-header #mobile_btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
  }
}
header.header-four .navbar-header #mobile_btn .bar-icon {
  width: auto;
  color: #fff;
}
@media (max-width: 1199.98px) {
  header.header-four .header-nav {
    height: 60px;
  }
}
@media (min-width: 1200px) {
  header.header-four .header-nav {
    background: var(--white);
    padding: 16px 24px;
    border-radius: 10px;
  }
}
@media (min-width: 1200px) {
  header.header-four .header-nav .main-menu-wrapper {
    padding: 0;
  }
}
@media (min-width: 1200px) {
  header.header-four .header-nav .main-menu-wrapper .main-nav {
    padding: 0;
  }
}
@media (min-width: 1200px) {
  header.header-four .header-nav .main-menu-wrapper .main-nav > li {
    margin-right: 8px !important;
  }
}
@media (min-width: 1200px) {
  header.header-four .header-nav .main-menu-wrapper .main-nav > li > a {
    padding: 8px 16px;
    border-radius: 10px;
  }
}
@media (min-width: 1200px) {
  header.header-four .header-nav .main-menu-wrapper .main-nav > li.active > a {
    color: var(--primary);
    background: rgba(25, 97, 100, 0.05);
    border: 1px solid var(--primary);
  }
}
header.header-four .header-nav .main-menu-wrapper .main-nav > li:hover > a {
  color: var(--primary);
}
header.header-four
  .header-nav
  .main-menu-wrapper
  .main-nav
  > li
  .submenu
  li
  a:hover {
  color: var(--primary);
}
header.header-four
  .header-nav
  .main-menu-wrapper
  .main-nav
  > li
  .single-demo.active
  .demo-info
  a {
  color: var(--primary) !important;
}
@media (max-width: 1199.98px) {
  header.header-four .header-btn .icon-btn {
    display: none;
  }
}
@media (max-width: 1199.98px) {
  header.header-four .header-btn .btn {
    display: inline-flex !important;
  }
}
@media (max-width: 1199.98px) {
  header.header-six {
    padding: 10px 0px;
  }
}
@media (max-width: 575.98px) {
  header.header-six .navbar-header .navbar-logo {
    max-width: 152px;
  }
}
@media (max-width: 1199.98px) {
  header.header-six .navbar-header #mobile_btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
  }
}
@media (max-width: 575.98px) {
  header.header-six .navbar-header #mobile_btn {
    margin-right: 0;
  }
}
@media (max-width: 1199.98px) {
  header.header-six .navbar-header #mobile_btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}
header.header-six .main-menu-wrapper .main-nav {
  padding: 0px;
}
@media (max-width: 1199.98px) {
  header.header-six .main-menu-wrapper .main-nav {
    padding: 0px 12px;
  }
}
header.header-six .main-menu-wrapper .main-nav > li {
  padding: 12px 0;
}
@media (max-width: 1199.98px) {
  header.header-six .main-menu-wrapper .main-nav > li {
    padding: 4px 0;
  }
}
header.header-six .main-menu-wrapper .main-nav > li a {
  font-size: 16px;
  font-weight: 600;
}
header.header-six .main-menu-wrapper .main-nav > li.active > a {
  color: var(--primary);
}
@media (max-width: 1199.98px) {
  header.header-six .main-menu-wrapper .main-nav .has-submenu > ul {
    margin-bottom: 16px;
  }
}
@media (max-width: 1199.98px) {
  header.header-six .main-menu-wrapper .menu-login {
    padding: 20px 12px 20px;
  }
}
header.header-six .header-btn {
  display: flex;
  align-items: center;
  gap: 16px;
}
header.header-six .header-btn .header-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
header.header-six .header-btn .header-item .theme-toggle {
  background: var(--secondary) !important;
  color: var(--gray-900) !important;
  border: none !important;
  transition: all 0.3s ease;
}
header.header-six .header-btn .header-item .theme-toggle:hover {
  background: var(--primary) !important;
  color: #fff !important;
}
header.header-six .header-btn .header-item .icon-btn a,
header.header-six .header-btn .header-item .icon-btn button {
  background: #fd3995;
  color: #fff;
  transition: all 0.3s ease;
  border: none !important;
  box-shadow: unset !important;
}
header.header-six .header-btn .header-item .icon-btn a:hover,
header.header-six .header-btn .header-item .icon-btn button:hover {
  background: var(--primary);
}
header.header-six .header-btn .header-item .icon-btn .count-icon {
  width: 18px;
  height: 18px;
  font-size: 13px;
  color: #fff;
}
header.header-six .header-btn .btn {
  padding: 10px 24px;
}
header.header-six.fixed .main-menu-wrapper .main-nav > li.active a {
  color: var(--primary);
}
@media (max-width: 575.98px) {
  header.header-eight {
    border-bottom: 1px solid var(--gray-100);
  }
}
header.header-eight .header-btn .btn {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 16px;
}
@media (max-width: 1199.98px) {
  header.header-eight .header-btn .btn {
    display: block !important;
  }
}
@media (max-width: 1399.98px) {
  header.header-eight .main-menu-wrapper .main-nav > li {
    margin-right: 22px !important;
  }
}
@media (max-width: 1199.98px) {
  header.header-eight .main-menu-wrapper .main-nav > li {
    margin-right: 16px !important;
  }
}
header.header-eight .main-menu-wrapper .main-nav .has-submenu > ul {
  padding-bottom: 16px;
}
@media (max-width: 1199.98px) {
  header.header-eight .navbar-header #mobile_btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  header.header-eight .navbar-header #mobile_btn:hover {
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
  }
  header.header-eight .navbar-header #mobile_btn:hover .bar-icon {
    color: var(--white);
  }
  header.header-eight .navbar-header #mobile_btn .bar-icon {
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 1199.98px) {
  header.header-eight .header-nav {
    margin: 8px 0px;
  }
}
header.header-eight .main-nav > li.active > a {
  color: var(--primary);
}
@media (max-width: 575.98px) {
  header.header-nine {
    border-bottom: 1px solid var(--gray-900);
  }
}
header.header-nine .header-nav .navbar-logo .logo-white {
  display: block;
}
header.header-nine .header-nav .navbar-logo .logo-dark {
  display: none;
}
header.header-nine .main-menu-wrapper .main-nav {
  background: var(--white-200);
  padding: 0px 30px;
  border-radius: 100px;
}
@media (max-width: 1199.98px) {
  header.header-nine .main-menu-wrapper .main-nav {
    padding: 0px 8px 0px 30px;
    background: transparent;
  }
}
header.header-nine .main-menu-wrapper .main-nav > li:last-child {
  margin-right: 0px !important;
}
@media (max-width: 1199.98px) {
  header.header-nine .main-menu-wrapper .main-nav > li:last-child {
    margin-right: 20px !important;
  }
}
@media (max-width: 1399.98px) {
  header.header-nine .main-menu-wrapper .main-nav > li {
    margin-right: 20px !important;
  }
}
header.header-nine .main-menu-wrapper .main-nav > li > a {
  color: #fff;
  font-weight: 500;
}
@media (max-width: 1199.98px) {
  header.header-nine .main-menu-wrapper .main-nav > li > a {
    color: var(--gray-500);
  }
}
header.header-nine .main-menu-wrapper .main-nav .has-submenu ul {
  margin-bottom: 16px;
}
header.header-nine .main-menu-wrapper .menu-header .logo-white {
  display: none;
}
header.header-nine .main-menu-wrapper .menu-header .logo-dark {
  display: block;
}
header.header-nine .header-btn {
  gap: 24px;
}
@media (max-width: 1199.98px) {
  header.header-nine .header-btn .header-item {
    display: none;
  }
}
header.header-nine .header-btn .header-item .theme-toggle {
  background: var(--primary) !important;
  color: var(--white) !important;
}
header.header-nine .header-btn .btn {
  padding: 12px 34px;
  border-radius: 0;
}
@media (max-width: 1199.98px) {
  header.header-nine .header-btn .btn {
    display: block !important;
  }
}
@media (max-width: 1199.98px) {
  header.header-nine .menu-login {
    padding: 20px 12px 20px;
    text-align: center;
  }
}
@media (max-width: 1199.98px) {
  header.header-nine .menu-login .btn {
    width: 90%;
    justify-content: center;
  }
}
header.header-nine.fixed .header-nav .navbar-logo .logo-white {
  display: none;
}
header.header-nine.fixed .header-nav .navbar-logo .logo-dark {
  display: block;
}
header.header-nine.fixed .header-nav .main-nav {
  background: transparent !important;
}
.profile-dropdown .dropdown-menu {
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 0;
}
.profile-dropdown .dropdown-menu .profile-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.profile-dropdown .dropdown-menu .profile-header .avatar {
  margin-right: 10px;
}
.profile-dropdown .dropdown-menu .profile-header h6 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.profile-dropdown .dropdown-menu .profile-header p {
  font-size: 12px;
}
.profile-dropdown .dropdown-menu .profile-body {
  padding: 15px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.profile-dropdown .dropdown-menu .profile-body li {
  margin-bottom: 8px;
}
.profile-dropdown .dropdown-menu .profile-body li:last-child {
  margin-bottom: 0;
}
.profile-dropdown .dropdown-menu .profile-footer {
  padding: 15px 20px;
}
.profile-dropdown .dropdown-menu .profile-footer .dropdown-item {
  margin-bottom: 12px;
}
.profile-dropdown .dropdown-menu .dropdown-item {
  color: var(--gray-900);
  padding: 0;
}
.profile-dropdown .dropdown-menu .dropdown-item i {
  color: var(--gray-500);
}
.profile-dropdown .dropdown-menu .dropdown-item:hover {
  color: var(--secondary);
  background: transparent;
}
.profile-dropdown .dropdown-menu .dropdown-item:hover i {
  color: var(--secondary);
}
.profile-dropdown .dropdown-menu .message-count {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--white);
  background: var(--primary);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.menu-opened .main-menu-wrapper {
  transform: translateX(0);
}
.menu-opened .main-menu-wrapper body {
  overflow: hidden;
}

.header-topbar {
  padding: 8px 0 0;
  position: relative;
  background: var(--dark);
}
.header-topbar p {
  color: var(--white);
}
.header-topbar p i {
  color: var(--gray-500);
}
.header-topbar .social-icon a {
  width: 15px;
  height: 15px;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--dark);
  border-radius: 50%;
}
.header-topbar .social-icon a:hover {
  background: var(--primary);
  color: var(--white);
}
.header-topbar .dropdown > a {
  color: var(--white);
  font-weight: 500;
}
.header-topbar .dropdown.flag-dropdown img {
  height: 12px;
}
.header-topbar .dropdown .dropdown-menu {
  z-index: 9999;
}
.header-topbar .cart-dropdown a,
.header-topbar .fav-dropdown a {
  color: var(--white);
}
@media (max-width: 767.98px) {
  .header-topbar {
    display: none;
  }
}
.header-topbar.header-topbar-eight {
  background: var(--primary-hover);
  padding: 8px 0px;
}
.header-topbar.header-topbar-eight .support-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-topbar.header-topbar-eight .support-info p {
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
}
.header-topbar.header-topbar-eight .support-info p i {
  color: var(--white);
}
.header-topbar.header-topbar-eight .support-info p a {
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.header-topbar.header-topbar-eight .social-icon {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}
.header-topbar.header-topbar-eight .social-icon .icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-300);
  color: var(--white);
  font-size: 14px;
  transition: all 0.7s;
}
.header-topbar.header-topbar-eight .social-icon .icon:hover {
  background: var(--primary);
  color: var(--white);
}

.count-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  top: -4px;
  right: -4px;
}

.header__hamburger .sidebar-menu {
  color: var(--gray-900);
}

.offcanvas-info {
  background: var(--white) none repeat scroll 0 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 350px;
  height: 100%;
  transform: translateX(calc(100% + 80px));
  -webkit-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -webkit-transition:
    transform 0.45s ease-in-out,
    opacity 0.45s ease-in-out;
  -moz-transition:
    transform 0.45s ease-in-out,
    opacity 0.45s ease-in-out;
  transition:
    transform 0.45s ease-in-out,
    opacity 0.45s ease-in-out;
  z-index: 99999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.offcanvas-info::-webkit-scrollbar {
  display: none;
}

.offcanvas-info.show {
  opacity: 1;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
}

.offcanvas-wrap {
  position: relative;
  height: 100%;
  padding: 20px;
}
.offcanvas-wrap .offcanvas-detail .offcanvas-close {
  text-align: center;
  color: var(--gray-600);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.offcanvas-wrap .offcanvas-detail .offcanvas-close:hover {
  color: #e70d0d;
}
.offcanvas-wrap .offcanvas-detail .offcanvas__contact {
  margin-top: 20px;
}
.offcanvas-wrap
  .offcanvas-detail
  .offcanvas__contact
  .header-button
  .theme-btn {
  width: 100%;
  padding: 16px 40px;
}
.offcanvas-wrap .offcanvas-detail .offcanvas__contact .dropdown-menu {
  z-index: 999999;
}

.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}

.offcanvas-overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}

@media (max-width: 575px) {
  .offcanvas-info {
    width: 300px;
  }
  .offcanvas-wrap {
    padding: 20px;
  }
}

.header-dropdown {
  background: var(--light-200);
  border-radius: 10px;
  padding: 20px;
}
.header-dropdown .dropdown .dropdown-toggle {
  border-radius: 4px;
  padding: 7px 12px;
  color: var(--gray-600);
}
.header-dropdown .dropdown .dropdown-toggle::after {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.megamenu-wrapper {
  padding: 24px 24px 0;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
}
@media (max-width: 1199.98px) {
  .megamenu-wrapper {
    padding: 0;
    box-shadow: none;
  }
}
@media (max-width: 1199.98px) {
  .megamenu-wrapper h6 {
    display: none;
  }
}
.megamenu-wrapper .btn:hover {
  padding-left: 15px !important;
}

/* ── CTC Calculator Megamenu Panel ── */
.nav-mega-panel {
  padding: 0 !important;
  box-shadow: none !important;
}
.nav-mega-col {
  padding: 24px 20px;
  border-right: 1px solid #f1f5f9;
}
.nav-mega-col:last-child {
  border-right: none;
}
.nav-mega-col-highlight {
  background-color: #f0f6ff;
  border-radius: 0 10px 10px 0;
}
.nav-mega-heading {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}
.nav-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-mega-list li {
  margin-bottom: 10px;
}
.nav-mega-list li:last-child {
  margin-bottom: 0;
}
.nav-mega-list li a {
  font-size: 13.5px;
  font-weight: 500;
  color: #374151 !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}
.nav-mega-list li a i {
  font-size: 14px;
  width: 16px;
  flex-shrink: 0;
}
.nav-mega-list li a::before {
  display: none !important;
}
.nav-mega-list li a:hover {
  color: var(--secondary) !important;
  gap: 10px;
  padding-left: 0 !important;
}
/* ── Mega menu on mobile sidebar ── */
@media (max-width: 1199.98px) {
  /* Prevent absolute/overflow issues — sidebar is already scrollable */
  header .main-menu-wrapper .main-nav > li > ul.mega-submenu {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    min-width: 0 !important;
    border-radius: 0 !important;
  }

  /* Remove bootstrap gutter margins that cause overflow in narrow sidebar */
  header .main-menu-wrapper .main-nav > li > ul.mega-submenu .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force every Bootstrap column to 100% width inside 260px sidebar */
  header .main-menu-wrapper .main-nav > li > ul.mega-submenu [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nav-mega-panel {
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Each column becomes a stacked block with a separator */
  .nav-mega-col {
    padding: 8px 0 8px 0;
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
  }

  .nav-mega-col:last-child {
    border-bottom: none;
  }

  /* Remove highlight bg inside narrow sidebar */
  .nav-mega-col-highlight {
    background-color: transparent !important;
    border-radius: 0 !important;
  }

  /* Show section headings as compact labels */
  .nav-mega-heading {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 15px 4px;
    margin-bottom: 2px;
    border-bottom: none;
  }

  /* Indent links inside mega menu columns */
  .nav-mega-list li a {
    padding: 6px 15px 6px 25px !important;
    font-size: 13px !important;
  }

  .nav-mega-list li a:hover {
    padding-left: 28px !important;
  }

  /* Keep each mobile navigation level visually distinct. */
  header .main-menu-wrapper .main-nav > li > a {
    padding: 14px 8px !important;
    font-weight: 700;
  }

  header .main-menu-wrapper .main-nav > li > .submenu {
    margin: 0 0 8px 10px;
    padding: 4px 0;
    border-left: 2px solid var(--secondary);
    background: rgba(0, 0, 0, 0.035);
  }

  header .main-menu-wrapper .main-nav > li > .submenu > li > a {
    padding: 10px 12px 10px 18px !important;
    font-size: 13px;
  }

  header
    .main-menu-wrapper
    .main-nav
    > li
    > .submenu
    > li.has-submenu
    > .submenu {
    margin: 2px 8px 8px 18px;
    padding: 3px 0;
    border-left: 1px solid var(--gray-300);
    background: rgba(0, 0, 0, 0.025);
  }

  header
    .main-menu-wrapper
    .main-nav
    > li
    > .submenu
    > li.has-submenu
    > .submenu
    > li
    > a {
    padding: 8px 10px 8px 16px !important;
    font-size: 12.5px;
  }
}

/* ── CTC Calculator Megamenu Cards ── */

.menu-img {
  border-radius: 10px;
  max-width: 205px;
  margin-left: auto;
  overflow: hidden;
  -webkit-transition: all 0.9s;
  -ms-transition: all 0.9s;
  transition: all 0.9s;
}
.menu-img img {
  border-radius: 10px;
  border: 4px solid var(--white);
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transition: all 0.9s;
  -ms-transition: all 0.9s;
  transition: all 0.9s;
}
.menu-img:hover img {
  transform: scale(1.12);
  -webkit-transform: scale(1.12);
  -ms-transform: scale(1.12);
  -webkit-transition: all 0.9s;
  -ms-transition: all 0.9s;
  transition: all 0.9s;
}
@media (max-width: 1199.98px) {
  .menu-img {
    display: none;
  }
}

.mean-container .mean-nav .main-nav li.mega-innermenu li a {
  padding: 4px 4px 4px 16px !important;
}
.mean-container .mean-nav .main-nav li.mega-innermenu .megamenu-wrapper ul {
  display: block !important;
}
.mean-container
  .mean-nav
  .main-nav
  li.mega-innermenu
  .megamenu-wrapper
  ul
  li:last-child {
  margin-bottom: 0;
}
.mean-container
  .mean-nav
  .main-nav
  li.mega-innermenu
  .megamenu-wrapper
  .mean-expand {
  display: none;
}
.mean-container .mean-nav .main-nav li.mega-menu li a {
  padding: 4px 4px 4px 16px !important;
}

header.header-five
  .header-nav
  .main-menu-wrapper
  .main-nav
  > li.active
  > a::after {
  color: var(--secondary);
}
header.header-six.fixed
  .header-nav
  .main-menu-wrapper
  .main-nav
  > li.active
  > a::after {
  color: var(--white);
}

header .header-btn .icon-btn .theme-toggle {
  display: none;
}
header .header-btn .icon-btn .theme-toggle.activate {
  display: flex;
}

header.header-five .header-logo.logo-dark {
  display: none;
}
header.header-five .header-logo.logo-white {
  display: block;
}

header.header-four .header-logo.logo-dark {
  display: none;
}
header.header-four .header-logo.logo-white {
  display: block;
}
header.header-three .header-logo.logo-dark {
  display: none;
}
header.header-three .header-logo.logo-white {
  display: block;
}

.header-topbar .logo-white {
  display: none;
}

@media (max-width: 1199.98px) {
  .header-six .header__hamburger {
    margin-left: auto;
  }
  .header-six .header__hamburger .sidebar-menu {
    color: var(--white) !important;
  }
}

.sidebar-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  height: 100%;
  width: 100%;
  z-index: 980;
  position: fixed;
  top: 0;
  left: 0;
}
@media (max-width: 1199.98px) {
  .sidebar-overlay.opened {
    display: block;
  }
}

.menu-opened .main-menu-wrapper {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
}

html.menu-opened body {
  overflow: hidden;
}

@media (max-width: 1199.98px) {
  #mobile-menu {
    display: none;
  }
}

.menu-dropdown {
  padding: 20px;
}
@media (min-width: 1200px) {
  .menu-dropdown {
    display: none;
  }
}
.menu-dropdown .dropdown > a {
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  padding: 6px 12px;
  display: flex;
}
.menu-dropdown .dropdown .dropdown-toggle:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 12px;
}
.menu-dropdown .cart-item {
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-dropdown .cart-item h6 {
  font-weight: 500;
}
.menu-dropdown .icon-btn > a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-100);
  background: var(--white);
  font-size: 16px;
}
.menu-dropdown .icon-btn > a:hover {
  background: var(--light);
}

.menu-login {
  padding: 0 20px 20px;
}
@media (min-width: 1200px) {
  .menu-login {
    display: none;
  }
}

/****** Utils ******/
/*============================
  32.breadcrumb
============================*/
.breadcrumb-bar {
  padding: 12px 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #fee0de 0%, #e4f5fd 51.39%, #ddedff 100%);
}

.breadcrumb .breadcrumb-item {
  color: var(--gray-900);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.breadcrumb .breadcrumb-item a {
  color: var(--gray-900);
}
.breadcrumb .breadcrumb-item a:hover {
  color: var(--secondary);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item {
  margin-left: 10px;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: none;
}
.breadcrumb .breadcrumb-item .crumbSep {
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--gray-700);
}
.breadcrumb-nav-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) transparent;
  padding-bottom: 12px;
}
.breadcrumb-nav-split::-webkit-scrollbar {
  height: 4px;
}
.breadcrumb-nav-split::-webkit-scrollbar-track {
  background: transparent;
}
.breadcrumb-nav-split::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 4px;
}
.breadcrumb-nav-split .breadcrumb {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.breadcrumb-nav-split .breadcrumb-right {
  color: var(--gray-700);
}
.breadcrumb-nav-split .breadcrumb-right .breadcrumb-item {
  color: var(--gray-700);
}
.breadcrumb-nav-split .breadcrumb-item i {
  margin-right: 6px;
  font-size: 1em;
}
.breadcrumb-nav-split .crumb-icon-home {
  color: #2f80ed;
}
.breadcrumb-nav-split .crumb-icon-programs {
  color: #f2994a;
}
.breadcrumb-nav-split .crumb-icon-award {
  color: #9b51e0;
}
.breadcrumb-nav-split .crumb-icon-phone {
  color: #27ae60;
}
@media (max-width: 767.98px) {
  .breadcrumb-nav-split .breadcrumb-item i {
    margin-right: 4px;
  }
  .breadcrumb-nav-split {
    justify-content: flex-start;
  }
  .breadcrumb-nav-split .breadcrumb-item {
    font-size: 12px;
  }
  .breadcrumb-nav-split .breadcrumb-item + .breadcrumb-item {
    margin-left: 8px;
  }
  .breadcrumb-nav-split .crumbSep {
    margin-right: 8px;
  }
}

/****** Utils ******/
.footer {
  position: relative;
}
.footer .footer-about .footer-logo {
  margin-bottom: 20px;
}
.footer .footer-about p {
  margin-bottom: 30px;
}

.footer-widget .footer-title {
  font-size: 20px;
  margin-bottom: 15px;
}
@media (max-width: 767.98px) {
  .footer-widget .footer-title {
    font-size: 18px;
  }
}

.footer-widget ul li:last-child {
  margin-bottom: 0;
}
.footer-widget ul li a {
  color: var(--gray-500);
  font-size: 15px;
}
.footer-widget ul li a:hover {
  color: var(--secondary);
}
@media (max-width: 991.98px) {
  .footer-widget ul li a {
    font-size: 14px;
  }
}

.footer-bottom {
  background: #342777;
  padding: 1.5rem 0;
}
.footer-bottom .footer-link li {
  position: relative;
}
.footer-bottom .footer-link li a {
  color: var(--white);
}
.footer-bottom .footer-link li a:hover {
  color: var(--secondary);
}
.footer-bottom .footer-link li + li {
  padding-left: 15px;
  margin-left: 15px;
}
.footer-bottom .footer-link li + li::before {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--white);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.footer-eight {
  background-image: url(../img/bg/footer-bg-1.png);
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 0px 0;
}

@media (max-width: 575.98px) {
  .footer-eight {
    padding: 40px 0px 0;
  }
}
.footer-eight .footer-address {
  margin: 40px 0px;
  background: #36353521;
  position: relative;
  padding: 20px 40px;
  border-radius: 10px;
  border-left: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
}
@media (max-width: 1199.98px) {
  .footer-eight .footer-address {
    padding: 16px;
  }
}
@media (max-width: 575.98px) {
  .footer-eight .footer-address .footer-row {
    row-gap: 40px !important;
  }
}
.footer-eight .footer-address .footer-address-text {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
@media (max-width: 991.98px) {
  .footer-eight .footer-address .footer-address-text {
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  .footer-eight .footer-address .footer-address-text {
    justify-content: start;
    width: 56%;
    margin: auto;
  }
}
@media (max-width: 575.98px) {
  .footer-eight .footer-address .footer-address-text {
    width: 100%;
  }
}
.footer-eight .footer-address .footer-address-text::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    111deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffffb3 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
@media (max-width: 991.98px) {
  .footer-eight .footer-address .footer-address-text::before {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .footer-eight .footer-address .footer-address-text::before {
    display: block;
    width: 100%;
    height: 2px;
    bottom: -20px;
    top: unset;
  }
}
.footer-eight
  .footer-address
  .footer-address-text
  .footer-content
  .footer-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
@media (max-width: 575.98px) {
  .footer-eight
    .footer-address
    .footer-address-text
    .footer-content
    .footer-title {
    font-size: 16px;
  }
}
.footer-eight .footer-address .footer-address-text .footer-content .footer-text,
.footer-eight
  .footer-address
  .footer-address-text
  .footer-content
  .footer-text
  a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-100);
  display: inline-block;
  padding: 4px 0;
}
@media (max-width: 575.98px) {
  .footer-eight
    .footer-address
    .footer-address-text
    .footer-content
    .footer-text {
    font-size: 14px;
  }
}
.footer-eight .footer-address .footer-address-text.text-1::before {
  content: unset;
}
.footer-eight .footer-widget .footer-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
}

@media (max-width: 575.98px) {
  .footer-eight .footer-widget .footer-title {
    margin-bottom: 16px;
    font-size: 18px;
  }
}
.footer-eight .footer-widget .footer-links li {
  margin-bottom: 8px;
}
@media (max-width: 575.98px) {
  .footer-eight .footer-widget .footer-links li {
    margin-bottom: 12px;
  }
}
.footer-eight .footer-widget .footer-links li:last-child {
  margin-bottom: 0;
}
.footer-eight .footer-widget .footer-links li a {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-100);
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  padding: 4px 0;
  min-height: 32px;
}
.footer-eight .footer-widget .footer-links li a:before {
  position: absolute;
  /* top: 7px; */
  display: block;
  content: "\f111";
  float: left;
  margin-right: 10px;
  font-size: 6px;
  color: var(--secondary);
  transition: all 0.5s ease-in-out;
  font-family: "FontAwesome";
}
@media (max-width: 575.98px) {
  .footer-eight .footer-widget .footer-links li a {
    font-size: 14px;
  }
}
.footer-eight .footer-widget .footer-links li a:hover {
  color: #ed1143;
}
.footer-eight .footer-widget .footer-links li a:hover span {
  background: #ed1143;
  width: 10px;
  margin-right: 8px;
}
.footer-eight .footer-widget .footer-links li a span {
  background: var(--light);
  width: 0;
  margin-left: 18px;
  height: 3px;
  border-radius: 20px;
  display: inline-block;
  margin-right: 0;
  transition: all 0.7s;
}
.footer-eight .footer-bottom {
  padding: 20px 0px;
  border-top: 1px solid var(--gray-800);
  background: transparent;
}
.footer-eight .footer-bottom .footer-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.footer-eight .footer-bottom .footer-copy p {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-100);
  margin-bottom: 0;
}
.footer-eight .footer-bottom .footer-copy p a {
  color: var(--primary);
}
.copyPowerbg {
  background: #5625e8;
  display: inline-block;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  margin-right: 25px;
}
.copyPowerbg img {
  width: 57px;
}
.copyPowerbg:hover {
  color: #fff;
  text-decoration: none !important;
  background: #442c7d;
}
@media (max-width: 767.98px) {
  .footer-eight .footer-bottom .footer-copy {
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
  }
  .footer-eight .footer-bottom .footer-copy p {
    text-align: center;
  }
}
.footer .footer-about .footer-logo {
  margin-bottom: 16px;
}
.footer .footer-about .footer-description {
  color: #e7e7e7;
  margin-bottom: 44px;
  font-size: 14px;
}
@media (max-width: 575.98px) {
  .footer .footer-about .footer-description {
    margin-bottom: 24px;
  }
}

/****** Utils ******/
/*============================
  23.content
============================*/
.content {
  padding: 60px 0;
}
@media (max-width: 991.98px) {
  .content {
    padding: 40px 0;
  }
}

/******* Vendors ******/
/****** Utils ******/

/****** Utils ******/
/*============================
  60.meanmenu
============================*/
.mean-container .mean-nav ul li .submenu li:last-child {
  margin-bottom: 12px;
}
.mean-container .mean-nav ul li .submenu li a {
  font-size: 14px;
  font-weight: 400;
  padding: 4px 4px 4px 16px;
  width: 100%;
}

/******* Pages ******/
/****** Utils ******/
/*=============================
    Banner
===============================*/
.banner-section {
  position: relative;
  background-image: url(../img/bg/overlay2.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  padding: 25px 0 40px;
  z-index: 0;
  overflow: hidden;
}
/* Phones get an 800px copy (36 KB vs 115 KB); it sits under a ~90% dark overlay.
   Keep in sync with the media-specific preloads in index.html. */
@media (max-width: 767.98px) {
  .banner-section {
    background-image: url(../img/bg/overlay2-sm.webp);
  }
}
.banner-section::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.68),
    transparent 80%
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent 80%);
  pointer-events: none;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgb(12 14 26 / 94%) 0%,
    rgb(26 23 33 / 90%) 45%,
    rgb(6 6 6 / 84%) 100%
  );
  /* background: rgba(0, 0, 0, 0.85); */
  z-index: 1;
}

/* Keep content above overlay */
.banner-section .container,
.banner-section .banner-image,
.banner-section .banner-content {
  position: relative;
  z-index: 2;
}
.banner-section ::selection {
  background: #7c4dff;
  color: #ffffff;
}

.banner-section ::-moz-selection {
  background: #7c4dff;
  color: #ffffff;
}
.banner-section .banner-bg3 {
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 33%;
}
.banner-section .banner-content {
  position: relative;
  z-index: 0;
}
.banner-section .banner-content .hero-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  padding: 7px 16px;
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}
.banner-section .banner-content h1 {
  max-width: 690px;
  font-size: 45px;
  line-height: 1.16;
  font-weight: 300;
}
.banner-section .banner-content .rupee {
  display: inline-block;
  color: #0dcaf0;
  font-weight: 300;
}
@media (max-width: 991.98px) {
  .banner-section .banner-content h1 {
    font-size: 34px;
  }
}
@media (max-width: 767.98px) {
  .banner-section .banner-content h1 {
    font-size: 28px;
  }
}
@media (max-width: 575.98px) {
  .banner-section .banner-content h1 {
    font-size: 26px;
  }
}

.banner-section .banner-content h1 span {
  position: relative;
  display: inline-block;
  color: var(--secondary);
  margin-bottom: 16px;
  text-shadow: 0 10px 28px rgba(255, 194, 38, 0.24);
  font-weight: 700;
}
/* Lightning glow: a copy of the text (data-glow) carries the bright shadow and
   only its opacity animates, so the effect stays on the compositor instead of
   repainting the hero heading every frame. */
.banner-section .banner-content h1 span[data-glow]::after {
  content: attr(data-glow);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow:
    0 0 8px #fff,
    0 0 20px rgba(255, 194, 38, 1),
    0 0 40px rgba(255, 194, 38, 0.8);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: lightningGlow 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .banner-section .banner-content h1 span[data-glow]::after {
    animation: none;
  }
}

/* Bright electric flash */
@keyframes lightningSweep {
  0% {
    left: -30%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  25% {
    left: 110%;
    opacity: 1;
  }

  30%,
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* Subtle glow when lightning passes */
@keyframes lightningGlow {
  0%,
  70%,
  100% {
    opacity: 0;
  }

  75% {
    opacity: 0.8;
  }

  78% {
    opacity: 1;
  }
}
.banner-section .banner-content .hero-performance-tagline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.banner-section .banner-content .tagline-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 8px 11px;
  border-radius: 12px;
  color: #111111;
  background: linear-gradient(135deg, #ffc226 0%, #ffef9f 100%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.banner-section .banner-content .tagline-copy {
  position: relative;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}
.banner-section .banner-content .tagline-copy strong {
  color: #0dcaf0;
  font-weight: 500;
  letter-spacing: 1.4px;
}

@media (max-width: 991.98px) {
  .banner-section .banner-content {
    text-align: center;
  }
  .banner-section .banner-content .hero-title {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .banner-section .banner-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .banner-section .banner-content .hero-action-wrap {
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  .banner-section .banner-content .hero-performance-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    padding: 12px;
    text-align: center;
  }
  .banner-section .banner-content .tagline-copy {
    font-size: 18px;
  }
  .banner-section .hero-action-wrap,
  .banner-section .hero-vibe-strip {
    justify-content: center;
  }
  .banner-section .hero-primary-btn,
  .banner-section .hero-secondary-btn {
    width: 100%;
    max-width: 320px;
  }
  .banner-section .hero-action-wrap {
    padding-top: 18px;
  }
}
@media (max-width: 575.98px) {
  .banner-section .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .banner-section .banner-content .tagline-copy {
    font-size: 16px;
  }
  .banner-section .banner-content h1 {
    font-size: 26px;
    line-height: 1.2;
  }
  .banner-section .banner-content .hero-title {
    font-size: 12px;
    padding: 8px 12px;
  }
  .banner-section .hero-performance-tagline {
    width: 100%;
  }
  .banner-section .hero-vibe-strip {
    justify-content: center;
  }
  .banner-section .hero-vibe-strip span {
    font-size: 12px;
  }
  .banner-section .hero-counter-grid {
    grid-template-columns: 1fr;
  }
  .banner-section .hero-counter-grid .counter-item {
    width: 100%;
  }
  .banner-section .hero-primary-btn,
  .banner-section .hero-secondary-btn {
    max-width: 100%;
  }
}
.banner-section .banner-content p {
  color: var(--light);
  margin-bottom: 24px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.72;
}
.banner-section .hero-action-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding-top: 24px;
}
.banner-section .hero-primary-btn,
.banner-section .hero-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 19px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.banner-section .hero-primary-btn {
  color: #151515;
  background: linear-gradient(135deg, #ffc226 0%, #ffef9f 100%);
  box-shadow: 0 16px 38px rgba(255, 194, 38, 0.28);
}
.banner-section .hero-secondary-btn {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}
.banner-section .hero-primary-btn:hover,
.banner-section .hero-secondary-btn:hover {
  transform: translateY(-2px);
}
.banner-section .hero-primary-btn:hover {
  color: #151515;
  box-shadow: 0 20px 46px rgba(255, 194, 38, 0.36);
}
.banner-section .hero-secondary-btn:hover {
  color: #ffffff;
  border-color: rgba(13, 202, 240, 0.55);
}
.banner-section .hero-vibe-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
  align-items: center;
  justify-content: center;
}
.banner-section .hero-vibe-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 700;
}
.banner-section .hero-vibe-strip i {
  color: #ffc226;
}
.banner-section .banner-content .banner-search .dropdown {
  flex-shrink: 0;
  margin-right: 20px;
}
@media (max-width: 575.98px) {
  .banner-section .banner-content .banner-search .dropdown {
    margin-right: 0;
  }
}
.banner-section .banner-content .counter-item {
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}
.banner-section .hero-counter-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.banner-section .hero-counter-grid .counter-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
}
.banner-section .hero-counter-grid .counter-item:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 202, 240, 0.45);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
}
@media (min-width: 1200px) {
  .banner-section .hero-counter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .banner-section .hero-counter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 380px) {
  .banner-section .hero-counter-grid {
    grid-template-columns: 1fr;
  }
}
.banner-section .hero-counter-grid .counter-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}
.banner-section .hero-counter-grid .counter-icon img {
  max-width: 55px;
  object-fit: contain;
}
.banner-section .hero-counter-grid .counter-icon i {
  font-size: 24px;
  color: #ffffff;
}
.banner-section .hero-counter-grid .count-content {
  min-width: 0;
}
.banner-section .hero-counter-grid .custom-title {
  font-size: 28px;
  line-height: 1.05;
  margin-bottom: 4px;
    font-weight: 700;
      letter-spacing: 1.5px;
}
.banner-section .hero-counter-grid .count-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  margin-bottom: 0;
  line-height: normal;
}

.banner-section .banner-content .counter-item .count-content p {
  font-weight: 500;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .banner-section .banner-content .counter-item {
    justify-content: center;
  }
}
.banner-section .banner-image {
  position: relative;
  padding: 0 40px;
}
.banner-section .banner-image::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 318px;
  z-index: -1;
  border-radius: 28px;
}
@media (max-width: 991.98px) {
  .banner-section .banner-image {
    display: block;
    padding: 0;
    margin: 28px auto 0;
    max-width: 520px;
  }
  .banner-section .banner-image .swiper {
    width: 100%;
  }
  .banner-section .banner-image::after {
    height: 220px;
    opacity: 0.75;
  }
}
@media (max-width: 575.98px) {
  .banner-section .banner-image {
    margin-top: 20px;
    max-width: 100%;
  }
  .banner-section .banner-image::after {
    height: 160px;
  }
}
.banner-section-two {
  position: relative;
  background: #fff;
  /* max-height: 578px; */
  overflow: hidden;
}
.banner-section-two .star-03 {
  position: absolute;
  z-index: 0;
  left: -60px;
  top: 250px;
}
.banner-section-two .star-05 {
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -70px;
}
.banner-section-two .star-06 {
  position: absolute;
  z-index: 0;
  top: 33px;
  left: -90px;
  animation: upDown 3s ease-in-out infinite;
}
.banner-section-two .star-07 {
  position: absolute;
  z-index: 0;
  top: 178px;
  left: 640px;
  animation: verticalRotate 5s linear infinite;
}
.banner-section-two .star-08 {
  position: absolute;
  z-index: 0;
  top: 115px;
  right: 20px;
  animation: moveDiagonal 4s ease-in-out infinite;
}
.banner-section-two .star-09 {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 320px;
  animation: downUp 4s ease-in-out infinite;
}
.banner-section-two .star-10 {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  right: 70px;
  animation: downUp 3s ease-in-out infinite;
}
.banner-section-two .star-11 {
  position: absolute;
  z-index: 0;
  top: 95px;
  left: 430px;
  animation: myAnim 4s ease 0s infinite normal forwards;
}
.banner-section-two .banner-content {
  padding: 40px 0;
}

@media (max-width: 767.98px) {
  .banner-section-two .banner-content {
    padding: 60px 0;
  }
}
@media (max-width: 575.98px) {
  .banner-section-two .banner-content {
    padding: 20px 0;
  }

   .banner-section .banner-content .hero-performance-tagline {
        padding-top: 0;
   }
   .banner-section .banner-content h1 span{
    margin-bottom:0;
   }
   .banner-section .hero-counter-grid .custom-title {
    font-size: 22px;}
}
.banner-section-two .banner-content .banner-info {
  margin-bottom: 20px;
}
@media (max-width: 767.98px) {
  .banner-section-two .banner-content .banner-info {
    margin-bottom: 30px;
  }
}
.banner-section-two .banner-content .banner-info p {
  font-weight: 600;
}
.banner-section-two h1 {
  font-size: 44px;
}
@media (max-width: 991.98px) {
  .banner-section-two h1 {
    font-size: 34px;
  }
}
@media (max-width: 767.98px) {
  .banner-section-two h1 {
    font-size: 28px;
  }
}
@media (max-width: 575.98px) {
  .banner-section-two h1 {
    font-size: 26px;
  }
}
.banner-section-two h1 .banner-title {
  z-index: 1;
  color: var(--white);
}
.banner-section-two h1 .banner-title .title-bg {
  z-index: -1;
  top: 4px;
  left: -3px;
}
.banner-section-two .dropdown {
  padding: 0 16px 0 10px;
  margin-right: 16px;
}
@media (max-width: 575.98px) {
  .banner-section-two .dropdown {
    border: 1px solid var(--light);
    border-radius: 80px;
    margin-bottom: 10px;
    padding: 15px 20px;
  }
}
.banner-section-two .dropdown .dropdown-toggle {
  border: none;
  padding: 0;
  width: 100%;
}
.banner-section-two .dropdown .dropdown-toggle i {
  color: var(--gray-600);
}
@media (max-width: 575.98px) {
  .banner-section-two .dropdown .dropdown-toggle {
    padding-right: 15px;
  }
}
@media (max-width: 575.98px) {
  .banner-section-two .dropdown .dropdown-toggle::after {
    position: absolute;
    right: 20px;
  }
}
.banner-section-two .dropdown .dropdown-menu {
  width: 100%;
}
.banner-section-two .btn.show,
.banner-section-two .btn.show:hover,
.banner-section-two .btn:first-child:active,
.banner-section-two :not(.btn-check) + .btn:active {
  background: var(--white);
  border-color: var(--white);
  color: var(--gray-900);
}
.banner-section-two .banner-img-section {
  position: relative;
  text-align: right;
  padding-right: 50px;
  margin-left: 40px;
}

.banner-section-two .banner-img-section .about-img {
  border-radius: 10px;
}
.banner-section-two .banner-img-section .enrolled-list-cover {
  display: inline-flex;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border: 1px solid var(--light-900);
  border-radius: 30px 30px 0px 30px;
  background: var(--white);
  position: absolute;
  right: 0;
  bottom: 22px;
  z-index: 1;
  padding: 10px;
}

.banner-section-two .banner-img-section .enrolled-list-cover .enrolled-list {
  padding: 15px;
  border: 1px solid var(--light);
  border-radius: 30px 30px 0px 30px;
}
.banner-section-two .banner-img-section .enrolled-list-cover .enrolled-list p {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 500;
}
.banner-section-two
  .banner-img-section
  .enrolled-list-cover
  .enrolled-list
  .avatar-list-stacked {
  margin-bottom: 10px;
}
.banner-section-two .banner-img-section .course-count {
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  padding: 10px;
  background: var(--primary);
  border-radius: 30px 30px 30px 0;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 22px;
}
.banner-section-two .banner-img-section .course-count .counter-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
}
.banner-section-two .banner-img-section .course-count:hover h4 {
  animation: verticalRotate 0.5s linear 1;
}
.banner-section-nine .banner-content .banner-counter .counter-item-nine .count {
  position: relative;
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
}
.banner-section-nine
  .banner-content
  .banner-counter
  .counter-item-nine
  .count::before {
  content: "";
  position: absolute;
  background: url(../img/icon/count-line.svg);
  background-size: 100% 100%;
  top: -2px;
  left: 0;
  width: 48px;
  height: 7px;
}
@media (max-width: 991.98px) {
  .banner-section-nine
    .banner-content
    .banner-counter
    .counter-item-nine
    .count::before {
    left: 0;
    right: 0;
    margin: auto;
  }
}
.banner-section-nine
  .banner-content
  .banner-counter
  .counter-item-nine
  .count::after {
  content: "";
  position: absolute;
  background: url(../img/icon/count-line-1.svg);
  background-size: 100% 100%;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 7px;
}
@media (max-width: 991.98px) {
  .banner-section-nine
    .banner-content
    .banner-counter
    .counter-item-nine
    .count::after {
    left: 0;
    right: 0;
    margin: auto;
  }
}
.banner-section-nine
  .banner-content
  .banner-counter
  .counter-item-nine
  .counterup {
  color: #fff;
}
.banner-section-nine .banner-content .banner-counter .counter-item-nine p {
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: #fff;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px); /* Move up by 15px */
  }
  100% {
    transform: translateY(0px);
  }
}
.banner-five {
  position: relative;
  background-color: var(--light-900);
  /* background-image: url(../img/bg/bg-1.png); */
  background-repeat: no-repeat;
  background-position: right bottom;
}
@media (max-width: 1399.98px) {
  .banner-five {
    padding-bottom: 24px;
  }
}
@media (max-width: 991.98px) {
  .banner-five {
    background-size: 40%;
    padding-bottom: 60px;
  }
}
@media (max-width: 575.98px) {
  .banner-five {
    background-image: none;
  }
}

.animate-button2 {
  cursor: pointer;
  background: var(--white);
  color: var(--gray-900);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-content: center;
  transition:
    background 300ms,
    transform 200ms;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  border: 1px solid #f9dfdf;
}
.animate-button2:hover .button-circle {
  background: var(--secondary);
  color: var(--white);
}
.animate-button2 .button-text2 {
  position: absolute;
  inset: 0;
  animation: text-rotation 8s linear infinite;
  margin: 0 !important;
}
.animate-button2 .button-text2 > span {
  position: absolute;
  inset: 25px;
  transform: rotate(calc(var(--angle) * var(--index) * 1deg));
  transform-origin: center 70px;
  left: 26px;
  top: 5px;
  display: flex;
  justify-content: center;
  font-weight: 400;
  color: var(--gray-900);
}
.animate-button2 .button-circle {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.8s;
  font-size: 40px;
  font-weight: 400;
}

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}
/****** Utils ******/
/*=============================
    Testimonial
===============================*/
.testimonials-item .slick-prev {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  left: -12px;
}
@media (max-width: 575.98px) {
  .testimonials-item .slick-prev {
    width: 35px;
    height: 35px;
    left: -7px;
  }
}
.testimonials-item .slick-prev::before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}
.testimonials-item .slick-next {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  right: -12px;
}
@media (max-width: 575.98px) {
  .testimonials-item .slick-next {
    width: 35px;
    height: 35px;
    right: -7px;
  }
}
.testimonials-item .slick-next::before {
  font-family: "Font Awesome 5 Free";
  content: "\f053";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}

.testimonials-section-eight {
  position: relative;
  overflow: hidden;
}
.testimonials-section-eight .horizontal-slide {
  margin-bottom: 40px;
}
.testimonials-section-eight .horizontal-slide:last-child {
  margin-bottom: 0;
}
.testimonials-section-eight .shadow-1 {
  position: absolute;
  top: 11%;
  left: 0;
  margin: auto;
  z-index: -1;
}
.testimonials-section-eight .shadow-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}

.testimonial-section-four {
  background: var(--primary-transparent);
}

.testimonial-wrap {
  background: var(--white);
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border-radius: 10px;
  position: relative;
}
.testimonial-wrap .slide-nav {
  position: absolute;
  bottom: 40px;
  left: 390px;
}
@media (max-width: 767.98px) {
  .testimonial-wrap .slide-nav {
    position: unset;
    justify-content: center;
    padding-bottom: 24px;
  }
}

.testimonial-item-four {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px;
}
@media (max-width: 767.98px) {
  .testimonial-item-four {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 24px;
  }
}
.testimonial-item-four .testimonial-content .description {
  text-align: justify;
  margin-bottom: 0;
}
.services-slide {
  height: 100%;
}
.testimonial-item-eight {
  padding: 24px;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  width: 420px;
  height: 320px;
  transition: all 0.7s;
  position: relative;
  z-index: 1;
  background: var(--white);
  margin: 0;
  display: flex;
  flex-direction: column;
}
.testimonial-item-eight:hover {
  background: var(--light-gradient-400);
}
.testimonial-item-eight .testimonial-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.testimonial-item-eight .testimonial-content .review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
  color: #ffc107;
  flex-shrink: 0;
}
.testimonial-item-eight .testimonial-content p {
  color: var(--gray-900);
  margin-bottom: 20px;
  /* text-align: justify; */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.testimonial-item-eight .testimonial-content p:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-100) transparent;
}
.testimonial-item-eight .testimonial-content p::-webkit-scrollbar {
  width: 4px;
}
.testimonial-item-eight .testimonial-content p::-webkit-scrollbar-track {
  background: transparent;
}
.testimonial-item-eight .testimonial-content p::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
}
.testimonial-item-eight .testimonial-content p:hover::-webkit-scrollbar-thumb {
  background-color: var(--gray-100);
}
.testimonial-item-eight .testimonial-author {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: auto;
}
.testimonial-item-eight .testimonial-author .testimonial-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e9e9d7;
  background-color: whitesmoke;
  flex-shrink: 0;
}
.testimonial-item-eight .testimonial-author .testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-item-eight .testimonial-author .author .author-name {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.testimonial-item-eight .testimonial-author .author .author-company-logo {
  max-width: 100px;
  max-height: 26px;
  width: auto;
  height: auto;
}

.slide-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slide-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #ff3c38;
  font-size: 16px;
  border: 0;
}
.slide-nav button:hover {
  background: #08131e;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.horizontal-slide {
  overflow: hidden;
}
.horizontal-slide[data-direction="right"] {
  --_animation-direction: reverse;
}
.horizontal-slide[data-direction="left"] {
  --_animation-direction: forwards;
}
.horizontal-slide[data-speed="fast"] {
  --_animation-duration: 30s;
}
.horizontal-slide[data-speed="slow"] {
  --_animation-duration: 120s;
}
.horizontal-slide .slide-list {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 60s)
    var(--_animation-direction, forwards) linear infinite;
}
.horizontal-slide .slide-list:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
.review-section-six .slick-list {
  margin: 0px -12px;
}
.review-section-six .slick-slide > div {
  margin: 0px 12px;
}

/****** Utils ******/
.course-content {
  padding: 60px 0;
}
.course-content .form-select {
  width: auto;
  box-shadow: none;
  outline: none;
  margin-right: 10px;
  font-size: 14px;
  height: 40px;
  color: var(--gray-900);
}
@media (max-width: 575.98px) {
  .course-content .form-select {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.course-content .select2-container {
  min-width: unset !important;
}
.course-content .show-filter .select2-selection__rendered {
  height: 40px;
}
.course-content .filter-clear .accordion-item {
  border-radius: 10px;
  border: 1px solid var(--gray-100);
  margin-bottom: 20px;
}
.course-content .filter-clear .accordion-item:last-child {
  margin-bottom: 0;
}
.course-content .filter-clear .accordion-item .see-more-btn {
  margin: 10px 0 0;
  color: var(--secondary);
  text-decoration: underline;
  display: inline-block;
  font-size: 14px;
}
.course-content .filter-clear .accordion-item .accordion-button {
  border: none;
  background-color: transparent;
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  box-shadow: none;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1399.98px) {
  .course-content .filter-clear .accordion-item .accordion-button {
    padding: 15px;
  }
}
.course-content .filter-clear .accordion-item .accordion-button::after {
  font-size: 13px;
  font-weight: 500;
  display: none;
}
.course-content .filter-clear .accordion-item .accordion-button.collapsed i {
  transform: rotate(0deg);
}
.course-content .filter-clear .accordion-item .accordion-button i {
  font-size: 12px;
  transform: rotate(-180deg);
}
.course-content .filter-clear .accordion-item .accordion-body {
  border: none;
  padding: 0 20px 20px;
}
.course-content .courses-list-item .fa-star {
  font-size: 14px;
}

.like {
  width: 26px;
  height: 26px;
  display: flex;
  border-radius: 50px;
  background-color: var(--white);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gray-700);
}
.like i {
  transition: color 0.3s ease-in-out;
}
.like:hover i {
  color: var(--secondary);
  content: "\f004";
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.course-category .nav-pills {
  gap: 16px;
  margin-top: 35px;
  margin-bottom: 40px;
}
@media (max-width: 991.98px) {
  .course-category .nav-pills {
    gap: 10px;
    margin-top: 25px;
  }
}
@media (max-width: 575.98px) {
  .course-category .nav-pills {
    margin-top: 20px;
  }
}
.course-category .nav-link {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 10px;
  background-color: var(--gray-100);
  color: var(--gray-900);
}
.course-category .nav-link.active {
  background-color: var(--secondary);
}
@media (max-width: 991.98px) {
  .course-category .nav-link {
    padding: 8px 13px;
    font-size: 14px;
  }
}
@media (max-width: 575.98px) {
  .course-category .nav-link {
    padding: 8px 10px;
    font-size: 13px;
  }
}

.categories-top {
  background-color: rgb(244, 246, 249);
  padding: 50px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-top: 60px;
  border-radius: 10px;
}
@media (max-width: 991.98px) {
  .categories-top {
    padding: 30px;
    margin-top: 50px;
  }
}
@media (max-width: 575.98px) {
  .categories-top {
    padding: 30px 15px;
  }
}
.categories-top .course-bg2 {
  position: absolute;
  right: 8%;
  top: 63%;
  transform: translate(0, -50%);
  z-index: -1;
}
.categories-top .course-bg3 {
  position: absolute;
  right: 30px;
  bottom: 0;
  z-index: -2;
}
.categories-top h2 {
  font-size: 32px;
}
@media (max-width: 767.98px) {
  .categories-top h2 {
    font-size: 26px;
  }
}
@media (max-width: 575.98px) {
  .categories-top h2 {
    font-size: 24px;
  }
}
.categories-top .form-control {
  height: 70px;
  padding: 10px 120px 10px 20px;
  border-radius: 50px;
  text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
  .categories-top .form-control {
    height: 60px;
    padding: 16px 95px 16px 25px;
  }
}
.categories-top .btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  padding: 10px 20px;
}
@media (max-width: 575.98px) {
  .categories-top .btn {
    padding: 6px 14px;
    right: 14px;
  }
}
.categories-top .btn:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}
.categories-top .caetgory-form p {
  font-size: 16px;
}
.course-page-content
  .accordion.accordion-customicon1.accordions-items-seperate {
  padding: 0 18px;
}
.course-page-content
  .accordion.accordion-customicon1.accordions-items-seperate
  li {
  padding: 15px !important;
}
.course-page-content
  .accordion.accordion-customicon1.accordions-items-seperate
  li
  .preview-link {
  color: #5625e8;
  font-size: 14px;
  text-decoration: underline;
}
.course-page-content
  .accordion.accordion-customicon1.accordions-items-seperate
  li
  .preview-link:hover {
  color: var(--secondary);
}
.course-page-content .accordion-item {
  margin-bottom: 10px;
  border: none;
}
.course-page-content .accordion-button {
  font-size: 14px;
  font-weight: 600;
  background-color: var(--light);
  border-radius: 5px;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  color: var(--gray-900);
  border: 1px solid var(--gray-100);
}
.course-page-content .accordion-button::after {
  display: none;
}
.course-page-content .accordion-button i {
  transform: rotate(-180deg);
}
.course-page-content .accordion-button.accordion-button.collapsed i {
  transform: rotate(0deg);
}
.course-page-content .accordion-body ul li {
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
  gap: 10px;
}
.course-page-content .accordion-body ul li:last-child {
  border-bottom: none;
}
@media (max-width: 767.98px) {
  .course-page-content .accordion-body ul li {
    padding: 13px 10px !important;
  }
}

#videoModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content1 {
  position: relative;
  width: 80%;
  max-width: 720px;
  background: #000;
  padding: 0;
  border-radius: 8px;
}

iframe {
  width: 100%;
  height: 400px;
  border: none;
}
.course-resume .accordion-item {
  margin-top: 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--light);
  border: 1px solid var(--gray-100);
}
@media (max-width: 575.98px) {
  .course-resume .accordion-item {
    margin-top: 15px;
  }
}
.course-resume .accordion-item .cou-resume-content h2 {
  font-size: 32px;
}
@media (max-width: 1199.98px) {
  .course-resume .accordion-item .cou-resume-content h2 {
    font-size: 26px;
  }
}
@media (max-width: 767.98px) {
  .course-resume .accordion-item .cou-resume-content h2 {
    font-size: 24px;
  }
}
.course-resume .accordion-item .accordion-item {
  margin-top: 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--light-900);
}
@media (max-width: 575.98px) {
  .course-resume .accordion-item .accordion-item {
    margin-top: 15px;
  }
}
.course-resume .accordion-item .accordion-button {
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  color: var(--gray-900);
  background-color: transparent;
}
@media (max-width: 575.98px) {
  .course-resume .accordion-item .accordion-button {
    padding: 15px;
  }
}
.course-resume .accordion-item .accordion-button::after {
  display: none;
}
.course-resume .accordion-item .accordion-button i {
  transform: rotate(0deg);
  color: var(--primary);
}
.course-resume .accordion-item .accordion-button.accordion-button.collapsed i {
  transform: rotate(-180deg);
}
.course-resume .accordion-item .accordion-body {
  border-top: 1px solid var(--gray-100);
}
@media (max-width: 575.98px) {
  .course-resume .accordion-item .accordion-body {
    padding: 15px;
  }
}
.course-resume .accordion-item .accordion-body .progress {
  border-radius: 0;
  height: 3.33px;
}
.course-resume .accordion-item .accordion-body ul li {
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-100);
}
.course-resume .accordion-item .accordion-body ul li:last-child {
  border-bottom: none;
}
@media (max-width: 575.98px) {
  .course-resume .accordion-item .accordion-body ul li h5 {
    font-size: 15px;
  }
}
.course-resume .accordion-item .accordion-body ul li h5 span {
  font-size: 14px;
}
.course-resume .accordion-item .accordion-body .delete-btn {
  padding: 4px;
  background: var(--white);
  color: #e70d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.course-resume .accordion-item .accordion-body .delete-btn:hover {
  background: #e70d0d;
  color: var(--white);
}
.course-resume .accordion-item .accordion-body .resume-play-btn {
  padding: 4px;
  background: var(--white);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  margin-right: 8px;
}
.course-resume .accordion-item .accordion-body .resume-play-btn:hover {
  background: var(--primary);
  color: var(--white);
}

.course-item {
  padding: 20px;
  border: 1px solid var(--gray-100);
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2);
  border-radius: 10px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.course-item .course-img {
  margin-bottom: 24px;
  position: relative;
}
.course-item .course-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.course-item .badge {
  margin-bottom: 10px;
  font-weight: 500;
}
.course-item .fav-icon {
  width: 26px;
  height: 26px;
  border-radius: 30px;
  background: var(--light-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
}
.course-item .fav-icon:hover {
  color: var(--secondary);
}
.course-item h5,
.course-item .custom-subtitle {
  font-size: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-item .custom-subtitle>a:hover{
  color: #000;
  
}
.course-item .rating {
  font-size: 14px;
  font-weight: 500;
}
.course-item:hover {
  border-color: var(--primary);
}
.course-item .course-content {
  padding: 0;
}
.course-item.course-item-two {
  background: var(--white);
  margin-bottom: 24px;
}
.course-item.course-item-two .course-img {
  border-radius: 10px;
  overflow: hidden;
  transition: all 1.5s;
  max-height: 200px;
}
.course-item.course-item-two .course-img .bg-01 {
  position: absolute;
  top: 35px;
  left: 0;
  height: 122px;
  width: auto;
  z-index: 9;
}
.course-item.course-item-two .course-img .bg-02 {
  position: absolute;
  top: 48px;
  left: 0;
  height: 112px;
  width: auto;
  z-index: 9;
}
.course-item.course-item-two .course-img .brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 5px;
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0px 4px 14px 0px rgba(219, 219, 219, 0.2509803922);
  display: inline-flex;
  align-items: center;
}
.course-item.course-item-two .course-content img {
  width: 24px;
  height: 24px;
}
.course-item.course-item-two .course-content .title {
  font-size: 18px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 991.98px) {
  .course-item.course-item-two .course-content .title {
    font-size: 16px;
  }
}
.course-item.course-item-two .course-content p {
  font-size: 14px;
  /* white-space: nowrap; */
}
.course-item.course-item-three {
  border-radius: 10px;
  position: relative;
  background: var(--white);
  margin-bottom: 24px;

}
.course-item.course-item-three:hover img{
      animation: verticalRotate1 0.5s linear 1;
}

@keyframes verticalRotate1 {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}
.course-item.course-item-three .rating {
  margin-left: auto;
  margin-bottom: 15px;
  width: auto;
  font-size: 14px;
  color: var(--gray-500);
}
.course-item.course-item-three .rating i {
  font-size: 13px;
}
.course-item.course-item-three .course-img {
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 10px;
  margin-bottom: 24px;
}
.course-item.course-item-three .course-img img {
  width: 100%;
  border-radius: 10px;
  transform: translateZ(0);
  transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.course-item.course-item-three .course-img:hover img {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  transform: scale(1.15);
}
.course-item.course-item-three .course-content {
  padding: 0;
}
.course-item.course-item-three .course-content .title {
  font-size: 20px;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  .course-item.course-item-three .course-content .title {
    font-size: 18px;
  }
}
.course-item.course-item-three .price {
  background: var(--white);
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 4px 8px;
  border-radius: 10px;
}
.course-item.course-item-three .price h3 {
  font-size: 20px;
  color: var(--secondary);
  font-weight: 700;
  margin-bottom: 0;
}
.course-item.course-item-three .price h3 span {
  text-decoration: line-through;
  font-size: 14px;
  color: #857dad;
  font-weight: 600;
}
.course-item.course-item-eight .course-img .favourite-icon button .fa-solid {
  color: #e70d0d;
}

/* Course Watch*/
.course-watch-section .accordion-button {
  background-color: var(--light);
  color: var(--gray-500);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.course-watch-section .accordion-button:not(.collapsed) {
  color: var(--gray-500);
  background-color: var(--light);
  box-shadow: none;
}
.course-watch-section .accordion-button:focus {
  border-color: rgba(var(--primary), 0.3);
  box-shadow: none;
}
.course-watch-section .accordion-button:after,
.course-watch-section .accordion-button:not(.collapsed)::after {
  background-image: none;
}
.course-watch-section .accordion-button:after {
  content: "\f0d7";
  font-family: "Fontawesome";
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3.125rem;
  color: var(--gray-500);
}
.course-watch-section .accordion-body {
  padding: 1rem;
  font-size: 0.8125rem;
  color: #677788;
  border-top: 1px solid var(--gray-100);
}
.course-watch-section .accordion-item {
  color: var(--gray-500);
  background-color: var(--white);
  border: 1px solid var(--gray-100);
}
.course-watch-section
  .accordions-items-seperate
  .accordion-item:not(:first-of-type) {
  margin-block-start: 1rem;
}
.course-watch-section .accordions-items-seperate .accordion-item {
  border-radius: 10px;
  overflow: hidden;
}
.course-watch-section .course-watch-content .nav-style-1 .nav-item {
  margin-inline-end: 0.5rem;
  flex-grow: inherit;
}
.course-watch-section .course-watch-content .nav-style-1 .nav-item:last-child {
  margin-inline-end: 0;
}
@media (max-width: 575.98px) {
  .course-watch-section .course-watch-content .nav-style-1 .nav-item {
    margin-right: 0;
  }
}
.course-watch-section .course-watch-content .nav-style-1 .nav-item .nav-link {
  background: var(--light);
  color: var(--gray-900);
  border-radius: 10px;
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .course-watch-section .course-watch-content .nav-style-1 .nav-item .nav-link {
    margin-bottom: 16px;
  }
}
.course-watch-section
  .course-watch-content
  .nav-style-1
  .nav-item
  .nav-link.active,
.course-watch-section
  .course-watch-content
  .nav-style-1
  .nav-item
  .nav-link:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}
.course-watch-section .course-watch-content .tab-pane p {
  line-height: 1.6;
}
.course-watch-section .course-watch-content .faq-accordion .accordion-button {
  background-color: var(--white);
  color: var(--gray-900);
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordion-button:not(.collapsed) {
  color: var(--gray-900);
  background-color: var(--white);
  box-shadow: none;
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordion-button:focus {
  border-color: rgba(var(--primary), 0.3);
  box-shadow: none;
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordion-button:after,
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordion-button:not(.collapsed)::after {
  background-image: none;
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordion-button:after {
  content: "+";
  font-family: "Fontawesome";
  font-size: 12px;
  line-height: 1;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--gray-900);
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}
.course-watch-section .course-watch-content .faq-accordion .accordion-body {
  font-size: 15px;
}
.course-watch-section .course-watch-content .faq-accordion .accordion-item {
  color: var(--gray-900);
  background-color: var(--white);
  border: 1px solid var(--gray-100);
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordions-items-seperate
  .accordion-item:not(:first-of-type) {
  margin-block-start: 1rem;
}
.course-watch-section
  .course-watch-content
  .faq-accordion
  .accordions-items-seperate
  .accordion-item {
  border-block-start: 1px solid var(--gray-100);
  border-radius: 10px;
  overflow: hidden;
}

/* /Course Watch*/

/****** Utils ******/

/****** Utils ******/
.checkout-content .nav-style-1 .nav-item {
  margin-inline-end: 1rem;
}
.checkout-content .nav-style-1 .nav-item:last-child {
  margin-inline-end: 0;
}
.checkout-content .nav-style-1 .nav-item .nav-link {
  color: var(--gray-900);
  border-radius: 10px;
  border: 1px solid var(--gray-100);
}
@media (max-width: 767.98px) {
  .checkout-content .nav-style-1 .nav-item .nav-link {
    margin-bottom: 16px;
  }
}
.checkout-content .nav-style-1 .nav-item .nav-link.active,
.checkout-content .nav-style-1 .nav-item .nav-link:hover {
  background: var(--light);
}

/****** Utils ******/
/*============================
  56.chat
============================*/
.header-navigation {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--light);
  margin-bottom: 20px;
}
.msg_card_body
  .media.received
  .media-body
  .msg-box
  .received-message
  .img-count
  .counts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.chat-page-body .sidebar-overlay.opened {
  display: none;
}

.chat-search {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  opacity: 0;
  visibility: hidden;
}
.chat-search input[type="text"] {
  padding: 8px 8px 8px 15px;
  width: 100%;
  min-height: 37px;
  border-radius: 5px;
  background-color: var(--white);
  color: var(--gray-900);
}

.chat-search .input-group {
  flex-wrap: nowrap;
}
.chat-search .input-group .form-control {
  border-right: none;
}
.chat-search .input-group .input-group-text {
  background-color: var(--white);
}
.chat-search.visible-chat {
  opacity: 1;
  visibility: visible;
  top: 100%;
  transition: ease all 0.5s;
  -webkit-transition: ease all 0.5s;
  -ms-transition: ease all 0.5s;
  z-index: 9;
  padding: 0 20px;
}

/****** Utils ******/
.about-section-two {
  padding: 80px 0;
}
@media (max-width: 991.98px) {
  .about-section-two {
    padding: 50px 0;
  }
}
.about-section-two .about-icon {
  width: 64px;
  height: 64px;
}
.about-section-two .about-us-banner {
  margin-bottom: 31px;
  align-items: start;
}
.about-section-two .about-us-banner:last-child {
  margin-bottom: 0;
}
.about-section-two .about-us-banner h6 {
  font-size: 18px;
}
.about-section-four .about-content-four {
  margin-left: 24px;
}
@media (max-width: 991.98px) {
  .about-section-four .about-content-four {
    margin-left: 0;
  }
}
.about-section-four .about-content-four .about-item-two {
  margin: 40px 0;
  border-left: 2px solid var(--primary);
}
@media (max-width: 767.98px) {
  .about-section-four .about-content-four .about-item-two {
    margin: 24px 0 40px;
  }
}
.about-section-four .view-more {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 575.98px) {
  .about-section-four .view-more {
    flex-direction: column;
  }
}
.about-section-four .view-more .btn {
  display: inline-flex;
  align-items: center;
}
.about-section-four .view-more .about-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.about-section-four .view-more .about-rating p {
  color: var(--gray-900);
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
}

.benefit-section {
  position: relative;
  padding: 40px 0 0;
}
@media (max-width: 991.98px) {
  .benefit-section {
    padding: 50px 0 30px;
  }
}

.counter-sec {
  position: relative;
  background-color: var(--primary);
  padding: 40px 0;
}
.counter-sec .about-us-count {
  border: 1px solid #e9ecef;
  box-shadow: 0px 4px 14px 0px rgba(231, 231, 231, 0.2509803922);
  background: var(--white);
  border-radius: 10px;
  padding: 20px;
  height: 112px;
}
@media (max-width: 1199.98px) {
  .counter-sec .about-us-count {
    margin-bottom: 24px;
  }
}

.exp-item {
  background: var(--primary);
  position: relative;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
  z-index: 1;
}
.exp-item .exp-bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.exp-item h2,
.exp-item p {
  color: #fff !important;
}
.exp-item .exp-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}
.exp-item .exp-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  background: var(--secondary);
}

.about-img-four .about-img img {
  border-radius: 10px;
  object-fit: cover;
  height: 100%;
}
/* Below md, .about-img-four's row.g-4 columns stack to full width, so the two
   photos (about-6.webp, feature.webp) no longer sit beside the exp-item card
   to inherit its height via flex-stretch — without a cap here they render at
   their tall native crop (about-6.webp is 598x1278) nearly full viewport height. */
@media (max-width: 767.98px) {
  .about-section-four .about-img-four .about-img img {
    width: 100%;
    height: 320px;
  }
}
@media (max-width: 575.98px) {
  .about-section-four .about-img-four .about-img img {
    height: 240px;
  }
}

.about-item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-100);
  padding: 10px;
  border-radius: 10px;
  z-index: 1;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  display: flex;
  align-items: center;
  gap: 16px;
}
.about-item .about-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.about-item-two {
  background: rgba(25, 97, 100, 0.0509803922);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 40px;
}
.about-item-two p {
  font-size: 18px;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .about-item-two p {
    font-size: 16px;
  }
}
.section-header-four .section-title {
  margin-bottom: 16px;
}
@media (max-width: 1199.98px) {
  .section-header-four .section-title {
    font-size: 36px;
  }
}
@media (max-width: 991.98px) {
  .section-header-four .section-title {
    font-size: 30px;
  }
}
@media (max-width: 767.98px) {
  .section-header-four .section-title {
    font-size: 24px;
  }
}
.section-header-four .section-title span {
  color: var(--primary);
}

.view-more {
  margin-top: 40px;
}
.view-more .btn {
  display: inline-flex;
  align-items: center;
}

.section {
  padding: 100px 0;
}
@media (max-width: 991.98px) {
  .section {
    padding: 50px 0;
  }
}

.theme-2 .btn {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 4px solid var(--primary-hover);
  transition: all 0.7s;
}
.theme-2 .btn:hover {
  border-bottom: 4px solid var(--primary);
}
.theme-2 .btn .icon {
  font-size: 24px;
  display: flex;
}
.theme-2 .btn-primary {
  color: #fff !important;
}
.theme-2 .btn-secondary {
  color: var(--gray-900);
  border-bottom: 4px solid #ff90a3;
}
.theme-2 .btn-secondary:hover {
  border-bottom: 4px solid var(--secondary);
  color: var(--gray-900);
}

/****** Utils ******/
.contact-sec {
  position: relative;
  padding: 60px 0;
  padding-top: 30px;
}
@media (max-width: 991.98px) {
  .contact-sec {
    padding: 50px 0;
  }
}
.contact-sec .contact-info {
  margin-bottom: 26px;
}
.contact-sec .contact-icon span {
  display: block;
  width: 60px;
  height: 60px;
  color: #aea9c9;
}

/****** Utils ******/
h2.main-title {
  font-size: 32px;
}
@media (max-width: 991.98px) {
  h2.main-title {
    font-size: 28px;
  }
}
@media (max-width: 767.98px) {
  h2.main-title {
    font-size: 26px;
  }
}

@-webkit-keyframes floating-y {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* Contact page "Our Locations" cards — every rule here is scoped to the
   .how-it-works-sec.contactus-box combination (as used in contact.html),
   never to either class alone, so it can't bleed into or be broken by
   an unrelated .how-it-works-sec or .share-knowledge-item-2 elsewhere. */
.how-it-works-sec.contactus-box {
  position: relative;
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(
    160deg,
    var(--light-900) 0%,
    var(--white) 60%,
    var(--primary-transparent) 100%
  );
}
@media (max-width: 991.98px) {
  .how-it-works-sec.contactus-box {
    padding: 50px 0 35px;
  }
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 4px solid var(--secondary);
  box-shadow: 0px 8px 24px 0px rgba(57, 44, 125, 0.08);
  padding: 2rem;
  border-radius: 16px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.how-it-works-sec.contactus-box .share-knowledge-item-2:hover {
  transform: translateY(-6px);
  box-shadow: 0px 20px 40px 0px rgba(57, 44, 125, 0.15);
  border-top-color: var(--primary);
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 .office-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  background: #eda2a214;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--secondary);
  flex-shrink: 0;
  margin-bottom: 16px;
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 h5 {
  margin-top: 0 !important;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.01em;
  text-align: center;
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 .address-office {
  margin-bottom: 0;  
  color: var(--gray-600);
  line-height: 1.75;
  text-align: center;
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 .address-office strong {
  color: var(--gray-900);
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 .address-office a {
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 500;
}
.how-it-works-sec.contactus-box .share-knowledge-item-2 .address-office a:hover {
  text-decoration: underline;
  color: var(--secondary);
}
.how-it-works-sec .text-truncate.line-clamb-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-clamp: 2;
}

.counter-sec .become-instructor-item-3 {
  padding: 20px;
  border-radius: 10px;
  background: var(--white);
  height: 113px;
}

.register-sec {
  position: relative;
  padding: 80px 0 60px;
}
@media (max-width: 991.98px) {
  .register-sec {
    padding: 50px 0;
  }
}
.register-sec .toggle-passwords {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 10px;
}

.become-an-instructor .instructor-bg-1 {
  right: 25%;
  top: 0;
  position: absolute;
  z-index: -1;
}
.become-an-instructor .instructor-bg-2 {
  left: 30%;
  bottom: 0;
  position: absolute;
  z-index: -1;
}

/****** Utils ******/
.add-course-item .accordion-button {
  background-color: var(--light);
  color: var(--gray-900);
  padding: 16px;
  font-size: 15px;
}
.add-course-item .accordion-button:not(.collapsed) {
  color: var(--gray-900);
  background-color: var(--light);
  box-shadow: none;
}
.add-course-item .accordion-button:focus {
  border-color: rgba(var(--primary), 0.3);
  box-shadow: none;
}
.add-course-item .accordion-button:after,
.add-course-item .accordion-button:not(.collapsed)::after {
  background-image: none;
}
.add-course-item .accordion-button:after {
  content: "\f13a";
  font-family: "Fontawesome";
  font-size: 14px;
  line-height: 1;
  color: var(--white);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3.125rem;
  color: #242b3a;
}
.add-course-item .accordion-body {
  padding: 1rem;
  font-size: 0.8125rem;
  color: #677788;
  background-color: var(--light);
}
.add-course-item .accordion-item {
  color: var(--gray-500);
  background-color: var(--white);
  border: 1px solid var(--light-900);
}
.add-course-item
  .accordions-items-seperate
  .accordion-item:not(:first-of-type) {
  margin-block-start: 1rem;
}
.add-course-item .accordions-items-seperate .accordion-item {
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  overflow: hidden;
}
.add-course-item .modal-content {
  position: relative;
  width: 80%;
  max-width: 720px;
  background: #000;
  padding: 0;
  border-radius: 8px;
}

.activities-item-six {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  border-bottom: 1px solid var(--info-950);
  transition: all 0.4s;
  position: relative;
}
@media (max-width: 767.98px) {
  .activities-item-six {
    align-items: start;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px;
  }
}
.activities-item-six:hover {
  background: var(--info-950);
  border-radius: 10px;
}
.activities-item-six.active {
  background: var(--info-950);
  border-radius: 10px;
}
.activities-item-six:last-child {
  border-bottom: none;
}

/****** Utils ******/

/****** Utils ******/
.faq-sec .accordion-item {
  margin-top: 16px;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2);
}
.faq-sec .accordion-button {
  font-size: 18px;
  font-weight: 600;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  color: var(--gray-900);
  background-color: transparent;
}
@media (max-width: 575.98px) {
  .faq-sec .accordion-button {
    font-size: 16px;
  }
}
.faq-sec .accordion-button::after {
  display: none;
}
.faq-sec .accordion-button i {
  transform: rotate(45deg);
  transition: 0.2s;
}
.faq-sec .accordion-button.accordion-button.collapsed i {
  transform: rotate(90deg);
}

@media (max-width: 991.98px) {
  .faq-banner-bg::before {
    background-color: transparent;
  }
}
@media (max-width: 767.98px) {
  .faq-section h2 {
    font-size: 24px;
    line-height: 30px;
  }
}
@media (max-width: 575.98px) {
  .faq-section h2 {
    font-size: 20px;
    line-height: 26px;
  }
}

.faq-content .accordion {
  position: relative;
  z-index: 1;
}
.faq-content .accordion .accordion-item {
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  overflow: hidden;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2);
}
.faq-content .accordion .accordion-item:last-child {
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .faq-content .accordion .accordion-item {
    padding: 16px;
  }
}
.faq-content .accordion .accordion-item .accordion-body::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: right top;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.faq-content .accordion-button {
  background-color: var(--white);
  color: var(--gray-900);
  padding: 0;
  font-size: 18px;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .faq-content .accordion-button {
    font-size: 16px;
  }
}
.faq-content .accordion-button:not(.collapsed) {
  color: var(--gray-900);
  background: transparent;
  font-size: 18px;
  box-shadow: none;
  position: relative;
  padding-bottom: 16px;
}
.faq-content .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}
.faq-content .accordion-button:after {
  content: "+";
  font-family: "Fontawesome";
  background-color: transparent;
  background-image: none;
}
.faq-content .accordion-body {
  padding: 0;
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .faq-content .accordion-body {
    font-size: 14px;
  }
}
.faq-section-eight .count {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  background-color: var(--primary-hover);
  color: var(--white);
  margin-right: 12px;
  transition: all 0.7s;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .faq-section-eight .count {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}
.faq-section-eight .faq-content .accordion-item {
  border-radius: 10px;
  padding: 0;
  margin-bottom: 24px;
  position: relative;
  border: 2px solid transparent;
}
.faq-section-eight .faq-content .accordion-item:last-child {
  margin-bottom: 0;
}
.faq-section-eight .faq-content .accordion-item .accordion-button {
  font-size: 20px;
  padding: 24px;
  box-shadow: unset;
  position: unset;
}
@media (max-width: 575.98px) {
  .faq-section-eight .faq-content .accordion-item .accordion-button {
    font-size: 16px;
    padding: 16px;
  }
}
.faq-section-eight .faq-content .accordion-item .accordion-button::after {
  content: "\f078";
  font-family: "Fontawesome";
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  background-color: var(--primary-hover);
  color: var(--white);
}
@media (max-width: 575.98px) {
  .faq-section-eight .faq-content .accordion-item .accordion-button::after {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}
.faq-section-eight
  .faq-content
  .accordion-item
  .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  background-color: var(--primary);
}
.faq-section-eight
  .faq-content
  .accordion-item
  .accordion-button:not(.collapsed)
  .count {
  background-color: var(--primary);
}
.faq-section-eight
  .faq-content
  .accordion-item
  .accordion-button:not(.collapsed)::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--primary);
  border-radius: 10px;
}
.faq-section-eight .faq-content .accordion-item .accordion-body {
  margin-top: 20px;
  background: var(--light);
  border-radius: 10px;
  padding: 20px !important;
  margin: 0px 24px 24px 24px;
}
@media (max-width: 575.98px) {
  .faq-section-eight .faq-content .accordion-item .accordion-body {
    padding: 16px !important;
    margin: 0px 16px 16px 16px;
  }
}

/****** Utils ******/
.blog-sec .slick-dots {
  bottom: -65px;
}
@media (max-width: 1399.98px) {
  .blog-sec .slick-dots {
    bottom: -35px;
  }
}
.blog-sec .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--gray-100);
  transition: all 0.3s ease;
}
.blog-sec .slick-dots li.slick-active {
  width: 50px;
  border-radius: 5px;
  background-color: var(--secondary);
}
.blog-sec .blog-slider .slick-list {
  margin: 0 -12px;
}
.blog-sec .blog-slider .slick-slide {
  margin: 0 12px;
}

.blog {
  border: 1px solid var(--gray-100);
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border-radius: 18px;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.blog:hover {
  color: inherit;
  transform: translateY(-6px);
  box-shadow: 0 1.5rem 3rem rgba(17, 17, 17, 0.12);
  border-color: transparent;
}
.blog .blog-image {
  position: relative;
  overflow: hidden;
  padding: 8px;
}
.blog .blog-image img {
  border-radius: 12px;
  width: 100%;
  height: 200px;
  object-fit: scale-down;
  background-color: #e6efff;
  padding: 8px;
  transition: transform 0.4s ease;
}
.blog:hover .blog-image img {
  transform: scale(1.04);
}
.blog-cat-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #111 0%, var(--secondary) 130%);
  padding: 5px 13px;
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(17, 17, 17, 0.18);
}
.blog .blog-item {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog .blog-item h5 {
  color: #111;
  transition: color 0.2s ease;
}
.blog:hover .blog-item h5 {
  color: var(--secondary);
}
.blog .blog-item p {
  font-size: 14px;
}
.blog-cta {
  margin-top: auto;
}
.blog-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  font-size: 12px;
  background-color: var(--secondary) !important;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.blog:hover .blog-arrow {
  transform: rotate(-45deg);
}

.blog-slider .slick-list {
  margin: 0 -12px;
}
.blog-slider .slick-slide {
  margin: 0 12px;
}
.blog-slider .slick-dots li {
  width: 10px;
  height: 10px;
  border-radius: 40px;
  background: var(--gray-100);
  transition: all 0.3s ease;
}
.blog-slider .slick-dots li.slick-active {
  width: 50px;
  background: var(--secondary);
}

/****** Utils ******/

.form-switch-end .form-check-input {
  float: unset;
  margin-left: 8px;
}

.delete-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.delete-item:hover {
  background: var(--secondary);
  color: var(--white);
}

.certificate {
  border: none;
}

.modal-content .modal-header .custom-btn-close {
  border: none;
  color: var(--gray-300);
}
.modal-content .modal-header .custom-btn-close:hover {
  background-color: transparent;
}

.yearpicker {
  padding: 4px 8px 4px 30px;
}

.alert {
  padding: 0.625rem 0.85rem;
  border-radius: 4px;
  font-size: 0.8125rem;
}
.alert i {
  font-size: 20px;
}
.alert:last-child {
  margin-bottom: 0;
}
.payouts .dropdown .dropdown-toggle:after {
  font-size: 8px;
}
.payouts .dropdown .dropdown-toggle {
  border-radius: 5px;
  border: 1px solid var(--gray-100);
  height: 38px;
}
.payouts .dropdown-menu {
  padding: 10px;
}

.statements .dropdown .dropdown-toggle:after {
  font-size: 8px;
}
.statements .dropdown .dropdown-toggle {
  border-radius: 5px;
  border: 1px solid var(--gray-100);
  height: 38px;
}
.statements .dropdown-menu {
  padding: 10px;
}

.course-tab .nav li a {
  border-radius: 50px;
  background-color: var(--light-900);
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
}

.modal .btn.bg-gray-100 {
  color: var(--gray-900);
  border: none;
}
.modal .btn.bg-gray-100:hover {
  background-color: var(--light) !important;
}

.section-header .sub-title {
  display: inline-block;
  border-radius: 30px;
  font-weight: 500;
  padding: 4px 15px;
  background: rgb(255, 237, 240);
  color: rgb(255, 70, 103);
  margin-bottom: 15px;
}
.section-header .title {
  font-size: 36px;
  line-height: 1.33;
  margin: 0 0;
  letter-spacing: -0.75px;
  text-transform: capitalize;
}
.section-header .title span:not(.svg-icon) {
  color: var(--tg-theme-primary);
  position: relative;
  color: var(--tg-common-color-white);
  padding: 0 13px 0 20px;
  font-weight: var(--tg-fw-bold);
  display: inline-block;
  z-index: 1;
}
.section-header .title span:not(.svg-icon) > svg {
  position: absolute;
  left: 0;
  top: -5px;
  width: 100%;
  height: 59px;
  z-index: -1;
  color: var(--tg-theme-secondary);
}
.section-header p {
  margin-bottom: 0;
}
.section-header .desc {
  margin: 10px 0 0;
}

.instructor-item {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 24px;
  flex-direction: column;
  text-align: center;
  border: 1px solid var(--gray-100);
  padding: 8px;
  border-radius: 10px;
  position: relative;
  background: var(--white);
}
.instructor-item.instructor-item-two {
  display: block;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--gray-100);
  box-shadow: none;
  border-radius: 10px;
  padding: 0;
  z-index: 3;
  overflow: hidden;
  margin-bottom: 30px;
}

@media (max-width: 991.98px) {
  .instructor-item.instructor-item-two .instructor-content .title {
    font-size: 18px;
  }
}
@media (max-width: 767.98px) {
  .instructor-item.instructor-item-two .instructor-content .title {
    font-size: 16px;
  }
}
.instructor-item.instructor-item-two .instructor-content .designation {
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .instructor-item.instructor-item-two .instructor-content .designation {
    font-size: 14px;
  }
}
.instructor-item.instructor-item-two .course-count {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
  color: var(--gray-900);
  border-radius: 20px;
  border: 1px solid var(--gray-900);
  background: var(--white);
}
.instructor-item.instructor-item-two .course-count:hover {
  background: var(--gray-900);
  color: var(--white);
}
.instructor-item.instructor-item-two .instructor-content {
  padding: 20px;
}
.instructor-item.instructor-item-two .instructor-content .designation {
  font-weight: 500;
  margin-bottom: 16px;
}
.instructor-item .instructors-img {
  position: relative;
}
.instructor-content .title {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .instructor-content .title {
    font-size: 18px;
  }
}
.instructor-content .designation {
  display: block;
  font-size: 14px;
  margin-bottom: 16px;
}
.instructor-content .rating {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  gap: 5px;
  margin-bottom: 16px;
  line-height: 1.2;
}
.instructor-content .rating i {
  color: #ffc107;
}

.add-choice {
  font-size: 14px;
}

.modal p,
.modal span {
  font-size: 14px;
}
.withdraw-method .nav-pills {
  flex-direction: column;
}
.withdraw-method .nav-pills .nav-link {
  width: 100%;
  border: 1px solid var(--gray-100);
  padding: 20px 20px 20px 46px;
  border-radius: 10px;
  text-align: left;
  color: var(--gray-900);
  font-weight: 500;
  background-color: transparent;
  position: relative;
}
.withdraw-method .nav-pills .nav-link::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50px;
  border: 1px solid var(--gray-100);
  left: 20px;
  top: 23px;
  font-size: 8px;
  font-weight: 900;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
}
.withdraw-method .nav-pills .nav-link.active::before {
  border-color: var(--secondary);
  background-color: var(--secondary);
  content: "\f111";
  font-family: "Font Awesome 5 Free";
}
.withdraw-method .nav-pills .nav-link span {
  color: var(--gray-500);
  font-weight: 400;
  display: block;
}

@media (max-width: 575.98px) {
  .successful-modal .modal-body {
    padding: 30px;
  }
}

.add-education-data .delete-item,
.add-exp-data .delete-item {
  width: 35px;
  height: 35px;
  font-size: 14px;
  margin-top: 12px;
}
.pay-meth .nav-pills {
  gap: 0 16px;
}
.pay-meth .nav-pills .nav-link {
  color: var(--gray-500);
  padding: 0;
  background-color: transparent;
  padding-left: 23px;
  position: relative;
}
.pay-meth .nav-pills .nav-link::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50px;
  border: 1px solid var(--gray-100);
  left: 0;
  top: 3px;
  font-size: 8px;
  font-weight: 900;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pay-meth .nav-pills .nav-link.active {
  color: var(--gray-900);
}
.pay-meth .nav-pills .nav-link.active::before {
  border-color: var(--secondary);
  background-color: var(--secondary);
  content: "\f111";
  font-family: "Font Awesome 5 Free";
}
.instructor-list .select2-container {
  min-width: unset !important;
}
.instructor-list .show-filter .select2-selection__rendered {
  height: 40px;
}
.instructor-list .filter-clear .accordion-item {
  border-radius: 10px;
  border: 1px solid var(--gray-100);
  margin-bottom: 20px;
}
@media (max-width: 1399.98px) {
  .instructor-list .filter-clear .accordion-item {
    margin-bottom: 15px;
  }
}
.instructor-list .filter-clear .accordion-item .see-more-btn {
  margin: 10px 0 0;
  color: var(--secondary);
  text-decoration: underline;
  display: inline-block;
  font-size: 14px;
}
.instructor-list .filter-clear .accordion-item .accordion-button {
  border: none;
  background-color: transparent;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  box-shadow: none;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1399.98px) {
  .instructor-list .filter-clear .accordion-item .accordion-button {
    padding: 15px;
    font-size: 16px;
  }
}
.instructor-list .filter-clear .accordion-item .accordion-button::after {
  font-size: 13px;
  font-weight: 500;
  display: none;
}
.instructor-list .filter-clear .accordion-item .accordion-button.collapsed i {
  transform: rotate(-180deg);
}
.instructor-list .filter-clear .accordion-item .accordion-button i {
  font-size: 12px;
}
.instructor-list .filter-clear .accordion-item .accordion-body {
  border: none;
  padding: 0 20px 20px;
}
@media (max-width: 767.98px) {
  .instructor-list .instructor-details .counts-details {
    margin-bottom: 16px;
  }
}

.instructor-detail-content {
     padding: 30px 0 0;
}
@media (max-width: 767.98px) {
  .instructor-detail-content .instructor-details .counts-details {
    margin-bottom: 24px;
  }
}
.instructor-detail-content .course-carousal {
  position: relative;
}
.instructor-detail-content .course-carousal .slick-prev.slick-arrow,
.instructor-detail-content .course-carousal .slick-next.slick-arrow {
  width: 34px;
  height: 34px;
  background: var(--light);
  border-radius: 30px;
  color: #242b3a;
  position: absolute;
}

.instructor-detail-content .course-carousal .slick-prev.slick-arrow::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f053";
  color: #08131e;
  font-size: 14px;
  font-weight: 900;
  top: 10px;
  left: 12px;
}

.instructor-detail-content .course-carousal .slick-next.slick-arrow::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  color: #08131e;
  font-size: 14px;
  font-weight: 900;
  top: 10px;
  left: 12px;
}
.instructor-detail-content .course-carousal h5 {
  font-size: 18px;
}
.instructor-detail-content .btn.view-course-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 50px;
  background: var(--dark);
  color: var(--white);
}
.instructor-detail-content .btn.view-course-btn:hover {
  background: var(--secondary);
}
.instructor-detail-content .contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  padding: 10px;
  background: var(--primary);
  color: var(--white);
}

.text-truncate.line-clamb-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.student-details-carousal .slick-prev.slick-arrow {
  top: -49px !important;
}
.student-details-carousal .slick-next.slick-arrow {
  top: -49px !important;
}

/****** Utils ******/
.login-content .slick-dots li {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: var(--gray-100);
  transition: all 0.3s ease;
}
.login-content .slick-dots li.slick-active {
  width: 50px;
  height: 10px;
  background: var(--secondary);
}

/****** Utils ******/

.countdown-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 15px;
}

.countdown-el {
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  min-width: 140px;
  padding: 38px 20px;
  border-radius: 10px;
  color: #fff;
}
.countdown-el:not(:last-child) {
  margin-right: 15px;
}
.countdown-el span {
  font-size: 26px;
}

/****** Utils ******/

.circle-progress {
  width: 38px;
  height: 38px !important;
  float: left;
  line-height: 38px;
  background: none;
  box-shadow: none;
  position: relative;
}
.circle-progress::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--light-900);
  position: absolute;
  top: 0;
  left: 0;
}
.circle-progress .progress-left {
  left: 0;
}
.circle-progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.circle-progress .progress-right {
  right: 0;
}
.circle-progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}
.circle-progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 4px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.circle-progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
.tab-list .nav {
  margin-bottom: 24px;
}
.tab-list .nav li {
  margin-bottom: 16px;
  margin-right: 15px;
}
.tab-list .nav li:last-child {
  margin-right: 0;
}
.tab-list .nav li a {
  color: var(--gray-900);
  border-radius: 100px;
  background: var(--light);
  padding: 12px 15px;
  font-size: 14px;
  display: inline-flex;
}
.tab-list .nav li a.active,
.tab-list .nav li a:hover {
  background: var(--secondary);
  color: var(--white);
}
.fav-icon.selected {
  color: var(--secondary);
}

.rating i {
  color: var(--gray-100);
}
.rating i.filled {
  color: #ffc107;
}

fieldset {
  display: none;
}

.poor-active span.active#poor,
.poor-active span.active#poors {
  background: #e70d0d;
}

.avg-active span.active#poor,
.avg-active span.active#weak,
.avg-active span.active#poors,
.avg-active span.active#weaks {
  background: #ffc107;
}

.strong-active span.active#poor,
.strong-active span.active#weak,
.strong-active span.active#strong,
.strong-active span.active#poors,
.strong-active span.active#weaks,
.strong-active span.active#strongs {
  background: #5625e8;
}

.heavy-active span.active#poor,
.heavy-active span.active#weak,
.heavy-active span.active#strong,
.heavy-active span.active#heavy,
.heavy-active span.active#poors,
.heavy-active span.active#weaks,
.heavy-active span.active#strongs,
.heavy-active span.active#heavys {
  background: #03c95a;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px); /* Start slightly above */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* End at its original position */
  }
}

.page-title .tab-list .nav li {
  margin: 0;
}
.page-title .tab-list .nav li a {
  background: var(--light-900);
  padding: 8px 16px;
}
.page-title .tab-list .nav li a:hover,
.page-title .tab-list .nav li a.active {
  background-color: var(--secondary);
}

.quiz-ans-card.fixed .logo-dark.header-logo,
.chat-card.fixed .logo-dark.header-logo,
.chat-two-card.fixed .logo-dark.header-logo,
.quiz-attempt-card.fixed .logo-dark.header-logo,
.header-two.fixed .logo-dark.header-logo {
  display: none;
}
.quiz-ans-card.fixed .logo-white.header-logo,
.chat-card.fixed .logo-white.header-logo,
.chat-two-card.fixed .logo-white.header-logo,
.quiz-attempt-card.fixed .logo-white.header-logo,
.header-two.fixed .logo-white.header-logo {
  display: block;
}

.progress {
  background: var(--light-700);
}

/****** Utils ******/

.client-section {
  padding-bottom: 80px;
}
@media (max-width: 991.98px) {
  .client-section {
    padding-bottom: 50px;
  }
}
.client-section h6 {
  margin-bottom: 20px;
}

.top-courses-slider .slick-slide > div {
  margin: 0 12px;
}

.top-courses-sec {
  position: relative;
  padding: 40px 0 80px;
  text-align: center;
  background-color: var(--light-300);
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .top-courses-sec {
    padding: 50px 0;
  }
}
/* Top Courses slider — cover-image cards. Scoped to .top-courses-slider so
   the icon-based .categories-item-three cards used elsewhere (e.g.
   career.html) are not affected by this. */
.top-courses-slider .categories-item-cover {
  height: auto;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 12px 20px;
}
.top-courses-slider .categories-item-cover .categories-item-cover-img {
  width: auto;
  max-width: 100%;
  height: 190px;
  object-fit: contain;
  margin-bottom: 14px;
      filter: drop-shadow(0 0 10px rgba(70, 130, 255, 0.3));
}
.top-courses-slider .categories-item-cover .title {
  margin-top: auto;
}
.top-courses-slider .categories-item-cover:hover .categories-item-cover-img {
  animation: verticalRotate 0.5s linear 1;
}
.top-courses-slider .categories-item-cover .course-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #000, #33190f);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: normal;
  box-shadow: 0 3px 8px rgba(51, 25, 15, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.top-courses-slider .categories-item-cover .course-pill-badge:hover,
.top-courses-slider .categories-item-cover .course-pill-badge:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(51, 25, 15, 0.45);
}
.top-courses-sec .top-courses-bg {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
}
.top-courses-sec .top-courses-slider {
  margin-bottom: 40px;
}
.top-courses-sec .slick-prev {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  left: -12px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .top-courses-sec .slick-prev {
    width: 35px;
    height: 35px;
    left: -7px;
  }
}
.top-courses-sec .slick-prev::before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}
.top-courses-sec .slick-next {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  right: -12px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .top-courses-sec .slick-next {
    width: 35px;
    height: 35px;
    right: -7px;
  }
}
.top-courses-sec .slick-next::before {
  font-family: "Font Awesome 5 Free";
  content: "\f053";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}

.trust-sec {
  position: relative;
  margin-top: 0;
  background-color: var(--light-300);
  padding-bottom: 80px;
}
.trust-sec .video-showcase {
  margin: 0 100px;
  margin-bottom: -104px;
  z-index: 1;
  position: relative;
  border-radius: 10px;
}
@media (max-width: 767.98px) {
  .trust-sec .video-showcase {
    margin: 0 20px;
    margin-bottom: -70px;
  }
}
.trust-sec .trust-content {
  padding: 145px 100px 70px;
  position: relative;
  z-index: 0;
  background: #000;
  border-radius: 10px;
}
@media (max-width: 991.98px) {
  .trust-sec .trust-content {
    padding: 125px 100px 40px;
  }
}
@media (max-width: 767.98px) {
  .trust-sec .trust-content {
    padding: 105px 20px 20px;
  }
}
@media (max-width: 575.98px) {
  .trust-sec .trust-content {
    padding-top: 95px;
  }
}
.trust-sec .trust-content h4 {
  color: var(--white);
  line-height: 40px;
}
@media (max-width: 767.98px) {
  .trust-sec .trust-content h4 {
    line-height: 32px;
  }
}
.trust-sec .user-goal {
  border-radius: 10px;
}
.trust-sec .user-goal .avatar.avatar-lg {
  width: 45px;
  height: 45px;
  margin-right: 5px;
}

.featured-courses-section {
  padding: 80px 0;
}
@media (max-width: 991.98px) {
  .featured-courses-section {
    padding: 50px 0;
  }
}
.featured-courses-section .feature-course-slider-2 {
  margin-bottom: 44px;
}
.featured-courses-section .slick-prev {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  left: -22px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .featured-courses-section .slick-prev {
    width: 35px;
    height: 35px;
    left: -7px;
  }
}
.featured-courses-section .slick-prev::before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}
.featured-courses-section .slick-next {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  right: -22px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .featured-courses-section .slick-next {
    width: 35px;
    height: 35px;
    right: -7px;
  }
}
.featured-courses-section .slick-next::before {
  font-family: "Font Awesome 5 Free";
  content: "\f053";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}

.banner-image .course-item {
  background: var(--white);
}
.banner-image .course-item .course-img {
  margin-bottom: 12px;
}
.banner-image .course-item .course-img img {
  transform: scale(1);
}

.banner-image .swiper-slider-banner {
  padding-bottom: 38px;
}
/* At >=1200px the hero column is only ~276px wide: 9 dots (24px tap targets)
   plus both arrows don't fit on one row, so the arrows sit on their own row
   above the dots and no tap targets overlap. */
@media (min-width: 1200px) {
  .banner-image .swiper-slider-banner {
    padding-bottom: 66px;
  }
  .banner-image .swiper-slider-banner .swiper-button-prev,
  .banner-image .swiper-slider-banner .swiper-button-next {
    bottom: 32px !important;
  }
}
.banner-image .swiper-slider-banner .swiper-pagination {
  bottom: 2px;
  line-height: 0;
  pointer-events: none;
}
/* 24x24 tap target (WCAG 2.5.8); the visible 8px dot is drawn by ::before */
.banner-image .swiper-slider-banner .swiper-pagination-bullet {
  position: relative;
  width: 17px;
  height: 17px;
  margin: 0 !important;
  opacity: 1;
  background: transparent;
  pointer-events: auto;
}
.banner-image .swiper-slider-banner .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  opacity: 0.55;
}
.banner-image .swiper-slider-banner .swiper-pagination-bullet-active::before {
  opacity: 1;
  background: #ffc226;
}
.banner-image .swiper-slider-banner .swiper-button-prev,
.banner-image .swiper-slider-banner .swiper-button-next {
  top: auto;
  bottom: 0;
  z-index: 20;
  width: 28px;
  height: 28px;
  margin-top: 0;
  pointer-events: auto;
  cursor: pointer;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}
.banner-image .swiper-slider-banner .swiper-button-prev {
  left: 8px;
}
.banner-image .swiper-slider-banner .swiper-button-next {
  right: 8px;
}
.banner-image .swiper-slider-banner .swiper-button-prev::after,
.banner-image .swiper-slider-banner .swiper-button-next::after {
  font-size: 12px;
  font-weight: 700;
}

.community-to-learn {
  padding: 80px 0;
  background: var(--light-900);
}
@media (max-width: 991.98px) {
  .community-to-learn {
    padding: 50px 0;
  }
}
.community-to-learn .section-header {
  margin-bottom: 32px;
}
.community-to-learn .community-item {
  margin-bottom: 31px;
}
.community-to-learn .community-item:last-child {
  margin-bottom: 0;
}
.community-to-learn .community-item h5,
.community-to-learn .community-item .custom-subtitle {
  font-size: 18px;
}
.community-to-learn .community-item .community-icon-1 {
  padding: 20px;
  border-radius: 50px;
  background: var(--primary-transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}
.community-to-learn .community-item .community-icon-1 i {
  font-size: 24px;
  color: #392c7d;
}
.community-to-learn .community-item .community-icon-2 {
  padding: 20px;
  border-radius: 50px;
  background: #ffedf0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}
.community-to-learn .community-item .community-icon-2 i {
  font-size: 24px;
  color: var(--secondary);
}
.community-to-learn .community-item .community-icon-3 {
  padding: 20px;
  border-radius: 50px;
  background: #e9fafe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}
.community-to-learn .community-item .community-icon-3 i {
  font-size: 24px;
  color: #0dcaf0;
}
.community-to-learn .community-img {
  position: relative;
  padding: 0 0 30px 20px;
}
.community-to-learn .community-img .community-img-01 {
  position: absolute;
  bottom: 0;
  left: 50px;
}
.community-to-learn .community-img .community-img-02 {
  position: absolute;
  top: 45px;
  right: 75px;
}
.community-to-learn .community-img .community-img-03 {
  position: relative;
  left: 0;
  top: 0;
  border-radius: 30px;
  max-width: 73%;
}
.community-to-learn .community-img .community-img-04 {
  position: absolute;
  bottom: 0;
  right: 36px;
  border-radius: 30px;
  max-width: 266px;
}
.community-to-learn .community-img .community-img-05 {
  position: absolute;
  top: 100px;
  right: 60px;
}
.community-to-learn .community-img .community-count {
  display: inline-flex;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border: 1px solid var(--light-900);
  border-radius: 20px 20px 0px 20px;
  background: var(--white);
  position: absolute;
  right: 0;
  top: 85px;
  z-index: 1;
  min-width: 240px;
}
@media (max-width: 1199.98px) {
  .community-to-learn .community-img .community-count {
    top: 30px;
  }
}
.community-to-learn .community-img .community-count .enrolled-list {
  padding: 15px;
  border: 1px solid var(--light);
  border-radius: 15px 15px 0px 15px;
  width: 100%;
  text-align: center;
}
.community-to-learn .community-img .community-count .enrolled-list p {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 500;
}
.cliets-section-one .slick-dots {
  display: none;
}

@keyframes verticalRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.how-it-works-sec-two {
  position: relative;
  padding: 80px 0;
}
@media (max-width: 991.98px) {
  .how-it-works-sec-two {
    padding: 50px 0;
  }
}
.how-it-works-sec-two .works-items {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.how-it-works-sec-two .works-items .count {
  font-size: 30px;
  color: var(--primary);
  font-weight: 700;
  margin-right: 36px;
}
@media (max-width: 575.98px) {
  .how-it-works-sec-two .works-items .count {
    margin-right: 20px;
    font-size: 36px;
  }
}
.how-it-works-sec-two .works-items h5 {
  font-size: 18px;
}
.how-it-works-sec-two .works-items p {
  font-size: 14px;
}

.featured-instructor-slider .slick-slide > div {
  margin: 0 12px;
}
.featured-instructor-sec .slick-prev {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  left: -12px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .featured-instructor-sec .slick-prev {
    width: 35px;
    height: 35px;
    left: -7px;
  }
}
.featured-instructor-sec .slick-prev::before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}
.featured-instructor-sec .slick-prev:hover {
  background: var(--secondary);
  color: var(--white);
}
.featured-instructor-sec .slick-prev:hover::before {
  color: var(--white);
}
.featured-instructor-sec .slick-next {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  right: -12px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .featured-instructor-sec .slick-next {
    width: 35px;
    height: 35px;
    right: -7px;
  }
}
.featured-instructor-sec .slick-next::before {
  font-family: "Font Awesome 5 Free";
  content: "\f053";
  font-size: 16px;
  font-weight: 900;
  color: var(--dark);
}
.featured-instructor-sec .slick-next:hover {
  background: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}
.featured-instructor-sec .slick-next:hover::before {
  color: var(--white);
}

.faq-section {
  position: relative;
  padding: 80px 0;
}

@media (max-width: 991.98px) {
  .faq-section {
    padding: 50px 0;
  }
}

@media (max-width: 1199.98px) {
  .faq-section h2 {
    font-size: 30px;
  }
}
@media (max-width: 1199.98px) {
  .faq-section h2 {
    font-size: 26px;
  }
}
.faq-section .faq-img {
  position: relative;
  margin-right: 40px;
}
@media (max-width: 1399.98px) {
  .faq-section .faq-img {
    margin-right: 20px;
  }
}
@media (max-width: 1199.98px) {
  .faq-section .faq-img {
    margin-right: 0;
  }
}
@media (max-width: 991.98px) {
  .faq-section .faq-img {
    display: none;
  }
}
.faq-section .faq-img span {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 30px;
  background-color: #ffcd36;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: var(--gray-900);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.faq-section .faq-img span i {
  animation: verticalRotate 5s linear infinite;
}
.faq-section .accordion-button {
  font-size: 18px;
  font-weight: 700;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  color: var(--gray-900);
  background-color: transparent;
}
@media (max-width: 575.98px) {
  .faq-section .accordion-button {
    font-size: 16px;
  }
}
.faq-section .accordion-button::after {
  display: none;
}
.faq-section .accordion-button i {
  transform: rotate(45deg);
  transition: 0.2s;
}
.faq-section .accordion-button.accordion-button.collapsed i {
  transform: rotate(90deg);
}

.feature-course-slider-2 .slick-list {
  margin: 0 -12px;
}
.feature-course-slider-2 .slick-slide {
  margin: 0 12px;
}
.feature-course-slider-2 .slick-track {
  display: flex;
  align-items: stretch;
}
.feature-course-slider-2 .slick-slide {
  height: auto;
}
.feature-course-slider-2 .slick-slide > div {
  height: 100%;
}
.feature-course-slider-2 .slick-slide > div > div {
  height: 100%;
}
.feature-course-slider-2 .course-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.feature-course-slider-2 .course-item:hover {
  box-shadow: 0px 16px 32px 0px rgba(20, 20, 20, 0.12);
}
.feature-course-slider-2 .course-item .course-img {
  overflow: hidden;
  border-radius: 10px;
}
.feature-course-slider-2 .course-item .course-img img {
  transition: transform 0.5s ease;
}
.feature-course-slider-2 .course-item:hover .course-img img {
  transform: scale(1.02);
}
.feature-course-slider-2 .view-syllabus i {
  transition: transform 0.3s ease;
}
.feature-course-slider-2 .view-syllabus:hover i {
  transform: translate(3px, -3px);
}
.feature-course-slider-2 .online-offline-btn-box {
  margin-top: auto;
}
.feature-course-slider-2 .online-offline-btn-box .btn {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.feature-course-slider-2 .online-offline-btn-box .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 10px 18px 0px rgba(231, 13, 13, 0.28);
}
.feature-course-slider-2 .slick-dots {
  position: static;
  margin-top: 28px;
}
.feature-course-slider-2 .slick-dots li {
 width: 10px;
    height: 10px;
    margin: 0 6px;
  border-radius: 10px;
  background: var(--gray-100);
  transition: all 0.3s ease;
}
.feature-course-slider-2 .slick-dots li.slick-active {
  width: 24px;
  background: var(--secondary);
}

/****** Utils ******/
.section-header {
  margin-bottom: 40px;
}
.section-header h2 {
  margin-bottom: 10px;
}
.favorite-course .owl-carousel .owl-nav.disabled {
  display: none;
}
.favorite-course .owl-carousel .owl-dots.disabled {
  display: flex;
  justify-content: center;
}
.favorite-course .owl-carousel .owl-dots.disabled .owl-dot {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background: var(--light);
  margin-right: 4px;
}
.favorite-course .owl-carousel .owl-dots.disabled .owl-dot.active {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background: var(--secondary);
}

.benefits-section {
  background: url("../img/bg/benefit-bg.webp") var(--dark);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 60px 0;
}
@media (max-width: 767.98px) {
  .benefits-section {
    padding: 40px 0;
  }
}
.benefits-section .section-header {
  margin-bottom: 60px;
}
@media (max-width: 991.98px) {
  .benefits-section .section-header {
    margin-bottom: 40px;
  }
}

.benefits-item {
  text-align: center;
  padding: 0 20px;
}
.benefits-item .benefits-img {
  width: 90px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  color: var(--white);
  border-radius: 80px;
  margin-bottom: 16px;
}
.benefits-item .benefits-img img {
  width: 43px;
}
.benefits-item .title {
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--white);
}
@media (max-width: 767.98px) {
  .benefits-item .title {
    font-size: 18px;
  }
}
.benefits-item:hover .benefits-img {
  background: var(--secondary);
  animation: verticalRotate 0.5s linear 1;
}
.feature-section .nav-tabs {
  max-width: 700px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 40px !important;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  background: transparent;
  position: relative;
  z-index: 1;
}
.feature-section .nav-tabs .nav-item {
  width: fit-content;
}
.feature-section .nav-tabs .nav-item a {
  padding: 0 0 10px 0;
  width: fit-content;
  display: inline-flex;
  justify-content: center;
  font-weight: 500;
  color: var(--gray-900);
  border-width: 0 0 1px;
}
@media (max-width: 767.98px) {
  .feature-section .nav-tabs .nav-item a {
    width: 150px;
    margin-bottom: 10px;
  }
}
@media (max-width: 575.98px) {
  .feature-section .nav-tabs .nav-item a {
    width: 120px;
    margin-bottom: 10px;
  }
}
.feature-section .nav-tabs .nav-item a.active,
.feature-section .nav-tabs .nav-item a:hover {
  border-radius: 0;
  padding-bottom: 10px;
  color: var(--secondary) !important;
}
.feature-section .nav-tabs .nav-item a.active {
  border-width: 0 0 2px;
  border-bottom-color: var(--secondary) !important;
  background: transparent;
}
.feature-section .owl-carousel .owl-nav.disabled {
  display: none;
}
.feature-section .owl-carousel .owl-dots.disabled {
  display: flex;
  justify-content: center;
}
.feature-section .owl-carousel .owl-dots.disabled .owl-dot {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background: var(--light);
  margin-right: 4px;
}
.feature-section .owl-carousel .owl-dots.disabled .owl-dot.active {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background: var(--secondary);
}

.nav-bottom .owl-dots {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.nav-bottom .owl-dots .owl-dot span {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background: #d6d4e4;
  margin: 0 2px;
}
.nav-bottom .owl-dots .owl-dot.active span {
  width: 15px;
  height: 7px;
  border-radius: 10px;
  background: var(--secondary);
}

.counter-trending-cover {
  background: var(--white);
  padding-bottom: 0;
  position: relative;
  z-index: 1;
}
.counter-trending-cover .instructor-bg {
  position: absolute;
  bottom: 30%;
  left: 0;
  width: 330px;
  height: 429px;
  z-index: -1;
}
@media (max-width: 991.98px) {
  .counter-trending-cover .instructor-bg {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .counter-trending-cover {
    padding-bottom: 40px;
  }
}
.counter-trending-cover .counter-section {
  background: var(--dark);
  position: relative;
  border-radius: 20px;
  padding: 60px;
  margin-bottom: 60px;
   margin-top: 60px;
}
@media (max-width: 767.98px) {
  .counter-trending-cover .counter-section {
    padding: 40px;
    margin-bottom: 40px;
  }
}
.counter-trending-cover .counter-section .counter-bg-01 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 0;
  animation: moveDiagonal 4s ease-in-out infinite;
}
.counter-trending-cover .counter-section .counter-bg-02 {
  position: absolute;
  top: 130px;
  right: 50px;
  z-index: 0;
  animation: moveDiagonal 4s ease-in-out infinite;
}
.counter-trending-cover .counter-section .counter-item {
  padding-right: 20px;
  position: relative;
}
.counter-trending-cover .counter-section .counter-item.no-border::after {
  content: none;
}
.counter-trending-cover .counter-section .counter-item::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 1px;
  top: 0;
  right: 0;
  background: linear-gradient(90deg, #5c28d4 0%, #392c7d 100%);
}
@media (max-width: 991.98px) {
  .counter-trending-cover .counter-section .counter-item::after {
    content: none;
  }
}
@media (max-width: 767.98px) {
  .counter-trending-cover .counter-section .counter-item::after {
    width: 0;
    height: 0;
  }
}
.counter-trending-cover .counter-section .counter-item h2 {
  margin-bottom: 10px;
}
.counter-trending-cover .trending-instruction .instructor-card {
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.1803921569);
  text-align: center;
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image {
  position: relative;
  margin: 0 auto 16px;
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image
  img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 0 auto;
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image
  .verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 20px;
  background: var(--white);
  width: 32px;
  height: 32px;
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image
  .verify
  img {
  width: auto;
  height: auto;
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image
  .fav-icon {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  border-radius: 30px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  color: var(--gray-900);
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image
  .fav-icon:hover,
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-image
  .fav-icon.selected {
  color: var(--secondary);
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-content {
  text-align: center;
}
.counter-trending-cover
  .trending-instruction
  .instructor-card
  .instructor-content
  p {
  font-size: 14px;
  margin-bottom: 8px;
}
.counter-trending-cover .trending-instruction .owl-carousel .owl-nav.disabled {
  display: none;
}
.counter-trending-cover .trending-instruction .owl-carousel .owl-dots.disabled {
  display: flex;
  justify-content: center;
}

.subsribe-section {
  background: url("../img/bg/subscribe-bg.png") var(--dark);
  background-repeat: no-repeat;
  background-position: left bottom;
  position: relative;
}
.subsribe-section .bg-05 {
  position: absolute;
  top: 50px;
  left: -70px;
  animation: moveDiagonal 4s ease-in-out infinite;
}
.subsribe-section .contact-section {
  padding: 50px 0;
}
@media (max-width: 767.98px) {
  .subsribe-section .contact-section {
    padding: 40px 0;
  }
}
.subsribe-section .contact-section .subcribe-form {
  position: relative;
  background: var(--white);
  border-radius: 70px;
}
.subsribe-section .contact-section .subcribe-form span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 32px;
  font-size: 16px;
  color: var(--gray-500);
}
.subsribe-section .contact-section .subcribe-form .form-control {
  height: 55px;
  border: 0;
  padding: 10px 125px 10px 54px;
  background: transparent;
  font-size: 16px;
}
@media (max-width: 991.98px) {
  .subsribe-section .contact-section .subcribe-form .form-control {
    font-size: 14px;
    height: 60px;
  }
}
.subsribe-section .contact-section .subcribe-form .btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .subsribe-section .contact-section .subcribe-form .btn {
    font-size: 14px;
  }
}
.subsribe-section .contact-section .subscribe-error {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 8px;
  padding: 0 20px;
}
.subsribe-section .contact-section .subscribe-error small {
  display: block;
  font-size: 14px;
  word-break: break-word;
}
@media (max-width: 767.98px) {
  .subsribe-section .contact-section .subscribe-error {
    padding: 0 10px;
  }
  .subsribe-section .contact-section .subscribe-error small {
    font-size: 13px;
  }
}
.subsribe-section .bg-01 {
  position: absolute;
  bottom: 0;
  right: 35px;
  z-index: 0;
}
.subsribe-section .bg-02 {
  position: absolute;
  bottom: 0;
  right: 100px;
}
.subsribe-section .bg-03 {
  position: absolute;
  top: 85px;
  left: 145px;
  animation: verticalRotate 5s linear infinite;
}
.subsribe-section .bg-04 {
  position: absolute;
  top: 125px;
  right: 0;
  animation: upDown 3s ease-in-out infinite;
}

.cliets-section .owl-carousel .owl-nav.disabled {
  display: none;
}

.about-us {
  background: var(--white);
  padding: 60px 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .about-us {
    padding: 40px 0;
  }
}
.about-us .about-us-content {
  position: relative;
  margin-bottom: 60px;
}
@media (max-width: 767.98px) {
  .about-us .about-us-content {
    margin-bottom: 40px;
  }
}
.about-us .about-us-content .about-us-head {
  margin-bottom: 40px;
}
.about-us .about-us-content .about-us-head h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  text-align: start;
}
@media (max-width: 767.98px) {
  .about-us .about-us-content .about-us-head h2 {
    font-size: 28px;
    line-height: 38px;
  }
}
@media (max-width: 575.98px) {
  .about-us .about-us-content .about-us-head h2 {
    font-size: 24px;
    line-height: 34px;
  }
}
.about-us .about-us-content .about-us-head p {
  font-weight: 500;
}
.about-us .about-us-content .owl-carousel .owl-nav.disabled {
  display: none;
}
.about-us .about-us-content .owl-carousel .owl-dots.disabled {
  display: flex;
  justify-content: start;
}
.about-us .about-us-content .img-section {
  position: relative;
  padding-left: 70px;
}
@media (max-width: 1199.98px) {
  .about-us .about-us-content .img-section {
    padding-left: 0;
  }
}
.about-us .about-us-content .img-section .enrolled-list-cover {
  display: inline-flex;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border-radius: 30px 30px 0px 30px;
  background: var(--dark);
  position: absolute;
  left: 0;
  top: 10px;
  padding: 20px;
  z-index: 1;
}
.about-us .about-us-content .img-section .enrolled-list-cover .enrolled-list {
  border-radius: 30px 30px 0px 30px;
}
.about-us
  .about-us-content
  .img-section
  .enrolled-list-cover
  .enrolled-list
  .avatar-list-stacked {
  margin-bottom: 10px;
}
.about-us .about-us-content .img-section .enrolled-list-cover .enrolled-list p {
  font-size: 14px;
}
.about-us .about-us-content .img-section .about-img {
  border-radius: 10px;
}
.about-us .about-us-content .img-section .arrow {
  position: absolute;
  top: 10%;
  left: -100px;
  z-index: 0;
}
@media (max-width: 991.98px) {
  .about-us .about-us-content .img-section {
    display: none;
  }
}
.about-us .apply-role-section .role-item {
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.1803921569);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  overflow: hidden;
  padding: 40px;
}
@media (max-width: 767.98px) {
  .about-us .apply-role-section .role-item {
    padding: 30px;
  }
}
@media (max-width: 575.98px) {
  .about-us .apply-role-section .role-item {
    padding: 20px;
  }
}
.about-us .apply-role-section .role-item .btn {
  z-index: 99;
  padding: 8px 16px;
}

.about-us .apply-role-section .role-item.student-bg::before {
  background-image: url(../img/bg/role-bg-02.png);
}
.about-us .apply-role-section .role-item::before {
  content: "";
  background: url("../img/bg/role-bg-01.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%;
  height: 100%;
  position: absolute;
  right: -113px;
  bottom: -51px;
  z-index: -1;
}
@media (max-width: 1199.98px) {
  .about-us .apply-role-section .role-item::before {
    width: 55%;
    height: 55%;
    background-size: contain;
  }
}

#review-carousel.nav-bottom .owl-dots {
  justify-content: start;
}

.review-item {
  position: relative;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 20px;
  background: var(--white);
  margin-bottom: 24px;
}
.review-item .rating {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 4px;
}
.review-item .rating i {
  color: var(--gray-500);
}
.review-item .rating i.selected {
  color: #ffc107;
}
.review-item .title {
  font-size: 20px;
  margin-bottom: 10px;
}
@media (max-width: 767.98px) {
  .review-item .title {
    font-size: 18px;
  }
}
.review-item p {
  margin-bottom: 30px;
}
.review-item .review-user img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.review-item .review-user p {
  font-size: 14px;
}
.review-item .author-company-logo {
  max-width: 100px;
  max-height: 26px;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;

}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes downUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes verticalRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes moveDiagonal {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(25px, 25px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes myAnim {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.course-slider-slick .slick-dots li {
 width: 10px;
    height: 10px;
  border-radius: 10px;
  background: #d6d4e4;
  margin-right: 4px;
  transition: all 0.3s ease;
}
.course-slider-slick .slick-dots li.slick-active {
  width: 15px;
  height: 7px;
  border-radius: 10px;
  background: var(--secondary);
}
.course-slider-slick .slick-list {
  margin: 0 -12px;
}
.course-slider-slick .slick-slide {
  margin: 0 12px;
}

/****** Utils ******/
.home-3 .banner-image img {
  width: 100%;
}
@media (max-width: 991.98px) {
  .home-3 .banner-image {
    display: none;
  }
}
.home-3 .banner-content {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.home-3 .banner-content .input-group {
  background: var(--white);
  border-radius: 130px;
  padding-left: 12px;
}
@media (max-width: 575.98px) {
  .home-3 .banner-content .input-group {
    display: block;
    padding: 0;
  }
}
.home-3 .banner-content .input-group .form-control::placeholder {
  color: var(--gray-400);
}
.home-3 .banner-content .form-control {
  background: var(--white);
  border-radius: 40px;
  border: 0;
  height: 44px;
  color: var(--gray-900);
  font-size: 14px;
  margin-right: 10px;
}
@media (max-width: 575.98px) {
  .home-3 .banner-content .form-control {
    width: 100%;
    margin: 0;
  }
}
.home-3 .banner-content .select2-container--focus .select2-selection--single {
  background-color: #ffdae0 !important;
}
.home-3 .banner-content .select2-container {
  border-radius: 50px !important;
  background-color: #ffdae0;
  z-index: unset;
}
.home-3 .banner-content .select2-container .select2-selection--single {
  border: 0;
  align-items: center;
  display: flex;
  background: transparent;
  height: 44px;
}
@media (max-width: 575.98px) {
  .home-3 .banner-content .select2-container .select2-selection--single {
    width: 100%;
  }
}
.home-3
  .banner-content
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 14px;
  padding-left: 15px;
}
.home-3
  .banner-content
  .select2-container--default.select2-container--open.select2-container {
  border-radius: 3px;
}
.home-3 .banner-content .select2-container--default .select2-selection--single {
  border-radius: 50px !important;
}
.home-3
  .banner-content
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: auto;
}
.home-3 .rate-head h3 {
  margin-right: 20px;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .home-3 .rate-head h3 {
    font-size: 36px;
    line-height: 38px;
  }
}
@media (max-width: 575.98px) {
  .home-3 .rate-head h3 {
    font-size: 28px;
    line-height: 32px;
  }
}
.home-3 .rating {
  list-style: none;
  margin: 0 0 7px;
  padding: 0;
  width: 100%;
}
.home-3 .rating h4 {
  font-size: 48px;
  font-weight: 700;
  margin: 0 8px 0 0;
}
@media (max-width: 767.98px) {
  .home-3 .rating h4 {
    font-size: 36px;
    line-height: 38px;
  }
}
@media (max-width: 575.98px) {
  .home-3 .rating h4 {
    font-size: 28px;
    line-height: 32px;
  }
}
.home-3 .rating i {
  color: #dedfe0;
}
.home-3 .rating i.filled {
  color: #ffb54a;
}
.home-3 .select2-dropdown {
  border: 1px solid #ffdae0;
}
.home-3
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #22100d;
  border-style: solid;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-top: -5px;
  margin-left: -11px;
}
.home-3
  .select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #1b2559;
  border-width: 2px 0 0 2px;
  padding: 3px;
  margin-top: 1px;
}
.home-3
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #ffdae0;
  color: #22100d;
  font-size: 14px;
}
.home-3 .select2-results__option {
  font-size: 14px;
}
.home-3 .course-inner-content {
  margin-left: 20px;
}
.home-3 .course-inner-content h4 {
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--gray-900);
}
.home-3 .course-inner-content p {
  color: var(--gray-500);
  font-size: 16px;
  margin-bottom: 0;
}
.home-3 .student-course {
  position: relative;
  margin-top: -60px;
}
.home-3 .slick-dots li {
 width: 10px;
    height: 10px;
    border-radius: 50px;
  background: var(--gray-100);
  transition: all 0.3s ease;
}
.home-3 .slick-dots li.slick-active {
  width: 20px;
  height: 8px;
  background: var(--secondary);
}
.home-3 .slick-slide {
  margin-right: 24px;
}
@media (max-width: 575.98px) {
  .home-3 .slick-slide {
    margin-right: 0;
  }
}
.home-3 .feature-icon {
  margin-right: 15px;
  font-size: 30px;
  width: 105px;
  border-radius: 100px;
  height: 105px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  color: #fff;
  margin: 0 auto;
}
.home-3 .mentoring-course .slick-dots {
  bottom: -40px;
}
.home-3 .color-active {
  color: red;
  font-weight: 700;
}
.home-3 .master-skill {
  padding: 80px 0px 0px;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .home-3 .master-skill {
    padding: 50px 0 0;
  }
}
.home-3 .certified-item {
  border: 1px solid var(--gray-100);
  border-radius: 5px;
  padding: 20px;
}
.home-3 .certified-item p {
  margin-bottom: 0;
  color: var(--gray-900);
  margin-left: 10px;
  font-weight: 500;
}
.home-3 .certified-img {
  background: #ffedf0;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-3 .career-group {
  margin-bottom: 80px;
}
@media (max-width: 991.98px) {
  .home-3 .career-group {
    margin-bottom: 50px;
  }
}
.home-3 .trending-course {
  position: relative;
}
.home-3 .trending-course .slick-dots {
  bottom: -40px;
}
.home-3 .feature-instructors {
  padding-top: 80px;
}
@media (max-width: 991.98px) {
  .home-3 .feature-instructors {
    padding-top: 50px;
  }
}
.home-3 .feature-instructors .instructor-item.instructor-item-two {
  box-shadow: none;
}
.home-3 .instructors-course .slick-dots {
  bottom: 0;
}

.home-3 .instructors-course .slick-prev {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  left: -22px;
  top: 50%;
}
@media (max-width: 575.98px) {
  .home-3 .instructors-course .slick-prev {
    width: 35px;
    height: 35px;
    left: -7px;
  }
}
.home-3 .instructors-course .slick-prev::before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}
.home-3 .instructors-course .slick-next {
  z-index: 99;
  background: var(--white);
  border: 1px solid var(--gray-100);
  transform: matrix(-1, 0, 0, 1, 0, 0) translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 1.5rem;
  right: 0;
  top: 50%;
}
@media (max-width: 575.98px) {
  .home-3 .instructors-course .slick-next {
    width: 35px;
    height: 35px;
    right: -7px;
  }
}
.home-3 .instructors-course .slick-next::before {
  font-family: "Font Awesome 5 Free";
  content: "\f053";
  color: var(--dark);
  font-size: 16px;
  font-weight: 900;
}

.home-3 .slick-dots {
  bottom: -40px;
}
.home-3 .lead-companies .owl-carousel .owl-stage {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.home-3 .owl-carousel .owl-item .lead-img img {
  width: auto;
}
.home-3 .share-knowledge {
  padding: 60px 0px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .home-3 .share-knowledge {
    padding: 50px 0;
  }
}
.home-3 .share-knowledge .home-three-sec-bg .sec-bg-01 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.home-3 .share-knowledge .home-three-sec-bg .sec-bg-02 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.home-3 .share-knowledge .knowledge-img {
  padding-right: 24px;
}
@media (max-width: 991.98px) {
  .home-3 .share-knowledge .knowledge-img {
    padding-right: 0;
  }
}
.home-3 .join-mentor h2 {
  margin-bottom: 8px;
}
.home-3 .join-mentor p {
  margin-bottom: 16px;
}
.home-3 .latest-blog {
  padding: 80px 0px;
  padding-top: 35px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .home-3 .latest-blog {
    padding: 50px 0;
  }
}
.home-3 .latest-blog .home-three-sec-bg .sec-bg-01 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.home-3 .latest-blog .home-three-sec-bg .sec-bg-02 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.home-3 .blogs-slide .slick-dotted.slick-slider {
  margin-bottom: 0;
}
.home-3 .blogs-slide .slick-dots {
  bottom: -10px;
}
.home-3 .enroll-group {
  background: linear-gradient(
    90deg,
    rgba(161, 196, 253, 0.79) 0%,
    rgba(194, 233, 251, 0.36) 100%
  );
  backdrop-filter: blur(35px);
  border-radius: 20px;
  padding: 24px;
  margin: 80px 0px 50px;
}
@media (max-width: 991.98px) {
  .home-3 .enroll-group {
    margin: 50px 0;
  }
}
.home-3 .enroll-group .enroll-course {
  margin-bottom: 0px;
}
.home-3 .enroll-group .enroll-course .enroll-img {
  background: #2e3254;
  border-radius: 10px;
  width: 60px;
  height: 60px;
  /* border: 4px solid var(--gray-100); */
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .home-3 .enroll-group .enroll-course {
    justify-content: center;
  }
}
.home-3 .course-count {
  color: var(--gray-500);
}
.home-3 .course-count p {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-500);
}
.home-3 .course-count h3 {
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 4px;
  color: #342777;
}
.home-3 .enroll-course {
  margin-bottom: 24px;
}
.home-3 .become-instructors {
  padding: 80px 0px 80px;
  position: relative;
}
@media (max-width: 991.98px) {
  .home-3 .become-instructors {
    padding: 50px 0;
  }
}
.home-3 .student-mentor {
  background: #392c7d;
  padding: 40px 40px 0;
  border-radius: 20px;
  color: var(--gray-500);
  position: relative;
}
.home-3 .student-mentor h4,
.home-3 .student-mentor .main-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}
@media (max-width: 991.98px) {
  .home-3 .student-mentor h4,
  .home-3 .student-mentor .main-title {
    font-size: 16px;
  }
}
.home-3 .top-instructors {
  padding-bottom: 40px;
}
.home-3 .top-instructors p {
  margin-bottom: 20px;
  color: var(--light);
}
.home-3 .testimonial-four .slick-list {
  border: 14px solid #ededed;
  max-width: 70%;
  margin: auto;
  border-radius: 45px;
  /* background-image: linear-gradient(
    142.13deg,
    rgba(255, 255, 255, 0.28) 1.8%,
    rgba(255, 255, 255, 0.31) 99.75%
  ); */
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(30, 41, 59, 0.95) 100%
  );
  backdrop-filter: blur(151.39px);
  /* background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%); */
}
@media (max-width: 767.98px) {
  .home-3 .testimonial-four .slick-list {
    max-width: 100%;
    border-radius: 20px;
    border-width: 10px;
  }
}
.home-3 .testimonial-four .slick-slide img {
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}
.home-3 .testimonial-four .slick-prev {
  left: 16%;
  z-index: 99;
  background: var(--white);
  width: 45px;
  height: 45px;
  border-radius: 0;
}
.home-3 .testimonial-four .slick-prev:before {
  font-family: "Font Awesome 5 Free";
  content: "\f060";
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .home-3 .testimonial-four .slick-prev {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 767.98px) {
  .home-3 .testimonial-four .slick-prev {
    left: 6%;
  }
}
.home-3 .testimonial-four .slick-next {
  right: 16%;
  background: var(--white);
  width: 45px;
  height: 45px;
  border-radius: 0;
}
.home-3 .testimonial-four .slick-next:before {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .home-3 .testimonial-four .slick-next {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 767.98px) {
  .home-3 .testimonial-four .slick-next {
    right: 6%;
  }
}
.home-3 .review {
  width: 100%;
}
.home-3 .mentor-testimonial {
  z-index: 9;
}
.home-3 .mentor-testimonial .slick-slide {
  margin-right: 0;
}
.home-3 .testimonial-four .slick-prev,
.home-3 .testimonial-four .slick-next {
  top: 62%;
  border-radius: 50px;
}
.home-3 .testimonial-four .slick-prev:hover,
.home-3 .testimonial-four .slick-next:hover,
.home-3 .testimonial-four .swiper-button-prev:hover,
.home-3 .testimonial-four .swiper-button-next:hover {
  color: #fff;
  background: var(--secondary);
  opacity: 1;
}
.home-3 .testimonial-four .slick-prev:hover:before,
.home-3 .testimonial-four .slick-prev:focus:before,
.home-3 .testimonial-four .slick-next:hover:before,
.home-3 .testimonial-four .slick-next:focus:before,
.home-3 .testimonial-four .swiper-button-prev:hover:before,
.home-3 .testimonial-four .swiper-button-next:hover:before {
  color: #fff;
  opacity: 1;
}
.home-3 .testimonial-four .slick-next:focus,
.home-3 .testimonial-four .slick-prev:focus {
  background: var(--secondary);
}
.home-3 .mentor-img img {
  height: 230px;
  bottom: 0;
  right: 20px;
  position: absolute;
}

.expert-item {
  border: 1px solid var(--gray-100);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  background: var(--white);
  position: relative;
  top: 0;
  transition: 0.5 ease all;
}
.expert-item .expert-img {
  margin-right: 24px;
}
.expert-item .expert-content h4,
.expert-item .expert-content .main-title {
  margin-bottom: 4px;
}
.expert-item:hover {
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transition: 0.5 ease all;
}

.blog-wrap {
  background: var(--white);
  border-radius: 10px;
  margin-bottom: 50px;
}
.blog-wrap .blog-img {
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 10px 10px 0 0;
  padding-bottom: 0;
}
.blog-wrap .blog-img img {
  padding: 3px;
  object-fit: fill;
  width: 100%;
  transform: translateZ(0);
  transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  border-radius: 10px 10px 0 0;
}
.blog-wrap:hover .blog-img img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
}

@media (max-width: 991.98px) {
  .home-3 .rate-head h2 {
    font-size: 36px;
  }
  .home-3 .rating h2 {
    font-size: 36px;
  }
  .home-3 .student-mentor {
    padding: 30px;
  }
  .home-3 .top-instructors {
    padding-bottom: 0;
  }
}

/****** Utils ******/
.home-4 .banner-form .select2-container .select2-selection--single {
  border: 0;
  align-items: center;
  display: flex;
  background: var(--white);
  height: 40px;
  border-right: 1px solid var(--gray-100);
  border-radius: 0;
}
@media (max-width: 575.98px) {
  .home-4 .banner-form .select2-container .select2-selection--single {
    border: 0;
  }
}
.home-4
  .banner-form
  .select2-container.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 39px;
}
.home-4 .about-image.count-one h4 {
  color: #03c95a;
}
.home-4 .about-image.count-two h4 {
  color: var(--secondary);
}
.home-4 .about-image.count-three h4 {
  color: #ffc107;
}
.home-4 .about-image.count-four h4 {
  color: var(--primary);
}
.home-4 .count-content-three p {
  font-weight: 500;
}
.home-4 .slide-nav-8 button.owl-next,
.home-4 .slide-nav-8 button.owl-prev {
  background: transparent;
  text-shadow: none;
  top: 0px;
  margin-top: 0;
  cursor: pointer;
  border: 0;
  color: var(--gray-700);
  margin-bottom: 0px;
  transform: rotate(0deg);
  font-size: 20px;
}
.home-4 .slide-nav-8 button.owl-next:hover,
.home-4 .slide-nav-8 button.owl-prev:hover {
  color: var(--secondary);
}
.home-4 .real-reviews .owl-nav button.owl-next span,
.home-4 .real-reviews .owl-nav button.owl-prev span {
  font-size: 34px;
  line-height: 25px;
  transform: rotate(0deg);
  display: flex;
  padding-left: 6px;
  padding-bottom: 3px;
}
.home-4 .real-reviews .owl-nav button.owl-next {
  margin-left: 10px;
}

.accordion-item {
  background: var(--white);
  border-color: var(--gray-100);
}

/****** Utils ******/
.home-five-slide-face {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.banner-slide-img {
  display: flex;
  align-items: end;
}
@media (max-width: 991.98px) {
  .banner-slide-img {
    display: none;
  }
}

.home-five-slide-text h1 {
  font-weight: 700;
  font-size: 52px;
  letter-spacing: 0.02em;
  margin-bottom: 15px;
  line-height: 1.2;
}
@media (max-width: 1399.98px) {
  .home-five-slide-text h1 {
    font-size: 46px;
  }
}
@media (max-width: 1199.98px) {
  .home-five-slide-text h1 {
    font-size: 36px;
  }
}
@media (max-width: 991.98px) {
  .home-five-slide-text h1 {
    font-size: 30px;
  }
}

.home-five-slide-face h1 span {
  color: var(--secondary);
}

.home-five-slide-text h5 {
  background: var(--secondary);
  border-radius: 30px;
  display: inline-flex;
  padding: 12px;
  font-weight: 500;
  font-size: 14px;
  align-items: center;
  color: var(--white);
  margin-bottom: 15px;
}

.home-five-slide-text p {
  margin-bottom: 35px;
}

.banner-three-content .select2-container .select2-selection--single {
  border: 0;
  align-items: center;
  text-align: center;
  font-size: 14px;
  display: flex;
  background: var(--light);
  height: 56px;
}
@media (max-width: 575.98px) {
  .banner-three-content .select2-container .select2-selection--single {
    width: 100%;
  }
}

.banner-three-content .form-control {
  background: var(--white);
  border: 0;
  padding: 0;
  height: 56px;
  color: #000;
  font-size: 15px;
  font-size: 14px;
}
@media (max-width: 575.98px) {
  .banner-three-content .form-control {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .banner-three-content .input-group {
    display: block;
    width: 100%;
  }
}

.form-three-select
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: red !important;
  color: var(--white);
  font-size: 14px;
}

.banner-three-content
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: auto;
}
.banner-three-content
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
  color: #585858;
  font-size: 14px;
}
.banner-three-content .select2-dropdown {
  border: 1px solid #ffdeda;
}
.banner-three-content .input-group > :not(:nth-child(2)) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 14px;
}

.home-five .slick-dots li {
  width: 14px;
  height: 14px;
}

.student-course {
  position: relative;
  margin-top: -60px;
}

.student-course-five .course-details-three {
  border-color: var(--gray-100);
}

.course-details-three {
  border: 1px solid #f4f4f4;
  box-shadow: 0px 4px 14px rgba(231, 231, 231, 0.25);
  border-radius: 10px;
  padding: 24px;
  background: var(--white);
  width: 100%;
  display: -ms-flexbox;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.course-details-three:hover {
  top: -10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.course-details-three .course-content-three h4,
.course-details-three .course-content-three h3 {
  font-weight: 700;
  font-size: 24px;
}
.course-details-three .course-content-three p {
  color: var(--gray-600);
  margin-bottom: 0;
}

.course-count-three {
  color: #000000;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
}

.course-content-three {
  margin-left: 8px;
}

.course-count-three .course-img img {
  width: 92px;
}

.course-count-three .course-img i {
  font-size: 40px;
  line-height: 1;
  padding-right: 5px;
}

.course-count-three .course-img svg {
  width: 52px;
  height: 52px;
}

.master-three-images {
  position: relative;
  max-width: 513px;
}
.paddingTop{
  display:flex;
  justify-content:center;
  align-items:center;
}
.paddingTop img{
   width:85%;
  }
@media (max-width: 991.98px) {
  .master-three-images {
    margin: 0 auto 24px;
  }
    .master-three-images .master-img {
    margin-bottom: 0;
  }
  .paddingTop{
    padding-top:25px;
  
  }
  .paddingTop img{
   width:90%;
  }
}

@media (max-width: 575.98px) {
  .master-img {
    padding: 0 0 30px 20px;
  }
}
.master-img .master-skill-image2 {
  border-radius: 30px;
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575.98px) {
  .master-img .master-skill-image2 {
    width: 90%;
  }
}

.master-skill-content {
  padding-left: 40px;
}
@media (max-width: 1199.98px) {
  .master-skill-content {
    padding-left: 0;
  }
}

.master-skill-three {
  padding: 80px 0;
  position: relative;
}

.skils-icon {
  background: var(--white);
  border: 1px solid var(--gray-100);
  box-shadow: 0px 4px 14px 0px rgba(219, 219, 219, 0.2509803922);
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 0px;
  width: 60px;
  height: 60px;
}

.skils-icon-item {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}
.skils-icon-item:hover {
  top: -10px;
  transition: top ease 0.5s;
}

/* ===== What You Get (campus-preparation.html) ===== */
/* Scoped to .what-you-get-section so the shared .skils-icon-item /
   .mycustom-title markup used on other pages is left untouched. */
.what-you-get-section .skils-group .skils-icon-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  box-shadow: 0px 4px 14px 0px rgba(219, 219, 219, 0.2509803922);
  top: 0;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.what-you-get-section .skils-group .skils-icon-item:hover {
  top: 0;
  transform: translateY(-8px);
  border-color: var(--secondary);
  box-shadow: 0px 16px 34px 0px rgba(0, 0, 0, 0.1);
}
.what-you-get-section .skils-icon {
  flex-shrink: 0;
  margin-bottom: 0;
}
.what-you-get-section .skils-content {
  flex: 1;
}
.what-you-get-section .mycustom-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}
.what-you-get-section .mycustom-title .text-secondary {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white) !important;
  font-size: 13px;
  font-weight: 700;
}
.what-you-get-section .skils-content p {
  color: var(--gray-500);
  line-height: 1.7;
}
@media (max-width: 575.98px) {
  .what-you-get-section .skils-group .skils-icon-item {
    flex-direction: column;
    padding: 24px 20px;
  }
}
.home-five .owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 0px 5px;
  background: #dedede;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.home-five .swiper-slide {
  flex-shrink: unset;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.home-five .testimonial-content {
  padding: 20px 0;
}
.home-five .testimonial-content p {
  font-size: 16px;
  margin-bottom: 0;
  text-align: justify;
}
.home-five .btn-default {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  background: var(--primary);
  border-radius: 5px;
  min-width: 159px;
  height: 44px;
  padding: 10px;
  overflow: hidden;
  text-transform: initial;
  box-shadow: inset 0 0 0 0 #fff;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.home-five .btn-default:hover {
  background-color: var(--white);
  border-color: var(--primary);
  color: var(--white) !important;
  box-shadow: inset 0 50px 0 0 var(--primary);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.favourite-course-sec .mentoring-course .owl-stage {
  padding-top: 0;
}
@media (max-width: 991.98px) {
  .home-five-favourite .slick-dots li {
    margin: 0 2px;
  }
}
.home-five-favourite .mentoring-course .owl-stage {
  padding-top: 0px;
}

.favourite-carousel .slick-list {
  margin: 0 -12px;
}
.favourite-carousel .slick-slide {
  margin: 0 12px;
}

.home-five .owl-theme .owl-dots .owl-dot.active span,
.home-five .owl-theme .owl-dots .owl-dot:hover .home-five span {
  width: 8px;
  height: 8px;
  background: var(--primary);
  box-shadow: 0px 0px 0px 3px var(--primary);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.home-five-trending .owl-theme .owl-dots .owl-dot.active span,
.home-five-trending
  .owl-theme
  .owl-dots
  .owl-dot:hover
  .home-five-trending
  span {
  width: 8px;
  height: 8px;
  background: #1a1e21;
  box-shadow: 0px 0px 0px 3px #1a1e21;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.home-five-courses .heart-three .fa-heart:hover {
  background-color: var(--secondary);
  color: var(--white);
}
.tablist-three .nav-tab {
  font-weight: 500;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 5px;
}
.tablist-three .nav-tab.active {
  font-weight: 500;
  color: var(--secondary);
  border-color: var(--gray-100);
}
.tablist-three .nav-tab:hover {
  color: var(--primary);
}
.heart-three .fa-heart {
  width: 31px;
  background-color: #fff;
  height: 31px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}
.heart-three .fa-heart:hover {
  background-color: var(--secondary);
  color: var(--white);
}

.home-five-transform {
  padding: 80px 0;
  background-color: #262525;
  background-repeat: repeat;
  background-position: top right;
}
@media (max-width: 991.98px) {
  .home-five-transform {
    padding: 50px 0;
  }
}
.home-five-transform .cta-content h2 {
  font-weight: 700;
  font-size: 32px;
  color: var(--white);
  margin-bottom: 8px;
}
.home-five-transform .cta-content p {
  color: var(--white);
}

.transform-button-three {
  text-align: end;
}
@media (max-width: 767.98px) {
  .transform-button-three {
    text-align: left;
  }
}

.slick-slide > div {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.testimonial-three-content .swiper-wrapper {
  margin-bottom: 20px;
}

.slide:not(.slick-active) {
  cursor: pointer;
}

[type="email"].form-control:focus,
[type="password"].form-control:focus,
[type="tel"].form-control:focus,
[type="text"].form-control:focus,
button:focus,
input.form-control:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
select:focus,
textarea.form-control:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none;
}

.home-five .header-four .main-nav .has-submenu.active > a {
  font-weight: 500;
  font-size: 16px;
  align-items: center;
  color: #ee009c;
}
.home-five .header-four .main-nav li a {
  display: block;
  font-weight: 500;
  font-size: 16px;
  color: #392c7d;
}
.home-five .header-four .main-nav li .submenu a:hover {
  color: #ee009c;
  letter-spacing: 0.5px;
  padding-left: 20px;
}

.main-nav {
  display: flex;
  justify-content: center;
}

.home-four
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #ee009c;
  color: var(--white);
  font-size: 14px;
}
.home-four .select2-dropdown {
  border: 1px solid #ee009c;
}
.home-four .our-courses-slider .owl-nav {
  position: absolute;
  top: -110px;
  right: 20px;
  display: flex;
  gap: 20px;
}
.home-four .latest-blog-slider .owl-nav {
  position: absolute;
  top: -110px;
  right: 20px;
  display: flex;
  gap: 20px;
}
.search-box-four .select2-container {
  width: 196px !important;
  background: #e8e6f0;
  border-radius: 90px;
  border: none;
  padding: 20px;
  font-weight: 400;
  font-size: 16px;
  color: #392c7d;
  cursor: pointer;
}
.search-box-four
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  display: block;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-box-four .select2-container--default .select2-selection--single {
  border: none;
  background: #e8e6f0;
  color: #392c7d;
}
.search-box-four
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 22px;
  right: 10px;
  width: 20px;
}
.search-box-four
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #392c7d;
}

.circle {
  background: #e8e6f0;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 95px;
}

.favourite-course .owl-nav {
  position: absolute;
  top: -110px;
  right: 20px;
  display: flex;
  gap: 20px;
}

.home-four .owl-nav .owl-prev i,
.home-four .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  background: #c4c4c4;
  border-radius: 53px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.home-four .owl-nav .owl-prev i:hover,
.home-four .owl-nav .owl-next i:hover {
  background: #392c7d;
}

.heart {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #392c7d;
  font-size: 20px;
  cursor: pointer;
}

.feature-instructor-slider .owl-nav {
  position: absolute;
  top: -110px;
  right: 20px;
  display: flex;
  gap: 20px;
}
.leading-univercities.owl-carousel.owl-theme.owl-loaded.owl-drag {
  margin-bottom: 0;
  display: flex;
}

.leading-univercities .owl-theme .owl-dots,
.owl-theme .owl-nav {
  margin-top: 0 !important;
}

.testimonial {
  padding: 80px 0;
  background-repeat: no-repeat;
  background-position:
    left 10% top 40%,
    right 10% bottom 30%;
}

.testimonial-slider .owl-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.testimonial-slider .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background: #c4c4c4;
  border-radius: 53px;
}
.testimonial-slider .owl-dots .active {
  background: #392c7d;
}
.latest-blog .card {
  margin-bottom: 0;
}

.courses-labs-logo .owl-theme .owl-dots,
.owl-theme .owl-nav {
  margin-top: 0 !important;
}

.address p {
  font-weight: 400;
  font-size: 16px;
  color: #392c7d;
  max-width: 250px;
}

.footer-logo p {
  max-width: 385px;
  font-weight: 400;
  font-size: 16px;
  color: #392c7d;
  padding: 70px 0 0 0;
}

.favourite-carousel .slick-dots li {
width: 10px;
    height: 10px;
  background: var(--dark);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.favourite-carousel .slick-dots li.slick-active {
  width: 14px;
  height: 14px;
  background: var(--secondary);
}

.home-five-trending-course .slick-list {
  margin: 0 -12px;
}
.home-five-trending-course .slick-slide {
  margin: 0 12px;
}
.home-five-trending-course .slick-dots li {
  width: 10px;
  height: 10px;
  background: var(--dark);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.home-five-trending-course .slick-dots li.slick-active {
  width: 14px;
  height: 14px;
  background: var(--secondary);
}

@media (max-width: 991.98px) {
  .master-img {
    margin-bottom: 24px;
  }
  .master-skill-three {
    padding: 50px 0;
  }
}
@media (max-width: 767.98px) {
  .home-five-slide-text h1 {
    font-size: 32px;
  }
  .home-five-transform .cta-content h2 {
    font-size: 24px;
  }
}
/****** Utils ******/
/*=============================
    Who We Are
===============================*/
.who-section-eight .who-we-are-image .who-experience .count {
  font-size: 60px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.how-item-nine .count {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 70px;
  height: 70px;
}

/****** Utils ******/
/* Card */

/* Certificate Card */

.section-header h5 {
  font-size: 18px;
}

/* ── AI / DS Feature Slider (right side of master-skill section) ── */
.ai-ds-slider-wrap {
  padding-left: 24px;
  padding-bottom: 44px;
}
@media (max-width: 991.98px) {
  .ai-ds-slider-wrap {
    padding-left: 0;
    margin-top: 32px;
  }
}
.ai-ds-slide-inner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.ai-ds-slide-inner img {
  width: 100%;
  /* height: 360px; */
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (max-width: 575.98px) {
  .ai-ds-slide-inner img {
    height: 260px;
  }
}
.ai-ds-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-ds-badge i {
  font-size: 16px;
}
.ai-ds-badge-purple {
  color: #7c3aed;
}
.ai-ds-badge-blue {
  color: #2563eb;
}
.ai-ds-badge-orange {
  color: #ea580c;
}
/* Bottom caption overlay */
.ai-ds-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Slick dots */
.ai-ds-slider-wrap .slick-dots {
  bottom: -36px;
}
.ai-ds-slider-wrap .slick-dots li button::before {
  display: none;
}
.ai-ds-slider-wrap .slick-dots li.slick-active button::before {
  display: none;
}

/****** Utils ******/
/*=============================
    Category
===============================*/

.theme-4 .section {
  padding: 80px 0;
}
@media (max-width: 575.98px) {
  .theme-4 .section {
    padding: 40px 0;
  }
}

.categories-item {
  border: 1px solid var(--gray-100);
  padding: 16px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 24px;
  background: var(--white);
}
.categories-item h6 {
  font-size: 16px;
}
.categories-item:hover {
  cursor: pointer;
}
.categories-item p {
  font-size: 14px;
}
.categories-item-three {
  padding: 20px;
  border: 1px solid var(--gray-100);
  height: 160px;
}
.categories-item-three img {
  margin-bottom: 20px;
  width: 40px;
}
.categories-item-three .course-icon-wrap {
  margin-bottom: 14px;
  font-size: 38px;
  text-align: center;
  line-height: 1;
  display: block;
}
.categories-item-three .course-icon-wrap .fa-infinity {
  font-size: 30px;
  color: #6c757d;
}
.categories-item-three .course-icon-wrap .fa-robot,
.categories-item-three .course-icon-wrap .fa-microchip,
.categories-item-three .course-icon-wrap .fa-code-branch,
.categories-item-three .course-icon-wrap .fa-graduation-cap {
  font-size: 32px;
}
.categories-item-three .title {
  font-weight: 500;
  text-align: center;
}
.categories-item-three:hover img {
  animation: verticalRotate 0.5s linear 1;
}
.categories-item-three:hover .course-icon-wrap {
  animation: verticalRotate 0.5s linear 1;
}
.categories-item-seven {
  padding: 18px;
  border: 1px solid var(--gray-100);
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border-radius: 10px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: var(--white);
}
@media (max-width: 575.98px) {
  .categories-item-seven {
    padding: 20px;
  }
}
.categories-item-seven .category-img {
  margin-bottom: 20px;
  position: relative;
}
.categories-item-seven .category-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.categories-item-seven .category-info .category-badge {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 575.98px) {
  .categories-item-seven .category-info .category-badge {
    gap: 8px;
  }
}
.categories-item-seven .category-info .category-badge .badge {
  font-size: 10px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
}
@media (max-width: 575.98px) {
  .categories-item-seven .category-info .category-badge .badge {
    padding: 8px;
  }
}
.categories-item-seven .category-info .category-badge .badge i {
  font-size: 14px;
}
@media (max-width: 575.98px) {
  .categories-item-seven .category-info .category-badge .badge i {
    font-size: 10px;
  }
}
.categories-item-seven
  .category-info
  .category-badge
  .badge.badge-outline-primary {
  color: var(--primary);
  border: 1px solid var(--primary);
}
.categories-item-seven
  .category-info
  .category-badge
  .badge.badge-outline-primary:hover {
  background: var(--primary);
  color: #fff;
}
.categories-item-seven
  .category-info
  .category-badge
  .badge.badge-outline-dark {
  color: var(--gray-900);
  border: 1px solid var(--gray-900);
}
.categories-item-seven
  .category-info
  .category-badge
  .badge.badge-outline-dark:hover {
  background: var(--gray-900);
  color: #fff;
}
.categories-item-seven .category-info .custom-title {
  margin-bottom: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.categories-item-seven .category-info p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-slider .slick-list {
  margin: 0 -12px;
}
.category-slider .slick-track {
  display: flex;
  align-items: stretch;
}
.category-slider .slick-slide {
  display: flex !important;
  height: auto;
  margin: 0 12px;
}
.category-slider .slick-slide > div {
  display: flex;
  width: 100%;
}
.category-slider .slick-slide > div > .categories-item-seven {
  width: 100%;
  height: 100%;
}

.category-section-four {
  background: #f8f8f8;
  overflow: hidden;
  padding: 50px 0;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/****** Utils ******/
.counter-section-four {
  background: #fff;
}
.counter-section-four .counter-item-two h3 {
  color: red;
}
.counter-section-four .counter-item-two p {
  color: #1d1d1d;
}
.counter-section-four .section-header-four .section-sub-title,
.counter-section-four .section-header-four p {
  color: #555;
}
/* Vertical divider between the left/right counters, so together with the existing
   .counter-wrap::before horizontal line they form a "+" between the 4 counters. */
.counter-section-four .counter-wrap .row.g-4 > .col-6:first-child,
.counter-section-four .counter-content > .row.g-4 > .col-6:first-child {
  position: relative;
}
.counter-section-four .counter-wrap .row.g-4 > .col-6:first-child::after,
.counter-section-four .counter-content > .row.g-4 > .col-6:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #f8b102 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.counter-img {
  position: relative;
  padding: 0 85px 25px 0;
  margin-right: 50px;
}
@media (max-width: 991.98px) {
  .counter-img {
    display: none;
  }
}
.counter-img img {
  border-radius: 10px;
}
.counter-img .counter-img-02 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  max-width: 250px;
}
/* @media (max-width: 1399.98px) {
  .counter-img .counter-img-02 {
    max-width: 250px;
  }
} */
@media (max-width: 1199.98px) {
  .counter-img .counter-img-02 {
    max-width: 200px;
  }
}
.counter-img .counter-img-02::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  right: 40px;
  background: #fff;
  border-radius: 20px;
  width: 90%;
  height: 100%;
  z-index: -1;
}
.counter-img .video-btn {
  position: absolute;
  right: 0;
  top: 50px;
}
@media (max-width: 1199.98px) {
  .counter-img .video-btn {
    top: 20px;
  }
}
@media (max-width: 1199.98px) {
  .counter-img .video-btn .animate-button2 {
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 1199.98px) {
  .counter-img .video-btn .animate-button2 .button-text2 > span {
    transform-origin: center 60px;
  }
}
.counter-img .video-btn .animate-button2 .button-circle {
  background: #e7e7e7;
}

.counter-item-two {
  position: relative;
  z-index: 1;
  text-align: center;
}
@media (max-width: 575.98px) {
  .counter-item-two {
    padding-bottom: 24px;
    text-align: center;
  }
}
@media (max-width: 575.98px) {
  .counter-item-two.last {
    padding-bottom: 0;
  }
  .counter-item-two.last::before {
    content: none;
  }
}

.counter-item-two h3 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 12px;
}
@media (max-width: 1199.98px) {
  .counter-item-two h3 {
    font-size: 50px;
  }
}
@media (max-width: 991.98px) {
  .counter-item-two h3 {
    font-size: 40px;
  }
}
@media (max-width: 767.98px) {
  .counter-item-two h3 {
    font-size: 30px;
  }
}
.counter-item-two p {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0;
}

.counter-wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.counter-wrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--secondary-gradient-100);
  z-index: -1;
}

/****** Utils ******/

/****** Utils ******/
/*=============================
    Learning
===============================*/

.happy-item-six {
  padding: 24px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  z-index: 0;
}
@media (max-width: 1199.98px) {
  .happy-item-six {
    padding: 22px;
  }
}
.happy-item-six .shape-1 {
  top: 21%;
  left: 0;
}
.happy-item-six .shape-2 {
  top: 42%;
  left: 0;
}
.happy-item-six .shape-3 {
  top: 62%;
  left: 0;
}
.happy-item-six .shape-4 {
  top: 21%;
  right: 0;
}
.happy-item-six .shape-5 {
  top: 42%;
  right: 0;
}
.happy-item-six .shape-6 {
  top: 62%;
  right: 0;
}
.happy-item-six .happy-overlay {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-bottom: 16px;
}
.happy-item-six .happy-content-six {
  text-align: center;
}
.happy-item-six .happy-content-six .title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
}
@media (max-width: 1399.98px) {
  .happy-item-six .happy-content-six .title {
    font-size: 18px;
  }
}
@media (max-width: 1199.98px) {
  .happy-item-six .happy-content-six .title {
    font-size: 15px;
  }
}
@media (max-width: 991.98px) {
  .happy-item-six .happy-content-six .title {
    font-size: 20px;
  }
}
.happy-item-six .happy-content-six .description {
  margin-bottom: 0;
  color: #fff;
}
.minds-section-six .slick-slide > div {
  margin: 0px 12px;
}
.minds-section-six .slick-list {
  margin: 0px -12px !important;
}

.faq-content-six .accordion-item {
  padding: 20px;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
  border-radius: 10px !important;
  margin-bottom: 20px !important;
  border: 2px solid var(--gray-100) !important;
  position: relative;
}
.faq-content-six .accordion-item:last-child {
  margin-bottom: 0 !important;
}
.faq-content-six .accordion-item .accordion-button {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  padding-bottom: 0px !important;
  position: unset;
}
@media (max-width: 575.98px) {
  .faq-content-six .accordion-item .accordion-button {
    font-size: 18px;
  }
}
.faq-content-six .accordion-item .accordion-button::after {
  content: "̚";
  font-family: "Iconsax";
  background: var(--dark);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 0;
}
.faq-content-six .accordion-item .accordion-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--primary);
  border-radius: 10px;
  opacity: 0;
  transition: all 0.5s;
}
.faq-content-six .accordion-item .accordion-button:not(.collapsed)::after {
  content: "̚";
  transform: rotate(90deg);
  background: var(--primary);
}
.faq-content-six .accordion-item .accordion-button:not(.collapsed)::before {
  content: "";
  opacity: 1;
}
.faq-content-six .accordion-item .accordion-body {
  padding-top: 12px;
}
.faq-content-six .accordion-item .accordion-body p {
  font-size: 16px;
  margin-bottom: 0;
}
/* Top bar styles — add to your style.css */ /* your red brand color */
.social-list {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  margin: 25px 0 0;
  list-style: none;
  flex-wrap: wrap;
}

.social-list li {
  list-style: none;
}

.social-list .icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;

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

  color: #fff;
  font-size: 18px;
  text-decoration: none;

  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.social-list .icon:hover {
  transform: translateY(-5px);
  color: #fff;
}

/* WhatsApp */
.social-list .whatsapp {
  background: #25d366;
}

/* LinkedIn */
.social-list .linkedin {
  background: #0a66c2;
}

/* Instagram */
.social-list .instagram {
  background: linear-gradient(
    135deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
}

/* Facebook */
.social-list .facebook {
  background: #1877f2;
}

/* YouTube */
.social-list .youtube {
  background: #ff0000;
}
.youtube {
  background-color: #000;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  margin-bottom: 30px;
  cursor: pointer;
  height: 300px;
}

/* ===== Course Detail Page Styles ===== */
.course-sidebar-bg {
  /* background: #f8f8f8; */
  border-radius: 14px;
  /* padding: 16px; */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 20px;
}
.mern-hero {
  border: 1px solid #e7e7e7;
  position: relative;
  overflow: hidden;
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}
.tech-badge.mongo {
  background-color: #e6f6f0;
  color: #059669;
  border-color: rgba(5, 150, 105, 0.22);
}
.tech-badge.express {
  background-color: rgb(254, 240, 233);
  color: rgb(242, 101, 34);
  border-color: rgba(100, 116, 139, 0.2);
}
.tech-badge.react {
  background-color: #e6f0fa;
  color: #0052cc;
  border-color: rgba(6, 182, 212, 0.22);
}
.tech-badge.node {
  background-color: #e6f7fa;
  color: #3d7a38;
  border-color: rgba(104, 160, 99, 0.25);
}
.stat-pill {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 20px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(255, 60, 56, 0.07);
}
.stat-pill .value {
  font-size: 22px;
  font-weight: 700;
  color: #ff3c38;
  line-height: 1;
}
.stat-pill .label {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.overview-table th {
  background: linear-gradient(135deg, #000 0%, #232a39 100%);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 20px;
  border: none;
}
.overview-table td {
  padding: 13px 20px;
  vertical-align: middle;
  font-size: 14px;
  border-color: #f1f5f9;
}
.overview-table tr:hover td {
  background: #f8f8f8;
}
.overview-table .cell-label {
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.overview-table .cell-value {
  color: #1e293b;
  font-weight: 500;
}

.overview-table tr:nth-child(even) {
  background-color: #fafafa;
}
.mern-tabs .nav-link {
  color: #64748b;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 12px 20px;
  font-size: 14px;
  transition: all 0.2s;
}
.mern-tabs .nav-link:hover {
  color: #ff3c38;
  background: rgba(255, 60, 56, 0.04);
}
.mern-tabs .nav-link.active {
  color: #ff3c38;
  border-bottom-color: #ff3c38;
  background: transparent;
  font-weight: 700;
}
.feature-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  transition: all 0.25s;
}
.feature-card:hover {
  border-color: #ffd0ce;
  box-shadow: 0 4px 20px rgba(255, 60, 56, 0.08);
  transform: translateY(-2px);
}
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mern-accordion .accordion-button {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  background: #f8f8f8;
  box-shadow: none;
  border-radius: 10px !important;
}
.mern-accordion .accordion-button:not(.collapsed) {
  color: #ff3c38;
  background: rgba(255, 60, 56, 0.06);
}
.mern-accordion .accordion-button::after {
  filter: none;
}
.mern-accordion .accordion-item {
  border-color: #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.mern-accordion .accordion-body {
  background: #fff;
  font-size: 14px;
}
.syllabus-list {
  list-style: none;
  padding: 2px 0 0;
  margin: 0;
}
.syllabus-list > li {
  padding: 10px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.syllabus-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.syllabus-list > li > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #1e293b;
  font-weight: 600;
  margin-bottom: 7px;
}
.syllabus-list > li > strong i {
  font-size: 11px;
  flex-shrink: 0;
}
.syllabus-list > li > ul {
  list-style: none;
  padding: 0 0 0 22px;
  margin: 0;
}
.syllabus-list > li > ul > li {
  position: relative;
  padding: 3px 0 3px 14px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}
.syllabus-list > li > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
}
.audience {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 26px;
}
.ud-heading {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 60, 56, 0.15);
  position: relative;
}
.ud-heading::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 48px;
  height: 2px;
  background: #ff3c38;
  border-radius: 2px;
}
.styles-audience {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.styles-audience li {
  position: relative;
  padding: 2px 14px 2px 46px;
  /* background: #f8fafc; */
  /* border: 1px solid #e2e8f0; */
  /* border-radius: 10px; */
  font-size: 13.5px;
  /* color: #475569; */
  /* line-height: 1.6; */
}

.styles-audience li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  /* top: 13px; */
  /* font-size: 15px; */
  color: #ff3c38;
}
.styles-audience li b {
  color: #1e293b;
  font-weight: 600;
}
.audience > p {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 0;
  padding-top: 4px;
}
.fact-card {
  border-radius: 14px;
  padding: 18px 20px;
  transition: transform 0.2s;
  border: 1px solid;
}
.fact-card:hover {
  transform: translateX(4px);
}
.fact-card .fact-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.enroll-card {
  background: linear-gradient(135deg, #000 0%, #232a39 100%);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.enroll-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}
.sidebar-widget {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
.sidebar-widget-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
}
.related-course-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f8f8f8;
  transition: background 0.2s;
}
.related-course-item:last-child {
  border-bottom: none;
}
.related-course-item:hover {
  background: #f8f8f8;
}
.related-course-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}
.highlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(231, 13, 13, 0.1);
  color: #e73434;
  border: 1px solid rgba(231, 13, 13, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

.youtube img {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.youtube .play-button {
  width: 60px;
  height: 35px;
  /* background-color: #ff0000 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); */
  z-index: 1;
  opacity: 0.8;
  border-radius: 14%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* margin-left: -34px;
  margin-top: -24px; */
  background: url("../img/icons/play-button-circled.png")
    no-repeat;
  background-size: contain;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.instructors-img .youtube {
  background-color: #000;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  margin-bottom: 0;
}

.instructors-img .youtube img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.instructors-img .youtube .play-button {
  background-color: #333;
  opacity: 0.8;
  border-radius: 14%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/icons/play-button-circled.png")
    no-repeat;
  background-size: contain;
  cursor: pointer;
  margin-left: 0;
  margin-top: 0;
}

/* ── Testimonial Section Four – Redesign ── */

/* Left panel */
.testimonial-left-panel {
  padding-right: 20px;
}
.testimonial-left-panel .section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.testimonial-left-panel .section-title span {
  color: #ff3c38;
}
.testimonial-left-desc {
  color: var(--gray-500);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.testimonial-stats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.testimonial-stats .stat-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 16px 20px;
  flex: 1;
  min-width: 90px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.testimonial-stats .stat-item h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ff3c38;
  margin-bottom: 4px;
  justify-content: center;
}
.testimonial-stats .stat-item p {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 0;
}

/* Compact circular image — 120px, border-radius 50% */
.testimonial-image-sm {
  position: relative;
  flex-shrink: 0;
  width: 150px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.testimonial-image-sm > img {
  width: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ff3c38;
  display: block;
}
.testimonial-image-sm .quote-icon {
  position: absolute;
  top: 92px;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ff3c38;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.testimonial-image-sm .quote-icon img {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: none;
  object-fit: contain;
}
.testimonial-image-sm .author-info {
  margin-top: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testimonial-image-sm .testimonial-author {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testimonial-image-sm .testimonial-author .author-name {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1.3;
}
.testimonial-image-sm .author-company-logo {
  margin: 6px auto 0;
}

/* Remove the old ::before shadow block that was for the big image */
.testimonial-item-four .testimonial-image-sm::before {
  display: none;
}

/* Slide nav repositioned for compact card */
.testimonial-wrap .slide-nav {
  position: absolute;
  bottom: 28px;
  right: 30px;
  left: auto;
}
.author-company-logo {
  object-fit: contain;
  display: block;
  margin-top: 4px;
  opacity: 0.75;
}
@media (max-width: 767.98px) {
  .testimonial-left-panel {
    padding-right: 0;
    text-align: center;
  }
  .testimonial-stats {
    justify-content: center;
  }
  .testimonial-image-sm {
    margin-right: 0;
    margin-bottom: 16px;
  }
  .testimonial-item-four {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .testimonial-wrap .slide-nav {
    position: static;
    justify-content: center;
    padding-bottom: 20px;
  }
}

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

/* Container with glowing border */
.marquee-container {
  background: linear-gradient(135deg, #1e1e2f, #2a2a3a);
  border-radius: 60px;
  padding: 3px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Animated gradient border effect. The strip is 4x the container width with a
   repeating 2x-wide gradient tile; sliding it by one tile with transform loops
   seamlessly and runs on the compositor (no per-frame repaint). The container's
   overflow + radius clip it to the pill shape. */
.marquee-container::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 400%;
  background: linear-gradient(90deg, #ff8c00, #ff2d4a, #ff8c00) 0 0 / 50% 100%
    repeat-x;
  z-index: -1;
  will-change: transform;
  animation: borderGlow 3s linear infinite;
}

@keyframes borderGlow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Marquee inner */
.marquee-modern {
  background: #0f0f1a;
  border-radius: 60px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: slideRightToLeft 22s linear infinite;
  width: fit-content;
}

/* Smooth sliding */
@keyframes slideRightToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.marquee-modern:hover .marquee-track {
  animation-play-state: paused;
}

/* Message styling */
.marquee-message {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.3px;
}

.discount-text {
  background: linear-gradient(120deg, #fff, #ffd966, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* static gradient: an animated background-position on clipped text repaints
     every frame and can't run on the compositor */
}

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

.highlight {
  color: #ffaa33;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  font-weight: 800;
}

.discount-badge {
  background: linear-gradient(135deg, #ff8c00, #ff2d4a);
  padding: 0.3rem 0.9rem;
  border-radius: 40px;
   font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(255, 44, 74, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .marquee-message {
    padding: 0.6rem 1.2rem;
    font-size: 0.8rem;
    gap: 0.6rem;
  }
  .discount-icon {
    font-size: 1rem;
  }
  .discount-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.7rem;
  }
  .marquee-track {
    animation-duration: 15s;
  }
}
.online-offline-btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ===== Map Wrapper - Modern Office Cards ===== */
.map-wrapper {
  background: linear-gradient(
    160deg,
    var(--light-900) 0%,
    var(--white) 60%,
    var(--primary-transparent) 100%
  );
  padding: 60px 0;
}
.map-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  box-shadow: 0 8px 32px rgba(57, 44, 125, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100%;
}
.map-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(57, 44, 125, 0.15);
}
.map-card .map-card-img {
  position: relative;
  overflow: hidden;
}
.map-card .map-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.map-card:hover .map-card-img img {
  transform: scale(1.05);
}
.map-card .map-card-img .map-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--secondary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(57, 44, 125, 0.3);
}
.map-card .map-card-label {
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-card .map-card-label i {
  color: var(--secondary);
  font-size: 1.1rem;
}
.map-card .map-card-label h6 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
}
.map-card .map-card-iframe {
  padding: 12px 16px 16px;
}
.map-card .map-card-iframe iframe {
  width: 100%;
  height: 260px;
  border: none;
  border-radius: 12px;
  display: block;
  filter: grayscale(0.2);
  transition: filter 0.3s ease;
}
.map-card:hover .map-card-iframe iframe {
  filter: grayscale(0);
}
@media (max-width: 767.98px) {
  .map-wrapper {
    padding: 40px 0;
  }

  .map-card .map-card-iframe iframe {
    height: 220px;
  }
}
/* ===== End Map Wrapper ===== */
.section-header > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 22px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid rgba(255, 70, 103, 0.12);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  /* box-shadow:
    0 4px 14px rgba(255, 70, 103, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8); */
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* .section-header > span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4667;
  box-shadow: 0 0 10px rgba(255, 70, 103, 0.5);
} */

/* Placement Course Card Enhancements */
.placement-course-card {
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.placement-course-card:hover {
  border-color: var(--primary);
}

/* Duration Badge */
.placement-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
  backdrop-filter: blur(4px);
}

.placement-course-card .course-carousal-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.placement-course-card .course-carousal-img img {
  height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(70, 130, 255, 0.4));
  margin-top: 25px;
}

/* Tech Stack List */
.placement-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.placement-tech-list li {
  background: #f0f2f5;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: #4a5568;
  transition: all 0.1s ease;
}

.placement-tech-list li:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* Rating Section */
.rating-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px dashed #eef2f6;
  border-bottom: 1px dashed #eef2f6;
}

.stars {
  color: #ffc107;
  letter-spacing: 2px;
  font-size: 14px;
}

.review-count {
  color: #7a7f8c;
  font-size: 13px;
}
.custom-category-card {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  transition: all 0.35s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
  height: 100%;
}

.custom-category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.categories-item-seven.custom-category-card {
  transform: none;
  box-shadow: none;
}

.custom-category-card .category-img {
  position: relative;
  overflow: hidden;
  height: 240px;
}

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

.custom-category-card:hover .category-img img {
  transform: scale(1.08);
}

.custom-category-card .category-info {
  padding: 28px;
  padding-left: 4px;
}

.categories-item-seven.custom-category-card .category-info {
  padding: 0;
}

.custom-category-card .category-badge {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.custom-category-card .badge {
  padding: 9px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
}

.custom-category-card .custom-title a {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
  transition: 0.3s ease;
}

.custom-category-card .custom-title a:hover {
  color: #ff3c38;
}

.category-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
}

.category-feature-list li::before {
  /* content: "\f058"; */
  content: url("../img/icons/checkicon.png");
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  /* left: 0; */
  left: -3px;
  /* top: 1px; */
  color: #00b67a;
}

@media (max-width: 767px) {
  .custom-category-card .category-info {
    padding: 22px;
  }

  .custom-category-card .custom-title a {
    font-size: 22px;
  }

  .custom-category-card .category-img {
    height: 200px;
  }

  .category-feature-list li {
    font-size: 14px;
  }
}

/* =====================================================
   Value Addition & Placements — Beautiful Enhancement
   ===================================================== */

/* 1. Add warning & danger color tokens to theme-2 */
.theme-2 {
  --warning-950: #ff8c00;
  --danger-950: #e03131;
}

/* 2. Missing bg utility classes */
.bg-warning-950 {
  background: var(--warning-950, #ff8c00) !important;
}
.bg-danger-950 {
  background: var(--danger-950, #e03131) !important;
}

/* 3. Section — deep dark gradient that feels native to theme-2's purple palette */
.theme-2 .happy-section-six {
  background: #000;
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}

/* Soft radial glow centred behind the cards */
.theme-2 .happy-section-six::before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(154, 45, 255, 0.14) 0%,
    transparent 68%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Section header — keep text crisp on dark bg */
.theme-2 .happy-section-six .section-header h2 {
  color: #fff;
}
.theme-2 .happy-section-six .section-header p {
  color: rgba(255, 255, 255, 0.68);
  /* max-width: 560px; */
  margin-inline: auto;
}
.theme-2 .happy-section-six .section-header > span.text-secondary,
.theme-2 .happy-section-six .section-header span.fw-medium {
  background: linear-gradient(
    135deg,
    rgba(248, 177, 2, 0.18) 0%,
    rgba(248, 177, 2, 0.08) 100%
  );
  border: 1px solid rgba(248, 177, 2, 0.35);
  color: #f8b102 !important;
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(248, 177, 2, 0.15);
}

/* 4. Card — base override */
.theme-2 .happy-section-six .happy-item-six {
  padding: 28px 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* Top-left gloss sheen */
.theme-2 .happy-section-six .happy-item-six::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0) 55%
  );
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* Bottom glow on hover — colour matches the card's own background */
.theme-2 .happy-section-six .happy-item-six::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.theme-2 .happy-section-six .happy-item-six:hover {
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.5),
    0 0 0 1.5px rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
}

.theme-2 .happy-section-six .happy-item-six:hover::after {
  opacity: 1;
}

/* 5. Icon circle (overlay) */
.theme-2 .happy-section-six .happy-item-six .happy-overlay {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  overflow: visible;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(8px);
  transition:
    transform 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.theme-2 .happy-section-six .happy-item-six:hover .happy-overlay {
  transform: rotate(7deg);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Force icon white on any coloured background */
.theme-2 .happy-section-six .happy-item-six .happy-overlay img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  /* filter: brightness(0) invert(1); */
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}

.theme-2 .happy-section-six .happy-item-six:hover .happy-overlay img {
  transform: scale(1.1);
}

/* 6. Content */
.theme-2 .happy-section-six .happy-item-six .happy-content-six {
  position: relative;
  z-index: 2;
}

.theme-2 .happy-section-six .happy-item-six .happy-content-six .title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 7. Salary — styled as a frosted pill badge */
.theme-2 .happy-section-six .happy-item-six .happy-content-six .description {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.35px;
  backdrop-filter: blur(6px);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  margin-bottom: 0;
}

.theme-2
  .happy-section-six
  .happy-item-six:hover
  .happy-content-six
  .description {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* 8. Decorative shapes — subtle opacity so they show on all bg colours */

/* 9. Responsive tweaks */
@media (max-width: 1199.98px) {
  .theme-2 .happy-section-six .happy-item-six .happy-overlay {
    width: 76px;
    height: 76px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-overlay img {
    width: 38px;
    height: 38px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-content-six .title {
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  .theme-2 .happy-section-six .happy-item-six .happy-overlay {
    width: 84px;
    height: 84px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-overlay img {
    width: 42px;
    height: 42px;
  }
  
}

@media (max-width: 575.98px) {
  .theme-2 .happy-section-six .happy-item-six {
    padding: 24px 18px 20px;
  }
}

/* ===== Compact 6-in-a-row layout (col-lg-2) at LG+ ===== */
@media (min-width: 992px) {
  .theme-2 .happy-section-six .happy-item-six {
    padding: 18px 10px 16px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-overlay {
    width: 62px;
    height: 62px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-overlay img {
    width: 30px;
    height: 30px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-content-six .title {
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.6;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-content-six .description {
    font-size: 11px;
    padding: 2px 8px;
    letter-spacing: 0;
    white-space: nowrap;
    margin-bottom: 6px;
  }
}
/* Extra compact at standard LG (992-1199px) — slightly tighter */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .theme-2 .happy-section-six .happy-item-six {
    padding: 14px 8px 12px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-overlay {
    width: 54px;
    height: 54px;
    margin-bottom: 8px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-overlay img {
    width: 26px;
    height: 26px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-content-six .title {
    font-size: 11.5px;
    margin-bottom: 6px;
  }
  .theme-2 .happy-section-six .happy-item-six .happy-content-six .description {
    font-size: 10px;
    padding: 3px 7px;
  }
}
/* ===== End Value Addition & Placements ===== */
.img-partner {
  width: 80px !important;
}
.mycustom-title {
  font-size: 18px;
}
.img-talent {
  width: 120px !important;
}

/* Main Container Outline Box */
.quick-box {
  border: 1.5px solid #d0d7de;
  border-radius: 24px;
  padding: 65px 15px 30px 15px;
  position: relative;
  background-color: #ffffff;
  max-width: 1450px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Top Centered Header Pill */
.header-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #031241;
  color: #ffffff;
  padding: 8px 40px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.8px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(3, 18, 65, 0.2);
}

/* Mobile: 1 column */
@media (max-width: 575.98px) {
  .quick-box {
    padding: 40px 12px 20px;
    border-radius: 16px;
  }
  .header-pill {
    font-size: 0.78rem;
    padding: 7px 18px;
    letter-spacing: 0.4px;
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 90%;
  }
  .feature-col {
    width: 100% !important;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1.5px solid #e1e8ed;
  }
  .feature-col:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* Small: 2 columns */
@media (min-width: 576px) and (max-width: 767.98px) {
  .header-pill {
    font-size: 0.85rem;
    padding: 7px 24px;
  }
  .feature-col {
    width: 50% !important;
    padding-bottom: 24px;
    margin-bottom: 8px;
  }
  .feature-col:nth-child(odd) {
    border-right: 1.5px solid #e1e8ed;
  }
  .feature-col:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

/* Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .feature-col {
    width: 33.33% !important;
    margin-bottom: 30px;
    border-bottom: 1.5px solid #e1e8ed;
    padding-bottom: 15px;
  }
  .feature-col:not(:last-child):not(:nth-child(3n)) {
    border-right: 1.5px solid #e1e8ed;
  }
  .feature-col:nth-last-child(-n + 3) {
        border-right: 1.5px solid #e1e8ed;
  }
}

/* Desktop: 7 equal columns in one row */
@media (min-width: 1200px) {
 
  .feature-col {
    width: 14.285% !important;
  }
}

.step-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.step-desc {
  color: #57606a;
  font-size: 0.8rem;
  line-height: 1.4;
}

.placement-journey {
  padding: 60px 0;
  /* background: #f8f8f8; */
}
.placement-journey > .container-fluid {
  max-width: 1400px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Visual Circle Icon Wrappers */
.icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  border: 1px dashed #d0d7d4;
}
.feature-col {
  margin-top: 10px;
  position: relative;
}

.feature-col:hover .icon-circle {
  transform: scale(1.1);
}

.feature-col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -8%;
  width: 16%;
  border-top: 2px dashed #d8dfee;
}

/* Color Palette Configuration */
.text-purple {
  color: #8a2be2;
}
.bg-purple-light {
  background-color: #f6e6f6;
}

.text-orange {
  color: #f26522;
}
.bg-orange-light {
  background-color: #fef0e9;
}

.text-cyan {
  color: #00b4d8;
}
.bg-cyan-light {
  background-color: #e6f7fa;
}

.text-blue {
  color: #0052cc;
}
.bg-blue-light {
  background-color: #e6f0fa;
}

.text-teal {
  color: #00a86b;
}
.bg-teal-light {
  background-color: #e6f6f0;
}

.text-gold {
  color: #e6a100;
}
.bg-gold-light {
  background-color: #fefcf0;
}

.text-green {
  color: #198754;
}
.bg-green-light {
  background-color: #e8f5e9;
  border: 1.5px dashed #198754;
}

/* Elegant, modern container wrapper */
.custom-disclaimer-box {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Main Title Styling */
.disclaimer-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Custom Unordered List Styling */
.disclaimer-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
}

/* List item spacing and micro-interaction */
.disclaimer-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.5;
}

/* Customized Square Bullet Point to look clean and premium */
.disclaimer-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: #64748b; /* Sleek slate gray square bullet */
  border-radius: 1px;
}

/* Bottom Trademark Text block matching the image spacing */
.trademark-text {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
  margin-top: 16px;
}

.trademark-highlight {
  color: #0f172a;
  font-weight: 500;
}

/* ---  TRUSTED BY LOGO SECTION STYLE --- */
.trust-section {
  background-color: #ffffff;
  padding: 40px 0;
  margin-top: -30px; /* Pulls the section up to overlap smoothly */
  position: relative;
  z-index: 10;
}

.trust-container {
  max-width: 1100px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  padding: 30px 20px;
  margin: 0 auto;
}

.trust-heading {
  font-size: 1.15rem;
  font-weight: 500;
  color: #334155;
  text-align: center;
  margin-bottom: 40px;
}
.trust-heading span {
  color: #ff9900; /* Orange highlight for "100+" */
  font-weight: 700;
}

/* Multi-Row Balanced Logo Grid */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 logos in top row */
  gap: 40px;
  align-items: center;
  justify-items: center;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.logo-item img {
  max-height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

/* Responsive Breakdown adjustments */
@media (max-width: 991.98px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

@media (max-width: 575.98px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
.section-badge-yellow {
  background: linear-gradient(
    135deg,
    rgba(248, 177, 2, 0.18) 0%,
    rgba(248, 177, 2, 0.08) 100%
  );
  border: 1px solid rgba(248, 177, 2, 0.35);
  color: #f8b102 !important;
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(248, 177, 2, 0.15);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.1s ease;
}

.tag:hover {
  background: linear-gradient(135deg, #ff3c38, #ff6b4a);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

/* ===================================================
   Header Nav — Colorful Icons
   =================================================== */

/* Size & vertical alignment for all nav icons */
header .main-nav i[class] {
  font-size: 22px !important;
  display: inline-block !important;
  line-height: 1 !important;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
}

/* Submenu icons — force larger size so they don't appear tiny */
header .main-nav .submenu li a i,
header .main-nav .submenu li a i[class] {
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── DevOps (fa-infinity replacement) ── */
header .main-nav .fa-infinity {
  color: #326ce5;
}

/* ── Java / Spring ── */
header .main-nav .devicon-java-plain {
  color: #f89820;
}
header .main-nav .devicon-spring-plain {
  color: #6db33f;
}

/* ── Python / Django ── */
header .main-nav .devicon-python-plain {
  color: #3776ab;
}
header .main-nav .devicon-django-plain {
  color: #092e20;
}

/* ── React / React Native ── */
header .main-nav .devicon-react-original {
  color: #61dafb;
}

/* ── Angular ── */
header .main-nav .devicon-angularjs-plain {
  color: #dd0031;
}

/* ── AWS ── */
header .main-nav .devicon-amazonwebservices-plain {
  color: #ff9900;
}

/* ── Docker ── */
header .main-nav .devicon-docker-plain {
  color: #2496ed;
}

/* ── Jenkins ── */
header .main-nav .devicon-jenkins-plain {
  color: #d24939;
}

/* ── Git ── */
header .main-nav .devicon-git-plain {
  color: #f05032;
}

/* ── Linux ── */
header .main-nav .devicon-linux-plain {
  color: #f5c518;
}

/* ── HTML5 / CSS3 / Bootstrap / JS / Node ── */
header .main-nav .devicon-html5-plain {
  color: #e34f26;
}
header .main-nav .devicon-css3-plain {
  color: #1572b6;
}
header .main-nav .devicon-bootstrap-plain {
  color: #7952b3;
}
header .main-nav .devicon-javascript-plain {
  color: #f7df1e;
}
header .main-nav .devicon-nodejs-plain {
  color: #339933;
}

/* ── C / C++ ── */
header .main-nav .devicon-c-plain {
  color: #a8b9cc;
}
header .main-nav .devicon-cplusplus-plain {
  color: #00599c;
}

/* ── Android / Flutter / Apple ── */
header .main-nav .devicon-android-plain {
  color: #3ddc84;
}
header .main-nav .devicon-flutter-plain {
  color: #54c5f8;
}
header .main-nav .devicon-apple-original {
  color: #555555;
}

/* ── MySQL / MongoDB ── */
header .main-nav .devicon-mysql-plain {
  color: #4479a1;
}
header .main-nav .devicon-mongodb-plain {
  color: #47a248;
}

/* ── FontAwesome icon colors ── */
header .main-nav .fa-layer-group {
  color: #8b5cf6;
} /* Fullstack */
header .main-nav .fa-database {
  color: #f59e0b;
} /* DB / Hibernate */
header .main-nav .fa-stream {
  color: #ef4444;
} /* Apache Kafka */
header .main-nav .fa-chart-line {
  color: #10b981;
} /* Data Science / Career */
header .main-nav .fa-robot {
  color: #6366f1;
} /* AI */
header .main-nav .fa-microchip {
  color: #a855f7;
} /* ML */
header .main-nav .fa-mobile-alt {
  color: #06b6d4;
} /* Mobile */
header .main-nav .fa-graduation-cap {
  color: #f59e0b;
} /* Campus Prep */
header .main-nav .fa-code-branch {
  color: #10b981;
} /* DSA */
header .main-nav .fa-child {
  color: #f97316;
} /* Kids Coding */
header .main-nav .fa-calendar-week {
  color: #a855f7;
} /* Weekend */
header .main-nav .fa-book-open {
  color: #3b82f6;
} /* Tutorials */
header .main-nav .fa-book {
  color: #92400e;
} /* Books */
header .main-nav .fa-chalkboard-user {
  color: #7c3aed;
} /* Case Study / Entrepreneurship */
header .main-nav .fa-blog {
  color: #ef4444;
} /* Blogs */
header .main-nav .fa-briefcase {
  color: #1d4ed8;
} /* Career@Rays */
header .main-nav .fa-newspaper {
  color: #0891b2;
} /* Tech News */
header .main-nav .fa-search {
  color: #16a34a;
} /* Job Openings */
header .main-nav .fa-certificate {
  color: #d97706;
} /* IT Certification */
header .main-nav .fa-university {
  color: #dc2626;
} /* College Search */
header .main-nav .fa-info-circle {
  color: #3b82f6;
} /* About Us */
header .main-nav .fa-building {
  color: #64748b;
} /* Infrastructure */
header .main-nav .fa-star {
  color: #f59e0b;
} /* Success Stories */
header .main-nav .fa-images {
  color: #14b8a6;
} /* Gallery */
header .main-nav .fa-brain {
  color: #a855f7;
} /* Corporate Java Birth */
header .main-nav .fa-envelope {
  color: #3b82f6;
} /* Contact */
header .main-nav .fa-calculator {
  color: #22c55e;
} /* Live Chat */
header .main-nav .fa-pen {
  color: #f97316;
} /* Feedback */
header .main-nav .fa-building {
  color: #92400e;
}
/* ── AI Future Stats Cards ── */
.ai-future-stats {
  margin-bottom: 50px;
}
/* Make all columns inside the stats row flex so cards stretch equally */
.ai-future-stats .row > [class*="col"] {
  display: flex;
  flex-direction: column;
}
@media (max-width: 767.98px) {
  .ai-future-stats {
    padding: 24px 16px;
    border-radius: 14px;
    margin-bottom: 32px;
  }
}
@media (max-width: 575.98px) {
  .ai-future-stats {
    padding: 20px 12px;
    border-radius: 12px;
    margin-bottom: 24px;
  }
}

.future-stat-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 24px 28px;
  height: 100%;
  background: linear-gradient(
    145deg,
    rgba(12, 10, 22, 0.92) 0%,
    rgba(22, 14, 40, 0.88) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  cursor: default;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.future-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 60, 56, 0.45) 0%,
    rgba(153, 70, 255, 0.35) 50%,
    rgba(37, 99, 235, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

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

.future-stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Ambient glow blob */
.stat-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 60, 56, 0.22) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
  opacity: 0.7;
}

.future-stat-card:hover .stat-glow {
  transform: scale(1.3);
  opacity: 1;
}

/* Each card gets a unique glow accent color */
.future-stat-card:nth-child(1) .stat-glow {
  background: radial-gradient(
    circle,
    rgba(255, 60, 56, 0.28) 0%,
    transparent 70%
  );
}
.future-stat-card:nth-child(2) .stat-glow {
  background: radial-gradient(
    circle,
    rgba(153, 70, 255, 0.28) 0%,
    transparent 70%
  );
}
.future-stat-card:nth-child(3) .stat-glow {
  background: radial-gradient(
    circle,
    rgba(13, 148, 136, 0.28) 0%,
    transparent 70%
  );
}
.future-stat-card:nth-child(4) .stat-glow {
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.28) 0%,
    transparent 70%
  );
}

/* Icon pill */
.future-stat-card .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #fff;
  margin-bottom: 20px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.future-stat-card:hover .stat-icon {
  transform: scale(1.08) rotate(-4deg);
}

.future-stat-card .stat-icon i {
  font-size: 22px;
  color: #ff3c38;
}
.future-stat-card:nth-child(2) .stat-icon i {
  color: #9946ff;
}
.future-stat-card:nth-child(3) .stat-icon i {
  color: #0d9488;
}
.future-stat-card:nth-child(4) .stat-icon i {
  color: #2563eb;
}

/* Big number */
.future-stat-card h2 {
  font-size: 33px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 6px;
  background: linear-gradient(
    135deg,
    #ffffff 30%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}

/* Label */
.future-stat-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #ff3c38;
}
.future-stat-card:nth-child(2) h3 {
  color: #9946ff;
}
.future-stat-card:nth-child(3) h3 {
  color: #0d9488;
}
.future-stat-card:nth-child(4) h3 {
  color: #2563eb;
}

/* Description */
.future-stat-card p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Light mode overrides — keeps cards visible on white backgrounds */
@media (prefers-color-scheme: light) {
  .ai-future-stats .future-stat-card {
    background: linear-gradient(145deg, #0c0a16ee 0%, #160e28ee 100%);
  }
}

/* Responsive */
@media (max-width: 767.98px) {
  .future-stat-card {
    padding: 24px 20px;
    text-align: center;
  }
  .future-stat-card h2 {
    font-size: 28px;
  }
}
.rays-promise-sec .knowledge-img img {
  border-radius: 20px;
}

/* ── AI/DS role cards ── */
.ai-ds-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-ds-feature-list li {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
}
.ai-ds-role-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}
.about-us .apply-role-section .role-item .fs-13 {
  font-size: 13px;
}
.brand-journey-section {
  background: #0d0d0d;
}

.brand-journey-section .section-header h2,
.brand-journey-section .section-header p {
  color: #fff;
}

.brand-journey-section .section-header p {
  opacity: 0.7;
}

/* Timeline wrapper */
.journey-timeline {
  position: relative;
  padding: 10px 0;
}

.journey-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--secondary),
    rgba(255, 60, 56, 0.08)
  );
  transform: translateX(-50%);
  border-radius: 3px;
}

/* Timeline items */
.journey-timeline-item {
  position: relative;
  width: 50%;
  padding-bottom: 48px;
}

.journey-timeline-item.left {
  left: 0;
  padding-right: 70px;
}

.journey-timeline-item.right {
  left: 50%;
  padding-left: 70px;
}

/* Dot icon on the line */
.journey-timeline-dot {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  top: 8px;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(255, 60, 56, 0.35);
  border: 2px dotted #f9f9f9;
}

.journey-timeline-item.left .journey-timeline-dot {
  right: -28px;
}

.journey-timeline-item.right .journey-timeline-dot {
  left: -28px;
}

/* Card */
.journey-timeline-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.journey-timeline-card:hover {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

/* Arrow pointer – left item points right */
.journey-timeline-item.left .journey-timeline-card::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 24px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid var(--white);
}

/* Arrow pointer – right item points left */
.journey-timeline-item.right .journey-timeline-card::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 24px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--white);
}

/* Large faded step number */
.journey-step-num {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 60, 56, 0.4);
  user-select: none;
  pointer-events: none;
}

.journey-timeline-card h5 {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 12px;
  padding-right: 44px;
}

.journey-timeline-card p {
  color: var(--gray-500);
  line-height: 1.8;
  margin: 0;
  font-size: 15px;
}

@media (max-width: 767px) {
  .journey-timeline::before {
    left: 28px;
    transform: none;
  }
  .journey-timeline-item,
  .journey-timeline-item.left,
  .journey-timeline-item.right {
    width: 100%;
    left: 0;
    padding-left: 72px;
    padding-right: 0;
  }
  .journey-timeline-item.left .journey-timeline-dot,
  .journey-timeline-item.right .journey-timeline-dot {
    left: 0;
    right: auto;
  }
  .journey-timeline-item.left .journey-timeline-card::after {
    right: auto;
    left: -10px;
    border-left: none;
    border-right: 10px solid var(--white);
  }
}

/* ---------- Timeline (horizontal grid, zigzag) ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 0.5rem;
  align-items: center;
  margin: 1.5rem 0 1rem;
}
.timeline::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / 7;
  height: 2px;
  background: var(--secondary);
  opacity: 0.45;
}
.tl-item {
  display: contents;
}
.tl-dot {
  grid-row: 2;
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--secondary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--eva-border);
  z-index: 1;
}
.tl-content {
  text-align: center;
  padding: 0 0.4rem;
}
.tl-item:nth-child(odd) .tl-content {
  grid-row: 1;
  align-self: end;
  padding-bottom: 1.2rem;
}
.tl-item:nth-child(even) .tl-content {
  grid-row: 3;
  align-self: start;
  padding-top: 1.2rem;
}
.tl-item:nth-child(1) .tl-dot,
.tl-item:nth-child(1) .tl-content {
  grid-column: 1;
}
.tl-item:nth-child(2) .tl-dot,
.tl-item:nth-child(2) .tl-content {
  grid-column: 2;
}
.tl-item:nth-child(3) .tl-dot,
.tl-item:nth-child(3) .tl-content {
  grid-column: 3;
}
.tl-item:nth-child(4) .tl-dot,
.tl-item:nth-child(4) .tl-content {
  grid-column: 4;
}
.tl-item:nth-child(5) .tl-dot,
.tl-item:nth-child(5) .tl-content {
  grid-column: 5;
}
.tl-item:nth-child(6) .tl-dot,
.tl-item:nth-child(6) .tl-content {
  grid-column: 6;
}
.tl-year {
  font-family: var(--eva-font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--secondary);
}
.tl-item h3 {
  font-size: 0.92rem;
  margin: 0.15rem 0 0.3rem;
}
.tl-item p {
  color: var(--eva-muted);
  font-size: 0.8rem;
  margin: 0;
}
.tl-continuing {
  grid-row: 2;
  grid-column: 7;
  margin-left: 0.5rem;
  white-space: nowrap;
  font-family: var(--eva-font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--secondary);
  letter-spacing: 0.08em;
}

/*==============================================
    Feature One
===============================================*/
.feature-one {
  position: relative;
  display: block;
  padding: 80px 0 0;
  counter-reset: count;
  z-index: 1;
}

.feature-one__single {
  position: relative;
  display: block;
  background-color: var(--eduvers-primary);
  margin-bottom: 30px;
  border-radius: var(--eduvers-bdr-radius);
  padding: 30px 30px 30px;
  overflow: hidden;
  transition: transform 0.8s;
}

.feature-one__single:hover {
  transform: translateY(-10px);
}

.feature-one__single:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: var(--secondary);
}

.feature-one__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100px;
  background-color: var(--secondary);
  margin-top: -30px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  z-index: 2;
  margin-left: auto;
}

.feature-one__icon span {
  position: relative;
  display: flex;
  font-size: 32px;
  color: #0d2944;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(var(--eduvers-primary-rgb), 0.4);
  border-radius: 50%;
  top: 5px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: 1;
}

.feature-one__icon span:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background-color: #0d2944;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52);
  z-index: -1;
}

.feature-one__single:hover .feature-one__icon span:after {
  transform: scaleX(1);
}

.feature-one__single:hover .feature-one__icon span {
  color: var(--white);
}

.feature-one__content {
  position: relative;
  display: block;
  background-color: #0d2944;
  padding: 30px 30px 30px;
  margin-top: -40px;
  border-radius: 5px;
  border: 1px solid rgba(var(--eduvers-black-rgb), 0.1);
  z-index: 1;
}

.feature-one__content-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: var(--eduvers-bdr-radius);
  z-index: -1;
}

.feature-one__sub-title {
  font-size: 16px;
  font-family: var(--eduvers-font-two);
  font-weight: 600;
  color: var(--white);
}

.feature-one__text {
  color: rgba(var(--eduvers-white-rgb), 0.8);
}

.feature-one__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 33px;
  margin-bottom: 5px;
color: #fff;
}

.feature-one__title a {
  color: var(--white);
}

.feature-one__title a:hover {
  color: var(--secondary);
}

.feature-one__read-more {
  position: absolute;
  bottom: 15px;
  right: 20px;
}

.feature-one__read-more a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--white);
}

.feature-one__read-more a:hover {
  color: var(--secondary);
}

.feature-one__read-more a span {
  font-size: 13px;
}

.feature-one__count {
  position: absolute;
  top: 22px;
  left: 30px;
  z-index: 2;
}

.feature-one__count::before {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  counter-increment: count 1;
  content: "0" counter(count);
  color: #0d2944;
  font-family: var(--eduvers-font-two);
}

.feature-one__count:after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: -45px;
  width: 40px;
  height: 1px;
  background-color: #0d2944;
}

/* ============================================================
   Case Study Detail Pages — reusable across all /case-study/*.html
   Pairs with Bootstrap utilities (card, badge, row, list-group…)
   ============================================================ */

.case-hero-img img {
  border-radius: 20px;
}

/* checklist-style bullets for top-level info lists */
.specialities-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.specialities-list > li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #e5e7eb;
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.6;
}
.specialities-list > li:last-child {
  border-bottom: none;
}
.specialities-list > li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.specialities-list > li strong {
  color: #111;
}

/* tech stack pills */
.case-tech-badges .badge {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
}

/* Model / View / Controller style mini cards */
.case-mini-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 22px;
  height: 100%;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.case-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}
.case-mini-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #111 0%, var(--secondary) 130%);
  margin-bottom: 14px;
}

/* grouping card for Application Features / Implementation Details */
.case-feature {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 28px;
}
.case-feature h6 {
  font-weight: 700;
  color: #111;
}
.case-feature > ul.specialities-list > li {
  border-bottom: none;
  padding: 6px 0;
  display: block;
}
.case-feature > ul.specialities-list > li::before {
  display: none;
}

.case-sub-feature {
  background: #fff;
  border: 1px solid #ececec;
  border-left: 3px solid var(--secondary);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.case-sub-feature:last-child {
  margin-bottom: 0;
}
.case-sub-feature > p {
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.case-sub-feature ul {
  margin: 0;
  padding-left: 18px;
  color: #6b7280;
  font-size: 13.5px;
  line-height: 1.7;
}

/* code blocks */
.case-feature pre,
.case-code {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.7;
  margin: 14px 0 0;
}
.case-feature pre code {
  background: none;
  color: inherit;
  padding: 0;
  white-space: pre;
}

/* ===== Books page — book cards ===== */
.book-card.sidebar-widget {
  padding: 10px 10px 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.book-card.sidebar-widget:hover {
  border-color: var(--secondary, #ff3c38);
  box-shadow: 0 16px 30px rgba(255, 60, 56, 0.16);
}
.book-cover-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f8f8;
}
.book-cover-frame a {
  display: block;
}
.book-cover-frame img {
  width: 100%;
  transition: transform 0.45s ease;
}
.book-card:hover .book-cover-frame img {
  transform: scale(1.02);
}
.zoom-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.book-card:hover .zoom-icon {
  opacity: 1;
}
.buyamazon-btn {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.book-price-badge {
  background: linear-gradient(135deg, #ff3c38, #f8b102);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.buyamazon-btn a {
  line-height: 0;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.buyamazon-btn a:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.buyamazon-btn img {
  max-height: 26px;
}
.repobtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid #111;
  color: #111;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.repobtn:hover {
  background: #111;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ===== College-tabs (best-engg-colleges page) ===== */
.college-tabs .nav-tabs {
  border: 0;
  gap: 10px;
  flex-wrap: wrap;
}
.college-tabs .nav-tabs .nav-link {
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
  color: #111;
  background: #f5f5f5;
  transition: all 0.2s ease;
}
.college-tabs .nav-tabs .nav-link:hover {
  background: #eee;
}
.college-tabs .nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #ff3c38, #f8b102);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 60, 56, 0.25);
}
.college-tabs .college-table .title {
  font-weight: 700;
}
.college-tabs .table-responsive {
  overflow-x: auto;
}
.college-tabs .table {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0;
}
.college-tabs .table th,
.college-tabs .table td {
  white-space: normal;
  color: var(-- black) !important;
}

@media (max-width: 420px) {
  .college-tabs .table th,
  .college-tabs .table td {
    font-size: 12px;
    padding: 8px 6px;
  }
}
.college-tabs .thead-dark th {
  border: 1px solid #444242;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.college-tabs tbody tr {
  transition: background 0.2s ease;
}
.college-tabs tbody tr:hover {
  background: #fff5f4 !important;
}
.college-tabs td:nth-child(5) {
  font-weight: 700;
  /* color: #ed1143; */
}
.college-tabs td a[target="_blank"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid #111;
  color: #111 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.college-tabs td a[target="_blank"]::after {
  content: "\f35d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
}
.college-tabs td a[target="_blank"]:hover {
  background: #111;
  color: #fff !important;
}
.college-tabs .content-curriculum h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}
.college-tabs .content-curriculum ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.college-tabs .content-curriculum ul li {
  background: #f5f5f5;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  transition: all 0.2s ease;
}
.college-tabs .content-curriculum ul li:hover {
  background: linear-gradient(135deg, #ff3c38, #f8b102);
  color: #fff;
}

/* conclusion callout */
.case-conclusion {
  background: linear-gradient(135deg, #111 0%, #2a0e0e 100%);
  border-radius: 20px;
  padding: 40px;
  color: #fff;
}
.profile-content {
  text-align: justify;
}

/* ===== Career page banner extras ===== */
.banner-usp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 28px;
  padding: 0;
}
.banner-usp-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.banner-usp-list li i {
  color: #ff3c38;
  font-size: 16px;
}
.banner-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.banner-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3c38, #ed1143);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.banner-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 60, 56, 0.25);
  color: #fff;
}
.banner-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid #111;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.banner-cta-secondary:hover {
  background: #111;
  color: #fff;
}
/* =========================
   Counter Section
========================= */

.counterup-area-2 {
  position: relative;
  padding: 80px 0;
  background-color: #f0f4f5;
}

/* =========================
   Counter Grid
========================= */

.counterup-area-2 .counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: transparent;
  border-radius: 10px;
  padding: 70px;
  position: relative;
  z-index: 0;
}

.counterup-area-2 .counter-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  box-shadow: 0px 30px 70px 0px rgba(16, 12, 47, 0.08);
  border-radius: 10px;
}

/* =========================
   Counter Item
========================= */

.counterup-area-2 .counter-item {
  position: relative;
  text-align: center;
  padding: 35px 30px;
  min-height: 170px;
}

/* Vertical divider */

.counterup-area-2 .counter-item:nth-child(odd) {
  border-right: 1px solid #e1e1e1;
}

/* Horizontal divider */

.counterup-area-2 .counter-item:nth-child(-n + 2) {
  border-bottom: 1px solid #e1e1e1;
}

/* =========================
   Number
========================= */

.counterup-area-2 .counter-number {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  font-family: var(--font-primary);
}

.counterup-area-2 .counter-number span {
  font-weight: 800;
}

/* =========================
   Colors
========================= */

.counterup-area-2 .counter-number.primary-color {
  color: #00b89c;
}

.counterup-area-2 .counter-number.secondary-color {
  color: #ff3b57;
}

.counterup-area-2 .counter-number.extra05-color {
  color: #ff8a00;
}

.counterup-area-2 .counter-number.extra02-color {
  color: #8950f5;
}

/* =========================
   Title
========================= */

.counterup-area-2 .counter-item h6 {
  margin: 0 0 5px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  color: #222;
}

/* =========================
   Description
========================= */

.counterup-area-2 .counter-item p {
  max-width: 260px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.counterup-area-2 .counter-grid .shape-group {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.counterup-area-2 .counter-grid .shape-group li {
  position: absolute;
  z-index: -1;
}

.rotateit {
  animation: rotateShape 12s linear infinite;
}
@keyframes rotateShape {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.counterup-area-2 .counter-grid .shape-group li.shape-1 {
  top: -80px;
  left: -90px;
}

.counterup-area-2 .counter-grid .shape-group li.shape-2 {
  top: -70px;
  left: -58px;
}

.counterup-area-2 .counter-grid .shape-group li.shape-3 {
  bottom: -60px;
  right: -70px;
}

.counterup-area-2 .counter-grid .shape-group li.shape-4 {
  bottom: -63px;
  right: 30px;
}
.commtext3 {
  /* display: flex; */
  margin-bottom: 20px;
}

.roller {
  height: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 600;
  color: #000;
}

#rolltext {
  position: absolute;
  top: 0;
  left: 0;
  animation: slideUp 15s infinite;
}

@keyframes slideUp {
  0%,
  7% {
    transform: translateY(0);
  }

  10%,
  17% {
    transform: translateY(-2.5rem);
  }

  20%,
  27% {
    transform: translateY(-5rem);
  }

  30%,
  37% {
    transform: translateY(-7.5rem);
  }

  40%,
  47% {
    transform: translateY(-10rem);
  }

  50%,
  57% {
    transform: translateY(-12.5rem);
  }

  60%,
  67% {
    transform: translateY(-15rem);
  }

  70%,
  77% {
    transform: translateY(-17.5rem);
  }

  80%,
  87% {
    transform: translateY(-20rem);
  }

  90%,
  97% {
    transform: translateY(-22.5rem);
  }

  100% {
    transform: translateY(0);
  }
}
.rate-box {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.stars {
  font-size: 1.2rem; 
  cursor: pointer;
  display: inline-block;
}

.stars i {
  margin: 0 5px;
  transition: all 0.2s ease;
}

.stars i:hover {
  transform: scale(1.2);
}

.stars i.active {
  color: #ffc107;
}

.stars i.hover {
  color: #ffdb70;
}
#whatsappBtn svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
  margin-right: 2px;
  flex-shrink: 0;
}
.sp-box {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 20px;
  margin: 0 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.ptr-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ptr-img img {
  height: 240px;
}

/*Scrool Up*/
#scrollup {
  width: 45px;
  height: 45px;
  position: fixed;
  bottom: 10px;
  right: 0px;
  overflow: hidden;
  z-index: 99;
}

.scroll-to-top {
  width: 34px;
  height: 34px;
  text-align: center;
  background-color: rgb(241 7 7);
  font-size: 18px;
  padding: 0;
  line-height: 34px;
  color: #fff;
  border-radius: 5px;
  border: none;
  outline: none;
  text-decoration: none;
  transform: translateY(150%);
  transition: all 0.3s ease-in-out;
}

#scrollup.show {
  opacity: 1;
}

#scrollup.show .scroll-to-top {
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

.scroll-to-top:hover {
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}

#sy-whatshelp {
  right: 7px;
  bottom: 65px;
  position: fixed;
  z-index: 998;
  /* display: none; */
}

#sy-whatshelp a {
  position: relative;
}

#sy-whatshelp a.sywh-open-services {
  background-color: #129bf4;
  color: #fff;
  line-height: 38px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-size: 20px;
  width: 40px;
  height: 40px;
  text-align: center;
  box-shadow: 2px 2px 8px -3px #000;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  display: inline-block;
}

#sy-whatshelp a.sywh-open-services i {
  line-height: 40px;
}

.view-syllabus {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #464444;
  letter-spacing: 0.3px;
}
.view-syllabus:hover {
   color: #0d6efd;
}

.slick-dots li button:before {
  display: none;
}
.entrepreneurimg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Awards & Recognition badges (about.html) — uniform size/crop so
   differently-sized source images render as matching circles. */
.certificate-img img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Sitemap page (sitemap.html) — scoped to #sitemapGrid so nothing else on
   the site is affected. */
#sitemapGrid .sitemap-card {
  border: 1px solid var(--gray-100, #e7e7e7);
  border-radius: 16px;
  border-top: 3px solid var(--accent, #ff3c38);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
#sitemapGrid .sitemap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(17, 17, 17, 0.08);
}
#sitemapGrid .sitemap-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#sitemapGrid .sitemap-list li {
  border-bottom: 1px dashed #eee;
}
#sitemapGrid .sitemap-list li:last-child {
  border-bottom: none;
}
#sitemapGrid .sitemap-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-radius: 8px;
  color: #495057;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    padding-left 0.15s ease;
}
#sitemapGrid .sitemap-link:hover {
  background: rgba(0, 0, 0, 0.035);
  color: var(--accent, #ff3c38);
  padding-left: 9px;
}
#sitemapGrid .sitemap-link i {
  font-size: 11px;
  color: var(--accent, #ff3c38);
  opacity: 0.6;
  flex-shrink: 0;
}
#sitemapSearch {
  border-radius: 0 12px 12px 0;
}
.input-group-lg .input-group-text {
  border-radius: 12px 0 0 12px;
}

/* Respect user's OS-level reduced-motion preference for AOS scroll animations */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

#sy-whatshelp{
  display:none;
}
.client-slider img{
width:124px;
}

/* ===== Program paths: Courses vs Internships vs Placement Programs =====
   Homepage section + training-vs-internships-vs-placement.html.
   Card look mirrors .course-item (border, radius, shadow). */
.program-path-section {
  padding-top: 40px;
  padding-bottom: 60px;
  background: var(--white);
}

.program-path-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.program-path-steps li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.program-path-steps li + li::before {
  content: "\2192";
  color: var(--secondary);
  font-weight: 700;
}
.program-path-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2);
}
.program-path-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.program-path-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--light-900);
  color: var(--secondary);
  font-size: 20px;
}
.program-path-card__step {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-700);
}
.program-path-card__title {
  margin: 0;
  font-size: 20px;
}
.program-path-card__meta {
  margin: 0 0 24px;
}
.program-path-card__meta dt {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}
.program-path-card__meta dd {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--gray-600);
}
.program-path-card__meta dd:last-child {
  margin-bottom: 0;
}
.program-path-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.program-path-note { 
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--gray-600);
}
.program-path-note a {
  color: var(--gray-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--secondary);
  text-underline-offset: 3px;
}
/* explainer page: detail blocks and course link lists */
.program-path-detail {
  padding-top: 48px;
  scroll-margin-top: 90px;
}
.program-path-detail h2 {
  margin-bottom: 12px;
}
.program-path-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.program-path-links a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--gray-100);
  border-radius: 50px;
  background: var(--white);
  font-size: 14px;
  color: var(--gray-900);
}
.program-path-links a:hover,
.program-path-links a:focus {
  border-color: var(--secondary);
  color: var(--secondary);
}
/* explainer page: "Which one should I choose?" CTA panel (dark, like the site's CTA blocks) */
.program-path-choose {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: 16px;
  background: linear-gradient(135deg, #111118 0%, #1d1d29 100%);
  color: rgba(255, 255, 255, 0.82);
}
.program-path-choose::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 60, 56, 0.35) 0%, rgba(255, 60, 56, 0) 70%);
  pointer-events: none;
}
.program-path-choose > * {
  position: relative;
}
.program-path-choose h2 {
  margin-bottom: 24px;
  color: var(--white);
}
.program-path-choose__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.program-path-choose__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
}
.program-path-choose__item strong {
  font-size: 16px;
  color: var(--white);
}
.program-path-choose__item a {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--secondary);
  text-underline-offset: 3px;
}
.program-path-choose__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 60, 56, 0.15);
  color: var(--secondary);
  font-size: 17px;
}
.program-path-choose__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.program-path-choose__cta p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}
.jm-lineheight{
line-height: 1.6;
}

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