﻿/*Global styles*/
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    color: #314F72;
    background: #F4F9FC;
    font-family: Nunito;
    overflow-x: hidden;
}

hr {
    border-color: #E0F1FB;
}

    hr.section-separator {
        border-width: 2px;
    }

.btn {
    padding: 10px 18px;
    border-radius: 8px;
    transition: .5s;
}

    .btn:hover, .btn:focus {
        color: #FFF;
    }

.btn-theme-light {
    background: #B3D4EC;
    color: #FFF;
}

    .btn-theme-light:hover, .btn-theme-light:focus {
        color: #FFF;
        background: #314F72;
    }

.btn-theme-light-outline {
    color: #B3D4EC;
    border: 1px solid #B3D4EC;
}

    .btn-theme-light-outline:hover, .btn-theme-light-outline:focus {
        background: #B3D4EC;
        color: #FFF;
    }

.btn-theme-dark {
    background: #314F72;
    color: #FFF;
}

    .btn-theme-dark:hover, .btn-theme-dark:focus {
        color: #FFF;
        background: #294360;
    }

.btn-theme-dark-outline {
    color: #314F72;
    border: 1px solid #314F72;
}

    .btn-theme-dark-outline:hover, .btn-theme-dark-outline:focus {
        background: #314F72;
        color: #FFF;
    }

a:not(.btn) {
    color: #314F72;
}

    a:not(.btn):hover,
    a:not(.btn):focus {
        color: #314F72;
    }

.tooltip-inner {
    background-color: #FFF;
    color: #314F72;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    left: 0;
    border-width: .4rem 0 .4rem .4rem;
    border-left-color: #FFF
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #FFF
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    right: 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #FFF
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #FFF
}
/*Menu styles*/
#navbar {
    transition: top 0.3s;
}

.navbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-light .navbar-nav .nav-link {
    color: #314F72;
    text-align: center;
    margin-left: 10px;
}

    .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
        color: #396EAD;
    }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: #396EAD;
    }

.navbar-fixed {
    background: #FFF;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

    .navbar-fixed .navbar-toggler {
        color: #FFF;
        border: none;
    }

.navbar .dropdown-menu {
    border: none;
    box-shadow: #D5ECFA 0px 3px 10px 2px;
    box-shadow: 0 15px 40px #D5ECFA;
    margin-top: 16px;
}

    .navbar .dropdown-menu .dropdown-item {
        color: #314F72;
    }

        .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus {
            background: #FFF;
            color: #396EAD;
        }

.navbar-light .navbar-toggler {
    border: none;
}
/*Common styles*/
.page-header {
    background: rgb(244,249,252);
    background: -moz-linear-gradient(-45deg, rgba(244,249,252,1) 0%, rgba(182,225,249,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(244,249,252,1) 0%,rgba(182,225,249,1) 100%);
    background: linear-gradient(135deg, rgba(244,249,252,1) 0%,rgba(182,225,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9fc', endColorstr='#b6e1f9',GradientType=1 );
}

    .page-header > div {
        padding-top: 50px;
    }

.page-section {
    min-height: 100vh;
}
/*Home page styles*/
#cover {
}

    #cover .cover-content {
        /*background: url('../images/cover.png') no-repeat;
        background-size: 35%;
        background-position: 90% center;
        margin-bottom: 0px;
        border-bottom-left-radius: 40px;*/
        z-index: 1;
    }

    #cover .container .row {
        min-height: calc(100vh - 50px);
    }

#model .container .row > div {
    text-align: center;
    transition: .5s;
    border-radius: 10px;
    padding-top: 1rem;
}

    #model .container .row > div:hover {
        box-shadow: 0 8px 15px #D5ECFA;
        background: #FFF;
    }

        #model .container .row > div:hover .model-image {
            animation: pulse infinite 1700ms;
        }

    #model .container .row > div .model-image {
        width: 70%;
    }

#features {
    
}

    #features .features-title {
        margin-bottom: 3rem;
        position: relative;
        padding-left: 15px;
        position: sticky;
        top: 0px;
    }

        #features .features-title::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 5px;
            top: 0px;
            left: 0px;
            background: #44E5DF;
        }

    #features .row .graphics {
        padding: 10px;
        /*background: #FFF;
        box-shadow: #D5ECFA 0px 0px 10px 2px;*/
    }

    #features .row:hover .graphics img {
        animation: pulse infinite 2300ms;
    }

    #features .row .details {
        padding: 2rem;
        padding-top: 3rem;
    }

        #features .row .details .title {
            margin-bottom: 3rem;
            position: relative;
            padding-left: 15px;
        }

            #features .row .details .title::after {
                content: '';
                position: absolute;
                height: 100%;
                width: 5px;
                top: 0px;
                left: 0px;
                background: #396EAD;
            }


body > footer {
    background: #E0F1FB;
    box-shadow: inset #D5ECFA 0px 0px 10px 2px;
    margin-top: 5rem;
}

