/* === BASE COLORS === */
/* ========================================
   COLOR BASE - Paleta kolorów projektu
   ======================================== */

:root {
    /* === BASE COLORS === */
    --color-orange: #fab30f;
    --color-orange-rgb: 250, 179, 15;

    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;

    --color-yellow: #fdc500;
    --color-yellow-rgb: 253, 197, 0;

    --color-blue: #32c5ff;
    --color-blue-rgb: 50, 197, 255;

    --color-green: #6be83a;
    --color-green-rgb: 107, 232, 58;

    --color-grey: #2d2e31;
    --color-grey-rgb: 45, 46, 49;

    /* === TRANSPARENCY VARIATIONS === */
    --color-orange-10: rgba(var(--color-orange-rgb), 0.1);
    --color-orange-20: rgba(var(--color-orange-rgb), 0.2);
    --color-orange-30: rgba(var(--color-orange-rgb), 0.3);
    --color-orange-50: rgba(var(--color-orange-rgb), 0.5);
    --color-orange-70: rgba(var(--color-orange-rgb), 0.7);
    --color-orange-90: rgba(var(--color-orange-rgb), 0.9);

    --color-black-10: rgba(var(--color-black-rgb), 0.1);
    --color-black-20: rgba(var(--color-black-rgb), 0.2);
    --color-black-30: rgba(var(--color-black-rgb), 0.3);
    --color-black-50: rgba(var(--color-black-rgb), 0.5);
    --color-black-70: rgba(var(--color-black-rgb), 0.7);
    --color-black-90: rgba(var(--color-black-rgb), 0.9);

    --color-yellow-10: rgba(var(--color-yellow-rgb), 0.1);
    --color-yellow-20: rgba(var(--color-yellow-rgb), 0.2);
    --color-yellow-30: rgba(var(--color-yellow-rgb), 0.3);
    --color-yellow-50: rgba(var(--color-yellow-rgb), 0.5);
    --color-yellow-70: rgba(var(--color-yellow-rgb), 0.7);
    --color-yellow-90: rgba(var(--color-yellow-rgb), 0.9);

    --color-blue-10: rgba(var(--color-blue-rgb), 0.1);
    --color-blue-20: rgba(var(--color-blue-rgb), 0.2);
    --color-blue-30: rgba(var(--color-blue-rgb), 0.3);
    --color-blue-50: rgba(var(--color-blue-rgb), 0.5);
    --color-blue-70: rgba(var(--color-blue-rgb), 0.7);
    --color-blue-90: rgba(var(--color-blue-rgb), 0.9);

    /* === GRADIENTS === */
    --gradient-orange-yellow: linear-gradient(135deg,
    var(--color-orange) 0%,
    var(--color-yellow) 100%);
    --gradient-yellow-orange: linear-gradient(135deg,
    var(--color-yellow) 0%,
    var(--color-orange) 100%);
    --gradient-blue: linear-gradient(135deg,
    var(--color-blue) 0%,
    var(--color-blue-70) 100%);

    /* === SHADOWS === */
    --shadow-concave: -5px -6px 10px 1px rgba(66, 74, 83, 0.75),
                      5px 6px 7px 1px rgba(0, 0, 0, 0.51),
                      inset 2px 2px 2px 1px rgba(71, 80, 89, 1.0),
                      inset -2px -2px 2px 1px rgba(0, 0, 0, 0.25),
                      0px 0px 0px 0px rgb(71 80 89 / 35%);

    scrollbar-color: #9e9e9e var(--color-grey);
    scrollbar-width: thin;
}

/* ========================================
   UTILITY CLASSES - Text Colors
   ======================================== */

.text-orange {
    color: var(--color-orange) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-yellow {
    color: var(--color-yellow) !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

/* ========================================
   UTILITY CLASSES - Border Colors
   ======================================== */

.border-orange {
    border-color: var(--color-orange) !important;
}

.border-black {
    border-color: var(--color-black) !important;
}

.border-yellow {
    border-color: var(--color-yellow) !important;
}

.border-blue {
    border-color: var(--color-blue) !important;
}

/* ========================================
   UTILITY CLASSES - Shadows
   ======================================== */

.shadow-orange {
    box-shadow: 0 8px 25px var(--color-orange-30) !important;
}

.shadow-yellow {
    box-shadow: 0 8px 25px var(--color-yellow-30) !important;
}

.shadow-blue {
    box-shadow: 0 8px 25px var(--color-blue-30) !important;
}

.shadow-black {
    box-shadow: 0 8px 25px var(--color-black-20) !important;
}

.pair-shadow{
    box-shadow: 1rem -0.5rem 1rem rgba(0, 0, 0, 0.15);
}

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.semibold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/poppins.bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Gruppo";
    src: url("../font/gruppo.regular.ttf") format("truetype");
    font-weight: 400;
}

body {
    font-family: "Poppins", sans-serif !important;
    background-color: #303234;
    color: #ffffff;
    overflow-x: hidden;
}

/* navbar */
/* Base: smooth hide/show from your previous script */
#mainNav {
    transition: transform 0.25s, box-shadow 0.2s, background-color 0.2s,
    border-color 0.2s;
    will-change: transform;
    z-index: 100;
    padding: 0.5rem 0;
}

