/* Custom CSS Styles */

/* Regular */
@font-face {
    font-family: "Geom-Graphic";
    src: url("/assets/fonts/geom-graphic.woff2") format("woff2");
    font-weight: 400; /* normal */
    font-style: normal;
    font-display: swap;
}
    
/* Semibold */
@font-face {
    font-family: "Geom-Graphic";
    src: url("/assets/fonts/geomgraphic-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
    
/* Bold */
@font-face {
    font-family: "Geom-Graphic";
    src: url("/assets/fonts/geomgraphic-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
    
/* Bold */
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}

	*,
	*:before,
	*:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	html,
	body {
		box-sizing: border-box;
		min-height: 100%;
		margin: 0;
		padding: 0;
	}

	body {
		font-family: Montserrat !important;
		font-weight: 500;
		font-size: 18px;
	}


	/* Typography */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
			font-weight: 600!important;
	}

	h1,
	.h1 {
		font-style: normal;
		letter-spacing: -0.02em;
		/* Neutral/800 */
		color: #222239;
	}

	h2,
	.h2 {
		font-style: normal;
		letter-spacing: -0.02em;
		color: #0F172A;
	}

	.h3,
	h3 {
		font-style: normal;
		letter-spacing: -0.02em;
		color: #0F172A;
	}

	h4,
	.h4 {
		font-style: normal;
		text-transform: uppercase;
		color: #12131E;

	}

	h5,
	.h5 {
		font-family: 'Geom-Graphic';
		font-style: normal;
		font-weight: 600;
		font-size: 23px;
		line-height: 120%;
		/* or 28px */


		/* Neutral / 900 */

		color: #0D0F11;
	}

	h6,
	.h6 {
		/* H6/Medium/Caps/Desktop */

		font-family: 'Geom-Graphic';
		font-style: normal;
		font-weight: 600;
		font-size: 17px;
		line-height: 130%;
		/* identical to box height, or 22px */

		text-transform: uppercase;

		/* Neutral/800 */

		color: #222239;
	}

	p {
		margin-top: 0;
		margin-bottom: 1.5rem;
		line-height: 1.7;
	}

	.p0 {
		padding: 0;
	}

	.contact-form {
		padding-right: 10em !important;
		padding-left: 10em !important;
		background: #eff6f8;
	}

	.stats>p {
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 160%;
		text-align: center;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: #222239;
		margin-bottom: 1em !important;
	}

	a:hover,
	a:active,
	a:focus {
		color: #0379b6 !important;
		text-decoration: none;
	}

	a:visited {
		color: #464646;
	}

	a:link {
		text-decoration: none;
	}

	time {
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 150%;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #393951;
	}

	/* Text sizes & format */

	.text-xsmall {
		font-size: 70%;
	}

	.text-smaller {
		font-size: 75%;
	}

	.text-small {
		font-size: 90%;
	}

	.text-large {
		font-size: 110%;
	}

	.text-xlarge {
		font-size: 125%;
	}



	.clr-bg-white {
		background-color: #fff;
	}




	/* Tabs on homepage */

	.tabs:after {
		content: '';
		display: table;
		clear: both;
	}

	.tabs input[type=radio] {
		display: none;
	}

	.tabs label {
		display: block;
		float: left;
		width: 33.3333%;
		color: #ccc;
		font-weight: normal;
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		margin-top: 0;
		margin-bottom: 9px;
	}

	.tabs label i {
		padding: 5px;
		margin-right: 0;
	}

	.tabs label:hover {
		color: #1f497d;
		box-shadow: 0;
		border-bottom: 2px solid #1f497d;
	}

	.tab-content * {
		-webkit-animation: scale 0.7s ease-in-out;
		-moz-animation: scale 0.7s ease-in-out;
		animation: scale 0.7s ease-in-out;
	}

	.tabs [id^="tab"]:checked+label {
		box-shadow: inset 0 1 #1f497d;
		border-bottom: 4px solid #5e9732;
		color: #5e9732;
	}

	#tab1:checked~#tab-content1,
	#tab2:checked~#tab-content2,
	#tab3:checked~#tab-content3 {
		display: block;
	}

	@keyframes scale {
		0% {
			transform: scale(0.9);
			opacity: 0;
		}

		50% {
			transform: scale(1.01);
			opacity: 0.5;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}


	/* Layout styling*/

	div#taglineb h1 {
		color: #FFF !important;
		padding: 0 1em;
	}


/* Toggler button */
.custom-toggler {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  z-index: 1001;
  cursor: pointer;
}

/* Hamburger lines */
.custom-toggler .toggler-icon {
  display: block;
  width: 28px;
  height: 2.5px;
  background-color: #fff; /* White bars */
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center; /* Ensures rotation happens from the center */
}

/* Top bar — rotate to 45° */
.custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(1) {
  transform: rotate(45deg) translate(3px, 3px);
}

/* Middle bar — fade out */
.custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(2) {
  opacity: 0;
}

/* Bottom bar — rotate to -45° */
.custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(3) {
  transform: rotate(-45deg) translate(3px, -3px);
}



	.homebanner {
		padding: 1em;
		background: rgb(1, 5, 5);
		background: linear-gradient(274deg, #1024468a 0%, rgb(93 151 50 / 76%) 50%, #343a408f 100%);
		position: absolute;
		z-index: 9999;
		bottom: 0;
		width: 100%;
	}

	.hpdi-headingb {
		font-size: 3em;
		line-height: 1;
	}

	.hero {
		height: 600px
	}

	img#logo-top-padding {
		position: absolute;
		z-index: 999;
		top: -116px;
		right: 0;
	}

	.news-right {
		background: #fff;
	}

	.accordion .card-header:after {
		font-family: 'FontAwesome';
		content: "\f068";
		float: right;
	}

	.accordion .card-header.collapsed:after {
		/* symbol for "collapsed" panels */
		content: "\f067";
	}

	ul.media-category li {
		width: 100%;
	}

	h4.mt {
		padding-bottom: 1em;
		margin-bottom: 1.5em;
	}

	#media-filter-list {
		float: left;
		font-size: 1em;
		list-style: none;
		margin-left: 0;
		padding: 0 0 1em 0;
		width: 100%;
	}

	#media-filter-list li {
		float: left;
		line-height: 1.3;
		margin-right: 10px;
		padding-right: 10px;
		list-style-type: none;
		width: 100%;
	}

	#media-filter-list li:last-child {
		border-right: none;
		margin-right: 0;
		padding-right: 0;
	}

	#media-filter-list a {
		color: #999;
		text-decoration: none;
	}

	#media-filter-list li.current a,
	#media-filter-list a:hover {
		text-decoration: underline;
	}

	#media-filter-list li.current a {
		color: #333;
	}

	.media-category li {
		float: left;
		padding-bottom: 2em;
		list-style-type: none;
	}

	.hidden {
		display: none
	}

	.blink ul {
		margin: 0
	}

	a.all-link {
		text-transform: uppercase;
		font-size: .9em;
		padding-top: 0.5em;
		color: #5e9732 !important;
	}

	.media-category a {
		display: inline;
	}

