@font-face {
  font-family: 'MyWebFont';
  src: url('fonts/HelveticaNeueCyr-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'MyWebFont2';
  src: url('fonts/HelveticaNeueCyr-Roman.woff2') format('woff2');
}

::-webkit-scrollbar {
  width: 7px; 
}

::-webkit-scrollbar-track {
  border-radius: 10px; 
}

::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 10px;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'MyWebFont';
  overflow-x: hidden;
  background-color: black;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.loader {
  height: 10px;
  background-color: rgb(255, 0, 0);
  position: absolute;
  top: 0;
}

.webgl {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  outline: none;
}

.webg {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
  z-index: 1;
  width: 100vw;
  height: 100vh;


}

#section1 {
  z-index: 2;
  position: relative;
  height: 100vh;
}



#menuholder {
  position: fixed;
  width: auto;
  right: 9vw;
  margin-top: 3vh;
  z-index: 30 !important;
  display: flex;
  justify-content: flex-end;
}

#logo {
  z-index: 3;
  position: absolute;
  display: none;
  top: 6vh;
  left: 5vw;

}

.subcontainer {
  width: auto;
  margin: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
}

.navbar {
  width: auto;
  min-height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 3;
}

.nav-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0rem;
  z-index: 3;
}

.nav-item {
  list-style: none;
}

.hamburger {
  display: none;
  cursor: pointer;
  z-index: 10;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease;
  background-color: rgb(255, 255, 255);
}

#menuholder li a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 14px 40px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
  white-space: nowrap;
}

#menuholder li a:hover {
  color: #ffffff;
  opacity: 1;
}

@media (max-width:1600px) {
  #menuholder {
    right: 5vw;
  }
}

@media (max-width:1120px) {
  #menuholder {
    right: 20px;
  }

  .hamburger {
    display: block;
    margin-left: auto;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: 100%;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: 0.3s ease;
    padding-top: 80px;
    gap: 2rem;
  }

  .nav-menu.active {
    left: 0;
  }

  #menuholder li a {
    font-size: 24px;
    padding: 15px 30px;
  }
}

@media (max-width:600px) {
  #menuholder {
    right: 15px;
  }

  #menuholder li a {
    font-size: 20px;
    padding: 12px 24px;
  }
}

/******** Nav ************/
/******** Nav ************/

#section1 h1 {
  position: absolute;
  top: 5vh;
  left: 4vw;
  color: white;
  font-size: 72px;
  line-height: 72px;
  font-weight: 500;
  z-index: 4;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#scrolldown {
  position: absolute;
  bottom: 5vh;
  left: 4vw;
  color: white;
  font-size: 17px;
  z-index: 2;

}

#sect1p {
  position: absolute;
  top: 70vh;
  left: 19vw;
  z-index: 2;
}

#sect1p p {
  color: white;
  width: 27.5vw;
  font-size: 1rem;
  line-height: 160%;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

#w {
  position: absolute;
  left: 0;
  top: 0;
}

#section2 {
  position: relative;
  height: 100vh;
}

.webgl4 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  outline: none;
}

#section3 {
  position: relative;
  height: 100vh;
  z-index: 20;
  scroll-margin-top: -50px;
}

.wrapper4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.wrapper4 .marquee p {
  font-size: 3rem;
  font-weight: 300;
}

#full_video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#full_video img {

  width: 140px;
  height: 140px;
  cursor: pointer;
}

#videofullpage {
  position: fixed;
  overflow-y: hidden;
  overscroll-behavior: contain;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 178;
  background: black;
  width: 100vw;
  height: 100vh;

}

#videofullpage video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
}

#videofullpage img {
  position: fixed;
  width: 30px;
  height: 30px;
  top: 40px;
  right: 40px;
  cursor: pointer;
  z-index: 1000;
}

#section4 {
  z-index: 2;
  position: relative;
  height: 100vh;

}

.sect4container {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;

}

.sect4h1 h1 {
  color: white;
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 100%;
  width: 65vw;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sect4cont {
  margin-top: 20vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20%;
}

.sect4p {
  display: block;
}

.sect4p span {
  display: block;
  background-color: white;
  width: 30vw;
  height: 1px;
  margin-top: 7vh;
}

.sect4p p {
  font-size: 1rem;
  color: white;
  width: 30vw;
  text-justify: inter-word;
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  font-weight: 400;
}

#section5 {
  position: relative;
  height: 100vh;
  z-index: 2;
}

#sect5cont {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#section5 p {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 7px;
}

#section5 h1 {
  font-family: 'MyWebFont2';
  color: white;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.wrapper9 {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotateY(35deg) skewY(-13deg);
  transform: translate(-50%, -50%);
  max-width: 100%;
  overflow: hidden;
  opacity: 0.5;
  perspective: 300px;


}

.wrapper9 div {
  transform-style: preserve-3d;


}

.wrapper9 img {
  width: 24vw;
  height: 15vw;
}

