/*dopdown mobile css*/
.mobile-dropdown {
	width: 100%;
}

.mobile-dropdown-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 14px 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mobile-dropdown-toggle i {
	font-size: 13px;
	transition: transform 0.3s ease;
}

.mobile-dropdown-menu {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		grid-template-rows 0.3s ease,
		opacity 0.3s ease,
		visibility 0.3s ease;
		
}

.mobile-dropdown-menu-inner {
    min-height: 0;
	overflow: hidden;
}

.mobile-dropdown-menu a {
	display: block;
	padding: 10px 15px;
	font-size: 14px;
}

.mobile-dropdown.is-open .mobile-dropdown-menu {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mobile-dropdown.is-open .mobile-dropdown-toggle i {
	transform: rotate(180deg);
}

/*end of dopdown mobile css*/
.estimate-usd-equivalent,
.final-usd-equivalent {
    margin: -4px 0 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
}

.final-usd-equivalent {
    margin-top: -8px;
}
/* ==================================
  .estimate-honeypot 
================================== */
.estimate-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ==================================
  end of .estimate-honeypot 
================================== */
/* ==================================
   STEP 3: CONTACT FORM
================================== */

.estimate-final-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
    gap: 20px;
}

.estimate-contact-panel {
    padding: 18px;

    background: #f7f9f9;
    border: 1px solid #e4ebeb;
    border-radius: 15px;
}

.estimate-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.estimate-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.estimate-field-full {
    grid-column: 1 / -1;
}

.estimate-field label {
    color: #293438;

    font-size: 12px;
    font-weight: 700;
}

.estimate-field label span {
    color: #e67500;
}

.estimate-field input,
.estimate-field textarea {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid #ccd7d7;
    border-radius: 9px;

    background: #ffffff;
    color: #263238;

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.estimate-field input {
    min-height: 43px;
}

.estimate-field textarea {
    min-height: 82px;
    resize: vertical;
}

.estimate-field input:focus,
.estimate-field textarea:focus {
    border-color: #058181;
    box-shadow: 0 0 0 3px rgba(5, 129, 129, 0.1);
}

.estimate-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 14px;

    color: #5d686b;

    font-size: 11px;
    line-height: 1.45;

    cursor: pointer;
}

.estimate-consent input {
    width: 16px;
    height: 16px;

    margin-top: 1px;

    accent-color: #058181;
}

/* Final Summary */

.final-estimate-summary {
    padding: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 129, 129, 0.98),
            rgba(3, 88, 88, 0.98)
        );

    border-radius: 15px;

    color: #ffffff;

    box-shadow: 0 18px 40px rgba(5, 129, 129, 0.2);
}

.final-summary-label {
    display: block;
    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.final-estimate-price {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 14px;

    font-size: clamp(22px, 2.8vw, 31px);
    font-weight: 800;
}

.final-estimate-price small {
    font-size: 16px;
    opacity: 0.7;
}

.final-summary-detail {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    padding: 9px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 11px;
}

.final-summary-detail span,
.final-summary-features > span {
    color: rgba(255, 255, 255, 0.7);
}

.final-summary-detail strong {
    text-align: right;
}

.final-summary-features {
    padding-top: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 11px;
}

.final-summary-features ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin: 8px 0 0;
    padding: 0;

    list-style: none;
}

.final-summary-features li {
    padding: 5px 7px;

    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;

    font-size: 10px;
}

.estimate-disclaimer {
    margin: 12px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 10px;
    line-height: 1.45;
}

.estimate-submit-button {
    min-width: 190px;
}

.estimate-form-message {
    display: none;

    margin-top: 12px;
    padding: 10px 12px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;
}

.estimate-form-message.success {
    display: block;

    background: rgba(5, 129, 129, 0.1);
    color: #057070;
}

.estimate-form-message.error {
    display: block;

    background: rgba(210, 48, 48, 0.1);
    color: #b32626;
}

/* Tablet */

@media (max-width: 768px) {

    .estimate-final-layout {
        grid-template-columns: 1fr;
    }

    .final-estimate-summary {
        padding: 17px;
    }
}

/* Mobile */

@media (max-width: 576px) {

    .estimate-contact-panel {
        padding: 12px;
    }

    .estimate-form-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .estimate-field-full {
        grid-column: auto;
    }

    .estimate-field textarea {
        min-height: 68px;
    }

    .final-estimate-summary {
        padding: 14px;
    }
}



