*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}
  
@font-face {
    font-family: "Unica77LLSub-Regular";
    src: url("../fonts/Unica77LLSub-Regular.woff") format("woff");
}
  
@font-face {
    font-family: "Unica77LLSub-Regular";
    src: url("../fonts/Unica77LLSub-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Unica77LLSub-Medium";
    src: url("../fonts/Unica77LLSub-Medium.woff") format("woff");
}

@font-face {
    font-family: "Unica77LLSub-Medium";
    src: url("../fonts/Unica77LLSub-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Unica77LLSub-Bold";
    src: url("../fonts/Unica77LLSub-Bold.woff") format("woff");
}
  
@font-face {
    font-family: "Unica77LLSub-Bold";
    src: url("../fonts/Unica77LLSub-Bold.woff2") format("woff2");
}

a {
    color: currentColor;
    text-decoration: none;
    cursor: pointer !important;
}

.contact {
    margin-top: 6rem;
}

.contact-email {
    color: #c6973f;
    font-family: "Unica77LLSub-Medium";
    font-weight: normal;
    font-size: 16px;
    line-height: 22.4px;
}

.contact-phone {
    text-decoration: none;
}

.contact-phone a {
    text-decoration: none !important;
    color: inherit !important; /* Optional: maintain consistent color */
}

p.contact-phone a {
    text-decoration: none !important;
    color: inherit !important; /* Optional: maintain consistent color */
}

.email {
    color: #c6973f;
    font-family: "Unica77LLSub-Medium";
    font-weight: normal;
    font-size: 16px;
    line-height: 22.4px;
}

a.email {
    cursor: pointer !important;
}

html {
    max-width: 1200px;
    margin: auto;
    font-family: "Unica77LLSub-Regular";
    font-size: 16px;
    line-height: 22.4px;
    color: #333;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 3rem;
}

header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    font-family: "Unica77LLSub-Bold";
    line-height: 22.4px;
}

header a:hover {
    color: #c6973f;
}

.logo {
    margin-bottom: 0rem;
    margin-top: 7.25px;
    cursor: pointer;
}

a.logo {
    cursor: pointer !important;
}

.menu {
    display: flex;
    flex-direction: column;
}

.menu a {
    margin-left: 1.5rem;
    text-align: right;
}

h1 {
    font-family: "Unica77LLSub-Regular";
    font-size: 18px;
    font-weight: normal;
    line-height: 22.4px;
    margin-top: 0rem;
}

/* PASSWORD PROTECTED WORK */
form {
    margin-top: 6rem;
}

input {
    font-family: "Unica77LLSub-Regular";
    font-size: 16px;
    color: #999;
    -webkit-text-size-adjust: 100%;
    padding: 10px 20px; /* Adds padding inside the input field */
    margin: 0 15px 15px 0; /* Optional: adds space around the input field */
    border: .5px solid #c3c3c3; /* Optional: adds a border around the input field */
    width: 300px; /* Optional: adjusts the width of the input field */
    border-radius: 0px; /* Rounded corners */
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: "Unica77LLSub-Regular";
    font-size: 16px;
    color: #999;
}
::-moz-placeholder { /* Firefox 19+ */
    font-family: "Unica77LLSub-Regular";
    font-size: 16px;
    color: #999;
    opacity: 1; /* Firefox reduces the opacity by default */
}
:-ms-input-placeholder { /* IE 10+ */
    font-family: "Unica77LLSub-Regular";
    font-size: 16px;
    color: #999;
}
:-moz-placeholder { /* Firefox 18- */
    font-family: "Unica77LLSub-Regular";
    font-size: 16px;
    color: #999;
    opacity: 1; /* Firefox reduces the opacity by default */
}

button {
    font-family: "Unica77LLSub-Bold";
    font-size: 16px;
    padding: 10px 20px;
    background-color: #eee;
    color: #333;
    border: .5px solid #eee;
    cursor: pointer !important;
    border-radius: 0px;
    margin: 0px 0 30px 0;
    font-weight: normal;
}

button:hover {
    background-color: #c6973f;
    border: .5px solid #c6973f;
}
/* END - PASSWORD PROTECTED WORK */

img {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-bottom: 0;

}

video {
    margin-bottom: 1.5rem;
}

.projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    grid-gap: 2rem;
}

.projects img {
    margin-bottom: .5rem;
}

.info-header {
    margin-bottom: 5px;
}

.tag, .info-header, .callout {
    font-family: "Unica77LLSub-Bold";
}

.services {
    list-style-type: none;
}

.gallery {
    list-style: none;
}

.masonry {
    columns: 30rem;
    column-gap: 1rem;
    list-style: none;
    margin-bottom: 1rem;
    line-height: 0px;
}

.masonry img {
    margin-bottom: 1rem;
    border-radius: 20px;
}

.next {
    float: right;
}

.project-details {
    margin-top: 0rem;
    margin-bottom: 1.9rem;
    list-style: none;
    width: 600px;
}

.about {
    width: 620px;
}

@media only screen and (max-width: 1071px) {
    .masonry {
        columns: 20rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }
}

@media only screen and (max-width: 768px) {
    .projects {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (max-width: 751px) {
    .masonry {
        columns: 15rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }
}

@media only screen and (max-width: 710px) {
    .project-details {
        width: 100%;
        margin-top: .25rem;
        }
    }

@media only screen and (max-width: 710px) {
    .about {
        width: 100%;
    }
}

@media only screen and (max-width: 591px) {
    .masonry {
        columns: 12rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }
}

@media only screen and (max-width: 536px) {
    .password {
        width: 100%;
    }
}

@media only screen and (max-width: 495px) {
    .masonry {
        columns: 10rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }
}

@media only screen and (max-width: 432px) {
    .masonry {
        columns: 8rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }
}

@media only screen and (max-width: 367px) {
    .masonry {
        columns: 7rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }
}

@media only screen and (max-width: 335px) {
    .masonry {
        columns: 15rem;
        column-gap: 1rem;
        list-style: none;
        margin-bottom: 1rem;
        line-height: 0px;
    }

    .masonry img {
        margin-bottom: 2rem;
        border-radius: 0px;
    }
}