@font-face {
    font-family: grotesk;
    src: url(Founders_Grotesk/FoundersGrotesk-Bold.otf);
}

@font-face {
    font-family: lightgrotesk;
    src: url(Founders_Grotesk/FoundersGrotesk-Light.otf);
}

@font-face {
    font-family: boldgrotesk;
    src: url(Founders_Grotesk/FoundersGrotesk-Semibold.otf);
}

@font-face {
    font-family: medigrotesk;
    src: url(Founders_Grotesk/FoundersGrotesk-Medium.otf);
}

@font-face {
    font-family: semiboldgro;
    src: url(Founders_Grotesk/FoundersGrotesk-Semibold.otf);
}

@font-face {
    font-family: regulargro;
    src: url(Founders_Grotesk/FoundersGrotesk-Regular.otf);
}

body, html {
  overflow-x: hidden;
  width: 100vw;
  box-sizing: border-box;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
    margin: 0px;
    
}

::selection{
    background-color: rgb(189, 51, 227);
}

.logo {
    width: 110px;
    height: 32px;
    margin-left: 15px;
    margin-top: 5px;
}

 .navigationbar {   /*Main Navigationbar Parent flex*/
    display: flex;
    justify-content: space-between;
    z-index: 10;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    background-color: rgb(245, 244, 244);
    position: fixed; /*Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    padding-top: 7px;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.24),0 1px 50px 0 rgba(0,0,0,0.19);
    overflow: visible; 
 }   

.product {
    justify-content: flex-end;
    font-family: medigrotesk;
    font-weight:15;   
}

.naviright{   /*right elements of navi child flex 2 */
   display: flex;
   order: 2;   
   justify-content: flex-end;
   flex-direction: row;
   text-decoration: none;
   gap: 0px 20px;
   font-size: 19px;
   padding-right: 20px;
   place-self: center end;
}

.navilogo {  /*logo div child flex 1 */
    display: flex;
    order: 1;  
    
}

.startedbtn{
    height: 41px;
    width: 130px;
    border: 1px solid #0305d4;
    background-color: #0305d4;
    border-radius: 7px;
    font-family: medigrotesk;
    color: white;
    font-size: 18px;
    padding-top: 7px;
    line-height: 1em;
    margin-top: 7px;
    transition: box-shadow 0.3s;
}

.loginflex {
    display: flex;
    gap: 0px 20px;
}



.product:hover {
    color: #0305d4;
    cursor: pointer;
    text-decoration: underline;
}

.startedbtn:hover {
    cursor: pointer;
    background-color: rgba(0, 20, 255);
    box-shadow: 0 9px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}


.header {
    display: flex;
    justify-content: center; 
    flex-grow: 0px;
    flex-shrink: 0px;
    margin-top: 130px;
    margin-right: 20px;
    margin-left: 0px;
    flex-direction: column; 
}
.way {
    text-align: center;
    font-family: semiboldgro;
    font-size: 58px;
    color:#01033e;
    margin: 0px 0px 0px 0px;
}

.market{
    display: flex;
    justify-content: center;   
}

.marketplace{
    font-size: 58px;
    font-family: semiboldgro;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0px 0px 0px 0px;
    color: #0305d4;
    
}

#pro #pricing #Showcase #Academy #Login {
    margin-top: 0px;
}

.wayto{
    display: flex;
    justify-content: center;
    width: calc(100% - 0px);
}

.withcode {
    display: flex;
    justify-content: center;
    width: calc(100% - 0px);
}

.code {
    text-align: center;
    font-family: semiboldgro;
    font-size: 58px;
    color:#01033e;
    margin: 0px 0px 0px 0px;
}

.description {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 17px;
    margin-left: 5px;
    margin-right: 5px;
} 

.des {
    margin: 0px;
   font-family: regulargro ;
   font-size: 24px; 
}

.freebtn {
    display: flex;
    justify-content: center;
    margin-top: 27px;
    
}

