/*Global Section*/

body{
    
   font-family: 'Roboto', sans-serif;
}

h1,h2,h3,h4,h5,h6{

font-family: 'Source Sans Pro', sans-serif;
   
}

p{
    margin-bottom: 0;
}


/*Header Section CSS*/

header{
    background: url(../images/bg1.png);
    background-position: center;
    background-size: cover;
    min-height: 100vh;
    padding: 20px 0;
}

.navbar-nav .nav-item .nav-link{
    color: #fff;
    margin-left: 10;
    margin-left: 25px;
    position: relative;
}

.navbar .nav-item .nav-link::after{

content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background: #fb414e;
transition: 0.4s linear;
}

.navbar .nav-item .nav-link::before{

content: "";
position: absolute;
width: 0;
height: 2px;
top: 0;
right: 0;
background: #fb414e;
transition: 0.4s linear;
}

.navbar .nav-item.active .nav-link{
        color: #fff;

}

.navbar .nav-item.active .nav-link::after{
    content: "";
    position: absolute;
    width:45%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #fb414e;
    transition: 0.4s linear;
}

.navbar .nav-item.active .nav-link::before{
    content: "";
    position: absolute;
    width:45%;
    height: 2px;
    top: 0;
    right: 0;
    background: #fb414e;
    transition: 0.4s linear;
}


.navbar .nav-item .nav-link:hover{
    color: #fff;
}


.navbar .nav-item .nav-link:hover::after{
    width: 45%
}

.navbar .nav-item .nav-link:hover::before{
    width: 45%

}


header .hero-area{
    text-align: center;
    color: #fff;
    padding: 7% 0;
}

header .hero-area h1{
    font-size: 52px;
    font-weight: 900;
    margin-bottom: 40px;
    padding: 0 10%;
}

header .hero-area p{
    margin-bottom: 50px;
    padding: 0 20%;
}

header .hero-area a{
    text-decoration: none;
    color: #fff;
}


header .hero-area .btn-cta{
    border: 1px solid #fb414e;
    background: #fb414e;
    padding: 10px 40px;
    margin: 0 10px;
    display: inline-block;
    border-radius: 1px;
}

header .hero-area .btn-service{
    border: 1px solid #fb414e;
    padding: 10px 30px;
    margin: 0 10px;
    display: inline-block;
    border-radius: 1px;
}

header .hero-area .btn-service:hover{
    background: #fb414e;
    transition: 0.4s linear;
}


/*Service Section CSS*/

.service{
    padding: 5% 0;
}

.service .content{
    background: #202b30;
    color: #fff;
    padding: 20% 10%;
    z-index: 1;
    margin-top: -40%;
    position: relative;
}

.service .content::after{
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    top: 0;
    left: 0;
    background: rgba(251, 65, 78, .7);
    transition: 0.4s linear;
    
}

.service .content::before{
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    bottom: 0;
    right: 0;
    background: rgba(251, 65, 78, .7);
    transition: 0.4s linear;
    
}



.service .content:hover::after{
    width: 100%;
    transition: 0.4s linear;
}


.service .content:hover:before{
    width: 100%;
    transition: 0.4s linear;
}



.service .content img{
    margin-bottom: 40px;
}

.service .content h6{
    margin-bottom: 50px;
    position: relative;
}

.service .content h6::after{
    content: "";
    position: absolute;
    width: 20%;
    height: 3px;
    bottom: -28px;
    left: 0;
    background: #fff;
}



.service .content p{
    font-size: 14px;
    line-height: 1.7;
}


.service .hero-area{
    padding: 7% 0;
    text-align: center;
}

.service .hero-area h6{
}


.service .hero-area p{
    margin-bottom: 10px;
    line-height: 1.7;
    padding: 0 20%;
    color: #838383;
    font-size: 14px;
}

.service .hero-area h2{
    font-size: 52px;
    font-weight: bold;
    margin-bottom: 25px;
}

.service .hero-area h2 span{
    color: #fb414e;
}


.service .box{
    text-align: center;
    padding: 0 5%;
    margin-bottom: 10%;
}

.service .box img{
    margin-bottom: 15px;
}

.service .box h4{
    margin-bottom: 15px;
    font-size: 26px;
}

.service .box p{
    line-height: 1.7;
    color: #838383;
}


/*Business Plan CSS*/

.business-plan{
    background: #202b30;
    padding: 5% 0;
}

