body {

margin: 0;

padding-top: 50px;

}


.header {

position: fixed;

color: #75ff00;

top: 0;

left: 0;

width: 100%;

background: black;

box-sizing: border-box;

display: flex;

justify-content: space-between;

z-index: 1000;

}


.brand-name {

display: flex;

width: 150px;

height: 50px;

background: black;

border: 1px solid black;

margin: 0;

justify-content: center;

align-items: center;

font-weight: bold;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.menu-box {

width: 400px;

height: 50px;

background-color: black;

border: 1px solid black;

display: flex;

align-items: center;

justify-content: space-between;

margin-left: auto;

}


.menu-box a {

text-decoration: none;

color: #75ff00;

font-weight: bold;

display: block;

padding-top: 0px;

padding-right: 5px;

padding-left: 5px;

}


.menu-box a:hover {

background-color: white;

color: black;

}


.menu {

display: none;

}


.menu-icon {

display: none;

}


.menu ul {

list-style: none;

padding: 0;

margin: 0;

}


.menu li {

padding: 15px;

border-bottom: 1px solid #666;

}


.menu a {

color: #75ff00;

text-decoration: none;

}


input[type="checkbox"] {

display: none;

}


@media (max-width: 767px) {

.menu-box {

display: none;

}


.header {

justify-content: center;

}


.menu {

position: fixed;

top: 0;

left: -200px;

width: 200px;

height: 100%;

background: black;

padding-top: 60px;

transition: left 0.3s ease;

z-index: 1002;

display: block;

font-weight: bold;

}


.menu-icon {

position: fixed;

top: 10px;

left: 20px;

color: #75ff00;

font-size: 24px;

cursor: pointer;

z-index: 1003;

display: block;

font-weight: bold;

}


input[type="checkbox"]:checked + .menu {

left: 0;

}

}


.board {

position: relative;

height: calc(100dvh - 50px);

width: 100%;

}


.board img {

height: 100%;

width: 100%;

}


.board-brand-tagline {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

color: #75ff00;

font-size: 35px;

}


.board-brand-tagline h1{

margin: 0px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.board-brand-tagline h2{

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

}


.explore-button {

padding-top: 10px;

padding-bottom: 10px;

padding-right: 20px;

padding-left: 20px;

background-color: black;

color: #75ff00;

text-decoration: none;

border-radius: 5px;

font-size: 1.2rem;

transition: background-color 0.3s;

font-weight: bold;

}


.explore-button:hover {

background-color: white;

color: black;

}


html {

scroll-behavior: smooth;

}


.first-flex {

background: black;

background-blend-mode: overlay;

padding-bottom: 60px;

}


#our-offerings {

font-size: 44px;

color: #75ff00;

margin: 0px;

text-align: center;

font-family: Georgia, serif;

padding-top: 50px;

padding-bottom: 50px;

}


@media (max-width: 767px) {

#our-offerings {

font-size:30px;

}

}


.first-flex-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

padding-left: 25px;

padding-right: 25px;

}


.first-flex-container > div {

background: linear-gradient(to right, rgba(10, 10, 10, 0.3), rgba(51, 51, 51, 0.3));

color: #75ff00;

margin: 10px;

padding: 0px;

text-align: center;

border-radius: 0px;

width: calc(33.33% - 20px);

box-sizing: border-box;

height: 500px;

}


.first-flex-container div img{

height: 90%;

width: 100%;

}


.first-flex-container div p {

font-size: 25px;

}


@media (max-width: 767px) {

.first-flex-container {

flex-direction: column;

justify-content: center;

padding-right: 15px;

padding-left: 15px;

}

}


@media (max-width: 767px) {

.first-flex-container > div {

width: calc(100% - 20px);

font-size: 16px;

margin: 10px;

}

}


.flex-one-button {

color: black;

text-decoration: none;

display: inline-block;

background-color: #75ff00;

margin-top: 18px;

width: 100%;

font-weight: bold;

}


.flex-one-button p {

margin: 0px;

}


@media (min-width: 767px) and (max-width: 1137px) {

.first-flex-container div p {

font-size: 15px;

}

}


@media (min-width: 1px) and (max-width: 419px) {

.first-flex-container div p {

font-size: 16px;

}

}


.flex-one-button:hover {

background-color: white;

}


.line {

position: relative;

width: 100%;

height: 7px;

background-color: #75ff00;

animation: expandline 1s ease-in-out infinite;

}


@keyframes expandline {

0% {

width: 0;

left: 50%;

}

50% {

width: 100%;

left: 0;

}

100% {

width: 100%;

left: 0;

}

}


