@charset "utf-8";
/* ========================================================
   CSS DOCUMENT
======================================================== */

/* ========================================================
	TYPOGRAPHY NOTES
======================================================== */
	/*
	Headline Font:
		font-family: "Anton", sans-serif;

	Paragraph Font:
		font-family: "trade-gothic-next", sans-serif;
	*/



/* ========================================================
	FONT REFERENCE
======================================================== */

	/* Anton: */
	/*
	Regular:
	.anton-regular {
		font-family: "Anton", sans-serif;
		font-weight: 400;
		font-style: normal;
	}*/

	/* Trade Gothic: */
	/*
	Regular:
	.trade-gothic-regular {
		font-family: "trade-gothic-next", sans-serif;
		font-weight: 400;
		font-style: normal;
	}*/

	/*
	Italic:
	.trade-gothic-italic {
		font-family: "trade-gothic-next", sans-serif;
		font-weight: 400;
		font-style: italic;
	}
	.trade-gothic-bold-italic {
		font-family: "trade-gothic-next", sans-serif;
		font-weight: 700;
		font-style: italic;
	}
	.trade-gothic-condensed-italic {
		font-family: "trade-gothic-next-condensed", sans-serif;
		font-weight: 400;
		font-style: italic;
	}
	.trade-gothic-bold-condensed-italic {
		font-family: "trade-gothic-next-condensed", sans-serif;
		font-weight: 700;
		font-style: italic;
	}
	.trade-gothic-heavy-condensed-italic {
		font-family: trade-gothic-next-condensed, sans-serif;
		font-weight: 800;
		font-style: italic;
	}*/

	/*
	Regular Bold:
	.trade-gothic-bold {
		font-family: "trade-gothic-next", sans-serif;
		font-weight: 700;
		font-style: normal;
	}*/

	/*
	Condensed:
	.trade-gothic-condensed {
		font-family: "trade-gothic-next-condensed", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
	.trade-gothic-bold-condensed {
		font-family: "trade-gothic-next-condensed", sans-serif;
		font-weight: 700;
		font-style: normal;
	}
	.trade-gothic-heavy-condensed {
		font-family: trade-gothic-next-condensed, sans-serif;
		font-weight: 800;
		font-style: normal;
	}*/

	/*
	Compressed:
	.trade-gothic-compressed {
		font-family: "trade-gothic-next-compressed", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
	.trade-gothic-bold-compressed {
		font-family: "trade-gothic-next-compressed", sans-serif;
		font-weight: 700;
		font-style: normal;
	}*/


/* ========================================================
	COLOR PALETTE
======================================================== */

	/*
	Black: #040402
	White: #FFFFFF
	Terra Cotta: #B66532
	Dark Brown: #773F27
	Cream: #FFF1D8
	Dark Teal: #263E3E
	Medium Teal: #569696
	Light Teal: #9EBAAF
	*/


/* ========================================================
	ROOT VARIABLES
======================================================== */

	:root {
		--black: #040402;
		--white: #FFFFFF;
		--terra-cotta: #B66532;
		--dark-brown: #773F27;
		--cream: #FFF1D8;
		--dark-teal: #263E3E;
		--medium-teal: #569696;
		--light-teal: #9EBAAF;
	}


/* ========================================================
	GLOBAL STYLES
======================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 60px; /* Adjust based on navbar height */
	margin: 0;
}


body {
	font-family: "trade-gothic-next", sans-serif;
	background-color: var(--black); /* Background color for main page */
	height: 100vh;
}

/* center an image - img is an inline element */
img { 
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}


/* ========================================================
	TYPOGRAPHY
======================================================== */

h1,h2, h3,h4,h5,h6 {
	font-family: "Anton", sans-serif;
	color: var(--terra-cotta);
}

p {
	font-family: "trade-gothic-next", sans-serif;
	color: var(--cream);
	line-height: 2;
}


/* ========================================================
	REUSABLE BUTTONS
======================================================== */

.custom-btn, .case-study-btn, #download_button {
	border: none;
	text-decoration: none;
	transition: all 0.3s ease;
}

