/*

Lava Landing Page

https://templatemo.com/tm-540-lava-landing-page

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. welcome
06. features
07. testimonials
08. contact
09. footer
10. preloader

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

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

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

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

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 25px;
  color: #888;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

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

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

/* Two things sit past the right edge of the page on purpose, and both used to
   scroll the whole document sideways on tablets: the feature drawer parked
   off-canvas with translateX(105%), and the ScrollReveal columns in #about
   waiting to animate in from 30px outside. Phones were already covered by the
   overflow-x: hidden below, but 992px and up scrolled. clip contains them
   without turning the root into a scroll container, so nothing sticky breaks
   and the drawer still slides in untouched. */
@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

a.main-button-slider {
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #fba70b;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button-slider:hover {
  background-color: #f1556a;
}

a.main-button-slider.alt {
  background-color: #1e1e1e;
}
a.main-button-slider.alt:hover {
  background-color: #fba70b;
}

/* Intro heading inside the promotion "about us" block */
.section-intro h2 {
  font-size: 30px;
  line-height: 42px;
  color: #1e1e1e;
  font-weight: 700;
  margin-bottom: 24px;
}
.section-intro h2 em {
  font-style: normal;
  color: #f4813f;
}
.section-intro p {
  font-size: 15px;
  line-height: 25px;
  color: #888;
  margin-bottom: 18px;
}
.section-intro .main-button {
  margin-top: 20px;
  display: inline-block;
}

a.main-button {
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #f4813f;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button:hover {
  background-color: #f1556a;
}

button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #f4813f;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button:hover {
  background-color: #f1556a;
}


.center-heading {
  margin-bottom: 70px;
}

.center-heading h2 {
  margin-top: 0px;
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 25px;
}

.center-heading h2 em {
  font-style: normal;
  color: #f4813f;
}

.center-heading p {
  font-size: 15px;
  color: #888;
  text-align: center;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

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

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fba70b!important;
}

