@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=DynaPuff:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato, sans-serif";
}

body {
    background-color: black;
}

.container-pricing-card-page {
    width: 100vw;
    height: 100vh;
    background-color: black;
}

.content-pricing-card-container {
    padding: 0rem 4rem;
    position: relative;
    top: 9%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
}

.pricing-text-top-data {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.cards-all-data-container {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}


.menu-flex-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.text-menu {
    font-weight: 300;
    font-style: Light;
    font-size: 18px;
    color: #CCCCCC;
    position: absolute;
    left: 0;
    z-index: 10;
}

.mid-data-pricing-top {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.get-license-text {
    font-weight: 300;
    font-size: 36px;
    color: #F2F2F2;
}

.flexible-text-licensing {
    font-weight: 100;
    font-size: 22px;
    color: #F2F2F2;
}

.cards-four-all {
    padding: 1rem;
    background: linear-gradient(180deg, #033952 0%, #021F2B 100%);
    border-radius: 6px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.5rem;

}

.top-bar-cards {
    padding: 10px;
    border-bottom: 1px solid #5C93AB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.view-pack-button {
    background-color: #044562;
    padding: 10px;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
    width: max-content;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-data-mid-cards {
    padding: 1.3rem 2rem;
    background-color: #01161F;
    border-radius: 6px;
    display: grid;
    gap: 1rem;
}

.first-title-school {
    font-weight: 300;
    font-size: 33px;
    color: #F2F2F2;
}

.second-card-title-text {
    font-weight: 100;
    font-size: 22px;
    color: #F2F2F2;
}

.licenses-start-text {
    font-weight: 300;
    font-size: 22px;
    color: #FFFFFF;
    text-align: center;
}

.year-of-doller {
    font-weight: 300;
    font-size: 33px;
    color: #F2F2F2;
    text-align: center;

}

.student-add-text {
    font-weight: 100;
    font-size: 18px;
    line-height: 23px;
    color: #ABABAB;
    text-align: center;
}


@media(max-width:1280px) {


    .second-card-title-text {
        font-size: 18px;
    }


    .first-title-school {
        font-size: 27px;
    }

    .year-of-doller {
        font-size: 27px;
    }

    .content-pricing-card-container {
        padding: 0rem 2rem;
    }


    .pricing-data-mid-cards {
        padding: 1.3rem 1rem;
    }

}

@media(max-width:1180px) {


    .container-pricing-card-page {
        height: min-content;
    }

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 10%;
    }


    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .cards-all-data-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:1104px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 9%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }




    .cards-all-data-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(Max-width:1024px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 9%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:991px) {


    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 10%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }


    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:768px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 11%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }

    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:650px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }


    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:600px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:550px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }


    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:480px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:450px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:400px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:390px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }

    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }

    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }
}

@media(max-width:375px) {

    .pricing-text-top-data {
        display: flex;
        flex-direction: column;
        margin-top: 13%;
    }


    .text-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .get-license-text {
        font-size: 25px;
    }


    .flexible-text-licensing {
        font-size: 18px;
        text-align: center;
    }




    .container-pricing-card-page {
        height: max-content;
    }

    .cards-all-data-container {
        grid-template-columns: 1fr;
    }

    .content-pricing-card-container {
        padding: 0rem 0rem;
    }

}