.lodingsscren,
nav {
	display: -webkit-box
}

.mainBg,
.toggle-menu span {
	background-color: var(--mainColor)
}

.footer--tilte,
.sec3--h5,
.sec3-p,
.section2--p,
.section2--title {
	letter-spacing: 0
}

:root {
	--mainColor: #1090CB;
	--neroColor: #252525
}

body {
	font-family: 'Sen', sans-serif;
}

a {
	text-decoration: none
}

.Container {
	width: 90%;
	margin: auto
}

ul {
	padding-left: 0;
	list-style-type: none
}

.mainColor {
	color: var(--mainColor)
}

.neroColor {
	color: var(--neroColor)
}

p {
	color: #868686;
	margin: 0
}

.buttom {
	display: inline-block;
	padding: 5px 14px;
	background-color: #03a9f4;
	font-size: 15px;
	font-weight: 600;
	line-height: 2em;
	border-radius: 3px;
	-webkit-box-shadow: 0 6px 16px rgb(3 169 244 / 35%);
	box-shadow: 0 6px 16px rgb(3 169 244 / 35%);
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s
}

.Links--list,
.lodingsscren,
nav {
	display: -ms-flexbox
}

#scrollTopBtn {
	padding: 10px;
	background-color: #08d3bb;
	color: #fff;
	display: none;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 24px;
	border-radius: 50%;
	position: fixed;
	right: 3%;
	bottom: 5%;
	cursor: pointer;
	opacity: .5;
	z-index: 99999999999
}

#scrollTopBtn:hover {
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
	opacity: 1
}

nav {
	width: 95%;
	margin: auto;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 1rem 0
}

.Links--list {
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 50%
}

.Links--list a {
	color: #000;
	line-height: 24px
}

header {
	border-bottom: 1px solid rgba(129, 129, 129, .2)
}

.toggle-menu {
	background: 0 0;
	border: none;
	width: 35px;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	cursor: pointer;
	padding: 5px;
	z-index: 1;
	display: none
}

.toggle-menu:focus {
	outline: 0
}

.toggle-menu span {
	display: inline-block;
	height: 3px;
	margin: 3px 0;
	width: 40px;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s
}

.toggle-menu.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0
}

.toggle-menu.open span:first-child {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}

.toggle-menu.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.toggle-menu.open span {
	position: absolute;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

@media screen and (max-width:990px) {
	.Links--list {
		display: none
	}

	.Links--list.open,
	.toggle-menu {
		display: -webkit-box;
		display: -ms-flexbox
	}

	.toggle-menu {
		display: flex;
		z-index: 999
	}

	.Links--list.open {
		position: absolute;
		width: 100%;
		background-color: #fff;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
		display: flex;
		height: 100vh;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99
	}

	.Links--list a {
		margin: 2rem 0
	}
}

.lodingsscren {
	height: 100vh;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 99999999999;
	background-color: #fff;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute
}

.boxes,
.boxes .box {
	width: 32px;
	height: 32px
}

.boxes {
	position: relative;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	margin-top: 32px;
	-webkit-transform: rotateX(60deg) rotateZ(45deg) rotateY(0) translateZ(0);
	transform: rotateX(60deg) rotateZ(45deg) rotateY(0) translateZ(0)
}

.boxes .box {
	top: 0;
	left: 0;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}

.boxes .box:first-child {
	-webkit-transform: translate(100%, 0);
	-ms-transform: translate(100%, 0);
	transform: translate(100%, 0);
	-webkit-animation: 1s linear infinite box1;
	animation: .5s linear infinite box1
}

.boxes .box:nth-child(2) {
	-webkit-transform: translate(0, 100%);
	-ms-transform: translate(0, 100%);
	transform: translate(0, 100%);
	-webkit-animation: .5s linear infinite box2;
	animation: .5s linear infinite box2
}

.boxes .box:nth-child(3) {
	-webkit-transform: translate(100%, 100%);
	-ms-transform: translate(100%, 100%);
	transform: translate(100%, 100%);
	-webkit-animation: .5s linear infinite box3;
	animation: .5s linear infinite box3
}

.boxes .box:nth-child(4) {
	-webkit-transform: translate(200%, 0);
	-ms-transform: translate(200%, 0);
	transform: translate(200%, 0);
	-webkit-animation: .5s linear infinite box4;
	animation: .5s linear infinite box4
}

.boxes .box>div {
	background: #5c8df6;
	--translateZ: 15.5px;
	--rotateY: 0deg;
	--rotateX: 0deg;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--mainColor);
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	-webkit-transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
	transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ))
}

