body{
    padding: 9px;
    background-color: aliceblue;
}

a{
    color:rgb(75, 144, 208);
}

span{
    cursor: pointer;
}

h1{
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
}

#search{
    background-image: url(search.jpg);
    background-repeat: no-repeat;
    width:30rem;
    background-size: 24px;
    background-position: 12px 12px;
    height: 3rem;
    border-radius: 3rem;
    padding-left: 2.5rem;
    border: 1px solid black
}

#loginbtn{
    width:4rem;
    height:2.5rem;
    border: 1px solid black;
    background-color: white;
    
}

#signupbtn{
    width:4rem;
    height:2.5rem;
    background-color: black;
    color:white;

}

#menu{
    display: none;
}

.carousel-control-prev-icon{
    background-color:black;
}

.carousel-control-next-icon{
    background-color:black;
}
.courses{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 24px;
}

.Course{
    display: flex;
    column-gap: 60px;
    row-gap:10px;
    flex-wrap: wrap;
}

#d1{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:250px;
}
#d2{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:250px;
}
#d3{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:250px;
}
#d4{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:250px;
}
.logo{
    
    background-color: aliceblue;
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
    align-items: center; 
    column-gap:4rem;
    row-gap: 10px;
}

.Learn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.goals{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 6px;
}

#goal1{
    border-top:10px solid rgb(118, 59, 206);
    border-left: 1px solid #bbb;
    border-right:1px solid #bbb; 
    border-bottom: 1px solid #bbb;
    padding:3px;
    border-radius: 4px;
}
#goal2{
    border-top:10px solid rgb(118, 59, 206);
    border-left: 1px solid #bbb;
    border-right:1px solid #bbb; 
    border-bottom: 1px solid #bbb;
    padding:3px;
    border-radius: 4px;
}
#goal3{
    border-top:10px solid rgb(118, 59, 206);
    border-left: 1px solid #bbb;
    border-right:1px solid #bbb; 
    border-bottom: 1px solid #bbb;
    padding:3px;
    border-radius: 4px;
}
#L1{
    border-left:5px solid rgb(118, 59, 206);
    background-image: url(https://cms-images.udemycdn.com/96883mtakkm8/7kN9RBFSMFNHzsGWsElMPi/dde73f8d1c47e046f035274e78410590/hands-on-practice.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding:5px;
}
#L2{
    border-left:5px solid rgb(118, 59, 206);
    background-image: url(https://cms-images.udemycdn.com/96883mtakkm8/2Xh9YHJustDwCEjn5IlO25/93e9b15c6e74876db0dec63466fcc5a0/certificate.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding:5px;
}
#L3{
    border-left:5px solid rgb(118, 59, 206);
    background-image: url(https://cms-images.udemycdn.com/96883mtakkm8/6w8plrr7vY9rIY46UuX0q5/2f0a3f0c22e99bd2d430b998c81321f2/empty-state-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding:5px;
}
#L4{
    border-left:5px solid rgb(49, 159, 222);
    background-image: url(https://cms-images.udemycdn.com/96883mtakkm8/2tKGBrb1N60wox2Lh8j3tz/7f1528c9f88ea47bd6ebb46f345902c3/organizations-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    padding:5px;
}

.feedback{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#feedback1{
    height:300px;
    width:300px;
    border:1px solid #bbb;
    padding:5px;
}

#feedback2{
    height:300px;
    width:300px;
    border:1px solid #bbb;
    padding:5px;
}
#feedback3{
    height:300px;
    width:300px;
    border:1px solid #bbb;
    padding:5px;
}
#feedback4{
    height:300px;
    width:300px;
    border:1px solid #bbb;
    padding:5px;
}

.reports{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:left;
    background-color: white;
}
.View{
    display: flex;
    column-gap: 12px;
    row-gap:10px;
    flex-wrap: wrap;
}

#v1{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:300px;
}
#v2{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:300px;
}
#v3{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:300px;
}
#v4{
    border:1px solid black;
    box-shadow: 3px 3px  rgb(118, 59, 206);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    align-items: left;
    width:300px;
}


.trending{
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    justify-content: space-evenly;
    background-color: alciblue;
}

#trending1{
    width:350px;
    height:300px;
    border:1px solid #bbb;
    padding:15px;
}

#trending2{
    height:300px;
    padding:15px;
}

.footer1{
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding:25px;
}

.footer2{
    padding:15px;
    display: flex;
    flex-direction: column;
    background-color: black;
    row-gap: 20px;
    border-top:1px solid white;
}

#footer2_22{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



#footer2_1{
    display: flex;
    flex-direction: column;
}

#footer2_1 a{
    color:white;
}


@media (max-width:930px){
    .hidden{
        display: none;
    }

    #menu{
        display: block;
    }
}