/*------------------------------
    01. START FONT COLOR
------------------------------*/

body {
    color: #1d1d1d;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title h3,
.why-us h3,
.main-features .one-feature h5,
.recent-news .recent-news-slider .item h3,
.download-app h2,
.git-in-touch .contact-info .info-box h5,
.git-in-touch .contact-info .info-box a,
.blog-page .blog-box .blog-details h3 a,
aside.sidebar .categories ul li a,
aside.sidebar .recent-post .post h4 a,
aside.sidebar .tags ul li a,
.single-blog-page .blog-box .blog-details h3 {
    color: #0a0a0a;
}

/*------------------------------
    01. END FONT COLOR
------------------------------*/

/*------------------------------
    02. START MAIN COLOR
------------------------------*/
.themes-colors span,
.preloader,
.btn-theme.btn-colord:before,
.background-withcolor,
.foxapp-header.sticky,
.foxapp-header .dropdown-menu .dropdown-item:hover,
.foxapp-header .dropdown-menu .dropdown-item.active,
.box,
.clients-testimonial .testimonial-slider .item .client-testimonial,
.clients-testimonial .testimonial-slider .slick-dots li.slick-active button,
.prices .price-table .bottom,
.prices .price-table .top .offer,
.our-team .team-slider .slick-dots li.slick-active button,
.recent-news .recent-news-slider .slick-dots li.slick-active button,
.faq .accordion .card .card-header h5 .btn.collapsed,
nav .pagination .page-item.active .page-link,
aside.sidebar .gray-panel h3:after {
    background: #ffffff;
}

@media (max-width: 992px) {
    .foxapp-header {
        background: #ffffff00;
    }
}


a,
.btn-white,
.lnr,
.section-title h3 span,
.other-features .other-features-slider .item h4,
.clients-testimonial .testimonial-slider .item .client-info h3,
.fun-facts .fact-box h5,
.fun-facts .fact-box h6,
.prices .price-table .top h4,
.prices .price-table .top h3,
.prices .price-table .top h5,
.our-team .team-slider .person h3,
footer .subscribe .subscribe-form h4,
.blog-page .blog-box:hover .blog-details h3 a,
.single-blog-page .blog-box .post-tag-area ul li a:hover,
.comments-container .comments-list li .reply:hover {
    color: #000000;
}

.main-features .features-circle:before,
.clients-testimonial .testimonial-slider .item .client-info figure,
.faq .accordion,
.faq .accordion .card .card-header h5:after,
.git-in-touch .form-group .form-control,
footer .subscribe .subscribe-form .form-group .form-control,
aside.sidebar .search .form-group .form-control,
.single-blog-page .blog-box .blog-details blockquote,
.comments-form .form-group .form-control {
    border-color: #ffffff;
/*
    - Template Name: Fox
    - Template URI: 
    - Author: Mohamed Kamel
    - Author URI: https://www.facebook.com/M.Kamel090
    - Description: Fox This is html5 template for App Landing Page
    - Version: 1.0
    - Tags: HTML, Mobile App, Template, Landing Page , Responsive, Bootstrap 4 
*/

/* ----------------------------------------------------
    CSS INDEX        

    01. START GENERAL STYLE (font, body, btn, section-title, section-padding, margins ... etc)
    02. START PRELOADER STYLE
    03. START HEADER STYLE
    04. START SLIDE STYLE
    05. START BOXES SECTION
    06. START WHY US SECTION
    07. START MAIN FEATURES SECTION
    08. START OTHER FEATURES SECTION
    09. START WATCH VIDEO SECTION
    10. START SCREENSHOTS SECTION
    11. START TESTIMONIAL SECTION
    12. START FUN FACTS SECTION
    13. START PRICE TABLE SECTION
    14. START TEAM SECTION
    15. START FAQ SECTION
    16. START LOGOS SECTION
    17. START RECENT NEWS SECTION
    18. START DOWNLOAD APP SECTION
    19. START GET IN TOUCH SECTION
    20. START MAP SECTION
    21. START FOOTER SECTION
    22. START BLOG PAGE
    23. START SIDEBAR
    24. START SINGLE BLOG PAGE

/* ----------------------------------------------------*/

/*------------------------------
    01. START GENERAL STYLE
------------------------------*/
    @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin-ext');
    body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    position: relative;
    overflow-x: hidden;
}
    p {
    font-weight: 600;
    line-height: 30px;
}

.lnr {
    display: inline-block;
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: -0.05em;
}
    a:focus {
    outline: none;
    outline-offset: none;
}
    a:hover {
    text-decoration: none;
}


.background-fullwidth {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.background-fixed {
    background-attachment: fixed;
}

.form-control:
    focus {
    outline: none;
    box-shadow: none;
}

.height-100 {
    height: 100vh;
    min-height: 600px;
}

.btn-primary {
    padding: 15px 45px;
    font-weight: 700;
    font-size: 16px;
    display: inline-block;
}

.btn-colord {
    color: #fff;
}

.btn-colord:
    hover {
    color: #fff;
}

.btn-white {
    background: #fff;
}

.btn-theme {
    position: relative;
    overflow: hidden;
    outline: none !important;
    border: none;
    box-shadow: 6px 7px #1e1e1e !important;
}

.btn-theme:
    hover,
.prices .price-table:hover .btn-theme {
    color: #fff;
}

.btn-theme.btn-white:
    before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    background: #fff;
}

.btn-theme.btn-colord:
    before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

.btn-theme:
    hover:before,
.prices .price-table:hover .btn-theme:before {
    opacity: 0 !important;
}

.btn-theme>
    span {
    position: relative;
}

.shadow {
    box-shadow: 0.5px 0.866px 10px 0px rgb(0, 0, 0);
}
    a,
.btn-white,
.btn-theme:before,
.foxapp-header .dropdown-menu .dropdown-item,
.slide .content-bottom,
.slide .content-bottom h2,
.boxes .box:hover .lnr,
.other-features .other-features-slider .item,
.screenshots .screenshots-slider .item,
.clients-testimonial .testimonial-slider .slick-dots li,
.clients-testimonial .testimonial-slider .slick-dots li button,
.our-team .team-slider .person,
.our-team .team-slider .person h3,
.our-team .team-slider .person ul,
.our-team .team-slider .person ul li a,
.our-team .team-slider .slick-dots li,
.our-team .team-slider .slick-dots li button,
.faq .accordion .card .card-header h5 .btn,
.faq .accordion .card .card-header h5 .btn:before,
.faq .accordion .card .card-header h5 .btn:after,
.recent-news .recent-news-slider .slick-dots li,
.recent-news .recent-news-slider .slick-dots li button,
.download-app a,
footer .subscribe .subscribe-form-2 label,
footer .subscribe .subscribe-form-2 .form-group {
    transition: all ease 0.3s;
}

.space-15 {
    height: 15px;
}

.space-20 {
    height: 20px;
}

.space-25 {
    height: 25px;
}

.space-50 {
    height: 50px;
}
.space-130 {
    height: 130px;
}
.space-140 {
    height: 140px;
}
.padding-100 {
    padding: 100px 0;
}


.lity-close {
    text-shadow: none !important;
}

.lity-content:
    after {
    box-shadow: none !important;
}

.section-title
    h3 {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
}

.section-title
    h3 span.white {
    color: #fff !important;

}

.section-title
    p {
    font-size: 18px;
    font-weight: 600;
    max-width: 750px;
    margin: 0 auto;
}
    @media (max-width: 768px) {
    .section-title h3 {
        font-size: 40px;
    }
}

/*------------------------------
    01. END GENERAL STYLE
------------------------------*/

/*------------------------------
    02. START PRELOADER STYLE
------------------------------*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loader-wrapper {
    width: 70px;
    height: 35px;
    overflow: hidden;
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 35px);
}

.loader {
    width: 70px;
    height: 70px;
    border-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotate 3s ease-in-out infinite;
    transform: rotate(-200deg)}
    @keyframes rotate {
    0% {
        border-width: 10px;
    }

    25% {
    border-width: 3px;
    }

    50% {
    transform: rotate(115deg);
    border-width: 10px;
    }

    75% {
    border-width: 3px;
    }

    100% {
    border-width: 10px;
    }
}

/*------------------------------
    02. End Preloader Style
------------------------------*/

/*------------------------------
    03. START HEADER STYLE
------------------------------*/

.foxapp-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-radius: 0;
    border: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.foxapp-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 13px 35px -12px rgba(0, 0, 0, 0.15);
    animation: menu_sticky 0.7s ease-in-out;
}
    @keyframes menu_sticky {
    0% {
        margin-top: -120px;
    opacity: 0;
    }

    50% {
    margin-top: -64px;
    opacity: 0;
    }

    100% {
    margin-top: 0;
    opacity: 1;
    }
}

.foxapp-header .navbar {
    padding: 0;
}

.foxapp-header .navbar-light .navbar-toggler {
    border-color: #fff;
    outline: none;
}

.foxapp-header .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='' stroke-miterlimit='0' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link {
    color: #fff;
    /* margin: 20px 10px; */
    font-weight: 400;
    position: relative;
    padding: 20px;
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link:
    before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    background-color: #fff;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link:
    hover:before {
    width: 100%;
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link.active:
    before {
    width: 100%;
}

.foxapp-header .dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: 0;
    transform: translateY(-15px);
    animation: hide_dropdown_menu 0.2s ease-in-out;
    display: block;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .04);
    height: 0;
    transition: all ease 0.1s;
}
    @keyframes hide_dropdown_menu {
    0% {
        transform: translateY(0);
    opacity: 1;
    }

    100% {
    transform: translateY(15px);
    opacity: 0;
    }
}

.foxapp-header .dropdown-menu.show {
    animation: show_dropdown_menu 0.2s ease-in-out forwards;
    visibility: visible;
    height: auto;
}
    @keyframes show_dropdown_menu {
    0% {
        transform: translateY(15px);
    opacity: 0;
    }

    100% {
    transform: translateY(0);
    opacity: 1;
    }
}

.foxapp-header .dropdown-menu .dropdown-item {
    padding: .75rem 1.5rem;
}

.foxapp-header .dropdown-menu .dropdown-item:
    hover {
    color: #fff;
}
    @media (max-width: 992px) {
    .foxapp-header {
        padding: 1em;
    }

    .foxapp-header .dropdown-menu {
    display: none;
    }

    .foxapp-header .dropdown-menu.show {
    display: block;
    }

    .foxapp-header .navbar .navbar-nav .nav-item>.nav-link {
    padding: 10px;
    }

    .foxapp-header .dropdown-menu .dropdown-item {
    padding: 10px;
    }
}

/*------------------------------
    03. End HEADER STYLE
------------------------------*/

/*------------------------------
    04. START SLIDE STYLE
------------------------------*/

.slide {
    position: relative;
}

.slide:
    before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 67%;
    height: 100%;
    z-index: 0;
    background: #fff;
    top: 0;
}

.slide .content-bottom {
    padding-top: 200px;
    position: relative;
    z-index: 1;
}

.slide .content-bottom
    h2 {
    font-size: 90px;
    font-weight: 700;
    color: #e10318;
    text-transform: uppercase;
    line-height: 90px;
}

.slide .content-bottom
    p {
    color: #1d1d1d;
    max-width: 400px;
}
    @media (max-width: 1366px) {
    .slide .content-bottom {
        padding-top: 170px;
    }
}
    @media (min-width: 992px) {
    .slide .content-bottom img {
        /* max-width: 400px; */}
}
    @media (max-width: 768px) {
    .slide .content-bottom h2 {
        font-size: 60px;
    line-height: 60px;
    }
}

/*------------------------------
    04. END SLIDE STYLE
------------------------------*/

/*------------------------------
    05. START BOXES SECTION
------------------------------*/

.boxes .box {
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.boxes .box:
    after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 5px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.boxes .box:
    hover:after {
    width: 100%;
}

.boxes .box .icon {
    padding: 25px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 110px;
    height: 110px;
}

.boxes .box .lnr {
    font-size: 55px;
    line-height: 60px;
}

.boxes .box
    h4 {
    color: #fff;
    margin: 0;
    font-weight: 900;
}

.boxes .box
    p {
    color: #fff;
    margin: 0 auto;
    font-size: 18px;
}
    @media (max-width: 767px) {
    .boxes .box {
        margin-bottom: 30px;
    }
}

/*------------------------------
    05. END BOXES SECTION
------------------------------*/

/*------------------------------
    06. START WHY US SECTION
------------------------------*/

.why-us
    h3 {
    font-size: 40px;
    font-weight: 900;
}

.why-us
    p {
    font-weight: 400;
    margin: 0;
}

.why-us .why-us-icon {
    margin-bottom: 20px;
}

.why-us .why-us-icon .lnr {
    font-size: 35px;
}

/*------------------------------
    06. END WHY US SECTION
------------------------------*/

/*------------------------------
    07. START MAIN FEATURES SECTION
------------------------------*/

.main-features .features-circle {
    position: relative;
}

.features-circle .circle-svg {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    z-index: -1;
    max-width: 100%;
    margin: 0 auto;
}

.features-circle
    svg g {
    transform-origin: 50%;
}

.main-features .one-feature {
    margin-bottom: 5em;
}

.main-features .one-feature
    h5 {
    font-size: 20px;
    line-height: 45px;
    display: inline-block;
    margin: 0 10px .5rem;
}

.main-features .one-feature .lnr {
    font-size: 35px;
}

.main-features .one-feature
    p {
    margin-bottom: 0;
}

.main-features .left-side .one-feature
    span {
    float: right;
}

.main-features .left-side .one-feature:nth-child(3),
.main-features .right-side .one-feature:nth-child(3) {
    margin-bottom: 0;
}

.main-features .right-side .one-feature
    span {
    float: left;
}
    @media (min-width: 992px) {

    .main-features .left-side .one-feature:nth-child(1),
    .main-features .left-side .one-feature:nth-child(3) {
        position: relative;
    left: 50px;
    }

    .main-features .right-side .one-feature:nth-child(1),
    .main-features .right-side .one-feature:nth-child(3) {
    position: relative;
    right: 50px;
    }
}
    @media (max-width: 992px) {
    .main-features .one-feature {
        margin-bottom: 1.5em;
    }

    .main-features .left-side .one-feature span {
    float: left;
    }
}
    @media (max-width: 414px) {
    .features-circle svg {
        max-width: 100%;
    height: 410px;
    }
}
    @media (max-width: 375px) {
    .features-circle svg {
        height: 350px;
    }
}

/*------------------------------
    07. END MAIN FEATURES SECTION
------------------------------*/

/*------------------------------
    08. START OTHER FEATURES SECTION
------------------------------*/

.other-features .other-features-slider {
    margin: 0 -15px;
}

.other-features .other-features-slider .item {
    background: #fff;
    padding: 2em 1em;
    border-radius: 50px;
    opacity: 0.6;
    margin: 0 35px;
    outline: none;
    cursor: pointer;
}

.other-features .other-features-slider .item.slick-center {
    opacity: 1;
}

.other-features .other-features-slider .item
    span {
    margin-bottom: 20px;
    display: inline-block;
}

.other-features .other-features-slider .item .lnr {
    font-size: 40px;
}

.other-features .other-features-slider .item
    h4 {
    font-size: 20px;
}

.other-features .other-features-slider .item
    p {
    max-width: 300px;
    margin: 0 auto;
}

/*------------------------------
    08. END OTHER FEATURES SECTION
------------------------------*/

/*------------------------------
    09. START WATCH VIDEO SECTION
------------------------------*/
.watch-video .video {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.watch-video .video:
    before {
    position: absolute;
    content: '';
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
}

.watch-video .video
    img {
    position: relative;
}

.watch-video .video
    a {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    animation: ripple_shadow 2s linear infinite;
}

.watch-video .video
    a:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-left: 25px solid #fff;
    border-bottom: 17px solid transparent;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
    @keyframes ripple_shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    }

    100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    }
}

