/* Hand coded with enthusiasm and care by Rob at New World Digital Media Ltd - rob@nwdm.co.uk */

/*===============  FONTS ===============*/
@font-face{font-display:swap;font-family:'La Belle Aurore';font-style:normal;font-weight:400;src:url('../media/fonts/la-belle-aurore-v20-latin-regular.woff2') format('woff2')};

@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:300;src:url('../media/fonts/montserrat-v26-latin-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:url('../media/fonts/montserrat-v26-latin-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:400;src:url('../media/fonts/montserrat-v26-latin-italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:500;src:url('../media/fonts/montserrat-v26-latin-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:500;src:url('../media/fonts/montserrat-v26-latin-500italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:600;src:url('../media/fonts/montserrat-v26-latin-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:italic;font-weight:600;src:url('../media/fonts/montserrat-v26-latin-600italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:700;src:url('../media/fonts/montserrat-v26-latin-700.woff2') format('woff2')};



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/*=============== VARIABLES ===============*/
:root {
    /* ------ Layout dimensions ------  */
    --vertical-section-padding: 90px;
    --horizontal-section-padding: max(calc((100vw - 1200px) / 2), 5vw);
    --header-height: 70px;
    --border-radius: 10px;

    /* ------ Fonts ------  */
    --heading-font: 'Montserrat', system-ui, sans-serif;
    --paragraph-font: 'Montserrat', system-ui, sans-serif;

    /* ------ Colours ------  */
    --accent-color-1: #323232;
    --accent-color-2: #9942cd;
    --accent-color-filter-1: none;
    --accent-color-filter-2: none;
    --very-dark-grey: #151515;
    --dark-grey: #111111;
    --medium-grey: #7f7f7f;
    --light-grey: #b9b9b9;
    --very-light-grey: #e9e9e9;
    --bg-color: white;

    /* ------ Gradients ------  */
    --hero-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(153, 66, 205, 1)100%);
    --section-gradient: linear-gradient(150deg, rgba(153, 66, 205, 0.4) 0%, rgba(153, 66, 205, 0.2)100%);
    --gradient-1: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9)100%);

    /* ------ Shadows ------  */
    --box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
    --dropdown-shadow: 0px 13px 18px -10px rgba(0,0,0,0.2);
}


.ql-align-center {
    text-align:center!important;
}

/*=============== LAYOUT ===============*/
* {
    /* outline: 1px dashed grey; */
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    overflow-x: hidden;
    background-color: var(--bg-color);
}

section {
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
}

section img {
    display: block;
    width: 100%;
    background-color: rgba(0,0,0,0.1);
    font-family: var(--paragraph-font);
    font-style: italic;
}

.row {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5%;
}

.col {
    flex-basis: 100%;
}

.hide-on-desktop {
    display: none;
}

.narrow-on-desktop {
    max-width: 800px;
    margin: 0 auto;
}

.cropped-img {
    width: 100%;
    aspect-ratio: 1.2;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius);
}

.section-bg-img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section-bg-img-container img {
    display: block;
    min-width: 100%;
    height: 130%;
    object-fit: cover;
    object-position: center;
    transition: translate 0.3s;
}

.section-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: var(--section-gradient);
    backdrop-filter: blur(0px) brightness(1);
}

.disable-scroll {
    height: 100dvw;
    max-height: 100dvw;
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;

}

::-webkit-scrollbar-track {
    background: var(--very-light-grey);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color-2);
    border-radius: 10px;
}

.grey-bg {
    background-color: var(--very-light-grey);
}

/*=============== TYPOGRAPHY ===============*/
h1, h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 0.3em;
    font-family: var(--heading-font);
    font-weight: 400;
    color: var(--accent-color-2);
    /* text-transform: uppercase; */
}

h2 {
    margin: 0;
    font-size: 2.8rem;
}

h3 {
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 1.8rem;
}

h4 {
    font-size: 1.4rem;
}

p, input, select, label, textarea, q{
    font-family: var(--paragraph-font);
    font-size: 1.2rem;
    color: var(--dark-grey);
    line-height: 1.5em;
}

p a {
    color: inherit;
    font-weight: 500;
    line-height: 1.5em;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(0,0,0,0.2);
    transition: 0.3s;
}

p a:hover {
    text-decoration-color: var(--accent-color-2);
}

q {
    display: block;
    font-style: italic;
    font-weight: 500;
    text-align: center;
    color: var(--accent-color-2);
    font-size: 1.6rem;
}

ul, ol {
    font-family: var(--paragraph-font);
    font-size: 1.2rem;
    margin: 0;
    padding: 0 0 1em 1em;
}

ul {
    list-style-type: square;
}

ul li, ol li {
    color: var(--dark-grey);
    margin: 0;
    padding: 0.5em 0;
    line-height: 1.5em;
    font-weight: 500;
}

ul li::marker {
    color: var(--accent-color-2);
    font-size: 1em;
}

b {
    font-weight: 700;
}

figcaption {
    margin: 1em 0;
    font-family: var(--paragraph-font);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    color: var(--dark-grey);
    text-align: center;
}

hr {
    border-color: lightblue;
}

a:focus-visible {
    outline: 4px solid rgb(255, 217, 1);
}

.text-cols {
    columns: 550px;
    column-gap: 3em;
    column-rule: 2px solid var(--light-grey);
}

.text-cols p {
    break-inside: avoid;
}

.pre-heading {
    font-family: var(--paragraph-font);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1em;;
    color: var(--dark-grey);
    text-transform: uppercase;
}

.skip-nav-link {
    position: absolute;
    top: 1em;
    left: 50%;
    padding: 0.6em 1em;
    transform: translateX(-50%) translateY(-200%);
    font-family: var(--paragraph-font);
    color: white;
    text-decoration: none;
    background-color: rgba(0,0,0, 0.9);
    border-radius: var(--border-radius);
    z-index: 4;;
    transition: 0.3s
}

.skip-nav-link:focus {
    transform: translateX(-50%) translateY(0);
}

/*=============== BUTTONS ===============*/
.button {
    display: inline-block;
    margin: 1em 0 0 0;
    padding: 0.6em 1.2em;
    font-family: var(--paragraph-font);
    font-size: 1.2rem;
    font-weight: 500;
    /* text-transform: uppercase; */
    text-decoration: none;
    border-radius: 2em;
    box-shadow: var(--box-shadow);
    transition: all 0.3s;
    cursor: pointer;
}

.button.primary {
    margin-right: 0.;
    background-color: var(--accent-color-2);
    border: 2px solid var(--accent-color-2);
    color: white;
}

.button.secondary {
    background-color: transparent;
    color: var(--accent-color-1);
    border: 2px solid var(--accent-color-1);
}

.button.white {
    background-color: white;
    border: 2px solid white;
    color: black;
}

.button.white-outline {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.button:hover {
    scale: 1.03;
}

/*=============== TOP BAR  ===============*/
.top-bar {
    display: none; /* Change to flex */
    width: 100%;
    z-index: 3;
    justify-content: center;
    align-items: center;
    gap: 2em;
    padding: 0 var(--horizontal-section-padding);
    background-color: rgba(255,255,255,0);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: background-color 0.5s;
}

.top-bar > * {
    margin: 0.3em 0;
}

.top-bar p {
    padding: 0;
    color: white;
    text-align: center;
}

.top-bar tel,
.top-bar address {
    font-family: var(--paragraph-font);
    color: white;
    font-style: normal;
}

.top-bar a {
    text-decoration: none;
}

/*=============== HEADER ===============*/
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
}

