*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
    font-family:Arial,Helvetica,sans-serif;
    background:#f5f5f5;
}

body{
    display:flex;
    flex-direction:column;
}

.header{
    background:#2f7d32;
    color:#fff;
    padding:20px 40px;
}

.header__container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:24px;
}

.header__logo{
    width:90px;
    height:auto;
    flex-shrink:0;
    display:block;
}

.header__content{
    flex:1;
}

.header__content h1{
    font-size:32px;
    line-height:1.2;
    margin-bottom:8px;
}

.header__content p{
    font-size:17px;
    line-height:1.5;
    opacity:.95;
}

.viewer{
    flex:1;
    min-height:0;
}

.viewer iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

footer{
    background:#222;
    color:#fff;
    padding:18px;
    text-align:center;
    font-size:14px;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    .header{
        padding:24px 18px;
    }

    .header__container{
        display:block;
        text-align:center;
    }

    .header__logo{
        display:block;
        width:100%;
        max-width:240px;
        margin:0 auto 20px;
        height:auto;
    }

    .header__content h1{
        font-size:26px;
        line-height:1.25;
    }

    .header__content p{
        font-size:16px;
        margin-top:10px;
    }

}