html * {
    font-family: Montserrat, sans-serif;
    /*   font-family: Verdana, Geneva, Tahoma, sans-serif;*/
}
/*

h3 {
    font-family: Poppins, sans-serif;
}
*/
body {
    font-family: Montserrat, sans-serif;
    /*   font-family: Verdana, Geneva, Tahoma, sans-serif;*/
}

a {
    color: snow;
}
.row {
    width: 100%;
}

.navbar {
    /*background-color: #00b661;*/
    background-color: #32323200;
    /* opacity: 85%;*/
}
.navbar-nav {
    width:80%;
    justify-content:space-evenly;
}
.nav-link {
    color: white;
}

    .nav-link:focus {
        text-decoration: none;
    }
.navbar-expand-xxl .navbar-collapse {

    justify-content: center;
}

.navbar .dropdown-menu.show {
    max-width: fit-content;
    overflow-x: hidden;
    height: fit-content !important;
    /*max-height: 12vh !important;*/
    overflow-y: hidden;
    border-style: solid;
    border-color: black;
    border-width: .5px;
    padding: 15px;
    box-shadow: 2px 6px 8px 0 rgba(255, 255, 255, 0.18);
}

#ddMenuClean .nav-link:focus, .nav-link:hover {
    color: white !important;
}

.rounded-menu {
    border-bottom-right-radius: 1.25rem !important;
    border-bottom-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    border-top-left-radius: 1.25rem !important;
}
.active-link {
    color: white;
    /*    transform: scale(1.05);*/
    text-shadow: 0 0 20px white;
    font-weight: 700 !important;
    /*    text-shadow: 0 0 0.125em hsl(0 0% 100% /0.3), 0 0 0.45em;*/
}
.dropdown-toggle:visited {
    opacity: 1;
    color: white !important;
}
.hover-underline-animation {
    display: inline-block;
    position: relative;
}

    .hover-underline-animation:after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: white;
        transform-origin: bottom center;
        transition: transform 0.2s ease-in;
    }

    .hover-underline-animation:hover:after {
        transform: scaleX(1);
        transform-origin: bottom center;
    }

a:hover {
    text-decoration: none;
    color: white;
    font-weight: 500 !important;
    text-shadow: 0 0 0.125em hsl(0 0% 100% /0.3), 0 0 0.45em;
}

.grow {
    transition: all .2s ease-in-out;
}

    .grow:hover {
        /*        transform: scale(1.1);*/
        font-weight: 900 !important;
        color: snow;
        text-shadow: 0 0 0.125em hsl(0 0% 100% /0.3), 0 0 0.45em;
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border-style: solid;
    border-color: #fffafa90;
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0.125em hsl(1 0% 100% /1), 0 0 0.45em;
    }

.accordion-button::after {
    background-color: white;
}

.price-box {
    font-family: Assistant, sans-serif;
    font-weight: 400;
}

#googleprev,
#googlenext {
    top: -70%;
    position: relative !important;
}


.card, .card-body {
    color: white !important;
    background-color: transparent !important;
}
.dropdwon-menu {
    max-width: fit-content;
    overflow-x: clip;
    max-height: 300px !important;
    overflow-y: scroll;
}
.dropdown-menu.show {
    max-width: fit-content;
    overflow-x: clip;
    height: fit-content !important;
   /* max-height: 13vh !important;*/
    overflow-y: scroll;
    box-shadow: 2px 6px 8px 0 rgba(255, 255, 255, 0.18);
}
    .dropdown-item {
        color: black;
    }

.text-light {
    color: white;
}

.btn:hover {
    /* background-color: transparent ;*/
    --bs-btn-focus-shadow-rgb: #00b661;
}

.btn-success:hover {
    color: #00b661;
    border-color: #00b661;
    background-color: rgb(0, 182, 97, .1);
}

.btn-primary {
    --bs-btn-active-border-color: #00b661;
}

.contact-btn {
    opacity: 40%;
}

.form-control:focus {
    box-shadow: none;
    border-color: #00b661;
}

.form-control {
    color: black;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, rev-star
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
}
/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: black;
}
#btnConSubmit.btn:disabled {
    width: 100% !important;
}

hr {
    color: #ddd;
    background-color: darkgrey;
    height: 1px;
    border: none;
    max-width: 100%;
}

.carousel-indicators [data-bs-target] {
    background-color: #00b661;
}

.ddbooking-btn {
    color: grey;
}

.fa {
    padding: 10px;
    font-size: 25px;
    width: 45px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    margin-right: 10px;
}

    .fa:hover {
        opacity: 0.7;
    }

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    /* background: #3B5998;*/
    color: white;
}

/* Instagram */
.fa-instagram {
    /* background: #55ACEE;*/
    color: white;
}
/* Whatsapp */
.fa-whatsapp {
    /* background: #3B5998;*/
    color: white;
}
/* Email */
.fa-envelope {
    /* background: #0d940b;*/
    color: white;
}
/* Phone */
.fa-phone {
    /* background: #0d940b;*/
    color: white;
}

.fa-home {
    /*background: #0d940b;*/
    color: white;
}

.fa-clock-o {
    /*  background: #0d940b;*/
    color: white;
}

@keyframes spin {
    10% {
        transform: scale(1.2);
    }

    40% {
        transform: scaleX(0);
    }

    60% {
    }

    80% {
    }

    100% {
        transform: rotateX(90deg);
        transform: scale(0);
        opacity: 0%;
    }
}

.top-img-spin {
    animation: spin 1s ease-in-out infinite alternate;
}

@keyframes caption-spin {
    100% {
        opacity: 0%;
    }
}

.top-img-caption-spin {
    animation: caption-spin 1.5s ease-in-out infinite alternate;
}

@keyframes arrows-point {
    100% {
        opacity: 20%;
        transform: translateX(100%);
    }
}

.booking-arrows {
    animation: arrows-point 2s ease-in infinite;
}

.blink {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.5;
        transform: scale(1);
        font-weight: 500 !important;
        text-shadow: 0 0 0.125em hsl(0 0% 100% /0.3), 0 0 0.45em;
    }
}

ul {
    list-style: none;
}

li.page-list:before {
    content: '✓';
}

@media only screen and (min-width: 2560px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 20px 0px 20px 10px;
    }

        .navbar div a img {
            /* height: 20%; */
            width: 255px;
            /* border-radius: 10%; */
        }

    .navbar-brand {
        padding: 0px 0px 0px 15px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 20px;
    }

    .nav-soc-col {
        display: none;
    }

    ul {
        padding-left: 1rem;
    }

    .dropdown-item {
        font-size: 28px;
        font-weight: 200;
    }

    li {
        color: snow;
        font-size: 28px;
    }

    .index-list li a {
        font-size: 14px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 14px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 20px !important;
        transition: all ease-out .2s;
    }

    li img {
        height: 18px;
        width: 2rem;
/*        filter: invert(43%) sepia(83%) saturate(2371%) hue-rotate(125deg) brightness(99%) contrast(101%);
*/    }

    button img {
        height: 18px;
        width: 2rem;
/*        filter: invert(43%) sepia(83%) saturate(2371%) hue-rotate(125deg) brightness(99%) contrast(101%);
*/    }

    label {
       /* color: snow;*/
        font-size: 20px;
    }

    a {
        font-size: 14px;
        text-decoration: none;
    }

    p {
        font-size: 18px;
        font-weight: lighter;
    }

    span {
        font-size: 12px;
    }

    h1 {
        font-size: 38px;
        font-weight: 200;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 12px;
    }

    h5 {
        font-size: 10px;
    }

    .idx-title {
        position: absolute;
        margin-top: 70px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    #idxTopBanner {
        width: 100%;
        height: 700px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 200px 0px 100px 0px;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-top-info h3 {
        font-weight: 100 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }

    .idx-about-info {
        padding: 0% 10% 0% 10%;
    }

    .reviews-div {
        padding: 0% 10% 0% 10%;
    }

    .show-sm {
        display: block
    }
    
    .topcontainer {
        padding: 0px 0% 3% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

    .topcontainer.pages {
        padding: 3% 3% 3% 3%;
    }

    .pages-head {
        margin-top: 40px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 2%;
        margin-top: 5%;
    }

    .top-info-container {
        flex-direction: row;
    }

    .top-info-col {
        padding-left: 0%;
    }

    .top-info {
        display: block;
        padding: 0% 0% 0% 5%;
    }

    .booking-form-bg {
        width: 80%;
        /*       min-height: 628px;*/
        height: fit-content;
        margin-top: 0px;
        padding: 15px;
        border: solid 1px black;
    }

    .top-img-panel {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }
    .dibea-logo {
        width: fit-content;
        padding: 5px 10px;
       /* border-radius: 20px;*/
        text-align: center;
    }

        .dibea-logo img {
            width: 50%;
        }
    .shop-logo-strip {
        width: 40%;
    }
    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size:50px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    .outer-col {
        width: 100%;
        padding: 0% 15% 0% 15%;
        display: flex;
        justify-content: center;
    }
    .choice-btn {
        font-size: 17px;
        width: 100%;
        padding: 20px;
    }
    a.choice-btn {
        padding: 20px;
    }
    .buy-btn {
        font-size: 20px;
        width: 100%;
        padding: 20px;
    }
    .book-form {
        width: 100%;
        padding: 0% 10% 0% 10%;
    }
    .back-btn {
        color: black !important;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: transparent !important /*#abce37*/;
        border: 1px solid black;
        line-height: 0;
    }
    .short-input {
        width: 60%;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 50px 20px 50px;
    }
    .ddbooking {
        height: 56px;
    }

    .ddbooking-btn {
        font-size: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: 35px;
        padding-top: 0px;
    }

    .ddbooking-field {
        font-size: 14px;
        height: 35px;
        padding-top: 2px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        margin-bottom: 20px;
    }

    .booking-btn {
        font-size: 18px;
        height: 76px;
        width: 15vw;
        max-width: 15vw;
        min-width: 15vw;
        border-color: #ced4da;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }

    .info-pic-col {
        text-align: center!important;
    }
    .row.colforward.app-rep {
        flex-direction: row;
        padding: 0% 10% 0% 10%;
        column-gap: 20em;
    }
    .info-pic-apprep {
        width: 100%;
        margin-top: 15%;
    }

    .info-pic-boiler {
        margin-top: 1%;
        width: 100%;
    }

    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }

    .info-prochem {
        width: 13%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }
    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 160px;
        height: 160px;
        background-color: transparent;
        border: 0px solid #ccc;
    }
    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: center;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 5%;
        margin-bottom: 0%;
    }

    .colforward {
        flex-direction: row;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 85%;
        margin-top: 5%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 40px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }

    #idxTopBannerTextInfoText {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        height: fit-content;
        margin-right: 0%;
    }
    .idx-inner {
        width: fit-content;
        padding: 2% 5%;
        margin-left: 20%;
        margin-top: 0%;
    }
    .idx-services-large {
        display: inline-flex;
    }
    .idx-services-small {
        display: none;
    }
    .servicesbar-large {
        width: 60%;
    }
    #idxShopFront {
        width: 100%;
        height: fit-content;
    }
    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin: 0% 0% 1% 0%;
        padding: 0% 0% 2% 0%;
    }
    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }
    .smallservicesbar-row .col {
        flex: 1 1 15%;
    }

    .smallservicesbar-img {
        width: 100%;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {
    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }


    .min-logo {
        width: 10%;
        padding-bottom: 3px;
    }

    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .areamap {
        margin-top: 0px;
        height: 540px;
        width: 30vw;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 5% 5% 5% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }

    .enq-container {
        padding: 2% 5% 0% 5%;
        justify-items: center;
        overflow: clip;
    }
    #confirmation-banner {
        width: 70%;
    }

        #confirmation-banner h2 {
            padding: 20px 50px 20px 50px;
            border-width: 1px;
            border-style: solid;
            border-color: #00b661;
        }

    #errorBanner {
        width: 70%;
    }

        #errorBanner h2 {
            padding: 20px 50px 20px 50px;
            border-width: 1px;
        }
    .main-row {
        padding: 0% 0% 0% 0%;
        row-gap: 100px;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        height: max-content;
        color: snow;
        text-align: center;
        width: 77.5%;
        padding: 25px;
    }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-body {
        flex: 1 1 30%;
        flex-direction: column;
    }



    .enq-cols {
        width: 50%;
        padding-left: 7%;
    }

    .enq-top-row {
        flex-direction: row;
    }

    .top-col-a {
        width: 45%;
        margin-left: 13%;
    }

    .top-col-b {
        width: 40%;
    }

    .enq-map-row {
        flex-direction: row;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: center;
        margin-left: 10%;
        width: 40%;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 5%;
    }

    .enq-text-body {
        padding-left: 5%;
    }

    .enq-email {
        display: block;
    }

    .enqrow-s {
        width: 100%;
        margin-top: 2.5%;
    }

    .enq-icon {
        width: 5%;
        text-align: center;
        max-width: 5%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 5%;
        margin-left: 7.5%;
    }

    .enqcol {
        width: 50%;
        font-size: 0.5rem;
        padding: 0% 0% 0% 0%;
        margin-left: 4%;
    }

    .enq-text {
        font-size: 12px;
    }

    .fa-enq {
        position: relative;
        top: -2px !important;
        padding: 7px !important;
        font-size: 42px !important;
        width: 55px !important;
    }

    .contact-container {
        align-items: baseline;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    .contact-field {
        width: 75%;
        height: 44px;
        padding: 0px 0px 0px 15px;
    }

    .contact-field-memo {
        width: 75%;
    }

    .contact-btn {
        height: 54px;
        width: 75%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: flex;
        margin-top: 2.5%;
        padding-bottom: 4%;
        width:80%;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 40%;
    }

    .contact-buttons {
        display: flex;
        padding-left: 50%;
    }

    .contact-form {
        width: 60%;
        max-width: 60%;
        padding: 7.5%;
        height: 100%;
    }
    .colgap-reverse.contact {
        padding-bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: baseline;
    }
    h1 a {
        font-size: 40px;
    }   
    .fa-contact {
        padding: 7px;
        font-size: 44px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 50px !important;
    }

    .googlemap {
        width: 100%;
        height: 20rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 25px;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 2% 30% 2% 30%;
        margin-top: 0px;
        gap: 20px;
    }
    .engineer-map {
        width: 60vw;
        height: 60vh;
    }

    #engineer-map-top {
        padding-top: 5%;
    }
    .sto-topcontainer {
        position: relative;
        height: 1080px;
    }

        .sto-topcontainer .idx-top-row {
            margin-top: 60px;
        }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 26px;
        }
    .hc-dib-text {
        font-size: 12px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 7.5%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size:25px;
    }
        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }
    
    .sto-top-prod {
        display: flex;
        justify-content: space-evenly;
        align-content: space-evenly;
        gap: 100px;
        flex-direction: row;
    }
        .sto-top-prod .item {
            width: 50%;
        }
    .main-image {
        width: 80%;
    }
    .small-image {
        width: 100px;
        border: solid 0px black;
    }
    .sto-top-info {
      
    }

        .sto-top-info .content {
          
        }
    .product-display-col {
        flex-direction: row;
        display: flex;
    }
    .product-details {
        margin-left: 5%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

        .product-details td {
            font-size: 16px;
            padding: 3px;
        }
    .gallery-wrapper {
        position: relative;
        width: 40%;
    }
}

