/*==========================
	Custom css
==========================*/
/* =========
	Typeogrphy
=========== */

::selection{
	background: var(--primary);
	color: #fff !important;
}

.font-poppins h1,
.font-poppins h2,
.font-poppins h3,
.font-poppins h4,
.font-poppins h5,
.font-poppins h6,
.font-poppins{
	font-family: 'Poppins', sans-serif;
}
.font-roboto{
	font-family: 'Roboto', sans-serif;
}
.font-montserrat{
	font-family: 'Montserrat', sans-serif;
}
.font-lora{
	font-family: 'Lora', serif;
}
.font-barlow{
	font-family: 'Barlow', sans-serif;	
}
.sy-controls {
    display: none !important;
}

/* Coming Soon */
.dez-coming-soon {
    position: relative;
    min-height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
	z-index: 1;
}
.dez-coming-soon .container {
    position: relative;
}
.dez-coming-bx {
    width: 100%;
}

/* Position */
.posi-center,
.bottom-left,
.top-right,
.top-left {
    position: fixed;
    z-index: 2;
	display: block;
}

.bottom-left {
    bottom: 60px;
    left: 60px;
}
.top-right {
    top: 60px;
    right: 60px;
}
.top-left {
    top: 20%;
    left: 60px;
}

.posi-center {
    left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	width: 100%;	
}
.dez-align .top-right{
	right:10px;
}
/* sidenav-menu */
.sidenav-menu{
    position: fixed;
    left: 0;
    height: 100vh;
    width: 90px;
    border-right: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 20px;
    justify-content: space-between;
}
.menu-btn{
	display:none;
}
.menu-btn a{
	position: relative;
    width: 40px;
    height: 22px;
    display: flex;
    justify-content: space-between;
    flex: unset;
    flex-direction: column;
}
.menu-btn a span{
    height: 2px;
    background: #000;
    display: block;
    width: 100%;
}
.sidenav-menu .dez-social-icon.social-2{
	margin:0;
}
.sidenav-menu .dez-social-icon.social-2 li a{
    color: #000;
    font-family: 'Lora', serif;
    text-transform: capitalize;
    font-weight: 400;
    writing-mode: vertical-rl;
    padding: 10px 10px;
    margin: 0;
    display: block;
}
/* nav */
.menuleft{
	width: 100%;
    background: #fff;
    height: 100%;
    position: fixed;
    z-index: 999;
    left: -100%;
    top: 0;
    display: flex;
    align-items: center;
	transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.menuleft:after{
	content: "";
    height: 100%;
    width: 0;
    background: #ff6977;
    top: 0;
    z-index: -1;
    position: absolute;
    left: 0;
    transition: all 0.5s ease 0.5s;
}
.menuleft.active:after{
	width: 100%;
}
.menuleft .close-btn{
    position: absolute;
    right: 40px;
    top: 40px;
    font-size: 70px;
    font-weight: 100;
    color: #fff;
    line-height: 40px;
    cursor: pointer;
}
.menuleft.active{
	left:0;
}

.menuleft .nav{
    padding: 0 80px;
}
.menuleft .nav li{
	display:block;
	width:100%;
}
.menuleft .nav li a{
	color: #fff;
    display: inline-block;
    font-size: 70px;
    padding: 15px 0;
    line-height: 80px;
	position:relative;
	z-index:1;
	transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.menuleft .nav li a:after{
    content: "";
    width: 0;
    height: 6px;
    position: absolute;
    left: 0;
    top: 50%;
    background: #fff;
    opacity: 1;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.menuleft .nav li a:hover:after{
	width: 100%;
}
.menuleft .nav li a{
	padding-left:20px;
}
/* ===============================
	about-sidebox
================================ */
.about-sidebox {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    left: -110%;
    display: block;
    overflow: hidden;
    margin-top: 0;
    z-index: 9999;
	background:#fff;
	transition:all 0.8s;
}
.about-sidebox.active {
	left: 0;
}
.about-sidebox:after{
	content:"";
	position:absolute;
	width:100%;
	bottom:0;
	z-index:-1;
	left:0;
	right:100%;
	transition:all 0.5s;
	background:#000;
}
.contact-box{
	max-width:50vw;
	height:100vh;
    background: #e4e8f3;
}
.about-sidebox .closebtn{
	position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    z-index: 2;
    font-size: 30px;
    font-weight: 200;
    line-height: 50px;
    text-align: center;
    background: #00bce2;
    color: #fff;
}
.about-sidebox .closebtn:hover{
	background:#ff7e1c;
	color:#fff;
}
.about-section{
	display:flex;
}
.contact-info {
	height: 100vh;
	width: 100vw;
	display: flex;
	background: #e4e8f3;
}
.contact-info .col:first-child{
	background:#eef2fb;
}
.contact-info .col {
	height: 100%;
	padding: 60px 80px;
    max-width: 50%;
    flex: 0 0 50%;
	clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 0% 100%);
    -ms-clip-path:polygon(0% 100%, 0% 0%, 0% 0%, 0% 100%);
    -moz-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 0% 100%);
    -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 0% 100%);
	transition:all 0.8s ease 0.8s;
}
.contact-info .col .title {
	margin: 0 0 10px 0;
	font-size: 16;
	font-weight: 400;
	line-height: 1.3;
    color: #717171;
}
.contact-info .col a,
.contact-info .col p {
	transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
	font-size: 20px;
	font-weight: 600;
    line-height: 1.3;
	color: #212328;
}
.contact-info .col a:hover {
	color: #00bce2;
}
.about-sidebox.active .contact-info .col{
	clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
    -ms-clip-path:polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
    -moz-clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
    -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%);
}
/* bell */
@-webkit-keyframes ring {
	0% { -webkit-transform: rotateZ(0); }
	1% { -webkit-transform: rotateZ(30deg); }
	3% { -webkit-transform: rotateZ(-28deg); }
	5% { -webkit-transform: rotateZ(34deg); }
	7% { -webkit-transform: rotateZ(-32deg); }
	9% { -webkit-transform: rotateZ(30deg); }
	11% { -webkit-transform: rotateZ(-28deg); }
	13% { -webkit-transform: rotateZ(26deg); }
	15% { -webkit-transform: rotateZ(-24deg); }
	17% { -webkit-transform: rotateZ(22deg); }
	19% { -webkit-transform: rotateZ(-20deg); }
	21% { -webkit-transform: rotateZ(18deg); }
	23% { -webkit-transform: rotateZ(-16deg); }
	25% { -webkit-transform: rotateZ(14deg); }
	27% { -webkit-transform: rotateZ(-12deg); }
	29% { -webkit-transform: rotateZ(10deg); }
	31% { -webkit-transform: rotateZ(-8deg); }
	33% { -webkit-transform: rotateZ(6deg); }
	35% { -webkit-transform: rotateZ(-4deg); }
	37% { -webkit-transform: rotateZ(2deg); }
	39% { -webkit-transform: rotateZ(-1deg); }
	41% { -webkit-transform: rotateZ(1deg); }

	43% { -webkit-transform: rotateZ(0); }
	100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
	0% { -moz-transform: rotate(0); }
	1% { -moz-transform: rotate(30deg); }
	3% { -moz-transform: rotate(-28deg); }
	5% { -moz-transform: rotate(34deg); }
	7% { -moz-transform: rotate(-32deg); }
	9% { -moz-transform: rotate(30deg); }
	11% { -moz-transform: rotate(-28deg); }
	13% { -moz-transform: rotate(26deg); }
	15% { -moz-transform: rotate(-24deg); }
	17% { -moz-transform: rotate(22deg); }
	19% { -moz-transform: rotate(-20deg); }
	21% { -moz-transform: rotate(18deg); }
	23% { -moz-transform: rotate(-16deg); }
	25% { -moz-transform: rotate(14deg); }
	27% { -moz-transform: rotate(-12deg); }
	29% { -moz-transform: rotate(10deg); }
	31% { -moz-transform: rotate(-8deg); }
	33% { -moz-transform: rotate(6deg); }
	35% { -moz-transform: rotate(-4deg); }
	37% { -moz-transform: rotate(2deg); }
	39% { -moz-transform: rotate(-1deg); }
	41% { -moz-transform: rotate(1deg); }

	43% { -moz-transform: rotate(0); }
	100% { -moz-transform: rotate(0); }
}

