@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --head: "DM Serif Display", serif;
    --body: "Plus Jakarta Sans", sans-serif;
    --yellow: #FF9D00;
    --black: #0e0e0e;
    --white: #ffffff;
    --grey: #dbdbdb;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--head);
    font-weight: 500!important;
    line-height: 110%;
}

p {
    font-family: var(--body);
}

.navbar {
    height: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.navbar img {
    width: 120px;
}

.navbar-nav li a {
    font-family: var(--body);
    font-size: 16px;
    cursor: var(--white)!important;
    cursor: pointer!important;
}

.active {
    color: var(--yellow)!important;
    font-weight: 700;
}

.btn {
    font-family: var(--body);
    border: none;
    border-radius: 50px;
    background-color: var(--yellow);
    padding: 12px 32px;
}

.hero {
    background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('/img/hero.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
    height: 100vh;
}

.hero h1 {
    font-size: 120px!important;
    line-height: 110%;
}

.hero h1 span {
    color: var(--yellow)!important;
}

.hero p {
    font-size: 22px;
    width: 800px;
}

.btn-block {
    display: flex;
    gap: 20px;
    padding-top: 8px;
}

.btn {
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--black)!important;
}

.btn-outline-primary {
    background: transparent!important;
    color: var(--white);
    border: 1px solid var(--white);
}

.btn-outline-primary:hover {
    background-color: var(--black)!important;
    border: 1px solid var(--black);
}

.quick {
    background: var(--black);
    padding: 40px 0;
}

.quick-item {
    border: 1px solid var(--yellow);
    padding: 24px;
    height: 100%;
}

.quick-item i {
    color: var(--yellow);
    font-size: 40px;
}

.hp-about {
    padding: 80px 0;
}
.col img {
    width: 100%;
}