/*
  Theme Name: Roma Fuels
  Author: NetGain SEO
  Author URI: https://netgain.agency/
  Description: Wordpress theme for Roma Fuels. Use of this theme outside of this company's website is strictly prohibited.
  Template: ion
  Text Domain: romafuels
*/
:root {
  --font: 'Lato', sans-serif;
  --heading: var(--font);
  --spacing: clamp(60px, 5.208333333333333vw, 100px);
  --radius: clamp(8px, 0.625vw, 12px);
  --transition: 0.3s;
  --transitionSlow: 0.5s;
  --transitionFast: 0.1s;
  --mainFontSize: clamp(16px, 0.9375vw, 18px);
  --smallFontSize: clamp(14px, 0.83333vw, 16px);
  --h1FontSize: clamp(30px, 2.60417vw, 50px);
  --h2FontSize: clamp(25px, 1.5625vw, 30px);
  --h3FontSize: clamp(20px, 1.35417vw, 26px);
  --h4FontSize: clamp(18px, 1.14583vw, 22px);
  --lineHeight: 1.4;
  --lineHeightSm: 1.4;
  --lineHeightLg: 1.5;
  --headingLineHeight: 1.4;
  --containerAbove1600: 1308px;
  --containerAbove1368: 1308px;
  --red: #ef3e33;
  --yellow: #ffac3b;
  --text: #404041;
  --dark: #6d6e70;
  --light: #e5e6e6;
  --primary: var(--red);
  --secondary: var(--yellow);
  --buttonPaddingTop: clamp(8px, 0.625vw, 12px);
  --buttonPaddingBottom: var(--buttonPaddingTop);
  --buttonPaddingLeft: clamp(17px, 1.30208vw, 25px);
  --buttonPaddingRight: var(--buttonPaddingLeft);
  --buttonCasing: unset;
  --buttonRadius: clamp(8px, 0.625vw, 12px);
  --buttonFontSize: var(--mainFontSize);
  --buttonWeight: 700;
  --buttonFont: var(--font);
  --buttonTextColour: #FFFFFF;
  --buttonBackgroundPrimary: var(--primary);
  --buttonBackgroundSecondary: var(--secondary);
  --buttonBackgroundGhost: transparent;
  --buttonHoverBackgroundColour: var(--dark);
  --buttonHoverFontColour: #FFFFFF;
  --buttonDarkHoverBackgroundColour: var(--light);
  --buttonDarkHoverFontColour: #0E0E0F;
  --formFieldBorder: var(--light);
  --formFieldPaddingTop: var(--mainFontSize);
  --formFieldPaddingBottom: var(--formFieldPaddingTop);
  --formFieldPaddingLeft: clamp(17px, 1.30208vw, 25px);
  --formFieldPaddingRight: var(--formFieldPaddingLeft);
  --formFieldRadius: clamp(6.6666666666667px, 0.52083333333333vw, 10px);
  --headerAdjustment: 32px;
}

h1, h2, h3 {
    font-family: var(--heading);
    line-height: var(--headingLineHeight);
    color: var(--text);
    font-weight: 900;
}

h1 strong, h2 strong, h3 strong {
    color: var(--yellow);
    font-weight: 900;
}

.pt-sm { padding-top: calc( var(--spacing) / 4 ) !important; }
.pb-sm { padding-bottom: calc( var(--spacing) / 4 ) !important; }

.pt-md { padding-top: calc( var(--spacing) / 2 ) !important; }
.pb-md { padding-bottom: calc( var(--spacing) / 2 ) !important; }

#preheader {
    margin: 0 0 clamp(-20px, -1.0416666666667vw, -10px);
    position: relative;
    top: 0;
    z-index: 10;
}

#preheader ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

#preheader ul li {
    margin: 0 clamp(4.6666666666667px, 0.36458333333333vw, 7px) 0 0;
    padding: 0 clamp(4.6666666666667px, 0.36458333333333vw, 7px) 0 0;
    line-height: 1;
    position: relative;
}

#preheader ul li, #preheader ul li a {
    font-size: var(--mainFontSize);
    color: var(--red);
}

#preheader ul li a:hover,
#preheader ul li a:focus {
    color: #000;
}

#preheader ul li:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    width: clamp(0.66666666666667px, 0.052083333333333vw, 1px);
    height: var(--smallFontSize);
    background-color: var(--red);
}

#preheader ul li:last-of-type {
  margin: 0 0 0 clamp(4.6666666666667px, 0.36458333333333vw, 7px);
  padding: 0;
}

#preheader ul li:last-of-type:after,
#preheader ul li:nth-last-of-type(2):after {
    content: none;
}

#preheader ul li:last-of-type a,
#header #menu-item-79 a, #header .menu-item-79 a {
    font-family: var(--buttonFont) !important;
    font-size: var(--buttonFontSize) !important;
    padding: var(--buttonPaddingTop) var(--buttonPaddingRight) var(--buttonPaddingBottom) var(--buttonPaddingLeft) !important;
    background-color: var(--buttonBackgroundPrimary) !important;
    color: var(--buttonTextColour) !important;
    line-height: 1 !important;
    font-weight: var(--buttonWeight) !important;
    border-radius: var(--buttonRadius) !important;
    border: var(--buttonBorderWidth) solid var(--buttonBackgroundPrimary) !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: var(--transition) !important;
    letter-spacing: var(--buttonLetterSpacing) !important;
    text-transform: uppercase !important;
}

#preheader ul li:last-of-type a:hover,
#preheader ul li:last-of-type a:focus,
#header #menu-item-79 a:hover, #header #menu-item-79 a:focus,
#header .menu-item-79 a:hover, #header .menu-item-79 a:focus {
    background: var(--buttonHoverBackgroundColour) !important;
    color: var(--buttonHoverFontColour) !important;
    border-color: var(--buttonHoverBackgroundColour) !important;
}

#header {
    padding: var(--h4FontSize) 0;
    background-color: #F2F2F2;
    z-index: 9999;
}

