.inputDiv {
position: relative;
}
.inputDiv.validation::before {
content: "";
position: absolute;
left: 0;
border-left: 6px red solid;
height: 100%;
}
.turnstileWrapper {
position: relative;
}
.turnstileWrapper.validation::before {
content: "";
position: absolute;
left: 0;
border-left: 6px red solid;
height: 100%;
}
#firstNameValidationError, #lastNameValidationError, #emailValidationError, #phoneValidationError, #messageValidationError, #submitValidationError, #serviceValidationError, #turnstileValidationError {
display: none;
} .stay-up {
top: -12px!important; 
padding: 0 4px;
}
.inputStyling {
height: 48px;
border: 2px solid black!important;
padding: 12px 12px!important;
border-radius: 0!important;
}
.inputStyling:focus-visible {
border-radius: 0!important;
}
#messageInput {
border: 2px solid black;
padding: 12px 12px;
}
.placeholderPosition {
position: absolute;
top: 16px;
left: 24px;
cursor: text;
background-color: #fff;
transition: top 0.2s;
}
.formWrapper {
font-family: "Rubik", sans-serif;
}
.btnWrapper {
position: relative;
}
.btnWrapper.validation::before {
content: "";
position: absolute;
left: -12px;
border-left: 6px red solid;
height: 100%;
}
.submitNowButton {
padding: 12px!important;
border-radius: 2px!important;
border: 2px solid #000!important;
color: #000!important;
font-family: "Rubik", sans-serif!important;
font-weight: 300!important;
transition: 0.3s ease-in-out!important;
color: #fff!important;
text-transform: uppercase;
letter-spacing: 1px;
width: 100%!important;
background: linear-gradient(to right, transparent 50%, black 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.3s ease;
}
.buttonArrow {
width: 16px;
height: auto;
margin-bottom: 4px;
}
.submitNowButton:hover {
background-position: left bottom!important;
background-color: transparent!important;
color: #000!important
} 
.submitNowButton:focus {
background-color: transparent!important;
}
.validationError {
margin-top: 8px;
display: flex;
align-items: center;
}
.errorMessage {
font-size: 14px;
margin-left: 8px;
color: red;
}#firstNameValidationErrorModal, #lastNameValidationErrorModal, #emailValidationErrorModal, #phoneValidationErrorModal, #messageValidationErrorModal, #submitValidationErrorModal, #serviceValidationErrorModal, #turnstileValidationErrorModal {
display: none;
}
#messageInputModal {
border: 2px solid black!important;
} #contact-modal {
display: none;
}
.closeModalButton {
position: absolute;
top: 0;
right: 0;
background-image: url(https://buildexconstruction.co.uk/wp-content/uploads/2024/05/blackX.svg); background-repeat: no-repeat;
background-position: center;
border: none!important;
width: 40px!important;
height: 40px;
background-size: 24px 24px; 
cursor: pointer;
border-radius: 0!important;
}
.closeModalButton:hover {
background-color: rgb(0,0,0,0.2)!important;
}
.modalTitle {
font-size: 32px;
font-family: "Rubik", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
.modal-head {
display: flex;
}
#modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 9998;
overflow-y: auto;
} .modalWrapper {
padding: 20px;
z-index: 9999;
position: relative; 
width: fit-content;
margin: auto;
min-width: 800px;
}
.contactModalFormWrapper {
background-color: white;
padding: 24px;
max-height: 800px;
overflow-y: auto; position: relative;
}
@media (min-width: 767px) and (max-width: 1119px) {
.modalWrapper {
min-width: 70%;
}
}
@media (max-width: 767px) {
.modalWrapper {
padding: 20px 0px;
min-width: 90%;
width: 100%;
}
}body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.navbar-brand {
margin-right: 0!important;
padding-bottom: 0!important;
padding-top: 0!important;
}
.navbar-toggler:focus {
background-color: transparent!important;
} 
.navbar-toggler:hover {
background-color: transparent!important;
} 
.page-header {
display: none!important;
}
.headerTopRow {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 1rem;
padding-right: 1rem;
font-family: "Rubik", sans-serif;
color: #575756;
background: #fff;
z-index: 1000;
position: relative;
border-bottom: 1px solid rgba(87, 87, 86, 0.3);
}
.sloganDiv {
display: flex;
justify-content: space-evenly;
}
.call-info {
color: #575756;
}
.call-info a {
color: #575756!important;
}
.barrowWarm {
text-align: right;
}
.modalAnchor {
color: #575756!important;
border: 0!important;
padding: 0!important;
}
.modalAnchor:hover {
color: #575756!important;
text-decoration: underline!important;
background-color: transparent!important;
}
.modalAnchor:focus {
background-color: transparent!important;
}
.sticky-header {
position: sticky!important;
top: 0;
z-index: 1000!important;
border-bottom: 1px solid rgba(87, 87, 86, 0.3);
}
.serviceWrapper, .areaWrapper, .aboutWrapper {
position: absolute;
width: 600px;
background: #fff;
border: 1px solid black;
border-radius: 6px;
top: 80px;
transform: translateY(10px); opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.aboutWrapper {
width: 700px!important;
left: -120px;
}
@media (max-width: 1400px) {
.aboutWrapper {
left: -350px;
}
}
.item {
display: flex;
align-items: center;
text-decoration: none;
color: #575756;
width: 100%!important;
padding: 6px;
}
.item:hover {
background-color: rgba(0, 0, 0, 0.05);
color: #575756;
}
.serviceIcon {
margin-right: 6px;
width: 40px;
height: 40px;
}
.show-dropdown {
transform: translateY(0);
opacity: 1;
visibility: visible;
} #mobileNavbarVersion {
display: block;
position: fixed;
top: 0;
right: -100%; width: 100%;
height: 100%;  overflow-y: auto;
transition: right 0.5s ease; z-index: 1000; padding: 10% 0;
}
.radial-gradient { background: #343434;  background: radial-gradient(at center, #343434, #343434); } #mobileNavbarVersion.active {
right: 0; }
#mobileNavbarItems {
padding: 0;
margin-top: 1rem;
}
.mobileItem {
padding: 1rem;
border-bottom: 2px solid #ffffff68;
position: relative;
transition: 0.3s ease-in-out;
}
.mobileTagLink {
display: block;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 300;
font-family: "Rubik", sans-serif;
width: 100%;
height: 100%;
letter-spacing: 2px;
text-transform: uppercase;
}
.mobileTagLink:hover {
color: #fff;
}
.mobileItem .caret {
position: absolute;
right: 15px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='5px' class='chevron'%3E%3Cg class='chevron__group'%3E%3Cpath d='M1.30834787,0.121426937 L4.87569247,3.68780701 C5.04143584,3.8541036 5.04143584,4.11557261 4.87569247,4.2818692 L4.2807853,4.87693487 C4.20364253,4.95546204 4.09599241,5 3.98333171,5 C3.87067101,5 3.76302089,4.95546204 3.68587812,4.87693487 L0.122730401,1.30754434 C-0.0409101338,1.14044787 -0.0409101338,0.880578628 0.122730401,0.713482155 L0.718686793,0.119419971 C0.79596299,0.0427616956 0.902628913,-0.000376468522 1.01396541,2.47569236e-06 C1.1253019,0.000381419907 1.2316441,0.0442445771 1.30834787,0.121426937 L1.30834787,0.121426937 Z' class='chevron__box chevron__box--left' fill='%23FFFFFF' /%3E%3Cpath d='M3.12493976,3.68899585 L6.68683713,0.123119938 C6.76404711,0.0445502117 6.8717041,3.56458529e-15 6.98436032,0 C7.09701655,-3.56458529e-15 7.20467353,0.0445502117 7.28188351,0.123119938 L7.87588228,0.717098143 C8.04137257,0.883371226 8.04137257,1.14480327 7.87588228,1.31107635 L4.31398491,4.87695226 C4.23695994,4.95546834 4.1294742,5 4.01698553,5 C3.90449685,5 3.79701111,4.95546834 3.71998614,4.87695226 L3.12493976,4.28197072 C2.95998402,4.11649361 2.95814736,3.85659624 3.12074929,3.68899585 L3.12493976,3.68899585 Z' class='chevron__box chevron__box--right' fill='%23FFFFFF' /%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
top: 24px;
display: inline-block;
animation-name: none; 
}
.mobileItem .caret.rotate-forward {
animation: rotateCaretXAxisForwards 0.4s forwards cubic-bezier(0.01, 0.01, 0.5, 1.5);
}
.mobileItem .caret.rotate-backward {
animation: rotateCaretXAxisBackwards 0.4s forwards cubic-bezier(0.01, 0.01, 0.5, 1.5);
}
@keyframes rotateCaretXAxisForwards {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(180deg);
}
}
@keyframes rotateCaretXAxisBackwards {
from {
transform: rotateX(180deg);
}
to {
transform: rotateX(0deg);
}
}
#aboutUsMenu {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding-left: 0.5rem;
}
#ourAreasMobile {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding-left: 0.5rem;
}
.nestedItem {
display: block;
text-decoration: none;
color: #fff;
font-family: "Rubik", sans-serif;
width: 100%;
height: 100%;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nestedItem:hover {
color: #fff;
}
.nestedItem .caret {
position: absolute;
right: 0px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='5px' class='chevron'%3E%3Cg class='chevron__group'%3E%3Cpath d='M1.30834787,0.121426937 L4.87569247,3.68780701 C5.04143584,3.8541036 5.04143584,4.11557261 4.87569247,4.2818692 L4.2807853,4.87693487 C4.20364253,4.95546204 4.09599241,5 3.98333171,5 C3.87067101,5 3.76302089,4.95546204 3.68587812,4.87693487 L0.122730401,1.30754434 C-0.0409101338,1.14044787 -0.0409101338,0.880578628 0.122730401,0.713482155 L0.718686793,0.119419971 C0.79596299,0.0427616956 0.902628913,-0.000376468522 1.01396541,2.47569236e-06 C1.1253019,0.000381419907 1.2316441,0.0442445771 1.30834787,0.121426937 L1.30834787,0.121426937 Z' class='chevron__box chevron__box--left' fill='%23FFFFFF' /%3E%3Cpath d='M3.12493976,3.68899585 L6.68683713,0.123119938 C6.76404711,0.0445502117 6.8717041,3.56458529e-15 6.98436032,0 C7.09701655,-3.56458529e-15 7.20467353,0.0445502117 7.28188351,0.123119938 L7.87588228,0.717098143 C8.04137257,0.883371226 8.04137257,1.14480327 7.87588228,1.31107635 L4.31398491,4.87695226 C4.23695994,4.95546834 4.1294742,5 4.01698553,5 C3.90449685,5 3.79701111,4.95546834 3.71998614,4.87695226 L3.12493976,4.28197072 C2.95998402,4.11649361 2.95814736,3.85659624 3.12074929,3.68899585 L3.12493976,3.68899585 Z' class='chevron__box chevron__box--right' fill='%23FFFFFF' /%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
top: 8px;
display: inline-block;
animation-name: none; 
}
.mobileNestedMenu { overflow: hidden;
max-height: 0;
position: relative;
transition: max-height 0.3s ease-out;
margin-top: 0!important;
margin-bottom: 0!important;
}
.mobileNestedMenu.show { max-height: 1100px;
flex-direction: column;
margin-top: 0.5rem!important;
margin-bottom: 0.5rem!important;
}
.nestedSubItem {
margin-top: 8px;
margin-bottom: 8px;
padding-left: 8px;
text-decoration: none;
color: #575756;
font-family: "Rubik", sans-serif;
width: 100%;
height: 100%;
display: block;
}
.nestedSubItem .caret {
position: absolute;
right: 10px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='5px' class='chevron'%3E%3Cg class='chevron__group'%3E%3Cpath d='M1.30834787,0.121426937 L4.87569247,3.68780701 C5.04143584,3.8541036 5.04143584,4.11557261 4.87569247,4.2818692 L4.2807853,4.87693487 C4.20364253,4.95546204 4.09599241,5 3.98333171,5 C3.87067101,5 3.76302089,4.95546204 3.68587812,4.87693487 L0.122730401,1.30754434 C-0.0409101338,1.14044787 -0.0409101338,0.880578628 0.122730401,0.713482155 L0.718686793,0.119419971 C0.79596299,0.0427616956 0.902628913,-0.000376468522 1.01396541,2.47569236e-06 C1.1253019,0.000381419907 1.2316441,0.0442445771 1.30834787,0.121426937 L1.30834787,0.121426937 Z' class='chevron__box chevron__box--left' fill='%23FFFFFF' /%3E%3Cpath d='M3.12493976,3.68899585 L6.68683713,0.123119938 C6.76404711,0.0445502117 6.8717041,3.56458529e-15 6.98436032,0 C7.09701655,-3.56458529e-15 7.20467353,0.0445502117 7.28188351,0.123119938 L7.87588228,0.717098143 C8.04137257,0.883371226 8.04137257,1.14480327 7.87588228,1.31107635 L4.31398491,4.87695226 C4.23695994,4.95546834 4.1294742,5 4.01698553,5 C3.90449685,5 3.79701111,4.95546834 3.71998614,4.87695226 L3.12493976,4.28197072 C2.95998402,4.11649361 2.95814736,3.85659624 3.12074929,3.68899585 L3.12493976,3.68899585 Z' class='chevron__box chevron__box--right' fill='%23FFFFFF' /%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
width: 18px;
height: 18px;
top: 6px;
right: 16px;
display: inline-block;
animation-name: none; 
transform: rotate(270deg); 
}
#mobileServicesMenu {
padding-left: 8px;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mobileList {
padding: 0;
}
.mobileItemList {
list-style-type: none!important;
position: relative;
margin-bottom: 12px;
}
.mobileItemList:last-child {
margin-bottom: 0;
}
:root {
--bs-navbar-toggler-icon-bg: url(https://buildexconstruction.co.uk/wp-content/uploads/2024/04/Hamburger.png)!important;
--bs-nav-link-padding-x: 16px;
--bs-nav-link-padding-y: 16px;
}
.navbar {
--bs-navbar-toggler-icon-bg: url(https://buildexconstruction.co.uk/wp-content/uploads/2024/04/Hamburger.png);
}
.navbar-nav {
gap: 6px;
} .navbar-toggler-icon {
background-image: url(https://buildexconstruction.co.uk/wp-content/uploads/2024/04/Hamburger.png)!important;
}
@media (max-width: 1024px) {
.navbar-expand-lg .navbar-nav {
display: none!important;
}
.navbar-expand-lg .navbar-toggler {
display: block!important;
}
.navbar-expand-lg .navbar-collapse {
display: none !important;
}
#headerContainer {
display: flex;
justify-content: space-between; align-items: center; padding: 0 32px; }
}
@media (min-width: 1025px) {
.navbar-expand-lg .navbar-toggler {
display: none !important;
}
}
@media (max-width: 767px) { .sloganDiv {
text-align: center!important;
}
.barrowWarm {
text-align: center!important;
}
.headerTopRow {
display: none;
}
.sticky-header {
border-top: none;
}
}
@media (min-width: 768px) and (max-width: 1024px) { #headerContainer {
padding: 0!important;
}
.call-info {
padding-right: 16px!important;
}
.navbar-brand {
padding-left: 16px!important;
}
.phone-number {
font-size: 16px!important;
}
.nav-link.mobile {
font-size: 18px!important;
padding: 14px!important;
}
}
@media (min-width: 1024px) and (max-width: 1220px) { #headerContainer {
padding: 0!important;
}
.call-info {
padding-right: 16px!important;
}
.navbar-brand {
padding-left: 16px!important;
}
.phone-number {
font-size: 20px!important;
} .nav-link.mobile {
font-size: 16px!important;
padding: 12px!important;
}
.item {
font-size: 16px;
}
.serviceWrapper, .areaWrapper, .aboutWrapper {
width: 450px;
}
}
@media (max-width: 480px) { }
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5); display: none;
z-index: 1; transition: 0.3s ease-in;
}
#mainNavbar {
background: #fff ;
}
.phone-number {
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
color: #575756;
font-family: "Rubik", sans-serif;
} 
.phoneNumberLink {
color: #575756;
}
.phoneNumberLink:hover {
text-decoration: underline!important;
}
.nav-item { font-weight: 300;
letter-spacing: 2px;
font-family: "Rubik", sans-serif;
font-size: 20px;
text-transform: uppercase; }
.nav-link {
color: #575756!important;
position: relative;
padding: 16px!important;
}
.nav-link.awesomeChevron::before {
position: absolute;
right: -4px;
will-change: transform;
transform: translateY(-50%);
top: 50%;
font-size: 10px;
content: "\f078" !important;
font-family: 'Font Awesome 6 Free', 'FontAwesome' !important;
transition: all 0.3s ease;
font-weight: 900;
} .nav-item.dropdown:hover .nav-link.awesomeChevron::before {
transform: rotate(180deg) translateY(50%);
}
.nav-item.dropdown::before {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.nav-item.dropdown:hover:before {
width: 100%; }
.nav-item.dropdown:hover .dropdown-menu {
display: block!important;
}
.navbar-wrapper {
position: relative;
width: 100%;
z-index: 2;
}
.dropdown-header {
font-size: 18px!important;
font-weight: bold!important;
font-family: "Rubik", sans-serif;
color: #575756!important;
border-bottom: 1px solid #fff;
padding-bottom: 12px!important;
}
.dropdown-item {
padding-left: 4px!important;
padding-bottom: 4px!important;
margin-bottom: 4px!important;
align-items: center!important;
transition: transform 0.2s ease, background-color 0.2s ease;
color: #575756!important;
font-family: "Rubik", sans-serif;
position: relative;
}
.dropdown-item:hover {
background-color: #D8F0F8!important;
transform: translateX(6px);
}
.dropdown-item .turnedCaret {
position: absolute;
right: 10px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='5px' class='chevron'%3E%3Cg class='chevron__group'%3E%3Cpath d='M1.30834787,0.121426937 L4.87569247,3.68780701 C5.04143584,3.8541036 5.04143584,4.11557261 4.87569247,4.2818692 L4.2807853,4.87693487 C4.20364253,4.95546204 4.09599241,5 3.98333171,5 C3.87067101,5 3.76302089,4.95546204 3.68587812,4.87693487 L0.122730401,1.30754434 C-0.0409101338,1.14044787 -0.0409101338,0.880578628 0.122730401,0.713482155 L0.718686793,0.119419971 C0.79596299,0.0427616956 0.902628913,-0.000376468522 1.01396541,2.47569236e-06 C1.1253019,0.000381419907 1.2316441,0.0442445771 1.30834787,0.121426937 L1.30834787,0.121426937 Z' class='chevron__box chevron__box--left' fill='%23FFFFFF' /%3E%3Cpath d='M3.12493976,3.68899585 L6.68683713,0.123119938 C6.76404711,0.0445502117 6.8717041,3.56458529e-15 6.98436032,0 C7.09701655,-3.56458529e-15 7.20467353,0.0445502117 7.28188351,0.123119938 L7.87588228,0.717098143 C8.04137257,0.883371226 8.04137257,1.14480327 7.87588228,1.31107635 L4.31398491,4.87695226 C4.23695994,4.95546834 4.1294742,5 4.01698553,5 C3.90449685,5 3.79701111,4.95546834 3.71998614,4.87695226 L3.12493976,4.28197072 C2.95998402,4.11649361 2.95814736,3.85659624 3.12074929,3.68899585 L3.12493976,3.68899585 Z' class='chevron__box chevron__box--right' fill='%23FFFFFF' /%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat; width: 16px;
height: 16px;
transform: rotate(270deg); 
top: 25%;
display: inline-block;
animation-name: none;  }
.dropdown-item .caret {
position: absolute;
right: 10px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 8 5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='5px' class='chevron'%3E%3Cg class='chevron__group'%3E%3Cpath d='M1.30834787,0.121426937 L4.87569247,3.68780701 C5.04143584,3.8541036 5.04143584,4.11557261 4.87569247,4.2818692 L4.2807853,4.87693487 C4.20364253,4.95546204 4.09599241,5 3.98333171,5 C3.87067101,5 3.76302089,4.95546204 3.68587812,4.87693487 L0.122730401,1.30754434 C-0.0409101338,1.14044787 -0.0409101338,0.880578628 0.122730401,0.713482155 L0.718686793,0.119419971 C0.79596299,0.0427616956 0.902628913,-0.000376468522 1.01396541,2.47569236e-06 C1.1253019,0.000381419907 1.2316441,0.0442445771 1.30834787,0.121426937 L1.30834787,0.121426937 Z' class='chevron__box chevron__box--left' fill='%23FFFFFF' /%3E%3Cpath d='M3.12493976,3.68899585 L6.68683713,0.123119938 C6.76404711,0.0445502117 6.8717041,3.56458529e-15 6.98436032,0 C7.09701655,-3.56458529e-15 7.20467353,0.0445502117 7.28188351,0.123119938 L7.87588228,0.717098143 C8.04137257,0.883371226 8.04137257,1.14480327 7.87588228,1.31107635 L4.31398491,4.87695226 C4.23695994,4.95546834 4.1294742,5 4.01698553,5 C3.90449685,5 3.79701111,4.95546834 3.71998614,4.87695226 L3.12493976,4.28197072 C2.95998402,4.11649361 2.95814736,3.85659624 3.12074929,3.68899585 L3.12493976,3.68899585 Z' class='chevron__box chevron__box--right' fill='%23FFFFFF' /%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat; width: 16px;
height: 16px; top: 25%;
display: inline-block;
animation-name: none; animation-fill-mode: forwards; 
} .dropdown-item .caret.rotate-forward {
animation: rotateCaretForwards 0.3s forwards cubic-bezier(0.01, 0.01, 0.5, 1.5);
} .dropdown-item .caret.rotate-backward {
animation: rotateCaretBackwards 0.3s forwards cubic-bezier(0.01, 0.01, 0.5, 1.5);
}
@keyframes rotateCaretForwards {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes rotateCaretBackwards {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
#menuWrapper {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
background-color: transparent; z-index: 999;
display: none;
}
#servicesMenu, #aboutMenu {
position: relative;
display: none;
width: 100%;
background-color: #FFFFFF;
border-radius: 0!important;
padding-bottom: 4rem!important; }
#servicesMenu { border-top: 1px solid rgba(0, 0, 0, 0.22)!important;
background: linear-gradient(to bottom left, #1b5282, #0d7bbf, #1b5282) ;
}
#aboutMenu { border-top: 1px solid rgba(0, 0, 0, 0.22)!important;
background: linear-gradient(to bottom left, #1b5282, #0d7bbf, #1b5282) ;
}
.navbar-close-btn-container {
display: flex;
padding: 1rem;
justify-content: space-between;
position: relative;
}
.navbar-close-btn {
position: absolute;
right: 12px;
top: 28px;
padding: 12px;
background: none;
border: none;
background-image: url(https://buildexconstruction.co.uk/wp-content/uploads/2024/04/whiteCurvedX.png);
background-size: 20px 20px;
background-repeat: no-repeat;
object-fit: cover;
background-position: center;
}
.navbar-close-btn:hover {
background-color: transparent!important;
}
.mobileBookWrapper {
padding: 1rem;
}
.callNowButton {
padding: 12px!important;
border-radius: 2px!important;
border: 2px solid #fff!important; color: #000!important;
font-family: "Rubik", sans-serif!important;
font-weight: 300!important;
transition: 0.3s ease-in-out!important;
color: #fff!important;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none!important;
background: linear-gradient(to right, white 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.3s ease;
}
.buttonArrow {
width: 16px;
height: auto;
margin-bottom: 4px;
}
.callNowButton:hover {
background-position: left bottom;
color: #000!important
} 
button.navbar-toggler:focus {
outline: none;
box-shadow: none;
} @media (max-width: 1024px) {
.call-info {
display: none;
}
.navbar-toggler {
margin-left: auto;
border: none!important; }
.button-close {
justify-content: center!important;
align-items: end!important;
}
.navbar-brand {
padding-left: 20px;
}
.nav-item {
border-bottom: 1px solid #A9A9A9;
padding: 0;
}
.nav-item a {
padding-left: 16px;
padding-right: 16px;
}
.dropdown-item {
padding-left: 16px!important;
padding-right: 16px!important;
}
.nav-link {
color: black!important;
font-size: 18px!important;
font-weight: bold;
}
.navbar-nav {
line-height: 40px!important;
}
button#navbarToggler:focus {
background-color: transparent !important;
}
button#navbarToggler:hover {
background-color: transparent !important;
}
#navbarToggler {
background-color: transparent!important;
}
}
@media only screen and (max-width: 600px) {
.navbar-brand {
padding-left: 20px;
}
}footer {
font-family: "Rubik", sans-serif;
}
.title {
font-weight: 300;
font-size: 18px;
margin-bottom: 1.5rem;
letter-spacing: 2px;
color: #fff;
text-transform: uppercase;
}
#topFooter {
background-color: #282828;
width: 100%!important;
margin: 0!important;
max-width: 100%!important;
padding: 0 3rem;
padding-top: 1.5rem;
font-family: "Rubik", sans-serif;
}   
.logoImgDiv {
margin-bottom: 3rem;
}
.itemFooter {
color: #fff;
font-size: 14px;
margin-bottom: 0.5rem;
}
.itemFooter a:hover {
color: #fff;
text-decoration: underline;
}
.itemFooter a {
text-decoration: none;
color: #fff;
}
.footer-wrapper {
background-color: #222021;
padding: 2rem 0 3rem 0;
font-family: "Rubik", sans-serif;
}
.footerRow {
}
.callNowButton {
padding: 12px!important;
border-radius: 2px!important;
border: 2px solid #fff!important;
background-color: transparent!important;
padding-top: 12px!important;
padding-bottom: 12px!important;
font-family: "Rubik", sans-serif!important;
font-weight: 300!important;
transition: 0.3s ease-in-out!important;
color: #fff!important;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(to right, white 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.3s ease;
}
.buttonArrow {
width: 16px;
height: auto;
margin-bottom: 4px;
}
.callNowButton:hover {
background-position: left bottom;
background-color: transparent!important;
color: #000!important
} 
.footerButton {
margin-top: 1rem;
}
.footerList {
list-style-type: none;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 2px;
}
.footerList a {
text-decoration: none;
color: white;
}
.footerList a:hover {
text-decoration: underline;
color: white;
} 
.footerList li {
display: inline;
padding-left: 18px;
margin-right: 9px;
border-left: 1px solid white;
}
.companyInfo {
color: #B3B3B3;
text-align: center;
}
.FCARow {
margin-top: 2rem!important;
} @media only screen and (max-width: 767px) {
.footerList {
padding: 0;
margin-top: 1rem;
}
.FCARow {
margin-top: 0.5rem!important;
}
.title {
margin-bottom: 0.75rem;
margin-top: 1rem;
text-align: center;
}
.logoImgDiv {
margin-bottom: 1rem;
}
#topFooter {
padding: 5%;
}
}
@media (max-width: 1024px) {
#topFooter {
padding: 32px;
}
}