body {
           background-color: #c19f5c;
        }
        

       .basic-box1 {
            width: 48%;
            height: 100%;
            border: 2px solid #000;
            background-color: #dcdcdc;
            padding: 10px;
            margin-left:   25%;
            margin-right:   25%; 
            color: black;
         margin-top: -35%; 
        }                                               


        .main-container {
            max-width: 40%;
            padding: 2%;
         
    
        }

        h1, h2, h3, h4 {
            text-align: center;
          	font-family:"Georgia";
        }


        .float-left {
            float: left;
            margin-right: 1%;
        }

        .float-right {
            float: right;
            margin-left: 1%;
        }
        .double-spaced {
            line-height: 2;
        }




button {
    background-color:#6A4E20; 
	  color:#000000;
    width: 40%; /* Set the width */
    height: 100px;
    font-family: 'Georgia';
  	margin-left:26%;
    margin-right:26%;
    margin-bottom:2%;

         }
 

.collapsible {
  background-color: #dcdcdc;
  color: #444;
  cursor: pointer;
  padding: 10px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
   width: 56%;
   margin-left: 22%;
	 margin-right: 22%;
  
}


.content {
  padding: 10 px;
  display: none;
  overflow: hidden;
  background-color: #dcdcdc;
   width: 60%;
   margin-left: 20%;
	 margin-right: 20%;
   margin-bottom: 2%;
}         

/* 1. Container Settings (keeps everything together) */
.image-container {
  width: 30%; /* Adjust this to the width you want for your image */
  height:25%;
}

/* 2. Image Settings */
.image-container img {
  width: 100%; /* Makes the image perfectly fit the 300px container */
  height: 60%; /* Keeps the photo from looking stretched */
  display: block; /* Important for removing unwanted space below the image */
}

/* 3. Text Box Settings */
.text-box {
  background-color: #dcdcdc; /* A light background color for the box */
  padding: 15px; /* Adds space around the text inside the box */
}

.text-box h4 {
  margin-top: 0; /* Removes the default space above the title */
}


/* 1. Flex Container (The only part that makes them side-by-side) */
.gallery {
  display: flex; /* Arranges children horizontally */
  gap: 60%;     /* Space between the images */
  margin: 0%; /* Centers the whole gallery *