#mainNav .container {
    position: static!important;
    min-width: 100%;
}

#mainNav.is-hidden {
    transform: translateY(-110%);
    box-shadow: none;
}

.navbar-glass {
    background-color: rgba(15, 15, 15, 0.4);
    border: 2px solid #2d2e31;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    max-width: 95%;
    margin: 0 auto;
    border-radius: 0 0 1rem 1rem;
    padding: 0 1rem;
    text-align: center;
}

.navbar-glass.is-stuck {
    background-color: rgba(15, 15, 15, 0.15);
    border-bottom-color: #2d2e31;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.navbar-glass .navbar-collapse.show,
.navbar-glass.is-stuck .navbar-collapse {
    background: transparent;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-dark .navbar-toggler:focus {
    box-shadow: none;
}

#mainNav .navbar-nav .nav-link.active {
    color: var(--color-orange) !important;
}

@supports not (backdrop-filter: none) {
    .navbar-glass {
        background-color: rgba(15, 15, 15, 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    #mainNav {
        transition: none;
    }
}

@media (min-width: 1100px) {
    #mainNav .navbar-nav .nav-item:not(:last-child) .nav-link::after {
        color: rgba(255, 255, 255, 0.5);
        content: "|";
        display: inline-block;
        margin: 0 0 0 1rem;
        opacity: 0.5;
    }
}

@media (max-width: 1100px) {
    #mainNav .navbar-nav .nav-item + .nav-item {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Stack navbar items vertically on mobile */
    .navbar-collapse .d-flex.position-absolute {
        position: relative !important;
        /* flex-direction: column; */
        align-items: center !important;
        margin: 1rem 0 !important;
        gap: 1rem !important;
    }

    .navbar-demo-button {
        width: 100%;
        max-width: 260px;
    }
}

/* Navbar Demo Button */
.navbar-demo-button {

    color: var(--color-black) !important;
    box-shadow: 0 4px 15px var(--color-yellow-30), inset 0 1px 4px var(--color-black-20) !important;
    border: 2px solid var(--color-black) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.navbar-demo-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-black-10), transparent);
    transition: left 0.5s;
}

.navbar-demo-button:hover::before {
    left: 100%;
}

.navbar-demo-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--color-yellow-50), inset 0 1px 4px var(--color-black-30) !important;
}

.navbar-demo-button:active {
    transform: translateY(0) !important;
    transition: transform 0.1s !important;
}

.navbar-demo-button:focus {
    outline: 2px solid var(--color-yellow-50) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem var(--color-yellow-20) !important;
}

.separator-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4rem auto;
    width: 90%;
}

.separator {
    height: 3px;
    width: 100%;
    border-radius: 2px;
    color: var(--color-grey);
    box-shadow: inset 2px 2px 2px #475059, -2px -2px 4px rgba(66, 74, 83, 0.6),
    2px 2px 3px rgba(0, 0, 0, 0.3);
}

.buttons-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.div_concave_border {
    border-radius: 18px;
    background: #303234;
    box-shadow: var(--shadow-concave);
    border: 2px solid #000000;
    padding: 0.5rem;
    position: relative;
}

.concave_container {
    border-radius: 29px;
    background: #26282a;
    box-shadow: inset 10px 10px 15px #1d1e20, inset -25px -25px 15px #303235;
}

.convex_photo_container {
    border-radius: 46px;
    background: #303234;
    box-shadow: 27px 27px 31px #27292a, -27px -27px 31px #393c3e;
}

.vertical_line_left {
    border-left: 2px solid #ffffff;
    padding-left: 1rem;
}

.horizontal_line {
    border-top: 2px solid #ffffff;
}

.cm-yellow {
    color: var(--color-orange);
}

/* carousel */
/* custom style to move indicators outside */
.carousel {
    padding-bottom: 2rem;
    position: relative;
}

.carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: var(--color-orange);
}

