.men-chip,

.men-rate,

h3.men-head,

p.estimate,

p.men-para {

    font-family: "SF Pro Display";

    font-style: normal

}



.men-rate {

    font-weight: 600;

    line-height: normal

}



.tabs ul,

ol,

ul {

    list-style-type: none

}



*,

.frame .button,

.tabs ul li {

    box-sizing: border-box

}



:is(body, h1, h2, h3, h4, h5, h6, p, span, strong, blockquote, ul, ol, li, a) {

    margin: 0;

    padding: 0;

    font-family: "SF Pro Display"

}



a,

a:hover {

    text-decoration: none

}



.container {

    max-width: 1538px;

    margin: auto;

    width: 100%

}





header {

    background: #fff;

    box-shadow: 0 3px 34px 0 rgba(79, 49, 27, .1)

}



nav {

    display: flex;

    padding: 1.38rem 0;

    justify-content: space-between;

    align-items: center

}



.area-address-inner {

    align-items: center;

    display: flex

}



.progress-bar__wrapper {

    display: flex

}



.men-rate,

h3.men-head {

    color: var(--Primary-900, #012d38)

}



.upcoming-cards {

    margin-top: 1.25rem

}



.men-chip,

progress {

    background: var(--Gray-2, #e9ecef)

}



.men-name,

.project-name {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: .31rem

}



.men-rate {

    display: flex;

    align-items: center;

    gap: .19rem;

    font-size: .75rem;

    letter-spacing: -.0225rem

}



.men-chip,

a.edit {

    gap: .25rem;

    display: flex

}



.fc .fc-button-primary,

.men-chip {

    color: #495057

}



h3.men-head {

    font-size: 1rem;

    font-weight: 700;

    line-height: normal

}



.men-chip,

p.men-para {

    font-weight: 500;

    line-height: normal

}



p.men-para {

    color: var(--Primary-600, #306979);

    font-size: .75rem

}



.men-chip {

    border-radius: 6.25rem;

    padding: .375rem .5rem;

    justify-content: center;

    align-items: center;

    text-align: justify;

    font-size: .7rem;

    letter-spacing: -.01875rem

}



.custom-date,

.custom-day,

.tabs ul li,

h2#fc-dom-1 {

    text-align: center

}



.men-address {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: .62rem

}



.area-input {

    justify-content: space-between

}



p.estimate {

    color: var(--Primary-400, #588c9c);

    font-size: .75rem;

    font-weight: 400;

    line-height: normal;

    margin-bottom: .19rem

}



.tabs ul li label,

a.edit,

p.area-address-inner-para,

p.price {

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    font-family: "SF Pro Display"

}



p.price {

    color: var(--Primary-900, #012d38);

    font-size: .875rem

}



.services-card,

.services-card.services-card-add {

    border-radius: var(--input-button-spacing-spacing-12-px, .75rem);

    height: 100%

}



p.area-address-inner-para {

    color: #000;

    font-size: 1.25rem;

    letter-spacing: -.0375rem

}



a.edit {

    color: var(--Primary-900, #012d38);

    font-size: .875rem;

    letter-spacing: -.02625rem

}



.tabs input[name=tab-control]:first-of-type:checked~ul>li:first-child,

.tabs input[name=tab-control]:nth-of-type(2):checked~ul>li:nth-child(2) {

    border-radius: .625rem;

    background: linear-gradient(128deg, #0c5162 17.73%, #012d38 77.16%);

    display: flex;

    padding: var(--input-button-spacing-spacing-16-px, 1rem) .625rem;

    justify-content: center;

    align-items: center;

    gap: .625rem

}



.tabs input[name=tab-control]:first-of-type:checked~ul>li:first-child label,

.tabs input[name=tab-control]:nth-of-type(2):checked~ul>li:nth-child(2) label {

    color: var(--Gray-0, #f8f9fa);

    font-family: "SF Pro Display";

    font-size: .75rem;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    text-transform: uppercase

}



.tabs ul li label {

    color: var(--Gray-6, #868e96);

    font-size: .75rem;

    text-transform: uppercase;

    transition: .2s ease-in-out;

    padding: 5px auto;

    overflow: hidden;

    text-overflow: ellipsis;

    display: block;

    cursor: pointer;

    white-space: nowrap;

    -webkit-touch-callout: none;

    user-select: none

}



:root {

    --blue: #428BFF;

    --red: #FF4A53;

    --dark: #333;

    --accent: var(--blue);

    --accent-inactive: #d0e4ff;

    --secondary: var(--accent-inactive);

    --tab-count: 4;

    --breakpoint-medium: calc(var(--tab-count) * 250px);

    --breakpoint-small: calc(var(--tab-count) * 150px)

}



.tabs {

    left: 50%;

    transform: translateX(-50%);

    position: relative;

    min-width: calc(var(--tab-count) * 60px)

}



.tabs input[name=tab-control] {

    display: none

}



.tabs ul {

    display: flex;

    flex-direction: row;

    border-radius: .625rem;

    background: var(--Gray-0, #f8f9fa);

    padding: .3125rem;

    justify-content: center;

    align-items: center;

    gap: .3125rem

}



.tabs ul li {

    flex: 1;

    width: calc(100% / var(--tab-count));

    padding: 0 10px

}



.tabs ul li label:active,

.tabs ul li label:focus,

.tabs ul li label:hover {

    outline: 0;

    color: #000

}



.tabs .content {

    margin-top: .94rem

}



.tabs .content section {

    display: none;

    animation: .3s ease-in-out content;

    line-height: 1.4

}



.services-card.services-card-add span,

h4.upcoming-card-head,

p.area-address-inner-zip-para,

p.project-para,

p.project-per {

    line-height: normal;

    font-style: normal

}



.tabs .content section h2 {

    color: var(--accent)

}



.tabs .content section h2::after {

    content: "";

    position: relative;

    display: block;

    width: 30px;

    height: 3px;

    background: var(--accent);

    margin-top: 5px;

    left: 1px

}



.tabs input[name=tab-control]:first-of-type:checked~ul>li:first-child label {

    cursor: default

}



.tabs input[name=tab-control]:first-of-type:checked~ul>li:first-child label svg {

    fill: var(--accent)

}



.dropdown.show,

.fc-col-header-cell .fc-col-header-cell-cushion,

.fc-col-header-cell .fc-col-header-cell-cushion span,

.payment_card.active .remix-icons-fill-wrapper,

.roof_card.active .remix-icons-fill-wrapper,

.tabs input[name=tab-control]:first-of-type:checked~.content>section:first-child,

.tabs input[name=tab-control]:nth-of-type(2):checked~.content>section:nth-child(2) {

    display: block

}



@keyframes content {

    from {

        opacity: 0;

        transform: translateY(5%)

    }



    to {

        opacity: 1;

        transform: translateY(0)

    }

}



@media (max-width:var(--breakpoint-medium)) {

    .tabs ul li label {

        white-space: initial

    }

}



@media (max-width:var(--breakpoint-small)) {

    .tabs ul li label {

        padding: 5px;

        border-radius: 5px

    }



    .tabs ul li label span {

        display: none

    }



    .tabs .content {

        margin-top: 20px

    }



    .tabs .content section h2 {

        display: block

    }

}





p.project-para,

p.project-per {

    color: #021920;

    font-family: "SF Pro Display";

    font-size: .75rem

}



.services-card {

    background: #e2f0f4;

    max-width: 10.47919rem;

    max-height: 6.25rem;

    width: 100%;

    position: relative;

    overflow: hidden;

    min-height: 100px

}



img.services-card-img {

    margin-left: auto;

    width: 100%;

    height: 100%

}



h4.services-card-head {

    position: absolute;

    z-index: 999;

    left: .94rem;

    top: .94rem;

    max-width: 5.4rem

}



.services-card.services-card-add {

    display: flex;

    padding: .52081rem 1rem;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: .375rem;

    border: 1px dashed var(--Gray-3, #dee2e6);

    background: var(--Gray-1, #f1f3f5)

}



.services-card.services-card-add span {

    color: var(--Gray-6, #868e96);

    font-family: "SF Pro Display";

    font-size: .875rem;

    font-weight: 500;

    letter-spacing: -.0175rem;

    display: flex

}



img.services-card-img-small {

    max-width: 7.6875rem;

    max-height: 5.0625rem;

    object-fit: contain;

    margin-left: auto;

    position: absolute;

    right: 0;

    bottom: -5px;

    width: fit-content

}



.frame,

.frame .component,

.frame .div,

.frame .prossecc-dot,

.frame .rectangle,

.frame .step-view,

.frame .steps {

    position: relative

}



progress {

    width: 100%;

    transition: none;

    height: .25rem;

    border-radius: .25rem

}



progress[value]::-webkit-progress-bar {

    width: 100%;

    height: .25rem;

    border-radius: .25rem;

    background-color: #e9ecef

}



progress[value]::-webkit-progress-value {

    width: 0;

    border-radius: .25rem;

    background-color: #eb9a40

}



.project-card {

    border-radius: .625rem;

    background: var(--Gray-1, #f1f3f5);

    display: flex;

    padding: .3125rem;

    flex-direction: column;

    align-items: flex-start;

    gap: .5rem

}



p.project-para {

    font-weight: 700;

    letter-spacing: -.015rem

}



p.project-per {

    font-weight: 500

}



p.country,

p.country-name,

p.upcoming-card-para {

    font-family: "SF Pro Display";

    font-size: 1.125rem;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    letter-spacing: -.03375rem

}



.project-inner {

    width: 100%;

    padding: .3125rem

}



.area-input {

    border-radius: var(--input-button-spacing-spacing-8-px, .5rem);

    border: 1px solid var(--Gray-1, #f1f3f5);

    background: var(--Gray-0, #f8f9fa);

    display: flex;

    padding: 1.125rem .9375rem;

    align-items: center;

    align-self: stretch;

    width: 100%;

    margin-bottom: 1.13rem

}



.area-address-inner {

    justify-content: space-between

}



.area-address,

.upcoming-cards {

    flex-direction: column

}



p.area-address-inner-zip-para,

p.country,

p.upcoming-card-para {

    color: var(--Gray-6, #868e96)

}



p.country-name {

    color: #000

}



p.area-address-inner-zip-para {

    letter-spacing: -.02rem;

    font-size: 1rem;

    font-weight: 500;

    font-family: "SF Pro Display"

}



.area-address {

    display: flex;

    gap: .31rem

}



.upcoming-card,

.upcoming-cards {

    gap: .94rem;

    display: flex

}



.upcoming-card {

    align-items: center

}



h4.upcoming-card-head {

    color: #000;

    font-family: "SF Pro Display";

    font-size: 1.125rem;

    font-weight: 700;

    letter-spacing: -.01125rem;

    margin-bottom: .31rem

}



.home-body {

    height: 100vh;

    overflow: hidden;

    background: #f5f1ee

}





#calendar {

    max-width: 47.125rem;

    max-height: 32.5rem;

    margin: 0 auto;

    border-radius: var(--input-button-spacing-spacing-12-px, .75rem);

    border: 1px solid #fff;

    background: #fcfbfa;

    backdrop-filter: blur(5px);

    padding: 1.25rem

}



.fc-toolbar-chunk div {

    display: flex;

    gap: .75rem;

    align-items: center

}



.fc-daygrid-body.fc-daygrid-body-unbalanced.fc-daygrid-body-natural,

.payment_card .remix-icons-fill-wrapper,

.roof_card .remix-icons-fill-wrapper,

td.fc-timegrid-divider.fc-cell-shaded {

    display: none

}



.fc-col-header-cell .fc-col-header-cell-cushion span:first-child {

    font-weight: 700

}



.fc-col-header-cell .fc-col-header-cell-cushion span:last-child,

.step-number {

    font-size: 12px;

    color: #666

}



.fc .fc-button .fc-icon {

    font-size: 1rem;

    font-weight: 600;

    margin-top: -20px;

    margin-left: -1px

}



button.fc-button.fc-button-primary {

    width: 1.75rem;

    height: 1.75rem;

    padding: .375rem;

    border-radius: .375rem;

    border: 1px solid var(--Gray-2, #e9ecef);

    background: var(--Gray-0, #f8f9fa)

}



button.fc-timeGridWeek-button.fc-button.fc-button-primary.fc-button-active {

    font-size: .875rem;

    width: 2.675rem;

    height: 1.675rem;

    padding: 0;

    background: 0 0;

    color: var(--Gray-6, #868e96);

    font-weight: 400;

    border: none

}



h2#fc-dom-1 {

    font-size: .875rem;

    font-weight: 500;

    width: 5rem

}



.fc-toolbar-chunk {

    font-size: 1.25rem;

    font-weight: 700

}



.fc .fc-toolbar.fc-header-toolbar {

    margin-bottom: 1.25rem

}



.fc .fc-timegrid-slot-minor,

.fc-theme-standard .fc-scrollgrid,

.fc-theme-standard td,

.fc-theme-standard th {

    border: none

}



.fc .fc-view-harness-active {

    overflow: scroll

}



#scrollid::-webkit-scrollbar-track {

    background-color: #d9d9d9 !important

}



#scrollid::-webkit-scrollbar {

    width: .25rem !important;

    height: .25rem !important;

    border-radius: 3.125rem !important;

    background-color: #d9d9d9 !important

}



#scrollid::-webkit-scrollbar-y {

    height: 5rem !important

}



#scrollid::-webkit-scrollbar-thumb {

    background-color: #02303c !important;

    border-radius: 3.125rem !important;

    height: 4.8125rem !important

}



.fc .fc-scrollgrid-liquid {

    min-width: 75rem;

    min-height: 220rem

}



.fc-time-grid-container .fc-slats td:nth-child(odd) {

    margin-bottom: 10px

}



.fc-scroller {

    overflow: hidden !important

}



.fc .fc-timegrid-axis-frame {

    padding: 1rem 0

}



th.fc-timegrid-axis {

    max-width: 3.375rem

}



th.fc-col-header-cell {

    width: 10rem

}



.fc-day-past.fc-timegrid-col {

    width: 10rem !important

}



.fc .fc-timegrid-col.fc-day-today {

    background-color: var(--fc-today-bg-color);

    width: 10rem

}



.fc-v-event {

    display: block;

    max-width: 9.675rem;

    background: var(--Neutral-50, #f7f7f7);

    border-radius: .625rem !important;

    border: none

}



a.navbar-link.active::after,

a.become-btn {

    border-radius: 10px;

    background: var(--1-900, #012d38)

}



.service-area-input,

button.schedule_button,

select.radius-select {

    background: var(--Primary-White, #fff)

}



.fc-v-event .fc-event-main {

    color: #000;

    padding: .5rem !important

}



.fc-title {

    font-size: .875rem !important;

    font-weight: 890;

    color: var(--1-900, #012d38);

    line-height: 1.125rem

}



.fc-timegrid-event-harness {

    height: 12rem

}



.fc-content {

    display: flex;

    flex-direction: column;

    gap: .5rem

}



.fc-subtitle {

    color: var(--1-700, #215563);

    font-size: .75rem;

    font-weight: 590;

    line-height: 1.25rem

}



.event-details {

    display: flex;

    gap: .5rem

}



.event-name {

    color: var(--3-800, #2f2f2f);

    font-weight: 600;

    line-height: 1rem;

    font-size: .75rem

}



.event-address-head {

    color: var(--1-400, #588c9c);

    font-size: .625rem;

    font-weight: 500;

    padding-bottom: .25rem

}



.event-address {

    color: var(--1-700, #215563);

    font-size: .625rem;

    font-weight: 500

}



.custom-date,

.custom-day,

.fc-timegrid-axis-frame,

a.navbar-link.active {

    color: var(--1-900, #012d38)

}



.custom-date {

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.5rem

}



.custom-day {

    font-size: .75rem;

    font-weight: 500;

    line-height: 1.5rem

}



.fc-timegrid-axis-frame {

    text-align: center;

    font-size: 1rem;

    font-weight: 500

}



.fc-timegrid-slot-label-cushion.fc-scrollgrid-shrink-cushion {

    color: var(--1-500, #3b788a);

    text-align: start !important;

    font-size: .75rem;

    font-style: normal;

    font-weight: 500;

    line-height: 1.5rem

}



.frame .text,

a.navbar-link.active {

    font-size: 18px

}



.frame .text,

a.navbar-link {

    font-weight: 400;

    position: relative

}



a.navbar-link.active,

a.become-btn {

    font-weight: 700;

    line-height: normal;

    font-family: "SF Pro Display";

    font-style: normal

}



.home-navbar-btns,

.nav {

    display: flex;

    align-items: center;

    gap: 36px

}



a.navbar-link {

    display: flex;

    color: var(--Gray-6, #868e96);

    font-family: "SF Pro Display";

    font-size: 16px;

    font-style: normal;

    line-height: normal

}



a.navbar-link.active::after {

    content: "";

    position: absolute;

    left: 0;

    width: 100%;

    height: 2px;

    bottom: -3px

}



a.become-btn {

    display: flex;

    padding: 17px 26px;

    justify-content: center;

    align-items: center;

    color: var(--Primary-White, #fff);

    font-size: 15px;

    text-transform: uppercase;

    border: none;

    gap: 12px

}



a.become-btn:hover {

    background-color: rgb(1 45 56 / 90%)

}



.frame {

    display: flex;

    width: 100%;

    height: auto;

    align-items: flex-start;

    gap: 24px;

    padding: 1rem 0;

    height: calc(100% - 10%);

}



.frame .step-view {

    display: flex;

    flex-direction: column;

    max-width: 438px;

    align-items: flex-start;

    gap: 40px;

    padding: 48px;

    align-self: stretch;

    border-radius: 30px;

    overflow: hidden;

    border-right-width: 1px;

    border-right-style: solid;

    border-color: var(--shade-200);

    background: linear-gradient(180deg, #fff 45.85%, #f6f6f9 100%);

    width: 100%;

}



.frame .steps {

    display: inline-flex;

    flex-direction: column;

    height: 455px;

    align-items: flex-start;

    margin-right: -4px

}



.frame .component {

    display: flex;

    /* width: 346px; */

    /* height: 65px; */

    align-items: flex-start;

    gap: 15px

}



.frame .div {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    flex: 0 0 auto

}



.frame .prossecc-dot {

    width: 32px;

    height: 32px;

    background-color: #fff;

    border-radius: 90px;

    border: 10px solid;

    border-color: var(--x-1900)

}



.frame .prossecc-dot.complete {

    background-color: var(--teal-6);

    border: none;

    display: flex;

    align-items: center;

    justify-content: center

}



.frame .div .remix-icons-fill-wrapper .remix-icons-fill,

.frame .div-2 .remix-icons-fill-wrapper .remix-icons-fill,

.frame .prossecc-dot.complete .remix-icons-fill {

    width: 20px;

    height: 20px

}



.frame .rectangle {

    height: 33px;

    background-color: #d9d9d9;

    border: 1px solid var(--teal-6);

    width: 1px

}



.frame .text-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 4px 0;

    position: relative;

    /* flex: 1; */

    /* flex-grow: 1; */

}



.frame .div-2,

.frame .element-wrapper {

    display: inline-flex;

    position: relative

}



.frame .text {

    flex: 1;

    margin-top: -1px;

    font-family: "SF Pro Display";

    color: var(--text);

    letter-spacing: 0;

    line-height: 24px

}



.frame .element-wrapper {

    align-items: flex-start;

    gap: 10px;

    padding: 6px;

    flex: 0 0 auto;

    background-color: var(--shade-100);

    border-radius: 90px

}



.frame .element {

    position: relative;

    width: 20px;

    height: 20px;

    margin-top: -1px;

    font-family: "SF Pro Display";

    font-weight: 500;

    color: var(--shade-900);

    font-size: 16px;

    text-align: center;

    letter-spacing: -.32px;

    line-height: 20px;

    white-space: nowrap

}



.frame .p,

.frame .text-2 {

    position: relative;

    font-family: "SF Pro Display-Regular", Helvetica;

    font-weight: 400;

    color: var(--x-3800);

    font-size: 18px;

    letter-spacing: 0;

    line-height: 24px;

    margin-top: -1px

}



.frame .rectangle-2 {

    position: relative;

    width: 1px;

    height: 33px;

    border: 1px dashed;

    border-color: var(--gray-5)

}



.frame .text-2 {

    flex: 1

}



.frame .div-2 {

    flex-direction: column;

    align-items: center;

    align-self: stretch;

    flex: 0 0 auto

}



.frame .rectangle-3 {

    flex: 1;

    flex-grow: 1;

    border: 1px dashed;

    border-color: var(--gray-5);

    position: relative;

    width: 1px

}



.frame .div-3,

.frame .div-4 {

    display: flex;

    flex-direction: column;

    align-self: stretch

}



.frame .component-2,

.frame .div-3 {

    border-radius: 20px;

    overflow: hidden

}



.frame .p {

    width: fit-content;

    white-space: nowrap

}



.frame .close-up-detail-new {

    position: absolute;

    width: 303px;

    height: 200px;

    bottom: 0;

    right: 0;

    object-fit: cover

}



.frame .div-3 {

    align-items: flex-start;

    position: relative;

    flex: 1;

    flex-grow: 1

}



.frame .div-4 {

    align-items: center;

    justify-content: center;

    gap: 36px;

    padding: 0 20px;

    position: relative;

    flex: 1;

    width: 100%;

    flex-grow: 1;

    background-color: #fff;

    padding-top: 60px;

    padding-bottom: 20px;

}



.frame .text-wrapper-2 {

    position: relative;

    width: fit-content;

    font-family: "SF Pro Display-Bold", Helvetica;

    font-weight: 700;

    color: var(--x-3900);

    font-size: 28px;

    text-align: center;

    letter-spacing: 0;

    line-height: normal;

    width: auto;

    margin-bottom: 24px;

}



.frame .div-5,

.frame .div-6 {

    display: flex;

    align-self: stretch;

    width: 100%;

    position: relative

}



.frame .text-3,

.frame .text-4,

.frame .text-5,

.frame .text-6 {

    font-family: "SF Pro Display-Bold", Helvetica;

    font-weight: 700;

    color: var(--x-1900);

    font-size: 24px;

    letter-spacing: 0;

    line-height: normal

}



.frame .div-5 {

    flex-direction: column;

    align-items: center;

    gap: 34px;

    flex: 0 0 auto

}



.frame .div-6 {

    align-items: flex-start;

    justify-content: center;

    gap: 24px;

    flex: 0 0 auto;

    flex-wrap: wrap

}



.frame .component-2 {

    position: relative;

    /* flex: 1; */

    /* flex-grow: 1; */

    height: 250px;

    background-color: #fff;

    border: 1px solid;

    border-color: var(--gray-1);

    max-width: 207px;

    /* min-width: 207px; */

    width: 100%;

    display: flex;

    align-items: flex-end;

}



.frame .img-wrapper,

.frame .remix-icons-fill-wrapper {

    gap: 10px;

    border-radius: 60px

}



.frame .text-3 {

    position: absolute;

    top: 32px;

    left: 30px

}



.frame .SOLAR-PANEL {

    /* height: 136px; */

    top: 114px;

    left: 0

}



.frame .text-4 {

    position: absolute;

    height: 29px;

    top: 32px;

    left: 30px

}



.frame .SOLAR-PANEL-d {

    /* height: 130px; */

    top: 120px;

    left: 0

}



.frame .component-3 {

    box-shadow: 0 20px 64px -10px #e9e9f4, 0 20px 64px -10px #e9e9f4

}



.frame .overlap-group {

    position: absolute;

    width: 154px;

    height: 74px;

    top: 16px;

    left: 30px

}



.frame .text-5 {

    position: absolute;

    height: 58px;

    top: 16px;

    left: 0

}



.frame .remix-icons-fill-wrapper {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: 16px;

    right: 23px

}



.frame .div-7,

.frame .img-wrapper {

    align-items: center;

    display: inline-flex

}



.frame .remix-icons-fill {

    position: relative;

    width: 30px;

    height: 30px

}



.frame .img {

    /* position: absolute; */

    /* width: 208px; */

    /* height: 135px; */

    top: 115px;

    left: 0;

    object-fit: cover

}



.frame .text-6 {

    position: absolute;

    top: 32px;

    left: 30px

}



.frame .modern-bathtub-elite {

    /* position: absolute; */

    /* width: 208px; */

    /* height: 124px; */

    top: 126px;

    left: 0;

    object-fit: cover

}



.frame .baroque-stone-fence {

    /* position: absolute; */

    /* width: 208px; */

    /* height: 127px; */

    top: 123px;

    left: 0

}



.frame .img-wrapper {

    justify-content: center;

    position: absolute;

    top: 16px;

    left: 154px

}



.frame .object {

    /* position: absolute; */

    /* width: 141px; */

    /* height: 124px; */

    top: 126px;

    left: 0

}



.frame .SOLAR-PANEL-2 {

    /* width: 205px; */

    /* height: 109px; */

    top: 141px;

    /* position: absolute; */

    left: 0

}



.frame .div-7 {

    padding: 10px 8px;

    position: absolute;

    top: 20px;

    right: 20px;

    background-color: #f6f6f9;

    border-radius: 10px;

    margin-left: auto

}



.frame .bottom,

.frame .div-wrapper {

    align-items: center;

    align-self: stretch

}



.frame .div-wrapper {

    display: inline-flex;

    padding: 0 8px;

    position: relative;

    flex: 0 0 auto

}



.frame .text-wrapper-3 {

    position: relative;

    width: fit-content;

    letter-spacing: 0;

    color: var(--Gray-6, #868e96);

    font-family: "SF Pro Display";

    font-size: 14px;

    font-style: normal;

    font-weight: 500;

    line-height: normal

}



.frame .bottom {

    display: flex;

    justify-content: center;

    gap: 24px;

    padding: 24px;

    position: relative;

    width: 100%;

    flex: 0 0 auto;

    background-color: #fff;

    border-top-width: 1px;

    border-top-style: solid;

    border-color: #f1f3f5

}



.frame .button-wrapper,

.frame .component-5 {

    display: inline-flex;

    align-items: center;

    position: relative;

    gap: 10px

}



.frame .component-5 {

    justify-content: center;

    padding: 18px 20px;

    flex: 0 0 auto;

    background-color: #ececec;

    border-radius: 12px;

    height: 56px

}



.frame .button-wrapper {

    all: unset;

    box-sizing: border-box;

    justify-content: center;

    padding: 0 10px;

    flex: 0 0 auto

}



.frame .button {

    all: unset;

    position: relative;

    width: fit-content;

    margin-top: -1px;

    font-family: "SF Pro Display";

    font-weight: 400;

    color: var(--primarywhite);

    font-size: 16px;

    letter-spacing: -.32px;

    line-height: 20px;

    white-space: nowrap

}



.frame .text-wrapper-4,

label {

    font-weight: 500;

    font-style: normal

}



.frame .component-6 {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    flex: 1;

    flex-grow: 1

}



.frame .frame-wrapper {

    display: flex;

    align-items: flex-start;

    padding: 12px;

    position: relative;

    flex: 1;

    flex-grow: 1

}



.frame .rectangle-wrapper {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    position: relative;

    flex: 1;

    flex-grow: 1;

    background-color: var(--gray-0);

    border-radius: 9px

}



.frame .component-7,

.frame .rectangle-4 {

    background-color: var(--x-1900);

    position: relative

}



.frame .rectangle-4 {

    width: 54.9px;

    height: 3px;

    border-radius: 9px

}



.frame .text-wrapper-4 {

    position: relative;

    width: 74px;

    letter-spacing: 0;

    color: var(--Gray-9, #212529);

    text-align: right;

    font-family: "SF Pro Display";

    font-size: 14px;

    line-height: normal

}



.dropdown .text-wrapper,

label {

    letter-spacing: -.16px;

    line-height: 24px;

    font-family: "SF Pro Display";

    font-size: 16px

}



.frame .component-7 {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 20px;

    flex: 0 0 auto;

    border-radius: 12px;

    gap: 10px;

    height: 56px

}



.frame .steps .component:last-child .div .rectangle {

    border: none;

    width: 0

}



.frame .div .remix-icons-fill-wrapper,

.frame .div-2 .remix-icons-fill-wrapper {

    position: relative;

    width: 32px;

    height: 32px;

    background-color: var(--teal-6);

    border-radius: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 5px

}



main,
form,

section.offer-sec,

section.offer-sec .container {

    height: 100%

}



p.text-wrapper-2.service-area {

    max-width: 21rem

}



.div-3 {

    /* overflow-y: scroll !important; */

}



.radius-selector {

    display: flex;

    align-items: flex-start;

    flex-direction: column

}



label {

    color: var(--Shade-09, #272d36);

    margin-bottom: 8px;

    display: flex

}



.service-area-form {

    display: flex;

    flex-direction: column;

    gap: 24px;

    max-width: 375px;

    width: 100%

}



select.radius-select {

    display: flex;

    padding: 12px;

    justify-content: center;

    align-items: center;

    align-self: stretch;

    border-radius: 12px;

    border: 1px solid #e6e9ec;

    appearance: none;

    width: 100%

}



.input-element-wrapper-select,

.search-main-wrapper,

.step-component {

    position: relative;

    width: 100%

}



.input-element-wrapper-select::after {

    content: "";

    position: absolute;

    background: url(../image/arrow-down.svg) no-repeat;

    width: 24px;

    height: 24px;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 999

}



.service-area-input {

    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .04), 0 0 0 1px #e9ecef;

    display: flex;

    justify-content: center;

    align-items: center

}



.service-area-input::placeholder {

    color: var(--Shade-06, #7d848e);

    font-family: "SF Pro Display";

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

    letter-spacing: -.16px

}



.dropdown {

    flex-direction: column;

    width: 100%;

    align-items: flex-start;

    gap: 8px;

    overflow: hidden;

    box-shadow: 0 16px 16px 0 rgba(0, 0, 0, .08)

}



.dropdown .search-frame,

.input-element-wrapper {

    position: relative;

    align-items: center;

    width: 100%

}



.dropdown .search-frame {

    display: inline-flex;

    gap: 14px;

    flex: 0 0 auto

}



.dropdown .search-image-rectangle {

    position: relative;

    width: 55.32px;

    height: 48px;

    object-fit: cover;

    border-radius: 8px;

    background: url(<path-to-image>) 50%/cover no-repeat #d3d3d3

}



.dropdown .text-wrapper {

    position: relative;

    width: fit-content;

    font-weight: 500;

    color: var(--x-1900);

    /* white-space: nowrap; */

}



.search-main-wrapper .dropdown {

    position: absolute;

    z-index: 999;

    left: 0

}



.input-element-wrapper {

    display: flex

}



.input-element-wrapper span {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%)

}



.service-area-input {

    width: 100%;

    padding: 12px 12px 12px 45px;

    border: 1px solid #dee2e6;

    border-radius: 8px;

    font-size: 16px;

    color: #212529;

    background: #fff

}



.service-area-input:focus {

    outline: 0;

    border-color: #228be6

}



.dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #fff;

    border-radius: 8px;

    margin-top: 4px;

    max-height: 300px;

    overflow-y: auto;

    z-index: 1000;

    display: none

}



.search-frame {

    display: flex;

    align-items: center;

    padding: 12px;

    cursor: pointer;

    transition: background-color .2s

}



.search-frame:hover {

    background-color: #f8f9fa

}



.search-image-rectangle {

    width: 24px;

    height: 24px;

    object-fit: cover;

    border-radius: 4px

}



button {

    border: none;

    background-color: transparent;

    cursor: pointer

}



/* .service-area-right svg {

    width: 500px !important;

    height: 600px !important;



} */



.service-area-right svg {

    width: min(90vw, 1000px);

    display: flex; 

    align-items: center;   

    justify-content: center;

    height: auto;

    aspect-ratio: 80.4 / 55.38;

    /* viewBox="0 0 80.4 55.38" */

    transform-origin: center;

    transform: scale(1);

}



.service-area-right svg path{

   stroke-width: 0.3 !important;

}





.service-area-wrapper {

    display: flex;

    align-items: center;

    gap: 24px;

    width: 100%;

    margin: auto;

    justify-content: center

}



.service-area-left {

    margin: 0

}



.service-area-right {

    width: 100%;

    max-width: 606px

}



h3.country-heading {

    color: var(--3-900, #0e0e0e);

    text-align: center;

    font-family: "SF Pro Display";

    font-size: 28px;

    font-style: normal;

    font-weight: 600;

    line-height: normal;

    margin-bottom: 8px

}



p.job_step_para,

p.text-wrapper-2.service-area.service-area-title {

    margin-bottom: 48px

}



.country-title {

    align-items: center;

    flex-direction: column;

    margin-bottom: 32px;

}



.selected-county-wrapper span {

    color: var(--1-900, #012d38) !important;

    font-family: "SF Pro Display";

    font-size: 14px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    letter-spacing: -.14px

}



.pricing-card {

    display: flex;

    flex-direction: column;

    max-width: 380px;

    align-items: flex-start;

    justify-content: center;

    gap: 16px;

    padding: 20px;

    position: relative;

    background-color: #fafdea;

    border-radius: 20px;

    width: 100%;

}



.pricing-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    position: relative;

    align-self: stretch;

    width: 100%;

    flex: 0 0 auto

}



.pricing-amount,

.pricing-period {

    width: fit-content;

    font-family: "SF Pro Display";

    color: var(--x-1900);

    text-align: right;

    white-space: nowrap

}



.pricing-package,

.pricing-price {

    display: inline-flex;

    flex-direction: column;

    position: relative

}



.pricing-package {

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 16px 18px;

    flex: 0 0 auto;

    border-radius: 12px;

    border: 1px solid #063d4b

}



.pricing-package-text {

    position: relative;

    align-self: stretch;

    margin-top: -1px;

    font-family: "SF Pro Display";

    font-weight: 400;

    color: var(--x-1900);

    font-size: 14px;

    letter-spacing: -.28px;

    line-height: normal

}



.pricing-price {

    align-items: flex-end;

    justify-content: flex-end;

    gap: 2px;

    flex: 0 0 auto

}



.pricing-amount {

    position: relative;

    margin-top: -.54px;

    font-weight: 500;

    font-size: 30px;

    letter-spacing: -.6px;

    line-height: normal

}



.pricing-period {

    position: relative;

    opacity: .5;

    font-weight: 500;

    font-size: 12px;

    letter-spacing: -.24px;

    line-height: normal

}



.pricing-feature-item,

.pricing-features {

    align-self: stretch;

    width: 100%;

    position: relative

}



.pricing-feature-text,

p.thank_app_para {

    text-align: center;

    font-family: "SF Pro Display"

}



.payment_card .text,

.pricing-feature-text {

    color: var(--x-1900);

    letter-spacing: 0;

    line-height: normal

}



.pricing-features {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    flex: 0 0 auto

}



.pricing-feature-item,

.steps .component .div {

    align-items: center;

    display: flex

}



.pricing-feature-item {

    gap: 10.74px;

    flex: 0 0 auto

}



.pricing-check-icon {

    position: relative;

    width: 14.33px;

    height: 12.89px

}



.pricing-feature-text {

    position: relative;

    width: fit-content;

    margin-top: -.54px;

    font-weight: 500;

    font-size: 14px

}



.pricing-decoration {

    position: absolute;

    width: 64px;

    height: 64px;

    top: 106px;

    right: 20px;

}



.leads-plan-options {

    display: flex;

    /* flex-direction: column; */

    flex-wrap: wrap;

    gap: 1rem;

    width: 100%;

    justify-content: center;

    align-items: center;

    

}





.pricing-card.active {

    background: #d5e970

}



.building_card.active,

.job_card.active,

.payment_card.active,

.roof_card.active {

    background: var(--1-900, #012d38)

}



.pricing-card.active .pricing-package {

    background-color: #fff;

    border-color: transparent

}



.pricing-card.active svg.pricing-decoration rect {

    fill: #FFF

}



.pricing-card.active svg.pricing-decoration path {

    fill: #012D38 !important

}



.steps .component.completed .prossecc-dot {

    background-color: #12b886;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center

}



.steps .component.completed .rectangle {

    background-color: #12b886

}



.steps .component.active .prossecc-dot {

    background-color: #012d38;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center

}



.steps .component.active .rectangle {

    background-color: #012d38;

    border: 1px solid #012d38

}



.steps .component .element-wrapper {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center

}



.steps .component .element {

    color: #012d38;

    font-size: 16px;

    font-weight: 500

}



.steps .component .rectangle-2 {

    background-color: #e9ecef

}



.component.active .prossecc-dot .remix-icons-fill {

    background-color: #fff;

    border-radius: 100%;

    width: 12px;

    height: 12px

}



.field-label,

.steps .component:last-child .div .rectangle-2 {

    border: none;

    background: 0 0

}



p.thank_app_para {

    color: #000;

    font-size: 22px;

    font-style: normal;

    font-weight: 590;

    line-height: 30px;

    max-width: 27rem

}



.form-container {

    display: flex;

    flex-direction: column;

    max-width: 520px;

    align-items: flex-start;

    gap: 14px;

    position: relative;

    width: 100%;

}



.form-fields-group,

.name-fields-row {

    gap: 16px;

    display: flex;

    align-self: stretch;

    width: 100%;

    position: relative

}



.form-fields-group {

    flex-direction: column;

    flex: 0 0 auto;

    align-items: flex-start

}



.name-fields-row {

    flex: 0 0 auto;

    align-items: flex-start

}



.form-field {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    position: relative;

    flex: 1;

    flex-grow: 1;

    width: 100%

}



.field-label {

    position: relative;

    align-self: stretch;

    width: 100%;

    margin-top: -1px;

    font-family: "SF Pro Display-Medium", Helvetica;

    font-weight: 500;

    color: var(--shade-09);

    font-size: 16px;

    letter-spacing: -.16px;

    line-height: 24px;

    white-space: nowrap;

    padding: 0

}



.field-input,

.placeholder-text {

    color: var(--shade-06);

    font-size: 16px;

    letter-spacing: -.16px;

    line-height: 24px;

    margin-top: -1px;

    font-family: "SF Pro Display-Regular", Helvetica;

    font-weight: 400

}



.input-wrapper {

    align-items: center;

    justify-content: center;

    padding: 16px 12px;

    background-color: var(--primarywhite);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--input-stoke-default);

    display: flex;

    position: relative;

    align-self: stretch;

    width: 100%;

    flex: 0 0 auto

}



.input-content,

.label-container {

    display: flex;

    align-items: center

}



.input-content {

    position: relative;

    flex: 1;

    flex-grow: 1

}



.field-icon {

    position: relative;

    width: 24px;

    height: 24px

}



.form-footer,

.label-container {

    width: 100%;

    align-self: stretch

}



.field-input {

    padding: 0 8px;

    position: relative;

    flex-grow: 1;

    border: none;

    background: 0 0;

    flex: 1

}



.label-container {

    gap: 4px;

    position: relative;

    flex: 0 0 auto

}



.form-footer,

.input-placeholder,

.terms-container {

    gap: 10px;

    position: relative;

    display: flex

}



.input-placeholder {

    align-items: center;

    padding: 0 8px;

    flex: 1;

    flex-grow: 1

}



.placeholder-text {

    position: relative;

    flex: 1

}



.form-footer {

    flex: 0 0 auto;

    align-items: flex-start

}



.footer-icon {

    position: relative;

    width: 20px;

    height: 20px

}



.terms-container {

    padding: 1px 0;

    flex: 1;

    flex-grow: 1;

    align-items: flex-start

}



.terms-text {

    position: relative;

    flex: 1;

    margin-top: -1px;

    font-family: "SF Pro Display-Regular", Helvetica;

    font-weight: 400;

    color: transparent;

    font-size: 12px;

    letter-spacing: -.12px;

    line-height: 18px

}



.terms-content {

    color: #868e96;

    letter-spacing: -.01px

}



.terms-link {

    font-family: "SF Pro Display-Medium", Helvetica;

    font-weight: 500;

    color: #012d38;

    letter-spacing: -.01px;

    text-decoration: underline

}



.step-number-wrapper,

p.job_step_para {

    text-align: center;

    font-family: "SF Pro Display";

    font-style: normal

}



input.field-input:focus-visible {

    border: none;

    outline: 0

}



.form-fields-group .radius-selector,

.search-sec-left {

    width: 100%

}



.nested-steps {

    margin-bottom: 24px

}



.nested-step-timeline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 600px;

    margin: 0 auto;

}



.step-item {

    display: flex;

    align-items: center;

    position: relative

}



.step-number-wrapper {

    width: 32px;

    height: 32px;

    background: #fff;

    border-radius: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1;

    background: var(--Shade-100, #f4f8f9);

    display: flex;

    padding: 6px;

    color: var(--Shade-900, #2e3233);

    font-size: 16px;

    font-weight: 500;

    line-height: 20px;

    letter-spacing: -.32px

}



.step-line {

    flex: 1;

    height: 1px;

    border: 1px dashed #adb5bd

}



.step-component.active .step-number-wrapper {

    background: #06f;

    border-color: #06f

}



.building_card.active p.text,

.job_card.active p.text,

.payment_card.active .text,

.roof_card.active p.text,

.step-component.active .step-number,

.step-component.complete .step-number,

header.home-header a.navbar-link.active {

    color: #fff

}



.step-component.complete .step-number-wrapper {

    background: #a1e81e;

    border-color: #a1e81e

}



.step-component.complete .step-line {

    background: #a1e81e

}



.payment_card {

    position: relative;

    /* max-width: 180px; */

    /* max-height: 180px; */

    cursor: pointer;

    transition: .3s;

    border-radius: .75rem;

    background: #fff;

    /* padding: 1rem; */

    overflow: hidden;

    border: 1px solid;

    border-color: var(--gray-1);

    display: flex;

    align-items: flex-end;

    width: 180px;

    height: 180px;

}



.payment_card.active {

    box-shadow: 0 4px 8px rgba(0, 0, 0, .1)

}



.payment_card:hover {

    transform: translateY(-1px);

    box-shadow: 0 2px 4px rgba(0, 0, 0, .05)

}



.payment_card .text {

    position: absolute;

    top: 24px;

    left: 22px;

    font-family: "SF Pro Display-Bold", Helvetica;

    font-weight: 700;

    font-size: 18px

}



.payment_card .SOLAR-PANEL {

    /* position: absolute; */

    top: 62px;

    left: 6px;

    object-fit: contain;

    margin-left: auto;

}



p.job_step_para {

    color: #000;

    font-size: 22px;

    font-weight: 510;

    line-height: normal;

    letter-spacing: -.44px

}



.building_card p.text,

.job_card p.text,

.roof_card_checkbox p.text,

button.schedule_button {

    color: var(--1-900, #012d38);

    font-feature-settings: 'liga' off, 'clig' off

}



.building_card p.text,

.job_card p.text,

.roof_card_checkbox p.text,

button.schedule_button,

a.sign-in-btn {

    font-weight: 700;

    font-size: 18px;

    font-style: normal;

    line-height: normal;

    font-family: "SF Pro Display"

}



.payment_div {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}



.nested-steps .step-component:last-child .step-line {

    border: none;

    display: none;

    flex: 0

}



.building_card,

.roof_card {

    border-radius: 20px;

    background: #fff;

    overflow: hidden;

    display: flex;

    position: relative

}



.nested-step-timeline .step-component:last-child {

    width: auto

}



.roof_div {

    display: flex;

    align-items: flex-end;

    flex: 1 0 0;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}



.roof_card {

    border: 1px solid var(--Gray-1, #f1f3f5);

    height: 200px;

    flex-direction: column;

    justify-content: space-between

}



.roof_card_checkbox p.text {

    padding-left: 20px;

    padding-top: 20px

}



.building_div {

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 24px;

    flex-wrap: wrap;

}



.building_card {

    max-width: 290px;

    height: 120px;

    border: 1px solid var(--Gray-1, #f1f3f5);

    align-items: center;

    width: 100%;

}



.building_card p.text {

    display: flex;

    align-items: center;

    padding-left: 29px

}



img.building_image {

    position: absolute;

    right: 0;

    bottom: 0

}



.job_div {

    display: flex;

    align-items: flex-end;

    gap: 24px;

    flex-wrap: wrap;

    justify-content: center;

}



.job_card {

    border-radius: 20px;

    border: 1px solid var(--Gray-1, #f1f3f5);

    background: #fff;

    max-width: 207.5px;

    align-self: stretch;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    width: 100%;

}



.job_card p.text {

    padding-top: 41px;

    padding-left: 30px

}



button.schedule_button {

    border-radius: 16px;

    border: 1px solid #e9ecef;

    width: 100%;

    max-width: 155px;

    height: 53px;

    min-width: 155px

}



.schedule_div {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    justify-content: center;

}



button.schedule_button.active {

    border-color: #012d38

}



.lead-sec {

    background: url(../image/hero_bg.png) center center/cover no-repeat;

    /* padding: 210px 0; */

    display: flex;

    align-items: center;

    justify-content: center;

    height: calc(100vh - 10vh);

}



.lead-sec-content {

    height: 100%;

    gap: 2rem;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    place-items: center

}



header.home-header {

    position: absolute;

    width: 100%;

    background: 0 0

}



header.home-header a.navbar-link.active::after {

    background: #fff;

    margin-left: -15px !important;

}



a.sign-in-btn {

    border-radius: 10px;

    background: var(--White, #fff);

    display: flex;

    padding: 17px 46px;

    justify-content: center;

    align-items: center;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--Primary-900, #012d38);

    text-transform: uppercase

}



h5.lead-sec-head {

    color: var(--Primary-100, #b8d9e2);

    font-family: "SF Pro Display";

    font-size: 18px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    letter-spacing: .9px;

    margin-bottom: 20px

}



button.search-sec-btn,

input.search-sec-input,

select.search-sec-input {

    height: 54px;

    gap: 10px;

    letter-spacing: -.32px;

    display: flex

}



h3.lead-sec-subhead {

    color: #fff;

    font-family: "SF Pro Display";

    font-size: 64px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    margin-bottom: 18px

}



p.lead-sec-desc {

    color: #81838c;

    font-family: "SF Pro Display";

    font-size: 20px;

    font-style: normal;

    font-weight: 500;

    line-height: 28px

}



button.search-sec-btn,

input.search-sec-input,

select.search-sec-input,

p.search-sec-left-p {

    font-family: "SF Pro Display";

    font-size: 16px;

    font-style: normal

}



.lead-sec-btns {

    margin-top: 46px;

    display: flex;

    align-items: center;

    gap: 12px

}



.lead-sec-left {

    max-width: 569px;

    margin-right: auto;

}



.lead-sec-right {

    position: relative;

    width: 100%;

    align-items: center;

    justify-content: center;

    max-width: 546px;

    margin-left: auto;

}



.lead-sec-right-img2 {

    position: absolute;

    top: 192px;

    left: 47px;

    z-index: 2

}



.lead-sec-right-img3 {

    position: absolute;

    bottom: -3.6rem;

    right: 0;

    z-index: 2

}



section.lead-sec .container {

    /* margin: 0; */

    height: 100%

}



.lead-sec-right-img1 {

    margin: auto;

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 1

}



.lead-sec-right-img3::after {

    position: absolute;

    content: "";

    background: var(--Primary-600, #306979);

    width: 35.977px;

    height: 35.977px;

    flex-shrink: 0;

    bottom: -2rem;

    right: -2.3rem

}



.lead-sec-right::after {

    position: absolute;

    content: "";

    border: 4.497px solid var(--Primary-600, #306979);

    width: 198.775px;

    height: 189.781px;

    flex-shrink: 0;

    top: -2.7rem;

    left: 1.6rem

}



.lead-sec-right::before {

    position: absolute;

    content: "";

    background: var(--Primary-600, #306979);

    width: 69.257px;

    height: 69.257px;

    flex-shrink: 0;

    top: -2.7rem;

    left: 1.6rem

}



.linked-path-group {

    position: absolute;

    width: 190px;

    height: 285px;

    top: -2.3rem;

    right: 2rem;

    opacity: .76

}



.overlap-group {

    position: relative;

    width: 148px;

    height: 285px

}



.copy-we-create,

.copy-we-create-2,

.copy-we-create-3,

.copy-we-create-4,

.copy-we-create-5,

.copy-we-create-6,

.copy-we-create-7,

.rectangle-text,

.rectangle-text-wrapper {

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create {

    top: 6px;

    left: 10px;

    transform: rotate(21.79deg)

}



.rectangle-text-wrapper {

    width: 17px;

    top: 14px;

    left: 32px;

    transform: rotate(28.72deg)

}



.rectangle-text {

    width: 8px;

    top: 20px;

    left: 48px;

    transform: rotate(32.17deg)

}



.copy-we-create-2 {

    width: 19px;

    top: 28px;

    left: 53px;

    transform: rotate(35.97deg)

}



.copy-we-create-3 {

    width: 11px;

    top: 37px;

    left: 69px;

    transform: rotate(40.38deg)

}



.copy-we-create-4 {

    width: 17px;

    top: 46px;

    left: 76px;

    transform: rotate(44.67deg)

}



.copy-we-create-5 {

    width: 16px;

    top: 58px;

    left: 88px;

    transform: rotate(50.09deg)

}



.copy-we-create-6 {

    width: 11px;

    top: 69px;

    left: 98px;

    transform: rotate(54.77deg)

}



.copy-we-create-7 {

    width: 17px;

    top: 81px;

    left: 103px;

    transform: rotate(59.99deg)

}



.copy-we-create-8 {

    width: 8px;

    top: 92px;

    left: 113px;

    transform: rotate(64.61deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-10,

.copy-we-create-9 {

    width: 17px;

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-9 {

    top: 103px;

    left: 114px;

    transform: rotate(69.42deg)

}



.copy-we-create-10 {

    top: 119px;

    left: 118px;

    transform: rotate(75.88deg)

}



.copy-we-create-11 {

    width: 16px;

    top: 136px;

    left: 122px;

    transform: rotate(81.96deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-12 {

    width: 8px;

    top: 146px;

    left: 128px;

    transform: rotate(86.01deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-13 {

    width: 11px;

    top: 156px;

    left: 126px;

    transform: rotate(89.27deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-14,

.copy-we-create-15 {

    width: 17px;

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-14 {

    top: 169px;

    left: 123px;

    transform: rotate(93.7deg)

}



.copy-we-create-15 {

    top: 188px;

    left: 122px;

    transform: rotate(90deg)

}



.copy-we-create-16 {

    width: 27px;

    top: 210px;

    left: 117px;

    transform: rotate(90deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-17,

.copy-we-create-18 {

    width: 17px;

    left: 122px;

    transform: rotate(90deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.copy-we-create-17 {

    top: 231px

}



.copy-we-create-18 {

    top: 249px

}



.copy-we-create-19 {

    width: 11px;

    top: 263px;

    left: 125px;

    transform: rotate(90deg);

    position: absolute;

    height: 33px;

    font-family: Raleway, Helvetica;

    font-weight: 600;

    color: #fff;

    font-size: 23.4px;

    letter-spacing: 0;

    line-height: normal

}



.search-sec-content {

    border-radius: 20px;

    background: #fff;

    box-shadow: 0 7.33px 77.487px 0 rgba(47, 121, 157, .1);

    display: flex;

    padding: 30px;

    /* height: 141px; */

    margin-top: -70px;

    flex-direction: column

}



p.search-sec-left-p {

    color: var(--Gray-9, #212529);

    font-weight: 500;

    line-height: normal;

    margin-bottom: 8px

}



input.search-sec-input,

select.search-sec-input {

    border-radius: 8px;

    border: 1px solid var(--Gray-3, #dee2e6);

    padding: 15px 18px;

    align-items: center;

    align-self: stretch;

    color: #000;

    font-weight: 500;

    line-height: normal;

    width: 100%

}



input.search-sec-input::placeholder,

select.search-sec-input::placeholder {

    color: var(--Gray-6, #868e96)

}



button.search-sec-btn {

    border-radius: 10px;

    background: linear-gradient(128deg, #0c5162 17.73%, #012d38 77.16%);

    padding: 16px 50px;

    justify-content: center;

    align-items: center;

    flex: 1 0 0;

    color: #fff;

    font-weight: 700;

    line-height: normal;

    text-transform: uppercase;

    max-width: 246px;

    width: 100%;

    min-width: 246px

}



.search-sec-inputs {

    display: flex;

    align-items: center;

    width: 100%;

    gap: 20px

}



section.search-sec {

    height: 20rem;

}



.component-7.next-button:hover {

    background-color: rgb(1 45 56 / 90%);

}



.payment_card_checkbox .remix-icons-fill-wrapper {

    display: none;

}



.roof_card_checkbox .remix-icons-fill-wrapper {

    display: none;

}



/* Sticky header */

/* HEADER STYLES */

.page-header {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1;

    background-color: rgba(255, 255, 255, 0.15);

}



.page-header.is-sticky {

    position: fixed;

    animation: slideDown 0.35s ease-out;

    background-color: #FFF;

    z-index: 999;

}



@keyframes slideDown {

    from {

        transform: translateY(-100%);

    }



    to {

        transform: translateY(0);

    }

}



img.dark-logo {

    display: none;

}



.page-header.is-sticky img.dark-logo {

    display: block;

}



.page-header.is-sticky img.light-logo {

    display: none;

}



.page-header.is-sticky a.navbar-link.active {

    color: var(--1-900, #012d38);

}



.page-header.is-sticky a.navbar-link.active::after {

    background: var(--1-900, #012d38);

}



.payment_card_checkbox {

    padding: 1rem;

}



a.sign-in-btn {

    padding: 0.9rem 1.5rem;

    font-size: 15px;

}



a.become-btn {

    padding: 0.9rem 1.5rem;

}



.lead-sec-right-img1 img {

    height: 500px;

}



.lead-sec-right-img2 img {

    height: 366px;

}



.hamburger-menu {

    display: none;

    background: none;

    border: none;

    padding: 0;

    cursor: pointer;

}



.hamburger-menu span {

    display: block;

    width: 25px;

    height: 2px;

    background-color: #FFF;

    margin: 5px 0;

    transition: 0.3s;

}



.mobile-sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

    visibility: hidden;

    pointer-events: none;

}



.mobile-sidebar.active {

    visibility: visible;

    pointer-events: auto;

}



.sidebar-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.mobile-sidebar.active .sidebar-overlay {

    opacity: 1;

}



.sidebar-content {

    position: absolute;

    top: 0;

    left: 0;

    width: 300px;

    height: 100%;

    background: #fff;

    padding: 20px;

    transform: translateX(-100%);

    transition: transform 0.3s ease;

    will-change: transform;

}



.mobile-sidebar.active .sidebar-content {

    transform: translateX(0);

}



.sidebar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}



.close-sidebar {

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

}



.sidebar-nav {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.sidebar-nav .nav {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.sidebar-nav .home-navbar-btns {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



header.home-header.page-header.is-sticky button.hamburger-menu span {

    background: #012d38;

}



header.survey-header button.hamburger-menu span {

    background-color: #012d38;

}



p.text-wrapper-2 {

    margin-top: 1rem;

}



button.close-toggle-steps {

    position: absolute;

    right: 0;

    top: 3px;

    background: #fff;

    border: none;

    padding: 8px;

    cursor: pointer;

    border-radius: 0 4px 4px 0;

    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

    z-index: 9;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

}



button.toggle-steps {

    display: none;

}



button.close-toggle-steps {

    display: none;

}



.frame .text {

    word-wrap: break-word;

}



h3.country-heading {

    margin-top: 20px;

}



.payment_card.selected .remix-icons-fill-wrapper {

    display: block;

}



.roof_card.selected .remix-icons-fill-wrapper {

    display: block;

}



.payment_card.selected {

    background-color: #012d38;

}

.payment_card.selected p.text {

    color: #FFF;

}

.roof_card.selected {

    background-color: #012d38;

}

.roof_card.selected p.text {

    color: #FFF;

}

.building_card.selected {

    background-color: #012d38;

}



.building_card.selected p.text {

    color: #FFF;

}



.job_card.selected {

    background-color: #012d38;

}



.job_card.selected p.text {

    color: #FFF;

}



button.schedule_button.selected {

    border-color: #012d38;

}



img.thanks_app {

    margin: auto;

    display: flex;

    margin-bottom: 12px;

}

a.logo img{

    height: 22px;

}



div#step-content-container {

    width: 100%;

    /* margin: auto; */

    /* display: flex; */

    /* justify-content: center; */

}

.leads-plan-options {

    flex-wrap: wrap;

}

.form-container {

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: auto;

}

p.thank_app_para {

    /* text-align: center; */

    margin: auto;

}

body.home-body {}