/***************************************************************************** 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 ********************************************************************/

    /**** HEADING FONT SIZES ****/

     /* 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: 1.25rem; /* 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 */

    /**** LINE HEIGHTS ****/

    /* 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: 2rem; /* 40px */
    --h5-line-height-mobile: 1.75rem; /* 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 */
    --lead-copy-mobile: 1.25rem; /* 24px */
    --lead-copy-line-height-mobile: 1.9rem; /* 32px */

    --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 */

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


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

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

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

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

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

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

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

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

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

    /* 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-160px: 10rem; /* 144px */
    --mb-168px: 10.5rem; /* 144px */
    --mb-176px: 11rem; /* 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: var(--ground-color);
}

body {
    background-color: transparent;
    color: var(--secondary-color);
    font-family: 'HelveticaLTWXX-Roman', 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;
     }
}


/************************************************************* SECTIONS ***********************************************************/

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

/************************************************************* IMAGE PLACEHOLDERS ***********************************************************/

.image-placeholder {
    background-color: #D9D9D9;
    height: 708px;
    width: 100%;
    margin: 0 auto;
  }

.image-placeholder.tall {
    background-color: #D9D9D9;
    height: 2232px;
    width: 100%;
    margin: 0 auto;
}

.centered-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
  }
  
.title {
    font-size: 24px;
    font-weight: bold;
    color: #000000; 
    margin-bottom: 10px;
  }
  
.subtitle {
    font-size: 20px;
    font-weight: bold;
    color: #000000; 
  }


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

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

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

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

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

.main-content-container-about-me {
  width: 100%;
  max-width: 730px;
  margin: 0 auto;
  margin-bottom: var(--mb-64px);
}

.main-content-container.reduce-main-content-container-spacing {
  margin-bottom: var(--mb-40px);
}

.main-content-container.title-before-image {
  margin-bottom: var(--mb-8px);
}

.main-content-container.innovate-together {
  margin-bottom: var(--mb-96px);
}

.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);
  }

  .medium-content-container.reduce-medium-content-container-spacing {
    margin-bottom: var(--mb-24px);
  }

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

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

.large-content-container.image-before-title {
  margin-bottom: var(--mb-40px);
}

.large-content-container.reduce-large-content-container-spacing {
  margin-bottom: var(--mb-40px);
}


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

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

.largeer-content-container.image-before-title {
  margin-bottom: var(--mb-40px);
}

.larger-content-container.reduce-larger-content-container-spacing {
  margin-bottom: var(--mb-24px);
}

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

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

.largest-content-container.image-before-title {
  margin-bottom: var(--mb-40px);
}

.largest-content-container.reduce-largest-content-container-spacing {
  margin-bottom: var(--mb-24px);
}
  
/******** Full Width Container ********/

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

.full-width-container.black-bg {
  background-color: var(--secondary-color);
  padding: 4rem 0;
}


/******** Two Column Image Container ********/

.two-column-image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  max-width: 2356px;
  margin: 0 auto;
  margin-bottom: var(--mb-64px);
}

/* Style individual images */
.two-column-image {
  flex-basis: 100%; /* 100% width on smaller screens */
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
}

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

/******** Several Images Together ********/

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

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

/******** Two Images Together ********/

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

.two-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);
}


/******** Add Box Shadow ********/

.box-shadow {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
}

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

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


/************************************************************* IMAGE GRID ***********************************************************/


 /* Base styles for the images */
 .image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* Vertical space between images on small screens */
  justify-content: center;
}

.image-grid .image-item {
  flex: 1;
  max-width: 100%;
  flex-basis: 100%;
}

/* Media query for larger screens (1200px and above) */
@media (min-width: 1200px) {
  .image-grid {
      gap: 43px; /* Center space between images in two columns */
  }

  .image-grid .image-item {
      flex-basis: calc(50% - 21.5px); /* 21.5px to account for the gap */
  }
}


/************************************************************* LOGO GRID ***********************************************************/


.logo-grid {
  display: grid;
  grid-gap: 10px; /* Adjust the gap as needed */
}

/* Default to 1 column */
.logo-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* At least 384px, go to 2 columns */
@media (min-width: 384px) {
  .logo-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

/* At least 768px, go to 3 columns */
@media (min-width: 600px) {
  .logo-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}

/* At least 900px, go to 4 columns */
@media (min-width: 900px) {
  .logo-grid {
      grid-template-columns: repeat(4, 1fr);
  }
}

/* At least 1648px, go to 5 columns */
@media (min-width: 1300px) {
  .logo-grid {
      grid-template-columns: repeat(5, 1fr);
  }
}

/* At least 1648px, go to 5 columns */
@media (min-width: 1800px) {
  .logo-grid {
      grid-template-columns: repeat(6, 1fr);
  }
}





/************************************************************* 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;
}

h2.h2-above-box {
  margin-bottom: var(--mb-32px);
}

h2.key-milestones-achieved {
  text-align: center;
  color: var(--ground-color);
}

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);
}

.wrapped-heading {
  text-indent: -2em;
  padding-left: 2em;
}

.wrapped-numbered-heading{
  text-indent: -1em;
  padding-left: 1em;
}


/******** 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);
}

.embedded-text-link {
  color: var(--primary-color);
  font-weight: bold;
  text-decoration: underline;
}


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

.lead-copy {
    font-size: var(--lead-copy-mobile);
    line-height: var(--lead-copy-line-height-mobile);
  }  

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;
}

i {
font-style: italic;
}

.blue-text {
  color: var(--primary-color);
}

.paragraph-before-h3 {
  margin-bottom: var(--mb-64px);
}


/******************************************************* HIGHLIGHT CALL-OUT BOXES ********************************************************/

#problem-highlight-box {
  max-width: 100;
  background-color: white;
  padding: 30px 20px 10px 20px; 
  border-left: 4px solid var(--problem-color);
  box-sizing: border-box; /* Include padding and border in width calculation */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--mb-88px);
}

#approach-highlight-box {
  max-width: 100;
  background-color: white;
  padding: 30px 20px 10px 20px; 
  border-left: 4px solid var(--approach-color);
  box-sizing: border-box; /* Include padding and border in width calculation */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--mb-64px);
}

#actions-highlight-box {
  max-width: 100;
  background-color: white;
  padding: 30px 20px 10px 20px; 
  border-left: 4px solid var(--primary-color);
  box-sizing: border-box; /* Include padding and border in width calculation */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--mb-88px);
}

