/*!
Theme Name: proclensefm
Theme URI: http://underscores.me/
Author: CPM Webdesign
Author URI: https://cpmwebdesign.co.uk
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: proclensefm
Tags: Custom Template, Bootstrap 5,

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

proclensefm is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*
 * Custom css (https://cpmwebdesign.co.uk/)
 * 
 */
/*--------------------------------------------------------------
# vars
--------------------------------------------------------------*/ 
:root {
  --pc-orange: #FAA01A;
  --pc-blue: #EAF1FF;
  --pc-grey: #56565B;
  --pc-body-font: "nunito", sans-serif;
  --pc-body-headings: "gill-sans-nova", sans-serif;
  --pc-radius: 15px;
  --pc-btn-radius: 999px;
  --pc-thickness: 30px; /* declare the thickness once */
}

/*--------------------------------------------------------------
# fade and zoom when in view port 
--------------------------------------------------------------*/ 
.other-content {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.other-content.in-view {
  opacity: 1;
  transform: scale(1);
}
/*--------------------------------------------------------------
  Cookie
--------------------------------------------------------------*/
#cookie-law {
  text-align: center;
  background: #F7F6F4;
  color: #000;
  padding: 10px 5px 0;
  font-size: .875rem;
  width: 100%;
}
#cookie-law a {
  text-decoration: underline;
}
a.close-cookie-banner {
  background: #E6332A;
  padding: 5px 15px;
  color: white;
  border-radius: 2px;
  text-decoration: underline;
}
a.close-cookie-banner:hover {
  color: white;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}
/*--------------------------------------------------------------
typography
--------------------------------------------------------------*/
body {
  margin: 0;
  font-family: var(--pc-body-font);
  font-weight: 300;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #C9CDCD;
  text-align: left;
  background-color: #000;
  padding: 0;
}
.diamond {
  position: fixed;
  opacity: 0.14;
  bottom: 0;
  right: 0;
  width: 50%; /* span full width */
  height: 70%; /* adjust height */
  background-image: url("dist/images/diamond.svg");
  background-size: contain; /* scale to fill */
  background-position: right bottom;
  background-repeat: no-repeat;
  z-index: 2; /* sits behind page content */
}
.entry-content:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
  transform: translateZ(0);
}
.entry-content {
  background: black;
}

.small-bg{
  min-height: auto !important;
}
.privacy a,
.black-bg.contact-block a{
 color: var(--pc-orange);
}
.black-bg, .blue-bg {
  min-height: 100vh; /* full viewport height at minimum */
  background-color: #000; /* example background */
  display: flex; /* enable flexbox */
  align-items: center; /* vertical center */
  position: relative;
}
.black-bg, .testimonials-blk {
  background-color: #000;
}
.testimonials-blk {
  border-radius: var(--pc-radius);
  color: var(--pc-blue);
  padding: 3rem 10rem 5rem;
  display: flex;
  flex-direction: column;
  justify-content: start; /* vertical centering */
}
.blue-bg {
  background: var(--pc-blue);
  color: black;
  border-radius: var(--pc-radius);
}
/*--------------------------------------------------------------
Case study classes
--------------------------------------------------------------*/
.case-study-image {
  height: 300px;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
  border-radius: var(--pc-radius);
}

.case-study-card:hover .case-study-image {
  transform: scale(1.05);
}

.case-study-card h2 a {
  transition: color 0.2s ease;
  color:var(--pc-blue);
}

.case-study-card h2 a:hover {
  color: var(--pc-orange);
}
/*--------------------------------------------------------------
Contact form 
--------------------------------------------------------------*/
.ninja-forms-req-symbol {
  color: #FF7575 !important;
}

