@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400;700&display=swap');
body {
    background: #fff;
     font-family: 'Nunito Sans', sans-serif;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0px;
    margin: 0px;
    font-weight: 600;
  font-family: 'Playfair Display SC', serif;
}

.hdstyle1 {
    position: relative;
    font-size: 3em;
    font-weight: 400;
    margin-bottom: 50px;
}

    .hdstyle1:after {
        position: absolute;
        content: '';
        bottom: -10px;
        left: 0;
        background: #696cff;
        height: 5px;
        width: 200px;
        transition: .5s;
    }

    .hdstyle1.center {
        text-align: center;
    }

        .hdstyle1.center:after {
            left: 0;
            right: 0;
            margin: auto;
        }

@keyframes tinTin {
    0% {
        transform: translatey(100);
        transform-origin: top
    }

    25% {
        transform: translatey(75);
        transform-origin: top
    }

    50% {
        transform: translatey(50);
        transform-origin: top
    }

    75% {
        transform: translatey(25);
        transform-origin: top
    }

    100% {
        transform: translatey(0);
        transform-origin: top
    }
}

.header {
position: fixed;
    width: 100%;
    z-index: 99;
    transition: .2s;
    background: rgb(255, 255, 255,0);
}a.logo img {
    background: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.header-fixed {
    background: rgb(255, 255, 255,1);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
    animation-name: tinTin;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.banner {
    background-image: url('../images/banner-img.jpg');
    height: 900px;
    background-size: cover;
}
form{margin-bottom: 0;}
    .banner h1 {
    color: #fff;
    text-align: left;
    margin-top: 23%;
    font-size: 4em;
    font-style: italic;
    position: relative;
    font-weight: 100;
    background: rgb(0,0,0,0.5);
    display: table;
    padding: 14px 20px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    }


        .banner h1 > strong {
            display: block;
            color: #fff;
            font-style: normal;
            font-weight: 800;
        }

.loginStripe {
    background: rgba(0, 0, 0, 0.8);
    margin-top: -120px;
    padding: 15px 0;
}

    .loginStripe .loginType {
        display: block;
        width: 100%;
        position: relative;
        text-decoration: none;
    }

        .loginStripe .loginType:after {
            position: absolute;
            top: 0;
            right: 50px;
            height: 90%;
            width: 1px;
            background: #616161;
            content: '';
            bottom: 0;
            margin: auto;
        }


    .loginStripe .col-sm-4:last-child .loginType:after {
        display: none
    }

    .loginStripe .loginType .lg-icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 15px;
        transition: .2s;
        background: #6b70f1;
        height: 90px;
        width: 90px;
        border-radius: 100px;
        text-align: center;
    }

    .loginStripe .loginType:hover .lg-icon {
        transform: scale(1.05)
    }

    .loginStripe .loginType .lg-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 20px;
    }

    .loginStripe .loginType .lg-text {
        display: inline-block;
        vertical-align: middle
    }

        .loginStripe .loginType .lg-text h2 {
            color: #fff;
            font-size: 1.25em;
            font-weight: 100;
              font-family: 'Nunito Sans', sans-serif;
        }

            .loginStripe .loginType .lg-text h2 > strong {
                display: block;
                font-size: 1.5em;
                font-weight: 600;
            }

.about {
    padding: 60px 0;
}

    .about .abt-txt {
    }

        .about .abt-txt h3 {
            color: #8789ff;
            font-style: italic;
            font-size: 2.5em;
            font-weight: 800;
        }

        .about .abt-txt h2 {
            color: #333;
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 15px;
            font-size: 2.5em;
            font-weight: 600;
        }

            .about .abt-txt h2:after {
                position: absolute;
                left: 0;
                height: 5px;
                width: 100px;
                background: #696cff;
                content: '';
                bottom: 0;
                margin: auto;
            }

        .about .abt-txt p {
            line-height: 1.75em;
        }