@keyframes ring {
	0% { transform: rotate(0); }
	1% { transform: rotate(30deg); }
	3% { transform: rotate(-28deg); }
	5% { transform: rotate(34deg); }
	7% { transform: rotate(-32deg); }
	9% { transform: rotate(30deg); }
	11% { transform: rotate(-28deg); }
	13% { transform: rotate(26deg); }
	15% { transform: rotate(-24deg); }
	17% { transform: rotate(22deg); }
	19% { transform: rotate(-20deg); }
	21% { transform: rotate(18deg); }
	23% { transform: rotate(-16deg); }
	25% { transform: rotate(14deg); }
	27% { transform: rotate(-12deg); }
	29% { transform: rotate(10deg); }
	31% { transform: rotate(-8deg); }
	33% { transform: rotate(6deg); }
	35% { transform: rotate(-4deg); }
	37% { transform: rotate(2deg); }
	39% { transform: rotate(-1deg); }
	41% { transform: rotate(1deg); }

	43% { transform: rotate(0); }
	100% { transform: rotate(0); }
}
.copyright-text{
	color: #fff;
    font-size: 14px;
    margin-bottom: 0;
}
.copyright-text a{
	color: inherit;
}
/* ===============================
	Coming Soon 3
================================ */
.style-3 .logo{
	margin-bottom:40px;
}
.style-3 .logo img {
	width: 202px;
	height: auto;
}
.style-3 .dez-title {
    font-size: 60px;
    line-height: 1.2;
    margin-top: 0;
    font-weight: 600;
	color:#fff;
}
.style-3 .dez-text{
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 60px;
    font-weight: 500;
    margin-bottom: 60px;
	color:#fff;
}
.style-3 .dez-text span{
	color:#00bce2;
}
.style-3 .sy-box {
	position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #031322;
}
.style-3 .sy-pager{
	display:none;
}
.style-3 .dez-social-icon li a{
	color: #000;
    margin-right: 5px;
}
.style-3 .copyright-text{
	color:#fff;
}
.style-3 .sy-slide > img{
    height: 120%;
    object-fit: cover;
    min-height: 120vh;
}

