*{
margin: 0px;
padding: 0px;
}
.main{
height:auto;
width:100%;
float: left;
}

.top_menu{
width: 100%;
height: 40px;
background-color: #090F35;
}

.email{
width:40% ;
height: 100%;
float: left;
padding-top: 0px;
padding-left: 30px;
font-size: 14px;

}

.email:hover{
cursor: pointer;
}
.email ul{
display: flex;
list-style-type: none;
color: white;
}
.email li{
display: flex;
}
.social_icon{
width: 40%;
height: 100%;
float: right;
}

.social_icon:hover{
cursor: pointer;
}


.social_icon ul{
display:flex;
color: white;
list-style-type: none;
padding: 10px;
padding-left: 250px;
font-size: 20px;
}

.social_icon li{
margin-left: 30px;

}

@media(max-width:667px){
.top_menu{
display: none;
}

}



/*-----*/

.bg{
height: 650px;
width: 100%;
float: left;
background-image: url(https://preview.colorlib.com/theme/itsolution/images/bg_1.jpg.webp);
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;


}
.overlay{
height: 100%;
width: 100%;
background-color: hsla(2, 2%, 2%, 0.7);
}

.nav_menu{
width: 90%;
height:80px;
position: fixed;
/*float: left;*/
top:60px;
left:0px;
right: 0px;
z-index: 987867;
margin-left: 5%;
margin-right: 5%;
background-color: rgba(255, 255, 255);
/*box-shadow: 0px 0px 2px 0px black;*/

}


.menu{
display: none;
}

.heading{
padding-top: 32px;
padding-left: 20px;
width: 10%;
float: left;
}
.heading h2{

}

.nav{
padding-top: 32px;
width: 85%;
float: left;
}
.nav ul {
list-style-type: none;
display: flex;
color: white;
font-size: 19px;
margin-left: 70px;

}

.nav ul a{
text-decoration: none;
color: black;

}

.nav ul a:hover{
cursor: pointer;
color: orange;
text-decoration:underline;

}

.nav li{
margin-left: 30px;
}

.nav button{
background-color: #323EDD;
margin-left: 120px;
color: white;
padding:15px;
font-size: 17px;
border: none;
margin-top: -10px;
font-weight: normal;

}

.nav button:hover{
cursor: pointer;
background-color: white;
color: black;
border: 1px solid black;
}

.texts{
width: 55%;
height: 500px;
}

.texts h1{
padding-top: 180px;
color: darkgrey;
font-size: 24px;
font-weight: normal;
padding-left: 100px;
}
.texts h2{
color: white;
font-size: 50px;
padding-left: 90px;
padding-top: 20px;
}

.texts button{

background-color: #323EDD;
color: white;
padding:17px;
font-size: 17px;
border: none;
font-weight: normal;
margin-left: 90px;
margin-top: 40px;

}

.texts button:hover{
cursor: pointer;
background-color: white;
color: black;
}

.bg .box{
height: 220px;
width: 50%;
background-color: white;
float:right;
position: relative;
bottom:180px;
right: 60px;
cursor: pointer;
}

.bg .box:hover{
background-color: orange;
cursor: pointer;
}

.bg .box .box1{
height: 100%;
width: 33.3%;
background-color: #415CE2;
float: left;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;



}




.box1 .i{
color: white;
font-size: 45px;
margin-top: 30px;
font-weight: normal;
margin-left: 30px;
}

.box1 h4{
color: white;
font-size: 24px;
margin-top: 10px;
font-weight: normal;
margin-left: 30px;

}


@media(max-width:667px){
.bg{
width: 100%;
height: 700px;
}

.nav_menu{
width: 90%;
height: 100px;
background-color: white;
position:fixed ;
top:0px;
}
.nav{
width: 90%;
/*		background-color: black;*/
}

.nav ul{
display: none;
}
.menu{
float: right;
margin-top: -60px;
margin-right: 20px;
color: gray;
font-size: 20px;
display: inline-block;

}

.texts{
width: 100%;
}


.texts h1 br{
text-align: center;
display: none;
width: 100%;
} 

.texts h2 br{
text-align: center;
display: none;
width: 100%;
}
.texts button br{
width: 100%;
}  
.bg .box{
margin-top: 400px;
width: 80%;
color:#2430D7;
height: auto;
position: relative;
right: 40px;


}
.bg .box .box1{
float: none;
width: 100%;
margin-top: -10px;
}
}

/*-------*/

.section2{
height: 600px;
width: 100%;
float: left;
margin-top: 40px;
}

.section2 .text{
width: 100%;
height: 190px;
float: left;

}

.section2 .text h1{
text-align: center;
margin-top: 30px;
font-size: 35px;
font-weight: bold;

}

.section2 .text p{
color: gray;
font-size: 19px;
text-align: center;
text-align-last: center;
margin-top: 15px;
}

.section2 .box2{
height: 400px;
width: 30%;
float: left;
}




.box2 .i1{
font-size: 100px;
color:black;
margin-left: 130px;
color: blue;


}
.box2 h4{
font-size: 32px;
font-weight: normal;
text-align: center;
}
.box2 p{
text-align: center;
text-align-last: center;
color: gray;
font-size: 22px;
font-weight: normal;
}

.image{
width: 40%;
height: 100%;
float: left;
}
.image img{
width: 530px;
height: 350px;
}

@media(max-width:667px){
.section2{
margin-top: 600px;
width: 100%;
} 

.section2 .text{
width: 100%;
}
.section2 .text h1{
text-align: center;
}
.section2 .text p{
text-align: center;
}

.section2 .box2{
width: 100%;
margin-top: 20px;
}

.section2 .box2 .i1{
margin-left: 210px;
}

.image{
width: 100%;
}

}

/*------*/
.section3{
width: 90%;
height: 480px;
float: left;
background-color:blue ;
margin-left: 5%;
margin-right: 5%;

}

.image2{
width: 50%;
height: 100%;
float: left;
}
.image2 img{
width: 100%;
height: 100%;
}

.section3 .content{
width: 50%;
height: 100%;
float: left;
}
.section3 .content h1{
font-size: 42px;
color: white;
margin-left: 50px;
margin-top: 80px;
}

.section3 .content p{
font-size: 21px;
color: gray;
margin-left: 50px;
margin-top: 20px;
}

.first_box{
height: 200px;
width: 50%;
float: left;
margin-top: 25px;
color: white;
text-align: center;
font-size: 25px;

}

@media(max-width:667px){
.section3{
width: 90%;
height: auto;
margin-top: 1000px;
}
.image2{
width: 100%;
/*		float: none;*/
}

.section3 .content {
width: 100%;
text-align: center;
}

.section3 .content h1{
text-align: center;
font-size: 40px;
}

.section3 .content p br{
text-align: center;
display: none;
}

.first_box{
float: none;
width: 100%;
}
}

/*----*/
.section4{
width: 100%;
height: 400px;
float: left;
margin-top: 70px;
}

.section4 .txt{
font-size: 20px;
text-align: center;
font-weight: bold;


}

.boxes{
width: 90%;
height: 270px;
background-color: white;
float: left;
margin-top: 20px;
margin-left: 5%;
margin-right: 5%;
}

.boxes .box3{

height: 100%;
width: 25%;
background-color: #415CE2;
float: left;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
color: white;


}

.boxes .box3:hover{
background-color: #ffa41b;
cursor: pointer;
}

.section4 .i2{
font-size: 70px;
margin-left: 100px;
margin-top: 10px;
font-weight: normal;
}
.section4 h1{
margin-left: 10px;
font-weight: normal;
}
.box3 h1{
margin-left: 50px;
}

.section4 p{
margin-left: 5px;
text-align: center;
font-size: 18px;
font-weight: normal;
}

@media(max-width:667px){
.boxes{
width: 90%;
}

.boxes .box3{
width: 80%;
float: none;
margin-top: 20px;
}
}

/*----*/
.section5{
width: 100%;
height: 600px;
float: left;
margin-top: 50px;
}

.section5 .boxes{
width: 94%;
height: 400px;
float: left;
margin-left: 3%;
margin-right: 3%;
margin-top: 50px;

}
.box4{
width: 21%;
height: 100%;
float: left;
margin-left: 2%;
margin-right: 2%;
}
.box4 img{
height: 280px;
width: 100%;
}

@media(max-width:667px){
.section5{
width: 100%;
margin-top: 1000px;
}

.section5 .boxes{
width: 100%;
}
.box4 img{
width: 100%;
}

.box4{
float: none;
margin-left: 10%;
margin-right: 5%;
width: 70%;
margin-top: 10px;
}
}


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

.section6{
width: 90%;
height: 600px;
float: left;
margin-left: 5%;
margin-right:5% ;
}

.section6 .box_1{
width: 50%;
height: 100%;
float: left;
}

.section6 .box_1 h1{
font-size: 35px;
margin-left: 60px;

}
.div{
height: 20px;
width: 480px;
padding: 17px;
border: none;
border-radius: 30px;
color: white;
font-size: 20px;
margin-left: 30px;
margin-top: 10px;
background-color: #2430D7;

}


.box_1 .div1{
background-color: #FFA41B;
height: 210px;
width: 470px;
padding: 15px;
border: none;
border-radius: 30px;
color: white;
font-size: 20px;
margin-left: 20px;
margin-top: 10px;
padding-left: 50px;

}



.section6 .box_2{
width: 50%;
height: 70%;
float: left;
}

.box_2 img{
height: 90%;
width: 100%;
}

.box_2 .img{
height: 50%;
width: 96%;
float: left;
margin-top: 10px;

}

.box_2 .img img{
width: 46%;
height: 100%;
float: left;
margin-right: 2%;
margin-left: 2%;

}

@media(max-width:667px){
.section6{
width: 90%;
height: auto;
margin-top: 1200px;
}

.section6 .box_1{
width: 100%;
}




.section6 .box_1 h1 br{
text-align: justify;
display: none;
}




.div{
width: 350px;
margin-top: 50px;
height: auto;
}



.box_1 .div1{
width: 330px;
height: auto;
}



.section6 .box_2{
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 40px;
}


.box_2 img{
width: 100%;
}

.box_2 .img{
width: 100%;
}
.box_2 .img img{
width: 100%;
margin-top: 20px;
}

.icon{
display:none;
}


}


/*----*/
.section7{
width: 100%;
height: 500px;
float: left;
margin-top: 60px;

}

.bg2{
width: 100%;
height: 100%;
background-image: url(https://preview.colorlib.com/theme/itsolution/images/bg_1.jpg.webp);
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;


}

.section7 h1{
color: white;
text-align: center;
font-size: 44px;
padding-top: 50px;
font-weight: bold;
}

.row{
/*margin-left: 2%;
margin-right: 2%;*/
width: 100%;
height: 300px;
float: left;
position: relative;
top:100px;

}

.column{
width: 31%;
height: 100%;
background-image: url(https://preview.colorlib.com/theme/itsolution/images/testimony-4.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
margin-left: 1%;
margin-right: 1%;
float: left;

}





.column2{
width: 31%;
height: 100%;
background-image: url(https://preview.colorlib.com/theme/itsolution/images/testimony-3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
margin-left: 1%;
margin-right: 1%;
float: left;
}
.column1{
width: 31%;
height: 100%;
background-image: url(https://preview.colorlib.com/theme/itsolution/images/testimony-5.jpg.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
margin-left: 1%;
margin-right: 1%;
float: left;
}

.overlay_img{
height: 100%;
width: 100%;
}


.overlay_img1{
height: 100%;
width: 100%;
background-color: rgba(40, 40, 40, 0.5);
}


.content1{
width: 50%;
height: 93%;
background-color: rgba(80, 80, 80, 0.7);
text-align: left;
padding-top: 20px;
padding-left: 10px;
font-size: 19px;
color: white;
line-height: 2;

}

.icon3{
float:right;
margin-top: -50px;
margin-right: 30px;
color: gray;
font-size: 2px;
}

@media(max-width:667px){
.section7{
width: 100%;
height: auto;
}
.bg2{
height: 1300px;
}
.row{
float: none;
width: 100%;
}

.overlay_img1{
height: auto;
}

.overlay_img{
height: auto;
}

.column{
width: 80%;
margin-left: 10%;
margin-right:10%: ;
float:none;
margin-top: 50px;
}

.column1{
width: 80%;
margin-left: 10%;
margin-right:10%: ;
float:none;
margin-top: 20px;

}
.column2{
width: 80%;
margin-left: 10%;
margin-right:10%: ;
float:none;
margin-top: 20px;

}
.icon3{
margin-top: 30px;
}
}


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


.section8{
width: 100%;
height: 500px;
float: left;
margin-top: 50px;
}
.section8 h1{
text-align: center;
margin-top: 20px;
color: black;
font-size: 35px;
}
.row2{
height: 300px;
width: 95%;
margin-left: 3%;
margin-right: 2%;
float: left;
margin-top: 20px;
}

.row2 .column_1{
height: 100%;
width: 30%;
float: left;
margin-left: 1%;
margin-right: 2%;
}

.column_1 img{
width: 100%;
height: 100%;
}

.date{
width: 150px;
height: 70px;
background-color: white;
position: relative;
top:-60px;
left:10px;
z-index: 98786;
border-radius: 20px;
text-align: center;

}

.date h1{
color: purple;
font-size: 22px;
font-weight: normal;
padding-top: 10px;

}

.date span{
color: blue;
font-size: 20px;
font-weight: normal;
}

.column_1 h1{
font-size: 22px;
text-align: center;
margin-top: -22px;
}

@media(max-width:667px){
.section8{
width: 100%;
height: auto;

}

.row2 .column_1{
width: 100%;
float: none;
margin-top: 100px;
}

}

/*-----*/

.section9{
width: 100%;
height: 600px;
float: left;
margin-top: 40px;
}
.bg3{
height: 100%;
width: 100%;
background-image: url(https://preview.colorlib.com/theme/itsolution/images/bg_2.jpg.webp);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
.overlay2{
width: 100%;
height: 100%;
background-color: rgba(90, 90, 90, 0.4);
}
.bg3 h1{
color: white;
padding-top: 100px;
margin-left: 80px;
font-size: 40px;
}

.section9 form{
margin-left: 60px;
}

.section9 form input{
width: 250px;
height: 60px;
border: none;
background-color: white;
border-radius: 10px;
font-size: 16px;
padding-left: 10px;
color: black;
font-weight: bold;
}

.section9 form select{
width: 550px;
height: 50px;
border: none;
background-color: white;
border-radius: 10px;
font-size: 16px;
padding-left: 10px;
color: gray;
font-weight: bold;
margin-top: 10px;
}

.section9 form textarea{
width: 550px;
height: 150px;
border: none;
background-color: white;
border-radius: 10px;
font-size: 19px;
padding-left: 10px;
color: black;
font-weight: bold;
margin-top: 10px;

}

.section9 form button{
width: 550px;
height: 50px;
color: white;
font-size: 16px;
text-align: center;
background-color: #323edd;
border: none;
border-radius: 5px;
font-weight: normal;
}

@media(max-width:667px){

.section9{
width: 100%;
height: 900px;
margin-top: 1000px;
}
.bg3{
width: 100%;
height: 100%;

}

.bg3 h1{
text-align: center;
}

.section9 form {
margin-left: 0px;

}


.section9 form input{
width: 90%;
margin-left: 5%;
margin-right: 5%;
float: none;
margin-top: 20px;

}


.section9 form select{
width: 90%;
margin-left: 5%;
margin-right: 5%;
float: none;
margin-top: 20px;


}

.section9 form textarea{
width: 90%;
margin-left: 5%;
margin-right: 5%;
float: none;
margin-top: 20px;


}


.section9 form button{
width: 90%;
margin-left: 5%;
margin-right: 5%;
float: none;
margin-top: 20px;


}
}


/*-----*/

.footer{
height: 640px;
width: 100%;
float: left;
background-color: black;


}

.boxes_footer{
width: 96%;
height: 100%;
margin-left: 2%;
margin-right: 2%;
float: left;

}

.vertical1{
height: 100%;
width: 30%;
float: left;

}

.heading1 h2{
padding-top: 130px;
font-size: 25px;
margin-left:10px ;
}

.heading1 p{
padding-top: 20px;
font-size: 20px;
color: gray;
line-height: 1.2;
margin-left:10px ;


}
.icon_1{
width: 200px;
height: 300px;
margin-top: 20px;

}



.icon_1 .social{
background-color: #12162A;
padding: 12px;
border-radius: 50%;
margin-left: 20px;
color: white;
font-size: 20px;

}

.icon_1 .social:hover{
pointer:cursor;


}




.vertical2{
height: 100%;
width: 20%;
float: left;
}

.vertical2 ul{
list-style-type: none;
display: inline-block;
margin-top: 10px;
}
.vertical2 li{
margin-top: 20px;
color: gray;
font-size: 20px;
font-weight: normal;

}

.vertical3{
height: 100%;
width: 20%;
float: left;
}

.vertical3 ul{
list-style-type: none;
display: inline-block;
margin-top: 10px;
}
.vertical3 li{
margin-top: 20px;
color: gray;
font-size: 20px;
font-weight: normal;

}

.vertical4{
height: 100%;
width: 30%;
float: left;
}

.vertical4 .info .icon{
height: 100%;
width: 10%;
margin-top: 50px;
color: white;
display: inline-block;
text-align: center;
margin-left: 20px;
font-size: 20px;

}

.info .content{
height: 100%;
width: 20px;
float: left;
}

.copyright{
font-size: 20px;
color: gray;
text-align: center;
position: relative;
bottom: 150px;
}

@media(max-width:667px){

.footer{
width: 100%;
height: auto;
}

.boxes_footer{
float:none;
}

.vertical1{
float: none;
float: none;
width: 100%;
margin-top: -20px;
}

.vertical2{
float: none;
float: none;
width: 100%;
margin-top: -20px;

}

.vertical3{
float: none;
width: 40%;
margin-top: -20px;

}

.vertical4{
float: none;
width: 40%;
margin-top: -20px;

}

.copyright{
margin-top: 200px;
width: 100%;
text-align: center;
}
.call{
padding-top: 80px;
}

.heading1 h2{
/*text-align: center;*/
margin-left: 0px;
width: 80%;
}


}


/*-----*/



.about_bg{
height: 600px;
width: 100%;
float: left;
background-image: url('https://preview.colorlib.com/theme/itsolution/images/bg_3.jpg');
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;


}

.overlay_about{
height: 100%;
width: 100%;
background-color: rgba(0, 0, 200, 0.5);

}

@media(max-width:667px){
.about_bg{
width: 100%;
height: 700px;
background-position: left center;
}

}

.about{
	text-align: center;
	color: white;
	padding-top: 320px;
	font-size: 30px;
	font-weight: bold;
}

.about a h3:hover{
	color:orange;
	text-decoration: underline;

}


/*Contact*/

.section1_contact{
	height: 300px;
	width: 96%;
	float: left;
	margin-top: 40px;
	margin-left: 2%;
	margin-right: 2%;
    background-color: #2430d7;

}
.contact_icon{
	width: 25%;
	height: 100%;
	float: left;
	background-color: #F8F9FA;
}
/*.contact_icon{
	background-color: blue;
	font-size: 20px;
	color: white;
}

*/

.contact_i{
	background-color: #2430d7;
	color: white;
	height: 30px;
	width: 30px;
	padding: 30px;
	border-radius: 50%;
	position: relative;
	top:70px;
	left:90px;
}

@media(max-width:667px)
{
	.section1_contact{
		width: 100%;
		height: auto;

	}

	.contact_icon{
		float: none;
		width: 100%;
	}

	.contact_i{

	position: relative;
	top:70px;
	left:160px;

	}
}


/*----*/

.section2_contact{
	width: 90%;
	height: 500px;
	float: left;
/*	background-color: red;*/
	margin-left: 5%;
	margin-right: 5%;
}

.contact_box{
	width: 40%;
	height: 100%;
	background-color: yellow;
	float: left;
}

.contact_form{
	width: 60%;
	height: 100%;
	float: left;
	background-color: white;
}

.contact_form form{
margin-left: 50px;
padding-top: 20px;
}

.contact_form form input{
width: 160px;
height: 40px;
border: 1px solid lightgrey;
background-color: transparent;
font-size: 16px;
padding-left: 5px;
color: gray;
font-weight: normal;
border-radius: 10px;

}



.contact_form form textarea{
width: 400px;
height: 150px;
border: 1px solid lightgrey;
background-color: white;
border-radius: 10px;
font-size: 19px;
padding-left: 20px;
color: black;
font-weight: normal;
/*margin-top: 10px;*/


}

.contact_form form button{
width: 200px;
height: 50px;
color: white;
font-size: 16px;
text-align: center;
background-color: #323edd;
border: none;
border-radius: 5px;
font-weight: normal;
}
.contact_form form label{
	font-size: 21px;
	font-weight: normal;
	color: blue;
}

@media(max-width:667px){

	.section2_contact{
		width: 100%;
		margin-top: 300px;
		margin-bottom: 600px;
	}
	.contact_form form{
		width: 100%;
		float: none;
	}
	.contact_box{
		float: none;
		width: 80%;
		margin-left: 5%;
		margin-right: 5%;
	}

	.contact_box form input{
		margin-left: 0px;
		margin-top: 20px;
	}

}



/*----blog*/

.next{
	width: 100%;
	height: 100px;
	float: left;
	cursor: pointer;
}
.next ul{
	list-style-type: none;
	display: flex;
	text-align: center;
	margin-top: 40px;
	margin-left: 35%;
	margin-right: 20%;
	cursor: pointer;
}

.next li{
	margin-left: 10px;
	padding: 12px;
	border-radius: 50%;
	background-color: white;
	border:1px solid lightgrey ;
	width: 15px;
	height: 15px;
	cursor: pointer;
	color: orange;
}

@media(max-width:667px){

	
	.next{
		margin-bottom: 300px;
		margin-top: 500px;

	}
}