@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/*******************************************************************************
Variable
*******************************************************************************/

:root {
    /* Color */
    --clr-primary: #C21B17;
    --clr-primary-dark: #a1161d;
    --clr-secondary: #F6F6F6;
    --clr-neutral-dark: #3B424A;
    --clr-white: #ffffff;

    /* Font */
    --heading-1: 5.6rem;
    --heading-2: 4.8rem;
    --heading-3: 4.2rem;
    --heading-4: 3.4rem;
    --heading-5: 2.4rem;
    --heading-6: 1.8rem;
    --heading-small: 1.4rem;


    
    --fs-navigation: 1.8rem;
    --fs-base: 1.6rem;
    --fs-second: 1.4rem;
    --fs-small: 1.2rem;

    --font-color: #20252b;

    --fw-100: 100;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;

    --line-height-base: 1.5;
    --line-height-heading: 1.2;

    --drop-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    --line-color: rgba(250,250,250,.3)
}



/*******************************************************************************
    Base
*******************************************************************************/

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

html {
    --font-size: 62.5%;
    font-size: var(--font-size);
}

body {
    font-family: "Roboto", sans-serif;
    font-size: var(--fs-base);
    font-weight: var(--fw-400);
    line-height: var(--line-height-base);
    color: var(--font-color);
    overflow-x: hidden;
    
    background-image: linear-gradient(90deg, #48535C, #20252b);
}

.container {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 11rem 0;
    background-color: var(--clr-secondary);
}

a {
    text-decoration: none;
    transition: .4s ease-in-out;
    color: var(--font-color);
}

a:hover {
    color: var(--clr-primary);
}



.bg-img-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-big {
    padding: 1rem 4rem;
    font-size: var(--fs-base);
    text-transform: uppercase;
    color: var(--clr-white);
    font-weight: var(--fw-500);
    border: 1px solid transparent;
    transition: .3s ease;
}

.btn-big:hover {
    background-color: transparent;
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
}

.btn-form {
    padding: 1rem 4rem;
    font-size: var(--fs-base);
    text-transform: uppercase;
    color: var(--clr-white);
    font-weight: var(--fw-500);
    border: 0px solid transparent;
    transition: .3s ease;
    background-color: var(--clr-primary);
    border-radius: 5px;
}

.btn-form:hover {
    background-color: var(--clr-primary-dark);
}

.back-primary {
    background-color: var(--clr-primary);
    border-radius: 5px;
}

.back-primary-dark {
    background-color: var(--clr-primary-dark);
}

.back-secondary {
    background-color: #f0f0f0;
}

.back-dark {
    background-color: var(--clr-neutral-dark);
}

.clr-primary {
    color: var(--clr-primary);
}

.clr-white {
    color: var(--clr-white);
}

.clr-font {
    color: var(--font-color);
}

.title-divider {
    width: 20rem;
    height: 1px;
    background-color: #CFCFCF;
    display: inline-block;
    margin: 2rem 0;
}

.info-box {
    color: var(--clr-white);
    padding: 1rem 2rem;
    margin: 0 1rem;
}

.info-box i {
    font-size: 2rem;
}

ul li{
    list-style: none;
    font-size: var(--fs-small);
    text-transform: uppercase;
    color: var(--clr-white);
}


/*******************************************************************************
    Typography
*******************************************************************************/
.heading-1 {
    font-size: 4.8rem;
    line-height: var(--line-height-heading);
    font-weight: var(--fw-300);
}

.heading-2 {
    font-size: 2.2rem;
    line-height: var(--line-height-base);
}

.sub-title {
    font-size: 2.4rem;
    line-height: var(--line-height-base);
}

.fw-500 {
    font-weight: var(--fw-500);
}

.fw-700 {
    font-weight: var(--fw-700);
}

.fs-small {
    font-size: var(--fs-small);
}



/*******************************************************************************
    Header Top
*******************************************************************************/
.header {
    padding: 1rem 0;
    position: relative;
}

.logo-box {
    width: 14rem;
    height: 11rem;
    position: absolute;
}

.navigation {
    line-height: 0.9;
}

.navigation ul{
    margin: 0;
}

.navigation ul li{
    padding: 0 2rem;
    margin: .5rem 0;
}

.navigation ul li{
    border-right: 1px solid var(--line-color);
}

.navigation ul li i {
    font-size: 2rem;
    margin-right: 5px;
}

.navigation ul li a {
    color: var(--clr-white);
    font-size: 1.4rem;
}

.navigation .ri-menu-line {
    color: var(--clr-white);
    font-size: 2.5rem;
}

.language {
    position: relative;
    cursor: pointer;
    margin-right: 1rem;
    font-size: 1.4rem;
}

.language__items {
    position: absolute;
    top: 2rem;
    left: -1.6rem;
    width: 5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: 1.8rem;
    display: none;
    text-align: center;
}

.language__items a {
    /*color: var(--clr-white);*/
    color: rgba(255, 255, 255, .8);
}

.language__items a:hover {
    color: rgba(255, 255, 255, 1);
}

.offcanvas-body ul {
    padding-left: 0;
}

.offcanvas-body ul li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--clr-primary);
}

