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

.header{ 
     min-height:100vh;
     width:100%; 
     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 {
     display:flex;
     padding:2% 6%;
     justify-content: space-between;
     align-items: center;
}
nav img{
    width:150px;
     
}
.nav-links{
     flex:1;
     text-align:right;
}
.nav-links ul li {
     list-style:none;
     display:inline-block;
     padding:8px 12px;
     position:relative;
}
.nav-links ul li a{
     color:#fff;
     text-decoration :none;
     font-size:13px;

}
.nav-links ul li ::after {
     content:"" ;
     width:0%;
     height: 2px;
     background:#f44336;
     display:block;
     margin:auto;
     transition: 1.5s;
} 
.nav-links ul li :hover::after{
     width:100%
}
.text-box {
     width:90%;
     color:white;
     position:absolute;
     top:50%;
     left:50%;
     transform: translate(-50%,-50% );
     text-align:center;
}
.text-box h1 {
     font-size:62px;

}
.text-box p {
     margin:10px 0 40px;
     font-size:14px;
     color:white;
}
.hero-btn {
     display:inline-block;
     text-decoration:none;
     color:#fff;
     border:1px solid #fff;
     padding:12px 34px;
     font: size 13px;
     background:trasparent;
     position:relative;
     cursor:pointer;

}
.hero-btn:hover {
border:1px soild #f44336;
background:#f44336;
transition:1s;
}
nav .fa{
   display:none;
}
@media(max-width:700px){
     .text-box h1 {
          font-size:20px;
     
     }
     .nav-links ul li {
          
          display:block;
}
     .nav-links  {
       position:absolute;
       background:#f44336;
       height:100vh;
       width:200px;
       top:0;
       right:-200px;
       text-align:left;
       z-index:2;
       transition: 1s;
     }
     nav .fa{
          display:block;
          color:#fff;
          cursor: pointer;
          font-size:22px;
          margin:10px; 

     }
     .nav-links ul{
       padding:30px;
     }

}
/*-------------Course---------*/
.course {
     width:80%;
     margin:auto;
     text-align:center;
     padding-top:100px;
}
h1{
     font-size:36px;
     font-weight:600;
}
p{
     color:#777;
     font-size:14px;
     font-weight:300;
     line-height:22px;
     padding:10px;
}

.row {
     margin-top:5%;
     justify-content: space-between;
     display:flex;

}
.course-col{
     flex-basis:31%;
     background:#fff3f3;
     border-radius:10px;
     margin-bottom:5%;
     padding:20px 12px;
     box-sizing:border-box;
     transition: 0.5s;
}
h3 {
     text-align:center;
     font-weight:600;
     margin: 10px 0;
}
.course-col:hover{
     box-shadow:0 0 20px rgba(0,0,0,0.2);
}

@media(max-width:700px){
     .row{
          flex-direction: column;
     }
}
/*----------campus------------*/
.campus{
     width:80%;
     margin:auto;
     text-align: center;
     padding-top:50px;
}
.campus-col {
     flex-basis: 32%;
     border-radius:10px;
     margin-bottom:30px;
     position:relative;
     overflow:hidden;
}
.campus-col img {
width:100%;
display: block;
}
.layer{
     background:transparent;
     height:100%;
     width:100%;
     position:absolute;
     top:0;
     left:0; 
     transition: 0.5s;

}
.layer:hover {
     background: rgba(226,0,0,0.7);
}
 .layer h3{
     width:100%;
     font-weight:500;
     color:#fff;
     font-size:26px;
     bottom:0;
     left:50%;
     transform: translateX(-50%);
     position: absolute;
     transform: 0.5s;


 }
 .layer:hover h3 {
     bottom: 49%;
     opacity: 1;
 }


 /*-------------facilities----------*/
 .facilities {
     width: 80%;
     margin:auto;
     text-align:center;
     padding-top:100px;  
 }
 .facilities-col {
     flex-basis: 31%;
     border-radius:10px;
     margin-bottom:5%;
     text-align:left;

 }
 .facilities-col img {
     width:100%;
     border-radius:10px;
 }
 .facilities-col p {
     padding:0;

 }
 .facilities-col h3 {
     margin-top:16px;
     margin-bottom: 15px;
     text-align:left;
 }




/*------------textimonials*/
.textimonials {
     width:80%;
     margin:auto;
     padding-top:100px;
     text-align:center;
}
.textimonials-col{
     flex-basis: 44%;
     border-radius: 10px;
     text-align:left;
     margin-bottom: 5%;
     background:#fff3f3;
     padding:25px;
     cursor:pointer;
     display:flex;
}
.textimonials-col img {
     height:40px;
     margin-left:5px;
     margin-right:30px;
     border-radius: 50px;
}
.textimonials-col p {
     padding:0;
}
.textimonials-col h3 {
     margin-top:15px;
     text-align:left;
}
.textimonials-col .fa{
color:#f44336; 
}
@media(max-width:1700px){ 
    .textimonials-col img {
         margin-left:0px;
         margin-right:15px;
    }
}
/*----cta--------*/
.cta {
     margin:100px auto;
     width:80%;
     background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(banner2.jpg);
     background-position:center;
     background-size:cover;
     border-radius:10px;
     text-align:center;
     padding:100px 0;  

}
.cta h1 {
     color:#fff;
     margin-bottom:40px;
     padding:0;
}
@media(max-width:700px){
     .cta h1{
          font-size:24px;
     }
}
/*--------footer------*/
.footer {
width:100%;
text-align:center;
padding:30px 0;
}
.footer h4 {
 margin-bottom :25px;
 margin-top:20px;
 font-weight:600;

}
.icons .fa{
  color:#f44336;
  margin:0 13px;
  cursor: pointer;
  padding:18px 0;

}
.fa-heart-o {
     color:#f44336;
}