.free {
    height: 46px;
    width: 275px;
    border: 1px solid #0305d4;
    background-color: #0305d4;
    color: white;
    font-family: medigrotesk;
    font-size: 22px;
    border-radius: 6px;
    padding-top: 8px;
    
}

.free:hover {
    cursor: pointer;
    background-color: rgba(0, 20, 255);  
}

.ppl {
    display: flex;
    justify-content: inherit;
}

.people{
    font-family: regulargro;
    font-size: 18px;
    margin: 0px;
    margin-top: 8px;
}

.secondpage {
    display: flex;
    margin-top: 230px;
    justify-content: center;
}

.twopage {
    font-family: boldgrotesk;
    font-size: 48px;
    text-align: center;
    margin: 0px;
    padding: 0px 15px 0px 15px;
}

.edit{
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 45px;
}

.see {
    font-family: medigrotesk;
    font-size: 28px;
    color: #0305d4;
    padding: 8px 0px 8px 0px;
    cursor: pointer;
}

.see:hover {
    color: rgba(0, 20, 255);
}

.windimg {
    display: flex;
    justify-content: center;
    margin-bottom: 70px;
}

.thirdpage {
     background-color: #f3f3f3;
    height: 900px;
    margin-top: 10px;
    
}

.awsimg {
    margin: 0px 55px 0px 0px;
    box-shadow: rgba(17, 18, 38, 0.15) 0px 0px 50px 0px;
    height: 445px;
    width: auto;
     position: relative; 
    top: 55px;
    border-radius: 10px;
    cursor: pointer; 
}

.fulldiv {
    display: flex;
    justify-content: center;
}

.full {
    font-family: medigrotesk;
    font-size: 44px;
    margin-bottom: 24px;
}

.multidiv {
    display: flex;
    justify-content: center;
}

.multi {
    font-family: regulargro;
    font-size: 22px;
    text-align: center;
    max-width: 570px;
    word-spacing: 2px;
    line-height: 27px;
    margin-top: 0px;
}

.freebtn2 {
    display: flex;
    justify-content: center;
    margin-top: 11px; 
}

.free2 {
    height: 46px;
    width: 340px;
    border: 1px solid #0305d4;
    background-color: #0305d4;
    color: white;
    font-family: medigrotesk;
    font-size: 22px;
    border-radius: 6px;
    padding-top: 8px;
}

.fourthpage {
    display: flex;
    background-color: #fdfdfd;
    height: 700px;
    flex-direction: column;
}

.triimg {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 209px;
    margin-right: 209px;
  
}

.img1 {
    display: flex;
    order: 1;
    
}

.img2 {
    display: flex;
    order: 2;
}

.img3 {
    display: flex;
    order: 3;
}

.bestimg {
    width: 345px;
    max-height: 225px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 57px;
    box-sizing: content-box;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.figurediv {
    display: flex;
    
}

.figurediv p {
    font-family: medigrotesk;
    font-size: 22px;
    margin-top: 0px;
    text-align: justify;
    margin-left: 200px;
    background-color: white;
    width: 320px;
    padding-left: 25px;
    position: relative;
    right: -9px;
    height: 45px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    
    padding-top: 10px;
}

.dale {
    font-family: regulargro;
    font-size: 16px;  
}

.figurediv2 {
    display: flex;
}

.figures {
   display: flex;
   flex-direction: row; 
}

.figurediv2 p {
    font-family: medigrotesk;
    font-size: 22px;
    margin-top: 0px;
    text-align: justify;
    margin-left: 200px;
    background-color: white;
    width: 320px;
    padding-left: 25px;
    position: relative;
    right: 171px;
    height: 45px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding-top: 10px;
    
}

.gugli {
    font-family: regulargro;
    font-size: 16px;  
}

.nucode {
    display: flex;
}

.nucode p {
    font-family: medigrotesk;
    font-size: 22px;
    margin-top: 0px;
    text-align: justify;
    margin-left: 200px;
    background-color: white;
    width: 320px;
    padding-left: 25px;
    position: relative;
    right: 351px;
    height: 45px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding-top: 10px;   
}

.joe {
    font-family: regulargro;
    font-size: 16px;  
}

.pixelhead {
    display: flex;
}
    
#tik {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pixelhead {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.pixel h1 {
    font-family: medigrotesk;
    font-size: 44px;
    font-weight: 60.2;
    margin-top: 50px;
    text-align: center;
    margin-bottom: 0px;
}

