#sp-header {
    background: #ffffff;
    height: 70px;
    padding-top: 4px;
    padding-bottom: 4px;
}
#sp-logo.has-border {
  padding-top: 2px;

}
@keyframes pulsowanie {
  0% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }
}

.pulse-text a {
  display: inline-block;
  animation: pulsowanie 2s infinite ease-in-out;
  color: #E91E63 !important;
  text-shadow: 0 0 0 transparent; /* Wyrównanie krawędzi tekstu */
}

.pulse-text a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 0 transparent; /* Wyrównanie krawędzi tekstu podczas hovera */
}
.home a:hover {
  color: #ffffff !important;
 
}

/* menu */
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
	color: #E91E63;
	font-weight: bold;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	background: #ffffff;
	border-bottom: 3px solid #E91E63;
}
/* Styles for sp-megamenu-parent links */
a.sp-megamenu-parent > li {
	position: relative;
	text-decoration: none;
	border-bottom: 2px solid rgb(191, 219, 255);
}

/* Before pseudo-element for sp-megamenu-parent list items */
.sp-megamenu-parent > li::before {
	content: '';
	position: absolute;
	bottom: -2px; /* Adjust to align with the border */
	left: 0;
	right: 0;
	height: 2px;
	background-color: rgb(191, 219, 255);
	transform: scaleX(0);
	transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

/* Hover effect for sp-megamenu-parent list items */
.sp-megamenu-parent > li:hover::before {
	transform: scaleX(1);
	background-color: #E91E63;
	
	
}

/* Apply the same styles to submenu items */
.sp-megamenu-parent li ul li {
	position: relative;
	text-decoration: none;
	border-bottom: 1px solid rgb(245 211 251);
}

/* Container to hold text of submenu items */
.sp-megamenu-parent li ul li > a {
	display: inline-block;
	transition: transform 0.3s ease-in-out;
	position: relative; /* Ensure the pseudo-element is positioned relative to the link */
}

/* Before pseudo-element for submenu items */
.sp-megamenu-parent li ul li::before {
	content: '';
	position: absolute;
	bottom: -2px; /* Adjust to align with the border */
	left: 0;
	right: 0;
	height: 2px;
	background-color: rgb(191, 219, 255);
	transform: scaleX(0);
	transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

/* Hover effect for submenu items */
.sp-megamenu-parent li ul li:hover::before {
	transform: scaleX(1);
	background-color: #E91E63;
}

/* Text shift effect for submenu items */
.sp-megamenu-parent li ul li:hover > a {
	transform: translateX(10px); /* Adjust the value as needed */
}

/* Pulsing orange dot effect */
/* Animacja tła przy najechaniu */
.sp-megamenu-parent > li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    height: 90%;
    background-color: #ff66b2; /* Jasny różowy */
    transition: transform 0.4s ease, opacity 0.4s ease;
    border-radius: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
	
}

.sp-megamenu-parent > li:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
}

/* Keyframes for the pulsing animation */
@keyframes pulse {
	0% {
		transform: scale(1) translateY(-50%);
	}
	50% {
		transform: scale(1.5) translateY(-50%);
	}
	100% {
		transform: scale(1) translateY(-50%);
	}
}
/* date */

.published,
.sppb-meta-date {
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	--r: 0.8em;
	position: absolute;
	left: 20px;
	top: calc(-1 * var(--r));
	border-inline: 0.5em solid #0000;
	padding: 0.5em 0.2em calc(var(--r) + 0.2em);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - 0.5em) calc(100% - var(--r)),
		50% 100%,
		0.5em calc(100% - var(--r)),
		0 100%
	);
	background: radial-gradient(50% 0.2em at top, #000a, #0000) border-box, #E91E63 padding-box;
	width: fit-content;
	white-space: nowrap;
	z-index: 999;
}
.article-info > span + span::before {
	display: inline-block;
	padding-right: 0px;
	padding-left: 0px;
	content: '';
}

.sppb-article-meta .sppb-meta-date-unmodified {
	color: #fff !important;
}

/* box */
/* Styl podstawowy dla artykułu */
.sppb-addon-article {
    background-color: #ffe6f12e;
    border-radius: 10px;
    border: 1px solid #ffb4d5;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
}

/* Efekt po najechaniu */
.sppb-addon-articles .sppb-addon-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Styl dla obrazka - pełna szerokość i wysokość */
.sppb-addon-articles .sppb-addon-article .sppb-addon-article-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Obrazek pokrywa całą powierzchnię kontenera */
}


