/* ===== Brand ===== */

:root{
    --samju-yellow:#F1C631;
    --samju-black:#070707;
    --samju-gray:#D0D1D3;
    --samju-white:#FFFFFF;
}

/* ===== Fonts ===== */

@font-face{
    font-family:'SamjuPrimary';
    src:url('/assets/fonts/Helvetica.ttf');
}

@font-face{
    font-family:'SamjuText';
    src:url('/assets/fonts/HelveticaNeue.ttf');
}

@font-face{
    font-family:'SamjuLight';
    src:url('/assets/fonts/HelveticaNeueLt.ttf');
}

@font-face{
    font-family:'SamjuMedium';
    src:url('/assets/fonts/HelveticaNeueMed.ttf');
}

@font-face{
    font-family:'SamjuBold';
    src:url('/assets/fonts/HelveticaNeueBd.ttf');
}

/* ===== Reset ===== */

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

html,
body{
    width:100%;
    min-height:100%;
    background:#ffffff;
    color:var(--samju-black);
    font-family:'SamjuText';
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* ===== Header ===== */

header{
    background:#ffffff;

    border-bottom:1px solid #eeeeee;

    padding:35px 60px;
}

.logo-container{
    text-align:center;
}

.logo{
    width:520px;
    max-width:90%;
}

/* ===== Navigation ===== */

.navigation{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:30px;

    flex-wrap:wrap;
}

.navigation a{

    text-decoration:none;

    color:var(--samju-black);

    font-family:'SamjuMedium';

    font-size:15px;
}

.navigation a:hover{
    color:var(--samju-yellow);
}

/* ===== Hero ===== */

.hero{

    padding:140px 30px;

    text-align:center;
}

.hero h1{

    font-family:'SamjuPrimary';

    font-size:54px;

    margin-bottom:30px;
}

.hero p{

    font-size:22px;

    color:#555555;
}

/* ===== Footer ===== */

footer{

    background:var(--samju-black);

    color:#ffffff;

    text-align:center;

    padding:24px;
}

/* ===== Mobile ===== */

@media(max-width:768px){

    header{
        padding:25px;
    }

    .logo{
        width:320px;
    }

    .hero h1{
        font-size:36px;
    }

}