.static-logo {
    display: none;
    height: 70%;
    /* Comment/uncommment below if circular logo */
    /* transform: translateY(16px);
    height: 120px;
    margin-top: 30px;
    background-color: white;
    border: 5px 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: 26px;
    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%;
        margin: 8px 0;
    }
}

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

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

@media (max-width: 1000px) {
    :root {
        font-size: 14px;
        --header-height: 50px;
    }

    h2 {
        text-align: left;
    }

    p, ul {
        font-size: 1.3rem;
        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;
    }

    .gas-safe, .oftec {
        height: 90px;
    }
    
    .oftec {
        height: 80px;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NAV ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .hamburger {
        display: block;
    }

   header nav {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: flex-start;
        height: 100vh;
        width: 100%;
        padding-top: var(--header-height);
        background-color: black;
        text-align: center;
        transform: translateX(200vw);
        overflow-x: hidden;
        overflow-y: scroll;
        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;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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;
    }

    .intro span {
        font-size: 2.2rem;
    }

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

    .accreditations img {
        
    }

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

    .service-card {
        flex-direction: column;
        text-align: left;
        background-color: var(--bg-color);
        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-2);
        text-align: left;
        font-size: 2rem;
        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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .reviews-section {
        flex-direction: column;
    }

    .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.4rem;
    }

    .five-stars {
        height: 1.4rem;
    }

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

    .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 a button {
        width: 100%;
        margin: 8px 0;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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: 2rem;
    }

    .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: 600px;
    }

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