:root {
	--scrollbar-width: calc(100vw - 100%);
}
.header_container
{
	width: 100vw;
	height: 80vh;	
	background-image: url("../images/home_page/279618.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;  
}
.header_container h1
{
	display: block;
	max-width: 80vw;
	background-color: #6daeff;
	text-align: center;
	color: white;
	font-size: 2em;
	display: flex;
	justify-content: center;
	align-items: center; 
	padding: 0.5em;

}
#slideshow-section{
    position: relative;
    width: 100vw;
    margin-top: -4em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	display: block;
    
}
#slideshow-dotes{
	width: 80vw;
	height: 50px;
    margin: -50px auto ;
}
#slideshow-dotes > button {
	display: inline-block;
	width: 15px;
    height: 15px;
    cursor: pointer;
}
.doteBtn{
	background: rgb(209, 209, 209);
}
.doteBtn-on{
	background: rgb(84, 172, 255);
}
#slideshow-ul{
	width: 80vw;
    margin: 0px auto;
	text-decoration: none;
	list-style-type: none;
	
}
#slideshow-ul li > div{
	/*li-container*/
	display: flex;
    padding-top:1em 1em 0em 1em;
}
#slideshow-ul li > div div {
	/*left container children*/
	position: relative;
	margin: auto;
	width: 40vw;
}
.slideshow-header-text-display{

    font-size: 3em;
  	margin: 1em 0em 0em 0em;
	width: 40vw;
}
.slideshow-paragraph-text-display{
    font-size: 1.2em;
	margin: 1em 0em 1em 0em;
	width: 40vw;
}
.slideshow-btn-learn-more-display{
    background-color:#3498db;
    color: white;
    padding: 1em 2em;
    text-align: center;
    font-size: 1.2em;
    cursor: pointer;
	max-width: 300px;
}
#it-career-header{
	color: #ff4d00;
	font-family:CenturyGothicRegular;
}
#it-career-paragraph{
	color: #333333;
	font-family:CenturyGothicRegular;
}
#software-solutions-header{
	color: #333333;
	font-family:CenturyGothicRegular;
}
#software-solutions-paragraph{
	color: #333333;
	font-family:CenturyGothicRegular;
}
#game-article-header{
	color: #3498db;
	font-family:CenturyGothicRegular;
}
#game-article-paragraph{
	font-family:CenturyGothicRegular;
}
.slideshow_img{
	height: auto;
	width: 40vw;
}
#content
{
	color: #333333;
	min-height: 70vh;
    text-align: justify;
}
#aboutUsFlexContainer{
	padding-top: 10em;
}

.about_us_header_text
{
	font-size: 3em;
	font-weight: bold;
	font-family:CenturyGothicRegular;
}
.about-us-paragraph{
	font-family:CenturyGothicRegular;
}

#about_us_img{
	width: 100%;
	height: auto;
}
#why_to_choose_us_header{
	margin-top: 2em;
	font-family:CenturyGothicRegular;
	font-size: 1.2em;
	color: black;
}
#why_to_choose_us_list{
	margin-top: 2em;
	margin-left: 1em;
	font-family:CenturyGothicRegular;
	font-size: 1.3;
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	list-style-image: url("/source/imgs/check_blue.png");
}
#why_to_choose_us_list > li{
	padding: .5em;
}
.blue_text
{
	font-family:CenturyGothicRegular;
	color:#475680;	
}
.centuryGothic{
	font-family:CenturyGothicRegular;
}
.whatWeDoContainer
{
	width: 100vw;
}


#whatWeDoHolder{
	width: 90vw;
	margin: 0px auto;
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content:center;	
	flex-wrap: wrap;

}
#whatWeDoHolder  div{
	position: relative;
	font-size: 1em;	
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 1em;
	padding: 1em;
	font-family: "Rubik",Sans-serif;
	height: 400px;
	width: 300px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#whatWeDoHolder > div > h2{
	width: 100%;
	text-align: center;
	color: #333333;
	white-space: pre;
}
#whatWeDoHolder > div > img{

	width: 80px;
	height: auto;
	margin: 2em auto 2em auto;
}
#whatWeDoHolder > div > p{
	width: 100%;
	font-size: 1em;
	text-align: center;
	color: #333333;
}
#whatWeDoHolder > div > button{
	position: absolute;
	bottom: 2em;
	right: 2em;
	padding: 1em;

	border: 2px solid #6daeff;
}

.education_article
{
	width: 80vw;
	margin: 0px auto;
	text-align: justify;
	font-family:CenturyGothicRegular;
}
.education_article h2{

	width: inherit;
	text-align: center;
	font-weight: bold;
	margin: 2em auto;
}
.education_flexbox{
	width: inherit;
	display: flex;
}
.education_flexbox div{
	flex: 1;
}

.education_article  img{
	max-width: 35vw;
	height: auto;
}


.industries_container
{
	position: relative;
	width: 100vw;
	height: 400px;
	background-color: #efefef;
	background-image: url("/source/imgs/industries-background.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	

}

.industries_container > #industries-header{

	font-family:CenturyGothicRegular;
	top: 1em;
	display: block;
	text-align: center;
	color: #333333;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 1em;

}

swiper-container{
	width: 80vw;
	margin: 20px;
}

