:root {
     --primary-color: #ee7c33;
     --secondary-color: #fcb97c;
     --accent-color: #0f12a1;
     --text-dark: #333;
     --text-light: #362626;
}

.sarina-regular {
     font-family: "Sarina", cursive;
     font-weight: 400;
     font-style: normal;
}

body {
     font-family: 'Poppins', sans-serif;
     line-height: 1.6;
}



body {
     background-color: var(--light);
     color: #777777;
     font-family: "nunito-sans", Arial, sans-serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 26px;
     margin: 0;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: 100%;
}


.numri {
     color: #920202 !important;
     font-weight: 600;
}

/* Header */
.navbar {
     background: #FFFFFF;
     padding: 1rem 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
     font-weight: 700;
     font-size: 1.5rem;
     color: #ee7c33 !important;
}

.navbar-nav .nav-link {
     color: #222222ff !important;
     font-weight: 500;
     margin: 0 0.5rem;
     transition: color 0.3s ease;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     letter-spacing: -0.5px;
     text-transform: uppercase;
     text-decoration: none;
}

.navbar-nav .nav-link:hover {

     color: #ee7c33 !important;
}

/* Hero Section */
.hero-section {

     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     display: flex;
     align-items: center;
}

.hero-carousel {
     position: relative;
     overflow: hidden;
     border-radius: 15px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     height: 500px;
}

.hero-carousel-inner {
     position: relative;
     width: 100%;
     height: 100%;
}

.hero-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
     opacity: 1;
}

.hero-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.hero-carousel-indicators {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 10;
}

.hero-indicator {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid rgba(255, 255, 255, 0.8);
}

.hero-indicator.active {
     background: var(--accent-color);
     transform: scale(1.2);
     border-color: white;
}

.hero-carousel-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 150px;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
     z-index: 5;
}

.hero-content {
     padding: 2rem;
}

.hero-title {
     font-family: "quicksand", Arial, sans-serif;
     font-size: 3em !important;
     font-weight: 500 !important;
     color: #212529 !important;
     margin-bottom: 1rem;
     line-height: 1.3 !important;
}

.hero-subtitle {
     font-size: 1.3rem;
     color: var(--text-light);
     margin-bottom: 2rem;
     font-style: italic;
}


.btn {
     --bs-btn-padding-x: 0.75rem;
     --bs-btn-padding-y: 0.375rem;
     --bs-btn-font-family: ;
     --bs-btn-font-size: 1rem;
     --bs-btn-font-weight: 400;
     --bs-btn-line-height: 1.5;
     --bs-btn-color: var(--bs-body-color);
     --bs-btn-bg: transparent;
     --bs-btn-border-width: var(--bs-border-width);
     --bs-btn-border-color: transparent;
     --bs-btn-border-radius: var(--bs-border-radius);
     --bs-btn-hover-border-color: transparent;
     --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
     --bs-btn-disabled-opacity: 0.65;
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
     display: inline-block;
     padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
     font-family: var(--bs-btn-font-family);
     font-size: var(--bs-btn-font-size);
     font-weight: var(--bs-btn-font-weight);
     line-height: var(--bs-btn-line-height);
     color: var(--bs-btn-color);
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
     border-radius: var(--bs-btn-border-radius);
     background-color: var(--bs-btn-bg);
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-rounded {
     border-radius: 35px;
}

.btn-custom {

     background-color: #ee7c33;
     border-color: var(--primary) var(--primary) var(--primary-300);
     color: #ffffff;

}

.btn-custom:hover {
     background-color: #f1ac80;
     color: white;
}

/* Map Section */
.map-section {
     padding: 80px 0;
     background: white;
}

.section-title {
     text-align: center;
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 3rem;
     position: relative;
}

.section-title::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 4px;
     background: var(--accent-color);
     border-radius: 2px;
}

/* HARTA  */
#map {
     height: 600px;
     width: 100%;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.location-card {
     transition: transform 0.2s;
}

.location-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.overnight-badge {
     position: absolute;
     top: 10px;
     right: 10px;
}

