html {
    max-width: 100vw;
    overflow-x: hidden;

}

body {
    position: relative;
    /* Essential: Makes body the reference for absolute children */
    margin: 0;
    /* Good practice for full-screen layouts */
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;

}

a {
    text-decoration: none;
    padding-bottom: 5px;
    position: relative;
    display: inline-block;
    color: currentColor;
}

a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    /* You will need to set the color of the underline here for it to be visible */
    /* background-color: [Your Chosen Color]; */
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
    transform-origin: center;
}

a:hover::after {
    transform: scaleX(1);
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.navbar {
    box-sizing: border-box;
    position: absolute;
    z-index: 22222;
    width: 100vw;
    height: 16vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    background-color: rgb(20, 9, 114);
    color: white;
    text-transform: uppercase;
}

.navbar>* {
    font-family: "Monteserrat", sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    margin-right: 5vw;
    padding-right: 2vw;
    color: white;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 7vh;

}

.navbar>*>* {
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-style: normal;

}


#services {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-right: 0px;
    background: transparent;
    padding-left: 3vw
}

#services:hover {
    background-color: rgb(20, 9, 114);

}

#services>* {
    width: auto;
    background-color: rgb(20, 9, 114);


}

#services>*:first-child {
    text-align: left;


}

#services>*:not(:first-child) {
    background-color: rgb(20, 9, 114);
    visibility: hidden;
    text-wrap-mode: nowrap;
    width: auto;
    margin-top: 0.5em;
    font-size: 1.3vw;
    padding: 5px;
    padding-left: 15px;
    text-decoration: none;

}

#services:hover>* {
    visibility: visible;

}

#logo {
    background-image: url(./logo_w.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 80%;
    width: 35vw;
    height: 14vh;
    margin-top: 3vh;
    margin-left: 3vw;
}

.wblogo {
    background-image: url(./wblogo.png);
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    margin: auto;
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    transform: translate(20vw, -40vh);

}

.Experience,
.OneYearWarranty,
.gasSafeBage {
    z-index: 77777;
    position: absolute;
    margin: auto;
    right: 25vw;
    top: -3vh;
    display: flex;
    flex-direction: column;
    width: 20.5vh;
    height: 20.5vh;
    background-color: rgb(247, 217, 19);
    border-radius: 50%;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2vh double white;
    box-sizing: border-box;

}

.OneYearWarranty {
    background-color: rgb(20, 9, 114);
    color: white;
    right: 28vw;
    width: 20vh;
    height: 20vh;
}

.gasSafeBadge {
    top: 8vh;
    right: 49vw;
    border-style: none;
    background-color: transparent;
    background-image: url("gas-safe-logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;

}

.DisplayNone {
    display: none;
}

.DisplayBlock {
    display: block;
}

.DisplayFlex {
    display: flex;
}

.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.hook {
    position: relative;
    z-index: 9999;
    transform: translate(-1vw, -1vh);
    background-image: url(img1.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100%;
    display: flex;
    flex-direction: row;
    height: 70vh;
    width: 100vw;
    clip-path: polygon(0% 0%,
            100% 0%,
            100% 60%,
            0% 100%);


    margin-bottom: 15vh;
}

#hookText {

    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 120%;
    font-size: 4.5vh;
    padding: 3vw;
    padding-left: 5vw;
    padding-top: 3vh;
    margin-left: 17vw;
    margin-top: 12vh;
    height: 60%;
    width: 40%;
    background-image: linear-gradient(to right, rgb(247, 217, 19), rgba(247, 217, 19, 0.686));
}


#underHookText {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;
    font-size: 1.5vh;
    line-height: 170%;
}




#gasSafeLogo {
    position: absolute;
    left: 80vw;
    top: 40vh;
    z-index: 25000;
    width: 18vw;
    height: 18vw;
    background-image: url("gas-safe-logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#getQuoteButton {
    position: fixed;
    z-index: 77778;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 30px 25px 4px rgba(12, 4, 81, 0.558);
    bottom: 3vh;
    left: 10vw;
    color: rgb(12, 4, 81);
    background-color: rgba(244, 244, 17, 0.851);
    width: auto;
    height: auto;
    padding: 15px;
    border-radius: 3em;
    border: double rgb(12, 4, 81) 8px;
   



}