/*------------------------------
    09. END WATCH VIDEO SECTION
------------------------------*/


/*------------------------------
    10. START SCREENSHOTS SECTION
------------------------------*/

.screenshots .screenshots-slider {
    margin: 0 -15px;
}

.screenshots .screenshots-slider .item {
    opacity: 0.6;
    margin: 0 35px;
    outline: none;
    cursor: pointer;
}

.screenshots .screenshots-slider .item.slick-center {
    opacity: 1;
}

/*------------------------------
    10. END SCREENSHOTS SECTION
------------------------------*/

/*------------------------------
    11. START TESTIMONIAL SECTION
------------------------------*/

.clients-testimonial .testimonial-slider {
    margin-bottom: 60px;
}

.clients-testimonial .testimonial-slider .item {
    outline: none;
    margin: 0px 30px 0 0;
    background: #e10318;
}

.clients-testimonial .testimonial-slider .item .client-testimonial {
    padding: 10em 3em 0em 3em;
    position: relative;
    min-height: 370px;
}

.clients-testimonial .testimonial-slider .item .client-testimonial:
    after {
    /* position: absolute; */
    /* content: ''; */
    bottom: -15px;
    width: 0;
    left: 45px;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: transparent transparent transparent transparent;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p {
    color: #fff;
    font-size: 17px;
    margin: 0;
    position: relative;
    font-weight: 400;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:after,
.clients-testimonial .testimonial-slider .item .client-testimonial p:before {
    position: absolute;
    font-size: 400px;
    opacity: 0.2;
    color: #fff;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:before {
    content: '\f10d';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 85px;
    font-weight: 900;
    line-height: 85px;
    top: -50px;
    left: -40px;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f10e';
    font-size: 85px;
    font-weight: 900;
    line-height: 85px;
    bottom: -50px;
    right: -40px;
}

.clients-testimonial .testimonial-slider .item .client-info {
    padding: 30px 15px 89px 15px;
}

.clients-testimonial .testimonial-slider .item .client-info
    figure {
    width: 60px;
    height: 60px;
    border: 3px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 15px;
}

.clients-testimonial .testimonial-slider .item .client-info
    h3 {
    font-size: 20px;
    margin: 0;
}

.clients-testimonial .testimonial-slider .slick-dots {
    bottom: -60px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li button:before {
    display: none;
}

.clients-testimonial .testimonial-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #dcdfe7;
    margin: 0 auto;
}

/*------------------------------
    11. END TESTIMONIAL SECTION
------------------------------*/

/*------------------------------
    12. START FUN FACTS SECTION
------------------------------*/

.fun-facts .fact-box {
    padding: 2em;
    background: #fff;
    border-radius: 50px;
    margin-bottom: 1em;
}

.fun-facts .fact-box .lnr {
    font-size: 50px;
    margin: 10px 0 20px;
}

.fun-facts .fact-box
    h5 {
    font-size: 55px;
    font-weight: 900;
}

.fun-facts .fact-box
    h6 {
    font-size: 25px;
}

/*------------------------------
    12. END FUN FACTS SECTION
------------------------------*/

/*------------------------------
    13. START PRICE TABLE SECTION
------------------------------*/

.prices .price-table {
    margin-bottom: 30px;
}

.prices .price-table .top {
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.prices .price-table .top .offer {
    width: 200px;
    font-weight: 300;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: -58px;
    top: 30px;
    padding: 2px 0;
    letter-spacing: 2px;
    transform: rotate(-45deg);
}

.prices .price-table .top
    h4 {
    font-size: 25px;
    font-weight: 600;
}

.prices .price-table .top
    h3 {
    font-size: 80px;
    font-weight: 600;
    margin: 0;
}

.prices .price-table .top
    h3 span {
    font-size: 20px;
}

.prices .price-table .top
    h5 {
    font-size: 16px;
    margin: 0;
}

.prices .price-table .bottom {
    padding: 25px 0;
}

.prices .price-table .bottom
    ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prices .price-table .bottom
    ul li {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    border-bottom: 1px solid #f6f6f647;
    padding: 15px;
}

/*------------------------------
    13. END PRICE TABLE SECTION
------------------------------*/

/*------------------------------
    14. START TEAM SECTION
------------------------------*/

.our-team .team-slider .person {
    background: #fff;
    padding: 30px;
    margin: 0 15px;
    position: relative;
    margin-bottom: 100px;
    outline: none;
}

.our-team .team-slider .person
    img {
    border-radius: 50%;
    width: 130px;
}

.our-team .team-slider .person
    h3 {
    font-weight: 800;
    font-size: 18px;
    margin: 0;
}

.our-team .team-slider .person
    h5 {
    font-size: 16px;
    margin: 0;
}

.our-team .team-slider .person
    p {
    margin: 0;
}

.our-team .team-slider .person
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    z-index: -1;
    background: #fff;
}

.our-team .team-slider .person
    ul li {
    display: inline-block;
}

.our-team .team-slider .person
    ul li a {
    display: block;
    padding: 5px;
    width: 35px;
    border-radius: 50%;
}

.our-team .team-slider .person:
    hover ul {
    transform: translateY(100%);
}

.our-team .team-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.our-team .team-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.our-team .team-slider .slick-dots
    li button:before {
    display: none;
}

.our-team .team-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #fff;
    margin: 0 auto;
}

/*------------------------------
    14. END TEAM SECTION
------------------------------*/

/*------------------------------
    15. START FAQ SECTION
------------------------------*/

.faq .accordion .card {
    margin-bottom: 1em;
    border-radius: 28px !important;
    overflow: hidden;
    background: #fff;
}

.faq .accordion .card,
.faq .accordion .card .card-header {
    border: none;
}

.faq .accordion .card .card-header {
    padding: 0;
}

.faq .accordion .card .card-header
    h5 .btn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    white-space: unset;
    text-decoration: none;
    padding: 15px 60px 15px 30px;
    color: #2a3659;
    position: relative;
}

.faq .accordion .card .card-header
    h5 .btn:before,
.faq .accordion .card .card-header h5 .btn:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: #ccc;
}

.faq .accordion .card .card-header
    h5 .btn:before {
    width: 2px;
    height: 12px;
    right: 30px;
}

.faq .accordion .card .card-header
    h5 .btn:after {
    width: 12px;
    height: 2px;
    right: 25px;
}

.faq .accordion .card .card-header
    h5 .btn.collapsed:before,
.faq .accordion .card .card-header h5 .btn.collapsed:after {
    background: #fff;
    transform: translateY(-50%) rotate(0deg);
}

.faq .accordion .card .card-header
    h5 .btn.collapsed {
    color: #fff;
}

.faq .accordion .card .card-body {
    padding: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

/*------------------------------
    15. END FAQ SECTION
------------------------------*/

/*------------------------------
    16. START LOGOS SECTION
------------------------------*/

.logos {
    padding: 35px 0;
}

.logos .logos-slider .item {
    outline: none;
    margin: 0 30px;
}
    @media (max-width: 768px) {
    .logos .logos-slider .slick-next {
        right: 0;
    }

    .logos .logos-slider .slick-prev {
    left: 0;
    z-index: 1;
    }
}

/*------------------------------
    16. END LOGOS SECTION
------------------------------*/

/*------------------------------
    17. START RECENT NEWS SECTION
------------------------------*/

.recent-news .recent-news-slider .item {
    outline: none;
    margin-bottom: 100px;
}

.recent-news .recent-news-slider .item
    h3 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}

.recent-news .recent-news-slider .item
    p {
    font-size: 18px;
    margin: 0;
}

.news-meta {
    padding: 0;
    list-style: none;
    margin: 0;
}

.news-meta
    li {
    display: inline-block;
    font-size: 14px;
    color: #c2c2c2;
    margin-right: 15px;
}

.news-meta
    ul li span {
    margin-right: 5px;
}

.recent-news .recent-news-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.recent-news .recent-news-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.recent-news .recent-news-slider .slick-dots
    li button:before {
    display: none;
}

.recent-news .recent-news-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #dcdfe7;
    margin: 0 auto;
}
    @media (max-width: 768px) {
    .recent-news .recent-news-slider .item h3 {
        margin-top: 15px;
    }
}

/*------------------------------
    17. END RECENT NEWS SECTION
------------------------------*/

/*------------------------------
    18. START DOWNLOAD APP SECTION
------------------------------*/

.download-app
    h2 {
    font-size: 40px;
    font-weight: 900;
}

.download-app
    p {
    font-size: 18px;
}

.download-app
    a {
    position: relative;
    padding-left: 80px;
    text-align: left;
    text-transform: none;
    margin-right: 30px;
}

.download-app
    a:last-child {
    margin: 0;
}

.download-app
    a i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    left: 35px;
}
    @media (max-width: 414px) {
    .download-app a {
        padding: 10px;
    padding-left: 55px;
    padding-right: 20px;
    font-size: 12px;
    margin-right: 10px;
    }

    .download-app a i {
    left: 20px;
    font-size: 25px;
    }

    .download-app a:
    last-child {
        margin: 0;
    }
}

/*------------------------------
    18. END DOWNLOAD APP SECTION
------------------------------*/

/*------------------------------
    19. START GET IN TOUCH SECTION
------------------------------*/
.git-in-touch .form-group {
    position: relative;
}

.git-in-touch .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    margin-bottom: 1.5em;
}

.git-in-touch .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.git-in-touch .form-group .form-control:
    focus~.focus-border {
    width: 100%;
}

.git-in-touch .form-group .form-control:
    focus {
    outline: none;
    box-shadow: none;
}

.git-in-touch .contact-info .info-box {
    padding: 1em 2em;
}

.git-in-touch .contact-info .info-box
    span {
    display: block;
    margin-bottom: 20px;
}

.git-in-touch .contact-info .info-box .lnr {
    font-size: 60px;
    text-align: center;
    margin: 0 auto 20px;
}

.git-in-touch .contact-info .info-box
    h5,
.git-in-touch .contact-info .info-box a {
    font-size: 18px;
    line-height: 30px;
    display: block;
}

/*------------------------------
    19. END GET IN TOUCH SECTION
------------------------------*/

/*------------------------------
    20. START MAP SECTION
------------------------------*/
.map {
    line-height: 0;
}

.map
    iframe {
    width: 100%;
    height: 500px;
}


/*------------------------------
    20. END MAP SECTION
------------------------------*/

/*------------------------------
    21. START FOOTER SECTION
------------------------------*/
    footer {
    background: #e10318;
}
    footer .subscribe .subscribe-form {
    background: #fff;
    padding: 25px;
    position: relative;
    overflow: hidden;
    border-radius: 80px;
}
    footer .subscribe .subscribe-form .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 14px 20px;
    background: transparent;
    margin-bottom: 0;
    background: rgba(158, 158, 158, 0.1);
    border-radius: 50px;
    border: none;
}
    footer .subscribe .subscribe-form .form-group .form-control:focus {
    outline: none;
    box-shadow: none;
}
    footer .footer-widgets .widget {
    color: #fff;
    margin-bottom: 1em;
}
    footer .footer-widgets .widget img {
    margin-bottom: 15px;
}
    footer .footer-widgets .widget h6 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1.5em;
    color: #fff;
}
    footer .footer-widgets .widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
    footer .footer-widgets .widget ul li {
    margin-bottom: 1em;
    line-height: 30px;
}
    footer .footer-widgets .widget ul li span {
    color: #fff;
}
    footer .footer-widgets .widget ul li a {
    color: #fff;
}
    footer .copyright {
    padding: 15px 0;
    border-top: 1px solid #fff;
    margin: 0 5%;
}
    footer .copyright p {
    font-weight: 400;
    margin: 0;
    line-height: 40px;
    color: #fff;
}

/*------------------------------
    21. END FOOTER SECTION
------------------------------*/


/*------------------------------
    22. START BLOG PAGE
------------------------------*/
.page-head {
    position: relative;
    padding: 125px 0;
}

.page-head
    h1 {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
    padding: 100px 0 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 15px;
}

.blog-page .blog-box {
    margin-bottom: 30px;
}

.blog-page .blog-box .blog-details {
    padding: 0 15px}

.blog-page .blog-box .blog-details
    h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

.blog-page .blog-box .blog-img
    a {
    display: block;
}

.blog-page .blog-box .blog-img
    a img {
    width: 100%;
}

.blog-page .blog-box .blog-details
    h3 a {
    transition: all ease 0.3s;
}

.blog-page .blog-box .blog-details
    p {
    font-size: 14px;
    line-height: 25px;
    margin: 0;
}
    nav .pagination {
    padding: 15px 35px;
    margin: 0 auto;
    justify-content: center;
}
    nav .pagination li:first-child a,
nav .pagination li:last-child a {
    line-height: 28px;
    border-radius: 50% !important;
    background: transparent !important;
}
    nav .pagination li {
    margin: 0 10px;
}
    nav .pagination li a {
    font-size: 14px;
    border-radius: 50%;
    border: none;
    color: #000;
    padding: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 24px;
    background: transparent;
}
    nav .pagination li a:hover {
    color: #1d1d1d;
    background: rgba(158, 158, 158, 0.1);
}
    @media (max-width: 992px) {
    nav .pagination {
        margin-bottom: 30px;
    }
}

/*------------------------------
    22. END BLOG PAGE
------------------------------*/

