::-webkit-scrollbar {
  display: none;
}

:root {
  --light_green: rgba(174, 196, 184, 1);
  --pink:rgba(238, 155, 142, 1);
  --yellow:rgba(228, 133, 83, 1);
  --red:#EC594B;
  --beige:rgba(248, 218, 203, 1);
}

html,
body {
  background-color: orange;
}


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

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-family: "Circular Std";
  font-weight: 500;
  font-size: 58px;
}

p,
a {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Montserrat";
  font-size: 14px;
  font-weight: 500;
  color: #000;
  transition: color 0.3s;
}

h6 {
  position: relative;
  font-family: Montserrat;
  font-size: 4vw;
  letter-spacing: 0.26vw;
  font-weight: bold;
  color: var(--beige); /* Make the fill transparent */
  text-shadow: 
      -1px -1px 0 var(--yellow),  
       1px -1px 0 var(--yellow),
      -1px  1px 0 var(--yellow),
       5px  5px 0 var(--yellow); /* Create a stroke effect */
  line-height: 95%;
}























/* FOOTER ------------------------------------------ */

.JackParow {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--red);
}

.jp_lax_container {
  position : relative ;
  display: inline-block;
  left: -10vw;
  width : 90%;
  height : 100%;
  /* outline: #476F6F 2px solid; */
  overflow: hidden;
}


.JackParowHeader { 
  position: absolute;
   width: 80%;
   top: 35vw;
   left: 34.5vw;
   justify-self: flex-end;
   align-self: flex-end;
 }

 .JackParowHeader h6 {
  font-size: 55px;
}

.jp_lax_01 {
  position : relative ;
  left: 0vw;
  top: 0vh;
  width : 100%;
  z-index: 1;
}

.jp_lax_02 {
  position : relative ;
  left: 30vw;
  top: 8vw;
  width : 50%;
  z-index: 2;
}

.jp_lax_03 {
  position : relative ;
  left: 55vw;
  top: 7vw;
  width : 40%;
  z-index: 3;
}

.jp_lax_04 {
  position : relative ;
  left : 10vw;
  top : 1vw;
  width : 40%;
  z-index: 4;
}

.jp_lax_05 {
  position : relative ;
  left: 12vw;
  top: 18vw;
  width : 40%;
  z-index: 5;
}

/* 
<!-- ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ Pre-loader ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ --> */

.intro{
  position: relative;
  top: 15vw;
  width: 50vw;
  left: 37vw;
}

