/* ************************************************************
:: Template Name: sApp - App Landing Page Template
:: Template URI: https://theme-land.com/sapp/
:: Template Author Name: theme_land
:: Template Author URI: hridoy1272@gmail.com
:: Version: 1.0.0
:: Created: 31 January 2020
:: Updated: 14 October 2020
************************************************************ 
*
*
******* :: INDEX OF CSS :: *******
:: 1.0 WEB FONTS
:: 2.0 IMPORT ALL CSS
:: 3.0 GLOBAL CSS
:: 4.0 COMMON CSS
:: 5.0 PRELOADER CSS
:: 6.0 SCROLL TO TOP AREA CSS
:: 7.0 HEADER AREA CSS
:: 8.0 WELCOME AREA CSS
    :: 8.1 WELCOME AREA HOMEPAGE-3 CSS
    :: 8.2 WELCOME AREA HOMEPAGE-4 CSS
    :: 8.3 WELCOME AREA HOMEPAGE-6 CSS
:: 9.0 COUNTER AREA CSS
:: 10.0 FEATURES AREA CSS
:: 11.0 SERVICE AREA CSS
:: 12.0 DISCOVER AREA CSS
:: 13.0 WORK AREA CSS
:: 14.0 SCREENSHOTS AREA CSS
:: 15.0 REVIEWS AREA CSS
:: 16.0 TESTIMONIAL AREA CSS
:: 17.0 PRICE PLAN AREA CSS
:: 18.0 FAQ AREA CSS
:: 19.0 TEAM AREA CSS
:: 20.0 SUBSCRIBE AREA CSS
:: 21.0 BLOG AREA CSS
:: 22.0 BREADCRUMB AREA CSS
:: 23.0 BLOG PAGE AREA CSS
:: 24.0 BLOG PAGE DETAILS AREA CSS
:: 25.0 CONTACT AREA CSS
:: 26.0 FOOTER AREA CSS
:: 27.0 ERROR AREA CSS
:: 28.0 COMING SOON AREA CSS
:: 29.0 PREVIEW AREA CSS
****************************** */
/* ******************************
:: 1.0 WEB FONTS
****************************** */
@import url(./poppins.css);
@import url(./flaticon.css);
/* ******************************
:: 3.0 GLOBAL CSS
****************************** */
.landing-page {
  --primary-font: 'Poppins', sans-serif;
  --h1-size: 4rem;
  --h1-weight: 600;
  --h2-size: 3rem;
  --h2-weight: 600;
  --h3-size: 1.5rem;
  --h3-weight: 600;
  --h4-size: 1.3rem;
  --h4-weight: 600;
  --h5-size: 1.2rem;
  --h5-weight: 600;
  --h6-size: 1rem;
  --h6-weight: 600;
  --p-size: 1rem;
  --p-weight: 400;
  --nav-item-color: #444;
  --nav-hover-color: #2c2e30;
  --nav-toggler-color: #7e8085;
  --primary-color: #565656;
  --primary-color-2: #7c4fe0;
  --secondary-color: #666;
  --secondary-color-2: #6b6b6b;
  --social-color-1: #3b5999;
  --social-color-2: #55acee;
  --social-color-3: #dd4b39;
  --social-color-4: #00b489;
  --white-color: #ffffff;
  --primary-t-color: #222;
  --primary-p-color: #565656;
  --primary-l-color: rgba(0, 0, 0, 0.12);
  --secondary-l-color: rgba(45, 49, 54, 0.09);
  --valid-color: #28a745;
  --invalid-color: #ffa200;
  --primary-bg-color: #f6f9fe;
  --primary-bg-color-2: linear-gradient(-47deg, #8731E8 0%, #4528DC 100%);
  --primary-bg-color-3: #ffffff;
  --primary-bg-color-4: rgba(16, 16, 45, 1);
  --nav-bg-color: #d3d3d3;
}

.landing-page {
  margin: 0;
  padding: 0;
}

.landing-page {
  font-family: var(--primary-font);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--primary-color);
}

.landing-page .main {
  background: var(--primary-bg-color-3);
}

