.static-logo {
    display: none;
    height: 75%;
    /* 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: 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.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;
    }

    .header-top {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }

    .header-top span {
        text-align: center;
    }

    .header-main {
        justify-content: space-between;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NAV ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    nav {
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        padding: 10%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        transition: 0.5s ease-in-out;
        transform: translateX(100vw);
        overflow: hidden;
    }

    .nav-item {
        width: 100%;
        padding: 30px 0 5px 0;
        margin: 0;
        color: white;
        border-bottom: 1px solid grey;
        border-radius: 0;
        font-size: 1.8rem;
    }

    .nav-item:hover, .nav-item:active {
        color: white;
        scale: 1.0;
    }

    .nav-cta {
        background-image: none;
        color: white;
        padding: 30px 0 5px 0;
        margin: 0;
        border-radius: 0;
        transition: 0;
    }

    .hamburger {
        display: block;
    }

    .nav-item {
        display: block;
    }

    .fa-sort-down {
        float: right;
        transform: translateY(30%);
    }

    .services-dropdown {
        position: static;
        top: 0;
        margin: 0;
        padding-top: 0;
        background-color: rgba(0, 0, 0, 0);
        opacity: 1;
        transform: scaleY(1);
        max-height: 0;
        overflow: hidden;
        transition: 0.3s;
    }
    
    .services-dropdown .nav-item {
        display: block;
        margin: 0;
        padding: 16px 30px;
        background-color: rgba(243, 243, 243, 0);
        backdrop-filter: blur(0px);
        color: white;
        border: none;
    }
    
    .services-dropdown .nav-item:last-child {
        border: none;
        border-radius: 0px;
        box-shadow: none;
    }
    
    .services-dropdown .nav-item:hover {
        background-color: rgba(0, 0, 0, 0);
    }
    
    .services-link-container {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .services-link {
        pointer-events: auto;
        border: none;
    }

    .services-link-container:hover .services-dropdown {
        top: 40px;
        transform: scaleY(1);
        opacity: 1;
        transition: 0.3s;
    }
    
    .services-link-container:hover .fa-sort-down {
        transform:  scaleY(1);
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HERO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .hero {
        flex-direction: column-reverse;
        margin-top: 110px;
    }

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

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

    .accreditations img {
        
    }

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

    .service-card-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .service-card {
        aspect-ratio: 2/1;
        font-size: 3vw;
    }


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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 button {
        margin: 18px 0;
    }

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


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

    .footer-column-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0;
    }
    
    .footer-column {
        width: 80%;
        text-align: center;
        padding: 10px 0;
    }

    .footer-column p {
        margin-bottom: 0.5em;
    }

    .footer-column table  {
        text-align: center;
    }

    .footer-column table  tr td:nth-child(n) {
        text-align: center;
        font-weight: 400;
    }

    .footer-logo {
        width: 70%;
        margin: 30px 0;
    }

    .social-icon {
        width: 100%;
    }

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

    .footer-bottom span, .footer-bottom a {
        font-size: 0.9rem;
    }

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

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

}

@media (max-width: 600px) {
    .service-card-container {
        grid-template-columns: 1fr;
    }

    .service-card {
        font-size: 7vw;
    }
}