/*
Template Name: Soura HTML5 App Template 
Version: 2.0
Author: Karim Ezzat
Author URI: 
Description: soura on-page Website Responsive HTML Template App
Tags: One-Page,  Website, Craetive, App, Responsive, Html5, Css3, jQuery, Bootstrap, Mobile
*/

/*
Style Index
==================================================
    1. Basic Style & Reset
    2. Preloader
    3. Header Area
    4. Welcome Area
    5. Brands Area
    6. About Section
    7. Video Section
    8. Achivement Area
    9. Features Section
    10. App Interface Area
    11. Team Area
    12. App Screen Shots Area
    13. Pricing Area    
    14. Testimonials Area
    15. Question Area
    16. Letest Blog Area
    17. Footer Area
    18. Blog Page
    19. Scroll Up
*/

/* =================================== */
/*    Basic Style & Reset 
/* =================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

::selection {
    background: #f1556a;
    color: #fff;
}

::-moz-selection {
    background: #f1556a;
    color: #fff;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix { display: inline-block }

ol, ul { list-style: none }

header, 
nav, section,
article, aside, footer { display: block }

* { box-sizing: border-box }

body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    background-color: #fff;
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.625em;
    color: #777777;
    overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1e1e1e
}

h1, .h1 { font-size: 36px; }

h2, .h2 { font-size: 30px; }

h3, .h3 { font-size: 24px; }

h4, .h4 { font-size: 18px; }

h5, .h5 { font-size: 16px; }

h6, .h6 { font-size: 14px; }

img { max-width: 100%; height: auto }

button,
input,
textarea { letter-spacing: 1px }

section { position: relative; z-index: 1}

a,
:after,
:before,
.testi-box,
.transition,
.single-screenshot.slick-center,
single-screenshot.slick-active,
.pricing-item .btn:after,
.testi-slide .owl-controls .owl-nav > div:before {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s; 
}

.section-gap { padding: 90px 0; }

/* section title */

.section-title {
    margin-bottom: 70px;
    text-align: center;
}

.section-title h2 {
    font-size: 42px;
    color: #1e1e1e;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    text-transform: capitalize;
}
.section-title h2 em {
    font-style: normal;
    color: #f4813f;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.section-title h2:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 130px;
    background-color: #1e1e1e;
    left: calc(50% - 65px);
}

.section-title h2.text-white:before{
    background-color: #fff;
}

.section-title h2:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 8px;
    width: 8px;
    background-color: #1e1e1e;
    left: calc(50% - 4px);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.section-title h2.text-white:after{ background-color: #fff }

/* gardient background */

.gradient-bg,
.blog-footer,
.line-border:after,
.welcome-area .buttons:hover,
.blog-pagination .page-link:hover,
.testi-slide .owl-controls .owl-nav > div,
.left_question_inner .accordion .card:before,
.right_question_inner .accordion .card:before,
.blog-pagination .page-item.active .page-link,
.blog_right_sidebar .tag_cloud_widget ul li a:hover,
.left_question_inner .card .card-heading h4 a i:before,
.right_question_inner .card .card-heading h4 a i:before
{
    background: -webkit-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: -moz-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: -o-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: -ms-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
}

/* left and right images decor */

.left-image-decor,
.right-image-decor {
    position: absolute;
    background-repeat: no-repeat;
    width: 100%;
    display: inline-block;
    height: 110%;
    margin-top: -200px;
}

.right-image-decor {
    background-image: url(../img/right-bg-decor.png);
    background-position: right center;
}

.left-image-decor { background-image: url(../img/left-bg-decor.png) }

/* =================================== */
/*    Preloader
/* =================================== */
#preloader {
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
    color: #fff;
}
.loader{
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;
}
.loader:before{
    content: "";
    width: 50px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    opacity: 0.1;
    position: absolute;
    top: 59px;
    left: 0;
    animation: shadow .5s linear infinite;
}
.loader:after{
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    animation: loading .5s linear infinite;
}
@-webkit-keyframes loading{

    17% { border-bottom-right-radius: 3px; }

    25% { transform: translateY(9px) rotate(22.5deg); }

    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% { transform: translateY(9px) rotate(67.5deg); }

    100% { transform: translateY(0) rotate(90deg); }
}
@keyframes loading{

    17% { border-bottom-right-radius: 3px; }

    25% { transform: translateY(9px) rotate(22.5deg); }

    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% { transform: translateY(9px) rotate(67.5deg); }

    100% { transform: translateY(0) rotate(90deg); }
}
@-webkit-keyframes shadow{
    0%,
    100% { transform: scale(1, 1) }

    50% { transform: scale(1.2, 1); }
}
@keyframes shadow{
    0%,
    100% { transform: scale(1, 1); }

    50% { transform: scale(1.2, 1); }
}

