@charset "UTF-8";
/* CSS Document */

body {
	background-color:#15022E;
}

h1 {
	color: white;

}

.container {
	background-color: #1C164B;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	grid-template-areas: 
		"info photo";
	width: 70%;
	height: 90%;
	margin: auto;
	margin-top: 10%;
	font-family: 'Red Hat Display', sans-serif;
}


.title {
	width: 80%;
	padding-left: 7%;
	margin-top: 7%;
}

.insight {
	color: #8E45BA;
}

.paragraph {
	color:#A597B2;
	line-height: 180%;
	width: 85%;
	padding-left: 7%;
}



.item2{
	padding: 0px !important;
	
}

	
img {
  overflow: hidden;
  position: relative;	
}

.overlay {
	background-color: #8e45ba;
	opacity: 0.3;
	filter: grayscale(100%) brightness(70%) sepia(50%) hue-rotate(-100deg) saturate(500%) contrast(1);
	z-index: 2;
}

/*Data container*/

.dataContainer {
	display: grid;
	grid-template-columns: auto auto auto;
	margin-top: 12%;
	width: 70%;
	padding-left: 7%;
	margin-bottom: 7%;
	
}

.data {
	font-size: 20px;
	color: #FFFFFF;
	text-transform: uppercase;
}

.data1 {
	font-size: 10px;
	color:#A597B2;
	padding-top: 3%;
	text-transform: uppercase;
	
}

/*XL LARGE DESKTOP 2000px--> */
@media (min-width: 2001px) and (max-width: 3000px) { 
	
	.smallDesktopImage {
		display: none !important;
		
	}
	.containerMobile {
		display: none !important;
	}
	
	.dataContainerMobile {
		display: none !important;
	}
	.mobileImage {
		display: none !important;
	}
	
	.titleXl {
		font-size: 50px;
		padding-left: 10%;
	}
	
	.paragraphXl {
		font-size: 20px;
		padding-left: 10%;
		width: 70%;
		
		}
				
	.dataContainerXl {
		padding-left: 10%;
		
	}
	
	.data1Xl {
		font-size: 17px;
	}
	
	.dataXl {
		font-size: 30px;
	}
	
	
}


/* LARGE DESKTOP 1200px --> */

@media (min-width: 1200) and (max-width: 2000px) { 
	
	.smallDesktopImage {
		display: none !important;
		
	}
		.containerMobile {
		display: none !important;
	}
	
	.dataContainerMobile {
		display: none !important;
	}
	.mobileImage {
		display: none !important;
	}
	

}



/* TABLET 613px --> */
@media (min-width: 614px) and (max-width: 1999px) { 
	
	.desktopImage {
		display: none !important;
	}
	
	.smallDesktopImage {
		width: 100%;
		
	}
	.containerMobile {
		display: none !important;
	}
	
	.dataContainerMobile {
		display: none !important;
	}
	.mobileImage {
		display: none !important;
	}
}



/* MOBILE 100px --> */
@media (min-width: 100px) and (max-width: 613px) { 
	
	.desktopImage {
		display: none !important;
	}
	
	.smallDesktopImage {
		display: none !important;
		
	}
	
	.container {
		display: none;
	}
	
	.mobileImage {
		position: relative;
		width: 100%;
	}
	
	.containerMobile {
	background-color: #1C164B;
	position: relative;
	align-items: center;
	width: 90%;
	height: 50%;
	margin: auto;
	margin-top: 20%;
	font-family: 'Red Hat Display', sans-serif;
}

	.dataContainerMobile {
	position: relative;
	align-content: center;
	margin-top: 12%;
	width: 50%;
	padding-left: 38%;
	margin-bottom: 10%;
	}
	
	.titleMobile {
		width: 90%;
		
	}
	
	.paragraphMobile {
		width: 90%;
	}
	
	.dataSpace1 {
		padding: 5%;
		font-size: 20px;
	}
	
	.dataSize1 {
		font-size: 10px;
	}
	

}