/* Primary Button */
.custom-btn, #download_button {
	background-color: var(--terra-cotta);
	color: var(--cream);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 12px 32px;
	border-radius: 6px;
}

.custom-btn:hover, #download_button:hover {
	background-color: var(--dark-brown);
	color: var(--cream);
}

/* Portfolio Button */
.case-study-btn {
	background-color: #78AEB0;
	color: var(--cream);
	padding: 14px 22px;
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}

.case-study-btn:hover {
	background-color: #5f9597;
}

/* Accessibility */
.custom-btn:focus, .case-study-btn:focus, #download_button:focus {
	outline: 2px solid var(--cream);
	outline-offset: 2px;
}


/* ========================================================
	NAVBAR PAGE
======================================================== */

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: var(--dark-teal);
    padding-inline: 10px;
}

/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
    color: var(--cream);
}

/* Background and text colors for current page link and links on hover */
.navbar-custom .nav-link.active,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .dropdown-item:hover {
	background-color: var(--dark-teal);
	color: var(--terra-cotta);
}


/* Background and text colors for current page link and links on focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:focus {
    background-color: var(--medium-teal);
	color: var(--cream);
}

/* Navbar Brand */
.navbar-brand {
	background-image: url("../images/BrandLogoCream.png");
	background-repeat: no-repeat;
	background-size: 45px auto;
	background-position: left center;
	padding-left: 70px;
}

/* Hamburger */
.custom-toggler.navbar-toggler {
	border-color: var(--medium-teal);
	color: var(--cream);
}
.custom-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 	  stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  	color:#FFF1D8;
}


/* ========================================================
	HOME PAGE
======================================================== */

/* Home banner image css */
#home_banner {
	padding: 0;
	background: var(--black) url("../images/MountainBackdropForWeb150.jpg") no-repeat center center;
	background-size: cover;
	min-height: 783px;
	display: flex;
	justify-content: center; /* horizontal center */
	align-items: flex-start; /* moves content to top */
	padding-top: 100px;      /* space from top */
	padding-bottom: 20px;    /* space from bottom */
}

/* Home banner headline css */
#home_banner h1 {
	font-size: clamp(1.5rem, 4vw, 4rem);
	color: var(--terra-cotta);
	display: flex;
	justify-content: center;
	gap: 20px;
	line-height: 1;
	margin: 0;
}

#begin {
	font-size: clamp(3rem, 8vw, 8rem);
	color: var(--cream);
	line-height: 1;
	display: block;
}

/* Intro heading section css */
#intro h2 {
	font-family: trade-gothic-next-condensed, sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 3rem;
	color: var(--medium-teal);
	line-height: 60px;
}

/* Intro name section css */
#name {
	color: var(--light-teal);
	font-family: "anton";
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 100px;
	display: block;
	margin-top: 4px;
}

/* Intro paragraph section css */
#intro p {
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 2rem;
	color: var(--medium-teal);
	line-height: 130px;
}

/* Custom quotation marks css */
.quote1 {
	font-family: trade-gothic-next-condensed, sans-serif;
	font-weight: 800;
	font-style: italic;
	color: var(--light-teal);
}

/* Home paragraphs */
.home_paragraphs {
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 2.0;
}

/* About Button */
.custom-btn {
	background-color: var(--terra-cotta);
	border: none;
	color: var(--cream);
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.1rem;
	letter-spacing: 2px;
	padding: 12px 32px;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.custom-btn:hover {
	background-color: var(--dark-brown);
	color: var(--cream);
}


/* ========================================================
	ABOUT PAGE
======================================================== */

/* About banner image css */
#about_banner {
	padding: 0;
	background: var(--black) url("../images/AlyssaDesertRoad150.jpg") no-repeat center center;
	background-size: cover;
	height: 70vh;
}

/* About banner headline css */
#about_banner h1 {
	font-size: clamp(3rem, 8vw, 8rem);
	color: #FFF1D8;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	line-height: 1;   
	margin-left: 200;
	}

/* Custom spacing for who am I */
.title span {
  position: relative;
}

.title span:nth-child(1) {
  left: -40px;
}

.title span:nth-child(2) {
  left: 110px; /* move "AM" slightly right */
}