.bg-move-box,
.parallax {
    position: absolute;
    width: 110%;
    height: 110%;
    overflow: hidden;
    left: -5%;
    top: -5%;
    z-index: -1;
}

/* particles js */
.particles-js-canvas-el {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
	z-index: -1;
}

.site-nav-canvas{
	z-index: 999;
    opacity: 0.7;
    position: fixed;
    top: 0;
    right: 0;
}

@media only screen and (max-width: 1650px) {
	.contact-info .col {
		padding: 60px;
	}
}
@media only screen and (max-width: 1400px) {
	.bottom-left {
		bottom: 40px;
		left: 40px;
	}
	.top-left {
		top: 15%;
		left: 40px;
	}
	.style-3 .dez-title {
		font-size: 50px;
	}
	.style-3 .dez-text{
		font-size: 19px;
	}
	.top-right {
		top: 40px;
		right: 40px;
	}
}

@media only screen and (max-width: 1200px) {
	.about-sidebox .closebtn{
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	.sy-slide.kenburns{
		height: 110%
	}
}

@media only screen and (max-width: 991px) {
	.posi-center,
	.center-md,
	.posi-center,
	.bottom-left,
	.top-right,
	.top-left{
		position: unset;
	}
	.style-3 .center-md{
		min-height: calc(100vh - 100px);
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 60px 10px;
	}

	.contact-info {
		height: 100%;
	}
	.about-section {
		display: flex;
		flex-direction: column;
	}
	.menuleft .nav {
		padding: 0 0px;
	}
	.top-md {
		position: fixed;
		width: 100%;
		top: 50px;
	}
	.style-3 .top-left,
	.style-3 .bottom-left {
		width: 100%;
		text-align: center;
	}
	.style-3 .bottom-left{
		padding-bottom: 30px;
	}
	.style-3 .dez-social-icon li a{
		margin-left:3px;
		margin-right:3px;
	}
	/* scroll */
	body{
		overflow:unset;
	}
}
@media only screen and (max-width: 767px) {
	.style-3 .dez-title {
		font-size: 40px;
	}
	.style-3 .dez-text{
		font-size: 19px;
	}
	.menuleft .nav li a{
		font-size: 40px;
		line-height: 40px;
	}
	.sidenav-menu .dez-social-icon.social-2 li a{
		padding: 4px 8px;
		font-size: 14px;
	}
}
@media only screen and (max-width: 576px) {
	.style-3 .dez-title {
		font-size: 28px;
	}
	.style-3 .dez-text{
		font-size: 18px;
		margin-bottom: 40px;
	}
	.button-lg {
		padding: 8px 20px;
		font-size: 13px;
	}
	.radius-md {
		border-radius: 6px;
		-webkit-border-radius: 6px;
	}
	.style-3 .logo img{
		width: 165px;
	}
	.dez-social-icon li a{
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 48px;
		font-size: 14px;
	}
	.contact-info {
		flex-wrap: wrap;
	}
	.contact-info .col {
		height: 50%;
		max-width: 100%;
		width: 100%;
		flex: 0 0 100%;
	}
	.dez-social-icon{
		margin: 0 0px 5px 0;
	}
	.menu-btn a{
		width:30px;
		height:20px;
	}
	.menuleft .nav {
		padding: 0 20px;
	}
	.menuleft .close-btn{
		right: 20px;
		top: 20px;
	}
	.top-md{
		top: 15px;
	}
	.top-left {
		top: 15px;
	}
	.bottom-left {
		bottom: 12px;
	}
	.sidenav-menu{
	    width: 50px;	
		padding: 10px 5px 20px 5px;	
	}
	.city-box {
		background-size: cover;
		background-position: left !important;
	}
	.dez-social-icon.social-2 li a{
		font-size: 14px;
	}
	.copyright-text{
		font-size: 12px;
	}
}