#header.scrollingHeader {
    position: fixed !important;
    top: clamp(-500px, -26.041666666667vw, -333.33333333333px);
    left: 0;
    right: 0;
    width: 100%;
    padding: clamp(10px, 0.78125vw, 15px) 0;
    position: relative;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header.scrollingHeader.active {
    top: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.admin-bar #header.scrollingHeader.active {
    top: var(--headerAdjustment);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header .navigation ul {
    align-items: flex-end;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header.scrollingHeader .navigation ul {
    align-items: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header .navigation ul li:not(:first-child, :last-child, #header .navigation ul li:nth-last-of-type(2), #header .navigation .sub-menu li) {
    margin-right: clamp(10px, 1.3020833333333vw, 25px);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header.scrollingHeader .navigation ul li:not(:first-child, :last-child, #header .navigation ul li:nth-last-of-type(2), #header.scrollingHeader .navigation .sub-menu li) {
    margin-right: clamp(10px, 1.3020833333333vw, 25px);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header .navigation ul li#menu-item-71,
#header .navigation ul li.menu-item-71 {
    margin-right: auto;
    position: relative;
    top: clamp(-10px, -0.52083333333333vw, -6.6666666666667px);
    z-index: 99;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header.scrollingHeader .navigation ul li.menu-item-71 {
    top: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header #menu-item-71 a {
    display: flex;
    width: clamp(160px, 20.208333333333vw, 388px);
    height: clamp(40px, 3.4895833333333vw, 67px);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header.scrollingHeader .menu-item-71 a {
    width: clamp(160px, 13.385416666667vw, 257px);
    height: clamp(30px, 2.2916666666667vw, 44px);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header #menu-item-71 a svg, #header.scrollingHeader .menu-item-71 a svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#header .navigation ul li a {
    font-size: clamp(12px, 0.78125vw, 15px);
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
}

#header .navigation ul li a:hover,
#header .navigation ul li a:focus,
#header .navigation ul li.current-menu-item > a {
    color: var(--red);
}

#header #menu-item-79 {
    display: none;
}

#header.scrollingHeader .menu-item-79 {
    margin-left: clamp(16.666666666667px, 1.3020833333333vw, 25px);
}

#hero {
    height: auto !important;
    background-color: #000 !important;
    overflow: hidden !important;
}

#pillars {
    margin: clamp(-200px, -10.416666666667vw, -200px) 0 clamp(45px, 2.6041666666666665vw, 50px);
    z-index: 99;
}

#pillars .pillar {
    background-color: var(--red);
    color: #FFF;
    padding: var(--h4FontSize) clamp(23.333333333333px, 1.8229166666667vw, 35px);
    position: relative;
}

#pillars .pillar p {
    font-size: var(--smallFontSize);
    font-weight: 400;
    margin: 0;
}

#pillars .pillar p strong {
    display: block;
    font-size: var(--h4FontSize);
    font-weight: 700;
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
}

.content-text h2 {
    font-size: var(--h3FontSize);
    font-weight: 700;
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

#btn-spacing {
    margin-top: clamp(23.333333333333px, 1.8229166666667vw, 35px);
}

#btn-spacingextra {
    margin-top: clamp(83.333333333333px, 6.5104166666667vw, 125px);
}

#whyChoose {
    border-radius: 0 !important;
}

#whyChoose, #serviceContainer, #whyChoose.wcu-inner > .e-con-inner {
    display: flex;
    flex-wrap: wrap;
    grid-gap: clamp(10px, 0.78125vw, 15px) !important;
    justify-content: flex-end;
}

#whyChoose.wcu-inner > .e-con-inner {
    justify-content: center;
    width: clamp(570px, 44.53125vw, 855px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

#whyChoose.wcu-inner.wcu-lg > .e-con-inner {
    width: 100% !important;
    max-width: var(--containerAbove1600) !important;
}

#whyChoose.wcu-inner.fw > .e-con-inner,
#whyChoose.wcu-inner.three > .e-con-inner {
    width: 100% !important;
    max-width: var(--containerAbove1600) !important;
}

#serviceContainer {
    grid-gap: var(--h2FontSize) !important;
    justify-content: center;
}

#whyChoose .wcu-card,
#whyChoose .red-box {
    width: calc(50% - clamp(6.6666666666667px, 0.52083333333333vw, 10px));
    border: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #CCC;
    padding: clamp(16.666666666667px, 1.3020833333333vw, 25px);
    border-radius: clamp(8px, 0.625vw, 12px);
}

#whyChoose .wcu-card.first {
    border: none !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
}

#whyChoose .wcu-card.first h3 {
    font-size: clamp(18px, 1.3541666666666667vw, 26px);
}

#whyChoose .wcu-card.first p {
    font-size: clamp(15px, 0.9375vw, 18px);
}

#whyChoose .red-box {
    border: unset !important;
    border-radius: 0 !important;
}

#whyChoose.wcu-inner.three .wcu-card {
    width: calc(33% - clamp(6.6666666666667px, 0.52083333333333vw, 10px));
}

#serviceContainer .service-card {
    width: calc(50% - clamp(15px, 0.78125vw, 15px));
}

#whyChoose .wcu-card h3 {
    font-size: var(--h4FontSize);
    font-weight: 700;
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px) !important;
}

#whyChoose .wcu-card p {
    font-size: var(--smallFontSize);
    font-weight: 400;
}

#whyChoose .wcu-card svg {
    height: clamp(26.666666666667px, 2.0833333333333vw, 40px) !important;
    width: auto !important;
}

#whyChoose:not(#whyChoose.wcu-inner.wcu-lg) .wcu-card svg * {
    fill: var(--yellow);
}

.section-heading h2 {
    font-size: var(--h2FontSize);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 clamp(40px, 3.125vw, 60px);
}

.section-heading.sh-paragraph h2 {
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

.section-heading.sh-paragraph h2 + p {
    margin: 0 auto;
    width: clamp(573.33333333333px, 44.791666666667vw, 860px);
    max-width: 100%;
}

.section-heading.sh-paragraph.shp-lg h2 + p {
    width: clamp(766.66666666667px, 59.895833333333vw, 1150px);
}

.section-heading.yellow h2 {
    color: var(--yellow);
}

#serviceContainer .service-card a {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: var(--red);
    position: relative;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#serviceContainer .service-card a:after {
    content: '';
    position: absolute;
    bottom: clamp(10px, 0.78125vw, 15px);
    right: clamp(10px, 0.78125vw, 15px);
    display: block;
    width: var(--h2FontSize);
    height: var(--h2FontSize);
    background-image: url(i/service-white.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#serviceContainer .service-card a:hover,
#serviceContainer .service-card a:focus {
    background-color: #6d6e70;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#serviceContainer .service-card a:hover:after,
#serviceContainer .service-card a:focus:after {
    background-image: url(i/service-yellow.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#serviceContainer .service-card a img {
    display: block;
    width: clamp(150px, 11.71875vw, 225px);
    flex: 0 0 clamp(150px, 11.71875vw, 225px);
    height: 100%;
    object-fit: cover;
}

#serviceContainer .service-card a span {
    font-size: var(--mainFontSize);
    font-weight: 400;
    color: #FFF;
    padding: 0 var(--h4FontSize);
}

#serviceContainer .service-card a span strong {
    display: block;
    font-size: var(--h3FontSize);
    font-weight: 700;
    margin: 0 0 clamp(3.3333333333333px, 0.26041666666667vw, 5px);
}

.content-text p strong {
    font-size: var(--h4FontSize);
    font-weight: 400;
    max-width: 90%;
    display: block;
}

.content-text.two-col ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    padding: 0 0 0 var(--h4FontSize);
    margin: var(--h2FontSize) 0 var(--h1FontSize);
}

.content-text.two-col ul li {
    margin: 0;
    line-height: 2;
}

#blog .elementor-post {
    position: relative;
    overflow: unset;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-posts-container {
    grid-gap: clamp(66.66666666666667px, 5.208333333333333vw, 100px) clamp(36.666666666667px, 2.8645833333333vw, 55px);
}