button.accordion-button.collapsed {
    padding: .5em;
}

	#media-presentations .accordion-body {
		padding: 0 0 1em 0
	}

	#wfs-about-cards>.col>.card>.card-body>ul {
		padding: 0 0 0 1em !important;
		text-align: left;
		font-size: .75em;
	}


	#wfs-about-cards .card>.card-footer {
		background: #FFF;
		border-top: 0;
		padding-top: 0;
	}

	#wfs-about .card:hover {
		border: 2px solid #ffc20e !important;
	}

	.card {
		border-radius: 0;
		border: 2px solid #ccc;
	}


	/* #key-stats span {
font-size: 1em;
font-family: montserrat!important;
font-weight: normal!important;
text-transform: uppercase!important;
} */

	#logos-bottom {
		padding: 0;
	}


	/* Animation Delays */

	.wait300ms {
		animation-delay: 300ms;
	}

	.wait400ms {
		animation-delay: 400ms;
	}

	.wait500ms {
		animation-delay: 500ms;
	}

	.wait600ms {
		animation-delay: 600ms;
	}

	.wait700ms {
		animation-delay: 700ms;
	}

	.wait800ms {
		animation-delay: 800ms;
	}

	.wait900ms {
		animation-delay: 900ms;
	}

	.wait1200ms {
		animation-delay: 1200ms;
	}

	section.one {
		width: 100%;
		height: 421px;
		overflow: hidden;
		position: relative;
		background-size: cover !important;
		margin: 0;
		padding: 0;
	}

	section#home-hero {
		width: 100%;
		height: 400px;
		overflow: hidden;
		position: relative;
		background-size: cover !important;
		background-position: center;
		margin: 0;
		padding: 0;
	}

	/* section#key-stats {
margin: 2em 0 1em;
padding: 0
}

#key-stats h1 {
margin: 0!important;
padding: 0!important;
} */

	section#brands {
		padding: 4em 0;
	}

	section#brands a {
		margin-right: 2em;
	}

	section#brands a:last-child {
		margin-right: 0;
	}

	section#brands img {
		-webkit-filter: grayscale(100%);
		opacity: .75;
	}

	section#brands img:hover {
		-webkit-filter: grayscale(0%);
		opacity: 1;
	}





	.wfsfoot-homepage a {
		color: #FFF;
	}


	#data h3 {
		text-transform: capitalize;
		font-size: 1.5em;
		padding: 0.5em 0 0.75em;
	}

	.news-item {
		overflow: hidden;
		position: relative;
		line-height: 1.5em;
		max-height: 12em;
		padding-right: 1em;
	}

	.btn-secondary {
		background: #e13c24;
		color: #FFF !important;
		border: 0;
		border-radius: 0;
		text-transform: uppercase;
		font-family: 'obvia';
		padding: 0.5em 2em;
	}

	.news-item:before {
		content: '...';
		position: absolute;
		right: 17px;
		bottom: 0;
	}

	.news-item:after {
		content: '';
		position: absolute;
		right: 0;
		width: 1em;
		height: 1em;
		margin-top: 0.2em;
		background: white;
	}

	#data p,
	.events p {
		margin-bottom: 0;
	}

	#data h5,
	.events h5 {
		padding: 0.25em 0 0;
		text-transform: capitalize;
		line-height: 1.2;
	}

	.events-list:last-child {
		border-bottom: 0;
		margin-bottom: 0 !important;
	}

	a.nav-link {
		font-family: 'montserrat';
		font-style: normal;
		letter-spacing: 1px;
		font-weight: 400;
		font-size: 14px;
		line-height: 160%;
		padding-left: 2.5em !important;
		padding-right: 0 !important;
	}

	h5.text-muted {
		padding: 0 0 1em
	}

	p.nomargin.p0 {
		padding: 1.5em 0 2em !important;
	}

	h6.ptb.tl {
		font-weight: 500;
		font-size: 1.5em;
		padding: 0;
		margin-bottom: 1.5em;
	}

	.fr {
		float: right !important;
	}

	/* div#key-stats {
padding: 7em 0 0;
background: url(/images/hero/homepage-counter-area.webp);
height: 700px;
background-position: bottom;
background-size: cover;
margin-top: 4em;
}
#stats>div {
margin-bottom: 3em;
} */

	.stats {
		padding: 0 1em 3em;
		border-right: 1px solid #222239;
	}

	.stats:last-child {
		border-right: 0;
	}

	div#mt-area {
		float: right;
	}

	/* news ticker styling*/

	@-webkit-keyframes ticker {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			visibility: visible;
		}

		100% {
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
		}
	}

	@keyframes ticker {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			visibility: visible;
		}

		100% {
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
		}
	}
/* Base from your hamburger demo, resized for nav use */
.menu-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  inline-size: 44px;       /* button hit area */
  block-size: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: currentColor;     /* inherits from .navbar */
}

