/* =======================================================
*
* 	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;
  max-width:100%;
  overflow-x:hidden;
}

#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: #333;
}

::-moz-selection {
  color: #fff;
  background: #333;
}

::selection {
  color: #fff;
  background: #333;
}

.bold{
	font-weight:700;
}

a {
	all: unset;
}

#show_link{
	text-decoration:underline;
	font-weight: 600;
	color:rgba(8,115, 20, 255);	
}

a#show_link {
	cursor: pointer;
}

/* =======================================================
*
* 	Navbar Style 
*
* ======================================================= */
.navbar {	
    background-image: linear-gradient(rgba(8,115, 20, .9), rgba(64,186, 88, 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 #linked_in_menubar
{
	display:none;
}

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

/* 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(64,186, 88, 255), rgba(8,115, 20, 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(8,115, 20, 255);
}

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

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

.intro .col2{
	color: rgba(64,186, 88, 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(8,115, 20, 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(64,186, 88, 255);	
	text-align:left;
	padding-left:0px;
	margin-left:0px;
	display: flex;
	align-items: flex-start;		
}

.outer_content li{
	color: rgba(64,186, 88, 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:min(100vw, 1600px);
	/*margin:40px;	*/
	/*margin-top:40px;*/
	padding-left:20px;
	padding-right:40px;	
	/*gap: 20px;	*/
	flex-direction:column;	
}

.discovery h1{
	padding-bottom:20px;
}

.discovery .content{
	display:flex;
	width:100%;
	max-width:min(100vw, 1600px);	
	/*padding-left:20px;
	padding-right:20px;	
	gap: 20px;	*/
	
}
.discovery .content p, .discovery .outer_content p{
	/*padding-top: calc(1rem + 2vw);*/
	color: rgba(64,186, 88, 255);
	font-size:calc(0.7rem + 0.6vw);	
	display: flex;	
	align-items: center;
}




.discovery .content p{
	text-align: left;
	align-items: flex-start;
	
}


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

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

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

.discovery .col1 li{
	color: rgba(64,186, 88, 255);	
	list-style-position: inside;
	align-items:left;
	text-align: left;
	padding-left:1em;	
}

.discovery .col2 li{
	color: rgba(64,186, 88, 255);	
	list-style-position: inside;
	align-items:left;
	text-align: left;
	padding-left:1em;	
}

.discovery .col2 p{
	padding-top:0px;
	margin-top:0px;
	color: rgba(96, 96, 96, 255);	
	font-size:calc(0.3rem + 0.6vw);
	text-align:center;
	justify-content:center;	
}



.TypesVR .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;	
}

.TypesVR h1{
	padding-bottom:20px;
}

.TypesVR .content{
	display:flex;
	width:100%;
	max-width:1600px;	
	/*padding-left:20px;
	padding-right:20px;	
	gap: 20px;	*/
	
}
.TypesVR .content p, .TypesVR .outer_content p{
	/*padding-top: calc(1rem + 2vw);*/
	color: rgba(64,186, 88, 255);
	font-size:calc(0.7rem + 0.6vw);	
	display: flex;	
	align-items: center;
}




.TypesVR .content p{
	text-align: left;
	align-items: flex-start;
}


.TypesVR .vrtypes{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;	
	padding-left:4vw;
	padding-right:4vw;
}

.TypesVR .vrtype
{
	text-align:center;
}

.TypesVR .vrtype p{
	color: rgba(96, 96, 96, 255);	
	text-align:center;
	font-size:calc(0.3rem + 0.6vw);
	align-items:center;
	justify-content:center;
}

.TypesVR .software{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;

}

.TypesVR .software img{
	
	width: calc(12rem + 12vw);
	max-width:30vw;
}

/* IDEATION */

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

.ideation .outer_content .section_header p{
	color: rgba(64,186, 88, 255);	
	text-align:left;
	padding-left:10px;
	margin-left:10px;
	margin-bottom:0px;
	padding-bottom:0px;
	display: flex;
	align-items: flex-start;	
	width:100%;			
}

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

.ideation .content{	
	display:flex;
	width:100%;
	max-width:1600px;	
	padding-top:0px;
	margin-top:0px;	
	/*padding-left:40px;
	padding-right:40px;	
	gap: 20px;	*/	
	/*flex-direction:row;	*/
}

.ideation .col1{
	color: rgba(64,186, 88, 255);
	font-size:calc(0.7rem + 0.6vw);
	/*text-align: center;
	align-items: center;*/
	display: flex;
	flex-direction:column;			

}

.ideation .col1 p{	
	text-align:left;
	align-items: flex-start;	
	width:100%;	
}
	
.ideation .col2{
	color: rgba(64,186, 88, 255);
	font-size:calc(0.7rem + 0.6vw);
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: top;
}

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

.ideation img{	
	max-width:100%;
	height:auto;
	max-height:400px;
	min-width:300px;
}
.ideation .col2 img{
	width:100%;
}

.ideation .Problemfull_spacer{
	text-align:left;
	align-items:flex-start;
	background:red;
}

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

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



.user_stories{
	max-width:1600px;
	margin:auto;	
	padding-left:2vw;
	padding-right:2vw;
}

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

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

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

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

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

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

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

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

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

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

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

.comments .col1, .comments .col2{
	font-family: "Gulzar", serif;	
	flex:1;	
	flex-direction:column;
	align-items: flext-start;
	padding:10px;	
	color: rgba(64,186, 88, 255);
	font-size:calc(1rem + 0.8vw);
	text-align: left;
	display: flex;	
	
}

.comments .col1 p, .comments .col2 p{
	padding-top:40px;		
	padding-right:40px;
	line-height:calc(1.1rem + 0.9vw);
	
}

.Section_Title h1{
	padding-top:40px;
	color:rgba(8,115, 20, 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(64,186, 88, 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(64,186, 88, 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(8,115, 20, 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(8,115, 20, 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(8,115, 20, 255);	
	margin-bottom:20px;
}
.SubTitle{ 	
	font-size:calc(1.2rem + 0.8vw);
	letter-spacing:0;
	line-height:2px;
	
}
.dividerBar{
	margin:auto;
	background-color:rgba(8,115, 20, 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);	
}

.user_stories .dividerBar{
	margin-left:calc(2.4rem + 1.8vw);	
}

.constraints .dividerBar{
	margin-left:calc(2.4rem + 1.8vw);	
}

.basicui .dividerBar{
	margin-left:calc(1.5rem + 1.2vw);	
}

.iterations .dividerBar{		
	margin-left:calc(2rem + 1.6vw);	
}

.discovery .dividerBar{
	margin-left:calc(2.5rem + 1.8vw);	
}

.TypesVR .dividerBar{
	margin-left:calc(2.5rem + 1.8vw);	
}

.existing .dividerBar{
	margin-left:calc(8rem + 4vw);	
}

.standards .dividerBar{
	margin-left:calc(4rem + 2vw);	
}

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

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

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

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

.feedback_details{
	display:flex;
	flex-direction: row;	
	color: rgba(64,186, 88, 255);
	font-size:calc(0.7rem + 0.6vw);
}

.feedback_details .column1, .feedback_details .column2 img{
	max-width:80%;
	padding:20px;
}
.steps{
	display:flex;
	flex-direction: row;
	justify-content:center;	
	
	align-items:center;
	text-align:center;	
	color: rgba(64,186, 88, 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, 255);
	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);
}


/*
.steps{
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items:center;
	text-align:center;	
	color: rgba(64,186, 88, 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:150px;
	align-items:flex-start;
	text-align:center;
}

.step{
	display:flex;
	flex-direction:column;
	height:calc(1rem + 5vw);
	width:auto;
	text-align:center;
	align-items:center;
}

.step img{
	width:auto;
}
*/
.user_story_images{
	display:flex;
	flex-direction: column;
}
.user_story_images .img_row1, .user_story_images .img_row2{
	display:flex;
	justify-content: center;
	align-items:center;
	text-align:center;
	width:100%;
	gap:40px;
}

.user_story_images .img_row1 img{
	max-width:100%;
}

.user_story_images .img_row2 .img_col1,  .user_story_images .img_row2 .img_col3{
	min-width:25%;
}

.user_story_images .img_row2 .img_col2 img{
	width:100%;
	height:auto;
}

.constraint_details{
	display:flex;
	flex-direction:row;
	margin:40px;		
}
.constraint_details .column1{
	padding-right:40px;
}

.constraint_details img{
	width:100%;
}

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

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

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

.collaboration .row{
	display: flex;
	flex-direction: row;
}

.collaboration .col2{
	padding-left:40px;	
}

.collaboration .caption{
	margin-left:40px;
	margin-right:40px;
}

.collaboration .row .col2 .images{
	display: flex;
	flex-direction: row;
}
.collaboration .row .col2 .images img{
	max-width: 400px;
	width:calc(5rem + 12vw);
	height:auto;
}

.collaboration img{
	max-width:40vw;
}

.basicui .row{
	display:flex;
	flex-direction:row;	
	padding-bottom:40px;
	justify-content: center;
	align-items: center;
}

.basicui .row .col1{
	padding-right: 20px;		
}

.basicui .row .col2{
	padding-left: 20px;
}

.basicui .row .col1 img, .basicui .row .col2 img{
	max-width:600px;
	width:calc(12rem + 12vw);		
	margin:auto;
}

.basicui .row .col1 p, .basicui .row .col2 p{
	display: block;	
}

.Example_Images{
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
	text-align:center;
}

.Example_Images img{
	max-width:530px;
	width:30vw;
}

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

	.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);
	}
  
	.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(64,186, 88, .9), rgba(8,115, 20, .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 */
    }
	
	.user_story_images .img_row1, .user_story_images .img_row2{
		display:flex;
		flex-direction: column;	
		padding:0px;
		margin:0px;
		gap:0px;		
	}
	
	.img_row1 img, .img_row2 img{
		/*max-width:80%;*/
	}
	
	.constraint_details{
		display:flex;
		flex-direction:column;
	}

	.steps{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items:center;
		text-align:center;		
		color: rgba(64,186, 88, 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;
	}
	/*.steps{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items:center;
		text-align:center;		
		color: rgba(64,186, 88, 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);
		width:calc(2rem + 7vw);
		padding:0px;
		margin:0px;
	}
	
	.step img{
		height:50%;
	}*/
	
	.user_story_images .img_row2 .img_col1,  .user_story_images .img_row2 .img_col3{
		visibility:hidden;
		width:0%;
		min-width:0%;
	}
	
	.user_story_images .img_row2 .img_col2 img{
		width:100%;
	}
	.full_spacer {		
		padding:0px;
	}
	
	.Example_Images{
		display:flex;
		flex-direction: column;
		align-items:center;
		justify-content:center;
		text-align:center;
		gap:10px;
	}
	.Example_Images img{
		max-width:530px;
		width:70vw;
	}
	
	.discovery .col1{
		margin-bottom:0px;		
	}
	.discovery .col2{
		margin-top:0px;
	}
	
	
	.TypesVR .vrtypes{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-between;	
		padding-left:4vw;
		padding-right:4vw;
	}

	.TypesVR .vrtype
	{
		
		padding:20px;
	}

	.TypesVR .vrtype p{
		color: rgba(96, 96, 96, 255);	
		text-align:center;
		font-size:calc(0.5rem + 0.6vw);
		align-items:center;
		justify-content:center;
	}

	.TypesVR .software{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-between;
		gap:20px;

	}

	.TypesVR .software img{
		
		width: calc(12rem + 12vw);
		max-width:500px;
	}
	
	.collaboration .row{
		display:flex;
		flex-direction: column;
	}
	
	.basicui .row{
		display:flex;
		flex-direction: column;
	}
	
	.collaboration img{
		max-width:80vw;
	}
	
	.user_stories{
		padding:20px;
	}
	
	.basicui .row .col1{
		padding-right: 0px;		
	}

	.basicui .row .col2{
		padding-left: 0px;
	}
}

@media (max-width: 350px) {
	.discovery .Section_Title h1{		
		font-size: calc(2.5rem + 2vw);/* 3.5vmax;*/		
	}
	
	.TypesVR .title{
		font-size:calc(1rem + 0.8vw);
	}
	
	.collaboration .col2{
		padding-left:0px;
	}
	
	.collaboration .caption{
		margin-left:10px;
		margin-right:10px;
	}
	
	.prototype .Section_Title h1,
	.reflection .Section_Title h1{
		font-size: calc(2.5rem + 2vw);
	}
	
	.reflection .text_container{
		margin-left:10px;
		margin-right:10px;
	}
	
	.comments .col1 p
	{
		padding-right:10px;
	}
}

.footer {
  background-image: linear-gradient(rgba(64,186, 88, .9), rgba(8,115, 20, .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: #40ba58; /* 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: #097415; /* Darker shade on hover */
}