/* Global styles */
    body{
        font-family: Open Sans;
    }
    .btn.focus, .btn:focus{
        box-shadow: none !important;
    }
    .d-xs-none{
        display: block !important;
    }
    .d-xs-block{
        display: none !important;
    }
    .font-size-42{
        font-size: 42px;
    }
/* Header section Styles*/
    .header-wrapper{
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding-top: 5px;
    }
    .contact-text{
        margin-top: 10px;
        margin-bottom: 2px;
        font-size: 14px;
        margin-right: 30px;
    }
    .contact-number{
        font-size: 36px;
        color: #391F70;
    }
    .contact-number-icon{
        padding-top: 7px;
        padding-right: 3px;
    }
    .navbar-toggler{
        outline:0 !important;
    }

/* Popup */    
    .popup-contact-text{
        padding-top: 7px;
        font-size: 24px;
    }

/* leading mobile app section styles starts here */
    .app-development-wrapper{
        padding-top: 78px;
        padding-bottom: 100px;
    }
    .app-development-wrapper a:hover{
        text-decoration: none;
    }
    .app-dev-text{
        font-size: 20px;
    }
    .custom-btn{
        background: #391F70;
        border-color: #391F70;
        border-radius: 25px;
        font-size: 16px;
        color:white;
        width: 180px;
        line-height: 35px;
        height: 50px;
        xxxdisplay: block;
    }
    .custom-btn:hover {
        background: white;
        color: #391F70;
        border:2px solid #391F70;
        font-weight: 500;
        transition: all .5s;
    }

/* services section styles section starts from here */
    .services-wrapper{
        background-color: #F2F3F7;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .services{
        margin-top:3rem;
    }
    .services-caption{
        font-size: 20px;
    }
    .service-section{
        background-color: #FFFFFF;
        /* padding:60px 18px 40px 15px; */
        margin-bottom: 21px;
        padding:25px 13px;
    }
    .service-img{
        height:80px;
    }
    .service-title{
        font-size: 20px;
        margin-top: 20px;
    }
    .service-text{
        font-size: 17px;
    }
    .services-link{
        color: #4843D3;
        text-decoration: underline;
        font-size: 18px;
    }
    .best-projects-wrapper{
        padding-top: 80px;
        padding-bottom: 100px;
    }
    .best-projects-wrapper a:hover{
        text-decoration: none;
    }
    .best-projects-text{
        font-size: 18px;
        line-height: 32px;
    }
    #demo .carousel-inner{
        border: 9px solid #e3e3e3;
    }
    .carousel-indicators li {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: rgb(0,0,0,0.3);
        cursor: pointer;
    }
    .carousel-indicators{
        bottom: -35px;
    }
    .carousel-indicators .active {
        background-color: rgb(0,0,0,0.7);
    }
    .app-process-wrapper{
        background-color: #F2F3F7;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .app-process-text{
        font-size: 20px;
    }

/* timeline section styles */
    .main-timeline-section{
        position: relative; 
    }
    .main-timeline-section .timeline-start,
    .main-timeline-section .timeline-end{
        position: absolute;
        background:#F2635F;
        border-radius:100px;
        top:50%;
        transform: translateY(-50%);
        width:30px;
        height:30px;
    }
    .main-timeline-section .timeline-end{
        right:0px;
    }
    .main-timeline-section .conference-center-line{
        position: absolute;
        width:93%;
        height:11px;
        left:10px;
        top:50%;
        transform: translateY(-50%);
        background:white;
        border: 1px solid #e3e3e3;
    }
    .timeline-article{
        width: 16.66%;
        position: relative;
        min-height: 300px;
        float:left;
    }
    .timeline-article:last-of-type .content-box {
        padding-right: 0px;
    }
    .timeline-article .content-date{
        position: absolute;
        top: 35%;
        left: -30px; 
        font-size:18px;
    }
    .timeline-article .meta-date{
        position: absolute;
        top: 50%;
        left:0px;
        transform: translateY(-50%); 
        width:45px;
        height:45px;
        border-radius: 100%;
        background:#fff;
        font-weight: 500;
        font-size: 22px;
        line-height: 42px;
        box-shadow: 0px 2px 13px 0px rgb(0,0,0,0.3);
    }
    .timeline-article .content-box{
        width: auto;
        position: absolute;
        top: 60%;
        left: -20px; 
        padding:10px;
    }
    .timeline-article-bottom .content-date{
        top: 59%;
    }
    .timeline-article-bottom .content-box{
        top: 25px;
    }
    .timeline-image{
        height:60px;
    }
    .timeline-text{
        font-weight: 500;
        margin:0px;
        margin-bottom: 10px;
    }
    .timeline-wrapper{
        padding-top: 45px;
    }