@media only screen and (max-width: 2560px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 20px 0px 20px 10px;
    }

        .navbar div a img {
            /* height: 20%; */
            width: 260px;
            /* border-radius: 10%; */
        }

    .navbar-brand {
        padding: 0px 0px 0px 15px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 18px;
    }

    .nav-soc-col {
        display: none;
    }

    .navbar-expand-xxl .navbar-collapse {
        margin-left: 0%;
    }

    ul {
        padding-left: 1rem;
    }

    li {
        color: snow;
        font-size: 14px;
    }

    .index-list li a {
        font-size: 14px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 15px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 20px !important;
        transition: all ease-out .2s;
    }

    li img {
        height: 12px;
        width: 1rem;
        /* filter: invert(73%) sepia(76%) saturate(412%) hue-rotate(25deg) brightness(96%) contrast(89%);*/
    }

    button img {
        height: 12px;
        width: 1rem;
        /*filter: invert(73%) sepia(76%) saturate(412%) hue-rotate(25deg) brightness(96%) contrast(89%);*/
    }

    .dropdown-item {
        font-size: 16px;
        font-weight: 200;
    }

    label {
      /*  color: snow;*/
        font-size: 16px;
    }

    a {
        font-size: 14px;
        text-decoration: none;
    }

    p {
        font-size: 16px;
        font-weight: lighter;
    }

    span {
        font-size: 12px;
    }

    h1 {
        font-size: 40px;
        font-weight: 200;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 10px;
    }

    #idxTopBannerText h1 {
        font-size: 40px;
    }

    #idxTopBannerText h2 {
        font-size: 30px;
    }

    #idxTopBannerText h3 {
        font-size: 20px;
    }

    .idx-services-small {
        display: none;
    }

    .idx-services-large {
        display: inline-flex;
    }

    .idx-title {
        position: absolute;
        margin-top: 70px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    #idxTopBanner {
        width: 100%;
        height: 700px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 200px 0px 100px 0px;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-top-info h3 {
        font-weight: 100 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }

    .idx-inner {
        width: fit-content;
        padding: 2% 5%;
        margin-left: 0%;
        margin-top: 0%;
    }
    .idx-services-small {
        display: none;
    }
    #idxShopFront {
        width: 100%;
        height: fit-content;
    }

    .show-sm {
        display: block
    }

    .carousel-row {
        height: 30%;
        width: 100%;
    }

    .carousel-caption {
        padding: 0% 0% 7.5% 0%;
        display: flex;
        justify-content: center;
    }

    .carousel-caption-footer {
        border-style: solid;
        border-width: 1px;
        width: fit-content;
        height: fit-content;
        padding: 5px 15px 5px 15px;
        display: flex;
        text-align: center;
        font-size: 36px !important;
        position: relative;
        /* right: 15%;*/
        top: 100%;
        left: 0%;
    }

    .carousel-indicators {
        bottom: 4.5%;
        margin-bottom: 0px;
    }


        .carousel-indicators [data-bs-target] {
            height: 15px;
            width: 100px;
        }

    .topcontainer {
        padding: 0% 0% 0% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

        .topcontainer.pages {
            padding: 0px 20px 50px 0px;
            min-height: 61vh;
        }

    .pages-head {
        margin-top: 50px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 0%;
        margin-top: 5%;
    }

    .top-info-container {
        flex-direction: row;
    }

    .top-info-col {
        padding-left: 0%;
    }

    .top-info {
        display: block;
        padding: 0% 0% 0% 0%;
    }

        .top-info.main {
            margin-top: 0%;
            padding-top: 0%;
            padding-left: 0%;
            padding-bottom: 5%;
            display: flex;
            width: 60%;
            justify-content: center;
            flex-direction: column;
        }
            .top-info.main h1 {
                line-height: 1.5;
                position: relative;
                top: 15%;
                width: 100%;
                color: azure;
                text-align: left;
                background-color: #353c40;
                padding: 1% 7.5% 2% 7.5%;
                margin-left: 0%;
            }

            .top-info.main h2 {
                text-align: left;
                padding: 1% 7.5% 1% 7.5%;
                line-height: 1.5;
                position: relative;
                width: fit-content;
                color: azure;
            }
    .top-booking-form {
    }

    .booking-form-bg {
        width: 65%;
        /* min-height: 628px; */
        height: fit-content;
        margin-top: 0px;
        padding: 15px;
        border: solid 1px black;
    }

    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }

    .top-img-panel {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }

    .dibea-logo {
        width: fit-content;
        padding: 5px 10px;
       /* border-radius: 20px;*/
        text-align: center;
    }

        .dibea-logo img {
            width: 50%;
        }

    .shop-logo-strip {
        width: 40%;
    }

    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size: 48px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    .outer-col {
        width: 100%;
        padding: 0% 25% 0% 5%;
        display: flex;
        justify-content: center;
    }

    #postcodeInput {
        width: 22vw !important;
        max-width: 22vw !important;
        min-width: 22vw;
    }

    .choice-btn {
        font-size: 17px;
        width: 100%;
        padding: 20px;
    }

    a.choice-btn {
        padding: 20px;
    }

    .buy-btn {
        font-size: 20px;
        width: 100%;
        padding: 20px;
    }

    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw !important;
        min-width: 25vw;
    }

    .book-form {
        width: 100%;
        padding: 0% 5% 0% 5%;
    }

    .back-btn {
        color: black !important;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: transparent !important /*#abce37*/;
        border: 1px solid black;
        line-height: 0;
    }

    .short-input {
        width: 80%;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 50px 20px 50px;
    }

    #postcodeInput {
        width: 8vw !important;
        max-width: 8vw !important;
        min-width: 7vw;
    }

    .ddbooking {
        height: 35px;
        margin-bottom: 10px;
    }

    .ddbooking-btn {
        font-size: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: 35px;
        padding-top: 0px;
    }

    .ddbooking-field {
        font-size: 14px;
        height: 35px;
        padding-top: 2px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        margin-bottom: 10px;
    }

    .txt-font {
        font-family: 'Courier New';
        font-size: 20px;
        border-right: 0px;
        border-top: 0px;
        border-left: 0px;
        border-bottom: 1px ridge gray;
    }

    .booking-btn {
        font-size: 14px;
        height: 25px;
        width: 6vw;
        max-width: 6vw;
        min-width: 6vw;
        border-color: #ced4da;
    }

    #frmBooking {
        width: 100%;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }

    .info-pic-col {
        text-align: center;
    }

    .info-pic-apprep {
        width: 75%;
        margin-top: 0%;
    }

    .row.colforward.app-rep {
        flex-direction: row;
        padding: 0% 10% 0% 10%;
        column-gap: 20em;
    }

    .idx-about-info {
        padding: 0% 10% 0% 10%;
    }

    .reviews-div {
        padding: 0% 10% 0% 10%;
    }

    .info-pic-carpet {
        width: 35%;
    }

    .info-pic-boiler {
        margin-top: 1%;
        width: 100%;
    }

    .gas-logo {
        margin-top: 0%;
        width: auto;
        height: 120px;
        margin-right: 20px;
    }

    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }

    .info-prochem {
        width: 35%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }

    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 60px;
        height: 80px;
        background-color: transparent;
        border: 0px solid #ccc;
    }

    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: center;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 5%;
        margin-bottom: 0%;
    }

    .colforward {
        flex-direction: row;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 40%;
        margin-top: 5%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 30px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }

    .smallservicesbar {
        display: block;
        width: 100%;
    }

    .servicesbar-large {
        width: 60%;
    }

    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 1% 0%;
    }

        .smallservicesbar-col a h3 {
            font-size: 20px;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .smallservicesbar-col #CleaningButton h3 {
            font-size: 20px;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .cleaningMenu a {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
         .cleaningMenu a {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .cleaningMenu h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .cleaningMenu h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }

    .smallservicesbar-row .col {
        flex: 1 1 25%;
    }

    .smallservicesbar-img {
        width: 5vw;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {

    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }

    .min-logo {
        width: 8%;
        padding-bottom: 3px;
    }

    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .areamap {
        margin-top: 0px;
        height: 440px;
        width: 30vw;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 2% 5% 2% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }

    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    #confirmation-banner {
        width: 70%;
    }

        #confirmation-banner h2 {
            padding: 20px 50px 20px 50px;
            border-width: 1px;
            border-style: solid;
            border-color: #00b661;
        }

    #errorBanner {
        width: 70%;
    }

        #errorBanner h2 {
            padding: 20px 50px 20px 50px;
            border-width: 1px;
        }

    .main-row {
        padding: 0% 0% 0% 0%;
        row-gap: 100px;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        height: max-content;
        color: black;
        text-align: center;
        width: 77.5%;
        padding: 25px;
    }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-body {
        flex: 1 1 30%;
        flex-direction: column;
    }

    .enq-cols {
        width: 50%;
        padding-left: 20%;
    }

    .enq-top-row {
        flex-direction: row;
    }

    .top-col-a {
        width: 45%;
        margin-left: 13%;
    }

    .top-col-b {
        width: 40%;
    }

    .enq-map-row {
        flex-direction: row;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: center;
        margin-left: 1%;
        width: 60%;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 2.5%;
    }

    .enq-text-body {
        padding-left: 5%;
    }

    .enq-email {
        display: block;
    }

    .enqrow-s {
        width: 100%;
        margin-top: 2.5%;
    }

    .enq-icon {
        width: 5%;
        text-align: center;
        max-width: 5%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 5%;
        margin-left: 7.5%;
    }

    .enqcol {
        width: 50%;
        font-size: 0.5rem;
        padding: 0% 0% 0% 0%;
        margin-left: 4%;
    }

    .enq-text {
        font-size: 12px;
    }

    .fa-enq {
        position: relative;
        top: -2px !important;
        padding: 7px !important;
        font-size: 42px !important;
        width: 55px !important;
    }


    .contact-container {
        align-items: baseline;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    .contact-field {
        width: 75%;
        height: 44px;
        padding: 0px 0px 0px 15px;
    }

    .contact-field-memo {
        width: 75%;
    }


    .contact-btn {
        height: 54px;
        width: 75%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: flex;
        margin-top: 3%;
        padding-bottom: 4%;
        width:80%;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 40%;
    }

    .contact-buttons {
        display: flex;
        padding-left: 50%;
    }

    .contact-form {
        width: 75%;
        max-width: 75%;
        padding: 5%;
    }
    .colgap-reverse.contact {
        padding-bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: baseline;
    }
    h1 a {
        font-size: 40px;
    }

    h1 .email {
        font-size: 32px;
    }

    .fa-contact {
        padding: 7px;
        font-size: 44px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 50px !important;
    }

    .googlemap {
        width: 65%;
        height: 20rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 26px;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 2% 30% 2% 30%;
        margin-top: 0px;
        gap: 20px;
    }

    #mapMessage {
        margin-top: 1%;
    }

    #engineer-map-top {
        padding-top: 5%;
    }

    .engineer-map {
        width: 74vw;
        height: 800px;
    }

    .sto-topcontainer {
        position: relative;
        height: 996px;
    }

        .sto-topcontainer .idx-top-row {
            margin-top: 60px;
        }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 26px;
        }


    .hc-dib-text {
        font-size: 12px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 7.5%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 22px;
    }
        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }
    .sto-top-prod {
        display: flex;
        justify-content: space-evenly;
        align-content: space-evenly;
        gap: 100px;
        flex-direction: row;
    }
        .sto-top-prod .item {
            width: 50%;
        }

        .main-image {
            width: 80%;
        }

    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 2rem;
    }

    .sto-mailnow-field {
        width: 22vw;
    }
    .small-image {
        width: 100px;
        border: solid 0px black;
    }
    .product-display-col {
        flex-direction: row;
        display: flex;
    }
    .product-details {
        margin-left: 5%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

        .product-details td {
            font-size: 14px;
            padding: 3px;
        }
    .gallery-wrapper {
        position: relative;
        width: 40%;
    }
}

