/*#heroFormBannerMain { padding-top: 140px !important; } .heroFormBannerSection h1.logo-title { font-size: 76px; letter-spacing: -3px; line-height: 0.9; font-weight: 700; color: #FFFFFF; /*background: linear-gradient(150deg, #83CDB8, #FFFFFF 65%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradientAnimation 3s linear infinite; / } .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 25px; font-weight: 600; line-height: 1.2; color: #FFFFFF; margin-top: 15px; } .heroFormBannerSection .homeForm h5.form-title-cls { font-size: 19px; } /* Animation CSS / .slideLeftContainer { opacity: 0; transform: translateX(-100px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .slideLeftContainer.animate { opacity: 1; transform: translateX(0); } .slideRightContainer { opacity: 0; transform: translateX(100px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .slideRightContainer.animate { opacity: 1; transform: translateX(0); } #heroFormBannerMain .heroBannerLinkParent { display: none; } .white-bg-form.qualityContractorForm, .white-bg-form.qualityContractorForm form { background-color: #FFFFFF; } .white-bg-form.qualityContractorForm form h6, .white-bg-form.qualityContractorForm form input[type=text], .white-bg-form.qualityContractorForm form input[type=search], .white-bg-form.qualityContractorForm form input[type=email], .white-bg-form.qualityContractorForm form input[type=password], .white-bg-form.qualityContractorForm form input[type=tel], form input[type=number], .white-bg-form.qualityContractorForm form input[type=file], .white-bg-form.qualityContractorForm form select, .white-bg-form.qualityContractorForm form textarea { color: #202020; } .white-bg-form.qualityContractorForm form input::placeholder, .white-bg-form.qualityContractorForm form input::-webkit-input-placeholder, .white-bg-form.qualityContractorForm form textarea::placeholder { color: #202020; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span { color: #202020; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span:before { border: 1px solid #202020; } .white-bg-form.qualityContractorForm form input[type=submit]:hover, .white-bg-form.qualityContractorForm form input[type=submit]:focus, .white-bg-form.qualityContractorForm form .hs-button:hover, .white-bg-form.qualityContractorForm form .hs-button:focus { border: 1px solid #202020; } .white-bg-form.qualityContractorForm .clearButton { color: #202020; border: 1px solid #202020; } .white-bg-form.qualityContractorForm .clearButton:hover { border: 1px solid #83CDB8; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span .terms-cls { color: #202020; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span .terms-cls:focus, .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span .terms-cls:hover { color: #83CDB8; } .mainFormBannerSection .mainFormLink:hover .heroBannerLinktext:before, .mainFormBannerSection .mainFormLink:active .heroBannerLinktext:before { width: 0%; } .mainFormBannerSection .mainFormLink:hover .heroBannerButton, .mainFormBannerSection .mainFormLink:active .heroBannerButton { rotate: 0deg; border: 1px solid #FFFFFF; background-color: transparent; } .mainFormBannerSection .mainFormLink:hover .linkArrowButton:before, .mainFormBannerSection .mainFormLink:active .linkArrowButton:before { left: -2px; } .mainFormBannerSection .mainFormLink:hover svg, .mainFormBannerSection .mainFormLink:active svg { transform: translateX(0px); } .mainFormBannerSection .mainFormLink.active .heroBannerLinktext:before { width: 100%; } .mainFormBannerSection .mainFormLink.active .heroBannerButton { rotate: 90deg; background-color: #83CDB8; border: 1px solid #83CDB8; } .mainFormBannerSection .mainFormLink.active .linkArrowButton:before { left: 40px; } .mainFormBannerSection .mainFormLink.active svg { transform: translateX(30px); } .mainFormBannerSection .homeForm h5.form-title-cls { font-size: 19px; color: #FFFFFF; font-weight: 600; } .mainFormBannerSection .homeForm form .hs-richtext { display: none; } .white-bg-form.qualityContractorForm h5.form-title-cls { color: #202020; } .mainFormBannerSection .homeForm h6.form-subtitle { text-align: center; font-size: 17px; font-style: italic; margin-bottom: 14px; } .heroFormBannerSection .bannerTaglineCls .heroBannerLogo { max-width: 90%; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 70px; margin-bottom: 24px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent.mobile { display: none; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent p { margin-bottom: 18px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul { list-style-type: none; padding: 0; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul li { margin-bottom: 8px; font-size: 17.5px; position: relative; padding-left: 25px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-image: url('https://contractors.direct/hubfs/6343132/ic_circle_fill.svg'); background-size: cover; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent { margin-top: 20px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContentParent { padding-left: 0px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent { border-left: none; padding-left: 0px; } .heroFormBannerSection .heroBannerContent p.light { margin-bottom: 20px; } .heroFormBannerSection .googleRatingCls.mobile { display: none; } .heroFormBannerSection .googleRatingCls { margin-bottom: 15px; align-items: center; font-size: 20px; background-color: rgba(32, 32, 32, 0.8); border: 1px solid #FFFFFF; border-radius: 9999px; display: inline-flex; padding: .4rem .9rem .4rem .5rem; } .heroFormBannerSection .googleRatingCls .googleIconCls { width: 24px; height: 24px; margin-right: 10px; } .heroFormBannerSection .googleRatingCls .ratingValue { color: #FFFFFF; font-weight: 600; margin-right: 7px; font-size: 17px; margin-top: 2px; } .heroFormBannerSection .googleRatingCls .star { width: 16px; height: 16px; fill: #FBBC04; margin-right: 3px; } @media screen and (max-width: 1320px) { .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 60px; } } @media screen and (max-width: 1199px) { .heroFormBannerSection h1.logo-title { font-size: 70px; } .heroFormBannerSection .homeForm h5.form-title-cls { font-size: 18px; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 50px; margin-bottom: 10px; } } @media screen and (max-width: 1024px) { .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 20px; } } @media screen and (max-width: 1199px) and (min-width: 991px) { .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 22px; } } @media screen and (max-width: 991px) { form .hs-project_size___search_main__cloned___field_test_ { width: 103% !important; } #heroFormBannerMain.mainFormBannerSection .heroBannerLinkParent { display: block; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent.desktop { display: none; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent.mobile { display: block; } .heroFormBannerSection .googleRatingCls.desktop { display: none; } .heroFormBannerSection .googleRatingCls.mobile { display: inline-block; margin-top: 22px; } /* .mainFormBannerSection .heroFormParent { display: none; opacity: 0;transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; position: relative; } .mainFormBannerSection .heroFormParent.active { display: block; opacity: 1; transform: translateY(0); } / .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 20px; } .heroFormBannerSection .heroFormParent { width: 100%; } } @media screen and (max-width:768px) { #heroFormBannerMain { padding-top: 150px !important; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { letter-spacing: -1px; } } @media screen and (max-width: 640px) { .heroFormBannerSection h1.logo-title { font-size: 50px; } .heroFormBannerSection .homeForm h5.form-title-cls { text-align: center; } } @media screen and (max-width: 580px) { .mainFormBannerSection .homeForm h6.form-subtitle { font-size: 15px; } } @media screen and (max-width: 480px) { #heroFormBannerMain { padding-top: 120px !important; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 32px; } .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 18px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent { margin-top: 18px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul li { font-size: 15px; } #heroFormBannerMain .bannerTaglineCls .heroBannerLinkParent { padding-top: 10px; } .heroFormBannerSection.mainFormBannerSection .heroFormBannerInner { gap: 0px; } } @keyframes gradientAnimation { 0% { background-position: 0 25%; } 50% { background-position: 100% 45%; } 100% { background-position: 0 50%; } }*/ #heroFormBannerMain { padding-top: 140px !important; } .heroFormBannerSection h1.logo-title { font-size: 76px; letter-spacing: -3px; line-height: 0.9; font-weight: 700; color: #FFFFFF; /*background: linear-gradient(150deg, #83CDB8, #FFFFFF 65%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradientAnimation 3s linear infinite; */ } .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 25px; font-weight: 600; line-height: 1.2; color: #FFFFFF; margin-top: 15px; } .heroFormBannerSection .homeForm h5.form-title-cls { font-size: 19px; } /* Animation CSS */ .slideLeftContainer { opacity: 0; transform: translateX(-100px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .slideLeftContainer.animate { opacity: 1; transform: translateX(0); } .slideRightContainer { opacity: 0; transform: translateX(100px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .slideRightContainer.animate { opacity: 1; transform: translateX(0); } #heroFormBannerMain .heroBannerLinkParent { display: none; } .white-bg-form.qualityContractorForm, .white-bg-form.qualityContractorForm form { background-color: #FFFFFF; } .white-bg-form.qualityContractorForm form h6, .white-bg-form.qualityContractorForm form input[type=text], .white-bg-form.qualityContractorForm form input[type=search], .white-bg-form.qualityContractorForm form input[type=email], .white-bg-form.qualityContractorForm form input[type=password], .white-bg-form.qualityContractorForm form input[type=tel], form input[type=number], .white-bg-form.qualityContractorForm form input[type=file], .white-bg-form.qualityContractorForm form select, .white-bg-form.qualityContractorForm form textarea { color: #202020; } .white-bg-form.qualityContractorForm form input::placeholder, .white-bg-form.qualityContractorForm form input::-webkit-input-placeholder, .white-bg-form.qualityContractorForm form textarea::placeholder { color: #202020; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span { color: #202020; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span:before { border: 1px solid #202020; } .white-bg-form.qualityContractorForm form input[type=submit]:hover, .white-bg-form.qualityContractorForm form input[type=submit]:focus, .white-bg-form.qualityContractorForm form .hs-button:hover, .white-bg-form.qualityContractorForm form .hs-button:focus { border: 1px solid #202020; } .white-bg-form.qualityContractorForm .clearButton { color: #202020; border: 1px solid #202020; } .white-bg-form.qualityContractorForm .clearButton:hover { border: 1px solid #83CDB8; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span .terms-cls { color: #202020; } .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span .terms-cls:focus, .white-bg-form.qualityContractorForm form .hs-form-checkbox input+span .terms-cls:hover { color: #83CDB8; } .mainFormBannerSection .mainFormLink:hover .heroBannerLinktext:before, .mainFormBannerSection .mainFormLink:active .heroBannerLinktext:before { width: 0%; } .mainFormBannerSection .mainFormLink:hover .heroBannerButton, .mainFormBannerSection .mainFormLink:active .heroBannerButton { rotate: 0deg; border: 1px solid #FFFFFF; background-color: transparent; } .mainFormBannerSection .mainFormLink:hover .linkArrowButton:before, .mainFormBannerSection .mainFormLink:active .linkArrowButton:before { left: -2px; } .mainFormBannerSection .mainFormLink:hover svg, .mainFormBannerSection .mainFormLink:active svg { transform: translateX(0px); } .mainFormBannerSection .mainFormLink.active .heroBannerLinktext:before { width: 100%; } .mainFormBannerSection .mainFormLink.active .heroBannerButton { rotate: 90deg; background-color: #83CDB8; border: 1px solid #83CDB8; } .mainFormBannerSection .mainFormLink.active .linkArrowButton:before { left: 40px; } .mainFormBannerSection .mainFormLink.active svg { transform: translateX(30px); } .mainFormBannerSection .homeForm h5.form-title-cls { font-size: 19px; color: #FFFFFF; font-weight: 600; } .mainFormBannerSection .homeForm form .hs-richtext { display: none; } .white-bg-form.qualityContractorForm h5.form-title-cls { color: #202020; } .mainFormBannerSection .homeForm h6.form-subtitle { text-align: center; font-size: 17px; font-style: italic; margin-bottom: 14px; } .heroFormBannerSection .bannerTaglineCls .heroBannerLogo { max-width: 90%; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 70px; margin-bottom: 24px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent.mobile { display: none; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent p { margin-bottom: 18px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul { list-style-type: none; padding: 0; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul li { margin-bottom: 8px; font-size: 17.5px; position: relative; padding-left: 25px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-image: url('https://contractors.direct/hubfs/6343132/ic_circle_fill.svg'); background-size: cover; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent { margin-top: 20px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContentParent { padding-left: 0px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent { border-left: none; padding-left: 0px; } .heroFormBannerSection .heroBannerContent p.light { margin-bottom: 20px; } .heroFormBannerSection .googleRatingCls.mobile { display: none; } .heroFormBannerSection .googleRatingCls { margin-bottom: 15px; align-items: center; font-size: 20px; background-color: rgba(32, 32, 32, 0.8); border: 1px solid #FFFFFF; border-radius: 9999px; display: inline-flex; padding: .4rem .9rem .4rem .5rem; } .heroFormBannerSection .googleRatingCls .googleIconCls { width: 24px; height: 24px; margin-right: 10px; } .heroFormBannerSection .googleRatingCls .ratingValue { color: #FFFFFF; font-weight: 600; margin-right: 7px; font-size: 17px; margin-top: 2px; } .heroFormBannerSection .googleRatingCls .star { width: 16px; height: 16px; fill: #FBBC04; margin-right: 3px; } @media screen and (max-width: 1320px) { .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 60px; } } @media screen and (max-width: 1199px) { .heroFormBannerSection h1.logo-title { font-size: 70px; } .heroFormBannerSection .homeForm h5.form-title-cls { font-size: 18px; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 50px; margin-bottom: 10px; } } @media screen and (max-width: 1024px) { .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 20px; } } @media screen and (max-width: 1199px) and (min-width: 991px) { .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 22px; } } @media screen and (max-width: 991px) { form .hs-project_size___search_main__cloned___field_test_ { width: 103% !important; } #heroFormBannerMain.mainFormBannerSection .heroBannerLinkParent { display: block; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent.desktop { display: none; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent.mobile { display: block; } .heroFormBannerSection .googleRatingCls.desktop { display: none; } .heroFormBannerSection .googleRatingCls.mobile { display: inline-block; margin-top: 22px; } /* .mainFormBannerSection .heroFormParent { display: none; opacity: 0;transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; position: relative; } .mainFormBannerSection .heroFormParent.active { display: block; opacity: 1; transform: translateY(0); } */ .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 20px; } .heroFormBannerSection .heroFormParent { width: 100%; } } @media screen and (max-width:768px) { #heroFormBannerMain { padding-top: 150px !important; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { letter-spacing: -1px; } } @media screen and (max-width: 640px) { .heroFormBannerSection h1.logo-title { font-size: 50px; } .heroFormBannerSection .homeForm h5.form-title-cls { text-align: center; } } @media screen and (max-width: 580px) { .mainFormBannerSection .homeForm h6.form-subtitle { font-size: 15px; } } @media screen and (max-width: 480px) { #heroFormBannerMain { padding-top: 120px !important; } .heroFormBannerSection .bannerTaglineCls h1.logo-title { font-size: 32px; } .heroFormBannerSection .bannerTaglineCls h2.banner-tagline { font-size: 18px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent { margin-top: 18px; } .heroFormBannerSection .bannerTaglineCls .heroBannerContent ul li { font-size: 15px; } #heroFormBannerMain .bannerTaglineCls .heroBannerLinkParent { padding-top: 10px; } .heroFormBannerSection.mainFormBannerSection .heroFormBannerInner { gap: 0px; } } @keyframes gradientAnimation { 0% { background-position: 0 25%; } 50% { background-position: 100% 45%; } 100% { background-position: 0 50%; } }