/*
Theme Name: Hellbender 2026
Template: blankslate
Description: Custom theme built for Hellbender
Version: 1.0.0
Author: Josh Harris
Text Domain: hellbender2026

Hellbender 2026 WordPress Theme © 2026 Hellbender
*/

:root {
  --color-primary-teal: #1B5C6F;
  --color-safety-orange: #DE8028;
  --color-industrial-green: #4D5B31;
  --color-dark-blue: #154A59;
  --color-gunmetal: #0D1115;
  --color-bg-grey: #F2F8F9;

  --font-rift: 'Rift', sans-serif;
  --font-barlow: 'Barlow', sans-serif;
}

html, body {
  font-family: var(--font-barlow);
  font-size: 18px;
  color: var(--color-gunmetal);
  background-color: white;
}

a {
  color: var(--color-safety-orange);
}

/* Typography & Text Styles */
h1, .h1 {
  font-family: var(--font-rift);
  font-size: 96px;
  font-weight: 500;

  @media (max-width: 767px) {
    font-size: 64px;
  }
}

h2, .h2 {
  font-family: var(--font-rift);
  font-size: 62px;
  font-weight: 500;
}

h3, .h3 {
  font-family: var(--font-barlow);
  font-size: 40px;
  font-weight: 400;

  @media (max-width: 767px) {
    font-size: 36px;
  }
}

h4, .h4 {
  font-family: var(--font-rift);
  font-size: 18px;
  font-weight: 500;
}

p, body, .p2 {
  font-family: var(--font-barlow);
  font-size: inherit;
  font-weight: 400;
}

.p1 {
  font-family: var(--font-barlow);
  font-size: 20px;
  font-weight: 400;
}

.entry-content > .elementor > div:first-of-type {
  padding-top: 140px; /* Override for fixed header */
}

.error404 #main-content {
  padding: 140px 32px 32px;
}

.entry-content a {
  color: var(--color-primary-teal);
}

.text-primary {
  color: var(--color-primary-teal) !important;
}

.text-secondary {
  color: var(--color-safety-orange) !important;
}

.border-primary {
  border-color: var(--color-primary-teal) !important;
}

.btn-primary {
  color: #fff !important;
  cursor: pointer;
  background-color: var(--color-primary-teal) !important;
  border-color: var(--color-primary-teal) !important;
  transition: background-color 1s;
}

.btn-primary:hover {
  color: #fff !important;
  background-color: var(--color-dark-blue) !important;
  border-color: var(--color-dark-blue) !important;
}

.btn-secondary {
  color: #fff !important;
  background-color: var(--color-safety-orange) !important;
  border-color: var(--color-safety-orange) !important;
  line-height: 1;
  transition: background-color 1s;

  @media (min-width: 768px) {
    font-size: 18px;
  }
}

.btn-secondary:hover {
  color: #fff !important;
  background-color: #b8671b !important;
  border-color: #b8671b !important;
}

.bg-primary {
  background-color: var(--color-primary-teal) !important;
}

.bg-secondary {
  background-color: var(--color-safety-orange) !important;
}

.bg-green {
  background-color: var(--color-industrial-green) !important;
}

/* Color Utility Classes */
.text-primary-teal {
  color: var(--color-primary-teal) !important;
}

.bg-primary-teal {
  background-color: var(--color-primary-teal) !important;
}

.text-safety-orange {
  color: var(--color-safety-orange) !important;
}

.bg-safety-orange {
  background-color: var(--color-safety-orange) !important;
}

.text-industrial-green {
  color: var(--color-industrial-green) !important;
}

.bg-industrial-green {
  background-color: var(--color-industrial-green) !important;
}

.text-dark-blue {
  color: var(--color-dark-blue) !important;
}

.bg-dark-blue {
  background-color: var(--color-dark-blue) !important;
}

.text-gunmetal {
  color: var(--color-gunmetal) !important;
}

.bg-gunmetal {
  background-color: var(--color-gunmetal) !important;
}

.text-bg-grey {
  color: var(--color-bg-grey) !important;
}

.bg-grey,
.bg-bg-grey {
  background-color: var(--color-bg-grey) !important;
}

.bg-card {
  position: relative;
  overflow: hidden;
}

.bg-card .card-img {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

.bg-card .card-img-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.bg-card .card-img-overlay-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.bg-card .btn-specs {
  width: 100%;
}

.coming-soon-banner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and opacity as needed */
  text-align: center;
  padding: 10px 0; /* Adjust padding as needed */
  z-index: 99; /* Ensure the banner appears above other content */
  border-radius: 20px;
}


.square-card {
  position: relative;
  width: 100%;
  padding-bottom: 500px; /* This ensures a 1:1 aspect ratio */
  overflow: hidden;
  max-height: 500px;
}

