@media screen and (min-width: 601px) {
 .index-image{
    margin-right: auto;
    display:block;
    width:300px;
 }
}

@media screen and (max-width: 600px) {
 .index-image{
    margin-right:auto;
    margin-left:auto;
    display:block;
    width:300px;
 }
}

@media screen and (min-width: 601px) {
 .index-text{
    text-align:right;
 }
}

@media screen and (max-width: 600px) {
 .index-text{
    text-align:justify;
 }
}

.image-container {
   max-width: 100%;
   overflow: hidden; /* This ensures the image doesn't overflow its container */
   display: flex;
   justify-content: center;
   align-items: center;

}

.image-container img {
   max-width: 100%; /* Ensures the image fills the container width */
   height: auto; /* Maintains the aspect ratio */
   width: 75%;
   padding-top: 15px;
   /*display: block; /* Removes any extra space below the image
   margin: 0 auto; */
}

.box {
   border: 1px solid #87ceeb; /* Dark border for the box */
   padding: 10px; /* Space inside the box */
   background-color: #87ceeb; /* White background for the box */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow for 3D effect */
   width: 400px; /* Fixed width for the box */
   text-align: center; /* Center align text inside the box */
   font-size: 14px;
   color: rgb(0, 0, 0);
   border-radius: 5px;
   
   
}

.box-location {
   display: grid;
   place-items: center;
   margin: auto;
   height: 10vh;
}

.grid-container {
   display: grid; 
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.about {
   flex: 1;
   max-width: 430px;
   min-width: auto;
   height: 500px;
   margin: auto;
   margin-right: 0%;
   padding: 20px;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   box-sizing: border-box;
   overflow: auto;
   
}

.image-container2 {
   flex: 1;
   max-width: 430px;
   max-height: 500px;
   min-width: auto;
   margin: auto;
   margin-left: 0%;
   padding: 15px;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
}

.image-container2 img {
   width: 100%; /* Ensure the image fits the container */
   height: 100%; /* Maintain the aspect ratio of the image */
   border-radius: 8px; /* Round corners of the image */
}

@media (max-width: 641px) {
   .grid-container {
      grid-template-columns: 1fr;
   }
}


@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }