img, p, h1, h2, h4, .divider {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

img {
	width: 100%;       /* Fills the width of the parent div */
    max-width: 950px;  /* Stops it from getting too huge on big monitors */
    height: auto;      /* Keeps the proportions so it doesn't look squished */
	object-fit: contain;
	transform: scale(1.1); /* Increases the size by 10% without moving other elements */
    margin-top: 10px;      /* Add some margin because scaling might overlap text */
    margin-bottom: 40px;
    /*margin: 0 auto; */
	display: block;
	padding: 15px 0px;

}

p {
	font-family: 'Source Sans Pro', sans-serif;
    line-height: 1.6;
    color: #4E342E;
    max-width: 700px; /* Keeps text from stretching too far */
    margin: 20px auto; /* Centers the text blocks */
}
h1 {
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
    color: #3E2723; /* Deep Cocoa Brown */
    text-align: center;
	margin-bottom: 0; /* Removes the bottom gap of the headline */
}

h2 { 
font-family: 'Playfair Display', serif;
font-style: italic;
    color: #5D4037; /* A slightly lighter cocoa brown */
    text-align: center;
	margin-bottom: 0; /* Removes the bottom gap of the headline */
}

h3 {
    font-family: 'Playfair Display', serif;
    color: #3E2723; /* Deep Cocoa Brown */
    text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0; /* Removes the bottom gap of the headline */
}



.cocoa-divider {
    width: 70%;               /* Doesn't touch the edges anymore */
    max-width: 655px;         /* Optional: keeps it from getting too long on big screens */
    height: 60px;             
    margin: 50px auto;        /* 'auto' centers the divider horizontally */
    background-image: url('images/cocoa-bean.png');
    background-repeat: repeat-x; 
    background-size: contain;    
    background-position: center;
    border: none;
    opacity: 0.6;
	 margin-top: -10px; 
	margin-bottom: 0; /* Removes the bottom gap of the headline */
}



.divider {
height: 2px;
background-color: #0868ac;
margin-top: 10px;
margin-bottom: 10px;
}


body {
    background-color: #FDFCF0;
    margin: 0;
    padding: 40px; /* This gives the frame some breathing room from the screen edge */
    display: flex;
    justify-content: center;
}

.content-wrapper {
    background-color: #FDFCF0; /* Matches the body */
    border: 8px solid #3E2723; /* Your Dark Cocoa */
    outline: 4px solid #E3B448; /* Your Honey Gold */
    outline-offset: -20px; 
    
    max-width: 900px; /* Limits the width so it looks like a vertical bar/page */
    padding: 60px;    /* Space between the gold line and your text/images */
    box-sizing: border-box; 
}

.img2 {
  display: block;
    margin: 40px auto; /* Centered with 40px space above/below */
    
    /* THE KEY SCALING CONTROLS */
    width: 85%;        /* Makes it slightly smaller than the text for an editorial look */
    max-width: 800px;  /* Prevents it from getting "giant" on huge monitors */
    height: auto;      /* Keeps the proportions perfect */
	
    
    /* OPTIONAL POLISH */
    /*border: 1px solid rgba(227, 180, 72, 0.3); /* Very subtle gold ghost-border */
    padding: 10px;
}

.img3 {
  width: 600px; 
  height: auto;
  margin: 40px auto;
  display: block;    /* Changes it from inline to a block */
    margin-left: auto; /* Pushes from the left */
    margin-right: auto;/* Pushes from the right */
    max-width: 100%;   /* Keeps it from breaking your layout */
	/*border: 1px solid rgba(227, 180, 72, 0.3); /* Very subtle gold ghost-border */
}

ul {
    list-style: none; 
    padding-left: 20px;
    margin-top: 20px;
}

/* 2. Style the list items to create space for the bean */
li {
    position: relative;
    padding-left: 35px; /* This pushes text right to make room for the bean */
    margin-bottom: 15px;
    line-height: 1.5;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1rem;
    line-height: 1.6;
    color: #4E342E;
}

/* 3. The Bean Icon */
li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;          /* Adjust this to move the bean up/down */
    width: 25px;       /* Start at 25px so you can definitely see it */
    height: 25px;
    background-image: url('images/cocoa-bean.png'); /* Double check this path! */
    background-size: contain;
    background-repeat: no-repeat;
}