/* ===== HERO SECTION ===== */
.hero {
    padding: 100px 0 60px;
    text-align: center;
    background: var(--color-bg, #fff);
    position: relative;
    overflow: visible;
}



.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 800px;
    height: 900px;
    background: radial-gradient(
        ellipse,
        rgba(204, 226, 252, 0.45) 0%,
        rgba(204, 226, 252, 0.22) 25%,
        rgba(204, 226, 252, 0.08) 50%,
        rgba(255, 255, 255, 0) 75%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.hero::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 800px;
    height: 900px;
    background: radial-gradient(
        ellipse,
        rgba(167, 148, 121, 0.2) 0%,
        rgba(204, 226, 252, 0.15) 25%,
        rgba(204, 226, 252, 0.05) 50%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.hero > .container {
    position: relative;
    z-index: 1;
}

/* ===== HERO IMAGE (GUMO LOGO) ===== */
.hero-image-single {
    max-width: 320px;
    margin: 0 auto 32px;
    border-radius: 12px;
    overflow: hidden;
}

.hero-image-single img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ===== SEARCH BAR ===== */
.search-bar {
    max-width: 540px;
    margin: 0 auto;
    position: relative;
}

.search-bar__input-wrapper {
    display: flex;
    align-items: center;
    background: var(--color-bg, #fff);
    border: none;
    border-radius: var(--radius-lg, 12px);
    padding: 6px 8px 6px 20px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(28, 45, 77, 0.06);
}

.search-bar__input-wrapper:focus-within {
    border-color: var(--primary-color, #1c2d4d);
    box-shadow: 0 0 0 4px rgba(28, 45, 77, 0.1);
}

.search-bar__icon {
    flex-shrink: 0;
    color: var(--gold-color, #A79479);
    margin-right: 12px;
}

.search-bar__icon svg {
    width: 20px;
    height: 20px;
}

.search-bar__input {
    flex: 1;
    padding: 14px 0;
    font-size: 0.95rem;
    color: var(--primary-color, #1c2d4d);
    background: transparent;
}

.search-bar__input::placeholder {
    color: var(--gold-color, #A79479);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .hero {
        padding: 80px 0 48px;
    }

    .hero-image-single {
        max-width: 240px;
        margin-bottom: 24px;
    }

    .search-bar {
        max-width: 100%;
    }
}

@media (min-width: 1440px) {
    .hero {
        padding: 140px 0 80px;
    }

    .hero-image-single {
        max-width: 380px;
    }

    .search-bar {
        max-width: 620px;
    }
}

@media (min-width: 1920px) {
    .hero {
        padding: 180px 0 100px;
    }

    .hero-image-single {
        max-width: 420px;
    }

    .search-bar {
        max-width: 700px;
    }
}