/* ----------------------------------------------------
    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: 'Lato', sans-serif;
    font-size: 16px;
    position: relative;
    overflow-x: hidden;
}

p {
    font-weight: 400;
    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 {
    border-radius: 50px;
    padding: 15px 45px;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-block;
    border: 0;
}

.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: none !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,
.cslapp-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;
}

.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
------------------------------*/

@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;
    }
}
/*------------------------------
    03. START HEADER STYLE
------------------------------*/

.cslapp-header {
    position: absolute;
    top: 50px;
    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;
}

.cslapp-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;
    }
}

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

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

.cslapp-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");
}

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

.cslapp-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);
}

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

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

.cslapp-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;
    }
}

.cslapp-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;
    }
}

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

.cslapp-header .dropdown-menu .dropdown-item:hover {
    color: #fff;
}

@media (max-width: 992px) {
    .cslapp-header {
        padding: 1em;
    }

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

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

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

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

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

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

.slide {
    position: relative;
}

.slide:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 0;
    border-right: 100vw solid #fff;
    border-top: 200px solid transparent;
    width: 0;
    z-index: 0;
}

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

.slide .content-bottom h2 {
    font-size: 90px;
    font-weight: 900;
    color: #fff;
    /*text-transform: uppercase;*/
    line-height: 90px;
    margin-bottom: 2rem;
}

.slide .content-bottom p {
    color: #fff;
    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;
}

.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
------------------------------*/

/*------------------------------
    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
------------------------------*/

/*------------------------------
    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
------------------------------*/

/*------------------------------
    21. START FOOTER SECTION
------------------------------*/




footer .copyright {
    padding: 15px 0;
    background: rgba(0, 0, 0, 0.2);
}

footer .copyright p {
    font-weight: 400;
    margin: 0;
    line-height: 40px;
    color: #fff;
}

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