Table of Content
--------------------------------------------

1. common css start
2. Top header part start
3. navbar css start
4. bannerpart css star
5. why-choose-us part start 
6. our service part css start
7. about us css start
8. Resent project css start 
9. counter part start
10. testimonial part start
11. pricing part css
12. team start 
13. FAQ css Start
14. blog part css
15. clients part start
16. map class start
17. contactus part start
18. preloader css start

===============================================*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,500,500i');
/* === link end == */

/* ==============================
1. common css start
==================================*/

* {
    margin: 0px;
    padding: 0px;
    outline: 0px;
}

ol,
ul {
    list-style: none;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: 0;
    color: #333;
}

img {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

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

.modal {
    z-index: 9999999999;
}

h1,
h2,
h3,
h4,
h5,
h6,
    {
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 0px;
    line-height: normal;
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0px;
}

.pl {
    padding-left: 0px;
}

h4 {
    font-size: 20px;
}

.btn {
    border-radius: 0px;
}

.clear {
    clear: both;
}

p {
    color: #555;
    margin-bottom: 0px;
}

.slick-list {
    padding: 0px 0px;
}

#about h2,
#gallery h2,
#aboutuspart h2,
#team h2,
#clientpart h2,
#pricing h2,
#latestnewspart h2,
#clientpart h2,
#testimonialpart h2,
#faq h2,
#blog h2,
#contactuspart h2 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 35px;
  
}

/* page Head Css Start */
.page-head{
    background: url(../images/other/all-bg.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}
/* page headf css start */
.page-head {
    position: relative;
    padding: 30px 0px 30px;
   }
   .page-head .overlay{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
   }
  
   .page-head h2 {
    text-align: left;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
   }

   .page-head .breadcrumb {
    background:0 0;
    padding:0;
    text-align: left;
    display: block;
    margin-bottom: 0px;
   }

   .page-head .breadcrumb li {
    display: inline-block;
  }

  .page-head .breadcrumb li span{
    padding: 0px 5px;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
  }

  .page-head .breadcrumb,.page-head .breadcrumb a {
   color:#fff;
   -webkit-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -ms-transition: all linear .3s;
   -o-transition: all linear .3s;
   transition: all linear .3s;
  }

  .page-head .breadcrumb li.active a,
  .page-head .breadcrumb li.active span
  {
    color: #ddd;
  }
  
   .page-head .breadcrumb a:hover {
    text-decoration:none;
    color: #ddd;
   }

   .page-head .breadcrumb>li+li:before {
    color:#fff
   }



/*==========================
common css end
============================*/

/* =============================
2. Top header part start
=============================== */

/* top header start */

.top-header {
    background: #fda12b;
    padding: 12px 0px;
}
#home .contact-info .t-border{
    color: #fff;
}
.contact-info {
    font-size: 16px;
}

.contact-info a {
    color: #fff;
    margin-right: 7px;
    font-size: 19px;
    text-decoration: none;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}
.contact-info p{
    color: #fff;
}
.contact-info a:hover {
    color: #fff;
}

.socal-link {
    text-align: right;
}

.socal-link i {
    color: #fff;
    padding: 0px 5px;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
}

.socal-link i:hover {
    color: #222;
}

.logo-contact-info i {
    font-size: 40px;
    font-weight: bold;
}

.logo-contact-info p,
.logo-contact-info a {
    font-size: 16px;
    color: #444;
}

.logo-contact-info .info p {
    line-height: 24px;
}

.logo-area {
    padding: 24px 0px;
}

.t-border {
    font-size: 16px;
    padding: 0px 10px 0px 0px;
    display: inline-block;
}

.contact-info i {
    font-size: 19px;
    color: #fff;
    margin-right: 7px;
}

