* {
    padding: 0;
    margin: 0;
}

.container {
    position: relative;
}

@media(max-width:600px) {
    .menu1 {
        display: none !important;
    }

    #list {
        font-size: 30px !important;
        margin-left: 100px !important;
    }

    .category {
        padding: 10px;
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .demos {

        display: flex;
        flex-direction: column;
    }

    .demos button:hover {

        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .pages {
        display: flex;
        flex-direction: column;
    }

    .pages button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .accounts {
        display: flex;
        flex-direction: column;
    }

    .accounts button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .megamenus {
        display: flex;
        flex-direction: column;
    }

    .megamenus button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .profiles {
        width: 60%;
        margin-right: 100px;
        background-color: antiquewhite;
    }

    #pattern {
        position: absolute;
        top: 60px;
        left: -648px;
    }

    #A {
        position: absolute;
        top: 500px !important;
        left: 340px !important;
        border-radius: 10px;
    }
    .edits{
        font-size: 20px !important;
    }
    .bi-tv{
        font-size: 50px !important;
    }
    .bi-facebook{
        font-size: 50px !important;    
    }
    .Certified-Courses .bi-patch-check-fill{
        font-size: 50px !important;  
    }
    .instructor{
        background-image: linear-gradient(rgb(106, 209, 220),rgb(86, 138, 144),rgb(155, 220, 233));
        height: 220px !important;
    }
}

@media(max-width:800px) {
    .menu1 {
        display: none !important;
    }

    #list {
        font-size: 30px !important;
        margin-left: 250px;
    }

    .demos {
        display: flex;
        flex-direction: column;
    }

    .demos button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .pages {
        display: flex;
        flex-direction: column;
    }

    .pages button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .accounts {
        display: flex;
        flex-direction: column;
    }

    .accounts button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .megamenus {
        display: flex;
        flex-direction: column;
    }

    .megamenus button:hover {
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .profiles {
        position: absolute;
        right: -100px !important;
        top: 60px !important;
        background-color: rgb(238, 236, 235);
    }

    #circle {
        position: absolute;
        left: -70px;
    }

    #star {
        position: absolute;
        top: 40px;
        left: 250px;
    }

    #pattern {
        position: absolute;
        top: 60px;
        left: -248px;
    }

    #A {
        position: absolute;
        top: 444px;
        left: 520px;

    }
    .instructor{
        background-image: linear-gradient(rgb(106, 209, 220),rgb(86, 138, 144),rgb(155, 220, 233));
        height: 220px !important;
    }

}

@media(min-width:800px) {

    #list {
        display: none;
    }

    #lists {
        display: none !important;
    }

    .category {
        padding: 10px;
        background-color: rgb(200, 220, 243);
        border-radius: 10px;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .section-header {
        position: relative;
        margin-top: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #circle {
        position: absolute;
        top: -130px;
        left: -50px;
    }

    #star {
        position: absolute;
        top: -20px;
        left: 250px;
    }

    #pattern {
        position: absolute;
        top: 60px;
        left: -148px;
    }

    #A {
        margin-left: 430px;
    }
    .start-Teaching{
        margin-top: 80px;
    }
}

.container {
    width: 100%;
    height: 100vh;
}

#Eduport-logo {
    padding-right: 130px;
}

.navbar-head {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#navbar-profile {
    border: 1px solid rgb(90, 84, 84);
    border-radius: 50%
}

.profiles {
    position: absolute;
    right: 0px;
    top: 50px;
    background-color: rgb(251, 251, 250);
    border-radius: 10px;
}

.profile-border {
    border-bottom: 1px solid rgb(158, 156, 156);
}

.signout-boder {
    border-bottom: 1px solid rgb(158, 156, 156);
}

.section-header-title {
    font-size: 300%;
    font-weight: 700;
    font-family: arial;
}

.online-learning {
    margin-top: 40px;
}

.bi-patch-check-fill {
    margin-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    font-family: arial;
}

#getstarted {
    background-color: rgb(235, 220, 220);
    color: red;
    font-family: arial;
    padding: 10px 40px;
}

.section-pic {
    margin-top: 5vw;
    height: 500px;
    width: 500px;
    background-image: url(https://static.brusheezy.com/system/resources/previews/000/053/955/original/blue-abstract-circle-background-psd-photoshop-backgrounds.jpg);
    border-radius: 50%;
    border-start-start-radius: 10%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.mxplayer {
    box-shadow: 2px 2px 5px 5px rgb(195, 201, 244), -2px -2px 5px 5px rgb(177, 187, 235);
}
.js {
    color: black;
}
.lori{
    display: flex;
}

 .loris ,.salmans, .faisals, .danishs, .manishs, .rehans{
    display: flex;
}

.online-curse{
   
    background-color: rgb(241, 234, 155);
    

}
.Expert-Tutors{
  
    background-color: rgb(196, 202, 205);
  
}
.Online-Students{
  
    background-color: rgb(141, 196, 209);
   
}
.Certified-Courses{
   
    background-color: skyblue;
   
}
.bi-tv{
    font-size: 4vw;
    color: rgb(231, 190, 10);     
}
.bi-person{
    font-size: 4vw;
    color: rgb(23, 23, 22);     
}
.bi-facebook{
    font-size: 4vw;
    color: rgb(126, 87, 224);     
}
.Certified-Courses .bi-patch-check-fill{
    font-size: 3.3vw;
    color: rgb(16, 92, 95);     
}

.Popular-Courses{
    text-align:center;
    margin-top:4vw;
}
.Popular-Courses2{
    text-align:center;
}
#category-buttons{
    background-color: rgb(223, 239, 251);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw;
}
.instructor{
    background-image: linear-gradient(rgb(106, 209, 220),rgb(86, 138, 144),rgb(155, 220, 233));
    height: 200px;
}

.start-Teaching:hover{
    background-color: rgb(194, 155, 16) !important;
    color:black !important;
}
.feedback{
    background-color: rgb(226, 232, 232);
}
main{
    width: 95%;
    margin: auto;
}
footer{
    width: 95%;
    margin: auto;
}
footer a{
    text-decoration:none;
    color:rgb(107, 106, 106);
}