/*-------------- TYPE IMPORTS --------------*/

@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;1,700&family=Open+Sans:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;1,700&family=Open+Sans:wght@400;500;700&display=swap");

/*-------------- COLOURS --------------*/
:root {
  --black: #0d0d0d;
  --dark-grey: #3e3e3e;
  --medium-grey: #e7e9ef;
  --light-grey: #f2f2f2;
  --white: #feffff;
  --dark-blue: #183c99;
  --medium-blue: #116a9f;
  --forest-green: #192723;
  --dark-green: #287253;
  --medium-green: #428066;

  /*-------------- BRAND SPECIFIC COLOURS --------------*/
  --x8-blue: #789eff;

  --paddy-green: #3f977c;
  --betfair-yellow: #ffdc86;
  --betfair-black: #1e1e1e;

  --troffee-tan: #ffe5bd;
  --troffee-brown: #17120f;
  --troffee-yellow: #fff385;
  --troffee-orange: #f1c685;
  --troffee-red: #ea6666;
}

/*-------------- BASE STYLE RESET --------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--white);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--dark-grey);
}

h1,
h2,
h4,
h5 {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

h1 {
  color: var(--black);
  font-size: 4em;
  font-weight: 700;
  line-height: 1.5em;
}

h2 {
  font-size: 1.5em;
  font-weight: 500;
}

h3 {
  font-family: "Bitter", serif;
  font-weight: 500;
  font-size: 2em;
}

h3 {
  font-size: 2em;
}

h5 {
  color: var(--medium-blue);
  font-weight: 500;
  font-size: 1em;
}

ol,
ul {
  list-style-type: none;
}

a {
  color: var(--dark-blue);
  text-decoration: none;
  font-weight: 600;
}
/*-------------- HEADER SECTION BASE STYLE --------------*/

header {
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  row-gap: 2vh;
  padding: 2vh;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
}

header nav a {
  color: var(--white);
}

.logo-main {
  background-image: url(assets/logo-bg.svg);
  height: 48px;
  width: 48px;
}

header nav .logo-main {
  background-image: url(assets/logo-bw.svg);
}

.hero-image-box,
.hero-overview-box {
  background-color: var(--white);
  display: flex;
  justify-content: center;
  padding: 0 2rem;
  height: 100%;
  width: 100%;
}

/* .hero-image-box {
  background-color: var(--white);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url(assets/x8-hero.jpg);
  max-width: 1400px;
} */

.hero-overview {
  align-items: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  row-gap: 2vh;
  height: 100%;
  max-width: 1400px;
}

.overview {
  align-items: center;
  display: grid;
  grid-template-columns: 5fr 3fr;
  height: 100%;
  position: relative;
}

.overview::before {
  background-color: var(--white);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
  content: "";
  height: 30vh;
  left: 10%;
  position: absolute;
  opacity: 0.4;
  z-index: 0;
  width: 70%;
}

.overview h1,
div {
  z-index: 1;
}

.hero-overview h1,
.hero-overview h2,
.hero-overview p,
header .hero-overview span {
  color: var(--white);
}

.role {
  display: flex;
  justify-content: space-between;
  padding-left: 10%;
  width: 100%;
}

.role p {
  margin: 0;
}

.prog-date {
  display: flex;
}

.prog-date p:first-child {
  margin-right: 24px;
}

.content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

section {
  display: flex;
  flex-direction: column;
  padding: 7.5rem 2rem 0 2rem;
  width: 100%;
  max-width: 1400px;
}

.full-width,
.full-width .project-image {
  background-position: top;
  border-radius: 0;
  box-shadow: none;
  height: 40rem;
  padding: 0;
  max-width: unset;
}

.content-text {
  max-width: 1164px;
}

p {
  margin: 0 0 1rem 0;
}

p:last-child {
  margin: 0;
}