.background-header .nav li a.active {
  color: #fba70b!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

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

.header-area .main-nav .logo {
  line-height: 80px;
  color: #191a20;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}


.header-area .main-nav .nav {
  float: left;
  margin-top: 27px;
  margin-left: 15%;
  margin-right: 0px;
  background-color: #fff;
  padding: 0px 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

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

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

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a {
  color: #fba70b;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #7a7a7a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transform: translateY(-2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  display: block;
  background: #fff;
  color: #7a7a7a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
}

.header-area .main-nav .nav li.submenu ul li a:before {
  content: '';
  position: absolute;
  width: 0px;
  height: 40px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #fba70b;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #fba70b!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

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

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

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

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

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

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

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

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

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

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

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

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

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

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

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

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

.header-area.header-sticky .nav li a.active {
  color: #fba70b;
}

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

@media (max-width: 991px) {
  .logo {
    text-align: center;
    float: none!important;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    margin-top: 0px !important;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #fba70b!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
welcome
--------------------------------------------- 
*/
.welcome-area {
  width: 100%;
  height: 100vh;
  min-height: 793px;
  background-image: url(../images/banner-bg.png);
  background-repeat: no-repeat;
  background-position: right top;
}

.welcome-area .header-text .left-text {
  position: relative;
  align-self: center;
  margin-top: 35%;
  transform: perspective(1px) translateY(-30%) !important;
}

.welcome-area .header-text h1 {
  font-weight: 900;
  font-size: 52px;
  line-height: 80px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  color: #191a20;
}

.welcome-area .header-text h1 em {
  font-style: normal;
  color: #fba70b;
}

.welcome-area .header-text p {
  font-weight: 300;
  font-size: 17px;
  color: #7a7a7a;
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
  position: relative;
}

@media (max-width: 1420px) {
  .welcome-area .header-text {
    width: 70%;
    margin-left: 5%;
  }
}

@media (max-width: 1320px) {
  .welcome-area .header-text .left-text {
    margin-top: 50%;
  }
  .welcome-area .header-text {
    width: 50%;
    margin-left: 5%;
  }
}

@media (max-width: 1140px) {
  .welcome-area {
    height: auto;
  }
  .welcome-area .header-text {       
    width: 92%;
    padding-top: 793px;
  }
  .welcome-area .header-text .left-text {
    margin-top: 5%;
    transform: none !important;
  }
}
@media (max-width: 810px) {
  .welcome-area {
    background-size: contain;
  }

  .welcome-area .header-text {
    padding-top: 100%;
    margin-left: 0;
  }
    
  .container-fluid .col-md-12 {
    margin-right: 0px;
    padding-right: 0px;
  }
}

/*
---------------------------------------------
about
---------------------------------------------
*/

#about {
  padding: 100px 0px;
  position: relative;
  z-index: 9;
}

@media (max-width: 992px) {
  .features-item {
    margin-bottom: 45px;
  }
}

.features-item {
  border-radius: 5px;
  padding: 60px 30px;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.features-item h2 {
  z-index: 9;
  position: absolute;
  top: 15px;
  left: 45px;
  font-size: 100px;
  font-weight: 600;
  color: #fdefe9;
}

.features-item img {
  z-index: 10;
  position: relative;
  max-width: 100%;
  margin-bottom: 40px;
}

.features-item h4 {
  margin-top: 0px;
  font-size: 22px;
  color: #1e1e1e;
  margin-bottom: 25px;
}

.features-item .main-button {
  margin-top: 35px;
  display: inline-block;
}


/*
---------------------------------------------
promotion
---------------------------------------------
*/

.left-image-decor {
  background-image: url(../images/left-bg-decor.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

#promotion {
  padding: 100px 0px;
}

#promotion .left-image {
  align-self: center;
}

#promotion .right-text ul {
  padding: 0;
  margin: 0;
}

#promotion .right-text ul li {
  display: inline-block;
  margin-bottom: 60px;
}

#promotion .right-text ul li:last-child {
  margin-bottom: 0px;
}

#promotion .right-text img {
  display: inline-block;
  float: left;
  margin-right: 30px;
}

#promotion .right-text h4 {
  font-size: 22px;
  color: #1e1e1e;
  margin-bottom: 15px;
  margin-top: 3px;
}


/*
--------------------------------------------
testimonials
--------------------------------------------
*/
.right-image-decor {
  background-image: url(../images/right-bg-decor.png);
  background-repeat: no-repeat;
  background-position: right center;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

#testimonials {
  padding-top: 100px;
  position: relative;
  z-index: 9;
}

#testimonials .item {
  position: relative;
}

#testimonials .item .testimonial-content {
  background: rgb(244,129,63);
  background: linear-gradient(145deg, rgba(244,129,63,1) 0%, rgba(241,85,106,1) 100%);
  margin-left: 60px;
  padding: 40px 30px;
  text-align: center;
  border-radius: 5px;
}

#testimonials .item .testimonial-content ul li {
  display: inline-block;
  margin: 0px 1px;
}

#testimonials .item .testimonial-content ul li i {
  color: #fff;
  font-size: 13px;
}

#testimonials .item .testimonial-content h4 {
  font-size: 22px;
  margin-top: 20px;
  color: #fff;
}

#testimonials .item .testimonial-content p {
  color: #fff;
  font-style: italic;
  font-weight: 200;
  margin: 20px 0px 15px 0px;
}

#testimonials .item .testimonial-content span {
  color: #fff;
  font-weight: 200;
  font-size: 13px;
}

#testimonials .author img {
  max-width: 120px;
  margin-bottom: -60px;
}

.owl-carousel .owl-nav button.owl-next span {
  z-index: 10;
  top: 45%;
  border-radius: 10px;
  font-size: 46px;
  color: #fff;
  right: -210px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  background: rgb(244,129,63);
  background: linear-gradient(145deg, rgba(244,129,63,1) 0%, rgba(241,85,106,1) 100%);
  position: absolute;
}

.owl-carousel .owl-nav button.owl-prev span {
  z-index: 9;
  top: 30%;
  border-radius: 10px;
  font-size: 46px;
  color: #fff;
  right: -150px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  background: rgb(244,129,63);
  background: linear-gradient(145deg, rgba(244,129,63,1) 0%, rgba(241,85,106,1) 100%);
  position: absolute;
}

@media screen and (max-width: 1060px) {
  .owl-carousel .owl-nav {
    display: none!important;
  }
}

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