/* bar */
.menu-btn__burger {
  inline-size: 24px;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
  position: relative;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: "";
  position: absolute;
  inline-size: 24px;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

/* top and bottom bars */
.menu-btn__burger::before { transform: translateY(-8px); }
.menu-btn__burger::after  { transform: translateY( 8px); }

/* OPEN STATE — tie to aria-expanded so no custom JS is required */
.navbar-toggler[aria-expanded="true"] .menu-btn__burger {
  transform: translateX(-24px);
  background: transparent;
  box-shadow: none;
}
.navbar-toggler[aria-expanded="true"] .menu-btn__burger::before {
  transform: rotate(45deg) translate(12px, -12px);
}
.navbar-toggler[aria-expanded="true"] .menu-btn__burger::after {
  transform: rotate(-45deg) translate(12px, 12px);
}

/* Optional: color tweaks per theme */
.navbar.navbar-light .menu-btn { color: #393951; }   /* your brand gray */
.navbar.navbar-dark  .menu-btn { color: #fff; }

	.ticker-wrap {
		position: absolute;
		bottom: 0;
		width: 100%;
		overflow: hidden;
		height: 3rem;
		background-color: #dee2e6;
		padding-left: 100%;
		box-sizing: content-box;
		z-index: 999;
	}

	.ticker-wrap .ticker {
		display: inline-block;
		height: 4rem;
		line-height: 2.65em;
		white-space: nowrap;
		padding-right: 100%;
		box-sizing: content-box;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		-webkit-animation-name: ticker;
		animation-name: ticker;
		-webkit-animation-duration: 30s;
		animation-duration: 30s;
	}

	.ticker-wrap .ticker__item {
		display: inline-block;
		padding: 0 4rem;
		font-size: .8em;
		color: #323a46;
		font-weight: 600;
	}

	caption {
		font-size: 22pt;
		margin: 10px 0 20px 0;
		font-weight: 700;
	}

	table.calendar {
		width: 100%;
		border: 1px solid #aaa;
	}

	td.day {
		width: 14%;
		height: 140px;
		border: 1px solid #aaa;
		vertical-align: top;
	}

	td.day span.day-date {
		font-size: 14pt;
		font-weight: 700;
	}

	th.header {
		background-color: #002856;
		color: #fff;
		font-size: 14pt;
		padding: 5px;
	}

	.not-month {
		background-color: #f2f2f2;
	}

	td.today {
		background-color: #efefef;
	}

	td.day span.today-date {
		font-size: 16pt;
	}

	td p,
	td img {
		vertical-align: text-top;
	}

	h4.mt {
		padding-bottom: 1em;
		margin-bottom: 1.5em;
	}

	#bod-filter-list {
		float: left;
		font-size: 1em;
		list-style: none;
		margin-left: 0;
		padding: 0 0 2em 0;
	}

	#bod-filter-list li {
		float: left;
		line-height: 1.3;
		margin-right: 10px;
		padding-right: 10px;
		list-style-type: none;
	}

	#bod-filter-list li:last-child {
		border-right: none;
		margin-right: 0;
		padding-right: 0;
	}

	#bod-filter-list a {
		color: #999;
		font-weight: 600;
		text-decoration: none;
	}

	#bod-filter-list li.current a,
	#bod-filter-list a:hover {
		text-decoration: underline;
	}

	#bod-filter-list li.current a {
		color: #333;
	}

	.board-of-directors li {
		float: left;
		padding-bottom: 2em;
		list-style-type: none;
	}

	.hidden {
		display: none
	}

	.blink ul {
		margin: 0;
		padding: 0;
	}

	nav#left-nav {
		padding-bottom: 3em !important;
	}


	.biography-area>.float-start {
		margin: 0 1em 0 0;
	}

	h4.card-title {
		line-height: 1.75;
	}

	blockquote.quotable:after {
		content: "\2013 \2003" attr(cite);
		display: block;
		text-align: right;
		font-size: 16px;
		color: #ccc;
		padding-top: 1em;
	}

	.right-fp {
		padding: 4em 0 2em 4em;
		transition: all 0.5s ease;
		height: 415px;
	}

	.left-fp {
		background: url(/images/bg/h2bg.jpg);
		height: 415px;
		background-size: cover;
		position: absolute;
		width: 50%;
		background-position: center;
		transition: all 0.5s ease;
	}

	.left-fp:before {
		content: '';
		position: absolute;
		background: white;
		bottom: -1px;
		left: 0;
		right: 0;
		height: 100%;
		clip-path: polygon(100% 0, 103% 100%, 92% 100%);
	}

	.hero-header-text {
		padding: 4em 0 2em 4em;
		transition: all 0.5s ease;
		height: 415px;
	}

	.offcanvas>a#offlogo {
		display: none;
		padding-top: 2em;
	}

	div#top-l-heading {
		position: absolute;
		top: 29.5em;
	}

	div#top-r-heading {
		position: absolute;
		top: 30em;
		right: 0;
		padding-left: 12em;
	}

	@media (max-width: 1400px) {
		#icons-reach img {
                width: 100px!important;
                height: 100px!important;
            }
		.circle-icon {
            width: 100px!important;
            height: 100px!important;
        
            
        		}

		div#top-r-heading {
			padding-left: 10em;
			top: 29.5em;
		}

		.right-fp {
			padding: 4em 0 4em 2em;
		}

		#logos-bottom li {
			padding: 0 25px 0 0.5em;
		}

		#bot-cards>div h2 {
			color: #fff !important;
			font-size: 1.55em;
		}
	}

	@media (max-width: 1199px) {
	    	    

    .btn.btn-styled .btn-inner:before {

        display: none!important;

    }
	      .btn.btn-styled .btn-inner {
                border-radius: 2em;
                border: 1px solid #f42302;
        		background:red;
        		color:#FFF
            }
	    
		
		a.nav-link {
			font-family: 'montserrat';
			font-style: normal;
			letter-spacing: 1px;
			font-weight: 400;
			font-size: 14px;
			line-height: 160%;
			padding-left: 3em !important;
			padding-right: 0 !important;
		}

		li.nav-item:not(.dropdown)>a.nav-link {
			margin-left: 0 !important;
		}

		div#top-l-heading {
			position: absolute;
			top: 29em;
		}

		.right-fp {
			padding: 4em 0 4em 2em;
		}

		div#top-r-heading {
			padding-left: 7em;
			top: 28.5em;
		}

		div#top-l-heading {
			/* width: 239px!important; */
		}

		div#top-r-heading {}

		#bot-cards>div h2 {
			color: #fff !important;
			font-size: 1.4em;
		}

		#logos-bottom li {
			padding: 0 10px 0 0.5em;
		}

		#bg-overlay {
			height: 589px !important
		}

		div#solution-title-area {
			bottom: 4.5em !important;
		}

		section.one {
			width: 100%;
			height: 400px;
			overflow: hidden;
			position: relative;
			background-size: cover !important;
			margin: 0;
			padding: 0;
		}

		section#home-hero {
			width: 100%;
			height: 400px;
			overflow: hidden;
			position: relative;
			background-size: cover !important;
			margin: 0;
			padding: 0;
		}

		.offcanvas>ul.navbar-nav>li>a.nav-link {
			font-size: .75em;
			text-transform: uppercase;
			border-bottom: 1px solid #ccc
		}

		.offcanvas>ul.navbar-nav:not(.offcanvas > .nav.navbar-nav.navbar-right) {
			width: 100%;
			padding: 2em 3em 3em 3em;
		}

		ul#socialTop {
			flex-direction: row;
		}

		ul#socialTop li {
			padding-right: 2em;
		}

		ul#socialTop li:last-child {
			padding-right: 0
		}

		.offcanvas>ul>li>ul.dropdown-menu.show {
			border: 0;
			font-size: .8em;
		}

		a.nav-link {
			font-size: 1em;
			text-transform: capitalize;
		}

		.offcanvas>a#offlogo {
			display: block;
		}

		.left-fp {
			background: url(/images/bg/h2bg.webp);
			height: 400px;
			background-size: cover;
			width: 50%;
			position: absolute;
			background-position: center;
		}
	}

	@media (min-width: 997px) {

		.brand-card .mobile-heading {
			display: none;
		}

		.brand-card .brand-card-image {
			margin-right: 144px;
			display: block !important;
			flex-direction: column;
		}

	}
    @media only screen and (max-width: 997px) and (min-width: 768px) {		
    .brand-card {
			margin: 0 -12px 8px -12px;
			background: #fff;
			box-shadow: 0px 8px 24px rgba(142, 152, 163, .2);
    		}

        
    }
    @media (min-width: 1200px) and (max-width: 1399.98px) {
          .fuel-circle {
            width: 100px!important;
            height: 100px!important;
          }
          
}
    @media (max-width: 992px) {

    #wfs-about, #sustainability, #our-difference, #brands, #fueling-change, #fuel-agnostic-solutions,  #practical-applications {
        text-align: center;
    }
	    #legacy {border-top:4px solid #FFF!important;        transition: all 300ms ease-out;}


}
	@media (max-width: 997px) {
	    .esg-gov-image-right {display:none;}
	        #headlines {
                margin-inline: 0 !important;
            }
		.cta-container{max-width:100%!important}
	
	    .stat{border:0!important;}
		.brand-card {
			display: block !important;
		}

		.brand-card .desktop-heading {
			display: block!important;
		}

		.page-heading .container {
			display: block !important;
		}

		.page-heading {
			height: auto !important;
		}

		.hero-header-text {
			padding: 2em 0 2em 4em;
			transition: all 0.5s ease;
			height: 415px;
		}