#solution-highlight-box {
  max-width: 100;
  background-color: white;
  padding: 30px 20px 10px 20px; 
  border-left: 4px solid var(--solution-color);
  box-sizing: border-box; /* Include padding and border in width calculation */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--mb-64px);
}

#learning-highlight-box {
  max-width: 100;
  background-color: white;
  padding: 30px 20px 10px 20px; 
  border-left: 4px solid var(--learning-color);
  box-sizing: border-box; /* Include padding and border in width calculation */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--mb-64px);
}

#outcome #problem-highlight-box,
#outcome  #approach-highlight-box,
#outcome  #actions-highlight-box,
#outcome  #learning-highlight-box {
  padding: 30px 20px 30px 20px; 
}

#outcome  #solution-highlight-box {
  padding: 30px 40px 30px 20px; 
}


/************************************************************** LISTS *******************************************************************/

ul.case-study-list {
  font-size: var(--body-copy-mobile-small);
  line-height: var(--body-copy-line-height-mobile-small);
  margin-left: 0px;
}

.case-study-list > li ul > li:first-child {
  margin-top: 8px; /* Reset the margin for the first child of each nested list */
}

.spacing-after-list {
  margin-bottom: var(--mb-32px);
}

.learnings-list,
.actions-list {
  margin-bottom: var(--mb-24px);
}

.solutions-list {
  margin-bottom: var(--mb-40px);
}

ul.case-study-list.bullets.actions-list.multi-line-list li {
  margin-bottom: var(--mb-24px);
}


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

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

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: 2px; /* Adjust margin between list items */
}

ul.case-study-list.bullets li.multiple-list-spacing {
  margin-bottom: var(--mb-24px);
}


ul.case-study-list.bullets.bold-bullets li {
font-family: 'HelveticaLTWXX-bold', Arial, sans-serif;
}

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: 30px; /* 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: 6px;
  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.icon-bullets li::before {
  content: ""; /* Create a pseudo-element for the bullet point */
  position: absolute;
  top: 2px;
  left: 0px;
  transform: none;
  z-index: 5;
}


ul.case-study-list.bullets.problem-list,
ul.case-study-list.bullets.approach-list,
ul.case-study-list.bullets.actions-list,
ul.case-study-list.bullets.learnings-list {
  margin-left:0px; 
}


ul.case-study-list.bullets.solutions-list,
ul.case-study-list.bullets.next-steps-list
{
  margin-left:0px; 
}

ul.case-study-list.bullets.problem-list li,
ul.case-study-list.bullets.approach-list li,
ul.case-study-list.bullets.next-steps-list li,
ul.case-study-list.bullets.solutions-list li,
ul.case-study-list.bullets.learnings-list li {
  margin-bottom: var(--mb-24px);
}

ul.case-study-list.bullets.problem-list li:last-of-type,
ul.case-study-list.bullets.approach-list li:last-of-type,
ul.case-study-list.bullets.actions-list li:last-of-type,
ul.case-study-list.bullets.solutions-list li:last-of-type,
ul.case-study-list.bullets.learnings-list li:last-of-type {
  margin-bottom: 0px; 
}

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.next-steps-list li::before,
ul.case-study-list.bullets.learnings-list li::before,
ul.case-study-list.bullets.solutions-list li::before {
  content: ""; /* Create a pseudo-element for the bullet point */
  position: absolute;
  /*left: 30px;*/
  left: 0;
  top: 6px;
  transform: none;
  width: 8px; /* Adjust the bullet size */
  height: 8px;  
  border-radius: 50%; /* Create a circular bullet */
}

ul.case-study-list.bullets.problem-list li::before {
  background-color: var(--problem-color);
}

ul.case-study-list.bullets.approach-list li::before {
  background-color: var(--approach-color);
}

ul.case-study-list.bullets.actions-list li::before,
ul.case-study-list.bullets.next-steps-list li::before {
  background-color: var(--primary-color);
}

ul.case-study-list.bullets.solutions-list li::before {
  background-color: var(--solution-color);
}

ul.case-study-list.bullets.learnings-list li::before {
  background-color: var(--learning-color);
}

ul.case-study-list.icon-bullets li::before {
  content: '';
  display: inline-flex;
  width: 20px; /* Adjust the width and height as needed */
  height: 20px;
  background-image: url('https://www.uxi-designer.com/core/img/solution-icon.svg'); /* Replace 'bullet.svg' with your SVG path */
  background-size: contain; /* Ensure the SVG scales appropriately */
  background-repeat: no-repeat;
  margin-right: 10px; /* Adjust spacing between the bullet and the text */
}


.heading-with-tickbox::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px; /* Adjust the width and height as needed */
  height: 20px;
  background-image: url('/img/solution-icon.svg'); /* Replace 'bullet.svg' with your SVG path */
  background-size: contain; /* Ensure the SVG scales appropriately */
  background-repeat: no-repeat; /* Ensure the SVG scales appropriately */
  margin-top: -4px;
  margin-right: 20px; /* Adjust spacing between the bullet and the text */
}

ol {
  font-size: var(--body-copy-mobile-small);
  line-height: var(--body-copy-line-height-mobile-small);
  list-style-type: decimal;
  margin-left: 20px;
}

ul.additional-menu-list {
  font-size: var(--body-copy-mobile-small);
  line-height: var(--body-copy-line-height-mobile-small);
  list-style-type: none;
  margin-bottom: var(--mb-32px);
}

ul.additional-menu-list 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.additional-menu-list li::before {
  content: ""; /* Create a pseudo-element for the bullet point */
  position: absolute;
  left: 0px;
  top: 8px;
  transform: none;
  width: 8px; /* Adjust the bullet size */
  height: 8px;
  background-color: #0000FF;
  border-radius: 50%; /* Create a circular bullet */
}

li {
  font-family: 'HelveticaLTWXX-Roman';
  font-weight: normal;
}



/************************************************************** OVERVIEW SECTIONS *******************************************************************/


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

.my-role-content-spacing {
  margin-bottom: var(--mb-24px);
}

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

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

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

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

.spacing-after-bullets {
  margin-bottom: var(--mb-32px);
}

.label-before-image-spacing {
  margin-bottom: var(--mb-24px);
}

.career-highlights-content-spacing {
  margin-bottom: var(--mb-32px);
}

/******************************************************************** 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 ***********************************************************************/


