:root {
    /* Define Custom Properties */
    --colour-primary: #214ecf;
    --colour-secondary: #84a5f2;
    --colour-accent: #fc9faa;
    --colour-accent-shade-100: #fb7484;
    --colour-accent-tint: #fff0f3;
    --font-size-0: clamp(1rem, 0.9038rem + 0.4274vw, 1.25rem);
    --font-size-h2: clamp(2.5rem, 1.7308rem + 3.4188vw, 4.5rem);
    --font-size-h3: clamp(1.1875rem, 1.0673rem + 0.5342vw, 1.5rem);
    --font-size-hero: clamp(2.5rem, 2.2356rem + 1.1752vw, 3.1875rem);
    --font-size-contact: clamp(1.25rem, 1.1058rem + 0.641vw, 1.625rem);
    --height-company-logo: clamp(4rem, 3.2308rem + 3.4188vw, 6rem);
    --section-margin: clamp(2rem, 0.4615rem + 6.8376vw, 6rem);
    --select-icon-position: clamp(0.5rem, 0.4038rem + 0.4274vw, 0.75rem);
    --layout--container-width: 1296px;
}
* {
    box-sizing: border-box;
}
html {
    font-size: 16px;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background-color: var(--colour-accent-tint);
    color: var(--colour-primary);
    /* Typography */
    font-family: "termina", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-0);
    line-height: 1.45;
}
section {
    margin-block: var(--section-margin);
    padding-inline: 0.75rem;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 600;
}
h2 {
    /* Typography */
    color: transparent;
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.1;
    /* Gradient letters */
    background-image: linear-gradient(115deg, var(--colour-secondary) 0%, var(--colour-primary) 70%);
    background-clip: text;
}
h3 {
    font-size: var(--font-size-h3);
    font-weight: 500;
    margin-block: var(--font-size-h3);
}
em {
    font-style: normal;
    font-weight: 400;
    color: var(--colour-accent-shade-100);
}
button,
input[type="submit"] {
    background-color: var(--colour-primary);
    border: none;
    cursor: pointer;
    padding-block: 18px;
    padding-inline: 27px;
    transition: all .2s ease-out;
    /* Typography */
    font-family: 'termina', sans-serif;
    font-size: 20px;
    color: var(--colour-accent-tint);
}
button:hover,
input[type="submit"]:hover {
    background-color: var(--colour-secondary);
}
/* ---------
   CONTAINER 
   --------- */
.layout--container {
    max-width: 1296px;
    margin-inline: auto;
}
/* ------
   HEADER 
   ------ */
