:root {
  /* Color Palette - Option 2 */
  --primary-color: #00796B;   /* Deep Teal - Trust, Sophistication */
  --secondary-color: #C17C74; /* Muted Terracotta - Warmth, Earthiness */
  --accent-color: #FFC107;    /* Amber/Gold - Energy, Optimism (Use Sparingly) */
  --text-primary: #212121;    /* Very Dark Grey - Strong Readability */
  --text-secondary: #616161;  /* Medium Grey - Secondary Info */
  --background-primary: #FAFAFA; /* Very Light Grey - Clean, Minimal */
  --background-secondary: #FFFFFF; /* White - Clarity, Cards */
  --border-color: #EEEEEE;      /* Light Grey - Subtle Dividers */

  /* Consider adding shades if needed later, e.g., --primary-dark: ... */
}

body {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
            "wdth" 100,
            "YTLC" 500;
    /* padding-top: 70px; */ /* Remove or adjust based on final navbar height */
    /* No extra top padding needed if header-top is static */
}

main {
    overflow: hidden;
    background-color: var(--background-primary);
}

footer {
    margin-top: 1rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
}

h1 {
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h2 {
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

h3,h4,h5 {
    font-weight: 700;
}

.summary p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.summary ol li {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.summary ul.selling-line li {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

ol li > strong {
    font-weight: 500;
}

a {
    text-decoration: none;
    color: inherit;
}

.navbar-marketing {
    display: flex;
    margin-right: auto;
    margin-left: auto;
}

.navbar-marketing .item:first-child {
    margin-left: 2rem;
}

.navbar-marketing .item {
    margin-right: 3rem;
    font-size: 0.8rem;
    color: #FFFFFF;
}

.navbar-marketing .item i.bi-check-lg,
.navbar-marketing .item i.bi-star-fill.last,
.navbar-marketing .item i.bi-gift {
    margin-right: 0.5rem;
}

.navbar-marketing .item i.bi-check-lg,
.navbar-marketing .item i.bi-star-fill,
.navbar-marketing .item i.bi-gift {
    color: #22c55d;
}

.navbar-nav {
    margin-right: 1rem;
}

.navbar-nav .nav-item {
    margin-right: 1rem;
}

.navbar-nav .nav-link {
    color: #FFFFFF;
}

.search-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: rgba(255,255,255,0.95);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.15);
}

#search-nav-form {
    width: 50%;
}

ol li.breadcrumb-item {
    font-size: 0.9rem;
}

.breadcrumb-item a
{
    text-decoration: none;
}

.btn-top-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3ecf8e;
    --bs-btn-border-color: #33a572;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #33A572FF;
    --bs-btn-hover-border-color: #33A572FF;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
    font-weight: 700;
    padding: 10px 15px;
    color: #FFFFFF !important;
}

.btn-top-violet {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4c91f0;
    --bs-btn-border-color: #4c91f0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2d5790;
    --bs-btn-hover-border-color: #2d5790;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2d5790;
    --bs-btn-active-border-color: #2d5790;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1e3a60;
    --bs-btn-disabled-border-color: #1e3a60;
    color: #FFFFFF !important;
}

.bg-top-primary {
    background-color: #024db6;
}

.bg-image {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    margin-bottom: 1rem;
}

.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}

/* Home */

.home-search {
    max-width: 85%;
    margin-bottom: 12px;
}

.home-search i.bi-search {
    margin-right: 1rem;
}

.home-search .twitter-typeahead {
    flex: 1 1 auto;
    width: 1% !important;
    /*width: 1%;*/
    /*min-width: 0;*/
    /*padding: 0.5rem 1rem;*/
    /*font-size: 1.25rem;*/
    /*border-radius: 0.5rem;*/
    /*border-top-right-radius: 0;*/
    /*border-bottom-right-radius: 0;*/
}

.home-search .twitter-typeahead input[type='text'] {
    border-radius: 0.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%;
}

.home-search .input-group-text {
    background-color: var(--accent-color);
    color: var(--text-primary);
    cursor: pointer;
}

.home-search .tt-suggestion {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius,0);
    cursor: pointer;
}

.home-search .tt-suggestion:focus,
.home-search .tt-suggestion:hover,
.home-search .tt-suggestion:active,
.home-search .tt-cursor {
    color: #3ecf8e;
    background-color: var(--bs-dropdown-link-hover-bg);
}

