/* =======================================================
*
* 	Template Style 
*
* ======================================================= */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {  
  font-family: "Poppins", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #4d4d4d;
  background: #fff;  
  padding: 0px;
}

#page {
  position: relative;  
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

::-webkit-selection {
  color: #fff;
  background: #9090BB;
}

::-moz-selection {
  color: #fff;
  background: #9090BB;
}

::selection {
  color: #fff;
  background: #9090BB;
}

.bold{
	font-weight:700;
}

a {
	all: unset;
}

/* =======================================================
*
* 	Navbar Style 
*
* ======================================================= */
.navbar {
	
    background-image: linear-gradient(rgba(219,76, 76, 0.9), rgba(115,8, 8, 0.9)); /* Semi-transparent blue */
    position: fixed; /* Fixes the navbar at the top */
    top: 0;
    left: 0;
    right: 0;
    /*padding: 10px 20px; /* Spacing around the menu */
    z-index: 1000; /* Ensure it's above other elements */
	padding: 10px 20px; /* Spacing around the menu */
    display: flex;
    justify-content: space-between; /* Space between button and menu */
    align-items: center; /* Center items vertically */
	min-height: 50px;
	justify-content: flex-end; /* Align items to the right */
}

.navbar ul {
    list-style: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    display: flex; /* Display items in a row */
    justify-content: flex-end; /* Align items to the right */	
}

.navbar li {
    margin: 0 15px; /* Space between menu items */
}

.navbar ul li {
	margin: 0;
	padding-left: 10px;
}

.navbar a {
    text-decoration: none; /* Remove underline from links */
    color: white; /* Text color */
    font-weight: bold; /* Bold text */
	padding: 5px 10px; /* Add some padding for a better click area */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */	
}

.navbar a:hover {
    background-color: rgba(255, 255, 255, 0.7); /* Change background color on hover */
    color: #DB4C4C; /* Change text color on hover */
    border-radius: 5px; /* Optional: rounded corners for the hover effect */
}

.navbar #linked_in_menubar
{
	display:none;
}

/* Menu Button Styles */
.menu-button {	
    font-size: 24px; /* Size of the hamburger icon */
    cursor: pointer; /* Pointer cursor */
    display: none; /* Initially hidden */	
	color:white;
}
#logo {
	float:left;
	padding:2px;
	margin-top:2px;
}


/* =======================================================
*
* 	Header Style 
*
* ======================================================= */


.header{
	background-image: linear-gradient(rgba(115,8, 8, 255), rgba(219,76, 76, 255));
	min-height: 550px;	
	display: flex;
	align-items:center;
	
	justify-content: center;	
}

.header .content{
	display:flex;
	width:80%;
	max-width:1600px;
}

.header .col1, .header .col2{
	flex:1;
	display:flex;
	align-items: center;
	justify-content: center;
}

.header .col1{
	color: white;	
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: center;
}
.header .col1 h1{
	color:white;	
	font-size: calc(2.4rem + 1.4vw);/* 3.5vmax;*/
	margin:10px;
}
.header .col1 h2{
	color:white;
	font-size: calc(0.9rem + 1vw);/* 3.5vmax;*/
}

.header .col2 img {
	max-width:100%;
	height:auto;
	max-height:400px;
	min-width:200px;
}
/* =======================================================
*
* 	intro Style 
*
* ======================================================= */


.intro{		
	display: flex;
	align-items:center;	
	justify-content: center;	
	text-align:center;		
}



.intro .content{
	display:flex;
	width:80%;
	max-width:1600px;
	/*margin:40px;	
	padding-left:40px;
	padding-right:40px;	
	gap: 20px;*/
}

.intro .highlight{
	font-size: calc(1.2rem + 0.8vw);
	color: rgba(219,76, 76, 255);
}

.intro .col1,.intro .col2{
	flex:1;
	display:flex;
	align-items: flext-start;
	/*justify-content: center;*/
	padding:10px;	
}

.intro .col1{
	color: rgba(219,76, 76, 255);
	font-size:calc(0.7rem + 0.6vw);
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: center;
}

