@import url('assets/fonts/Kanit/Kanit-Regular.ttf');

:root {
    --base-cs-0: #14202E;
    --base-cs-1: #1E3957;
    --base-cs-2: #2B4257;
    --base-cs-3: #4A596A;
    --base-cs-4: #88A9C3;
    --base-cs-5: #A5B2BD;
    --base-cs-6: #252525;

    --title-cs: #938572;
    --text-cs-0: #fff;
    --text-cs-1: #333;
    --text-cs-2: #d48f02;
    --text-cs-3: #e4b560;
    --text-cs-4: #F4D03F;

}

body {
    font-family: 'Kanit', sans-serif;
    background-color: #fffffA;
    color: var(--text-cs-0);
}

.navbar {
    background-color: var(--base-cs-0);
}

.banner {
    position: relative;
    width: 100%;

    .card-img {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .card-contect {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-cs-0);
        }

        p {
            font-size: 20px;
            font-weight: 500;
            color: var(--text-cs-2);
        }

        a {
            text-decoration: none;
            color: var(--text-cs-4);
        }
    }
}