.header-main {
    height: var(--header-height);
    padding: 0 var(--horizontal-section-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    transition: background-color 0.5s;   
}

.header-main div {
    display: flex;
    gap: 1em;
    align-items: center;
}
header nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    height: 100%;
    gap: 1em;
    transition: filter 1s;
}

header nav ul li {
    list-style-type: none;
    align-content: center;
    position: relative;
    transition: background-color 0.3s;
}

/* Dropdown Menu */
header nav ul ul {
    width: auto;
    height: auto;
    margin-left: -1em;
    padding: 0.5em 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    border-radius: calc(var(--border-radius)*1);
    opacity: 0;
    box-shadow: var(--dropdown-shadow);
    transform-origin: top;
    transition: opacity 0.3s;
    pointer-events: none;
}

header nav ul ul li {
    display:  block;
    margin: 0 1em;
    line-height: 1em;
    white-space: nowrap;
}

header nav ul ul li a {
    color: var(--dark-grey);
}

header nav li:hover ul {
    opacity: 1;
    pointer-events: auto;
}

/* Dropdown appears with tab key */
header nav li:focus-within ul {
    opacity: 1;
    pointer-events: auto;
}

li:has(ul) > a {
    position: relative;
    margin-right: 1em;
}

/* Dropdown arrow*/
li:has(ul) > a::after {
    content: '⏷';
    position: absolute; 
    top: -0.3em;
    right: -1.1em;   
    transform-origin: 0 57%;
    transition: transform 0.5s, filter 0.3s;
    transition-delay: 0.1s;
    pointer-events: none; 
}

/* Flip drodown arrow */
li:has(ul):hover > a::after {
    transform: rotateX(180deg);
}

header nav ul ul li:first-child {
    /* display: none; */
}

header nav a {
    font-family: var(--paragraph-font);
    font-size: 1.1rem;
    font-weight: 400;
    text-decoration: none;
    /* text-transform: uppercase; */
    color: white;
    white-space: nowrap;
    transition: color 0.3s, opacity 0.3s, font-weight 0.3s;
}

header nav a:hover {
    opacity: 0.7;
}

header ul li:last-child a {
    padding: 0.5em 0.7em;
    font-family: var(--paragraph-font);
    font-weight: 600;
    text-decoration: none;
    color: white;
    background-color: var(--accent-color-2);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: filter 0.3s;
}

header ul li:last-child a:hover {
    color: white;
    opacity: 1;
    filter: brightness(1.1);
}

header .header-main a[href^="tel:"] {
    padding: 0.5em 0.7em;
    font-family: var(--paragraph-font);
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: white;
    background-color: var(--accent-color-2);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s, color 0.3s;
}

header a[href^="tel:"]:hover {
    background-color: var(--accent-color-1);
    color: white;
    opacity: 1;
}

/* header.js classes */
.white-bg {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
}

.colored-bg {
    background-color: var(--accent-color-1);
}

.dark-nav-text {
    color: var(--dark-grey);
}

.dark-nav-text:hover {
    color: var(--accent-color-2);
    opacity: 1;
}

.dark-dropdown-arrow {
    filter: brightness(0);
}

.header-shadow {
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

.dropdown-shadow {
    box-shadow: 0px 13px 18px -10px rgba(0,0,0,0.2);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    filter: invert(1) opacity(0.7);
    width: 1.6em;
    aspect-ratio: 1.3;
    position: relative;
    transition: opacity 0.3s, filter 1s;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: black;
    border-radius: var(--border-radius);
    transition: transform 0.3s;
}

.hamburger span:nth-child(1) {
    transform-origin: 1.5px 1.5px;
}

.hamburger span:nth-child(2) {
    transform-origin: 0;
}

.hamburger span:nth-child(3) {
    transform-origin: 1.5px 1.5px;
}

.hamburger.hamburger-cross span:nth-child(1) {
    transform: rotate(45deg) scaleX(1.05);
}

.hamburger.hamburger-cross span:nth-child(2) {
    transform: scale(0);
}

.hamburger.hamburger-cross span:nth-child(3) {
    transform: rotate(-45deg) scaleX(1.05);
}

.hamburger-dark {
    filter: invert(0.5) opacity(0.7);
}

.hamburger.hamburger-cross.hamburger-dark {
    filter: invert(1);
}

.active-nav {
    color: var(--accent-color-2);
    font-weight: 600;
}

/*=============== LOGO ===============*/
.logo {
    display: block;
    height: calc(var(--header-height)*0.8);
    transform-origin: top left;
    opacity: 1;
    transition: filter 0.5s, transform 1s, transform-origin 1s, opacity 0.3s, box-shadow 0.3s;
}

.logo:hover {
    opacity: 0.7;
}

.white-logo {
    transform: scale(2);
    filter: brightness(0) invert(1);
}

/*=============== HEROS ===============*/
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--accent-color-1);
    min-height: 60vh;
    position: relative;
}

.hero-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--accent-color-1);
    min-height: 100vh;
    position: relative;
}

.hero .hero-text-container {
    max-width: 800px;
    margin-inline: auto;
    z-index: 3;
}

.hero-home .hero-text-container {
    /* margin-top: var(--header-height); */
    max-width: 800px;
    margin-inline: auto;
    z-index: 3;
}

.hero-text-container h1 {
    margin-top: 1em;
    font-size: clamp(1rem, 8vw, 3rem);
    font-weight: 300;
    text-wrap: balance;
    text-align: center;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    color: white;
}

.hero-home .hero-text-container h1 {
    font-size: clamp(1rem, 8vw, 3rem);
    font-weight: 300;
    text-wrap: balance;
    text-align: center;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    color: white;
}

.hero-text-container h1 b {
    font-weight: 500;
}

.hero-text-container p {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
    text-transform: uppercase;
    color: white;
}

.hero-button-container {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
    z-index: 3;
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out, scale 5s linear;
}

.hero-image-container img.active {
    opacity: 1;
    scale: 1.1; 
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: var(--hero-gradient);
    backdrop-filter: blur(0px) brightness(1);
}

.hero-accreditations-container {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    position: absolute;
    left: 0;
    bottom: 1em;
    width: 100%;
    padding: 0 var(--horizontal-section-padding);
    z-index: 3;
}

.hero-accreditations-container img {
    height: 9vw;
    max-height: 50px;
    width: auto;
    background-color: transparent;
    filter: brightness(0) invert(1) opacity(0.7);
}

/*=============== FOOTER  ===============*/
footer {
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: #220f2d;
    position: relative;
}

footer .row {
    align-items: flex-start;
}

footer h2 {
    margin-bottom: 0.5em;
    font-size: 2rem;
    color: white;
}

footer tel,
footer address {
    margin: 0;
    padding: 0.5em 0;
    font-family: var(--paragraph-font);
    font-size: 1.3rem;
    font-style: normal;
    border-left: 4px solid var(--accent-color-2);
    padding-left: 1em;
}

.footer-main {
    text-align: center;
}

.footer-main h2 {
    margin-top: 0.5em;
    font-size: 1rem;
    color: #d885ff;
    text-transform: uppercase;
}

