/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

body {
    line-height: 1.6;
    color: #333;
    background: #fff;
    font-family: in;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Bricolage Grotesque", sans-serif;
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px 40px;
    background-image: url("../images/renewableEnergyHousing/banner_bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    margin: 0 auto;
    gap: 40px;
    position: relative;
}

    .hero:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.67);
        z-index: 1;
    }

.hero_container {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

    .hero_header img {
        max-width: 250px;
    }

.hero_contact a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
}

.hero_content {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
}

    .hero_content h1 {
        font-size: 48px;
        line-height: 1.2;
        font-weight: 400;
        margin-bottom: 30px;
    }

        .hero_content h1 span {
            color: #14B8A6;
            font-weight: 600;
            font-family: "Bricolage Grotesque", sans-serif;
        }

    .hero_content p {
        font-size: 16px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 400;
        margin-bottom: 30px;
        max-width: 600px;
    }

.hero_content_right img {
    max-width: 400px;
}

.hero_benefits_list {
    display: flex;
    gap: 30px;
    margin-top: 60px;
}

.hero_benefits_item {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 144, 146, 0.26);
    border-radius: 8px;
    font-size: 14px;
    color: #fff;
    padding: 30px 15px 15px;
    position: relative;
    text-align: center;
    min-width: 150px;
    line-height: 1.4;
}

    .hero_benefits_item .hero_benefits_icon {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 40px;
    }

        .hero_benefits_item .hero_benefits_icon img {
            max-width: 100%;
        }
/* Welcome section */
.welcome_sec {
    padding: 60px 20px 50px;
    background: #fff;
}

    .welcome_sec .welcome_container {
        max-width: 1100px;
        margin: 0 auto;
    }

    .welcome_sec h2 {
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 40px;
        line-height: 1.4;
        color: #000;
    }

.project_progress_steps {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

.progress_step_item {
    border: 1px solid rgba(0, 144, 146, 0.26);
    border-radius: 8px;
    padding: 30px 40px 40px;
    position: relative;
    margin-bottom: 30px;
}

    .progress_step_item span.step_number {
        position: absolute;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #14B8A6;
        color: #fff;
        font-weight: 600;
        font-size: 20px;
        left: -25px;
        top: 23px
    }

    .progress_step_item h3 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #000;
    }

    .progress_step_item p {
        font-size: 14px;
        line-height: 1.5;
        color: #45556C;
    }

.welcome_banners {
    display: flex;
    gap: 10px;
}

    .welcome_banners img {
        max-width: 100%;
    }
/* Schedule a call sec */
.schedule_call_sec {
    padding: 50px 20px;
    background: linear-gradient(to right, #F3F3F3 0%, #fff 100%);
    position: relative;
}

    .schedule_call_sec::after, .schedule_call_sec::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, #cecece 0%, #F3F3F3 100%);
        z-index: 1;
        opacity: 0.7;
    }

    .schedule_call_sec::before {
        top: auto;
        bottom: 0;
    }

.schedule_call_container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.schedule_call_left, .schedule_call_right {
    width: 50%;
}

.schedule_call_left {
    padding-right: 15px;
}

.schedule_call_right {
    padding-left: 15px;
}

.schedule_call_left h2 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #000;
    line-height: 1.4;
}

.schedule_call_form .form_input_row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.schedule_call_form {
    max-width: 480px;
}

    .schedule_call_form .form_input_row .form_input_left {
        width: 50%;
    }

    .schedule_call_form .form_input_row .form_input_right {
        width: 50%;
    }

    .schedule_call_form .form_input_row input {
        background: #fff;
        font-size: 14px;
        color: #45556C;
        height: 42px;
        border-radius: 8px;
        border: 0px;
        padding: 5px 15px;
        max-width: 100%;
        margin-bottom: 0px;
    }

    .schedule_call_form button {
        background: rgba(2, 116, 123, 0.8);
        border-radius: 8px 8px 0 8px;
        text-align: center;
        display: flex;
        align-items: center;
        min-width: 230px;
        font-size: 14px;
        color: #fff;
        justify-content: center;
        height: 42px;
        border: 0px;
    }