@media only screen and (max-width: 1920px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 15px 0px 15px 0px;
    }

    .navbar-collapse {
        padding: 0px 0px 0px 0px;
    }

    .navbar-brand {
        padding: 0px 0px 5px 25px;
    }

    .navbar div a img {
        /* height: 20%; */
        width: 260px;
        /* border-radius: 10%; */
    }

    .nav-link {
        font-weight: 100;
        font-size: 14px;
    }

    .btn-contact {
        border: none;
        padding: 0px !important;
    }

    .nav-soc-col {
        display: none;
    }

    ul {
        padding-left: 1rem;
    }

    li {
        color: snow;
        font-size: 12px;
        font-weight: 100;
    }

    .index-list li a {
        font-size: 13px;
        opacity: 50%;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 12px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 18px !important;
        transition: all ease-out .2s;
        opacity: 100% !important;
    }

    li img {
        height: 14px;
        width: 1rem;
        /* filter: invert(43%) sepia(83%) saturate(2371%) hue-rotate(125deg) brightness(99%) contrast(101%);*/
    }

    button img {
        height: 14px;
        width: 1rem;
        /*filter: invert(43%) sepia(83%) saturate(2371%) hue-rotate(125deg) brightness(99%) contrast(101%);*/
    }

    .dropdown-item {
        font-size: 12px;
        font-weight: 200;
    }

    label {
        /*color: snow;*/
        font-size: 14px;
        font-weight: 200;
    }

    a {
        font-size: 14px;
        text-decoration: none;
    }

    p {
        font-size: 14px;
        font-weight: lighter;
    }

    span {
        font-size: 16px;
    }

    h1 {
        font-size: 36px;
        font-weight: 200;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 16px;
    }

    h4 {
        font-size: 12px;
    }

    h5 {
        font-size: 10px;
    }

    .idx-services-small {
        display: none;
    }

    .idx-services-large {
        display: inline-flex;
    }

    .idx-title {
        position: absolute;
        margin-top: 0px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    #idxTopBanner {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 155px 0px 0px 0px;
    }

        #idxTopBannerText h1 {
            font-size: 32px;
        }

        #idxTopBannerText h2 {
            font-size: 22px;
        }

        #idxTopBannerText h3 {
            font-size: 14px;
        }

    .idx-inner {
        width: fit-content;
        padding: 2% 9%;
        margin-left: 0%;
        margin-top: 0%;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }

    #idxShopFront {
        width: 100%;
        height: fit-content;
    }

    .show-sm {
        display: block
    }

    .topcontainer {
        padding: 0px 0% 0% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

        .topcontainer.pages {
            padding: 0% 3% 1% 3%;
            min-height: 45vh;
        }

    .pages-head {
        margin-top: 100px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 2%;
        margin-top: 0%;
    }

    .top-info-container {
        flex-direction: row !important;
    }

    .top-info-col {
        padding-left: 0%;
    }

    .top-info {
        padding: 0% 0% 0% 0%;
        display: block;
    }

        .top-info.main {
            margin-top: 0%;
            padding-top: 0%;
            padding-left: 0%;
            padding-bottom: 5%;
            display: flex;
            width: 60%;
            justify-content: center;
            flex-direction: column;
        }
            .top-info.main h1 {
                line-height: 1.5;
                position: relative;
                top: 15%;
                width: 100%;
                color: azure;
                text-align: left;
                background-color: #353c40;
                padding: 2.5% 17.5% 2% 7.5%;
                margin-left: 0%;
            }

            .top-info.main h2 {
                text-align: left;
                padding: 1% 7.5% 2% 7.5%;
                line-height: 1.5;
                position: relative;
                width: fit-content;
                color: azure;
            }
    .top-booking-form {
    }

    .booking-form-bg {
        width: 65%;
        height: fit-content;
        margin-top: 0px;
        padding: 15px;
    }

    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }

    .top-img-panel {
        position: relative;
        width: 75%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }

    .dibea-logo {
        width: 65%;
        padding: 5px 10px;
        /* border-radius: 20px;*/
        text-align: center;
    }

        .dibea-logo img {
            width: 40%;
        }

    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 28%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size: 30px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    .outer-col {
        width: 100%;
        padding: 0% 10% 0% 5%;
        display: flex;
        justify-content: center;
    }

    #postcodeInput {
        width: 22vw !important;
        max-width: 22vw !important;
        min-width: 22vw;
    }

    .choice-btn {
        font-size: 14px;
        width: 100%;
        padding:10px;
    }

    a.choice-btn {
        padding: 10px 5px;
    }

    .buy-btn {
        font-size: 25px;
        width: 100%;
        padding: 10px;
    }

    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw !important;
        min-width: 25vw;
    }

    .book-form {
        width: 100%;
        padding: 5% 2.5% 0% 2.5%;
    }

    .back-btn {
        color: black !important;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: transparent !important /*#abce37*/;
        border: 1px solid black;
        line-height: 0;
    }

    .short-input {
        width: 70%;
    }

    .ddbooking {
        height: 25px;
        margin-bottom: 5px;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 30px 20px 30px;
    }

    .ddbooking-field {
        font-size: 12px;
        height: 25px;
        padding-top: 4px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        margin-bottom: 5px;
    }

    .ddbooking-btn {
        font-size: 12px;
        height: 25px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        padding-top: 0px !important;
        border-color: #ced4da;
    }

    .booking-btn {
        font-size: 18px;
        height: 50px;
        width: 18vw;
        max-width: 18vw;
        min-width: 18vw;
        border-color: #ced4da;
    }

    #frmBooking {
        width: 100%;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }

    .info-pic-col {
        text-align: center;
    }

    .info-pic-apprep {
        width: 75%;
        margin-top: 15%;
    }

    .row.colforward.app-rep {
        flex-direction: row;
        padding: 0% 10% 0% 10%;
        column-gap: 10em;
    }

    .info-pic-boiler {
        margin-top: 0%;
        width: 100%;
    }

    .gas-logo {
        margin-top: 0%;
        width: auto;
        height: 120px;
        margin-right: 20px;
    }

    .info-pic-appclean {
        width: 40%;
    }

    .info-pic-carpet {
        width: 35%;
    }

    .info-pic {
        width: 80%
    }

    .info-prochem {
        width: 28%;
        border-radius: 0%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }

    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 60px;
        height: 60px;
        background-color: transparent;
        border: 0px solid #ccc;
    }

    .chk-logo {
        margin-top: 13%;
        width: 100%;
        justify-content: center;
    }

    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }


    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: center;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 10%;
        margin-bottom: 0%;
    }

    .colforward {
        flex-direction: row;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 50%;
        margin-top: 0%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 1px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }

    .smallservicesbar {
        display: block;
        width: 100%;
    }

    .servicesbar-large {
        width: 60%;
    }

    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 1% 0%;
    }

        .smallservicesbar-col a h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .smallservicesbar-col #CleaningButton h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .cleaningMenu a {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 5% 2%;
        }
        .cleaningMenu h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }

    .smallservicesbar-row .col {
        flex: 1 1 25%;
    }

    .smallservicesbar-img {
        width: 85%;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {
    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }

    .min-logo {
        width: 10%;
        padding-bottom: 3px;
    }

    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .areamap {
        margin-top: 0px;
        height: 440px;
        width: 40vw;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 2% 5% 2% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }

    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    .main-row {
        padding: 0% 0% 0% 0%;
        row-gap: 20px;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        height: max-content;
        color: snow;
        text-align: center;
        width: 77.5%;
        padding: 25px;
    }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-body {
        flex: 1 1 30%;
        flex-direction: column;
    }



    .enq-cols {
        width: 50%;
        padding-left: 7.5%;
    }

    .enq-top-row {
        flex-direction: row;
    }

    .top-col-a {
        width: 45%;
        margin-left: 13%;
    }

    .top-col-b {
        width: 40%;
    }

    .enq-map-row {
        flex-direction: row;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: center;
        margin-left: 10%;
        width: 40%;
        padding: 0px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enq-text-body {
        padding-left: 5%;
    }

    .enq-email {
        display: block;
    }

    .enqrow-s {
        width: 100%;
        margin-top: 2.5%;
    }

    .enq-icon {
        width: 5%;
        text-align: center;
        max-width: 5%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 5%;
        margin-left: 7.5%;
    }

    .enqcol {
        width: 50%;
        font-size: 0.5rem;
        padding: 0% 0% 0% 0%;
        margin-left: 6%;
    }

    .enq-text {
        font-size: 12px;
    }

    .fa-enq {
        position: relative;
        top: -2px !important;
        padding: 7px !important;
        font-size: 42px !important;
        width: 55px !important;
    }

    .contact-container {
        align-items: baseline;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    #confirmation-banner {
        width: 70%;
    }

        #confirmation-banner h2 {
            padding: 20px 50px 20px 50px;
            border-width: 1px;
            border-style: solid;
            border-color: #00b661;
        }

    #errorBanner {
        width: 70%;
    }

        #errorBanner h2 {
            padding: 20px 50px 20px 50px;
            border-width: 1px;
        }

    .contact-field {
        width: 55%;
        height: 44px;
        padding: 0px 0px 0px 15px;
    }

    .contact-field-memo {
        width: 55%;
        padding: 10px 0px 0px 15px;
    }

    .contact-btn {
        height: 54px;
        width: 55%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: flex;
        padding-bottom: 4%;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 27%;
    }

    .contact-buttons {
        display: flex;
        gap: 5%;
        justify-content: center;
        padding-left: 15%;
    }

    .contact-form {
        width: 75%;
        max-width: 75%;
        padding: 5%;
    }

    h1 .email {
        font-size: 26px;
    }

    .fa-contact {
        padding: 7px;
        font-size: 44px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 20px !important;
    }

    .googlemap {
        width: 100%;
        height: 15rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 24px;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 1% 20% 1% 25%;
        margin-top: 0px;
        gap: 20px;
    }

    #mapMessage {
        margin-top: 1%;
    }

    #engineer-map-top {
        padding-top: 7%;
    }

    .engineer-map {
        width: 74vw;
        height: 700px;
    }

    .sto-topcontainer {
        position: relative;
        height: 750px;
    }

        .sto-topcontainer .idx-top-row {
            margin-top: 60px;
        }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 26px;
        }

    .hc-dib-text {
        font-size: 12px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 10%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 20px;
    }
        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }
    .sto-top-prod {
        display: flex;
        justify-content: space-evenly;
        align-content: space-evenly;
        gap: 100px;
        flex-direction: row;
    }
   

    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 2rem;
    }

    .sto-mailnow-field {
        width: 25vw;
    }
    .small-image {
        width: 100px;
        border: solid 0px black;
    }
    .product-display-col {
        flex-direction: row;
        display: flex;
    }
    .product-details {
        margin-left: 5%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

        .product-details td {
            font-size: 14px;
            padding: 3px;
        }
    .gallery-wrapper {
        position: relative;
        width: 40%;
    }
}

