@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:wght@100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Mulish", sans-serif;
    background: #FFFFFF;
}

:root {
    --borderEF: 1px solid #EFEFEF;
    --bor10: 10px;
    --bor12: 12px;
    --bor16: 16px;
    --bs-breadcrumb-my-divider: url("../images/icons/rightDotImg.svg");
}

@font-face {
    font-family: 'Helvetica';
    src: url('fonts/Helvetica.woff2') format('woff2'),
        url('fonts/Helvetica.woff') format('woff'),
        url('fonts/Helvetica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

ul,ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: "Mulish", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 48px;
}

h2 {
    font-family: "Mulish", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 33.89px;
}

h3 {
    font-family: "Mulish", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
}

h4 {
    font-family: "Mulish", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
}

h5 {
    font-family: "Mulish", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

h6 {
    font-family: "Mulish", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

p {
    font-family: "Mulish", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

a,
button {
    text-decoration: none;
    outline: none;
    color: #000;
    background: transparent;
}

button {
    border: 0;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section {
    padding: 50px 0;
}

/* header Start  */

.navbar-brand {
    width: 35px;
    height: 50px;
    margin: 0;
    padding: 0;
}

.header {
    height: 70px;
    position: relative;
    z-index: 10;
    background-color: #40C4FF;
    display: flex;
    align-items: center;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.my-header {
    background-color: #fff;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.header-fixed {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    animation: slideDown 0.35s ease-out;
    -webkit-animation: slideDown 0.35s ease-out;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
    }

    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
    }
}




.headerToggleBtn {
    width: 30px;
    height: 30px;
    display: none;
}

.navbar {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;padding: 0;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.navbar-nav-wl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.registerBtn {
    background-color: #fff;
    color: #000;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    text-align: center;
    padding: 10px 25px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.registerBtn:hover {
    background-color: #fff;
    color: #40C4FF;
}

.LoginBtn {
    background-color: #fff;
    color: #40C4FF;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    text-align: center;
    padding: 10px 25px;
    border-radius: 30px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.LoginBtn:hover {
    background-color: #fff;
    color: #000;
}

.navbar-nav .nav-item {
    width: fit-content;
    height: 100%;
    display: inline-block;
}

.navbar-nav .nav-item .nav-link,
.navbar-nav-wl .nav-item .nav-link {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
}

.web-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.profile-img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.avatarDropdown {
    width: 100%;
    height: 100%;
    display: flex;
}

.headerWithOutLoginOffcanvas .offcanvas-header {
    background-color: #40C4FF;
}

 .headerWithOutLoginOffcanvas .offcanvas-body {
    background-color: #fff;
}
 
.headerWithOutLoginOffcanvas .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.headerWithOutLoginOffcanvas .navbar-nav .nav-item {
    display: block;
    width: 100%;
    height: 100%;
}

.headerWithOutLoginOffcanvas .navbar-nav .nav-item .nav-link {
    color: #000;
}


.AvatarDropdown .dropdown .dropdown-menu {
    position: absolute !important;
    top: 130% !important;
    left: -130px !important;
}

.AvatarDropdown .dropdown .dropdown-menu .dropdown-item {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.AvatarDropdown .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #40C4FF;
    color: #fff;
}

.AvatarDropdown .dropdown .dropdown-menu .dropdown-item:hover img {
    filter: invert(40%) brightness(1000%);
    -webkit-filter: invert(40%) brightness(1000%);
}

.AvatarDropIcon {
    width: 20px;
    height: 20px;
}


.UserWlUl {
    display: none;
}

/* header End  */


/* header End  */



/* profile-section Start  */
.profileImgBox {
    width: 75px;
    height: 75px;
    margin: 30px auto 30px;
    position: relative;
}

.editIMgBox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.inputImgFile {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}

.web-heading {
    font-size: 40px;
    line-height: 40px;
    font-weight: 800;
    color: #000;
    text-align: center;
}

.WebInputBox .input-group-text {
    border: 0;
    background-color: #F2F7FD;
    padding: 15px;
    border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    -ms-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
}

.WebInputBox .input-group {
    display: flex;
    flex-wrap: nowrap;
}

.WebInput {
    width: 100%;
    border: 0;
    background-color: #F2F7FD;
    padding: 15px 15px 15px 0px;
    border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    -ms-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
    color: #030907;
    font-size: 16px;
    font-weight: 500;
    line-height: 17.57px;
}

::placeholder {
    color: #030907;
    font-size: 16px;
    font-weight: 500;
    line-height: 17.57px;
}

.ProfileGrid {
    margin: 20px 0 0 0;
}

.SignOutLink {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 17.57px;
    color: #FF0505;
}

.WebInputLeftIcon {
    width: 24px;
    height: 24px;
}


/* profile-section End */









/* edit-profile-section Start  */
.EditProfileBox {
    margin: 30px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.profileName {
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: #030907;
    text-align: center;
    white-space: nowrap;
}

.SubmitBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.SubmitBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 50px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-color: #40C4FF;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
}

.webLabel {
    color: #71859E;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    margin: 0 0 10px 0;

}

.editWebInput {
    width: 100%;
    border: 0;
    background-color: #F2F7FD;
    padding: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    color: #030907;
    font-size: 16px;
    font-weight: 500;
    line-height: 17.57px;
}

/* edit-profile-section End */

/* change-password-section Start  */
section.change-password-section {
    padding: 93px 0;
}

.eyeIcon {
    width: 20px;
    height: 20px;
}

.editWebInputBox .input-group-text {
    background-color: #F2F7FD;
    padding: 15px;
    border: 0;
    cursor: pointer;
}

.editWebInputBox .input-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* change-password-section End  */


/* Faq-section Start  */

.faq-accordian-box {
    margin: 50px 0 0;
}

.faq-accordian-box .accordion-button::after {
    flex-shrink: 0;
    margin-left: auto;
    content: "";
    background-image: url("../images/icons/bottom-accordion.svg");
    /* background-repeat: no-repeat; */
    /* background-size: auto; */
    /* transition: var(--bs-accordion-btn-icon-transition); */
}

.faq-accordian-box .accordion-button:not(.collapsed)::after {
    background-image: url("../images/icons/top-accordion.svg");
    transform: var(--bs-accordion-btn-icon-transform);
}

.faq-accordian-box .accordion-header button {
    color: #030907;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 0;
}

.faq-accordian-box .accordion-body {
    padding: 10px 100px 0 0;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px;
    -webkit-border-radius: 0 0 16px 16px;
    -moz-border-radius: 0 0 16px 16px;
    -ms-border-radius: 0 0 16px 16px;
    -o-border-radius: 0 0 16px 16px;
    font-family: "Mulish", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: #000;
}

.faq-accordian-box .accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
    border: 0;
}

.faq-accordian-box .accordion-button:not(.collapsed) {
    color: #030907 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

.faq-accordian-box .accordion-item {
    margin-top: 20px;
    padding: 20px;
    border: var(--borderEF);
    border-radius: var(--bor16);
    -webkit-border-radius: var(--bor16);
    -moz-border-radius: var(--bor16);
    -ms-border-radius: var(--bor16);
    -o-border-radius: var(--bor16);
}

.faq-accordian-box .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: #ffffff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}































/* Faq-section End  */


/* privacy-policy-section Start  */
.PrivacyPolicybox {
    margin: 50px 0 0;
}

.PrivacyPolicyOl {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.PrivacyPolicyLi {
    padding: 0 0 20px 0;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.5); */
}

.PrivacyPolicyLi:last-child {
    /* border-bottom: 0; */
}

.webText {
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
}

/* privacy-policy-section End */


/* aboutUs-section Start  */
.aboutUs-section {
    padding: 0 0 50px 0;
}

.aboutUsBanner {
    width: 100%;
    background: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%)), url("../images/banner/roof-aboutUs-Banner.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.aboutUsBannerBox {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.aboutUsBannerBox .web-heading {
    color: #fff;
}

.aboutUsBannerBox .webText {
    text-align: center;
    color: #fff;
}

.aboutUsGrid {
    margin: 50px 0 0;
}

.aboutUsCard {
    padding: 30px;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.aboutUsNumber {
    color: #40C4FF;
    font-size: 25px;
    line-height: 25px;
    font-weight: 600;
}

.aboutUsHead {
    color: #000;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
}

.aboutUsGrideTwo {
    margin: 50px 0 0;
}

.aboutUsImgBox {
    height: 300px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    position: relative;
}

.aboutUsImgBox::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}


.roof-img {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/* aboutUs-section End */


/* contactUs-section Start  */
.contactUs-section {
    padding: 0 0 50px 0;
}

.ContactFormBox {
    padding: 50px 0 20px;
}

.WebSubHeading {
    font-size: 25px;
    font-weight: 600;
    line-height: 25px;
    color: #000;
    text-align: center;
    margin: 0 0 20px 0;
}

.webTextarea {
    width: 100%;
    height: 100px;
    border: 0;
    background-color: #F2F7FD;
    padding: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

/* contactUs-section End */


/* footer-section Start  */
.footer-section {
    background-color: #40C4FF;
}

.footerOne {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.footOne {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.footDownload {
    color: #fff;
    font-size: 25px;
    line-height: 25px;
    font-weight: 600;
}

.footerLogo {
    width: 35px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footTwoUl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.footTwoLi {
    width: 130px;
    height: 40px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.footerStoreImg {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.footerBorder {
    border: 1px solid #fff;
}

.footerTwo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0;
}

.footer-ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.copyrightText {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

.footer-link {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

/* footer-section End  */


/* login-section Start  */
.login-section {
    padding: 80px 0;
}

.forgotPasswordLoginBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.forgotPasswordLink {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: underline;
}

.DonotText {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #000;
}

.donotAccountBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.SignUpLink {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #40C4FF;
    text-decoration: underline;
}

.countryCodeBtn {
    font-size: 16px;
    line-height: 20px;
    color: #030907;
    font-weight: 500;
    background-color: #F2F7FD;
    padding: 14px;
    border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    -ms-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
}

.countryCodeDropDown .dropdown .dropdown-menu {
    min-width: 50px !important;
    min-height: 80px !important;
    height: auto;
    position: absolute !important;
    top: 0% !important;
    left: 0 !important;
}

.countryCodeDropDown .dropdown .dropdown-menu .dropdown-item {
    font-size: 16px;
    line-height: 20px;
    color: #030907;
    font-weight: 500;
}

.countryCodeDropDown .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #40C4FF;
    color: #fff;
}

.loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 50px 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.loginUl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.loginLi {}

.fbLogin {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #40C4FF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.fbLogin:hover {
    background-color: #fff;
    border: 1px solid #40C4FF;
}

.fbLogin:hover img {
    filter: invert(51%) sepia(91%) saturate(2928%) hue-rotate(173deg) brightness(96%) contrast(105%);
    -webkit-filter: invert(51%) sepia(91%) saturate(2928%) hue-rotate(173deg) brightness(96%) contrast(105%);
}

.googleLogin {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #D2232E;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.googleLogin:hover {
    background-color: #fff;
    border: 1px solid #D2232E;
}

.googleLogin:hover img {
    filter: invert(22%) sepia(57%) saturate(4212%) hue-rotate(343deg) brightness(84%) contrast(95%);
    -webkit-filter: invert(22%) sepia(57%) saturate(4212%) hue-rotate(343deg) brightness(84%) contrast(95%);
}


.appleLogin {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #1B1F2F;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.appleLogin:hover {
    background-color: #fff;
    border: 1px solid #1B1F2F;
}

.appleLogin:hover img {
    filter: invert(0%) sepia(79%) saturate(5702%) hue-rotate(241deg) brightness(80%) contrast(15%);
    -webkit-filter: invert(0%) sepia(79%) saturate(5702%) hue-rotate(241deg) brightness(80%) contrast(15%);
}

.loginText {
    font-size: 16px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    /* text-align: center; */
    /* max-width: 450px; */
    /* margin: 0 auto; */
}

/* login-section End  */
/* forgotPasswordSection Start  */
.forgotPasswordSection {
    padding: 70px 0;
} 

.forgotPasswordSection .loginBox {
    gap: 37px;
}

.forgotPasswordGride {
    margin-top: 20px;
}

/* forgotPasswordSection End */

/* OtpSection Start   */
.OtpSection {
    padding: 80px 0;
}

.otpUl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.otpLi {}

.inputOtpNumber {
    width:  40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0E1728;
    font-size: 25px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: center;
    border: 0;
    border-bottom: 2px solid #EEEEEE;
}

.inputOtpNumber:focus {
    border-bottom: 2px solid #40C4FF;
}

.inputOtpNumber[type=number]::-webkit-inner-spin-button,
.inputOtpNumber[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}



.editWebInput[type=number]::-webkit-inner-spin-button,
.editWebInput[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/* OtpSection End  */
/* SetNewPasswordSection Start  */
.SetNewPasswordSection {
    padding: 80px 0;
}

/* SetNewPasswordSection End  */

/* deleteModal Start  */

.deleteModal .modal-dialog {
    max-width: 400px;
    margin: 0 auto;
}

.deleteModal .modal-header {
    padding: 20px;
}

.deleteModal .modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.DeletemodalHeading {
    text-align: center;
    color: #030907;
    font-size: 23px;
    font-weight: 700;
    line-height: 25px;
}

.DeleteModaltext {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    max-width: 260px;
    color: #71859E;
}

.deleteModal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    padding: 20px;
}

.DeleteModalBtn {
    width: 45%;
    padding: 8px 20px;
    border: 1px solid #030907;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    color: #000;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.DeleteModalBtn:hover {
    color: #000;
    background-color: #40C4FF;
    border: 1px solid #40C4FF;
}


.NoModalBtn {
    width: 45%;
    padding: 8px 20px;
    background-color: #40C4FF;
    color: #030907;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    text-align: center;
    border: 1px solid #40C4FF;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.NoModalBtn:hover {
    background-color: #fff;
    color: #40C4FF;
    border: 1px solid #40C4FF;
}

.modal-footer>* {
    margin: 0;
}

.deleteModalImgBox {
    width: 50px;
    height: 50px;
}

/* deleteModal End  */

/* createAccountSection Start  */

.create-account-bannerBox {
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

.serviceTopText {
    font-size: 16px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    margin: 20px auto 0;
}

.createHeading {
    color: #000;
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    line-height: 25px;
    margin: 20px 0 10px;
}

.LetsText {
    color: #03090792;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
    margin: 0 0 40px;
}

.CreateTabspanalBox .nav {
    border: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
}

.CreateTabspanalBox .nav-item {
    width: 200px;
}

.registerTabBtn {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 10px;
    color: #40C4FF;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border: 1px solid #40C4FF;
    position: relative;
}

.add-right-img {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -10px;
    top: -20px;
    border: 2px solid #fff;
    z-index: 10;
    border-radius: 50%;
}


.registerTabBtn.active {
    color: #fff;
    background-color: #40C4FF;
    border: 1px solid #40C4FF;
}

.SignUpTandPBox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.HomeOwnerMain {
    display: none;
}

.payment-radio {
    display: none;
}

.SignUpChaeckbox {
    --bs-form-check-bg: var(--bs-gray-200);
    -ms-flex-negative: 0;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("../images/icons/uncheck.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    width: 16px;
    height: 16px;
    border: none;
}

.SignUpChaeckbox:checked[type=checkbox] {
    background-image: url("../images/icons/check.svg");
}

.CHImg {
    width: 150px;
    height: 50px;
}

/* createAccountSection End  */




/* subscription-section Start */
.subscription-section {
    padding: 50px 0 50px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.subscription-one {
    position: relative;
}

.subscription-back-link {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 66px;
}

.subscription-logo {
    width: 213px;
    height: 82px;
    margin: 30px auto 37px;
}

.subscription-heading {
    font-size: 30px;
    font-weight: 800;
    line-height: 32px;
    text-align: center;
    color: #000;
    margin: 0 0 8px 0;
}

.subscription-text {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    padding: 0 300px;
}

.subscription-content {
    margin: 0 0 39px 0;
}

/* .subscription-card-main {
    display: flex;
    max-width: fit-content;
    margin: 0 auto;
    background: #FFF;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
} */

.subscription-card {
    width: 100%;
    height: 100%;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    box-shadow: 0px 4px 30px 0px #0000000D;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;

}


.subscription-card.active {
    background: #FFF;
    border-radius: 8px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border: 1px solid #E5E7EB;
    border-top: 14px solid #40C4FF;
    box-shadow: 0px 4px 30px 0px #0000000D;
}

.subscription-card:hover .subsn-link {
    border: 1px solid #40C4FF;
    color: #fff;
    background: #40C4FF;
}


.subsn-card-img {
    width: 35px;
    height: 50px;
    margin: 0 auto;
}

.subsn-plan {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: #1F2432;
    text-transform: uppercase;
    margin: 16px auto;
}

.subsn-start {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #4A5578;
    margin: 0 0 4px 0;
}

.subsn-ammount {
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #1F2432;
}

.subsn-doller {
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    color: #1F2432;
}

.subsn-paid {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #6E7793;
    margin: 16px 0 0 0;
}

.subsn-days {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    color: #1F2432;
    margin: 0 0 15px 0;
}



.subsn-ul {
    text-align: left;
    list-style: disc;
    padding: 0 0 0px 30px;
}

.subsn-li {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #6E7793;
}

.subsn-li::marker {
    color: #6E7793;
}

.subsn-link {
    width: 156px;
    display: block;
    padding: 6px 0;
    color: #353C55;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    border: 1px solid #C7CAD5;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

/* .subsn-ct-pad {
    padding: 22px 62px 42px 48px;
} */

/* .subsn-cthree-pad {
    padding: 36px 76px 84px 48px;
} */

.lets-talk {
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
    text-align: left;
    color: #1F2432;
}

/* subscription-section End */


/* payment-section Start  */
.payment-section {
    padding: 60px 0;
}

.paymentImgBox {
    width: 100%;
    height: 400px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.payment-banner {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.totalPayAmtText {
    padding: 10px;
    background-color: rgba(204, 204, 204, 0.3);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 20px 0;
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    width: 260px;
    margin: 0 auto;
    white-space: nowrap;
}

.payMethodUl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.payMethodLi {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.PaycardImg {
    width: 60px;
    height: 60px;
}

.cardNumber {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    line-height: 20px;
    vertical-align: middle;
}

.addPayBox {
    width: 245px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus-blue {
    width: 20px;
    height: 20px;
}

.PaymentRightBox {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.AddPayBtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    color: #40C4FF;
    line-height: 20px;
    padding: 8px 20px;
    border: 1px solid #40C4FF;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.AddBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    color: #40C4FF;
    line-height: 20px;
    padding: 10px 20px;
    border: 1px solid #40C4FF;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.payabelAmtBox .web-heading {
    margin-bottom: 50px;
}

.tutor-payment-method {
    width: 100%;
    background: #FFF;
    padding: 0 20px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.mt-30px {
    margin-top: 30px;
}

.mt-20px {
    margin-top: 20px;
}

.form-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: #170F49;
    padding: 0;
}

.cardTwoInput {
    display: flex;
}

.cardTwoInput .editWebInput {
    width: 50%;
}

/* payment-section End  */

/* PaymentCardModal Start  */
.PaymentCardModal .modal-header {
    padding: 20px;
    border-bottom: 1px solid #9A9EA433;
}

.PaymentCardModal .modal-body {
    padding: 20px;
    border-bottom: 1px solid #9A9EA433;
}

.PaymentCardModal .modal-footer {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#addPayBox .SubmitBtn {
    width: 100%;
    margin: 0 auto;
}

/* PaymentCardModal End  */

/* our-service-section start */
.our-service-section .aboutUsImgBox {
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
}

.our-service-section .roof-img {
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
}

.roofServiceLabel {
    background-color: #000;
    color: #fff;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 10px 0 10px;
    -webkit-border-radius: 0 10px 0 10px;
    -moz-border-radius: 0 10px 0 10px;
    -ms-border-radius: 0 10px 0 10px;
    -o-border-radius: 0 10px 0 10px;
}

.roofBody {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid #40C4FF;
    border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -ms-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
}

.serviceText {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.GenaratBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background-color: #40C4FF;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    text-transform: capitalize;
}

.generatBOMBox {
    margin: 50px 0 0;
    padding: 50px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.serviceFormSubHeading {
    font-size: 20px;
    line-height: 25px;
    font-weight: 700;
    color: #000;
    text-align: left;
    margin: 20px 0;
}

.serviceYesNoBox {
    display: flex;
    align-items: center;
    gap: 20px;
}

.YNBox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.YNBox .webLabel {
    margin: 0;
}

.serviceInputImgBox {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 0;
}

.yesUploadYouPhoto {
    padding: 20px 0;
    display: none;
}

.serviceInputFileBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.serviceInputImgItem {
    width: 120px;
    height: 120px;
    position: relative;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    /* display: none; */
}

.uploadedImagesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.userUploadImg {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.closeImgItem {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -10px;
    top: -10px;
}

.serviceInputFile {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.uploadImg {
    width: 30px;
    height: 30px;
}

.uploadText {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #40C4FF;
    cursor: pointer;
}

.ourServiceRightimgBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.viewbtnBox {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.ourServiceTabel {
    width: 100%;
    overflow-x: auto;
}

.ourServiceTabel .serviceFormSubHeading {
    text-align: center;
}

.ourServiceTabel table {
    width: 100%;
    border-collapse: collapse;
}

.ourServiceTabel table tr td {
    vertical-align: top;
    padding: 10px;
}

.ourServiceTabel table tr td .webLabel {
    margin: 0;
}

.ConfirmBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* our-service-section End */


/* myEstimatorSection Start */
.myEstimatorCard {
    padding: 20px;
    border: 1px solid #40C4FF;
    position: relative;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.EstUl {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.EstLi {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.myEstimatorCardLeft {
    width: 160px;
}

.myEstimatorCardRight {
    width: calc(100% - 160px);
}

.EstGride {
    margin: 30px 0 0;
}

.EstHeading {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #000;
}

.viewDetailsBox {
    position: absolute;
    top: 20px;
    right: 20px;
}

.viewDetailLink {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.EstText {
    font-size: 15px;
    line-height: 20px;
    color: #71859E;
    font-weight: 500;
}

.myEstimatorBox {
    margin: 0 0 20px 0;
}

.searchImg {
    background-image: url("../images/icons/search.svg");
    background-position: center left 15px;
    background-repeat: no-repeat;
    background-size: auto;
}

.searchImg::placeholder {
    color: #8F939E;
}

.searchBoxForEst {
    margin: 50px auto 0;
    max-width: 700px;
}

.searchBoxForEst .editWebInput {
    padding-left: 45px;
}

.EstimatorDetailsModal .modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.EstimatorDetailsModal .modal-body {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.EstimatorDetailsModal .modal-footer {
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.EstimatorDetailsModal .DeleteModalBtn,
.EstimatorDetailsModal .NoModalBtn {
    width: 20%;
}

.EstimatorDetailsModal .serviceInputImgItem {
    width: 60px;
    height: 60px;
}

.ConfirmGreenBtn {
    background-color: #198754 !important;
}

/* myEstimatorSection End */

/* homeSection Start  */
.homeSection {
    background-color: #f1fbff;
}

.homeLeft {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.heroHeading {
    font-size: 45px;
    line-height: 50px;
    color: #000;
    font-weight: 900;
}

.heroText {
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

.heroImg {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.getACourtBtn {
    font-size: 16px;
    line-height: 25px;
    padding: 10px 30px;
    margin-top: 20px;
    font-weight: 600;
    color: #fff;
    background-color: #40C4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.heroUl {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.heroLiOne {
    width: 100%;
    height: 360px;
}

.heroLiTwo {
    width: 100%;
    height: 360px;
}

.heroLiThree {
    width: 100%;
    height: 360px;
}

.heroLiFour {
    width: 100%;
    height: 360px;
}

.heroLiFive {
    width: 100%;
    height: 360px;
}

/* homeSection End  */


/* ourWorkSection Start  */
.ourWorkSection {
    padding: 50px 0 25px;
}

.OwrWorkLeft {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.OwrWorkRightUl {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px 0;
}

.OwrWorkRightLi {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.OurTickBox {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.OurWorkText {
    font-size: 20px;
    line-height: 25px;
    color: #0E1728;
    font-weight: 700;
}

.blueText {
    color: #40C4FF;
}

/* ourWorkSection End  */


/* heroWorkSection Start */
.heroWorkSection {
    padding: 25px 0 25px;
}

.heroCard {
    padding: 45px 35px;
    background: linear-gradient(116.59deg, rgba(231, 226, 226, 0.5) 0%, rgba(128, 210, 248, 0.5) 99.04%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    height: 100%;
}

.heroCardBody {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.OurcardNumber {
    font-size: 40px;
    font-weight: 800;
    line-height: normal;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #40C4FF;
    border: 2px solid #40C4FF;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.cardHeading {
    font-size: 24px;
    line-height: 30px;
    color: #0E1728;
    font-weight: 700;
}

/* heroWorkSection End */


/* AboutCompanySection Start  */
.AboutCompanySection {
    padding: 25px 0;
}

.AboutCompanyBox {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

.AboutUl {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;

}

.AboutLi {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: #070C14;
    text-align: center;
}

/* AboutCompanySection End  */

/* OurCustomerSection  Start  */
.OurCustomerSection {
    padding: 25px 0;
}

.OurCustomerRightUl {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 50px;
    padding: 31px 0;
}

.OurCustomerRightLiOne {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 50px;
}

.OurCustomerNumber {
    font-size: 100px;
    line-height: 60px;
    font-weight: 800;
    color: #40C4FF;
}

.HomeRating {}

.HomeRatingUl {
    display: flex;
    align-items: center;
    gap: 10px;

}

.HomeRatingLi {
    height: 50px;
    width: 50px;
}

.OurCustomerRightLiTwo {
    width: 312px;
    height: 168px;
    background: #40c4ff;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gap: 10px; */
    margin-left: auto;
}

.totalReviewNumber {
    font-size: 60px;
    line-height: 50px;
    font-weight: 800;
    color: #fff;
}

.googleReviewText {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    margin: 0 20px 0 auto;
}

/* OurCustomerSection  End  */


/* ReviewCardSection Start  */
.ReviewCardSection {
    padding: 25px 0;
}

.ReviewCard {
    padding: 40px;
    border: 1px solid #E0E0E5;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.bg-pink {
    background-color: #F9E7E4;
}

.bg-lightyellow {
    background-color: #F3FFD7;
}

.bg-lightblue {
    background-color: #C6EFF3;
}

.cottaBox {
    width: 36px;
    height: 36px;
}

.ReviewCardHeader {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ReviewratingUl {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ReviewratingLi .fa-solid {
    color: #FFAB00;
}

.ReviewratingUl {}

.ReviewCardBody {
    padding: 25px 0;
}

.Reviewtext {
    font-size: 18px;
    line-height: 25px;
    font-weight: 500;
    color: #545372;
}

.ReviewAvatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.ReviewAvatar {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.ReviewCardFooter {
    display: flex;
    gap: 16px;
}

.ReviewName {
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: #0E0D39;
}

.ReviewId {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #454567;
}

/* ReviewCardSection End  */
/* FAQSection Start  */
.FAQSection {
    padding: 25px 0 50px;
}


.FAQLeftBox {
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    border: 1px solid #40C4FF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.FAQrightBox {
    height: 100%;
    padding: 20px;
    border: 1px solid #40C4FF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.FAQLeftHeading {
    font-size: 30px;
    line-height: 35px;
    font-weight: 900;
    color: #000;
}

.FAQLeftText {
    font-size: 20px;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

/* Accordion css Start */

.FAQrightBox .accordion-button::after {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-left: auto;
    content: "";
    background-image: url("../images/icons/HomeAccordionimg.svg");
    background-size: contain;
}

.FAQrightBox .accordion-button:not(.collapsed)::after {
    background-image: url("../images/icons/HomeAccordionimg.svg");
    background-size: contain;
}

.FAQrightBox .accordion-header button {
    color: #030907;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 0;
}

.FAQrightBox .accordion-body {
    padding: 0 100px 0 0;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px;
    -webkit-border-radius: 0 0 16px 16px;
    -moz-border-radius: 0 0 16px 16px;
    -ms-border-radius: 0 0 16px 16px;
    -o-border-radius: 0 0 16px 16px;
    font-family: "Mulish", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.7);
}

.FAQrightBox .accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
    border: 0;
}

.FAQrightBox .accordion-button:not(.collapsed) {
    color: #030907 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

.FAQrightBox .accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.FAQrightBox .accordion-item {
    padding: 5px 20px;
    border: 0;
}

.FAQrightBox .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: #ffffff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

/* Accordion css End */

/* FAQSection End */





.editWebInput::placeholder{
    color:#71859E ;
}

.error-message,.errorText{
    color: red;
    font-size: 12px;
}

.react-international-phone-country-selector-button{
    height: 100% !important;
}