.header-top {
    height: 45px; /* Keep height if needed */
    color: var(--background-secondary);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: var(--primary-color);
    font-size: 0.9rem;
    /* position: absolute; Removed */
    /* top: 0; Removed */
    /* right: 0; Removed */
    /* left: 0; Removed */
    /* z-index: 1030; Removed or lowered */
     z-index: 1020; /* Lower than sticky navbar */
}

.header-top .item {
    margin-right: 3rem;
}

.header-top .item i {
    margin-right: 0.5rem;
}

.header-top .item i {
    color: #22c55d;
}

.header-selling {
    display: flex;
    justify-content: center;
    /* margin-top: -45px; /* Remove negative margin */
    position: relative;
}

.hero-projecth {
    display: flex;
    align-items: center;
    max-width: 1100px;
    padding: 48px 0px 18px 0px;
    color: var(--text-primary);
    position: relative;
}

.hero-projecth .hero-projecth__left {
    padding-right: 30px;
    width: 70%;
}

.hero-projecth .hero-projecth__right {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0; 
}

.hero-projecth .hero-projecth__subheader {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 24px;
    max-width: 85%;
}

.hero-projecth .hero-projecth__sp {
    font-weight: 600;
    font-size: 18px;
    margin-top: 20px;
}

.hero-projecth .hero-projecth__right .hero-projecth__image {
    display: flex;
    justify-content: center;
}

.hero-projecth .logo-container {
    margin-bottom: 12px;
}

.logo-container {
    font-size: 22px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
}

@media (max-width: 480px) {
    p {
        font-size: 1.2rem;
    }

    .product-section p {
        font-size: 1rem;
    }

    ul.selling-line li {
        font-size: 1.2rem;
    }

    ol li {
        font-size: 1.2rem;
    }

    .header-top {
        display: none;
    }

    .header-selling {
        padding-top: 30px;
    }

    .hero-projecth {
        padding: 24px;
        padding-bottom: 3rem;
        max-width: 100%; /* Override the 1100px max-width */
    }

    .hero-projecth .hero-projecth__left {
        flex-basis: auto;
        width: 100%;
        padding-right: 0;
        margin-bottom: 2rem;
        text-align: center;
        overflow: hidden;
        position: relative;
        overflow-x: hidden;
    }

    .hero-projecth .hero-projecth__right {
        flex-basis: auto;
        width: 100%;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }

    .hero-projecth .hero-projecth__subheader {
        max-width: 85%;
    }

    .home-search {
        max-width: 100%;
    }

    .summary {
        padding: 0 24px;
    }

    .summary .category-title {
        font-size: 1.3rem;
    }

    .btn-top-green.full-width {
        width: 100%;
        padding: 10px 0px;
    }
}

@media (max-width: 960px) {
    .header-top {
        font-size: 0.8rem;
    }

    .header-top .item {
        margin-right: 1rem;
    }

    .home-search {
        max-width: 100%;
    }

    .home-search input[type='text']{
        font-size: 1rem;
    }
}

