/***************************************************************************** WEBFONT KIT *************************************************************************/
/*******************************************************************************************************************************************************************/

  /**
 * @license
 * MyFonts Webfont Build ID 3977774, 2020-11-20T07:48:40-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Eina03-Light by Extratype
 * URL: https://www.myfonts.com/fonts/textaxis/eina/03-light/
 * Copyright: Copyright (c) 2013 Textaxis. v 1.0 by Iñigo Jerez. Barcelona. All rights reserved.
 * 
 * 
 * 
 * © 2020 MyFonts Inc
*/

/* HELVETICA LTWXX */

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3cb5d6");

@font-face {
font-family: 'HelveticaLTWXX-Bold';
font-display: swap;
src: url('../webFonts/HelveticaLTWXX-Bold/font.woff2') format('woff2'), url('../webFonts/HelveticaLTWXX-Bold/font.woff') format('woff');
}
@font-face {
font-family: 'HelveticaLTWXX-Roman';
font-display: swap;
src: url('../webFonts/HelveticaLTWXX-Roman/font.woff2') format('woff2'), url('../webFonts/HelveticaLTWXX-Roman/font.woff') format('woff');
}

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3cb5ca");

@font-face {
    font-family: 'HelveticaNowDisplay-XBd';
    font-display: swap;
    src: url('../webFonts/HelveticaNowDisplay-XBd/font.woff2') format('woff2'), url('../webFonts/HelveticaNowDisplay-XBd/font.woff') format('woff');
  }

  @font-face {
    font-family: 'HelveticaNowText-Regular';
    font-display: swap;
    src: url('../webFonts/HelveticaNowText-Regular/font.woff2') format('woff2'), url('../webFonts/HelveticaNowText-Regular/font.woff') format('woff');
  }

  @font-face {
    font-family: 'HelveticaNowText-Bold';
    font-display: swap;
    src: url('../webFonts/HelveticaNowText-Bold/font.woff2') format('woff2'), url('../webFonts/HelveticaNowText-Bold/font.woff') format('woff');
  }


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3cb5d6");
  
@font-face {
  font-family: 'HelveticaLTWXX-Bold';
  font-display: swap;
  src: url('../webFonts/HelveticaLTWXX-Bold/font.woff2') format('woff2'), url('../webFonts/HelveticaLTWXX-Bold/font.woff') format('woff');
}

@font-face {
  font-family: 'HelveticaLTWXX-Roman';
  font-display: swap;
  src: url('../webFonts/HelveticaLTWXX-Roman/font.woff2') format('woff2'), url('../webFonts/HelveticaLTWXX-Roman/font.woff') format('woff');
}
  

/***************************************************************************** CSS RESET  **************************************************************************/
/*******************************************************************************************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/******************************************************************* GLOBAL BASE STYLES  *************************************************************/
/*****************************************************************************************************************************************************/

:root {

/*********************************************************************** HEADINGS ********************************************************************/

     /* Mobile */
    --h1-mobile: 3rem; /* 48px */
    --h2-mobile: 2.5rem; /* 40px */
    --h3-mobile: 2rem; /* 32px */
    --h4-mobile: 1.5rem; /* 24px */
    --h5-mobile: 1.25rem; /* 20px */
    --h6-mobile: 1rem; /* 16px */

    --h1-mobile-large: 3.5rem; /* 56px */
    --h1-line-height-mobile-large: 3.75rem; /* 60px */

    /* Tablet */
    --h1-tablet: 4.5rem; /* 72px */
    --h2-tablet: 3.5rem; /* 64px */

    /* Desktop */
    --h1-desktop: 6.5rem; /* 104px */
    --h2-desktop: 4rem; /* 64px */
    --h3-desktop: 3rem; /* 48px */
    --h4-desktop: 2rem; /* 32px */
    --h5-desktop: 1.5rem; /* 24px */
    --h6-desktop: 1.25rem; /* 20px */

    /* Mobile */
    --h1-line-height-mobile: 3.25rem; /* 56px */
    --h2-line-height-mobile: 3rem; /* 48px */
    --h3-line-height-mobile: 2.5rem; /* 40px */
    --h4-line-height-mobile: 2.5rem; /* 40px */
    --h5-line-height-mobile: 2rem; /* 40px */
    --h6-line-height-mobile: 1.5rem; /* 24px */

    --h6-line-height-mobile-large: 1.75rem; /* 24px */

    /* Tablet */
    --h1-line-height-tablet: 6rem; /* 88px */
    --h2-line-height-tablet: 4.5rem; /* 80px */

    /* Desktop */
    --h1-line-height-desktop: 8rem; /* 128px */
    --h2-line-height-desktop: 5rem; /* 80px */
    --h3-line-height-desktop: 3rem; /* 48px */
    --h4-line-height-desktop: 2.5rem; /* 40px */
    --h5-line-height-desktop: 2rem; /* 32px */
    --h6-line-height-desktop: 1.5rem; /* 24px */



/*********************************************************************** BODY COPY ********************************************************************/

    /* Mobile */
    --body-copy-mobile-small: 1rem; /* 16px */
    --body-copy-line-height-mobile-small: 1.5rem; /* 24px */

    --body-copy-mobile-large: 1.125rem; /* 18px */
    --body-copy-line-height-mobile-large: 1.75rem; /* 28px */

    /* Desktop */
    --body-copy-desktop: 1.25rem; /* 20px */
    --body-copy-line-height-desktop: 2rem; /* 32px */
    --lead-copy-desktop: 1.5rem; /* 24px */
    --lead-copy-line-height-desktop: 2.4rem; /* 32px */

    --body-copy-desktop: 1.25rem; /* 20px */
    --body-copy-line-height-desktop: 2rem; /* 32px */
    --lead-copy-desktop: 1.5rem; /* 24px */
    --lead-copy-line-height-desktop: 2.4rem; /* 32px */

    /* Italisized Copy */
     --quote-copy: 'Libre Baskerville', serif;


/********************************************************************** COLOURS *******************************************************************/

    /* Primary Colour */
    --primary-color: #054FFE;

    /* Lighter Primary Colour */
    --lighter-primary-color: #6161FF;

    /* Secondary Colour */
    --secondary-color: #000;

    /* Teriary Colour */
    --tertiary-color: #000;

    /* Ground Colour */
    --ground-color: #FFFFFF;

    /* Grey Accent Colour */
    --accent-color: #4F4F4F;

    /* Lighter Grey Accent Colour */
    --lighter-accent-color: #7E7E7E;

    /* Lightest Grey Accent Colour */
    --lightest-accent-color: #B1B1B1;

    /* Darker Grey Accent Colour */
    --darker-accent-color: #323232;

    /* Darker Grey Accent Colour */
    /*--darker-accent-color: #4b4b4b*/

    /* Grey Accent Colour */
    /*--accent-color: #7E7E7E;

    /* Problem Colour */
    --problem-color: #E50914;

    /* Approach Colour */
    --approach-color: #fd6304;

    /* Success Colour */
    --solution-color: #01A944;

    /* Success Colour */
    --learning-color: #5F01A9;


/************************************************************ 8PX GRID VERTICAL RHYTHM SETTINGS ********************************************************/

    /* margin-bottom */
    --mb-8px: 0.5rem; /* 8px */
    --mb-16px: 1rem; /* 16px */
    --mb-24px: 1.5rem; /* 24px */
    --mb-32px: 2rem; /* 32px */
    --mb-40px: 2.5rem; /* 40px */
    --mb-48px: 3rem; /* 48px */
    --mb-56px: 3.5rem; /* 56px */
    --mb-64px: 4rem; /* 64px */
    --mb-72px: 4.5rem; /* 72px */
    --mb-80px: 5rem; /* 80px */
    --mb-88px: 5.5rem; /* 88px */
    --mb-96px: 6rem; /* 96px */
    --mb-104px: 6.5rem; /* 104px */
    --mb-112px: 7rem; /* 112px */
    --mb-120px: 7.5rem; /* 120px */
    --mb-128px: 8rem; /* 128px */
    --mb-136px: 8.5rem; /* 136px */
    --mb-144px: 9rem; /* 144px */
    --mb-416px: 26rem; /* 416px */
  

    /* margin-top */
    --mt-8px: 0.5rem; /* 8px */
    --mt-16px: 1rem; /* 16px */
    --mt-24px: 1.5rem; /* 24px */
    --mt-32px: 2rem; /* 32px */
    --mt-40px: 2.5rem; /* 40px */
    --mt-48px: 3rem; /* 48px */
    --mt-56px: 3.5rem; /* 56px */
    --mt-64px: 4rem; /* 64px */
    --mt-72px: 4.5rem; /* 72px */
    --mt-80px: 5rem; /* 80px */
    --mt-88px: 5.5rem; /* 88px */
    --mt-96px: 6rem; /* 96px */
    --mt-104px: 6.5rem; /* 104px */
    --mt-112px: 7rem; /* 112px */
    --mt-120px: 7.5rem; /* 120px */
    --mt-128px: 8rem; /* 128px */
    --mt-136px: 8.5rem; /* 136px */
    --mt-144px: 9rem; /* 144px */
    --mt-152px: 9.5rem; /* 152px */
    --mt-160px: 10rem; /* 160px */
    --mt-168px: 10.5rem; /* 168px */
    --mt-176px: 11rem; /* 176px */
    --mt-416px: 11.5rem; /* 184px */

    /* remove all margins */
    --mn-0px: 0rem; /* 0px */

}