/*------------------------------
    23. START SIDEBAR 
------------------------------*/
    aside.sidebar .gray-panel {
    background: rgba(158, 158, 158, 0.1);
    padding: 15px 30px;
    margin-bottom: 30px;
}
    aside.sidebar .search .form-group {
    position: relative;
}
    aside.sidebar .search .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    background: transparent;
}
    aside.sidebar .search .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
    aside.sidebar .search .form-group .form-control:focus~.focus-border {
    width: 100%;
}
    aside.sidebar .gray-panel h3 {
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    position: relative;
    margin-bottom: 15px;
}
    aside.sidebar .gray-panel h3:after {
    position: absolute;
    width: 50px;
    height: 2px;
    background: #000;
    content: '';
    bottom: 0;
    left: 0;
}
    aside.sidebar .follow-me ul {
    padding: 0;
    list-style: none;
    margin: 0 0 20px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}
    aside.sidebar .follow-me ul li {
    margin-right: 10px;
    margin-bottom: 10px;
}
    aside.sidebar .follow-me ul li a {
    font-size: 30px;
    height: 80px;
    width: 60px;
    background: #ccc;
    display: block;
    text-align: center;
    line-height: 80px;
    color: #fff;
}
    aside.sidebar .follow-me ul li.facebook a {
    background: #4B69B1;
}
    aside.sidebar .follow-me ul li.instagram a {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
    aside.sidebar .follow-me ul li.linkedin a {
    background: #1278B6;
}
    aside.sidebar .follow-me ul li.twitter a {
    background: #2BB2E1;
}
    aside.sidebar .categories ul {
    padding: 0;
    list-style: none;
    margin: 0 0 20px;
}
    aside.sidebar .categories ul li a {
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 7px;
    display: block;
}
    aside.sidebar .categories ul li:last-child a {
    margin: 0;
}
    aside.sidebar .recent-post .post {
    margin-bottom: 15px;
}
    aside.sidebar .recent-post .post figure {
    height: 60px;
    margin: 0 10px 0 0;
    flex: 0 0 60px;
}
    aside.sidebar .recent-post .post h4 {
    font-weight: 600;
    font-size: 16px;
}
    aside.sidebar .tags ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
    aside.sidebar .tags ul li {
    display: inline-block;
    margin: 0 20px 15px 0;
}

/*------------------------------
    23. END SIDEBAR 
------------------------------*/


/*------------------------------
    24. START SINGLE BLOG PAGE
------------------------------*/
.single-blog-with-sidebar {
    padding-bottom: 100px;
}

.single-blog-page .blog-box .blog-details {
    padding: 0 15px}

.single-blog-page .blog-box .blog-details
    h3 {
    font-size: 22px;
    font-weight: 900;
    margin: 0;
}

.single-blog-page .blog-box .blog-img
    img {
    width: 100%;
}

.single-blog-page .blog-box .blog-details
    h3 {
    transition: all ease 0.3s;
}

.single-blog-page .blog-box .blog-details
    p {
    font-size: 16px;
    line-height: 25px;
    margin: 0;
    font-weight: 400;
    margin-bottom: 30px;
}

.single-blog-page .blog-box .blog-details
    blockquote {
    padding: 30px 45px;
    background: rgba(158, 158, 158, 0.1);
    margin-bottom: 30px;
    border-left: 5px solid;
}

.single-blog-page .blog-box .blog-details
    blockquote p {
    margin: 0;
    font-size: 20px;
    font-style: italic;
    line-height: 30px;
}

.single-blog-page
    hr {
    border-top: 1px solid rgba(124, 124, 124, 0.1);
}

.single-blog-page .blog-box .post-tag-area {
    border-bottom: 1px solid #e5e5e5;
    padding: 0 15px 10px;
    margin-bottom: 30px;
}

.single-blog-page .blog-box .post-tag-area
    ul {
    padding: 0;
    padding-bottom: 10px;
    margin: 0;
}

.single-blog-page .blog-box .post-tag-area
    ul li {
    display: inline-block;
    font-size: 18px;
    color: #3e3e3e;
}

.single-blog-page .blog-box .post-tag-area
    ul li a {
    display: block;
    text-align: center;
}

.single-blog-page .blog-box .post-tag-area .share-icon
    li a {
    width: 30px;
    font-size: 16px;
}

.single-blog-page .blog-box .post-tag-area .tags
    li a {
    font-size: 16px;
}

.comments-container {
    padding: 15px;
}

.comments-container
    h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.comments-container .comments-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

.comments-container .comments-list
    li {
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.comments-container .comments-list
    li:last-child {
    border: none;
}

.comments-container .comments-list
    li figure {
    flex: 0 0 60px;
    max-width: 60px;
    margin: 0;
    margin-right: 30px;
}

.comments-container .comments-list
    li h4 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 16px;
}

.comments-container .comments-list
    li h6 {
    font-size: 14px;
    margin-bottom: 8px;
}

.comments-container .comments-list
    li p {
    margin-bottom: 10px;
}

.comments-container .comments-list
    li .reply {
    font-size: 14px;
}

.comments-container .comments-list
    li .reply i {
    margin-right: 5px;
}

.comments-container .comments-list
    li.comment-reply {
    margin-left: 100px;
}

.comments-form
    h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.comments-form .form-group {
    position: relative;
}

.comments-form .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    background: transparent;
}

.comments-form .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.comments-form .form-group .form-control:
    focus~.focus-border {
    width: 100%;
}
    @media (max-width: 992px) {
    .comments-form .btn {
        margin-bottom: 30px;
    }
}

/*------------------------------
    24. END SINGLE BLOG PAGE
------------------------------*/


/* ----------------------- */

.themes-colors {
    position: fixed;
    left: -200px;
    top: 10%;
    width: 200px;
    background: #fff;
    z-index: 99;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05) !important;
}

.themes-colors
    h3 {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 30px;
    color: #222;
}

.themes-colors
    h6 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #585858;
}

.themes-colors
    span {
    color: #fff;
    display: block;
    padding: 15px;
    text-align: center;
    background: #fff;
    position: absolute;
    top: 0px;
    right: -52px;
    font-size: 22px;
    line-height: 15px;
    cursor: pointer;
    background: #00cdcd;

}

.themes-colors
    span i {
    color: #fff;
    animation: gear 3s linear infinite forwards;
}
    @keyframes gear {
    0% {
        transform: rotate(0);
    }

    100% {
    transform: rotate(360deg)}
}

.themes-colors
    ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.themes-colors
    ul:last-child {
    margin: 0;
}

.themes-colors
    ul li {
    margin-right: 8px;
    margin-bottom: 10px;
}

.themes-colors
    ul li:nth-child(5),
.themes-colors ul li:nth-child(10) {
    margin: 0;
}

.themes-colors
    ul li a {
    color: #585858;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.themes-colors.open {
    left: 0;
}

.themes-colors
    ul.solid li a {
    background: #ccc;
}

.themes-colors
    ul.solid li:nth-child(1) a {
    background: #00cdcd;
}

.themes-colors
    ul.solid li:nth-child(2) a {
    background: #fcd04d;
}

.themes-colors
    ul.solid li:nth-child(3) a {
    background: #FE676E;
}

.themes-colors
    ul.solid li:nth-child(4) a {
    background: #ffbeba;
}

.themes-colors
    ul.solid li:nth-child(5) a {
    background: #6c4874;
}

.themes-colors
    ul.solid li:nth-child(6) a {
    background: #02416c;
}

.themes-colors
    ul.solid li:nth-child(7) a {
    background: #316d77;
}

.themes-colors
    ul.solid li:nth-child(8) a {
    background: #690431;
}

.themes-colors
    ul.solid li:nth-child(9) a {
    background: #F2884B;
}

.themes-colors
    ul.solid li:nth-child(10) a {
    background: #1d1d1d333;
}



.themes-colors
    ul.gradient li a {
    background: #000;
}

.themes-colors
    ul.gradient li:nth-child(1) a {
    background-image: -moz-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
}

.themes-colors
    ul.gradient li:nth-child(2) a {
    background-image: -moz-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
    background-image: -webkit-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
    background-image: -ms-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
}

.themes-colors
    ul.gradient li:nth-child(3) a {
    background-image: -moz-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
    background-image: -webkit-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
    background-image: -ms-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
}

.themes-colors
    ul.gradient li:nth-child(4) a {
    background-image: -moz-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
    background-image: -webkit-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
    background-image: -ms-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
}

.themes-colors
    ul.gradient li:nth-child(5) a {
    background-image: -moz-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
    background-image: -webkit-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
    background-image: -ms-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
}

.themes-colors
    ul.gradient li:nth-child(6) a {
    background-image: -moz-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
    background-image: -webkit-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
    background-image: -ms-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
}

.themes-colors
    ul.gradient li:nth-child(7) a {
    background-image: -moz-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
    background-image: -webkit-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
    background-image: -ms-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
}

.themes-colors
    ul.gradient li:nth-child(8) a {
    background-image: -moz-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
    background-image: -webkit-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
    background-image: -ms-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
}

.themes-colors
    ul.gradient li:nth-child(9) a {
    background-image: -moz-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
    background-image: -webkit-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
    background-image: -ms-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
}

.themes-colors
    ul.gradient li:nth-child(10) a {
    background-image: -moz-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
    background-image: -webkit-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
    background-image: -ms-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
}

.box.aos-init.aos-animate {
    height: 400px;
    padding: 0;
    position: relative;
}

.menu-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: #e10318;
}
.boxes:
    before{
     content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 33%;
    height: 83%;
    z-index: 0;
    background:url('../img/dotted.png');
    top: 123px;
}
.why-us:
    before{
     content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 18%;
    height: 53%;
    z-index: 0;
    background:url('../img/dotted.png');
    top: 45px;
    opacity:20%;
}
.contact:
    before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: url('../img/contact.png');
    top: 0px;
    background-repeat: no-repeat;
}
.clients-testimonial:
    before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999;
    background: url('../img/test-bg1.png');
    top: 53px;
    background-repeat: no-repeat;
}
.clients-testimonial:
    after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999;
    background: url('../img/test-bg2.png');
    top: 71%;
    background-repeat: no-repeat;
}
.boxes, .why-us, .contact, .clients-testimonial {
    position:relative;
}
.false-height{
    height:600px;
}
.clients-testimonial .testimonial-slider .item:nth-child(3) {
    margin: 0px;
}
.sticky .navbar .navbar-nav .nav-item>.nav-link {
    color: #333;
    font-weight: 400;
    position: relative;
    padding: 20px;
}
.sticky .img-fluid {
    height: 45px;
};
/*
    - Template Name: Fox
    - Template URI: 
    - Author: Mohamed Kamel
    - Author URI: https://www.facebook.com/M.Kamel090
    - Description: Fox This is html5 template for App Landing Page
    - Version: 1.0
    - Tags: HTML, Mobile App, Template, Landing Page , Responsive, Bootstrap 4 
*/

/* ----------------------------------------------------
    CSS INDEX        

    01. START GENERAL STYLE (font, body, btn, section-title, section-padding, margins ... etc)
    02. START PRELOADER STYLE
    03. START HEADER STYLE
    04. START SLIDE STYLE
    05. START BOXES SECTION
    06. START WHY US SECTION
    07. START MAIN FEATURES SECTION
    08. START OTHER FEATURES SECTION
    09. START WATCH VIDEO SECTION
    10. START SCREENSHOTS SECTION
    11. START TESTIMONIAL SECTION
    12. START FUN FACTS SECTION
    13. START PRICE TABLE SECTION
    14. START TEAM SECTION
    15. START FAQ SECTION
    16. START LOGOS SECTION
    17. START RECENT NEWS SECTION
    18. START DOWNLOAD APP SECTION
    19. START GET IN TOUCH SECTION
    20. START MAP SECTION
    21. START FOOTER SECTION
    22. START BLOG PAGE
    23. START SIDEBAR
    24. START SINGLE BLOG PAGE

/* ----------------------------------------------------*/

/*------------------------------
    01. START GENERAL STYLE
------------------------------*/
    @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin-ext');
    body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    position: relative;
    overflow-x: hidden;
}
    p {
    font-weight: 600;
    line-height: 30px;
}

.lnr {
    display: inline-block;
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: -0.05em;
}
    a:focus {
    outline: none;
    outline-offset: none;
}
    a:hover {
    text-decoration: none;
}


.background-fullwidth {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.background-fixed {
    background-attachment: fixed;
}

.form-control:
    focus {
    outline: none;
    box-shadow: none;
}

.height-100 {
    height: 100vh;
    min-height: 600px;
}

.btn-primary {
    padding: 15px 45px;
    font-weight: 700;
    font-size: 16px;
    display: inline-block;
}

.btn-colord {
    color: #fff;
}

.btn-colord:
    hover {
    color: #fff;
}

.btn-white {
    background: #fff;
}

.btn-theme {
    position: relative;
    overflow: hidden;
    outline: none !important;
    border: none;
    box-shadow: 6px 7px #1e1e1e !important;
}

.btn-theme:
    hover,
.prices .price-table:hover .btn-theme {
    color: #fff;
}

.btn-theme.btn-white:
    before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    background: #fff;
}

.btn-theme.btn-colord:
    before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

.btn-theme:
    hover:before,
.prices .price-table:hover .btn-theme:before {
    opacity: 0 !important;
}

.btn-theme>
    span {
    position: relative;
}

.shadow {
    box-shadow: 0.5px 0.866px 10px 0px rgb(0, 0, 0);
}
    a,
.btn-white,
.btn-theme:before,
.foxapp-header .dropdown-menu .dropdown-item,
.slide .content-bottom,
.slide .content-bottom h2,
.boxes .box:hover .lnr,
.other-features .other-features-slider .item,
.screenshots .screenshots-slider .item,
.clients-testimonial .testimonial-slider .slick-dots li,
.clients-testimonial .testimonial-slider .slick-dots li button,
.our-team .team-slider .person,
.our-team .team-slider .person h3,
.our-team .team-slider .person ul,
.our-team .team-slider .person ul li a,
.our-team .team-slider .slick-dots li,
.our-team .team-slider .slick-dots li button,
.faq .accordion .card .card-header h5 .btn,
.faq .accordion .card .card-header h5 .btn:before,
.faq .accordion .card .card-header h5 .btn:after,
.recent-news .recent-news-slider .slick-dots li,
.recent-news .recent-news-slider .slick-dots li button,
.download-app a,
footer .subscribe .subscribe-form-2 label,
footer .subscribe .subscribe-form-2 .form-group {
    transition: all ease 0.3s;
}