.brand-card-thumbnail {width:150px!important}



		.contact-form {
			padding-right: 5em !important;
			padding-left: 5em !important;
			background: #eff6f8;
		}

		#subscribe input#sender_email {
			margin: 0 !important;
			width: 100%;
			border-radius: 4px;
		}

		.input-group {
			display: block;
		}

		div#locations-tabContent {
			overflow-x: scroll;
			overflow-y: hidden;
			/* padding-bottom: 2em; */
		}
		
    	#footer-news .card-header {
    		padding: 0;
    		background: 0;
    		border: 0;
    	}
    	
		#footer-news .card {
			margin-bottom: 2em;
		}

    	#footer-news h4 {
    		border-bottom: 1px solid #393951;
    		padding-bottom: 0.5em;
    		margin-bottom: 1em
    	}

		div#solution-title-area {
			bottom: 1em !important;
		}


		#bg-overlay {
			height: 589px !important;
		}

		div#top-l-heading {
			top: 26em !important;
		}

		.right-fp a {
			margin-top: 0 !important;
		}

		.right-fp {
			padding: 1em 0 2em 1em;
		}

		section#wfs-about {
			padding-bottom: 0 !important;
		}

		#wfs-about-cards .col {
			margin-bottom: 1.5em;
		}

		#hpdi-buttons .col-md-12 {
			margin-bottom: 3em !important;
		}

		.d-flex .c.card {
			background-size: cover !important;
		}

		div#hpdi-buttons.pb {
			padding-bottom: 0;
		}

		.stats {
			padding: 0 2em 2em;
		}

		#hpdi-buttons div.col-md-12:last-child {
			margin-bottom: .5em !important;
		}

		.hero-rstretch {
			width: 100% !important;
			position: relative !important;
			clip-path: none !important;
		}

	}
@media (max-width: 768px) {
    
    .fuel-circle {
        width: 70px !important;
        height: 70px !important;
    }
    
    .btn.btn-styled .btn-inner {

        padding: .5em!important;

    }

}

@media (min-width: 769px) and (max-width: 1199px) {
    .fuel-circle {
        width: 80px !important;
        height: 80px !important;
    }
}
	@media (max-width: 768px) {

    section#industry-news, #westport-news, #about-us, #content-body, #governance {
    text-align: center;
    }
    
	.stat {border:0!important}

		section#subscribe {
			padding: 100px 0px;
		}

		div#send-message {
			text-align: center;
		}

		#subscribe input#sender_email {
			margin: 0 !important;
			width: 100%;
			border-radius: 4px;
		}


		#subscribe .btn.btn-styled .btn-inner:before {
			width: 100% !important;
			background-color: #f42302 !important;
		}

		#subscribe .btn.btn-styled {
			margin-right: auto !important;
			margin-left: auto !important;
		}

		#subscribe .btn.btn-styled {
			color: #FFF !important;
			padding-top: 1em;
		}

		#subscribe {
			font-size: 0.9em;
		}

		div#mt-area {
			float: none;
		}

		.contact-form {
			padding: 2em !important;
			background: #eff6f8;
		}

		ul#locations-tab li {
			width: 100%;
			text-align: center;
			padding-bottom: 1em;
		}

		.card-body {
			background: linear-gradient(162.78deg, #F5FDFE 2.57%, #FFFFFF 98.57%);
			box-shadow: 0px 8px 24px rgba(142, 152, 163, 0.2);
		}

		.wfsfoot-homepage {

			text-align: center;
		}

		nav#left-nav {
			padding: 0 0 2em 0 !important;
			border-bottom: 1px solid #ccc;
			margin: 0 0 2em 0;
			transition: all 1s;
		}

		#top-r-heading h2 {
			font-size: 1.2em;
			padding: 0.25em 0.25em 0;
		}

		div#top-r-heading {
			width: 100%;
			padding-left: .75em !important;
			top: 30.5em !important;
			padding-left: 7em;
			background: #fff;
			padding: 0.75em 0.75em 0;
			transition: background .5s
		}

		.left-fp:before {
			display: none
		}

		#bg-overlay {
			height: 660px !important;
		}

		section#hpdi-hero {
			margin-bottom: 260px !important;
		}

		#bot-cards>div h2 {
			color: #fff !important;
			font-size: 1.75em;
		}

		div#solution-title-area h1 {
			font-size: 2.5em;
		}

		div#top-l-heading {
			width: 100%;
			top: 24em !important;
		}

		.right-fp {
			padding: 4em 0 0;
			margin: 0;
			height: auto;
		}

		.left-fp {
			background: url(/images/bg/h2bg.jpg);
			height: 320px !important;
			background-size: cover;
			width: 100% !important;
			position: relative;
			background-position: left;
		}

		section#our-difference {
			height: auto !important;
		}

		#logos-bottom li {
			padding: 0.5em;
		}

		#logos-bottom>li:last-child>a {
			padding-right: 0 !important;
		}

		.page-head div>h1.mb0 {
			font-size: 2em;
		}

		div#solution-title-area {
			bottom: 0 !important;
		}
	}

	nav#left-nav>ul {
		padding: 0;
		list-style: none;
	}

	.page-head {
		background: url(/images/bg/page-headerbg.png), #f5f5f5;
		background-size: cover;
	}

	#left-nav>ul>li {
		padding: 0.15em 0 !important;
	}

	.mb1 {
		margin-bottom: 1em;
	}

	#footer-news .card {
		border: 0;
		background: none;
	}

	#footer-news .card-footer {
		background: none;
		padding: 0;
		border: 0;
	}

	#footer-news .card-body {
		padding: 1em 0;
	}

	.hero-rstretch {

		background-size: cover !important;
		position: absolute;
		width: 50%;
		background-position: left center !important;
		transition: all 0.5s ease;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
		height: 350px;
		right: 0;
	}
