/* Gallery images */
.example-image-link{
    padding-top: 15px;
    padding-bottom: 15px;
}


/* Carousel arrow start*/
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      height: 50px;
      width: 50px;
      background-size: 100%, 100%;
      border-radius: 50%;
      background-image: none;
    }
    
    .carousel-control-next-icon:after
    {
      content: '>';
      font-size: 30px;
      color: white;
      font-weight: bold;
    }
    
    .carousel-control-prev-icon:after {
      content: '<';
      font-size: 30px;
      color: white;
      font-weight: bold;
    }
    
    .carousel-control-prev-icon:hover,
    .carousel-control-next-icon:hover {
      background-color: green;
      outline: white;
      border: 1px solid green;
    }
/* Carousel arrow end*/



/* Parallax start*/
    .parallax {
        /* The image used */
        /* background-image: url("../images/4.jpg"); */
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../images/4.jpg');
        /* Set a specific height */
        height: 350px;
        /* opacity: 0.7; */
        /* filter: brightness(70%); */
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .parallax2 {
        /* The image used */
        /* background-image: url("../images/3.jpg"); */
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../images/3.jpg');
        /* Set a specific height */
        height: 300px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
 /* Parallax end */
    




/* mobile */
@media only screen and (max-width: 767px)
{
    .parallax_container{
        padding: 70px 50px;
    }
    
    /* Counter start */
    .counter{
        /* background-color: #eaecf0; */
        text-align: center;
    }

    .employees,.customer,.design,.order{
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .counter-count{
        font-size: 18px;
        /* background-color: #00b3e7; */
        /* border-radius: 50%; */
        /* position: relative; */
        color: #ffffff;
        text-align: center;
        line-height: 2px;
        /* width: 92px;
        height: 92px; */
        /* -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%; */
        display: inline-block;
    }

    .employee-p,.customer-p,.order-p,.design-p{
        font-size: 18px;
        color: #ffffff;
        line-height: 15px;
    }
    /* Counter start */
}
   

/* laptop and above */
@media only screen and (min-width: 768px) 
{
    .parallax_container{
        padding: 120px 250px;
    }


    /* Counter start */
    .counter{
        /* background-color: #eaecf0; */
        text-align: center;
    }

    .employees,.customer,.design,.order{
        margin-top: 70px;
        margin-bottom: 70px;
    }

    .counter-count{
        font-size: 28px;
        /* background-color: #00b3e7; */
        /* border-radius: 50%; */
        position: relative;
        color: #ffffff;
        text-align: center;
        line-height: 142px;
        width: 92px;
        height: 92px;
        /* -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%; */
        display: inline-block;
    }

    .employee-p,.customer-p,.order-p,.design-p{
        font-size: 28px;
        color: #ffffff;
        line-height: 12px;
    }
    /* Counter start */

}







/* The Image container (cards) start*/
    .card{
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
        transition: box-shadow 0.6s ease-in-out;
    }


    .card:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);    
    }

    .card:hover .card-title{
        color: rgb(18, 180, 18);
    }

    
    .card .img-hover-zoom {
        height: 170px; /* Modify this according to your need */
        overflow: hidden; 
        /* Removing this will break the effects */
    }

    .card img {
        transform-origin: 50% 65%;
        transition: transform 1s, filter 1s ease-in-out;
        filter: brightness(80%);
        
    }

    /* The Transformation */
    .card:hover img {
        filter: brightness(100%);
        transform: scale(1.1);
    }
/* The Image container (cards) end*/






/* Intro pic hover effect */
.zoom{
    overflow: hidden;
}
.zoom img{
    transition: transform 0.5s ease-in-out;
}
.zoom:hover img{
    transform: scale(1.12);
}
.hover-effect::before {
    right: 0;
    opacity:0.7;
    top: 0;
}
.hover-effect::after {
    bottom: 0;
    opacity: 0.7;
    left: 0;
}


.hover-effect::before, .hover-effect::after {
    content: "";
    background: #fff;
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    -webkit-transition-duration: 1.3s !important;
    -o-transition-duration: 1.3s;
  transition-duration: 1.3s !important;
}
.hover-effect:hover::after, .hover-effect:hover::before {
    height: 100%;
    opacity: 0;
    width: 100%;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* Intro pic hover effect */