.intro .col2{
	color: rgba(219,76, 76, 255);
	font-size:calc(0.7rem + 0.6vw);
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: top;	
}

.intro .list{
	text-align:left;
}

.TopBanner img{
	text-align:center;
	width:100%;
}

.outer_content h1{
	padding-top:20px;
	color:rgba(115,8, 8, 255);	
	font-size: calc(3.5rem + 2vw);/* 3.5vmax;*/
	letter-spacing:0;
	line-height:50px;
	align-items: center;
}

.outer_content p{
	text-align: left;	
	
}

.outer_content .section_header p{
	color: rgba(219,76, 76, 255);	
	text-align:left;
	padding-left:0px;
	margin-left:0px;
	display: flex;
	align-items: flex-start;		
}

.outer_content li{
	color: rgba(219,76, 76, 255);	
	list-style-position: inside;
	align-items:left;
	text-align: left;
	padding-left:3em;
	font-size:calc(0.7rem + 0.6vw);
}

/* DISCOVERY */
/*.discovery{		
	display: flex;
	align-items:center;	
	justify-content: center;	
	text-align:center;		
}*/

.discovery .outer_content{
	display:flex;
	width:100%;
	max-width:1600px;
	/*margin:40px;	*/
	/*margin-top:40px;*/
	padding-left:20px;
	padding-right:40px;	
	/*gap: 20px;	*/
	flex-direction:column;	
}


.proto_header{
	max-width:1600px;
	margin:auto;
}

.column_container{
	display:flex;
	width:80%;
	margin:auto;
}

.Section_Title h1{
	padding-top:40px;
	color:rgba(115,8, 8, 1);	
	font-size: calc(3.5rem + 2vw);
	letter-spacing:0;
	line-height:50px;
	align-items: center;
	text-align:center;
}

.Fulljust_text p{
	max-width:1600px;
	/*padding-top: calc(1rem + 2vw);*/
	color: rgba(219,76, 76, 255);
	font-size:calc(0.7rem + 0.6vw);	
	display: flex;	
	align-items: center;
	margin:auto;	
	/*padding-left:40px;
	padding-right:40px;*/
}

.Fulljust_text li{	
	color: rgba(219,76, 76, 255);
	padding-left:1em;
	list-style-position: inside;
	font-size:calc(0.7rem + 0.6vw);	
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;	
}

.Fulljust_text h1{
	color:rgba(115,8, 8, 255);	
	margin-bottom:20px;
	font-size:calc(1.2rem + 0.8vw);
	letter-spacing:0;
	line-height:2px;	
}

.spacer {
	padding:20px;
}

.full_spacer {
	padding:20px;
}

.text_container{
	margin-left:40px;
	margin-right:40px;	
}

.reflection{
	padding-bottom:40px;
	margin:40px;
}

.Section_Title{
	text-align:left;	
	padding:0px;
	margin:0px;
	padding-bottom:20px;
}

.title{		
	padding-top:20px;	
	color:rgba(115,8, 8, 255);	
	font-size:calc(1.2rem + 0.8vw);	
	letter-spacing:0;
	line-height:calc(1.5rem + 0.8vw);  /*50px;*/
	align-items: center;	
	text-align:left;		
}

.ProblemTitle { 
	color:rgba(115,8, 8, 255);	
	margin-bottom:20px;
}
.SubTitle{ 	
	font-size:calc(1.2rem + 0.8vw);
	letter-spacing:0;
	line-height:2px;
	padding-bottom:10px;	
}

.dividerBar{
	margin:auto;
	background-color:rgba(115, 8, 8, 255);
	width:40px;
	height: calc(0.3rem); /*5px;	*/
	line-height:2px;
		
	border-top-left-radius:33px;
	border-top-right-radius:33px;
	border-bottom-left-radius:33px;
	border-bottom-right-radius:33px;	
	text-align:left;	
	margin-left:calc(4rem + 3vw);		
}

.intro .Problem .dividerBar{
	margin-left:calc(1.2rem + 1.4vw);	
}

