*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header{
  height: 64px;
}

.navbar{
  display: flex;
  justify-content: space-between;

}

.logo{
  margin-left: 24px;
  display: flex;
  align-items: center;
}

.logo img{
  height: 32px;
}

.logo h2 span{
  line-height: 32px;
  color: grey;
}

.menu{
  height: 64px;
  margin-right: 24px;
  display: flex;
  align-items: center;
}

.menu li {
  color: black;
  margin-left: 16px;
  list-style: none;
}

.media-nav{
  display: none;
}


@media screen and (max-device-width: 480px) {
  /* nav part */
  .left-nav{
    display: none;
  }

  .logo{
    display:none;
  }

  .media-nav{
    height: 4rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .media-nav img{
    height: 2rem;
  }

  /* section 1 */

  .container1 {
    display: flex;
  }

}



/* header end here  */

/* section 1 start here  */
.container1{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  background-color: #D8D8D8;
}
.banner{
  margin: 2rem 1.5rem;
}

.content-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 24px;
}

.content-right h1{
  font-size: 2.8rem;
  margin-bottom: 2rem;
}

.content-right p{
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.content-right button{
  width: 80%;
  font-size: 1rem;
  padding: 1rem;
  background-color: #4A4A4A;
  color: white;
}

/* section 1 end here  */

/* section 2 start here  */

.container2 {
  width: 100%;
  display: flex;
}

.main-left{
  width: 60%;
  margin: 32px 24px;
}

.main-left img{
  width: 100%;
  margin-bottom: 32px;
}

.main-left h1{
  font-size: 40px;
  margin-bottom: 24px;
}

.main-left p{
  margin-bottom: 32px;
}


.main-right{
  width: 40%;
  margin: 32px 0;
}

.orientation{
  display: flex;
}

.orientation img{
  width: 35%;
  height: auto;
  margin: 16px;
}

.content2{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content2 a{
  text-decoration: none;
  color: blue;
}

.bg-grey{
  background-color: #667683;
}

/* section 2 end here  */
/* section 3 start here  */
.container3{
  width: 100%;
  background-color:#F2F5F5 ;
}

.start-learning{
  width: 100%;
}

.start-learning h1{
  font-size: 40px;
  Padding: 32px;
  text-align: center;
}

.grid{
  margin: 32px 72px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 32px;
  padding-bottom: 32px;
}




.part1{
  background-color:white;
}

.grid img{
  width: 100%;
  height: auto;
}

.textform{
  margin: 16px 16px 24px 16px;
}

.textform p{
  color: rgba(159, 153, 153, 0.961);
  margin-top: 8px;
}


/* section 3 end here  */
/* section 4 start here  */
.container4{
  background-color: #EAEBEC;
}

.container4 {
  width: 100%;
  display: flex;
}

.container4.main-left{
  width: 60%;
  margin: 32px 24px;
}

.container4.main-left img{
  width: 100%;
  margin-bottom: 32px;
}

.main-left h1{
  font-size: 40px;
  margin-bottom: 24px;
}

.main-left p{
  margin-bottom: 32px;
}


.main-right{
  width: 40%;
  margin: 32px 0;
}

.orientation{
  display: flex;
}

.orientation img{
  width: 35%;
  height: auto;
  margin: 16px;
}

.content2{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content2 a{
  text-decoration: none;
  color: blue;
}
/* section 4 end here  */
footer{
margin: 16px 24px;
}


.footer2{
  display: flex;
}
.footer2 li{
 list-style: none;
 margin-left: 16px;
 color: black;
}