/*--------------------------------------------------------------
  Template Name: Simply Construction HTML Template.
  Template URI: #
  Description: Simply Construction is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
  Author: DevItems
  Version: 1.0
---------------------------------------------------------------*/

/* ----------------------------------------------------
	You can put your custom css code here: 
-------------------------------------------------------*/

/* Reduce breadcrumb hero height to better match the header scale */
.ht__bradcaump__wrap {
    height: 170px;
}


/* Force smaller breadcrumb height */
.ht__bradcaump__area .ht__bradcaump__wrap {
    height: 120px !important;
}


/* Match default header height to sticky header size */
.main__menu > li > a,
.logo,
.htc__header__search {
    height: 70px;
    line-height: 70px;
}


/* Match breadcrumb area to main header height */
.ht__bradcaump__area .ht__bradcaump__wrap {
    height: 70px !important;
}
.bradcaump__inner h2.bradcaump-title {
    font-size: 24px;
    margin: 0;
    line-height: 1.1;
}
.bradcaump-inner {
    margin-top: 2px;
}
.bradcaump-inner a,
.bradcaump-inner span {
    font-size: 12px;
    line-height: 1.1;
}

/* Obfuscated email style */
.obf-email {
    cursor: pointer;
    text-decoration: none;
}

/* Contact form validation states */
.contact-box .field-error {
    color: #c62828;
    display: block;
    font-size: 12px;
    margin-top: 6px;
}
.contact-box input.field-invalid,
.contact-box textarea.field-invalid {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.12);
}
.form-messege.error {
    color: #c62828;
}
.form-messege.success {
    color: #2e7d32;
}

.contact-btn .htc__btn.is-sending {
    opacity: 0.9;
    cursor: not-allowed;
}

.btn-sending-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Keep project cards uniform regardless of source image dimensions */
.project__thumb,
.rl__project .project__thumb {
    overflow: hidden;
}

.project__thumb > a,
.rl__project .project__thumb > a {
    display: block;
    aspect-ratio: 4 / 3;
}

.project__thumb > a > img,
.rl__project .project__thumb > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}