.nf-field-label .nf-label-span, .nf-field-label label{
  font-size: 12px;
font-weight: normal;
}
.label-above .nf-field-label{
  margin-bottom: 3px !important;

}
.nf-input-limit, .nf-form-fields-required {
  display: none;
}
.nf-field-element input, .field-wrap textarea {
  border: thin solid white;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-style: italic;
}
.nf-field-element input {
  border-radius: 100px;
}
.field-wrap textarea {
  border-radius: 20px;
}
ul.contact-info {
  list-style: none;
  padding-left: 0rem;
  line-height: 2rem;
}
ul.contact-info li a {
  color: inherit;
  text-decoration: none;
}
.nf-field-element textarea {
  height: 100px !important;
}
.nf-field-container {
  clear: both;
  position: relative;
  margin-bottom: 10px !important;
}
.submit-btn {
  background-color: black;
  border-color: white;
  color: white;
  padding: 0.5rem 3rem !important;
  text-transform: uppercase;
}
/*--------------------------------------------------------------
typography
--------------------------------------------------------------*/
ul.black-bg-list li:before {
  content: url("dist/images/orange-check.svg");
  position: relative;
  margin-right: 0.5rem;
 
}
ul.black-bg-list{
   list-style: none;
  padding-left: 0;
}
b, strong {
  font-weight: 800;
}