/* ==================================
  End of STEP 3: CONTACT FORM
================================== */
/* ==================================
   STEP 2: LIVE PRICE ESTIMATOR
================================== */

.estimator-configurator {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
    gap: 22px;
}

.requirements-panel {
    display: grid;
    gap: 18px;
}

.requirement-group {
    padding: 16px;

    background: #f7f9f9;
    border: 1px solid #e5ebeb;
    border-radius: 14px;
}

.requirement-title {
    display: block;
    margin-bottom: 10px;

    color: #263238;

    font-size: 14px;
    font-weight: 700;
}

.estimator-select {
    width: 100%;
    min-height: 44px;

    padding: 10px 12px;

    border: 1px solid #ccd7d7;
    border-radius: 9px;

    background: #ffffff;
    color: #263238;

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

.estimator-select:focus {
    border-color: #058181;
    box-shadow: 0 0 0 3px rgba(5, 129, 129, 0.1);
}

.option-grid,
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.requirement-option {
    position: relative;
    cursor: pointer;
}

.requirement-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.requirement-option span {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 9px 10px;

    background: #ffffff;
    border: 1px solid #d8e1e1;
    border-radius: 9px;

    color: #4b5659;

    font-size: 12px;
    font-weight: 600;
    text-align: center;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.requirement-option:hover span {
    border-color: rgba(5, 129, 129, 0.45);
}

.requirement-option input:checked + span {
    background: rgba(5, 129, 129, 0.09);
    border-color: #058181;
    color: #058181;
}

/* Estimate Summary */

.estimate-summary {
    align-self: start;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 129, 129, 0.98),
            rgba(3, 88, 88, 0.98)
        );

    border-radius: 16px;

    color: #ffffff;

    box-shadow: 0 18px 40px rgba(5, 129, 129, 0.2);
}

.estimate-summary-label {
    display: block;
    margin-bottom: 10px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.estimate-price {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;

    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
}

.estimate-price small {
    font-size: 18px;
    opacity: 0.7;
}

.estimate-summary p {
    margin: 0 0 18px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 12px;
    line-height: 1.5;
}

.estimate-detail {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 12px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 12px;
}

.estimate-detail span {
    color: rgba(255, 255, 255, 0.72);
}

.estimate-detail strong {
    text-align: right;
}

/* Tablet */

@media (max-width: 768px) {

    .estimator-configurator {
        grid-template-columns: 1fr;
    }

    .option-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .estimate-summary {
        padding: 18px;
    }
}

/* Mobile */

@media (max-width: 576px) {

    .requirements-panel {
        gap: 10px;
    }

    .requirement-group {
        padding: 12px;
    }

    .option-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .requirement-option span {
        min-height: 38px;
        padding: 7px;
        font-size: 11px;
    }

    .estimate-summary {
        padding: 15px;
    }

    .estimate-price {
        font-size: 24px;
    }
}

/* ==================================
  End  STEP 2: LIVE PRICE ESTIMATOR
================================== */

/* ==================================
   PROJECT ESTIMATOR
================================== */

body.estimator-open {
    overflow: hidden;
}

.project-estimator-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(10, 20, 24, 0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.project-estimator-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.project-estimator {
    position: relative;

    width: min(1000px, 100%);
    max-height: calc(100vh - 30px);

    padding: clamp(18px, 2.5vw, 30px);

    background:
        radial-gradient(
            circle at top right,
            rgba(5, 129, 129, 0.1),
            transparent 30%
        ),
        #ffffff;

    border: 1px solid rgba(5, 129, 129, 0.12);
    border-radius: 24px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);

    overflow-y: auto;
    overflow-x: hidden;

    transform: translateY(30px) scale(0.97);
    transition: transform 0.35s ease;
    scrollbar-width: thin;
    scrollbar-color: #058181 #e9eeee;
}

.project-estimator::-webkit-scrollbar {
    width: 8px;
}

.project-estimator::-webkit-scrollbar-track {
    background: #e9eeee;
    border-radius: 20px;
}

.project-estimator::-webkit-scrollbar-thumb {
    background: #058181;
    border-radius: 20px;
}

.project-estimator::-webkit-scrollbar-thumb:hover {
    background: #e67500;
}

.project-estimator-overlay.active .project-estimator {
    transform: translateY(0) scale(1);
}

/* Close Button */

.estimator-close {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #f2f5f5;
    color: #263238;

    font-family: inherit;
    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.estimator-close:hover {
    background: #e67500;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Progress */

.estimator-progress {
    width: calc(100% - 60px);
    margin-bottom: 18px;
}

.progress-details {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
    margin-bottom: 10px;

    color: #50585b;
    font-size: 13px;
    font-weight: 600;
}

.progress-track {
    width: 100%;
    height: 7px;

    background: #e9eeee;
    border-radius: 30px;

    overflow: hidden;
}

.progress-bar {
    width: 33.333%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #058181,
        #10a8a8
    );

    border-radius: inherit;

    transition: width 0.35s ease;
}

/* Steps */

.estimator-step {
    display: none;
}

.estimator-step.active {
    display: block;
    animation: estimatorStepIn 0.35s ease;
}

@keyframes estimatorStepIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Heading */

.estimator-heading {
    max-width: 750px;
    margin: 0 auto 18px;
    text-align: center;
}

.estimator-label {
    display: inline-block;
    margin-bottom: 10px;

    color: #e67500;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.estimator-heading h2 {
    margin: 0 0 10px;

    color: #1c2529;

    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.15;
}

.estimator-heading p {
    margin: 0;

    color: #697377;

    font-size: clamp(14px, 2vw, 17px);
    line-height: 1.6;
}

/* Service Options */

.service-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.service-card {
    min-height: 145px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;
    padding: 16px 14px;

    border: 2px solid transparent;
    border-radius: 18px;

    background: #f7f9f9;
    color: #222c30;

    font-family: inherit;
    text-align: center;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    background: #ffffff;
    border-color: rgba(5, 129, 129, 0.25);

    box-shadow: 0 18px 38px rgba(16, 51, 56, 0.1);
}

.service-card.selected {
    background: rgba(5, 129, 129, 0.08);
    border-color: #058181;

    box-shadow: 0 16px 35px rgba(5, 129, 129, 0.14);
}

.service-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #058181;

    border-radius: 16px;

    font-size: 20px;

    box-shadow: 0 10px 24px rgba(21, 47, 50, 0.08);
}

.service-card.selected .service-icon {
    background: #058181;
    color: #ffffff;
}

.service-card strong {
    color: #222c30;
    font-size: 15px;
    font-weight: 700;
}

.service-card small {
    max-width: 220px;

    color: #727b7f;

    font-size: 12px;
    line-height: 1.35;
}

/* Footer and Navigation */

.estimator-footer,
.estimator-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    margin-top: 16px;
}

