*{
    margin: 0;
    padding:0;
}
.container{
    width: 1320px;
    margin: 0 auto;
}
.clr{
    clear:both;
}

.title h5{

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400px;
    color: #0f3f44;
    margin-bottom:5px;


}
.title h2{

    font-family: 'Abril Fatface', cursive;
    font-size: 32px;
    font-weight: 400px;
    color: #0f3f44;
    margin-top: -5px;


}

ul, ol{
    list-style: none;
}

a{
    text-decoration: none;
}

/* ====================================
             header part start
======================================= */

header{
    background: #0f2f44;
    padding: 10px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400px;
   
}
header .header_left_text{
    width: 50%;
    float: left;
    color: white;
    

}
header .header_right_text{
    width: 50%;
    float: left;
    color:white;
    text-align: right;
   

}


/* ====================================
             header part 
======================================= */



/* ====================================
             navbar part 
======================================= */

nav .logo{
    width: 15%;
    margin-top: 25px;
    cursor: pointer;
    float: left;

}
nav .nav_item{
    width: 75%;
    
    float: left;

}
nav .nav_item ul{
    text-align: center;
}


nav .nav_item ul li{


    display: inline-block;
    margin-left: 50px;
}

nav .nav_item ul li a{
    display: inline-block;

    color:black;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400px;
    background: transparent;
    padding: 30px 10px;
    transition: .4s;
}

nav .nav_item ul li a:hover{

    background: #fff9e6;
    color: #fcc512;



}
nav .icon{
    width: 10%;
    float: left;
    margin-top: 25px;

}
nav .icon i{

    width: 40px;
    height: 40px;
    border: 1px solid #999999;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color: #999999;
    margin-right: 20px;
    transition: .4s;
    cursor: pointer;

}

nav .icon i:hover{
    background: #0f2f44;
    border-color: #0f2f44 ;
    
    color: #ffc512;
}



/* ====================================
             navbar part end
======================================= */



/* ====================================
             Banner part start
======================================= */


#banner-part{
    background: url(../images/banner.png) no-repeat center;
    background-size: cover;
    padding: 100px 0;
}

#banner-part h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #0f2f44;
}
#banner-part h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #0f2f44;
}

#banner-part h1{
    font-family: 'Abril Fatface', cursive;
    font-size: 80px;
    font-weight: 400;
    color: #0f2f44;
    margin-top: -30px;
}

#banner-part h5{
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: #aab0d8;
    letter-spacing: 15px;
}

#banner-part p{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    width: 470px;
    line-height: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#banner-part a{
    display: inline-block;
    padding: 12px 20px;
    color: #fff;
    background: #8484bf;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    border-radius: 5px;
    border: 1px solid #8484bf;
    transition: .4s;
}
#banner-part a:hover{
    background: #fff;
    color: #8484bf;
}


#banner-part i{
    width: 50px;
    height: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: #8484bf;
    margin-left: 20px;
}
#banner-part i:hover{
    background: #8484bf;
    color:white;
}

/* ====================================
             Banner part 
======================================= */


/* ====================================
             about part 
======================================= */
#about-part{
    margin-top: 100px;
}
#about-part .about_text{
    width: 44%;
    float: left;
   
}
#about-part .about_img{
    width: 56%;
    float: left;
}
#about-part p{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400px;
    color:#0f2f44;
    margin-top: 30px;
   
}

#about-part ul{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color:#0f2f44;
    margin-left: 30px;
   
}


#about-part li{
    margin-top: 25px;
   
}

#about-part a{
    display: inline-block;
    background:#fff;
    padding: 9px 20px;
    border-radius: 5px;
    margin-right: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color:#0f2f44;
    margin-top: 25px;
    transition: .5s;
    -webkit-box-shadow: 0px 4px 14px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 4px 14px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 4px 14px -1px rgba(0,0,0,0.3);
   
}
#about-part a:hover{
    background: #fcc512;
    color:rgb(39, 37, 37);
}

/* ====================================
             about part end
======================================= */


/* ====================================
             Service part start
======================================= */

#service-part{
    background: #f5f5f5;
    margin-top: 100px;
    padding: 50px 0;
}

#service-part .title{
    text-align: center;
}

#service-part .service{
    width: 30%;
    float: left;
    margin: 0 10px;
    position: relative;
    margin-top: 50px;
}


#service-part .service .service_details{
    width: 100%;
 
}

#service-part .service .service_details .service_img{
    width: 25%;
    float: left;
    background: #e9e9e9;
    text-align: center;
    padding: 27.3px 0;
}

#service-part .service .service_details .service_text{
    width: 75%;
    float: left;
    background: #eeeeee;
    padding: 10px;
    box-sizing: border-box;
}

#service-part .service .service_details .service_text h5{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #222222;
}

#service-part .service .service_details .service_text p{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #444444;
}


#service-part .service .overlay{
    width: 0;
    height:100%;
    background: #0f2f44;
    position: absolute;
    top: 0;
    left: 0;
    transition: .5s;
    opacity: 0;
    text-align: center;
}

#service-part .service .overlay img{
    margin-top: 15px;
}

#service-part .service .overlay h5{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    
    
}

#service-part .service:hover .overlay{
    width: 100%;
    opacity: 1;
}
/* ====================================
             Servic part end
======================================= */

/*============================================
        portfolio part start
==============================================*/
#portfolio-part{
    margin-top: 100px;
}

#portfolio-part .title{
    text-align: center;
}

#portfolio-part .portfolio_img{
    width: 30%;
    float: left;
    margin: 0 15px;
    margin-top: 50px;
    position: relative;
}

#portfolio-part .portfolio_img img{
    width: 100%;
}

