@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;600;700&display=swap');


body {
  background: #f9fafc;
  font-family: 'Segoe UI', "Rethink Sans", "Rethink Sans Placeholder", sans-serif;
}

* .fontStyle {
  font-family: "Rethink Sans", sans-serif;

}

.navbar {
  padding: 0.40rem 0.0rem;
}

.logodiv {
  padding: 0px 150px;
}

.text-primary {
  color: #3b82f6 !important;
  padding: 0;
  margin: 0;
}

.brand {
  padding-right: 20px;
}

.Webveda {
  font-size: 20px;
}

.text-white-50 {
  font-size: 10px;
}



.course-card {
  background: #fff;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); */
  text-align: center;
  max-width: 950px;
  margin: 50px auto;
  overflow: hidden;
  border-radius: 25px;

}
@media (max-width: 767px){
  .course-card{
    /*width: 393px;*/
    /*height:560px;*/
  }
}

.course-badge {
  display: inline-block;
  background: #ffffff;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  border: 1px solid #a788e3;
}

.course-title {
  font-size: 3rem;
  font-weight: 700;
  color: #071a34;
  margin: 0;
}

.course-subtitle {
  font-size: 1.1rem;
  color: #475569;
  margin-bottom: 20px;
}

.course-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 30px;
  font-weight: 500;
  color: #071A34;
  font-size: 18px;
}

.course-info i {
  color: #7c3aed;
  margin-right: 6px;
  font-size: 18px;
}



.course-media img {
  /* width: 100%; */
  /* height: auto; */
  display: block;
  margin: 0 auto;
}

.course-media p {
  font-size: 15px;
  font-style: italic;
  margin-top: 0px;
}

.course-footer {
  /* position: absolute; */
  margin-top: 0%;
  display: flex;
}

.overlay-content {
  /* position: absolute; */
  top: 0;
  /* left: 25%; */
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  /* center vertically */
  align-items: center;
  /* center horizontally */
  text-align: center;
  color: #071A34 !important;

}

.course-media {
  position: relative;
  width: 100%;
  /* height: 400px; */
  overflow: hidden;
  border-radius: 12px;
}

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

.overlay-police {
  /* position: absolute; */
  /* bottom: 30px; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* z-index: 2; */
  display: flex;
  /* width: max-content; */
  justify-content: center;
  align-items: center;
  /* gap: 20px; */
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 30px;
}

.overlay-police {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  /* padding: 20px; */
  border-radius: 12px;
}


.stat-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  padding: 15px 15px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: #E3F3EC;
  color: #000;
  transition: 0.3s ease;
  /*margin-bottom: 10px;*/
  height: 150px;
}
.Stats-section-box{
   display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 15px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: #EEEFF3;
  color: #000;
  transition: 0.3s ease;
}

.stat-box:hover {
  /* background: rgba(255, 255, 255, 0.2); */
}

.text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 5px 0px;
}

.label {
  font-size: 13px;
  opacity: 0.8;
  margin: 0;
}

.value {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}



.course-footer .info-box {
  flex: 1 1 200px;
  background: #7c3aed;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 12px 20px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  transition: all 0.3s ease;
}

.course-footer .info-box:hover {
  background-color: #5b21b6;
}

.course-footer .info-box i {
  font-size: 18px;
}

