.ctaButton button {
  background-color: #7e4fa0;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}
.ctaButton button:hover {
  background-color: #f23ca1;
}

.courseCard {
  width: 100%;
  height: 100%;
  padding: 30px 20px 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.courses {
  padding: 5px 0px;
}
.courses img {
  margin-right: 10px;
}

/*  */
.flip-card {
  background-color: transparent;
  /* width: 300px; */
  /* height: 200px; */
  width: 100%;
  height: 400px;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* text-align: center; */
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  /* background-color: #bbb; */
  color: black;
}

/* Style the back side */
.flip-card-back {
  /* background-color: dodgerblue; */
  /* color: white; */
  transform: rotateY(180deg);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 20px 20px;
}
.course-description p {
  font-size: 15px;
}
.apply-btn button {
  background-color: #9629db;
  border: 2px solid #9629db;
  color: white;
  padding: 7px 20px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  font-size: 13px;
}
.apply-btn button:hover {
  background-color: white;
  color: #9629db;
}

.filterBtn button {
  background-color: #9629db;
  color: white;
  border: 1px solid #9629db;
  padding: 8px 30px;
  border-radius: 6px;
}

.nav-link.active {
  background-color: #f23ca1 !important;
}
.coursesDiv .nav-link {
  padding: 16px 30px !important;
}

.topBtn {
  margin-left: 155px;
  margin-bottom: 20px;
}

.trainingFor a {
  color: #f23ca1;
  text-decoration: none;
}
.trainingFor img {
  width: 200px;
}
.trainingContent {
  padding: 10px 15px;
  background-color: #fafafa;
}

.tariningCard img {
  width: 100%;
}
.tariningCard button {
  width: 100%;
  background-color: #9629db;
  color: white;
  border: 2px solid #9629db;
  padding: 8px 0px;
  transition: 0.3s ease-in-out;
}
.tariningCard button:hover {
  background-color: transparent;
  color: #9629db;
}
.trainingDivLeft ul {
  list-style: none;
  padding-left: 0px;
}
.trainingDivLeft ul li {
  cursor: pointer;
}
.trainingDivLeft ul li {
  padding: 10px 0px;
}
.trainingDivLeft ul li select {
  width: 100%;
  padding: 6px;
  border: 1px solid rgb(160, 160, 160);
  border-radius: 4px;
}