/*

@Author: Themezinho
@URL: http://www.themezinho.net

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


	// Table of contents //

		01. GOOGLE FONTS
		02. BODY
		03. HTML TAGS
		04. CUSTOM TAGS
		05. SECTIONS
		06. CONTENT
		07. ODOMETER
		08. EQUALIZER
		09. REVEAL EFFECT
		10. PAGE TRANSITION
		11. PRELOADER
		12. PAGE LOADED
		13. TEXT ROTATER
		14. PERSPECTIVE 
		15. SOCIAL BAR
		16. HEADER
		17. DROPDOWN
		18. SLIDER
		19. SLIDER FRACTION
		20. SLIDER BUTTONS
		21. SLIDER CONTENT
		22. SLIDER LINKS
		23. INT HERO
		24. ABOUT STUDIO
		25. WORKS
		26. WORKS FILTER
		27. WORKS FIGURE
		28. ICON FEATURES
		29. TEAM MEMBERS
		30. CLIENTS
		31. SIDE IMAGE CONTENT
		32. AWARDS
		33. JOURNAL
		34. CONTACT
		35. FOOTER
		36. SCROLL DOWN
		37. RESPONSIVE MEDIUM FIXES
		38. RESPONSIVE TABLET FIXES
		39. RESPONSIVE MOBILE FIXES



*/
/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Poppins:300,400,600,800&display=swap");
/* BODY */
* {
  outline: none !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  background: #1c1c1c;
}
html {
  scroll-behavior: smooth;
}

/* HTML ELEMENTS */
img {
  max-width: 100%;
}

/* LINKS */
a {
  color: #1c1c1c;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
a:hover {
  text-decoration: underline;
  color: #1c1c1c;
}

/* CUSTOM CLASSES */
.overflow {
  overflow: hidden;
}

/* CUSTOM CONTAINER */
@media (min-width: 1300px) {
  .container {
    max-width: 1340px;
  }
}
/* SECTIONS */
main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  background: #1c1c1c;
}

section {
  position: relative;
}

aside {
  position: relative;
}

/* FORM ELEMENTS */
input[type=text] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=email] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=search] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=password] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=submit] {
  height: 58px;
  border: none;
  background: #1c1c1c;
  color: #fff;
  padding: 0 30px;
  font-weight: 600;
  font-size: 14px;
}

button[type=submit] {
  height: 58px;
  border: none;
  background: #1c1c1c;
  color: #fff;
  padding: 0 30px;
  font-weight: 600;
  font-size: 14px;
}

textarea {
  max-width: 100%;
  height: 140px;
  border: 1px solid #eee;
  padding: 20px;
}

/* EQUALIZER */
.equalizer {
  width: 26px;
  height: 30px;
  cursor: pointer;
  position: relative;
}

.equalizer span {
  background: #fff;
  width: 2px;
  height: 0px;
  bottom: 0;
  left: 0%;
  display: block;
  position: absolute;
  transition: height 0.2s linear;
}

.equalizer span:nth-child(1) {
  margin-left: 8px;
}

.equalizer span:nth-child(2) {
  margin-left: 16px;
}

.equalizer span:nth-child(4) {
  margin-left: 24px;
}

.equalizer.paused span {
  height: 3px !important;
}

/* SPLITTING */
.splitting .word, .splitting .char {
  display: inline-block;
}

.splitting .char {
  position: relative;
}

.animated .char {
  display: inline-block;
  animation: texteffect 0.6s cubic-bezier(0.5, 0, 0.5, 1) both;
  animation-delay: calc(10ms * var(--char-index));
}

/* ODOMETER */
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
  text-indent: -5px;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
  text-indent: 0;
}

/* PAGINATION */
.pagination {
  width: 100%;
  float: left;
  margin: 50px 0;
}
.pagination .page-item {
  display: inline-block;
  margin-right: 10px;
}
.pagination .page-item .page-link {
  font-weight: 600;
  border-radius: 0 !important;
  font-size: 13px;
  color: #1c1c1c;
  line-height: 1;
  padding: 15px 30px;
}

/* REVEAL EFFECT */
.reveal-effect {
  float: left;
  position: relative;
}

.reveal-effect > * {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  position: relative;
}

.reveal-effect > * {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.reveal-effect {
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.reveal-effect {
  -webkit-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal-effect.animated {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.reveal-effect.animated * {
  -webkit-animation-name: show-img-1;
  animation-name: show-img-1;
}

.reveal-effect:after {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.reveal-effect:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.reveal-effect:after {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(0.05, 0);
  transform: scale(0.05, 0);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.reveal-effect.masker:after {
  background-color: #161619;
}

.reveal-effect.animated:after {
  -webkit-animation-name: slide-bg-2;
  animation-name: slide-bg-2;
}

/* SWIPER PAGINATION */
.swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  transform: scale(0.4);
  background: #fff;
  opacity: 1;
  border-radius: 50%;
}

.swiper-pagination .swiper-pagination-bullet:hover {
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  -webkit-transform: scale(1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
  border: 2px solid #fff;
  background: none;
}

.swiper-pagination .swiper-pagination-bullet-active {
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  -webkit-transform: scale(1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
  border: 2px solid #fff;
  background: none;
}

/* PRELOADER */
.preloader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  background: #e5d999;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  overflow: hidden;
  transition-delay: 0.6s;
}
.preloader * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #1c1c1c;
  transition-delay: 0.3s;
}
.preloader .inner {
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}
.preloader .inner span {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
}
.preloader .inner figure {
  display: block;
  margin-bottom: 20px;
  transition-delay: 0.1s;
}
.preloader .inner figure img {
  height: 40px;
  transform: translateX(-7px);
}

/* PAGE LOADED */
.page-loaded .preloader {
  left: -100%;
}

.page-loaded .preloader .inner figure {
  opacity: 0;
  transform: scale(1.5);
}

.page-loaded .preloader .inner span {
  transform: translateY(20px);
  opacity: 0;
}

.page-loaded .preloader .layer {
  left: -100%;
}

.page-loaded .left-side {
  left: 0;
  opacity: 1;
}

.page-loaded .slider {
  filter: blur(0);
  transform: scale(1);
}

.page-loaded .page-header {
  filter: blur(0);
  transform: scale(1);
}

.page-loaded .all-cases-link {
  right: 30px;
}

/* PAGE TRANSTION */
.page-transition {
  width: 100%;
  height: 100%;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 13;
  opacity: 0;
  visibility: hidden;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  background: #e5d999;
}
.page-transition .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #1c1c1c;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.page-transition.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.page-transition.active .layer {
  width: 100%;
}

/* SITE NAVIGATION */
.site-navigation {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  background: #e5d999;
  padding-left: 120px;
}
.site-navigation .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #161619;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.site-navigation .inner {
  position: relative;
  z-index: 2;
  padding-left: 100px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transition-delay: 0.7s;
  opacity: 0;
}
.site-navigation .inner ul {
  margin: 0;
  padding: 0;
  animation-duration: 1s;
}
.site-navigation .inner ul li {
  display: block;
  margin: 5px 0;
  padding: 5px 0;
}
.site-navigation .inner ul li ul {
  margin-top: 0;
  margin-bottom: 10px;
  display: none;
}
.site-navigation .inner ul li ul li {
  display: block;
  margin: 0;
}
.site-navigation .inner ul li ul li a {
  font-size: 26px;
}
.site-navigation .inner ul li i {
  margin-left: 20px;
  font-size: 30px;
  color: #fff;
  display: inline-block;
  line-height: 1;
  transform: translateY(-5px);
  cursor: pointer;
}
.site-navigation .inner ul li small {
  width: 100%;
  display: block;
  color: #fff;
  opacity: 0.7;
  letter-spacing: 0.5px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  transform: translateY(-15px);
}
.site-navigation .inner ul li a {
  font-size: 90px;
  display: inline-block;
  font-weight: 800;
  color: #fff;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  font-family: "Fjalla One", sans-serif;
}
.site-navigation .inner ul li a:hover {
  color: #e5d999;
  text-decoration: none;
}
.site-navigation.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.site-navigation.active .layer {
  width: 100%;
}
.site-navigation.active .inner {
  opacity: 1;
}

/* SECTION TITLES */
.section-title {
  font-family: "Fjalla One", sans-serif;
  margin-bottom: 80px;
  line-height: 1.4;
  font-size: 4vw;
  letter-spacing: 2px;
  color: #fff;
}

/* SOCIAL MEDIA */
.social-media {
  margin: 0 auto;
  margin-bottom: 30px;
}

.social-media ul {
  display: block;
  margin: 0;
  padding: 0;
}
.social-media ul li {
  display: block;
  margin: 0 10px;
  padding: 0;
  list-style: none;
}
.social-media ul li a {
  color: #fff;
  font-size: 30px;
}
.social-media ul li a:hover {
  color: #e5d999;
  text-decoration: none;
}

/* ALL CASES */
.all-cases {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 3;
  background: #e5d999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.all-cases .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #161619;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.all-cases .inner {
  position: relative;
  z-index: 2;
  padding-left: 220px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transition-delay: 0.7s;
  opacity: 0;
  width: 100%;
}
.all-cases .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 2;
}
.reservation-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform: translateX(-10%);
}

.reservation-title {
    font-family: "Fjalla One", sans-serif;
    font-size: 10vw;
    font-weight: 800;
    line-height: 1;
    margin-top: -40px;
    transition: opacity 0.3s ease-in-out;
}

.reservation-subtitle {
    font-family: "Fjalla One", sans-serif;
    font-size: 5vw;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    transition: opacity 0.3s ease-in-out;
}

.contact-details {
    margin-top: 180px;
}

.contact-link {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 2vw;
    margin: 5px 0;
    transition: opacity 0.3s ease-in-out;
    font-family: "Fjalla One", sans-serif;
}

.contact-link:hover {
    opacity: 0.7;
}

.image-carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    transform: perspective(1200px) rotate(358deg);
}

