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

/* =============================================================
   OVERRIDES
   ============================================================= */
.cta_contact {display: none;}
#page .site-content.content-contain.pl-15.pr-15 {max-width: 100%; padding: 0;}
#page.site .container {padding-bottom: 0 !important;}

/* =============================================================
   BASE / TYPOGRAPHY
   ============================================================= */
#page {color: #000; font-family: "Raleway", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.4;}
#page h2 {color: #0B2F57; font-family: CutmarkBold, sans-serif; font-size: 44px; line-height: 1;}
#page h3 {color: #FF6900; text-align: center; font-family: "Raleway", sans-serif; font-size: 20px; font-weight: 600;}
#page h3 a, #page h3 a:visited {color: #FF6900;}
#page h3 a:hover {color: #000;}
#page h4 {font-family: "Raleway", sans-serif; font-size: 24px; font-weight: 700;}
img {width: 100%; max-width: 100%;}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn-primary {background-color: #FF6900; border-color: #FF6900; transition: 0.5s; color: #FFF; font-weight: 700;}
.btn-primary:hover {background-color: #28a203; border-color: #28a203; color: #FFF;}
.btn-primary:visited {color: #FFF;}
.blk-link {color: #000;}
.blk-link:hover {color: #FF6900;}

/* =============================================================
   HERO BANNER (base + industry variants)
   ============================================================= */
.hero-banner {background-size: cover; background-position: center; color: #FFF; padding: 120px 0 30px; display: flex; align-items: center;}
.hero-banner h1 {font-family: CutmarkBold, sans-serif; color: #FFF; font-size: 55px; line-height: 1;}
.hero-banner p {color: #FFF; font-family: "Raleway", sans-serif; font-size: 20px; font-weight: 500; margin: 34px 0;}

.hero-banner.steel-hero    {background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2025/10/steel-fabrication-banner-clear.jpg'); background-size: cover; background-position: center;}
.hero-banner.marine-hero   {background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2025/10/marine-hero.jpg'); background-size: cover; background-position: center;}
.hero-banner.timber-hero   {background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2026/01/timber-hero.jpg'); background-size: cover; background-position: center;}
.hero-banner.highway-hero  {background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2026/01/highway-hero.jpg'); background-size: cover; background-position: center;}
.hero-banner.concrete-hero {background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2026/04/concrete-hero.jpg'); background-size: cover; background-position: center;}

/* =============================================================
   VIDEO + TRANSCRIPT
   ============================================================= */
.video-thumbnail {position: relative; text-align: center;}
.video-thumbnail:hover .play-button {background: rgba(255, 107, 53, 1); transform: translate(-50%, -50%) scale(1.1);}
.play-button {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(255, 107, 53, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: white; transition: all 0.3s;}
.modal-body {background-color: #000;}
.transcript-toggle {margin-top: 15px; text-align: right;}
.transcript-toggle a {color: #000; text-decoration: none; font-weight: bold; cursor: pointer;}
.transcript-toggle a:hover {color: #FF6900;}
.transcript-content {display: none; background: white;}
.transcript-btn {text-align: right;}
.transcript-btn a {color: #000; text-decoration: none; font-weight: 500;}

/* =============================================================
   SECTIONS
   ============================================================= */
.bkgd-grey {background-color: #F5F5F5;}
.why-pb img {max-width: 100px;}

.blue-section {background-image: url(https://static.portlandbolt.com/uploads/2025/10/blue-gradient-bkgd.jpg); background-position: center center; background-size: cover; color: #FFF;}
#page .blue-section h2 {color: #FFF;}
#page .blue-section h3 {color: #FFF; text-align: left; font-size: 34px;}

.cover-pic {margin-top: -200px; margin-bottom: -200px;}

.cta-banner {background-color: #0B2F57; color: #FFF;}
#page .cta-banner h2, #page .cta-banner h3 {color: #FFF; text-align: left; font-size: 24px; font-weight: 700;}
.cta-team {margin-top: -50px; margin-bottom: -20px;}

/* =============================================================
   FOOTER VARIANTS
   ============================================================= */
.boxes           {min-height: 640px; background-image: url(https://static.portlandbolt.com/uploads/2025/10/portland-bolt-boxes.png); background-repeat: no-repeat; background-position: -100px bottom; background-size: 50%;}
.marine-footer   {min-height: 640px; background-image: url(https://static.portlandbolt.com/uploads/2025/10/marine-footer2.jpg); background-repeat: no-repeat; background-position: left bottom; background-size: contain;}
.timber-footer   {min-height: 640px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2014/08/timber-footer.jpg'); background-repeat: no-repeat; background-position: left top; background-size: cover;}
.highway-footer  {min-height: 640px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2026/01/highway-footer.jpg'); background-repeat: no-repeat; background-position: left top; background-size: cover;}
.concrete-footer {min-height: 640px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.75) 40%, rgba(0,0,0,0.3) 100%), url('https://static.portlandbolt.com/uploads/2026/04/precast-concrete-cta-back.jpg'); background-repeat: no-repeat; background-position: left top; background-size: cover;}

/* =============================================================
   ACCORDION / FAQ
   ============================================================= */
.accordion#faqAccordion,
.accordion#faqAccordion:hover {padding: 0; background-color: #FFF; font-family: "Raleway", sans-serif; font-size: 16px; font-weight: normal;}
.accordion#faqAccordion button {font-size: 16px; font-weight: normal;}
.accordion:after {display: none !important;}
.accordion-body p {font-size: 16px;}

/* =============================================================
   IMAGES / UTILITIES
   ============================================================= */
.img-cover {object-fit: cover; object-position: center;}
.left-25 {margin-left: 25% !important;}

/* =============================================================
   PRODUCT CARDS
   ============================================================= */
.product-section img {max-height: 120px; width: auto;}
.product-section p {margin-left: 20px; margin-right: 20px;}
.product-section a {color: #FF6900; text-decoration: none;}
.product-section a:hover {color: #FF6900; text-decoration: underline;}

.product-card {position: relative; display: flex; flex-direction: column; height: 100%; padding: 2rem 1rem; cursor: pointer;}
.product-card .card-content {flex: 1; display: flex; flex-direction: column;}
.product-card h3 {margin-top: 1rem; margin-bottom: 1rem;}
.product-card .hover-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0B2F57; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;}
.product-card:hover .hover-overlay {opacity: 1;}

.hover-overlay .hover-text {color: #FFF; font-size: 1.4rem; display: flex; align-items: center; gap: 1.5rem; font-family: CutmarkBold, sans-serif; padding: 10px;}
.hover-overlay .hover-text a {color: white; text-decoration: none; display: flex; align-items: center; gap: 1.5rem;}
.hover-overlay .hover-text a:hover {color: white; text-decoration: none;}
.hover-overlay .arrow {font-size: 2rem; font-weight: bold;}
.hover-overlay a.full-card-link {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-decoration: none;}
.full-card-link > p {display: none;}

.row.equal-height {display: flex; flex-wrap: wrap;}
.row.equal-height > [class*='col-'] {display: flex; flex-direction: column;}

/* =============================================================
   VISIBILITY HELPERS
   ============================================================= */
.mobile-only  {display: none;}
.desktop-only {display: block;}

/* =============================================================
   MEDIA QUERIES
   ============================================================= */
@media (max-width: 1000px) {
	.hero-banner {text-align: center;}
}

@media (max-width: 860px) {
	.cover-pic {margin: 0 auto;}
}

@media (max-width: 767px) {
	.cta-team {margin: -124px auto 20px -38px; max-width: 300px;}
	.cta-banner {padding: 20px; text-align: center;}
	.boxes {background-image: none;}
	.page-wrap,
	#page .cta-banner h2,
	#page .cta-banner h3,
	.transcript-btn {text-align: center;}
	.accordion#faqAccordion,
	.project-glance,
	.hbspt-form {text-align: left;}
	.modal-dialog {max-width: 100%;}
	.left-25 {margin-left: 0 !important;}
	.mobile-only  {display: block;}
	.desktop-only {display: none;}
	#page h1, #page h2, #page h3, #page h4, #page h5,
	#page p, #page a, #page span,
	#page .blue-section h3 {text-align: center;}
	#page ul {text-align: left;}
}