.bg-gray { background-color: #DDD; }
.p-90px { padding-top: 90px; }

.pb-50px { padding-bottom: 50px !important; }
.mb-10px { margin-bottom: 10px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-30px { margin-bottom: 30px !important; }
.mb-50px { margin-bottom: 50px !important; }
.mt-20 { margin-top: 20px !important; }


.justify-items-center { justify-items: center; }

@media (max-width: 767px) {
    .sm-justify-items-start { justify-items: start; }
}

.logo { width: 180px; height: auto; }

.p-releative { position: relative; }
.p-absolute { position: absolute; }

.text-right { text-align: right !important; }



/*@media (width >= 112.625rem) {
    margin-bottom: 21px;
}*/


.port:after { content: ""; width: 100%; height: 100%; background: rgb(0 0 0 / 33%); position: absolute; z-index: 0; top: -1%; border-radius: 10px; }
.port:hover:after { background: rgb(0 0 0 / 0%); top: 0; }
.port:after, .port:hover:after { transition: all 400ms ease-in-out 0s; }
.p-releative { position: relative; }

.port-categoryname { display: flex; flex-wrap: wrap; gap: 10px; }

    .port-categoryname li:after { content: "//"; display: inline-block; margin-left: 10px; }
    .port-categoryname li:last-child:after { content: ""; }

.portfolio-content { justify-content: center; }
    .portfolio-content p { font-size: 1.5em !important; line-height: 30px !important; margin-bottom: 20px !important; }
.contact-btn { padding: 10px 50px; }

.content p { padding: 10px 0; font-size: 28px; }

#contactus .contact-result { margin: -20px 0; font-size: 14px; font-weight: 500; }
    #contactus .contact-result.success { color: #16a34a; }
    #contactus .contact-result.error { color: #dc2626; }
#contactSubmit:disabled { opacity: .6; cursor: not-allowed; }
#contactus .field-error { display: none; margin-top: -10px; font-size: 13px; color: #dc2626; position: relative; }
    #contactus .field-error.is-active { display: block; }
#contactus .input-error { border-bottom-color: #dc2626 !important; }