/*
Theme Name: VITALCENTRE
Theme URI: https://wordpress.org/themes/ebike-theme/
Author: DANMO - Reklamná agentúra
Author URI: https://www.danmo.sk/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 6.6.1.
Tested up to: 6.6.1.
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vitalcentre.sk
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, accessibility-ready

VITALCENTRE WordPress Theme, (C) 2021 WordPress.org
VITALCENTRE is distributed under the terms of the GNU GPL.
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */
@charset "UTF-8";

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #343a40; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #06361c; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #cc9d2b; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --icon-color-bg:#A9A36A;
}

/* #AAA36D */


.header {
    background-color: color-mix(in srgb, var(--background-color), transparent 75%);
}

.header .logo img {
    max-height: 56px;
    margin-right: 8px;
}

.scrolled .header {
    background-color: color-mix(in srgb, var(--background-color), transparent 0%);
}

.page-title {
    padding: 220px 0px 180px;
}
.page-title h1 {
    font-size: 30px;
    font-weight: 400;
    font-style: italic;
}

.navmenu li.current-menu-item a {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
}
.navmenu li.current-menu-item a:before
    {
    visibility: visible;
    width: 100%;
}

.hero-2 .content-inner {
    max-width: 790px;
    text-align: center;
}
.hero-2 .content-inner h3 {
    font-family: var(--heading-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
}


.hero-2 .frame-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}
.hero-2 .content-inner h3 span {
    margin-top: 25px;
    font-family: "Dancing Script", cursive;
    font-size: 42px;
    font-weight: 300;
    font-style: normal;
}

.page-title h1 {
    margin-top: 25px;
    font-family: "Dancing Script", cursive;
    font-size: 42px;
    font-weight: 300;
    font-style: normal;
}

