v-cloak {
    display: none;
}

:root {
    --accent: 1, 107, 73;
    --accent-gradient: linear-gradient(95deg, rgb(var(--accent)), rgb(255, 217, 0) 20%, rgb(4, 158, 37) 90%)
}

.geist {
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.crimson-pro {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
}


a {
    text-decoration: none
}

h2 {
    font-size: 2em;
}


.bg {
    background-color: red;
}

.bg-rules {
    background: #6a1809;
    background: linear-gradient(90deg, rgb(106 24 9) 0%, rgb(18 12 21) 100%);
}

.span-highlight {
    background: linear-gradient(to right, #c87516, rgb(6, 37, 6) 80%);
    background-position: 0 100%;
    background-size: 100% 32px;
    padding: 4px;
    color: #fff;
    background-repeat: repeat-x;
    cursor: pointer;
    border-radius: 10px;
}

.container-fluid {
    max-width: 1500px;
}

.navbar {
    background-color: #6a1809;
    padding: 0;
    border-bottom: solid 3px #c4922f;
}

.navbar-nav {
    margin-left: 40px
}

.navbar-brand {
    font-weight: 700;
    font-size: 2.5em;
    padding: 10px;
}

    .navbar-brand img {
        width: 120px;
    }

.nav-item a {
    font-size: 1.25em;
    margin: 0 8px
}


.fixed-top li a.nav-link {
    color: #ffffff !important;
    font-weight: 700;
}

    .fixed-top li a.nav-link:hover {
        color: #cd9933 !important;
        font-weight: 700;
    }

.logo {
    max-width: 180px;
}

main {
    margin-top: 60px;
}

.top-logos img {
    height: 35px;
}

.kj {
    /* background-image: radial-gradient(circle farthest-corner at 10% 20%, #ffd143 0%, #ff9153 90%); */

    border: solid 1px #dedede;
    border-radius: 5px;
}

.bg {
    background-color: #6a1809;
}

.hero-home {
}

    .hero-home h1 {
        font-size: 3em;
        font-weight: 900;
    }


h2 {
    font-size: 2.25em;
    font-weight: 800;
}

.categories {
    background-color: #002741;
}

.category-wrap, .mini-container {
    max-width: 1024px;
}

    .category-wrap .category {
        width: 48%;
        margin: 25px 0 5px;
    }

.category {
    padding: 25px;
    background: #350B04;
    background: linear-gradient(90deg, rgb(134, 27, 8) 0%, rgba(117, 47, 29, 1) 50%, rgb(80 36 1 / 96%) 100%);
    color: #fff !important
}

    .category span {
        text-transform: uppercase;
        font-size: 0.65em;
        background-color: #bb7204;
        padding: 4px 10px;
        border-radius: 5px;
    }

    .category h3 {
        font-weight: 800;
        font-size: 1.35em;
        margin-top: 10px;
    }

.categories p {
    font-size: 0.85em;
}

.eligibility {
    max-width: 1024px;
}

.highlight-list li {
    font-size: 1.25em;
    font-weight: 600;
    color: #ffffff;
    padding: 7px 0;
}

.eligibility h3 {
    font-weight: 700;
    color: #e9e7e7;
}

.highlight-list i {
    color: #ffcb0d;
}

.gradient-text {
    background: #6a1809;
    background: linear-gradient(to right, #6a1809 0%, #b01300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.deadline-wrap {
    border: solid 2px #fcf6ea;
    border-radius: 15px;
    padding: 45px 25px 10px;
    margin: 10px 0;
}

    .deadline-wrap h2 {
        font-size: 1.65em;
    }

.deadline {
    background-color: #ab5b2b;
    color: #fff;
    padding: 45px 0;
    font-size: 1.25em;
}

.deadline-info {
    margin: 10px;
    border-radius: 10px;
}

.deadline .alert {
    background-color: #ce3703;
    color: #fff;
    font-weight: 600;
    border: none;
}


/* Ensure Bootstrap menu button text is white */
.navbar-toggler,
.navbar-toggler-icon,
.navbar-toggler:focus,
.navbar-toggler:active {
    color: #fff !important;
    border-color: #fff !important;
    padding: 5px;
    font-size: 2em;
}

.navbar-toggler-icon {
    background-image: none;
}

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-toggler-icon span {
        background-color: #fff !important;
        padding: 15px;
    }

@media only screen and (max-width: 768px) {
    .navbar-brand img {
        max-height: 60px;
        object-fit: contain;
    }

    main {
        margin-top: 80px;
    }

    .categories {
        padding: 10px !important;
    }

    h2 {
        font-size: 1.5em;
    }

    .category-wrap .category {
        width: 100%;
        margin: 10px;
    }

    .highlight-list li {
        font-size: 1em;
    }

    .eligibility-wrap {
        padding: 0
    }

    .eligibility {
        border-radius: 0 !important;
    }

    #rules {
        border-radius: 0 !important;
    }

    .rules-wrap {
        padding: 0 !important;
        margin-top: -50px !important;
    }
}