#blog .elementor-post__thumbnail {
    padding-bottom: 0;
    height: clamp(344px, 26.875vw, 516px);
}

#blog .elementor-post__thumbnail__link {
    margin-bottom: 0;
}

#blog .elementor-post__text {
    position: absolute;
    background-color: #FFF;
    box-shadow: clamp(3.3333333333333px, 0.26041666666667vw, 5px) clamp(3.3333333333333px, 0.26041666666667vw, 5px) clamp(3.3333333333333px, 0.26041666666667vw, 5px) rgba(0,0,0,0.20);
    border-radius: clamp(8px, 0.625vw, 12px);
    bottom: clamp(-50px, -2.6041666666667vw, -33.333333333333px);
    right: clamp(-30px, -1.5625vw, -20px);
    border: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #CCC;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    z-index: 99;
}

#blog .elementor-post__text .elementor-post__title {
  -webkit-order: 1;
  -ms-order: 1;
  order: 1;
  margin: 0 0 clamp(10px, 0.78125vw, 15px);
  font-size: var(--h4FontSize);
  color: var(--red);
  font-weight: 700;
  line-height: 1.3;
  padding: clamp(40px, 3.125vw, 60px) var(--h2FontSize) 0;
}

#blog .elementor-post__text .elementor-post__excerpt {
  -webkit-order: 2;
  -ms-order: 2;
  order: 2;
  margin: 0 0 clamp(26.666666666667px, 2.0833333333333vw, 40px);
  padding: 0 var(--h2FontSize);
}

#blog .elementor-post__text .elementor-post__excerpt p {
  font-size: var(--mainFontSize);
  color: var(--text);
  font-weight: 400;
  line-height: 1.4;
}

#blog .elementor-post__text .elementor-post__meta-data {
  -webkit-order: 3;
  -ms-order: 3;
  order: 3;
  font-size: var(--smallFontSize);
  color: var(--text);
  font-weight: 400;
  line-height: 1.625;
  margin: 0;
  padding: 0 var(--h2FontSize) clamp(26.666666666667px, 2.0833333333333vw, 40px);
}

#blog .elementor-post__thumbnail img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    left: unset;
    position: unset;
    top: unset;
    transform: unset;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-post__text:after {
    content: '';
    position: absolute;
    bottom: clamp(16.666666666667px, 1.3020833333333vw, 25px);
    right: clamp(16.666666666667px, 1.3020833333333vw, 25px);
    display: block;
    width: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    background-image: url(i/service-yellow.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-post:hover .elementor-post__text:after,
#blog .elementor-post:focus .elementor-post__text:after {
    background-image: url(i/service-white.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-post:hover .elementor-post__text,
#blog .elementor-post:focus .elementor-post__text {
    background-color: var(--yellow);
    border: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid var(--yellow);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-post .elementor-post__text .elementor-post__title a,
#blog .elementor-post .elementor-post__text .elementor-post__excerpt p,
#blog .elementor-post .elementor-post__text .elementor-post__meta-data {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-post:hover .elementor-post__text .elementor-post__title a,
#blog .elementor-post:focus .elementor-post__text .elementor-post__title a,
#blog .elementor-post:hover .elementor-post__text .elementor-post__excerpt p,
#blog .elementor-post:focus .elementor-post__text .elementor-post__excerpt p,
#blog .elementor-post:hover .elementor-post__text .elementor-post__meta-data,
#blog .elementor-post:focus .elementor-post__text .elementor-post__meta-data {
    color: #FFF !important;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#blog .elementor-post:hover .elementor-post__thumbnail img,
#blog .elementor-post:focus .elementor-post__thumbnail img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#banner p {
    font-size: var(--h3FontSize);
    font-weight: 700;
    max-width: clamp(511.33333333333px, 39.947916666667vw, 767px);
    margin: 0 auto clamp(40px, 3.125vw, 60px);
    line-height: 1.4;
}

#getStarted h2, #getStarted p {
    max-width: clamp(333.33333333333px, 26.041666666667vw, 500px);
    color: #FFF;
}

#getStarted h2 {
    font-size: var(--h1FontSize);
    margin: 0 0 var(--h2FontSize);
}

#getStarted h2 strong {
    display: block;
}

#getStarted p {
    font-size: var(--h4FontSize);
    line-height: 1.5;
}

#getStarted ul {
    list-style: none;
    padding: 0;
    margin: clamp(40px, 3.125vw, 60px) 0 0;
}

#getStarted ul li {
    margin: 0 0 clamp(16.666666666667px, 1.3020833333333vw, 25px);
}

#getStarted ul li:last-of-type {
    margin: 0;
}

#getStarted ul li a {
    color: var(--yellow);
    font-size: var(--h3FontSize);
    font-weight: 700;
    line-height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    position: relative;
}

#getStarted ul li a:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + clamp(10px, 0.78125vw, 15px));
    display: block;
    width: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    background-image: url(i/service-yellow.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#getStarted ul li a:hover,
#getStarted ul li a:focus {
    color: #FFF;
}

#getStarted ul li a:hover:after,
#getStarted ul li a:focus:after {
    background-image: url(i/service-white.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#footer {
    border-top: clamp(11.333333333333px, 0.88541666666667vw, 17px) solid var(--yellow);
    padding: clamp(43.333333333333px, 3.3854166666667vw, 65px) 0 clamp(23.333333333333px, 1.8229166666667vw, 35px);
}

#footer .footer-social ul li,
#footer .footer-social svg {
    margin: 0;
}

#footer .footer-social ul li {
    margin: 0 var(--mainFontSize) 0 0;
}

#footer .footer-social ul li:last-of-type {
    margin: 0;
}

#footer .footer-social svg {
    width: clamp(23.333333333333px, 1.8229166666667vw, 35px);
    height: clamp(23.333333333333px, 1.8229166666667vw, 35px);
}

#footer .footer-contact ul,
#footer .footer-location ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .footer-contact {
    margin: 0 var(--h1FontSize) 0 clamp(53.333333333333px, 4.1666666666667vw, 80px);
}

#footer .footer-contact ul li,
#footer .footer-location ul li {
    margin: 0 0 clamp(40px, 3.125vw, 60px);
}

#footer .footer-contact ul li,
#footer .footer-location ul li,
#footer .footer-contact ul li a,
#footer .footer-location ul li a {
    color: #FFF;
}

#footer .footer-contact ul li a:hover,
#footer .footer-location ul li a:hover,
#footer .footer-contact ul li a:focus,
#footer .footer-location ul li a:focus {
    color: var(--yellow);
}

#footer .footer-contact ul li strong,
#footer .footer-location ul li strong {
    display: block;
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    position: relative;
    line-height: clamp(16px, 1.25vw, 24px);
}

#footer .footer-contact ul li:last-of-type,
#footer .footer-location ul li:last-of-type {
    margin: 0;
}

#copyright {
    margin-top: clamp(43.333333333333px, 3.3854166666667vw, 65px);
}

#copyright > .elementor-element,
#copyright > .elementor-element > .elementor-widget-container {
    width: 100%;
}