.socials-container {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.5em 0 0.5em 1em;
    border-left: 4px solid var(--accent-color-2);
}

.socials-container a {
    text-decoration: none;
    filter: brightness(0) invert(1);
    transition: filter 0.3s;
}

.socials-container a:hover {
    filter: none;
}

.socials-container a img {
    display: block;
    height: 2em;
}

.footer-logo {
    display: block;
    width: 200px;
    filter: invert(1) hue-rotate(180deg);
    margin-inline: auto;
}

.footer-bottom {
    padding: 0.5em var(--horizontal-section-padding);
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0.5em;
    border-top: 1px solid rgba(216, 133, 255, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
}

.footer-bottom p {
    margin: 0;
    color: rgba(216, 133, 255, 0.5);
    font-size: 0.8rem;
    font-weight: 400;
}

.footer-bottom p a {
    text-decoration-thickness: 1px;
}

/*=============== HOME PAGE ===============*/
/*=============== INTRO SECTION ===============*/
.intro-section {
    background-color: var(--accent-color-2);
    --roller-text-size: clamp(1em, 7.5vw, 3rem);
    padding-top: 0;
}

.intro-section h2 {
    font-size: 2rem;
    line-height: 1em;
    color: white;
}

.text-roller-container {
    margin: 1em 0;
    position: relative;
    height: calc(var(--roller-text-size)*1.2);
    overflow: hidden;
}

.text-roller {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
    animation: roller-text 18s infinite;  
}

.text-roller li {
    margin: 0;
    padding: 0;
    font-size: var(--roller-text-size);
    font-weight: 600;
    line-height: 1.2em;
    color: white;
    white-space: nowrap;
}

@keyframes roller-text {
    0% {transform: translateY(0)}
    8.33% {transform: translateY(-8.33%)}
    16.66% {transform: translateY(-16.66%)}
    24.99% {transform: translateY(-24.99%)}
    33.32% {transform: translateY(-33.32%)}
    41.65% {transform: translateY(-41.65%)}
    49.98% {transform: translateY(-49.98%)}
    58.31% {transform: translateY(-58.31%)}
    66.64% {transform: translateY(-66.64%)}
    74.97% {transform: translateY(-74.97%)}
    83.3% {transform: translateY(-83.3% )}
    91.63% {transform: translateY(-91.63%)}
    100% {transform: translateY(0)}
}

.intro-section p {
    color: white;
}

/*=============== WHY SECTION ===============*/
.behavior-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5em;
    margin: 3em 0;
    border-radius: calc(var(--border-radius)*3);
}

.behavior-boxes div {
    padding: 2em 1em;
    border-radius: calc(var(--border-radius)*1);
    text-align: center;
    box-shadow: var(--box-shadow);
    background-position: center;
    background-size: cover;
}

.behavior-boxes div i {
    color: white;
    opacity: 0.5;
    font-size: 6rem;
}

.behavior-boxes h3,
.behavior-boxes h4 {
    text-align: center;
    color: white;
    font-weight: 500;
}

.behavior-boxes ul {
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
    list-style-type: none;
}

.behavior-boxes li {
    padding: 0.4em 0;
    color: white;
    line-height: 1.2em;
    font-weight: 400;
}


.behavior-boxes p {
    margin: 0;
    color: white;
}


.behavior-boxes div:nth-child(1) {
    background-color: rgba(0, 0, 0, 0.7);
    background-image: 
        linear-gradient(0deg, rgba(255, 15, 15, 1) 0%, rgba(248, 155, 41, 0.7) 100%),
        url('../media/images/fight.jpg');

}

.behavior-boxes div:nth-child(2) {
    background-color: #ff0f7b;
    background-image: 
        linear-gradient(0deg, rgba(9, 165, 93, 1) 0%, rgba(13, 155, 171, 0.7) 100%),
        url('../media/images/flight.jpg');
}

.behavior-boxes div:nth-child(3) {
    background-color: #ff0f7b;
    background-image:
        linear-gradient(0deg, rgba(6, 61, 124, 1) 0%, rgba(11, 138, 207, 0.7) 100%),
        url('../media/images/freeze.jpg');
}

.behavior-boxes div:nth-child(4) {
    background-color: #ff0f7b;
    background-image:
        linear-gradient(0deg, rgb(84, 6, 140) 0%, rgba(234, 46, 165, 0.7) 100%),
        url('../media/images/fawn.jpg');
}

.barometer-container {
    margin: 3em 0;
}

@media (max-width: 1200px) {
    .barometer-container {
        padding-bottom: 1em;
        overflow-x: scroll; 
    }
}

.barometer {
    width: 100%;
    margin-bottom: 0.5em;
    font-family: var(--paragraph-font);
    color: var(--dark-grey);
    font-size: 1.3rem;
    border-collapse: collapse;
    background-color: var(--accent-color-2);
    background-image: linear-gradient(90deg, rgba(8, 255, 82, 0.7) 0%, rgba(202, 255, 12, 0.7) 20%, rgba(244, 204, 4, 0.7) 40%, rgba(254, 0, 0, 0.7) 60%, rgba(76, 75, 76, 0.7) 80%);
    border-radius: calc(var(--border-radius)*1);
    box-shadow: var(--box-shadow);
}

.barometer th,
.barometer td,
.barometer tr {
    /* border: 1px solid var(--very-light-grey); */
    text-align: center;
    color: white;
    padding: 0.7rem 1rem;
}

.barometer th {
    width: 25%;
    font-weight: 600;
}

.barometer td {
    vertical-align: top;
}

.barometer h3 {
    margin: 0;
    margin-bottom: 0.5em;
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
    color: white;
}

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

.barometer li {
    margin: 0;
    padding: 0;
    color: white;
}

/* --- 10 point scale --- */
.barometer td[colspan="1"] {
    width: 8.333%;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 600;
    background-color: rgba(255,255,255,0.3);
}

.barometer td[colspan="1"]:nth-child(11),
.barometer td[colspan="1"]:nth-child(12) {
    color: transparent;
}


/* --- Bottom arrow--- */
.barometer tr:last-child {
    background-color: white;
    color: var(--dark-grey);
}

.barometer tr:last-child td {
    color: var(--medium-grey);
    font-weight: 600;;
}

.barometer td[colspan="7"] {
    background-color: var(--medium-grey);
    padding: 1.045em 0;
    background-position: center;
    background-clip: content-box;
}

.barometer tr:last-child  td[colspan="2"] {
    padding-right: 0;
}

.barometer tr:last-child  td[colspan="2"] i {
    font-size: 1.4rem;
    float: right;
    transform: translateY(0.05em)
    scale(1.15);
}

.barometer tr:last-child  td[colspan="3"] {
    padding-left: 0;
}

.barometer tr:last-child  td[colspan="3"] i {
    font-size: 1.4rem;
    float: left;
    transform: translateY(0.05em)
    scale(1.15);
}

/*=============== ABOUT TRE SECTION ===============*/
.about-tre-section {

}

.about-tre-section h2,
.about-tre-section p,
.about-tre-section li {

}


