/* ====================
HERO SECTION IMAGE AND TEXT BOX
==================== */

.hero-container {
    gap: 9px;
    width: 99%;
}

.hero-media {
    flex: 0 1 515px;
}

.hero-text-stack {
    flex: 0 1 480px;
    gap: 4px;
}

.text-box {
    padding: 5px 5px;
}

.text-box-1 { background: #FEF3F6; border-color: #8F6378; flex: .45; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 7px 7px; }
.text-box-1 p { color: #8F6378; font-size: 2.55rem; line-height: 1.15; }

.text-box-2 { background: #FEF5E1; border-color: #755118; flex: .65; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 8px 8px; }
.text-box-2 p { color: #8A7933; font-size: 2.55rem; line-height: 1.15; }

.text-box-3 { background: #F7F4E1; border-color: #877348; flex: .2; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 10px 10px; }
.text-box-3 p { color: #B09558; font-size: 2.4rem; line-height: 1.15; }

.text-box-4 { background: #F4FEE1; border-color: #18754A; flex: .4; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 10px 10px; }
.text-box-4 p { color: #18754A; font-size: 2.5rem; line-height: 1.15; }

.text-box-5 { background: #F5FDFF; border-color: #4F749A; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 7px 5px; }
.text-box-5 p { color: #4F749A; font-size: 2.65rem; letter-spacing: 0.01em;
line-height: 1.15; }

.text-box-6 { background: #FCF8FF; border-color: #775CA1; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 7px 5px; }
.text-box-6 p { color: #775CA1; font-size: 2.65rem; letter-spacing: 0.01em;
line-height: 1.15; }

/* ====================
LARGE / ROUNDED IMAGES
==================== */
.large-image {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 8px;
}

.large-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}

/* ====================
TEXT BOX (HTML FORMAT)
==================== */
.solo-text-box {
max-width: 1000px;
width: 99%;
margin: 0 auto;
border-radius: 20px;
border-width: 3.5px;
border-style: solid;
padding: 5px 4px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84);
background: #dfe7f7;
border-color: #4d5ca8;
margin-bottom: 5px;
margin-top: 5px;
}

@media (max-width: 768px) {
.hero-container { flex-direction: column; }

.text-box-1 p { font-size: clamp(1.7rem, 7.9vw, 4.4rem); padding: 4px 4px; flex: .95; }
.text-box-2 p { flex: .95; font-size: clamp(1.7rem, 8vw, 3.6rem); }
.text-box-3 p { font-size: clamp(1.7rem, 7.7vw, 3.4rem); }
.text-box-4 p { font-size: clamp(1.7rem, 7.7vw, 3.4rem); }
.text-box-5 p { font-size: clamp(1.7rem, 7.7vw, 3.6rem); }
.text-box-6 p { font-size: clamp(1.7rem, 8vw, 3.6rem); }

.large-image {
max-width: 98%;
width: 100%;
}
}