.image-ticker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    display: flex;
    animation: ticker 10s linear infinite;
    animation-delay: -5s;
}
.image-ticker li {
    flex-shrink: 0;
    width: 400px;
    height: 250px;
    margin: 0 10px;
    border-radius: 15px;
    overflow: hidden;
}
.image-ticker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-ticker video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes ticker {
    0% {
        transform: translate(-50%, -50%) translateX(0);
    }
    100% {
        transform: translate(-50%, -50%) translateX(-50%);
    }
}
.all-cases.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.all-cases.active .layer {
  width: 100%;
}
.all-cases.active .inner {
  opacity: 1;
}

/* ALL CASES LINK */
.all-cases-link {
  position: absolute;
  right: -100%;
  top: 30px;
  z-index: 5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1s;
  cursor: pointer;
}
.all-cases-link span {
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  margin-right: 10px;
  font-size: 24px;
}
.all-cases-link b {
  width: 40px;
  height: 40px;
  line-height: 44px;
  font-size: 25px;
  font-weight: 300;
  display: inline-block;
  background: #fff;
  color: #1c1c1c;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.all-cases-link b.active {
    transform: rotate(45deg);
}
.all-cases-link b:hover {
  background: #e5d999;
  text-decoration: none;
  color: #fff;
}

/* LEFT SIDE */
.left-side {
  width: 120px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 10;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1s;
  opacity: 0;
}
.left-side .logo {
  display: inline-block;
  margin-bottom: 30px;
}
.left-side .logo img {
  width: 90px;
}
.left-side .hamburger {
  margin: 0 auto;
  margin-bottom: auto;
}
.left-side .follow-us {
  display: none;
  width: 100px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  text-align: center;
  transform: rotate(-90deg);
  margin: auto;
  cursor: pointer;
}
.left-side .equalizer {
  margin: 0 auto;
}

/* SLIDER */
.slider {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(1.2);
  filter: blur(20px);
  transition-delay: 0.8s;
}
.slider .swiper-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.slider .swiper-container .swiper-slide {
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.slider .swiper-container .swiper-slide video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}
.slider .gallery-top {
  height: 100%;
  width: 100%;
  background: #1c1c1c;
}
.slider .gallery-thumbs {
  width: calc(100% - 240px);
  display: flex;
  flex-wrap: wrap;
  margin: 0 120px;
  padding-bottom: 30px;
  z-index: 9;
  position: absolute;
  bottom: 30%;
  right: 0;
  height: auto;
  color: #fff;
}
.slider .gallery-thumbs .swiper-slide {
  width: 90%;
  height: 100%;
  opacity: 0.4;
  text-align: center;
  filter: blur(3px);
}
.slider .gallery-thumbs .swiper-slide span {
  margin-left: 50%;
  transform: translateX(-50%);
  float: left;
  font-size: 3vw;
  line-height: 5vw;
  font-weight: 800;
  font-family: "Fjalla One", sans-serif;
}
.slider .gallery-thumbs .swiper-slide a {
  display: none;
  font-size: 13px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 5px;
  position: relative;
  margin-top: 10px;
}
.slider .gallery-thumbs .swiper-slide a:before {
  content: "";
  width: 20px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.slider .gallery-thumbs .swiper-slide a:hover {
  text-decoration: none;
}
.slider .gallery-thumbs .swiper-slide a:hover:before {
  width: 100%;
}
.slider .gallery-thumbs .swiper-slide-active {
  width: 100%;
  opacity: 1;
  transform: scale(1.4);
  filter: blur(0px);
}
.slider .gallery-thumbs .swiper-slide-active span {
  font-size: 5vw;
}
.slider .gallery-thumbs .swiper-slide-active a {
  display: inline-block;
}

.swiper-slide-logo {
    max-width: 80%; /* Ogranicz szerokość logo */
    height: auto; /* Zachowaj proporcje */
    display: block; /* Upewnij się, że jest elementem blokowym */
    margin: 0 auto 20px; /* Wyśrodkuj i dodaj margines na dole */
    filter: brightness(0) invert(1); /* Zmień kolor na biały */
}

@media (max-width: 767px) {
    .swiper-slide-logo {
        max-width: 60%; /* Mniejsze logo na mobile */
        margin-bottom: 10px;
    }
}

.slider .swiper-button-prev {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 140px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.slider .swiper-button-next {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 60px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.slider .slide-progress {
  width: 220px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin-left: -110px;
  z-index: 3;
  text-align: center;
}
.slider .slide-progress span {
  display: inline-block;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
}
.slider .slide-progress .swiper-pagination {
  width: 160px;
  height: 2px;
  margin: auto 10px;
  display: inline-block;
  position: static;
  background: rgba(255, 255, 255, 0.3);
}
.slider .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
  background: #fff;
}

/* VIDEO HERO */
.video-hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.video-hero .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #1c1c1c;
}
.video-hero .video-bg video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}
.video-hero .inner {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  z-index: 2;
}
.video-hero .inner span {
  width: 100%;
  float: left;
  font-size: 8vw;
  line-height: 5vw;
  font-weight: 800;
  color: #fff;
  margin-bottom: 30px;
}
.video-hero .inner a {
  font-size: 19px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
}
.video-hero .inner a:hover {
  text-decoration: none;
  color: #e5d999;
}