/************************************************************* HTML & BODY ***********************************************************/

html, body {
  scroll-behavior: smooth;
  background-color: black;
}

body {
  background-color: var(--tertiary-color);
  color: var(--secondary-color);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  /*font-family: 'Libre Baskerville', serif;*/
  font-size: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

/************************************************************* CONTAINERS ***********************************************************/

/******** Paragraph Container ********/

.paragraph-container {
  width: 100%;
  max-width: 640px;
}

/******** Centered Content Container ********/

.centered-content-container {
  width: 100%;
  max-width: 768px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: var(--mb-40px);
}


/******** Main Content Container ********/

.main-content-container {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  margin-bottom: var(--mb-40px);
}

.medium-content-container,
.large-content-container,
.larger-content-container,
.largest-content-container {
width: 90%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
}

.grey-no-shadow {
box-shadow: none;
}

/******** Medium Container ********/

.medium-content-container {
  max-width: 1337px;
  margin: 0 auto;
  margin-bottom: var(--mb-64px);
}

/******** Large Container ********/

.large-content-container {
  max-width: 1700px;
  margin: 0 auto;
  margin-bottom: var(--mb-64px);
}

/******** Larger Container ********/

.larger-content-container {
max-width: 2104px;
margin: 0 auto;
margin-bottom: var(--mb-64px);
}

/******** Largest Container ********/

.largest-content-container {
max-width: 2356px;
margin: 0 auto;
margin-bottom: var(--mb-64px);
}

/******** Full Width Container ********/

.full-width-container {
  width: 100%;
  margin-bottom: var(--mb-64px);
}

.several-images-together {
margin-bottom: var(--mb-16px);
}

.several-images-together:last-of-type {
margin-bottom: var(--mb-64px);
}

/******** Containers with Special Margins ********/

#mb-24 {
margin-bottom: var(--mb-24px);
}

#mb-56 {
margin-bottom: var(--mb-56px);
}

/******** Remove All Margins ********/

.no-margin {
margin-bottom: var(--mn-0px);
}

/******** Remove Box Shadow ********/

.no-box-shadow {
box-shadow: none;
}


/************************************************************* HEADINGS ***********************************************************/

h1, h2, h3, h4, h5, h6 {
  font-family: HelveticaNowDisplay-XBd;
  font-weight: normal;
}

h1 {
  font-size: var(--h1-mobile);
  line-height: var(--h1-line-height-mobile);
  margin-bottom: var(--mb-56px);
}

h1.h1-case-study {
margin-bottom: var(--mb-24px);
}

h2 {
  font-size: var(--h2-mobile);
  line-height: var(--h2-line-height-mobile);
  margin-bottom: var(--mb-24px);
  letter-spacing: -1px;
}

h3 {
  font-size: var(--h3-mobile);
  line-height: var(--h3-line-height-mobile);
  margin-bottom: var(--mb-24px);
}


h4 {
  font-size: var(--h4-mobile);
  line-height: var(--h4-line-height-mobile);
  margin-bottom: var(--mb-16px);
}

h5 {
font-size: var(--h5-mobile);
line-height: var(--h5-line-height-mobile);
margin-bottom: var(--mb-16px);
}

h6 {
font-size: var(--h6-mobile);
line-height: var(--h6-line-height-mobile);
margin-bottom: var(--mb-16px);
}

/******** H5 with Image Margin ********/

#h5-and-image-margin {
margin-bottom: var(--mb-32px);
}


/************************************************************ ANCHOR LINKS ***********************************************************/

a {
  color: var(--secondary-color);
  text-decoration: none;
  cursor: pointer;
}

a:visited {
  color: var(--secondary-color);
}

a.primary:visited {
color: var(--ground-color);
}

.noSelect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.noSelect:focus {
  outline: none !important;
}


/************************************************************* PARAGRAPHS ***********************************************************/

.lead-copy {
  font-size: var(--lead-copy-desktop);
  line-height: var(--lead-copy-line-height-desktop);
  font-weight: 700;
}  

p {
font-family: 'HelveticaLTWXX-Roman', Arial, sans-serif;
font-weight: normal;
font-size: var(--body-copy-mobile-small);
line-height: var(--body-copy-line-height-mobile-small);
margin-bottom: var(--mb-24px);
}

.p-homepage-paragraph {
text-align: center;
}

.heavy-text {
font-family: HelveticaNowDisplay-XBd;
font-weight: normal;
}

.emphasised-text {
font-family: 'HelveticaLTWXX-bold', Arial, sans-serif;
}



/******************************************************************** IMAGES ************************************************************************/

img {
  width: 100%;
  max-width:none;
  display: block;
}

.image-with-margin {
  margin-bottom: var(--mb-24px);
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--mb-40px);
}

.image-title {
  margin-bottom: var(--mb-24px);
}

.white-background {
  border: 1px solid #D6D6D6;
  box-shadow: 5px 5px 10px rgba(25, 0, 65, .08);
}

.responsive-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

/******************************************************************** BUTTONS ***********************************************************************/

.cta {
width: 100%;
padding: 20px 30px;
border: none;
display: block;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
font-weight: 600;
box-sizing: border-box; /* Add this line */
}

.primary {
background-color: var(--primary-color);
color: var(--ground-color);
}

.secondary {
background-color: var(--secondary-color);
color: var(--ground-color);
}

.tertiary {
background-color: var(--ground-color);
color: var(--dark-color);
}

.standard-cta {
  width: 280px;
  padding: 20px 30px;
  border: none;
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  box-sizing: border-box; /* Add this line */
  margin-bottom: var(--mb-64px);
}


.navbar-cta {
  position: relative;
  text-transform: uppercase;
  z-index: 5000;
  width: auto;
  padding: 13px 24px;
  border: var(--primary-color);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  font-size: .8rem !important;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin-right: 20px;
}
 

/* Horizontal Dividers */

hr.case-study-horizontal-rule {
  border: none;
  border-top: 2px solid #d0d0d0;
  width: 100%;
  margin-bottom: var(--mb-64px);
}

hr.homepage-horizontal-rule {
border: none;
border-top: 2px solid #d0d0d0;
width: 80%;
margin-bottom: var(--mb-72px);
}

/**************************************************************** TOP BAR *************************************************************/

.top-bar {
  display: none;  /* hide the top bar initially */
  box-sizing: border-box;
  width: 100%;
  padding: 30px 0px;
  height: 56px;
  font-size: 18px;
  background-color: transparent;
  /*transition: background-color 0.5s ease;*/
  color: var(--ground-color);
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 4;  /* add this line */
}

 /*#home-top-bar {
  background-color: var(--secondary-color);
}*/

.fixed {
/*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
-moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
-ms-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
-o-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);*/
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.top-bar ul {
  position: absolute;
  top: 40px;
  right:30px;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.top-bar li {
display: inline-block;
margin-right: 10px;
}

.top-bar ul li {
  margin-right: 80px;
}

.top-bar ul li a {
  color: var(--tertiary-color);
  text-decoration: none;
  font-size: 18px;
  line-height: 40px;
}

.top-bar #home-top-bar ul li  a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  line-height: 40px;
}

.top-bar ul li a.home{
  color: var(--lightest-accent-color);
  /*color: white;*/
  text-decoration: none;
  font-size: 18px;
  line-height: 40px;
}

.top-bar ul li a:hover {
color: white;
/*color: var(--lighter-accent-color);*/
}

.top-bar ul li a.home:hover {
  color: white;
  text-decoration: underline;
  /*color: var(--lighter-accent-color);*/
  }
  

.top-bar .dropdown ul li a {
color: var(--tertiary-color);
}

.top-bar ul li:last-child {
  margin-right: 0;  /* remove the margin from the last item */
}

.top-bar ul li:nth-child(3) a {
margin-left: 0px; /* Adjust the value as needed */
}

/* Style the "Work" link */
.top-bar .dropdown a {
color: var(--tertiary-color); /* Set it to tertiary color by default */
text-decoration: none;
font-size: 18px;
line-height: 40px;
display: inline-block;
position: relative; /* Add position relative */
}

/* Style the "Work" link in the hover state */
.top-bar .dropdown:hover a {
color: white; 
/*color: var(--lighter-accent-color);*/
  text-decoration: underline;
font-size: 18px;
line-height: 40px;
}

/* Style the links in the dropdown menu */
.top-bar .dropdown .dropdown-menu a {
color: var(--tertiary-color); /* Set them to tertiary color by default */
text-decoration: none;
font-size: 18px;
line-height: 40px;
display: block;
transition: color 0.3s ease; /* Add a transition for color change */
}

/* Change the link color in the hover state */
.top-bar .dropdown .dropdown-menu a:hover {
color: white; 
/*color: var(--lighter-accent-color);*/
text-decoration: none;
font-size: 18px;
line-height: 40px;
}

/* Style the dropdown menu */
.top-bar .dropdown .dropdown-menu {
opacity: 0;
position: absolute;
background-color: var(--ground-color);
margin-top: 26px;
z-index: 999;
left: auto;
right: 0;
width: auto; /* Change the width to auto */
}

/* Style the dropdown menu links */
.top-bar .dropdown .dropdown-menu a {
color: var(--tertiary-color);
text-decoration: none;
padding: 10px 0 10px 30px; /* Remove horizontal padding */  
display: block;
transition: color 0.3s ease, background-color 0.3s ease;
width: 100%; /* Make the links 100% width */
box-sizing: border-box; /* Ensure padding doesn't affect the width */
}

/* Style the dropdown menu links */
.top-bar .dropdown .dropdown-menu a:first-of-type {
margin-top: 4px;
}

/* Change the link color and background on hover */
.top-bar .dropdown .dropdown-menu a:hover {
color: var(--primary-color);
background-color: #F5F5F5;
text-decoration: none;
}

.logo {
  width: 150px;
  height: auto;
  position: relative;
  top: 5px;
  left: 20px;
  transition: all 0.3s ease-in-out; /* Add a smooth transition effect */
}

.logo.shrink {
width: 40px; /* Adjust the desired height for the logo when it shrinks */
}

/* Arrow Icon */

.back-link .icon {
color: var(--secondary-color);
font-size: 2rem; 
}

/* Additional styling for the dropdown menu */
.dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add the drop shadow */
  opacity: 0;
  display: block;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
  }
  
  .top-bar .dropdown .dropdown-menu {
  opacity: 0;
  display: block;
  visibility: hidden;
  position: absolute;
  background-color: white;
  margin-top: 26px;
  z-index: 999;
  left: auto; /* Remove the left property */
  right: 0; /* Position the dropdown menu from the right side */
  width: 300px;
  }
  
  .dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  }

