.sub-title
{
	display:inline-block !important;
}

.brand-slider {
  overflow: hidden;
  width: 60%;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 2%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 98%);
}

.brand-track {
  display: flex;
  width: calc(200%);
  animation: scrollLeft 25s linear infinite;
	gap: 30px;
}

.brand-logo {
  flex: 0 0 auto;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo img {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.brand-logo img:hover {
  filter: grayscale(0%);
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.follow-us {
  display: flex;
	justify-content: flex-end;
	color: #fff;
	position: relative;
	overflow: hidden;
	width: 100%;
	cursor: pointer;
}

.follow-content {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.follow-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.social-icons {
  position: absolute;
  left: -30px;
  display: flex;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px);
  transition: all 0.4s ease;
}

.social-icons .social {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons .social:hover {
  color: #fff;
	opacity:.7;
}

.follow-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.follow-content:hover .follow-text {
  transform: translateY(-30px);
  opacity: 0;
}

.follow-content:hover .social-icons {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.banner-section {
    position: relative;
    z-index: 1;
}

.banner-section::before {
    content: "";
    left: 0;
    right: 0;
    margin: auto;
    background: url(/wp-content/uploads/2025/11/banner-img.avif) no-repeat center / contain;
    height: 114%;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.banner-wrap .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.image-hover-section {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.img-box {
  width: 120px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  transition: width 0.5s ease;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.5s ease;
}

.img-box:hover {
  width: 250px;
}

.img-box:hover img {
  transform: scale(1.05);
}


#video-section {
  position: relative;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}

/* Text Mask Area */
.text-mask-wrap {
  position: relative;
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  z-index: 3;
  transition: all 1s ease;
}

/* Masked Text */
.text-mask-wrap h2 {
  	font-size: 13.3vw;
	font-weight: 900;
	text-transform: uppercase;
	color: #000;
	mix-blend-mode: screen;
	background: #fff;
	position: relative;
	z-index: 2;
	line-height: 1.2;
	margin: 0 auto !important;
	padding: 0;
	width: 100%;
	text-align: center;
}

/* Video behind text */
.text-mask-wrap video {
  position: absolute;
  inset: 0;
  width: 96%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.8);
  margin:auto
}

/* Bottom main video (hidden initially) */
.main-video-wrap {
  position: absolute;
  top: 30vh;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  z-index: 1;
  transition: all 1.3s ease;
}

.main-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) brightness(0.85);
  transform: scale(1.05);
  transition: filter 1.2s ease, transform 2s ease;
}

/* Scroll Active State */
#video-section.active .text-mask-wrap {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 1s ease 0.3s;
}

#video-section.active .main-video-wrap {
  top: 0;
  height: 100vh;
}

#video-section.active .main-video-wrap video {
  filter: blur(0) brightness(1);
  transform: scale(1.1);
}