@media (max-width: 992px) {
  footer {
    padding-top: 0px!important;
    margin-top: 0px!important;
  }
  .contact-form {
    margin-bottom: 45px;
  }
  footer .right-content {
    text-align: center;
  }
  footer .footer-content {
    padding: 60px 0px!important;
  }
}

footer {
  margin-top: 200px;
  padding-top: 120px;
  background-image: url(../images/footer-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
}

footer .footer-content {
  padding: 120px 0px;
}

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

footer .right-content {
  align-self: center;
}

.contact-form input,
.contact-form textarea {
  color: #777;
  font-size: 13px;
  border: 1px solid #eee;
  background-color: #f7f7f7;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form {
  text-align: center;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.footer-content .right-content {
  color: #fff;
}

.footer-content .right-content h2 {
  margin-top: 0px;
  margin-bottom: 30px;
  font-size: 42px;
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer-content .right-content h2 em {
  font-style: normal;
  color: #fba70b;
}

.footer-content .right-content p {
  color: #FFF;
}

.footer-content .right-content a {
  color: #FFF;
}

.footer-content .right-content a:hover {
  color: #FC3;
}

footer .social {
  overflow: hidden;
  margin-top: 30px;
}

footer .social li:first-child {
  margin-left: 0px;
}

footer .social li {
  margin: 0px 7.5px;
  display: inline-block;
}

footer .social li a {
  color: #fff;
  text-align: center;
  background-color: transparent;
  border: 1px solid #fff;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  display: inline-block;
  font-size: 16px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

footer .social li a:hover {
  background-color: #fba70b;
  border-color: #fba70b;
  color: #fff;
}

footer .copyright {
  margin-top: 10px;
  font-weight: 400;
  font-size: 15px;
  color: #4a4a4a;
  letter-spacing: 0.88px;
  text-transform: capitalize;
}

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

footer .sub-footer a {
	color: #FFF;
}

footer .sub-footer a:hover {
	color: #FC3;
}

footer .sub-footer p {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

@media (max-width: 991px) {
  footer .copyright {
    text-align: center;
  }
  footer .social {
    text-align: center;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
#preloader {
  --slices: 8;
  --slice-duration: 0.9s;
  --slice-stagger: 0.09s;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
  color: #fff;
}

/* Vertical strips that together form the full-screen gradient */
#preloader .slice {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% / var(--slices) * var(--i));
  /* +1px overlap hides sub-pixel seams between strips */
  width: calc(100% / var(--slices) + 1px);
  background-image: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
  background-size: 100vw 100vh;
  background-position: calc(-100vw / var(--slices) * var(--i)) 0;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Reveal: first (left) strip lifts first, the rest follow */
#preloader.is-done .slice {
  transform: translateY(-101%);
  transition: transform var(--slice-duration) cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: calc(var(--i) * var(--slice-stagger));
}

#preloader.is-done .jumper {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#preloader.is-done {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #preloader.is-done .slice {
    transform: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: 0s;
  }
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
  z-index: 1;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* =========================================================
   EasyPOS additions over the Lava template
   ========================================================= */

/* "What we provide" cards driven by the admin sections */
.features-item {
  transition: all .3s ease;
}
.features-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.2);
}
.features-item .feature-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(244, 129, 63, 0.12) 0%, rgba(241, 85, 106, 0.12) 100%);
  color: #f4813f;
  position: relative;
  z-index: 10;
  transition: all .3s ease;
}
.features-item:hover .feature-svg {
  background: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
  color: #fff;
  transform: translateY(-4px);
}
.features-item .feature-svg svg {
  width: 36px;
  height: 36px;
}
.features-item .main-button {
  margin-top: 35px;
  display: inline-block;
}

