/* Tablets */

@media (max-width: 1024px) {
    /*home.css*/
    .hero__image {
        position: relative;
        height: 70vh;
    }
 
    .services__section{
        flex-direction: column;
        height: auto;
    }
 
    .services__intro {
        border-right: none;
        border-bottom: 1px solid #222;
        padding: 32px 24px;
    }
 
    .services__list {
        flex: none;
    }
 
    .services__item {
        padding: 16px 24px;
    }
 
    .locations__section {
        flex-direction: column;
        height: auto;
    }
 
    .locations__intro {
        padding: 32px 24px;
    }
 
    .locations__list {
        border-left: none;
        border-top: 1px solid #3a3a3a;
    }
 
    .locations__item {
        padding: 16px 24px;
    }
 
    /*footer.css*/
    .footer {
        clip-path: none;
        padding: 40px 24px 24px;
    }
 
    .footer__top {
        flex-direction: column;
        gap: 40px;
    }
 
    .footer__bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
 
    /*left_notch_details.css*/
   .notch__section,
   .notch__section.notch__section--right {
        display: flex;
        flex-direction: column-reverse;
        height: auto;
        position: relative;
    }
 
    .notch__section .notch__media,
    .notch__section .notch__panel {
        flex: none;
    }
 
    .notch__section .notch__panel,
    .notch__section.notch__section--right .notch__panel {
        position: relative;
        z-index: 1;    
        margin: 0 0 calc(-1 * var(--bottom-notch-depth)) 0;
        clip-path: var(--bottom--notch-clip);
        padding: 32px 24px calc(32px + var(--bottom-notch-depth));
    }
 
    .notch__section .notch__image {
        height: 350px;
        object-fit: cover;
    }
 
    /*menu_blocks.css*/
    .top__left {
        width: 80%;
        height: 64px;
        padding: 0 20px;
    }
 
    .top__right {
        width: 20%;
        height: 64px;
    }
 
    .menu__logo {
        height: 40px;
    }
 
    .bottom__left {
        top: 64px;
        width: 80%;
        height: auto;
        padding: 20px;
    }
 
    .menu__eyebrow {
        margin-bottom: 8px;
    }
 
    .menu__heading {
        max-width: none;
        margin-bottom: 14px;
    }
 
    /*nav_bar.css*/
    .nav__bar{
        width: 80%;
        bottom: 80px;
    }
 
    .nav__bar__link {
        padding: 16px;
        font-size: 15px;   /* same as desktop, so it can stay here */
    }
 
    /*portfolio.css*/
    /* stack the photos on phones */
    .slideshow {
        height: auto;
    }
 
    .slide__info {
        top: 24px;
        left: 20px;
        max-width: calc(100% - 40px);
        padding-top: 52px; /* leaves room for the buttons above the text */
    }
 
    .slide__location {
        padding: 6px 24px;
    }
 
    .slide__images {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-auto-rows: 1fr;
    }
 
    .slideshow__controls {
        top: 24px;
        right: 20px;
    }
 
    /*services.css*/
    .list__of__services {
        height: auto;
    }
 
    .list__of__items {
        display: block;
        height: auto;
    }
 
    .service__name {
        display: block;
        padding: 16px 24px;
        border: 0;
        border-bottom: 1px solid #858585;
    }
 
    .service__name:first-child {
        border-top: 1px solid #858585;
    }
 
    .cta__section {
        padding: 32px 24px calc(40px + var(--bottom-notch-depth));
    }
 
    .cta__text {
        margin-top: 16px;
    }
 
    .cta__button {
        margin-top: 24px;
    }
}