footer a {
    color: #314F72;
}

    footer a:hover, footer a:focus {
        color: #314F72;
    }

.footer-svg-container {
    position: relative;
}
/*footer svg {
    background: #F4F9FC;
}

    footer svg path {
        fill: #E0F1FB;
    }*/
.editorial {
    display: block;
    width: 100%;
    height: 60px;
    max-height: 60px;
    margin: 0;
    z-index: 5;
    bottom: -8px;
    position: absolute;
    left: 0px;
    float: left;
}

.parallax1 > use {
    animation: move-forever1 10s linear infinite;
    &:nth-child(1)

{
    animation-delay: -2s;
}

}

.parallax2 > use {
    animation: move-forever2 8s linear infinite;
    &:nth-child(1)

{
    animation-delay: -2s;
}

}

.parallax3 > use {
    animation: move-forever3 6s linear infinite;
    &:nth-child(1)

{
    animation-delay: -2s;
}

}

.parallax4 > use {
    animation: move-forever4 4s linear infinite;
    &:nth-child(1)

{
    animation-delay: -2s;
}

}

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever4 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}



footer .footer-logo {
    max-height: 80px;
    padding: 10px;
}

footer .page-list {
    list-style: none;
    text-align: right;
    padding: 0px;
}

    footer .page-list li {
        display: inline-block;
        padding-left: 2rem;
    }

        footer .page-list li:first-child {
            padding-left: 0px;
        }

footer .footer-info {
    font-size: 14px;
    margin-bottom: 20px;
}

    footer .footer-info > div > i {
        padding: 15px;
        background: #B3D4EC;
        border-radius: 10px;
        margin-bottom: 10px;
        color: #FFF;
        font-size: 15px;
        /*box-shadow: #B3D4EC 0px 0px 10px 2px;*/
    }

    footer .footer-info > div .input-group input {
        padding: 22px 10px;
        border-radius: 10px 0px 0px 10px;
        border: none;
        box-shadow: none;
    }

    footer .footer-info > div .input-group .btn {
        background: #B3D4EC;
        color: #FFF;
        padding: 5px 15px;
    }

footer .copyright {
    border-top: 2px solid #B3D4EC;
    text-align: center;
    padding: 2rem;
}


/*About Page styles*/
#about {
}

    #about .about-content {
        margin-bottom: 0px;
        padding-top: 50px;
        border-bottom-left-radius: 40px;
        z-index: 1;
    }

#team .card {
    border: none;
    background: #FFF;
    box-shadow: #D5ECFA 0px 0px 10px 2px;
    box-shadow: 0 8px 15px #D5ECFA;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 1rem;
}

    #team .card .card-footer {
        background: #FFF;
        border-radius: 10px;
    }

        #team .card .card-footer a {
            transition: .5s;
            color: #B3D4EC;
        }

            #team .card .card-footer a:hover, #team .card .card-footer a:focus {
                color: #314F72;
            }

#testimonials .carousel {
}

    #testimonials .carousel .carousel-control-prev, #testimonials .carousel .carousel-control-next {
        color: #314F72;
        font-size: 30px;
    }

    #testimonials .carousel .carousel-inner {
        overflow: hidden;
    }

    #testimonials .carousel .carousel-item {
        padding: 15px;
    }

        #testimonials .carousel .carousel-item .img {
            border-radius: 100%;
            border: #FFF solid 9px;
            box-shadow: 0 8px 15px #D5ECFA;
        }
/*Services page styles*/
#services {
}

    #services .services-content {
        margin-bottom: 0px;
        padding-top: 50px;
        border-bottom-left-radius: 40px;
        z-index: 1;
    }

#services-list .row:hover .graphics img {
    animation: pulse infinite 2300ms;
}

#services-list .details .technologies i {
    font-size: 30px;
    color: #B3D4EC;
    transition: .5s;
}

    #services-list .details .technologies i:hover {
        color: #314F72;
    }

#clients .card {
    border: none;
    box-shadow: 0 8px 15px #D5ECFA;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 2rem;
}
/*Application page styles*/

#application .application-image {
    border-radius: 10px;
    box-shadow: 0 8px 15px #D5ECFA;
}

#application #ApplicationCarousal .carousel-control-next i, #application #ApplicationCarousal .carousel-control-prev i {
    background: #314F72;
    border-radius: 8px;
    font-size: 30px;
    color: #FFF;
    margin-bottom: 15px;
}

#application #ApplicationCarousal .carousel-control-prev, #application #ApplicationCarousal .carousel-control-next {
    align-items: flex-end;
}

#application #ApplicationCarousal .carousel-indicators li {
    background-color: #314F72;
}