/* Pricing cards in the template's card language */
#pricing {
  padding: 100px 0;
}
.pricing-item {
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 48px 34px;
  text-align: center;
  height: 100%;
  position: relative;
  transition: all .3s ease;
}
.pricing-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.2);
}
.pricing-item .pricing-name {
  font-size: 22px;
  color: #1e1e1e;
  margin-bottom: 6px;
}
.pricing-item .pricing-desc {
  font-size: 14px;
  color: #888;
  line-height: 24px;
  margin-bottom: 20px;
}
.pricing-item .pricing-fee {
  font-size: 32px;
  font-weight: 700;
  color: #f4813f;
  margin: 12px 0 22px;
}
.pricing-item.featured .pricing-fee {
  color: #fba70b;
}
.pricing-item ul.pricing-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
}
.pricing-item ul.pricing-features li {
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid #f5f5f5;
}
.pricing-item ul.pricing-features li:last-child {
  border-bottom: none;
}
.pricing-item ul.pricing-features li::before {
  content: "\f00c";
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  top: 7px;
  color: #f4813f;
  font-size: 13px;
}
.pricing-item .badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #fba70b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 20px;
}
.pricing-item.flush {
  height: auto;
  box-shadow: none;
  background: transparent;
  padding: 24px 0;
}
.pricing-item.flush .pricing-fee { font-size: 38px; }

/* Gradient call-to-action band */
.cta-wide {
  background-image: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.cta-wide.has-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(30, 30, 30, 0.45);
}
.cta-wide .container {
  position: relative;
  z-index: 1;
}
.cta-wide h2 {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
}
.cta-wide p {
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-weight: 300;
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto 34px;
}
.cta-wide .cta-btn {
  text-align: center;
}
a.main-button.white {
  background-color: #fff;
  color: #f4813f;
}
a.main-button.white:hover {
  background-color: #f1556a;
  color: #fff;
}

/* Center headings shared by internal pages */
.center-heading small {
  display: block;
  font-weight: 500;
  color: #fba70b;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Hero heading scales for longer marketing copy */
.welcome-area .header-text h1 {
  font-size: 42px;
  line-height: 56px;
}
@media (max-width: 1320px) {
  .welcome-area .header-text h1 {
    font-size: 36px;
    line-height: 48px;
  }
}

/* Contact page */
.contact-page-wrap {
  padding: 150px 0 90px;
}
.contact-box {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 40px;
  background: #fff;
  margin-bottom: 40px;
}
.contact-box h4 {
  font-size: 18px;
  color: #1e1e1e;
  margin-bottom: 10px;
}
.contact-box p {
  font-size: 14px;
  color: #888;
  margin-bottom: 6px;
}
.contact-box a {
  color: #f4813f;
}
.contact-box a:hover {
  color: #f1556a;
}
.contact-box input,
.contact-box textarea {
  color: #777;
  font-size: 13px;
  border: 1px solid #eee;
  background-color: #f7f7f7;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}
.contact-box textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}
.contact-box .main-button {
  border: none;
  cursor: pointer;
}

/* Footer contact form prefers its template styling, so keep
   .contact-form unchanged; status alert in footer */
.alert-success {
  background-color: rgba(255, 255, 255, 0.95);
  color: #2e7d32;
  padding: 14px 20px;
  border-radius: 5px;
  margin-bottom: 24px;
  font-size: 14px;
}
.alert-error {
  background-color: rgba(255, 220, 220, 0.95);
  color: #b00020;
  padding: 14px 20px;
  border-radius: 5px;
  margin-bottom: 24px;
  font-size: 14px;
}

/* Feature "read more" side panel */
body.drawer-open {
  overflow: hidden;
}

.side-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 15, 20, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.side-overlay.open {
  opacity: 1;
  visibility: visible;
}

.feature-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 460px;
  max-width: 100vw;
  z-index: 10001;
  background: linear-gradient(170deg, #f1556a 0%, #e8484f 35%, #f4813f 100%);
  color: #fff;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
  transform: translateX(105%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.feature-drawer.open {
  transform: translateX(0);
}

.drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.drawer-close:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

.drawer-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 68px 40px 40px;
}
.drawer-scroll::-webkit-scrollbar {
  width: 6px;
}
.drawer-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.drawer-image {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 22px;
  position: relative;
}
.drawer-image img {
  width: 100%;
  height: auto;
  display: block;
}
.drawer-image-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
}
.drawer-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-icon svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

.drawer-title {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 14px;
  color: #fff;
}
.drawer-desc {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
  margin: 0;
  color: #fff;
}
.drawer-points-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  opacity: 0.75;
  margin: 26px 0 14px;
  color: #fff;
}
.drawer-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-points li {
  position: relative;
  padding: 0 0 14px 34px;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
}
.drawer-points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-cta {
  display: inline-block;
  margin-top: 18px;
}