/* Styl obrazka w karuzeli oraz responsywnego obrazka */
.sppb-carousel-inner > .sppb-item > a > img, 
.sppb-carousel-inner > .sppb-item > img, 
.sppb-img-responsive {
    width: 100%; /* Pełna szerokość obrazka */
    height: auto; /* Wysokość dostosowana do proporcji */
    display: block;
    object-fit: cover; /* Obrazek pokrywa całą powierzchnię kontenera */
    border-radius: 10px; /* Opcjonalnie zaokrąglone rogi */
    transition: transform 0.3s ease-in-out;
}

.sppb-carousel-inner > .sppb-item > a > img:hover, 
.sppb-carousel-inner > .sppb-item > img:hover, 
.sppb-img-responsive:hover {
    transform: scale(1.05); /* Delikatne powiększenie obrazka na hover */
}

/* slider */
/* Styl podstawowy dla klas animacja minaturek na slider + js */
.sp-dot-0,
.sp-dot-1,
.sp-dot-2,
.sp-dot-3,
.sp-dot-4,
.sp-dot-5 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 5px;
	border-radius: 50%;
	position: relative;
	background-color: #000;
}

.sp-dot-0::before,
.sp-dot-1::before,
.sp-dot-2::before,
.sp-dot-3::before,
.sp-dot-4::before,
.sp-dot-5::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border: 2px dashed transparent;
	border-radius: 50%;
	pointer-events: none;
	transition: border-color 0.5s, transform 0.5s;
}

.sp-dot-0:hover::before,
.sp-dot-1:hover::before,
.sp-dot-2:hover::before,
.sp-dot-3:hover::before,
.sp-dot-4:hover::before,
.sp-dot-5:hover::before {
	border-color: white;
	animation: rotate-border 2s linear infinite, move-border 0.5s forwards;
}

.sp-dot-0.active::before,
.sp-dot-1.active::before,
.sp-dot-2.active::before,
.sp-dot-3.active::before,
.sp-dot-4.active::before,
.sp-dot-5.active::before {
	border-color: white;
	animation: rotate-border 2s linear infinite, move-border 0.5s forwards;
}

.sp-dot-0.hide-border::before,
.sp-dot-1.hide-border::before,
.sp-dot-2.hide-border::before,
.sp-dot-3.hide-border::before,
.sp-dot-4.hide-border::before,
.sp-dot-5.hide-border::before {
	border-color: transparent;
	animation: none;
}

