@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --vh: 1vh;

  --color-white: #FCFCFC;
  --color-black: #292828;
  --color-grey: #8D8C8C;
  --color-grey-light: #BBBBBB;
  --color-yellow: #F3EF32;

  --size-xs: 8px;
  --size-s: 16px;
  --size-m: 24px;
  --size-l: 40px;
  --size-xl: 88px;
  --size-xxl: 192px;

  --grid-min-width: 327px;
  --grid-max-width: 1232px;
  --grid-50: 596px; 
  --img-max: 1552px;
  --img-min: 327px;
}
  

html {
    margin: 0 auto;
    padding: 0;
    overflow-x: visible;
    scroll-behavior: smooth;
    font-size: var(--size-xs);
    background-color: var(--color-white);
}


body {
    overflow-x: hidden;
    width: 100%;
}

header,
.container-title {
    max-width: max-content;
    margin: auto;
    width: 100%;
    max-width: var(--grid-max-width);
    padding: var(--size-xxl) 0 var(--size-xxl) 0;
 
}
@media (max-width: 1232px) {
    header,
    .container-title {
        padding: var(--size-xxl) var(--size-m) var(--size-xxl) var(--size-m);
    }
}
@media (max-width: 500px) {
    header,
    .container-title {
        width: var(--grid-min-width);
        max-width: var(--grid-min-width);
    
        padding: var(--size-xl) 0 var(--size-xl) 0;
    }
}

/*50% width EG container: 608px*/
.container-50 {
    width: var(--grid-50);
    max-width: var(--grid-50);
    padding: var(--size-l) 0 0 0;
}
@media (max-width: 500px) {
    .container-50 {
        width: var(--grid-min-width);
        max-width: var(--grid-min-width);
    }
}

.container-50-footer {
    width: var(--grid-50);
    max-width: var(--grid-50);
    padding: 424px 0 0 0;
}
@media (max-width: 500px) {
    .container-50-footer {
        width: var(--grid-min-width);
        max-width: var(--grid-min-width);
    }
}

/*label with small padding bottom. for mobile and case study links*/
.container-label-xs {
    padding: 0 0 var(--size-xs) 0;
}

/*label with medium padding bottom: for sections*/
.container-label-m {
    padding: 0 0 var(--size-m) 0;
}

article {
    width: 75%;
    margin: auto;
    max-width: var(--grid-max-width);   
}
@media (max-width: 500px) { 
    article {
        width: 100%;
        max-width: var(--grid-min-width);   
    }
}





/*quote list*/
.list-item {
    cursor: pointer;
    padding: 0 var(--size-m) 0 0;
    color: var(--color-grey-light);
    position: relative;
    text-align: center;
    flex: none;
}
@media (max-width: 500px) {
    .list-item {
        padding: 0 var(--size-m) var(--size-s) 0;
    }
}

.list-item:hover {
    color: var(--color-black);
}
.list-item.selected {
    color: var(--color-black);
}

/*svg dot*/
.list-item.selected::after {
  content: '';
  position: absolute;
  left: 39%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 24px;
  height: 27px;
  background-size: cover;
  z-index: -1;
}
@media (max-width: 500px) {
    .list-item.selected::after {
        bottom: var(--size-xs);
    }
}

.list-item:nth-child(1).selected::after {
    background-image: url('../IMAGES/SVG/dot-1.svg');
}
.list-item:nth-child(2).selected::after {
    background-image: url('../IMAGES/SVG/dot-2.svg');
}
.list-item:nth-child(3).selected::after {
    background-image: url('../IMAGES/SVG/dot-3.svg');
}
.list-item:nth-child(4).selected::after {
    background-image: url('../IMAGES/SVG/dot-4.svg');
}
.list-item:nth-child(5).selected::after {
    background-image: url('../IMAGES/SVG/dot-5.svg');
}
.list-item:nth-child(6).selected::after {
    background-image: url('../IMAGES/SVG/dot-6.svg');
}

#quote-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 var(--size-l) 0;
}
@media (max-width: 500px) {
    #quote-list {
        padding: 0;
    }
}

.container-quote {
    display: none;
    height: 350px;
    padding: var(--size-l) 0 var(--size-xl) 0;
}
@media (max-width: 500px) {
    .container-quote {
        padding: 0 0 var(--size-xl) 0;
    }
}

