/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  CONTENTS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 

Google fonts
Whole page styles
Typography
Buttons
Header
Logo
Homepage hero
Intro
Services section
Quote section
Latest Work section
Reviews sections
Why Choose Us section
CTA section
Footer
"show-on-scroll.js" classes

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  GOGLE FONTS   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Lato:wght@400;700;900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');


html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WHOLE PAGE STYLES  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */   
:root {
    --header-height: 65px;
    --logo-height: 60px;

    --accent-color-1: #092252;
    --accent-color-2: #3b7db3;
    --accent-color-3: #853d25;
    --accent-color-4: #bb8d70;
    --dark-grey: #575757;
    --medium-grey: #7f7f7f;
    --light-grey: #b9b9b9;
    --very-light-grey: #e9e9e9;
    --hamburger-filter: invert(10%) sepia(58%) saturate(2713%) hue-rotate(206deg) brightness(95%) contrast(97%);

    --gradient-1: linear-gradient(150deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0)0%);
    --gradient-2: linear-gradient(150deg, var(--accent-color-1) 0%, var(--accent-color-2) 100%);
    --gradient-3: linear-gradient(200deg, var(--accent-color-3) 0%, var(--accent-color-4) 100%);

    --paragraph-text: 'Poppins', sans-serif;
    --header-text: 'Trebuchet MS', sans-serif;

    --border-radius: 8px;
    --box-shadow: 5px 5px 18px 0px rgba(0,0,0,0.3);
    --clip-path-right: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    --clip-path-left: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    --horizontal-page-padding: 10%;
}

* {
    /* border: 1px dashed grey; */
    box-sizing: border-box;
 }

 html {
    scroll-behavior: smooth;
    font-family: var(--paragraph-text);
    font-size: 16px;
    background-color: white;
}

body {
    background-color: white;
}