.carousel-indicators button {
    width: 80px !important;
    height: 5px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease-in-out !important;
    border: none !important;
    border-radius: 2px !important;
    background-color: rgba(255, 255, 255, 0.3);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 2rem;
    /* arrow size */
    color: rgba(255, 255, 255, 0.3);
    width: 40px;
    height: 40px;
}

.carousel-arrow-prev {
    left: -60px;
}

.carousel-arrow-next {
    right: -60px;
}

/* Neumorphic effect on symbol */
.arrow-symbol {
    display: inline-block;
    padding: 4px 4px;
    border-radius: 6px;
    box-shadow: 2px 2px 3px #1f2122,
        /* convex shadow */ -2px -2px 3px #3e4144;
    /* convex highlight */
    transition: all 0.2s ease-in-out;
}

/* Hover: concave press */
.carousel-arrow:hover .arrow-symbol {
    box-shadow: inset 2px 2px 3px #1f2122, inset -2px -2px 3px #3e4144;
    color: var(--color-orange);
}

.carousel_text_number {
    font-size: 6rem;
    font-weight: bold;
    color: var(--color-orange);
    top: 10%;
    left: 10%;
}


.main-component-container {
    width: 90vw;
    margin: 0 auto;
}

/* Kluczowa poprawka layoutu */
.main-content-wrapper {
    width: 100vw;

    margin-top: 8rem;
}

.content-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-section {
    align-self: flex-end;
    text-align: right;
}

.carousel-section {
    width: 100%;
}

.title-container {
    line-height: 3.5rem;
}

/* @media (max-height: 890px) {
    .title-container {
        font-size: 1rem;
        max-height: 7rem;
        min-height: 7rem;
    }
} */

.custom-carousel-item {
    overflow: visible !important;
}

.meet_left_side_individual_1 {
    background: url("../img/ccem/individual_client/meet_left_side_1.png");
    background-size: cover;
}

.meet_left_side_business_1 {
    background: url("../img/ccem/business_client/meet_left_side_1.png");
    background-size: cover;
}

.meet_right_side_individual_1 {
    background: url("../img/ccem/individual_client/meet_right_side_1.png");
    background-size: cover;
    margin-left: -2px;
}

.meet_right_side_business_1 {
    background: url("../img/ccem/business_client/meet_right_side_1.png");
    background-size: cover;
    margin-left: -2px;
}