.business-plan .hero-area{
    color: #fff;
    padding: 5% 0;
    padding-left: 10%;
}

.business-plan .hero-area h3{
    font-size: 36px;
    margin-bottom: 30px;
}

.business-plan .hero-area p{
    padding-right: 15%;
    line-height: 1.7;
    margin-bottom: 40px;
}

.business-plan .hero-area a{
    text-decoration: none;
    color: #fff;
    border: 1px solid;
    padding: 5px 30px;
    display: inline-block;
}

.business-plan .hero-area .btn-cta{

    border: 1px solid;
    padding: 10px 40px;
    display: inline-block;
    border-radius: 1px;

}

.business-plan .hero-area .btn-cta:hover{

    border: 1px solid #fb414e;
    background-color: #fb414e;
    transition: 0.4s linear;
}



.business-plan .img-box{
    padding: 5% 10%;
}


/*Service Type CSS*/

.service-type{
    background: #eaeaea;
    padding: 80px 0;
}

.service-type .service-box{
    padding: 10% 0%;
}

.service-type .service-box h6{
    margin-bottom: 15px;
    color: #1f1f1f;
}

.service-type .service-box p{
    font-size: 14px;
    color: #838383;
}

.service-type .hero-area{
    padding: 20px 10px;
}

.service-type .hero-area h3{
    font-size: 38px;
    color: #1f1f1f;
    margin-bottom: 20px;
}

.service-type .hero-area p{
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.7;
}


/*Gallery Section CSS*/

.gallery{
    padding: 80px 0;
}


.gallery .nav .nav-item{}

.gallery .nav .nav-item a{}

.gallery .nav .nav-item .nav-link{
    color: #a4a4a4;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    margin-left: 10px;
}


.gallery .nav .nav-item .nav-link:hover{
    color: #1f1f1f;
    transition: 0.4s linear;
}


.gallery .nav .nav-item .nav-link::after{
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #1f1f1f;
    transition: all 0.4s;
}

.gallery .nav .nav-item .nav-link::before{
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0;
    background-color: #1f1f1f;
    transition: all 0.4s;
}

.gallery .nav .nav-item.active .nav-link::after{
    content: "";
    position: absolute;
    width: 45%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #1f1f1f;
    transition: all 0.4s;
}

.gallery .nav .nav-item.active .nav-link::before{
    content: "";
    position: absolute;
    width: 45%;
    height: 2px;
    bottom: 0;
    right: 0;
    background-color: #1f1f1f;
    transition: all 0.4s;
}

.gallery .nav .nav-item .nav-link:hover::after{
    width: 45%;

}

.gallery .nav .nav-item .nav-link:hover::before{
    width: 45%;
}


.gallery .showcase{
    padding: 2%;
}

.gallery .img-box{
    margin: 5px;
    overflow: hidden;
}

.gallery .img-box:hover img{
    transform: scale(1.2);
    transition: 0.4s linear;

}


/*Client Section CSS*/

.client{
    padding-bottom: 100px;
}

.client .text-area{
} 

.client .text-area h3{
    font-size: 42px;
    color: #1f1f1f;
    margin-bottom: 20px;
} 

.client .text-area p{
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 30px;
    color: #838383;
} 

.client .text-area a{
    text-decoration: none;
    color: #838383;
} 

.client .text-area .btn-cta{
    border: 1px solid #1f1f1f;
    border-radius: 1px;
    display: inline-block;
    padding: 10px 40px;
}



.client .video{

    text-align: center;
}

.client .video .box{
    position: relative;
}

.client .video .box img{}

.client .video .play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.client .video .play-icon img{}


/*Agency Section CSS*/

.agency{
    background: #202b30;
    padding: 80px 0;
}

.agency .agency-logo{
    padding: 0 10%;
}

.agency .agency-logo .logo-box1{
    padding-top: 10%;
    text-align: center;
}

.agency .agency-logo .logo-box{
    text-align: center;
    margin-bottom: 25%;
}


.agency .agency-logo .logo-box img{}

.agency .hero-area{
    text-align: right;
    color: #fff;
    padding: 5% 0;
}

.agency .hero-area h3{
    font-size: 42px;
    margin-bottom: 25px;
}

.agency .hero-area p{
    font-size: 14px;
    line-height: 1.7;
    padding-left: 7%;
}



/*Features CSS*/

.features{
    background: url(../images/features-img.png);
    background-position: center;
    background-size: cover;
    padding: 80px 0;
}