.landing-page section,
.landing-page .section {
  position: relative;
}

.landing-page .container {
  width: 100%;
  margin: 0 auto;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6 {
  color: var(--primary-t-color);
  margin-bottom: 0;
}

.landing-page h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: 1.2;
  color: var(--white-color);
}

.landing-page h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: 1.3;
}

.landing-page h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: 1.5;
}

.landing-page h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: 1.3;
}

.landing-page h5 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
}

.landing-page h6 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
}

.landing-page p {
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: 1.5;
  color: var(--primary-p-color);
  margin-bottom: 0;
}

.landing-page .welcome-intro p {
  color: var(--white-color);
  font-size: 1.3rem;
}

.landing-page a {
  color: var(--nav-item-color);
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.landing-page a:hover, .landing-page a:focus {
  color: var(--primary-color-2);
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.landing-page .text-body > a {
  text-decoration: underline;
  color: #212529;
}

.landing-page ol, .landing-page ul {
  margin: 0;
  padding: 0;
}

.landing-page ol li, .landing-page ul li {
  list-style: none;
}

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

.landing-page .navbar .navbar-brand img {
  position: relative;
  top: 50px;
}

.service-thumb img {
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
}

/* ******************************
:: 4.0 COMMON CSS
****************************** */
.landing-page .fw-3 {
  font-weight: 300;
}

.landing-page .fw-4 {
  font-weight: 400;
}

.landing-page .fw-5 {
  font-weight: 500;
}

.landing-page .fw-6 {
  font-weight: 600;
}

.landing-page .fw-7 {
  font-weight: 700;
}

.landing-page .op-5 {
  opacity: 0.5;
}
.landing-page .text-underlined {
  text-decoration: underline;
}

.landing-page .text-underlined:hover, .landing-page .text-underlined:focus {
  text-decoration: underline;
}

.landing-page .text-primary {
  color: var(--primary-color-2) !important;
}

.landing-page .text-secondary {
  color: var(--secondary-color) !important;
}

.landing-page .featured-icon > span::before {
  font-size: 4.25rem;
  line-height: 1;
  color: var(--primary-color-2);
  margin: 0;
}

.landing-page .radius-100 {
  border-radius: 100px !important;
}

.landing-page .h-100vh {
  height: 100vh;
}

.landing-page .form-control {
  font-size: 15px;
  height: 60px;
  border: none;
  outline: none;
  padding-left: 20px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.landing-page .form-control:focus {
  border: none;
  outline: none;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/*SECTION HEADING*/
.landing-page .section-heading {
  margin-bottom: 80px;
}

@media (max-width: 991px) {
  .landing-page .section-heading {
    margin-bottom: 50px;
  }
}

.landing-page .section-heading > span {
  color: var(--primary-t-color);
}

.landing-page .section-heading > h2 {
  position: relative;
}

@media (max-width: 575px) {
  .landing-page .section-heading > h2 {
    line-height: 1.5;
  }
}

.landing-page .section-heading > h2::after {
  position: absolute;
  content: '';
  height: 2px;
  width: 70px;
  background-color: var(--primary-color-2);
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.landing-page .homepage-5 .features-area .section-heading > h2::after,
.landing-page .contact-page .contact-area .section-heading > h2::after {
  left: 0;
  -webkit-transform: inherit;
          transform: inherit;
}

/*SECTION PADDING*/
.landing-page .pt_0 {
  padding-top: 0;
}

.landing-page .ptb_50 {
  padding: 50px 0;
}

.landing-page .ptb_100 {
  padding: 100px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .landing-page .ptb_100 {
    padding: 70px 0;
  }
}

@media (max-width: 767px) {
  .landing-page .ptb_100 {
    padding: 50px 0;
  }
}

.landing-page .ptb_150 {
  padding: 150px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .landing-page .ptb_150 {
    padding: 100px 0;
  }
}

@media (max-width: 767px) {
  .landing-page .ptb_150 {
    padding: 50px 0;
  }
}

.landing-page .ptb_180 {
  padding: 180px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .landing-page .ptb_180 {
    padding: 130px 0;
  }
}

@media (max-width: 767px) {
  .landing-page .ptb_180 {
    padding: 130px 0;
  }
}

@media (max-width: 575px) {
  .landing-page .ptb_180 {
    padding: 80px 0;
  }
}

/*BUTTONS*/
.landing-page .btn {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white-color);
  line-height: 1;
  text-align: center;
  padding: 18px 30px;
  border: 0 none;
  border-radius: 6px;
  outline: 0 none;
  position: relative;
  z-index: 1;
}

.landing-page .btn:hover, .landing-page .btn:focus, .landing-page .btn:active {
  color: var(--white-color);
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.landing-page .btn-success {
  background: var(--valid-color) !important;
  border-color: var(--valid-color) !important;
}

.landing-page .button-group {
  margin-top: 30px;
}

.landing-page .button-group a {
  margin-right: 10px;
}

@media (max-width: 575px) {
  .landing-page .button-group a {
    margin-top: 0;
    margin-right: 5px;
  }
}

.landing-page .button-group a:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .landing-page .button-group a .btn {
    padding: 12px 20px;
  }
}

.landing-page .store-buttons a {
  text-align: left;
}

.landing-page .store-buttons img {
  max-width: 190px;
}

@media (max-width: 991px) {
  .landing-page .store-buttons img {
    max-width: 180px;
  }
}

@media (max-width: 575px) {
  .landing-page .store-buttons img {
    max-width: 160px;
  }
}

.landing-page .store-buttons.store-black img {
  max-width: 170px;
  margin-bottom: 10px;
}

@media (max-width: 991px) {
  .landing-page .store-buttons.store-black img {
    max-width: 160px;
  }
}

@media (max-width: 575px) {
  .landing-page .store-buttons.store-black img {
    max-width: 140px;
  }
}

@media (max-width: 991px) {
  .landing-page .res-margin {
    margin-bottom: 45px;
  }
}

@media (max-width: 767px) {
  .landing-page .res-margin {
    margin-bottom: 30px;
  }
}

/*BG SHAPE*/
.landing-page .shapes-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.landing-page .shape {
  position: relative;
}

.landing-page .bg-shape {
  position: absolute;
  height: 190%;
  width: 100%;
  display: block;
  border-radius: 120px;
  background: var(--primary-bg-color-2);
  bottom: 0;
  right: 0;
  z-index: 0;
}

@media (max-width: 991px) {
  .landing-page .bg-shape {
    height: 130%;
  }
}

/*BACKGROUND OVERLAY*/
.landing-page .bg-overlay {
  position: relative;
  z-index: 0;
}

.landing-page .bg-overlay::after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--primary-bg-color-2);
  opacity: 0.94;
  z-index: -1;
}

.landing-page .overlay-dark {
  position: relative;
  z-index: 0;
}

.landing-page .overlay-dark::after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--primary-bg-color-4);
  opacity: 0.80;
  z-index: -1;
}

