* {
    box-sizing: border-box;
}

::selection {
    background-color: #11A7D1;
    color: white;
}

::-moz-selection {
    background-color: #11A7D1;
    color: white;
}

html {
    scroll-behavior: smooth;
}

body {
    height: 100%;
    margin: 0;
    font-family: "Roboto", sans-serif;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

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

.grecaptcha-badge {
    display: none !important;
}

.NavBar {
    position: fixed;
    top: 0em;
    left: 0em;
    height: 4em;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    opacity: 0.95;
    overflow: hidden;
    z-index: 999;
}

.Logo {
    height: 5em;
    margin-left: 12%;
}

.Text1 {
    color: #11A7D1;
}

.Options {
    display: flex;
    flex-direction: row;
    gap: 3em;
    width: 53%;
    font-size: 1.2em;
    margin-left: 22%;
    margin-top: 1%;
}

.Content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow-x: hidden;
}

.FirstRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 45em;
    width: 100%;
    background: #12273CFF;
    color: white;
}

.Apply-Button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
}

.Apply-Button a {
    position: relative;
    top: 4em;
    border-radius: 0.5em;
    left: -7.01em;
    display: inline-block;
    border: 2px solid white;
    height: 2em;
    width: 7em;
    font-size: 0.4em;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 0.125em;
    color: white;
    -webkit-box-reflect: below -2px linear-gradient(transparent, #0005);
    transition: 0.5s;
    transition-delay: 0;
    text-align: center;
    line-height: 1.8em;
}

.Apply-Button a span {
    position: relative;
    z-index: 2;
}

.Apply-Button a:hover {
    border-radius: 0;
    border: 2px solid #11A7D1;
    box-shadow: 0 0 1em #11A7D1,
        0 0 2em #11A7D1;
}

.Apply-Button a::before {
    content: '';
    position: absolute;
    left: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 0.125rem;
    background: white;
    box-shadow: 0.3125rem -0.5rem 0 white,
        0.3125rem 0.5rem 0 white;
    transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
}

.Apply-Button a:hover::before {
    height: 100%;
    width: 60%;
    left: -0.125rem;
    background: #11A7D1;
    box-shadow: 0.3125rem 0 0 #11A7D1,
        0.3125rem 0 0 #11A7D1;
}

.Apply-Button a::after {
    content: '';
    position: absolute;
    right: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 0.125rem;
    background: white;
    box-shadow: -0.3125rem -0.5rem 0 white,
        -0.3125rem 0.5rem 0 white;
    transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
}

.Apply-Button a:hover::after {
    height: 100%;
    width: 60%;
    right: -0.125rem;
    background: #11A7D1;
    box-shadow: -0.3125rem 0 0 #11A7D1,
        -0.3125rem 0 0 #11A7D1;
}

@media only screen and (min-width: 319px) and (max-width: 1000px) {
    .NavBar {
        height: 8%;
    }

    .Logo {
        position: fixed;
        left: 0;
        height: 10%;
        margin-left: 0%;
    }

    .Options {
        gap: 5%;
        width: 100%;
        font-size: 60%;
        margin-left: 18%;
        padding-bottom: 2%;
    }

    .FirstRow {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 70em;
        width: 100%;
    }
}

@media only screen and (min-width: 319px) and (max-width: 799px) {
    .Apply-Button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        cursor: pointer;
    }

    .Apply-Button a {
        position: relative;
        top: 1.4em;
        border-radius: 0.3em;
        left: 0em;
        display: inline-block;
        border: 2px solid white;
        height: 2em;
        width: 7em;
        font-size: 0.4em;
        font-weight: 400;
        text-decoration: none;
        letter-spacing: 0.125em;
        color: white;
        -webkit-box-reflect: below -2px linear-gradient(transparent, #0005);
        transition: 0.5s;
        transition-delay: 0;
        text-align: center;
        line-height: 1.8em;
    }
}

@media only screen and (min-width: 600px) and (max-width: 799px) {
    .Apply-Button a {
        position: relative;
        top: 0.7em;
    }
}

@media only screen and (min-width: 360px) and (max-width: 1000px) {
    .NavBar {
        height: 8%;
    }

    .Logo {
        position: fixed;
        left: 0;
        height: 10%;
        margin-left: 0%;
    }

    .Options {
        gap: 5%;
        width: 100%;
        font-size: 65%;
        margin-left: 20%;
        padding-bottom: 2%;
    }
}

@media only screen and (min-width: 800px) {
    .FirstRow {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 45em;
        width: 100%;
    }

    .NavBar {
        height: 5%;
    }
}

@media only screen and (min-width: 390px) and (max-width: 800px) {
    .Options {
        margin-left: 22%;
        font-size: 70%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 1000px) {
    .Logo {
        margin-left: 4%;
    }

    .Options {
        margin-left: 24%;
        font-size: 75%;
    }
}

@media only screen and (min-width: 520px) and (max-width: 1000px) {
    .Logo {
        margin-left: 6%;
    }

    .Options {
        margin-left: 26%;
        font-size: 80%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
    .Options {
        margin-left: 28%;
        font-size: 90%;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1000px) {
    .Logo {
        margin-left: 6%;
    }

    .Options {
        margin-left: 30%;
        font-size: 95%;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1000px) {
    .Logo {
        margin-left: 1%;
    }
}

@media only screen and (min-width: 800px) and (max-width: 900px) {
    .Options {
        margin-left: 47%;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1000px) {
    .Options {
        margin-left: 52%;
    }

    .Logo {
        margin-left: 3%;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1060px) {
    .Options {
        margin-left: 55%;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1600px) {
    * {
        box-sizing: border-box;
    }

    body {
        height: 100%;
        margin: 0;
        font-family: "Roboto", sans-serif;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

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

    .NavBar {
        position: fixed;
        top: 0em;
        left: 0em;
        height: 4em;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: white;
        overflow: hidden;
        z-index: 999;
    }

    .Logo {
        height: 5em;
        margin-left: 12%;
    }

    .Options {
        display: flex;
        flex-direction: row;
        gap: 3em;
        width: 53%;
        font-size: 1.2em;
        margin-left: 22%;
    }

    .Content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        overflow-x: hidden;
    }

    .FirstRow {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 45em;
        width: 100%;
        background: #12273CFF;
        color: white;
    }

    .Apply-Button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        cursor: pointer;
    }

    .Apply-Button a {
        position: relative;
        top: 4em;
        border-radius: 0.5em;
        left: -7.01em;
        display: inline-block;
        border: 2px solid white;
        height: 2em;
        width: 7em;
        font-size: 0.4em;
        font-weight: 400;
        text-decoration: none;
        letter-spacing: 0.125em;
        color: white;
        -webkit-box-reflect: below -2px linear-gradient(transparent, #0005);
        transition: 0.5s;
        transition-delay: 0;
        text-align: center;
        line-height: 1.8em;
    }

    .Apply-Button a span {
        position: relative;
        z-index: 2;
    }

    .Apply-Button a:hover {
        border-radius: 0;
        border: 2px solid #11A7D1;
        box-shadow: 0 0 1em #11A7D1,
            0 0 2em #11A7D1;
    }

    .Apply-Button a::before {
        content: '';
        position: absolute;
        left: -1.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 0.125rem;
        background: white;
        box-shadow: 0.3125rem -0.5rem 0 white,
            0.3125rem 0.5rem 0 white;
        transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
    }

    .Apply-Button a:hover::before {
        height: 100%;
        width: 60%;
        left: -0.125rem;
        background: #11A7D1;
        box-shadow: 0.3125rem 0 0 #11A7D1,
            0.3125rem 0 0 #11A7D1;
    }

    .Apply-Button a::after {
        content: '';
        position: absolute;
        right: -1.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 0.125rem;
        background: white;
        box-shadow: -0.3125rem -0.5rem 0 white,
            -0.3125rem 0.5rem 0 white;
        transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
    }

    .Apply-Button a:hover::after {
        height: 100%;
        width: 60%;
        right: -0.125rem;
        background: #11A7D1;
        box-shadow: -0.3125rem 0 0 #11A7D1,
            -0.3125rem 0 0 #11A7D1;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    .Logo {
        margin-left: 4%;
    }

    .Options {
        margin-top: 0%;
        font-size: 1.2em;
        display: flex;
        flex-direction: row;
        gap: 3em;
        width: 100%;
        margin-left: 26%;
    }
}

@media only screen and (min-width: 1080px) and (max-width: 1200px) {
    .Logo {
        margin-left: 4%;
    }

    .Options {
        margin-top: 0%;
        font-size: 1.2em;
        display: flex;
        flex-direction: row;
        gap: 3em;
        width: 100%;
        margin-left: 28%;
    }
}

@media only screen and (min-width: 1120px) {
    .Options {
        margin-left: 29%;
    }
}

@media only screen and (min-width: 1200px) {
    .Options {
        margin-top: 0;
        margin-left: 7%;
    }

    .Logo {
        margin-left: 7%;
    }
}

@media only screen and (min-width: 1290px) {
    .Options {
        margin-top: 0;
        margin-left: 12%;
    }

    .Logo {
        margin-left: 7%;
    }
}

@media only screen and (min-width: 1400px) {
    .Options {
        margin-top: 0;
        margin-left: 12%;
    }

    .Logo {
        margin-left: 9%;
    }
}

@media only screen and (min-width: 1500px) {
    .Options {
        margin-top: 0;
        margin-left: 12%;
    }
}

@media only screen and (min-width: 1600px) {
    .Options {
        margin-top: 0;
        margin-left: 16%;
    }

    .Logo {
        margin-left: 11%;
    }
}

@media only screen and (min-width: 1700px) {
    .Logo {
        margin-left: 11%;
    }
}

@media only screen and (min-width: 1740px) {
    .Options {
        margin-left: 18%;
    }

}

@media only screen and (min-width: 1800px) {
    .Options {
        margin-left: 19%;
    }
}

@media only screen and (min-width: 1900px) {
    .Options {
        margin-left: 32%;
    }

    .Logo {
        margin-left: 14.2%;
    }
}

@media only screen and (min-width: 2000px) {
    .Options {
        margin-left: 38%;
    }
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src:
        url("https://ka-f.fontawesome.com/releases/v6.4.2/webfonts/free-fa-solid-900.woff2") format("woff2"),
        url("https://ka-f.fontawesome.com/releases/v6.4.2/webfonts/free-fa-solid-900.woff") format("woff");
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("https://ka-f.fontawesome.com/releases/v6.4.2/webfonts/free-fa-regular-400.woff2") format("woff2"),
        url("https://ka-f.fontawesome.com/releases/v6.4.2/webfonts/free-fa-regular-400.woff") format("woff");
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("https://ka-f.fontawesome.com/releases/v6.4.2/webfonts/free-fa-brands-400.woff2") format("woff2"),
        url("https://ka-f.fontawesome.com/releases/v6.4.2/webfonts/free-fa-brands-400.woff") format("woff");
}