header {
    margin-block: 1vw;
    padding-inline: 1vw;
}
header .layout--container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.company-logo {
    height: var(--height-company-logo);
    margin: 0;
    /* Text replacement */
    text-indent: -9999px;
    overflow: hidden;
    background-image: url('media/isologo-test.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (min-width: 815px) {
    header .layout--container {
        flex-direction: row;
    }
    .company-logo {
        width: 50%;
    }
}
/* ----------
   NAVIGATION 
   ---------- */
nav {}
.nav-items {
    /* List reset */
    list-style: none;
    margin: 0;
    padding: 0;
    /* Styles */
    display: flex;
    border-block-start: 1px solid var(--colour-secondary);
    justify-content: space-evenly;
    margin-block-start: 1rem;
    padding-block: 1rem;
    width: 100%;

}
.nav-item {
    padding-right: 2vw;
}
.nav-item > a {
    display: inline-block;
    border-block-end: 1px solid var(--colour-secondary);
    margin-bottom: 0.5rem;
    /* Typography */
    color: var(--colour-primary);
    text-decoration: none;
    text-transform: uppercase;
}
.nav-item > a:hover {
    border-block-end-color: var(--colour-accent-shade-100);
}
.nav-item > p {
    display: none;
}
@media screen and (min-width: 815px) {
    nav {
        width: 50%;
    }
    .nav-items {
        border-block-start: none;
        justify-content: flex-end;
        margin-block-start: 3rem;
        padding-block: 0;
    }
}
@media screen and (min-width: 930px) {
    .nav-item {
        width: calc(100% / 3);
    }
    .nav-item > p {
        --line-height: 1.125rem;
        display: block;
        margin: 0;
        max-height: calc((var(--line-height) * 2) + 0.125rem);
        overflow: hidden;
        /* Typography */
        font-size: 14px;
        line-height: var(--line-height);
    }
}
/* HERO SECTION */
.section--hero .layout--container {
    display: flex;
    flex-direction: column;
    /* height: clamp(400px, 100vh, 900px); */
}
.section--hero .wrapper {
    width: 100%;
    order: 1;
    margin-block-end: var(--section-margin);
    padding-block: 2vw;
    padding-inline: 1vw;
}
.value-proposition {}
.value-proposition h2 {
    margin-block: 0 1vw;
    /* Typography */
    color: transparent;
    font-size: var(--font-size-hero);
    font-weight: 700;
    text-transform: uppercase;
}
.value-proposition p {
    font-size: var(--font-size-0);
}
.section--hero .layout--image-container {
    width: 100%;
    order: 2;
    padding-block: 2vw;
    padding-inline: 1vw;
}
.call-to-action {
    margin-block-start: var(--section-margin);
}
.call-to-action a {
    display: block;
    background-color: var(--colour-primary);
    border: none;
    padding-block: 18px;
    padding-inline: 27px;
    transition: all .2s ease-out;
    width: fit-content;
    /* Typography */
    color: var(--colour-accent-tint);
    text-decoration: none;
}
.call-to-action a:hover {
    background-color: var(--colour-secondary);
}
.hero-image {
}
@media screen and (min-width: 910px) {
    .section--hero .layout--container {
        /* height: FIX THIS */
        flex-direction: row;
        order: 1;
    }
    .section--hero .wrapper {
        order: 2;
        margin-block-end: 0;
        width: 520px;
    }
    .section--hero .layout--image-container {
        width: calc(100% - 520px);
    }
}
/* QUOTES SECTION */
.section--quotes {
    background-color: var(--colour-primary);
    color: var(--colour-accent-tint);
}
.quotes {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-block: 2vw;
    /* background-image: linear-gradient(to bottom right, var(--colour-primary), var(--colour-secondary)); */
    /* Fan Pattern */
    /* background-color: #214ecf;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%2384a5f2' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E"); */
}
.quotes::before {
    content: '';
}
.diagonal-svg {
  width: 100%;
  height: auto;
  display: block; /* To remove extra space below SVG */
  margin-top: -10px; /* Adjust to overlap */
}
/* -------------
   ABOUT SECTION 
   ------------- */
.section--about {}
.section--about .layout--container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.section--about .layout__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.section--about .heading-row {}
.section--about .content-row {
    border-block-start: 1px solid var(--colour-secondary);
    justify-content: flex-end;
}
.section--about h2 {
    border-inline-end: 1px solid var(--colour-secondary);
    margin: 0;
    padding-block-end: 2vw;
    padding-inline-end: 4vw;
    min-width: calc((100% / 12) * 5);
    width: fit-content;
    /* Typography */
    color: transparent;
    /* font-size: clamp(40px, 5vw, 72px); */
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.1;
    /* Gradient letters */
    background-image: linear-gradient(115deg, var(--colour-secondary) 0%, var(--colour-primary) 70%);
    background-clip: text;
}
.section--about .wrapper {
    width: max(calc((100% / 12) * 7), 360px);
    font-size: var(--font-size-0);
}
/* ----------------
   SERVICES SECTION 
   ---------------- */
.section--services {
    margin-block: 10vw;
}
.section--services .layout--container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.section--services .layout__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.section--services .heading-row {}
.section--services .content-row {
    border-block-start: 1px solid var(--colour-secondary);
    justify-content: flex-end;
}
.section--services h2 {
    border-inline-end: 1px solid var(--colour-secondary);
    margin: 0;
    padding-block-end: 2vw;
    padding-inline-end: 4vw;
    width: fit-content;
    min-width: calc((100% / 12) * 5);
}
.services-heading {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
    margin-block-end: clamp(20px, 5vw, 100px);
}
.services-heading .layout__row {
    display: flex;
    flex-direction: row;
}
.services-heading > .branding-row {
    align-items: flex-end;
    padding-block-end: 2vw;
}
.branding-group,
.design-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.branding-group {}
.branding-group > .layout__heading {
    order: 2;
}
.layout__heading {
    font-size: min(10vw, 130px);
    font-weight: 700;
    line-height: 1.1;
}
.layout__subheading {
    background-color: var(--colour-accent);
    color: var(--colour-accent-tint);
    margin-block: 0.5vw;
    padding-block: 0.5vw;
    padding-inline: 1vw;
    /* Typography */
    font-size: min(1.5vw, 20px);
    text-transform: uppercase;
}
.branding-group > .layout__subheading {
    order: 1;
}
.branding-info {
    flex-grow: 1;
    padding-block-end: 2vw;
    padding-inline-start: 5vw;
}
.design-info {
    flex-grow: 1;
    padding-block-start: 1.5vw;
    padding-inline-end: 5vw;
    text-align: right;
}
.branding-info > p,
.design-info > p {
    margin: 0;
    font-size: min(1.3vw, 14px);
    line-height: 1.3;
}
.ampersand {
    display: inline-block;
    position: absolute;
    left: 40%;
    top: 12%;
    z-index: -1;
    /* Typography */
    color: var(--colour-accent);
    font-size: min(25vw, 325px);
    font-weight: 600;
    line-height: 1;
}
.services {
    /* List reset */
    list-style: none;
    padding: 0;
    margin: 0;
    /* Styles */
    width: max(calc((100% / 12) * 7), 360px);
}
.service {
    margin-block-end: 3vw;
    font-size: var(--font-size-0);
}
.service h3 {}
.service:first-child h3 {
    margin-block-start: calc(var(--font-size-h3) * 1.5);
}
/* ---------------
   CONTACT SECTION 
   --------------- */
.section--contact {}
.section--contact .layout__row {
    display: flex;
    flex-direction: row;
}
.section--contact .heading-row {
}
.section--contact .form-row {
    border-block-start: 1px solid var(--colour-secondary);
    justify-content: flex-start;
    flex-flow: row-reverse;
}
.section--contact h2 {
    border-inline-end: 1px solid var(--colour-secondary);
    margin: 0;
    padding-block-end: 2vw;
    padding-inline-end: 4vw;
    width: fit-content;
    min-width: calc((100% / 12) * 5);
}
.contact-form {
    font-size: var(--font-size-contact);
    line-height: 1.7;
    margin-block-start: 2rem;
    width: max(calc((100% / 12) * 7), 360px);;
}
.contact-form .form-group {
    margin-block: 1rem;
}
.contact-form input,
.contact-form select {
    appearance: none;
    background-color: transparent;
    border: none;
    /* Typography */
    font-family: 'Termina', sans-serif;
    color: var(--colour-secondary);
    font-size: var(--font-size-contact);
    line-height: 1.25;
}
.contact-form input::placeholder,
.contact-form select::placeholder {
    color: var(--colour-secondary);
    font-weight: 400;
}
.contact-form input[type="text"] {
    border-block-end: 2px solid var(--colour-secondary);
    background-color: transparent;
}
.contact-form input[type="submit"] {
    background-color: var(--colour-primary);
    color: var(--colour-accent-tint);
}
.contact-form input[type="submit"]:hover {
    background-color: var(--colour-secondary);
}
.contact-form .select--container {
    display: inline-block;
    position: relative;
}
.contact-form select {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--colour-secondary);
    padding-block: 0.2vw;
    padding-inline-start: 1vw;
    padding-inline-end: 2.5vw;
}
.contact-form option {
    background-color: var(--colour-accent-tint);
    color: var(--colour-secondary);
}
.icon--container {
    position: absolute;
    right: min(0.6vw, 8px);
    top: var(--select-icon-position);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}
