@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; font-style: normal; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; font-style: normal; } .header { width: 100%; } #header-content { max-width: 1150px; margin: 0 auto; padding: 40px; display: flex; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1100px) { #header-content { padding: 40px; } } @media only screen and (max-width: 1024px) { #header-content { padding: 28px; } } .header.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.7); } .header.fixed #header-content { padding: 20px 0; } @media only screen and (max-width: 1100px) { .header.fixed #header-content { padding: 20px 28px; } } .logo img { height: 52px; width: auto; } #menu { cursor: pointer; } @media only screen and (min-width: 1024px) { #menu { display: none; } } .open { transform: translateX(0) !important; } .nav { display: flex; align-items: center; font-weight: 700; gap: 28px; color: #063412; } @media only screen and (max-width: 1200px) { .nav { gap: 20px; } } @media only screen and (max-width: 1100px) { .nav { font-size: 14px; } } @media only screen and (max-width: 1024px) { .nav { display: none; } } .nav a { position: relative; } .nav .active:after, .nav a:hover:after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px; border-radius: 4px; background-color: rgba(6, 52, 18, 0.3); opacity: 0; transition: opacity 0.2s ease; } .nav .active:after { opacity: 1; background-color: #063412; } .nav a:hover:after { opacity: 1; } .nav__item { position: relative; } .nav__dropdown-arrow { margin-left: 5px; font-size: 12px; transition: transform 0.3s; display: inline-block; } .nav__dropdown-menu { position: absolute; top: 36px; left: -60px; background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0; min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 100; list-style: none; border: 1px solid gray; padding: 4px; } .nav__item:hover .nav__dropdown-menu { opacity: 1; visibility: visible; } .nav__item:hover .nav__dropdown-arrow { transform: rotate(180deg); } .nav__dropdown-item { padding: 6px 2px; } .nav__dropdown-item a { display: block; padding: 8px 16px; } .nav__dropdown-item:hover { background-color: #f8f9fa; } .nav-mobile { position: fixed; top: 0; right: 0; height: 100vh !important; width: 100%; display: flex; flex-direction: column; overflow-x: hidden; transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 200; backdrop-filter: blur(20px); padding-top: 24px; background-color: rgba(255, 255, 255, 0.6); align-items: center; justify-content: center; box-shadow: 0px 8px 20px rgba(6, 52, 18, 0.1); } @media only screen and (min-width: 1100px) { .nav-mobile { display: none; } } .nav-mobile a { padding: 10px; text-decoration: none; font-size: 18px; font-weight: 700; color: #063412; display: block; cursor: pointer; margin-bottom: 8px !important; } .nav-mobile .cta { padding: 12px 20px; color: white; margin-top: 16px; } .nav-mobile__close-icon { width: 20px; height: 20px; opacity: 0.6; position: absolute; top: 32px; right: 32px; } .nav-mobile__dropdown-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 10px; cursor: pointer; font-size: 18px; font-weight: 700; text-align: center; display: block; margin: 0 auto; margin-bottom: 8px; } .nav-mobile__dropdown-toggle.active .nav-mobile__dropdown-arrow { display: inline-block; transform: rotate(0deg); } .nav-mobile__dropdown-arrow { transition: transform 0.3s; font-size: 12px; transform: rotate(270deg); display: inline-block; } .nav-mobile__dropdown-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; list-style: none; text-align: center; } .nav-mobile__dropdown-menu.active { max-height: 400px; } .nav-mobile__dropdown-item { padding: 0px; margin: 0px; text-decoration: underline; } .nav-mobile__dropdown-item a { font-size: 16px !important; } .footer { position: relative; background: url("/assets/images/backgrounds/footer-bg.svg") no-repeat top center; background-size: cover; padding: 40px 0; color: white; height: 820px; display: flex; flex-direction: column; justify-content: flex-end; } .footer ::selection { background-color: white; color: #000000; } .footer p, .footer a { color: white; } .footer .content { display: flex; max-width: 1100px; margin: 0 auto; flex-direction: column; width: 100%; background-color: #063412; border-radius: 24px; padding: 32px; box-sizing: border-box; } .footer .content .top { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 40px; } @media only screen and (max-width: 500px) { .footer .content .top { flex-direction: column; align-items: center; } } .footer .content .top .left { display: flex; flex-direction: column; } @media only screen and (max-width: 500px) { .footer .content .top .left { width: 100%; } } .footer .content .top .logo { width: 200px; height: auto; margin-bottom: 20px; } @media only screen and (max-width: 500px) { .footer .content .top .logo { width: 160px; } } .footer .content .top #locations { margin-top: 24px; font-weight: 700; } .footer .content .top .socials { display: flex; gap: 12px; } .footer .content .top .socials img { width: 40px; height: 40px; } .footer .content .top .socials img:hover { opacity: 0.8; } .footer .content .top .right { text-align: right; justify-content: flex-end; } @media only screen and (max-width: 500px) { .footer .content .top .right { text-align: left; width: 100%; margin-top: 28px; } } .footer .content .top .footer-nav { display: flex; flex-direction: column; gap: 12px; } .footer .content .top .footer-nav a { text-decoration: none; font-size: 16px; } .footer .content .top .footer-nav a:hover { opacity: 0.6; } .footer .content .bottom { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; border-radius: 28px; background: rgba(255, 255, 255, 0.1); font-size: 17px; } .footer .content .bottom img { width: 52px; height: auto; } @media only screen and (max-width: 500px) { .footer .content .bottom p { font-size: 14px; } } .business-enquiry { font-family: "Figtree", sans-serif; font-size: 16px; line-height: 1.5; color: #476b59; max-width: 800px; margin: 0 auto; } .business-enquiry__header { margin-bottom: 20px; } .business-enquiry__header-title { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #000000; text-align: center; } .business-enquiry__header-icon { background-color: #115f3f; padding: 12px; border-radius: 16px; display: inline-flex; justify-content: center; } .business-enquiry__header-subheader { text-align: center; color: #000000; font-size: 18px; } .business-enquiry__header-subtitle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #476b59; justify-content: center; padding: 10px 0px; } .business-enquiry__header-subtitle svg { width: 16px; color: #476b59; } .business-enquiry__divider { height: 1px; background-color: #e2e8f0; margin: 24px 0; border: none; } .business-enquiry__section { margin-bottom: 32px; } .business-enquiry__section-title { font-size: 24px; font-weight: 600; margin-bottom: 16px; color: #000; margin: 0 0 20px 0; padding: 0; } .business-enquiry__section-subtitle { font-size: 16px; color: #476b59; font-weight: normal; margin-top: 16px; } .business-enquiry__section-text { color: #476b59; font-size: 16px; } .business-enquiry__section--highlighted { background-color: #ffffff; padding: 24px; border-radius: 8px; border: 1px solid #e2e8f0; } .business-enquiry__form-group { margin-bottom: 32px; margin-top: 32px; } .business-enquiry__form-group--inline { display: flex; gap: 16px; } @media (max-width: 768px) { .business-enquiry__form-group--inline { flex-direction: column; gap: 8px; } } .business-enquiry__label { display: block; margin-bottom: 8px; font-weight: 500; color: #000000; } .business-enquiry__label svg { height: 16px; } .business-enquiry__label--required::after { content: " *"; color: #ef4444; } .business-enquiry__input, .business-enquiry__textarea, .business-enquiry__select { width: 95%; padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 16px; transition: all 0.2s ease; background-color: #ffffff; color: #063412; } @media only screen and (max-width: 1024px) { .business-enquiry__input, .business-enquiry__textarea, .business-enquiry__select { width: 92%; } } .business-enquiry__input:focus, .business-enquiry__textarea:focus, .business-enquiry__select:focus { outline: none; border-color: #00CC82; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .business-enquiry__input::placeholder, .business-enquiry__textarea::placeholder, .business-enquiry__select::placeholder { color: #476b59; } .business-enquiry__input--error { border-color: #ef4444; } .business-enquiry__input--error:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .business-enquiry__select { width: 100%; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 32px; } .business-enquiry__checkbox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } @media (max-width: 768px) { .business-enquiry__checkbox-group { grid-template-columns: 1fr; } } .business-enquiry__checkbox-item { display: flex; align-items: center; gap: 8px; cursor: pointer; } .business-enquiry__checkbox-item:hover .business-enquiry__checkbox-item-input:not(:checked) { border-color: #115f3f; } .business-enquiry__checkbox-input { width: 18px; height: 18px; border: 2px solid #e2e8f0; border-radius: 4px; background-color: #ffffff; transition: all 0.2s ease; cursor: pointer; } .business-enquiry__checkbox-input:checked { background-color: #115f3f; border-color: #115f3f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; } .business-enquiry__checkbox-label { font-size: 14px; color: #476b59; cursor: pointer; } .business-enquiry__textarea { min-height: 100px; resize: vertical; font-family: "Figtree", sans-serif; } .business-enquiry__submit { width: 100%; background-color: #115f3f; color: white; border: none; border-radius: 8px; padding: 16px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; display: flex; justify-content: center; gap: 10px; } .business-enquiry__submit svg { height: 16px; } .business-enquiry__submit:hover { background-color: #063412; } .business-enquiry__submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); } .business-enquiry__submit:disabled { background-color: #64748b; cursor: not-allowed; } .business-enquiry__info-section { margin-top: 24px; text-align: center; } .business-enquiry__info-items { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 14px; color: #64748b; padding: 10px 0px; } .business-enquiry__info-items span { color: #115f3f; } @media (max-width: 768px) { .business-enquiry__info-items { flex-direction: column; gap: 8px; } } .business-enquiry__info-item { display: flex; align-items: center; gap: 8px; } .business-enquiry__info-item svg { height: 16px; } .business-enquiry__next-steps { margin-top: 32px; padding: 24px; background-color: rgba(209, 224, 217, 0.2); border-radius: 8px; border: 1px solid #d1e0d9; } .business-enquiry__next-steps-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #000000; margin: 0 0 18px 0; display: flex; gap: 12px; } .business-enquiry__steps-list { list-style: none; padding: 0; margin: 0; } .business-enquiry__step-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; font-size: 14px; } .business-enquiry__step-item:last-child { margin-bottom: 0; } .business-enquiry__step-number { background-color: rgba(209, 224, 217, 0.4); color: #115f3f; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .business-enquiry__step-text { color: #476b59; padding-top: 2px; } .business-enquiry__text-muted { color: #94a3b8; font-size: 14px; } .business-enquiry__text-success { color: #10b981; } .business-enquiry__text-error { color: #ef4444; font-size: 14px; margin-top: 4px; } .business-enquiry__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 768px) { .business-enquiry { padding: 0 16px; } .business-enquiry__section--highlighted { padding: 16px; } } h1, h2, h3 { max-width: 1100px; margin: 0 auto; } h3 { margin-bottom: 24px; margin-top: 80px; } @media only screen and (max-width: 1100px) { h3 { margin-left: 28px; } } #centred-header .secondary { font-size: 20px; font-weight: 700; padding: 14px 36px; } @media only screen and (max-width: 1024px) { .centred-header--coverage { padding: 0px 20px; } } .centred-header--coverage h1 { text-align: center; font-size: 48px; font-style: normal; font-weight: 900; line-height: normal; margin-bottom: 0px !important; } .centred-header--coverage h1 span { text-decoration: underline; } .centred-header--coverage h2 { font-size: 36px; font-style: normal; font-weight: 900; line-height: normal; text-align: center; margin: 40px auto; } .centred-header--coverage h5 { text-align: center; font-size: 24px; font-style: normal; font-weight: 500; line-height: normal; margin-bottom: 40px; } .centred-header--coverage p { text-align: center; margin: 20px 0px; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } #impact-approach { max-width: 1100px; margin: 80px auto 0 auto; border-radius: 24px; background-color: white; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); display: flex; align-items: center; } @media only screen and (max-width: 1100px) { #impact-approach { margin: 28px; } } #impact-approach img { margin: 0 48px 48px 48px; } @media only screen and (max-width: 1100px) { #impact-approach img { width: 100%; box-sizing: border-box; margin: 0; padding: 48px 24px 0 24px; } } #impact-approach #text { padding: 64px; } #impact-approach #text h4 { font-size: 24px; margin-bottom: 12px; } @media only screen and (max-width: 1100px) { #impact-approach { flex-direction: column-reverse; } } #founders { display: flex; gap: 16px; max-width: 1100px; margin: 0 auto; } @media only screen and (max-width: 1100px) { #founders { flex-direction: column; margin: 28px; } } #founders .founder { border-radius: 24px; background-color: white; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px; flex: 1; } #founders .founder h4 { font-size: 28px; font-weight: 700; margin-bottom: -2px; } #founders .founder h5 { font-size: 18px; font-weight: 400; margin-bottom: 24px; } #founders .founder img { width: 160px; height: 160px; border-radius: 100px; margin-bottom: 24px; } #founders .founder p { font-size: 15px; } #founders .founder a { background-color: #0b66c2; display: flex; color: white; font-weight: 700; padding: 8px 16px; border-radius: 40px; transition: transform 0.3s ease; margin-top: 28px; } #founders .founder a img { width: 20px; height: 20px; margin-right: 8px; margin-bottom: 0; border-radius: 0; } #founders .founder a:hover { transform: scale(0.95); } #partners { display: flex; max-width: 1100px; flex-direction: column; gap: 16px; margin: 0 auto; } #partners .partner { border-radius: 24px; background-color: white; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); display: flex; flex-direction: row; align-items: center; } @media only screen and (max-width: 1100px) { #partners .partner { flex-direction: column; margin: 0 28px; } } #partners .partner h4 { font-size: 28px; font-weight: 700; } #partners .partner .partner-image { flex: 0 0 280px; align-self: stretch; display: flex; align-items: center; justify-content: center; border-top-left-radius: 24px; border-bottom-left-radius: 24px; } #partners .partner .partner-text { padding: 32px; } #why-we-started { margin-top: 80px; position: relative; width: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } #why-we-started h4 { font-weight: 700; font-size: 28px; margin-bottom: 8px; } #why-we-started #inner-container { max-width: 1100px; width: 100%; margin: 0 auto; } @media only screen and (max-width: 1100px) { #why-we-started #inner-container { margin: 28px; } } #why-we-started #box { padding: 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, white 100%); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04); backdrop-filter: blur(16px); text-align: left; max-width: 440px; } #why-we-started #box img { margin-bottom: 28px; height: 55px; } #mission { max-width: 1100px; margin: 72px auto 72px auto; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; gap: 16px; } @media only screen and (max-width: 1100px) { #mission { display: flex; flex-direction: column; margin: 40px 28px; } } #mission .teal-block { background-color: #1D6367; padding: 32px; border-radius: 24px; } #mission .teal-block h4 { font-size: 28px; margin-bottom: 12px; font-weight: 700; } #mission .teal-block p, #mission .teal-block h4 { color: white; } #mission .teal-block:nth-of-type(1) { grid-column: 1; grid-row: 1; } #mission #forest { grid-column: 2; grid-row: 1; width: 100%; height: 300px; object-fit: cover; border-radius: 24px; } #mission #light-icons { grid-column: 1; grid-row: 2; background-color: #C1F3D9; border-radius: 24px; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 1100px) { #mission #light-icons { height: 160px; } } #mission #light-icons img { width: 60%; } @media only screen and (max-width: 1100px) { #mission #light-icons img { width: 160px; } } #mission .teal-block:nth-of-type(2) { grid-column: 2; grid-row: 2; } .faq-container { max-width: 1100px; margin: 80px auto; } @media only screen and (max-width: 1100px) { .faq-container { margin: 0 28px; } .faq-container h3 { font-size: 32px; margin-top: 40px; } } .faq-container .faq-item { border-radius: 16px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08); background-color: white; } .faq-container .faq-item button { background-color: white; } .faq-container .faq-item .faq-question { width: 100%; padding: 20px; text-align: left; font-weight: bold; font-size: 18px; border: none; cursor: pointer; outline: none; display: flex; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1100px) { .faq-container .faq-item .faq-question { font-size: 16px; } } .faq-container .faq-item .faq-question .faq-icon { width: 32px; height: 32px; opacity: 0.4; } .faq-container .faq-item .faq-answer { padding: 0 20px 20px 20px; display: none; font-size: 16px; line-height: 1.5; font-weight: 500; } .faq-container .faq-item .faq-answer ul { margin-top: 8px; padding-left: 20px; } .faq-container .faq-item.open .faq-answer { display: block; } .faq-container .faq-item.open .faq-question .faq-icon { content: url("/assets/images/icons/chevron-up.svg"); } @media only screen and (max-width: 1100px) { #header-content { padding: 40px; } } @media only screen and (max-width: 1024px) { #header-content { padding: 28px; } } .hero-container { background-size: cover; background-position: center; background-repeat: no-repeat; height: 1000px; display: flex; flex-direction: column; align-items: center; padding: 0 40px; color: #000000; } .hero-container__main { background-image: url("/assets/images/backgrounds/landing-page-cover.jpg"); } .hero-container__business { background-image: url("/assets/images/backgrounds/business-page-cover.jpg"); } .hero-container__personal { background-image: url("/assets/images/backgrounds/personal-page-cover.jpg"); height: 1100px; } @media only screen and (max-width: 1024px) { .hero-container__personal { height: 1470px; } } @media only screen and (max-width: 1024px) { .hero-container { padding: 0 28px; } } .hero-container__image { margin: 0 auto; display: block; width: 150px; height: 150px; } .hero-container #trustpilot { cursor: pointer; margin-top: 72px; display: flex; border-radius: 40px; font-weight: 700; font-size: 16px; gap: 8px; padding: 8px 16px; background-color: white; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04); margin-bottom: 16px; } .hero-container #trustpilot.fixed { margin-top: 208px !important; } @media only screen and (max-width: 1024px) { .hero-container #trustpilot.fixed { margin-top: 148px !important; } } @media only screen and (max-width: 1024px) { .hero-container #trustpilot { margin-top: 32px; } } .hero-container__buttons { padding: 0px 0px 50px 0px; display: flex; gap: 25px; } .hero-container__button { display: inline-block; font-size: 20px; font-weight: 700; padding: 16px 36px; border-radius: 40px; transition: transform 0.3s ease; cursor: pointer; width: fit-content; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); } @media only screen and (max-width: 1024px) { .hero-container__button { padding: 16px 22px; font-size: 16px; } } .hero-container__button:hover { transform: scale(0.95); } .hero-container__button--green { background: linear-gradient(to bottom right, #063412, #1E7255); color: #FFFFFF; } .hero-container__button--white { background: #FFFFFF; color: #000000; } .hero-container__span { font-size: 16px; font-weight: 400; line-height: normal; } .hero-container__span--italic { font-style: italic; } .hero-container__span--center { text-align: center; } .hero-container__text--center { text-align: center; } @media only screen and (max-width: 1024px) { .hero-container__text { text-align: center; } } .hero-container #content { text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-container #content h1 { font-size: 44px; line-height: 1.3; font-weight: 900; } @media only screen and (max-width: 1024px) { .hero-container #content h1 { font-size: 28px; } } .hero-container #content h5 { font-size: 18px; font-weight: 400; margin-top: 16px; margin-bottom: 40px; } @media only screen and (max-width: 1024px) { .hero-container #content h5 { font-size: 16px; margin-bottom: 24px; } } .hero-container #content h1, .hero-container #content h5 { max-width: 840px; } .hero-container #content .cta { margin-top: 40px; margin-bottom: 88px; } @media only screen and (max-width: 1024px) { .hero-container #content .cta { margin-bottom: 44px; } } .hero-container #content .features { max-width: 1100px; display: flex; gap: 24px; } @media only screen and (max-width: 1024px) { .hero-container #content .features { flex-direction: column; gap: 12px; } } .hero-container #content .features__icon { width: 64px; height: 64px; } @media only screen and (max-width: 1024px) { .hero-container #content .features__icon { width: 52px; height: 52px; } } .hero-container #content .features div { display: flex; flex-direction: column; align-content: flex-start; text-align: left; gap: 24px; flex: 1; font-size: 20px; font-weight: 600; padding: 32px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04); backdrop-filter: blur(16px); } @media only screen and (min-width: 800px) { .hero-container #content .features div { transition: transform 0.3s ease; } .hero-container #content .features div:hover { transform: scale(0.95); cursor: default; } } @media only screen and (max-width: 1024px) { .hero-container #content .features div { align-items: center; padding: 16px 32px; font-size: 16px; gap: 16px; } } .partners__header { font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; text-align: center; margin-top: 45px; margin-bottom: 45px; } #home-logos-container { background-color: #FFFBF5; border-radius: 40px; padding: 16px 0 16px 0; position: relative; top: -44px; } .logos :first-child { width: 88px; } .logos :nth-child(2) { width: 140px; } .logos :nth-child(3) { width: 140px; } .logos :nth-child(4) { width: 108px; } .logos :nth-child(5) { width: 140px; } .logos :nth-child(6) { width: 132px; } .logos :last-child { width: 80px; } .dashboard-card { display: flex; background-color: #fff; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); border-radius: 24px; overflow: hidden; max-width: 1100px; margin: 0 auto 100px auto; } @media only screen and (max-width: 1100px) { .dashboard-card { flex-direction: column; margin: 0 28px 48px 28px; } } .dashboard-card .left { background-color: #C1F3D9; display: flex; align-items: center; justify-content: center; padding: 32px; width: 488px; } .dashboard-card .left img { width: 100%; max-width: 400px; height: auto; } @media only screen and (max-width: 1100px) { .dashboard-card .left { width: 100%; box-sizing: border-box; } } .dashboard-card .right { padding: 80px 40px; flex: 1; display: flex; flex-direction: column; justify-content: center; } @media only screen and (max-width: 1100px) { .dashboard-card .right { padding: 40px; } } .dashboard-card .right h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; } .dashboard-card .right ul { list-style: none; padding: 0; margin-bottom: 32px; } .dashboard-card .right ul li { display: flex; align-items: center; font-size: 17px; margin-bottom: 12px; font-weight: 500; } .dashboard-card .right ul li img { width: 24px; height: 24px; margin-right: 12px; opacity: 0.3; } .dashboard-card .right .cta { align-self: flex-start; } @media only screen and (max-width: 1100px) { .dashboard-card .right .cta { align-self: stretch; text-align: center; } } .dark-boxes { max-width: 1100px; margin: 0px auto 32px auto; } @media only screen and (max-width: 1100px) { .dark-boxes { margin: 0 28px; } } .dark-boxes h3 { margin-top: 0px; } .dark-boxes #boxes { display: flex; gap: 24px; } @media only screen and (max-width: 1100px) { .dark-boxes #boxes { flex-direction: column; gap: 12px; } .dark-boxes #boxes img { width: 48px; height: 48px; } } .dark-boxes #boxes div { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 32px; gap: 16px; background-color: #063412; border-radius: 24px; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 1100px) { .dark-boxes #boxes div { flex-direction: row; align-items: center; padding: 24px; } } .dark-boxes #boxes p { color: white; font-size: 20px; font-weight: 600; } @media only screen and (max-width: 1100px) { .dark-boxes #boxes p { font-size: 18px; } } .light-boxes { max-width: 1100px; margin: 64px auto 32px auto; } @media only screen and (max-width: 1100px) { .light-boxes { margin: 64px 28px 32px 28px; } } .light-boxes__box { flex: 2 0 42%; display: flex; flex-direction: row; align-items: flex-start; padding: 32px; gap: 12px; background-color: #FFFFFF; border-radius: 24px; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 1100px) { .light-boxes__box { flex-direction: row; align-items: center; padding: 24px; } } .light-boxes__box-row { display: flex; flex-direction: column; } .light-boxes #boxes { display: flex; flex-wrap: wrap; gap: 24px; } @media only screen and (max-width: 1100px) { .light-boxes #boxes { flex-direction: column; gap: 12px; } } @media only screen and (max-width: 1024px) { .light-boxes #boxes img { width: 100px; height: 100px; } } @media only screen and (min-width: 1025px) { .light-boxes #boxes img { width: 150px; height: 150px; } } .light-boxes #boxes h4 { font-size: 26px; font-style: normal; font-weight: 900; line-height: normal; color: #000000; padding-bottom: 50px; } .light-boxes #boxes p { color: #000000; font-size: 16px; font-weight: 400; } .carousel { position: relative; max-width: 1100px; height: 640px; overflow: hidden; margin: 0 auto; border-radius: 24px; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 1100px) { .carousel { margin: 28px; } } @media only screen and (max-width: 800px) { .carousel { height: 400px; } } .carousel .carousel-slide-container { display: flex; transition: transform 0.5s ease; } .carousel .carousel-slide { min-width: 100%; position: relative; } .carousel .carousel-slide .slide-image { width: 100%; height: 640px; object-fit: cover; overflow: hidden; } @media only screen and (max-width: 800px) { .carousel .carousel-slide .slide-image { height: 400px; } } .carousel .carousel-slide .slide-content { position: absolute; bottom: 32px; left: 32px; max-width: 600px; padding: 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, white 100%); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04); backdrop-filter: blur(16px); } @media only screen and (max-width: 800px) { .carousel .carousel-slide .slide-content { bottom: 16px; left: 12px; max-width: 500px; margin-right: 12px; } } .carousel .carousel-slide .slide-content .slide-logo { height: 60px; margin-bottom: 16px; } @media only screen and (max-width: 800px) { .carousel .carousel-slide .slide-content .slide-logo { height: 48px; margin-bottom: 8px; } } .carousel .carousel-slide .slide-content h2 { font-size: 28px; font-weight: 800; margin-bottom: 4px; } @media only screen and (max-width: 800px) { .carousel .carousel-slide .slide-content h2 { font-size: 24px; } } .carousel .carousel-slide .slide-content p { font-size: 15px; } @media only screen and (max-width: 800px) { .carousel .carousel-slide .slide-content p { display: none; } } .carousel-controls { display: flex; max-width: 280px; justify-content: center; align-items: center; margin: 24px auto 0 auto; border-radius: 100px; padding: 12px; border: 3px solid rgba(6, 52, 18, 0.1); } .carousel-controls .carousel-arrow { cursor: pointer; opacity: 0.9; } .carousel-dots { display: flex; justify-content: center; gap: 8px; margin: 0 64px; } .carousel-dot { width: 8px; height: 8px; background-color: rgba(6, 52, 18, 0.2); border-radius: 50%; transition: background-color 0.3s; } .carousel-dot.active { background-color: #063412; } .reviews { padding: 30px; } .reviews__rating { height: 25px; } .reviews__review { border-radius: 8px; width: 282px; margin: 0px 10px; opacity: 0.8; } .reviews__review:hover { transition: transform 0.3s ease; transform: translate3d(0px, 0px, 0px) scale3d(1.03, 1.03, 1.03) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4); opacity: 1; } .reviews__review-body { padding: 30px; display: block; } .reviews__head { text-align: center; font-size: 36px; font-weight: 900; margin-bottom: 30px; margin-top: 0px; } .reviews__header { color: #FFFFFF; margin: 0; padding: 20px 0px; font-size: 24px; font-weight: 700; line-height: 32px; } .reviews__text { color: #FFFFFF; } .reviews__reviewer { color: #FFFFFF; text-align: right; } .flickity-viewport { padding: 30px 0px; } .impact-section { padding: 24px; display: flex; flex-direction: column; gap: 16px; max-width: 1100px; margin: 0 auto; } .impact-section .impact-row { display: flex; gap: 16px; } .impact-section .impact-row:first-child .card { flex: 1; } .impact-section .impact-row:last-child .card { flex: 1; } .impact-section .card { background-color: white; padding: 24px; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-start; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); box-sizing: border-box; } .impact-section .card .icon { width: 40px; height: 40px; margin-bottom: 20px; object-fit: contain; opacity: 0.3; } .impact-section .card .number { font-size: 32px; font-weight: 900; } .impact-section .card .label { font-size: 18px; } @media (max-width: 768px) { .impact-section .impact-row { flex-direction: column; } .impact-section .card { width: 100%; } } #impact-disclaimer { text-align: center; font-size: 18px; opacity: 0.7; } .wide-card { max-width: 1100px; margin: 100px auto 0 auto; background-color: white; border-radius: 20px; overflow: hidden; display: flex; flex-direction: row; align-items: center; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); box-sizing: border-box; } @media only screen and (max-width: 1100px) { .wide-card { flex-direction: column; margin: 60px 28px; } } .wide-card .left { background-color: #C1F3D9; display: flex; align-items: center; justify-content: center; padding: 32px; width: 488px; } .wide-card .left img { width: auto; height: 300px; } .wide-card .right { padding: 48px; } @media only screen and (max-width: 1100px) { .wide-card .right { padding: 24px; } } .wide-card .right h2 { font-size: 28px; margin-bottom: 12px; } .wide-card .right .cta { margin-top: 32px; } @media only screen and (max-width: 400px) { .wide-card .right .cta { margin-top: 16px; } } .wide-card .right div { display: flex; gap: 12px; } .wide-card__link { text-decoration: underline; } .wide-card ul li { font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; padding: 10px 0px; } #sim .left { padding: 0; } #sim .left img { width: 580px; height: 100%; object-fit: cover; margin-right: 60px; } .logos :first-child { width: 88px; } .logos :nth-child(2) { width: 140px; } .logos :nth-child(3) { width: 140px; } .logos :nth-child(4) { width: 108px; } .logos :nth-child(5) { width: 140px; } .logos :nth-child(6) { width: 132px; } .logos :last-child { width: 80px; } .centred-title { text-align: center; font-size: 28px; margin-top: 100px; } @media only screen and (max-width: 1100px) { .centred-title { padding: 0 28px; } } #projects-container { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1100px; margin: 0 auto; } @media (min-width: 768px) { #projects-container { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { #projects-container { margin: 0 28px !important; } } #projects-container .project-card { background-color: white; overflow: hidden; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); border-radius: 24px; display: flex; flex-direction: column; padding: 32px; } #projects-container .project-card .project-image { border-radius: 16px; overflow: hidden; height: auto; object-fit: cover; } #projects-container .project-card .logo { margin-top: 28px; height: 48px; object-fit: contain; display: block; } #projects-container .project-card .project-header { font-size: 24px; font-weight: 900; margin: 20px 0px; } #projects-container .project-card p { font-size: 14px; margin: 0; } ::selection { background-color: #1E7255; color: white; } * { font-family: "Figtree", sans-serif; margin: 0; padding: 0; color: #000000; } body { background-color: #FFFBF5; } .bold { font-weight: 700; } .underline { text-decoration: underline; } a { text-decoration: none; color: inherit; } h3 { font-weight: 800; font-size: 36px; margin-bottom: 28px; } @media only screen and (max-width: 1100px) { h3 { font-size: 32px; margin-bottom: 20px; } } .cta { display: inline-block; font-size: 20px; font-weight: 700; padding: 16px 36px; background: linear-gradient(to bottom right, #063412, #1E7255); color: white; border-radius: 40px; transition: transform 0.3s ease; cursor: pointer; } @media only screen and (min-width: 800px) { .cta:hover { background: linear-gradient(to bottom right, #052d10, #217b5b); color: white; transform: scale(0.95); } } .logos { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; -ms-overflow-style: none; } .logos img { height: auto; filter: grayscale(100%); } @media only screen and (max-width: 1100px) { .logos { padding: 0 28px; gap: 24px; width: 100%; overflow: scroll; box-sizing: border-box; } } .logos::-webkit-scrollbar { display: none; } .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .tags .tag { background: grey; color: white; padding: 4px 12px; font-weight: 600; border-radius: 20px; font-size: 15px; } @media only screen and (max-width: 800px) { .tags .tag { font-size: 14px; padding: 2px 8px; } } .tags .biodiversity { background: green; } .tags .climate-action { background-color: #6495ED; } .secondary { display: inline-block; padding: 10px 20px; border-radius: 80px; transition: transform 0.3s ease; color: #063412; border: 2px solid #063412; cursor: pointer; } @media only screen and (min-width: 800px) { .secondary:hover { background: linear-gradient(to bottom right, #063412, #1E7255); color: white; transform: scale(0.93); opacity: 1 !important; } .secondary:hover:after { display: none; } } .cta-banner { box-sizing: border-box; background: linear-gradient(to bottom right, #063412, #1E7255); display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 80px auto 40px auto; border-radius: 24px; padding: 36px; } @media only screen and (max-width: 1100px) { .cta-banner { margin: 28px; flex-direction: column; padding: 24px; gap: 20px; align-items: stretch; } .cta-banner .cta { text-align: center; } } .cta-banner h4 { color: white; font-size: 24px; margin: 0; } .cta-banner form { display: flex; background: rgba(0, 0, 0, 0.15); border-radius: 40px; overflow: hidden; } .cta-banner form input[type=email] { border: none; padding: 16px 16px 16px 28px; background: transparent; color: white; outline: none; flex: 1; font-size: 16px; min-width: 120px; } .cta-banner form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.7); } .cta-banner form button { border: none; background: white; width: 80px; height: 48px; cursor: pointer; margin: 4px; padding-top: 4px; padding-right: 4px; border-radius: 48px; transition: transform 0.3s ease; } @media only screen and (min-width: 800px) { .cta-banner form button:hover { transform: scale(0.93); } } .cta-banner .cta { background: white; color: #063412; } .cta-banner ::selection { background-color: white; color: #063412; } #centred-header { text-align: center; display: flex; flex-direction: column; align-items: center; margin-top: 48px; } #centred-header h1 { margin-bottom: 8px; font-size: 36px; font-weight: 800; } #centred-header p { font-size: 18px; max-width: 800px; padding: 0; margin: 0 auto 24px; } @media only screen and (max-width: 1100px) { #centred-header { padding: 0 28px; margin-top: 12px; } } #centred-header.fixed { padding-top: 136px !important; } .sib-form.fixed { padding-top: 160px; } #network-coverage-container { display: flex; justify-content: center; margin: 0px 28px; } iframe { height: 700px; max-width: 1100px; width: 100%; border-radius: 16px; } #benefits-section { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; margin-bottom: 100px; margin-top: 100px; } @media only screen and (max-width: 1100px) { #benefits-section { margin: 28px; } } #benefits-section h2 { font-size: 24px; margin-bottom: 28px; font-weight: 800; } #benefits-section h3 { font-size: 18px; margin-bottom: 2px; } #benefits-section p { font-size: 15px; } #benefits-section .benefits-category { background-color: #fff; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); border-radius: 24px; padding: 32px; } #benefits-section .benefits-grid { display: flex; gap: 32px; } @media only screen and (max-width: 1100px) { #benefits-section .benefits-grid { flex-direction: column; } } #benefits-section .benefits-grid h3 { margin-top: 20px; } #benefits-section .benefit { flex: 1; display: flex; align-items: flex-start; gap: 12px; flex-direction: column; } #plan-features { display: flex; align-items: center; background-color: white; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); border-radius: 24px; gap: 24px; max-width: 1100px; margin: 64px auto 0 auto; box-sizing: border-box; border-radius: 24px; } @media only screen and (max-width: 1100px) { #plan-features { flex-direction: column; margin: 28px; padding: 0; } } #plan-features .plan-illustration { flex-shrink: 0; } #plan-features .plan-illustration img { display: block; height: auto; max-width: 450px; border-top-left-radius: 24px; border-bottom-left-radius: 24px; } @media only screen and (max-width: 1100px) { #plan-features .plan-illustration img { width: 100%; margin-top: 32px; border-radius: 24px; } } @media only screen and (max-width: 550px) { #plan-features .plan-illustration img { width: 100%; margin-top: 0px; border-radius: 0px; border-top-left-radius: 24px; border-top-right-radius: 24px; } } #plan-features .plan-details { padding: 40px 0px; } @media only screen and (max-width: 1024px) { #plan-features .plan-details { padding: 10px 0px; } } @media only screen and (max-width: 1100px) { #plan-features .plan-details { margin: 28px; } } #plan-features .plan-details h2 { font-size: 32px; font-weight: 800; margin-bottom: 20px; } @media only screen and (max-width: 1100px) { #plan-features .plan-details h2 { font-size: 24px; } } #plan-features .plan-details ul { list-style: none; padding: 0; margin-bottom: 28px; margin-right: 16px; } #plan-features .plan-details ul li { display: flex; gap: 12px; font-size: 16px; margin-bottom: 16px; font-weight: 500; align-items: center; line-height: 1.2; } @media only screen and (max-width: 1100px) { #plan-features .plan-details ul li { font-size: 15px; } } #plan-features .plan-details ul li img { height: 20px; width: 20px; flex-shrink: 0; } .plans { display: flex; gap: 20px; max-width: 1100px; margin: 24px auto 0 auto; } @media only screen and (max-width: 1100px) { .plans { flex-direction: column; margin: 28px; } } .plans .plan { display: flex; align-items: center; background-color: white; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); border-radius: 24px; padding: 64px 64px 64px 0; gap: 24px; max-width: 1100px; box-sizing: border-box; flex: 1; padding: 32px; flex-direction: column; align-items: flex-start; } .plans .plan .icon-and-title { display: flex; align-items: center; gap: 8px; } .plans .plan .plan-icon { width: 32px; height: 32px; } .plans .plan .plan-title { font-size: 20px; font-weight: 700; font-size: 28px; margin: 0; } .plans .plan .plan-features { list-style: none; padding: 0; margin: 0; } .plans .plan .plan-features li { font-size: 16px; margin-bottom: 16px; } #simple-features { display: flex; flex-direction: column; background-color: #fff; box-shadow: 0px 8px 28px -6px rgba(0, 0, 0, 0.04), 0px 18px 88px -4px rgba(0, 0, 0, 0.08); border-radius: 24px; overflow: hidden; max-width: 1100px; margin: 72px auto 80px auto; padding: 32px; box-sizing: border-box; gap: 16px; } #simple-features h4 { font-size: 32px; font-weight: 800; margin-bottom: 12px; } #simple-features h5 { font-size: 18px; padding-bottom: 16px; } #simple-features a { text-decoration: underline; opacity: 0.5; } @media only screen and (max-width: 1100px) { #simple-features { margin: 0 28px; } } .mobile-plans { width: 100%; display: block; max-width: 1100px; margin: 0 auto; margin-bottom: 50px; } .mobile-plans__container { display: block; width: 100%; } .mobile-plans__tabs-menu { max-width: 350px; display: inline-flex; text-align: center; background-color: rgba(0, 0, 0, 0.1019607843); border-radius: 8px; margin: auto 0; padding: 8px; } .mobile-plans__tab { background-color: rgba(221, 221, 221, 0); padding: 12px 20px; } .mobile-plans__tab--active { background-color: #fff; border-radius: 8px; padding: 12px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .mobile-plans__tab-text { text-align: left; cursor: pointer; color: #222; font-size: 16px; } .mobile-plans__prices-container { position: relative; } @media only screen and (min-width: 1024px) { .mobile-plans__prices-container { height: 620px; } } @media only screen and (max-width: 1023px) { .mobile-plans__prices-container { height: 1500px; } } .mobile-plans__prices { flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; margin: 40px 0; opacity: 0; position: absolute; z-index: 5; } .mobile-plans__prices--active { flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; margin: 40px 0; transition: all, opacity 1300ms; opacity: 1; z-index: 10; } @media only screen and (max-width: 1023px) { .mobile-plans__prices-list { grid-row-gap: 20px; width: auto; display: flex; flex-direction: column; } } @media only screen and (min-width: 1024px) { .mobile-plans__prices-list { grid-column-gap: 30px; grid-template: ". ." ".Area"/1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid; } } .mobile-plans__price { position: relative; pointer-events: auto; text-align: left; cursor: pointer; background-color: #fff; background-image: none; border: 1px solid #e4e4e4; justify-content: flex-end; align-items: center; height: auto; overflow: visible; border-radius: 8px; } .mobile-plans__price:hover { transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: brightness(110%); box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.4); transform-style: preserve-3d; } @media only screen and (min-width: 1024px) { .mobile-plans__price:hover { transform: translate3d(0px, 0px, 0px) scale3d(1.1, 1.1, 1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); } } @media only screen and (max-width: 1023px) { .mobile-plans__price:hover { transform: translate3d(0px, 0px, 0px) scale3d(1.05, 1.05, 1.05) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); } } .mobile-plans__price:hover .mobile-plans__label { display: block; } .mobile-plans__label { position: absolute; top: -20px; background-color: #000; color: white; padding: 10px 20px 10px 40px; left: 50%; width: 140px; text-align: center; margin-left: -100px; border-radius: 12px; display: none; } .mobile-plans__label strong { color: white; } .mobile-plans__label-icon { position: absolute; left: 0px; top: -14px; } .mobile-plans__price-header { padding-top: 20px; margin: 20px; color: #000; align-self: flex-start; margin-right: auto; font-size: 40px; font-weight: 700; line-height: 48px; } @media only screen and (max-width: 1023px) { .mobile-plans__price-header { padding-top: 0px; } } .mobile-plans__price-amount { margin: 10px 20px !important; color: #494949; padding-bottom: 0 !important; font-size: 24px !important; font-weight: 400; line-height: 32px; } .mobile-plans__button { border: 2px solid #1a0030; border-radius: 12px; justify-content: center; align-self: center; align-items: center; font-weight: 700; display: flex; color: #1a0030; text-align: center; margin: 20px; } @media only screen and (min-width: 1023px) { .mobile-plans__button { height: 60px; font-size: 18px; margin-top: 20px; } } @media only screen and (max-width: 1023px) { .mobile-plans__button { height: 40px; font-size: 14px; margin-top: 10px; } } .mobile-plans__benefits-list { margin-top: 40px; padding: 20px; position: relative; } .mobile-plans__benefits-list:before { position: absolute; content: ""; width: 80%; height: 1px; background-color: #e4e4e4; top: 0; } @media only screen and (max-width: 1023px) { .mobile-plans__benefits-list { margin-top: 20px; padding: 10px 20px; } } .mobile-plans__benefits-list-element { grid-column-gap: 15px; align-items: center; display: flex; color: #000; font-size: 16px; line-height: 1.6; position: relative; } @media only screen and (min-width: 1024px) { .mobile-plans__benefits-list-element { padding: 20px 0px 20px 40px; font-size: 16px; line-height: 1.6; } } @media only screen and (max-width: 1023px) { .mobile-plans__benefits-list-element { padding: 10px 0px 10px 40px; font-size: 14px; line-height: 1.4; } } @media only screen and (min-width: 1024px) { .mobile-plans__benefits-list-element:after { content: ""; height: 32px; width: 32px; background-color: rgba(27, 153, 59, 0.3019607843); border-radius: 100%; position: absolute; z-index: 2; left: 0; top: 18px; } .mobile-plans__benefits-list-element:before { left: 12px; top: 27px; content: ""; height: 10px; width: 4px; border-bottom: 2px solid #1b993b; border-right: 2px solid #1b993b; transform: rotate(45deg); position: absolute; z-index: 4; } } @media only screen and (max-width: 1023px) { .mobile-plans__benefits-list-element:after { content: ""; height: 22px; width: 22px; background-color: rgba(27, 153, 59, 0.3019607843); border-radius: 100%; position: absolute; z-index: 2; left: 0; top: 12px; } .mobile-plans__benefits-list-element:before { left: 8px; top: 16px; content: ""; height: 10px; width: 4px; border-bottom: 2px solid #1b993b; border-right: 2px solid #1b993b; transform: rotate(45deg); position: absolute; z-index: 4; } } /* Ensure embedded Stripe pricing table fills the available width */ #centred-header stripe-pricing-table { display: block; width: 100%; max-width: 1100px; } /*# sourceMappingURL=index.css.map */