/*
* SANDY - One page apps landing page
* Build Date: February 2016
* Last updated: May 2017
* Version: 1.4
* Author: ThemeAtelier
* Copyright (C) 2016 ThemeAtelier
*/
/* ------------------------------------- */
/* TABLE OF CONTENTS
/* -------------------------------------
	1. IMPORT GOOGLE FONTS
    2. GENERAL
		-2.1 PARALLAX
		-2.2 COLORS AND BACKGROUND
		-2.3 PADDINGS
		-2.4 MARGINS
		-2.5 BUTTONS
		-2.6 SECTION TITLE
		-2.7 TYPE ANIMATION CSS
		-2.8 PRE LOADER
		-2.9 SCROLL TO UP
	3. HEADER
	4. HERO SECTION
	5. FEATURES SECTION
	6. ABOUT SECTION
	7. HOW WORKS
	8. SCREENSHOTS SECTION
	9. NEW SECREENSHOTS SECTION
		-9.1 FREQUENTLY ASK QUESTIONS
	10. VIDEO PROMO SECTION
	11. PRICING TABLE
	12. FACTS SECTION
	13. TESTIMONIAL AREA
	14. BLOG SECTION
	15. CONTACT SECTION
	16. SUBSCRIPTION SECTION
	17. FOOTER SECTION
	18. BLOG LISTS PAGE
		-18.1 SIDEBAR
		-18.2 SINGLE PAGE
	19. EXTRA PAGES
		-19.1 COMING SOON PAGE
	------------------------------------- */

/*  ----------------------------------------------------
1. IMPORT GOOGLE FONTS
-------------------------------------------------------- */
/* @import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i'); */
@import url("https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap");

/*  ----------------------------------------------------
2. GENERAL
-------------------------------------------------------- */
body {
    font-size: 16px;
    line-height: 1.7em;
    font-weight: 400;
    color: #677294;
    font-family: "Nunito", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    margin-bottom: 15px;
    font-weight: 600;
    color: #222d39;
}