.overlay2 {
  position: fixed;
  top: 0;
  left: 50vw;
  width: 0vw;
  height: 0;
  background:transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay-content {
  width: 40%;
}

.images2 {
  position: relative;
  height: 550px;
}

.img-holder {
  position: relative;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.img-holder img {
  position: absolute;
  top: 0;
  left: -110%;
}

.text {
  position: relative;
  margin: 1em 0;

}

.counter,
.logo p {
  width: 30vw;
  font-size: 100px;
  text-align: center;
  text-transform: uppercase;
  color: orange;
}

.counter p {
  line-height: 100%;
}

.counter p span,
.logo p span {
  position: relative;
  z-index: -2;
  color: orange;
  opacity: 0;
}

.logo {
  position: absolute;
  top: 0%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  color: orange;
}

.logo p {
  line-height: 100%;
}




.shop {
  display: flex;
  justify-content: flex-end;
  gap: 2em;
}

.hero {
  width: 100vw;
  height: 100vh;
}

.hero img {
  transform: scale(2);
}

.hero-copy {
  position: absolute;
  width: 30vw;
  top: 65%;
  left: 52vw;
  overflow: hidden;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.hero-copy h1 {
  font-family: Montserrat;
  font-weight: 700;
  top: 20vw;
  font-size: 5vw;
  color: var(--red);
  line-height: 100%;
}

.hero-copy h1 span {
  position: relative;
  top: 30vw;
}

@media (max-width: 900px) {
  .overlay-content {
    width: 0%;
  }
  .counter,
  .logo p {
    font-size: 1px;
  }
}




/* <!-- ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ rationaljp ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ --> */
.projectsjp {
  width: 100vw;
  height: 300vh;
  background-color: orange;
  top: 100vw;
}

.galleryjp {
  position: relative;
  width: 80%;
  height: 100vh;
  display: flex;
  top: 5vw;
  flex-direction: column;
  gap: 20em;
}

.projectjp {
  position: relative;
  width: 100vw;
  height: 80vh;
  display: flex;
}

.indexjp {
  flex: 1;
  padding-left: 2em;
  height: 0;
}

.galleryjp .imagesjp {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
  height: 100vh;
  width: 80vw;
}

.galleryjp .imgajp {
  flex: 1;
  width: 200px;
  background-color: lightgray;
}

.imgajp img {
  opacity: 0.9;
}

.indexjp .maskjp {
  position: absolute;
  top: 0;
  left: 2em;
  height: 70px;
  overflow: hidden;
  will-change: transform;
  color: transparent;
}

.indexjp .maskjp p {
  position: relative;
  will-change: transform;
  color: transparent;
}

.indexjp .maskjp p span {
  position: relative;
  display: inline-block;
  will-change: transform;
  color: transparent;
}

.digit-wrapperjp,
.digit-wrapperjp span {
  display: inline-block;
  position: relative;
  will-change: transform;
}

.project-namesjp {
  position: fixed;
  width: 200px;
  top: 60vh;
  left: 10%;
  transform: translateX(0%);
}

.indicatorjp {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.symboljp {
  width: 12px;
  height: 12px;
  background-color: var(--red);
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

.namejp {
  height: 28px;
}

.namejp p {
  color: var(--red);
}

.name.activejp p {
  color: var(--red);
  height: 28px;
}

.preview-imgjp {
  position: fixed;
  bottom: 2em;
  right: 2em;
  max-width: 40vw;
  height: calc(50vh - 2em);
  opacity: 0.9;
}

.progress-barjp {
  position: fixed;
  top: 0;
  right: 0;
  width: 8px;
  height: 100vh;
  background-color: var(--beige);
  transform-origin: top;
  transform: scaleY(0);
}

.preview_vidjp {
  position: absolute;
  left: 0vw;
  width: 50vw;
}

.textjp p {
  position: relative;
  width: 50vw;
  font-family: Montserrat;
  text-transform: lowercase;
  color: white;
  font-size: 15px;
  line-height: 2;
  justify-content: center;
  left: 33vw;
}

.text_briefjp p {
  position: relative;
  width: 50vw;
  top: 7vw;
  text-transform: lowercase;
  color: white;
  font-family: Montserrat;
  font-size: 15px;
  line-height: 2;
  left: 34.5vw;
}

.text_objectivesjp p {
  position: relative;
  font-family: Montserrat;
  text-transform: lowercase;
  color: white;
  width: 50vw;
  font-size: 15px;
  line-height: 2;
  left: 34.5vw;
}

.text_solutionjp p {
  position: relative;
  font-family: Montserrat;
  text-transform: lowercase;
  color: white;
  width: 50vw;
  font-size: 15px;
  line-height: 2;
  left: 34.5vw;
}

.text_targetAjp p {
  position: relative; 
  font-family: Montserrat;
  text-transform: lowercase;
  color: white;
  width: 50vw;
  font-size: 15px;
  line-height: 2;
  left: 34.5vw;
}



.logo_JP {
  position: absolute;
  width: 100vw;
  height: 55vh;
  top: 0vw;
  

}







/* <!-- ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ storyboards ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ --> */
.storyboards {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--beige);

}

.wrappersb {
  width: 50%;
  height: 100%;
  background-color: var(--beige);
  transition: 0.5s background-color;
  padding: 0 0 2em 2em;
}

.sbHeader { 
  position: relative;
   width: 80%;
   top: 2vw;
   left: 4vw;
   justify-self: flex-end;
   align-self: flex-end;
 }

 .sbHeader h6 {
  font-size: 45px;
}


.gallerysb {
  position: relative;
  width: 100%;
  display: flex;
  z-index: 0;
}

.minimapsb {
  position: sticky;
  top: 0;
  width: 25%;
  height: 100vh;
  padding-top: 300px;
  overflow: hidden;
  background-color: var(--light_green);
  transition: 0.5s background-color;
}

.active-img-indicatorsb {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 125px;
  border: 1.5px solid #fff;
  border-radius: 4px;
  mix-blend-mode: difference;
  z-index: 2;
}

.previewsb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1254px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imagessb {
  position: relative;
  top: 0;
  width: 75%;
}

.itemsb {
  position: relative;
  width: 450px;
  height: 300px;
  overflow: hidden;
  margin: 50px auto;
}

.item-imgsb {
  width: 100%;
  height: 100%;
}

.item-copysb {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  text-transform: uppercase;
}

.item-previewsb {
  position: relative;
  width: 160px;
  height: auto;
  padding: 10px;
  overflow: hidden;
}

.hero-imgsb {
  margin-bottom: 2em;
}

.wrappersb.dark-themesb,
.wrappersb.wrappersb.dark-themesb .minimapsb {
  background-color: var(--light_green);
}

.wrappersb.dark-themesb a,
.wrappersb.dark-themesb p,
.wrappersb.dark-themesb h1 {
  color: #000;
}

@media (max-width: 900px) {
  .itemsb {
    width: 400px;
    height: 500px;
  }
}






/* <!-- ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ styleframes ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ --> */


.wrappersf {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  background-color: var(--beige);
  right: 0vw;
  transition: 0.5s background-color;
  padding: 0 0 2em 2em;
}

.sfHeader { 
  position: relative;
   width: 80%;
   top: 2vw;
   left: 4vw;
   justify-self: flex-end;
   align-self: flex-end;
 }

 .sfHeader h6 {
  font-size: 45px;
}

.gallerysf {
  position: relative;
  width: 100%;
  display: flex;
  z-index: 0;
}

.minimapsf {
  position: sticky;
  top: 0;
  width: 25%;
  height: 100vh;
  padding-top: 300px;
  overflow: hidden;
  background-color: var(--light_green);
  transition: 0.5s background-color;
}

.active-img-indicatorsf {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 125px;
  border: 1.5px solid #fff;
  border-radius: 4px;
  mix-blend-mode: difference;
  z-index: 2;
}

.previewsf {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1254px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imagessf {
  position: relative;
  top: 0;
  width: 70%;
}

.itemsf {
  position: relative;
  width: 450px;
  height: 300px;
  overflow: hidden;
  margin: 50px auto;
}

.item-imgsf {
  width: 100%;
  height: 100%;
}

.item-copysf {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  text-transform: uppercase;
}

.item-previewsf {
  position: relative;
  width: 160px;
  height: auto;
  padding: 10px;
  overflow: hidden;
}

.hero-imgsf {
  margin-bottom: 2em;
}

.wrappersf.dark-themesf,
.wrappersf.wrappersf.dark-themesf .minimapsf {
  background-color: var(--light_green);
}

.wrappersf.dark-themesf a,
.wrappersf.dark-themesf p,
.wrappersf.dark-themesf h1 {
  color: #000;
}

@media (max-width: 900px) {
  .itemsf {
    width: 400px;
    height: 500px;
  }
}







/* Existing CSS rules... */

.item-imgsb img,
.item-imgsf img {
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.itemsb:hover .item-imgsb img,
.itemsf:hover .item-imgsf img {
  transform: scale(1.1); /* Scale the image up by 10% on hover */
}

/* Existing CSS rules... */











/* <!-- ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ MENU PAGE ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ --> */

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.container {
  width: 100%;
  height: 100%;
  background: url(./assets/hero.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.menu-open {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  color: #eee5d2;
}

.menu-close {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  color: #a39b89;
}

.menu-open,
.menu-close {
  margin: 0.75em;
  padding: 0.75em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  cursor: pointer;
}

.menu-open p,
.menu-close p {
  position: relative;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 2vw;
  height: 100vh;
  display: flex;
  z-index: 2;
}

.menu-item {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  background: #eee5d2;
  /* border-left: 1.5px solid rgba(163, 155, 137, 0.35); */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  margin-left: -1px;
}

.menu-item-index {
  height: 100%;
  padding: 1.5em 0.5em 2em 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #a39b89;
}

.menu-item-index p:nth-child(2) {
  position: relative;
  transform: rotate(-90deg);
}

.menu-link {
  position: absolute;
  bottom: 20%; /* Change this value to move the items higher */
  left: 55%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.menu-item:nth-child(3) .menu-link {
  bottom: 30%; /* Adjust this value as needed */
}

.menu-link p {
  position: relative;
  display: flex;
  font-family: "Montserrat";
  font-size: 100px;
  font-weight: lighter;
  transition: all 0.5s;
}

.menu-link p span {
  position: relative;
}

.menu-item .menu-link-main,
.menu-item .menu-link-hover {
  transition: all 0.5s;
}

.menu-link-main p {
  color: #2c221d;
}

.menu-item .menu-link-hover {
  left: 150%;
  color: rgba(163, 155, 137, 0.85);
}

.menu-item:hover .menu-link-main {
  left: -100%;
}
.menu-item:hover .menu-link-hover {
  left: 50%;
}

.menu-img {
  position: absolute;
  width: 75%;
  height: 35%;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: 0.5s all cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu-item.menu-opened:hover .menu-img {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@media (max-width: 900px) {
  .menu {
    flex-direction: column;
  }

  .menu-link {
    bottom: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .menu-item:nth-child(3) .menu-link {
    bottom: unset;
  }

  .menu-link p {
    font-size: 80px;
  }

  .menu-link-hover {
    display: none;
  }

  .menu-item:hover .menu-link-main {
    top: 50%;
    left: 50%;
  }

  .menu-item-index {
    align-items: center;
  }

  .menu-item-index p:nth-child(1) {
    padding: 0 0.5em;
  }

  .menu-img {
    display: none;
  }
}

/* // <!-- ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ frame by frames ▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆▆ --> */


  
  .fbfContainer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 244, 244);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.5fr repeat(3, 1fr)0.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }

    
    
    .fbfHeader { 
     position: relative;
      width: 80%;
      top: -2vw;
      justify-self: flex-end;
      align-self: flex-end;
    }

    .fbfHeader h6 {
      font-size: 45px;
    }

    .galleryHeader h2 {
      color: #000;
    }
    .galleryIMG1 { 
      grid-area: 2 / 1 / 3 / 2; 
      width: 100%;
    }

    .galleryIMG2 { 
      grid-area: 2 / 2 / 3 / 3;
      width: 100%;
    }

    .galleryIMG3 { 
      grid-area: 2 / 3 / 3 / 4;   
      width: 100%;
    }

    .galleryIMG4 { 
    grid-area: 3 / 1 / 4 / 2; 
    width: 100%;
    }

    .galleryIMG5 { 
      grid-area: 3 / 2 / 4 / 3; 
      width: 100%;
    }

    .galleryIMG6 { 
    grid-area: 3 / 3 / 4 / 4; 
    width: 100%;
    }

    .galleryIMG7 { 
      grid-area: 4 / 1 / 5 / 2; 
      width: 100%;
      }
  
    .galleryIMG8 { 
        grid-area: 4 / 2 / 5 / 3; 
        width: 100%;
      }
  
    .galleryIMG9 { 
      grid-area: 4 / 3 / 5 / 4; 
      width: 100%;
      }

.fbfContainer img, 
.fbfContainer video {
  transition: transform 0.3s ease;
}

.fbfContainer img:hover, 
.fbfContainer video:hover {
  transform: scale(1.5);
  z-index: 2;
}

.fbfContainer img:not(:hover), 
.fbfContainer video:not(:hover) {
  opacity: 0.8;
}








 /* ----------------------------------------- S H O W R E E L  S E C T I O N  ----------------------------------- */
  
 .Check_Section {
  width: 100vw;
  height: 110vh;
  position: relative;
  left: 0vw;
  top: 0vh;
  background: var(--light_green);
  /* overflow: hidden; */
}

.endvid4 h6 {
  position: absolute;
  top: 3vw;
  left: 20vw;
  font-size: 35px;
}


.Showreel_Video {
  width: 60vw;
  height: 71vh;
  position: relative;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1440px) {
  .Showreel_Video {
    width: 63vw;
    height: 63vh;
  }
}

@media only screen and (max-width: 1194px) {
  .Showreel_Video {
    width: 85vw;
    height: 70vh;
  }
}







/* FOOTER ------------------------------------------ */


.footer {
  position: relative;
  width: 100vw;
  height: 21vw;
  background: var(--pink);
}

.footer_lax_container {
  position : relative ;
  display: inline-block;
  width : 70vw;
  height : 20vw;
  /* outline: #476F6F 2px solid; */
  overflow: hidden;
}


.connect_text {
  position: absolute;
  top:12vw;
  left: 10vw;
  font-family : Quincy CF;
  font-weight: 400;
  font-size : 5.5vw;
  letter-spacing : 0.2vw;
  color : var(--beige);
}


.contact_info{
  position: absolute;
  line-height: 1;
  width: 40vw;
  top: 3vw;
  left: 65vw;
}

.connect_line {
  position: absolute;
  width: 28vw;
  top: 60%;
  left: 38vw;
  transform: translate(-50%, -50%);
}

.j_lax_01 {
  position : relative ;
  left: 1vw;
  top: 2vw;
  width : 4vw;

}

.j_lax_02 {
  position : relative ;
  left: 8vw;
  top: 8vw;
  width : 6vw;

}

.j_lax_03 {
  position : relative ;
  left: 6vw;
  top: 7vw;
  width : 8vw;

}