/*** 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: "Ubuntu", sans-serif; font-weight: 400; font-style: normal; line-height: 1.3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; color: var(--text-color); position: relative; } div, header { display: flex; } .container { max-width: 1200px; width: 100%; display: flex; margin: 0 auto; } p, li { font-size: 20px; color: var(--text-color); line-height: 1.6; } ul li { list-style-type: disc; list-style-position: outside; margin-left: 50px; } ul.no-margin li { margin-left: 20px; } header { height: 120px; } header .container { align-items: center; column-gap: 20px; } header .container .logo { color: var(--primary-color); font-size: 32px; font-weight: 600; } header .container .side { display: flex; align-items: center; margin-left: auto; color: var(--cta-color); column-gap: 20px; } header .container .side:hover .contact span:last-child { text-decoration: underline; } header .container .side i { font-size: 34px; } header .container .side .contact { flex-direction: column; font-weight: 500; font-size: 20px; } header .container .side .contact span:first-child { font-weight: 600; color: var(--text-bold-color); } header .container .hamburger { margin-left: auto; border: 1px solid var(--primary-color); border-radius: 2px; height: 50px; width: 50px; justify-content: center; align-items: center; cursor: pointer; display: none; } header .container .hamburger i { font-size: 26px; color: var(--primary-color); } .menu { background: var(--menu-background-color); } .menu .container { height: 75px; color: var(--text-bold-color); align-items: center; justify-content: center; } .menu .container a { font-size: 17px; font-weight: 700; padding: 0 20px; text-transform: uppercase; height: 100%; display: flex; align-items: center; } .menu .container a:hover { background: var(--primary-color); color: #FFF; } .hero { background: var(--highlight-color); } .hero .container { padding: 50px 0; align-items: center; column-gap: 100px; } .hero .container img { width: 410px; height: auto; } .hero .container .content { flex-direction: column; } .hero .container .content h1 { font-size: 36px; font-weight: 800; color: var(--primary-color); margin-bottom: 20px; } .hero .container .content p { text-align: justify; color: var(--text-bold-color); margin-bottom: 30px; } .hero .container .content .buttons { margin-right: auto; column-gap: 20px; } .hero .container .content .buttons .button { color: #FFF; padding: 12px 16px; font-size: 20px; font-weight: 700; border-radius: 8px; column-gap: 10px; display: flex; align-items: center; justify-content: center; transition: 0.3s all ease-in-out; } .hero .container .content .buttons .button.primary { background: var(--primary-color); } .hero .container .content .buttons .button.secondary { background: var(--secondary-color); cursor: pointer; } .hero .container .content .buttons .button.secondary:hover { transform: scale(1.07); } .hero .container .content .buttons .button i { font-size: 25px; } .section .container { padding: 50px 0; flex-direction: column; } .section .container h1 { font-size: 30px; font-weight: 800; color: var(--primary-color); margin-bottom: 20px; } .section .container h2 { font-size: 30px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; } .section .container h3 { font-size: 24px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; } .section .container h5 { font-size: 20px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; } .section .container .row { gap: 40px; } .section .container .row:not(:last-child) { margin-bottom: 20px; } .section .container .row .column { flex-direction: column; justify-content: center; flex: 1; } .section .container .row .column.max-500 { max-width: 500px; } .section .container .row .column.max-420 { max-width: 420px; } .section .container .row .column p:not(:last-child), .section .container .row .column ul:not(:last-child) { margin-bottom: 20px; } .section .container .row .column img { border-radius: 8px; opacity: 0.9; } .section .container .services { gap: 10px; margin-top: 20px; } .section .container .services .service { align-items: center; flex-direction: column; padding: 24px; background: var(--highlight-color); border-radius: 8px; flex: 1; row-gap: 10px; } .section .container .services .service i { font-size: 60px; color: var(--primary-color); margin-bottom: 10px; } .section .container .services .service p { text-align: center; font-size: 18px; } .section .container .services .service p strong { font-weight: 800; } .section.highlighted { background: var(--highlight-color); } .section.primary { background: var(--primary-color); } .section.primary .container h1, .section.primary .container h2, .section.primary .container h5, .section.primary .container p, .section.primary .container li { color: #FFFFFF; } .related { padding-bottom: 50px; } .related .container { display: flex; gap: 16px; flex-wrap: wrap; max-width: 800px; margin: 0 auto; justify-content: flex-start; } .related .container a { font-size: 18px; text-align: center; flex: 1 1 calc(50% - 12px); text-decoration: underline; } .related .container a:hover { color: var(--primary-color); } footer { background: var(--footer-color); } footer .container { padding: 25px 0; flex-direction: column; align-items: center; row-gap: 8px; } footer .container span { color: #FFF; font-size: 15px; } footer .container .links { display: flex; column-gap: 20px; } footer .container .links a { color: #FFF; font-size: 15px; } footer .container .links a:hover { text-decoration: underline; } @media (max-width: 1219px) { .container { max-width: 972px; padding-left: 50px !important; padding-right: 50px !important; } .hero .container { column-gap: 50px; } .hero .container img { max-width: 280px; } .section .container { padding: 30px 0; } .section .container .services { flex-wrap: wrap; } .section .container .services .service { flex: 1 1 calc(50% - 10px); } } @media (max-width: 767px) { .container { max-width: 100%; width: 100%; display: flex; padding-left: 24px !important; padding-right: 24px !important; } p, li { font-size: 18px; } ul li { margin-left: 20px; } header .container .logo { display: none; } header .container .side { margin: 0 auto 0 0; } header .container .hamburger { display: flex; } .menu { display: none; position: absolute; top: 120px; left: 0; width: 100%; } .menu.show { display: flex; } .menu .container { flex-direction: column; height: unset; } .menu .container a { height: 50px; display: flex; width: 100%; text-align: center; } .menu .container a:hover { background: unset; color: inherit; } .hero .container { padding: 20px 0; flex-direction: column; } .hero .container img { width: 210px; } .hero .container .content h1 { font-size: 25px; margin: 35px auto 20px auto; } .hero .container .content p { font-size: 16px; } .hero .container .content .buttons { margin: 0 auto; } .hero .container .content .buttons .primary { display: none; } .hero .container .content .buttons .button { width: 300px; } .section .container { padding: 20px 0; } .section .container h1 { font-size: 24px; } .section .container h2 { font-size: 24px; } .section .container h3 { font-size: 20px; } .section .container h5 { font-size: 20px; } .section .container .row { flex-direction: column-reverse; } .section .container .services { flex-direction: column; } .section .container .services .service { flex: 1; } .section .container .services .service i { font-size: 48px; } .section .container .services .service p { font-size: 16px; } .related .container { padding-top: 20px; } .related .container a { flex: 0 0 100%; } } .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 */