@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --transform-fix: 'none'
}

@-webkit-keyframes animateGradient {
  0% {
    background-position: left bottom
  }

  50% {
    background-position: right top
  }

  100% {
    background-position: left bottom
  }
}

@keyframes animateGradient {
  0% {
    background-position: left bottom
  }

  50% {
    background-position: right top
  }

  100% {
    background-position: left bottom
  }
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased
}

html {
  font-size: 62.5%;
  overflow-x: hidden !important;
  letter-spacing: -.2px
}

body {
  font-family: 'Poppins', sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden !important
}

a {
  text-decoration: none !important
}

ul {
  list-style: none
}

.section-heading {
  font-weight: 600;
  font-size: 6rem;
  width: 68%;
  line-height: -4rem
}

@media (max-width: 991.98px) {
  .section-heading {
    font-size: 5rem;
    text-align: center;
    margin: 0 auto 5rem auto;
    width: 85%
  }
}

@media (max-width: 575.98px) {
  .section-heading {
    font-size: 4rem;
    width: 90%
  }
}

.color-black {
  color: #000
}

.paragraph {
  font-size: 1.6rem;
  line-height: 3rem
}

.paragraph.dark {
  color: #666b6d
}

.paragraph.white {
  color: white
}

.container {
  padding: 0
}

.fad.fa-lightbulb-on::before,
.fad.fa-search::before,
.fad.fa-angle-double-down::before {
  opacity: var(--fa-primary-opacity, 0.5)
}

.fad.fa-lightbulb-on::after,
.fad.fa-search::after,
.fad.fa-angle-double-down::after {
  opacity: var(--fa-secondary-opacity, 1)
}

.button {
  width: 27.1rem;
  height: 6.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: transparent;
  border: 4px solid #c7dffa;
  border-radius: 10rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #666b6d;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  letter-spacing: .1rem
}

.button i {
  margin-left: 1rem;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.button:focus,
.button:hover {
  background-color: #c7dffa;
  color: white;
  outline: 0
}

.button:focus i,
.button:hover i {
  color: white
}

.button__wrapper {
  margin: 0 auto
}

.button__wrapper .button:nth-child(n+2) {
  margin-left: 1.8rem
}

@media (max-width: 650px) {
  .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto
  }

  .button__wrapper {
    width: 100%
  }

  .button__wrapper .button:nth-child(n+2) {
    margin: 1rem auto 0 auto
  }
}