a:hover,
a:focus,
a:active,
button {
    text-decoration: none;
    outline: none;
    webkit-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a {
    color: #346afe;
}

a:hover {
    color: #4676fa;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 36px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
    margin-bottom: 10px;
}

h6 {
    font-size: 18px;
}

blockquote {
    font-style: italic;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-bottom: 15px;
}

/* -2.1 PARALLAX */
.bg-parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.gredient-overlay {
    background: #346afe;
    background: -webkit-linear-gradient(to left, #346afe, #004e92);
    background: -webkit-linear-gradient(right, #346afe, #004e92);
    background: linear-gradient(to left, #346afe, #004e92);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.color-overlay {
    background: #222d39;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.opacity-8 {
    opacity: 0.8;
}

/* -2.2 COLORS AND BACKGROUND */
.primary-bg {
    background: #346afe;
}

.bg-gray {
    background: #deeefc;
}

.bg-light-gray {
    background: #deeefc;
}

.bg-black {
    background: #222328;
}

.bg-gredient {
    background: #deeefc;
    background: -webkit-linear-gradient(top,
            rgb(244, 250, 255) 0%,
            rgb(221, 240, 253) 100%);
    background: linear-gradient(to bottom,
            rgb(244, 250, 255) 0%,
            rgb(221, 240, 253) 100%);
}

.color-white h1,
.color-white h4,
.color-white p,
.color-white h2,
.color-white {
    color: #ffffff;
}

.card-header .btn-link {
    color: #ffffff;
}

/* -2.3 PADDINGS */
.pt200 {
    padding-top: 200px;
}

.pt100 {
    padding-top: 100px;
}

.pb100 {
    padding-bottom: 100px;
}

.pt70 {
    padding-top: 70px;
}

.pt50 {
    padding-top: 50px;
}

.pb50 {
    padding-bottom: 50px;
}

/* -2.4 MARGINS */
.mb60 {
    margin-bottom: 60px;
}

.mt60 {
    margin-top: 60px;
}

.mb30 {
    margin-bottom: 30px;
}

.mt30 {
    margin-top: 30px;
}

/* -2.5 BUTTONS */
.primary-btn {
    padding: 15px 30px;
    background: #346afe;
    color: #ffffff;
    border: none;
    text-transform: capitalize;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
}

.primary-btn-2 {
    background: #222d39;
}

.primary-btn-2:hover {
    background: #677294;
}

.primary-btn-3 {
    background: #677294;
}

.primary-btn-3:hover {
    background: #222d39;
}

a.read-more.primary-btn.primary-btn-2 {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 400;
}

.apps-btn {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
}

.apps-btn span {
    display: block;
}

.hero-content .primary-btn-2,
.hero-content .primary-btn-3 {
    margin-left: 50px;
}

.primary-btn span {
    font-weight: 500;
    font-size: 16px;
}

button.primary-btn {
    padding: 12px 20px;
}

.primary-btn i {
    margin-right: 8px;
}

.primary-btn:hover {
    background: #4676fa;
    color: #ffffff;
}

.cd-btn {
    background: #346afe;
}

.cd-btn:hover {
    background: #4676fa;
    color: #ffffff;
}

.bottom-pattern {
    position: absolute;
    bottom: -4px;
}

/* -2.6 SECTION TITLE */
.section-title h2 {
    margin-bottom: 15px;
    text-transform: uppercase;
}

.section-title p {
    font-size: 18px;
}

.section-title h2 span {
    color: #346afe;
}

.lines {
    width: 6px;
    position: relative;
    border-top: 2px solid #346afe;
}

.section-title .lines {
    width: 6px;
    position: relative;
    margin-left: 34px;
    margin-top: 15px;
}

.text-center .lines {
    margin: auto;
}

.lines:before,
.lines:after {
    content: "";
    position: absolute;
    top: -2px;
    width: 30px;
    border-top: 2px solid #346afe;
}

.lines:before {
    left: -34px;
}

.lines:after {
    right: -34px;
}

.section-title p {
    margin-top: 20px;
}

/* -2.7 TYPE ANIMATION CSS */
.typed-cursor {
    opacity: 1;
    font-weight: 100;
    -webkit-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    color: #346afe;
}

@-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* -2.8 PRE LOADER */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #deeefc;
    z-index: 99999;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}

.status {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}

.loader {
    position: relative;
    margin: 0px auto;
    width: 70px;
}

.loader:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.circular {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite,
        color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@-webkit-keyframes color {

    100%,
    0% {
        stroke: #346afe;
    }

    40% {
        stroke: #346afe;
    }

    66% {
        stroke: #346afe;
    }

    80%,
    90% {
        stroke: #346afe;
    }
}

@keyframes color {

    100%,
    0% {
        stroke: #346afe;
    }

    40% {
        stroke: #346afe;
    }

    66% {
        stroke: #346afe;
    }

    80%,
    90% {
        stroke: #346afe;
    }
}

/* -2.8 SCROLL TO UP */
.scrollup {
    background: #346afe;
    border-radius: 2px;
    bottom: 30px;
    color: #fff;
    cursor: pointer;
    float: right;
    font-size: 20px;
    height: 40px;
    line-height: 35px;
    position: fixed;
    right: 50px;
    text-align: center;
    width: 38px;
    z-index: 9;
    border: 1px solid transparent;
    webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.scrollup:hover {
    background: #deeefc;
    color: #0d3559;
    border: 1px dashed #346afe;
}

/*  ----------------------------------------------------
3. HEADER
-------------------------------------------------------- */
.header {
    background: rgba(238, 244, 245, 0.7);
    padding-top: 20px;
    padding-bottom: 20px;
    transition: all 0.4s;
}

.header a {
    color: #0d3559;
}

.header.nav-sticky {
    background: #222d39;
}

.header-nav .navbar-nav>li .sub-menu li>a:hover {
    background: #346afe;
    color: #fff;
}

.header.nav-sticky a {
    color: #ffffff;
}

.header.nav-sticky .sub-menu a {
    color: #0d3559;
}

.header.nav-sticky .dropdown-menu a {
    color: #0d3559;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background: transparent;
}

.logo {
    font-size: 30px;
    height: auto;
    padding-top: 0px;
    padding-bottom: 0px;
}

.logo-light {
    display: none;
}

.nav-sticky .logo-light {
    display: block;
}

.nav-sticky .logo-dark {
    display: none;
}

.logo:hover {
    color: inherit;
}

.logo:first-letter {
    font-size: 40px;
}

.navbar-light .navbar-toggler {
    border: 1px solid #0d3559;
    margin-top: 0px;
    color: #0d3559;
}

.navbar-light.nav-sticky .navbar-toggler {
    border: 1px solid #ffffff;
    color: #ffffff;
}

.header .navbar-nav {
    margin-top: 5px;
}

.header .navbar-nav>li>a {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    font-weight: 600;
}

.header .navbar-nav>li>a.active,
.header .navbar-nav>li>a:hover,
.header .navbar-nav>li>a:focus {
    background: transparent;
    color: #346afe;
}

.header.nav-sticky .navbar-nav>li>a.active,
.header.nav-sticky .navbar-nav>li>a:hover,
.header.nav-sticky .navbar-nav>li>a:focus {
    color: #deeefc;
}

.header .nav li a:before {
    background: #346afe;
    bottom: -5px;
    content: "";
    height: 1px;
    position: absolute;
    right: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 15px;
}

.header.nav-sticky .nav li a:before,
.header.nav-sticky .nav li a:after {
    background: #ffffff;
}

.header .nav li a:after {
    background: #346afe;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: -5px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 15px;
}

.header .nav li a.active:after,
.header .nav li a.active:before,
.header .nav li a:hover:after,
.header .nav li a:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.nav-sticky .dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover {
    background: #346afe;
    color: #ffffff;
}

.dropdown-menu>li>a {
    padding: 5px 20px;
}

.dropdown-menu>li>a:hover:after,
.dropdown-menu>li>a:hover:before,
.dropdown-menu>li.active>a:after,
.dropdown-menu>li.active>a:before {
    opacity: 0;
    width: 0px;
}

.navbar-right .dropdown-menu {
    border: medium none;
    border-radius: 0;
    top: 40px;
}

.header .dropdown li a:hover {
    color: #ffffff;
}

/* NAV BAR */

.header-nav .navbar-nav>li {
    margin-left: 15px;
    position: relative;
}

.header-nav .navbar-nav .nav-btn.nav-link {
    border: 1px solid #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 500;
}

.header-nav .navbar-nav .nav-btn.nav-link i {
    margin-left: 5px;
}

.nav-sticky .sub-menu-toggle {
    color: #ffffff;
}

.navbar-toggler {
    border: 1px solid #0d3559;
}

.nav-sticky .navbar-toggler {
    border: 1px solid #ffffff;
}

.nav-sticky .navbar-toggler i {
    color: #ffffff;
}

.header-nav .navbar-nav>li .sub-menu li>a {
    font-size: 14px;
    display: block;
    padding: 5px 20px 5px 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-decoration: none;
    -webkit-transition: 0.3s;
    /* Safari, Chrome */
    -moz-transition: 0.3s;
    /* Firefox 4.0~16.0 */
    transition: 0.3s;
    /* IE >9, FF >15, Opera >12.0 */
}

.header-nav .navbar-nav>li .sub-menu li:hover>a {
    padding-left: 28px;
}

/* Navbar Toogle */
.navbar-toggler {
    outline: none !important;
}

.header-nav.nav-sticky {
    top: 0;
    margin-top: 0;
    padding: 12px 10px;
    -webkit-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
    /* Webkit browsers */
    -moz-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
    /* Firefox */
    -ms-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
    /* IE9 */
    -o-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
    /* Opera(Old) */
    box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
    /* IE9+, News */
}

.header-nav .navbar-nav>li:hover .sub-menu {
    opacity: 1;
    /* W3C */
    filter: alpha(opacity=100);
    /* IE */
}

.navbar-nav .nav-link {
    float: left;
}

@media (min-width: 992px) {
    .header-nav .navbar-nav>li a {
        position: relative;
    }

    .header-nav .navbar-nav>li .sub-menu {
        background: #ffffff;
        margin: 0;
        padding: 10px 0;
        min-width: 200px;
        max-width: 100%;
        position: absolute;
        left: 0;
        top: calc(100% + 30px);
        list-style: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        opacity: 0;
        /* W3C */
        filter: alpha(opacity=0);
        /* IE */
        z-index: 999;
        -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* Webkit browsers */
        -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* Firefox */
        -ms-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* IE9 */
        -o-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* Opera(Old) */
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* IE9+, News */
        pointer-events: none;
        -webkit-transition: 0.3s;
        /* Safari, Chrome */
        -moz-transition: 0.3s;
        /* Firefox 4.0~16.0 */
        transition: 0.3s;
        /* IE >9, FF >15, Opera >12.0 */
    }

    .header-nav .navbar-nav>li .sub-menu-toggle {
        font-size: 15px;
        line-height: 32px;
    }

    .header-nav .navbar-nav>li:hover .sub-menu {
        pointer-events: auto;
        top: 100%;
    }

    ul.sub-menu {
        background: #ffffff;
        margin: 0;
        padding: 10px 0;
        min-width: 200px;
        max-width: 100%;
        position: absolute;
        left: 0;
        top: calc(100% + 30px);
        list-style: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        opacity: 0;
        /* W3C */
        filter: alpha(opacity=0);
        /* IE */
        -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* Webkit browsers */
        -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* Firefox */
        -ms-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* IE9 */
        -o-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* Opera(Old) */
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        /* IE9+, News */
        pointer-events: none;
        -webkit-transition: 0.3s;
        /* Safari, Chrome */
        -moz-transition: 0.3s;
        /* Firefox 4.0~16.0 */
        transition: 0.3s;
        /* IE >9, FF >15, Opera >12.0 */
    }
}

@media (max-width: 991px) {
    .header-nav {
        top: 0;
        padding: 10px 15px;
    }

    .navbar-nav {
        padding-top: 5px;
    }

    .header-nav .navbar-nav>li {
        margin: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-nav .navbar-nav>li .sub-menu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        color: #ffffff;
        width: 100%;
        height: 44px;
        width: 44px;
        line-height: 44px;
        margin-right: 10px;
        cursor: pointer;
        text-align: center;
        z-index: 1;
        background: #0d3559;
    }

    .header-nav .navbar-nav>li .sub-menu {
        margin: 0;
        list-style: none;
        padding-left: 10px;
        padding-top: 0px;
    }

    .navbar-nav .nav-link {
        float: none;
    }

    .header-nav .navbar-nav>li .sub-menu {
        display: none;
    }

    .header-nav .navbar-nav>li.show .sub-menu {
        display: block;
    }

    .header-nav .navbar-nav>li .sub-menu li>a {
        padding: 5px 0;
        color: #ffffff;
    }

    .header-nav .navbar-nav>li .sub-menu li>a:after {
        left: -15px;
    }

    .header-nav .navbar-nav>li .sub-menu li:hover>a {
        padding-left: 0px;
    }

    .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    }

    .nav-link:hover,
    .nav-link.active {
        background: #151515;
    }
}

/*  ----------------------------------------------------
4. HERO SECTION
-------------------------------------------------------- */

.hero-section-1 {
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #deeefc;
    background-image: url(../img/bg-light-about.png);
}

.hero-section {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 80px;
}

.hero-full-screen {
    height: 600px;
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
}

.full-height {
    min-height: 100vh;
}

.half-height {
    min-height: 70vh;
}

.display-table {
    width: 100%;
    height: 100%;
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

.hero-content h1,
.hero-content h2 {
    text-transform: capitalize;
}

.hero-content p {
    font-size: 18px;
    line-height: 30px;
}

.promo-image {
    -webkit-animation-name: UpDown;
    -moz-animation-name: UpDown;
    /* Firefox 5.0~16.0 */
    animation-name: UpDown;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    /* Firefox 5.0~16.0 */
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    /* Firefox 5.0~16.0 */
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    /* Firefox 5.0~16.0 */
    animation-direction: alternate;
}

/*  ----------------------------------------------------
5. FEATURES SECTION
-------------------------------------------------------- */
.single-feature-item {
    padding: 25px;
    border: 1px solid #ececec;
    border-radius: 3px;
    webkit-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.single-feature-item h5 {
    font-size: 16px;
}

.single-feature-item .feature-icon {
    margin-right: 15px;
    font-size: 35px;
    line-height: 45px;
    color: #4285f4;
}

.media {
    margin-top: 20px;
    margin-bottom: 20px;
}

.media h5 {
    font-size: 18px;
}

.media-icon {
    width: 60px;
    height: 60px;
    text-align: center;
    border: 1px dashed #346afe;
    display: inline-block;
    border-radius: 5px;
    webkit-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.media-icon img {
    width: 40px;
    height: 40px;
    position: relative;
    top: 9px;
}

.media-icon i {
    font-size: 35px;
    color: #346afe;
    line-height: 60px;
}

.media:hover .media-icon {
    background: #346afe;
    -webkit-box-shadow: 0 0 0 7px rgba(0, 91, 234, 0.15);
    box-shadow: 0 0 0 7px rgba(0, 91, 234, 0.15);
}

.media:hover .media-icon i {
    color: #ffffff;
}

.vertical-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.vertical-align>.flex-box,
.vertical-align>.flex-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*  ----------------------------------------------------
6. ABOUT SECTION
-------------------------------------------------------- */
.about-boxes .media {
    text-align: center;
    padding: 30px;
    webkit-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #ffffff;
    border-bottom: 3px solid #346afe;
}

.about-boxes .media p {
    margin-bottom: 0px;
}

.bg-gray .about-boxes .media:hover {
    background: #ffffff;
    box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
}

.about-boxes .media:hover,
.single-feature-item.media:hover {
    background: #ffffff;
    box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
}

.aboutIntroText {}

.aboutIntroText h2 {
    font-size: 45px;
}

.aboutIntroText p {
    font-size: 18px;
    line-height: 30px;
}

.aboutIntroText .primary-btn-2,
.aboutIntroText .primary-btn-3 {
    margin-left: 50px;
}

/*  ----------------------------------------------------
7. HOW WORKS
-------------------------------------------------------- */
.how-works-item .icon-outer {
    display: inline-table;
    width: 90px;
    height: 90px;
    position: relative;
    border-radius: 5px;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    background-color: #ffffff;
    color: #346afe;
    line-height: 90px;
    font-size: 40px;
    margin-bottom: 25px;
    border: 1px dashed #346afe;
}

.how-works-item:hover .icon-outer {
    background: #346afe;
    color: #ffffff;
    box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
}

.how-works-item .title {
    font-size: 22px;
    font-weight: 400;
}

.how-works-item {
    position: relative;
    z-index: 1;
}

.how-works-item:after,
.how-works-item:before {
    content: "";
    width: 50%;
    border-top: 1px solid;
    position: absolute;
    top: 45px;
    transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg) scale(1);
    -o-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg) scale(1);
    -ms-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg) scale(1);
    -moz-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg) scale(1);
    -webkit-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg) scale(1);
    z-index: -1;
}

.how-works-item::before {
    right: 50%;
}

.how-works-item:after,
.how-works-item:before {
    border-color: #0d3559;
}

.how-works-item:first-child::before {
    border-color: transparent;
}

.how-works-item:last-child::after {
    border-color: transparent;
}

/*  ----------------------------------------------------
8. SCREENSHOTS SECTION
-------------------------------------------------------- */
.shot-item {
    padding: 8px;
    border-radius: 4px;
    background: #deeefc;
    display: flex;
    /* Añadido para alinear verticalmente */
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    /* Centra horizontalmente */
    overflow: hidden;
    /* Oculta el desbordamiento de la imagen */
}

.bg-gray .screenshots .shot-item {
    background: #ffffff;
}

.shot-item img {
    border-radius: 4px;
    height: 500px;
    /* Ajusta esta altura según tus necesidades */
    width: auto;
    /* Mantiene las proporciones de la imagen */
}

.overlay {
    display: block;
    position: relative;
}

.overlay:before,
.overlay:after {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    background: #222d39;
    opacity: 0.8;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    left: 0;
}

.overlay:before {
    top: 0;
    z-index: 1;
}

.overlay:after {
    bottom: 0;
    z-index: 1;
}

.shot-item:hover .overlay:before {
    height: 50%;
}

.shot-item:hover .overlay:after {
    height: 50%;
}

.overlay .item-icon {
    height: 50px;
    width: 50px;
    line-height: 50px;
    color: #ffffff;
    top: 50%;
    left: 50%;
    left: calc(50% - 25px);
    /* Ajustado para centrar el icono */
    top: calc(50% - 25px);
    /* Ajustado para centrar el icono */
    position: absolute;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    font-size: 50px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.shot-item:hover .item-icon {
    visibility: visible;
    opacity: 1;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}

.owl-dot {
    margin-top: 30px;
}

.owl-theme .owl-dots .owl-dot span {
    background: #677294;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #222d39;
}

/*  ----------------------------------------------------
9. NEW SECREENSHOTS SECTION
-------------------------------------------------------- */
.screenshots-mobile {
    padding: 32px 14px 0px 14px;
    background: rgba(0, 0, 0, 0) url(../img/screenshot-mobile.png) no-repeat scroll top center;
    background-size: 100%;
    max-width: 293px;
    margin: 0 auto;
}

.screenshots-mobile.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 18px;
}

.screenshots-mobile .shot-item {
    padding: 0px;
    border-radius: 0px;
}

.mfp-counter {
    display: none;
}

div#accordion button {
    font-size: 18px;
}

div#accordion button:hover,
div#accordion button:focus {
    text-decoration: none;
}

