body {
	font-family: Helvetica;
	font-size: 16px;
	line-height: 1.5;
	
	background-color: #f6f0f0;
	color: #291610;
	margin: 40px auto 40px auto;
	width: 1020px;
}

.image-container {
  display: flex /* Arranges children horizontally by default */;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px; /* Adds space between the icons */;
 margin: 0px 0 60px 0;
  img {
  max-width: 100%;
  height: auto;
  display: block; /* Helps remove default spacing issues */
}
}

/* The '#' symbol selects an element by its unique ID */
#menu {
 margin: -40px 0 60px 0;
}


img {
  max-width: 20%; /* Image will not exceed the width of its container */
  height: auto;    /* Height scales automatically to maintain aspect ratio */
  display: block  /* Helps with alignment and removes default bottom margin */;
}

h1 {
	font-size: 12px;
	font-weight: 900;
  letter-spacing: -1px ;
  font-family: Helvetica;
  color: #969c49;
  text-align: left;
  font-style: italic;
  margin: 0 0 0 10px;
}

h3 {
    font-size: 8px;
	font-weight: 900;
  font-family: Helvetica;
   color: #291610;
  margin: 0 100px 0 0;
   letter-spacing: 2px;
}

p{
  font-size: 12px;
	font-weight: 400;
  font-family: Helvetica;
   color: #291610;
  padding: 10px 0 0px 0;
  letter-spacing: 2px;
}

h4{
  font-size: 12px;
	font-weight: 400;
  font-family: Helvetica;
   color: #291610;
  padding: 20px 0 0px 0;
  text-align: center;
  letter-spacing: 2px;
}

h2 {
 	font-size: 16px;
	font-weight: 400;
  font-style: ;
  font-family: Times New Roman;
  text-align: left;
  letter-spacing: 0px;
  margin: -5px 0 0 25px;

}

h6 {
 	font-size: 18px;
	font-weight: 800;
  font-style:  ;
  font-family: Helvetica;
  text-align: left;
  letter-spacing: 2px;
margin: 30px 0 15px 15px;
  color: #291610;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Creates two columns of equal width */
  /* grid-template-columns: 70% 30%; */ /* Example for unequal column widths */
  gap: 5px; /* Adds space between columns */

}

.container img {
  width: 100%; /* Image takes the full width of its parent container */
  height: auto; /* Height adjusts automatically to maintain aspect ratio */
  display: block; /* Helps with layout issues */
  object-fit: fill;
}






.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f6f0f0;
  color: #291610;
  padding: 15px 15px 15px 550px;
    width:150%;



}



   a:link {
      color: #291610;
      text-decoration: none;
     margin: 50px 0 0 0;
       
    }



/* Styles for screens up to 480px wide (e.g., mobile phones) */
@media screen and (max-width: 400px) {
 body {
	font-family: Helvetica;
	font-size: 12px;
	line-height: 1.5;
	
	background-color: #f6f0f0;
	color: #291610;
	margin: 40px auto 40px auto;
	width: 800px;
}
  
  .container {
      display: grid;
  grid-template-columns: 1fr 1fr; /* Creates two columns of equal width */
  /* grid-template-columns: 70% 30%; */ /* Example for unequal column widths */
  gap: 5px; /* Adds space between columns */
    margin: 0 500px 0 0;
  }
  p{
    font-size: 10px;
    margin: 0 500px 0 75px;
  }
  
  h4{
        font-size: 10px;
    
  }
  
  
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1500px;
  background-color: #f6f0f0;
  padding: 15px 0px 15px 100px;



}
  
  
  #cards {
size: 20%;  
}
  
}