/*===================================
HERO SECTION IMAGE + IMAGE (Homepage)
====================================*/

.hero-section {
margin-top: 3px;
margin-bottom: 5px;
display: block;
}

.hero-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
}

.hero-image {
width: 490px;         
flex-shrink: 0;
margin-left: 6px;
}

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

.hero-text {
width: 502px;         
flex-shrink: 0;
}

.hero-text img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/*===============
MOBILE RESPONSIVE
================*/
@media (max-width: 768px) {

.hero-section {
align-items: center;
justify-content: center;
}

.hero-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: 0 2px;
box-sizing: border-box;
}

.hero-image {
width: 99%;
max-width: none;
margin: 0 auto;
padding-right: 0;
}

.hero-text {
width: 100%;
max-width: none;
margin: 0 auto;
}
}