@media (max-width: 600px) {
  .feature-drawer {
    width: 100vw;
  }
  .drawer-scroll {
    padding: 64px 26px 30px;
  }
}
/* =========================================================
   Live POS demo - the buttons and showcase section that put
   the working Simple POS demo in front of every visitor
   ========================================================= */

/* The demo switches on by default, so everything that keys off
   it is written to stand out without a second colour scheme. */
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e1e1e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.demo-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: demo-pulse 1.8s infinite;
}
@-webkit-keyframes demo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
@keyframes demo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Menu button - only room for it once the links stop wrapping. Below 1200px the
   header runs out of space, so the "Live demo" list item below carries the link
   instead and this pill stays hidden. */
.nav-demo-btn {
  display: none;
  float: right;
  margin-top: 26px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1e1e1e;
  background: #fff;
  border: 1px solid #1e1e1e;
  border-radius: 25px;
  padding: 9px 16px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.nav-demo-btn:hover {
  background: #1e1e1e;
  color: #fff;
}
@media (min-width: 1200px) {
  .nav-demo-btn {
    display: inline-block;
  }
  /* Pull the links left so the pill has somewhere to sit. */
  .header-area .main-nav .nav.has-demo {
    margin-left: 6%;
  }
  .header-area .main-nav .nav li.demo-nav-item {
    display: none;
  }
}
/* Between the tablet and desktop breakpoints the six menu items need a
   tighter gap, otherwise they run under each other. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-area .main-nav .nav.has-demo {
    margin-left: 2%;
  }
  .header-area .main-nav .nav.has-demo li {
    padding-left: 12px;
    padding-right: 12px;
  }
}
.header-area .main-nav .nav li.demo-nav-item a {
  color: #f4813f;
  font-weight: 600;
}
.header-area .main-nav .nav li.demo-nav-item a:hover {
  color: #f1556a;
}

/* Hero button - an outlined pill that sits beside the two solid ones */
a.main-button-slider.demo {
  background-color: transparent;
  border: 2px solid #1e1e1e;
  color: #1e1e1e;
  margin-left: 10px;
}
a.main-button-slider.demo:hover {
  background-color: #1e1e1e;
  color: #fff;
}
a.main-button.demo-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  margin-left: 12px;
}
a.main-button.demo-outline:hover {
  background: #1e1e1e;
  border-color: #fff;
  color: #fff;
}

/* ===== Paired demo buttons: Simple POS + Pro POS =====
   Both are the same weight and sit on one baseline so the pair reads as a
   single choice rather than a primary button with a footnote. */
.demo-btn-simple,
.demo-btn-pro {
  display: inline-block;
  margin: 0;
}
.demo-btn-pro {
  background: transparent;
  border: 2px solid #1e1e1e;
  color: #1e1e1e;
}
.demo-btn-pro:hover {
  background: #1e1e1e;
  color: #fff;
}

/* In the demo section the pair is centred under the bullet list. */
.demo-actions-pair {
  justify-content: center;
  gap: 16px;
}
.demo-actions-pair .main-button {
  min-width: 230px;
  text-align: center;
}

/* On the pricing band the pair is centred too, and the Pro button keeps the
   white-on-gradient contrast by inverting to a solid fill. */