swiper-slide {
	font-family:CenturyGothicRegular;
	height: 250px;
	font-size: 1em;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	border: 1px solid #0668b8;
  }

  swiper-slide p{

	background-color: #333;
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	width: 99%;
	height: 70px;
	margin: auto auto 0px auto;
	text-align: center;
	line-height: 70px;
	color: white;
	font-weight: bold;
  }
  swiper-slide div{
	width: 90%;
	height: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  swiper-slide div img {
	height: 60%;
  }

  .your_advantage_container
  {
	  font-family:CenturyGothicRegular;
	  width: 100vw;
	  display: -webkit-flex; /* Safari */
	  display: flex;
	  justify-content:center;
	  align-items: center;
  }
  .your_advantage_container div{
	width: 40vw;

	margin: 2em;

}  
  .your_advantage_container .contact_form_header
  {
	  display: block;
	  width: 100%;
	  height: 3em;
	  font-size: 2em;
	  line-height: 3em;
	  text-align: center;	
	  color: white;
	  background-color:#6daeff;
	  border-radius: 20px 20px 0px 0px;
  
  }
  
  .your_advantage_container form
  {
	  display: block;
	  width: 100%;
	  background-color: #f2f2f2;
	  border-radius: 0px 0px 20px 20px;
	  overflow: auto;
  }
  .your_advantage_container label
  {
	  display: block;	
	  width: 90%;
	  height: 1.5em;
	   margin: 1em auto 0px auto;
	  font-size: 1em;
	  line-height: 1em;
	  color: red;
	  font-weight: bold;
  }
  .your_advantage_container input
  {
	  display: block;	
	  width: 90%;
	  height: 3em;
	  margin: 0em auto;	
  }
  
  .your_advantage_container textarea
  {
	  display: block;
	  width: 90%;
	  height: 10em;
	  margin: 0em auto;
	  resize: none;
  }
  .your_advantage_container button
  {
	  display: block;
	  width: 50%;
	  height: 3em;
	  margin: 2em auto;
	  background-color: #6daeff;
  }
  .your_advantage_container .advantage_div_holder
  {
	  margin-right: 2em;
  
  }
  .your_advantage_container .advantage_div_holder h2
  {	
	  font-weight: bold; 
	  font-size: 2em;
	  margin: 2em auto 2em 1em; 
	  color:#6daeff;
	  text-align: left;
  }
  .your_advantage_container .advantage_div_holder ul {
	  color: darkblue;
	  list-style: none;
	  text-align: left;
  }
  .your_advantage_container .advantage_div_holder ul li{
	  margin-left: 1em;
	  margin-bottom: 2em;
  
  }
  .your_advantage_container .advantage_div_holder ul li img{
	  width: 2em;
	  height: 2em;
	  float: left;
	  margin-right: 1em;
  }


.this_is_how_container p {
	width: 50vw;
	margin: 0px auto 5em auto;
}
.contact_form_container
{
	display: block;
}
.contact_form_container form
{
	position: relative;
}

@media only screen and (max-width: 799px) 
{
	#slideshow-section{
		display: none;
	}
	#aboutUsFlexContainer{
		padding-top: 1em;
	}
	#about_us_img_holder{
		display: flex;
		justify-content: center;
	}
	#about_us_img{
		width: 50%;
		height: auto;
		margin: 0px auto;
	}

	.education_article
	{
		width: 90vw;
		margin: 0px auto;
		text-align: justify;
	}
	.education_article h2{
	
		width: inherit;
		text-align: center;
		font-weight: bold;
		margin: 2em auto;
	}
	.education_flexbox{
		width: inherit;
		display: block;
	}
	.education_flexbox div{
		display: block;
		margin: 1em;
		padding: 1em;
	}
	
	.education_flexbox div img{
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}
	
	.your_advantage_container
	{
		font-family:CenturyGothicRegular;
		width: 90vw;
		margin: 0px auto;
		display: block;
	
	}
	.your_advantage_container div{
	  width: inherit;
	  margin: 0px auto;
 
  }  
	.your_advantage_container .contact_form_header
	{
		display: block;
		width: 100%;
		height: 3em;
		font-size: 2em;
		line-height: 3em;
		text-align: center;	
		color: white;
		background-color:#6daeff;
		border-radius: 20px 20px 0px 0px;
	
	}
	
	.your_advantage_container form
	{
		display: block;
		width: 100%;
		background-color: #f2f2f2;
		border-radius: 0px 0px 20px 20px;
		overflow: auto;
	}
	.your_advantage_container label
	{
		display: block;	
		width: 90%;
		height: 1.5em;
		 margin: 1em auto 0px auto;
		font-size: 1em;
		line-height: 1em;
		color: red;
		font-weight: bold;
	}
	.your_advantage_container input
	{
		display: block;	
		width: 90%;
		height: 3em;
		margin: 0em auto;	
	}
	
	.your_advantage_container textarea
	{
		display: block;
		width: 90%;
		height: 10em;
		margin: 0em auto;
		resize: none;
	}
	.your_advantage_container button
	{
		display: block;
		width: 50%;
		height: 3em;
		margin: 2em auto;
		background-color: #6daeff;
	}
	.your_advantage_container .advantage_div_holder
	{
		margin-right: 2em;
	
	}
	.your_advantage_container .advantage_div_holder h2
	{	
		font-weight: bold; 
		font-size: 2em;
		margin: 2em auto 2em 1em; 
		color:#6daeff;
		text-align: left;
	}
	.your_advantage_container .advantage_div_holder ul {
		color: darkblue;
		list-style: none;
		text-align: left;
	}
	.your_advantage_container .advantage_div_holder ul li{
		margin-left: 1em;
		margin-bottom: 2em;
	
	}
	.your_advantage_container .advantage_div_holder ul li img{
		width: 2em;
		height: 2em;
		float: left;
		margin-right: 1em;
	}
}

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

	#whatWeDoHolder{
		width: 90vw;
	}

	#slideshow-section{
		padding-top: 5em;
	}

}