.mrNav,
.theme-wrapper,
/*.ftr, */
.contact_wrapper,
.pillar {

    box-sizing: content-box;
    max-width: 1440px;
    margin: 0px auto;
    padding: 0rem 5rem;

}

@media screen and (max-width: 480px) {
    .mrNav,
    .theme-wrapper,
    .contact_wrapper,
    .pillar {
        max-width: 75%;
        padding: 0px 55px;
        display: block;
    }
 }

.mrNav ul {

    display: flex;
    gap: 2rem;
    margin: 0px auto;
    align-items: center;

}
.mrNav li.mrLogo  {

    flex-grow: 1;
    text-align: center;

}
.mrNav li.mrLogo .desktop img  {
    margin-top: 35px;
    width: 200px;

}
.mrNav li.mrLogo .mobile img  {

    width: 75px;

}
.mrNav li.mrLogo a.mobile  { display: none; }
@media (max-width: 864px) {

    .mrNav li.mrLogo a.desktop  { display: none; }
    .mrNav li.mrLogo a.mobile  { display: inline; }

}

/* Add your existing styles here */

/* Burger menu styles */
.burger-menu {
    display: none;
    cursor: pointer;
    margin-top: 25px;
}

.bar {
    width: 30px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
}

.bar:nth-child(1) {
    width: 30px; /* Keep the width the same as the original */
}

.bar:nth-child(2) {
    width: 22px; /* Make the second bar shorter */
    margin-left: auto; /* Align the 2nd bar to the right */
}

.bar:nth-child(3) {
    width: 14px; /* Make the third bar shorter */
    margin-left: auto; /* Align the 3rd bar to the right */
}





/* Mobile navigation styles */
@media screen and (max-width: 768px) {
    #navbar ul {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        position: absolute;
        background-color: #121b68;
        z-index: 1;
    }

    #navbar ul.active {
        display: flex;
    }

    #navbar ul li {
        padding: 15px;
        width: 100%;
    }

    .burger-menu {
        display: block;
        float: right; /* Move the burger menu to the right */
    }

    .mrNav li.mrLogo .mobile img {
        display: none;
    }

    .mrNav li.mrLogo .mobile::after {
        content: "Home"; /* Change the content to "Home" */
        font-family: 'Laila', serif;
        font-size: 20px;
        color: white;
    }

    .mrNav li.mrLogo a.mobile {
        display: inline;
    }

}






/*
@media (max-width: 700px) {

    .mrNav ul {

        flex-direction: column;

    }
    .mrNav .mrLogo {

        order: -1;

    }

}
*/

.mrNav li a  {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: white;
    font-size: 20px;
    text-decoration: none;

}
.mrNav li a:hover  {

    color: #be557d;

}

.mrIcon {
    margin: 10px;
    margin-bottom: 40px;
    max-width: 3rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .mrIcon {
        max-width: 2rem; /* Adjust max-width for screens with width up to 768px */
    }
}

@media screen and (max-width: 480px) {
    .mrIcon {
        max-width: 1.5rem; /* Further adjust max-width for screens with width up to 480px */
    }
}




/*
@media (max-width: 700px) {

    .mrNav ul {

        flex-direction: column;

    }
    .mrNav .mrLogo {

        order: -1;

    }

}
*/

.mrNav li a  {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: white;
    font-size: 20px;
    text-decoration: none;

}
.mrNav li a:hover  {

    color: #be557d;

}

.mrIcon {
    margin: 10px;
    margin-bottom: 40px;
    max-width: 3rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .mrIcon {
        max-width: 2rem; /* Adjust max-width for screens with width up to 768px */
    }
}

@media screen and (max-width: 480px) {
    .mrIcon {
        max-width: 1.5rem; /* Further adjust max-width for screens with width up to 480px */
    }
}







/*
@media (max-width: 700px) {

    .mrNav ul {

        flex-direction: column;

    }
    .mrNav .mrLogo {

        order: -1;

    }

}
*/

.mrNav li a  {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: white;
    font-size: 20px;
    text-decoration: none;

}
.mrNav li a:hover  {

    color: #36A7A6;

}

.mrIcon {
    margin: 10px;
    margin-bottom: 40px;
    max-width: 3rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .mrIcon {
        max-width: 2rem; /* Adjust max-width for screens with width up to 768px */
    }
}

@media screen and (max-width: 480px) {
    .mrIcon {
        max-width: 1.5rem; /* Further adjust max-width for screens with width up to 480px */
    }
}

.portfolio_grid, .mrIcons  { margin: 0.5rem 0rem 0rem 0rem; }
.pillar section:not(.portfolio_grid) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pillar section.project-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.arrow-left,
.arrow-right {
    max-width: 100%;
    height: auto;
} 

@media screen and (max-width: 480px) {
    section.project-arrow {
        margin-top: 21px;
    }

    .arrow-left,
    .arrow-right {
        max-width: 70%; 
    }
}

@media screen and (max-width: 768px) {
    /* Apply styles to multiple IDs separated by commas */
    .project-arrow a[href="#top-celisse"],
    .project-arrow a[href="#top-marketing"],
    .project-arrow a[href="#top-branding"],
    .project-arrow a[href="#top-rebranding"],
    .project-arrow a[href="#top-printdesigns"] {
      font-size: 20px;
    }
  }
  

@media screen and (max-width: 430px) {
    .project-arrow a[href="#top-celisse"],
    .project-arrow a[href="#top-marketing"],
    .project-arrow a[href="#top-branding"],
    .project-arrow a[href="#top-rebranding"],
    .project-arrow a[href="#top-printdesigns"] {
        font-size: 10px; 
    }
}


p {
    line-height: 30px;
    max-width: 1050px;
    margin-top: 10px;
    overflow-wrap: normal;
}

@media screen and (max-width: 430px) {
    p {
    line-height: 17px;
       margin-top: 10px;
    }
}

html { height: 100%; }
body {
    
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ftr {
    flex-grow: 1;
    flex-wrap: wrap;
    display: flex;
    align-items: end;
    align-content: flex-end;
    justify-content: space-between;
    width: 100%;
}

.ftr * { margin: 0; }

.pillar section.row-ui {

    display: flex;
    flex-direction: row;
    align-items: start;
}

@media screen and (max-width: 768px) {
    .pillar section.row-ui {
        flex-direction: column; 
        align-items: center; 
    }
}