.meet_left_side_individual_2 {
    background: url("../img/ccem/individual_client/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_business_2 {
    background: url("../img/ccem/business_client/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_individual_2 {
    background: url("../img/ccem/individual_client/meet_right_side_2.png");
    background-size: cover;
     margin-left: -2px;
}

.meet_right_side_business_2 {
    background: url("../img/ccem/business_client/meet_right_side_2.png");
    background-size: cover;
    margin-left: -2px;
}

.meet_left_side_individual_3 {
    background: url("../img/ccem/individual_client/meet_left_side_3.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_business_3 {
    background: url("../img/ccem/business_client/meet_left_side_3.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_individual_3 {
    background: url("../img/ccem/individual_client/meet_right_side_3.png");
    background-size: cover;
     margin-left: -2px;
}

.meet_right_side_business_3 {
    background: url("../img/ccem/business_client/meet_right_side_3.png");
    background-size: cover;
    margin-left: -2px;
}

.meet_left_side_paths_1_360 {
    background: url("../img/ccem/development_paths/360/meet_left_side_1.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_hr {
    background: url("../img/ccem/development_paths/hr/meet_left_side_1.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_finances {
    background: url("../img/ccem/development_paths/finances/meet_left_side_1.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_sales {
    background: url("../img/ccem/development_paths/sales/meet_left_side_1.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_left_side_1.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_1_msp {
    background: url("../img/ccem/development_paths/msp/meet_left_side_1.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_paths_1_360 {
    background: url("../img/ccem/development_paths/360/meet_right_side_1.png");
    background-size: cover;
}

.meet_right_side_paths_1_hr {
    background: url("../img/ccem/development_paths/hr/meet_right_side_1.png");
    background-size: cover;
}

.meet_right_side_paths_1_finances {
    background: url("../img/ccem/development_paths/finances/meet_right_side_1.png");
    background-size: cover;
}

.meet_right_side_paths_1_sales {
    background: url("../img/ccem/development_paths/sales/meet_right_side_1.png");
    background-size: cover;
}

.meet_right_side_paths_1_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_right_side_1.png");
    background-size: cover;
}

.meet_right_side_paths_1_msp {
    background: url("../img/ccem/development_paths/msp/meet_right_side_1.png");
    background-size: cover;
}

.meet_left_side_paths_2_360 {
    background: url("../img/ccem/development_paths/360/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.2%, 0px);
}

.meet_left_side_paths_2_hr {
    background: url("../img/ccem/development_paths/hr/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_finances {
    background: url("../img/ccem/development_paths/finances/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_sales {
    background: url("../img/ccem/development_paths/sales/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_left_side_paths_2_msp {
    background: url("../img/ccem/development_paths/msp/meet_left_side_2.png");
    background-size: cover;
    transform: translate(0.1%, 0px);
}

.meet_right_side_paths_2_360 {
    background: url("../img/ccem/development_paths/360/meet_right_side_2.png");
    background-size: cover;
}

.meet_right_side_paths_2_hr {
    background: url("../img/ccem/development_paths/hr/meet_right_side_2.png");
    background-size: cover;
}

.meet_right_side_paths_2_finances {
    background: url("../img/ccem/development_paths/finances/meet_right_side_2.png");
    background-size: cover;
}

.meet_right_side_paths_2_sales {
    background: url("../img/ccem/development_paths/sales/meet_right_side_2.png");
    background-size: cover;
}

.meet_right_side_paths_2_marketing {
    background: url("../img/ccem/development_paths/marketing/meet_right_side_2.png");
    background-size: cover;
}

.meet_right_side_paths_2_msp {
    background: url("../img/ccem/development_paths/msp/meet_right_side_2.png");
    background-size: cover;
}

/* Global meet sides positioning - ensure they meet in center */
[class*="meet_left_side_"] {
    background-position: right center !important;
}

[class*="meet_right_side_"] {
    background-position: left center !important;
}

/* Logo styling */
.meet_left_side_individual_1 img,
.meet_left_side_business_1 img,
.meet_left_side_individual_2 img,
.meet_left_side_business_2 img,
.meet_left_side_individual_3 img,
.meet_left_side_business_3 img,
.meet_right_side_individual_1 img,
.meet_right_side_business_1 img,
.meet_right_side_individual_2 img,
.meet_right_side_business_2 img,
.meet_right_side_individual_3 img,
.meet_right_side_business_3 img,
.meet_left_side_paths_1_360 img,
.meet_right_side_paths_1_360 img,
.meet_left_side_paths_1_hr img,
.meet_right_side_paths_1_hr img,
.meet_left_side_paths_1_finances img,
.meet_right_side_paths_1_finances img,
.meet_left_side_paths_1_sales img,
.meet_right_side_paths_1_sales img,
.meet_left_side_paths_1_marketing img,
.meet_right_side_paths_1_marketing img,
.meet_left_side_paths_1_msp img,
.meet_right_side_paths_1_msp img,
.meet_left_side_paths_2_360 img,
.meet_right_side_paths_2_360 img,
.meet_left_side_paths_2_hr img,
.meet_right_side_paths_2_hr img,
.meet_left_side_paths_2_finances img,
.meet_right_side_paths_2_finances img,
.meet_left_side_paths_2_sales img,
.meet_right_side_paths_2_sales img,
.meet_left_side_paths_2_marketing img,
.meet_right_side_paths_2_marketing img,
.meet_left_side_paths_2_msp img,
.meet_right_side_paths_2_msp img {
    height: 2rem;
    width: auto;
    margin-bottom: 1rem;
}

#pair-indicators {
    z-index: 10;
}

.indicator-wrapper {
    cursor: pointer;
    padding: 0.5rem 0;
}

.indicator-btn {
    width: 80px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.indicator-btn.active {
    background-color: #FDC500;
    opacity: 1;
}

/* Responsive - separator container - width-based only */
@media (max-width: 1400px) {
    .separator-container {
        margin: 6rem auto 4rem auto;
    }
}

@media (max-width: 1240px) {
    .separator-container {
        margin: 10rem auto 4rem auto;
    }

    #movie_logo, #movie_quote {
        width: 80%!important;
    }
}

@media (max-width: 1000px) {
    .separator-container {
        margin: 12rem auto 4rem auto;
    }
}

@media (max-width: 770px) {
    .separator-container {
        margin: 16rem auto 4rem auto;
    }
}

@media (max-width: 650px) {
    #movie_quote .blockquote {
        font-size: 16px !important;
    }
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

.fs-responsive {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 2rem) !important;
}

.fs-responsive-lg {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 2.5rem) !important;
}

.fs-responsive-sm {
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1.5rem) !important;
}

@media (max-width: 1700px) {
    .fs-responsive {
        font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) !important;
    }
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */

.logo-responsive {
    height: clamp(2rem, 2vw + 1rem, 3rem) !important;
    width: auto !important;
}

/* ========================================
   RESPONSIVE TEXT LAYOUT
   ======================================== */

@media (max-width: 1200px) {
    .pair-1 .row .col-6,
    .pair-2 .row .col-6,
    .pair-3 .row .col-6,
    [class*="pair-"] .row .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .text-start-position {
        position: relative;
    }
    .text-end-position {
        position: relative;
        top: -95%;
    }

    .meet_right_side_individual_1, .meet_right_side_individual_2, .meet_right_side_individual_3,
    .meet_right_side_business_1, .meet_right_side_business_2, .meet_right_side_business_3,
    [class*="meet_right_side_paths_1_"], [class*="meet_right_side_paths_2_"] {
        background: none;
        box-shadow: none;
    }

    /* .fs-responsive, .fs-responsive-sm {
        background-color: rgba(0, 0, 0, 0.4);
    } */

    .meet_left_side_individual_2 {
         background: url("../img/ccem/individual_client/meet_right_side_2.png");
         background-size: cover;
    }

    .meet_left_side_business_2 {
         background: url("../img/ccem/business_client/meet_right_side_2.png");
         background-size: cover;
    }

    .meet_left_side_paths_1_360 {
        background: url("../img/ccem/development_paths/360/meet_right_side_1.png");
        background-size: cover;
    }

    .meet_left_side_paths_1_hr {
        background: url("../img/ccem/development_paths/hr/meet_right_side_1.png");
        background-size: cover;
    }

    .meet_left_side_paths_1_finances {
        background: url("../img/ccem/development_paths/finances/meet_right_side_1.png");
        background-size: cover;
    }

    .meet_left_side_paths_1_sales {
        background: url("../img/ccem/development_paths/sales/meet_right_side_1.png");
        background-size: cover;
    }

    .meet_left_side_paths_1_marketing {
        background: url("../img/ccem/development_paths/marketing/meet_right_side_1.png");
        background-size: cover;
    }

    .meet_left_side_paths_1_msp {
        background: url("../img/ccem/development_paths/msp/meet_right_side_1.png");
        background-size: cover;
    }
}

.bottom-page {
    box-shadow: none;
}

.product-description-box, .product-description-buy-box, .product-description-sell-box {
    background-color: var(--backgroundColor);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.neu.icon-box {
    border-radius: 12px;
    color: #e0e0e0;
    background-color: var(--backgroundColor);
    box-shadow: 3px 3px 10px #26282a, -6px -6px 10px #3a3c3e;
}

.invoice-toggle {
    color: #e0e0e0;
    background-color: var(--backgroundColor);
    box-shadow: 3px 3px 10px #26282a, -6px -6px 10px #3a3c3e;
}

.invoice-toggle:hover, .invoice-toggle.active {
    border: none;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form input {
    color: #e0e0e0;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form input:focus {
    box-shadow: inset 1px 1px 3px #26282a, inset -1px -1px 3px #3a3c3e;
}

.cm-buy-form .neomorph-input {
    color: #e0e0e0;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}

.cm-buy-form .neu-button {
    color: #e0e0e0;
    background-color: var(--bg-color);
    box-shadow: 3px 3px 10px #26282a, -6px -6px 10px #3a3c3e;
}

.cm-buy-form .neu-button:active {
    border: none;
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
    transform: translateY(1px);
    transition: box-shadow 0.12s, transform 0.12s;
    outline: none;
}

.cm-buy-form .neu-concave {
    background-color: var(--bg-color-secondary);
    box-shadow: inset 3px 3px 6px #26282a, inset -3px -3px 6px #3a3c3e;
}


/* Quote divider with glowing gradient effect */
.quote-divider {
    position: relative;
}

.quote-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right,
        rgba(255, 165, 0, 0),
        rgba(255, 165, 0, 1) 15%,
        rgba(255, 165, 0, 1) 85%,
        rgba(255, 165, 0, 0)
    );
}

.quote-divider::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to right,
        transparent 0%,
        transparent 10%,
        rgba(255, 165, 0, 0.15) 15%,
        rgba(255, 165, 0, 0.25) 30%,
        rgba(255, 165, 0, 0.3) 50%,
        rgba(255, 165, 0, 0.25) 70%,
        rgba(255, 165, 0, 0.15) 85%,
        transparent 90%,
        transparent 100%
    );
    filter: blur(15px);
    pointer-events: none;
}

.neu.loader {
    box-shadow: var(--shadow-concave);
}
.circle-progress {
    box-shadow: none;
}

.font-gruppo {
    font-family: "Gruppo", cursive !important;
}