/* Styles scoped for homepage (homepage.html). Keep selectors specific to avoid collisions. */

:root{
    --primary:#286186;
    --accent:#ff7a59;
    --muted:#6b7280;
    --bg:#fbfdff;
}

body {

    background-image: url(/static/background_home.jpg);
    background-repeat: no-repeat;
    background-color: #E7B984;
}

.container {
    min-height: 1000px;
}

/* logo */

.logo_for_all {
    display: none;
}
.logo_for_homepage {
    display: block;
}

.hp-hero{
    padding: 25px 0 22px;
    margin-top: 294px;
}

.hp-hero-inner{
    display: flex;
    gap: 0px;
    align-items: center;
    max-width: 470px;
    margin: 0 auto;
    padding: 0;
    flex-direction:column; 
    align-items:flex-start; 
}

.hp-hero-left{
    flex: 1.1;
}
.hp-hero-right{
    flex: 0.6;
}
.hp-title{
    font-size: 36px;
    margin: 0 0 12px;
    color: var(--primary);
}
.hp-subtitle{
    margin: 0 0 20px;
    color: var(--muted);
    max-width: 520px;
}
.hp-ctas{ 
    display:flex; 
    gap:13px; 
    margin-bottom:13px; 
    width: 100%; 
    justify-content: space-between; 
}


/* Mobile responsiveness */
@media (max-width: 768px) {
    body {
        background-image: url(/static/bg_main.jpg);
        background-position: center calc(210px - 52vw) !important;
        background-size: 100% auto !important;

    }
    .hp-hero-inner{
        max-width: 340px;
    }
}

@media (max-width: 400px) {
    body {
        background-position: center top !important;
    }
}