.container-quote.active {
    display: block;
}






.container-all-case-studies,
.container-additional-skills,
.container-label {
    display: flex;
    flex-direction: row;
    max-width: max-content;
    margin: auto;
    max-width: var(--grid-max-width);
    padding: 0 0 var(--size-xxl) 0;
}
.container-additional-skills {
    padding: var(--size-xxl) 0 0 0;
}
.container-label {
    padding: 0 0 var(--size-m) 0;
}

@media (max-width: 500px) {
    .container-all-case-studies,
    .container-additional-skills,
    .container-label {
        display: block;
        max-width: var(--grid-min-width);
        padding: 0 0 var(--size-m) 0;
    }
    .container-additional-skills {
        padding: var(--size-xl) 0 0 0;
    }
    .container-label {
        padding: 0;
    }
}

/*case studies*/
.case-study-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--size-l);
    row-gap: var(--size-xxl);  
}

.container-case-study {
    max-width: var(--grid-50);
    display: flex;
    flex-direction: column; 
    gap: var(--size-xxl); 
}

.case-study {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    gap: var(--size-m);
}

@media (max-width: 500px) {
    .case-study-list {
        display: block;
        flex-direction: column;
        gap: var(--size-xl);
        padding: var(--size-s) 0 0 0;
    }
    
    .container-case-study {
        display: block;
        width: var(--grid-min-width);
    }

    .case-study {
        display: block;
    }
}






/*additional skills*/
.skills-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-xxl);
}

.container-skills {
    display: flex;
    flex-direction: column; 
    gap: var(--size-xxl); 
    width: 954px;
}

.skill {
    display: flex;
    align-items: flex-start;
    gap: var(--size-m);
}

@media (max-width: 500px) {
    .skills-list {
        display: block;
        flex-direction: column;
        gap: var(--size-xl);
        padding: var(--size-m) 0 0 0;
    }
    
    .container-skills {
        display: block;
        width: var(--grid-min-width);
    }

    .skill {
        display: block;
    }
}






.case-text {
    /*nothing*/
}
@media (max-width: 500px) {
.case-text {
    padding: var(--size-s) 0 var(--size-xl) 0;
    }
}

.container-img-label {
    margin: auto;
    width: 100%;
    max-width: var(--img-max);
    padding: var(--size-s) 0 0 0;
}
@media (max-width: 500px) {
    .container-img-label {
        max-width: var(--img-min);
        padding: var(--size-s) 0 0 0;
    }
}

footer {
    width: 100%;
    height: 1136px; 
    overflow: hidden; 

    margin-top: -400px;
    position: relative;
    z-index: 0;

    background-image: url('../IMAGES/SVG/scribble-1c.svg'); 
    background-size: cover; 
    background-repeat: no-repeat; 

    
}
@media (max-width: 500px) {
    footer {
        height: 819px; 
        overflow: hidden; 
    
        margin-top: -400px;
        position: relative;
        z-index: 0;
    
        background-image: url('../IMAGES/SVG/scribble-2c.svg'); 
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: -11px 60px;   
    }
}
  
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

/* Overlay container */
.video-overlay {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 224px;
    height: 420px;
    display: none;
    flex-direction: column;
    z-index: 1000;
}
@media (max-width: 500px) {
    .video-overlay {
        position: fixed;
        right: 8px;
        width: 144px;
        height: 277px;
        display: none;
        flex-direction: column;
        z-index: 1000;
    }
}

.video-overlay video {
    width: 100%;
    height: auto;
}

/* Hide fullscreen and more options buttons */
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-zoom-button,
video::-webkit-media-controls-more-button {
    display: none !important;; 
}

/* For Firefox */
video::-moz-media-controls-fullscreen-button,
video::-moz-media-controls-more-button {
    display: none !important;;
}

/* General fallback for other browsers */
video::-ms-media-controls-fullscreen-button {
    display: none !important;;
}

.video-container {
    background: #FFFFFF;
    border: 1px solid rgba(215,215,215,0.65);
    box-shadow: 0 2px 24px 0 rgba(0,0,0,0.16);
    border-radius: 16px;
    overflow: hidden;
}

#wedge {
    padding: 0 0 var(--size-xxl) 0;
}
@media (max-width: 500px) {
    #wedge {
        padding: 0 0 var(--size-xl) 0;
    }
}