/* CAROUSEL HERO */
.carousel-hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.carousel-hero .carousel-slider {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.carousel-hero .carousel-slider .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  background-size: cover;
  background-position: center;
}
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active .inner {
  opacity: 1;
}
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active:after {
  opacity: 0.4;
}
.carousel-hero .carousel-slider .swiper-slide:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #1c1c1c;
  opacity: 0.7;
}
.carousel-hero .carousel-slider .swiper-slide .inner {
  width: 100%;
  display: block;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 2;
  opacity: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.carousel-hero .carousel-slider .swiper-slide .inner h2 {
  width: 100%;
  float: left;
  font-size: 4vw;
  line-height: 5vw;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.carousel-hero .carousel-slider .swiper-slide .inner a {
  font-size: 19px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
}
.carousel-hero .carousel-slider .swiper-slide .inner a:hover {
  text-decoration: none;
  color: #e5d999;
}
.carousel-hero .swiper-button-prev {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 120px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.carousel-hero .swiper-button-next {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 40px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.carousel-hero .slide-progress {
  width: 220px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin-left: -110px;
  z-index: 3;
  text-align: center;
}
.carousel-hero .slide-progress span {
  display: inline-block;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
}
.carousel-hero .slide-progress .swiper-pagination {
  width: 160px;
  height: 2px;
  margin: auto 10px;
  display: inline-block;
  position: static;
  background: rgba(255, 255, 255, 0.3);
}
.carousel-hero .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
  background: #fff;
}

/* PAGE HEADER */
.page-header {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: #161619;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(1.2);
  filter: blur(20px);
  transition-delay: 0.8s;
}
.page-header .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.page-header .video-bg video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
}
.page-header .inner {
  width: 100%;
  padding-left: 220px;
  position: relative;
  z-index: 2;
}
.page-header .inner h1 {
  color: #fff;
  font-weight: 800;
  font-size: 10vw;
  letter-spacing: -3px;
}
.page-header .inner p {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.5px;
}

/* INTRO */
.intro {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  color: #fff;
  background: #161619;
}
.intro .col-lg-7 {
  padding-left: 10%;
}
.intro h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 19px;
}
.intro h6:after {
  content: "";
  width: 70px;
  height: 1px;
  background: #fff;
  display: inline-block;
  margin-left: 15px;
  margin-bottom: 7px;
}
.intro b {
  font-size: 120px;
  line-height: 1;
  font-family: "Fjalla One", sans-serif;
  float: left;
  font-weight: 400;
  margin-right: 20px;
}
.intro h4 {
  font-weight: 600;
}
.intro p {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 35px;
}
.intro small {
  display: block;
  opacity: 0.7;
  margin-bottom: 50px;
}
.intro a {
  color: #fff;
  font-size: 17px;
  border-bottom: 1px solid #e5d999;
  padding-bottom: 5px;
}
.intro a:hover {
  border-color: #fff;
}

/* INTRO IMAGE */
.intro-image {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 150px;
  position: relative;
}
.intro-image:before {
  content: "";
  width: 100%;
  height: 100px;
  background: #161619;
  position: absolute;
  left: 0;
  top: 0;
}
.intro-image.light:before {
  background: #fff;
}
.intro-image .office-slider {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #1c1c1c;
  position: relative;
  overflow: hidden;
}
.intro-image figure {
  width: 100%;
  display: block;
  margin: 0;
  position: relative;
}
.intro-image figure img {
  width: 100%;
  opacity: 0.7;
}
.intro-image figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  line-height: 1;
}
.intro-image figure figcaption h6 {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

/* PROCESS */
.process {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  text-align: center;
}
.process .odometer {
  font-family: "Fjalla One", sans-serif;
  font-size: 5vw;
  line-height: 1;
}
.process .symbol {
  width: 100%;
  display: block;
  font-size: 12px;
}
.process small {
  width: 80%;
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  margin: 20px 10%;
  font-weight: 600;
}

/* ICON CONTENT BLOCK */
.icon-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  color: #fff;
  background: #1c1c1c;
}
.icon-content-block .container {
  position: relative;
  z-index: 2;
}
.icon-content-block .content-block {
  width: 100%;
  display: block;
  margin: 0;
  padding: 50px 30px;
  position: relative;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.icon-content-block .content-block.selected {
  background: #161619;
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
}
.icon-content-block .content-block.selected:before {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  right: -25px;
  bottom: -30px;
  z-index: -1;
  background: url(../images/dot-pattern.webp) right;
  background-size: 10px;
}
.icon-content-block .content-block figure {
  width: 100%;
  display: block;
  margin-bottom: 40px;
}
.icon-content-block .content-block figure img {
  height: 75px;
}
.icon-content-block .content-block h6 {
  display: block;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.icon-content-block .content-block ul {
  margin: 0;
  padding: 0;
}
.icon-content-block .content-block ul li {
  padding: 3px 0;
  opacity: 0.7;
  list-style: none;
  font-weight: 300;
}

/* TEXT CONTENT BLOCK */
.text-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.text-content-block .col-md-4 {
  margin: 20px 0;
}
.text-content-block .section-title {
  margin-bottom: 30px;
}
.text-content-block h5 {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  padding-right: 20%;
  margin-bottom: 70px;
}
.text-content-block small {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: -20px;
  opacity: 0.1;
  display: block;
}
.text-content-block h6 {
  font-size: 20px;
  font-family: "Fjalla One", sans-serif;
}
.text-content-block p {
  padding-right: 20%;
  margin-bottom: 0;
  line-height: 1.5;
}

/* TESTIMONIALS */
.testimonials {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 150px;
  color: #fff;
  background: #161619;
  position: relative;
}
.testimonials:before {
  content: "";
  width: 100%;
  height: 50px;
  background: #1c1c1c;
  position: absolute;
  left: 0;
  top: 0;
}
.testimonials .section-title {
  margin-bottom: 0;
}
.testimonials .testimonials-slider {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}
.testimonials .swiper-pagination {
  width: 100px;
  right: 80px;
  left: auto;
  bottom: 115px;
  text-align: right;
}
.testimonials .swiper-pagination-bullet {
  background: #1c1c1c;
}
.testimonials .swiper-pagination-bullet:hover {
  border-color: #1c1c1c;
}
.testimonials .swiper-pagination-bullet-active {
  border-color: #1c1c1c;
  background: none;
}
.testimonials .testimonial {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 80px;
  background: #e5d999;
  color: #1c1c1c;
}
.testimonials .testimonial blockquote {
  font-size: 21px;
  line-height: 1.7;
  font-weight: 300;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.testimonials .testimonial .reviewer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.testimonials .testimonial .reviewer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  float: left;
}
.testimonials .testimonial .reviewer .reviewer-infos {
  width: calc(100% - 65px);
  float: left;
}
.testimonials .testimonial .reviewer h6 {
  display: block;
  font-weight: 600;
}
.testimonials .testimonial .reviewer small {
  display: block;
}

/* TEAM */
.team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 150px;
  padding-bottom: 100px;
  color: #fff;
  background: #161619;
  position: relative;
  z-index: 2;
}
.team:before {
  content: "";
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
}
.team .reveal-effect.masker:after {
  background: #1c1c1c;
}
.team h5 {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
}
.team figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: -100px;
}
.team figure:hover ul {
  opacity: 1;
  visibility: visible;
}
.team figure img {
  width: 100%;
}
.team figure figcaption {
  display: block;
  color: #1c1c1c;
  margin-top: 20px;
}
.team figure figcaption h6 {
  display: block;
  font-weight: 600;
}
.team figure figcaption small {
  display: block;
  opacity: 0.5;
}
.team figure ul {
  width: 80%;
  display: flex;
  margin: 10%;
  padding: 0;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 60px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.team figure ul li {
  flex: 1;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  text-align: center;
  border-right: 1px solid #eee;
}
.team figure ul li:last-child {
  border-right: 0;
}
.team figure ul li a {
  color: #1c1c1c;
  font-size: 13px;
  padding: 5px;
}
.team figure ul li a:hover {
  color: #e5d999;
}


/* CASE STUDY */
.case-study {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.case-study h6 {
  font-weight: 600;
  margin-top: 30px;
}
.case-study h5 {
  font-family: "Fjalla One", sans-serif;
  font-size: 5vw;
  text-align: center;
  margin-top: 50px;
  text-transform: uppercase;
}
.case-study p {
  margin-bottom: 20px;
  line-height: 1.5;
}
.case-study figure {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.case-study figure img {
  width: 100%;
}
.case-study figure video {
  width: 100%;
}
.case-study .container-fluid {
  margin-top: 80px;
  padding-left: 30px;
  padding-right: 30px;
}

/* BLOG */
.blog {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: #fff;
}
.blog .col-lg-9 {
  padding-right: 60px;
}
.blog .sidebar {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}
.blog .sidebar .widget {
  width: 100%;
  display: block;
  border-left: 1px solid #eee;
  margin-bottom: 40px;
  padding-left: 30px;
  padding-bottom: 10px;
}
.blog .sidebar .widget .title {
  display: block;
  font-weight: 800;
  font-size: 19px;
  padding: 15px 0;
  position: relative;
}
.blog .sidebar .widget .title:before {
  content: "";
  width: 1px;
  height: 100%;
  background: #1c1c1c;
  position: absolute;
  left: -31px;
  top: 0;
}
.blog .sidebar .widget p {
  margin: 0;
}
.blog .sidebar .widget form {
  width: 100%;
}
.blog .sidebar .widget form input[type=text] {
  width: 100%;
  margin-bottom: 10px;
}
.blog .sidebar .widget .categories {
  width: 100%;
  margin: 0;
  padding: 0;
}
.blog .sidebar .widget .categories li {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}
.blog .sidebar .widget .categories li span {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #ccc;
  color: #fff;
  margin-right: 15px;
  margin-left: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}
.blog .sidebar .widget .categories li a {
  color: #1c1c1c;
  margin-left: 0;
  font-weight: 600;
}
.blog .sidebar .widget .tags {
  width: 100%;
  display: block;
  margin-bottom: 0;
  padding: 0;
}
.blog .sidebar .widget .tags li {
  display: inline-block;
  list-style: none;
  margin-bottom: 5px;
}
.blog .sidebar .widget .tags li a {
  font-weight: 600;
  font-size: 11px;
  background: #1c1c1c;
  color: #fff;
  line-height: 1;
  padding: 3px 6px;
}
.blog .sidebar .widget .tags li a:hover {
  color: #e5d999;
  text-decoration: none;
}
.blog .sidebar .widget .mini-works {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.blog .sidebar .widget .mini-works li {
  width: 33.3333%;
  display: inline-block;
  margin: 0;
  padding: 4px;
  list-style: none;
}
.blog .post {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 50px 0;
}
.blog .post.single {
  position: relative;
}
.blog .post.single .post-image {
  width: 100%;
  margin-bottom: 50px;
}
.blog .post.single .post-content {
  width: 100%;
  padding: 0 60px;
}
.blog .post.single .post-content .post-title {
  font-size: 4vw;
  line-height: 1.4;
}
.blog .post:nth-child(even) {
  position: relative;
}
.blog .post:nth-child(even) .post-image {
  order: 2;
}
.blog .post:nth-child(even) .post-image:before {
  right: auto;
  left: -25px;
}
.blog .post:nth-child(even) .post-content {
  order: 1;
  padding-right: 60px;
  padding-left: 0;
  text-align: right;
}
.blog .post .post-image {
  width: 45%;
  margin: 0;
  position: relative;
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
}
.blog .post .post-image img {
  position: relative;
  width: 100%;
}
.blog .post .post-image:before {
  content: "";
  width: 90%;
  height: 60%;
  position: absolute;
  right: -25px;
  bottom: -30px;
  z-index: 0;
  background: url(../images/dot-pattern.webp) right;
  background-size: 10px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  opacity: 0.2;
}
.blog .post .post-content {
  width: 55%;
  padding-left: 60px;
}
.blog .post .post-content h5 {
  font-weight: 600;
  margin-top: 30px;
}
.blog .post .post-content ul {
  margin-bottom: 30px;
  padding-left: 20px;
}
.blog .post .post-content ul li {
  margin: 0;
}
.blog .post .post-content .social-share {
  width: 100%;
  float: left;
  padding: 0;
  margin-bottom: 40px;
  text-align: center;
}
.blog .post .post-content .social-share li {
  float: left;
  margin-right: 5px;
  padding: 0;
  list-style: none;
}
.blog .post .post-content .social-share li.facebook a {
  background: #475993;
}
.blog .post .post-content .social-share li.twitter a {
  background: #76a9ea;
}
.blog .post .post-content .social-share li.google-plus a {
  background: #f34a38;
}
.blog .post .post-content .social-share li.linkedin a {
  background: #0077b7;
}
.blog .post .post-content .social-share li.youtube a {
  background: #f61c0d;
}
.blog .post .post-content .social-share li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  float: left;
  background: #1c1c1c;
  color: #fff;
  border: none;
  border-radius: 0;
}
.blog .post .post-content .image-left {
  width: 40%;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.blog .post .post-content .image-full {
  width: 100%;
  display: block;
  margin: 30px 0;
}
.blog .post .post-content .post-date {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  opacity: 0.5;
}
.blog .post .post-content .post-title {
  width: 100%;
  display: block;
  margin-bottom: 20px;
  font-size: 3vw;
  font-weight: 800;
}
.blog .post .post-content .post-title a {
  color: #161619;
}
.blog .post .post-content .post-title a:hover {
  color: #e5d999;
  text-decoration: none;
}
.blog .post .post-content .post-author {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}
.blog .post .post-content .post-author img {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 15px;
  border-radius: 50%;
}
.blog .post .post-content .post-author span {
  display: inline-block;
  color: #A7A7A7;
}
.blog .post .post-content .post-author span a {
  color: #1c1c1c;
  font-size: 15px;
}
.blog .post .post-content .post-author span a:hover {
  color: #1c1c1c;
}
.blog .post .post-content .post-categories {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  padding: 0;
}
.blog .post .post-content .post-categories li {
  display: inline-block;
  list-style: none;
}
.blog .post .post-content .post-categories li a {
  font-weight: 600;
  font-size: 11px;
  background: #1c1c1c;
  color: #fff;
  line-height: 1;
  padding: 3px 6px;
}
.blog .post .post-content .post-categories li a:hover {
  color: #e5d999;
  text-decoration: none;
}
.blog .post .post-content .post-link {
  font-family: "Fjalla One", sans-serif;
  border-bottom: 2px solid #1c1c1c;
  padding-bottom: 5px;
}
.blog .post .post-content .post-link:hover {
  color: #e5d999;
  text-decoration: none;
}

/* CLIENTS */
.clients {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
  box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.3);
}
.clients ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.clients ul li {
  width: 33.33333%;
  margin: 0;
  padding: 40px;
  list-style: none;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
}

/* CONTACT */
.contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.contact h6 {
  font-weight: 600;
  margin-top: 30px;
}
.contact address {
  display: block;
}
.contact address p {
  margin: 0;
}
.contact address a {
  text-decoration: underline;
}
.contact .contact-form {
  width: 100%;
  display: block;
}
.contact .contact-form #contact {
  display: block;
}
.contact .contact-form #contact .form-group {
  display: block;
  position: relative;
  margin-bottom: 35px;
}
.contact .contact-form #contact .form-group span {
  width: 100%;
  line-height: 58px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 20px;
  z-index: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.contact .contact-form #contact .form-group span.label-up {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group input[type=text] {
  width: 400px;
  background: none;
  position: relative;
  z-index: 2;
}
.contact .contact-form #contact .form-group input:focus + span {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group textarea {
  width: 500px;
  background: none;
  position: relative;
  z-index: 2;
}
.contact .contact-form #contact .form-group textarea:focus + span {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group label.error {
  width: 100%;
  color: red;
  margin-top: 5px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
}
.contact .contact-form #success, .contact .contact-form #error {
  display: none;
  float: left;
}
.contact .contact-form #error {
  background: red;
  color: #fff;
}
.contact .contact-form #success {
  background: green;
  color: #fff;
}
.contact .contact-form .alert {
  border: none;
  border-radius: 0;
  padding: 20px 30px;
}
.contact .map {
  width: 80%;
  height: 400px;
  display: block;
  background: #1c1c1c;
}
.contact .map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* New Footer Styles */
.new-footer {
    background-color: #000;
    color: #fff;
    padding: 80px 50px 30px;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    position: relative;
}

