*{
    margin: 0;
    padding: 0;
    font-family: 'Gowun Dodum', 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("newback.jpg");
    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: 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: 18px;
    color: #fff;
}
.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;
}

@media(min-width: 700px){
#navLinks > i {
    display: none;
}
.hide-on-md-screen {
    display: none !important;
}
}
.color-gray{
    color: #eeeeee;
}
@media(max-width: 700px){
#navLinks > i {
    display: block;
}

.text-box h1{
    font-size: 20px;  
}
    .nav-links ul li {
    display: block;
        }
        .nav-links{
            position: fixed;
            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;
             }
             
}


/*--------------------testimonial------------------*/
body{
	margin:0;
}

*{
	box-sizing: border-box;
}
.testimonials{
	min-height: 100vh;
	background-color: #fff;
	float: left;
	width: 100%;
	padding:100px 15px;
}

.container{
	max-width: 1170px;
	margin: auto;
}
.testimonials .title{
	margin-bottom:60px
}
.testimonials .title h1{
	text-align: center;
	color:#05386b;
	font-size: 36px;
	margin:0;
}
.testimonials h1::after
{
    content: ''; 
    color:  #007bff;
    background: #007bff;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px;
}
.testimonials .slider{
 border:1px solid #05386b;
 max-width: 600px;
 margin: auto;
 text-align: center;
 padding:30px;
}
.testimonials .slider .slide{
	display: none;
}
.testimonials .slider .slide.active{
	
	display: block;
	animation: slide 1s ease;
}
@keyframes slide{
	0%{
		opacity:0;
		transform: translateX(-15px);
	}
	100%{
	   opacity:1;
		transform: translateX(0px);	
	}
}
.testimonials .slider p{
	font-size:18px;
	color:#05386b;
	word-spacing: 2px;
}
.testimonials .slider .client-info h3{
	font-weight: bold;
	color: #05386b;
	font-size:18px;
	margin:30px 0 10px;
}
.testimonials .slider .client-info span{
	display: block;
	font-size:16px;
	color:#05386b;
}
.testimonials .slider-indicator{
	text-align: center;
	padding-top:30px;
}
.testimonials .slider-indicator img{
	max-height:80px;
	max-width:80px;
	border-radius:50%;
	display: inline-block;
	margin:0 8px;
	opacity:0.2;
	border:4px solid #05386b;
	cursor: pointer;
	transition: opacity 1s ease;
}
.testimonials .slider-indicator img.active{
	opacity:1;
}
/*-----------------------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("pexels-fauxels-3184291.jpg");
    background-position: center;
    background-size: cover;
    color: #fff;
}
.sub-header h1{
    margin-top: 41px;
    font-size: 40px;
    text-align: center;
}
/*-------------About-----------*/
#about
{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff; 
    text-align: center;
}
#about .btn
{
    margin-top: 20px;
    margin-bottom: 30px;

}
.about-content
{
    padding-top: 20px;
    color:  #123c69;
    font-size: 20px;
    text-align: center;
}
.about-content {
    flex-basis: 48%;
    padding: 30px 2px;
}
.about-content img{
    width: 40%;
}
@media(max-width: 700px){
    .about-content img{
        width: 90%;
    }
}
/*------------------Vision------------*/
#vision
{
    text-align: center;
    font-size: 20px;
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: #fff;
}
#vision h2{
    padding-top: 10px;
    color: #123c69;
}
h2::after
{
    content: ''; 
    background:  #007bff;
    color: #123c69;
    display: block;
    height: 2px;
    width: 170px;
    margin: 20px auto 10px; 
}
#vission-content
{
    padding-top: 70px;
    color: #123c69;
}
#about h2{
    color: #123c69;
}
@media(max-width: 700px){
    .container video{
        width: 90%;
    }
}
/*------------------Mission------------*/
#mission
{
    text-align: center;
    color: #123c69;
    font-size: 20px;
    padding-bottom: 90px;
    padding-top: 90px;
}
#mission h2
{
cursor: pointer;
transition: 0.10s;
padding-bottom: 13px;
}
/*------------------testimonial--------------------*/
.not{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("pexels-sora-shimazaki-5668858.jpg");
    background-position: center;
    background-size: cover;
    color: #fff;

}
.not h1{
    margin-top: 41px;
    font-size: 40px;
    text-align: center;
    color: #fff;
}
/*------------------contact us--------------------*/
.notabc{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("pexels-picjumbocom-225232.jpg");
    background-position: center;
    background-size: cover;
    color: #fff;
}
.notabc h1{
    margin-top: 41px;
    font-size: 40px;
    text-align: center;
    color: #fff;
}
.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;
   margin-bottom: 40px;
}
 .contact-col div .fa{
    font-size: 28px;
    color: #f44336;
    margin: 10px;
    margin-right: 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;
    box-sizing: border-box;
}
.btn{
    font-size: 18px;
    font-weight: bold;
    background: #f44336;
    width: 140px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}

/*--------------message-----------------*/
.qas{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("pexels-pixabay-261763.jpg");
    background-position: center;
    background-size: cover;
    color: #fff;
}
.qas h1{
    margin-top: 41px;
    font-size: 40px;
    text-align: center;
}
/*-----------Message from-----------*/
#message
{
padding-top: 50px;
padding-bottom:50px;
text-align: center;
background-color: #fff;
}

.img-responsive
{
    border: solid black 1px; padding: 2px;
}
#message h1
{
   text-align: center;
    color: 	#123c69 !important;
    padding-bottom: 20px;
    padding-top: 5px;
    
}
#message h1::after
{
    content: ''; 
    background:  #123c69;
    display: block;
    height: 2px;
    width: 250px;
    margin: 20px auto 5px;
}
#message h5
{
    color: #123c69 !important;
}
#message h3
{
color: #123c69 !important;
}
#call{
    padding-top: 50px;
padding-bottom:50px;
background-color: #fff;
text-align: center;

}
.img-responsive
{
    border: solid black 1px; padding: 2px;
}
#call h1
{
   text-align: center;
    color: #123c69  !important;
    padding-bottom: 20px;
    padding-top: 5px;
     
}
#call h1::after
{
    content: ''; 
    background:  #123c69 ;
    display: block;
    height: 2px;
    width: 150px;
    margin: 20px auto 5px;
}
#call h5
{
    color: #123c69  !important;
}
#call h3
{
color: #123c69 !important;
}
/*------------------Services------------*/
.nato{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("pexels-anna-shvets-4421494.jpg");
    background-position: center;
    background-size: cover;
    color: #fff;
}
.nato h1{
    margin-top: 41px;
    font-size: 40px;
    text-align: center;
}
#services
{
   background-color: #fff;
    background-size: cover;
    background-position: center;
    color: #123c69 !important;
    background-attachment: fixed;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}
#services h1
{
   text-align: center;
    color: #123c69	 !important;
    padding-bottom: 10px;
    
}
#services h1::after
{
    content: ''; 
    color:  #007bff;
    background: #007bff;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px;
    
}
.services
{
margin-top: 40px;
}
.icon
{
    font-size: 40px;
    margin: 20px auto;
    padding: 20px;
    height: 80px;
    width: 80px;
    border: 1px solid #fff;
    border-radius: 50%;
}
#services p
{
    font-size: 14px;
    margin-top: 20px;
    color: #123c69;
}
#services p:hover{
    color: #f44336;
}
.services .col-md-3:hover{
    color: #f44336;
    cursor: pointer;
    transition: 0.7s;
}