.marquee5 {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 50s linear infinite;
}

#section6 {
  position: relative;
  height: 110vh;
  z-index: 2;
}

.sect6container {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sect6h1 h1 {
  color: white;
  font-size: 3rem;
  font-weight: 500;
  line-height: 100%;
  width: 55vw;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sect6cont {
  margin-top: 15vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20%;
}

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

.sect6p span {
  display: block;
  background-color: white;
  width: 30vw;
  height: 1px;
  margin-top: 5vh;
}

.sect6p p {
  font-size: 0.9rem;
  color: white;
  width: 30vw;
  text-justify: inter-word;
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  font-weight: 400;
}

#section7 {
  position: relative;
  z-index: 2;
  height: 950vh;
}

#recwor {
  position: absolute;
  top: 15vh;
  left: 50vw;
  transform: translate(-50%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section7 h1 {
  font-size: 9.3rem;
  color: white;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.mod {
  display: none;
  position: fixed;
  z-index: 999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
}

.mod .modimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.mod .modimg img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

/* Hide navigation elements when any model is visible */
body:has(.mod[style*="display: block"]) .hamburger,
body:has(.mod[style*="display: block"]) .nav-menu,
body:has(.mod[style*="display: block"]) #menuholder,
body:has(.mod[style*="display: block"]) #backtotop,
body:has(#videofullpage[style*="display: block"]) .hamburger,
body:has(#videofullpage[style*="display: block"]) .nav-menu,
body:has(#videofullpage[style*="display: block"]) #menuholder,
body:has(#videofullpage[style*="display: block"]) #backtotop {
  display: none !important;
}

#xbutton1,
#xbutton2,
#xbutton3,
#xbutton4,
#xbutton5,
#xbutton6,
#xbutton7,
#xbutton8,
#xbutton9,
#xbutton10,
#xbutton11,
#xbutton12,
#xbutton13,
#xbutton14,
#xbutton15,
#xbutton16,
#xbutton17,
#xbutton18,
#xbutton19 {
  position: fixed;
  width: 30px;
  height: 30px;
  top: 40px;
  right: 40px;
  cursor: pointer;
  z-index: 1000;
}

.recentworkcontainer {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 45vh;
  left: 50vw;
  transform: translate(-50%);
  width: 37vw;
  height: 37vh;
  cursor: pointer;
}

.recentimg img {
  height: 95%;
  bottom: auto;
  left: 0;
  right: auto;
  top: 0;
  width: 100%;
  object-fit: cover;
  z-index: 8;
  cursor: pointer;
}

.recenth2 {
  font: 'MyWebFont';
  font-size: 1.2rem;
  /* margin-top: -120px; */
  font-weight: 100;

}

.recentp {
  margin-top: 5px;
  color: rgb(166, 166, 166);
  display: flex;
  justify-content: space-between;
}

.year {
  color: white;
}

.sect7rec2 {
  top: 121vh;
  left: 28vw;
}

.sect7rec3 {
  top: 134vh;
  left: 72vw;
}

.sect7rec4 {
  top: 198vh;
  left: 28vw;
}

.sect7rec5 {
  top: 220vh;
  left: 70vw;
}

.sect7rec6 {
  top: 275vh;
  left: 28vw;
}

.sect7rec7 {
  top: 300vh;
  left: 72vw;
}

.sect7rec8 {
  top: 350vh;
  left: 28vw;
}

.sect7rec9 {
  top: 380vh;
  left: 72vw;
}

.sect7rec10 {
  top: 430vh;
  left: 28vw;
}

.sect7rec11 {
  top: 460vh;
  left: 72vw;
}

.sect7rec12 {
  top: 510vh;
  left: 28vw;
}

.sect7rec13 {
  top: 550vh;
  left: 72vw;
}

.sect7rec14 {
  top: 600vh;
  left: 28vw;
}

.sect7rec15 {
  top: 640vh;
  left: 72vw;
}

.sect7rec16 {
  top: 690vh;
  left: 28vw;
}

.sect7rec17 {
  top: 740vh;
  left: 72vw;
}

.sect7rec18 {
  top: 800vh;
  left: 28vw;
}

.sect7rec19 {
  top: 850vh;
  left: 72vw;
}

#divqr {
  position: absolute;
  left: 10vw;
  bottom: 10vh;

  /* max-width: 150%; */
  /* overflow: hidden;  */
}

.wrapper {
  position: absolute;
  top: 5vh;
  max-width: 100%;
  overflow: hidden;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 50s linear infinite;
}

.marquee p {
  display: inline-block;
  font-size: 5rem;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

#section8 {
  position: relative;
  height: 115vh;
  z-index: 2;
}

#section8 h1 {
  position: absolute;
  font-size: 2.8rem;
  top: 32vh;
  left: 15vw;
  width: 70%;
  line-height: 110%;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.sect8div {
  position: absolute;
  top: 70vh;
  left: 50vw;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18%;
}

.sect8divr p {
  width: 500px;
  line-height: 150%
}

#section9 {
  height: 100vh;
  position: relative;
  z-index: 2;

  /* justify-content: space-evenly; */
  /* align-items: center; */
  /* gap: 50%; */
}

.sect9cont {
  margin-left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

}

#backtotop {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 90px;
  right: 20px;
  cursor: pointer;
  z-index: 999999999 !important;
  display: none;
}

.sect9elem {
  display: flex;
  justify-content: space-between;
  width: 65%;
}

.sect9head {
  font-size: 1.4rem;
  line-height: 100%;
}

.sect9elem span {
  display: block;
  background-color: white;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sect9p {
  line-height: 200%;
  font-size: 1rem;
}

.fwa {
  margin-top: 2vh;
}

.cssdesign {
  margin: 5vh 0;
}

.award {
  margin: 5vh 0;
}

#section10 {
  position: relative;
  height: 100vh;
  z-index: 2;
}

.webgl3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;

}

.footer {
  position: absolute;
  top: 70vh;
  left: 20vw;
}

.footerleftcont {
  display: flex;
  gap: 15vw;
}

.footerright {
  position: absolute;
  top: 70vh;
  left: 70vw;
}

.footerright a {
  padding: 0px 20px;
}

.socials {
  margin-top: -5px;
}

.footerleftdiv a {
  margin-left: -20px;
}

.footerleftdiv p {
  line-height: 200%;
}

.footerright div a {
  margin-left: -20px;
}

.footerright div {
  line-height: 200%;
}

#section10 a {
  color: white;
  text-decoration: none;
}