@media (min-width: 992px) {
    .listing-split .split-img.img-right .img-fluid {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center center;
        object-position: center center;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 16.5% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
    }
}	
	.hero-lstretch {
	    background-size: cover !important;
		position: absolute;
		width: 50%;
		background-position: left center !important;
		transition: all 0.5s ease;
		-webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
		height: 360px;
	    left:0;
	}

	@media (min-width: 1200px) {

	    
		div#top-r-heading {
			padding-left: 9em;
		}



		#socialTop {
			display: block;
		}

		.navbar-expand-xl .navbar-collapse {
			display: flex !important;
			flex-basis: auto;
			flex-direction: row;
		}

		.navbar-expand-xl .navbar-nav .dropdown-menu {
			position: absolute;
			border-radius: 0;
			padding: 1em;
		}
	}

	.dropdown-item {
		font-size: .9em;
	}

	.dropdown-item.active,
	.dropdown-item:active {
		color: #FFF !important;
		background: #0379b6;
	}

	.gradient-bg {

		background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
		background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 10%);
	}

	.clr-bg-white.sbb.sticky-top {
		/* box-shadow: 1px 0px 33px 0px #ccc;*/
	}

	.m0 {
		margin: 0
	}

	blockquote {

		font-size: 1.2em;
	}

	button.navbar-toggler:focus {
		border: 1px solid #ccc !important;
		border-radius: 0;
		box-shadow: none;
	}

	button.navbar-toggler {
		border: 1px solid #f4c92f;
		border-radius: 0;
	}

	.wfsfoot-homepage div a {
		color: #FFF !important;
	}

	.wfsfoot-homepage div a:hover {
		color: #AED192 !important;
	}

	.page-link:hover {
		color: #f4c92f !important;
	}

	dl,
	ol,
	ul {
		margin-top: 0;
		margin-bottom: 1.5rem;
	}

	div#content-area h2:first-child {
		margin-top: 0em !important;
	}

	div#content-area h2 {
		margin-top: .5em !important;
	}

	.img-margin {
		margin: 0 0.75em 0.5em 0;
		float: left;
	}

	.w100 {
		width: 100px
	}

	img.dhsig {
		width: 130px;
		padding: .3em 0;
	}

	img.djsig {
		width: 81px;
		padding: .3em 0;
	}

	img.fl {
		float: left;
	}

	.overlay {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transition: opacity 500ms;
		visibility: hidden;
		opacity: 0;
		position: absolute
	}

	.overlay:target {
		visibility: visible;
		opacity: 1;
	}

	.popup {
		margin: 70px auto;
		padding: 20px 40px;
		background: #fff;
		width: 90%;
		position: relative;
		border: 3px solid #000;
		transition: all 4s ease-in-out;
		z-index: 999;
		scroll-behavior: auto;
	}

	.popup h2 {
		margin-top: 0;
		color: #333;
		font-family: Tahoma, Arial, sans-serif;
	}

	.popup .close {
		transition: all 200ms;
		color: #333;
	}

	.popup .close:hover {
		color: #06D85F;
	}

	blockquote.esg-safety-quote {
		font-size: 1.25em;
		font-style: italic;
		font-weight: 600;
	}

	span.bullet {
		padding: 0.5em;
	}

	section.clr-grey-bg {
		background: #f5f5f5;
		padding: 1em 0 2em;
	}

	#bg-overlay {
		background-position: bottom !important;
		z-index: 999;
		position: absolute;
		background: url(/images/bg/bg1.webp);
		height: 610px;
		mix-blend-mode: multiply;
	}

	section#hpdi-hero {
		filter: contrast(1.12);
		background-position: center !important;
		background: url(/images/h2-hpdi-truck.webp);
		margin-bottom: 189px;
	}

	#hpdi-buttons .card-body {
		padding: 0 !important;
	}

	#hpdi-buttons .card {
		border-radius: 0;
		border: 2px solid #ccc;
		margin: 0 2em;
		padding: 1.5em 3em;
	}

	div#solution-title-area {
		position: absolute;
		bottom: 4em;
	}

	.d-flex .c.card {
		background: url(/images/button1.webp);
		background-repeat: no-repeat;
		background-position: center;
	}

	.brands .card-footer {
		background: #FFF;
		border-top: 0;
		padding-top: 0;
	}

	.brands.card {
		margin-bottom: 1.5em;
	}

	.brands .card-body {
		padding-bottom: 0;
	}

	.brands .card-body p {
		padding: 1.5em 0 0;
	}

	.d-flex .c.card:hover {
		filter: grayscale(1);
		transition: all 500ms;
	}

	a.btn.btn-secondary:active {
		color: #FFF;
	}

	a.btn.btn-secondary:hover {
		color: #f4c92f !important;
	}

	.card {
		border-radius: 0;
		border: 2px solid #ccc;
	}

	.esg-1 {
		width: 100%;
		background: url(/images/esg/esg-thumb1.webp);
		border: 0;
		padding: 2em;
		height: 350px;
		background-size: cover;
		margin-bottom: 1.5em;
	}

	.esg-2 {
		width: 100%;
		background: url(/images/esg/esg-thumb2.jpg);
		border: 0;
		padding: 2em;
		height: 350px;
		background-size: cover;
		margin-bottom: 1.5em;
	}

	.esg-3 {
		width: 100%;
		background: url(/images/esg/esg-thumb3.jpg);
		border: 0;
		padding: 2em;
		height: 350px;
		background-size: cover;
		margin-bottom: 1.5em;
	}

	#bot-cards>div>div>div>h2 {
		color: #FFF !important;
	}

	#bot-cards>div>div:hover {
		filter: sepia(.5);
	}

	#bot-cards a.btn.btn-secondary {
		background: #0379b6;
		color: #fff;
		border: 0;
		border-radius: 0;
		text-transform: uppercase;
		font-family: 'obvia';
		padding: 0.5em 2em;
		font-weight: 500;
	}

	a.btn.btn-secondary:hover {
		color: #000 !important;
		background: #ffc107 !important;
	}

	a.page-link.btn.btn-lg.btn-secondary {
		border-radius: 0;
		border-right: 7px solid #fff;
		border-bottom: 5px solid #fff;
	}

	div#sustain-foot {
		background: #dbeef9;
		padding: 2em 0 1.5em;
	}

	a.page-link.disabled.btn.btn-lg.btn-secondary {
		background: #000;
	}

	#bot-cards>div h2 {
		color: #FFF !important;
	}

	#bot-cards div.card-body {
		padding: 0;
	}

	div#video-container {
		padding: 3em 0;
	}

	div#video-container video {
		width: 80%;
		border: 1px solid #ccc
	}

	.container ul {
		/* margin-bottom: 0 !important; */
	}

	section.clr-grey-bg {
		background: #EFF6F8;
		padding: 3em 0;
	}

	.card.fuel.over {
		border: 2px solid #ffc20e !important;
	}

	span.error {
		background: red;
		color: #fff;
		padding: 0.25em 0.5em;
		border-radius: 0.25em;
	}

	.card:hover {
		border-radius: 0;
		border: 2px solid #f4c92f;
	}

	.accordion-body {
		padding: 0;
	}

	header ul.navbar-nav>li>ul>li>ul>li>a {
		font-size: 90%;
	}

	a:active,
	a:focus,
	p a,
	#content-area>ul a:not(.page-link),
	#left-nav ul .active a {
		text-decoration: none;
	}

	header ul.navbar-nav>li>ul>li>ul>li::before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f054";
		font-size: 10px;
		margin: 0 12px;
	}

	header ul.navbar-nav>li>ul>li>ul {
		margin-left: -20px;
	}

	header ul {
		list-style-type: none !important
	}

	ol#supply-ppap ul {
		padding-bottom: .25em;
	}

	ol#supply-ppap ul li p {
		margin-bottom: 0;
		line-height: 1.2;
	}

	.brands>.card-body>p>a>img {
		height: 60px !important;
		padding: 0 1.3em;
	}

	.bordered {
		border: 1px solid #ccc;
		margin-bottom: 3em;
	}

	.event-date-location {
		letter-spacing: 0;
        font-weight: 600;
        font-size: 23px;
        line-height: 120%;
	}

	button.event-add {
		border: 0;
		color: #F42302 !important;
		background: none;
	}

	.attn-bar {
		background: #000;
		padding: .5em 1em;
		font-size: 0.9em;
		color: #FFF;
	}

	a.orange {
		color: #ffc20e !important;
		font-weight: 600;
	}

	a.orange:hover {
		color: #fdebb4 !important
	}

	p.h6.mt.text-muted {
		color: #ccc !important;
	}

	header ul.navbar-nav>li>ul>li>ul>li {
		background: none;
	}

	header ul.navbar-nav>li>ul>li>ul>li:hover {
		background: #E8F6FF;
		transition: .25s background;
	}

	picture img.float-start {
		padding: 0.5em 1em 0 0;
	}

	.wfsfoot-homepage h3 {
		font-family: 'Obvia';
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 110%;
		/* identical to box height, or 18px */

		letter-spacing: 0.1em;
		text-transform: uppercase;

		color: #FFFFFF;
		padding-bottom: .75em;
		margin-bottom: .75em;
		border-bottom: 1px solid #fff;

	}

	.footer-links li {
		margin-bottom: 0.5em;
	}

	#below-footer-links p {
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		margin-top: 3em;
		padding-bottom: 2em;
		line-height: 160%;
		/* identical to box height, or 16px */


		color: #393951;
	}

	.icon-spacing {
		margin-bottom: 0.5em;
	}

	.icon-spacing span {
		width: 35px !important;
		display: inline-block;
		text-align: center;
	}

	.wfsfoot-homepage {
		background: #0F5A85;
		padding: 5em 0 3em;
		color: #FFF;
		font-size: 0.85em;
		min-height: 350px;
	}

	ul.footer-links {
		padding: 0 0 0 0;
		list-style: none;
	}

	#top-navbar a:link {
		color: #fff;
		text-decoration: none;
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 600 !important;
		font-size: 10px;
		line-height: 150%;
		text-transform: uppercase;
		padding: .35em 0;
	}

	#top-navbar a:link {
		color: #fff;
		text-decoration: none;
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 600 !important;
		font-size: 10px;
		line-height: 150%;
		text-transform: uppercase;
		padding: .35em 0;
	}



	div#top-navbar {
		background: #222239;
	}


	[data-fa-icon]::after {
		font-family: fontawesome;
		padding-left: .7em;
		font-size: 1.2em
	}

	[data-fa-icon="Contact"]::after {
		content: "\f0e0";
	}

	[data-fa-icon="InvestorRelations"]::after {
		content: "\f08e";
	}

	[data-fa-icon="Search"]::after {
		content: "\f002";
	}

	#top-navbar li {
		padding: 0 0 0 1.75em;
	}

	#top-navbar a:visited {
		color: #dddddd;
	}

	.dropdown-item:focus,
	.dropdown-item:hover {
		color: #000000 !important;
		background-color: #d7eaf8;
	}

	.dropdown-toggle {
		box-sizing: border-box;
		position: relative;
		display: block;
		transform: scale(var(--ggs, 1));
		border: 0;
		/* border-radius: 100px; */
	}

	.dropdown-toggle::after {
		font-family: fontawesome;
		content: "\f078";
		display: inline-block;
		margin-left: 0.255em;
		vertical-align: 0;
		content: ;
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
	}

	li.nav-item:not(.dropdown)>a.nav-link {
		/* margin-left: 1em; */
	}

	li.nav-item:last-child>a.nav-link {
		margin-left: 0 !important;
		padding-right: 0 !important;
	}

	header nav a.dropdown-toggle.nav-link {
		padding-right: 1em;
	}

	header nav a.dropdown-toggle.nav-link {
		padding-left: 3em !important;
	}

	header nav li.nav-item:last-child a {
		margin-left: 1em !important;
	}

	.col.tr {
		text-align: right;
	}

	#wfs-about-cards h5 {
		color: #0379B5 !important;
	}

	#wfs-about-cards p {
		size: 18px;
		font-family: montserrat;

	}

	#wfs-about-cards hr {
		color: #0379B6;
		width: 50px;
		margin: 0 auto;
		padding-bottom: 0.25em;
	}

	#wfs-about-cards hr {
		color: #0379B6;
		position: relative;
		top: 0;
		border: none;
		height: 3px;
		background: black;
		width: 50px;
		margin: 0 auto;
		margin-bottom: 1em;

	}

	#close-x-mark {
		padding: .5em 0;
	}

	.tab-content h5 {
		font-family: 'Geom-Graphic';
		font-style: normal;
		font-weight: 600;
		font-size: 23px;
		line-height: 120%;
		text-transform: capitalize;
		color: #12131E;
	}

	.tab-content card h6 {
		text-transform: uppercase;
		color: #393951;
		border-bottom: 1px solid #000;
		padding-bottom: 0.5em;
		margin-bottom: 0.5em;
	}

	h3,
	.h3 {
		font-weight: 600 !important;
	}

	.text-inherit {
		text-transform: inherit;
	}

	#breadcrumb {
		font-size: 14px;
		padding: .15em 0 0 0;
		margin: 0;
		display: inline-block;
	}

	#breadcrumb li+li:before {
		content: '>';
		margin: 0 10px;
	}

	#breadcrumb li {
		float: left;
		list-style-type: none;
		margin: 0;
		color: #393951;
	}

	#breadcrumb li:before {
		content: '';
		font-family: '';
		float: left;
		margin-left: -1.65em;
		color: #000;
	}

	.page-heading .container .hero-copy {
		padding: 32px 12px !important;
		text-align: center;
	}

	#w-mark {
		background: url(/images/w.webp)  #f7fdfe;
		background-repeat: no-repeat !important;
		background-position: top 200px left -1050px, bottom right -1100px;
		background-size: contain;
	}
	
	.brand-card:hover {
    border: 1px solid #0379B6;
}