.title span:nth-child(3) {
  left: 120px;
}
.word-gap {
  margin-left: 90px; /* adjust this value */
}



/* About intro heading section css */
#intro_about p {
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 3rem;
	color: var(--light-teal);
	line-height: 60px;
	margin-top: 4.0rem;
	margin-bottom: 4.0rem;
	}

/* Custom quotation marks css */
.quote2 {
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 800;
	font-style: italic;
	color: var(--medium-teal);
}


/* ========================================================
	RESUME PAGE
======================================================== */

/* Resume banner image css */
#resume_banner {
	padding: 0;
	background: var(--black) url("../images/SahaleBackdrop150.jpg") no-repeat center center;
	background-size: cover;
	height: 70vh;
}

/* Resume banner headline css */
#resume_banner h1 {
	font-size: clamp(3rem, 8vw, 8rem);
	color: var(--cream);
	justify-content: center;
	line-height: 1;   
	margin: 0;
	text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
}


/* Large Main Text */
.contact-title {
	position: absolute;
	top: 40px;
	right: 70px;

	font-size: 10rem;
	line-height: 1.0;

	text-align: right;
	text-transform: uppercase;

	color: #F2E5CF;
	text-shadow: 2px 2px 20px var(--black);

	font-family: "Anton", sans-serif;
	letter-spacing: 5px;
}

#resume_banner h2 {
	font-size: clamp(1rem, 3vw, 3rem);
	color: var(--cream);
	justify-content: center;
	line-height: 1;   
	margin: 0;
	text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
}

/* Resume intro heading section css */
#intro_resume h2 {
	font-family: "anton", sans-serif;
	font-size: 4rem;
	color: var(--terra-cotta);
	line-height: 1.4;
	margin-top: 1.5rem;
}

/* Resume info container background color */
#resume_container {
	background-color: var(--dark-teal);
	border-top: 10px solid var(--light-teal);
	border-bottom: 10px solid var(--light-teal);
}

/* Resume intro heading section css */
#resume_container h3, h5 {
	color: var(--light-teal);
	}

#resume_container p {
	color: var(--light-teal);;
	}

/* Resume download button css */
#download_button {
	background-color: var(--terra-cotta);
	border: none;
	color: var(--cream);
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.1rem;
	letter-spacing: 2px;
	padding: 12px 32px;
	border-radius: 6px;
	transition: all 0.3s ease;
	}

#download_button:hover {
	background-color: var(--dark-brown);
	color: var(--cream);
	}

/* Resume objective section css */
.resume_section {
	line-height: 0.2;
	}

/* Resume section heading css */
.resume_section h4 {
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 800;
	font-style: normal;
	}
	
/* Resume location tag css */
.location {
	color: var(--cream);
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
	}

/* Resume city tag css */
.city {
	color: var(--cream);
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 700;
	font-style: italic;
	}

/* Resume date and extra info tag css */
.dateinfo {
	color: var(--cream);
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	}

/* Awards Section */

/* Resume awards section css */
#awards_section h4 {
	color: var(--cream);
	line-height: 0.2;
	}

/* Resume awards section blurb css */
#awards_section p {
	color: var(--cream);
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 400;
	font-style: italic;
	}

/* Resume location tag css */
.blurb {
	color: var(--cream);
	font-family: "trade-gothic-next", sans-serif;
	}

/* Resume skills img css */
#resume_skills {
	margin-left: 0;
	padding-left: 0;
	width: 80%;
	}

/* Resume software img css */
#resume_software {
	margin-right: 0;
	padding-right: 0;
	width: 80%;
	}


/* ========================================================
	PORTFOLIO PAGE
======================================================== */

/* Portfolio banner image css*/
#portfolio_banner {
	padding: 0;
	background: var(--black) url("../images/ShastaBackdrop150.jpg") no-repeat center center;
	background-size: cover;
	height: 70vh;
}

/* Portfolio banner headline css */
#portfolio_banner h1 {
	font-size: clamp(3rem, 8vw, 8rem);
	color: var(--cream);
	line-height: 1;
	margin: 0;
}

