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

    Template Name: AppLand
    Template URI: uideck.com/templates/appland
    Support: https://uideck.com/support/
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
	02. Header
    03. Hero
	04. Footer

-----------------------------------------------------------------------------------*/
/*===========================
      01.COMMON css 
===========================*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Poppins:300,400,500,600,700&display=swap");
body {
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #747E88;
  overflow-x: hidden; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

img {
  max-width: 100%; }

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none; }

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

i,
span,
a {
  display: inline-block; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #38424D;
  margin: 0px; }

h1 {
  font-size: 48px; }

h2 {
  font-size: 36px; }

h3 {
  font-size: 28px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none; }

p {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #747E88;
  margin: 0px; }

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%; }

/*===== All Button Style =====*/
.main-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid #0898E7;
  padding: 0 25px;
  font-size: 13px;
  height: 55px;
  line-height: 51px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  background-color: #0898E7; }
  .main-btn:hover {
    background-color: rgba(8, 152, 231, 0.7);
    color: #fff;
    border-color: transparent; }
  .main-btn.main-btn-2 {
    background-color: transparent;
    color: #525A63;
    border-color: #525A63; }
    .main-btn.main-btn-2:hover {
      background-color: rgba(82, 90, 99, 0.5);
      color: #525A63; }

@keyframes animation1 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes animation1 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

/*===== All Section Title Style =====*/
.section-title .title {
  font-size: 35px;
  font-weight: 600; }
  @media (max-width: 767px) {
    .section-title .title {
      font-size: 22px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-title .title {
      font-size: 26px; } }

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

/*===== All Slick Slide Outline Style =====*/
.slick-slide {
  outline: 0; }

/*===== All Preloader Style =====*/
.preloader {
  /* Body Overlay */
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  /* Change Background Color */
  background: #fff;
  z-index: 99999; }
  .preloader .loader {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
    .preloader .loader .ytp-spinner {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 64px;
      margin-left: -32px;
      z-index: 18;
      pointer-events: none; }
      .preloader .loader .ytp-spinner .ytp-spinner-container {
        pointer-events: none;
        position: absolute;
        width: 100%;
        padding-bottom: 100%;
        top: 50%;
        left: 50%;
        margin-top: -50%;
        margin-left: -50%;
        -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
        -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
        -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
        animation: ytp-spinner-linspin 1568.23529647ms linear infinite; }
        .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
          position: absolute;
          width: 100%;
          height: 100%;
          -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
          .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            overflow: hidden;
            right: 50%; }
          .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            left: 50%; }
    .preloader .loader .ytp-spinner-circle {
      box-sizing: border-box;
      position: absolute;
      width: 200%;
      height: 100%;
      border-style: solid;
      /* Spinner Color */
      border-color: #0898E7 #0898E7 #eceff8;
      border-radius: 50%;
      border-width: 6px; }
    .preloader .loader .ytp-spinner-left .ytp-spinner-circle {
      left: 0;
      right: -100%;
      border-right-color: #eceff8;
      -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
    .preloader .loader .ytp-spinner-right .ytp-spinner-circle {
      left: -100%;
      right: 0;
      border-left-color: #eceff8;
      -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
      animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

/* Preloader Animations */
@-webkit-keyframes ytp-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes ytp-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes ytp-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
    -moz-transform: rotate(675deg);
    -ms-transform: rotate(675deg);
    -o-transform: rotate(675deg);
    transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
    -moz-transform: rotate(810deg);
    -ms-transform: rotate(810deg);
    -o-transform: rotate(810deg);
    transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
    -moz-transform: rotate(945deg);
    -ms-transform: rotate(945deg);
    -o-transform: rotate(945deg);
    transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg); } }

@keyframes ytp-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
    -moz-transform: rotate(675deg);
    -ms-transform: rotate(675deg);
    -o-transform: rotate(675deg);
    transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
    -moz-transform: rotate(810deg);
    -ms-transform: rotate(810deg);
    -o-transform: rotate(810deg);
    transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
    -moz-transform: rotate(945deg);
    -ms-transform: rotate(945deg);
    -o-transform: rotate(945deg);
    transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg); } }

@-webkit-keyframes ytp-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); } }

@keyframes ytp-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -ms-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    transform: rotate(130deg); } }

@-webkit-keyframes ytp-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); } }

@keyframes ytp-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
    -moz-transform: rotate(-130deg);
    -ms-transform: rotate(-130deg);
    -o-transform: rotate(-130deg);
    transform: rotate(-130deg); } }

/*===========================
      02.HEADER css 
===========================*/
/*===== NAVBAR =====*/
.navbar-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.sticky {
  position: fixed;
  z-index: 99;
  background-color: #fff;
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }
  .sticky .navbar {
    padding: 10px 0; }

.navbar {
  padding: 0;
  border-radius: 5px;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 35px 0; }

.navbar-brand {
  padding: 0; }
  .navbar-brand img {
    max-width: 150px; }

.navbar-toggler {
  padding: 0; }
  .navbar-toggler .toggler-icon {
    width: 30px;
    height: 2px;
    background-color: #222;
    display: block;
    margin: 5px 0;
    position: relative;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
  .navbar-toggler.active .toggler-icon:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 7px; }
  .navbar-toggler.active .toggler-icon:nth-of-type(2) {
    opacity: 0; }
  .navbar-toggler.active .toggler-icon:nth-of-type(3) {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    top: -7px; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 5px 12px; } }

@media (max-width: 767px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(56, 66, 77, 0.1);
    -moz-box-shadow: 0px 15px 20px 0px rgba(56, 66, 77, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(56, 66, 77, 0.1);
    padding: 5px 12px; } }

