@use "../../../../styles/abstracts/variables" as *;
@use "../../../../styles/abstracts/mixins";  

.edu{
    @include mixins.pageBase;
    &{
        height: 100vh;
        width: 100%;
        overflow-x: hidden;
    }

    &__header {
        border: 1px solid $col-content-bg-new;
        background: linear-gradient(to right, rgba(20,19,22, .9), rgba(49,42,20,.9)), url("/assets/images/waves.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 1.5rem;
        border-radius: 6px;
        color: $col-white;
        margin-bottom: 1.4rem;
        @media only screen and (max-width: 1000px) {
            padding: 1.2rem;
            padding-bottom: 1.5rem;
            display: none;
            margin-bottom: 0;
        }

       &--text{
        max-width: 80%;
        @media only screen and (max-width: 1000px) {
            max-width: 100% !important;
        }
        h1{
            font-weight: 500;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 5px;
            // font-family: $font-header;
            @media only screen and (max-width: 1000px) {
                align-items: flex-start;
                font-size: .8rem;
                padding-bottom: 1rem;
                span {
                    display: none;
                }
            }
        }

        p{
            padding-bottom: 1.5rem;
            padding-top: .4rem;
            font-weight: 500;
            opacity: .88;
            font-size: .78rem;
            line-height: 1.6;
        }

        &--btn {
            display: inline;
            background: transparent;
            border: 1px solid #FF8C42;
            color: #FF8C42;
            transition: all 0.2s ease-in-out;
            box-shadow: 0 0 8px rgba(255, 140, 66, 0.3);
            padding: .6rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            font-size: .7rem;
        }
       }
    }

    h4{
        font-weight: 500;
        color: $col-white;
        font-size: .8rem;
        padding-bottom: .2rem;
    }

    &__categories {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 15px;

        &--item {
            display: flex;
            flex: 0 0 120px;
            background: transparent;
            border: 1px solid $col-table-bg;
            padding: .5rem .5rem;
            border-radius: 4px;
            align-items: center;
            font-size: .7rem;
            justify-content: center;
            font-weight: 600;
            color: $col-white;
            cursor: pointer;
        }
    }
}