:root,
[data-bs-theme="light"] {
  --bs-primary: #41b883;
  --bs-primary-rgb: 65, 184, 131;
  --bs-primary-text-emphasis: #10663f;
  --bs-primary-bg-subtle: #f4fbf8;
  --bs-primary-border-subtle: #d1fce8;

  --bs-body-color: #181821;
  --bs-body-color-rgb: 24, 24, 33;

  --bs-tertiary-bg: #f9f9fb;
  --bs-tertiary-bg-rgb: 249, 249, 251;

  --bs-body-font-family: "Plus Jakarta Sans", sans-serif;

  --bs-box-shadow:
    0 0.5rem 1rem rgba(0, 0, 0, 0.149), 0px 0px 0px rgba(23, 26, 31, 0);
  --bs-box-shadow-sm:
    0 0.125rem 0.25rem rgba(0, 0, 0, 0.149), 0px 0px 0px rgba(23, 26, 31, 0);
  --bs-box-shadow-lg:
    0 1rem 3rem rgba(0, 0, 0, 0.149), 0px 0px 0px rgba(23, 26, 31, 0);
  --bs-box-shadow-inset:
    inset 0 1px 2px rgba(0, 0, 0, 0.149), 0px 0px 0px rgba(23, 26, 31, 0);
  --bs-gradient: linear-gradient(227.79deg, #41b8831a 0%, #41b88300 100%);

  --bs-pink: #e5619a;
  --bs-blue: #2c85dd;
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

.btn {
  padding-block: 0.55rem;
  padding-inline: 0.9rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #41b883;
  --bs-btn-border-color: #41b883;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #369f70;
  --bs-btn-hover-border-color: #319368;

  --bs-btn-focus-shadow-rgb: 65, 184, 131;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #41b883;
  --bs-btn-disabled-border-color: #41b883;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #41b8839f;
  --bs-btn-hover-border-color: #41b8839f;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none
}

.btn-dark {
  font-weight: 500;
  border: 1px solid #fff;
}

.divider {
  width: 6rem;
  border-width: 2.8px !important;
}

#toolbar a:hover,
footer a:hover {
  color: var(--bs-primary-text-emphasis);
}

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

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

#navbar.fixed-top {
  animation: slideDown 0.8s ease;
  border-bottom: 1px solid #DFDFE7;
}

#courses-section .container-fluid {
  border-bottom: 1px solid #DFDFE7;
}

#hero .btn {
  font-weight: 500;
}

.level-badge {
  color: var(--bs-body-color);
  background-color: #c6c6c9;
}

.badge {
  padding: 0.5rem;
  cursor: default;
}

.online-badge {
  background-color: var(--bs-pink);
}

.free-badge {
  background-color: var(--bs-blue);
}

.pagination {
  --bs-pagination-color: var(--bs-primary-text-emphasis);
  --bs-pagination-hover-color: var(--bs-primary-text-emphasis);
  --bs-pagination-hover-bg: var(--bs-primary-border-subtle);
  --bs-pagination-focus-color: var(--bs-primary-text-emphasis);
  --bs-pagination-focus-box-shadow: 0 0 0 0.1rem var(--bs-primary-);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

#news-container a:hover {
  text-decoration: underline;
}

.card-animation {
  animation: scale-up-center-normal 0.6s ease forwards !important;
}

@keyframes scale-up-center-normal {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

#contact .icon {
  background-color: #41b8831a;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact a:hover {
  color: var(--bs-primary-text-emphasis);
}

@media(min-width: 1400px) {
  #contact .card {
    padding-inline: 3rem !important;
    margin-inline-end: 2rem !important
  }
}

#contact input,
#contact textarea {
  font-size: 0.8rem;
}

#contact label {
  font-size: 0.9rem;
}

#contact iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  #contact iframe {
    height: 400px;
    margin-top: 2rem;
  }
}

footer {
  font-size: 0.9rem;
}

#scroll-top-btn {
  position: fixed;
  top: 10px;
  left: 10px;
}

#scroll-top-btn>div {
  position: fixed;
  left: 0.5rem;
  bottom: 0.5rem;
  width: 3rem;
  height: 3rem;
  background-color: #69a5ffa8;
  color: white;
}

#scroll-top-btn>div:hover {
  background-color: #86b7fec1;
  color: white;
}

.form-control,
.btn,
.pagination a,
#scroll-top-btn>div {
  transition: all 0.8s;
}