:root {
    --primaryColor: #FFB400;
    --brandRed: #AD1A1E;
    --black: #232122;
    --poppinsRegular: "Poppins", sans-serif;
    --poppinsMedium: "Poppins", sans-serif;
    --poppinsSemibold: "Poppins", sans-serif;
    --poppinsBold: "Poppins", sans-serif;
    --headline: Ornitons, sans-serif;
}


/* --------------------------Header--------------------------*/
.courses-front-page {
    background-color: var(--primaryColor);

}

.courses-hero1 {
    background-image: url('assets/images/front-view-man-sitting-couch-concept.jpg');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
}

.course-item {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.074);
}


.modal-img {
    width: 100%;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


main.timeline {
max-width: 50vw;
}

.timeline-paragraph {
  border-top: 3px solid;
  border-image: linear-gradient(to right, var(--brandRed) 0%, var(--primaryColor) 100%);
  border-image-slice: 1;
  border-width: 3px;
  margin: 0;
  padding: 40px;
  counter-increment: section;
  position: relative;

  
    &:before {
    content: counter(section);
    position: absolute;
    padding: 20px;
    background-color: var(--black);
    text-align: center;
    color: white;
    font-size: 1em;
  }
}
.timeline-paragraph:nth-child(odd) {
  border-right: 3px solid;
  padding-left: 0;
  
  &:before {
    left: 100%; 
    margin-left: -20px;
  }
}
.timeline-paragraph:nth-child(even) {
  border-left: 3px solid;
  padding-right: 0;
  
  &:before {
    right: 100%; 
    margin-right: -20px;
  }
}
.timeline-paragraph:first-child {
  border-top: 0;
  border-top-right-radius:0;
  border-top-left-radius:0;
}
.timeline-paragraph:last-child {
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}

.scrollspy-nav {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(40px);
}

.nav-pills a.active {
  color: white !important;
  background-color: var(--brandRed) !important;
  border-radius: none;
}