section, footer {
    padding: 150px var(--horizontal-page-padding);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   TYPOGRAPHY  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */  
h1, h2, h3 {
    background: var(--gradient-2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--header-text);
    font-weight: 700;
    font-style: normal;
}

h2 {
    font-size: clamp(0.1rem, 9vw, 3rem);
    margin: 0;
}

h3 {
    font-size: clamp(0.1rem, 8vw, 2.2rem);
    font-family: var(--header-text);
    font-weight: 600;
}

p, ul {
    font-size: 1.2rem;
    line-height: 2rem;
    color: var(--dark-grey);
}

a {
    text-decoration: none;
}

.normal-link,
p a {
    text-decoration: underline;
    text-decoration-color: var(--accent-color-3);
    color: var(--dark-grey);
    font-weight: 600;
    transition: 0.3s;
}

.normal-link:hover {
    color: var(--accent-color-3);
}

.text-cols {
    columns: 3 300px;
    margin: 40px 0;
    column-gap: 40px;
}

.text-cols p, .text-cols ul {
    margin-top: 0;
}

.normal-list,
.services-list ul {
    color: var(--dark-grey);
    padding-left: 2rem;
    list-style-type: square;
    list-style-position: outside;
}


.normal-list li,
.services-list ul li {
    margin: 0;
    padding: 8px 0;
    line-height: 2rem;
    font-weight: 500;
}


.normal-list li::marker
.services-list li::marker {
    color: var(--accent-color-2);
}

.services-list .text-cols {
    background-color: white;
    padding: 1em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   BUTTONS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */  
button {
    padding: 0.3em 0.5em;
    margin: 10px 0;
    border-radius: var(--border-radius);
    font-family: var(--paragraph-text);
    font-size: 1.3rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--box-shadow);
    transition: 0.3s;
    cursor: pointer;
}

button:hover {
    scale: 1.03;
}

.button-dark {
   margin: 10px 20px 10px 0;
   background-color: var(--accent-color-1);
   background-image: var(--gradient-3);
   color: white;
   border: 2px solid transparent;
   padding: 0.5em 1em;

}

.button-light {
    padding: 0.5em 1em;
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid white;
    color: white;
}

.hero-button-light {
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid white;
    color: white;
    padding: 0.5em 1em;
}

.button-white {
    padding: 0.5em 1em;
    background-color: white;
    border: 2px solid white;
    color: var(--accent-color-1);
}

button i {
    margin-right: 10px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  HEADER  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header {
    display: flex;
    width: 100vw;
    height: var(--header-height);
    position: fixed;
    top: 0;
    padding: 0 var(--horizontal-page-padding);
    background-color: white;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
    transition: box-shadow 0.5s;
}

header nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    height: 100%;
    gap: 1em;
    transition: 0.3s;
}

header nav ul li {
    padding: 2px 0;
    list-style-type: none;
    position: relative;
}

header nav ul ul {
    width: auto;
    height: auto;
    margin-left: -1em;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    border-radius: var(--border-radius);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul ul li {
    display:  block;
    margin: 1em;
}

header nav li:hover ul {
    opacity: 1;
    pointer-events: auto;
}

header nav a {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--dark-grey);
    transition: color 0.3s, text-decoration-color 0.3s;
}

header nav a:hover {
    color: var(--accent-color-1);
}

.white-bg {
    background-color: rgba(255,255,255,1);
}

.dark-nav-text {
    color: var(--dark-grey);
}

.dark-nav-text:hover {
    text-decoration-color: var(--accent-color-4);
}

.header-shadow {
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

.dropdown-shadow {
    box-shadow: 0px 13px 18px -10px rgba(0,0,0,0.2);
}

.nav-cta {
    background-image: var(--gradient-3);
    padding: 0.4em 1em;
    border-radius: var(--border-radius);
    color: white;
}

.nav-cta img {
    height: 0.8em;
    filter: invert(100%);
    transform: scale(1.4) translate(-0.5em, 0.05em);
    margin-left: 0.8em;
}

.nav-cta:hover {
    color: white;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  LOGO  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.logo {
    display: block;
    height: var(--logo-height);
    z-index: 2;
    position: sticky;
    top: 0;
    transition: height 0.6s;
}

.fixed-logo { /* Added/removed with 'sticky-logo.js' */
    position: fixed;
    height: calc(var(--header-height)*0.65);
    top: calc(var(--header-height)/2);
    transform: translateY(-50%);
    /* Comment/uncommment below if circular logo */
    /* top: 5px;
    height: 120px;
    background-color: white;
    border-radius: 100%;
    border: 5px solid white;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); */
}

.header-box-shadow { /* Added/removed with "header.js" */
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  HOMEPAGE HERO  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hero {
    display: flex;
    min-height: 95vh;
    flex-wrap: wrap;
    margin-top: var(--header-height); /* To offset against fixed header*/
    margin-bottom: 0;
    padding: 0;
}

.hero-left, .hero-right {
    display: flex;
    align-items: center;
}

.hero-left {
    width: 50%;
}

.hero-right {
    width: 50%;
    padding-right: var(--horizontal-page-padding);
    padding-bottom: 3%;
    background-color: var(--accent-color-1);
    background-image:
        var(--gradient-1),
        url('../media/hero.jpg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-clip-path: var(--clip-path-right);
    clip-path: var(--clip-path-right);
    align-items: flex-end;
    justify-content: flex-end;
}

.hero-text-container {
    width: 100%;
    padding-left: calc(var(--horizontal-page-padding)*2);
    padding-right: 5%;
}

.hero-text-container h1 {
    font-size: clamp(3rem, 14vw, 4.5rem);
}

.hero-text-container h2 {
    font-size: 2rem;
}

.hero-text-container p {
    color: white;
}

.gas-safe {
    display: block;
    width: 20%;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ INTRO SECTION  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.intro {
    display: flex;
    align-items: center;
    background-image: var(--gradient-2);
    padding: 90px var(--horizontal-page-padding);
    gap: 5%;
    margin-top: 0px;
}

.left-column, .right-column {
    flex-basis: 100%;
}

.intro span, .intro p {
    background: none;
    color: white;
}

.intro span {
    display: block;
    padding: 30px 0;
    font-family: var(--paragraph-text);
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 500;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ACCREDITATIONS SECTION  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.accreditations {
    display: flex;
    padding: 60px var(--horizontal-page-padding);
    background-color: var(--very-light-grey);
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
}

.accreditations img {
    height: 70px;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SERVICES SECTION  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.services {
    text-align: center;
    padding-bottom: 80px;
}

.services p {
    width: 60%;
    margin: 0 auto;
    padding: 30px 0;
}

.service-card-container {
    margin: 20px 0;
}

.service-card {
    display: flex;
    min-height: 240px;
    align-items: center;
    margin: 30px 0;
    background-image: var(--gradient-2);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

.service-card:nth-child(even) {
    flex-direction: row-reverse;
}

.service-card-text, .service-card-image {
    height: 100%;
}

.service-card-text {
    width: 40%;
    padding: 20px;
    color: white;
    font-style: italic;
    font-weight: 500;
    text-align: center;
    font-size: 2rem;
    transition: 0.3s;
}

.service-card:nth-child(even) .service-card-text {
    text-align: center;
}

.service-card-image {
    display: block;
    height: 240px;
    width: 60%;
    background-color: var(--accent-color-1);
    background-image: var(--gradient-2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    -webkit-clip-path: var(--clip-path-left);
    clip-path: var(--clip-path-left);
    transition: 0.3s;
}

.service-card:hover .service-card-text {
    color: white;
    scale: 1.03;
}

.service-card:hover .service-card-image {
    filter: brightness(80%);
}

.service-card:nth-child(even) .service-card-image {
    -webkit-clip-path: var(--clip-path-right);
    clip-path: var(--clip-path-right);
}

/* .service-card:nth-child(1) .service-card-image  {
    background-image: url('../media/service-7.jpg');
} */

.service-card:nth-child(1) .service-card-image  {
    background-image: url('../media/service-1.jpg');
}

.service-card:nth-child(2) .service-card-image  {
    background-image: url('../media/service-2.jpg');
}

.service-card:nth-child(3) .service-card-image  {
    background-image: url('../media/service-3.jpg');
}

.service-card:nth-child(4) .service-card-image  {
    background-image: url('../media/service-4.jpg');
}

.service-card:nth-child(5) .service-card-image  {
    background-image: url('../media/service-5.jpg');
}

.service-card:nth-child(6) .service-card-image  {
    background-image: url('../media/service-6.jpg');
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ QUOTE SECTION  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.quote-section {
    display: flex;
    align-items: stretch;
    padding: 0;
    background-color: var(--very-light-grey);
}

.quote-section .left-column, .quote-section .right-column {
    flex-basis: 100%;
    padding: 90px 5%  70px var(--horizontal-page-padding);
}

.quote-section .right-column {
    background-color: var(--accent-color-1);
    background-image:
        var(--gradient-1),
        url('../media/hero-2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-clip-path: var(--clip-path-right);
    clip-path: var(--clip-path-right);
}

.quote {
    display: block;
    background: var(--gradient-2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--header-text);
    font-size: clamp(0.1rem, 7vw, 2rem);
    font-style: italic;
    font-weight: 600;
}

.quote::before {
    content: url('../media/svg/quote-left-solid.svg');
    width: 3em;
    height: 3em;
    margin-right: 16px;
    transform: translateY(10px);
}

.quote::after {
    content: url('../media/svg/quote-right-solid.svg');
    margin-left: 16px;
    margin-top: -16px;
    transform: translateY(16px);
}

.quote::before, .quote::after {
    display: inline-block;
    width: 50px;
    height: 50px;
    filter: invert(82%) sepia(14%) saturate(0%) hue-rotate(280deg) brightness(80%) contrast(90%);
}

.quote-name {
    display: block;
    float: right;
    font-family: 'Caveat', cursive;
    font-size: clamp(2rem, 8vw, 2.4rem);
    color: grey;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ LATEST WORK SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.latest-work-section {
    display: flex;
    margin-bottom: 7%;
    align-items: center;
    gap: 5%;
}

.latest-work-section .left-column, .latest-work-section .right-column {
    flex-basis: 100%;
}

.latest-work-section .left-column {
    display: flex;
}

.latest-work-section .right-column {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.latest-work-section .left-column .image-container {
    width: 50%;
}

.latest-work-image-1, .latest-work-image-2 {
    display: block;
    width: 100%;
    border: 12px solid white;
    border-radius: 10%;
    box-shadow: var(--box-shadow);
    scale: 1.3;
}

.latest-work-image-1 {
    margin-top: 25%;
    transform: translate(10%, 10%);
}

.latest-work-image-2 {
    margin-bottom: 25%;
    transform: translate(-10%, 10%);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ REVIEWS SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.home-reviews-section {
    display: flex;
    align-items: center;
    padding: 0;
    background-color: var(--very-light-grey);
}

.home-reviews-section .left-column,
.home-reviews-section .right-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-basis: 100%;
    padding: 90px 0;
    height: 700px;
}

.home-reviews-section .left-column {
    padding-left: var(--horizontal-page-padding);
    padding-right: 2.5%;
}

.home-reviews-section .right-column {
    padding: var(--horizontal-page-padding);
    background-image: var(--gradient-2);
    -webkit-clip-path: var(--clip-path-right);
    clip-path: var(--clip-path-right);
}

.review-quote-icon {
    color: white;
    margin: 0 auto;
    font-size: 5rem;
}

.review-slide {
    display: none;
}

.review-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.review-text {
    color: white;
    font-size: 1.8rem;
    font-weight: 400;
    font-style: italic;
    line-height: 2.4rem;
}

.review-name {
    font-family: 'Caveat', cursive;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.five-stars {
    display: inline-block;
    height: 2rem;
    opacity: 0.7;
}

.dots {
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: rgba(255, 255, 255, 0.7);
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: 0.3} 
  to {opacity: 1}
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WHY CHOOSE US SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.why-choose-us-section {
    text-align: center;
}

.why-choose-us-section p {
    width: 60%;
    margin: 0 auto;
    padding: 30px 0;
}

.reason-container {
    display: flex;
    justify-content: center;
}

.reason {
    flex-basis: 100%;
    margin: 50px;
    text-align: center;
}

.reason i {
    display: block;
    font-size: 7vw;
    background: var(--gradient-2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reason span {
    display: block;
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 500;
    margin: 20px 0;
    color: var(--accent-color-1);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CTA SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.CTA-section {
    display: flex;
    align-items: stretch;
    padding: 0;
    background-image: var(--gradient-2);
}

.CTA-section .left-column, .CTA-section .right-column {
    flex-basis: 100%;
}

.CTA-section .left-column {
    background-color: var(--accent-color-1);
    background-image:
        var(--gradient-1),
        url('../media/hero-3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-clip-path: var(--clip-path-left);
    clip-path: var(--clip-path-left);
}

.CTA-section .right-column {
    padding: 60px var(--horizontal-page-padding) 60px 5%;
    text-align: center;
}

.CTA-section .right-column span {
    display: block;
    padding: 30px 0;
    font-size: clamp(0.1rem, 10vw, 2.4rem);
    font-weight: 500;
    font-style: italic;
    color: white;
}

.CTA-section button {
    margin-bottom: 46px;
    margin-right: 20px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer {
    background-color: rgb(31, 31, 31);
    box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.5) inset;
    padding-bottom: 0;
}

.footer-column-wrapper {
    display: flex;
    align-items: center;
}

footer .left-column, footer .right-column {
    flex-basis: 100%;
}

footer .right-column {
    text-align: right;
}

footer .right-column span {
    display: block;
}

.logo-mask {
    width: 200px;
    aspect-ratio: 1;
    display: inline-block;
    -webkit-mask-image: url("../media/logo/logo.png");
    mask-image: url("../media/logo/logo.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

.logo-mask-background {
    width: 100%;
    height: 100%;
    background-color: grey;
}

.contact-type {
    font-size: 3rem;
    font-weight: 500;
    color: rgb(132, 178, 230);
    font-family: var(--paragraph-text);
    margin-bottom: 4px;
    /* filter: brightness(200%);
    opacity: 0.9; */
}

.contact-info {
    margin-bottom: 30px;
    font-size: 1.9rem;
    color: white;
}

.contact-info a  {
    display: inline-block;
    padding: 5px;
    font-size: 3rem;
    color: white;
    transition: 0.3s;
}

.contact-info a:hover {
    opacity: 0.7;
}

.footer-logo {
    width: 40%;
    /* filter: grayscale(1) brightness(100) contrast(100); */
}

.footer-bottom {
    width: 100%;
    border-top: 1px solid grey;
    color: grey;
    margin-top: 90px;
    padding: 16px 0;
}

.footer-bottom span {
    display: inline-block;
}

.footer-bottom a {
    color: grey;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.built-by {
    float: right;
    text-align: right;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ "show-on-scroll.js" classes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hidden-until-scroll {
    opacity: 0;
    transition: height 0.5s, box-shadow 0.5s, opacity 1s;
}

.show-on-scroll {
    opacity: 1;
}

.delay-200ms{
    transition-delay: 200ms;
}

.delay-300ms{
    transition-delay: 300ms;
}

.delay-400ms{
    transition-delay: 400ms;
}

.delay-500ms{
    transition-delay: 500ms;
}

.delay-600ms{
    transition-delay: 600ms;
}

.delay-700ms{
    transition-delay: 700ms;
}

.delay-800ms{
    transition-delay: 800ms;
}

.delay-900ms{
    transition-delay: 900ms;
}

.delay-1000ms{
    transition-delay: 1000ms;
}

.form-section {
    display: flex;
    background-color: var(--very-light-grey);
    align-items: center;
    gap: 5%;
}

.form-section .left-column, .form-section .right-column {
    flex-basis: 100%;
}

form {
    padding: 60px 60px 30px 60px;
    background-color: white;
    border-radius: 20px;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.form-wrapper {
    padding-bottom: 30px;
}

.form-element {
    display: flex;
    flex-basis: 100%;
    padding: 20px 0;
    font-size: 1.2rem;
}

.form-field {
    display: inline;
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--light-grey);
    padding: 0 0 4px 0;
    overflow-x: hidden;
    color: var(--dark-grey);
    transition: 0.3s;
}

.form-field::placeholder {
    color: var(--medium-grey);
}

.form-field:focus {
    background-color: rgb(238, 238, 238);  
}

.form-icon {
    display: block;
    float: left; /* To equalize width */
    margin-right: 10px;
    color: var(--accent-color-2);
    width: 20px;
}

#message  {
    height: 36px;
}

#message:focus {
    height: 200px;
    overflow-y: auto;
}

.CTA {
    display: block;
    height: 400px;
}


@media (max-width: 1000px) {
    .form p {
        width: 100%;
    }
    
    .form-section {
        flex-direction: column;
    }

    form {
        margin-top: 30px;
        padding: 60px 30px 40px 20px;
    }
}

.gallery-section p {
    text-align: center;
    width: 60%;
    margin: 0 auto;
  }
  
  .gallery-section {
    background-color: white;
  }

  .gallery-section > p:nth-child(1) {
    margin-bottom: 90px;
  }
  
  .gallery-section:nth-child(even) {
    background-color: var(--very-light-grey);
  }
  
  .gallery {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 90px;
  }
  
  .gallery-item {
    background-color: var(--very-light-grey);
    border-radius: var(--border-radius);
    transition: 0.3s;
    aspect-ratio: 1;
  }
  
  .gallery-item img {
    display: block;
    width: 100%;
    border-radius: var(--border-radius);
  }
  
  .gallery-item:hover {
      transform: scale(1.01);
      filter: brightness(90%);
      overflow: hidden;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  @media(max-width: 1000px) {
    .gallery-section p {
        width: 100%;
        text-align: left;
    }

    .gallery {
        grid-template-columns: auto auto auto;
    }
  }

  @media (max-width: 500px) {
    .gallery {
        grid-template-columns: auto auto;
    }
  }

  :root {
    --profile-photo-width: 150px;
}

.review-section {
    background-color: var(--very-light-grey);
}

.review-section > p {
    width: 60%;
    text-align: center;
    margin: 0 auto;
}

.review-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0 3%;
    margin-top: 130px; 
    max-height: 3000px; /* Play around with this to get the reviews to fit nicely into two columns */
}


.review-card {
    width: 48%;
    position: relative;
    margin-bottom: 120px;
    padding: 5% 3%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 5px 10px grey;
}

.review-card img {
    display: block;
    width: var(--profile-photo-width); 
    position: absolute;
    top: calc(var(--profile-photo-width)/-2);
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid white;
    border-radius: 50%;
    box-shadow: 0px 5px 10px grey;
}

.review-card-text {
    margin-top: calc((var(--profile-photo-width)/2));
}

.review-card-text i {
    color: var(--light-grey);
}

.review-card-text::before {
    content: url('../media/svg/quote-left-solid.svg');
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 0px;
}

.review-card-text::after {
    content: url('../media/svg/quote-right-solid.svg');
    display: inline-block;
    margin-left: 0px;
}

.review-card-text::before, .review-card-text::after {
    display: inline-block;
    width: 30px;
    height: 30px;
    filter: invert(82%) sepia(14%) saturate(0%) hue-rotate(280deg) brightness(80%) contrast(90%);
}

.location {
    float: right;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--medium-grey);  
}

.review-name {
    color: grey;
    display: inline;
    float: right;
}

.review-stars {
    display: inline;
    color: var(--accent-color-2);
}

@media (max-width: 1000px) {
    .review-grid {
        max-height: none;
        height: auto;
    }

    .review-card {
        width: 100%;
        padding: 5% 5%;
    }

    .review-section > p {
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 450px) {
    .review-card-text {
        font-size: 1.2rem;
    }
    
    .review-name {
        font-size: 1.2rem;
    }
}

.services-list {
    background-color: var(--very-light-grey);
}

.services-list p {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.text-cols {
    margin: 80px 0;
}




@media (max-width: 1000px) {
    .services-list {
        flex-direction: column;
    }

    .services-list p {
        text-align: left;
        width: 100%;
    }

    .hero-text-container p {
        text-align: center;
    }

}


.static-logo {
    display: none;
    height: 65%;
    /* Comment/uncommment below if circular logo */
    /* transform: translateY(16px);
    height: 90px;
    background-color: white;
    border-radius: 100%;
    border: 2px solid white;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); */
}

.static-logo img {
    height: 100%;
}

.hamburger {
    display: none;
    content: url(../media/svg/bars-solid.svg);
    width: 32px;
    filter: var(--hamburger-filter);
    transition: 0.5s;
    z-index: 3;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MEDIA QUERIES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (max-width: 1500px) {
    :root {
        --horizontal-page-padding: 5%;
    }
}

@media (max-width: 1350px) {
    .CTA-section a button {
        width: 70%;
    }
}

@media (max-width: 1200px) {
   .hero-left {
        width: 60%;
   }

   .hero-right {
        width: 40%;
   }
}

@media (max-width: 1000px) {
    :root {
        --header-height: 60px;
    }

    h2 {
        text-align: left;
    }

    p, ul {
        font-size: 1.1rem;
        line-height: 1.8rem;
    }

    a:has(button), .button-light, .button-dark, .hero-button-light, .button-white {
        display: block;
        width: 100%;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: block;
    }

    header {
        justify-content: space-between;
    }

    section, footer {
        padding: 100px var(--horizontal-page-padding); /* Reduce top/bottom padding on mobile? */
    }

    .left-column, .right-column {
        width: 100%;
    }

    header {
        justify-content: space-between;
    }

    header nav {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        height: 100vh;
        width: 100%;
        padding-top: var(--header-height);
        background-color: black;
        text-align: center;
        transform: translateX(200vw);
        overflow: hidden;
        background-color: black;
        transition: 1s ease;
    }

    header nav ul {
        flex-direction: column;
        height: auto;
        width: 100%;
        gap: 1.5em;
    }

    header nav ul li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    header nav a {
        font-size: 1.6rem;
        color: white;
    }

    header nav a:hover {
        text-decoration-color: var(--accent-color-1);
    }

    header nav ul ul {
        width: auto;
        height: auto;
        max-height: 0;
        margin: 0 0 0 -1em;
        padding: 0;
        position: static;
        overflow: hidden;
        background-color: black;
        opacity: 1;
        transition: 0.5s ease;
    }

    header nav ul ul li a {
        font-size: 1.3rem;
    }

    li:has(ul) > a {
        margin: 0 0 0 0.5em;
        pointer-events: none;
    }

    li:has(ul) > a::after {
        display: inline-block;
        content: '>';
        font-family: 'Quicksand', sans-serif;
        font-weight: 700;
        font-size: 0.8em;
        transform: rotate(90deg) translate(0em,-0.3em) scaleX(0.7);
        color: white;
    }

    .slide-nav {
        transform: translateX(0vw);
    }

    .dropdown-accordian {
        max-height: 300px;
        padding: 0.4em 0;
        overflow: visible;
        pointer-events: auto;
        background-color: black;
    }

    .hamburger {
        display: block;
    }
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HERO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .hero {
        flex-direction: column-reverse;
    }

    .hero-left, .hero-right {
        width: 100%;
    }

    .hero-left {
        min-height: 70vh;
    }

    .hero-right {
        height: 30vh;
        -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 5% 100%);
        clip-path: polygon(30% 0, 100% 0, 100% 100%, 5% 100%);
    }

    .hero-text-container {
        padding: var(--horizontal-page-padding);
    }

    .hero-button-container {
        margin: 30px 0;         
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ INTRO SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .intro {
        flex-direction: column;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ACCREDITATIONS SECTION  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .accreditations {
       
    }

    .accreditations img {
        
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SERVICES SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .services p {
        width: 100%;
        text-align: left;
    }

    .service-card {
        flex-direction: column;
        text-align: left;
        background-color: white;
        background-image: none;
        box-shadow: none;
    }

    .service-card:nth-child(even) {
        flex-direction: column;
    }

    .service-card:nth-child(even) .service-card-text {
        text-align: left;
    }

    .service-card-text, .service-card-image {
        width: 100%;
        color: var(--accent-color-1);
        text-align: left;
        font-size: 1.8rem;
        font-weight: 500;
    }

    .service-card-text {
        padding: 20px 0;
    }

    .service-card-image, .service-card:nth-child(even) .service-card-image {
        -webkit-clip-path: polygon(0 0, 95% 0, 70% 100%, 0 100%);
        clip-path: polygon(0 0, 95% 0, 70% 100%, 0 100%);
    }

    .service-card:hover .service-card-text {
        color: var(--accent-color-1);
        scale: 1;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ QUOTE SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .quote-section {
        flex-direction: column-reverse;
    }
    .quote-section .left-column, .quote-section .right-column {
        padding: 90px 5%  70px var(--horizontal-page-padding);
    }

    .quote-section .right-column {
        -webkit-clip-path: none;
        clip-path: none;
        width: 100%;
        aspect-ratio: 4/3;
    }

     /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ LATEST WORK SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .latest-work-section {
        flex-direction: column;
    }

    .latest-work-section .left-column {
        margin-bottom: 30%;
    }

     /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ REVIEWS SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .home-reviews-section {
        flex-direction: column;
    }

    .home-reviews-section .right-column {
        display: flex;
        align-items: center;
        padding-top: 90px;
        padding-bottom: 90px;
        -webkit-clip-path: none;
        clip-path: none;
    }

    .slideshow-container {
        height: 40vh;
    }

    .review-slide {
        height: 10vh;
    }

    .review-text {
        font-size: 1.2rem;
    }

    .five-stars {
        height: 1.4rem;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WHY CHOOSE US SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .why-choose-us-section p {
        width: 100%;
        text-align: left;
    }

    .reason-container {
        flex-direction: column;
    }

    .reason i {
        font-size: 30vw;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WHY CHOOSE US SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .CTA-section {
        flex-direction: column;
    }

    .CTA-section .left-column {
        display: none;
    }

    /* CTA SECTION*/
    .CTA-section button {
        margin: 18px 0;
    }

    .CTA-section a button {
        width: 100%;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTER  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    footer {
        padding-bottom: 0;
    }

    .footer-column-wrapper {
        flex-direction: column-reverse;
    }

    .footer-column-wrapper .left-column {
        text-align: center;
        padding-top: 90px;
    }

    .footer-column-wrapper .right-column {
        text-align: center;
    }

    .footer-logo {
        width: 50%;
    }

    .contact-info {
        font-size: 1.6rem;
    }

    .footer-bottom {
        text-align: center;
    }

    .built-by, .copyright {
        display: block;
        float: none;
        text-align: center;
    }

    .copyright {
        padding-bottom: 12px;
    }
 

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ "header.js" Classes  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .move-on-screen {
        transform: translateX(0);
    }

    .move-off-screen {
        transform: translateX(100vw);
    }

    .hamburger-cross {
        content: url(../media//svg/xmark-solid.svg);
        filter: grayscale(100%) brightness(100%) contrast(100%) invert(100%);
        transform: rotateY(180deg);
    }

    .expand-services-dropdown {
        max-height: 200px;
    }

    .rotate-arrow {
        transform: translateY(30%) scaleY(-1) !important; 
    }

}

header {
    justify-content: space-between;
}

.show-on-mobile {
    display: block;
}

.static-logo {
    /* Comment/uncomment if circular logo */
    /* transform: translateY(30px);
    height: 120px;
    background-color: white;
    border-radius: 100%;
    border: 5px solid white;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); */
}

.hero {
    background-image: var(--gradient-2);
    min-height: 40vh;
}

.hero-right {
    background-image:
        var(--gradient-1),
        url('../media/hero.jpg');
}

.hero-text-container h1 {
    background: none;
    background-clip: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: white;
    font-size: clamp(0.1rem, 10vw, 3.5rem);
    text-align: left;
}

@media (max-width: 1000px) {
    .hero {
        background-image: none;
        min-height: 30vh;
    }
    
    .hero-text-container h1 {
        text-align: center;
    }
    
    .hero-left {
        min-height: 30vh;
        background-image: var(--gradient-2);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);     
    }

    .hero-right {
        display: none;
    }

    .static-logo {
        /* height: 75%; */
        /* transform: translateY(16px);
        height: 90px;
        background-color: white;
        border-radius: 100%;
        border: 2px solid white;
        box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); */
    }
}


.home-hero {

    height: 100vh;
}

@media (max-width: 1000px) {
    .home-hero {

        height: 95vh;
    }

    .home-hero .hero-left {
        height: 95vh;
    }
}