.project-image {
  background-color: var(--white);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
  /* box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.08); */
  height: 50rem;
  width: 100%;
  max-width: 1400px;
}

.improvements-list {
  max-width: 1164px;
}

.improvements-list p {
  margin-bottom: 48px;
}

.improvements {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 96px;
  height: 600px;
  margin-bottom: 48px;
}

.improvements:nth-child(even) {
  grid-template-columns: 3fr 1fr;
}

.improvements:last-child {
  margin-bottom: 0px;
}

.improvements-image {
  background-color: var(--white);
  box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 320px;
}

.improvements-image video {
  position: absolute;
  left: -11px;
}

.listRight {
  grid-column: 1/1;
  grid-row: 1/1;
}

.grid-images {
  align-items: center;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  gap: 10rem;
  max-width: 50rem;
}

.list-image {
  background-size: auto 101%;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
}

.inline-image {
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--white);
  border-radius: 48px;
  box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.08);
  height: 20rem;
  width: 20rem;
}

.description-list {
  margin: 0 0 64px 64px;
}

.description-list li {
  margin-bottom: 2rem;
  position: relative;
}

.description-list li:before {
  color: rgba(0, 0, 0, 0.2);
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: absolute;
  left: -48px;
  top: -16px;
}

.description-list li:first-child::before {
  content: "01";
}
.description-list li:nth-child(2)::before {
  content: "02";
}
.description-list li:nth-child(3)::before {
  content: "03";
}

.inline-group {
  display: flex;
  flex-direction: row;
  gap: 2%;
  padding: 5rem 0;
  position: relative;
  margin: 7.5rem 0 0 0;
}

video {
  position: relative;
  left: -1%;
  top: -1px;
}

/*-------------- HOME MAIN STYLE --------------*/

.home-main {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}

.hi-home {
  color: var(--black);
  font-size: 4em;
  font-weight: 700;
  line-height: 1.5em;
}

.name {
  font-size: 16px;
  font-weight: 400;
}

.home-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 2vh;
  width: 100%;
}

.home-deer {
  height: 100%;
  max-height: 800px;
  position: relative;
  width: 100%;
}

.home-deer::after {
  background-color: var(--white);
  content: "";
  display: block;
  height: 40px;
  width: 160px;
  position: absolute;
  bottom: 18px;
  right: 0;
}

/* .slide-wrap {
  height: 100%;
  width: 100%;
} */