.top-btn {
    background: #0054fd;
    color: #fff;
    padding: 15px 25px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.top-btn:hover {
    background: #4285F4;
    color: #fff;
}

/* =============================
 Top header part End
=============================== */

/*=========================
3. navbar css start
===========================*/

.navbar-brand img {
    width: 120px;
}

.navbar {
    padding: 0px;
}
.navigation {
    background: #fff;
}
.navigation .navbar-nav .nav-item {
    padding: 0px;
}

.navigation  .nav-item .nav-link {
    color: #222;
    line-height: 70px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    padding: 12px 10px 12px;
    text-transform: uppercase;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
	letter-spacing: 0.5px;
}

.navigation .nav-item .nav-link.active,
.navigation .nav-item .nav-link:hover{
   color: #4285F4;
}



.navigation.stiky-nav {
    background: #fff;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0;
    animation: nav-stiky .8s;
    z-index: 99;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@keyframes nav-stiky {
    0% {
        top: -80px;
    }
    100% {
        top: 0px;
    }
}


.nav-item.dropdown .dropdown-menu{
display: block;
top: 120%;
opacity: 0;
background: #fff;
position: absolute;
z-index: -99;
visibility: hidden;
-webkit-transition: all linear .3s;
-moz-transition: all linear .3s;
-ms-transition: all linear .3s;
-o-transition: all linear .3s;
transition: all linear .3s;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    top: 100%;
    opacity: 1;
    z-index: 991;
    visibility: visible;
}

 .navbar-nav .dropdown-menu {
    margin-top: 0px !important;
    background: #ffffff;
    border-radius: 0px;
    border: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.15);
    border-top: 4px solid #4285F4;
}

.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item {
    color: #222;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 16px;
    padding: 8px 15px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:last-child{
    border-bottom: 0px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover{
    color: #4285F4;;
    background: #fff;
}
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item  i{
    margin-right: 5px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu. .dropdown-item:focus,
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover
 {
    color: #4285F4;
}

.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item.active{
    color: #4285F4; 
    background: #FFF;
}
.dropdown-toggle::after {
    display: none;
}


.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler {
    border: 0px;
}

.navbar-light .navbar-toggler:focus {
    outline: 0px;
}
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown .dropdown-menu{
display: none;
}
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown .nav-link{
    color: #222;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 16px;
    padding: 8px 15px 8px;
    line-height: 16px;
}
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown .nav-link i{
    margin-right: 7px;
}
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown .nav-link:hover,
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown .nav-link.active
{
    color: #4285F4;
}
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown:hover .dropdown-menu{
    left: 100%;
    top: 0px;
}
.navigation .nav-item.dropdown .nav-item.dropdown.child-dropdown:hover .dropdown-menu{
    display: block;
}

/*===========================
navbar css end
=============================*/

/*============================
4. bannerpart css start
==============================*/

.layer-1-2 {
    margin: 0px 0px 30px;
}
.layer-1-3 {
    margin-top: 150px;
	
}
.layer-1-1 p {
    color: #fda12b;
    font-size: 36px;
	font-weight:600;
    line-height: 34px;
}

.layer-1-2 h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    line-height: 75px;
    text-transform: capitalize;
}

.ready-btn {
    background-color: #4285F4;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    margin-right: 10px;
    margin-top: 30px;
    padding: 15px 36px;
    font-size: 16px;
    border-radius:3px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.intro-area .content{
    padding: 80px 0px 80px;
}
.ready-btn::before{
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(255, 255, 255, 0.15);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.ready-btn:hover::before {
    height: 100%;
}
.ready-btn:hover {
    color: #ffffff;
}


.layer-1-2 .color {
    color: #4285F4;
    font-weight: 900;
}

.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    color: #fff;
    font-size: 30px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    ;
    text-align: center;
    line-height: 36px;
    opacity: 0;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
    left: 10%;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next {
    right: 2%;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    opacity: 1;
}

.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev {
    left: 2%;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    opacity: 1;
}

.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next:hover,
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev:hover {
    color: rgb(219, 219, 219);
    border-color: rgb(219, 219, 219);
}

.intro-carousel .owl-item .layer-1-2 {
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}

.intro-carousel .owl-item .layer-1-1 {
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out .6s;
}

.intro-carousel .owl-item .layer-1-3 {
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}

.intro-carousel .owl-item.active .layer-1-2,
.intro-carousel .owl-item.active .layer-1-1,
.intro-carousel .owl-item.active .layer-1-3 {
    transform: translateY(0);
    opacity: 1;
}

.intro-carousel .owl-item.active .slider-images img {
    transform: scale(1.1);
    transition: 5s;
}

}

.for-s1 .intro-area .main-overly{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}

/*==================================
 bannerpart css end
==================================*/

/*==================================
5. why-choose-us part start 
====================================*/

#choose-us {
    padding: 92px 0px 66px;
}

#choose-us h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 35px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

#choose-us .s-h-p {
    margin-bottom: 46px;
}

.why-choose-us-sec {
    background: #f1f5f9;
}

.why-choose-thumb {
    position: relative;
}

.why-choose-text {
    padding: 22px 15px 26px;
}
.why-choose-text  h3{
    margin-bottom: 18px;
    color: #222;
}
.why-choose-inner {
    text-align: left;
    position: relative;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    border-radius: 6px;
}

.why-choose-inner:hover {
    margin-top: -10px;
}

.why-choose-text h3 a {
    font-size: 24px;
    text-transform: capitalize;
    color: #222;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.why-choose-inner .why-choose-text h3 a,
.why-choose-inner .why-choose-text a,
.why-choose-inner .why-choose-text p {
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.why-choose-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #fff;
    line-height: 80px;
    text-align: center;
    margin: 0px auto;
    left: 0;
    bottom: 0;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}


.why-choose-icon img {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.why-us-button {
    font-weight: 500;
    margin-top: 25px;
    display: inline-block;
}

/*=============================
why-choose-us part end 
===============================*/

/*=============================
6. our service part css start
===============================*/

#servicepart {
    padding: 50px 0px 100px;
}

#servicepart h2 {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 16px;
    
}

#servicepart .s-h-p {
    margin-bottom: 26px;
}

.sarvicecard {
	margin-bottom: 30px;
    transition: 0.3s;
    cursor: pointer;
    display: block;
    padding: 20px 10px;
    border-radius: 5px;
    border: 2px solid #f1f1f1;
    position: relative;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.sarvicecard::after{
    position: absolute;
    content: " ";
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #4285F4;
    opacity: 0;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.sarvicecard:hover {
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.13);
    background: #fcfcfc;
    border: 2px solid #fcfcfc;
}
.sarvicecard:hover::after {
    opacity: 1;
}


.sarvicecard .cardheader {
    text-align: center;
}

.sarvicecard .cardheader img {
    text-align: center;
    display: inline-block
}

.sarvicecard i {
    position: relative;
    margin-top: 15px;
    color: #555;
    text-align: center;
    font-size: 35px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #555;
    border-radius: 50%;
}

.sarvicecard i::after {
    position: absolute;
    content: " ";
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    border: 2px solid #555;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.sarvicecard:hover.sarvicecard i::after {
    width: 100px;
    height: 100px;
    opacity: 1;
}

.contant h4 {
    font-size: 20px;
    font-weight: 500;
    margin: 10px 0px;
}

.contant p {
    font-size: 16px;
    font-weight: 400;
    margin: 0px;
}

a.btn-detail {
    background: #222;
    color: #f1f1f1;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

a.btn-detail:hover {
    background: #4285F4;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.slick-dots li {
    float: left;
    display: inline-block;
}

.slick-dots li.slick-active button {
    background: #4285F4;
    border: 1px solid #4285F4;
}

.slick-dots li button {
    font-size: 0;
    width: 30px;
    height: 5px;
    border: 1px solid #cecece;
    margin-right: 5px;
    background: #f1f1f1;
}

/*===============================
our service part css end
====================================*/

/*===========================
7. about us css start
============================= */

#about {
    padding: 100px 0px 100px;
    background: whitesmoke;
}

#about h2 {
    margin-bottom: 40px;
}

#about h4 {
    margin-bottom: 26px;
    font-size: 30px;
    
    font-weight: 700;
}

