*{
    margin:0;
    padding:0;
}
.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;
    font-family:'Poppins', sans-serif;
    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-type:none;
    display:inline-block;
    padding:8px 12px;
    position:relative;
}
.nav-links ul li a 
{
    color:#fff;
    text-decoration:none;
    font-family:'Poppins', sans-serif;
}
.nav-links ul li::after
{
    content:'';
    width: 0%;
    height:2px;
    background:white;
    margin:auto;
    display:block;
}
.nav-links ul li:hover::after
{
    width:100%;
    transition:0.5s;
}
.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;
        text-align:center;
    }
.herobtn
{
    display:inline-block;
    text-decoration:none;
    color:#fff;
    border:1px solid #fff;
    font-size:13px;
    width:150px;
    cursor:pointer;
    padding:13px;
    transition:width 1s;
    background-color:transparent;
}
.herobtn:hover
{
 border:1px solid #f44336;
 background-color:#f44336;
 transition:1s;
 width:200px;
}
.ban .fa
{
    display:none;
}

@media(max-width:700px)
{
    .text-box h1
    {
        font-size:20px;
    }
    .nav-links ul li
    {
      display:block;  
    }
    .ban .fa
    {
        display:block;

    }

    i.fa
    {
        display:block;
        color:white;
        margin:10px;
        font-size:22px;
        cursor:pointer;
    }
    .nav-links ul li
    {
        padding:30px;
    }
    @media screen and (max-width:700px) {
        .nav-links
    {
        position: fixed;
        background-color: #f44336;
        height: 100vh;
        width: 200px;
        top:0;
        right:-200px;
        z-index:2;
        transition:1s;
    }
    }

}
/*-----course-----*/
.course
{
    width: 80%;
    margin:auto;
    text-align:center;
    padding-top:100px;
}
h1
{
    font-size:36px;
    font-weight:600px;

}
.slog
{
    text-align: center;
}
p
{
    color:#777;
    font-size:14px;
    font-weight:300;
    line-height:22px;
    padding:10px;
    text-align: justify;
}
.row
{
    margin-top:5%;
    display:flex;
    justify-content:space-between;
     
}
.course-col
{
    flex-basis:31%;
    background-color:#e4dede;
    border-radius:10px;
    margin-bottom:10%;
    padding:20px 12px;
    box-sizing:border-box;
}
h3
{
    text-align:center;
    font-weight:600px;
    margin:10px 0;
}
.course-col:hover{
    box-shadow:0 0 20px 0px rgba(0,0,0,0.3);
}
@media screen and (max-width:700px)
{
    .row
    {
     display:flex;
     flex-direction:column;
    }
}
/*----CAMPUS ---*/
.campus
{
    width: 80%;
    margin:auto;
    padding-top:50px;
    text-align:center;
}
.campus-col
{
    flex-basis:33%;
    border-radius:10px;
    margin-bottom:30px;
    position:relative;
    overflow:hidden;
}
.campus p
{
    text-align: center;
}
.campus-col img
{
    width:100%;
    display:block;
}
.layer
{
    background:transparent;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
.layer:hover{
    background:rgba(226,0,0,0.7);
    transition:0.5s;
}
.layer h3
{
width: 100%;
opacity:0;
font-weight: 500;
bottom:0;
left:50%;
font-size: 26px;
color:white;
transform:translate(-50%);
position:absolute;
}
.layer:hover h3
{
    bottom:49%;
    opacity:1;
    transition:0.5s;
}

/*-------Faciities----*/
.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 p
{
    text-align: center;
}
.facilities-col p
{
    padding:0;

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

/*------testimonials----*/
.testimonials
{
    width:80%;
    text-align:center;
    padding-top:100px;
    margin:auto;
}
.testimonials p
{
    text-align: center;
}
.testimonials-col
{
    flex-basis: 44%;
    border-radius:10px;
    margin-bottom: 5%;
    text-align:left;
    background:#fff3f3;
    cursor:pointer;
    display:flex;
    padding:25px;  
}
.testimonials-col img
{
    height:40px;
    margin-left:5px;
    margin-right:30px;
    border-radius:50%;
}
.testimonials-col h3
{
    margin-top:15px;
    text-align:left;
}
.testimonials-col p
{
    padding:0;
    text-align:justify;
}
.testimonials-col .fa{
    color:#f44336;
}
@media screen and (max-width) {
    .testimonials-col img {
        margin-left:0px;
        margin-right:15px;
    }
}

/*Call to action */
.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;
     border-radius: 10px;
     text-align: center;
     padding: 100px 0;
     background-size:cover;
}
.cta h1
{
    padding:0;
    margin-bottom:40px;
    color:white;
}
@media screen and (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;

}
.footer p
{
    text-align: center;
}
.icons .fa
{
    color:#f44336;
    margin:0 13px;
    cursor:pointer;
    padding:18px 0;
}
.fa-heart-o
{
    color:#f44336;
}
/*---ABOUT US PAGE-----*/
.sub-header
{
height:50vh;
width:100%;
background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("background.jpg");
background-position: center;
background-size:cover;
text-align: center;
color:white;
}
.sub-header h1
{
    margin-top:100px;
}
.about-us
{
    width:80%;
    margin:auto;
    padding-top:80px;
    padding-bottom:50px;
}

.about-col
{
    flex-basis:48%;
    padding:30px 2px;
}
.about-col img{
    width:80%;
}
.about-col h1
{
   padding-top:0; 
   padding-left: 40px;
}
.about-col p
{
    padding:15px 30px 25px;

}
.redbtn
{
    background-color:transparent;
    color:red;
    text-align:center;
    border: 2px solid red;
    margin-left: 30px;
}
.redbtn:hover
{
    color:#fff;
}

/* -----blog content---- */
.blog-content
{
width:80%;
margin:auto;
padding:60px 0;
}
.blog-left
{
    flex-basis:65%;
}
.blog-left img
{
    width:100%;
    margin-left:50px;
}
.blog-left h2{
    color:#222;
    font-weight:600;
    margin:30px 60px;
}
.blog-left p
{
  color:#999;
  padding:0;
}
.blog-right
{
    flex-basis:32%;
    margin-left: 100px;
}
.span
{
    margin-left:50px;
}
.blog-right h3{
    background-color:#f44336;
    color:white;
    padding:7px 0;
    font-size:16px;
    margin-bottom:20px;
    margin-left: 40px;
    width:90%;
}
.blog-right div
{
    display:flex;
    align-items:center ;
    justify-content: space-between;
    color:#555;
    padding: 8px;
    box-sizing: border-box;
}
.comment-box
{
    border:1px solid  #ccc;
    margin:50px 20px;
    padding:10px 20px;
}
.comment-box h3
{
 text-align:left;
}
.comment-form input, .comment-form textarea{
    width:100%;
    padding:10px;
    margin:15px 0;
    box-sizing: border-box;
    border:none;
    outline:none;
    background:#f0f0f0;
}
.comment-form button
{
    margin:10px 50px;
}
@media screen and (max-width:700px)
{
    .sub-header h1
    {
        font-size:24px;
    }
}
/* ------CONTACT US----- */
.location
{
    width:80%;
    margin:auto;
    padding:80px 0;
}
.location iframe  
{
    width:100%;
}
.contact-us
{
    width:80%;
    margin:auto;
}
.contact-col
{
    flex-basis:48%;
    margin-bottom:30px;
}
.contact-col div{
    display:flex;
    align-items:center;
}
.contact-col div .fa
{
    font-size:28px;
    color:#f44336;
    margin:10px 30px;
}
.contact-col div p
{
    padding:0;
}
.contact-col div h5
{
    font-size: 20px;
    margin-bottom:5px;
    color:#555;
    font-weight: 400;
}
.contact-col input , .contact-col textarea
{
 width:100%;
 padding:15px;
 margin-bottom:17px;
 outline:none;
 border:1px solid #ccc;
}
@media screen and (max-width:700px)
{
    .blog-left img
    {
        width:80%;
    }
    .blog-right
    {
      margin-left:0px;
    }
}