#portfolio_banner h2 {
	font-size: clamp(1rem, 3vw, 3rem);
	color: var(--cream);
	line-height: 1;
	margin: 0;
}

/* Portfolio Intro Heading */
.intro_portfolio {
	font-family: "Anton", sans-serif;
	font-size: 3rem;
	color: var(--terra-cotta);
	margin-top: 1rem;
}

.highlight-link {
	text-decoration: none;
	display: block;
	color: inherit;
}

/* Highlighted Works css */
.highlight-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.highlight-link:hover {
	color: var(--dark-brown);
	text-decoration: none;
}

/* Branding css */
.branding-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.branding-link:hover {
	color: var(--dark-brown);
	text-decoration: none;
}

/* Fine Art css */
.fineart-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.fineart-link:hover {
	color: var(--dark-brown);
	text-decoration: none;
}

/* Photography css */
.photography-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.photography-link:hover {
	color: var(--dark-brown);
	text-decoration: none;
}

/* Product Design css */
.productdesign-link{
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.productdesign-link:hover {
	color: var(--dark-brown);
	text-decoration: none;
}


/* =========================
	PORTFOLIO GRIDS
========================= */

/* Default 3-column grid */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	padding: 50px;
	background-color: var(--black);
}

/* Two-column grid */
.portfolio-grid-two {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	padding: 50px;
	background-color: var(--black);
}

/* Featured large card */
.portfolio-card-large {
	grid-column: span 2;
}

/* =========================
	PORTFOLIO CARDS
========================= */

.portfolio-card {
	background-color: var(--black);
	overflow: hidden;
	transition: transform 0.3s ease;
}

/* Hover animation */
.portfolio-card:hover {
	transform: translateY(-8px);
}

/* =========================
	CARD IMAGE
========================= */

/* Image Regular */
.card-image img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	display: block;
}

/* Image Extra Long */
.card-image-long img {
	width: 100%;
	aspect-ratio: 16 / 6;
	object-fit: cover;
	display: block;
}

/* Wider image for featured card */
.portfolio-card-large .card-image img {
	aspect-ratio: 16 / 4.9;
}

/* =========================
	CARD CONTENT
========================= */

.card-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 18px 10px 20px;
	gap: 20px;
}

/* =========================
	TEXT CONTENT
========================= */

.text-content h2 {
	color: var(--cream);
	font-size: clamp(1.5rem, 2vw, 2.5rem);
	margin: 0 0 12px;
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.text-content p {
	color: var(--terra-cotta);
	font-size: 1.2rem;
	margin: 0;
	line-height: 1.6;
}

/* =========================
	BUTTONS
========================= */

.case-study-btn {
	background-color: var(--medium-teal);
	color: var(--cream);
	text-decoration: none;
	padding: 14px 22px;
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.3s ease;
	border-radius: 4px;
}

.case-study-btn:hover {
	background-color: var(--medium-teal);
	color: var(--cream);
	text-decoration: none;
}

.case-study-btn:focus {
	outline: 2px solid var(--cream);
	outline-offset: 2px;
}


/* GRID */
.portfolio-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	padding: 50px;
	transition: transform 0.5s ease;
}

/* CARD */
.portfolio-card {
	cursor: pointer;
	transition: transform 0.3s ease;
}

.portfolio-card:hover {
	transform: translateY(-6px);
}

.portfolio-source {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 50px;
  min-height: 100%;
}


.portfolio-detail-panel {
  position: sticky;
  top: 80px; /* keeps it aligned under navbar */
  height: calc(100vh - 80px);
  overflow-y: auto;

  background: var(--black);
  border-left: 1px solid rgba(255,255,255,0.1);

  opacity: 0;
  transform: translateX(40px);
  transition: all 0.4s ease;
}

/* ACTIVE STATE */
.portfolio-wrapper.active .portfolio-detail-panel {
  opacity: 1;
  transform: translateX(0);
  padding: 40px;
}

/* TEXT */
.detail-title {
	font-size: 2rem;
	margin-bottom: 10px;
}

.detail-type {
	color: var(--terra-cotta);
	margin-bottom: 20px;
}