.selection-message {
    margin: 0;

    color: #747d80;

    font-size: 14px;
    font-weight: 500;
}

.estimator-next,
.estimator-back {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
    padding: 12px 25px;

    border: none;
    border-radius: 9px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.estimator-next {
    background: #058181;
    color: #ffffff;
}

.estimator-next:hover:not(:disabled) {
    background: #e67500;
    transform: translateY(-2px);
}

.estimator-next:disabled {
    background: #c8d1d1;
    color: #ffffff;
    cursor: not-allowed;
}

.estimator-back {
    background: #eef2f2;
    color: #263238;
}

.estimator-back:hover {
    background: #dfe7e7;
}

/* Placeholder */

.placeholder-box {
    padding: 70px 25px;

    background: #f7f9f9;

    border: 2px dashed #cbd5d5;
    border-radius: 18px;

    color: #697377;

    text-align: center;
}

/* ==================================
   LARGE TABLETS
================================== */

@media (max-width: 1024px) {
    .dropdown-menu {
        display: none;
    }
    .nav-menu,
	.estimate-btn {
		display: none;
	}

	.nav-container {
		height: 70px;
		padding: 0 20px;
	}

	.logo img {
		width: 145px;
		max-height: 58px;
	}

	.hamburger {
		position: relative;
		z-index: 100001;

		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;

		padding: 10px;
		border: 0;
		background: transparent;

		cursor: pointer;
		pointer-events: auto;

		-webkit-appearance: none;
		appearance: none;
	}

	.mobile-menu {
		top: 70px;
		max-height: calc(100vh - 70px);
		padding: 25px;
		gap: 18px;
	}

	.mobile-menu.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}


    .project-estimator-overlay {
        padding: 18px;
    }

    .project-estimator {
        max-height: calc(100vh - 24px);
    padding: 24px 22px;
    }

    .service-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .service-card {
    min-height: 130px;
}
}