.home-slide {
  background-color: var(--black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 4vh;
  row-gap: 4vh;
  height: 100%;
  width: 100%;
  padding: 4vh;
  overflow: scroll;
}

.projects {
  background-color: var(--dark-grey);
  content: "";
  display: block;
  position: relative;
  height: 60vh;
  width: 100%;
}

.projects span {
  color: var(--white);
  font-size: 2em;
  position: absolute;
  bottom: 0;
  max-width: 44%;
  z-index: 1;
}

.projects video {
  position: absolute;
  top: 0;
  left: 0;
}

.video-mask {
  background-color: var(--dark-grey);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

.home-description {
  font-size: 1.4em;
  line-height: 1.4em;
  font-weight: 500;
  width: 80%;
}

.contactLinks {
  display: flex;
  gap: 4%;
}

/*-------------- 8x8 STYLE --------------*/

.x8-01 .video-mask {
  background-image: url(assets/x8-chair-bw.png);
}

.x8-02 .video-mask {
  background-image: url(assets/x8-mic-bw.png);
}

.x8-03 .video-mask {
  background-image: url(assets/x8-headphone-bw.png);
}

.x8-01 .video-mask:hover,
.x8-02 .video-mask:hover,
.x8-03 .video-mask:hover {
  background: none;
}

.x8 header {
  background-color: var(--dark-blue);
}

.x8 h3,
.x8 span {
  color: var(--dark-blue);
}

.x8 .overview::before {
  background-color: var(--dark-blue);
  background-image: url(assets/x8-hero.gif);
}

.x8 .improvements-image {
  width: 336px;
}
.x8 .hero-overview-box {
  background-color: var(--dark-blue);
}

.x8 .list01 {
  background-image: url(assets/video/x8-incoming-test.gif);
}

.x8 .image01 {
  background-image: url(assets/8x8-3d-image.gif);
  background-size: 80% auto;
}
.x8 .image02 {
  background-color: var(--x8-blue);
  background-image: url(assets/8x8-1.png);
}
.x8 .image03 {
  background-image: url(assets/8x8-architecture.png);
}
.x8 .image04 {
  background-color: var(--x8-blue);
  background-image: url(assets/8x8-2.png);
}
.x8 .image05 {
  background-color: var(--x8-blue);
  background-image: url(assets/8x8-3.png);
}
.x8 .image06 {
  background-color: var(--x8-blue);
  background-image: url(assets/8x8-4.png);
}

/*-------------- Beat The Drop STYLE --------------*/

.pp-01 .video-mask {
  background-image: url(assets/pp-baloon-bw.png);
}

.pp-02 .video-mask {
  background-image: url(assets/pp-win-bw.png);
}

.pp-03 .video-mask {
  background-image: url(assets/pp-horse-bw.png);
}

.pp-01 .video-mask:hover,
.pp-02 .video-mask:hover,
.pp-03 .video-mask:hover {
  background: none;
}

.betfair .improvements-image video {
  left: -19px;
}
.betfair header {
  background-color: var(--dark-green);
}

.betfair .overview::before {
  background-color: var(--dark-green);
  background-image: url(assets/btd-hero.gif);
}

.betfair h3,
.betfair span {
  color: var(--dark-green);
}

.betfair .hero-overview-box {
  background-color: var(--dark-green);
}

.betfair .image01 {
  background-color: var(--paddy-green);
  background-image: url(assets/BTD-PP-1.png);
}
.betfair .image02 {
  background-color: var(--betfair-yellow);
  background-image: url(assets/BTD-BF-1.png);
}
.betfair .image03 {
  background-color: var(--paddy-green);
  background-image: url(assets/BTD-PP-2.png);
}
.betfair .image04 {
  background-color: var(--betfair-yellow);
  background-image: url(assets/BTD-BF-2.png);
}
.betfair .image05 {
  background-color: var(--paddy-green);
  background-image: url(assets/BTD-PP-3.png);
}
.betfair .image06 {
  background-color: var(--betfair-yellow);
  background-image: url(assets/BTD-BF-3.png);
}

.d3-01 {
  background-image: url(assets/bf-winner.gif);
}

.d3-02 {
  background-image: url(assets/pp-ass.gif);
}

.d3-03 {
  background-size: 130% auto;
  background-image: url(assets/pp-horse.gif);
}

.d3-04 {
  background-image: url(assets/bf-lost.gif);
}

/*-------------- Troffee STYLE --------------*/

.coffee-01 .video-mask {
  background-image: url(assets/coffee-m1-bw.png);
}

.coffee-02 .video-mask {
  background-image: url(assets/coffee-m2-bw.png);
}

.coffee-03 .video-mask {
  background-image: url(assets/coffee-m3-bw.png);
}

.coffee-01 .video-mask:hover,
.coffee-02 .video-mask:hover,
.coffee-03 .video-mask:hover {
  background: none;
}

.troffee header {
  background-color: var(--black);
}

.troffee .overview::before {
  background-color: var(--black);
  background-image: url(assets/coffee-hero.gif);
}

.troffee h3,
.troffee h5,
.troffee span {
  color: var(--black);
}

.troffee .project-image {
  background-size: auto 100%;
}

.troffee .inline-group:before {
  background-color: var(--troffee-red);
  border-radius: 24px;
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 80%;
  left: 10%;
  top: 0;
}

.troffee .hero-overview-box {
  background-color: var(--black);
}

.troffee .list01 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/troffee-1.png);
}

