/* CSS Document */

body{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
html{
	scroll-behavior:smooth;
}
@font-face{
	src: url(../font/fontscorecomttwcenmt.ttf);
	font-family: tw;
}

*{
	font-family: tw;
}
p , ul , h1,h2,h3,h4,h5,h6{
	margin: 0;
	padding: 0;
}

.banner{
	height: 100vh;
	width: 100%;
	background-image: url(../images/Path.png);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size:contain;
	position: relative;
}

.main_container{
	position: relative;
	height: 100vh;
}
.banner img.banner-image{
	width: 50%;
	height:auto;
	position: absolute;
	right: 0;
	bottom: 0;
	
}

.banner img.logo{
	height: 50px;
	margin: 40px 0 0 40px;
}

.banner img.plane{
	width: 40%;
	position: absolute;
	top: 100px;
	left: 40px;
}


.banner div.info{
	width: 50%;
	height:fit-content;
	margin:140px 0 0 40px;
}

.banner div.info h2{
	color: #A53594;
	font-weight: bold;
	font-size: 30px;
	margin-bottom: 20px;
}

.banner div.info p{
	color: rgba(156,156,156,1.00);
	margin-bottom: 20px;
	width: 70%;
}

.banner div.info button{
	border: none;
	width: 50%;
	padding: 10px 20px;
	background-color: #38A9FF;
	border-radius: 50px;
	color: #ffffff;
	font-size: 20px;
	cursor: pointer;
}



.vision{
	position: relative;
	height: auto;
	width: 100%;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.vision .title{
	color: #AC4B9E;
	font-weight: bold;
	margin-left: 6%;
	text-align: left;
	margin-bottom: 60px
	
}

.vision-block{
	
	height: max-content;
	width: 70%;
	display: inline-block;
	position: relative;
	background-color: #e1e1e1;
	padding: 30px;
	z-index: 1;
}

.vision-block::before{
	content: "";
	position: absolute;
	background-color: #AC4B9E;
	height: 100%;
	width: 100%;
	transform: rotate(1deg) translate(-50%,-50%);
	top: 50%;
	left: 50%;
	z-index: -9;
}

.vision-block::after{
	content: "";
	height: 60px;
	width: 60px;
	transform: rotate(30deg);
	background-color: #AC4B9E;
	bottom: 0;
	position: absolute;
	left: 10%;
	z-index: -1;
}

.vision-block img{
	width: 50px;
	position: absolute;
	top: -25px;
	right: 5%;
	
}
.vision-block p{
	width: 100%;
	color: #fff;
	font-size: 1em;
}

.vision .plane2{
	position: absolute;
	width: 45%;
	top: 5%;
	right: 40px;
}


.placeholderr{
	color: rgba(0,0,0,0.05);
	font-size: 200px;
	position: absolute;
	left: 10%;
	top: 0;
}


.introduction{
	height: auto;
	position: relative;
	background-color:#F4F4F4;
	padding-top: 50px;
	padding-bottom: 50px;
}


.introduction .title{
	color: #7C5AC2;
	font-weight: bold;
	position: relative;
	margin-left: 6%;
	margin-bottom: 50px;
}


.intro-con{
	background-color: #fff;
	position: relative;
	height: auto;
	padding: 20px;
	box-shadow: 0 0 10px #e8e8e8;
	transition: .5s ease;
}


.intro-con::after{
	position: absolute;
	font-size: 40px;
	font-family: tw;
	font-weight: bold;
	height: 40px;
	width: 40px;
	color: rgba(0,0,0,0.05);
	top: 0;
	left: 10px;
}

.intro-con:hover{
	background-color: #7C5AC2;
	color: #fff;
}

.one::after{
	content: "01";
}

.two::after{
	content: "02";
}

.three::after{
	content: "03";
}

.four::after{
	content: "04";
}



.demo-request{
	height: auto;
	position: relative;
	background-color:#ffffff;
	padding-bottom: 50px;
	padding-top: 50px;
}


.demo-request .title{
	color: #38A9FF;
	font-weight: bold;
	position: relative;
	margin-left: 6%;
	margin-bottom: 80px;
}

.demo-request input{
	width: 60%;
	height: 40px;
	margin-bottom: 20px;
	margin-left: 6%;
	border: none;
	background-color: #fff;
	box-shadow: 0 0 10px #e8e8e8;
	padding-left: 15px;
	outline: none;
}

.demo-request textarea{
	width: 60%;
	margin-left: 6%;
	border: none;
	background-color: #fff;
	box-shadow: 0 0 10px #e8e8e8;
	padding-left: 15px;
	padding-top: 10px;
	outline: none;
	resize: none;
	height: auto;
	margin-bottom: 20px;
}

.demo-request button{
	width: 60%;
	margin-left: 6%;
	border: none;
    height: auto;
    background-color:#38a9ff;
	padding: 5px;
	color: #fff;
	font-size: 20px;
}





input::-webkit-input-placeholder , textarea::-webkit-input-placeholder  { /* Chrome/Opera/Safari */
 color: #D4D4D4;
}
input::-moz-placeholder , textarea::-moz-placeholder { /* Firefox 19+ */
 color: #D4D4D4;
}
input:-ms-input-placeholder ,textarea:-ms-input-placeholder{ /* IE 10+ */
 color: #D4D4D4;
}
input:-moz-placeholder, textarea:-moz-placeholder{ /* Firefox 18- */
 color: #D4D4D4;
}

@media (max-width:992px){
	
	.vision .title{
		font-size: 2em;
	}
	.vision-block p{
		font-size: .9em;
		top: 35%;
	}
}

@media (max-width:860px){
	
	.vision-block {
		width: 90%;
	}
}


@media(max-width:768px){
	
	.vision .title , .introduction .title , .demo-request .title{
		font-size: 1.5em;
	}
	
	.vision{
	    height:auto;
	}
	
	.banner{
	    height:100vh;
	}
	
	.banner div.info button{
		width: 65%;
		padding: 5px 20px;
	}
	.banner div.info p{
		width: 100%;
	}
	.banner img.banner-image{
		width:95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
		display:inline-block;
	}
	
	.banner div.info h2{
		font-size: 20px;
	}
	.banner .info{
		width: 90% !important;
		margin-top:20% !important;
	}
	
	.logo{
	    margin-left:0 !important;
	    margin-right:0 !important;
		margin-top: 20px !important;
	}
	
	.banner img.plane{
		width: 90%;
	}
	
	.demo-request input, .demo-request textarea,.demo-request button{
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
	}
}



@media (max-width:660px){
	
	.banner{
		text-align: center;
	}
	
	.banner img.plane{
		display: none;
	}
	
	
	.vision-block {
		width: 80%;
	}
	
	.banner .info{
		display: inline-block;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	.vision-block p{
		font-size: .8em;
		top: 35%;
	}
	
	

	
	
	
}