.webfeatures {
    padding: 60px 0;
    background-image: url(../images/bgimg1.png);
    background-size: cover;
}

    .webfeatures .featurebox {
   border-radius: 12px;
    display: block;
    background: #fff;
    transition: .3s;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    min-height: 250px;
    box-shadow: 0px 5px 6px 0px rgb(0 0 0 / 20%);
    }

        .webfeatures .featurebox a {
            display: block;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 56;
        }

        .webfeatures .featurebox:hover, .webfeatures .featurebox.active {
            box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
        }

        .webfeatures .featurebox .fb-left,
        .webfeatures .featurebox .fb-right {
            display: inline-block;
            vertical-align: top;
        }

        .webfeatures .featurebox .fb-left {
            text-align: center;
            z-index: 55;
            display: block;
            padding: 10px;
        }

            .webfeatures .featurebox .fb-left > span {
                display: block;
                background: #e5e6fc;
                width: 90px;
                height: 90px;
                margin: auto;
                border-radius: 100px;
            }

                .webfeatures .featurebox .fb-left > span img {
                    transition: .2s;
                    padding: 20px;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

            .webfeatures .featurebox .fb-left label {
                transition: .2s;
                display: block;
                font-size: 1.5em;
                transition: .2s;
                margin-bottom: 0;
            }

                .webfeatures .featurebox .fb-left label > i {
                    transition: .5s;
                }


        .webfeatures .featurebox .fb-right {
            padding: 10px 20px;
            display: block;
            text-align: center;
        }

            .webfeatures .featurebox .fb-right h3 {
                color: #6b6eff;
                font-size: 1.1em;
                font-weight: 600;
                margin-bottom: 30px;
                  font-family: 'Nunito Sans', sans-serif;
            }

            .webfeatures .featurebox .fb-right p {
                line-height: 1.5em;
                display: block;
                text-overflow: ellipsis;
                word-wrap: break-word;
                overflow: hidden;
                max-height: 3em;
            }

        .webfeatures .featurebox .fb-bottom {
            text-align: center;
        }
            .webfeatures .featurebox .fb-bottom a {
                   color: #fff;
    font-size: 1.4em;
    text-decoration: none;
    transition: .2s;
    background: #696cff;
    padding: 6px;
    display: table;
    margin: 10px auto;
    border-radius: 50%;
            }

                .webfeatures .featurebox .fb-bottom a:hover {
                    transform: translate(10px)
                }

    .webfeatures .row {
        position: relative
    }

        .webfeatures .row .resultbox {
            background: #fff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 100%;
            width: 98%;
            z-index: 99;
            transform: scale(0);
            opacity: 0;
            transition: .5s;
            box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
            transform-origin: center;
            user-select: none;
            border: 2px solid #97472c;
            border-top: 0;
        }

            .webfeatures .row .resultbox.active {
                transform: scale(1);
                opacity: 1;
            }

            .webfeatures .row .resultbox .rb-header {
                padding: 10px 15px;
                border-bottom: 1px solid #e6e6e6;
                background: #97472c;
                color: #fff;
            }

                .webfeatures .row .resultbox .rb-header .closeResult {
                    transition: .2s;
                    text-decoration: none
                }

                    .webfeatures .row .resultbox .rb-header .closeResult i {
                        font-size: 1.5em;
                        color: #fff;
                    }

                    .webfeatures .row .resultbox .rb-header .closeResult:hover {
                        transform: scale(.75)
                    }

            .webfeatures .row .resultbox .rb-body {
                padding: 30px 15px;
                text-align: center;
            }

                .webfeatures .row .resultbox .rb-body .fb-left {
                    display: inline-block;
                    margin-bottom: 15px;
                }

                    .webfeatures .row .resultbox .rb-body .fb-left span {
                        width: 100px;
                        height: 100px;
                        display: block;
                        margin: auto;
                        background: #f8f2f2;
                        margin-bottom: 15px;
                        border-radius: 100px;
                    }

                        .webfeatures .row .resultbox .rb-body .fb-left span img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            padding: 20px;
                        }

                    .webfeatures .row .resultbox .rb-body .fb-left label, .webfeatures .row .resultbox .rb-body a {
                        display: none;
                    }

                .webfeatures .row .resultbox .rb-body .fb-right {
                }

                    .webfeatures .row .resultbox .rb-body .fb-right h3 {
                        margin-bottom: 15px
                    }

                    .webfeatures .row .resultbox .rb-body .fb-right p {
                        font-size: 1.2em
                    }

.footer {
        background: #383bd9;
    padding: 15px 0;
    color: #fff;
}

    .footer p {
           font-weight: 100;
    margin-bottom: 0;
    }

    .footer .ftSocial {
    }

        .footer .ftSocial a {
            color: #fff;
            opacity: .5;
            transition: .2s;
            margin-left: 15px
        }

            .footer .ftSocial a:hover {
                opacity: 1;
            }

            .footer .ftSocial a > i {
                font-size: 2em
            }


@media(max-width:1440px) {
    .banner {
        height: 600px;
    }
}

@media(max-width:767px) {
.banner h1 {
    margin-top: 38%;
    font-size: 2.5em;
}
.loginStripe {
    margin-top: 0;
}
.loginStripe .loginType:after{display: none;}
.loginStripe .loginType {
    margin-bottom: 10px;
}
}