* {
	margin: 0;
	padding: 0;
	font-family: public sans, sans-serif !important;
	
}

body {
	overflow: hidden;
	scroll-behavior: smooth;
}

.menu-icon__line {
	height: 2px;
	width: 30px;
	display: block;
	background-color: #fff;
	margin-bottom: 7px;
	cursor: pointer;
}
.page-404{

    position: absolute;
    left: 50%;
    top:50%;
   transform:translate(-50%,-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
}
.page-404 h1{
	font-size: 14vw;
	color: #607885;
	height: 200px;
}
.page-404 p{
	color: rgb(195, 196, 198);
}
.goback a{
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    text-decoration: none;
font-style: normal;
font-weight: 600;
color:#696969;
padding-top: 20px;
}
.menu-icon__line-left {
	width: 16.5px;
	transition: all 200ms linear;
}

.menu-icon__line-right {
	width: 16.5px;
	float: right;
	transition: all 200ms linear;
}

.menu-icon {
	height: 30px;
	width: 30px;
	position: relative;
	z-index: 989999999;
	cursor: pointer;
	display: block;
}

.hovermenutop:hover .menu-icon__line-left,
.hovermenutop:hover .menu-icon__line-right {
	width: 30px;
}

#tracker.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}

.logo-wrap {
	position: absolute;
	display: block;
	left: 0;
	top: 30px;
	cursor: pointer;
	z-index: 9899999999;
}

.nav-menu {
	position: relative;
	display: inline-block;
	position: relative;
	display: inline-block;
	float: right;
	padding-left: 15px;
	padding-right:25px;
	margin-top: 26px;
	padding-top: 15px;
	margin-top: 26px;
}

/* cursor tracker css: */

#tracker {
	position: absolute;
	width: 36px;
	height: 36px;
	 
	background-color: transparent;
	border: 2px solid #fff;
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
	transition:all 0.2s ease;
	border-radius: 50%;
	cursor: grab;
	z-index: 99999;
	overflow-x: hidden;
}

.cd-header{
	position: absolute;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0px;
    /* z-index: 99999; */
}


.scalehover{
	transform: translateX(-50%) translateY(-50%); 
}

.swiper-wrapper {
	display: flex;
	/* overflow-x: hidden; */
	position: relative;
	
	z-index: 9999;

	transition: transform 0.2s ease;

}


.swiper-slide {
	list-style: none;
	display: flex;
	min-width:30vw;
	min-height: 100vh;
	z-index: 9;
	align-items: center;
	justify-content: center;

}

.swiper-slide a {
	text-decoration: none;
	cursor: pointer;

}


/* casestudy images css: */

.case-study-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	z-index: 1;
}

.case-study-images li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style: none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}

.case-study-images li .img-hero-background {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style: none;
	opacity: 0;
	z-index: 5;
	
	/* transition: all 300ms linear; */
}

.case-study-images li .img-hero-background.no-blur {
	
	clip-path: none;
}

.case-study-images li.show .img-hero-background.no-blur {
	opacity:0.9;
	filter: brightness(0.4);
}

.case-study-images li h2 {
	position: absolute;
	width: 300%;
	text-align: center;
	font-size: 16vw;
	line-height: 0.8;
	color: rgba(200, 200, 200, .1);
	background: linear-gradient(rgba(75, 77, 100, 0.8), rgba(75, 77, 100, 0));

	-webkit-text-fill-color: transparent;
	font-weight: 900;
	bottom: 0;
	left: -100%;
	list-style: none;
	opacity: 0;
	z-index: 7;
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}

.case-study-images li h2.no-blur-image {
	color: rgba(200, 200, 200, .1);
	background: linear-gradient(rgba(75, 77, 100, 0.5), rgba(75, 77, 100, 0));

	-webkit-text-fill-color: transparent;
	mix-blend-mode: none;
}

.case-study-images li h2.bottom-name {
	text-align: center;
	font-size: 14vw;
	line-height: 0.8;
	color: #353746;
	background: none;

	-webkit-text-fill-color: #353746;
	bottom: auto;
	top: 50%;
	margin-top: -20px;
	mix-blend-mode: screen;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 400ms linear;
	transition: all 400ms linear;
}

.case-study-images li.show h2.bottom-name {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-top: -40px;
}

.case-study-images li h2.fullscreen-image {
	color: #353746;
}