#section10 a:hover {
  text-decoration: underline;
}

.wrapper2 {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  max-width: 100%;
  overflow: hidden;
}

@media (max-width:1200px) {
  .sect4h1 h1 {
    font-size: 3.5rem;
    width: 70vw;
  }

  .sect4cont {
    margin-top: 20vh;
  }

  .sect6h1 h1 {
    font-size: 2.5rem;
    width: 65vw;
  }

  .sect6p p {
    width: 40vw;
  }

  .sect6p span {
    width: 40vw;
  }

  #section8 h1 {
    font-size: 2.6rem;
    width: 70%;
  }
}
@media (max-width:1300px) {
  #sect5cont {
    width: 60%;
  }
  div#sect1p {
    top: 78vh;
  }
}
@media (max-width:1120px) {
  #sect5cont {
    width: 75%;
}
.clients {
  width: 70px!important;
  height: 70px!important;
}
.nav-menu {
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
  align-items: center;
}

div#sect1p {
  top: 78vh;
}
  #logo {
    display: none;
  }

  #section1 h1 {
    font-size: 50px;
    line-height: 52px;
  }

  #sect1p {
    top: 70vh;
    left: 13vw;
  }

  #sect1p p {
    width: 50vw;
    font-size: 1rem;
    line-height: 160%;
    font-weight: 300;
  }

  #scrolldown {
    display: none;
  }

  .sect4h1 h1 {
    font-size: 3rem;
    width: 80vw;
  }

  .sect4cont {
    margin-top: 20vh;
  }

  .sect6h1 h1 {
    font-size: 2.3rem;

  }

  #section7 h1 {
    font-size: 7rem;
  }

  .marquee p {
    font-size: 4rem;
    font-weight: 500;
  }

  #section8 h1 {
    font-size: 2.4rem;
    top: 32vh;
    left: 15vw;
    width: 80vw;
    line-height: 110%;
  }

  #backtotop {
    bottom: 90px;
    right: 15px;
  }
  .sect7rec2 {
    top: 95vh;
    left: 28vw;
  }
  
  .sect7rec3 {
    top: 115vh;
    left: 72vw;
  }
  
  .sect7rec4 {
    top: 150vh;
    left: 28vw;
  }
  
  .sect7rec5 {
    top: 175vh;
    left: 70vw;
  }
  
  .sect7rec6 {
    top: 205vh;
    left: 28vw;
  }
  
  .sect7rec7 {
    top: 235vh;
    left: 72vw;
  }
  
  .sect7rec8 {
    top: 260vh;
    left: 28vw;
  }
  
  .sect7rec9 {
    top: 290vh;
    left: 72vw;
  }
  
  .sect7rec10 {
    top: 315vh;
    left: 28vw;
  }
  
  .sect7rec11 {
    top: 340vh;
    left: 72vw;
  }
  
  .sect7rec12 {
    top: 365vh;
    left: 28vw;
  }
  
  .sect7rec13 {
    top: 390vh;
    left: 72vw;
  }
  
  .sect7rec14 {
    top: 415vh;
    left: 28vw;
  }
  
  .sect7rec15 {
    top: 445vh;
    left: 72vw;
  }
  
  .sect7rec16 {
    top: 470vh;
    left: 28vw;
  }
  
  .sect7rec17 {
    top: 500vh;
    left: 72vw;
  }
  
  .sect7rec18 {
    top: 525vh;
    left: 28vw;
  }
  
  .sect7rec19 {
    top: 555vh;
    left: 72vw;
  }
  #section7 {
    height: 620vh;
  }
}

