/* =======================================================
*
* 	Template Style 
*
* ======================================================= */
*{
	
	padding:0;
	box-sizing:border-box;
}
body {  	
	font-family: "Poppins", serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: #333333;
	background: #fff;  
	padding: 0px;
	background:linear-gradient(rgba(255,255, 255, .9), rgba(236,236, 235, .9));
	margin: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: #eee;
}

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

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

.bold{
	font-weight:700;
}

/* =======================================================
*
* 	Navbar Style 
*
* ======================================================= */
.navbar {
	background-color: rgba(255,255,255,.9);
    position: fixed; /* Fixes the navbar at the top */
    top: 0;
    left: 0;
    right: 0;    
    z-index: 1000; /* Ensure it's above other elements */
	padding: 10px 20px; /* Spacing around the menu */
    
	min-height: 50px;	
	transition: background-color 0.3s;	
	
}

.navbar .content {
	display: flex;
    justify-content: space-between; /* Space between button and menu */
    align-items: center; /* Center items vertically */
	max-width:min(100vw, 1200px);
	margin:auto;
}

.navbar .scrolled{
	background-color:rgba(200, 200, 200, .9);	
}

.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: black; /* 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(0, 0, 0, 0.5); /* Change background color on hover */
    color: white; /* Change text color on hover */
    border-radius: 5px; /* Optional: rounded corners for the hover effect */
}

.navbar #portfolio a:hover {
    background-color: rgba(61,133, 243, .9); /* Change background color on hover */    
}
.navbar #about a:hover {
    background-color: #40BA58; /* Change background color on hover */    
}
.navbar #resume a:hover {
    background-color: rgba(243, 61, 61, .9); /* Change background color on hover */    
}

.navbar .menu_end li{
	justify-content: flex-end;
}

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

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


.header{		
	display: flex;
	align-items:flex-start;	
	justify-content: flex-start;	
	flex-direction: column;
	max-width:min(100vw,1200px);
	margin:auto;	
	width:100%
}

.header .head_spacer{
	height:150px;
}

.header h1{	
	display:flex;
	align-items:flex-start;
	justify-content: flex-start;
	text-align:left;	
	margin:0px 40px;
	font-size: calc(2.2rem + 1.8vw);
}

.header p{
	margin:0px 40px;
	font-size: calc(0.6rem + 0.8vw);
}

.buttons{
	max-width:min(100vw, 1200px);
	margin:auto;	
	display:flex;
	flex-direction:column;	
}

.buttons a{
	text-decoration: none; /* Remove underline from links */
    color: #333333; /* Text color */
}

.buttons .row_odd, .buttons .row_even{
	padding:0px;
}

.buttons .column_details 
{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;			
	gap:40px;
}

.buttons .column_details  p{
	text-align:left;
	font-size: calc(0.5rem + 0.5vw);/*40px;*//*20px;*/
	padding-left:20px;
	padding-right:20px;
}

.buttons .column_details  h2{
	font-size: calc(1rem + 1.2vw);/*40px;*/
	text-align:left;
	padding-left:20px;
	padding-right:20px;
}

.buttons .row_even .col1, .buttons .row_odd .col2{
	display:flex;
	align-items: center;
	text-align:center;
	width:calc(12rem + 12vw);
	height:calc(12rem + 12vw);
	
}

.buttons #stereo{
	background:linear-gradient(-45deg, rgba(36,78, 142, .9), rgba(61,133, 243, .9));
}

.buttons #vr{
	background:linear-gradient(-45deg, #087314, #40BA58);		
}

.buttons #ar{
	background:linear-gradient(-45deg, rgba(142, 36, 36, .9), rgba(243, 61, 61, .9));		
}

.buttons .row_even .col2, .buttons .row_odd .col1{
	display:flex;
	align-items: center;
	flex-direction:column;
	width:calc(12rem + 12vw);
	height:calc(12rem + 12vw);
}

.buttons .image_object a img{	
	transition: transform 0.3s;
}

.buttons .image_object a:hover img{	
	transform: scale(1.1);	
}