.offcanvas-body ul li a {
    color: var(--clr-primary);
    font-size: 1.4rem;
}

.offcanvas-body ul li i {
   font-size: 2rem;
   margin-right: 1rem;
}
/*******************************************************************************
    Forms
*******************************************************************************/

.form-wrapper {
    padding: 5rem;
}

.select-custom {
    border: 1px solid #b9b8b8;
    background-color: transparent;
    border-radius: 5px;
    padding: 1rem 1.4rem;
    font-size: 16px;
    color: #666;
    width: 100%;
}

.select-custom:focus {
    border-color: #b9b8b8;
    box-shadow: 0 0 0 .025rem rgba(0, 0, 0, .6);
}

.ui-state-default {
    background-color: var(--clr-primary);
}


.input-custom, .input-registration {
    background-color: transparent !important;
    border-radius: 5px;
    padding: .8rem 1.4rem;
    font-size: 16px;
    color: #666;
    width: 100%;
}

.input-custom {
    border: 1px solid #666666;
}

.input-custom:focus {
    border-color: #666666;
    box-shadow: 0 0 0 .025rem rgba(0, 0, 0, .6);
    background-color: var(--clr-neutral-100);
}

.input-registration {
    border: 1px solid #b9b8b8;
}

.input-registration:focus {
    outline: none !important;
    border-color: #666;
}

.form-help-block {
    color: var(--clr-primary);
    font-size: 1.2rem;
    font-weight: 500;
}

.form-check-custom {
    width: 2rem;
    height: 2rem;
    background-color: transparent;
}

.form-check-input:checked {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.alert-error {
    background-color: var(--clr-primary);
    padding: 1rem;
    color: white;
}

[type="text"]::-webkit-input-placeholder {
    color: #666666;
    opacity: .5;
}

[type="email"]::-webkit-input-placeholder {
    color: #666666;
    opacity: .5;
}

[type="text"]:-moz-placeholder {
    color: #666666;
    opacity: .5;
}

[type="email"]:-moz-placeholder {
    color: #666666;
    opacity: .5;
}

[type="text"]::-moz-placeholder {
    color: #666666;
    opacity: .5;
}

[type="email"]::-moz-placeholder {
    color: #666666;
    opacity: .5;
}

[type="text"]:-ms-input-placeholder {
    color: #666666;
    opacity: .5;
}

[type="email"]:-ms-input-placeholder {
    color: #666666;
    opacity: .5;
}

[type="text"]::-ms-input-placeholder {
    color: #666666;
    opacity: .5;
}

[type="email"]::-ms-input-placeholder {
    color: #666666;
    opacity: .5;
}

[type="text"]::placeholder {
    color: #666666;
    opacity: .5;
}

[type="email"]::placeholder {
    color: #666666;
    opacity: .5;
}


.footer {
    background-image: linear-gradient(90deg, #48535C, #20252b);
    color: white;
    padding: 2rem 0;
}

.footer-text {
    font-size: 1.4rem;
    margin-bottom: 0;
}

.footer a {
    text-decoration: none;
    transition: .4s ease-in-out;
    color: white;
}

.footer a:hover {
    color: white;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .logo-box {
        width: 7rem;
        height: 7rem;
    }

    .logo-box svg{
        width: 48px;
        height: 38px;
    }

    .heading-1 {
        font-size: 3.2rem;
        line-height: var(--line-height-heading);
        font-weight: var(--fw-300);
    }

    .sub-title {
        font-size: 2rem;
    }

    .section {
        padding: 8rem 0;
    }
}

/*******************************************************************************
    Error
*******************************************************************************/
.error__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-color: var(--clr-secondary);
}

.error__title {
    font-size: 12rem;
    font-weight: 600;
    line-height: 1;
}

/*******************************************************************************
    Table
*******************************************************************************/
td, tfoot, th, thead, tr {
    border-color: #333;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
}

/*******************************************************************************
    Modal
*******************************************************************************/

.modal-content {
    border: 0;
    border-radius: 0;
  }

.modal-header {
    padding: 1.4rem 2rem !important;
}

.modal-title {
    font-size: 1.8rem !important;
    text-transform: uppercase !important;
    color: #444;
}

.modal-body {
    padding: 1.4rem 2rem !important;
}

.btn-modal {
    padding: 0.5rem 2rem;
    font-size: var(--fs-base);
    /*text-transform: uppercase;*/
    color: var(--clr-white);
    font-weight: var(--fw-500);
    border: 0px solid transparent;
    transition: .3s ease;
    background-color: var(--clr-primary);
    border-radius: 5px;
}

.btn-modal:hover {
    background-color: var(--clr-primary-dark);
}