/* Responsive CSS Styles */

/* Mobile Styles */
@media (max-width: 950px) {
.cursor {
    display: none !important;
  }

}
/* Mobile Styles */


@media (max-width: 750px) {
  .mobile {
    display: flex !important;
  }
  .desktop {
    display: none !important;
  }
  .cursor {
    display: none;
  }
  .wave-area {
    position: fixed;
    bottom: 15vw;
    right: 3.25vw;
    z-index: 88;
    height: 12vw;
    width: 12vw;
    scale: 80%;
  }
  .wave-area svg {
    scale: 250%;
    transform: rotate(180deg) translateY(0.75vw);
  }
  .foto999-mobile-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    display: flex;
    height: 50px;
    height: 12.5vw;
    padding: 0 1% 0%;
  }
  .foto999-hero-content {
    position: absolute;
    bottom: 18vh;
    left: 3vw;
  }
  .foto999-mobile-bottom ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    list-style: none;
    background: #fff;
    padding: 0 4%;
  }
  .photo999-center-left {
    width: fit-content;
    border-right: 0;
    justify-content: center;
    flex-direction: column;
    align-items: start;
  }
  .photo999-center-left p {
    font-size: 2.5vw;
    width: fit-content;
  }
  .foto999-mobile-bottom .text {
    font-size: 2.5vw;
  }
  .foto999-mobile-bottom ul li p {
    font-family: "neue-haas-grotesk-display";
    font-weight: 500;
    font-style: normal;
    font-size: 2.5vw;
  }
  .photo999-header {
    height: 20vw;
    width: 100%;
    border-bottom: none;
    padding: 0 4.5%;
  }

  .photo999-center {
    height: 100%;
    width: fit-content;
    border: none;
  }
  .photo999-center-center {
    width: fit-content;
  }
  .photo999-center-right {
    width: max-content;
    height: 100%;
    border-left: none;
  }
  .photo999-logo svg {
    height: 100%;
    width: 100%;
  }
  .photo999-center-right a {
    font-size: 2.5vw;
  }
  .photo999-logo {
    width: 15%;
    height: 100%;
  }
  .photo999-hero-section {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .photo999-anime-svg-container {
    top: 20vh;
    right: -6vh;
    width: 80%;
    height: 30%;
  }
  .foto999-hero-content h2 {
    font-size: 7.95vw;
    line-height: 1.3;
  }
  .foto999-hero-content h2 span {
    color: #ffffff;
  }
  .foto999-video-section {
    height: 85vh;
    width: 100%;
  }
  .foto999-video-content {
    width: 100%;
    height: 70%;
  }
  .video-ruler {
    height: 12.5vw;
    width: 100%;
    padding: 0 5%;
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
  }
  .ruler-numbers {
    font-size: 3.5vw;
    width: 175%;
  }
  .ticks::before {
    background: repeating-linear-gradient(
      90deg,
      #a2a2a2,
      #a2a2a2,
      transparent 0.065vw,
      transparent 1.019vw
    );
  }
  .foto999-expertise-content {
    width: 100%;
    height: 100%;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    padding: 0 5%;
  }
  .foto999-expertise-title h2 {
    font-size: 8.2vw;
  }
  .foto999-expertise-title h4 {
    font-size: 3.69vw;
  }
  .foto999-expertise-title {
    width: 100%;
    height: auto;
  }
  .foto999-expertise-menu {
    width: 100%;
    height: 100%;
    padding: 8vh 0;
  }
  .foto999-expertise-section {
    height: 70vh;
    width: 100%;
  }

  .foto999-expertise-menu ul {
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    gap: 5vh;
  }
  .foto999-expertise-menu ul li {
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: end;
    & > a {
      font-size: 4vw;
    }
  }

  .foto999-expertise-menu ul li a span {
    font-size: 6vw;
    padding: 0 4.1vw 0 0;
  }
  .foto-process-content ul li {
    width: 100%;
    /* padding: 5vh 4vw; */
    position: relative;
  }
  .foto-process-content ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    flex-direction: column;
    /* height: 25vh; */
    height: auto;
    /* overflow: hidden;
            scrollbar-width: none; */
    /* overflow-y: scroll; */
  }
  .foto999-process-title {
    padding: 8vh 0 8vh;
  }
  .foto999-process-title h2 {
    font-size: 10.25vw;
  }
  .foto999-process-title p {
    font-size: 1.75vh;
  }
  .foto999-title-container {
    padding: 15vh 2%;
    position: relative;
  }
  .foto-process-content ul li p {
    font-size: 2vh;
  }
  .foto-process-content ul li h3 {
    font-size: 3vh;
  }
  .foto-process-content ul li div {
    font-size: 1.45vh;
  }
  .foto999-menu {
    width: 100%;
    padding: 0 5% 5% 5%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column;
    gap: 10vh;
  }

  .foto999-menu ul {
    list-style: none;
    display: flex;
    gap: 0.5vh;
  }
  .foto999-menu ul p {
    font-size: 6.5vw;
  }
  .foto999-menu ul li a {
    font-size: 3vw;
  }
  .foto999-menu ul div {
    display: flex;
    gap: 4.1vw;
  }
  .c-w-m-t {
    align-items: end;
  }
  .foto999-menu ul.c-w-m-t p {
    font-size: 6.5vw;
    width: 70vw;
    margin-left: 20vw;
    text-align: end;
  }

  .foto999-menu ul.c-w-m-t li a {
    font-size: 6.5vw;
  }
  .foto999-product-ul li {
    min-width: 49%;
    max-width: 49%;
  }
  .foto999-product-ul li.g {
    min-width: 100%;
    max-width: 100%;
  }

  .foto999-process-section {
    padding-bottom: 5vh;
  }
  .foto999-process-title {
    /* position: sticky;
    top: 10vw;
    background-color: #fff;
    z-index: 2;
    padding: 10vh 0 20vh;
    backdrop-filter: none; */
  }

  .foto-process-content {
    /* margin-top: -30vh;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0; */
    /* overflow-y: scroll; */
  }
  .foto-process-content ul li.b1-mob {
  border-left: 0.1vw solid #0005;
}
  .foto-process-content ul p {
    font-size: 4vw;
  }
  .foto-process-wrapper-mob {
    position: sticky;
    height: 40vh;
    width: 100%;
    background-color: white;
    top: 60vh;
    z-index: 1;
  }
  ul.foto999-drawer-menu {
    list-style: none;
    padding: 0 4.1vw 0 0;
  }
  .foto999-drawer-logo {
    min-width: 10vw;
    margin-left: 2vw;
    height: 10vw;
  }
  .text-slide-animate1 {
    animation: text-slide1 1s linear forwards;
    animation-timeline: view();
    animation-range: entry 5% cover 50%;
    transform-origin: left;
    max-width: fit-content;
    overflow: hidden;
  }
  @keyframes text-slide1 {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 80vw;
      opacity: 1;
    }
  }

  .foto999-drawer-center ul.foto999-drawer-title li a {
    font-size: 10.3vw;
    -webkit-text-stroke-width: 0.2vw;
  }
  ul.foto999-drawer-menu li a {
    font-size: 8.2vw;
  }
  .foto999-drawer-bottom {
    height: auto;
    flex-direction: column-reverse;
    width: 100%;
    gap: 5vh;
    padding: 5vh 2%;
  }
  .c-n-t-l {
    width: 100%;
    height: 100%;
  }
  .i-menifest {
    width: 100%;
    height: 100%;
  }
  .i-menifest h3 {
    font-size: 4vw;
  }
  .i-menifest a {
    font-size: 4vw;
  }
  .c-n-t-l h3 {
    font-size: 7vw;
  }
  .foto999-drawer-top {
    border-bottom: 0;
    padding: 0 5% 0 0;
  }
  .foto999-drawer-right .photo999-center-right a {
    color: #fff;
  }
  .foto999-drawer-right {
    width: max-content;
  }
  .foto999-title-container h2 {
    width: 97vw;
  }

  /* ======================= 
    Expertise Li Css 07-03 date
==========================*/
  .foto999-mobile-expertise-li {
    position: fixed;
    top: 20vw;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    transition: height 0.3s ease;
  }
  .mob-li-height {
    height: 55vw;
  }
  .foto999-mobile-expertise-li ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    gap: 7vw;
    margin: 7vw 0 10vw;
  }
  .foto999-mobile-expertise-li ul a {
    text-decoration: none;
    font-size: 3.5vw;
    z-index: 2;
    min-width: fit-content;
    color: black;
    font-family: "neue-haas-grotesk-display";
  }
  /* Tooltip */
  .tooltip {
    top: 30%;
    right: 0;
    left: auto;
    padding: 2% 2.5%;
    width: 65%;
  }

  /* Mansory Grid */
  .grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(33vw, 1fr));
    grid-auto-rows: 47vw;
    grid-gap: 1vw;
  }
  .grid-wrapper .tall-video {
    grid-column: span 2;
  }
  .grid-wrapper .small-tall {
    grid-row: span 2;
  }
  .grid-wrapper .small-wide {
    grid-column: span 2;
    grid-row: span 2;
  }
  .grid-wrapper img,
  .grid-wrapper video {
    border-radius: 3px;
  }
}