.space-15 {
    height: 15px;
}

.space-20 {
    height: 20px;
}

.space-25 {
    height: 25px;
}

.space-50 {
    height: 50px;
}
.space-130 {
    height: 130px;
}
.space-140 {
    height: 140px;
}
.padding-100 {
    padding: 100px 0;
}


.lity-close {
    text-shadow: none !important;
}

.lity-content:
    after {
    box-shadow: none !important;
}

.section-title
    h3 {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
}

.section-title
    h3 span.white {
    color: #fff !important;

}

.section-title
    p {
    font-size: 18px;
    font-weight: 600;
    max-width: 750px;
    margin: 0 auto;
}
    @media (max-width: 768px) {
    .section-title h3 {
        font-size: 40px;
    }
}

/*------------------------------
    01. END GENERAL STYLE
------------------------------*/

/*------------------------------
    02. START PRELOADER STYLE
------------------------------*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loader-wrapper {
    width: 70px;
    height: 35px;
    overflow: hidden;
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 35px);
}

.loader {
    width: 70px;
    height: 70px;
    border-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotate 3s ease-in-out infinite;
    transform: rotate(-200deg)}
    @keyframes rotate {
    0% {
        border-width: 10px;
    }

    25% {
    border-width: 3px;
    }

    50% {
    transform: rotate(115deg);
    border-width: 10px;
    }

    75% {
    border-width: 3px;
    }

    100% {
    border-width: 10px;
    }
}

/*------------------------------
    02. End Preloader Style
------------------------------*/

/*------------------------------
    03. START HEADER STYLE
------------------------------*/

.foxapp-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-radius: 0;
    border: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.foxapp-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 13px 35px -12px rgba(0, 0, 0, 0.15);
    animation: menu_sticky 0.7s ease-in-out;
}
    @keyframes menu_sticky {
    0% {
        margin-top: -120px;
    opacity: 0;
    }

    50% {
    margin-top: -64px;
    opacity: 0;
    }

    100% {
    margin-top: 0;
    opacity: 1;
    }
}

.foxapp-header .navbar {
    padding: 0;
}

.foxapp-header .navbar-light .navbar-toggler {
    border-color: #fff;
    outline: none;
}

.foxapp-header .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='' stroke-miterlimit='0' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link {
    color: #fff;
    /* margin: 20px 10px; */
    font-weight: 400;
    position: relative;
    padding: 20px;
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link:
    before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    background-color: #fff;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link:
    hover:before {
    width: 100%;
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link.active:
    before {
    width: 100%;
}

.foxapp-header .dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: 0;
    transform: translateY(-15px);
    animation: hide_dropdown_menu 0.2s ease-in-out;
    display: block;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .04);
    height: 0;
    transition: all ease 0.1s;
}
    @keyframes hide_dropdown_menu {
    0% {
        transform: translateY(0);
    opacity: 1;
    }

    100% {
    transform: translateY(15px);
    opacity: 0;
    }
}

.foxapp-header .dropdown-menu.show {
    animation: show_dropdown_menu 0.2s ease-in-out forwards;
    visibility: visible;
    height: auto;
}
    @keyframes show_dropdown_menu {
    0% {
        transform: translateY(15px);
    opacity: 0;
    }

    100% {
    transform: translateY(0);
    opacity: 1;
    }
}

.foxapp-header .dropdown-menu .dropdown-item {
    padding: .75rem 1.5rem;
}

.foxapp-header .dropdown-menu .dropdown-item:
    hover {
    color: #fff;
}
    @media (max-width: 992px) {
    .foxapp-header {
        padding: 1em;
    }

    .foxapp-header .dropdown-menu {
    display: none;
    }

    .foxapp-header .dropdown-menu.show {
    display: block;
    }

    .foxapp-header .navbar .navbar-nav .nav-item>.nav-link {
    padding: 10px;
    }

    .foxapp-header .dropdown-menu .dropdown-item {
    padding: 10px;
    }
}

/*------------------------------
    03. End HEADER STYLE
------------------------------*/

/*------------------------------
    04. START SLIDE STYLE
------------------------------*/

.slide {
    position: relative;
}

.slide:
    before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 67%;
    height: 100%;
    z-index: 0;
    background: #fff;
    top: 0;
}

.slide .content-bottom {
    padding-top: 200px;
    position: relative;
    z-index: 1;
}

.slide .content-bottom
    h2 {
    font-size: 90px;
    font-weight: 700;
    color: #e10318;
    text-transform: uppercase;
    line-height: 90px;
}

.slide .content-bottom
    p {
    color: #1d1d1d;
    max-width: 400px;
}
    @media (max-width: 1366px) {
    .slide .content-bottom {
        padding-top: 170px;
    }
}
    @media (min-width: 992px) {
    .slide .content-bottom img {
        /* max-width: 400px; */}
}
    @media (max-width: 768px) {
    .slide .content-bottom h2 {
        font-size: 60px;
    line-height: 60px;
    }
}

/*------------------------------
    04. END SLIDE STYLE
------------------------------*/

/*------------------------------
    05. START BOXES SECTION
------------------------------*/

.boxes .box {
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.boxes .box:
    after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 5px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.boxes .box:
    hover:after {
    width: 100%;
}

.boxes .box .icon {
    padding: 25px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 110px;
    height: 110px;
}

.boxes .box .lnr {
    font-size: 55px;
    line-height: 60px;
}

.boxes .box
    h4 {
    color: #fff;
    margin: 0;
    font-weight: 900;
}

.boxes .box
    p {
    color: #fff;
    margin: 0 auto;
    font-size: 18px;
}
    @media (max-width: 767px) {
    .boxes .box {
        margin-bottom: 30px;
    }
}

/*------------------------------
    05. END BOXES SECTION
------------------------------*/

/*------------------------------
    06. START WHY US SECTION
------------------------------*/

.why-us
    h3 {
    font-size: 40px;
    font-weight: 900;
}

.why-us
    p {
    font-weight: 400;
    margin: 0;
}

.why-us .why-us-icon {
    margin-bottom: 20px;
}

.why-us .why-us-icon .lnr {
    font-size: 35px;
}

/*------------------------------
    06. END WHY US SECTION
------------------------------*/

/*------------------------------
    07. START MAIN FEATURES SECTION
------------------------------*/

.main-features .features-circle {
    position: relative;
}

.features-circle .circle-svg {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    z-index: -1;
    max-width: 100%;
    margin: 0 auto;
}

.features-circle
    svg g {
    transform-origin: 50%;
}

.main-features .one-feature {
    margin-bottom: 5em;
}

.main-features .one-feature
    h5 {
    font-size: 20px;
    line-height: 45px;
    display: inline-block;
    margin: 0 10px .5rem;
}

.main-features .one-feature .lnr {
    font-size: 35px;
}

.main-features .one-feature
    p {
    margin-bottom: 0;
}

.main-features .left-side .one-feature
    span {
    float: right;
}

.main-features .left-side .one-feature:nth-child(3),
.main-features .right-side .one-feature:nth-child(3) {
    margin-bottom: 0;
}

.main-features .right-side .one-feature
    span {
    float: left;
}
    @media (min-width: 992px) {

    .main-features .left-side .one-feature:nth-child(1),
    .main-features .left-side .one-feature:nth-child(3) {
        position: relative;
    left: 50px;
    }

    .main-features .right-side .one-feature:nth-child(1),
    .main-features .right-side .one-feature:nth-child(3) {
    position: relative;
    right: 50px;
    }
}
    @media (max-width: 992px) {
    .main-features .one-feature {
        margin-bottom: 1.5em;
    }

    .main-features .left-side .one-feature span {
    float: left;
    }
}
    @media (max-width: 414px) {
    .features-circle svg {
        max-width: 100%;
    height: 410px;
    }
}
    @media (max-width: 375px) {
    .features-circle svg {
        height: 350px;
    }
}

/*------------------------------
    07. END MAIN FEATURES SECTION
------------------------------*/

/*------------------------------
    08. START OTHER FEATURES SECTION
------------------------------*/

.other-features .other-features-slider {
    margin: 0 -15px;
}

.other-features .other-features-slider .item {
    background: #fff;
    padding: 2em 1em;
    border-radius: 50px;
    opacity: 0.6;
    margin: 0 35px;
    outline: none;
    cursor: pointer;
}

.other-features .other-features-slider .item.slick-center {
    opacity: 1;
}

.other-features .other-features-slider .item
    span {
    margin-bottom: 20px;
    display: inline-block;
}

.other-features .other-features-slider .item .lnr {
    font-size: 40px;
}

.other-features .other-features-slider .item
    h4 {
    font-size: 20px;
}

.other-features .other-features-slider .item
    p {
    max-width: 300px;
    margin: 0 auto;
}

/*------------------------------
    08. END OTHER FEATURES SECTION
------------------------------*/

/*------------------------------
    09. START WATCH VIDEO SECTION
------------------------------*/
.watch-video .video {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.watch-video .video:
    before {
    position: absolute;
    content: '';
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
}

.watch-video .video
    img {
    position: relative;
}

.watch-video .video
    a {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    animation: ripple_shadow 2s linear infinite;
}

.watch-video .video
    a:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-left: 25px solid #fff;
    border-bottom: 17px solid transparent;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
    @keyframes ripple_shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    }

    100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    }
}

/*------------------------------
    09. END WATCH VIDEO SECTION
------------------------------*/


/*------------------------------
    10. START SCREENSHOTS SECTION
------------------------------*/

.screenshots .screenshots-slider {
    margin: 0 -15px;
}

.screenshots .screenshots-slider .item {
    opacity: 0.6;
    margin: 0 35px;
    outline: none;
    cursor: pointer;
}

.screenshots .screenshots-slider .item.slick-center {
    opacity: 1;
}

/*------------------------------
    10. END SCREENSHOTS SECTION
------------------------------*/

/*------------------------------
    11. START TESTIMONIAL SECTION
------------------------------*/

.clients-testimonial .testimonial-slider {
    margin-bottom: 60px;
}

.clients-testimonial .testimonial-slider .item {
    outline: none;
    margin: 0px 30px 0 0;
    background: #e10318;
}

.clients-testimonial .testimonial-slider .item .client-testimonial {
    padding: 10em 3em 0em 3em;
    position: relative;
    min-height: 370px;
}

.clients-testimonial .testimonial-slider .item .client-testimonial:
    after {
    /* position: absolute; */
    /* content: ''; */
    bottom: -15px;
    width: 0;
    left: 45px;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: transparent transparent transparent transparent;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p {
    color: #fff;
    font-size: 17px;
    margin: 0;
    position: relative;
    font-weight: 400;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:after,
.clients-testimonial .testimonial-slider .item .client-testimonial p:before {
    position: absolute;
    font-size: 400px;
    opacity: 0.2;
    color: #fff;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:before {
    content: '\f10d';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 85px;
    font-weight: 900;
    line-height: 85px;
    top: -50px;
    left: -40px;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f10e';
    font-size: 85px;
    font-weight: 900;
    line-height: 85px;
    bottom: -50px;
    right: -40px;
}

.clients-testimonial .testimonial-slider .item .client-info {
    padding: 30px 15px 89px 15px;
}

.clients-testimonial .testimonial-slider .item .client-info
    figure {
    width: 60px;
    height: 60px;
    border: 3px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 15px;
}

.clients-testimonial .testimonial-slider .item .client-info
    h3 {
    font-size: 20px;
    margin: 0;
}

.clients-testimonial .testimonial-slider .slick-dots {
    bottom: -60px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li button:before {
    display: none;
}

.clients-testimonial .testimonial-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #dcdfe7;
    margin: 0 auto;
}

/*------------------------------
    11. END TESTIMONIAL SECTION
------------------------------*/

/*------------------------------
    12. START FUN FACTS SECTION
------------------------------*/

.fun-facts .fact-box {
    padding: 2em;
    background: #fff;
    border-radius: 50px;
    margin-bottom: 1em;
}

.fun-facts .fact-box .lnr {
    font-size: 50px;
    margin: 10px 0 20px;
}

.fun-facts .fact-box
    h5 {
    font-size: 55px;
    font-weight: 900;
}

.fun-facts .fact-box
    h6 {
    font-size: 25px;
}

/*------------------------------
    12. END FUN FACTS SECTION
------------------------------*/

/*------------------------------
    13. START PRICE TABLE SECTION
------------------------------*/

.prices .price-table {
    margin-bottom: 30px;
}

.prices .price-table .top {
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.prices .price-table .top .offer {
    width: 200px;
    font-weight: 300;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: -58px;
    top: 30px;
    padding: 2px 0;
    letter-spacing: 2px;
    transform: rotate(-45deg);
}

.prices .price-table .top
    h4 {
    font-size: 25px;
    font-weight: 600;
}

.prices .price-table .top
    h3 {
    font-size: 80px;
    font-weight: 600;
    margin: 0;
}

.prices .price-table .top
    h3 span {
    font-size: 20px;
}

.prices .price-table .top
    h5 {
    font-size: 16px;
    margin: 0;
}

.prices .price-table .bottom {
    padding: 25px 0;
}

.prices .price-table .bottom
    ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prices .price-table .bottom
    ul li {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    border-bottom: 1px solid #f6f6f647;
    padding: 15px;
}

/*------------------------------
    13. END PRICE TABLE SECTION
------------------------------*/

/*------------------------------
    14. START TEAM SECTION
------------------------------*/

.our-team .team-slider .person {
    background: #fff;
    padding: 30px;
    margin: 0 15px;
    position: relative;
    margin-bottom: 100px;
    outline: none;
}

.our-team .team-slider .person
    img {
    border-radius: 50%;
    width: 130px;
}

.our-team .team-slider .person
    h3 {
    font-weight: 800;
    font-size: 18px;
    margin: 0;
}

.our-team .team-slider .person
    h5 {
    font-size: 16px;
    margin: 0;
}

.our-team .team-slider .person
    p {
    margin: 0;
}

.our-team .team-slider .person
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    z-index: -1;
    background: #fff;
}

.our-team .team-slider .person
    ul li {
    display: inline-block;
}

.our-team .team-slider .person
    ul li a {
    display: block;
    padding: 5px;
    width: 35px;
    border-radius: 50%;
}

.our-team .team-slider .person:
    hover ul {
    transform: translateY(100%);
}

.our-team .team-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.our-team .team-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.our-team .team-slider .slick-dots
    li button:before {
    display: none;
}

.our-team .team-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #fff;
    margin: 0 auto;
}

/*------------------------------
    14. END TEAM SECTION
------------------------------*/

/*------------------------------
    15. START FAQ SECTION
------------------------------*/

.faq .accordion .card {
    margin-bottom: 1em;
    border-radius: 28px !important;
    overflow: hidden;
    background: #fff;
}

.faq .accordion .card,
.faq .accordion .card .card-header {
    border: none;
}

.faq .accordion .card .card-header {
    padding: 0;
}

.faq .accordion .card .card-header
    h5 .btn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    white-space: unset;
    text-decoration: none;
    padding: 15px 60px 15px 30px;
    color: #2a3659;
    position: relative;
}

