:root {
    --li-purple: #4515b4;
    --li-green: #24c0af;
    --li-blue: #55ACEE;
    --li-slime: #61EE89;
}

body {
    font-family: 'Gerbera', sans-serif;
    font-weight: 300;
    color: #373737;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    font-weight: 700;
    color: #000;
    display: inline-block;
    position: relative;
    line-height: 1.35;
    margin-bottom: 1.25rem;
}

h1, .h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}

h2, .h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}

h3, .h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    color: #373737;
    display: block;
}

h4, .h4 {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
}

h1:before, h2:before, .h1:before, .h2:before {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(-50vw - 7rem);
    content: '';
    height: 2px;
    width: 50vw;
    border-top: 1px solid #78CDF6;
    transform: translateY(-50%);
}

h1:after, h2:after, .h1:after, .h2:after {
    position: absolute;
    top: 50%;
    left: -7rem;
    content: '';
    background-image: url('../images/fancy-header.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 5rem;
    height: 5rem;
    line-height: 1;
    transform: translateY(-50%);
}

/* "No Graphic" — applied via TinyMCE format (.no-graphic) or Gutenberg block style (.is-style-no-graphic) */
h1.no-graphic:before, h2.no-graphic:before, .h1.no-graphic:before, .h2.no-graphic:before,
h1.is-style-no-graphic:before, h2.is-style-no-graphic:before,
h1.no-graphic:after, h2.no-graphic:after, .h1.no-graphic:after, .h2.no-graphic:after,
h1.is-style-no-graphic:after, h2.is-style-no-graphic:after {
    display: none;
}

p {
    margin-bottom: 1rem;
}

p.large {
    font-size: 1.5rem;
}

a {
    transition: all .3s;
}

strong {
    font-weight: 600;
}

.container-fluid,
.container {
    padding: 0 30px;
}

.container--wider {
    max-width: 1320px;
}

.row {
    margin: 0 -30px;
}
.col,
[class*="col-"] {
    padding: 0 30px;
}

.colour-purple {
    color: var(--li-purple);
}

.colour-green {
    color: var(--li-green);
}

section {
    padding: 3.5rem 0 1rem;
    position: relative;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    margin: 0;
    padding: 0;
    position: relative;
    padding-left: 1rem;
    margin-bottom: .5rem;
}

ul li:before {
    content: '';
    width: .5rem;
    height: .5rem;
    background: var(--li-slime);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .5rem;
}

.no-scroll {
    overflow: hidden;
}

[class*="-card"] {
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.15), 0 8px 16px -8px rgba(0, 0, 0, .15), 0 -6px 16px -6px rgba(0, 0, 0, .025);
}

.underline {
    background: var(--li-slime);
    margin: 0 auto;
    width: 3rem;
    height: .6rem;
    display: block;
    margin-bottom: 3rem;
    margin-top: -2rem;
}

.read-more {
    color: var(--li-green);
    position: relative;
    font-weight: 700;
    margin-top: auto;
}

.read-more:after {
    content: '';
    background-image: url(../images/arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: .9rem;
    width: .9rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: .5rem;
}

.read-more:hover {
    color: var(--li-green);
}

.view-all {
    color: #373737;
    font-weight: 700;
    margin-top: 3rem;
    display: inline-block;
    position: relative;
    margin-bottom: 1rem;
}

.view-all:after {
    content: '\02EF';
    font-size: 5rem;
    position: absolute;
    top: 0;
    line-height: 1;
    margin-top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--li-purple);
}

.view-all:hover {
    color: var(--li-purple);
    text-decoration: none;
}

.intro {
    max-width: 50%;
    margin: 0 auto 2rem;
}

.btn {
    color: #fff;
    border: none;
    border-radius: 3rem;
    padding: .5rem 2rem;
    min-width: 12rem;
    font-weight: 400;
    position: relative;
    transition: all .5s;
    margin: 2rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn+.btn {
    margin-left: 2rem;
}

.btn:hover,
.btn:active {
    color: #fff;
    box-shadow: 3px 3px 5px 0 rgba(38,38,38,.15);
}

.btn:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -12rem 0, 0 0;
    background-image: -webkit-linear-gradient(160deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 29.5%,
            rgba(255, 255, 255, 0.005) 30%,
            rgba(255, 255, 255, 0.1) 40%,
            rgba(255, 255, 255, 0.2) 49.5%,
            rgba(255, 255, 255, 0.0) 50%);
    background-image: linear-gradient(160deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 29.5%,
            rgba(255, 255, 255, 0.005) 30%,
            rgba(255, 255, 255, 0.1) 40%,
            rgba(255, 255, 255, 0.2) 49.5%,
            rgba(255, 255, 255, 0.0) 50%);
    -moz-background-size: 250% 250%, 100% 100%;
    background-size: 250% 250%, 100% 100%;
    -webkit-transition: background-position .5s ease-in-out;
    -moz-transition: background-position .5s ease-in-out;
    -o-transition: background-position .5s ease-in-out;
    transition: background-position .5s ease-in-out;
}

.btn:hover:after,
.btn.active:hover:after {
    background-position: 0 0, 0 0;
    transition-duration: .5s;
}

