:root {
--as-padding-y-axis: clamp(50px, 6vw, 100px);
--as-padding-x-axis: clamp(20px, 5.2vw, 100px);
--as-margin-y-axis: clamp(25px, 4vw, 40px);
--as-faint-light-blue: #7dc2e3;
--as-faint-medium-blue: #6bb3d6;
--as-grey-light: #e6e6e7;
--as-blue-light: #40abe0;
--as-blue-medium: #338db9;
--as-blue-grey: #232529;
--sm-font: clamp(1.4rem, 4vw, 2.2rem);
--md-font: clamp(1.8rem, 4vw, 2.6rem);
--lg-font: clamp(2.2rem, 4vw, 3rem);
--font-family-inter: "Inter", sans-serif;
}
@media (min-width: 1600px) {
:root {
--as-padding-x-axis: clamp(20px, 10vw, 160px);
}
}
#page {
font-size: clamp(0.9rem, 3vw, 1.1rem);
}
#page {
font-family: "Geist", sans-serif !important;
}
.wysiwygArea ul,
.wysiwygArea ol {
margin: 0 0 1.5em 2.5em;
}
.wysiwygArea li {
margin-top: 15px;
}
.blueText {
color: var(--as-blue-light) !important;
}
.greyText {
color: var(--as-blue-grey) !important;
}
.whiteText {
color: white !important;
}
.xxl-super-font,
.xl-super-font,
.lg-super-font,
.md-super-font,
.md-font,
.lg-font,
.sm-font {
font-weight: 800;
}
.xxl-super-font,
.xl-super-font,
.lg-super-font,
.md-super-font {
line-height: 1.2em;
}
.md-font,
.lg-font,
.sm-font {
line-height: 1.1em;
}
.xxl-super-font {
font-size: clamp(6rem, 13vw, 13rem) !important;
letter-spacing: -0.6vw;
}
.xl-super-font {
font-size: clamp(4rem, 7vw, 6rem) !important;
letter-spacing: -0.2vw;
}
.lg-super-font {
font-size: clamp(2.6rem, 4vw, 5rem) !important;
}
.md-super-font {
font-size: clamp(2rem, 4vw, 2.6rem) !important;
}
.lg-font {
font-size: var(--lg-font);
}
.md-font {
font-size: var(--md-font);
}
.sm-font {
font-size: var(--sm-font);
}
.lightGreyBg {
background-color: var(--as-grey-light);
}
.lightBlueBg {
background-color: var(--as-blue-light);
}
.blueGrayBg {
background-color: var(--as-blue-grey);
}
.blueGrayBg p,
.blueGrayBg span,
.blueGrayBg li,
.blueGrayBg a {
color: white;
}
#masthead .ast-container {
padding: 30px var(--as-padding-x-axis);
}
#ast-mobile-header .ast-primary-header-bar {
padding: 0px var(--as-padding-x-axis);
}
#masthead .custom-logo-link img {
max-width: clamp(180px, 19vw, 350px);
width: unset;
height: auto;
}
.ast-primary-header-bar .ast-custom-button {
box-shadow: 4px 4px 0px #0076b0;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
transition-duration: 0.1s;
}
.ast-primary-header-bar .ast-custom-button:active {
transform: scale(0.95);
}
.ast-builder-menu-1 .menu-item > .menu-link {
color: #dbdbdb !important;
font-size: clamp(1rem, 1.1vw, 1.1rem) !important;
font-weight: 700 !important;
}
.ast-builder-menu-1 .menu-item:hover > .menu-link {
color: var(--as-blue-light) !important;
}
#menu-toggle-close {
border: none !important;
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
max-width: 600px;
}
#whatsappIcon i {
color: var(--as-blue-light);
transition-duration: 0.1s;
}
#whatsappIcon:hover i {
color: #2cd46b;
}
.tippy-box[data-theme~="whatsapp"] {
background-color: #25d366;
color: white;
font-weight: 600;
border-radius: 6px;
font-size: 0.85rem;
padding: 6px 10px;
}
.tippy-box[data-theme~="whatsapp"] .tippy-arrow {
color: #25d366;
}
@keyframes rubberband {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
.rubberband-animation {
animation: rubberband 0.6s ease-in-out;
}
.whatsappBtn {
background-color: #25d366;
color: white !important;
font-size: clamp(1rem, 3vw, 1.1rem);
font-weight: 500;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
border: 3px solid #21b457;
border-radius: 10px;
transition-duration: 0.1s;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 10px 20px;
max-width: 300px;
width: 100%;
}
.whatsappBtn:hover {
background-color: #21b457;
}
.whatsappBtn i {
font-size: 1.6rem;
}
@media (max-width: 1400px) {
.ast-mobile-popup-content {
padding-bottom: 40px;
}
#ast-mobile-site-navigation > .main-navigation > .main-header-menu > li > a {
color: #ffffff;
}
#ast-mobile-site-navigation
> .main-navigation
> .main-header-menu
> li.current_page_item
> a,
#ast-mobile-site-navigation
> .main-navigation
> .main-header-menu
> li
> a:hover {
color: #dcdcdc;
background: #2b2d33;
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
background-color: var(--as-blue-grey);
}
#menu-toggle-close .ast-mobile-svg {
width: 30px;
height: 30px;
}
#ast-mobile-popup .ast-header-html {
width: 100%;
}
#ast-mobile-popup .ast-header-html .offcanvasBtn,
#ast-mobile-popup .ast-header-html .offcanvasDetails {
margin: 0 20px;
}
#ast-mobile-popup .ast-header-html .dashedSeperator {
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.4) 20px,
transparent 20px,
transparent 24px
);
}
#ast-mobile-popup .ast-header-html .offcanvasDetails p {
font-size: 0.9rem;
}
#ast-desktop-header {
display: none;
}
} .solidBlueBtn,
.solidBlueGreyBtn,
.solidBlueBtn::before,
.solidBlueGreyBtn::before,
.solidBlueBtn span,
.solidBlueGreyBtn span {
transition-duration: 0.1s;
}
.solidBlueBtn,
.solidBlueGreyBtn {
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
transform: skew(-10deg);
border-radius: 5px;
margin: 15px 0 0 auto;
padding: clamp(15px, 1vw, 20px) 30px;
max-width: 300px;
width: 100%;
line-height: 1em;
}
.solidBlueBtn span,
.solidBlueGreyBtn span {
color: white;
font-size: clamp(1rem, 3vw, 1.1rem);
font-weight: 600;
z-index: 2;
}
.solidBlueBtn::before,
.solidBlueGreyBtn::before {
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
transform: translateY(100%);
}
.solidBlueBtn:hover::before,
.solidBlueGreyBtn:hover::before {
transform: none;
}
.solidBlueBtn:active,
.solidBlueGreyBtn:active {
transform: skew(-10deg) scale(0.95);
} .solidBlueBtn {
background-color: var(--as-blue-light);
}
.solidBlueBtn::before {
background-color: var(--as-blue-medium);
}
.solidBlueGreyBtn {
background-color: var(--as-blue-grey);
}
.solidBlueGreyBtn::before {
background-color: #32363d;
}  .cmsHero,
.homeHero {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
display: flex;
position: relative;
} .cmsHero {
height: 40vh;
justify-content: flex-start;
align-items: flex-end;
padding: 0 var(--as-padding-x-axis) 50px var(--as-padding-x-axis);
}
.homeHero {
background-image: url(//www.auto-shield.co.uk/wp-content/themes/auto-shield/assets/images/home-hero-mobile.webp);
height: 95vh;
justify-content: center;
align-items: center;
background-position: 50% 70%;
} .cmsHero > div > h1,
.homeHero > div > h1 {
font-weight: 900;
color: white;
letter-spacing: -2px;
line-height: 100%;
} .cmsHero > div > h1 {
font-size: clamp(2.4rem, 6vw, 4.5rem);
text-align: left;
text-wrap: balance;
}
.homeHero > div > h1 {
font-size: clamp(2.6rem, 7vw, 5.5rem);
text-align: center;
text-wrap: balance;
text-transform: uppercase;
max-width: 9ch;
} .homeHero > div:first-of-type {
margin-bottom: 300px;
padding: 0 30px;
}
@media (min-width: 576px) {
.homeHero > div > h1 {
max-width: unset;
text-wrap: unset;
}
}
@media (min-width: 768px) {
.homeHero {
background-image: url(//www.auto-shield.co.uk/wp-content/themes/auto-shield/assets/images/as-home-hero-desktop.jpg);
background-position: 50% 38%;
height: 100vh;
}
.homeHero > div:first-of-type {
margin-bottom: 325px;
}
.cmsHero > div > h1,
.homeHero > div > h1 {
line-height: 95%;
}
.homeHero > div > h1 {
font-size: clamp(1.8rem, 8vw, 5.5rem);
text-align: center;
}
.cmsHero {
height: 60vh;
}
} body .site-content .ast-container {
max-width: unset;
padding: 0;
display: block;
}
.homeHero > .bannerTransparent {
position: absolute;
bottom: 0;
padding: 30px 0;
}
.homeHero > .bannerTransparent .autoscrollBanner .splide__slide img {
filter: invert();
opacity: 0.8;
}
.bannerTransparent,
.bannerWhite {
width: 100%;
padding: clamp(30px, 4vw, 60px) 0;
}
.bannerWhite {
background-color: white;
}
.fullWidthCardBlock {
display: grid;
gap: 2px;
background-color: #5d626c;
}
.cardV {
display: flex;
flex-direction: column;
transition-duration: 0s;
}
.cardV .cardImg::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
height: 20%;
z-index: 2;
transition-duration: 0.1s;
}
.cardV.blueGreyBg .cardImg::before {
background: linear-gradient(
to top,
var(--as-blue-grey),
var(--as-blue-grey) 10%,
transparent 100%
);
}
.cardV.blueGreyBg {
background-color: var(--as-blue-grey);
}
.cardV.blueGreyBg .cardTag {
background-color: var(--as-blue-light);
}
a[href].cardV.blueGreyBg:hover .cardImg::before {
background: linear-gradient(to top, #2d3035, #2d3035 10%, transparent 100%);
}
a[href].cardV.blueGreyBg:hover {
background-color: #2d3035;
}
.cardV.lightBlueBg .cardImg::before {
background: linear-gradient(
to top,
var(--as-blue-light),
var(--as-blue-light) 10%,
transparent 100%
);
}
.cardV.lightBlueBg {
background-color: var(--as-blue-light);
}
.cardV.lightBlueBg .cardTag {
background-color: var(--as-blue-grey);
}
a[href].cardV.lightBlueBg:hover .cardImg::before {
background: linear-gradient(to top, #38a3d7, #38a3d7 10%, transparent 100%);
}
a[href].cardV.lightBlueBg:hover {
background-color: #38a3d7;
}
.cardV .cardImg {
position: relative;
overflow: hidden;
}
.cardV img {
aspect-ratio: 16 / 9;
object-fit: cover;
max-width: 100%;
width: 100%;
object-position: center;
transform: none;
transition-duration: 0.1s;
}
a[href].cardV:hover img {
transform: scale(1.05);
}
.cardV .cardBody {
padding: clamp(35px, 4vw, 40px) clamp(20px, 3vw, 60px);
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
}
.cardV .cardTag {
color: white;
font-size: clamp(0.7rem, 2vw, 0.9rem);
font-weight: 500;
max-width: fit-content;
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 5px;
position: absolute;
top: -5px;
}
.cardV .cardBody h3,
.cardV .cardBody p {
color: white;
}
.cardV .cardBody h3 {
margin-bottom: 15px;
}
.cardV .cardBody p {
margin-bottom: 30px;
}
.cardV .cardBody button {
margin: auto 0 0 auto;
}
.aboutUsSection {
display: flex;
flex-direction: column;
}
.dashedSeperator {
height: 10px;
background: repeating-linear-gradient(
90deg,
#bdbdbe,
#bdbdbe 20px,
transparent 20px,
transparent 24px
);
max-width: 400px;
width: 100%;
transform: skew(-30deg);
margin: 30px 0;
}
.mediaLeftBlock,
.mediaRightBlock {
display: grid;
padding: var(--as-padding-y-axis) 0;
row-gap: 40px;
overflow: hidden;
}
.mediaRightBlock > div:first-of-type,
.mediaLeftBlock > div:first-of-type {
padding: 0 var(--as-padding-x-axis);
}
body:not(.page-template-homepage)
.mediaRightBlock
> div:first-of-type
h2
span:last-of-type,
body:not(.page-template-homepage)
.mediaLeftBlock
> div:first-of-type
h2
span:last-of-type {
display: block;
margin-top: clamp(5px, 0.8vw, 10px);
}
.mediaRightBlock > div,
.mediaLeftBlock > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.mediaRightBlock > div:first-of-type > *:last-child,
.mediaLeftBlock > div:first-of-type > *:last-child {
margin-bottom: 0;
}
.mediaRightBlock > div:first-of-type > h2,
.mediaLeftBlock > div:first-of-type > h2 {
text-wrap: balance;
}
.meetTeamMember {
padding-bottom: 0;
}
.blueShieldRightBg,
.blueShieldLeftBg {
background-image: url(//www.auto-shield.co.uk/wp-content/themes/auto-shield/assets/images/as-large-blue-shield.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
flex-direction: row !important;
justify-content: center;
align-items: flex-end;
padding: 0 15px;
}
.blueShieldLeftBg {
transform: scaleX(-1);
}
.blueShieldRightBg img,
.blueShieldLeftBg img {
max-height: 750px;
}
.weAreTrustedSection > div:first-of-type p {
margin-bottom: 0 !important;
}
.priceLabel {
background-color: var(--as-blue-light);
color: white;
padding: 10px 15px;
border-radius: 10px;
margin-bottom: 1em;
font-size: clamp(1.2rem, 3vw, 1.4rem);
font-weight: 700;
max-width: fit-content;
}
@media (min-width: 768px) {
.fullWidthCardBlock {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 1024px) {
.mediaLeftBlock > div:first-of-type {
order: 2;
}
.mediaRightBlock {
grid-template-columns: 60% 40%;
}
.mediaLeftBlock {
grid-template-columns: 40% 60%;
}
.mediaRightBlock .splide__slide {
border-radius: 50px 0 0 50px;
}
.mediaLeftBlock .splide__slide {
border-radius: 0 50px 50px 0;
}
}
.autoscrollBanner .splide__slide {
display: flex;
justify-content: center;
align-items: center;
}
.autoscrollBanner.cardBrands .splide__slide img,
.autoscrollBanner.wrapBrands .splide__slide img {
max-width: 100px;
}
.autoscrollBanner.cardBrands .splide__slide img {
max-height: clamp(40px, 4vw, 60px);
}
.autoscrollBanner.wrapBrands .splide__slide img {
max-height: clamp(30px, 4vw, 40px);
}
.masonryGrid {
display: grid;
gap: 8px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
min-height: clamp(50vh, 65vw, 100vh);
background-color: var(--as-grey-light);
padding: var(--as-padding-y-axis) clamp(10px, 2vw, 40px);
}
.masonryGrid > .masonry-item {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.masonryGrid > .masonry-item:nth-of-type(1) {
grid-area: 1 / 1 / 3 / 6;
}
.masonryGrid > .masonry-item:nth-of-type(2) {
grid-area: 1 / 6 / 1 / 9;
}
.masonryGrid > .masonry-item:nth-of-type(3) {
grid-area: 2 / 6 / 2 / 9;
}
.masonryGrid > .masonry-item:nth-of-type(4) {
grid-area: 1 / 9 / 3 / 13;
}
.masonryGrid > .masonry-item:nth-of-type(5) {
grid-area: 3 / 1 / 4 / 4;
}
.masonryGrid > .masonry-item:nth-of-type(6) {
grid-area: 4 / 1 / 5 / 4;
}
.masonryGrid > .masonry-item:nth-of-type(7) {
grid-area: 3 / 4 / 5 / 9;
}
.masonryGrid > .masonry-item:nth-of-type(8) {
grid-area: 3 / 9 / 5 / 13;
}  .testimonialCardsContainer {
background-color: var(--as-blue-light);
padding: var(--as-padding-y-axis) var(--as-padding-x-axis);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
}
.testimonialCardsGrid {
display: grid;
grid-template-columns: 1fr;
column-gap: clamp(30px, 4vw, 60px);
row-gap: clamp(60px, 4vw, 90px);
}
.testimonialSliderContainer {
background-color: var(--as-blue-light);
padding: var(--as-padding-y-axis) 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
}
.testimonialCardsContainer > h2,
.testimonialSliderContainer > h2 {
color: white;
text-align: center;
text-wrap: balance;
}
.testimonialCardsContainer > .solidBlueGreyBtn,
.testimonialSliderContainer > .solidBlueGreyBtn {
margin: unset;
}
.testimonialSlider {
width: 100%;
}
.testimonialCard {
position: relative;
}
.testimonialCard .quoteIcon {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 200px;
background-color: rgb(59, 164, 215);
position: absolute;
top: -30px;
z-index: 4;
border: 5px solid #f2f2f2;
}
.testimonialCard .quoteIcon svg {
width: clamp(25px, 2vw, 35px);
height: clamp(25px, 2vw, 35px);
fill: rgba(255, 255, 255, 0.8);
}
.testimonialSlider .splide__slide {
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
.testimonialCard,
.testimonialCard > .reviewerDetails {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.testimonialCard {
background-color: #f2f2f2;
max-width: 1000px;
width: 100%;
height: 100%;
gap: 30px;
padding: clamp(60px, 5vw, 90px) clamp(15px, 4vw, 60px) clamp(30px, 4vw, 60px)
clamp(15px, 4vw, 60px);
border-radius: 10px;
}
.testimonialCard .reviewContent {
color: var(--as-blue-grey);
font-weight: 500;
text-align: center;
}
.testimonialCard .dashedSeperator {
background: repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 20px,
transparent 20px,
transparent 24px
);
margin: 0;
}
.testimonialCard .reviewerDetails {
gap: 15px;
}
.testimonialCard .starRating {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.testimonialCard .starRating svg {
width: clamp(22px, 2vw, 30px);
height: clamp(22px, 2vw, 30px);
fill: #f6bb06;
stroke-width: 5px;
stroke: black;
}
@media (min-width: 768px) {
.testimonialCardsGrid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1280px) {
.testimonialCardsGrid {
grid-template-columns: 1fr 1fr 1fr;
}
} .conciergeBlock {
padding: var(--as-padding-y-axis) var(--as-padding-x-axis);
}
.conciergeBlock > div {
max-width: 55ch;
margin: 0 auto;
}
.conciergeBlock div {
text-align: center;
}
.conciergeImg {
margin-bottom: 30px;
}
.conciergeImg img {
filter: brightness(0) opacity(0.7);
max-width: clamp(200px, 25vw, 400px);
}
.conciergeDetails .dashedSeperator {
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5) 20px,
transparent 20px,
transparent 24px
);
margin: 30px auto;
}
.conciergeDetails h2 {
text-wrap: balance;
}
.conciergeDetails a {
margin: 30px auto 0 auto;
} .whyUseBanner {
display: grid;
grid-template-columns: 1fr;
background-color: #67a0bb;
gap: 2px;
}
.whyUseBanner .bannerSection {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 30px;
color: var(--as-blue-grey);
text-align: center;
transition-duration: 0.1s;
}
.whyUseBanner a.bannerSection:hover {
filter: brightness(0.95);
}
.whyUseBanner > .bannerSection:nth-child(odd) {
background-color: var(--as-faint-medium-blue);
}
.whyUseBanner > .bannerSection:nth-child(even) {
background-color: var(--as-faint-light-blue);
}
.whyUseBanner .bannerSection .whyUseIcon {
font-size: clamp(2rem, 4vw, 2.5rem);
}
.whyUseBanner .bannerSection .whyUseDetails p {
margin: clamp(5px, 0.8vw, 10px) auto 0 auto;
line-height: 1.2em;
font-weight: 500;
max-width: 24ch;
text-wrap: balance;
}
@media (min-width: 768px) {
.whyUseBanner {
grid-template-columns: 1fr 1fr 1fr;
}
.whyUseBanner .bannerSection {
flex-direction: column;
}
} .whyUseBlocksContainer {
display: grid;
grid-template-columns: 1fr;
}
.whyUseBlock {
display: flex;
flex-direction: column;
gap: clamp(30px, 4vw, 60px);
padding: var(--as-padding-y-axis) var(--as-padding-x-axis);
}
.whyUseBlock h2 span:last-of-type {
font-size: clamp(1.4rem, 4vw, 1.8rem);
}
.whyUseBlock:nth-of-type(1) {
background-color: var(--as-blue-grey);
color: white;
}
.whyUseBlock:nth-of-type(1) h2 span:not(:nth-of-type(2)) {
color: var(--as-faint-light-blue);
}
.whyUseBlock:nth-of-type(1) h2 span:nth-of-type(2) {
color: white;
}
.whyUseBlock:nth-of-type(2) {
background-color: var(--as-grey-light);
}
.whyUseBlock:nth-of-type(2) h2 span:not(:nth-of-type(2)) {
color: var(--as-faint-medium-blue);
}
.whyUseBlock:nth-of-type(3) {
background-color: var(--as-faint-medium-blue);
}
.whyUseBlock:nth-of-type(3) h2 span:not(:nth-of-type(2)) {
color: rgba(255, 255, 255, 0.5);
}
.whyUseBlock:nth-of-type(3) .dashedSeperator {
background: repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.3) 20px,
transparent 20px,
transparent 24px
);
}
.whyUseBlock .blockImg img {
aspect-ratio: 16 / 9;
object-fit: cover;
max-width: 100%;
width: 100%;
object-position: center;
transform: none;
border-radius: 10px;
transition-duration: 0.1s;
}
@media (min-width: 768px) {
.whyUseBlocksContainer {
grid-template-columns: 1fr 1fr;
}
.whyUseBlock:nth-of-type(1) {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(60px, 5vw, 80px);
}
} .leftAlignedContainer {
padding: var(--as-padding-y-axis) var(--as-padding-x-axis);
max-width: 100ch;
}
.leftAlignedContainer.wysiwygArea h1,
.leftAlignedContainer.wysiwygArea h2,
.leftAlignedContainer.wysiwygArea h3,
.leftAlignedContainer.wysiwygArea h4,
.leftAlignedContainer.wysiwygArea h5 {
margin-bottom: 15px;
} .contactSectionContainer {
display: flex;
justify-content: center;
align-items: center;
}
.contactSection {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.contactSection > div {
padding: var(--as-padding-y-axis) var(--as-padding-x-axis);
}
.contactSection > div:first-of-type {
background-color: var(--as-blue-grey);
}
.contactSection > div:last-of-type {
background-color: #40abe0;
background-image: url(//www.auto-shield.co.uk/wp-content/themes/auto-shield/assets/images/as-large-blue-shield.webp);
background-blend-mode: overlay;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.contactSection .contactDetails h3 {
font-size: clamp(1.3rem, 3vw, 1.6rem);
}
.contactSection .contactDetails h4 {
font-size: clamp(1rem, 3vw, 1.2rem);
margin-top: 10px;
}
.contactSection .contactDetails h4 i {
font-size: clamp(1.6rem, 3vw, 1.8rem);
}
@media (max-width: 1023px) {
.contactSection > div:first-of-type {
border-top: 2px solid var(--as-grey-light);
}
}
@media (min-width: 1024px) {
.contactSection {
grid-template-columns: 1fr 1.3fr;
}
} #gform_wrapper_1 .gform_heading .gform_title,
#gform_wrapper_1 .gform_heading .gform_description,
#gform_wrapper_1 .gform-field-label,
#gform_wrapper_1 .gfield_description {
color: white;
}
#gform_fields_1 {
row-gap: 25px !important;
}
#gform_wrapper_1 .gform_heading {
border-bottom: 5px solid rgba(255, 255, 255, 0.3);
margin-bottom: 30px;
}
#gform_wrapper_1 .gform_heading .gform_description,
#gform_wrapper_1 .gform-field-label {
font-weight: 600;
}
#gform_wrapper_1 .gform_heading .gform_description {
margin-top: 10px;
}
#gform_wrapper_1 .gform-field-label {
font-size: 1rem;
}
#gform_wrapper_1 .gfield_description,
#gform_wrapper_1 .gfield_required_text {
font-size: 0.8rem;
}
#gform_wrapper_1 .gfield_required_text {
color: var(--as-blue-grey);
}
.gform-theme--foundation .gform_fields {
row-gap: 25px;
}
.gform-theme--foundation .gfield input,
.gform-theme--foundation .gfield select,
.gform-theme--foundation .gfield textarea {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 5px !important;
min-height: 45px !important;
font-size: 0.9rem !important;
color: var(--as-blue-grey) !important;
}
.gform-theme--foundation .gfield input:focus,
.gform-theme--foundation .gfield select:focus,
.gform-theme--foundation .gfield textarea:focus {
outline: 2px solid var(--as-blue-medium);
}
.gform-theme--foundation .gform-field-label {
font-size: 1rem;
}
.gform-theme--foundation #gform_submit_button_1 {
background-color: var(--as-blue-grey);
color: #f2f2f2;
font-size: 1.2rem;
padding: 12px 30px;
width: 100%;
}
.gform-theme--foundation #gform_submit_button_1:hover {
background-color: #32363d;
}
.gform-theme--foundation .gform_confirmation_message {
padding: clamp(15px, 4vw, 30px);
border-radius: 10px;
font-weight: 600;
font-size: 1.1rem;
color: white;
background-color: var(--as-blue-grey);
}
.gform-theme--framework .gform-field-label > .gfield_required,
.gform-theme--framework .gfield_validation_message {
font-size: 0.8rem !important;
color: var(--as-blue-grey) !important;
}
.gform-theme--foundation .gform_validation_errors {
background-color: var(--as-blue-grey) !important;
margin-bottom: 15px;
border-radius: 10px !important;
outline: none !important;
border: none !important;
}
.gform-theme--foundation .gform_validation_errors h2 {
color: white !important;
margin-bottom: 0;
font-size: 0.8rem !important;
}
.gform-theme--foundation .gform_validation_errors h2 span.gform-icon {
border-color: var(--as-blue-light) !important;
color: white !important;
background-color: var(--as-blue-light) !important;
}
@media (min-width: 768px) {
.gform-theme--foundation #gform_submit_button_1 {
max-width: 300px;
margin-left: auto;
}
} .site-primary-footer-wrap {
padding: clamp(60px, 6vw, 100px) var(--as-padding-x-axis);
background-image: url(//www.auto-shield.co.uk/wp-content/themes/auto-shield/assets/images/footer-bg.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: 32% 50%;
background-blend-mode: multiply;
background-color: rgba(35, 37, 41, 0.7) !important;
}
.site-primary-footer-wrap[data-section="section-primary-footer-builder"]
.ast-builder-grid-row {
padding: 0;
}
.footerLogo {
max-width: clamp(200px, 20vw, 300px);
}
#astra-footer-menu > .menu-item:not(:first-of-type) {
margin-top: 10px;
}
#astra-footer-menu .menu-item > a {
font-weight: 700;
}
.glightbox-clean .gclose {
width: 50px;
height: 50px;
}
.ctBanner {
background-color: #010101;
border-top: 1px solid #312c2c;
}
.ctLink {
display: flex;
justify-content: center;
align-items: center;
padding: 12px var(--as-padding-x-axis);
gap: 10px;
text-decoration: none !important;
width: 100%;
}
.ctLink span {
color: #424242;
font-size: clamp(0.7rem, 1vw, 0.8rem);
font-weight: 500;
}
.ctLogo {
max-width: 50px;
filter: brightness(0.2) grayscale(1);
transform: none;
}
.ctLink:hover .ctLogo {
filter: unset;
transform: scale(1.05);
}
@media (min-width: 768px) {
.ctLink {
justify-content: flex-end;
}
}