body{
/* Home */

position: relative;
width: 1440px;
height: 2341px;

background: linear-gradient(180deg, #FFFFFF 29.33%, #BFE9FF 100%);
}

.Art1-img{
position: absolute;
height: 307px;
left: 36px;
right: 540px;
top: 53px;
}

.Art2-img{
position: absolute;
width: 452px;
height: 130px;
right: -50px;
top: 0px;
}

.Art3-img{
position: absolute;
left: -10px;
right: -50px;
top: 250px;
}

.Art4-img{
position: absolute;
width: 237.05px;
height: 258.46px;
right: 400px;
top: 180px;
transform: rotate(-2.08deg);
}

.Title{
position: absolute;
width: 980px;
height: 97px;
left: calc(50% - 980px/2);
top: 600px;
}

.Display{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
gap: 10px;

position: absolute;
height: 350px;
left: -30%;
right: 9.38%;
top: 785px;
}

#Desc{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
gap: 10px;

position: absolute;
height: 350px;
left: 54.38%;
right: 9.38%;
top: 785px;
width: 502px;
height: 330px;

font-family: 'Inter';
font-weight: 600;
font-size: 36px;
line-height: 151.45%;
/* or 55px */
letter-spacing: 0.04em;

color: #000000;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}

.Layout{
position: absolute;
width: 1341px;
height: 76px;
left: calc(50% - 1341px/2 - 0.5px);
top: 1225px;

font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-size: 64px;
line-height: 77px;
text-align: center;
letter-spacing: 0.05em;
}

.LayoutScreen{
/* mockup-FSTV2-e1729129943683 1 */

position: absolute;
width: 960px;
height: 540px;
left: calc(50% - 960px/2);
top: 1316px;
}

.B{
    display: flex;
  align-items: center;
}

.image-button {
display: inline-block;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: none;
}

        .image-button img {
position: absolute;
display: flex;
width: 675px;
height: 282px;
left: calc(50% - 675px/2 - 0.5px);
top: 1970px;

        }

        .image-button .hover-image {
            display: none;
        }

        .image-button:hover .normal-image {
            display: none;
        }

        .image-button:hover .hover-image {
            display: block;
        }

        /* Alternative method using background images */
        .bg-image-button {
            display: inline-block;
            width: 200px;
            height: 100px;
            background-image: url('normal-image.jpg');
            background-size: cover;
            background-position: center;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: background-image 0.3s ease;
        }

        .bg-image-button:hover {
            background-image: url('hover-image.jpg');
        }