.troffee .list02 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/troffee-2.png);
}

.troffee .list03 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/troffee-3.png);
}

.troffee .line01 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/scketch-1.png);
}
.troffee .line02 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/scketch-2.png);
}
.troffee .line03 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/scketch-3.png);
}
.troffee .line04 {
  background-size: 100% 100%;
  background-position: center;
  background-image: url(assets/scketch-4.png);
}

.troffee .improvements-image {
  width: 456px;
}

.troffee .image01 {
  background-color: var(--troffee-brown);
  background-size: auto 100%;
  background-position: center;
  background-image: url(assets/troffee-hero.png);
}
.troffee .image02 {
  background-color: var(--troffee-brown);
  background-image: url(assets/Troffee-app-1.png);
}
.troffee .image03 {
  background-color: var(--troffee-brown);
  background-image: url(assets/Troffee-app-2.png);
}
.troffee .image04 {
  background-color: var(--troffee-tan);
  background-image: url(assets/Coffee1.png);
}

/*-------------- NEXT LINK STYLE --------------*/

.next {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 32px;
}

.nextProject {
  border-radius: 24px;
  height: 128px;
  width: 30%;
  position: relative;
}

.nextText {
  color: var(--white);
  font-size: 2em;
  line-height: 1em;
  position: absolute;
  bottom: 0;
  max-width: 44%;
  z-index: 1;
}

.paddy {
  background-color: var(--paddy-green);
  background-image: url(assets/btd-hero.gif);
}

.troff {
  background-color: var(--troffee-brown);
  background-image: url(assets/coffee-hero.gif);
}

.agent {
  background-color: var(--x8-blue);
  background-image: url(assets/x8-hero.gif);
}

/*-------------- ABOUT STYLE --------------*/

.about {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  padding: 4%;
}

.about li {
  list-style: inside disc;
}

.sublist li {
  list-style: inside;
  margin-left: 32px;
}

.aboutHead {
  display: grid;
  grid-template-columns: 3fr 1fr;
  width: 100%;
  max-width: 1400px;
}

.curriculum {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 32px;
  width: 100%;
  max-width: 1400px;
}

.experience,
.skils {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.expInfo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*-------------- RESPONSIVE 1080PX --------------*/
@media only screen and (max-width: 1080px) {
  header {
    height: 100%;
  }

  .improvements {
    gap: 4%;
  }

  .overview {
    grid-template-columns: none;
  }

  .role {
    flex-direction: column;
    padding-left: 0;
  }

  .inline-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    padding: 0;
  }

  .full-width {
    height: 30vh;
  }
}

@media only screen and (max-width: 800px) {
  .home-main {
    flex-direction: column;
    scroll-behavior: smooth;
    height: 100%;
  }

  .home-info {
    gap: 32px;
  }

  .ded {
    display: none;
  }

  .next {
    gap: 32px;
  }

  .nextProject {
    width: 50%;
  }

  .project-image {
    height: 50vh;
  }

  .inline-image {
    border-radius: 24px;
    height: 30vh;
    width: 30vh;
  }

  .grid-images {
    justify-items: center;
    gap: 4%;
  }

  .curriculum {
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (max-width: 600px) {
  .home-slide {
    display: flex;
    flex-direction: column;
  }

  section {
    padding: 1rem;
  }

  .role {
    margin-top: 2rem;
  }

  .prog-date {
    flex-direction: column;
  }

  .improvements {
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
  }

  .improvements-image {
    height: 600px;
  }

  .troffee .improvements-image {
    width: 100%;
  }

  .troffee .project-image {
    background-size: 100% auto;
  }

  .troffee .list01,
  .troffee .list02,
  .troffee .list03 {
    background-size: auto 100%;
  }

  .troffee .image01 {
    background-position: left;
  }

  .inline-image {
    height: 20vh;
    width: 20vh;
  }
}