.faq .accordion .card .card-header
    h5 .btn:before,
.faq .accordion .card .card-header h5 .btn:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: #ccc;
}

.faq .accordion .card .card-header
    h5 .btn:before {
    width: 2px;
    height: 12px;
    right: 30px;
}

.faq .accordion .card .card-header
    h5 .btn:after {
    width: 12px;
    height: 2px;
    right: 25px;
}

.faq .accordion .card .card-header
    h5 .btn.collapsed:before,
.faq .accordion .card .card-header h5 .btn.collapsed:after {
    background: #fff;
    transform: translateY(-50%) rotate(0deg);
}

.faq .accordion .card .card-header
    h5 .btn.collapsed {
    color: #fff;
}

.faq .accordion .card .card-body {
    padding: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

/*------------------------------
    15. END FAQ SECTION
------------------------------*/

/*------------------------------
    16. START LOGOS SECTION
------------------------------*/

.logos {
    padding: 35px 0;
}

.logos .logos-slider .item {
    outline: none;
    margin: 0 30px;
}
    @media (max-width: 768px) {
    .logos .logos-slider .slick-next {
        right: 0;
    }

    .logos .logos-slider .slick-prev {
    left: 0;
    z-index: 1;
    }
}

/*------------------------------
    16. END LOGOS SECTION
------------------------------*/

/*------------------------------
    17. START RECENT NEWS SECTION
------------------------------*/

.recent-news .recent-news-slider .item {
    outline: none;
    margin-bottom: 100px;
}

.recent-news .recent-news-slider .item
    h3 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}

.recent-news .recent-news-slider .item
    p {
    font-size: 18px;
    margin: 0;
}

.news-meta {
    padding: 0;
    list-style: none;
    margin: 0;
}

.news-meta
    li {
    display: inline-block;
    font-size: 14px;
    color: #c2c2c2;
    margin-right: 15px;
}

.news-meta
    ul li span {
    margin-right: 5px;
}

.recent-news .recent-news-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.recent-news .recent-news-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.recent-news .recent-news-slider .slick-dots
    li button:before {
    display: none;
}

.recent-news .recent-news-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #dcdfe7;
    margin: 0 auto;
}
    @media (max-width: 768px) {
    .recent-news .recent-news-slider .item h3 {
        margin-top: 15px;
    }
}

/*------------------------------
    17. END RECENT NEWS SECTION
------------------------------*/

/*------------------------------
    18. START DOWNLOAD APP SECTION
------------------------------*/

.download-app
    h2 {
    font-size: 40px;
    font-weight: 900;
}

.download-app
    p {
    font-size: 18px;
}

.download-app
    a {
    position: relative;
    padding-left: 80px;
    text-align: left;
    text-transform: none;
    margin-right: 30px;
}

.download-app
    a:last-child {
    margin: 0;
}

.download-app
    a i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    left: 35px;
}
    @media (max-width: 414px) {
    .download-app a {
        padding: 10px;
    padding-left: 55px;
    padding-right: 20px;
    font-size: 12px;
    margin-right: 10px;
    }

    .download-app a i {
    left: 20px;
    font-size: 25px;
    }

    .download-app a:
    last-child {
        margin: 0;
    }
}

/*------------------------------
    18. END DOWNLOAD APP SECTION
------------------------------*/

/*------------------------------
    19. START GET IN TOUCH SECTION
------------------------------*/
.git-in-touch .form-group {
    position: relative;
}

.git-in-touch .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    margin-bottom: 1.5em;
}

.git-in-touch .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.git-in-touch .form-group .form-control:
    focus~.focus-border {
    width: 100%;
}

.git-in-touch .form-group .form-control:
    focus {
    outline: none;
    box-shadow: none;
}

.git-in-touch .contact-info .info-box {
    padding: 1em 2em;
}

.git-in-touch .contact-info .info-box
    span {
    display: block;
    margin-bottom: 20px;
}

.git-in-touch .contact-info .info-box .lnr {
    font-size: 60px;
    text-align: center;
    margin: 0 auto 20px;
}

.git-in-touch .contact-info .info-box
    h5,
.git-in-touch .contact-info .info-box a {
    font-size: 18px;
    line-height: 30px;
    display: block;
}

/*------------------------------
    19. END GET IN TOUCH SECTION
------------------------------*/

/*------------------------------
    20. START MAP SECTION
------------------------------*/
.map {
    line-height: 0;
}

.map
    iframe {
    width: 100%;
    height: 500px;
}


/*------------------------------
    20. END MAP SECTION
------------------------------*/

/*------------------------------
    21. START FOOTER SECTION
------------------------------*/
    footer {
    background: #e10318;
}
    footer .subscribe .subscribe-form {
    background: #fff;
    padding: 25px;
    position: relative;
    overflow: hidden;
    border-radius: 80px;
}
    footer .subscribe .subscribe-form .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 14px 20px;
    background: transparent;
    margin-bottom: 0;
    background: rgba(158, 158, 158, 0.1);
    border-radius: 50px;
    border: none;
}
    footer .subscribe .subscribe-form .form-group .form-control:focus {
    outline: none;
    box-shadow: none;
}
    footer .footer-widgets .widget {
    color: #fff;
    margin-bottom: 1em;
}
    footer .footer-widgets .widget img {
    margin-bottom: 15px;
}
    footer .footer-widgets .widget h6 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1.5em;
    color: #fff;
}
    footer .footer-widgets .widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
    footer .footer-widgets .widget ul li {
    margin-bottom: 1em;
    line-height: 30px;
}
    footer .footer-widgets .widget ul li span {
    color: #fff;
}
    footer .footer-widgets .widget ul li a {
    color: #fff;
}
    footer .copyright {
    padding: 15px 0;
    border-top: 1px solid #fff;
    margin: 0 5%;
}
    footer .copyright p {
    font-weight: 400;
    margin: 0;
    line-height: 40px;
    color: #fff;
}

/*------------------------------
    21. END FOOTER SECTION
------------------------------*/


/*------------------------------
    22. START BLOG PAGE
------------------------------*/
.page-head {
    position: relative;
    padding: 125px 0;
}

.page-head
    h1 {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
    padding: 100px 0 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 15px;
}

.blog-page .blog-box {
    margin-bottom: 30px;
}

.blog-page .blog-box .blog-details {
    padding: 0 15px}

.blog-page .blog-box .blog-details
    h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

.blog-page .blog-box .blog-img
    a {
    display: block;
}

.blog-page .blog-box .blog-img
    a img {
    width: 100%;
}

.blog-page .blog-box .blog-details
    h3 a {
    transition: all ease 0.3s;
}

.blog-page .blog-box .blog-details
    p {
    font-size: 14px;
    line-height: 25px;
    margin: 0;
}
    nav .pagination {
    padding: 15px 35px;
    margin: 0 auto;
    justify-content: center;
}
    nav .pagination li:first-child a,
nav .pagination li:last-child a {
    line-height: 28px;
    border-radius: 50% !important;
    background: transparent !important;
}
    nav .pagination li {
    margin: 0 10px;
}
    nav .pagination li a {
    font-size: 14px;
    border-radius: 50%;
    border: none;
    color: #000;
    padding: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 24px;
    background: transparent;
}
    nav .pagination li a:hover {
    color: #1d1d1d;
    background: rgba(158, 158, 158, 0.1);
}
    @media (max-width: 992px) {
    nav .pagination {
        margin-bottom: 30px;
    }
}

/*------------------------------
    22. END BLOG PAGE
------------------------------*/

/*------------------------------
    23. START SIDEBAR 
------------------------------*/
    aside.sidebar .gray-panel {
    background: rgba(158, 158, 158, 0.1);
    padding: 15px 30px;
    margin-bottom: 30px;
}
    aside.sidebar .search .form-group {
    position: relative;
}
    aside.sidebar .search .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    background: transparent;
}
    aside.sidebar .search .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
    aside.sidebar .search .form-group .form-control:focus~.focus-border {
    width: 100%;
}
    aside.sidebar .gray-panel h3 {
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    position: relative;
    margin-bottom: 15px;
}
    aside.sidebar .gray-panel h3:after {
    position: absolute;
    width: 50px;
    height: 2px;
    background: #000;
    content: '';
    bottom: 0;
    left: 0;
}
    aside.sidebar .follow-me ul {
    padding: 0;
    list-style: none;
    margin: 0 0 20px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}
    aside.sidebar .follow-me ul li {
    margin-right: 10px;
    margin-bottom: 10px;
}
    aside.sidebar .follow-me ul li a {
    font-size: 30px;
    height: 80px;
    width: 60px;
    background: #ccc;
    display: block;
    text-align: center;
    line-height: 80px;
    color: #fff;
}
    aside.sidebar .follow-me ul li.facebook a {
    background: #4B69B1;
}
    aside.sidebar .follow-me ul li.instagram a {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
    aside.sidebar .follow-me ul li.linkedin a {
    background: #1278B6;
}
    aside.sidebar .follow-me ul li.twitter a {
    background: #2BB2E1;
}
    aside.sidebar .categories ul {
    padding: 0;
    list-style: none;
    margin: 0 0 20px;
}
    aside.sidebar .categories ul li a {
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 7px;
    display: block;
}
    aside.sidebar .categories ul li:last-child a {
    margin: 0;
}
    aside.sidebar .recent-post .post {
    margin-bottom: 15px;
}
    aside.sidebar .recent-post .post figure {
    height: 60px;
    margin: 0 10px 0 0;
    flex: 0 0 60px;
}
    aside.sidebar .recent-post .post h4 {
    font-weight: 600;
    font-size: 16px;
}
    aside.sidebar .tags ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
    aside.sidebar .tags ul li {
    display: inline-block;
    margin: 0 20px 15px 0;
}

/*------------------------------
    23. END SIDEBAR 
------------------------------*/


/*------------------------------
    24. START SINGLE BLOG PAGE
------------------------------*/
.single-blog-with-sidebar {
    padding-bottom: 100px;
}

.single-blog-page .blog-box .blog-details {
    padding: 0 15px}

.single-blog-page .blog-box .blog-details
    h3 {
    font-size: 22px;
    font-weight: 900;
    margin: 0;
}

.single-blog-page .blog-box .blog-img
    img {
    width: 100%;
}

.single-blog-page .blog-box .blog-details
    h3 {
    transition: all ease 0.3s;
}

.single-blog-page .blog-box .blog-details
    p {
    font-size: 16px;
    line-height: 25px;
    margin: 0;
    font-weight: 400;
    margin-bottom: 30px;
}

.single-blog-page .blog-box .blog-details
    blockquote {
    padding: 30px 45px;
    background: rgba(158, 158, 158, 0.1);
    margin-bottom: 30px;
    border-left: 5px solid;
}

.single-blog-page .blog-box .blog-details
    blockquote p {
    margin: 0;
    font-size: 20px;
    font-style: italic;
    line-height: 30px;
}

.single-blog-page
    hr {
    border-top: 1px solid rgba(124, 124, 124, 0.1);
}

.single-blog-page .blog-box .post-tag-area {
    border-bottom: 1px solid #e5e5e5;
    padding: 0 15px 10px;
    margin-bottom: 30px;
}

.single-blog-page .blog-box .post-tag-area
    ul {
    padding: 0;
    padding-bottom: 10px;
    margin: 0;
}

.single-blog-page .blog-box .post-tag-area
    ul li {
    display: inline-block;
    font-size: 18px;
    color: #3e3e3e;
}

.single-blog-page .blog-box .post-tag-area
    ul li a {
    display: block;
    text-align: center;
}

.single-blog-page .blog-box .post-tag-area .share-icon
    li a {
    width: 30px;
    font-size: 16px;
}

.single-blog-page .blog-box .post-tag-area .tags
    li a {
    font-size: 16px;
}

.comments-container {
    padding: 15px;
}

.comments-container
    h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.comments-container .comments-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

.comments-container .comments-list
    li {
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.comments-container .comments-list
    li:last-child {
    border: none;
}

.comments-container .comments-list
    li figure {
    flex: 0 0 60px;
    max-width: 60px;
    margin: 0;
    margin-right: 30px;
}

.comments-container .comments-list
    li h4 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 16px;
}

.comments-container .comments-list
    li h6 {
    font-size: 14px;
    margin-bottom: 8px;
}

.comments-container .comments-list
    li p {
    margin-bottom: 10px;
}

.comments-container .comments-list
    li .reply {
    font-size: 14px;
}

.comments-container .comments-list
    li .reply i {
    margin-right: 5px;
}

.comments-container .comments-list
    li.comment-reply {
    margin-left: 100px;
}

.comments-form
    h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.comments-form .form-group {
    position: relative;
}

.comments-form .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    background: transparent;
}

.comments-form .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.comments-form .form-group .form-control:
    focus~.focus-border {
    width: 100%;
}
    @media (max-width: 992px) {
    .comments-form .btn {
        margin-bottom: 30px;
    }
}

/*------------------------------
    24. END SINGLE BLOG PAGE
------------------------------*/


/* ----------------------- */

.themes-colors {
    position: fixed;
    left: -200px;
    top: 10%;
    width: 200px;
    background: #fff;
    z-index: 99;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05) !important;
}

.themes-colors
    h3 {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 30px;
    color: #222;
}

.themes-colors
    h6 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #585858;
}

.themes-colors
    span {
    color: #fff;
    display: block;
    padding: 15px;
    text-align: center;
    background: #fff;
    position: absolute;
    top: 0px;
    right: -52px;
    font-size: 22px;
    line-height: 15px;
    cursor: pointer;
    background: #00cdcd;

}

.themes-colors
    span i {
    color: #fff;
    animation: gear 3s linear infinite forwards;
}
    @keyframes gear {
    0% {
        transform: rotate(0);
    }

    100% {
    transform: rotate(360deg)}
}

.themes-colors
    ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.themes-colors
    ul:last-child {
    margin: 0;
}

.themes-colors
    ul li {
    margin-right: 8px;
    margin-bottom: 10px;
}

.themes-colors
    ul li:nth-child(5),
.themes-colors ul li:nth-child(10) {
    margin: 0;
}

.themes-colors
    ul li a {
    color: #585858;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.themes-colors.open {
    left: 0;
}

