#nav-wrap .container1 { position: relative; } #menu-container { margin-left: auto; } #logo { top: 0; padding-top: 1rem; position: absolute; } #logo, #logo img { -webkit-transition: all 0.3s; transition: all 0.3s; } #logo img { height: 14.4375rem; } @media (max-width: 1199px) { #logo { padding-top: 1.25rem; } #logo img { height: 7.25rem; } } @media (max-height: 479px), (max-width: 767px) { #logo { padding-top: 0.875rem; } #logo img { height: 8.5625rem; } } body.sticky #logo { top: 50%; padding-top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } body.sticky #logo img { height: 5.375rem; } @media (max-width: 1199px) { body.sticky #logo img { height: 3.75rem; } } @media (max-height: 479px), (max-width: 767px) { body.sticky #logo img { height: 2.8125rem; } } h2 { color: #2b5860; font-size: 3.125rem; line-height: 3.5rem; font-family: Playfair Display, serif; font-weight: 600; } @media (max-width: 1199px) { h2 { line-height: 3rem; font-size: 2.625rem; } } @media (max-height: 479px), (max-width: 767px) { h2 { font-size: 2rem; line-height: 2.375rem; } } #hero { height: 100vh; position: relative; } #hero .bg-container { position: fixed; z-index: -1; } #hero .container1 { z-index: 2; position: relative; -webkit-transform: translateY(21.625rem); transform: translateY(21.625rem); } #hero .container1 > :not(.boxes-container) { max-width: 35rem; } #hero h1 { color: #1d3840; font-size: 3.375rem; line-height: 3.75rem; } #hero .boxes-container { margin-top: 3.25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } #hero .boxes-container li { text-align: center; line-height: 1.5rem; } #hero .boxes-container h2 { font-size: 2.375rem; margin-bottom: 2rem; line-height: 2.625rem; } #hero .boxes-container h2 button { color: inherit; } #hero .boxes-container figure { margin: 0 auto 2rem; width: 100%; overflow: hidden; position: relative; border-radius: 50%; padding-bottom: 100%; } #hero .boxes-container figure img { -o-object-fit: cover; object-fit: cover; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; } #hero .boxes-container p:not(:last-child) { margin-bottom: 1.5rem; } #hero .boxes-container p:last-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 479px) { #hero .boxes-container p:last-child { gap: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #hero .boxes-container p:last-child a.button { max-width: 147.5px; padding-left: 2.109rem; padding-right: 2.109rem; } } #hero .boxes-container .button { height: unset; max-width: 6.875rem; line-height: 0.9375rem; padding: 0.4375rem 1.25rem 0.3125rem; } #hero .boxes-container .button + .button { margin-left: 0; } @media (min-width: 480px) { #hero .boxes-container li { width: 50%; background: #fff; max-width: 15.125rem; border-radius: 1.5625rem; padding: 1.375rem 0.75rem 2.125rem; } #hero .boxes-container li:not(:last-child) { margin-right: 1.5625rem; } #hero .boxes-container li:first-child { border: 1px solid #ff7664; } #hero .boxes-container li:nth-child(2) { border: 1px solid #e3c582; } #hero .boxes-container li > :not(h2) { max-width: 15.625rem; margin-left: auto; margin-right: auto; } #hero .boxes-container h2 button { font-family: inherit; } } @media (min-width: 480px) and (max-width: 1199px) { #hero .boxes-container .button { line-height: 0.8125rem; } } @media (min-width: 1200px) { #hero .boxes-container li { max-width: 20rem; padding: 1.625rem 1.25rem 2.75rem; } #hero .boxes-container li:not(:last-child) { margin-right: 2.5rem; } } @media (max-width: 1199px) { #hero .container1 { -webkit-transform: translateY(12.5rem); transform: translateY(12.5rem); } #hero .container1 > :not(.boxes-container) { max-width: 24.375rem; } #hero h1 { font-size: 2.25rem; line-height: 2.75rem; } #hero .boxes-container { margin-top: 2.125rem; } #hero .boxes-container h2 { line-height: 2rem; font-size: 1.75rem; margin-bottom: 1.5rem; } #hero .boxes-container figure { width: 94.4445%; margin-bottom: 1.5rem; padding-bottom: 94.4445%; } #hero .boxes-container p:last-child { max-width: 13.25rem; } #hero .boxes-container .button { max-width: 5.75rem; padding: 0.375rem 1rem; } } @media (max-width: 1023px) { #hero .bg-container { background-position: -3m; } } @media (max-width: 1023px) and (min-width: 768px) and (min-height: 480px) { #hero, #hero .bg-container { height: 33.625rem; } } @media (max-height: 479px), (max-width: 767px) { #hero .container1 { padding-top: 14.875rem; -webkit-transform: none; transform: none; } #hero h1 { font-size: 1.625rem; line-height: 1.875rem; } } @media (max-width: 479px) { #hero { height: auto; } #hero .bg-container { height: 31.375rem; background-position: -6.625rem -0.125rem; } #hero .container1 > :not(.boxes-container) { max-width: 9.125rem; } #hero .boxes-container { color: #fff; margin-top: 1.875rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -1.75rem; width: calc(100% + 3.5rem); } #hero .boxes-container li { width: calc(50% - 0.625rem); } #hero .boxes-container li:first-child > div, #hero .boxes-container li:first-child h2 { background: #ff7664; } #hero .boxes-container li:first-child .button { color: #ff7664; } #hero .boxes-container li:nth-child(2):not(.current) > div { display: none; } #hero .boxes-container li:nth-child(2) > div, #hero .boxes-container li:nth-child(2) h2 { background: #2b5860; } #hero .boxes-container li:nth-child(2) > div { -webkit-transform: translateX(calc(-50% - 0.625rem)); transform: translateX(calc(-50% - 0.625rem)); } #hero .boxes-container li:nth-child(2) .button { color: #2b5860; } #hero .boxes-container li > div { width: 100vw; padding: 3.4375rem 1.75rem 2.8125rem; } #hero .boxes-container h2 { padding: 0; color: inherit; font-size: 1rem; margin-bottom: 0; line-height: 1.0625rem; border-radius: 0.9375rem 0.9375rem 0 0; } #hero .boxes-container h2 button { width: 100%; padding: 0.6875rem 14% 0.625rem; } #hero .boxes-container figure { width: 100%; padding-bottom: 100%; margin-bottom: 1.875rem; } #hero .boxes-container p:not(:last-child) { margin-bottom: 2rem; } #hero .boxes-container p:last-child { max-width: none; } #hero .boxes-container .button { max-width: 7.5rem; background: #fff; padding-left: 1.25rem; padding-right: 1.25rem; } #hero .boxes-container .button + .button { margin-top: 0; } } @media (max-width: 320px) { #hero .boxes-container { margin-left: -1rem; width: calc(100% + 2rem); } #hero .boxes-container h2 button { padding-left: 7%; padding-right: 7%; } } main section .container1 { z-index: 1; position: relative; } #section_sync { background: #2b5860; position: relative; padding: 9.375rem 0; padding-top: max(9.375rem, 1147px - 100vh); } #section_sync:before { content: ""; top: 0; left: 0; width: 100%; opacity: 0.75; position: absolute; height: calc(100% + 1.375rem); background-size: cover; background-position: 50%; background-repeat: no-repeat; background-image: url("/assets/images/blooms/sync-async-desktop.svg"); } #section_sync .box { z-index: 1; color: #222; position: relative; background: #fff; max-width: 42.5rem; text-align: center; border: 1px solid #807974; margin: -12.6875rem auto; padding: 3.75rem 2.125rem; border-radius: 1.5625rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 768px) and (min-height: 480px) { #section_sync .box { font-weight: 300; } } #section_sync .box ol { list-style-type: none; text-align: left; list-style-position: outside; max-width: 504px; width: 100%; } #section_sync .box ol li { counter-increment: list-item; text-align: left; padding-left: 35px; font-size: 16px; line-height: 1.3; } #section_sync .box ol li:before { background: #ff7664; color: #fff; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; content: counter(list-item) " "; } #section_sync h2:not(:last-child) { margin-bottom: 1.375rem; } #section_sync p:not(:last-child) { margin-bottom: 1.8125rem; } #section_sync figure { width: 28.125rem; overflow: hidden; position: relative; border-radius: 50%; padding-bottom: 28.125rem; } #section_sync figure img { -o-object-fit: cover; object-fit: cover; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; } @media (min-width: 480px) { #section_sync figure:first-child { margin-left: auto; } } @media (min-width: 1200px) { #section_sync .box { line-height: 2rem; font-size: 1.375rem; } } @media (max-width: 1199px) { #section_sync { padding-top: max(9.375rem, 880px - 100vh); } #section_sync .box { margin: -3.25rem auto; padding: 2.25rem 3.5rem; } } @media (max-width: 1199px) and (min-width: 768px) { #section_sync .box { font-size: 1.25rem; line-height: 1.875rem; } } @media (max-width: 1199px) and (min-width: 1024px) { #section_sync .box { width: 31.25rem; } } @media (max-width: 1199px) { #section_sync h2:not(:last-child) { margin-bottom: 1rem; } #section_sync p:not(:last-child) { margin-bottom: 1.125rem; } #section_sync figure { width: 20.375rem; padding-bottom: 20.375rem; } } @media (max-width: 1023px) { #section_sync { padding: 22.375rem 0 6.25rem; } #section_sync:before { height: 100%; background-position: top; background-image: url("/assets/images/blooms/sync-async-tablet.svg"); } } @media (max-width: 1023px) and (min-width: 480px) { #section_sync .box { max-width: 26.25rem; } } @media (max-height: 479px), (max-width: 767px) { #section_sync figure { width: 16.875rem; padding-bottom: 16.875rem; } } @media (max-width: 479px) { #section_sync { padding: 2.5rem 0; } #section_sync:before { height: calc(100% + 10rem); background-position: -6.25rem -4rem; background-image: url("/assets/images/blooms/sync-async-mobile.svg"); } #section_sync .container1 { overflow: hidden; } #section_sync .box { padding: 2rem 1.5rem; } #section_sync .box .button { height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #section_sync h2:not(:last-child) { margin-bottom: 2rem; } #section_sync figure:first-child { margin-left: -4.25rem; } #section_sync figure:last-child { margin-left: auto; margin-right: -4.25rem; } } @media (max-width: 320px) { #section_sync .box { padding-left: 1.5rem; padding-right: 1.5rem; } } #section_video { padding: 8.1875rem 0; background: #fff; } #section_video .container1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #section_video .container1:has(figure) { flex-wrap: nowrap; } #section_video .text { width: 100%; color: #2b5860; max-width: 29.188rem; } #section_video .text h2 { font-size: 37px; line-height: 1.2; margin-bottom: 24px; } @media (max-width: 479px) { #section_video .text h2 { font-size: 32px; } } @media (min-width: 768px) and (min-height: 480px) { #section_video .text { font-size: 1.25rem; line-height: 1.875rem; } } @media (min-width: 1200px) { #section_video .text { line-height: 2rem; font-size: 1.375rem; } } @media (max-width: 479px) { #section_video .text .button { height: 40px; width: 153px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } #section_video .video-container, #section_video figure { width: 63.715%; background: #fff; } #section_video .video-container:has(iframe.embed) .video { max-height: 25rem; } #section_video .video-container .video { padding-bottom: 56.305%; } @media (max-width: 1023px) { #section_video { padding: 0 0 5.75rem; } #section_video .container1 { padding-left: 0; padding-right: 0; } #section_video .container1:has(figure) { flex-wrap: wrap; } #section_video .text { width: 100%; padding-left: 1.75rem; padding-right: 1.75rem; max-width: 35.5rem; margin-left: auto; margin-right: auto; } } @media (max-width: 1023px) and (min-width: 480px) { #section_video .text { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 3.125rem; } } @media (max-width: 1023px) { #section_video .video-container, #section_video figure { width: 100%; border-radius: 0; } } @media (max-width: 479px) { #section_video { padding: 3.125rem 0; } #section_video .video-container, #section_video figure { margin-top: 1.75rem; } } #section_stats { position: relative; text-align: center; background: #95e0b9; padding: 8.1875rem 0; } #section_stats:before { content: ""; top: 0; left: 0; width: 100%; opacity: 0.75; position: absolute; height: calc(100% + 44rem); background-size: cover; background-position: 50%; background-repeat: no-repeat; background-image: url("/assets/images/blooms/stats-desktop.svg"); } @media (max-width: 479px) { #section_stats:before { top: 0; left: 0; width: 100%; opacity: 0.75; position: absolute; height: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; background-image: url("/assets/images/blooms/stats_mobile.svg"); } } #section_stats .stats-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5rem; margin-top: 4.688rem; } @media (max-width: 479px) { #section_stats .stats-container { margin-top: 1.875rem; gap: 1.5rem; } } @media (max-width: 1023px) { #section_stats .stats-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } #section_stats .stats-container li { background: #fff; width: 17.5rem; height: 17.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2.875rem; border-radius: 20px; } @media (max-width: 479px) { #section_stats .stats-container li { width: 19.938rem; height: 12.5rem; gap: 20px; } } #section_stats .stats-container li p:first-child { font-size: 96px; font-family: Playfair Display; color: #ff6b59; } @media (max-width: 479px) { #section_stats .stats-container li p:first-child { font-size: 64px; } } #section_stats .stats-container li p:last-child { font-size: 24px; font-family: Playfair Display; color: #2b5860; } @media (max-width: 479px) { #section_stats .stats-container li p:last-child { font-size: 26px; } } @media (max-width: 479px) { #section_stats { padding-top: 3.438rem; padding-bottom: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; } #section_stats h2 { width: 19.938rem; } } #section_stories { position: relative; text-align: center; padding: 2.5rem 0; background: -webkit-gradient( linear, left top, left bottom, color-stop(18.75rem, #e3c582), color-stop(0, #fff) ); background: linear-gradient(180deg, #e3c582 18.75rem, #fff 0); } #section_stories:before { content: ""; left: 0; top: -13.375rem; position: absolute; margin-top: 4.5rem; width: 100%; height: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; background-image: url("/assets/images/blooms/success-stories-desktop.svg"); } #section_stories .container1 h2 { color: #333; } #section_stories .container1:after { content: ""; height: 1px; width: 100%; background-color: #e8e9ed; position: absolute; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); bottom: -5rem; } #section_stories .egg-reviews { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; padding-top: 3rem; position: relative; text-decoration: underline; } #section_stories .egg-reviews a { color: #1d3840; } @media (max-width: 479px) { #section_stories .egg-reviews { padding-top: 2.5rem; position: static; padding-bottom: -2.5rem; } } #section_stories .testimonials-container { margin-top: 2.25rem; } @media (min-width: 480px) { #section_stories .testimonials-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 80rem; margin-left: auto; margin-right: auto; } #section_stories .testimonials-container li { width: 39.5349%; max-width: 20rem; } } @media (min-width: 480px) and (max-width: 1023px) { #section_stories .testimonials-container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #section_stories .testimonials-container li:nth-child(2n) { margin-left: 14.2442%; } #section_stories .testimonials-container li:nth-child(n + 3) { margin-top: 3.75rem; } } @media (min-width: 1024px) { #section_stories .testimonials-container li { width: 30%; } } #section_stories figure { width: 100%; overflow: hidden; position: relative; border-radius: 50%; padding-bottom: 100%; } #section_stories figure img { -o-object-fit: cover; object-fit: cover; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; } #section_stories blockquote { margin-top: 2rem; } #section_stories blockquote cite { margin-top: 1.5625rem; } @media (max-width: 1023px) { #section_stories { background: -webkit-gradient( linear, left top, left bottom, color-stop(16.25rem, #e3c582), color-stop(0, #fff) ); background: linear-gradient(180deg, #e3c582 16.25rem, #fff 0); } #section_stories:before { top: -10.75rem; background-image: url("/assets/images/blooms/success-stories-tablet.svg"); } } @media (max-width: 479px) { #section_stories { padding: 2.5rem 0 0; } #section_stories:before { top: -6.875rem; height: calc(100vw + 15.625rem); background-image: url("/assets/images/blooms/success-stories-mobile-1.svg"); } #section_stories .testimonials-container { margin-top: 1.625rem; } #section_stories .testimonials-container li:not(:last-child) { margin-bottom: 5rem; } #section_stories .testimonials-container li:not(:first-child) { position: relative; } #section_stories .testimonials-container li:not(:first-child):before { content: ""; width: 100vw; left: -1.75rem; position: absolute; height: calc(100vw + 5.625rem); background-size: cover; background-position: 50%; background-repeat: no-repeat; } #section_stories .testimonials-container li:nth-child(2):before { top: -8.125rem; background-image: url("/assets/images/blooms/success-stories-mobile-2.svg"); } #section_stories .testimonials-container li:nth-child(3):before { top: -6.875rem; background-image: url("/assets/images/blooms/success-stories-mobile-3.svg"); } } #blog { position: relative; padding: 5rem 0 10.9375rem; } #blog:before { content: ""; left: 0; top: -13rem; position: absolute; height: 74.1875rem; width: 100%; background-size: contain !important; background-size: cover; background-position: 50%; background-repeat: no-repeat; background-image: url("/assets/images/blooms/bg-blog.svg"); } @media (max-width: 1199px) { #blog:before { top: -21rem; } } @media (max-width: 479px) { #blog:before { top: -34rem; } } #blog .container1 > :not(.posts-list) { width: 100%; text-align: left; } #blog .container1 { position: relative; } #blog .posts-list { margin-top: 5.3125rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rem; } @media (max-width: 479px) { #blog .posts-list { margin-top: 2.656rem; } } #blog .posts-list .post-snippet a { height: 100%; } #blog .posts-list .post-snippet .bg-container { overflow: hidden; position: relative; background-color: #e9eaee; height: 13.3125rem; width: 100%; } #blog .posts-list .post-snippet .content-wrapper h2 { padding-right: 3.5rem; font-size: 1.5rem; font-weight: 500; line-height: 1.95rem; margin-top: 2rem; } #blog .posts-list .post-snippet .content-wrapper h2 a { color: #2b5860; font-weight: 500; } #blog .posts-list .post-snippet .content-wrapper .date:after { content: "|"; margin: 0 0.625rem; } #blog .posts-list .post-snippet .content-wrapper .details { padding-right: 2.5rem; margin: 1rem 0; } #blog .posts-list .post-snippet .content-wrapper .read-more { font-weight: 700; } @media (max-width: 1023px) { #blog .posts-list .post-snippet { width: 100%; } } @media (max-width: 1199px) { #blog .posts-list { gap: 2rem; } } @media (max-width: 767px) { #blog .posts-list { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 479px) { #blog { padding-top: 8.375rem; } } /*# sourceMappingURL=home.css.map*/