.detail-desc {
	line-height: 1.6;
}

/* CLOSE BUTTON */
.close-panel {
	background: none;
	border: none;
	color: var(--cream);
	font-size: 2rem;
	cursor: pointer;
	margin-bottom: 20px;
}

/* ========================================
	POP UP WINDOW FOR PORTFOLIO CARDS
======================================== */

/* ==========================
   MODAL
========================== */

.portfolio-modal {
	background-color: transparent;
	padding-top: 50px;
	padding-bottom: 50px;
}


.portfolio-modal-content{
	background-color: var(--dark-brown);
	padding: 2rem;
	border-radius:20px;
}

.modal-dialog{
	max-width: 1400px;
}

/* ==========================
   HEADER
========================== */

.project-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:2rem;
}

.project-title{
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	color: var(--cream);
	margin-bottom:0;
}

.project-category {
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.5rem;
	color: var(--terra-cotta);
	margin-bottom:0;
}

/* ==========================
   MAIN LAYOUT
========================== */

.project-content{
	display:grid;
	grid-template-columns:60% 40%;
	gap:2rem;
}

/* ==========================
   GALLERY
========================== */

.gallery-section{
	width:100%;
}

.gallery-main-image{
	width:100%;
	height:600px; /* CHANGE PER PROJECT IF NEEDED */
	object-fit:cover;
	border-radius:12px;
}

/* ==========================
   THUMBNAILS
========================== */

.thumbnail-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(80px,1fr));
	gap:12px;
	margin-top:12px;
}

.thumbnail-image{
	width:100%;
	aspect-ratio: 1.5 / 1;
	object-fit:cover;
	cursor:pointer;
	border:2px solid transparent;
	border-radius:8px;
	transition:.3s;
}

.thumbnail-image:hover{
	transform:scale(1.03);
}

.active-thumb{
	border-color:black;
}

.custom-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent;
    text-align: center;
	padding: 12px 16px;
	margin-top: 10px;
	border-radius: 8px;
}

.custom-caption h4 {
    margin: 0;
    font-family: "trade-gothic-next", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--cream);
    font-size: 0.9rem;
}

.custom-caption p {
    margin: 0;
    font-family: "trade-gothic-next", sans-serif;
	font-weight: 200;
	font-style: normal;
	color: var(--cream);
    font-size: 0.8rem;
}

.custom-caption-black h4 {
    margin: 0;
    font-family: "trade-gothic-next", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--black);
    font-size: 0.9rem;
}

.custom-caption-black p {
    margin: 0;
    font-family: "trade-gothic-next", sans-serif;
	font-weight: 200;
	font-style: normal;
	color: var(--black);
    font-size: 0.8rem;
}

/* ==========================
   DETAILS
========================== */

.project-details{
	padding-left:1rem;
}

.project-details h4{
	margin-top:1rem;
}

/* ==========================
   DESCRIPTION
========================== */

/* Info container background color */
.modalinfo_container {
	background-color: inherit;
	border-top: 5px solid var(--terra-cotta);
	border-bottom: 5px solid var(--terra-cotta);
}

/* Info heading section css */
.modalinfo_container h5 {
	color: var(--terra-cotta);
	}

.modalinfo_container {
	color: var(--cream);
	}


.project-description{
	width: 100%;
	margin-top:2rem;
	padding-top:2rem;
	border-top:1px solid #ddd;
}

.slogan {
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 3rem;
	color: var(--light-teal);
}


.link_h {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
	color: var(--light-teal);
}


/* ==========================
   POPUP BUTTONS
========================== */

/* CLOSE */
.modal-close{
	position:absolute;
	top:25px;
	right:25px;
	z-index:100;
}

/* CASE STUDY */
.case-study-btn-modal {
	background-color: var(--medium-teal);
	color: var(--cream);
	text-decoration: none;
	padding: 14px 22px;
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.3s ease;
	border-radius: 4px;
}

.case-study-btn-modal:hover {
	background-color: var(--light-teal);
	color: var(--cream);
	text-decoration: none;
}

.case-study-btn-modal:focus {
	outline: 2px solid var(--cream);
	outline-offset: 2px;
}

