@charset "UTF-8";
/* CSS Document */
/* Carusos CSS Document by Melissa Sherley */



.carusos-header{
	background-color:rgba(0,170,204,1.00);
	height:20vh;
	width:100vw;
	align-content:center;
}

.carusos-header-container {
	padding-top:50px;
	width:95vw;
	margin:auto;
	/*Toggle this border on and off as a guide*/
	border:1px dashed var(--toggle);
	align-content: center;	
	justify-content:center;
}

/**** ((((DIVIDERS)))) ****/
.carusos-divider{
	background-color: var(--toggle);
	height:3vh;
	width: 100vw;
}

.fivepx-divider{
	height:5px;
}

/**** ((((LOGO)))) ****/
.carusos-logo-container{
	width:250px;
}


/**** ((((BRIEF)))) ****/
.carusos-brief{
	border:1px solid black;
	box-shadow: var(--box-shadow);
	max-width:400px;
	padding:20px;
}


/**** ((((DASHBOARD GRID)))) ****/
.carusos-grid{
	max-width:800px;
	aspect-ratio:798/523;
	justify-content:center;
	align-content:center;
	display:grid;
	margin-bottom:20px;
	/* padding:50px 0px 20px 0px; */
	box-shadow:var(--box-shadow);
	border:1.5px solid rgba(0,170,204,1.00); 
	object-fit:cover; 
	overflow:hidden;
	border-radius:10px; 
	gap:0px 20px;
	height: auto;
	grid-template-columns:30% 70% ;
	grid-template-rows: 20% 80% ;
	grid-template-areas: 

		 'title1 title1'
		 'content1 content2';
}



/**** ((((VISUAL RESEARCH)))) ****/

.carusos-visual-research{
	grid-area:title1; 
	justify-content:center; 
	align-content:center; 
	z-index:2; 
	background-color:rgba(0,170,204,1.00); !important; 
	padding:0 10px 0 10px;
}

.visual-research-product{
	grid-area:content1; 
	align-content:center; 
	padding:0 4vw 0 4vw; 
	padding-left:30%;
}

.visual-research-website{
	grid-area:content2; 
	align-content:center; 
	overflow:hidden; 
	object-fit:cover;
}


/**** ((((DESIGN PROCESS)))) ****/

.the-process{
	border:1.5px solid rgba(0,170,204,1.00);
	box-shadow: var(--box-shadow);
	max-width:800px;
	padding:50px 20px 50px 20px;
	border-radius:20px;
	/* background-color:rgba(221,85,159,1.00); */
	color:rgba(221,85,159,1.00) ;
}

.carusos-steps-wrapper{
	max-width:800px;
	text-align:left;
	justify-content: center;
	flex-wrap:wrap;
	display:flex;
	gap:10px;
}

.carusos-steps{
	background-color: rgba(0,170,204,1.00);
	color: white;
	border-radius:30px;
	box-shadow: var(--box-shadow);
	padding:10px 20px;
	width: 320px;
	height:150px;
	text-align:left;
	margin-bottom:0px; 
	align-content:center;	
}


/**** ((((NEW ADVERTISEMENT)))) ****/
.carusos-new-advertisement{
	max-width:500px; 
	box-shadow: var(--box-shadow); 
	background-color:rgba(48,55,123,1.00); 
	border-radius:20px; 
	object-fit:cover; 
	overflow:hidden; 
	aspect-ratio:578/507;
}

.carusos-chemistwarhouse-catalogue{
	max-width:800px; 
	box-shadow: var(--box-shadow); 
	background-color:rgba(254,242,247,1.00); 
	border-radius:20px; 
	object-fit:cover; 
	overflow:hidden; 
	border:1px solid rgba(0,170,204,1.00); 
	aspect-ratio:758/536;
}


/**** ((((CREATED WITH)))) ****/

.carusos-icon-list{
	max-width:300px;
	padding:10px;
	border:1.5px solid #b61f2f;
	border-radius:20px;
	display:flex;
	justify-content: space-evenly;
	margin-bottom:20px;
	filter:sepia(100%);
}


.carusos-icons{
	display:flex;
	border-radius:30%;
	width:23%;
	min-width:47px;
}


/**** ((((MOTION GRAPHIC VIDEO)))) ****/
.carusos-video{
	max-width:500px;
	aspect-ratio:1/1;
	box-shadow: var(--box-shadow);
	border: 1.5px solid rgba(0,170,204,1.00);
	background-color:rgba(0,170,204,1.00);
	border-radius:20px;
	overflow:hidden;
	object-fit:cover;
}