.bg-img {
  background-color: #fff;
  background-image: url("https://framerusercontent.com/images/zpRsnTgdLxVW27scXSVdc6s8uuc.png?scale-down-to=2048&width=4227&height=1507");
  background-size: cover;
  /* background-position: center; */
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.bg-hero {
  width: 100%;
  /*height: 400px;*/
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.bg-hero .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fills container without stretching */
  position: absolute;
  top: 0;
  left: 0;
}

.course-footer {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.image-card .image-container {
  /* border-radius: 1rem 1rem 0 0; */
  background-color: #ebe0ff;
  overflow: hidden;
}

.icon-container svg {
  width: 40px;
  height: 40px;
}
.vector_img{
  height: 100%;
}
.card {
  /*border-radius: 3rem;*/
  background-color: #ebe0ff;
  border: none;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); */
}

.title {
  font-size: 2.5rem;
  font-weight: 700;
}



@media (max-width: 767px) {

  .row.g-3>.col-md-6,
  .row.g-3>.col-md-5 {
    width: 100%;
  }
}

/* Section 3 */



.trusted-title {
  color: #1f2937;
  /* Dark gray-blue tone */
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}

/* Logo Styling */
.trusted-logo {
  max-height: 120px;
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.trusted-logo:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Responsive Tweak */
@media (max-width: 576px) {
  .trusted-logo {
    max-height: 30px;
  }
}


/* <!-- <section-4 --> */

.text-dark-blue {
  color: #071a34;
}



/* Section Decorations */
.wavy-line {
  width: 300px;
  height: 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,5 C25,10 75,0 100,5" stroke="%23a788e2" stroke-width="2" fill="none"/></svg>') repeat-x;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,5 C25,10 75,0 100,5" stroke="%23a788e2" stroke-width="2" fill="none"/></svg>') repeat-x;
  color: #014339 !important;
  background-size: 20px 10px;
}

/* Card Styling */
.instructor-card {
  background-color: #f6eafb;
  border-radius: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  max-width: 800px;
  margin-bottom: 20px;
  /* padding:24px !important; */
  /* height: 588px; */
}

.ankor-image-box {
  padding-bottom: calc(var(--bs-gutter-x) * 1.5);
  ;
}

/* Stats */
.stat-number {
  font-family: 'Rethink Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #a788e2;
}

.stat-label {
  font-family: 'Rethink Sans', sans-serif;
  color: #555;
  font-size: 14px;
}
@media (max-width:767px){
  .stat-label{
    width: 94%;
  }
}

/* Image */
.ankur-image-container {
  position: relative;
  max-height: 350px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* overflow: hidden; */
}

.ankur-image {
  max-width: 100%;
  height: 370px;
  object-fit: contain;
  position: absolute;
  bottom: -150px;
  right: -40px;
  overflow: hidden;
}

/* Bottom Banner */
.bottom-banner {

  color: white;
  text-align: center;
  padding: 0.5rem 9rem;
  font-style: italic;
  border-radius: 0 0 2rem 2rem;
  font-size: 18px;
  z-index: 90;
  overflow: hidden;
  position: relative
}

/* Responsive */



/* section 6 */
/* 1. Promise Badge */
.promise-badge {
  max-width: 280px;
  /* Using custom CSS only for transformations and internal adjustments */
  position: relative;
  margin: 0 auto 40px auto;
}

/* Desktop rotation */
@media (min-width: 992px) {
  .promise-badge {
    transform: rotate(2.445deg);
  }
}

.promise-badge h5 {
  opacity: 0.8;
}

/* Using custom CSS for opacity only */

/* 2. Promise Text Box (Blue Bar inside Badge) */
.promise-text-box {
  /* Custom margin to stretch across the badge's padding */
  margin: 20px -20px -30px -20px;
  position: relative;
  z-index: 1;
}

/* Stars/Sparks decoration - requires custom pseudo-elements */
.promise-text-box::before,
.promise-text-box::after {
  content: "✦";
  position: absolute;
  color: white;
  font-size: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.promise-text-box::before {
  left: 15px;
}



.promise-text-box::after {
  right: 15px;
}


.bar-item-icon {
  color: var(--bs-blue-accent);
}

.footer-bar-wrapper {
  position: relative;
  width: 100%;
  height: 70px;
  background-color: #014339;
  transform: skewY(-1.5deg);
}

.footer-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: skewY(-2deg);
  transform-origin: top left;
  /* overflow: hidden; */
  /* --- NEW: VERTICALLY CENTER MARQUEE CONTENT --- */
  display: flex;
  /* padding: 20px; */
  align-items: center;
  justify-content: center;

}





/* Marquee tag doesn't use the marquee-container/marquee-inner CSS,
   but we need to apply the counter-skew to the content inside it. */
.footer-bar marquee {
  /* Counter-transform to keep text straight */
  transform: skewY(2deg);
  height: 100%;
  padding: 80px;
}

/* 5. Horizontal Flow for List Items */
.bar-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  height: 100%;
  /* Marquee needs the content width to be greater than 100% to scroll */
  /* Use float: left or display: inline-flex to flow horizontally */
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding: 0 40px;
}

.bar-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}