.boxes .box>div:first-child {
	top: 0;
	left: 0;
	background: var(--mainColor)
}

.boxes .box>div:nth-child(2) {
	background: #145af2;
	right: 0;
	--rotateY: 90deg
}

.boxes .box>div:nth-child(3) {
	background: #447cf5;
	--rotateX: -90deg
}

.boxes .box>div:nth-child(4) {
	background: #dbe3f4;
	top: 0;
	left: 0;
	--translateZ: -90px
}

@-webkit-keyframes box1 {

	0%,
	50% {
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0)
	}

	100% {
		-webkit-transform: translate(200%, 0);
		transform: translate(200%, 0)
	}
}

@keyframes box1 {

	0%,
	50% {
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0)
	}

	100% {
		-webkit-transform: translate(200%, 0);
		transform: translate(200%, 0)
	}
}

@-webkit-keyframes box2 {
	0% {
		-webkit-transform: translate(0, 100%);
		transform: translate(0, 100%)
	}

	50% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0)
	}

	100% {
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0)
	}
}

@keyframes box2 {
	0% {
		-webkit-transform: translate(0, 100%);
		transform: translate(0, 100%)
	}

	50% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0)
	}

	100% {
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0)
	}
}

@-webkit-keyframes box3 {

	0%,
	50% {
		-webkit-transform: translate(100%, 100%);
		transform: translate(100%, 100%)
	}

	100% {
		-webkit-transform: translate(0, 100%);
		transform: translate(0, 100%)
	}
}

@keyframes box3 {

	0%,
	50% {
		-webkit-transform: translate(100%, 100%);
		transform: translate(100%, 100%)
	}

	100% {
		-webkit-transform: translate(0, 100%);
		transform: translate(0, 100%)
	}
}

@-webkit-keyframes box4 {
	0% {
		-webkit-transform: translate(200%, 0);
		transform: translate(200%, 0)
	}

	50% {
		-webkit-transform: translate(200%, 100%);
		transform: translate(200%, 100%)
	}

	100% {
		-webkit-transform: translate(100%, 100%);
		transform: translate(100%, 100%)
	}
}

@keyframes box4 {
	0% {
		-webkit-transform: translate(200%, 0);
		transform: translate(200%, 0)
	}

	50% {
		-webkit-transform: translate(200%, 100%);
		transform: translate(200%, 100%)
	}

	100% {
		-webkit-transform: translate(100%, 100%);
		transform: translate(100%, 100%)
	}
}

.about--header {
	background-image: url(../imges/aboutBg.svg);
	background-position: center center;
	background-size: cover;
	padding: 4rem 0
}

.item--section {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end
}

.about--header .mainColor {
	font-size: 25px;
	font-weight: 400;
	line-height: 38px
}

.about--title {
	font-size: 40px;
	font-weight: 600;
	line-height: 68px
}

.about--header .about-p {
	font-size: 18px;
	font-weight: 400;
	line-height: 32px
}

.About--img1 {
	position: relative;
	overflow: hidden
}

.About--img1::before {
	position: absolute;
	top: 0;
	left: -49%;
	z-index: 2;
	display: block;
	content: '';
	width: 60%;
	height: 100%;
	background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);
	-webkit-transform: skewX(-25deg);
	-ms-transform: skewX(-25deg);
	transform: skewX(-25deg);
	overflow: hidden;
	opacity: 0
}

.About--img1:hover::before {
	-webkit-animation: 1s alternate shine;
	animation: 1s alternate shine
}

@-webkit-keyframes shine {
	100% {
		opacity: 1;
		left: 200%
	}
}

