body {

    margin: 0;

    padding: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    height: 90vh;

    width: 100vw;

    overflow: hidden;

}

#buy-now-btn {
  background-color: red;  /* Red background */
  color: blue;            /* Blue text */
  font-weight: bold;      /* Optional: Bold text */
  padding: 10px 20px;     /* Optional: Padding for better visual appearance */
  border: none;           /* Optional: Remove any default border */
  cursor: pointer;        /* Optional: Change cursor on hover */
}

/* Optional: Hover effect */
#buy-now-btn:hover {
  background-color: darkred;
  color: lightblue;
}

.container {

    display: grid;

    grid-template-columns: 200px minmax(400px, 800px) 200px;

    grid-template-rows: 100px 1fr 100px;

    gap: 20px;

    height: 100%;

    padding: 10px;

    box-sizing: border-box;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

}



.top-section {

    grid-column: 2 / -2;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 110%;

    flex-direction: column;

}



.title {

    font-size: 50px;

    font-weight: bold;

    font-style: italic;

    color: #0000FF;

    text-shadow: -2px -2px 0 #FFF,  

                 2px -2px 0 #FFF,

                -2px  2px 0 #FFF,

                 2px  2px 0 #FFF;

}



.header-info {

    display: flex;

    width: 100%;

    justify-content: space-between;

    padding: 0 20px;

}



.website {

    color: #0000FF;

    font-size: 20px;

    font-weight: bold;

    margin-left: 10px;

    text-shadow: -2px -2px 0 #FFF,  

                 2px -2px 0 #FFF,

                -2px  2px 0 #FFF,

                 2px  2px 0 #FFF;

}



.phone {

    color: #FF0000;

    font-size: 20px;

    font-weight: bold;

    background-color: white;

    padding: 2px 10px;

    border-radius: 5px;

    margin-right: 10px;

    margin-bottom: 10px;

}



.nav-buttons {

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: 10px;

    overflow-y: auto;

    justify-content: center;

    align-items: center;

    margin: 0 auto;

    width: 100%;

    margin-right: 15px;

}



.nav-button {

    padding: 10px;

    background-color: #0f068f;

    border: none;

    border-radius: 5px;

    color: #000FF;

    font-weight: bold;

    cursor: pointer;

    text-align: center;

    font-size: 20px;

    font-style: italic;

    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);

    width: 100%;

    transition: all 0.2s ease;

    text-shadow: -1px -1px 0 #FFF,  

                 1px -1px 0 #FFF,

                -1px  1px 0 #FFF,

                 1px  1px 0 #FFF;

}



.nav-button:hover {

    transform: scale(1.05);

    opacity: 1;

}



.image-display {

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    border-radius: 5px;

    overflow: hidden;

    max-width: 800px;

    width: 100%;

    margin: 0 auto;

    height: 100%;

}



#currentImage {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    margin: auto;

}



.right-section {

    grid-column: -1 / 3;

    grid-row: 1 / 3;

    background-color: #A8A8A8;

    display: none;

    flex-direction: column;

    padding: 15px;

    border: 2px solid #0000FF;

    border-radius: 5px;

    margin: 5px;

    align-items: center;

}



.container {

    grid-template-columns: 200px minmax(400px, 800px);

}





.cities-icon {

    padding: 10px;

    margin-bottom: 10px;

    display: flex;

    justify-content: center;

}



.cities-icon svg {

    cursor: pointer;

    fill: #0000FF;

}



.info-display {

    background-color: #FFFFFF;

    padding: 10px;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-family: monospace;

    font-size: 16px;

    text-align: left;

}



.navigation {

    grid-column: 2 / 2;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 10px;

    gap: 10px;

    max-width: 600px;

    margin: 0 auto;

    width: 100%;

}



.navigation button {

    padding: 10px 20px;

    background-color: #0000FF;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-size: 16px;

    width: 120px;

}



#imageCounter {

    color: #FFFFFF;

    font-weight: bold;

    font-size: 25px;

    background-color: #0000FF;

    padding: 0 10px;

}



@media screen and (max-width: 768px) {

    .container {

        grid-template-columns: 1fr;

        grid-template-rows: auto auto auto auto auto;

        padding: 5px;

        gap: 10px;

        height: auto;

        overflow-y: auto;

    }



    body {

        overflow-y: auto;

        height: auto;

        min-height: 100vh;

    }



    .top-section {

        grid-column: 1;

        grid-row: 1;

        height: auto;

    }



    .nav-buttons {

        grid-column: 1;

        grid-row: 2;

        flex-direction: row;

        flex-wrap: wrap;

        margin: 0;

        padding: 5px;

    }



    .image-display {

        grid-column: 1;

        grid-row: 3;

        height: 50vh;

    }



    .navigation {

        grid-column: 1;

        grid-row: 4;

        padding: 5px;

    }



    .right-section {

        grid-column: 1;

        grid-row: 5;

        margin: 0;

        padding: 10px;

        width: calc(100% - 24px);

        display: none;

    }



    .title {

        font-size: 40px;

        text-align: center;

    }



    .header-info {

        flex-direction: column;

        align-items: center;

        padding: 0;

    }



    .website, .phone {

        margin: 5px 0;

    }



    .nav-button {

        width: calc(50% - 10px);

        font-size: 16px;

    }



    #imageCounter {

        font-size: 20px;

    }

}



@media screen and (max-width: 480px) {

    .title {

        font-size: 25px;

    }



    .nav-button {

        width: 100%;

    }



    .website, .phone {

        font-size: 16px;

    }

} 



@media screen and (max-width: 768px) {

    .nav-buttons {

        display: flex;

        flex-wrap: wrap;

        justify-content: center; /* Center-align buttons */

        gap: 10px; /* Space between buttons */

    }



    .nav-button {

        width: calc(20% - 10px); /* Three buttons per row */

        height: 50px; /* Set uniform height */

        font-size: 12px;

        text-align: center;

        display: flex;

        align-items: center;

        justify-content: center;

    }

}



@media screen and (max-width: 380px) {

    .nav-button {

        width: 100%; /* Full width for small screens */

        height: 50px; /* Keep height consistent */

    }

}