video {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 1em 0;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.banner-img-section {
    height: 400px;
    position: relative;
}

.benefits-list {
    margin: 2em 0;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.benefits-list li {
    margin: 0;
    padding: 1em;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    font-weight: 400;
}

.benefits-list h4 {
    margin: 0;
    margin-bottom: 0.5em;
    font-size: 1.6rem;
}

.benefits-list p {
    margin: 0;
    padding: 0;
}

/*=============== ABOUT JO SECTION ===============*/
.about-jo-section {
    background-color: var(--accent-color-2);
}

.about-jo-section .row:nth-child(1) {
    margin-bottom: 2em;
}

.about-jo-section h2,
.about-jo-section p {
    color: white;
}


.jo-video {
    aspect-ratio: 1;
    box-shadow: var(--box-shadow);
    border-radius: calc(var(--border-radius)*2);
}

/*=============== WATCH TRE SECTION ===============*/
.watch-tre-section .narrow-on-desktop {
    text-align: center;
}

/*=============== PRICING SECTION ===============*/
.pricing-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin: 3em 0;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 2em;
    box-shadow: var(--box-shadow);
    border: 3px solid white;
    border-radius: var(--border-radius);
}

.pricing-card h3 {
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
    color: var(--dark-grey);
}

.pricing-card .price {
    margin: 0.1em 0;
    text-align: center;
    font-size: 3rem;
    color: var(--accent-color-2);
}

.pricing-card .sub-price {
    margin: 0;
    text-align: center;
    font-style: italic;
}

.pricing-card hr {
    border-color: white;
}

.pricing-card ul {
    margin-top: 1em;
    padding-top: 0.5em;
    border-top: 1px solid rgba(0,0,0,0.2);
}
.pricing-card li {
    font-weight: 400;
    list-style-type: none;
    position: relative;
    font-size: 1.2rem;
}

.pricing-card li::before {
    content: '';
    height: 1em;
    width: 1em;
    background-color: var(--accent-color-2);
    mask-image: url('../media/svg/check-solid.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 1.4em;
    transform: translate(-1.5em, -50%);
}

.pricing-card.popular {
    border: 3px solid var(--accent-color-2);
    position: relative;
}

.pricing-card.popular::before {
    content: 'Popular';
    padding: 0.2em 0.4em;
    background-color: var(--accent-color-2);
    color: white;
    font-family: var(--paragraph-font);
    font-size: 1.2rem;
    border-radius: 0.3em;
    position: absolute;
    top: -0.7em;
    left: 50%;
    transform: translateX(-50%);
}

.pricing-card .button {
    margin-top: auto;
    align-self: center;
}

/*=============== TESTIMONIAL SECTION ===============*/
.testimonial-section {
    background-color: var(--accent-color-2);
}


.testimonial-section h2 {
    text-align: center;
    color: white;
}

.blockquote-wrapper {
    max-height: 320px;
    margin-top: 3em;
    transition: max-height 1s;
    overflow: hidden;
    position: relative;
}

#loadMoreButton {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

.disabled-button {
    opacity: 0.3;
    pointer-events: none;
}

.bottom-fade {
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--accent-color-2) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
}

.testimonial-section blockquote {
    margin: 0;
    margin-bottom: 2em;
    padding: 2em;
    position: relative;
    columns: 400px;
    gap: 2em;
    column-rule: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(255,255,255,0.2);
    border-radius: var(--border-radius);
}

.testimonial-section blockquote p {
    color: white;
}
.testimonial-section blockquote p:first-of-type {
    margin-top: 0;
}
.testimonial-section blockquote i {
    font-size: 2rem;
    opacity: 0.7;
}

.testimonial-section blockquote cite {
    font-family: 'La Belle Aurore';
    color: white;
    float: right;
    font-size: 2em;
    font-style: normal;
}

/*=============== FAQ SECTION ===============*/
.details-container {
    margin: 3em 0;
}

details {
    margin: 1.5em 0;
    padding: 1em;
    border: 2px solid white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: border-color 0.3s;
}

details summary {
    display: block;
    font-size: 1.3rem;
    font-family: var(--paragraph-font);
    font-weight: 500;
    color: var(--dark-grey);
    padding-right: 1em;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}

details summary:before {
    content: '';
    width: 1em;
    height: 1em;
    background-image: url('../media/svg/cross.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    filter: opacity(0.3);
    transform: rotate(45deg);
    transform-origin: center;
    transition: 0.3s;
}

details[open] > summary:before {
    transform: rotate(0deg);
}

details:hover summary:before  {
    filter: invert(23%) sepia(28%) saturate(6752%) hue-rotate(267deg) brightness(103%) contrast(76%);
}

details summary::-webkit-details-marker {
    display:none;
}

details > div {
    overflow: hidden;
    display: grid;
    /* intentionally independent from .animation as Safari 16
    would otherwise ignore the expansion animation. */
    animation-duration: 0.2s;
}

details > .animation {
    animation-name: grid-expand;
    animation-timing-function: ease-out;
}

details > .collapsing {
    animation-direction: reverse;
    animation-timing-function: ease-in;
}

details > div > div {
    min-height: 0;
}

details summary::-webkit-details-marker { 
    display: none;
}


@keyframes grid-expand {
    0% {grid-template-rows: 0fr;}
    100% {grid-template-rows: 1fr;}
    }

/*=============== BIG CTA SECTION ===============*/
.big-cta {
    background-color: var(--accent-color-2);
    background-image: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(153, 66, 205, 1) 80%),
        url('../media/images/bg-image-3.jpg');
    background-size: cover;
    background-position: center;
}    

.big-cta h2,
.big-cta p {
    color: white;
    text-align: center;
}

.big-cta .contact-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
    margin: 2em 0;
}

.big-cta .contact-details a {
    color: white;
    text-decoration: none;
    font-family: var(--paragraph-font);
    font-size: 1.8rem;
    font-weight: 400;
    border-radius: vaR(--border-radius);
    transition: opacity 0.3s;
}

.big-cta .contact-details a:hover {
    opacity: 0.7;
}


/*=============== HOME SERVICES SECTION ===============*/
.home-services-section .col p {
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}

.home-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    margin-top: 3rem;
}

.home-services-grid .service-card {
    width: 100%;
    aspect-ratio: 1.4;
    background-color: var(--accent-color-1);
    border-radius: calc(var(--border-radius)*1);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}

.home-services-grid .service-card img {
    width: 100%;
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center;
    border-radius: calc(var(--border-radius)*1);
    transition: scale 0.5s, filter 0.3s;
}

.home-services-grid .service-card .service-card-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1em;
    background-image: var(--gradient-1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: inherit;
    z-index: 2;
}

.home-services-grid .service-card .service-card-text h3 {
    color: white;
    /* text-transform: uppercase; */
}

.home-services-grid .service-card .service-card-text p {
    margin: 0;
    padding: 0;
    color: white;
}

.home-services-grid .service-card:hover.service-card img {
    scale: 1.05;
    filter: brightness(1.2);
}

.home-services-grid .service-card:last-child .service-card-text {
    background-image: none;
}

.home-services-grid .service-card:last-child .service-card-text h3 {
    margin-bottom: 1em;
}


.home-services-grid .service-card:last-child:hover {
    background-color: var(--accent-color-2);
}

.home-services-section .button {
    display: none;
    margin-top: 2em;
}

/*=============== HOME ABOUT US SECTION ===============*/
.about-us-section {
    padding: 0;
    background-color: var(--accent-color-1);
    position: relative;
}

.about-us-section .section-text-container {
    box-sizing: content-box;
    width: 100%;
    max-width: 900px;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    position: relative;
    z-index: 3;
    position: relative;
}