#about .about-f-p {
    margin-bottom: 21px;
}

#about .about-img {
    position: relative;
}

#about .about-img .about-video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #4285F4;
    opacity: .6;
}

#about .about-video {
    position: absolute;
    width: 70px;
    height: 70px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
}

#about .about-video i {
    color: #4285F4;
    font-size: 25px;
    line-height: 70px;
}

.about-video:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -10px;
    top: -10px;
    display: block;
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: scale(0.25);
        opacity: .25;
    }
    25% {
        transform: scale(0.5);
        opacity: .50;
    }
    50% {
        transform: scale(0.75);
        opacity: .75;
    }
    100% {
        transform: scale(1);
        opacity: .0;
    }
}

.about-links {
    margin-top: 36px;
}

.about-links .link {
    background-color: #4285F4;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    margin-right: 10px;
    padding: 15px 36px;
    font-size: 16px;
    border-radius:3px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.about-links .link::before{
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(255, 255, 255, 0.15);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.about-links .link:hover::before {
    height: 100%;
}

/*===========================
about us css end
============================= */

/*================================
8. Resent project css start 
=================================*/

#gallery {
    padding: 50px 0px 25px;
}

#gallery h2 {
    margin-bottom: 16px;
}

#gallery .s-h-p {
    margin-bottom: 36px;
}