.journey-stats {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border-radius: 15px;
}

.stat-item {
     text-align: center;
     padding: 20px;
}

.stat-number {
     font-size: 2rem;
     font-weight: bold;
     display: block;
}

.stat-label {
     font-size: 0.9rem;
     opacity: 0.9;
}

.popup-content a {
     color: #ffffff;
}


/* Stories Section */
.stories-section {
     padding: 80px 0;
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.story-card {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     margin-bottom: 2rem;
}

.story-card:hover {
     transform: translateY(-5px);
}

.story-image {
     height: 200px;
     overflow: hidden;
}

.story-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
}

.story-card:hover .story-image img {
     transform: scale(1.1);
}

.story-content {
     padding: 1.5rem;
}

.story-title {
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 0.5rem;
}

.story-date {
     color: var(--text-light);
     font-size: 0.9rem;
     margin-bottom: 1rem;
}

.story-excerpt {
     color: var(--text-dark);
     font-size: 0.95rem;
}

.gallery-container {
     padding: 2rem 0;
}

.gallery-item {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
     cursor: pointer;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     aspect-ratio: 1;
     margin-bottom: 1.5rem;
}

.gallery-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
}

.gallery-item:hover img {
     transform: scale(1.05);
}

.gallery-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
     color: white;
     padding: 1rem;
     transform: translateY(100%);
     transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
     transform: translateY(0);
}

.gallery-title {
     font-size: 0.9rem;
     font-weight: 600;
     margin: 0;
     line-height: 1.2;
}

.gallery-location {
     font-size: 0.8rem;
     opacity: 0.9;
     margin: 0;
}

/* Lightbox Styles */
.lightbox {
     display: none;
     position: fixed;
     z-index: 9999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(5px);
}

.lightbox.show {
     display: flex;
     align-items: center;
     justify-content: center;
     animation: fadeIn 0.3s ease;
}

.lightbox-content {
     position: relative;
     max-width: 90vw;
     max-height: 90vh;
     margin: auto;
}

.lightbox-image {
     max-width: 100%;
     max-height: 90vh;
     object-fit: contain;
     border-radius: 8px;
}

.lightbox-info {
     position: absolute;
     bottom: -60px;
     left: 0;
     right: 0;
     color: white;
     text-align: center;
     padding: 1rem;
}

.lightbox-title {
     font-size: 1.2rem;
     font-weight: 600;
     margin: 0 0 0.5rem 0;
}

.lightbox-location {
     font-size: 1rem;
     opacity: 0.8;
     margin: 0;
}

.close-lightbox {
     position: absolute;
     top: -50px;
     right: 0;
     color: white;
     font-size: 2rem;
     cursor: pointer;
     z-index: 10000;
     background: rgba(0, 0, 0, 0.5);
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease;
}

.close-lightbox:hover {
     background: rgba(0, 0, 0, 0.8);
}

.nav-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: white;
     font-size: 2rem;
     cursor: pointer;
     background: rgba(0, 0, 0, 0.5);
     border: none;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease;
     z-index: 10000;
}

.nav-arrow:hover {
     background: rgba(0, 0, 0, 0.8);
}

.nav-arrow.prev {
     left: -70px;
}

