/* ---GLOBAL STYLES--- */

* {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
    word-break: break-word;
    scroll-behavior: smooth;
}

:root {
    --dark-blue: #1e3d8f;
    --light-blue: #367BCA;
    --cream-blue: #D7E5F4;
    --yellow: #ffd230;
}

body {
    background: var(--cream-blue);
}

body.noscroll {
    overflow: hidden;
}

img,
svg {
    width: 100%;
    max-width: 100%;
}

a {
    cursor: pointer;
    width: fit-content;
    display: inline-block;
    text-decoration: none;
    transition: .25s;
}

button {
    cursor: pointer;
    transition: .25s;
}

h1,
h2,
h3 {
    font-family: "Unbounded", sans-serif;
    color: var(--dark-blue);
    font-size: 3vw;
    text-wrap: balance;
}

p,
li {
    color: var(--dark-blue);
    font-size: 1vw;
    font-weight: 400;
    text-wrap: balance;
}

ul {
    color: var(--dark-blue);
    list-style-position: inside;
}

input {
    color: var(--dark-blue);
    font-size: 1vw;
    padding: .5vw;
    border: none;
    border-radius: .25vw;
    background: #A7C5E7;
}

textarea {
    resize: none;
    min-height: 5vw;
    color: var(--dark-blue);
    font-size: 1vw;
    padding: .5vw;
    border: none;
    border-radius: .25vw;
    background: #A7C5E7;
}

select {
    color: var(--dark-blue);
    font-size: 1vw;
    padding: .5vw;
    border: none;
    border-radius: .25vw;
    background: #A7C5E7;
}

label {
    color: var(--dark-blue);
    font-size: 1vw;
}

::placeholder {
    color: #627DAA;
}

.info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.checkbox_box {
    cursor: pointer;
}

.buttons_box {
    display: flex;
    align-items: center;
    gap: 2vw;
}

.main_btn {
    font-family: "Unbounded", sans-serif;
    color: white;
    font-size: 1.5vw;
    padding: .5vw 1.5vw;
    border: none;
    border-radius: .25vw;
    background: var(--light-blue);
}

.main_btn:hover {
    color: var(--dark-blue);
    background: var(--yellow);
}

.second_btn {
    font-family: "Unbounded", sans-serif;
    position: relative;
    color: white;
    font-size: 1.5vw;
}

.second_btn:before {
    content: "";
    position: absolute;
    bottom: -.25vw;
    left: 0;
    width: 0;
    height: .15vw;
    background: white;
    transition: .25s;
}

.second_btn:hover::before {
    width: 100%;
}

.message_box {
    position: relative;
    width: 100%;
    height: 1vw;
}

.message_box p {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: .9vw;
}

.message_box .success {
    color: #0bb300;
}

.message_box .error {
    color: #f31212;
}

@media (max-width: 996px) {
    h1,
    h2 {
        font-size: 6.5vw;
    }
    p,
    li {
        font-size: 4vw;
    }
    input {
        font-size: 4vw;
        padding: 3.5vw;
        border-radius: .5vw;
    }
    textarea {
        min-height: 25vw;
        font-size: 4vw;
        padding: 4vw;
        border-radius: .5vw;
    }
    select {
        font-size: 4vw;
        padding: 4vw;
        border-radius: .5vw;
    }
    label {
        font-size: 4vw;
    }
    .info_box {
        gap: 5vw;
    }
    .buttons_box {
        gap: 10vw;
    }
    .main_btn {
        font-size: 5vw;
        padding: 2vw 4vw;
        border-radius: .5vw;
    }
    .second_btn {
        font-size: 5vw;
    }
    .second_btn:before {
        bottom: -1vw;
        height: .5vw;
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ---HEADER STYLES--- */

header {
    position: relative;
    z-index: 99;
}

header .desk_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 10vw;
    background: var(--dark-blue);
}

header .desk_box .logo_box {
    width: 20%;
}

header .desk_box .nav_box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2vw
}

header .desk_box .nav_box span,
header .desk_box .nav_box a {
    font-family: "Unbounded", sans-serif;
    color: white;
    font-size: 1vw;
}

header .desk_box .menu_box {
    position: relative;
    display: flex;
    align-items: center;
}

header .desk_box .dropdown_box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18vw;
    display: flex;
    flex-direction: column;
    border-radius: .25vw;
    transform: translateY(100%);
    background: var(--light-blue);
    backdrop-filter: blur(5vw);
    -webkit-backdrop-filter: blur(5vw);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
}

header .desk_box .menu_box:hover .dropdown_box {
    pointer-events: inherit;
    opacity: 1;
}

header .desk_box .menu_box span {
    display: flex;
    align-items: center;
    gap: .5vw;
}

header .desk_box .menu_box span i {
    color: white;
    font-size: 1.25vw;
}

header .desk_box .menu_box a {
    width: 100%;
    padding: 1vw;
}

header .desk_box .menu_box a:hover {
    color: var(--dark-blue);
    background: var(--yellow);
}

header .desk_box .networks_box {
    display: flex;
    align-items: center;
    gap: 1vw;
}

header .desk_box .networks_box a {
    color: white;
    font-size: 1.5vw;
}

header .desk_box .networks_box a:hover {
    color: var(--yellow);
}