/* Responsive layout for Hero Section */
@media (max-width: 991px) { /* Below large screens */
    .hero-projecth {
        flex-direction: column; /* Stack columns vertically */
        padding: 0px 20px; /* Adjust padding for vertical layout */
        align-items: stretch; /* Reset alignment for vertical stack */
    }

    .hero-projecth .hero-projecth__left {
        flex-basis: auto;
        width: 100%;
        min-width: 0; /* Allow flex item to shrink below content size */
        padding-right: 0;
        margin-bottom: 0rem;
        text-align: center;
        overflow: hidden; /* Ensure content doesn't overflow the shrinking container */
        position: relative; /* Add positioning context */
    }

    .hero-projecth .hero-projecth__right {
        flex-basis: auto;
        width: 100%;
        margin-bottom: 0;
        display: flex !important; /* Force display flex */
        justify-content: center;
        min-height: 450px; /* Ensure minimum height for the phone image */
        padding-top: 1rem; /* Add some space above the phone */
    }

    .hero-projecth .hero-projecth__subheader {
        max-width: 90%; /* Adjust subheader width */
        margin-left: auto;
        margin-right: auto;
    }

    .home-search {
        max-width: 90%; /* Adjust search width */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Keep specific overrides for very small screens if needed */
@media (max-width: 480px) {
    /* .hero-projecth .hero-projecth__left { margin-right: 0; } /* Already handled above */ */
    /* Other 480px overrides can remain, e.g.: */
     .hero-projecth {
         padding-bottom: 2rem; /* Example override */
     }
     .hero-projecth .hero-projecth__right {
          /* Upewnijmy się, że jest widoczny - display: none jest zakomentowany */
          /* Można dostosować rozmiar telefonu, jeśli jest za duży */
          /* np. scale(0.8) */
     }
}

/* End Home */

/* Page & Product */

.product-section {
    background-color: #F1F1F1;
}

.product-section .pros-list {
    font-size: 1.1rem;
}

.product-section .pros-list li span {
    color: #0f5132;
}

.product-section .cons-list {
    font-size: 1.1rem;
}

.product-section .cons-list li span {
    color: #842029;
}

.product-section h4 {
    font-size: 1.4rem;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0);
}

.page-item p {
    background: #ffffff;
    margin: 0.5rem;
    padding: 0.4rem 0.3rem 0.5rem 0.3rem;
    box-shadow: 0 0 #0000;
    border-color: rgb(148 163 184);
    border-radius: 0.5rem;
    text-align: center;
}

.page-item a {
    text-decoration: none;
    color: #323238;
    font-weight: 600;
}

.page-item a img {
    max-width: 100%;
    padding-bottom: 1rem;
}

.page-item .page-description {
    border-radius: 4px;
    background-color: rgba(40, 96, 108, 0.9);
    padding: 1rem 1rem;
    font-weight: bold;
    font-size: 2rem;
    text-shadow: 0px 0px 2px black;
    line-height: 2.5rem;
}

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }

    .border-sm-start-none {
        border-left: none !important;
    }

    .product-section {
        background-color: #FFFFFF;
    }
}

@media (max-width: 480px) {

    .navbar a {
        margin-bottom: 0.2rem;
        margin-top: 0.2rem;
    }

    .navbar form {
        margin-bottom: 0.5rem;
    }

    .navbar-marketing {
        display: none;
    }

    .navbar-nav {
        margin-right: 0;
        margin-left: 0;
        padding-left: 1rem;
    }

    #search-nav-form {
        width: 90%;
    }

    .page-item a img {
        max-height: 140px;
    }
}

.ranking-page .amazon-logo {
    display: block;
    text-align: center;
}

.ranking-page .amazon-logo img {
    margin-top: 1rem;
    width: 25%;
}

.hover-card {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px solid #dee2e6; /* Default border (invisible) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Current box-shadow */
}

.hover-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    border: 2px solid #007bff; /* Add a blue border */
    cursor: pointer; /* Show pointer to indicate a link */
}

/* End Page & Product */

/* Process Steps Section */
.process-section h2 {
  color: var(--text-primary);
}

.process-step h4 {
  color: var(--primary-color); /* Use primary color for step titles */
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.process-step p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.process-icon i {
  /* color: var(--accent-color); */ /* Use accent color for icons */
  color: var(--secondary-color); /* Use secondary color for icons */
  /* Optional: Add a background circle */
  /* background-color: rgba(0, 121, 107, 0.1); /* Light primary background */
  /* padding: 15px;
  /* border-radius: 50%; */
  /* display: inline-block; */
}

/* Optional: Add lines between steps on larger screens */
@media (min-width: 768px) {
  .process-step {
    position: relative;
  }
  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.5rem; /* Adjust vertical position */
    right: -15%; /* Position between columns */
    width: 30%; /* Adjust width of the line/arrow */
    height: 2px;
    background-color: var(--border-color); /* Use border color */
    /* Optional: Use an arrow image or pseudo-element */
  }
}

/* Typeahead */

.tt-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: 0.375rem;
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-inner-border-radius: calc(0.375rem - var(--bs-border-width));
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    width: 99%;
}

.tt-suggestion {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius,0);
    cursor: pointer;
}

.tt-suggestion:focus,
.tt-suggestion:hover,
.tt-suggestion:active,
.tt-cursor {
    color: #3ecf8e;
    background-color: var(--bs-dropdown-link-hover-bg);
}