.case-study-images li h2.fullscreen-image.no-blur {
	background: none;

	-webkit-text-fill-color: #353746;
	color: #353746;
	mix-blend-mode: screen;
}

.case-study-images li.show h2 {
	opacity: 1;
	filter: brightness(1.5);
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.case-study-images li .img-hero-background-over {
	position: absolute;
	width: 60%;
	height: 60%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	top: 20%;
	left: 20%;
	overflow: hidden;
	list-style: none;
	opacity: 0;
	z-index: 8;
	box-shadow: 0 0 20px rgba(0, 0, 0, .3);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}

.case-study-images li .img-hero-background-over:after {
	position: absolute;
	content: '';
	left: 0;
	height: 100%;
	top: 0px;
	background-color: #111;
	width: 100%;
	z-index: 9;
	opacity: 0.3;
}

.case-study-images li.show .img-hero-background {
	opacity: 0.5;
}

.case-study-images li.show .img-hero-background-over {
	opacity: 1;
}

.case-study-images li .hero-number-fixed {
	position: absolute;
	bottom: 70px;
	left: 50%;
	width: 40px;
	text-align: center;
	display: block;
	letter-spacing: 2px;
	list-style: none;
	font-size: 13px;
	margin-left: 30px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
}

.case-study-images li .hero-number-fixed.bottom-name {
	bottom: 170px;
}

.case-study-images li .hero-number.bottom-name {
	bottom: 170px;
}

.case-study-images li .hero-number-fixed:before {
	position: absolute;
	content: '';
	top: 50%;
	left: -60px;
	width: 60px;
	height: 1px;
	z-index: 1;
	background-color: rgba(255, 255, 255, .6);
}

.case-study-images li .hero-number {
	position: absolute;
	bottom: 70px;
	left: 50%;
	width: 40px;
	margin-left: -70px;
	text-align: center;
	display: block;
	letter-spacing: 2px;
	list-style: none;
	opacity: 0;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}

.case-study-images li.show .hero-number {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* case-study-image css close */
.swiper-slide h1:before {
	position: absolute;
	content: '';
	left: 0;
	height: 0;
	bottom: 0px;
	background-color: rgba(255, 255, 255, .5);
	cursor: pointer;
	will-change: opacity,height;
	width: 100%;
	z-index: 0;
	opacity: 0;

	transition: all 200ms linear;
}

.swiper-slide.active h1:before {
	opacity: 1;
	height: 20px;
}

.swiper-slide h1 {
	position: relative;
	font-size: 60px;
	will-change: opacity,height;
	font-weight: 800;
	letter-spacing: 3px;
	opacity: 0.5;
	line-height: 1;
	color: #fff;
}

.swiper-slide.active h1 {
	opacity: 1;
}

/* HOme nav-bar */

.nav{
	position: fixed;
	z-index: 98;
    width: 100%;
	top: -1500px;
    height: 100%;
	 background: rgba(9,9,12,1);
	 transition: all 1s ease-in-out;
}
.nav__content{
	width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
	
}
.nav__list-item a {
	font-weight: 700;
    line-height: 1.05;
	text-align: center;
	color: #fff;
    font-size: 60px;
    text-decoration: none;
    color: rgba(255,255,255,0.6);
	transition: all 200ms ease-in-out;
}
.nav__list-item{
	text-align: center;
	list-style: none;
}

.menu-icon__line-left.nav-active {
    width: 15px;
    -webkit-transform: translate(2px, 4px) rotate(45deg);
    transform: translate(2px, 4px) rotate(45deg) !important;
}

.menu-icon__line.nav-active {
    background-color: #fff;
    -webkit-transform: translate(0px, 0px) rotate(-45deg);
    transform: translate(0px, 0px) rotate(-45deg);
}
.menu-icon__line-right.nav-active {
    width: 15px;
    float: right;
    -webkit-transform: translate(-3px, -3.5px) rotate(45deg);
    transform: translate(-3px, -3.5px) rotate(45deg) !important;
}

.overlay-span{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.4);
    visibility: hidden;
    
}
body.no-scroll{
    overflow: hidden;
}

.opennavtop{
    background: rgba(9,9,12,1);
    position: fixed;
    width: 100%;
	z-index: 99999999;
    top:-1500px;
    height: 100%;
    transition: all 300ms ease-in-out;
}
.open_f{
    display: flex;
  
    justify-content: center;
}
.subopennav a{
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 3px;
  position: relative;
}

.subopennav a::after{
    position: absolute;
    content: '';
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    margin-top: 3px;
    background-color: rgba(255,255,255,0.2);
    z-index: 1;
 
    transition: all 100ms linear;

}
.subopennav a:hover::after{
    height:20px;
   
    opacity: 1;
}
.subopennav a:hover{
    color: #fff;
}


.subopennav{
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    position: absolute;
    top: 50%;
    transition: top 1s ease-in-out;
}

.swiper-scrollbar{
	background: rgba(255, 255, 255, 0.2);
    width: 40%;
    height: 1px;
    position:fixed;
    left: 30%;
    bottom: 40px;
    z-index: 9999999;
}
.swiper-ball{
	width: 19px;
	height: 19px;
    border-radius: 50%;
    position: absolute;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    left: 0;
    top: -9px;
	transition:all 0.2s ease;
    cursor: pointer;

}
.swiper-pos{
	position: relative;

}
.copyr {
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 94;

    writing-mode: vertical-lr;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
    transform: rotate(180deg);

}
.social-fixed {
    position: fixed;
    top: auto;
    bottom: 40px;
    left: 30px;
	z-index: 94999;
    writing-mode: vertical-lr;
}
.social-fixed a {
    position: relative;
    text-align: center;
    margin-top: 7px;
    margin-bottom: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
}
.outer-container{
	cursor: grab;
}

@media screen and (min-width:1400px){

	.swiper-slide{
		min-width: 24vw;
	}

}
@media screen and (min-width:1131px) and (max-width:1220px){

	.swiper-slide{
		min-width:28vw;
	}	

}

@media screen and (min-width:821px) and (max-width:1130px){

	.swiper-slide{
		min-width: 39vw;
	}

}


@media screen and (max-width:768px){


	
	#tracker{
		display: none;
	}
	

	.swiper-slide h1{
		font-size: 30px;
	}
	.swiper-slide.active h1:before {
		opacity: 1;
		height: 10px;
	}
	.swiper-slide{
		min-width:50vw;
	}
	.subopennav a{
		font-size: 81px;
	}
	.swiper-scrollbar{
		width: 80%;
    left: 11%;
	} 


	
	.outer-container{
		overflow-x: hidden;
	}
	
	.logo-wrap img{
		width: 254px;
		height: 70px;
	}

}


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

	#tracker{
		display: none;
	}
	

	.swiper-slide h1{
		font-size: 30px;
	}
	.swiper-slide.active h1:before {
		opacity: 1;
		height: 10px;
	}
	.swiper-slide{
		min-width:50vw;
	}
	.subopennav a{
		font-size: 81px;
	}
	.swiper-scrollbar{
		width: 80%;
    left: 11%;
	} 


	
	.outer-container{
		overflow-x: hidden;
	}
	
	.logo-wrap img{
		width: 254px;
		height: 70px;
	}

}













@media screen and (max-width:580px){


	#tracker{
		display: none;
	}
	.swiper-slide h1{
		font-size: 34px;
	}
	.outer-container{
		overflow-x: hidden;
	}
	.swiper-ball{
		transition: all 1s ease;
	}
	.swiper-wrapper{
		transition: transform 1s ease;
	}
	.swiper-slide{
		min-width:47vw;
	}
	.logo-wrap img{
		width: 254px;
		height: 70px;
	}

	.swiper-slide.active h1:before{
		height: 10px;
	}
	.swiper-scrollbar{
		width: calc(100% - 140px);
		left: 12%;
	}
	.subopennav a{
		font-size: 53px;
	}






}

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


	.logo-wrap img {
		width: 159px;
		height: 44px;
	}
	.swiper-slide {
		min-width:60vw;
	}
	.swiper-scrollbar{
		width: calc(100% - 140px);
		left: 19%;
	}




}



@media screen and (min-width:400px) and (max-width:580px){

	/* .swiper-scrollbar{
		bottom: 235px;
	}
	.case-study-images li .hero-number{
		bottom: 266px;
	}
	.case-study-images li .hero-number-fixed{
		bottom: 266px;
	}
	.case-study-images li h2{
		bottom: 177px;
	} */
	
}