/************************************************ UNIVERSAL PROJECT PAGES ************************************************/

.section-container {
    max-width: 1500px;
    margin: auto;
}


.projects-hero-section {
    display: flex;
    height: 60vh;
}

.projects-hero-leftright {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.projects-hero-titles {
    margin: auto;
    position: absolute;
    text-align: center;
}

.projects-hero-skillsets {
    margin-top: auto;
    margin-right: auto;
    padding: 10px 0px 40px 0px;
    border-top: 1px solid #fff5e7;
    margin-left: 40px;
    width: 200px;
}

.projects-hero-skillsets h3 {
    /*! font-family: "Inter", sans-serif; */
    line-height: 24px;
    font-weight: 500;
    color: #fff5e7;
}

.projects-heroright div {
    display: flex;
    flex: 1;
}

.projects-hero-leftright img {
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    height: 100%;
}






.images-sidebyside {
    display: flex;
    height: 50vh;
}

.images-sidebyside div {
    display: flex;
    flex: 1;
}

.images-sidebyside img {
    object-fit: cover;
    object-position: center;
    width: 100%;
}






.pre-footer {
    background-color: #281200;
    display: flex;
    border-bottom: 1px solid #57390e;
    height: 100px;
}

.pre-footer-left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    margin: auto 100px auto auto;
}

.pre-footer-left svg {
    width: 20px;
    transition: all .1s ease-in-out;
    fill: hsl(0, 0%, 100%);
    margin-right: 10px;
    transform-origin: 50% 50%;
    transform: rotate(180deg);
}

.pre-footer-right {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    margin: auto;
}

.pre-footer-right svg {
    width: 18px;
    transition: all .1s ease-in-out;
    fill: #fff5e7;
    margin-left: 10px;
}

.pre-footer-right svg:hover {
    fill: #281200;
}

.pre-footer-button {
    text-decoration: none;
    display: flex;
    align-items: center;
    background-color: #623c18;
    color: #fce2ca;
        transition: all ease-in-out 0.1s;
    padding: 10px 26px;
    border-radius: 4px;
    font-weight: 600;
}

.pre-footer-button:hover {
    background-color: #fce2cad4;
    color: #56391d;
}





/************************************************ VIBES ************************************************/



.stand-out-section {
    display: flex;
    min-height: 65vh;
    background-image: url(../images/Stripes.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.stand-out-split {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    /*! height: 500px; */
}

.peach-left {
    width: 50%;
    margin: auto auto 50px auto;
    /*! height: 500px; */
    object-fit: contain;
    object-position: center;
}

.peach-right {
    width: 50%;
    margin: auto auto 100px auto;
    /*! height: 500px; */
    object-fit: contain;
    object-position: center;
}

.problem-solution-section {
    display: flex;
    flex-direction: column;
    background-color: #ffefdc;
    align-items: center;
    padding: 100px 10%;
    justify-content: center;
}

.problem-solution-leftright {
    display: flex;
    max-width: 1000px;
}

.problem-solution-leftright img {
    width: 50%;
    object-fit: cover;
    object-position: center;
    height: 230px;
}

.problem-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-left: 50px;
}

.problem-solution-title {
    color: black;
}

.problem-solution-desc {
    color: black;
    font-size: 17px;
    line-height: 23px;
    font-weight: 500;
    padding-top: 10px;
}

.solution-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-right: 50px;
    text-align: right;
}



.phone-section {
    height: 70vh;
    display: flex;
    padding: 80px 10%;
    background-image: url(../images/swoosh.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fceeff;
}

.phone-section-left {
    width: 70%;
}

.phone-section-right {
    width: 30%;
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center;
}









/************************************************ DAILY CAFE ************************************************/


.cafe-ticker {
    height: 50px;
    background: aliceblue;
}

.cafe-rebrand-section {
    padding: 100px 10%;
    max-width: 1500px;
    margin: auto;
}

.two-images-sidebyside {
    display: flex;
    gap: 20px;
}

.two-images-sidebyside img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    flex: 1;
}

.cafe-triple-desc {
    display: flex;
    flex-direction: column;
    /*! align-items: center; */
}

.cafe-triple-desc p {
    line-height: 30px;
    width: 70%;
}

.cafe-triple-containers {
    display: flex;
    gap: 70px;
}

.cafe-triple-titles {
    /*! text-align: center; */
    padding: 30px 0px;
}

.cafe-triple-titles h1 {
    font-size: 14px;
}

.cafe-triple-titles h2 {
    font-size: 18px;
    font-weight: initial;
}

.cafe-logos {
    padding: 100px 10%;
    max-width: 1500px;
    margin: auto;
    text-align: center;
}

.cafe-logos img {

    max-width: 1000px;
}

.cafe-logos p {
    text-align: center;
    padding-top: 20px;
    font-size: 18px;
    line-height: 27px;
    font-weight: 500;
}

.cafe-merch-section {
    padding: 100px 10%;
    background-color: #f6f8ed;
}