/* End Typeahed */

/* Article */

.blog-post .body a {
    text-decoration: none;
    font-weight: 600;
    color: #4b65bf;
}

.blog-post p,
.blog-post ol,
.blog-post ul {
    font-size: 105%;
    line-height: 1.6;
}

.blog-post .blog-post-meta {
    font-size: 90%;
}

.blog-post .main-image {
    margin-bottom: 2rem;
}

.blog-post img.article-image {
    width: 33%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    float: right;
}

.blog-post img.article-image-sm {
    margin-top: -30px;
    padding: 0 1rem;
    width: 25%;
    float: right;
}

.blog-post h2,
.blog-post h3,
.blog-post h4 {
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .blog-post img.article-image {
        width: 70%;
        float: none;
        margin: 0 auto;
        display: block;
    }

    .blog-post img.article-image-sm {
        margin: 0 auto;
        padding: 0 0;
        width: 70%;
        float: none;
        display: block;
    }
}

/* Related products */

#related-article-products img {
    width: 100%;
    height: 96px;
}

@media (max-width: 768px) {
    #related-article-products img {
        width: auto;
    }
}

/* Categories */

.page-item a.category-link {
    font-size: 1.2rem;
    line-height: 0.9;
}

.category-thumbnail {
    max-height: 200px;
    display: block;
    margin: 0 auto 0.2rem auto;
}

@media (max-width: 480px) {
    .category-thumbnail {
        max-height: 350px;
    }

    .page-item a.category-link {
        font-size: 1.4rem;
    }
}


/* Facebook button */

