@font-face {
  font-family: "inter-regular";
  src: url('fonts/Inter-Regular.ttf');
}

@font-face {
  font-family: "inter-medium";
  src: url('fonts/Inter-Medium.ttf');
}

@font-face {
  font-family: "inter-light";
  src: url('fonts/Inter-Light.ttf');
}

@font-face {
  font-family:"manrope-extrabold";
  src: url('fonts/manrope-extrabold.ttf');
}

@font-face {
  font-family:"manrope-bold";
  src: url('fonts/manrope-bold.ttf');
}

@font-face {
  font-family:"manrope-semibold";
  src: url('fonts/manrope-semibold.ttf');
}

@font-face {
  font-family:"manrope-regular";
  src: url('fonts/manrope-regular.ttf');
}

@font-face {
  font-family:"manrope-light";
  src: url('fonts/manrope-light.ttf');
}

@font-face {
  font-family:"manrope-thin";
  src: url('fonts/manrope-thin.ttf');
}

@font-face {
  font-family:"fantasque-reg";
  src: url('fonts/fantasquesansmono-regular.otf');
}

@font-face {
  font-family:"fantasque-bold";
  src: url('fonts/fantasquesansmono-bold.otf');
}

@font-face {
  font-family:"fraktion-bold";
  src: url('fonts/PPFraktionMono-Bold.ttf');
}

@font-face {
  font-family:"neue-montreal-book";
  src: url('fonts/PPNeueMontreal-Book.otf');
}

@font-face {
  font-family:"neue-montreal-regular";
  src: url('fonts/NeueMontreal-Regular.otf');
}

@font-face {
  font-family:"neue-montreal-med";
  src: url('fonts/PPNeueMontreal-Medium.otf');
}

@font-face {
  font-family:"neue-montreal-bold";
  src: url('fonts/NeueMontreal-Bold.otf');
}

html, a {
  cursor: none;
}

.circle {
  width: 30px;
  height: 30px;
  border: 1px solid #323232;
  position: fixed;
  border-radius:50%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  transform: translate(-50%, -50%);
  transition: width ease .3s, height ease .3s;
  z-index: 10;
}

@media screen and (max-width: 550px) {
  .circle {
    display: none;
  }
}

.navLink:hover {
  cursor: none;
}

.link-grow {
  /* transform: scale(1.75); */
  /* background: rgba(0, 0, 0, 0.4); */
  /* backdrop-filter: blur(10px); */
  /* backdrop-filter: none; */
  width: 50px;
  height: 50px;
  border: 1px solid #333333;
  transition: width ease .3s, height ease .3s, backdrop-filter ease .3s;
}

.link-grow-invert {
  transform: scale(2);
  backdrop-filter: invert(100%);
  -webkit-backdrop-filter: invert(100%);
  border: none;
}

.link-grow-noblur {
  width: 50px;
  height: 50px;
  border: 1px solid #333333;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: none;
  transition: width ease .3s, height ease .3s, backdrop-filter ease .3s;
}

.centerCaption {
  justify-content: center;
}

.homePage {
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  position: relative;
  z-index: -1;
  background-color: #f9f9f9;
}

h1 {
  /* font-family: "manrope-extra", Arial, sans-serif; */
  /* font-family: "fantasque-bold", Courier, monospace; */
  /* font-family: "fraktion-bold", Courier, monospace; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  letter-spacing: .05em;

}

body {
  margin: 0;
  padding: 0;
}

a.navLink {
  position: relative;
  z-index: 20;
  /* font-family: "fantasque-reg", Courier, monospace; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 550px) {
  a.navLink {
    color: white;
    z-index: 0;
  }
}

/* home2 */


.homeContent1 {
  /* position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 900px;
  margin-top: -50px;
  background-color: #f9f9f9;
  align-items: center;
  transition: all ease .3s;
  z-index: -1; */

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -0%);
  margin-top: -52px;
  background-color: #f9f9f9;
  align-items: center;
  /* margin-bottom: 30px; */
  transition: all ease .3s;
}

.homeItem {
  margin: 0px 20px 0px 20px;
  font-family: "neue-montreal-book", Arial, Helvetica, sans-serif;
}

.landingContent, .secondHalf {
  font-family: "neue-montreal-book", Arial, Helvetica, sans-serif;
}

.landingContent {
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;

  gap: 40px;
  height: 360px;
  margin: auto;

  transition: all ease .3s;
}

.landingHeader, .sectionHeader1 {
  font-size: calc(40em/16);
}

.sideProjectsContainer {
  width: calc(100vw - 35px);
  padding: 10px;
  height: auto;
  display: grid;
  column-gap: 10px;
  row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  /* background-color: coral; */
}

@media screen and (max-width: 900px) {
  .sideProjectsContainer {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 530px) {
  .sideProjectsContainer {
    width: calc(100vw - 20px);
    grid-template-columns: 1fr;
    /* padding: 20px;
    column-gap: 20px; */
  }
}

/* .sideProjectsContainer {
  width: calc(100vw - 35px);
  padding: 10px;
  height: auto;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sideProjectsRow1 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.sideProjectsRow2 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
} */

.hidden {
  opacity: 0;
}

.sideProjectThumbContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 530px) {
  .sideProjectThumbContainer:hover > .sideProjectThumb {
    border-radius: 50px;
    transition: all ease .3s;
  }
}

.sideProjectThumb {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
  transition: all ease .3s;
}

@keyframes roundedCorner {
  0% {
    border-radius: 10px;
  }
  100% {
    border-radius: 50px;
  }
}

@keyframes unroundedCorner {
  0% {
    border-radius: 50px;
  }
  100% {
    border-radius: 10px;
  }
}

@media screen and (max-width: 530px) {
  .sideProjectThumb.in-view {
    animation: roundedCorner .3s 0s both;
  }
  .sideProjectThumb.not-in-view {
    animation: unroundedCorner .3s 0s both;
  }
}

.sideProjectCap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sideProjectTitle, .sideProjectDesc {
  width: 140px;
  font-size: calc(14em/16);
  margin: 0;
}

.sideProjectDesc {
  text-align: end;
}

.landingTextContainer1 {
  display: flex;
  justify-content: center;

  margin: 0;
  width: 412px;
  height: 100%;

  border-radius: 10px;
  background: #323232;

  transition: all ease .3s;
}

.landingHeader {
  margin: 0;
  padding: 70px 50px;
  align-self: center;

  width: auto;

  letter-spacing: 0em;
  text-align: left;
  line-height: 1.25;
  color: white;
  
  transition: all ease .3s;
}

.landingSubHeader, .sectionHeader2 {
  font-family: "neue-montreal-book", Arial, Helvetica, sans-serif;
  font-size: calc(24em/16);
}

.landingTextContainer2 {
  display: flex;
  justify-content: center;

  margin: 0;
  width: 450px;
  height: 100%;

  border-radius: 10px;
  border: 1px solid #323232;

  transition: all ease .3s;
}

.landingSubHeader {
  margin: 0;
  padding: 70px 50px;
  width: auto;
  align-self: center;

  text-align: left;
  line-height: 1.25;

  border-radius: 10px;
  color: #1f1f1f;
  
  transition: all ease .3s;
}

.recentProjectsContainer {
  position: relative;
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  gap: 40px;
  position:relative;
  padding-top: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 300px;

  transition: all ease .3s;
}

.recentProjectsContainer:first-of-type {
  padding-top: 260px;
  transition: all ease .3s;
}

@media screen and (max-width: 530px) {
  .recentProjectsContainer:first-of-type {
    padding-top: 20px;
    margin-top: 120px;
    transition: all ease .3s;
  }
}

.sectionLabel {
  position: sticky;
  top: calc(50vh - 196px);

  margin: 0;
  height: 392px;
  align-self: self-start;

  border-radius: 10px;
  background-color: white;
  color: #1f1f1f;
  border: 1px solid #323232;
  background-color: #f9f9f9;
  
  transition: all ease .3s;
}

.sectionTextContainer {
  position: relative;
  align-self: center;
  height: calc(100% - 140px);
  padding: 70px 50px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: left;
  line-height: 1.3;
}

.sectionHeader1 {
  width: 312px;
  margin: 0;
}

.sectionHeader2 {
  width: 312px;
  margin: 10px 0 0 0;
}

.newProjectButtonContainer {
  display: flex;
  flex-direction: column;
  gap: 40px;

  width: 450px;
  transition: all ease .3s;
}

.newProjectButton {
  width: 100%;
  height: 392px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #f9f9f9;
  color: #1f1f1f;
  border: 1px solid #323232;
  
  transition: all ease .3s;
}

.newBanner {
  width: 100%;
  height: auto;
}

.bannerContent {
  padding: 30px;
}

.bannerContent * {
  margin: 0;
}

.bannerHeading {
  margin-bottom: 10px;
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  font-size: calc(22em/16);
}

.bannerSubHeading {
  font-size: calc(16em/16);
}

.tokens {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-bottom: 20px;
}

.token {
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  font-size: calc(12em/16);
  border-radius: 20px;
  padding: 3px 9px;
}

.workshopToken {
  color:#D92700;
  background-color: #FFD2C8;
}

.lockIcon {
  width: 15px;
}

