/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'footer';

body {
	font-family: $font1;
	overflow-x: hidden;
	opacity: 0;
	-webkit-animation: showUp .5s linear;
	        animation: showUp .5s linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
	}
	
#hero {
	background-image: url("../graphics/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: $blue - 30;
	background-blend-mode: multiply;
	#top-call {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 9rem 0;
		color: #fff;
		text-align: center;
		h1 {
			font-size: 58px;
			font-family: $font2;
			margin: 10px 0;
			font-weight: 700;
			opacity: 0;
			-webkit-animation: showUp .5s .75s linear;
			        animation: showUp .5s .75s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			}
		p {
			font-size: 22px;
			letter-spacing: 1px;
			max-width: 71ch;
			line-height: 1.3;
			margin: 10px 0;
			opacity: 0;
			-webkit-animation: showUp 1.25s 1.25s linear;
			        animation: showUp 1.25s 1.25s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			}
		a#srchBtn {
			text-decoration: none;
			color: $blue - 50;
			background: #fff;
			padding: 15px 50px;
			font-size: 18px;
			margin: 15px 0;
			font-family: $font2;
			font-weight: 700;
			opacity: 0;
			-webkit-animation: showUp 1.25s 2s linear;
			        animation: showUp 1.25s 2s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			-webkit-transition: .2s all ease-in-out;
			-o-transition: .2s all ease-in-out;
			transition: .2s all ease-in-out;
			&:hover {
				background: $red;
				color: #fff;
				-webkit-transform: translateY(-3px);
				    -ms-transform: translateY(-3px);
				        transform: translateY(-3px);
				-webkit-box-shadow: 0px 3px 3px rgba($grey, .6);
				        box-shadow: 0px 3px 3px rgba($grey, .6);
				}
			&:active {
				-webkit-transform: none;
				    -ms-transform: none;
				        transform: none;
				-webkit-box-shadow: none;
				        box-shadow: none;
				}
			}
		}
	}
@-webkit-keyframes showUp {
	100% {
		opacity: 1;
		}
	}
@keyframes showUp {
	100% {
		opacity: 1;
		}
	}
	
	
#main {
	#inner-main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		#left-main, #right-main {
			padding: 5rem 4rem;
			}
		#left-main {
			-webkit-box-flex: 2;
			    -ms-flex: 2;
			        flex: 2;
			h1 {
				font-size: 36px;
				font-family: $font2;
				font-weight: 700;
				margin-bottom: 10px;
				color: $blue - 50;
				}
			p {
				line-height: 1.7;
				letter-spacing: 1px;
				text-align: justify;
				}
			}
		#right-main {
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			background: -webkit-linear-gradient($red, $red - 50);
			background: -o-linear-gradient($red, $red - 50);
			background: linear-gradient($red, $red - 50);
			p {
				line-height: 1.7;
				letter-spacing: 1px;
				text-align: justify;
				color: #fff;
				}
			}
		}
	}
	
#services {
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	background: -webkit-linear-gradient(45deg, $blue, $blue - 50);
	background: -o-linear-gradient(45deg, $blue, $blue - 50);
	background: linear-gradient(45deg, $blue, $blue - 50);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		padding: 3rem 0;
		.service-list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-align: center;
			margin: 0 10px;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			i {
				font-size: 32px;
				height: 70px;
				width: 70px;
				background: #fff;
				color: $blue - 50;
				border-radius: 50%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				}
			h1 {
				font-size: 24px;
				margin: 5px 0;
				line-height: 1.1;
				font-family: $font2;
				font-weight: 700;
				color: #fff;
				}
			p {
				font-family: $font1;
				max-width: 40ch;
				margin: 5px 0;
				line-height: 1.2;
				color: #fff;
				}
			}
		}