.social-share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.social-button {
    background-color: #1877f2;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 12px 15px;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.social-button .icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

.facebook-button {
    background-color: #1877f2;
    color: #ffffff;
}

.facebook-button:hover {
    background-color: #145dbf;
    transform: translateY(-2px);
}

.whatsapp-button {
    background-color: #25d366;
    color: #ffffff;
}

.whatsapp-button:hover {
    background-color: #1ebe57;
    transform: translateY(-2px);
}

.social-share-message {
    margin: 1rem 0 2rem 0;
    text-align: center;
    font-size: 1.2rem;
    color: #555;
}

.social-share-message p {
    margin: 0;
    line-height: 1.5;
}

/* --- Styles for Added Sections --- */

/* Helper to ensure consistent heading colors */
.problem-section h2,
.value-prop-section h2,
.detailed-how-it-works h2,
.key-benefits h2,
.pricing-section h2,
.testimonial-section h2,
.faq-section h2 {
  color: var(--text-primary);
}

/* Problem Questions Section */
.problem-section {
    /* Using default --background-primary */
}
.problem-item {
    /* Styles for each column */
}
.problem-image img {
    max-height: 150px; /* Limit image height */
    object-fit: cover; /* Ensure image covers the area nicely */
    margin-bottom: 1rem; /* Space below image */
}
.problem-item p.lead {
  color: var(--text-primary);
  font-size: 1.1rem; /* Adjust font size if needed */
  min-height: 4em; /* Try to keep boxes similar height */
}
.problem-item i {
  color: var(--secondary-color); /* Terracotta icons */
  font-size: 1.2em;
  vertical-align: middle;
}
.problem-section .h5 { /* Styling the "Jeśli..." line */
    color: var(--primary-color);
    margin-top: 2rem; /* Add some space */
}

/* Value Proposition Section */
.value-prop-section {
  background-color: var(--background-secondary); /* White background for contrast */
  border: 1px solid var(--border-color);
}
.value-prop-section th {
  color: var(--text-primary);
  font-weight: 600;
}
.value-prop-table td {
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 1.05rem; /* Slightly smaller than lead */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.value-prop-table td:first-child i { /* Problem icons */
    color: var(--secondary-color); /* Terracotta */
    opacity: 0.8;
}
.value-prop-table td:last-child i { /* Solution icons */
    color: var(--primary-color); /* Teal */
}
.value-prop-section .lead { /* Styling the italic line */
    color: var(--text-secondary);
}

/* End Value Proposition Section */

/* Example Alert Section */
.example-alert-section {
    /* background-color: var(--background-secondary); /* White background */
    /* border: 1px solid var(--border-color); */
}
.example-alert-section h2 {

}

.alert-carousel-image {
    max-height: 450px; /* Limit the height of carousel images */
    object-fit: contain; /* Ensure the whole image is visible, don't crop */
    margin: 0 auto; /* Center image if it's narrower than the container */
    border: 1px solid var(--border-color);
}

/* Optional: Style carousel captions */
.carousel-caption {
    position: static; /* Override absolute positioning */
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    color: var(--text-primary);
    text-align: center;
}

.carousel-caption h5 {
    color: var(--primary-color);
}

/* Adjust control colors for dark theme */
.carousel.carousel-dark .carousel-control-prev-icon,
.carousel.carousel-dark .carousel-control-next-icon {
  filter: invert(0) grayscale(100) brightness(0.6); /* Make controls grey */
}

.carousel.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: var(--text-secondary); /* Grey indicators */
}

/* Detailed How It Works Section */
.detailed-how-it-works {
    /* Using default --background-primary */
}
.detailed-steps .step-number {
    font-weight: bold;
    color: var(--primary-color); /* Teal numbers */
    font-size: 1.5em; /* Larger step numbers */
    line-height: 1.4;
}
.detailed-steps li div {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.6;
}
.detailed-steps li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Key Benefits Section */
.key-benefits {
  background-color: var(--background-secondary); /* White background */
  border: 1px solid var(--border-color);
}
.key-benefits h2{
    color: var(--text-primary);
}

.benefit-item h5 {
  color: var(--primary-color); /* Teal subheadings */
  font-weight: 600;
  margin-bottom: 0.5rem; /* Adjust spacing */
}
.benefit-item i {
  color: var(--secondary-color); /* Terracotta icons */
  /* Removed h3 class sizing, using h1 in HTML */
  /* Removed me-3 margin */
}
.benefit-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Pricing Section - Card Layout */
.pricing-section h2 {
    color: var(--text-primary);
}

.pricing-card {
    /* background-color: var(--background-secondary); */
    background-color: var(--primary-color) !important; /* Teal background - FORCED */
    color: var(--background-secondary); /* Default text color inside: White */
    border-color: var(--primary-color) !important; /* Teal border */
    display: flex;
    flex-direction: column; /* Ensure button stays at bottom */
    border-radius: 0.5rem; /* Added rounding */
}

.pricing-card h3, /* Ensure h3 inherits or uses white */
.pricing-card .plan-name {
    /* color: var(--primary-color); */
    color: var(--background-secondary); /* White plan name */
    font-weight: 600;
}

.pricing-card .plan-price {
    /* color: var(--text-primary); */
    color: var(--background-secondary); /* White price */
}
.pricing-card .plan-price .fs-4 { /* Smaller text like /mies. */
     /* color: var(--text-secondary); */
     color: rgba(255, 255, 255, 0.8); /* Slightly more opaque white */
     font-weight: 400;
}

.price-vat { /* Style for the 'brutto' text */
    margin-top: -0.5rem;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.8); /* Slightly more opaque white */
}


.pricing-card .plan-features {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 250px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Separator line */
    padding-top: 1rem; /* Space above features */
}

.pricing-card .plan-features li,
.pricing-card .plan-features p { /* Ensure all text uses light color */
    /* color: var(--text-secondary); */
    color: rgba(255, 255, 255, 0.95); /* More opaque white */
    padding-left: 0.5rem;
}

.pricing-card .plan-features i.bi-check {
    /* color: var(--primary-color); */
    color: var(--accent-color); /* Gold checkmarks for contrast */
}

.pricing-card .plan-features strong {
    /* color: var(--text-primary); */
    color: var(--background-secondary); /* White highlighted features text */
    font-weight: 600;
}

.pricing-card .plan-cta { /* Specific styles for pricing buttons */
    margin-top: auto;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
}

/* Highlighted "Pro" Card */
.pricing-card.highlighted {
    /* Keep teal background, rely on border/shadow/badge */
     border-color: var(--accent-color) !important; /* Gold border for highlight */
     /* border-width: 2px; */ /* Maybe remove thicker border if background is same */
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Standard darker shadow */
}

.plan-badge {
    background-color: var(--accent-color) !important; /* Gold badge */
    color: var(--text-primary) !important; /* Dark text on gold */
    font-size: 0.75rem;
    padding: 0.4em 0.8em;
}