.new-footer::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 500px;
    height: 100%;
    background-image: url(../images/FIBI.webp);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    /*filter: invert(1); */
    opacity: 0.2;
    z-index: 1;
}

.footer-top {
    text-align: center;
    margin-bottom: 100px;
}

.footer-top p {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-title {
    font-family: "Fjalla One", sans-serif;
    font-size: 10vw;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    transition: transform 0.3s ease-in-out;
}

.footer-title:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    padding: 0 20px;
}

.footer-column h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-column p, .footer-column ul {
    font-size: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2;
}

.footer-column a {
    color: #fff;
    text-decoration: none;
}

.footer-column a:hover {
    text-decoration: underline;
}

.footer-bar-new {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
  .section-title, .values-section h2, .offer-section h2 {
    font-size: 8vw;
    margin-bottom: 50px;
  }

  .page-header .inner {
    padding-left: 160px;
  }

  .all-cases .inner {
    padding-left: 160px;
  }

  .social-media .inner ul li {
    font-size: 4vw;
  }

  .all-cases .inner ul li {
    font-size: 10vw;
  }

  .works {
    padding: 80px 0;
  }

  .works ul li {
    width: 50%;
  }

  .slider .gallery-thumbs .swiper-slide-active span {
    width: 100%;
    font-size: 8vw;
    line-height: 11vw;
  }

  .intro .col-lg-7 {
    padding-left: 15px;
    margin-top: 50px;
  }

  .text-content-block {
    padding: 80px 0;
  }

  .intro-image {
    padding-bottom: 80px;
  }

  .icon-content-block .col-lg-3:nth-child(3) {
    margin-top: 0;
  }

  .icon-content-block .content-block {
    padding: 30px 20px;
  }

  .process {
    margin-bottom: 80px;
  }

  .process .col-lg-3:first-child {
    margin-bottom: 40px;
  }

  .process .odometer {
    font-size: 8vw;
  }

  .testimonials {
    margin-top: 80px;
  }

  .testimonials:before {
    display: none;
  }

  .testimonials .col-lg-6:first-child {
    order: 2;
  }

  .testimonials .col-lg-6:last-child {
    order: 1;
  }

  .testimonials .testimonials-slider {
    margin-top: 40px;
    width: 100%;
  }

  .testimonials .swiper-pagination {
    bottom: 65px;
  }

  .testimonials .testimonial {
    padding: 50px 80px;
  }

  .testimonials .section-title {
    margin-top: 80px;
  }

  .team {
    padding: 80px 0;
  }

  .team:before {
    display: none;
  }

  .team .col {
    width: 33.33333%;
    flex-basis: auto;
    flex-grow: inherit;
  }

  .team figure {
    margin: 30px 0;
  }

  .team figure figcaption {
    color: #fff;
  }

  .team h5 {
    margin-bottom: 40px;
    margin-top: 0;
  }

  .intro {
    padding: 80px 0;
  }

  .clients {
    padding: 80px 0;
  }

  .blog {
    padding: 30px 0;
  }

  .blog .col-lg-9 {
    padding-right: 15px;
  }

  .contact {
    padding: 80px 0;
  }

  .contact .map {
    width: 100%;
    margin: 50px 0;
  }

  .contact .contact-form {
    margin-top: 30px;
  }

  .footer h6 {
    font-size: 26px;
  }

  .footer ul {
    width: 100%;
    float: left;
    margin-bottom: 30px;
  }

  .footer ul li {
    margin-left: 0;
    margin-right: 10px;
  }
}
/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .section-title, .values-section h2, .offer-section h2 {
    font-size: 9vw;
    margin-bottom: 40px;
  }

  .slider .gallery-thumbs {
    width: 100%;
    margin: 0;
  }

  .page-header .inner {
    padding-left: 100px;
  }

  .page-header .inner p {
    font-size: 17px;
    padding-right: 10%;
  }

  .all-cases .inner {
    padding-left: 100px;
  }

  .all-cases .inner ul li {
    font-size: 13vw;
  }

  .site-navigation .inner {
    padding-left: 0;
  }

  .site-navigation .inner ul li {
    line-height: 1;
  }

  .site-navigation .inner ul li a {
    font-size: 34px;
  }

  .site-navigation .inner ul li i {
    font-size: 20px;
    margin-left: 13px;
  }

  .site-navigation .inner ul li small {
    display: none;
  }

  .site-navigation .inner ul li ul {
    margin-top: 10px;
  }

  .site-navigation .inner ul li ul li a {
    font-size: 22px;
  }

  .left-side {
    width: 80px;
    border-right: none;
  }

  .left-side .follow-us {
    display: none;
  }

  .slider .slide-progress {
    display: none;
  }

  .all-cases-link {
    right: 15px;
  }

  .swiper-button-next {
    right: 20px;
  }

  .swiper-button-prev {
    right: 90px;
  }

  .icon-content-block .col-lg-3:nth-child(3) {
    margin: 50px 0;
  }

  .icon-content-block .content-block {
    padding: 0;
  }

  .icon-content-block .content-block.selected {
    background: none;
    box-shadow: none;
  }

  .icon-content-block .content-block.selected:before {
    display: none;
  }

  .testimonials .testimonial {
    padding: 70px 50px;
  }

  .testimonials .swiper-pagination {
    bottom: 85px;
  }

  .team .col {
    width: 50%;
  }

  .works ul li {
    width: 100%;
  }

  .works ul li:nth-child(2n+2) {
    margin-top: 0;
  }

  .works ul li:nth-child(3n+3) {
    margin-top: 0;
  }

  .clients ul li {
    padding: 30px 20px;
    width: 50%;
  }

  .clients ul li:last-child {
    display: none;
  }

  .blog .post .post-image {
    width: 100%;
    margin-bottom: 40px;
  }

  .blog .post .post-content {
    width: 100%;
    padding: 0 !important;
  }

  .blog .post:nth-child(even) {
    text-align: left;
  }

  .blog .post:nth-child(even) .post-image {
    order: 1;
  }

  .blog .post:nth-child(even) .post-content {
    order: 2;
    text-align: left;
  }

  .blog .post .post-content .post-title {
    font-size: 7vw;
  }

  .blog .post.single .post-content .post-title {
    font-size: 8vw;
  }

  .footer h2 {
    font-size: 7vw;
  }

  .footer h2 br {
    display: none;
  }

  .footer .footer-bar .creation {
    width: 100%;
    display: block;
    margin-top: 5px;
  }

  .all-cases .contact-details {
    margin-top: 120px;
  }

  .all-cases .contact-link {
    font-size: 5vw;
    margin: 10px 0;
  }

  .all-cases .reservation-title {
    font-size: 15vw;
    margin-top: -20px;
  }

  .all-cases .reservation-subtitle {
    font-size: 8vw;
    margin-bottom: 40px;
  }
}
/* ANIMATIONS */
@keyframes texteffect {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes texteffect {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes show-img-1 {
  0%, 66.6% {
    visibility: hidden;
  }
  100%, 66.7% {
    visibility: visible;
  }
}
@keyframes show-img-1 {
  0%, 66.6% {
    visibility: hidden;
  }
  100%, 66.7% {
    visibility: visible;
  }
}
@-webkit-keyframes slide-bg-2 {
  33.3% {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.05, 1);
    transform: scale(0.05, 1);
  }
  66.6% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  66.7% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
}
@keyframes slide-bg-2 {
  33.3% {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.05, 1);
    transform: scale(0.05, 1);
  }
  66.6% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  66.7% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
}