.portfolio-area {
    z-index: 999;
    overflow: hidden;
}

.protfolio-filter {
    text-align: center;
    padding: 10px 0px;
    margin-bottom: 30px;
}

.protfolio-filter {
    text-align: center;
}

.protfolio-filter li {
    list-style: none;
    margin: 0 0px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
}

.protfolio-filter li {
    background-color: #fda12b;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    margin-right: 5px;
    padding: 10px 30px;
    font-size: 16px;
    border-radius:3px;
    
    position: relative;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.protfolio-filter li::before{
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(255, 255, 255, 0.15);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.protfolio-filter li:hover::before {
    height: 100%;
}

.protfolio-filter li.active::before {
    height: 100%;
}

.portfolio-item {
    padding: 0 10px;
    margin-bottom: 20px;
}

.item-thumbnail {
    position: relative;
    overflow: hidden;
	border-radius:4px;
}

.item-thumbnail::before {
    background-color: rgba(35, 79, 184, 0.7);
    top: 0;
    left: 0;
    content: " ";
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    z-index: 1;
}

.portfolio-item:hover .item-thumbnail::before {
    opacity: 1;
}

.item-thumbnail img {
    width: 100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    overflow: hidden;
}

.portfolio-item:hover .item-thumbnail img {
    transform: scale(1.2);
}

.item-thumbnail .p-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: inline-block;
}

.item-thumbnail .p-link a {
    border: 2px solid #fff;
    color: #fff;
    width: 45px;
    height: 45px;
    line-height: 43px;
    text-align: center;
    font-size: 16px;
    border-radius: 100%;
    opacity: 0;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
    display: inline-block;
    margin: 5px;
}

.item-thumbnail a i {
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.item-thumbnail a:hover {
    background: #fff;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
}

.item-thumbnail a:hover i {
    color: #333
}

.portfolio-item:hover .item-thumbnail a {
    opacity: 1;
}

.portfolio-category>li {
    display: inline-block;
    margin-right: 10px;
    position: relative;
}

.portfolio-category>li::before {
    content: ",";
    position: absolute;
    right: -5px;
}

.portfolio-category>li:last-child::before {
    display: none;
}

.portfolio-category a {
    color: #3a3a3a;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: capitalize;
}

.portfolio-category a:hover {
    color: #EF4836;
}

.hidden {
    display: none;
}

.load-more {
    margin-top: 20px;
}

.mix {
    display: none;
}

/*===========================
Resent project css end 
=============================*/

/*================================
9. counter part start
==================================*/

#counterpart {
    padding: 131px 0px 141px;
    background: url('../images/counter/bg.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.count-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #4285F4;
    opacity: .8;
}

#counterpart p {
    font-size: 50px;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    color: #fff;
}

#counterpart h5 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

/*===============================
counter part end
====================================*/

/*==============================
10. testimonial part start
=================================*/

#testimonialpart {
    background: #fff;
    padding: 92px 0px 162px;
    position: relative;
}

#testimonialpart h2 {
    margin-bottom: 16px;
}
#testimonialpart .slick-prev,
#testimonialpart .slick-next
 {
    bottom: -80px;
}

#testimonialpart .s-h-p {
    margin-bottom: 27px;
}

#testimonialpart .container {
    position: inherit;
    z-index: 2;
}

.testimonial {
    background: #fff;
    padding: 27px 20px 17px;
    margin-left: 15px;
    border-radius: 5px;
    cursor: pointer;
    margin: 0px 15px;
    position: relative;
    border: 2px solid #f1f1f1;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.testimonial img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: auto;
    border: 7px solid #f1f1f1;
}

.testimonial h6 {
    font-size: 20px;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 6px;
}