.pricing-demo-band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  margin-top: 4px;
}
.pricing-demo-band-actions .main-button {
  display: inline-block;
  background-color: #fff;
  color: #f4813f;
  margin: 0;
  text-align: center;
}
.pricing-demo-band-actions .main-button:hover {
  background-color: #1e1e1e;
  color: #fff;
}
.pricing-demo-band-actions .demo-btn-pro {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.pricing-demo-band-actions .demo-btn-pro:hover {
  background-color: #fff;
  border-color: #fff;
  color: #f4813f;
}

/* ===== Pro POS panel inside the home demo section ===== */
.demo-pro-panel {
  background: var(--white, #fff);
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 34px 32px;
  height: 100%;
}
.demo-pro-panel h3 {
  margin: 14px 0 10px;
}
.demo-pro-panel > p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 18px;
}
.demo-pro-panel .demo-points {
  margin-bottom: 0;
}
.demo-showcase-row {
  margin-top: 40px;
}
@media (max-width: 991px) {
  .demo-pro-panel {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .demo-actions-pair,
  .pricing-demo-band-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .demo-actions-pair .main-button {
    min-width: 0;
    width: 100%;
  }
}

.pricing-item .demo-cta {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1e1e1e;
  border: 2px solid #1e1e1e;
  border-radius: 25px;
  padding: 13px 20px;
  text-align: center;
  transition: all 0.3s ease 0s;
}
.pricing-item .demo-cta:hover {
  background: #1e1e1e;
  color: #fff;
}
.pricing-item .demo-cta-note {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
.pricing-item .pricing-demo-wrap {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e8e8e8;
}

/* Band under the plan cards on the pricing page */
.pricing-demo-band {
  margin-top: 70px;
  padding: 40px 44px;
  border-radius: 6px;
  text-align: center;
  background-image: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
}
.pricing-demo-band .demo-badge {
  background: rgba(255, 255, 255, 0.18);
}
.pricing-demo-band h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  margin: 0 0 14px;
}
.pricing-demo-band p {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
  max-width: 620px;
  margin: 0 auto 26px;
}
.pricing-demo-band .pricing-demo-band-note {
  max-width: 680px;
  margin: -10px auto 28px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 24px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 5px;
}
.pricing-demo-band .main-button {
  display: inline-block;
  background-color: #fff;
  color: #f4813f;
}
.pricing-demo-band .main-button:hover {
  background-color: #1e1e1e;
  color: #fff;
}

/* The showcase section */
.demo-section {
  padding: 100px 0;
  background-color: #fff;
  overflow: hidden;
}
.demo-copy h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 50px;
  color: #1e1e1e;
  margin-bottom: 18px;
}
.demo-copy .demo-subheading {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #f4813f;
  margin-bottom: 20px;
}
.demo-copy p {
  font-size: 15px;
  line-height: 26px;
  color: #888;
  margin-bottom: 16px;
}
.demo-points {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
}
.demo-points li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 15px;
  line-height: 25px;
  color: #555;
}
.demo-points li::before {
  content: "\f00c";
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  top: 7px;
  color: #f4813f;
  font-size: 14px;
}
.demo-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.demo-actions .main-button {
  display: inline-block;
}
.demo-soft-link {
  font-size: 15px;
  font-weight: 500;
  color: #888;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.demo-soft-link:hover {
  color: #f4813f;
}
.demo-note {
  margin-top: 26px;
  padding: 16px 20px;
  border-left: 3px solid #fba70b;
  background-color: #fbfbfb;
  border-radius: 0 5px 5px 0;
  font-size: 13px;
  line-height: 22px;
  color: #777;
}
.demo-note .fa {
  color: #fba70b;
  margin-right: 8px;
}

