:root {
    --main-color: #16315E;
    --black-color: #1B1B1B;
    --white-color: #ffffff;

    --href-color: #5FD1C1;
    --gray-1: #434447;

    --modal-color: #16315E;

    --spacing-xl: 5rem;
    --spacing-lg: 4rem;
    --spacing-md: 3rem;
    --spacing-sm: 2rem;
    --spacing-tiny: 1rem;


    /* Blue core */
    --blue-50: #e8eaef;
    --blue-100: #b7bfcd;
    --blue-200: #94a0b5;
    --blue-300: #637593;
    --blue-400: #455a7e;
    --blue-500: #16315e;
    --blue-600: #142d56;
    --blue-700: #102343;
    --blue-800: #0c1b34;
    --blue-900: #091527;

    /* Grey core */
    --grey-50: #ececed;
    --grey-100: #c5c5c6;
    --grey-200: #a9a9aa;
    --grey-300: #818284;
    --grey-400: #69696c;
    --grey-500: #434447;
    --grey-600: #3d3e41;
    --grey-700: #303032;
    --grey-800: #252527;
    --grey-900: #1c1d1e;

    /* Teal core  */
    --teal-50: #effaf9;
    --teal-100: #cdf1ec;
    --teal-200: #b5eae2;
    --teal-300: #94e0d5;
    --teal-400: #7fdacd;
    --teal-500: #5fd1c1;
    --teal-600: #56beb0;
    --teal-700: #439489;
    --teal-800: #34736a;
    --teal-900: #285851;

    /* Blue Vibrant 1 */
    --blue-vibrant1-50: #e9edf8;
    --blue-vibrant1-100: #bcc7ea;
    --blue-vibrant1-200: #9bace0;
    --blue-vibrant1-300: #6e86d2;
    --blue-vibrant1-400: #516ec9;
    --blue-vibrant1-500: #264abc;
    --blue-vibrant1-600: #2343ab;
    --blue-vibrant1-700: #1b3585;
    --blue-vibrant1-800: #152967;
    --blue-vibrant1-900: #101f4f;
}

@font-face {
    font-family: 'Lexend Deca';
    src: url('../assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../assets/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

body {
    font-family: 'Lexend Deca', Sans-serif;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block-start: 0;
    margin-block-end: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Heading */
h1,
h2 {
    font-size: 54px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.4em;
    color: var(--main-color);
}

h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: var(-gray-1);
}


.layer {
    padding: 0 40px;
}

.no-scroll {
    overflow: hidden;
}

.hide {
    display: none;
}

.border-ltr,
.border-rtl {
    position: relative;
}

@keyframes border-animation {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


.border-ttb {
    position: absolute;
    right: 0;
    height: 100%;
}

.border-ttb:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    border-right: solid 1px #ffffff;
}

@keyframes border-vertical-animation {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

.border-ltr:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    border-bottom: solid 1px var(--main-color);
}

.border-ltr-animation::before {
    animation: border-animation 3s linear forwards;
}

.border-ttb-animation::before {
    animation: border-vertical-animation 3s linear forwards;
}

.border-rtl:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    border-bottom: solid 1px var(--main-color);
}

.border-rtl-animation::before {
    animation: border-animation 3s linear forwards;
}

.view-more-wrapper a {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 28px;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    padding: 06px 20px 06px 20px;
    background-image: url(https://www.coteccons.vn/wp-content/uploads/2022/08/border.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #1B1B1B;
    width: fit-content;
}

.view-more-wrapper span.button-icon {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 28px;
    margin-left: 5px;
}

.view-more-wrapper span.button-icon svg {
    width: 10px;
    margin-left: 7px;
    transition: .2s;
    height: auto;
}

.view-more-wrapper:hover span.button-icon svg {
    transform: rotate(45deg);
    margin-left: 15px;
}

@media (max-width: 769px) {
    .layer {
        padding: 15px 16px 015px 16px;
    }

    .view-more-wrapper a {
        font-size: 11px;
    }
}