.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: var(--primary-color);
  border-radius: 6px;
  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;
  text-align: center;
  cursor: pointer;
  font-size: .8rem !important;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin-right: 20px;
}
 

#contents-menu-trigger {
  margin-left: 30px; /* Add left margin */
}

/* CSS styles for hide and show classes */
.hide {
  display: none;
}

.show {
  display: block;
}


/******************************************************************** 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);
}

/************************************************************ RESPONSIVE BREAK ********************************************************/

.responsive-break {
    display: none;
}

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

.top-bar {
    display: none;  /* hide the top bar initially */
    box-sizing: border-box;
    width: 100%;
    padding: 30px 50px;
    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 */
}

.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:100px;
    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 ul li a:hover {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 18px;
  line-height: 40px;
}

.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: -10px; 
}

/* 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: var(--primary-color); /* Change it to primary color when hovering over "Work" */
  text-decoration: none;
  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: var(--primary-color); /* Change to primary color on hover */
  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 5px 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: 54px;
    height: auto;
    position: relative;
    top: 12px;
    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;
}

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

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

.menu-bar #menu-open {
  padding-right: 20px;
  color: var(--tertiary-color);
}

#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: 7000;
}

#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 a#lets-talk {
  color: var(--primary-color)
}


#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 */
}




/***************************************************************** PROCESS MENU NAVBAR ***********************************************************/
/*************************************************************************************************************************************************/

/* Styles for the "bottom" class */
#navbar {
  background-color: rgba(0, 0, 0);
  position: fixed;
  /*bottom: -100px; /* Stick to the bottom */
  top: -100px; /* Stick to the top */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: top 0.3s, bottom 0.3s; /* Transition both top and bottom properties */
  z-index: 6000;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  border-top: 1px solid var(--tertiary-color);
}

#navbar a {
  float: left;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
}

.process-menu-text {
  display: inline-block;
  position: relative;
  bottom: -3px; /* Move the text down by 3px */
}

/***************************************************************** 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;
}


/***************************************************************** PROGRESS BAR ***********************************************************************/
/*************************************************************************************************************************************************/

/* Progress bar container */
.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px; /* Adjust the height as needed */
  background-color: #676767;
  z-index: 9998; /* Place the progress bar below other elements */
}

/* Progress bar line */
.progress-bar {
  height: 100%;
  width: 0;
  background-color: #0000FF;
  transition: width 0.2s ease-in-out;
}

/***************************************************************** DARK PAGE OVERLAY *************************************************************/
/*************************************************************************************************************************************************/

/* CSS */
/*#page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; 
  display: none;
  z-index: 2;
  transition: opacity .5s ease-in-out;
}


/***************************************************************** SIDENAV ***********************************************************************/
/*************************************************************************************************************************************************/

#mySidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 5px;
  left: 0px;
  z-index: 5000;
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
  overflow-y: scroll;
  /*padding-top: 60px;*/
  transition: 0.3s;
  box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
}

/***************************************************************** MENU **************************************************************************/
/*************************************************************************************************************************************************/

.process-menu {
  margin-bottom: var(--mb-72px);
}

.menu-container {
  top: 20px;
  left: 0;
  flex-direction: column;
  align-items: center;
  overflow-y: auto; /* Enable vertical scrolling */
}

.menu-container.evolution-aqua-menu {
  height: 1550px; /* Set a fixed height for the container */
}

.menu-container.newsquest-menu {
  height: 1300px; /* Set a fixed height for the container */
}

.menu-container.zenauto-menu {
  height: 1720px; /* Set a fixed height for the container */
}

.menu-container.tesco-menu {
  height: 1160px; /* Set a fixed height for the container */
}

.menu-container.nowplan-menu {
  height: 1400px; /* Set a fixed height for the container */
}

.menu-container.royal-mint-menu {
  height: 1470px; /* Set a fixed height for the container */
}

.menu-container.about-me-menu {
  height: 588px; /* Set a fixed height for the container */
}


.menu {
  position: absolute;
  max-height: 80vh; /* Set a maximum height for the menu */
  /*top: 50px ;*/
  width: 320px;
  /*background-color: white;*/
  color: black;
  padding: 0 40px 0 0;
  border-radius: 8px;
  display: block;
}

.indent {
  text-indent: 20px; 
}

.menu-section:last-of-type {
  margin-bottom: 0px;
}

.menu-title {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: bold;
}

.section-title {
  position: relative; /* To allow absolute positioning of pseudo-element */
  font-family: 'HelveticaLTWXX-Bold';
  font-weight: normal;
  font-size: 20px;
  padding: 20px 0 15px 30px;
  background-color: white;
  cursor: pointer;
}

/*#discovery-title,
#design-title,
#prototype-title {
  font-size: 18px;
}*/

#process-subtitle {
  font-size: 16px;
}

.section-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: -30px; /* Offset the left padding */
  height: 1px;
  background-color: #e5e5e5;
}

.section-subtitle {
  position: relative; /* To allow absolute positioning of pseudo-element */
  font-family: 'HelveticaLTWXX-Bold';
  font-weight: normal;
  font-size: 18px;
  padding: 20px 0 15px 30px;
  background-color: white;
  cursor: pointer;
}

.section-subtitle::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: -30px; /* Offset the left padding */
  height: 1px;
  background-color: #e5e5e5;
}

.menu-list {
  list-style-type: disc; /* Use 'disc' for bullet points */
  line-height: 26px;
}

.menu-list li {
  position: relative;
  font-family: 'HelveticaLTWXX-Roman';
  font-weight: normal;
  font-size: 16px;
  padding: 10px 0 10px 50px;
  list-style-position: inside;
  cursor: pointer;
}

.menu-list li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: -30px; /* Offset the left padding */
  height: 1px;
  background-color: #E5E5E5;
}


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

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

.section-title.active,
.section-subtitle.active,
.menu-list li.active {
  background-color: rgb(244, 244, 244);
  /*color: #1313f9;*/
}

.section-title:hover,
.section-subtitle:hover,
.menu-list li:hover {
  background-color: rgb(244, 244, 244);
  /*color: #1313f9;*/
  transition: background-color 0.25s ease-in-out;
}

/*.section-title.active::before {
  background-color: #d7d7d7;
}*/


/***************************************************************** HOVER STATES ******************************************************************/
/*************************************************************************************************************************************************/


