#animatedText1 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    position: absolute;
    top: 10%;
    left:2%;
    width: 48%;
    height: 44%;
    background: #411a58;
    border-radius: 20px;
}

div#animatedText2
{
    position:absolute;
    top: 52%;
    left:2%;
    width:48%;
    height:44%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: #411a58;
    border-radius: 20px;
}


#imageSlide {
    position: absolute;
    top: 56%;
    left: 53%;
    width: 40%;
    height:40%;
    background-color: #000;
    border-radius: 20px;
    overflow: hidden;
    mask-image: radial-gradient(white, black);
    object-fit: cover;
}

#dsaaLogo {
    position:absolute;
    top: 9%;
    left: 65%;
    width:25%;
    height:23%;
    background-color: transparent;
}


div#buttonPanelGem {
    position: relative;
    top: 32%;
    left: 53%;
    width: 40%;
    height: 32%; /* Change from 32% to auto */
    background-color: transparent;
    border: 2px solid black;
}

div#btn1 {
    position: absolute;
    top: 32%;
    left: 53%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}

div#btn2 {
    position: absolute;
    top: 32%;
    left: 67%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}

div#btn3 {
    position: absolute;
    top: 32%;
    left: 81%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}

div#btn4 {
    position: absolute;
    top: 40%;
    left: 53%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}

div#btn5 {
    position: absolute;
    top: 40%;
    left: 67%;
    width: 12%;
    height: 6%;/* Change from 32% to auto */
    background-color: transparent;
}

div#btn6 {
    position: absolute;
    top: 40%;
    left: 81%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}

div#btn7 {
    position: absolute;
    top: 48%;
    left: 53%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}

div#btn8 {
    position: absolute;
    top: 48%;
    left: 67%;
    width: 12%;
    height: 6%;/* Change from 32% to auto */
    background-color: transparent;
}

div#btn9 {
    position: absolute;
    top: 48%;
    left: 81%;
    width: 12%;
    height: 6%; /* Change from 32% to auto */
    background-color: transparent;
}


div#buttonPanelGem {
    position: absolute;
    top: 32%;
    left: 53%;
    width: 40%;
    height: auto; /* Change from 32% to auto */

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
    background-color: transparent;
    z-index: 10;
}

.grid-item {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* Optional: add shine effect here */
}

/* If the screen is smaller than 768px (tablets/phones) */
@media (max-width: 768px) {
    div#buttonPanel {
        grid-template-columns: 1fr; /* Stack items into 1 single column */
    }
}

div#buttonPanel3333 {
    display: flex;         /* Enables the layout */
    flex-wrap: wrap;       /* Allows buttons to wrap to next line */
    justify-content: center; /* Centers buttons horizontally */
    align-items: center;   /* Centers buttons vertically */
    width: 100%;           /* Takes full width of parent */
    padding: 20px;         /* Adds space around the buttons */
    box-sizing: border-box; /* Ensures padding doesn't cause overflow */
    background-color: transparent;
    border: 2px solid red; /* This will draw a red box around your div */
    min-height: 100px;
}


#header {
    position: absolute;
    top: 3%;
    left: 70%;
    width: 30%;
    height: 5%;
    background-color: transparent;
    /* Optional: Center the controls inside the header */
    display: flex;
    align-items: center;

}

#header td {
    padding-left: 10px;
}