/*# sourceMappingURL=style.css.map */



.about-us-cards {
    padding: 100px 0;
}

.about-us-cards .card {
    position: sticky;
    top: 100px;
    margin-bottom: 100px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-us-cards .card img {
    width: 100%;
    height: auto;
}

.about-us-cards .card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
}

/* O NAS - NOWE STYLE */
.page-header {
    padding: 120px 0;
    text-align: center;
    background-color: #f8f9fa;
}

.page-header h1 {
    font-weight: 800;
    font-family: "Fjalla One", sans-serif;
    color: #343a40;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.page-header h1:hover {
    transform: scale(1.05);
}

.page-header .heading-main {
    display: block;
    font-size: 5rem;
    color: #ffffff;
}

.page-header .heading-sub {
    display: block;
    font-size: 2.5rem;
    font-weight: 300;
    color: #ffffff;
}

.page-header p {
    font-size: 1.25rem;
    font-weight: 300;
    color: #e7e7e7;
    max-width: 800px;
    margin: 0 auto;
}

.values-section {
    padding: 100px 40px 100px 160px;
    box-sizing: border-box;
    width: 100%;
}

.values-section .container-fluid {
    padding: 0;
}

.values-section h2, .offer-section h2 {
    text-align: center;
    font-size: 4.5rem;
    font-weight: 800;
    font-family: "Fjalla One", sans-serif;
    color: #fff;
    margin-bottom: 80px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0;
}