@media only screen and (max-width: 1399.9px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar-nav {
        padding-left: 5%
    }

    .navbar {
        padding: 8px 0px 5px 0px;
    }

        .navbar div a img {
            /* height: 20%; */
            width: 250px;
            /* border-radius: 10%; */
        }

    .navbar-collapse {
        background-color: #323232;
        padding: 10px 5% 10px 10px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 12px;
    }

    .navbar-toggler {
        margin-right: 2.5%;
        width: 55px;
        height: 40px;
    }

    .navbar-toggler-icon {
    }

    .nav-soc-exp {
        display: none;
    }

    .nav-soc-col {
        display: block !important;
        padding-left: 5%;
    }

    ul {
        padding-left: 18px;
    }

    li {
        color: snow;
        font-size: 12px;
    }

    .index-list li a {
        font-size: 12px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 14px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 18px !important;
        transition: all ease-out .2s;
    }

    .dropdown-item {
        font-size: 12px;
        font-weight: 200;
    }

    label {
        /*color: snow;*/
        font-size: 14px;
    }

    a {
        font-size: 12px;
        text-decoration: none;
    }

    p {
        font-size: 12px;
        font-weight: lighter;
    }

    span {
        font-size: 16px;
    }

    h1 {
        font-size: 28px;
        font-weight: 200;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 14px;
    }

    h5 {
        font-size: 12px;
    }

    .idx-services-small {
        display: none;
    }

    .idx-services-large {
        display: inline-flex;
    }

    .idx-title {
        position: absolute;
        margin-top: 0px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    #idxTopBanner {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 150px 0px 100px 0px;
    }

        #idxTopBannerText h1 {
            font-size: 32px;
        }

        #idxTopBannerText h2 {
            font-size: 22px;
        }

        #idxTopBannerText h3 {
            font-size: 14px;
        }

    .idx-inner {
        width: fit-content;
        padding: 2% 9%;
        margin-left: 0%;
        margin-top: 0%;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }

    .reviews-div {
        padding: 0% 0% 0% 0%;
    }

    #idxShopFront {
        width: 100%;
        height: fit-content;
    }

    .show-sm {
        display: block
    }

    .carousel-row {
        height: 30%;
        width: 100%;
    }

    .carousel-caption {
        padding: 0% 0% 10% 0%;
        display: flex;
        justify-content: center;
    }

    .carousel-caption-footer {
        border-style: solid;
        border-width: 1px;
        width: fit-content;
        height: fit-content;
        padding: 3px 10px 3px 10px;
        display: flex;
        text-align: center;
        font-size: 25px !important;
        position: relative;
        /* right: 15%;*/
        top: 155%;
        left: 0%;
    }

    .carousel-indicators {
        bottom: 2.5%;
        margin-bottom: 0px;
    }

        .carousel-indicators [data-bs-target] {
            height: 10px;
            width: 50px;
        }

    .topcontainer {
        padding: 0% 0% 3% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

        .topcontainer.pages {
            padding: 0% 3% 1% 3%;
            min-height: 40vh;
        }

    .pages-head {
        margin-top: 75px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 0%;
    }

    .top-info-container {
        flex-direction: row;
    }

    .top-info-col {
        padding-left: 0%;
    }

    .top-info {
        display: block;
    }

        .top-info.main {
            margin-top: 0%;
            padding-top: 0%;
            padding-left: 0%;
            padding-bottom: 5%;
            width: 60%;
            justify-content: center;
            flex-direction: column;
        }

            .top-info.main h1 {
                line-height: 1.5;
                position: relative;
                top: 15%;
                width: 100%;
                color: azure;
                text-align: left;
                background-color: #353c40;
                padding: 3.5% 7.5% 1% 7.5%;
                margin-left: 0%;
            }

            .top-info.main h2 {
                text-align: left;
                padding: 1% 7.5% 2% 7.5%;
                line-height: 1.5;
                position: relative;
                width: fit-content;
                color: azure;
            }

    .top-booking-form {
    }

    .booking-form-bg {
        width: 75%;
        height: fit-content;
        margin-top: 0px;
        padding: 20px;
    }

    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }

    .top-img-panel {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }
    .dibea-logo {
        width: 90%;
        padding: 5px 10px;
        /* border-radius: 20px;*/
        text-align: center;
    }
    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size: 34px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    .outer-col {
        width: 100%;
        padding: 0% 1% 0% 1%;
        display: flex;
        justify-content: center;
    }

    #postcodeInput {
        width: 22vw !important;
        max-width: 22vw !important;
        min-width: 22vw;
    }

    .choice-btn {
        font-size: 16px;
        width: 100%;
        padding: 10px;
    }

    a.choice-btn {
        padding: 10px;
        padding: 20px 5px;
    }

    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw !important;
        min-width: 25vw;
    }

    .book-form {
        width: 100%;
        padding: 1% 0% 0% 0%;
    }

    .back-btn {
        color: black !important;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: transparent !important /*#abce37*/;
        border: 1px solid black;
        line-height: 0;
    }

    .short-input {
        width: 90%;
    }

    .ddbooking {
        height: 25px;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 30px 20px 30px;
    }

    .ddbooking-field {
        font-size: 12px;
        height: 25px;
        padding-top: 3px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .ddbooking-btn {
        font-size: 12px;
        height: 25px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        padding-top: 3px;
        border-color: #ced4da;
    }

    .booking-btn {
        font-size: 18px;
        height: 50px;
        width: 23vw;
        max-width: 23vw;
        min-width: 23vw;
        border-color: #ced4da;
    }

    #frmBooking {
        width: 100%;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }

    .info-pic-apprep {
        margin-top: 50px;
        width: 100%;
    }

    .gas-logo {
        margin-top: 0%;
        width: auto;
        height: 120px;
        margin-right: 2%;
    }

    .row.colforward.app-rep {
        flex-direction: column;
        padding: 0% 15% 0% 15%;
    }

    .row.colforward > .col.mb-5 > .idx-about-info {
        padding: 0% 5% 0% 5%;
    }

        .row.colforward > .col.mb-5 > .idx-about-info > #idxShopFront {
            padding: 0% 5% 0% 5%;
        }

    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }

    .info-prochem {
        width: 30%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }

    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 65px;
        height: 70px;
        background-color: transparent;
        border: 0px solid #ccc;
    }

    .info-pic-boiler {
        margin-top: 15%;
        width: 100%;
    }

    .info-pic-carpet {
        width: 60%;
    }

    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: center;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 12%;
        margin-bottom: 3%;
    }

    .colforward {
        flex-direction: row;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 85%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 10px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }

    .smallservicesbar {
        display: block;
        width: 90%;
    }

    .smallservicesbar-container {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 20px 0px 15px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 2% 0%;
    }

        .smallservicesbar-col a h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }

        .smallservicesbar-col #CleaningButton h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }

    .smallservicesbar-row .col {
        flex: 1 1 20%;
    }

    .smallservicesbar-img {
        width: 7vw;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }

        .min-logo {
        width: 8%;
        padding-bottom: 3px;
    }

    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .areamap {
        margin-top: 45px;
        height: 440px;
        width: 40vw;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 2.5% 5% 5% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }

    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    .main-row {
        padding: 0% 0% 0% 0%;
    }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-body {
        flex: 1 1 30%;
        flex-direction: column;
    }

    .enqcol {
        width: 50%;
        font-size: 0.5rem;
        padding: 0% 0% 0% 0%;
        margin-left: 0%;
    }

    .enq-cols {
        width: 50%;
        padding-left: 5%;
    }

    .enq-top-row {
        flex-direction: row;
    }

    .top-col-a {
        width: 50%;
        margin-left: 40px;
    }

    .top-col-b {
        width: 40%;
    }

    .enq-map-row {
        flex-direction: row;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: left;
        margin-left: 0%;
        width: 50%;
        text-align: center;
        padding-left: 60px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enq-text-body {
        padding-left: 5%;
    }

    .enq-email {
        display: block;
        font-size: 24px;
    }

    .enq-icon {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .enq-icon-top {
        width: 20%;
        text-align: left;
        max-width: 20%;
        padding-left: 7.5%;
        margin-left: 10%;
    }

    .enqrow-s {
        width: 100%;
        margin-top: 2.5%;
    }

    .enq-text {
        font-size: 12px;
    }

    .fa-enq {
        position: relative;
        top: -2px !important;
        padding: 7px !important;
        font-size: 36px !important;
        width: 55px !important;
    }

    .contact-container {
        align-items: baseline;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    .contact-field {
        width: 75%;
        height: 44px;
    }

    .contact-field-memo {
        width: 75%;
    }

    .contact-btn {
        height: 54px;
        width: 75%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: flex;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 20%;
    }

    .contact-buttons {
        display: flex;
        justify-content: center;
        padding: 0% 0% 0% 12.5%;
        gap: 10%;
    }

    .contact-form {
        width: 75%;
        max-width: 75%;
        padding: 5%;
    }

    h1 .email {
        font-size: 20px;
    }

    .fa-contact {
        padding: 7px;
        font-size: 35px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px !important;
    }

    .googlemap {
        width: 100%;
        height: 15rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 28px;
        width: 35px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 2% 20% 2% 20%;
        margin-top: 0px;
        gap: 20px;
    }

    #mapMessage {
        margin-top: 3%;
    }

    #engineer-map-top {
        padding-top: 7%;
    }

    .engineer-map {
        width: 74vw;
        height: 600px;
    }

    .sto-topcontainer {
        position: relative;
        height: 750px;
    }

        .sto-topcontainer .idx-top-row {
            margin-top: 60px;
        }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 26px;
        }
    .hc-dib-text {
        font-size: 12px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 7.5%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 20px;
    }
        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }
    .sto-top-prod {
        display: flex;
        justify-content: space-evenly;
        align-content: space-evenly;
        gap: 100px;
        flex-direction: column;
    }
        .sto-top-prod .item {
            width: 100%;
        }
    .main-image {
        width: 80%;
    }
    .small-image {
        width: 100px;
        border: solid 0px black;
    }
    .product-details {
        margin-left: 5%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

        .product-details td {
            font-size: 20px;
            padding: 3px;
        }
    .product-display-col {
        flex-direction: column;
        display: flex;
    }
    .gallery-wrapper {
        position: relative;
        width: 100%;
    }
}

@media only screen and (max-width: 1200px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 5px 0px 5px 0px;
    }

    .navbar-brand {
        padding: 0px 0px 0px 20px;
    }

    .navbar div a img {
        /* height: 20%; */
        width: 180px;
        /* border-radius: 10%; */
    }

    .navbar-collapse {
        background-color: #323232;
        padding: 10px 5% 10px 10px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 20px;
    }

    .navbar-toggler {
        margin-right: 2.5%;
        width: 45px;
        height: 35px;
    }

    .navbar-toggler-icon {
    }

    .nav-soc-exp {
        display: none;
    }

    .nav-soc-col {
        display: block;
    }

    ul {
        padding-left: 1rem;
    }

    li {
        color: snow;
        font-size: 12px;
        font-weight: 100;
    }

    .index-list li a {
        font-size: 12px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 12px;
    }
    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 12px !important;
        transition: all ease-out .2s;
    }

    .dropdown-item {
        font-size: 12px;
        font-weight: 200;
    }

    label {
        font-size: 12px;
    }

    a {
        font-size: 10px;
        text-decoration: none;
    }

    p {
        font-size: 18px;
        font-weight: lighter;
    }

    span {
        font-size: 12px;
    }

    h1 {
        font-size: 28px;
        font-weight: 200;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    .idx-services-small {
        display: inline-flex;
    }

    .idx-services-large {
        display: none;
    }

    #idxTopBannerTextInfoText {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        height: fit-content;
        margin-right: 0%;
    }

    .idx-title {
        position: absolute;
        margin-top: 0px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    #idxTopBanner {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 125px 0px 100px 0px;
    }

        #idxTopBannerText h2 {
            font-size: 26px;
        }

        #idxTopBannerText h3 {
            font-size: 16px;
        }

    .idx-inner {
        width: fit-content;
        padding: 2% 9%;
        margin-left: 0%;
        margin-top: 0%;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }
    .reviews-div {
        padding: 0% 0% 0% 0%;
    }
    #idxShopFront {
        width: 100%;
        height: fit-content;
    }
    .show-sm {
        display: block
    }

    .carousel-caption {
        padding: 0% 0% 10% 0%;
        display: flex;
        justify-content: center;
    }

    .topcontainer {
        padding: 0% 0% 5% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

    .topcontainer.pages {
        padding: 0% 0% 0% 0%;
        margin-top: 0px !important;
        min-height: 20vh;
    }

    .pages-head {
        margin-top: 75px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 2%;
    }

    .top-info-container {
        flex-direction: column;
    }

    .top-info-col {
        padding-left: 1%;
    }

    .top-info {
        display: block;
        padding: 0% 0% 0% 0%;
    }

        .top-info.main {
            margin-top: 0%;
            padding-top: 11.5%;
            padding-left: 0%;
            padding-right: 0%;
            padding-bottom: 5%;
            display: flex;
            width: 80%;
            justify-content: center;
            flex-direction: column;
        }
            .top-info.main h1 {
                font-size: 38px;
                line-height: 1.5;
                position: relative;
                top: 8%;
                width: 100%;
                color: azure;
                text-align: left;
                background-color: #353c40;
                padding: 0% 7.5% 2% 7.5%;
                margin-left: 0%;
            }

            .top-info.main h2 {
                text-align: left;
                padding: 1% 7.5% 2% 7.5%;
                line-height: 1.5;
                position: relative;
                width: fit-content;
                color: azure;
            }

    .booking-form-bg {
        width: 100vw;
        height: fit-content;
        margin-top: 0px;
        padding: 50px 15%;
        border: none;
    }

    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }

    .top-img-panel {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }

    .dibea-logo {
        width: 50vw;
        font-size: 20px;
        text-align: center;
        color: white;
        padding: 5px 10px;
        /* border-radius: 20px;*/
    }

    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size: 24px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    #frmBooking {
        width: 100%;
    }

    .outer-col {
        width: 100%;
        padding: 0% 0% 0% 0%;
        display: flex;
        justify-content: center;
    }


    .book-form {
        width: 100%;
        padding: 0% 0% 0% 0% !important;
    }
    .back-btn {
        color: white;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: #abce37;
        border: 1px solid black;
        line-height: 0;
    }
    .short-input {
        width: 80%;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 30px 20px 30px;
    }

    #postcodeInput {
        width: 35vw !important;
        max-width: 35vw !important;
        min-width: 35vw;
    }

    .choice-btn {
        font-size: 16px;
        width: 100%;
        padding: 20px;
    }

    a.choice-btn {
        padding: 20px; 5px
    }

    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw !important;
        min-width: 25vw;
    }

    .ddbooking {
        height: 25px;
    }

    .ddbooking-field {
        font-size: 12px;
        height: 25px;
        padding-top: 3px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .ddbooking-btn {
        width: 30vw;
        max-width: 30vw;
        min-width: 30vw;
        font-size: 12px;
        height: 25px;
        padding-top: 2px;
        border-color: #ced4da;
    }

    .booking-btn {
        font-size: 12px;
        height: 50px;
        width: 80vw;
        max-width: 80vw;
        min-width: 80vw;
        border-color: #ced4da;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }

    .row.col.forward.app-rep {
        flex-direction: row;
    }
    .row.col.forwardidx-about-info {
        padding: 0% 5% 0% 5%;
    }
    .info-pic-apprep {
        margin-top: 40px;
        width: 100%;
    }
    .idx-about-info {
        padding: 0% 0% 0% 0%;
    }
    .gas-logo {
        margin-top: 1%;
        width: auto;
        height: 100px;
        margin-right: 2%;
    }
    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }

    .info-prochem {
        width: 27.5%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }
    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 100px;
        height: 70px;
        background-color: transparent;
        border: 0px solid #ccc;
    }
    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: left;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .colforward {
        flex-direction: column;
    }

    .reviews.colforward {
        flex-direction: column;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 60%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 10px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }

    .smallservicesbar {
        display: block;
        width: 100%;
    }
    .smallservicesbar-container {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 20px 0px 15px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 2% 0%;
    }

        .smallservicesbar-col a h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }

        .smallservicesbar-col #CleaningButton h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }

    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }

    .smallservicesbar-row .col {
        flex: 1 1 25%;
    }

    .smallservicesbar-img {
        width: 10vw;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicesbar-footer .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }
        
    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .min-logo {
        width: 5%;
        padding-bottom: 3px;
    }

    .areamap {
        margin-top: 0px;
        height: 340px;
        width: 100%;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 5% 5% 5% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }

    .enq-container {
        padding: 5% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        border-radius: 18% !important;
        height: max-content;
        color: snow;
        text-align: center;
        width: 100%;
        padding: 25px;
    }

    .top-col-a {
        width: 100%;
        padding-left: 2%;
        margin: 12.5%;
    }

    .top-col-b {
        width: 100%;
    }

    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    #confirmation-banner {
        width: 90%;
    }

        #confirmation-banner h2 {
            border-style: none;
            padding: 20px;
        }

    #errorBanner {
        width: 90%;
    }

        #errorBanner h2 {
            border-style: none;
        }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-cols {
        width: 100%;
        padding: 0%;
    }

    .enq-top-row {
        flex-direction: column;
    }

    .enq-map-row {
        flex-direction: column;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: left;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .enq-email {
        display: block;
        font-size: 17.5px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enqrow-s {
        width: 100%;
        padding: 0%;
    }

    .enq-text {
        font-size: 12px;
    }

    .enq-icon {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
        margin-right: 0px;
    }

    .enqcol {
        width: 80%;
        font-size: 0.5rem;
        padding: 0% 0% 0% 0%;
        margin-left: 0%;
        margin-bottom:50px;
    }

    .enq-map-row .enq-cols {
        margin-left: 20%;
    }

    .top-col-a .enqrow-s .enqcol {
        margin-left: 0%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .contact-container {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    .contact-label {
        width: 70%;
    }

    .contact-field {
        width: 70%;
        height: 44px;
    }

    .contact-field-memo {
        width: 70%;
    }

    .contact-btn {
        width: 70%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: inline;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 10%;
    }

    .contact-buttons {
        display: flex;
        justify-content: center;
        padding: 0px;
        gap: 10%;
    }

    .contact-form {
        width: 80%;
        max-width: 80%;
        padding: 5% 12% 5% 12%;
    }
    h1 .email {
        font-size: 20px;
    }
    .address-col {
        flex-direction: column;
        justify-content:left;
    }
   h1 .email {
        font-size:26px;
    }

    .fa-contact {
        padding: 7px;
        font-size: 40px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 20px !important;
    }

    .googlemap {
        width: 100%;
        height: 20rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 27.5px;
        width: 35px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }
    #usefulLinks {
        font-size: 0.5rem;
        padding: 2% 20% 2% 20%;
        margin-top: 0px;
        gap: 20px;
    }

    #mapMessage {
        margin-top: 5%;
    }

    #engineer-map-top {
        padding-top: 7%;
    }

    .engineer-map {
        width: 74vw;
        height: 400px;
    }

    .sto-topcontainer {
        position: relative;
        height: 750px;
    }

        .sto-topcontainer .idx-top-row {
            margin-top: 60px;
        }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 26px;
        }

        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }
    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 2rem;
    }
    .hc-dib-text {
        font-size: 12px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: -50%;
        /*color:#add137; 
            background-color:#353c40;*/
        padding: 5px;
        font-size: 22px;
    }
    .sto-mailnow-field {
        width: 72vw;
    }
    .main-image {
        width: 60%;
    }
    .small-image {
        width: 100px;
        border: solid 0px black;
    }
    .product-details {
        margin-left: 5%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }
        .product-details td {
            font-size: 20px;
            padding: 3px;
        }
}