@keyframes shine {
	100% {
		opacity: 1;
		left: 200%
	}
}

@media screen and (max-width:760px) {
	.item--section {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: start
	}
}

.ss {
	right: -85%;
	top: -151%;
	z-index: 99999
}

.section2--title {
	font-size: 45px;
	font-weight: 600;
	line-height: 72px
}

.section2--p {
	font-family: Poppins;
	font-size: 20px;
	font-weight: 400;
	line-height: 40px
}

.icon {
	padding: .7rem
}

.section3--container {
	width: 91%;
	margin-left: auto
}

.se3-item2 {
	margin-left: 120px
}

.se3-item2 .row {
	-webkit-box-shadow: 0 4px 124px 0 #0000001A;
	box-shadow: 0 4px 124px 0 #0000001A
}

.sec3--h5 {
	font-size: 30px;
	font-weight: 600;
	line-height: 48px
}

.sec3-p {
	font-size: 20px;
	font-weight: 400;
	line-height: 40px
}

.icon1 {
	background-color: #fff2f2
}

.icon2 {
	background-color: #e2f3ff
}

.icon3 {
	background-color: #f1e8ff
}

.icon4 {
	background-color: #ffe7fb
}

.owl-dot.active span {
	display: inline-block !important;
	background: #6e00fa !important;
	padding: 3px 9px
}

.se4-container {
	width: 98%;
	margin-left: 55px
}

.footer--input {
	outline: 0;
	border: none
}

.footer {
	background-image: url(../imges/footer.svg)
}

.footer--tilte {
	font-size: 30px;
	font-weight: 600;
	line-height: 51px;
	text-align: center
}

.iconsohial a {
	-webkit-box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
	box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
	padding: 3px 9px;
	border-radius: 50%;
	background: #fff
}

.Copyright {
	border-top: .1px solid #dfdadaf1
}

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

	.social,
	.subscribe--foot {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal
	}

	.footer--tilte {
		font-size: 19px;
		line-height: 26px
	}

	.subscribe--foot {
		-ms-flex-direction: column;
		flex-direction: column
	}

	.subscribe--foot input {
		margin-bottom: .5rem;
		-webkit-transition: 1s;
		-o-transition: 1s;
		transition: 1s
	}

	.subscribe--foot a:hover {
		-webkit-transform: translateY(4px);
		-ms-transform: translateY(4px);
		transform: translateY(4px)
	}

	.About--foot {
		margin-top: .7rem
	}

	.social {
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start !important;
		-ms-flex-align: start !important;
		align-items: start !important
	}

	.iconsohial {
		margin: 10px 0
	}

	.footer--logo .container {
		padding: .9rem !important
	}

	.footer--input {
		text-align: center
	}
}

@media screen and (max-width:400px) {
	.toggle-menu {
		padding: 0;
		margin-bottom: 1px
	}

	.Contact--p,
	.footer--p {
		font-size: 14px
	}
}

@media screen and (max-width:700px) {
	.Company {
		-webkit-box-pack: center !important;
		-ms-flex-pack: center !important;
		justify-content: center !important
	}
}

@media (max-width:768px) {
	.section3--container .row {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 1rem 0 !important
	}

	.se3-item2 {
		margin-left: 0;
		margin-top: 2.5rem
	}

	.section3--container {
		margin: auto
	}
}

@media (max-width:576px) {

	.about--title,
	.sec3--h5,
	.section2--title {
		font-size: 20px;
		line-height: 29px
	}

	.sec3--p,
	.section2--p {
		font-size: 18px;
		font-weight: 400;
		line-height: 32px
	}

	.about--header .item--section {
		margin-bottom: 1rem
	}
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	background-color: #f5f5f5
}

::-webkit-scrollbar {
	width: 12px;
	background-color: #f5f5f5
}

::-webkit-scrollbar-thumb {
	background-color: #03a9f4;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent)
}

.link {
	transition: 0.3s ease;
}

.link:hover {
	color: var(--mainColor);
}

/*---------------------------------------------------------------------------------------------*/