@charset "UTF-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	
}
.navbar-toggler-icon{
	color: #F2EADD;
}	
.navbar-toggler-icon-dark{
	color: #2D1717;
}	
.navbar-nav .nav-link:hover{
	color: #F2EADD;
	opacity: 0.7;
	transition: color 0.3s ease;
}	

.nav_bar-padding{
	padding-left: 65%;
	background-color: transparent;
}	

.navbar-brand{
	padding-left: 30%;
	
}
.nav-link{
  color: #F2EADD;
}

.nav-link active{
  color: #F2EADD;
}
body{
  background-color: #2D1717;
	color: #F2EADD;
}
.col-sm-3 {
  padding-bottom: 1%;
}
.col-4{
  align-content:center;
  max-width: 100%;
  height: auto;
}
#name{
  max-width: 50%;
  height: auto;
}





/* ---------- Project section + header ---------- */
.project-section {
  width: 100%;
  overflow: visible; /* allow expanding to push content down */
  transition: padding-bottom 0.35s ease;
  margin-bottom: 0.001rem;
}

/* Make the header accessible and interactive */
.project-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.project-header:focus {
  outline: 3px solid rgba(100, 100, 255, 0.25); /* visible focus */
  outline-offset: 6px;
}

.project-title {
  color: #F2EADD;	
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  transition: transform 0.35s ease, color 0.25s ease;
  display: inline-block;
}

/* little chevron rotation */
.chev {
  font-size: 1.25rem;
  transition: transform 0.35s ease;
  color: #666;
}

/* ---------- Gallery container (collapsed by default) ---------- */
.image-gallery {
  max-height: 0;
  opacity: 0;
  overflow: hidden; /* hide until expanded */
  transition: max-height 0.5s cubic-bezier(.2,.9,.2,1), opacity 0.35s ease;
  margin-top: 1rem;
}

/* When parent is hovered OR focused-within, reveal gallery (desktop keyboard support) */
.project-section:hover .image-gallery,
.project-section:focus-within .image-gallery {
  max-height: 760px; /* must be >= image height + padding (here images are 640px tall) */
  opacity: 1;
}

/* also give visual feedback when hovered */
.project-section:hover .project-title,
.project-section:focus-within .project-title {
  transform: translateY(-6px);
}

.project-section:hover .chev,
.project-section:focus-within .chev {
  transform: rotate(180deg);
}

/* ---------- Horizontal image track ---------- */
.image-track {
  display: flex;
  gap: 1rem;
  align-items: start;
  padding-bottom: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* scrollbar styling (WebKit) */
.image-track::-webkit-scrollbar {
  height: 10px;
}
.image-track::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(0,0,0,0.15);
}

/* ---------- Individual images (fixed size) ---------- */
/* You requested 220px x 640px - width x height */
.image-track img {
  width: 220px;
  height: 640px;
  object-fit: cover;
  flex: 0 0 auto; /* prevents shrinking */
  border-radius: 8px;
  scroll-snap-align: start;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.25s ease;
}

/* hover effect on each image */
.image-track img:hover,
.image-track img:focus {
  transform: scale(1.03);
}

/* smaller screens: allow the images to scale down a bit */
@media (max-width: 800px) {
  .image-track img {
    height: 420px; /* reduce height on small screens */
    width: 145px;  /* keep same aspect ratio-ish */
  }
  .image-gallery { max-height: 520px; }
}

/* ensure hr doesn't overlap */
.project-section hr {
  margin-top: 1rem;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
}


.gallery-link {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 220px;
  height: 640px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* Normal image (base state) */
.gallery-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  display: block;
}

/* Pseudo-element for the hover image */
.gallery-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--hover-bg, none); /* uses CSS variable set from JS or inline style */
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: scale(1);
  pointer-events: none; /* allow clicks to pass through to the <a> */
}

/* On hover — fade in hover image */
.gallery-link:hover::after,
.gallery-link:focus::after {
  opacity: 1;
  transform: scale(1.02);
}

/* Dynamically set the background-image from data-hover */
.gallery-link[data-hover]::after {
  background-image: attr(data-hover url);
}



.project-page{
	width: 100%;
  height: auto;
 align-content: center;
	padding-left: 5%;
	}


/* ---------- Hover image swap ---------- */
.hover-img {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Both images stack on top of each other */
.hover-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.35s ease;
}