#copyright p {
    color: #FFF;
    display: flex;
    align-items: center;
}

#copyright p a {
    color: var(--yellow);
}

#copyright p a:hover,
#copyright p a:focus {
    color: #FFF;
}

#copyright span {
    margin: 0 clamp(5.3333333333333px, 0.41666666666667vw, 8px);
}

#copyright .ion_link_separator {
    display: none;
}

#copyright .ion_link {
    color: #FFF;
    margin-left: auto;
}

#copyright .ion_link:hover,
#copyright .ion_link:focus {
    color: var(--yellow);
}

#footer .footer-contact ul li strong:before,
#footer .footer-location ul li strong:before {
    content: '';
    display: block;
    width: clamp(16px, 1.25vw, 24px);
    height: clamp(16px, 1.25vw, 24px);
    position: absolute;
    top: 0;
    left: clamp(-39px, -2.03125vw, -26px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#footer .footer-contact ul li:nth-child(1) strong:before {
    background-image: url(i/icon-phone-yellow.svg);
}

#footer .footer-contact ul li:nth-child(2) strong:before {
    background-image: url(i/icon-stars-yellow.svg);
    left: 0;
    top: unset;
    bottom: clamp(-25px, -1.3020833333333vw, -16.666666666667px);
    width: clamp(57.333333333333px, 4.4791666666667vw, 86px);
    height: clamp(9.3333333333333px, 0.72916666666667vw, 14px);
}

#footer .footer-location ul li:nth-child(1) strong:before {
    background-image: url(i/icon-map-yellow.svg);
}

#footer .footer-location ul li:nth-child(2) strong:before {
    background-image: url(i/icon-hours-yellow.svg);
}

.mt-sm { margin-top: clamp(40px, 3.125vw, 60px) !important; }

#pgTitle {
    padding: clamp(50px, 7.4479166666667vw, 143px) 0;
}

#pgTitle h1 {
    color: #FFF;
    font-size: var(--h2FontSize);
    letter-spacing: -0.5px;
    line-height: 1.3;
    padding-bottom: clamp(16.666666666667px, 1.3020833333333vw, 25px);
    position: relative;
    width: max-content;
}

#pgTitle h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: clamp(7.3333333333333px, 0.57291666666667vw, 11px);
  background-color: var(--yellow);
}

.grey-box {
    background-color: #6d6e70;
    border-radius: clamp(10px, 0.78125vw, 15px) !important;
    padding: clamp(26.666666666667px, 2.0833333333333vw, 40px) clamp(23.333333333333px, 1.8229166666667vw, 35px) !important;
}

.grey-box ul {
    list-style: none;
    padding:  0;
    margin: 0;
}

.grey-box ul li {
    color: #FFF;
    margin: 0 0 clamp(16.666666666667px, 1.3020833333333vw, 25px);
}

.grey-box ul li:last-of-type {
    margin: 0;
}

.grey-box ul li strong {
    color: var(--yellow);
    display: block;
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    font-size: var(--h4FontSize);
}

.content-img {
  overflow: hidden !important;
  border-radius: clamp(10px, 0.78125vw, 15px) !important;
}

.content-img:not(#whyChoose.content-img) > .elementor-element,
.content-img:not(#whyChoose.content-img) > .elementor-element > .element-widget-container {
    height: 100% !important;
}

.content-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.content-img.contain img {
    object-fit: contain !important;
}

.ct-left { padding: 0 var(--h4FontSize) 0 0 !important; }
.ct-right { padding: 0 0 0 var(--h4FontSize) !important; }

.content-text ul {
    padding: 0 0 0 var(--h4FontSize);
}

.content-text.list-nostyle ul {
    padding: 0;
    list-style: none;
}

.content-text ul li {
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    line-height: 1.4;
}

.content-text.gb-extra ul li {
    margin: 0 0 var(--h2FontSize);
}

.content-text.list-nostyle ul li {
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

.content-text ul li strong {
    display: block;
}

.content-text ul li:last-of-type {
    margin: 0 !important;
}

html .elementor-element.elementor-button-success .elementor-button,
html .elementor-element.elementor-button-warning .elementor-button,
html .elementor-element.elementor-button-danger .elementor-button {
    background: transparent !important;
    border: none !important;
    color: var(--red) !important;
    padding: 0 !important;
    position: relative !important;
    line-height: var(--h2FontSize) !important;
}

html .elementor-element.elementor-button-warning .elementor-button,
html .elementor-element.elementor-button-danger .elementor-button {
    font-size: var(--h3FontSize) !important;
    line-height: clamp(26.666666666667px, 2.0833333333333vw, 40px) !important;
}

html .elementor-element.elementor-button-warning .elementor-button {
    color: var(--yellow) !important;
}

html .elementor-element.elementor-button-success .elementor-button:after,
html .elementor-element.elementor-button-warning .elementor-button:after,
html .elementor-element.elementor-button-danger .elementor-button:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + clamp(10px, 0.78125vw, 15px));
    display: block;
    width: var(--h2FontSize);
    height: var(--h2FontSize);
    background-image: url(i/service-yellow.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

html .elementor-element.elementor-button-warning .elementor-button:after,
html .elementor-element.elementor-button-danger .elementor-button:after {
    width: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
}

html .elementor-element.elementor-button-danger .elementor-button:after {
    background-image: url(i/service-red.svg);
}

html .elementor-element.elementor-button-success .elementor-button:hover,
html .elementor-element.elementor-button-success .elementor-button:focus,
html .elementor-element.elementor-button-warning .elementor-button:hover,
html .elementor-element.elementor-button-warning .elementor-button:focus,
html .elementor-element.elementor-button-danger .elementor-button:hover,
html .elementor-element.elementor-button-danger .elementor-button:focus {
    color: var(--text) !important;
}

.red-box, .ghost-box {
    background-color: var(--red);
    color: #FFF;
    padding: clamp(16.666666666667px, 1.3020833333333vw, 25px) clamp(23.333333333333px, 1.8229166666667vw, 35px) !important;
}

.ghost-box {
    background-color: transparent;
    color: var(--text);
    padding: clamp(16.666666666667px, 1.3020833333333vw, 25px) clamp(23.333333333333px, 1.8229166666667vw, 35px) !important;
    border-radius: clamp(10px, 0.78125vw, 15px) !important;
    border: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #CCC;
}

.red-box h3, .ghost-box h3 {
    color: #FFF;
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    font-size: var(--h4FontSize);
    font-weight: 700;
}

.ghost-box h3 {
    color: var(--text);
}

.red-box p, .ghost-box p {
    font-size: var(--smallFontSize);
}

.ghost-box img {
    display: block;
    margin: 0 0 var(--h4FontSize);
}

.ghost-box ul {
    padding: 0 0 0 var(--h4FontSize);
}

.ghost-box.list-nostyle ul {
    padding: 0;
    list-style: none;
}

.ghost-box ul li {
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
}

.ghost-box.list-nostyle ul li {
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

.ghost-box ul li:last-of-type {
    margin: 0;
}

.ghost-box ul li a {
    color: var(--yellow);
    font-weight: 700;
}

.ghost-box ul li a:hover,
.ghost-box ul li a:focus {
    color: var(--text);
}

.page-intro .content-text h2 + p {
    font-size: var(--h4FontSize);
    max-width: 95%;
}

.page-intro .content-text.fw h2 + p {
    font-size: var(--mainFontSize);
}

#faqs .elementor-widget-n-accordion .e-n-accordion-item-title {
    padding: clamp(15px, 1.0416666666666667vw, 20px) clamp(15px, 1.8229166666666667vw, 35px) !important;
}

#faqs .e-n-accordion-item-title-text {
    font-size: clamp(15px, 1.1458333333333333vw, 22px);
    font-weight: 900;
    position: relative;
}

#faqs .e-n-accordion-item-title-icon {
    max-width: clamp(15px, 0.78125vw, 15px);
}