.themes-colors
    ul.solid li a {
    background: #ccc;
}

.themes-colors
    ul.solid li:nth-child(1) a {
    background: #00cdcd;
}

.themes-colors
    ul.solid li:nth-child(2) a {
    background: #fcd04d;
}

.themes-colors
    ul.solid li:nth-child(3) a {
    background: #FE676E;
}

.themes-colors
    ul.solid li:nth-child(4) a {
    background: #ffbeba;
}

.themes-colors
    ul.solid li:nth-child(5) a {
    background: #6c4874;
}

.themes-colors
    ul.solid li:nth-child(6) a {
    background: #02416c;
}

.themes-colors
    ul.solid li:nth-child(7) a {
    background: #316d77;
}

.themes-colors
    ul.solid li:nth-child(8) a {
    background: #690431;
}

.themes-colors
    ul.solid li:nth-child(9) a {
    background: #F2884B;
}

.themes-colors
    ul.solid li:nth-child(10) a {
    background: #1d1d1d333;
}



.themes-colors
    ul.gradient li a {
    background: #000;
}

.themes-colors
    ul.gradient li:nth-child(1) a {
    background-image: -moz-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
}

.themes-colors
    ul.gradient li:nth-child(2) a {
    background-image: -moz-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
    background-image: -webkit-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
    background-image: -ms-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
}

.themes-colors
    ul.gradient li:nth-child(3) a {
    background-image: -moz-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
    background-image: -webkit-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
    background-image: -ms-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
}

.themes-colors
    ul.gradient li:nth-child(4) a {
    background-image: -moz-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
    background-image: -webkit-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
    background-image: -ms-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
}

.themes-colors
    ul.gradient li:nth-child(5) a {
    background-image: -moz-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
    background-image: -webkit-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
    background-image: -ms-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
}

.themes-colors
    ul.gradient li:nth-child(6) a {
    background-image: -moz-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
    background-image: -webkit-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
    background-image: -ms-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
}

.themes-colors
    ul.gradient li:nth-child(7) a {
    background-image: -moz-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
    background-image: -webkit-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
    background-image: -ms-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
}

.themes-colors
    ul.gradient li:nth-child(8) a {
    background-image: -moz-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
    background-image: -webkit-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
    background-image: -ms-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
}

.themes-colors
    ul.gradient li:nth-child(9) a {
    background-image: -moz-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
    background-image: -webkit-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
    background-image: -ms-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
}

.themes-colors
    ul.gradient li:nth-child(10) a {
    background-image: -moz-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
    background-image: -webkit-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
    background-image: -ms-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
}

.box.aos-init.aos-animate {
    height: 400px;
    padding: 0;
    position: relative;
}

.menu-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: #e10318;
}
.boxes:
    before{
     content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 33%;
    height: 83%;
    z-index: 0;
    background:url('../img/dotted.png');
    top: 123px;
}
.why-us:
    before{
     content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 18%;
    height: 53%;
    z-index: 0;
    background:url('../img/dotted.png');
    top: 45px;
    opacity:20%;
}
.contact:
    before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: url('../img/contact.png');
    top: 0px;
    background-repeat: no-repeat;
}
.clients-testimonial:
    before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999;
    background: url('../img/test-bg1.png');
    top: 53px;
    background-repeat: no-repeat;
}
.clients-testimonial:
    after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999;
    background: url('../img/test-bg2.png');
    top: 71%;
    background-repeat: no-repeat;
}
.boxes, .why-us, .contact, .clients-testimonial {
    position:relative;
}
.false-height{
    height:600px;
}
.clients-testimonial .testimonial-slider .item:nth-child(3) {
    margin: 0px;
}
.sticky .navbar .navbar-nav .nav-item>.nav-link {
    color: #333;
    font-weight: 400;
    position: relative;
    padding: 20px;
}
.sticky .img-fluid {
    height: 45px;
};
/*
    - Template Name: Fox
    - Template URI: 
    - Author: Mohamed Kamel
    - Author URI: https://www.facebook.com/M.Kamel090
    - Description: Fox This is html5 template for App Landing Page
    - Version: 1.0
    - Tags: HTML, Mobile App, Template, Landing Page , Responsive, Bootstrap 4 
*/

/* ----------------------------------------------------
    CSS INDEX        

    01. START GENERAL STYLE (font, body, btn, section-title, section-padding, margins ... etc)
    02. START PRELOADER STYLE
    03. START HEADER STYLE
    04. START SLIDE STYLE
    05. START BOXES SECTION
    06. START WHY US SECTION
    07. START MAIN FEATURES SECTION
    08. START OTHER FEATURES SECTION
    09. START WATCH VIDEO SECTION
    10. START SCREENSHOTS SECTION
    11. START TESTIMONIAL SECTION
    12. START FUN FACTS SECTION
    13. START PRICE TABLE SECTION
    14. START TEAM SECTION
    15. START FAQ SECTION
    16. START LOGOS SECTION
    17. START RECENT NEWS SECTION
    18. START DOWNLOAD APP SECTION
    19. START GET IN TOUCH SECTION
    20. START MAP SECTION
    21. START FOOTER SECTION
    22. START BLOG PAGE
    23. START SIDEBAR
    24. START SINGLE BLOG PAGE

/* ----------------------------------------------------*/

/*------------------------------
    01. START GENERAL STYLE
------------------------------*/
    @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin-ext');
    body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    position: relative;
    overflow-x: hidden;
}
    p {
    font-weight: 600;
    line-height: 30px;
}

.lnr {
    display: inline-block;
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: -0.05em;
}
    a:focus {
    outline: none;
    outline-offset: none;
}
    a:hover {
    text-decoration: none;
}


.background-fullwidth {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.background-fixed {
    background-attachment: fixed;
}

.form-control:
    focus {
    outline: none;
    box-shadow: none;
}

.height-100 {
    height: 100vh;
    min-height: 600px;
}

.btn-primary {
    padding: 15px 45px;
    font-weight: 700;
    font-size: 16px;
    display: inline-block;
}

.btn-colord {
    color: #fff;
}

.btn-colord:
    hover {
    color: #fff;
}

.btn-white {
    background: #fff;
}

.btn-theme {
    position: relative;
    overflow: hidden;
    outline: none !important;
    border: none;
    box-shadow: 6px 7px #1e1e1e !important;
}

.btn-theme:
    hover,
.prices .price-table:hover .btn-theme {
    color: #fff;
}

.btn-theme.btn-white:
    before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    background: #fff;
}

.btn-theme.btn-colord:
    before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

.btn-theme:
    hover:before,
.prices .price-table:hover .btn-theme:before {
    opacity: 0 !important;
}

.btn-theme>
    span {
    position: relative;
}

.shadow {
    box-shadow: 0.5px 0.866px 10px 0px rgb(0, 0, 0);
}
    a,
.btn-white,
.btn-theme:before,
.foxapp-header .dropdown-menu .dropdown-item,
.slide .content-bottom,
.slide .content-bottom h2,
.boxes .box:hover .lnr,
.other-features .other-features-slider .item,
.screenshots .screenshots-slider .item,
.clients-testimonial .testimonial-slider .slick-dots li,
.clients-testimonial .testimonial-slider .slick-dots li button,
.our-team .team-slider .person,
.our-team .team-slider .person h3,
.our-team .team-slider .person ul,
.our-team .team-slider .person ul li a,
.our-team .team-slider .slick-dots li,
.our-team .team-slider .slick-dots li button,
.faq .accordion .card .card-header h5 .btn,
.faq .accordion .card .card-header h5 .btn:before,
.faq .accordion .card .card-header h5 .btn:after,
.recent-news .recent-news-slider .slick-dots li,
.recent-news .recent-news-slider .slick-dots li button,
.download-app a,
footer .subscribe .subscribe-form-2 label,
footer .subscribe .subscribe-form-2 .form-group {
    transition: all ease 0.3s;
}

.space-15 {
    height: 15px;
}

.space-20 {
    height: 20px;
}

.space-25 {
    height: 25px;
}

.space-50 {
    height: 50px;
}
.space-130 {
    height: 130px;
}
.space-140 {
    height: 140px;
}
.padding-100 {
    padding: 100px 0;
}


.lity-close {
    text-shadow: none !important;
}

.lity-content:
    after {
    box-shadow: none !important;
}

.section-title
    h3 {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
}

.section-title
    h3 span.white {
    color: #fff !important;

}

.section-title
    p {
    font-size: 18px;
    font-weight: 600;
    max-width: 750px;
    margin: 0 auto;
}
    @media (max-width: 768px) {
    .section-title h3 {
        font-size: 40px;
    }
}

/*------------------------------
    01. END GENERAL STYLE
------------------------------*/

/*------------------------------
    02. START PRELOADER STYLE
------------------------------*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loader-wrapper {
    width: 70px;
    height: 35px;
    overflow: hidden;
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 35px);
}

.loader {
    width: 70px;
    height: 70px;
    border-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotate 3s ease-in-out infinite;
    transform: rotate(-200deg)}
    @keyframes rotate {
    0% {
        border-width: 10px;
    }

    25% {
    border-width: 3px;
    }

    50% {
    transform: rotate(115deg);
    border-width: 10px;
    }

    75% {
    border-width: 3px;
    }

    100% {
    border-width: 10px;
    }
}

/*------------------------------
    02. End Preloader Style
------------------------------*/

/*------------------------------
    03. START HEADER STYLE
------------------------------*/

.foxapp-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-radius: 0;
    border: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.foxapp-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 13px 35px -12px rgba(0, 0, 0, 0.15);
    animation: menu_sticky 0.7s ease-in-out;
}
    @keyframes menu_sticky {
    0% {
        margin-top: -120px;
    opacity: 0;
    }

    50% {
    margin-top: -64px;
    opacity: 0;
    }

    100% {
    margin-top: 0;
    opacity: 1;
    }
}

.foxapp-header .navbar {
    padding: 0;
}

.foxapp-header .navbar-light .navbar-toggler {
    border-color: #fff;
    outline: none;
}

.foxapp-header .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='' stroke-miterlimit='0' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link {
    color: #fff;
    /* margin: 20px 10px; */
    font-weight: 400;
    position: relative;
    padding: 20px;
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link:
    before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    background-color: #fff;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link:
    hover:before {
    width: 100%;
}

.foxapp-header .navbar .navbar-nav .nav-item>.nav-link.active:
    before {
    width: 100%;
}

.foxapp-header .dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: 0;
    transform: translateY(-15px);
    animation: hide_dropdown_menu 0.2s ease-in-out;
    display: block;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .04);
    height: 0;
    transition: all ease 0.1s;
}
    @keyframes hide_dropdown_menu {
    0% {
        transform: translateY(0);
    opacity: 1;
    }

    100% {
    transform: translateY(15px);
    opacity: 0;
    }
}

.foxapp-header .dropdown-menu.show {
    animation: show_dropdown_menu 0.2s ease-in-out forwards;
    visibility: visible;
    height: auto;
}
    @keyframes show_dropdown_menu {
    0% {
        transform: translateY(15px);
    opacity: 0;
    }

    100% {
    transform: translateY(0);
    opacity: 1;
    }
}

.foxapp-header .dropdown-menu .dropdown-item {
    padding: .75rem 1.5rem;
}

.foxapp-header .dropdown-menu .dropdown-item:
    hover {
    color: #fff;
}
    @media (max-width: 992px) {
    .foxapp-header {
        padding: 1em;
    }

    .foxapp-header .dropdown-menu {
    display: none;
    }

    .foxapp-header .dropdown-menu.show {
    display: block;
    }

    .foxapp-header .navbar .navbar-nav .nav-item>.nav-link {
    padding: 10px;
    }

    .foxapp-header .dropdown-menu .dropdown-item {
    padding: 10px;
    }
}

/*------------------------------
    03. End HEADER STYLE
------------------------------*/

/*------------------------------
    04. START SLIDE STYLE
------------------------------*/

.slide {
    position: relative;
}

.slide:
    before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 67%;
    height: 100%;
    z-index: 0;
    background: #fff;
    top: 0;
}

.slide .content-bottom {
    padding-top: 200px;
    position: relative;
    z-index: 1;
}

.slide .content-bottom
    h2 {
    font-size: 90px;
    font-weight: 700;
    color: #e10318;
    text-transform: uppercase;
    line-height: 90px;
}

.slide .content-bottom
    p {
    color: #1d1d1d;
    max-width: 400px;
}
    @media (max-width: 1366px) {
    .slide .content-bottom {
        padding-top: 170px;
    }
}
    @media (min-width: 992px) {
    .slide .content-bottom img {
        /* max-width: 400px; */}
}
    @media (max-width: 768px) {
    .slide .content-bottom h2 {
        font-size: 60px;
    line-height: 60px;
    }
}

/*------------------------------
    04. END SLIDE STYLE
------------------------------*/

/*------------------------------
    05. START BOXES SECTION
------------------------------*/

