:root {
    --primary-color: #1e1e1e;
    --nav-color: #858783;
    --bg-primary: #f7f7f7;
    --size-margin: 2.3%;
    --font-size-title: 58.95px;
    --font-size-header: calc(var(--font-size-title) - 14.95px);
    --font-size-description: calc(var(--font-size-header) - 6.39px);
    --size-logo: calc(var(--font-size-title) + 39.281px);
    --size-nav: calc(var(--font-size-title) - 23.45px);
    --line-height-contact: calc(var(--font-size-title) + 12.37px);
    --line-height-about: calc(var(--line-height-contact) - 30px);
    /* --size-margin: 3.960417%; */
}
body {
    background-color: var(--bg-primary);
}
* {
    font-family: "acumin-pro", sans-serif;
}

/* framework bootstrap */
.container,
.container-lg {
    max-width: calc(100% - (var(--size-margin) * 2)) !important;
    margin: 0 var(--size-margin);
}

/* navbar */
.navbar-main {
    padding-top: calc(var(--size-margin) + 8px);
    padding-bottom: calc(19.84px + 8px);
    background-color: var(--bg-primary);
    position: static;
}
.navbar-main .navbar-brand svg {
    width: var(--size-logo);
    /* width: 98.231px; */
    /* height: 51.28px; */
    color: var(--primary-color);
}
.navbar-main .navbar-nav .nav-item {
    margin-left: 54.776px;
}
.navbar-main .navbar-nav .nav-item .nav-link {
    font-size: var(--size-nav);
    padding: 0;
    color: var(--nav-color);
    font-weight: 200;
    transition: color 0.3s ease-in-out;
}
.navbar-main .navbar-nav .nav-item .nav-link.active {
    font-weight: 400;
}
.navbar-main .navbar-nav .nav-item .nav-link:hover {
    color: var(--primary-color);
}
.navbar-main .navbar-nav .nav-item .nav-link.active {
    color: var(--primary-color);
}
.navbar-main .navbar-toggler svg {
    font-size: 28px;
    color: var(--primary-color);
}
/* content */
/* header */

/* .box-header {
    height: calc(100vh - (113.653px * 2));
} */
.box-header .title-header {
    /* header font size  */
    font-size: var(--font-size-header);
    font-weight: 800;
    animation: showTitle 0.8s;
}
@keyframes showTitle {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}


.box-header .description-header {
    font-size: var(--font-size-description);
    font-weight: 200;
    color: #494a48;
    animation: showTitle 0.8s;
}

.box-header .description-header a {
    color: #494a48;
    text-decoration: none !important;
}




.not-found {
    height: calc(100vh - 160.5px);
}
.not-found .img-not-found {
    width: 450px;
}
/* script bars icon */
.navbar-toggler:focus {
    box-shadow: none;
}
.menu {
    height: 20px;
    width: 20px;
    position: relative;
    cursor: pointer;
}
.menu span {
    width: 35px;
    height: 3px;
    background-color: #1e1e1e;
    position: absolute;
    display: block;
    transition: all 0.3s ease;
    border-radius: 10px;
}
.menu span:first-child {
    top: 0;
}
.menu span:nth-child(2) {
    top: 10px;
}
.menu span:last-child {
    top: 20px;
}
.menu.active span:nth-child(2) {
    opacity: 0;
}
.menu.active span:first-child,
.menu.active span:last-child {
    top: 10px;
}
.menu.active span:first-child {
    transform: rotate(45deg);
}
.menu.active span:last-child {
    transform: rotate(-45deg);
}
/* ------------------------------------------------- */
/* login auth */
.login {
    height: calc(100vh - 65px);
}
/* response screen */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/* ----------------------------screen smaller than 1920------------------------- */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
@media (max-width: 1769px) {
    :root {
        --font-size-title: 56px;
    }
}
@media (max-width: 1626px) {
    :root {
        --font-size-title: 49px;
    }
}
@media (max-width: 1366px) {
    :root {
        --font-size-title: 45px;
        --size-logo: 70px;
    }
    /* navbar main */
    .navbar-main .navbar-nav .nav-item {
        margin-left: 33.776px;
    }

}
@media (max-width: 1228px) {
    :root {
        --font-size-title: 44px;
    }

}
@media (max-width: 1090px) {
    :root {
        --font-size-title: 40px;
        --size-nav: calc(var(--font-size-title) - 19.45px);
    }

}
@media (max-width: 909px) {
    :root {
        --font-size-title: 38px;
        --size-nav: calc(var(--font-size-title) - 17.45px);
    }

}
@media (max-width: 780px) {
        :root {
            --font-size-title: 36px;
            --size-nav: calc(var(--font-size-title) - 15.45px);
        }
}
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/* --------------------------screen smaller than 1360px------------------------- */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* .box-header {
        height: calc(100vh - 52.906px) !important;
    } */
    .box-header .title-header {
        font-size: 25px;
    }
    .box-header .description-header {
        font-size: 20px;
        line-height: 24px;
    }
    /* navbar */
    .navbar-main .navbar-nav .nav-item {
        margin-left: 0;
    }
    .navbar-collapse {
        position: absolute;
        top: 52.156px;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 10;
        display: block;
        transition: all 0.3s;
        background-color: var(--bg-primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-main {
        margin-bottom: 0;
    }
    .navbar-brand {
        padding: 0;
    }
    .navbar-brand svg {
        width: 43.448px !important;
    }
    .navbar-toggler {
        /* height: 20px */
        padding: 0;
        width: 27px;
        margin-top: 4px;
    }
    .navbar-toggler span {
        width: 27px;
        height: 2px;
    }
    .menu span:nth-child(2) {
        top: 8px;
    }
    .menu span:last-child {
        top: 16px;
    }
}
@media (max-width: 500px) {

    .box-header .title-header {
        font-size: 20px;
    }
    .box-header .description-header {
        font-size: 15px;
        line-height: 19px
    }
}
@media (max-width: 387px) {
    .box-header .title-header {
        font-size: 18px;
    }
    .box-header .description-header {
        font-size: 13px;
        line-height: 16px;
    }
}
@media (max-width: 360px) {
    .box-header .title-header {
        font-size: 15px;
    }
    .box-header .description-header {
        font-size: 10px;
        line-height: 11px;
    }
}


@media (max-width: 350px) {
    .not-found .img-not-found {
        width: 100px;
    }
}
@media (max-width: 217px) {
    .box-header .title-header {
        font-size: 10px;
    }
    .box-header .description-header {
        font-size: 5px;
        line-height: 5px;
    }
}