.pixeldis {
    display: flex;
    text-align: center;
    justify-content: center;
}

.pixeldis p {
    font-family: regulargro;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 30.8;
}

.free2:hover {
    cursor: pointer;
    background-color: rgba(0, 20, 255);
}

.awsimg:hover {
    cursor: pointer;
}

.fifthpage {
    display: flex;
    background-color: #f3f3f3;
    justify-content: center;
    flex-direction: column;
    
}

.graph{
    display: flex;
    justify-content: center;
    align-items: center;
}

.graphimg {
    width: 780px;
    height: auto;
    margin-top: 46px;
}

.grahead {
    display: flex;
    justify-content: center;
}

.grahead h1 {
    font-size: 44px;
    font-family: medigrotesk;
    font-weight: 57.2;
    margin-top: 35px;
    margin-bottom: 15px;
}

.grades {
    display: flex;
    justify-content: center;
}

.grades p {
    font-family: regulargro;
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 5px;
}

.success {
    display: flex;
    justify-content: center;
    margin-top: 65px;
}

.success h1 {
    font-family: boldgrotesk;
    font-size: 48px;
    font-weight: 52.8;
}

.blocks {
    display: flex;
    flex-direction: column;
}

.blocksec1 {
    display: flex;
    flex-direction: row;
}

.block1 {
    display: flex;
    height: 220px;
    width: 470px;
    background-color: rgb(192, 193, 194);
    border-radius: 6px;
    margin-left: 250px;
}

.block1 img {
   width: 240px;
   height: auto; 
   position: relative;
   top: -40px;
}

.get {
    display: flex;
    justify-content: center;
    background-color: #0f0635;
    height: 330px;
    flex-direction: column;
}

.gethead {
    display: flex;
    justify-content: center;
    margin-top: 0px;
}

.gethead h1{
    color: white;
    font-family: medigrotesk;
    font-size: 48px;
    font-weight: 62.4;
    margin: 0px;
}

.getbtn {
    display: flex;
    justify-content: center;
}

.getbtn button {
    height: 46px;
    width: 330px;
    border: 1px solid #d0f0fd;
    background-color: #d0f0fd;
    color: #0f0635;
    font-family: medigrotesk;
    font-size: 22px;
    border-radius: 6px;
    padding-top: 8px;
    margin-top: 20px;
}

#ppls{
    color: white;
    margin-top: 21px;
}

.built {
    display: flex;
    justify-content: end;
    position: fixed;
    z-index: 400;
    width: 100%;
}



.lop {
    margin-right: 8px;
}

.note {
    display: flex;
    background-color: #8362b0;
}

.note p{
    color: #0205cb;
}

.didio:hover {
    cursor: pointer;
}

/* Responsive fix for triimg and figures */
@media (max-width: 1100px) {
  .triimg {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    gap: 30px 0;
  }
  .bestimg {
    width: 100%;
    max-width: 345px;
    height: auto;
  }
  .figures {
    flex-direction: column;
    align-items: center;
  }
  .figurediv,
  .figurediv2,
  .nucode {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center;
  }
  .figurediv p,
  .figurediv2 p,
  .nucode p {
    margin-left: 0 !important;
    right: 0 !important;
    width: 90vw;
    max-width: 320px;
  }
}