@keyframes rotate-border {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes move-border {
	0% {
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
	}
	100% {
		top: -8px;
		left: -8px;
		right: -8px;
		bottom: -8px;
	}}
	/* title header effect */
        .sp-page-title {
            text-align: center;
           
            
        }

        .sp-page-title .sp-page-title-heading {
            display: flex;
            justify-content: start;
            color: #ffffff82;
            font-size: 4em;
        }

        .sp-page-title .sp-page-title-heading span {
            display: inline-block;
            opacity: 0;
            animation: appear 0.5s forwards;
        }

        @keyframes appear-from-top {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes appear-from-bottom {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes appear-from-left {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes appear-from-right {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
/* logo */
header.header-sticky .logo img {
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out;
    margin-top: 10px;
}

/* article blog */
.article-list .article-header {
    order: -1;
    margin-bottom: 20px;
}

.view-article .article-header {
    order: -1;
    margin-bottom: 20px;
}
/* test */
.sp-scroll-up {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: 50px; /* Adjust size for better heart shape */
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: transparent;
    border: none;
    z-index: 1000;
    transition: all 0.3s ease;
    cursor: pointer; /* Add cursor pointer for better UX */

}

/* Create the pink heart using :before and :after pseudo-elements */
.sp-scroll-up:before, 
.sp-scroll-up:after {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 25px;
    height: 40px;
    border-radius: 25px 25px 0 0;
    background-color: pink;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    transition: background-color 0.3s ease;
}

.sp-scroll-up:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

/* On hover, change the heart color to red */
.sp-scroll-up:hover:before, 
.sp-scroll-up:hover:after {
    background-color: #E91E63;
}
.sp-scroll-up:hover, .sp-scroll-up:active, .sp-scroll-up:focus {
    color: #fff;
    background: #0000;
}

/* footer */
.module-footer {
    background-color: #a10343;
    padding: 20px;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: background-color 0.4s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
}

.module-footer:hover {
    background-color: #b41657;
}

.module-footer h3 {
    position: relative;
    font-family: Antic Didone;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 15px;
    padding-bottom: 10px;
    transition: all 0.4s ease-out;
    border-bottom: 2px solid #ffffff;
    display: flex;
    align-items: center;
}

.module-footer h3::before {
    content: "\2665"; /* Unicode for heart symbol */
    position: absolute;
    left: -28px; /* Adjust this value to position the heart closer or farther from the text */
    top: 50%;
    transform: translateY(-50%); /* Vertically center the heart */
    font-size: 24px; /* Larger heart size */
    color: #ff69b4;
    transition: transform 0.4s ease-out;
}

.module-footer h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #ff69b4;
    transition: width 0.4s ease-out;
    transform: translateX(-50%);
}

.module-footer:hover h3::after {
    width: 100%;
    left: 0;
    transform: translateX(0);
}


/* footer menu */
/* General footer menu styling */
.footer-menu {
    
    padding: 20px;
    border-radius: 8px;
    text-align: left;

}

.footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu ul li {
    margin-bottom: 5px;
    position: relative;
	color: white;
}

.footer-menu ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    display: block;
    transition: color 0.3s ease;
    position: relative;
    border-bottom: 1px solid #ffffff26;
}

.footer-menu ul li::before {
    content: "\2665"; /* Unicode for heart symbol */
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    font-size: 20px;
    color: #ff69b4;
    transition: transform 0.3s ease;
}

.footer-menu ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #ff69b4;
    transition: width 0.3s ease;
}

.footer-menu ul li:hover a {
    color: #ff69b4;
}

.footer-menu ul li:hover::before {
    transform: translateY(-50%) scale(1);
}

.footer-menu ul li:hover a::after {
    width: 100%;
}
/* menu white */
.menu-white {
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    background-color: #ffffff; /* White background */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.menu-white ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-white ul li {
    margin-bottom: 5px;
    position: relative;
    color: #444444; /* Dark gray text color */
}

.menu-white ul li a {
    text-decoration: none;
    color: #444444; /* Dark gray text color */
    font-size: 14px;
    font-weight: bold;
    display: block;
    transition: color 0.3s ease;
    position: relative;
  
}

.menu-white ul li::before {
    content: "\1F338"; /* Unicode for heart symbol */
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    font-size: 20px;
    color: #ffa5e0; /* Softer pink heart symbol */
    transition: transform 0.3s ease;
}

.menu-white ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #ffbce8; /* Softer pink underline */
    transition: width 0.3s ease;
}

.menu-white ul li:hover a {
    color: #d661ad; /* Change text color on hover */
}

.menu-white ul li:hover::before {
    transform: translateY(-50%) scale(1);
}

.menu-white ul li:hover a::after {
    width: 100%;
}



/* module white */
.module-white {
    background-color: #ffffff;
    padding: 20px;
    color: #444444;
    border-radius: 8px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: background-color 0.4s ease;
    position: relative;
    border: 1px solid #dddddd;
}

.module-white:hover {
    background-color: #f0f0f038;
}

.module-white h3 {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #d661ad; /* Dark gray text color */
    margin-bottom: 5px;
    padding-bottom: 5px;
    transition: all 0.4s ease-out;
    border-bottom: 2px solid #dddddd; /* Light gray underline */
    display: flex;
    align-items: center;
}

.module-white h3::before {
    content: "\1F338"; /* Unicode for heart symbol */
    position: absolute;
    left: -46px; /* Adjust to position heart closer to title */
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px; /* Adjust heart size */
    color: #ff6b81; /* Softer pink heart icon */
    transition: transform 0.4s ease-out;
}

.module-white h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #ffa5e0; /* Softer pink underline */
    transition: width 0.4s ease-out;
    transform: translateX(-50%);
}

.module-white:hover h3::after {
    width: 100%;
    left: 0;
    transform: translateX(0);
}
/* sroolbar */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* Background of the scrollbar track */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #ff69b4; /* Pink color for the scrollbar thumb */
    border-radius: 10px;
    border: 2px solid #f0f0f0; /* Optional: adds a border around the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ff4da6; /* Darker pink on hover */
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #ff69b4 #f0f0f0;
}

/* For Internet Explorer/Edge legacy */
body {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Hides scrollbar until scrolling starts */
}
/* button */
@keyframes levitate {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.button-reflex {
    background-color: #ff69b4; /* Różowe tło */
    color: #ffffff; /* Biały kolor tekstu */
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    animation: levitate 3s ease-in-out infinite; /* Ciągła animacja lewitacji */
    transition: background-color 0.3s ease; /* Płynne przejście koloru tła przy najechaniu */
}

.button-reflex::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -150%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    transition: transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out;
    pointer-events: none;
}

