.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-dffcd0c:#BA9E73;--e-global-color-d824638:#E7D8C1;--e-global-color-6743cc0:#E6D7C0;--e-global-color-ec5afd9:#FFFFFF;--e-global-color-caf11c7:#F5EFE6;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   KONTENER Z WEWNĘTRZNĄ RAMKĄ (KLASA: .Ramkain)
   Ten kod tworzy ramkę "pływającą" wewnątrz kontenera.
   ============================================================ */

.Ramkain {
    /* 1. GRUBOŚĆ, STYL I KOLOR LINII 
       - 2px: szerokość samej linii
       - solid: linia ciągła (można zmienić na 'dashed' dla przerywanej)
       - #F7F7F7: Twój jasnoszary kolor
    */
    outline: 2px solid #F7F7F7;

    /* 2. ODSTĘP OD KRAWĘDZI (WCIĘCIE)
       - Wartość ujemna (-) wciąga ramkę do środka elementu.
       - Aby uzyskać 5px czystego odstępu od brzegu przy linii 2px,
         używamy -7px (5px odstępu + 2px grubości linii).
    */
    outline-offset: -7px;

    /* 3. OPCJONALNE: ZAOKRĄGLENIE ROGÓW RAMKI
       - Jeśli Twój kontener ma zaokrąglone rogi (border-radius), 
         odblokuj poniższą linię, usuwając ukośniki, aby ramka też była obła.
    */
    /* border-radius: 10px; */
}























/* Zastąpiliśmy ".elementor-kit-9" kropką i nazwą klasy .kreskaruchoma */

.kreskaruchoma {
    position: relative !important;
    overflow: hidden;
}

/* Przygotowanie ukrytej kreski na górze */
.kreskaruchoma::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #3E362E;
    transition: width 0.4s ease-in-out;
    z-index: 10; /* Upewniamy się, że kreska jest nad tłem */
}

/* Animacja po najechaniu myszką */
.kreskaruchoma:hover::before {
    width: 100%;
}/* End custom CSS */