/*-----------------------------------------------------------------------------------

	Theme Name: Canvas
	Theme URI: http://themes.semicolonweb.com/html/canvas
	Description: The Multi-Purpose Template
	Author: SemiColonWeb
	Author URI: http://themeforest.net/user/semicolonweb
	Version: 5.0.3

-----------------------------------------------------------------------------------*/
/* 1. Base styles for the head-grid */
/* .head-grid {
	position: fixed;       
	width: 100%;
	transition: transform 0.3s ease, opacity 0.3s ease;
	z-index: 1000;
  } */
  
  /* 2. When body gets a “scrolled” class, hide it */
  /* body.scrolled .head-grid {
	display: none;
  } */

#gotoTop p {
    font-family: "Expletus Sans", sans-serif;
	font-weight: 800;
	padding: 2px 0 20px 0;
	text-align: center;
}
/* <------Home page colors-------> */

.head-grid{
	position: absolute;
	border-bottom: solid 1px white;
	height: 100px;
	width: 100%;
}


.entry > .entry-title > h1{
	font-family: "Monoton", sans-serif;
	font-weight: 400;
	font-style: normal;
 	font-size: 60px;
 	margin:0px;
}

#posts > .entry > .entry-content {
	margin-top:0px;
}

.widget {
	border-bottom: 20px;
}
   
#footer > #copyrights > a{
	background-color: black;

}

/* <-------------------------------Cases colors-------------------------------> */


/* <---------JP colors---------> */
#jpmorgan {
	transition: background-color 1s ease;
  }
  
  #jpmorgan:hover {
	background-color: #2461BF;
	color: white; 
  }
  
  #jpmorgan:hover a {
	color: white; 
  }

.jp-color-hue{
	background-color: #2461BF !important;
}

.jp-color-bg{
	background-color: rgb(4, 15, 27) !important;
}



/* <---------TA colors---------> */
#trans {
	transition: background-color 1s ease;
}

#trans:hover {
	background-color: #b31b0d;
	color: white;
}

#trans:hover a {
	color: white;
}
.trans-color-hue{
	background-color: #ce1100 !important;
}
.trans-color{
	background-color: #9e0d00 !important;
}

.trans-color-dark{
	background-color: #1d1313;
}


/* <---------MAD colors---------> */
  #mad {
	transition: background-color 1s ease;
  }
  
  #mad:hover {
	background-color: #221c45;
	color: white; /* Optional: change text color for readability */
  }
  
  #mad:hover a {
	color: white; /* Optional: ensure links remain visible */
  }

  .mad-color-hue{
	background-color: #5036ea !important;
}

.mad-color{
	background-color: #251b61 !important;
}

.mad-color-dark{
	background-color: #17131d;
}
 
/* <---------Madison colors---------> */
  #maes{
	  transition: background-color 1s ease;
  }

  #maes:hover {
	background-color: #ff653d;
	color: white;
  }

  #maes:hover a {
	color: white;
  }

/* <---------Ricoh colors---------> */
  #ricoh{
	  transition: background-color 1s ease;
  }

  #ricoh:hover {
	background-color: #da1e49;
	color: white;
  }

  #ricoh:hover a {
	color: white;
  }

/* <-------------------------------Case study page-------------------------------> */

  .case-section .heading-block ~ p:not(.lead) {
	 font-size: 1.3rem; 
	 line-height:2rem;
	}

.case-section {
	font-size: 1.3rem; 
	line-height:2rem;
	font-weight: lighter;
}

.case-section .heading-block h3 {
	font-size: 2rem; 
	line-height:3rem;
	margin-bottom: 0.8rem;
}


.case-section h3 {
	font-size: 1.6rem; 
	line-height:2.6rem;
	margin-bottom: 0.8rem;
}


.case-section ol{
	padding-left: 6%;
}

.case-section ul {
	padding-left: 6%;
}


.case-section li {
	padding-bottom: 2%;
}

.highlight h3 {
    font-size: 1.4rem;
    line-height: 2rem;  
}

.highlight p {
    font-size: 1rem;
    line-height: 1.6rem !important;
}

.highlight .divider{
	color: rgb(0 0 0 / 55%);
	margin: 0px 0px 8px 0px;
}

.highlight .divider.divider-center.divider-short:before {
	border-top-color: rgb(0 0 0 / 77%) !important;
}

.highlight .divider {
	color: rgb(0 0 0 / 77%) !important;
}


.highlight .divider:after,
.highlight .divider.divider-center:before,
.highlight .divider.divider-center.divider-short:before { border-top-color: rgb(0 0 0 / 77%) !important; 
}


.highlight .divider:after,
.highlight .divider.divider-center:before,
.highlight .divider.divider-center.divider-short:before {
	top: 14px;
}