.brand-card {
    border: 1px solid #fff;
}

#primary-navigation {
    padding-top: 8px;
    padding-bottom: 8px;
}


#article-container > article {
        padding: 1em 0;
    border-bottom: 1px solid #ccc;
}
#article-container > article:last-child {
    border-bottom: 0;
}
#footer-news {
    background: none!important;
}
#footer-news .news-column .news-column-body ul li {
    margin-bottom: 1rem!important;
}
.news-card .card-footer .news-item-date {
    font-size: 12px!important;
    text-transform: none;
}
.news-section-bg {     background: radial-gradient(65.78% 65.78% at 46.67% 8.83%, #f3f3f3 6.25%, #FFFFFF 91.67%);}
.fade-in-bg {
  position: relative;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #b9c3cc78 28%, #FFFFFF 100%);
  opacity: 0;
  animation: fadeInQuick 1s ease-in-out forwards;
}

@keyframes fadeInQuick {
  to {
    opacity: 1;
  }
}
.btn.btn-styled .btn-inner {
    font-size: 1.3em;
}
@media (min-width: 1200px) {
    #primary-navigation .navbar .navbar-collapse .collapse-inner .navbar-nav .nav-item.dropdown .dropdown-menu {
        left: 0;
        margin-top: 0;
        border: 0;
        padding: 1em 0;
        box-shadow: 5px 14px 19px rgb(0 0 0 / 36%);
        margin-top: -31px !important;
    }
}

.nbr {
    border-right: 0 !important;
}
.flip-card .flip-card-inner .flip-card-back li {
    font-size: 1em!important;
    line-height: 160%;
}
@media (min-width: 768px) {
    .page-heading {
        height: 350px!important;
    }
}

@media (max-width: 1199.98px) {
    #primary-navigation {
        height: inherit!important;
    }
       .btn.btn-styled .btn-inner {
    font-size: 1em!important;
}
}