/* Hover effect for additional text */
.additional-content p:hover,
.additional-section-title:hover,
.additional-menu-list li:hover
/*.section-title:hover,
.menu-list li:hover*/ {
color: #0000FF;
cursor: pointer;
}



/***************************************************************** LIGHTBOX **********************************************************************/
/*************************************************************************************************************************************************/

/* Lightbox Styles */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  overflow: auto;
  animation: fadeIn 0.3s ease-in-out;
}

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

.lightbox-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.lightbox-image-container {
  position: relative;
  display: inline-block;
}

#lightbox-image {
  max-width: 100%;
  max-height: 80vh;
}

.zoom-icon {
  position: absolute;
  font-size: 24px;
  cursor: pointer;
  color: white;
}

#zoom-in {
  top: 10px;
  right: 10px;
}

#zoom-out {
  top: 40px;
  right: 10px;
}

.lightbox-nav {
  font-size: 30px;
  color: white;
  cursor: pointer;
  user-select: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#lightbox-prev {
  left: 30px;
}

#lightbox-next {
  right: 30px;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Trigger Image Styles */
.trigger-image-container {
  cursor: pointer;
}

.large-content-container {
  position: relative;
}


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

/* Main Content Container */

main {
    overflow-x: hidden;
 }

/* Wrapper */

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



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


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

.hero {
  background-color: var(--tertiary-color);
  background-size: cover;
  background-position: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: calc(100vh - 56px);
  margin-bottom: var(--mb-32px);
  z-index: 1;
}

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

.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-40px);
  font-family: 'HelveticaNowDisplay-XBd';
}



/*********************************************************** CASE STUDY HERO SECTION ******************************************************************/


/*#hero {
background-color: black;
}

/* Main Heading */

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

.client-name {
  font-family: 'HelveticaLTWXX-Bold', Arial, sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: var(--mb-16px);
  letter-spacing: 0px;
}

.capitals {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: var(--mb-16px);
  letter-spacing: 0px;
  font-weight: bold;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#intro-statement {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: var(--mb-32px);
}

#project-dates {
  font-size: var(--body-copy-desktop);
}

/******************** HERO IMAGES ********************/

.hero-images-container {
  width: 100%;
  height: auto;
}

.case-study-hero-images {
    height: 400px; /* Set the desired height of the hero section */
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: var(--mb-40px);
    background-color: #D9D9D9;
    position: relative;
}

.case-study-headline-image {
  text-align: right;
  /*overflow-x: hidden;*/
}


/**** NEWSQUEST ****/

#newsquest-hero-strip {
  background-image: url('/img/newsquest/newsquest-hero-strip-image.jpg');
  background-position:  -250px 200%; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

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

img.newsquest-macbook-smartphone-left {
  display: block;
  width:700px;
  margin-top: 50px;
  margin-left:-400px;
  transition: all 0.5s ease-in-out;
}

img.newsquest-macbook-smartphone-right {
  display: none;
  transition: all 0.5s ease-in-out;
}

/**** EVOLUTION AQUA ****/

#evolution-aqua-hero-strip {
  background-image: url('/img/evolution-aqua/evolution-aqua-hero-strip.jpg');
  background-position: 0px 200%; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

#evolution-aqua-hero-devices {
  float: left;
}


img.evolution-aqua-smartphones {
  position: absolute;
  width: 450px;
  margin-top: -40px;
  margin-left: -80px;
  transition: all 0.5s ease-in-out;
}


/**** ZENAUTO ****/

#zenauto-hero-strip {
  background-image: url('/img//zenauto/zenauto-hero-strip-image.jpg');
  background-position:  -200px 200%; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

#zenauto-hero-devices {
  float: left;
}

img.zenauto-ipad-samsung {
  display: block;
  width:600px;
  margin-top: 20px;
  margin-left:100px;
  transition: all 0.5s ease-in-out;
}

/*.case-study-hero-image {
  background-color: #D9D9D9;
  position: relative;
  z-index: 1;
}

.zenauto-hero-image {
  background-color: #D9D9D9;
  background-position: center -500px;
  position: relative;
  z-index: 1;
}*/


/**** THE GREEN ROOM ****/

#green-room-hero-strip {
  background-image: url('/img/the-green-room/the-green-room-hero-strip-image.jpg');
  background-position:  -200px 200%; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

#green-room-hero-devices {
  float: left;
}

img.green-room-ipad-smartphone-left {
  display: none;
  width:700px;
  margin-top: -50px;
  margin-left:-350px;
  transition: all 0.5s ease-in-out;
}

img.green-room-ipad-smartphone-right {
  position: absolute;
  display: block;
  width:850px;
  margin-top: -80px;
  margin-left:-300px;
  transition: all 0.5s ease-in-out;
}


/**** TESCO ****/

#tesco-hero-strip {
  background-image: url('/img/tesco/tesco-hero-strip-image.jpg');
  background-position:  0px 0; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

#tesco-hero-device {
  float: right;
}

img.tesco-laptop {
  display: block;
  width:850px;
  margin-top: -30px;
  margin-right:-550px;
  transition: all 0.5s ease-in-out;
}

/**** THE ROYAL MINT ****/

#the-royal-mint-hero-strip {
  background-image: url('/img/the-royal-mint/the-royal-mint-hero-strip-image.jpg');
  background-position:  -60px 0; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

#the-royal-mint-hero-device {
  float: right;
}

img.the-royal-mint-smartphone-macbook {
  display: block;
  width:800px;
  margin-top: -20px;
  margin-right:-550px;
  transition: all 0.5s ease-in-out;
  margin-bottom: var(--mb-40px);
}

/**** NOWPLAN ****/

#nowplan-hero-strip {
  background-image: url('/img/nowplan/nowplan-hero-strip-image.jpg');
  background-position:  -60px 0; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-120px);
}

#nowplan-hero-device {
  float: left;
}

img.nowplan-smartphones {
  position: absolute;
  width:630px;
  margin-top: -20px;
  margin-left: -100px;
  transition: all 0.5s ease-in-out;
}


/**** ABOUT ME ****/

#about-me-hero-strip {
  background-image: url('/img/about-me/about-me-hero-strip-image.jpg');
  background-position:  center;
  margin-bottom: var(--mb-80px);
}


/*.case-study-hero-image {
  background-color: #D9D9D9;
  position: relative;
  z-index: 1;
}

.zenauto-hero-image {
  background-color: #D9D9D9;
  background-position: center -500px;
  position: relative;
  z-index: 1;
}*/





