/* Dotted background cursor-tracking glow for fold1 */
.fold1::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(199, 159, 94, 0.8) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(circle 200px at var(--mouse-x, -100px) var(--mouse-y, -100px),
            black 0%, transparent 100%);
    mask-image: radial-gradient(circle 200px at var(--mouse-x, -100px) var(--mouse-y, -100px),
            black 0%, transparent 100%);
}

  /* Neue Montereal font load */

  /* @font-face {
      font-family: Light;
      src: url(Font/NeueMontreal/Light\ 300.otf);
  }

  @font-face {
      font-family: Light Italic;
      src: url(Font/NeueMontreal/Light\ Italic\ 300.otf);
  }

  @font-face {
      font-family: Regular;
      src: url(Font/NeueMontreal/Regular\ 400.otf);
  }

  @font-face {
      font-family: Italic;
      src: url(Font/NeueMontreal/Italic\ 400.otf);
  }

  @font-face {
      font-family: Medium;
      src: url(Font/NeueMontreal/Medium\ 500.otf);

  }

  @font-face {
      font-family: Mediumitalic;
      src: url(Font/NeueMontreal/Medium\ Italic\ 500.otf);
  }


  @font-face {
      font-family: Bold;
      src: url(Font/NeueMontreal/Bold.otf);
  }


  @font-face {
      font-family: Bolditalic;
      src: url(Font/NeueMontreal/Bold\ Italic\ 700.otf);

  } */

  /* ---- */

  @font-face {
      font-family: Light;
      src: url(Font/Productsans/ProductSans-Light.ttf);

  }

  @font-face {
      font-family: Light Italic;
      src: url(Font/Productsans/ProductSans-LightItalic.ttf);
  }

  @font-face {
      font-family: Regular;
      src: url(Font/Productsans/ProductSans-Regular.ttf);
  }

  @font-face {
      font-family: Italic;
      src: url(Font/Productsans/ProductSans-Italic.ttf);
  }

  @font-face {
      font-family: Medium;
      src: url(Font/Productsans/ProductSans-Medium.ttf);

  }

  @font-face {
      font-family: Mediumitalic;
      src: url(Font/Productsans/ProductSans-MediumItalic.ttf);
  }


  @font-face {
      font-family: Bold;
      src: url(Font/Productsans/ProductSans-Bold.ttf);

  }


  @font-face {
      font-family: Bolditalic;
      src: url(Font/Productsans/ProductSans-BoldItalic.ttf);

  }

  @font-face {
      font-family: Extrabold;
      src: url(Font/Productsans/ProductSans-Black.ttf);

  }

  /* General CSS */

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      cursor: none;

      user-select: none;
      /* supported by Chrome and Opera */
      -webkit-user-select: none;
      /* Safari */
      -khtml-user-select: none;
      /* Konqueror HTML */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
  }

  /* 
body {
    scroll-snap-type: y mandatory;
} */

  body {
      overflow-x: hidden;
  }

  .header .top .logo a img {
      width: 60%;
  }

  iframe {
      width: 100vw;
      height: 40vw;

  }

  /* Large desktop */

  @media (min-width: 1601px) {

      h1 {
          font-family: Regular;
          font-size: 72px;
          line-height: 93.6px;
      }

      h2 {
          font-family: Light;
          font-size: 60px;
          line-height: 78px;
      }

      h3 {
          font-family: Light;
          font-size: 36px;
          line-height: 46.8px;
      }

      h4 {
          font-family: Medium;
          font-size: 24px;
          line-height: 31.2px;
      }

      h5 {
          font-family: Light;
          font-size: 20px;
          line-height: 30px;
          font-weight: 100;
      }

      p {
          font-family: Light;
          font-size: 16px;
          line-height: 21px;
          color: #E7DDDE;
      }

      /* Cursor CSS */
      .cursor {
          position: absolute;
          top: 300px;
          left: 300px;
          width: 12px;
          height: 12px;
          background-color: #FE4249;
          border-radius: 50%;
          z-index: 1000000;
          pointer-events: none;
          transform: translate(-50%, -50%);
          transition: width 0.2s, height 0.2s, background-color 0.2s, border 0.2s, border-radius 0.2s;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      .cursor .cursor-text {
          opacity: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          color: #FF233F;
          font-size: 14px;
          transition: opacity 0.2s;
          white-space: nowrap;
      }

      .cursor.hovering-open {
          width: 67px;
          height: 67px;
          background-color: transparent;
          border: 1px solid #FF233F;
          border-radius: 33.5px;
      }

      .cursor.hovering-open .cursor-text {
          opacity: 1;
      }

      .expand {
          background-color: black;
          width: 40px;
          height: 40px;
          mix-blend-mode: exclusion;
          z-index: 20000;
      }

      /* Fold 1 styling --------- */
      .fold1 {
          position: relative;
          display: block;
          width: 100%;
          height: 100vh;
          scroll-snap-align: start;
          /* background-color: black; */

          background-color: #000000;
          background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
          background-size: 20px 20px;
          height: 100vh;

          overflow: hidden;
          scroll-snap-align: start;
      }

      @keyframes gradient {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
              transition: 6s ease infinite;
          }
      }



      .fold1 .header .top {
          display: flex;
          flex-direction: row;
          width: 100vw;
          background-color: transparent;
          padding: 12px 6%;
          justify-content: space-between;
          height: 10vh;
          align-items: center;
          position: fixed;
          z-index: 1000;
          mix-blend-mode: exclusion;
      }

      /* Header Button CTA styling */
      .fold1 .header .top .but {
          overflow: hidden;
          position: absolute;
          /* left: 6%; */
          z-index: 100000;
          display: none;
      }


      .fold1 .header .top .but button {
          border-radius: 50px;
          height: 40px;
          width: 120px;
          font-family: Medium;
          font-size: 14px;
          color: #FE4249;
          background-color: rgba(254, 66, 73, 0%);
          border: 2px solid #FE4249;
          transition: 0.1s ease-out;

      }

      .fold1 .header .top .but button:active {
          border: 2.3px solid #FE4249;
          color: white;
      }

      .fold1 .header .top .but button:hover {
          border: 3px solid white;
          color: #FE4249;
          transition: 0.1s ease-in;
      }

      .fold1 .header .top .but img {
          padding-right: 8px;
      }

      .fold1 .header .top .but #myInput {
          display: none;
      }

      /* Hamburger menu */

      .fold1 .header .top .ham {
          position: relative;
          z-index: 1000000000;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          align-content: center;
      }

      .fold1 .header .top .ham .hamopen {
          position: relative;
          visibility: visible;
      }

      .fold1 .header .top .ham .hamclose {
          position: absolute;
          visibility: hidden;
      }

      /* Header bottom section */
      .fold1 .header .bottom {
          display: none;
          flex-direction: row;
          width: 100%;
          background-color: #1F1F1F;
          padding: 18vh 6%;
          justify-content: space-between;
          /* margin-top: 11vh; */
      }

      /* Header bottom left section */
      .fold1 .header .bottom .left {
          width: 50%;
      }

      /* Links */
      .fold1 .header .bottom .left .links {
          color: #595959;
          display: block;
          overflow: hidden;
          align-items: center;
          visibility: visible;
          z-index: 1000;
          opacity: 1;
          height: 100vh;
      }

      .fold1 .header .bottom .left .links a {
          width: 100%;
          text-align: left;
          display: block;
          text-decoration: none;
          font-family: Light;
          font-size: 80px;
          color: #939393;
          padding: 36px;

      }

      .fold1 .header .bottom .left .links a:hover {
          color: white;
      }

      .fold1 .header .bottom .left .links a:active {
          color: white;
      }

      /* Section right  */
      .fold1 .header .bottom .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          /* background-color: green; */
          width: 50%;
          margin: 18px 0;
      }


      .fold1 .header .bottom .right .find {
          display: flex;
          position: relative;
          flex-direction: row;
          display: contents;
          width: 100%;
          margin: 0;
          padding: 18px;
      }


      .fold1 .header .bottom .right .find .line {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
      }

      .fold1 .header .bottom .right .find .ccontainer {
          display: flex;
          flex-direction: column;
          width: 400px;
          justify-content: flex-end;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find .ccontainer:hover {

          background-color: #FE4249;
      }

      .fold1 .header .bottom .right .find .ccontainer:hover .detail {
          padding: 0 24px;
          transition: all 0.3s ease-in-out;
      }


      .fold1 .header .bottom .right .find .ccontainer:hover .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find a {
          text-decoration: none;
          overflow: hidden;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }


      /* Header Email */

      .fold1 .header .bottom .right .mail {
          position: relative;
          display: flex;
          align-items: center;
          z-index: 1000;
          width: 400px;
          height: 300px;
          margin-top: 220px;
      }

      .fold1 .header .bottom .right .mail a {
          text-decoration: none;
          color: white;
      }

      .fold1 .header .bottom .right .mail img {
          position: absolute;
          margin-top: -38px;
          margin-left: 370px;
          transition: 0.4s all ease-out;

      }

      .fold1 .header .bottom .right .mail h3 {
          padding-top: 100px;
          align-items: center;
          font-size: 24px;
      }

      .fold1 .header .bottom .right .mail h5 {

          font-size: 16px;
          font-family: Medium;
          color: #FE4249;
          overflow: hidden;
          margin-bottom: -100px;
      }

      .fold1 .header .bottom .right .mail em {
          display: none;
          width: 100%;
      }

      .fold1 .header .bottom .right .mail:hover img {
          margin-left: 350px;
          transition: 0.4s all ease-out;
      }

      /* content cover styling is done here */

      .cont {
          padding-top: 4%;
          vertical-align: middle;
      }

      .cont .cover img {
          width: 80%;
          display: block;
          float: right;
          margin-right: -6%;
          margin-top: -9%;
          opacity: 100%;
          transform: scale(1.25);
          transform-origin: center;
      }

      .cont .tag img {
          position: absolute;
          right: 38%;
          top: 7.5%;
          transform: scale(0.6);
          display: none;
      }



      .cont .phead {
          z-index: 2;
      }

      .cont .phead h1 {
          position: absolute;
          top: 40%;
          height: 100%;
          font-size: 130px;
          line-height: 140px;
          width: 100%;
          font-family: Medium;
          /* mix-blend-mode: exclusion; */
      }

      .cont .phead .phead1 {
          -webkit-text-stroke: 1px #ECE0FC;
          color: transparent;
          font-family: Bold;
          margin-left: 6%;
      }

      .cont .phead .phead2 {
          /* mix-blend-mode: exclusion; */
          margin-top: 180px;
          margin-left: 16%;
          color: rgb(255, 255, 255);
          /* font-size: 80px; */
          font-family: medium;
      }

      .cont .clientlogo {
          padding-top: 190px;
          margin: 0 6%;
          position: relative;
          z-index: 2;
      }

      .cont .clientlogo img {
          width: 80px;
      }

      /* Lable scroller styling */
      .fold1 .label .scroll {
          width: 55px;
          height: 55px;
      }

      .fold1 .label {
          padding: 0 50%;
          position: absolute;
          width: 100%;
          bottom: 4%;
          z-index: 100000;
      }

      .fold1 .cont .label #label-l a {
          padding: 12px;
      }

      /* fold 2 css is here ............ */
      .fold2 {
          width: 100%;
          height: fit-content;
          position: relative;
          background-color: black;

      }

      /* Project Navigation Bar */

      /* Project Navigation Bar */

      .fold2 .navigation {

          margin: 0;
          position: fixed;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 60px;
          background-color: black;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 12px;

      }

      .fold2 .navigation a {

          padding: 24px 40px 24px 40px;
          color: white;
          text-decoration: none;
          color: #939393;
          font-family: Regular;
          font-size: 14px;

      }

      .fold2 .navigation a:hover {
          color: white;
          /* background-color: white; */
      }

      .fold2 .aboutproject {
          display: block;
          margin: 0 auto;
          width: 100%;
      }

      .fold2 .projectdetails {
          display: block;
          margin: 0 auto;
          width: 100%;
      }

      /* Next & Previous css is here */

      .nextprev {
          width: 100vw;

          background-color: white;
          display: flex;
          flex-direction: row;
      }

      .nextprev .next,
      .previous {
          width: 50%;
          padding: 40px 0px;
          font-family: Medium;
          font-size: 18px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: #1F1F1F;
          text-decoration: none;
          border: 1px solid #939393;

      }

      .nextprev .next:hover {
          /* background-color: #f1f1f1; */
          background-color: #FE4249;
          color: white;
          border: 0px;

      }

      .nextprev .previous:hover {
          background-color: #FE4249;
          color: white;
          border: 0px;
      }


      /* Fold 4 footer css is here */
      .fold4 {
          display: flex;
          padding: 80px 6%;
          justify-content: space-between;
          color: white;
          background-color: black;
          scroll-snap-align: start;
      }

      .fold4 .left {
          width: 100%;
          display: flex;
          flex-direction: column;
      }

      .fold4 .left h1 {
          font-family: Light;
          color: #939393;
          display: block;
          margin: 0 auto;
          width: 40%;
          text-align: center;

      }

      .fold4 .left h5 {
          padding-top: 40px;
          font-family: Light;
          width: 600px;
          color: #939393;
      }

      .fold4 .left .mail {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin: 0 auto;

      }

      .fold4 .left .mail a {
          text-decoration: none;
          color: white;
      }

      .fold4 .left .mail img {
          position: relative;
          left: 16px;
          bottom: -52px;

      }

      .fold4 .left .mail h3 {
          padding-top: 100px;
          align-items: center;
      }


      .find {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 1% 6%;
          background-color: black;
      }

      .find .line {
          width: 400px;
          height: 0.7px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
      }

      .find .ccontainer {

          width: 400px;
          justify-content: space-between;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
      }

      .find .ccontainer:hover {

          background-color: #FE4249;
      }

      .find .ccontainer:hover .detail {
          padding: 0 24px;
          transition: all 0.3s ease-in-out;
      }


      .find .ccontainer:hover .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;
      }

      .find a {
          text-decoration: none;
      }

      .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }

      .find .ccontainer .clink {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 400px;
      }


      /* Footnote */

      .footnote {
          background-color: black;
          padding: 2% 6%;
      }

      .footnote p {
          color: #939393;
          font-family: Light;
          font-size: 12px;
      }

      .footnote .divide {
          margin-bottom: 12px;
          padding-bottom: 0;
          opacity: 30%;
          border-top: 1px solid gray;
      }

      .footnote .creditname {
          font-family: Medium;
          color: #FE4249;
          opacity: 80%;
      }
  }

  /* Medium desktops */

  @media (min-width: 1201px) and (max-width:1600px) {
      h1 {
          font-family: Regular;
          font-size: 72px;
          line-height: 93.6px;
      }

      h2 {
          font-family: Light;
          font-size: 60px;
          line-height: 78px;
      }

      h3 {
          font-family: Light;
          font-size: 36px;
          line-height: 46.8px;
      }

      h4 {
          font-family: Medium;
          font-size: 24px;
          line-height: 31.2px;
      }

      h5 {
          font-family: Light;
          font-size: 20px;
          line-height: 30px;
          font-weight: 100;
      }

      p {
          font-family: Light;
          font-size: 16px;
          line-height: 21px;
          color: #E7DDDE;
      }

      /* Cursor CSS */
      .cursor {
          position: absolute;
          top: 300px;
          left: 300px;
          width: 12px;
          height: 12px;
          background-color: #FE4249;
          border-radius: 50%;
          z-index: 1000000;
          pointer-events: none;
          transform: translate(-50%, -50%);
          transition: width 0.2s, height 0.2s, background-color 0.2s, border 0.2s, border-radius 0.2s;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      .cursor .cursor-text {
          opacity: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          color: #FF233F;
          font-size: 14px;
          transition: opacity 0.2s;
          white-space: nowrap;
      }

      .cursor.hovering-open {
          width: 67px;
          height: 67px;
          background-color: transparent;
          border: 1px solid #FF233F;
          border-radius: 33.5px;
      }

      .cursor.hovering-open .cursor-text {
          opacity: 1;
      }

      .expand {
          background-color: white;
          width: 40px;
          height: 40px;
          mix-blend-mode: exclusion;
          z-index: 20000;
      }

      /* Fold 1 styling --------- */
      .fold1 {
          position: relative;
          display: block;
          width: 100%;
          height: 100vh;
          scroll-snap-align: start;
          /* background-color: black; */

          /* background-color: #000000;
          background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px); */
          background-color: #000000;
          background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
          background-size: 20px 20px;
          height: 100vh;

          overflow: hidden;
          scroll-snap-align: start;
      }

      @keyframes gradient {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
              transition: 6s ease infinite;
          }
      }

      .fold1 .header {
          z-index: 1000;
      }

      .fold1 .header .top {
          display: flex;
          flex-direction: row;
          width: 100vw;
          background-color: transparent;
          padding: 12px 6%;
          justify-content: space-between;
          height: 10vh;
          align-items: center;
          position: fixed;
          z-index: 1000;
          mix-blend-mode: exclusion;

      }

      /* Header Button CTA styling */
      .fold1 .header .top .but {
          overflow: hidden;
          position: absolute;
          /* left: 6%; */
          z-index: 1000;
          display: none;
      }


      .fold1 .header .top .but button {
          border-radius: 50px;
          height: 40px;
          width: 120px;
          font-family: Medium;
          font-size: 14px;
          color: #FE4249;
          background-color: rgba(254, 66, 73, 0%);
          border: 2px solid #FE4249;
          transition: 0.1s ease-out;

      }

      .fold1 .header .top .but button:active {
          border: 2.3px solid #FE4249;
          color: white;
      }

      .fold1 .header .top .but button:hover {
          border: 3px solid white;
          color: #FE4249;
          transition: 0.1s ease-in;
      }

      .fold1 .header .top .but img {
          padding-right: 8px;
      }

      .fold1 .header .top .but #myInput {
          display: none;
      }

      /* Hamburger menu */

      .fold1 .header .top .ham {
          position: relative;
          z-index: 1000000000;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          align-content: center;
      }

      .fold1 .header .top .ham .hamopen {
          position: relative;
          visibility: visible;
      }

      .fold1 .header .top .ham .hamclose {
          position: absolute;
          visibility: hidden;
      }

      /* Header bottom section */
      .fold1 .header .bottom {
          display: none;
          flex-direction: row;
          width: 100%;
          background-color: #1F1F1F;
          padding: 11vh 6%;
          justify-content: space-between;
          /* margin-top: 11vh; */
          z-index: 1000;
      }

      /* Header bottom left section */
      .fold1 .header .bottom .left {
          width: 50%;
      }

      /* Links */
      .fold1 .header .bottom .left .links {
          color: #595959;
          display: block;
          overflow: hidden;
          align-items: center;
          visibility: visible;
          z-index: 1000;
          opacity: 1;
          height: 100vh;
      }

      .fold1 .header .bottom .left .links a {
          width: 100%;
          text-align: left;
          display: block;
          text-decoration: none;
          font-family: Light;
          font-size: 80px;
          color: #939393;
          padding: 18px;

      }

      .fold1 .header .bottom .left .links a:hover {
          color: white;
      }

      .fold1 .header .bottom .left .links a:active {
          color: white;
      }

      /* Section right  */
      .fold1 .header .bottom .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          /* background-color: green; */
          width: 50%;
          margin: 18px 0;
      }


      .fold1 .header .bottom .right .find {
          display: flex;
          position: relative;
          flex-direction: row;
          display: contents;
          width: 100%;
          margin: 0;
          padding: 18px;
      }


      .fold1 .header .bottom .right .find .line {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
      }

      .fold1 .header .bottom .right .find .ccontainer {
          display: flex;
          flex-direction: column;
          width: 400px;
          justify-content: flex-end;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find .ccontainer:hover {

          background-color: #FE4249;
      }

      .fold1 .header .bottom .right .find .ccontainer:hover .detail {
          padding: 0 24px;
          transition: all 0.3s ease-in-out;
      }


      .fold1 .header .bottom .right .find .ccontainer:hover .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find a {
          text-decoration: none;
          overflow: hidden;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }


      /* Header Email */

      .fold1 .header .bottom .right .mail {
          position: relative;
          display: flex;
          align-items: center;
          z-index: 1000;
          width: 400px;
          height: 300px;
          margin-top: 100px;
      }

      .fold1 .header .bottom .right .mail a {
          text-decoration: none;
          color: white;
      }

      .fold1 .header .bottom .right .mail img {
          position: absolute;
          margin-top: -38px;
          margin-left: 370px;
          transition: 0.4s all ease-out;

      }

      .fold1 .header .bottom .right .mail h3 {
          padding-top: 100px;
          align-items: center;
          font-size: 24px;
      }

      .fold1 .header .bottom .right .mail h5 {

          font-size: 16px;
          font-family: Medium;
          color: #FE4249;
          overflow: hidden;
          margin-bottom: -100px;
      }

      .fold1 .header .bottom .right .mail em {
          display: none;
          width: 100%;
      }

      .fold1 .header .bottom .right .mail:hover img {
          margin-left: 350px;
          transition: 0.4s all ease-out;
      }


      /* content cover styling is done here */

      .cont {
          vertical-align: middle;
      }

      /* .cont .cover img {
      width: 40%;
      display: block;
      float: right;
      margin-right: 6%;
      margin-top: 5%;
      opacity: 50%;
  } */

      /* New image trial */

      .cont .cover img {

          /* content: url("Kampsta/Kampsta Images/Kampsta new cover.png"); */
          width: 64%;
          display: block;
          position: absolute;
          right: -10%;
          top: -6%;
          opacity: 100%;
          transform: scale(1.2);
          transform-origin: center;
          z-index: 1;
      }

      .cont .tag img {
          position: absolute;
          right: 37%;
          top: 6%;
          transform: scale(0.6);
          display: none;
      }

      .cont .phead {
          z-index: 2;
      }

      .cont .phead h1 {
          position: absolute;
          top: 40%;
          height: 100%;
          font-size: 130px;
          line-height: 140px;
          width: 100%;
          font-family: Medium;
          z-index: 2; /* keep headline above the cover image */
          /* mix-blend-mode: exclusion; */
      }

      .cont .phead .phead1 {
          /* -webkit-text-stroke: 0.1px #5190EE; */
          -webkit-text-stroke: 1.5px #ECE0FC;
          color: transparent;
          font-family: Bold;
          margin-left: 6%;
      }

      .cont .phead .phead2 {
          /* mix-blend-mode: exclusion; */
          margin-top: 180px;
          margin-left: 16%;
          color: white;
          /* font-size: 80px; */
          font-family: Medium;
      }

      .cont .clientlogo {
          padding-top: 190px;
          margin: 0 6%;
          position: relative;
          z-index: 2;
      }

      .cont .clientlogo img {
          width: 80px;
      }

      /* Lable scroller styling */
      .fold1 .label .scroll {
          width: 55px;
          height: 55px;
      }

      .fold1 .label {
          padding: 0 50%;
          position: absolute;
          width: 100%;
          bottom: 4%;
          z-index: 100000;
      }

      .fold1 .cont .label #label-l a {
          padding: 12px;
      }

      /* fold 2 css is here ............ */
      .fold2 {
          width: 100%;
          height: fit-content;
          position: relative;
          background-color: black;

      }

      /* Project Navigation Bar */

      .fold2 .navigation {

          margin: 0;
          position: fixed;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 60px;
          background-color: black;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 12px;

      }

      .fold2 .navigation a {

          padding: 24px 40px 24px 40px;
          color: white;
          text-decoration: none;
          color: #939393;
          font-family: Regular;
          font-size: 14px;

      }

      .fold2 .navigation a:hover {
          color: white;
          /* background-color: white; */
      }

      .fold2 .projectdetails {
          display: block;
          margin: 0 auto;
          width: 100%;
      }

      /* Project folds */

      .fold2 .aboutproject {

          display: block;
          margin: 0 auto;
          width: 100%;
      }


      /* Next & Previous css is here */

      .nextprev {
          width: 100vw;

          background-color: white;
          display: flex;
          flex-direction: row;
      }

      .nextprev .next,
      .previous {
          width: 50%;
          padding: 40px 0px;
          font-family: Medium;
          font-size: 18px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: #1F1F1F;
          text-decoration: none;
          border: 1px solid #939393;

      }

      .nextprev .next:hover {
          /* background-color: #f1f1f1; */
          background-color: #FE4249;
          color: white;
          border: 0px;

      }

      .nextprev .previous:hover {
          background-color: #FE4249;
          color: white;
          border: 0px;
      }

      /* Fold 4 - Footer css is here -------------- */
      .fold4 {
          display: flex;
          padding: 80px 6%;
          justify-content: space-between;
          color: white;
          background-color: black;
          scroll-snap-align: start;
      }

      .fold4 .left {
          width: 100%;
          display: flex;
          flex-direction: column;
      }

      .fold4 .left h1 {
          font-family: Light;
          color: #939393;
          display: block;
          margin: 0 auto;
          width: 50%;
          text-align: center;

      }

      .fold4 .left h5 {
          padding-top: 40px;
          font-family: Light;
          width: 600px;
          color: #939393;
      }

      .fold4 .left .mail {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin: 0 auto;

      }

      .fold4 .left .mail a {
          text-decoration: none;
          color: white;
      }

      .fold4 .left .mail img {
          position: relative;
          left: 16px;
          bottom: -52px;

      }

      .fold4 .left .mail h3 {
          padding-top: 100px;
          align-items: center;
      }

      /* .fold4 .right {
  width: 50%;
}

.fold4 .right .bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}

.fold4 .right .bottom .address {
  width: 250px;
}

.fold4 .right .bottom .address p {
  padding-top: 16px;
  color: #777777;
} */

      .find {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 1% 6%;
          background-color: black;
      }

      .find .line {
          width: 400px;
          height: 0.7px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
      }

      .find .ccontainer {

          width: 400px;
          justify-content: space-between;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
      }

      .find .ccontainer:hover {

          background-color: #FE4249;
      }

      .find .ccontainer:hover .detail {
          padding: 0 24px;
          transition: all 0.3s ease-in-out;
      }


      .find .ccontainer:hover .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;
      }

      .find a {
          text-decoration: none;
      }

      .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }

      .find .ccontainer .clink {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 400px;
      }


      /* Footnote */

      .footnote {
          background-color: black;
          padding: 2% 6%;
      }

      .footnote p {
          color: #939393;
          font-family: Light;
          font-size: 12px;
      }

      .footnote .divide {
          margin-bottom: 12px;
          padding-bottom: 0;
          opacity: 30%;
          border-top: 1px solid gray;
      }

      .footnote .creditname {
          font-family: Medium;
          color: #FE4249;
          opacity: 80%;
      }
  }

  /* Small desktops */

  @media (min-width:769px) and (max-width:1366px) {

      h1 {
          font-family: Regular;
          font-size: 55px;
          line-height: 71.5px;
      }

      h2 {
          font-family: Light;
          font-size: 40px;
          line-height: 52px;
      }

      h3 {
          font-family: Light;
          font-size: 30px;
          line-height: 39px;
      }

      h4 {
          font-family: Medium;
          font-size: 22px;
          line-height: 28.6px;
      }

      h5 {
          font-family: Light;
          font-size: 18px;
          line-height: 23.4px;
          font-weight: 100;
      }

      p {
          font-family: Light;
          font-size: 14px;
          line-height: 18.2px;
          color: #E7DDDE;
      }

      /* Cursor CSS */
      .cursor {
          position: absolute;
          top: 300px;
          left: 300px;
          width: 12px;
          height: 12px;
          background-color: #FE4249;
          border-radius: 50%;
          z-index: 1000000;
          pointer-events: none;
          transform: translate(-50%, -50%);
          transition: width 0.2s, height 0.2s, background-color 0.2s, border 0.2s, border-radius 0.2s;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

      .cursor .cursor-text {
          opacity: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          color: #FF233F;
          font-size: 14px;
          transition: opacity 0.2s;
          white-space: nowrap;
      }

      .cursor.hovering-open {
          width: 67px;
          height: 67px;
          background-color: transparent;
          border: 1px solid #FF233F;
          border-radius: 33.5px;
      }

      .cursor.hovering-open .cursor-text {
          opacity: 1;
      }

      .expand {
          background-color: white;
          width: 40px;
          height: 40px;
          mix-blend-mode: exclusion;
          z-index: 20000;
      }

      /* Fold 1 styling  */
      .fold1 {
          position: relative;
          display: block;
          width: 100%;
          height: 100vh;
          scroll-snap-align: start;
          /* background-color: black; */

          background-color: #000000;
          background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
          background-size: 20px 20px;
          height: 100vh;

          overflow: hidden;
          scroll-snap-align: start;
      }

      @keyframes gradient {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
              transition: 6s ease infinite;
          }
      }



      .fold1 .header .top {
          display: flex;
          flex-direction: row;
          width: 100vw;
          background-color: transparent;
          padding: 12px 4%;
          justify-content: space-between;
          height: 10vh;
          align-items: center;
          position: fixed;
          z-index: 1000;
          mix-blend-mode: exclusion;
      }

      /* Header Button CTA styling */
      .fold1 .header .top .but {
          overflow: hidden;
          position: absolute;
          /* left: 6%; */
          z-index: 100000;
          display: none;
      }


      .fold1 .header .top .but button {
          border-radius: 50px;
          height: 40px;
          width: 120px;
          font-family: Medium;
          font-size: 14px;
          color: #FE4249;
          background-color: rgba(254, 66, 73, 0%);
          border: 2px solid #FE4249;
          transition: 0.1s ease-out;

      }

      .fold1 .header .top .but button:active {
          border: 2.3px solid #FE4249;
          color: white;
      }

      .fold1 .header .top .but button:hover {
          border: 3px solid white;
          color: #FE4249;
          transition: 0.1s ease-in;
      }

      .fold1 .header .top .but img {
          padding-right: 8px;
      }

      .fold1 .header .top .but #myInput {
          display: none;
      }

      /* Hamburger menu */

      .fold1 .header .top .ham {
          position: relative;
          z-index: 1000000000;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          align-content: center;
      }

      .fold1 .header .top .ham .hamopen {
          position: relative;
          visibility: visible;
      }

      .fold1 .header .top .ham .hamclose {
          position: absolute;
          visibility: hidden;
      }

      /* Header bottom section */
      .fold1 .header .bottom {
          display: none;
          flex-direction: row;
          width: 100%;
          background-color: #1F1F1F;
          padding: 16vh 4%;
          justify-content: space-between;
          /* margin-top: 11vh; */
      }

      /* Header bottom left section */
      .fold1 .header .bottom .left {
          width: 50%;
      }

      /* Links */
      .fold1 .header .bottom .left .links {
          color: #595959;
          display: block;
          overflow: hidden;
          align-items: center;
          visibility: visible;
          z-index: 1000;
          opacity: 1;
          height: 100vh;
      }

      .fold1 .header .bottom .left .links a {
          width: 100%;
          text-align: left;
          display: block;
          text-decoration: none;
          font-family: Light;
          font-size: 80px;
          color: #939393;
          padding: 18px;

      }

      .fold1 .header .bottom .left .links a:hover {
          color: white;
      }

      .fold1 .header .bottom .left .links a:active {
          color: white;
      }

      /* Section right  */
      .fold1 .header .bottom .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          /* background-color: green; */
          width: 50%;
          margin: 18px 0;
      }


      .fold1 .header .bottom .right .find {
          display: flex;
          position: relative;
          flex-direction: row;
          display: contents;
          width: 100%;
          margin: 0;
          padding: 18px;
      }


      .fold1 .header .bottom .right .find .line {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
      }

      .fold1 .header .bottom .right .find .ccontainer {
          display: flex;
          flex-direction: column;
          width: 400px;
          justify-content: flex-end;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find .ccontainer:hover {

          background-color: #FE4249;
      }

      .fold1 .header .bottom .right .find .ccontainer:hover .detail {
          padding: 0 24px;
          transition: all 0.3s ease-in-out;
      }


      .fold1 .header .bottom .right .find .ccontainer:hover .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;
      }

      .fold1 .header .bottom .right .find a {
          text-decoration: none;
          overflow: hidden;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }


      /* Header Email */

      .fold1 .header .bottom .right .mail {
          position: relative;
          display: flex;
          align-items: center;
          z-index: 1000;
          width: 400px;
          height: 300px;
          margin-top: 100px;
      }

      .fold1 .header .bottom .right .mail a {
          text-decoration: none;
          color: white;
      }

      .fold1 .header .bottom .right .mail img {
          position: absolute;
          margin-top: -38px;
          margin-left: 370px;
          transition: 0.4s all ease-out;

      }

      .fold1 .header .bottom .right .mail h3 {
          padding-top: 100px;
          align-items: center;
          font-size: 24px;
      }

      .fold1 .header .bottom .right .mail h5 {

          font-size: 16px;
          font-family: Medium;
          color: #FE4249;
          overflow: hidden;
          margin-bottom: -100px;
      }

      .fold1 .header .bottom .right .mail em {
          display: none;
          width: 100%;
      }

      .fold1 .header .bottom .right .mail:hover img {
          margin-left: 350px;
          transition: 0.4s all ease-out;
      }


      /* content styling is done here */

      .cont {
          padding-top: 100px;
      }


      .cont .cover img {
          width: 50%;
          display: block;
          position: absolute;
          right: 0;
          top: 8%;
          opacity: 100%;
          transform: scale(1);
      }

      .cont .tag img {
          position: absolute;
          right: 37%;
          top: 6%;
          transform: scale(0.6);
          display: none;
      }

      .cont .phead {
          z-index: 2;
      }

      .cont .phead h1 {
          position: absolute;
          top: 40%;
          height: 100%;
          font-size: 100px;
          line-height: 140px;
          width: 100%;
          font-family: Medium;
          /* mix-blend-mode: exclusion; */
      }

      .cont .phead .phead1 {
          -webkit-text-stroke: 1px #ECE0FC;
          color: transparent;
          font-family: Bold;
          margin-left: 6%;
      }

      .cont .phead .phead2 {
          /* mix-blend-mode: exclusion; */
          margin-top: 140px;
          margin-left: 16%;
          color: white;
          font-family: Medium;
      }

      .cont .clientlogo {
          padding-top: 8%;
          margin: 0 6%;
          position: relative;
          z-index: 2;
      }

      .cont .clientlogo img {
          width: 80px;
      }

      /* Lable scroller styling */
      .fold1 .label .scroll {
          width: 55px;
          height: 55px;
      }

      .fold1 .label {
          padding: 0 50%;
          position: absolute;
          width: 100%;
          bottom: 4%;
          z-index: 100000;
      }

      .fold1 .cont .label #label-l a {
          padding: 12px;
      }

      /* fold 2 css is here ............ */
      .fold2 {
          width: 100%;
          height: fit-content;
          position: relative;
          background-color: black;

      }

      /* Project Navigation Bar */

      .fold2 .navigation {

          margin: 0;
          position: fixed;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 60px;
          background-color: black;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 12px;

      }

      .fold2 .navigation a {

          padding: 24px 40px 24px 40px;
          color: white;
          text-decoration: none;
          color: #939393;
          font-family: Regular;
          font-size: 14px;

      }

      .fold2 .navigation a:hover {
          color: white;
          /* background-color: white; */
      }


      .fold2 .aboutproject {

          display: block;
          margin: 0 auto;
          width: 100%;
      }


      .fold2 .projectdetails {
          display: block;
          margin: 0 auto;
          width: 100%;
      }


      /* Next & Previous css is here */

      .nextprev {
          width: 100vw;

          background-color: white;
          display: flex;
          flex-direction: row;
      }

      .nextprev .next,
      .previous {
          width: 50%;
          padding: 40px 0px;
          font-family: Medium;
          font-size: 18px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: #1F1F1F;
          text-decoration: none;
          border: 1px solid #939393;

      }

      .nextprev .next:hover {
          /* background-color: #f1f1f1; */
          background-color: #FE4249;
          color: white;
          border: 0px;

      }

      .nextprev .previous:hover {
          background-color: #FE4249;
          color: white;
          border: 0px;
      }


      /* Fold4 footer css */

      /* Fold 4 - Footer css is here -------------- */
      .fold4 {
          display: flex;
          padding: 80px 6%;
          justify-content: space-between;
          color: white;
          background-color: black;
          scroll-snap-align: start;
      }

      .fold4 .left {
          width: 100%;
          display: flex;
          flex-direction: column;
      }

      .fold4 .left h1 {
          font-family: Light;
          color: #939393;
          display: block;
          margin: 0 auto;
          width: 60%;
          text-align: center;

      }

      .fold4 .left h5 {
          padding-top: 40px;
          font-family: Light;
          width: 600px;
          color: #939393;
      }

      .fold4 .left .mail {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin: 0 auto;

      }

      .fold4 .left .mail a {
          text-decoration: none;
          color: white;
      }

      .fold4 .left .mail img {
          position: relative;
          left: 16px;
          bottom: -52px;

      }

      .fold4 .left .mail h3 {
          padding-top: 100px;
          align-items: center;
      }

      .find {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 1% 4%;
          background-color: black;
      }

      .find .line {
          width: 300px;
          height: 0.7px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
      }

      .find .ccontainer {
          width: 260px;
          justify-content: space-between;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
          background-color: transparent;
      }

      .find .ccontainer:hover {

          background-color: #FE4249;
      }

      .find .ccontainer:hover .detail {
          padding: 0 24px;
          transition: all 0.3s ease-in-out;
      }


      .find .ccontainer:hover .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;

      }

      .find a {
          text-decoration: none;
      }

      .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }

      .find .ccontainer .detail img {

          width: 55px;
      }

      /* Footnote */

      .footnote {
          background-color: black;
          padding: 2% 4%;
      }

      .footnote p {
          color: #939393;
          font-family: Light;
          font-size: 12px;
      }

      .footnote .divide {
          margin-bottom: 12px;
          padding-bottom: 0;
          opacity: 30%;
          border-top: 1px solid gray;
      }

      .footnote .creditname {
          font-family: Medium;
          color: #FE4249;
          opacity: 80%;
      }
  }

  /* Tablets */

  @media (min-width:481px) and (max-width:949px) {

      h1 {
          font-family: Regular;
          font-size: 55px;
          line-height: 71.5px;
      }

      h2 {
          font-family: Light;
          font-size: 40px;
          line-height: 52px;
      }

      h3 {
          font-family: Light;
          font-size: 30px;
          line-height: 39px;
      }

      h4 {
          font-family: Medium;
          font-size: 22px;
          line-height: 28.6px;
      }

      h5 {
          font-family: Light;
          font-size: 18px;
          line-height: 23.4px;
          font-weight: 100;
      }

      p {
          font-family: Light;
          font-size: 14px;
          line-height: 18.2px;
          color: #E7DDDE;
      }

      html {
          background-color: green;
          width: 949px;

      }

      body {
          max-width: 949px;
          box-sizing: border-box;

      }

      /* Cursor CSS */
      .cursor {
          visibility: visible;
          cursor: pointer;
      }

      /* Fold 1 styling  */
      .fold1 {
          position: relative;
          display: block;
          width: 100vw;
          height: 100%;
          scroll-snap-align: start;
          /* background-color: black; */

          background-color: #000000;
          background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
          background-size: 20px 20px;
          height: 100vh;

          overflow: hidden;
          scroll-snap-align: start;
      }

      @keyframes gradient {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
              transition: 6s ease infinite;
          }
      }


      /* Header styling is done here */
      .fold1 .header .top {
          display: flex;
          flex-direction: row;
          width: 100vw;
          background-color: transparent;
          padding: 8px 4%;
          justify-content: space-between;
          height: 8vh;
          align-items: center;
          position: fixed;
          z-index: 1000;
          mix-blend-mode: exclusion;
      }

      /* Header Button CTA styling */
      .fold1 .header .top .but {
          overflow: hidden;
          position: absolute;
          /* left: 6%; */
          z-index: 100000;
          display: none;
      }


      .fold1 .header .top .but button {
          border-radius: 50px;
          height: 40px;
          width: 120px;
          font-family: Medium;
          font-size: 14px;
          color: #FE4249;
          background-color: rgba(254, 66, 73, 0%);
          border: 2px solid #FE4249;
          transition: 0.1s ease-out;

      }

      .fold1 .header .top .but button:active {
          border: 2.3px solid #FE4249;
          color: white;
      }

      .fold1 .header .top .but button:hover {
          border: 3px solid white;
          color: #FE4249;
          transition: 0.1s ease-in;
      }

      .fold1 .header .top .but img {
          padding-right: 8px;
      }

      .fold1 .header .top .but #myInput {
          display: none;
      }

      /* Hamburger menu */

      .fold1 .header .top .ham {
          position: relative;
          z-index: 1000000000;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          align-content: center;
      }

      .fold1 .header .top .ham .hamopen {
          position: relative;
          visibility: visible;
      }

      .fold1 .header .top .ham .hamclose {
          position: absolute;
          visibility: hidden;
      }

      /* Header bottom section */
      .fold1 .header .bottom {
          display: none;
          flex-direction: column;
          width: 100%;
          height: 100vh;
          background-color: #1F1F1F;
          padding: 11vh 4%;
          justify-content: space-between;
          /* margin-top: 11vh; */
      }

      /* Header bottom left section */
      .fold1 .header .bottom .left {
          width: 100%;
      }

      /* Links */
      .fold1 .header .bottom .left .links {
          color: #595959;
          display: block;
          overflow: hidden;
          align-items: center;
          visibility: visible;
          z-index: 1000;
          opacity: 1;
          height: 100%;
      }

      .fold1 .header .bottom .left .links a {
          width: 100%;
          text-align: left;
          display: block;
          text-decoration: none;
          font-family: Light;
          font-size: 64px;
          color: #939393;
          padding: 24px 0;
      }

      .fold1 .header .bottom .left .links a:hover {
          color: white;
      }

      .fold1 .header .bottom .left .links a:active {
          color: white;
      }

      /* Section right  */
      .fold1 .header .bottom .right {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          /* background-color: green; */
          width: 100%;
          margin: 48px 0;

      }


      .fold1 .header .bottom .right .find {
          display: flex;
          position: relative;
          flex-direction: row;
          width: 100%;
          margin: 0;
          padding: 12px;

      }


      .fold1 .header .bottom .right .find .line {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
          display: block;
      }


      .fold1 .header .bottom .right .find .line:active {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
          display: block;
      }

      .fold1 .header .bottom .right .find .ccontainer {
          display: flex;
          flex-direction: column;

          width: 100%;
          transition: 0.3s ease-out;
          background-color: transparent;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail {
          display: flex;
          flex-direction: row-reverse;
          transition: 0.3s ease-out;
          width: 100%;
          padding: 0;
          margin: 0;
          align-items: center;
      }

      .fold1 .header .bottom .right .find a {
          text-decoration: none;
          overflow: hidden;
          width: 100%;


      }

      .fold1 .header .bottom .right .find a img {
          width: 36px;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail p {
          width: 100%;
          font-size: 18px;
          color: white;
          text-decoration: none;
          height: 100%;
          padding-left: 16px;
      }


      /* Header Email */

      .fold1 .header .bottom .right .mail {
          position: absolute;
          display: block;
          z-index: 1000;
          width: 400px;
          height: 300px;
          margin-top: 120px;
      }

      .fold1 .header .bottom .right .mail a {
          text-decoration: none;
          color: white;
      }

      .fold1 .header .bottom .right .mail img {
          position: absolute;
          margin-top: -38px;
          margin-left: 370px;
          transition: 0.4s all ease-out;

      }

      .fold1 .header .bottom .right .mail h3 {
          padding-top: 100px;
          align-items: center;
          font-size: 22px;
      }

      .fold1 .header .bottom .right .mail h5 {

          font-size: 16px;
          font-family: Medium;
          color: #FE4249;
          overflow: hidden;
          margin-bottom: -100px;
      }

      .fold1 .header .bottom .right .mail em {
          display: none;
          width: 100%;
      }

      .fold1 .header .bottom .right .mail:hover img {
          margin-left: 350px;
          transition: 0.4s all ease-out;
      }

      /* content styling is done here */

      .cont .cover img {
          position: absolute;
          bottom: 0;
          width: 120vw;
          display: block;
          margin: 0 auto;
          opacity: 100%;
          transform: scale(1);
      }

      .cont .tag img {
          position: absolute;
          right: 37%;
          top: 16%;
          transform: scale(0.7);
          visibility: hidden;
          display: none;
      }

      .cont .phead h1 {
          position: absolute;
          top: 40%;
          height: 100%;
          font-size: 60px;
          line-height: 71.5px;
          width: 100%;
          font-family: Medium;
      }

      .cont .phead .phead1 {
          -webkit-text-stroke: 1px #FFF6E4;
          color: transparent;
          font-family: Bold;
          margin-left: 4%;
      }

      .cont .phead .phead2 {
          /* mix-blend-mode: exclusion; */

          line-height: 71.5px;
          margin-top: 100px;
          margin-left: 16%;
          color: white;
          font-family: Medium;

      }

      .cont .phead {
          z-index: 2;
      }

      .cont .clientlogo {
          padding-top: 18%;
          margin: 0 4%;
          position: relative;
          z-index: 2;
      }

      .cont .clientlogo img {
          width: 80px;
      }

      /* Lable scroller styling */
      .fold1 .label .scroll {
          width: 55px;
          height: 55px;
      }

      .fold1 .label {
          padding: 0 46%;
          position: absolute;
          width: 100%;
          bottom: 4%;
          z-index: 100000;
      }

      .fold1 .cont .label #label-l a {
          padding: 12px;
      }


      /* fold 2 css is here ............ */
      .fold2 {
          width: 100vw;
          height: fit-content;
          position: relative;
          background-color: black;
      }

      /* Project Navigation Bar */

      .fold2 .navigation {
          bottom: -2;
          display: flex;
          position: fixed;
          flex-direction: row;
          justify-content: space-evenly;
          background-color: rgba(0, 0, 0, 0.3);
          width: 100%;
          display: none;
      }

      .fold2 .navigation a {
          padding: 6px 120px 6px 120px;
          background-color: rgba(35, 123, 255, 1);
          text-decoration: none;
          /* color: #FE4249; */
          color: white;
          font-family: Regular;
          font-size: 14px;
      }

      .fold2 .navigation a:hover {
          color: rgba(35, 123, 255, 1);
          background-color: white;
      }

      .fold2 .aboutproject {

          display: block;
          margin: 0 auto;
          width: 100%;
      }


      .fold2 .projectdetails {
          display: block;
          margin: 0 auto;
          width: 100%;
      }

      /* Next & Previous css is here */

      .nextprev {
          width: 100vw;

          background-color: white;
          display: flex;
          flex-direction: row;
      }



      .nextprev .next,
      .previous {
          width: 50%;
          padding: 40px 0px;
          font-family: Medium;
          font-size: 18px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: #1F1F1F;
          text-decoration: none;
          border: 1px solid #939393;

      }

      /* Fold 4 - Footer css is here -------------- */
      .fold4 {
          display: flex;
          padding: 80px 6%;
          justify-content: space-between;
          color: white;
          background-color: black;
          scroll-snap-align: start;
          max-width: 100vw;
      }

      .fold4 .left {
          width: 100%;
          display: flex;
          flex-direction: column;
      }

      .fold4 .left h1 {
          font-family: Light;
          color: #939393;
          display: block;
          margin: 0 auto;
          width: 80%;
          text-align: center;

      }

      .fold4 .left h5 {
          padding-top: 40px;
          font-family: Light;
          width: 600px;
          color: #939393;
      }

      .fold4 .left .mail {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin: 0 auto;

      }

      .fold4 .left .mail a {
          text-decoration: none;
          color: white;
      }

      .fold4 .left .mail img {
          position: relative;
          left: 16px;
          bottom: -52px;

      }

      .fold4 .left .mail h3 {
          padding-top: 100px;
          align-items: center;
      }

      /* .fold4 .right {
      width: 50%;
  }

  .fold4 .right .bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 40px;
  }

  .fold4 .right .bottom .address {
      width: 250px;
  }

  .fold4 .right .bottom .address p {
      padding-top: 16px;
      color: #777777;
  } */

      .find {
          max-width: 100vw;
          height: 12vh;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 1% 4%;
          background-color: black;
      }

      .find a {
          width: 100vw;
      }

      .find .line {
          width: 300px;
          height: 0.7px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
          display: none;
      }

      .find .ccontainer {

          width: 140px;
          justify-content: space-evenly;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
          background-color: transparent;
      }

      .find .ccontainer:active {

          background-color: transparent;
      }

      .find .ccontainer:active .detail {
          padding: 0 12px;
          transition: all 0.3s ease-in-out;
      }


      .find .ccontainer:active .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .find .ccontainer .detail {
          width: 100%;
          display: flex;
          flex-direction: row;
          /* justify-content: space-between; */
          align-items: center;
          transition: 0.3s ease-out;


      }

      .find a {
          text-decoration: none;
      }

      .find .ccontainer .detail p {
          font-size: 24px;
          color: white;
          text-decoration: none;
          height: 24px;
      }

      .find .ccontainer .detail img {
          width: 30px;
          margin-left: 12px;

      }

      /* Footnote */

      .footnote {
          height: 6vh;
          background-color: black;
          position: relative;
          padding: 2% 4%;
          max-width: 100vw;
      }

      .footnote p {
          color: #939393;
          font-family: Light;
          font-size: 12px;
      }

      .footnote .divide {
          margin-bottom: 12px;
          padding-bottom: 0;
          opacity: 30%;
          border-top: 1px solid gray;
      }

      .footnote .creditname {
          font-family: Medium;
          color: #FE4249;
          opacity: 80%;
      }
  }

  /* Mobile */

  @media (min-width:320px) and (max-width:480px) {


      h1 {
          font-family: Regular;
          font-size: 40px;
          line-height: 52px;
      }

      h2 {
          font-family: Light;
          font-size: 35px;
          line-height: 52px;
      }

      h3 {
          font-family: Light;
          font-size: 30px;
          line-height: 39px;
      }

      h4 {
          font-family: Medium;
          font-size: 20px;
          line-height: 28.6px;
      }

      h5 {
          font-family: Light;
          font-size: 18px;
          line-height: 23.4px;
          font-weight: 100;
      }

      p {
          font-family: Light;
          font-size: 16px;
          line-height: 24px;
          color: #E7DDDE;
      }

      /* Fold 1  */

      .fold1 {
          position: relative;
          display: block;
          width: 100%;
          height: 100vh;
          scroll-snap-align: start;
          /* background-color: black; */

          background-color: #000000;
          background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
          background-size: 20px 20px;
          height: 100vh;

          overflow: hidden;
          scroll-snap-align: start;
      }

      @keyframes gradient {
          0% {
              background-position: 0% 50%;
          }

          50% {
              background-position: 100% 50%;
          }

          100% {
              background-position: 0% 50%;
              transition: 6s ease infinite;
          }
      }

      /* Header styling is done here */
      .fold1 .header .top {
          display: flex;
          flex-direction: row;
          width: 100vw;
          background-color: transparent;
          padding: 12px 4%;
          justify-content: space-between;
          height: 10vh;
          align-items: center;
          position: fixed;
          z-index: 1000;
          mix-blend-mode: exclusion;
      }

      /* Header Button CTA styling */
      .fold1 .header .top .but {
          overflow: hidden;
          position: absolute;
          /* left: 6%; */
          z-index: 100000;
          display: none;
      }


      .fold1 .header .top .but button {
          border-radius: 50px;
          height: 40px;
          width: 120px;
          font-family: Medium;
          font-size: 14px;
          color: #FE4249;
          background-color: rgba(254, 66, 73, 0%);
          border: 2px solid #FE4249;
          transition: 0.1s ease-out;

      }

      .fold1 .header .top .but button:active {
          border: 2.3px solid #FE4249;
          color: white;
      }

      .fold1 .header .top .but button:hover {
          border: 3px solid white;
          color: #FE4249;
          transition: 0.1s ease-in;
      }

      .fold1 .header .top .but img {
          padding-right: 8px;
      }

      .fold1 .header .top .but #myInput {
          display: none;
      }

      /* Hamburger menu */

      .fold1 .header .top .ham {
          position: relative;
          z-index: 1000000000;
          overflow: visible;
          display: flex;
          align-items: center;
          justify-content: center;
          align-content: center;
      }

      .fold1 .header .top .ham .hamopen {
          position: relative;
          visibility: visible;
      }

      .fold1 .header .top .ham .hamclose {
          position: absolute;
          visibility: hidden;
      }

      /* Header bottom section */
      .fold1 .header .bottom {
          display: none;
          flex-direction: column;
          width: 100vw;
          background-color: #1F1F1F;
          padding: 11vh 4%;
          justify-content: space-between;
          /* margin-top: 11vh; */
      }

      /* Header bottom left section */
      .fold1 .header .bottom .left {
          width: 100%;
      }

      /* Links */
      .fold1 .header .bottom .left .links {
          color: #595959;
          display: block;
          overflow: hidden;
          align-items: center;
          visibility: visible;
          z-index: 1000;
          opacity: 1;
          height: 100%;
      }

      .fold1 .header .bottom .left .links a {
          width: 100%;
          text-align: left;
          display: block;
          text-decoration: none;
          font-family: Light;
          font-size: 36px;
          color: #939393;
          padding: 12px 0;

      }

      .fold1 .header .bottom .left .links a:hover {
          color: white;
      }

      .fold1 .header .bottom .left .links a:active {
          color: white;
      }

      /* Section right  */
      .fold1 .header .bottom .right {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          /* background-color: green; */
          width: 100%;
          margin: 48px 0;
      }


      .fold1 .header .bottom .right .find {
          display: flex;
          position: relative;
          flex-direction: row;
          width: 100%;
          margin: 0;
          padding: 12px;
      }


      .fold1 .header .bottom .right .find .line {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
          display: block;
      }


      .fold1 .header .bottom .right .find .line:active {
          width: 400px;
          height: 0.1px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
          display: block;
      }

      .fold1 .header .bottom .right .find .ccontainer {
          display: flex;
          flex-direction: column;
          width: 100%;
          transition: 0.3s ease-out;
          background-color: transparent;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail {
          display: flex;
          flex-direction: row-reverse;
          transition: 0.3s ease-out;
          width: 100%;
          padding: 0;
          margin: 0;
      }

      .fold1 .header .bottom .right .find a {
          text-decoration: none;
          overflow: hidden;
          width: 100%;

      }

      .fold1 .header .bottom .right .find a img {
          width: 36px;
      }

      .fold1 .header .bottom .right .find .ccontainer .detail p {
          width: 100%;
          font-size: 16px;
          color: white;
          text-decoration: none;
          height: 24px;
          padding-left: 8px;

      }


      /* Header Email */

      .fold1 .header .bottom .right .mail {
          position: absolute;
          display: block;
          z-index: 1000;
          width: 400px;
          height: 300px;
          margin-top: 120px;
      }

      .fold1 .header .bottom .right .mail a {
          text-decoration: none;
          color: white;
      }

      .fold1 .header .bottom .right .mail img {
          position: absolute;
          margin-top: -38px;
          margin-left: 370px;
          transition: 0.4s all ease-out;

      }

      .fold1 .header .bottom .right .mail h3 {
          padding-top: 100px;
          align-items: center;
          font-size: 22px;
      }

      .fold1 .header .bottom .right .mail h5 {

          font-size: 16px;
          font-family: Medium;
          color: #FE4249;
          overflow: hidden;
          margin-bottom: -100px;
      }

      .fold1 .header .bottom .right .mail em {
          display: none;
          width: 100%;
      }

      .fold1 .header .bottom .right .mail:hover img {
          margin-left: 350px;
          transition: 0.4s all ease-out;
      }

      /* Hide cursor on mobile */
      .cursor {
          display: none;
      }

      /* content styling is done here */

      .cont .phead {
          z-index: 2;
      }

      .cont .clientlogo {
          padding-top: 22%;
          margin: 0 4%;
          position: relative;
          z-index: 2;
      }

      .cont .clientlogo img {
          width: 60px;
      }

      .cont .cover img {
          /* content: url("Kampsta/Kampsta Images/Kampsta Mobile.png"); */
          width: 100vw;
          position: absolute;
          /* top: 10%; */
          bottom: -40px;
          opacity: 100%;
          transform: scale(1.3);
      }

      .cont .tag img {
          position: absolute;
          right: 37%;
          top: 16%;
          transform: scale(0.7);
          visibility: hidden;
          display: none;
      }


      .cont .phead h1 {
          position: absolute;
          top: 18%;
          height: 100%;
          font-family: Medium;
      }

      .cont .phead .phead1 {
          -webkit-text-stroke: 1px #ECE0FC;
          font-family: Bold;
          color: transparent;
          font-size: 60px;
          line-height: 71.5px;
          width: 60px;

      }

      .cont .phead .phead2 {
          /* mix-blend-mode: exclusion; */
          font-size: 30px;
          padding-top: 60px;
          margin-left: 0;
          color: white;
      }


      /* Lable scroller styling */
      .fold1 .label .scroll {
          content: url("Kampsta/Kampsta Images/Scroll.gif");
          width: 55px;
          height: 55px;
      }

      .fold1 .label {

          padding: 0 40%;
          position: absolute;
          width: 100%;
          bottom: 4%;
          z-index: 100;
      }

      .fold1 .cont .label #label-l a {
          padding: 12px;
      }

      /* fold 2 css is here ............ */
      .fold2 {
          width: 100vw;
          height: 100%;
          position: relative;
          background-color: black;

      }

      /* Project Navigation Bar */

      .fold2 .navigation {
          bottom: -2;
          display: flex;
          position: fixed;
          flex-direction: row;
          justify-content: space-evenly;
          background-color: rgba(0, 0, 0, 0.3);
          width: 100%;
          display: none;
          visibility: hidden;
      }

      .fold2 .navigation a {
          padding: 6px 120px 6px 120px;
          background-color: rgba(35, 123, 255, 1);
          text-decoration: none;
          /* color: #FE4249; */
          color: white;
          font-family: Regular;
          font-size: 14px;
      }

      .fold2 .navigation a:hover {
          color: rgba(35, 123, 255, 1);
          background-color: white;
      }



      .fold2 .aboutproject {

          display: block;
          margin: 0 auto;
          width: 100vw;
          z-index: 0;
      }


      .fold2 .projectdetails {
          display: block;
          margin: 0 auto;
          width: 100%;
      }

      /* Next & Previous css is here */

      .nextprev {
          width: 100vw;

          background-color: white;
          display: flex;
          flex-direction: row;
      }



      .nextprev .next,
      .previous {
          width: 50%;
          padding: 20px 0px;
          font-family: Medium;
          font-size: 18px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: white;
          color: #1F1F1F;
          text-decoration: none;
          border: 1px solid #939393;

      }


      /* Fold 4 - Footer mobile css is here -----------*/
      .fold4 {
          display: flex;
          padding: 80px 6%;
          justify-content: space-between;
          color: white;
          background-color: black;
          scroll-snap-align: start;
      }

      .fold4 .left {
          width: 100%;
          display: flex;
          flex-direction: column;
      }

      .fold4 .left h1 {
          font-family: Light;
          color: #939393;
          display: block;
          margin: 0 auto;
          width: 80%;
          text-align: center;

      }

      .fold4 .left h5 {
          padding-top: 40px;
          font-family: Light;
          width: 600px;
          color: #939393;
      }

      .fold4 .left .mail {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
      }

      .fold4 .left .mail a {
          text-decoration: none;
          color: white;
      }

      .fold4 .left .mail img {
          position: relative;
          left: 16px;
          bottom: -52px;
          display: none;

      }

      .fold4 .left .mail h3 {
          font-size: 20px;
          padding-top: 40px;
          align-items: center;

      }

      .find {
          width: 100vw;
          height: 8vh;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 4% 4%;
          background-color: black;
      }

      .find .line {
          width: 300px;
          height: 0.7px;
          border-radius: 50px;
          background-color: white;
          margin-bottom: 40px;
          display: none;
      }

      .find .ccontainer {
          width: 94px;
          justify-content: space-between;
          padding-bottom: 40px;
          transition: 0.3s ease-out;
          background-color: transparent;
      }

      .find .ccontainer:active {

          background-color: transparent;
      }

      .find .ccontainer:active .detail {
          padding: 0 16px;
          transition: all 0.3s ease-in-out;
      }


      .find .ccontainer:active .line {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .find .ccontainer .detail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          transition: 0.3s ease-out;

      }

      .find a {
          text-decoration: none;
      }

      .find .ccontainer .detail p {
          font-size: 16px;
          color: white;
          text-decoration: none;
          height: 24px;

      }

      .find .ccontainer .detail img {
          width: 18px;

      }

      /* Footnote */

      .footnote {
          height: 40vh;
          background-color: black;
          position: relative;
          padding: 2% 4%;

      }

      .footnote p {
          color: #939393;
          font-family: Light;
          font-size: 12px;
          width: 240px;
      }

      .footnote .divide {
          margin-bottom: 12px;
          padding-bottom: 0;
          opacity: 30%;
          border-top: 1px solid gray;
      }

      .footnote .creditname {
          font-family: Medium;
          color: #FE4249;
          opacity: 80%;
      }


  }