#faqs span.e-closed, #faqs span.e-opened {
    width: 100%;
}

#refuel ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--h2FontSize);
    width: clamp(633.33333333333px, 49.479166666667vw, 950px);
    justify-content: center;
    margin: 0 auto !important;
}

#refuel ul li {
    width: calc(50% - 35px);
    text-align: left !important;
    justify-content: flex-start;
    font-size: clamp(16px, 1.1458333333333333vw, 22px);
    font-weight: 700;
}

#refuel ul li svg {
    display: block;
    width: clamp(34.666666666667px, 2.7083333333333vw, 52px);
    height: auto;
    max-height: clamp(16.666666666667px, 1.3020833333333vw, 25px);
}

#refuel ul li svg * {
    fill: var(--yellow);
}

#areaList ul {
    column-count: 4;
    margin: clamp(40px, 3.125vw, 60px) 0 0;
}

#areaList ul li {
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
}

.section-heading.white * {
    color: #FFF;
}

.disclaimer {
    padding: clamp(30px, 2.34375vw, 45px) clamp(46.666666666667px, 3.6458333333333vw, 70px);
    border-radius: var(--h2FontSize);
}

#header .navigation .sub-menu li {
    width: 100%;
    margin: 0 !important;
}

#header .navigation .sub-menu li a {
    font-size: clamp(12px, 0.7291666666666666vw, 14px) !important;
    padding: clamp(6.6666666666667px, 0.52083333333333vw, 10px);
}

#header .navigation .sub-menu li a:hover,
#header .navigation .sub-menu li a:focus,
#header .navigation .sub-menu li.current-menu-item a {
    color: var(--yellow);
}

.bg-carbon * {
    color: #FFF !important;
}

.content-text.ct-bordered {
    border-radius: clamp(15.333333333333px, 1.1979166666667vw, 23px) !important;
    padding: clamp(30px, 2.34375vw, 45px) var(--h1FontSize) !important;
    margin-top: clamp(-45px, -2.34375vw, -30px) !important;
}

#keyFeatures > .e-con-inner {
    display: flex;
    flex-wrap: wrap;
    grid-gap: clamp(6.6666666666667px, 0.52083333333333vw, 10px) !important;
    justify-content: center;
}

#keyFeatures .kf-card {
    border-radius: clamp(8px, 0.625vw, 12px);
    width: calc(33% - 5px);
    padding: var(--h2FontSize) clamp(16.666666666667px, 1.3020833333333vw, 25px);
    background-color: #F2F2F2;
}

#keyFeatures .kf-card.white {
    background-color: #FFF;
}

#keyFeatures .kf-card.red {
    background-color: var(--red);
}

#keyFeatures .kf-card h3,
#keyFeatures .kf-card p {
  color: #404041;
}

#keyFeatures .kf-card.red h3,
#keyFeatures .kf-card.red p {
  color: #FFF;
}

#keyFeatures .kf-card h3 {
    font-size: var(--h4FontSize);
    font-weight: 700;
    margin: 0 0 clamp(3.3333333333333px, 0.26041666666667vw, 5px);
}

#keyFeatures .kf-card p {
    font-size: var(--mainFontSize);
    font-weight: 400;
}

.overlap .content-text .elementor-widget-container {
    background-color: #FFF;
    border: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #CCC;
    border-radius: clamp(11.333333333333px, 0.88541666666667vw, 17px);
    padding: clamp(26.666666666667px, 2.0833333333333vw, 40px) !important;
    width: clamp(584px, 46.25vw, 888px);
    position: relative;
    z-index: 99;
}

.overlap.pso-right .content-text .elementor-widget-container {
    left: -13%;
}

.overlap .content-img img {
    height: clamp(183.33333333333px, 14.322916666667vw, 275px) !important;
}

.overlap .content-text h2 {
    font-size: var(--h4FontSize);
}

.overlap .content-text p {
    font-size: var(--smallFontSize);
}

.banner-fix h2 {
    margin: 0;
    font-size: var(--h3FontSize) !important;
    font-weight: 400 !important;
    max-width: 95%;
}

.banner-fix.fw h2 {
    max-width: 100%;
}

.msds-text p {
    font-size: var(--h3FontSize);
    font-weight: 900;
    color: #FFF;
    background-color: var(--yellow);
    line-height: 1.5;
    padding: clamp(18.666666666667px, 1.4583333333333vw, 28px) clamp(80px, 6.25vw, 120px);
    border-radius: clamp(8px, 0.625vw, 12px);
}

.banner-fix ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--h1FontSize);
}

.banner-fix ul li {
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    font-size: var(--h3FontSize);
    font-weight: 400;
}

.banner-fix ul li:last-of-type {
    margin: 0;
}

.btn-group > .elementor-element:first-of-type {
    margin-right: clamp(80px, 9.6354166666667vw, 185px) !important;
}

.oil-list {
    margin: var(--h1FontSize) 0 0;
}

.oil-list p strong {
    font-size: var(--h4FontSize);
    font-weight: 700;
}

.oil-list ul {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
}

.content-text h2 + p strong {
    margin: clamp(-5px, -0.26041666666667vw, -3.3333333333333px) 0 clamp(-15px, -0.78125vw, -10px);
}

.pg-section.indent > .e-con-inner {
  margin: 0 auto !important;
  width: 1150px !important;
  max-width: 100% !important;
}

.career-join .elementor-widget-container {
    background-color: #F2F2F2;
    border-radius: var(--h4FontSize);
    padding: clamp(26.666666666667px, 2.0833333333333vw, 40px) clamp(43.333333333333px, 3.3854166666667vw, 65px) !important;
}

