body {
  font-family: "Poppins", sans-serif;
  color: #0c0936;
}

/* --- TOP INFO BAR --- */
.top-bar {
  background-color: #8d1f1f;
  color: #fff;
  font-size: 14px;
  padding: 6px 0;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
}

.top-bar i {
  color: #fff;
  margin-right: 6px;
}

.top-bar .social-icons i {
  color: #fff;
  margin-left: 10px;
  transition: color 0.3s;
  cursor: pointer;
}

.top-bar .social-icons i:hover {
  color: #0096ff;
}

/* --- MAIN NAVBAR --- */
.navbar {
  background: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.navbar-brand img {
  height: 48px;
  transition: transform 0.3s ease;
}

.navbar-brand:hover img {
  transform: scale(1.05);
}

.navbar-nav .nav-link {
  color: #0c0936;
  font-weight: 500;
  margin: 0 10px;
  transition: color 0.3s, transform 0.2s;
}

.navbar-nav .nav-link:hover {
  color: #7b1f1f;
  transform: translateY(-1px);
}

.login-btn {
  background-color: #b71c1c;
  color: #fff !important;
  border-radius: 30px;
  padding: 8px 24px;
  font-weight: 500;
  transition: background 0.3s, box-shadow 0.3s;
}

.login-btn:hover {
  background-color: #7b1f1f;
  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
}

.navbar-toggler {
  border: none;
  font-size: 1.4rem;
  color: #0c0936;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Hide top bar on small devices */
@media (max-width: 992px) {
  .top-bar {
    display: none;
  }
}

/* --- OFFCANVAS MENU --- */
.offcanvas-end {
  width: 260px;
  background-color: #ffffff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.offcanvas-header {
  border-bottom: 1px solid #eee;
}

.offcanvas-body .nav-link {
  color: #0c0936;
  font-weight: 500;
  margin: 8px 0;
  transition: color 0.3s;
}

.offcanvas-body .nav-link:hover {
  color: #7b1f1f;
}

/* Sticky effect */
.navbar.scrolled {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  background: #ffffffee;
  backdrop-filter: blur(6px);
}


/* welcome video */

.welcome-section {
  background: linear-gradient(180deg, #5a0f2f, #3d0c2a);
  color: #fff;
  text-align: center;
}

.welcome-section iframe {
  border: none;
}

.welcome-section .ratio {
  max-width: 100%;
  margin: 0 auto;

}

/* Overlay text */
.overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px;
}

.overlay h2,
.overlay p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
  .welcome-video-section {
    height: 45vh;
    /* slightly shorter on small screens */
    min-height: 300px;
  }

  .overlay h2 {
    font-size: 1.6rem;
  }

  .overlay p {
    font-size: 0.75rem;
  }
}

/* welcome video */


/* category css */

.category-card {
  aspect-ratio: 1 / 1;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-card img {
  transition: transform 0.4s ease;
}

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

.category-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.3s ease;
}

.category-card:hover .overlay {
  background: rgba(0, 0, 0, 0.65);
}

.category-card h2 {
  font-size: 4rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Nav Pill custom look */
.nav-pills .nav-link.active {
  background: #b71c1c;
  color: #fff !important;
  font-size: 1.25rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .category-card h2 {
    font-size: 2.5rem;
  }


  .mhcc {
    position: relative;
    top: -20px;
  }

}

/* category css */


/* home youtube video swiper */

/* Section Title */
.section-title {
  font-size: 20px;
  font-weight: bold;
  padding: 16px;
  background-color: white;
  margin-bottom: 8px;
}

/* Video Carousel */
.video-carousel {
  padding: 0 16px 16px;
  background-color: white;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.thumbnail {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  background-color: #e5e5e5;
  overflow: hidden;
  cursor: pointer;
}

.thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumbnail:hover .play-button {
  opacity: 1;
}

.duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 12px;
  text-align: left;
}

.video-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.channel-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.channel-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #e5e5e5;
}

.channel-name {
  font-size: 14px;
  color: #606060;
}

.video-stats {
  font-size: 14px;
  color: #606060;
}

/* Shorts Section */
.shorts-section {
  padding: 6px;
  background-color: white;
  margin-top: 8px;
  overflow: hidden;
}

.shorts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.shorts-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #FF0000, #FF6B6B);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.shorts-title {
  font-size: 20px;
  font-weight: bold;
}

/* Shorts Swiper */
.shorts-swiper {
  padding: 0 20px;
}

.shorts-swiper .swiper-slide {
  width: 48%;
  margin-right: 12px;
}

.short-item {
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.short-thumbnail {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 177.78%;
  /* 9:16 aspect ratio */
  background-color: #e5e5e5;
  overflow: hidden;
}

.short-thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.short-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.short-thumbnail:hover .short-play-button {
  opacity: 1;
}

.short-title {
  margin-top: 8px;
  font-weight: 600;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  padding: 0 8px;
}

.short-views {
  font-size: 12px;
  color: #606060;
  margin-top: 4px;
  padding: 0 8px 8px;
}

/* Video Player Styles */
.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: none;
}

.video-player.active {
  display: block;
}

.short-video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: none;
}

