/* Primary Colours */
.primary_t1 { 
  background-color: #004125;
  color: #fff;
}
.primary_t1::after { 
  content: '1 \a#004125 \a #fff';
  white-space: pre-wrap;
}
.font-primary-s1 { 
  color: #fff;
}
.bg-primary-s1 { 
  background-color: #004125;
}
.primary_t2 { 
  background-color: #004E2D;
  color: #fff;
}
.primary_t2::after { 
  content: '2 \a#004E2D \a #fff';
  white-space: pre-wrap;
}
.font-primary-s2 { 
  color: #fff;
}
.bg-primary-s2 { 
  background-color: #004E2D;
}
.primary_t3 { 
  background-color: #005C35;
  color: #fff;
}
.primary_t3::after { 
  content: '3 \a#005C35 \a #fff';
  white-space: pre-wrap;
}
.font-primary-s3 { 
  color: #fff;
}
.bg-primary-s3 { 
  background-color: #005C35;
}
.primary_t4 { 
  background-color: #00693D;
  color: #fff;
}
.primary_t4::after { 
  content: '4 \a#00693D \a #fff';
  white-space: pre-wrap;
}
.font-primary-s4 { 
  color: #fff;
}
.bg-primary-s4 { 
  background-color: #00693D;
}
.primary_t5 { 
  background-color: #007745;
  color: #fff;
}
.primary_t5::after { 
  content: '5 \a#007745 \a #fff';
  white-space: pre-wrap;
}
.font-primary-s5 { 
  color: #fff;
}
.bg-primary-s5 { 
  background-color: #007745;
}
.primary_t6 { 
  background-color: #00BB6C;
  color: #fff;
}
.primary_t6::after { 
  content: '6 \a#00BB6C \a #fff';
  white-space: pre-wrap;
}
.font-primary-s6 { 
  color: #fff;
}
.bg-primary-s6 { 
  background-color: #00BB6C;
}
.primary_t7 { 
  background-color: #00FF94;
  color: #212529;
}
.primary_t7::after { 
  content: '7 \a#00FF94 \a #212529';
  white-space: pre-wrap;
}
.font-primary-s7 { 
  color: #212529;
}
.bg-primary-s7 { 
  background-color: #00FF94;
}
.primary_t8 { 
  background-color: #44FFB0;
  color: #212529;
}
.primary_t8::after { 
  content: '8 \a#44FFB0 \a #212529';
  white-space: pre-wrap;
}
.font-primary-s8 { 
  color: #212529;
}
.bg-primary-s8 { 
  background-color: #44FFB0;
}
.primary_t9 { 
  background-color: #88FFCD;
  color: #212529;
}
.primary_t9::after { 
  content: '9 \a#88FFCD \a #212529';
  white-space: pre-wrap;
}
.font-primary-s9 { 
  color: #212529;
}
.bg-primary-s9 { 
  background-color: #88FFCD;
}
/* Secondary Colours */
.secondary-color div:nth-child(1){ 
  background-color: #1B1B1B;
  color: #fff;
}
.secondary-color div:nth-child(1)::after { 
  content: '1 \a #1B1B1B \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s1 { 
  color: #fff;
}
.bg-secondary-s1 { 
  background-color: #1B1B1B;
}
.secondary-color div:nth-child(2){ 
  background-color: #1D1D1D;
  color: #fff;
}
.secondary-color div:nth-child(2)::after { 
  content: '2 \a #1D1D1D \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s2 { 
  color: #fff;
}
.bg-secondary-s2 { 
  background-color: #1D1D1D;
}
.secondary-color div:nth-child(3){ 
  background-color: #1E1E1E;
  color: #fff;
}
.secondary-color div:nth-child(3)::after { 
  content: '3 \a #1E1E1E \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s3 { 
  color: #fff;
}
.bg-secondary-s3 { 
  background-color: #1E1E1E;
}
.secondary-color div:nth-child(4){ 
  background-color: #202020;
  color: #fff;
}
.secondary-color div:nth-child(4)::after { 
  content: '4 \a #202020 \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s4 { 
  color: #fff;
}
.bg-secondary-s4 { 
  background-color: #202020;
}
.secondary-color div:nth-child(5){ 
  background-color: #212121;
  color: #fff;
}
.secondary-color div:nth-child(5)::after { 
  content: '5 \a #212121 \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s5 { 
  color: #fff;
}
.bg-secondary-s5 { 
  background-color: #212121;
}
.secondary-color div:nth-child(6){ 
  background-color: #484848;
  color: #fff;
}
.secondary-color div:nth-child(6)::after { 
  content: '6 \a #484848 \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s6 { 
  color: #fff;
}
.bg-secondary-s6 { 
  background-color: #484848;
}
.secondary-color div:nth-child(7){ 
  background-color: #707070;
  color: #fff;
}
.secondary-color div:nth-child(7)::after { 
  content: '7 \a #707070 \a #fff';
  white-space: pre-wrap;
}
.font-secondary-s7 { 
  color: #fff;
}
.bg-secondary-s7 { 
  background-color: #707070;
}
.secondary-color div:nth-child(8){ 
  background-color: #979797;
  color: #212529;
}
.secondary-color div:nth-child(8)::after { 
  content: '8 \a #979797 \a #212529';
  white-space: pre-wrap;
}
.font-secondary-s8 { 
  color: #212529;
}
.bg-secondary-s8 { 
  background-color: #979797;
}
.secondary-color div:nth-child(9){ 
  background-color: #BEBEBE;
  color: #212529;
}
.secondary-color div:nth-child(9)::after { 
  content: '9 \a #BEBEBE \a #212529';
  white-space: pre-wrap;
}
.font-secondary-s9 { 
  color: #212529;
}
.bg-secondary-s9 { 
  background-color: #BEBEBE;
}

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

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #004E2D;
  --bs-btn-hover-border-color: #004E2D;

  --bs-btn-focus-shadow-rgb: 0, 119, 69;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #004E2D;
  --bs-btn-active-border-color: #004E2D;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #88FFCD;
  --bs-btn-disabled-border-color: #88FFCD;
}

