@keyframes fade-out {
    to { opacity: 0; }
}
@keyframes header-fade {
    10% { opacity: 1; }
    85%, 100% { opacity: 0; scale: 3; }
}
@keyframes header-underline {
    0% { width: 0%; }
    50%, 100% { width: 100%; }
}
main {
 background-color: #2b2c2f;
 color: #fff;
 overflow: inherit;
}
.tagline {
display: block;
}
.tagline .starthere::before {
background-color: #6cb33f;
}
.tagline .starthere {
color: #fff;
}
.column-list {
position: relative;
}
.column-list::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -32px;
width: 8px;
background-color: #6cb33f;
}
.column-list h4::before {
content: '';
position: absolute;
left: -56px;
top: -2px;
width: 32px;
height: 32px;
border: 8px solid #6cb33f;
background-color: #fff;
border-radius: 50%;
}
.header {
display: grid;
place-items: center;
position: relative;
height: 100svh;
overflow-x: clip;
padding-block: 7rem;
margin-block-end: 3rem;
z-index: 0;
}
.header-image {
grid-column: 1 / -1 !important;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.5;
object-fit: cover;
z-index: -1;
animation: header-fade linear forwards;
animation-timeline: view();
animation-range: exit;
}
.header-content {
animation: fade-out linear;
animation-timeline: view();
animation-range: exit -500px;
}
.fade-container a {
    color: #fff;
}
.dark-container h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 32px;
    position: relative;
}
.dark-container h2::after {
    content: '';
    position: absolute;
    bottom: -16px;
    height: 8px;
    left: 0;
    background-color: #6cb33f;
    animation: header-underline linear forwards;
    animation-timeline: view();
    animation-range: 0% normal;
}
.dark-container h3 {
    font-size: 1.6rem;
    font-weight: 900;
}
.dark-container h2, .dark-container h3, .dark-container h4 {
    text-transform: uppercase;
    color: #6cb33f;
}
.dark-container h4 {
    margin-top: 32px;
    margin-bottom: 8px;
    font-style: italic;
    font-weight: 700;
}
.dark-container p {
    font-size: 1.4rem;
}
#h-creating-the-workforce-of-tomorrow {
    text-transform: uppercase;
    font-size: 2.4rem;
    margin-bottom: 32px;
    font-weight: 900;
}
.link-column.col div {
    background-color: transparent;
    padding: 8px 16px;
    position: relative;
    border-radius: 0;
}
.link-column.col div:hover {
    background-color: transparent !important;
}
.link-column h3 {
    color: #6cb33f;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
    text-shadow: none;
    font-size: 1.6rem;
}
.link-column.col div:hover h3 {
    color: #fff;
}
.link-column.col div::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 8px;
    background-color: #6cb33f;
    transition: all 0.5s ease;
}
.link-column.col div:hover::after {
    width: 100%;
    background-color: #fff;
}
.testimonial {
    color: #2b2c2f;
    font-family: "Merriweather", serif;
    font-weight: 300;
    position: relative;
}
.testimonial figure {
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    border: 4px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}
.testimonial figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.testimonial p {
    padding-left: 168px;
}
.modal-content {
    background-color: var(--primary-font-color);
}
.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.nf-field-element input[type="submit"] {
    background-color: #6cb33f;
    color: #fff;
    border: 2px solid #6cb33f;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 16px;
    transition: all 0.5s ease;
}
.nf-field-element input[type="submit"]:hover {
    background-color: #fff;
    color: #6cb33f;
}
@media all and (max-width: 768px) {
    .testimonial figure {
        left: 50%;
        top: -32px;
        transform: translateX(-50%);
    }
    .testimonial p {
        padding-left: 0;
    }
    .testimonial p:first-of-type {
        padding-top: 168px;
        text-align: center;
    }
    .column-list::before {
        left: -12px;
        width: 8px;
    }
    .column-list h4::before {
        left: -36px;
    }
}