.price-grid {
    grid-template-columns: repeat(2, 1fr); /* Dwie kolumny dla cennika */
}

.value-item {
    text-align: center;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: all 0.4s ease;
    background-color: transparent;
}

.value-item:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.03);
}

.value-item h3 {
    font-size: 1.75rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #fff;
    margin-bottom: 15px;
}

.value-item p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 1.1rem;
}

/* DYNAMICZNE TŁO STOPKI */
.page-about .new-footer::before {
    background-image: url(../images/TINA.webp);
}

/* Gallery Section Styles */
.gallery-section {
    padding: 100px 40px 100px 160px;
    background-color: #1c1c1c;
    box-sizing: border-box;
    width: 100%;
}

.offer-section {
    background-color: #1c1c1c;
    color: #fff;
    padding: 100px 40px 100px 160px;
    box-sizing: border-box;
    width: 100%;
}

.faq-section {
    background-color: #1c1c1c;
    color: #fff;
    padding: 100px 40px 100px 160px;
    box-sizing: border-box;
    width: 100%;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

.gallery-card {
    display: block;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    width: calc(50% - 30px);
    margin: 15px;
}

.gallery-image-wrapper {
    width: 100%;
    padding-top: 125%; /* Aspect ratio 4:5 */
    position: relative;
    overflow: hidden;
}

.gallery-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.gallery-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #333;
}

.caption-content h2 {
    font-family: "Fjalla One", sans-serif;
    font-size: 1.5rem;
    margin: 0 0 5px;
}

.caption-content .short-desc {
    font-size: 1rem;
    color: #aaa;
    margin: 0;
}

.caption-content .full-desc {
    display: none; /* Ukryty domyślnie */
    font-size: 1rem;
    color: #fff;
    margin-top: 10px;
}

.plus-icon {
    width: 40px;
    height: 40px;
    background-color: #222;
    position: relative;
    transition: transform 0.3s ease;
}

.gallery-card:hover .plus-icon {
    transform: rotate(45deg);
}

.plus-icon .plus-line {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
}

.plus-icon .plus-line:first-child {
    width: 2px;
    height: 20px;
    margin-left: -1px;
    margin-top: -10px;
}

.plus-icon .plus-line:last-child {
    width: 20px;
    height: 2px;
    margin-left: -10px;
    margin-top: -1px;
}

@media (max-width: 991px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .gallery-section, .values-section {
        padding: 100px 40px 100px 160px; /* Ujednolicone paddingi */
        box-sizing: border-box;
        width: 100%;
    }
    
    .faq-section .accordion-item {
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        background-color: #222327;
    }
    
    .faq-section .accordion-header {
        background-color: #222327;
        border-bottom: none;
    }
    
    .faq-section .accordion-button {
        background-color: #222327;
        color: #fff;
        font-family: "Fjalla One", sans-serif;
        font-size: 1.2rem;
        padding: 20px 25px;
        border: none;
        text-align: left;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .faq-section .accordion-button:not(.collapsed) {
        background-color: #e5d999;
        color: #1c1c1c;
    }
    
    .faq-section .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }
    
    .faq-section .accordion-button::after {
        filter: invert(1);
        transform: scale(1.2);
    }
    
    .faq-section .accordion-button:not(.collapsed)::after {
        filter: invert(0);
    }
    
    .faq-section .accordion-body {
        padding: 60px 25px; /* Zwiększony padding góra/dół */
        background-color: #1c1c1c;
        color: #ffffff; /* Zmieniono kolor czcionki na biały */
        font-family: "Poppins", sans-serif;
        font-size: 1.4rem; /* Zwiększono rozmiar czcionki */
        line-height: 1.8;
    }
    
    .faq-section .accordion-item {
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        background-color: #222327;
    }
    
    .faq-section .accordion-header {
        background-color: #222327;
        border-bottom: none;
    }
    
    .faq-section .accordion-button {
        background-color: #222327;
        color: #fff;
        font-family: "Fjalla One", sans-serif;
        font-size: 1.2rem;
        padding: 20px 25px;
        border: none;
        text-align: left;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .faq-section .accordion-button:not(.collapsed) {
        background-color: #e5d999;
        color: #1c1c1c;
    }
    
    .faq-section .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }
    
    .faq-section .accordion-button::after {
        filter: invert(1);
        transform: scale(1.2);
    }
    
    .faq-section .accordion-button:not(.collapsed)::after {
        filter: invert(0);
    }
    
    .faq-section .accordion-body {
        padding: 50px 25px; /* Zwiększony padding góra/dół */
        background-color: #1c1c1c;
        color: #ffffff;
        font-family: "Poppins", sans-serif;
        font-size: 1.4rem;
        line-height: 1.8;
    }
    
    .faq-section .accordion-item {
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        background-color: #222327;
    }
    
    .faq-section .accordion-header {
        background-color: #222327;
        border-bottom: none;
    }
    
    .faq-section .accordion-button {
        background-color: #222327;
        color: #fff;
        font-family: "Fjalla One", sans-serif;
        font-size: 1.2rem;
        padding: 20px 25px;
        border: none;
        text-align: left;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .faq-section .accordion-button:not(.collapsed) {
        background-color: #e5d999;
        color: #1c1c1c;
    }
    
    .faq-section .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }
    
    .faq-section .accordion-button::after {
        filter: invert(1);
        transform: scale(1.2);
    }
    
    .faq-section .accordion-button:not(.collapsed)::after {
        filter: invert(0);
    }
    
    .faq-section .accordion-body {
        padding: 50px 25px; /* Zwiększony padding góra/dół */
        background-color: #1c1c1c;
        color: #ffffff;
        font-family: "Poppins", sans-serif;
        font-size: 1.4rem;
        line-height: 1.8;
    }
    
    .faq-section .accordion-item {
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        background-color: #222327;
    }
    
    .faq-section .accordion-header {
        background-color: #222327;
        border-bottom: none;
    }
    
    .faq-section .accordion-button {
        background-color: #222327;
        color: #fff;
        font-family: "Fjalla One", sans-serif;
        font-size: 1.2rem;
        padding: 20px 25px;
        border: none;
        text-align: left;
        width: 100%;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .faq-section .accordion-button:not(.collapsed) {
        background-color: #e5d999;
        color: #1c1c1c;
    }
    
    .faq-section .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }
    
    .faq-section .accordion-button::after {
        filter: invert(1);
        transform: scale(1.2);
    }
    
    .faq-section .accordion-button:not(.collapsed)::after {
        filter: invert(0);
    }
    
    .faq-section .accordion-body {
        padding: 20px 25px;
        background-color: #1c1c1c;
        color: rgba(255, 255, 255, 0.7);
        font-family: "Poppins", sans-serif;
        font-size: 1rem;
        line-height: 1.6;
    }
}