@media (max-width: 991px) {
    #integrity {
        display: block;
        padding: 300px 0 0 0 !important;
        margin-bottom: 0;
    }
 
}
#icons-reach img {
    width: 140px;
    height: 140px;
}
#hero-container {
  background-color: transparent;
  transition: background-color 2s ease-in-out;
}

#hero-container  {
  background: linear-gradient(270deg, #ffffffa3 60%, #e3ecf057 100% 100%) !important
}
.animated-heading span {
	opacity: 0;
	display: inline-block;
	transform: translateY(20px);
	animation: fadeUp 0.6s ease-out forwards;
}

.animated-heading span:nth-child(1) { animation-delay: 0.1s; }
.animated-heading span:nth-child(2) { animation-delay: 0.2s; }
.animated-heading span:nth-child(3) { animation-delay: 0.3s; }
.animated-heading span:nth-child(4) { animation-delay: 0.4s; }
.animated-heading span:nth-child(5) { animation-delay: 0.5s; }
.animated-heading span:nth-child(6) { animation-delay: 0.6s; }
.animated-heading span:nth-child(7) { animation-delay: 0.7s; }
.animated-heading span:nth-child(8) { animation-delay: 0.8s; }
.animated-heading span:nth-child(9) { animation-delay: 0.9s; }
.animated-heading span:nth-child(10) { animation-delay: 1s; }
.animated-heading span:nth-child(11) { animation-delay: 1.2s; }
.animated-heading span:nth-child(12) { animation-delay: 1.3s; }
.animated-heading span:nth-child(13) { animation-delay: 1.4s; }
.animated-heading span:nth-child(14) { animation-delay: 1.5s; }

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.westport-t, .westport-s, .westport-u, .westport-w {
    position: absolute;
    top: 0;
    left: -31%;
    width: 121%;
    height: 870px;
    background-repeat: no-repeat;
    background-position: 30% 40%;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    mix-blend-mode: multiply;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.3) 100%);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

.fuel-circle {
    width: 140px;
    height: 140px;
    background-color: #fff;
    color: #147bb6;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 8px 7px 19px 0px #0f5a8529;
    border: 1px solid #0f5a85;
}
.fuel-circles {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.navbar-nav {--bs-nav-link-color: rgb(0 0 0)!important;}
    
    #primary-navigation .navbar .navbar-collapse .collapse-inner .navbar-nav .nav-item .nav-link .icon-wrapper {
            margin-left: .5rem;
        margin-right: .5em;
    }
    
    b, strong {
    font-weight: 600;
    }
    
    @media (min-width: 768px) {
    .swiper.carousel-full-width .swiper-wrapper .swiper-slide .slide-content {
        max-width: 520px!important;
    }

}

.swiper.carousel-full-width .slider-btn-container {
max-width: 1300px!important;

}
h2#hpcs-heading {
    width: 180px;
}
.circle-icon {
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: #fff;
    color: #147bb6;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 8px 7px 19px 0px #0f5a8529;
    border: 1px solid #0f5a85;
    margin: 0 auto;
}

.icon-grid {
    --circle-size: 140px;
}


@media (max-width: 991.98px) {
    h2#hpcs-heading {
    width: 100%!important 
}
  .collapse-inner ul.navbar-nav {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .collapse-inner ul.navbar-nav > li {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .collapse-inner .dropdown-menu,
  .collapse-inner .dropdown-item {
    text-align: left;
  }
}

/* Force menus to align with the toggle link */
.navbar .dropdown-menu {
  top: 100%;
  left: 0;
  margin-top: 0.25rem; /* small gap */
}
/* Animate rotation */
.navbar .dropdown-toggle svg {
  transition: transform 0.3s ease;
}

.navbar .dropdown.show .dropdown-toggle svg {
  transform: rotate(180deg);
}

#fuels {
    border-right: 5px solid #FFF
}