h2.fixed-heading,
.hero-page-holder h1, .hero-home-holder h1 {
  text-transform: uppercase;
  font-size: calc(1.875rem + 1.5vw);
  color: var(--pc-orange);
}
.entry-excerpt,
h2.fixed-heading  span,
.hero-page-holder h1 span, .hero-home-holder h1 span {
  text-transform: uppercase;
  font-size: calc(1rem + 1.25vw);
  color: white;
  margin-top: -1rem;
}
h1, h2, h3, h4 {
  font-family: var(--pc-body-headings);
  font-style: normal;
}
p span, h1 span, h2 span, h3 span, h4 span {
  color: var(--pc-orange);
}
.pre-heading {
  font-size: 1.25rem;
  margin-bottom: .25rem;
}
h2.section-heading {
  font-size: calc(1.025rem + 1.5vw);
  margin: 0 0 1.5rem 0;
}
.diamond-heading {
  position: relative;
}
.diamond-heading:before {
  content: url("dist/images/diamond-heading.svg");
  position: absolute;
  left: -90px;
  top: 50%; /* start at halfway down the container */
  transform: translateY(-50%); /* shift up half its own height */
  opacity: 0.18;
}
h3.team-heading {
  color: black;
}
.team-heading-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("dist/images/curves.svg") no-repeat center top;
  background-size: 100% 100%;
  text-align: center;
  min-height: 99px;
}
.team-heading-container h2 {
  margin: 0;
}
.tab-content h2, .tab-content h3 {
  font-family: var(--pc-body-font);
  font-size: 1.25rem;
}
/*--------------------------------------------------------------
Page top 
--------------------------------------------------------------*/
.hero-home {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0000;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center top;
  z-index: 2;
  position: relative;
}
.hero-page::after,
.hero-home::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%; /* adjust how tall the fade is */
  background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
  
  pointer-events: none; /* let clicks pass through */
  z-index: 3;
}
.hero-home-holder {
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 3;
  position: absolute;
  max-width: 1320px;
  text-align: left;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.callout-container{
    z-index: 3;
}
.hero-page {
  background: linear-gradient(to top, #000 30%, var(--pc-orange) 100%);
  position: relative;
  
}

.archive-hero {
  background: linear-gradient(to top, #000 30%, var(--pc-orange) 100%);
  color: #333; /* dark text */
}


.hero-page-holder, .hero-page {
  height: 100vh
}

.hero-page-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.fixed-section-dealership,
.fixed-section {
  position: fixed;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
   height: 100vh;
  z-index: 1; /* Parallax content sits behind other content */
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
}
.fixed-section-dealership { 
  background: url("https://proclense.com/wp-content/uploads/2025/10/dealership-silver.webp") center/cover no-repeat;
}
.fixed-section { 
  background: url("https://proclense.com/wp-content/uploads/2025/09/car-being-washed.webp") center/cover no-repeat;
}
.fixed-spacer {
  height: 65vh; /* same as fixed section height */
}
.other-content {
  position: relative;
  z-index: 2; /* sits above the fixed Parallax content */
}
/*---------logo------------*/
img.custom-logo {
  width: 300px;
  height: auto;
}
.site-branding {
  position: absolute;
  left: 0px;
  z-index: 2;
}
/*--------------------------------------------------------------
404
--------------------------------------------------------------*/
.error-404 h1 {
  color: var(--pc-orange);
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.error-404 h2 {
  font-weight: 600;
}
/*--------------------------------------------------------------
Buttons 
--------------------------------------------------------------*/
.post-navigation a{
  color: var(--pc-orange);
  text-decoration: none;
  z-index: 3;
  position: relative;
}

.nav-next a:after{
   content: url("dist/images/circle-arrow-right.svg");
   top: 10px;
   position: relative;
   right: -10px;
}
.nav-previous a:before{
   content: url("dist/images/circle-arrow-left.svg");
   top: 10px;
   position: relative;
   left: -10px;
}
.read-more-btn{
  min-width: 235px;
  text-transform: uppercase;
}
.btn.btn-outline-secondary {
  border: solid 1px black;
  border-radius: 100px;
  background-color: transparent;
  text-transform: uppercase;
  min-width: 200px;
  padding: .5rem 1rem .75rem 1.75rem;
  color: black;
}
.btn-outline-secondary:after {
  content: url("dist/images/arrows-repeat.svg");
  position: relative;
  top: 0.25rem;
  padding-left: 0.5rem;
}
.buttons-group {
  text-align: center;
}
.buttons-group.buttons-group-left {
  text-align: left;
}
.buttons-group > div > div {
  display: inline-block;
}
.side-buttons ul li {
  margin-bottom: -15px;
}
.side-buttons ul {
  list-style: none;
  padding-left: 0;
}
.side-buttons {
  position: fixed;
  top: 48%;
  left: 0px;
  transform: translateY(-48%);
  z-index: 9;
}
.linkedin-side {
  z-index: 0;
  position: relative;
}
.phone-us-side {
  z-index: 1;
  position: relative;
}
.email-us-side {
  z-index: 2;
  position: relative;
}
/*.linkedin-side span, .phone-us-side span, .email-us-side span {
  display: none;
}*/
.email-us-side a:after {
  content: url("dist/images/email-us.svg");
  position: relative;
  top: 0.5rem;
  padding-right: 0.5rem;
}
.phone-us-side a:after {
  content: url("dist/images/phone-us.svg");
  position: relative;
  top: 0.5rem;
  padding-right: 0.5rem;
}
.linkedin-side a:after {
  content: url("dist/images/linkedin-side.svg");
  position: relative;
  top: 0.5rem;
  padding-right: 0.5rem;
}
.btn {
  font-style: normal;
  padding: .75rem .75rem;
}
.btn.btn-secondary.hero-lets-talk.talk-black {
  border: solid 1px black;
  color: black;
}
.btn.btn-secondary {
  border: solid 1px white;
  border-radius: 100px;
  background-color: transparent;
}
.btn.btn-primary {
  border: solid 1px var(--pc-orange);
  border-radius: 100px;
  background-color: var(--pc-orange);
  color: black;
}
.hero-phone, .hero-lets-talk {
  text-transform: uppercase;
  min-width: 235px;
  padding: .225rem .75rem .75rem;
}
.hero-phone:before {
  content: url("dist/images/circle-phone-flip.svg");
  position: relative;
  top: 0.5rem;
  padding-right: 0.5rem;
}
.hero-lets-talk:before {
  content: url("dist/images/paper-plane.svg");
  position: relative;
  top: 0.5rem;
  padding-right: 0.5rem;
}
.hero-lets-talk.talk-black:before {
  content: url("dist/images/paper-plane.svg");
  filter: invert(1);
}
.btn-secondary.learn-more-btn {
  padding: .5rem 1.75rem .75rem;
}
.btn-secondary.learn-more-btn:after {
  content: url("dist/images/arrow-up-right-white.svg");
  position: relative;
  top: .2rem;
  padding-left: 0.5rem;
}
.text-btn-black a {
  text-decoration: underline;
  color: black;
  border: none;
}
.text-btn-black :after {
  content: url("dist/images/arrow-up-right-black.svg");
  position: relative;
  top: .2rem;
  padding-left: 0.5rem;
}
/*--------------------------------------------------------------
services tab content
--------------------------------------------------------------*/
.services-holder {
  background: #E3EBF9;
  border-radius: var(--pc-radius);
  margin-top: 5rem;
  min-height: 500px;
}
.blue-bg.services-hub {
  align-items: flex-start;
}
.tab-content ul{
  list-style: none;
  padding-left: 0;
  line-height: 2rem;
}
.tab-content ul li:before {
  content: url("dist/images/check.svg");
  position: relative;
  margin-right: 0.5rem;
}
.nav-pills .nav-link {
  background-color: transparent !important;
  position: relative;
  z-index: 0;
  isolation: isolate;
  color: black;
}
.nav-pills .nav-link.active {
  color: black;
}
/* Draw the SVG for every pill, hidden by default */
.nav-pills .nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("dist/images/tab-background1.svg") no-repeat center center;
  background-size: contain;   /* fills edge-to-edge, preserves aspect ratio */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.nav-pills .nav-link:hover::before, .nav-pills .nav-link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  color: black;
}
.nav-pills .nav-link.active::before, .nav-pills .show > .nav-link::before {
  opacity: 1;
  transform: none;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
  /* last tab in the pills nav */
.nav-pills .nav-link:last-child {
  border-bottom: 1px solid #D8DDEA; /* light grey */
}
.tab-content{
   border-left: 1px solid #D8DDEA; /* light grey */
}
/*--------------------------------------------------------------
Team style
--------------------------------------------------------------*/
 
#team-card-379 .toggle-flip {
  margin-top: 1.25rem  !important;
}

a.team-email{
  color: var(--pc-orange);
  text-decoration: none;
}
.linkedin-link::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url("dist/images/linkedin.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 4px;
}
.blue-bg .card {
  background: #E3EAF6;
}
.card {
  border-radius: var(--pc-radius);
  height: 100%;
  color: black;
  font-style: normal;
  background: var(--pc-blue);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.card .card-text {
  font-size: 1rem;
  text-align: left;
}
.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 3rem auto 0;
  padding: 0 3rem;
}
.team-card {
  perspective: 1000px;
  position: relative;
  height: 100%; /* allow it to expand based on inner content */
  min-height: 600px; /* ← Set a min height to keep layout stable */
  margin-bottom: 2rem;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.team-card.flipped .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.blue-bg .back, .back {
  transform: rotateY(180deg);
  background: var(--pc-orange);
  padding: 1rem;
  z-index: 1;
}
/*-----*/
/*--------------------------------------------------------------
carousel  
--------------------------------------------------------------*/
.blockquote-footer {
  color: white;
}
/* Smooth height animation for variable-height slides */
.carousel-inner {
  transition: height 350ms ease;
}
.carousel-control-next, .carousel-control-prev {
  width: 5%;
}
.carousel-control-prev {
  left: -5%;
}
.carousel-control-next {
  right: -5%;
}
.carousel-indicators {
  bottom: -50px;
}
.carousel-indicators [data-bs-target] {
  background-color: var(--pc-orange);
}
.star-filled {
  color: var(--pc-orange);
}
.star-empty {
  color: #ddd; /* light gray */
}
.blockquote-footer::before {
  content: none !important;
}
.carousel blockquote p {
  font-size: 1.125rem;
}
.testimonial-image img {
  height: 50px;
  width: auto;
}
.testimonial-item {
  padding: 2rem;
  border-radius: var(--pc-radius);
  background-color: #191919; /* light grey for all by default */

}

.testimonial-item:nth-of-type(even) {
  background-color: var(--pc-grey); /* white for alternating */
}
.testimonial-item:nth-of-type(even) .client-name,
.testimonial-item:nth-of-type(even) .client-position{
  color: white
}
/*--------------------------------------------------------------
Content Specific  
--------------------------------------------------------------*/
.section-content {
  position: relative; /* ensures stacking context */
  z-index: 2; /* sits above the image */
}
.page-title-valeting .section-image {
  margin-top: -230px;
}
.section-image {
  position: relative;
  z-index: 1;
  margin-top: -130px;
}
.dealership-image {
  margin-top: -180px;
}
/* make the image scale and fill */
.shape-1 {
  position: relative;
  height: 520px;
  border-radius: 20px 0 0 20px; /* top-left + bottom-left corners */
  clip-path: polygon(0% 0%, 73% 0%, 100% 100%, 73% 100%, 0% 100%);
  overflow: hidden;
  background: url("https://proclense.com/wp-content/uploads/2025/10/dealership-services.webp") center/cover no-repeat;
  z-index: 1;
}
.shape-1-b {
  position: relative;
  height: 520px;
  border-radius: 20px 0 0 20px; /* top-left + bottom-left corners */
  clip-path: polygon(0% 0%, 73% 0%, 100% 100%, 73% 100%, 0% 100%);
  overflow: hidden;
  background: url("https://proclense.com/wp-content/uploads/2025/10/valeting.webp") center/cover no-repeat;
  z-index: 1;
}
.shape-1-c {
  position: relative;
  height: 520px;
  border-radius: 20px 0 0 20px; /* top-left + bottom-left corners */
  clip-path: polygon(0% 0%, 73% 0%, 100% 100%, 73% 100%, 0% 100%);
  overflow: hidden;
  background: url("https://proclense.com/wp-content/uploads/2025/10/service-bay.webp") center/cover no-repeat;
  z-index: 1;
}
.shape-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-blue);
  clip-path: polygon(calc(73% - var(--pc-thickness)) 0%, calc(73% + var(--pc-thickness)) 0%, 100% 100%, calc(100% - var(--pc-thickness)) 100%);
}
.shape-1-b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-blue);
  clip-path: polygon(calc(73% - var(--pc-thickness)) 0%, calc(73% + var(--pc-thickness)) 0%, 100% 100%, calc(100% - var(--pc-thickness)) 100%);
}
.shape-1-c::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-blue);
  clip-path: polygon(calc(73% - var(--pc-thickness)) 0%, calc(73% + var(--pc-thickness)) 0%, 100% 100%, calc(100% - var(--pc-thickness)) 100%);
}
.shape-2-b, .shape-2 {
  height: 248px;
  border-radius: 20px;
  padding: 2.5rem 4rem;
}
.shape-2 {
  background: var(--pc-orange);
}
.shape-2-b {
  background: black;
  color: var(--pc-blue);
}
.shape-2-b a {
  color: inherit;
}
.shape-2-b a:after {
  filter: invert(1);
}
.shape-2-b h3, .shape-2-b p, .shape-2 h3, .shape-2 p {
  text-align: right;
  color: inherit;
}
.shape-3 {
  height: 248px;
  border-radius: 20px;
  background-color: #ccc; /* base fill */
  background-image: url("https://proclense.com/wp-content/uploads/2025/10/car-wheel.webp");
  background-repeat: no-repeat;
  background-position: calc(100% + 50px) center; /*push 200px more to the right */
  background-size: auto 100%; /* full height, auto width */
}
.shape-3-b {
  height: 248px;
  border-radius: 20px;
  background-color: #ccc; /* base fill */
  background-image: url("https://proclense.com/wp-content/uploads/2025/10/valeting1.webp");
  background-repeat: no-repeat;
  background-position: calc(100% + 50px) center; /*push 200px more to the right */
  background-size: auto 100%; /* full height, auto width */
}
.shape-3-c {
  height: 248px;
  border-radius: 20px;
  background-color: #ccc; /* base fill */
  background-image: url("https://proclense.com/wp-content/uploads/2025/10/service-bay1.webp");
  background-repeat: no-repeat;
  background-position: calc(100% + 50px) center; /*push 200px more to the right */
  background-size: auto 100%; /* full height, auto width */
}
.overlap-row {
  position: relative;
}
.front-col {
  position: relative;
  z-index: 2;
}
.overlap-col {
  position: relative;
  z-index: 1; /* make this one sit above */
  margin-left: -55rem; /* pull it left to overlap */
}
/*--------------------------------------------------------------
wp style overrides
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Navbar and Navigation
--------------------------------------------------------------*/
/*---------Portal menu------------*/
.top-account-info {
  position: absolute;
  right: 20px;
  top: 0.75rem;
  z-index: 2;
  color: #000;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-style: normal;
}
ul#menu-menu-2 {
  list-style: none;
}
ul#menu-menu-2 li a {
  text-decoration: none;
  color: inherit;
  background: var(--pc-orange);
  padding: 0.5rem 1rem;
  border-radius: 100px;
}
ul#menu-menu-2 li a:after {
  content: url("dist/images/arrow-right-to-bracket.svg");
  position: relative;
  top: 0.3rem;
  padding-left: 0.5rem;
}
/*---------Main menu------------*/
.navbar {
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.offcanvas-collapse {
  visibility: visible !important;
}
/* Base dropdown menu */
.dropdown-menu {
  transform-origin: top; /* so it scales down from the top edge */
  transform: scaleY(0); /* collapsed */
  opacity: 0; /* fade out as well */
  transition: transform 0.25s ease, opacity 0.25s ease;
  display: block; /* Bootstrap toggles .show, so keep it block */
  visibility: hidden; /* hide it when collapsed */
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: var(--pc-radius);
  padding: 1rem;
  background: var(--pc-blue);
}
/* Expanded state */
.dropdown-menu.show {
  transform: scaleY(1); /* expanded */
  opacity: 1;
  visibility: visible;
}
.dropdown-item {
  border-radius: var(--pc-btn-radius);
  font-style: normal;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
  color: #000;
  text-decoration: none;
  background-color: var(--pc-orange);
}
.bg-dark {
  background-color: #000 !important;
  border-bottom: solid 2px var(--pc-orange);
}
.navbar-expand-xl .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.875rem;
  font-style: normal;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  text-align: center;
}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
  color: #000;
  background-color: var(--pc-orange);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: #000;
  background-color: var(--pc-orange);
}
.navbar-toggler .icon-bar {
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}
.navbar-toggler .icon-bar {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 0;
}
.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 8px;
}
.navbar-toggler:hover > .icon-bar:nth-child(2) {
  width: 32px;
  transition: ease all .2s;
}
.navbar-toggler:active > .icon-bar:nth-child(2) {
  width: 32px;
  transition: ease all .2s;
}
.navbar-toggler:not(.bend) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
  transition: ease all .2s;
}
.navbar-toggler:not(.bend) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}
.navbar-toggler:not(.bend) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
  transition: ease all .2s;
}
.navbar-toggler {
  background: var(--pc-blue);
  border-radius: 999px;
  color: #fff;
}
.navbar-toggler:not(:disabled):not(.disabled) {
  padding: 17px 13px 17px 13px;
  outline: none;
  border: none; /* border-radius:2px;*/
  z-index: 2;
}
.navbar-toggler .icon-bar {
  background-color: #000;
}
.navbar-toggler:focus, .navbar-toggler:active {
  outline: none;
  box-shadow: none;
}
/*--------------------------------------------------------------
# back to top
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.site-footer {
  position: relative;
  z-index: 8;
  font-size: 1rem;
}
.icon-black-bg{
  background:black;
  border-radius: var(--pc-radius);
  position: relative;
  z-index: 2;
  margin-top: -50px;
}
.footer-grey-bg {
  background: var(--pc-grey);
  border-radius: var(--pc-radius);
  margin-top: -50px;
}
.footer-grey-bg-content {
  margin-top: 0px;
  margin-bottom: -25px;
  z-index: 3;
  position: relative;
}
.icon-black-bg img,
.footer-grey-bg-content img, .prefooterblock img {
  width: 130px;
  height: auto;
  margin-top: 1rem;
  z-index: 2
}
.footer-black-bg {
  background: black;
  color: var(--pc-blue);
  min-height: 300px;
}
.footer-blue-bg {
  background: var(--pc-blue);
  color: black;
}
address {
  line-height: 1.7rem;
  font-size: 1rem;
}
ul#menu-footer-1 {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
  line-height: 1.75rem;
}
ul#menu-footer-1 li a {
  color: var(--pc-blue);
  text-decoration: none;
}
#nav_menu-2, #block-3, #block-4, #block-5 {
  margin: 0 auto;
  justify-content: center;
  display: flex;
}
/*--------------------------------------------------------------
# tabs
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# break points
--------------------------------------------------------------*/
@media (max-width:1399px) {
  .overlap-col {
    position: relative;
    z-index: 1; /* make this one sit above */
    margin-left: -48rem; /* pull it left to overlap */
  }
}
/*--------------------------------------------------------------
# max-width:1280px
--------------------------------------------------------------*/
@media (max-width:1200px) {
  .overlap-col {
    position: relative;
    z-index: 1;
    margin-left: -40rem;
  }
  .dropdown-item {
    text-align: center;
  }
  /* Ensure dropdowns participate in flow when stacked */
  .navbar .dropdown-menu {
    position: static; /* avoid absolute overlay */
    float: none;
    display: block; /* Bootstrap toggles .show; keep block for animation */
    overflow: hidden;
    max-height: 0; /* collapsed */
    opacity: 0;
    padding-block: 0; /* avoid jump from padding */
    transition: max-height 300ms ease, opacity 200ms ease, padding 300ms ease;
    will-change: max-height;
  }
  .navbar .dropdown-menu.show {
    max-height: 60vh; /* large enough for your biggest menu */
    opacity: 1;
    padding-block: .5rem;
  }
  .offcanvas-collapse {
    position: fixed;
    top: 0px; /* Height of navbar */
    bottom: 0;
    right: 100%;
    left: -100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden; /*background-color: var(--darkgrey);*/
    background: linear-gradient(to top left, var(--pc-orange) 0%, #000 60%);
    transition-timing-function: ease-in-out;
    transition-duration: .5s;
    transition-property: left, visibility;
    padding-top: 150px;
  }
  .offcanvas-collapse.open {
    left: 0;
    visibility: visible;
  }
  .portal span {
    display: none;
  }
  ul#menu-menu-2 li a::after {
    padding-left: 0;
  }
  ul#menu-menu-2 li a {
    padding: 1.125rem 0.975rem;
  }
  .top-account-info {
    right: 60px;
    top: .95rem;
  }
  .navbar {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
  .site-branding {
    left: -10px;
  }
  .testimonials-blk {
    padding: 3rem 4rem;
  }
  .card img {
    max-width: 400px;
  }
}
/*--------------------------------------------------------------
# max-width:992px
--------------------------------------------------------------*/
@media (max-width:992px) {
  .tab-content{
   border-left: none;
}
  .btn.top-tab.d-lg-none.btn-primary {
  width: 59px;
    background: black;
    border: black;
}
  .btn.top-tab:after{
    content: url("dist/images/circle-arrow-up.svg");
    position: relative;
    top: 2px;
    filter: invert(1);
 
  }
 .tab-pane .buttons-group.buttons-group-left {
  text-align:center;
}
  #hub-holder {
  scroll-margin-top: 100px; /* offset when scrolled into view */
}

  .services-holder{
    margin-top: 1rem;
  }
  .tab-pane {
  scroll-margin-top: 80px; /* keeps it clear of a sticky navbar if scrolled */
}
    /* remove the SVG layer */
  .nav-pills .nav-link::before {
    content: none !important;
  }

  /* ensure no shadow/image leaks through */
  .nav-pills .nav-link {
    background: none !important;
    box-shadow: none !important;
  }

  /* hover/focus color */
  .nav-pills .nav-link:hover,
  .nav-pills .nav-link:focus {
    background-color: var(--pc-orange) !important; /* your color */
    color: #000 !important;
  }

  /* active/shown color */
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    background-color:var(--pc-orange) !important; /* your color */
    color: #000 !important;
  }
  #nav_menu-2, #block-3, #block-4, #block-5 {
    justify-content: left;
  }
  .overlap-col {
    position: relative;
    z-index: 1; /* make this one sit above */
    margin-left: 0;
    margin-top: 25px; /* pull it left to overlap */
  }
  .shape-1 {
    clip-path: none; /* removes the angled shape */
    height: 248px;
    border-radius: 20px;
  }
  .shape-1::after {
    clip-path: none; /* removes the angled border */
    background: none; /* optional: hide the blue strip too */
  }
  .shape-1-b {
    clip-path: none; /* removes the angled shape */
    height: 248px;
    border-radius: 20px;
  }
  .shape-1-b::after {
    clip-path: none; /* removes the angled border */
    background: none; /* optional: hide the blue strip too */
  }
  .shape-1-c {
    clip-path: none; /* removes the angled shape */
    height: 248px;
    border-radius: 20px;
  }
  .shape-1-c::after {
    clip-path: none; /* removes the angled border */
    background: none; /* optional: hide the blue strip too */
  }
  .shape-3-c, .shape-3-b, .shape-3 {
    background-position: center;
    background-size: 100%;
    background-size: cover;
  }
  .shape-2-b h3, .shape-2-b p, .shape-2 h3, .shape-2 p {
    text-align: left;
  }
  .page-title-valeting .section-image {
    margin-top: -100px;
  }
  .section-image {
    position: relative;
    z-index: 1;
    margin-top: -35px;
  }
  .dealership-image {
    margin-top: -55px;
  }
}
/*--------------------------------------------------------------
# max-width:768px
--------------------------------------------------------------*/
@media (max-width:768px) {
  .pre-heading {
    font-size: 0.875rem;
  }
  .section-heading br {
    display: none;
  }
  .diamond-heading:before {
    content: url("dist/images/diamond-heading-mobile.svg");
    position: absolute;
    left: -40px; /* adjust how far left you want it */
    top: 50%; /* start at halfway down the container */
    transform: translateY(-50%); /* shift up half its own height */
    opacity: 0.2;
  }
  .wp-bootstrap-blocks-button {
    text-align: center;
  }
  .fixed-section .wp-block-image img {
    width: 200px !important;
  }
  .card img {
    max-width: 400px;
  }
  .testimonials-blk {
    padding: 3rem 2rem;
  }
  .page-title-valeting .section-image {
    margin-top: -50px;
  }
}
/*--------------------------------------------------------------
# max-width:596px
--------------------------------------------------------------*/
@media (max-width:480px) {
  .hero-page-holder, .hero-page {
  height: 100vh;
}
  .testimonials-blk {
    padding: 3rem 2rem;
  }
  .testimonials-blk .container {
    padding: 0;
  }
  .carousel-control-next {
    right: -8%;
  }
  .carousel-control-prev {
    left: -8%;
  }
  img.custom-logo {
    width: 250px;
    height: auto;
  }
  .shape-2-c, .shape-2-b, .shape-2 {
    height: 248px;
    padding: 2.25rem 1.5rem;
  }
  .shape-2-c br, .shape-2-b br, .shape-2 br {
    display: none;
  }
  h2.fixed-heading,
  .hero-page-holder h1, .hero-home-holder h1 {
    font-size: calc(1.575rem + .125vw);
  }
  h2.section-heading {
    font-size: calc(1.025rem + 1.75vw);
  }
  .section-image {
    position: relative;
    z-index: 1;
    margin-top: -5px;
  }
  .page-title-valeting .section-image {
    margin-top: -30px;
  }
}
/* Small devices (landscape phones,576px and up)*/
@media (max-width:576px) {}
/* Medium devices (tablets,768px and up)*/
@media (min-width:768px) {}
/*Large devices (desktops,992px and up)*/
@media (min-width:992px) {}
/* Extra large devices (large desktops,1200px and up)*/
@media (min-width:1200px) {
  h2.section-heading {
    font-size: 3.125rem;
  }
}