.testimonial h5 {
    font-size: 16px;
    font-weight: 400;
}


.testimonial i {
    position: absolute;
    right: 20px;
    bottom: 24px;
    font-size: 60px;
    color: #f1f1f1;
    z-index: 1;
    transform: rotate(181deg);
}
.testimonial p{
    position: inherit;
    z-index: 9;
    margin-top: 25px;
}






/*=================================
testimonial part end
===================================*/

/* ========================== 
11. pricing part css
=========================== */

#pricing {
    padding: 92px 0px 92px;
    background: whitesmoke;
}

.price {
    margin-top: 40px;
}

#pricing h2 {
    margin-bottom: 16px;
}

#pricing .s-h-p {
    margin-bottom: 6px;
}

.price-heading h2 {
    font-size: 35px;
    font-weight: 500;
    margin-top: 50px;
    margin-bottom: 24px;
}

.price-heading p {
    font-size: 14px;
    padding: 0 275px;
    margin-bottom: 0;
}

.pricing-category {
    background: #fff;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.13);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    transition: all linear .3s;
}

.price-head h3 {
    padding-top: 25px;
    padding-bottom: 17px;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

.price-details {
    padding-top: 22px;
}

.price-details p {
    color: #444444;
    font-size: 16px;
    line-height: 30px;
}

.join h4 {
    padding: 23px 0px 30px;
    display: block;
    text-align: center;
}

.join a {
    background-color: #4285F4;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    font-weight: 400;
    margin-right: 10px;
    padding: 15px 36px;
    font-size: 16px;
    border-radius:3px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.join a::before{
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(255, 255, 255, 0.15);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.join a:hover::before {
    height: 100%;
}






.price-rate {
    width: 100%;
    background: #4285F4;
    padding: 5px 0px 19px;
}

.price-rate p {
    color: #fff;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
}

.price-rate .rate-p {
    font-size: 14px;
    padding-top: 0;
}


/*=============================
pricing area end 
===============================*/

/*===============================
12. team start 
================================*/

#team {
    padding: 91px 0px 75px;
}
#team.teampage{
    padding: 91px 0px 95px;
}
#team.teampage .s-h-p {
    margin-bottom: 42px;
}
#team.teampage .team_slider_item {
    margin: 0px 0;
    cursor: pointer;
    margin-bottom: 30px;
}
#team h2 {
    margin-bottom: 16px;
}

#team .s-h-p {
    margin-bottom: 21px;
}

.team_slider_item_info ul li {
    display: inline-block;
    padding-left: 3px;
}

.team_slider_item_info ul li a i {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #FFF;
    background: none;
    border: 1px solid #fff;
    border-radius: 50%;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.team_slider_item {
    filter: drop-shadow(0px 0px 3px rgba(189, 179, 179, 0.2));
    margin: 5px 0;
    cursor: pointer;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.team_slider_item_info {
    position: absolute;
    background: rgba(66, 134, 244, 0.80);
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    z-index: 99;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.team_slider_item_info  .infoBox {
    position: absolute;
    top: 50%;
    left: 50%;
    /* transition: auto; */
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 15px;
}
.team_slider_item:hover .team_slider_item_info{
top: 15px;
left: 15px;
opacity: 1;
}

.team_slider_item_info ul li a i:hover {
    color: #4285F4;
    background: #fff;
    border-color: #fff;
}

.team_slider_item h4 {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    text-transform: capitalize;
    padding-top: 20px;
}

.team_slider_item p {
    padding-top: 5px;
    display: block;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #fff;
    font-style: italic;
}

.team_slider_item .social_icon {
    padding-bottom: 30px;
    padding-top: 15px;
}

/*=================================
team area end
================================== */

/* ==================================
13. FAQ css Start
===================================== */

#faq {
    background: whitesmoke;
    padding: 92px 0px 100px;
}

#faq h2 {
    margin-bottom: 21px;
}

#faq .s-h-p {
    margin-bottom: 45px;
}

.panel {
    background: transparent;
}

.panel-default>.panel-heading {
    padding: 0;
    background: #e8ecef;
    border: none;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    color: inherit;
    padding: 15px 20px 16px 25px;
    cursor: pointer;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.02);
}

.panel-title i {
    margin: 0 10px;
}