.experts_list {
    display: flex;
    gap: 30px;
}

.expert_img {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
}

    .expert_img img {
        max-width: 100%;
    }

.expert_item h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #0F172B;
}

.expert_item h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #009689;
}

.expert_item p {
    font-size: 14px;
    color: #45556C;
}

.email-link {
    color: blue !important;
    text-decoration: underline;
    cursor: pointer;
}

    .email-link:hover {
        color: darkblue !important;
        text-decoration: none;
    }

/* Comfort of home sec */
.comfort_home_sec {
    padding: 60px 20px 50px;
    background: #fff;
}

    .comfort_home_sec .comfort_home_container {
        max-width: 1100px;
        margin: 0 auto;
    }

    .comfort_home_sec h2 {
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 20px;
        line-height: 1.4;
        color: #000;
    }

        .comfort_home_sec h2 span {
            color: #14B8A6;
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
        }

    .comfort_home_sec p {
        color: #45556C;
        font-size: 14px;
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

.comfort_home_feat_list {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.comfort_home_feat_item span.feat_icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

.comfort_home_feat_item span img {
    max-width: 100%;
}

.comfort_home_feat_item h3 {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #314158;
}

.comfort_home_feat_item {
    text-align: center;
    max-width: 180px;
}

.comfort_home_slider {
    max-width: 90%;
    margin: 0 auto;
}

#comfort_home_slider {
    box-shadow: 0px 25px 20px -19px rgba(0, 0, 0, 0.28);
    position: relative;
    margin-bottom: 60px;
    z-index: 1;
    height: 736px;
}

    #comfort_home_slider img {
        width: 100%;
        height: 736px;
        object-fit: cover;
        display: block;
    }

    #comfort_home_slider .owl-dots {
        text-align: center;
        margin-top: 15px;
        display: none;
        position: absolute;
    }

    #comfort_home_slider .owl-nav button.owl-prev {
        position: absolute;
        top: 50%;
        width: 40px;
        left: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        color: #027482;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #comfort_home_slider .owl-nav button.owl-next {
        position: absolute;
        top: 50%;
        width: 40px;
        right: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        color: #027482;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
/* Bottom Slider */
#bottom_home_slider {
    position: relative;
}

    #bottom_home_slider .owl-dots {
        position: absolute;
        top: 50px;
        right: 100px;
    }

        #bottom_home_slider .owl-dots button {
            width: 30px;
            height: 2px;
            border-radius: 5px;
            background: #ccc;
            margin: 5px;
        }

            #bottom_home_slider .owl-dots button.active {
                background: #20E7D1;
            }

    #bottom_home_slider .owl-nav button.owl-prev {
        position: absolute;
        top: 50%;
        width: 40px;
        left: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        color: #027482;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #bottom_home_slider .owl-nav button.owl-next {
        position: absolute;
        top: 50%;
        width: 40px;
        right: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        color: #027482;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
.bottom_home_slider_item {
    position: relative;
}

.bottom_home_slider_item_content {
    position: absolute;
    z-index: 1;
    bottom: 60px;
    left: 100px;
    color: #fff;
}

    .bottom_home_slider_item_content h3 {
        font-size: 24px;
        max-width: 400px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .bottom_home_slider_item_content p {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 0.5px;
        max-width: 400px;
        line-height: 1.5;
    }
/* Our Expertise sec */
.our_experties_sec {
    padding: 60px 0;
}

.our_experties_container {
    display: flex;
    gap: 20px;
}

.our_experties_left, .our_experties_right {
    width: 50%;
}

.our_experties_left {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

    .our_experties_left h2 {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 30px;
        line-height: 1.4;
        color: #434143;
        max-width: 450px;
    }

        .our_experties_left h2 span {
            color: #14B8A6;
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
        }

    .our_experties_left p {
        color: #434143;
        font-size: 14px;
        max-width: 400px;
        margin-bottom: 30px;
    }

.our_experties_slider_item {
    padding: 30px;
    border: 1px solid rgba(0, 144, 146, 0.16);
    border-radius: 8px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 44%, #ffffff 100%);
}

    .our_experties_slider_item p span {
        font-weight: 700;
    }

    .our_experties_slider_item h3 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 25px;
        color: #000;
        text-align: left;
        max-width: 300px;
    }

    .our_experties_slider_item p {
        color: #45556C;
        font-size: 14px;
        max-width: 400px;
        margin-bottom: 30px;
        text-align: left;
    }

#our_experties_slider {
    position: relative;
}

    #our_experties_slider .owl-nav {
        position: absolute;
        bottom: 0;
        left: -150px;
        display: flex;
        gap: 20px;
    }

        #our_experties_slider .owl-nav button.owl-prev,
        #our_experties_slider .owl-nav button.owl-next {
            width: 40px;
            height: 40px;
            background-color: #14B8A6;
            border-radius: 50%;
            color: #fff;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