.social ul li {
  display: inline-block;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-size: 200% 200% !important;
  background-position: center bottom !important;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.social ul li:nth-child(n+2) {
  margin-left: .4rem
}

.social ul li.facebook {
  background: #9341d4;
  background: -webkit-gradient(linear, left bottom, left top, from(#9341d4), color-stop(50%, #d98efb), to(#9341d4));
  background: linear-gradient(0deg, #9341d4 0%, #d98efb 50%, #9341d4 100%);
  filter: drop-shadow(0px 5px 5px rgba(147, 65, 212, 0.4));
  -webkit-filter: drop-shadow(0px 5px 5px rgba(147, 65, 212, 0.4));
  -moz-filter: drop-shadow(0px 5px 5px rgba(147, 65, 212, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.social ul li.twitter {
  background: #ffb16b;
  background: -webkit-gradient(linear, left bottom, left top, from(#ffb16b), color-stop(50%, #ffdb8d), to(#ffb16b));
  background: linear-gradient(0deg, #ffb16b 0%, #ffdb8d 50%, #ffb16b 100%);
  filter: drop-shadow(0px 5px 5px rgba(212, 154, 93, 0.4));
  -webkit-filter: drop-shadow(0px 5px 5px rgba(212, 154, 93, 0.4));
  -moz-filter: drop-shadow(0px 5px 5px rgba(212, 154, 93, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.social ul li.linkedin {
  background: #19a5a1;
  background: -webkit-gradient(linear, left bottom, left top, from(#19a5a1), color-stop(50%, #63e8e4), to(#19a5a1));
  background: linear-gradient(0deg, #19a5a1 0%, #63e8e4 50%, #19a5a1 100%);
  filter: drop-shadow(0px 5px 5px rgba(108, 222, 220, 0.4));
  -webkit-filter: drop-shadow(0px 5px 5px rgba(108, 222, 220, 0.4));
  -moz-filter: drop-shadow(0px 5px 5px rgba(108, 222, 220, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.social ul li.youtube {
  background: #f2026b;
  background: -webkit-gradient(linear, left bottom, left top, from(#f2026b), color-stop(50%, #ff8aaf), to(#f2026b));
  background: linear-gradient(0deg, #f2026b 0%, #ff8aaf 50%, #f2026b 100%);
  filter: drop-shadow(0px 5px 5px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 5px 5px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 5px 5px rgba(245, 69, 144, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.social ul li a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 2rem;
  color: white
}

.social ul li:hover {
  background-position: center top !important
}

.download-buttons a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24.4rem;
  height: 8.1rem;
  background-color: grey;
  border-radius: 5rem;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  background-size: 200% 200% !important;
  background-position: center bottom !important
}

.download-buttons a i {
  font-size: 3.4rem;
  color: white
}

.download-buttons a .button-content {
  margin-left: 1.3rem;
  letter-spacing: .1rem
}

.download-buttons a .button-content h6 {
  font-size: 1.2rem;
  color: #ffd4e3
}

.download-buttons a .button-content span {
  display: block;
  font-size: 2rem;
  color: white;
  margin-top: .2rem;
  letter-spacing: initial
}

.download-buttons a:last-child .button-content h6 {
  color: #bbdef9
}

.download-buttons a.google-play {
  background: #f2026b;
  background: -webkit-gradient(linear, left bottom, left top, from(#f2026b), color-stop(50%, #ff8aaf), to(#f2026b));
  background: linear-gradient(0deg, #f2026b 0%, #ff8aaf 50%, #f2026b 100%);
  filter: drop-shadow(0px 10px 10px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 10px 10px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 10px 10px rgba(245, 69, 144, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.download-buttons a.apple-store {
  background: #1369ec;
  background: -webkit-gradient(linear, left bottom, left top, from(#1369ec), color-stop(50%, #65bef4), to(#1369ec));
  background: linear-gradient(0deg, #1369ec 0%, #65bef4 50%, #1369ec 100%);
  filter: drop-shadow(0px 10px 10px rgba(33, 120, 237, 0.4));
  -webkit-filter: drop-shadow(0px 10px 10px rgba(33, 120, 237, 0.4));
  -moz-filter: drop-shadow(0px 10px 10px rgba(33, 120, 237, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.download-buttons a:hover {
  background-position: center top !important
}

.comment_form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.comment_form>div {
  width: 50%
}

.comment_form>div:last-child {
  margin-left: 1rem
}

.comment_form .input-field {
  width: 100%
}

.comment_form .input-field:nth-child(n+2) {
  margin-top: 1rem
}

.comment_form textarea.input-field {
  padding-top: 2.2rem;
  height: 14rem;
  border-radius: 3rem;
  resize: none
}

.comment_form .button {
  margin-top: .6rem;
  width: 100%
}

@media (max-width: 767.98px) {
  .comment_form {
    display: block
  }

  .comment_form>div {
    display: block;
    width: 100%
  }

  .comment_form>div:last-child {
    margin-left: 0
  }

  .comment_form textarea.input-field {
    margin-top: 1rem
  }
}

.blog_hero__wrapper {
  padding: 17rem 0 0 0 !important
}

.blog_hero .row {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.blog_hero .row>div:last-child {
  margin-bottom: -1rem
}

.blog_hero h1 {
  font-size: 4rem;
  font-weight: 600;
  color: #000
}

.blog_hero ul {
  display: inline;
  margin: 0 4.5rem 1.5rem 0;
  position: relative;
  bottom: -1rem
}

.blog_hero ul li {
  display: inline-block
}

.blog_hero ul li a {
  font-size: 1.4rem;
  font-weight: 500;
  color: #666b6d;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.blog_hero ul li a:hover {
  color: #f2026b
}

.blog_hero ul li a i {
  margin-right: 1rem
}

.blog_hero ul li:nth-child(n+2) {
  margin-left: 1rem
}

.blog_hero .icon {
  width: 14.5rem;
  height: 14.5rem;
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #f2026b;
  background: linear-gradient(45deg, #f2026b 0%, #ff8aaf 100%);
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  filter: drop-shadow(0px 20px 20px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 20px 20px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 20px 20px rgba(245, 69, 144, 0.4));
  position: relative;
  bottom: -1.5rem
}

.blog_hero .icon i {
  font-size: 4.8rem;
  color: white
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  .blog_hero__wrapper {
    padding: 18.4rem 2rem 0 2rem
  }
}

@media (max-width: 991.98px) {
  .blog_hero .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }

  .blog_hero ul {
    display: block;
    bottom: initial;
    margin: 2rem auto;
    text-align: center
  }

  .blog_hero h1 {
    text-align: center
  }
}

.blog {
  padding: 15rem 0
}

.blog__header {
  width: 100%;
  margin-bottom: 5rem
}

.blog__header .search {
  position: relative;
  width: 33rem
}

.blog__header .search .input-field {
  border-color: #f0f7fc;
  padding-left: 3rem
}

.blog__header .search i {
  font-size: 2rem;
  color: #969c9e;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  right: 3.4rem;
  cursor: pointer
}

.blog__header .row>div:last-child {
  margin-left: auto
}

.blog .button {
  margin: 10rem auto 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.blog .button {
  border: 4px solid #ffdbe8;
  background: #1369ec;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 105, 236, 0)), color-stop(50%, rgba(255, 177, 107, 0)), color-stop(51%, #f2026b), to(#ff8aaf));
  background: linear-gradient(0deg, rgba(19, 105, 236, 0) 0%, rgba(255, 177, 107, 0) 50%, #f2026b 51%, #ff8aaf 100%);
  background-size: 200% 200%;
  background-position: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  backface-visibility: hidden;
  perspective: 1000
}

.blog .button i {
  color: #f2046c;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.blog .button:focus,
.blog .button:hover {
  background-color: #ffdbe8
}

.blog .button:focus i,
.blog .button:hover i {
  color: white
}

.blog .button:hover {
  background-position: center top;
  border: none;
  filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4))
}

.blog__single {
  width: 100%;
  height: 65.7rem;
  border-radius: 3rem;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  background-position: center center;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -moz-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2))
}

.blog__single-info {
  background-color: white;
  padding: 4rem 4.4rem 2.8rem 4.4rem;
  border-radius: 2rem;
  position: absolute;
  width: 34rem
}

.blog__single-info h3 {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 3rem;
  color: #000
}

.blog__single-info h4 {
  font-size: 1.4rem;
  color: #666b6d;
  margin: 1.8rem 0 1.5rem 0;
  font-weight: 400
}

.blog__single-info h4 span {
  margin: 0 1.2rem;
  color: #cad1d4
}

.blog__single-image {
  width: 100%;
  height: 100%
}

.blog__single-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 3rem;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.blog__single:hover {
  background-color: black
}

.blog__single:hover .blog__single-image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.blog .col-lg-4 .blog__single-info {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%)
}

.blog .col-lg-8 .blog__single-info {
  bottom: 1rem;
  right: 1rem
}

.blog .col-lg-8.left .blog__single-info {
  right: initial;
  left: 1rem
}

.blog__content .row>div:nth-child(n+3) {
  margin-top: 3rem
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  .blog__header .row>.col-lg-3:nth-child(2) {
    margin-left: 3rem
  }
}

@media (max-width: 991.98px) {
  .blog {
    padding: 5rem 0
  }

  .blog__header .dropdown-wrapper {
    width: 100%
  }

  .blog__header .date__dropdown {
    margin-top: 2rem
  }

  .blog__header .search {
    margin-top: 2rem;
    width: 100%
  }

  .blog__header .search input {
    width: 100%
  }

  .blog__content .row>div:nth-child(n+3) {
    margin-top: initial
  }

  .blog__content .row>div {
    margin-top: 3rem !important
  }

  .blog .col-lg-8 .blog__single-info {
    bottom: 1rem;
    right: initial;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
  }

  .blog .col-lg-8.left .blog__single-info {
    right: initial;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
  }

  .blog__single-info {
    width: calc(100% - 2rem)
  }
}

@media (max-width: 576px) {
  .blog {
    padding: 10rem 3rem
  }
}

.dropdown-wrapper {
  position: relative;
  width: 27rem
}

.dropdown-wrapper .dropdown-box {
  border: 4px solid #f0f7fc;
  border-radius: 2rem;
  width: 100%;
  padding: 2rem;
  z-index: 1000;
  position: absolute;
  top: 10rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  background-color: white
}

.dropdown-wrapper .dropdown-box.shown {
  top: 8.5rem;
  visibility: visible;
  opacity: 1
}

.dropdown-wrapper .dropdown-box::before {
  content: "";
  display: block;
  position: absolute;
  background: url(../images/webp/corner.png) no-repeat;
  width: 3.4rem;
  height: 4.3rem;
  background-size: cover;
  top: -2.2rem;
  right: -.4rem
}

.dropdown-wrapper .dropdown-box ul {
  background-color: white
}

.dropdown-wrapper .dropdown-box ul li {
  font-size: 1.6rem;
  color: #666b6d;
  border-radius: 2rem;
  position: relative;
  padding: 1rem 0 1rem 4.7rem;
  cursor: pointer;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.dropdown-wrapper .dropdown-box ul li>a {
  font-size: inherit;
  color: inherit;
  width: 100%
}

.dropdown-wrapper .dropdown-box ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 1.4rem;
  position: absolute;
  top: 50%;
  left: 1.7rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display: inline-block;
  color: #cacdce
}

.dropdown-wrapper .dropdown-box ul li:nth-child(n+2) {
  margin-top: 1rem
}

.dropdown-wrapper .dropdown-box ul li.selected,
.dropdown-wrapper .dropdown-box ul li:hover {
  color: #000;
  background-color: #f0f7fc;
  font-weight: 600
}

.dropdown-wrapper .dropdown-box ul li:hover::before {
  color: #f41976
}

.dropdown-wrapper .dropdown-info {
  cursor: pointer;
  border: 4px solid #f0f7fc;
  border-radius: 3rem;
  width: 100%;
  height: 6.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 3rem;
  z-index: 0
}

.dropdown-wrapper .dropdown-info h6 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #404243;
  width: 100%;
  height: 100%;
  line-height: 5.8rem
}

.dropdown-wrapper .dropdown-info i {
  font-size: 2rem;
  color: #969c9e;
  position: relative;
  right: 3rem
}

.blog_single {
  width: 100vw
}

.blog_single__wrapper {
  width: 100%
}

.blog_single__thumbnail {
  padding-top: 10rem;
  filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -moz-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix)
}

.blog_single__thumbnail img {
  width: 100%
}

.blog_single__content {
  overflow: visible;
  padding-bottom: 13rem;
  position: relative
}

.blog_single__content::after {
  content: "";
  clear: both;
  display: table
}

.blog_single__content>*:not(.grid) {
  width: calc(100% - 40rem);
  margin: 0 auto
}

.blog_single__content h1 {
  font-size: 6rem;
  font-weight: 600;
  color: #000;
  letter-spacing: -.4rem;
  margin-top: 4rem !important
}

.blog_single__content h3 {
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  letter-spacing: -.2rem;
  margin-top: 4rem !important
}

.blog_single__content h4 {
  font-size: 1.6rem;
  color: #666b6d;
  margin: 3rem auto 3rem auto !important;
  font-weight: 400
}

.blog_single__content h4 span {
  margin: 0 1.2rem;
  color: #cad1d4
}

.blog_single__content .social {
  position: absolute;
  top: 24rem;
  left: 10%
}

.blog_single__content .social ul li {
  display: block
}

.blog_single__content .social ul li:not(:first-child) {
  margin: 2rem 0 0 0
}

.blog_single__content p {
  font-size: 1.8rem;
  line-height: 3.4rem;
  color: #666b6d
}

.blog_single__content p:not(:first-child) {
  margin-top: 4rem
}

.blog_single__content .grid+.paragraph {
  margin-top: 2rem
}

.blog_single__content--images/webp {
  width: calc(100% + 40rem);
  float: left;
  margin-left: -20rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background-clip: content-box;
  position: relative
}

.blog_single__content .grid {
  margin-top: 5rem
}

.blog_single__content .grid .paragraph {
  margin-top: 0
}

.blog_single__content .grid-item {
  width: 31%;
  margin-bottom: 3rem
}

.blog_single__content img.grid-item {
  border-radius: 3rem;
  filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -moz-filter: 0px 20px 10px rgba(75, 80, 84, 0.2);
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix)
}

.blog_single__content .grid-item--width2 {
  width: 66%
}

.blog_single__content .grid-item--width3 {
  width: 50%
}

.blog_single__comment {
  width: calc(100% - 40rem);
  margin: 0 auto;
  display: block;
  padding: 10rem 0
}

.blog_single__comment h3 {
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  letter-spacing: -.2rem;
  margin-bottom: 5rem
}

.blog_single__comment--single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative
}

.blog_single__comment--single:nth-child(n+2) {
  margin-top: 1rem
}

.blog_single__comment--single .image {
  width: 10rem;
  height: 9.8rem
}

.blog_single__comment--single .image img {
  width: 100%;
  height: 100%
}

.blog_single__comment--single .comment {
  width: calc(100% - 11rem);
  border: 4px solid #f0f7fc;
  padding: 3.6rem 4rem;
  border-radius: 2rem;
  position: relative
}

.blog_single__comment--single .comment::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url(../images/webp/comment-corner.png);
  background-repeat: no-repeat;
  width: 2.2rem;
  height: 1.9rem;
  background-size: cover;
  top: -0.4rem;
  left: -1.3rem
}

.blog_single__comment--single .comment .name {
  font-size: 2rem;
  font-weight: 600;
  color: #000;
  line-height: 3rem;
  letter-spacing: -.1rem
}

.blog_single__comment--single .comment .date {
  font-size: 1.4rem;
  color: #666b6d;
  line-height: 3rem
}

.blog_single__comment--single .comment .reply-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 8.9rem;
  height: 4.1rem;
  border-radius: 3rem;
  border: 4px solid #f0f7fc;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  background: #1369ec;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 105, 236, 0)), color-stop(50%, rgba(255, 177, 107, 0)), color-stop(51%, #f2026b), to(#ff8aaf));
  background: linear-gradient(0deg, rgba(19, 105, 236, 0) 0%, rgba(255, 177, 107, 0) 50%, #f2026b 51%, #ff8aaf 100%);
  background-size: 200% 200%;
  background-position: center bottom;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix)
}

.blog_single__comment--single .comment .reply-button:hover {
  background-color: transparent;
  filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  background-position: center top;
  border: none
}

.blog_single__comment--single .comment .reply-button:hover a {
  color: white
}

.blog_single__comment--single .comment .reply-button a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #666b6d;
  letter-spacing: .1rem;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.blog_single__comment--single.reply {
  width: calc(100% - 11rem);
  margin-left: auto
}

.blog_single__comment--single.reply .comment {
  background-color: #f0f7fc
}

.blog_single__comment--single.reply .comment::before {
  background-image: url(../images/webp/reply-corner.png)
}

.blog_single__comment--single.reply .comment .reply-button {
  background-color: white;
  border-color: white
}

.blog_single__comment--single.reply .comment .reply-button:hover a {
  color: white
}

.blog_single .blog_related {
  width: 100vw
}

.blog_single .blog_related__wrapper {
  background-color: #f0f7fc;
  padding: 10rem 0
}

.blog_single .blog_related__header {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 4rem
}

.blog_single .blog_related__header .screenshot-nav-next {
  margin-left: 1rem
}

.blog_single .blog_related__header h3 {
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  letter-spacing: -.4px
}

.blog_single .blog_related__header i {
  font-size: 3rem
}

.blog_single .blog_related-slider {
  width: 100% !important
}

.blog_single .blog_related-slider a {
  display: block;
  height: 33.1rem
}

.blog_single .blog_related-slide {
  height: 100%
}

.blog_single .blog_related-single {
  height: 100%
}

.blog_single .blog_related-single .blog__single-info {
  width: 30rem;
  height: calc(100% - 2rem);
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 1rem;
  padding: 4.5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.blog_single .comment_form {
  padding-bottom: 10rem
}

.blog_single .comment_form__wrapper {
  width: calc(100% - 40rem);
  margin: 0 auto
}

.blog_single .comment_form__wrapper h3 {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -.4px;
  color: #000;
  margin-bottom: 5rem
}

.blog_single .comment_form__wrapper .input-field {
  border-color: #f0f7fc
}

.blog_single .comment_form__wrapper .input-field:focus {
  border-color: #c9deed
}

.blog_single .comment_form__wrapper .button {
  border-color: #ffdbe8;
  cursor: pointer;
  background: #1369ec;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 105, 236, 0)), color-stop(50%, rgba(255, 177, 107, 0)), color-stop(51%, #f2026b), to(#ff8aaf));
  background: linear-gradient(0deg, rgba(19, 105, 236, 0) 0%, rgba(255, 177, 107, 0) 50%, #f2026b 51%, #ff8aaf 100%);
  background-size: 200% 200%;
  background-position: center bottom;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.blog_single .comment_form__wrapper .button i {
  color: #f2046c
}

.blog_single .comment_form__wrapper .button:hover {
  background-position: center top;
  border: none;
  filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 10px 20px rgba(245, 69, 144, 0.4))
}

.blog_single .comment_form__wrapper .button:hover i {
  color: white
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  .blog_single__content>*:not(.grid) {
    width: calc(100% - 20rem);
    margin: 0 auto
  }

  .blog_single__content .social {
    left: 0
  }

  .blog_single__comment {
    width: calc(100% - 20rem)
  }

  .blog_single .comment_form__wrapper {
    width: calc(100% - 20rem)
  }
}

@media (max-width: 991.98px) {
  .blog_single__content {
    padding-bottom: 5rem
  }

  .blog_single__content>*:not(.grid) {
    width: 100%;
    margin: 0
  }

  .blog_single__content h1 {
    font-size: 4.5rem;
    letter-spacing: -.2rem
  }

  .blog_single__content .social {
    position: static;
    top: initial;
    left: initial;
    margin-top: 5rem
  }

  .blog_single__content .social ul li {
    display: inline-block
  }

  .blog_single__content .social ul li:not(:first-child) {
    margin-left: 1rem;
    margin-top: 0
  }

  .blog_single__content img.grid-item {
    -o-object-fit: cover;
    object-fit: cover;
    width: 30%;
    height: 30rem
  }

  .blog_single__content img.grid-item--width2 {
    width: 30%
  }

  .blog_single__content .paragraph.grid-item {
    width: 100%
  }

  .blog_single__comment {
    width: 100%
  }

  .blog_single .comment_form__wrapper {
    width: 100%
  }
}

@media (max-width: 767.98px) {
  .blog_single img.grid-item {
    width: 100%;
    -o-object-position: center 20%;
    object-position: center 20%
  }
}

@media (max-width: 575.98px) {
  .blog_single__content {
    padding: 0 2rem 13rem 2rem
  }

  .blog_single__content .paragraph {
    font-size: 1.6rem;
    line-height: 3rem
  }

  .blog_single .blog_related__wrapper {
    padding: 5rem 3rem
  }

  .blog_single .blog_related__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }

  .blog_single .blog_related__header .related-post-nav {
    margin-top: 2rem
  }

  .blog_single__comment {
    padding: 5rem 3rem
  }

  .blog_single__comment--single.reply {
    width: 100%
  }

  .blog_single .comment_form__wrapper {
    padding: 0 3rem
  }
}

.preloader {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  background: #ff00ae;
  background: linear-gradient(45deg, #ff00ae 0%, #9100ff 50%, #ff00ae 100%);
  background-size: 200% 200%;
  background-position: left bottom;
  -webkit-animation-name: animateGradient;
  animation-name: animateGradient;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.preloader img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

body.loaded .preloader {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%)
}

.header {
  position: absolute;
  top: 5rem;
  z-index: 100;
  background-color: transparent;
  padding: 3.6rem 0 5rem 0;
  width: 100%
}

.header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%
}

.header__nav-primary {
  margin-bottom: 0
}

.header__nav-primary>li {
  list-style: none;
  display: inline-block
}

.header__nav-primary>li:first-child a {
  color: #f41976
}

.header__nav-primary>li:first-child i::before {
  opacity: var(--var-primary-opacity, 0.5)
}

.header__nav-primary>li:first-child i::after {
  opacity: var(--var-secondary-opacity, 1)
}

.header__nav-primary>li:nth-child(n+2) {
  margin-left: 3rem
}

.header__nav-primary>li>a {
  font-size: 1.6rem;
  color: #666b6d;
  font-weight: 500 !important
}

@media (min-width: 991.98px) {
  .header__nav-primary>li>a {
    position: relative
  }

  .header__nav-primary>li>a::before {
    content: "";
    display: block;
    width: 0;
    height: .15rem;
    background-color: #666b6d;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transition: all .25s ease;
    transition: all .25s ease
  }

  .header__nav-primary>li>a:hover::before {
    width: calc(100% - 2rem)
  }
}

.header__nav .nav__dropdown {
  width: auto;
  z-index: 100
}

.header__nav .nav__dropdown-info {
  border: 0;
  width: auto;
  height: auto;
  border-radius: initial;
  padding-left: 0;
  margin: 0;
  z-index: 100;
  position: relative
}

@media (min-width: 991.98px) {
  .header__nav .nav__dropdown-info::after {
    content: "";
    position: absolute;
    bottom: -2rem;
    width: 100%;
    height: 2rem;
    background-color: transparent;
    display: block
  }
}

.header__nav .nav__dropdown-box {
  width: 25rem;
  display: block;
  right: 0
}

.header__nav .nav__dropdown-box li a {
  font-size: 1.6rem;
  color: #666b6d;
  border-radius: 2rem;
  position: relative;
  padding: 1rem 0 1rem 2rem;
  cursor: pointer;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  display: block
}

.header__nav .nav__dropdown-box li:hover a {
  color: #000;
  background-color: #f0f7fc;
  font-weight: 600
}

.header__nav .nav__dropdown-box.shown {
  top: 0
}

@media (min-width: 991.98px) {
  .header__nav .nav__dropdown-box.shown {
    top: 0rem !important;
    visibility: visible !important;
    opacity: 1 !important
  }
}

@media (min-width: 991.98px) {
  .header__nav .nav__dropdown:hover .nav__dropdown-box {
    top: 0rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-transform: translateY(5rem);
    transform: translateY(5rem)
  }
}

.header__nav span {
  display: none;
  position: absolute;
  top: 8%;
  right: 5%;
  font-size: 3rem;
  color: white;
  font-weight: 900 !important;
  cursor: pointer
}

@media (min-width: 991.98px) and (max-width: 1126px) {
  .header__nav {
    margin-left: 0
  }

  .header__nav li a {
    padding: 0 2rem/2
  }
}

.header__bars {
  width: 5rem;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  display: none;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  cursor: pointer;
  padding: 1rem;
  border: 1px solid transparent
}

.header__bars::after {
  display: table;
  clear: both
}

.header__bars:hover {
  border: 1px solid white
}

.header__bars-bar {
  height: .2rem;
  display: block;
  background-color: #000;
  margin: .3rem 0;
  float: right
}

.header__bars-bar-1 {
  width: 100%
}

.header__bars-bar-2 {
  width: 70%
}

.header__bars-bar-3 {
  width: 40%
}

@media (min-width: 991.98px) and (max-width: 1270px) {
  .header .container {
    padding: 0 2rem
  }

  .header__nav-primary li:first-child {
    margin-right: 2rem
  }

  .header__nav-primary li:nth-child(n+3) {
    margin-left: 1.5rem
  }
}

@media (min-width: 991.98px) and (max-width: 1060px) {
  .header .container {
    padding: 0 4rem
  }
}

.header.fixed {
  position: fixed;
  top: 0;
  background-color: white
}

@media (max-width: 991.98px) {
  .header__wrapper {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 5rem
  }

  .header__nav {
    width: 100vw;
    height: 130vh;
    width: 100%;
    position: absolute;
    top: -5rem;
    right: 100%;
    overflow: hidden !important;
    background: #9341d4;
    background: linear-gradient(45deg, #9341d4 0%, #d98efb 100%);
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    padding-top: 15%
  }

  .header__nav ul {
    display: block;
    width: 100%;
    margin-top: 5rem
  }

  .header__nav li {
    display: block;
    width: 100%;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
  }

  .header__nav li a {
    font-size: 2rem;
    padding: 2.1rem 4.4rem;
    display: block;
    width: 100%;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    color: white
  }

  .header__nav li i {
    color: white
  }

  .header__nav li:nth-child(n+2) {
    margin-left: 0
  }

  .header__nav li:hover {
    background-color: white
  }

  .header__nav li:hover a,
  .header__nav li:hover i {
    color: #9341d4
  }

  .header__nav .nav__dropdown-info {
    padding-left: 4.4rem
  }

  .header__nav .nav__dropdown-box {
    position: absolute;
    width: 100%;
    border-radius: initial;
    border: 0
  }

  .header__nav .nav__dropdown-box::before {
    display: none
  }

  .header__nav .nav__dropdown-box li a {
    font-size: 1.8rem
  }

  .header__nav .nav__dropdown-box.shown {
    top: 2rem
  }

  .header__nav span {
    display: block
  }

  .header__nav-primary {
    margin-left: 0
  }

  .header__nav .social {
    display: none
  }

  .header__bars {
    display: block
  }
}

@media (max-width: 640px) {
  .header__wrapper {
    padding: 0 5rem
  }
}

.header-2 {
  top: 0;
  padding: 4rem 0 4rem 0;
  background-color: white
}

@media (max-width: 991.98px) {
  .header-2 .header__nav {
    top: 0
  }
}

.header-2.fixed {
  position: fixed;
  top: 0;
  background-color: white
}

.customize-support .header {
  top: 8rem
}

.customize-support .header-2 {
  top: 3rem
}

.hero {
  width: 100vw;
  margin-top: 5rem
}

.hero__wrapper {
  width: calc(100% - 10rem);
  margin: 0 auto;
  border-radius: 3rem;
  background-color: #f0f7fc;
  padding: 18.4rem 0 9.9rem 0
}

.hero .main-heading {
  font-size: 8rem;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.4rem;
  width: 100%
}

.hero .paragraph {
  font-size: 2.4rem;
  line-height: 4rem;
  color: #474b4c;
  margin: 3.6rem 0 3.5rem 0
}

.hero .paragraph span {
  font-weight: 700
}

.hero .download-buttons a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.hero .download-buttons a:last-child {
  margin-left: 2rem
}

.hero .hero-img::before {
  content: "";
  display: block;
  position: absolute;
  width: 75.3rem;
  height: 75.3rem;
  border-radius: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #9341d4;
  background: linear-gradient(45deg, #9341d4 0%, #d98efb 50%, #9341d4 100%);
  background-size: 200% 200%;
  background-position: left bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  filter: drop-shadow(0px 30px 20px rgba(147, 65, 212, 0.4));
  -webkit-filter: drop-shadow(0px 30px 20px rgba(147, 65, 212, 0.4));
  -moz-filter: drop-shadow(0px 30px 20px rgba(147, 65, 212, 0.4));
  -webkit-animation-name: animateGradient;
  animation-name: animateGradient;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  .hero__wrapper {
    padding: 18.4rem 1rem 9.9rem 1rem
  }

  .hero .main-heading {
    font-size: 6rem
  }

  .hero .paragraph {
    font-size: 2rem;
    line-height: 3.6rem
  }

  .hero .hero-img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
  }

  .hero .hero-img::before {
    -webkit-transform: scale(0.7) translateX(-50%);
    transform: scale(0.7) translateX(-50%);
    top: 0;
    left: 30%
  }

  .hero .download-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }

  .hero .download-buttons a:last-child {
    margin-left: .5rem
  }
}

@media (max-width: 991.98px) {
  .hero__wrapper {
    width: calc(100% - 5rem)
  }

  .hero .main-heading {
    font-size: 5.5rem;
    text-align: center;
    margin-top: 3rem
  }

  .hero .paragraph {
    font-size: 2rem;
    line-height: 3.6rem;
    text-align: center
  }

  .hero .download-buttons {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 0 auto
  }

  .hero .hero-img {
    width: 100%;
    margin-top: 5rem
  }

  .hero .hero-img::before {
    -webkit-transform: scale(0.8) translate(-50%, 0);
    transform: scale(0.8) translate(-50%, 0);
    top: 0;
    left: 40%
  }
}

@media (max-width: 767.98px) {
  .hero .main-heading {
    font-size: 5rem
  }

  .hero .paragraph {
    font-size: 1.8rem;
    line-height: 3.4rem
  }

  .hero .download-buttons a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }

  .hero .download-buttons a:last-child {
    margin-left: 0rem;
    margin-top: 1rem
  }

  .hero .hero-img {
    width: 100%
  }

  .hero .hero-img::before {
    -webkit-transform: scale(0.6) translate(-50%, 0);
    transform: scale(0.6) translate(-50%, 0);
    top: 0;
    left: 22.5%
  }
}

@media (max-width: 575.98px) {
  .hero .col-lg-6 {
    height: auto
  }

  .hero__wrapper {
    padding: 10rem 0
  }

  .hero .hero-img {
    width: 100% !important
  }

  .hero .hero-img img {
    width: 50% !important;
    height: 50% !important;
    -o-object-fit: cover !important;
    object-fit: cover !important
  }

  .hero .hero-img::before {
    -webkit-transform: scale(1) translate(-50%, 0) !important;
    transform: scale(1) translate(-50%, 0) !important;
    left: 50% !important;
    top: 10% !important;
    width: 40rem;
    height: 40rem
  }
}

.hero-2 {
  margin-top: 11.3rem
}

.hero-2 .hero__wrapper {
  padding: 10rem 0
}

.feature {
  width: 100vw;
  padding: 15rem 0
}

.feature .section-heading {
  margin-bottom: 5rem
}

.feature__box {
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.feature__box--2,
.feature__box--4 {
  margin-top: 10rem
}

.feature__box--2:hover,
.feature__box--4:hover {
  margin-top: 0
}

.feature__box--1:hover,
.feature__box--3:hover {
  margin-top: 10rem
}

.feature__box--1 .feature__box__wrapper {
  background-color: #efdff7
}

.feature__box--2 .feature__box__wrapper {
  background-color: #ffe8c6
}

.feature__box--3 .feature__box__wrapper {
  background-color: #d0f3f2
}

.feature__box--4 .feature__box__wrapper {
  background-color: #ffdae8
}

.feature__box .icon {
  width: 24.2rem;
  height: 24.2rem;
  margin: 0 auto;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.feature__box .icon-1 {
  background: #9341d4;
  background: linear-gradient(45deg, #9341d4 0%, #d98efb 100%);
  filter: drop-shadow(0px 40px 15px rgba(147, 65, 212, 0.4));
  -webkit-filter: drop-shadow(0px 40px 15px rgba(147, 65, 212, 0.4));
  -moz-filter: drop-shadow(0px 40px 15px rgba(147, 65, 212, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.feature__box .icon-2 {
  background: #ffdb8d;
  background: linear-gradient(45deg, #ffb16b 0%, #ffdb8d 100%);
  filter: drop-shadow(0px 40px 15px rgba(255, 186, 114, 0.4));
  -webkit-filter: drop-shadow(0px 40px 15px rgba(255, 186, 114, 0.4));
  -moz-filter: drop-shadow(0px 40px 15px rgba(255, 186, 114, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.feature__box .icon-3 {
  background: #63e8e4;
  background: linear-gradient(45deg, #19a5a1 0%, #63e8e4 100%);
  filter: drop-shadow(0px 40px 15px rgba(79, 188, 186, 0.4));
  -webkit-filter: drop-shadow(0px 40px 15px rgba(79, 188, 186, 0.4));
  -moz-filter: drop-shadow(0px 40px 15px rgba(79, 188, 186, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.feature__box .icon-4 {
  background: #ff8aaf;
  background: linear-gradient(45deg, #f2026b 0%, #ff8aaf 100%);
  filter: drop-shadow(0px 40px 15px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 40px 15px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 40px 15px rgba(245, 69, 144, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.feature__box .icon i {
  font-size: 8rem;
  color: white
}

.feature__box__wrapper {
  width: 100%;
  padding: 5.7rem .5rem .5rem .5rem;
  border-radius: 2.5rem;
  margin-top: 5rem
}

.feature__box--content {
  background-color: white;
  position: relative;
  padding: 3.7rem 2rem 2.1rem 2rem;
  border-radius: 2rem;
  text-align: center
}

.feature__box--content::before {
  content: "";
  width: 4.8rem;
  height: 2.2rem;
  background: url(../images/webp/arrow.png) no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%)
}

.feature__box--content h3 {
  font-size: 2.2rem;
  font-weight: 600;
  width: 80%;
  margin: 0 auto 3.4rem auto
}

@media (max-width: 991.98px) {
  .feature__box {
    margin-top: 5rem !important
  }
}

@media (max-width: 575.98px) {
  .feature {
    padding: 10rem 2rem
  }
}

.video {
  width: 100vw;
  margin-top: -5rem
}

.video__wrapper {
  width: 100%;
  overflow: hidden;
  position: relative
}

.video .container {
  position: relative
}

.video__background {
  margin: 0 auto -13.1rem auto;
  width: auto;
  text-align: center
}

.video__background img.phone {
  z-index: 10;
  position: relative
}

.video__background img:first-child,
.video__background img:last-child {
  position: absolute;
  z-index: 0
}

.video__background img:first-child {
  bottom: -4rem;
  left: -8rem
}

.video__background img:last-child {
  bottom: 0;
  right: -4rem
}

.video__background::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -10rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 5;
  width: 77.6rem;
  height: 77.6rem;
  border-radius: 50%;
  background: #9341d4;
  background: linear-gradient(45deg, #9341d4 0%, #d98efb 50%, #9341d4 100%);
  background-size: 200% 200%;
  background-position: left bottom;
  -webkit-animation-name: animateGradient;
  animation-name: animateGradient;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.video__play {
  z-index: 100
}

.video__play>button {
  width: 17.1rem;
  height: 17.1rem;
  border-radius: 50%;
  border: 0;
  outline: 0;
  background: #1369ec;
  cursor: pointer;
  background: linear-gradient(45deg, #1369ec 0%, #65bef4 50%, #1369ec 100%);
  background-size: 200% 200%;
  background-position: left bottom;
  position: absolute;
  top: 10rem;
  left: 20%;
  z-index: 20;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  filter: drop-shadow(0px 40px 15px rgba(34, 120, 237, 0.4));
  -webkit-filter: drop-shadow(0px 40px 15px rgba(34, 120, 237, 0.4));
  -moz-filter: drop-shadow(0px 40px 15px rgba(34, 120, 237, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.video__play>button:hover {
  background-position: right top
}

.video__play>button i {
  font-size: 6.5rem;
  color: white;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.video__play .modal-close {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 5rem;
  height: 5rem;
  z-index: 50
}

.video__play .modal-close:hover button {
  background-color: white
}

.video__play .modal-close:hover button i {
  color: #c274ee
}

.video__play .modal-close button {
  border: 0;
  background-color: #c274ee;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  border: 2px solid #c274ee
}

.video__play .modal-close button i {
  font-size: 2rem;
  color: white;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.video__play iframe {
  width: 100%;
  height: 100%;
  border: 0
}

.video__play .yt-video>* {
  width: 100% !important;
  height: 100% !important
}

.video__play .yt-video button {
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important
}

.video__play .modal-body {
  padding: 0
}

.video__play .modal-content {
  height: 30rem;
  padding: 0
}

@media (max-width: 991.98px) {
  .video__background::before {
    -webkit-transform: translateX(-50%) scale(0.7);
    transform: translateX(-50%) scale(0.7)
  }

  .video__background .phone {
    width: 100%
  }
}

@media (max-width: 767.98px) {
  .video__background::before {
    -webkit-transform: translateX(-50%) scale(0.6);
    transform: translateX(-50%) scale(0.6);
    top: 3rem
  }

  .video__background .phone {
    width: 100%
  }

  .video__play>button {
    width: 12.1rem;
    height: 12.1rem
  }

  .video__play>button i {
    font-size: 5rem
  }
}

.growth {
  width: 100vw
}

.growth__wrapper {
  background-color: #f0f7fc;
  padding: 15rem 0;
  width: calc(100% - 10rem);
  margin: 0 auto;
  border-radius: 3rem
}

.growth .section-heading {
  text-align: center;
  margin: 0 auto 5rem auto
}

.growth__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.growth__box .icon {
  width: 11.9rem;
  height: 11.9rem;
  background: #daecf9;
  background: -webkit-gradient(linear, left bottom, left top, from(#daecf9), to(#fff));
  background: linear-gradient(0deg, #daecf9 0%, #fff 100%);
  border-radius: 50%;
  filter: drop-shadow(0px 30px 20px rgba(42, 129, 238, 0.2));
  -webkit-filter: drop-shadow(0px 30px 20px rgba(42, 129, 238, 0.2));
  -moz-filter: drop-shadow(0px 30px 20px rgba(42, 129, 238, 0.2));
  position: relative;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.growth__box .icon i {
  font-size: 5rem;
  color: #3890f0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.growth__box .content {
  width: 72%;
  background-color: white;
  position: relative;
  border-radius: 2rem;
  padding: 3.7rem 6.2rem 2.5rem 4rem
}

.growth__box .content h3 {
  font-size: 2.2rem;
  font-weight: 600;
  width: 80%
}

.growth__box:hover .icon {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

@media (min-width: 768px) {
  .growth .row>div:nth-child(odd) .growth__box .content::before {
    content: "";
    width: 4.8rem;
    height: 2.2rem;
    background: url(../images/webp/arrow.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    left: -3.3rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    -webkit-transform: translateY(-50%) rotate(-90deg)
  }

  .faqs-section {
    padding: 10px !important;
  }

  .footer {
    padding: 10px !important;

  }

  .hide-text {
    font-size: 1.2 rem !important;
  }





}

@media (min-width: 991.98px) {
  .growth .row>div:nth-child(even) .growth__box .icon {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
  }

  .growth .row>div:nth-child(even) .growth__box .content {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
  }

  .growth .row>div:nth-child(even) .growth__box .content::after {
    content: "";
    width: 4.8rem;
    height: 2.2rem;
    background: url(../images/webp/arrow.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    right: -3.3rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg)
  }
}

.growth .row>div:nth-child(n+3) {
  margin-top: 3rem
}

.growth .button__wrapper {
  margin-top: 5rem
}

.growth .button__wrapper a {
  background: #1369ec;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 105, 236, 0)), color-stop(50%, rgba(255, 177, 107, 0)), color-stop(51%, #1369ec), to(#65bef4));
  background: linear-gradient(0deg, rgba(19, 105, 236, 0) 0%, rgba(255, 177, 107, 0) 50%, #1369ec 51%, #65bef4 100%);
  background-size: 200% 200%;
  background-position: center bottom;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.growth .button__wrapper a:hover {
  background-position: center top;
  border: none;
  filter: drop-shadow(0px 10px 20px rgba(33, 120, 237, 0.4));
  -webkit-filter: drop-shadow(0px 10px 20px rgba(33, 120, 237, 0.4));
  -moz-filter: drop-shadow(0px 10px 20px rgba(33, 120, 237, 0.4))
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  .growth__box .content {
    width: 68%
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .growth__wrapper {
    padding: 5rem 2rem
  }

  .growth__box .content {
    width: 75%
  }

  .growth .row>div:nth-child(n+1) {
    margin-top: 5rem
  }

  .growth .row>div:nth-child(even) .growth__box .content::before {
    content: "";
    width: 4.8rem;
    height: 2.2rem;
    background: url(../images/webp/arrow.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    left: -3.3rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    -webkit-transform: translateY(-50%) rotate(-90deg)
  }
}

@media (max-width: 768px) {
  .growth__wrapper {
    width: calc(100% - 5rem);
    padding: 5rem 2rem
  }

  .privacy-text {
    padding: 10px;
  }

  .faqs-section {
    padding: 10px !important;
  }

  .growth__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }

  .img-fluid {
    max-width: 100% !important;
    height: auto;
  }

  .growth__box .content {
    width: 100%;
    margin-top: 5rem;
    text-align: center
  }

  .growth__box .content h3 {
    width: 100%
  }

  .growth__box .content::before {
    content: "";
    width: 4.8rem;
    height: 2.2rem;
    background: url(../images/webp/arrow.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
  }

  .growth .row>div:nth-child(n+2) {
    margin-top: 5rem
  }
}

.step {
  width: 100vw;
  margin-top: 3rem
}

.step__wrapper {
  margin: 5rem 0;
  background-color: #fff6e9;
  padding: 15rem 0;
  width: calc(100% - 10rem);
  margin: 0 auto;
  border-radius: 3rem
}

.step .section-heading {
  text-align: center;
  margin: 0 auto 5rem auto
}

.step__box {
  text-align: center
}

.step__box .image {
  width: 100%;
  filter: drop-shadow(0px 40px 20px rgba(255, 186, 114, 0.4));
  -webkit-filter: drop-shadow(0px 40px 20px rgba(255, 186, 114, 0.4));
  -moz-filter: drop-shadow(0px 40px 20px rgba(255, 186, 114, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.step__box .image img {
  width: 100%
}

.step__box .content {
  margin-top: 4.5rem
}

.step__box .content h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #f41675;
  margin-bottom: 2.5rem;
  line-height: -4rem;
  letter-spacing: .1rem
}

.step__box .content h3 span {
  display: block;
  font-size: 4rem;
  color: #000;
  letter-spacing: initial
}

.step__box .content .paragraph {
  width: 94%
}

.step .button {
  border: 4px solid #ffd588
}

.step .button:focus,
.step .button:hover {
  background-color: #ffd588
}

.step .button__wrapper {
  margin-top: 3.4rem
}

.step .button__wrapper {
  margin-top: 5rem
}

.step .button__wrapper a {
  background: #1369ec;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 105, 236, 0)), color-stop(50%, rgba(255, 177, 107, 0)), color-stop(51%, #ffb16b), to(#ffdb8d));
  background: linear-gradient(0deg, rgba(19, 105, 236, 0) 0%, rgba(255, 177, 107, 0) 50%, #ffb16b 51%, #ffdb8d 100%);
  background-size: 200% 200%;
  background-position: center bottom;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.step .button__wrapper a:hover {
  background-position: center top;
  border: none;
  filter: drop-shadow(0px 10px 20px rgba(255, 186, 114, 0.4));
  -webkit-filter: drop-shadow(0px 10px 20px rgba(255, 186, 114, 0.4));
  -moz-filter: drop-shadow(0px 10px 20px rgba(255, 186, 114, 0.4))
}

@media (max-width: 991.98px) {
  .step__wrapper {
    padding: 5rem 0
  }

  .step__box .image img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    width: auto;
    margin: 0 auto
  }

  .step__box .content {
    margin: 0
  }

  .step__box .content .paragraph {
    width: 60%;
    margin: 0 auto
  }
}

@media (max-width: 768px) {
  .step__wrapper {
    width: calc(100% - 5rem);
    padding: 5rem 2rem
  }
}

.clients-sec {
  width: 100vw;
  padding: 15rem 0
}

.clients-sec .section-heading {
  text-align: center;
  margin: 0 auto 5rem auto;
  width: 59%
}

.clients-sec .testimonial__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  margin-bottom: 10rem
}

.clients-sec .testimonial__wrapper .client {
  width: 50%
}

.clients-sec .testimonial__wrapper .client:nth-child(n+3) {
  margin-top: 3rem
}

.clients-sec .testimonial__wrapper .client .image {
  cursor: pointer
}

.clients-sec .testimonial__wrapper .client .image img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.clients-sec .testimonial__wrapper .client .testimonial {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  background: #19a5a1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  backface-visibility: hidden;
  perspective: 1000;
  background: linear-gradient(45deg, #19a5a1 0%, #63e8e4 100%);
  width: 60%;
  height: 100%;
  color: white;
  border-radius: 3rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  filter: drop-shadow(0px 20px 10px rgba(79, 188, 186, 0.4));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(79, 188, 186, 0.4));
  -moz-filter: drop-shadow(0px 20px 10px rgba(79, 188, 186, 0.4))
}

.clients-sec .testimonial__wrapper .client .testimonial h4 {
  font-weight: 600;
  font-size: 1.8rem;
  margin-top: 2.3rem
}

.clients-sec .testimonial__wrapper .client .testimonial p {
  font-weight: 500;
  font-size: 2.8rem
}

.clients-sec .testimonial__wrapper .client .testimonial__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 0 4.8rem 0
}

.clients-sec .testimonial__wrapper .client:nth-child(even) .image {
  text-align: right
}

.clients-sec .testimonial__wrapper .client.active .image img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0)
}

.clients-sec .testimonial__wrapper .client.active .testimonial {
  visibility: visible;
  opacity: 1
}

.clients-sec .clients {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.clients-sec .clients-slider {
  width: 75%;
  margin-right: 0
}

.clients-sec .clients-slide {
  text-align: right
}

.clients-sec .clients-slide a {
  opacity: .6;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.clients-sec .clients-slide a:hover,
.clients-sec .clients-slide a:focus {
  opacity: 1;
  outline: 0
}

.clients-sec .clients__info {
  width: 28%
}

.clients-sec .clients__info h3 {
  font-weight: 600;
  font-size: 6rem;
  color: #000;
  margin-bottom: 1.7rem
}

.clients-sec .clients__info .paragraph {
  font-size: 1.8rem
}

@media (max-width: 1200px) {
  .clients-sec .testimonial__wrapper .client .testimonial {
    width: 55%
  }

  .clients-sec .testimonial__wrapper .client .testimonial p {
    font-size: 2.4rem
  }
}

@media (max-width: 991.98px) {
  .clients-sec {
    padding: 5rem 0
  }

  .clients-sec .testimonial__wrapper .client .testimonial {
    width: 100%;
    height: 40rem;
    top: 24.8rem
  }

  .clients-sec .testimonial__wrapper .client:nth-child(n+3) {
    margin-top: 49.8rem
  }

  .clients-sec .clients {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }

  .clients-sec .clients-slider {
    width: 100%;
    margin-top: 5rem
  }

  .clients-sec .clients-slide {
    text-align: center
  }

  .clients-sec .clients__info {
    width: 100%;
    text-align: center
  }
}

.questions {
  width: 100vw
}

.questions__wrapper {
  background-color: #fef2f6;
  padding: 15rem 0;
  width: calc(100% - 10rem);
  margin: 0 auto;
  border-radius: 3rem
}

.questions .section-heading {
  width: 50%
}

.questions .card {
  background-color: transparent;
  border: 0
}

.questions .card .card-header {
  border-radius: 0;
  background-color: transparent;
  border: 0;
  position: relative
}

.questions .card .card-header h5 button {
  font-size: 2.2rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  letter-spacing: -.02rem;
  line-height: 3rem;
  position: relative
}

.questions .card .card-header h5::before {
  content: "\f056";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 2.2rem;
  color: #f41a77;
  position: absolute;
  top: 50%;
  left: -1.2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display: inline-block
}

.questions .card .card-header h5.hidden::before {
  content: "\f055"
}

.questions .card .card-body {
  background-color: white;
  border-radius: 2rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 3rem 4.2rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 1rem
}

.questions .card .card-body::before {
  content: "";
  width: 4.8rem;
  height: 2.2rem;
  background: url(../images/webp/arrow.png) no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  top: -2rem;
  left: 5rem
}

.questions .card .card-body .paragraph {
  color: #474b4c
}

.questions-img {
  text-align: right;
  position: relative
}

.questions-img img {
  z-index: 10;
  position: relative;
  filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -moz-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.2));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix)
}

.questions-img::before {
  content: "";
  display: block;
  position: absolute;
  width: 75.3rem;
  height: 75.3rem;
  border-radius: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #f2026b;
  background: linear-gradient(45deg, #f2026b 0%, #ff8aaf 50%, #f2026b 100%);
  background-size: 200% 200%;
  background-position: left bottom;
  filter: drop-shadow(0px 5px 40px #f54590);
  -webkit-filter: drop-shadow(0px 5px 40px #f54590);
  -moz-filter: drop-shadow(0px 5px 40px #f54590);
  -webkit-animation-name: animateGradient;
  animation-name: animateGradient;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

@media (max-width: 991.98px) {
  .questions-img {
    text-align: center
  }

  .questions .section-heading {
    width: 100%
  }
}

@media (max-width: 991.98px) {
  .questions-img {
    width: 100%
  }

  .questions-img::before {
    -webkit-transform: scale(0.8) translate(-50%, 0);
    transform: scale(0.8) translate(-50%, 0);
    top: 0;
    left: 40%
  }

  .questions #accordion {
    padding: 0 2rem;
    margin-top: 5rem
  }
}

@media (max-width: 767.98px) {
  .questions__wrapper {
    width: calc(100% - 5rem);
    padding: 5rem 2rem
  }

  .questions-img {
    width: 100%
  }

  .questions-img::before {
    -webkit-transform: scale(0.6) translate(-50%, 0);
    transform: scale(0.6) translate(-50%, 0);
    top: 0;
    left: 22.5%
  }
}

@media (max-width: 575.98px) {
  .questions #accordion {
    padding: 0 1rem
  }

  .questions .card-header {
    width: 100%;
    font-size: 1.2rem
  }

  .questions .card-header h5 {
    width: 100%;
    font-size: 1.2rem
  }

  .questions .card-header h5 button {
    width: 100%;
    text-align: left;
    white-space: normal;
    font-size: 1.8rem !important
  }

  .questions-img img {
    width: 50%;
    height: 50%;
    -o-object-fit: cover;
    object-fit: cover
  }

  .questions-img::before {
    -webkit-transform: scale(1) translate(-50%, 0);
    transform: scale(1) translate(-50%, 0);
    top: 10%;
    left: 50%;
    width: 30rem;
    height: 30rem
  }
}

.pricing {
  width: 100vw
}

.pricing__wrapper {
  width: 100%;
  padding: 15rem 0
}

.pricing .section-heading {
  text-align: center;
  margin: 0 auto 5rem auto;
  width: 33%
}

.pricing__single {
  padding: 4.5rem 0 2.3rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 3rem
}

.pricing__single .icon {
  width: 13.8rem;
  height: 13.8rem;
  background-color: white;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.pricing__single .icon i {
  font-size: 6rem
}

.pricing__single .row>div>a {
  display: block;
  width: 100%
}

.pricing__single h4 {
  font-size: 1.8rem;
  font-weight: 600;
  color: white;
  margin-top: 2.4rem
}

.pricing__single h3 {
  font-size: 7rem;
  font-weight: 500;
  color: white;
  margin-top: -.4rem
}

.pricing__single h6 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 1rem
}

.pricing__single .list {
  background-color: white;
  position: relative;
  padding: 3.7rem 2rem 2.1rem 2rem;
  border-radius: 2rem;
  width: 97%;
  margin-top: 4.3rem
}

.pricing__single .list::before {
  content: "";
  width: 4.8rem;
  height: 2.2rem;
  background: url(../images/webp/arrow.png) no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%)
}

.pricing__single .list ul {
  font-size: 1.6rem;
  line-height: 4rem;
  color: #666b6d;
  width: 100%;
  padding-left: 5.3rem
}

.pricing__single .list ul li {
  position: relative
}

.pricing__single .list ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 1.4rem;
  position: absolute;
  top: 50%;
  left: -2.2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display: inline-block
}

.pricing__single .list ul li.not-included::before {
  content: "\f00d"
}

.pricing__single .button {
  border: 4px solid transparent;
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin-top: 1.8rem;
  color: white
}

.pricing__single .button:hover,
.pricing__single .button:focus {
  background-color: transparent;
  color: white;
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.pricing__single-1 {
  background: #9341d4;
  background: linear-gradient(45deg, #9341d4 0%, #d98efb 100%);
  filter: drop-shadow(0px 20px 10px rgba(147, 65, 212, 0.4));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(147, 65, 212, 0.4));
  -moz-filter: drop-shadow(0px 20px 10px rgba(147, 65, 212, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.pricing__single-1 .icon i {
  color: #c67af1
}

.pricing__single-1 h6 {
  color: #f0d6fd
}

.pricing__single-1 .list ul li::before {
  color: #c67af1
}

.pricing__single-2 {
  background: #1369ec;
  background: linear-gradient(45deg, #1369ec 0%, #65bef4 100%);
  filter: drop-shadow(0px 20px 10px rgba(33, 120, 237, 0.4));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(33, 120, 237, 0.4));
  -moz-filter: drop-shadow(0px 20px 10px rgba(33, 120, 237, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.pricing__single-2 .icon i {
  color: #3890f0
}

.pricing__single-2 h6 {
  color: #bcddf5
}

.pricing__single-2 .list ul li::before {
  color: #3890f0
}

.pricing__single-3 {
  background: #19a5a1;
  background: linear-gradient(45deg, #19a5a1 0%, #63e8e4 100%);
  filter: drop-shadow(0px 20px 10px rgba(79, 188, 186, 0.4));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(79, 188, 186, 0.4));
  -moz-filter: drop-shadow(0px 20px 10px rgba(79, 188, 186, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.pricing__single-3 .icon i {
  color: #2db7b3
}

.pricing__single-3 h6 {
  color: #c9f7f6
}

.pricing__single-3 .list ul li::before {
  color: #2db7b3
}

@media (max-width: 991.98px) {
  .pricing .section-heading {
    width: 75%;
    margin-bottom: 5rem
  }

  .pricing__wrapper {
    padding: 5rem 2rem
  }

  .pricing .row>div:nth-child(n+2) {
    margin-top: 5rem
  }
}

.screenshot {
  width: 100vw
}

.screenshot__wrapper {
  background-color: #f0f7fc;
  margin: 0 auto;
  overflow: visible;
  padding: 15rem 0;
  width: calc(100% - 10rem);
  margin: 0 auto;
  border-radius: 3rem
}

.screenshot-slider {
  width: 100vw;
  margin-top: 9.8rem;
  margin-left: -2.5%;
  overflow: visible !important
}

.screenshot-slide {
  text-align: center;
  opacity: .4;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.4));
  -webkit-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.4));
  -moz-filter: drop-shadow(0px 20px 10px rgba(75, 80, 84, 0.4));
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000
}

.screenshot .swiper-slide-active {
  opacity: 1
}

.screenshot__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

.screenshot-nav-prev,
.screenshot-nav-next {
  display: inline-block;
  cursor: pointer
}

.screenshot-nav-prev i,
.screenshot-nav-next i {
  font-size: 5rem;
  color: #8e9a9d;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.screenshot-nav-prev:hover i,
.screenshot-nav-next:hover i {
  color: #ff0087
}

.screenshot-nav-prev:focus,
.screenshot-nav-next:focus {
  outline: 0
}

.screenshot-nav-next {
  margin-left: 4rem
}

@media (max-width: 991.98px) {
  .screenshot__wrapper {
    width: calc(100% - 5rem)
  }

  .screenshot__info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }

  .screenshot-slide {
    text-align: center
  }

  .screenshot-slide a {
    margin: 0 auto
  }

  .screenshot-slider {
    margin-left: 0;
    width: 100%;
    margin-top: 5rem
  }
}

.related-blog .section-heading {
  text-align: center;
  margin: 0 auto 5rem auto;
  width: 35%
}

.related-blog .button {
  margin: 10rem auto 0 auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.related-blog .button {
  border: 4px solid #ffdbe8
}

.related-blog .button i {
  color: #f2046c;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.related-blog .button:focus,
.related-blog .button:hover {
  background-color: #ffdbe8
}

.related-blog .button:focus i,
.related-blog .button:hover i {
  color: white
}

@media (max-width: 991.98px) {
  .related-blog .section-heading {
    width: 90%
  }
}

.newsletter {
  width: 100vw
}

.newsletter__wrapper {
  width: calc(100% - 10rem);
  margin: 0 auto;
  position: relative;
  padding: 1.5rem 0 0 0
}

.newsletter__wrapper::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 82%;
  background-color: #fef2f6;
  border-radius: 3rem
}

.newsletter__info {
  position: relative;
  bottom: -4.6rem
}

.newsletter__info .section-heading {
  width: 88%
}

.newsletter__info--field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3rem
}

.newsletter__info button {
  width: 23.1rem;
  margin-left: 1rem;
  background: #f2026b;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  color: white;
  background: -webkit-gradient(linear, left bottom, left top, from(#f2026b), color-stop(50%, #ff8aaf), to(#f2026b));
  background: linear-gradient(0deg, #f2026b 0%, #ff8aaf 50%, #f2026b 100%);
  border: none;
  background-size: 200% 200%;
  background-position: bottom;
  -webkit-transform: var(--transform-fix);
  transform: var(--transform-fix);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  filter: drop-shadow(0px 10px 10px rgba(245, 69, 144, 0.4));
  -webkit-filter: drop-shadow(0px 10px 10px rgba(245, 69, 144, 0.4));
  -moz-filter: drop-shadow(0px 10px 10px rgba(245, 69, 144, 0.4));
  cursor: pointer
}

.newsletter__info button:hover {
  background-position: top
}

.newsletter__img {
  text-align: right;
  position: relative
}

.newsletter__img img {
  z-index: 10;
  position: relative
}

.newsletter__img::before {
  content: "";
  width: 63.6rem;
  height: 36.7rem;
  background: url(../images/webp/newsletter-texture.png) no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  bottom: 0;
  right: -15rem;
  z-index: 1
}

@media (max-width: 991.98px) {
  .newsletter {
    margin-top: 5rem
  }

  .newsletter__wrapper {
    width: calc(100% - 5rem);
    background-color: #fef2f6;
    border-radius: 3rem;
    padding-top: 10rem;
    overflow: hidden
  }

  .newsletter__wrapper::before {
    display: none
  }

  .newsletter__img {
    text-align: center;
    margin-top: 2rem
  }

  .newsletter__img::before {
    right: initial;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }

  .newsletter__info {
    position: static;
    bottom: initial
  }

  .newsletter__info--field {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }

  .newsletter__info button {
    margin: 2rem auto 0 auto;
    width: 33rem
  }
}

.input-field {
  width: 33rem;
  height: 6.5rem;
  border: 4px solid #ffdbe8;
  border-radius: 10rem;
  padding: 0 2rem 0 3rem;
  font-size: 1.6rem;
  color: #666b6d
}

.input-field::-webkit-input-placeholder {
  color: #666b6d
}

.input-field::-moz-placeholder {
  color: #666b6d
}

.input-field:-ms-input-placeholder {
  color: #666b6d
}

.input-field:-moz-placeholder {
  color: #666b6d
}

.input-field:focus {
  outline: 0;
  border: 4px solid #fe7fa9
}

.newsletter-2 .newsletter__wrapper {
  overflow: visible
}

.newsletter-2 .newsletter__wrapper::before {
  height: 90% !important
}

.newsletter-2 .container {
  overflow: visible
}

.newsletter-2 .row>div {
  overflow: visible
}

.newsletter-2 .section-heading {
  width: 57%;
  margin-bottom: 3rem
}

.newsletter-2 .comment_form {
  z-index: 50;
  position: relative
}

.newsletter-2 .newsletter__img {
  position: relative;
  right: -5rem
}

.newsletter-2 .newsletter__img img {
  width: auto;
  height: auto
}

.newsletter-2 .newsletter__img::before {
  width: 66rem;
  height: 40rem
}

@media (max-width: 991.98px) {
  .newsletter-2 .section-heading {
    width: 80%
  }

  .newsletter-2 .newsletter__wrapper {
    padding: 5rem 2rem 0 2rem;
    overflow: hidden
  }

  .newsletter-2 .newsletter__wrapper::before {
    height: 100%
  }

  .newsletter-2 .newsletter__img {
    position: static;
    right: initial;
    text-align: center
  }
}

.footer {
  width: 100vw;
  margin-top: 3rem;
  margin-bottom: 5rem
}

.footer__wrapper {
  padding: 15rem 0;
  width: calc(100% - 10rem);
  margin: 0 auto;
  border-radius: 3rem;
  background-color: #f0f7fc
}

.footer__info--logo {
  margin-bottom: 5.6rem
}

.footer__info--content .paragraph {
  width: 76%;
  margin-bottom: 3rem
}

.footer__list ul li:first-child {
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 5.6rem
}

.footer__list ul li:nth-child(n+2) {
  margin-bottom: 1.7rem
}

.footer__list ul li a {
  font-size: 1.6rem;
  color: #707577;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}

.footer__list ul li a:hover {
  color: #000
}

.footer__content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.footer .download-buttons {
  margin-right: 5.7rem
}

.footer .download-buttons h5 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 5.9rem
}

.footer .download-buttons a:last-child {
  margin-top: 1rem
}

.footer__copy {
  margin-top: 1.8rem
}

.footer__copy h6 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 4rem;
  letter-spacing: .1rem;
  color: #707577
}

@media (max-width: 991.98px) {
  .footer__content-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }

  .footer__wrapper {
    width: calc(100% - 5rem);
    text-align: center;
    padding: 10rem 0 5rem 0
  }

  .footer__info--content .paragraph {
    margin: 0 auto 3rem auto
  }

  .footer__list {
    margin-top: 3rem
  }

  .footer__list ul li:first-child {
    margin-bottom: 3rem
  }

  .footer .download-buttons {
    margin-right: 0
  }

  .footer .download-buttons h5 {
    margin-bottom: 3rem
  }

  .footer .download-buttons a {
    margin: 0 auto;
    text-align: left
  }

  .footer__copy {
    width: 100%;
    text-align: center;
    margin-top: 4rem
  }
}

/*# sourceMappingURL=style.css.map */



/*
  Template Name: MobiCom - Mobile App Landing Page Template
  Theme URL: https://themeforest.net/user/dsathemes
  Description: MobiCom - Mobile App Landing Page Template
  Author: DSAThemes
  Author URL: https://themeforest.net/user/dsathemes
  Version: 1.2.0
  Website: www.dsathemes.com
  Tags: Responsive, HTML5 template, DSAThemes, Mobile, Application, One Page, Landing, Mobile App
*/




/* ===========================================================================
   01. GENERAL & BASIC STYLES
   =========================================================================== */

html {
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  font-weight: 300;
}

/*------------------------------------------------------------------*/
/*   IE10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/

@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/*------------------------------------------*/
/*  PAGE CONTENT
/*------------------------------------------*/

#page {
  overflow: hidden;
}

/*------------------------------------------*/
/*  ONSCROLL ANIMATIONS
/*------------------------------------------*/

.animated {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

/*------------------------------------------*/
/*  SPACING & INDENTS
/*------------------------------------------*/

.ind-60 {
  padding-right: 60px;
  padding-left: 60px;
}

.ind-50 {
  padding-right: 50px;
  padding-left: 50px;
}

.ind-45 {
  padding-right: 45px;
  padding-left: 45px;
}

.ind-35 {
  padding-right: 35px;
  padding-left: 35px;
}

.ind-30 {
  padding-right: 30px;
  padding-left: 30px;
}

.ind-25 {
  padding-right: 25px;
  padding-left: 25px;
}

.ind-20 {
  padding-right: 20px;
  padding-left: 20px;
}

.ind-15 {
  padding-right: 15px;
  padding-left: 15px;
}

.ind-10 {
  padding-right: 10px;
  padding-left: 10px;
}

.ind-5 {
  padding-right: 5px;
  padding-left: 5px;
}

.wide-160 {
  padding-top: 160px;
  padding-bottom: 160px;
}

.wide-150 {
  padding-top: 150px;
  padding-bottom: 150px;
}

.wide-140 {
  padding-top: 140px;
  padding-bottom: 140px;
}

.wide-130 {
  padding-top: 130px;
  padding-bottom: 130px;
}

.wide-120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.wide-110 {
  padding-top: 110px;
  padding-bottom: 110px;
}

.wide-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.wide-90 {
  padding-top: 100px;
  padding-bottom: 90px;
}

.wide-80 {
  padding-top: 100px;
  padding-bottom: 80px;
}

.wide-70 {
  padding-top: 100px;
  padding-bottom: 70px;
}

.wide-60 {
  padding-top: 100px;
  padding-bottom: 60px;
}

.wide-50 {
  padding-top: 100px;
  padding-bottom: 50px;
}

.wide-40 {
  padding-top: 100px;
  padding-bottom: 40px;
}

.wide-30 {
  padding-top: 100px;
  padding-bottom: 30px;
}

/*------------------------------------------*/
/*    Margin Top
/*------------------------------------------*/

.m-top-160 {
  margin-top: 160px;
}

.m-top-150 {
  margin-top: 150px;
}

.m-top-140 {
  margin-top: 140px;
}

.m-top-130 {
  margin-top: 130px;
}

.m-top-120 {
  margin-top: 120px;
}

.m-top-110 {
  margin-top: 110px;
}

.m-top-100 {
  margin-top: 100px;
}

.m-top-90 {
  margin-top: 90px;
}

.m-top-80 {
  margin-top: 80px;
}

.m-top-70 {
  margin-top: 70px;
}

.m-top-60 {
  margin-top: 60px;
}

.m-top-50 {
  margin-top: 50px;
}

.m-top-45 {
  margin-top: 45px;
}

.m-top-40 {
  margin-top: 40px;
}

.m-top-35 {
  margin-top: 35px;
}

.m-top-30 {
  margin-top: 30px;
}

.m-top-25 {
  margin-top: 25px;
}

.m-top-20 {
  margin-top: 20px;
}

.m-top-15 {
  margin-top: 15px;
}

.m-top-10 {
  margin-top: 10px;
}

.m-top-5 {
  margin-top: 5px;
}

/*------------------------------------------*/
/*    Margin Bottom
/*------------------------------------------*/

.m-bottom-160 {
  margin-bottom: 160px;
}

.m-bottom-150 {
  margin-bottom: 150px;
}

.m-bottom-140 {
  margin-bottom: 140px;
}

.m-bottom-130 {
  margin-bottom: 130px;
}

.m-bottom-120 {
  margin-bottom: 120px;
}

.m-bottom-110 {
  margin-bottom: 110px;
}

.m-bottom-100 {
  margin-bottom: 100px;
}

.m-bottom-90 {
  margin-bottom: 90px;
}

.m-bottom-80 {
  margin-bottom: 80px;
}

.m-bottom-70 {
  margin-bottom: 70px;
}

.m-bottom-60 {
  margin-bottom: 60px;
}

.m-bottom-50 {
  margin-bottom: 50px;
}

.m-bottom-45 {
  margin-bottom: 45px;
}

.m-bottom-40 {
  margin-bottom: 40px;
}

.m-bottom-35 {
  margin-bottom: 35px;
}

.m-bottom-30 {
  margin-bottom: 30px;
}

.m-bottom-25 {
  margin-bottom: 25px;
}

.m-bottom-20 {
  margin-bottom: 20px;
}

.m-bottom-15 {
  margin-bottom: 15px;
}

.m-bottom-10 {
  margin-bottom: 10px;
}

.m-bottom-5 {
  margin-bottom: 5px;
}

.m-bottom-0 {
  margin-bottom: 0;
}

/*------------------------------------------*/
/*    Margin Left
/*------------------------------------------*/

.m-left-70 {
  margin-left: 70px;
}

.m-left-60 {
  margin-left: 60px;
}

.m-left-50 {
  margin-left: 50px;
}

.m-left-45 {
  margin-left: 45px;
}

.m-left-40 {
  margin-left: 40px;
}

.m-left-35 {
  margin-left: 35px;
}

.m-left-30 {
  margin-left: 30px;
}

.m-left-25 {
  margin-left: 25px;
}

.m-left-20 {
  margin-left: 20px;
}

.m-left-15 {
  margin-left: 15px;
}

.m-left-10 {
  margin-left: 10px;
}

.m-left-5 {
  margin-left: 5px;
}

/*------------------------------------------*/
/*    Margin Right
/*------------------------------------------*/

.m-right-70 {
  margin-right: 70px;
}

.m-right-60 {
  margin-right: 60px;
}

.m-right-50 {
  margin-right: 50px;
}

.m-right-45 {
  margin-right: 45px;
}

.m-right-40 {
  margin-right: 40px;
}

.m-right-35 {
  margin-right: 35px;
}

.m-right-30 {
  margin-right: 30px;
}

.m-right-25 {
  margin-right: 25px;
}

.m-right-20 {
  margin-right: 20px;
}

.m-right-15 {
  margin-right: 15px;
}

.m-right-10 {
  margin-right: 10px;
}

.m-right-5 {
  margin-right: 5px;
}

/*------------------------------------------*/
/*    Padding Top
/*------------------------------------------*/

.p-top-160 {
  padding-top: 160px;
}

.p-top-150 {
  padding-top: 150px;
}

.p-top-140 {
  padding-top: 140px;
}

.p-top-130 {
  padding-top: 130px;
}

.p-top-120 {
  padding-top: 120px;
}

.p-top-110 {
  padding-top: 110px;
}

.p-top-100 {
  padding-top: 100px;
}

.p-top-90 {
  padding-top: 90px;
}

.p-top-80 {
  padding-top: 80px;
}

.p-top-70 {
  padding-top: 70px;
}

.p-top-60 {
  padding-top: 60px;
}

.p-top-50 {
  padding-top: 50px;
}

.p-top-45 {
  padding-top: 45px;
}

.p-top-40 {
  padding-top: 40px;
}

.p-top-35 {
  padding-top: 35px;
}

.p-top-30 {
  padding-top: 30px;
}

.p-top-25 {
  padding-top: 25px;
}

.p-top-20 {
  padding-top: 20px;
}

.p-top-15 {
  padding-top: 15px;
}

.p-top-10 {
  padding-top: 10px;
}

/*------------------------------------------*/
/*    Padding Bottom
/*------------------------------------------*/

.p-bottom-160 {
  padding-bottom: 160px;
}

.p-bottom-150 {
  padding-bottom: 150px;
}

.p-bottom-140 {
  padding-bottom: 140px;
}

.p-bottom-130 {
  padding-bottom: 130px;
}

.p-bottom-120 {
  padding-bottom: 120px;
}

.p-bottom-110 {
  padding-bottom: 110px;
}

.p-bottom-100 {
  padding-bottom: 100px;
}

.p-bottom-90 {
  padding-bottom: 90px;
}

.p-bottom-80 {
  padding-bottom: 80px;
}

.p-bottom-70 {
  padding-bottom: 70px;
}

.p-bottom-60 {
  padding-bottom: 60px;
}

.p-bottom-50 {
  padding-bottom: 50px;
}

.p-bottom-45 {
  padding-bottom: 45px;
}

.p-bottom-40 {
  padding-bottom: 40px;
}

.p-bottom-35 {
  padding-bottom: 35px;
}

.p-bottom-30 {
  padding-bottom: 30px;
}

.p-bottom-25 {
  padding-bottom: 25px;
}

.p-bottom-20 {
  padding-bottom: 20px;
}

.p-bottom-15 {
  padding-bottom: 15px;
}

.p-bottom-10 {
  padding-bottom: 10px;
}

.p-bottom-0 {
  padding-bottom: 0;
}

/*------------------------------------------*/
/*    Padding Left
/*------------------------------------------*/

.p-left-100 {
  padding-left: 100px;
}

.p-left-90 {
  padding-left: 90px;
}

.p-left-80 {
  padding-left: 80px;
}

.p-left-70 {
  padding-left: 70px;
}

.p-left-60 {
  padding-left: 60px;
}

.p-left-50 {
  padding-left: 50px;
}

.p-left-45 {
  padding-left: 45px;
}

.p-left-40 {
  padding-left: 40px;
}

.p-left-35 {
  padding-left: 35px;
}

.p-left-30 {
  padding-left: 30px;
}

.p-left-25 {
  padding-left: 25px;
}

.p-left-20 {
  padding-left: 20px;
}

.p-left-15 {
  padding-left: 15px;
}

.p-left-10 {
  padding-left: 10px;
}

.p-left-5 {
  padding-left: 5px;
}

.p-left-0 {
  padding-left: 0px;
}

/*------------------------------------------*/
/*    Padding Right
/*------------------------------------------*/

.p-right-100 {
  padding-right: 100px;
}

.p-right-90 {
  padding-right: 90px;
}

.p-right-80 {
  padding-right: 80px;
}

.p-right-70 {
  padding-right: 70px;
}

.p-right-60 {
  padding-right: 60px;
}

.p-right-50 {
  padding-right: 50px;
}

.p-right-45 {
  padding-right: 45px;
}

.p-right-40 {
  padding-right: 40px;
}

.p-right-35 {
  padding-right: 35px;
}

.p-right-30 {
  padding-right: 30px;
}

.p-right-25 {
  padding-right: 25px;
}

.p-right-20 {
  padding-right: 20px;
}

.p-right-15 {
  padding-right: 15px;
}

.p-right-10 {
  padding-right: 10px;
}

.p-right-5 {
  padding-right: 5px;
}

.p-right-0 {
  padding-right: 0px;
}

/*------------------------------------------*/
/*   BACKGROUND SETTINGS
/*------------------------------------------*/

.bg-scroll {
  width: 100%;
  background-attachment: fixed !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

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

/*------------------------------------------*/
/*   Background Colors for Sections
/*------------------------------------------*/

.bg-lightgrey {
  background-color: #f0f0f0;
}

.bg-grey {
  background-color: #e8e8e8
}

.bg-red {
  background-color: #e35029;
}

.bg-yellow {
  background-color: #feca16;
}

.bg-green {
  background-color: #42a045;
}

.bg-blue {
  background-color: #242d4d;
}

.bg-lightblue {
  background-color: #1e88e5;
}

.bg-purple {
  background-color: #783bb1;
}

.bg-lightpurple {
  background-color: #715fef;
}

/*------------------------------------------*/
/*   BORDER SETTINGS FOR DEMOS
/*------------------------------------------*/

.b-top {
  border-top: 1px solid #ddd;
}

.b-bottom {
  border-bottom: 1px solid #ddd;
}

.b-left {
  border-left: 1px solid #ddd;
}

.b-right {
  border-right: 1px solid #ddd;
}




/* ==========================================================================
   02.  TYPOGRAPHY
   =========================================================================== */

/*------------------------------------------*/
/*  HEADERS
/*------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025rem;
  /* -0.4px */
}

/* Header H5 */
h5.h5-xs {
  font-size: 1.125rem;
}

/* 18px */
h5.h5-sm {
  font-size: 1.1875rem;
}

/* 19px */
h5.h5-md {
  font-size: 1.25rem;
}

/* 20px */
h5.h5-lg {
  font-size: 1.375rem;
}

/* 22px */
h5.h5-xl {
  font-size: 1.5rem;
}

/* 24px */

/* Header H4 */
h4.h4-xs {
  font-size: 1.625rem;
}

/* 26px */
h4.h4-sm {
  font-size: 1.75rem;
}

/* 28px */
h4.h4-md {
  font-size: 1.875rem;
}

/* 30px */
h4.h4-lg {
  font-size: 2rem;
}

/* 32px */
h4.h4-xl {
  font-size: 2.125rem;
}

/* 34px */

/* Header H3 */
h3.h3-xs {
  font-size: 2.375rem;
}

/* 38px */
h3.h3-sm {
  font-size: 2.5rem;
}

/* 40px */
h3.h3-md {
  font-size: 2.625rem;
}

/* 42px */
h3.h3-lg {
  font-size: 2.75rem;
}

/* 44px */
h3.h3-xl {
  font-size: 3rem;
}

/* 48px */

/* Header H2 */
h2.h2-xs {
  font-size: 3.25rem;
}

/* 52px */
h2.h2-sm {
  font-size: 3.375rem;
}

/* 54px */
h2.h2-md {
  font-size: 3.5rem;
}

/* 56px */
h2.h2-lg {
  font-size: 3.75rem;
}

/* 60px */
h2.h2-xl {
  font-size: 4rem;
}

/* 64px */

/*------------------------------------------*/
/*   PARAGRAPHS
/*------------------------------------------*/

p.p-sm {
  font-size: 0.95rem;
}

/* 15.2px */
p {
  font-size: 1rem;
}

/* 16px */
p.p-md {
  font-size: 1.125rem;
}

/* 18px */
p.p-lg {
  font-size: 1.25rem;
}

/* 20px */
p.p-xl {
  font-size: 1.3175rem;
}

/* 22px */

/*------------------------------------------*/
/*   LISTS
/*------------------------------------------*/

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

/*------------------------------------------*/
/*   LINK SETTINGS
/*------------------------------------------*/

a {
  color: #333;
  text-decoration: none;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

a:hover {
  color: #666;
  text-decoration: none;
}

a:focus {
  outline: none;
  text-decoration: none;
}

/*------------------------------------------*/
/*   BUTTON SETTINGS
/*------------------------------------------*/

.btn {
  background-color: #e35029;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  padding: 1rem 2rem;
  border: 2px solid #e35029;
  position: relative;
  z-index: 2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.btn:before {
  background-color: rgba(255, 255, 255, 0.15);
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  z-index: -2;
  -webkit-transition: 0.5s all ease;
  -o-transition: 0.5s all ease;
  transition: 0.5s all ease;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.btn-white:before,
.btn-tra-black:before {
  background-color: rgba(0, 0, 0, 0.75);
}

/*------------------------------------------*/
/*   Button Color
/*------------------------------------------*/

.btn-black {
  color: #fff;
  background-color: #333;
  border-color: #333;
}

.btn-white {
  color: #333;
  background-color: #fff;
  border-color: #fff;
}

.btn-tra-white {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

.btn-tra-black {
  color: #333;
  background-color: transparent;
  border-color: #333;
}

.btn-yellow {
  color: #333;
  background-color: #feca16;
  border-color: #feca16;
}

.white-color .btn-yellow {
  color: #333;
}

.btn-lightblue {
  color: #fff;
  background-color: #42a5f5;
  border-color: #42a5f5;
}

.btn-green {
  color: #fff;
  background-color: #56a959;
  border-color: #56a959;
}

.btn-lightgreen {
  color: #fff;
  background-color: #41bf2b;
  border-color: #41bf2b;
}

.btn-purple {
  color: #fff;
  background-color: #513c97;
  border-color: #513c97;
}

.btn-lightpurple {
  color: #fff;
  background-color: #715fef;
  border-color: #715fef;
}

.btn-teal {
  color: #fff;
  background-color: #2c95ce;
  border-color: #2c95ce;
}

/*------------------------------------------*/
/*   Button Hover
/*------------------------------------------*/

.btn:hover {
  color: #fff;
}

.btn-tra-yellow:hover,
.btn-yellow:hover {
  color: #333;
}

.btn-white:hover {
  border-color: #444;
}

.btn:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: 0.5s all ease;
  -o-transition: 0.5s all ease;
  transition: 0.5s all ease;
}

/*------------------------------------------*/
/*   Button Focus
/*------------------------------------------*/

.btn:focus {
  color: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*------------------------------------------*/
/*    STORE BAGE ICONS
/*------------------------------------------*/

a.store {
  margin-right: 15px;
}

.btn:last-child,
a.store:last-child {
  margin-right: 0;
}

/*------------------------------------------*/
/*   Video Link
/*------------------------------------------*/

.modal-video {
  display: inline-block;
  vertical-align: middle;
  line-height: 2.15rem;
}

.modal-video a span {
  font-size: 2.15rem;
  line-height: 2.15rem;
  margin-right: 4px;
  vertical-align: middle;
}

.modal-video a {
  font-size: 1.05rem;
  line-height: 2.15rem;
  font-weight: 400;
}

/*------------------------------------------*/
/*   Video Popup Icon
/*------------------------------------------*/

.play-icon-green {
  width: 120px;
  height: 120px;
  background: url(../images/webp/play-icon-green.png);
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  opacity: .85;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.play-icon-green:hover {
  opacity: 1;
}

/*------------------------------------------*/
/*  BOX ICONS
/*------------------------------------------*/

.box-icon span {
  font-size: 4rem;
}

.box-icon-xs span {
  font-size: 3rem;
}

.box-icon-sm span {
  font-size: 3.5rem;
}

.box-icon-md span {
  font-size: 4.5rem;
}

.box-icon-lg span {
  font-size: 5rem;
}

.box-icon-xl span {
  font-size: 5.5rem;
}

/*------------------------------------------*/
/*   BOX ICON COLOR
/*------------------------------------------*/

.grey-icon span {
  color: #757575;
}

.red-icon span {
  background: -webkit-gradient(linear, left top, left bottom, from(#ee041a), to(#ff8212));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-icon span {
  background: -webkit-gradient(linear, left top, left bottom, from(#029c09), to(#02ce0b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue-icon span {
  background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#37a7fc));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.skyblue-icon span {
  color: #42a5f5;
}

.purple-icon span {
  background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#f402b8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*------------------------------------------*/
/*    QUOTE
/*------------------------------------------*/

.quote p {
  color: #666;
  font-style: italic;
  border-left: 3px solid #6bbb28;
  padding-left: 20px;
  margin-top: 25px;
  margin-bottom: 20px;
}

/*------------------------------------------*/
/*    Quote Avatar 
/*------------------------------------------*/

.quote-avatar {
  display: inline-block;
  margin: 0 auto;
}

.quote-avatar img {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

.quote-author {
  display: inline-block;
  padding: 0 0 0 15px;
  text-align: left;
  position: relative;
  top: 10px;
}

/*------------------------------------------*/
/*    Quote Avatar 
/*------------------------------------------*/

.quote-author h5 {
  margin-bottom: 0;
}

.quote-author span {
  font-size: 1rem;
  font-weight: 300;
  display: block;
}

/*------------------------------------------*/
/*   APP DEVICES
/*------------------------------------------*/

.app-devices {
  padding: 15px 0 0 5px;
}

/*------------------------------------------*/
/*   App Devices Icons
/*------------------------------------------*/

.app-devices .svg-inline--fa {
  color: rgba(50, 50, 50, 0.3);
  font-size: 2.6rem;
  line-height: 1 !important;
  float: left;
  margin-right: 0.65rem;
}

.bg-green .app-devices .svg-inline--fa,
.bg-lightpurple .app-devices .svg-inline--fa,
.bg-lightblue .app-devices .svg-inline--fa {
  color: rgba(240, 240, 240, 0.5);
}

.app-devices .svg-inline--fa.f-tablet {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.app-devices .svg-inline--fa.f-phone {
  margin-right: 1.25rem;
}

.app-devices-desc p {
  font-style: italic;
  line-height: 1.25;
  padding-right: 20%;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*   BOX LIST
/*------------------------------------------*/

.box-list-icon {
  font-size: 0.9rem;
  line-height: 1.5rem;
  float: left;
  margin-right: 10px;
}

.box-list p {
  overflow: hidden;
  margin-bottom: 8px;
}

/*------------------------------------------*/
/*   SECTION TITLE
/*------------------------------------------*/

.section-title {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  letter-spacing: -1.5px;
}

.section-title p {
  font-size: 1.3125rem;
  /* 21px */
  padding: 0 15%;
}

#content-7 .section-title p,
#content-8 .section-title p {
  margin-top: 20px;
  padding: 0 5%;
}

#content-8 .section-title {
  margin-bottom: 20px;
}

/*------------------------------------------*/
/*   TEXT WEIGHT
/*------------------------------------------*/

.txt-300 {
  font-weight: 300;
}

.txt-400 {
  font-weight: 400;
}

.txt-500 {
  font-weight: 500;
}

.txt-600 {
  font-weight: 600;
}

.txt-700 {
  font-weight: 700;
}

.txt-800 {
  font-weight: 800;
}

.txt-900 {
  font-weight: 900;
}

.txt-upper {
  text-transform: uppercase;
}

/*------------------------------------------*/
/*   TEXT SETTINGS FOR DEMOS
/*------------------------------------------*/

.white-color,
.white-color h2,
.white-color h3,
.white-color h4,
.white-color h5,
.white-color h6,
.white-color p,
.white-color a,
.white-color li,
.white-color i,
.white-color span {
  color: #fff;
}

.grey-color,
.grey-color h2,
.grey-color h3,
.grey-color h4,
.grey-color h5,
.grey-color h6,
.grey-color p,
.grey-color a,
.grey-color li,
.grey-color span {
  color: #666;
}

.lightgrey-color,
.lightgrey-color h2,
.lightgrey-color h3,
.lightgrey-color h4,
.lightgrey-color h5,
.lightgrey-color p,
.lightgrey-color a,
.lightgrey-color li,
.lightgrey-color span {
  color: #ccc;
}

.yellow-color,
.yellow-color h2,
.yellow-color h3,
.yellow-color h4,
.yellow-color h5,
.yellow-color h6,
.yellow-color p,
.yellow-color a,
.yellow-color li,
.yellow-color i,
.yellow-color span {
  color: #f4c744;
}

.green-color,
.green-color h2,
.green-color h3,
.green-color h4,
.green-color h5,
.green-color h6,
.green-color p,
.green-color a,
.green-color li,
.green-color i,
.green-color span {
  color: #42a045;
}

.blue-color,
.blue-color h2,
.blue-color h3,
.blue-color h4,
.blue-color h5,
.blue-color h6,
.blue-color p,
.blue-color a,
.blue-color li,
.blue-color i,
.blue-color span {
  color: #01b7de;
}

.red-color,
.red-color h2,
.red-color h3,
.red-color h4,
.red-color h5,
.red-color h6,
.red-color p,
.red-color a,
.red-color li,
.red-color i,
.red-color span {
  color: #e35029;
}




/* ==========================================================================
   03.  PRELOAD SPINNER - Optimized
   =========================================================================== */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out;
}

#loader {
  text-align: center;
  color: white;
  max-width: 300px;
  width: 100%;
}

.loader-logo-container {
  margin-bottom: 30px;
  animation: logoFloat 3s ease-in-out infinite;
}

.loader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.logo-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #fff, #f0f0f0);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.logo-circle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shine 2s linear infinite;
}

.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #667eea;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1;
  position: relative;
}

.logo-text-full {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 2px;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.loader-text {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.loader-progress {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #fff, #f0f0f0);
  border-radius: 2px;
  animation: progress 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* Responsive loader */
@media (max-width: 768px) {
  #loader {
    max-width: 250px;
    padding: 0 20px;
  }
  
  .logo-circle {
    width: 60px;
    height: 60px;
  }
  
  .logo-text {
    font-size: 28px;
  }
  
  .logo-text-full {
    font-size: 20px;
  }
  
  .loader-spinner {
    width: 40px;
    height: 40px;
  }
  
  .loader-text {
    font-size: 14px;
  }
}





/* ==========================================================================
   03.  HEADER & NAVIGATION
   =========================================================================== */

/*------------------------------------------*/
/*   LOGO IMAGE    
/*------------------------------------------*/

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

.navbar-light .navbar-nav .nav-link {
  color: #555;
}

.bg-light {
  background-color: #fff !important;
  box-shadow: 0 0 2px rgba(50, 50, 50, 0.4);
}

.header .nb-line {
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

/*------------------------------------------*/
/*   NAVIGATION BAR    
/*------------------------------------------*/

.navbar {
  padding: 0.75rem 1rem;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.navbar.bg-tra {
  padding: 2.25rem 1rem;
  background-color: transparent;
}

/*------------------------------------------*/
/*   NAVIGATION MENU    
/*------------------------------------------*/

.navbar-expand-lg .navbar-nav .nav-link {
  font-size: 1.05rem;
  font-weight: 500;
  padding: 0.65rem 1.5rem;
  margin-left: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.navbar-expand-lg .navbar-nav .nav-link.pre-link {
  position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link span {
  background-color: #41bf2b;
  width: 5px;
  height: 5px;
  display: block;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  top: 14px;
  right: 18px;
}

.dropdown-item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.dropdown-toggle::after {
  vertical-align: .175em;
}

/*------------------------------------------*/
/*   Navbar Social Icons  
/*------------------------------------------*/

.header-socials {
  margin-top: 4px;
  margin-left: 4px;
  display: inline-block;
  text-align: center;
}

.header-socials span {
  float: left;
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
  clear: none !important;
  margin-left: 5px;
}

.header-socials a {
  width: 38px;
  height: 38px;
  background-color: transparent;
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 34px !important;
  border: 2px solid #fff;
  margin-left: 3px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.navbar-light .header-socials a {
  color: #333;
  border: 2px solid #333;
}

.header-socials a:hover {
  background-color: rgba(255, 255, 255, .65);
  border-color: rgba(255, 255, 255, .45);
  color: #333;
}

.navbar-light .header-socials a:hover {
  background-color: rgba(20, 20, 20, .75);
  border-color: rgba(20, 20, 20, .45);
  color: #fff;
}

/*------------------------------------------*/
/*   Navbar Store Badge  
/*------------------------------------------*/

.header-store {
  margin-left: 5px;
}

/*------------------------------------------*/
/*   Navigation Menu Hover
/*------------------------------------------*/

.navbar-light .nav-link:focus,
.navbar-light .nav-link:hover {
  color: #fff;
  background-color: rgba(140, 140, 140, 0.2);
}

.navbar-dark .nav-link:focus,
.navbar-dark .nav-link:hover {
  color: #fff;
  background-color: rgba(240, 240, 240, 0.2);
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: #333;
  text-decoration: none;
  background-color: #eee;
}

/*------------------------------------------*/
/*   Navbar Scroll   
/*------------------------------------------*/

.navbar.scroll.bg-tra {
  padding: 12px 0;
  background-color: #fcfcfc !important;
  box-shadow: 0 0 2px rgba(50, 50, 50, 0.4);
}

.navbar.scroll.navbar-dark.bg-tra .nav-link {
  /* color: #666; */
}

.navbar.scroll.navbar-dark.bg-tra .nav-link:hover {
  background-color: rgba(200, 200, 200, 0.35);
}

.navbar.scroll .header-socials a {
  color: #666;
  border: 2px solid #666;
}

.navbar.scroll .header-socials a:hover {
  color: #fff;
}

.navbar.scroll .header-socials a.ico-facebook:hover {
  background-color: #3b5998;
  border-color: #3b5998;
}

.navbar.scroll .header-socials a.ico-twitter:hover {
  background-color: #00a9ed;
  border-color: #00a9ed;
}

.navbar.scroll .header-socials a.ico-behance:hover {
  background-color: #2473f6;
  border-color: #2473f6;
}

.navbar.scroll .header-socials a.ico-google-plus:hover {
  background-color: #cd1111;
  border-color: #cd1111;
}

.navbar.scroll .header-socials a.ico-linkedin:hover {
  background-color: #015886;
  border-color: #015886;
}

.navbar.scroll .header-socials a.ico-dribbble:hover {
  background-color: #d92d84;
  border-color: #d92d84;
}

.navbar.scroll .header-socials a.ico-instagram:hover {
  background-color: #beb3a8;
  border-color: #beb3a8;
}

.navbar.scroll .header-socials a.ico-pinterest:hover {
  background-color: #ac281a;
  border-color: #ac281a;
}

.navbar.scroll .header-socials a.ico-youtube:hover {
  background-color: #cd1b20;
  border-color: #cd1b20;
}

.navbar.scroll .header-socials a.ico-tumblr:hover {
  background-color: #3a5976;
  border-color: #3a5976;
}

.navbar.scroll .header-socials a.ico-vk:hover {
  background-color: #3b5998;
  border-color: #3b5998;
}

/*------------------------------------------*/
/*   Responsive Burger Menu   
/*------------------------------------------*/

.navbar-light .navbar-toggler,
.navbar.bg-tra .navbar-toggler {
  color: #888;
  border-color: #888;
  padding: 0.25rem 0.5rem;
  font-size: 1.05rem;
}

.navbar-dark.bg-tra .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus {
  outline: 0;
}

/*------------------------------------------*/
/*   Logo Image
/*------------------------------------------*/

.logo-white,
.logo-black {
  display: block;
}

.navbar-dark.bg-tra .logo-black,
.navbar-light.bg-tra .logo-white,
.scroll.navbar-dark.bg-tra .logo-white,
.navbar-dark.bg-dark .logo-black,
.navbar-light.bg-light .logo-white {
  display: none;
}

.navbar-dark.bg-tra .logo-white,
.navbar-light.bg-tra .logo-black,
.scroll.navbar-dark.bg-tra .logo-black,
.navbar-dark.bg-dark .logo-white,
.navbar-light.bg-light .logo-black {
  display: block;
}




/* ==========================================================================
   04.  HERO 
   =========================================================================== */

.hero-section .container {
  position: relative;
  z-index: 10;
}

#hero-1 {
  position: relative;
  background-image: url(../images/webp/hero-1.jpg);
  background-position: center bottom;
  padding-top: 180px;
  padding-bottom: 100px;
}

#hero-2 {
  background-image: url(../images/webp/hero-2.png);
  background-position: right bottom;
  padding-top: 160px;
  padding-bottom: 60px;
}

#hero-3 {
  position: relative;
  background-image: url(../images/webp/bg-dotted.png);
}

#hero-4 {
  background-image: url(../images/webp/tra-bg-1.png);
  padding-top: 170px;
}

#hero-5 {
  background-image: url(../images/webp/hero-5.png);
  padding-top: 160px;
  padding-bottom: 80px;
}

.content {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Pełna wysokość widoku */
  overflow: hidden;
}

.content {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Pełna wysokość widoku */
  overflow: hidden;
}

#myVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
  /* Umieszcza wideo w tle */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1;
  /* Umieszcza nakładkę nad wideo */
}

.hero-txt {
  max-width: 50%;
  z-index: 2;
  /* Umieszcza tekst nad nakładką */
}

.hero-txt h2,
.hero-txt p {
  margin: 0;
  padding: 10px 65px;
}

.hero-stores-badge {
  margin-top: 20px;
  margin-right: 50px;
   flex-flow: row-reverse !important;
}

/* Media Queries for responsive design */
@media (max-width: 768px) {
  .overlay {
    justify-content: center;
    padding: 10px;
  }

  .hero-txt {
    max-width: 80%;
    text-align: center;
  }

  .hero-txt h2,
  .hero-txt p {
    padding: 10px 20px;
  }

  .hero-stores-badge {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-right: 0;
    /* Usuń margines prawy dla mniejszych ekranów */
  }

  .hero-stores-badge .store {
    margin: 0 5px;
  }
}

@media (max-width: 480px) {
  .hero-txt {
    max-width: 90%;
  }

  .hero-txt h2,
  .hero-txt p {
    padding: 10px 10px;
  }

  .hero-stores-badge {
    flex-direction: column;
    margin-right: 0;
    /* Usuń margines prawy dla mniejszych ekranów */
  }

  .hero-stores-badge .store {
    margin: 5px 0;
  }
}

.background-video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  /* lub inna wartość odpowiednia dla Twojego layoutu */
  overflow: hidden;
}

.background-video-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/webp/film.mp4') center center / cover no-repeat;
  z-index: -1;
}

#hero-6 {
  background-image: url(../images/webp/hero-6.jpg);
}

#hero-7 {
  /* background-image: url(../images/webp/film.mp4);
  background-position: bottom center;
  padding-top: 500px;
  padding-bottom: 100px; */
}

#hero-8 {
  background-image: url(../images/webp/hero-8.jpg);
}

.hero-9-text {
  background-image: url(../images/webp/hero-9.jpg);
  background-position: center bottom;
}

#hero-10 {
  background-image: url(../images/webp/hero-10.png);
  padding-top: 150px;
  padding-bottom: 100px;
}

#hero-11 {
  position: relative;
  background: -moz-linear-gradient(top, rgba(120, 59, 177, 1) 0%, rgba(71, 47, 173, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(120, 59, 177, 1) 0%, rgba(71, 47, 173, 1) 100%);
  background: linear-gradient(to bottom, rgba(120, 59, 177, 1) 0%, rgba(71, 47, 173, 1) 100%);
}

#hero-12 {
  background-image: url(../images/webp/hero-12.jpg);
}

/*------------------------------------------*/
/*   HERO SPACING & ALIGNMENT
/*------------------------------------------*/

.hero-row-200 {
  padding-top: 220px;
  padding-bottom: 180px;
}

.hero-row-180 {
  padding-top: 200px;
  padding-bottom: 160px;
}

.hero-row-160 {
  padding-top: 180px;
  padding-bottom: 140px;
}

.hero-row-140 {
  padding-top: 160px;
  padding-bottom: 140px;
}

.hero-row-120 {
  padding-top: 150px;
  padding-bottom: 120px;
}

.hero-row-100 {
  padding-top: 130px;
  padding-bottom: 100px;
}

/*------------------------------------------*/
/*  HERO APP LOGO
/*------------------------------------------*/

.hero-app-logo {
  margin-bottom: 25px;
}

#hero-4 .hero-app-logo {
  margin-bottom: 30px;
}

#hero-8 .hero-app-logo {
  margin-bottom: 40px;
}

/*------------------------------------------*/
/*  HERO APP BIG TITLE
/*------------------------------------------*/

.hero-app-logo span {
  font-size: 4.25rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -3px;
  padding-left: 20px;
}

/*------------------------------------------*/
/*  HERO TEXT
/*------------------------------------------*/

#hero-1 .hero-txt {
  margin-top: 120px;
}

#hero-9-content {
  padding-top: 180px;
  padding-bottom: 380px;
}

/*------------------------------------------*/
/*   Hero Headers
/*------------------------------------------*/

.hero-section h4,
.hero-section h3,
.hero-section h2 {
  margin-bottom: 20px;
}

#hero-1.hero-section h2 {
  margin-bottom: 25px;
}

#hero-10.hero-section h2 {
  margin-bottom: 35px;
}

.hero-section h4 span,
.hero-section h3 span,
.hero-section h2 span {
  font-weight: 700;
}

/*------------------------------------------*/
/*   Hero Paragraph
/*------------------------------------------*/

#hero-1 .hero-txt p,
#hero-11 .hero-txt p {
  padding-right: 5%;
}

#hero-5 .hero-txt p {
  padding-right: 15%;
}

#hero-8 .hero-txt p {
  padding-bottom: 30px;
}

#hero-9 .hero-txt p {
  padding: 0 10%;
  margin-bottom: 30px;
}

#hero-12 .hero-txt p {
  padding-bottom: 10px;
}

/*------------------------------------------*/
/*    HERO LINKS 
/*------------------------------------------*/

.hero-links {
  margin-top: 10px;
}

.hero-links span {
  font-size: 0.95rem;
  line-height: 1;
  margin-right: 25px;
}

.hero-links span:last-child {
  margin-right: 0
}

.hero-links span a {
  text-decoration: underline;
}

.hero-links span a:hover {
  color: #444;
}

/*------------------------------------------*/
/*    HERO BUTTONS
/*------------------------------------------*/

#hero-4 .btn {
  margin-top: 25px;
  margin-bottom: 50px;
}

/*------------------------------------------*/
/*    HERO STORE BADGES
/*------------------------------------------*/

.hero-stores-badge {
  margin-top: 40px;
}

#hero-12 .hero-stores-badge {
  margin-top: 30px;
}

.hero-stores-badge p {
  font-weight: 500;
  margin-bottom: 10px;
}

.hero-stores-badge span {
  display: block;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1;
  margin-top: 20px;
}

/*------------------------------------------*/
/*    HERO BOX
/*------------------------------------------*/

.hero-boxes {
  margin-top: 70px;
}

.hbox {
  width: 20%;
  display: inline-block;
  float: left;
  text-align: center;
}

.hbox span {
  display: block;
  margin-bottom: 14px;
}

/*------------------------------------------*/
/*   HERO IMAGE
/*------------------------------------------*/

.hero-img {
  text-align: center;
}

.hero-3-img {
  background-image: url(../images/webp/hero-3-img.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 2%;
  width: 50%;
  left: 50%;
}

.hero-9-image img {
  margin-top: -320px;
}

.hero-11-img {
  background-image: url(../images/webp/hero-11-img.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: 60%;
}

/*------------------------------------------*/
/*    HERO NEWSLETTER FORM
/*------------------------------------------*/

#hero-2 .newsletter-form {
  margin-top: 40px;
  margin-right: 10%;
}

/*------------------------------------------*/
/*    Newsletter Form Input
/*------------------------------------------*/

#hero-2 .newsletter-form .form-control {
  height: 54px;
  background-color: #fff;
  border: 1px solid #eee;
  border-right: none;
  color: #222;
  font-size: 1.05rem;
  font-weight: 400;
  padding: 0 1.4rem;
  box-shadow: none;
  -webkit-border-radius: 20px 0 0 20px;
  -moz-border-radius: 20px 0 0 20px;
  -o-border-radius: 20px 0 0 20px;
  border-radius: 20px 0 0 20px;
}

#hero-2 .newsletter-form .form-control:focus {
  border: 1px solid #eee;
  border-right: none;
  outline: 0;
  box-shadow: none;
}

/*------------------------------------------*/
/*    Newsletter Form Placeholder
/*------------------------------------------*/

#hero-2 .newsletter-form .form-control::-moz-placeholder {
  color: #999;
}

#hero-2 .newsletter-form .form-control:-ms-input-placeholder {
  color: #999;
}

#hero-2 .newsletter-form .form-control::-webkit-input-placeholder {
  color: #999;
}

/*------------------------------------------*/
/*    Newsletter Form Button
/*------------------------------------------*/

#hero-2 .newsletter-form .btn {
  width: 100%;
  height: 54px;
  background-color: #fff;
  border-color: #fff;
  color: #f4c744;
  font-size: 1.25rem;
  margin-top: 0;
  padding: 0 1.4rem;
  -webkit-border-radius: 0 20px 20px 0;
  -moz-border-radius: 0 20px 20px 0;
  -o-border-radius: 0 20px 20px 0;
  border-radius: 0 20px 20px 0;
}

#hero-2 .newsletter-form .btn:hover {
  color: #444;
}




/* ==========================================================================
   05.  FEATURES
   =========================================================================== */

#features-4 .bg-inner {
  background-image: url(../images/webp/tra-bg-1.png);
  background-position: center center;
  position: relative;
  z-index: 1;
}

#features-5 {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 90px;
  margin-bottom: 50px;
  margin-top: 50px;
}

.features-6-content {
  position: relative;
  z-index: 1;
}



#mfp-content {
  display: flex;
  justify-content: center;
  /* Wyśrodkowanie w poziomie */
  align-items: center;
  /* Wyśrodkowanie w pionie */
}

#presentVideo {
  width: 50vw;
  /* Połowa szerokości widoku */
  height: auto;
  /* Automatyczna wysokość, zachowująca proporcje */
  max-height: 100vh;
  /* Maksymalna wysokość dopasowana do widoku */
}

/*------------------------------------------*/
/*   FEATURES TEXT
/*------------------------------------------*/

#features-2 .col-md-6 {
  padding-right: 10px;
  padding-left: 10px;
}

/* Media query dla urządzeń mobilnych w trybie poziomym */
@media (max-width: 768px) {
  #myVideo {
    width: 100vw;
    /* Pełna szerokość widoku */
    height: auto;
    /* Automatyczna wysokość, zachowująca proporcje */
  }

  #presentVideo {
    width: 100vw;
    /* Połowa szerokości widoku */
    height: auto;
    /* Automatyczna wysokość, zachowująca proporcje */
    max-height: 100vh;
    /* Maksymalna wysokość dopasowana do widoku */
  }
}

/* Poprawia widoczność przycisku zamknięcia */
.mfp-close {
  color: white;
  /* Kolor tekstu */
  background-color: rgba(0, 0, 0, 0.5);
  /* Tło z przezroczystością */
  border-radius: 50%;
  /* Zaokrąglone rogi */
  width: 40px;
  /* Szerokość przycisku */
  height: 40px;
  /* Wysokość przycisku */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* Rozmiar czcionki */
  text-align: center;
  line-height: 40px;
  /* Wysokość linii dla wyrównania ikony */
  color: white !important;
  font-size: 47px;
}

/* Dodatkowe style dla lepszej widoczności przycisku zamknięcia podczas najechania */
.mfp-close:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* Mniej przezroczyste tło podczas najechania */
  cursor: pointer;
  /* Zmiana kursora na wskazujący */
}

/*------------------------------------------*/
/*   FEATURE BOX
/*------------------------------------------*/

.fbox-1 {
  text-align: center;
  margin-bottom: 40px;
}

.fbox-2 {
  background-color: #fff;
  text-align: center;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.fbox-3 {
  position: relative;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d0d0d0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 50px 30px;
  margin-bottom: 30px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  max-height: 420px !important;
  min-height: 420px !important;
}

.fbox-3 .box-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.fbox-3 span {
  color: #555;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.fbox-3:hover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.fbox-3:hover h5 {
  color: #222;
}

.fbox-3.rose-hover:hover {
  border-top: 1px solid #f402b8;
}

.fbox-3.rose-hover:hover .box-line {
  background-color: #f402b8;
  opacity: 1;
}

.fbox-3.rose-hover:hover>span {
  color: #f402b8;
}

.fbox-3.red-hover:hover {
  border-top: 1px solid #ee041a;
}

.fbox-3.red-hover:hover .box-line {
  background-color: #ee041a;
  opacity: 1;
}

.fbox-3.red-hover:hover>span {
  color: #ee041a;
}

.fbox-3.orange-hover:hover {
  border-top: 1px solid #ff8212;
}

.fbox-3.orange-hover:hover .box-line {
  background-color: #ff8212;
  opacity: 1;
}

.fbox-3.orange-hover:hover>span {
  color: #ff8212;
}

.fbox-3.green-hover:hover {
  border-top: 1px solid #4fcb36;
}

.fbox-3.green-hover:hover .box-line {
  background-color: #4fcb36;
  opacity: 1;
}

.fbox-3.green-hover:hover>span {
  color: #4fcb36;
}

.fbox-3.blue-hover:hover {
  border-top: 1px solid #1d07f4;
}

.fbox-3.blue-hover:hover .box-line {
  background-color: #1d07f4;
  opacity: 1;
}

.fbox-3.blue-hover:hover>span {
  color: #1d07f4;
}

.fbox-3.skyblue-hover:hover {
  border-top: 1px solid #01b7de;
}

.fbox-3.skyblue-hover:hover .box-line {
  background-color: #01b7de;
  opacity: 1;
}

.fbox-3.skyblue-hover:hover>span {
  color: #01b7de;
}

.fbox-3.purple-hover:hover {
  border-top: 1px solid #783bb1;
}

.fbox-3.purple-hover:hover .box-line {
  background-color: #783bb1;
  opacity: 1;
}

.fbox-3.purple-hover:hover>span {
  color: #783bb1;
}

.fbox-5 {
  margin-bottom: 30px;
}

.fbox-6 {
  margin-bottom: 40px;
}

/*------------------------------------------*/
/*   FEATURE BOX TYPOGRAPHY
/*------------------------------------------*/

.fbox-5-txt,
.fbox-6-txt {
  overflow: hidden;
  padding-left: 20px;
}

.fbox-1 h5,
.fbox-2 h5,
.fbox-3 h5 {
  margin-top: 15px;
  margin-bottom: 10px;
}

.fbox-4 h5 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.fbox-3 h5 {
  color: #757575;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.fbox-1 p,
.fbox-2 p,
.fbox-3 p,
.fbox-4 p,
.fbox-5 p,
.fbox-6 p {
  line-height: 1.5;
  margin-bottom: 0;
}

.fbox-1 p {
  padding: 0 5%;
}

/*------------------------------------------*/
/*   FEATURE BOX ICON
/*------------------------------------------*/

.fbox-5 span,
.fbox-6 span {
  width: 65px;
  height: 65px;
  text-align: center;
  float: left;
}

/*------------------------------------------*/
/*   FEATURES IMAGE
/*------------------------------------------*/

.fbox-4-img {
  margin-top: -60px;
  margin-bottom: -60px;
  position: relative;
  z-index: 999;
  position: relative;
}

.features-5-img,
.features-6-img {
  background-image: url(../images/webp/features-5-img.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  left: 50%;
}

.features-6-img {
  background-image: url(../images/webp/features-6-img.png);
}




/* ==========================================================================
   05.  CONTENT
   =========================================================================== */

#content-1 {
  background-position: center bottom;
}

#content-5 .bg-inner {
  position: relative;
  z-index: 1;
}

.content-7-image {
  background-image: url(../images/webp/content-7.png);
  background-position: bottom bottom;
  padding-bottom: 60px;
}

#content-7 .content-img {
  margin-top: -80px;
  margin-bottom: 50px;
}

/*------------------------------------------*/
/*   CONTENT SECTION TITLE 
/*------------------------------------------*/

#content-7 .section-title {
  margin-bottom: 120px;
}

/*------------------------------------------*/
/*   CONTENT TEXT
/*------------------------------------------*/

.content-txt {
  margin-bottom: 40px;
}

.cbox-1-txt {
  overflow: hidden;
  margin-left: 85px;
}

/*------------------------------------------*/
/*   CONTENT TEXT TYPOGRAPHY
/*------------------------------------------*/

.content-txt h2.h2-xs {
  margin-bottom: 25px;
}

.content-txt h5.h5-md {
  margin-top: 25px;
  margin-bottom: 10px;
}

.content-txt .cbox-1 h5.h5-md {
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 12px;
}

.content-txt .btn {
  margin-top: 20px;
}

/*------------------------------------------*/
/*   CONTENT BOX ICON
/*------------------------------------------*/

.cbox-1 {
  margin-bottom: 20px;
}

.cbox-1 span {
  width: 70px;
  height: 70px;
  text-align: center;
  float: left;
}

/*------------------------------------------*/
/*   CONTENT IMAGE
/*------------------------------------------*/

.content-img {
  text-align: center;
  margin-bottom: 40px;
}

.content-5-img {
  text-align: center;
  margin-bottom: -80px;
  position: relative;
  z-index: 999;
  position: relative;
}

/*------------------------------------------*/
/*   CONTENT TABS
/*------------------------------------------*/

#pills-tab {
  margin: 0 auto 80px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: #e35029;
  border-color: #e35029;
  color: #fff;
  box-shadow: 0 0 3px rgba(10, 10, 10, 0.05);
}

.nav-pills.yellow-navi .nav-link.active {
  background-color: #feca16;
  border-color: #feca16;
  color: #333;
}

.nav-pills.green-navi .nav-link.active {
  background-color: #41bf2b;
  border-color: #41bf2b;
}

.nav-pills.blue-navi .nav-link.active {
  background-color: #42a5f5;
  border-color: #42a5f5;
}

.nav-pills .nav-link {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #999;
  font-size: 1.1rem;
  padding: 10px 30px;
  margin-right: 10px;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}




/* ==========================================================================
   06.  STATISTIC
   =========================================================================== */

#statistic-1 {
  background-image: url(../images/webp/tra-bg-2.png);
}

/*------------------------------------------*/
/*    STATISTIC BLOCK
/*------------------------------------------*/

.statistic-block {
  text-align: center;
  margin-bottom: 30px;
}

#statistic-2 .statistic-block {
  padding: 40px;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*    Statistic Block Number
/*------------------------------------------*/

.statistic-number {
  font-size: 4.25rem;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

#statistic-2 .statistic-number {
  font-size: 4rem;
  letter-spacing: -0.5px;
  margin-top: 12px;
  margin-bottom: 6px;
}

/*------------------------------------------*/
/*    Statistic Text
/*------------------------------------------*/

.statistic-txt {
  margin-top: 10px;
}

.statistic-txt p {
  padding: 0 2%;
  margin-bottom: 0;
}

#statistic-2 .b-bottom {
  border-bottom: 1px solid #ccc;
}

#statistic-2 .b-right {
  border-right: 1px solid #ccc;
}




/* ==========================================================================
   07.  VIDEO
   =========================================================================== */

#video-1 {
  background-image: url(../images/webp/art_2.webp);
}

#video-2 {
  background-image: url(../images/webp/tra-bg-2.png);
}


#video-3 {
  background-image: url(../images/webp/tra-bg-2.png);
  padding-top: 100px;
  padding-bottom: 150px;
}

#video-4 {
  padding-top: 150px;
  padding-bottom: 100px;
}

.video-inner-bg {
  background-color: rgba(255, 255, 255, .6);
  position: relative;
  z-index: 1;
  margin-right: 40px;
  margin-left: 40px;
}

#video-4 .video-inner-bg {
  margin-right: 30px;
  margin-left: 30px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#video-3 .section-title {
  margin-bottom: 6.25rem;
}

/*------------------------------------------*/
/*   VIDEO CONTENT
/*------------------------------------------*/

.video-content {
  background-color: #fff;
  padding: 100px 80px;
  position: relative;
  z-index: 999;
  margin-top: -50px;
  margin-bottom: -50px;
}

#video-4 .video-content {
  background-color: transparent;
  padding: 0;
  margin: -50px 70px;
}

/*------------------------------------------*/
/*   VIDEO TYPOGRAPHY
/*------------------------------------------*/

#video-2 h2 {
  margin-bottom: 25px;
}

#video-3 h4 {
  margin-bottom: 25px;
}

#video-1 p {
  padding: 0 5%;
  margin-top: 10px;
  margin-bottom: 30px;
}

.video-section .btn {
  margin-top: 20px;
}

/*------------------------------------------*/
/*   VIDEO PREVIEW
/*------------------------------------------*/

.video-preview {
  text-align: center;
}

#video-1 .video-preview {
  position: relative;
  margin-top: 60px;
}




/* ===================================================================================
   08.  SCREENSHOTS
   =================================================================================== */

#screens-1 {
  background-image: url(../images/webp/tra-bg-5.png);
  padding-top: 100px;
  padding-bottom: 150px;
}

/*------------------------------------------*/
/*   SCREENSHOTS CAROUSEL
/*------------------------------------------*/

.screenshots-wrap {
  position: relative;
  margin-bottom: 100px;
}

#screens-1 .screenshots-wrap {
  margin-top: 78px;
}

.slick-slide {
  width: 298px;
}

.carousel-item {
  opacity: 0.25;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

#screens-2 .carousel-item {
  -webkit-transform: scale(.9);
  -ms-transform: scale(.9);
  transform: scale(.9);
}

.carousel-item.slick-current {
  opacity: 1;
}

#screens-2 .carousel-item.slick-current {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/*------------------------------------------*/
/*   IPHONE FRAME
/*------------------------------------------*/

.iphone-frame {
  position: absolute;
  top: -79px;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.iphone-frame img {
  max-width: 350px;
  margin: 0 auto;
  display: block;
}

/*------------------------------------------*/
/*   Screens Slick Carousel Dots
/*------------------------------------------*/

.screens-section .slick-dots {
  position: absolute;
  z-index: 4;
  bottom: -150px;
}

#screens-2.screens-section .slick-dots {
  bottom: -100px;
}

.screens-section .slick-dots li {
  margin: 0 2px;
  width: 15px;
  height: 15px;
}

.screens-section .slick-dots li button:before,
.screens-section.bg-lightgrey .slick-dots li button:before {
  content: "";
  background: #aaa;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: 1;
  width: 8px;
  height: 8px;
  left: auto;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}

.no-bg.screens-section .slick-dots li button:before,
.no-bg.screens-section.bg-lightgrey .slick-dots li button:before {
  background: #ccc;
}

.bg-green.screens-section .slick-dots li button:before,
.bg-purple.screens-section .slick-dots li button:before,
.bg-green.screens-section.bg-lightgrey .slick-dots li button:before,
.bg-purple.screens-section.bg-lightgrey .slick-dots li button:before {
  background: rgba(20, 20, 20, .2);
}

.screens-section .slick-dots li button:hover:before,
.screens-section .slick-dots li.slick-active button:before {
  background: #fff;
}

.no-bg.screens-section .slick-dots li button:hover:before,
.bg-lightgrey.screens-section .slick-dots li button:hover:before,
.no-bg.screens-section .slick-dots li.slick-active button:before,
.bg-lightgrey.screens-section .slick-dots li.slick-active button:before {
  background: #555;
}




/* ===================================================================================
   09.  TEAM
   =================================================================================== */

#team-1 {
  background-position: bottom center;
}

#team-1 .col-md-6 {
  padding-right: 10px;
  padding-left: 10px;
}

/*------------------------------------------*/
/*    TEAM MEMBER
/*------------------------------------------*/

.team-member {
  position: relative;
  background-color: #fff;
  padding: 50px 20px;
  text-align: center;
  margin-bottom: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.team-member .box-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.team-member:hover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.team-member.rose-hover:hover {
  border-bottom: 1px solid #f402b8;
}

.team-member.rose-hover:hover .box-line {
  background-color: #f402b8;
  opacity: 1;
}

.team-member.rose-hover:hover .team-img-meta span {
  color: #f402b8;
}

.team-member.red-hover:hover {
  border-bottom: 1px solid #ee041a;
}

.team-member.red-hover:hover .box-line {
  background-color: #ee041a;
  opacity: 1;
}

.team-member.red-hover:hover .team-img-meta span {
  color: #ee041a;
}

.team-member.orange-hover:hover {
  border-bottom: 1px solid #ff8212;
}

.team-member.orange-hover:hover .box-line {
  background-color: #ff8212;
  opacity: 1;
}

.team-member.orange-hover:hover .team-img-meta span {
  color: #ff8212;
}

.team-member.green-hover:hover {
  border-bottom: 1px solid #4fcb36;
}

.team-member.green-hover:hover .box-line {
  background-color: #4fcb36;
  opacity: 1;
}

.team-member.green-hover:hover .team-img-meta span {
  color: #4fcb36;
}

.team-member.blue-hover:hover {
  border-bottom: 1px solid #1d07f4;
}

.team-member.blue-hover:hover .box-line {
  background-color: #1d07f4;
  opacity: 1;
}

.team-member.blue-hover:hover .team-img-meta span {
  color: #1d07f4;
}

.team-member.skyblue-hover:hover {
  border-bottom: 1px solid #01b7de;
}

.team-member.skyblue-hover:hover .box-line {
  background-color: #01b7de;
  opacity: 1;
}

.team-member.skyblue-hover:hover .team-img-meta span {
  color: #01b7de;
}

.team-member.purple-hover:hover {
  border-bottom: 1px solid #783bb1;
}

.team-member.purple-hover:hover .box-line {
  background-color: #783bb1;
  opacity: 1;
}

.team-member.purple-hover:hover .team-img-meta span {
  color: #783bb1;
}

/*------------------------------------------*/
/*    TEAM MEMBER PHOTO
/*------------------------------------------*/

.team-member-photo {
  position: relative;
  z-index: 1;
  margin: 0 25px 25px;
}

.team-member-photo img {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

/*------------------------------------------*/
/*    TEAM MEMBER TYPOGRAPHY
/*------------------------------------------*/

.team-img-meta span {
  color: #888;
  font-size: 1rem;
  line-height: 1;
  font-weight: 300;
  display: block;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.join-team h4 {
  font-weight: 400;
  margin-bottom: 10px;
}

.join-team h4 span {
  font-weight: 700;
  margin-right: 5px;
}

.join-team p {
  margin-bottom: 25px;
  padding: 0 10%;
}

/*------------------------------------------*/
/*    Team Member Social Links
/*------------------------------------------*/

.tm-social ul {
  display: inline-block;
  padding-left: 0;
  margin: 25px auto 0;
}

.tm-social ul li {
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
  clear: none !important;
  padding: 0;
}

.tm-social a {
  color: #999;
  font-size: 1.1rem;
  line-height: 1;
  margin: 0 10px;
  display: block;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

.tm-social a.ico-facebook:hover {
  color: #3b5998;
}

.tm-social a.ico-twitter:hover {
  color: #00a9ed;
}

.tm-social a.ico-instagram:hover {
  color: #e44772
}

.tm-social a.ico-dribbble:hover {
  color: #d92d84;
}

.tm-social a.ico-behance:hover {
  color: #2473f6;
}

.tm-social a.ico-pinterest:hover {
  color: #ac281a;
}

.tm-social a.ico-linkedin:hover {
  color: #015886;
}

.tm-social a.ico-google-plus:hover {
  color: #cd1111;
}

.tm-social a.ico-youtube:hover {
  color: #cd1b20;
}

.tm-social a.ico-tumblr:hover {
  color: #3a5976;
}

.tm-social a.ico-vk:hover {
  color: #3b5998;
}




/* ===================================================================================
   10. PRICING TABLES
   =================================================================================== */

/*------------------------------------------*/
/*   PRICING TABLE
/*------------------------------------------*/

.pricing-table {
  background-color: #fff;
  border: 1px solid #d0d0d0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 50px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.pricing-table:hover {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/*------------------------------------------*/
/*    Pricing Table Price Plan
/*------------------------------------------*/

.pricing-plan h4 {
  color: #444;
  font-weight: 400;
  letter-spacing: -1px;
  margin-bottom: 25px;
}

.pricing-plan h4 span {
  color: #222;
  font-weight: 700;
}

.pricing-table span.price {
  font-size: 50px;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: -1px;
}

.pricing-table span.price2 {
  font-size: 20px;
  line-height: 20px;
  font-weight: 300;
  letter-spacing: -1px;
}

.pricing-table sup {
  font-size: 34px;
  font-weight: 500;
  top: -6px;
  right: 3px;
}

.pricing-table sup.validity {
  color: #757575;
  font-weight: 300;
  font-size: 1.25rem;
  top: 0px;
  left: 3px;
}

.price,
.price2 {
  display: block;
}

.price-container {
  text-align: center;
}

.price2 {
  padding-top: 10px;
  /* ustaw większy odstęp według potrzeb */
}

/*------------------------------------------*/
/*    Pricing Table Body
/*------------------------------------------*/

ul.features {
  color: #333;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 300;
  padding-top: 10px;
}

ul.features li {
  padding: 9px 0;
}

ul.features li .svg-inline--fa {
  margin-right: 6px;
}

ul.features li.disabled-option {
  color: #888;
}

/*------------------------------------------*/
/*   Pricing Table Button
/*------------------------------------------*/

.pricing-table .btn {
  display: block;
  width: 100%;
  margin-top: 30px;
}

/*------------------------------------------*/
/*   PRICING NOTICE TEXT
/*------------------------------------------*/

.pricing-notice p {
  margin-top: 10px;
  padding: 0 8%;
}

.pricing-notice p span {
  font-weight: 700;
  margin-right: 5px;
}




/* ===================================================================================
   11.  TESTIMONIALS
   =================================================================================== */

/*------------------------------------------*/
/*   TESTIMONIALS CAROUSEL
/*------------------------------------------*/

.review-1,
.review-2 {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 30px;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

.review-2 {
  padding: 0;
  -webkit-transform: scale(.85);
  -ms-transform: scale(.85);
  transform: scale(.85);
}

.review-2 .review-txt {
  background-color: #fff;
  border: 1px solid #eee;
  padding: 45px 40px 55px;
  margin: 0 2px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.review-1,
.review-2 {
  opacity: 0.3;
}

.review-1.slick-current,
.review-2.slick-current {
  opacity: 1;
}

.review-2.slick-current {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/*------------------------------------------*/
/*    Testimonial Message Avatar 
/*------------------------------------------*/

.review-1 .testimonial-avatar img,
.review-2 .testimonial-avatar img {
  width: 90px;
  height: 90px;
  display: inline-block;
  margin: 0 auto 15px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

.review-2 .testimonial-avatar2 img {
  width: 150px;
  height: 90px;
  display: inline-block;
  margin: 0 auto 15px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

.review-2 .testimonial-avatar img {
  margin: -45px auto 15px;
}

/*------------------------------------------*/
/*   Testimonial Message Text
/*------------------------------------------*/

.review-2 h5 {
  margin-bottom: 20px;
}

.review-1 p,
.review-2 p {
  color: #666;
  font-size: 1.05rem;
  font-style: italic;
}

p.testimonial-autor {
  color: #000;
  font-size: 1.1rem;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 0;
}

.review-2 p.testimonial-autor {
  line-height: 1.2;
  margin-bottom: 0;
}

p.testimonial-autor {
  color: #000;
  font-size: 1.1rem;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 0;
}

.review-2 p.testimonial-autor {
  line-height: 1.2;
  margin-bottom: 0;
}

.testimonial-avatar span {
  font-size: 0.95rem;
  line-height: 1;
}

/*------------------------------------------*/
/*   App Rating
/*------------------------------------------*/

.app-rating .svg-inline--fa {
  color: #ff8000;
  font-size: 0.8rem;
  line-height: 1;
  margin-right: 1px;
}

.app-rating .svg-inline--fa:last-child {
  margin-right: 0;
}

/*------------------------------------------*/
/*   Reviews Slick Carousel Dots
/*------------------------------------------*/

.reviews-section .slick-dots {
  position: absolute;
  z-index: 4;
  bottom: -30px;
}

.reviews-section .slick-dots li {
  margin: 0 2px;
  width: 15px;
  height: 15px;
}

.reviews-section .slick-dots li button:before {
  content: "";
  background: #ccc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: 1;
  width: 8px;
  height: 8px;
  left: auto;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
}

.reviews-section .slick-dots li button:hover:before {
  background: #999;
}

.reviews-section .slick-dots li.slick-active button:before {
  background: #666;
}




/* ==========================================================================
   12.  FAQs
   =========================================================================== */

#faqs-1 {
  background-position: center bottom;
}

/*------------------------------------------*/
/*    FAQs TYPOGRAPHY
/*------------------------------------------*/

.question {
  margin-bottom: 25px;
}

.question h5 {
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.question p {
  color: #666;
}

.more-questions-btn {
  margin-top: 50px;
}

.more-questions-btn .btn {
  margin-top: 20px;
}




/* ==========================================================================
   13.  DOWNLOAD
   =========================================================================== */

#download-1 {
  background-image: url(../images/webp/tra-bg-1.png);
}

#download-2 .bg-inner {
  background-image: url(../images/webp/download-2.jpg.webp);
  position: relative;
  z-index: 1;
}

#download-3 .bg-inner {
  background-image: url(../images/webp/download-2.jpg.webp);
  position: relative;
  z-index: 1;
}

#download-4.bg-lightgrey {
  background-position: bottom center;
}

/*------------------------------------------*/
/*   DOWNLOAD TEXT
/*------------------------------------------*/

#download-4 .download-txt {
  text-align: center;
  margin-bottom: 50px;
}

/*------------------------------------------*/
/*   DOWNLOAD TYPOGRAPHY
/*------------------------------------------*/

.download-section h2 {
  margin-bottom: 15px;
}

#download-1 p,
#download-4 p {
  padding: 0 10%;
}

.download-section .stores-badge {
  margin-top: 30px;
}

/*------------------------------------------*/
/*   DOWNLOAD IMAGE
/*------------------------------------------*/

.download-2-img,
.download-3-img {
  margin-top: -60px;
  margin-bottom: -60px;
  position: relative;
  z-index: 999;
  position: relative;
}




/* ===================================================================================
   14.  MORE APPS
   =================================================================================== */

.m-img {
  background-color: #f0f0f0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 60px 40px;
}

/*------------------------------------------*/
/*    MORE APPS TYPOGRAPHY
/*------------------------------------------*/

.more-app-box h5 {
  line-height: 1;
  margin-bottom: 5px;
  margin-top: 25px;
}

.more-app-box span.app-cat {
  color: #888;
  font-size: 0.95rem;
  line-height: 1;
  display: block;
  margin-bottom: 15px;
}

.more-app-box a {
  color: #888;
  margin-right: 12px;
}

.m-links a span {
  text-decoration: underline;
  margin-left: 1px;
}

.more-app-box a:hover {
  color: #222;
}




/* ==========================================================================
   15.  BRANDS
   =========================================================================== */

#brands-1 {
  padding-top: 70px;
  padding-bottom: 40px;
}

#brands-1.brands-section-thin {
  padding-top: 0;
  padding-bottom: 0;
}

/*------------------------------------------*/
/*    BRANDS LOGO HOLDER
/*------------------------------------------*/

#brands-1 .brand-logo {
  margin-bottom: 30px;
}

#brands-1 .brand-logo img {
  padding: 0 15px;
}




/* ==========================================================================
   16.  PRESS
   =========================================================================== */

/*------------------------------------------*/
/*    PRESS LOGO
/*------------------------------------------*/

.press-logo {
  overflow: hidden;
  position: relative;
  background-color: transparent;
  background-color: #fff;
  padding: 70px 30px;
  margin-bottom: 40px;
  text-align: center;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

.press-logo img {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -moz-transform: scale(1);
  overflow: hidden;
  -webkit-transition: transform 450ms;
  -moz-transition: transform 450ms;
  -o-transition: transform 450ms;
  transition: transform 450ms;
}

.press-logo:hover {
  background-color: #fff;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}

.press-logo:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
}

/*------------------------------------------*/
/*    PRESS TEXT
/*------------------------------------------*/

.press-txt p {
  margin-bottom: 30px;
  padding: 0 10%;
}




/* ==========================================================================
   17.  NEWSLETTER
   =========================================================================== */

#newsletter-1 {
  background-image: url(../images/webp/tra-bg-1.png);
  padding-top: 120px;
  padding-bottom: 100px;
}

#newsletter-2 {
  background-image: url(../images/webp/tra-bg-2.png);
  padding-top: 100px;
  padding-bottom: 100px;
}

#newsletter-1 .newsletter-form {
  margin: 50px 15% 0;
}

/*------------------------------------------*/
/*    Newsletter Form Input
/*------------------------------------------*/

.newsletter-section .newsletter-form .form-control {
  height: 60px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 400;
  padding: 0 0.5rem;
  margin-right: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 0;
  -moz-box-shadow: 0 0;
  box-shadow: 0 0;
}

.newsletter-section .newsletter-form .form-control:focus {
  border: none;
  border-bottom: 2px solid #fff;
  outline: 0;
  box-shadow: none;
}

/*------------------------------------------*/
/*    Newsletter Form Placeholder
/*------------------------------------------*/

.newsletter-section .newsletter-form .form-control::-moz-placeholder {
  color: #eee;
}

.newsletter-section .newsletter-form .form-control:-ms-input-placeholder {
  color: #eee;
}

.newsletter-section .newsletter-form .form-control::-webkit-input-placeholder {
  color: #eee;
}

/*------------------------------------------*/
/*    Newsletter Form Button
/*------------------------------------------*/

.newsletter-section .newsletter-form .btn {
  height: 60px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  font-size: 1.35rem;
  padding: 0 1rem;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 0;
  -moz-box-shadow: 0 0;
  box-shadow: 0 0;
}

.newsletter-section .newsletter-form .btn:hover {
  padding: 0 1.25rem;
}

.newsletter-section .newsletter-form .btn:hover::before {
  opacity: 0;
}




/* ==========================================================================
   18.  BLOG
   =========================================================================== */

#blog-page {
  margin-top: 160px;
  margin-bottom: 100px;
}

#single-post-page {
  margin-top: 160px;
  margin-bottom: 60px;
}

/*------------------------------------------*/
/*    BLOG POST
/*------------------------------------------*/

.blog-post {
  margin-bottom: 40px;
}

.posts-holder .blog-post {
  margin-bottom: 60px;
}

/*------------------------------------------*/
/*    BLOG TYPOGRAPHY
/*------------------------------------------*/

.blog-post h5 {
  margin-bottom: 15px;
}

.blog-post-txt p {
  margin-bottom: 35px;
}

.blog-post-txt span,
.sblog-post-txt span {
  font-size: 0.95rem;
  display: block;
  margin-bottom: 12px;
}

.posts-holder .blog-post-txt span {
  margin-bottom: 8px;
}

.blog-post-meta span {
  color: #888;
  font-size: 0.95rem;
  margin-right: 30px;
}

.blog-post a {
  color: #111;
  font-weight: 600;
  text-decoration: underline;
}

.blog-post a:hover {
  color: #888;
}

.post-inner-img p.p-sm {
  color: #999;
  font-style: italic;
  margin-top: 10px;
  margin-bottom: 0;
}

.blog-post-img {
  position: relative;
}

/*------------------------------------------*/
/*    BLOG PAGE RIGHT SIDEBAR 
/*------------------------------------------*/

#sidebar-right h5.h5-md {
  margin-bottom: 20px;
}

/*------------------------------------------*/
/*   Blog Search Form
/*------------------------------------------*/

#search-field .btn {
  padding: 14px 18px;
  margin-top: 0;
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
}

#search-field .form-control:focus {
  border-color: #999;
  outline: 0px none;
  box-shadow: none;
}

/*------------------------------------------*/
/*   Blog Categories
/*------------------------------------------*/

ul.blog-category-list>li {
  padding: 10px 0;
  border-bottom: 1px dashed #c0c0c0;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

ul.blog-category-list>li:first-child {
  padding: 0 0 10px;
}

ul.blog-category-list>li:last-child {
  padding: 10px 0 0;
  border-bottom: none;
}

ul.blog-category-list>li a,
ul.blog-category-list>li span {
  color: #555;
}

ul.blog-category-list li .svg-inline--fa {
  margin-right: 10px;
}

ul.blog-category-list li a:hover {
  color: #000;
  text-decoration: none;
}

/*------------------------------------------*/
/*   Popular Posts
/*------------------------------------------*/

.popular-posts li {
  padding: 14px 0;
  border-bottom: 1px dashed #c0c0c0;
}

.popular-posts li:first-child {
  padding: 0 0 14px;
}

.popular-posts li:last-child {
  padding: 14px 0 0;
  border-bottom: 0;
}

/*------------------------------------------*/
/*  Popular Post Typography
--------------------------------------------*/

.post-summary a {
  color: #555;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.popular-posts .post-summary a:hover {
  color: #000;
  text-decoration: underline;
}

.popular-posts p {
  color: #888;
  font-size: 0.875rem;
  margin-top: 6px;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*   Blog Page Popular Tags
/*------------------------------------------*/

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  border: 1px solid #ddd;
  background-color: #fbfbfb;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 5px 10px;
  margin-right: 2px;
  -webkit-transition: all 450ms ease-in-out;
  -moz-transition: all 450ms ease-in-out;
  -o-transition: all 450ms ease-in-out;
  -ms-transition: all 450ms ease-in-out;
  transition: all 450ms ease-in-out;
}

.badge a {
  color: #666 !important;
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.42857;
}

.badge:hover {
  background-color: #444;
  border-color: #444;
  color: #fff;
}

.badge:hover a {
  color: #fff !important;
}

/*------------------------------------------*/
/*    BLOG PAGE PAGINATION 
/*------------------------------------------*/

.page-link {
  color: #666;
  padding: .65rem .95rem;
}

.page-link:hover,
.page-link:focus {
  color: #444;
  background-color: #f2f2f2;
  border-color: #dee2e6;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #444;
  border-color: #444;
}

/*------------------------------------------*/
/*    SINGLE POST SHARE ICONS
/*-----------------------------------------*/

.share-social-icons {
  display: inline-block;
  padding-left: 0;
}

.share-social-icons li {
  width: auto !important;
  display: inline-block !important;
  vertical-align: top;
  clear: none !important;
  padding: 0;
}

a.share-ico {
  width: 90px;
  height: 35px;
  font-size: 18px;
  line-height: 35px !important;
  text-align: center;
  margin-right: 3px;
  display: block;
  opacity: 0.75;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

a.share-ico.ico-facebook {
  background-color: #3b5998;
  border-color: #3b5998;
  color: #fff;
}

a.share-ico.ico-twitter {
  background-color: #00a9ed;
  border-color: #00a9ed;
  color: #fff;
}

a.share-ico.ico-behance {
  background-color: #00a8e7;
  border-color: #00a8e7;
  color: #fff;
}

a.share-ico.ico-google-plus {
  background-color: #cd1111;
  border-color: #cd1111;
  color: #fff;
}

a.share-ico.ico-linkedin {
  background-color: #015886;
  border-color: #015886;
  color: #fff;
}

a.share-ico.ico-dribbble {
  background-color: #d92d84;
  border-color: #d92d84;
  color: #fff;
}

a.share-ico.ico-instagram {
  background-color: #beb3a8;
  border-color: #beb3a8;
  color: #fff;
}

a.share-ico.ico-pinterest {
  background-color: #ac281a;
  border-color: #ac281a;
  color: #fff;
}

a.share-ico.ico-dropbox {
  background-color: #008ad2;
  border-color: #008ad2;
  color: #fff;
}

a.share-ico.ico-skype {
  background-color: #00a9ed;
  border-color: #00a9ed;
  color: #fff;
}

a.share-ico.ico-youtube {
  background-color: #cd1b20;
  border-color: #cd1b20;
  color: #fff;
}

a.share-ico.ico-tumblr {
  background-color: #3a5976;
  border-color: #3a5976;
  color: #fff;
}

a.share-ico.ico-vimeo {
  background-color: #00adee;
  border-color: #00adee;
  color: #fff;
}

a.share-ico.ico-flickr {
  background-color: #d2d2d2;
  border-color: #d2d2d2;
  color: #fff;
}

a.share-ico.ico-github {
  background-color: #222;
  border-color: #222;
  color: #fff;
}

a.share-ico.ico-renren {
  background-color: #364a83;
  border-color: #364a83;
  color: #fff;
}

a.share-ico.ico-vk {
  background-color: #3b5998;
  border-color: #3b5998;
  color: #fff;
}

a.share-ico.ico-xing {
  background-color: #015f5e;
  border-color: #015f5e;
  color: #fff;
}

a.share-ico.ico-weibo {
  background-color: #be4443;
  border-color: #be4443;
  color: #fff;
}

a.share-ico.ico-rss {
  background-color: #ff6600;
  border-color: #ff6600;
  color: #fff;
}

a.share-ico.ico-digg {
  background-color: #222;
  border-color: #222;
  color: #fff;
}

a.share-ico.ico-deviantart {
  background-color: #57675d;
  border-color: #57675d;
  color: #fff;
}

a.share-ico.ico-envelope {
  background-color: #999;
  border-color: #999;
  color: #fff;
}

a.share-ico.ico-delicious {
  background-color: #0A0A0A;
  border-color: #0A0A0A;
  color: #fff;
}

a.share-ico:hover {
  opacity: 1;
}

/*------------------------------------------*/
/*    SINGLE POST META
/*------------------------------------------*/

.comment-meta {
  margin-bottom: 10px;
}

.comment-meta h5 {
  line-height: 1.1;
  margin-bottom: 0;
}

.comment-date {
  color: #888;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.btn-reply a {
  background-color: #888;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 3px 8px;
  text-transform: uppercase;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.btn-reply a:hover {
  color: #fff;
  background-color: #48af4b;
}

.comment-reply {
  margin-left: 40px;
}

.single-post-comments hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

/*------------------------------------------*/
/*    SINGLE POST COMMENT FORM
/*------------------------------------------*/

#leave-comment h4.h4-lg {
  margin-bottom: 5px;
}

.comment-form {
  position: relative;
}

.comment-form p {
  color: #333;
  font-size: 15px;
  line-height: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 5px;
  display: block;
}

.comment-form .form-control {
  background-color: #fff;
  border-color: #ccc;
  color: #333;
  height: 46px;
  font-size: 15px;
  font-weight: 300;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: none;
}

.comment-form .form-control:focus {
  border-color: #48af4b;
  outline: 0px none;
  box-shadow: none;
}

.comment-form textarea {
  min-height: 200px;
}

/*------------------------------------------*/
/*    Forms Message
/*------------------------------------------*/

.comment-form label.error {
  color: #f6412d;
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 20px;
}

.comment-form-msg {
  position: absolute;
  bottom: 10px;
  left: 350px;
}

.comment-form-msg .error,
.comment-form-msg .loading {
  color: #45afff;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 600;
}

.comment-form-msg .error {
  color: #f6412d;
}




/* ==========================================================================
   19.  CONTACTS
   =========================================================================== */

#contacts-1.bg-lightgrey {
  background-position: bottom center;
}

#contacts-2 {
  background-image: url(../images/webp/tra-bg-5.png);
}

.contacts-section .form-holder {
  position: relative;
}

/*------------------------------------------*/
/*    Contact Form Input
/*------------------------------------------*/

.contact-form .form-control {
  height: 54px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 0 0;
  color: #444;
  font-size: 1rem;
  font-weight: 300;
  padding: 0 20px;
  margin-bottom: 25px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

#contacts-2 .contact-form .form-control {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #666;
  color: #f5f5f5;
  font-size: 1.35rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding: 0 5px;
  margin-bottom: 35px;
}

.contact-form .custom-select {
  display: inline-block;
  width: 100%;
  height: 54px;
  line-height: 1;
  color: #444;
  font-size: 1rem;
  font-weight: 300;
  padding: 0 15px;
  margin-bottom: 25px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.bg-lightgrey .contact-form .form-control {
  border: 1px solid #ddd;
}

/*------------------------------------------*/
/*    Contact Form Textarea
/*------------------------------------------*/

.contact-form textarea {
  min-height: 220px;
}

.contact-form textarea.form-control {
  padding: 20px;
}

#contacts-2 .contact-form textarea.form-control {
  padding: 20px 5px;
}

/*------------------------------------------*/
/*    Contact Form Placeholder
/*------------------------------------------*/

.contact-form .form-control::-moz-placeholder {
  color: #555;
}

.contact-form .form-control:-ms-input-placeholder {
  color: #555;
}

.contact-form .form-control::-webkit-input-placeholder {
  color: #555;
}

#contacts-2 .contact-form .form-control::-moz-placeholder {
  color: #666;
}

#contacts-2 .contact-form .form-control:-ms-input-placeholder {
  color: #666;
}

#contacts-2 .contact-form .form-control::-webkit-input-placeholder {
  color: #666;
}

/*------------------------------------------*/
/*    Contact Form Input Focus
/*------------------------------------------*/

.contact-form .form-control:focus,
.contact-form .custom-select:focus {
  outline: 0px none;
  box-shadow: none;
  border-color: #6bbb28;
}

#contacts-2 .contact-form .form-control:focus {
  outline: 0px none;
  box-shadow: none;
  border-color: #fff;
}

/*------------------------------------------*/
/*    Contact Form Message
/*------------------------------------------*/

.contact-form label.error {
  color: #f6412d;
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 20px;
  margin-left: 35px;
}

#contacts-2 .contact-form label.error {
  margin-left: 5px;
  margin-bottom: 30px;
}

.contact-form-msg {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.contact-form-msg .error,
.contact-form-msg .loading {
  color: #45afff;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 600;
}

.contact-form-msg .error {
  color: #f6412d;
}




/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.footer {
  background-position: bottom center;
}

/*------------------------------------------*/
/*   FOOTER TYPOGRAPHY
/*------------------------------------------*/

.bg-dark.footer .white-color p {
  color: #ddd;
}

.bg-dark.footer .white-color h5 a {
  color: #ccc;
}

.footer h5 {
  margin-bottom: 20px;
}

.footer-info p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-top: 20px;
}

.footer-socials-links h5 {
  letter-spacing: 0;
  margin-bottom: 13px;
}

.footer-socials-links h5 a {
  text-decoration: underline;
}

a.foo-facebook:hover {
  color: #3b5998;
}

a.foo-twitter:hover {
  color: #00a9ed;
}

a.foo-instagram:hover {
  color: #e44772
}

a.foo-dribbble:hover {
  color: #d92d84;
}

a.foo-behance:hover {
  color: #2473f6;
}

a.foo-pinterest:hover {
  color: #ac281a;
}

a.foo-linkedin:hover {
  color: #015886;
}

a.foo-google-plus:hover {
  color: #cd1111;
}

a.foo-youtube:hover {
  color: #cd1b20;
}

a.foo-tumblr:hover {
  color: #3a5976;
}

a.foo-vk:hover {
  color: #3b5998;
}

.bg-dark.footer .white-color h5 a:hover {
  color: #fff;
}

/*------------------------------------------*/
/*   FOOTER LOGO
/*------------------------------------------*/

#footer-4 .footer-logo {
  margin-bottom: 40px;
}

/*------------------------------------------*/
/*   FOOTER LINKS
/*------------------------------------------*/

.foo-links {
  display: inline-block;
  padding-left: 0;
  margin: 0 auto;
}

.foo-links li {
  width: auto !important;
  display: block !important;
  vertical-align: top;
  clear: none !important;
  margin: 0 0 8px 0;
  padding: 0;
}

#footer-3 .foo-links li,
#footer-4 .foo-links li,
.bottom-footer .foo-links li {
  display: inline-block !important;
  margin-left: 22px;
}

.foo-links li a {
  font-size: 1.05rem;
  line-height: 1.5;
}

#footer-3 .foo-links li a,
.bottom-footer .foo-links li a {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

.bg-dark .foo-links li a {
  color: #ddd;
}

.foo-links li a:hover {
  color: #000;
  text-decoration: underline;
}

.bg-dark .foo-links li a:hover {
  color: #ddd;
}

/*------------------------------------------*/
/*   FOOTER STORE BADGES
/*------------------------------------------*/

.footer-stores-badge a.store {
  display: block;
  margin-bottom: 14px;
}

/*------------------------------------------*/
/*   BOTTOM FOOTER
/*------------------------------------------*/

.bottom-footer {
  border-top: 1px solid #ddd;
  margin-top: 30px;
  padding-top: 50px;
}

.bg-grey .bottom-footer {
  border-color: #ccc;
}

.bg-dark .bottom-footer {
  border-color: #555;
}

/*------------------------------------------*/
/*   FOOTER COPYRIGHT
/*------------------------------------------*/

.footer-copyright p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

#footer-2 .footer-copyright p {
  margin-bottom: 2px;
}

.footer-copyright p span {
  font-weight: 500;
}




/* ==========================================================================
   21. BOTTOM QUICK FORM
   ========================================================================== */

.bottom-form {
  background-color: #fff;
  min-width: 260px;
  max-width: 260px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .33);
  position: fixed;
  right: 6em;
  bottom: 0;
  z-index: 998;
}

/*------------------------------------------*/
/*   QUICK FORM HEADER
/*------------------------------------------*/

.bottom-form-header {
  background-color: #41bf2b;
  border-color: #41bf2b;
  padding: 14px 20px;
  min-height: 45px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  cursor: pointer;
}

.bottom-form-header span {
  color: #fff;
  font-size: 30px;
  line-height: 1;
  display: inline-block;
  float: left;
  margin-right: 8px;
}

.bottom-form-header p {
  color: #fff;
  font-size: 0.9rem;
  line-height: 30px !important;
  display: inline-block;
  margin-bottom: 0;
}

/*------------------------------------------*/
/*   QUICK FORM FORM
/*------------------------------------------*/

.bottom-form-holder {
  height: 311px;
  padding-bottom: 30px;
}

.bottom-form-control {
  width: 100%;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  line-height: 1;
  padding: 18px;
}

.quick-contact-form textarea {
  min-height: 60px;
  border-bottom: none;
}

.quick-contact-form .btn {
  font-size: 0.9rem;
  padding: 0.6rem 1.75rem;
  margin-right: 30px;
}

/*------------------------------------------*/
/*    Quick Form Message
/*------------------------------------------*/

.quick-contact-form label.error {
  color: #f6412d;
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 20px;
  margin-left: 35px;
}

.quick-contact-form .contact-form-msg {
  position: absolute;
  bottom: 80px;
  left: 20px;
}

.quick-contact-form .contact-form-msg .error,
.quick-contact-form .contact-form-msg .loading {
  color: #45afff;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 300;
}

.quick-contact-form .contact-form-msg .error {
  color: #f6412d;
}




/* ==========================================================================
   22. TERMS PAGE
   ========================================================================== */

#terms-page {
  margin-top: 160px;
  margin-bottom: 60px;
}

/*------------------------------------------*/
/*   TERMS PAGE TYPOGRAPHY
/*------------------------------------------*/

#terms-page p.p-notice {
  font-weight: 700;
}

.terms-box {
  margin-bottom: 40px;
}

.terms-box h4 {
  margin-bottom: 15px;
}

.terms-box p span {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  margin-right: 5px;
}

.terms-box p a {
  color: #333;
  font-weight: 700;
  text-decoration: underline;
}

.terms-box p a:hover {
  color: #666;
}

/*------------------------------------------*/
/*    Terms / Privacy Title
/*------------------------------------------*/

ul.terms-list {
  list-style: disc;
  margin: 20px 0 20px 25px;
}

ul.terms-list li {
  margin-bottom: 10px;
}

ul.terms-list li:last-child {
  margin-bottom: 0;
}




/* ===================================================================================
   23.  SCROLL TO TOP
   =================================================================================== */

#scrollUp {
  display: none;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-image: url(../images/webp/back-to-top.webp);
  background-repeat: no-repeat;
  background-position: 50% 48%;
  background-color: rgba(35, 35, 35, 0.5);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  transition: all 250ms linear;
}

#scrollUp:hover {
  background-color: #666;
}

nav a#pull {
  display: none;
}

.content2 {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Pełna wysokość widoku */
  overflow: hidden;
}


.content {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Pełna wysokość widoku */
  overflow: hidden;
}

#myVideo2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  /* height: 55%; */
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
  /* Umieszcza wideo w tle */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1;
  /* Umieszcza nakładkę nad wideo */
}

/* .custom-visible{
  display: inherit !important
}
 */

/* Media Queries for responsive design */
@media (max-width: 768px) {

  .wide-70 {
    padding-top: 10px !important;
    padding-bottom: 70px;
  }


  .content-txt {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  .overlay {
    justify-content: center;
    padding: 10px;
  }

  .custom-visible {
    display: none !important
  }

  .content2 {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
  }

  .content {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
  }

  #myVideo2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    /* height: 70%; */
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
    /* Umieszcza wideo w tle */
  }

  .hero-txt {
    max-width: 80%;
    text-align: center;
  }

  .hero-txt h2,
  .hero-txt p {
    padding: 10px 20px;
  }

  .hero-stores-badge {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-right: 0;
    /* Usuń margines prawy dla mniejszych ekranów */
  }

  .hero-stores-badge .store {
    margin: 0 5px;
  }
}

@media (max-width: 480px) {
  .privacy-text {
    font-size: 1.3rem;
  }

  #hero-7 {
    padding-top: 10px !important;
    padding-bottom: 0px !important;
  }

  .grey-color {
    font-size: 1.3rem;
  }

  .footer {
    padding: 10px;
  }

  .wide-70 {
    padding-top: 10px !important;
    padding-bottom: 70px;
  }

  .content-txt {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  .hero-txt {
    max-width: 90%;
  }

  .custom-visible {
    display: none !important
  }

  .content2 {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
  }

  .content {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
  }

  .hero-txt h2,
  .hero-txt p {
    padding: 10px 10px;
  }

  .hero-stores-badge {
    flex-direction: column;
    margin-right: 0;
    /* Usuń margines prawy dla mniejszych ekranów */
  }

  .hero-stores-badge .store {
    margin: 5px 0;
  }


}

.fixed-height {
  min-height: 300px;
  /* dopasuj do potrzeb, np. 260px jeśli logo wysokie */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-height: 300px;
}


.pricing-card {
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cta-button {
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
}

.badge {
  position: absolute;
  top: -10px;
  right: 20px;
}

.dedicated-option {
  transition: all 0.2s ease;
}

.dedicated-option:hover {
  background-color: #f0f9ff;
}

.dedicated-option.selected {
  background-color: #e0f2fe;
  border-color: #0ea5e9;
}


.feature-card {
  transition: all 0.3s ease;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.icon-container {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.blue-gradient {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.green-gradient {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.header-gradient {
  background: white
}





.trusted-card {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.trusted-card.show {
  opacity: 1;
  transform: translateY(0);
    box-shadow: 0 5px 15px rgba(31, 171, 137, 0.2);

}

.trusted-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(11, 19, 43, 0.1);
}

.logo-circle {
  background-color: white;
  /* border: 2px solid #f0f0f0; */
  transition: all 0.3s ease;
}

.trusted-card:hover .logo-circle {
  border-color: var(--green);
  box-shadow: 0 5px 15px rgba(31, 171, 137, 0.2);
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: var(--green);
  margin: 12px auto 0;
  border-radius: 2px;
}


.stores-badge {
  display: flex !important;
  justify-content: center;
}



/* W twoim pliku CSS */
/* Animacja dla popupu */
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.hero-stores-badge{
      display: flex
;
    justify-content: end;
}

.hero-section {
    position: relative;
    overflow: hidden; /* Ukrywa fragmenty obrazów wychodzące poza sekcję */
    min-height: 100vh; /* Upewnij się, że sekcja jest odpowiednio wysoka */
    display: flex; /* Użyj flexbox, aby łatwiej pozycjonować elementy */
    align-items: center; /* Wyśrodkuj pionowo zawartość */
    justify-content: center; /* Wyśrodkuj poziomo zawartość */
}

/* Statyczne tło (intro.png) */
.background-image-static {
    display: none;
}

/* Kontener dla ruchomego obrazka po prawej */
.hero-image-right {
    position: absolute;
    left: 0; /* Przyklej do prawej strony */
    top: 50%;
    transform: translateY(-50%); /* Wyśrodkuj pionowo */
    width: 50%; /* Przykładowa szerokość, dostosuj wg potrzeb */
    height: 100%; /* Rozciągnij na całą wysokość sekcji */
    overflow: hidden; /* Ukryj części obrazka wychodzące poza ten kontener */
    z-index: 2; /* Upewnij się, że jest nad tłem, ale pod overlayem */
    display: flex; /* Użyj flexbox, aby wyśrodkować obrazek */
    align-items: center;
    justify-content: center;
}

/* Ruchomy obrazek (intro_2.webp) z efektem Ken Burns */
.ken-burns-moving-img {
    width: 120%; /* Zwiększ rozmiar, aby umożliwić efekt Ken Burns */
    height: 120%;
    object-fit: cover;
    animation: kenBurnsMoving 20s infinite alternate; /* Animacja Ken Burns */
    transform-origin: 100% -150%;
    filter: brightness(80%); /* Lekkie przyciemnienie ruchomego obrazu */
}

@keyframes kenBurnsMoving {
    0% {
        transform: scale(1) translateX(-5%) translateY(3%);
    }
    100% {
        transform: scale(1.1) translateX(5%) translateY(-3%);
    }
}

/* Pozycjonowanie tekstu i nakładki */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Lekka nakładka na całości dla lepszej czytelności */
    z-index: 3; /* Nad ruchomym obrazem */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Przesuń tekst na prawą stronę */
    padding-right: 10%; /* Dodaj trochę odstępu od prawej krawędzi */
}

.hero-txt {
    position: relative; /* Ważne dla z-index */
    z-index: 4; /* Upewnij się, że tekst jest na wierzchu */
    max-width: 50%; /* Ogranicz szerokość tekstu, aby nie nachodził na obrazek */
    text-align: right;
    padding-right: 20px; /* Dodatkowy padding, jeśli potrzebny */
}


/* Zaktualizowane style dla efektu maszyny do pisania */
.typewriter-text {
    /* Usunięto: overflow: hidden; */
    /* Usunięto: white-space: nowrap; */
    border-right: 0.15em solid white; /* Migający kursor */
    /* margin: 0 auto; - prawdopodobnie niepotrzebne przy wieloliniowym tekście */
    
    /* Ustaw maksymalną szerokość, do której tekst ma się dopasować */
    max-width: 100%; /* Domyślnie zajmuje całą dostępną szerokość */
    
    /* Animacja pisania - teraz kontrolujemy szerokość animowanego "widoku" */
    animation: typing-reveal 3s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
    
    /* Dodatkowe style, aby tekst był gotowy do zawijania */
    display: inline-block; /* Ważne, aby animacja szerokości działała poprawnie */
    vertical-align: top; /* Zapobiega problemom z wyrównaniem */
}

/* Nowa animacja, która "ujawnia" tekst */
@keyframes typing-reveal {
    from { width: 0; } /* Zaczyna się z zerową szerokością */
    to { width: 100%; } /* Ujawnia pełną szerokość dostępnego kontenera */
}

/* Animacja migającego kursora pozostaje bez zmian */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
}

/* Pozostałe style z poprzedniej odpowiedzi (dla Ken Burns, tła itp.) pozostają bez zmian */

/* WAŻNE: Upewnij się, że .hero-txt ma ustaloną maksymalną szerokość, 
   do której tekst ma się dopasowywać, np. max-width: 50%; jak już masz */
.hero-txt {
    position: relative;
    z-index: 4;
    max-width: 50%; /* To jest kluczowe dla zawijania tekstu */
    text-align: right;
    padding-right: 20px;
}

/* Media Queries dla responsywności (dostosuj ścieżkę do obrazka, jeśli potrzebujesz) */
@media (max-width: 768px) {
    .hero-image-right {
        position: relative; /* Zmieniamy na relative dla mniejszych ekranów */
        width: 100%;
        height: 50vh; /* Lub inna wysokość */
        top: auto;
        transform: none;
    }

    .overlay {
        justify-content: center; /* Wyśrodkuj tekst na mniejszych ekranach */
        text-align: center;
        padding-right: 0;
    }

    .hero-txt {
        max-width: 90%; /* Zwiększ szerokość tekstu */
        text-align: center;
    }
    
    .background-image-static {
        display: none;
    }
}

/* Styl dla kontenera przycisku w nawigacji */
.header .navbar-nav .login-button-container {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Odstęp od poprzednich elementów nawigacji */
}

/* Granatowy Przycisk: Podstawowy styl */
.custom-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 50px;
    background-color: #2E3A59; /* Głęboki granat */
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    font-weight: 500; /* Lekko grubsza czcionka dla lepszej czytelności */
    letter-spacing: 0.5px; /* Delikatne rozciągnięcie liter */
    padding: 1rem 2rem;
    border: none; /* Brak widocznej ramki */
    border-radius: 25px; /* Bardziej zaokrąglone rogi dla nowoczesnego wyglądu */
    text-decoration: none;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease-in-out; /* Płynne przejście */
    box-shadow: 0 4px 15px rgba(46, 58, 89, 0.3); /* Subtelny cień */
    cursor: pointer; /* Wskazuje, że to element klikalny */
}

/* Styl dla ikony w przycisku */
.custom-login-btn .mdi {
    font-size: 18px;
    margin-right: 8px;
}

/* Granatowy Przycisk: Efekty hover */
.custom-login-btn:hover {
    background-color: #3B4B70; /* Jaśniejszy granat na hover */
    transform: translateY(-3px); /* Większe podniesienie */
    box-shadow: 0 10px 25px rgba(46, 58, 89, 0.5); /* Wyraźniejszy cień na hover */
    color: #fff;
    text-decoration: none;
}

/* Media Queries dla responsywności (bez zmian, ale warto pamiętać) */
@media (max-width: 991.98px) {
    .header .navbar-nav .login-button-container {
        margin-left: 0;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .custom-login-btn {
        width: 100%;
    }
}


/* Ukrycie początkowe i stan animacji */
.trusted-card {
    /* Upewnij się, że te właściwości są obecne, jeśli nie są już w Twoim Tailwindzie */
    opacity: 0;
    transform: translateY(20px); /* Kafel zaczyna 20px poniżej swojej finalnej pozycji */
    visibility: hidden; /* Ukrywa kafel bez usuwania go z układu (ważne dla animacji) */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s ease-out; /* Dłuższe przejścia */
    /* Upewnij się, że masz już styl dla siatki (np. display: flex; lub grid item) */
}

/* Stan "pokazany" dla kafli */
.trusted-card.show {
    opacity: 1;
    transform: translateY(0); /* Kafel przesuwa się na swoją finalną pozycję */
    visibility: visible; /* Kafel staje się widoczny */
}

/* Twój główny kontener kafli, np. div.grid */
/* Upewnij się, że ten kontener automatycznie dostosowuje swój rozmiar
   do zawartości, np. dzięki display: grid; lub display: flex; z wrap; */

.trusted-card {
    /* Początkowy stan animacji (ukryty wizualnie) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Animujemy tylko opacity i transform */
}

.trusted-card.hidden {
    /* Ta klasa będzie kontrolować display: none */
    display: none;
}

.trusted-card.visible-animated {
    /* Ta klasa będzie aktywowana po krótkim opóźnieniu od usunięcia 'hidden' */
    display: flex; /* Zmieniamy na flex (lub block/grid, zależnie od układu kafla) */
    opacity: 1;
    transform: translateY(0);
}

/* --- Globalne style dla Hero Section --- */
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center; /* Wyśrodkuj zawartość pionowo */
    justify-content: center; /* Wyśrodkuj zawartość poziomo, jeśli content-wrapper jest mniejszy */
    padding: 40px 20px; /* Dodaj padding dla bezpieczeństwa, zwłaszcza na mobile */
    box-sizing: border-box; /* Ważne, aby padding nie powiększał elementów */
}

/* Statyczne tło (intro.png) - bez zmian, jeśli chcesz je zachować */
.background-image-static {
    display: none;
}

/* --- Kontener główny dla treści (tekst + obraz) --- */
.hero-content-wrapper {
    position: relative; /* Ważne, aby był nad tłem */
    z-index: 10; /* Wyższa wartość niż tło */
    display: flex; /* Użyj Flexbox */
    align-items: center; /* Wyśrodkuj elementy wewnątrz w pionie */
    justify-content: space-between; /* Rozłóż elementy równomiernie */
    width: 100%;
    max-width: 1200px; /* Ogranicz maksymalną szerokość na dużych ekranach */
    gap: 40px; /* Odstęp między tekstem a obrazem */
    overflow: visible;
    border-radius: 0;
    /* Usunięto box-shadow dla czarnego tła */
}

/* --- Kontener tekstu --- */
.hero-text-container {
    flex: 1; /* Pozwól kontenerowi tekstu elastycznie zajmować dostępną przestrzeń */
    max-width: 50%; /* Ogranicz szerokość na desktopie */
    text-align: left; /* Wyrównaj tekst do lewej na desktopie */
    padding: 20px; /* Dodaj trochę paddingu */
    box-sizing: border-box;
}

.hero-title {
    font-size: 3.5rem; /* Większy rozmiar dla nagłówka */
    line-height: 1.2;
    margin-bottom: 20px;
    color: white; /* Upewnij się, że kolor tekstu jest biały */
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: white;
    font-weight: bold;
}

/* --- Stylowanie tekstu maszyny do pisania --- */
.typewriter-text {
    border-right: 0.15em solid white; /* Migający kursor */
    max-width: 100%; /* Upewnij się, że mieści się w kontenerze */
    display: inline-block;
    vertical-align: top;
    animation: typing-reveal 3s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
}

@keyframes typing-reveal {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
}

/* --- Kontener odznak sklepów --- */
.hero-stores-badge {
    display: flex;
    flex-wrap: wrap; /* Pozwól odznakom zawijać się na mniejszych ekranach */
    gap: 15px; /* Odstęp między odznakami */
    margin-top: 25px; /* Odstęp od podtytułu */
}

.store-button {
    display: block; /* Upewnij się, że linki są blokami */
    height: 50px; /* Standardowa wysokość dla wszystkich odznak */
    transition: transform 0.2s ease-in-out; /* Dodaj animację na hover */
}

.store-button:hover {
    transform: translateY(-3px); /* Lekkie uniesienie na hover */
}

.store-icon {
    height: 100%; /* Obrazek wypełni wysokość przycisku */
    width: auto; /* Zachowaj proporcje */
    display: block; /* Usuń ewentualne marginesy pod obrazkiem */
}

/* --- Kontener obrazu ruchomego --- */
.hero-image-container {
    flex: 1; /* Pozwól kontenerowi obrazu elastycznie zajmować dostępną przestrzeń */
    display: flex;
    justify-content: center; /* Wyśrodkuj obraz w poziomie */
    align-items: center; /* Wyśrodkuj obraz w pionie */
    height: 520px; /* Przykładowa wysokość, dostosuj wg potrzeb */

}

/* Ruchomy obrazek (intro_3.png) z efektem Ken Burns */
.ken-burns-moving-img {
    width: 120%; /* Zwiększ rozmiar, aby umożliwić efekt Ken Burns */
    height: 120%;
    object-fit: cover; /* Upewnij się, że obrazek wypełnia kontener */
    animation: kenBurnsMoving 20s infinite alternate; /* Animacja Ken Burns */
    transform-origin: 100% -150%;
    filter: brightness(80%); /* Lekkie przyciemnienie ruchomego obrazu */
}

@keyframes kenBurnsMoving {
    0% {
        transform: scale(1) translateX(-5%) translateY(3%);
    }
    100% {
        transform: scale(1.1) translateX(5%) translateY(-3%);
    }
}

/* --- Media Queries dla Responsywności --- */
@media (max-width: 991.98px) { /* Tablet i mniejsze */
    .hero-content-wrapper {
        flex-direction: column; /* Ułóż elementy w kolumnę */
        text-align: center; /* Wyśrodkuj wszystko */
        gap: 60px; /* Większy odstęp między sekcjami */
    }

    .hero-text-container {
        max-width: 90%; /* Zwiększ szerokość tekstu na mniejszych ekranach */
        text-align: center; /* Wyśrodkuj tekst */
        position: relative;
        top: 65px;
    }

    .hero-title {
        font-size: 2.8rem; /* Zmniejsz rozmiar nagłówka */
    }

    .hero-subtitle {
        font-size: 1.2rem; /* Zmniejsz rozmiar podtytułu */
    }

    .hero-stores-badge {
        justify-content: center; /* Wyśrodkuj przyciski sklepów */
    }

    .hero-image-container {
        width: 90%; /* Zmniejsz szerokość kontenera obrazu */
        height: 400px; /* Mniejsza wysokość dla mobilnych */
    }
}

@media (max-width: 767.98px) { /* Telefon */
    .hero-section {
        padding: 30px 15px; /* Mniejszy padding */
    }

    .hero-title {
        font-size: 2.2rem; /* Jeszcze mniejszy nagłówek */
    }

    .hero-subtitle {
        font-size: 1.1rem; /* Jeszcze mniejszy podtytuł */
    }

    .hero-image-container {
        height: 300px; /* Jeszcze mniejsza wysokość obrazu */
    }
}

.dynamic-text-wrapper {
    /* Upewnij się, że ten wrapper jest inline-block, aby dobrze dopasowywał się do tekstu */
    display: inline-block;
    position: relative; /* Ważne dla pozycjonowania animowanego tekstu */
    /* Ustaw minimalną szerokość, aby nagłówek nie "skakał" zbyt mocno */
    min-width: 300px; /* Dostosuj w zależności od najdłuższego tekstu */
    vertical-align: top; /* Zapobiega problemom z wyrównaniem linii bazowej */
}

.dynamic-text-item {
    position: absolute; /* Pozwala na nakładanie się tekstów podczas przejścia */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(10px); /* Zaczyna nieco niżej */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Płynne przejście */
}

.dynamic-text-item.active {
    opacity: 1;
    transform: translateY(0); /* Przesuwa się na swoją pozycję */
}

/* --- Modal Overlay --- */
.modal-overlay {
    display: none; /* Domyślnie ukryty */
    position: fixed; /* Pozostaje na swoim miejscu nawet przy scrollowaniu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Półprzezroczyste, ciemne tło */
    backdrop-filter: blur(5px); /* Delikatne rozmycie tła */
    z-index: 1000; /* Upewnij się, że jest na wierzchu */
    justify-content: center; /* Wyśrodkuj zawartość poziomo */
    align-items: center; /* Wyśrodkuj zawartość pionowo */
    opacity: 0; /* Początkowa przezroczystość dla animacji */
    visibility: hidden; /* Początkowa niewidoczność dla animacji */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    display: flex; /* Aktywujemy flex, gdy modal jest pokazywany */
}

/* --- Modal Content --- */
.modal-content {
    background-color: #fff;
    border-radius: 12px; /* Większe zaokrąglenie */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Głęboki cień */
    width: 90%; /* Domyślna szerokość */
    max-width: 450px; /* Maksymalna szerokość na większych ekranach */
    transform: translateY(-50px) scale(0.9); /* Początkowa pozycja i rozmiar dla animacji */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0; /* Początkowa przezroczystość */
    position: relative; /* Dla pozycjonowania przycisku zamknięcia */
    font-family: 'Arial', sans-serif; /* Przykładowa czcionka */
    text-align: center;
}

.modal-overlay.show .modal-content {
    opacity: 1;
    transform: translateY(0) scale(1); /* Finalna pozycja i rozmiar */
}

/* --- Modal Header --- */
.modal-header {
    padding: 25px 25px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.8rem;
    color: #333;
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    font-size: 2.2rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    padding: 0 10px; /* Dodatkowy padding dla obszaru kliknięcia */
}

.close-modal:hover {
    color: #666;
}

/* --- Modal Body --- */
.modal-body {
    padding: 30px 25px;
    color: #555;
    font-size: 1.1rem;
}

.modal-body p {
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-icon {
    font-size: 3.5rem; /* Większa ikona */
    color: #28a745; /* Zielony kolor sukcesu */
    line-height: 1;
    margin-top: 15px;
}

/* --- Modal Footer --- */
.modal-footer {
    padding: 15px 25px 25px;
    border-top: 1px solid #eee;
    text-align: center; /* Wyśrodkuj przyciski w stopce */
}

.modal-button {
    background-color: #0B132B; /* Dopasowany do Twojego koloru */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
}

.modal-button:hover {
    background-color: #1a244a; /* Ciemniejszy odcień na hover */
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 600px) {
    .modal-content {
        width: 95%; /* Na bardzo małych ekranach może być nieco szerszy */
        margin: 20px; /* Dodatkowy margines, żeby nie przylegał do krawędzi */
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .modal-body {
        font-size: 1rem;
        padding: 20px 15px;
    }

    .modal-icon {
        font-size: 3rem;
    }
}