/* 
	Custom CSS
*/

*{
	font-family: 'Roboto', sans-serif;
}

html{
	scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
}

p{
	font-size: 1rem;
    line-height: 1.7rem;
    font-weight: 300;
    letter-spacing: 0.02rem;
}

.btn{
	border-radius: 30px;
	font-size: 0.9rem;
}

.btn-dark{
	background-color: #242424;
	border-color: #242424;
}

.bg-dark{
	background-color: #242424!important;
}

.bg-black{
	background-color: #000;
}

nav{
	z-index: 999;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255);
}

@media (max-width: 768px) { 
	.navbar-collapse{
		position: absolute;
		right: 18px;
		top: 80px;
	}
}

.hero--content h2{
	font-size: 4.5rem;
    line-height: 6rem;
}

/* .hero--section{
	height: 87vh;
}

.hero--section {
    height: 100vh;
} */

.hero--image{
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
}

.card {
	min-height: 301px;
	border-radius: 0.65rem;
}

.card-title{
	font-size: 1.1rem;
    font-weight: 600;
}

.card-text{
	font-size: 0.8rem;
	line-height: 1.2rem;
}

.hero-boy--image{
	position: absolute;
    top: 16%;
    left: 20%;
	transform: scale(0.5);
}

.bg--topbar{
	background: #0f0f0f;
}

.support--detail{
	font-size: 1.1rem;
    font-weight: 400 ;
}

.privacy--bar *{
	font-size: 0.7rem ;
}

@media (max-width:768px ){
	.navbar {
		flex-wrap: unset;
	}

	.navbar-brand img{
		width: 70%;
	}
}	

button.navbar-toggler{
	outline: none;
}

@media (max-width:768px ){
	.hero--content h2 {
		font-size: 40px;
		line-height: 4.3rem;
	}
}

@media (max-width: 768px) { 
	.hero--section{
		height: auto!important;
	}
}

@media (max-width: 576px) { 
	.hero--section{
		height: auto!important;
	}
}

.about--image-wrapper{
	background-image: url(../img/home--aboutus.png);
	background-size: cover;
}

.service-bg{
	background-image: url(../img/services-bg.png) ;
}

.cards-more--info .card{
	min-height: 485px ;
}

.other-services--button.active , .other-services--button:hover{
	color: #000!important ;
	background: #A8D2FC;
	background: -webkit-linear-gradient(top, #A8D2FC, #B49EFD);
	background: -moz-linear-gradient(top, #A8D2FC, #B49EFD);
	background: linear-gradient(to bottom, #A8D2FC, #B49EFD);
}

.other-services--button span img{
	transform: scale(0.6) ;
}

.btn--light-border{
	color: #fff ;
	border: .5px solid #fff;
}



@media (max-width: 1200px) {

	/* .about--us{
		min-height: 100vh;
	} */

	/* .about--image-wrapper{
		min-height: 100vh;
	}*/

	.hero--image{
		object-fit: cover;
	}
}

@media (max-width: 992px) {
	.navbar-dark .navbar-nav .nav-link {
		color: #fff;
	}

	.nav-item .nav-link.btn--light-border{
		border: none;
		border-radius: 0;
		text-align: unset;
	}
}

.navbar-collapse.collapse.show{
	background: #000;
}

@media (max-width: 768px) {
	.navbar-collapse.collapse.show{
		width: 95%;
		border: 2px solid black;
		background: #000;
	}
}

.navbar-dark .navbar-toggler-icon::before{
	background-image: none;
}

.navbar-dark .navbar-toggler-icon::before{
	content: "\f0c9";
	font-family: 'Line Awesome Free';
	font-size: 2rem;
	font-weight: 900;
	background-image: none;
}

nav{
	position: absolute!important;
	width: 100%;
}

@media (max-width: 768px) {
	nav.nav--home{
		position: relative!important;
		width: 100%;
	}
}

nav.sticky{
	position: sticky!important;
	top: 0;
}

nav.sticky{
	background: #fff;
}

nav.sticky .navbar-nav .nav-link {
	color:#000;
}

nav .logo-2{
	display: none;
}

nav.sticky .logo-1{
	display: none;
}

nav.sticky .logo-2{
	display: block;
}

@media (min-width: 1200px) {

	nav.sticky .navbar-nav .btn--light-border {
		color: #000;
		border: .5px solid #000;
	}
}

nav.sticky .navbar-nav .nav-link:hover{
	color: #656565;
}

.navbar-dark .navbar-toggler-icon::before{
	color: #000;
}

@media (max-width: 768px){

	.navbar-collapse.show{
		background: #000!important;
		height: 100vh;
		top: 0;
		right: 0;
		width: 100%!important;
	}
	
	.navbar-collapse.show .mobile-logo{
		display: block!important;
		margin-bottom: 20px;
		margin-left: 20px;
	}

	.navbar-collapse.show .mobile-social{
		display: block!important;
		margin-top: 20px;
		margin-left: 20px;
	}

	.navbar-collapse.show .nav-link{
		text-align: center;
		font-size: 1.2rem;
		margin-left: 20px;
		color: #fff!important;
	}

	.navbar-toggler{
		z-index: 999;
		background: #fff;
	}

	.navbar-toggler{
		position: fixed;
		right: 20px;
	}

	.navbar-collapse.show{
		position: fixed!important;
	}
}

.checkbox--title {
    font-size: 0.8rem;
    font-weight: 600 ;
}

.lets-talk-checkbox {
    position: absolute;
    top: 20px;
    right: 40px;
    transform: scale(1.5);
	border-radius: 2px ;
}

.service--checkbox {
    border: 1px solid #ccc;
	
}

@media (max-width:1366px) and (max-width: 1023px) {
	.section-to-screen-size{
		min-height: 100vh!important;
	}
}

.lets--talk textarea{
	border-color: #ccc ;
}

.object-fit-contain{
	object-fit: contain;
}

@media (max-width: 1200px) { 
	.custom-paading--mobile-view{
		padding-top: 170px;
	}
}

@media (max-width: 768px) { 
	.custom-paading--mobile-view {
		padding-top: 40px!important;
	}
}

.social--icons{
	font-size: 1.6rem;
}

.form-control:focus {
    border-color: #000;
	box-shadow: none;
}

/* flip card in why funwynk cards */
.flip-card {
	background-color: transparent;
	height: 360px;
	perspective: 1000px ; /* Remove this if you don't want the 3D effect */
}
  
/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d ;
}
  
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
	cursor: pointer ;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden ;
}

/* Style the back side */
.flip-card-back {
	background-color: #ffffff;
	color: #000000;
	border-radius: 0.65rem;
	transform: rotateY(180deg) ;
}

textarea:focus {
	outline-color: #000;
	outline: none;
	border: 1px solid #000;
}

.btn:hover{
	color: #fff;
}

@media (min-width: 1200px){
	.container {
		max-width: 1920px;
	}
}

@media (max-width: 768px) { 
	.custom-paading--mobile-view{
		padding-top: 40px;
	}
}

.custom--padding{
	padding-top: 170px;
}

@media (min-width:1450px){
	.hero--section{
		max-width: 1920px;
		height: auto;
		width: 100%;
		padding-bottom: 200px;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}

	.hero--image {
		
	}
}

.hero--content {
	padding-bottom: 140px;
    padding-top: 140px;
}

@media (max-width: 1167px){
	.hero--content h2 {
		font-size: 3.5rem;
		line-height: 6rem;
	}
}

@media (max-width: 991.98px){
	.hero--content h2 {
		font-size: 2.7rem;
		line-height: 4rem;
	}
}

@media (min-width: 1024px){
	.cards-more--info .col-lg-3 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (min-width: 1200px){
	.cards-more--info .col-lg-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
}

@media (max-width:1200px) {
	.hero--section {
		height: auto;
	}
}

@media(max-width:400px){
	.flip-card {
		background-color: transparent;
		height: 440px;
		perspective: 1000px;
	}
}

@media (min-width: 768px){
	.about--us .container{
    	max-width: 100%;
	}
}

@media (min-width: 992px){
	.about--us .container{
    	max-width: 100%;
	}
}

@media (min-width: 1200px){
	.about--us .container {
		max-width: 1920px;
	}
}

/* @media (min-width: 992px){
	nav {
		background: rgba(0,0,0,0.2);
	}
} */

#service--game-development .cards-more--info .card {
    min-height: 462px;
}

@media(max-width:1440px){

	#service--game-development .cards-more--info .card {
		min-height: 100%;
	}

	#service--extended-reality .cards-more--info .card {
		min-height: 100%;
	}

	#service--digital-services .cards-more--info .card {
		min-height: 100%;
	}

}