@media only screen and (max-width: 992px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 5px 0px 5px 0px;
    }

    .navbar-brand {
        padding: 0px 0px 0px 20px;
    }

    .navbar div a img {
        /* height: 20%; */
        width: 180px;
        /* border-radius: 10%; */
    }

    .navbar-collapse {
        background-color: #323232;
        padding: 10px 5% 10px 10px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 20px;
    }

    .navbar-toggler {
        margin-right: 2.5%;
        width: 45px;
        height: 35px;
    }

    .navbar-toggler-icon {
    }

    .nav-soc-exp {
        display: none;
    }

    .nav-soc-col {
        display: block;
    }

    ul {
        padding-left: 1rem;
    }

    li {
        color: snow;
        font-size: 12px;
        font-weight: 100;
    }

    .index-list li a {
        font-size: 12px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 12px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 12px !important;
        transition: all ease-out .2s;
    }

    .dropdown-item {
        font-size: 12px;
        font-weight: 200;
    }

    label {
        font-size: 12px;
    }

    a {
        font-size: 10px;
        text-decoration: none;
    }

    p {
        font-size: 18px;
        font-weight: lighter;
    }

    span {
        font-size: 12px;
    }

    h1 {
        font-size: 28px;
        font-weight: 200;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    .idx-services-small {
        display: inline-flex;
    }

    .idx-services-large {
        display: none;
    }

    #idxTopBannerTextInfoText {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        height: fit-content;
        margin-right: 0%;
    }

    .idx-title {
        position: absolute;
        margin-top: 0px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    #idxTopBanner {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 125px 0px 100px 0px;
    }

        #idxTopBannerText h2 {
            font-size: 26px;
        }

        #idxTopBannerText h3 {
            font-size: 16px;
        }

    .idx-inner {
        width: fit-content;
        padding: 2% 9%;
        margin-left: 0%;
        margin-top: 0%;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }
    .reviews-div {
        padding: 0% 0% 0% 0%;
    }
    #idxShopFront {
        width: 100%;
        height: fit-content;
    }
    .show-sm {
        display: block
    }

    .carousel-caption {
        padding: 0% 0% 10% 0%;
        display: flex;
        justify-content: center;
    }

    .topcontainer {
        padding: 0% 0% 0% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

     .topcontainer.pages {
            padding: 0% 0% 0% 0%;
            margin-top: 0px !important;
            min-height: 20vh;
        }

    .pages-head {
        margin-top: 75px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 2%;
    }

    .top-info-container {
        flex-direction: column;
    }

    .top-info-col {
        padding-left: 0%;
        padding-right: 0%;
    }

    .top-info {
        display: block;
        padding: 0% 0% 0% 0%;
    }

        .top-info.main {
            margin-top: 0%;
            padding-top: 11.5%;
            padding-left: 0%;
            padding-right: 0%;
            padding-bottom: 5%;
            display: flex;
            width: 80%;
            justify-content: center;
            flex-direction: column;
        }
            .top-info.main h1 {
                font-size: 38px;
                line-height: 1.5;
                position: relative;
                top: 10%;
                width: 100%;
                color: azure;
                text-align: left;
                background-color: #353c40;
                padding: 0% 7.5% 2% 7.5%;
                margin-left: 0%;
            }
            .top-info.main h2 {
                text-align: left;
                padding: 1% 7.5% 2% 7.5%;
                line-height: 1.5;
                position: relative;
                width: fit-content;
                color: azure;
            }
    .booking-form-bg {
        width: 100vw;
        height: fit-content;
        margin-top: 0px;
        padding: 50px 15%
    }

    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }

    .top-img-panel {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }

    .dibea-logo {
        width: 80vw;
        font-size: 16px;
        text-align: center;
        color: white;
        padding: 5px 10px;
        /* border-radius: 20px;*/
    }

    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size: 24px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    #frmBooking {
        width: 100%;
    }

    .outer-col {
        width: 100%;
        padding: 0% 0% 0% 0%;
        display: flex;
        justify-content: center;
    }


    .book-form {
        width: 100%;
        padding: 0% 0% 0% 0% !important;
    }
    .back-btn {
        color: white;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: #abce37;
        border: 1px solid black;
        line-height: 0;
    }
    .short-input {
        width: 80%;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 30px 20px 30px;
    }

    #postcodeInput {
        width: 35vw !important;
        max-width: 35vw !important;
        min-width: 35vw;
    }

    .choice-btn {
        font-size: 16px;
        width: 100%;
        padding: 20px 5px;
    }

    a.choice-btn {
        padding: 20px;
    }

    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw !important;
        min-width: 25vw;
    }

    .ddbooking {
        height: 25px;
    }

    .ddbooking-field {
        font-size: 12px;
        height: 25px;
        padding-top: 3px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .ddbooking-btn {
        width: 30vw;
        max-width: 30vw;
        min-width: 30vw;
        font-size: 12px;
        height: 25px;
        padding-top: 2px;
        border-color: #ced4da;
    }

    .booking-btn {
        font-size: 12px;
        height: 50px;
        width: 80vw;
        max-width: 80vw;
        min-width: 80vw;
        border-color: #ced4da;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }

    .row.col.forward.app-rep {
        flex-direction: row;
    }

    .info-pic-apprep {
        margin-top: 40px;
        width: 100%;
    }
    .idx-about-info {
        padding: 0% 0% 0% 0%;
    }
    .gas-logo {
        margin-top: 1%;
        width: auto;
        height: 100px;
        margin-right: 2%;
    }
    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }

    .info-prochem {
        width: 27.5%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }
    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 80px;
        height: 70px;
        background-color: transparent;
        border: 0px solid #ccc;
    }
    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: left;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 0px;
        margin-bottom:0px;
    }

    .colforward {
        flex-direction: column;
    }

    .reviews.colforward {
        flex-direction: column;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 60%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 10px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }
        .smallservicesbar {
        display: block;
        width: 100%;
    }
    .smallservicesbar-container {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 20px 0px 15px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 0%;
    }

        .smallservicesbar-col a h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }

        .smallservicesbar-col #CleaningButton h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }

    .smallservicesbar-row .col {
        flex: 1 1 25%;
    }


    .smallservicesbar-img {
        width: 10vw;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicesbar-footer .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }

    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .min-logo {
        width: 5%;
        padding-bottom: 3px;
    }

    .areamap {
        margin-top: 0px;
        height: 340px;
        width: 100%;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 5% 5% 5% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }

    .enq-container {
        padding: 5% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        border-radius: 18% !important;
        height: max-content;
        color: snow;
        text-align: center;
        width: 100%;
        padding: 25px;
    }

    .top-col-a {
        width: 100%;
        padding-left: 2%;
        margin: 12.5%;
    }

    .top-col-b {
        width: 100%;
    }

    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    #confirmation-banner {
        width: 90%;
    }

        #confirmation-banner h2 {
            border-style: none;
            padding: 20px;
        }

    #errorBanner {
        width: 90%;
    }

        #errorBanner h2 {
            border-style: none;
        }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-cols {
        width: 100%;
        padding: 0%;
    }

    .enq-top-row {
        flex-direction: column;
    }

    .enq-map-row {
        flex-direction: column;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: left;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .enq-email {
        display: block;
        font-size: 17.5px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enqrow-s {
        width: 100%;
        padding: 0%;
    }

    .enq-text {
        font-size: 12px;
    }

    .enq-icon {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
        margin-right: 0px;
    }

    .enqcol {
        width: 80%;
        font-size: 0.5rem;
        padding: 10% 0% 10% 0%;
        margin-left: 0%;
        margin-bottom:50px;
    }

    .enq-map-row .enq-cols {
        margin-left: 20%;
    }

    .top-col-a .enqrow-s .enqcol {
        margin-left: 0%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .contact-container {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    .contact-label {
        width: 70%;
    }

    .contact-field {
        width: 70%;
        height: 44px;
    }

    .contact-field-memo {
        width: 70%;
    }

    .contact-btn {
        width: 70%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: contents;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 10%;
    }

    .contact-buttons {
        display: flex;
        justify-content: center;
        padding: 0px;
        gap: 10%;
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
        padding: 5% 12% 5% 12%;
    }
    .colgap-reverse.contact {
        padding-bottom: 0px;
        padding-left: 0%;
        padding-right: 0%;
    }
    h1 .email {
        font-size: 24px;
    }
    .fa-contact {
        padding: 7px;
        font-size: 40px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 20px !important;
    }

    .googlemap {
        width: 100%;
        height: 20rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 27.5px;
        width: 35px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 2% 10% 2% 10%;
        margin-top: 0px;
        gap: 20px;
    }

    #mapMessage {
        margin-top: 5%;
    }

    #engineer-map-top {
        padding-top: 7%;
    }

    .engineer-map {
        width: 74vw;
        height: 400px;
    }

    .sto-topcontainer {
        position: relative;
        height: 500px;
    }
        .sto-topcontainer .idx-top-row {
            margin-top: 60px;
        }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 26px;
        }

        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }

    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 2rem;
    }
    .hc-dib-text {
        font-size: 12px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 7.5%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 22px;
    }
    .sto-mailnow-field {
        width: 72vw;
    }
    .main-image {
        width: 60%;
    }
    .small-image {
        width: 75px;
        border: solid 0px black;
    }
    .product-details {
        margin-left: 5%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

        .product-details td {
            font-size: 20px;
            padding: 3px;
        }
    .accordion-body {
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }
}