.dropdown .dropdown-menu a {
display: block
}

.dropdown-menu ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}

.dropdown-menu li {
display: block;
background-color: #fff;
transition: background-color 0.3s ease;
}

.dropdown-menu li a {
display: block;
color: #000;
text-decoration: none;
padding: 10px;
transition: background-color 0.3s ease;
}

ul li.dropdown .dropdown-menu a {
color: var(--tertiary-color);
}

ul li.dropdown .dropdown-menu a:hover {
color: #0035BC;
}

.dropdown-menu::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
background-color: blue;
transition: width 0.3s ease;
}

.dropdown:hover .dropdown-menu::before {
width: 100%;
}

/* Customize the dropdown menu */
.dropdown .dropdown-menu {
width: 200px; /* Adjust the width as desired */
top: 30px; /* Adjust the vertical position as desired */
left: 285px !important; /* Adjust the horizontal position as desired */
}

.top-bar .chevron {
display: inline-block;
margin-left: 5px;
vertical-align: middle;
}



/**************************************************************** TOP BAR MOBILE *************************************************************/

.top-bar-mobile {
  display: flex;  /* hide the top bar initially */
  box-sizing: border-box;
  width: 100%;
  padding: 10px 20px;
  font-size: 18px;
  background-color: var(--ground-color);
  color: var(--dark-color);
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;  /* add this line */
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1); /* Safari, Chrome, Opera */
  -moz-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1); /* Firefox */
  -ms-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1); /* Internet Explorer */
  -o-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1); /* Opera */
}


/* Case Study Top Bar Margin Bottoms */

.margin-bottom-mobile {
margin-bottom: var(--mb-24px);
}


/*body.onscroll .bottom-bar {
opacity: 0;
}*/


/**************************************************************** MOBILE MENU *************************************************************/


.menu-bar {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 65px;
background-color: transparent;
text-align: left;
z-index: 1000;
}


/*#home-menu-bar {
  background-color: var(--secondary-color);
}*/

.back-link {
font-size: 2rem;
margin-top: 10px;
}

.menu-bar .back-link {
padding-left: 20px;
}

.menu-bar #menu-open {
padding-top: 0px;
padding-right: 20px;
color: var(--tertiary-color);
transition: all 0.5s ease;
}

#menu-overlay {
position: fixed;
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: white;
transition: height 0.5s;
overflow: hidden;
z-index: 1000;
}

#menu-overlay ul.menu-work {
margin-left: 2rem;
}

#menu-overlay ul.work-listing {
  margin-left: 1rem;
}

#menu-overlay:target nav ul {
bottom: 0;
transition: bottom 0.5s;
}

#menu-overlay nav ul li a {
font-size: 3rem;
line-height: 3.5rem;
color: var(--tertiary-color);
text-decoration: none;
font-family: 'HelveticaNowDisplay-XBd';
}

#menu-overlay nav ul li.work-list a {
font-size: 2rem;
line-height: 2.5rem;
color: var(--tertiary-color);
text-decoration: none;
font-family: 'HelveticaNowDisplay-XBd';
}

#menu-overlay #work-nav ul.menu-work li.work-list {
list-style-type: none;
}

#menu-close:active,
#menu-close:focus {
outline: none;
}

#menu-close:target {
display: none;
}

#main-nav, #work-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s;
overflow: hidden;
}

.menu-work {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
}

#work-nav {
transform: translateX(100%);
}

.hidden {
left: -100%;
}

#menu-close {
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
border: 1px solid var(--secondary-color);
border-radius: 50%;
background-color: var(--secondary-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--ground-color);
font-size: 28px;
text-decoration: none;
}

#main-nav ul {
list-style: none;
margin: 0;
padding: 0;
opacity: 0;
transition: opacity 0.5s ease;
}

#menu-overlay.open #main-nav ul {
opacity: 1;
margin-top: -2rem;
}

#main-nav ul li {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.25s ease;
padding-left: 0px;
}

#main-nav ul li::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0px;
}

#menu-overlay.open #main-nav ul li {
opacity: 1;
transform: translateY(0);
}

#menu-overlay.open #main-nav ul li:nth-child(1) {
transition-delay: 0.0s;
}

#menu-overlay.open #main-nav ul li:nth-child(2) {
transition-delay: 0.2s;
}

#menu-overlay.open #main-nav ul li:nth-child(3) {
transition-delay: 0.4s;
}

#menu-overlay.open #main-nav ul li:nth-child(4) {
transition-delay: 0.6s;
}

#work-link,
#back-link {
display: flex;
align-items: center;
}

#work-link .chevron-forward,
#back-link .chevron-back {
margin-left: 5px;
vertical-align: middle;
}

#work-link .chevron-forward{
margin-top: 5.5px;
margin-left: 20px;
font-size: 2.25rem;
}

#back-link {
display: flex;
align-items: center;
font-size: 1.25rem !important;
margin-left: -5px;
}

#back-link ion-icon {
margin-top: -3px;
margin-right: 5px; /* Adjust the value as needed */
}

#menu-overlay nav ul li a#back-link{
font-family: Helvetica, Arial, sans-serif;
}

#menu-overlay.open #work-nav ul {
margin-top: 0rem;
}

.menu-work-container {
position: absolute;
width: 100%;
top: 50%; /* Position it at 50% from the top */
transform: translateY(-50%); /* Center it vertically */
left: 2rem;
}

#work-nav ul li {
opacity: 0;
transform: translateX(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

#work-nav.open ul li:nth-child(1) {
transition-delay: 0.2s;
}

#work-nav.open ul li:nth-child(2) {
transition-delay: 0.4s;
}

#work-nav.open ul li:nth-child(3) {
transition-delay: 0.6s;
}

#work-nav.open ul li:nth-child(4) {
transition-delay: 0.8s;
}

#work-nav .menu-work li a {
font-size: 2rem; /* Adjust the font size as needed */
line-height: 3rem;
}


/* Style the growing blue line */
#work-nav:before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 50.5%;
  transform: translateY(-50%); /* Center it vertically */
  width: 3px;
  height: 0;
  background-color: blue;
  transition: height 0.5s ease;
  z-index: -1; /* Place it behind the list items */
}

/* Animate the growing blue line */
#work-nav.open:before {
  height: 265px;
  transition: height 0.8s ease;
}

/* Style the container for the growing line */
.menu-work-container {
position: relative;
overflow: hidden; /* Hide the overflowing part of the growing line */
}

/* Style the growing blue line container */
.growing-line {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 0;
background-color: blue;
transition: height 0.8s ease;
z-index: -1; /* Place it behind the list items */
}


/***************************************************************** BURGER ICON *******************************************************************/
/*************************************************************************************************************************************************/

.burger-icon {
display: inline-block;
position: relative;
flex-direction: column;
justify-content: space-between;
top: 3px;
right: 10px;
width: 40px;
height: auto;
cursor: pointer;
}

.burger-icon.process {
top: -3px;
}

.bar {
width: 40px;
height: 2px;
background-color: black;
}

.bar:not(:last-child) {
margin-bottom: 7px;
}

.bar:last-child {
width: 20px;
margin-left: 20px;
}

.bar.process {
background-color: white;
}

.bar.homepage {
background-color: white;
}


/***************************************************************** ACTIVE STATE ******************************************************************/
/*************************************************************************************************************************************************/

/* Add this to your existing CSS */
.active {
color: #1313f9;
}

/***************************************************************** MAIN CONTENT ******************************************************************/
/*************************************************************************************************************************************************/