@media (max-width: 768px) {

	.nav-container {
		height: 60px;
	}

	.logo img {
		width: 130px;
		max-height: 52px;
	}

	.mobile-menu {
		top: 60px;
		max-height: calc(100vh - 60px);
		padding: 22px;
		gap: 16px;
	}
}

/* ==================================
   TABLETS
================================== */

@media (max-width: 768px) {

    .project-estimator-overlay {
        padding: 12px;
    }

    .project-estimator {
        max-height: calc(100vh - 24px);
        padding: 60px 20px 25px;
        border-radius: 18px;
    }

    .estimator-close {
        top: 12px;
        right: 12px;
    }

    .estimator-progress {
        width: 100%;
        margin-bottom: 24px;
    }

    .service-card {
        min-height: 170px;
        padding: 20px 14px;
    }
}

/* ==================================
   MOBILE
================================== */

@media (max-width: 576px) {

    .project-estimator-overlay {
        align-items: stretch;
        padding: 0;
    }

    .project-estimator {
        width: 100%;
        max-height: 100vh;

        padding: 52px 16px 14px;

        border: none;
        border-radius: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .service-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-card {
        min-height: auto;

        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto;

        column-gap: 14px;
        row-gap: 2px;

        padding: 10px 12px;

        text-align: left;
    }

    .service-icon {
        width: 50px;
        height: 50px;

        grid-row: 1 / 3;

        font-size: 21px;
    }

    .service-card strong,
    .service-card small {
        max-width: none;
        text-align: left;
    }

    .estimator-footer,
    .estimator-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .selection-message {
        text-align: center;
    }

    .estimator-next,
    .estimator-back {
        width: 100%;
    }
}




/* ==================================
   End of COMPACT PROJECT ESTIMATOR
================================== */



.estimate-btn {
    padding: 12px 28px;
    background: #058181;
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(11, 122, 67, 0.18);
}

.mobile-btn {
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    background: #058181;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.mobile-btn:hover {
    background: #E67500;
}
  /* ==================================
   DARK GLASS DROPDOWN
================================== */

.dropdown {
    position: relative;
}

.dropdown > a {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Dropdown panel */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;

    width: 260px;
    padding: 10px;
    margin: 0;

    list-style: none;

    background: rgba(20, 28, 32, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(12px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 9999;
}

/* Hover bridge */
.dropdown::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 260px;
    height: 18px;
}

/* Show menu */
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Items */
.dropdown-menu li {
    list-style: none;
}

.dropdown-menu li a {
    position: relative;

    display: flex;
    align-items: center;

    padding: 14px 16px 14px 20px;

    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    border-radius: 10px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}

/* Remove previous icon */
.dropdown-menu li a::before {
    content: "";
    position: absolute;
    left: 8px;

    width: 3px;
    height: 0;

    background: #e67500;
    border-radius: 10px;

    transition: height 0.25s ease;
}

/* Arrow on right */
.dropdown-menu li a::after {
    content: "→";
    margin-left: auto;

    color:#E67500;
    font-size: 16px;

    opacity: 0;
    transform: translateX(-6px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* Hover */
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color:#E67500;
    padding-left: 26px;
    outline: none;
}

.dropdown-menu li a:hover::before,
.dropdown-menu li a:focus-visible::before {
    height: 24px;
}

.dropdown-menu li a:hover::after,
.dropdown-menu li a:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

.dropdown:hover > a,
.dropdown:focus-within > a {
    color:#E67500;
}




/* =========================
   RESET 
========================== */
.navbar,
.navbar *,
.project-estimator-overlay,
.project-estimator-overlay * {
    box-sizing: border-box;
}

body {
    overflow-x: hidden; 
}

/* =========================
   NAVBAR CONTAINER
========================== */
 /* =========================
   TRANSPARENT GLASS NAVBAR
========================= */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,0.18);
    box-shadow:none;

    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        padding 0.35s ease;
}

/* Navbar after page scroll */

.navbar.navbar-scrolled{
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,0,0,0.08);
    box-shadow:0 8px 30px rgba(0,0,0,0.10);
}

/* Initial transparent navbar links */

.navbar .nav-menu > li > a{
    color:#ffffff;
    transition:color 0.3s ease;
}

/* Links after scrolling */

.navbar.navbar-scrolled .nav-menu > li > a{
    color:#1d1f24;
}

/* Dropdown menu should remain readable */