.features .hero-area{}

.features .hero-area h3{
    font-size: 42px;
    margin-bottom: 30px;
    color: #1f1f1f;
}

.features .hero-area p{
    font-size: 14px;
    color: #838383;
    line-height: 1.7;
    margin-bottom: 30px;
}

.features .box{}

.features .box img{
    margin-bottom: 10px;
}

.features .box h6{
    color: #5e5e5e;
    margin-bottom: 15px;
}

.features .box p{
    color: #838383;
    font-size: 14px;
    line-height: 1.7;
}



/*Contact CSS*/

.contact{
    padding: 80px 0;
}

.contact .hero-area{
    text-align: right;
    padding: 0 10%;
}

.contact .hero-area h3{
    font-size: 42px;
    margin-bottom: 20px;
}

.contact .hero-area p{
    font-size: 14px;
    color: #838383;
    margin-bottom: 20px;
    line-height: 1.7;
}

form{}

form .form-control{
    margin-bottom: 20px;
    border-radius: 0;
    color: black;
    border: 1px solid;
}

form .btn-submit{
    width: 100%;
    border: 1px solid #fb414e;
    background: #fb414e;
    color: #fff;
    padding: 10px;
    margin-top: 10px;
}


/*Footer CSS*/

footer{
    padding: 50px 0;
    background: #202b30;
}

footer .bottom-contact{
    color: #fff;
}

footer .bottom-contact img{
    margin-bottom: 20%;
}

footer .bottom-contact h6{
    margin-bottom: 20px;
}

footer .bottom-contact p{
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20%;
}


footer .bottom-contact .nav{
    margin-left: 0;
}

footer .bottom-contact .nav .nav-item{}

footer .bottom-contact .nav .nav-item a{}


footer .bottom-contact .nav .nav-item .nav-link{
    padding-left: 0;
    margin-right: 10px;

}

footer .bottom-contact .nav .nav-item .nav-link i{
    color: #fb414e;
}


footer .bottom-nav{}

footer .bottom-nav .nav{
    
}


footer .bottom-nav .nav .nav-item .nav-link{
    color: #fff;
    padding-right: 0;
    margin-right: 16px;
}

footer .bottom-nav p{
    color: #fff;
    float: right;
}

footer .bottom-nav .input-group{
    width: 80%;
    }

footer .bottom-nav .input-group .form-control{
   }

footer .bottom-nav .input-group .btn{
    color: #fff;
    background: #fb414e;
    border: 1px solid #fb414e;
}

footer .bottom-nav p{
    margin-top: 10%;
    color: #586165;
}

footer .bottom-nav h6{
    margin-top: 16%;
    color: #586165;
    text-align: right;
}





/*Responsive CSS*/

