/* CSS VARIABLES */
:root {
    --gray: #f7f8fc;
    --blue: #334dd1;
    --blue-dark: #243aa7;
    --text-color-blue: #152653;
    --green: #1eac53;
    --green-dark: #16833f;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--blue-dark);
    --bs-btn-hover-border-color: var(--blue-dark);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--blue-dark);
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--blue);
    --bs-btn-disabled-border-color: var(--blue);
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--green-dark);
    --bs-btn-hover-border-color: var(--green-dark);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--green-dark);
    --bs-btn-active-border-color: #147238;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--green);
    --bs-btn-disabled-border-color: var(--green);
}

/* GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 100%;
    color: #111;
}
body.bg-home {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 27rem;
}
body.bg-home.visible {
    background-image: url('/etc/img/map-1080.webp');
}
.bg-custom-gray {
    background-color: var(--gray);
}
.fs-3rem  {
    font-size: 3rem;
}
.fs-7 {
    font-size: 0.857rem;
}
.text-color-blue {
    color: var(--text-color-blue);
}
.text-gray {
    color: #ccc;
}

/* HEADER SEARCH */
.header-search {
    background-color: var(--gray);
}

/* SEARCH CONTAINER */
.search-container, .history {
    max-width: 768px;
}
.search-form {
    max-width: 40rem;
}
.search-form input {
    border-radius: 31.25rem;
    height: 70px;
    padding: 10px 80px 10px 30px;
    font-size: 1.5rem;
    border: 1px solid var(--blue);
}
.search-form input:focus {
    outline: none;
    box-shadow: none;
    border-color: black;
    outline: 1px solid black;
}
.search-form button {
    background-color: var(--blue);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    top: 5px;
    right: 5px;
}

/* FEATURES */
.bg-feature {
    background: linear-gradient(#0366fe, #349eff);
    border-radius: 50%;
    height: 80px;
    width: 80px;
}

/* FAQ */
.faq button {
    font-size: 1.125rem;
}
.faq button:focus {
    outline: none;
    box-shadow: none;
}
.faq button:hover, .faq button:active, .faq button:not(.collapsed) {
    background-color: #e9eaf2;
}
.faq button:after {
    background-image: url('/etc/ico/plus.svg');
    background-size: 30px;
    background-position: center center;
}
.faq button:not(.collapsed)::after {
    background-image: url('/etc/ico/plus.svg');
    transform: rotate(45deg);
}

/* FOOTER */
.footer-main {
    background: #e9eaf2;
}

/* TRACKING */
.tracking {
    max-height: 80rem;
}
/*
.image-banner {
    top: 26px;
    left: 10%;
    width: 80%
}
*/
.image-banner {
    top: 26px;
    left: 15%;
    max-width: 1280px;
    width: 80%;
}

/* INTERATION */
.interaction {
    padding: 1.9rem 2rem;
}
.interaction img {
    width: 40px;
}
.interaction.gray {
    background-color: var(--gray);
}

/* MODAL */
.modal input {
    border: 1px solid var(--blue);
    max-width: 350px;
}
.code-verification {
    max-width: 350px;
}
.modal input:focus {
    outline: 1px solid black;
    border: 1px solid black;
    box-shadow: none;
}

/* MEDIA QUERYS */
@media (max-width: 768px) {
    .fs-3rem {
        font-size: 2.5rem;
    }
    .interaction {
        padding: 1rem 0;
    }
    body.bg-home {
        background-repeat: no-repeat;
        background-size: 250%;
        background-position: 43% 32rem;
    }
    .image-banner {
        width: 250%;
        left: -65%;
    }
}