.navbar .dropdown-menu{
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* Hover states */

.navbar .nav-menu > li > a:hover,
.navbar.navbar-scrolled .nav-menu > li > a:hover{
    color:#E67500;
}


.nav-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}


.logo{
    display:flex;
    align-items:center;
}

.logo a{
    display:block;
    line-height:0;
}

.logo img{
    display:block;
    width:190px;
    height:auto;
    max-height:78px;
    object-fit:contain;
    background:transparent;
}


.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}

.nav-menu > li > a {
    position: relative;
    text-decoration: none;
    
    display:inline-block;
    z-index:1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding: 10px 0;
    transition: 0.3s ease;
}
/* ==================================
   FINAL DUAL-LINE NAVBAR EFFECT
================================== */

/* Only direct desktop menu items */
.nav-menu > li{
    position:relative;
}

/* Main navbar links only */


/* ----------------------------------
   TOP TEAL LINE
   Left to right
---------------------------------- */

.nav-menu > li::after{
    content:"";
    position:absolute;

    top:-6px;
    left:0;

    width:100%;
    height:3px;

    background:#058181;
    border-radius:20px;

    transform:scaleX(0);
    transform-origin:left center;

    transition:transform 0.35s ease-out;

    pointer-events:none;
}

/* ----------------------------------
   BOTTOM ORANGE LINE
   Right to left
---------------------------------- */

.nav-menu > li > a::before{
    content:"";
    position:absolute;

    left:0;
    bottom:-6px;

    width:100%;
    height:3px;

    background:#E67500;
    border-radius:20px;

    transform:scaleX(0);
    transform-origin:right center;

    transition:transform 0.35s ease-out;

    pointer-events:none;
}

/* Show top line */

.nav-menu > li:hover::after,
.nav-menu > li:focus-within::after{
    transform:scaleX(1);
}

/* Show bottom line */

.nav-menu > li:hover > a::before,
.nav-menu > li:focus-within > a::before,
.nav-menu > li > a.active::before{
    transform:scaleX(1);
}

/* Keep active top line visible */

.nav-menu > li:has(> a.active)::after{
    transform:scaleX(1);
}

/* ==================================
   DROPDOWN TEXT FIX
================================== */

/*.navbar .dropdown-menu li a{*/
/*    color:#1d1f24;*/
/*}*/

/*.navbar .dropdown-menu li a:hover,*/
/*.navbar .dropdown-menu li a:focus-visible{*/
/*    background:rgba(5,129,129,0.08);*/
/*    color:#E67500;*/
/*    padding-left:26px;*/
/*    outline:none;*/
/*}*/

/* Dropdown left indicator */

/*.navbar .dropdown-menu li a:hover::before,*/
/*.navbar .dropdown-menu li a:focus-visible::before{*/
/*    height:24px;*/
/*    transform:none;*/
/*}*/

/* Dropdown right arrow */

/*.navbar .dropdown-menu li a::after{*/
/*    color:#E67500;*/
/*}*/

/*.navbar .dropdown-menu li a:hover::after,*/
/*.navbar .dropdown-menu li a:focus-visible::after{*/
/*    opacity:1;*/
/*    transform:translateX(0);*/
/*}*/


/* ==================================
  end of FINAL DUAL-LINE NAVBAR EFFECT
================================== */

/*.nav-menu > li > a:hover,*/
/*.nav-menu > li > a.active {*/
/*    color:#E67500;*/
/*}*/


.estimate-btn:hover {
    background: #E67500;
    color: #ffffff;
    transform: translateY(-2px);
}       


.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: #222;
    border-radius: 20px;
    transition: 0.3s;
}

.mobile-menu {
	position: absolute;
	top: 70px;
	left: 0;

	width: 100%;
	max-height: calc(100vh - 70px);

	display: flex;
	flex-direction: column;
	gap: 18px;

	padding: 25px;

	background: #ffffff;
	border-bottom: 1px solid #eaeaea;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;

	transform: translateY(-20px);

	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		transform 0.4s ease;

	z-index: 100000;
}


/*.mobile-menu {*/
/*    position: absolute;*/
/*    top: 95px;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    background: #fff;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    padding: 30px;*/
/*    gap: 20px;*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    transform: translateY(-20px);*/
/*    transition: 0.4s ease;*/
/*    z-index: 9999;*/
/*    box-shadow: 0 15px 30px rgba(0,0,0,0.05);*/
/*    border-bottom: 1px solid #eaeaea;*/
/*}*/