div#accordion .card-body {
    font-size: 18px;
    line-height: 30px;
}

/* -9.1 FREQUENTLY ASK QUESTIONS */

.wrap {
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
        0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

.panel {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #fff;
    background: none;
    box-shadow: none;
}

.panel:last-child {
    border-bottom: none;
}

.panel-group>.panel:first-child .panel-heading {
    border-radius: 4px 4px 0 0;
}

.panel-group .panel {
    border-radius: 0;
}

.panel-group .panel+.panel {
    margin-top: 0;
}

.panel-heading {
    background: #346afe;
    border-radius: 0;
    border: none;
    color: #fff;
    padding: 0;
    webkit-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.panel-heading:hover {
    opacity: 0.8;
}

.panel-title a {
    display: block;
    color: #fff;
    padding: 15px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
}

.panel-body {
    background: #deeefc;
}

.bg-gray .panel-body {
    background: #fff;
}

.panel:last-child .panel-body {
    border-radius: 0 0 4px 4px;
}

.panel:last-child .panel-heading {
    border-radius: 0 0 4px 4px;
    -webkit-transition: border-radius 0.3s linear 0.2s;
    transition: border-radius 0.3s linear 0.2s;
}

.panel:last-child .panel-heading.active {
    border-radius: 0;
    -webkit-transition: border-radius linear 0s;
    transition: border-radius linear 0s;
}

.panel-heading a:before {
    content: "\e146";
    position: absolute;
    font-family: "Material Icons";
    right: 5px;
    top: 10px;
    font-size: 24px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.panel-heading.active a:before {
    content: " ";
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

#bs-collapse .card-header button:after {
    content: " ";
    font-size: 24px;
    position: absolute;
    font-family: "Material Icons";
    right: 5px;
    top: 10px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

#bs-collapse .card-header.active a:after {
    content: "\e909";
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

#accordion .card-header button:before {
    content: "\e316";
    font-size: 24px;
    position: absolute;
    font-family: "Material Icons";
    right: 5px;
    top: 10px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

#accordion .card-header button.collapsed:before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

#accordion button:hover,
#accordion button:focus {
    color: #ffffff;
}

/*  ----------------------------------------------------
10. VIDEO PROMO SECTION
-------------------------------------------------------- */
.video-popup {
    border: 1px dashed #ffffff;
    display: inline-block;
    width: 70px;
    height: 70px;
    color: #ffffff;
    line-height: 70px;
    font-size: 25px;
    border-radius: 100%;
    background: transparent;
}

/*  ----------------------------------------------------
11. PRICING TABLE
-------------------------------------------------------- */
.bg-gray .single-package {
    background: #ffffff;
}

.bg-gray .single-package .price {
    background: #deeefc;
}

.single-package {
    background: #4285f4;
    overflow: hidden;
    border-radius: 5px;
    padding-bottom: 25px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-package:hover {
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15);
}

.bg-gray .featured-package,
.featured-package {
    background: #346afe;
    background: -webkit-linear-gradient(to left, #346afe, #004e92);
    background: -webkit-linear-gradient(right, #346afe, #004e92);
    background: linear-gradient(to left, #346afe, #004e92);
}

.featured-package h4,
.featured-package ul {
    color: #ffffff;
}

.price {
    background: #222d39;
    padding-top: 10px;
    padding-bottom: 10px;
}

.price h4 {
    margin-bottom: 0px;
}

.sign {
    font-size: 14px;
    vertical-align: super;
}

.price .month {
    font-size: 16px;
}

.package-head {
    margin-top: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.package-feature {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 25px;
    padding-top: 25px;
}

.package-feature li {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    color: #000;
    border-bottom: 1px solid #ececec;
}

.download-btn .primary-btn {
    padding: 10px 25px;
}

.featured-package .primary-btn {
    background: #ffffff;
    color: #346afe;
}

.featured-package .primary-btn:hover {
    background: #deeefc;
}

/*  ----------------------------------------------------
12. FACTS SECTION
-------------------------------------------------------- */
.single-counter {
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
}

.single-counter h4 {
    color: #ffffff;
    font-weight: normal;
}

.single-counter i {
    font-size: 55px;
}

.counter-number {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 40px;
}

/*  ----------------------------------------------------
13. TESTIMONIAL AREA
-------------------------------------------------------- */
.bg-light-gray .testimonials {
    background: #fff;
}

.testimonial-item {
    text-align: center;
    border: 1px solid #ececec;
    padding: 25px;
}

.testimonial-item blockquote {
    font-style: normal;
    border: none;
    margin: 0px;
    padding: 0px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 18px;
    color: #222d39;
}

.client-avater {
    display: inline-block;
    padding: 5px;
    background: #deeefc;
}

.bg-gray .client-avater {
    background: #ffffff;
}

.owl-carousel .owl-item .client-avater img {
    width: auto;
    margin: 0 auto;
}

.company-info {
    margin-bottom: 0px;
    font-size: 14px;
}

.testimonial-item h6 {
    margin-bottom: 0px;
}

/*  ----------------------------------------------------
14. BLOG SECTION
-------------------------------------------------------- */
.blog-post {
    background: #fff;
    padding: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
}

.bg-gray .blog-post {
    background: #ffffff;
}

.blog-thumb {
    height: 250px;
    margin-bottom: 15px;
    background-size: cover;
    background-position: center center;
}

.blog-thumb .thumb-overlay {
    width: 100%;
    height: 100%;
    background: #222d39;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    height: 0;
}

.blog-post:hover .blog-thumb .thumb-overlay {
    opacity: 0.8;
    height: 100%;
}

.blog-meta {
    color: #ffffff;
    padding: 15px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    right: 100%;
    position: relative;
}

.blog-post:hover .blog-meta {
    right: 0;
}

.blog-meta a {
    color: #ffffff;
}

.blog-meta a:hover {
    color: #ffffff;
}

.post-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 13px;
}

.post-title {
    font-size: 26px;
}

.post-title a {
    color: #222d39;
}

.latest-blog {
    padding-top: 25px;
    position: relative;
}

.owl-nav {
    position: absolute;
    top: -50px;
    right: 0;
}

.owl-theme .owl-nav [class*="owl-"] {
    padding: 4px 14px;
    font-size: 20px;
    background: #222d39;
}

.owl-theme .owl-nav [class*="owl-"]:hover {
    background: #677294;
}

.blog-category,
.blog-tags,
.blog-meta .blog-category {
    display: inline-block;
}

.blog-category a,
.blog-tags a,
.blog-meta .blog-category a {
    display: inline-block;
    margin-right: 6px;
    position: relative;
}

.blog-category a:not(:last-child):after,
.blog-tags a:not(:last-child):after,
.blog-meta .blog-category a:not(:last-child):after {
    content: ",";
    position: absolute;
    top: 0px;
}

/*  ----------------------------------------------------
15. CONTACT SECTION
-------------------------------------------------------- */
.contact-block {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    padding: 30px;
    overflow: hidden;
}

.contact-block h3 {
    text-align: center;
    margin-bottom: 10px;
}

.contact-block .subtitle {
    margin-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
}

.email-success,
.email-failed,
.email-loading,
.success-msg,
.error-msg {
    font-size: 15px;
    text-align: center;
    padding: 10px;
    display: none;
    margin: 0px !important;
}

.email-loading {
    color: #52b8ff;
}

.email-loading img {
    width: 15px;
    position: relative;
    top: -2px;
}

.email-failed,
.error-msg {
    color: #ff5252 !important;
}

.email-failed .icon {
    font-size: 20px;
    position: relative;
    top: 5px;
}

.email-success,
.success-msg {
    color: #56cc35;
}

.email-failed .icon,
.email-success .icon,
.error-msg .icon,
.success-msg .icon {
    font-size: 20px;
    position: relative;
    top: 2px;
}

.input-box {
    margin-bottom: 10px;
    margin-top: 10px;
    height: 50px;
    box-shadow: none;
    font-size: 16px;
}

.textarea-box {
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: none;
    font-size: 16px;
}

textarea.form-control.textarea-box {
    height: 120px;
}

.input-box:focus,
.textarea-box:focus {
    border: 1px solid #346afe;
    box-shadow: none;
}

/*  ----------------------------------------------------
16. SUBSCRIPTION SECTION
-------------------------------------------------------- */
.subscribe-wrap {
    border: 2px solid #ececec;
    display: inline-block;
    background: #fff;
    border-radius: 5px;
}

.subscription-form .input-box {
    width: 100%;
}

.subscribe-area h3,
.download-area h3 {
    margin-bottom: 10px;
}

.subscribe-area .primary-btn {
    margin-left: 8px;
}

.download-area p {
    margin-bottom: 25px;
}

.download-area .primary-btn {
    margin-bottom: 8px;
    margin-left: 8px;
    padding: 10px 18px;
    margin-right: 5px;
}

/*  ----------------------------------------------------
17. FOOTER SECTION
-------------------------------------------------------- */
.social-icons {
    margin-bottom: 30px;
}

.social-icons ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-icons ul li {
    display: inline;
}

.social-icons ul li a {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px;
    border: 1px dashed #ccc;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 16px;
}

.social-icons ul li a:hover {
    color: #ffffff;
}

.social-icons ul li i {
    line-height: 40px;
}

.facebook a {
    color: #4867aa;
}

.facebook a:hover {
    background: #4867aa;
}

.twitter a {
    color: #1da1f2;
}

.twitter a:hover {
    background: #1da1f2;
}

.google-plus a {
    color: #dd4d42;
}

.google-plus a:hover {
    background: #dd4d42;
}

.youtube a {
    color: #df2926;
}

.youtube a:hover {
    background: #df2926;
}

.linked-in a {
    color: #007bb6;
}

.linked-in a:hover {
    background: #007bb6;
}

.instagram a {
    color: #a823d1;
}

.instagram a:hover {
    background: #a823d1;
}

.pinterest a {
    color: #bd081c;
}

.pinterest a:hover {
    background: #bd081c;
}

.dribbble a {
    color: #ea4c89;
}

.dribbble a:hover {
    background: #ea4c89;
}

.behance a {
    color: #0b7cff;
}

.behance a:hover {
    background: #0b7cff;
}

/*  ----------------------------------------------------
18. BLOG LISTS PAGE
-------------------------------------------------------- */
.sandy-pagenation {
    margin-top: 25px;
}

.sandy-pagenation a {
    color: #54657e;
}

.sandy-pagenation a:hover,
.sandy-pagenation a.active {
    background: #346afe;
    color: #fff;
}

.sandy-pagination .pagination-lg>li:first-child>a,
.sandy-pagination .pagination-lg>li:first-child>span {
    border-radius: 0px;
}

.sandy-pagination .pagination>li>a,
.sandy-pagination .pagination>li>span {
    color: #54657e;
}

.sandy-pagination .pagination>li.active>a {
    color: #ffffff;
    background: #346afe;
}

.post-meta {
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
}

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

.post-meta ul li {
    display: inline-block;
    margin-right: 8px;
    margin-left: 8px;
}

.post-meta ul li i {
    margin-right: 5px;
}

.post-meta ul li a {
    color: #ffffff;
}

.post-thumb {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px dashed #346afe;
    border-radius: 4px;
    background: #fff;
}

.bg-gray .post-thumb {
    background: #deeefc;
}

.post-thumb img {
    width: 100%;
    border-radius: 4px;
}

.post-content-full {
    padding-left: 30px;
    padding-right: 30px;
    overflow: hidden;
}

.blog-footer {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    padding-bottom: 10px;
    border-top: 1px dashed #346afe;
}

.blog-footer span {
    padding-right: 15px;
}

/* -18.1 SIDEBAR */
#sidebar {
    overflow: hidden;
}

.sidebar-inner .widget {
    margin-bottom: 30px;
}

.widget.widget_search #searchform {
    position: relative;
}

.widget.widget_search #searchform:after {
    content: "\f002";
    font-family: FontAwesome;
    right: 15px;
    position: absolute;
    top: 50%;
    margin-top: -13px;
    font-size: 20px;
    color: #c3c3c3;
}

.bg-gray .sidebar-inner .widget {
    background: #ffffff;
}

.sidebar-inner .widget {
    background: #deeefc;
    padding: 30px;
}

.widget h3 {
    border-bottom: 1px solid #cccccc;
    font-size: 22px;
    margin: 0 0 20px;
    padding: 0 0 20px;
    position: relative;
}

.widget h3:before {
    content: "";
    width: 60px;
    height: 5px;
    background: #346afe;
    position: absolute;
    bottom: -3px;
    left: 10px;
}

.widget h6 {
    margin-top: 8px;
    margin-bottom: 20px;
}

.widget a {
    color: #54657e;
}

.widget ul {
    line-height: 30px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    position: relative;
    padding-left: 15px;
}

.widget ul li::before {
    content: "\f0da";
    position: absolute;
    left: 0;
    font-family: "FontAwesome";
    color: #333;
    transition: all 0.5s;
    opacity: 1;
}

.latest-post-widget h5 {
    font-size: 15px;
}

.latest-post-widget span {
    font-size: 14px;
}

.tagcloud a {
    display: inline-block;
    border: 1px dashed #346afe;
    border-radius: 20px;
    padding: 0px 15px;
    margin-right: 5px;
    margin-bottom: 10px;
}

/* -18.2 SINGLE PAGE */
.nav-links {
    margin-top: 15px;
    margin-bottom: 15px;
    overflow: hidden;
}

.nav-links span {
    text-transform: uppercase;
}

.nav-links a {
    display: block;
}

.nav-links .nav-previous,
.nav-links .nav-next {
    background: #deeefc;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.nav-links .nav-previous:hover,
.nav-links .nav-next:hover {
    opacity: 0.7;
}

.bg-gray .nav-links .nav-previous,
.bg-gray .nav-links .nav-next {
    background: #ffffff;
}

.blog-comment {
    background: #deeefc;
    padding: 50px 30px;
    margin-top: 30px;
    overflow: hidden;
}

.bg-gray .blog-comment {
    background: #ffffff;
}

.blog-comment h4 {
    margin-bottom: 30px;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 50px;
}

.comment-list .the-comment {
    border-bottom: 1px solid #e7e6e6;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.comment-list .children {
    list-style: none;
}

.avatar {
    float: left;
    margin-right: 15px;
    padding: 5px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px dashed #346afe;
}

.bg-gray .avater {
    background: #deeefc;
}

.comment-list .the-comment p {
    margin-bottom: 0px;
}

.meta {
    margin-bottom: 10px;
}

.blog-comment .textarea-box {
    margin-top: 10px;
    margin-bottom: 10px;
}

.blog-comment .primary-btn {
    margin-top: 10px;
}

/*  ----------------------------------------------------
19. EXTRA PAGES
-------------------------------------------------------- */
.extra-page-wrapper {
    overflow: hidden;
    position: relative;
}

.ep-title {
    font-size: 120px;
    line-height: 130px;
}

.ep-subtitle {
    font-size: 22px;
    margin-bottom: 25px;
}

.cloud {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    border: 5px dashed #deeefc;
    opacity: 0.8;
}

.x1 {
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
    top: 150px;
    border: 5px dotted #346afe;
}

.x2 {
    border: 5px solid #fe7e17;
    left: 200px;
    top: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}

.x3 {
    border: 5px dashed #673ab7;
    left: -250px;
    top: 250px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

.x4 {
    border: 5px dotted #e91e63;
    left: 470px;
    top: 300px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
    -o-animation: moveclouds 18s linear infinite;
}

.x5 {
    border: 5px solid #e91e63;
    left: -150px;
    top: 100px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

.x6 {
    border: 5px dashed #8d6e63;
    left: -150px;
    top: 500px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
}

.x7 {
    border: 5px dotted 08C2F3;
    left: 470px;
    bottom: 100px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
    -o-animation: moveclouds 18s linear infinite;
}

.x8 {
    border: 5px solid #6fda44;
    left: -250px;
    bottom: 250px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

.x9 {
    border: 5px dotted #78ac53;
    left: 200px;
    bottom: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}

.x10 {
    border: 5px dashed #123f63;
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
    bottom: 150px;
}

@-webkit-keyframes moveclouds {
    0% {
        margin-left: 1000px;
    }

    100% {
        margin-left: -1000px;
    }
}

@-moz-keyframes moveclouds {
    0% {
        margin-left: 1000px;
    }

    100% {
        margin-left: -1000px;
    }
}

@-o-keyframes moveclouds {
    0% {
        margin-left: 1000px;
    }

    100% {
        margin-left: -1000px;
    }
}

/* -19.1 COMING SOON PAGE */
.extra-page-content h1,
.extra-page-content h4 {
    margin-bottom: 10px;
}

.countdown-timer {
    margin-bottom: 35px;
}

.countdown-timer ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.countdown-timer ul li {
    display: inline-block;
    margin-right: 25px;
    margin-left: 25px;
}

.countdown-timer ul li span {
    display: block;
    font-size: 35px;
}

.extra-page-content .logo {
    margin-bottom: 15px;
    font-size: 35px;
    color: #ffffff;
}

.extra-page-content .logo {
    margin-bottom: 35px;
    font-size: 50px;
    color: #ffffff;
    display: inline-block;
}

.extra-page-content .logo:first-letter {
    font-size: 70px;
}

/* Animations */
@-webkit-keyframes UpDown {
    0% {
        -webkit-transform: translateY(0);
        /* Safari, Chrome */
        -moz-transform: translateY(0);
        /* Firefox 3.5~16.0 */
        -ms-transform: translateY(0);
        /* IE9~10 */
        -o-transform: translateY(0);
        /* Opera 10.5~12.10 */
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(30px);
        /* Safari, Chrome */
        -moz-transform: translateY(30px);
        /* Firefox 3.5~16.0 */
        -ms-transform: translateY(30px);
        /* IE9~10 */
        -o-transform: translateY(30px);
        /* Opera 10.5~12.10 */
        transform: translateY(30px);
    }
}

.heroMock {
    -webkit-animation-name: UpDown;
    -moz-animation-name: UpDown;
    /* Firefox 5.0~16.0 */
    animation-name: UpDown;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    /* Firefox 5.0~16.0 */
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    /* Firefox 5.0~16.0 */
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    /* Firefox 5.0~16.0 */
    animation-direction: alternate;
}

@-webkit-keyframes heroMock {
    0% {
        -webkit-transform: translateX(0);
        /* Safari, Chrome */
        -moz-transform: translateX(0);
        /* Firefox 3.5~16.0 */
        -ms-transform: translateX(0);
        /* IE9~10 */
        -o-transform: translateX(0);
        /* Opera 10.5~12.10 */
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(30px);
        /* Safari, Chrome */
        -moz-transform: translateX(30px);
        /* Firefox 3.5~16.0 */
        -ms-transform: translateX(30px);
        /* IE9~10 */
        -o-transform: translateX(30px);
        /* Opera 10.5~12.10 */
        transform: translateX(30px);
    }
}

/* Contenedor para los iconos de WhatsApp */
.whatsapp-icons {
    position: fixed;
    bottom: 80px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Espacio entre los iconos */
    z-index: 1000;
}

/* Estilos comunes para los iconos de WhatsApp */
.whatsapp-icon {
    background-color: green;
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    /* Necesario para el tooltip */
    transition: background-color 0.3s;
}

.whatsapp-icon:hover {
    background-color: darkgreen;
}

/* Tooltip para los iconos */
.tooltip {
    visibility: hidden;
    width: 150px;
    /* Ajusta el ancho del tooltip según sea necesario */
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 1px;
    position: absolute;
    bottom: 100%;
    /* Mueve el tooltip arriba del icono */
    left: 50%;
    margin-left: -100px;
    /* Centra el tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
}

.whatsapp-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Estilos específicos para el icono secundario */
.whatsapp-secondary {
    background-color: blue;
}

.whatsapp-secondary:hover {
    background-color: darkblue;
}

.saltoDeLinea {
    white-space: pre-wrap;
}

.service-areas-intro {
    font-size: 1.5rem;       /* mucho más grande */
    color: #333;
    font-weight: 500;
    margin-bottom: 1.5rem;
    opacity: 0.95;
  }
  
  .service-areas-cities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 960px;
    margin: 0 auto;
  }
  
  .city-badge {
    padding: 0.75rem 1.25rem;
    font-size: 1.4rem;       /* texto mucho más grande */
    font-weight: 600;
    border: 1px solid #d0d7de;
    color: #2c3e50;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    cursor: default;
  }
  
  .city-badge:hover {
    background-color: #f0f4f8;
    border-color: #b3c1d1;
    transform: translateY(-2px);
  }
  
  .city-icon {
    margin-right: 0.5rem;
    font-size: 1.5rem;        /* ícono más grande también */
    color: #4a90e2;
  }