/* =======================================================
*
* 	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;
}

/* =======================================================
*
* 	Navbar Style 
*
* ======================================================= */
.navbar {
    background-image: linear-gradient(rgba(36,78, 142, .9), rgba(61,133, 243, .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.5); /* Change background color on hover */
    color: #2B43A4; /* 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(62,133, 243, 255), rgba(36,78, 142, 255));
	min-height: 550px;	
	display: flex;
	align-items:center;
	
	justify-content: center;	
}

.header .content{
	display:flex;
	width:80%;
	max-width:min(100vw, 1600px);
}

.header .col1, .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(3.5rem + 2vw);/* 3.5vmax;*/
	margin:10px;
}
.header .col1 h2{
	color:white;
	font-size: calc(1.2rem + 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:min(100vw, 1600px);
	/*margin:40px;	
	padding-left:40px;
	padding-right:40px;	
	gap: 20px;*/
}

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

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

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

.intro .col2{
	color: rgba(61, 133, 243, 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(43.00000123679638, 67.00000360608101, 164.00000542402267, 1);	
	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(61, 133, 243, 255);	
	text-align:left;
	padding-left:0px;
	margin-left:0px;
	display: flex;
	align-items: flex-start;		
}

.outer_content li{
	color: rgba(61, 133, 243, 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(61, 133, 243, 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(61, 133, 243, 255);
	font-size:calc(0.7rem + 0.6vw);
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: center;
}

.discovery .col2{
	color: rgba(61, 133, 243, 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(61, 133, 243, 255);	
	list-style-position: inside;
	align-items:left;
	text-align: left;
	padding-left:1em;
}

.discovery .col2 img{
	max-width:90%;
	height:auto;
	max-height:400px;
	min-width:250px;
}

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

/* IDEATION */

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

.ideation .outer_content .section_header p{
	color: rgba(61, 133, 243, 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:min(100vw, 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:min(100vw, 1600px);	
	padding-top:0px;
	margin-top:0px;	
	/*padding-left:40px;
	padding-right:40px;	
	gap: 20px;	*/	
	/*flex-direction:row;	*/
}

.ideation .col1{
	color: rgba(61, 133, 243, 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(61, 133, 243, 255);
	font-size:calc(0.7rem + 0.6vw);
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: top;
}

.ideation .col1, .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 .ProblemTitle{
	text-align:left;
	align-items:flex-start;
	background:red;
}

.examples{
	/*max-width:1600px;*/
	display:flex;
	flex-direction:column;
	margin:auto;
	padding:0px;
}

.discovery{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.examples img{
	max-width:100%;
	margin:auto;
}

.user_stories{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.ideation_container{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.constraints{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.design_header{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.proto_header{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.iterations{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.basicui{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.usability{
	max-width:min(100vw, 1600px);
	margin:auto;
}

.comments{	
	max-width:min(100vw, 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(61, 133, 243, 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);
	
}

.banner img{
	max-width:100%;
	margin:auto;	
	padding:40px;	
}

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

.Fulljust_text p{
	max-width:min(100vw, 1600px);
	/*padding-top: calc(1rem + 2vw);*/
	color: rgba(61, 133, 243, 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(61, 133, 243, 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(43, 67, 164, 1);	
	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;
}


.wiggle{
	color: rgba(61, 133, 243, 255);
	font-size:calc(0.7rem + 0.6vw);
	text-align: center;
	padding-top:40px;	
}
.wiggle .wiggle_images{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:0px;
}

.wiggle img{
	max-width:100%;
	height:auto;
	border:0.2vw solid #696a69;
}

.wiggle p{
	margin-bottom:10px;
}

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

.title{		
	padding-top:20px;
	color:rgba(43, 67, 164, 1);	
	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(43.00000123679638, 67.00000360608101, 164.00000542402267, 1);	
	margin-bottom:20px;
}
.SubTitle{ 	
	font-size:calc(1.2rem + 0.8vw);
	letter-spacing:0;
	line-height:2px;
	
}
.dividerBar{
	margin:auto;
	background-color:rgba(43.00000123679638, 67.00000360608101, 164.00000542402267, 1);
	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);	
}

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

.feedback_details .column1, .feedback_details .column2 img{
	max-width:80%;
	padding:20px;
}

.discovery_context{
	display:flex;
	justify-content:left;
}

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

.step_divider{
	background: rgba(96, 96, 96, 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);
}

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

.step_divider{
	background: rgba(96, 96, 96, 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%;
}

.initial_samples, .pen_vs_hand{
	display:flex;
	width:100%;
	flex-direction:row;	
	justify-content: center;
	align-items:center;
	text-align:center;
	
	gap: 20%;
}

.pen_vs_hand{
	padding-right:10%;
}

.pen_vs_hand .img_col1, .pen_vs_hand .img_col2
{	
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	color: rgba(61, 133, 243, 255);	
	font-size:calc(0.8rem + 0.4vw);
	text-align: center;
}

.initial_samples .img_col1, .initial_samples .img_col2,
{	
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	color: rgba(96, 96, 96, 255);	
	font-size:calc(0.3rem + 0.6vw);
	text-align: center;
}

.initial_samples .img_col1 img, .initial_samples .img_col2 img{	
	width:80%;
}

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

.prog_description_images {
	display:flex;
	width:100%;
	flex-direction:column;
	background:#cfdffb;
	padding-top:40px;
	padding-bottom:40px;
}

.prog_description_images .row1{
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
	margin:auto;
}
.prog_description_images .row2{
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
	margin:auto;
	flex-direction:row;
}
.prog_description_images .row2 .img_col1, .prog_description_images .row2 .img_col2{
	display:flex;
	justify-content:center;
	align-items:center;
}

.prog_description_images .row1 img{
	width:50%;		
}
.prog_description_images .row2 img{
	width:75%;	
}


/* 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;
  }
  
  .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(61,133, 243, .9), rgba(36,78, 142, .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%;*/
	}
	

	.initial_samples, .pen_vs_hand{
		display:flex;
		width:100%;
		flex-direction:column;			
	}
	
	.pen_vs_hand .img_col1{
		padding-bottom:20px;
	}
	
	.pen_vs_hand img{
		width:50%;
	}
	
	.prog_description_images .row1 img{
		width:75%;
	}

	.prog_description_images .row2{
		display:flex;
		width:100%;
		justify-content:center;
		align-items:center;
		margin:auto;
		flex-direction:column;
	}
	
	.constraint_details{
		display:flex;
		flex-direction:column;
	}


	.steps{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items:center;
		text-align:center;		
		color: rgba(61, 133, 243, 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(61, 133, 243, 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:cal(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;
	}
}

.footer {
  background-image: linear-gradient(rgba(61,133, 243, .9), rgba(36,78, 142, .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);	
}

@media (max-width: 350px) {
	.header .col1 h1{		
		font-size: calc(2.5rem + 2vw);/* 3.5vmax;*/		
	}
	
	.user_story_images .img_row2 .img_col2 img{
		width:90%;
		margin:auto;		
	}
	
	.discovery .col2 img,
	.discovery .col1 img,
	.user_stories img,
	.user_stories .img_col2 img{
		width:90%;
		margin:auto;		
	}

	.discovery h1,
	.prototype h1,
	.reflection h1{
		font-size: calc(2.5rem + 2vw);/* 3.5vmax;*/
	}
	
	.comments .col1 p{
		padding-right:0px;
	}
	
	.reflection {
		margin:0px;
	}
}

/* =======================================================
*
* 	goto top Style 
*
* ======================================================= */
/*.gototop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.gototop.active {
  opacity: 1;
  visibility: visible;
}
.gototop a {
  width: 50px;
  height: 50px;
  display: table;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.gototop a i {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.gototop a:hover, .gototop a:active, .gototop a:focus {
  text-decoration: none;
  outline: none;
}*/
#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 */
}

/*
- Middle main title
- full justification text
- 2 column split
- bullet list (col1)
- paragraph col1
- title left justified column 1
- figure text (col2)
- img col 1
- img col 2
- centered image
- numberd list (col1, full just)
- full just image
- image demo centered
- image demo 2 col
- headline 2 col


*/