.animated-w {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;  
  -webkit-animation-iteration-count:infinite;  
  animation-iteration-count:infinite;
  -webkit-animation-delay:0.2s;  
  animation-delay:0.2s;  
}
@-webkit-keyframes fadeInOutDown-1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@keyframes fadeInOutDown-1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
	-ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(0);
	-ms-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(40px);
	-ms-transform: translateY(40px);
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(40px);
	-ms-transform: translateY(40px);
    transform: translateY(40px);
  }
}
.fadeInOutDown-1 {
  -webkit-animation-name: fadeInOutDown-1;
  animation-name: fadeInOutDown-1;
}
@-webkit-keyframes fadeInOutDown-2 {
	0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@keyframes fadeInOutDown-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0);
	-ms-transform: translateY(0);
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0);
	-ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(40px);
	-ms-transform: translateY(40px);
    transform: translateY(40px);
  }
}


.fadeInOutDown-2 {
  -webkit-animation-name: fadeInOutDown-2;
  animation-name: fadeInOutDown-2;
}

/***********************************************/
.banner-content p {
	color: #888;
	font-size: 18px;
	line-height: 1.8;
	padding-top: 20px;
	width: 80%;
	position: relative;
	z-index: 2;
}
.banner-content p .GPT {
	font-size: 24px;
	font-weight: bold;
}

/* button style */
.banner-content .butn-3{
	border-radius: 34px;
	font-size: 24px;
	letter-spacing: 0;
	line-height: 68px;
	text-align: center;
	text-transform: unset;
	touch-action: manipulation;
	vertical-align: middle;
	white-space: nowrap;
	position: relative;
	z-index: 2;
	text-transform: capitalize;
	overflow: hidden;
	height: 68px;
	width: 234px;
	clear: both;
	margin-top: 60px;
	margin-right: 10%;
	background: linear-gradient(45deg,#0064a3,#0064a3,#1e83ff,#03a79a,#03a79a);
	background-size: 240% 240%;
}
.banner-content .butn-3 img {
	transition: all 0.8s ease 0s;
}
.banner-content .butn-3:hover img {
	transform: rotateX(360deg);
}
.OurSoftware {
	margin-top: 20px;
	text-align: center;
	justify-content: center;
	margin-bottom: 118px;
	/* [disabled]background: #F00; */
}
.OurSoftware h1 {
	font-size: 44px;
	color: #007ad0;
	line-height: 120px;
	text-transform: capitalize;
}
.OurSoftware .module {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: center;*/
	justify-content: space-between;	
	text-align: center;	
	max-width: 1060px;

}
.OurSoftware .module a {
	color: #333;
	width: 300px;
	
	margin-bottom: 30px;
	background: #FFF;
	border-radius: 10px;
	overflow:visible;
}
.OurSoftware .module a:hover {
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.OurSoftware .module a img {
	transition: all 0.5s ease 0s;
	margin-top: 48px;
}
.OurSoftware .module a:hover img {
	transform: scale(1.1) translate(0, -4%);
	/* [disabled]margin-top:-16px;
*/
}
.OurSoftware .module a:hover p{
	/* [disabled]display: flex; */
	flex-direction: column;
	/* [disabled]margin-top: 5px; */
	color: #333;
	/* [disabled]font-weight: bolder; */
}
.OurSoftware .module a h1 {
	font-size: 24px;
	font-weight: normal;
	color: #333;
	transition: all 0.5s ease 0s;
	line-height: 32px;
	margin-bottom: 6px;
	margin-top: 20px;
}
.OurSoftware .module a:hover h1 {
	color: #1a99e9;
}


@-webkit-keyframes fadeInOutLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-80px);
    transform: translateX(-80px);
  }

  20%,70% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
	  opacity: 0;
    -webkit-transform: translateX(80px);
    transform: translateX(80px);    
  }
}

@keyframes fadeInOutLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    transform: translateX(-80px);
  }

  20%,70% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(80px);
    -ms-transform: translateX(80px);
    transform: translateX(80px);
  }
}

.banner .fadeInOutLeft {
  -webkit-animation-name: fadeInOutLeft;
  animation-name: fadeInOutLeft;  
}


.icon_mathedit {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	z-index: 9000;
	overflow: visible;
}