@media screen and (max-width: 550px) {
  .lockIcon {
    width: 10px;
  }
}

.cheapToken {
  color:#416A28;
  background-color: #DAE8D2;
}

.gmapToken {
  color: #2b8b28;
  background-color: #AFF1AE;
}

.ttToken {
  color: #FE2C53;
  background-color: #FFCBD5;
}

.sapToken {
  color: #3C658E;
  background-color: #C3E1FF;
}

.csToken {
  color:#37714C;
  background-color: #C9E6D4;
}

.ikeaToken {
  color: #CD9F00;
  background-color: #FFECAC;
}

.cnhToken {
  color: #1C8E7F;
  background-color: #C3F7F0;
}

.ytToken {
  color: #F55656;
  background-color: #FFC9C9;
}

.vcToken {
  color: #286197;
  background-color: #BFE0FF;
}

.yelpToken {
  color: #F55656;
  background-color: #FFC9C9;
}

.dayoutToken {
  color: #F55656;
  background-color: #FFC9C9;
}

.lastHomeSection {
  margin-bottom: calc(50vh - 196px);
}

@media screen and (max-width: 1200px) {
  .landingContent {
    transition: all ease .3s;
  }
  .landingHeader, .sectionHeader1 {
    font-size: calc(32em/16);
    transition: all ease .3s;
  }
  .landingContent {
    height: 295px;
    transition: all ease .3s;
  }
  .landingTextContainer1 {
    width: 340px;
    transition: all ease .3s;
  }
  .landingHeader {
    padding: 50px 40px;
  }
  .landingTextContainer2 {
    width: 382px;
    transition: all ease .3s;
  }
  .landingSubHeader {
    padding: 50px 40px;
    line-height: 1.35;
    transition: all ease .3s;
  }
  .sectionLabel {
    width: 342px;
    height: 352px;
  }
  .sectionTextContainer {
    padding: 50px 40px;
    height: calc(100% - 100px);
  }
  .landingSubHeader, .sectionHeader2, .bannerHeading {
    font-size: calc(18em/16);
  }
  .sectionHeader1, .sectionHeader2 {
    width: 260px;
  }
  .newProjectButtonContainer {
    width: 382px;
  }
  .newProjectButton {
    height: 350px;
  }
  .lastHomeSection {
    margin-bottom: 323px;
  }
}

@media screen and (max-width: 840px) {
  .circle {
    display: none;
  }
  .landingContent, .recentProjectsContainer {
    flex-direction: column;
    transition: all ease .3s;
  }
  .landingContent {
    width: 402px;
    height: auto;
  }
  .landingTextContainer1, .landingTextContainer2 {
    width: 100%;
  }
  .landingHeader, .landingSubHeader {
    transition: all ease .3s;
  }
  .landingSubHeader {
    height: auto;
  }
  .sectionLabel {
    width: 402px;
  }
  .sectionHeader1, .sectionHeader2 {
    width: 100%;
  }
  .recentProjectsContainer {
    padding-top: 200px;
  }
  .sectionLabel {
    position: relative;
    top: 0;
    margin: auto;
  }
  .newProjectButtonContainer {
    width: 402px;
    margin: auto;
  }
}

@media screen and (max-width: 520px) {
  .landingContent, .sectionLabel, .newProjectButtonContainer {
    width: calc(100vw - 40px);
  }
  .landingContent {
    height: auto;
    top: auto;
    bottom: auto;
  }
  .landingHeader, .sectionHeader1 {
    font-size: calc(28em/16);
  }
  .landingHeader {
    padding: 40px 30px;
  }
  /* .landingTextContainer2 {
    margin-bottom: 30px;
  } */
  .landingSubHeader {
    font-size: calc(18em/16);
    padding: 30px 30px;
    line-height: 1.35;
    transition: all ease .3s;
  }
  .sectionHeader2 {
    font-size: calc(18em/16);
  }
  .homeContent1 {
    margin-bottom: 0;
    height: calc(100vh - 50px);
  }
  .landingContent, .recentProjectsContainer, .newProjectButtonContainer {
    gap: 20px;
  }
  .sectionLabel {
    height: auto;
  }
  .recentProjectsContainer {
    padding-top: 20px;
    margin-bottom: 120px;
  }
  .newProjectButtonContainer {
    margin-bottom: -40px;
  }
}

/* end of home2 */

/* upper half of home */