.navbar-nav .nav-item {
  margin-left: 45px;
  position: relative; }
  .navbar-nav .nav-item:first-child {
    margin-left: 0; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar-nav .nav-item {
      margin-left: 30px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-nav .nav-item {
      margin: 0; } }
  @media (max-width: 767px) {
    .navbar-nav .nav-item {
      margin: 0; } }
  .navbar-nav .nav-item a {
    font-size: 16px;
    font-weight: 800;
    color: #38424D;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    position: relative; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-nav .nav-item a {
        display: block;
        padding: 4px 0; } }
    @media (max-width: 767px) {
      .navbar-nav .nav-item a {
        display: block;
        padding: 4px 0; } }
  .navbar-nav .nav-item.active > a, .navbar-nav .nav-item:hover > a {
    color: #0898E7; }
  .navbar-nav .nav-item:hover .sub-menu {
    top: 100%;
    opacity: 1;
    visibility: visible; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-nav .nav-item:hover .sub-menu {
        top: 0; } }
    @media (max-width: 767px) {
      .navbar-nav .nav-item:hover .sub-menu {
        top: 0; } }
  .navbar-nav .nav-item .sub-menu {
    width: 200px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 110%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-nav .nav-item .sub-menu {
        position: relative;
        width: 100%;
        top: 0;
        display: none;
        opacity: 1;
        visibility: visible; } }
    @media (max-width: 767px) {
      .navbar-nav .nav-item .sub-menu {
        position: relative;
        width: 100%;
        top: 0;
        display: none;
        opacity: 1;
        visibility: visible; } }
    .navbar-nav .nav-item .sub-menu li {
      display: block; }
      .navbar-nav .nav-item .sub-menu li a {
        display: block;
        padding: 8px 20px;
        color: #222; }
        .navbar-nav .nav-item .sub-menu li a.active, .navbar-nav .nav-item .sub-menu li a:hover {
          padding-left: 25px;
          color: #0898E7; }

.navbar-nav .sub-nav-toggler {
  display: none; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-nav .sub-nav-toggler {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      background: none;
      color: #222;
      font-size: 18px;
      border: 0;
      width: 30px;
      height: 30px; } }
  @media (max-width: 767px) {
    .navbar-nav .sub-nav-toggler {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      background: none;
      color: #222;
      font-size: 18px;
      border: 0;
      width: 30px;
      height: 30px; } }
  .navbar-nav .sub-nav-toggler span {
    width: 8px;
    height: 8px;
    border-left: 1px solid #222;
    border-bottom: 1px solid #222;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    top: -5px; }

/*===== HEADER HERO =====*/
.header-hero {
  position: relative;
  z-index: 5;
  background-position: bottom center;
  height: 800px; }
  @media only screen and (min-width: 1400px) {
    .header-hero {
      height: 900px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-hero {
      height: auto; } }
  @media (max-width: 767px) {
    .header-hero {
      height: auto; } }
  .header-hero .shape {
    position: absolute; }
    .header-hero .shape.shape-1 {
      width: 75px;
      height: 75px;
      background: -webkit-linear-gradient(rgba(254, 132, 100, 0.5) 0%, rgba(254, 110, 154, 0.5) 100%);
      background: -o-linear-gradient(rgba(254, 132, 100, 0.5) 0%, rgba(254, 110, 154, 0.5) 100%);
      background: linear-gradient(rgba(254, 132, 100, 0.5) 0%, rgba(254, 110, 154, 0.5) 100%);
      border-radius: 50%;
      left: 130px;
      top: 25%;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .header-hero .shape.shape-2 {
      width: 39px;
      height: 39px;
      background: -webkit-linear-gradient(rgba(51, 200, 193, 0.5) 0%, rgba(17, 155, 210, 0.5) 100%);
      background: -o-linear-gradient(rgba(51, 200, 193, 0.5) 0%, rgba(17, 155, 210, 0.5) 100%);
      background: linear-gradient(rgba(51, 200, 193, 0.5) 0%, rgba(17, 155, 210, 0.5) 100%);
      left: 150px;
      bottom: 40px;
      border-radius: 50%;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .header-hero .shape.shape-3 {
      width: 19px;
      height: 19px;
      background: -webkit-linear-gradient(rgba(54, 28, 193, 0.5) 0%, rgba(46, 130, 239, 0.5) 100%);
      background: -o-linear-gradient(rgba(54, 28, 193, 0.5) 0%, rgba(46, 130, 239, 0.5) 100%);
      background: linear-gradient(rgba(54, 28, 193, 0.5) 0%, rgba(46, 130, 239, 0.5) 100%);
      bottom: 25%;
      left: 26%;
      border-radius: 50%;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .header-hero .shape.shape-4 {
      background-color: rgba(226, 158, 25, 0.55);
      width: 39px;
      height: 39px;
      border-radius: 50%;
      top: 175px;
      left: 40%;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .header-hero .shape.shape-5 {
      width: 19px;
      height: 19px;
      background-color: rgba(108, 99, 255, 0.55);
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      bottom: 20%;
      border-radius: 50%;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .header-hero .shape.shape-6 {
      width: 14px;
      height: 14px;
      background-color: rgba(235, 163, 26, 0.55);
      border-radius: 50%;
      left: 45%;
      bottom: 70px;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }

.header-shape-1 {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  right: 0;
  z-index: -1;
  background-image: url(../images/header-shape-1.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-shape-1 {
      width: 100%; } }

.header-shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1; }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-shape-2 img {
      width: 295px; } }

.header-hero-content {
  position: relative;
  z-index: 9; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-hero-content {
      padding-top: 150px; } }
  @media (max-width: 767px) {
    .header-hero-content {
      padding-top: 120px; } }
  .header-hero-content .header-title {
    font-size: 42px;
    color: #38424D; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .header-hero-content .header-title {
        font-size: 36px; } }
    @media (max-width: 767px) {
      .header-hero-content .header-title {
        font-size: 22px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .header-hero-content .header-title {
        font-size: 38px; } }
    .header-hero-content .header-title span {
      display: contents;
      color: #0898E7; }
  .header-hero-content .text {
    margin-top: 30px; }
  .header-hero-content ul {
    margin-top: 30px; }
    .header-hero-content ul li {
      margin-left: 50px; }
      .header-hero-content ul li:first-child {
        margin-left: 0; }
  .header-hero-content .main-btn {
    margin-top: 10px; }
  .header-hero-content .header-video {
    margin-top: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    border-radius: 50%;
    background-color: #0898E7;
    position: relative;
    z-index: 5; }
    .header-hero-content .header-video::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(8, 152, 231, 0.8);
      top: 0;
      left: 0;
      -webkit-animation: video 2s linear infinite;
      -moz-animation: video 2s linear infinite;
      -o-animation: video 2s linear infinite;
      animation: video 2s linear infinite;
      z-index: -1; }

@keyframes video {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0; } }

@-webkit-keyframes video {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0; } }

.header-image {
  padding-top: 50px;
  position: relative;
  transform: translateX(-90px); /* más a la izquierda = más negativo */
  z-index: 5; }
  .header-image .image {
    width: 100%; }
  .header-image .image-shape {
    position: absolute;
    bottom: -100px;
    left: -115px;
    z-index: -1; }
    @media (max-width: 767px) {
      .header-image .image-shape {
        left: -90px; } }
    .header-image .image-shape img {
      max-width: 350px; }
      @media (max-width: 767px) {
        .header-image .image-shape img {
          max-width: 250px; } }

/*===========================
      03.SERVICES css 
===========================*/
.single-services {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(154, 154, 154, 0.16);
  -moz-box-shadow: 0px 0px 10px 0px rgba(154, 154, 154, 0.16);
  box-shadow: 0px 0px 10px 0px rgba(154, 154, 154, 0.16);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 45px 25px 35px; }
  @media (max-width: 767px) {
    .single-services {
      padding: 40px 20px 30px; } }
  .single-services .services-icon {
    width: 79px;
    height: 79px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    text-align: center; }
    .single-services .services-icon i {
      font-size: 46px;
      line-height: 79px;
      color: #fff; }
    .single-services .services-icon::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
      border-radius: 50%;
      z-index: -1; }
  .single-services .services-content {
    margin-top: 35px; }
    .single-services .services-content .services-title a {
      font-size: 25px;
      font-weight: 500;
      color: #222;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      @media (max-width: 767px) {
        .single-services .services-content .services-title a {
          font-size: 20px; } }
    .single-services .services-content .text {
      margin-top: 30px; }
  .single-services.services-color-1 .services-icon {
    background-color: #E7A019; }
    .single-services.services-color-1 .services-icon::before {
      background-color: rgba(231, 160, 25, 0.2); }
  .single-services.services-color-1 .services-content .services-title a:hover {
    color: #E7A019; }
  .single-services.services-color-2 .services-icon {
    background-color: #E54F4F; }
    .single-services.services-color-2 .services-icon::before {
      background-color: rgba(229, 79, 79, 0.2); }
  .single-services.services-color-2 .services-content .services-title a:hover {
    color: #E54F4F; }
  .single-services.services-color-3 .services-icon {
    background-color: #8950E4; }
    .single-services.services-color-3 .services-icon::before {
      background-color: rgba(137, 80, 228, 0.2); }
  .single-services.services-color-3 .services-content .services-title a:hover {
    color: #8950E4; }
  .single-services.services-color-4 .services-icon {
    background-color: #0898E7; }
    .single-services.services-color-4 .services-icon::before {
      background-color: rgba(8, 152, 231, 0.2); }
  .single-services.services-color-4 .services-content .services-title a:hover {
    color: #0898E7; }
  .single-services:hover {
    -webkit-box-shadow: 0px 15px 17px 0px rgba(154, 154, 154, 0.16);
    -moz-box-shadow: 0px 15px 17px 0px rgba(154, 154, 154, 0.16);
    box-shadow: 0px 15px 17px 0px rgba(154, 154, 154, 0.16); }

/*===========================
       04.ABOUT css 
===========================*/
.about-area {
  background-color: #F3FDFF; }

.about-image {
  position: relative;
  display: inline-block;
  text-align: center;
  margin-left: 50px;
  padding-top: 100px;
  padding-bottom: 100px; }
  @media (max-width: 767px) {
    .about-image {
      margin-left: 0;
      padding-top: 65px;
      padding-bottom: 45px; } }
  .about-image .about-shape {
    background: -webkit-linear-gradient(#61009d 0%, #cb107a 100%);
    background: -o-linear-gradient(#61009d 0%, #cb107a 100%);
    background: linear-gradient(#61009d 0%, #cb107a 100%);
    width: 394px;
    height: 394px;
    border-radius: 50%;
    position: relative; }
    @media (max-width: 767px) {
      .about-image .about-shape {
        width: 294px;
        height: 294px; } }
    .about-image .about-shape::before {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      content: '';
      -webkit-transform: scale(1.1) rotate(25deg);
      -moz-transform: scale(1.1) rotate(25deg);
      -ms-transform: scale(1.1) rotate(25deg);
      -o-transform: scale(1.1) rotate(25deg);
      transform: scale(1.1) rotate(25deg);
      border-radius: 50%;
      border: 2px solid #61009D;
      border-top-color: transparent;
      border-right-color: transparent; }
  .about-image .app {
    position: relative;
    -webkit-transform: rotate(-25deg) translateY(-15%);
    -moz-transform: rotate(-25deg) translateY(-15%);
    -ms-transform: rotate(-25deg) translateY(-15%);
    -o-transform: rotate(-25deg) translateY(-15%);
    transform: rotate(-25deg) translateY(-15%);
    max-width: 280px;
    position: absolute;
    top: 100px;
    left: 95px;
    -webkit-box-shadow: -15px 10px 30px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -15px 10px 30px 0px rgba(0, 0, 0, 0.3);
    box-shadow: -15px 10px 30px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50px; }
    @media (max-width: 767px) {
      .about-image .app {
        max-width: 190px;
        border-radius: 25px;
        top: 60px; } }

.about-content .main-btn {
  margin-top: 40px; }


/*===========================
     10.DOWNLOAD css 
===========================*/
.download-area .download-image {
  padding-top: 65px;
  padding-left: 60px;
  padding-bottom: 60px;
  position: relative; }
  @media (max-width: 767px) {
    .download-area .download-image {
      padding-left: 20px;
      padding-right: 20px; } }
  .download-area .download-image .image {
    -webkit-box-shadow: 0px 3px 25px 0px rgba(8, 153, 231, 0.2);
    -moz-box-shadow: 0px 3px 25px 0px rgba(8, 153, 231, 0.2);
    box-shadow: 0px 3px 25px 0px rgba(8, 153, 231, 0.2);
    border-radius: 50px;
    max-width: 295px;
    margin: 0 auto; }
    @media (max-width: 767px) {
      .download-area .download-image .image {
        max-width: 100%; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .download-area .download-image .image {
        max-width: 295px; } }
  .download-area .download-image .download-shape-1 {
    width: 185px;
    height: 185px;
    background-color: #FEB21C;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; }
  .download-area .download-image .download-shape-2 {
    position: absolute;
    bottom: -50px;
    right: 40px;
    z-index: -1; }

.download-content .download-title {
  font-size: 34px;
  font-weight: 600; }
  @media (max-width: 767px) {
    .download-content .download-title {
      font-size: 22px; } }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .download-content .download-title {
      font-size: 28px; } }

.download-content .text {
  margin-top: 35px; }

.download-content ul {
  padding-top: 35px; }
  .download-content ul li {
    display: inline-block;
    margin-top: 15px; }
    .download-content ul li a {
      width: 210px;
      height: 65px;
      border-radius: 5px;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      .download-content ul li a.app-store {
        background-color: #0898E7;
        -webkit-box-shadow: 0px 4px 10px 0px rgba(8, 152, 231, 0.4);
        -moz-box-shadow: 0px 4px 10px 0px rgba(8, 152, 231, 0.4);
        box-shadow: 0px 4px 10px 0px rgba(8, 152, 231, 0.4);
        margin-right: 28px; }
        .download-content ul li a.app-store:hover {
          -webkit-box-shadow: 0px 4px 25px 0px rgba(8, 152, 231, 0.4);
          -moz-box-shadow: 0px 4px 25px 0px rgba(8, 152, 231, 0.4);
          box-shadow: 0px 4px 25px 0px rgba(8, 152, 231, 0.4); }
      .download-content ul li a.play-store {
        background-color: #525A63;
        -webkit-box-shadow: 0px 4px 10px 0px rgba(82, 90, 99, 0.4);
        -moz-box-shadow: 0px 4px 10px 0px rgba(82, 90, 99, 0.4);
        box-shadow: 0px 4px 10px 0px rgba(82, 90, 99, 0.4); }
        .download-content ul li a.play-store:hover {
          -webkit-box-shadow: 0px 4px 25px 0px rgba(82, 90, 99, 0.4);
          -moz-box-shadow: 0px 4px 25px 0px rgba(82, 90, 99, 0.4);
          box-shadow: 0px 4px 25px 0px rgba(82, 90, 99, 0.4); }

/*===========================
     10.FOOTER css 
===========================*/
.footer-area {
  position: relative;
  z-index: 5; }
  .footer-area .footer-shape {
    position: absolute; }
    .footer-area .footer-shape.shape-1 {
      background: -webkit-linear-gradient(#fe8464 0%, #fe6e9a 100%);
      background: -o-linear-gradient(#fe8464 0%, #fe6e9a 100%);
      background: linear-gradient(#fe8464 0%, #fe6e9a 100%);
      width: 75px;
      height: 75px;
      border-radius: 50%;
      left: 70px;
      opacity: 0.55;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
      @media (max-width: 767px) {
        .footer-area .footer-shape.shape-1 {
          left: auto;
          right: 40px;
          top: 25%; } }
    .footer-area .footer-shape.shape-2 {
      background: -webkit-linear-gradient(#33c8c1 0%, #119bd2 100%);
      background: -o-linear-gradient(#33c8c1 0%, #119bd2 100%);
      background: linear-gradient(#33c8c1 0%, #119bd2 100%);
      width: 39px;
      height: 39px;
      border-radius: 50%;
      bottom: 40px;
      left: 15%;
      opacity: 0.55;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .footer-area .footer-shape.shape-2 {
          bottom: 85px; } }
      @media (max-width: 767px) {
        .footer-area .footer-shape.shape-2 {
          bottom: 110px; } }
    .footer-area .footer-shape.shape-3 {
      background: -webkit-linear-gradient(#361cc1 0%, #2e82ef 100%);
      background: -o-linear-gradient(#361cc1 0%, #2e82ef 100%);
      background: linear-gradient(#361cc1 0%, #2e82ef 100%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      left: 35%;
      top: 40px;
      opacity: 0.55;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .footer-area .footer-shape.shape-3 {
          top: 40%; } }
    .footer-area .footer-shape.shape-4 {
      background-color: #EBA31A;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      left: 50%;
      bottom: 5px;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      opacity: 0.55;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .footer-area .footer-shape.shape-5 {
      background-color: #E29E19;
      right: 37%;
      top: 0;
      width: 39px;
      height: 39px;
      border-radius: 50%;
      opacity: 0.55;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .footer-area .footer-shape.shape-6 {
      background-color: #B60D81;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      top: 125px;
      right: 15%;
      opacity: 0.55;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
    .footer-area .footer-shape.shape-7 {
      background-color: #6C63FF;
      width: 64px;
      height: 64px;
      bottom: 25px;
      right: 8%;
      opacity: 0.55;
      border-radius: 50%;
      -webkit-animation: animation1 2s linear infinite;
      -moz-animation: animation1 2s linear infinite;
      -o-animation: animation1 2s linear infinite;
      animation: animation1 2s linear infinite; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .footer-area .footer-shape.shape-7 {
          bottom: 20%; } }
      @media (max-width: 767px) {
        .footer-area .footer-shape.shape-7 {
          bottom: 38%; } }
    .footer-area .footer-shape.shape-8 {
      top: 30px;
      right: -45px; }
  .footer-area .logo {
    max-width: 200px; }

.footer-about {
  max-width: 320px; }
  .footer-about .text {
    margin-top: 30px; }
  .footer-about .social {
    margin-top: 30px; }
    .footer-about .social li {
      display: inline-block;
      margin-right: 25px; }
      .footer-about .social li a {
        font-size: 20px;
        color: #747E88;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s; }
        .footer-about .social li a:hover {
          color: #0898E7; }

.footer-title .title {
  font-size: 20px;
  font-weight: 500; }

.footer-link .link {
  padding-top: 10px; }
  .footer-link .link li {
    margin-top: 10px; }
    .footer-link .link li a {
      color: #747E88;
      font-size: 14px;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      .footer-link .link li a:hover {
        color: #0898E7; }

.footer-link-wrapper {
  width: 50%; }

.footer-contact .contact-list li {
  margin-top: 20px; }
  .footer-contact .contact-list li .contact-info .info-info {
    width: 30px; }
  .footer-contact .contact-list li .contact-info .info-content .text {
    color: #747E88;
    font-size: 14px; }
    .footer-contact .contact-list li .contact-info .info-content .text a {
      color: #747E88;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      .footer-contact .contact-list li .contact-info .info-content .text a:hover {
        color: #0898E7; }

.footer-copyright .copyright {
  border-top: 2px solid #747E88;
  padding-top: 10px;
  padding-bottom: 25px; }
  .footer-copyright .copyright .copyright-text {
    padding-top: 15px; }
    .footer-copyright .copyright .copyright-text .text {
      color: #747E88; }
  .footer-copyright .copyright .copyright-privacy {
    padding-top: 15px; }
    .footer-copyright .copyright .copyright-privacy a {
      font-size: 16px;
      color: #747E88;
      -webkit-transition: all 0.3s ease-out 0s;
      -moz-transition: all 0.3s ease-out 0s;
      -ms-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s; }
      .footer-copyright .copyright .copyright-privacy a:hover {
        color: #0898E7; }

/*===== BACK TO TOP =====*/
.back-to-top {
  font-size: 20px;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  background: #0898E7;
  background-size: 200%;
  text-align: center;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: none; }
  .back-to-top:hover {
    background-color: rgba(8, 152, 231, 0.5);
    color: #fff; }


/* =============================
   GlowSuite Premium Overrides
============================= */
:root{
  --gs-p:#9B5CFC;
  --gs-s:#26D0FA;
  --gs-m:#2F74FF;
  --gs-grad: linear-gradient(90deg, var(--gs-p) 0%, var(--gs-m) 48%, var(--gs-s) 100%);
}

/* Typography */
body{ font-size:16px; line-height:1.65; color:#475569; }
h1,h2,h3,h4,h5,h6{ color:#0B1220; }
.header-title{ font-size: 46px; line-height: 1.1; letter-spacing:-0.02em; }
@media (max-width: 767px){ .header-title{ font-size: 34px; } }

/* Hero: remove fixed height (no cut) */
.header-hero{ height:auto !important; padding: 130px 0 90px !important; }

/* Buttons: premium gradient */
.main-btn{
  background-color: transparent;
  background-image: var(--gs-grad);
  border: 0 !important;
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 36px rgba(155,92,252,.18);
}
.main-btn:hover{ opacity: .95; }
.main-btn.main-btn-2{
  background: rgba(255,255,255,.0) !important;
  border: 2px solid rgba(255,255,255,.75) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Sticky nav looks premium */
.navbar-area.sticky{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}
.navbar-area.sticky .main-btn.main-btn-2{ border-color: rgba(11,18,32,.18) !important; color:#0B1220 !important; }
.navbar-area.sticky .main-btn.main-btn-2:hover{ background: rgba(11,18,32,.04) !important; }

/* Logo bigger */
.navbar-brand img{ max-width: 240px !important; height: auto; }

/* Hero badges */
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; }
.hero-badges .badge-item{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 400;
  backdrop-filter: blur(18px);
}

/* Services icons: NO circles/boxes */
.services-icon{
  width:auto !important;
  height:auto !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.services-icon::before{ display:none !important; }
.services-icon img{ width: 52px; height: 52px; }
.single-services{ padding: 38px 22px 30px !important; border-radius: 18px; }
.services-title{ font-weight: 900; }

/* Replace weird hero shape gradients to GlowSuite palette */
.header-hero .shape.shape-1,
.header-hero .shape.shape-2,
.header-hero .shape.shape-3,
.header-hero .shape.shape-4,
.header-hero .shape.shape-5,
.header-hero .shape.shape-6{
  background: linear-gradient(rgba(155,92,252,.28) 0%, rgba(38,208,250,.28) 100%) !important;
}



/* FAQ + Contact cards */
.faq-card, .contact-card{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  padding: 22px;
}
.single-faq{ border-bottom: 1px solid rgba(2,6,23,.08); padding: 12px 0;font-size: 13px;}
.single-faq:last-child{ border-bottom:0; }
.faq-q{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  font-weight: 900;
  color:#0B1220;
  padding: 6px 0;
}
.faq-a{ color:#475569; font-weight:600; padding: 4px 0 10px 0; }

.contact-title{ font-weight: 900; margin-bottom: 14px; text-align: center; font-size: 13px;}
.contact-form input, .contact-form textarea{
  width:100%;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  outline: none;
  font-size: 13px;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: rgba(155,92,252,.45);
  box-shadow: 0 0 0 4px rgba(155,92,252,.12);
}
.btn-block{ width:100%; display:block; }
.contact-legal{ margin-top: 10px; font-size: 13px; color:#64748b; }

/* Section spacing tweaks */
.pt-110{ padding-top: 90px !important; }
.pb-120{ padding-bottom: 90px !important; }

/* Nav CTA spacing */
.navbar-nav .nav-btn{ margin-left: 14px; }
.navbar-nav .nav-btn .main-btn{ height: 46px !important; line-height: 46px !important; padding: 0 16px !important; box-shadow:none; }

@media (max-width: 991px){
  .navbar-nav .nav-btn{ margin-left: 0; margin-top: 10px; }
  .header-hero{ padding: 110px 0 70px !important; }
}



/* =============================
   GlowSuite HERO VISIBILITY + MOBILE (v2)
   - Make hero readable (contrast)
   - Navbar readable on hero + mobile collapse
   - Remove extra top padding that hides hero text
============================= */
:root{
  --gs-hero: linear-gradient(100deg, #9B5CFC 0%, #2F74FF 48%, #26D0FA 100%);
}

/* HERO background + readable text */
.header-hero{
  background: var(--gs-hero) !important;
}
.header-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 520px at 18% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(520px 520px at 86% 30%, rgba(255,255,255,.14), transparent 62%);
  pointer-events:none;
}
.header-hero-content{
  padding-top: 0 !important; /* avoid hiding text */
}
.header-hero-content .header-title,
.header-hero-content .text{
  color:#fff !important;
}
.header-hero-content .header-title span{
  color: rgba(255,255,255,.92) !important;
}

/* Make hero paragraph width comfortable */
.header-hero-content .text{
  max-width: 56ch;
}
@media (max-width: 991px){
  .header-hero-content .text{ margin-left:auto; margin-right:auto; }
}

/* Navbar on hero: white links and toggler */
.navbar-area{
  background: transparent !important;
}
.navbar-nav .nav-item a{
  color: rgba(255,255,255,.92) !important;
}
.navbar-nav .nav-item a::before{ background-color: rgba(255,255,255,.9) !important; }

.navbar-toggler .toggler-icon{
  background-color: rgba(255,255,255,.92) !important;
}

/* Sticky nav: white background and dark text */
.navbar-area.sticky{
  background: rgba(255,255,255,.92) !important;
}
.navbar-area.sticky .navbar-nav .nav-item a{
  color: #0B1220 !important;
}
.navbar-area.sticky .navbar-nav .nav-item a::before{ background-color: #9B5CFC !important; }
.navbar-area.sticky .navbar-toggler .toggler-icon{
  background-color: #0B1220 !important;
}

/* Mobile collapse menu: ensure readable and not overlay weird */
@media (max-width: 991px){
  .navbar-collapse{
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 18px 46px rgba(2,6,23,.14);
    margin-top: 12px;
  }
  .navbar-nav .nav-item a{
    color: #0B1220 !important;
    padding: 10px 0 !important;
  }
  /* CTA button in nav */
  .navbar-nav .nav-btn .main-btn{
    width: 100%;
    height: 48px !important;
    line-height: 48px !important;
  }
}

/* Hero layout on mobile: center + spacing */
@media (max-width: 991px){
  .header-hero{ padding: 110px 0 80px !important; }
  .header-hero-content{ text-align:center; }
  .hero-cta{ justify-content:center; gap:12px; flex-wrap:wrap; }
  .hero-badges{ justify-content:center; }
  .header-image{ margin-top: 26px; }
  .header-image .image{ max-width: 320px; margin: 0 auto; display:block; }
}

/* Ensure shapes stay behind */
.header-hero .shape,
.header-shape-1,
.header-shape-2{
  z-index: 0 !important;
}
.header-hero-content, .header-image{
  position: relative;
  z-index: 2 !important;
}

/* Buttons on hero */
.main-btn.main-btn-2{
  border-color: rgba(255,255,255,.80) !important;
  color:#fff !important;
}
.navbar-area.sticky .main-btn.main-btn-2{
  border-color: rgba(11,18,32,.18) !important;
  color:#0B1220 !important;
}

/* Fix spacing for badges on very small screens */
@media (max-width: 575px){
  .header-title{ font-size: 30px !important; }
  .hero-badges .badge-item{ padding: 9px 10px; font-size: 13px; }
}



/* =====================================================
   HEADER: MENÚ IZQ + LOGO DER + ALINEACIÓN PERFECTA
===================================================== */

/* Alineación vertical del header */
.navbar{
  display: flex;
  align-items: center;
}

/* Orden de elementos en desktop */
.navbar-toggler{ order: 1; }
.navbar-collapse{ order: 2; }             /* menú izquierda */
.nav-cta{ order: 3; margin-left: auto; }  /* empuja CTA hacia la derecha */
.navbar-brand{ order: 4; margin-left: 16px !important; padding: 0 !important; } /* logo derecha */

/* Menú horizontal y centrado verticalmente */
#nav.navbar-nav{
  flex-direction: row;
  align-items: center;
}

/* Links: centrados verticalmente dentro del header */
.navbar-nav .nav-item a{
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 10px !important;
}

/* CTA desktop tamaño pro */
.nav-cta{
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
}

/* Logo tamaño pro */
.navbar-brand img{
  max-width: 260px;
  height: auto;
  display: block;
}

/* =====================================================
   HERO: SUBIR TODO (TEXTO + BOTONES) 25px
===================================================== */
@media (min-width: 992px){
  .header-hero-content{
    margin-top: -25px !important;
  }
}
@media (max-width: 991px){
  .header-hero-content{
    margin-top: -10px !important;
    text-align: center;
  }
  .header-hero-content ul.d-flex{
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* =====================================================
   MÓVIL: MENÚ DESPLEGABLE LEGIBLE + CTA DENTRO
===================================================== */
@media (max-width: 991px){
  .navbar-collapse{
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 18px 46px rgba(2,6,23,.14);
    margin-top: 12px;
  }

  #nav.navbar-nav{
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-nav .nav-item a{
    height: auto;
    padding: 10px 0 !important;
  }

  /* Oculta CTA desktop (ya va dentro del collapse) */
  .nav-cta{ display: none !important; }

  /* Logo se mantiene a la derecha */
  .navbar-brand{ margin-left: auto !important; }
}



/* =====================================================
   HEADER v2: CTA IZQUIERDA BLANCO + MENÚ CENTRADO + LOGO DERECHA
===================================================== */
.navbar{ display:flex; align-items:center; }

/* Place CTA at far left */
.nav-cta{ order: 1; margin-right: 14px; }

/* Collapse/menu next */
.navbar-toggler{ order: 2; }
.navbar-collapse{ order: 3; flex-grow: 0; }

/* Logo far right */
.navbar-brand{ order: 4; margin-left: auto !important; padding: 0 !important; }

/* Menu centered vertically */
#nav.navbar-nav{ flex-direction: row; align-items: center; }
.navbar-nav .nav-item a{
  display:flex;
  align-items:center;
  height: 46px;
  padding: 0 10px !important;
}

/* CTA white for contrast on hero */
.nav-cta-white{
  background: #ffffff !important;
  background-image: none !important;
  color: #0B1220 !important;
  border: 0 !important;
  box-shadow: 0 16px 36px rgba(2,6,23,.18) !important;
}
.nav-cta-white:hover{ transform: translateY(-1px); }

/* Sticky: keep CTA visible and elegant */
.navbar-area.sticky .nav-cta-white{
  background-image: var(--gs-grad) !important;
  color:#fff !important;
  box-shadow: 0 12px 30px rgba(155,92,252,.18) !important;
}

/* Mobile: hide desktop CTA, show inside collapse */
@media (max-width: 991px){
  .nav-cta{ display:none !important; }
  #nav.navbar-nav{ flex-direction: column; align-items: flex-start; }
  .navbar-nav .nav-item a{ height:auto; padding: 10px 0 !important; }
}

/* =====================================================
   PRICING CARD v2: más estilizado y bonito
===================================================== */
.gs-price-card{
  border-radius: 26px !important;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(155,92,252,.14);
  border: 1px solid rgba(155,92,252,.16) !important;
  padding: 0 !important;
}
.gs-price-top{
  padding: 34px 28px 18px 28px;
  background: linear-gradient(180deg, rgba(105, 37, 207, 0.737) 0%, rgba(38,208,250,.10) 100%);
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.gs-plan-pill{
  display:inline-block;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(11,18,32,.86);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(2,6,23,.10);
  padding: 10px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.gs-price-row{
  display:flex;
  justify-content:center;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
}
.gs-price{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0B1220;
}
.gs-period{
  font-size: 13px;
  font-weight: 900;
  color: rgba(71,85,105,.95);
}
.gs-price-sub{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(71,85,105,.95);
}
.gs-features{
  padding: 22px 30px 10px 30px !important;
  text-align:left;
  font-size: 13px;
 
}
.gs-features li{
  position: relative;
  padding-left: 28px;
  margin: 12px 0;
  font-weight: 380;
  color: rgba(71,85,105,.98);
}
.gs-features li::before{
  content: "✓";
  position:absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  font-weight: 900;
  background-image: var(--gs-grad);
}
.gs-price-btn{
  margin: 14px 26px 4px 26px !important;
  width: calc(100% - 52px);
  height: 56px !important;
  line-height: 56px !important;
  border-radius: 14px !important;
  font-weight: 500 !important;
    font-size: 12px;
}
.pricing-foot{
  font-size: 13px;
  padding: 16px 26px 28px 26px;
  font-weight: 600;
  color: rgba(71,85,105,.92);
   font-weight: 300;
}

/* Mobile sizing */
@media (max-width: 575px){
  .gs-price{ font-size: 44px; }
  .gs-features{ padding: 18px 20px 6px 20px !important; }
  .gs-price-btn{ margin: 12px 18px 4px 18px !important; width: calc(100% - 36px); }
}



/* =====================================================
   NAV MENU VISIBILITY (v3)
   - Gradient text for: Precio / FAQ / Contacto over white shape
   - Reduce spacing between menu items (and avoid wrapping)
   - Mobile: prevent logo/menu overlap + hide intrusive white shape
===================================================== */

/* Make navbar not wrap (prevents logo overlapping on smaller widths) */
.navbar{ flex-wrap: nowrap !important; }
.navbar-brand{ flex-shrink: 0; }
.navbar-toggler{ flex-shrink: 0; }

/* Menu spacing + typography */
#nav.navbar-nav{ gap: 4px; } /* modern browsers */
.navbar-nav .nav-item a{
  white-space: nowrap;
  font-size: 15px !important;
  padding: 0 8px !important;  /* smaller width => less chance of wrapping */
}

/* Gradient links ONLY on desktop (because those items sit over the white shape) */
@media (min-width: 992px){
 
  .navbar-nav .nav-item a[href="#faq"],
  .navbar-nav .nav-item a[href="#contact"]{
    background-image: var(--gs-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 900 !important;
  }

  /* On hover add subtle underline for clarity */
  .navbar-nav .nav-item a[href="#pricing"]:hover,
  .navbar-nav .nav-item a[href="#home"]:hover,
   .navbar-nav .nav-item a[href="#why"]:hover,
  .navbar-nav .nav-item a[href="#faq"]:hover,
  .navbar-nav .nav-item a[href="#contact"]:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* MOBILE FIXES */
@media (max-width: 991px){
  /* Reduce logo size so it doesn't invade the hero */
  .navbar-brand img{ max-width: 170px !important; }

  /* Hide the big white shape on mobile (it kills contrast and looks messy) */
  .header-shape-1,
  .header-shape-2{
    display: none !important;
  }

  /* Keep hero clean and readable */
  .header-hero{ padding-top: 105px !important; }
}

/* EXTRA SMALL */
@media (max-width: 575px){
  .navbar-brand img{ max-width: 150px !important; }
  .navbar{ padding: 10px 0 !important; }
}



/* =====================================================
   NAV: reduce gap between last menu item and logo (v4)
   - Keep logo on right, but align menu to the right edge (next to logo)
   - Match spacing between menu items
===================================================== */

/* Let collapse take the free space so menu can align right */
@media (min-width: 992px){
  .navbar-collapse{
    flex-grow: 1 !important;
  }
  #nav.navbar-nav{
    width: 100%;
    justify-content: flex-end;  /* puts Contacto close to logo */
  }
  /* Small consistent gap between menu and logo */
  .navbar-brand{
    margin-left: 10px !important;
  }
}



/* =====================================================
   NAV LAYOUT v6: MENÚ MÁS A LA IZQUIERDA + LOGO A LA DERECHA
   (matches your reference)
===================================================== */

/* Desktop */
@media (min-width: 992px){
  /* Keep everything centered vertically */
  .navbar{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; }

  /* CTA stays left */
  .nav-cta{ margin-right: 18px !important; }

  /* Make collapse NOT consume full width (avoids pushing menu toward center) */
  .navbar-collapse{
    flex-grow: 0 !important;
    width: auto !important;
    margin-right: auto !important;   /* pushes logo to the far right */
  }

  /* Menu loaded to the LEFT (right after CTA) */
  #nav.navbar-nav{
    justify-content: flex-start !important;
    margin-left: 0 !important;       /* remove any previous left shift */
    gap: 6px !important;
  }

  /* Reduce padding between items (tighter) */
  .navbar-nav .nav-item a{
    padding: 0 8px !important;
    white-space: nowrap;
  }

  /* Logo fixed to far right */
  .navbar-brand{
    margin-left: auto !important;
    padding: 0 !important;
  }
}

/* Tablet / narrow desktop: compress a bit more so nothing wraps */
@media (min-width: 992px) and (max-width: 1199px){
  .navbar-nav .nav-item a{ padding: 0 6px !important; font-size: 14px !important; }
  .nav-cta{ margin-right: 12px !important; }
  .navbar-brand img{ max-width: 220px !important; }
}

/* Mobile: keep existing behavior */
@media (max-width: 991px){
  .navbar-collapse{ margin-right: 0 !important; width: 100% !important; }
}



/* ABOUT image size control */
#about img.about-image{
  max-width: 320px !important; /* <-- BAJA ESTO si sigue grande: 280 / 260 / 240 */
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;  /* centrada */
}

/* =====================================================
   ABOUT as HERO style (no layout changes)
   - No cambia posiciones (col-lg-6 / col-lg-6)
   - Solo look & feel tipo HERO
===================================================== */

#about.about-area{
  position: relative;
  overflow: hidden;
  background: var(--gs-hero) !important; /* mismo gradiente del hero */
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* overlay como el hero */
#about.about-area::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 520px at 18% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(520px 520px at 86% 30%, rgba(255,255,255,.14), transparent 62%);
  pointer-events:none;
  z-index: 0;
}

/* asegurar que contenido quede arriba */
#about .container,
#about .row,
#about .col-lg-6{
  position: relative;
  z-index: 2;
}

/* Texto blanco tipo hero */
#about .section-title .title,
#about .section-title .text,
#about .how-list,
#about .how-list li{
  color: rgba(255,255,255,.94) !important;
}

#about .section-title .title{
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* lista con bullets “pro” */
#about .how-list{
  margin-top: 18px;
}
#about .how-list li{
  margin: 10px 0;
  font-weight: 650;
}
#about .how-list li b{
  color:#fff !important;
  font-weight: 900;
}

/* Botones iguales al hero (manteniendo tus clases) */
#about .main-btn{
  box-shadow: 0 16px 36px rgba(2,6,23,.22);
}
#about .main-btn.main-btn-2{
  background: rgba(255,255,255,.08) !important;
  border: 2px solid rgba(255,255,255,.70) !important;
  color:#fff !important;
}

/* Caja tipo “glass” detrás del texto (sin mover columnas) */
#about .about-content{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  padding: 28px 28px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(2,6,23,.18);
}

/* Imagen: NO cambia posición, solo “glow” y limpieza */
#about img.about-image,
#about .about-image .app{
  filter: drop-shadow(0 22px 55px rgba(2,6,23,.35));
}

/* quitar bola/shape del template si existe */
#about .about-shape{
  display:none !important;
}

/* Responsive: misma idea del hero en móvil, sin reordenar */
@media (max-width: 991px){
  #about.about-area{ padding-top: 70px !important; padding-bottom: 70px !important; }
  #about .about-content{ margin-top: 22px; }
}

/* =====================================================
   GlowSuite Steps (estilo “conectado” tipo imagen 1)
===================================================== */
.gs-steps{
  position: relative;
  margin-top: 18px;
  display: flex;
  gap: 22px;
}

.gs-step{
  position: relative;
  flex: 1;
  padding-top: 10px;
}

/* Línea conectando steps */
.gs-steps::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 28px;
  height: 6px;
  border-radius: 999px;
  background: var(--gs-grad);
  opacity: .35;
}

/* Nodo */
.gs-step-num{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 20px;
  color:#fff;
  background-image: var(--gs-grad);
  box-shadow: 0 14px 28px rgba(155,92,252,.20);
  position: relative;
  z-index: 2;
}

/* Texto */
.gs-step-body{
  margin-top: 12px;
  padding-right: 6px;
}
.gs-step-title{
  font-weight: 900;
  color:#0B1220;
  margin-bottom: 6px;
}
.gs-step-text{
  color:#475569;
  font-weight: 600;
  line-height: 1.55;
}

/* Responsive: en móvil se vuelve vertical con línea */
@media (max-width: 991px){
  .gs-steps{
    flex-direction: column;
    gap: 16px;
  }
  .gs-steps::before{
    left: 28px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 6px;
    height: auto;
  }
  .gs-step{
    display:flex;
    gap: 14px;
    padding-top: 0;
  }
  .gs-step-body{
    margin-top: 2px;
  }
}

/* ================================
   ABOUT / CÓMO FUNCIONA - CONTENEDOR MÁS GRANDE + TEXTO BLANCO
================================ */

/* 1) Hacer más grande el recuadro */
#about .about-content{
  width: 100%;
  max-width: 760px;          /* ancho máximo en desktop */
  padding: 42px 44px !important;
  border-radius: 26px;
}

/* 2) Título y texto general en blanco */
#about .about-content .title,
#about .about-content .text{
  color: #fff !important;
}

/* 3) Steps: títulos (Demo enfocada, Configuración, Listo) en blanco */
#about .gs-step-title{
  color: #fff !important;
  font-weight: 900;
}

/* 4) Steps: descripción en blanco (más suave) */
#about .gs-step-text{
  color: rgba(255,255,255,.88) !important;
  font-weight: 400;
}

/* 5) Línea del stepper más visible en fondo azul */
#about .gs-steps::before{
  opacity: .55 !important;
}

/* 6) Botones se leen bien sobre azul */
#about .main-btn.main-btn-2{
  border-color: rgba(255,255,255,.75) !important;
  color:#fff !important;
}


#about .how-list,
#about .how-list li{
  color: rgba(255,255,255,.9) !important;
  font-weight: 650;
}
#about .how-list b{
  color: #fff !important;
  font-weight: 900;
}


/* =====================================================
   FIX: CENTRAR IMAGEN + RECUADRO ABOUT (SIN cambiar width 760px)
   Causa: .about-content (760px) dentro de .col-lg-6 (50%)
===================================================== */
@media (min-width: 992px){

  /* 1) El row se comporta como fila centrada */
  #about .row.align-items-center{
    display: flex !important;
    flex-wrap: nowrap !important;          /* mantiene imagen izq + box der */
    justify-content: center !important;    /* centra TODO el conjunto */
    align-items: center !important;
    gap: 48px;                             /* espacio pro entre imagen y box */
  }

  /* 2) Quitamos el 50% de Bootstrap para que NO aplaste el recuadro de 760px */
  #about .row.align-items-center > .col-lg-6{
    flex: 0 0 auto !important;             /* ancho automático */
    width: auto !important;                 /* ignora col-lg-6 (50%) */
    max-width: none !important;
  }

  /* 3) La imagen NO debe empujarse a la derecha */
  #about .about-image{
    margin-left: 0 !important;             /* tu CSS tenía margin-left:50px */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 4) El recuadro se queda EXACTAMENTE igual, solo lo centramos dentro de su columna auto */
  #about .about-content{
    margin: 0 !important;
  }
}

/* En tablet/móvil dejamos que se apilen normal (ya lo tenías bien) */
@media (max-width: 991px){
  #about .row.align-items-center{
    justify-content: center !important;
  }
  #about .about-image{
    margin-left: 0 !important;
  }
}

/* Nodo */
.gs-step-num{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 20px;
  color:#fff;

  /* Predomina morado */
  background: var(--gs-grad);

  /* Glow/sombra morada */
  box-shadow:
    0 14px 28px rgba(139,92,246,.35),
    0 0 0 6px rgba(139,92,246,.12);

  position: relative;
  z-index: 2;
}


:root{
  /* Base morado */
  --gs-purple-900:#1a0933;
  --gs-purple-700:#4b1fb8;
  --gs-purple-600:#6d28d9;
  --gs-purple-500:#8b5cf6;
  --gs-purple-400:#a78bfa;

  /* Gradiente principal (morado) */
  --gs-grad: linear-gradient(135deg, var(--gs-purple-600), var(--gs-purple-500));
}

.gs-wa-float{
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Verde WhatsApp */
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  text-decoration: none;

  /* Glow verde */
  box-shadow: 0 18px 35px rgba(37, 211, 102, .35);
  z-index: 9999;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.gs-wa-float i{
  font-size: 28px;
  line-height: 1;
}

/* NO cambiar color en hover/focus/active */
.gs-wa-float:hover,
.gs-wa-float:focus,
.gs-wa-float:active{
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color:#fff !important;
  box-shadow: 0 18px 35px rgba(37, 211, 102, .35) !important;
  filter: none !important;
  transform: none !important;
}

.gs-wa-float:hover i,
.gs-wa-float:focus i,
.gs-wa-float:active i{
  color:#fff !important;
}


/* =====================================================
   MOBILE POLISH (GlowSuite)
   - Oculta imágenes decorativas (hero + about)
   - Ajusta el recuadro "Cómo funciona" (stepper)
   - Centra TODO el footer
===================================================== */
@media (max-width: 767px){

  /* 1) Ocultar imágenes de personas / mockups que estorban en móvil */
  #home .header-image{ display:none !important; }
  #about img.about-image{ display:none !important; }

  /* Hero más limpio y centrado */
  #home .header-hero-content{ text-align:center; }
  #home .hero-cta{ justify-content:center; flex-wrap: wrap; }
  #home .hero-badges{ justify-content:center; }

  /* 2) Recuadro "Cómo funciona" sin cortes */
  #about .about-content{
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 22px 18px !important;
    border-radius: 22px;
  }
  #about .section-title .title{ font-size: 26px; line-height: 1.2; }
  #about .section-title .text{ font-size: 15px; line-height: 1.55; }

  /* Stepper: nodos más pequeños + línea centrada */
  .gs-step-num{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    box-shadow:
      0 12px 22px rgba(139,92,246,.32),
      0 0 0 5px rgba(139,92,246,.10);
  }
  .gs-steps{ gap: 14px !important; }
  .gs-steps::before{
    left: 20px !important;   /* centro de 40px */
    top: 20px !important;
    bottom: 20px !important;
    width: 5px !important;
  }
  .gs-step{ gap: 12px !important; }
  .gs-step-body{ margin-top: 0 !important; }
  .gs-step-title{ font-size: 18px; margin-bottom: 4px; }
  .gs-step-text{ font-size: 15px; }

  /* Botones del about a full width */
  #about .flex-wrap.gap-2{
    display:flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #about .flex-wrap.gap-2 .main-btn{
    width: 100% !important;
    text-align: center;
  }

  /* 3) Footer centrado + sin shapes que tapan texto */
  #footer .footer-shape{ display:none !important; }
  #footer .footer-widget{ padding-bottom: 50px !important; }
  #footer .footer-about,
  #footer .footer-contact,
  #footer .footer-link-wrapper{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #footer .footer-about{ max-width: none !important; }
  #footer .footer-link{ justify-content:center !important; }
  #footer .footer-link-wrapper{ width: 100% !important; }
  #footer .footer-link .link{ padding-left:0 !important; }
  #footer .footer-contact .contact-list{ padding-left:0 !important; }
  #footer .footer-contact .contact-info{ justify-content:center !important; }
  #footer .footer-contact .info-content{ text-align:center !important; }
}

/* Opcional: pulso suave */
@keyframes gsPulse{
  0%{
    box-shadow: 0 18px 35px rgba(37,211,102,.30),
                0 0 0 0 rgba(37,211,102,.22);
  }
  70%{
    box-shadow: 0 18px 35px rgba(37,211,102,.35),
                0 0 0 14px rgba(37,211,102,0);
  }
  100%{
    box-shadow: 0 18px 35px rgba(37,211,102,.30),
                0 0 0 0 rgba(37,211,102,0);
  }
}
.gs-wa-float{ animation: gsPulse 2.2s infinite; }

@media (max-width: 480px){
  .gs-wa-float{
    left: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
  .gs-wa-float i{ font-size: 26px; }
}

/* =====================================================
   MOBILE POLISH v1 (fix: cut / too big / overflow)
===================================================== */

/* Prevent accidental horizontal scroll */
html, body{ overflow-x: hidden; }

/* Better tap targets + readable text on phones */
@media (max-width: 575px){
  /* Extra spacing so hero text doesn't stick to the header on mobile */
  .header-hero{ padding: 131px 0 64px !important; }
  .header-title{
    font-size: clamp(26px, 6.4vw, 32px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
  }
  .header-hero-content .text{
    font-size: 15px;
    line-height: 1.62;
    margin-top: 18px !important;
  }

  /* Hero buttons: full-width and not huge */
  .hero-cta{ flex-direction: column; align-items: stretch; gap: 10px !important; }
  .hero-cta .main-btn{
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 18px !important;
  }

  /* Sections tighter on mobile */
  .pt-110{ padding-top: 72px !important; }
  .pb-120{ padding-bottom: 72px !important; }
  .pt-70{ padding-top: 56px !important; }
  .pb-40{ padding-bottom: 30px !important; }

  /* Services cards spacing */
  .single-services{ padding: 28px 18px 22px !important; }
  .services-icon img{ width: 46px; height: 46px; }

  /* About card padding (fix overflow + looks premium) */
  #about .about-content{
    max-width: 100% !important;
    padding: 22px 18px !important;
  }

  /* Pricing card: reduce giant price */
  .gs-price{ font-size: 44px !important; }
  .gs-price-top{ padding: 26px 20px 14px 20px; }
  .gs-features{ padding: 18px 20px 8px 20px !important; }

  /* FAQ / Contact */
  .faq-card, .contact-card{ padding: 18px; }
  .faq-q{ font-size: 14px; }
  .faq-a{ font-size: 14px; }
}

/* =====================================================
   Gallery + Lightbox (moved from inline HTML)
===================================================== */
.gs-gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 991px){
  .gs-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px){
  .gs-gallery{ grid-template-columns: 1fr; }
}

.gs-g-item{
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06); /* opcional para que no se vea “vacío” */
}

.gs-g-item img{
  width: 100%;
  height: auto;
  object-fit: contain;     /* <- clave: NO recorta */
  aspect-ratio: auto;      /* <- quita el recorte forzado */
  transform: none !important; /* <- evita cualquier zoom */
}
.gs-g-item:hover img{ transform: scale(1.08); }

/* Disable hover zoom on touch devices (prevents weird “stuck zoom”) */
@media (hover: none){
  .gs-g-item:hover img{ transform: none; }
}

/* Lightbox */
.gs-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 99999;
  cursor: zoom-out;
}
.gs-lightbox.is-open{ display:flex; }

.gs-lb-img{
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.gs-lb-close{
  position:absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.gs-lb-close:hover{ background: rgba(255,255,255,.18); }

@media (max-width: 575px){
  .gs-lightbox{ padding: 14px; }
  .gs-lb-close{ top: 10px; right: 10px; width: 42px; height: 42px; }
}