#getQuoteButton span {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 2vh;
    letter-spacing: 1px;
    padding: 10px;
}

#getQuoteButton:hover {
    transition: 1s transform ease;
    transform: scale(1.2);
    text-decoration: none;

}
#getQuoteButton a::after {
  display: none;
}



#CHOffer,
#boilersOffer,
#plumbingOffer,
#boilerRepairsOffer,
#complianceOffer {
    position: relative;
    width: 100vw;
    height: 75vh;
    display: flex;
    flex-direction: column;
    padding: 1vh;
    margin-top: 5vh;
    margin-left: 10vw;
}


#boilersOffer,
#boilerRepairsOffer {
    transform: translate(0vh, 20vh);
}

.gradientWrapper {
    width: 100vw;
    transform: translate(0vw, -20vh);
    background-image: radial-gradient(circle at top left, rgb(12, 4, 81), rgba(19, 10, 96, 0.676));
    clip-path: polygon(0% 15%,
            100% 0%,
            100% 85%,
            0% 100%)
}

.gradientWrapperYellow {
    width: 100vw;
    transform: translate(0vw, -20vh);
    background-image: radial-gradient(circle at top left, #ff5c00, #ffbd00);
    clip-path: polygon(0% 15%,
            100% 0%,
            100% 85%,
            0% 100%)
}



#boilersOffer {
    width: 100vw;
    color: white;
}

.offerHeader {
    width: 45vw;
    font-size: 2em;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;

}




#centralHeatingOfferImage,
#boilersOfferImage,
#plumbingOfferImage,
#boilerRepairsOfferImage,
#complianceOfferImage {
    margin: 3vh;
    width: 35vh;
    height: 35vh;

}

#boilerRepairsOfferImage {
    height: 32vh;
    width: 45vh;
}

#complianceOfferImage {
    height: 45vh;
    width: 45vh;
}

#CHDescription,
#boilersDescription,
#plumbingDescription,
#boilerRepairsDescription,
#complianceDescription {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    margin-top: 3vh;
    font-size: 2.3vh;
    line-height: 130%;
    align-self: center;
    justify-self: center;
    width: 40vw;
    height: 30vh;
    text-wrap-style: balance;
}

.readMore {
    text-align: right;
    width: 100%;
    text-decoration: none;


}

.testimonialHighlight {
    font-size: 2.5vh;
    font-weight: bolder;
    margin: auto;
    text-align: center
}

.slide-in-element {
    /* Initial visual state */
    opacity: 0;
    transform: translateX(-500px);
    /* CHANGE: Slide in from the left by starting 50px left */
    /* Enable smooth transition for the properties we want to animate */
    transition: opacity 650ms ease-out, transform 500ms ease-out;
    /* Ensure the element starts in a known state */
    will-change: opacity, transform;
}

.from-left {
    transform: translateX(500px);
}

.from-top {
    transform: translateY(-500px);
}

.from-bottom {
    transform: translateY(500px);
}

/* 2. Active State: Fully visible and in its final position */
.slide-in-element.is-visible {
    opacity: 1;
    transform: translateX(0);
    /* CHANGE: End at the standard horizontal position */
}





.textHighlight,
.textHighlightBlue {
    background: linear-gradient(to right, rgba(247, 217, 19, 0.885), rgba(247, 217, 19, 0.568));
    padding: 0.2em;
    padding-left: 1em;
    padding-right: 2em;
    line-height: 1.4em;
}

.textHighlightBlue {
    background: linear-gradient(to right, rgba(20, 9, 114, 0.885), rgba(20, 9, 114, 0.568));
    color: white;
}


.footer {
    position: relative;
    bottom: 1px;
    background-color: rgb(20, 9, 114);
    color: white;
    width: 100vw;
    height: 35vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5vh;
    box-sizing: border-box;

}

.footer>* {
    margin: 1vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5vh;

}

#footerLogo {
    background-image: url(./logo_w.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    width: 30%;
    height: 100%;
    margin: auto;

}

.footerSeparator {
    width: 0.5px;
    height: 90%;
    background-color: white;

}