header .mobile_box {
    display: none;
}

@media (max-width: 996px) {
    header .desk_box {
        display: none;
    }
    header .mobile_box {
        display: flex;
        flex-direction: column;
        gap: 3vw;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0;
    }
    header .mobile_box .header_box {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100vw;
        padding: 5vw 10vw;
        border-radius: 0 0 1vw 1vw;
        background: #1d356daa;
        backdrop-filter: blur(3vw);
        -webkit-backdrop-filter: blur(3vw);
        z-index: 1;
    }
    header .mobile_box .logo_item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .mobile_box .toggle_box {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        z-index: 1;
    }
    header .mobile_box .bar_item {
        width: 10vw;
        height: .5vw;
        background: white;
        transition: .25s;
    }
    header .mobile_box.active .bar_item:nth-child(1) {
        transform: rotate(45deg) translate(2vw, 1.5vw);
    }
    header .mobile_box.active .bar_item:nth-child(2) {
        opacity: 0;
    }
    header .mobile_box.active .bar_item:nth-child(3) {
        transform: rotate(-45deg) translate(2vw, -1.5vw);
    }
    header .mobile_box .nav_box {
        max-height: 0;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10vw;
        padding: 5vw;
        border-radius: 1vw;
        background: #1d356daa;
        backdrop-filter: blur(3vw);
        -webkit-backdrop-filter: blur(3vw);
        transition: .25s;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }
    header .mobile_box.active .nav_box {
        width: 90vw;
        max-height: 100vh;
        opacity: 1;
        pointer-events: inherit;
        margin: auto;
    }
    header .mobile_box .nav_item {
        display: flex;
        flex-direction: column;
        gap: 5vw;
    }
    header .mobile_box .nav_item a,
    header .mobile_box .nav_item span {
        font-family: "Unbounded", sans-serif;
        color: white;
        font-size: 5vw;
    }
    header .mobile_box .nav_item .active,
    header .mobile_box .nav_item a:hover {
        color: var(--yellow);
    }
    header .mobile_box .menu_box {
        display: flex;
        flex-direction: column;
        pointer-events: none;
    }
    header .mobile_box.active .menu_box {
        pointer-events: inherit;
    }
    header .mobile_box .menu_box p {
        display: flex;
        align-items: flex-end;
        gap: 1.5vw;
    }
    header .mobile_box .dropdown_box {
        display: flex;
        flex-direction: column;
        gap: 5vw;
        padding: 5vw 0 0 0;
        max-height: 100vw;
    }
    header .mobile_box li a {
        font-size: 4.5vw !important;
    }
    header .mobile_box li::marker {
        color: var(--light-blue);
    }
    header .mobile_box .bar_box {
        display: flex;
        flex-direction: column;
        gap: 10vw;
    }
    header .mobile_box .bar_box a {
        color: white;
    }
    header .mobile_box .networks_box {
        display: flex;
        gap: 10vw;
    }
    header .mobile_box .networks_box i {
        font-size: 8vw;
    }
    header .mobile_box .language_box a,
    header .mobile_box .language_box span {
        color: white;
        font-size: 3.5vw;
    }
    header .mobile_box .language_box a.active,
    header .mobile_box .language_box a:hover {
        color: var(--yellow);
    }
    header .mobile_box .language_box span {
        pointer-events: none;
    }
    header .mobile_box .backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #00000050;
        backdrop-filter: blur(10vw);
        -webkit-backdrop-filter: blur(10vw);
        transition: .25s;
        opacity: 0;
        pointer-events: none;
    }
    header .mobile_box.active .backdrop {
        opacity: 1;
        pointer-events: inherit;
    }
}


/* ---FOOTER STYLES--- */

footer {
    background: var(--dark-blue);
}

footer .footer_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    padding: 5vw 10vw 2vw 10vw;
}

footer .footer_box p,
footer .footer_box a {
    color: white;
    font-size: 1vw;
    text-align: center;
}

footer .info_box a:hover {
    color: var(--yellow);
}

footer .main_btn {
    font-size: 1.5vw !important;
}

footer .main_btn:hover {
    color: var(--dark-blue);
}

footer .logo_box {
    width: 20%;
}

footer .networks_box {
    display: flex;
    align-items: center;
    gap: 1vw;
}

footer .networks_box a {
    color: white;
    font-size: 1.5vw;
}

footer .networks_box a:hover {
    color: var(--yellow);
}

footer .footer_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw;
}

footer .footer_bar a {
    color: white;
    font-size: .8vw;
    text-align: center;
}

footer .footer_bar a:hover {
    color: var(--yellow);
}

@media (max-width: 996px) {
    footer {
        background: var(--dark-blue);
    }
    footer .footer_box {
        gap: 10vw;
        padding: 10vw 10vw 5vw 10vw;
    }
    footer .footer_box p,
    footer .footer_box a {
        font-size: 3.5vw;
    }
    footer .logo_box {
        width: 70%;
    }
    footer .networks_box {
        display: flex;
        gap: 10vw;
    }
    footer .networks_box i {
        font-size: 10vw;
    }
    footer .main_btn {
        font-size: 5vw !important;
    }
    footer .footer_bar {
        padding: 5vw;
    }
    footer .footer_bar a {
        font-size: 2.5vw;
    }
}