/* =================================== */
/*    Header Area "Navigation"
/* =================================== */

.header-area {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 100px;
}

.header-area .main-nav {
    min-height: 80px;
    background: transparent;
}

.header-area .main-nav .logo {
    line-height: 80px;
    color: #191a20;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    float: left;
}

.header-area .main-nav .nav {
    float: left;
    margin-top: 27px;
    margin-left: 15%;
    margin-right: 0px;
    background-color: #fff;
    padding: 0px 20px;
    position: relative;
    z-index: 999;
}

.header-area .main-nav .nav li {
    padding-left: 20px;
    padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
    padding-right: 0px;
}

.header-area .main-nav .nav li a {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: #7a7a7a;
    text-transform: uppercase;
    height: 40px;
    line-height: 40px;
    border: transparent;
    letter-spacing: 1px;
}

.header-area .main-nav .menu-trigger {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 23px;
    width: 32px;
    height: 40px;
    text-indent: -9999em;
    z-index: 99;
    right: 40px;
    display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
    background-color: #fff;
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0;
}

.header-area .main-nav .menu-trigger span { top: 16px }

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
    content: "";
    width: 75%;
}

.header-area .main-nav .menu-trigger span:before {
    -moz-transform-origin: 33% 100%;
    -ms-transform-origin: 33% 100%;
    -webkit-transform-origin: 33% 100%;
    transform-origin: 33% 100%;
    top: -10px;
    z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
    -moz-transform-origin: 33% 0;
    -ms-transform-origin: 33% 0;
    -webkit-transform-origin: 33% 0;
    transform-origin: 33% 0;
    top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
    background-color: transparent;
    width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
    -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
    -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
    -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
    transform: translateY(6px) translateX(1px) rotate(45deg);
    background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
    -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    transform: translateY(-6px) translateX(1px) rotate(-45deg);
    background-color: #fff;
}

