*{
    margin: 0 ;
    padding: 0;
    box-sizing: border-box ;
    font-family: 'Poppins', 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(images/photo2.jpg) ; 
    background-position: center ; 
    background-size: cover ; 
    position: relative ; 
}

.nav-links{
    flex: 1;
    text-align: right ; 
    padding: 20px 30px ; 
    
}
.nav-links ul li{
    list-style: none ; 
    display: inline-block ; 
    padding: 12px 35px ;
    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: 0.5s ;
}
.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 ; 
}

.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: transparent ; 
    position: relative ; 
    cursor: pointer ; 
}
.hero-btn:hover{
    border: 1px solid #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 ; 
        margin: 10px ;
        font-size: 22px ; 
        cursor: pointer ; 
    }
    .nav-links ul{
        padding: 30px ; 
}
}
.course{
    width: 80% ; 
    margin: auto ; 
    text-align: center ; 
    padding-top: 100px ; 
}
row{
    
}

.footer{
    width: 100% ; 
    text-align: center ; 
    padding: 30px 0 ; 

}

.footer h4{
    margin-bottom: 25px ; 
    margin-top: 20px ; 
    font-weight: 600;

}

.sub-header{
    height: 50vh ; 
    width: 100% ;  
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/photo2.jpg);
    background-position: center ; 
    background-size: cover; 
    text-align: center ; 
    color: #fff ; 
}
.sub-header h1{
    margin-top: 100px ; 
}

.biography{
    width: 80% ; 
    margin: auto ; 
    padding-top: 80px ; 
   
}

.about-col{
    flex-basis: 48% ; 
    padding: 20px 7px ; 
    text-align: left ; 
 
    
}
.about-col h1{
    padding-top: 0 ; 
    transform: translate(10% , -70%) ; 
}

.about-col img{
    width: 50% ;
   
    transform: translate(-70%,-10%) ; 
    
 
}
.contact-me{
    width: 80% ; 
    margin: auto ; 
}
.contact-col{
    flex-basis: 48% ; 
    margin-bottom: 30px ; 
}
.contact-col div{
    display: flex ; 
    align-items: center ; 
    margin-bottom: 40px ; 
}
.contact-col div .fa{
    font-size: 28px ; 
    color: #f44336 ; 
    margin: 10px ; 
    margin-right: 30px ; 
}
.cantact-col div p{
    padding: 0 ; 
}
.hero-btn{
    display: inline-block ; 
    text-decoration: none ; 
    color: #fff ; 
    border: 1px solid #fff ; 
    padding: 12px 34px ; 
    background: transparent ; 
    position: relative ; 
    cursor: 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 ; 
        margin: 10px ; 
        font-size: 22px ; 
        cursor: pointer ; 
    }
    .nav-links fa{
        padding: 30px ; 
    }
}
.row{
    margin-top: 5% ; 
    display: flex ; 
    justify-content: space-between 
}
.comment-box{
    border: solid ; 
    margin: 50px 0 ; 
    padding: 10px 20px ; 
}
.comment-box h3{
    text-align: left ; 
}
.comment-form input, .comment-form texarea{
    width: 100% ; 
    padding: 10px ; 
    margin: 15px 0 ; 
    box-sizing: border-box; 
    border: none ; 
    outline: none ; 
    background: #f0f0f0 ; 
}
.icons .fa{
    color: #f44336 ; 
    margin: 0 13px ; 
    cursor: pointer ; 
    padding: 18px 0 ;    
}
.red-btn{
    border: 1px solid #f44336 ; 
    background: transparent ; 
    color: #f44336 ; 
}
.red-btn::hover{
    color: #fff ; 
}

.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 ; 
}

.contact{
    position: relative ; 
    min-height: 100px ; 
    padding: 50px 100px ; 
    display: flex ; 
    justify-content: center ; 
    align-items: center ; 
    flex-direction: column ; 

}
.container{
    width: 100% ; 
    display: flex ; 
    justify-content: left ; 
    align-items: right ; 
 
}
.container .contactInfo{
    width: 50% ; 
    display: flex ; 
    flex-direction: column ; 
}
.container .contactInfo .box{
    
    position: relative ; 
    padding: 20px 0 ;
    display: flex ; 
}
.container .contactInfo .box .text{
    display: flex ; 
    margin-left: 20px ; 
    font-size: 16px ; 
    color: crimson ; 
    flex-direction: column ; 
    font-weight: 300 ; 
}

.container .contactInfo .box .text h2{
    font-weight: 500 ; 
    color: darkred ; 
}
.contactForm{
    width: 100% ; 
    padding: 40px ; 
    background-color: aliceblue; 
}
.contactForm h2{
    font-size: 30px ; 
    color: #333 ; 
    font-weight: 500 ; 
}
.contactForm .inputBox{
    position: relative ; 
    width: 100% ; 
    margin-top: 10px ; 
}
.contactForm .inputBox input,
.contactForm .inputBox textarea{
    width: 100% ; 
    padding: 5px 0 ; 
    font-size: 16px ; 
    margin: 10px 0 ; 
    border: none ; 
    border-bottom: 2px solid #333 ; 
    outline: none ; 
    resize: none ; 
}
.contactForm .inputBox span{
    position: absolute ; 
    left: 0 ; 
    padding: 5px 0 ; 
    font-size: 16px ; 
    margin: 10px 0 ; 
    pointer-events: none ;
    transition: 0.5s ; 
    color: #666 ; 
}

.contactForm .inputBox input:focus~ span,
.contactForm .inputBox input:valid~ span,
.contactForm .inputBox textarea:focus~ span,
.contactForm .inputBox textarea:valid~ span{
    color: #e91e63 ;
    font-size: 12px ; 
    transform: translateY(-20px) ; 
}

.contactForm .inputBox input[type="submit"]{
    width: 100px ;
    background: #e91e63 ; 
    color: #fff ; 
    border: none ; 
    cursor: pointer ; 
    padding: 10px ; 
    font-size: 18px ; 
    
}

.mobina{
    position: center ; 
}