.mobile-menu a {
    text-decoration: none;
    color: #222;
    font-size: 16px;
    font-weight: 500;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* =========================
   RESPONSIVE 
========================== */


@media (max-width: 1200px) {
    .nav-container {
        padding: 0 25px;
    }
    .nav-menu {
        gap: 20px;
    }
    .logo img {
        width: 170px;
    }
}





/* =========================
   submitting-button CSS
========================== */

.estimate-submit-button.submitting {
    cursor: wait;
    opacity: 0.8;
}

.estimate-submit-button.submitting i {
    animation: estimateSubmitSpin 0.8s linear infinite;
}

@keyframes estimateSubmitSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Final navbar link colors */

/*.navbar .nav-menu > li > a{*/
/*    color:#ffffff;*/
/*}*/

/*.navbar.navbar-scrolled .nav-menu > li > a{*/
/*    color:#1d1f24;*/
/*}*/

.navbar .nav-menu > li > a:hover,
.navbar .nav-menu > li > a:focus,
.navbar .nav-menu > li > a.active,
.navbar.navbar-scrolled .nav-menu > li > a:hover,
.navbar.navbar-scrolled .nav-menu > li > a:focus,
.navbar.navbar-scrolled .nav-menu > li > a.active{
    color:#E67500;
}

/* Dropdown links */

.navbar .dropdown-menu li a{
    color:#1d1f24;
}

/* Dropdown link hover */

.navbar .dropdown-menu li a:hover,
.navbar .dropdown-menu li a:focus-visible{
    background:rgba(5,129,129,0.08);
    color:#E67500;
    padding-left:26px;
    outline:none;
}

/* Left hover line */

.navbar .dropdown-menu li a:hover::before,
.navbar .dropdown-menu li a:focus-visible::before{
    height:24px;
}

/* Right arrow */

.navbar .dropdown-menu li a::after{
    color:#E67500;
}

.navbar .dropdown-menu li a:hover::after,
.navbar .dropdown-menu li a:focus-visible::after{
    opacity:1;
    transform:translateX(0);
}
/* ==================================
   CLEAN DROPDOWN ARROWS
================================== */

.navbar .nav-menu > li.dropdown > a{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.navbar .nav-menu > li.dropdown > a::after{
    content:"";

    width:0;
    height:0;

    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:6px solid currentColor;

    margin-left:2px;

    flex:0 0 auto;

    transform:rotate(0deg);
    transform-origin:center;

    transition:transform 0.25s ease;
}

.navbar .nav-menu > li.dropdown:hover > a::after,
.navbar .nav-menu > li.dropdown:focus-within > a::after{
    transform:rotate(180deg);
}

/* ==================================
   end of CLEAN DROPDOWN ARROWS
================================== */




/* ==================================
   FINAL RESPONSIVE NAVBAR OVERRIDES
   Keep this at the end of the file
================================== */

@media (max-width: 1024px) {

	.nav-menu,
	.estimate-btn {
		display: none;
	}

	.dropdown-menu {
		display: none;
	}

	.nav-container {
		position: relative;
		height: 70px;
		padding: 0 20px;
	}

	.logo img {
		width: 145px;
		max-height: 58px;
	}

	.hamburger {
		position: relative;
		z-index: 100002;

		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;

		padding: 10px;
		border: 0;
		background: transparent;

		cursor: pointer;
		pointer-events: auto;
		touch-action: manipulation;

		-webkit-appearance: none;
		appearance: none;
	}

	.mobile-menu {
		top: 70px;
		max-height: calc(100vh - 70px);
		padding: 25px;
		gap: 18px;
	}

	.mobile-menu.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {

	.nav-container {
		height: 60px;
	}

	.logo img {
		width: 130px;
		max-height: 52px;
	}

	.mobile-menu {
		top: 60px;
		max-height: calc(100vh - 60px);
		padding: 22px;
		gap: 16px;
	}
}


/* ==================================
   END OF FINAL RESPONSIVE NAVBAR OVERRIDES
   Keep this at the end of the file
================================== */



/* ==================================
   NAVBAR TEAL HOVER / ACTIVE COLORS
================================== */

/* Hamburger button */

.navbar .hamburger,
.navbar .hamburger:hover,
.navbar .hamburger:focus,
.navbar .hamburger:focus-visible,
.navbar .hamburger:active,
.navbar .hamburger.active {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;

	-webkit-tap-highlight-color: transparent;
}

/* Teal background on hover and when menu is open */

.navbar .hamburger:hover,
.navbar .hamburger:focus-visible,
.navbar .hamburger:active,
.navbar .hamburger.active {
	background: #058181 !important;
}

/* Make hamburger lines white */

.navbar .hamburger:hover span,
.navbar .hamburger:focus-visible span,
.navbar .hamburger:active span,
.navbar .hamburger.active span {
	background: #ffffff !important;
}

/* Mobile dropdown headings */

.navbar .mobile-dropdown-toggle:hover,
.navbar .mobile-dropdown-toggle:focus,
.navbar .mobile-dropdown-toggle:focus-visible,
.navbar .mobile-dropdown-toggle:active,
.navbar .mobile-dropdown.is-open > .mobile-dropdown-toggle {
	background: #058181 !important;
	color: #ffffff !important;

	border-color: #058181 !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Dropdown arrow */

.navbar .mobile-dropdown-toggle:hover i,
.navbar .mobile-dropdown-toggle:focus-visible i,
.navbar .mobile-dropdown.is-open > .mobile-dropdown-toggle i {
	color: #ffffff !important;
}

/* Direct mobile menu links */

.navbar .mobile-menu > a:hover,
.navbar .mobile-menu > a:focus,
.navbar .mobile-menu > a:focus-visible,
.navbar .mobile-menu > a:active {
	background: #058181 !important;
	color: #ffffff !important;

	outline: none !important;
	box-shadow: none !important;
}

/* Mobile dropdown links */

.navbar .mobile-dropdown-menu a:hover,
.navbar .mobile-dropdown-menu a:focus,
.navbar .mobile-dropdown-menu a:focus-visible,
.navbar .mobile-dropdown-menu a:active {
	background: #058181 !important;
	color: #ffffff !important;

	outline: none !important;
	box-shadow: none !important;
}

/* Consistent spacing and shape */

.navbar .mobile-dropdown-toggle,
.navbar .mobile-menu > a,
.navbar .mobile-dropdown-menu a {
	border-radius: 8px;
	transition:
		background-color 0.25s ease,
		color 0.25s ease;
}

/* ==================================
   END OF NAVBAR TEAL HOVER / ACTIVE COLORS
================================== */


/* ==================================
   UNIFORM MOBILE MENU SPACING
================================== */

@media (max-width: 1024px) {

	/* Space between main mobile menu items */

	.navbar .mobile-menu {
		gap: 12px;
	}

	/* Make Home, Company and submenu links equal */

	.navbar .mobile-menu > a,
	.navbar .mobile-dropdown-toggle,
	.navbar .mobile-dropdown-menu a {
		width: 100%;
		min-height: 52px;

		display: flex;
		align-items: center;

		margin: 0;
		padding: 12px 16px !important;

		border: 0;
		border-radius: 10px;

		font: inherit;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;

		box-sizing: border-box;
	}

	/* Keep dropdown text and arrow separated */

	.navbar .mobile-dropdown-toggle {
		justify-content: space-between;
	}

	/* Space between submenu links */

	.navbar .mobile-dropdown-menu-inner {
		width: 100%;
		display: grid;
		gap: 8px;
	}

	/* Space between Company and first submenu link */

	.navbar .mobile-dropdown-menu {
		margin-top: 0;
	}

	.navbar .mobile-dropdown.is-open .mobile-dropdown-menu {
		margin-top: 8px;
	}

	/* Unified hover and active background */

	.navbar .mobile-menu > a:hover,
	.navbar .mobile-menu > a:focus-visible,
	.navbar .mobile-dropdown-toggle:hover,
	.navbar .mobile-dropdown-toggle:focus-visible,
	.navbar .mobile-dropdown.is-open > .mobile-dropdown-toggle,
	.navbar .mobile-dropdown-menu a:hover,
	.navbar .mobile-dropdown-menu a:focus-visible {
		background: #058181 !important;
		color: #ffffff !important;
	}

	/* Keep dropdown arrow white */

	.navbar .mobile-dropdown-toggle:hover i,
	.navbar .mobile-dropdown-toggle:focus-visible i,
	.navbar .mobile-dropdown.is-open > .mobile-dropdown-toggle i {
		color: #ffffff !important;
	}
}

/* ==================================
  END OF UNIFORM MOBILE MENU SPACING
================================== */