@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap");

:root {
    --yellow: #f8ef02;
    --cyan: #00ffd2;
    --red: #ff003c;
    --blue: #136377;
    --green: #446d44;
    --purple: purple;
    --black: #000;
    --white: #fff;
    --dark: #333;
    --platinum: #e5e4e2;
    --gold: #ffd700;
    --bronze: #d47d25;
    --silver: #c0c0c0;

    /*theme variables*/
    --dark: #001517;
    --dark-gray: #002b2e;
    --medium-gray: #004044;
    --light-gray: #00565c;
    --yellow: #f2fb06;
    /*theme variables*/

    --linear-gradiant1: #004044;
    --linear-gradiant2: #001517;
}

body {
    background: var(--linear-gradiant1);
}

p {
    margin-bottom: 0.25rem !important;
}

.sponsor-benefit-title {
    line-height: normal;
    text-align: center;
    padding-bottom: 1.5rem;
}

section.sponsor-benefit-section {
    margin-top: 3rem 0 !important;
}

.top-5 {
    padding-top: 5rem;
    background: var(--linear-gradiant1);
}

.sponsor-benefit-section .prize-row {
    width: 95vw;
    place-content: center;
    margin: 1rem auto;
}

.sponsor-benefit-section.rewards {
    background: linear-gradient(var(--linear-gradiant1), var(--linear-gradiant2));
    padding: 2rem 2rem;
}

.rewards .sponsor-benefit-box {
    width: 15rem !important;
    flex-direction: column;
    padding: 1rem !important;
    margin: 1rem;
    min-height: fit-content;
    text-align: center;
    justify-content: space-between;
    box-shadow: inset 3px -4px 20px 3px rgb(0, 0, 0)
}

section.internship,
section.swag {
    padding-top: 2rem;
}

section.internship {
    background: var(--blue) !important;
}

section.swag {
    background: linear-gradient(var(--linear-gradiant2), var(--linear-gradiant1));
}

.sponsor-benefit-box {
    flex-direction: column !important;
}

.internship .sponsor-benefit-box {
    width: 15rem !important;
    flex-direction: column;
    padding: 1rem !important;
    margin: 1rem;
    min-height: fit-content;
    text-align: center;
    justify-content: space-between;
    box-shadow: inset 3px -4px 20px 3px rgb(0, 0, 0)
}

.swag .sponsor-benefit-box {
    width: 15rem !important;
    flex-direction: column;
    padding: 1rem !important;
    margin: 1rem;
    min-height: fit-content;
    text-align: center;
    justify-content: space-between;
    box-shadow: inset 3px -4px 20px 3px rgb(0, 0, 0)
}

.offer .bounty-detail {
    font-size: 0.8rem !important;
}

.sponsor-benefit-box img {
    margin-top: 1rem;
    width: 8rem !important;
    height: 8rem !important;
    transition: all 0.3s ease-in-out;
    filter: drop-shadow(0 0 3px var(--red));
}

.sponsor-benefit-box:hover img {
    filter: drop-shadow(0 0 5px var(--yellow));
    scale: 0.9;
}

.sponsor-name {
    margin-top: 1rem;
}

.offer button {
    width: 10rem;
    font: 1rem;
    margin: 0.5rem;
    text-wrap: nowrap;
}

.offer p {
    font-size: 0.8rem !important;
}

@media screen and (max-width: 768px) {

    h5 {
        font-size: 1.2rem !important;
    }

    .rewards .sponsor-benefit-box {
        min-height: 17rem;
    }

    .internship .sponsor-benefit-box {
        min-height: 14rem;
    }

    .swag .sponsor-benefit-box {
        min-height: fit-content !important;
        flex-direction: column;
    }

    .sponsor-benefit-box img {
        margin-top: 0.5rem;
        width: 6rem !important;
        height: 6rem !important;
    }

    .sponsor-name {
        margin-top: 0.5rem;
    }

    .offer button {
        width: fit-content;
        font-size: 0.6rem !important;
        text-wrap: nowrap;
    }

}

@media screen and (max-width: 576px) {
    .sponsor-benefit-section .prize-row {
        width: 100vw;
        place-content: center;
        margin: 0rem auto;
    }

    .sponsor-benefit-section.rewards {
        background: linear-gradient(var(--linear-gradiant1), var(--linear-gradiant2));
        padding: 2rem 0rem;
    }
}
@media screen and (max-width: 426px) {

    .rewards .sponsor-benefit-box {
        min-height: 18rem;
        width: 12rem !important;
    }

    .swag .sponsor-benefit-box {
        width: 10rem !important;
    }
}

@media screen and (max-width: 376px) {
    .sponsor-benefit-box {
        margin: 0.5rem !important;
    }

    .rewards .sponsor-benefit-box {
        max-height: fit-content !important;
        width: 70vw !important;
    }

    .internship .sponsor-benefit-box {
        height: fit-content !important;
        width: 14rem !important;

    }

    .swag .sponsor-benefit-box {
        min-height: fit-content !important;
        flex-direction: column;
    }

    .offer {
        padding: auto 1rem;
    }

    .offer a button {
        width: fit-content !important;
    }
}