/* Created By @Rajul Srivastava */

/* Custom CSS to be written */

body{
    padding: 0;
    margin: 0;
    outline: none;
}

a, a:hover, a:focus, a:visited{
    text-decoration: none;
}

p{
    margin: 0;
}

/* Generic Banner CSS */

    .banner-section{
        float: left;
        width: 100%;
        background-color: #fff;
        margin-top: 0 !important;
    }

    .banner-holder{
        float: left;
        width: 100%;
        height: calc(100vh - 97px);
    }

    .banner-content{
        float: left;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .banner-content>h2{
        float: left;
        width: 100%;
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .banner-content>h3{
        float: left;
        width: 100%;
        font-size: 18px;
        margin-bottom: 15px;
        color: #444;
        line-height: 1.5;
        text-align: justify;
    }

    .banner-content>span a{
        float: left;
        padding: 7px 25px;
        /* border: 1px solid #ddd; */
        border-radius: 5px;
        margin-right: 20px;
        font-size: 16px;
        font-weight: 600;
        word-spacing: 2px;
        transition: .5s all;
        color: #fff;
    }

    .four-prop-holder {
        float: left;
        width: 100%;
        padding: 15px 35px;
        border: 1px solid #ebebeb;
        border-radius: 10px;
        height: 430px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        transition: 0.5s all;
        -webkit-box-shadow: 0px 0px 7px 2px #d7d7d7;
        box-shadow: 0px 0px 7px 2px #d7d7d7;
    }

    .four-prop-holder>img:hover {
        cursor: pointer;
        animation-name: bounce;
        -moz-animation-name: bounce;
    }

    .four-prop-holder>img {
        height: 100px;
        margin: 25px 0;
    }

    .four-prop-holder>img {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
        -webkit-animation-iteration-count: 1;
    }

    .four-prop-holder>h4 {
        float: left;
        width: 100%;
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #444;
        padding-bottom: 15px;
        border-bottom: 1px solid #005558;
        margin-bottom: 25px;
    }

    .four-prop-holder>p {
        float: left;
        width: 100%;
        margin-bottom: 25px;
        text-align: justify;
        font-size: 15px;
        color: #111;
    }

    .color-1{
        background: #df1f2b;
    }

    .color-2{
        background: #002f4c;
    }

    .color-1:hover{
        background: #ba1d27;
    }

    .color-2:hover{
        background: #001e31;
    }

    .banner-content>span{
        float: left;
        width: 100%;
        margin-top: 20px;
    }

    .banner-image{
        float: left;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .banner-image>img{
        float: left;
        width: 100%
    }

/* End */

/* General CSS for before after component */

    .title-holder{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0;
        text-align: center;
        padding: 0 15px;
    }

    .title-holder>h3{
        float: left;
        padding: 0 20px;
        color: #222;
    }

    .title-holder span{
        float: left;
        width: 15%;
        height: 2px;
        background: #222;
    }

    /* End */

    /* Four Section Component CSS */

    .four-section{
        float: left;
        width: 100%;
        padding: 15px 15px 15px 0;
        margin-top: 30px;
        height: 350px;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        border-right: 1px dotted #ccc;
    }

    .four-section-no-border{
        border: none;
    }

    .four-section>img{
        float: left;
        height: 50px;
        margin-bottom: 25px;
    }

    .four-section>h4{
        float: left;
        width: 100%;
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #dc1f29;
        margin-bottom: 25px;
    }

    .four-section>p{
        float: left;
        width: 100%;
        font-size: 13px;
        text-align: left;
        color: #444;
        margin-bottom: 25px;
        height: 100px;
        overflow: hidden;
    }

    .three-sec-holder {
        padding-top: 50px;
    }

    .four-section>p>i{
        font-weight: 600;
    }

    .four-section>a{
        position: relative;
        padding: 7px 13px;
    }

    .four-section>a>svg{
        position: absolute;
        left: 0;
        top: 0;
        fill: none;
        stroke: #dc1f29;
        stroke-dasharray: 150 480;
        stroke-dashoffset: 150;
        transition: 2s ease-in-out;
    }

    .four-section>a:hover{
        transition: 2s ease-in-out;
    }

    .four-section>a:hover svg{
        stroke-dashoffset: -480;
    }

    .four-section>a>span{
        color: #111;
        font-size: 16px;
        /* font-weight: 600 */
    }

    /* End */

    /* Center Dashboard CSS */

    .center-dashboard{
        float: left;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .center-dashboard>h3{
        margin-bottom: 30px;
        text-align: center;
    }

    .center-dashboard>p{
        float: left;
        width: 100%;
        font-size: 16px;
        margin-bottom: 30px;
        color: #444;
        line-height: 1.5;
        text-align: center;
        padding: 0 10%;
    }

    .center-dashboard>img{
        width: 50%;
        float: left;
        margin: 5% 25% 5% 25%;
        /* box-shadow: 0 35px 28px -4px #979797; */
    }

    /* End */

    /* tABS cONTENT cONTENT Css */
    
    .tabs-holder{
        float: left;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        padding: 30px 0;
        margin: 30px 0;
    }

    .tabs-holder>.tabs{
        float: left;
        width: 50%;
        padding: 2% 5%;
        border-right: 1px dotted #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .tabs-holder>.tabs a{
        float: left;
        width: 80%;
        padding: 10px 15px;
        font-size: 15px;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        text-align: left;
        border-radius: 5px;
        color: #111;
        transition: 0.25s all;
    }

    .tabs-holder>.tabs a:hover{
        box-shadow: 0 7px 11px -2px #555;
        border-left: 5px solid #dc1f29;
        color: #dc1f29;
        font-weight: 600;
    }

    .tabs-holder>.tab-content{
        float: left;
        width: 50%;
        display: none;
        padding: 2% 5%;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        transition: 1s all;
    }

    .tabs-holder>.tab-content>img{
        height: 50px;
        margin-bottom: 25px;
    }

    .tabs-holder>.tab-content>h5{
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 9px;
        border-bottom: 1px solid #dc1f2952;
    }

    .tabs-holder>.tab-content>p{
        font-size: 14px;
        text-align: justify;
    }

    .tabs-holder>.tabs .tab-active{
        box-shadow: 0 7px 11px -2px #555;
        border-left: 5px solid #dc1f29;
        color: #dc1f29;
        font-weight: 600;
    }

    /* End */

    /* testimonial component section CSS */

    .testimonial-component-section{
        float: left;
        width: 100%;
        padding: 90px 0;
        position: relative;
    }

    .testimonial-component-holder{
        float: left;
        width: 100%;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .testimonial-component-holder>img{
        float: left;
        width: 120px;
        margin-bottom: 20px;
    }

    .testimonial-component-holder>p{
        float: left;
        line-height: 1.6;
        text-align: center;
        font-size: 15px;
        font-style: oblique;
        color: #434343;
        width: 100%;
        padding: 0 5%;
        margin-bottom: 15px;
    }

    .testimonial-component-holder>p>i{
        margin: 0 10px;
        font-size: 20px;
    }

    .testimonial-component-holder>h4{
        text-align: right;
        margin: 10px 0;
    }

    .testimonial-component-holder>h3{
        margin: 5px 0;
        font-size: 17px;
        color: #002f4c;
        font-weight: 600;
    }

    /* END */

    /* Free-Trial-Component */
    .free-trial-component{
        float: left;
        width: 100%;
        padding: 50px 0;
        background-position: center;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        height: 400px;
        /* background: #f3f3f3; */
    }

    .free-trial-component>.container>.first-free{
        float: left;
        width: 30%;
        text-align: center;
    }

    .free-trial-component>.container>.first-free>img{
        height: 300px;
        width: 100%;
        padding: 0 5%;
    }

    .free-trial-component>.container>.second-free{
        float: left;
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 300px;
    }
    
    .free-trial-component>.container>.second-free>h3{
        display: block;
        margin-bottom: 30px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
    }

    .free-trial-component>.container>.second-free>h4{
        display: block;
        margin-bottom: 30px;
        text-align: center;
        font-size: 23px;
        color: #dc1f29;
    }

    .free-trial-component>.container>.second-free>div{
        float: left;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .free-trial-component>.container>.second-free>span{
        float: left;
        width: 100%;
        text-align: center;
        margin: 20px 0;
        color: #444;
        font-weight: 600;
        font-size: 15px;
    }

    .input-2{
        display: block;
        margin: 0 15px;
        width: 30%;
        padding: 7px 0;
        border: 1px solid #001e31;
        border-radius: 5px;
        color: #fff;
        background: #002f4c;
        text-align: center;
        transition: 0.5s all;
        font-size: 16px;
    }

    .input-2:hover, .input-2:active, .input-2:focus{
        background: #001e31;
        color: #fff;
        outline: none;
    }

    /* FORM CSS OVERRIDE */
    .form-control{
        box-shadow: 0px 0px 2px 0px rgb(204, 204, 204);
    }

    .submit-anchor{
        float: left;
        width: 100%;
        text-align: center;
        padding: 6px 0;
        font-size: 16px;
        border-radius: 5px;
        background: #002f4cd4;
        color: #fff;
        font-weight: 600;
        margin-top: 15px;
        transition: 0.5s all;
    }

    .submit-anchor:hover, .submit-anchor:active, .submit-anchor:focus, .submit-anchor:visited{
        background: #002f4c;
        color: #fff;
    }

    .err-msg{
        float: left;
        width: 100%;
        font-size: 13px;
        padding-left: 13px;
        margin-bottom: 10px;
        padding-top: 3px;
        color: #f14d4d;
        display: none;
    }

    .input-error{
        background: #ff18183b;
    }

    
    #cookiefy_cookie-text a{color:#df1f2b!important;}
    #cookiefy_close1{
        background:#002f4c!important;
        color:#fff;

    }

    .box-shadow-none{
        box-shadow: none !important;
    }

    .img-box-shadow{
        box-shadow: 1px 1px 5px 8px #bdbdbd;
    }

    .visibility-hidden{
        visibility: hidden;
    }

/* Media Query for <= 768 */
    @media only screen and (max-width:768px) {

        #cookie-wrapper #cookiefy_bar{
            position: relative !important;
            box-shadow:none !important;
        }
        #cookie-wrapper #cookiefy_close{
            top: 20px !important;
            max-width: 18px;
        }

        .banner-section{
            margin-top: 50px;
        }

        .banner-holder{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column-reverse;
            height: auto;
        }

        .banner-content{
            width: 100%;
            justify-content: flex-start;
            margin: 35px 0;
            /* height: 50%; */
            text-align: center;
        }

        .banner-content>h2{
            font-size: 32px;
        }

        .banner-content>span{
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .banner-image{
            width: 100%;
        }

        .banner-image>img{
            width: auto;
            height: 330px;
        }


        /* Media query css for the before after component */
        .title-holder>h3::after, .title-holder>h3:before{
            display: none;
        }

        .title-holder{
            padding: 15px 0;
            margin: 0;
        }
        

        .title-holder>h3{
            width: 100%;
            text-align: center;
            font-size: 26px;
        }

        .title-holder span{
            display: none
        }

        /* Media Query for testimonial component */
        .free-trial-component{
            height: auto;
        }

        .free-trial-component>.container>.first-free{
            width: 100%;
            text-align: center;
        }

        .free-trial-component>.container>.first-free>img{
            height: 200px;
        }

        .free-trial-component>.container>.second-free{
            width: 100%;
            height: auto;
        }

        .free-trial-component>.container>h3{
            font-size: 26px;
        }

        .free-trial-component>.container>form{
            width: 100%;
            margin: 0;
        }

        .free-trial-component>.container>.second-free>div{
            flex-direction: column;
        }

        .input-2{
            width: 50%;
            margin-top: 10px;
            margin: 30px 25% 0 25%;
        }

        .four-section>p, .four-section>h4{
            text-align: center;
        }

        .four-section{
            align-items: center;
        }

        .tabs-holder{
            flex-direction: column;
        }

        .tabs-holder>.tabs{
            width: 100%;
            padding: 0;
        }

        .tabs-holder>.tabs a{
            width: 90%;
        }

        .tabs-holder>.tab-content{
            width: 100%;
            align-items: center;
        }

        .center-dashboard>p{
            text-align: justify;
            padding: 0 5%;
        }

        .center-dashboard>h3{
            text-align: center;
        }

        .center-dashboard>img{
            width: 90%;
        }

        .testimonial-component-holder>p{
            text-align: justify;
        }

        .calendly-overlay{
            z-index: 100000;
        }

        .calendly-overlay .calendly-popup{
            top: 90px!important;
        }

        /* .banner-content>span .color-2{
            display: none;
        } */
        .left-img-right-content{
            flex-direction: column-reverse;
        }

        /* #cookiefy_bar{
            bottom: 35px !important;
        } */

    }

    /* Loader Animation CSS */

    .artboard {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .domino > div {
        display: inline-flex;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 5px;
        height: 5px;
        -webkit-animation: domino-effect 2.4s infinite ease-in-out;
        animation: domino-effect 2.4s infinite ease-in-out;
    }
    .domino > div:nth-child(1) {
        background: #b5b5b5;
    }
    .domino > div:nth-child(1):after {
        background: #b5b5b5;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    .domino > div:nth-child(2) {
        background: #ff4343;
    }
    .domino > div:nth-child(2):after {
        background: #ff4343;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }
    .domino > div:nth-child(3) {
        background: #6c75f4;
    }
    .domino > div:nth-child(3):after {
        background: #6c75f4;
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
    }
    .domino > div:nth-child(4) {
        background: #0eb550;
    }
    .domino > div:nth-child(4):after {
        background: #0eb550;
        -webkit-animation-delay: 2.4s;
        animation-delay: 2.4s;
    }
    .domino > div:nth-child(5) {
        background: #eb7260;
    }
    .domino > div:nth-child(5):after {
        background: #eb7260;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }
    .domino > div:nth-child(1) {
        margin: 0 10px;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    .domino > div:nth-child(2) {
        margin: 0 10px;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }
    .domino > div:nth-child(3) {
        margin: 0 10px;
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
    }
    .domino > div:nth-child(4) {
        margin: 0 10px;
        -webkit-animation-delay: 2.4s;
        animation-delay: 2.4s;
    }
    .domino > div:nth-child(5) {
        margin: 23px;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }
    .domino > div:after {
        content: "";
        position: relative;
        top: 0px;
        left: -10px;
        opacity: 0;
        width: 5px;
        height: 5px;
        -webkit-animation: illusion 2.4s infinite ease-in-out;
        animation: illusion 2.4s infinite ease-in-out;
    }

    @-webkit-keyframes beat {
        to {
            -webkit-transform: scale(1.4);
                    transform: scale(1.4);
        }
    }

    @keyframes beat {
        to {
            -webkit-transform: scale(1.4);
                    transform: scale(1.4);
        }
    }
    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(140deg);
                    transform: rotate(140deg);
        }
    }
    @keyframes spin {
        to {
            -webkit-transform: rotate(140deg);
                    transform: rotate(140deg);
        }
    }
    @-webkit-keyframes domino-effect {
        20%,100% {
            -webkit-transform: rotate(135deg);
                    transform: rotate(135deg);
        }
    }
    @keyframes domino-effect {
        20%,100% {
            -webkit-transform: rotate(135deg);
                    transform: rotate(135deg);
        }
    }
    @-webkit-keyframes illusion {
        0%, 25% {
            opacity: 1;
        }
        26.10%, 33.33%, 100% {
            opacity: 0;
        }
    }
    @keyframes illusion {
        0%, 25% {
            opacity: 1;
        }
        26.10%, 33.33%, 100% {
            opacity: 0;
        }
    }

    /* @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
        
    } */

    /* @media only screen and (min-width: 768px) {
        .iti__flag {
            background-size: 5630px 15px!important;
        }
    } */