/*******************************************/
/************ Table of Contents ************/
/*******************************************/
/* 1. Information */
/* 2. Variables */
/* 3. General */
/* 4. Typography */
/* 5. Components */
/* 6. Layout */
/* 7. Media Queries */





/********************************************/
/************** 1. Information **************/
/********************************************/
/* color	#8dc63f		Remotus green */
/* color	#223e99		Remotus blue */
/* color	#F9A451		Remotus orange */





/********************************************/
/*************** 2. Variables ***************/
/********************************************/
/* CSS variables */
:root {
	--text-primary: white; /* primary text color */
	--text-secondary: #223E99; /* secondary text color -- Remotus blue */
	--bg-primary: #223E99; /* primary background color -- Remotus blue */
	--bg-secondary: white; /* secondary background color */
}





/********************************************/
/**************** 3. General ****************/
/********************************************/
:root {
	font-size: 16px;
	font-family: "Roboto", "Open Sans", "Montserrat", sans-serif;
	/* margin: 0; */
	/* padding: 0; */
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	min-height: 100vh;
	width: 100%;
}



/*********************************************/
/*************** 4. Typography ***************/
/*********************************************/
h1,
h2,
h3,
h4,
h5,
strong {
	font-weight: 700;
	line-height: 2.5rem;
}

h1 {
	font-size: 1.7rem;
}

h2 {
	font-size: 1.4rem;
	font-weight: 300;
}

h3 {
	font-size: 1.1rem;
	font-weight: 300;
}

.text--sm {
	font-size: 0.8rem;
}

.text--red {
	color: red;
}


/*********************************************/
/*************** 5. Components ***************/
/*********************************************/
.btn {
	padding: 0.5rem 1.0rem;
	font-size: 1.0rem;
	border: 1px solid rgb(158, 158, 158);
	background-color: none;
	font-size: 1.0rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
}

.btn--primary {
	background-color: #223e99;
	color: white;
}

.btn--secondary {
	background-color: rgb(224, 108, 0);
	color: white;
}

.btn--other {
	background-color: lightgrey;
}

.card {
	border: 1px solid #223e99;		/* remotus blue */
	/* padding: 0 1.0rem; */
	box-shadow: 0 2px 2px 1px #a0a0a0;
}

.card__title {
	padding: 1.0rem;
	width: 100%;
	background-color: #223e99;
	color: white;
	text-align: center;
}

.card__body {
	padding: 1.5rem 1.0rem;
	width: 100%;
	line-height: 1.5rem;
}

.card__footer {
	padding: 1.5rem 1.0rem;
	width: 100%;
}

/*********************************************/
/***************** 6. Layout *****************/
/*********************************************/
.grid-container {
	display: grid;
}

.flex-container {
	display: flex;
}

.flex--row {
	flex-flow: row nowrap;
}

.flex--column {
	flex-flow: column nowrap;
}

.content {
	/* border: 1px solid red; */
	/* height: 100vh; */
	/* min-height: 100vh */
	/* padding: 0 1.0rem; */
	grid-template-columns: repeat(4, 1.0fr);
	grid-template-rows: 60px auto auto auto auto auto auto auto auto;
	/* 
	grid-template-areas:
		"header		header 		header 		header"
		"hero		hero		hero		hero"
		"title		title		title		title"
		"cta		cta			cta			cta"
		"about		about		about		about"
		"services	services	services	services"
		"contact	contact		contact		contact"
		"footer		footer		footer		footer"
	;
	 */
}

section {
	padding: 2.0rem;
}

section:nth-child(odd) {
	background-color: #f8f8f8;
}

.section__header {
	padding-bottom: 1.0rem;
}

.section__body {
	padding-top: 1.0rem;
}

.section__body p {
	margin-bottom: 1.5rem;
	line-height: 1.5rem;
}

.section__body p:last-child {
	margin-bottom: 0;
}

header {
	/* border: 1px dashed orange; */
	/* grid-area: header; */
	grid-column: 1 / 5;
	grid-row: 1 / 2;
	background-color: var(--bg-primary);
	border: none;
	width: 100%;
	padding: 0 1.0rem;
	color: var(--text-primary);
	/* the properties below are for the HEADER Flex container */
	justify-content: space-between;
	align-items: center;
}

.logo {
	/* border: 2px dashed red; */
	width: 150px;
	height: 100%;
	/* the properties below are for the .logo Flex container */
	justify-content: start;
	align-items: center;
}

.logo__img {
	height: 80%;
	margin-right: 10px;
}

.logo__name {
	/* font-family: Montserrat, sans-serif; */
	/* font-family: "Open Sans", sans-serif; */
	font-family: Roboto, sans-serif;
	/* font-weight: 900; */			/* highest for Montserrat */
	/* font-weight: 800; */			/* highest for Open Sans */
	/* font-weight: 900; */			/* highest for Roboto */
	font-weight: 700;
	font-size: 1.5rem;
}