#pricing .card {
    border: none;
    box-shadow: 0 8px 15px #D5ECFA;
    border-radius: 10px;
}

    #pricing .card hr {
        border-color: #B3D4EC;
    }

    #pricing .card .list-group .list-group-item {
        border-color: #B3D4EC;
        border: none;
    }

    #pricing .card .btn-subscribe {
        color: #B3D4EC;
        border: #B3D4EC 1px solid;
        border-radius: 8px;
        padding: 10px 18px;
        transition: .5s;
    }

        #pricing .card .btn-subscribe:hover, #pricing .card .btn-subscribe:focus {
            background: #B3D4EC;
            color: #FFF;
        }

        #pricing .card .btn-subscribe.suggested {
            background: #314F72;
            border-color: #314F72;
            color: #FFF;
        }

#contact .card {
    box-shadow: 0 8px 15px #D5ECFA;
    border-radius: 10px;
}

    #contact .card .contact-form {
    }

        #contact .card .contact-form .form-control {
            border: none;
            background: #F4F9FC;
            color: #314F72;
            border-radius: 8px;
        }

#contact .contact-graphic {
    background: url(../images/Contact.png) no-repeat;
    background-size: contain;
    background-position: center center;
    background: rgb(244,249,252);
    background: -moz-linear-gradient(-45deg, rgba(244,249,252,1) 0%, rgba(182,225,249,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(244,249,252,1) 0%,rgba(182,225,249,1) 100%);
    background: linear-gradient(135deg, rgba(244,249,252,1) 0%,rgba(182,225,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9fc', endColorstr='#b6e1f9',GradientType=1 );
}

    #contact .contact-graphic img {
        margin-left: -50px;
    }

#contact-details .card {
    border: none;
    box-shadow: 0 8px 15px #D5ECFA;
    border-radius: 10px;
}

#contact-details .contact-info {
    padding: 1.5rem;
    font-size: 14px;
    text-align: center;
    margin-top: 1rem;
}

    #contact-details .contact-info > div > i {
        padding: 20px;
        background: rgb(244,249,252);
        background: -moz-linear-gradient(-45deg, rgba(244,249,252,1) 0%, rgba(182,225,249,1) 100%);
        background: -webkit-linear-gradient(-45deg, rgba(244,249,252,1) 0%,rgba(182,225,249,1) 100%);
        background: linear-gradient(135deg, rgba(244,249,252,1) 0%,rgba(182,225,249,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9fc', endColorstr='#b6e1f9',GradientType=1 );
        border-bottom-left-radius: 40px;
        border-radius: 10px;
        margin-bottom: 10px;
        color: #FFF;
        font-size: 20px;
        /*box-shadow: #B3D4EC 0px 0px 10px 2px;*/
    }

    #contact-details .contact-info > div .title {
        font-weight: bold;
    }

#contact-details #map {
    position: relative;
    text-align: right;
    height: 300px;
    width: 100%;
    border-radius: 10px;
}

    #contact-details #map .gmap_canvas {
        overflow: hidden;
        background: none !important;
        height: 300px;
        width: 100%;
    }

        #contact-details #map .gmap_canvas iframe#gmap_canvas {
            height: 300px;
            width: 100%;
            border-radius: 10px;
        }

#contact-details .social-info {
    text-align: center;
}

    #contact-details .social-info .social-icon {
        text-align: center;
    }

        #contact-details .social-info .social-icon:hover, #contact-details .social-info .social-icon:focus {
            text-decoration: none;
        }

        #contact-details .social-info .social-icon i {
            height: 50px;
            width: 50px;
            padding: 17px;
            background: #B3D4EC;
            border-radius: 10px;
            color: #FFF;
            font-size: 20px;
            margin: 5px;
            transition: .5s;
        }

        #contact-details .social-info .social-icon:hover i, #contact-details .social-info .social-icon:focus i {
            background: #1E3F7A;
        }

#dropCV .custom-file label {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px 15px;
    height: 54px;
}

    #dropCV .custom-file label::after {
        border-radius: 10px;
        top: 0px;
        right: 0px;
        height: 54px;
        padding: 12px 25px;
        background: #B3D4EC;
        color: #FFF;
        border: solid #FFF 3px;
    }

#dropCV .custom-file.error label {
    border: 1px solid #DC3545;
    height: 56px;
}

#dropCV .custom-file.error .custom-file-input:focus ~ .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25)
}

#videos .video-container iframe {
    width: 100%;
    height: 250px;
}

@media (max-width: 768px) {
    .cover-content .display-4, #about .display-4, .page-header .display-4 {
        font-size: 2.5rem;
    }

    footer .page-footer-logo h3 {
        font-size: 1.5rem;
    }

    footer .page-list {
        text-align: left;
    }

        footer .page-list li {
            padding-left: 1rem;
        }
}

@media (max-width: 576px) {
    .navbar {
        padding: 0.5rem;
    }
}

@media (max-width: 992px) {
    .navbar {
        padding: 0.5rem;
        background: #FFFFFF;
    }

        .navbar .dropdown-menu {
            box-shadow: none;
            background: #F4F9FC;
            margin-top: 0px;
        }

    .navbar-light .navbar-nav .nav-link {
        text-align: left;
    }
}
