day2.css

*{
  margin:0;
  padding:0;
  font-family:'Poppins',sans-serif;
}

.header{
  width:100%;
  height:100vh;
  background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(banner.png);
  background-position: center;
  background-size: cover;
  position:relative;
}

nav{
  padding:2% 6%;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
img{
  width: 150px;
}
ul{
  list-style: none;
  
}
.nav-links{
  
  flex:1;
  text-align:right;

}
li{
  display:inline-block;
  padding:6px 12px;
  position:relative;
  list-style:none;

}
li a{
  color: white;
  text-decoration: none;
  font-size: 13px;
}

li::after{
  content:'';
  display:block;
  background:red;
  width:0%;
  height:2px;
  transition:1s;
  
}
li:hover::after{
  
  width:100%;
  
}

.text-box{
  width:90%;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  color:white;

}
h1{
  font-size: 62px;
  text-transform: capitalize;
}
p{
  color:white;
  margin: 10px 0 40px;
  font-size: 14px;
}

.hero-btn{
     border:1px solid white;
     padding: 12px 34px;
     text-transform: capitalize;
     background:transparent;
     cursor:pointer;
     position:relative;
     font-size: 13px;

}
.hero-btn:hover{
  background:red;
  transition:1s;
  border:red solid 1px;
}
nav .fa{
  display:none;
}


@media(max-width:700px)
{
  h1{
    font-size: 20px;
  }
  p{
    font-size: 12px;
  }
  .nav-links{
      border:1px red solid;
      width:200px;
      height:100vh;
      background-color: red;
      z-index: 2;
      position:absolute;
      text-align:left;
      top:0;
      right:-200px;
      transition:1s;
  }
  ul{
    padding:30px;
  }
  li{
    display:block;

  }
  nav .fa{
    display:block;
    cursor:pointer;
    color:white;
    font-size:22px;
  }
}

/*-----------------courses-------------*/
.courses{
  width:80%;
  text-align: center;
  margin:auto;
  padding-top:100px;
}

.courses h1{
  font-size: 36px;
  font-weight: 600;
  
}
.courses p{
  font-size: 14px;
  color:#777;
  line-height: 22px;
  font-weight: 300;
  padding:10px;
}
.column h3{
  font-weight: 600;
  text-align: center;
  margin:10px 0;
}
.row{
  display:flex;
  justify-content: space-between;
  margin:5%;
  
}
.column{
  flex-basis: 31%;
  margin-bottom:5%;
  background-color: #fff3f3;
  border-radius: 10px;
  padding:20px 12px;
  transition: 0.5s;
  box-sizing: border-box;
}
.column:hover{
  box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
}

@media(max-width:700px)
{
  .row{
    flex-direction: column;
  }
}