.red-box.flip-card h3 {
    font-size: clamp(15px, 1.1458333333333333vw, 22px);
    font-weight: 900;
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

.red-box.flip-card h3 + p {
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

.red-box.flip-card h3 + p strong {
    font-size: clamp(15px, 1.1458333333333333vw, 22px);
    font-weight: 700;
}

.red-box.flip-card .flip-card-back p {
    font-size: clamp(14px, 1.1458333333333333vw, 22px);
    font-weight: 400;
    margin: 0 0 clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    line-height: var(--h3FontSize);
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: clamp(285px, 16.927083333333332vw, 325px);
  padding: 0 !important;
  perspective: clamp(666.66666666667px, 52.083333333333vw, 1000px);
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: clamp(30px, 2.34375vw, 45px) clamp(16.666666666667px, 1.3020833333333vw, 25px) !important;
    border-radius: var(--h2FontSize);
    display: flex;
    flex-direction: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
  background-color: var(--red);
  color: #FFF;
  align-items: center;
  justify-content: flex-start;
}

.flip-card-back {
  background-color: #6d6e70;
  color: #FFF;
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
}

.b-modal.__b-popup1__ {
    z-index: 99999998 !important;
}

#raqForm {
    display: none;
    z-index: 99999999 !important;
    width: clamp(511.33333333333px, 39.947916666667vw, 767px);
    max-width: 80%;
    background-color: #F2F2F2;
    border-radius: var(--smallFontSize);
    padding: clamp(20px, 2.60417vw, 50px) clamp(20px, 3.90625vw, 75px);
}

#raqForm h2 {
    text-align: center;
    margin: 0 0 var(--h4FontSize);
    font-size: var(--h3FontSize);
    font-weight: 700;
}

#raqForm .elementor-form .elementor-field:not(#raqForm .elementor-form .elementor-field.elementor-select-wrapper, #raqForm .elementor-form .elementor-field.elementor-acceptance-field), #raqForm .elementor-field-group .elementor-select-wrapper select {
    background-color: #fff !important;
    border: clamp(0.66666666666667px, 0.052083333333333vw, 1px) solid #FFF !important;
    height: auto;
    color: #000 !important;
    font-family: var(--font) !important;
    font-size: clamp(14px, 0.72916666666667vw, 14px) !important;
    padding: var(--formFieldPaddingTop) var(--formFieldPaddingRight) var(--formFieldPaddingBottom) var(--formFieldPaddingLeft) !important;
    transition: var(--transition);
    border-radius: var(--formFieldRadius);
    line-height: 1 !important;
    min-height: unset !important;
}

#raqForm .elementor-field-group .elementor-field-textual::placeholder {
    color: #999 !important;
}

#raqForm .elementor-form-fields-wrapper {
    grid-gap: clamp(6.6666666666667px, 0.52083333333333vw, 10px) clamp(10px, 0.78125vw, 15px) !important;
    justify-content: center !important;
}

#raqForm .elementor-form-fields-wrapper .elementor-col-50 {
    width: calc(50% - clamp(6.6666666666667px, 0.52083333333333vw, 10px)) !important;
}

#raqForm .elementor-form-fields-wrapper .elementor-col-100 {
    width: calc(100% - clamp(3.3333333333333px, 0.26041666666667vw, 5px)) !important;
}

#raqForm .closeThis {
    position: absolute;
    top: calc(clamp(-50px, -2.6041666666667vw, -20px) - clamp(10px, 0.78125vw, 15px));
    right: calc(clamp(-75px, -3.90625vw, -20px) - clamp(10px, 0.78125vw, 15px));
    display: block;
    width: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    background-color: var(--red);
    background-image: url(i/icon-close.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: clamp(8px, 0.625vw, 12px);
}

#banner img {
    max-height: clamp(50px, 6.25vw, 120px) !important;
    object-fit: contain !important;
}

#pagination {
    margin-top: 100px !important;
}

#singleBlog h2 {
    font-size: var(--h2FontSize);
    font-weight: 700;
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
    color: var(--text);
}

#singleBlog .sb-meta {
    margin: 0 0 40px;
}

#singleBlog .sb-meta svg * {
    fill: var(--red);
}

#singleBlog .sb-meta li {
    margin: 0;
}

#singleBlog img {
  display: block;
  max-width: 100%;
  width: 767px;
  margin: 0 auto 20px 0;
}

#singleBlog .sb-share {
    margin: 60px 0 0;
}

#singleBlog .sb-nav a {
    font-size: var(--h4FontSize);
    font-weight: 400;
    color: var(--text);
}

#singleBlog .sb-nav a:hover,
#singleBlog .sb-nav a:focus {
    color: var(--red);
}

#hero .yellow {
    color: var(--yellow);
}

#pillars .pillar:before {
    content: '';
    position: absolute;
    top: clamp(-11px, -0.57291666666667vw, -7.3333333333333px);
    right: 0;
    left: 0;
    display: block;
    width: 0%; /* Start from 0% width */
    height: clamp(7.3333333333333px, 0.57291666666667vw, 11px);
    background-color: #ffac3b; /* Set the active color */
    background-size: 200% 100%;
    background-position: 100% 0;
    opacity: 1;
    transition: width 0s linear; /* Ensure it resets instantly */
    z-index: 99;
}

#pillars .pillar:after {
    content: '';
    position: absolute;
    top: clamp(-11px, -0.57291666666667vw, -7.3333333333333px);
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: clamp(7.3333333333333px, 0.57291666666667vw, 11px);
    background-color: rgba(242, 242, 242, 0.5);
    background-size: 200% 100%;
    background-position: 100% 0;
    opacity: 1;
    z-index: 9;
}

@media (min-width: 768px) {
  .pillar.active:before {
      animation: progress-fill 5s linear forwards; /* Linear timing */
  }

  @keyframes progress-fill {
      0% {
          width: 0%;
      }
      100% {
          width: 100%;
      }
  }

}


#whyChoose .elementor-icon-box-wrapper .elementor-icon-box-title {
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

#whyChoose .elementor-icon-box-wrapper:hover .elementor-icon-box-title a,
#whyChoose .elementor-icon-box-wrapper:focus .elementor-icon-box-title a {
    color: var(--red);
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

.pg-nav {
    margin-top: 100px;
}

.elementor-post-navigation__link__prev,
.elementor-post-navigation__link__next {
    display: block !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #666 !important;
    background-color: #F2F2F2 !important;
    padding: 19px 51px !important;
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

.elementor-post-navigation__link__prev:hover,
.elementor-post-navigation__link__prev:focus,
.elementor-post-navigation__link__next:hover,
.elementor-post-navigation__link__next:focus {
    color: #FFF !important;
    background-color: var(--red) !important;
    -webkit-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
}

#newBlog .elementor-post {
    background-color: #FFF;
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

#newBlog .elementor-post__text > a.ep-link {
    display: flex;
    flex-direction: column;
    padding: 0 clamp(13.333333333333334px, 1.0416666666666667vw, 20px) clamp(26.666666666666668px, 2.0833333333333335vw, 40px);
}

#newBlog .elementor-post__text a .elementor-post__meta-data {
    -webkit-order: -1 !important;
    -ms-order: -1 !important;
    order: -1 !important;
}

#newBlog .elementor-post-date {
    font-size: clamp(15px, 0.9375vw, 18px);
    color: #6d6e70;
    font-weight: 400;
}

#newBlog .elementor-post__title {
    margin: 0 0 clamp(10px, 0.78125vw, 15px);
}

#newBlog .elementor-post__title a {
    font-size: clamp(16px, 1.0416666666666667vw, 20px);
}