.icon--container svg {
    height: clamp(24px, 1.7vw, 32px);
    width: clamp(24px, 1.7vw, 32px);
    fill: var(--colour-secondary);
}
.form-actions {
    display: flex;
    justify-content: center;
}
.form-actions .wrapper {
    display: flex;
    flex-flow: row;
    justify-content: center;
}
.form-actions .button--submit {
    display: inline-block;
    border-radius: 9999px;
    width: 12.5rem;
    height: 12.5rem;
    margin: 2rem;
}
/* ------ 
   FOOTER
   ------ */
footer {
    padding-block-start: 60px;
    position: relative;
}
footer .wrapper {
    color: var(--colour-accent-tint);
    background-color: var(--colour-primary);
    padding-block: 0.75rem;
    padding-inline: 0.75rem;
    /* Flexbox */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
footer .layout--container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
footer span {
    text-align: center;
    order: 2;
}
footer nav {
    order: 1;
}
footer .nav-items {
    margin-block-start: 1rem;
    border-block-start: none;
}
footer .nav-item > a {
    color: var(--colour-accent-tint);
}
@media screen and (min-width: 490px) {
    footer .layout--container {
        flex-direction: row;
    }
    footer span {
        order: 1;
    }
    footer nav {
        order: 2;
        width: 50%;
    }
    footer .nav-items {
        border-block-end: none;
        justify-content: flex-end;
        margin-block-start: 0rem;
        padding-block: 0;
    }
}
/* --------------
   ANIMATED WAVES 
   -------------- */
.editorial {
  display: block;
  width: 100%;
  height: 60px;
  max-height: 60px;
  margin: 0;
  z-index:5;
  top:0;
  position:absolute;
  left:0px;
  float:left;
}

.parallax1 > use {
  animation: move-forever1 10s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax2 > use {
  animation: move-forever2 8s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax3 > use {
  animation: move-forever3 6s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax4 > use {
  animation: move-forever4 4s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
/* 
Termina Regular
font-family: "termina", sans-serif;
font-weight: 400;
font-style: normal;

Termina Medium
font-family: "termina", sans-serif;
font-weight: 500;
font-style: normal;

Termina Demi
font-family: "termina", sans-serif;
font-weight: 600;
font-style: normal;

Termina Bold
font-family: "termina", sans-serif;
font-weight: 700;
font-style: normal;
*/