#portfolio-part .portfolio_img .overlay{
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 10px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #0f2f44;
    -webkit-box-shadow: 0px 4px 14px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 4px 14px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 4px 14px -1px rgba(0,0,0,0.3);
    opacity: 0;
    transition: .4s;
}

#portfolio-part .portfolio_img:hover .overlay{
    opacity: 1;
}

#portfolio-part a{
    display: inline-block;
    background:#fff;
    padding: 10px 15px;
    border-radius: 5px;
    margin-right: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color:#0f2f44;
    margin-top: 50px;
    margin-left: 560px;
    text-transform: capitalize;
    
    -webkit-box-shadow: 0px 4px 50px -22px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 4px 50px -22px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 50px -22px rgba(0,0,0,0.5);

    transition: .5s;

   
}
#portfolio-part a:hover{
    background: #fcc512;
    color:rgb(43, 40, 40);
}

/*============================================
        portfolio part end
==============================================*/

/*============================================
        testimonial part start
==============================================*/
#testimonial-part{
    background: #f5f5f5;
    padding: 60px 0;
    margin-top: 100px;
}

#testimonial-part .title{
    text-align: center;
}

#testimonial-part .testimonial{
    width: 45%;
    float: left;
    margin: 0 15px;
    margin-top: 50px;
    background: #e9e9e9;
}

#testimonial-part .testimonial .testimonial_img{
    width: 40%;
    float: left;
}

#testimonial-part .testimonial .testimonial_img img{
    display: block;
}

#testimonial-part .testimonial .testimonial_text{
    width: 57%;
    float: left;
}

#testimonial-part .testimonial .testimonial_text p{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0f2f44;
    margin: 35px 0;
}

#testimonial-part .testimonial .testimonial_text h5{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #0f2f44;
}

#testimonial-part .testimonial .testimonial_text h6{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0f2f44;
}
/*============================================
        testimonial part end
==============================================*/

/*============================================
        blog part start
==============================================*/
#blog-part{
    margin-top: 100px;
}

#blog-part .title{
    text-align: center;
}

#blog-part .blog{
    width: 30%;
    background: #f5f5f5;
    margin: 0 15px;
    float: left;
    margin-top: 50px;
    padding: 20px;
    box-sizing: border-box;
    transition: .4s;
    border-radius: 5px;
}

#blog-part .blog img{
    width: 100%;
}

#blog-part .blog_text{
    margin-top: 20px;
}

#blog-part .blog_text p{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #777777;
    transition: .4s;
}

#blog-part .blog_text h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #222222;
    margin: 10px 0;
     transition: .4s;
}

#blog-part .blog_text a{
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #777777;
    text-transform: capitalize;
     transition: .4s;
}

#blog-part .blog_text a i{
    margin-left: 10px;
}

#blog-part .blog:hover{
    background: #0f2f44
}

#blog-part .blog:hover .blog_text p{
    color: #fff;
}

#blog-part .blog:hover .blog_text h3{
    color: #fff;
}

#blog-part .blog:hover .blog_text a{
    color: #fff;
}

#blog-part .Browse{
    display: inline-block;
    background:#fff;
    padding: 10px 15px;
    border-radius: 5px;
    margin-right: 50px;
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color:#0f2f44;
    margin-top: 50px;
    margin-left: 560px;
    text-transform: capitalize;
    
    -webkit-box-shadow: 0px 4px 50px -22px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 4px 50px -22px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 50px -22px rgba(0,0,0,0.5);

    transition: .5s;

   
}
#blog-part a:hover{
    /* background: orange; */
    color:rgb(56, 51, 51);
}
#blog-part .Browse:hover{
    background: #fcc512;;
    transition: .5s;
}

/*============================================
        blog part end
==============================================*/


/*============================================
        footer part start
==============================================*/
footer{
    margin-top: 100px;
    background: #f5f5f5;
    padding: 50px 0;

    -webkit-box-shadow: -7px 17px 66px -6px rgba(0,0,0,0.43);
-moz-box-shadow: -7px 17px 66px -6px rgba(0,0,0,0.43);
box-shadow: -7px 17px 66px -6px rgba(0,0,0,0.43);
}

footer .footer_logo{
    width: 21%;
    float: left;
    cursor: pointer;
}

footer .footer_logo p{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0f2f44;
    margin: 20px 0;
}

footer .footer_logo i{
    width: 29px;
    height: 30px;
    border: 1px solid #0f2f44;
    color: #0f2f44;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 20px;
    transition: .4s;
    
}

footer .footer_logo i:hover{
    background: #0f2f44;
    color: #fff;
}

footer .contact{
    width: 24%;
    float: left;
    padding-left: 20px;
}

footer h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
}

footer .contact .box{
    margin-top: 20px;
}

footer .contact .box .icon{
    width: 10%;
    float: left;
    font-size: 24px;
    color: #777777;
    
}

footer .contact .box .icon i{
    margin-top: 7px;
}

footer .contact .box .text{
    width: 90%;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

footer .contact .box p{
    width: 110px;
}

footer .link{
    width: 12%;
    float: left;
}

footer .link ul li{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0f2f44;
    margin-top: 20px; 
    transition: .4s;
    cursor: pointer;
}

footer .link ul li:hover{
    padding-left: 15px;
}

footer .photo{
    width: 38%;
    float: left;
    padding-left: 20px;
}


footer .photo img{
    margin-right: 20px;
    margin-top: 20px;
}

/*============================================
        footer part end
==============================================*/

/*============================================
        footerbtton part start
==============================================*/


.footer_text{
    background: #eae8e8;
    text-align: center;
    padding:15px 0px;
    color:rgb(122, 116, 116)
}

.footer_text a .first{
    margin-right: 20px;
}
.footer_text a  {
    margin-right: 10px;
    margin-left: 10px;
    color:#fcc512;
}



/*============================================
        footerbotton part end
==============================================*/