/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ @import "fontawesome.min.css"; *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @keyframes lexprofitBackAnim { 0% { transform: scaleX(0.7) scaleY(0.7); } 25% { transform: scaleX(1.2) scaleY(1.2); } 50% { transform: scaleX(1.5) scaleY(1.5); } 65% { transform: scaleX(1.2) scaleY(1.2); opacity: 0.7; } 100% { transform: scaleX(0.7) scaleY(0.7); opacity: 0; } } @keyframes lexprofitBorderAnim { 0% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(1.5) scaleY(1.5); } 100% { transform: scaleX(2) scaleY(2); opacity: 0; } } @keyframes lexprofitBoundingAnim { 0% { transform: rotate(0deg); } 15% { transform: rotate(15deg); } 30% { transform: rotate(0deg); } 45% { transform: rotate(-15deg); } 60% { transform: rotate(0deg); } } html { scroll-behavior: smooth; } body { font-family: "Karla", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; color: var(--text-color); } h1, h2, h3, h4, h5, h6 { font-family: "Bricolage Grotesque", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; } .container { max-width: 1200px; width: 100%; display: flex; margin: 0 auto; } .button { display: flex; padding: 15px 30px; font-size: 18px; color: #333; font-weight: 600; border-radius: 40px; background-color: var(--secondary-color); cursor: pointer; transition: all 0.3s ease; align-items: center; gap: 5px; } .button:hover { filter: brightness(85%); } .button.outline { background-color: transparent; border: 2px solid #FFF; color: #FFF; } .button.outline:hover { background-color: var(--secondary-color); filter: none; border-color: var(--secondary-color); color: #000; } .hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; background: var(--hero-image) no-repeat center center; background-size: cover; overflow: hidden; color: #FFFFFF; flex-direction: column; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(110deg, var(--primary-color) 0%, #333 100%); z-index: 0; opacity: 0.6; } .hero .header { position: relative; z-index: 2; height: 98px; background: rgba(0, 0, 0, 0.1); width: 100%; display: flex; } .hero .header .container { height: 100%; align-items: center; justify-content: space-between; } .hero .header .container .invisible-placeholder { visibility: hidden; } .hero .header .container .menu { display: flex; justify-content: center; } .hero .header .container .menu a { height: 100%; font-size: 18px; padding: 0 18px; line-height: 40px; text-decoration-thickness: 2px; text-underline-offset: 4px; } .hero .header .container .menu a:hover { text-decoration: underline; } .hero .header .container .hamburger { display: none; height: 50px; width: 50px; justify-content: center; align-items: center; margin-left: auto; color: var(--secondary-color); border: 1px solid var(--secondary-color); border-radius: 2px; cursor: pointer; } .hero .content { position: relative; z-index: 1; flex: 1; display: flex; color: #FFFFFF; } .hero .content .container { flex-direction: column; justify-content: center; flex: 1; } .hero .content .container h1 { max-width: 70%; font-size: 74px; line-height: 81px; margin-bottom: 20px; } .hero .content .container p { font-size: 18px; line-height: 28px; } .hero .content .container .button.outline { margin-top: 80px; margin-right: auto; } .specialities { background: var(--background-highlight-color); padding: 80px 0; display: flex; } .specialities .container { display: flex; gap: 30px; } .specialities .container .item { flex: 1; display: flex; flex-direction: column; row-gap: 20px; } .specialities .container .item .icon { background-color: var(--primary-color); display: flex; align-items: center; justify-content: center; color: #fff; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; opacity: 0.8; } .specialities .container .item h5 { font-size: 24px; line-height: 29px; color: #000; } .specialities .container .item p { color: var(--text-color); line-height: 28px; } .service { padding: 120px 0; display: flex; } .service .container { column-gap: 70px; align-items: center; } .service .container img { flex: 1; width: 100%; height: auto; border-radius: 24px; } .service .container .content { flex: 1; } .service .container .content h2 { color: #000000; font-size: 54px; line-height: 64px; margin-bottom: 20px; } .service .container .content h4 { color: #000000; font-size: 32px; line-height: 39px; margin-bottom: 20px; } .service .container .content .icon { font-size: 28px; color: var(--secondary-color); margin-bottom: 10px; } .service .container .content p { color: var(--text-color); line-height: 28px; font-weight: 400; } .service .container .content p.with-spacing { margin-top: 40px; } .service .container .content hr { margin: 30px 0; height: 1px; width: 100%; display: flex; background: rgba(255, 255, 255, 0.2); } .service .container .content .checklist { margin-top: 40px; display: flex; flex-direction: column; row-gap: 10px; margin-bottom: 5px; } .service .container .content .checklist span { font-weight: 500; } .service .container .content .checklist span i { font-size: 16px; color: var(--secondary-color); } .service.dark-bg { background: var(--primary-color); } .service.dark-bg .container .content h2, .service.dark-bg .container .content h4, .service.dark-bg .container .content p { color: #FFF; } .offers { padding: 120px 0; background: var(--background-highlight-color); display: flex; } .offers .container { flex-direction: column; text-align: center; } .offers .container h2 { color: #000000; font-size: 54px; line-height: 64px; margin-bottom: 15px; } .offers .container h5 { color: #000000; } .offers .container p { color: var(--text-color); font-size: 18px; line-height: 30px; } .offers .container .offers-list { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 24px; text-align: left; } .offers .container .offers-list .offer { background: #FFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 24px; flex: 1 1 calc(50% - 24px); padding: 24px; min-height: 210px; } .offers .container .offers-list .offer h5 { font-size: 24px; line-height: 29px; margin-bottom: 10px; } .additional { padding: 80px 0; display: flex; } .additional .container { flex-direction: column; row-gap: 20px; } .additional .container h2 { color: #000000; font-size: 54px; line-height: 64px; } .additional .container h3 { color: #000000; font-size: 32px; line-height: 39px; } .additional .container h4 { color: #000000; font-size: 24px; line-height: 29px; } .additional .container p { color: var(--text-color); font-size: 18px; line-height: 30px; } .testimonials { padding: 120px 0; display: flex; } .testimonials .container { flex-direction: column; text-align: center; align-items: center; row-gap: 70px; } .testimonials .container h2 { color: #000000; font-size: 54px; line-height: 64px; margin-bottom: 20px; max-width: 60%; } .testimonials .container .reviews { display: flex; gap: 20px; } .testimonials .container .reviews .review { display: flex; border-radius: 24px; padding: 40px 32px; height: 100%; flex: 1; background: var(--background-highlight-color); flex-direction: column; row-gap: 20px; text-align: left; } .testimonials .container .reviews .review .author { font-size: 24px; line-height: 29px; font-weight: 500; } .testimonials .container .reviews .review p { color: var(--text-color); line-height: 28px; font-weight: 400; } .testimonials .container .reviews .review .rating { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; } .testimonials .container .reviews .review .rating .stars { color: #F0AD4E; font-size: 18px; letter-spacing: -3px; } .testimonials .container .reviews .review .rating .fa-google { font-size: 32px; } .related { padding: 80px 0; background: var(--background-highlight-color); display: flex; } .related .container { flex-direction: column; text-align: center; } .related .container h2 { color: #000000; font-size: 54px; line-height: 64px; margin-bottom: 15px; } .related .container .links { display: flex; gap: 16px; flex-wrap: wrap; max-width: 800px; margin: 0 auto; justify-content: flex-start; } .related .container .links a { color: #333; font-size: 20px; line-height: 24px; text-decoration-thickness: 2px; text-underline-offset: 4px; flex: 1 1 calc(50% - 12px); } .related .container .links a:hover { color: var(--primary-color); text-decoration: underline; } .bottom-hero { position: relative; display: flex; min-height: 640px; background: var(--background-highlight-color); width: 100%; align-items: center; background: var(--hero-bottom-image) no-repeat center center; background-size: cover; overflow: hidden; color: #FFFFFF; flex-direction: column; } .bottom-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(110deg, var(--primary-color) 0%, #333 100%); z-index: 1; opacity: 0.5; } .bottom-hero .container { column-gap: 70px; align-items: center; padding: 120px 0; height: 100%; } .bottom-hero .container .placeholder { flex: 1; } .bottom-hero .container .content { position: relative; flex: 1; z-index: 2; width: 100%; display: flex; flex-direction: column; } .bottom-hero .container .content h3 { font-size: 42px; line-height: 55px; margin-bottom: 20px; } .bottom-hero .container .content .button { margin-top: 70px; margin-right: auto; } .footer { padding: 80px 0; display: flex; background: var(--background-highlight-color); } .footer .container { column-gap: 70px; } .footer .container .section { flex: 1; display: flex; flex-direction: column; row-gap: 20px; } .footer .container .section h5 { font-size: 24px; line-height: 29px; } .footer .container .section a, .footer .container .section p { font-size: 18px; line-height: 28px; color: var(--text-color); } .footer .container .section .links { display: flex; flex-direction: column; row-gap: 3px; } .footer .container .section .links a { color: #333; text-decoration-thickness: 2px; text-underline-offset: 4px; } .footer .container .section .links a:hover { color: var(--primary-color); text-decoration: underline; } .copyright { padding: 20px 0; display: flex; background: var(--background-highlight-color); border-top: 1px solid rgba(0, 0, 0, 0.08); } .copyright .container p { width: 100%; text-align: center; font-size: 16px; line-height: 26px; color: var(--text-color); } @media (max-width: 1219px) { .container { max-width: 972px; } .hero .header .container .invisible-placeholder { display: none; } } @media (max-width: 991px) { .container { max-width: 100%; width: 100%; display: flex; padding: 0 24px; } .hero { height: auto; padding-bottom: 70px; } .hero .header { margin-bottom: 30px; } .hero .header .container { position: relative; } .hero .header .container > .button, .hero .header .container > .menu { display: none; } .hero .header .container .menu { position: absolute; top: 100%; left: 0; width: 100%; background: #FFF; padding: 0 24px; flex-direction: column; } .hero .header .container .menu.show { display: flex; } .hero .header .container .menu a { font-size: 18px; line-height: 54px; padding: 0; color: #333; } .hero .header .container .menu a:hover { color: var(--primary-color); } .hero .header .container .hamburger { display: flex; } .hero .content .container h1 { max-width: 100%; font-size: 36px; line-height: 40px; } .hero .content .container p { font-size: 16.5px; line-height: 28px; } .specialities .container { flex-direction: column; } .specialities .container .item .icon { width: 44px; height: 44px; font-size: 20px; } .specialities .container .item h5 { font-size: 18px; line-height: 22px; } .specialities .container .item p { color: var(--text-color); font-size: 16.5px; line-height: 28px; } .service { padding: 64px 0; } .service .container { flex-direction: column; column-gap: 0; row-gap: 50px; } .service .container .content h2 { font-size: 29px; line-height: 35px; } .service .container .content h4 { font-size: 20px; line-height: 24px; } .service .container .content .icon { font-size: 24px; } .service .container .content p { font-size: 16px; line-height: 27px; } .service.reverse-mobile .container { flex-direction: column-reverse; } .offers { padding: 64px 0; } .offers .container h2 { font-size: 29px; line-height: 35px; } .offers .container .offers-list p { font-size: 16px; line-height: 27px; } .offers .container .offers-list .offer { flex: 1 1 100%; min-height: unset; } .offers .container .offers-list .offer h5 { font-size: 18px; line-height: 21px; } .additional { padding: 64px 0; } .additional .container h2 { font-size: 29px; line-height: 35px; } .additional .container h3 { font-size: 20px; line-height: 24px; } .additional .container h4 { font-size: 18px; line-height: 21px; } .testimonials { padding: 64px 0; } .testimonials .container { row-gap: 20px; } .testimonials .container h2 { font-size: 29px; line-height: 35px; max-width: 100%; } .testimonials .container .reviews { flex-direction: column-reverse; } .testimonials .container .reviews .review { padding: 24px; } .testimonials .container .reviews .review .author { font-size: 20px; line-height: 24px; } .testimonials .container .reviews .review p { font-size: 16px; line-height: 27px; } .testimonials .container .reviews .review .rating .stars { color: #F0AD4E; font-size: 18px; letter-spacing: -3px; } .testimonials .container .reviews .review .rating .fa-google { font-size: 26px; } .related { padding: 64px 0; } .related .container h2 { font-size: 29px; line-height: 35px; } .related .container .links { gap: 12px; max-width: 100%; } .related .container .links a { font-size: 18px; line-height: 22px; flex: 0 0 100%; } .bottom-hero { min-height: 420px; } .bottom-hero .container { padding: 64px 24px; flex-direction: column-reverse; } .bottom-hero .container .placeholder { display: none; } .bottom-hero .container .content h3 { font-size: 23px; line-height: 30px; } .bottom-hero .container .content p { font-size: 16px; line-height: 27px; } .footer { padding: 50px 0 20px 0; } .footer .container { flex-direction: column; column-gap: 0; row-gap: 30px; text-align: center; } .footer .container .section h5 { font-size: 22px; line-height: 26px; } .footer .container .section a, .footer .container .section p { font-size: 18px; line-height: 30px; color: var(--text-color); } } .fixed-call-button { display: block; background: none; border: 0; border-radius: 0; position: fixed; float: none; font-style: normal; text-transform: none; width: 80px; max-width: none; max-height: none; opacity: 1; outline: 0; overflow: visible; text-decoration: none; vertical-align: top; word-spacing: normal; letter-spacing: normal; color: var(--cta-color); bottom: 8%; right: 7%; margin-left: -40px; margin-top: -40px; height: 80px; text-align: center; font-size: 10px; line-height: 80px; -webkit-font-smoothing: antialiased; z-index: 1000; cursor: pointer; } .fixed-call-button * { transition: 0.5s; } .fixed-call-button i { color: var(--cta-icon-color); font-size: 30px; padding-top: 25px !important; } .fixed-call-button:after, .fixed-call-button:before { content: ""; border-radius: 100%; position: absolute; width: 80px; height: 80px; transform-origin: center center; box-sizing: border-box; z-index: 9; transition: 0.5s; } .fixed-call-button:after { background: var(--cta-color); animation: lexprofitBackAnim 3s linear infinite; } .fixed-call-button:before { border: 1px solid var(--cta-color); animation: lexprofitBorderAnim 3s -0.5s linear infinite; } .fixed-call-button a { z-index: 10; position: absolute; background-color: var(--cta-color); border-radius: 100%; width: 100%; height: 100%; } .fixed-call-button a:hover { animation: lexprofitBoundingAnim 1s linear infinite; } .fixed-call-button:hover a { background-color: #bbb; } .fixed-call-button:hover:after { background-color: #aaa; } .fixed-call-button:hover:before { border-color: #aaa; } @media (max-width: 768px) { .fixed-call-button { right: 18%; bottom: 5%; } } /*# sourceMappingURL=style.css.map */