@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .gallery-section, .values-section, .offer-section, .faq-section {
        padding: 60px 20px 60px 20px; /* Ujednolicone paddingi dla mobile */
        margin-bottom: 0; /* Usunięto zbędny margines */
    }
    .values-grid,
    .price-grid {
        grid-template-columns: 1fr !important; /* Jedna kolumna na mobile dla obu sekcji */
        gap: 15px;
        justify-content: center;
    }
    .gallery-container {
        grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
        gap: 15px;
    }
    .section-title, .values-section h2, .offer-section h2, .faq-section h2 {
        font-size: 5vw; /* Zmniejszono rozmiar nagłówka dla mobile */
    }
    .offer-section p {
        font-size: 0.9rem; /* Zmniejszono rozmiar tekstu dla mobile */
        line-height: 1.5;
        margin-bottom: 15px; /* Dostosowano margines dolny */
    }

    .faq-section .accordion-button {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .faq-section .accordion-body {
        font-size: 1rem; /* Zmniejszono rozmiar czcionki dla mobile */
        padding: 20px 20px; /* Zmniejszono padding góra/dół dla mobile */
    }
}


/* MAP STYLES */
.map-header {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.map-container-main {
    width: 100%;
    height: 100%;
}

.map-container {
  height: 100vh; /* Map takes 100% of the viewport height */
  width: 100%;
  border-radius: 0 !important;
}

html.liko-dark-active h3 a {
  color: #ffffff; /* Light color for address links in dark mode */
}

html.liko-dark-active h3 {
  color: #f0f0f0; /* Light color for h3 text itself in dark mode, if needed */
}

.floating-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicking through the images to the map */
    z-index: 5;
}

.floating-image-1, .floating-image-2 {
    position: absolute;
    width: 400px; /* Adjust size as needed */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: float 6s ease-in-out infinite;
}

.floating-image-1 {
    top: 10%;
    left: 8%;
}

.floating-image-2 {
    bottom: 10%;
    right: 5%;
    animation-delay: -3s; /* Stagger the animation */
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Hide floating images when an overlay is active */
body.overflow .floating-images {
    display: none;
}

@media (max-width: 767px) {
  .floating-images {
    display: none;
  }
}


/* CONTACT PAGE SECTION */
.contact-page-section {
    padding: 150px 40px 100px 160px;
    background-color: #1c1c1c;
    color: #fff;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.contact-page-section .section-title h2 {
    font-family: "Fjalla One", sans-serif;
    font-size: 5vw;
    font-weight: 800;
    margin-bottom: 20px;
}

.contact-page-section .section-title p {
    font-size: 1.2rem;
    color: #aaa;
    max-width: 600px;
    margin-bottom: 60px;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-info-col h4, .social-col h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.contact-info-col p a, .social-col ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.contact-info-col p a:hover, .social-col ul li a:hover {
    color: #e5d999;
}

.social-col ul {
    list-style: none;
    padding: 0;
}

.social-col ul li {
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .contact-page-section {
        padding-left: 140px;
        padding-right: 20px;
    }
    .contact-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .contact-page-section {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 120px;
    }
    .contact-page-section .section-title h2 {
        font-size: 11vw; /* Zwiększono rozmiar czcionki dla mobile */
        margin-top: 0; /* Upewnij się, że nie ma dodatkowego marginesu na górze */
    }
}

.page-contact .new-footer::before {
    background-image: url(../images/TINA.webp);
}

.contact-page-section .section-title h2 {
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.contact-page-section .section-title h2:hover {
    transform: scale(1.05);
    color: #e5d999;
}

.contact-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.contact-video-side {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contact-video-side::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    pointer-events: none;
    z-index: 1;

    /* 1. Użycie SVG do wygenerowania proceduralnego, niepowtarzalnego szumu */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="grainy" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23grainy)"/></svg>');

    /* 2. Użycie mix-blend-mode dla lepszego wkomponowania ziarna w obraz */
    mix-blend-mode: overlay;  /* Możesz też spróbować 'soft-light' lub 'screen' */
    opacity: 0.15;            /* Reguluj intensywność ziarna */

    /* 3. Płynniejsza i bardziej losowa animacja */
    animation: grain 8s steps(10, end) infinite;
}

/* Ulepszone klatki kluczowe animacji, które przesuwają warstwę z ziarnem */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(25%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

.contact-video-side video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-content-side {
    width: 50%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #1c1c1c;
    color: #fff;
}

@media (max-width: 991px) {
    .contact-container {
        flex-direction: column;
    }
    .contact-video-side, .contact-content-side {
        width: 100%;
    }
    .contact-video-side {
       height: 70vh; /* Ponownie zwiększono wysokość wideo na mobile */
   }
    .contact-content-side {
        height: auto; /* Zmieniono z 50vh na auto */
        padding: 80px 20px 80px; /* Zmniejszono padding na górze i na dole */
        text-align: center; /* Dodano wyśrodkowanie tekstu */
    }
}



/* Custom styles for contact page title */
.contact-title {
    font-size: 6vw; /* Duży rozmiar czcionki */
    font-weight: 800;
    font-family: "Fjalla One", sans-serif;
    color: #fff;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    cursor: pointer;
}

@media (max-width: 767px) {
    .contact-title {
        font-size: 9vw; /* Zmniejsz rozmiar czcionki dla mobile */
        margin-top: 40px; /* Dodaj margines na górze */
    }
}

.contact-title:hover {
    color: #e5d999; /* Zmiana koloru po najechaniu */
    transform: scale(1.05); /* Lekkie powiększenie */
}

.contact-subtitle {
    font-size: 1.1rem; /* Znacznie mniejszy rozmiar czcionki */
    color: #aaa;
    max-width: 500px;
    margin-top: 20px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .contact-subtitle {
        display: none; /* Ukryj na urządzeniach mobilnych */
    }
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .overlay {
  opacity: 1;
}
.gallery-item .text-content h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
}
.gallery-item .text-content p {
  margin: 0;
  font-size: 1rem;
}
.gallery-item .icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
}
.gallery-item .icon svg {
  width: 100%;
  height: 100%;
  fill: white;
}

.gallery-container-horizontal {
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow-x: auto;
}

.blur-effect {
    filter: blur(8px);
    transition: filter 0.3s ease-in-out;
}

#right-click-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#right-click-message {
    background-color: #1c1c1c;
    color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    border: 1px solid #e5d999;
    cursor: default;
}

#right-click-message h4 {
    color: #e5d999;
    font-size: 24px;
    margin-bottom: 15px;
}

#right-click-message p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.message-box-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

#right-click-message button {
    background-color: #e5d999;
    color: #1c1c1c;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