@media (max-width:800px) {
  .hover svg {
    width: 120px;
    height: 120px;
  }

  .read_more {
    width: 120px;
    height: 120px;
  }

  .sect4h1 h1 {
    font-size: 2.2rem;
    width: 80vw;
  }

  .sect4cont {
    flex-direction: column-reverse;
    margin-top: 19vh;
  }

  .sect4p p {
    width: 60vw;
  }

  .sect4p span {
    width: 60vw;
    margin-top: 3vh;
  }

  #full_video img {
    width: 120px;
    height: 120px;
  }

  #section5 h1 {
    font-size: 4.5rem;
    line-height: 120%;
  }

  .sect6h1 h1 {
    font-size: 2rem;
    width: 65vw;
  }

  .sect6cont {
    flex-direction: column-reverse;

  }

  .sect6h1 h1 {
    font-size: 1.5rem;
    width: 75vw;
  }

  .sect6p p {
    width: 80vw;
  }

  .sect6p span {
    width: 80vw;
  }

  #section7 h1 {
    font-size: 5rem;
  }

  #section7 {
    height: 420vh;
  }

  .bigcontainer {
    position: absolute;
    top: 35vh;
    left: 68vw;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

  }

  .wid800 {
    /* position: relative; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
  }

  .recentworkcontainer {
    top: 20vh;
    position: inherit;
    width: 40vw;
    height: 38vh;

  }

  .recenth2 {
    font-size: 0.8rem;
  }

  .recentp {
    font-size: 0.9rem;
  }

  .recentimg img {
    height: 90%;
  }

  .sect8div {
    flex-direction: column-reverse;

  }

  .marquee p {
    font-size: 2.9rem;
    font-weight: 500;
  }

  #section8 {
    height: 105vh;
  }

  #section8 h1 {
    font-size: 1.5rem;
    top: 26vh;
    left: 50%;
    transform: translate(-50%);
    width: 75vw;
    line-height: 110%;
  }

  .sect8div {
    top: 55vh;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .sect8divr p {
    width: 75vw;
  }

  #divq {
    margin-top: 20px;
    margin-left: -50%;
  }

  .sect8divr p {
    font-size: 1rem;
  }

  .sect9cont {
    margin-left: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  .sect9elem {
    width: 90vw;
  }

  .footer {
    font-size: 0.9rem;
    left: 10vw;
  }

  .footerright {
    font-size: 0.9rem;
    left: 70vw;
  }

  #backtotop {

    bottom: 90px;
    right: 25px;
  }
}

@media (max-width:600px) {
  .hamburger {
    margin-left: 75%;
  }

  #section1 h1 {
    font-size: 30px;
    line-height: 32px;
  }

  #sect1p {
    top: 70vh;
    left: 5vw;
  }

  #sect1p p {
    width: 50vw;
    font-size: 1rem;
    line-height: 160%;
    font-weight: 300;
  }

  #sect1p p {
    width: 90vw;
    font-size: 1rem;
    line-height: 160%;
    font-weight: 300;
  }

  #section1 li a {
    font-size: 10vw;
  }

  .sect4h1 h1 {
    font-size: 2rem;
    width: 80vw;
  }

  .sect4cont {
    flex-direction: column-reverse;
    margin-top: 19vh;
  }

  #full_video img {
    width: 120px;
    height: 120px;
  }

  .hover svg {
    width: 100px;
    height: 100px;
  }

  .read_more {
    width: 100px;
    height: 100px;
  }

  .sect4p p {
    width: 80vw;
  }

  .sect4p span {
    width: 80vw;
  }

  #section5 {
    height: 70vh;
  }

  #section5 h1 {
    font-size: 3rem;
    line-height: 120%;
  }

  .sect6cont {
    flex-direction: column-reverse;

  }

  .sect6h1 h1 {
    font-size: 1.5rem;
    width: 75vw;
  }

  .sect6p p {
    width: 80vw;
  }

  .sect6p span {
    width: 80vw;
  }

  #section7 h1 {
    font-size: 3rem;
  }

  #section7 {
    height: 915vh;
  }
  .clients {
    width: 100px !important;
    height: 100px !important;
}
  .bigcontainer {
    position: absolute;
    top: 30vh;
    left: 87vw;
    transform: translate(-50%);
    width: 100%;
  }

  .wid800 {
    display: flex;
    flex-direction: column;

  }

  .recentworkcontainer {
    top: 20vh;
    position: inherit;
    width: 75vw;
    height: 44vh;
  }

  .recentimg img {
    height: 95%;

  }

  .recenth2 {
    font-size: 1rem;
  }

  .recentp {
    font-size: 0.9rem;
  }

  .marquee p {
    font-size: 3rem;
    font-weight: 500;
  }

  #section8 h1 {
    font-size: 1.5rem;
    top: 28vh;
    left: 15vw;
    width: 80%;
    line-height: 110%;
  }

  .sect8div {
    flex-direction: column-reverse;

  }

  .marquee p {
    font-size: 2.9rem;
    font-weight: 500;
  }

  #section8 h1 {
    font-size: 1.5rem;
    top: 26vh;
    left: 50%;
    transform: translate(-50%);
    width: 75vw;
    line-height: 110%;
  }

  .sect8div {
    top: 55vh;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .sect8divr p {
    width: 75vw;
  }

  #divq {
    margin-top: 20px;
    margin-left: -50%;
  }

  .orange img {
    width: 130px;
    height: 130px
  }

  .white img {
    width: 130px;
    height: 130px
  }

  .sect8divr p {
    font-size: 1rem;
  }

  .footer {
    font-size: 0.8rem;
    top: 75vh;
    left: 5vw;
  }

  .footerright {
    top: 75vh;
    font-size: 0.8rem;
    left: 65vw;
  }

  #backtotop {
    width: 60px;
    height: 60px;
    bottom: 90px;
    right: 10px;
  }
  #sect5cont {
    width: 75%;
  }
  div#sect1p {
    top: 60vh;
  }
}
@media (max-width:430px) {
  .hamburger {
    margin-left: 70%;
  }
  .webgl {
    z-index: 1;
  }
  #section1 h1 {
    font-size: 30px;
    line-height: 32px;
  }
  .sect6container {
    align-items: normal;
  }
  .sect4h1 h1 {
    width: 82vw;
  }
  #section3 {
    height: 88vh;

}
.sect4cont {
  margin-top: 5vh;
}
  #full_video img {
    width: 110px;
    height: 110px;
  }

  .wrapper9 img {
    width: 60vw;
    height: 35vw;
  }

  #section5 {
    height: 40vh;
  }

  #section5 h1 {
    font-size: 2rem;
    line-height: 120%;
  }

  .sect6h1 h1 {
    font-size: 2rem;
    font-weight: 600 !important;
  }
  .sect6cont {
    margin-top: 5vh;
}
  #section7 {
    height: 800vh;
  }

  #section7 h1 {
    font-size: 2rem;
  }

  .recentworkcontainer {
    width: 75vw;
    height: 38vh !important;
  }

  .modimg {
    width: 100% !important;
    height: 35% !important;
  }

  .recentimg img {
    height: 95%;
  }

  .bigcontainer {
    top: 25vh;
  }

  .marquee p {
    font-size: 2.8rem;
    font-weight: 500;
  }
  #section8 h1 {
    font-weight: 600 !important;
    font-size: 1.9rem;
    top: 23vh;
    left: 50%;
    transform: translate(-50%);
    width: 80vw;
    line-height: 110%;
  }

  .sect8div {
    top: 50vh;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .sect8divr p {
    width: 80vw;
  }

  #divq {
    margin-top: 20px;
    margin-left: -50%;
  }

  .orange img {
    width: 110px;
    height: 110px
  }

  .white img {
    width: 110px;
    height: 110px
  }

  .sect8divr p {
    font-size: 0.9rem;
  }

  .footer {
    font-size: 0.7rem;
    top: 75vh;
    left: 5vw;
  }

  .footerright {
    top: 75vh;
    font-size: 0.7rem;
    left: 60vw;
  }

  .footerleftcont {
    gap: 5vw;
  }

  .sect4container div#divq {
    display: none!important;
  }

  .hide-mobile {
    display: none;
  }

  .clients {
    width: 75px!important;
    height: 75px!important;
  }
  .cta__circle {
    transform: translate(-35%, 0%);
  }
}
@media (max-width:375px) {
  .hamburger {
    margin-left: 70%;
  }
  .webgl {
    z-index: 1;
  }
  #section1 h1 {
    font-size: 30px;
    line-height: 32px;
  }

  .sect4h1 h1 {
    font-size: 1.5rem;
    width: 85vw;
  }

  #full_video img {
    width: 110px;
    height: 110px;
  }

  .wrapper9 img {
    width: 60vw;
    height: 35vw;
  }

  #section5 {
    height: 40vh;
  }

  #section5 h1 {
    font-size: 2rem;
    line-height: 120%;
  }

  .sect6h1 h1 {
    font-size: 1.3rem;
  }

  #section7 {
    height: 800vh;
  }

  #section7 h1 {
    font-size: 2rem;
  }

  .recentworkcontainer {
    width: 75vw;
    height: 38vh !important;
  }

  .modimg {
    width: 100% !important;
    height: 35% !important;
  }

  .recentimg img {
    height: 95%;
  }

  .bigcontainer {
    top: 25vh;
  }

  .marquee p {
    font-size: 2.8rem;
    font-weight: 500;
  }
  #section8 h1 {
    font-size: 1.3rem;
    top: 26vh;
    left: 50%;
    transform: translate(-50%);
    width: 80vw;
    line-height: 110%;
  }

  .sect8div {
    top: 50vh;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .sect8divr p {
    width: 80vw;
  }

  #divq {
    margin-top: 20px;
    margin-left: -50%;
  }

  .orange img {
    width: 110px;
    height: 110px
  }

  .white img {
    width: 110px;
    height: 110px
  }

  .sect8divr p {
    font-size: 0.9rem;
  }

  .footer {
    font-size: 0.7rem;
    top: 75vh;
    left: 5vw;
  }

  .footerright {
    top: 75vh;
    font-size: 0.7rem;
    left: 60vw;
  }

  .footerleftcont {
    gap: 5vw;
  }

  .sect4container div#divq {
    display: none!important;
  }

  .hide-mobile {
    display: none;
  }

  .clients {
    width: 75px!important;
    height: 75px!important;
  }
  .cta__circle {
    transform: translate(-35%, 35%);
  }
}

@media (max-width:300px) {
  .recentworkcontainer {
    width: 75vw;
    height: 38vh !important;
  }

  .modimg {
    width: 100% !important;
    height: 35% !important;
  }

  #section6 {
    height: 150vh;
  }

  .footer {
    font-size: 0.5rem;
    top: 75vh;
    left: 5vw;
  }

  .footerright {
    top: 75vh;
    font-size: 0.5rem;
    left: 60vw;
  }
}


/* svg  */
/* svg  */
/* svg  */



.read__more {
  transition: all .5s ease-in-out;
  transform: scale(0);
}

.hover {
  position: absolute;
  /* padding: 20px; */
  /* background-color: aqua; */
}

.cta__circle:hover .read__more {
  transform: scale(1);
}

#full_video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#full_video img {
  width: 125%;

}

