body{
     background-color: #85d5ef;
}
 td {
     padding: 10px 20px;
}
 td:hover {
     background-color: yellow;
}
 nav a {
     color:#5d0565 ;
     text-decoration: none;
}
 td:hover a {
     color: black;
    /* keep text readable */
}
 h1{
     color: #5d0565;
     font-family: Georgia, 'Amatic SC';
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}
 .h1-image {
     margin-left: 10px;
     border: 2px solid black;
     border-radius: 15px;
     width: 150px;
     height: auto;
}
 .title-text {
     display: flex;
     flex-direction: column;
     align-items: center;
}
 .phone {
     font-size: 16px;
     margin-top: 5px;
     color:#FFD700 -webkit-text-stroke: .5px black;
}
 .container {
     display: flex;
     justify-content: center;
}
 .slide-image {
     width: 600px;
     height: auto;
     border: 2px solid black;
}
 .gif{
     width: 600px;
     height: auto;
}
 .image-row {
     display: flex;
     justify-content: center;
     gap: 50px;
     margin-top: 20px;
}
 .image-row img {
     border: 2px solid black;
     border-radius: 15px;
     width: 250px;
     height: auto;
}
 .half{
     width: 70%;
     font-size: 24px;
     font-family: 'Comfortaa', Comfortaa ;
     color: #5d0565;
}
 .right-box {
     float: right;
     width: 400px;
     height: 1300px;
     background-color: #800080;
     margin: 20px;
     border: 2px solid black;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
}
 .right-box img{
     width: 70%;
     height: auto;
     border: 2px solid black;
}
 .left-box {
     float: left;
     width: 400px;
     height: 1300px;
     background-color: #800080;
     margin: 20px;
     border: 2px solid black;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
}
 .left-box img{
     width: 70%;
     height: auto;
     border: 2px solid black;
}
 .box-text{
     font-size: 20px;
     font-family: 'Comfortaa', Comfortaa;
     color: #FFD700;
     -webkit-text-stroke: .2px black;
}
 .big{
     font-size: 35px;
     font-family: 'Comfortaa', Comfortaa;
     color: #FFD700;
     -webkit-text-stroke: .5px black;
}
 header{
     font-size:22px;
}
 table{
     margin: 0 auto;
     boarder-collapse: collapse;
}
 td {
     border: 1px solid black;
     padding: 10px 20px;
     text-align:center;
}
@media (max-width: 768px) {
    /* Prevent image and content overlap */
    .container {
        display: block; /* Stack elements vertically */
        margin: 0 auto;
    }

    /* Ensure the boxes don't overlap on mobile */
    .right-box, .left-box {
        width: 100%; /* Full width for each box */
        margin: 10px 0; /* Vertical margin to ensure spacing */
        height: auto; /* Let the height adjust to content */
    }

    .image-row {
        flex-direction: column; /* Stack images vertically */
        gap: 20px; /* Add space between images */
        width: 100%; /* Ensure images use full width */
    }

    .image-row img {
        width: 100%; /* Ensure images resize properly */
    }

    .half {
        width: 100%; /* Allow text to take full width */
        padding: 10px; /* Add padding to prevent text from touching edges */
    }