/*BACKGROUND COLORS*/
.landing-page .bg-gray {
  background: var(--primary-bg-color);
}

.landing-page .bg-inherit {
  background: inherit !important;
}

.landing-page .btn,
.landing-page .btn:active,
.landing-page .btn.sApp-btn:before,
.landing-page .benifits-item:after {
  background: var(--primary-bg-color-2);
}

.landing-page .welcome-intro .btn {
  border: 3px solid var(--white-color);
}

/*SOCIAL ICONS*/
.landing-page .social-icons svg {
  display: block;
  height: 100%;
  line-height: 45px;
  margin: 0 auto;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.landing-page .social-icons > a {
  margin: 5px;
  font-size: 20px;
  color: var(--white-color);
  border-radius: 3px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.landing-page .social-icons > a:hover svg:first-child {
  margin-top: -45px;
}

.landing-page .social-icons > a.facebook {
  background-color: var(--social-color-1) !important;
}

/* ******************************
:: 7.0 HEADER AREA CSS
****************************** */
.landing-page .navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 999;
  -webkit-transition: .3s;
  transition: .3s;
  background: transparent;
}
.landing-page .navbar .navbar-nav .nav-link {
  padding: 1.75rem 0.5rem;
}

.landing-page .navbar.navbar-dark .navbar-nav .nav-link {
  color: var(--white-color);
}

.landing-page .navbar.navbar-dark .btn-outline {
  color: var(--white-color);
}

@media (max-width: 991px) {
  .landing-page .navbar ul li {
    text-align: right;
  }
  .landing-page .navbar .navbar-nav .nav-link {
    color: var(--white-color);
    padding: 0.75rem 0.5rem !important;
  }
  /* the row is tight below 992px: without this the flag <img> collapses to 0x0
     and the logo gets squeezed out of its 154x40 aspect ratio */
  .landing-page .navbar-brand,
  .landing-page .navbar .navbar-nav .nav-item {
    flex-shrink: 0;
  }
  .landing-page .featured-icon > span::before {
    font-size: 3.25rem;
  }
}
/* ******************************
:: 8.0 WELCOME AREA CSS
****************************** */
.landing-page .welcome-area {
  height: 800px;
  z-index: 1;
}

@media (max-width: 991px) {
  .landing-page .welcome-area {
    height: 720px !important;
  }
}

@media (max-width: 767px) {
  .landing-page .welcome-area {
    height: 100% !important;
    padding-top: 90px;
  }
}

@media (max-width: 767px) {
  .landing-page .welcome-area .welcome-intro {
    margin-top: 30px;
  }
}

@media (max-width: 575px) {
  .landing-page .welcome-area .welcome-intro {
    margin-top: 0;
  }
}

/* the three nav items need 220px and cannot shrink, so the logo yields on phones */
@media (max-width: 575px) {
  .landing-page .navbar-brand img {
    width: 96px;
    height: auto;
  }
}

/* below ~360px even the shrunken logo plus the nav does not fit on one row;
   wrapping onto a second row beats scrolling the whole page sideways */
@media (max-width: 359px) {
  .landing-page .navbar {
    flex-wrap: wrap;
  }
  .landing-page .navbar > .container {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ******************************
:: 11.0 SERVICE AREA CSS
****************************** */
.landing-page .service-list.style-two > li {
  list-style: disc;
  margin-left: 1rem;
}

.landing-page .service-icon span {
  height: 54px;
  width: 54px;
  display: inline-block;
  text-align: center;
  line-height: 54px;
  font-size: 1.5rem;
  color: var(--primary-color-2);
  border-radius: 4px;
  background-color: var(--white-color);
  border: 1px solid var(--primary-l-color);
  -webkit-box-shadow: 0 1px 3px var(--primary-l-color);
          box-shadow: 0 1px 3px var(--primary-l-color);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

/* ******************************
:: 12.0 DISCOVER AREA CSS
****************************** */
.landing-page .discover-area .list-box .icon {
  color: var(--primary-color-2);
}
.landing-page .discover-area .service-thumb {
  text-align: center;
}

@media (max-width: 575px) {
  .landing-page .discover-area .discover-thumb {
    max-width: 300px;
  }
}

/* ******************************
:: 13.0 WORK AREA CSS
****************************** */
.landing-page .work-area .single-work {
  position: relative;
}

.landing-page .work-area .single-work::after {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  border-top: 3px solid var(--white-color);
  border-right: 3px solid var(--white-color);
  top: 50%;
  right: 0;
  margin-right: -50px;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

@media (max-width: 767px) {
  .landing-page .work-area .single-work::after {
    display: none;
  }
}

.landing-page .work-area .single-work:hover::after {
  -webkit-transform: translateX(5px) translateY(-50%) rotate(45deg);
          transform: translateX(5px) translateY(-50%) rotate(45deg);
}

.landing-page .work-area .col-12:last-of-type .single-work::after {
  display: none;
}

/* ******************************
:: 17.0 PRICE PLAN AREA CSS
****************************** */
.landing-page .single-price-plan {
  background-color: var(--primary-bg-color-3);
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.313rem 0.875rem var(--secondary-l-color);
          box-shadow: 0 0.313rem 0.875rem var(--secondary-l-color);
}

.landing-page .single-price-plan .plan-title > h4 {
  letter-spacing: 3px;
  opacity: 0.8;
}

.landing-page .single-price-plan .plan-price > h2 {
  font-size: 3em;
  background-image: var(--primary-bg-color-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-page .single-price-plan .plan-price > h2 > small {
  font-size: 60%;
}

.landing-page .single-price-plan .plan-button {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (max-width: 767px) {
  .landing-page .single-price-plan .plan-button {
    position: inherit;
    left: inherit;
    -webkit-transform: inherit;
            transform: inherit;
  }
}

/* ******************************
:: 26.0 FOOTER AREA CSS
****************************** */
.landing-page .footer-area .footer-items .social-icons > a {
  font-size: 18px;
  padding: 5px 10px;
}

.landing-page .footer-area .footer-items .social-icons > a:hover svg:first-child {
  margin-top: -40px;
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
  .landing-page .footer-area .footer-items {
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .landing-page .footer-area .footer-items {
    margin-bottom: 30px;
  }
}

.landing-page .footer-area .copyright-area {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 575px) {
  .landing-page .footer-area .col-12:last-of-type .footer-items {
    margin-bottom: 0;
  }
}


@media (max-width: 991px) {
  .landing-page h1 {
    font-size: 3em;
  }
  .landing-page h2 {
    font-size: 36px;
  }
  .landing-page .service-area .service-thumb {
    text-align: center;
  }
  .landing-page .welcome-intro p {
    font-size: 1rem;
  }
  .landing-page section#home {
    padding-top: 100px !important;
  }
  .landing-page .service-thumb img {
    max-width: 70% !important;
  }
  .landing-page .navbar .navbar-brand img {
    max-width: 100%;
  }
  .landing-page section#home {
    padding-top: 100px !important;
  }
}

@media (max-width: 767px) {
  .landing-page h1 {
    font-size: 2.2rem;
  }
  .landing-page h2 {
    font-size: 30px;
    line-height: 1.4;
  }
  .landing-page .welcome-intro p {
    font-size: 0.9rem;
  }
  .landing-page .welcome-intro {
    padding-bottom: 70px;
  }
  .landing-page .navbar .navbar-brand img {
    position: static;
    max-width: 90%;
  }
  .landing-page section#home {
    padding-top: 150px !important;
  }
  .landing-page .service-thumb img {
    max-width: 80% !important;
  }
}

@media (max-width: 575px) {
  .landing-page h1 {
    font-size: 2em;
    line-height: 1.2;
  }
  .landing-page h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .landing-page h3 {
    font-size: 18px;
    line-height: 1.4;
  }
  .landing-page p {
    font-size: 14px;
    line-height: 26px;
  }
  .landing-page .p-4 {
    padding: 1rem !important;
  }
  .landing-page .bg-shape {
    border-radius: 0;
  }
  .landing-page .welcome-intro {
    padding-top: 30px;
  }
  .landing-page .welcome-intro p {
    font-size: 0.9rem;
  }
  .service-thumb img {
    max-width: 80% !important;
  }
}

/* ******************************
:: CUSTOM KVESTOR CSS
****************************** */
.landing-page #navbar-nav .nav-item .nav-link {
  border: none;
}
.landing-page section#home {
  padding: 0;
}
.landing-page .media {
  display: flex;
  align-items: flex-start;
}
.landing-page .media .media-body {
  flex: 1;
}
.landing-page .media.list-box .media-body {
  padding-left: 1rem;
}
.landing-page .media.list-box .icon {
  color: var(--primary-color-2);
}
.landing-page .bg-overlay-custom {
  background: var(--primary-bg-color-2);
}
.landing-page .price-plan-wrapper .single-price-plan {
  width: 350px;
}
.landing-page .price-plan-wrapper .single-price-plan h2 {
  font-size: 28px;
}
.landing-page .store-buttons > span:first-child {
  margin-right: 10px;
}
.landing-page .subscribe-form .form-group {
  margin-bottom: 1rem;
}
.landing-page .subscribe-form button {
  width: 100%;
}
.landing-page .footer-area .logo {
  width: 120px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.landing-page .footer-items .support-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 500;
}
.landing-page .footer-items .support-link svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
/* nadpisy stlpcov paticky - inak by dedili h3 (24px) */
.landing-page .footer-area .footer-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.landing-page .footer-links li + li {
  margin-top: 0.4rem;
}
.landing-page .footer-links a {
  color: var(--primary-p-color);
}
.landing-page .footer-links a:hover {
  color: var(--primary-color-2);
}
/* prepinac jazyka v spodnej liste */
.landing-page .footer-area .copyright-right {
  gap: 0.5rem 1.25rem;
}
.landing-page .footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.landing-page .footer-area {
  background-color: var(--primary-bg-color);
}
.landing-page .footer-items .button-group {
  margin-top: 0;
}



/* ******************************
:: CUSTOM KVESTOR CSS - LANDING SECTIONS
****************************** */

/* Hero text sat *under* .bg-shape: the shape is an absolutely positioned child of
   .shapes-container (z-index 0), while the hero copy is static in-flow content, which paints
   earlier. Only .btn was visible because it carries position:relative;z-index:1 of its own.
   Lifting the whole hero container fixes h1 + p in one rule. */
.landing-page .welcome-area .container {
  position: relative;
  z-index: 1;
}

/* inline SVG feature icons, sized to match the flaticon glyphs above */
.landing-page .featured-icon > svg {
  width: 4.25rem;
  height: 4.25rem;
  color: var(--primary-color-2);
}

.landing-page .features-area .row:last-of-type {
  --bs-gutter-y: 1.5rem;
}

.landing-page .icon-box {
  height: 100%;
  background-color: var(--primary-bg-color-3);
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.313rem 0.875rem var(--secondary-l-color);
          box-shadow: 0 0.313rem 0.875rem var(--secondary-l-color);
}

/* .avatar-md was used by the "how it works" step icons but defined nowhere: the class comes
   from the original theme and was lost when this file was trimmed. Without it each icon fell
   back to its intrinsic size (128px, 512px, 512px), so the first step looked tiny next to the
   other two. 128px matches the smallest source asset, so nothing is upscaled. */
.landing-page .avatar-md {
  width: 128px;
  height: 128px;
}

/* subpage header band - the navbar is absolutely positioned and its brand is pushed down
   50px, so the band needs enough top padding to clear it (the home page gets that for free
   from the 800px hero). Gradient comes from the existing .bg-overlay-custom. */
.landing-page .page-header-area {
  padding: 190px 0 90px;
}

/* operator / company identification */
.landing-page .company-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  background-color: var(--primary-bg-color-3);
  border: 1px solid var(--primary-l-color);
  border-radius: 8px;
}
.landing-page .company-details {
  display: grid;
  grid-template-columns: minmax(8rem, -webkit-max-content) 1fr;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0;
}
.landing-page .company-details dt {
  font-weight: 500;
  color: var(--primary-t-color);
}
.landing-page .company-details dd {
  margin: 0;
  color: var(--primary-p-color);
}

/* channel / partner strip */
.landing-page .channel-strip {
  gap: 1rem 2.5rem;
  margin-bottom: 0;
}
.landing-page .channel-strip > li {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary-t-color);
}

/* price plan: three equal columns with the CTA aligned along the bottom */
.landing-page .price-plan-wrapper {
  gap: 1.5rem;
}
.landing-page .price-plan-wrapper .single-price-plan {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
}
.landing-page .price-plan-wrapper .single-price-plan .plan-description {
  flex: 1 1 auto;
}
.landing-page .price-plan-wrapper .single-price-plan .plan-button {
  position: static;
  left: auto;
  -webkit-transform: none;
          transform: none;
  margin-top: auto;
}
.landing-page .single-price-plan .plan-price-note {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--secondary-color-2);
}
.landing-page .pricing-note {
  margin-top: 1rem;
  margin-bottom: 0;
  font-style: italic;
}

/* FAQ - native <details>, no JavaScript */
.landing-page .faq-item {
  background-color: var(--primary-bg-color-3);
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.313rem 0.875rem var(--secondary-l-color);
          box-shadow: 0 0.313rem 0.875rem var(--secondary-l-color);
  margin-bottom: 1rem;
  padding: 0 1.5rem;
}
.landing-page .faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  color: var(--primary-t-color);
  cursor: pointer;
  list-style: none;
}
.landing-page .faq-item > summary::-webkit-details-marker {
  display: none;
}
.landing-page .faq-item > summary::after {
  content: '+';
  flex-shrink: 0;
  margin-left: 1rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary-color-2);
}
.landing-page .faq-item[open] > summary::after {
  content: '\2212';
}
.landing-page .faq-item > p {
  margin-bottom: 0;
  padding-bottom: 1.25rem;
}