/**************************************************************** RESPONSIBILITIES *************************************************************/

/*.responsibilities-list {
  background-color: white;
  padding: 30px; 
  border-left: 4px solid #0000FF; 
}

h3.setup-title.responsibilities {
  margin-bottom: var(--mb-32px);
}*/



/**************************************************************** PROJECT TEAM *************************************************************/

#project-team {
  margin-bottom: var(--mb-64px);
}


/**************************************************************** TOOLS LOGOS *************************************************************/

#digital-toolset {
  margin-bottom: var(--mb-72px);
}

#digital-toolset-title {
  margin-bottom: var(--mb-40px);
}

.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: 45px;
  height: 45px;
}



/**************************************************************** ENTIRE PROCESS SECTION *************************************************************/

/*#entire-process-container {
background-color: var(--secondary-color);
}*/


/**************************************************************** PROCESS MENU (ON PAGE) *************************************************************/

.additional-text {
  background-color: white;
  padding: 30px 0 5px 30px; /* Add padding to the white box */
  border-left: 4px solid #0000FF; /* Add the left vertical line */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--mb-64px);
}


/**************************************************************** ENLARGE ICON *************************************************************/

.enlarge-image {
  display: none;
}

.enlarge-icon {
  width: 49px;
  max-width: 49px;
}


/******************************************************************** FRAMEWORK STATUS ICONS ******************************************************************/


.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 */
}

.framework-step-icons {
  width: 40px;
  display: inline-block; /* Make the <span> an inline element */
  vertical-align: middle; /* Align the <span> vertically in the middle of the <h5> */
  margin-top: -15px;
}

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

#small-icon-problem {
  width: 30px;
  margin-top: -8px;
}

#small-icon-solution {
  width: 25px;
  margin-top: -7px;
}

#medium-icon {
  width: 30px;
  margin-top: -12px;
}

#large-icon {
  width: 32px;
  margin-top: -12px;
}

#largest-icon {
  width: 35px;
  margin-top: -15px;
}


/**************************************************************** CONSTRAINTS & SOLUTIONS *************************************************************/

#constraint {
  color: var(--problem-color);
}

#solution {
  color: var(--success-color);
}

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

.constraints-solutions-icons {
    width: 25px;
    display: inline-block; /* Make the <span> an inline element */
    vertical-align: middle; /* Align the <span> vertically in the middle of the <h5> */
    margin-top: -6px;
}


/**************************************************************** OUTCOME *************************************************************/

#next-steps {
  margin-bottom: var(--mb-64px);
}


/**************************************************************** ABOUT ME PAGE *************************************************************/

.career-highlights {
  margin-bottom: var(--mb-32px);
}

#professional-approach p {
  margin-bottom: 0px;
}

#professional-approach p {
  margin-bottom: var(--mb-48px);
}

/**** KEY MILESTONES ACHIEVED ****/

.milestones-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 680px;
}

.milestone {
  margin-bottom: var(--mb-24px);
  padding: 20px;
  border: 2px solid var(--darker-accent-color);
  text-align: center;
  padding: 2rem 1rem;
}

.milestone-value,
.milestone-title  {
color: var(--ground-color);
}

.milestone-result,
.milestone-copy  {
color: var(--lightest-accent-color);
}

.client-logo {
width: 85%;
margin: 0 auto;
}


/**************************************************************** PREVIOUS NEXT LINKS *************************************************************/

#previous-next-links {
margin-bottom: var(--mb-120px)
}

#previous-next-navigation {
  display: block;
  margin-bottom: var(--mb-32px);
}

.previous-next-links {
  display: flex;
}

#previous-link:hover,
#next-link:hover {
color: var(--primary-color);
}

p.previous-text,
p.next-text {
  margin-bottom: 0px;
}

.previous-arrow ion-icon,
.next-arrow ion-icon {
  font-size: 24px;
  margin-top: 2px;
}


/* Previous Link */

.previous-arrow {
  margin-right: 10px;
}

/* Next Link */

#next-link {
  position: relative;
  top: 30px;
  right: 0;
  margin-left: auto;
  }

  #next-link-mobile {
    margin-left: 33px;
  }

  p.next-text {
    text-align: left;
  }
  

.next-arrow {
  margin-left: 10px;
}

.underline {
  text-decoration: underline;
}


/**************************************************************** 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;
}

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

.communication-icons {
  display: inline-flex;
  position: absolute;
  bottom: 85px;
  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: 85px;
    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: 4000;
}

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

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


/**************************************************************** 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: 50px;
    height:50px;
  }*/
}

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

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

  img.evolution-aqua-smartphones {
    width: 500px;
    margin-top: -50px;
    margin-left:-80px;
  }

  img.nowplan-smartphones {
    width:670px;
    margin-top: -30px;
    margin-left: -100px;
  }
}

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

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


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

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

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

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

#previous-next-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between; /* This pushes the two links to opposite ends */
  margin-bottom: var(--mb-32px);
}


#outcome  #solution-highlight-box {
  padding: 30px 40px 30px 20px; 
}

ul.case-study-list.bullets.solutions-list,
ul.case-study-list.bullets.next-steps-list
{
  margin-left:0px; 
}


/*ul.case-study-list.bullets.solutions-list
{
  margin-left:41px; 
}*/

/*ul.case-study-list.bullets.next-steps-list
{
  margin-left:20px; 
}*/

#problem-highlight-box,
#approach-highlight-box {
  margin-bottom: var(--mb-96px);
}

#next-link {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
  }

p.next-text {
  text-align: right;
}
  

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

  #footer-h1 {
    margin-bottom: var(--mb-48px);
  }
  

}

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

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


  .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: 500px;
    margin-top: -50px;
    margin-left:0px;
  }

  img.nowplan-smartphones {
    width:630px;
    margin-top: -20px;
    margin-left:-80px;

  }

  #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.no-left-margin {
    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,
  ul.case-study-list.bullets.next-steps-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);
  }

  img.green-room-ipad-smartphone-right {
    width:850px;
    margin-top: -80px;
    margin-left:-200px;
  }

  h2.key-milestones-achieved {
    margin-bottom: var(--mb-48px);
  }


  .milestone {
    padding: 3rem 1rem;
  }
  

}



/************************************************************************* 454px *******************************************************************/

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


#the-royal-mint-hero-strip {
  background-position:  -40px 0; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-56px);
}