/* Base highlight: hidden by default, not fixed */
.highlight {
	/* No 'absolute' or 'visibility' changes here. */
	position: absolute; /* or 'relative' if you prefer for base state */
	top: 80px;
	right: 80px;
	width: 22%;
  
	/* Start fully transparent & non-clickable */
	opacity: 0;
	pointer-events: none;
  
	/* Fade opacity in/out over 300ms */
	transition: opacity 0.3s ease;
  
	/* Basic styling */
	padding: 34px 22px 22px 22px !important;
	border-radius: 0px;
	font-size: 1rem;
	text-align: left;
  }

  .highlight ol {
	line-height: 1.6rem;
  }    
  /* Fixed & pinned at top-right of the viewport */
  .fixed-highlight {
	position: fixed;
	top: 80px;
	right: 100px;
	z-index: 999;
  }
  
  /* Visible state: fade from opacity 0 → 1 and allow clicks */
  .show {
	opacity: 1;
	pointer-events: auto;
  }

.highlight .button.button-border:not(.button-light) {
	border-color: rgb(255 255 255) !important;
	color: rgb(255 255 255) !important;
	margin: 0;
}

.highlight .button.button-border {
	border: 1px solid #444;
}

.highlight .button.button-rounded {
	border-radius: 1px;
}
  
  /*
	Responsive Override:
	On screens <= 991px, remove fixed positioning so highlight
	flows normally and won't overlap content.
  */
  @media (max-width: 991px) {
	.fixed-highlight {
	  position: static;
	  top: 80px;
	  right: 80px;
		width: auto;
	  margin: 20px 0;
	}
  }
	  
.case-end{
	padding: 40px 0 48px 0;
	background-color: white;
	color: black;
}

.case-end .heading-block{
    margin-bottom:0px !important;
}


.case-end .heading-block h1{
   color: black !important;
   font-weight: 800;
}

.case-end .heading-block span{
   color: black !important;
   line-height: 1.4;
   font-size: 1.2rem;
}



.case-end .heading-block{ 
	text-shadow:none !important; 
}

  
  

  /* <------TA-------> */

  .entry > .entry-title > h2{
	padding-bottom: 12px;
}


.entry .heading-block:after {
	content: '';
	display: block;
	margin-top: 18px;
	width: 40px;
	border-top: 4px solid white;
}

.entry > .heading-block {
	margin-bottom: 30px;
}

.entry .entry-content ol {
	padding-left:15px;
}

.entry .entry-content li {
	padding-bottom:6px;
}
.entry .entry-content a {
	text-decoration: underline !important;
	color: #54FFFF;
}

#statement > .entry-image blockquote{
	border-left: none;
}

#intro .post-masonry-full .entry{
	border-color: rgb(255, 255, 255);
}

#statement .feature-box.fbox-plain .fbox-icon i{
	border: none !important;
	background-color: transparent !important;
	color: #ffffff;
	border-radius: 0;
}

#statement .feature-box{
	padding: 0 0 20px 120px;
}

#statement .entry-title p {
 	color: white;
}

#statement .feature-box .fbox-icon h1{
	font-size: 40px;
	font-weight: bold;
	line-height: normal;
}

#main-browser{
	margin-top: -5%;
	border-bottom: solid 1px white; 
	width: 100%;
}

#main-browser .col_full{
	margin-bottom: 0px;
}

#main-browser .col_full img.aligncenter{
	margin-bottom: 0;
}

/* <-------------------------------About me-------------------------------> */


#Profile {
	position: relative;
	/* min-width: 405px; */
	min-height: 850px;
	overflow: hidden; /* Contain the overlay */
	background: url('assets/images/Profile1.png') no-repeat center center;
	background-size: cover;
  }

  @media (max-width: 991px) {
	#Profile {
		min-height: 450px;

	  }
	}

  
  /* Ensure all inner content stays above the hover overlay */
  #Profile > * {
	position: relative;
	z-index: 2;
  }
  
  /* New: Position content in .entry-image at the bottom of #Profile */
  #Profile .entry-image {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	/* Adjust padding/margins as needed */
	padding: 20px;
	box-sizing: border-box;
  }
  #Profile .entry-image a.button {
	display: inline-block;
	width: auto;
	border-radius: 0 !important;
  }
.diamond img{
	margin-bottom: 35px;
}

.dark .modal-content{ 
	border-radius: 0;
	border: white 2px solid !important;
 }

.modal-footer > .btn-primary{
	color:black;
	background-color: rgb(84 255 255 / 75%);
    border-color:cadetblue;
	border-radius: 0 !important;

}

.modal-footer > .btn-primary:not(:disabled):not(.disabled):active{
	color:black;
	background-color: rgb(84 255 255 / 75%);
    border-color:cadetblue;
	border-radius: 0 !important;

}


.modal-footer > .btn:hover{
	color: rgba(0, 0, 0, 0.775) !important;
}


.modal-footer > .btn-secondary{
	border-radius: 0 !important;

}