.background-header .logo { color: #191a20 !important}

.background-header .main-nav .menu-trigger.active span:after,
.background-header .main-nav .menu-trigger.active span:before{
    background-color: #fff;
}

.header-area.header-sticky { min-height: 80px }

.header-area.header-sticky .nav { margin-top: 20px }

.header-area .main-nav .nav li a:hover,
.header-area.header-sticky .nav li a.active { color: #f1556a }

.background-header {
    background-color: #fff;
    height: 80px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
}

.background-header .main-nav .nav li a { color: #1e1e1e }

@media (max-width: 1200px) {
    .header-area .main-nav .nav li {
        padding-left: 12px;
        padding-right: 12px;
    }
    .header-area .main-nav:before { display: none }
}

@media (min-width: 992px) {

    .header-area .main-nav .nav { display: flex !important }
}

/* =================================== */
/*    Welcome Area
/* =================================== */

.welcome-area {
    height: 100vh;
    min-height: 700px;
    background: url(../img/welcome-area/banner-bg.png) no-repeat 80% 50%;
}

.fullscreen { min-height: 700px}

.welcome-area .header-text h1 {
    font-size: 60px;
    margin-bottom: 25px;
    color: #191a20;
}

.welcome-area p { margin-bottom: 45px}

.welcome-area .buttons {
    padding: 20px 24px 8px;
    max-width: 225px;
    margin-right: 10px;
    border: 1px solid #dddddd;
    background-color: #fff;
    color: #000 !important; 
}

.welcome-area .buttons i {
    font-size: 44px;
    padding-right: 20px;
    color: #eeeeee;
    margin-top: -8px; 
}
.welcome-area .buttons:hover {
    cursor: pointer;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    border: 1px solid transparent;
}
.welcome-area .buttons:hover a { color: #fff; }

.welcome-area .buttons a { color: #000; }

.welcome-area .buttons p {
    margin-bottom: 8px !important;
    font-size: 14px;
    line-height: 18px;
    text-align: left; 
}
.welcome-area .buttons p span {
    font-size: 24px;
    font-weight: 600;
    font-family: "Poppins", sans-serif; 
}
.welcome-area .buttons:last-child {
    color: #fff !important;
    border: 1px solid #f36d53; 
}

.welcome-area .buttons:last-child:hover { border: 1px solid transparent }

.banner-images {
    text-align: right;
    position: relative;
    left: 160px;
}

.animated_images {
    position: relative;
    min-height: 740px;
}

.animated_images ul li {
    position: absolute;
    left: 82px;
    top: 140px;
}

.animated_images ul li:nth-child(2) {
    left: calc(50% - 280px);
    top: calc(50% - 70px);
}

.animated_images ul li:nth-child(3) {
    top: auto;
    bottom: 0;
    left: calc(50% - 200px);
    transform: rotate(27deg);
}

/* =================================== */
/*	Brands Area  
/* =================================== */

.brands-area { position: relative}

.brands-area:before {
    position: absolute;
    content: "";
    right: 0px;
    background: #fff;
    top: 0px;
    width: 90%;
    height: 100%;
    border-radius: 100px 0px 0px 100px;
    box-shadow: 0px 20px 50px rgba(153, 153, 153, 0.2);
    border: 1px solid rgba(214, 214, 214, 0.11); 
}
.brand-wrap {
    margin-top: -60px;
    padding: 60px 100px;
    position: relative;
}

.brand-wrap .owl-carousel .owl-item img { width: auto !important; }

.brand-wrap .single-brand {
    text-align: center;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .5;
}
.brand-wrap .single-brand:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

/* =================================== */
/*    About Section
/* =================================== */

#about { position: relative; z-index: 9 }

.about-item {
    background: #fff;
    text-align: left;
    padding: 40px 30px 45px;
    background-image: url(../img/about/about-bg.png);
    background-position: right top;
    background-repeat: no-repeat;
}

.col-lg-4:nth-child(2) .about-item { margin-top: 50px }

.about-item .about-icon {
    width: 170px;
    height: 95px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    line-height: 112px;
}
.about-item  .about-icon i {
    font-size: 40px;
    color: #191a20;
}
.about-icon:after {
    content: '';
    position: absolute;
    height: 80px;
    width: 80px;
    background: #fcefed;
    border-radius: 100%;
    left: 0;
    z-index: -1;
    top: 0;
}

.about-item h3 {
    font-size: 20px;
    margin-bottom: 18px;
}
.about-item p { margin-bottom: 20px }

.about-item a {
    font-size: 14px;
    color: #f1556a;
    position: relative;
    font-weight: 500;
}

.about-item a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 90px;
    background: #edf1f6;
}
.about-item a:hover:after { background: #f1556a }

/* =================================== */
/*    Video Section 
/* =================================== */

.video-area {
    position: relative;
    z-index: 1;
    background: url(https://via.placeholder.com/1920x1280) no-repeat center center;
    border: 20px solid #000;
    border-radius: 20px;
    height: 650px;
    -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
}

.video-area:after {
    position: absolute;
    content: "";
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border: 1px solid #fff;
    z-index: 2;
    border-radius: 20px;
}

.video-area .video-play-btn a {
    width: 80px;
    height: 80px;
    color: #fff;
    text-align: center;
    display: block;
    font-size: 36px;
    line-height: 80px;
    padding-left: 5px;
    border-radius: 50%;
    top: 50%;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.video-area .video-play-btn a:before,
.video-area a:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 50%;
}
.video-area .video-play-btn a:before{
    -webkit-animation: scaling 1s linear 0s infinite;
    -o-animation: scaling 1s linear 0s infinite;
    animation: scaling 1s linear 0s infinite;
}
.video-area .video-play-btn a:after{
    -webkit-animation: scaling 1s linear 0.3s infinite;
    -o-animation: scaling 1s linear 0.3s infinite;
    animation: scaling 1s linear 0.3s infinite;
}
@keyframes scaling{
    0%{
        opacity: 0;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    15%{
        opacity: 0.7;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
    100%{
        opacity: 0;
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
}

/* =================================== */
/*    Achivement Area 
/* =================================== */

.achivement-area {
    position: relative;
    z-index: auto;
    padding: 180px 0 80px 0;
    margin-top: -100px;
}

.achive-single .icon {
    font-size: 57px;
    color: #fff;
    margin-bottom: 12px;
}

.achive-single h2 {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    line-height: 50px;
}

.achive-single h2 + span {
    display: block;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 9px;
}


/* =================================== */
/*    Features Section 
/* =================================== */

.features-box { position: relative; padding: 30px }

.features-box h3 {
    font-size: 20px;
    margin-bottom: 15px;
}
.left-features .features-box { margin-bottom: 100px }

.right-features .features-box { margin-top: 100px }

.left-features .features-box:last-child { margin-bottom: 0 }

.line-border {
    border-bottom: 1px solid #f1556a;
    border-left: 1px solid #f1556a;
    border-right: 1px solid #f1556a;
    height: 50px;
    left: 50%;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1;
}

.line-border:before {
    border-right: 1px solid #f1556a;
    border-top: 1px solid #f1556a;
    content: "";
    height: 10px;
    left: -9px;
    position: absolute;
    top: 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center top 0;
    transform-origin: center top 0;
    width: 10px;
}

.line-border:after {
    -webkit-animation: 1s ease 0s normal none infinite running dot_animation;
    animation: 1s ease 0s normal none infinite running dot_animation;
    border-radius: 50%;
    content: "";
    height: 25px;
    position: absolute;
    right: -13px;
    top: -15px;
    width: 25px;
}

.left .line-border { left: auto; right: 50% }

.left .line-border:before { left: auto; right: -2px }

.left .line-border:after { left: -13px; right: auto }

@-webkit-keyframes dot_animation {
    0% {
        -webkit-box-shadow: 0 0 0 0px rgba(241, 85, 106, 1);
        box-shadow: 0 0 0 0px rgba(241, 85, 106, 1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(241, 85, 106, 0);
        box-shadow: 0 0 0 10px rgba(241, 85, 106, 0);
    }
}

@keyframes dot_animation {
    0% {
        -webkit-box-shadow: 0 0 0 0px rgba(241, 85, 106, 1);
        box-shadow: 0 0 0 0px rgba(241, 85, 106, 1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(241, 85, 106, 0);
        box-shadow: 0 0 0 10px rgba(241, 85, 106, 0);
    }
}

/* =================================== */
/*    App Interface Area
/* =================================== */

.app-interface-area h2 {
    font-size: 42px;
    color: #fff;
    line-height: 60px;
}

.app-interface-area .interface_slider h2 span {
    font-weight: normal;
}

.app-interface-area .interface_slider p {
    line-height: 30px;
    color: #fff;
    padding-top: 55px;
}

.app-interface-area .interface_slider ul {
    padding-left: 70px;
    position: relative;
    margin-top: 60px;
}

.app-interface-area .interface_slider ul:before {
    content: "";
    background: url(../img/interface-area/dotted.png) no-repeat scroll center center;
    width: 54px;
    height: 167px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.app-interface-area .interface_slider ul li { margin-bottom: 20px }

.app-interface-area .interface_slider ul li a {
    font-size: 25px;
    line-height: 28px;
    font-weight: 500;
    color: #fff;
}

.app-interface-area .interface_slider ul li:last-child { margin-bottom: 0px }

.app-interface-area .interface_slider ul li:nth-child(even) a { padding-left: 20px }

.interface_slider { position: relative }


/* =================================== */
/*    Team Area Section 
/* =================================== */

.team-item {
    padding: 30px 0 40px;
    text-align: center;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.team-item { position: relative}

.team-item .pic{
    display: inline-block;
    width: 130px;
    height: 130px;
    margin-bottom: 50px;
    z-index: 1;
    position: relative;
}
.team-item  .pic:before{
    content: "";
    width: 100%;
    height: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(244,129,63,1) 0%, #f1556a 100%);
    position: absolute;
    bottom: 135%;
    right: 0;
    left: 0;
    transform: scale(3);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

.team-item:hover .pic:before{ height: 100%; }

.team-item .pic:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.team-item .pic img{
    width: 100%;
    height: auto;
    border-radius: 50%;
    transform: scale(1);
    -webkit-transition: all 0.9s ease 0s;
    -moz-transition: all 0.9s ease 0s;
    -ms-transition: all 0.9s ease 0s;
    -o-transition: all 0.9s ease 0s;
    transition: all 0.9s ease 0s;

}
.team-item:hover .pic img{
    box-shadow: 0 0 0 14px #f7f5ec;
    transform: scale(0.7);
}
.team-item .team-content{ margin-bottom: 30px; }

.team-item .title{
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 20px;
    position: relative;
    background-color: transparent
}
.team-item .title:before{
    content: "";
    width: 25px;
    height: 1px;
    background: #f1556a;
    position: absolute;
    bottom: -10px;
    right: 50%;
    margin-right: 9px;
    transition-duration: 0.25s;
}
.team-item .title:after{
    content: "";
    width: 25px;
    height: 1px;
    background: #f1556a;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: 9px;
    transition-duration: 0.25s;
}
.team-item:hover .title:before,
.team-item:hover .title:after{ width: 50px }

.team-item  .post:before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f1556a;
    margin: 0 auto;
    position: relative;
    top: -13px;
}
.team-item .post{
    display: block;
    font-size: 15px;
    color: #696969;
    text-transform:capitalize;
}
.team-item .social{
    width: 100%;
    padding: 0;
    margin: 0;
    background: linear-gradient(145deg, rgba(244,129,63,1) 0%, #f1556a 100%);
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
}
.team-item:hover .social{ bottom: 0 }

.team-item .social li{ display: inline-block }

.team-item .social li a{
    display: block;
    padding: 10px;
    font-size: 17px;
    color: #fff;
    transition: all 0s ease 0s;
}
.team-item .social li a:hover{ color: #f1556a; background-color: #fff }

/* =================================== */
/*    App Screen Shots Area
/* =================================== */

.screenshot-wrap .slick-list {
    padding-bottom: 90px !important;
    padding-top: 80px !important;
}
.single-screenshot.slick-slide {
    z-index: 1;
}
.single-screenshot.slick-active {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 2;
}
.single-screenshot.slick-center {
    position: relative;
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
    z-index: 3;
}

.single-screenshot img { width: 100% }

.single-screenshot.slick-center {
    background-image: url(../img/scr-img/mockup.png);
    background-size: 100% 100%;
}
.single-screenshot.slick-center img {
    padding: 35px 20px 55px;
}

/* =================================== */
/*    Pricing Area Section 
/* =================================== */
.pricing-item { 
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25)
}
.pricing-item .pricingTable-header{
}

.pricing-item .title{
    text-transform: uppercase;
    color: #fff;
    padding: 15px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.pricing-item .title:after {
    content: "";
    width: 28%;
    border-top: 1px solid #fff;
    display: block;
    margin: 15px auto 0;
}
.pricing-item .amount{
    font-size: 85px;
    color:#fff;
    padding: 10px 0 30px 0;
    display: block;
    line-height: 1.2;
}
.pricing-item .month{
    display: block;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 15px;
    color: #fff;
}
.pricing-item .btn{
    display: block;
    font-size: 18px;
    border: none;
    border-radius: 0;
    padding: 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #fff;
}
.pricing-item .btn:after {
    content: "\e87f";
    font-family: "Linearicons-Free";
    margin-left: 5px;
    opacity: 0;
}
.pricing-item:hover .btn:after{ opacity: 1 }

/* =================================== */
/*	Testimonial Area
/* =================================== */

.testi-slide .owl-controls .owl-nav > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 72px;
    overflow: hidden;
    z-index: 1;
    color: #f1556a;
    -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}

.testi-slide .owl-controls .owl-nav > div:hover{ color: #ffffff }

.testi-slide .owl-controls .owl-nav > div:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: -1;
    opacity: 1;
}

.testi-slide .owl-controls .owl-nav > div:hover:before { opacity: 0 }

.testi-box {
    position: relative;
    padding: 55px 30px 30px 30px;
    -webkit-box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 30px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #fff
}

.testi-box .testi-image {
    position: absolute;
    top: -40px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden;
    border: 5px solid #ffffff;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1)
}

.testi-box h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.testi-box span.position {
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
    color: #696969;
}
.testi-slide .owl-controls .owl-nav > div {
    position: absolute;
    top: 50%;
    left: auto;
    right: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.testi-slide .owl-controls .owl-nav > div.owl-next {
    right: auto;
    left: 100%;
}

/* =================================== */
/*    Question Area Section
/* =================================== */
.question_area {
    position: relative;
    -webkit-background: linear-gradient(145deg, rgba(244, 129, 63, .09) 0%, rgba(241, 85, 106, .09) 100%);
    -moz-background: linear-gradient(145deg, rgba(244, 129, 63, .09) 0%, rgba(241, 85, 106, .09) 100%);
    -o-background: linear-gradient(145deg, rgba(244, 129, 63, .09) 0%, rgba(241, 85, 106, .09) 100%);
    -ms-background: linear-gradient(145deg, rgba(244, 129, 63, .09) 0%, rgba(241, 85, 106, .09) 100%);
    background: linear-gradient(145deg, rgba(244, 129, 63, .09) 0%, rgba(241, 85, 106, .09) 100%);
}
.question_area:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 815px 957px 0 0;
    border-color: #fff transparent transparent transparent;
}

@media only screen and (max-width: 973px) { 

    .question_area:before { display: none }
}

.question_area .main_title { padding-bottom: 65px }

.left_question_inner .accordion .card,
.right_question_inner .accordion .card
{
    border-radius: 0px;
    background: #fff;
    border: none;
    margin-top: 30px;
    position: relative;
}
.left_question_inner .accordion .card:before,
.right_question_inner .accordion .card:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 5px;
}

.left_question_inner .panel:first-child ,
.right_question_inner .panel:first-child { margin-top: 0px }

.left_question_inner .card .card-heading ,
.right_question_inner .card .card-heading {
    padding: 0px;
    border: none;
    background: transparent;
    border-radius: 0px;
}

.left_question_inner .card .card-heading h4 a ,
.right_question_inner .card .card-heading h4 a {
    font-size: 18px;
    color: #424242;
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    padding: 15px 25px;
    display: block;
    position: relative;
}

.left_question_inner .card .card-heading h4 a i,
.right_question_inner .card .card-heading h4 a i {
    float: right;
    font-size: 12px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 25px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
}

.left_question_inner .card .card-heading h4 a i:after,
.right_question_inner .card .card-heading h4 a i:after {
    content: "";
    height: 18px;
    width: 18px;
    background: #fff;
    position: absolute;
    left: 1px;
    top: 1px;
    border-radius: 50%;
    z-index: -1;
}

.left_question_inner .card .card-heading h4 a i:before,
.right_question_inner .card .card-heading h4 a i:before {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.left_question_inner .card .card-heading h4 a i + i ,
.right_question_inner .card .card-heading h4 a i + i {
    display: none;
}

.left_question_inner .card .card-heading h4 a.collapsed i + i ,
.right_question_inner .card .card-heading h4 a.collapsed i + i {
    display: inline-block;
}

.left_question_inner .card .card-body,
.right_question_inner .card .card-body {
    border: none;
    padding-top: 0px;
    padding-left: 25px;
    padding-right: 90px;
    padding-bottom: 35px;
    font-size: 14px;
    line-height: 27px;
    color: #6b6d6f;
    font-family: "Poppins", sans-serif;
}


/* =================================== */
/*    Latest Blog Section
/* =================================== */

.blog-item {
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
    padding: 15px 15px 26px;
}

.blog-thumbnail { margin-bottom: 15px }

.blog-thumbnail a { display: block }

.blog-item h2.blog-title a {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #272727;
    letter-spacing: 0;
    margin-bottom: 9px;
}

.blog-item h2.blog-title a:hover { color: #f1556a }

.blog-meta ul li {
    display: inline-block;
    font-size: 14px;
    color: #272727;
    font-weight: 500;
    margin-right: 9px;
}

.blog-meta ul li i { margin-right: 4px }

.blog-summery { margin: 7px 0px 25px }

.blog-item a.read-more {
    width: 130px;
    height: 40px;
    border-radius: 20px;
    display: block;
    text-align: center;
    line-height: 40px;
    color: #fff;
    letter-spacing: 0.01em;
}

/* =================================== */
/*    Footer Area
/* =================================== */

.footer-area {
    padding-top: 120px;
    background: url(../img/footer/footer-bg.png) no-repeat center center;
    width: 100%;
}

/* contact area*/

.contact-form {
    position: relative;
    z-index: 10;
    padding: 45px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.contact-form form .input {
    height: 50px;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #b4b4b4;
    font-size: 14px;
    color: #696969;
    letter-spacing: 0;
    margin-bottom: 16px;
}
.contact-form form .input:focus { outline: none}

.contact-form form textarea#msg { height: 74px }

.contact-form form #send {
    width: 130px;
    height: 40px;
    border-radius: 20px;
    display: block;
    text-align: center;
    line-height: 40px;
    color: #fff;
    border: none;
    letter-spacing: 0.01em;
}
.footer-area .right-content h2 {
    margin-bottom: 20px;
    font-size: 42px;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #fff
}
.footer-area .right-content .social { margin-top: 30px }

.footer-area .right-content .social li { display: inline-block }

.footer-area .right-content .social li a {
    display: block;
    height: 44px;
    width: 44px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    margin: 0px 7px;
    transition: all 0s ease;
}

.footer-area .right-content .social li a:hover { background-color: #fff; color: #444 }

/* footer inner */

.footer-inner {
    padding: 60px 0px;
    border-top: 1px solid rgba(250,250,250,0.3);
    text-align: center;
}

/* ================================================ */
/*    common elements that have same features
/* ================================================ */

.welcome-area,
.video-area,
.breadcam_bg,
.footer-area {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.team-item,
.about-item {
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -o-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    -ms-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}

.blog-item a.read-more:hover,
.contact-form form #send:hover{
    -webkit-box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
}

/* =================================== */
/*    Blog Page
/* =================================== */

.blog-footer { 
    padding: 50px 0;
    background: -webkit-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: -moz-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: -o-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: -ms-linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
    background: linear-gradient(145deg, #f4813f 0%, #f1556a 100%)
}

.breadcam_bg {
    background-image: url(../img/blog/blog-page/bradcam.png);
    background-position: center bottom;
    padding: 160px 0;
    background-repeat: no-repeat;
}

.bradcam_text h1 {
    font-size: 42px;
    font-weight: 800;
    text-transform: capitalize;
}

/* blog_left_sidebar css */

.blog_item { margin-bottom: 50px }

.blog_item_img { position: relative }

.blog_item_img .blog_item_date {
    position: absolute;
    bottom: -10px;
    left: 10px;
    display: block;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
}

.blog_item_img .blog_item_date h2 {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.blog_item_img .blog_item_date span {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff;
}

.blog_details {
    padding: 30px 0 20px 10px;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
    -moz-box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
    -o-box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
    -ms-box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
    box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
}

.blog_details h3 { font-size: 20px; margin-bottom: 8px }

.blog_details p { margin-bottom: 30px }

.blog-info-link li { float: left; font-size: 14px }

.blog-info-link li a { color: #999999 }

.blog-info-link li i,
.blog-info-link li span { font-size: 13px; margin-right: 5px }

.blog-info-link li:after {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
}

.blog-info-link li:last-child::after { display: none }

.blog-info-link:after {
    content: "";
    display: block;
    clear: both;
    display: table;
}

.blog-pagination { margin-top: 80px }

.blog-pagination .page-link {
    font-size: 14px;
    position: relative;
    display: block;
    padding: 0;
    text-align: center;
    margin-left: -1px;
    line-height: 45px;
    width: 45px;
    height: 45px;
    border-radius: 0 !important;
    color: #8a8a8a;
    border: 1px solid #f0e9ff;
    margin-right: 10px;
}

.blog-pagination .page-link i,
.blog-pagination .page-link span { font-size: 13px }

.blog-pagination .page-link:hover { color: #fff}

.blog-pagination .page-item.active .page-link { border: 0; color: #fff }

.blog-pagination .page-item:last-child .page-link { margin-right: 0 }

/* blog_right_sidebar css */

.blog_right_sidebar .form-control {
    height: 50px;
    border-color: #f0e9ff;
    font-size: 14px;
    color: #999999;
    padding-left: 20px;
    border-radius: 0;
}

.boxed-btn {
    display: inline-block;
    padding: 18px 44px;
    font-size: 14px;
    font-weight: 400;
    border: 0;
    letter-spacing: 3px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

.blog_right_sidebar .single_sidebar_widget {
    background: #fbf9ff;
    padding: 30px;
    margin-bottom: 30px;
}
.blog_right_sidebar .single_sidebar_widget:last-child { margin-bottom: 0 }

.blog_right_sidebar .widget_title { font-size: 20px; margin-bottom: 40px }

.blog_right_sidebar .widget_title:after {
    content: "";
    display: block;
    padding-top: 15px;
    border-bottom: 1px solid #f0e9ff;
}

.blog_right_sidebar .search_widget .form-control { border-right: 0 }

.blog_right_sidebar .search_widget .form-control:focus {
    border-color: #f0e9ff;
    outline: 0;
    box-shadow: none;
}

.blog_right_sidebar .search_widget .input-group button {
    background: #fff;
    border-left: 0;
    border: 1px solid #f0e9ff;
    padding: 4px 15px;
    border-left: 0;
}

.blog_right_sidebar .search_widget .input-group button i,
.blog_right_sidebar .search_widget .input-group button span {
    font-size: 14px;
    color: #999999;
}

.blog_right_sidebar .newsletter_widget .form-control { border-radius: 0 }

.blog_right_sidebar .newsletter_widget .form-control:focus {
    border-color: #f0e9ff;
    outline: 0;
    box-shadow: none;
}

.blog_right_sidebar .post_category_widget .cat-list li {
    border-bottom: 1px solid #f0e9ff;
    padding-bottom: 12px;
}

.blog_right_sidebar .post_category_widget .cat-list li:last-child { border-bottom: 0 }

.blog_right_sidebar .post_category_widget .cat-list li a {
    font-size: 14px;
    line-height: 20px;
    color: #888888;
}

.blog_right_sidebar .post_category_widget .cat-list li + li { padding-top: 15px }

.blog_right_sidebar .popular_post_widget .post_item .media-body {
    justify-content: center;
    align-self: center;
    padding-left: 20px;
}

.blog_right_sidebar .popular_post_widget .post_item .media-body h4 {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 6px;
}

.blog_right_sidebar .popular_post_widget .post_item .media-body span {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 0px;
}

.blog_right_sidebar .popular_post_widget .post_item + .post_item { margin-top: 20px }

.blog_right_sidebar .tag_cloud_widget ul li { display: inline-block }

.blog_right_sidebar .tag_cloud_widget ul li a {
    display: inline-block;
    border: 1px solid #eeeeee;
    background: #fff;
    padding: 4px 20px;
    margin-bottom: 8px;
    margin-right: 3px;
    color: #888888;
    font-size: 13px;
}

.blog_right_sidebar .tag_cloud_widget ul li a:hover { color: #fff !important }

.blog_right_sidebar .instagram_feeds .instagram_row {
    display: flex;
    margin-right: -6px;
    margin-left: -6px;
}

.blog_right_sidebar .instagram_feeds .instagram_row li {
    width: 33.33%;
    float: left;
    padding-right: 6px;
    padding-left: 6px;
    margin-bottom: 15px;
}

/* blog media query */
@media (min-width: 768px) {

    .blog_item_img .blog_item_date {
        bottom: -20px;
        left: 40px;
        padding: 13px 30px;
    }

    .blog_item_img .blog_item_date h2 { font-size: 30px }

    .blog_details { padding: 60px 30px 35px 35px }
}

/*
scroll To Top
==================================== */

#scrollUp {
    bottom: 15px;
    display: none;
    position: fixed;
    right: 20px;
    z-index: 600;
}

#scrollUp img {
    -webkit-animation: mover 2s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}