body{
    margin: 0;
    padding: 0;
    background: var(--Midnight-Black-600, #131313);
}

.body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 70px;
    padding-top: 10vh;
    margin-left: auto;
    width:90%;
    margin-right: auto;
    border-right: 2px solid #555;
    border-left: 2px solid #555;
}

/*#region Fonts */
@font-face {
  font-family: "FH Lecturis";
  src: 
    url("static/fonts/fh-lecturis-font-family-1766419811-0/fhlecturistest-regular.otf");
}
@font-face {
  font-family: "Inter";
  src: url("static/fonts/Inter/Inter-VariableFont_opsz,wght.ttf");
}
@font-face{
  font-family: "neue";
  src: 
    local("neue")
    url("static/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplaylight.ttf");
}
@font-face{
  font-family: "jetbrains";
  src: url("static/fonts/JetBrainsMono-2.304/fonts/ttf/JetBrainsMonoNL-Regular.ttf");
}

.font-lecturis {
  font-family: "FH Lecturis", Arial, Helvetica, sans-serif;
}

.font-inter {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

.font-neue{
    font-family: "neue", Arial, Helvetica, sans-serif;
}
.font-jetbrains{
    font-family: "jetbrains", Arial, Helvetica, sans-serif;
}

.inter{
    font-family: "Inter";
}
.fhLec {
    font-family: "FH Lecturis";
}
.jetbrains{
    font-family: "jetbrains";
}

/*#endregion Fonts */

/*#region NAVBAR Content */
.navContainer{
    border-bottom: 2px solid #555555;
    padding: 25px;
}
.navbar {
    align-items: center;
    margin: auto;
    width:100%;
    display:grid;
    grid-template-columns: 10% 0% 80% 10%;
}
.vr{
    background-color: #D4D4D4;
    height: 90%;
    width: 1px;
}

.navbar img {
    margin-left: auto;
    /* width: 126px; */
    height: 22.68px;
    max-width: fit-content;
    padding-right: 15px;
}

.navbar nav{
    display:flex;
    gap: 16px;
    padding-left: 16px;
}
.launchNow {
    color: var(--White-Primary, #FFF);
    font-family: "FH Lecturis";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px; /* 118.75% */
    letter-spacing: -0.64px;

    border: 1px solid var(--Midnight-Black-300, #555);
    background-image: url("static/images/dotted-bg.png");
    background-blend-mode: multiply, normal;

    width: fit-content;

    display: flex;
    padding: 8px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.navbar nav button{
    background: none;
    border: none;
    color: #D4D4D4;
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.16px;
}

/*#endregion NAVBAR Content */

/*#region Hero Section */
.heroSection{
    display: flex;
    padding: 0 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
    word-wrap: break-word;
    padding-left: 90px;
}

.heroContainer{
    display: flex;
    width: 930px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}

.noCost{
    border: 1px solid var(--Midnight-Black-300, #555);
    background-image: url("static/images/launch-button.png");
    background-blend-mode: multiply, normal;

    display: flex;
    width: 157px;
    height: 34px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
}

.noCost span{
    position:absolute;
    color: var(--White-Primary, #FFF);
    font-family:neue;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1875rem; /* 118.75% */
}

.noCost svg {
    position:relative;
}

.noCost .top-left{
   transform: scale(1.39, 1.56);
}

.heroText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.heroText h1{
    margin: 0;
    color: var(--White-Primary, #FFF);
    /* Inter Display/H1 */
    font-family: "Inter";
    font-size: 4.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 4.75rem */
    letter-spacing: -0.1425rem;
}

.heroText p{
    margin:0;
    color: var(--White-Primary, #FFF);
    width: 70%;

    /* Inter Display/Subheading(Light) */
    font-family: "Inter";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 100;
    line-height: 2rem; /* 133.333% */
    letter-spacing: -0.03rem;
}

.heroText span{
    color: var(--White-Primary, #FFF);

    /* Inter Display/Subheading(Bold) */
    font-family: "Inter";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.03rem;
}

.actionButtons{
    display: flex;
    align-items: center;
    gap: 10px;
}

.bookSprint{
    display: inline-flex;
    padding: 8px 20px;
    align-items: center;
    gap: 10px;

    border: 1px solid var(--Midnight-Black-300, #555);
    background: var(--White-Primary, #FFF);

    color: var(--Midnight-Black-Primary, #000);
    font-family: "FH Lecturis";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1875rem; /* 118.75% */
    letter-spacing: -0.04rem;
}

/*#endregion Hero Section */

/*#region Trusted Parnters */
.trustedPartners {
    display: flex;
    align-items: center;
    gap: 50px;
    align-self: stretch;
}

.trustedText{
    width: 151px;
    height: 32px;

    color: var(--White-Primary, #FFF);
    font-family: "Inter";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 200;
    line-height: 1rem; /* 114.286% */
    letter-spacing: -0.00875rem;
}

.trustedLogos{
display: flex;
align-items: flex-start;
filter: blur(0.44999998807907104px);
}

.trustedLogos img{
    max-height: 3rem;
}

/*#endregion Trusted Parnters */

/*#region Workflow */
.workflowSection{
    border-top: 2px solid var(--Midnight-Black-300, #555);
    border-bottom: 3px solid var(--Midnight-Black-300, #555);
    background: var(--Midnight-Black-Primary, #000);

    display: flex;
    padding: 60px 0 15px 0;
    margin-top: 80px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.workflowContainer{
    display: flex;
    width: 1276px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.topWorkflow{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.workflowText{
    color: white;
}

.workflowText h2 {
    color: var(--White-Primary, #FFF);
    text-align: center;

    /* Jet-Brains-txt */
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2rem; /* 200% */
    letter-spacing: -0.02rem;
    text-transform: uppercase;
}

.workflowText h1{
color: var(--White-Primary, #FFF);
text-align: center;

font-size: 4rem;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 4rem */
letter-spacing: -0.12rem;
}

.workflowText h3{
    color: var(--White-Primary, #FFF);
    text-align: center;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2rem; /* 133.333% */
    letter-spacing: -0.03rem;
}

.workflowRect{
width: 100%;
height: 60px;
background-image: url("static/images/Rectangle 7.svg");
background-repeat: repeat;
margin-top:20px;
margin-bottom:20px;
}

.workflowImg{
    width: 90%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
}

.workflowImg img{
    width:80%;
    border: 2px inset #AAAA;
}

/*#endregion Workflow */

/*#region Services */
.servicesSection{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.servicesText{
    width: 100%;
    padding-bottom: 72px;
    border-bottom: 2px solid #555;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.servicesText p{
    color: var(--White-Primary, #FFF);
    margin:0;
    padding-left: 2.5vw;

    /* Jet-Brains-txt */
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2rem; /* 200% */
    letter-spacing: -0.02rem;
    text-transform: uppercase;
}

.servicesText h1{
    color: var(--White-Primary, #FFF);
    margin: 0;
    padding-left: 2.5vw;

    /* Inter Display/H2 */
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 4rem */
    letter-spacing: -0.12rem;
}

/*#endregion Services */

/*#region actual services */
.accServices{
    width: 100%;
}

.service{
    width: 100%;
    box-sizing: border-box;
    padding-top: 55px;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    padding-bottom: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 2px solid #555;
}

.lhsService {
    display: flex;
    width: 28vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.rhsService{
    display: flex;
    width: 28vw;
    flex-direction: column;
    align-items: flex-end;
    gap: 50px;
    align-self: stretch;
}

.rhsService > .serviceText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    text-align: right;
}

.serviceText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.serviceText h2{
    margin: 0;
    color: var(--White-Primary, #FFF);
    font-family: "jetbrains";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.02rem;
    text-transform: uppercase;
}

.serviceText h1{
    color: var(--White-Primary, #FFF);
    margin: 0;
    font-family: "inter";
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.09rem;
}

.serviceText p{
    margin:0;
    color: var(--White-Primary, #FFF);
    font-family: "inter";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 200;
    line-height: 100%;
    letter-spacing: -0.0375rem;
}

.service img{
    height: 40vh;
}

.forWho{
    display: flex;
    flex-direction: row;
    padding: 8px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border: 1px solid var(--Midnight-Black-300, #555);
    background: url("static/images/dotted-bg.png") lightgray 50% / cover no-repeat, #2A2A2A;
    background-blend-mode: multiply, normal;

    color: var(--White-Primary, #FFF);
    font-family: "FH Lecturis";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1875rem; /* 118.75% */
    letter-spacing: -0.04rem;
}

.forWho p{
    margin:0;
}

/*#endregion actual services */

/*#region Blockchain */

.blockChain img{
    transform: rotate(-11.797deg);
}

.blockChain {
    background-color: #000;
}


/*#endregion Blockchain */

/*#region Testimonial */
.testGroup{
     box-sizing: border-box;
     width: 100%;
}

.testGroup > .workflowRect{
    margin-bottom: 0;
}

.testSec{
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    display: flex;
    flex-direction: column;
    gap:25px;
}

.testText{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width:60%;
    color: var(--White-Primary, #FFF);

    /* Inter Display/H5 */
    font-family: "Inter";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 1.5rem */
    letter-spacing: -0.045rem;
}
.credits{
    padding-bottom:35px;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    color: var(--White-Primary, #FFF);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 1.125rem */
    letter-spacing: -0.03375rem;

}

.credits > div{
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.credits > div{
    color: var(--Tailwind-white, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Inter Display/Txt-Md(Medium) */
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 1rem */
}
.credits > div > span{
    color: var(--Tailwind-zinc-500, #71717A);
    font-feature-settings: 'liga' off, 'clig' off;

    /* Inter Display/Txt-Md(Medium) */
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 1rem */
}
/*#endregion Testimonial */

/*#region Steps */

.stepsSection{
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: #000;
    padding: 100px;
    top: -70px;
    gap: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 2px solid #555;
    border-bottom: 2px solid #555;
}

.stepsContainer{
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: space-evenly;
}

.stepText {
    width: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1.5vh;
}

.topText h1{
    margin: 0;
    color: var(--White-Primary, #FFF);
    text-align: center;

    /* Inter Display/H2 */
    font-family: "Inter";
    font-size: 4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 4rem */
    letter-spacing: -0.12rem;
}

.topText p{
    margin: 0;
    color: var(--White-Primary, #FFF);
    text-align: center;

    /* Jet-Brains-txt */
    font-family: "JetBrains";
    font-size: 1rem;
    font-style: normal;
    font-weight: 100;
    line-height: 2rem; /* 200% */
    letter-spacing: -0.02rem;
    text-transform: uppercase;
}

.step > h1{
    margin: 0;
    color: var(--Midnight-Black-50, #CBCBCB);
    text-align: center;
    font-family: "FH Lecturis";
    font-size: 6.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 6.875rem */
    letter-spacing: -0.20625rem;
}

.stepText h2{
    color: var(--White-Primary, #FFF);
    font-family: "JetBrains";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 0.875rem */
    letter-spacing: -0.01rem;
    text-transform: uppercase;
    margin:0;
}

.stepText h3{
    color: var(--White-Primary, #FFF);
    margin:0;

    /* FH Lecturis/H4 */
    font-family: "Inter";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 2.25rem */
    letter-spacing: -0.0675rem;
}

.stepText p{
    margin:0;
    color: var(--White-Primary, #FFF);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;

    /* Inter Display/Txt-Md(Light) */
    font-family: "Inter";
    font-size: 1rem;
    font-style: normal;
    font-weight: 100;
    line-height: 100%; /* 1rem */
}

/*#endregion Steps */