/* general terms - now its own page, so the legal text is the content rather than a quiet
   footnote under the pricing block: body copy at full size, headings clearly subordinate to
   the h1 in the page header band. (.terms-title dropped with the inline section - the page
   title now lives in that band.) */
.landing-page .terms-area h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.landing-page .terms-area h3:first-child {
  margin-top: 0;
}
/* numbered clauses, not prose: they need to read as separate items, not one block */
.landing-page .terms-area p {
  margin-bottom: 0.75rem;
}
.landing-page .terms-area .doc-version {
  color: var(--primary-p-color);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.landing-page .terms-area .doc-toc {
  margin: 1.5rem 0 0.5rem;
  padding-left: 1.25rem;
  line-height: 1.9;
}
.landing-page .terms-area .doc-toc a {
  color: inherit;
}
.landing-page .terms-area .doc-toc a:hover {
  text-decoration: underline;
}
.landing-page .terms-area table th,
.landing-page .terms-area table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9375rem;
  text-align: left;
  vertical-align: top;
}
.landing-page .terms-area .table-responsive {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .landing-page .page-header-area {
    padding: 130px 0 60px;
  }
}

@media (max-width: 575px) {
  .landing-page .company-card {
    padding: 1.25rem;
  }
  .landing-page .company-details {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .landing-page .company-details dd {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 991px) {
  .landing-page .featured-icon > svg {
    width: 3.25rem;
    height: 3.25rem;
  }
  .landing-page .channel-strip > li {
    font-size: 1.25rem;
  }
}

@media (min-width: 992px) {
  .landing-page .price-plan-wrapper .single-price-plan {
    width: calc((100% - 3rem) / 3);
    max-width: none;
  }
}

/* ******************************
:: CUSTOM KVESTOR CSS - ACCESSIBILITY
****************************** */

/* The theme strips the focus ring from every link (`a:hover, a:focus { outline: none }`)
   and from .btn (`outline: 0 none`), leaving keyboard users with no indicator at all.
   :focus-visible has the same specificity as :focus, so this must stay last in the file.
   Two rings, because one colour cannot cover both cases: the plan buttons are white text
   on a purple gradient sitting inside a white card. */
.landing-page a:focus-visible,
.landing-page .btn:focus-visible,
.landing-page summary:focus-visible {
  outline: none;
  -webkit-box-shadow: 0 0 0 2px var(--white-color), 0 0 0 5px var(--primary-bg-color-4);
          box-shadow: 0 0 0 2px var(--white-color), 0 0 0 5px var(--primary-bg-color-4);
  border-radius: 3px;
}

/* 123x23 next to a 58px button; inline-block so the padding counts towards the target */
.landing-page .welcome-intro .text-underlined {
  display: inline-block;
  padding: 0.65rem 0;
}

/* ******************************
:: CUSTOM KVESTOR CSS - LINE LENGTH
****************************** */

/* Nothing adapts above 992px, so prose ran to 85-110 characters per line at 1400px.
   Below ~1200px the natural width is already under these caps, so these are no-ops there. */
.landing-page .section-heading p {
  max-width: 68ch;
  margin-inline: auto;
}

.landing-page .check-list {
  max-width: 72ch;
  margin-inline: auto;
}

.landing-page .faq-item > p {
  max-width: 80ch;
}

.landing-page .terms-area p,
.landing-page .terms-area li {
  max-width: 80ch;
}