body{
    background-color: #ffffff;
}
#nav{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
}
#nav>div{
    display: flex;
    grid-template-columns: repeat(7,1fr);
    align-items: center;
    gap: 30px;
}
#nav>div>h1{
    font: italic 1.2em "Fira Sans", serif;
    font-size: 30px;
}
.fa-lock{
    color: orange;
    width: 20px;
}
#login{
    border: none;
    outline: none;
    background-color: transparent;
}
#Demo{
    border: none;
    outline: none;
    background-color: #FF7846;
    color: white;
    font-size: 17px;
    font-style: bold;
    padding: 8px;
}
#Block0{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    display: none;
    background-color: #fff4ee;
}
#Block0>div>h4{
    color: #7f45ff;
}
#Block1{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 70px;
    margin-top: 30px;
    
}
#Block1>div{
    width: 50%;
    
}
#Block1>div>h1{
    font-size: 50px;
}
#Block1>div>p{
    font-size: large;
    color: #9494af;
}
#Block1>div>div>img{
    width: 400px;
}
#Block1>div:nth-child(2){
    display: flex;
    align-items: center;
    background-image: url("https://webstatic.chargebee.com/assets/web/543/images/strategy-bundle/implement-price-optimization/hero.svg");
    background-repeat: no-repeat;
}
#Demo-2{
    border: none;
    outline: none;
    background-color: #5800b2;
    padding: 10px;
    color: white;
    font-size: 20px;
    border-radius: 21px;
    margin-right: 15px;
    margin-top: 10px;
}
#Demo-2:hover{
    background-color: black;
}
#Sign{
    background-color: transparent;
    font-size: 18px;
    padding: 10px;
    border-radius: 21px;
    margin-left: 14px;
}
#Block2{
    display: flex;
    width: 80%;
    /* margin-top: 600px; */
    justify-content: space-evenly;
    margin: auto;
}
#Block2>div:nth-child(2){
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 70px;
    margin-left: 70px;
    gap: 30px;
}
#Block2>div>img{
    width: 350px;
}
#Block2>div>h1{
    margin-top: 70px;
}
#Block2>div>p{
    font-size: large;
    color: #9494af;
}
.learn{
    text-align: end;
    color: #5800b2;
    margin-right: 40px;
    margin-top: 50px;
}
#Block2>div>div{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 30px;
}
#Block2>div>div:hover{
    transform: scale(1.1);
}
#Block2>div>div>p{
    font-size: large;
    color: #9494af;
}
#Block3{
    margin-top: 70px;
    width: 80%;
    margin: auto;
    margin-top: 100px;
}
.out{
    text-align: center;
}
#Block3>h1+p{
    font-size: large;
    color: #9494af;
}
#Block3>#opt{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    margin-top: 30px;
    font-size: large;
    color: #9494af;
}
#grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 75%;
    margin: auto;
    gap: 90px;
    margin-top: 100px;
}
#grid>div>img{
    width: 100%;
}
#grid>div>p,ul{
    font-size: large;
    color: #9494af;
}
#grid>div>h3{
    color: #5800b2;
    margin-top: 50px;
}
#Block4>div>img{
    width: 70%;
}
#Block4{
    display: flex;
    width: 65%;
    margin: auto;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    padding-top: 50px;
    padding-bottom: 30px;
}
#Block4>div>#sec{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
}
#Block4>#sli>div>h1,div>h1{
    color: #181064;
}
#sec>div>p{
    color: #807caa;
}
#B5{
    background-color: #5800b2;
    padding-bottom: 20px;
    margin-top: 50px;
}
#Block5{
    display: flex;
    width: 80%;
    margin: auto;
    align-items: center;
    justify-content: space-between;
}
#first>h1{
    color: white;
    font-size: 35px;
}
#imga{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
#imga>img{
    width: 50%;
}
#child-5{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-color: white;
    margin-left: 300px;
    margin-right: 200px;
    border-radius: 10px;
    padding-left: 20px;
}
#child-5>img{
    border-radius: 50%;
    width: 50%;
}
#first>div{
    background-color: #1d0968;
    padding: 15px;
    border-radius: 35px;
}
#first>div>input{
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 20px;
    color: white;
}
#first>div>button{
    background-color: #7f45ff;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 20px;
    border-radius: 25px;
    color: white;
}
#footer-child{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 80%;
    margin: auto;
    margin-top: 50px;
    gap: 100px;
}
#footer-img{
    text-align: end;
    margin-right: 50px;
    margin-bottom: 40px;
}
#footer-child>div>h2{
    color: #7f45ff;
}
#footer-child>div>.up{
    margin-top: 40px;
}

@media all and (min-width:100px) and (max-width:650px){
    #Block1{
        width: 80%;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 70px;
        margin-top: 30px;
        justify-content: center;
    }
    #Block2{
        display: flex;
        flex-direction: column;
        width: 80%;
        /* margin-top: 600px; */
        justify-content: center;
        margin: auto;
    }
    #grid{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        width: 75%;
        margin: auto;
        /* gap: 90px; */
        margin-top: 100px;
    }
    #Block4{
        display: flex;
        flex-direction: column;
        width: 65%;
        margin: auto;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border-radius: 20px;
        padding-top: 50px;
        padding-bottom: 30px;
    }
    #Block5{
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: auto;
        align-items: center;
        justify-content: space-between;
    }
    #footer-child{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 80%;
        margin: auto;
        margin-top: 50px;
        gap: 100px;
    }
}
/* ALL Done */