index.css

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
}

/* navbar */

nav{
  margin-bottom: 0px;
}

.navbar{
  background-color: #FFFFFF;
  padding: 0px;
  margin: 0px 0px 0px 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
}

.logo{
  height: 80px;
  width: 80px;
}

.navbar h1{
  color: #E89A24;
  font-weight: bold;
  font-size: 30px;
}

.navbar h1 span{
  color: #003E5B
}

.menu-bars{
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  margin: 30px;
}

.menu-bars span{
  width: 100%;
  height: 3px;
  background-color: black;
}

.menu{
  margin-left: auto;
  margin-top: 10px;
  margin-right: 20px;
  display: flex;
}

.menu ul{
  list-style: none;
  display: flex;
}

.menu ul li a{
  color: #6C7379;
  font-size: 20px;
  font-weight: bold;
  text-decoration:none;
  margin-right: 20px;
}

.navbtn{
  background-color: #E89A24;
  color: #FFFFFF;
  border: none;
  height: 40px;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
  margin-top: 6px;
}

/* container */

.container{
  background-image: url(/images/download.png);
  width: 100%;
  height: 640px;
  padding: 0px;
  margin: 0px;
  align-self: center;
  background-color: #24292E;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

#ct2{
  background-image: url(images/background2.png);
  height: 400px;
}

.container h1{
  color: #FFFFFF;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  padding-top: 100px;
  margin-top: 0px;
}

.container h3{
  color: #FFFFFF;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
}

.container button{
  background-color: #E89A24;
  color: #FFFFFF;
  border: none;
  height: 40px;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  margin-top: 20px;
  align-self: center;
}

.container button:hover{
  background-color: #F2B84B;
}

.container img{
  width: 30%;
  margin-top: 20px;
  margin-left: 35%;
}

/* heading */

.heading{
  color: #003E5B;
  text-align: center;
  font-weight: bold;
  margin-top: 60px;
}

/* courses */

.line {
  display: flex;
}

.category-card{
  width: 33%;
  padding: 20px 10px;
  margin: 20px 80px;
  background-color: #F7F7F7;
  display: flex;
  flex-direction: column;
}

.category-card img{
  height: 100px;
  width: 100px;
  margin: 10px;
  align-self: center;
}

.category-card h1{
  text-align: center;
  font-weight: bold;
  color: #003E5B;
}

.category-card p{
  text-align: center;
}

.category-card a{
  color: #E89A24;
  font-size: 18px;
  font-weight: bold;
}

.category-card a:hover{
  color: #F2B84B;
}

/* proceed */

.proceed{
  background-color: #F7F7F7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0px;
}

.proceed button{
  background-color: #E89A24;
  color: #FFFFFF;
  border: none;
  height: 40px;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  margin-top: 20px;
  align-self: center;
}

/* footer */

footer{
  background-color: #24292E;
  color: #FFFFFF;
}

.footer{
  padding: 20px 0px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  
}

.footer-logo{
  display: flex;
  margin-left: 40px;
  margin-top:  100px;
}

.footer-logo img{
  height: 100px;
  width: 100px;
}

.footer h1{
  font-size: 40px;
  font-weight: bold;
  margin-left: 20px;
}

.footer h1 span{
  color: #E89A24;
}

.footer ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: 40px;
}

.footer h2{
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-left: 60px;
}

.footer-menu{
  display: flex;
  flex-direction: column;
  margin-left: 60px;
}

.footer-menu ul li{
  margin-bottom: 30px;
}

.footer a{
  color: #FFFFFF;
  font-size: 20px;
  margin-left: 20px;
}

.footer a:hover{
  color: #E89A24;
}

.footer-social{
  display: flex;
  flex-direction: column;
  margin-left: 60px;
}

.footer-social ul li{
  margin-bottom: 20px;
}

.footer-social a{
  margin-left: 20px;
  text-decoration: none;
}

.footer-social img{
  margin-right: 10px;
  width: 30px; 
  height: 30px; 
}

.copyright{
  background-color: #1A1A1A;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 0px;
  margin-top: 20px;
}

/* quiz container */

#quiz-block{
  padding: 20px 0px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.question{
  background-color: #F7F7F7;
  padding: 20px 10px;
  margin: 0px 80px;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.answers{
  display: flex;
  flex-direction: column;
  margin: 0px 80px;
  padding: 0px 10px;
}

.answers label{
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

.answers label:hover{
  border: 3px solid #F2B84B;
  border-radius: 5px;
}

.submit-quiz{
  background-color: #F7F7F7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0px;
}

.submit-quiz button{
  background-color: #E89A24;
  color: #FFFFFF;
  border: none;
  height: 40px;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  margin-top: 20px;
  align-self: center;
}

.submit-quiz button:hover{
  background-color: #F2B84B;
}

.result{
  padding: 20px 10px;
  margin: 0px 80px;
  display: flex;
  flex-direction: column;
}

.result p{
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

/* about us */

.about-us{
  padding: 20px 0px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.about-us-card{
  background-color: #F7F7F7;
  padding: 20px 10px;
  margin: 0px 80px;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.about-us-card img{
  width: 20%;
  align-self: center;
}

.about-us-card h1{
  font-size: 30px;
  margin-bottom: 10px;
  text-align: center;
}

.about-us-card h1 span{
  color: #E89A24;
}

.about-us-card p{
  font-size: 20px;
  text-align: center;
}

/* contact */

.contact{
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-card{
  width: 287px;
  background-color: #F7F7F7;
  margin: 40px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.contact-card a{
  text-align: center;
}

.contact-card h2{
  margin: 0%;
  text-align: center;
  font-size: 28px;
}

.contact-card p{
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
}

/* contact form */

.contact-form{
  justify-content: center;
  align-items: center;
  margin: 5% 15%;
  display: flex;
  flex-direction: column;
}

.contact-form input{
  font-size: 25px;
  border-color: white;
  background-color: #100E17;
  border-radius: 10px;
  padding: 20px;
  color: white;
  margin-bottom: 20px;
}

.firstname{
  width: 100%;
}

.lastname{
  width: 100%;
  margin-left: auto;
}

.email {
  width: 100%;
}

.message {
  font-size: 25px;
  border-color: white;
  background-color: #100E17;
  border-radius: 10px;
  padding: 20px;
  color: white;
  width: 100%;
  margin-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.sendbtn{
  font-size: 25px;
  background-color: #E89A24;
  border-radius: 25px;
  border-color: white;
  padding: 20px;
  color: white;
  width: 100%;
  font-weight: bold;
}

/* responsive */

@media only screen and (max-width:600px){
  .menu  {
    display: none;
  }

  .menu-bars{
    margin-left: auto;
    display: flex;
  }

  .line{
     display: block;
  }

  .category-card{
    width: 70%;
    margin: 20px auto;
  }

  .footer{
    display: block;
    padding: 20px;
  }

  .footer ul{
    margin-left: 20px;
  }

  .footer-logo{
    margin-left: 20%;
  }

  .footer-menu{
    margin-left: 25%;
    display: block;
  }

  .footer-social{
    margin-left: 25%;
    display: block;
  }

  .contact{
    flex-direction: column;
}
}