/* As all the required coding for the Services section are done under previous popular courses section
we dont't neeed to write it again here seperately*/
/* ============================ COURSES INTRO ============================ */

.courses {
    margin-top: 0rem;
    padding: 0;
}

.courses img {
    opacity: 35%;
}

.courses-word  {
    display: grid;
    position: relative;
    width: 100%;
}

.courses-word h1 {
    top: 4rem;
    margin-left: 10%;
    margin-right: 10%;
    position: absolute;
    padding-top: 5%;
}

.courses-word p {
    top: 7rem;
    padding-top: 5%;
    position: absolute;
    margin-left: 10%;
    margin-right: 40%;
}

.courses-word h4 {
    top: 17rem;
    margin-left: 10%;
    margin-right: 10%;
    position: absolute;
    padding-top: 5%;
}

.courses-word ul {
    margin: 24rem 12% 1rem 12%;
    position: absolute;
}

.courses-word li {
    list-style: circle;
}

.services_list h4 {
    top: 30rem;
    margin-left: 10%;
    margin-right: 10%;
    position: absolute;
    padding-top: 5%;
}

.services_list ul {
    top: 37rem;
    margin: 0 12% 1rem 12%;
    position: absolute;
}

.services__container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-left: 9rem;
    margin-right: 8rem;
    
}

/* ============================ COURSE STRUCTURE ============================ */

.services {
    margin-top: 0;
    padding-top: 3rem;
    
}

/* ============================ MEDIA QUESRIES(TABLETS) ============================*/

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

    /* ============================= COURSE INTRO ================================ */

    .courses {
        height: 90vh;
    }

    .courses-word h4 {
        top: 20rem;
    }

    .courses-word ul {
        top: 2rem;
    }

    .services_list h4 {
        top: 33rem;
    }

    .services_list ul {
        top: 38rem;
    }

    /* ============================ COURSE STRUCTURE ============================ */

    .services {
        margin-top: 0;
        padding-top: 2rem;
    }

    .services__container {
        grid-template-columns: repeat(2,1fr);
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

/* ============================ MEDIA QUESRIES(PHONES) ============================*/

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

    .courses {
        height: 125vh;
    }

    .courses-word h1 {
        top: 5rem;
    }

    .courses-word p {
        top: 12.5rem;
    }

    .courses-word h4 {
        top: 37rem;
    }

    .courses-word ul {
        top: 17.5rem;
    }

    .services_list h4 {
        top: 52rem;
    }

    .services_list ul {
        top: 55rem;
    }

    /* ============================ COURSE STRUCTURE ============================ */

    .services {
        margin-top: 0;
        padding-top: 4rem;
    }

    .services__container {
        grid-template-columns: 1fr;
        margin-left: 1rem;
        margin-right: 1rem;
    }

}