.intro .Solution .dividerBar{
	margin-left:calc(1.2rem + 1.4vw);	
}

.intro .MyRole .dividerBar{
	margin-left:calc(1rem + 1.4vw);	
}

.intro .Tools .dividerBar{
	margin-left:calc(0.2rem + 0.8vw);	
}

.intro .Process .dividerBar{
	margin-left:calc(1.2rem + 1.4vw);	
}
	
.intro .dividerBar{
	margin-left:calc(2.2rem + 1.6vw);	
}

.steps{
	display:flex;
	flex-direction: row;
	justify-content:center;	
	
	align-items:center;
	text-align:center;	
	color: rgba(219,76, 76, 255);
	font-size:calc(1rem + 0.5vw);
	max-width:min(100vw, 1600px);
	margin:auto;
}

.step_divider{
	background: rgba(3, 45, 7, 255);
	height:2px;
	width:7vw;
	align-items:flex-start;
	text-align:center;
}
.step_divider_spacer{
	background: rgba(3, 45, 7, 0);
	width:auto;
	height:0px;		
	align-items:flex-start;
	text-align:center;
	min-height:5vh;
	
}

.step{
	display:flex;	
	flex-direction:column;		
	height:20vh;
	align-items:center;
	justify-content:center;	
}
.steps_container{
	height:100%;
}

.step .content_holder{
	display:flex;	
	flex-direction:column;		
	align-items:center;
	justify-content:center;
	text-align:center;
	min-height:5vh;
}

.steps .divider_holder{
	height:20vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	
}

.step img{
	width:calc(5rem + 2vw);
}


.center_img{
	margin:auto;
	text-align:center;
	max-width:100%;
}

.center_img img{
	max-width:100%;
}

.discovery{
	max-width:1600px;
	margin:auto;	
	padding:20px;
}

.discovery p{
	color:rgba(219,76,76,255);
	font-size:calc(0.7rem + 0.6vw);	
	
}

.discovery img{
	height:auto;
	width:20vw;
	max-width:500px;	
}

.discovery ol{
	color:rgba(219,76,76,255);	
	margin:0px;
	padding:10px;
	list-style-position: inside;
	align-items:left;
	text-align: left;	
	font-size:calc(0.7rem + 0.6vw);	
	width:100%;
	padding-left:40px;
	padding-right:0px;	
}

.discovery ol li{
	text-indent:-1em;	
}

.row{
	display:flex;
	flex-direction:row;
	align-items:center;
}

.row .col1{
	flex-grow: 1;			
}

.row .col2{
	flex-grow:1;
}

.row .col2 ol{
	flex-grow:1;
	text-align:right;
}

.realizations{
	max-width:1600px;
	margin:auto;	
	padding:20px;
}

.realization img{
	height:auto;
	width:50vw;
	max-width:500px;	
}

.ideation, .design, .observation, .reflection{
	max-width:1600px;
	margin:auto;
	padding:20px;
}

.ideation p, .design p, .observation p, .reflection p{
	color:rgba(219,76,76,255);		
	font-size:calc(0.7rem + 0.6vw);	
	padding-bottom:40px;
	line-height:1.5;
}

.ideation .img_container{
	width:100%;
	display:flex;	
	justify-content: center;
}

.ideation .col1, .design .col1{
	padding-right:20px;
	justify-content:center;
	align-items:center;
}

.ideation .col2 img, .design .col2 img, .design .col1 img{
	max-width:400px;	
	width:70vw;
}

.design .row{
	display:flex;
	flex-direction:row;
	align-items:start;
}

.design .col2_large_img img{
	max-width:550px;	
	width:50vw;
	padding-left: 20px;
}

.design .col2_flow_img{
	display:flex;
	align-items:start;
	justify-content:start;
	height:100%;
}

.design .col2_flow_img img{
	max-width:400px;	
	width:30vw;
	padding-left: 20px;	
}

.implement .row1, .implement .row2{
	display:flex;
	flex-direction:row;	
	align-items:center;
	justify-content:center;
	text-align:center;
}

