@font-face {
    font-family: 'Biennale-Regular';
    src: url('../fonts/Biennale-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Biennale-Bold';
    src: url('../fonts/Biennale-Bold (2).otf') format('opentype');
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Biennale-Regular';
}

/* ===== TOP STRIP ===== */
.pxr-top-strip{
    width:100%;
    height:10vh;
    background:#f4f4f4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.8vh 5vw;
}

.pxr-top-strip img{
    height:7vh;
}

.pxr-strip-btn{
    padding:0.8em 1.5em;
    font-size:1.3rem;
    background:#0f2f2f;
    color:#fff;
    border:none;
    cursor:pointer;
}

/* ===== HERO ===== */
.pxr-hero{
    width:100%;
    height:92vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* Images */
.pxr-hero-img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    top:0;
    left:0;
}

/* Desktop / Mobile control */
.pxr-mobile{ display:none; }

/* Overlay */
.pxr-hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:1;
}

/* Content */
.pxr-hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    width:80%;
}

.pxr-hero-content h1{
    font-size:4vw;
    margin-bottom:1rem;
    font-weight:700;
}

.pxr-hero-content p{
    font-size:2.3vw;
    margin-bottom:2rem;
}

.pxr-hero-btn{
    padding:0.7em 2em;
    font-size:2rem;
    background:#0f2f2f;
    color:#fff;
    border:2px solid #fff;
    cursor:pointer;
}

/* ===== BOTTOM STRIP ===== */
.pxr-bottom-strip{
    width:100%;
    height:10vh;
    background:#e3e1d7;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.8vh 5vw;
}

.pxr-bottom-strip img{
    height:6vh;
}

/* ===== MOBILE ===== */
@media (max-width:768px){

    .pxr-desktop{ display:none; }
    .pxr-mobile{ display:block; }

    .pxr-top-strip img{
        height:6vh;
    }

    .pxr-strip-btn{
        font-size:1.5rem;
        padding:0.7em 1.2em;
    }

    .pxr-hero{
        height:93vh;
    }

    .pxr-hero-content{
        width:90%;
    }

    .pxr-hero-content h1{
        font-size:10vw;
    }

    .pxr-hero-content p{
        font-size:7vw;
    }

    .pxr-hero-btn{
        font-size:1.8rem;
        padding:0.9em 2em;
    }
}