/* Static peek at the counter screen */
.demo-window {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.demo-window-bar {
  display: flex;
  align-items: center;
  background: #1e1e1e;
  padding: 11px 16px;
}
.demo-window-dots {
  display: inline-flex;
  gap: 6px;
}
.demo-window-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.demo-window-url {
  margin-left: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
}
.demo-window-body {
  padding: 18px;
  background: #f7f7f9;
}
.demo-mock-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.demo-mock-mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-image: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-mock-shop {
  font-size: 14px;
  font-weight: 600;
  color: #1e1e1e;
}
.demo-mock-nav {
  margin-left: auto;
  font-size: 11px;
  color: #aaa;
}
.demo-mock-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
}
.demo-mock-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.demo-mock-tile {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 14px 12px;
  text-align: left;
}
.demo-mock-tile-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e1e1e;
}
.demo-mock-tile-price {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #f4813f;
}
.demo-mock-cart {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 16px;
}
.demo-mock-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
  margin-bottom: 12px;
}
.demo-mock-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #555;
  padding: 7px 0;
  border-bottom: 1px solid #f2f2f2;
}
.demo-mock-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #1e1e1e;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
}
.demo-mock-change {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #f4813f;
  padding: 12px 0;
}
.demo-mock-charge {
  margin-top: 8px;
  background-image: linear-gradient(145deg, #f4813f 0%, #f1556a 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 25px;
  padding: 10px;
}
.demo-window-caption {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: #999;
}

/* "The demo is a template, yours is not" comparison */
.demo-vs {
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid #eee;
}
.demo-vs-heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: #1e1e1e;
  text-align: center;
  margin: 0 0 30px;
}
.demo-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
.demo-vs-col {
  padding: 28px 32px;
}
.demo-vs-col.is-demo {
  background-color: #fafafa;
  border-right: 1px solid #eee;
}
.demo-vs-col.is-yours {
  background-color: #fff;
}
.demo-vs-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.demo-vs-col.is-demo .demo-vs-label {
  color: #aaa;
}
.demo-vs-col.is-yours .demo-vs-label {
  color: #f4813f;
}
.demo-vs-col p {
  font-size: 14px;
  line-height: 25px;
  color: #777;
  margin: 0;
}
.demo-vs-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.demo-vs-col li {
  position: relative;
  padding: 5px 0 5px 28px;
  font-size: 14px;
  line-height: 24px;
  color: #555;
}
.demo-vs-col li::before {
  content: "\f00c";
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  top: 5px;
  color: #f4813f;
  font-size: 13px;
}

.footer-demo-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  padding: 12px 24px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.footer-demo-link:hover {
  background: #fba70b;
  border-color: #fba70b;
  color: #fff;
}

@media (max-width: 991px) {
  .demo-section {
    padding: 70px 0;
  }
  .demo-copy h2 {
    font-size: 30px;
    line-height: 42px;
  }
  .demo-mock-grid {
    grid-template-columns: 1fr;
  }
  .demo-window-caption {
    margin-bottom: 30px;
  }
  .demo-vs {
    margin-top: 10px;
    padding-top: 40px;
  }
  .demo-vs-grid {
    grid-template-columns: 1fr;
  }
  .demo-vs-col.is-demo {
    border-right: none;
    border-bottom: 1px solid #eee;
  }
}

/* Tablet and below: the hero buttons stack full width so three of them
   never end up squeezed onto one line. */
@media (max-width: 767px) {
  .welcome-area .header-text .left-text a.main-button-slider {
    display: block;
    text-align: center;
    margin: 0 0 12px;
  }
  .welcome-area .header-text .left-text a.main-button-slider.demo {
    margin-bottom: 0;
  }
  .demo-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-actions .main-button {
    text-align: center;
  }
  .demo-soft-link {
    text-align: center;
    /* it is a full-width row on a phone, so give it a real tap target */
    padding: 12px 0;
  }
}