/* Main Content Container */

main {
  overflow-x: hidden;
}

/* Wrapper */

.wrapper {
  width: 90%;
  max-width: 1700px;
  margin: 0 auto;
}



/****************************************************************** HOMEPAGE *************************************************************************/
/*****************************************************************************************************************************************************/


/*********************************************************** HOMEPAGE HERO SECTION *************************************************************/


.hero {
  width: 300px;
  padding: 5rem 0 0 0; /* 5rem padding on top and bottom */
  margin-top: var(--mt-24px);
  margin-bottom: var(--mb-8px);
  margin: 0 auto;
}

.hero-text {
  text-align: center;
  color: var(--ground-color);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.hero-text .name-intro {
font-size: 1rem;
margin-bottom: var(--mb-32px);
}

.hero-text h1 {
font-size: var(--h1-mobile);
line-height: var(--h1-line-height-mobile);
margin-bottom: var(--mb-72px);
font-family: 'HelveticaNowDisplay-XBd';
}

#case-studies-title {
  text-transform: uppercase;
  color: var(--lightest-accent-color);
  font-family: 'HelveticaLTWXX-Roman';
  font-weight: normal;
  font-size: 16px;
  letter-spacing: 6px;
}


/**************************************************************** CASE STUDY CONTAINERS ALTERNATE DESIGN ***********************************************************/


.case-study-link-container {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box; /* Include padding within the width */
  text-align: center; /* Center the text horizontally within the container */
  margin-top: 16px; /* Add some top margin to separate it from the hero text */
  padding: 20px 20px 30px 20px;
  cursor: pointer;
  transition: 0.2s;
  margin-bottom: var(--mb-56px);
  box-shadow: inset 0 0 0 2px var(--darker-accent-color); /* 2px solid inset shadow with sharp lines */
  border-radius: 6px;
  z-index: 1;
  background-color: black;
}


/*** BUTTON SPAN OVERALL STYLES ***/

.case-study-link-container span {
  position: absolute;
  display: block;
  z-index: 2;
}

/*** BUTTON SPAN OVERALL STYLES TOP AND BOTTOM LINES ***/

.case-study-link-container span:nth-child(1),
.case-study-link-container span:nth-child(3)
{
    width: 100%;
    height: 1px;
    background: var(--lightest-accent-color);
}

/*** TOP LINE ***/

.case-study-link-container span:nth-child(1) {
  top: 0;
  left: 0;
  transform-origin: left;
  transform: scaleX(0);
}

/*** TOP LINE HOVER ANIMATE RIGHT ***/

.case-study-link-container:hover span:nth-child(1) {
  transform: scaleX(1);
  transition: 0.2s;
  transition-delay: 0s;
}

/*** BOTTOM LINE ***/

.case-study-link-container span:nth-child(3) {
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
}

/*** BOTTOM LINE HOVER ANIMATE LEFT ***/

.case-study-link-container:hover span:nth-child(3) {
  transform: scaleX(1);
  transition: 0.2s;
  transition-delay: 0.4s;
}

/*** BUTTON SPAN OVERALL STYLES RIHT AND LEFT LINES ***/

.case-study-link-container span:nth-child(2),
.case-study-link-container span:nth-child(4)
{
    width: 1px;
    height: 100%;
    background: var(--lightest-accent-color);
}

/*** LEFT LINE ***/

.case-study-link-container span:nth-child(2) {
  top: 0;
  right: 0;
  transform-origin: top;
  transform: scaleY(0);
}

/*** LEFT LINE HOVER ANIMATE DOWN ***/

.case-study-link-container:hover span:nth-child(2) {
  transform: scaleY(1);
  transition: 0.2s;
  transition-delay: 0.2s;
}

/*** RIGHT LINE ***/

.case-study-link-container span:nth-child(4) {
  bottom: 0;
  left: 0;
  transform-origin: bottom;
  transform: scaleY(0);
}

/*** RIGHT LINE HOVER ANIMATE UP ***/

.case-study-link-container:hover span:nth-child(4) {
  transform: scaleY(1);
  transition: 0.2s;
  transition-delay: 0.6s;
}


.homepage-text {
  color: white;
  text-align: left;
}

h5.homepage-text {
  line-height: 24px;
  margin-bottom: var(--mb-24px);
}

#client-title {
  text-transform: uppercase;
  font-size: var(--body-copy-mobile-large);
  color: var(--lightest-accent-color);
  letter-spacing: 1px;
}

#project-title {
  font-size: 2rem;
  line-height: 2.25rem;
}

#project-descriptor {
  font-size: var(--body-copy-desktop);
  line-height: 1.75rem;
  color: var(--lightest-accent-color);
  width: 100%;
}

.image-box {
  width: 100%;
  height: 200px;
  background-color: var(--darker-accent-color);
  margin-bottom: var(--mb-24px);
  display: block;
  transition: height 0.5s ease-in-out;

}

.responsive-break-case-study {
  display: block;
}

.cta.case-study-link-boxes {
  background-color: transparent;
  color: white;
  border: 1px solid var(--accent-color);
  border-radius: 6px;
}

.case-study-link-container:hover .cta.case-study-link-boxes {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transition: background-color 0.5s ease-in-out;
}

/*** CASE STUDY LINK BACKGROUND IMAGES ***/

.evolution-aqua-case-study-image-box {
  background-image: url('/img/homepage/link-images/evolution-aqua/320px.jpg');
  background-size: cover;
  transition: background-image 0.5s ease-in-out;

}

.newsquest-case-study-image-box {
  background-image: url('/img/homepage/link-images/newsquest/320px.jpg');
  background-size: cover;
}

.zenauto-case-study-image-box {
  background-image: url('/img/homepage/link-images/zenauto/320px.jpg');
  background-size: cover;
}

.tesco-case-study-image-box {
  background-image: url('/img/homepage/link-images/tesco/320px.jpg');
  background-size: cover;
}

.royal-mint-case-study-image-box {
  background-image: url('/img/homepage/link-images/royal-mint/320px.jpg');
  background-size: cover;
}

.nowplan-case-study-image-box {
  background-image: url('/img/homepage/link-images/nowplan/320px.jpg');
  background-size: cover;
}

@media screen and (min-width: 384px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/384px.jpg');
  }

  .newsquest-case-study-image-box {
    background-image: url('/img/homepage/link-images/newsquest/384px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/384px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/384px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/384px.jpg');
  }

  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/384px.jpg');
  }
}

@media screen and (min-width: 400px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/400px.jpg');
  }
}

@media screen and (min-width: 450px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/450px.jpg');
  }
}


@media screen and (min-width: 500px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/1398px.jpg');
  }

  .newsquest-case-study-image-box {
    background-image: url('/img/homepage/link-images/newsquest/1398px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/1398px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/1398px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/1398px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/1398px.jpg');
  }
}

@media screen and (min-width: 600px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/600px.jpg');
  }

  .newsquest-case-study-image-box {
    background-image: url('/img/homepage/link-images/newsquest/600px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/600px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/600px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/600px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/600px.jpg');
  }
}

@media screen and (min-width: 650px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/650px.jpg');
  }
}

@media screen and (min-width: 700px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/700px.jpg');
  }
}

@media screen and (min-width: 750px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/750px.jpg');
  }
}


@media screen and (min-width: 768px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/768px.jpg');
  }

  .newsquest-case-study-image-box {
    background-image: url('/img/homepage/link-images/newsquest/768px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/768px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/768px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/768px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/768px.jpg');
  }
}

@media screen and (min-width: 820px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/820px.jpg');
  }

  .newsquest-case-study-image-box{
    background-image: url('/img/homepage/link-images/newsquest/820px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/820px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/820px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/820px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/820px.jpg');
  }
}

@media screen and (min-width: 854px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/854px.jpg');
  }

  .newsquest-case-study-image-box{
    background-image: url('/img/homepage/link-images/newsquest/854px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/854px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/854px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/854px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/854px.jpg');
  }
}

@media screen and (min-width: 900px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/900px.jpg');
  }
}

@media screen and (min-width: 950px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/950px.jpg');
  }
}


@media screen and (min-width: 1024px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/1024px.jpg');
  }

  .newsquest-case-study-image-box{
    background-image: url('/img/homepage/link-images/newsquest/1024px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/1024px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/1024px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/1024px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/1024px.jpg');
  }
}

@media screen and (min-width: 1200px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/1200px.jpg');
  }
}

@media screen and (min-width: 1250px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/1250px.jpg');
  }
}

@media screen and (min-width: 1398px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/1398px.jpg');
  }

  .newsquest-case-study-image-box {
    background-image: url('/img/homepage/link-images/newsquest/1398px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/1398px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/1398px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/1398px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/1398px.jpg');
  }
}


@media screen and (min-width: 1400px) {
  .evolution-aqua-case-study-image-box {
    background-image: url('/img/homepage/link-images/evolution-aqua/1400px.jpg');
  }

  .newsquest-case-study-image-box {
    background-image: url('/img/homepage/link-images/newsquest/1400px.jpg');
  }

  .zenauto-case-study-image-box {
    background-image: url('/img/homepage/link-images/zenauto/1400px.jpg');
  }

  .tesco-case-study-image-box {
    background-image: url('/img/homepage/link-images/tesco/1400px.jpg');
  }

  .royal-mint-case-study-image-box {
    background-image: url('/img/homepage/link-images/royal-mint/1400px.jpg');
  }
  
  .nowplan-case-study-image-box {
    background-image: url('/img/homepage/link-images/nowplan/1400px.jpg');
  }
}