.tooltip_mathedit {
	visibility: hidden;
	width: 320px;
	background-color: #00a2ff;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 9000;
	top: 150%; /* Position below the icon */
	left: 30%;
	margin-left: -136px; /* Center the tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	overflow: visible;
	font-size: 16px;
}

	.tooltip_mathedit::after {
		content: "";
		position: absolute;
		bottom: 100%; /* At the top of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #00a2ff transparent;
		z-index: 9000;
		overflow: visible;
	}

.icon_mathedit:hover .tooltip_mathedit {
	overflow: visible;
	visibility: visible;
	opacity: 1;
	z-index: 9000;
}

.icon_mathqai {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	z-index: 9000;
	overflow: visible;
}

.tooltip_mathqai {
	visibility: hidden;
	width: 320px;
	background-color: #16a180;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 9000;
	top: 150%; /* Position below the icon */
	left: 30%;
	margin-left: -136px; /* Center the tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	overflow: visible;
	font-size: 16px;
}

	.tooltip_mathqai::after {
		content: "";
		position: absolute;
		bottom: 100%; /* At the top of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #16a180 transparent;
		z-index: 9000;
		overflow: visible;
	}

.icon_mathqai:hover .tooltip_mathqai {
	overflow: visible;
	visibility: visible;
	opacity: 1;
	z-index: 9000;
}


.icon_aioffice {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	z-index: 9000;
	overflow: visible;
}

.tooltip_aioffice {
	visibility: hidden;
	width: 320px;
	background-color: #01d8e0;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 9000;
	top: 150%; /* Position below the icon */
	left: 30%;
	margin-left: -136px; /* Center the tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	overflow: visible;
	font-size: 16px;
}

	.tooltip_aioffice::after {
		content: "";
		position: absolute;
		bottom: 100%; /* At the top of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #01d8e0 transparent;
		z-index: 9000;
		overflow: visible;
	}

.icon_aioffice:hover .tooltip_aioffice {
	overflow: visible;
	visibility: visible;
	opacity: 1;
	z-index: 9000;
}


.icon_graphedit {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	z-index: 1;
	overflow: visible;
}

.tooltip_graphedit {
	visibility: hidden;
	width: 320px;
	background-color: #99d603;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	top: 150%; /* Position below the icon */
	left: 30%;
	margin-left: -136px; /* Center the tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	overflow: visible;
	font-size: 16px;
}

	.tooltip_graphedit::after {
		content: "";
		position: absolute;
		bottom: 100%; /* At the top of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #99d603 transparent;
		z-index: 1;
		overflow: visible;
	}

.icon_graphedit:hover .tooltip_graphedit {
	overflow: visible;
	visibility: visible;
	opacity: 1;
	z-index: 1;
}


.icon_pcclient {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	z-index: 1;
	overflow: visible;
}

.tooltip_pcclient {
	visibility: hidden;
	width: 320px;
	background-color: #0071ce;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	top: 150%; /* Position below the icon */
	left: 30%;
	margin-left: -136px; /* Center the tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	overflow: visible;
	font-size: 16px;
}

	.tooltip_pcclient::after {
		content: "";
		position: absolute;
		bottom: 100%; /* At the top of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #0071ce transparent;
		z-index: 1;
		overflow: visible;
	}

.icon_pcclient:hover .tooltip_pcclient {
	overflow: visible;
	visibility: visible;
	opacity: 1;
	z-index: 1;
}


.icon_maxima {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	z-index: 1;
	overflow: visible;
	
}

.tooltip_maxima {
	visibility: hidden;
	width: 320px;
	background-color: #59c2ff;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	top: 150%; /* Position below the icon */
	left: 30%;
	margin-left: -136px; /* Center the tooltip */
	opacity: 0;
	transition: opacity 0.3s;
	overflow: visible;
	font-size: 16px;
}

	.tooltip_maxima::after {
		content: "";
		position: absolute;
		bottom: 100%; /* At the top of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #59c2ff transparent;
		z-index: 1;
		overflow: visible;
	}

.icon_maxima:hover .tooltip_maxima {
	overflow: visible;
	visibility: visible;
	opacity: 1;
	z-index: 1;
}