/*
Theme Name: Highline Studio
Description: Custom WordPress theme for Highline Studio
Version: 5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: highlinestudio
*/
:root {
--hs-accent: #F77F00;
}
@font-face {
font-family: 'HelveticaNowDisplay';
src: url('fonts/HelveticaNowDisplay-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowDisplay';
src: url('fonts/HelveticaNowDisplay-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowDisplay';
src: url('fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-BlackItalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-ExtLtIta.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-BoldItalic.woff2') format('woff2');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-ExtBdIta.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-ExtraBold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-ThinItalic.woff2') format('woff2');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-RegIta.woff2') format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNowText';
src: url('fonts/HelveticaNowText-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic Demi';
src: url('fonts/FuturaCyrillic-Demi.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic';
src: url('fonts/FuturaCyrillic-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic Book';
src: url('fonts/FuturaCyrillicBook.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic Extra';
src: url('fonts/FuturaCyrillic-ExtraBold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic';
src: url('fonts/FuturaCyrillicHeavy.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic';
src: url('fonts/FuturaCyrillicLight.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura Cyrillic';
src: url('fonts/FuturaCyrillicMedium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Custom TrueType Font */
div#testimonialCarousel p {
max-width: 478px;
}
.production_icons {
width: 65px;
}
p a, li a, .accordion-body a{
color:#000000;
font-weight:bold;
text-decoration:none;
}
p a:hover, li a:hover, .accordion-body a:hover{
color: #F77F00;
text-decoration: underline;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
text-decoration-color: #F77F00;
}
@media (min-width: 1200px) and (max-width: 1440px) {
h1.text-h1{
font-size:80px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
img.custom-logo {
padding-left: 20px;
}
ul#menu-main-navigation {
padding-right: 20px;
}
/*.hero-video-wrapper
{
height: 40vh !important;
}*/
.container.footermain .row>* {
padding-left: 0px;
padding-right: 0px;
}
}
span.number-title-plus {
FONT-WEIGHT: 200;
line-height: 110%;
FONT-SIZE: 40PX !important;
font-family: 'HelveticaNowText';
color: white;
padding-left: 21px;
width: 40px;
height: auto;
}
.navbar-collapse ul.sub-menu li:last-child a{
width:100% !important;
text-align:left !important;
}
.accordion-button:not(.collapsed){
box-shadow:none !important
}
div#related-porfolio-img div {
padding-right: 0px;
padding-right: 16px !important;
}
div#related-porfolio-img div:last-child{
padding-right: 0px !important;
}
.geta-quote {
margin-top: 66px;
}
a.custom-logo-link img {
width: 156px;
height: auto;
/* margin-top:15px; */
}
.accordion-body.text-p {
max-width: 1020px;
padding-right: 20px;
}
.breadcrumb-section{
margin-top: 167px;
}
div#vid-feature{
height: auto !important;
min-height: 550px;
width: 222%;
}
@media (max-width: 768px) {
#menu-main-navigation a:hover{
text-decoration:none !important;
}
div#vid-feature{
height: auto !important;
min-height: 400px;
width: 222%;
}
.text-h6 {
line-height:110% !important;
}
p {
line-height:180% !important;
}
.text-p{
line-height:180% !important;
}
.feature.col p
{
padding-top: 15px !important;
}
.featurecover.featurecover-fluid.d-flex.align-items-end {
height: 760px !important;
}
#singlepct {
padding-top: 35px;
}
span.number-title-plus{
padding-left:5px;
}
}
div#portfolio-video-section {
margin-top: 156px;
}
#widthcustompara{
max-width:700px;
padding-right:30px;
}
.contact-form-wrapper {
padding-left: 14px;
}
.feature.col p.text-p {
padding: 2%;
}
.item.box img {
max-width: 220px;
height: 80px;
object-fit: contain;
}
.footerwork {
display: flex;
flex-direction: column;
}
.test{
padding: 160px 0px;
}
::marker
{
font-size: 12px;
}
.container-fluid{
padding-left:0px;
padding-right:0px;
}
div#testimonialCarousel {
padding-top: 63px;
}
ul.sub-menu li a{
margin-left:0px !important;
}
.test-img{
max-width: 180px;
height: auto;
margin: 0 auto;
padding-bottom:54px;
}
footer.bg-dark.text-white {
background: #121212 !important;
}
html, body {
overflow-x: hidden;
font-family:
}
h1,h2,h3,h4,h5,h6,div[role="heading"]{
font-family:'Futura Cyrillic';
color:#000000;
margin-bottom:0px;
}
p{
font-family: 'HelveticaNowText';
line-height:200%;
color:#000000;
margin-bottom: 0px !important;
}
button.text-h6.accordion-button {
color: #000;
}
.accordion-flush>.accordion-item:last-child {
border-bottom:1px solid #bfbfbf;
}
ul{
font-family: 'HelveticaNowText';
line-height:200%;
font-weight:500;
font-size:16px;
}
/* Typography */
.text-h1 {
font-size: 90px;
/* Large heading */
font-weight: 700;
line-height: 80%;
letter-spacing: -0.02em;
text-transform: uppercase;
text-wrap: balance;
padding-right:40px;
}
.text-h2 {
font-size: 60px;
font-weight: 700;
line-height: 63px;
letter-spacing: -0.01em;
text-transform: uppercase;
text-wrap: balance;
padding-right:40px;
}
.container.footermain
{
background: #121212;
}
.text-h3 {
font-size: 35px;
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
text-wrap: balance;
font-family:'Futura Cyrillic';
}
.text-h4{
font-size: 20px;
line-height: 110%;
font-weight:600;
font-family: 'Futura Cyrillic';
text-transform: uppercase;
text-wrap: balance;
}
.text-h5{
font-size:14px;
line-height:150%;
font-family:'Futura Cyrillic';
font-weight:600;
text-transform: uppercase;
}
.text-h6{
font-size:22PX;
line-height:170%;
font-family: 'HelveticaNowDisplay';
font-weight:600;
}
.text-h7{
font-size:22PX;
line-height:170%;
font-family: 'HelveticaNowDisplay';
font-weight:700;
}
.text-h4 .is-white{
color:#ffffff;
}
.text-p {
font-size: 16px;
line-height: 200%;
color: black;
font-weight:400;
font-family: 'HelveticaNowText';
}
text-p p{
font-size: 16px;
line-height: 200%;
color: black;
font-weight:400;
font-family: 'HelveticaNowText';
}
.text-p2{
font-size: 16px;
line-height: 200%;
font-weight:500;
font-family: 'HelveticaNowText';
}
.text-p4{
font-size: 16px;
line-height: 200%;
font-weight:400;
font-family: 'HelveticaNowText';
}
.text-p3{
font-size: 14px;
font-weight: 700;
FONT-FAMILY: HelveticaNowText;
}
.text-small {
font-size: 0.875rem;
color: #666666;
}
.text-small .white{
font-size: 0.875rem;
color: #ffffff;
}
/* Links */
.link-primary {
color: #0d6efd;
/* Bootstrap primary */
text-decoration: none;
}
.link-primary:hover {
text-decoration: underline;
color: #0a58ca;
}
hr{
margin:0px;
color: #000;
}
/* Buttons */
.btn-primary-custom {
background-color: #F77F00;
color: #fff;
padding: 0.625rem 1.25rem;
font-weight: 600;
transition: all 0.3s ease;
width: 267px;
font-size: 14px;
border-radius: 0px;
font-family:'Futura Cyrillic';
text-transform: uppercase;
}
.btn-primary-custom:hover {
/* background-color: #FA6036; */
background-color: #121212;
opacity:0.9;
color: #fff;
}
/* Secondary button */
.btn-secondary-custom {
background-color: #F77F00;
color: #fff;
border-radius: 0px;
padding: 0.625rem 1.25rem;
font-weight: 600;
font-size: 0.875rem;
width: 187px;
text-transform: uppercase;
}
/*.btn-secondary-custom:hover {
background-color: #FA6036;
color: #fff;
}*/
.btn-secondary-custom:hover {
background-color: #121212;
opacity:0.9;
color: #fff;
}
/* Utility classes for spacing (optional) */
.spacer-26{
height: 26px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacing-xs {
height: 33px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacer-10{
height: 10px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacer-55
{
height: 55px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacer-88{
height: 88px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacer-160{
height: 160px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacing-sm {
height: 36px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.spacing-md {
margin: 1rem !important;
padding: 1rem !important;
}
.spacing-lg {
margin: 2rem !important;
padding: 2rem !important;
}
/* Example card style */
.card-custom {
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
padding: 1.5rem;
background-color: #fff;
}
/* navbar styling */
nav.navbar.navbar-expand-lg.navbar-light.bg-light
{
/* border-top: 15px solid;
border-image: linear-gradient(to right, #FB9B3E, #FB774C, #FC5E41, #FA6036) 1; */
background: white !important;
}
.container.header-wrapper {
/* padding-top: 2.5rem;
padding-bottom: 2.5rem; */
/* border-top: 5px solid #F77F00; */
max-width: 1528px;
padding-left:0px;
padding-right:0px;
/* border-top: 15px solid;
border-image: linear-gradient(to right, #FB9B3E, #FB774C, #FC5E41, #FA6036) 1; */
}
.container.header-wrapper {
position: relative;
max-width: 1528px;
padding-left: 0px;
padding-right: 0px;
}
/* Animated border using pseudo-element */
.container.header-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15px;
background: linear-gradient(
-45deg,
#F77F00,
#FFAD4D,
#FF5526,
#000000,
#F77F00
);
background-size: 500% 500%;
animation: gradient 8s ease infinite;
z-index: 5;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/*
.container.header-wrapper::before {
background: linear-gradient(300deg,#ffad4d,#ff5526);
background-size: 120% 120%;
animation: gradient-animation 12s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
*/
.header-main nav {
padding-top: 0px;
padding-bottom: 0px;
}
ul.navbar-nav li a {
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
color: black;
text-decoration:none;
margin-left:45px;
FONT-FAMILY: 'Futura Cyrillic Extra';
}
li#menu-item-48 a {
color: #F77F00;
}
@media (max-width: 991px) {
ul.navbar-nav {
margin: 0;
padding-top:83px;
}
ul.navbar-nav li {
height: auto;
/* text-align: center; */
/* padding-bottom: 23px; */
/* border-top:#aaa dashed 1px; */
}
ul.navbar-nav li a {
margin: 0;
width: 100%;
font-size:24px;
font-weight:600;
}
}
/* Remove default Bootstrap arrow */
.accordion-button::after {
/* content: '+'; */
font-size: 1.5rem;
font-weight: bold;
color: #000;
/* background-image: none !important; */
transform: none !important;
margin-left: auto;
}
/* Change + to - when open */
.accordion-button:not(.collapsed)::after {
/* content: 'â??';
color: #000; */
}
/* Optional â?? clean design */
.accordion-button {
background-color: #fff;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-flush>.accordion-item:first-child {
border-top: 1px solid #bfbfbf;
}
.accordion-item {
border: 1px solid #bfbfbf;
}
@media (max-width: 1440px) and (min-width: 1024px){
footer .col-md-2 {
flex: 0 0 auto;
width: auto;
/* width: 17.666667%; */
}
.accordion-body.text-p {
padding-right: 46px;
}
.footerwork{
padding-top:30px;
}
.container.header-wrapper {
width: calc(100% - 40px);
}
.hero-wrapper{
margin-left:20px;
margin-right:20px;
}
.hero-section {
margin-left:20px;
margin-right:20px;
}
div#quicklinkmenu {
width: 16% !important;
padding-left: 10px;
}
a#footer-icon {
margin-right: 8px !important;
}
}
/* Responsive container for your theme */
.container {
width: 100%;
padding-left: 0px;
padding-right: 0px;
margin-left: auto;
margin-right: auto;
}
/* Override Bootstrap max-widths for larger screens */
@media (min-width: 576px) {
.container {
max-width: 540px;
width: calc(100% - 40px);
}
}
/* @media (min-width: 576px) {
.container, .container-sm {
max-width: 556px;
}
} */
.container.faq-section {
max-width: none !important;
}
/* @media (min-width: 576px) {
.container, .container-sm {
max-width: fit-content;
}
} */
@media (min-width: 768px) {
.container {
max-width: 765px;
width: calc(100% - 40px);
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
width: calc(100% - 40px);
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
width: calc(100% - 40px);
}
}
@media (min-width: 1400px) { /* xxl breakpoint */
.container {
width: calc(100% - 40px);
max-width: 1528px; /* desktop width you want */
}
}
.container.footermain {
padding-top: 94px;
padding-bottom: 70px;
width: calc(100% - 40px);
}
/* hero section */
.first-section {
height: 100vh;
}
.hero-heading{
color: #fff;
}
/* Footer specific */
.footer-heading {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 1rem;
}
footer.bg-dark.text-white.py-5 {
background: #121212 !important;
}
.footer-link {
color: #fff;
text-decoration: none;
line-height: 200%;
padding-bottom: 5px;
background-image: linear-gradient(var(--hs-accent), var(--hs-accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 5px;
transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a#footer-icon {
margin-right: 30px;
}
.footer-link:hover {
color: var(--hs-accent);
text-decoration: none;
background-size: 100% 5px;
}
#about-footer{
margin-top:64px;
color: #ffffff;
LINE-HEIGHT: 200%;
max-width: 585px;
font-family: 'HelveticaNowDisplay';
}
ul#menu-footer-menu li a span{
font-family: 'HelveticaNowDisplay';
}
footer.bg-dark.text-white.py-5.mt-5 ul li a
{
text-decoration: none;
}
/* .container.footermain {
max-width: 1536px;
} */
footer ul li a {
text-decoration: none;
}
/* Responsive */
/* Small laptops / tablets */
@media (max-width: 1200px) {
.text-h1 {
font-size: 60px;
padding-right:0;
/* line-height:30px; */
}
.hero-section {
/* margin-top: -36px; */
margin-left: 20px;
margin-right: 20px;
}
.text-h2 {
font-size:45px;
line-height:60px;
padding-right:0px;
}
ul.navbar-nav li a{
/* margin-right:13px; */
font-size: 17px;
/* margin-left: 17px; */
}
.card-img-top {
height: auto;
}
}
/* Mobile devices */
@media (max-width: 768px) {
.contact-form-wrapper{
padding-top: 74px;
}
.contact-form-wrapper {
padding-left: 0px;
}
h2#featurecover-title {
padding-bottom: 5px !important;
}
.featurecover-para {
padding-bottom: 32px !important;
}
.container.faq-section h2 {
text-align: left !important;
}
.breadcrumb-section {
margin-top: 112px !important;
}
div#breadcrumb-new {
display: none;
}
header.scrolled .container.header-wrapper {
padding: 0px 0px !important;
}
header.scrolled nav.navbar.navbar-expand-lg.navbar-light.bg-light {
border:none !important;
}
.hero-section {
margin-top: 121px !important;
}
.corner {
/* originally 20px */
width: 20px;
height: 20px;
}
.test {
padding: 70px 0px;
}
.accordion-body {
padding-left: 0px !important;
}
.accordion-button {
padding-left: 0px !important;
}
#widthcustompara{
padding-right:0px;
}
.item.box img {
padding: 0px 10px;
}
/* .feature.col {
padding-right: 0px !important;
} */
.spacer-26{
height: 16px !important;
}
.spacer-88{
height: 44px !important;
}
.hero-section {
margin-left: 20px;
margin-right: 20px;
}
/* .breadcrumb-section{
margin-top: 33px !important;
} */
.text-h1 {
font-size: 40px;
line-height:105%;
text-wrap:auto !important;
}
.text-h2 {
font-size:28px;
line-height:30px;
text-wrap:auto !important;
}
.text-h4{
font-size:17px;
text-wrap:auto !important;
}
.text-h3{
font-size:25px !important;
}
.card-img-top {
height: auto !important;
}
div#ctatesst {
padding-top: 25px !important;
}
a#black-bt {
margin-top: 32px !important;
}
.contact-form-wrapper.mx-auto {
padding-top: 74px;
}
/*div#industrysingleparallax {
padding-bottom: 80px !important;
}*/
.geta-quote{
padding:1px 0px !important;
}
.clients {
padding: 72px 0 !important;
}
.hr-porfoliopage {
margin-top: 30px !important;;
padding-bottom: 64px !important;;
}
input#searchInput{
width:100% !important;
padding-top:42px !important;
}
div#portfolioGrid {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.abt-section {
padding: 73px 0px !important;
}
hr{
margin:0px !important;
}
/* #about-footer {
padding-top:47px;
} */
hr.abt-hr{
margin:35px 0px !important;
}
div#brief_para p {
padding-top: 24px;
}
.row.portfolio-images
{
padding-top: 60px !important;
padding-bottom: 60px;
}
div#service-pt
{
padding-top: 0px !important;
}
.related-portfolio-section.container-fluid {
background: black;
padding-top: 73px !important;
padding-bottom: 73px !important;
}
.container.footermain {
padding-top: 75px;
padding-bottom:55px;
}
div#related-porfolio-img div {
padding-right: 0px;
padding-left: 0px !important;
}
#related-porfolio-img {
padding-top: 55px !important;
gap: 49px;
}
.clientchoose-section{
padding:73px 0px !important;
}
.container.header-wrapper {
padding-top: 25px;
padding-bottom: 25px;
width:100%;
/* width: calc(100% - 40px) !important; */
}
a.custom-logo-link img {
margin-left:20px;
}
.clientchoose-section ul {
padding-top: 27px !important;
}
#industry-pt {
padding: 73px 0px;
}
/* About page
*/
.about-pg-section {
padding: 74px 0px !important;
}
img#abt-pg-img {
padding-top: 53px;
}
.founder-section {
padding: 74px 0px !important;
}
#founder-img
{
padding-top: 55px !important;
}
#founder-text {
padding-top: 50px;
}
#founder-text p{
color:white;
text-align:center;
}
.row.features {
display: flex
;
flex-direction: column;
gap: 24px;
}
div#features-section {
padding-top: 74px !important;
}
div#featured-3 {
width: calc(100% - 40px);
padding-top: 73px !important;
padding-bottom: 74px !important;
}
.spacer-160 {
height: 80px !important;
}
@media (max-width: 768px) {
.container{
width: calc(100% - 40px);
}
}
/* corporate video page
*/
.corporate-content
{
padding: 73px 0px !important;
}
p.cororatetext {
padding-right: 0px !important;
}
div#\33 feature {
gap: 37px !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
display: flex;
flex-direction: column;
align-items: center !important;
}
.hero-video_section {
PADDING: 74px 0PX !important;
}
div#hero-video-section {
margin-top: 55px !important;
}
#founder-text {
padding-top: 50px !important;
}
.faq-section {
padding: 74px 0px !important;
}
div#featurev2
{
gap: 44px !important;
}
.featured-section {
padding: 74px 0px !important;
}
div#industrylist {
padding: 70px 0px !important;
}
.hero-wrapper{
background-size:cover !important;
max-height: 730px !important;
}
}
@media (max-width: 768px) {
#about-footer {
padding-top:47px;
}
}
/* Ensure buttons donâ??t force overflow */
.btn-primary-custom,
.btn-secondary-custom {
max-width: 100%;
}
/* Hero section
*/
.hero-content_wrapper{
text-align: center;
}
.hero-wrapper {
color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
max-width: 1528px;
margin: 0 auto;
display: flex;
align-items: center;
max-height: 855px;
}
.explore-p{
padding-top: 143px;
font-family: 'HelveticaNowText';
font-weight: 500;
}
/* about section */
.abt-section{
padding: 160px 0px;
}
hr.abt-hr
{
margin: 50px 0px;
}
/* CLIENT SECTION */
.sec-heading {
margin-bottom: 50px;
}
.sec-heading h2 {
text-align: center;
font-family: 'Allura', cursive;
font-size: 80px;
}
.clients {
padding: 100px 0;
background-color:#121212;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 auto;
transition: transform 0.5s ease-in;
}
.box img {
max-width: 100%;
max-height: 100%;
}
.owl-carousel.owl-theme.clients-carousel.owl-loaded.owl-drag {
padding-top: 78px;
}
.clients .owl-dots {
display: none;
}
.container.client-wrapper {
max-width: 100%!important;
width: 100%;
margin-left:0px;
margin-right:0px;
}
/* features section */
a.text-h5.icon-link.ctlink {
color: #000000;
font-size: 14px;
text-transform: uppercase;
text-decoration-color: currentColor;
transition: color .25s ease, text-decoration-color .25s ease;
padding-top: 30px;
text-underline-offset: 5px;
}
a.text-h5.icon-link.ctlink:hover {
color:#F77F00;
}
div#featured-3 {
padding-top: 160px;
padding-bottom:160px;
}
/* Gallery */
.img-grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
.img-grid .col {
padding: 0; /* remove space between images */
}
.img-grid {
overflow: hidden;
}
hr.long-hr {
margin: 161px 0px 0px 0px !important;
padding: 0px;
}
/* Featured section
*/
a#feature-bt {
margin-top: 49px;
}
.featured-section {
padding: 160px 0px;
}
.featurecover{
color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
}
.featurecover::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.8) 100%);
z-index: 1;
pointer-events: none;
}
.featurecover #featurehero2 {
position: relative;
z-index: 2;
}
button#featurecover-bt,
#featurecover-bt {
margin-bottom: 120px;
position: relative;
z-index: 2;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
h2#featurecover-title {
padding-bottom: 13px;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.7);
}
.featurecover-para {
padding-bottom: 40px;
font-weight:400;
font-family: 'HelveticaNowText';
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.7);
}
/* why client choose us section */
.clientchoose-section {
padding: 160px 0px;
}
div#clientchoose-wrapper h2 {
max-width: 671px;
}
/* Testimonial section */
.card-body.text-center {
max-width: 492px;
margin: 0 auto;
}
.testimonial-section {
background-size: cover;
background-position:center center;
}
p.card-text.text-center.text-white {
PADDING-TOP: 54PX;
}
.card-title {
PADDING-TOP: 46PX;
PADDING-BOTTOM:6PX;
text-transform:uppercase;
}
div.testimonial-sectionspan .text-secondary.text-white {
font-size: 16px;
}
div.testimonial-section .card{
background: none;
}
div.testimonial-section .carousel img {
width: 140px;
height:auto;
border-radius: 50%;
margin-right: 1rem;
overflow: hidden;
}
@media screen and (min-width: 576px) {
div.testimonial-section .carousel-inner {
display: flex;
width: 90%;
margin-inline: auto;
padding: 1em 0;
overflow: hidden;
}
div.testimonial-section .carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100% / 2);
}
}
@media screen and (min-width: 768px) {
div.testimonial-section .carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100% / 2);
}
}
div.testimonial-section .carousel .card {
margin: 0 0.5em;
border: 0;
}
div.testimonial-section .carousel-control-prev,
div.testimonial-section .carousel-control-next {
width: 3rem;
height: 3rem;
background-color: grey;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
div#portfolioGrid
{
row-gap: 49px;
}
.impact-section {
overflow: hidden;
padding: 154px 0px 119px 0px;
text-align: center;
}
.impact-section h2 {
font-size: 20px;
line-height: 110%;
font-weight: 600;
font-family: 'Futura Cyrillic';
text-transform: uppercase;
text-wrap: balance;
color: white;
position: relative;
display: inline-block;
}
.impact-section h2::before,
.impact-section h2::after {
content: "";
position: absolute;
top: 50%;
width: 270%; /* line length */
height: 1px;
background: rgba(255,255,255,0.8);
}
.impact-section h2::before {
right: 100%;
margin-right: 15px;
}
.impact-section h2::after {
left: 100%;
margin-left: 15px;
}
.clientchoose-section ul li {
list-style: square;
}
.overview-count-list .count-wrapper .count-title {
padding-top:34px;
text-align: center;
}
.overview-inner {
color: #fff;
}
.company-overview-section .overview-count-wrapper {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8.5rem;
}
.overview-count-wrapper .overview-count-list {
width: 100%;
}
.overview-count-list .count-wrapper .number-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.company-overview-section .overview-title {
margin-bottom: 1.625rem;
font-size: 3.75rem;
line-height: 5rem;
font-weight: 400;
}
.company-overview-section .overview-description {
margin-bottom: 3.75rem;
max-width: 72.75rem;
font-size: 1.25rem;
font-weight: 400;
text-transform: capitalize;
line-height: 2.375rem;
}
.overview-count-list .count-wrapper .number-wrapper .number-title,
.overview-count-list .count-wrapper .number-wrapper {
position: relative;
font-size: 110px;
font-weight: 700;
line-height:80%;
font-family:'Futura Cyrillic'
}
@media (max-width: 768px) {
.container.header-wrapper{
border:none !important;
}
hr.long-hr {
margin: 80px 0px 0px 0px !important;
padding: 0px;
}
.company-overview-section .overview-title {
font-size: 2.8125rem;
margin: 0;
}
.company-overview-section .overview-count-wrapper {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
}
.overview-count-list .count-wrapper .number-wrapper .number-title,
.overview-count-list .count-wrapper .number-wrapper .number-title-plus {
font-size: 70px;
}
}
@media (max-width: 425px) {
.company-overview-section .overview-count-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.overview-count-list .count-wrapper .number-wrapper .number-title,
.overview-count-list .count-wrapper .number-wrapper {
font-size: 110px;
line-height: 5rem;
}
.number-title-plus{
font-size: 45px;
}
}
/* portfolio page */
div#porfolio-abt-breif {
padding-top: 150px;
padding-bottom: 90px;
}
.breadcrumb-section {
position: relative;
max-width: 1528px;
aspect-ratio: 1528 / 570;
/* height: 570px; */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
margin-left: auto;
margin-right: auto;
margin-bottom:0px;
background-size: cover !important;
width: calc(100% - 40px);
}
.breadcrumb-section::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.breadcrumb-content { position: relative; z-index: 1; }
.card-title2.text-h4 a {
color: black;
text-decoration: none;
}
.breadcrumb-sep {
color: #828282 !important;
display: inline-block;
margin: 0 5px; /* 5px spacing on both sides */
}
.card-title2.text-h4 {
padding-top: 34px;
padding-bottom: 8px;
}
.portfolio-filter button.active {
font-weight: bold;
text-decoration: underline;
}
.portfolio-item { display: none; }
.portfolio-item.show { display: block; }
.card-img-top {
height: 100%;
object-fit: cover;
border-radius:0px;
}
.card {
border: none;
border-radius: 0px;
}
.card-body p {
font-size: 16px;
line-height: 200%;
color: black;
font-weight: 400;
font-family: 'HelveticaNowText';
padding:0px ;
max-width: none;
margin: 0 auto;
}
.card-body{
padding:0px;
}
#porftoliofilter-bt{
line-height: 110%;
font-weight: 600;
font-family: 'Futura Cyrillic';
text-transform: uppercase;
text-wrap: balance;
font-size:20px;
color:#CCCCCC;
text-decoration:none;
padding: 0px;
}
#porftoliofilter-btcat{
line-height: 110%;
font-weight: 600;
font-family: 'Futura Cyrillic';
text-transform: uppercase;
text-wrap: balance;
font-size:20px;
color:#CCCCCC;
text-decoration:none;
}
.portfolio-filter button.active {
color: #000 !important; /* make active button text black */
font-weight: bold; /* optional: keep bold for emphasis */
text-decoration: underline; /* optional: keep underline if needed */
}
.hr-porfoliopage{
margin-top:100px;
padding-bottom:145px;
margin-bottom:0px;
}
input#searchInput {
border-top: none;
border-left: none;
border-right: none;
border-radius: 0px;
border-bottom: 1px solid #000000;
width:25%;
}
div#portfolioGrid
{
padding-top: 81px;
padding-bottom: 81px;
row-gap: 70px;
}
/*
portfolio inner page */
.row.portfolio-images {
padding-top: 95px;
}
div#portfolio-video-section {
width: calc(100% - 46px);
}
div#related-porfolio-img div {
padding-right: 0px;
padding-right: 16px;
}
div#related-porfolio-img div:last-child {
padding-right: 0px;
}
div#porfolio-innergallery {
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
}
.row.portfolio-images.mb-5 {
padding-top: 90px;
}
.portfolio-inner-ul{
padding-top:32px;
list-style:square;
}
div#service-pt
{
padding-top: 96px;
padding-bottom:150px;
padding-left:0px;
padding-right:0px;
}
.related-portfolio-section.container-fluid {
background: black;
padding-top: 160px;
padding-bottom: 160px;
}
img.related-img.wp-post-image {
width: 100%;
height: auto;
}
#related-porfolio-img{
padding-top:100px;
}
div#related-porfolio-img a {
text-decoration: none;
}
#related-porfolio-img .related-title {
padding-top: 34px;
padding-bottom:8px;
}
div#related-porfolio-img p {
color: white;
font-size: 16px;
line-height: 200%;
font-weight: 400;
font-family: 'HelveticaNowText';
}
div#project-desc p
{
padding-top: 32px;
padding-bottom: 50px;
}
ul.projects-documents {
list-style: none;
margin: 0;
padding: 0;
}
div#footer_infotext p {
font-family: 'HelveticaNowDisplay';
}
div#footer_infotext span{
font-family: 'HelveticaNowDisplay';
}
/* footer */
/* --- Footer Responsive Styling --- */
@media (max-width: 1024px) {
.footermain .row {
display: flex;
flex-wrap: wrap;
/* text-align: center; */
}
.portfolio-concept
{
padding-top: 25px !important;
}
.overview-count-list .count-wrapper .count-title {
text-align: center;
}
/* Ensure equal spacing and stacking */
.footermain .col-md-5,
.footermain .col-md-2,
.footermain .col-md-3 {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 2rem;
}
/* Center the logo and about text */
.footermain .col-md-5 a.navbar-brand {
display: flex;
}
.footermain #about-footer {
/* text-align: center; */
max-width: 600px;
margin: 0 0px;
}
/* Center links and social icons */
.footermain ul {
padding: 0;
/* text-align: center; */
}
.footermain .footer-link {
display: inline-block;
/* margin: 0 8px; */
}
/* Make button centered */
.footermain .btn-primary-custom {
display: inline-block;
/* margin: 1rem auto; */
}
/* Social icons centered */
.footermain .col-md-2 div {
/* text-align: center; */
margin-top: 10px;
}
/* Footer bottom text centered */
footer .text-end {
text-align: center !important;
margin-top: 2rem;
}
}
/* Optional: Improve readability on smaller tablets (below 768px) */
@media (max-width: 767px) {
footer .text-end {
font-size: 14px;
}
}
/* about page */
.about-pg-section{
padding:160px 0px;
}
.about-pg-section p{
padding-top:39px;
}
.founder-section{
padding:160px 0px;
background-position:center center;
background-size: cover;
}
#founder-img{
padding-top:96px;
z-index: 2;
/* display: block !important; */
position: relative;
}
#founder-text{
padding-top:89px;
max-width:842px;
}
#founder-text p{
color:white;
text-align:center;
}
.founder-name{
font-family: 'HelveticaNowDisplay';
padding-top:35px;
padding-bottom:22px;
FONT-WEIGHT: 700;
FONT-SIZE: 22PX;
}
ul.timelinelist {
list-style: none;
padding: 0;
margin: 0;
}
ul.timelinelist li{
padding-top:20px;
padding-bottom:20px;
border-top:1px solid black;
}
ul.specialities
{
list-style: none;
padding: 0;
margin: 0;
}
div#our_journey {
padding: 160px 0px;
}
/* post production page */
div#accordionFlushExample
{
max-Width: 1186px;
margin: 0 auto;
/* padding: 2%; */
}
.faq-section{
padding:160px 0px;
}
/* brand commercial */
.hero-video_section {
background-image:url('https://highlinestudios.com/wp-content/uploads/2025/11/933b02d650feb58be59c2c3f2207fd8f1171c675-2-scaled.jpg');
background-position:center center;
PADDING: 160px 0PX;
background-size: cover;
}
div#hero-video-section {
max-width: 1014px;
margin-top: 93px;
z-index: 2;
}
/* corporate video
*/
div#\33 feature {
gap: 96px;
padding-top: 60px;
padding-bottom:50px;
}
ul.list3 {
list-style: square;
padding-top: 30px;
margin-bottom:0px;
}
.corporate-content{
padding:160px 0px;
}
p.cororatetext {
padding-right: 100px;
}
div#featurev2 {
padding-bottom: 46px;
gap: 96px;
}
/* industrylist
*/
div#industrylist {
padding: 160px 0px;
}
#featurehero2{
padding-bottom: 120px;
}
.feature.col {
padding-top: 90px;
margin: 0px;
padding-left: 27px;
padding-right: 27px;
}
.clientchoose-section ul {
padding-top: 40px;
margin-bottom:53px;
}
.clientchoose-section ul li{
color:#000;
}
div.testimonial-section .carousel-inner {
padding-top:43px;
}
@media (max-width: 767px) {
.company-overview-section .overview-count-wrapper {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
gap: 2.0625rem;
}
}
@media (min-width: 769px) and (max-width: 1024px)
{
#about-footer {
margin-top: 64px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px)
{
div#footer_infotext {
padding-top: 37px;
}
div#quicklinkmenu {
/* padding-left:5%; */
width:100%;
padding-top: 4%;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
/* Your styles for devices between 798px and 1024px go here */
a.custom-logo-link img {
padding-left: 20px ;
}
.container.header-wrapper{
width: 100% !important;
padding-top: 40px;
padding-bottom: 25px;
}
.company-overview-section .overview-count-wrapper
{
display: grid
;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2.5rem;
margin-bottom: 27px;
}
.overview-count-list .count-wrapper .number-wrapper .number-title, .overview-count-list .count-wrapper .number-wrapper {
position: relative;
font-size: 67px;
}
.hero-wrapper{
background-size:cover !important;
}
img#abt-pg-img{
padding-top:40px;
}
}
/* faq page */
.accordion-button:not(.collapsed){
background-color:white;
}
#industry-pt{
padding:68px 0px;
}
div#ctatesst {
padding-top: 38px;
}
a#black-bt {
margin-top: 54px;
}
/*div#industrysingleparallax {
padding-bottom: 160px;
}*/
.form-group br {
display: none;
}
ul.portfolio-inner-ul li {
color: black;
}
ul.projects-documents li
{
color: black;
}
.owl-theme .owl-nav.disabled+.owl-dots {
margin-top: 67px;
}
/* square corner border
*/
.breadcrumb-section {
position: relative;
background-size: cover;
background-position: center center !important;
padding: 100px 0; /* adjust vertical space */
}
/* Overlay frame inside hero ~90% size */
.overlay-frame {
position: absolute;
top: 5%; /* small gap from hero edges */
left: 5%;
width: 90%;
height: 90%; /* covers most of hero */
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
pointer-events: none; /* overlay wonâ??t block clicks */
}
/* Corner divs inside overlay-frame */
.corner {
position: absolute;
/* originally these were 30px */
width: 24px;
height: 24px;
}
/* Position each corner relative to overlay-frame */
.corner.top-left {
/* originally these were set to 50px */
top: 40px;
left: 40px;
border-left: 1px solid white;
border-top: 1px solid white;
}
.corner.top-right {
top: 40px;
right: 40px;
border-right: 1px solid white;
border-top: 1px solid white;
}
.corner.bottom-left {
bottom: 40px;
left: 40px;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
.corner.bottom-right {
bottom: 40px;
right: 40px;
border-right: 1px solid white;
border-bottom: 1px solid white;
}
@media (max-width: 768px){
.corner.top-left {
/* originally these were set to 30px */
top: 24px;
left: 24px;
border-left: 1px solid white;
border-top: 1px solid white;
}
.corner.top-right {
top: 24px;
right: 24px;
}
.corner.bottom-left {
bottom: 24px;
left: 24px;
}
.corner.bottom-right {
bottom: 24px;
right: 24px;
}
}
@media (max-width: 768px) {
div#testimonialCarousel {
padding-top: 63px;
padding-bottom: 80px;
}
.impact-section {
border-top: 0.5px solid white;
overflow: hidden;
padding: 74px 0px 80px 0px;
text-align: center;
}
.owl-carousel.owl-theme.clients-carousel.owl-loaded.owl-drag {
padding-top: 39px;
}
#featurehero2 {
padding-bottom: 80px !important;
}
.breadcrumb-section {
height: 485px !important;
}
.parallax-section {
background-position: center center;
}
}
.parallax-section{
height: 485px;
}
/* Default (collapsed) state */
.accordion-button::after {
flex-shrink: 0;
width: 19px;
height: 19px;
background-image: url('https://highlinestudios.com/wp-content/uploads/2025/10/plus.png'); /* your + icon */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease, background-image 0.3s ease;
margin-left: auto;
margin-right: -10px;
}
/* Open (expanded) state */
.accordion-button:not(.collapsed)::after {
background-image: url('https://highlinestudios.com/wp-content/uploads/2025/11/line2.png'); /* your â?? icon */
}
.test{
/* position:relative; */
overflow:hidden;
}
/*
.hero-video_section::after,.founder-section::after{
content: "";
position: absolute;
inset: 0;
background-image:
url("data:image/svg+xml;utf8,\
");
background-size: cover;
mix-blend-mode: overlay;
opacity: 2;
animation: grainMove 1.2s steps(2) infinite;
pointer-events: none;
} */
.hero-video_section::after,
.founder-section::after {
content: "";
position: absolute;
inset: 0;
/*
background-image: url("data:image/svg+xml;utf8,\
");
*/
/* VERY LARGE GRAIN */
background-size: 300px 300px;
mix-blend-mode: overlay;
opacity: 0.7;
animation: grainMove 1s steps(2) infinite;
pointer-events: none;
z-index: 1;
}
.test.testimonials-bgwrapper::after{
display:none;
}
/* .test.testimonials-bgwrapper::after{
content: "";
position: absolute;
inset: 0;
background-size: 300px 300px;
mix-blend-mode: overlay;
opacity: 0.7;
animation: grainMove 1s steps(2) infinite;
pointer-events: none;
z-index: 1;
} */
.hero-video_section,.founder-section{
position:relative;
overflow:hidden;
}
/* ==== MAIN MENU (Desktop Hover Animation) ==== */
#menu-main-navigation a {
padding-top: 56px;
padding-bottom: 43px;
position: relative;
display: inline-block;
/* color: #fff; */
text-decoration: none;
background-image: linear-gradient(var(--hs-accent), var(--hs-accent));
background-origin: content-box;
background-position: 0 calc(100% + 4px);
background-repeat: no-repeat;
background-size: 0% 5px;
transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#menu-main-navigation a:hover {
/* color: #F77F00; */
background-size: 100% 5px;
text-decoration: none;
}
#menu-main-navigation .current-menu-item > a {
/* color: #F77F00; */
background-size: 0% 5px;
}
.hero-video_section,
.testimonials-bgwrapper,
.founder-section {
background: linear-gradient(-45deg, #FFAD4D, #FF5526, #F77F00, #ffae59);
background-size: 400% 400%;
animation: gradient 4s ease infinite;
/* background: linear-gradient(
-45deg,
#F77F00,
#FFAD4D,
#FF5526,
#000000,
#F77F00
);
background-size: 500% 500%;
animation: gradient 8s ease infinite; */
/* min-height: 100vh; */
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ==== DISABLE HOVER ON MOBILE (below 1024px) ==== */
@media (max-width: 1024px) {
#menu-main-navigation a {
background-size: 0 !important;
transition: none !important;
}
#menu-main-navigation a:hover {
background-size: 0 !important;
}
}
div#breadcrumb-new {
margin-top: 148px;
max-width: none !important;
}
@media (min-width: 1570px) {
div#breadcrumb-new {
margin-top: 148px;
max-width: 1528px !important;
}
}
@media (max-width: 768px){
.container.client-wrapper div div .owl-item {
padding: 0px 10px !important;
}
ul.sub-menu li a:hover {
text-decoration: none !important;
color: #ffffff !important;
}
#mobilefeature{
display:block;
}
#mobilefeature2{
display:flex;
}
#desktopfeature{
display:none;
}
#desktopfeature2{
display:none;
}
#menu-main-navigation a{
padding-top:0px;
padding-bottom:16px;
}
header.scrolled .container.header-wrapper #menu-main-navigation a{
padding-bottom:16px ;
padding-top:0px ;
}
ul#menu-main-navigation ul.submenu li:last-child a {
margin-top:0px !important;
}
ul.sub-menu li:last-child a{
margin-top:0px !important;
}
header.scrolled .container.header-wrapper #menu-main-navigation li:last-child a{
padding: 6px 11px;
}
ul.navbar-nav li a{
padding-left:79px;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
color: #ffffff;
text-align: left;
padding-left: 49px;
line-height: 150%;
font-family: 'Futura Cyrillic';
}
}
@media (min-width: 769px) {
#mobilefeature{
display:none;
}
#mobilefeature2{
display:none;
}
#desktopfeature{
display:block; }
#desktopfeature2{
display:flex; }
.impact-section h2::before
{
display:none !important;
}
.impact-section h2::after
{
display:none !important;
}
}
#menu-main-navigation .current-menu-item > a {
text-decoration-line: underline;
text-decoration-thickness: 5px !important;
text-underline-offset: 5px;
text-decoration-color: #F77F00;
}
.navbar-nav .sub-menu li a {
padding:0px !important;
/* font-size: 18px !important; */
line-height: 250%;
font-family: 'Futura Cyrillic' !important;
}
.footerwork a:hover {
background: #3F3F3F !important;
}
@media (max-width: 992px) and (min-width: 769px) {
.container.header-wrapper {
padding-top: 40px !important;
padding-bottom: 25px !important;
}
}
ul.sub-menu li a:hover {
text-decoration: none !important;
color: #F77F00 !important;
}
.container.client-wrapper div div .owl-item {
padding: 0px 20px !important;
}
@media (max-width: 1440px) and (min-width: 1024px) {
div#quicklinkmenu {
width: 16% !important;
padding-left: 20px;
}
}
@media (max-width: 991px) and (min-width: 769px) {
a.custom-logo-link img {
/* Was 'width: auto !important', which overrode the global 156px and, with height also auto, let the logo render at its intrinsic 841px in this one band. */
width: 156px !important;
height: auto !important;
}
header.scrolled .container.header-wrapper #menu-main-navigation a {
padding-top:0px !important;
padding-left:49px;
}
a.custom-logo-link img{
margin-top:0px;
}
.navbar-toggler{
margin-top:0px !important;
}
ul#menu-main-navigation li ul.sub-menu li:last-child a{
margin-top:0px !important;
}
header.scrolled .container.header-wrapper ul#menu-main-navigation li:last-child a {
/* display: none; */
background: white;
text-color: orange;
width: 212px;
text-align: center;
margin: 0 auto;
padding: 8px 11px;
color: #F77F00;
margin-left: 50px;
margin-top: 17px;
}
.navbar-collapse{
margin-top:15px;
}
header.scrolled .container.header-wrapper #menu-main-navigation a
{
padding-bottom: 16px !important;
}
header.scrolled .container.header-wrapper ul#menu-main-navigation li:last-child a
{
padding: 8px 11px !important;
}
header.scrolled .container.header-wrapper ul#menu-main-navigation li ul.sub-menu li a
{
padding-top: 0px !important;
padding-bottom:0px !important;
}
header.scrolled .container.header-wrapper ul#menu-main-navigation li ul.sub-menu li:last-child a{
padding-top:0px !important;
padding-bottom:0px !important;
}
header.scrolled .container.header-wrapper ul#menu-main-navigation li ul.sub-menu li:last-child a{
margin-left:39px !important;
}
#menu-main-navigation a:hover{
text-decoration-color:white;
}
}
}
@media (max-width: 991px) {
#menu-main-navigation a{
font-size:16px !important
}
.navbar-nav .sub-menu li a {
font-size:16px !important;
}
ul.sub-menu li a{
font-size:16px !important;
}
}
.hero-video-wrapper{
max-height:768px;
}
@media (max-width:1024px) {
.hero-video-wrapper{
max-height:500px;
}
}
.video_caption
{
padding-top:0px !important;
color:#939393;
font-size:14px;
}
a.breadcrumb-maintext:hover span{
color:#F77F00;
}
.card-img-top {
max-width: 499px;
width: 100%;
height: 323px !important;
object-fit: cover;
}
.video-summary p{
color:#ffffff;
margin-top:20px;
}
@media (min-width: 1024px) {
#industrysingleparallax{
margin-bottom:160px;
}
}
@media (max-width: 1023px) {
#industrysingleparallax{
margin-bottom:80px;
}
}
@media (min-width: 1920px) {
.video_Wistia-wrapper {
padding-bottom: 30% !important;
}
}
/* Responsive video iframe */
#clientchoose-wrapper iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
}
@media (max-width: 987px) {
#clientchoose-wrapper iframe {
margin-top: 30px;
}
}
@media (min-width: 1200px) {
.container {
width: calc(100% - 40px);
max-width: 1528px !important;
}
}
@media (min-width: 1689px) {
.hero-video-bg-main{
padding-bottom:0px !important;
}
}
.slick-slide img{
max-width:100%;
height:80px;
object-fit:contain;
margin-right:15px;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
padding-top: 78px !important;
}
.slick-item{
width:276px !important;
height:80px;
}
.clients-section {
padding: 80px 0;
}
@media (max-width: 768px) {
.clients-section {
padding: 60px 0;
}
.slick-item{
width:180px !important;
height:50px !important;
}
.slick-slide img{
max-width:100%;
height:50px;
object-fit:contain;
margin-right:10px;
}
.slick-slider {
padding-top:39px!important;
}
}
.clients-slick-slider .slick-slide {
display: flex !important;
align-items: center;
justify-content: center;
}
.clients-slick-slider img {
object-fit: contain;
}
/* .hero-caption-section {
position: relative !important;
height: 0 !important;
width: calc(100% - 40px) !important;
max-width: 1528px !important;
margin: 0 auto 0 auto !important;
}
.hero-caption-section .container {
width:100% !important;
padding: 0 50px !important;
max-width: none !important;
}
@media (max-width: 768px) {
.hero-caption-section .container {
padding: 0 30px !important;
}
} */
@media (min-width: 1540px) {
.video_Wistia-wrapper {
padding-bottom: 0% !important;
min-height: 570px !important;
}
}
.video_Wistia-hero {
padding-bottom: 0% !important;
min-height: 800px !important;
}
}
.video_Wistia-wrapper iframe {
aspect-ratio: 16 / 9;
}
nav[aria-label="breadcrumb"] span {
color: #6c757d; /* Black for all */
text-decoration:none !important;
font-size: 16px;
line-height: 200%;
font-weight: 400;
font-family: 'HelveticaNowText';
}
a.breadcrumb-maintext {
text-decoration: none;
}
nav[aria-label="breadcrumb"] .breadcrumb-last span {
color: #F77F00 !important; /* Last item red */
font-size: 16px;
line-height: 200%;
}
nav.text-p.text-white {
margin-top: 20px;
}
.breadcrumb-section {
margin-top: 41px;
}
.feature.slick-slide {
opacity: .3;
}
.feature.slick-slide.slick-current.slick-active.slick-center {
opacity: 1;
}
.vimeo-fullwidth {
position: relative;
width: 100vw; /* full viewport width */
height: 670px;
left: 50%;
right: 50%;
margin-left: -50vw; /* break out of container */
margin-right: -50vw;
overflow: hidden;
}
.vimeo-fullwidth iframe {
width: 100%;
height: 100%;
}
.vimeo-fullwidth iframe {
object-fit: cover;
}
@media (max-width: 768px) {
.vimeo-fullwidth {
height: 60vh;
}
}
.vimeovideo-container .vimeo-fullwidth,
.fullwidthvideo-container {
width: 100%;
aspect-ratio: 16 / 9;
min-height: 400px;
}
.fullwidthvideo-container iframe {
width: 100%;
height: 100%;
}
.vimeovideo-container .vimeo-fullwidth {
position: relative;
padding-bottom: 56.25%; /* 16:9 Ratio (9 / 16 = 0.5625) */
height: 0;
overflow: hidden;
min-height: 400px;
}
.vimeovideo-container .vimeo-fullwidth iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
section.breadcrumb-section.video-breadcrumb{
margin-top:0px!important;
}
.video_Wistia-wrapper {
position: relative;
padding-bottom: 54.5%;
height: 0;
min-height: 200px!important;
width: calc(100% - 40px);
max-width: 1528px;
margin:41px auto 0 auto;
}
.video_Wistia-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
.vimeovideo-container .vimeo-fullwidth iframe { left: 50%;width: 100%; transform: translateX(-50%);}
.video_Wistia-wrapper { padding-bottom: 0; aspect-ratio: 16 / 9; height: auto; min-height: 0 !important; margin: 105px auto 0 auto; }
.video_Wistia-wrapper iframe { left: 0; width: 100%; height: 100%; transform: none; }
}
@media (min-width: 1540px) {
.video_Wistia-wrapper {
padding-bottom: 0% !important;
min-height: 800px !important;
}
}
.video-breadcrumb {
position: relative;
width: 100%;
height: 527px; /* adjust height */
overflow: hidden;
}
.breadcrumb-embed-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.breadcrumb-embed-wrapper iframe {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none; /* prevents interaction */
}
.vimeo-fullwidth {
position: relative;
width: 100vw; /* full viewport width */
height: 670px;
left: 50%;
right: 50%;
margin-left: -50vw; /* break out of container */
margin-right: -50vw;
overflow: hidden;
}
.vimeo-fullwidth iframe {
width: 100%;
height: 100%;
}
.vimeo-fullwidth iframe {
object-fit: cover;
}
@media (max-width: 768px) {
.vimeo-fullwidth {
height: 60vh;
}
}
.owl-carousel .owl-stage {
transition-timing-function: linear !important;
}
/* Only when Owl Carousel is ACTIVE (mobile) */
.services-carousel-wrapper.owl-loaded,
.services-carousel-wrapper.owl-loaded .owl-stage-outer {
overflow: visible !important;
}
/* Make cols behave like slides ONLY when carousel is active */
.services-carousel-wrapper.owl-loaded .col {
flex: none !important;
width: auto !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Center/dim style (safe for both desktop + mobile) */
.services-carousel-wrapper .owl-item {
transition: opacity .3s, transform .3s;
}
.services-carousel-wrapper .owl-item.center {
opacity: 1;
transform: scale(1);
}
.services-carousel-wrapper .owl-item:not(.center) {
opacity: 0.45;
transform: scale(.92);
}
/*home */
.hero-video-bg-main {
position: relative;
padding-bottom: 51.25%;
height: 0;
min-height: 400px;
width: calc(100% - 40px);
max-width: 1528px;
margin: 130px auto 0 auto;
}.hero-video-bg-main iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner-contentblock{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:99999;
}
.hero-content_wrapper{
text-align:center;
}
@media (max-width: 991px) {
.hero-video-bg-main {
padding-bottom: 50%;
min-height: 10px;
margin:105px auto 0 auto;
}
}
.hero-video-iframe {
pointer-events: none;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-video-wrapper {
position: relative;
width: 100%;
height: 100vh; /* full hero height */
overflow: hidden;
}
.hero-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.hero-video-iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.77vh; /* 16:9 scaling based on HERO height */
height: 100vh;
transform: translate(-50%, -50%);
pointer-events: none;
border: 0;
}
@media (max-width: 767px) {
/* For mobile, scale width instead */
.hero-video-iframe {
width: 100vw;
height: 100%; /* 9/16 for mobile */
}
.hero-video-wrapper {
height:auto;
}
}
@media (max-width: 1370px) and (min-width: 1025px){
.abt-section {
padding: 55px 0px;
}
.hero-video-wrapper {
height: 87vh !important;
}
}
.hero-wrapper {
position: relative;
background-size: cover;
background-position: center;
padding: 100px 0; /* adjust vertical space */
}
@media (max-width: 768px) {
.text-h4 {
text-wrap:auto;
}
}
@media (max-width: 991px) {
.slider-wrapperblock .container{ width: 100%;}
.slick-dotted.slick-slider {
margin: 0 -40px;
}
.slider-wrapperblock .heading-section {
min-height:70px;
}
.slider-wrapperblock ul.slick-dots {
bottom: -40px;
}
.slider-wrapperblock .slick-dots li button:before {
font-size: 10px;
}
}
.owl-carousel .owl-stage {
transition-timing-function: linear !important;
}
/* Only when Owl Carousel is ACTIVE (mobile) */
.services-carousel-wrapper.owl-loaded,
.services-carousel-wrapper.owl-loaded .owl-stage-outer {
overflow: visible !important;
}
/* Make cols behave like slides ONLY when carousel is active */
.services-carousel-wrapper.owl-loaded .col {
flex: none !important;
width: auto !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Center/dim style (safe for both desktop + mobile) */
.services-carousel-wrapper .owl-item {
transition: opacity .3s, transform .3s;
}
.services-carousel-wrapper .owl-item.center {
opacity: 1;
transform: scale(1);
}
.services-carousel-wrapper .owl-item:not(.center) {
opacity: 0.45;
transform: scale(.92);
}
/* Logo Marquee - pure CSS, no JavaScript */
.logo-marquee {
overflow: hidden;
width: 100%;
padding-top: 78px;
-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.logo-marquee__track {
display: flex;
width: max-content;
animation: logo-marquee-scroll var(--marquee-duration, 8s) linear infinite;
}
.logo-marquee:hover .logo-marquee__track {
animation-play-state: paused;
}
.logo-marquee__item {
flex: 0 0 auto;
width: 276px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-marquee__item img {
width: 220px;
height: 80px;
object-fit: contain;
display: block;
}
@keyframes logo-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logo-marquee__track {
animation: none;
}
}
/* Logo Marquee mobile - copied exactly from homepage's .slick-item / .slick-slide img / .slick-slider rules */
@media (max-width: 768px) {
.logo-marquee__item {
width: 180px !important;
height: 50px !important;
}
.logo-marquee__item img {
max-width: 100%;
height: 50px;
object-fit: contain;
margin-right: 10px;
}
.logo-marquee {
padding-top: 39px !important;
}
}
/* Align feature card icons to a consistent height so titles/text below line up evenly */
.feature-icon-wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
height: 80px;
}
.feature-icon-wrapper img {
height: 80px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Give feature card titles a consistent height so description text below always starts at the same line, regardless of title length */
.feature.col h3.text-h4 {
min-height: 86px;
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
margin: 0;
}
/* On mobile, feature cards show one at a time (carousel), so the fixed title height meant to align a multi-column desktop grid just adds dead space above the description. Remove it on mobile only. */
@media (max-width: 768px) {
.feature.col h3.text-h4 {
min-height: auto;
}
}
/* --- Nav current-page indicator: flush gradient bar instead of text-decoration --- */
ul#menu-main-navigation li.current-menu-item > a,
ul#menu-main-navigation li.current-menu-item > a:hover {
text-decoration: none;
background-size: 100% 5px;
}
/* --- Footer: suppress the generic p/li underline so only the gradient bar shows --- */
footer li a:hover,
footer p a:hover {
text-decoration: none;
}
/* More Works card alignment. Desktop only: once cards stack into one column
the 16px gutter sits on the right alone and pulls the section off-centre. */
@media (min-width: 769px) {
div#related-porfolio-img > div,
div#related-porfolio-img > div:last-child {
padding-right: 16px !important;
}
}
@media (max-width: 768px) {
div#related-porfolio-img > div,
div#related-porfolio-img > div:last-child {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
img.related-img.wp-post-image {
width: 100%;
height: auto;
aspect-ratio: 499 / 323;
object-fit: cover;
display: block;
}
/* Align Services Provided with Concept heading on desktop */
@media (min-width: 992px) {
#project-desc .portfolio-concept {
padding-top: 0 !important;
}
}
/* Tighten gap between hero video and gallery */
.row.portfolio-images {
padding-top: 40px !important;
}
/* Portfolio hero spacing - H1 block is now first, video no longer leads */
/* Desktop only: matches the 41px breadcrumb-to-hero gap used on /industry/.
Do NOT make this global - the breadcrumb is display:none below 768px, so
mobile needs the larger padding to clear the fixed header. */
@media (min-width: 769px) {
div#porfolio-abt-breif {
padding-top: 41px !important;
padding-bottom: 64px !important;
}
}
@media (max-width: 768px) {
div#porfolio-abt-breif {
padding-top: 150px !important;
padding-bottom: 48px !important;
}
}
div#portfolio-video-section {
margin-top: 0 !important;
}
/* Portfolio H1 sits in a half-width column, so cap the large desktop sizes.
NOTE: this element must keep .text-h1 - it is the page H1. Never give it .text-h2,
or mobile drops to 28px while every other page H1 renders 40px. */
@media (min-width: 1201px) {
#porfolio-abt-breif h1.text-h1 {
font-size: 60px;
line-height: 63px;
padding-right: 0;
}
}
/* Safety net: an h1 must never render at h2 scale.
If .text-h2 ever gets applied to an h1 again, force the h1 type scale so
mobile does not silently drop to 28px while other page H1s render 40px. */
h1.text-h2 { font-size: 90px; line-height: 80%; letter-spacing: -0.02em; }
@media (max-width: 1200px) { h1.text-h2 { font-size: 60px; } }
@media (max-width: 768px) { h1.text-h2 { font-size: 40px; line-height: 105%; } }
/* portfolio-brief-gutter
The brief H1 column zeroes its own left padding to stay flush with the
breadcrumb, so it needs an explicit right gutter or a full-width H1 line
runs straight into #brief_para. 30px matches #widthcustompara on the
/industry/ pages; the columns stack below 992px, so no gutter is needed. */
@media (min-width: 992px) {
#porfolio-abt-breif .row > .col-lg-6:first-child {
padding-right: 30px;
}
}
/* ---------------------------------------------------------------
Logo scroller - static row of logos with prev/next arrows.
Nothing autoplays; the visitor drives it. Steps one logo per
click, eased in JS so the timing curve is controllable.
Edges fade via a mask so logos appear to dissolve in and out.
Arrow colour is plain white to match the existing .clients
section text - no new brand colour introduced.
--------------------------------------------------------------- */
.logo-scroller {
position: relative;
padding-top: 78px;
display: flex;
align-items: center;
gap: 8px;
}
.logo-scroller__track {
--fade-left: 90px;
--fade-right: 90px;
display: flex;
flex: 1 1 auto;
overflow-x: auto;
overflow-y: hidden;
cursor: grab;
touch-action: pan-x;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: -webkit-mask-image .3s ease, mask-image .3s ease;
}
.logo-scroller.is-start .logo-scroller__track {
--fade-left: 0px;
}
.logo-scroller.is-end .logo-scroller__track {
--fade-right: 0px;
}
.logo-scroller.is-dragging .logo-scroller__track {
cursor: grabbing;
}
.logo-scroller__track::-webkit-scrollbar {
display: none;
}
.logo-scroller__track:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
}
.logo-scroller__item {
flex: 0 0 auto;
width: 276px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
-webkit-user-select: none;
user-select: none;
}
.logo-scroller__item img {
width: 220px;
height: 80px;
object-fit: contain;
display: block;
pointer-events: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
}
.logo-scroller__btn {
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .25s ease;
}
.logo-scroller__btn svg {
width: 28px;
height: 28px;
}
.logo-scroller__btn:hover:not([disabled]) {
opacity: .6;
}
.logo-scroller__btn[disabled] {
opacity: .25;
cursor: default;
}
.logo-scroller.is-static .logo-scroller__btn {
display: none;
}
@media (max-width: 768px) {
.logo-scroller {
padding-top: 39px;
gap: 4px;
}
.logo-scroller__track {
--fade-left: 40px;
--fade-right: 40px;
}
.logo-scroller__item {
width: 180px;
height: 50px;
}
.logo-scroller__item img {
width: 150px;
height: 50px;
}
.logo-scroller__btn {
width: 36px;
height: 36px;
}
.logo-scroller__btn svg {
width: 22px;
height: 22px;
}
}
/* ---------------------------------------------------------------
Logo grid - every logo visible at once. No motion, no controls,
no JavaScript. Used sitewide for the client logo strip.
Column count is fixed per breakpoint and the cells are a
fraction of the container, so the row always fills the full
width instead of leaving dead space on wide screens.
A short final row centres itself.
--------------------------------------------------------------- */
.logo-grid {
--cols: var(--cols-xl, 7);
--gap-x: 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 40px var(--gap-x);
padding-top: 78px;
padding-left: 40px;
padding-right: 40px;
}
.logo-grid__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
min-height: 64px;
}
.logo-grid__item img {
max-width: 100%;
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
@media (max-width: 1199px) {
.logo-grid {
--cols: var(--cols-lg, 5);
}
}
@media (max-width: 991px) {
.logo-grid {
--cols: var(--cols-md, 4);
}
}
@media (max-width: 768px) {
.logo-grid {
--cols: var(--cols-sm, 3);
--gap-x: 16px;
gap: 28px var(--gap-x);
padding-top: 39px;
padding-left: 20px;
padding-right: 20px;
}
.logo-grid__item {
min-height: 44px;
}
.logo-grid__item img {
max-height: 44px;
}
}
@media (max-width: 479px) {
.logo-grid {
--cols: var(--cols-xs, 2);
}
}
/* --- More Works card hover: image zoom + title underline sweep --- */
#related-porfolio-img .related-thumb{
overflow: hidden;
display: block;
padding: 0 !important;
line-height: 0;
}
#related-porfolio-img .related-thumb img.related-img{
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
#related-porfolio-img a:hover .related-thumb img.related-img,
#related-porfolio-img a:focus-visible .related-thumb img.related-img{
transform: scale(1.06);
}
#related-porfolio-img .related-title{
display: inline-block;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 5px;
background-origin: padding-box;
transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#related-porfolio-img a:hover .related-title,
#related-porfolio-img a:focus-visible .related-title{
background-size: 100% 5px;
}
@media (prefers-reduced-motion: reduce){
#related-porfolio-img .related-thumb img.related-img,
#related-porfolio-img .related-title{ transition: none; }
}
/* ---------------------------------------------------------------
Homepage service cards - hover or keyboard-focus anywhere on the
card and the icon, title and LEARN MORE all respond together.
The icon recolour uses the PNG transparency as a stencil, so no
second set of orange icon files is needed.
Accent #F77F00 approved 2026-07-30; known 2.63:1 against white.
--------------------------------------------------------------- */
.services-stack-grid .feature.col .feature-icon { position: relative; }
.services-stack-grid .feature.col .feature-icon img { transition: opacity .25s ease; }
.services-stack-grid .feature.col .feature-icon::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--hs-accent);
-webkit-mask-image: var(--icon-src);
mask-image: var(--icon-src);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.services-stack-grid .feature.col h3.text-h4,
.services-stack-grid .feature.col a.text-h5.icon-link.ctlink { transition: color .25s ease; }
.services-stack-grid .feature.col:hover .feature-icon img,
.services-stack-grid .feature.col:focus-within .feature-icon img { opacity: 0; }
.services-stack-grid .feature.col:hover .feature-icon::after,
.services-stack-grid .feature.col:focus-within .feature-icon::after { opacity: 1; }
.services-stack-grid .feature.col:hover h3.text-h4,
.services-stack-grid .feature.col:focus-within h3.text-h4,
.services-stack-grid .feature.col:hover a.text-h5.icon-link.ctlink,
.services-stack-grid .feature.col:focus-within a.text-h5.icon-link.ctlink { color: var(--hs-accent); }
/* Service card icon lift on hover/focus. Scales the wrapper so the
black PNG and the orange overlay grow together. */
.services-stack-grid .feature.col .feature-icon {
transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.services-stack-grid .feature.col:hover .feature-icon,
.services-stack-grid .feature.col:focus-within .feature-icon {
transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.services-stack-grid .feature.col .feature-icon { transition: none; }
.services-stack-grid .feature.col:hover .feature-icon,
.services-stack-grid .feature.col:focus-within .feature-icon { transform: none; }
}
/* LEARN MORE underline follows the text colour on hover/focus.
The base rule hard-codes text-decoration-color: black, so the
underline stayed black while the words went orange. */
.services-stack-grid .feature.col a.text-h5.icon-link.ctlink {
transition: color .25s ease, text-decoration-color .25s ease;
}
/* ---------------------------------------------------------------
Service cards - touch behaviour.
1. The title link is stretched across the whole card, so the icon
and the surrounding space are tappable, not just the words.
2. Hover and focus effects are switched off where there is no
real pointer, so tapping does not flash orange or leave a card
stuck in its hover state after a back-navigation.
3. Titles stay black on touch - the orange trial was reverted
2026-07-30 at Damon's request.
--------------------------------------------------------------- */
.services-stack-grid .feature.col { position: relative; }
.services-stack-grid .feature.col .service-title-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.services-stack-grid .feature.col a.text-h5.icon-link.ctlink {
position: relative;
z-index: 2;
}
@media (hover: none) {
.services-stack-grid .feature.col:hover .feature-icon img,
.services-stack-grid .feature.col:focus-within .feature-icon img { opacity: 1; }
.services-stack-grid .feature.col:hover .feature-icon::after,
.services-stack-grid .feature.col:focus-within .feature-icon::after { opacity: 0; }
.services-stack-grid .feature.col:hover .feature-icon,
.services-stack-grid .feature.col:focus-within .feature-icon { transform: none; }
.services-stack-grid .feature.col:hover h3.text-h4,
.services-stack-grid .feature.col:focus-within h3.text-h4,
.services-stack-grid .feature.col:hover a.text-h5.icon-link.ctlink,
.services-stack-grid .feature.col:focus-within a.text-h5.icon-link.ctlink { color: inherit; }
}
/* ---------------------------------------------------------------
Services module (Los Angeles Video Production Services) spacing,
from the Figma frame: 151 above heading / 102 heading to first
icon / 36 icon to title / 34 title to LEARN MORE / 100 below.
151 and 100 already come from div#featured-3 and are left alone.
36 already comes from .spacing-sm and is left alone.
.section-3 appears once in the template, so it is a safe anchor
and does not touch the Industries module below. */
.section-3 h2.text-h2 {
margin-top: 0;
margin-bottom: 102px;
}
/* the title can run to two lines; zero only the last one so the gap
below is exactly the 34 set on LEARN MORE, not 34 plus a stray
heading margin, while the two title lines keep their own spacing */
.section-3 .heading-section h3.text-h4:last-child {
margin-bottom: 0;
}
.section-3 .services-stack-grid a.text-h5.icon-link.ctlink {
padding-top: 34px;
}
/* NOT from Figma - proportional reduction for narrow screens. */
@media (max-width: 768px) {
.section-3 h2.text-h2 { margin-bottom: 61px; }
}
/* .feature.col carries padding-top: 60px (index.php, overriding a 90px
rule in style.css). That sat on top of the 102px heading margin, so
the real gap above the icons was 162px against 100px below the cards
- which is why the row read as sitting low. Zeroing it here makes the
Figma 102 the whole gap. Scoped to the services grid so the
Industries tiles, which share .feature.col, are untouched. */
/* Only from 992px up, where the cards sit side by side. Below that they
stack in one column and that same 60px is the ONLY gap between one
card and the next - zeroing it there ran them together. */
@media (min-width: 992px) {
.section-3 .services-stack-grid .feature.col {
padding-top: 0;
}
}
/* Normalize featured-section to design-system spacing; outranks the inline 128px override in the Corporate Video template (template file edits are blocked server-side) */
#main-content .featured-section { padding: 160px 0; }
@media (max-width: 768px) {
#main-content .featured-section { padding: 74px 0; }
}
/* Design-system spacing overrides for template-level values that cannot be edited directly (PHP file writes are blocked server-side) */
@media (min-width: 769px) {
#main-content div#industrylist { padding: 160px 0; } /* Industries page card grid; outranks inline 75px */
}
@media (min-width: 1371px) {
.clientchoose-section ~ .industries-section { padding-top: 160px; } /* Homepage only; outranks inline 151px; tablet/mobile rules preserved */
}
/* FAQ answer bullet lists (real ul/li, converted from br-separated bullet chars): breathing room above/below, keep the compact bullet look */
.faq-section .accordion-body ul {
list-style: none;
margin: 12px 0;
padding-left: 0;
}
.faq-section .accordion-body ul li {
margin: 0;
padding: 0;
}
.faq-section .accordion-body ul li::before {
content: "\2022\00a0\00a0";
}
/* ============================================================
Reusable CSS-only parallax (scroll-driven animation)
Usage: add class "hl-parallax" to any element that already has
a background-image (inline or CSS) and a set height.
The image moves to a taller ::before layer and drifts as the
section scrolls through the viewport.
Browsers without scroll-driven animation support, and users
with reduced motion enabled, get a normal static image.
First used: Architecture, Engineering, Construction parallax
sections (desktop + mobile).
============================================================ */
.hl-parallax {
position: relative;
/* overflow: clip (not hidden) - hidden creates a scroll container,
which hijacks the view() timeline and freezes the animation */
overflow: hidden;
overflow: clip;
}
.hl-parallax::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -35%;
bottom: -35%;
background-image: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.hl-parallax > * {
position: relative;
z-index: 1;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hl-parallax::before {
animation: hl-parallax-drift linear both;
animation-timeline: view();
}
}
}
@keyframes hl-parallax-drift {
from { transform: translateY(-20%); }
to { transform: translateY(20%); }
}
/* Required for hl-parallax: the theme's earlier html,body overflow-x:hidden
rule makes a scroll container, which detaches scroll-driven
animations from the real page scroll and freezes them. clip prevents
horizontal scrolling identically but does not create a scroll container. */
html, body {
overflow-x: clip;
}
/* --- Blog single post content styles (added for blog system build) --- */
.blog-single p { margin-bottom: 24px; line-height: 1.7; }
.blog-single h2 { margin-top: 48px; margin-bottom: 20px; }
.blog-single h3 { margin-top: 36px; margin-bottom: 16px; }
.blog-single ul, .blog-single ol { margin-bottom: 24px; padding-left: 28px; }
.blog-single li { margin-bottom: 10px; line-height: 1.7; }
.blog-single blockquote { margin: 40px 0; padding: 8px 0 8px 24px; border-left: 4px solid currentColor; font-size: 1.15em; }
.blog-single img, .blog-single figure { max-width: 100%; height: auto; margin: 32px 0; }
.blog-single p.post-meta { margin-bottom: 40px !important; font-size: 0.9em; } /* !important: a later rule zeroes p margins here */
.blog-single { padding-top: 160px; padding-bottom: 160px; }
/* Blog single: everything in the 740px reading column */
.blog-single > .container > * {
max-width: 740px;
margin-left: auto;
margin-right: auto;
}
/* Blog FAQ block: match FAQ page spacing (blog h2/h3 content margins otherwise leak in) */
.blog-faq-block .accordion-header { margin: 0 !important; }
.blog-faq-block > h2 { margin: 0 !important; }
/* Blog Related Work: full-bleed band like portfolio pages, breaking out of the 740px column */
.blog-single > .container > .related-portfolio-section { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Blog Related Work: zero the blog content heading margins inside the band so it matches portfolio pages */
.blog-single .blog-related-work h2, .blog-single .blog-related-work h3 { margin: 0 !important; }
/* CTA as the last element: let the section's own 160px bottom padding provide the space (inline margin needs the !important) */
.blog-single > .container > .blog-cta-banner:last-child { margin-bottom: 0 !important; }
.blog-single > .container > .related-portfolio-section + .blog-cta-banner { margin-top: 160px; }
/* CTA banner subline: keep the gap to the button (a text-h4 !important margin rule otherwise zeroes it) */
.blog-cta-banner p.text-h4 { margin-bottom: 48px !important; }
/* Post Hero: 740px column width, media flush to the column edges (no inner padding) */
.blog-post-hero .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
.blog-post-hero img { width: 100%; height: auto; }
/* Blog post titles: article scale instead of the 80px page-hero scale */
.blog-single h1.text-h1 { font-family: 'Futura Cyrillic Extra', 'Futura Cyrillic', sans-serif !important; font-size: 60px !important; line-height: 105% !important; letter-spacing: -0.01em; font-weight: bold; }