/*.case-study-link-container:hover  #project-descriptor {
  color: var(--ground-color);
  transition: color 0.5s ease-in-out;
}*/



/**************************************************************** FOOTER *************************************************************/

#footer {
cursor:pointer;
}

.footer {
background-color: var(--tertiary-color);
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.footer-text {
text-align: center;
color: var(--ground-color);
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cta.footer-cta {
width:280px;
margin-bottom: var(--mb-64px);
}

.communication-icons {
display: inline-flex;
position: absolute;
bottom: 15px;
left: 15px;
}

.communication-icons-mobile-menu {
  display: inline-flex;
  position: absolute;
  top: 30px;
  left: 0px;
}

.linkedin-icon,
.email-icon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
width: 50px;
height: 50px;
text-align: center;
border: 2px solid var(--accent-color);
background: transparent;
border-radius: 50%;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
transition: all .3s linear 0s;
}

.linkedin-icon {
margin-right: 10px;
}

.linkedin-icon img {
width: 20px;
height: 20px;
}

.email-icon img {
width: 20px;
height: 20px;
}


.linkedin-icon-mobile-menu,
.email-icon-mobile-menu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
width: 50px;
height: 50px;
text-align: center;
border: 2px solid var(--tertiary-color);
background: var(--tertiary-color);
border-radius: 50%;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
transition: all .3s linear 0s;
}


.linkedin-icon-mobile-menu {
  margin-right: 10px;
  }
  
  .linkedin-icon-mobile-menu img {
  width: 20px;
  height: 20px;
  }
  
  .email-icon-mobile-menu img {
  width: 20px;
  height: 20px;
  }
  


/**************************************************************** BACK TO TOP BUTTON *************************************************************/

/* Style the back to top button */
.back-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  background-color: black;
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}

/* Style the arrow icon */
.back-to-top ion-icon {
color: white;
font-size: 24px;
}

.red {
color: var(--error-color);
}


/* CSS for Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--ground-color);
  color: var(--tertiary-color);
  padding: 20px;
  text-align: left;
  z-index: 1000;
  display: block;
}

.cookie-text {
  margin-bottom: var(--mb-32px);
  font-size: var(--body-copy-mobile);
  line-height: 1.25rem;
}

#banner-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--secondary-color);
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ground-color);
  font-size: 18px;
  text-decoration: none;
  }

.cookie-button {
  width: 100%;
}

.accept-button {
  background-color: var(--primary-color); /* Button color */
  color: white;
  border: var(--primary-color);
  border-radius: 3px;
  width: 100%;
  padding: 15px 20px;
  cursor: pointer;
  /*border-radius: 5px;*/
}


/* Media query for screens above 600px */
@media screen and (min-width: 601px) {
  .cookie-banner {
    padding-bottom: var(--mb-32px);
    width: 500px;
}


  .cookie-button {
    width: 200px;
    float: left;
  }
}





/**************************************************************** BREAKPOINTS ******************************************************************/
/***********************************************************************************************************************************************/

/***************************************************************** 321px **********************************************************************/

@media screen and (min-width: 321px) {

.tools-section {
  width: 300px;
}
}

/***************************************************************** 360px **********************************************************************/

@media screen and (min-width: 360px) {

h2 {
  letter-spacing: 0px;
}

img.evolution-aqua-smartphones {
  width: 450px;
  margin-top: -2rem;
}

.overview-content-spacing {
  margin-bottom: var(--mb-48px);
}

.tools-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Default grid with 3 columns */
  grid-gap: 30px 10px; /* Horizontal and vertical spacing between grid items */
  width: 100%;
  margin: 32px 0 56px 0;
}

.tool-logo {
  text-align: center;
}

.tool-logo img {
  width: 35px;
  height: 35px;
}
}

/************************************************************************* 375px *******************************************************************/

@media screen and (min-width: 375px) {

img.evolution-aqua-smartphones {
  width: 500px;
  margin-top: -2rem;
  margin-left:-50px;
  margin-right: -20px;
}
}

/************************************************************************* 384px *******************************************************************/

@media screen and (min-width: 384px) {

  .navbar-cta {
    padding: 13px 30px;
  }

  /* Animate the growing blue line */
#work-nav.open:before {
  height: 290px;
  transition: height 0.8s ease;
}

#menu-overlay nav ul li.work-list a {
  font-size: 2.25rem;
  line-height: 2.75rem;
}

.hero-text h1 {
  font-size: var(--h1-mobile-large);
  line-height: var(--h1-line-height-mobile-large);
}


.footer-text h1 {
  font-size: var(--h1-mobile-large);
  line-height: var(--h1-line-height-mobile-large);
}
}

/************************************************************************* 400px *******************************************************************/

@media screen and (min-width: 400px) {

h6 {
  font-size: var(--h6-mobile-large);
  line-height: var(--h6-line-height-mobile-large);
}

.cta {
  padding: 20px 40px;
}

.standard-cta {
  padding: 20px 40px;
}

#problem-highlight-box,
#approach-highlight-box,
#actions-highlight-box,
#solution-highlight-box,
#learning-highlight-box {
  padding: 30px 50px 10px 40px; 
}

p {
  font-size: var(--body-copy-mobile-large);
  line-height: var(--body-copy-line-height-mobile-large);
}

/* Animate the growing blue line */
#work-nav.open:before {
  height: 310px;
}


.case-study {
  margin-bottom: var(--mb-104px);
}

.case-study-right p {
  margin-bottom: var(--mb-40px);
}

.zenauto-link-image {
  width: 500px;
  margin-left: -150px; /* Half of the excess width to bleed off the right side */
}

.green-room-link-image {
  width: 1000px;
  margin-left: -350px; /* Half of the excess width to bleed off the right side */
}

.case-study-right.zenauto {
  margin-top: 2rem;
}

.nowplan-link-image { 
  width:150%;
  margin-left: -40%; /* Half of the excess width to bleed off the left side */
  margin-right: -70%; /* Half of the excess width to bleed off the right side */
}

img.evolution-aqua-smartphones {
  width: 600px;
  margin-top: -2rem;
  margin-left:-40px;
  margin-right: -20px;
}

#work-nav .menu-list li a {
  font-size: 2.5rem; /* Adjust the font size as needed */
  line-height: 3.5rem;
}

ul.case-study-list {
  font-size: var(--body-copy-mobile-large);
  line-height: var(--body-copy-line-height-mobile-large);
}

ul.case-study-list.bullets {
  font-size: var(--body-copy-mobile-large);
  line-height: var(--body-copy-line-height-mobile-large);
}

ul.case-study-list.bullets li::before {
  top: 8px;
}

ul.case-study-list.bullets.responsibilities-list {
  font-size: var(--body-copy-mobile-large);
  line-height: var(--body-copy-line-height-mobile-large);
}

ul.case-study-list.bullets.responsibilities-list li::before {
  content: ""; /* Create a pseudo-element for the bullet point */
  position: absolute;
  /*left: 30px;*/
  left: 0;
  top: 8px;
  transform: none;
  width: 8px; /* Adjust the bullet size */
  height: 8px;
  background-color: var(--secondary-color);
  border-radius: 50%; /* Create a circular bullet */
}

ul.case-study-list.bullets.problem-list li::before,
ul.case-study-list.bullets.approach-list li::before,
ul.case-study-list.bullets.actions-list li::before,
ul.case-study-list.bullets.solution-list li::before,
ul.case-study-list.bullets.learnings-list li::before {
  top: 9px;
}
  
ol {
  font-size: var(--body-copy-mobile-large);
  line-height: var(--body-copy-line-height-mobile-large);
}

ul.additional-menu-list {
  font-size: var(--body-copy-mobile-large);
  line-height: var(--body-copy-line-height-mobile-large);
}

.case-study-link-container,
.case-study-link-container:hover:after,
.case-study-link-container:hover .case-study-link-container-inner:before {

}

}

/************************************************************************* 500px *******************************************************************/

@media screen and (min-width: 500px) {

  #menu-overlay ul.menu-work {
    margin-left: 2.5rem;
  }

#menu-overlay nav ul li.work-list a {
  font-size: 3rem;
  line-height: 3.5rem;
}

/* Style the growing blue line */
#work-nav:before {
  top: 51%;
}

  /* Animate the growing blue line */
  #work-nav.open:before {
    height: 375px;
    transition: height 0.8s ease;
  }


.evolution-aqua-link-image {
  width:100%;
  margin-left: -20%; /* Half of the excess width to bleed off the left side */
  margin-right: -20%; /* Half of the excess width to bleed off the right side */
}

.nowplan-link-image {
  width:130%;
  margin-left: -25%; /* Half of the excess width to bleed off the left side */
  margin-right: -50%; /* Half of the excess width to bleed off the right side */
}