.boxes .box {
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.boxes .box:
    after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 5px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.boxes .box:
    hover:after {
    width: 100%;
}

.boxes .box .icon {
    padding: 25px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 110px;
    height: 110px;
}

.boxes .box .lnr {
    font-size: 55px;
    line-height: 60px;
}

.boxes .box
    h4 {
    color: #fff;
    margin: 0;
    font-weight: 900;
}

.boxes .box
    p {
    color: #fff;
    margin: 0 auto;
    font-size: 18px;
}
    @media (max-width: 767px) {
    .boxes .box {
        margin-bottom: 30px;
    }
}

/*------------------------------
    05. END BOXES SECTION
------------------------------*/

/*------------------------------
    06. START WHY US SECTION
------------------------------*/

.why-us
    h3 {
    font-size: 40px;
    font-weight: 900;
}

.why-us
    p {
    font-weight: 400;
    margin: 0;
}

.why-us .why-us-icon {
    margin-bottom: 20px;
}

.why-us .why-us-icon .lnr {
    font-size: 35px;
}

/*------------------------------
    06. END WHY US SECTION
------------------------------*/

/*------------------------------
    07. START MAIN FEATURES SECTION
------------------------------*/

.main-features .features-circle {
    position: relative;
}

.features-circle .circle-svg {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    z-index: -1;
    max-width: 100%;
    margin: 0 auto;
}

.features-circle
    svg g {
    transform-origin: 50%;
}

.main-features .one-feature {
    margin-bottom: 5em;
}

.main-features .one-feature
    h5 {
    font-size: 20px;
    line-height: 45px;
    display: inline-block;
    margin: 0 10px .5rem;
}

.main-features .one-feature .lnr {
    font-size: 35px;
}

.main-features .one-feature
    p {
    margin-bottom: 0;
}

.main-features .left-side .one-feature
    span {
    float: right;
}

.main-features .left-side .one-feature:nth-child(3),
.main-features .right-side .one-feature:nth-child(3) {
    margin-bottom: 0;
}

.main-features .right-side .one-feature
    span {
    float: left;
}
    @media (min-width: 992px) {

    .main-features .left-side .one-feature:nth-child(1),
    .main-features .left-side .one-feature:nth-child(3) {
        position: relative;
    left: 50px;
    }

    .main-features .right-side .one-feature:nth-child(1),
    .main-features .right-side .one-feature:nth-child(3) {
    position: relative;
    right: 50px;
    }
}
    @media (max-width: 992px) {
    .main-features .one-feature {
        margin-bottom: 1.5em;
    }

    .main-features .left-side .one-feature span {
    float: left;
    }
}
    @media (max-width: 414px) {
    .features-circle svg {
        max-width: 100%;
    height: 410px;
    }
}
    @media (max-width: 375px) {
    .features-circle svg {
        height: 350px;
    }
}

/*------------------------------
    07. END MAIN FEATURES SECTION
------------------------------*/

/*------------------------------
    08. START OTHER FEATURES SECTION
------------------------------*/

.other-features .other-features-slider {
    margin: 0 -15px;
}

.other-features .other-features-slider .item {
    background: #fff;
    padding: 2em 1em;
    border-radius: 50px;
    opacity: 0.6;
    margin: 0 35px;
    outline: none;
    cursor: pointer;
}

.other-features .other-features-slider .item.slick-center {
    opacity: 1;
}

.other-features .other-features-slider .item
    span {
    margin-bottom: 20px;
    display: inline-block;
}

.other-features .other-features-slider .item .lnr {
    font-size: 40px;
}

.other-features .other-features-slider .item
    h4 {
    font-size: 20px;
}

.other-features .other-features-slider .item
    p {
    max-width: 300px;
    margin: 0 auto;
}

/*------------------------------
    08. END OTHER FEATURES SECTION
------------------------------*/

/*------------------------------
    09. START WATCH VIDEO SECTION
------------------------------*/
.watch-video .video {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.watch-video .video:
    before {
    position: absolute;
    content: '';
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
}

.watch-video .video
    img {
    position: relative;
}

.watch-video .video
    a {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    animation: ripple_shadow 2s linear infinite;
}

.watch-video .video
    a:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-left: 25px solid #fff;
    border-bottom: 17px solid transparent;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
    @keyframes ripple_shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    }

    100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
    }
}

/*------------------------------
    09. END WATCH VIDEO SECTION
------------------------------*/


/*------------------------------
    10. START SCREENSHOTS SECTION
------------------------------*/

.screenshots .screenshots-slider {
    margin: 0 -15px;
}

.screenshots .screenshots-slider .item {
    opacity: 0.6;
    margin: 0 35px;
    outline: none;
    cursor: pointer;
}

.screenshots .screenshots-slider .item.slick-center {
    opacity: 1;
}

/*------------------------------
    10. END SCREENSHOTS SECTION
------------------------------*/

/*------------------------------
    11. START TESTIMONIAL SECTION
------------------------------*/

.clients-testimonial .testimonial-slider {
    margin-bottom: 60px;
}

.clients-testimonial .testimonial-slider .item {
    outline: none;
    margin: 0px 30px 0 0;
    background: #e10318;
}

.clients-testimonial .testimonial-slider .item .client-testimonial {
    padding: 10em 3em 0em 3em;
    position: relative;
    min-height: 370px;
}

.clients-testimonial .testimonial-slider .item .client-testimonial:
    after {
    /* position: absolute; */
    /* content: ''; */
    bottom: -15px;
    width: 0;
    left: 45px;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: transparent transparent transparent transparent;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p {
    color: #fff;
    font-size: 17px;
    margin: 0;
    position: relative;
    font-weight: 400;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:after,
.clients-testimonial .testimonial-slider .item .client-testimonial p:before {
    position: absolute;
    font-size: 400px;
    opacity: 0.2;
    color: #fff;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:before {
    content: '\f10d';
    font-family: 'Font Awesome\ 5 Free';
    font-size: 85px;
    font-weight: 900;
    line-height: 85px;
    top: -50px;
    left: -40px;
}

.clients-testimonial .testimonial-slider .item .client-testimonial
    p:after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f10e';
    font-size: 85px;
    font-weight: 900;
    line-height: 85px;
    bottom: -50px;
    right: -40px;
}

.clients-testimonial .testimonial-slider .item .client-info {
    padding: 30px 15px 89px 15px;
}

.clients-testimonial .testimonial-slider .item .client-info
    figure {
    width: 60px;
    height: 60px;
    border: 3px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 15px;
}

.clients-testimonial .testimonial-slider .item .client-info
    h3 {
    font-size: 20px;
    margin: 0;
}

.clients-testimonial .testimonial-slider .slick-dots {
    bottom: -60px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.clients-testimonial .testimonial-slider .slick-dots
    li button:before {
    display: none;
}

.clients-testimonial .testimonial-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #dcdfe7;
    margin: 0 auto;
}

/*------------------------------
    11. END TESTIMONIAL SECTION
------------------------------*/

/*------------------------------
    12. START FUN FACTS SECTION
------------------------------*/

.fun-facts .fact-box {
    padding: 2em;
    background: #fff;
    border-radius: 50px;
    margin-bottom: 1em;
}

.fun-facts .fact-box .lnr {
    font-size: 50px;
    margin: 10px 0 20px;
}

.fun-facts .fact-box
    h5 {
    font-size: 55px;
    font-weight: 900;
}

.fun-facts .fact-box
    h6 {
    font-size: 25px;
}

/*------------------------------
    12. END FUN FACTS SECTION
------------------------------*/

/*------------------------------
    13. START PRICE TABLE SECTION
------------------------------*/

.prices .price-table {
    margin-bottom: 30px;
}

.prices .price-table .top {
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.prices .price-table .top .offer {
    width: 200px;
    font-weight: 300;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: -58px;
    top: 30px;
    padding: 2px 0;
    letter-spacing: 2px;
    transform: rotate(-45deg);
}

.prices .price-table .top
    h4 {
    font-size: 25px;
    font-weight: 600;
}

.prices .price-table .top
    h3 {
    font-size: 80px;
    font-weight: 600;
    margin: 0;
}

.prices .price-table .top
    h3 span {
    font-size: 20px;
}

.prices .price-table .top
    h5 {
    font-size: 16px;
    margin: 0;
}

.prices .price-table .bottom {
    padding: 25px 0;
}

.prices .price-table .bottom
    ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prices .price-table .bottom
    ul li {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    border-bottom: 1px solid #f6f6f647;
    padding: 15px;
}

/*------------------------------
    13. END PRICE TABLE SECTION
------------------------------*/

/*------------------------------
    14. START TEAM SECTION
------------------------------*/

.our-team .team-slider .person {
    background: #fff;
    padding: 30px;
    margin: 0 15px;
    position: relative;
    margin-bottom: 100px;
    outline: none;
}

.our-team .team-slider .person
    img {
    border-radius: 50%;
    width: 130px;
}

.our-team .team-slider .person
    h3 {
    font-weight: 800;
    font-size: 18px;
    margin: 0;
}

.our-team .team-slider .person
    h5 {
    font-size: 16px;
    margin: 0;
}

.our-team .team-slider .person
    p {
    margin: 0;
}

.our-team .team-slider .person
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    z-index: -1;
    background: #fff;
}

.our-team .team-slider .person
    ul li {
    display: inline-block;
}

.our-team .team-slider .person
    ul li a {
    display: block;
    padding: 5px;
    width: 35px;
    border-radius: 50%;
}

.our-team .team-slider .person:
    hover ul {
    transform: translateY(100%);
}

.our-team .team-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.our-team .team-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.our-team .team-slider .slick-dots
    li button:before {
    display: none;
}

.our-team .team-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #fff;
    margin: 0 auto;
}

/*------------------------------
    14. END TEAM SECTION
------------------------------*/

/*------------------------------
    15. START FAQ SECTION
------------------------------*/

.faq .accordion .card {
    margin-bottom: 1em;
    border-radius: 28px !important;
    overflow: hidden;
    background: #fff;
}

.faq .accordion .card,
.faq .accordion .card .card-header {
    border: none;
}

.faq .accordion .card .card-header {
    padding: 0;
}

.faq .accordion .card .card-header
    h5 .btn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    white-space: unset;
    text-decoration: none;
    padding: 15px 60px 15px 30px;
    color: #2a3659;
    position: relative;
}

.faq .accordion .card .card-header
    h5 .btn:before,
.faq .accordion .card .card-header h5 .btn:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: #ccc;
}

.faq .accordion .card .card-header
    h5 .btn:before {
    width: 2px;
    height: 12px;
    right: 30px;
}

.faq .accordion .card .card-header
    h5 .btn:after {
    width: 12px;
    height: 2px;
    right: 25px;
}

.faq .accordion .card .card-header
    h5 .btn.collapsed:before,
.faq .accordion .card .card-header h5 .btn.collapsed:after {
    background: #fff;
    transform: translateY(-50%) rotate(0deg);
}

.faq .accordion .card .card-header
    h5 .btn.collapsed {
    color: #fff;
}

.faq .accordion .card .card-body {
    padding: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

/*------------------------------
    15. END FAQ SECTION
------------------------------*/

/*------------------------------
    16. START LOGOS SECTION
------------------------------*/

.logos {
    padding: 35px 0;
}

.logos .logos-slider .item {
    outline: none;
    margin: 0 30px;
}
    @media (max-width: 768px) {
    .logos .logos-slider .slick-next {
        right: 0;
    }

    .logos .logos-slider .slick-prev {
    left: 0;
    z-index: 1;
    }
}

/*------------------------------
    16. END LOGOS SECTION
------------------------------*/

/*------------------------------
    17. START RECENT NEWS SECTION
------------------------------*/

.recent-news .recent-news-slider .item {
    outline: none;
    margin-bottom: 100px;
}

.recent-news .recent-news-slider .item
    h3 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}

.recent-news .recent-news-slider .item
    p {
    font-size: 18px;
    margin: 0;
}

.news-meta {
    padding: 0;
    list-style: none;
    margin: 0;
}

.news-meta
    li {
    display: inline-block;
    font-size: 14px;
    color: #c2c2c2;
    margin-right: 15px;
}

.news-meta
    ul li span {
    margin-right: 5px;
}

.recent-news .recent-news-slider .slick-dots
    li {
    width: 20px;
    height: 15px;
}

.recent-news .recent-news-slider .slick-dots
    li.slick-active {
    width: 40px;
}

.recent-news .recent-news-slider .slick-dots
    li button:before {
    display: none;
}

.recent-news .recent-news-slider .slick-dots
    li button {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #dcdfe7;
    margin: 0 auto;
}
    @media (max-width: 768px) {
    .recent-news .recent-news-slider .item h3 {
        margin-top: 15px;
    }
}

/*------------------------------
    17. END RECENT NEWS SECTION
------------------------------*/

/*------------------------------
    18. START DOWNLOAD APP SECTION
------------------------------*/

.download-app
    h2 {
    font-size: 40px;
    font-weight: 900;
}

.download-app
    p {
    font-size: 18px;
}

.download-app
    a {
    position: relative;
    padding-left: 80px;
    text-align: left;
    text-transform: none;
    margin-right: 30px;
}

.download-app
    a:last-child {
    margin: 0;
}

.download-app
    a i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    left: 35px;
}
    @media (max-width: 414px) {
    .download-app a {
        padding: 10px;
    padding-left: 55px;
    padding-right: 20px;
    font-size: 12px;
    margin-right: 10px;
    }

    .download-app a i {
    left: 20px;
    font-size: 25px;
    }

    .download-app a:
    last-child {
        margin: 0;
    }
}

/*------------------------------
    18. END DOWNLOAD APP SECTION
------------------------------*/

/*------------------------------
    19. START GET IN TOUCH SECTION
------------------------------*/
.git-in-touch .form-group {
    position: relative;
}

.git-in-touch .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    margin-bottom: 1.5em;
}

.git-in-touch .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.git-in-touch .form-group .form-control:
    focus~.focus-border {
    width: 100%;
}

.git-in-touch .form-group .form-control:
    focus {
    outline: none;
    box-shadow: none;
}

.git-in-touch .contact-info .info-box {
    padding: 1em 2em;
}

.git-in-touch .contact-info .info-box
    span {
    display: block;
    margin-bottom: 20px;
}

.git-in-touch .contact-info .info-box .lnr {
    font-size: 60px;
    text-align: center;
    margin: 0 auto 20px;
}

.git-in-touch .contact-info .info-box
    h5,
.git-in-touch .contact-info .info-box a {
    font-size: 18px;
    line-height: 30px;
    display: block;
}

/*------------------------------
    19. END GET IN TOUCH SECTION
------------------------------*/

/*------------------------------
    20. START MAP SECTION
------------------------------*/
.map {
    line-height: 0;
}

.map
    iframe {
    width: 100%;
    height: 500px;
}


/*------------------------------
    20. END MAP SECTION
------------------------------*/

/*------------------------------
    21. START FOOTER SECTION
------------------------------*/
    footer {
    background: #e10318;
}
    footer .subscribe .subscribe-form {
    background: #fff;
    padding: 25px;
    position: relative;
    overflow: hidden;
    border-radius: 80px;
}
    footer .subscribe .subscribe-form .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 14px 20px;
    background: transparent;
    margin-bottom: 0;
    background: rgba(158, 158, 158, 0.1);
    border-radius: 50px;
    border: none;
}
    footer .subscribe .subscribe-form .form-group .form-control:focus {
    outline: none;
    box-shadow: none;
}
    footer .footer-widgets .widget {
    color: #fff;
    margin-bottom: 1em;
}
    footer .footer-widgets .widget img {
    margin-bottom: 15px;
}
    footer .footer-widgets .widget h6 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1.5em;
    color: #fff;
}
    footer .footer-widgets .widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
    footer .footer-widgets .widget ul li {
    margin-bottom: 1em;
    line-height: 30px;
}
    footer .footer-widgets .widget ul li span {
    color: #fff;
}
    footer .footer-widgets .widget ul li a {
    color: #fff;
}
    footer .copyright {
    padding: 15px 0;
    border-top: 1px solid #fff;
    margin: 0 5%;
}
    footer .copyright p {
    font-weight: 400;
    margin: 0;
    line-height: 40px;
    color: #fff;
}