/*clients feedback section styles starts here*/
     .clients-wrapper{
         padding-top: 90px;
         padding-bottom: 75px;
     }  
     .clients-wrapper a:hover{
        text-decoration: none;
    }
     .clients-wrapper .container .row {
        justify-content: center;
    }
     .clients-wrapper-heading{
        color: #252B33;
    }
    .clients-wrapper-desc{
        font-size: 20px;
        color: #5A5A5A;
    }
    .card{
        box-shadow: 5px 5px 18px 3px #ccc;
    }
    .client-name{
        font-size: 22px;
        color:#242424;
        margin: 1px;
        text-align: center;
    }
    .client-designation{
        font-size: 18px;
        color:#878787;
    }
    .feedback-indicators{
        bottom: -55px;
    /* right: 65px; */
    }

  /*footer styles starts here*/
    footer{
    padding-top: 48px;  
    padding-bottom: 77px; 
    background-color: #FFFFFF;
    }
    .footer{
        max-width: 600px;
        /* color: #878787; */
    }
    .footer-link a{
        font-size: 20px;
        color: #4B4B4B;
    }
    .footer-link a:hover{
        text-decoration: none;
    }
    .number, .contact-mail, .copyright-text{
        font-size: 18px;
        color: #212529;
    }
    .number a{
        text-decoration: none;
        color: #212529;
    }
    .contact-mail a{
        color: #212529;
        text-decoration: none;
    }
    .seperator{
        padding: 0px 8px;
    }
    .social-media-icons{
        max-width: 325px;
        margin-top: 20px;
    }
    .social-media-icons li a i{
        font-size: 28px;
        cursor: pointer;
        color: #212529;
    }
    .fa-phone{
        transform: rotate(18deg);
    }


/* Media Queries For Resposive Design */

/* Responsive Styles for Extra large devices*/
    @media (min-width:1400px){
        .container{
            max-width: 1600px !important;
        }
        .header-wrapper{
            max-width: 1600px;
            margin: 0 auto;
        }
        .app-dev-heading, .contact-number, .services-heading, .best-projects-title , .app-process-heading , .clients-wrapper-heading{
            font-size: 48px;
        }          
        .app-dev-text, .service-title, .clients-wrapper-desc ,.contact-form-caption .footer-link a, .best-projects-text{
            font-size: 24px;
        }  
        .contact-text,.service-text{
            font-size: 22px;
        }
        .timeline-article:last-of-type {
            width: 5% !important;
        }
        .main-timeline-section .conference-center-line{
            width: 96%;
        }
        .maintenance-step {
            left: -38px !important;
        }
        /* .meeting-step {
            left: -33px !important;
        } */
        .planning-step {
            left: -64px !important;
        }
        .design-step {
            left: -66px !important;
        }
        .quality-step {
            left: -41px !important;
        }
        .main-timeline-section .conference-center-line{
            left:20px;
        }
        .first-step{
            left:17px !important;
        }

    } 

