:root {



            --santa-pola-gold: #D4A574;



            --mediterranean-blue: #2E86AB;



            --sunset-coral: #F18F01;



            --flamingo-pink: #F24236;



            --cream-white: #F7F3E9;



            --olive-green: #A23B72;



            --terracotta: #C73E1D;



            --charcoal: #2C2C2C;





        



        body {



            font-family: 'Source Sans Pro', sans-serif;



            background: linear-gradient(135deg, var(--cream-white) 0%, #F0EDE5 100%);



            color: var(--charcoal);



            line-height: 1.6;



        }



        



        .font-display {



            font-family: 'Playfair Display', serif;



        }



        



        .hero-bg {



            background: linear-gradient(rgba(46, 134, 171, 0.1), rgba(212, 165, 116, 0.2)), 



                        url('resources/hero-santapola.webp');



            background-size: cover;



            background-position: center;



            background-attachment: fixed;



        }







.webp .hero-bg {



            background-image: linear-gradient(rgba(46, 134, 171, 0.1), rgba(212, 165, 116, 0.2)), 



                        url('resources/hero-santapola.webp');



        }



        



.hero-title {
    display: block;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    color: #FFFFFF;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.1;
}

.hero-title .typewriter {
    display: inline-block;
    white-space: normal;
    border-right: none;
    overflow: visible;
    padding-right: 0.15em;
    color: inherit;
}

.typewriter::after {
    content: "";
    display: inline-block;
    width: 0.12em;
    height: 1em;
    margin-left: 0.2em;
    background: var(--sunset-coral);
    animation: blink-caret 0.8s steps(1, end) infinite;
}




        





.hero-subtitle {
    color: #FFFFFF;
    font-size: clamp(1.125rem, 3.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    margin: 0 auto;
}

.hero-cta {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.hero-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(242, 66, 54, 0.92), rgba(46, 134, 171, 0.92));
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 35px rgba(46, 134, 171, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.hero-cta__button:hover,
.hero-cta__button:focus {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(46, 134, 171, 0.45);
    filter: brightness(1.05);
}

.hero-cta__button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 4px;
}



        



        .hand-drawn {

            position: relative;

            display: inline;

            white-space: normal;

            overflow-wrap: anywhere;

            color: inherit !important;

        }



        @media (min-width: 768px) {

            .hand-drawn {

                white-space: nowrap;

                overflow-wrap: normal;

            }

        }



        .hand-drawn::after {



            content: '';



            position: absolute;



            bottom: -4px;



            left: 0;



            width: 100%;



            height: 2px;



            background: var(--sunset-coral);



            transform: scaleX(0);



            transform-origin: left;



            transition: transform 0.3s ease;



        }



        



        .hand-drawn:hover::after {



            transform: scaleX(1);



        }



        



        .wave-effect {



            position: relative;



            overflow: hidden;



        }



        



        .wave-effect::before {



            content: '';



            position: absolute;



            top: 0;



            left: -100%;



            width: 100%;



            height: 100%;



            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);



            transition: left 0.5s ease;



        }



        



        .wave-effect:hover::before {



            left: 100%;



        }



        



        .card-hover {



            transition: all 0.3s ease;



        }



        



        .card-hover:hover {



            transform: translateY(-8px);



            box-shadow: 0 20px 40px rgba(46, 134, 171, 0.2);



        }



        



        .text-gradient {



            background: linear-gradient(135deg, var(--mediterranean-blue), var(--sunset-coral));



            -webkit-background-clip: text;



            -webkit-text-fill-color: transparent;



            background-clip: text;



        }



        



        .text-gradient .hand-drawn {



            background: linear-gradient(135deg, var(--mediterranean-blue), var(--sunset-coral)) !important;



            -webkit-background-clip: text !important;



            -webkit-text-fill-color: transparent !important;



            color: inherit !important;



        }



        



        /* Ensure text inside hand-drawn spans remains visible even when inside text-gradient */



        .text-gradient .hand-drawn {



            -webkit-text-fill-color: var(--charcoal);



            color: var(--charcoal);



        }







        .text-justify {



            text-align: justify;



            text-justify: inter-word;



            hyphens: auto;



        }







        .sand-texture {



            background-image: 



                radial-gradient(circle at 25% 25%, rgba(212, 165, 116, 0.1) 0%, transparent 50%),



                radial-gradient(circle at 75% 75%, rgba(241, 143, 1, 0.1) 0%, transparent 50%);



        }



        



        .parallax-bg {



            background-attachment: fixed;



            background-position: center;



            background-repeat: no-repeat;



            background-size: cover;



        }



        



        .fade-in {



            opacity: 0;



            transform: translateY(30px);



            transition: all 0.6s ease;



        }



        



        .fade-in.visible {



            opacity: 1;



            transform: translateY(0);



        }



        



        .navigation {



            backdrop-filter: blur(10px);



            background: rgba(247, 243, 233, 0.9);



            border-bottom: 1px solid rgba(212, 165, 116, 0.2);



        }



        .brand-logo {



            flex-shrink: 0;



        }







        .brand-title {

            display: inline-block;

            font-size: clamp(1.25rem, 5.2vw, 1.6rem);

            line-height: 1.1;

        }



        .brand-title__line {

            display: block;

        }



        .brand-title__line + .brand-title__line {

            margin-top: 0.1rem;

        }



        @media (min-width: 768px) {



            .brand-title {



                font-size: 1.75rem;



            }



            .brand-title__line {



                display: inline;



            }



            .brand-title__line + .brand-title__line {



                margin-top: 0;



            }



            .brand-title__line--primary::after {



                content: " ";



            }



        }



        @media (min-width: 1024px) {



            .brand-title {



                font-size: 1.9rem;



            }



        }



        .mobile-menu-panel {



            position: absolute;



            top: 100%;



            left: 0;



            right: 0;



            background: rgba(247, 243, 233, 0.97);



            border-bottom: 1px solid rgba(212, 165, 116, 0.2);



            box-shadow: 0 18px 40px rgba(44, 44, 44, 0.12);



            transform: translateY(-12px);



            opacity: 0;



            pointer-events: none;



            transition: transform 0.28s ease, opacity 0.28s ease;



            z-index: 40;



        }







        .mobile-menu-panel.is-open {



            opacity: 1;



            pointer-events: auto;



            transform: translateY(0);



        }







        .mobile-menu-panel .nav-link {



            display: block;



        }







        body.menu-open {



            overflow: hidden;



        }











        .nav-link {



            position: relative;



            transition: all 0.3s ease;



        }



        



        .nav-link::after {



            content: '';



            position: absolute;



            bottom: -2px;



            left: 50%;



            width: 0;



            height: 2px;



            background: var(--sunset-coral);



            transform: translateX(-50%);



            transition: width 0.3s ease;



        }



        



        .nav-link:hover::after {



            width: 100%;



        }



        



        .gallery-item {



            position: relative;



            overflow: hidden;



            border-radius: 12px;



            cursor: pointer;



        }



        



        .gallery-item img {



            transition: transform 0.5s ease;



        }



        



        .gallery-item:hover img {



            transform: scale(1.1);



        }



        



        .gallery-overlay {



            position: absolute;



            top: 0;



            left: 0;



            right: 0;



            bottom: 0;



            background: linear-gradient(to bottom, transparent 0%, rgba(46, 134, 171, 0.8) 100%);



            opacity: 0;



            transition: opacity 0.3s ease;



            display: flex;



            align-items: end;



            padding: 20px;



        }



        



        .gallery-item:hover .gallery-overlay {



            opacity: 1;



        }



        



        .floating-element {



            animation: float 6s ease-in-out infinite;



        }



        



        @keyframes float {



            0%, 100% { transform: translateY(0px); }



            50% { transform: translateY(-10px); }



        }



        .typed-cursor {
    display: none !important;
}




        @keyframes typing {



            from { width: 0; }



            to { width: 100%; }



        }



        



        @keyframes blink-caret {



            from, to { border-color: transparent; }



            50% { border-color: var(--sunset-coral); }



        }



        



        /* Styles for the attraction cards section (from okolica.html) */



        .attraction-card {



            background: rgba(255, 255, 255, 0.95);



            backdrop-filter: blur(10px);



            border-radius: 20px;



            overflow: hidden;



            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);



            transition: all 0.3s ease;



        }



        



        .attraction-card:hover {



            transform: translateY(-8px);



            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);



        }



        



        .attraction-card img {



            transition: transform 0.5s ease;



        }



        



        .attraction-card:hover img {



            transform: scale(1.1);



        }



        



        #attractions-grid.carousel-mode {



            display: flex !important;



            overflow-x: auto;



            overflow-y: hidden;



            gap: 2rem;



            padding-bottom: 1rem;



            scroll-snap-type: x proximity;



            -webkit-overflow-scrolling: touch;



            scrollbar-width: none;



        }







        #attractions-grid.carousel-mode .attraction-card {



            flex: 0 0 280px;



            scroll-snap-align: start;



        }







        @media (min-width: 640px) {



            #attractions-grid.carousel-mode .attraction-card {



                flex-basis: 320px;



            }



        }







        @media (min-width: 1024px) {



            #attractions-grid.carousel-mode .attraction-card {



                flex-basis: 360px;



            }



        }







        #attractions-grid.carousel-mode::-webkit-scrollbar {



            display: none;



        }







        .distance-badge {



            position: absolute;



            top: 12px;



            right: 12px;



            background: rgba(255, 255, 255, 0.9);



            backdrop-filter: blur(10px);



            padding: 4px 12px;



            border-radius: 20px;



            font-size: 0.875rem;



            font-weight: 600;



            color: var(--charcoal);



        }



        



        .category-filter {



            background: rgba(255, 255, 255, 0.9);



            backdrop-filter: blur(10px);



            border-radius: 50px;



            padding: 8px 20px;



            border: 2px solid transparent;



            transition: all 0.3s ease;



            cursor: pointer;



        }



        



        .category-filter:hover,



        .category-filter.active {



            border-color: var(--sunset-coral);



            background: var(--sunset-coral);



            color: white;



        }



        



        /* FAQ section styles */



        .faq-card {



            background: rgba(255, 255, 255, 0.95);



            backdrop-filter: blur(10px);



            border-radius: 20px;



            padding: 1.5rem;



            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



            transition: all 0.3s ease;



            margin-bottom: 1rem;



        }



        



        .faq-card:hover {



            transform: translateY(-5px);



            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);



        }



        



        .faq-toggle {



            width: 100%;



            text-align: left;



            padding: 1rem;



            border-radius: 15px;



            transition: background-color 0.3s ease;



        }



        



        .faq-toggle:hover {



            background-color: rgba(245, 245, 245, 0.5);



        }



        



        .faq-icon {



            font-size: 1.5rem;



            color: var(--sunset-coral);



            transition: transform 0.3s ease;



        }



        



        .faq-content {



            padding: 1rem 1rem 0 1rem;



            color: var(--charcoal);



        }



        



        /* Reviews section styles */



        .review-card {



            position: relative;



            overflow: hidden;



            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);



        }



        



        .review-card::before {



            content: '';



            position: absolute;



            top: 0;



            left: -100%;



            width: 100%;



            height: 100%;



            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);



            transition: all 0.5s ease;



        }



        



        .review-card:hover::before {



            left: 100%;



        }



        



        /* Extra special animation effect for reviews */



        .pulse-animation {



            position: relative;



        }



        



        .pulse-animation::after {



            content: '';



            position: absolute;



            top: 0;



            left: 0;



            width: 100%;



            height: 100%;



            border-radius: 16px; /* 2xl border-radius */



            box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.7);



            animation: pulse 2s infinite;



            pointer-events: none;



        }



        



        @keyframes pulse {



            0% {



                transform: scale(0.95);



                box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.7);



            }



            70% {



                transform: scale(1);



                box-shadow: 0 0 0 15px rgba(212, 165, 116, 0);



            }



            100% {



                transform: scale(0.95);



                box-shadow: 0 0 0 0 rgba(212, 165, 116, 0);



            }



        }



        



        /* Flip animation for review cards */



        .review-card-flip {



            perspective: 1000px;



        }



        



        .review-card-inner {



            position: relative;



            width: 100%;



            height: 100%;



            transition: transform 0.6s;



            transform-style: preserve-3d;



        }



        



        .review-card:hover .review-card-inner {



            transform: rotateY(180deg);



        }



        



        .review-front, .review-back {



            position: absolute;



            width: 100%;



            height: 100%;



            backface-visibility: hidden;



            border-radius: 16px;



        }



        



        .review-back {



            background: linear-gradient(135deg, var(--santa-pola-gold), var(--mediterranean-blue));



            color: white;



            transform: rotateY(180deg);



            display: flex;



            align-items: center;



            justify-content: center;



            padding: 1.5rem;



        }



        



        /* Horizontal reviews section styles */



        .hide-scrollbar {



            -ms-overflow-style: none;  /* IE and Edge */



            scrollbar-width: none;  /* Firefox */



        }



        



        .hide-scrollbar::-webkit-scrollbar {



            display: none;  /* Chrome, Safari, Opera */



        }



        



        .reviews-container {



            position: relative;



            padding: 10px 0;



        }



        



        .reviews-track {



            display: flex;



            align-items: flex-start;



        }



        



        .review-card {



            min-width: 24rem; /* w-96 = 24rem = 384px */



        }







        /* Gallery carousel */



        #gallery-carousel {



            display: flex;



            gap: 2rem;



            overflow-x: auto;



            overflow-y: hidden;



            padding-bottom: 1rem;



            scroll-snap-type: x proximity;



            -webkit-overflow-scrolling: touch;



            scrollbar-width: none;



        }







        #gallery-carousel::-webkit-scrollbar {



            display: none;



        }







        #gallery-carousel .gallery-item {



            flex: 0 0 auto;



            scroll-snap-align: start;



            display: flex;



            align-items: center;



            justify-content: center;



            height: 16rem;



        }







        #gallery-carousel .gallery-image {



            height: 16rem;



            width: auto;



            max-width: 100%;



            object-fit: contain;



            display: block;



        }