.cta.case-study-link-boxes {
  width: 300px;
  padding: 25px 30px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  box-sizing: border-box; /* Add this line */
  }
  
  .case-study-link-container:hover .cta.case-study-link-boxes {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    transition: background-color 0.5s ease-in-out;
  }

.tools-section {
  grid-template-columns: repeat(4, 1fr); /* Grid with 5 columns */
  grid-gap: 30px 10px; /* Horizontal and vertical spacing between grid items */
  width: 470px;
}

.tool-logo:nth-child(4),
.tool-logo:nth-child(7) {
  text-align: center;
}

.tool-logo img {
  width: 40px;
  height: 40px;
}

}

/************************************************************************* 592px *******************************************************************/

@media screen and (min-width: 5092x) {

.tools-section {
  grid-template-columns: repeat(6, 1fr); /* Grid with 5 columns */
  width: 550px;
}

}

/***************************************************************** 600px **********************************************************************/

@media (min-width: 600px) {

.image-box {
  height: 300px;
}

#work-nav .menu-list li a {
  font-size: 3rem; /* Adjust the font size as needed */
  line-height: 3.5rem;
}

#case-studies-title {
  font-size: 18px;
  letter-spacing: 9px;
}


.evolution-aqua-headline-image {
text-align: right;
overflow-x:visible;
}

.nowplan-link-image {
width:100%;
margin-left: -25%; /* Half of the excess width to bleed off the left side */
margin-right: -50%; /* Half of the excess width to bleed off the right side */
}

#newsquest-hero-strip {
background-image: url('https://www.uxi-designer.com/excelitaire/img/newsquest/newsquest-hero-strip-image.svg');
background-position:  -250px 200%; /* Adjust the position as needed for mobile */
margin-bottom: var(--mb-104px);
}

#newsquest-hero-devices {
float: right;
}

img.newsquest-macbook-smartphone {
width:950px;
margin-top: -50px;
margin-right:-600px;
}

img.evolution-aqua-smartphones {
width: 450px;
margin-top: -2rem;
}

}


/***************************************************************** 692px **********************************************************************/

@media (min-width: 692px) {


  .case-study-link-container,
  .case-study-link-container:hover:after,
  .case-study-link-container:hover .case-study-link-container-inner:before {

  }
  
}


/***************************************************************** 700px **********************************************************************/

@media (min-width: 700px) {
.tools-section {
  grid-template-columns: repeat(7, 1fr); /* Default grid with 3 columns */
  grid-gap: 63px 10px; /* Horizontal and vertical spacing between grid items */
  width: 700px;
}

.tool-logo img {
  width: 50px;
  height: 50px;
}
}



/***************************************************************** 768px **********************************************************************/

@media (min-width: 768px) {

  .responsive-break-case-study {
    display: none;
  }

  .logo {
    width: 180px;
    top: 20px;
    left: 30px;
  }

  .menu-bar #menu-open {
    padding-top: 20px;
    }

.hero { 
  width: 100%;
  padding: 5rem 0 0 0; /* 5rem padding on top and bottom */
  margin-top: var(--mt-96px);
  margin-bottom: var(--mb-56px);
}

.hero-text {
  text-align: center;
  color: var(--ground-color);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-text .name-intro {
  font-size: 1rem;
  margin-bottom: var(--mb-32px);
}

.hero-text h1 {
  font-size: var(--h1-mobile);
  line-height: var(--h1-line-height-mobile);
  margin-bottom: var(--mb-72px);
  font-family: 'HelveticaNowDisplay-XBd';
}

#case-studies-title {
  text-transform: uppercase;
  color: var(--lightest-accent-color);
  font-family: 'HelveticaLTWXX-Roman';
  font-weight: normal;
  font-size: 18px;
  letter-spacing: 6px;
}

#client-title {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--lightest-accent-color);
  letter-spacing: 1px;
}

#project-title {
  font-size: 3rem;
  line-height: 3.50rem;
}

#project-descriptor {
  font-size: 2rem;
  line-height: 2.75rem;
  max-width: 650px;
}

#menu-overlay ul.menu-work {
  margin-left: 3.5rem;
}

#menu-overlay nav ul li a {
  font-size: 4rem;
  line-height: 4.5rem;
}

#menu-overlay nav ul li.work-list a {
  font-size: 4rem;
  line-height: 4.5rem;
}

#menu-overlay nav ul li a {
  font-size: 4rem;
  line-height: 4.5rem;
}

#work-nav::before {
  top: 51.5%;
  left: 4rem;
}

/* Animate the growing blue line */
#work-nav.open:before {
  height: 455px;
  padding-top: 15px;
}

#menu-overlay ul.work-listing {
  margin-left: 5rem;
}

.margin-bottom-desktop {
  margin-bottom: var(--mb-136px);
}

  /* Headings */

  .hero-text h1 {
    font-size: var(--h1-tablet);
    line-height: var(--h1-line-height-tablet);
    margin-bottom: var(--mb-40px);
    font-family: 'HelveticaNowDisplay-XBd';
}

  h1 {
      font-size: var(--h1-tablet);
      line-height: var(--h1-line-height-tablet);
      line-height: 5.5rem;
  }

  h2 {
      font-size: var(--h2-tablet);
      line-height: var(--h2-line-height-tablet);
      margin-bottom: var(--mb-24px);
  }

  h2.heading-after {
      margin-bottom: var(--mb-48px);
  }

  h3 {
      font-size: var(--h3-desktop);
      line-height: var(--h3-line-height-desktop);
      margin-bottom: var(--mb-40px);
  }

  h3.overview-section-title {
      font-size: 2.5rem;
      margin-bottom: var(--mb-32px);
  }
  
  h4 {
      font-size: var(--h4-desktop);
      line-height: var(--h4-line-height-desktop);
      margin-bottom: var(--mb-24px);
  }

  h4.overview-subtitle {
    font-size: 1.5rem;
    margin-bottom: var(--mb-16px);
}

  h5 {
    font-size: var(--h5-desktop);
    line-height: var(--h5-line-height-desktop);
    margin-bottom: var(--mb-24px);
}

  h6 {
    font-size: var(--h6-desktop);
    line-height: var(--h6-line-height-desktop);
    margin-bottom: var(--mb-8px);
}

  /* Paragraphs */

  p {
      font-size: var(--body-copy-desktop);
      line-height: var(--body-copy-line-height-desktop);
  }

  ul.case-study {
    font-size: var(--body-copy-mobile);
    line-height: var(--body-copy-line-height-mobile);
  }

  .case-study-link-container {
    padding: 30px 30px;
    }
  
    

  .image-box {
    height: 500px;
    margin-top: var(--mt-32px);
    margin-bottom: var(--mb-32px);

  }

  p.homepage-text {
    font-size: var(--lead-copy-desktop);
    line-height: var(--lead-copy-line-height-desktop);
    margin-bottom: var(--mb-32px);
  }
  


/* Buttons */

  .cta {
    width: auto;
    padding: 25px 40px;
    border: none;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.3rem;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
}


  .cta.case-study-link-boxes {
    width: 300px;
    padding: 25px 30px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    box-sizing: border-box; /* Add this line */
    }
    
    .case-study-link-container:hover .cta.case-study-link-boxes {
      background-color: var(--primary-color);
      border: 1px solid var(--primary-color);
      transition: background-color 0.5s ease-in-out;
    }


      /* Buttons */

  .standard-cta {
    padding: 25px 40px;
    font-size: 1.3rem;
  }

/* Horizontal Rules */