/* Contact us */
#divq2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contact {

  width: 170px;
  height: 170px;
  /* padding: 15px; */
  margin-top: -20px;
}

.contact svg {
  width: 170px;
  height: 170px;

}

.orange {
  position: absolute;
  transition: all .5s ease-in-out;
  transform: scale(0);
}

.orange::after {
  scale: 0;
}

.contact:hover .orange {
  transform: scale(1.01);
}



/* .container {
  position: absolute;
  width:auto;
  height: auto;

} */

.swipeimage {
  position: absolute;
  width: 140px;
  height: 140px;

  z-index: 9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* .imagediv{
  position: absolute;
  margin: 0;
  /* left: 40%; */
/* padding-right: -14px; */
/* } */

a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
}

a:hover {
  text-decoration: none;
}

.clients {
    width: 100px;
    height: 100px;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-between;
  column-gap: 40px;
}

/* Headers */
h1, h2, h3, h4, h5, h6,
#section1 h1,
.sect4h1 h1,
.sect6h1 h1,
#section5 h1,
#section7 h1,
#section8 h1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.02em;
  font-weight: 500;
}

/* Section text elements */
#sect1p p,
.sect4p p,
.sect6p p,
.sect8divr p,
.sect9p,
.footerleftdiv p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* Navigation and menu items */
#menuholder li a {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.02em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Section headers specific adjustments */
#section1 h1 {
  font-weight: 500;
  letter-spacing: 0.02em;
}