img.the-royal-mint-smartphone-macbook {
  display: block;
  width:850px;
  margin-top: -50px;
  margin-right:-550px;
  transition: all 0.5s ease-in-out;
  margin-bottom: var(--mb-24px);
}

img.nowplan-smartphones {
  width:670px;
  margin-top: -30px;
  margin-left:-40px;
}
}


/************************************************************************* 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;
  }

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

  #work-nav::before {
    top: 51%;
    left: 2.5rem;
  }

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

  .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 */
  }


  img.evolution-aqua-smartphones {
    width: 550px;
    margin-top: -60px;
    margin-left:40px;
  }

  img.nowplan-smartphones {
    width:670px;
    margin-top: -30px;
    margin-left:-0px;
  }

  img.green-room-ipad-smartphone-right {
    width:1050px;
    margin-top: -175px;
    margin-left:-150px;
    z-index: 3000;
  }

  img.tesco-laptop {
    display: block;
    width:950px;
    margin-top: -90px;
    margin-right:-650px;
    transition: all 0.5s ease-in-out;
    margin-bottom: var(--mb-40px);
  }
  

  .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;
  }


  
}




/************************************************************************* 546px *******************************************************************/

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

  img.nowplan-smartphones {
    width:690px;
    margin-top: -30px;
    margin-left:60px;
  }

}

/************************************************************************* 550px *******************************************************************/


@media screen and (min-width: 550px) {
ul.case-study-list.bullets.actions-list li {
margin-bottom: 10px;
}
}



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

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

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

  img.green-room-ipad-smartphone-right {
    width:1000px;
    margin-top: -150px;
  }
  
}

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

@media (min-width: 600px) {

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

.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-position:  -250px 200%; /* Adjust the position as needed for mobile */
  margin-bottom: var(--mb-104px);
}

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

img.newsquest-macbook-smartphone-left {
  display: none;
}

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

img.evolution-aqua-smartphones {
  position: absolute;
  width: 550px;
  margin-top:-70px;
  margin-left: 120px;
}

img.nowplan-smartphones {
  width:720px;
  margin-top: -30px;
  margin-left:100px;
}


img.the-royal-mint-smartphone-macbook {
  width:870px;
  margin-top: -60px;
  margin-right:-500px;
  margin-bottom: var(--mb-24px);
}

}




/***************************************************************** 634px **********************************************************************/

@media (min-width: 634px) {

img.tesco-laptop {
  width:1000px;
  margin-top: -80px;
  margin-right:-650px;
}
}


/***************************************************************** 650px **********************************************************************/

@media (min-width: 650px) {

img.green-room-ipad-smartphone-right {
  width:1000px;
  margin-top: -130px;
  margin-left:-120px;
}
}



/***************************************************************** 680px **********************************************************************/

@media (min-width: 680px) {

img.evolution-aqua-smartphones {
  position: absolute;
  width: 600px;
  margin-top:-120px;
  margin-left: 200px;
}

img.nowplan-smartphones {
  width:720px;
  margin-top: -30px;
  margin-left:100px;
}

}


/***************************************************************** 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;
  }

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

  img.zenauto-ipad-samsung {
    width:700px;
    margin-top: -30px;
    margin-right:-1100px;
    margin-left: auto;
  }

  img.nowplan-smartphones {
    width:800px;
    margin-top: -90px;
    margin-left:200px;
  }

  .milestone {
    
  }
}



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

@media (min-width: 768px) {


  #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;
  }

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

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

  #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-24px);
  }

    /* Paragraphs */

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

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

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

  /* Buttons */

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

 /* Horizontal Rules */

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


      /* 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-32px);
    }

    /* 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-position:  -250px 200%; /* Adjust the position as needed for mobile */
      margin-bottom: var(--mb-104px);
    }
    

    img.newsquest-macbook-smartphone-right {
      width:1100px;
      margin-top: -140px;
      margin-right:-700px;
    }


    img.green-room-ipad-smartphone-right {
      width:1050px;
      margin-top: -150px;
      margin-left:-50px;
    }


    img.tesco-laptop {
      width:1050px;
      margin-top: -80px;
      margin-right:-650px;
    }


    img.the-royal-mint-smartphone-macbook {
      width:900px;
      margin-top: -80px;
      margin-right:-500px;
      margin-bottom: var(--mb-24px);
    }

  
    /* 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  {
      margin-bottom: var(--mb-120px);
    }
  

    #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; 
    }

    #outcome #solution-highlight-box {
      padding: 50px 50px 20px 50px; 
    }
    
    #constraints,
    #solutions  {
      padding: 30px 50px 40px 50px; 
    }

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

    #small-icon {
      width: 40px;
      margin-top: -12px;
    }

    #small-icon-problem {
      width: 32px;
      margin-top: -9px;
    }

    #small-icon-solution {
      width: 27px;
      margin-top: -7px;
    }
    
    #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);
  }

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

      /************************** ABOUT ME PAGE **************************/


  .career-highlights {
    margin-bottom: var(--mb-48px);
  }

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

  .milestone {
    padding: 5rem 1rem;
  }

  .milestone-copy {
    width: 400px;
    margin: 0 auto;
  }

  .main-content-container.innovate-together {
    margin-bottom: var(--mb-112px);
  }
  }








/************************************************************************* 800px *******************************************************************/

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

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

  img.evolution-aqua-smartphones {
    width: 700px;
    margin-top:-170px;
    margin-left: 250px;
  }

  img.nowplan-smartphones {
    width:870px;
    margin-top: -120px;
    margin-left:200px;
  }
}


/************************************************************************* 870px *******************************************************************/

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

  img.green-room-ipad-smartphone-right {
    width:1050px;
    margin-top: -150px;
    margin-left:0px;
  }

  img.nowplan-smartphones {
    width:870px;
    margin-top: -120px;
    margin-left:250px;
  }

  .client-logo {
    width: 75%;
    margin: 0 auto;
    }

}


/************************************************************************* 908px *******************************************************************/

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

  img.green-room-ipad-smartphone-right {
    width:1050px;
    margin-top: -150px;
    margin-left:150px;
  }

  img.the-royal-mint-smartphone-macbook {
    width:1000px;
    margin-top: -90px;
    margin-right:-500px;
    margin-bottom: var(--mb-24px);
  }

  img.nowplan-smartphones {
    width:870px;
    margin-top: -120px;
    margin-left:300px;
  }
}