@media (max-width: 600px) {
  .demo-section {
    padding: 50px 0;
  }
  .demo-copy h2 {
    font-size: 26px;
    line-height: 36px;
  }
  .demo-copy .demo-subheading {
    font-size: 16px;
    line-height: 27px;
  }
  .demo-badge {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .demo-window-body {
    padding: 12px;
  }
  .demo-window-url {
    margin-left: 10px;
    padding: 4px 8px;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .demo-mock-products {
    grid-template-columns: 1fr;
  }
  .demo-mock-nav {
    display: none;
  }
  .demo-vs-heading {
    font-size: 21px;
    line-height: 30px;
    text-align: left;
  }
  .demo-vs-col {
    padding: 22px 20px;
  }
  a.main-button.demo-outline {
    display: block;
    text-align: center;
    margin: 14px 0 0;
  }
  .cta-btn a.main-button {
    margin: 0 0 12px;
  }
  .pricing-demo-band {
    padding: 30px 22px;
  }
  .pricing-demo-band h3 {
    font-size: 21px;
    line-height: 30px;
  }
  .pricing-demo-band .main-button {
    display: block;
    text-align: center;
    padding: 15px 18px;
  }
  .pricing-item .demo-cta {
    padding: 13px 14px;
  }
  .footer-demo-link {
    display: block;
    text-align: center;
  }
}
/* ------------------------------------------------------------------ *
 * Contact form anti-spam
 *
 * The honeypot fields are moved off-screen rather than hidden with
 * display:none or visibility:hidden. Those two are the first things spam
 * bots look for and skip; an off-screen field still occupies layout, so a
 * bot checking offsetWidth or getClientRects() sees a real input.
 * ------------------------------------------------------------------ */
.hp-wrap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hp-field {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.hp-field span {
  display: block;
}

/* Give the Turnstile widget room and keep it from overflowing the footer
   on narrow screens. */
.contact-turnstile {
  margin: 18px 0 6px;
  min-height: 65px;
}

.main-button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* ===== Redesigned demo section: two-card layout ===== */
.demo-section-header {
  text-align: center;
  margin-bottom: 44px;
}
.demo-section-header h2 {
  margin-top: 14px;
  margin-bottom: 12px;
}
.demo-section-header .demo-subheading {
  font-size: 16px;
  color: #555;
  max-width: 620px;
  margin: 0 auto;
}

.demo-type-row {
  margin-bottom: 40px;
}
.demo-type-card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 36px 32px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease;
}
.demo-type-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.09);
}
.demo-type-pro {
  border-color: #f4813f;
  background: linear-gradient(160deg, #fff 80%, #fff8f3 100%);
}
.demo-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #555;
  background: #f2f2f2;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 16px;
  align-self: flex-start;
}
.demo-type-badge-pro {
  background: linear-gradient(90deg, #f4813f, #f1556a);
  color: #fff;
}
.demo-type-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1e1e1e;
}
.demo-type-desc {
  color: #555;
  line-height: 1.7;
  margin-bottom: 18px;
}
.demo-type-actions {
  margin-top: auto;
  padding-top: 22px;
}
.demo-type-btn {
  display: block;
  text-align: center;
  width: 100%;
}
.demo-type-btn-pro {
  background: transparent;
  border: 2px solid #f4813f;
  color: #f4813f;
}
.demo-type-btn-pro:hover {
  background: #f4813f;
  border-color: #f4813f;
  color: #fff;
}
.demo-type-disclaimer {
  margin-top: 14px;
  font-size: 12px;
  color: #888;
  line-height: 1.6;
}
.demo-type-disclaimer i {
  color: #aaa;
  margin-right: 4px;
}

/* Custom system callout */
.demo-custom-callout {
  background: linear-gradient(135deg, #1e1e1e 0%, #3a3a3a 100%);
  border-radius: 10px;
  padding: 36px 40px;
  margin-top: 40px;
  color: #fff;
}
.demo-custom-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.demo-custom-icon {
  font-size: 36px;
  color: #f4813f;
  flex-shrink: 0;
}
.demo-custom-copy {
  flex: 1;
  min-width: 220px;
}
.demo-custom-copy h4 {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.demo-custom-copy p {
  color: rgba(255,255,255,0.75);
  margin: 0;
  line-height: 1.7;
  font-size: 15px;
}
.demo-custom-cta {
  flex-shrink: 0;
}
.demo-custom-cta .main-button {
  background: #f4813f;
  border-color: #f4813f;
  white-space: nowrap;
}
.demo-custom-cta .main-button:hover {
  background: #f1556a;
  border-color: #f1556a;
}

/* Safety note centred below the cards */
.demo-note-center {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: #888;
}
.demo-note-center i {
  margin-right: 6px;
}

/* Stack cards on smaller screens */
@media (max-width: 991px) {
  .demo-type-card {
    margin-bottom: 24px;
  }
  .demo-custom-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .demo-custom-cta .main-button {
    display: block;
    width: 100%;
  }
}

/* -- AJAX contact form status messages -------------------------------- */
.contact-ajax-status {
  padding: 14px 20px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border-left: 4px solid transparent;
  animation: statusFadeIn 0.25s ease;
}
@keyframes statusFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-ajax-status--success {
  background-color: #f0fdf4;
  color: #166534;
  border-left-color: #22c55e;
}
.contact-ajax-status--error {
  background-color: #fef2f2;
  color: #991b1b;
  border-left-color: #ef4444;
}

/* Footer form: override white background for status boxes */
footer .contact-ajax-status--success {
  background-color: rgba(255, 255, 255, 0.92);
}
footer .contact-ajax-status--error {
  background-color: rgba(255, 230, 230, 0.92);
}