/* Custom CSS */

:root{
  --default-form-text-color: #444444;
}

.link-plain{
  text-decoration: none !important;
}

.bg-theme{
	background-color: var(--accent-color);
}

.btn-theme {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 50px;
}

.btn-theme:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  border: 1px solid var(--contrast-color);
}

.btn-theme-inverse {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid var(--contrast-color);
}

.btn-theme-inverse:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 50%);
  border: 1px solid var(--accent-color);

}

.font-theme-accent{
  color: var(--accent-color);
}

.courses .btn-course-action {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}

.courses .btn-course-action-light {
  background: var(--contrast-color);
  color: var(--accent-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
}

.courses .btn-course-action-inverse {
  background: var(--contrast-color);
  color: var(--accent-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
  border: 1px solid var(--accent-color);
}



.carousel-inner {

}
.carousel-inner .card {
  margin: 0.5em 0.5em;
  border: none;
}
.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .carousel-item {
    margin-right: 0;
    flex: 0 0 33.333333%;
    display: block;
  }
  .carousel-inner {
    display: flex;
  }
}
.card .img-wrapper {
    max-width: 100%;
    height: 13em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card img {
    max-height: 100%;
}
@media (max-width: 767px) {
  .card .img-wrapper {
    height: 17em;
  }
}



/*--------------------------------------------------------------
# Enquiry Form Section
--------------------------------------------------------------*/
.enquiry-section {
  background: color-mix(in srgb, var(--background-color), transparent 80%);
  color: var(--default-form-text-color);
  padding: 15px 20px;
  margin: 0;
  border-radius: 20px;
  border: 1px solid var(--accent-color);
}

.enquiry-section .title{
  font-size: 1.2em;
  font-weight: 600;
  padding-bottom: 10px;
  color: var(--accent-color);


}

.enquiry-section .enquiry-form input,
.enquiry-section .enquiry-form select,
.enquiry-section .enquiry-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  color: color-mix(in srgb, var(----default-form-text-color), transparent 10%);
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.7);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.enquiry-section .enquiry-form input:focus,
.enquiry-section .enquiry-form select:focus,
.enquiry-section .enquiry-form textarea:focus {
  border-color: var(--accent-color);
}

.enquiry-section .enquiry-form input::placeholder,
.enquiry-section .enquiry-form textarea::placeholder {
  color: color-mix(in srgb, var(----default-form-text-color), transparent 10%);
}



.enquiry-section .enquiry-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  transition: 0.4s;
  border: 1px solid var(--accent-color);

}

.enquiry-section .enquiry-form button[type=submit]:hover {
  color: var(--accent-color);
  background: var(--contrast-color);
  border: 1px solid var(--accent-color);

}

.enquiry-section .enquiry-form .btn-white{
  color: var(--accent-color);
  background: var(--contrast-color);
  transition: 0.4s;
  border: 1px solid var(--accent-color);
}

.enquiry-section .enquiry-form .btn-white:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.enquiry-section .enquiry-form .btn-group .btn:first-child {
  border-radius: 25px 0 0 25px;
}
.enquiry-section .enquiry-form .btn-group .btn:last-child {
  border-radius: 0 25px 25px 0;
}

/*--------------------------------------------------------------
# End Enquiry Form Section
--------------------------------------------------------------*/

.f100{
	font-weight: 100;
}

.f200{
	font-weight: 200;
}

.f300{
	font-weight: 300;
}


.fs-90{
	font-size: 90%;
}

.fs-95{
	font-size: 95%;
}

.fs-120{
	font-size: 120%;
}

.fs-150{
	font-size: 150%;
}

.fs-200{
	font-size: 200%;
}

.fs-300{
	font-size: 300%;
}


.star-rating {
  font-size: 2rem;
}
.star {
  color: #ffd700; /* Default color for empty stars */
}
.star.filled {
  color: #ffd700; /* Color for filled stars */
}


/*--------------------------------------------------------------
# Global Course Intro Titles & Breadcrumbs
--------------------------------------------------------------*/
.course-intro {
  position: relative;
}

.course-intro .heading {
  padding: 50px 0;
}

.course-intro .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.course-intro nav {
  padding: 5px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.course-intro nav a {
  color: var(--default-color);
}

.course-intro nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 1em;
  font-weight: 300;
  padding: 0px;
}

.course-intro nav ol li+li {
  padding-left: 10px;
}

.course-intro nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.icon-box{

}

.icon-box i{
  font-size: 2rem;
}





/*--------------------------------------------------------------
# Form Section
--------------------------------------------------------------*/

.form-section .info-item+.info-item {
  margin-top: 40px;
}

.form-section .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.form-section .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.form-section .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.form-section .common-form {
  height: 100%;
}

.form-section .common-form input,
.form-section .common-form select,
.form-section .common-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  margin-bottom: 5px;
  box-shadow: none;
  color: #000;
  background-color: rgba(255, 255, 255, 0.7);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.form-section .common-form input:focus,
.form-section .common-form select:focus,
.form-section .common-form textarea:focus {
  border-color: var(--accent-color);
}

.form-section .common-form input::placeholder,
.form-section .common-form select::placeholder,
.form-section .common-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.form-section .common-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px 12px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.form-section .common-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}