hr.case-study-horizontal-rule {
  margin-bottom: var(--mb-56px);
}


    /* Sections */

    section {
      margin-bottom: var(--mb-88px);
  }

    /* Arrow Icon */

    .back-link .icon {
      font-size: 2.5rem; 
  }


  /* Italisized Copy */

  .quote-copy {
      font-family: var(--quote-copy);
      font-style: oblique;
      font-size: var(--body-copy-desktop);
      line-height: var(--body-copy-line-height-desktop);
  }

  /* Bold Words */

  strong {
      font-weight: bold;
  }

  /* Overview Vertical Spacings */

  .overview-content-spacing {
      margin-bottom: var(--mb-64px);
  }

  .paragraph-spacing {
      margin-bottom: var(--mb-72px);
  }

  .subsection-spacing {
      margin-bottom: var(--mb-40px);
  }

  .extra-spacing-large {
      margin-bottom: var(--mb-96px);
  }

  .extra-spacing-small {
      margin-bottom: var(--mb-16px);
  }

  /* Images */

  /*img {
      margin-bottom: var(--mb-112px);
  }*/

  .image-container {
      flex-direction: row;
  }

  .image-title {
      margin-bottom: var(--mb-40px);
  }
    
  .responsive-image {
      margin-right: 2rem;
  }
    
  .responsive-image:last-child {
      margin-right: 0;
  }


  /* Back Arrow Icon */

  .back-link .icon {
      font-size: 2.5rem; 
  }

  /* Navigation */

  .nav-menu a {
      font-size: 1.25rem;
  }

  /************************** HOMEPAGE CASE STUDY LINKS **************************/

  .case-study {
    margin-bottom: var(--mb-136px);
  }

  .case-study-right h2 {
      margin-bottom: var(--mb-24px);
  }

  .case-study-right p {
    margin-bottom: var(--mb-40px);
}

  .evolution-aqua-link-image {
    width:70%;
    margin-left: -20%; /* Half of the excess width to bleed off the left side */
    margin-right: -20%; /* Half of the excess width to bleed off the right side */
  }

  .newsquest-link-image-mobile {
    width: 1000px;
    margin-right: -480px; /* Half of the excess width to bleed off the right side */
  }

  .zenauto-link-image {
    width: 650px;
    margin-left: -250px; /* Half of the excess width to bleed off the right side */
  }

  .green-room-link-image {
    width: 1200px;
    margin-left: -350px; /* Half of the excess width to bleed off the right side */
  }

  .tesco-link-image {
    width: 1200px;
    margin-right: -450px; /* Half of the excess width to bleed off the right side */
  }

  .royal-mint-link-image-mobile {
    width: 1100px;
    margin-right: -550px; /* Half of the excess width to bleed off the right side */
  }

  .nowplan-link-image {
    width:100%;
    margin-left: -25%; /* Half of the excess width to bleed off the left side */
    margin-right: -40%; /* Half of the excess width to bleed off the right side */
  }

  .case-study-left.evolution-aqua {
    margin-bottom: var(--mb-32px);
  }

  .case-study-left.newsquest {
    margin-bottom: var(--mb-32px);
  }

  .case-study-left.zenauto {
    margin-bottom: var(--mb-32px);
  }

  .case-study-left.green-room {
    margin-bottom: var(--mb-56px);
  }

  .case-study-left.tesco {
    margin-bottom: var(--mb-32px);
  }

  .case-study-left.royal-mint {
    margin-bottom: var(--mb-32px);
  }

  .responsive-break-case-study {
    display: contents;
}

  /* Intro Statement */

  #intro-statement {
      font-size: 1.75rem;
      line-height: 2.25rem;
      margin-bottom: var(--mb-56px)
  }


  /* Case Study Hero Images */

  #newsquest-hero-strip {
    background-image: url('https://www.uxi-designer.com/excelitaire/img/newsquest/newsquest-hero-strip-image.svg');
    background-position:  -250px 200%; /* Adjust the position as needed for mobile */
    margin-bottom: var(--mb-104px);
  }
  
  img.newsquest-macbook-smartphone {
    width:1000px;
    margin-top: -50px;
    margin-right:-600px;
  }


  /* Highlighted Call-Out Boxes */

  .additional-text {
    padding: 30px 50px 20px 50px; /* Add padding to the white box */
  }

  .framework-step-text {
    display: inline-block; /* Make the <h5> and <span> inline elements */
    margin-right: 15px; /* Add a right margin to create space between them */
    margin-bottom: var(--mb-40px);
  }

  .constraints-solutions-text {
    margin-bottom: var(--mb-24px);
}

  #problem-highlight-box,
  #approach-highlight-box,
  #actions-highlight-box,
  #solution-highlight-box,
  #learning-highlight-box {
    padding: 40px 50px 20px 50px; 
  }

  #outcome #problem-highlight-box,
  #outcome  #approach-highlight-box,
  #outcome  #actions-highlight-box,
  #outcome  #solution-highlight-box,
  #outcome  #learning-highlight-box {
    padding: 40px 50px 40px 50px; 
  }
  
  #constraints,
  #solutions  {
    padding: 30px 50px 40px 50px; 
  }

  .framework-step-icons {
    width: 50px;
    margin-top: -25px;
  }

  #small-icon {
    width: 25px;
    margin-top: -5px;
  }
  
  #medium-icon {
    width: 35px;
    margin-top: -18px;
  }

  #large-icon {
    width: 45px;
    margin-top: -22px;
  }
  
  #largest-icon {
    width: 45px;
    margin-top: -28px;
    margin-left: 5px;
  }

 /* Footer */

  .footer-text .name-intro {
    font-size: 1rem;
    margin-bottom: var(--mb-32px);
}

.footer-text h1 {
  font-size: var(--h1-tablet);
  line-height: var(--h1-line-height-tablet);
}

.communication-icons {
  display: inline-flex;
  position: absolute;
  bottom: 38px;
  left: 42px;
}

.communication-icons-mobile-menu {
  display: inline-flex;
  position: absolute;
  top: 30px;
  right: 0px;
}
}

/************************************************************************* 1024px *******************************************************************/

@media screen and (min-width: 1024px) {

/******** Containers ********/

.main-content-container,
.medium-content-container,
.large-content-container,
.larger-content-container,
.largest-content-container,
.full-width-container {
  margin-bottom: var(--mb-120px);
}

.several-images-together {
margin-bottom: var(--mb-48px);
}

.several-images-together:last-of-type {
margin-bottom: var(--mb-120px);
}


/******** Remove All Margins ********/

.no-margin {
margin-bottom: var(--mn-0px);
}

.navbar-cta {
  font-size: 1rem !important;
}


hr.homepage-horizontal-rule {
  display: none;
}

#text-container {
  position: absolute;
  top: 18px;
  left: 25px;
  width: 500px;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease; /* Add transition properties */
  display: none; /* Hide the text container initially */
  /*background-color: blue;*/
}

.project-title {
  text-align: left;
}

  #overlay {
      display: none;
  }

  .case-study:nth-child(even) .case-study-container {
    flex-direction: row-reverse;
  }

  .case-study {
    align-items: flex-start;
  }

  .case-study-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 93%;
  }

  .case-study-content {
    flex-wrap: nowrap;
  }

  .case-study-left,
  .case-study-right {
    width: 50%;
  }

  .case-study-left {
    display: flex;
    align-items: center;
    text-align: right;
  }
  
  .case-study-right {
    text-align: left;
    margin-top: -10rem !important;
  }

  .case-study-right p {
    margin-bottom: var(--mb-48px);
  }

  .client-logo {
    display: block;
    margin-bottom: var(--mb-56px);
  }

  .evolution-aqua-logo {
    width: 170px;
  }

  .newsquest-logo {
    width: 250px;
  }

  .zenauto-logo {
    width: 200px;
  }

  .green-room-logo {
    width: 130px;
  }

  .tesco-logo {
    width: 160px;
  }

  .royal-mint-logo {
    width: 260px;
  }

  .nowplan-logo {
    width: 210px;
  }


  .evolution-aqua-link-image {
    width: 120%;
    margin-top: 4rem;
    margin-right: -15rem;
  }

  .newsquest-link-image-mobile {
    display: none;
  }
  
  .newsquest-link-image-desktop {
    width: 1000px;
    display: block;
    margin-left: -400px;
  }

  .zenauto-link-image {
    width: 650px;
    margin-left: 200px; /* Half of the excess width to bleed off the right side */
  }

  .green-room-link-image {
    width: 1500px;
    margin-left: -1200px; /* Half of the excess width to bleed off the right side */
  }

  .tesco-link-image {
    width: 1400px;
    margin-left: 200px; /* Half of the excess width to bleed off the right side */
  }

  .royal-mint-link-image-mobile {
    display: none;
  }

  .royal-mint-link-image-desktop {
    display: block;
    width: 1200px;
    margin-left: -850px; /* Half of the excess width to bleed off the right side */
  }

  .nowplan-link-image {
    width:800px;
    margin-right: -500px; /* Half of the excess width to bleed off the right side */
  }

  .case-study-right.green-room {
    margin-top: 0rem;
  }

  .margin-left {
    margin-left: 6rem;
  }


  /******** Case Study Hero Images ********/

  #newsquest-hero-strip {
    margin-bottom: var(--mb-104px);
  }
  
  img.newsquest-macbook-smartphone {
    width:1000px;
    margin-top: -50px;
    margin-right:-400px;
  }

  p.homepage-text {
    font-size: var(--lead-copy-desktop);
    line-height: var(--lead-copy-line-height-desktop);
    width: 900px;
  }
  
}


/***************************************************************** 1100px **********************************************************************/

@media (min-width: 1100px) {

  /* Images */

  .image-container {
      margin-bottom: var(--mb-88px);
  }

  .image-with-margin {
      margin-bottom: var(--mb-72px);
  }
  

  /* Horizontal Dividers */

  hr {
      margin-bottom: var(--mb-72px);
  }

  /* Hero Section */

  .main-heading {
      margin-bottom: var(--mb-104px);
  }

 .case-study-hero-images {
  height: 700px; /* Set the desired height of the hero section */
  margin-bottom: var(--mb-88px);
  }

  #newsquest-hero-devices {
    float: right;
    margin-top: -80px;
    margin-right: -300px;
  }

 /******** Case Study Hero Images ********/

  #newsquest-hero-strip {
    margin-bottom: var(--mb-104px);
  }
  
  img.newsquest-macbook-smartphone {
    width:1550px;
    margin-top: 0px;
    margin-right:-600px;
  }
}

/***************************************************************** 1168px **********************************************************************/

@media (min-width: 1168px) {

  .footer-text h1 {
    font-size: var(--h1-tablet);
    line-height: var(--h1-line-height-tablet);
    margin-bottom: var(--mb-40px);
    font-family: 'HelveticaNowDisplay-XBd';
  }

}


/***************************************************************** 1200px **********************************************************************/