.panel-default .panel-title:after {
    content: "\f067";
    font-family: 'FontAwesome';
    margin-top: 3px;
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: -15px;
    margin-left: -25px;
    margin-right: 15px;
    border-radius: 0%;
    color: #ffffff !important;
    background: #4285F4;
}

.panel-default .panel-title.panel-title[aria-expanded="true"]::after {
    content: "\f068";
}

.panel {
    box-shadow: none;
}

.panel-group .panel+.panel {
    margin-top: 25px;
}

.panel-body {
    padding: 30px 5px;
    padding-bottom: 10px;
    font-size: 16px;
}

.panel-body p {
    margin: 0;
}

.panel-faq.panel-group .panel {
    border-radius: 0px;
}

.panel-faq .panel-default {
    border: none;
}

.panel-faq .panel-default>.panel-heading {
    background: transparent;
    border-color: #ededed;
    border: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 18px 20px;
    position: relative;
}

.panel-faq .panel-default>.panel-heading .panel-title[aria-expanded="false"]::before {
    padding: 0 10px 0 0;
    content: "\f105" !important;
    font-family: FontAwesome;
    font-size: 24px;
    position: absolute;
    top: 5px;
    left: 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.panel-faq .panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

.panel-faq .panel-default.active>.panel-heading:before {
    transform: rotate(90deg);
}

.panel-faq .panel-title {
    display: block;
    padding-left: 30px;
}

.panel-faq .panel-title>a,
.panel-faq .panel-title>a:active,
.panel-faq .panel-title>a:focus {
    color: inherit;
    text-decoration: none;
    display: block;
}

.panel-default {
    border: none;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border: none;
}

.panel-faq .panel-body p {
    margin: 10px 0;
}

.panel-faq .collapse.in {
    display: block;
    visibility: visible;
}

.faq-list {
    margin: 0;
    padding: 0;
}

.faq-list li {
    list-style: none;
}

.faq-list li .fa {
    color: #f00;
    font-size: 16px;
    margin-right: 10px;
}

.faq-list .faq-item-image {
    position: relative;
    width: 100%;
    text-align: center;
}

.faq-list .faq-item-image img {
    display: block;
}

.faq-1 .item {
    margin-bottom: 70px;
}

.faq-1 .item .question {
    position: relative;
    padding-left: 40px;
    font-size: 1.714em;
    line-height: normal;
    margin-bottom: 30px;
}

.faq-1 .item .question:before {
    content: "\f059";
    color: #FF0000;
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 5px;
}

.faq-1 .item .answer {
    position: relative;
    padding-left: 40px;
    margin-bottom: 30px;
}

.faq-1 .item .answer:before {
    content: "\f064";
    color: #c9c9c9;
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 5px;
}

.box-faq {
    padding: 30px;
    background-color: #c9c9c9;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.box-faq .title {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 30px;
}

/* ==================================
FAQ End
===================================== */

/*=================
14. blog part css
=================*/

#blog.section-padding {
    padding: 92px 0px 50px;
}
#blog h2{
    margin-bottom: 16px;
}
#blog .s-top-p {
    padding-bottom: 26px;
}
.blogs .blog-box {
    margin-bottom:30px;
    border: 1px solid #ddd;
   }
  .blogs .blog-box .blog-details {
    padding: 15px;
  }
   .blogs .blog-box .blog-img {
    overflow:hidden;
    border-top-left-radius:3px;
    border-top-right-radius:3px
   }
   .blogs .blog-box .blog-img img {
    width:100%
   }
   .blogs .blog-box .blog-details h3 a {
    color: #222;
    font-size: 20px;
    display: block;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
  }
   .blogs .blog-box .blog-details h3 a:hover {
    text-decoration:none;
    color: #4285F4;
   }
   .blogs .blog-box .blog-details .meta {
    margin:0 0 15px
   }
   .blogs .blog-box .blog-details .meta li {
    position: relative;
    display: inline-block;
  }
   .blogs .blog-box .blog-details .meta li:first-child {
    padding-left:0
   }
   .blogs .blog-box .blog-details .meta li a {
    font-size:14px;
    color:#a4a4a4
   }
   .blogs .blog-box .blog-details .meta li:after {
    content:'|';
    padding: 0px 7px;
    color:#a4a4a4
   }
   .blogs .blog-box .blog-details .meta li:last-child:after {
    display:none
   }
   .blogs .blog-box .blog-details p {
    font-size:16px;
    margin-bottom:15px
   }
   .blog-images{
    overflow: hidden;
    position: relative;
  }
  .blog-images .box{
   position: absolute;
   top: 10px;
   right: 10px;
   background: #fff;
   padding: 5px 20px;
   border-radius: 3px;
   text-align: center;
   box-shadow: 0px 0px 6px 0px #0003;
   -webkit-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -ms-transition: all linear .3s;
   -o-transition: all linear .3s;
   transition: all linear .3s;
 }
 .all_blogs.blogs .blog-box,
 .blogs .blog-box .blog-images .box p{
   -webkit-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -ms-transition: all linear .3s;
   -o-transition: all linear .3s;
   transition: all linear .3s;
  } 
  .all_blogs.blogs .blog-box:hover .blog-images .box{
   background: #4285F4;
 } 
 .all_blogs.blogs .blog-box:hover {
   -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
 }
 .blogs .blog-box:hover .blog-images .box p{
  color: #fff;
 } 
  .blog-images a {
   display: block;
   width: 100%;
 }
 .blog-images a img{
   width: 100%;
   -webkit-transition:all .4s ease;
   -moz-transition:all .4s ease;
   -o-transition:all .4s ease;
   transition:all .4s ease;
 }
 .blog-box:hover .blog-images a img{
   transform: scale(1.1);
 }
 .single-blog .blog-box{
   border: 0px;
 }
 .blog-details .btn{
    color: #333;
    text-decoration: none;
    padding: 0px;
    font-size: 16px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
  }
  .blog-details .btn:hover{
    color: #4285F4;
  }
  .blog-details .btn:focus{
    outline: 0px;
  }
  .btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0);
  }
  .blog-details .btn:hover i{
    color: #4285F4;
  }
  .blog-details .btn i{
    opacity: 0;
    font-size: 14px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
  }
  .blog-details .btn:hover i{
    opacity: 1;
    padding-left: 7px;
  }
  .blog-btn{
    padding: 7px 20px;
    border: 2px solid #4285F4;
    color: #444;
    border-radius: 3px;
    margin-right: 5px;
    display: inline-block;
    font-size: 16px;
    background: linear-gradient(to right, #4285F4, #4285F4) no-repeat;
        background-size: auto auto;
    background-size: 0% 100%;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
  }
  .blog-btn:hover{
    background-size: 100% 100%;
    color: #fff;
  }

/*=================================
15. clients part start
===================================*/

#clientpart {
    padding: 92px 0px 80px;
    background: whitesmoke
}