.nav-arrow.next {
     right: -70px;
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

/* Loading placeholder */
.gallery-item.loading {
     background: #f8f9fa;
     display: flex;
     align-items: center;
     justify-content: center;
}

.loading-spinner {
     width: 2rem;
     height: 2rem;
     border: 2px solid #dee2e6;
     border-top: 2px solid #007bff;
     border-radius: 50%;
     animation: spin 1s linear infinite;
}

@keyframes spin {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

@media (max-width: 768px) {
     .nav-arrow.prev {
          left: 10px;
     }

     .nav-arrow.next {
          right: 10px;
     }

     .close-lightbox {
          top: 10px;
          right: 10px;
     }
}

/* Loading Animation */
.loading {
     text-align: center;
     padding: 2rem;
}

.spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid var(--primary-color);
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
     margin: 0 auto 1rem;
}

@keyframes spin {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

/* Lightbox Styles */
.lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     display: none;
     z-index: 9999;
     opacity: 0;
     transition: opacity 0.3s ease;
}

.lightbox.active {
     display: flex;
     opacity: 1;
     align-items: center;
     justify-content: center;
}

.lightbox-content {
     position: relative;
     max-width: 90vw;
     max-height: 90vh;
     margin: auto;
     animation: lightboxZoom 0.3s ease;
}

.lightbox-content img {
     max-width: 100%;
     max-height: 90vh;
     object-fit: contain;
     border-radius: 10px;
}

.lightbox-content iframe {
     width: 80vw;
     height: 45vw;
     max-width: 1200px;
     max-height: 675px;
     border-radius: 10px;
}

.lightbox-close {
     position: absolute;
     top: -50px;
     right: 0;
     color: white;
     font-size: 2rem;
     cursor: pointer;
     z-index: 10001;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     transition: background 0.3s ease;
}

.lightbox-close:hover {
     background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: white;
     font-size: 2rem;
     cursor: pointer;
     z-index: 10001;
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     transition: background 0.3s ease;
}

.lightbox-nav:hover {
     background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
     left: 20px;
}

.lightbox-next {
     right: 20px;
}

.lightbox-caption {
     position: absolute;
     bottom: -60px;
     left: 0;
     right: 0;
     color: white;
     text-align: center;
     font-size: 1.1rem;
     padding: 10px;
}

@keyframes lightboxZoom {
     from {
          transform: scale(0.7);
          opacity: 0;
     }

     to {
          transform: scale(1);
          opacity: 1;
     }
}

/* Gallery item cursor */
.gallery-item,
.video-item {
     cursor: pointer;
}

@media (max-width: 768px) {
     .lightbox-content iframe {
          width: 95vw;
          height: 53vw;
     }

     .lightbox-nav {
          width: 40px;
          height: 40px;
          font-size: 1.5rem;
     }

     .lightbox-prev {
          left: 10px;
     }

     .lightbox-next {
          right: 10px;
     }
}

/* Responsive */
@media (max-width: 768px) {
     .hero-title {
          font-size: 2.5rem;
     }

     .hero-subtitle {
          font-size: 1.1rem;
     }

     .section-title {
          font-size: 2rem;
     }
}


.footer {
     background-color: #270b06;
     border-top: 2px solid #471c14;
     color: #ffffff;
     margin-top: 50px;
     padding: 2rem 0;

}

.footer a {
     color: #FFF;
     text-decoration: none;
     transition: color 0.3s ease;
}

.footer a:hover {
     color: #ee7c33;
     text-decoration: none;
}

.footer-brand {
     font-weight: bold;
     font-size: 1.2rem;
}

.social-icon {
     font-size: 1.5rem;
     margin-right: 0.5rem;
}


/* Font Size */
.text-0 {
     font-size: .7em !important;
}

.text-1 {
     font-size: .8em !important;
}

.text-2 {
     font-size: .9em !important;
}

.text-3 {
     font-size: 1em !important;
}

.text-4 {
     font-size: 1.2em !important;
}

.text-4-5 {
     font-size: 1.35em !important;
}

.text-5 {
     font-size: 1.50em !important;
}

.text-5-6,
.text-5-5 {
     font-size: 1.65em !important;
}

.text-6 {
     font-size: 1.80em !important;
}

.text-6-7,
.text-6-5 {
     font-size: 1.9em !important;
}

.text-7 {
     font-size: 2em !important;
}

.text-8 {
     font-size: 2.30em !important;
}

.text-9 {
     font-size: 2.50em !important;
}

.text-10 {
     font-size: 2.75em !important;
}

.text-11 {
     font-size: 3em !important;
}

.text-12 {
     font-size: 3.5em !important;
}

.text-12-13,
.text-12-5 {
     font-size: 3.75em !important;
}

.text-13 {
     font-size: 4em !important;
}

.text-14 {
     font-size: 4.5em !important;
}

.text-color-dark,
.text-dark {
     color: #212529 !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {

     font-family: "quicksand", Arial, sans-serif;
     font-weight: 700 !important;
     margin: 0;
     -webkit-font-smoothing: antialiased;
}


h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {

     font-family: "quicksand", Arial, sans-serif;
     font-weight: 500 !important;
     margin: 0;
     -webkit-font-smoothing: antialiased;
     color: #FFF;
     padding: 1px 8px;
     background-color: #bb1010
}

h1 .holl,
h2 .holl,
h3 .holl,
h4 .holl,
h5 .holl,
h6 .holl {

     font-family: "quicksand", Arial, sans-serif;
     font-weight: 500 !important;
     margin: 0;
     -webkit-font-smoothing: antialiased;
     color: #6b6868;
}

.pevidenca img {
     height: 200px;
     width: 100%;
}

.pevidenca div [class^="col-"] {
     /*  padding-left: 5px;
     padding-right: 5px;
     */
}

.pevidenca .card {
     transition: 0.5s;
     cursor: pointer;
}

.pevidenca .card-title {
     font-size: 18px;
     transition: 1s;
     cursor: pointer;
     font-weight: 400;
     letter-spacing: 0;
}

.pevidenca .card-title i {
     font-size: 15px;
     transition: 1s;
     cursor: pointer;
     color: #ffa710;
}

.pevidenca .card-title i:hover {
     transform: scale(1.25) rotate(100deg);
     color: #18d4ca;

}

.pevidenca .card:hover {
     transform: scale(1.05);
     box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

.pevidenca .card-text {
     /* height: 80px; */
}

.pevidenca .card {
     border-radius: 20px;
}

.pevidenca .card::before,
.pevidenca .card::after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transform: scale3d(0, 0, 1);
     transition: transform .3s ease-out 0s;
     background: rgba(255, 255, 255, 0.1);
     content: '';
     pointer-events: none;
}

.pevidenca .card::before {
     transform-origin: left top;
}

.pevidenca .card::after {
     transform-origin: right bottom;
}

.pevidenca .card:hover::before,
.pevidenca .card:hover::after,
.pevidenca .card:focus::before,
.pevidenca .card:focus::after {
     transform: scale3d(1, 1, 1);
}


.pevidenca a {
     color: #212529;
}


.text-color-primary-ezio,
.text-primary-ezio {
     color: #ee7c33 !important;
}

.home-intro {
     background-color: #efe9e0;
     margin-bottom: 60px;
     overflow: hidden;
     padding: 38.4px 0;
     padding: 2.4rem 0;
     position: relative;
     text-align: left;
     letter-spacing: -0.5px;
     color: #5f1f12 !important;
}




/* Scroll to top button styles */
.scroll-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 60px;
     height: 60px;
     background: linear-gradient(45deg, #ff6b6b, #ee5a52);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 20px rgba(238, 90, 82, 0.4);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     z-index: 1000;
}

.scroll-to-top.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}

.scroll-to-top:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 30px rgba(238, 90, 82, 0.6);
     background: linear-gradient(45deg, #ff5252, #d32f2f);
}

.scroll-to-top:active {
     transform: translateY(-2px);
     transition: transform 0.1s;
}

.scroll-to-top i {
     color: white;
     font-size: 24px;
     transition: transform 0.3s ease;
}

.scroll-to-top:hover i {
     transform: translateY(-2px);
}

/* Pulse animation when first appearing */
.scroll-to-top.show {
     animation: pulseIn 0.6s ease-out;
}

.navbar-toggler-icon {
     display: inline-block;
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
     background-image: url(img/toggle-menu-icon.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
}


@keyframes pulseIn {
     0% {
          transform: scale(0.8) translateY(20px);
          opacity: 0;
     }

     50% {
          transform: scale(1.1) translateY(0);
          opacity: 0.8;
     }

     100% {
          transform: scale(1) translateY(0);
          opacity: 1;
     }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
     .scroll-to-top {
          bottom: 20px;
          right: 20px;
          width: 50px;
          height: 50px;
     }

     .scroll-to-top i {
          font-size: 20px;
     }
}