/* Footer Schedule call sec */
.footer_schedule_call_sec {
    padding: 50px 20px;
    background: #027583;
    position: relative;
}

.footer_schedule_call_container {
    max-width: 900px;
    margin: 0 auto;
}

.footer_schedule_call_sec h2 {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}

.footer_schedule_call_sec p {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}

.footer_schedule_call_form {
    margin-top: 40px;
    margin-bottom: 20px;
}

    .footer_schedule_call_form .form_input_row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

.footer_schedule_call_sec .form_input input {
    background: #fff;
    font-size: 14px;
    color: #45556C;
    height: 42px;
    border-radius: 8px;
    border: 0px;
    padding: 5px 15px;
    max-width: 100%;
    margin-bottom: 0px;
}

.footer_schedule_call_sec button {
    background: #14B8A6;
    border-radius: 8px 8px 0 8px;
    text-align: center;
    display: flex;
    align-items: center;
    min-width: 230px;
    font-size: 14px;
    color: #fff;
    justify-content: center;
    height: 42px;
    border: 0px;
    margin: 0 auto;
    width: 230px;
}


/* Thumbnail Slider Styles */
#comfort_home_thumbnails {
    margin-top: 20px;
    padding: 0 50px;
}

    #comfort_home_thumbnails .owl-item {
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.3s ease;
    }

        #comfort_home_thumbnails .owl-item:hover {
            opacity: 1;
        }

        #comfort_home_thumbnails .owl-item.active-thumbnail {
            opacity: 1;
        }

            #comfort_home_thumbnails .owl-item.active-thumbnail img {
                border: 3px solid #14B8A6;
                border-radius: 8px;
            }

    #comfort_home_thumbnails img {
        border: 3px solid transparent;
        border-radius: 8px;
        transition: all 0.3s ease;
        width: 100%;
        display: block;
        height: 83.25px;
        object-fit: cover;
    }

.schedule_call_form .form_input_row .form_input_full {
    width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center;
    display: block;
}

.schedule_call_form .form_input_full .g-recaptcha {
    display: inline-block;
    margin-bottom: 15px;
}