#footerNavigation {
    font-family: "Montserrat", sans-serif;
    margin: auto;
    width: 30%;
    display: flex;
    flex-direction: column
}

.footerLink,
#footerContactDetails>* {
    margin-left: 30%;
    letter-spacing: 2px;
    padding: 0.3vw;
    text-align: left;
    text-decoration: none;
    color: white;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2vh;

}

#footerContactDetails {
    align-self: self-start;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
    height: 50%;
    text-align: right;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2vh;
    padding: 1vh 3vh 1vh 1vh;
    margin-top: 3vh;

}

/* big tablet portrait */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .navbar {
        width: 100vw;
        height: 15dvh;

    }

    #logo {
        background-size: 60%;

    }

}



/* big tablet landscape */
@media (min-width: 1366px) and (max-width: 2048px) and (orientation: landscape) {

    .hook {
        transform: translate(-0.5vw, -3dvh);
        background-color: rgb(20, 9, 114);
        background-size: 60%;
        background-position: right;
        display: flex;
        flex-direction: row;
        height: 50vh;
        width: 100vw;
        clip-path: polygon(0% 0%,
                100% 0%,
                100% 80%,
                0% 100%);

    }

    .gradientWrapper {
        transform: translate(0vw, -20vh);
        background-image: radial-gradient(circle at top left, rgb(12, 4, 81), rgba(19, 10, 96, 0.676));
        clip-path: polygon(0% 15%,
                100% 0%,
                100% 85%,
                0% 100%)
    }

    .gradientWrapperYellow {
        transform: translate(0vw, -20vh);
        background-image: radial-gradient(circle at top left, rgb(247, 217, 19), rgba(247, 217, 19, 0.676));
        clip-path: polygon(0% 15%,
                100% 0%,
                100% 85%,
                0% 100%)
    }

    #boilersOffer {
        transform: translate(0vh, 20vh);
        width: 100%;
        height: 75vh;
        color: white;
    }

    .offerHeader {

        width: 40vw;

    }

    #hookText {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-style: normal;
        line-height: 120%;
        font-size: 4vh;
        color: white;
        padding-top: 2vw;
        margin-top: 3vh;
        margin-left: 6vw;
        height: 35%;
        background-image: none;
    }

    #underHook {
        font-size: 1vh;

    }

    .navbar {
        position: absolute;
        z-index: 22222;
        width: 100vw;
        height: 18vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;

    }

    .navbar>*>* {
        font-size: 1em;
    }

    #logo {
        background-size: 70%;
        width: 40vw;
        height: 10vh;
        align-self: flex-start;
        justify-self: flex-start;
    }



    #getQuoteButton {
        font-size: 1em;
        width: 15vw;
        padding-top: 1.2em;

    }

    #plumbingOfferImage {
        height: 35vh;
        width: 55vh;
        padding-right: 3vw;
        transform: translate(-7vh, -4.5vh);
    }

    .imageWrapper {
        background-image: linear-gradient(to right, rgb(20, 9, 114), rgba(20, 9, 114, 0.574));
        width: 20vh;
        height: 15vh;
        padding: 0px;
        transform: translate(3vh, 4vh);

    }





}

/* medium tablet portrait */
@media (min-width: 820px) and (max-width: 1180px) and (orientation: portrait) {
    .navbar {
        position: absolute;
        z-index: 22222;
        width: 100vw;
        height: 16dvh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        background-color: rgb(20, 9, 114);
        color: white;

    }


}

/* medium tablet landscape */
@media (min-width: 1180px) and (max-width: 1640px) and (orientation: landscape) {

    .wblogo {

        background-size: 70%;
        margin: auto;
        width: 15vh;
        height: 15vh;
        border-radius: 50%;
        transform: translate(20vw, -40vh);

    }

    #logo {
        background-size: 80%;

    }


}

/* small tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hook {
        transform: translate(-0.5vw, -8vh);
    }



}

/* small tablet landscape */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .hook {
        transform: translate(-0.5vw, -8vh);

    }

    .hookText {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-style: normal;
        line-height: 120%;
        font-size: 4vh;
    }

    #logo {
        width: 45vw;
        align-self: center;
        justify-self: center;
        background-size: 100%;
        background-position: center;
        margin: auto;


    }


}