#section5 h1 {
  font-family: 'MyWebFont2';
  font-weight: 400;
  letter-spacing: 0.02em;
}

#section7 h1 {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sect4h1 h1 {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sect6h1 h1 {
  font-weight: 500;
  letter-spacing: 0.01em;
}

#section8 h1 {
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Marquee text */
.marquee p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Footer text */
.footer,
.footerright,
.footerleftdiv {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

/* Links */
a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (max-width: 600px) {
  .mod .modimg {
    width: 95%;
    padding: 10px;
  }
  
  .mod .modimg img {
    max-height: 85vh;
  }
}

@media (max-width: 430px) {
  .mod .modimg {
    width: 100%;
    padding: 8px;
  }
  
  .mod .modimg img {
    max-height: 80vh;
  }
}

/* ===== 2030 addendum: everything above is the original stylesheet ===== */
.h1-logo { display: inline-block; height: 0.64em; width: auto; margin: 0 0 0.16em -0.03em; vertical-align: middle; }
.webgl { pointer-events: none; }
.clients-x { object-fit: contain; }
/* round 22: the three added logos sit at the same visual weight as the rest; the full services list is compact (3 columns)
   and its section grows with it instead of running into Recent Works; the round buttons answer the mouse faster */
img.clients-x[src*="grilld"] { scale: .6; } img.clients-x[src*="spudbar"] { scale: .78; } img.clients-x[src*="jbhifi"] { scale: .9; }
.svc-all { grid-template-columns: repeat(3, max-content) !important; gap: .15em 2.2em !important; margin-top: 1.6em !important; }
.svc-all a { font-size: 1.12rem; line-height: 1.55; white-space: nowrap; opacity: 1 !important; }
#section6 { height: auto !important; min-height: 110vh; padding-bottom: 14vh; }
#section6 .sect4container { position: relative !important; }
@media (max-width: 900px) { .svc-all { grid-template-columns: 1fr 1fr !important; } .svc-all a { white-space: normal; } }
.read__more { transition: transform .18s cubic-bezier(.22, 1, .36, 1) !important; }
.contact .orange, .cta__circle svg, .cta__circle * { transition-duration: .18s !important; }
/* ===== phones (13 Nov 2026): the page's phone layout is tuned by hand to fixed heights, and the additions did not fit it.
   The linked services go back to plain lines, the full services list is compact, and each project takes the room it needs
   (picture, then its name) instead of a fixed share of the screen. js/extras.js then grows any section to its content. ===== */
@media (max-width: 900px) {
  #section5 h1 a.svc-link { display: inline; padding: 0; }
  .svc-all { grid-template-columns: 1fr 1fr !important; gap: 0 1.4em !important; margin-top: 1.4em !important; }
  .svc-all a { padding: 0 !important; font-size: .92rem !important; line-height: 1.9 !important; white-space: normal; }
  #section7 .wid800, #section7 .imagediv, #section7 .recentworkcontainer { height: auto !important; }
  #section7 .imagediv { margin-bottom: 30px; }
}
/* phone hero (13 Nov 2026): the paragraph is a little smaller and sits lower, so it no longer runs over the heart */
@media (max-width: 600px) {
  #sect1p p { font-size: .92rem !important; line-height: 1.5 !important; }
  div#sect1p { top: auto !important; bottom: 96px; }
  /* the full services list flows down two columns: a name that needs two lines no longer leaves a hole beside it */
  .svc-all { display: block !important; column-count: 2; column-gap: 1.6em; }
  .svc-all a { display: block; break-inside: avoid; padding: .34em 0 !important; line-height: 1.32 !important; font-size: .92rem !important; }
}
/* tap sizes (13 Nov 2026): every link on a phone is tall enough for a thumb, and the contact details are readable */
@media (max-width: 900px) {
  .svc-all a { padding: .62em 0 !important; }
  .footer p, .footer a, .footerright p, .footerright a, .footerleftdiv a, .footerleftdiv p, .footerright div a { font-size: 13.5px !important; line-height: 1.9 !important; }
  .footerright div a, .footerright a { display: inline-block; padding: 6px 0 !important; margin-left: 0 !important; }
}
@media (max-width: 600px) { #section5 h1 a.svc-link { padding: .12em 0; } }
/* narrow desktop and tablets on their side (901 to 1200px): the full services list has two columns, three ran off the screen */
@media (min-width: 901px) and (max-width: 1200px) { .svc-all { grid-template-columns: repeat(2, max-content) !important; } }
/* small phones (13 Nov 2026), 360px wide and under: the hero paragraph and the big services list are sized to fit */
@media (max-width: 360px) {
  #sect1p p { font-size: .82rem !important; line-height: 1.45 !important; }
  #section5 h1 { font-size: 26px !important; line-height: 1.22 !important; }
}
/* a phone held sideways: very little height, so the hero keeps its headline only and the services list is smaller */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 950px) {
  #sect1p { display: none !important; }
  #section5 h1 { font-size: 30px !important; line-height: 1.2 !important; }
}
@media (max-width: 380px) { .footer p, .footer a, .footerright p, .footerright a, .footerleftdiv a, .footerleftdiv p, .footerright div a { font-size: 12px !important; } }


/* linked services: the big list keeps its look; the full list sits in two columns */
#section5 h1 a.svc-link { color: inherit; text-decoration: none; position: relative; z-index: 3; padding-left: 0; padding-right: 0; white-space: nowrap; }   /* each service stays on one line ("Web Development" was breaking in two on desktop) */
.svc-all { display: grid !important; grid-template-columns: 1fr 1fr; gap: .35em 2.4em; width: auto !important; margin-top: 2.2em; }
.svc-all a { color: #fff; text-decoration: none; opacity: .86; transition: opacity .25s, translate .35s cubic-bezier(.22, 1, .36, 1); }
.svc-all a:hover { opacity: 1; translate: 6px 0; }
@media (max-width: 700px) { .svc-all { grid-template-columns: 1fr; } }
/* short windows (small laptops, browser zoom): the sections are one screen tall but the type was a fixed size, so text ran
   into the next section. On landscape screens the type now scales with the window height. */
@media (min-width: 901px) and (max-height: 899px) { html { font-size: clamp(8px, 1.78vh, 16px); } }
@media (min-width: 901px) and (max-height: 800px) { .wrapperq, #divq2 .contact { zoom: .8; } .sect4cont { margin-top: 12vh; } }
@media (min-width: 901px) and (max-height: 660px) { .wrapperq, #divq2 .contact { zoom: .62; } .sect4cont { margin-top: 8vh; } }
@media (min-width: 901px) and (max-height: 540px) { .wrapperq, #divq2 .contact { zoom: .5; } }
/* the Showreel text band: it was centred and slid left by half its length, so on wide windows its right half ran out.
   It now starts at the left edge, is twice as long, and keeps the same speed. */
.wrapper4 { left: 0 !important; transform: translate(0, -50%) !important; }
.wrapper4 .marquee { animation-duration: 100s; }
/* round 12: the hero text waits for the heart to lock together (class mm-slammed, set by heart-rt.js), then rises in */
#section1 h1, #sect1p, #scrolldown, #mm-hint { opacity: 0; translate: 0 18px; transition: opacity .5s ease, translate .6s cubic-bezier(.22, 1, .36, 1); }
html.mm-slammed #section1 h1, html.mm-slammed #sect1p, html.mm-slammed #scrolldown, html.mm-slammed #mm-hint { opacity: 1; translate: none; }
html.mm-slammed #sect1p { transition-delay: .06s; } html.mm-slammed #scrolldown, html.mm-slammed #mm-hint { transition-delay: .12s; }
html.mm-slammed #mm-hint { opacity: .7; }
html:not(.mm-slammed) #mm-hint, html:not(.mm-slammed) #scrolldown { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { #section1 h1, #sect1p, #scrolldown, #mm-hint { opacity: 1; translate: none; transition: none; } }
/* round 7: the email button is red from the start (it used to turn red only on hover), like the Full Video button */
.contact .orange { transform: scale(1) !important; }
/* round 3: headings a step heavier (Helvetica Neue Roman instead of Light), closer to the studio pages' weight */
h1, h2, h3, .sect4h1 h1, #section5 a, #section5 p { font-family: 'MyWebFont2', 'Helvetica Neue', Arial, sans-serif; }
html.mm-embed { overflow: hidden; }
html.mm-embed #menuholder, html.mm-embed #logo, html.mm-embed #mm-progress { display: none !important; }
/* round 8: inside the studio frame the heading keeps its own look (white, Helvetica) and only lines up with the other
   pages: same left edge as their content; the frame shows the studio logo, so ours is hidden */
html.mm-full .h1-logo, html.mm-full .h1-logo + br { display: none !important; }
@media (min-width: 1200px) { html.mm-full #section1 h1 { left: 17px !important; margin-left: 0 !important; } }
/* round 9: one left edge and even spacing for the hero in the frame: heading, paragraph, scroll hint */
@media (min-width: 1200px) {
  html.mm-full #section1 h1 { top: 17vh !important; margin-top: 0 !important; }
  /* the paragraph stays where the original layout has it (Danny) */
  html.mm-full #scrolldown { left: 17px !important; }
  html.mm-full #mm-hint { left: 147px !important; }
}
@media (max-width: 1199px) { html.mm-full #section1 h1 { margin-top: 76px !important; } }
/* round 8: the round READ MORE disc that follows the arrow buttons is red with cream lettering */
.read_more .circle_bg { fill: #ef5143; }
.read_more [fill]:not(.circle_bg):not([fill="none"]) { fill: #fff3e2; }
.read_more [stroke]:not([stroke="none"]) { stroke: #fff3e2; }
.read_more .circle_bg { stroke: none !important; }   /* no outline round the red disc */
.cta__circle:hover #circle, .cta__circle:hover .hover circle:not(.circle_bg) { stroke-opacity: 0 !important; }   /* the white ring under the disc showed as a border */
.read__more, .read_more { outline: 0 !important; border: 0 !important; }
html.mm-embed .custom-chat-button, html.mm-embed .email-button, html.mm-embed .call-button { display: none !important; }   /* the parent page has its own contact controls */
html.mm-embed:not(.mm-full) #section4, html.mm-embed:not(.mm-full) #section4 ~ section { visibility: hidden; }   /* the embed ends at the showreel */
#mm-hint { position: absolute; bottom: 5vh; z-index: 5; color: rgb(166, 166, 166); font: inherit; font-size: 17px; background: none; border: 0; padding: 0; }
#mm-hint { left: calc(4vw + 130px); opacity: .7; }
#mm-charge { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 30; pointer-events: none; opacity: 0; }
#mm-charge i { position: absolute; inset: 0; border: 1px solid #fff; border-radius: 50%; }
body.mm-grab { cursor: grabbing; user-select: none; }
.mm-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.mm-tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(60% 60% at var(--mm-gx, 50%) var(--mm-gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 70%); mix-blend-mode: screen; }
.mm-tilt-on::after { opacity: 1; }
@media (max-width: 1120px) { #mm-hint { display: none; } }