/* Adjust standard outline button (now on dark background) */
.btn-outline-primary {
    /* border-color: var(--primary-color); */
    /* color: var(--primary-color); */
    border-color: var(--background-secondary); /* White border */
    color: var(--background-secondary); /* White text */
}
.btn-outline-primary:hover {
    /* background-color: var(--primary-color); */
    background-color: var(--background-secondary); /* White background on hover */
    color: var(--primary-color); /* Teal text on hover */
}

/* Adjust standard primary button (used for highlighted plan) - already uses accent color */
.btn-primary {
   background-color: var(--accent-color);
   border-color: var(--accent-color);
   color: var(--text-primary);
}
.btn-primary:hover {
    background-color: #e0a800; /* Darker accent */
    border-color: #d39e00;
    color: var(--text-primary);
}

/* Microcopy under email forms */
.form-microcopy {
    font-size: 0.8em;
    line-height: 1.4;
    /* Optional: limit width in relevant sections */
    /* max-width: 85%; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Highlight effect for input field */
.highlight-input {
    /* Use accent color with transparency */
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); /* Adjust color/opacity if needed */
    transition: box-shadow 0.2s ease-in-out;
    border-color: var(--accent-color); /* Optional: highlight border too */
}

/* General H2 styling for consistency */
h2 {
    color: var(--text-primary);
}

/* Removing previous process section styling */
/* .process-section { ... } */
/* .process-step h4 { ... } */
/* .process-icon i { ... } */
/* @media (min-width: 768px) { ... } */

/* Typeahead */
.tt-menu {

}

/* Simplified Carousel / Slider */
.carousel-simplified .carousel-inner {
    display: flex; /* Lay out items horizontally */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Optional: thinner scrollbar */
    scrollbar-color: var(--border-color) transparent; /* Optional: styled scrollbar */
}

.carousel-simplified .carousel-item {
    flex: 0 0 auto; /* Prevent items from shrinking */
    width: 80%; /* Show more than one item partially, adjust as needed */
    scroll-snap-align: center; /* Snap items to the center */
    margin-right: 1rem; /* Space between items */
    /* Ensure active class doesn't interfere */
    display: block !important; 
    opacity: 1 !important;
}

/* Re-style image specifically for this slider */
.carousel-simplified .alert-carousel-image {
    max-height: 400px; /* Adjust height */
    object-fit: contain;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    width: 100%; /* Ensure image tries to fill item width */
}

/* Adjust item width for larger screens to show multiple items */
@media (min-width: 992px) { /* Apply on lg screens and up */
    .carousel-simplified .carousel-item {
        width: 19%; /* Show ~5 items (100 / 5 = 20, subtract margin) */
        margin-right: 0.5rem; /* Reduce margin slightly */
    }
}/* Simple How it Works Section - Card Layout */
.simple-how-it-works-cards h2 {
    color: var(--text-primary);
}

.step-card {
    background-color: var(--background-secondary); /* White card background */
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.step-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07);
}

.step-card h3 {
    color: var(--primary-color); /* Teal heading */
    font-size: 1.25rem; /* Adjust size */
    font-weight: 600;
    margin-top: 0.5rem; /* Space between icon and heading */
    margin-bottom: 0.75rem;
}

.step-card i.display-3 {
     color: var(--secondary-color); /* Terracotta icon */
     /* Optional: Adjust size */
}

.step-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Detailed How It Works Section */

.pricing-card {
    background-color: var(--background-secondary);
    border-color: var(--border-color) !important; /* Override Bootstrap border */
    display: flex; /* Ensure flex display */
    flex-direction: column; /* Ensure column direction */
}

.pricing-card .plan-cta { /* Specific styles for pricing buttons */
    margin-top: auto; /* Ensure button is pushed to bottom */
    padding: 0.6rem 1.2rem;
    font-weight: 600;
}

/* Highlighted "Pro" Card */

/* Final CTA Section */
.final-cta-section {
  background-color: var(--primary-color); /* Teal background */
  color: var(--background-secondary); /* White text */
  padding: 3rem 1rem; /* Example padding */
  border-radius: 0.5rem; /* Example rounding */
}
.final-cta-section h2,
.final-cta-section p {
    color: var(--background-secondary); /* Ensure text is white */
}

