#image-box-container {
             max-width:1000px;
             height: auto;
             margin:auto;
             display: flex;
             align-items: center;
             justify-content: center;
/*             border:1px solid red;*/
             background-color: #FCFAEE;
             background-color: #F8F1F1;
             background-color: #EEF5FF;
             box-shadow: 1px 1px 2px 0.1px black;
             padding: 4px;
             border-radius: 5px;
           }

           .image-container {
               width:400px;
               height: auto;
/*               border:1px solid red;*/
              box-shadow: 1px 1px 20px 0.1px black;
               display: flex;
               justify-content: center;
               align-items: center;
           }

           .image-container > img {
               max-width:100%;
               border:1px solid white;
               height: 50%;
               object-fit: cover;
           }

           .img-slider-btn {
/*             width:20%;*/
             width:400px;
             height: 40px;
/*             border:1px solid red;*/
             display: flex;
             justify-content: center;
/*             transition: all linear 0.3s;*/
             margin:2px;
             color:#4682A9;
             font-size: 1rem;
             border-width: 0.2px;
           }

           .forwardbtn {
            width:50px;
            height: 100%;
/*            border:0.2px solid black;*/
            border:none;
            box-shadow: 1px 1px 1px 0.2px black;
           }

           .backwardbtn {
            width:50px;
            height: 100%;
            border:none;
            box-shadow: -1px 1px 1px 0.2px black;
           }

           .backwardbtn > img {
            width:100%;
            height: 100%;
           }

            .forwardbtn > img {
            width:100%;
            height: 100%;
           }

           .img-slider-btn:active {
               transform: scale(0.9);
           }

           .modal-image-container {
              width: 100vw;
              height: 100vh;
              display: none;
              position: fixed;
              top: 0;
              left: 0;
              z-index: 2999;
              background-color: rgba(255, 255, 0, 0.8); /* translucent yellow */

           }

           .modal-image-container > img {
               width:500px;
               height:500px;
           }

           .modal-image-container > div {
              max-width: 100%;
              height: 100%;
              background-color: #27667B;
              box-shadow: 0 0 15px rgba(0,0,0,0.3);
              padding: 5px;
              display: flex;
              flex-direction: column;
              align-items: center;
              align-content: center;
              justify-content: flex-start;
              border:1px solid black;
              margin:auto;
              padding-bottom: 100px;
          }

          /*#modal-div-image {
               max-width:900px;
               height:600px;
               position:relative;
             box-shadow: 1px 1px 30px 0.3px black;
             border:1px solid white;
             display: flex;
             justify-content: center;
             margin: 0;
              margin-top: 20px;
             overflow:auto;
          }

          #modal-div-image > img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               object-position: center;
          }*/

                  #modal-div-image {
          max-width: 900px;
          height: 600px;
          position: relative;
          box-shadow: 1px 1px 30px 0.3px black;
          border: 1px solid white;
          display: flex;
          justify-content: center;
          margin: 0;
          margin-top: 20px;
          overflow: hidden; /* Hide overflow */
        }

        #modal-div-image > img {
          width: 100%;
          height: 100%;
/*          object-fit: contain;*/
          object-fit: cover;
          object-position: center; /* Center the image */
        }


          .modal-btn-container {
               width:100%;
               height: auto;
/*               border:1px solid red;*/
               display: flex;
               justify-content: flex-end;
          }


            #close-modal-btn {
               width:30px;
               height:auto;
               margin-right: 20px;
               margin-bottom: 4px;
               color:red;
               font-size: 1rem;
          }

           #close-modal-btn:active {
               transform: scale(0.9);
           }


          


          @media (max-width:425px) {
               /*.image-container > img {
                   max-width:600px;
                    height: 300px;
               }*/

               .img-slider-btn {
                width:30px;
                height: 30px;
               }

               #image-box-container {
                max-width:95%;
               }

                #modal-div-image {
               max-width:800px;
               height:500px;
            }
          }