.about-us-section .section-text-container h2 {
    color: white;
}

.about-us-section .about-us-paragraph-container {
    padding-left: 1em;
    border-left: 4px solid white;
}

.about-us-section .section-text-container p {
    color: white;
}


/*=============== lATEST WORK SECTION  ===============*/
.latest-work-section {
    padding-left: 0;
    padding-right: 0;
}

.latest-work-section .row {
    padding-left: var(--horizontal-section-padding);
    padding-right: var(--horizontal-section-padding);
}
.latest-work-section .col p {
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}

.latest-work-section .col:has(a) {
    text-align: left;
}

.latest-work-section a {
    margin: 0;
}

.latest-work-carousel {
    width: 100%;
    margin: 3rem 0 2rem 0;
    border-radius: calc(var(--border-radius)*1);
    overflow-x: hidden;
    position: relative;
    white-space: nowrap;
}

.latest-work-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--horizontal-section-padding);
    height: 100%;
    background-image: linear-gradient(90deg, white 0%, transparent 100%);
    z-index: 2;
}

.latest-work-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: var(--horizontal-section-padding);
    height: 100%;
    background-image: linear-gradient(90deg, transparent 0%, white 100%);
    z-index: 2;
}

.carousel-content {
    width: fit-content;
    padding: 10px 0; /* So img shadow isn't clipped */
    display: inline-flex;
    overflow: hidden;
}