/* large devices ( desktops,992 and up)*/
     @media (min-width: 992px) and (max-width: 1199.98px) {
        .container {
            max-width: 1145px;
        }
        .app-dev-heading, .services-heading, .best-projects-title , .app-process-heading , .clients-wrapper-heading{
            font-size: 36px;
        }          
        .app-dev-text, .service-title, .clients-wrapper-desc ,.contact-form-caption .footer-link a, .best-projects-text{
            font-size: 20px;
        } 
    }   

    /* Medium devices (tablets, 768px and up)*/
    @media(min-width:768px) and (max-width:991.98px){
        .container {
            max-width: 100%;
        }
        .app-development-wrapper {
            padding-top: 68px;
            padding-bottom: 90px;
        }
        .timeline-wrapper {
            padding-top: 40px;
        }
        .app-process-wrapper {
            padding-top: 70px;
            padding-bottom: 60px;
        }
        .clients-wrapper {
            padding-top: 75px;
            padding-bottom: 65px;
        }
        footer {
            padding-top: 44px;
            padding-bottom: 67px;
        }
        .app-dev-heading, .contact-number, .services-heading, .best-projects-title , .app-process-heading , .clients-wrapper-heading{
            font-size: 30px;
        }          
        .app-dev-text,.services-caption,.app-process-text, .service-title, .clients-wrapper-desc ,.contact-form-caption .footer-link a, .best-projects-text{
            font-size: 18px;
        }  
        .timeline-article:last-of-type{
            width:7%;
        }
        .main-timeline-section .conference-center-line{
            width:96%;
        }
        .meeting-step{
            left: -24px !important;
            /* top: 3px !important; */
        }
        .planning-step{
            left: -60px !important;
        }
        .design-step{
            left: -77px !important;
            /* top: 0px !important; */
        }
        .quality-step{
            left: -36px !important;
        }
        .maintenance-step{
            left: -43px !important;
            /* top: 4px !important; */
        }
    }