.implement .box1,
.implement .box2,
.implement .box3,
.implement .box4{
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:30px;
	margin:20px;
	border:solid 2px black;
	border-radius: 30px;
	min-width:40vw;
	width: 50%;	
	height: 40vh;
	gap:20px;
	min-height: 400px;
	font-size:calc(1.3rem + 1.3vw);	
}

.implement .box1{
	Background:linear-gradient(135deg, #FFECEC, #FFECEC, #EAD7D7);	
}
.implement .box2{
	Background:linear-gradient(135deg, #FFCCCC, #FFCCCC, #EAB1B1);	
}
.implement .box3{
	Background:linear-gradient(135deg, #FF9999, #FF9999, #EA8383);	
}
.implement .box4{
	Background:linear-gradient(135deg, #E97B7B, #E97B7B, #D66666);	
}

.implement .box1 img,
.implement .box2 img,
.implement .box3 img,
.implement .box4 img{
	width:calc(1.5rem + 1vw);
}

.implement .imp_title{
	text-transform: uppercase;
}

.implement .imp_detail ul{
	list-style-type: lower-alpha;
}

.implement .details .box1,
.implement .details .box2,
.implement .details .box3,
.implement .details .box4{
	display:flex;
	flex-direction: column;
	padding:30px;	
	margin:20px;
	text-align:left;
	height: 45vh;
	
}

.implement .imp_title{
	font-size:calc(0.8rem + 0.7vw);		
	
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;	
}

.implement .imp_title img{
	padding-left:20px;
	width:calc(2rem + 1vw);
}
	
.implement .imp_detail ul{
	list-style-position: inside;
	padding-left:40px;	
}

.implement .imp_detail ul li{
	text-indent:-1.2em;	
}

.implement .imp_detail{
	font-size:calc(0.6rem + 0.6vw);		
}	

.observation h3{	
	font-size:calc(1.0rem + 0.6vw);		
	padding-top:20px;
	color:rgba(115, 8, 8, 255);	
	text-transform: uppercase;
}

.observation ol{
	list-style-position: inside;
	padding-left:40px;	
}

.observation ol li{
	text-indent:-1.2em;	
	color:rgba(219,76,76,255);		
	font-size:calc(0.7rem + 0.6vw);		
	line-height:1.5;
}

.caption{	
	padding-bottom:20px;
	color: rgba(96, 96, 96, 255);	
	font-size:calc(0.3rem + 0.6vw);
	text-align:center;		
}


.approach .dividerBar,
.simple_approach .dividerBar,
.implementation .dividerBar{
	margin-left:calc(5.5rem + 4.5vw);	
}

.user_flows .dividerBar{
	margin-left:calc(3rem + 3vw);	
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {	

	.row, .design .row{
		display:flex;
		flex-direction:column;
		align-items:center;	
	}
	
	.discovery img{
		height:auto;
		width:80vw;
		max-width:500px;	
		padding:20px;
	}

	.content {
	  flex-direction:column;
	  width: 100%;
	}
	.col1, .col2{
	  margin:10px 0px;
	}
  
	.caption{	
		padding-bottom:20px;
		color: rgba(96, 96, 96, 255);	
		font-size:calc(0.5rem + 0.6vw);
		text-align:center;	
	}
  
	.navbar ul {
        display: none; /* Hide the menu by default */
        flex-direction: column; /* Stack items vertically */
        position: absolute; /* Position it below the button */
        right: 20px; /* Align to the right */
        
		background-image: linear-gradient(rgba(115,8, 8, 0.9), rgba(219,76, 76, 0.9));
		
        top: 60px; /* Adjust based on navbar height */
        width: 200px; /* Set width for the dropdown */				
    }

    .navbar ul.show {
        display: flex; /* Show the menu when toggled */
		flex-direction:column;
		justify-content:space-between;
		height:100%;
		padding: 10px 0;
		min-height:140px;
    }

	.navbar #linked_in_menubar
	{
		display:initial;
	}
	
    .menu-button {
        display: block; /* Show the hamburger icon */
    }	
	
	.img_row1 img, .img_row2 img{
		/*max-width:80%;*/
	}
	
	.steps{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items:center;
		text-align:center;		
		color: rgba(219,76, 76, 255);	
		font-size:40px;		
	}
	.step_divider{
		visibility:hidden;	
		height:0px;
	}

	.step{
		display:flex;	
		flex-direction:row;
		align-items:center;
		text-align:left;
		font-size:calc(1.2rem + 1.7vw);
		height:calc(2rem + 7vw);		
		padding:0px;
		margin:0px;
	}
	
	.steps .divider_holder{
		height:0px;
	}
	
	.step a{
		display: flex;
		flex-direction:row;
	}
	
	.step img{
		height:10vw;
		width:auto;
	}
	
	.spacer{
		padding:15px;
	}
	
	.full_spacer {		
		padding:0px;
	}
	
	
	.implement .row1, .implement .row2{
		display:flex;
		flex-direction:column;	
		align-items:center;
		justify-content:center;
		text-align:center;
		padding:20px;
	}
	
	.implement .box1,
	.implement .box2,
	.implement .box3,
	.implement .box4{
		min-width:90vw;
	}
	
	.design .col2_large_img img{
		max-width:550px;	
		width:50vw;
		padding: 20px;
		
	}

	.design .col2_flow_img{
		display:flex;
		flex-direction:column;
		align-items:start;
		justify-content:start;
		height:100%;
	}

	.design .col2_flow_img img{
		max-width:400px;	
		width:60vw;
		padding-left: 20px;	
	}
	
	.img_container img{
		width:50vw;
	}
	.implement .row1, .implement .row2{
		padding-top:0px;
		padding-bottom:0px;
	}
	
	.ideation .col2{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		text-align:center;
	}
	
	.ideation p, .design p, .observation p, .reflection p{
		padding-bottom:10px;
	}
}

@media (max-width: 350px) {
	.discovery .Section_Title h1,	
	.reflection .Section_Title h1{		
		font-size: calc(2.5rem + 2vw);/* 3.5vmax;*/		
	}
	
	.observation .Section_Title h1{		
		font-size: calc(2.2rem + 2vw);/* 3.5vmax;*/		
	}
	
	.implementation .title{
		font-size:calc(1rem + 0.8vw);
	}
	
	.design .col2_large_img img{
		max-width:550px;	
		width:80vw;
		padding: 20px;
	}
	
	.ideation .col2 img, {
		max-width:400px;	
		width:70vw;
	}
}

.footer {
  background-image: linear-gradient(rgba(219,76, 76, .9), rgba(115,8, 8, .9)); /* Semi-transparent blue */
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.footer p{
	font-size:calc(0.7rem + 0.6vw);
	margin:0px;
	padding:0px;
}

.footer .copyright{
	padding-top:20px;
	font-size:calc(0.4rem + 0.3vw);	
}

.name{
	font-size:calc(1.2rem + 0.8vw);	
}

#scroll-to-top {
    position: fixed;            /* Fixed position */
    bottom: 20px;              /* Distance from the bottom */
    right: 20px;               /* Distance from the right */
    background-color: #DB4C4C; /* Background color */
    color: white;              /* Text color */
    width: 50px;               /* Width of the circle */
    height: 50px;              /* Height of the circle */
    border-radius: 50%;        /* Make it circular */
    display: flex;             /* Center the content */
    align-items: center;       /* Center vertically */
    justify-content: center;    /* Center horizontally */
	text-align:center;
    text-decoration: none;      /* Remove underline */
    font-size: 24px;           /* Font size */
	line-height:1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add a shadow */
    transition: background-color 0.3s, opacity 0.3s; /* Transition for hover effect */
	opacity:0;
    
	pointer-events:none;
}

#scroll-to-top.visible {
	opacity: 1;
	pointer-events:auto;
}

#scroll-to-top:hover {
    background-color: #730808; /* Darker shade on hover */
}