/************************************************************************* 950px *******************************************************************/

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

  img.newsquest-macbook-smartphone-right {
    width:1100px;
    margin-top: -120px;
    margin-right:-550px;
  }

  img.evolution-aqua-smartphones {
    width: 750px;
    margin-top:-160px;
    margin-left: 290px;
  }

  img.zenauto-ipad-samsung {
    width:950px;
    margin-top: -160px;
    margin-right:-1400px;
    margin-left: auto;
  }

  img.tesco-laptop {
    width:1050px;
    margin-top: -80px;
    margin-right:-500px;
  }

  img.nowplan-smartphones {
    width:950px;
    margin-top: -130px;
    margin-left:300px;
  }

}

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

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

  #mySidenav {
    top: 25px;
  }
  
  .menu {
    top: 50px ;
  }

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

  .main-content-container.reduce-main-content-container-spacing {
    margin-bottom: var(--mb-72px);
  }
  
  .main-content-container.title-before-image {
    margin-bottom: var(--mb-40px);
  }

  .medium-content-container.reduce-medium-content-container-spacing {
    margin-bottom: var(--mb-72px);
  }

  .medium-content-container.title-before-image {
    margin-bottom: var(--mb-40px);
  }

  .large-content-container.reduce-large-content-container-spacing  {
    margin-bottom: var(--mb-72px);
  }

  .large-content-container.image-before-title {
    margin-bottom: var(--mb-40px);
  }

  .larger-content-container.reduce-larger-content-container-spacing  {
    margin-bottom: var(--mb-72px);
  }

  .larger-content-container.image-before-title {
    margin-bottom: var(--mb-40px);
  }

  .largest-content-container.reduce-largest-content-container-spacing  {
    margin-bottom: var(--mb-72px);
  }

  .largest-content-container.image-before-title {
    margin-bottom: var(--mb-40px);
  }

/******** Highlight Boxes ********/

  #problem-highlight-box,
  #approach-highlight-box,
  #actions-highlight-box,
  #solution-highlight-box,
  #learning-highlight-box  {
    margin-bottom: var(--mb-120px);
  }


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

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

.main-content-container.digital-toolset-mb {
    margin-bottom: var(--mb-176px);
  }



.largest-content-container#logo-grid {
      margin-bottom: var(--mb-48px);
    }
  

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

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


/******** Two Column Images ********/

.two-column-image {
  flex-basis: calc(50% - 10px); /* 50% width with some spacing */
}

.two-column-image.grid-version {
  margin-bottom: 20px; /* Add some spacing between images */
}

/******** Two Images Together ********/

.two-images-together {
  margin-bottom: 0px;
}

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

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


  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;
    }


  /************************** ABOUT ME PAGE **************************/


  .career-highlights {
    margin-bottom: var(--mb-56px);
  }

  .career-highlights-content-spacing {
    margin-bottom: var(--mb-56px) !important;
  }

  .full-width-container.black-bg {
    padding: 9rem 0;
  }

  h2.key-milestones-achieved {
    margin-bottom: var(--mb-112px);
  }

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

    #newsquest-hero-strip {
      margin-bottom: var(--mb-104px);
    }


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

    img.evolution-aqua-smartphones {
      width: 800px;
      margin-top:-200px;
      margin-left: 320px;
    }

    img.green-room-ipad-smartphone-right {
      width:1300px;
      margin-top: -250px;
      margin-left:200px;
    }

    img.tesco-laptop {
      width:1100px;
      margin-top: -150px;
      margin-right:-500px;
    }

    img.the-royal-mint-smartphone-macbook {
      width:1050px;
      margin-top: -150px;
      margin-right:-500px;
      margin-bottom: var(--mb-24px);
    }

    img.nowplan-smartphones {
      width:1000px;
      margin-top: -200px;
      margin-left:320px;
    }

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


    /******** Communication Icons ********/

    .enlarge-image {
      display: block;
    }
    
    .communication-icons {
      bottom: 15px;
    }
    

.back-to-top {
  bottom: 15px;
  width: 50px;
  height: 50px;
}


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


/***************************************************************** 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);
    }

    #about-me-hero-strip {
      background-image: url('/img/about-me/about-me-hero-strip-image.png');
      margin-bottom: var(--mb-104px);
    }
    
  

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


    img.evolution-aqua-smartphones {
      width: 1000px;
      margin-top:-150px;
      margin-left: 320px;
    }

    img.zenauto-ipad-samsung {
      width:1250px;
      margin-top: -90px;
      margin-right:-1700px;
      margin-left: auto;
    }

    img.nowplan-smartphones {
      width:1300px;
      margin-top: -150px;
      margin-left:200px;
    }

    #green-room-hero-strip {
      background-position:  -600px 200%; /* Adjust the position as needed for mobile */
    }

    img.green-room-ipad-smartphone-right {
      width:1700px;
      margin-top: -250px;
      margin-left:0px;
    }

    img.tesco-laptop {
      width:1580px;
      margin-top: -100px;
      margin-right:-900px;
    }

    #the-royal-mint-hero-strip {
      background-position:  -70px 0; /* Adjust the position as needed for mobile */
    }

    img.the-royal-mint-smartphone-macbook {
      width:1500px;
      margin-top: -150px;
      margin-right:-900px;
      margin-bottom: var(--mb-24px);
    }

  }

/***************************************************************** 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';
  }

  img.nowplan-smartphones {
    width:1300px;
    margin-top: -150px;
    margin-left:300px;
  }

}


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

@media (min-width: 1200px) {

  .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;
  }

.logo {
  position: absolute;
  width: 77px;
  height: auto;
  top: 30px;
  left: 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 */
  padding-left: 0; /* Remove default left padding */
}

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

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

ul.case-study-list.bullets.next-steps-list{
  font-size: var(--body-copy-desktop);
  line-height: var(--body-copy-line-height-desktop);
  list-style-type: none; /* Remove default bullet points */
  margin-bottom: 30px;
  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: 30px; /* 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;

}

.case-study-list > li ul > li:first-child {
  margin-top: 16px; /* Reset the margin for the first child of each nested list */
}

.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 {
  height: calc(100vh - 78px);
}

.hero-text  {
  margin-top: -20rem;
}

.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: 3rem;
    width: 700px;
}

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

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

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

img.zenauto-ipad-samsung {
  width:1250px;
  margin-top: -90px;
  margin-right:-1800px;
  margin-left: auto;
}