/* Secondary */

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212121;
  --bs-btn-border-color: #212121;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1D1D1D;
  --bs-btn-hover-border-color: #1D1D1D;

  --bs-btn-focus-shadow-rgb: 33, 33, 33;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1D1D1D;
  --bs-btn-active-border-color: #1D1D1D;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #BEBEBE;
  --bs-btn-disabled-border-color: #BEBEBE;
}

:root {
  --bs-primary: #007745;
  --bs-primary-text-emphasis: #004125;
  --bs-primary-bg-subtle: #88FFCD;
  --bs-primary-border-subtle: #007745;
  --bs-primary-rgb: 0, 119, 69;

  --bs-secondary: #212121;
  --bs-secondary-text-emphasis: #1B1B1B;
  --bs-secondary-bg-subtle: #BEBEBE;
  --bs-secondary-border-subtle: #212121;
  --bs-secondary-rgb: 33, 33, 33;

  // --bs-link-color-rgb: ;
  // --bs-link-hover-color-rgb: ;
}

[data-bs-theme="dark"] {
    --bs-box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(0, 119, 69, 0.25);
}

.card.enrolled {
  background-color: rgb(136, 255, 205, 0.2);
}

.enrol_img {
  height: 28px;

  -webkit-filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0.5));
  filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0.5));
}

/* footer links */
.footer a:link, .footer a:visited{
  color: #fff;
  color: var(--bs-primary);
}
.footer a:hover{
  color: #00FF94;
    color: #fff;
}

/* fix for buttons dropping down at certain width */
.courseCard {
  container-type: inline-size;
}
@container (max-width: 255px) {
  .btn-action{
    display: none;
  }
}
/* share links */
.share_social {

}
.share-icon {
  margin-bottom: 1rem;
  margin-right: 1rem;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  transition:.5s;
}
.share-facebook, .share-facebook:focus {
  color: #3b5998;
  background-color: #eceff5;
}
.share-facebook:hover {
  color: #eceff5;
  background-color: #3b5998;
}
.share-twitter, .share-twitter:focus {
  color: #000000;
  background-color: #E0E0E0;
}
.share-twitter:hover {
  color: #E0E0E0;
  background-color: #000000;
}
.share-whatsapp, .share-whatsapp:focus {
  color:  #25D366;
  background-color: #cef5dc;
}
.share-whatsapp:hover {
  color:  #cef5dc;
  background-color: #25D366;
}
.share-telegram, .share-telegram:focus {
  color:  #4c6ef5;
  background-color: aliceblue
}
.share-telegram:hover {
  color:  aliceblue;
  background-color: #4c6ef5;
}
.share-url {
  background-color: #007745 !important;
  color: #fff;
}
.share-url:hover {
  background-color: #004E2D !important;
  color: #fff;
}

.social-icon, .social-icon:focus {
  margin-right: 1rem;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  transition:.5s;
  color: black;
  background-color: white;
}
.social-icon:hover {
  color: white;
  background-color: black;
}
.social-facebook, .social-facebook:focus {
  color: #3b5998 !important;
  background-color: #eceff5 !important;
}
.social-facebook:hover {
  color: #eceff5 !important;
  background-color: #3b5998 !important;
}
.social-twitter-x, .social-twitter-x:focus {
  color: #000000 !important;
  background-color: #E0E0E0 !important;
}
.social-twitter-x:hover {
  color: #E0E0E0 !important;
  background-color: #000000 !important;
}
.social-instagram, .social-instagram:focus {
  color: #000000 !important;
  background-color: #FFFFFF !important;
}
.social-instagram:hover {
  color: #E0E0E0 !important;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}
.social-threads, .social-threads:focus {
  color: #FFFFFF !important;
  background-color: #000000 !important;
}
.social-threads:hover {
  color: #000000 !important;
  background-color: #FFFFFF !important;
}
.social-linkedin, .social-linkedin:focus {
  color: #0A66C2 !important;
  background-color: #FFFFFF !important;
}
.social-linkedin:hover {
  color: #FFFFFF !important;
  background-color: #0A66C2 !important;
}


.courseCard:hover .btn-fav {
  display: block;
}
.btn-fav {
  display: none;
}
.btn-fav:hover {
  #text-shadow: 1px 1px 1px #999999;
}
.btn-unfav:hover {
  #text-shadow: 1px 1px 1px #999999;
}
.text-shadow {
  text-shadow: 1px 1px 1px #999999;
}
.rotate {
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

.row { margin-left: 0; margin-right: 0; }

.stack-top {
  /* adjust the below to control the shape */
  --d:5px;
  --w:75px;
  --c:#007745;
  /**/

  font-size: 75%;

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: var(--w);
  transform-origin: bottom left;
  padding:5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat
    var(--c);
  clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)))
}
.stack-top.left {
  left:0;
  right:auto;
  transform: translate(-29.29%, -100%) rotate(-45deg);
  transform-origin: bottom right;
}
.carousel-container {
  overflow: hidden;
}
@media screen and (max-width: 767px){
  .carousel-container {
    overflow: scroll;
  }
}