#newBlog .elementor-post__excerpt p {
    font-size: clamp(15px, 0.9375vw, 18px);
}

#newBlog .elementor-post__excerpt p:after {
  content: '...';
}

#newBlog.more-posts .elementor-post__thumbnail__link {
  display: none;
}

#newBlog.more-posts .elementor-post__text > a.ep-link {
    display: flex;
    flex-direction: column;
    padding: clamp(26.666666666666668px, 2.0833333333333335vw, 40px) clamp(13.333333333333334px, 1.0416666666666667vw, 20px);
}

#newBlog .elementor-post__read-more {
    font-size: clamp(15px, 0.9375vw, 18px);
    font-weight: 700;
    margin: clamp(26.666666666666668px, 2.0833333333333335vw, 40px) 0 0;
}

#newBlog .elementor-pagination {
    margin-top: clamp(66.66666666666667px, 5.208333333333333vw, 100px);
}

#newBlog .page-numbers {
    font-size: clamp(16px, 1.0416666666666667vw, 20px);;
    font-weight: 700;
    background-color: #F2F2F2;
    color: #666666;
    padding: clamp(12px, 0.9375vw, 18px) clamp(16px, 1.25vw, 24px);
}

#newBlog .page-numbers:hover,
#newBlog .page-numbers:focus,
#newBlog .page-numbers.current {
    background-color: var(--red);
    color: #FFF;
}

.pg-contact form.elementor-form {
    margin-top: clamp(40px, 3.125vw, 60px);
}

.pg-contact .elementor-form .elementor-field:not(.pg-contact .elementor-form .elementor-field.elementor-select-wrapper, .pg-contact .elementor-form .elementor-field.elementor-acceptance-field),
.pg-contact .elementor-field-group .elementor-select-wrapper select {
    background-color: #F2F2F2 !important;
    font-size: 14px !important;
    border-radius: 12px !important;
}

.captcha-note {
    padding: 0;
    text-align: center;
    margin: 0 0 15px !important;
}

.pg-contact svg {
    display: block !important;
    width: clamp(32px, 2.5vw, 48px) !important;
    height: auto !important;
    margin-right: 10px !important;
}

.pg-contact svg * {
    fill: #ffac3b;
}

.pg-contact ul {
    border: 1px solid #CCC;
    border-radius: 12px;
    padding: clamp(26.666666666666668px, 2.0833333333333335vw, 40px) 20px !important;
    display: flex;
    flex-direction: column;
    grid-gap: clamp(26.666666666666668px, 2.0833333333333335vw, 40px);
}

.pg-contact ul li {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.pg-contact ul li strong {
    font-size: clamp(16px, 1.1458333333333333vw, 22px);
    margin: 0 0 5px;
    display: block;
}

.elementor-element.elementor-element-c745f96 {
    padding-left: clamp(26.666666666666668px, 2.0833333333333335vw, 40px) !important;
}

.pg-contact ul li:last-of-type strong {
    color: var(--red);
}

.contact-banner ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    padding: clamp(25px, 2.0833333333333335vw, 40px) clamp(25px, 4.427083333333333vw, 85px);
    background-color: #F2F2F2;
    border-radius: 12px;
    align-items: center;
}

.contact-banner ul li {
    margin: 0;
}

.contact-banner ul li, .contact-banner ul li a {
    font-size: clamp(16px, 1.1458333333333333vw, 22px);
    font-weight: 700;
    color: #404041;
}
.contact-banner ul li:nth-child(1) {
    margin-right: auto;
    padding-bottom: clamp(10px, 0.78125vw, 15px);
    background-size: clamp(57.333333333333336px, 4.479166666666667vw, 86px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-image: url(i/icons/icon-stars.svg);
}

.contact-banner ul li:last-of-type {
    margin-left: auto;
}

.contact-banner ul li:nth-child(3) a,
.contact-banner ul li:nth-child(4) a,
.contact-banner ul li:nth-child(5) a,
.contact-banner ul li:nth-child(6) a {
    font-size: 0px;
    display: flex;
    width: clamp(23.333333333333332px, 1.8229166666666667vw, 35px);
    height: clamp(23.333333333333332px, 1.8229166666666667vw, 35px);
    background-size: 100%;
    margin-left: 15px;
    background-repeat: no-repeat;
    background-position: center;
}

.contact-banner ul li:nth-child(3) a{
    background-image: url(i/icons/icon-fb.svg);
}

.contact-banner ul li:nth-child(4) a{
    background-image: url(i/icons/icon-x.svg);
}

.contact-banner ul li:nth-child(5) a {
    background-image: url(i/icons/icon-li.svg);
}

.contact-banner ul li:nth-child(6) a {
    background-image: url(i/icons/icon-in.svg);
}

.contact-banner ul li:last-of-type a {
    background-color: var(--red);
    color: #FFF;
    font-size: clamp(14px, 0.8333333333333334vw, 16px);
    padding: clamp(7.333333333333333px, 0.5729166666666666vw, 11px) clamp(14px, 1.09375vw, 21px);
    border-radius: 12px;
}

.contact-banner ul li:last-of-type a:hover,
.contact-banner ul li:last-of-type a:focus {
    background-color: var(--dark);
}

#serviceArea > .e-con-inner .elementor-widget-container {
    background-color: var(--dark);
    margin-right: clamp(136.66666666666666px, 10.677083333333334vw, 205px);
    padding: clamp(40px, 3.125vw, 60px) clamp(250px, 19.53125vw, 375px) clamp(40px, 3.125vw, 60px) clamp(40px, 3.125vw, 60px);
    position: relative;
}

#serviceArea > .e-con-inner .elementor-widget-container:after {
    content: '';
    position: absolute;
    right: clamp(-205px, -10.677083333333334vw, -136.66666666666666px);
    top: 0;
    bottom: 0;
    margin: auto 0;
    display: block;
    width: clamp(366.6666666666667px, 28.645833333333332vw, 550px);
    height: clamp(271.3333333333333px, 21.197916666666668vw, 407px);
    border-radius: 12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(i/map.jpg);
}

#serviceArea h2 {
  color: #FFF;
  text-align: center;
}

#serviceArea ul {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  list-style: none;
  margin: clamp(26.666666666666668px, 2.0833333333333335vw, 40px) 0 0;
  padding: 0;
}

#serviceArea ul li {
    margin: 0 0 8px;
}

#serviceArea ul li,
#serviceArea ul li a:hover,
#serviceArea ul li a:focus {
  color: #FFF;
}

#serviceArea ul li a {
    color: #ffac3b;
}

.captcha-note p {
    text-align: left;
}

#propaneBanner .elementor-widget-container {
    background-color: #6d6e70;
    padding: clamp(20px, 1.5625vw, 30px) clamp(50px, 3.90625vw, 75px);
    border-radius: clamp(15.333333333333334px, 1.1979166666666667vw, 23px);
    position: relative;
}

#propaneBanner .elementor-widget-container h2,
#propaneBanner .elementor-widget-container p:not(:last-of-type) {
    padding-right: clamp(216.66666666666666px, 16.927083333333332vw, 325px);
}

