*{
    padding: 0;
    margin: 0;
    /* font-family:sans-serif; */
}
@media only screen and (max-width: 764px) {

body{
    background-color: rgba(182, 182, 231, 0.254);
    /* background-color: rgba(255, 255, 255, 0.559); */
    min-height: 100vh;
    display: grid;
    place-items: center
}
.outer-container{
overflow: hidden;
    padding: 30px;
position: relative;
border-radius: 15px;
top: 50px;
height: 220px;
width: 90%;
margin: auto;
background-color: #ffffff4b;
box-shadow: 2px 2px 2px 2.5px rgba(143, 142, 142, 0.23);
}

.slide-container{
    place-items: center;
overflow-x: auto;
display: flex;
/* width: 10px; */
}

h4{
    padding: 10px;
    
}
h5{
    position: relative;
    top: 30px;
    right: 25px;
}
h6{
    position: relative;
    bottom: 25px;
    right: 25px;
    font-size: 1rem;
}

.inner-container{
    border: 2px solid white;
    /* padding: 100px; */
    /* width: 40%; */
    border-radius: 15px;

    background: hsla(16, 100%, 76%, 1);

background: linear-gradient(90deg, hsla(16, 100%, 76%, 1) 0%, hsla(49, 100%, 81%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(16, 100%, 76%, 1) 0%, hsla(49, 100%, 81%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(16, 100%, 76%, 1) 0%, hsla(49, 100%, 81%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FFA585", endColorstr="#FFEDA0", GradientType=1 );
}
.inner-container{
    border: 2px solid white;
    padding: 40px;
    width: 60%;
    border-radius: 15px;

    background: rgb(223, 103, 59);

background: linear-gradient(90deg, hsla(16, 100%, 76%, 1) 0%, hsla(49, 100%, 81%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(16, 100%, 76%, 1) 0%, hsla(49, 100%, 81%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(16, 100%, 76%, 1) 0%, hsla(49, 100%, 81%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FFA585", endColorstr="#FFEDA0", GradientType=1 );
}


.slide-container::-webkit-scrollbar{
    display: flex;
    width: 10%;
}

.inner-container:hover{
    transform: scale(1.00999);
    cursor:grab;
}

    /* .outer-container {
        width: 70%;
        height: 40%;
    } */

    .slide-image{
        /* width: 70%; */
        padding: 5px;
    }
    .inner-container{
        height:100px;
        width: 165px;
    }

    .two{
        background: hsla(154, 100%, 76%, 1);

background: linear-gradient(90deg, hsla(154, 100%, 76%, 1) 0%, hsla(234, 100%, 83%, 1) 50%, hsla(288, 100%, 81%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(154, 100%, 76%, 1) 0%, hsla(234, 100%, 83%, 1) 50%, hsla(288, 100%, 81%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(154, 100%, 76%, 1) 0%, hsla(234, 100%, 83%, 1) 50%, hsla(288, 100%, 81%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#84FFC9", endColorstr="#AAB2FF", GradientType=1 );
    }
    .three{
        background: hsla(177, 87%, 79%, 1);

background: linear-gradient(90deg, hsla(177, 87%, 79%, 1) 0%, hsla(235, 89%, 70%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(177, 87%, 79%, 1) 0%, hsla(235, 89%, 70%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(177, 87%, 79%, 1) 0%, hsla(235, 89%, 70%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#9BF8F4", endColorstr="#6F7BF7", GradientType=1 );
    }
    .four{
        background: hsla(238, 100%, 71%, 1);

background: linear-gradient(90deg, hsla(238, 100%, 71%, 1) 0%, hsla(295, 100%, 84%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(238, 100%, 71%, 1) 0%, hsla(295, 100%, 84%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(238, 100%, 71%, 1) 0%, hsla(295, 100%, 84%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#696EFF", endColorstr="#F8ACFF", GradientType=1 );
    }
  }