:root {
/*---- Colours ----*/
--brandcol-dark: rgb(61, 81, 97);
--brandcol-dark-opac: rgba(61, 81, 97, 0.95);
--brandcol-xdark:rgb(37, 50, 59);

--brandcol-accent: rgb(164, 188, 194);
--brandcol-accent-opac: rgba(128, 128, 128, 0.25);

--none: rgba(0, 0, 0, 0);

--white: hsl(192, 20%, 95%);

--brandcol-xlight: rgb(235, 235, 235);

/*---- Padding & Gap ----*/
--section-padding: 25vh;
--section-padding-half: 15vh;
--section-gap: 80px;

/*---- Animation ----*/
--transition: 0.5s ease;
--animate-duration: 800ms;
--animate-delay: 4s;

/*---- Footer ----*/
--footer-height: 100px;
}

/*== Body/Layout Styles ==*/
html{
scroll-behavior: smooth;
overscroll-behavior-y: none;
overscroll-behavior-x: none;
background-color: var(--brandcol-dark);
}

body {
margin: 0;
padding: 0;
background-color: var(--brandcol-dark);
overscroll-behavior-y: none;
overscroll-behavior-x: none;
overflow-x: hidden;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
color: var(--brandcol-dark);
z-index: -5;
}

::-moz-selection { /* Code for Firefox */
  background: var(--brandcol-accent-opac);
}

::selection {
  background: var(--brandcol-accent-opac);
}

body::-webkit-scrollbar {
display: none;
}

.load-hidden {
visibility: hidden;
}

.main-container {
height: auto; 
width: 100vw;
background-color: var(--white);
margin: 0 auto;
margin-bottom: var(--footer-height);
z-index: 1;
}

.block {
padding: var(--section-padding) 0;
z-index: 1;
}

.block-content{
width: 90vw;
margin: 0 auto;
z-index: 1;
/*background-color: var(--brandcol-accent-opac);*/
}

.block-content-full{
    width: 90vw;
    margin: 0 auto;   
}

.block-image{
padding: 0;
margin-bottom: 0;
}

.block-end{
padding-bottom: 20vh;
}

.mobile-break{
    display: none;
}

/*== Type Styles ==*/

a,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-family: 'Poppins', sans-serif;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
letter-spacing: 0px;
margin: 0;
padding: 0;
border: 0;
}

.text-highlight{
    color: var(--brandcol-accent);
}

a {
text-decoration: none;
opacity: 1;
color: inherit;
font-size: inherit;
letter-spacing: inherit;
transition: opacity 0.5s ease, color 0.5s ease;
}

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

li {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
font-size: 18px;
line-height: 1.1;
}

p{
font-size: 16px;
line-height: 28px;
letter-spacing: 0.25px;
font-weight: 400;
}

p a:hover {
opacity: 0.5;
transition: opacity 0.5s ease;
}

p br{
display: block;
margin: 20px 0;
line-height:22px;
content: " ";
}

h1 {
font-size: 48px;
line-height: 64px;
font-weight: 100;
letter-spacing: -1px;
}

h1 .h1-highlight{
font-weight: 700;
}

h2 {
font-size: 48px;
line-height: 52px;
font-weight: 300;
letter-spacing: -1px;
}

h3 {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 24px;
line-height: 30px;
font-weight: 100;
}

h3 a{
position: relative;
white-space: nowrap;
}

h3 a:hover {
opacity: 0.5;
transition: opacity 0.5s ease;
}

h3 a::after {
display: block;
content: '';
width: 100%;
height: 2px;
background: var(--brandcol-accent);
position: absolute;
bottom: -6px;
left: 0;
transition: width 0.5s ease;
}
    
h3 a:hover:after {
width: 0%;
transition: width 0.5s ease;
}

h4{
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
}

h4 a:hover {
opacity: 0.5;
transition: opacity 0.5s ease;
}

h6{
font-weight: 400;
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.25px;
}