/* Phones */
@media (max-width: 768px) {
    /*home.css*/
    .hero__image {
        position: relative;
        height: 70vh;
    }

    .services__section{
        flex-direction: column;
        height: 500px;
    }

    .services__intro {
        border-right: none;
        border-bottom: 1px solid #222;
        padding: 32px 24px;
    }

    .services__list {
        flex: none;
    }

    .services__item {
        padding: 16px 24px;
    }

    .service__name {
        font-size: 16px;
    }

    .services__heading,
    .locations__heading {
        font-size: 25px;
    }

    .locations__text,
    .services__item {
        font-size: 16px;
    }

    .locations__section {
        flex-direction: column;
        height: 700px;
    }

    .services__text {
        font-size: 14px;
    }

    .locations__intro {
        padding: 32px 24px;
    }

    .locations__list {
        border-left: none;
        border-top: 1px solid #3a3a3a;
    }

    .locations__item {
        padding: 16px 24px;
    }

    /*footer.css*/
    .footer {
        clip-path: none;
        padding: 40px 24px 24px;
    }

    .footer__top {
        flex-direction: column;
        gap: 40px;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    /*left_notch_details.css*/
   .notch__section,
   .notch__section.notch__section--right {
        display: flex;
        flex-direction: column-reverse;
        height: auto;
        position: relative;
    }

    .notch__section .notch__media,
    .notch__section .notch__panel {
        flex: none;
    }

    .notch__section .notch__panel,
    .notch__section.notch__section--right .notch__panel {
        position: relative;
        z-index: 1;    
        margin: 0 0 calc(-1 * var(--bottom-notch-depth)) 0;
        clip-path: var(--bottom--notch-clip);
        padding: 32px 24px calc(32px + var(--bottom-notch-depth));
    }

    .notch__section .notch__image {
        height: 350px;
        object-fit: cover;
    }

    .notch__heading {
        font-size: 25px;
    }
 
    .notch__text {
        font-size: 14px;
    }

    /*menu_blocks.css*/
    .top__left {
        width: 80%;
        height: 64px;
        padding: 0 20px;
    }
 
    .top__right {
        width: 20%;
        height: 64px;
    }
 
    .menu__logo {
        height: 40px;
    }
 
    .bottom__left {
        top: 64px;
        width: 80%;
        height: auto;
        padding: 20px;
    }
 
    .menu__eyebrow {
        margin-bottom: 8px;
        font-size: 14px;
    }
 
    .menu__heading {
        max-width: none;
        margin-bottom: 14px;
        font-size: 25px;
    }

    /*nav_bar.css*/
    .nav__bar{
        width: 80%;
        bottom: 10vh;
    }

    .nav__bar__link {
        padding: 16px;
        font-size: 14px;

    }

    /*portfolio.css*/
    .slideshow {
        height: 75vh;
    }
 
    .slide__info {
        top: 24px;
        left: 20px;
        max-width: calc(100% - 40px);
        padding-top: 52px; /* leaves room for the buttons above the text */
    }
 
    .slide__location {
        padding: 6px 24px;
        font-size: 14px;
    }
 
    .slide__title {
        font-size: 25px;
    }
 
    .slide__description {
        font-size: 14px;
    }
 
    /* stack the photos on phones */
    .slideshow {
        height: auto;
    }

    .slide__images {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-auto-rows: 1fr;
    }
 
    .slideshow__controls {
        top: 24px;
        right: 20px;
    }

    /*services.css*/
    .list__of__services {
        height: auto;
    }
 
    .list__of__items {
        display: block;
        height: auto;
    }
 
    .service__name {
        display: block;
        padding: 16px 24px;
        font-size: 16px;
        border: 0;
        border-bottom: 1px solid #858585;
    }
 
    .service__name:first-child {
        border-top: 1px solid #858585;
    }
 
    .cta__section {
        padding: 32px 24px calc(40px + var(--bottom-notch-depth));
    }
 
    .cta__heading {
        font-size: 25px;
    }
 
    .cta__text {
        margin-top: 16px;
        font-size: 14px;
    }
 
    .cta__button {
        margin-top: 24px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .slideshow__track {
        transition: none;
    }
}