.schedule_call_form .form_input_full button {
    background: rgba(2, 116, 123, 0.8);
    border-radius: 8px 8px 0 8px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    min-width: 230px;
    font-size: 14px;
    color: #fff;
    justify-content: center;
    height: 42px;
    border: 0px;
    cursor: pointer;
    margin: 0;
}

    .schedule_call_form .form_input_full button:hover {
        background: rgba(2, 116, 123, 1);
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.d-none {
    display: none !important;
}

/* Footer form styles */
.footer_schedule_call_sec .form_input {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 180px;
    max-width: calc(33.333% - 10px);
    /*position: relative;*/ /* Add this */
    /*margin-bottom: 15px;*/ /* Add spacing for error messages */
}

    .footer_schedule_call_sec .form_input input {
        width: 100%;
        margin-bottom: 0;
    }

.footer_schedule_call_sec .form_input_full {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: 0px;
    display: block;
}

    .footer_schedule_call_sec .form_input_full .g-recaptcha {
        display: inline-block;
        margin-bottom: 0px;
        transform: scale(1);
        transform-origin: center;
    }

    .footer_schedule_call_sec .form_input_full button {
        margin: 0 auto;
        cursor: pointer;
    }

.footer_schedule_call_sec button:hover {
    background: #12a594;
}

.footer_schedule_call_form .form_input_row {
    margin-bottom: 20px !important;
    gap: 10px;
}

/* Validation styles */
.field-validation-error {
    color: #dc3545;
    font-size: 11px;
    font-weight: 400;
    display: block;
    margin-top: 2px;
    margin-bottom: 0;
    line-height: 1.2;
}

.input-validation-error {
    border: 1px solid #dc3545 !important;
}

input.input-validation-error::placeholder {
    color: #dc3545;
    opacity: 0.6;
}

/* Responsivness */
@media (max-width: 991px) {
    .hero_content, .schedule_call_container {
        flex-wrap: wrap;
    }

    .progress_step_item {
        padding: 40px 20px 30px;
    }

        .progress_step_item span.step_number {
            left: 25px;
            top: -25px;
        }

    .schedule_call_left, .schedule_call_right, .hero_content_right {
        width: 100%;
    }

    .hero_content_right {
        text-align: center;
    }

    .schedule_call_left {
        padding-right: 0px;
    }

    .schedule_call_right {
        padding-left: 0px;
    }

    .schedule_call_container {
        gap: 20px;
    }
}

@media (max-width: 756px) {
    .our_experties_container {
        flex-wrap: wrap;
        gap: 20px;
    }

    .our_experties_left, .our_experties_right {
        width: 100%;
        padding: 0px 20px;
    }

    .our_experties_left {
        justify-content: flex-start;
    }

    #our_experties_slider .owl-nav {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        justify-content: center;
        position: relative;
        left: 0;
    }
}

@media (max-width: 576px) {
    .hero_header img {
        max-width: 150px;
    }

    .hero_content_right img {
        max-width: 100%;
    }

    .hero_contact a {
        font-size: 14px;
    }

    .hero_content h1 {
        font-size: 30px;
    }

    .hero_benefits_list {
        gap: 10px;
    }

    .hero_benefits_list {
        gap: 30px;
        margin-top: 50px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .welcome_sec {
        padding: 40px 20px;
    }

        .welcome_sec h2, .schedule_call_left h2,
        .comfort_home_sec h2,
        .footer_schedule_call_sec h2 {
            font-size: 22px;
        }

    .project_progress_steps, .welcome_banners, .experts_list {
        flex-wrap: wrap;
    }

    .schedule_call_form .form_input_row {
        flex-wrap: wrap;
        gap: 0px;
    }

        .schedule_call_form .form_input_row .form_input_left,
        .schedule_call_form .form_input_row .form_input_right {
            width: 100%;
        }

    .comfort_home_feat_list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .comfort_home_feat_item {
        max-width: 160px;
    }

    #comfort_home_slider .owl-nav button.owl-next {
        width: 20px;
        right: 20px;
        height: 20px;
        font-size: 16px;
    }

    #comfort_home_slider .owl-nav button.owl-prev {
        width: 20px;
        left: 20px;
        height: 20px;
        font-size: 16px;
    }

    #comfort_home_slider {
        margin-bottom: 30px;
    }

    .comfort_home_slider {
        max-width: 100%;
    }

    .our_experties_left h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .our_experties_left p {
        margin-bottom: 20px;
    }

    .copyright_sec {
        text-align: center;
        padding: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .copyright_logo img {
        max-width: 200px;
    }

    .schedule_call_left {
        text-align: center;
    }

    .schedule_call_form button {
        margin: 0 auto;
    }

    .experts_list {
        text-align: center;
        justify-content: center;
    }

    .expert_img {
        margin: 0 auto 20px;
    }

    .bottom_home_slider_item .bottom_home_slider_item_content {
        bottom: 20px;
        left: 20px;
    }

    .bottom_home_slider_item_content p {
        font-size: 9px;
    }

    .bottom_home_slider_item_content h3 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    #bottom_home_slider .owl-dots {
        position: relative;
        top: 0;
        right: 0;
        text-align: center;
    }    
}