.navbar {

}

.navbar__items {
	list-style: none;
	/* display: inline-block; */
}

.navbar__item {
	display: inline-block;
	margin-right: 40px;
}

.navbar__item:last-child {
	margin-right: 0;
}

.navbar__link {
	color: white;
	text-decoration: none;
}

.hero__img {
	/* border: 1px solid orange; */
	/* grid-area: hero; */
	grid-column: 1 / 5;
	grid-row: 2 / 3;
	width: 100%;
	height: auto;
	background-image: url("../img/apple-1868496_1280.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
}

.hero__img > img {
	width: 100%;
	height: auto;
	max-height: 500px;
	visibility: hidden;
}

.title {
	/* grid-area: title; */
	grid-column: 1 / 5;
	grid-row: 3 / 4;
	width: 100%;
	padding: 2.0rem 3.0rem;
	text-align: center;
	/* font-weight: 300; */
}

.title h1 {
	font-weight: 300;
}

.cta {
	/* border: 1px solid red; */
	width: 100%;
	/* padding: 2.0rem 0; */
	/* the properties below are for the Grid container */
	/* grid-area: cta; */
	grid-column: 1 / 5;
	grid-row: 4 / 5;
}

.cta__img {
	width: 100%;
	height: auto;
	background-image: url(../img/technology-785742_1280.jpg);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.cta__img > img {
	width: 100%;
	height: auto;
	max-height: 200px;
	visibility: hidden;
}

.cta > h2 {
	line-height: 2.0rem;
	text-align: center;
	padding: 2.0rem 0;
}

.cta__cards {
	padding: 2.0rem 0;
	width: 90%;
	margin: 0 auto;
	/* the properties below are for the Flex container */
	justify-content: space-around;
	align-items: center;
}

.cta__cards .card {
	width: 40%;
}

.chat-icon__link {
	display: inline-block;
	width: 100%;
	/* margin: 0 auto; */
	text-align: center;
}

.chat-icon__img {
	height: 60px;
	border-radius: 50%;
	box-shadow: 0 2px 2px 1px #a0a0a0;
	/* margin: 0 auto; */
}

.chat-icon__img:hover {
	opacity: 0.6;
}

.cta > :last-child {
	/* border: 3px dashed red; */
	padding: 0 2.0rem 2.0rem 2.0rem;
	text-align: center;
}

.about {
	grid-column: 1 / 5;
	grid-row: 5 / 6;
}

.services {
	grid-column: 1 / 5;
	grid-row: 6 / 7;
}

.services__list {
	list-style: square;
	padding: 0 2.0rem;
}

.services__item {
	line-height: 2.0rem;
}

.contact {
	/* border: 2px dashed orange; */
	/* grid-area: contact; */
	grid-column: 1 / 5;
	grid-row: 7 / 8;
	width: 100%;
	/* height: 300px; */		/* delete this after inserting the contact form */
	padding: 2.0rem;
}

.form__row {
	padding: 1.0rem;
}

/* selects the Reset button of the contact form */
.form__row:last-child > input:last-child {
	/* border: 2px dashed red; */
	margin-left: 20px;
}

label {
	margin-bottom: 0.5rem;
	/* color: #a0a0a0; */
}

footer {
	/* border: 3px dashed orange; */
	/* grid-area: footer; */
	grid-column: 1 / 5;
	grid-row: 8 / 9;
	background-color: var(--bg-primary);
	/* border-radius: 5px 5px 0 0; */
	width: 100%;
	height: auto;
	padding: 2.0rem 1.0rem;
	color: var(--text-primary);
	/* the properties below set up a Grid inside the footer */
	display: grid;
	grid-template-columns: 150px 1.0fr;
	grid-template-rows: 1.0fr;
	column-gap: 2.0rem;
}

.footer__column {
	/* border: 2px dashed red; */
	width: 100%;
	height: auto;
}

.footer__column.col_1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	/* width: 100%; */		/* not necessary since selector above already applies this */
	/* height: auto; */
}

.footer__column.col_2 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	border-left: 1px solid #8a8a8a83;
	padding-left: 1.0rem;
}

.footer__list {
	list-style: none;
}

.footer__item {
	padding: 5px 0;
	font-size: 0.9rem;
}

.footer__link {
	color: white;
	text-decoration: none;
}



/**********************************************/
/************** 7. Media Queries **************/
/**********************************************/
@media screen and (min-width:550px) {
	
	
}

@media screen and (min-width:650px) {
	.cta__cards {
		width: 80%;
	}
	
	.cta__cards .card {
		width: 40%;
	}
	
}

@media screen and (min-width:750px) {
	.cta__cards {
		width: 70%;
	}
	
	.cta__cards .card {
		width: 40%;
	}
	
}

@media screen and (min-width:850px) {
	

}

@media screen and (min-width:950px) {


}

@media screen and (min-width:1050px) {
	

}