.square-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes sure the image covers the entire square */
  max-height: 500px;
}

.max-height-400 {
  max-height: 400px;
  width: auto;
  object-fit: cover;
  object-position: center center;
}

.video-background {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.fullscreen-bg__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

.centered-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.carousel-item {
  height: 100vh;
  background-size: cover;
}

.carousel-item:nth-child(1) {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)), url('/wp-content/uploads/2024/02/hellbender-banner-demo-1.jpg') no-repeat center center; background-size: cover;
}

.carousel-item:nth-child(2) {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)), url('/wp-content/uploads/2024/02/hellbender-banner-demo-2.jpg') no-repeat center center; background-size: cover;
}

.carousel-item:nth-child(3) {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)), url('/wp-content/uploads/2024/02/hellbender-banner-demo-3.jpg') no-repeat center center; background-size: cover;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.reveal {
  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease-in; /* Add a transition for a smoother effect */
}

.reveal.active {
  opacity: 1;
}
.active.fade {
  animation: fade .5s ease-in;
}
.active.fade-bottom {
  animation: fade-bottom .5s ease-in;
}
.active.fade-left {
  animation: fade-left .5s ease-in;
}
.active.fade-right {
  animation: fade-right .5s ease-in;
}
@keyframes fade {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.card-scroll {
  display: flex;
  overflow-x: auto;
  margin-bottom: 15px;
  overflow-x: hidden !important;
}

.scrolling-card {
  flex: 0 0 auto;
  width: 350px;
  height: 400px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}



.controls {
  display: flex;
  justify-content: space-between;
}


.founders_list figure {
  width: 286px;
  height: 286px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 22px;
  box-shadow: 6px 7px 12px rgba(126,122,120,0.35);
}

.founders_list figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founders_list h6 {
  color: #000000;
  font-size: 24px;
  line-height: 1.08;
  transition: 0.15s ease-in;
  padding-bottom: 0;
}

.founders_list a:hover h6 {
  color: var(--color-safety-orange);
}

.iQGRsC {
	background-color: transparent !important;
}

.gform_heading {
	display: none !important;
}
.logo {
	width: 125px;
}

.home-fixed-header {
	width: 100%;
	z-index: 100;
	background-color: rgba(27, 92, 111, 0.75);
	transition: background-color 0.6s ease-in-out;
}

.home-fixed-header.is-scrolled {
	background-color: rgba(27, 92, 111, 1);
}

#stickyheader {
  background-color: var(--color-primary-teal) !important;
  border-radius: 15px;
  margin: 0.5rem;
  position: fixed;
  top: 0;
  width: calc(100% - 1rem);
  z-index: 999;
}

.admin-bar #stickyheader {
  top: 32px;
}

.footer-band {
	background-size: cover;
	background-repeat: no-repeat;
}

.footer-wrapper {

}

.footer-logo,
.woocommerce img.footer-logo,
.woocommerce-page img.footer-logo {
	max-width: 300px;
}

.footer-column-offset {
	padding-left: 2rem;
}

#copyright a,
#socials a,
#footer ul.list-menu li a,
#footer ul#menu-footer_menu li a {
  color: var(--color-gunmetal);
    opacity: .5;
	text-decoration: none;
}

#copyright a:hover,
#socials a:hover,
#footer ul.list-menu li a:hover,
#footer ul#menu-footer_menu li a:hover {
	color: var(--color-gunmetal);
    opacity: 1;
}

.gradient-section {
	background: linear-gradient(to right, rgba(212, 212, 212, 1) 0%, #fff 30%, #fff 50%, #fff 70%, rgba(212, 212, 212, 1) 100%);
}

.projects-banner {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/wp-content/uploads/2025/11/DSCF3238.jpg') center / cover no-repeat;
}

.archive-banner {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/wp-content/uploads/2024/02/hellbender-banner-demo-2.jpg') center / cover no-repeat;
}

.page-band-gradient {
	background-color: #fff;
	background-image: linear-gradient(130deg, #fff 0%, #dbdbdb 50%, #fff 100%);
}

.project-subheadline {
	line-height: 1.5 !important;
}

.project-card.is-enlarged {
	transform: scale(1.05);
	transition: transform 0.3s ease;
}

.page-numbers {
  margin-top: 2rem;
  padding-left: 0;
}
.page-numbers li {
  display: inline-block;
}
.page-numbers li a,
.page-numbers li span {
  border: 1px solid var(--color-primary-teal);
  border-radius: 15px;
  padding: 0.5rem 1rem;
}
.page-numbers li a {
  text-decoration: none;
  background: var(--color-primary-teal);
  color: white;
}
.page-numbers li a:hover {
  opacity: .8;
}