.gold-text-gradient {
  background: linear-gradient(
    120deg,
    #b8860b 0%,
    #f7e08a 20%,
    #fff8cc 30%,
    #d4af37 45%,
    #b8860b 60%,
    #fff3b0 75%,
    #c9971a 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 2px 6px rgba(0,0,0,0.2);

  animation: goldShineMove 3.5s linear infinite;
}

@keyframes goldShineMove {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/*
* Homepage
*/
/*.faq-5 .section-title h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
    color: var(--accent-color);
}

.faq-5 .section-title h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--contrast-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.faq-5 .faq-item .faq-header .faq-number {
    background: color-mix(in srgb, var(--icon-color-bg) 95%, transparent);
}

.faq-5 .faq-item .faq-header h4 {
    color: var(--icon-color-bg);
}

.faq-5 .faq-item.faq-active .faq-header .faq-number {
    background: var(--icon-color-bg);
    color: var(--default-color);
}*/

.about-4 .about-content .label {
    font-family: var(--heading-font);
    font-size: 18px;
    text-transform: none !important;
    border-left: 4px solid var(--contrast-color);
    padding-left: 15px;
    line-height: 40px;
}

.about-content.right-col ul.features-list li {
    position: relative;
    padding-left: 0px;
    border-bottom: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}
.about-content.right-col ul.features-list li::before {
    content: "\F26B";
    font-family: "bootstrap-icons";
    position: relative;
    left: 0;
    top: 2px;
    font-size: 24px;
    line-height: 1;
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 2px;
}
.call-to-action-3 ul.benefits-list li {
    position: relative;
    padding-left: 0px;
    border-bottom: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}
.call-to-action-3 ul.benefits-list li::before {
    content: "\F287";
    font-family: "bootstrap-icons";
    position: relative;
    left: 0;
    top: 0px;
    font-size: 10px;
    line-height: 1;
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 2px;
}
.call-to-action-4 .cta-box .content p::before, .call-to-action-4 .cta-box .content p::after {
    background-color: #cc9d2b;
}
.call-to-action-2 {
    padding: 240px 0;
}
.call-to-action-2:before {
    background: color-mix(in srgb, var(--background-color), transparent 60%);
}
.call-to-action-2 h2 {
    font-size: 3rem;
}

.services-2 .service-card.featured {
    transform: scale(1.00);
}
.services-2 .service-card.featured:hover {
    transform: scale(1.02) translateY(-8px);
}


.section-title.wp-block-vital-page-title {
    padding-bottom: 60px;

}

.services-2 .service-card.featured .service-link {
    display: inline-block;
    width: 40%;
    color: var(--accent-color);
    background: var(--contrast-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 0px;
    border-radius: 50px;
    transition: 0.3s;
}
.services-2 .service-card .service-link {
    display: inline-block;
    width: 40%;
    color: var(--accent-color);
    background: transparent;
    border: 1px solid var(--accent-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 0px;
    border-radius: 50px;
    transition: 0.3s;
}

.services-2 .service-card.featured h3,.services-2 .service-card.featured p {
    color: color-mix(in srgb, var(--surface-color) 85%, transparent);
}
.services-2 .service-card .icon-wrapper {
    background: color-mix(in srgb, var(--contrast-color) 15%, transparent);
}
.services-2 .service-card:hover .icon-wrapper {
    background: color-mix(in srgb, var(--contrast-color) 15%, transparent);
}
.services-2 .service-card .icon-wrapper i {
    color: var(--contrast-color); 
}



/*
* Gift Cards
*/
.services .service-card {
    background: linear-gradient(145deg, var(--surface-color), color-mix(in srgb, var(--surface-color), var(--accent-color) 3%));
}
.services .service-card.big-gift.dark-background {
    --background-color: #06361c;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #10994F;
    --contrast-color: #cc9d2b;
}
.services .service-card.big-gift.dark-background {
    /*background: var(--background-color);*/
    background: linear-gradient(145deg, var(--background-color), color-mix(in srgb, var(--surface-color), var(--surface-color) 13%));
}
.services .service-card.big-gift.dark-background .service-head {
    border-bottom:1px solid var(--contrast-color);
}
.services .service-card.big-gift.dark-background .service-icon {
    color: var(--contrast-color);
}
.services .service-card.big-gift.dark-background .service-title {
    color: var(--contrast-color);
    font-family: var(--default-font);
    text-transform: uppercase;
    font-weight: 400;
}
.services .service-card.big-gift.dark-background .service-text {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 400;
}

.services .service-card.compact.featured {
  margin-bottom: 18px;
  border: 1px solid var(--contrast-color);
}

.services .service-card.compact.featured .popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--contrast-color);
    color: var(--surface-color);
    padding: 6px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.services .service-card .service-link span {
    color: var(--contrast-color);
    font-family: var(--heading-font);
}

.services .service-card:hover {
  transform: translateY(0px);
}

.services .service-card.compact .service-title {
    color: var(--accent-color);
}

.services .service-card.compact {
    padding: 12px 24px;
}

/*
* Price list
*/
.pricing-2 .plan-pricing .price-wrapper .amount {
    color: var(--accent-color);
    font-family: var(--heading-font);
}

.pricing-2 .plan-features .features-list > li::before {
  /*content: "\f26a";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 16px;
  line-height: 1;*/
}

.pricing-2 .plan-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-2 .plan-features ul li {
  position: relative;
  padding-left: 28px;
  border-bottom: none;
  list-style: none;
}

.pricing-2 .plan-features ul li::before {
  content: "\f26a";
  font-family: "bootstrap-icons";
  position: relative;
  left: 0;
  top: 2px;
  font-size: 16px;
  line-height: 1;

  color: var(--accent-color);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.pricing-2 .plan-features .features-list li {
    font-size: 13px;
}

.pricing-card.featured {
  border: 2px solid #0d6efd;
}

.pricing-card.standard {
  border: 2px solid #6c757d;
}

.pricing-card.best-price {
  border: 2px solid #198754;
}

.popular-badge.badge-odporucane {
  background: #0d6efd;
  color: #fff;
}

.popular-badge.badge-standard {
  background: #6c757d;
  color: #fff;
}

.popular-badge.badge-best-price {
  background: #198754;
  color: #fff;
}

.pricing-2 .pricing-card.best-price {
  border-color: var(--contrast-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pricing-2 .pricing-card.best-price  .popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--contrast-color);
  color: var(--surface-color);
  padding: 6px 20px;
  border-radius: 25px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-2 .pricing-card.featured  .popular-badge {
  font-size: 10px;
}


/*
* PRICE PAGE
*/

.faq-4 .section-title {
    padding-bottom: 0px;
}
.pricing-2 {
    padding-top: 0px;
    padding-bottom: 60px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  background-color: var(--contrast-color);
  width: 40px;
  height: 40px;
}

.scroll-top i {
  font-size: 24px;
  color: var(--accent-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: #ffffff;
}
.scroll-top:hover i {
  color: #ffffff;
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

.services-5 .service-card .service-icon {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--contrast-color) 15%, transparent);
}

/*
* REZERVACIE
*/

.bpa-front-dc--body .bpa-front-module--category  {display: none !important;}
.bpa-front-tabs--panel-body .bpa-front-dc--body {min-height: unset !important;}
.bpa-front--dt-ts__sub-heading {display: none !important}

.booking {display: none;}
.starter-section h2 { text-align:center; }

#post-3 .starter-section h3, #post-3 .starter-section p, #post-3 .starter-section ul li {
    text-align: left !important;
}

img.gift-card {border-radius:8px !important; display: block;width: 100%;}
a.disabled-link {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
  text-decoration: none;
}

/*
* MEDIA SCREEN
*/

@media (max-width: 767.98px) {

    .hero-2 .cinema-frame {height: 80vh;}
    .hero-2 .content-inner h3 {font-size: 30px;}
    .hero-2 .content-inner h3 span {font-size: 30px;}
    .hero-2 .frame-content {align-items: center;padding: 0 20px 10px;}

    .footer .footer-info, .footer .footer-links, .footer .footer-contact, .footer .footer-newsletter {
        margin-bottom: 36px;
        text-align: center;
    }
    .about-4 .about-content {text-align: justify;}
    .booking {display: block;background: var(--accent-color);}
    .navmenu li.current-menu-ite.booking a { color: color-mix(in srgb, var(--accent-color), transparent 25%);}
    .faq-5 .faq-accordion {flex-direction: column;}
    .services-2 .service-card .service-link, .services-2 .service-card.featured .service-link {width: 80%;margin: 0 auto;}
    .faq-4 .help-banner .icon-box {margin: 0 auto;}

}