/************************* Type buttons ******************************/
     .type__button {
        color: var(--color-danger);
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.8rem;
        text-align: center;
        margin-bottom:1rem;
    }
    .type__button:hover{
        color:var(--color-white)
    }
    /************************* Tag buttons ******************************/
    .tag__buttons {
        padding: 4rem 0;
        border-top: 2px solid var(--color-bg2);
        border-bottom: 2px solid var(--color-bg2);
        margin-bottom:4rem
    }

    .tag__buttons > p {
        justify-content:center;
        align-items:center;
        text-align: center;
        margin-bottom:5rem;
    }
    .tag__buttons-container {
        width: fit-content;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 1rem;
    }


    .tag__button {
        background: var(--color-bg2);
        color: var(--color-white);
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.8rem;
        text-align: center;
        margin-bottom:1rem;
    }

    .tag__button:hover {
        color: var(--color-primary);
    }

    .btn__tag {
        display: inline-block;
        width: fit-content;
        padding: 0.6rem 1.2rem;
        background-color: var(--color-primary);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: var(--transition);
        color: var(--color-white);
    }

    
    .btn__tag.sm {
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
    }

    .btn__tag.danger {
        background: var(--color-red);
    }

    .btn__tag:hover {
        background: var(--color-white);
        color: var(--color-bg);
    }

    .tag__title {
        height: 15rem;
        margin-top: 4.5rem;
        background: var(--color-primary);
        display: grid;
        place-items: center;
    }

    .team{
        box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
    }
    
    .slider-btn{
        margin-bottom:2rem;
    }

 


    /* ============================================================================== SEARCH ================================================================================== */
    /* ============================================================================== SEARCH ================================================================================== */
    .search__bar {
        margin: 5rem 10rem 0 10rem;
        padding-bottom: 0;
    }

    

    .search__bar-container {
        position: relative;
        width: 40rem;
        background: var(--color-bg2);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        padding: 0.6rem 1rem;
        border-radius: 0.5rem;
        color: var(--color-light);
    }

    .search__bar-container > div {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .search__bar input {
        background: transparent;
        margin-left: 0.7rem;
        padding: 0.5rem 0;
        width: 100%;
    }

    .search__bar input::placeholder {
        color: var(--color-light);
    }
    /* ============================================================================== MEDIA QUERIES (MEDIUM DEVICES) ================================================================================== */
@media screen and (max-width: 1024px) {
        /* ================= GENERAL =============== */
       
        .tag__buttons-container {
        grid-template-columns: repeat(4, 1fr);
        margin:0 2rem;
        }

    .search__bar-container {
       
        margin: 0 2rem 0 0; 
    }
    
    
   

     /* ============ POPULAR COURSES ============= */

    .courses{
        margin-top: 6rem;
    }
    .courses__container{
        grid-template-columns: 1fr 1fr;
        
    }
    }

@media screen and (max-width: 600px) {
    
        .container{
        width: var(--container-whidth-sm);
        }
    
        .tag__buttons-container {
       
        grid-template-columns: repeat(2, 1fr);
    }

    .search__bar {
        margin: 0 3rem 0 2rem;
    }

 .search__bar-container {
       
        width:22rem; 
    }

  /* ============ POPULAR COURSES ============= */

    
    .courses__container{
        grid-template-columns: 1fr ;
        margin: 0 0.8rem;
    }

    }