img.tesco-laptop {
  width:1600px;
  margin-top: -100px;
  margin-right:-900px;
}

img.the-royal-mint-smartphone-macbook {
  width:1500px;
  margin-top: -100px;
  margin-right:-850px;
  margin-bottom: var(--mb-24px);
}


 /* Paragraphs */

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


    /*.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;
}

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

#footer-h1 {
  margin-bottom: var(--mb-64px);
}

.communication-icons {
  bottom: 38px;
  left: 42px;
}

/* Style the back to top button */
.back-to-top {
  bottom: 38px;
  right: 42px;
}

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


/************************************************************************* 1300px *******************************************************************/

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


img.evolution-aqua-smartphones {
  width: 1100px;
  margin-top:-230px;
  margin-left: 430px;
}

img.zenauto-ipad-samsung {
  width:1250px;
  margin-top: -120px;
  margin-right:-2000px;
  margin-left: auto;
}

img.nowplan-smartphones {
  width:1400px;
  margin-top: -150px;
  margin-left:400px;
}

#green-room-hero-strip {
  background-position:  -600px 200%; /* Adjust the position as needed for mobile */
}

img.green-room-ipad-smartphone-right {
  width:1900px;
  margin-top: -350px;
  margin-left:0px;
}

}


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

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

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

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

  .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-40px);
    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-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;
  }


img.nowplan-smartphones {
  width:1400px;
  margin-top: -150px;
  margin-left:450px;
}


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

}

/************************************************************************* 1500px *******************************************************************/

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


  img.evolution-aqua-smartphones {
    width: 1100px;
    margin-top:-230px;
    margin-left: 550px;
  }

  img.green-room-ipad-smartphone-right {
    width:1900px;
    margin-top: -350px;
    margin-left:100px;
  }

  img.nowplan-smartphones {
    width:1400px;
    margin-top: -160px;
    margin-left:550px;
  }
}


/************************************************************************* 1600px *******************************************************************/

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


img.the-royal-mint-smartphone-macbook {
  width:1550px;
  margin-top: -150px;
  margin-right:-700px;
  margin-bottom: var(--mb-24px);
}

img.nowplan-smartphones {
  width:1400px;
  margin-top: -160px;
  margin-left:650px;
}

}


/************************************************************************* 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 */
  }

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

  img.evolution-aqua-smartphones {
    width: 1100px;
    margin-top:-230px;
    margin-left: 700px;
  }

}


/************************************************************************* 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: 1100px;
  margin-top:-230px;
  margin-left: 700px;
}

img.nowplan-smartphones {
  width:1500px;
  margin-top: -160px;
  margin-left:750px;
}

.full-width-container.black-bg {
  padding: 10rem 0 10rem 0;
}

h2.key-milestones-achieved {
margin-bottom: var(--mb-120px);
}

/* For tablets and larger devices */
  .milestones-container {
  flex-direction: row;
  justify-content: space-between;
  max-width: 2400px;
}

.milestone {
  width: 30%; /* Each block takes up roughly a third of the container's width */
  margin-bottom: 0;
}

}



/************************************************************************* 1800px *******************************************************************/

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

  img.evolution-aqua-smartphones {
    width: 1200px;
    margin-top:-230px;
    margin-left: 800px;
  }

  img.zenauto-ipad-samsung {
    width:1250px;
    margin-top: -120px;
    margin-right:-2300px;
    margin-left: auto;
  }

  img.green-room-ipad-smartphone-right {
    width:1900px;
    margin-top: -350px;
    margin-left:200px;
  }

  img.nowplan-smartphones {
    width:1600px;
    margin-top: -160px;
    margin-left:750px;
  }

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

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

  /* Case Study Hero Images */


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

  img.evolution-aqua-smartphones {
    width: 1200px;
    margin-top:-230px;
    margin-left: 950px;
  }

  img.green-room-ipad-smartphone-right {
    width:1900px;
    margin-top: -350px;
    margin-left:300px;
  }


}


/************************************************************************* 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);
}

img.evolution-aqua-smartphones {
  width: 1200px;
  margin-top:-230px;
  margin-left: 1050px;
}

img.zenauto-ipad-samsung {
  width:1250px;
  margin-top: -120px;
  margin-right:-2300px;
  margin-left: auto;
}

#green-room-hero-strip {
  background-position:  -200px 200%; /* Adjust the position as needed for mobile */
}

img.green-room-ipad-smartphone-right {
  width:1900px;
  margin-top: -350px;
  margin-left:400px;
}

img.tesco-laptop {
  width:1700px;
  margin-top: -150px;
  margin-right:-800px;
}

img.nowplan-smartphones {
  width:1600px;
  margin-top: -160px;
  margin-left:900px;
}
}


/************************************************************************* 2200px *******************************************************************/

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

  img.green-room-ipad-smartphone-right {
    width:1900px;
    margin-top: -350px;
    margin-left:600px;
  }

  img.nowplan-smartphones {
    width:1600px;
    margin-top: -160px;
    margin-left:1100px;
  }

}




/************************************************************************* 2400px *******************************************************************/

@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-right {
  width:1700px;
  margin-top: -120px;
  margin-right:-300px;
}

img.evolution-aqua-smartphones {
  width: 1200px;
  margin-top:-300px;
  margin-left: 1300px;
}

img.zenauto-ipad-samsung {
  width:1250px;
  margin-top: -120px;
  margin-right:-2500px;
  margin-left: auto;
}

#green-room-hero-strip {
  background-position:  0px 200%; /* Adjust the position as needed for mobile */
}

img.green-room-ipad-smartphone-right {
  width:2000px;
  margin-top: -350px;
  margin-left:600px;
}

img.tesco-laptop {
  width:1700px;
  margin-top: -150px;
  margin-right:-600px;
}

img.the-royal-mint-smartphone-macbook {
  width:1650px;
  margin-top: -150px;
  margin-right:-800px;
  margin-bottom: var(--mb-24px);
}

img.nowplan-smartphones {
  width:1600px;
  margin-top: -160px;
  margin-left:1300px;
}

}





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

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

  
  .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-right {
    width:1700px;
    margin-top: -120px;
    margin-right:-300px;
  }

  img.zenauto-ipad-samsung {
    width:1300px;
    margin-top: -120px;
    margin-right:-2700px;
    margin-left: auto;
  }


}