:root {
	--white: #ffffff;
	--black: #000;
	--gary-color: #727272;
	--lightgary-color: #b2b9bd;
	--primary: #E10E7C;
	--secondary: #009CDC;
}

html {
	font-size: 16px;
	overflow-x: clip;
}
body {
	position: relative;	
	background: #fff;
	overflow-x: clip;
}

a,
button {
	text-decoration: none !important;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

a:hover,
button:hover {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/* loader */
.preLoader {
	width: 100%;
	height: 100%;
	z-index: 1111;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.preLoader.black {
	background-color: var(--primary);
	z-index: 11113;
}
.preLoader.white {
	z-index: 11112;
	background-color: var(--secondary);
}

/* loader */

/* Cursor Start */
.mouse-cursor {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	visibility: hidden;
}

.cursor-inner {
	margin-left: 2px;
	margin-top: 2px;
	width: 7px;
	height: 7px;
	z-index: 10000001;
	background-color: var(--primary);
	-webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
	margin-left: -10px;
	margin-top: -10px;
	width: 30px;
	height: 30px;
	background-color: var(--primary);
	opacity: 0.3;
}

/* Cursor End */

/* mouse animation css  */

.bounce-element {
	animation: bounce 0.9s infinite alternate;
	-webkit-animation: bounce 0.9s infinite alternate;
}
@keyframes bounce {
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(-15px);
	}
}
@-webkit-keyframes bounce {
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(-15px);
	}
}
.mouse {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 11;
	text-align: center;
}

/* mouse animation css  */
/* split css */
.split-screen {
    background: var(--secondary);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}
.spltvector {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 69%;
}
a.second-logo {
    display: table;
    margin-left: auto;
}

.element img {
    position: absolute;
    z-index: 1;
}

.elem1 {
    top: 10%;
    left: 10%;
	animation: rotation 10s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.elem2 {
    top: 10%;
    left: 42%;
	animation: spring 3s infinite linear;
}
@keyframes spring {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(0.75, 1.25, 1);
    }
    40% {
        transform: scale3d(1.25, 0.75, 1);
    }
    50% {
        transform: scale3d(0.85, 1.15, 1);
    }
    65% {
        transform: scale3d(1.05, 0.95, 1);
    }
    75% {
        transform: scale3d(0.95, 1.05, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

.elem3 {
    left: 22%;
    bottom: 16%;
}

.elem4 {
    right: 21%;
    top: 6%;
	animation: flash 5s infinite linear;
}

.elem5 {
    right: 4%;
    top: 17%;
}

.elem6 {
    bottom: 10%;
    left: 53%;
	animation: spring 3s infinite linear;
}

.elem7 {
    right: 0;
    bottom: 0;
}
/* split css end */