/* @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap'); */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Montserrat',Helvetica,Trebuchet,Arial,sans-serif;
}
	html {
		/*Disable Scroll @ Axis-X*/
		overflow-x:hidden;

		scrollbar-width:thin; /* \"auto\" or \"thin\" */
		scrollbar-color:#FF0033 grey;	/*#C69500*/ /*blue orange*/;	/* scroll thumb and track */
		scroll-behavior:smooth;
	}
.cards{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 11px /*30px*/;
}
.cards h2.header{
  font-size: 40px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services{
  display: flex;
  align-items: center;
}
.content{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 10px /*20px*/;
  padding: 10px /*20px*/;
  border: 2px solid black;
  border-radius: 4px;
  transition: all .3s ease;
}
.content .fab{
  font-size: 35px /*70px*/;
  margin: 16px 0;
}
.content > *{
  flex: 1 1 100%;
}
.content:hover{
  color: rgba(102,255,204,0.75) /*white*/;
}
.content:hover a{
  border-color: rgba(102,255,204,0.75) /*white*/;
  background: rgba(102,255,204,0.75) /*white*/;
}
.content-1:hover{
  border-color: rgba(29,161,242,0.75) /*#1DA1F2*/;
  background: rgba(29,161,242,0.75) /*#1DA1F2*/;
}
.content-1:hover a{
  color: rgba(29,161,242,0.75) /*#1DA1F2*/;
}
.content-2:hover{
  border-color: rgba(225,48,108,0.75) /*#E1306C*/;
  background: rgba(225,48,108,0.75) /*#E1306C*/;
}
.content-2:hover a{
  color: rgba(225,48,108,0.75) /*#E1306C*/;
}
.content-3:hover{
  border-color: rgba(255,0,0,0.75) /*#ff0000*/;
  background: rgba(255,0,0,0.75) /*#ff0000*/;
}
.content-3:hover a{
  color: rgba(255,0,0,0.75) /*#ff0000*/;
}
.content-4:hover{
  border-color: rgba(204,102,255,0.75);
  background: rgba(204,102,255,0.75);
}
.content-4:hover a{
  color: rgba(204,102,255,0.75);
}
.content h2{
  font-size: 15px /*30px*/;
  margin: 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content p{
  font-size: 17px;
  font-family: 'Poppins',Helvetica,Trebuchet,Arial,sans-serif;
}
.content a{
  margin: 22px 0;
  background: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid black;
  padding: 15px 0;
  border-radius: 25px;
  transition: .3s ease;
}
.content a:hover{
  border-radius: 4px;
}
@media (max-width: 900px) {
  .services{
    display: flex;
    flex-direction: column;
  }
}