.popuplink_button {
	background-color: var(--dark-brown);
	border: 6px solid var(--cream);
	color: var(--cream);
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.1rem;
	letter-spacing: 2px;
	padding: 12px 32px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
}

.popuplink_button:hover {
	background-color: var(--dark-brown);
	border: 6px solid var(--terra-cotta);
	color: var(--terra-cotta);
	text-decoration: none;
}


/* ========================================
	INTERACTIVE CARDS
======================================== */

.interactive-card {
	cursor: pointer;
}

.interactive-card.active-card {
	transform: translateY(-10px);
}

/* ========================================
	TYPOGRAPHY
======================================== */

.feature-type {

	color: var(--terra-cotta);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.feature-title {

	color: var(--cream);
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1;
	margin-bottom: 30px;
	text-shadow:
		0px 4px 18px rgba(0,0,0,0.35);
}

.feature-description {
	color: var(--cream);
	max-width: 850px;
	line-height: 2;
	margin-bottom: 50px;	
}


/* =========================
   GALLERY
========================= */

.feature-gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.gallery-image {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

.gallery-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 12px;
}

/* =========================
   CLOSE BUTTON
========================= */

.close-panel {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 2rem;
  cursor: pointer;
  margin-bottom: 20px;
}

/* =========================
   MOBILE → FULL SCREEN MODAL
========================= */

@media (max-width: 768px) {

  .portfolio-wrapper {
    flex-direction: column;
  }

  .portfolio-source {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .portfolio-detail-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100% !important;
    z-index: 9999;
    transform: translateY(100%);
    opacity: 1;
    padding: 30px;
    overflow-y: auto;
  }

  .portfolio-wrapper.active .portfolio-detail-panel {
    transform: translateY(0);
  }
}

/* ========================================================
	HIGHLIGHT PAGE
======================================================== */

.two-column-layout {
	
}
	
/* In the spotlight css */
.portfolio-link{
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.portfolio-link:hover {
	color: var(--dark-brown);
	text-decoration: none;
}


/* ========================================================
	BRANDING PAGE
======================================================== */

.two-column-layout {
	
}
	
/* In the spotlight css */
.portfolio-link{
	color: var(--light-teal);
	font: inherit;
	text-decoration: none;
}

/* In the spotlight css */
.portfolio-link h1 {
	color: var(--light-teal);
	font: inherit;
	text-decoration: none;
	font-size: clamp(1.5rem, 4vw, 4rem);
}

.category-name h2 {
	color: var(--terra-cotta);
	font-size: clamp(1.5rem, 2.8vw, 2.8rem);
}

.section-heading {
	padding-left: 80px;
	padding-right: 80px;
}

/* Single Column Grid */
.portfolio-grid-single {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	padding: 50px;
	background-color: #000;
}

/* Card Styling */
.portfolio-card {
	background-color: #000;
	overflow: hidden;
	font-family: Arial, sans-serif;
	transition: transform 0.3s ease;
}

.portfolio-card:hover {
	transform: translateY(-8px);
}

/* Image Extra Long */
.card-image-extra-long img {
	width: 100%;
	aspect-ratio: 16 / 6;
	object-fit: cover;
	display: block;
}

/* Image Standard */
.card-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/* Bottom Content */
.card-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 24px 10px 30px;
}

/* Text */
.text-content h2 {
	color: #FFF1D8;
	font-size: clamp(1.5rem, 2vw, 2.5rem);
	margin: 0 0 12px;
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.text-content p {
	color: #C86E2E;
	font-size: 1.2rem;
	margin: 0;
}

/* Button */
.case-study-btn {
	background-color: #78AEB0;
	color: #FFF1D8;
	text-decoration: none;
	padding: 14px 22px;
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.3s ease;
}

.case-study-btn:hover {
	background-color: #5f9597;
}


/* Two-column grid */
.portfolio-grid-two-column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	padding: 50px;
	background-color: var(--black);

	max-width: 1400px;
	margin: 0 auto;
}


/* ========================================================
	BRANDING PAGE
======================================================== */
.gallery h1 {
	color: var(--cream);
	font-size: clamp(1.5rem, 4vw, 4rem);
}


/* ========================================================
	FINE ART PAGE
======================================================== */

/* =========================
   Responsive Gallery
========================= */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

/* ========================================================
	PHOTOGRAPHY PAGE
======================================================== */
/* Default 4-column grid */
.portfolio-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: 50px;
	background-color: var(--black);
}
/* Image Extra Long */
.card-image-extra-long img {
	width: 100%;
	aspect-ratio: 16 / 4;
	object-fit: cover;
	display: block;
}