#clientpart h2 {
    margin-bottom: 16px;
}

#clientpart .s-h-p {
    margin-bottom: 25px;
}

.clientslide a img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.clientslide a img:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}

/*==============================
clients part end
==============================*/

/*============================
16. map class start
================================*/

#map {
    width: 100%;
    height: 450px;
}

/*============================
map class end
==============================*/

/*=================================
17. contactus part start
==================================*/

#footerbg {
    background: rgb(24, 36, 52);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 40px 0 0px;
    position: relative;
}

.f-logo img {
    width: 140px;
}

.footertext {
    padding-bottom: 30px;
}

.po-re {
    position: relative;
}

.contactbg {
    background: #333;
    padding: 20px 15px;
    z-index: 9;
}

.copy-bg {
    background: #fda12b;
    color: #fff;
    z-index: 9;
    position: inherit;
    padding: 15px 0px 15px;
}

.copy-bg a {
    color: #fff;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    transition: all linear .3s;
}

.copy-bg a:hover {
    color: whitesmoke;
    text-decoration: underline;
}

#contactuspart h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

#contactuspart p {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

#contactuspart .con-num a i {
    color: #fff;
    font-size: 18px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #fff;
    margin-right: 10px;
    border-radius: 3px;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

#contactuspart .con-num a {
    margin-bottom: 15px;
    color: #fff;
}

#contactuspart .con-num a:hover i {
    background: #fff;
    border-color: #fff;
    color: #555;
}

.footertext p {
    margin: 15px 0px;
    font-size: 16px;
    font-weight: 400;
}