.homeBox {
  position: relative;
  z-index: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10em;
  width: 60%;
  height: 1500px;
  border: 2px solid white;
  border-image: linear-gradient(to bottom, #ffffff 0%,#665834 50%);
  border-image-slice: 1;
  border-width: 2px;
}

.introContent {
  display: flex;
  justify-content: center;
  align-items:center ;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  /* background: red; */
  height: 218pt;
  margin-top: 150px;
}

.introContentElement {
  position: relative;
}

.hiText {
  position: relative;
  font-family: "manrope-extrabold", Arial, sans-serif;
  font-size: 15em;
  color: white;
  line-height: 1em;
}

.introText {
  position: relative;
  font-family: "manrope-extrabold", Arial, sans-serif;
  font-size: 2em;
  color: white;
  width: 340px;
  padding-left: 40px;
}

.nextButtonContainer {
  position: relative;
  bottom: 60px;
  /* transform: translate(0, -100%); */
  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
}

.nextButton {
  position: absolute;
  /* bottom: 30px; */
  width: 35px;
  height: 35px;

  margin-right: auto;
  margin-left: auto;

  border-radius: 50%;
  /* box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.08); */
  border: 1px solid #323232;
  transition: all ease 1s;
}

.nextButton:hover {
  transform-origin: center;
  width: 43px;
  height: 43px;

  /* margin-top: 50px; */
  /* box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.08), 0 5px 15px 0 rgba(0, 0, 0, 0.08); */
  border: 1px solid #323232;
  transition: all ease .3s;
}

.highShadow {
  width: 43px;
  height: 43px;
  /* margin-top: 50px; */
  /* box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.08), 0 2px 15px 0 rgba(0, 0, 0, 0.08); */
  border: 1px solid #323232;
  transition: all ease 1s;
}

.bottomMsgContainer {
  position: absolute;
  display: flex;
  width: 100%;
  height: 70px;
  justify-content: center;
}

.upButtonContainer {
  z-index: 10;
  /* background: orange; */
}

.upButton {
  opacity: 0%;

  height: 40px;
  width: auto;
  position: fixed;
  right: 30px;
  bottom: 30px;
  border-radius: 100px;
  border: 1px solid #323232;
  background-color: #f9f9f9;
  transform: rotate(180deg);
  transition: all ease .3s;
}

@media screen and (max-width: 530px) {
  .upButton {
    right: 18px;
    bottom: 18px;
    transition: all ease .3s;
  }
}

.upShow {
  opacity: 100%;
}

.upButton:hover {
  /* box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.08), 0 5px 15px 0 rgba(0, 0, 0, 0.08); */
  
  border: 1px solid #323232;
  transition: all ease .3s;
}

@media screen and (max-width: 1200px) {
  .upButton {
    height: 40px;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 520px) {
 .upButton {
   height: 40px;
   transition: all ease .3s;
 }
}

.upButtonInProject {
  right: 30px;
  bottom: 30px;
}

/* lower half of home */

.projectButtons {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.projectButton {
   font-family: "manrope-extrabold", Arial, sans-serif;
   font-size: 1.6125em;
   background: white;
   color: #1f1f1f;
   opacity: .35;
   border: 0px solid #1f1f1f;
   outline: none;
   width: 50%;
   /* height: 120px; */
   letter-spacing: 10px;
   transition: all ease .3s;
}

@media screen and (max-width: 569px) {
  .projectButton {
    width: 80%;
  }
}

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

.buttonCap {
  font-family: "manrope-regular", Arial, sans-serif;
  font-size: .5em;
  margin-top: 1em;
  letter-spacing: 2px;
}

.projectButton:hover {
  opacity: 1;
  transition: all ease .3s;
}

@media screen and (max-width: 569px) {
  .projectButton {
    margin: 20px 0px 20px 0px;
  }
  .buttonText {
    font-size: .7em;
  }
  .buttonCap {
    font-size: .4em;
  }
}

/* about page styling start */

.aboutImg {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  transition: all ease .3s;
  box-shadow: none;
  border-radius: 10px;
  /* border: 1px solid black; */
}

/* @media screen and (max-width: 480px) {
  .aboutImg {
    width: 250px;
    margin-left: -60px;
    transition: all ease .3s;
  }
} */

/* @media screen and (max-width: 480px) {
  .aboutImg {
    width: 200px;
    margin-top: 50px;
    transition: all ease .3s;
  }
} */

.aboutImg2 {
  position: absolute;
  top: 30%;
  right: 10%;
  width: 350px;
  height: auto;
}

.aboutPar {
  /* font-family: "manrope-thin", Arial, sans-serif; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 150%;
  overflow-wrap: break-word;
  position: relative;
  display: block;
  width: 440px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 100px;
}

.aboutParNew {
  /* font-family: "manrope-thin", Arial, sans-serif; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  font-size: calc(30em/16);
  line-height: 150%;
  overflow-wrap: break-word;
  text-wrap: pretty;
  position: relative;
  display: block;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  transition: all ease .3s;
}

.aboutLink:hover {
  cursor: none;
}

@media screen and (max-width: 550px) {
  .aboutPar {
    width: 300px;
  }
  .aboutParNew {
    font-size: 1.5em;
    padding-bottom: 30px;
    transition: all ease .3s;
  }
}

.aboutLink {
  z-index: 0;
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: #1f1f1f;
  /* padding: 0 0px; */
  transition: color ease 0.3s;
}

.aboutLink::after {
  content: '';
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 7%;
  left: 0;
  bottom: 0;
  margin-bottom: 5%;
  background-color: #1f1f1f;
  transition: all ease 0.3s;
}

.aboutLink:hover {
  color: white;
}

.aboutLink:hover::after {
  height: 80%;
}

/*  */

/* day out page styling start */

nav {
  position: fixed;
  z-index: 20;
  width: 100%;
  top: 0;
  background: rgba(249, 249, 249, 1);
  /* backdrop-filter: blur(5px); */
  /* -webkit-backdrop-filter: blur(5px); */
  border-bottom: 1px solid #f9f9f9f9;
  transition: all ease .3s;
}

@media screen and (max-width: 550px) {
  nav {
    border-bottom: none;
  }
  .otherNav {
    background: #f9f9f9;
  }
  .cheapNav {
    background: #416A28;
  }
  .workshopNav {
    background: #DE7A64;
  }
  .ttNav {
    background: #FE2C53;
  }
  .gmapNav {
    background: #42AD3F;
  }
  .sapNav {
    background: #558ECB;
  }
  .csNav {
    background: #397F5B;
  }
  .ikeaNav {
    background: #FFDA5B;
  }
  .cnhNav {
    background: #BBCECC;
  }
  .vcNav {
    background: #253e56;
  }
  .yelpNav {
    background: #c41200;
  }
  .dayOutNav {
    background: #ff6f6f;
  }
  .youtubeNav {
    background: #dd2e2e;
  }
}

@media screen and (max-width: 550px) {
  nav {
    background: 0;
  }
}

.centeredNav {
  width: 700px;
  margin: auto;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.leftNav {
  width: 700px;
  margin: auto;
  height: 50px;
  margin-left: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.csNav, .ikeaNav, .cnhNav, .vcNav, .yelpNav, .dayOutNav, .youtubeNav, .sapNav, .ttNav, .gmapNav, .workshopNav, .cheapNav, .otherNav {
  position: fixed;
  z-index: 9;
}

@media screen and (max-width: 550px) {
  .centeredNav {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.navLink {
  text-decoration: none;
  color: #000000;
  margin-right: 40px;
  letter-spacing: 0px;
  font-size: calc(14em/16);
}

.homeNav {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 2;
}

/* .homeNavButton {
  position: relative;
  display: block;
  text-align: center;
} */

.homeNavLink {
  /* font-family: "fantasque-reg", Courier, monospace; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #1f1f1f;
  letter-spacing: 0px;
  font-size: calc(14em/16);
  margin: 0px 15px 0px 15px;
  transition: all ease .3s;
}

.otherHeading1 {
  display: flex;
  align-items: flex-end;
  font-size: calc(40em/16);
  margin-left: 40px;
  width: 40vw;
  height: 40vh;
  margin-bottom: 40px;
  /* background-color: coral; */
}

.otherNav {
  padding-left: 40px;
  display: flex;
  gap: 30px;
  flex-direction: row;
  border-bottom: 1px solid #f9f9f9;
  transition: all ease .3s;
}

.navShadow {
  /* box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.05); */
  border-bottom: 1px solid #1f1f1f;
  transition: all ease .3s;
}

.otherHomeNavLink {
  margin: 0;
  letter-spacing: 0px;
  font-size: calc(14em/16);
}

@media screen and (max-width: 530px) {
  .otherHeading1 {
    font-size: calc(28em/16);
    width: 300px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .otherNav {
    padding-left: 20px;
    /* border-bottom: 1px solid #161616; */
  }
}

.otherHR {
  border-top: 1px solid black;
  margin: 0;
}

.homeNavLink:hover, .nextButton:hover, .upButton:hover {
  cursor: none;
}

.aboutPage, .dayOutPage, .youtubePage, .vcPage, .cnhPage, .ikeaPage, .csPage, .sapPage, .ttPage, .gmapPage, .workshopPage {
  background-color: #f9f9f9;
}

.mainContent {
  position: relative;
  z-index: 2;
  padding-top: 0px;
  background-color: #f9f9f9;
}

@media screen and (max-width: 550px) {
  .mainContent {
    margin-top: 85px;
  }
}

.blackTxt, p {
  color: #1f1f1f;
  transition: all ease .3s;
}

.dayOutColorBlock {
  position: relative;
  z-index: 0;
  background: #ff6f6f;
  width: 25%;
  height: 300px;
  margin-top: 210px;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .dayOutColorBlock {
    height: 245px;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 530px) {
  .dayOutColorBlock {
    display: none;
  }
}

.dayOutColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #ff6f6f;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

@media screen and (max-width: 530px) {
  .dayOutColorBlock2 {
    display: block;
  }
}

.dayOutProjectTitle {
  margin-top: -410px;
}

@media screen and (max-width: 1681px) {
  .dayOutProjectTitle {
    margin-top: -360px;
  }
}

@media screen and (max-width: 530px) {
  .dayOutProjectTitle {
    margin-top: 180px;
  }
}

.titleCaption {
  /* font-family: "manrope-extra", Arial, sans-serif; */
  /* font-family: "fantasque-bold", Courier, monospace; */
  /* font-family: "fraktion-bold", Courier, monospace; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;

  font-size: calc(12em/16);
  letter-spacing: 2px;
  text-wrap: pretty;
  margin-top: -30px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.titleCaptionMoreMargin {
  margin-top: 10px;
}

@media screen and (max-width: 530px) {
  .titleCaption {
    margin-top: -10px;
    line-height: 20px;
  }
}

.regularPar {
  font-size: calc(20em/16);
  line-height: 2em;
  text-wrap: pretty;
  /* line-height: 28px; */
  /* font-family: "fantasque-reg", Arial, sans-serif; */
  font-family: "neue-montreal-regular", Arial, sans-serif;
  transition: all ease .3s;
}

.unpretty {
  text-wrap: wrap;
}

@media screen and (max-width: 1681px) {
  .regularPar {
    font-size: calc(18em/16);
    transition: all ease .3s;
  }
}

.regularImg {
  width: 100%;
  height: auto;
}

.sapNoticePar {
  padding: 20px;
  border: 1px solid #558ECB;
  border-radius: 10px;
}

.csNoticePar {
  padding: 20px;
  border: 1px solid #397F5B;
  border-radius: 10px;
}

.ikeaNoticePar {
  padding: 20px;
  border: 1px solid #FFDA5B;
  border-radius: 10px;
}

.cnhNoticePar {
  padding: 20px;
  border: 1px solid #BBCECC;
  border-radius: 10px;
}

.vcNoticePar {
  padding: 20px;
  border: 1px solid #253e56;
  border-radius: 10px;
}

.dayOutNoticePar {
  padding: 20px;
  border: 1px solid #ff6f6f;
  border-radius: 10px;
}

.yelpNoticePar {
  padding: 20px;
  border: 1px solid #c41200;
  border-radius: 10px;
}

.ytNoticePar {
  padding: 20px;
  border: 1px solid #dd2e2e;
  border-radius: 10px;
}

.ttNoticePar {
  padding: 20px;
  border: 1px solid #FE2C53;
  border-radius: 10px;
}

@media screen and (max-width: 550px) {
  .regularPar {
    font-size: calc(16em/16);
    line-height: 170%;
  }
  a {
    font-size: calc(16.2em/16);
  }
}

svg {
  display: none;
}

.matter-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
  /* background-color: white; */
  border-radius: 10px;
  border: 1px solid black;
  transition: all ease .3s;
}

@media screen and (max-width: 550px) {
  .matter-container {
    height: 200px;
    transition: all ease .3s;
  }
}

.matterCaption {
  font-size: calc(16em/16);
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

@media screen and (max-width: 530px) {
  .matterCaption {
    font-size: calc(14em/16);
  }
}

.workshopMatterCaption {
  background: #FFD2C8;
  color: #D92700;
}

.cheapMatterCaption {
  background: #DAE8D2;
  color: #416A28;
}

.csMatterCaption {
  background: #C9E6D4;
  color: #37714C;
}

.sapMatterCaption {
  background: #C3E1FF;
  color: #3C658E;
}

.ttMatterCaption {
  background: #FFCBD5;
  color: #FE2C53;
}

.gmapMatterCaption {
  background: #AFF1AE;
  color: #2b8b28;
}

.ikeaMatterCaption {
  background: #FFECAC;
  color: #CD9F00;
}

.vcMatterCaption {
  background: #BFE0FF;
  color: #286197;
}

.ytMatterCaption {
  background: #FFC9C9;
  color: #F55656;
}

.contentSection {
  position: relative;
  z-index: 0;
  margin-bottom: 100px;
  padding-left: 50px;
  padding-right: 50px;
  max-width: 700px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  background: #f9f9f9;
}

.aboutParSection {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  /* height: calc(100vh - 52px); */
  height: auto;
  margin: 0 auto 100px auto;
  padding: 0;
  left: auto;
  right: auto;
  mix-blend-mode: darken;
}

@media screen and (max-width: 550px) {
  .aboutParSection {
    gap: 40px;
    margin-bottom: 30px;
  }
  .contentSection {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 30px;
    transition: all ease .3s;
  }
  .content-section-less-margin {
    margin-bottom: 0px;
  }
}

h2 {
  /* font-family: "manrope-extrabold", Arial, sans-serif; */
  /* font-family: "fantasque-bold", Courier, monospace; */
  font-family: "neue-montreal-med", Arial, Helvetica, sans-serif;
  font-size: calc(24em/16);
  /* text-wrap: pretty; */
  line-height: 170%;
  /* margin-top: 0px; */
}

@media screen and (max-width: 530px) {
  h2 {
    font-size: calc(20em/16);
  }
}

.sectionTitle {
  /* font-size: 3.125em; */
  font-size: 2.5em;
  /* text-wrap: balance; */
  /* margin-top: 140px; */
  margin-bottom: 40px;
}

.project-title-desktop {
  display: block;
}

.project-title-mobile {
  display: none;
}

.mobile-emoji-margin {
  margin-bottom: 10px;
}

@media screen and (max-width: 530px) {
  .project-title-desktop {
    display: none;
  }
  .project-title-mobile {
    display: block;
  }
}

@media screen and (max-width: 530px) {
  .sectionTitle {
    font-size: 2.2em;
    margin-bottom: 20px;
  }
}

hr {
  margin-bottom: 50px;
}

figure {
  margin: 0;
}

.imageLessMargin {
  margin-top: -50px;
}

.overviewCaption {
  width: 100%;
  text-align: center;
  font-size: .7em;
  color: #828282;
}

.largeImageContainer {
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  transition: all ease .3s;
}

@media screen and (max-width: 520px) {
  .largeImageContainer {
    width: 100%;
    transition: all ease .3s;
  }
  .imageFullWidth {
    width: 100%;
  }
}

/* border style */
/* .imageFullWidth {
  width: 100%;
  height: auto;
  box-shadow: none;
  border: .5px solid black;
} */

/* box shadow style */
.imageFullWidth {
  width: 100%;
  height: auto;
  border-radius: 7.5px;
  box-shadow: none;
  border: 1px solid #656565;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  /* box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08); */
}

.imageExtraSpaceBot {
  margin-bottom: 10px;
}

.imgCaption {
  width: 100%;
  overflow-wrap: break-word;
  /* font-family: "fantasque-reg", Courier, monospace; */
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  /* letter-spacing: .05em; */
  font-size: .9em;
  text-wrap: pretty;
  color: #828282;
  text-align: center;
  margin-top: 40px;
  line-height: 1.5em;
}

.imgCaptionLessMargin {
  margin-top: 10px;
  color: #828282;
}

.yelpKeyInfoSection, .woboFeatures {
  /* background-color: orange; */
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* drop shadow style */
.imageSideBySide {
  height:580px;
  /* margin: 0 20px 20px 20px; */
  border-radius:18px;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08);
  transition: all ease .3s;
}

.mobileImgContainer {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 40px;
  justify-content: center;
  /* background: orange; */
}

/* .dayOutResearchImg {
  margin: 0 20px 0  20px;
  transition: all ease .3s;
} */

@media screen and (max-width: 900px) {
  .mobileImgContainer {
    flex-wrap: wrap;
  }
  .dayOutResearchImg {
    width: 250px;
    height: auto;
    margin: 0 20px 20px 20px;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 620px) {
  .imageSideBySide {
    width: 300px;
    height: auto;
    margin: 0 0px 20px 0px;
  }
}

.journeyMapContainer {
  max-width: 1400px;
  transition: all ease .3s;
  /* background: coral; */
  /* margin-right: auto; */
  /* margin-left: auto; */
  /* display: flex; */
  /* justify-content: center; */
  /* flex-wrap: wrap; */
}

.cnhJourneyMap1:hover, .cnhJourneyMap2:hover {
  cursor: none;
}

.largerImgContainer, .ikeaJourneyMapContainer, .ikeaPersonaContainer, .vcPersonaImgContainer, .cnhProgramDiagramContainer, 
.sacWidgetImgSection, .sacMappingSection, .askdataContainer {
  max-width: 1000px;
  transition: all ease .3s;
}

@media screen and (max-width: 620px) {
  .journeyMapContainer {
    max-width: 100%;
    transition: all ease .3s;
  }
}

.cnhJourneyMap:hover{
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

/* box shadow style */
.dayOutUserCaseImage1, .dayOutUserCaseImage2, .youtubePinsUserCaseImage1, .vcPersonaImg, .vcJourneyMap1, .vcJourneyMap2, .vcJourneyMapRevised, .vcSketches, .yelpPersonaImg,
.cnhProgramDiagram, .cnhChat, .cnhPersonaImg, .cnhWorkshopActivity, .cnhWorkshopDiagram, .ikeaPersonaImg, .ikeaMeltdownImg, .ikeaJourneyMap, .ikeaStyleImg, .ttLargerImg {
  display: block;
  position: relative;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-radius: 7.5px;
  box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08);
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  transition: all ease .3s;
}

.dayOutUserCaseImage1, .vcPersonaImg {
  width: 100%;
}

.dayOutUserCaseImage2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.dayOutUserCaseImage1, .dayOutUserCaseImage2, .vcJourneyMap1, .vcJourneyMap2 {
  box-shadow: none;
}

.dayOutCalendarVid {
  position: relative;
  z-index: 1;
}

.vcPersonaImg {
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid #2A3E55;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
}

.vcJourneyMap1, .vcJourneyMap2, .vcJourneyMapRevised {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.vcJourneyMap2 {
  margin-top: -50px
}

.vcJourneyMapRevised {
  width: 70%;
}

@media screen and (max-width: 550px) {
  .dayOutCalendarVid {
    margin-bottom: 45px;
  }
}

@media screen and (max-width: 550px) {
  .dayOutUserCaseImage1, .dayOutUserCaseImage2 {
    width: 100%;
    transition: all ease .3s;
  }
}

.youtubePinsUserCaseImage1 {
  width: 80%;
  transition: all ease.3s;
  box-shadow: none;
}

@media screen and (max-width: 900px) {
  .youtubePinsUserCaseImage1 {
    width: 100%;
    transition: all ease.3s;
  }
}

.yelpPersonaImg {
  width: 100%;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid #B52F0F;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  transition: all ease.3s;
}

.ikeaPersonaImg, .ikeaJourneyMap, .sacImg {
  border-radius: 10px;
  width: 100%;
  box-shadow: none;
  border: 1px solid black;
}

.askdataContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;

  height: auto;
  padding: 0;
  transition: all ease .3s;
}

.askdataImg:first-child {
  margin-bottom: 40px;
}

@media screen and (max-width: 1050px) {
  .askdataContainer {
    max-width: 100vw;
    padding: 0px 30px;
    transition: all ease .3s;
  }
}

.sacImg {
  border-radius: 0;
}

.askdataImg {
  border-radius: 10px;
  width: 100%;
  height: auto;
  border: 1px solid black;
  
  /* filter: drop-shadow(0px 0px 50px rgba(24, 98, 153, 0.15)); */

  /* filter: 
    drop-shadow(0px 20px 48px #7489A615) 
    drop-shadow(0px 3px 6px #3B3A4508);
  -webkit-filter: 
    drop-shadow(0px 20px 48px #7489A615) 
    drop-shadow(0px 3px 6px #3B3A4508); */
}

/* .sacGeoImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-shadow: none;
  transition: all ease.3s;
} */

.sacWidgetImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-shadow: none;
  transition: all ease.3s;
}

.sacMappingImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-shadow: none;
  border-radius: 10px;
  border: 1px solid black;
  transition: all ease.3s;
}

.sacIconImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  box-shadow: none;
  transition: all ease.3s;
}

@media screen and (max-width: 600px) {
  .sacIconImg {
    width: 100%;
    transition: all ease.3s;
  }
  .sacGeoImg {
    width: 100%;
    transition: all ease.3s;
  }
}

@media screen and (max-width: 1300px) {
  .ikeaPersonaImg, .sacImg {
    width: 100%;
  }
}

@media screen and (max-width: 750px) {
  .vcPersonaImg {
    width: 100%;
  }
}

@media screen and (max-width: 1300px) {
  .yelpPersonaImg {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 940px) {
  .yelpPersonaImg {
    width: 100%;
  }
}

@media screen and (max-width: 1000px) {
  .vcJourneyMap1, .vcJourneyMap2 {
    width: 100%;
  }
}

.vcJourneyMap:first-of-type {
  margin-bottom: 50px;
}

.vcJourneyMapRevised {
  box-shadow: none;
}

@media screen and (max-width: 1000px) {
  .vcJourneyMapRevised {
    width: 100%;
  }
}

.vcSketches {
  width: 100%;
  box-shadow: none;
  mix-blend-mode: darken;
}

@media screen and (max-width: 1100px) {
  .vcSketches {
    width: 70%;
  }
}

@media screen and (max-width: 550px) {
  .vcSketches {
    width: 100%;
  }
}

.vcSketches:first-of-type {
  margin-bottom: 40px;
}

.vcSketchesCap {
  margin-top: 30px;
}

.fantasqueBoldedText {
  font-family: "fantasque-bold", Courier, monospace;
  font-style: normal;
}

.manropeBoldedText {
  font-family: "manrope-semibold", Arial, sans-serif;
  font-style: normal;
}

.manropeLightText {
  font-family: "manrope-light", Arial, sans-serif;
  font-style: normal;
}

.montrealBoldedText {
  font-family: "neue-montreal-bold", Arial, Helvetica, sans-serif;
  font-style: normal;
}

.imgAndTextPar {
  /* background-color: orange; */
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* for single screen videos/screenshots */

.leftImg {
  width: 250px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0px;
}

@media screen and (max-width: 520px) {
  .leftImg {
    width: 300px;
  }
}

@media screen and (max-width: 550px) {
  .leftImg, .leftImgDesktop {
    justify-content: center;
  }
  .rightText, .rightTextDesktop {
    font-size: calc(17.5em/16);
  }
}

.rightText {
  width: 50%;
  margin: 0px 0px 20px 50px;
}

.rightTextDesktop {
  width: 40%;
  margin: 0px 0px 20px 50px;
}

/* drop shadow style */
.screen {
  height: auto;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08);
}

/* @media screen and (max-width: 550px) {
  .screen {
    width: 260px;
  }
} */

.calendarIcons {
  /* background: orange; */
  max-width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -20px;
}

.calendarCropFig {
  margin: 20px 20px 0 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.calendarCrop {
  position: relative;
  align-self: center;
  height: 130px;
  width: auto;
}

.calendarCropCaption {
  font-family: "fantasque-regular", Courier, monospace;
  margin-top: 10px;
  text-align: center;
  font-size: .8em;
}

.endingEventIcon, .plannedEventIcon {
  color: #FF6F6F;
}

.newEventIcon {
  color: #7BA8AD;
}

@media screen and (max-width: 550px) {
  .calendarCrop {
    height: 60px;
  }
  .calendarCropCaption {
    font-size: .8em;
  }
}

.informativeParSec {
  margin-bottom: 0px;
}

.infoButtonImg {
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -20px;
}

/* .infoDiagram {
  height: 400px;
  width: auto;
  box-shadow: none;
  transition: all ease .3s;
} */

.infoDiagram2 {
  width: 100px;
}

.infoButtonUnique {
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  z-index: 0;
}

@media screen and (max-width: 550px) {
  .infoButtonUnique {
    margin-top: -19px;
  }
}

@media screen and (max-width: 700px) {
  .infoDiagram2 {
    display: none;
  }
  .informativeCalVid {
    margin-bottom: 100px;
  }
}

.kevinGoingImage, .kevinGoingImage2 {
  width: 100%;
  height: auto;
  margin: 0px 0px 20px 0px;
}

.kevinGoingImage2 {
  margin: 0px;
  border-radius: 7.5px;
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
}

.shareAndPlanImg {
  /* max-width: 100%; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  width: 250px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}

@media screen and (max-width: 550px) {
  .shareAndPlanImg {
    justify-content: center;
    width: 300px;
  }
}

/* youtube page styling start */

.youtubeColorBlock {
  position: relative;
  z-index: 0;
  background: #dd2e2e;
  width: 25%;
  height: 200px;
  margin-top: 200px;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .youtubeColorBlock {
  height: 190px;
  transition: all ease .3s;
  }
}

@media screen and (max-width: 550px) {
  .youtubeColorBlock {
    display: none;
  }
}

.youtubeColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #dd2e2e;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
  display: none;
}

.ytTextLink::after {
  background-color: #dd2e2e;
}

/* @media screen and (max-width: 550px) {
  .youtubeColorBlock2 {
    display: block;
  }
} */

.youtubeProjectTitle {
  margin-top: -310px;
}

@media screen and (max-width: 1681px) {
  .youtubeProjectTitle {
    margin-top: -300px;
  }
}

@media screen and (max-width: 550px) {
  .youtubeProjectTitle {
    margin-top: 180px;
  }
}

.dashieScreen {
  width: 100%;
  margin-bottom: 20px;
}

.pinOverviewImgContainter {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  justify-content: center;
}

.pinOverviewImg {
  position: relative;
  height: 400px;
  margin: 0 10px 20px 10px;
  border-radius: 7.5px;
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
  transition: all ease .3s;
}

@media screen and (max-width: 520px) {
  .pinOverviewImg {
    width: 80%;
    height: auto;
    transition: all ease .3s;
  }
}

video {
  position: relative;
  z-index: 0;
}

.likeButtonDiagram {
  display: block;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 110px;
  box-shadow: none;
  transition: all ease .3s;
}

@media screen and (max-width: 550px) {
  .likeButtonDiagram {
    margin-top: -50px;
    width: 90%;
    transition: all ease.3s;
  }
}

.timestampImg {
  position: relative;
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
  border-radius: 10px;
  border: 1px solid #1f1f1f;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  transition: all ease .3s;
}

@media screen and (max-width: 550px) {
  .timestampImg {
    width: 100%;
    transition: all ease .3s;
  }
}

/* .boldedPar {
  font-size: 1.3125em;
  line-height: 50px;
}

@media screen and (max-width: 450px) {
  .boldedPar {
    line-height: 40px;
  }
} */

.pinMenuContainer {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pinMenuImg {
  height: 500px;
  width: auto;
  border-radius: 7.5px;
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
  margin: 0px 5px 10px 5px;
}

@media screen and (max-width: 635px) {
  .pinMenuImgAndCap {
    width: 45%;
    margin-top: 20px;
    height: auto;
  }
  .pinMenuImg {
    width: 100%;
    height: auto;
  }
}

.pinMenuCaption {
  width: 100%;
  margin-top: 15px;
}

.ytTextToken {
  font-family: 'neue-montreal-med', Arial, Helvetica, sans-serif;
  padding: 2px 7px;
  border-radius: 5px;
  color: rgb(233, 11, 11);
  background-color: #FFC9C9;
}

.ytBoldedPar {
  font-family: 'neue-montreal-med', Arial, Helvetica, sans-serif;
  font-size: calc(24em/16);
  color: rgb(233, 11, 11);
  line-height: 160%;
}

/* venture compass page styling start */

.vcColorBlock {
  position: relative;
  z-index: 0;
  background: #253e56;
  width: 25%;
  height: 330px;
  margin-top: 200px;
  display: block;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .vcColorBlock {
    height: 275px;
  }
}

@media screen and (max-width: 550px) {
  .vcColorBlock {
    display: none;
  }
}

.vcColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #253e56;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

/* @media screen and (max-width: 550px) {
  .vcColorBlock2 {
    display: block;
  }
} */

.vcTextLink::after {
  background-color: #2A3E55;
}

.vcCapLinkText {
  color: #828282;
}

.vcProjectTitle {
  margin-top: 100px;
}

@media screen and (max-width: 530px) {
  .vcProjectTitle {
    margin-top: 60px;
  }
}

.vcVideo {
  display: block;
  position: relative;
  width: 100%;
  height: 350px;
  transition: all ease .3s;
  border-radius: 7.5px;
}

@media screen and (max-width: 650px) {
  .vcVideo {
    height: 300px;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 500px) {
  .vcVideo {
    height: 200px;
    transition: all ease .3s;
  }
}

.vc-larger-container {
  max-width: 900px;
  margin: auto;
}

.vc-updated-container {
  flex-wrap: wrap;
  width: 100%;
}

.vc-updated-img {
  border-radius: 20px;
}

/* yelp page styling start */

.yelpColorBlock {
  position: relative;
  z-index: 0;
  background: #c41200;
  width: 25%;
  height: 190px;
  margin-top: 200px;
  display: block;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .yelpColorBlock {
    height: 180px;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 550px) {
  .yelpColorBlock {
    display: none;
  }
}

.yelpColorBlock2 {
  position: absolute;
  z-index: 8;
  background: #c41200;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
  display: none;
}

@media screen and (max-width: 550px) {
  .yelpColorBlock2 {
    display: block;
  }
}

.yelpProjectTitle {
  margin-top: -305px;
  font-size: 2.5em;
}

@media screen and (max-width: 1681px) {
  .yelpProjectTitle {
    margin-top: -295px;
  }
}

@media screen and (max-width: 550px) {
  .yelpProjectTitle {
    margin-top: 180px;
  }
}

/* @media screen and (min-width: 550px) {
  .yelpProjectTitle {
    margin-top: 0;
  }
} */

.yelpKeyInfoSection {
  margin-top: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  /* background: orange; */
  width: 100%;
}

.yelpPageFigureContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px 0;
}

.yelpPageSecionImage {
  display: block;
  width: 250px;
  height: auto;
  border-radius: 7.5px;
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
}

.yelpPageSectionCaption {
  margin-top: 20px;
  text-align: center;
  margin: 20px 0 0 50;
}

.yelpPageSectionFigureText {
  font-family: "fantasque-reg", Courier, monospace;
  text-align: center;
  font-size: .625em;
  color: #828282;
}

@media screen and (max-width: 635px) {
  .cardCaption {
    margin-top: 10px;
  }
  .mapCaption, .photoCaption {
    margin-top: -40px;
  }
  .reviewCaption {
    margin-top: -20px;
  }
  .yelpPageSectionFigureText {
    font-size: .8em;
  }
}

.textLink {
  z-index: 0;
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: #1f1f1f;
  overflow-wrap: break-word;
  /* word-break: break-all; */
  /* padding: 0 0px; */
  transition: color ease 0.3s;
}

.textLink::after {
  content: '';
  position: absolute;
  z-index: -10;
  /* -webkit-transform: translate(-50%,0); */
  width: 100%;
  height: 10%;
  left: 0;
  bottom: 0;
  transition: all ease 0.3s;
}

.textLink:hover {
  color: white;
  cursor: none;
}

@media screen and (max-width: 550px) {
  html, a {
    cursor: auto;
  }
  .clearGrowButton:hover, .navLink:hover {
    cursor: pointer;
  }
}

.textLink:hover::after {
  height: 100%;
}

.yelpTextLink::after {
  background-color: #c41200;
}

/* bottom project buttons styling start */

.bottomSection {
  margin-top: 200px;
  margin-bottom: 0;
  padding-bottom: 50px;
}

@media screen and (max-width: 530px) {
  .bottomSection {
    padding-bottom: 30px;
  }
}

.bottomProjectButtonGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  flex-direction: row;
  color: white;
}

.bottomProjectButton {
  margin: 0;
}

.dayOutProjectButton, .dayOutProjectButton:visited  {
  background: #ff6f6f;
  text-decoration: none;
  color: white;
}

.dayOutProjectButton:link {
  color: white;
}

.ytProjectButton, .ytProjectButton:visited {
  background: #dd2e2e;
  text-decoration: none;
  color: white;
}

.ytProjectButton:link {
  color: white;
}

.vcProjectButton, .vcProjectButton:visited {
  background: #253e56;
  text-decoration: none;
  color: white;
}

.vcProjectButton:link {
  color: white;
}

.yelpProjectButton, .yelpProjectButton:visited {
  background: #c41200;
  text-decoration: none;
  color: white;
}

.yelpProjectButton:link {
  color: white;
}

.cnhProjectButton, .cnhProjectButton:visited {
  background: #ACC6C3;
  text-decoration: none;
  color: white;
}

.cnhProjectButton:link {
  color: white;
}

.ttProjectButton, .ttProjectButton:visited {
  background: #FE2C53;
  text-decoration: none;
  color: white;
}

.ttProjectButton:link {
  color: white;
}

.workshopProjectButton, .workshopProjectButton:visited {
  background: #E24C2B;
  text-decoration: none;
  color: white;
}

.workshopProjectButton:link {
  color: white;
}

.gmapProjectButton, .gmapProjectButton:visited {
  background: #4D9F4B;
  text-decoration: none;
  color: white;
}

.gmapProjectButton:link {
  color: white;
}

.ikeaProjectButton, .ikeaProjectButton:visited {
  background: #FFC808;
  text-decoration: none;
  color: white;
}

.ikeaProjectButton:link {
  color: white;
}

.csProjectButton {
  background: #397F5B;
  text-decoration: none;
}

.csProjectButton:visited, .csProjectButton:link {
  color: white;
}

.sapProjectButton, .sapProjectButton:visited {
  background: #558ECB;
  text-decoration: none;
  color: white;
}

.sapProjectButton:link {
  color: white;
}

.cheapEatsProjectButton {
  background: #416A28;
  text-decoration: none;
}

.cheapEatsProjectButton:visited, .cheapEatsProjectButton:link {
  color: white;
}

/* buttons v2 */

.bigProjectButtons {
  position: relative;
  width: 940px;
  height: auto;
  margin-top: 300px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all ease .3s;
}

.bigButtonContainer, .bannerContainer {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
}

.sapButtonContainer, .csButtonContainer {
  width:100%;
  height: auto;
  margin-bottom: 100px;
}

.bigButtonRightContent, .bannerButtonRightContent {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 206px;
}

.bigButtonH1, .bannerH1 {
  font-family: "manrope-extrabold", Courier, monospace;
  letter-spacing: .05em;
  font-size: calc(18em/16);
  /* background-color: orange; */
  height: auto;
  margin: 0;
}

.bigButtonH2 {
  font-family: "manrope-regular", Courier, monospace;
  font-size: calc(12em/16);
  letter-spacing: .05em;
  margin: 0;
}

.bigButtonH2Line {
  margin: 4px 0px 20px 0px;
}

.bigButtonH2LineSap {
  width: 105px;
  border-top: 1px solid #1661BE;
}

.bigButtonH2LineCs {
  width: 174px;
  border-top: 1px solid #397F5B;
}

.bigButtonH2LineIkea {
  width: 155px;
  border-top: 1px solid #E5BB29;
}

.bigButtonText, .bannerText {
  font-family: "manrope-light", Courier, monospace;
  font-size: calc(16em/16);
  letter-spacing: .06em;
}

.leftBigButton, .leftBannerButton {
  /* border-radius: 10px; */
  position: relative;
  width: 70%;
  height: auto;
  transition: all ease .3s;
}

.projectButtons2 {
  position: relative;
  width: 940px;
  height: auto;
  margin-top: 250px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  transition: all ease .3s;
}

.bannerContainer {
  position: relative;
  box-shadow: none;
  height: 240px;
  margin-bottom: 80px;
  transition: all ease .3s;
}

.bannerH1 {
  font-size: 1.1em;
}

.bannerText {
  font-size: .9em;
}

.homeButtonContainer {
  position: relative;
  box-shadow: none;
  height: 220px;
  margin-bottom: 50px;
  transition: all ease .3s;
}

.leftHomeButton, .rightHomeButton {
  width: 220px;
  height: auto;
  margin: 0;
  transition: all ease .3s;
}

.rightHomeButton {
  position: relative;
  margin-left: -7px;
}

.sapOverlay {
  background-color: rgba(22, 97, 190, 0.51);
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  transition: all ease .3s;
}

.sapButtonContainer:hover .sapOverlay {
  background-color: rgba(229, 187, 41, 0);
  transition: all ease .3s;
}

.csOverlay {
  background-color: rgba(57, 127, 91, 0.51);
  position: absolute;
  margin-top: 0px;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  transition: all ease .3s;
}

.csButtonContainer:hover .csOverlay {
  background-color: rgba(57, 127, 91, 0);
  transition: all ease .3s;
}

.ikeaOverlay {
  background-color: rgba(229, 187, 41, 0.51);
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  transition: all ease .3s;
}

.ikeaButtonContainer:hover .ikeaOverlay {
  background: rgba(229, 187, 41, 0);
  transition: all ease .3s;
}

.cnhOverlay {
  background-color: rgba(83, 122, 117, 0.51);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease .3s;
}

.cnhButtonContainer:hover .cnhOverlay {
  background: rgba(83, 122, 117, 0);
  transition: all ease .3s;
}

.vcOverlay {
  background-color: rgba(37, 62, 86, 0.51);
  position: absolute;
  margin-top: 1px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease .3s;
}

.vcButtonContainer:hover .vcOverlay {
  background: rgba(37, 62, 86, 0);
  transition: all ease .3s;
}

.yelpOverlay {
  background-color: rgba(161, 59, 49, 0.51);
  position: absolute;
  margin-top: .5px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease .3s;
}

.yelpButtonContainer:hover .yelpOverlay {
  background-color: rgba(161, 59, 49, 0);
  transition: all ease .3s;
}

.rightyelpButton, .rightvcButton {
  margin-top: 1px;
}

.dayoutOverlay {
  background-color: rgba(221, 97, 93, 0.51);
  position: absolute;
  margin-top: 0px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease .3s;
}

.dayoutButtonContainer:hover .dayoutOverlay {
  background-color: rgba(221, 97, 93, 0);
  transition: all ease .3s;
}

.ytPinsButtonContainer:hover .ytPinsOverlay {
  background-color: rgba(189, 55, 55, 0);
  transition: all ease .3s;
}

.ytPinsOverlay {
  background-color: rgba(189, 55, 55, 0.51);
  position: absolute;
  margin-top: 0px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all ease .3s;
}

.csButtonContainer:hover .csOverlay {
  background-color: rgba(57, 127, 91, 0);
  transition: all ease .3s;
}

@media screen and (max-width: 530px) {
  .nextButtonContainer {
    bottom: 20px;
    transition: all ease .3s
  }
  .nextButton {
    bottom: 0px;
    transition: all ease .3s
  }
  .homeButtonContainer {
    height: 175px;
    margin-bottom: 30px;
    transition: all ease .3s;
  }
  .leftHomeButton, .rightHomeButton {
    width: 175px;
    transition: all ease .3s;
  }
  .rightHomeButton {
    margin-left: -5px;
  }
  .rightvcButton, .rightyelpButton {
    margin-top: 1px;
  }
}


/* cnh page styling start */

.cnhColorBlock {
  position: relative;
  z-index: 0;
  background: #BBCECC;
  width: 25%;
  height: 320px;
  margin-top: 200px;
  display: block;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .cnhColorBlock {
    height: 300px;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 550px) {
  .cnhColorBlock {
    display: none;
  }
}

.cnhColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #BBCECC;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

@media screen and (max-width: 530px) {
  .cnhColorBlock2 {
    display: block;
  }
}

.cnhProjectTitle {
  margin-top: -435px;
}

@media screen and (max-width: 1681px) {
  .cnhProjectTitle {
    margin-top: -415px;
  }
}

@media screen and (max-width: 530px) {
  .cnhProjectTitle {
    margin-top: 180px;
  }
}

.cnhTextLink::after {
  background-color: #BBCECC;
}

.vcUserJourneyCap {
  margin-top: 20px;
}

.cnhProgramDiagram {
  display: block;
  width: 500px;
  margin-top: 100px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
}

@media screen and (max-width: 630px) {
  .cnhProgramDiagram {
    width: 100%;
    transition: all ease .3s;
  }
}

.cnhChat {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: none;
  width: 40%;
}

@media screen and (max-width: 600px) {
  .cnhChat {
    width: 50%;
  }
}

.cnhJourneyMap1, .cnhJourneyMap2 {
  width: 100%;
  border: none;
  mix-blend-mode: darken;
  border-radius: 7.5px;
}

@media screen and (max-width: 1310px) {
  .cnhJourneyMap {
    width: 100%;
    height: auto;
  }
}

.cnhWorkshopActivity {
  display: block;
  width: 80%;
  border-radius: 7.5px;
  box-shadow: none;
  margin-right: auto;
  margin-left: auto;
}

.cnhWorkshopDiagram {
  display: block;
  width: 80%;
  box-shadow: none;
  border-radius: 0;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 600px) {
  .cnhWorkshopActivity, .cnhWorkshopDiagram {
    width: 100%;
  }
}

.cnhQuoteContainer {
  display: flex;
  flex-direction: row;
}

.cnhBigQuote {
  font-family: "manrope-extrabold", Arial, sans-serif;
  font-size: 1.2em;
  line-height: 2em;
}

.cnhBigQuote:first-of-type {
  margin-right: 50px;
}

@media screen and (max-width: 550px) {
  .cnhBigQuote {
    font-size: 1em;
  }
}

.cnhTemplateContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.cnhRecipeTemplate {
  position: relative;
  width: 80%;
  margin: auto;
  margin-bottom: 40px;
  border: none;
  border-radius: 7.5px;
  box-shadow: none;
  border: 1px solid #656565;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
}

.cnhOverviewImgContainer {
  justify-content: space-between;
}

.cnhMobileImgContainer {
  margin-top: 140px;
}

/* ikea styling start */

.ikeaColorBlock {
  position: relative;
  z-index: 0;
  background: #FFDA5B;
  width: 25%;
  height: 200px;
  margin-top: 200px;
}

@media screen and (max-width: 1681px) {
  .ikeaColorBlock {
    height: 185px;
    transition: all ease .3s;
  }
}

.ikeaColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #FFDA5B;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

/* @media screen and (max-width: 530px) {
  .ikeaColorBlock2 {
    display: block;
  }
} */

.ikeaProjectTitle {
  margin-top: 100px;
}

@media screen and (max-width: 550px) {
  .ikeaProjectTitle {
    margin-top: 60px;
    transition: all ease .3s;
  }
}

/* .ikeaVideoContainer {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  height: auto;
  background: orange;
} */

.ikeaVideo {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  transition: all ease .3s;
}

.ikeaFirstImgs {
  /* background: orange; */
  display: flex;
  width: 2000px;
  margin-left: auto;
  margin-right: auto;
}

.ikeaTextLink::after {
  background-color: #FFC808;
}

.ikeaBoldedPar {
  font-family: 'neue-montreal-med', Arial, Helvetica, sans-serif;
  font-size: calc(24em/16);
  color: #FF725B;
  line-height: 160%;
}

.ikeaMeltdownImg {
  width: 100%;
  box-shadow: none;
}

@media screen and (max-width: 530px) {
  .ikeaMeltdownImg {
    width: 100%;
  }
}

.ikeaIconImg {
  width: 100%;
}

.ikeaStyleImg {
  width: 100%;
  border-radius: 10px;
  box-shadow: none;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  /* border: 1px solid #F98876; */
  border: 1px solid black;
  transition: all ease .3s;
}

.sixImgContainer {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  gap: 40px;
  justify-content: space-around;
  align-content: space-around;
  transition: all ease .3s;
}

.row1, .row2, .row3 {
  display: flex;
  width: 100%;
  height: 280px;
  flex-direction: row;
  justify-content: space-between;
  transition: all ease .3s;
}

.row1 {
  height: 275px;
  transition: all ease .3s;
}

.row2 {
  height: 270px;
  transition: all ease .3s;
}

.row3 {
  height: 290px;
  transition: all ease .3s;
}

.ikeaIterationImg {
  height: 100%;
  margin-bottom: 40px;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  /* box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08); */
  box-shadow: none;
  border: 1px solid #656565;
  border-radius: 7.5px;
  transition: all ease .3s;
}

@media screen and (max-width: 1110px) {
  .sixImgContainer {
    gap: 0;
    align-content: flex-start;
    margin-bottom: -40px;
    transition: all ease .3s;
  }
  .row1, .row2, .row3 {
    height: auto;
    flex-direction: column;
    transition: all ease .3s;
  }
  .ikeaIterationImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
    transition: all ease .3s;
  }
}

@media screen and (max-width: 660px) {
  .ikeaIterationImg {
    width: 100%;
    transition: all ease .3s;
  }
}

.imgAndTextParDesktop {
  /* background-color: orange; */
  max-width: 80%;
  margin-top: 0px;
  display: flex;
  align-items: center;
  /* flex-direction: column; */
}

@media screen and (max-width: 700px) {
  .imgAndTextParDesktop, .imgAndTextPar {
    max-width: 100%;
    flex-direction: column-reverse;
  }
  .rightText, .rightTextDesktop {
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
}


.leftImgDesktop {
  max-width: 1000px;
  /* margin-top:-50px; */
  /* display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0px; */
  /* background: orange; */
}

.desktopVidContainer {
  max-width: 100%;
  /* background: orange; */
}

.ikeaPrototypeVid {
  position: relative;
  width: 1000px;
  margin-right: auto;
  margin-left: auto;
  transform: scale(1.01);
  transform-origin: top center;
}

/* course studio styling start */


.csColorBlock {
  position: relative;
  z-index: 0;
  width: 25%;
  height: 225px;
  background: #397F5B;
  margin-top: 200px;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .csColorBlock {
    height: 220px;
    transition: all ease .3s;
  }
}

.csColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #397F5B;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

/* @media screen and (max-width: 530px) {
  .csColorBlock2 {
    display: block;
  }
} */

.mainProjectTitle {
  margin-top: 60px;
  transition: all ease .3s;
}

@media screen and (max-width: 530px) {
  .mainProjectTitle {
    margin-top: 30px;
    transition: all ease .3s;
  }
}

.csProjectTitle {
  transition: all ease .3s;
}

.csTextLink::after {
  background-color: #397F5B;
}

.csFeatureImg {
  height: 350px;
  width: auto;
  border: none;
  margin: 0 20px 0 20px;
  box-shadow: none;
  border-radius: 0;
}

@media screen and (max-width: 530px) {
  .csFeatureImg {
    width: 100%;
    height: auto;
  }
}

.woboSketches {
  position: relative;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 60px;

}

.woboSketch {
  display: block;
  mix-blend-mode: darken;
  position: relative;
  margin:auto;

  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
}

.woboSketch:nth-child(-n + 4) {
  height: 400px;
}

.woboSketch:nth-child(n + 4) {
  height: 425px;
}

.woboWires {
  max-width: 1000px;

  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media screen and (max-width: 530px) {
  .woboWires {
    gap: 30px;
  }
}

.woboWire {
  border-radius: 7.5px;
  width: 100%;
  height: auto;
}

.woboSystem {
  max-width: 1000px;
  height: auto;
}

.woboSystemImg {
  width: 100%;
  height: auto;
  border-radius: 7.5px;
}

.csAgency {
  max-width: 1000px;
  height: auto;
}

.csAgencyImg {
  width: 100%;
  height: auto;
  border-radius: 7.5px;
  /* box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); */
  border: 1px solid black;
  box-shadow: none;
}

.parLessMargin {
  margin-top: -50px;
}

/* sap styling start */

.smallEmojiText {
  font-style: normal;
  font-size: 0.5em;
}

.sapColorBlock {
  position: relative;
  z-index: 0;
  background: #558ECB;
  width: 25%;
  height: 440px;
  margin-top: 200px;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .sapColorBlock {
    height: 415px;
    transition: all ease .3s;
  }
}

.sapColorBlock2 {
  display: none;
  position: absolute;
  z-index: 1;
  background: #558ECB;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

/* @media screen and (max-width: 530px) {
  .sapColorBlock2 {
    display: block;
  }
} */

.sapProjectTitle {
  /* margin-top: -547px; */
  margin-top: 100px;
  transition: all ease .3s;
}

@media screen and (max-width: 550px) {
  .sapProjectTitle {
    margin-top: 60px;
    transition: all ease .3s;
  }
}

.sapTextLink::after {
  background-color: #558ECB;
}

.sacImgContainer {
  display: flex;
  flex-direction: column;
  gap: 30px;

  width: 100%;
  padding: 0;
  transition: all ease .3s;
  /* background: coral; */
}

.sacThemeImg {
  border-radius: 10px;
  border: 1px solid #1f1f1f;
  width: 100%;
  height: auto;
}

/* tiktok styling start */


.ttColorBlock {
  position: relative;
  z-index: 0;
  width: 25%;
  height: 360px;
  background: #FE2C53;
  margin-top: 200px;
  transition: all ease .3s;
}

@media screen and (max-width: 1681px) {
  .ttColorBlock {
    height: 340px;
    transition: all ease .3s;
  }
}

.ttColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #FE2C53;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

/* @media screen and (max-width: 530px) {
  .ttColorBlock2 {
    height: 50px;
    display: block;
  }
} */

@media screen and (max-width: 1681px) {
  .ttProjectTitle {
    margin-top: -450px;
    transition: all ease .3s;
  }
}

.ttMobileImgContainer {
  gap: 40px;
}

.tt3Images {
  height: 580px;
  border-radius: 18px;
  transition: all ease .3s;
  margin: 0;
}

@media screen and (max-width: 530px) {
  .tt3Images {
    width: 70%;
    height: auto;
    transition: all ease .3s;
  }
}

.ttTextLink::after {
  background-color: #FE2C53;
}

.ttCapLinkText, .gmapCapLinkText {
  color: #828282;
}

.ttLargerImgContainer {
  max-width: 900px;
  border-radius: 10px;
}

.ttLargerImg {
  display: block;
  width: 100%;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #FE2C53;
  box-shadow: none;
}

.desktopShow {
  display: block;
}

.mobileShow {
  display: none;
}

@media screen and (max-width: 530px) {
  .desktopShow {
    display: none;
  }
  .mobileShow {
    display: block;
  }
}

.ttQuoteContainer {
  width: 100%;

}

.ttQuote1 {
  color: #FE2C53;
  font-family: "neue-montreal-med", Arial, Helvetica, sans-serif;
  font-size: calc(24em/16);
  line-height: 160%;
}

.ttQuote2 {
  color: #FE2C53;
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  font-size: calc(16em/16);
  line-height: 160%;
}

.ttModImg {
  border-radius: 22px;
}

@media screen and (max-width: 530px) {
  .ttModImg {
    border-radius: 30px;
  }
}

@media screen and (max-width: 530px) {
  .ttSmallerTitle {
    font-size: 1.9em;
  }
}

.ttMistrustImg {
  width: 100%;
  height: auto;
  /* box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08); */
  /* box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.08); */
  /* filter: 
    drop-shadow(0px 20px 48px #48484812) 
    drop-shadow(0px 3px 6px #3B3A4508);
  -webkit-filter: 
    drop-shadow(0px 20px 48px #48484812) 
    drop-shadow(0px 3px 6px #3B3A4508); */
}

.ttTwitterContainer1 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.ttTwitterContainer2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.ttTwitterImg {
  display: block;
  border-radius: 10px;
  width: 400px;
  height: auto;
  box-shadow: none;
  margin: 0;
}

.mobileContentNotice {
  font-family: "neue-montreal-regular", Arial, Helvetica, sans-serif;
  display: none;
}

@media screen and (max-width: 530px) {
  .mobileContentNotice {
    display: inline;
  }
}

@media screen and (max-width: 530px) {
  .ttTwitterContainer2 {
    gap: 30px;
    transition: all ease .3s;
  }
  .ttTwitterImg {
    width: 90%;
    transition: all ease .3s;
  }
}

.ttInnaImg {
  width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 0;
  box-shadow: 0 20px 48px rgba(67,65,79,.12), 0 3px 6px rgba(59,58,69,.08);
}


/* google maps styling start */

.fourImgContainer {
  gap: 40px;
}

@media screen and (max-width: 1300px) {
  .fourImgContainer {
    flex-wrap: wrap;
  }
}

.gmapPreviewImg {
  border-radius: 18px;
}

.gmapColorBlock2 {
  display: none;
  position: absolute;
  z-index: 8;
  background: #4D9F4B;
  top: 0px;
  width: 100%;
  height: 150px;
  margin-top: 0;
}

.gmapNoticePar {
  padding: 20px;
  border: 1px solid #4D9F4B;
  border-radius: 10px;
}

.gmapTextLink::after {
  background-color: #4D9F4B;
}

.deliverectImg {
  width: 100%;
  border-radius: 10px;
  border: 1px solid black;
}

.gmapTextToken {
  font-family: 'neue-montreal-med', Arial, Helvetica, sans-serif;
  padding: 4px 10px;
  border-radius: 7px;
  color: #2b8b28;
  background-color: #AFF1AE;
}

.gmapH2Adjustment {
  text-wrap: wrap;
}

.gmapFlowDiagram {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.gmapNativeFlowDiagram {
  display: block;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  transition: all ease .3s;
}

@media screen and (max-width: 530px) {
  .gmapNativeFlowDiagram {
    width:60%;
    transition: all ease .3s;
  }
}

.pymntsImg {
  display: block;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  border: 1px solid black;
  transition: all ease .3s;
}

@media screen and (max-width: 530px) {
  .pymntsImg {
    width: 100%;
    transition: all ease .3s;
  }
}

.gmapRedditImgContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}

.gmapRedditImg {
  width: 100%;
  border-radius: 15px;
}

.gmapCoffeeImg {
  width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 0;
  box-shadow: none;
}

/* workshop styling start */

.workshopTextLink::after {
  background-color: #DE7A64;
}

.workshopTextToken {
  font-family: 'neue-montreal-med', Arial, Helvetica, sans-serif;
  padding: 4px 10px;
  border-radius: 7px;
  color: #D92700;
  background-color: #FFD2C8;
}

.workshopNoticePar {
  padding: 20px;
  border: 1px solid #D92700;
  border-radius: 10px;
}

.workshopWebsite1 {
  width: 100%;
  border-radius: 10px;
  border: 1px solid black;
}

.workshopGraphics {
  width: 100%;
  margin-bottom: 40px;
}

.workshopValueGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.valueGraphic {
  width: 140px;
  height: auto;
}

.valueGroupText {
  width: 70%;
}

@media screen and (max-width: 550px) {
  .workshopValueGroup {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
  }
  .valueGraphic {
    width: 80px;
    height: auto;
  }
  .valueGroupText {
    width: 100%;
  }
}

.valueGroupText * {
  margin-top: 0px;
  /* margin-bottom: 0px; */
}

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

.workshopInspoContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

.workshopInspoImg {
  border-radius: 10px;
  width: calc(50% - 10px);
  /* width: 45%; */
  height: auto;
}

@media screen and (max-width: 500px) {
  .workshopInspoImg {
    width: 100%;
  }
}

.workshopExploration1 {
  width: 100%;
  border-radius: 10px;
}

.workshopConceptSection {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: flex-start;
}

.workshopLogoAndText {
  width: calc(50% - 30px);
}

@media screen and (max-width: 500px) {
  .workshopConceptSection {
    flex-direction: column;
  }
  .workshopLogoAndText {
    width: 100%;
  }
}

.workshopExploration3 {
  width: 100%;
  mix-blend-mode: darken;
}

.imageMoreMargin {
  margin-bottom: 20px;
}

.workshopGraphicExploration {
  border-radius: 10px;
  width: 100%;
}

.workshopGraphicExploration:first-of-type {
  margin-bottom: 20px;
}

.workshopGraphicGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 100px;
}

/* .workshopBuildingGraphic, .workshopCraftGraphic {
  height: 300px; 
} */

.workshopMobileGraphic {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.workshopBrandContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.howWeWorkImg, .brandGuideImg {
  border-radius: 10px;
  border: 1px solid black;
}

/* .howWeWorkImg {
  margin-bottom: 20px;
} */

/* cheap eats styling start */

.cheapNoticePar {
  padding: 20px;
  border: 1px solid #416A28;
  border-radius: 10px;
}

.cheapEatsContextContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 46px;
}

.cheapEatsContext {
  width: 320px;
}

@media screen and (max-width: 790px) {
  .cheapEatsContext {
    width: 100%;
  }
}

.cheapEatsContextImg {
  width: 46px;
  height: 46px;
}

.cheapEatsLargerScreen {
  width: 280px;
}

@media screen and (max-width: 580px) {
  .cheapEatsLargerScreen {
    width: 100%;
    height: auto;
    transition: all ease .3s;
  }
}

.mobileLargeBorderRad {
  border-radius: 40px;
}

.cheapEatsImgCrop {
  object-fit: cover;
  height: 590px;
  transition: all ease .3s;
}

@media screen and (max-width: 580px) {
  .cheapEatsImgCrop {
    width: 90%;
    height: auto;
    transition: all ease .3s;
  }
  .mobileLargeBorderRad {
    border-radius: 46px;
  }
  /* .cheapEatsImgCrop {
    height: 588px;
    transition: all ease .3s;
  } */
   /* .cheapMobileHeightCrop {
    height: 660px;
   } */
}