/* CSS for Card Links */
.portfolio-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.portfolio-card-link:hover {
	text-decoration: none;
	color: inherit;
}

.gallery-title {
	text-decoration: none;
	color: inherit;
}

/* ========================================================
	PHOTOGRAPHY SUB-PAGES
======================================================== */

/* =========================
   Outdoor Sport
========================= */

/* =========================
   Landscape
========================= */

/* =========================
   Portrait
========================= */

/* Portrait banner image css*/
#portrait_banner {
	padding: 0;
	background: var(--black) url("../images/ShastaBackdrop150.jpg") no-repeat center center;
	background-size: cover;
	height: 70vh;
}

/* Portfolio banner headline css */
#portrait_banner h1 {
	font-size: clamp(3rem, 8vw, 8rem);
	color: var(--cream);
	line-height: 1;
	margin: 0;
}

#portrait_banner h2 {
	font-size: clamp(1rem, 3vw, 3rem);
	color: var(--cream);
	line-height: 1;
	margin: 0;
}

/* =========================
   Animal
========================= */

/* ========================================================
	FINE ART PAGE
======================================================== */

.art_gallery-container {
    padding-left: 40px;
    padding-right: 40px;
}

/* ========================================================
	CONTACT PAGE
======================================================== */

/* Contact banner image css */
#contact_banner {
	padding: 0;
	background: var(--black) url("../images/AlyssaCanyonbackdrop300.jpg") no-repeat center center;
	background-size: cover;
	height: 70vh;
}

/* Contact banner headline css */
.contact-banner {
	position: relative;
	width: 100%;
	height: 700px;
	background-image: url("../images/AlyssaCanyonbackdrop300.jpg");
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Large Main Text */
.contact-title {
	position: absolute;
	top: 40px;
	right: 70px;

	font-size: 10rem;
	line-height: 1.0;

	text-align: right;
	text-transform: uppercase;

	color: #F2E5CF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);

	font-family: "Anton", sans-serif;
	letter-spacing: 5px;
}

/* Vertical Text Container */
.side-text {
	position: absolute;
	top: 45px;
	right: 15px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

/* Vertical Text */
.side-text span {
	writing-mode: vertical-rl;
	text-orientation: mixed;

	font-family: "Anton", sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 1.5px;

	text-transform: uppercase;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

/* Black Text */
.name {
	color: var(--black);
}

/* Blue Text */
.role {
	color: #316767;
}
/* About intro heading section css */
#contact h1 {
	font-family: "Anton", sans-serif;
	font-size: 3rem;
	color: var(--terra-cotta);
	margin-top: 1rem;
}

#contact p {
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-style: normal;
	font-size: 2rem;
	color: var(--cream);
	line-height: 60px;
	margin-top: 3.0rem;
	margin-bottom: 3.0rem;
	}

/* Custom quotation marks css */
.quote2 {
	font-family: "trade-gothic-next-condensed", sans-serif;
	font-weight: 800;
	font-style: italic;
	color: var(--medium-teal);
}

/* ========================================================
	CASE STUDY PAGES
======================================================== */

/* =========================
   Woofwise Case Study
========================= */

/* About banner image css */
#cs_banner {
	padding: 0;
	background: var(--black) url("../images/ShastaBackdrop150.jpg") no-repeat center center;
	background-size: cover;
	height: 70vh;
}

/* About banner headline css */
#cs_banner h1 {
	font-size: clamp(3rem, 8vw, 8rem);
	color: var(--cream);
	justify-content: center;
	line-height: 1;   
	margin: 0;
	}