/* Hover image hidden by default */
.hover-img-layer {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
/* On hover: fade hover image in */
.hover-img:hover .hover-img-layer {
  opacity: 1;
}

/* On hover: fade base image out */
.hover-img:hover .base-img {
  opacity: 0;
}

/* Optional: cursor hint */
.hover-img {
  cursor: pointer;
}

/* ---------- Project canvas ---------- */
.project-canvas {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 8rem auto 0;
}

.project-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Video hotspot ---------- */
.video-hotspot {
  position: absolute;
  width: 4%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* example position */
.hotspot-BBBAD-5 {
  top: 20%;
  left: 47%;
}
.hotspot-BBBAD-2 {
  top: 45%;
  left: 23%;
}
.hotspot-BBBAD-3 {
  top: 75%;
  left: 24%;
}
.hotspot-BBBAD-4 {
  top: 67%;
  left: 23%;
}

.hotspot-BBBGD-1 {
  top: 78.5%;
  left: 20.5%;
}
.hotspot-BBBGD-2 {
  top: 82%;
  right: 23%;
}
.hotspot-BBBGD-3 {
  bottom: 7.7%;
  right: 23%;
}

.hotspot-BBBADD-1 {
  top: 18.8%;
  left: 47%;
}
.hotspot-BBBADD-2 {
  top: 37%;
  left: 23%;
}
.hotspot-BBBADD-3 {
  top: 43%;
  right: 25.8%;
}
.hotspot-BBBADD-4 {
  top: 53%;
  right: 25.8%;
}
.hotspot-BBBADD-5 {
  top: 68%;
 left: 16.5%;
}
.hotspot-BBBADD-6 {
  top: 68%;
  left: 41.5%;
}
.hotspot-BBBADD-7 {
  bottom: 15%;
  right: 25%;
}
.hotspot-BBBADD-8 {
  bottom: 6.5%;
  right: 25%;
}

.hotspot-Retro-1 {
  bottom: 8.5%;
  left: 35%;
}
.hotspot-RetroAD-1 {
  top: 60.3%;
  right: 29.4%;
}
.hotspot-Rep-1{
  bottom: 10%;
  left: 32%;
}

/* hover indicator */
.video-hotspot::after {
  content: "\25B6";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: clamp(16px, 1.6vw, 26px);
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.video-hotspot:hover::after {
  opacity: 1;
  transform: scale(1.1);
}

/* ---------- Video modal ---------- */
.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.video-modal.active {
  display: block;
}

.video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.video-container {
  position: relative;
  width: min(90vw, 1000px);
  aspect-ratio: 16 / 9;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background: black;
  border-radius: 8px;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* close button */
.video-close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
}



.arrow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
   /* border color matches your branding */
  background: transparent;
  color: #F2EADD; /* arrow color */
  font-size: 1.25rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.arrow-button .arrow {
  display: inline-block;
  margin-left: 83px;
  transition: transform 0.3s ease;
}

/* Hover effect */
.arrow-button:hover {
  
  color: #000; /* arrow / text color changes on hover */
}

.overlay-button-BBBAD {
  position: absolute;
  bottom: 1.7%;   /* distance from bottom of image */
  left: 24%;    /* distance from right edge of image */
}

.overlay-button-BBBGD {
  position: absolute;
  bottom: 4.7%;   /* distance from bottom of image */
  right: 45%;    /* distance from right edge of image */
}

.overlay-button-BBBADD {
  position: absolute;
  bottom: 2.5%;   /* distance from bottom of image */
  right: 54%;    /* distance from right edge of image */
}

.overlay-button-RetroGD {
  position: absolute;
color: #2D1717;	
  bottom: 3%;   /* distance from bottom of image */
  right: 25%;    /* distance from right edge of image */
}
.overlay-button-RetroAD {
  position: absolute;
color: #2D1717;	
  bottom: 2.2%;   /* distance from bottom of image */
  right: 28%;    /* distance from right edge of image */
}
.overlay-button-Rep {
  position: absolute;
color: #2D1717;	
  bottom: 2.2%;   /* distance from bottom of image */
  right: 31%;    /* distance from right edge of image */
}
.overlay-button-Cab {
  position: absolute;	
  bottom: 2.2%;   /* distance from bottom of image */
  right: 45.2%;    /* distance from right edge of image */
}