.short-video-player.active {
  display: block;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-player:hover .video-controls,
.short-video-player:hover .video-controls {
  opacity: 1;
}

.control-button {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

.volume-slider {
  width: 80px;
}

/* Swiper Customization */
.exploreSwiper .swiper-slide {
  width: 85%;
}

.exploreSwiper .swiper-slide:first-child {
  margin-left: 0;
}

/* Responsive */
@media (min-width: 768px) {
  .exploreSwiper .swiper-slide {
    width: 40%;
  }

  .shorts-swiper .swiper-slide {
    width: 32%;
  }
}

@media (min-width: 1024px) {
  .exploreSwiper .swiper-slide {
    width: 30%;
  }

  .shorts-swiper .swiper-slide {
    width: 24%;
  }
}

/* instructor section */

.profile-section {
  width: 100%;
  padding: 60px 20px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.profile-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 160px;
  max-width: 1100px;
  flex-wrap: wrap;
}

.profile-image {
  position: relative;
  width: 300px;
  height: 300px;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}

.image-bg {
  position: absolute;
  background: #210b0b;
  width: 80px;
  height: 80px;
  z-index: 1;
}

.image-bg.top {
  top: -20px;
  left: -20px;
}

.image-bg.bottom {
  bottom: -20px;
  right: -20px;
}

.profile-content {
  max-width: 500px;
  text-align: center;
}

.profile-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #1a1a1a;
}

.profile-content p {
  font-size: 1.1rem;
  color: #333;
  margin: 5px 0;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.divider span {
  display: block;
  height: 3px;
  width: 50px;
  background: #4b1b0b;
  border-radius: 2px;
}

.divider .dot {
  width: 8px;
  height: 8px;
  background: #4b1b0b;
  border-radius: 50%;
  margin: 0 10px;
}

.profile-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.dotted-line {
  width: 100%;
  border-bottom: 2px dotted #000;
  margin: 10px auto 20px;
  max-width: 400px;
}

.profile-content .small {
  font-size: 1rem;
  color: #333;
}

/* Responsive */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .profile-image {
    width: 250px;
    height: 250px;
  }

  .profile-content h3 {
    font-size: 1.5rem;
  }

  .profile-content p,
  .profile-content h4 {
    font-size: 1rem;
  }
}

/* achivements */

/* Background & layout */
.records-section {
  background: radial-gradient(circle at center, #430018 0%, #2a0010 100%);
  padding: 20px 20px;
  text-align: center;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

/* Header text */
.records-header p {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 400;
}

.records-header h2 {
  display: inline-block;
  background: #651020;
  border: 1px solid #e1a84e;
  padding: 10px 40px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 50px;
}

/* Grid layout */
.records-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Record cards */
.record-card {
  background: #fff;
  border: 6px solid transparent;
  border-image: linear-gradient(45deg, #b68b2a, #f3d88f, #b68b2a) 1;
  padding: 15px 10px 10px;
  text-align: center;
  width: 240px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.record-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.record-card img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  margin-bottom: 10px;
}

.record-card p {
  color: #0a2441;
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 900px) {
  .records-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .record-card {
    width: 200px;
  }
}

@media (max-width: 600px) {
  .records-header h2 {
    font-size: 1.1rem;
    padding: 8px 25px;
  }

  .records-header p {
    font-size: 1rem;
  }

  .record-card {
    width: 160px;
    padding: 10px;
  }

  .record-card p {
    font-size: 0.9rem;
  }
}


/* social section */

/* Section Wrapper */
.vb-social-wrapper {
  background: radial-gradient(circle at center, #430018 0%, #2a0010 100%);
  padding: 20px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container */
.vb-social-box {
  background: #fff8f4;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 60px 80px;
  width: 90%;
  max-width: 1200px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

/* Left Info Section */
.vb-social-info {
  flex: 1 1 50%;
  text-align: center;
  font-family: "Poppins", sans-serif;
  color: #000;
}

.vb-title {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.vb-youtube-label {
  display: inline-flex;
  align-items: center;
  background: #b30000;
  padding: 10px 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.vb-youtube-label img {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

.vb-subtitle {
  font-size: 1.4rem;
  margin-top: 10px;
  font-weight: 500;
}

.vb-highlight {
  color: #a01515;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 10px 0 20px;
}

.vb-divider {
  width: 100px;
  height: 2px;
  background: #000;
  margin: 15px auto 35px;
}

.vb-followers-badge {
  display: inline-block;
  background: #c96a1b;
  padding: 12px 35px;
  border-radius: 30px;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 15px;
}

.vb-followers-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 5px;
}

.vb-followers-subtext {
  font-size: 1rem;
  color: #555;
}

/* Right Social Icons */
.vb-social-icons {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-gap: 25px;
  flex: 1 1 40%;
  justify-content: center;
}

.vb-icon-card {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vb-icon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}

.vb-icon-card img {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  object-fit: cover;
}

/* Responsive Design */
@media (max-width: 900px) {
  .vb-social-box {
    flex-direction: column;
    text-align: center;
    padding: 50px 25px;
  }

  .vb-social-info {
    margin-bottom: 40px;
  }

  .vb-social-icons {
    grid-template-columns: repeat(2, 80px);
    grid-gap: 20px;
  }

  .vb-icon-card {
    width: 80px;
    height: 80px;
  }

  .vb-icon-card img {
    width: 40px;
    height: 40px;
  }

  .vb-title {
    font-size: 2.2rem;
  }

  .vb-highlight {
    font-size: 1.3rem;
  }
}

@media (max-width: 600px) {
  .vb-social-icons {
    grid-template-columns: repeat(2, 70px);
    grid-gap: 15px;
  }

  .vb-icon-card {
    width: 70px;
    height: 70px;
  }

  .vb-icon-card img {
    width: 55px;
    height: 55px;
  }

  .vb-followers-badge {
    font-size: 1rem;
    padding: 8px 20px;
  }

  .vb-title {
    font-size: 1.8rem;
  }
}

/* Right Social Icons */
.vb-social-icons {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-gap: 25px;
  flex: 1 1 40%;
  justify-content: center;
  perspective: 900px;
  /* enables 3D depth for children */
}

.vb-icon-card img {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  object-fit: cover;
  transform: translateZ(25px) rotateX(3deg) rotateY(-3deg);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.45),
    /* deeper base shadow */
    0 12px 25px rgba(0, 0, 0, 0.3),
    /* outer depth shadow */
    inset 0 0 8px rgba(255, 255, 255, 0.4),
    /* inner reflection highlight */
    0 -3px 10px rgba(255, 255, 255, 0.35);
  /* top light reflection */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
  transition: all 0.45s ease;
  filter: brightness(1.05) contrast(1.05);
}

/* Hover effect for full 3D "pop" */
.vb-icon-card:hover img {
  transform: scale(1.15) translateZ(40px) rotateX(8deg) rotateY(-8deg);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.55),
    0 20px 35px rgba(0, 0, 0, 0.4),
    inset 0 0 12px rgba(255, 255, 255, 0.4),
    0 -5px 15px rgba(255, 255, 255, 0.45);
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}


/* home form */

/* ===== Section Background ===== */
.formx-section {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f1f4f8, #e2e8ef);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  padding: 60px 20px;
}

/* ===== Container ===== */
.formx-container {
  width: 100%;
  max-width: 1400px;
  background: #ffffff;
  border-radius: 20px;
  padding: 60px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ===== Title ===== */
.formx-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 40px;
  color: #1e293b;
}

.formx-title span {
  color: #b71c1c;
  /* Sky blue */
}

/* ===== Form Layout ===== */
.formx-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.formx-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.formx-field {
  position: relative;
  flex: 1;
}

.formx-field.full {
  flex: 1 1 100%;
}

/* ===== Inputs ===== */
.formx-field input,
.formx-whatsapp-row input,
.formx-whatsapp-row select,
.formx-other input {
  width: 100%;
  padding: 15px 18px;
  font-size: 1rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #f9fafb;
  color: #1e293b;
  transition: all 0.3s ease;
}

.formx-field input:focus,
.formx-whatsapp-row input:focus,
.formx-whatsapp-row select:focus,
.formx-other input:focus {
  border-color: #7b1f1f;
  outline: none;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.25);
}

/* ===== Floating Labels ===== */
.formx-field label {
  position: absolute;
  top: 15px;
  left: 18px;
  color: #b71c1c;
  font-size: 1rem;
  transition: all 0.2s ease;
  pointer-events: none;
  background: #fff;
  padding: 0 4px;
}

.formx-field input:focus+label,
.formx-field input:not(:placeholder-shown)+label {
  top: -10px;
  left: 14px;
  font-size: 0.8rem;
  color: #7b1f1f;
}

/* ===== Country + WhatsApp Inline ===== */
.formx-whatsapp-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  background: #fff;
}

/* Dropdown on the left */
.formx-whatsapp-wrapper select {
  border: none;
  background-color: transparent;
  padding: 8px 12px;
  font-size: 16px;
  color: #7b1f1f;
  outline: none;
  cursor: pointer;
  appearance: none;
  border-right: 1px solid #ced4da;
}

/* Input fills the rest of the space */
.formx-whatsapp-wrapper input {
  flex: 1;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
  color: #7b1f1f;
  outline: none;
}

/* Optional hover/focus effect */
.formx-whatsapp-wrapper:focus-within {
  border-color: #7b1f1f;
  box-shadow: #b71c1c, #7b1f1f;
}

/* Mobile tweaks */
@media (max-width: 576px) {
  .formx-whatsapp-wrapper select {
    font-size: 14px;
    padding: 8px 10px;
  }

  .formx-whatsapp-wrapper input {
    font-size: 14px;
    padding: 15px 18px;
  }
}

/* ===== Radio & Checkbox Groups ===== */
.formx-radio-group input[type="radio"],
.formx-radio-group input[type="checkbox"] {
  accent-color: #b71c1c;
  margin-right: 10px;
  transform: scale(1.3);
  /* Increased size */
  cursor: pointer;
}

/* Optional: make label text align nicely */
.formx-radio-group label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: 6px;
}

/* Ensure checkboxes look consistent on mobile */
@media (max-width: 576px) {

  .formx-radio-group input[type="radio"],
  .formx-radio-group input[type="checkbox"] {
    transform: scale(1.7);
  }
}


.formx-other input {
  margin-top: 10px;
}

/* ===== 3D Button ===== */


/* ===== Responsive ===== */
@media (max-width: 992px) {
  .formx-row {
    flex-direction: column;
  }

  .formx-btn {
    width: 100%;
  }

  .formx-container {
    padding: 40px 25px;
  }
}


/* language filter button section css */
/* 🌿 Section Background */
.language-toggle-section {
  background-color: #f8f9fa;
}

/* 💎 Custom Sky Blue Buttons */
.btn-language {
  background-color: transparent;
  border: 1.5px solid #b71c1c;
  color: #b71c1c;
  transition: all 0.3s ease;
}

/* ✅ Active and Hover State */
.btn-check:checked+.btn-language,
.btn-language:hover {
  background-color: #b71c1c;
  color: #fff;
  border-color: #b71c1c;
}

/* 📱 Responsive */
@media (max-width: 576px) {
  .language-toggle-section .col-4 {
    flex: 1 0 33%;
    max-width: 33%;
    padding: 0 5px;
  }

  .btn-language {
    font-size: 0.85rem;
    padding: 0.45rem 0;
  }
}

/* language filter button section css */

/* course css */

.course-scroll {
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  padding-right: 10px;
}

.course-card {
  width: 270px;
  scroll-snap-align: start;
}

.course-scroll::-webkit-scrollbar {
  height: 6px;
}

.course-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.course-showcase a {
  text-decoration: none;
}

.course-card img {
  height: 160px;
  object-fit: cover;
}

@media (max-width: 576px) {
  .course-card {
    width: 80%;
  }
}

.inr-symbol {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  opacity: 0.9;
  font-size: 1.1em;
}


/* course css */
/* footer */

.footerx {
  background: linear-gradient(180deg, #0b0b1f, #141436);
  font-family: 'Poppins', sans-serif;
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
}

.footerx-title {
  color: #fff;
  font-weight: 600;
  margin-bottom: 15px;
  position: relative;
}

.footerx-title::after {
  content: "";
  display: block;
  width: 45px;
  height: 2px;
  background: #38bdf8;
  margin: 8px auto 0;
  border-radius: 2px;
}

@media (min-width: 768px) {
  .footerx-title::after {
    margin: 8px 0 0;
  }
}

.footerx a {
  color: #38bdf8;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.footerx a:hover {
  color: #fff;
  transform: translateX(5px);
}

.text-sky {
  color: #38bdf8 !important;
}

.footerx-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #1f1f3b;
  color: #38bdf8;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  transition: 0.3s;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.footerx-social a:hover {
  background: #38bdf8;
  color: #0b0b1f;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.8);
}

.btn-sky {
  background: transparent;
  border: 1px solid #38bdf8;
  color: #38bdf8;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-sky:hover {
  background: #38bdf8;
  color: #0b0b1f;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}

.footerx-top-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #38bdf8;
  color: #0b0b1f;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
  transition: all 0.3s ease;
  z-index: 100;
}

.footerx-top-btn:hover {
  background: #0b0b1f;
  color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.9);
}

.footerx hr {
  border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
  .footerx {
    text-align: center;
  }

  .footerx-social a {
    margin: 5px;
  }

  .footerx-title::after {
    margin-left: auto;
    margin-right: auto;
  }
}

/* breadcrum */

.breadcrumb-container {
  background: linear-gradient(90deg, #f9fafb, #f3f4f6);
  border: 1px solid #e5e7eb;
  border-radius: 50px;
  padding: 6px 16px;
  display: flex;
  justify-content: flex-start;
  /* Left align */
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.breadcrumb-container::-webkit-scrollbar {
  display: none;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  color: #adb5bd;
  padding: 0 8px;
  font-weight: 500;
}

.breadcrumb-item a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: #0d6efd;
}

.breadcrumb-item.active {
  color: #212529;
  font-weight: 600;
}

/* health banner */

/* ✅ Main Section */
.health-banner {
  height: 50vh;
  width: 100%;
  border-bottom: 1px solid #d4edda;
  font-size: 0.9rem;
}

/* ✅ Background Image Styling */
.banner-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* same as background-size: cover */
  object-position: top center;
  /* show top part of image */
  z-index: 1;
  filter: brightness(70%);
  /* darken slightly for text contrast */
}

/* ✅ Red Icon Filter */
.red-icon {
  filter: brightness(0) saturate(100%) invert(14%) sepia(98%) saturate(7434%) hue-rotate(357deg) brightness(97%) contrast(105%);
  z-index: 2;
}

/* ✅ Button Hover */
.health-banner a.btn {
  font-size: 0.8rem;
  transition: all 0.2s ease-in-out;
}

.health-banner a.btn:hover {
  background-color: #157347;
}

/* ✅ Responsive */
@media (max-width: 576px) {
  .health-banner .container-fluid {
    flex-direction: column;
    text-align: center;
  }

  .health-banner .cta-btn {
    margin-top: 14px;
  }
}

/* course details  page */
.what-you-get {
  background-color: #2b0b0c;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 20px;
  top: 65px;
  position: relative;
}

.what-you-get .top-img {
  width: 150px;
  margin-top: -116px;
}

.what-you-get h2 {
  background: linear-gradient(to bottom, #3b0f10, #2b0b0c);
  padding: 20px 0;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin-bottom: 0;
}

.what-you-get .feature-image {
  width: 100%;
  max-width: 320px;
  margin: 20px auto;
  display: block;
  border-radius: 10px;
}

.what-you-get .number-box {
  background: #3b1a14;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 10px auto;
  border-radius: 10px;
}

.what-you-get p.subtitle {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 5px;
}

.what-you-get .author {
  color: #c6c6c6;
  font-size: 0.9rem;
  margin-bottom: 30px;
}

/* Frameworks Styling */
.framework-section {
  background: #2b0b0c;
  text-align: left;
  color: #ffb57f;
  margin: 20px 0;
}

.framework-section h4 {
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 30px;
  margin-bottom: 8px;
  color: #ff8b45;
}

.framework-section hr {
  border-top: 2px solid #4a2417;
  width: 80px;
  margin-left: 0;
}

.framework-section .framework-box {
  background: #fff8f1;
  color: #2b0b0c;
  border-radius: 15px;
  padding: 15px 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.framework-section .framework-box span {
  color: #ff7b32;
  font-size: 1.1rem;
  margin-right: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .what-you-get h2 {
    font-size: 1.3rem;
  }

  .framework-section .framework-box {
    font-size: 0.9rem;
  }
}

/* mypurchase welcome card section */

/* Section spacing */
.debowelcome-section {
  margin-top: 35px;
}

/* Card styling */
.debowelcome-card {
  background: linear-gradient(160deg, #b71c1c, #7b1f1f);
  border-radius: 15px;
  overflow: visible;
  position: relative;
  max-width: 100%;
}

/* Image styling */
.debowelcome-image img {
  max-height: 180px;
  position: relative;
  top: -40px;
}

/* Text styling */
.debowelcome-text h3,
.debowelcome-text p {
  color: #ffffff;
}

.debowelcome-text h3 {
  font-size: 2rem;
}

.debowelcome-text p {
  font-size: 1rem;
}

/* Larger desktop enhancements */
@media (min-width: 992px) {
  .debowelcome-card {
    padding: 3rem 4rem;
    max-width: 100%;
    border-radius: 25px;
    height: 250px;
  }

  .debowelcome-image img {
    max-height: 280px;
    top: -60px;
  }

  .debowelcome-text {
    text-align: right;
    /* ✅ Right-align text for desktop */
    margin-left: auto;
  }

  .debowelcome-text h3 {
    font-size: 2.5rem;
  }

  .debowelcome-text p {
    font-size: 1.2rem;
  }
}

/* Mobile view adjustments (keep your original behavior) */
@media (max-width: 576px) {
  .debowelcome-card {
    flex-direction: row !important;
    text-align: left !important;
    padding: 1rem;
    height: 150px;
  }

  .debowelcome-image img {
    max-height: 220px;
    top: -100px;
  }

  .debowelcome-text {
    padding-left: 0.75rem;
    position: relative;
    top: -53px;
    text-align: left !important;
  }

  .debowelcome-text h3 {
    font-size: 1.2rem;
  }

  .debowelcome-text p {
    font-size: 0.7rem;
  }
}

/* courses */

/* Section background */
.mypurchase-courses-section {
  background-color: #f5f5f5;
}

/* Card base */
.mypurchase-card {
  background: linear-gradient(160deg, #b71c1c, #7b1f1f);
  border: none;
  transition: all 0.3s ease;
 
  
}


.mypurchase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(183, 28, 28, 0.3);
}

/* Image */
.mypurchase-img-wrapper {
  background: #fff;
}

.mypurchase-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Content */
.mypurchase-content {
  background: transparent;
}

.mypurchase-badge {
  background-color: #ffb300;
  color: #222;
  font-weight: 600;
}

/* Progress bar */
.mypurchase-progressbar {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.2);
}

.mypurchase-progress {
  background-color: #ffb300;
}

.mypurchase-card h5 {
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .mypurchase-img-top {
    height: 150px;
  }
}

/* course details  page */


/* coursepre  progress section start*/

/* Section white background */
.debolevelup-section {
  background-color: #ffffff;
  margin-top: -80px;
}

/* Transparent Card */
.debolevelup-card {
  background: transparent;
  color: #000;
  max-width: 100%;
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  text-align: center;
}

/* Headings and text */
.debolevelup-title {
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: #000;
}

.debolevelup-subtitle {
  color: #555;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* Progress Bar */
.debowealth-wrapper {
  width: 100%;
}

.debowealth-progressbar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.debowealth-progress {
  background-color: #b71c1c;
  /* Brand red from logo */
  height: 8px;
  transition: width 0.5s ease-in-out;
}

.debowealth-percentage {
  font-size: 0.9rem;
  color: #000;
}

/* Button */
.debolevelup-btn {
  background-color: #b71c1c;
  /* Logo red */
  color: #fff;
  border: none;
  transition: 0.3s ease;
}

.debolevelup-btn:hover {
  background-color: #7b1f1f;
  /* Darker red tone */
  transform: scale(1.05);
}

/* Shadow subtle for modern look */
.debolevelup-card {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .debolevelup-card {
    padding: 1.5rem;
  }

  .debolevelup-title {
    font-size: 1.3rem;
  }

  .debolevelup-subtitle {
    font-size: 0.9rem;
  }

  .debowealth-progressbar {
    height: 6px;
  }

  .debolevelup-btn {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
  }
}

/* coursepre  progress section end*/


/* coursepre css */

  .wellness-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .wellness-levels-holder {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .wellness-level-panel {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .wellness-level-panel:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .wellness-level-head {
            padding: 22px;
            background-color: #8b1e1e;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .wellness-level-head:hover {
            background-color: #8b1e1e;
        }

        .wellness-level-label {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.3rem;
        }

        .wellness-level-arrow {
            transition: transform 0.4s ease;
        }

        .wellness-level-percent {
            font-weight: 600;
            font-size: 1.1rem;
            color: #fffa00b8;
        }

        .wellness-level-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease;
        }

        .wellness-level-panel.active .wellness-level-body {
            max-height: 2000px;
        }

        .wellness-level-panel.active .wellness-level-arrow {
            transform: rotate(180deg);
        }

        .wellness-courses-grid {
            padding: 24px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
        }

        .wellness-course-tile {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            display: flex;
            flex-direction: column;
        }

        .wellness-course-tile:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            border-color: #3498db;
        }

        .wellness-course-image {
            position: relative;
            height: 180px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            overflow: hidden;
        }

        .wellness-course-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.75), rgba(44, 62, 80, 0.75));
        }

        .wellness-image-text {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 12px;
        }

        .wellness-play-symbol {
            position: absolute;
            font-size: 3rem;
            opacity: 0.9;
            z-index: 2;
            transition: transform 0.3s ease;
        }

        .wellness-course-tile:hover .wellness-play-symbol {
            transform: scale(1.1);
        }

        .wellness-duration-tag {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, 0.8);
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 0.85rem;
            z-index: 2;
        }

        .wellness-course-info {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .wellness-course-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .wellness-course-name {
            color: #2c3e50;
            font-size: 1.2rem;
            line-height: 1.3;
            flex: 1;
            margin-right: 10px;
        }

        .wellness-course-state {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .wellness-state-locked {
            color: #e74c3c;
        }

        .wellness-state-unlocked {
            color: #f39c12;
        }

        .wellness-state-completed {
            color: #2ecc71;
        }

        .wellness-course-date {
            color: #95a5a6;
            font-size: 0.9rem;
            margin-bottom: 16px;
        }

        .wellness-progress-holder {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: auto;
        }

        .wellness-progress-bar {
            flex-grow: 1;
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .wellness-progress-fill {
            height: 100%;
            background: #909090;
            width: 0%;
            transition: width 0.5s ease;
            border-radius: 4px;
        }

        .wellness-progress-text {
            font-size: 0.85rem;
            color: #95a5a6;
            min-width: 45px;
            text-align: right;
        }

        /* Level Actions */
        .wellness-actions-bar {
            padding: 0 24px 24px;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .wellness-action-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 24px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            color: white;
            font-size: 1rem;
        }

        .wellness-exam-btn {
            background-color: #f39c12;
        }

        .wellness-exam-btn:hover {
            background-color: #e67e22;
            transform: translateY(-2px);
        }

        .wellness-download-btn {
            background-color: #2ecc71;
        }

        .wellness-download-btn:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }

        .wellness-action-btn:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }

        /* Video Player Modal */
        .wellness-modal-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .wellness-modal-window {
            background-color: #fff;
            border-radius: 12px;
            width: 95%;
            max-width: 1000px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            max-height: 95vh;
        }

        .wellness-modal-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 24px;
            background-color: #2c3e50;
            color: white;
        }

        .wellness-modal-title {
            margin: 0;
            font-size: 1.3rem;
        }

        .wellness-close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.6rem;
            cursor: pointer;
            transition: color 0.3s;
            padding: 5px;
            border-radius: 4px;
        }

        .wellness-close-btn:hover {
            color: #3498db;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .wellness-video-holder {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            flex-shrink: 0;
        }

        .wellness-video-frame {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Auto-completion notification */
        .wellness-auto-complete {
            background-color: #2ecc71;
            color: white;
            padding: 10px 16px;
            border-radius: 6px;
            margin: 10px 24px;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

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

        /* Assessment Modal */
        .wellness-assessment-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .wellness-assessment-window {
            background-color: #fff;
            border-radius: 12px;
            width: 95%;
            max-width: 700px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            max-height: 95vh;
        }

        .wellness-assessment-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 24px;
            background-color: #f39c12;
            color: white;
        }

        .wellness-assessment-title {
            margin: 0;
            font-size: 1.3rem;
        }

        .wellness-assessment-body {
            padding: 24px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .wellness-assessment-question {
            margin-bottom: 24px;
            padding-bottom: 18px;
            border-bottom: 1px solid #eee;
        }

        .wellness-assessment-question:last-child {
            border-bottom: none;
        }

        .wellness-question-text {
            margin-bottom: 16px;
            color: #2c3e50;
            font-size: 1.1rem;
        }

        .wellness-options-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .wellness-option-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            border-radius: 6px;
            transition: background-color 0.2s;
        }

        .wellness-option-item:hover {
            background-color: #f5f7fa;
        }

        .wellness-option-item input {
            margin: 0;
        }

        .wellness-assessment-footer {
            padding: 18px 24px;
            display: flex;
            justify-content: flex-end;
            background-color: #f8f9fa;
        }

        .wellness-submit-assessment {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .wellness-submit-assessment:hover {
            background-color: #27ae60;
        }

        /* Download Modal */
        .wellness-download-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .wellness-download-window {
            background-color: #fff;
            border-radius: 12px;
            width: 95%;
            max-width: 600px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            max-height: 95vh;
        }

        .wellness-download-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 24px;
            background-color: #2ecc71;
            color: white;
        }

        .wellness-download-title {
            margin: 0;
            font-size: 1.3rem;
        }

        .wellness-download-body {
            padding: 24px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .wellness-download-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #eee;
        }

        .wellness-download-item:last-child {
            border-bottom: none;
        }

        .wellness-download-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .wellness-download-icon {
            color: #2ecc71;
            font-size: 1.4rem;
        }

        .wellness-download-details {
            display: flex;
            flex-direction: column;
        }

        .wellness-download-name {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 4px;
        }

        .wellness-download-meta {
            font-size: 0.9rem;
            color: #95a5a6;
        }

        .wellness-download-small {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .wellness-download-small:hover {
            background-color: #2980b9;
        }

        /* Thumbnail Backgrounds */
        .wellness-image-nutrition {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><circle cx="150" cy="100" r="60" fill="%232ecc71"/><path d="M120 80 L150 50 L180 80 L160 110 L140 110 Z" fill="%23f39c12"/></svg>');
        }

        .wellness-image-exercise {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><circle cx="100" cy="100" r="40" fill="%23e74c3c"/><circle cx="200" cy="100" r="40" fill="%232ecc71"/><path d="M100 60 L200 140 M100 140 L200 60" stroke="white" stroke-width="8"/></svg>');
        }

        .wellness-image-mental {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><path d="M150 50 Q200 80 150 150 Q100 80 150 50" fill="%239b59b6"/><circle cx="130" cy="90" r="8" fill="white"/><circle cx="170" cy="90" r="8" fill="white"/><path d="M140 120 Q150 130 160 120" stroke="white" stroke-width="3" fill="none"/></svg>');
        }

        .wellness-image-sleep {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><circle cx="150" cy="100" r="50" fill="%233498db" stroke="white" stroke-width="4"/><path d="M150 60 L150 140 M110 100 L190 100" stroke="white" stroke-width="4"/><circle cx="120" cy="80" r="10" fill="white" opacity="0.7"/><circle cx="180" cy="120" r="8" fill="white" opacity="0.7"/></svg>');
        }

        .wellness-image-habit {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><rect x="80" y="70" width="140" height="60" rx="10" fill="%23f39c12"/><circle cx="100" cy="100" r="15" fill="%232ecc71"/><circle cx="150" cy="100" r="15" fill="%233498db"/><circle cx="200" cy="100" r="15" fill="%239b59b6"/></svg>');
        }

        .wellness-image-advanced {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><polygon points="150,50 200,150 100,150" fill="%23e74c3c"/><circle cx="150" cy="100" r="30" fill="%23f39c12"/></svg>');
        }

        .wellness-image-assessment {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="300" height="200" fill="%233498db"/><rect x="90" y="60" width="120" height="80" fill="white"/><line x1="100" y1="80" x2="200" y2="80" stroke="%233498db" stroke-width="2"/><line x1="100" y1="100" x2="180" y2="100" stroke="%233498db" stroke-width="2"/><line x1="100" y1="120" x2="160" y2="120" stroke="%233498db" stroke-width="2"/></svg>');
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .wellness-container {
                max-width: 95%;
            }
        }

        @media (max-width: 992px) {
            .wellness-courses-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 20px;
            }

            .wellness-level-head {
                padding: 20px;
            }

            .wellness-level-label {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .wellness-courses-grid {
                grid-template-columns: 1fr;
                padding: 20px;
            }

            .wellness-modal-window,
            .wellness-assessment-window,
            .wellness-download-window {
                width: 98%;
            }

            .wellness-actions-bar {
                flex-direction: column;
                padding: 0 20px 20px;
            }

            .wellness-action-btn {
                width: 100%;
                justify-content: center;
            }

            .wellness-level-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .wellness-level-percent {
                align-self: flex-end;
            }

            .wellness-download-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .wellness-download-small {
                align-self: stretch;
                justify-content: center;
            }
        }

        @media (max-width: 576px) {
            body {
                padding: 15px;
            }

            .wellness-course-info {
                padding: 16px;
            }

            .wellness-level-head {
                padding: 18px;
            }

            .wellness-courses-grid {
                padding: 16px;
                gap: 16px;
            }

            .wellness-modal-head,
            .wellness-assessment-head,
            .wellness-download-head {
                padding: 16px 20px;
            }

            .wellness-assessment-body,
            .wellness-download-body {
                padding: 16px 20px;
            }

            .wellness-course-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .wellness-course-state {
                align-self: flex-end;
            }

            .wellness-assessment-question {
                margin-bottom: 20px;
                padding-bottom: 16px;
            }
        }

        @media (max-width: 400px) {
            body {
                padding: 10px;
            }

            .wellness-course-image {
                height: 150px;
            }

            .wellness-level-label {
                font-size: 1.1rem;
            }

            .wellness-course-name {
                font-size: 1.1rem;
            }

            .wellness-action-btn {
                padding: 12px 20px;
                font-size: 0.95rem;
            }

            .wellness-assessment-head,
            .wellness-download-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .wellness-assessment-title,
            .wellness-download-title {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 576px) {
            .debowelcome-text {
                padding-left: 0.75rem;
                position: relative;
                top: -60px;
                text-align: left !important;
                left: 35px;
            }
        }

        /* aboutcss */

          .bb-hero {
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .bb-hero .bb-full-img {
            width: 100%;
            height: auto;
            display: block;
        }

        .bb-title {
            font-size: 70px;
            font-weight: 900;
            line-height: 1.1;
            background: #ffca00;
            color: #000;
            padding: 20px 30px;
            display: inline-block;
            border-radius: 8px;
        }

        .bb-sub {
            font-size: 24px;
            margin-top: 12px;
            background: #a40000;
            color: #fff;
            padding: 10px 20px;
            display: inline-block;
            border-radius: 6px;
        }

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

        @media (max-width: 850px) {
            .bb-hero {
                height: auto;
                padding: 40px 0;
            }

            .bb-hero-content {
                flex-direction: column;
                text-align: center;
            }

            .bb-right {
                text-align: center;
            }

            .bb-title {
                font-size: 50px;
            }

            .bb-sub {
                font-size: 20px;
            }

            .bb-left .bb-person {
                width: 220px;
                margin-bottom: 20px;
            }
        }

        /* ===== ABOUT SECTION ===== */

        .bb-about {
            width: 90%;
            max-width: 1000px;
            margin: 50px auto;
            font-size: 18px;
            line-height: 1.6;
        }

        .bb-about h2 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 20px;
        }
        /* about css end */

        /* contact css */
          .bb-hero {
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .bb-hero .bb-full-img {
            width: 100%;
            height: auto;
            display: block;
        }

        .underline {
            width: 70px;
            height: 4px;
            background: #f7c500;
            border-radius: 10px;
        }

        .contact-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.4);
        }

        .icon-box {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #f7c500;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
        }

        .icon-box i {
            color: #000;
            font-size: 18px;
        }

        /* RESPONSIVE FIXES */
        @media (max-width: 768px) {
            .contact-card {
                text-align: left !important;
            }
        }

        .form-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
        }

        .form-control {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #fff !important;
            border: 1px solid rgba(255, 255, 255, 0.25);
        }

        .form-control:focus {
            background: rgba(255, 255, 255, 0.25) !important;
            border-color: #f7c500;
            box-shadow: 0 0 10px rgba(247, 197, 0, 0.6);
        }

        .form-floating label {
            color: #ddd !important;
        }

        .send-btn:hover {
            background: #e0b100 !important;
            transform: translateY(-2px);
            transition: 0.3s;
        }

        /* contact css */



        /* login css */

         .auth-container-wrapper {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      max-width: 1000px;
      width: 100%;
      border-radius: 25px;
      overflow: hidden;
      display: flex;
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
      position: relative;
      margin: 40px auto;
    }

    .auth-container-wrapper::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #ff6b6b 0%, #b71c1c 100%);
      border-radius: 50%;
      z-index: 0;
      opacity: 0.1;
    }

    .auth-container-wrapper::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #ff6b6b 0%, #b71c1c 100%);
      border-radius: 50%;
      z-index: 0;
      opacity: 0.08;
    }

    .auth-form-section {
      width: 50%;
      padding: 50px;
      position: relative;
      z-index: 1;
    }

    .auth-visual-section {
      width: 50%;
      background: linear-gradient(135deg, #ff6b6b 0%, #b71c1c 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
      position: relative;
      overflow: hidden;
    }

    .auth-visual-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSIyIiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==');
      opacity: 0.3;
    }

    .auth-brand-logo {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #ff6b6b 0%, #b71c1c 100%);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      box-shadow: 0 8px 20px rgba(183, 28, 28, 0.3);
    }
    
    .auth-brand-logo span {
      color: #fff;
      font-size: 32px;
      font-weight: 700;
    }

    .auth-main-title {
      font-weight: 700;
      color: #2d3748;
      margin-bottom: 10px;
    }

    .auth-subtitle-text {
      color: #718096;
      margin-bottom: 30px;
    }

    .auth-input-field {
      border-radius: 12px;
      padding: 14px 18px;
      border: 2px solid #e2e8f0;
      transition: all 0.3s ease;
      font-size: 16px;
    }

    .auth-input-field:focus {
      border-color: #b71c1c;
      box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.1);
    }

    .auth-primary-button {
      background: linear-gradient(135deg, #ff6b6b 0%, #b71c1c 100%);
      border: none;
      height: 54px;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 600;
      box-shadow: 0 8px 20px rgba(183, 28, 28, 0.3);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .auth-primary-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 25px rgba(183, 28, 28, 0.4);
    }

    .auth-primary-button:active {
      transform: translateY(0);
    }

    .auth-primary-button::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transform: translateX(-100%);
      transition: transform 0.4s ease;
    }

    .auth-primary-button:hover::after {
      transform: translateX(100%);
    }

    .auth-form-label {
      font-weight: 600;
      color: #4a5568;
      margin-bottom: 8px;
    }


    .auth-options-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
    }

    .auth-options-container a {
      color: #b71c1c;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .auth-options-container a:hover {
      color: #7b1f1f;
      text-decoration: underline;
    }

    .auth-checkbox-input:checked {
      background-color: #b71c1c;
      border-color: #b71c1c;
    }

    .auth-register-prompt {
      text-align: center;
      margin-top: 25px;
      color: #718096;
    }

    .auth-register-prompt a {
      color: #b71c1c;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .auth-register-prompt a:hover {
      color: #7b1f1f;
      text-decoration: underline;
    }

    .auth-visual-image {
      max-width: 100%;
      height: auto;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
    }

  

    /* MOBILE VIEW */
    @media (max-width: 900px) {
      .auth-container-wrapper {
        flex-direction: column;
        max-width: 500px;
        margin: 20px auto;
      }
      
      .auth-form-section {
        width: 100%;
        padding: 35px;
      }
      
      .auth-visual-section {
        display: none; /* hide image on mobile */
      }
    }

    /* login css */