@media (min-width: 1200px) {

/* Add transition property to #blue-text */
#blue-text,
#white-text {
  transition: color 0.5s ease-in-out; /* Transition the color change over 0.5 seconds */
}

.menu-bar{
  display: none;  /* hide the bottom bar */
}

.top-bar {
  width:100%;
  height: 74px;
  display: flex;  /* show the top bar */
}

.back-link {
  margin-top: 40px;
}

h1 {
font-size: var(--h1-desktop);
line-height: var(--h1-line-height-desktop);
margin-bottom: var(--mb-48px);
}

.footer-text h1 {
  font-size: var(--h1-desktop);
  line-height: var(--h1-line-height-desktop);
  margin-bottom: var(--mb-40px);
  font-family: 'HelveticaNowDisplay-XBd';
}

h2 {
font-size: var(--h2-desktop);
line-height: var(--h2-line-height-desktop);
margin-bottom: var(--mb-24px);
}
ul.case-study-list {
font-size: var(--body-copy-desktop);
line-height: var(--body-copy-line-height-desktop);
margin-left: 0px;
}

ul.case-study-list.bullets {
font-size: var(--body-copy-desktop);
line-height: var(--body-copy-line-height-desktop);
list-style-type: none; /* Remove default bullet points */
margin-left: 0;
padding-left: 0; /* Remove default left padding */
}

ul.case-study-list.bullets li {
position: relative; /* Create a positioning context for the pseudo-element */
padding-left: 20px; /* Add left padding for the bullet space */
margin-bottom: 10px; /* Adjust margin between list items */
}

ul.case-study-list.bullets li::before {
content: ""; /* Create a pseudo-element for the bullet point */
position: absolute;
left: 0px;
top: 50%; /* Position the bullet in the middle of the list item */
transform: translateY(-50%);
width: 8px; /* Adjust the bullet size */
height: 8px;
background-color: var(--secondary-color);
border-radius: 50%; /* Create a circular bullet */
}

ul.case-study-list.icon-bullets {
font-size: var(--body-copy-desktop);
line-height: var(--body-copy-line-height-desktop);
list-style-type: none; /* Remove default bullet points */
margin-left: 0;
padding-left: 0; /* Remove default left padding */
}

ul.case-study-list.icon-bullets li {
position: relative; /* Create a positioning context for the pseudo-element */
padding-left: 40px; /* Add left padding for the bullet space */
margin-bottom: 10px; /* Adjust margin between list items */
}

ul.case-study-list.icon-bullets li::before {
content: ""; /* Create a pseudo-element for the bullet point */
position: absolute;
left: 0px;
top: 3px;
width: 20px; /* Adjust the bullet size */
height: 20px;

}

.overview-content-spacing {
margin-bottom: var(--mb-64px);
}


ol.case-study-list {
font-size: var(--body-copy-desktop);
line-height: var(--body-copy-line-height-desktop);
margin-left: 20px;
}

.hero-text .name-intro {
  font-size: 1.25rem;
}

.main-heading {
margin-top: var(--mt-64px);
margin-bottom: var(--mb-128px);
}

/* Intro Statement */

#intro-statement {
  font-size: 2rem;
  line-height: 2.5rem;
  width: 700px;
}

/******** Case Study Hero Images ********/

#newsquest-hero-strip {
background-image: url('https://www.uxi-designer.com/excelitaire/img/newsquest/newsquest-hero-strip-image.svg');
background-position:  -250px 200%; /* Adjust the position as needed for mobile */
margin-bottom: var(--mb-104px);
}


img.evolution-aqua-smartphones {
width: 700px;
margin-top: -4rem;
}

/* Paragraphs */

p {
font-size: var(--body-copy-desktop);
line-height: var(--body-copy-line-height-desktop);
margin-bottom: var(--mb-24px);
}


  .footer-text .name-intro {
    font-size: 1.25rem;
}

  /*.logo-strip {
      display: block;
  }*/

  .royal-mint-link-image-desktop {
    width: 1300px;
    margin-left: -850px; /* Half of the excess width to bleed off the right side */
  }

  .nowplan-link-image {
    width:800px;
    margin-right: -400px; /* Half of the excess width to bleed off the right side */
  }


.back-link .icon {
  top: 30px;
  left: 30px;
}

.line-break {
display: block;
}

/* Style the back to top button */

.top-link {
 display: none;
}

.back-to-top {
bottom: 38px;
right: 42px;
}

.responsive-break {
word-wrap: break-word;
}

.footer-text h1 {
  font-size: var(--h1-desktop);
  line-height: var(--h1-line-height-desktop);
}

}



/************************************************************************* 1400px *******************************************************************/

@media screen and (min-width: 1400px) {

  .case-study-link-container,
  .case-study-link-container:hover:after,
  .case-study-link-container:hover .case-study-link-container-inner:before {
  }

.case-study-container {
  width: 80%;
}

  .client-name {
    font-size: 1.5rem;
    margin-bottom: var(--mb-16px);
  }

  .image-box {
    height: 625px;

  }


.hero-text h1 {
  font-size: var(--h1-desktop);
  line-height: var(--h1-line-height-desktop);
  margin-bottom: var(--mb-80px);
  font-family: 'HelveticaNowDisplay-XBd';
}

.main-heading h1 {
  font-size: var(--h1-desktop);
  line-height: var(--h1-line-height-desktop);
  margin-bottom: var(--mb-24px);
  font-family: 'HelveticaNowDisplay-XBd';
}

.case-study-right h2 {
  font-size: var(--h2-desktop);
  line-height: var(--h2-line-height-desktop);
  margin-bottom: var(--mb-24px);
  font-family: 'HelveticaNowDisplay-XBd';
}

.evolution-aqua-link-image {
  width: 130%;
  max-width: 800px;
  margin-top: 4rem;
  margin-right: -20rem;
}

.newsquest-link-image-desktop{
  width: 1300px;
  display: block;
  margin-left: -700px;
}

.zenauto-link-image {
  width: 900px;
  margin-left: 400px; /* Half of the excess width to bleed off the right side */
}

.green-room-link-image {
  width: 1600px;
  margin-left: -1300px; /* Half of the excess width to bleed off the right side */
}

.tesco-link-image {
  width: 1700px;
  margin-left: 600px; /* Half of the excess width to bleed off the right side */
}

.royal-mint-link-image-desktop {
  width: 1400px;
  margin-left: -1000px; /* Half of the excess width to bleed off the right side */
}

/* Case Study Hero Images */

#newsquest-hero-strip {
  background-image: url('https://www.uxi-designer.com/excelitaire/img/newsquest/newsquest-hero-strip-image.svg');
  background-position:  -250px 200%; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-104px);
}

img.newsquest-macbook-smartphone {
  width:1600px;
  margin-top: -20px;
  margin-right:-500px;
}

.footer-text h1 {
font-size: var(--h1-desktop);
line-height: var(--h1-line-height-desktop);
margin-bottom: var(--mb-80px);
font-family: 'HelveticaNowDisplay-XBd';
}

}


/************************************************************************* 1618px *******************************************************************/

@media screen and (min-width: 1618px) {

.responsive-break {
    display: contents;
}

.nowplan-link-image {
  width:1100px;
  margin-right: -500px; /* Half of the excess width to bleed off the right side */
}

}


/************************************************************************* 1700px *******************************************************************/

@media screen and (min-width: 1700px) {

.tesco-link-image {
margin-left: 400px; /* Half of the excess width to bleed off the right side */
}

.royal-mint-link-image-desktop {
width: 1500px;
margin-left: -1000px; /* Half of the excess width to bleed off the right side */
}

img.evolution-aqua-smartphones {
width: 800px;
margin-top: -4rem;
}


}





/************************************************************************* 1900px *******************************************************************/

@media screen and (min-width: 1700px) {

/* Case Study Hero Images */

img.newsquest-macbook-smartphone {
  width:1800px;
  margin-top: -80px;
  margin-right:-600px;
}
}


/************************************************************************* 2000px *******************************************************************/

@media screen and (min-width: 2000px) {

.case-study-container {
width: 70%;
}

.zenauto-link-image {
margin-left: 200px; /* Half of the excess width to bleed off the right side */
}

.tesco-link-image {
margin-left: 200px; /* Half of the excess width to bleed off the right side */
}

.royal-mint-link-image-desktop {
width: 1500px;
margin-left: -800px; /* Half of the excess width to bleed off the right side */
}

.case-study-right.royal-mint {
margin-left: 6rem;  
}


/******** Case Study Hero Images ********/

#newsquest-hero-strip {
background-position:  0px 0px; /* Adjust the position as needed for mobile */
background-size:  150%; /* Adjust the position as needed for mobile */
margin-bottom: var(--mb-104px);
}
}

/************************************************************************* 2560px *******************************************************************/

@media screen and (min-width: 2400px) {


.zenauto-link-image {
margin-left: 0px; /* Half of the excess width to bleed off the right side */
}

#case-studies {
padding-top: 3rem;
}

/******** Case Study Hero Images ********/

img.newsquest-macbook-smartphone {
width:1800px;
margin-top: -80px;
margin-right:-300px;
}

.case-study-link-container:hover #blue-text {
  color: var(--primary-color) !important;
  transition: color 0.5s ease-in-out !important;
}


}