:root{
    --Night-Black: #0e0f12;
    --Palatine-Blue: #0038FF;
    --Brandeis-Blue: #1C79FF;
    --Light-Grey: #F5F5F7;
    --White: #FAFAFC;
    --Mid-Grey: #EDEEF2;
}
.gradient{
    height: 750px;
    position: absolute;
    width: 750px;
    border-radius: 750px;
    background: var(--Palatine-Blue, #0038FF);
    filter: blur(350px);
    z-index: 1;
    top:300%
}
.hero-box{
    flex-direction: column;
    text-align: center;
    display: flex;
    width: 100%;
    margin-top: calc(140px + 10%);
    margin-bottom: auto;
}

.title-hero{
    max-width: 800px;
    margin: auto;
}
.sub-text{
    max-width: 600px;
    text-align: center;
    margin: 10px auto;
}

.section-2{
    background-color: var(--Night-Black);
    color: var(--White);
    border-radius: 40px 40px 0px 0px;
    background:
    radial-gradient(circle at 0% 6.88%, #0037ff7a, #0e0f1200 40%),
    radial-gradient(circle at 110% 40%, #0037ff7f,#0e0f1200 50%),
    radial-gradient(circle at -10% 80%, #0037ff7a, #0e0f1200 50%),
    var(--Night-Black);
}
.sheet-basic-l{
    padding: 200px 2% 0 2%;   
}
.process-title{
    margin-bottom: 150px;
    text-align: center;
    margin-top: 120px;
}
.process-icon{
    height: 70px;
    width: auto;
}
.process-container{
    display: grid;
    width: 85%;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    margin-bottom: 50px;
  
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }

.process-box{
    display: flex;
    flex-direction: column;
    max-width: 340px;
    justify-content: start;
}
.process-icon{
    height: 70px;
    width: max-content;
    margin-bottom: 20px;
}
.process-p{
    opacity: 0.5;
}

.package-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 26px;
    margin-bottom: 150px;
}
.textbox-package{
    text-align: center;
    max-width: 600px;
    margin-bottom: 80px;
}

.one-package{
    height: 530px;
    width: 300px;
    border-radius: 45px;
    padding: 30px;
    background-color: rgba(0, 90, 255, 0.2);
    -webkit-backdrop-filter: blur(16px);
     backdrop-filter: blur(16px);
     display: flex;
    flex-direction: column;
}
.title-package{
    text-align: center;
    width: 100%;
    margin-bottom: 16px;
}
.prize{
    text-align: center;
}
.amount{
    margin-bottom: 0px;
}
.opacity-text{
    opacity: 0.5;
}
.line-package{
    width: 100%;
    border: solid 0.5px var(--Mid-Grey);
    margin: 10px 0;
}
.info-package{
    flex: 1;
}
.check-icon{
    margin: 3px 10px 0 0;
}
.text-row{
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}
.cta-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cta-box-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}
.button-box{

}
.cta-title{
    flex: 1;
    max-width: 350px;
}

.stats-box{
    display: flex;
    flex-direction: column;
}
.stats-textbox{
    display: flex;
    flex-direction: column;
    max-width: 560px;
    width: auto;
}
.stats-text{
    flex: 1;
}

.stats-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 256px;
    flex-direction: column;
}
.devices-img{
    max-width: 600px;
}




@media only screen and (min-width: 300px) and (max-width: 480px) {

    .section-2{
        background-color: var(--Night-Black);
        color: var(--White);
        border-radius: 30px 30px 0px 0px;
        background:
        radial-gradient(circle at 50% 6.88%, #0037ff7a, #0e0f1200 20%),
        radial-gradient(circle at 150% 40%, #0037ff7a,#0e0f1200 40%),
        radial-gradient(circle at -40% 80%, #0037ff4a, #0e0f1200 40%),
        var(--Night-Black)
    }

    .mockup{
        max-width: 120vw;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        padding: 16px;
        margin-top: -380px;
        border-radius: 20px;
        background-color: rgba(237, 238, 242, 0.8);
        -webkit-backdrop-filter: blur(14px);
         backdrop-filter: blur(14px);
         display: flex;
    }
    .screen{
        width: 100%;
        height: 100%;
        border-radius: 15px;
        overflow: hidden;
    }
    .image-screen{
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }
    .hero-box{
        flex-direction: column;
        text-align: center;
        display: flex;
        width: 100%;
        margin-top: calc(220px + 10%);
        margin-bottom: auto;
    }

    .percentage-container{
        display: flex;
        width: 100%;
        justify-content: start;
        gap: 40px;
    }
    .process-title{
        margin-top: calc(280px - 15vw);
    }

    .section-2{
        border-radius: 30px 30px 0px 0px;
        padding-bottom: 0px;
    }
    .sheet-basic-l{
        padding: 80px 6%;   
    }
    .process-container {
        display: grid;
        width: 100%;
        flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-column-gap: 80px;
        grid-row-gap: 80px;
     }
  
    .process-box{
        max-width: none;
        justify-content: center;
        text-align: center;
    }
    .process-icon{
        height: 45px;
        width: min-content;
        margin-left: auto;
        margin-right: auto;
    }
    .stats-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
 
    }
    .button-box:nth-child(1){
        order: 2;
        width: 100%;
        margin-top: 0px;
    }
  
    .cta-box{
        max-width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .cta-box-2{
        max-width: 100%;
        flex-direction: column;
    }
    .cta-title{
        margin-bottom: 20px;
    }
    .devices-img{
        width: 100%;
        margin-top: 50px;
    }
    .package-container{
        display: flex;
        justify-content: start;
        width: 100vw;
        padding: 0 6%;
        flex-wrap: nowrap;
        overflow-x: scroll;
        gap: 26px;
        margin-bottom: 0px;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
      }
    .one-package{
        height: 520px;
        min-width: 300px;
    }
    .package-container::-webkit-scrollbar {
        display: none;
      }
      .img-box{
        justify-content: center;
        display: flex;
        width: 100%;
    }

}

@media only screen  and (min-width: 480px) and (max-width: 768px) {

    .hero-box{
        flex-direction: column;
        text-align: center;
        display: flex;
        width: 100%;
        margin-top: calc(220px + 10%);
        margin-bottom: auto;
    }
    .mockup{
        max-width: 100%;
        width: 85%;
        height: auto;
        aspect-ratio: 16/9;
        padding: 20px;
        margin-top: -250px;
        top: 580px;
        border-radius: 30px;
        background-color: rgba(237, 238, 242, 0.5);
        -webkit-backdrop-filter: blur(14px);
         backdrop-filter: blur(14px);
    }
    .screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
    }
    .image-screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
    .package-container{
        display: flex;
        justify-content: start;
        width: 100vw;
        padding: 0 6%;
        flex-wrap: nowrap;
        overflow-x: scroll;
        gap: 26px;
        margin-bottom: 0px;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
      }
    .one-package{
        height: 520px;
        min-width: 300px;
    }
    .package-container::-webkit-scrollbar {
        display: none;
      }
      .sheet-basic-l{
        padding: 80px 7%;   
    }
    .process-box{
        max-width: 400px;
        justify-content: center;
        text-align: center;
        margin: auto;
    }
    .process-icon{
        height: 45px;
        width: min-content;
        margin-left: auto;
        margin-right: auto;
    }
    .process-container {
        display: grid;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-column-gap: 80px;
        grid-row-gap: 80px;
     }
     .stats-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
 
    }
    .button-box:nth-child(1){
        order: 2;
        width: 100%;
        margin-top: 30px;
    }
    .stats-container{
        width: 100%;
        display: flex;
        height: max-content;
        justify-content: start;
    }
    .cta-box{
        max-width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .cta-box-2{
        max-width: 100%;
        justify-content: left;
        flex-direction: column;
        align-items: start;
    }
    .cta-title{
        margin-bottom: 20px;
    }
    .devices-img{
        width: 100%;
        margin-top: 100px;
    }
    .percentage-container{
        display: flex;
        width: 100%;
        justify-content: start;
        gap: 70px;
    }
    .img-box{
        justify-content: center;
        display: flex;
        width: 100%;
    }

}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .cta-title{
        flex: 1;
        min-width: 350px;
    }
    .cta-box-2{
        margin-top: 50px;
    }
    .devices-img{
        width: 50vw;
        margin: auto;
    }
    .process-container{
        width: 92%;
    }
    .devices-img{
        margin-left: auto;
        margin-right: auto;
    }
    .img-box{
        justify-content: center;
        display: flex;
        width: 100%;
    }
    .mockup{
        width: 85%;
        height: auto;
        aspect-ratio: 16/9;
        padding: 20px;
        margin-top: -300px;
        top: 580px;
        border-radius: 30px;
        background-color: rgba(237, 238, 242, 0.5);
        -webkit-backdrop-filter: blur(14px);
         backdrop-filter: blur(14px);
    }
    .screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
    }
    .image-screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
    .percentage-container{
        display: flex;
        width: 100%;
        width: auto;
        justify-content: center;
        gap: 40px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .cta-title{
        flex: 1;
        min-width: 350px;
    }
    .mockup{
        max-width: 100%;
        width: 85%;
        height: auto;
        aspect-ratio: 16/9;
        padding: 20px;
        margin-top: -300px;
        top: 580px;
        border-radius: 30px;
        background-color: rgba(237, 238, 242, 0.5);
        -webkit-backdrop-filter: blur(14px);
         backdrop-filter: blur(14px);
    }
    .screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;
    }
    .image-screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
    .percentage-container{
        display: flex;
        width: 100%;
        width: 560px;
        justify-content: start;
        gap: 40px;
    }
}


@media only screen and (min-width: 1281px) {
    .mockup{
        max-width: 1000px;
        width: auto;
        height: auto;
        aspect-ratio: 16/9;
        padding: 20px;
        margin-top: -300px;
        border-radius: 30px;
        background-color: rgba(237, 238, 242, 0.5);
        -webkit-backdrop-filter: blur(14px);
         backdrop-filter: blur(14px);
    }
    .screen{
        width: 100%;
        height: -webkit-fill-available;
        max-height: 92%;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
    }
    .image-screen{
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
    .percentage-container{
        display: flex;
        width: 100%;
        width: 560px;
        justify-content: start;
        gap: 40px;
    }
}