.banner-video-toggle {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-video-toggle:hover {
  background: rgba(255, 255, 255, 1);
}



.zentro-scroll { position:relative; }
.zentro-section {
  position: relative;
  height: 100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.zentro-section .background {
  position:absolute;
  top:0; 
  left:0;
  width:100%; 
  height:100%;
  background-size:cover;
  background-position:center;
  z-index:0;
  transform: scale(1);
  transition: transform 1.5s ease;
}
.zentro-section.active .background { transform: scale(1); }
.zentro-section .zentro-content {
  position:relative;
  z-index:1;
  text-align:center;
  opacity:1;
  transform: translateY(0px);
  transition: all 1.2s ease;
}
/* .zentro-section.active .zentro-content {
  opacity:1;
  transform: translateY(0);
} */

.zentro-content h2 { 
	font-size: 6vw;
    margin-bottom: 20px;
    letter-spacing: -0.06em;
    color: #fff;
}
.zentro-content p { 
	font-size:1.2vw; 
	max-width:700px; 
	color:#fff; 
}

/* Custom Cursor */
.custom-cursor {
  position:fixed;
  width:35px; height:35px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.4);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition: transform 0.15s ease-out, background 0.3s ease;
  z-index:9999;
  opacity:0;
}
.custom-cursor.active {
  transform:translate(-50%,-50%) scale(1.5);
  background:rgba(255,255,255,0.25);
}


/* Horizontal Section Scroll */

.zentro-h-scroll,
.zentro-h-section * {
  cursor: none !important;
}

.zentro-h-section .background {
  pointer-events: none !important;
}

.zentro-h-scroll {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;        
  width: max-content;
}

/* Each Section */
.zentro-h-section {
  width: 100vw;
  height: 100vh;
  position: relative;
  flex-shrink: 0;         /* Do NOT shrink */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Background */
.zentro-h-section .background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  z-index:0;
  transform: scale(1);
  transition: transform 1.5s ease;
}

.zentro-h-section.active .background {
  transform: scale(1.1);
}

/* Content */
.zentro-h-content {
  	position: relative;
    z-index: 2;
    opacity: 1;
    transform: translateY(0px);
    transition: all 1.2s ease;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 500px;
    align-items: flex-end;
    margin-left: auto;
    padding-right: 40px;
}

.zentro-h-content h2 {
  font-size:40px;
  margin-bottom:20px;
  color:#fff;
}

.zentro-h-content p {
  font-size:16px;
  color:#fff;
  margin-bottom: 20px !important;
}

.zentro-h-content ul li {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.zentro-h-content ul {
    margin: 0 0 20px !important;
    padding: 0 !important;
    list-style: none;
}

.zentro-h-content h4 {
    color: #e4ff07;
}

/* Cursor */
.zentro-h-cursor {
  position: fixed;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.1s ease-out;
}

.zentro-h-cursor.active {
  transform:translate(-50%,-50%) scale(1.5);
  background:rgba(255,255,255,0.25);
}


/* Testimonials Area */

.testimonial-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
}

/* Main Track */
.testimonial-track {
  display: flex;
  gap: 20px;
  animation: scrollLeft 30s linear infinite;
  will-change: transform;
}

.testimonial-wrapper .testimonial-track > * {
  flex-shrink: 0;
}

.testimonial {
  flex: 0 0 40%;
    min-width: 40%;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial p {
  font-size: 1.1rem;
    color: #000000;
    line-height: 1.3;
}

.testimonial .testi-person {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testimonial .testi-person .testi-person-detail h4 {
    margin: 0;
    font-size: 16px;
    color: #000;
}

.testimonial .testi-person .testi-person-detail p {
    font-size: 14px;
    color: #918d8d;
}

/* Gradient blur sides */
.fade-left, .fade-right {
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.fade-left {
  left: 0;
  background: linear-gradient(to right, #fff 50%, transparent);
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, #fff 50%, transparent);
}

/* Infinite scroll animation */
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


/* Behind Projects */

.project-icon-box .kt-blocks-info-box-link-wrap {
    position: relative;
}

.project-icon-box .kt-blocks-info-box-link-wrap .kadence-info-box-image-intrisic {
    padding: 0 !important;
    height: 300px !important;
    width: 100% !important;
}

.project-icon-box .kt-blocks-info-box-link-wrap .kadence-info-box-image-intrisic .kadence-info-box-image-inner-intrisic {
    height: 100%;
    width: 100%;
}

.project-icon-box .kt-blocks-info-box-link-wrap .kadence-info-box-image-intrisic .kadence-info-box-image-inner-intrisic img {
    height: 100%;
    object-fit: cover;
    transition: .3s all ease-in-out;
	border-radius: 10px;
}

.project-icon-box .kt-blocks-info-box-link-wrap:hover .kadence-info-box-image-intrisic .kadence-info-box-image-inner-intrisic img{
    transform: scale(1.1);
	border-radius: 10px;
}

.project-icon-box .kt-blocks-info-box-link-wrap .kt-infobox-textcontent {
    position: absolute;
    bottom: 30px;
    left: 20px;
}


/* Horizontal Slider Start */

.horizontal-scroll-section {
	min-height: 500vh;
	position: relative;
}

.horizontal-scroll-section .scroll-container {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.horizontal-scroll-section .content-wrapper {
	display: flex;
    margin: 0 auto;
    width: 100%;
    align-items: center;
}

/* Left Content Styles */
.horizontal-scroll-section .left-content {
		color: var(--global-palette9);
    z-index: 10;
    display: flex;
    max-width: 40%;
    width: 100%;
    flex-wrap: wrap;
}

.horizontal-scroll-section .sub-heading {
	display: inline-block;
	font-weight: 600;
	color: var(--global-palette9);
	background: var(--global-palette2);
	padding: 6px 30px;
	margin: 0;
	text-align: center;
	font-size: 18px;
	border-radius: 100px;
}

.horizontal-scroll-section .main-heading {
	color: var(--global-palette9);
	width: 100%;
	margin: 14px 0 18px;
}

.horizontal-scroll-section .description {
	margin-bottom: 40px;
	color: #fff;
}

.horizontal-scroll-section .buttons-wrapper {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.horizontal-scroll-section .btn {
	display: inline-block;
	padding: 12px 24px;
	text-decoration: none;
	border-radius: 50px;
	font-weight: 400;
	font-size: 14px;
	transition:.3s all ease-in-out;
	position: relative;
	overflow: hidden;
	border: none;
	cursor: pointer;
	border:1px solid #fff;
}

.horizontal-scroll-section .btn-primary {
	background: transparent;
	color: var(--global-palette9);
}

.horizontal-scroll-section .btn-primary:hover {
	background:var(--global-palette9);
	color:#000;
}

.horizontal-scroll-section .btn-secondary {
	background: var(--global-palette9);
	color: #000;
}

.horizontal-scroll-section .btn-secondary:hover {
	background: transparent;
	color: var(--global-palette9);
}

/* Right Content - Cards Styles */
.horizontal-scroll-section .right-content {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	max-width: 60%;
    width: 100%;
}

.horizontal-scroll-section .cards-container {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.horizontal-scroll-section .cards-track {
	display: flex;
	height: 100%;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.horizontal-scroll-section .card-item {
	min-width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.horizontal-scroll-section .card-inner {
		width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background-size: 102%;
    background-position: -1px 0;
	  align-items: flex-start;
    padding: 30px;
}

.horizontal-scroll-section .card-inner .card-btn a {
    background: rgb(0 0 0 / 50%);
    color: #fff;
    padding: 12px 30px;
    display: inline-block;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    border-radius: 100px;
    transition: .3s all ease-in-out;
}

.horizontal-scroll-section .card-inner .card-btn a:hover {
    background: #000;
}

.horizontal-scroll-section .card-inner .card-btn {
    display: flex;
    gap: 14px;
}

.horizontal-scroll-section .card-title {
	font-size: 1.8rem;
	font-weight: 700;
	color: #2d3748;
	margin-bottom: 16px;
	background: linear-gradient(45deg, #667eea, #764ba2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.horizontal-scroll-section .card-description {
	font-size: 1rem;
	line-height: 1.6;
	color: #4a5568;
	margin-bottom: 20px;
	max-width: 280px;
}

.horizontal-scroll-section .card-price {
	font-size: 2rem;
	font-weight: 800;
	color: #e53e3e;
	margin-bottom: 24px;
}

.horizontal-scroll-section .card-button {
	display: inline-block;
	padding: 12px 28px;
	background: linear-gradient(45deg, #667eea, #764ba2);
	color: white;
	text-decoration: none;
	border-radius: 25px;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.horizontal-scroll-section .card-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s;
}

.horizontal-scroll-section .card-button:hover::before {
	left: 100%;
}

.horizontal-scroll-section .card-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* Progress Indicator */
.horizontal-scroll-section .progress-indicator {
	position: absolute;
	bottom: 30px;
	right: 40px;
	display: flex;
	gap: 8px;
}

.horizontal-scroll-section .progress-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
	cursor: pointer;
}

.horizontal-scroll-section .progress-dot.active {
	background: #ffd700;
	transform: scale(1.2);
}


.process-icon-box p.kt-blocks-info-box-text {
    display: none;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}
.process-icon-box.active p.kt-blocks-info-box-text {
    display: inline-block;
    opacity: 1;
}

.process-border {
    position: relative;
    z-index: 1;
}
.process-border span {
    height: 40px;
    width: 40px;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 20px #ededed;
    border-radius: 100px;
    left: 10px;
    right: 0;
    margin: auto;
    top: 16px;
    transition: top 0.8s cubic-bezier(0.65, 0, 0.35, 1),
                left 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.process-border span::before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: #D9D9D9;
    border-radius: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.process-icon-box.active .kt-blocks-info-box-number {
    color: var(--global-palette2);
}

/* optional smoother appearance */
.process-hover-content p {
    transition: opacity .4s ease-in-out;
}

/* Footer Css */

.site-footer-top-section-2 {
    align-items: center;
}

.fluentform .fluent_form_2 .ff-el-group {
    margin: 0;
}

.fluentform .fluent_form_2 .ff-el-group .ff-btn {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0;
    height: 40px;
    border-radius: 0;
    transition: .3s all ease-in-out;
}

.fluentform .fluent_form_2 {
    margin-bottom: 14px;
}

.fluentform .fluent_form_2.frm-fluent-form .ff-t-container {
    gap: 0;
}

.fluentform .fluent_form_2.frm-fluent-form .ff-t-container .ff-el-form-control {
    padding: 10px;
    background: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #fff;
    height: 40px;
}

.fluentform .fluent_form_2 .ff-el-group .ff-btn:hover {
    background: transparent;
    color: var(--global-palette2);
}

.site-top-footer-wrap .site-footer-row.site-footer-row-columns-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
}

.fluentform .fluent_form_2.frm-fluent-form .ff-t-container .error {
    position: absolute;
    font-size: 11px;
    letter-spacing: 1px;
}

.fluentform_wrapper_2 .ff-message-success, .fluentform_wrapper_1 .ff-message-success {
    background: #0b3000;
    color: #fff;
    padding: 6px;
    text-align: center;
    margin-bottom: 10px;
}

.logo-plus-slider .splide__arrows, .logo-plus-slider .splide__pagination {
    display: none !important;
}

.logo-plus-slider .kt-blocks-carousel-init
{
	margin:0 !important;
}

body .fluentform .fluent_form_1 .ff-step-titles li.ff_active::before,
body .fluentform .fluent_form_1 .ff-step-titles li.ff_completed::before
{
    background: var(--global-palette2);
}

body .fluentform .fluent_form_1 .ff-step-titles li::before {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    line-height: 28px;
    font-weight: 800;
    font-size: 12px;
}



body .fluentform .fluent_form_1 .ff-step-titles li::after {
    background: var(--global-palette9);
    top: 14px;
}

body .fluentform .fluent_form_1 .ff-step-titles li.ff_active::after, 
body .fluentform .fluent_form_1 .ff-step-titles li.ff_completed::after
{
    background: var(--global-palette2) !important;
}

body .fluentform .fluent_form_1 .step-nav .ff-btn {
    background: transparent !important;
    padding: 0;
    font-size: 16px;
}

body .fluentform .fluent_form_1 .step-nav .ff-btn:hover {
    background: transparent !important;
    color: var(--global-palette2) !important;
}

body .fluentform .fluent_form_1 .ff-step-titles {
    padding-top: 20px;
}

.fluent_form_1 .iti__flag-container {
    display: none;
}

body .fluentform .fluent_form_1 select.ff-el-form-control {
    appearance: auto;
}

.popup-drawer .drawer-content .menu li a {
    text-align:center;
    padding: 0px 0;
}

.site-footer {
    position: relative;
    z-index: 11;
}

.popup-drawer .drawer-content {
    padding: 80px 0 40px;
}

.single-post .single-content h2 {
    font-size: 28px;
    margin: 0 0 10px;
    line-height: 34px;
}

.single-post .single-content p {
    margin: 0 0 30px;
}

.single-post .single-content h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.video-item {
  	cursor: pointer;
    overflow: hidden;
    position: relative;
    height: 250px;
}

.video-item img {
  	width: 100%;
    display: block;
    transition: .4s;
    height: 100%;
    object-fit: cover;
    border: 1px solid #e7e7e7;
}

.video-item:hover img {
  transform: scale(1.05);
}

/* Popup */
.video-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 9999;
}

.video-popup.show {
  display: flex;
}

.video-popup-inner {
  position: relative;
  max-width: 800px;
  width: 100%;
}

.video-popup iframe {
  width: 100%;
  height: 450px;
  border-radius: 10px;
}

.close-popup {
  position: absolute;
  right: -10px;
  top: -10px;
  background: #fff;
  color: #000;
  font-size: 30px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}

.process-cta-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #00aead;
    transition: .5s all ease-in-out;
}

.process-cta-banner:hover:before {
    width: 54%;
}

#scrollTopBtn {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #00afae;
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 9999;
}

#scrollTopBtn.show {
  opacity: 1;
  pointer-events: auto;
}

.banner-video-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.banner-video-popup.is-active {
  display: flex;
}

.banner-video-popup-inner {
  position: relative;
  width: 90%;
  max-width: 900px;
}

#banner-video-player {
  width: 100%;
  height: auto;
  background: #000;
}

.banner-video-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 28px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.process-cta-banner:hover h2 {
    color: #fff !important;
}

.process-cta-banner:hover h2 .kt-highlight {
    color: #fff !important;
}

/* Responsive */

@media (max-width:1024px)
{
	
.banner-section::before
{
height: 46%;	
}
	
p br
{
display:none;	
}
	
.text-mask-wrap {
    display: none;
}

.main-video-wrap {
    top: 0;
    height: 100vh;
}
	
.zentro-content h2 {
    font-size: 70px;
}

.zentro-content p {
    font-size: 20px;
}
	
.zentro-h-content {
    margin: auto;
    background: rgb(0 0 0 / 30%);
    max-width: 90%;
    padding: 30px;
    border-radius: 20px;
}
	
.horizontal-scroll-section .left-content, .horizontal-scroll-section .right-content {
    max-width: 100%;
}

.horizontal-scroll-section .content-wrapper {
    flex-wrap: wrap;
    row-gap: 30px;
    text-align: center;
}

.horizontal-scroll-section .left-content {
    justify-content: center;
}
	
.cappen-scrolling-text-wrapper.top-left {
    top: 20% !important;
}

.cappen-scrolling-text-wrapper.bottom-right {
    bottom: 20% !important;
}
	
.zentro-h-content ul li {
    font-size: 16px;
}
	
}



@media (max-width: 767px) {
  .text-mask-wrap h2 {
    font-size: 18vw;
  }

.banner-video-toggle {
    width: 55px;
    height: 55px;
    font-size: 22px;
    bottom: 25px;
  }
	
.popup-drawer .drawer-content .menu li a {
    border: 0;
    padding: 4px 0;
}
	
.brand-slider {
    width: 100%;
}

.custom-cursor, .zentro-h-cursor {
    display: none !important;
}

.follow-us {
    justify-content: center;
}
	
.banner-section::before {
    display: none !important;
}
	
.zentro-section .zentro-content {
    padding: 0 20px;
}

.zentro-content h2 {
    font-size: 30px;
}
	
.testimonial {
    row-gap: 30px;
    flex: 0 0 100%;
    min-width: 100%;
    min-height: auto;
}

.fade-left, .fade-right {
    width: 20px;
}

.testimonial p {
    font-size: 15px;
}
	
.zentro-h-content h2 {
    font-size: 22px;
}

.zentro-h-content h4 {
    font-size: 16px;
}
	
.horizontal-scroll-section .btn {
    padding: 10px 14px;
}

.horizontal-scroll-section .cards-container {
    height: 260px;
}

.horizontal-scroll-section .sub-heading {
    font-size: 15px;
}

.horizontal-scroll-section .main-heading {
    font-size: 20px;
    line-height: 28px;
}

.horizontal-scroll-section .card-inner {
    padding: 14px;
}

.horizontal-scroll-section .card-inner .card-btn {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
	
.fluentform_wrapper_1 {
    padding: 0 20px;
}
	
.single-post .single-content h2 {
    font-size: 24px;
}

.single-post .single-content h3 {
    font-size: 20px;
}
	
.video-grid {
    grid-template-columns: repeat(1, 1fr);
}
	

}


/* Process Section Start */

.process .layout-grid{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.2;z-index:10;pointer-events:none;font-size:0;}
.process .layout-grid .column{display:inline-block;vertical-align:top;width:calc((100% - (var(--gutter) * 13)) / 12);height:100%;background:red;margin-left:var(--gutter);}
.process .layout-grid{display:none;}

:root{
    /*Easing*/
    --sine:cubic-bezier(0.39, 0.575, 0.565, 1);
    --quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);/*cubic-bezier(0.5, 1, 0.89, 1);*/
    --quad-in-out:cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --cubic:cubic-bezier(0.215, 0.61, 0.355, 1);/*cubic-bezier(0.33, 1, 0.68, 1)*/
    --cubic-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);
    /*--quart:cubic-bezier(0.165, 0.84, 0.44, 1);*/
    --quart:cubic-bezier(0.25, 1, 0.5, 1);
    --quart-in-out:cubic-bezier(0.77, 0, 0.175, 1);
    --quint:cubic-bezier(0.23, 1, 0.32, 1);
    --expo:cubic-bezier(0.16, 1, 0.3, 1);
    --expo-in-out:cubic-bezier(0.87, 0, 0.13, 1);
    /*--expo:cubic-bezier(0.19, 1, 0.22, 1);*/
    --back:cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    --delay:0s;

    --lightgrey:#FAFAFA;
    --lightpurple:#A88BFA;
    --midpurple:#5B21B6;
    --darkpurple:#23234A;
    --lightgreen:#95C154;
    --darkgreen:#004B1E;
    --yellow:#FFD948;
    --orange:#FF9C00;
    --lightbrown:#FFE3C9;
    --darkbrown:#502B1A;
    --darkink:#2F2F2F;

    --gutter:24px;/*11 gutters and 2 margins*/
    --column:calc((100vw - (var(--gutter) * 13)) / 12);/*careful because it uses 100vw!*/
}
@media all and (max-width:1250.5px){
    :root{
        --gutter:20px;/*11 gutters and 2 margins*/
    }
}
@media all and (max-width:1000.5px){
    :root{
        --gutter:15px;/*5 gutters and 2 margins*/
        --column:calc((100vw - (var(--gutter) * 7)) / 6);
    }
    .process .layout-grid .column{width:calc((100% - (var(--gutter) * 7)) / 6);}
    .process .layout-grid .column:nth-of-type(odd){display:none;}
}

/* Font settings - medium/500, semibold/600 and bold/700 */
.process h1,.process h2,.process h3,.process h4,.process h5,.process h6,.process p,.process q{position:relative;margin:0;padding:0;font-weight:normal;font-style:normal;line-height:1;box-sizing:border-box;}
.process h1,.process h2.large{font-size:24.0rem;line-height:.84;letter-spacing:-0.03rem;}
.process h1.small,.process h2{font-size:12.0rem;line-height:.88;letter-spacing:-0.33rem;}
.process h3{font-size:6.2rem;line-height:.84;letter-spacing:-0.0275rem;}
.process h4{font-size:5.4rem;line-height:.84;letter-spacing:-0.125rem;}
.process h5{font-size:3.6rem;line-height:.84;letter-spacing:-0.125rem;}
.process p,.process ol,.process ul{font-size:1.4rem;line-height:1.4;min-height:1.96rem;letter-spacing:0.021rem;}
.process p.c1{font-size:1.8rem;line-height:.8;letter-spacing:0.054rem;}
.process p.c5{font-size:1.2rem;min-height:1.68rem;letter-spacing:0.036rem;font-weight:500;}
.process p.c6{font-size:13px;}
.process q{display:block;font-size:1.6rem;line-height:1.5;min-height:2.4rem;}
.process ul{box-sizing:border-box;margin:0;padding:0 0 0 20px;}
.process li{position:relative;box-sizing:border-box;}



@media all and (max-width:1000.5px){
    .process h1,.process h2.large{font-size:18rem;}
    .process h1.small,.process h2{font-size:8rem;}
    .process h3, .process .m.next-project .title h2{font-size:3.8rem;letter-spacing:-0.01rem;}
    .process h4, .process .m.project-details .stats .block h3, .process .m.carousel h3{font-size:3.2rem;letter-spacing:-0.05rem;}
    .process h5{font-size:2.8rem;letter-spacing:-0.05rem;}
}
@media all and (max-width:767.5px){
    .process h1,.process h2.large{font-size:9.0rem;letter-spacing:-0.031rem;}
    .process h1.small,.process h2{font-size:5.2rem;letter-spacing:-0.15rem;}
    .process p,.process ol,.process ul,.process .custom-form label{font-size:1.2rem;min-height:1.4rem;letter-spacing:0.01rem;}
    .process p.c1{font-size:1.2rem;line-height:1;letter-spacing:0.01rem;}
    .process p.c5{font-size:1.0rem;letter-spacing:0.01rem;}
    .process p.c6{font-size:1.0rem;letter-spacing:0.01rem;}
}




/*      Media       */
.process img,.process video,.process .lazy{border:0;-moz-user-select:none;-webkit-user-select:none;-webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
.process picture,.process img,.process .lazy svg,.process video:not(.native-controls){pointer-events:none;}/*with smooth scroll this helps Firefox and Safari with external mouse*/
.process picture, .process video{width:100%;display:block;height:auto;box-sizing:border-box;padding:0;margin:0;overflow:hidden;}
.process picture img{position:relative;display:block;width:100%;height:auto;}
.process .lazy{position:relative;}
.process .lazy.video:before{content:"";display:block;padding-top:calc(var(--aspect) * 1%);width:100%;pointer-events:none;}/*fix aspect ratio for videos*/
.process .lazy .video, .process .lazy .video iframe, .process .lazy > svg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit: cover;}
.process .lazy .video.external{display:flex;align-items:center;}
.process .lazy .video.external > div{margin:auto;flex-grow:1;}
/* Thumbnail (not "poster"!) with play button */
.process .lazy.video .load-ui{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;z-index:2;display:flex;text-align:center;}
.process .lazy.video .load-ui .lazy{position:absolute;left:0;top:0;width:100%;height:100%;}
.process .lazy.video .load-ui .lazy video, .process .lazy.video .load-ui .lazy img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
/*.lazy.video .load-ui .play-btn{margin:auto;padding:20px;font-size:2.4rem;background-color:#333;color:#FFF;}*/
.process .lazy.video .load-ui .play-btn{margin:auto;width:64px;height:74px;border-style:solid;border-width:37px 0px 37px 64px;border-color:transparent transparent transparent #FFF;}
.process .lazy.video.fade-ui .load-ui{opacity:0;transition:opacity .4s ease-in-out .1s;pointer-events:none;}
.process .lazy.video.hide-ui .load-ui{display:none;}

/* PNG sequence */
.process .png-sequence{position:relative;width:100%;pointer-events:none;}
.process .png-sequence .img{position:absolute;left:0;top:0;width:100%;height:auto;}
.process .png-sequence .img:first-of-type{position:relative;}/*to set size*/
.process .png-sequence .img.hide{opacity:0;}/*Firefox shows glitches if using visibility:hidden*/
.process .png-sequence.hide{visibility:hidden;}


/* Animations */
.process .fade{opacity:0;}
.process .fade.in{opacity:1;transition:opacity 1s ease-in-out var(--delay);}
.process .fade.fast.in{transition:opacity .4s ease-out var(--delay);}
.process .zoom img{opacity:0;transform:scale(1.1,1.1);transform-origin:50% 10%;}/*about hero*/
.process .zoom.in img{opacity:1;transform:scale(1,1);transition:transform 1.5s var(--quart) var(--delay), opacity .4s ease-out var(--delay);}
/* mask-scale works even better with :after using background-color (clip-path is a little slow) */
.process .mask-scale img{opacity:0;transform:translateY(33%) scale3d(1.2,1.2,1);clip-path:inset(99.5% 0% 0% 0%);-webkit-clip-path:inset(99.5% 0% 0% 0%);}/*not 100% because loading can get blocked*/
.process .mask-scale.in img{opacity:1;transform:translateY(0px) scale3d(1.0001,1.0001,1);clip-path:inset(0% 0% 0% 0%);-webkit-clip-path:inset(0% 0% 0% 0%);transition:transform 2s var(--expo) var(--delay), opacity .6s ease-out var(--delay), clip-path 2s var(--expo) var(--delay);;}
.process .slidey{opacity:0;transform:translateY(50px);}
.process .slidey.in{opacity:1;transform:translateY(0px);transition:opacity .4s ease-out var(--delay), transform 1.2s var(--expo) var(--delay);}
.process .slidex{opacity:0;transform:translateX(100px);}
.process .slidex.in{opacity:1;transform:translateX(0px);transition:opacity .4s ease-out var(--delay), transform 1.5s var(--expo) var(--delay);}

/* For all line animations */
.lineParent{overflow:hidden;box-sizing:border-box;padding-bottom:12px;}
.lineParent + .lineParent{margin-top:-12px;}
h1 .lineParent:not(.uppercase), h2 .lineParent:not(.uppercase){padding-bottom:25px;margin-bottom:-25px;}

/* Text along circle */
.process .circular-text{position:relative;text-align:center;}
.process .circular-text h1, .process .circular-text h3, .process .circular-text p{display:inline-block;margin:auto;visibility:hidden;white-space:nowrap;overflow:hidden;max-width:100%;overflow:hidden;}
.process .circular-text .svg{position:absolute;left:50%;top:0;transform:translateX(-50%);}





/* Standard module */
.process .m{position:relative;width:100%;box-sizing:border-box;font-size:0;}
.process .m .l, .process .m .r{position:relative;display:inline-block;vertical-align:top;width:50%;box-sizing:border-box;}
.process .canoverflow{overscroll-behavior:contain;}






/* Process */
.page.process{background-image: linear-gradient(48deg, rgb(0, 172, 171) 0%, rgb(0, 165, 165) 44%, rgb(0, 172, 171) 100%);}
.m.process-hero{color:var(--lightgrey);min-height:150vh;display:flex;flex-flow:column;justify-content:space-between;}/*50vh taller for scroll effect*/
.m.process-hero .content{position:sticky;top:0;height:100vh;box-sizing:border-box;padding:120px var(--gutter) calc(var(--gutter) * 2) var(--gutter);}
.m.process-hero .title{align-self:stretch;}
.m.process-hero .title span{display:inline-block;opacity:0;will-change:opacity, transform;}
.m.process-hero .title h2, .m.process-hero .title h3{overflow:hidden;color:#fff;font-weight:600}
.m.process-hero .br{position:absolute;right:var(--gutter);bottom:calc(var(--gutter) * 1.5);}
.m.process-hero .txt{width:calc((var(--column) * 3) + (var(--gutter) * 2));box-sizing:border-box;padding-top:var(--gutter);}

.m.process-book{position:fixed;left:0;/*calc((var(--column) * 4) + (var(--gutter) * 3.5));*/top:100px;width:calc((var(--column) * 4) + (var(--gutter) * 6));opacity:0;z-index:0;}
.m.process-book.in{opacity:1;transition:opacity .2s ease var(--delay);}
.m.process-book .p{position:absolute;left:0;top:0;width:100%;/*height:100vh;*/z-index:1;/*background:var(--lightgrey);*/}
.m.process-book .p.left{z-index:2;position:relative;}
.m.process-book .p .front{position:relative;width:100%;z-index:1;backface-visibility:hidden;}
.m.process-book .p.left .front{cursor:pointer;border-radius:12px;overflow:hidden;}
.m.process-book .p .back{position:absolute;left:0;top:0;width:100%;border-radius:12px;overflow:hidden;}
.m.process-book .p .bg{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--lightgrey);border-radius:12px;}
.m.process-book .p.turned .front{visibility:hidden;}
.m.process-book .p.turned + .p .bg::after{content:"";position:absolute;left:-1px;top:10px;width:2px;height:calc(100% - 20px);background:var(--lightgrey);}/*middle extra line to cover rendering artifacts*/

@media (max-aspect-ratio:8.5/5){
    .m.process-book{top:auto;bottom:0;}
}
@media all and (min-width:1000.5px) and (max-width:1550px){
    .m.process-hero .title h3{font-size:4vw;}
    .m.process-hero .title h2{font-size:15vw;}
}
@media all and (min-width:1000.5px) and (max-height:650px){
    .m.process-hero p{font-size:14px;min-height:1.5rem;margin:0 0 20px;}
}
@media all and (min-width:1000.5px) and (max-height:550px){
    .m.process-hero p{font-size:1.2rem;}
}

.m.process-chapters{/*background:var(--lightgrey);*/padding:100px var(--gutter) var(--gutter) var(--gutter);font-size:0;display:flex;--pheight:calc((100vh - 100px) - var(--gutter));opacity:0;transform:translateY(100vh) translateY(-110px);transition:opacity .2s ease, transform .4s ease-out;margin-top:-100vh;will-change:opacity, transform;z-index:1;}
.m.process-chapters.inview{opacity:1;transform:translateY(0vh);transition:opacity .2s ease, transform 1s var(--expo);}
.m.process-chapters > .l{position:sticky;top:100px;width:calc((var(--column) * 2) + var(--gutter));min-width:240px;height:var(--pheight);margin-right:var(--gutter);}
.m.process-chapters > .l .framed{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;border:1px solid #D9D9D9;}
.m.process-chapters > .l .section{position:relative;width:100%;height:calc(100% - (32px * 5));background:var(--lightgrey);box-sizing:border-box;text-align:center;overflow:hidden;max-height:unset;transition:transform .8s var(--quart);will-change:transform;}
/* Handle offset */
.m.process-chapters > .l .section.research{transform:translateY(-100%) translateY(var(--pheight)) translateY(calc(32px * -5));}
.m.process-chapters > .l .section.concept{transform:translateY(-200%) translateY(var(--pheight)) translateY(calc(32px * -4));}
.m.process-chapters > .l .section.design{transform:translateY(-300%) translateY(var(--pheight)) translateY(calc(32px * -3));}
.m.process-chapters > .l .section.production{transform:translateY(-400%) translateY(var(--pheight)) translateY(calc(32px * -2));}
.m.process-chapters > .l .section.delivery{transform:translateY(-500%) translateY(var(--pheight)) translateY(calc(32px * -1));}
.m.process-chapters > .l .section.research.moveup{transform:translateY(-100%) translateY(32px);}
.m.process-chapters > .l .section.concept.moveup{transform:translateY(-200%) translateY(calc(32px * 2));}
.m.process-chapters > .l .section.design.moveup{transform:translateY(-300%) translateY(calc(32px * 3));}
.m.process-chapters > .l .section.production.moveup{transform:translateY(-400%) translateY(calc(32px * 4));}
.m.process-chapters > .l .section.delivery.moveup{transform:translateY(-500%) translateY(calc(32px * 5));}
/* Content */
.m.process-chapters > .l .section .section-btn{position:absolute;left:0;top:0;width:100%;height:32px;background:var(--lightgrey);z-index:2;font-size:13px;line-height:1;font-weight:600;text-align:left;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid transparent;border-bottom:1px solid #D9D9D9;box-sizing:border-box;padding:4px 18px;display:flex;align-items:center;transition:opacity .6s ease-in-out, padding .4s var(--quart);color: #000;}
.m.process-chapters > .l .section:last-of-type .section-btn{border-bottom:0;}
.m.process-chapters > .l .section.open + .section .section-btn{border-top:1px solid #D9D9D9;}
.m.process-chapters > .l .section .content{display:flex;box-sizing:border-box;padding:var(--gutter) 18px;height:100%;flex-flow:column;opacity:0;transition:opacity .2s ease;overflow:auto;}
.m.process-chapters > .l .section .content::after{content:"";position:absolute;left:0;bottom:0;width:calc(100% - 15px);height:50px;background:linear-gradient(0deg, var(--lightgrey) 0%, rgba(250, 250, 250, 0) 100%);opacity:0;transition:opacity .5s ease-out;pointer-events:none;}
.m.process-chapters > .l .section .content.scrolls::after{opacity:1;}
.m.process-chapters > .l .section .content.scrolls.scrolled::after{opacity:0;}
.m.process-chapters > .l .section .section-btn span{display:inline-flex;box-sizing:border-box;padding-top:2px;}
.m.process-chapters > .l .section .section-btn span:nth-of-type(2){width:24px;height:16px;border-radius:8px;margin-right:6px;align-items:center;text-align:center;justify-content:center;padding-top:1px;}
.m.process-chapters > .l .section .section-btn span.arrow{position:absolute;left:18px;top:6px;width:17px;height:17px;background:url("/wp-content/uploads/2025/12/arrow_r_dark.svg") no-repeat;margin-right:6px;opacity:0;transform:translateX(-23px);transition:opacity .2s ease, transform .3s var(--quart);}
.m.process-chapters > .l .section .section-btn:hover span.arrow{opacity:1;transform:translateX(0px);transition:opacity .2s ease .05s, transform .5s var(--quart) .05s;}
.m.process-chapters > .l .section .section-btn:hover{padding-left:41px;}
.m.process-chapters > .l .section.open .section-btn{opacity:0;transition:opacity .2s ease;}
.m.process-chapters > .l .section.open .content{opacity:1;transition:opacity .6s ease;}

.m.process-chapters > .l .section h5{width:62px;height:38px;border-radius:19px;line-height:38px;margin:20px auto 10px auto;font-size: 28px; font-weight: 500;}
.m.process-chapters > .l .section h3{padding-bottom:20px;font-size: 26px; font-weight: 700; margin: 0;}
.m.process-chapters .a{background:var(--lightbrown);}
.m.process-chapters .b{background:var(--lightpurple);color:#FFF;}
.m.process-chapters .c{background:var(--orange);color:#FFF;}
.m.process-chapters .d{background:var(--darkbrown);color:#FFF;}
.m.process-chapters .e{background:var(--yellow);}
.m.process-chapters .f{background:var(--lightgreen);color:#FFF;}
.m.process-chapters > .l .section .txt{text-align:left;color:#626262;/*margin-top:auto;align-self:flex-end;overflow:auto;*/}

.m.process-chapters .corner{position:absolute;width:16px;height:16px;z-index:2;}
.m.process-chapters .corner.tl{left:0;top:0;border-top-left-radius:8px;box-shadow:-4px -4px 0 4px var(--lightgrey);transform:skewY(-10deg);}
.m.process-chapters .corner.tr{right:0;top:0;border-top-right-radius:8px;box-shadow:4px -4px 0 4px var(--lightgrey);transform:skewY(10deg);}
.m.process-chapters .corner.br{right:0;bottom:0;border-bottom-right-radius:8px;box-shadow:4px 4px 0 4px var(--lightgrey);transform:skewY(-10deg);}
.m.process-chapters .corner.bl{left:0;bottom:0;border-bottom-left-radius:8px;box-shadow:-4px 4px 0 4px var(--lightgrey);transform:skewY(10deg);}
.m.process-chapters .r{flex-grow:1;}
.m.process-chapters .r .section{position:relative;width:100%;overflow:hidden;}
.m.process-chapters .r .section.top{z-index:2;}
.m.process-chapters .r .section .media{position:absolute;left:0;top:0;width:100%;height:100%;font-size:0;border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.onboarding .l{width:calc(39% - (var(--gutter) / 2));height:100%;border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.onboarding .r{width:calc(61% - (var(--gutter) / 2));height:100%;margin-left:var(--gutter);border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.onboarding .l .corner.bl{bottom:3.7vw;}
.m.process-chapters .r .section.onboarding .l .corner.br{bottom:6%;transform:none;}
.m.process-chapters .r .section.onboarding .r .corner.bl{bottom:5.75%;}
.m.process-chapters .r .section.onboarding .r .lazy{margin-top:-30px;}
.m.process-chapters .r .section.concept .l{width:calc(61% - (var(--gutter) / 2));height:100%;border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.concept .r{width:calc(39% - (var(--gutter) / 2));height:100%;margin-left:var(--gutter);border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.research .corner.tr{top:8.1%;}
.m.process-chapters .r .section.research .corner.br{bottom:8.1%;}
.m.process-chapters .r .section.concept .l .corner.tl{top:9%;}
.m.process-chapters .r .section.concept .l .corner.tr{top:3.7%;}
.m.process-chapters .r .section.concept .r .corner.tl{top:3.5%;}
.m.process-chapters .r .section.design{margin-top:var(--gutter);}
.m.process-chapters .r .section.design .corner.bl{bottom:8.4%;}
.m.process-chapters .r .section.design .lazy{margin-top:-30px;}
.m.process-chapters .r .section.production .l{width:calc(61% - (var(--gutter) / 2));height:100%;border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.production .r{width:calc(39% - (var(--gutter) / 2));height:calc(50% - (var(--gutter) / 2));margin-left:var(--gutter);border-radius:8px;overflow:hidden;}
.m.process-chapters .r .section.production .r.bottom{position:absolute;right:0;bottom:0;}
.m.process-chapters .r .section.production .l .corner.tr{top:5%;}
.m.process-chapters .r .section.production .l .corner.br{bottom:5%;}
.m.process-chapters .r .section.production .r.top .corner.tl{top:10.6%;}
.m.process-chapters .r .section.production .r.top .corner.tr{top:16.6%;}
.m.process-chapters .r .section.production .r.bottom .corner.bl{bottom:10.6%;}
.m.process-chapters .r .section.production .r.bottom .corner.br{bottom:16.6%;}
.m.process-chapters .r .section.delivery .corner.tl{top:9.8%;}
.m.process-chapters .r .section.delivery .lazy{margin-top:-60px;}

@media all and (min-height:900.5px){
    .m.process-chapters > .l .section .txt p.c6{font-size:1.3rem;}
}
@media all and (max-height:700.5px){
    .m.process-chapters > .l .section .content{padding:18px;}
    .m.process-chapters > .l .section h3{padding-bottom:15px;}
}
@media all and (max-height:650.5px){
    .m.process-chapters > .l .section h5{margin:15px auto 5px auto;}
}

@media all and (min-width:1000.5px) and (max-height:700px){
    .m.process-hero .content{padding-top:100px;}
    .m.process-chapters{padding-top:90px;--pheight:calc((100vh - 85px) - var(--gutter));}
    .m.process-chapters > .l{top:90px;}
}
@media all and (min-width:1000.5px) and (max-height:600px){
    .m.process-hero .content{padding-top:90px;}
}
@media all and (min-width:1000.5px) and (max-height:500px){
    .m.process-hero .content{padding-top:80px;}
}
/* Mobile only */
@media all and (max-width:1000.5px){
    .m.process-hero .content{padding:70px var(--gutter) calc(var(--gutter) * 2) var(--gutter);}
    .m.process-hero .title{width:calc((50% - var(--gutter) / 2));display:inline-block;vertical-align:top;}
    .m.process-hero .br{position:relative;right:auto;bottom:auto;}
    .m.process-hero .txt{width:calc((50% + var(--gutter) / 2));padding:var(--gutter) 0 0 var(--gutter);display:inline-block;vertical-align:top;}

    .m.process-book{position:fixed;left:0;top:auto;bottom:0;width:calc((var(--column) * 4) + (var(--gutter) * 3));max-height:50lvh;}
    .m.process-book .p.left .front{border-radius:6px;}
    .m.process-book .p .back{border-radius:6px;}
    .m.process-book .p .bg{border-radius:6;}
    .m.process-book .p.turned + .p .bg::after{top:6px;height:calc(100% - 12px);}/*middle extra line to cover rendering artifacts*/

    .m.process-chapters{padding:var(--gutter) var(--gutter) 60px var(--gutter);display:block;}
    .m.process-chapters > .l{position:relative;top:auto;width:100%;height:auto;margin-right:0;}
    .m.process-chapters > .l .framed{height:auto;border-radius:0;border:0;}
    .m.process-chapters > .l .section{height:auto;}
    .m.process-chapters > .l .section + .section{margin-top:var(--gutter);}
    .m.process-chapters > .l .section.research{transform:none;}

    .m.process-chapters > .l .section.concept{transform:none;}
    .m.process-chapters > .l .section.design{transform:none;}
    .m.process-chapters > .l .section.production{transform:none;}
    .m.process-chapters > .l .section.delivery{transform:none;}
    .m.process-chapters > .l .section.research.moveup{transform:none;}
    .m.process-chapters > .l .section.concept.moveup{transform:none;}
    .m.process-chapters > .l .section.design.moveup{transform:none;}
    .m.process-chapters > .l .section.production.moveup{transform:none;}
    .m.process-chapters > .l .section.delivery.moveup{transform:none;}
    /* Content */
    .m.process-chapters > .l .section .section-btn{display:none;}
    .m.process-chapters > .l .section .content{display:block;opacity:1;padding:24px var(--gutter);overflow:visible;}
    .m.process-chapters > .l .section .content::after{display:none;}
    .m.process-chapters > .l .section .content .circular-text{transform:scale(.75,.75);}
    .m.process-chapters > .l .section h5{width:48px;height:30px;border-radius:15px;line-height:30px;margin:16px auto 10px auto;}
    .m.process-chapters > .l .section .txt{columns:2;column-gap:var(--gutter);}

    .m.process-chapters .l .aspect-mask{position:relative;border-radius:8px;overflow:hidden;}
    .m.process-chapters .l .aspect-mask .lazy{position:absolute;left:0;top:0;width:100%;height:100%;}
    .m.process-chapters .l .aspect-mask .lazy video{object-fit:cover;}
    .m.process-chapters .l .top{width:100%;margin:-6px 0 0 0;}
    .m.process-chapters .l .bottom{width:100%;margin:-6px 0 0 0;}
    .m.process-chapters .r{display:none;}
}

@media all and (max-width:1000.5px) and (orientation:landscape){
    .m.process-hero .txt{padding-left:20%;}
    .m.process-book{max-width:25%;}
}