.btn.blue {
    background: rgb(39, 35, 93);
    background: linear-gradient(90deg, rgba(39, 35, 93, 1) 0%, rgba(36, 193, 175, 1) 100%);
}

.btn.green {
    background: rgb(117, 181, 116);
    background: linear-gradient(90deg, rgba(117, 181, 116, 1) 0%, rgba(97, 238, 137, 1) 100%);
}

.btn.orange {
    background: rgb(254, 102, 68);
    background: linear-gradient(90deg, rgba(254, 102, 68, 1) 0%, rgba(247, 230, 35, 1) 100%);
}

.btn.purple {
    background: rgb(69, 21, 180);
    background: linear-gradient(90deg, rgba(69, 21, 180, 1) 0%, rgba(254, 102, 68, 1) 100%);
}
.btn.hollow {
    background: #fff;
    color: #451F9D;
    border: 1px solid #451F9D;
}
.btn.hollow:hover,
.btn.hollow.active {
    background: rgb(69, 21, 180);
    background: linear-gradient(90deg, rgba(69, 21, 180, 1) 0%, rgba(36, 193, 175, 1) 100%);
    color: #fff;
    border: 1px solid transparent;
}

.btn.blue-orange {
    background: rgb(69, 21, 180);
    background: linear-gradient(90deg, rgba(69, 21, 180, 1) 0%, rgba(36, 193, 175, 1) 100%);
    border-radius: 30px;
}

.btn.blue-orange:hover,
.btn.blue-orange.active {
    background: rgb(254, 102, 68);
    background: linear-gradient(90deg, rgba(254, 102, 68, 1) 0%, rgba(247, 230, 35, 1) 100%);
    color: #fff;
}

.btn i {
    margin-left: 1rem;
}

hr {
    border-top: 1px solid var(--li-green);
    position: relative;
    margin: 4rem 0 -4rem;
}
hr:before,
hr:after {
    content: '';
    width: 1rem;
    height: 1rem;
    background: var(--li-green);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

hr:after {
    right: 0;
}

hr.blue {
    border-top: 1px solid #78cdf6;
}

hr.blue:before,
hr.blue:after {
    background: #78cdf6;
}

hr.purple {
    border-top: 1px solid var(--li-purple);
}

hr.purple:before,
hr.purple:after {
    background: var(--li-purple);
}

hr.orange {
    border-top: 1px solid #fe6644;
}

hr.orange:before,
hr.orange:after {
    background: #fe6644;
}

hr.grey {
    border-top: 1px solid #dcdcd9;
}

hr.grey:before,
hr.grey:after {
    background: #dcdcd9;
}

form input[type="text"],
form input[type="tel"],
form input[type="email"],
form textarea,
form select {
    overflow: visible;
    border: 1px solid var(--li-purple);
    border-radius: 3rem;
    padding: .5rem 1rem;
    margin-bottom: 2rem;
    width: 100%;
    /* box-shadow: 3px 3px 5px 0 rgb(38 38 38 / 15%); */
}

form textarea {
    border-radius: 1.5rem;
}

.content-area .btn {
    margin: .5rem 0;
}

.ratio-16by9,
.ratio-4by3,
.ratio-1to1 {
    height: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ratio-16by9 {
    padding-bottom: 56.25%;
}

.ratio-4by3 {
    padding-bottom: 75%;
}

.ratio-1to1 {
    padding-bottom: 100%;
}

.content-area img {
    max-width: 100%;
    height: auto;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

@media(max-width:1499px) {
    .container-fluid,
    .container {
        padding: 0 15px;
    }
    .row {
        margin: 0 -15px;
    }
    .col,
    [class*="col-"] {
        padding: 0 15px;
    }
    section {
        padding: 4rem 0 2rem 0;
    }
    hr {
        margin: 4rem 0 -2rem;
    }
}

@media(max-width: 1199px) {
    .intro {
        max-width: 100%;
    }
}

@media(max-width: 992px) {
    h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
        margin-bottom: 1rem;
    }
    h1:before, h2:before, .h1:before, .h2:before {
        left: calc(-50vw - 6rem);
    }
    h1:after, h2:after, .h1:after, .h2:after {
        left: -6rem;
        width: 4rem;
        height: 4rem;
    }
    p {
        margin-bottom: 1rem;
    }
    p.large {
        font-size: 1rem;
    }
    .btn {
        margin: 1rem 0;
        min-width: unset;
    }
    .btn+.btn {
        margin-left: 1rem;
    }
    .view-all {
        margin-top: 1rem;
    }
    .intro {
        margin-bottom: 1rem;
    }
    .underline {
        margin-bottom: 1rem;
    }
}

@media(max-width: 575px) {
    body {
        font-size: .8rem;
    }
    section {
        padding: 3rem 0 2rem;
    }
    .btn {
        padding: .5rem 1rem;
    }
    h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
        margin-bottom: 0.75rem;
    }
    h1:before, h2:before, .h1:before, .h2:before {
        left: calc(-50vw - 4rem);
    }
    h1:after, h2:after, .h1:after, .h2:after {
        left: -4rem;
        width: 3rem;
        height: 3rem;
    }

    hr {
        margin: 0rem 0 -2rem;
    }
}