/* Navigation layout adjustments */
.nav-bar {
    flex-wrap: nowrap;
    gap: 1.25rem;
}

.brand {
    flex-shrink: 0;
}

.navigation__links {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-width: 0;
}

.navigation__links .nav-link {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .navigation__links {
        display: flex;
    }
}

/* Language bar */
.language-bar {
    width: 100%;
    margin-top: 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

@media (min-width: 768px) {
    .language-bar {
        margin-top: -0.25rem;
        padding-top: 0;
        padding-bottom: 0.25rem;
    }
}


/* Language switcher */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.language-switcher--desktop {
    align-items: center;
    flex-shrink: 0;
}

.language-switcher--mobile {
    justify-content: flex-start;
}

.lang-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(44, 44, 44, 0.15);
    background: rgba(255, 255, 255, 0.7);
    color: var(--charcoal);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.lang-switcher__btn:hover {
    border-color: rgba(210, 165, 116, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lang-switcher__btn.is-active {
    border-color: var(--mediterranean-blue);
    background: rgba(46, 134, 171, 0.12);
    color: var(--mediterranean-blue);
    box-shadow: 0 6px 16px rgba(46, 134, 171, 0.18);
}

.lang-switcher__flag {
    display: inline-block;
    width: 1.2rem;
    height: 0.8rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(44, 44, 44, 0.12), 0 2px 4px rgba(0, 0, 0, 0.12);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.lang-switcher__btn[data-lang="pl"] .lang-switcher__flag {
    background: linear-gradient(to bottom, #ffffff 50%, #dc143c 50%);
}

.lang-switcher__btn[data-lang="es"] .lang-switcher__flag {
    background: linear-gradient(to bottom, #c60b1e 0%, #c60b1e 33%, #fecb00 33%, #fecb00 66%, #c60b1e 66%, #c60b1e 100%);
}

.lang-switcher__btn[data-lang="en"] .lang-switcher__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='c'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='d'%3E%3Cpath d='M0 0v30h60V0zM26 0v12H0v6h26v12h8V18h26v-6H34V0z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' d='M0 0l60 30M60 0L0 30' clip-path='url(%23d)'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-switcher__code {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Consent banner */
#consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.92));
    color: #f9fafb;
    backdrop-filter: blur(8px);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.25);
}

#consent-banner .consent-content {
    max-width: 860px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

#consent-banner .consent-message {
    flex: 1 1 260px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

#consent-banner .consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 220px;
}

.consent-btn {
    border: none;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    padding: 0.55rem 1.4rem;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.consent-btn--primary {
    background: linear-gradient(140deg, #f97316, #ec4899);
    color: #0f172a;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.35);
}

.consent-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(236, 72, 153, 0.35);
}

.consent-btn--secondary {
    background: rgba(15, 23, 42, 0.65);
    color: #f9fafb;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.consent-btn--secondary:hover {
    opacity: 0.85;
}

.consent-link {
    color: #bfdbfe;
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: 500;
}

.consent-link:hover {
    color: #93c5fd;
}

@media (max-width: 640px) {
    #consent-banner {
        padding: 0.75rem;
    }

    #consent-banner .consent-content {
        gap: 0.75rem;
    }

    #consent-banner .consent-actions {
        justify-content: flex-start;
    }

    .consent-btn {
        width: 100%;
        text-align: center;
    }

    .consent-link {
        width: 100%;
        text-align: center;
    }
}