.button-reflex:hover {
    background-color: #ff85c0; /* Jaśniejszy różowy przy najechaniu */
}

.button-reflex:hover::before {
    top: 100%;
    left: 100%;
    transform: rotate(45deg);
}

/* price text */
/* Container for Makeup Options */
.makeup-options {
    padding: 20px;
 
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   
    color: #333;
}

/* Styling for the Title */
.makeup-options h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #ff69b4; /* Matching pink color */
	font-family: Antic Didone;
}

/* Styling for Each Makeup Option */
.makeup-options ul {
    list-style-type: none;
    padding-left: 0;
}

.makeup-options ul li {
    margin-bottom: 15px;
}

.makeup-options ul li h3 {
    font-family: Antic Didone;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.makeup-options ul li p {
    font-size: 14px;
    color: #666;
    margin: 5px 0 0;
}

.makeup-options ul li span {
    font-size: 16px;
    font-weight: bold;
    color: #ff69b4;
}
.arrow{
font-size:30px;
padding:2px 0 0 12px;
color:#C1397B;
}
@keyframes moveLeftRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px); /* Ruch w prawo o 10px */
    }
    100% {
        transform: translateX(0); /* Powrót do pozycji początkowej */
    }
}

.arrow{
    display: inline-block;
    animation: moveLeftRight 3s infinite ease-in-out;
}
.sppb-articles-ticker-heading {
    justify-content: flex-start;
    margin-left: 10px;
   
}
.sppb-articles-ticker-heading {
    background: #e91e63;
    color: #fff;
    -ms-flex: 0 0 13%;
    flex: 0 0 13%;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1;
}

/* PORTFOLIO */
.sp-simpleportfolio .sp-simpleportfolio-filter>ul>li>a {
    display: block;
    padding: 5px 10px;
    background: #ff66b2; /* Jasnoróżowe tło */
    color: #fff; /* Biały tekst */
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.3s ease, color 0.3s ease; /* Dodanie animacji */
}

.sp-simpleportfolio .sp-simpleportfolio-filter>ul>li>a:hover {
    background: #ff3399; /* Ciemniejszy różowy na hover */
    color: #000; /* Czarny tekst na hover */
}

/* image zoom rotating*/
.article-list .article .article-intro-image img, 
.article-list .article .article-featured-video img, 
.article-list .article .article-featured-audio img, 
.article-list .article .article-feature-gallery img {
    border-radius: 3px 3px 0 0;
    transition: transform 0.3s ease-in-out; /* Dodanie płynnej animacji */
}

.article-list .article:hover .article-intro-image img, 
.article-list .article:hover .article-featured-video img, 
.article-list .article:hover .article-featured-audio img, 
.article-list .article:hover .article-feature-gallery img {
    transform: scale(1.05) rotate(2deg); /* Delikatne powiększenie i obrót */
    overflow: hidden; /* Zapobiega wychodzeniu obrazu poza kontener */
}

/* price table */
.table {
    border: 1px solid #F8BBD0;
    width: 100%;
    margin-bottom: 1rem;
    color: #ff3399;
    border-radius: 10px;
    overflow: hidden;
}

.table th, .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #ff3399;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #fcf7fc;
}

.table thead th {
    background-color: #F3E5F5;
    color: #ff3399;
    border-bottom: 2px solid #CE93D8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.6rem;
    font-family: 'Antic Didone', serif;
}

.table tbody tr:nth-child(even) {
    background-color: #FFF3E0;
}

.table tbody tr:nth-child(odd) {
    background-color: #E8F5E9;
}

.table tbody td {
    border-color: #F8BBD0;
    color: #ff3399;
}

.table tbody tr:hover {
    background-color: #F8E8E8 !important; /* Blady róż po najechaniu */
    color: #ff3399;
}

.table thead th {
    text-align: center;
    font-weight: bold;
}

.table td, .table th {
    text-align: left;
    font-size: 1em;
}

.table td strong {
    color: #4A148C;
}

.table a {
    color: #D81B60;
    text-decoration: none;
}

.table a:hover {
    color: #880E4F;
    text-decoration: underline;
}

.table p {
    margin: 0;
    color: #6A1B9A;
    font-size: 0.9em;
}