.buttons .text_object a p, .buttons .text_object a h2{
	transition:transform 0.3s;
	transition:color: 0.3s ease;
	color: #4d4d4d
}

.buttons .text_object a:hover p, .buttons .text_object a:hover h2{	
	transform: scale(1.1);
	color: #2d2d2d;
}

.buttons #stereotext a:hover p , .buttons #stereotext a:hover h2 {	
	color: #2B43A4
}

.buttons #VRtext a:hover p , .buttons #VRtext a:hover h2 {	
	color: #097415
}


.buttons #ARText a:hover p , .buttons #ARText a:hover h2 {	
	color: #730808
}

.buttons .text_object{
	text-align:left;
	padding:20px;	
	max-width:min(100vw, 1200px);
	width:100%;
}

.buttons img{	
	max-width: 80%;
	margin:auto;
	padding:0px;	
}

.spacer{
	height:40px;
}

.footer {
  background-image: linear-gradient(rgba(235,235, 235, .9), rgba(210,210, 210, .9)); 
  color: black;padding-top: 20px;
  padding-bottom: 20px;
  padding:20px 0px;
  text-align: center;
  margin:0px;
  width:100%;
}

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


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {  
   
  .navbar ul {
		justify-content: flex-start; /* Space between button and menu */
        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-color: rgba(100, 100, 100, 0.9);
		
        top: 30px; /* Adjust based on navbar height */
        width: 200px; /* Set width for the dropdown */		
    }
	
	.navbar a{
		color:white;
	}

    .navbar ul.show {
        display: flex; /* Show the menu when toggled */
		flex-direction:column;		
		justify-content: flex-start;
		height:100%;
		padding: 10px 0;
		min-height:160px;	
		align-items:flex-start;		
		color:white;
		left:10px;
		top:50px;
		gap:10px;
    }
	
	.navbar #linked_in_menubar
	{
		display:initial;
	}
	
	.menu-button {
        display: block; /* Show the hamburger icon */
		color:#333333;
    }
	
	.header .head_spacer{
		height:100px;
	}
	
	.buttons{
		margin:0px;
	}
	
	.buttons .column_details 
	{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;			
		gap:20px;
		border:1px solid #333333;
		width:calc(20rem + 12vw);
		margin:20px auto;
		
	}
	
	.buttons .row_even .col1, .buttons .row_odd .col2{
		display:flex;
		align-items: center;
		text-align:center;
		width:calc(20rem + 12vw);
		height:calc(20rem + 12vw);
		
	}
	
	.buttons .row_even .col2, .buttons .row_odd .col1{
		display:flex;
		align-items: center;
		flex-direction:column;
		width:calc(20rem + 12vw);
		height:calc(20rem + 12vw);
	}
	
	.buttons .column_details  p{
		text-align:center;
		font-size: calc(0.8rem + 0.8vw);
		
	}

	.buttons .column_details  h2{		
		text-align:center;		
	}
	
	.header p{
		margin:0px 40px;
		font-size: calc(0.6rem + 0.8vw);
		max-width:100%;
	}
	
}

@media (max-width: 350px) {  
	.buttons .column_details 
	{		
		width:calc(15rem + 12vw);				
	}
	
	.buttons .row_even .col1, .buttons .row_odd .col2{		
		width:calc(15rem + 12vw);
		height:calc(15rem + 12vw);
		
	}
	
	.buttons .row_even .col2, .buttons .row_odd .col1{		
		width:calc(15rem + 12vw);
		height:calc(15rem + 12vw);
	}
	
	.buttons .row_even .column_details{
		padding-bottom: 40px;
		margin:20px auto;
	}
	
	.buttons .row_odd .col1{
		height: calc(20rem + 12vw);
	}
}

#scroll-to-top {
    position: fixed;            /* Fixed position */
    bottom: 20px;              /* Distance from the bottom */
    right: 20px;               /* Distance from the right */
    background-color: #007bff; /* 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: #0056b3; /* Darker shade on hover */
}