style 3.css

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'poppins',sans-serif;
    
    }
    
 
 
 /* linear-gradient(rgba(4,9,30,0.7)),*/
 
 .header{
    min-height: 100vh;
    width:100%;
    padding:20px 120px;
    background-image:url(4af14599ed7c5a3c49509e7f9ec92c84.jpg);
    backdrop-filter: blur(100px);
    background-position: center;
    background-size:cover;
    background-position: absolute;
 }
 .logo {
   margin-top: 50px;
   font-size: 40px;
   color:navajowhite;
   text-decoration:solid;
   font-weight: 600;
   text-align:left;
 }
 
nav{
   width:100%;
   height:50px;
   background: rgba(0,0,0,.8);
   border-top:1px solid rgba(255,255,255.2,);
   border-bottom:1px solid rgba(255,255,255,.2);
   position:sticky;
   top:0;
 }
 nav ul{
   display:flex;
   margin-top:15px;
   padding:0 100px;
   float:right;
 
 }
 nav ul li{
   list-style:none;
   
 }
 nav ul li a{
   display: block;
   color:#fff;
   padding: 0 20px;
   text-decoration:none;
   text-transform:uppercase;
   font-weight:bold;
   line-height:50px;
 }
 nav ul li a:hover,
 nav ul li a.active{
   background:burlywood;
 }
 .nav_link {
   color: #fff;
   font-size: 15px;
   transition: all 0.5s;
 }
 .nav_link:after{
   content:'';
   opacity:0;
   transition:all 0.2s;
   position:absolute;
   bottom:8px;
   height:5px;
 }
 .nav-links ul li a{
   color:#fff;
   text-decoration:none;
   font-size:30px;
   color:#d4bca4;
 }
 .nav-links ul li a{
   color:#fff;
   text-decoration:none;
   font-size:30px;
   color:#d4bca4;
 }
 .nav-links ul li:hover::after{
         
   width:100%;
 }
 
 .text-box{
    width:90%;
    color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:Center;
 }
 .text-box h1{
    font-size:62px;
    color:shiny silver;
 }
 .text-box p{
    margin-top:20px;
    font-size:25px;
    color:#fff;
    font-family:monospace;

 }
 .hero-btn{
    margin-top:20px;
    display:inline-block;
    text-decoration:none;
    color:#fff;
    border:1px solid #fff;
    padding:12px 34px;
    font-size:13px;
    background:transparent;
    position:relative;
    cursor:pointer;
 }
 .hero-btn:hover{
    
    border:1px solid #D4BCA4;
    background:#D4BCA4;
    transition:1s;
 }
 .nav.fa{
    display:none;
 }
 
 @media(max-width:700px){
    .text-box h1{
       font-size:20px;
    }
    .nav-limks ul li{
       display:block;
 
    }
    .nav-links{
       position:absolute;
       background:#D4BCA4;
       height:100vh;
       width:200px;
       top:0;
       right:-200px;
       text-align:left;
       z-index:2;
       transition:1s;
    }
 
    nav.fa{
       display:block;
       color:#fff;
       margin:10px;
       font-size:22px;
       cursor:pointer;
    }
    .nav-links ul{
       padding:30px;
    }
 }
 /*---course---*/
 .course{
    width:80%;
    margin:auto;
    text-align:center;
    padding-top:100px;
    
    
 }
 
 .text-container{
    padding:20px;
    height:150vh;
    
 }
 /*---blog-----------------*/

 #blog{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:40px;
    border-bottom:1px solid rgba(0,0,0,0);
 }
 .blog-heading{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
 }
 .blog-heading span{
    color:#f33c3c;
}
.blog-heading h3{
   font-size: 2.4rem;
   color:#2b2b2b;
   font-weight:600;
}
.blog container{
   display:flex;
   justify-content:center;
   align-items:center;
   margin:20px 0px;
   flex-wrap:wrap;
}
.blog-box{
   width:350px;
   background-color:#ffffff;
   border:1px solid #ececec;
   margin:20px;
}
.blog-img{
   width:100%;
   height:auto;
}
.blog-img img{
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:center;
}
.blog-text{
   padding:30px;
   display:flex;
   flex-direction:column;
}

.blog-text span{
   color:#D4BCA4;
   font-size: 0.9rem;
}
.blog-text .blog-title{
   font-size:1.3rem;
   font-weight:500;
   color:#272727;
}
.blog-text .blog-title:hover{
   color:#f33c3c;
transition:all ease 0.1s;
}
.blog-text p{
   color:#D4BCA4;
   font-size:0.9rem;
   display:-webkit-box;
   -webkit-line-clamp:3;
   -webkit-bow-orient:vertical;
   overflow:hidden;
   text-overflow:ellipsis;
   margin:20px 0px;

}
.blog-text{
   color:#0f0f0f;
}
.footer{
   display:-webkit-flex;
   display:-moz-flex;
   display:-ms-flex;
   display:-o-flex;
   display:flex;
flex-flow:row wrap;
padding:50px;
color:#fff;
background:#262626;
}

.footer >*{
   flex: 1 100%;
}
.l-footer{
   margin-right:1.25em;
   margin-bottom:2em;
}
h2{
   font-weight:900;
   font-size:16px;
}
.footer ul{
list-style:none;
padding-left:0;

}
.footer li{
   line-height:2em;
}
.footer a{
   text-decoration:none;
}
.r-footer{
   display:-webkit-flex;
   display:-moz-flex;
   display:-ms-flex;
   display:-o-flex;
   display:flex;
flex-flow:row wrap;
}
.r-footer > *{
   flex:1 50%;
   margin-right: 1.25em;
}

.box a{
   text-decoration:none;
   color:#999;
}
.h-box{
   column-count: 2;
   column-gap:1.25em;
}
.b-footer{
   text-align:center;
   color:#999;
   padding-top:50px;
}

.l-footer p{
   padding-right:20%;
   color:#999;
}
@media screen and (min-width:600px){
   .r-footer > *{
      flex:1;
   }
   .features{
      flex-grow: 2;
   }
   .l-footer{
      flex{
         flex:1 0px;
      }
      .r-footer{
         flex:2 0px;
      }
   }
}