@media (min-width: 480px) and (max-width: 576px){
    .collapse:not(.show) {
        display: none;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .contact-text{
        font-size: 12px;
    }
    .contact-number{
        font-size: 26px !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767.98px){
        .navbar-toggler{
            display: none;
        }
        .contact-section{
            display: inline-block;
        }
        .container {
            max-width: 100%;
        }
        .app-development-wrapper {
            padding-top: 43px;
            padding-bottom: 70px;
        }
        .services-wrapper {
            padding-top: 70px;
            padding-bottom: 70px;
        }
        .best-projects-wrapper {
            padding-top: 70px;
            padding-bottom: 90px;
        }
        .app-process-wrapper {
            padding-top: 70px;
            padding-bottom: 65px;
        }
        .clients-wrapper {
            padding-top: 75px;
            padding-bottom: 70px;
        }
        footer {
            padding-top: 45px;
            padding-bottom: 55px;
        }
        .timeline-article:last-of-type{
            width:7%;
        }
        .main-timeline-section .conference-center-line{
            width:96%;
        }
        .meeting-step{
            left: -34px !important;
            /* top: 0px !important; */
        }
        .planning-step{
            left: -40px !important;
        }
        .design-step{
            left: -38px !important;
            top: 0px !important;
        }
        .quality-step{
            left: -36px !important;
        }
        .maintenance-step{
            left: -51px !important;
            /* top: 4px !important; */
        }
        .app-dev-heading, .contact-number, .services-heading, .best-projects-title , .app-process-heading , .clients-wrapper-heading{
            font-size: 28px;
            text-align: center;
        }          
        .app-dev-text,.services-caption, .service-title,.app-process-text, .clients-wrapper-desc ,.contact-form-caption .footer-link a, .best-projects-text{
            font-size: 16px;
            text-align: center;
        }  
        .logo-section img{
            height: 80px;
        }
        .contact-text{
            margin-right: 10px;
        }
    }

    /* Extra small devices (portrait phones, less than 576px) */
    @media (max-width:575.98px){
        .navbar-toggler{
            display: none;
        }
        .contact-section{
            display: inline-block;
        }
        .container {
            max-width: 100%;
        }
        .logo-section img{
            max-height: 65px;
        }
        .app-dev-heading, .services-heading, .best-projects-title , .app-process-heading , .clients-wrapper-heading{
            font-size: 25px;
        }          
        .app-dev-text,.services-caption,.app-process-text, .clients-wrapper-desc ,.contact-form-caption .footer-link a, .best-projects-text{
            font-size: 14px;
        } 
        .d-xs-none{
            display:none !important;
        }
        .d-xs-block{
            display: block !important;
        }
        .app-development-wrapper {
            padding-top: 23px;
            padding-bottom: 26px;
        }
        .contact-number {
            font-size: 30px;
            justify-content: center;
        }
        .contact-text{
            margin: 0px;
        }
        .services{
            margin-top:0;
        }
        .custom-btn {
            width: 170px;
            height: 45px;
            line-height: 30px;
        }
        .service-section{
            padding-top: 28px;
            height: auto;
        }
        .service-title{
            margin-bottom: 13px;
        }
        .service-text{
            margin-bottom: 27px;
        }
        .services-wrapper{
            padding-top: 25px;
            padding-bottom: 7px;
        }
        .service-img{
            display: inline-block !important;
        }
        .text-xs-center{
            text-align: center;
        }
        .best-projects-wrapper{
            padding-top: 20px;
            padding-bottom: 50px;
        }
        .best-projects-title {
            max-width: 100%;
        }
        .best-projects-text{
            line-height: 30px;
        }

        /* Responsive Styles for timeline section*/
        .app-process-wrapper {
            padding-top: 30px;
            padding-bottom: 10px;
        }
        .timeline-wrapper{
            padding-top: 18px;
            padding-bottom:0px;
        }
        
        .main-timeline-section .conference-center-line {
            position: absolute;
            width: 9px;
            height: 89%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: white;
            border: 1px solid #707070;
        }
        .conference-timeline-content {
            flex-direction: column;
        }
        .timeline-article {
            width: 100%;
            position: relative;
            min-height: 125px;
            float: none;
            display: block;
        }
        .timeline-article .meta-date {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: #fff;
            font-weight: 500;
            font-size: 22px;
            line-height: 42px;
            /* left:5px; */
            box-shadow: 0px 2px 13px 0px rgb(0,0,0,0.3);
        }
        .timeline-article-bottom .content-box {
            right:50%;
            left:auto;
            top: 12%;
        }
        .timeline-article-top .content-box {
            left:auto;
            top:14px;
            left: 49%;
        }
        .content-box{
            width: 155px !important;
        }
        .timeline-image {
            height: 50px;
        }
        .timeline-text{
            font-size: 14px;
        }
        .group {
            margin-bottom: 5px;
        }
        /* Responsive Styles for Clients Feedback section*/
        .clients-wrapper{
            padding-top: 30px;
            padding-bottom: 30px;
        }
        .card{
            width:300px;
            margin: 0 auto;
        }
        .carosel-item .card{
            margin-bottom: 20px;
        }
        .clients-feedback-desc{
            display: none;
        }
        /* Responsive Styles for footer section*/
        footer {
            padding-top: 28px;
            padding-bottom: 30px;
        }
        .footer-links {
            justify-content: center !important;
        }
        .footer-link a, .seperator, .number, .contact-mail, .copyright-text {
            font-size: 12px;
            vertical-align: text-top;
        }
        .number a,.number, .contact-mail, .contact-mail a{
            color: #007AFF;
        }
        .social-media-icons {
            max-width: 200px;
        }
        .social-media-icons li i{
            font-size: 16px;
        }
        .contact-wrapper .container {
            max-width: 100%;
        }
        input:focus ~ .input-placeholder, input:valid ~ .input-placeholder{
            top:-2px;
        }
    }

/* small devices ( 992px and below) */
    @media (max-width:992px){
        .feedback-indicators{
            display: none;
        }
        .card{
            margin-bottom: 20px !important;
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width:991.98px) and (max-width:1399.98px){
        
        .timeline-article:last-of-type{
            width:7%;
        }
        .meeting-step{
            /* top: 3px !important; */
            left: -38px !important;
        }
        .planning-step{
            left: -56px !important;
        }
        .design-step{
            left: -74px !important;
            /* top: 0px !important; */
        }
        .quality-step{
            left: -47px !important;
        }
        .maintenance-step{
            left: -34px !important;
        }
    }

    @media(max-width:991px) and (min-width:576px){
        .card-body {
            padding: 8px;
        }
        .client-name {
            font-size: 20px;
        }
        .client-designation {
            font-size: 16px;
        }
        .timeline-image {
            height: 55px;
        }
        .timeline-article-bottom .content-box {
            top: 7%;
        }
        .timeline-text {
            font-size: 14px;
        }
    }

    @media(min-width:320px) and (max-width:479.98px){
        .navbar-toggler{
            display: inline-block;
        }
    }