/* Info container background color */
.cs_container {
	background-color: var(--dark-teal);
	border-top: 10px solid var(--light-teal);
	border-bottom: 10px solid var(--light-teal);
}

/* Info heading section css */
.cs_container h3, h5 {
	color: var(--light-teal);
	}

.cs_container p {
	color: var(--light-teal);;
	}

/* Info container background color */
.dsc_container {
	background-color: var(--dark-teal);
	border-top: 10px solid var(--light-teal);
	border-bottom: 10px solid var(--light-teal);
}

/* Info section css */
.dsc_container h3, h5 {
	color: var(--light-teal);
	text-align: center;
	}

/* Project description container */
.dsc_container .row > .col-md-8 > p {
	color: var(--light-teal);
	text-align: left;
	}

.cs_text_center p {
	color: var(--light-teal);
	text-align: center;
}

/* Main Image */
.cs_main_image {
    display: block;
    margin: 0 auto;
}

/* Timeline + software */
#time_soft_2column p,
#time_soft_2column h5 {
	color: var(--light-teal);
    text-align: center;
}

.solution h1{
	 text-align: center;
}

/* Link button css */
#link_button {
	background-color: var(--black);
	border: 6px solid var(--medium-teal);
	color: var(--medium-teal);
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.1rem;
	letter-spacing: 2px;
	padding: 12px 32px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	}

#link_button:hover {
	background-color: var(--black);
	border: 6px solid var(--dark-teal);
	color: var(--dark-teal);
}

/* App prototype pages gallery container */
.app_gallery-container {
    padding-left: 40px;
    padding-right: 40px;
}

/* =========================
   Vantage Case Study
========================= */

.action_gallery_container {
	padding-left: 100px;
    padding-right: 100px;
}

.edit_gallery_container {
	padding-left: 100px;
    padding-right: 100px;
}

.adrenaline h3 {
	color: var(--cream);
}

.adrenaline p {
	color: var(--light-teal);
}

.beforenafter h3 {
	color: var(--dark-brown);
	
}

/* Link button css */
#photo_button {
	background-color: var(--black);
	border: 6px solid var(--dark-brown);
	color: var(--dark-brown);
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.1rem;
	letter-spacing: 2px;
	padding: 12px 32px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	}

#photo_button:hover {
	background-color: var(--black);
	border: 6px solid var(--terra-cotta);
	color: var(--terra-cotta);
}

/* =========================
   PNW Thrillseekers Case Study
========================= */

.pnw_gallery_container {
	padding-left: 106px;
    padding-right: 106px;
}

/* =========================
 	Painting Case Study
========================= */

.sculpture_gallery-container {
	padding-left: 120px;
    padding-right: 120px;
}

/* =========================
 	Planet Action Website Case Study
========================= */

.planeta_2column_text h3 {
	color: var(--medium-teal);
}

.planeta_2column_text h4 {
	color: var(--medium-teal);
}

.right_aligned {
	text-align: right;
}

.prototype {
	color: var(--dark-brown);
}

/* ========================================================
	FOOTER
======================================================== */

footer {
	width: 100%;
	height: 60px;
	background-color: var(--dark-brown);
	color: var(--cream);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* Desktop styles end here */

/* ========================================================
	RESPONSIVE TABLET
======================================================== */

@media (max-width: 992px) {
	.portfolio-grid,.portfolio-grid-two {
		grid-template-columns: repeat(2, 1fr);
	}
	.portfolio-card-large {
		grid-column: span 2;
	}
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ========================================================
	RESPONSIVE MOBILE
======================================================== */

@media (max-width: 768px) {
	.portfolio-grid,
	.portfolio-grid-two {
		grid-template-columns: w1fr;
		padding: 30px;
		gap: 24px;
	}
	.portfolio-card-large {
		grid-column: span 1;
	}
	.portfolio-card-large .card-image img,
	.card-image img {
		aspect-ratio: 16 / 10;
	}
	.card-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.case-study-btn {
		align-self: flex-start;
	}
	.portfolio-grid {
		grid-template-columns: 1fr;
		padding: 30px;
	}
	
	#home_banner h1{
		font-size: 1.75rem;
	}
}