/* CTA Button Styling */
.btn-cta {
  background-color: var(--accent-color); /* Amber/Gold */
  border-color: var(--accent-color);
  color: var(--text-primary);
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease;
}

.btn-cta:hover {
  background-color: #e0a800; /* Darker shade of accent */
  border-color: #d39e00;
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* Ensure Hero button also uses accent color if it was reverted */
.home-search .input-group-text {
    background-color: var(--accent-color);
    color: var(--text-primary);
    border-color: var(--accent-color);
    font-weight: bold;
}
.home-search .input-group-text:hover {
   background-color: #e0a800;
   border-color: #d39e00;
}

/* Footer Styling */
.main-footer {
    background-color: var(--background-primary); /* Light grey background */
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.main-footer .text-muted {
    color: var(--text-secondary) !important; /* Ensure muted text uses secondary color */
}

.main-footer .footer-nav a {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.main-footer .footer-nav a:hover {
    color: var(--primary-color) !important; /* Teal on hover */
    text-decoration: underline;
}

.main-footer .footer-nav span { /* Separator */
    margin: 0 0.25rem;
}

/* Navbar Styling */
/* body padding removed above */

/* Styles for the sticky navbar */
.main-navbar.sticky-top {
    top: 0; /* Stick to the very top */
    z-index: 1030; /* Ensure it's above header-top when sticky */
}

/* Ensure background is applied correctly */
.main-navbar {
    background-color: var(--background-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

.main-navbar .navbar-brand {
    color: var(--primary-color); /* Teal brand text */
}
.main-navbar .navbar-brand:hover {
    color: var(--secondary-color); /* Terracotta on hover */
}

.main-navbar .nav-link {
    color: var(--text-secondary); /* Grey links */
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { /* Style for active link if using scrollspy later */
    color: var(--primary-color); /* Teal on hover/active */
}

/* Adjust button styles specifically for navbar */
.main-navbar .btn-outline-secondary {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}
.main-navbar .btn-outline-secondary:hover {
    background-color: var(--text-secondary);
    color: var(--background-secondary);
}

.main-navbar .btn-cta {
    padding: 0.375rem 0.75rem; /* Match default BS button padding */
    font-size: 1rem; /* Match default BS button font size */
}

/* Microcopy under email forms */

/* Logo Slider Styling */
.logo-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative; /* Needed for pseudo-element masking */
    /* Optional: Add fade effect at the edges */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

.logo-slider-track {
    display: flex;
    /* width = (logo width + margin) * number of logos * 2 */
    width: calc(120px * 7 * 2);
    animation: scrollLogos 20s linear infinite;
}

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translate by the width of one set of logos */
        transform: translateX(calc(-120px * 7));
    }
}

.logo-item {
    height: 35px; /* Adjust height as needed */
    width: auto; /* Maintain aspect ratio */
    margin-right: 45px; /* Space between logos, adjust with track width calculation */
    flex-shrink: 0; /* Prevent logos from shrinking */
    filter: grayscale(100%); /* Optional: Make logos grayscale */
    opacity: 0.7; /* Optional: Make logos slightly transparent */
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-slider-container:hover .logo-slider-track {
    animation-play-state: paused; /* Pause animation on hover */
}

.logo-slider-container:hover .logo-item {
     filter: grayscale(0%); /* Show color on hover */
     opacity: 1;
}

/* Responsive layout for Logo Slider */
@media (max-width: 991px) {
    .logo-slider-container {
        width: 100%; /* Ensure it takes parent width */
        box-sizing: border-box; /* Include padding/border in width */
        /* Remove masking on mobile for better visibility */
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Adjust logo size/margin for mobile */
    .logo-item { 
        height: 30px; 
        margin-right: 30px; 
    }
    /* Adjust track width calculation for mobile */
    .logo-slider-track { 
        width: calc(90px * 7 * 2); 
        animation: scrollLogosMobile 15s linear infinite; 
    }
    @keyframes scrollLogosMobile {
        0% {
            transform: translateX(0);
        }
        100% {
            /* Translate by the width of one set of logos */
            transform: translateX(calc(-90px * 7));
        }
    }
}

/* Ensure Hero button also uses accent color if it was reverted */

/* --- End Styles for Added Sections --- */