/* Base size + smooth animation */
.fuel-circle {
  width: 100px;
  height: 100px;
  transition: width .25s ease, height .25s ease, transform .2s ease;
}

/* ≤768px */
@media (max-width: 768px) {
  .fuel-circle { width: 90px !important; height: 90px !important; }
}

@media (max-width: 479.98px) {
  .fuel-circle { width: 70px !important; height: 70px !important; }
}

/* Optional micro-interaction */
.fuel-circle:hover,
.fuel-circle:focus-visible {
  transform: scale(1.05);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fuel-circle { transition: none; }
}

/* Stock ticker positioning */
#stock-ticker {
    font-size: 10px;
    margin-top:3px;
    }
    
    @media (min-width: 992px) {
    #cespira-top-copy {
        width: 100% !important;
    }
}
    .top {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    }
    
    
    .bottom {
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    }
    @media (max-width: 1200px) { .bottom {clip-path:none!important}}

/* === HERO SECTION === */
.hero-lstretch {
  width: 20% !important;
}
.hero-header {
  padding: 40px 120px;
  margin-top: 32px;
  overflow: hidden;
}
@media(max-width: 991px) {
  .hero-header {
    padding: 32px 16px;
  }
}

/* === SECTION BACKGROUNDS === */
section#integrity {
  background: url(/images/pages/our-difference/qual-env.webp);
  background-position: 0% 75%;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 458px;
  flex: none;
  order: 1;
  flex-grow: 0;
}
section.history {
  background: url(/images/pages/about-us/landing/westport-history-background.webp) !important;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 0 0 120px;
  display: flex;
  align-items: center;
  height: 458px;
  flex: none;
  order: 1;
  flex-grow: 0;
}
@media(max-width: 991px) {
  section.history {
    background-size: cover !important;
    background-position: center center !important;
  }
  #integrity {
    display: block;
    padding: 300px 0 0 0 !important;
    margin-bottom: 200px;
  }
}

/* === SQUARES SECTION === */
#squares .container {
  display: flex;
  justify-content: space-between;
}
#squares .container .square {
  width: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square.green {
  background: #F2F9EC;
}
.square.blue {
  background: #EFF6F8;
}
@media(max-width: 991px) {
  #squares .container {
    flex-wrap: wrap;
  }
  #squares .container .square {
    width: 100%;
  }
}

/* === CLIP PATH STYLES === */
.top {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
.bottom {
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}
@media(max-width: 991px) {
  .bottom,
  .top {
    clip-path: none;
  }
}

/* === OVERLAY WELL === */
.overlay-well {
  background: rgba(255, 255, 255, 0.85);
  padding: 24px;
}
.overlay-well p {
  margin-bottom: 32px;
  color: #393951;
}
.history .overlay-well p {
  margin-bottom: 100px !important;
}
.history a {
  bottom: 50px;
}
@media(max-width: 991px) {
  .overlay-well {
    position: inherit;
  }
}
@keyframes spliceRevealLeft {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 0.2;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes spliceRevealRight {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    opacity: 0.2;
    transform: scaleX(1);
    transform-origin: right;
  }
}

@keyframes spliceRevealTop {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 0.2;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes spliceRevealBottom {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    opacity: 0.2;
    transform: scaleX(1);
    transform-origin: right;
  }
}
.westport-t, .westport-s, .westport-u, .westport-w {
    position: absolute;
    top: 0;
    left: -31%;
    width: 121%;
    height: 870px;
    background-repeat: no-repeat;
    background-position: 30% 40%;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    mix-blend-mode: multiply;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.3) 100%);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}
/* === 3. ASSIGN ANIMATIONS WITH INTERSECTION OBSERVER TRIGGERED CLASS === */
.westport-t.visible {
  background-image: url(images/w/w2.svg);
  animation: spliceRevealLeft 1.2s ease-out forwards;
}
.westport-s.visible {
  background-image: url(images/w/w1.svg);
  animation: spliceRevealRight 1.2s ease-out 0.2s forwards;
}
.westport-u.visible {
  background-image: url(images/w/w3.svg);
  animation: spliceRevealTop 1.2s ease-out 0.4s forwards;
}
.westport-w.visible {
  background-image: url(images/w/w4.svg);
  animation: spliceRevealBottom 1.2s ease-out 0.2s forwards;
}

.listing-split {
    background-color: #eff6f8; }

.hero-container {
    background-image: linear-gradient(343deg, rgb(255 255 255 / 78%) 60%, rgba(227, 236, 240, 0.24) 100%, rgba(227, 236, 240, 0.24) 10%) !important;
    background-position-x: initial !important;
    background-position-y: initial !important;
    background-size: initial !important;
    background-repeat: initial !important;
    background-attachment: initial !important;
    background-origin: initial !important;
    background-clip: initial !important;
    background-color: initial !important;
}
/* === OTHER === */
.listing-split {
  background-color: #FFF;
}
#primary-navigation.stuck {
  box-shadow: 0 1rem 9rem rgba(0, 0, 0, 0.15) !important;
}
#hero-container {
  box-shadow: none;
  transition: box-shadow 0.6s ease;
  transition-delay: 1s;
}
#hero-container.show-shadow {
  box-shadow: 2px 2px 61px 0px #cccccc69;
}

.banner#key-stats {
    background: url(https://static.westport.com/assets/images/hero/homepage-counter-area-2.webp) !important;
    background-size: cover !important;
}

#hero-container.show-shadow {
    box-shadow: 2px 2px 61px 0px #cccccc69;
}
.banner#key-stats {
    background: url(https://static.westport.com/assets/images/hero/homepage-counter-area-2.webp) !important;
    background-size: cover !important;
}
#primary-navigation .icon-wrapper {
    transform: rotate(90deg);
    transition: 0.2s;
    margin-right: 1.5rem;
    line-height: 2.5;
    padding: 0 1em;
}
#primary-navigation .icon-wrapper[aria-expanded="true"] {
    transform: rotate(270deg);
    transition: 0.2s;
}
/* Base toggler reset */
.navbar-toggler {
  border: none !important;
  padding: 0.5rem;
}

/* The burger lines */
.menu-btn__burger {
  display: block;
  width: 28px;
  height: 3px;
  background: #ffffff; /* WHITE */
  border-radius: 2px;
  transition: all 0.3s ease;
  position: relative;
}

/* Create top and bottom bars */
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-btn__burger::before {
  transform: translateY(-8px);
}

.menu-btn__burger::after {
  transform: translateY(8px);
}

/* When menu is open (Bootstrap adds .show to collapse target and aria-expanded=true) */
.navbar-toggler[aria-expanded="true"] .menu-btn__burger {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .menu-btn__burger::before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .menu-btn__burger::after {
  transform: rotate(-45deg);
}