/*------------------------------
    21. END FOOTER SECTION
------------------------------*/


/*------------------------------
    22. START BLOG PAGE
------------------------------*/
.page-head {
    position: relative;
    padding: 125px 0;
}

.page-head
    h1 {
    font-size: 60px;
    font-weight: 900;
    margin: 0;
    padding: 100px 0 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 15px;
}

.blog-page .blog-box {
    margin-bottom: 30px;
}

.blog-page .blog-box .blog-details {
    padding: 0 15px}

.blog-page .blog-box .blog-details
    h3 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

.blog-page .blog-box .blog-img
    a {
    display: block;
}

.blog-page .blog-box .blog-img
    a img {
    width: 100%;
}

.blog-page .blog-box .blog-details
    h3 a {
    transition: all ease 0.3s;
}

.blog-page .blog-box .blog-details
    p {
    font-size: 14px;
    line-height: 25px;
    margin: 0;
}
    nav .pagination {
    padding: 15px 35px;
    margin: 0 auto;
    justify-content: center;
}
    nav .pagination li:first-child a,
nav .pagination li:last-child a {
    line-height: 28px;
    border-radius: 50% !important;
    background: transparent !important;
}
    nav .pagination li {
    margin: 0 10px;
}
    nav .pagination li a {
    font-size: 14px;
    border-radius: 50%;
    border: none;
    color: #000;
    padding: 0;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 24px;
    background: transparent;
}
    nav .pagination li a:hover {
    color: #1d1d1d;
    background: rgba(158, 158, 158, 0.1);
}
    @media (max-width: 992px) {
    nav .pagination {
        margin-bottom: 30px;
    }
}

/*------------------------------
    22. END BLOG PAGE
------------------------------*/

/*------------------------------
    23. START SIDEBAR 
------------------------------*/
    aside.sidebar .gray-panel {
    background: rgba(158, 158, 158, 0.1);
    padding: 15px 30px;
    margin-bottom: 30px;
}
    aside.sidebar .search .form-group {
    position: relative;
}
    aside.sidebar .search .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    background: transparent;
}
    aside.sidebar .search .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
    aside.sidebar .search .form-group .form-control:focus~.focus-border {
    width: 100%;
}
    aside.sidebar .gray-panel h3 {
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    position: relative;
    margin-bottom: 15px;
}
    aside.sidebar .gray-panel h3:after {
    position: absolute;
    width: 50px;
    height: 2px;
    background: #000;
    content: '';
    bottom: 0;
    left: 0;
}
    aside.sidebar .follow-me ul {
    padding: 0;
    list-style: none;
    margin: 0 0 20px;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}
    aside.sidebar .follow-me ul li {
    margin-right: 10px;
    margin-bottom: 10px;
}
    aside.sidebar .follow-me ul li a {
    font-size: 30px;
    height: 80px;
    width: 60px;
    background: #ccc;
    display: block;
    text-align: center;
    line-height: 80px;
    color: #fff;
}
    aside.sidebar .follow-me ul li.facebook a {
    background: #4B69B1;
}
    aside.sidebar .follow-me ul li.instagram a {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
    aside.sidebar .follow-me ul li.linkedin a {
    background: #1278B6;
}
    aside.sidebar .follow-me ul li.twitter a {
    background: #2BB2E1;
}
    aside.sidebar .categories ul {
    padding: 0;
    list-style: none;
    margin: 0 0 20px;
}
    aside.sidebar .categories ul li a {
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 7px;
    display: block;
}
    aside.sidebar .categories ul li:last-child a {
    margin: 0;
}
    aside.sidebar .recent-post .post {
    margin-bottom: 15px;
}
    aside.sidebar .recent-post .post figure {
    height: 60px;
    margin: 0 10px 0 0;
    flex: 0 0 60px;
}
    aside.sidebar .recent-post .post h4 {
    font-weight: 600;
    font-size: 16px;
}
    aside.sidebar .tags ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
    aside.sidebar .tags ul li {
    display: inline-block;
    margin: 0 20px 15px 0;
}

/*------------------------------
    23. END SIDEBAR 
------------------------------*/


/*------------------------------
    24. START SINGLE BLOG PAGE
------------------------------*/
.single-blog-with-sidebar {
    padding-bottom: 100px;
}

.single-blog-page .blog-box .blog-details {
    padding: 0 15px}

.single-blog-page .blog-box .blog-details
    h3 {
    font-size: 22px;
    font-weight: 900;
    margin: 0;
}

.single-blog-page .blog-box .blog-img
    img {
    width: 100%;
}

.single-blog-page .blog-box .blog-details
    h3 {
    transition: all ease 0.3s;
}

.single-blog-page .blog-box .blog-details
    p {
    font-size: 16px;
    line-height: 25px;
    margin: 0;
    font-weight: 400;
    margin-bottom: 30px;
}

.single-blog-page .blog-box .blog-details
    blockquote {
    padding: 30px 45px;
    background: rgba(158, 158, 158, 0.1);
    margin-bottom: 30px;
    border-left: 5px solid;
}

.single-blog-page .blog-box .blog-details
    blockquote p {
    margin: 0;
    font-size: 20px;
    font-style: italic;
    line-height: 30px;
}

.single-blog-page
    hr {
    border-top: 1px solid rgba(124, 124, 124, 0.1);
}

.single-blog-page .blog-box .post-tag-area {
    border-bottom: 1px solid #e5e5e5;
    padding: 0 15px 10px;
    margin-bottom: 30px;
}

.single-blog-page .blog-box .post-tag-area
    ul {
    padding: 0;
    padding-bottom: 10px;
    margin: 0;
}

.single-blog-page .blog-box .post-tag-area
    ul li {
    display: inline-block;
    font-size: 18px;
    color: #3e3e3e;
}

.single-blog-page .blog-box .post-tag-area
    ul li a {
    display: block;
    text-align: center;
}

.single-blog-page .blog-box .post-tag-area .share-icon
    li a {
    width: 30px;
    font-size: 16px;
}

.single-blog-page .blog-box .post-tag-area .tags
    li a {
    font-size: 16px;
}

.comments-container {
    padding: 15px;
}

.comments-container
    h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.comments-container .comments-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

.comments-container .comments-list
    li {
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.comments-container .comments-list
    li:last-child {
    border: none;
}

.comments-container .comments-list
    li figure {
    flex: 0 0 60px;
    max-width: 60px;
    margin: 0;
    margin-right: 30px;
}

.comments-container .comments-list
    li h4 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 16px;
}

.comments-container .comments-list
    li h6 {
    font-size: 14px;
    margin-bottom: 8px;
}

.comments-container .comments-list
    li p {
    margin-bottom: 10px;
}

.comments-container .comments-list
    li .reply {
    font-size: 14px;
}

.comments-container .comments-list
    li .reply i {
    margin-right: 5px;
}

.comments-container .comments-list
    li.comment-reply {
    margin-left: 100px;
}

.comments-form
    h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.comments-form .form-group {
    position: relative;
}

.comments-form .form-group .form-control {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    font-weight: 300;
    padding: 10px 20px;
    background: transparent;
}

.comments-form .form-group .form-control~.focus-border {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 3px;
    transform: translateX(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.comments-form .form-group .form-control:
    focus~.focus-border {
    width: 100%;
}
    @media (max-width: 992px) {
    .comments-form .btn {
        margin-bottom: 30px;
    }
}

/*------------------------------
    24. END SINGLE BLOG PAGE
------------------------------*/


/* ----------------------- */

.themes-colors {
    position: fixed;
    left: -200px;
    top: 10%;
    width: 200px;
    background: #fff;
    z-index: 99;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05) !important;
}

.themes-colors
    h3 {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 30px;
    color: #222;
}

.themes-colors
    h6 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #585858;
}

.themes-colors
    span {
    color: #fff;
    display: block;
    padding: 15px;
    text-align: center;
    background: #fff;
    position: absolute;
    top: 0px;
    right: -52px;
    font-size: 22px;
    line-height: 15px;
    cursor: pointer;
    background: #00cdcd;

}

.themes-colors
    span i {
    color: #fff;
    animation: gear 3s linear infinite forwards;
}
    @keyframes gear {
    0% {
        transform: rotate(0);
    }

    100% {
    transform: rotate(360deg)}
}

.themes-colors
    ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.themes-colors
    ul:last-child {
    margin: 0;
}

.themes-colors
    ul li {
    margin-right: 8px;
    margin-bottom: 10px;
}

.themes-colors
    ul li:nth-child(5),
.themes-colors ul li:nth-child(10) {
    margin: 0;
}

.themes-colors
    ul li a {
    color: #585858;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.themes-colors.open {
    left: 0;
}

.themes-colors
    ul.solid li a {
    background: #ccc;
}

.themes-colors
    ul.solid li:nth-child(1) a {
    background: #00cdcd;
}

.themes-colors
    ul.solid li:nth-child(2) a {
    background: #fcd04d;
}

.themes-colors
    ul.solid li:nth-child(3) a {
    background: #FE676E;
}

.themes-colors
    ul.solid li:nth-child(4) a {
    background: #ffbeba;
}

.themes-colors
    ul.solid li:nth-child(5) a {
    background: #6c4874;
}

.themes-colors
    ul.solid li:nth-child(6) a {
    background: #02416c;
}

.themes-colors
    ul.solid li:nth-child(7) a {
    background: #316d77;
}

.themes-colors
    ul.solid li:nth-child(8) a {
    background: #690431;
}

.themes-colors
    ul.solid li:nth-child(9) a {
    background: #F2884B;
}

.themes-colors
    ul.solid li:nth-child(10) a {
    background: #1d1d1d333;
}



.themes-colors
    ul.gradient li a {
    background: #000;
}

.themes-colors
    ul.gradient li:nth-child(1) a {
    background-image: -moz-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(3, 17, 24) 0%, rgb(4, 89, 133) 100%);
}

.themes-colors
    ul.gradient li:nth-child(2) a {
    background-image: -moz-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
    background-image: -webkit-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
    background-image: -ms-linear-gradient(-45deg, rgb(0, 205, 205) 0%, rgb(159, 21, 161) 70%);
}

.themes-colors
    ul.gradient li:nth-child(3) a {
    background-image: -moz-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
    background-image: -webkit-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
    background-image: -ms-linear-gradient(-45deg, rgb(47, 27, 64) 0%, rgb(159, 21, 161) 100%);
}

.themes-colors
    ul.gradient li:nth-child(4) a {
    background-image: -moz-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
    background-image: -webkit-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
    background-image: -ms-linear-gradient(-45deg, rgb(115, 75, 109) 0%, rgb(47, 27, 64) 60%);
}

.themes-colors
    ul.gradient li:nth-child(5) a {
    background-image: -moz-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
    background-image: -webkit-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
    background-image: -ms-linear-gradient(-45deg, rgb(255, 95, 109) 15%, rgb(255, 195, 113) 100%);
}

.themes-colors
    ul.gradient li:nth-child(6) a {
    background-image: -moz-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
    background-image: -webkit-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
    background-image: -ms-linear-gradient(-135deg, rgb(252, 208, 77) 0%, rgb(255, 190, 186) 70%);
}

.themes-colors
    ul.gradient li:nth-child(7) a {
    background-image: -moz-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
    background-image: -webkit-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
    background-image: -ms-linear-gradient(-45deg, rgb(133, 161, 201) 0%, rgb(158, 115, 156) 65%);
}

.themes-colors
    ul.gradient li:nth-child(8) a {
    background-image: -moz-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
    background-image: -webkit-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
    background-image: -ms-linear-gradient(-45deg, rgb(227, 164, 173) 0%, rgb(176, 136, 145) 60%);
}

.themes-colors
    ul.gradient li:nth-child(9) a {
    background-image: -moz-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
    background-image: -webkit-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
    background-image: -ms-linear-gradient(-45deg, rgb(208, 230, 165) 0%, rgb(134, 227, 206) 70%);
}

.themes-colors
    ul.gradient li:nth-child(10) a {
    background-image: -moz-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
    background-image: -webkit-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
    background-image: -ms-linear-gradient(90deg, rgb(39, 77, 90) 50%, rgb(61, 130, 121) 120%);
}

.box.aos-init.aos-animate {
    height: 400px;
    padding: 0;
    position: relative;
}

.menu-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: #e10318;
}
.boxes:
    before{
     content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 33%;
    height: 83%;
    z-index: 0;
    background:url('../img/dotted.png');
    top: 123px;
}
.why-us:
    before{
     content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 18%;
    height: 53%;
    z-index: 0;
    background:url('../img/dotted.png');
    top: 45px;
    opacity:20%;
}
.contact:
    before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: url('../img/contact.png');
    top: 0px;
    background-repeat: no-repeat;
}
.clients-testimonial:
    before{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999;
    background: url('../img/test-bg1.png');
    top: 53px;
    background-repeat: no-repeat;
}
.clients-testimonial:
    after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999;
    background: url('../img/test-bg2.png');
    top: 71%;
    background-repeat: no-repeat;
}
.boxes, .why-us, .contact, .clients-testimonial {
    position:relative;
}
.false-height{
    height:600px;
}
.clients-testimonial .testimonial-slider .item:nth-child(3) {
    margin: 0px;
}
.sticky .navbar .navbar-nav .nav-item>.nav-link {
    color: #333;
    font-weight: 400;
    position: relative;
    padding: 20px;
}
.sticky .img-fluid {
    height: 45px;
};
    box-shadow: 0px -1px 10px -1px #0808089c;
}

.clients-testimonial .testimonial-slider .item .client-testimonial:after {
    border-top-color: #00cdcd;
}

.features-circle svg circle {
    stroke: #00cdcd;
}

.lity,
.watch-video .video:before {
    background: #e1031800;
}
.background-withcolor, .clients-testimonial .testimonial-slider .item .client-testimonial{
    background: #e10318 !important;
}
/*------------------------------
    02. END MAIN COLOR
------------------------------*/

/*------------------------------
    03. START SECOND COLOR
------------------------------*/
.btn-theme,
.btn-theme:hover,
.boxes .box:after,
.git-in-touch .form-group .form-control~.focus-border,
aside.sidebar .search .form-group .form-control~.focus-border,
.comments-form .form-group .form-control~.focus-border {
    background: #e10318;
}
.our-team .team-slider .person:hover h3,
.our-team .team-slider .person ul li a,
.boxes .box:hover .lnr,
footer .copyright a:hover {
    color: #F2CE5F;
}

/*------------------------------
    03. END SECOND COLOR
------------------------------*/
@media (max-width: 992px){
.background-withcolor {
    background: #ffffff !important;
}
}