.statement-1 {

background-color: black;

}


.statement-1 p{

color: #75ff00;

margin: 0px;

font-size: 80px;

padding-top: 50px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.statement-2 {

background-color: black;

}


.statement-2 p{

color: #75ff00;

margin: 0px;

font-size: 75px;

padding-top: 0px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

}


.statement-list {

background-color: black;

overflow: hidden;

width: 100%;

padding-bottom: 60px;

}


.statement-list p{

font-size: 35px;

color: #75ff00;

margin: 0;

padding-top: 15px;

font-family: 'Inter', sans-serif;

font-weight: 100;

font-style: italic;

position: relative;

}


@media (max-width: 431px) {

.statement-1 p {

font-size: 24px;

padding-right: 15px;

padding-left: 15px;

}


.statement-2 p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}


.statement-list p {

font-size: 16px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 431px) and (max-width: 650px) {

.statement-1 p {

font-size: 30px;

padding-right: 15px;

padding-left: 15px;

}


.statement-2 p {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}


.statement-list p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 650px) and (max-width: 900px) {

.statement-1 p {

font-size: 40px;

padding-right: 15px;

padding-left: 15px;

}


.statement-2 p {

font-size: 35px;

padding-right: 15px;

padding-left: 15px;

}


.statement-list p {

font-size: 30px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 900px) and (max-width: 1080px) {

.statement-1 p {

font-size: 60px;

padding-right: 15px;

padding-left: 15px;

}


.statement-2 p {

font-size: 55px;

padding-right: 15px;

padding-left: 15px;

}


.statement-list p {

font-size: 40px;

padding-right: 15px;

padding-left: 15px;

}

}


.statement-list-1 {

animation: moveLeftToRight1 15s linear infinite;

}


.statement-list-2 {

text-align: right;

animation: moveRightToLeft1 15s linear infinite;

}


.statement-list-3 {

animation: moveLeftToRight2 15s linear infinite;

}


.statement-list-4 {

text-align: right;

animation: moveRightToLeft2 15s linear infinite;

}


.statement-list-5 {

animation: moveLeftToRight3 15s linear infinite;

}


@keyframes moveLeftToRight1 {

0% {

left: -0%;

}

100% {

left: 100%;

}

}


@keyframes moveRightToLeft1 {

0% {

right: -0%;

}

100% {

right: 100%;

}

}


@keyframes moveLeftToRight2 {

0% {

left: -0%;

}

100% {

left: 100%;

}

}


@keyframes moveRightToLeft2 {

0% {

right: -0%;

}

100% {

right: 100%;

}

}


@keyframes moveLeftToRight3 {

0% {

left: -0%;

}

100% {

left: 100%;

}

}


.facts {

background-color: black;

}


.facts p{

color: #75ff00;

margin: 0px;

font-size: 80px;

padding-top: 50px;

padding-bottom: 20px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


@media (max-width: 409px) {

.facts p {

font-size: 17px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 409px) and (max-width: 588px) {

.facts p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 588px) and (max-width: 767px) {

.facts p {

font-size: 30px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 767px) and (max-width: 946px) {

.facts p {

font-size: 40px;

}

}


@media (min-width: 946px) and (max-width: 1125px) {

.facts p {

font-size: 50px;

}

}


@media (min-width: 1125px) and (max-width: 1484px) {

.facts p {

font-size: 60px;

}

}


.fatcs-list {

background-color: black;

padding-bottom: 60px;

}


.fatcs-list h1{

color: #75ff00;

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

padding-left: 25px;

padding-right: 25px;

padding-top: 15px;

font-size: 50px;

}


.fatcs-list p{

color: #75ff00;

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 100;

font-style: italic;

padding-left: 25px;

padding-right: 25px;

padding-top: 15px;

padding-bottom: 15px;

font-size: 40px;

}


@media (max-width: 409px) {

.fatcs-list h1 {

font-size: 17px;

padding-right: 15px;

padding-left: 15px;

}


.fatcs-list p {

font-size: 17px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 409px) and (max-width: 588px) {

.fatcs-list h1 {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}


.fatcs-list p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 588px) and (max-width: 813px) {

.fatcs-list h1 {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}


.fatcs-list p {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 813px) and (max-width: 1068px) {

.fatcs-list h1 {

font-size: 30px;

}


.fatcs-list p {

font-size: 20px;

}

}


@media (min-width: 1068px) and (max-width: 1323px) {

.fatcs-list h1 {

font-size: 40px;

}


.fatcs-list p {

font-size: 30px;

}

}


.fatcs-list-items {

animation: zoomout linear forwards;

animation-timeline: view();

animation-range: entry;

scale: 0; opacity: 0;

}


@keyframes zoomout {

to { scale: 1; opacity: 1;}

}


.how-it-works-heading {

background-color: black;

}


.how-it-works-heading p{

color: #75ff00;

margin: 0px;

font-size: 80px;

padding-top: 50px;

padding-bottom: 30px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


@media (min-width: 1px) and (max-width: 361px) {

.how-it-works-heading p{

font-size: 30px;

}

}


@media (min-width: 361px) and (max-width: 439px) {

.how-it-works-heading p{

font-size: 40px;

}

}


@media (min-width: 439px) and (max-width: 517px) {

.how-it-works-heading p{

font-size: 50px;

}

}


@media (min-width: 517px) and (max-width: 673px) {

.how-it-works-heading p{

font-size: 60px;

}

}


.how-it-works {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

padding-left: 25px;

padding-right: 25px;

background: black;

padding-top: 0px;

padding-bottom: 60px;

}


.how-it-works > div {

background: linear-gradient(to right, rgba(10, 10, 10, 0.3), rgba(51, 51, 51, 0.3));

color: #75ff00;

margin: 10px;

padding: 0px;

text-align: center;

border-radius: 0px;

width: calc(33.33% - 20px);

box-sizing: border-box;

height: 300px;

}


.how-it-works div img{

height: 160px;

width: 160px;

border-radius: 140px;

object-fit: scale-down;

}


@media (max-width: 767px) {

.how-it-works {

flex-direction: column;

justify-content: center;

padding-right: 15px;

padding-left: 15px;

}

}


@media (max-width: 767px) {

.how-it-works > div {

width: calc(100% - 20px);

font-size: 16px;

margin: 10px;

}

}


.how-it-works-step {

color: #75ff00;

font-size: 40px;

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

}


.how-it-works-step p {

margin: 0px;

}


.how-it-works-text {

font-family: 'Inter', sans-serif;

font-weight: 100;

font-style: italic;

font-size: 25px;

}


@media (min-width: 767px) and (max-width: 1019px) {

.how-it-works-text {

font-size: 20px;

}

}


@media (min-width: 1px) and (max-width: 354px) {

.how-it-works-text {

font-size: 20px;

}

}


.facts-2 {

background-color: black;

}


.facts-2 p{

color: #75ff00;

margin: 0px;

font-size: 80px;

padding-top: 50px;

padding-bottom: 20px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


@media (max-width: 444px) {

.facts-2 p {

font-size: 23px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 378px) and (max-width: 444px) {

.facts-2 p {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 444px) and (max-width: 575px) {

.facts-2 p {

font-size: 30px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 575px) and (max-width: 706px) {

.facts-2 p {

font-size: 40px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 706px) and (max-width: 837px) {

.facts-2 p {

font-size: 50px;

}

}


@media (min-width: 837px) and (max-width: 1027px) {

.facts-2 p {

font-size: 60px;

}

}


@media (min-width: 1027px) and (max-width: 1223px) {

.facts-2 p {

font-size: 70px;

}

}


.fatcs-list-2 {

background-color: black;

padding-bottom: 60px;

}


.fatcs-list-2 h1{

color: #75ff00;

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

padding-left: 25px;

padding-right: 25px;

padding-top: 15px;

font-size: 60px;

}


.fatcs-list-2 p{

color: #75ff00;

margin: 0px;

font-family: 'Inter', sans-serif;

font-weight: 100;

font-style: italic;

padding-left: 25px;

padding-right: 25px;

padding-top: 15px;

padding-bottom: 15px;

font-size: 50px;

}


@media (max-width: 409px) {

.fatcs-list-2 h1 {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}


.fatcs-list-2 p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 409px) and (max-width: 559px) {

.fatcs-list-2 h1 {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}


.fatcs-list-2 p {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 559px) and (max-width: 813px) {

.fatcs-list-2 h1 {

font-size: 30px;

padding-right: 15px;

padding-left: 15px;

}


.fatcs-list-2 p {

font-size: 20px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 813px) and (max-width: 1068px) {

.fatcs-list-2 h1 {

font-size: 40px;

}


.fatcs-list-2 p {

font-size: 30px;

}

}


@media (min-width: 1068px) and (max-width: 1323px) {

.fatcs-list-2 h1 {

font-size: 50px;

}


.fatcs-list-2 p {

font-size: 40px;

}

}


.conclusion {

background-color: black;

}


.conclusion p{

color: #75ff00;

margin: 0px;

font-size: 75px;

padding-top: 50px;

padding-bottom: 0px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


@media (min-width: 1px) and (max-width: 444px) {

.conclusion p {

font-size: 21px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 444px) and (max-width: 575px) {

.conclusion p {

font-size: 25px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 575px) and (max-width: 706px) {

.conclusion p {

font-size: 35px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 706px) and (max-width: 837px) {

.conclusion p {

font-size: 45px;

}

}


@media (min-width: 837px) and (max-width: 1027px) {

.conclusion p {

font-size: 55px;

}

}


@media (min-width: 1027px) and (max-width: 1223px) {

.conclusion p {

font-size: 65px;

}

}


.conclusion-statement {

background-color: black;

}


.conclusion-statement p{

color: #75ff00;

margin: 0px;

font-size: 55px;

padding-top: 20px;

padding-bottom: 40px;

padding-left: 25px;

padding-right: 25px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

}


@media (min-width: 1px) and (max-width: 444px) {

.conclusion-statement p {

font-size: 21px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 444px) and (max-width: 575px) {

.conclusion-statement p {

font-size: 23px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 575px) and (max-width: 706px) {

.conclusion-statement p {

font-size: 30px;

padding-right: 15px;

padding-left: 15px;

}

}


@media (min-width: 706px) and (max-width: 837px) {

.conclusion-statement p {

font-size: 35px;

}

}


@media (min-width: 837px) and (max-width: 1027px) {

.conclusion-statement p {

font-size: 40px;

}

}


@media (min-width: 1027px) and (max-width: 1223px) {

.conclusion-statement p {

font-size: 45px;

}

}


.conclusion-button-container {

background-color: black;

display: flex;

justify-content: center;

padding-bottom: 60px;

}


.conclusion-button {

padding-top: 10px;

padding-bottom: 10px;

padding-right: 20px;

padding-left: 20px;

background-color: #75ff00;

color: black;

text-decoration: none;

border-radius: 5px;

font-size: 3vw;

transition: background-color 0.3s;

font-weight: bold;

}


.conclusion-button:hover {

background-color: white;

color: black;

}


.footer {

background: black;

}


.footer-start {

display: flex;

}


.brand-name-footer {

margin: 0px;

font-size: 30px;

color: #75ff00;

padding-left: 25px;

padding-top: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.social-icons i {

font-size: 40px;

color: #75ff00;

transition: color 0.3s ease;

}


.social-icons i:hover {

color: #1da1f2;

}


.social-icons {

padding-top: 25px;

padding-right: 25px;

width: 400px;

display: flex;

align-items: center;

justify-content: space-between;

margin-left: auto;

}


.brand-tagline p {

margin: 0px;

font-size: 30px;

color: #75ff00;

padding-left: 25px;

padding-top: 25px;

padding-right: 25px;

font-family: 'Inter', sans-serif;

font-weight: 400;

font-style: italic;

}


.footer-links {

font-size: 20px;

padding-top: 45px;

padding-left: 25px;

padding-right: 25px;

color: #75ff00;

display: flex;

align-items: center;

justify-content: space-between;

}


.footer-links a {

text-decoration: none;

color: #75ff00;

font-weight: bold;

}


.footer-links a:hover {

background-color: white;

color: black;

}


.copyright {

padding-top: 45px;

padding-bottom: 10px;

text-align: center;

color: #75ff00;

padding-right: 25px;

padding-left: 25px;

font-family: 'Poppins', sans-serif;

font-weight: 800;

font-style: italic;

}


.copyright p {

margin: 0px;

}


@media (max-width: 767px) {

.footer-start {

flex-direction: row;

align-items: center;

justify-content: space-between;

padding-left: 15px;

padding-top: 15px;

}


.brand-name-footer {

font-size: 24px;

padding-left: 0;

padding-top: 0;

}


.social-icons {

flex-direction: row;

align-items: center;

width: auto;

margin-left: auto;

padding-right: 15px;

padding-top: 0;

}


.social-icons i {

font-size: 30px;

margin-left: 10px;

}


.brand-tagline p {

font-size: 16px;

padding-left: 15px;

padding-top: 10px;

padding-right: 15px;

}


.footer-links {

flex-direction: column;

padding-top: 20px;

padding-left: 0;

padding-right: 0;

align-items: center;

justify-content: center;

}


.footer-links a {

font-size: 18px;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}


.copyright {

font-size: 14px;

padding-top: 20px;

padding-bottom: 20px;

padding-right: 15px;

padding-left: 15px;

}

}