.carousel-content-slide {
    animation: slide 40s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.latest-work-carousel .carousel-content img {
    height: 300px;
    width: auto;
    margin-right: 1em;
    border-radius: calc(var(--border-radius)*1);
    box-shadow: var(--box-shadow);
}

.latest-work-carousel:hover .carousel-content {
    /* animation-play-state: paused; */
}

.latest-work-section .button {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

/*=============== AREAS COVERED SECTION  ===============*/
.areas-covered-section {
    background-color: var(--accent-color-1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.areas-covered-section h2 {
    color: white;
}

.areas-covered-section .pre-heading {
    color: white;
}

.areas-covered-section .col p {
    padding-left: 1em;
    border-left: 4px solid white;
    color: white;
}

#map {
    width: 100%;
    height: 350px;
    margin-top: 3em;
    border-radius: calc(var(--border-radius)*1);
    z-index: 1;
}

.areas-covered-section .map-credit {
    margin: 0;
    margin-top: 0.5em;
    padding: 0;
    border: none;
    text-align: right;
    font-size: 0.8rem;
    color: white;
    opacity: 0.7;
}

.areas-covered-section .map-credit a {
    text-decoration-thickness: 1px;
    text-decoration-color: inherit;
}

/*=============== REVIEWS SECTION  ===============*/
.home-reviews-section .col p {
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}

.home-reviews-grid {
    margin: 3rem 0 2rem 0;
    columns: 400px;
    column-gap: 2em;
}

.review-card {
    margin-bottom: 2em;
    padding: 1.5em;
    background-color: var(--very-light-grey);
    border-radius: calc(var(--border-radius)*1);
    break-inside: avoid;
    box-shadow: var(--dropdown-shadow);
}

.review-name {
    position: relative;
}

.review-name p {
    margin: 0;
    margin-left: 2em;
    font-size: 1.4rem;
    font-weight: 600;
}

.review-name::before {
    content: '';
    height: 100%;
    aspect-ratio: 1;
    position: absolute;
    left: 0;
    background-color: var(--accent-color-1);
    background-image: url('../media/svg/user-solid.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    outline: 5px solid var(--accent-color-1)
}

.review-source img {
    display: block;
    height: 1.2rem;
    width: auto;
    background-color: transparent;
}

.review-stars {
    margin: 1em 0;
    width: 9rem;
    height: auto;
    background-color: transparent;
    filter: invert(64%) sepia(94%) saturate(324%) hue-rotate(4deg) brightness(99%) contrast(85%);
}


.review-text p {
    margin: 0.5em 0;
    padding: 0;
}

.home-reviews-section .button {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

/*=============== CTA SECTION  ===============*/
.cta-section {
    background-color: black;
    position: relative;
}

.cta-section .row {
    z-index: 3;
    position: relative;
}

.cta-section .pre-heading {
    color: white;
}

.cta-section h2 {
    color: white;
}

.cta-section p {
    padding-left: 1em;
    border-left: 4px solid white;
    color: white;
}

/*=============== SERVICES PAGE  ===============*/
/*=============== SERVICES PAGE INTRO  ===============*/
.services-intro-section img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: rgba(0,0,0,0.1);
}

.services-list-section {
    background-color: var(--accent-color-1);
}

.services-list-section .pre-heading,
.services-list-section h2,
.services-list-section p {
    color: white;
}

.services-list-section p {
    padding-left: 1em;
    border-left: 4px solid white;
}

.services-list {
    columns: 300px;
    margin: 2em 0;
    padding: 1em;
    background-color: rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
}

.services-list li {
    list-style-type: none;
    margin-left: 1em;
    color: white;
    position: relative;
}

.services-list li::before {
    content: '';
    height: 1em;
    width: 1em;
    background-color: white;
    mask-image: url('../media/svg/square-check-solid-black.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-1.5em, -50%);
}

.services-list-section .button {
    margin: 0;
    float: right;
}

.why-choose-us-section  p {
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}

.why-choose-us-list li {
    list-style-type: none;
    margin-left: 1.3em;
    font-size: 1.4rem;
    font-weight: 500;
    font-style: italic;
    position: relative;
}

.why-choose-us-list li::before {
    content: '';
    background-image: url('../media/svg/check-solid-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    width: 1em;
    background-color: var(--accent-color-2);
    border: 0.3em solid transparent;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-2em, -50%);
}

/*=============== CONTENT PAGE  ===============*/
.content-section {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2em;
}

.content-container {
    flex-basis: 60%;
}

.content-container img {
    display: block;
    width: 100%;
    height: auto;
    margin: 3em 0;
    border-radius: var(--border-radius);
    color: var(--dark-grey);
}

.content-container ul {
    columns: 300px;
    margin-bottom: 2em;
    padding: 0.5em 2em;
    background-color: var(--very-light-grey);
    border-radius: var(--border-radius);
}

.content-container li {
    list-style-type: none;
    margin-left: 1em;
    position: relative;
}

.content-container li::before {
    content: '';
    height: 1em;
    width: 1em;
    background-color: var(--accent-color-1);
    mask-image: url('../media/svg/square-check-solid-black.svg');
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-1.5em, -50%);
}

.content-sidebar {
    width: 30%;
    position: sticky;
    top: calc(var(--header-height) + 1em);
    background-color: white;
}

.content-sidebar h2 {
    font-size: 1.8rem;
}

.content-sidebar ul {
    margin: 0;
    padding: 0;
}

.content-sidebar li {
    list-style-type: none;
    margin: 1em 0;
    padding: 0;
    background-color: rgba(0,0,0,0.1);
    border-left: 4px solid var(--accent-color-1);
}

.content-sidebar li a {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0.5em 1em;
    text-decoration: none;
    font-weight: 500;
    color: var(--dark-grey);
    transition: background-color 0.3s, color 0.5s;
}

.content-sidebar li a:hover {
    color: white;
    background-color: var(--accent-color-1);
}


/*=============== GALLERY PAGE  ===============*/
.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1em;
}

.gallery-item {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    color: rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

.gallery-section > p {
    margin-top: 2em;
    margin-bottom: 0;
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}

.gallery-item:hover.gallery-item img {
    transform: scale(1.1);
}

/*=============== REVIEWS PAGE ===============*/
.review-page-grid {
    margin: 3rem 0 2rem 0;
    columns: 400px;
    column-gap: 2em;
}

.review-page-container > p {
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}


/*=============== CONTACT PAGE ===============*/
.contact-page-content .row {
    align-items: flex-start;
}

.contact-page-content .col:nth-child(1) {
    position: sticky;
    top: calc(var(--header-height) + 1em);
}

.contact-form .form-element {
    margin: 1em 0;
}

.contact-form label {
    display: block;
    font-weight: 500;
    color: white;
} 
    
.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    padding: 0.3em 0.5em;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color-scheme: light;
    color: white;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    transition: background-color 0.3s;
}

.contact-form textarea {
    min-height: 3rem;
    transition: min-height 0.3s;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible {
    background-color: white;
    color: var(--dark-grey);
}

.contact-form textarea:focus {
    min-height: 10rem;
}

.contact-details-container {
    margin-bottom: 3em;
    padding-left: 1em;
    border-left: 4px solid var(--accent-color-1);
}

.contact-details-container a {
    display: block;
    margin: 0.5em 0;
    text-decoration: none;
    font-family: var(--paragraph-font);
    color: var(--dark-grey);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 500;
}

.contact-page-socials-container {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 0.5em 0;
    padding: 0.5em 0 0.5em 1em;
    border-left: 4px solid var(--accent-color-1);
}

.contact-page-socials-container  a {
    text-decoration: none;
    transition: filter 0.3s;
}

.contact-page-socials-container  a:hover {
    filter: opacity(0.7);
}

.contact-page-socials-container a img {
    display: block;
    height: 3em;
    background-color: transparent;
}

.for-employers-aside {
    padding: 2em;
    background-color: var(--very-light-grey);
    border-radius: var(--border-radius);
    box-shadow: var(--dropdown-shadow);
}

.for-employers-aside h2 {
    font-size: 2rem;
}

.for-employers-section-2 {
    background-color: var(--very-light-grey);
    background-image: linear-gradient(180deg, var(--very-light-grey) 0%, white 100%);
}

.what-to-expect-section {
    background-color: var(--accent-color-2);
}

.what-to-expect-section h2 {
    color: white;
    text-align: center;
}

.what-to-expect-section p {
    color: white;
}

.what-to-expect-section ul {
    padding: 1em;
    background-color: rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
}

.what-to-expect-section li {
    margin-left: 1em;
    color: white;
}

.what-to-expect-section li::marker {
    color: rgba(255,255,255,0.5);
}
/*=============== MEDIA QUERIES ===============*/
@media (max-width: 1200px) {
    .behavior-boxes {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1000px) {
    .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5vh;
    }

    .col {
        width: 100%;
    }
    
    .hamburger {
        display: flex;
    }

    header nav {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        height: 100vh;
        width: 100%;
        padding-top: var(--header-height);
        padding-left: 10%;
        padding-right: 10%;
        background-color: var(--accent-color-2);
        transform: translateX(200vw);
        overflow-x: hidden;
        overflow-y: scroll;
        opacity: 0;
        transition: 1s ease;
    }

    header nav ul {
        flex-direction: column;
        height: auto;
        width: 100%;
        gap: 1em;
    }

    header nav ul li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    header nav li:hover {
        background-color: transparent;
    }

    header nav a {
        font-size: 1.6rem;
        color: white;
    }

    /* Dropdown menu*/
    header nav ul ul {
        width: 100%;
        height: auto;
        max-height: 0;
        margin: 0;
        padding: 0;
        padding-left: 1em;
        position: static;
        overflow: hidden;
        opacity: 1;
        border: none;
        border-left: 4px solid;
        border-color: transparent;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        transition: 0.5s ease, border-color 2s;
    }

    /* Dropdown arrow */
    li:has(ul) > a::after {
        top: -0.1em;
    }

    header nav ul ul li {
        margin: 1em 0;
    }

    header nav ul ul li a {
        color: white;
        font-weight: 400;
        white-space: wrap;
    }

    header nav ul ul li:first-child {
        display: block;
    }

    li:has(ul) > a {
        pointer-events: none;
    }

    header a[href^="tel:"] {
        display: none;
    }

    header ul li:last-child {
        text-align: center;
    }

    header ul li:last-child a {
        display: block;
        width: 100%;
        text-decoration: none;
        color: white;
        background-color: #b76be3;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        transition: filter 0.3s;
    }

    .slide-nav {
        transform: translateX(0vw);
        opacity: 1;
    }

    .dropdown-accordion {
        max-height: 500px;
        overflow: visible;
        pointer-events: auto;
        border-color: white;
    }

    .active-nav {
        color: white;
        font-weight: 600;
    }

    .dropdown-shadow {
        box-shadow: inset 0px 13px 18px -10px rgba(0,0,0,0.2);
    }

    .dark-nav-text {
        color: white !important;
    }

    .dropdown-shadow {
        box-shadow: inset 0px 13px 18px -10px rgba(0,0,0,0.2);
    }

    .home-services-section .row {
        gap: 0;
    }

    .home-services-grid {
        grid-template-columns: 1fr 1fr;
    }

    footer .row {
        margin-bottom: var(--vertical-section-padding);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom p {
        text-align: center;
        font-size: 0.9rem;
    }

    .home-services-section .row,
    .latest-work-section .row,
    .areas-covered-section .row,
    .home-reviews-section .row,
    .cta-section .row,
    .services-list-section .row,
    .intro-section .row {
        gap: 0;
    }   

    .content-section {
        flex-direction: column;
    }

    .content-container {
        width: 100%;
    }

    .content-sidebar {
        width: 100%;
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-page-content .col:nth-child(1) {
        position: static;
    }

    .about-us-section .section-text-container {
        box-sizing: border-box;
    }

    .benefits-list {
        grid-template-columns: 1fr;
    }

    .for-employers-section-2 .row {
        flex-direction: column-reverse;
    }
}

@media (max-width: 850px) {
    .pricing-table {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    :root {
        --header-height: 50px;
        --vertical-section-padding: 60px;
    }

    html {
        font-size: 14px;
    }

    h2 {
        font-size: 2.5rem;
    }

    .button,
    #loadMoreButton  {
        display: block;
        width: 100%;
        padding: 0.6em 1em;
        text-align: center;
    }

    .hero-home .hero-text-container p {
        font-size: 1.3rem;
    }

    .hero-button-container {
        flex-direction: column;
        gap: 0;
    }

    .home-services-grid {
        grid-template-columns: 1fr;
    }

    .home-services-grid .service-card {
        aspect-ratio: 2;
    }

    .home-services-grid .service-card:last-child {
        display: none;
    }
    
    .home-services-section .button {
        display: block;
    }

    .latest-work-section .button {
        width: 100%;
    }

    .home-reviews-section .button {
        width: 100%;
    }

    .top-bar {
        flex-wrap: wrap;
        gap: 0em 1em;
        justify-content: center;;
    }

    .latest-work-section .button {
        width: 90%;
    }

    .gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5em;
    }

    .behavior-boxes {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .behavior-boxes div  {
        padding: 2em 0.5em 1em 0.5em;
    }

    .about-jo-section .row {
        flex-direction: column-reverse;
    }

    .banner-img-section {
        height: 300px;
    }

    .footer-main {
        margin-bottom: 60px;
    }

    .watch-tre-section .narrow-on-desktop {
        text-align: left;
    }

    .big-cta h2,
    .big-cta p {
        text-align: left;
    }

    .testimonial-section blockquote {
        padding: 1em;
    }

    .what-to-expect-section h2 {
        text-align: left;
    }

    .for-employers-aside {
        padding: 1em;
    }
}

@media (max-width: 400px) {
    header nav li a[href^="tel:"] {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
}

/*=============== SCROLL ANIMATIONS ===============*/
@media (prefers-reduced-motion: no-preference) {
    /* FADE IN ------------------------------- */
    .fade-in {
        opacity: 0;
    }

    .fade-in-animation {
        animation: fade-in 1s ease forwards;
    }
    
    @keyframes fade-in {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    /* SLIDE LEFT ----------------------------*/
    .slide-left {
        opacity: 0;
    }

    .slide-left-animation {
        animation: slide-left 1s ease forwards;
    }
    
    @keyframes slide-left {
        from {
            transform: translateX(-50%);
            opacity: 0;
        } to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* SLIDE RIGHT ----------------------------*/
    .slide-right {
        opacity: 0;
    }    
    .slide-right-animation {
        animation: slide-right 1s ease forwards;
    }
    
    @keyframes slide-right {
        from {
            transform: translateX(50%);
            opacity: 0;
        } to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* SLIDE DOWN ----------------------------*/   
    .slide-down {
        opacity: 0;
    } 

    .slide-down-animation {
        animation: slide-down 1s ease forwards;
    }
    
    @keyframes slide-down {
        from {
            transform: translateY(-50%);
            opacity: 0;
        } to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* SLIDE UP ----------------------------*/ 
    .slide-up {
        opacity: 0;
    }       

    .slide-up-animation {
        animation: slide-up 1s ease forwards;
    }
    
    @keyframes slide-up {
        from {
            transform: translateY(50%);
            opacity: 0;
        } to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* PULSE ----------------------------*/ 
    .pulse-animation {
        animation: pulse 0.7s ease forwards;
    }

    @keyframes pulse {
        0% {scale: 1}
        50% {scale: 1.1}
        100% {scale: 1}
    }

    /* ANIMATION DELAYS  ----------------------------*/  
    .delay-200ms{
        animation-delay: 200ms;
    }
    
    .delay-300ms{
        animation-delay: 300ms;
    }
    
    .delay-400ms{
        animation-delay: 400ms;
    }
    
    .delay-500ms{
        animation-delay: 500ms;
    }
    
    .delay-600ms{
        animation-delay: 600ms;
    }
    
    .delay-700ms{
        animation-delay: 700ms;
    }
    
    .delay-800ms{
        animation-delay: 800ms;
    }
    
    .delay-900ms{
        animation-delay: 900ms;
    }
    
    .delay-1000ms{
        animation-delay: 1000ms;
    }

    .delay-1200ms{
        animation-delay: 1200ms;
    }
}


/*=============== SECTION SVG DIVIDERS ===============*/
.shapedividers_com-8256{
    overflow:hidden;
    position:relative;
    }
    .shapedividers_com-8256::before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.62" preserveAspectRatio="none"><path d="M35.278.092S8.238.267 0 3.62V.092z" opacity=".2" fill="%23ffffff"/><path d="M35.278.092S8.238.246 0 3.194V.092z" opacity=".2" fill="%23ffffff"/><path d="M35.278.092S8.238.223 0 2.738V.092zM35.278.092H0V0h35.278z" fill="%23ffffff"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedividers_com-8256::before{
    background-size: 100% calc(2vw + 90px);
    }
    }
    @media (max-width: 650px) {
        .shapedividers_com-8256::before{
            background-size: 100% 50px;
            }
    }



.shapedividers_com-8053{
    overflow:hidden;
    position:relative;
    }
    .shapedividers_com-8053::after{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.52" preserveAspectRatio="none"><path d="M0 3.528S27.04 3.352 35.278 0v3.528z" opacity=".2" fill="%23ffffff"/><path d="M0 3.528S27.04 3.374 35.278.425v3.103z" opacity=".2" fill="%23ffffff"/><path d="M0 3.528S27.04 3.396 35.278.882v2.646z" fill="%23ffffff"/><path d="M0 3.527h35.278v.092H0z" fill="%23ffffff"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedividers_com-8053::after{
    background-size: 100% calc(2vw + 90px);
    }}

    @media (max-width: 650px) {
        .shapedividers_com-8053::after{
            background-size: 100% 50px;
            }
}


.shapedividers_com-2047{
    overflow:hidden;
    position:relative;
    }
    .shapedividers_com-2047::after{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.52" preserveAspectRatio="none"><path d="M0 3.528S27.04 3.352 35.278 0v3.528z" opacity=".2" fill="%239942cd"/><path d="M0 3.528S27.04 3.374 35.278.425v3.103z" opacity=".2" fill="%239942cd"/><path d="M0 3.528S27.04 3.396 35.278.882v2.646z" fill="%239942cd"/><path d="M0 3.527h35.278v.092H0z" fill="%239942cd"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedividers_com-2047::after{
    background-size: 100% calc(2vw + 90px);
    }
    }
     
    @media (max-width: 650px) {
        .shapedividers_com-2047::after{
            background-size: 100% 50px;
            }}

    .shapedividers_com-4880{
        overflow:hidden;
        position:relative;
        }
        .shapedividers_com-4880::before{ 
        content:'';
        font-family:'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw; 
        background-size: 100% 90px;
        background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.62" preserveAspectRatio="none"><path d="M35.278.092S8.238.267 0 3.62V.092z" opacity=".2" fill="%239942cd"/><path d="M35.278.092S8.238.246 0 3.194V.092z" opacity=".2" fill="%239942cd"/><path d="M35.278.092S8.238.223 0 2.738V.092zM35.278.092H0V0h35.278z" fill="%239942cd"/></svg>'); 
        }
        
        @media (min-width:2100px){
        .shapedividers_com-4880::before{
        background-size: 100% calc(2vw + 90px);
        }
        }

        @media (max-width: 650px) {
            .shapedividers_com-4880::before{
                background-size: 100% 50px;
                }}
         

.shapedividers_com-8579 {
    overflow:hidden;
    position:relative;
    }
    .shapedividers_com-8579::before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.52" preserveAspectRatio="none"><path d="M0 3.528S27.04 3.352 35.278 0v3.528z" opacity=".2" fill="%23ffffff"/><path d="M0 3.528S27.04 3.374 35.278.425v3.103z" opacity=".2" fill="%23ffffff"/><path d="M0 3.528S27.04 3.396 35.278.882v2.646z" fill="%23ffffff"/><path d="M0 3.527h35.278v.092H0z" fill="%23ffffff"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedividers_com-8579::before{
    background-size: 100% calc(2vw + 90px);
    }
    }

    @media (max-width: 650px) {
        .shapedividers_com-8579::before{
            background-size: 100% 50px;
            }}
     


    .shapedividers_com-3586{
        overflow:hidden;
        position:relative;
        }
        .shapedividers_com-3586::before{ 
        content:'';
        font-family:'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw; 
        background-size: 100% 90px;
        background-position: 50% 0%; 
        transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.62" preserveAspectRatio="none"><path d="M35.278.092S8.238.267 0 3.62V.092z" opacity=".2" fill="%239942cd"/><path d="M35.278.092S8.238.246 0 3.194V.092z" opacity=".2" fill="%239942cd"/><path d="M35.278.092S8.238.223 0 2.738V.092zM35.278.092H0V0h35.278z" fill="%239942cd"/></svg>'); 
        }
        
        @media (min-width:2100px){
        .shapedividers_com-3586::before{
        background-size: 100% calc(2vw + 90px);
        }
        }

        @media (max-width: 650px) {
            .shapedividers_com-3586::before{
                background-size: 100% 50px;
                }}
 
.shapedividers_com-8805{
    overflow:hidden;
    position:relative;
    }
    .shapedividers_com-8805::after{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 100%; 
    transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.52" preserveAspectRatio="none"><path d="M0 3.528S27.04 3.352 35.278 0v3.528z" opacity=".2" fill="%239942cd"/><path d="M0 3.528S27.04 3.374 35.278.425v3.103z" opacity=".2" fill="%239942cd"/><path d="M0 3.528S27.04 3.396 35.278.882v2.646z" fill="%239942cd"/><path d="M0 3.527h35.278v.092H0z" fill="%239942cd"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedividers_com-8805::after{
    background-size: 100% calc(2vw + 90px);
    }
    }
             

    @media (max-width: 650px) {
        .shapedividers_com-8805::after{
            background-size: 100% 50px;
            }}

    .shapedividers_com-8664{
        overflow:hidden;
        position:relative;
        }
        .shapedividers_com-8664::before{ 
        content:'';
        font-family:'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw; 
        background-size: 100% 90px;
        background-position: 50% 100%; 
        transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1007.63 112.41"><path fill="%239942cd" d="M1007.63 112.4v-11.5c-167.94-33.54-503.8 0-503.8-100.9 0 100.9-335.9 67.36-503.83 100.9v11.5z"/></svg>'); 
        }
        
        @media (min-width:2100px){
        .shapedividers_com-8664::before{
        background-size: 100% calc(2vw + 90px);
        }
        }

        @media (max-width: 650px) {
            .shapedividers_com-8664::before{
                background-size: 100% 50px;
                }}

        .shapedividers_com-7466{
            overflow:hidden;
            position:relative;
            }
            .shapedividers_com-7466::before{ 
            content:'';
            font-family:'shape divider from ShapeDividers.com';
            position: absolute;
            z-index: 3;
            pointer-events: none;
            background-repeat: no-repeat;
            bottom: -0.1vw;
            left: -0.1vw;
            right: -0.1vw;
            top: -0.1vw; 
            background-size: 100% 90px;
            background-position: 50% 100%; 
            transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1134.63 158.42"><g fill="%239942cd"><path d="M1134.63 158.42H0L569.46 47.1Z"/><path d="M1134.63 158.42v-51.38L569.46 0 0 115.6v42.82Z" opacity=".66"/></g></svg>'); 
            }
            
            @media (min-width:2100px){
            .shapedividers_com-7466::before{
            background-size: 100% calc(2vw + 90px);
            }
            }

            @media (max-width: 650px) {
                .shapedividers_com-7466::before{
                    background-size: 100% 50px;
                    }}

            .shapedividers_com-9753{
                overflow:hidden;
                position:relative;
                }
                .shapedividers_com-9753::after{ 
                content:'';
                font-family:'shape divider from ShapeDividers.com';
                position: absolute;
                z-index: 3;
                pointer-events: none;
                background-repeat: no-repeat;
                bottom: -0.1vw;
                left: -0.1vw;
                right: -0.1vw;
                top: -0.1vw; 
                background-size: 100% 90px;
                background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.278 3.52" preserveAspectRatio="none"><path d="M0 3.528S27.04 3.352 35.278 0v3.528z" opacity=".2" fill="%23220f2d"/><path d="M0 3.528S27.04 3.374 35.278.425v3.103z" opacity=".2" fill="%23220f2d"/><path d="M0 3.528S27.04 3.396 35.278.882v2.646z" fill="%23220f2d"/><path d="M0 3.527h35.278v.092H0z" fill="%23220f2d"/></svg>'); 
                }
                
                @media (min-width:2100px){
                .shapedividers_com-9753::after{
                background-size: 100% calc(2vw + 90px);
                }
                }

                @media (max-width: 650px) {
                    .shapedividers_com-9753::after{
                        background-size: 100% 50px;
                        }}
                                                
/*
=======================================================
Lightbox.js
Version: 0.0.6
Author: Victor Diego <victordieggo@gmail.com>
License: MIT
Modified by Rob Bradley <rob@nwdm.co.uk>
=======================================================
1. Base Styles
2. Buttons
3. Videos
4. Animations
=======================================================
*/

/*
-------------------------------------------------------
1. Base Styles
-------------------------------------------------------
*/

.remove-scroll {
    overflow: hidden;
}

.lightbox-hide {
    top: -9999px;
    left: -9999px;
    position: absolute;
    visibility: hidden;
}

.lightbox-container {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px); 
    z-index: 100;
}

.lightbox-wrapper {
    position: relative;
    box-shadow: var(--box-shadow);
}

.lightbox-image {
  /* Edit - to make image responsive on all screens */
    height: 100%;
    width: 100%;
    max-height: 90vh;
    max-width: 90vh;
    padding: 4px;
    object-fit: contain;
    background-color: white;
}

@media (max-width: 650px) {
    .lightbox-image {
        max-height: 95vh;
        max-width: 100vh;
    }
}

/*
-------------------------------------------------------
2. Buttons
-------------------------------------------------------
*/

.lightbox-btn {
    width: 2em;
    height: 2em;
    position: absolute;
    border: none;
    box-shadow: none;
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0);
    background-position: center;
    background-repeat: no-repeat;
}

.lightbox-btn:hover {
    opacity: 0.7;
    border: none;
}

.lightbox-btn:disabled {
    cursor: initial;
    opacity: 0.3;
}

.lightbox-btn-close {
    top: 0;
    right: -2em;
    background-size: contain;
    background-image: url('../media/svg/cross.svg');
    filter: invert(1);
    transition: opacity 0.3s;
}

.lightbox-btn-close:hover {
    opacity: 0.7;
}

.lightbox-btn-next,
.lightbox-btn-previous {
    top: calc(50% - (2.2em / 2));
    background-size: contain;
    background-image: url('../media/svg/angle-right-solid.svg');
    filter: invert(1);
}

.lightbox-btn-previous {
    left: -2em;
    transform: rotate(180deg);
}

.lightbox-btn-next {
    right: -2em;
}

/*
-------------------------------------------------------
3. Videos
-------------------------------------------------------
*/

.lightbox-video-wrapper {
    width: 80vw;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
}

.lightbox-video-player {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

/*
-------------------------------------------------------
4. Animations
-------------------------------------------------------
*/

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;
    }
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes createBox {
    from {transform: scale(0);}

    to {transform: scale(1);}
}

@keyframes deleteBox {
    from {transform: scale(1);}
    to {transform: scale(0);}
}