html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
overflow-x: hidden;
}
html, body {
overflow-x: hidden;
max-width: 100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face {
font-family: "Helvetica";
src: url("../fonts/Helvetica.woff2") format("woff2"),
url("../fonts/Helvetica.woff") format("woff"),
url("../fonts/Helvetica-Bold.ttf") format("ttf"),
url("../fonts/Helvetica-Bold.eot") format("eot");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Helvetica";
src: url("../fonts/Helvetica-Bold.woff2") format("woff2"),
url("../fonts/Helvetica-Bold.ttf") format("ttf"),
url("../fonts/Helvetica-Bold.eot") format("eot"),
url("../fonts/Helvetica-Bold.woff") format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Helvetica";
src: url("../fonts/Helvetica-Light.woff2") format("woff2"),
url("../fonts/Helvetica-Light.ttf") format("ttf"),
url("../fonts/Helvetica-Light.eot") format("eot"),
url("../fonts/Helvetica-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
body {
font-family: "Helvetica", Arial, sans-serif;
}
.btn__default {
display: flex;
padding: 14px 20px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 8px;
background: radial-gradient(85.34% 85.34% at 53.04% 85.34%, #0D467F 0%, #70D3E6 100%), #1E1856;
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 100%; /* 18px */
text-transform: uppercase;
transition: all .3s;
border: none;
max-width: 510px;
}
.btn__default:hover {
background: linear-gradient(0deg, #19AFD6 0%, #19AFD6 100%), #1E1856;
}
.btn__ghost{
display: flex;
padding: 14px 20px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 10px;
border: 1px solid #1285B3;
background: #FFF;
color: #1285B3;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 100%; /* 18px */
text-transform: uppercase;
transition: all .3s;
text-decoration: none;
}
.btn__ghost svg path{
transition: all .3s;
}
.btn__ghost:hover{
border: 1px solid #1CB8CA;
color: #3CC2D5;
}
.btn__ghost:hover svg path{
fill: #3CC2D5;
}
.main__title{
color: #FFF;
text-align: center;
font-size: 54px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 70.2px */
text-transform: uppercase;
}
.main__title__accent{
color: #72FDFF;
font-family: "Inter", sans-serif;
font-size: 54px;
font-weight: 600;
line-height: 130%;
text-transform: uppercase;
}
.container{
max-width: 1474px;
padding-left: 5px;
padding-right: 5px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
box-sizing: border-box;
}
.container.small{
max-width: 1394px;
padding-left: 15px;
padding-right: 15px;
}
.title{
color: #054B71;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-weight: 600;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
}
.subtitle{
color: #054B71;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
}
.zip-error {
font-size: 14px;
display: none;
color: #e74242;
padding-top: 10px;
}
span.error {
color: #e74242;
display: block;
padding-top: 10px;
}
.zip__input.error{
border: 1px solid #e74242;
}
.zip__input.error:focus, .base__input.error:focus{
outline: none;
box-shadow: none;
}
.dropdown-toggle.error{
border: 1px solid #e74242;
}
/*==============================================HEADER============================================*/
.header{
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: 27px;
margin: 0 auto;
padding-top: 15px;
padding-right: 24px;
padding-left: 24px;
max-width: 1474px;
width: 100%;
flex: 1;
box-sizing: border-box;
position: relative;
}
.nav{
display: flex;
align-items: center;
gap: 30px;
}
.btn__group{
display: flex;
align-items: center;
gap: 16px
}
.logo{
position: absolute;
top: 50px;
left: 2%;
display: block;
width: 226px;
height: 75px;
z-index: 9;
}
.logo img{
width: 100%;
height: 100%;
}
main:has(.index) .logo{
top: 10px;
}
.nav__item a{
color: #054B71;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 100%; /* 16px */
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.nav__item__group{
display: none;
flex-direction: column;
width: 100%;
gap: 12px;
margin-top: 40px;
}
.header .btn.btn-secondary.dropdown-toggle{
--bs-btn-color: #054B71;
--bs-btn-bg: inherit;
--bs-btn-border-color: inherit;
--bs-btn-hover-color: #054B71;
--bs-btn-hover-bg: inherit;
--bs-btn-hover-border-color: inherit;
--bs-btn-focus-shadow-rgb: none;
--bs-btn-active-color: #2AA7EB;
--bs-btn-active-bg: inherit;
--bs-btn-active-border-color: inherit;
--bs-btn-active-shadow: none;
--bs-btn-disabled-color: #054B71;
--bs-btn-disabled-bg: inherit;
--bs-btn-disabled-border-color: inherit;
padding: 0;
display: flex;
}
.dropdown-toggle::after {
content: "";
width: 12px;
height: 12px;
margin-top: 3px;
background-color: currentColor;
-webkit-mask: url("../images/arrowDown.svg") no-repeat center;
mask: url("../images/arrowDown.svg") no-repeat center;
transition: transform 0.25s ease;
}
.header .dropdown-toggle::after{
margin-top: 6px;
}
.header .btn.dropdown-toggle {
color: #054B71;
}
.header .btn.dropdown-toggle.show {
color: #2AA7EB;
}
.btn.dropdown-toggle.show::after {
transform: rotate(180deg);
}
.header .dropdown-menu.show{
display: flex;
border-radius: 10px;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(2, 40, 60, 0.27);
border: none;
}
.header .dropdown-item{
display: flex;
gap: 4px;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
}
.burger {
width: 54px;
height: 54px;
padding: 15px;
position: fixed;
top: 15px;
right: 10px;
cursor: pointer;
z-index: 5;
display: none;
align-items: center;
justify-content: center;
}
.burger__icon {
position: absolute;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.burger__icon--menu {
background-image: url("../images/menu.svg");
opacity: 1;
transform: scale(1);
}
.burger__icon--close {
background-image: url("../images/close.svg");
opacity: 0;
transform: scale(0.6) rotate(-90deg);
}
.burger.is-open .burger__icon--menu {
opacity: 0;
transform: scale(0.6) rotate(90deg);
}
.burger.is-open .burger__icon--close {
opacity: 1;
transform: scale(1) rotate(0);
}
.mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 10;
}
.mobile-overlay.active {
opacity: 1;
pointer-events: all;
}
/* ===============================================COOKIE========================================== */
.section {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-bottom: 40px;
line-height: 1.7;
}
.body {
background-color: #f9f9f9;
min-height: 100vh;
}
.section h1 {
color: #2c3e50;
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
margin-top: 0;
margin-bottom: 25px;
font-size: 32px;
font-weight: 600;
}
.section h2 {
color: #2980b9;
margin-top: 30px;
margin-bottom: 20px;
font-size: 24px;
font-weight: 600;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.section h3 {
color: #16a085;
margin-top: 25px;
margin-bottom: 15px;
font-size: 20px;
font-weight: 500;
}
.section p {
margin-bottom: 18px;
text-align: justify;
font-size: 16px;
color: #333;
}
.section strong {
color: #2c3e50;
font-weight: 600;
}
.section ul {
margin-left: 25px;
margin-bottom: 20px;
}
.section li {
margin-bottom: 10px;
list-style-type: disc;
font-size: 16px;
line-height: 1.6;
}
.last-updated {
padding: 15px 20px;
margin-bottom: 25px;
font-weight: bold;
border-radius: 6px;
font-size: 16px;
}
.contact-info {
background-color: #e8f6f3;
padding: 20px;
border-radius: 8px;
margin-top: 25px;
border-left: 4px solid #16a085;
}
.cookie-type {
margin-bottom: 25px;
padding-left: 20px;
border-left: 4px solid #3498db;
}
.section h4 {
color: #2c3e50;
margin-top: 0;
font-size: 18px;
font-weight: 500;
}
.note {
font-style: italic;
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #f1c40f;
margin: 20px 0;
font-size: 15px;
}
.highlight {
background-color: #fffacd;
padding: 2px 6px;
border-radius: 3px;
font-weight: 500;
}
.cookie-policy-page .section ul {
list-style-type: disc;
}
.cookie-policy-page .section li {
list-style-type: disc;
}
.cookie-policy-page .footer__links__list,
.cookie-policy-page .footer__links__list li {
list-style-type: none !important;
}
.email{
color: #053D61;
text-align: center;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
/* ======================================DO-NOT-SELL=================================== */
.form-container {
background-color: #f8f9fa;
padding: 30px;
border-radius: 8px;
border: 1px solid #ddd;
margin: 30px 0;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box;
font-family: "Helvetica", Arial, sans-serif;
}
#requestType {
appearance: none;
-moz-appearance: none;
-ms-appearance: none;
background: url("data:image/svg+xml;utf8,") no-repeat right center / cover #fff;
background-position: right 10px center;
background-size: 12px;
padding-right: 40px;
}
.form-control:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.required {
color: #e74c3c;
}
.checkbox-group {
margin: 20px 0;
}
.checkbox-group label {
display: flex;
font-weight: normal;
cursor: pointer;
align-items: center;
}
.checkbox-group input[type="checkbox"] {
margin-right: 10px;
margin-top: 3px;
}
.btn-submit {
background: linear-gradient(91deg, #0187B3 -0.8%, #00CBDC 47.91%, #058C95 96.62%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 14px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
width: 100%;
}
.btn-submit:hover {
background: #0187B3;
}
.confirmation-message {
display: none;
background-color: #d4edda;
color: #155724;
padding: 20px;
border-radius: 6px;
border: 1px solid #c3e6cb;
margin: 20px 0;
text-align: center;
}
.info-box {
background-color: #e8f4fc;
padding: 20px;
border-radius: 6px;
border-left: 4px solid #3498db;
margin: 20px 0;
}
.disclaimer-box {
background-color: #fff8e1;
padding: 20px;
border-radius: 6px;
border-left: 4px solid #ffc107;
margin: 20px 0;
font-size: 14px;
color: #666;
}
/* ==============================================PRIVACY========================================== */
.privacy-policy-page ol {
margin-left: 25px;
margin-bottom: 20px;
}
.privacy-policy-page ol li {
list-style-type: decimal;
}
.last-updated {
padding: 15px 20px;
margin-bottom: 25px;
font-weight: bold;
border-radius: 6px;
font-size: 16px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 14px;
}
table th, table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
table th {
background-color: #f2f2f2;
font-weight: 600;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
.annex {
background-color: #f0f7ff;
padding: 25px;
border-radius: 8px;
margin: 25px 0;
border: 1px solid #d1e7ff;
}
.annex h3 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.disclaimer-box {
background-color: #fff8e1;
padding: 20px;
border-radius: 6px;
border-left: 4px solid #ffc107;
margin: 20px 0;
font-size: 15px;
}
/* ===================================================TERMS================================================= */
.terms-page ol {
margin-left: 25px;
margin-bottom: 20px;
}
.terms-page ol li {
list-style-type: decimal;
}
.last-updated {
padding: 15px 20px;
margin-bottom: 25px;
font-weight: bold;
border-radius: 6px;
font-size: 16px;
}
.warning-box {
background-color: #fff8e1;
padding: 20px;
border-radius: 6px;
border-left: 4px solid #ffc107;
margin: 20px 0;
font-size: 15px;
}
.definition-box {
background-color: #f0f7ff;
padding: 20px;
border-radius: 6px;
margin: 20px 0;
border: 1px solid #d1e7ff;
}
.definition-box h4 {
color: #2980b9;
margin-top: 0;
}
/*======================================INDEX-PAGE=================================*/
/*=====================================HERO====================================*/
.hero {
position: relative;
min-height: 900px;
display: flex;
align-items: center;
flex-direction: column;
gap: 28px;
}
.container:has(.hero){
padding-bottom: 20px;
}
.hero .main__title{
max-width: 1154px;
padding-top: 109px;
}
.hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: url(#heroClip);
z-index: -1;
}
.hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__form__group{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 685px;
padding: 50px 60px;
border-radius: 60px;
border: 1px solid #FFF;
background: rgba(30, 42, 57, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero__group .btn.btn-secondary.dropdown-toggle{
--bs-btn-color: #91969E;
font-family: 'Poppins', sans-serif;
--bs-btn-bg: #F2F2F2;
--bs-btn-border-color: inherit;
--bs-btn-hover-color: #91969E;
--bs-btn-hover-bg: #F2F2F2;
--bs-btn-hover-border-color: inherit;
--bs-btn-focus-shadow-rgb: none;
--bs-btn-active-color: #1386B3;;
--bs-btn-active-bg: #F2F2F2;
--bs-btn-active-border-color: #3CC2D5;
--bs-btn-active-shadow: none;
--bs-btn-disabled-color: #91969E;
--bs-btn-disabled-bg: #F2F2F2;
--bs-btn-disabled-border-color: inherit;
padding: 18px 24px;
display: flex;
align-items: center;
border-radius: 14px;
max-height: 57px;
width: 100%;
}
.hero__group .dropdown{
width: 60%;
}
.hero__group .dropdown-toggle::after {
margin-top: 0px;
margin-left: auto;
}
.hero__group .dropdown-toggle::before{
display: inline-block;
margin-left: 0;
margin-top: 7px;
margin-right: 7px;
vertical-align: .255em;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
content: url("../images/settings.svg");
left: 0;
}
.hero__group .dropdown-item{
display: flex;
gap: 4px;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
transition: all .3s;
}
.hero__group .dropdown-item:hover{
color: #3CC2D5;
background: rgba(185, 235, 255, 0.60);
}
.hero__group{
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
max-width: 510px;
}
.zip__input{
padding: 18px 24px 18px 47px;
color: #91969E;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 18px */
max-height: 57px;
border-radius: 14px;
background: #F2F2F2;
border: 1px solid #FFF;
transition: all .3s;
width: 100%;
}
.zip__input__wrapper{
position: relative;
}
.hero__group .zip__input__wrapper{
width: 40%;
}
.zip__input:focus{
outline: none;
border: 1px solid #1CB8CA;
}
.zip__input::placeholder{
color: #91969E;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 18px */
}
.zip__input__wrapper::after{
content: url("../images/zip.svg");
position: absolute;
top: 28px;
transform: translateY(-50%);
left:22px;
width: 21px;
height: 21px;
}
.hero__form__group .btn__default{
margin-top: 16px;
width: 100%;
max-width: 510px;
min-height: 62px;
}
.hero {
position: relative;
z-index: 5;
}
.hero__group .dropdown-menu {
z-index: 100;
}
/*==============================================HOME-NEEDS==========================================*/
.home__needs{
padding-top: 61px;
position: relative;
z-index: 1;
}
.title__group{
display: flex;
flex-direction: column;
gap: 2px;
}
.home__needs::after {
content: "";
position: absolute;
top: 35px;
left: 0;
background: url("../images/homeNeedsBg.webp") no-repeat center / contain;
z-index: -1;
width: 100%;
height: 193px;
}
.nav-tabs {
border-bottom: none;
}
.nav-tabs .nav-link {
border: none;
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 100%; /* 17px */
padding: 14px 30px;
}
.nav-tabs .nav-link.active {
color: #FFF;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 100%; /* 17px */
border-radius: 80px;
background: linear-gradient(90deg, #1C8DCA 0%, #0E4664 100%);
padding: 14px 30px;
}
.home__needs .nav {
display: flex;
align-items: center;
gap: 10px;
border-radius: 80px;
background: #FFF;
box-shadow: 0 0 24px 0 rgba(0, 135, 179, 0.30) inset;
padding: 6.5px;
justify-content: center;
}
.tabs__wrapper{
display: flex;
align-items: center;
justify-content: center;
margin-top: 35px;
margin-bottom: 24px;
}
.tab__content{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 10px;
}
.tab__content:last-child{
margin-bottom: 0;
}
.tab__content__item img{
width: 76px;
height: 76px;
}
.tab__content__item__title{
color: #054B71;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 120%; /* 24px */
}
.tab__content__item {
text-decoration: none;
flex: 1;
min-height: 146px;
max-width: 260px;
perspective: 1000px;
}
.tab__card {
position: relative;
width: 100%;
height: 100%;
min-height: 146px;
border-radius: 20px;
background: #FFF;
box-shadow: 0 4px 30px rgba(0, 135, 179, 0.24) inset;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.tab__content__item:hover .tab__card {
transform: rotateY(180deg);
}
.tab__card__side {
position: absolute;
inset: 0;
border-radius: 20px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.tab__card__front {
border-radius: 20px;
background: #FFF;
box-shadow: 0 4px 30px 0 rgba(0, 135, 179, 0.24) inset;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
flex: 1;
min-height: 146px;
max-width: 260px;
perspective: 1000px;
}
.tab__card__back {
transform: rotateY(180deg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
align-items: flex-end;
}
.tab__card__back.roofing{
background-image: url("../images/roofingBack.png");
}
.tab__card__back.windows{
background-image: url("../images/windowsBack.png");
}
.tab__card__back.solar{
background-image: url("../images/solarBack.png");
}
.tab__card__back.bathroom{
background-image: url("../images/bathroomBack.png");
}
.tab__card__back.kitchen{
background-image: url("../images/kitchenBack.png");
}
.tab__card__back.hvac{
background-image: url("../images/hvacBack.png");
}
.tab__card__back.gutter{
background-image: url("../images/gutterBack.png");
}
.tab__card__back.flooring{
background-image: url("../images/flooringBack.png");
}
.tab__card__back.siding{
background-image: url("../images/sidingBack.png");
}
.tab__card__back.walk{
background-image: url("../images/walkInTabsBack.png");
}
.tab__card__back.plumbing{
background-image: url("../images/plumbingBak.png");
}
.tab__card__back.warranty{
background-image: url("../images/homeWarrantyBack.png");
}
.tab__card__back.security{
background-image: url("../images/homeSecurityBack.png");
}
.tab__card__button{
border-radius: 9px;
border: 1px solid #FFF;
background: rgba(2, 40, 60, 0.49);
backdrop-filter: blur(2px);
padding: 4px 34px 4px 10px;
position: relative;
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 24px */
min-width: 119px;
margin-bottom: 20px;
}
.tab__card__button::after{
content: url("../images/arrowRight.svg");
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 18px;
height: 18px;
}
.tab-pane.fade.show.active {
display: flex;
gap: 12px;
justify-items: center;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.tab__content__item {
width: 100%;
max-width: 260px;
aspect-ratio: 260 / 146;
perspective: 1000px;
justify-items: center;
}
/*========================================HOW-TO-FIND================================================*/
.how__find{
padding-top: 96px;
}
.steps__wrapper{
display: flex;
flex-direction: column;
align-items: center;
}
.steps__progress{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.steps__progress__list{
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
position: relative;
}
.steps__progress__list::before{
content: "";
position: absolute;
top: 63%;
z-index: -3;
left: 11px;
width: 96%;
height: 36px;
background: url("../images/progressLine.png") no-repeat center / cover;
}
.steps__progress__list::after{
content: "";
position: absolute;
top: 85%;
z-index: -3;
left: 30px;
width: 100%;
height: 30px;
background: url("../images/dottedLine.png") no-repeat center / contain;
}
.steps__progress__list__item{
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
}
.steps__progress__list__item img{
width: 62px;
height: 64px;
}
.steps__progress__list__item:nth-child(2) img{
width: 51px;
height: 60px;
}
.steps__progress__list__item:last-child img{
width: 107px;
height: 48px;
}
.progress__list__el{
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background: linear-gradient(180deg, #B9EBFF 0%, #3CC2D5 100%);
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 100%; /* 22px */
border-radius: 50%;
position: relative;
}
.steps__progress__list__item:nth-child(2) .progress__list__el{
background: linear-gradient(180deg, #B9EBFF 0%, #0DA4BA 100%);
}
.steps__progress__list__item:last-child .progress__list__el{
background: linear-gradient(180deg, #B9EBFF 0%, #3C81D5 100%);
}
.progress__list__el::before{
content: "";
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: 52px;
height: 52px;
background: linear-gradient(180deg, rgba(185, 235, 255, 0.40) 0%, rgba(60, 194, 213, 0.40) 100%);
border-radius: 50%;
z-index: -1;
}
.progress__list__el::after{
content: "";
position: absolute;
z-index: -2;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: 67px;
height: 67px;
border-radius: 50%;
background: #FFF;
box-shadow: 0 0 24px 0 rgba(0, 135, 179, 0.30) inset;
}
.steps__content__img{
max-width: 213px;
max-height: 142px;
}
.steps__content__img img{
width: 100%;
height: 100%;
}
.steps__content__block{
border-radius: 90px;
background: #CBEAD1;
display: flex;
padding: 5px 10px;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
max-height: 64px;
min-width: 206px;
margin-top: 15px;
}
.steps__content__block::after{
position: absolute;
content: "";
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: 100%;
min-height: 82px;
min-width: 226px;
background: rgba(168, 226, 179, 0.20);
border-radius: 90px;
}
.steps__content__group{
display: flex;
align-items: center;
}
.steps__content__group img{
width: 32px;
height: 32px;
}
.steps__content__text{
color: #02283C;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 130%; /* 20.8px */
}
.steps__content__descr{
color: #054B71;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 140%; /* 22.4px */
}
.steps__card__list{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 16px;
gap: 10px;
}
.steps__card__list__item{
display: flex;
padding: 20px;
flex-direction: column;
justify-content: space-between;
border-radius: 20px;
background: #FFF;
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.17);
max-width: 350px;
min-height: 378px;
}
.card__list__item__subtitle{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 24px */
background: url("../images/step1Flag.png") no-repeat center / cover;
display: block;
max-width: 143px;
margin-bottom: 14px;
}
.steps__card__list__item:nth-child(2) .card__list__item__subtitle{
background: url("../images/step2Flag.png") no-repeat center / cover;
}
.steps__card__list__item:last-child .card__list__item__subtitle{
background: url("../images/step3Flag.png") no-repeat center / cover;
}
.card__list__item__title{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 30px */
margin-bottom: 14px;
}
.card__list__item__descr{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 20.8px */
}
/*=========================================CHECK========================================*/
.check__wrapper{
display: flex;
align-items: center;
justify-content: center;
margin-top: 89px;
background: url("../images/checkPricesBg.webp") no-repeat center / cover;
width: 100%;
min-height: 660px;
position: relative;
border-radius: 26px;
}
.check__wrapper .hero__form__group{
border-radius: 20px;
border: none;
background: rgba(53, 83, 147, 0.30);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 30px 40px;
z-index: 5;
}
.check__wrapper .hero__group{
max-width: 100%;
}
.check__wrapper .hero__form__group .btn__default{
max-width: 100%;
}
.check__title{
color: #FFF;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
margin-bottom: 2px;
}
.check__descr{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
margin-bottom: 24px;
}
.check__review{
position: absolute;
border-radius: 20px;
border: 1px solid #1CB8CA;
background: rgba(255, 255, 255, 0.30);
backdrop-filter: blur(7px);
padding: 15px 30px 13px 19px;
display: flex;
max-width: 216px;
width: 100%;
max-height: 93px;
}
.check__review:nth-child(5){
bottom: 11%;
right: 8%;
}
.check__review:nth-child(2){
top: 11%;
left: 7%;
}
.check__review:nth-child(3){
top: 10.5%;
right: 13%;
}
.check__review:nth-child(4){
bottom: 35%;
left: 3%;
}
.check__review__ava{
width: 58px;
height: 65px;
}
.review__text p{
color: #02283C;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 25.2px */
}
.review__text span{
margin-right: 5px;
}
.review__text span, .review__text em{
color: #02283C;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 16.8px */
}
.review__text{
display: flex;
align-items: flex-start;
flex-direction: column;
margin-left: 10px;
white-space: nowrap;
}
.review__text img{
width: 65px;
height: 13px;
margin-top: 3px;
}
/*==========================================PROJECT=====================================*/
.project{
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(19, 206, 235, 0.20) 100%), #02283C;
margin-top: 82px;
padding-top: 50px;
padding-bottom: 38px;
position: relative;
z-index: 2;
}
.project::after{
content: "";
position: absolute;
bottom: 0;
right: 0;
max-width: 620px;
max-height: 330px;
width: 100%;
height: 100%;
background: url("../images/projectHouseBg.png") no-repeat center / cover;
z-index: -1;
}
.project__list__wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(173px, 1fr));
gap: 12px;
max-width: 1400px;
margin-top: 34px;
margin-bottom: 72px;
}
.project__list {
display: contents;
}
.project__list__item{
flex: 1;
border-radius: 16px;
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 24px */
width: 100%;
height: 100%;
}
.project__list:first-child .project__list__item:nth-child(1) {
.project__card__front {
background: url("../images/projectRoofing.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectRoofingBack.png") no-repeat center / cover;
}
}
.project__list:first-child .project__list__item:nth-child(2){
.project__card__front {
background: url("../images/projectWindows.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectWindowsBack.png") no-repeat center / cover;
}
}
.project__list:first-child .project__list__item:nth-child(3){
.project__card__front {
background: url("../images/projectSolar.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectSolarBack.png") no-repeat center / cover;
}
}
.project__list:first-child .project__list__item:nth-child(4){
.project__card__front {
background: url("../images/projectBathroom.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectBathroomBack.png") no-repeat center / cover;
}
}
.project__list:first-child .project__list__item:nth-child(5){
.project__card__front {
background: url("../images/projectKitchen.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectKitchenBack.png") no-repeat center / cover;
}
}
.project__list:first-child .project__list__item:nth-child(6){
.project__card__front {
background: url("../images/projectHvac.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectHvacBack.png") no-repeat center / cover;
}
}
.project__list:first-child .project__list__item:nth-child(7){
.project__card__front {
background: url("../images/projectGutter.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectGutterBack.png") no-repeat center / cover;
}
}
.project__list:last-child .project__list__item:nth-child(1){
.project__card__front {
background: url("../images/projectFlooring.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectFlooringBack.png") no-repeat center / cover;
}
}
.project__list:last-child .project__list__item:nth-child(2){
.project__card__front {
background: url("../images/projectSiding.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectSidingBack.png") no-repeat center / cover;
}
}
.project__list:last-child .project__list__item:nth-child(3){
.project__card__front {
background: url("../images/projectWalkInTabs.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectWalkInTabsBack.png") no-repeat center / cover;
}
}
.project__list:last-child .project__list__item:nth-child(4){
.project__card__front {
background: url("../images/projectPlumbing.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectPlumbingBack.png") no-repeat center / cover;
}
}
.project__list:last-child .project__list__item:nth-child(5){
.project__card__front {
background: url("../images/projectHomeWarranty.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectHomeWarrantyBack.png") no-repeat center / cover;
}
}
.project__list:last-child .project__list__item:nth-child(6){
.project__card__front {
background: url("../images/projectHomeSecurity.png") no-repeat center / cover;
}
.project__card__back {
background: url("../images/projectHomeSecurityBack.png") no-repeat center / cover;
}
}
.project__list__item {
perspective: 1200px;
}
.project__card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(.4,.2,.2,1);
border-radius: 16px;
min-width: 173px;
min-height: 192px;
}
.project__list__item:hover .project__card {
transform: rotateX(180deg);
}
.project__card__front,
.project__card__back {
position: absolute;
inset: 0;
border-radius: 16px;
backface-visibility: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 600;
padding: 22px;
text-align: center;
}
.project__card__back {
transform: rotateX(180deg);
}
.project__title{
color: #FFF;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
}
.project__descr{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
margin-top: 2px;
}
.project__form{
display: flex;
padding: 20px 40px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-radius: 20px;
border: 1px solid #C4DCFF;
background: linear-gradient(180deg, rgba(220, 234, 255, 0.20) 0%, rgba(151, 193, 255, 0.20) 100%);
box-shadow: 0 11.392px 22.336px 0 rgba(53, 106, 185, 0.09), 0 -2px 1px 0 rgba(151, 193, 255, 0.40) inset;
backdrop-filter: blur(2px);
max-width: 956px;
}
.project__form p{
color: #FFF;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
}
.project__form__text{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
margin-top: 2px;
}
.project__form__btns{
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 20px;
width: 100%;
}
.project__form__group{
display: flex;
align-items: flex-start;
gap: 10px;
width: 50%;
}
.project__form__btns .btn__default{
width: 50%;
min-height: 62px;
}
/*=============================================TRUSTED=============================================*/
.trusted{
background: url("../images/dottedBg.png") no-repeat center / cover;
padding-top: 50px;
padding-bottom: 80px;
}
.trusted .tab-pane.fade.show.active{
margin-top: 19px;
}
.trusted__marquee {
position: relative;
display: flex;
overflow: hidden;
user-select: none;
overflow-x: hidden;
max-width: 100vw;
}
.trusted__marquee:before,
.trusted__marquee:after {
content: "";
height: 100%;
top: 0;
width: 10%;
position: absolute;
z-index: 1;
pointer-events: none;
}
.trusted__marquee:before {
left: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
}
.trusted__marquee:after {
right: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.trusted__list {
flex-shrink: 0;
display: flex;
gap: 28px;
counter-reset: item;
justify-content: space-around;
min-width: 100%;
margin-top: 14px;
margin-bottom: 86px;
width: max-content;
min-width: unset;
}
.trusted__list__item img{
width: 166px;
height: 108px;
}
.trusted__list__item {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.1s ease-in-out;
}
.marquee {
animation: scroll 20s linear infinite;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50%));
}
}
/*===========================================REVIEWS=============================================*/
.reviews{
padding-top: 50px;
padding-bottom: 36px;
background: url("../images/homeownerBg.webp") no-repeat center / cover;
}
.reviews__title{
color: #FFF;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
}
.reviews__slider__wrapper{
position: relative;
margin-top: 181px;
}
.reviews__slider__wrapper::after {
content: "";
position: absolute;
width: 372px;
height: 500px;
top: -54.8%;
left: 50%;
transform: translateX(-50%);
background-image: url("../images/iphone.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
overflow: hidden;
}
.reviews__slider{
z-index: 2;
}
.reviews__slide{
display: flex;
width: 100%;
max-width: 452px;
padding: 20px 40px;
flex-direction: column;
align-items: center;
gap: 10px;
border-radius: 20px;
background: #FFF;
flex: 1;
min-height: 270px;
max-height: 270px;
}
.reviews__slide__header{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.slide__ava{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.slide__ava img{
width: 78px;
height: 78px;
}
.slide__text{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.slide__text p{
color: #02283C;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 19px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 26.6px */
}
.slide__text span{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
text-transform: uppercase;
border-radius: 10px;
background: linear-gradient(90deg, #1C8DCA 0%, #004FAB 100%);
padding: 4px 10px;
}
.reviews__slide__star{
width: 121px;
height: 25px;
}
.reviews__slide__text{
color: #02283C;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
margin-top: 10px;
}
.slick-slide {
margin: 0 20px;
}
/*.slick-list {*/
/* margin: 0 -20px;*/
/*}*/
.slick-dots{
bottom: -50px;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 3px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li{
margin: 0;
}
.slick-dots li.slick-active button:before {
opacity: 1;
color: #1B8AC8;
}
.slick-dots li button:before{
color: #FFF;
opacity: .75;
}
.reviews__slide.slick-center {
background: rgba(255, 255, 255, 0.30);
backdrop-filter: blur(15px);
border: 1px solid #FFF;
}
.slick-track {
display: flex;
}
.slick-slide > div {
height: 100%;
}
.slick-center .reviews__slide {
background: rgba(255, 255, 255, 0.30);
}
/*===========================================STARTED=============================================*/
.started{
background: #E6F2FF;
padding-top: 50px;
padding-bottom: 97px;
}
.started__cards__wrapper{
display: flex;
align-items: center;
gap: 74px;
justify-content: center;
margin-top: 55px;
}
.started__card{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
border-radius: 20px;
background: #FFF;
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.17);
position: relative;
z-index: 2;
}
.started__card::before, .started__card::after{
content: "";
position: absolute;
border-radius: 20px;
background: rgba(255, 255, 255, 0.70);
padding: 20px;
transform: rotate(-2.418deg);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.started__card::after{
transform: rotate(-10.276deg);
}
.started__card__img{
max-width: 450px;
max-height: 251px;
}
.started__card__img img{
width: 100%;
height: 100%;
object-fit: cover;
}
.started__card .btn__ghost{
width: 100%;
}
/*==========================================FOOTER======================================*/
.footer{
background: #E6F2FF;
padding-top: 30px;
padding-bottom: 30px;
}
.footer__wrapper{
display: flex;
flex-direction: column;
gap: 63px;
}
.footer__list{
display: flex;
width: 100%;
justify-content: space-between;
gap: 16px;
}
.footer__logo__group{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 17px;
}
.footer__text{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
}
.footer__socials__list{
display: flex;
align-items: center;
gap: 10px;
}
.footer__nav{
display: flex;
width: 100%;
justify-content: space-between;
}
.footer__nav__list{
display: flex;
gap: 52px;
align-items: center;
}
.footer__nav__list__item a{
color: #054B71;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
text-decoration: none;
}
.footer__services__wrapper{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.footer__services__wrapper.mobile{
display: none;
}
.footer__logo__group.mobile{
display: none;
}
.footer__title{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 25.2px */
text-transform: uppercase;
}
.footer__services__list__wrapper{
display: flex;
gap: 20px;
align-items: flex-start;
}
.footer__services__list{
display: flex;
flex-direction: column;
gap: 20px;
}
.footer__services__list__item a{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
text-decoration: none;
}
.footer__btns__wrapper{
display: flex;
flex-direction: column;
gap: 16px;
max-width: 214px;
}
.footer__btns__wrapper button{
width: 100%;
}
.footer__nav .footer__text{
margin-top: -16px;
}
/*=========================================CONTACT-FORM-MODAL=======================================*/
.contact__modal {
position: fixed;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility .3s ease;
}
.contact__modal.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal__content {
position: relative;
min-width: 872px;
aspect-ratio: 872 / 646;
box-sizing: border-box;
transform: scale(0.95);
transition: transform .3s ease;
}
.modal.active .modal__content {
transform: scale(1);
}
.modal__body {
height: 100%;
padding: 40px;
background: url("../images/modalBg.png") no-repeat center / contain;
clip-path: url(#modalBg);
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
}
.modal__close {
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
background: transparent;
border: none;
}
.contact__modal h3{
color: #054B71;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
}
.contact__modal p{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 26.4px */
margin-bottom: 16px;
margin-top: 16px;
}
.modal__group{
display: flex;
align-items: flex-start;
gap: 24px;
width: 100%;
}
.modal__input{
padding: 22px 14px;
border-radius: 8px;
border: 1px solid #D5D7DA;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
color: #000;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 112.5% */
width: 50%;
}
.modal__group input::placeholder{
color: #717680;
font-family: "Poppinsi", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 112.5% */
}
.modal__group__wrapper{
display: flex;
flex-direction: column;
gap: 16px;
}
.modal__input__wrapper{
width: 50%;
}
.modal__input__wrapper .modal__input{
width: 100%;
}
.checkbox__group{
display: flex;
align-items: center;
gap: 12px;
color: #535862;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 8px;
}
.contact__modal .btn__default{
align-self: center;
min-width: 388px;
margin-top: 20px;
}
.modal__select {
width: 100%;
height: 62px;
padding: 22px 48px 22px 14px;
color: #717680;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 112.5% */
background-color: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
outline: none;
background-image: url("../images/selectArrow.svg");
background-repeat: no-repeat;
background-position: right 18px center;
border-radius: 8px;
border: 1px solid #D5D7DA;
box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.modal__select option[disabled] {
color: rgba(0, 0, 0, 0.4);
}
.modal__input__wrapper.modal__input__wrapper{
width: 100%;
}
.contact-form{
display: flex;
flex-direction: column;
}
.checkbox__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.checkbox__label {
position: relative;
padding-left: 24px;
font-size: 16px;
color: #535862;
cursor: pointer;
}
.checkbox__label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 16px;
height: 16px;
border: 1px solid #D5D7DA;
border-radius: 4px;
transform: translateY(-50%);
transition: border .2s ease, background .2s ease;
}
.checkbox__label::after {
content: "";
position: absolute;
left: 3px;
top: 45%;
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translateY(-50%) rotate(-45deg);
opacity: 0;
transition: opacity .2s ease;
}
.checkbox__input:checked + .checkbox__label::before {
background: #054B71;
border-color: #054B71;
}
.checkbox__input:checked + .checkbox__label::after {
opacity: 1;
}
/*===========================================ABOUT-US-PAGE================================================*/
/*=================================================ABOUT====================================================*/
.about {
position: relative;
min-height: 900px;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 28px;
justify-content: flex-end;
}
.container:has(.about){
padding-bottom: 20px;
}
.about__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: url(#heroAboutUs);
z-index: -1;
}
.about__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about__content{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 74px;
margin-bottom: 45px;
}
.about__form{
padding: 40px;
display: flex;
flex-direction: column;
gap: 20px;
max-width: 621px;
margin-top: 15px;
border-radius: 20px;
background: rgba(44, 52, 68, 0.51);
min-height: 442px;
}
.about__form .btn__default{
min-height: 62px;
}
.about__text{
color: #FFF;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 25.2px */
}
.about__text a{
color: #FFF;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 140%;
text-decoration: none;
}
/*===========================================DELIVERY================================================*/
.deliver{
background: url("../images/dottedBg.png") no-repeat center / cover;
padding-top: 50px;
padding-bottom: 80px;
}
.deliver .title{
padding-bottom: 20px;
}
.deliver__content{
display: flex;
justify-content: space-between;
gap: 80px;
margin-top: 20px;
align-items: center;
padding-right: 80px;
padding-left: 80px;
}
.deliver__card{
border-radius: 24px;
border: 1px solid #CBD4DB;
background: #F5F7F9;
transform: rotate(-10.25deg);
padding: 30px;
display: flex;
flex-direction: column;
gap: 9px;
max-width: 375px;
position: relative;
}
.deliver__card::after{
content: "";
position: absolute;
top: 15px;
right: 15px;
width: 22px;
height: 22px;
transform: rotate(10.25deg);
border-radius: 50%;
background: #FFF;
border: 1px solid #CBD4DB;
}
.deliver__card:last-child{
transform: rotate(10.25deg);
}
.deliver__card__title{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 36px */
}
.deliver__card__descr{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 20.8px */
}
.deliver__card__img{
max-width: 317px;
max-height: 186px;
}
.deliver__card__img img{
width: 100%;
height: 100%;
object-fit: cover;
}
.deliver__img{
position: relative;
}
.deliver__img::before {
content: "";
position: absolute;
top: 0;
left: -70%;
width: 96px;
height: 82px;
background: url("../images/deliverLeft.svg") no-repeat center / contain;
}
.deliver__img::after{
content: "";
position: absolute;
top: 0;
right: -70%;
width: 96px;
height: 82px;
background: url("../images/deliverRight.svg") no-repeat center / contain;
}
/*==============================================PERFORMANCE============================================*/
.performance{
background: url("../images/performanceBg.webp") no-repeat center / cover;
padding-top: 50px;
padding-bottom: 50px;
}
.performance__title{
color: #FFF;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 34px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
margin-bottom: 2px;
}
.performance__descr{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
}
.performance__list{
margin-top: 35px;
display: flex;
justify-content: center;
align-items: center;
gap: 23px;
flex-wrap: wrap;
}
.performance__list__item{
border-radius: 20px;
background: rgba(44, 52, 68, 0.51);
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 232px;
max-width: 232px;
min-height: 232px;
max-height: 232px;
flex: 1;
}
.performance__list__item__img{
display: flex;
padding: 14px;
align-items: center;
justify-content: center;
border-radius: 15px;
border: 1px solid #CAD7DB;
background: linear-gradient(180deg, #F4F8FE 0%, #B4E3F3 100%);
}
.performance__list__item__title{
text-align: center;
font-family: "Inter", sans-serif;
font-size: 46px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 64px */
text-transform: uppercase;
background: var(--turquose, linear-gradient(180deg, #B9EBFF 0%, #3CC2D5 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}
.performance__list__item__text{
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 24px */
}
/*============================================PARTNER======================================*/
.partner {
position: relative;
padding-top: 120px;
padding-bottom: 120px;
overflow: hidden;
}
.partner__slide {
display: flex !important;
flex-direction: column;
justify-content: space-between;
width: 303px;
height: 292px;
padding: 20px;
border-radius: 20px;
background: #FFF;
box-shadow: 0 4px 14px rgba(0,0,0,.17);
box-sizing: border-box;
}
.partner__slider .slick-track {
display: flex;
}
.partner__slider .slick-slide {
display: flex;
justify-content: space-between;
height: auto;
gap: 10px;
}
.partner__slide__img{
max-width: 263px;
max-height: 154px;
border-radius: 10px;
}
.partner__slide__img img{
width: 100%;
height: 100%;
object-fit: contain;
}
.partner__slide__text{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 20.8px */
}
.partner__img {
clip-path: url(#partnersBg);
z-index: -1;
position: absolute;
inset: -80px;
overflow: hidden;
pointer-events: none;
}
.partner__img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.partner__img {
max-width: 1540px;
margin: 0 auto;
}
.partner__slider__wrapper{
margin-top: 52px;
}
.partner__slider .slick-dots{
bottom: 115%;
right: -40%;
}
.partner__slider .slick-slide {
box-sizing: border-box;
}
.partner__slider .slick-track {
display: flex;
}
/*.partner__img.mobile{*/
/* display: none;*/
/*}*/
/*==============================================OPTIMAL===============================================*/
.optimal{
padding-top: 50px;
padding-bottom: 69px;
}
.optimal__content__bottom__mobile{
display: none;
}
.optimal__content__mobile{
display: none;
}
.optimal__list__wrapper{
display: flex;
flex-direction: column;
position: relative;
gap: 46px;
margin-top: 58px;
margin-bottom: 10px;
}
.optimal__list{
display: flex;
max-width: 575px;
justify-content: space-between;
position: relative;
gap: 16px;
}
.optimal__list:first-child::after{
content: "";
position: absolute;
bottom: -24px;
left: 1%;
background: url("../images/optimalLine.png") no-repeat center / contain;
width: 100%;
height: 22px;
}
.optimal__list:first-child{
align-items: flex-end;
}
.optimal__list:last-child{
align-items: flex-start;
}
.optimal__list__item{
display: flex;
flex-direction: column;
gap: 39px;
align-items: center;
}
.optimal__list__item span{
color: #35B1F5;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 18px */
}
.optimal__list__item__card{
display: flex;
max-width: 196px;
padding: 10px 14px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-radius: 20px;
border: 1px solid #70D3E6;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(168, 226, 255, 0.25);
min-height: 126px;
}
.optimal__list__item__card p{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 20.8px */
}
.optimal__item__img{
border-radius: 15px;
border: 1px solid #E9F5F8;
background: linear-gradient(180deg, #F4F8FE 0%, #B4D2F3 100%);
width: 47px;
height: 47px;
display: flex;
justify-content: center;
}
.optimal__content{
display: flex;
align-items: center;
margin-left: 40px;
}
.optimal__logo{
margin-right: 40px;
max-width: 131px;
max-height: 44px;
}
.optimal__logo img{
width: 100%;
height: 100%;
object-fit: cover;
}
.optimal__content .steps__content__block{
margin-top: 0;
}
.optimal__content .steps__content{
margin-left: 20px;
margin-top: 45px;
}
.optimal__content__bottom{
display: flex;
width: 100%;
justify-content: space-between;
}
.optimal__bottom__list {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
min-height: 420px;
}
.optimal__bottom__list__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 180px;
text-align: center;
z-index: 2;
}
.item--1 {
transform: translate(-65px, 15px);
max-width: 137px;
}
.item--2 {
transform: translate(-35px, 35px);
max-width: 137px;
}
.item--3 {
transform: translate(-10px, 15px);
max-width: 137px;
}
.item--4 {
transform: translate(15px, -25px);
max-width: 169px;
}
.item--5 {
transform: translate(80px, -80px);
max-width: 137px;
}
.optimal__bottom__list::before {
content: "";
position: absolute;
top: 32%;
left: -10%;
width: 130%;
height: 160px;
background: url(../images/serchEnginesLine.png) no-repeat center / contain;
z-index: 1;
}
.optimal__bottom__list__item span{
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background: linear-gradient(180deg, #D2D2D2 0%, #A2A2A2 100%);
border-radius: 50%;
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 22px */
}
.optimal__bottom__list__item p{
display: flex;
align-items: flex-start;
padding: 10px 14px;
border-radius: 20px;
border: 1px solid #D8D8D8;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(208, 208, 208, 0.25);
color: #646464;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 15.6px */
}
.optimal__content__bottom__img{
display: flex;
gap: 7px;
max-height: 42px;
align-items: center;
transform: translate(40px, 150px);
}
.optimal__bottom__img{
width: 37px;
height: 37px;
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
border: 1px solid #93ACE2;
background: #FFF;
}
.optimal__content__bottom__img p{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 20.8px */
}
.optimal__content__bottom__block{
padding: 12px 16px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 90px;
background: #F3F3F3;
max-height: 78px;
min-width: 206px;
transform: translate(-75px, 140px);
z-index: 2;
}
.optimal__bottom__block__group{
display: flex;
align-items: center;
}
.optimal__bottom__block__group p{
color: #02283C;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 130%;
}
.optimal__content__bottom__block span{
color: #565656;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
}
.optimal__content__bottom.second{
transform: translateY(-45%);
}
.optimal__content__bottom.second .optimal__bottom__list::before{
content: "";
position: absolute;
top: 5%;
left: -5%;
width: 119%;
height: 160px;
background: url(../images/aiToolsLine.png) no-repeat center / contain;
z-index: 1;
}
.optimal__content__bottom.second .optimal__bottom__list__item span, .optimal__bottom__mobile__list:first-child .optimal__bottom__list__item span{
background: linear-gradient(180deg, #C7E3D2 0%, #AFC6B8 100%);
}
.optimal__content__bottom.second .optimal__bottom__list__item p, .optimal__bottom__mobile__list:first-child .optimal__bottom__list__item p{
border: 1px solid #DFEEE5;
color: #6A7770;
}
.optimal__content__bottom.second .optimal__content__bottom__block{
background: #DFEEE5;
transform: translate(-75px, 110px);
}
.optimal__content__bottom.second .optimal__content__bottom__block span{
color: #6E6F6E;
}
.optimal__content__bottom.second .item--1 {
transform: translate(-65px, -15px);
max-width: 159px;
}
.optimal__content__bottom.second .item--2 {
transform: translate(35px, -15px);
max-width: 168px;
}
.optimal__content__bottom.second .item--3 {
transform: translate(40px, -85px);
max-width: 137px;
}
.optimal__content__bottom.second .item--4 {
transform: translate(90px, -115px);
max-width: 166px;
}
.optimal__content__bottom.second .item--5 {
transform: translate(80px, -15px);
max-width: 137px;
}
.optimal__started{
border-radius: 24px;
border: 1px solid #CBD4DB;
background: #F0F7FF;
padding: 51px 70px 40px 88px;
position: relative;
}
.optimal__started__items__wrapper.mobile{
display: none;
}
.optimal__started::before{
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 62px;
height: 100%;
background: url(../images/startedLine.png) no-repeat center / contain;
}
.optimal__started__title{
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
margin-bottom: 34px;
}
.optimal__started__item{
display: flex;
gap: 10px;
padding: 14px;
border-radius: 20px;
border: 1px solid #70D3E6;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(168, 226, 255, 0.25);
max-width: 455px;
}
.optimal__started__item__img{
width: 67px;
height: 67px;
padding: 13px;
border-radius: 15px;
border: 1px solid #CAD7DB;
background: linear-gradient(180deg, #F4F8FE 0%, #B4E3F3 100%);
display: flex;
justify-content: center;
align-items: center;
}
.optimal__started__item__text{
display: flex;
flex-direction: column;
gap: 9px;
}
.optimal__started__item p{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 36px */
}
.optimal__started__item__text span{
color: #054B71;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 20.8px */
}
.optimal__started__item__text em{
color: #32BFD2;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 130%;
}
.optimal__started__items{
display: flex;
justify-content: space-between;
align-items: center;
}
.optimal__started__items:last-child{
margin-top: 30px;
justify-content: flex-end;
}
.optimal__started__items:last-child .optimal__started__item{
margin-right: 100px;
}
.optimal__started__items__wrapper{
position: relative;
z-index: 2;
}
.optimal__started__items__wrapper::before{
content: "";
position: absolute;
top: 5%;
left: 4%;
width: 100%;
height: 60%;
background: url(../images/startedListLine.png) no-repeat center / contain;
z-index: -1;
}
/*==========================================CONTRACTORS=========================================*/
.contractors {
position: relative;
min-height: 900px;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 28px;
justify-content: flex-start;
}
.container:has(.contractors){
padding-bottom: 45px;
}
.contractors__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: url(#contractorsBg);
z-index: -1;
}
.contractors__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contractors__content{
display: flex;
flex-direction: column;
margin-top: 136px;
margin-left: 74px;
justify-content: flex-start;
align-items: flex-start;
max-width: 845px;
}
.contractors__content .btn__default{
width: 100%;
max-width: 510px;
min-height: 62px;
}
.contractors__subtitle{
color: #FFF;
font-size: 34px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 44.2px */
text-transform: uppercase;
margin-bottom: 2px;
margin-top: 20px;
}
.contractors__text{
color: #FFF;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
margin-bottom: 20px;
}
.project.contractors .project__form__btns .btn__default{
width: 100%;
}
.optimal.contractors{
padding-top: 79px;
padding-bottom: 79px;
background: url("../images/dottedBg.png") no-repeat center / cover;
min-height: fit-content;
}
.project.contractors{
position: relative;
}
.project.contractors .container{
justify-content: flex-start;
}
.project.contractors::before{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 660px;
height: 365px;
background: url("../images/tradesHouse.png") no-repeat center / contain;
}
.project__form span {
color: #FFF;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%;
margin-top: 2px;
}
/*=====================================MEDIA====================================*/
@media (max-width: 1000px) {
.footer__text::after, .footer__text::before{
width: 20%;
}
}
@media (max-width: 768px) {
.header{
padding-bottom: 0;
}
.header__nav{
margin: 31px auto 36px auto;
}
.header__btn{
display: none;
}
.header__btn.mobile{
display: block;
padding: 10px 20px;
}
.section {
padding: 20px 15px;
margin-bottom: 30px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 22px;
}
.do-not-sell-page .section {
padding: 20px 15px;
margin-bottom: 30px;
}
.do-not-sell-page h1 {
font-size: 28px;
}
.form-container {
padding: 20px 15px;
}
table {
display: block;
overflow-x: auto;
}
.footer__links__list{
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer__wrapper{
padding: 48px 12px 48px 12px;
}
}
@media (max-width: 450px) {
.header__nav {
margin: 15px auto 15px auto;
}
.footer__text::after, .footer__text::before{
width: 10%;
}
}
/*=============================================Index/About-Us-MEDIA=================================================*/
/*=============================================MEDIA=================================================*/
@media (max-width: 1430px) {
.deliver__card:last-child, .deliver__card::after{
transform: rotate(5.25deg);
}
.deliver__card{
transform: rotate(-5.25deg);
}
.deliver__content{
align-items: flex-start;
}
.deliver__content{
margin-top: 70px;
}
.deliver__img::before{
top: -40%;
left: -40%;
}
.deliver__img::after{
top: -40%;
right: -40%;
}
.item--1{
transform: translate(-105px, 15px);
}
.item--2 {
transform: translate(-85px, 35px)
}
.item--3 {
transform: translate(-60px, 15px);
}
.item--4 {
transform: translate(-55px, -25px);
}
.item--5 {
transform: translate(-50px, -80px);
}
.optimal__content__bottom.second .item--1 {
transform: translate(-95px, -15px);
}
.optimal__content__bottom.second .item--2 {
transform: translate(-25px, -15px);
}
.optimal__content__bottom.second .item--3 {
transform: translate(0px, -85px);
}
.optimal__content__bottom.second .item--4 {
transform: translate(10px, -115px);
}
.optimal__content__bottom.second .item--5 {
transform: translate(-60px, -15px);
}
.optimal__bottom__list__item p{
font-size: 8px;
}
.optimal__content__bottom__block{
padding: 6px;
min-width: 120px;
max-width: 120px;
max-height: 48px;
transform: translate(-75px, 155px);
}
.optimal__content__bottom.second .optimal__content__bottom__block{
transform: translate(-75px, 125px);
}
.optimal__bottom__block__group p, .optimal__content__bottom__block span{
font-size: 8px;
}
.optimal__bottom__block__group img{
width: 20px;
height: 20px;
}
}
@media (max-width: 1200px) {
.nav.header {
position: fixed;
top: 0;
right: 0;
width: 320px;
height: 100vh;
background: #fff;
flex-direction: column;
padding: 100px 24px 24px;
gap: 8px;
transform: translateX(100%);
transition: transform 0.4s ease;
z-index: 11;
box-shadow: -4px 0 20px rgba(0,0,0,0.1);
justify-content: flex-start;
align-items: center;
}
.nav.header.active {
transform: translateX(0);
}
.nav.header.active nav__item__group{
display: flex;
}
.nav.header.active .nav__item{
padding: 18px;
width: 100%;
border-radius: 8px;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.nav.header.active .nav__item:hover{
background: #F1F8FB;
}
.nav.header.active .nav__item__group{
display: flex;
}
.header .dropdown-menu.show{
flex-direction: column;
}
.burger {
display: flex;
}
.btn__group {
display: none;
}
.hero__image{
display: none;
}
.hero{
background: url("../images/heroBg.webp") no-repeat center / cover;
border-radius: 20px;
margin-top: 70px;
}
.logo {
top: 0px;
}
.home__needs::after {
top: -10px;
}
.steps__progress__list{
width: 70%;
}
.steps__progress__list::before{
width: 90%;
}
.steps__card__list{
flex-direction: column;
}
.check__review:nth-child(4) {
bottom: 5%;
}
.footer__services__list__wrapper{
gap: 8px;
}
.about{
margin-top: 70px;
background: url("../images/aboutUsBg.webp") no-repeat center / cover;
border-radius: 20px;
}
.contractors{
margin-top: 70px;
background: url("../images/contractorsBg.webp") no-repeat center / cover;
border-radius: 20px;
}
.project.contractors {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(19, 206, 235, 0.20) 100%), #02283C;
border-radius: 0px;
}
.project.contractors, .optimal.contractors{
margin-top: 0;
}
.about__image{
display: none;
}
.deliver__content{
gap: 40px;
}
.deliver__img img{
width: 170px;
height: 170px;
}
.deliver__img::before, .deliver__img::after{
top: -50%;
}
.deliver__card{
padding: 13px;
}
.deliver__card::after{
right: 5px;
}
.optimal__bottom__list__item p {
font-size: 6px;
}
.item--3 {
transform: translate(-0px, 15px);
max-width: 67px;
}
.item--5 {
transform: translate(20px, -45px);
max-width: 67px;
}
.item--4 {
transform: translate(15px, -5px);
max-width: 84px;
}
.item--2 {
transform: translate(-5px, 10px);
max-width: 67px;
}
.item--1 {
transform: translate(-25px, 20px);
max-width: 67px;
}
.optimal__bottom__list__item p{
padding: 7px;
}
.optimal__bottom__list__item span{
font-size: 11px;
width: 15px;
height: 15px;
}
.optimal__content__bottom__block{
transform: translate(-45px, 175px);
}
.optimal__content__bottom.second .item--1{
max-width: 67px;
transform: translate(-20px, -55px);
}
.optimal__content__bottom.second .item--2{
max-width: 83px;
transform: translate(-25px, -100px);
}
.optimal__content__bottom.second .item--3{
max-width: 67px;
}
.optimal__content__bottom.second .item--4{
max-width: 82px;
}
.optimal__content__bottom.second .item--5{
max-width: 67px;
transform: translate(0px, -55px);
}
.optimal__content__bottom.second .optimal__content__bottom__block {
transform: translate(-55px, 100px);
}
.optimal__started__items__wrapper.mobile::before{
display: none;
}
.optimal__started__items__wrapper, .optimal__started__items__wrapper:last-child{
display: none;
}
.optimal__started__items__wrapper.mobile{
display: flex;
flex-direction: column;
}
.optimal__started__mobile__list{
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.optimal__started__item{
flex-direction: column;
}
.optimal__started__item__head{
display: flex;
align-items: center;
gap: 14px;
}
.optimal__started__item p{
font-size: 18px;
}
.optimal__started__item__text span{
font-size: 12px;
}
.optimal__started__item__img {
width: 44px;
height: 44px;
}
.optimal__started__item__img img{
width: 27px;
height: 27px;
}
.optimal__started{
padding: 26px 22px 40px 45px;
}
.optimal__started::before{
left: -2%;
}
.partner__img{
display: none;
}
.partner{
background: #D6E8F0;
padding-top: 30px;
padding-bottom: 30px;
}
.partner__slider .slick-dots{
bottom: -40px;
right: 0;
}
}
@media (max-width: 1000px) {
.main__title, .main__title__accent{
font-size: 36px;
}
.title{
font-size: 30px;
}
.hero{
padding: 16px;
}
.footer__list{
flex-direction: column;
align-items: center;
}
.about__content{
align-items: center;
margin: auto 16px auto 16px;
}
.deliver__content{
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
padding-right: 30px;
padding-left: 30px;
}
.deliver__img img{
width: 110px;
height: 110px;
}
.deliver__img::before, .deliver__img::after{
top: 0;
}
.deliver__img::before{
left: -80%;
transform: scaleX(-1) rotate(-245deg);
}
.deliver__img::after{
right: -90%;
transform: rotate(45deg);
top: 40%;
}
.deliver__card__title{
font-size: 24px;
}
.deliver__card {
transform: rotate(-3deg);
}
.deliver__card:last-child{
transform: rotate(3deg);
}
.performance__list__item__text{
font-size: 12px;
}
.modal__content{
min-width: 680px;
aspect-ratio: auto;
}
.modal__body{
background: url(../images/modalBg.png) no-repeat center / cover;
overflow-y: auto;
}
.contractors__subtitle{
font-size: 22px;
}
}
@media (max-width: 850px) {
.tab__content__item__title, .card__list__item__subtitle{
font-size: 16px;
}
.card__list__item__title, .title, .check__title, .project__title, .project__form p, .reviews__title{
font-size: 24px;
}
.main__title, .main__title__accent{
font-size: 28px;
}
.hero__group{
flex-direction: column;
}
.hero__group .dropdown, .hero__group .zip__input__wrapper{
width: 100%;
}
.hero__form__group{
min-width: 100%;
padding: 20px 30px;
}
/*.steps__content{*/
/* display: none;*/
/*}*/
.steps__progress__list {
width: 95%;
margin-top: 10px;
margin-bottom: 10px;
}
.check__review:nth-child(5), .check__review:nth-child(3){
display: none;
}
.check__review:nth-child(2) {
top: 3%;
}
.check__review:nth-child(4) {
left: 50%;
}
.project__form__btns, .project__form__group{
flex-direction: column;
width: 100%;
}
.hero__group, .zip__input__wrapper{
max-width: 100%;
}
.project__form__btns .btn__default{
width: 100%;
}
.project__form{
padding: 16px;
}
.zip__input__wrapper{
width: 100%;
}
.slick-slide {
margin: 0 8px;
}
.reviews__slide__header{
flex-direction: column;
}
.reviews__slide{
padding: 16px;
min-height: 339px;
max-height: 339px;
}
.reviews__slider__wrapper::after{
top: -45%;
width: 316px;
}
.started__cards__wrapper{
flex-direction: column;
}
.footer__nav{
flex-direction: column-reverse;
align-items: center;
}
.footer__nav .footer__text{
margin-top: 20px;
}
.footer__nav__list{
gap: 16px;
flex-direction: column;
}
.hero__form__group .btn__default{
max-width: 100%;
}
.about{
min-height: 700px;
}
.about__text, .about__text a{
font-size: 16px;
}
}
@media (max-width: 744px){
.home__needs .nav{
box-shadow: none;
background: inherit;
}
.contractors{
min-height: 600px;
}
.contractors__content{
max-width: 530px;
margin: auto 16px auto 16px;
}
.nav-tabs .nav-link{
border-radius: 80px;
background: #FFF;
box-shadow: 0 0 24px 0 rgba(0, 135, 179, 0.30) inset;
}
.tab-pane.fade.show.active {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.optimal__content__bottom, .optimal__content__bottom.second{
display: none;
}
.how__find .steps__content{
display: none;
}
.optimal__list__wrapper{
flex-direction: row;
gap: 54px;
}
.optimal__list{
flex-direction: column;
}
.optimal__logo{
display: none;
}
.optimal__content{
justify-content: center;
flex-direction: column;
margin-bottom: 60px;
}
.optimal__list:first-child{
gap: 68px;
}
.optimal__list:last-child{
gap: 80px;
}
.optimal__list:first-child::after{
background: url("../images/stepsLineVert.png") no-repeat center / contain;
height: 100%;
bottom: 0;
left: 115%;
transform: translateX(-50%);
}
.optimal__list__item__card p{
font-size: 14px;
}
.optimal__list__item span{
font-size: 16px;
}
.optimal__content__bottom__mobile{
display: flex;
flex-direction: column;
align-items: center;
}
.optimal__bottom__mobile__title{
display: flex;
justify-content: space-between;
width: 100%;
max-width: 290px;
margin: 0 auto;
}
.optimal__content__bottom__img{
transform: translate(0, 0);
}
.optimal__bottom__mobile__group{
display: flex;
align-items: center;
}
.optimal__bottom__mobile__list{
position: relative;
gap: 80px;
display: flex;
flex-direction: column;
}
.optimal__bottom__mobile__list:first-child::before{
content: "";
position: absolute;
top: 50%;
left: 30%;
width: 100%;
height: 100%;
background: url("../images/optimalGreyVert.png") no-repeat center / contain;
transform: translateY(-50%);
}
.optimal__bottom__mobile__list:last-child::before{
content: "";
position: absolute;
top: 52.9%;
left: -25%;
width: 100%;
height: 100%;
background: url("../images/optimalGreenVert.png") no-repeat center / contain;
transform: translateY(-50%);
}
.optimal__bottom__mobile__list .item--1{
transform: translate(-20px, 20px);
}
.optimal__bottom__list__item.item--1{
flex-direction: row-reverse;
max-width: none;
transform: translate(-90px, -20px);
}
.optimal__bottom__list__item.item--2{
flex-direction: row;
max-width: none;
transform: translate(-35px, 15px);
}
.optimal__bottom__list__item.item--3{
max-width: 137px;
transform: translate(5px, -30px);
}
.optimal__bottom__list__item.item--4{
flex-direction: column-reverse;
max-width: none;
transform: translate(20px, -70px);
}
.optimal__bottom__list__item.item--5{
flex-direction: row-reverse;
max-width: none;
transform: translate(-90px, -80px);
}
.optimal__bottom__mobile__list p{
font-size: 12px;
}
.optimal__bottom__list__item.item--1 p, .optimal__bottom__list__item.item--5 p{
max-width: 137px;
}
.optimal__bottom__list__item.item--2 p{
max-width: 120px;
}
.optimal__bottom__list__item.item--4 p{
max-width: 148px;
}
.optimal__bottom__list__item span{
width: 32px;
height: 32px;
font-size: 22px;
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--5{
transform: translate(85px, -35px);
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--4{
transform: translate(15px, -30px);
flex-direction: column;
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--3{
transform: translate(5px, 45px);
flex-direction: row-reverse;
max-width: none;
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--3 p{
max-width: 134px;
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--2{
transform: translate(15px, 90px);
flex-direction: column-reverse;
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--1{
transform: translate(0px, 110px);
flex-direction: column;
}
.optimal__bottom__mobile__list:first-child .optimal__bottom__list__item.item--1 span{
transform: translateX(40px);
}
.optimal__content__bottom__mobile .optimal__content__bottom__block{
transform: translate(0,0);
min-width: 163px;
max-height: 73px;
min-height: 73px;
justify-content: center;
}
.optimal__content__bottom__mobile .optimal__content__bottom__block:first-child{
background: #DFEEE5;
}
.optimal__bottom__block__group p{
font-size: 16px;
}
.optimal__content__bottom__block span{
font-size: 12px;
}
.optimal__mobile__wrapper{
display: flex;
gap: 15px;
margin-top: 15px;
margin-bottom: 100px;
}
.optimal__started__mobile__list{
flex-direction: column;
align-items: center;
}
.modal__content{
min-width: 359px;
}
.modal__body{
overflow-y: auto;
max-height: 648px;
}
.modal__close{
right: -20px;
}
.modal__group{
flex-direction: column;
}
.modal__input, .modal__select, .modal__input__wrapper{
width: 100%;
}
.contact__modal h3{
font-size: 24px;
}
.contact__modal p{
font-size: 18px;
}
.tab__content__item{
max-width: 170px;
}
}
@media (max-width: 500px) {
.hero__form__group{
padding: 16px;
border-radius: 28px;
}
.hero .main__title {
padding-top: 53px;
}
.steps__wrapper{
flex-direction: row;
align-items: stretch;
gap: 25px;
}
.steps__progress__list{
flex-direction: column;
height: 70%;
margin-left: 10px;
margin-top: 30px;
}
.steps__progress{
width: 10%;
align-items: stretch;
}
.steps__progress__list__item img{
display: none;
}
.steps__progress__list::after {
content: "";
position: absolute;
left: -5px;
width: 29px;
height: 100%;
top: 50px;
bottom: 0;
background-image: url("../images/dottedLineVertical.png");
background-position: center;
background-size: contain;
transform: translateX(-50%);
z-index: -3;
}
.steps__progress__list::before{
background: url("../images/progressLineVertical.png");
top: 0%;
left: 0px;
width: 29px;
height: 100%;
}
.steps__card__list__item {
max-width: 277px;
min-height: 295px;
}
.check__review:nth-child(2) {
top: 1%;
}
.check__review:nth-child(4) {
left: 40%;
bottom: 1%;
}
.footer__list{
align-items: flex-start;
}
.about__form{
padding: 16px;
}
.performance__list__item{
max-width: 172px;
min-width: 172px;
}
.performance__list{
gap: 12px;
}
.hero {
min-height: 600px;
}
}
@media (max-width: 390px) {
.tab-pane.fade.show.active {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.steps__card__list__item {
max-width: 240px;
min-height: 300px;
}
.check__review:nth-child(4) {
left: 30%;
}
.reviews__slide__text{
font-size: 14px;
}
.optimal__content__bottom__mobile .optimal__content__bottom__block{
min-width: 143px;
max-height: 53px;
min-height: 53px;
}
.optimal__bottom__block__group p{
font-size: 14px;
}
.optimal__content__bottom__block span{
font-size: 10px;
}
.optimal__bottom__mobile__list p{
font-size: 10px;
}
.optimal__bottom__list__item.item--1 p, .optimal__bottom__list__item.item--5 p{
max-width: 110px;
}
.optimal__bottom__list__item.item--2 p{
max-width: 87px;
}
.optimal__bottom__list__item.item--4 p{
max-width: 112px;
}
.tab__content__item{
max-width: 150px;
}
}
@media (max-width: 1399px) {
.partner__slide {
width: 244px;
height: 398px;
}
}
@media (max-width: 1023px) {
.partner__slide {
width: 244px;
height: 356px;
}
}
@media (hover: hover) and (pointer: fine) {
.tab__content__item:hover .tab__card {
transform: rotateY(180deg);
}
}
.tab__content__item.is-flipped .tab__card {
transform: rotateY(180deg);
}