@import url("font-awesome.min.css");
@import url("vegas.css");
@import url("swiper.min.css");
@import url("preloader.css");
@import url("predefind-classes.css");
@import url("header.css");
@import url("about-us.css");
@import url("careers.css");
@import url("designing.css");
@import url("web-developement.css");
@import url("digital-host-domain.css");
@import url("testimonial.css");
@import url("our-services.css");
@import url("navigation-bar.css");
@import url("site-global.css");
@import url("scroll-top.css");
@import url("footer.css");


/*
---------------------------------------------------
Home Page - Our Details
---------------------------------------------------
*/


#our-details .company-main-details h4
{
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 1px;
}

#our-details .company-main-details p
{
    text-align: justify;
}

@media(max-width:768px)
{
    #our-details .company-main-details h4{padding-top:20px;}
}

/*
=====================================================
Home Page - Our Services Section
=====================================================
*/

#our-services .bg-services
{
    background: url("../images/bg-service.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 600px;
    padding: 100px 0px;
}

#our-services .service-2 .service-box
{
    width: 100%;
    border: 1px solid #dbe8fb;
    padding: 50px 15px 25px;
    position: relative;
    text-align: center;
    background-color: #fff;
    height: 400px;
}

#our-services .service-2 .service-box1 :hover{background-color:#57a0df;}
#our-services .service-2 .service-box2 :hover{background-color:#fba982;}
#our-services .service-2 .service-box3 :hover{background-color:#caff79;}
#our-services .service-2 .service-box4 :hover{background-color:#e7bb72;}

#our-services .service-2 .service-box{cursor: pointer;}
#our-services .service-2 .service-box .service-icon
{
    position: absolute;
    text-align: center;
    width: 86px;
    top: -42px;
    left: 33%;
    background: none;
}

#our-services .service-2 .service-box .service-info h4
{
    text-transform: uppercase;
    padding: 10px 0px;
}

#our-services .service-2 .service-box .service-info p
{
    padding: 5px 0px;
    height: 175px;
    overflow: hidden;
}

#our-services .service-2 .service-box1 .service-info a.btn
{
    border: solid 1px #337ab7;
    color: #337ab7;
}

#our-services .service-2 .service-box2 .service-info a.btn
{
    border: solid 1px #f7641d;
    color: #f7641d;
}

#our-services .service-2 .service-box3 .service-info a.btn
{
    border: solid 1px #61a100;
    color: #61a100;
}

#our-services .service-2 .service-box4 .service-info a.btn
{
    border: solid 1px #ff9e00;
    color: #ff9e00;
}

@media(max-width:992px)
{
    #our-services .service-2 .service-box{margin: 40px 0px;height: 380px;}
    #our-services .service-2 .service-box .service-info p{height: 160px;}
    #our-services .service-2 .service-box{margin: 50px 0px;}
}

@media(max-width:768px)
{
    #our-services .service-2 .service-box{margin: 40px 0px;height: 340px;}
    #our-services .service-2 .service-box .service-info p{height: 100px;}
    #our-services .service-2 .service-box .service-icon{left:44%;}
}
@media(max-width:480px)
{
    #our-services .service-2 .service-box{margin: 40px 0px;height: 350px;}
    #our-services .service-2 .service-box .service-icon{left:40%;}
}

@media(max-width:360px)
{
    #our-services .service-2 .service-box{margin: 40px 0px;height: 350px;}
    #our-services .service-2 .service-box .service-icon{left:35%;}
}


/*
=====================================================
Why Choose Us Css Code.
=====================================================
*/

#why-choose-us .details p
{
    padding-bottom: 10px;
    text-align: justify;
}

#why-choose-us  .why-choose-box .choose-box
{
    border: 1px solid #ccc;
    padding: 10px 20px;
    min-height: 190px;
}

#why-choose-us  .why-choose-box .choose-box p
{
    padding: 10px;
    text-align: justify;
}

@media(max-width:768px)
{
    #why-choose-us  .why-choose-box .choose-box{margin-bottom: 20px;}
    #why-choose-us .details .details-image{padding-top: 30px;}
}

@media(max-width:540px)
{
    #why-choose-us  .why-choose-box .choose-box{min-height: 240px;}
}

@media(max-width:400px)
{
    #why-choose-us  .why-choose-box .choose-box{min-height: 250px;}
}
/*
=====================================================
User Experiences Section ( Background Video )
=====================================================
*/

/*  Video Css Code */
#video-container 
{
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
}

/* On Video Overlay */
#video-container .overlay 
{
   height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000;
    opacity: 0.3;
}


/* Content On Video Css Code */

#user-experience{position: relative;}
#user-experience .content
{
    position: absolute;
    top:30%;
    left:9%;
    width: 80%;
    text-align: center;
    z-index:1;
}

/* main Title on Video  */

#user-experience .content h2
{
    color: #fff;
}

/* sub-Title on Video  */
#user-experience .content h5
{
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*  On Video Underline on Subtitle */
#user-experience hr
{
    text-align: center;
    width:2%;
    margin: auto;
    border: 1px solid #fff;
}

/* Carousel info and css code*/
#myCarousel {padding: 40px 0px;}

#user-experience .experience-info h5
{
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0x;
}

#user-experience .experience-info p
{
    color: #fff;
    padding: 20px 0px;
}

/*
=====================================================
Mobile First Approach Section Css Code.
=====================================================
*/


#mobile-first{border-bottom: 1px solid #d2dde1}

#mobile-first .mobile-image img{margin: auto;}

#mobile-first .mobile-approach-info
{
    padding: 20px 0px;
}
#mobile-first .mobile-approach-info h2
{
    padding-bottom: 20px;    
}

#mobile-first .mobile-approach-info h4
{
    width: 80%;
    margin: auto;
    padding: 10px;
}

#mobile-first .mobile-approach-info h4.text-responsive
{
    font-family: font-head;
    font-style: italic;
}

#mobile-first .mobile-approach-info h5
{
    font-weight: bold;
    word-spacing: 1px;
    
}

#mobile-first .mobile-approach-info hr
{
    text-align: center;
    width:2%;
    margin: auto;
    border: 1px solid #000;
}

#mobile-approach-carousel{padding-top:20px; padding-bottom: 30px;}

#mobile-approach-carousel h5{padding: 10px;}
#mobile-approach-carousel p{width: 80%;margin: auto;height: 100px;}
#mobile-approach-carousel .carousel-indicators li{background-color: #ccc;}
#mobile-approach-carousel .carousel-indicators li:hover{background-color: #777;}
#mobile-approach-carousel .carousel-indicators .active{background-color: #777;}


/*
=====================================================
Counter Css Code
=====================================================
*/

#counter {color:#fff;}
#counter .bg-counter {
    background: url('../images/bg-counters.jpg');
    background-repeat:  no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 520px;
}
#counter .bg-counter .overlay
{
    background: rgba(0,0,0,.6);
    min-height: 520px;
}

#counter .main_counter_content .single_counter
{
    background-color: rgba(255,255,255,0.15);
    padding: 20px;
}

#counter .main_counter_content .single_counter i.fa
{
    font-size: 3em;
}
#counter .main_counter_content .single_counter h2{display: inline-block;}
#counter .main_counter_content .single_counter h4
{
    color: #fff;
}

@media(max-width:992px)
{
    #counter .counter{padding-bottom: 50px;}
    #counter .main_counter_content .single_counter{margin: 20px auto;}
}

@media(max-width:768px)
{
    #counter .counter{padding-top: 0px;}
    #counter .main_counter_content .single_counter{margin: 10px auto;}
}



/*
=====================================================
what-doing section Css Code
=====================================================
*/

#what-doing .nav-tab{padding: 0px 0px;}

#what-doing .nav-tab li{background:#fff;padding:10px;margin: 5px auto;}
#what-doing .nav-tab li.active {background-color: gray;}
#what-doing .nav-tab li.active a{background-color: gray;border: 1px dotted #000;}

#what-doing .nav-tab li:hover {background-color: #ccc;transition: 0.5s;}
#what-doing .nav-tab li:hover a{background-color: #ccc;border: 1px dotted #000;transition: 0.5s;}
#what-doing .nav-tab li a 
{
    padding: 5px;
    text-align: justify;
    transition: 0.5s;
    border: 1px dotted transparent;
}

#what-doing .what-info h5
{
    text-align: justify;
    font-weight: bolder;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
#what-doing .what-info p
{
    height: 197px;
    overflow: hidden;
    text-align: justify;
}

@media(max-width:992px)
{
    #what-doing .nav-tab li:first-child{margin: 0px auto;}
}

@media(max-width:768px)
{
    #what-doing .what-info h5{padding-top:20px;}
    #what-doing .what-info p { height: 80px; overflow: hidden;}
}

@media(max-width:480px)
{
    #what-doing .what-info h5{padding-top:20px;}
    #what-doing .what-info p { height: 150px; overflow: hidden;}
}

/*
=====================================================
Profile Card section Css Code
=====================================================
*/


#profile-card
{
    color:#fff;
}
#profile-card .bg-profile
{
    background: url('../images/bg-profile.jpg');
    background-repeat:  no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    min-height: 550px;
}

#profile-card .bg-profile .overlay
{
    background: rgba(0,0,0,.2);
    min-height: 550px;
}

#profile-card .pro-card
{
    background: #262626;
    box-sizing: border-box;
    transition:0.5s;
}

#profile-card .pro-card .img-box
{
    width: 100%;
    overflow: hidden;
}
#profile-card .pro-card .img-box img
{
    width: 100%;
     margin: auto;
    transform-origin: top right;
    transition: 0.9s;
}
#profile-card .pro-card:hover .img-box img
{
    transform: scale(1.1) 
}
#profile-card .pro-card ul
{
    display: flex;
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: 0.5s;
}

#profile-card .pro-card:hover ul
{
    height: 40px;
}
#profile-card .pro-card ul li
{
    width:25%;
    height: 40px;
    background: #fff;
}

#profile-card .pro-card ul li a
{
    display: block;
    line-height: 40px;
    text-align: center;
    color: #262662;
    font-size: 18px;
    border-right: 1px solid rgba(0,0,0,.5);
}

#profile-card .pro-card ul li.facebook:hover
{
    background: #3b5998;
}
#profile-card .pro-card ul li.facebook:hover .fa-facebook
{
    color: #fff;
}

#profile-card .pro-card ul li.google-plus:hover
{
    background:#d34836;
}
#profile-card .pro-card ul li.google-plus:hover .fa-google-plus
{
    color: #fff;
}

#profile-card .pro-card ul li.whatsapp:hover
{
    background: #25D366;
}
#profile-card .pro-card ul li.whatsapp:hover .fa-whatsapp
{
    color: #fff;
}

#profile-card .pro-card ul li.instagram:hover
{
    background: #fb3958;
}
#profile-card .pro-card ul li.instagram:hover .fa-instagram
{
    color: #fff;
}


#profile-card .pro-card ul li:last-child a
{
    border-right:none;
}

#profile-card .pro-card .content
{
    background: #000;
    padding: 20px 10px;
    text-align: center;
}

#profile-card .pro-card .content h4
{
    color:#fff;
}

#profile-card .pro-card .content h5
{
    color:#fff;
}


@media(max-width:992px)
{
    #profile-card .bg-profile .overlay{padding-bottom: 20px;}
    #profile-card .pro-card{margin-bottom: 40px;}
}

@media(max-width:768px)
{
    #profile-card .bg-profile .overlay{padding-bottom: 50px;}
    #profile-card .pro-card{margin: 0px 40px 20px;}
}

@media(max-width:480px)
{
    #profile-card .bg-profile .overlay{padding-bottom: 30px;}
    #profile-card .pro-card{margin: 0px  40px 20px;}
}


/*
=====================================================
Client Testimonial section Css Code
=====================================================
*/


#fade-carousel p {
    width: 80%;
    margin: auto;
    min-height: 80px;
}

#fade-carousel h4
{
    padding-top: 10px;
    font-weight: bolder;
}

@media(max-width:480px)
{
    #fade-carousel p{width: 95%;}
}