.footertext .f-social-links {
    margin-top: 29px;
}

.footertext a span {
    font-size: 16px;
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-right: 12px;
    border-radius: 3px;
    border: 1px solid #fff;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.footertext a:last-child span{
    margin-right: 0px;
}
.footertext a span:hover {
    background: #fff;
    border-color: #fff;
    color: #555;
}
.footer-widget h6{
    margin-bottom: 25px;
}
.manu h6 {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
}
.address-area h6{
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
}
.contact-form-area h6 {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
}

.manu ul {
    list-style-type: square;
    color: #f1f1f1;
    margin-left: 20px;
}

.manu ul li a {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 10px;
    display: inline-block;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.manu ul li a:hover{
   color: #4285F4;
}
#contactuspart .form-control {
    background: none;
    color: #fff;
    padding: 12px 20px 12px;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid #fff;
}

#contactuspart .form-control::placeholder{
    font-size: 16px;
}
#contactuspart .form-control::-webkit-placeholder{
    font-size: 16px;
}
#contactuspart .form-control::-moz-placeholder{
    font-size: 16px;
}

#contactuspart .input-group-text {
    border-radius: 0px;
    background: none;
}

.form-group input {
    border-radius: 0px;
}

.form-group textarea {
    border-radius: 0px;
}

.btn-customing {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    text-transform: uppercase;
    padding: 13px 35px;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    transition: all linear .3s;
}

.btn-customing:hover {
    border-color: #fff;
    background: #ffff;
    color: #555;
}

.form-control::placeholder {
    color: #fff;
    font-size: 16px;
}

label {
    color: #fff;
}

#contactuspart .bottomtotop i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    font-size: 14px;
    color: black;
    text-align: center;
    background: #4285F4;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transform: rotate(-90deg);
    bottom: 15px;
    right: 15px;
    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.20);
    z-index: 80;
    border: 1px solid #4285F4;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    transition: all linear .3s;
}

/*============================
contactus part end
===============================*/

/*============================
18. preloader css start
===============================*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999999;
    background: #fafafa;
    height: 100%;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -45px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9fa8da;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #1a237e;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #5c6bc0;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.form-control:focus {
    box-shadow: 0 0 0 .0rem rgba(0,123,255,.0)!important;
  }
  

/*=============================
preloader css end
================================*/




/* index-2 banner area start */
.index-2intro-area{
    background: url(../images/big-image/1.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    position: relative;
}

.index-2intro-area .main-overly{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.3);
}

.index-2intro-area .intro {
    height: 100vh;
    width: 100%;
}
.index-2intro-area .intro-content {
    height: 100vh;
    width: 100%;
}
.index-2intro-area .slider-content {
    position: absolute;
    left: 0;
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -15px;
    z-index: 9;
}
.index-2intro-area  #bgndVideo{
    height: 100vh;
    width: 100%;
}
.index-2intro-area  .mb_YTPBar .buttonBar {
    display: none!important;
}
/* index 4 css start */
.index-4 .index-2intro-area{
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 83%, 55% 100%, 41% 86%, 0 100%, 0% 70%, 0% 35%, 0 0);
    -moz-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 83%, 55% 100%, 41% 86%, 0 100%, 0% 70%, 0% 35%, 0 0);
    -o-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 83%, 55% 100%, 41% 86%, 0 100%, 0% 70%, 0% 35%, 0 0);
    -ms-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 83%, 55% 100%, 41% 86%, 0 100%, 0% 70%, 0% 35%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 83%, 55% 100%, 41% 86%, 0 100%, 0% 70%, 0% 35%, 0 0);
}
.index-4 #choose-us {
    position: relative;
}
.index-4 #choose-us::after{
    position: absolute;
    content: " ";
    width: 100%;
    height: 400px;
    background: #f1f5f9;
    top: -400px;
    left: 0;
    z-index: -1;

}
/* index 4 css start */
.index-5 .index-2intro-area{
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    -moz-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    -o-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    -ms-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
.index-5 #choose-us {
    position: relative;
}
.index-5 #choose-us::after{
    position: absolute;
    content: " ";
    width: 100%;
    height: 400px;
    background: #f1f5f9;
    top: -400px;
    left: 0;
    z-index: -1;

}
.intro-content{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}