@media (min-width: 0px ) and (max-width: 575px ){

    /*Navbar Responsiveness*/

.navbar .nav-item .nav-link::after{
    content: unset;
}

.navbar .nav-item .nav-link::before{
    content: unset;

}

.navbar .nav-item.active .nav-link::after{
    content: unset;

}

.navbar .nav-item.active .nav-link::before{
    content: unset;

}

.navbar-nav .nav-item .nav-link {
     margin-left:0; 
   
}



    /*Header Responsiveness*/

 header .hero-area {
    padding: 15% 0;
}

header .hero-area h1 {
    font-size: 26px;
    margin-bottom: 40px;
    padding: 0 10%;
}

header .hero-area p {
    margin-bottom: 40px;
    padding: 0 5%;
}

header .hero-area .btn-cta {
    margin: 15px 10px;

}


/*Service Responsiveness*/

.service .content {
    padding: 15% 10%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.service .hero-area h2 {
    font-size: 32px;
    margin-bottom: 25px;
}

.service .hero-area p {
    margin-bottom: 20px;
    padding: 0 5%;

}

/*Business Plan Responsiveness*/

.business-plan .hero-area {
     padding-left: 0;
    text-align: center;
}

.business-plan .hero-area p {
     padding-right: 0; 

}

.business-plan .hero-area h3 {
    font-size: 30px;
}

.business-plan .img-box {
     padding: 0%; 
     text-align: center;
}

.business-plan .img-box img{

    margin: 5% 0;

}


/*Service Type Responsiveness*/

.service-type {
    padding: 20px 0;
    text-align: center;
}

.service-type .service-box {
    padding: 5% 0%;
}

.service-type .hero-area {
    padding: 10px 0px;
}

.service-type .hero-area h3 {
    font-size: 30px;
}

.service-type .hero-area p {
    margin-bottom: 15px;

}

/*Gallery And Clint Responsiveness*/

.gallery {
    padding: 50px 0;
}

.gallery .nav .nav-item .nav-link {
    margin-left: 0px;
}

.gallery .img-box {
    margin: 5px;
    text-align: center;
}

.client {

    padding-bottom: 50px;
}

.client .text-area {
    text-align: center;
    margin-bottom: 10%;
}

.client .text-area h3 {
    font-size: 32px;
}


/*Agency Responsiveness*/

.agency {
    padding: 40px 0;
}

.agency .agency-logo {
    text-align: center;
}

.agency .agency-logo .logo-box1 {
     padding-top: 0; 
    margin-bottom: 20px;
}

.agency .agency-logo .logo-box {
    margin-bottom: 15%;
}

.agency .hero-area {
    text-align: center;
    padding-bottom: 0;
}

.agency .hero-area h3 {
    font-size: 30px;
}

.agency .hero-area p {
     padding-left: 0;
     padding-bottom: 0;
}


/*Features Responsiveness*/

.features {
    padding: 50px 0;
}

.features .hero-area {
    text-align: center;
}

.features .hero-area h3 {
    font-size: 32px;
}

.features .hero-area p {
    margin-bottom: 30px;
}

.features .box {
    text-align: center;
}

.features .box img {
    margin-bottom: 10px;
}

.features .box p {
    margin-bottom: 30px;
}

.contact {
    padding: 50px 0;
}

.contact .hero-area {
    text-align: center;
    padding: 0 5%;
}

.contact .hero-area h3 {
    font-size: 30px;
}


footer .bottom-contact {
    text-align: center;
}

footer .bottom-contact img {
    margin-bottom: 5%;
}

footer .bottom-nav p {
    margin-top: 2%;
    color: #586165;
    float: none;
    text-align: center;
}

footer .bottom-contact p {
    margin-bottom: 5%;
}

footer .bottom-nav .input-group {
    width: 80%;
    margin: 0 auto;
}

footer .bottom-nav h6 {
    margin-top: 5%;
    color: #586165;
    text-align: center;
}

}


@media (min-width: 576px ) and (max-width: 767px ){

    /*Navbar Responsiveness*/

.navbar .nav-item .nav-link::after{
    content: unset;
}

.navbar .nav-item .nav-link::before{
    content: unset;

}

.navbar .nav-item.active .nav-link::after{
    content: unset;

}

.navbar .nav-item.active .nav-link::before{
    content: unset;

}

.navbar-nav .nav-item .nav-link {
     margin-left:0; 
   
}



    /*Header Responsiveness*/


 header .hero-area {
    padding: 10% 0;
}

header .hero-area h1 {
    font-size: 30px;
    margin-bottom: 40px;
    padding: 0 5%;
}

header .hero-area p {
    margin-bottom: 40px;
    padding: 0 5%;
}

.service .content {
    padding: 15% 10%;
    margin-top: 0%;
    margin-bottom: 5%;
}

.service .hero-area h2 {
    font-size: 32px;
}


/*Business Plan Responsiveness*/

.business-plan .hero-area {
     padding-left: 0;
    text-align: center;
}

.business-plan .hero-area p {
     padding-right: 0; 

}

.business-plan .hero-area h3 {
    font-size: 32px;
}

.business-plan .img-box {
     padding: 0%; 
     text-align: center;
}

.business-plan .img-box img{

    margin: 5% 0;

}

/*Service Type Responsiveness*/

.service-type {
    padding: 20px 0;
    text-align: center;
}

.service-type .service-box {
    padding: 5% 0%;
}

.service-type .hero-area {
    padding: 10px 0px;
}

.service-type .hero-area h3 {
    font-size: 30px;
}

.service-type .hero-area p {
    margin-bottom: 15px;

}

/*Gallery And Clint Responsiveness*/

.gallery {
    padding: 50px 0;
}

.gallery .nav .nav-item .nav-link {
    margin-left: 0px;
}

.gallery .img-box {
    margin: 5px;
    text-align: center;
}

.client {

    padding-bottom: 50px;
}

.client .text-area {
    text-align: center;
    margin-bottom: 10%;
}

.client .text-area h3 {
    font-size: 36px;
}

.agency .hero-area {
    text-align: center;
    
}

.agency .hero-area h3 {
    font-size: 32px;
}

.agency .hero-area p {
     padding-left: 0;
     padding-bottom: 0;
}


/*Features Responsiveness*/

.features .hero-area {
    padding-right: 20%;
}

.features .hero-area h3 {
    font-size: 36px;
}

.features .box {
    padding-right: 20%;
}

.contact {
    padding: 50px 0;
}

.contact .hero-area {
    text-align: center;
    padding: 0 5%;
}

.contact .hero-area h3 {
    font-size: 40px;
}

footer .bottom-contact {
    text-align: center;
}

footer .bottom-contact p {
    margin-bottom: 5%;
}

footer .bottom-contact .nav .nav-item .nav-link {
     margin-right:0; 
}

footer .bottom-nav p {
    margin-top: 5%;
    text-align: center;
    float: none;
}

footer .bottom-nav .input-group {
    margin: 0 auto;
}

footer .bottom-nav h6 {
    margin-top: 0;
    text-align: center;
}

}


@media (min-width: 768px ) and (max-width: 991px ){

    /*Navbar Responsiveness*/

.navbar .nav-item .nav-link::after{
    content: unset;
}

.navbar .nav-item .nav-link::before{
    content: unset;

}

.navbar .nav-item.active .nav-link::after{
    content: unset;

}

.navbar .nav-item.active .nav-link::before{
    content: unset;

}

.navbar-nav .nav-item .nav-link {
     margin-left:0; 
   
}



    /*Header Responsiveness*/

 header .hero-area {
    padding: 10% 0;
}

header .hero-area h1 {
    font-size: 42px;
    margin-bottom: 40px;
    padding: 0 5%;
}

header .hero-area p {
    margin-bottom: 40px;
    padding: 0 15%;
}


.service .hero-area h2 {
    font-size: 36px;
}



.business-plan .hero-area {
     padding-left: 0; 
}

.business-plan .hero-area h3 {
    font-size: 32px;
}

.business-plan .hero-area p {
     padding-right: 0; 
    font-size: 14px;
    
}

.business-plan .img-box {
     padding: 27% 0; 
     text-align: center;
}

.service-type {
    padding: 20px 0;
    text-align: center;
}

.service-type .service-box {
    padding: 5% 10%;
}

/*Gallery And Clint Responsiveness*/

.gallery {
    padding: 50px 0;
}

.gallery .nav .nav-item .nav-link {
    margin-left: 0px;
}

.gallery .img-box {

    text-align: center;
}

.client {

    padding-bottom: 50px;
}

.client .text-area {
    text-align: center;
    margin-bottom: 10%;
}

.client .text-area h3 {
    font-size: 38px;
}

.agency .hero-area {
    text-align: center;
    padding: 0 10%;
}

.agency .hero-area h3 {
    font-size: 36px;
}

.agency .hero-area p {
     padding-left: 0;
     padding-bottom: 0;
}

.features .hero-area h3 {
    font-size: 36px;
}

.contact {
    padding: 50px 0;
}

.contact .hero-area {
    text-align: center;
    padding: 0 5%;
}

.contact .hero-area h3 {
    font-size: 40px;
}

footer .bottom-contact {
    text-align: center;
}

footer .bottom-contact p {
    margin-bottom: 5%;
}

footer .bottom-contact .nav .nav-item .nav-link {
     margin-right:0; 
}

footer .bottom-nav p {
    margin-top: 5%;
    text-align: center;
    float: none;
}

footer .bottom-nav .input-group {
    margin: 0 auto;
}

footer .bottom-nav h6 {
    margin-top: 0;
    text-align: center;
}

}


@media (min-width: 991px ) and (max-width: 1199px ){

     /*Header Responsiveness*/

header{
    height: 100%;
}

 header .hero-area {
    padding: 10% 0;
}

header .hero-area h1 {
    font-size: 50px;
    margin-bottom: 40px;
    padding: 0 5%;
}

header .hero-area p {
    margin-bottom: 40px;
    padding: 0 25%;
}

.business-plan .img-box {
    padding: 9% 0;
}

.service-type {
    padding: 60px 0;
}

.service-type .hero-area {
    padding: 5px 10px;
}

.service-type .hero-area p {
    margin-bottom: 20px;
    
}

footer .bottom-nav h6 {
    margin-top: 17%;
}
}