* {
    margin: 0;
    padding: 0;
    user-select: none  ;
    
}

.back-to-top.show {
    bottom: 40px;
    right: 40px;
    opacity: 1;
    transform: scale(1);
}

.back-to-top {
    position: fixed;
    bottom: -40px;
    right: 40px;
    display: block;
    width: 45px;
    height: 45px;
    line-height: 46px;
    background-color: #3577f0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 06px;
    opacity: 0;
    transform: scale(0.3);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, .2);
    z-index: 9;
    transition: all .3s;
}

#navbar {
    width: 90%;
    height: 80px;
    margin: 02% 05%;
    background-color: white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    position: fixed;
    z-index: 1000;
}

#logo {
    margin-left: 02%;
    transition: all 01s;
}

#logo:hover{
    transform: scale(1.1);
}

#toggle {
    display: none;
}

#enner-nav {
    width: 40% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;

    a {
        text-decoration: none;
        color: black;
        font-size: 17px;
        font-family: var(--font-primary);
        font-weight: 600;
        transition: all 0.3s;
    }

    a:hover {
        color: rgb(86, 86, 254);
        transform: scale(1.08);
    }
}

#buy {
    cursor: pointer;
    margin-right: 02%;
    padding: 01%;
    padding-left: 01%;
    padding-right: 01%;
    border-radius: 05px;
    background-color: rgb(86, 86, 254);
    display: flex;
    width: 11%;
    justify-content: space-evenly;
    align-items: center;
    transition: all 0.4s;

    a {
        align-items: center;
        color: white;
        text-decoration: none;
        font-size: 17px;
        font-family: var(--font-primary);
        font-weight: 600;
    }

    i {
        color: white;
    }
}

#buy:hover {
    transform: scale(1.05);
}

#section1 {
    width: 100%;
    height: 640px;
    background-color: rgb(254, 234, 237);
    margin: 0;
    padding: 0;
}

#sub {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fbanner-mockup.png&w=3840&q=75") !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: 50%;
    height: 100%;
    position: relative;
    left: 45%;
    top: 25%;
}

#sub-section1 {
    width: 30%;
    height: 60%;
    position: absolute;
    left: 07%;
    top: 22%;

    h1 {
        line-height: 1.3;
        font-size: 36px;
        margin-bottom: 10%;
    }

    #e-commerce {
        color: #ff497c;
        display: flex;

        i {
            margin-top: 03%;
            margin-left: 02%;
            font-size: 20px;
        }
    }
}

.counter {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: blue;
    font-weight: bold;
    font-size: 25px;
    font-family: verdana;
    float: left;
}

.main {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: start;
}

.powered {
    width: 100%;
    height: 25%;
    border-radius: 07px;
    display: flex;
    justify-content: center;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    background-color: white !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    p {
        margin-top: 03%;
    }

    img {
        cursor: pointer;
        width: 35px;
        height: 35px;
        transition: all 0.2s;
    }

    img:hover{
        transform: scale(1.3);
    }
}

#section2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    background-color:#f6f7fb;
    font-size: 20px;
    text-align: center;
}

.Home-Pages {
    color: #ff497c;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10%;

    p {
        margin-top: 01%;
        margin-left: 01%;
    }
}

.box {
    margin-top: 05% !important;
    width: 40% !important;
    height: 500px;
    border-radius: 08px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all .5s ease-in-out;
}

.demo {
    height: 60px;
    width: 30%;
    text-decoration: none;
    text-align: center;
    color: white;
    background-color: blue;
    border-radius: 08px;
    display: none;
    font-size: 20px;
    transition: all .3s ease-in-out;
    opacity: 100% !important;
    padding-top: 1.7%;
}

.demo:hover {
    transform: scale(1.05);
}

.box:hover .demo {
    display: block;
}

.box-1 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fhome-01.png&w=1920&q=75");
}

.box-2 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fhome-04.png&w=1920&q=75");
}

.box-3 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fhome-04.png&w=1920&q=75");
}

.box-4 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fhome-05.png&w=1920&q=75");
}

.box-5 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fhome-02.png&w=1920&q=75");
    margin-bottom: 05%;
}

.box-6 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fcomming-soon.png&w=1920&q=75");
    margin-bottom: 05%;
}

.box-6:hover .demo {
    display: none;
}

#section3 {
    width: 100%;
    background-color: white;
    text-align: center;
    font-size: 20px;
}

.write {
    color: #8c71db;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 05%;

    p {
        margin-top: 01%;
        margin-left: 01%;
    }
}

.view {
    height: 60px;
    width: 40%;
    text-decoration: none;
    text-align: center;
    color: white;
    background-color: blue;
    border-radius: 08px;
    display: none;
    font-size: 20px;
    transition: all .3s ease-in-out;
    padding-top: 1.7%;
}

.view:hover {
    transform: scale(1.05);
}

.sub-section3 {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
}

.chotu {
    margin-top: 05% !important;
    width: 30% !important;
    height: 400px;
    border-radius: 08px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all .5s ease-in-out;
}

.chotu:hover .view {
    display: block;
}

.chotu1 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fshop.png&w=828&q=75");
}

.chotu2 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fshop-sidebar.png&w=828&q=75");
}

.chotu3 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fvariation-1.png&w=828&q=75");
}

.chotu4 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fvariation-2.png&w=828&q=75");
    margin-bottom: 05%;
}

.chotu5 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fvariation-3.png&w=828&q=75");
    margin-bottom: 05%;
}

.chotu6 {
    background-image: url("https://etrade-delta.vercel.app/_next/image?url=%2Fimages%2Fpreview%2Fvariation-4.png&w=828&q=75");
    margin-bottom: 05%;
}

#section4 {
    width: 100%;
    text-align: center;
    background-color: white;
}

.sub-section4 {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;

}

.enner-box {
    margin-top: 05% !important;
    padding: 0 !important;
    width: 26% !important;
    height: 450px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #f1f1f1;
    transition: all .5s ease-in-out;
    text-align: center;
    flex-direction: column;

    p {
        margin-top: 05%;
        line-height: 1.7;
        color: #777777;
        margin-left: 05%;
        margin-right: 05%;
    }

    img {
        margin-top: 05%;
        margin-bottom: 05%;
    }
}

.enner-box:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.Features {
    color: #ff497c;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 02%;

    p {
        margin-top: 01%;
        margin-left: 01%;
    }
}

#footer {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 20px;
    margin-top: 05%;

    .buy {
        position: relative;
        left: 45%;
        top: 05%;
        margin-top: 03%;
    }
}

.ready {
    color: #ff497c;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 05%;

    p {
        margin-top: 01%;
        margin-left: 01%;
    }
}
#section2{
    width: 100.8% !important;
}

.many{
    
    img{
        width: 75%;
        margin-top: 05%;
    }
}