/* css */

.index-top{
    top: 2000%;
    background-color: black;
    font-size: 300%; /* Use percentage for font-size to make it responsive */
    /* position: absolute; */
     /* Use percentage for top position */
    position: relative;
    top: 3000%; 
    width: 105%;
    margin: 0 auto;
    opacity: 88%;
}

.index-bottom{
    background-color: black;   
    font-size: 300%;
    width: 105%;
    margin: 0 auto;
    z-index: 1;
}

.index-bottom-text{
    color: white;
    font-family: sans-serif;
    position: absolute;
    top: 8.5%; /* Use percentage for top position */
    left: 20%; /* Use percentage for left position */
}

.apple {
    filter: brightness(110%);
    filter: saturate(115%);
}

.order{
    position: absolute;
    color: rgba(0, 119, 237, 0.881);
    font-family: sans-serif;
    top: 0.5%; /* Use percentage for top position */
    left: 117%; /* Use percentage for left position */
     /* Use percentage for font-size */
}

.table{
    color: white;
    position: relative;
    font-family: sans-serif;
    right: -26%; /* Use percentage for right position */
    font-size: 85%;
    z-index: 1;
}

.learnmore{
    color: rgba(0, 119, 237, 0.881);
    position: absolute;
    font-family: sans-serif;
    top: 0.5%; 
    left: 102%;
}

.learnmore .tooltiptext{
    visibility: hidden;
    color: black;
    width: 500%; 
    padding: 1%; 
    position: absolute;
    bottom: 8%; 
    z-index: 1;
}

.learnmore:hover .tooltiptext{
    visibility: visible;
}

.tooltiptext{
    position: absolute;
    left: -500px;
    font-size: 35px;
    font-family: sans-serif;
    top: 65px;
}