@media(max-width:992px){
	#service--game-development .cards-more--info .card {
		min-height: 462px;
	}
}

@media(max-width:767px){
	#service--game-development .cards-more--info .card {
		min-height: 362px;
	}
}

.flip-card {
    min-height: 270px;
    max-height: 500px;
    height: auto;
}

.flip-card-front, .flip-card-back {
    width: 100%;
    height: 220px;
}

.flip-card-back {
	min-height: 350px;
    height: auto;
}

@media (max-width: 767px){
	.hero--section{
		background: url(../img/hero--image-mobile.png);
		background-size: cover;
		color: white;
	}
}

#privacy-policy nav{
	position: relative!important;
	background-color: #000000;
	color: #fff;
}


@media(min-width:1440px){
	.extended--reality img{
		width: 60%;
	}

	.game--development img{
		width: 85%;
	}

	.digital--services img{
		width: 80%;
	}

	.extended--reality .content, .digital--services .content{
		padding-right: 20%!important;
	}

	.game--development .content{
		padding-right: 10%!important;
	}

	.flip-card {
		min-height: 390px;
		max-height: 500px;
		height: auto;
	}

	.flip-card .card-body{
		padding: 80px
	}

	.about--us{
		height: 100vh;
	}
	
	.about--image-wrapper{
		height: 100vh;
	}
	
	.about--content{
		display: flex;
		align-items: center;
	}
}

@media (min-width: 1440px){
	.full-viewport--height{
		height: 100vh;
	}
}

#services .extended--reality .content h1, #services .game--development .content h1, #services .digital--services .content h1{
	font-weight: 900;
	line-height: 1.4;
}

#services .extended--reality .content p, #services .game--development .content p, #services .digital--services .content p{
	font-size: 1.5rem;
	font-weight: 250;
}

#service--extended-reality .right-content h1, #service--digital-services .right-content h1, #service--game-development .right-content h1{
	font-size: 3.3rem;
	line-height: 1.4;
} 

#service--extended-reality .right-content p, #service--digital-services .right-content p, #service--game-development .right-content p{
	font-size: 1.4rem;
	line-height: 2.0rem;
	font-weight: 300;
	letter-spacing: 0.03rem;
} 

.about--us h1{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 1000;
}