@media only screen and (max-width: 768px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 5px 0px 5px 0px;
    }

    .navbar-brand {
        padding: 0px 0px 0px 20px;
    }

    .navbar div a img {
        /* height: 20%; */
        width: 180px;
        /* border-radius: 10%; */
    }

    .navbar-collapse {
        background-color: #323232;
        padding: 10px 5% 10px 10px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 20px;
    }

    .navbar-toggler {
        margin-right: 2.5%;
        width: 45px;
        height: 35px;
    }

    .navbar-toggler-icon {
    }

    .nav-soc-exp {
        display: none;
    }

    .nav-soc-col {
        display: block;
    }

    ul {
        padding-left: 1rem;
    }

    li {
        color: snow;
        font-size: 12px;
        font-weight: 100;
    }

    .index-list li a {
        font-size: 12px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 12px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 12px !important;
        transition: all ease-out .2s;
    }

    .dropdown-item {
        font-size: 12px;
        font-weight: 200;
    }

    label {
        font-size: 12px;
    }

    a {
        font-size: 10px;
        text-decoration: none;
    }

    p {
        font-size: 18px;
        font-weight: lighter;
    }

    span {
        font-size: 12px;
    }

    h1 {
        font-size: 28px;
        font-weight: 200;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }
    .idx-services-small {
        display: inline-flex;
    }

    .idx-services-large {
        display: none;
    }
    #idxTopBannerTextInfoText {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        height: fit-content;
        margin-right: 0%;
    }
    .idx-title {
        position: absolute;
        margin-top: 0px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }
    #idxTopBanner {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 120px 0% 100px 0%;
    }
    #idxTopBannerText h2 {
        font-size: 26px;
    }
    #idxTopBannerText h3 {
        font-size:16px;
    }
    .idx-inner {
        width: fit-content;
        padding: 2% 9%;
        margin-left: 0%;
        margin-top: 0%;
    }
    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }
    .reviews-div {
        padding: 0% 0% 0% 0%;
    }
    #idxShopFront {
        width: 100%;
        height: fit-content;
    }
    .show-sm {
        display: block
    }

    .carousel-caption {
        padding: 0% 0% 10% 0%;
        display: flex;
        justify-content: center;
    }

    .topcontainer {
        padding: 0% 0% 0% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

        .topcontainer.pages {
            padding: 0% 3% 1% 3%;
            margin-top: 0px !important;
            min-height: 20vh;
        }

    .pages-head {
        margin-top: 75px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 2%;
    }

    .top-info-container {
        flex-direction: column;
    }

    .top-info-col {
        padding-left: 0%;
    }

    .top-info {
        display: block;
        padding: 0% 0% 0% 0%;
    }
        .top-info.main {
            margin-top: 0%;
            padding-top: 20%;
            padding-left: 0%;
            padding-right: 0%;
            padding-bottom: 10%;
            display:flex;
        }

            .top-info.main h1 {
                font-size: 38px;
                line-height: 1.5;
                position: relative;
                top: 6%;
                width: 100%;
                color: azure;
                text-align: left;
                background-color: #353c40;
                padding: 1% 7.5% 2% 7.5%;
                margin-left: 0%;
            }
            .top-info.main h2 {
                text-align: left;
                padding: 0% 7.5% 2% 7.5%;
                line-height: 1.5;
                position: relative;
                width: fit-content;
                color: azure;
            }
    .booking-form-bg {
        width: 80vw;
        height: fit-content;
        margin-top: 0px;
        padding: 2% 4%;
    }
    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }
    
    .top-img-panel {
        position: relative;
        width: 100%;
        overflow: visible;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }
    .dibea-logo {
        width: 60vw;
        font-size: 14px;
        text-align: center;
        color: white;
        padding: 5px 10px;
        /* border-radius: 20px;*/
    }
    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -135%);
        text-align: center;
        font-size: 24px;
        width: 40%;
        height: 12%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }

    #frmBooking {
        width: 100%;
    }

    .outer-col {
        width: 100%;
        padding: 0% 2% 10% 2%;
        display: flex;
        justify-content: center;
    }
  

    .book-form {
        width: 100%;
        padding: 0% 0% 0% 0%!important;
    }
    .back-btn {
        color: white;
        width: 20% !important;
        height: 32px;
        font-size: x-large;
        font-weight: 900;
        background-color: #abce37;
        border: 1px solid black;
        line-height: 0;
        margin-bottom: 10px;
    }
    .short-input {
        width: 80%;
    }
    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 30px 20px 30px;
    }
    #postcodeInput {
        width: 35vw !important;
        max-width: 35vw !important;
        min-width: 35vw;
    }
    .choice-btn {
        font-size: 16px;
        width: 100%;
        padding: 20px;
    }

    a.choice-btn {
        padding: 20px 5px;
        font-size: 16px;
    }
    #useMyLocation {
        width: 32vw!important;
        max-width: 32vw!important;
        min-width: 25vw;
    }
    .ddbooking {
        height: 25px;
    }

    .ddbooking-field {
        font-size: 12px;
        height: 25px;
        padding-top: 3px;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .ddbooking-btn {
        width: 30vw;
        max-width: 30vw;
        min-width: 30vw;
        font-size: 12px;
        height: 25px;
        padding-top: 2px;
        border-color: #ced4da;
    }

    .booking-btn {
        font-size: 12px;
        height: 50px;
        width: 80vw;
        max-width: 80vw;
        min-width: 80vw;
        border-color: #ced4da;
    }

    .ben-title {
        text-align: center;
    }

    .ben-body {
        text-align: center;
    }

    .dik-title {
        text-align: center;
    }
    .row.colforward.app-rep {
        flex-direction: column;
        padding: 0% 10% 0% 10%;
    }
    .row.col.forward.app-rep {
        flex-direction: row;    
    }
    .info-pic-apprep {
        margin-top: 40px;
        width: 100%;
    }
    .idx-about-info {
        padding: 0% 0% 0% 0%;
    }
    .gas-logo {
        margin-top: 3%;
        width: auto;
        height: 80px;
        margin-right: 2%;
    }
    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0% 0% 0% 0%;
    }

    .vac-info-pic {
        text-align: center;
    }

    .headertext-sm {
        text-align: center;
    }

    .info-prochem {
        width:27.5%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }
    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 60px;
        height: 60px;
        background-color: transparent;
        border: 0px solid #ccc;
    }
    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 0% 0% 0%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: left;
    }

    .sm-hide {
        display: none;
    }

    .sm-show {
        display: block;
    }

    .lg-hide {
        display: none;
    }

    .lg-hide {
        display: block;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 0px;
    }

    .colforward {
        flex-direction: column;
    }
    .reviews.colforward {
        flex-direction: column;
    }
    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocol-sm {
        width: 100%;
    }

    .img-sm {
        width: 60%;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 10px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }
    
    .smallservicesbar {
        display: block;
        width: 100%;
    }
    .smallservicesbar-container {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 20px 0px 15px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 0%;
    }
        .smallservicesbar-col a h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }

        .smallservicesbar-col #CleaningButton h3 {
            font-size: 1rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 2% 0% 2%;
    }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }
    .smallservicesbar-row .col {
        flex: 1 1 25%;
    }

    .smallservicesbar-img {
        width: 15vw;
    }

    .smallservicesbar-card {
        width: 130px;
        height: 150px;
        margin: 10px;
        padding: 15px 0px 15px 0px;
    }
    .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicesbar-footer .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }
        
    .generaltext {
        /*      padding: 10% 0px 10% 0px ;*/
    }

    .min-logo {
        width: 5%;
        padding-bottom: 3px;
    }

    .areamap {
        margin-top: 0px;
        height: 340px;
        width: 100%;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 5% 5% 5% 5%;
        justify-items: center;
        overflow: hidden;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }
    .enq-container {
        padding: 5% 0% 5% 0%;
        justify-items: center;
        overflow: clip;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        border-radius: 18% !important;
        height: max-content;
        color: snow;
        text-align: center;
        width: 100%;
        padding: 25px;
    }

    .top-col-a {
        width: 100%;
        padding-left: 2%;
        margin: 12.5%;
    }

    .top-col-b {
        width: 100%;
    }

    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    #confirmation-banner {
        width: 90%;
    }

        #confirmation-banner h2 {
            border-style: none;
            padding: 20px;
        }

    #errorBanner {
        width: 90%;
    }

        #errorBanner h2 {
            border-style: none;
        }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-cols {
        width: 100%;
        padding: 0%;
    }

    .enq-top-row {
        flex-direction: column;
    }

    .enq-map-row {
        flex-direction: column;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: center;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .enq-email {
        display: block;
        font-size: 17.5px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enqrow-s {
        width: 100%;
        padding: 0%;
    }

    .enq-text {
        font-size: 12px;
    }

    .enq-icon {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
        margin-right: 0px;
    }

    .enqcol {
        width: 80%;
        font-size: 0.5rem;
        padding: 5% 0% 0% 0%;
        margin-left: 0%;
    }

    .enq-map-row .enq-cols {
        margin-left: 20%;
    }
    .top-col-a .enqrow-s .enqcol {
        margin-left: 0%;
    }
    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
    }

    .contact-container {
        justify-content:center;
        align-items: center;
        display: flex;
        flex-flow: column;
        padding: 0% 0% 0% 0%;
    }

    .contact-label {
        width: 70%;
    }
    .contact-field {
        width: 70%;
        height: 44px;
    }

    .contact-field-memo {
        width: 70%;
    }

    .contact-btn {
        width: 70%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: contents;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 10%;
    }

    .contact-buttons {
        display: flex;
        justify-content: center;
        padding: 0px;
        gap: 10%;
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
        padding: 5% 12% 5% 12%;
    }
    .colgap-reverse.contact {
        padding-bottom: 0px;
    }
    h1 .email {
        font-size: 16px;
    }
    .fa-contact {
        padding: 7px;
        font-size: 40px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 20px !important;
    }

    .googlemap {
        width: 75%;
        height: 20rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
    }

    .benefits {
        margin-left: 10%;
    }

    .fa {
        padding: 7px;
        font-size: 27.5px;
        width: 35px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 5% 7.5% 5% 7.5%;
        margin-top: 0px;
        gap: 20px;
    }
    #mapMessage {
        margin-top: 5%;
    }

    #engineer-map-top {
        padding-top: 7%;
    }

    .engineer-map {
        width: 90vw;
        height: 400px;
    }
    .sto-topcontainer {
        position: relative;
        height: 500px;
    }

    .sto-top-info {
        position: relative;
    }

        .sto-top-info h1 {
            font-size: 24px;
        }

        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }

    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 2rem;
    }
    .hc-dib-text {
        font-size: 10px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 7.5%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 22px;
    }
    .sto-mailnow-field {
        width: 72vw;
    }
    .main-image {
        width: 60%;
    }
    .small-image {
        width: 75px;
        border: solid 0px black;
    }
    .product-details {
        margin-left: 0%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }
    .product-details td {
        font-size: 20px;
        padding: 3px;
    }
    .accordion-body {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 576px) {

    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 5px 0px 5px 3px;
    }

    .navbar-brand {
        padding: 0px 0px 4px 0px;
    }

    .navbar div a img {
        /* height: 20%; */
        width: 220px;
        /* border-radius: 10%; */
    }

    .navbar-collapse {
        background-color: #323232;
        padding: 10px 5% 10px 10px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 18px;
    }

    .navbar-toggler {
        margin-right: 0%;
        width: 40PX;
        height: 34px;
        padding: 0px;
    }
    .dropdown-menu.show {
      
        height: fit-content !important;
        max-height: 30vh !important;
       
    }
    .navbar-toggler-icon {
    }

    .nav-soc-exp {
        display: none;
    }

    .nav-soc-col {
        display: block;
    }

    ul {
        padding-left: 0rem;
    }

    li {
        color: snow;
        font-size: 14px;
        font-weight: 100;
    }

    .dropdown-item {
        font-size: 20px;
        font-weight: 200;
    }

    label {
        font-size: 20px;
    }

    a {
        font-size: 18px;
        text-decoration: none;
    }

    p {
        font-size: 16px;
    }

    span {
        font-size: 12px;
    }

    h1 {
        font-size: 20px;
        font-weight: 200;
    }

    h2 {
        font-size: 16px;
    }

    h3 {
        font-size: 14px;
    }

    h4 {
        font-size: 12px;
    }

    h5 {
        font-size: 10px;
    }
    #idxTopBanner {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 85px 0% 100px 0%;
    }
    #idxTopBannerTextInfoText {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        height: fit-content;
        margin-right: 0%;
    }
    .idx-title {
        position: absolute;
        margin-top: 0px;
        z-index: 999;
        text-align: center;
        width: 100%;
    }
    .idx-services-small {
        display:inline-flex;
    }
    .idx-services-large {
        display: none;
    }
    #idxTopBannerText h1 {
        font-size: 25px;
    }
    #idxTopBannerText h2 {
        font-size: 15px;
    }
    #idxTopBannerText h3 {
        font-size: 10px;
    }
    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }
    .idx-about-info {
        text-align: left;
        color: black;
        padding: 5% 0%;
    }
    .idx-inner {
        display: block;
        width: fit-content;
        justify-content: center;
        color: azure;
        text-align: left;
        padding: 4% 8%;
        margin-left: 0%;
        margin-top: 5%;
    }
    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }
    .reviews-div {
        padding: 0% 0% 0% 0%;
    }
    #idxShopFront {
        width: 100%;
        height: fit-content;
    }
    .show-sm {
        display: block
    }

    .topcontainer {
        padding: 0% 0% 0% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

    .pages-head {
        margin-top: 75px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 2%;
    }

    .top-info-container {
        flex-direction: column;
    }

    .top-info-col {
        padding-left: 0%;
    }

    .top-info {
        display: block;
    }
        .top-info.main {
            margin-top: 0%;
            padding-top: 100px;
            padding-left: 0%;
            padding-right: 0%;
            padding-bottom: 20px;
            width: 80%;
            justify-content: center;
            flex-direction: column;
            display: flex;
        }

        .top-info.main h1 {
            line-height: 1.5;
            position: relative;
            top: 6%;
            width: 100%;
            color: azure;
            text-align: left;
            background-color: #353c40;
            padding: 0% 7.5% 2% 7.5%;
            margin-left: 0%;
            font-size: 25px;
        }
        .top-info.main h2 {
            text-align: left;
            padding: 1% 7.5% 2% 7.5%;
            line-height: 1.5;
            position: relative;
            width: fit-content;
            color: azure;
        }
    .booking-form-bg {
        width: 100vw;
        height: fit-content;
        margin-top: 0px;
        padding: 4% 4%;
    }
  
    .top-img-panel {
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible;
        /*   border-radius: 5%;
        border-color: white ;
        border-style: solid;
        border-width: 1px;*/
        padding: 0px 0px 0px 0px;
        /*   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
        /*
        border-radius: 5%;
        border-color: white ;
        border-style: solid;
        border-width: 1px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 15px 0px;*/
    }

    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -150%);
        text-align: center;
        font-size: 18px;
        width: 40%;
        height: 12.5%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }
    .dibea-logo {
        font-size: 10px;
        width: 95%;
        padding: 5px 10px;
        /* border-radius: 20px;*/
    }
    .shop-logo-strip {
        width: 80%;
    }
    .outer-col {
        width: 100%;
        padding: 0% 0% 7.5% 0%;
        display: flex;
        justify-content: center;
    }
    .choice-btn {
        font-size: 16px;
        width: 100%;
        padding: 20px;
    }

    a.choice-btn {
        padding: 20px 5px;
        font-size: 16px;
    }
    #postcodeInput {
        height: fit-content;
        width: 20vw !important;
        max-width: 20vw !important;
        min-width: 20vw;
        text-align: center;
        font-size:30px;
    }
    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw!important;
        min-width: 25vw;
    }
    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 10px 20px 10px 20px;
    }
    .step-1 button {
        padding: 5px 8px;
        font-size: 10px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 10px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 10px !important;
    }

    .ddbooking {
        height: 40px;
        margin-bottom: 10px;
    }

    .ddbooking-field {
        font-size: 20px;
        height: 40px;
        width: 85vw;
        max-width: 85vw;
        min-width: 85vw;
        margin-bottom: 10px;
    }

    .ddbooking-btn {
        font-size: 20px;
        height: 40px;
        width: 100vw;
        max-width: 100vw;
        min-width: 85vw;
        border-color: #ced4da;
        overflow: clip;
        }

    .booking-btn {
        font-size: 20px;
        height: 40px;
        width: 90vw;
        max-width: 90vw;
        min-width: 90vw;
        border-color: #ced4da;
    }
    .progress-indicator {
        display: inline-flex;
        height: 30px;
        width: 100%;
        justify-content: center;
        margin-top: 0px;
    }

    #frmBooking {
        width: 100%;
    }
    .book-form {
        width: 100%;
        padding: 0% 0% 0% 0% !important;
    }
    .back-btn {
        color: white;
        width: 20% !important;
        height: 36px;
        font-size: x-large;
        font-weight: 900;
        background-color: #abce37;
        border: 1px solid black;
        line-height: 0;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    .areas-col {
        padding: 5% 2%;
    }
    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .vac-info-col {
        text-align: left;
        padding: 0%;
    }
    .row.colforward.app-rep {
        flex-direction: column;
        padding: 0% 2.5% 0% 2.5%;
    }
    .td-list {
        text-align: right;
        color: black;
        font-size: 12px;
    }
    .boiler-grid {
        position: relative;
        left: -10% !important;
        width: 98vw !important;
    }
    .th-col {
        text-align: center;
        font-size: 14px;
    }
    .info-pic-apprep {
        margin-top: 20px;
        width: 100%;
    }
    .idx-about-info {
        padding: 5% 0% 5% 0%;
    }
    .gas-logo {
        margin-top: 3%;
        width: auto;
        height: 80px;
        margin-right: 2%;
    }
    .vac-info-pic {
        text-align: center;
    }

    .info-prochem {
        width: 41%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }
    .toggle-button {
        display: flex;
        justify-content: center !important;
        font-size: x-small;
        width: 85px;
        height: 85px;
        background-color: transparent;
        border: 0px solid #ccc;
    }
    .info-foot {
        text-align: center;
    }

    .info-col {
        padding: 0% 2.5% 0% 2.5%;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: center;
    }

    .sm-hide {
        display: none;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colgap-reverse {
        margin-top: 10px;
    }

    .colforward {
        flex-direction: column;
    }
    .reviews.colforward {
        flex-direction: column;
    }
    .col-gap {
        column-gap: 20px;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .infocontainer {
        padding: 10% 5% 10% 5%;
    }

    .img-sm {
        width: 100%;
    }

    .center-col {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .headertext-sm {
        text-align: center;
    }

    .titlerow {
        text-align: left;
    }

    .title-sm {
        margin-bottom: 10px;
    }

    .title-lg {
        display: none;
    }

    #book {
        display: none;
    }
   
    .smallservicesbar-container{
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 20px 0px 15px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .smallservicesbar {
        display: block;
        width: 100%;
    }

    .smallservicesbar-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 0%;
    }
        .smallservicesbar-col a h3 {
            font-size: 0.75rem;
            font-weight: 300;
            padding: 0% 0% 15% 0%;
        }

        .smallservicesbar-col #CleaningButton h3 {
            font-size: 0.75rem;
            font-weight: 300;
            padding: 0% 0% 15% 0%;
        }
    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 1% 0% 1%;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
        padding: 0% 1% 0% 1%;
    }
        .smallservicesbar-col.title {
            padding: 0% 0% 0% 0%;
        }
        .smallservicesbar-card {
            width: 130px;
            height: 150px;
            margin: 10px;
            padding: 15px 0px 15px 0px;
        }
    .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
        .cleaningMenu a h3 {
            font-size: 0.75rem;
            font-weight: 300;
        }
    .servicesbar-footer .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .smallservicesbar-img {
        width: 15vw;
    }

    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        font-size: 1rem;
        height: 3rem;
        padding: 1px;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }

    .min-logo {
        width: 5%;
        padding-bottom: 3px;
    }

    .generaltext {
        padding: 10% 0px 10% 0px;
    }

    .areamap {
        margin-top: 0px;
        height: 280px;
        width: 100%;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 0% 5% 5% 5%;
        justify-items: center;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .thumbs-caption {
        position: absolute;
        top: 75%;
        width: auto;
    }
    .enq-container {
        padding: 5% 0% 5% 0%;
        justify-items: center;
        overflow: clip;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        border-radius: 18% !important;
        height: max-content;
        color: snow;
        text-align: center;
        width: 100%;
        padding: 25px;
    }
    .top-col-a {
        width: 100%;
        padding-left: 2%;
        margin: 7.5%;
    }

    .top-col-b {
        width: 100%;
    }
    .enq-container {
        padding: 2% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }
    #confirmation-banner {
        width: 90%;
    }

        #confirmation-banner h2 {
            border-style: none;
            padding: 20px;
        }

    #errorBanner {
        width: 90%;
    }

        #errorBanner h2 {
            border-style: none;
        }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-cols {
        width: 100%;
        padding: 0%;
    }

    .enq-top-row {
        flex-direction: column;
    }

    .enq-map-row {
        flex-direction: column;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: center;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .enq-email {
        display: block;
        font-size: 17.5px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enqrow-s {
        width: 100%;
        padding: 0%;
    }

    .enq-text {
        font-size: 12px;
    }

    .enq-icon {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
        margin-right: 0px;
    }

    .enqcol {
        width: 65%;
        font-size: 0.5rem;
        padding: 5% 5% 5% 5%;
        margin-left: 0%;
    }

    .enq-map-row .enq-cols {
        margin-left: 20%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
     
    }
    .contact-container {
        align-items: center;
        display: flex;
        flex-flow: column;
    }

    .contact-field {
        width: 80%;
        height: 44px;
    }

    .contact-field-memo {
        width: 80%;
    }

    .contact-btn {
        width: 80%;
        border-color: white;
        color: white;
        background-color: #00b661;
    }

    .contact-row {
        display: contents;
    }

    .contact-order {
    }

    .contact-top-rows {
        display: flex;
        padding-left: 5%;
    }

    .contact-buttons {
        padding-left: 0%;
        gap: 10%;
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
        padding: 5% 7.5% 5% 7.5%;
    }
    .colgap-reverse.contact {
        padding-bottom: 0px;
    }
    h1 a {
        font-size: 30px;
    }

    h1 .email {
        font-size: 12px;
    }
    .fa-enq {
        position: relative;
        top: -2px !important;
        padding: 7px !important;
        font-size: 28px !important;
        width: 25px !important;
    }
    .fa-contact {
        padding: 7px;
        font-size: 32px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px !important;
    }

    .googlemap {
        width: 80%;
        height: 15rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
        position: relative;
    }

    .fa {
        padding: 7.5px;
        font-size: 22.5px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        border-radius: 49%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }
    #mapMessage {
        margin-top: 5%;
    }

    #engineer-map-top {
        padding-top: 20%;
    }

    .engineer-map {
        width: 90vw;
        height: 35vh;
    }

    .sto-topcontainer {
        position: relative;
        height: 400px;
    }
    .sto-top-info {
        position: relative;
    }
    .hc-dib-text {
        font-size: 10px !important;
    }
    .price-box {
        position: relative;
        right: 5px;
        bottom: 12%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 20px;
    }
        .sto-top-info h1 {
            font-size: 22px;
        }

        .sto-top-info .content {
            margin-bottom: 2%;
            padding: 5px 10px
        }
    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 12px;
    }
    .sto-mailnow-field {
        width:75vw;
    }
    .product-details {
        margin-left: 0%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }
    .product-details td {
        font-size: 14px;
        padding: 3px;
    }
    .main-image {
        width: 60%;
    }
    .small-image {
        width: 50px;
        border: solid 0px black;
    }
    #usefulLinks {
        font-size: 0.5rem;
        padding: 5% 10% 5% 10%;
        margin-top: 0px;
        gap: 20px;
    }

        #usefulLinks .row {
            flex-direction: column;
            gap: 50px;
        }
    .accordion-body {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 360px) {
    .blink-text-wt {
        color: #00b661;
        font-weight: 500;
    }

    .navbar {
        padding: 8px 0px 2px 3px;
    }

    .navbar-brand {
        padding: 0px 0px 4px 0px;
    }

    .navbar div a img {
        /* height: 20%; */
        width: 90px;
        /* border-radius: 10%; */
    }

    .navbar-collapse {
        background-color: #323232;
        padding: 10px 5% 10px 10px;
    }

    .nav-link {
        font-weight: 100;
        font-size: 18px;
    }

    .navbar-toggler {
        margin-right: 0%;
        width: 25px;
        height: 25px;
        padding:0px;
    }

    .navbar-toggler-icon {
    }

    .nav-soc-exp {
        display: none;
    }

    .nav-soc-col {
        display: block;
    }

    ul {
        padding-left: 0rem;
    }

    li {
        color: snow;
        font-size: 14px;
        font-weight: 100;
    }

    .index-list li a {
        font-size: 8px;
    }

    .index-list li:not(:last-child) {
        margin-bottom: 10px;
    }

    .larger-glow {
        text-shadow: 0 0 20px white;
        font-size: 10px !important;
        transition: all ease-out .2s;
    }

    .dropdown-item {
        font-size: 14px;
        font-weight: 200;
    }

    label {

        /*color: snow;*/
        font-size: 14px;
    }

    a {
        font-size: 14px;
        text-decoration: none;
    }

    p {
        font-size: 14px;
    }

    span {
        font-size: 10px;
    }

    h1 {
        font-size: 20px;
        font-weight: 200;
    }

    h2 {
        font-size: 16px;
    }

    h3 {
        font-size: 14px;
    }

    h4 {
        font-size: 12px;
    }

    h5 {
        font-size: 10px;
    }

    #idxTopBanner {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }

    #idxTopBannerText {
        position: absolute;
        top: 0%;
        width: 100%;
        z-index: 999;
        display: inline-flex;
        padding: 40px 0px 100px 0px;
    }

    .idx-title {
        /*  position: absolute;
        margin-top: 0px;*/
        z-index: 999;
        text-align: center;
        width: 100%;
    }

    .idx-title-text {
        font-size: 24px;
    }

    .idx-inner {
        display: block;
        width: fit-content;
        justify-content: center;
        color: azure;
        text-align: left;
        padding: 4% 8%;
        margin-left: 0%;
        margin-top: 5%;
    }

    .idx-top-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: center;
    }

    .idx-about-info h2 {
        font-weight: 300 !important;
        color: darkslategray;
        text-align: left;
    }

    .idx-about-info {
        text-align: left;
        color: black;
        padding: 5% 0%;
    }

    .show-sm {
        display: block
    }

    .colgap-reverse {
        margin-top: 0px;
    }

    .topcontainer {
        padding: 0% 0% 0% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

    .topcontainer.pages {
        padding: 0% 0% 5% 0%;
        justify-items: center;
        width: 100%;
        margin-top: 0px;
    }

    .pages-head {
        margin-top: 70px;
    }

    .top-row-lg {
        width: 100%;
        margin-left: 0%;
    }

    .top-info-container {
        flex-direction: column;
    }

    .top-info-col {
        position: relative;
        height: 100%;
        padding: 5%;
    }

    .top-info {
        display: block;
        padding: 0% 0% 0% 0%;
    }

        .top-info.main {
            margin-top: 0%;
            padding-top: 50px;
            padding-left: 0%;
            padding-right: 0%;
            padding-bottom: 0;
            width: 80%;
            justify-content: center;
            flex-direction: column;
        }

        .top-info.main h1 {
            line-height: 1.5;
            position: relative;
            top: 7.5%;
            width: 100%;
            color: azure;
            text-align: left;
            background-color: #353c40;
            padding: 1% 7.5% 2% 7.5%;
            margin-left: 0%;
            font-size: 18px;
        }
        .top-info.main h2 {
            text-align: left;
            padding: 1% 7.5% 2% 7.5%;
            line-height: 1.5;
            position: relative;
            width: fit-content;
            color: azure;
        }
    .booking-form-bg {
        width: 100vw;
        height: fit-content;
        margin-top: 0px;
        padding: 5px;
    }

    .top-img-panel {
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible;
        border-color: white;
        border-style: none;
        border-width: 1px;
        padding: 0px 0px 0px 0px;
        /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    }

    .top-img {
        position: relative;
        height: auto;
        width: 100%;
        overflow: clip;
    }

    .btn-banner {
        padding: 0px 0px 0px 0px;
        position: relative;
        top: -20%;
        left: 27.5%;
        transform: translate(-50%, -150%);
        text-align: center;
        font-size: 16px;
        width: 40%;
        height: 12.5%;
        color: #00b661;
        border-color: #00b661;
        background-color: transparent;
    }
    .dibea-logo {
        font-size: 8px;
        width: 95%;
        padding: 5px 10px;
        /* border-radius: 20px;*/
    }
    .title-sm {
        margin-bottom: 10px;
    }

    .outer-col {
        width: 100%;
        padding: 0% 2% 7.5% 2%;
        display: flex;
        justify-content: center;
    }

    .choice-btn {
        font-size: 16px;
        width: 100%;
        padding: 15px;
    }

    a.choice-btn {
        padding: 15px 15px 15px 15px;
        font-size: 16px;
    }

    #postcodeInput {
        height: fit-content;
        width: 20vw !important;
        max-width: 20vw !important;
        min-width: 20vw;
        text-align:center;
    }

    #useMyLocation {
        width: 32vw !important;
        max-width: 32vw !important;
        min-width: 25vw;
    }

    #booking-confirmation-banner h2, #bookingClearBanner h2 {
        padding: 20px 30px 20px 30px;
    }

    .step-1 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-2 button {
        padding: 5px 8px;
        font-size: 8px !important;
    }

    .step-3 button {
        padding: 5px 26px;
        font-size: 8px !important;
    }

    .ddbooking {
        height: 25px;
    }

    .ddbooking-field {
        padding-top: 6px;
        height: 25px;
        width: 90vw;
        max-width: 90vw;
        min-width: 90vw;
        color: black !important;
        font-size: 14px;
    }

    .ddbooking-btn {
        font-size: 14px;
        height: 25px;
        width: 90vw;
        max-width: 90vw;
        min-width: 90vw;
        border-color: #ced4da;
    }

    .booking-btn {
        font-size: 16px;
        height: 40px;
        width: 90vw;
        max-width: 90vw;
        min-width: 90vw;
        border-color: #ced4da;
    }

    .back-btn {
        color: white;
        width: 20% !important;
        height: 36px;
        font-size: x-large;
        font-weight: 900;
        background-color: #abce37;
        border: 1px solid black;
        line-height: 0;
        padding-bottom: 2px;
    }

    #frmBooking {
        width: 100%;
    }

    .row.colforward.app-rep {
        flex-direction: column;
        padding: 0% 0% 0% 0%;
    }

    .td-list {
        text-align: right;
        color: black;
        font-size:12px;
    }

    .th-col {
        text-align: center;
        font-size:14px;
    }

    .boiler-grid {
        position: relative;
        left: -10%!important;
        width: 98vw!important;
    }

    .sm-hide {
        display: none;
    }

    .title-lg {
        display: none;
    }

    .colreverse {
        flex-direction: column-reverse;
    }

    .colforward {
        flex-direction: column;
    }

    .reviews.colforward {
        flex-direction: column;
    }

    .col-w {
        width: 100%;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }

    .info-img-x {
        display: none;
    }

    .info-img-xx {
        display: none;
    }

    .infocontainer {
        padding: 10% 5% 10% 5%;
    }

    .img-sm {
        width: 80%;
    }

    .center-col {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .headertext-sm {
        text-align: center;
    }

    .titlerow {
        text-align: left;
    }

    #book {
        display: none;
    }

    .smallservicesbar-container {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 20px 0px 15px 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .smallservicesbar {
        display: block;
    }

    .smallservicesbar-row {
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .smallservicesbar-col {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin: 0% 0% 0% 0%;
        padding: 0% 0% 0% 0%;
    }

        .smallservicesbar-col a h3 {
            font-size: 0.75rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }

        .smallservicesbar-col #CleaningButton h3 {
            font-size: 0.75rem;
            font-weight: 300;
            padding: 0% 2% 0% 2%;
        }
    .cleaningMenu a {
        font-size: 1rem;
        font-weight: 300;
    }

    .cleaningMenu h3 {
        font-size: 1rem;
        font-weight: 300;
    }

    .smallservicesbar-card {
        width: 100%;
        height: 100%;
        margin: 10px;
        padding: 15px 0px 15px 0px;
        border-bottom: inset;
        border-bottom-color: #00b661;
    }
    .cleaningMenu {
        padding: 0px 0px 10px 0px;
    }
    .smallservicesbar-img {
        width: 60%;
    }

    .cleaningMenu .smallservicesbar-img {
        width: 50%;
    }

    .servicecols {
        width: 50%;
    }

    .servicescard {
        width: 100%;
        height: 12.5rem;
    }

    .servicescardtitle {
        padding: 1px;
        font-size: 1rem;
        height: 10rem;
    }

    .servicescardbody {
        padding: 0px;
    }

    .servicesbtn {
        font-size: 1rem;
        width: 97%;
    }

    .generaltext {
        padding: 10% 0px 10% 0px;
    }

    .min-logo {
        width: 7%;
        padding-bottom: 3px;
    }

    .areamap {
        margin-top: 0px;
        height: 220px;
        width: 100%;
        overflow: clip;
    }

    .sectioncontainer {
        padding: 5% 5% 5% 5%;
        justify-items: center;
    }

    .thumbs-caption {
        position: absolute;
        top: 72.5%;
        width: auto;
    }

    .sliderimage {
        width: 100%;
    }

    .sliderthumb {
        width: 20%;
        padding: 0px;
    }

    .enq-container {
        padding: 5% 0% 0% 0%;
        justify-items: center;
        overflow: clip;
    }

    .enq-title {
        border-color: #00b661;
        border-style: solid;
        border-width: .5px;
        border-radius: 18% !important;
        height: max-content;
        color: snow;
        text-align: center;
        width: 100%;
        padding: 25px;
    }

    .top-col-a {
        width: 100%;
        padding-left:2%;
        margin:5%;
    }

    .top-col-b {
        width: 100%;
    }

    .main-row {
        padding: 0% 0% 0% 0%;
    }

    #confirmation-banner {
        width: 90%;
    }

    #confirmation-banner h2 {
        border-style: none;
        padding:20px;
    }

    #errorBanner {
        width: 90%;
    }

    #errorBanner h2 {
        border-style: none;
    }

    .enq-text-body {
        padding-left: 0%;
    }

    .enq-cols {
        width: 100%;
        padding: 0%;
    }

    .enq-top-row {
        flex-direction: column;
    }

    .enq-map-row {
        flex-direction: column;
    }

    .enq-map-col {
        display: block;
        font-size: 1.25rem;
        text-align: center;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .enq-email {
        display: block;
        font-size: 17.5px;
    }

    .enqtitle {
        text-align: center;
        margin-bottom: 0%;
    }

    .enqrow-s {
        width: 100%;
        padding: 0%;
    }

    .enq-text {
        font-size: 12px;
    }

    .enq-icon {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;
        margin-right: 0px;
    }

    .enqcol {
        width: 70%;
        font-size: 0.5rem;
        padding: 0% 0% 0% 3%;
        margin-left: 0%;
    }

    .enq-map-row .enq-cols {
        margin-left:17%;
    }

    .enq-icon-top {
        width: 10%;
        text-align: left;
        max-width: 10%;
        padding-left: 0%;
        margin-left: 0%;       
    }

    .contact-field {
        width: 80%;
        height: 44px;
    }

    .contact-field-memo {
        width: 80%;
    }

    .contact-order {
    }

    .contact-row {
        width: 100%;
    }

    .contact-top-rows {
        display: flex;
        padding-left: 3%;
    }

    .contact-buttons {
        padding-left: 0%;
        gap: 10%;
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
        padding: 5% 5% 5% 5%;
    }

    .colgap-reverse.contact {
        padding-bottom: 0px;
    }

    h1 a {
        font-size: 20px;
    } 

    h1 .email {
        font-size: 10px;
    }

    .fa-enq {
        position: relative;
        top: -2px !important;
        padding: 7px !important;
        font-size: 22px !important;
        width: 25px !important;
    }

    .fa-contact {
        padding: 7px;
        font-size: 24px !important;
        width: 40px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 5px !important;
    }

    .googlemap {
        width: 90%;
        height: 15rem;
        border-style: solid;
    }

    .tc-sm {
        width: 85%;
    }

    .whychoose {
        align-self: center;
        width: max-content;
        position: relative;
    }

    .info-pic-col {
        text-align: center !important;
       
    }

    .info-pic-apprep {
        margin-top: 20px;
        width: 75%;
    }

    .info-pic-boiler {
        margin-top: 30px;
        width: 80%;
    }

    .vac-info-pic {
        text-align: center !important;
    }

    .info-title {
        padding: 0% 0% 0% 0%;
        text-align: left;
    }

    .vac-info-col {
        padding: 0% 0% 0% 0%;
        text-align: left;
    }

    .info-col {
        padding: 0% 1% 0% 1%;
        text-align: left;
    }

    .info-pic-appclean {
       
        width: 100%;
    }
    .info-prochem {
        width: 50%;
        border-radius: 5%;
        overflow: clip;
        box-shadow: rgb(128, 128, 128) 0px 4px 14px;
    }

    .toggle-button {
        display: flex;
        justify-content: center;
        font-size: x-small;
        width: 100px;
        height: 70px;
        background-color: transparent;
        border: 0px solid #ccc;
    }

    .fa {
        padding: 5px;
        font-size: 22px;
        width: 22.5px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ticklist {
        font-size: 1rem;
    }

    #mapMessage {
        margin-top: 10%;
    }

    #engineer-map-top {
        padding-top: 7%;
    }

    .engineer-map {
        width: 90vw;
        height: 20vh;
    }

    .sto-topcontainer {
        position: relative;
        height: 400px;
    }

    .sto-top-info {
        position: relative;
    }

    .sto-top-info h1 {
        font-size:18px;
    }

    .sto-top-info .content {
        margin-bottom:2%;
        padding: 5px 10px
    }

    .sto-title-2 {
        top: 6rem;
        padding: 1%;
        font-size: 12px;
    }

    .sto-mailnow-field {
        width: 72vw;
    }

    .sto-topcontainer .idx-top-row {
        margin-top: 0px;
    }

    .hc-dib-text {
        font-size:10px!important;
    }

    .price-box {
        position: relative;
        right: 5px;
        bottom: 10%;
        color: black; /*color:#add137; background-color:#353c40;*/
        padding: 5px;
        font-size: 18px;
    }

    .product-details {
        margin-left: 0%;
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

    .product-details td {
        font-size: 14px;
        padding: 3px;
    }

    .main-image {
        width: 100%;
    }

    .small-image {
        width: 30px;
        border: solid 0px black;
    }

    #usefulLinks {
        font-size: 0.5rem;
        padding: 5% 10% 5% 10%;
        margin-top: 0px;
        gap: 20px;
    }

    #usefulLinks .row {
        flex-direction: column;
        gap: 50px;
    }

    .accordion-body {
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }
}