/* big smartphone portrait */
@media (min-width: 430px) and (max-width: 932px) and (orientation: portrait) {
    .hook {
        transform: translate(-0.5vw, -5vh);
    }
}

/* big smartphone landscape */
@media (min-width: 932px) and (max-width: 1290px) and (orientation: landscape) {}

/* medium smartphone portrait */
@media (min-width: 393px) and (max-width: 852px) and (orientation: portrait) {}

/* medium smartphone landscape */
@media (min-width: 852px) and (max-width: 1179px) and (orientation: landscape) {}

/* small and medium smartphone portrait */
@media (min-width: 330px) and (max-width: 852px) and (orientation: portrait) {
    .navbar {
        padding-left: 7vw;
        padding-right: 7vw;
        height: 15vh;
        display: flex;
        box-sizing: border-box;

    }

    .navbar :not(#logo, #hamburger) {
        display: none;
    }

    #logo {
        background-size: 90%;
        width: 50vw;
        height: 10vh;
        margin-top: 4vh;
        margin-left: 0px;
        margin-right: auto;
    }

    #smallLogo {
        background-image: url(./logo_w.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        width: 60%;
        height: 10%;
        margin: auto;
        margin-bottom: 0px;
    }

    #hamburger {
        width: 48px;
        height: 48px;
        display: block;
        margin: auto;
        margin-right: 6vw;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60%;

    }

    .hamburgerIcon {
        background-image: url(hamburger.png);
    }

    .closeHamburgerIcon {
        background-image: url(close.png);

    }

    #naviDrawer {
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        background-color: rgb(20, 9, 114);
        display: flex;
        flex-direction: column;
        align-items: baseline;
        z-index: 88887;
        position: fixed;
        top: 20dvh;
        width: 55dvw;
        height: 70dvh;
        border-radius: 0px 15px 15px 0px;
        box-shadow: 0px 6px 6px -5px rgba(0, 0, 0, 0.2), 0px 6px 6px 0px rgba(0, 0, 0, 0.14), 0px 3px 10px 0px rgba(0, 0, 0, 0.12);
    }


    #mobileNavigation {
        z-index: 88888;
        background-color: rgb(20, 9, 114);
        margin: auto;
        margin-top: 2vh;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: stretch;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
    }

    #mobileNavigation>* {
        text-align: center;
        font-size: 16px;
        height: auto;
        padding: 16px;
        width: 100%;
        text-transform: uppercase;

    }

    #mobileNavigation>*>* {
        text-decoration: none;
        color: white;

    }

    .wblogo {
        width: 10vh;
        height: 10vh;
        margin-top: 20vh;
        transform: translate(20vw, -30vh);
        background-color: white;
        background-blend-mode: normal;
        background-size: 75%;

    }

    .hook {
        top: 15vh;
        background-image: url(img1.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: 170%;
        display: flex;
        flex-direction: row;
        height: 40vh;
        width: 100vw;
        clip-path: polygon(0% 0%,
                100% 0%,
                100% 90%,
                0% 100%);
        overflow: visible;

    }

    #hookText {
        font-size: 3vh;
        letter-spacing: 1px;
        font-weight: 700;
        width: 55%;
        height: 80%;
        margin-top: 2vh;
        line-height: 120%;
        margin-left: 10vw;
        position: relative;
        z-index: 8888;
    }

    #underHookText {
        width: 100%;
        font-size: 1.8vh;
        line-height: 110%;
        font-weight: 600;

    }

    #gasSafeLogo {
        overflow: visible;
        position: absolute;
        z-index: 25000;
        width: 20vw;
        height: 20vh;
        right: 14vw;
        left: auto;
        top: 40vh;
        background-image: url("gas-safe-logo.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    #getQuoteButton {
        text-align: center;
        font-size: 50%;
        font-weight: 300;
        width: 10vw;
        height: 10vw;
        padding-top: 10px;
        border-radius: 50%;
        bottom: 7vh;
        left: 2vw;

    }

    #offer {
        margin-bottom: 1vh;
    }

    #CHOffer,
    #boilersOffer,
    #plumbingOffer,
    #boilerRepairsOffer,
    #complianceOffer {
        width: 100vw;
        height: 45vh;
        display: flex;
        flex-direction: column;
        padding: 3vh;
        margin-left: 7vw;
        margin-right: 10vw;
        margin-top: 15vh;
    }


    #boilersOffer {
        transform: translate(0vw, 8vh);
    }

    #boilerRepairsOffer {
        transform: translate(0vh, 5vh);
    }

    #boilersRepairsOffer>* {
        color: white;
    }

    #complianceOffer {
        transform: translate(0vh, -30vh);
        margin-bottom: 5vh;
    }




    .offerHeader {
        width: 45vw;
        font-size: 2.7vh;
        font-family: Lato;
        font-weight: 700;
    }

    .textHighlightBlue {
        color: white;
    }


    #centralHeatingOfferImage,
    #boilersOfferImage {
        width: 18vh;
        height: 18vh;
        margin-right: 12vh;

    }


    #CHDescription,
    #boilersDescription,
    #plumbingDescription,
    #boilerRepairsDescription,
    #complianceDescription {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-style: normal;
        line-height: 120%;
        text-align: left;
        width: 40vw;
        height: 25vh;
    }

    #plumbingDescription {
        width: 50vw;

    }

    #plumbingOfferImage {
        height: 12vh;
        width: 16vh;
        padding-right: 3vw;
        transform: translate(-1vh, -1.5vh);
    }

    #boilerRepairsOfferImage {
        height: 13vh;
        width: 18vh;
        transform: translate(-3vh, -2vh);
    }

    #complianceOfferImage {
        height: 18vh;
        width: 18vh;
        transform: translate(-1.5vh, -1.5vh);
    }





    .gradientWrapper {
        transform: translate(0vw, -20vh);
        background-image: radial-gradient(circle at top left, rgb(12, 4, 81), rgba(19, 10, 96, 0.676));
        clip-path: polygon(0% 10%,
                100% 0%,
                100% 90%,
                0% 100%)
    }

    .gradientWrapperYellow {
        transform: translate(0vw, -20vh);
        background-image: radial-gradient(circle at top left, rgb(247, 217, 19), rgba(247, 217, 19, 0.676));
        clip-path: polygon(0% 10%,
                100% 0%,
                100% 90%,
                0% 100%)
    }

    .Experience {
        z-index: 77777;
        position: absolute;
        margin: auto;
        right: 48vw;
        top: -26vh;
        font-size: 70%;

    }

    .OneYearWarranty {
        top: 24vh;
        right: 30vw;
        width: 15vh;
        height: 15vh;
        font-size: 65%;
        line-height: 90%;

    }

    .gasSafeBadge {
        position: absolute;
        top: 36vh;
        right: 26vw;
        width: 22vh;
        height: 22vh;
        background-size: 70%;
    }


    .footer {

        bottom: 0px;
        height: 55vh;
        display: flex;
        flex-direction: column;
        padding: 0px;
        margin-top: 0px
    }

    #footerNavigation {
        display: none;
    }

    #footerContactDetails {
        font-family: "Montserrat", sans-serif;
        width: auto;
        padding: 10px;
        margin: auto;
        margin-top: 1vh;
        padding-bottom: 7vh;
        margin-bottom: 3vh;


    }

    #footerContactDetails>* {
        letter-spacing: 3px;
        font-size: 3vh;
        font-weight: 800;
        line-height: 140%;
        margin-left: 10px;
        text-align: center;
    }

    .footerSeparator {
        display: none;

    }

    #footerLogo {
        width: 50vw;
        height: 20vh;
        background-size: 100%;

    }
}

/* small smartphone landscape */
@media (min-width: 667px) and (max-width: 926px) and (orientation: landscape) {}



@keyframes slide-in {
    from {
        left: -101vw;
    }

    to {
        left: 0px;
    }
}

@keyframes slide-out {
    from {
        left: 0px;
    }

    to {
        left: -101vw;
    }
}

.closeDrawer {
    animation: slide-out 0.5s ease forwards;
}

.openDrawer {
    animation: slide-in 0.5s ease;
}