.cafe-shop {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.cafe-shop img {
    max-width: 400px;
    height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.cafe-shop-text {
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: center;
    /*! width: 400px; */
    min-width: 400px;
    max-width: 400px;
}

.cafe-shop-text h1 {
    padding-bottom: 20px;
}

.cafe-shop-text p {font-size: 18px;line-height: 27px;font-weight: 500;}









/************************************************ AUDAX ************************************************/

.audax-logo-hero {
    width: 100px;

}

.audax-showcase {
    display: flex;
    margin: 0px 10%;
    height: 650px;
}

.split-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
}

.audax-products-img {
    /*! max-width: 400px; */
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    margin-top: auto;
    margin-left: auto;
    padding-top: 100px;
}

.split-container h1 {
    margin-bottom: 10px;
    font-weight: 600;
}

.split-container h2 {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 15px;
}

.split-container p {
    margin-bottom: 35px;
    width: 70%;
    line-height: 21px;
}

.audax-products-section {
    padding: 100px 10%;
    background-color: #000000;
    color: white;
    /*! height: 400px; */
    display: flex;
}

.audax-products {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.audax-one-product {}

.audax-one-product img {
    max-width: 400px;
    height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.audax-one-product h1 {
    padding-top: 15px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 100;
    padding-bottom: 5px;
    color: #b7b7b7;
}

.audax-one-product p {font-weight: 500;}


.audax-moodboard-section {
    padding: 100px 5%;
    background-color: #000000;
    color: white;
}

.moodboard-title {
    padding-top: 30px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
    padding-bottom: 9px;
    color: #b7b7b7;
}

.moodboard-desc {padding-bottom: 30px;font-size: 21px;font-weight: 600;padding-left: 30%;}

.audax-moodboard-img {
    width: 100%;
    height: 450px;
    object-fit: contain;
    object-position: center;
    padding-left: 40px;
}

.audax-moodboard-split {
    display: flex;
    text-align: right;
}

.audax-trybold {
    display: flex;
    min-height: 660px;
    background-image: url(../images/audax-shelfset.png);
    background-position: bottom;
    background-repeat: repeat-x;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.audax-trybold h1 {font-size: 20px;padding-bottom: 5px;font-weight: 800;}

.audax-trybold h2 {
    margin-bottom: 280px;
    font-family: "EB Garamond", serif;
    font-size: 37px;
    font-weight: 400;
}




.section-header {
    margin: 0px 0px;
    text-align: center;
    padding: 70px 10%;
    background-color: #fff5e7;
}













/************************************************ BREAKPOINTS ************************************************/


/* Small Laptops 1200px or less */
@media only screen and (max-width: 1200px) {
    .sidenav-container {
        margin-right: 50px;
    }

    .cards-container {
        width: calc(100% - 330px);
    }

    .main-card-small-left {
        margin: 0px 25px 0px 0px;
    }

    .main-card-small-right,
    .main-card-small-right-vertical,
    .main-card-small-right-empty {
        margin: 0px 0px 0px 25px;
    }

    .sidenav-container-main {
        width: 480px;
        margin-right: 50px;
    }

    .cards-container-main {
        width: calc(100% - 530px);
    }

    .main-img {
        min-height: 400px;
    }
}

/* Landscape Tablets 992px or less */
@media only screen and (max-width: 992px) {
    .main-content {
        padding: 80px 5%;
    }

    .main-card-small-left {
        margin: 0px 10px 0px 0px;
    }

    .main-card-small-right {
        margin: 0px 0px 0px 10px;
    }

    .main-card-small-right,
    .main-card-small-right-vertical,
    .main-card-small-right-empty {
        margin: 0px 0px 0px 10px;
    }


    .sidenav-container-main {
        width: 400px;
        margin-right: 25px;
    }

    .cards-container-main {
        width: calc(100% - 425px);
    }
}

/* Portait Tablets 768px or less */
@media only screen and (max-width: 768px) {
    .content-container-main {
        flex-direction: column-reverse;
    }

    .two-card-container {
        flex-direction: column;
    }

    .main-card-small-left {
        margin: 0px 0px 0px 0px;
        width: 100%
    }

    .main-card-small-right {
        margin: 50px 0px 0px 0px;
        width: 100%
    }

    .main-card-small-right-vertical {
        margin: 8px 0px 0px 0px;
        width: 100%
    }

    .sidenav-container {
        width: 175px;
        margin-right: 25px;
    }

    .sidenav-button,
    .sidenav-button-active {
        font-size: 15px;
        padding: 9px 15px;
    }


    .cards-container {
        width: calc(100% - 200px);
    }

    .main-card-large img {
        max-height: 200px;
        min-height: 150px;
    }

    .sidenav-container-main {
        width: 100%;
        margin-right: 0px;
    }

    .cards-container-main {
        width: 100%;
    }

    .main-img {
        max-height: 300px;
        margin-top: 0px;
        margin-bottom: 30px;
        min-height: auto;
    }
}

/* Phones 480px or less  */
@media only screen and (max-width: 480px) {
    .content-container {
        flex-direction: column;
    }

    .sidenav-container {
        width: 100%;
        margin: 0px 0px 40px 0px;
    }

    .sidenav-button,
    .sidenav-button-active {
        font-size: 18px;
        padding: 11px 15px;
    }

    .main-content {
        padding: 20px 5% 80px 5%;
    }

    .cards-container {
        width: 100%;
    }

    .main-card-large img {
        max-height: 200px;
        min-height: 150px;
    }

    .main-img {
        margin-top: 20px;
    }

    .sidenav-main {
        width: 100%;
    }

}