#right-click-message button:hover {
    background-color: #ffffff;
}

/* INTERACTIVE MAP STYLES */
#interactive-map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.map-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    filter: brightness(0.5); /* Przyciemnienie mapy */
}

.map-image.active-map {
    opacity: 1;
}

.map-points {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to go through to the map image if needed */
    z-index: 10;
}

.map-point {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    transition: all 0.3s ease;
    border: 3px solid #fff;
}

.map-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 25px rgba(0,0,0,1);
}

.point-home {
    background-color: #e5d999;
    animation: pulse 2s infinite;
    transform: translate(-50%, -50%) scale(1.2); /* Lekko większy */
    border-width: 4px; /* Grubsza ramka */
}
.point-nature { background-color: #2E8B57; } /* Zieleń morska */
.point-view { background-color: #B22222; } /* Ceglasty */
.point-culture { background-color: #4682B4; } /* Stalowy niebieski */
.point-fun { background-color: #8A2BE2; } /* Fioletowo-niebieski */

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 217, 153, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(229, 217, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 217, 153, 0); }
}

.map-popup {
    position: absolute;
    display: none; /* Ukryty domyślnie */
    width: 250px;
    background: #1a1a1d;
    color: #fff;
    border-radius: 8px;
    padding: 15px;
    z-index: 100;
    pointer-events: none;
    border: 1px solid #e5d999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.map-popup.visible {
    display: block;
}

.map-popup img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

.map-popup h2 {
    font-family: "Fjalla One", sans-serif;
    font-size: 1.5rem;
    color: #e5d999;
    margin: 0 0 10px;
}

.map-popup p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #c5c6c7;
    margin: 0;
}

.map-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-label {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.map-label i {
    margin-right: 8px;
    color: #e5d999;
}

.label-home {
    background: #e5d999;
    color: #222327;
    font-size: 16px;
    padding: 8px 15px;
    border: 2px solid #fff;
    transform: translate(-50%, -150%); /* Przesunięcie nad punkt */
}

.label-home i {
    color: #222327;
}

.map-header.overlay-active .map-points,
.map-header.overlay-active .map-labels,
.map-header.overlay-active .map-controls {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.hidden {
    display: none !important;
}

.floating-info-panel {
    position: absolute;
    top: 120px;
    right: 30px;
    width: 350px;
    background: rgba(26, 26, 29, 0.9);
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    z-index: 20;
    border: 1px solid #e5d999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.floating-info-panel h3 {
    font-family: "Fjalla One", sans-serif;
    font-size: 1.8rem;
    color: #e5d999;
    margin-bottom: 15px;
}

.floating-info-panel .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.floating-info-panel p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #c5c6c7;
    margin-bottom: 15px;
}

.floating-info-panel img {
    width: 100%;
    border-radius: 5px;
}

.map-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
}

.map-control-button {
    background-color: #222327;
    color: #fff;
    border: 1px solid #e5d999;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    border-radius: 5px;
}

.map-control-button:hover,
.map-control-button.active {
    background-color: #e5d999;
    color: #222327;
}

/* MOBILE ATTRACTIONS LIST STYLES */
.mobile-attractions-list {
    display: none; /* Domyślnie ukryte, widoczne tylko na mobile */
    padding: 50px 20px;
    background-color: #1c1c1c;
    color: #fff;
}

.mobile-attractions-list h2 {
    font-family: "Fjalla One", sans-serif;
    font-size: 8vw;
    text-align: center;
    margin-bottom: 40px;
    color: #e5d999;
}

#attractions-list-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.attraction-item {
    background-color: #222327;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background-color 0.3s ease;
}

.attraction-item:hover {
    background-color: #2a2b2f;
}

.attraction-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.attraction-item-content h3 {
    font-family: "Fjalla One", sans-serif;
    font-size: 1.3rem;
    margin: 0 0 5px;
    color: #fff;
}

.attraction-item-content p {
    font-size: 0.9rem;
    color: #aaa;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .map-header {
        height: 100vh; /* Mapa na całą wysokość ekranu */
        overflow: auto; /* Umożliwienie przewijania w poziomie i pionie */
    }

    .map-image {
        width: 150%; /* Zwiększ szerokość mapy, aby umożliwić przewijanie poziome */
        height: 100%;
        object-fit: cover;
        object-position: 45% center; /* Dostosuj pozycję, aby Gaboń był bardziej widoczny */
    }

    .map-points .map-point:not(.point-home) {
        display: none; /* Ukryj wszystkie punkty oprócz "home" */
    }

    .map-labels .map-label:not(.label-home) {
        display: none; /* Ukryj wszystkie etykiety oprócz "home" */
    }

    .map-point.point-home {
        top: 80% !important; /* Nowa, niższa pozycja dla punktu Agrogroń */
    }

    .map-label.label-home {
        top: 78% !important; /* Nowa, niższa pozycja dla etykiety Agrogroń */
    }

    .map-controls {
        display: none; /* Ukryj przyciski przełączania map na mobile */
    }

    .map-popup {
        width: 90%; /* Zwiększ szerokość pop-upów na mobile */
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 20px; /* Pozycjonuj na dole ekranu */
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* MOBILE TRAIL INFO SECTION STYLES */
    .mobile-trail-info-section {
        display: none; /* Domyślnie ukryte, widoczne tylko na mobile */
        padding: 50px 20px;
        background-color: #1c1c1c;
        color: #fff;
    }
    
    .mobile-trail-info-section h2 {
        font-family: "Fjalla One", sans-serif;
        font-size: 8vw;
        text-align: center;
        margin-bottom: 40px;
        color: #e5d999;
    }
    
    #mobile-trail-info-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .trail-info-item {
        background-color: #222327;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #333;
        transition: background-color 0.3s ease;
    }
    
    .trail-info-item:hover {
        background-color: #2a2b2f;
    }
    
    .trail-info-item h3 {
        font-family: "Fjalla One", sans-serif;
        font-size: 1.3rem;
        margin: 0 0 10px;
        color: #fff;
    }
    
    .trail-info-item .info-grid {
        display: grid;
        grid-template-columns: 1fr; /* Zmieniono na 1 kolumnę dla mobile */
        gap: 5px;
        margin-bottom: 15px;
        font-size: 0.9rem;
    }
    
    .trail-info-item p {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #aaa;
        margin-bottom: 15px;
    }
    
    .trail-info-item img {
        width: 100%;
        border-radius: 5px;
    }
    
    @media (max-width: 767px) {
        .mobile-trail-info-section {
            display: block; /* Pokaż sekcję informacji o szlakach na mobile */
        }
    }

    /* Usunięto regułę display: none !important; dla desktopu, ponieważ klasa .hidden jest teraz używana w JS */

    .floating-info-panel {
        width: 90%;
        right: 50%;
        transform: translateX(50%);
        top: 20px;
        left: auto;
        max-height: 80vh;
        overflow-y: auto;
    }

    .mobile-attractions-list {
        display: block; /* Pokaż listę atrakcji na mobile */
    }
}

/* 404 Page Specific Styles */
.page-header.error-404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh; /* Full viewport height */
  background-image: url(../images/404.webp); /* Tło z obrazu 404.webp */
  background-size: cover;
  background-position: center;
  padding: 20px;
}

.page-header.error-404 h1 {
  font-size: 10em;
  color: #fff; /* Biały kolor tekstu */
  margin-bottom: 0.2em;
  line-height: 1;
}

.page-header.error-404 p {
  font-size: 1.5em;
  color: #ccc; /* Jasnoszary kolor tekstu dla kontrastu */
  margin-bottom: 1.5em;
}

.page-header.error-404 .btn {
  background-color: #e5d999;
  color: #333;
  padding: 10px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-header.error-404 .btn:hover {
  background-color: #d4c780;
}