@media screen and (max-width: 768px) {

    :root {
        --fs-display: 50px;
        --lh-display: 54px;

        --fs-h1: 40px;
        --lh-h1: 42px;

        --fs-h2: 36px;
        --lh-h2: 42px;

        --fs-h3: 32px;
        --lh-h3: 36px;

        --fs-h4: 26px;
        --lh-h4: 32px;

        --fs-h5: 22px;
        --lh-h5: 28px;

        --fs-h6: 16px;
        --lh-h6: 24px;

        --fs-p: 16px;
        --lh-p: 24px;

        --fs-text-16: 12px;
        --lh-text-16: 16px;

        --fs-text-14: 12px;
        --lh-text-14: 16px;

        --fs-cta-2: 16px;
        --lh-cta-2: 24px;

        --fs-cta-1: 16px;
        --lh-cta-1: 24px;
    }


    /*
        Top bar
    */
    #top-bar {
        overflow: scroll;
    }

    #top-bar > a,
    #top-bar > div {
        flex: 1 0 auto;
        padding: 15px 13px;
    }

    header {
        padding: 13px 0 15px;
    }

    .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

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


    .logo {
        justify-content: flex-start !important;
    }

    .logo img {
        height: 30px;
    }

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

    .header-contact-link,
    .header-quote-link {
        display: none;
    }

    .header-contact .cta-phone {
        padding: 2px 10px;
        border-width: 2px;
        border-style: solid;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
        font-size: 12px;
    }

    .header-contact .cta-phone i {
        font-size: 14px;
    }


    .mobile-menu-toggle {
        display: block;
    }

    .mobile-menu-panel {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: var(--color-primary-black);
        padding: 32px 14px 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .35s ease, opacity .25s ease, visibility .25s ease;
    }

    .mobile-menu-panel.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .mobile-menu-close {
        position: absolute;
        top: 32px;
        right: 14px;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-primary-green);
        font-size: 24px;
        line-height: 1;
        z-index: 2;
    }

    .mobile-menu-nav {
        margin-top: 45px;
        position: relative;
        z-index: 2;
    }

    .mobile-menu-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-nav li {
        border-top: 1px solid #d9d9d9;
    }

    .mobile-menu-nav li:last-child {
        border-bottom: 1px solid #d9d9d9;
    }

    .mobile-menu-nav a {
        display: block;
        padding: 13px 0 14px;
        color: var(--color-primary-white);
        font-size: 32px;
        line-height: 36px;
        font-weight: 500;
        letter-spacing: -0.02em;
    }

    .mobile-nav-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 0 14px;
        background: transparent;
        border: 0;
        color: var(--color-primary-white);
        font-size: 32px;
        line-height: 36px;
        font-weight: 500;
        letter-spacing: -0.02em;
        font-family: inherit;
        text-align: left;
    }

    .mobile-nav-dropdown-toggle i {
        font-size: 22px;
        transition: transform .2s ease;
        flex-shrink: 0;
    }

    .mobile-nav-has-dropdown.is-open .mobile-nav-dropdown-toggle i {
        transform: rotate(180deg);
    }

    .mobile-nav-dropdown {
        display: none;
        padding-bottom: 30px;
    }

    .mobile-nav-has-dropdown.is-open .mobile-nav-dropdown {
        display: block;
    }

    .mobile-nav-dropdown a {
        padding: 8px 16px;
        font-size: 20px;
        line-height: 24px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .mobile-menu-socials {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 17px;
        margin-top: 32px;
    }

    .mobile-menu-socials a {
        color: rgba(255, 255, 255, .5);
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        letter-spacing: -0.02em;
    }

    .mobile-menu-shape {
        position: absolute;
        left: 50%;
        bottom: -185px;
        width: 520px;
        height: 340px;
        transform: translateX(-50%);
        background: var(--color-primary-green);
        border-radius: 50% 50% 0 0;
        opacity: 1;
    }

    .mobile-menu-shape::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .16;
        background-image: radial-gradient(rgba(0, 0, 0, .45) 1px, transparent 1px);
        background-size: 9px 9px;
    }

    /* Home page cover */
    #cover {
        min-height: 174vw;
        height: auto;
        padding-bottom: 20px;
    }

    .video-toggle {
        display: none;
    }

    .cover-title {
        text-align: left;
    }

    .cover-title p {
        margin-bottom: 80px;
    }

    .cover-title p br {
        display: none;
    }

    .cover-ctas {
        flex-direction: column;
        gap: 15px;
    }

    .cover-ctas a {
        height: 40px;
        width: 100%;
        justify-content: center;
    }

    .cover-bottom-tags {
        margin-top: 50px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .cover-bottom-tags > span {
        width: calc(50% - 7.5px);
        border-radius: 6px;
        padding: 7px 10px;
        gap: 3px;
    }

    .cover-bottom-tags > span svg {
        margin-right: 3px;
        height: 16px;
    }

    .p-100 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Home page services */
    #home-services {
        padding-bottom: 0;
    }

    #home-services h2 {
        margin-bottom: 30px;
    }

    .card-content > img {
        margin-top: 15px;
        margin-left: 10px;
        height: 24px;
    }

    .card-content > h3 {
        margin: 75px 0 75px 10px;
    }

    .cta-1 {
        padding: 8px 30px;
    }

    /* Need dumpster */
    #need-dumpster h2 {
        margin-bottom: 20px;
    }

    .col-content {
        margin-top: 50px;
        margin-bottom: 40px;
    }

    #need-dumpster ul li {
        padding: 10px 0;
    }

    .dumpsterSlider {
        padding: 20px 15px;
        margin-bottom: 15px;
    }

    .dumpster-slider-nav {
        padding: 10px;
        margin-top: 30px;
    }

    .dumpster-nav-btn {
        font-size: 12px;
        line-height: 16px;
        padding: 4px 8px;
    }

    .cta-holder > .row {
        gap: 15px;
    }

    #sameday {
        display: none;
    }

    .choose-dumpster-slider-wrapper {
        margin-top: 50px;
    }

    .choose-dumpster-slider-wrapper .title .cta-1 {
        display: none;
    }

    .dumpster-mobile-slider {
        background: var(--color-primary-white);
        border-radius: 8px;
        padding: 15px;
    }

    .dumpster-mobile-slider article {
        padding: 0;
    }

    .dumpster-mobile-card__image {
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        height: 200px;
        margin-bottom: 20px;
    }

    .dumpster-mobile-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dumpster-mobile-card__row {
        padding: 10px 0;
        border-bottom: 1px solid;
    }

    .dumpster-mobile-card__row span {
        display: block;
    }

    .dumpster-mobile-card__row:last-child {
        border-bottom: none;
    }

    .dumpster-mobile-card__row .h6 {
        margin: 0;
    }

    .dumpster-mobile-card__row .text-16 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .dumpster-mobile-slider-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
    }

    .dumpster-mobile-pagination {
        text-align: center;
    }

    .dumpster-mobile-pagination button {
        background: none;
        width: auto;
        height: auto;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.01em;
        font-weight: 400;
    }

    .dumpster-mobile-slider .swiper-nav {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background-color: var(--color-primary-black);
    }

    .dumpster-mobile-card__btn {
        margin-top: 25px;
        text-align: center;
    }

    #how-it-works h2 {
        margin-bottom: 30px;
    }

    .step-card .sep {
        margin-bottom: 30px;
    }

    .step-card h4 {
        margin-bottom: 20px;
        padding-right: 40px;
    }

    .step-card h5 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    #why-lombardo h2 {
        margin-bottom: 10px;
    }

    .why-lines .row .why-title {
        gap: 20px;
    }

    .why-title img {
        width: 30px;
    }

    .why-lines .row h3 {
        font-size: 22px;
    }

    .why-lines .row p {
        padding-left: 50px;
    }

    .why-lines .row p br {
        display: none;
    }

    .pb-100 {
        padding-bottom: 50px;
    }

    #reviews {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #reviews h2 {
        text-align: left;
        margin-bottom: 50px;
    }

    .reviewsSwiperContainer {
        padding: 0 10px;
        gap: 25px;
        flex-direction: column;
    }

    .reviewsSwiperContainer .swiper-title {
        width: 100%;
        padding-bottom: 0;
    }

    .reviewsSwiper {
        width: 100%;
    }

    .review-card {
        padding: 30px 15px;
    }

    .review-card .text-16 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 0;
        padding-right: 40px;
    }

    #reviews .cover-bottom-tags {
        margin-top: 50px;
    }

    #real-work {
        padding-top: 50px;
    }

    .socialSwiper, .workSwiper {
        padding: 0 10px;
    }

    .socialSwiper .swiper-wrapper,
    .workSwiper .swiper-wrapper {
        margin-bottom: 15px;
    }

    #cta-bg, #cta-bg.c-cta-bg {
        padding: 70px 15px 30px;
    }

    #cta-bg h2 {
        margin-bottom: 50px;
    }

    #cta-bg.c-cta-bg h2 {
        margin-bottom: 24px;
    }

    #cta-bg.c-cta-bg h6 {
        margin-bottom: 70px;
    }

    #cta-bg .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    #cta-bg .cta-buttons a {
        justify-content: center;
    }

    footer {
        padding-top: 40px;
    }

    .logo-footer {
        margin-bottom: 40px;
    }

    .text-footer {
        gap: 20px;
        margin-bottom: 40px;
    }

    .logo-footer img {
        width: 160px;
    }

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

    .widget-title::before {
        position: relative;
        left: auto;
        top: auto;
        display: block;
        margin-bottom: 10px;
    }

    .footer-widget .text-tertiary-white2 {
        color: rgba(255, 255, 255, .5);
    }

    .footer-widget:not(:last-child) {
        margin-bottom: 24px;
    }

    .footer-widget ul li:not(:last-child) {
        margin-bottom: 6px;
    }

    .social-widget ul {
        flex-direction: column;
        gap: 5px;
    }

    .footer-widget ul li:last-child {
        margin-bottom: 0;
    }

    .footer-widget ul li {
        line-height: 30px;
    }

    footer .text-16 {
        font-size: 13px;
    }

    #dumpster-sizes h2 {
        margin-bottom: 24px;
    }

    #dumpster-sizes h6 {
        margin-bottom: 20px;
    }

    #sizes-buttons {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: space-between;
    }

    .dumpster-sizes__nav-btn {
        width: calc((100% - 30px) / 3);
    }

    .dumpster-sizes-slider-wrapper {
        margin-top: 20px;
    }

    #dumpster-sizes .dumpster-sizes-slider-wrapper .swiper-slide .slide-photo {
        border-bottom: 1px solid rgba(2, 2, 2, .25);
        margin-bottom: 15px;
    }

    #dumpster-sizes .dumpster-sizes-slider-wrapper .swiper-slide .slide-photo img {
        height: 280px;
        margin: 0 auto;
        display: block;
    }

    .dumpster-sizes-slider-wrapper .slide-content {
        margin-top: 15px;
        flex-direction: column;
        padding: 0 0 6px;
        border-top: none;
    }

    .slide-content .sc-left {
        margin-bottom: 20px;
    }

    .slide-content .sc-left .h6 {
        margin-bottom: 36px;
    }

    .dumpster-details-toggle {
        font-weight: 600;
        color: var(--color-primary-pink);
    }

    .dumpster-details-toggle i {
        transition: transform .25s ease;
        display: inline-block;
    }

    .dumpster-details-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    #roofing .h1 {
        margin-bottom: 20px;
    }

    #roofing h6.text-primary-white {
        margin-bottom: 30px;
        padding-right: 20%;
    }

    #roofing .table-container .table-row {
        padding: 15px;
    }

    #how-it-works_dr {
        padding-top: 16px;
    }

    #how-it-works_dr .step-card h4 {
        padding-right: 0;
        min-height: auto;
        margin-bottom: 50px;
    }

    #how-it-works_dr .step-card img {
        height: 80px;
    }

    .material-card {
        margin-bottom: 15px;
        padding: 24px 16px;
    }

    .material-card__title h4 {
        margin-bottom: 32px;
    }

    .material-card__content {
        margin-top: 24px;
        font-weight: 500;
    }

    .material-card__image img {
        width: 40px;
    }

    #faq .h1 {
        margin-bottom: 32px;
    }

    .accordion-item {
        padding: 13px 16px;
    }

    .accordion-header .h4 {
        padding-right: 30px;
    }

    #rental-details h2 {
        margin-bottom: 30px;
    }

    .rental-blocks {
        margin-top: 30px;
    }

    .rental-blocks .h2 > span {
        width: auto;
    }

    .rental-blocks .h2 {
        gap: 0;
        display: block;
        margin-bottom: 40px;
    }

    #rental-details h6 br {
        display: none;
    }

    .rental-block__content .h5 {
        font-size: 20px;
    }

    .heavy-hauling__cover .cover-title p {
        margin-bottom: 30px;
    }

    #hh-solutions .h1 {
        margin-bottom: 50px;
    }

    .icon-block {
        margin-bottom: 48px;
    }

    .p-80 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #hh-services .h1 {
        margin-bottom: 30px;
    }

    #hh-services p {
        margin-bottom: 40px !important;
    }

    #hh-services p br {
        display: none;
    }

    .service-icon {
        height: 54px;
    }

    .service-icon:last-child {
        border-bottom: none;
    }

    .mob-bb {
        border-bottom: 1px solid rgba(2, 2, 2, .5) !important;
    }

    #oversized .h1 {
        margin-bottom: 40px;
    }

    #oversized img {
        margin-top: 20px;
    }

    #oversized .checks {
        margin-top: 32px;
        margin-bottom: 28px;
    }

    #oversized .check {
        margin-bottom: 12px;
    }

    #oversized .checks h4 {
        font-size: 22px;
        line-height: 24px;
    }

    .green-h4-oversized {
        padding-right: 10%;
    }

    #industries .image-wrapper {
        display: none;
    }

    #industries .intro-p {
        border: none;
        margin-bottom: 1.5rem;;
        padding: 0;
    }

    #industries .intro-p p {
        font-size: 16px;
        line-height: 24px;
    }

    #industries p.h6 {
        color: var(--color-primary-green);
    }

    .industries-list li:first-child {
        border-top: 1px solid rgba(255, 255, 255, .5);
    }

    #industries .bottom {
        margin-top: 40px;
    }

    #how-hauling-works .step-card {
        padding: 24px 16px;
    }

    #how-hauling-works .step-card img {
        height: 80px;
    }

    #how-hauling-works .step-card .sep {
        margin-bottom: 16px;
    }

    #how-hauling-works .step-card p {
        margin-bottom: 45px;
    }

    #request-hh .title, #get-in-touch .title, #scrap-estimate .title {
        text-align: left;
    }

    #request-hh .title p br,
    #get-in-touch .title p br,
    #scrap-estimate .title p br {
        display: none;
    }

    #cta-bg.hh-cta-bg h2 {
        margin-bottom: 24px;
    }

    .hh-cta-bg h6 br {
        display: none;
    }

    #contact-intro h1 {
        margin-bottom: 24px;
    }

    #map {
        height: 270px;
        margin-bottom: 30px;
    }

    .get-in-touch-form .submit-btn {
        width: 100%;
    }

    #references .container {
        flex-wrap: wrap;
        text-align: center;
    }

    .ref-logo {
        margin-bottom: 6px;
        flex: 0 0 50%;
    }

    .ref-logo img {
        max-width: 110px;
    }

    #cta-bg h6 br {
        display: none;
    }

    #contact-intro .text-16 {
        font-size: 16px;
        line-height: 22px;
    }

    .scrap-metal__cover .cover-title h1 br {
        display: none;
    }

    .scrap-metal__cover .cover-bottom-tags > span,
    .zip-code__cover .cover-bottom-tags > span {
        width: 100%;
    }

    #smr-services .container-wrapper {
        padding: 60px 15px 30px;
    }

    #smr-services .h1 {
        margin-bottom: 30px;
    }

    .smr-left {
        padding-left: 0;
    }

    #smr-services p br {
        display: none;
    }

    #smr-services .bottom h4 {
        margin-top: 20px;
    }

    #smr-services .bottom h4 br {
        display: none;
    }

    .smr-middle {
        height: auto;
        margin-top: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(2, 2, 2, .25);
        border-right: none;
    }

    .smr-right {
        padding-right: 0;
    }

    #smr-services .text-half-black {
        font-size: 14px;
        font-weight: 500;
    }

    #we-accept .swiper-title {
        padding-bottom: 30px;
    }

    .sm-card {
        padding: 15px 15px 22px;
        margin-bottom: 15px;
    }

    .sm-card .price span {
        font-size: 24px;
    }

    .sm-card img {
        width: 75px;
    }

    .sm-card h4 {
        margin-top: 48px;
    }

    #we-accept .cta-1 {
        width: 100%;
        margin-top: 15px;
        display: block;
        text-align: center;
    }

    #how-hauling-works .h1 {
        margin-bottom: 30px;
    }

    #how-hauling-works .h1 br {
        display: none;
    }

    .hauling-request-form button {
        width: 100%;
    }

    #commercial .h1 {
        margin-bottom: 30px;
    }

    #commercial .cta-1 {
        width: 100%;
        margin-bottom: 30px;
        margin-top: 30px;
        text-align: center;
    }

    #serving-philly .h1 {
        margin-bottom: 30px;
    }

    #serving-philly .industries-list p {
        text-align: left !important;
        margin-top: 20px;
        font-size: 16px;
    }

    #cover.zip-code__cover {
        padding-top: 130px;
    }

    .zip-code-form .custom-input {
        height: 44px;
        padding: 10px 15px;
        text-align: center;
        margin-bottom: 15px;
    }

    .zip-code-form .cta-1 {
        padding: 10px 15px;
    }

    .about-text {
        padding-right: 0;
        margin-bottom: 40px;
    }

    #values {
        padding-bottom: 180px;
    }

    #values h5 {
        margin-top: 40px;
        padding-right: 0;
    }

    #photo-bg .bg-container {
        height: calc(100vw - 20px);
    }

    #reviews.about-reviews {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .about_cover #cover-img,
    .about_cover #video-overlay {
        display: none;
    }

    .about_cover {
        background: url("../img/lombardo-about-cover-mob.jpg") no-repeat center center;
        background-size: cover;
    }

    .dumpster-booking-section h1 {
        margin-bottom: 20px;
    }

    .variation-title-img-holder {
        padding-right: 0;
    }

    #dumpster-size-chooser .size-btn, .placement-chooser button {
        padding: 5px;
        font-size: 14px;
    }

    .dump-size-descs {
        margin-top: 20px;
        padding-top: 20px;
        padding-bottom: 4px;
    }

    #dumpster-map {
        height: 250px;
        border-radius: 4px;
    }

    .date-input-wrapper {
        margin-bottom: 16px;
    }
    .dates-wrapper {
        margin-bottom: 16px;
    }
    .dumpster-booking-section {
        padding-bottom: 50px;
    }

    #overview h2 {
        margin-bottom: 40px;
    }
    .you-can-you-cant {
        gap: 20px;
    }
}