.marquee {
  display: inline-block;
  animation: scroll-left 25s linear infinite;
}

.bar-list {
  display: inline-flex;
  gap: 2rem;
  /* space between items */
  list-style: none;
  padding: 0;
  margin: 0;
}

.bar-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

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

.feature-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centers horizontally */
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  margin: 5px 0;
  text-align: center;
}

/* 6. Mobile Fallback (Unchanged for static stacking) */
@media (max-width: 767.98px) {
  .footer-bar-wrapper {
    height: auto;
    margin-top: 30px;

  }

  .footer-bar {
    /* transform: none; */
    position: static;
    height: auto;
    padding: 5px 0;
    display: block;
    /* Remove flexbox centering on mobile */
  }

 

  .mobile-bar-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 15px;
  }

  .mobile-bar-content .bar-item {
    margin-bottom: 5px;
  }
}

/* <!-- <section-11 --> */
.Videobackground {
  position: relative;
  width: 100%;
  /*height: 500px;*/
  /* let height adjust based on image */
}

.Videobackground img {
  width: 100%;
  /* full width */
  height: 540px;
  /* maintain aspect ratio */
  /* object-fit: contain; show full image without cropping */
  /* display: block; */
}



/* ✅ behind content */



.wave-container {
  /*position: absolute;*/
  /* z-index: 10; */
  width: 100%;
  top: 0;
  z-index: 10;
  min-height: 350px;
  /* ✅ Ensures it’s visible */
  /* background-image: url('/image/Videobackground.png'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.content-wrapper {
  /* position: relative; */
  z-index: 20;
  padding-top: 50px;
  /* padding-bottom: 10px; */
}

.title-text {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.subtitle-text {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  margin-top: 30px;
  letter-spacing: 0.01em;
  background-color: white;

}

.btnyou {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 10px;

}

.btntube button {
  border: none;
  padding: 5px 50px;
}

/* --------------------------------------------------- */
/* Video Player Styling */
/* --------------------------------------------------- */

.video-wrapper {
  /* width: 500px; */

  /* padding-bottom: 56.25%; */
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}



/* Custom placeholder image and play button */


.hidden {
  display: none !important;
}


/* <!-- <section-9 --> */

.pricing-pill {
  background-color: var(--color-light-green-bg);
  color: var(--color-dark-teal);
  font-weight: 600;
  padding: 5px 20px;
  border-radius: 50px;
  display: inline-block;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-text-dark);
}

.package-card {
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  /* Important for equal height columns */
  display: flex;
  flex-direction: column;

}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Basic/ALL-IN package styling */
.card-basic,
.card-all-in {
  background-color: var(--color-basic-bg);
  border: 1px solid #eee;
  /* Very subtle border */
}

/* PRO package specific styling */
.card-pro {
  background-color: #014339;
  color: white;
  transform: scale(1.05);
  /* Make it stand out */
}

.card-pro h2,
.card-pro h1,
.card-pro p {
  color: inherit !important;
}

.card-pro:hover {
  transform: scale(1.06) translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.package-card h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.package-card .sub-text {
  color: #6c757d;
  /* Muted gray for description */
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.card-pro .sub-text {
  color: #a0c2bf;
}

.feature-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 30px;
  flex-grow: 1;
  /* Makes feature lists fill available space */
}

.feature-list li {
  font-size: 1rem;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.feature-icon {
  color: var(--color-dark-teal);
  margin-right: 10px;
  font-weight: 700;
}

.card-pro .feature-icon {
  color: #4CAF50;
}

.price h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-dark-teal);
  margin-bottom: 30px;
  border: 2px black;
}

.card-pro .price h1 {
  color: white;

}

.btn-custom {
  border-radius: 50px;
  padding: 10px 30px;
  width: 100%;
  font: bold;
  transition: all 0.3s ease;
  color: black;
  list-style: none;
  font-size: 16px;
  font-weight: bold;
}