#propaneBanner .elementor-widget-container p:not(:last-of-type) {
    margin: 0 !important;
}

#propaneBanner .elementor-widget-container h2 {
    color: var(--yellow);
}

#propaneBanner .elementor-widget-container p {
    color: #FFF;
}

#propaneBanner .elementor-widget-container p:last-of-type {
    position: absolute;
    right: clamp(86.66666666666667px, 6.770833333333333vw, 130px);
    bottom: clamp(33.333333333333336px, 2.6041666666666665vw, 50px);
}

#propaneBanner .elementor-widget-container p:last-of-type a {
    color: var(--yellow);
    font-size: var(--h3FontSize);
    font-weight: 700;
    line-height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    position: relative;
}

#propaneBanner .elementor-widget-container p:last-of-type a:hover,
#propaneBanner .elementor-widget-container p:last-of-type a:focus {
    color: #FFF;
}

#propaneBanner .elementor-widget-container p:last-of-type a:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + clamp(10px, 0.78125vw, 15px));
    display: block;
    width: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    height: clamp(26.666666666667px, 2.0833333333333vw, 40px);
    background-image: url(i/service-yellow.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#propaneBanner .elementor-widget-container p:last-of-type a:hover:after,
#propaneBanner .elementor-widget-container p:last-of-type a:focus:after {
    background-image: url(i/service-white.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.ci-half > .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-gap: clamp(33.333333333333336px, 2.6041666666666665vw, 50px) clamp(26.666666666666668px, 2.0833333333333335vw, 40px) !important;
    justify-content: center !important;
}

.ci-half > .e-con-inner > .ghost-box {
    width: calc(50% - 20px) !important;
        padding: clamp(12px, 0.9375vw, 18px) clamp(23.333333333333px, 1.8229166666667vw, 35px) !important;
}

.ci-half > .e-con-inner > .ghost-box img {
    margin: 0 !important;
    object-fit: contain !important;
}

.ci-half > .e-con-inner > .ghost-box .elementor-widget-container {
    display: flex !important;
    flex-direction: column !important;
}

.ci-half > .e-con-inner > .ghost-box .elementor-widget-container p:last-of-type {
    margin-top: auto;
}

.ci-half > .e-con-inner > .ghost-box h3 {
    margin: 20px 0 0 !important;
}

.section-abanner > .e-con-inner {
    background-color: #000;
    border-radius: clamp(17.333333333333332px, 1.3541666666666667vw, 26px) !important;
    padding: clamp(25px, 2.0833333333333335vw, 40px) clamp(25px, 4.166666666666667vw, 80px) !important;
}

.section-abanner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.section-abanner h2 {
    font-size: clamp(18px, 1.1458333333333333vw, 22px) !important;
    font-weight: 700 !important;
    color: #FFF !important;
    line-height: 1.6 !important;
}

#transcubes {
    padding: clamp(10px, 0.78125vw, 15px) clamp(26.666666666666668px, 2.0833333333333335vw, 40px);
    background-color: #F2F2F2;
    border-radius: clamp(16.666666666666668px, 1.3020833333333333vw, 25px);
    border-spacing: clamp(7.333333333333333px, 0.5729166666666666vw, 11px);
}

#transcubes td {
    text-align: center;
    font-size: clamp(15px, 0.8333333333333334vw, 16px);
    color: #000;
    padding: clamp(16.666666666666668px, 1.3020833333333333vw, 25px);
    background-color: #FFF;
}

#transcubes td.black,
#transcubes td.red {
    color: #FFF;
}

#transcubes td.black {
    background-color: #000;
    text-transform: uppercase;
    font-family: var(--heading);
    font-weight: 700;
    padding: 8px clamp(23.333333333333332px, 1.8229166666666667vw, 35px);
}

#transcubes td.red {
    background-color: #e31838;
}

#transcubes td.red strong {
    font-weight: 400;
    display: block;
}

#transcubes img {
    mix-blend-mode: multiply;
}

.lub-def {
    padding: clamp(20px, 2.0833333333333335vw, 40px) clamp(20px, 1.3020833333333333vw, 25px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: unset !important;
    grid-gap: clamp(26.666666666666668px, 2.0833333333333335vw, 40px) !important;
    border: 1px solid #CCC;
    border-radius: clamp(11.333333333333334px, 0.8854166666666666vw, 17px);
}

.lub-def h2 {
    font-size: clamp(18px, 1.1458333333333333vw, 22px) !important;
}

.lub-def img {
    object-fit: contain !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 767px) {

  #transcubes {
      padding: 25px;
  }

  #transcubes, #transcubes thead, #transcubes tbody,
  #transcubes th, #transcubes td, #transcubes tr {
      display: block;
  }

  #transcubes tr th {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }

  #transcubes td {
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
      width: 100% !important;
  }

  #transcubes td:before {
      position: absolute;
      top: 0;
      left: 15px;
      bottom: 0;
      padding-right: 10px;
      margin: auto;
      height: max-content;
  }

  #transcubes td:nth-of-type(1):before { content: "Specification"; }
  #transcubes td:nth-of-type(2):before { content: "10TCG"; }
  #transcubes td:nth-of-type(3):before { content: "20TCG"; }
  #transcubes td:nth-of-type(4):before { content: "30TCG"; }
  #transcubes td:nth-of-type(5):before { content: "40TCG"; }
  #transcubes td:nth-of-type(6):before { content: "50TCG"; }

  #transcubes tr:first-of-type {
    display: none;
  }

}

@media (min-width: 768px) {
  #header .navigation li ul {
    position: fixed;
    background-color: transparent;
    top: clamp(99px, 7.03125vw, 135px);
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: unset;
    flex-wrap: wrap;
    justify-content: center;
    padding: clamp(20px, 1.5625vw, 30px);
    grid-gap: 10px;
  }
  #header.scrollingHeader .navigation li ul {
    top: clamp(55px, 4.166666666666667vw, 80px);
  }
  .admin-bar #header .navigation li ul {
    top: calc(clamp(99px, 7.03125vw, 135px) + 32px);
  }
  .admin-bar #header.scrollingHeader .navigation li ul {
    top: calc(clamp(55px, 4.166666666666667vw, 80px) + 32px);
  }
  .navigation li ul:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(i/submenu-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.85;
    z-index: 99;
  }
  #header .navigation li ul li {
      position: relative;
      z-index: 100;
      width: max-content !important;
      margin: 0 !important;
  }
  #header .navigation .sub-menu li a {
    font-size: clamp(12px, 0.7291666666666666vw, 14px) !important;
    padding: clamp(6.6666666666667px, 0.52083333333333vw, 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFF;
    grid-gap: 10px;
  }
  #header .navigation .sub-menu li a img {
    max-width: clamp(133.33333333333334px, 10.416666666666666vw, 200px);
    border-radius: 20px;
  }
  .navigation li ul li.current-menu-item a, .navigation li ul a:hover, .navigation li ul a:focus {
    background-color: unset;
  }
}