.link-border {
  border: 2px solid black;
  border-radius: 50px;
  display: inline-block;
  padding: 1px 30px;
  font: bold;
  /* so the inner button fits nicely */
}

.pro-border {
  border: 2px solid white !important;
  border-radius: 50px;
  display: inline-block;
  padding: 1px 30px;
}

.pro-btn {
  color: white;
}



.feature-list li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
}

.card-pro .feature-list li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.feature-text {
  line-height: 1.4;
}


/* Section 8 */

.font-display {
  font-family: 'Permanent Marker', cursive;
}

/* Utility classes for custom colors */
.text-dark-primary {
  color: var(--dark-primary);
}

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

.bg-header-purple {
  background-color: var(--header-purple);
}

/* Custom CSS for the testimonial card dot pattern pseudo-element */
.card-dots {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  /* Added for consistency, equivalent to rounded-4 */
}

.card-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.1;
  /* Slightly reduced opacity */
  background-image: url('https://framerusercontent.com/images/wGAHOWhVswEtWkOKTJN6s2CW0.svg?width=96&height=96');
  background-repeat: repeat;
  background-size: 48px;
  z-index: 0;
}

/* Custom class for the gradient ring on profile pictures */
.gradient-ring {
  padding: 3px;
  /* Simulates p-[3px] */
  border-radius: 50%;
  transition: all 0.3s ease;
  /* Using a light shadow for depth */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.gradient-ring-1 {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
}

.gradient-ring-2 {
  background: linear-gradient(135deg, var(--gradient-end), var(--gradient-middle), var(--gradient-start));
}

.gradient-ring-3 {
  background: linear-gradient(135deg, var(--gradient-middle), var(--gradient-end), var(--gradient-start));
}

/* .studenumber {} */

/* Custom width for the carousel cards to enable scrolling effect on larger screens */
.card-carousel-item {
  flex-shrink: 0;
  /* Adjusted for better mobile fit */
}

@media (min-width: 576px) {
  .card-carousel-item {
    width: 384px;
    /* sm:w-96 (24rem) equivalent, matching original */
  }
}

/* Minimal custom CSS for scrollbar hiding (Bootstrap does not have this utility) */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

/* Custom pulse animation for the scroll hint */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Testimonial Card specific styles */
.testimonial-text {
  font-size: 1.125rem;
}

.student-name {
  font-size: 1rem;
  /* Standard body text size for name */
  font-weight: 500;
  /* Medium weight */
}

/* Card Hover Effect */
.card-dots:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  /* Stronger shadow on hover */
}

.card-dots {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Custom styling for the 89,450+ box for the prominent purple look */
.statt-box {
  background-color: var(--bs-purple) !important;
  color: white;
  padding: 0.2rem 1rem;
  border-radius: 0.5rem;
}

.stude-number {
  font-size: 50px;
  font-weight: 700;
}

.stat-headline {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: white;
}

.testimonial-text {
  color: var(--bs-dark-primary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.student-name {
  font-weight: 600;
  font-size: 1.1rem;
}

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


/* Ensure responsive image handling in the carousel cards */
.card-profile-img {
  width: 4rem;
  /* Standardized small profile picture size */
  height: 4rem;
}

/* === Multi-Item Carousel Styling (Key to showing 3 cards) === */
/* Wrapper to add necessary spacing around each card within the row */
.card-wrapper {
  padding: 0.5rem;
  color: #071a34;
}


.stat-headline {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Caveat', sans-serif;
  letter-spacing: 0.02em;
  font-family: "Caveat", sans-serif;
  color: #071A34;
  /* padding-top: 10px; */
}


.carousel-control-prev,
.carousel-control-next {
  width: 4rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #5a4444;
  border-radius: 50%;
  padding: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-size: 1.5rem;
  transition: all 0.2s;

}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: #eee;
}

.carousel-control-next {
  right: -58px !important;
}

.carousel-control-prev {
  left: -58px !important;
  ;
}

.carousel-inner {
  overflow: unset !important;
  box-shadow: none;
}

footer{
    background-color: #014339 !important;
    padding: 20px 20px 80px 20px;
    color: #fff;
}