/* === VARIABLES === */
:root {
  --background-color: #f3f3f3;
  --white-color: #ffffff;
  --dark-blue-color: #042028;
  --light-blue-color: #16c1f2;
  --blue-gray-10-color: #757e801a;
  --gray-color: #d2d1cb;
  --dark-gray-color: #6b7273;
  --light-gray-color: #f8f6f3;
  --black-color: #000000;
  --transparent-black-22-color: #00000038;
  --dark-olive-color: #675e26;
  --gray-blue-color: #a6bac0;
  --aqua-58-color: #16c1f294;

  /* Navigation Variables */
  --nav-height: 100px;
  --nav-z-index: 1000;
  --nav-padding: 40px;
  --logo-width: 8em;
  --burger-size: 55px;
  --burger-line-width: 24px;
  --burger-line-height: 3px;
  --burger-z-index: 1001;
}

/* === SCROLLBAR (TANKO, BEŽ, DISKRETNO) === */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-color) transparent;
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 6px; /* tanka linija */
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--beige-color);
  border-radius: 0; /* kockasto */
}

::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.92);
}

/* === RESET === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === FONTS === */

@font-face {
  font-family: "Megrim";
  src: url("../assets/fonts/Megrim/Megrim-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* === PRELOADER === */
#preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--dark-blue-color) 0%, #063540 100%);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.preloader-container {
  text-align: center;
  animation: fadeInScale 1.2s ease-in-out;
}

.preloader-logo {
  position: relative;
}

.preloader-logo img {
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(22, 193, 242, 0.3));
  animation: float 3s ease-in-out infinite;
}

/* Animated glow effect */
.preloader-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(22, 193, 242, 0.2) 0%,
    transparent 70%
  );
  animation: pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

body.ready #preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease;
}

body.ready {
  opacity: 1;
}

body.is-leaving {
  opacity: 0;
}

.section-header {
  font-family: "Megrim", sans-serif;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  width: auto;
  min-width: max-content;
  text-transform: uppercase;
}

.blue-dot {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--light-blue-color);
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 2rem;
}
.blue-span {
  color: var(--light-blue-color);
}
.mb-1 {
  margin-bottom: 1em;
}
.circle {
  width: 800px;
  height: 800px;
  position: absolute;
  z-index: 1;
  background-image: url("../assets/images/circle.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* === NAVIGATION === */
.nav {
  background: transparent;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: var(--nav-z-index);
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav.scrolled {
  background: rgba(4, 32, 40, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100% !important;
  padding: 0 80px;
  margin: 0 auto;
  height: var(--nav-height);
  transition: height 0.3s ease;
}

.nav.scrolled .nav-container {
  height: 80px;
}

.nav .logo {
  position: relative;
  z-index: var(--burger-z-index);
  transition: transform 0.3s ease;
  margin-right: 30%;
}

.nav .logo:hover {
  transform: scale(1.05);
}

.nav .logo img {
  width: var(--logo-width);
  height: auto;
  transition: width 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(22, 193, 242, 0.2));
}
.nav.scrolled .logo {
  margin-right: 0;
  transition: margin 0.3s ease;
}
.nav.scrolled .logo img {
  width: 6em;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: var(--white-color);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
}

.nav-links li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--light-blue-color);
  transition: width 0.3s ease;
}

.nav-links li a:hover,
.nav-links li a.active {
  color: var(--light-blue-color);
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
  width: 100%;
}

/* === BURGER MENU === */
.burger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: var(--burger-z-index);
  position: relative;
  align-items: baseline;
  justify-content: center;
  border-radius: 50%;
}

.burger:hover {
  transform: scale(1.08);
}

.burger.active {
  box-shadow: 0 6px 25px rgba(4, 32, 40, 0.6);
  animation: none;
}

.burger span {
  width: var(--burger-line-width);
  height: var(--burger-line-height);
  background: var(--light-blue-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  border-radius: 2px;
}

/* Burger animation to X */
.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

@keyframes burgerPulse {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(22, 193, 242, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(22, 193, 242, 0.5);
  }
}

/* === LANGUAGE DROPDOWN === */
.lang-dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.lang-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 193, 242, 0.1);
  border: 1px solid var(--light-blue-color);
  padding: 8px 14px;
  border-radius: 4px;
  min-width: 90px;
  transition: all 0.3s ease;
  color: var(--white-color);
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lang-selected:hover {
  background: rgba(22, 193, 242, 0.2);
  border-color: var(--light-blue-color);
}

.lang-selected .arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
  font-size: 0.7em;
}

.lang-dropdown.active .arrow {
  transform: rotate(180deg);
}

.lang-selected img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-blue-color);
  border: 1px solid var(--light-blue-color);
  border-radius: 4px;
  min-width: 100%;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 200;
}

.lang-dropdown.active .lang-options {
  display: flex;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--white-color);
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  cursor: pointer;
}

.lang-option:hover {
  background: rgba(22, 193, 242, 0.15);
  color: var(--light-blue-color);
}

.lang-option img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}

/* === MOBILE NAVIGATION (All Resolutions) === */

.nav-links {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, var(--dark-blue-color) 0%, #063540 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 40px 40px;
  gap: 0;
  transition:
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0.3s ease;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  z-index: calc(var(--burger-z-index) - 1);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.nav-links.open {
  top: 0;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.nav-links li {
  width: 100%;
  max-width: 500px;
  text-align: center;
  margin: 0;
  opacity: 0;
  transform: translateY(-20px);
}

.nav-links.open li {
  animation: slideDown 0.4s ease forwards;
}

.nav-links.open li:nth-child(1) {
  animation-delay: 0.1s;
}
.nav-links.open li:nth-child(2) {
  animation-delay: 0.15s;
}
.nav-links.open li:nth-child(3) {
  animation-delay: 0.2s;
}
.nav-links.open li:nth-child(4) {
  animation-delay: 0.25s;
}
.nav-links.open li:nth-child(5) {
  animation-delay: 0.3s;
}
.nav-links.open li:nth-child(6) {
  animation-delay: 0.35s;
}
.nav-links.open li:nth-child(7) {
  animation-delay: 0.4s;
}

@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-links li a {
  width: 100%;
  display: block;
  padding: 1.5rem 0;
  font-size: 1.3em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-links li a::after {
  display: none;
}

.lang-dropdown {
  margin-top: 2rem;
  width: 100%;
  max-width: 500px;
}

.lang-selected {
  width: 100%;
  justify-content: space-between;
}

.lang-options {
  left: 0;
  transform: none;
  width: 100%;
}

/* === GLOBAL === */

html {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0; /* <-- umesto 0 80px */
  padding: 0 80px;
  background-color: var(--background-color);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}
html,
body {
  width: 100%;
  overflow-x: clip; /* modernije i “jače” od hidden */
}

.wrapper {
  max-width: max-content;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* === UTILITIES === */
.btn-primary {
  border-radius: 1px;
  border: none;
  background-color: var(--gray-color);
  box-shadow: 24px 15px 30px 0 rgba(0, 0, 0, 0.25);
  width: 157px;
  height: 127px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-blue-color);
  text-decoration: none;
  cursor: pointer;
}

/* === HERO SECTION === */
#hero {
  background-color: var(--background-color);
  min-height: 100vh;
  display: flex;
}

#hero .wrapper {
  max-width: 100% !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--background-color);
  width: 100%;

  position: relative;
}

.hero-left-first-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 270px;
  padding-left: 20px;
}

.hero-bathroom {
  display: flex;
  flex-direction: column;
  font-family: "Megrim", sans-serif;
  font-size: 96px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--dark-blue-color);
}

.hero-bathroom .til {
  color: var(--light-blue-color);
}

.hero-bathroom-last-row {
  display: flex;
  align-items: baseline;
}

.hero-bathroom-last-row .a {
  font-family: "Megrim", sans-serif;
  font-size: 128px;
  font-weight: 500;
  line-height: 1;
  color: var(--dark-blue-color);
  padding-right: 12px;
}

.hero-architecture-luxury {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Megrim", sans-serif;
  font-size: 96px;
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1;
  color: var(--dark-blue-color);
}

.hero-architecture {
  margin-top: 27px;
}

.hero-left-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-left-bottom-row {
  display: flex;
  align-items: flex-start;
  gap: 90px;
}

.rectangle-168 {
  width: 157px;
  height: 4px;
  background-color: var(--gray-color);
  border-radius: 116.5px;
  transform: translateY(-30px);
}

.hero-left-paragraph {
  max-width: 430px;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 20px;
  font-family: "Inter", sans-serif;
  color: var(--dark-blue-color);
  margin-top: 20px;
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 80px;
  padding-top: 7%;
  margin-right: 40%;
}

.hero-right-paragraph {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  letter-spacing: 0.21em;
  line-height: 32px;
  font-weight: 600;
  color: var(--dark-gray-color);
  text-align: left;
  position: relative;
  z-index: 2;
}

.hero-right-paragraph p {
  margin: 0;
}

.hero-right-rectangle-169 {
  width: 99px;
  height: 4.16px;
  background-color: var(--dark-gray-color);
  border-radius: 116.5px;
  margin-top: 70px;
}
.hero-right-image {
  position: absolute;
  right: -2%;
  top: -50%;
}
.hero-right-image img {
  width: 30vw;
  z-index: 100;
  position: relative;
}

.hero-right-image-mobile {
  display: none;
}

/* === ABOUT US SECTION === */
#about-us {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 0;
}

#about-us .wrapper {
  position: relative;
}

.about-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

.about-content .text {
  z-index: 100;
  display: flex;
}
.about-content .text .dark-oval {
  background-color: var(--dark-blue-color);
  width: 400px;
  border-radius: 200px;
  aspect-ratio: 5 / 9;
  display: flex;
  justify-content: center;
  padding-top: 200px;
  flex-shrink: 0;
  height: 600px;
  margin-top: 20%;
  z-index: 90;
}

.about-content .text .light-oval {
  width: 500px;
  border-radius: 250px;
  flex-shrink: 0;
  height: 1200px;
  aspect-ratio: 5 / 9;
  display: flex;
  flex-direction: column;
  z-index: 80;
  background-color: var(--gray-color);
  padding: 0 50px;
  margin-left: -5%;
}
.about-content .text .paragraph {
  padding-top: 500px;
  padding-left: 1.2rem;
}
.about-content .text h2 {
  color: var(--gray-blue-color);
  margin-left: 76%;
}
.about-content .text h2 span {
  color: var(--dark-blue-color);
}
.about-content .text .paragraph p {
  font-size: 16px;
  margin-bottom: 20px;
}

.image-moto-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin-top: 10%;
  margin-left: -5%;
  align-items: end;
  position: relative;
}
.about-content .image {
  background-image: url(../assets/images/about_us/about_us_image.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 25rem;
  height: 45rem;
  z-index: 100;
}

.blue-dot-about {
  position: absolute;
  top: 5%;
  left: -5%;
  z-index: 999;
  width: 2.25rem;
  height: 2.25rem;
}

#about-us .circle {
  top: -30%;
  right: 15%;
}

#about-us .moto {
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 10%;
}

#moreBtn {
  padding: 1rem 1.5rem;
  background: var(--dark-blue-color);
  color: var(--white-color);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: background 0.3s;
  cursor: pointer;
  display: none;
}

/* === PROJECTS SECTION === */

#projects {
  position: relative;
}
#projects .wrapper {
  position: relative;
  padding-top: 30px;
}

#projects .wrapper .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#projects .wrapper .section-header {
  width: auto;
  white-space: nowrap;
}

#projects .wrapper .paragraph {
  width: 100%;
  max-width: 650px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-top: 40px;
}
#projects .wrapper .paragraph p {
  margin-bottom: 20px;
}

/* Projects Swiper */
#projects .projects-swiper {
  /* padding-bottom: 1rem; */
  /* width: 80%; */
  margin: 0 auto;
  margin-top: 5rem;
  height: 90vh;
}
#projects .swiper-slide {
  width: 250px;
  cursor: pointer;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
#projects .projects-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}
#projects .swiper-slide .projects-card-image-wrapper {
  position: relative;
  aspect-ratio: 5 / 9;
  --oval-radius: 100px; /* default, biće override iz JS */
  border-radius: var(--oval-radius);
  margin-bottom: 4rem;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
#projects .swiper-slide .projects-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 9;
  border-radius: 160px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
  box-shadow: 24px 15px 30px 0 rgba(0, 0, 0, 0.25);
}
#projects .swiper-slide .projects-card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding-bottom: 35px;
}
#projects .swiper-slide .projects-card-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  display: -webkit-box;
  color: var(--dark-blue-color);
  height: 2rem;
}
#projects .swiper-slide .projects-card-text {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 2rem;
  display: -webkit-box;
  color: var(--dark-blue-color);
  height: 4rem;
}
#projects .swiper-slide .projects-card-btn {
  display: inline-block;
  width: fit-content;
  padding: 1rem 2rem;
  background: var(--gray-color);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  color: var(--dark-blue-color);
  font-size: 12px;
  font-weight: 900;
  transition: background 0.3s ease;
  text-align: center;
  align-self: flex-start;
  box-shadow: 24px 15px 30px 0 rgba(0, 0, 0, 0.25);
}
#projects .swiper-slide .hover-overlay {
  position: absolute;
  inset: 0;
  background: var(--aqua-58-color);
  border-radius: var(--oval-radius);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
#projects .swiper-slide:hover .hover-overlay {
  opacity: 1;
}
#projects .swiper-slide .hover-text {
  color: white;
  font-family: "Megrim", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  letter-spacing: 0.1em;
  margin-top: 35%;
  margin-left: 25%;
}

#projects .projects-swiper-wrap {
  position: relative;
}

#projects .swiper-button-prev-custom,
#projects .swiper-button-next-custom {
  position: absolute;
  top: 62%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
#projects .swiper-button-prev-custom {
  left: -4rem;
}
#projects .swiper-button-next-custom {
  right: -4rem;
}

#projects .swiper-button-prev-custom img,
#projects .swiper-button-next-custom img {
  width: 100%;
  height: 100%;
  display: block;
}
#projects .wrapper > div:last-child {
  position: relative;
}

#projects .circle {
  top: -20%;
  left: 20%;
}

/* HOW TO  nikola*/
/* #howto {
  margin-top: 150px;
}
#howto .section-header {
  text-align: center;
  margin-bottom: 75px;
}

#howto .partOne {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

#howto .partOne .content {
  width: 15%;
}

#howto .partOne .content .subheading {
  border: 1px solid var(--dark-olive-color);
  border-radius: 35px;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--dark-blue-color);
}

#howto .partOne .content p {
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-blue-color);
  margin-top: 30px;
}

#howto .partOne .divider {
  width: 29px;
  height: 1px;
  background-color: var(--dark-olive-color);
  margin-top: 25px;
}

#howto .partTwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 75px;
}
#howto .partTwo .text {
  width: 700px;
  height: 400px;
  background-color: gray;
}
#howto .partTwo .dark-oval {
  background-color: var(--dark-blue-color);
  border-radius: 50%;
  width: 510px;
  height: 510px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding-top: 100px;
  box-shadow: 24px 15px 30px 0 rgba(0, 0, 0, 0.25);
}

#howto .partTwo .dark-oval h3 {
  border: 1px solid var(--dark-olive-color);
  border-radius: 35px;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--white-color);
  text-transform: uppercase;
  margin-top: 2rem;
}
#howto .partTwo .dark-oval p {
  padding: 8rem;
  color: var(--white-color);
  font-size: 14px;
  padding-top: 4rem;
}

#howto .partTwo .circle {
  width: 300px;
  height: 300px;
  right: 23%;
  top: 70%;
} */

/* =========================
   RECENSIONS (FINAL)
   Center title + dot, text left
   ========================= */

/* ===== HOWTO SECTION ===== */

#howto {
  background: #f3f3f0;
  padding: 90px 0 110px;
}

/* HEADER (centar + plava tacka) */
.header-wrapper.howto-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blue-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1bb6e8;
  box-shadow: 0 16px 22px rgba(0, 0, 0, 0.18);
  margin-bottom: 18px;
}

/* naslov ostaje section-header – samo ga stilizuj ako treba */
.howto-header .section-header {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 300;
  color: #0d2026;
}

/* ===== TOP STEPS (5 kolona) ===== */
.partOne.howto-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
  align-items: start;
  margin: 0 auto 70px;
}

/* divider nam ne treba kao element u gridu */
.partOne.howto-steps .divider {
  display: none;
}

/* content kartice */
.partOne.howto-steps .content {
  padding-top: 6px;
  position: relative;
}

/* pill izgled – dodaš klasu howto-pill na h3 */
.partOne.howto-steps .subheading.howto-pill {
  border: 1.5px solid #b08b47;
  border-radius: 999px;
  padding: 14px 18px;
  text-align: center;
  background: transparent;
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #0d2026;
}

/* crtica između pill-ova (imitacija onog “—”) */
.partOne.howto-steps .content:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 27px;
  right: -34px;
  width: 34px;
  height: 1px;
  background: #b08b47;
  opacity: 0.8;
}

/* opis ispod pill-a */
.partOne.howto-steps p {
  margin: 16px 0 0;
  color: #3b4548;
  font-size: 14px;
  line-height: 1.7;
  max-width: 260px;
}

/* ===== BOTTOM LAYOUT ===== */
.partTwo.howto-bottom {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: start;
}

/* left tekst blok ostaje kakoto-process-card */
.howto-process-card .process-kicker p {
  margin: 0 0 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  color: #6a7477;
}

.howto-process-card .process-line {
  width: 70px;
  height: 2px;
  background: #6a7477;
  opacity: 0.6;
  margin: 22px 0;
}

.howto-process-card .process-desc {
  max-width: 520px;
  color: #3b4548;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 28px;
}

.howto-process-card .process-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 120px;
  background: #d7d6d2;
  color: #0d2026;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 12px;
  border-radius: 2px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.18);
}

/* ===== RIGHT BIG CIRCLE ===== */
.dark-oval.howto-bigcircle {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: #052127;
  box-shadow: 0 40px 60px rgba(0, 0, 0, 0.28);

  position: relative;
  padding: 100px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* naslov u pill-u (dodaj class howto-bigpill na h3) */
.dark-oval .howto-bigpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.6px solid rgba(176, 139, 71, 0.9);
  border-radius: 999px;
  padding: 14px 22px;
  margin: 0 0 24px;
  color: #eef3f4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 14px;
  font-weight: 800;
}

/* tekst u krugu */
.dark-oval.howto-bigcircle p {
  margin: 0;
  color: rgba(238, 243, 244, 0.9);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  max-width: 320px;
}

/* tvoj postojeći .circle element – sakrij ako smeta */
.dark-oval .circle {
  display: none;
}

/* dekor krugovi */
.partTwo .decor-circle {
  position: absolute;
  border: 1.2px solid #675e26;
  border-radius: 50%;
  pointer-events: none;
}

.partTwo .decor-1 {
  width: 210px;
  height: 210px;
  right: 50%;
  top: -1120px;
  transform: translateX(-50%);
}

.partTwo .decor-2 {
  width: 230px;
  height: 230px;
  right: -160px;
  top: 320px;
  opacity: 0.45;
}



/* HOW TO DODATNO ZA DIM TRADE */
.howto-partners-note {
  margin-top: 68px;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.howto-partners-note p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--dark-blue-color);
}

.howto-partners-note a {
  color: var(--light-blue-color);
  text-decoration: none;
  font-weight: 600;
}

.howto-partners-note a:hover {
  text-decoration: underline;
}

#recensions {
  overflow-x: hidden;
}

/* Wrapper (pozadina i radius ostaju) */
#recensions .wrapper {
  margin-top: 150px;
  background-color: var(--dark-blue-color);

  position: relative;
}

/* === HEADER: dot + title centar === */
#recensions .header-wrapper {
  padding-top: 150px;
  margin-bottom: 75px;

  /* centriranje */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* dot + naslov u centar */
  justify-content: center;
  text-align: center;

  color: var(--white-color);
  margin-left: 0; /* uklanjamo stari offset */
}

/* ako koristiš .blue-dot globalno – ovde ga samo poravnamo */
#recensions .header-wrapper .blue-dot {
  margin: 0 auto 2rem; /* centar i razmak ispod */
}

/* === SWIPER CARD === */
#recensions .recensions-swiper .swiper-wrapper .recension-card {
  display: flex;
  justify-content: center; /* centar cele kompozicije */
  align-items: center;
  gap: 60px;

  /* centar + kontrolisan padding */
  max-width: 100rem;
  margin: 0 auto;
  padding: 4rem 5rem 6rem;
  box-sizing: border-box;
}

/* === IMAGE === */
#recensions
  .recensions-swiper
  .swiper-wrapper
  .recension-card
  .recension-image {
  flex: 0 0 auto;
}

#recensions
  .recensions-swiper
  .swiper-wrapper
  .recension-card
  .recension-image
  img {
  width: 25rem;
  height: 25rem;
  margin-left: 0; /* obavezno */
  display: block;
  object-fit: cover;
}

/* === TEXT BLOCK (centar kao blok, ali text left) === */
#recensions
  .recensions-swiper
  .swiper-wrapper
  .recension-card
  .recension-content {
  flex: 0 1 520px; /* limit širinu da ne bude preširoko */
  max-width: 520px;

  /* blok centriran u layoutu */
  margin: 0;

  /* tekst levo */
  text-align: left;

  color: var(--white-color);
  font-size: 14px;
  font-weight: 400;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0;
  /* sklanjamo duple paddinge */
}

#recensions
  .recensions-swiper
  .swiper-wrapper
  .recension-card
  .recension-content
  p {
  line-height: 1.6;
  margin: 0;
}

/* === PAGINATION DOTS === */
#recensions .swiper-pagination {
  position: static !important;
  margin-top: 2rem;

  display: flex;
  justify-content: center;
  gap: 0.5rem;

  margin-bottom: 2rem;
  padding-top: 2px;
  padding-bottom: 52px;
}

#recensions .swiper-pagination .custom-dot {
  width: 55px;
  height: 26px;
  background: transparent;
  border: 3px solid var(--white-color);
  border-radius: 25px;
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}

#recensions .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
  width: 110px;
  border-color: var(--light-blue-color);
}

/* === DECOR CIRCLE === */
#recensions .circle {
  top: -10%;
  right: -20%;
  width: 50rem;
}

/* === GALLERY === */
#gallery {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
  margin-bottom: 150px;
}
#gallery .header-wrapper {
  margin-bottom: 75px;
  margin-left: 15%;
  text-align: center;
  display: inline-block;
}
#gallery .circle {
  right: -20%;
  top: 1%;
  z-index: 2;
}

.gallery-container {
  position: relative;
  width: 1200px;
  height: 800px;
  --gallery-item-position: 92%;
  z-index: 90;
  border-radius: 30px;
}

.gallery-container .slide .gallery-item {
  width: 180px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 90px;
  background-position: 50% 50%;
  background-size: cover;
  display: inline-block;
  transition: 0.5s;
  box-shadow: 24px 15px 30px 0 rgba(0, 0, 0, 0.25);
}

.slide .gallery-item:nth-child(1),
.slide .gallery-item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.slide .gallery-item:nth-child(3) {
  left: var(--gallery-item-position);
}

.slide .gallery-item:nth-child(4) {
  left: calc(var(--gallery-item-position) + 220px);
}

.slide .gallery-item:nth-child(5) {
  left: calc(var(--gallery-item-position) + 440px);
}

.slide .gallery-item:nth-child(n + 6) {
  left: calc(var(--gallery-item-position) + 660px);
  opacity: 0;
}
#gallery .gallery-container {
  touch-action: pan-y; /* dozvoli vertikalni scroll, ali swipe hvatamo mi */
}

.gallery-item .gallery-content {
  position: absolute;
  top: 50%;
  left: 180px;
  width: 300px;
  text-align: left;
  color: #eee;
  transform: translate(0, -50%);
  font-family: system-ui;
  display: none;
}

.slide .gallery-item:nth-child(2) .gallery-content {
  display: block;
}

.gallery-content .gallery-name {
  text-transform: uppercase;
  font-family: "Megrim", sans-serif;
  font-size: 40px;
  font-weight: 500;
  opacity: 0;
  animation: galleryAnimate 1s ease-in-out 1 forwards;
}

.gallery-content .gallery-des {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  opacity: 0;
  animation: galleryAnimate 1s ease-in-out 0.3s 1 forwards;
  margin-top: 40px;
}

@keyframes galleryAnimate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }
  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

.gallery-button {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 70%;
  left: -36%;
}

.gallery-button button {
  width: 50px;
  height: 50px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  transition: 0.3s;
  background-color: transparent;
}

/* dodato za novu galleriju, koja povlaci 320/640/960 */

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.gallery-content {
  position: relative;
  z-index: 2;
}

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.2) 28%,
    rgba(0, 0, 0, 0.06) 45%,
    rgba(0, 0, 0, 0) 62%
  );
}

.gallery-item .gallery-content {
  position: absolute;
  top: 50%;
  left: 180px;
  transform: translateY(-50%);
  width: 320px;
  z-index: 2;
}

.gallery-content .gallery-name {
  font-size: 48px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}

.gallery-content .gallery-des {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* === BLOG === */
#blog {
  margin-top: 150px;
  margin-bottom: 150px;
}

#blog .header-wrapper {
  margin-bottom: 75px;
  color: var(--dark-blue-color);
  margin-left: 15%;
  display: inline-block;
}

.blog-swiper-container {
  position: relative;
  background-color: var(--dark-blue-color);
  min-width: 10rem;
}

.blog-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-card {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.blog-content {
  flex: 1;
  color: var(--white-color);
  padding: 100px 100px;
}

.blog-title {
  font-size: 40px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
}

.blog-text {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
}

.blog-image {
  flex: 1;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.blog-navigation {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 85%;
  transform: translate(50%, 50%);
  left: 40%;
  gap: 30px;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
}

.blog-navigation button {
  width: 50px;
  height: 50px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.blog-navigation button:hover {
  opacity: 1;
}

#blog .circle {
  top: -25%;
  right: 40%;
  width: 15rem;
}

/* === CONTACT === */
#contact {
  margin-top: 150px;
  position: relative;
}

#contact .header-wrapper {
  margin-bottom: 75px;
  color: var(--dark-blue-color);
  margin-left: 15%;
  display: inline-block;
  text-align: center;
}

.contact-wrapper {
  position: relative;
}

.contact-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 90;
}

.contact-left-side {
  display: flex;
  gap: 0;
  align-items: stretch;
  width: 70%;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  background: var(--white-color);
  overflow: hidden;
}

.contact-photo {
  width: 500px;
  height: auto;
  overflow: hidden;
  background: var(--dark-blue-color);
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#contactForm {
  width: 100%;
}

.contact-form-card {
  padding: 3rem;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.contact-form-title {
  font-size: 35px;
  font-weight: 500;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark-olive-color);
}

.contact-form .form-group {
  position: relative;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}

.contact-form label {
  position: absolute;
  left: 0;
  bottom: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-olive-color);
  pointer-events: none;
  transition: all 0.3s ease;
  transform-origin: left;
}

.contact-form input,
.contact-form textarea {
  width: 50%;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 3px solid var(--dark-olive-color);
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--light-blue-color);
}

.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label {
  transform: translateY(-2rem) scale(0.85);
  color: var(--light-blue-color);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label {
  transform: translateY(-6rem) scale(0.85);
}

.contact-submit-btn {
  padding: 2.5rem 2rem;
  background: var(--dark-blue-color);
  color: var(--white-color);
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: background 0.3s;
}

.contact-submit-btn:hover {
  background: var(--light-blue-color);
}

.contact-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.thank-you-message {
  text-align: center;
  padding: 3rem;
}

.thank-you-icon {
  font-size: 4rem;
}

.thank-you-message h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--dark-olive-color);
}

.thank-you-message p {
  color: var(--dark-olive-color);
}

.contact-info-card {
  background: transparent;
  padding: 2rem;
  color: var(--white-color);
  width: 25%;
}

.contact-info-block {
  margin-bottom: 2rem;
  color: var(--dark-olive-color);
}

.contact-info-label {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.contact-info-block p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.contact-info-block a {
  color: var(--dark-olive-color);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-info-block .email {
  text-decoration: underline;
}

.contact-info-block a:hover {
  color: var(--light-blue-color);
}

.contact-socials {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-socials a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.contact-socials img {
  width: 40px;
  height: 40px;
}

#contact .circle {
  top: -20%;
  right: 15%;
  width: 40rem;
  z-index: 99;
}
.best-designer-ever {
  position: absolute;
  background: var(--dark-blue-color);
  color: var(--white-color);
  max-width: 120px;
  font-size: 14px;
  font-weight: 400;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  display: block; /* bitno */
}

.best-designer-ever:visited {
  color: var(--aqua-58-color);
}

.best-designer-ever:hover {
  /* opciono, suptilan premium hover */
  opacity: 0.9;
}

/* === PAGES OVERALL === */
.bathroom-page {
  background-color: #f5f5f5;
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.bathroom-page .wrapper {
  max-width: unset !important;
}
.bathroom-hero .wrapper .partOne {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.bathroom-hero .wrapper .partOne .image {
  width: 25%;
  height: auto;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.bathroom-hero .wrapper .partOne .image img {
  width: 100%;
  height: auto;
  display: block;
}
.bathroom-hero .wrapper h2 {
  align-items: start;
  font-size: 40px;
  font-weight: 400;
  color: var(--dark-olive-color);
  font-family: "Megrim", sans-serif;
  letter-spacing: 0.1em;
  padding-top: 180px;
}
.bathroom-hero .wrapper button {
  margin-right: 15%;
  border: none;
  background-color: transparent;
  width: 50px;
  height: 50px;
  padding-top: 60px;
  cursor: pointer;
}

.bathroom-hero .wrapper .partTwo {
  display: flex;
  gap: 60px;
  margin-right: 15%;
  margin-top: -20%;
}

.bathroom-hero .wrapper .partTwo .text {
  padding-left: 150px;
  padding-right: 150px;
  padding-bottom: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  font-weight: 400;
  font-size: 14px;
}

.bathroom-hero .wrapper .partTwo video {
  width: 600px;
  height: auto;
  z-index: 90;
  display: block;
}
.bathroom-page .circle {
  width: 600px;
  height: 600px;
}
.bathroom-hero .wrapper .partTwo .circle {
  left: 42vw;
  top: 40%;
}

#bathroom-gallery {
  padding-top: 150px;
}

#bathroom-gallery .gallery-button {
  left: 60%;
  top: 77%;
}
.bathroom-page .header-wrapper .section-header {
  font-family: "Inter", sans-serif;
  font-size: 30px;
  font-weight: 400;
  margin-top: 50px;

  margin-left: 80px;
}
#bathroom-gallery .circle {
  top: 33%;
  left: 30%;
}
#ideas-inspiration {
  margin-top: 150px;
}

#ideas-inspiration .circle {
  top: 55%;
  left: -15%;
}

.ideas-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.ideas-content .text-block {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  gap: 40px;
  padding-left: 100px;
  line-height: 1.4;
}
.ideas-content .text-block .bold-span {
  font-weight: 700;
}
.ideas-content .inspiration-image {
  width: 60%;
}
.ideas-content .inspiration-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 961 / 677;
  object-fit: cover;
}
.bathroom-page .contact-wrapper .header-wrapper {
  display: none !important;
}

#bathroom-gallery .slide .gallery-item:nth-child(1),
#bathroom-gallery .slide .gallery-item:nth-child(2) {
  width: 100%;
  margin: 0 auto;
}

/* Page Oak Light Spa Ritual */
#howto .partTwo .text.howto-process-card {
  width: 700px;
  min-height: 400px;
  background: transparent;
  display: flex;
  flex-direction: column;

  /* LEFT poravnanje */
  align-items: flex-start;
  justify-content: center;

  gap: 22px;
  text-align: left;
}

#howto .partTwo .process-kicker p {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dark-gray-color);
  margin: 0;
  line-height: 1.6;
}
.dark-oval .howto-bigpill {
  font-size: 16px;
}

#howto .partTwo .process-line {
  width: 78px;
  height: 3px;
  background: var(--dark-gray-color);
  border-radius: 999px;
  opacity: 0.85;
}

#howto .partTwo .process-desc {
  max-width: 620px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--dark-blue-color);
  margin: 0;
}

#howto .partTwo .process-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  background: var(--gray-color);
  color: var(--dark-blue-color);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 24px 15px 30px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  margin-top: 10px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  text-align: center; /* centriraj tekst u 2 reda */
  line-height: 1.2;
}

#howto .partTwo .process-btn:hover {
  transform: translateY(-2px);
  box-shadow: 28px 18px 34px rgba(0, 0, 0, 0.25);
}




/* === Responsive === */

/* === MOBILE (max-width: 767px) === */
@media (max-width: 767px) {
  body {
    padding: 0;
    min-width: 320px;
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100% !important;
    padding: 0 20px;
    margin: 0 auto;
    height: var(--nav-height);
    transition: height 0.3s ease;
  }
  .nav .logo img {
    width: 80px;
    height: 60px;
    transition: width 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(22, 193, 242, 0.2));
  }

  .nav-links li a {
    width: 100%;
    display: block;
    padding: 1.5rem 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  #hero {
    padding-left: 1.2rem;
    margin-top: 1rem;
  }

  #hero,
  #about-us {
    height: unset;
    min-height: unset;
  }

  /* ================= HERO ================= */

  #hero .wrapper {
    margin-top: 1rem;
    margin-bottom: 80px;
  }

  .hero-left-first-block {
    padding-top: 190px;
  }

  .hero-bathroom,
  .hero-architecture-luxury {
    font-size: 32px;
  }

  .hero-left-paragraph {
    font-size: 14.7px;
    line-height: 1.2;
    letter-spacing: 0;
    max-width: 250px;
    font-weight: 400;
    padding-left: 10px;
  }

  .hero-right {
    position: absolute;
    top: 12%;
    left: 0;
    margin: 0;
    padding-top: 0;
  }

  .hero-right-paragraph {
    font-size: 11px;
    line-height: 1.8;
    padding-left: 80px;
  }

  /* slika u hero-u: fiksno + limit */
  .hero-right-image-mobile img {
    width: 70vw;
    height: auto;
    top: 9%;
    right: -20%;
    position: absolute;
  }

  .hero-right-rectangle-169 {
    margin-top: 14px;
    height: 2px;
    width: 50px;
  }
  .btn-primary {
    width: 70px;
    height: 110px;

    min-width: 70px;
    margin-top: 1.4rem;
    font-size: 10px;
    text-align: center;
    font-weight: 700;
  }

  .hero-left-bottom-row {
    gap: 10px;
  }
  .rectangle-168 {
    width: 70px;
    transform: translateY(-7px);
  }
  .hero-right-image {
    display: none;
  }
  .hero-right-image-mobile {
    display: block;
  }
  .hide-mobile {
    display: none !important;
  }
  /* ================= ABOUT ================= */
  #about-us .circle {
    width: 320px;
    height: 320px;
    top: -15%;
    right: -55%;
  }

  .about-content {
    flex-direction: column;
  }
  .about-content .text {
    justify-content: center;
  }

  .about-content .text h2 {
    color: var(--gray-blue-color);
    margin-left: 76%;
    margin-top: 2rem;
  
    font-size: 36px;
    width: 40rem;
  }

  .about-content .text .dark-oval {
    width: 170px;
    height: 270px;
    padding-top: 35px;
  }

  .about-content .text .light-oval {
    width: 260px;
    height: 800px;
    padding: 0 25px 140px;
  }

  .about-content .text .paragraph {
    padding-top: 190px;
    padding-left: 0.2rem;
    padding-right: 0.5rem;
  }

  .about-content .text .paragraph p {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
   margin-top: 1rem;
  }
  #about-us .moto {
    font-size: 14px;
    letter-spacing: 0.1px;
    margin-top: 10%;
  }
  .image-moto-wrapper {
    margin-top: -25%;
    margin-left: 15%;
    flex-direction: row;
    gap: 10px;
  }

  .about-content .image {
    width: 25rem;
    height: 25rem;
    border-radius: 50rem 50rem 0 0;

    position: relative;
  }

  .blue-dot-about {
    position: absolute;
    left: 65%;
    top: -2%;
    width: 2.2rem;
    height: 2.2rem;

    pointer-events: none; /* da ne smeta klikovima */
  }

  .about-content .text .dark-oval {
    width: clamp(140px, 32vw, 170px);
    height: 280px;
    aspect-ratio: 5 / 8;
  }

  .about-content .text .light-oval {
    width: clamp(250px, 78vw, 280px);
    height: auto;
    aspect-ratio: 5 / 9;
  }

  .about-content .image {
    width: min(98vw, 520px);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* ================= PROJECTS ================= */
  #projects {
    margin-top: 50px;
    padding: 0 20px;
  }

  #projects .section-header {
    font-size: 36px;
    font-weight: 500;
  }

  #projects .projects-card {
    align-items: center;
  }

  #projects .swiper-slide .projects-card-content {
    align-items: center;
    text-align: center;
    padding-bottom: 6rem;
  }

  #projects .swiper-slide .projects-card-btn {
    margin: 0 auto;
  }

  #projects .paragraph p {
    font-size: 14px;
    max-width: 20rem;
    line-height: 1.4;
  }

  #projects .swiper-slide .projects-card-text {
    font-size: 14px;
    line-height: 1.6;
  }

  #projects .circle {
    top: 30%;
    left: 35%;
    width: 320px;
  }

  #projects .projects-swiper {
    margin-top: 1rem;
    height: 100vh;
  }
  
  #projects .swiper-button-prev-custom, #projects .swiper-button-next-custom {
      top: 27%;
  }
  
  #projects .swiper-button-prev-custom {
      left: 0rem;
  }
  
  #projects .swiper-button-next-custom {
     right: 0rem;
  }
  /* ================= HOWTO ================= */
  #howto {
    margin-top: 10px;
    padding: 0 20px;
  }

  #howto .section-header {
    text-align: center;
    white-space: normal;
    word-break: break-word;
    min-width: unset;
    font-size: 36px;
    margin-bottom: 2rem;
    font-weight: 500;
  }

  .header-wrapper.howto-header {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* PART ONE - mobile stacked + centered */
  #howto .partOne {
    display: flex;
    flex-direction: column; /* 1 ispod 2 ispod 3... */
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  #howto .partOne .content {
    width: 100% !important;
    max-width: 360px; /* može 320–420 po ukusu */
    text-align: center;
  }

  /* SUBHEADING - bez border "crtica" */
  #howto .partOne .content .subheading {
    border: none !important; /* uklanja crtice */
    border-radius: 35px;
    width: 100%;
    margin: 0;
    padding: 1rem 1rem;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: var(--dark-blue-color);
  }

  #howto .partOne .content p {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 16px;
    max-width: 30ch; /* da tekst ne bude preširok */
    margin-left: auto;
    margin-right: auto;
  }

  /* 1) UGASI CRTICE / DIVIDERE */
  #howto .divider {
    display: none !important;
  }

  /* ako su crtice pravljene pseudo-elementima */
  #howto .divider::before,
  #howto .divider::after,
  #howto .content::before,
  #howto .content::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
  }

  /* 2) VRATI BORDER OKO SUBHEADING */
  #howto .partOne .content .subheading {
    border: 1px solid var(--dark-olive-color) !important;
    border-radius: 35px;
    padding: 1rem 1rem;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: var(--dark-blue-color);
  }

  /* PART TWO - ide ispod svega + centar */
  #howto .partTwo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 22px; /* razmak posle partOne */
  }

  /* Dark circle - ispod zakazivanja termina (posle partOne), pa onda partTwo sadržaj */
  #howto .partTwo .circle {
    position: static !important; /* skida absolute */
    right: auto !important;
    top: auto !important;

    width: 200px;
    height: 200px;

    margin: 18px auto 22px; /* razmak iznad i ispod kruga */
    order: -1; /* krug bude prvi u partTwo (odmah nakon partOne) */
  }

  /* PartTwo card/text - centralno */
  #howto .partTwo .text.howto-process-card {
    width: 100%;
    min-height: auto;
    padding: 0 12px;

    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #howto .partTwo .process-desc {
    max-width: 34ch;
    font-size: 14x;
    line-height: 1.7;

    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  #howto .partTwo .process-btn {
    width: 120px;
    height: 120px;

    margin-left: auto;
    margin-right: auto;
  }
  /* PART TWO: sve centar */
  #howto .partTwo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
  }

  /* CRNI KRUG: centriran i PRVI u partTwo */
  #howto .partTwo .circle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: 200px;
    height: 200px;

    margin: 16px auto 22px;
    order: 0; /* krug ide prvi */
  }

  /* TEKST "jedna osoba..." ide posle kruga */
  #howto .partTwo .text.howto-process-card {
    order: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
  }

  /* DUGME ide posle teksta */
  #howto .partTwo .process-btn {
    order: 2;
    margin-left: auto;
    margin-right: auto;
  }

  /* ================= RECENSIONS ================= */

  /* Sekcija + wrapper: skini prevelike vertikalne razmake */
  #recensions {
    padding: 0 !important;
    margin: 0 !important;
  }

  #recensions .wrapper {
    margin-top: 60px !important; /* umesto 150px */
    padding-top: 40px !important; /* umesto 150px */
    padding-bottom: 20px !important;
  }

  /* Header: smanji padding i marginu */
  #recensions .header-wrapper {
    padding-top: 30px !important;
    margin-bottom: 20px !important;
  }

  #recensions .section-header {
    font-size: 36px !important;
  }

  /* Card: vertikalno, kompaktno */
  #recensions .recensions-swiper .swiper-wrapper .recension-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0px !important;
    padding: 1rem 1rem !important;
  }

  /* Slika */
  #recensions .recension-image img {
    width: 20rem !important;
    height: 20rem !important;
  }

  /* Tekst */

  #recensions
    .recensions-swiper
    .swiper-wrapper
    .recension-card
    .recension-content {
    flex: 0 1 40px;
    max-width: 320px;
    margin: 0;
    text-align: left;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1.5rem;
  }

  /* Swiper container: skini dodatni padding-bottom ako postoji */
  #recensions .recensions-swiper {
    padding-bottom: 0 !important;
  }

  /* Pagination: ubij ogromne paddings + kompaktan spacing */
  #recensions .swiper-pagination {
    position: static !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
    gap: 8px !important;
    height: auto !important;
  }

  /* Dotovi manji */
  #recensions .swiper-pagination .custom-dot {
    width: 40px !important;
    height: 18px !important;
    border-width: 2px !important;
  }

  #recensions .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
    width: 80px !important;
  }

  /* Dekor krug */
  #recensions .circle {
    width: 360px !important;
    left: -20% !important;
    top: -4rem !important;
    transform: translateX(-50%) !important;
  }

  #gallery {
    margin-top: 90px;
    margin-bottom: 90px;
    overflow: visible !important;
  }

  /* samo galerija naslov manji */
  #gallery .header-wrapper .section-header {
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 500;
  }

  #gallery .header-wrapper {
    margin: 0 auto;
    padding-bottom: 2rem;
  }

  /* full-bleed container (od ivice do ivice ekrana) */
  #gallery .gallery-container {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    height: 460px !important;
    border-radius: 18px;
    position: relative;
    z-index: 90;
    overflow: visible; /* da “peek” može da viri */
  }

  /* reset itema */
  #gallery .gallery-container .slide .gallery-item {
    position: absolute;
    top: 0 !important;
    transform: none !important;
    background-size: cover;
    background-position: center;
    box-shadow: 24px 15px 30px rgba(0, 0, 0, 0.25);
    transition:
      left 0.5s ease,
      width 0.5s ease,
      height 0.5s ease,
      opacity 0.5s ease,
      border-radius 0.5s ease !important;
    will-change: left, width, height, opacity, border-radius;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* MAIN (1 i 2 su full) */
  #gallery .slide .gallery-item:nth-child(1),
  #gallery .slide .gallery-item:nth-child(2) {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 1px !important;
    z-index: 1;
  }

  /* NEXT PEEK (treći viri desno) */
  #gallery .slide .gallery-item:nth-child(3) {
    top: calc(50% - 130px) !important;
    left: 78% !important; /* 72–82% po ukusu */
    transform: none !important;
    width: 160px !important;
    height: 260px !important;
    border-radius: 80px !important;
    z-index: 2;
    opacity: 1 !important;
    pointer-events: none; /* da ne krade klik od strelica */
  }

  /* ostale sakrij */
  #gallery .slide .gallery-item:nth-child(4),
  #gallery .slide .gallery-item:nth-child(5),
  #gallery .slide .gallery-item:nth-child(n + 6) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* tekst preko slike */
  #gallery .gallery-item .gallery-content {
    position: absolute;
    left: 18px !important;
    bottom: 18px !important;
    top: auto !important;
    transform: none !important;
    width: calc(100% - 36px) !important;
    display: none;
    z-index: 5;
  }

  #gallery .slide .gallery-item:nth-child(2) .gallery-content {
    display: block !important;
  }

  #gallery .gallery-content .gallery-name {
    font-size: 22px !important;
  }

  #gallery .gallery-content .gallery-des {
    font-size: 12px !important;
    line-height: 1.6;
    margin-top: 12px;
    max-width: 34ch;
  }

  /* strelice overlay, uvek vidljive */
  #gallery .gallery-button {
    position: absolute;
    inset: 0;
    z-index: 999 !important;
    pointer-events: none;
  }

  #gallery .gallery-button button {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;
  }

  /* tvoje klase su gallery-prev / gallery-next */
  #gallery .gallery-button .gallery-prev {
    left: 12px;
  }
  #gallery .gallery-button .gallery-next {
    right: 12px;
  }

  #gallery .gallery-button button img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
  }

  /* dekor krug */
  #gallery .circle {
    width: 150px;
    left: 150%;
    top: 1rem;
    transform: translateX(-50%);
  }

  #blog {
    margin-top: 90px;
    margin-bottom: 90px;
    overflow: visible !important;
    position: relative;
  }

  #blog .section-header {
    font-size: 36px;
  }

  #blog .wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
  }

  /* Blog slide/card: slika pa tekst */
  #blog .blog-card {
    display: flex;
    flex-direction: column; /* ✅ slika gore, tekst dole */
    gap: 1px;
    width: 100%;
    padding: 0;
    align-items: stretch;
  }

  /* FULL-BLEED slika (od ivice do ivice) */
  #blog .blog-image {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    overflow: hidden;
    border-radius: 0;
    position: relative;
  }

  #blog .blog-image img {
    width: 100%;
    height: 340px; /* malo veće */
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;

    /* blagi “premium zoom” */
    transform: scale(1.08);
    transform-origin: center;
  }

  /* Tekst ispod */
  #blog .blog-content {
    width: 100%;
    padding: 20px 20px 20px; /* prostor dole za navigaciju */
    text-align: left;
    box-sizing: border-box;
  }

  #blog .blog-title {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
    text-align: center;
  }

  #blog .blog-text {
    font-size: 13px;
    line-height: 1.7;
  }

  /* Navigacija dole centar (ne dira redosled) */
  #blog .blog-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    top: auto;
    z-index: 50;
  }

  #blog .blog-navigation button {
    display: none;
  }

  #blog .blog-navigation button img {
    display: none;
  }

  #blog .blog-card {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  #blog .blog-content {
    flex: 1; /* zauzmi prazan prostor */
    display: flex;
    flex-direction: column;
    justify-content: center; /* tekst u sredinu */
  }

  /* ================= CONTACT: slika -> forma -> info ================= */
  .contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .contact-left-side {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
  }
  #contact .section-header {
    font-size: 36px;
    margin: 0 auto;
    padding-left: 40px;
  }

  .contact-photo {
    width: 100%;
  }

  .contact-photo img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
  }

  .contact-form-card {
    width: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-form-title {
    font-size: 24px;
    text-align: center;
    margin-top: 16px;
  }

  .contact-form {
    width: 100%;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100% !important;
    max-width: 100%;
  }

  .contact-submit-btn {
    width: 100% !important;
    max-width: 100%;
    padding: 2rem;
    margin-top: 12px;
  }

  .contact-info-card {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 12px;
  }

  .contact-info-block {
    text-align: center;
    margin-bottom: 0;
  }

  .contact-socials {
    margin-top: 8px;
    justify-content: center;
  }

  #contact .circle {
    top: -15%;
    left: 60%;
    width: 320px;
    z-index: 1;
  }

  .bathroom-hero .wrapper {
    padding: 0;
  }

  /* partOne: slika + naslov (gore) */
  .bathroom-hero .wrapper .partOne {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* naslov ulevo */
    gap: 16px;
  }

  .bathroom-hero .wrapper .partOne .image {
    width: 70%;
    max-width: 520px; /* po želji */
    margin: 0;
  }

  .bathroom-hero .wrapper h2 {
    padding: 20px; /* ili manje ako ti header smeta */
    font-size: 26px;
    line-height: 1.2;
    margin: 0;
    text-align: left;
  }

  /* partTwo: tekst pa video */
  .bathroom-hero .wrapper .partTwo {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 20px 0 0;
    padding: 0;
  }

  .bathroom-hero .wrapper .partTwo .text {
    margin: 0; /* skini 15rem */
    padding: 20px;
    max-width: 100%;
    text-align: left;
  }

  .bathroom-hero .wrapper .partTwo video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0; /* skini -50rem */
  }

  /* header wrapper na bathroom page: ulevo, ne centar */
  .bathroom-page .header-wrapper {
    text-align: left;
    padding: 0 20px;
  }

  .bathroom-page .header-wrapper .section-header {
    margin-left: 0;
    white-space: normal;
    overflow-wrap: break-word;
    min-width: unset;
    line-height: 1.3;
    font-size: 20px;
  }

  /* bathroom gallery dugmad normalno */
  #bathroom-gallery {
    padding-top: 50px;
  }

  .bathroom-hero .wrapper button {
    padding-top: 0;
    position: absolute;
    right: -5%;
    top: 10%;
  }

  #bathroom-gallery .gallery-button {
    left: 15%;
    transform: translateX(-50%);
    top: auto;
    bottom: 400px;
  }
  .gallery-container .slide .gallery-item {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
  }

  .ideas-content .text-block {
    width: 100%;
    padding-left: 0;
    padding: 20px;
  }
  .ideas-content .inspiration-image {
    width: 100%;
  }

  .ideas-content {
    flex-direction: column-reverse;
    flex-direction: column; /* prvo tekst, pa slika */
  }

  .ideas-content .text-block {
    width: 100%;
    padding-left: 0;
    padding: 20px;
  }

  .ideas-content .inspiration-image {
    width: 100%;
  }
  .best-designer-ever p {
    font-size: 8px;
    padding: 0.05rem;
    max-width: 40px;
  }

  #ideas-inspiration .circle {
    top: 47%;
    left: 20%;
    width: 400px;
  }

  #bathroom-gallery .gallery-button button img {
    filter: brightness(0) invert(1) !important;
  }
}

/* === TABLET (769px – 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    padding: 0;
  }
  /* #moreBtn {
    display: block;
  }
  .hiddenText {
    display: none;
  }
  .hiddenText.show {
    display: block;
  }
  .empty-div {
    display: none;
  }
  .nav-container {
    padding: 0 40px;
  }
  .nav .logo {
    margin-right: 0;
  }
  .nav .logo img {
    width: 6rem;
  } */

  #hero,
  #projects {
    padding: 0 40px;
  }
  #hero,
  #about-us {
    height: unset;
    min-height: unset;
  }
  #hero .wrapper {
    margin-bottom: 50px;
  }

  .hero-right {
    margin-top: 0%;
    margin-right: 0%;
    position: absolute;
    top: 20%;
    left: 27%;
  }

  .hero-right-paragraph {
    font-size: 12px;
    line-height: 1.8;
  }
  .hero-right-image img {
    width: 40vw;
  }
  .hero-right-image {
    top: -25%;
  }

  .hero-right-image-mobile {
    top: -15%;
  }

  .hero-right-image-mobile img {
    width: 384px; /* fiksno u tom opsegu */
    max-width: none;
  }
  .hero-bathroom,
  .hero-architecture-luxury {
    font-size: 42px;
  }
  .hero-architecture-luxury {
    font-size: 42px;
  }
  .rectangle-168 {
    transform: translateY(-10px);
  }
  .rectangle-168 {
    width: 120px;
    height: 4px;
    background-color: var(--gray-color);
    border-radius: 116.5px;
    transform: translateY(-6px);
  }

  .hero-right-rectangle-169 {
    margin-top: 30px;
    font-weight: 600;
  }

  .hero-left-paragraph {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
  }

  .section-header {
    font-size: 36px;
  }

  .hero-left-bottom-row {
    gap: 40px;
    margin-top: 30px;
  }

  .btn-primary {
    width: 120px;
    height: 90px;
  }
  .hero-left-paragraph {
    max-width: 250px;
    margin-top: 0;
  }

  #about-us .circle {
    width: 400px;
    height: 400px;
    top: -20%;
    right: -55%;
  }
  .about-content {
    flex-direction: column;
  }
  .about-content .text {
    justify-content: center;
  }
  .about-content .text .dark-oval {
    width: 190px;
    height: 320px;
    padding-top: 35px;
  }
  .about-content .text h2 {
    color: var(--gray-blue-color);
    margin-left: 76%;
    padding-top: 20px;
  }
  .about-content .text .light-oval {
    width: 330px;
    height: 620px;
    padding: 0 25px;
    padding-bottom: 200px;
  }

  .about-content .text .paragraph {
    padding-top: 200px;
  }

  .about-content .text .paragraph p {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
  }
  .image-moto-wrapper {
    position: relative;
    margin-top: 0;
    margin-top: -25%;
    margin-left: 15%;
    flex-direction: row;
    gap: 20px;
  }
  .about-content .image {
    margin-top: 2rem;
    width: 14rem;
    height: 22rem;
    border-radius: 7rem 7rem 0 0;
  }
  .blue-dot-about {
    left: 44%;
    width: 1.6rem;
    height: 1.6rem;
    top: 18%;
  }
  #projects {
    margin-top: 50px;
    padding: 0 90px;
  }

  #projects .projects-swiper {
    margin-top: -10rem;
  }
  #projects .swiper-button-prev-custom,
  #projects .swiper-button-next-custom {
    top: 25%;
  }
  #projects .projects-card {
    align-items: center;
    margin-bottom: 38rem;
  }
  #projects .swiper-slide .projects-card-content {
    align-items: center;
    text-align: center;
  }
  #projects .swiper-slide .projects-card-btn {
    margin: 0 auto;
  }
  #projects .paragraph p {
    font-size: 12px;
    max-width: 20rem;
    font-weight: 400;
    line-height: 1.6;
  }

  #projects .swiper-slide .projects-card-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
  }
  #projects .circle {
    top: -10%;
    left: 35%;
    width: 400px;
  }

  /* =========================
   HOWTO (CENTER + NO LINES + REALIZACIJA FIRST)
   ========================= */

  /* skini negativne margine */
  #howto {
    margin-top: -32rem !important;
    padding: 0;
  }

  /* header centar */
  #howto .header-wrapper.howto-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #howto .section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
    word-break: break-word;
    min-width: unset;
  }

  /* TOP steps: 1 kolona, sve centar */
  #howto .partOne.howto-steps {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 26px;
    text-align: center;
  }

  /* ukloni crtice koje spajaju pill-ove (pseudo linije) */
  #howto .partOne.howto-steps .content::after {
    display: none !important;
  }

  /* ukloni divider elemente (ako postoje u markup-u) */
  #howto .partOne.howto-steps .divider {
    display: none !important;
  }

  /* kartice centar */
  #howto .partOne.howto-steps .content {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
  }

  /* pill centar */
  #howto .partOne.howto-steps .subheading.howto-pill {
    margin-left: auto;
    margin-right: auto;
  }

  /* tekst ispod pill-a centar + bez max-width limita */
  #howto .partOne.howto-steps p {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.7;
    max-width: none;
    text-align: center;
  }

  /* BOTTOM: 1 kolona, sve centar */
  #howto .partTwo.howto-bottom {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 44px;
  }

  /* REALIZACIJA prvo, pa process-card (GRID redosled) */
  #howto .partTwo.howto-bottom .dark-oval.howto-bigcircle {
    grid-row: 1;
    margin-left: -0.05rem;
  }

  #howto .partTwo.howto-bottom .text.howto-process-card {
    grid-row: 2;
  }

  /* process-card centar */
  #howto .partTwo .text.howto-process-card {
    align-items: center;
    text-align: center;
  }

  /* process-kicker/desc/line centar (da sve bude elegantno) */
  #howto .partTwo .process-kicker {
    text-align: center;
  }

  #howto .partTwo .process-line {
    margin-left: auto;
    margin-right: auto;
  }

  #howto .partTwo .process-desc {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* dugme: slova centar u 2 reda */
  #howto .partTwo .process-btn {
    text-align: center;
    line-height: 1.15;
  }

  /* sakrij dekor krugove u ovom breakpoint-u */
  #howto .partTwo .decor-circle {
    display: none !important;
  }

  #howto .partTwo .process-kicker p {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--dark-gray-color);
    margin: 0;
    line-height: 1.6;
  }

  #howto .partTwo .process-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 100px;
    background: var(--gray-color);
    color: var(--dark-blue-color);
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
  }

  #recensions
    .recensions-swiper
    .swiper-wrapper
    .recension-card
    .recension-content {
    padding: 1rem;
  }
  #recensions .recensions-swiper .swiper-wrapper .recension-card {
    flex-direction: column;
    padding: 0;
  }

  #recensions
    .recensions-swiper
    .swiper-wrapper
    .recension-card
    .recension-content {
    flex: 0 1 20px;
    max-width: 450px;
    margin: 0;
    color: var(--white-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

  #recensions .swiper-pagination {
    position: static !important;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-top: 0.1px;
    padding-bottom: 0.1px;
  }

  #recensions .circle {
    width: 500px;
    left: 30rem;
    top: -5rem;
  }
  #recensions .header-wrapper {
    padding-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    margin-left: 0;
  }

  #gallery .wrapper {
    max-width: none;
  }
  .gallery-container {
    width: 700px;
    height: 500px;
    --gallery-item-position: 85%;
    padding: 0;
    margin: 0;
  }

  .gallery-item .gallery-content {
    position: absolute;
    top: 55%;
    left: 100px;
    width: 300px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
  }

  .gallery-button {
    left: -12rem;
    top: 85%;
  }

  #gallery .circle {
    width: 400px;
    left: 30rem;
    top: 1rem;
  }

  /* BLOG (1024–1439): slika gore, full-bleed, tekst ispod */
  #blog .blog-card {
    display: flex;
    flex-direction: column;
  }

  #blog .blog-image {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* probija body padding */
    overflow: hidden;
  }

  #blog .blog-image img {
    width: 100%;
    height: 400px; /* po ukusu */
    object-fit: cover;
    display: block;
  }

  #blog .blog-content {
    width: 100%;
    padding: 60px 60px 0 60px;
  }

  #blog .blog-title {
    font-size: 24px;
  }

  #blog .blog-text {
    font-size: 12px;
  }
  .blog-navigation {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 56%;
    transform: translate(50%, 50%);
    left: 35%;
    gap: 30px;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
  }

  #blog .circle {
    top: -30%;
    right: 1%;
    width: 500px;
  }
  /* MOBILE/TABLET CONTACT: široka slika + široka forma */
  .contact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .contact-form-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dark-olive-color);
  }

  /* glavni levi blok (slika + forma) neka bude full širina */
  .contact-left-side {
    width: 100%;
    max-width: 900px; /* povećaj/ukloni ako hoćeš full skroz */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
  }

  /* SLika full širina roditelja */
  .contact-photo {
    width: 100%;
    height: auto;
    order: 1;
  }

  .contact-photo img {
    width: 100%;
    height: 420px; /* po želji 280–420 */
    object-fit: cover;
    display: block;
  }

  /* Forma full širina roditelja */
  .contact-form-card {
    width: 100%;
    max-width: 900px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 2;
  }

  .contact-form {
    width: 100%;
  }

  /* pregazi base width:50% i sve suzi */
  .contact-form input,
  .contact-form textarea {
    width: 100% !important;
    max-width: 100%;
  }

  .contact-submit-btn {
    width: 100% !important;
    max-width: 100%;
    margin-top: 12px;
    padding: 2rem;
  }

  /* Info block ispod */
  .contact-info-card {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    order: 3;
    padding: 0 12px;
  }

  .contact-info-block {
    text-align: center;
    margin-bottom: 0;
  }

  .contact-socials {
    margin-top: 8px;
    justify-content: center;
  }
  .bathroom-hero .wrapper .partOne .image {
    width: 95%;
  }
  .bathroom-hero .wrapper h2 {
    align-items: start;
    font-size: 24px;
    font-weight: 400;
    color: var(--dark-olive-color) #675e26;
    font-family: "Megrim", sans-serif;
    letter-spacing: 0.1em;
    padding-top: 180px;
  }
  .bathroom-hero .wrapper .partTwo {
    flex-direction: column;
  }
  .bathroom-hero .partTwo .text {
    margin-top: 15rem;
    margin-left: 1rem;
    max-width: 18rem;
  }

  .bathroom-hero .wrapper .partTwo video {
    width: 400px;
    height: auto;
    z-index: 90;
    display: block;
    margin-top: -30rem;
    margin-left: 24rem;
  }
  .bathroom-page .header-wrapper .section-header {
    margin-left: 0;
  }
  .bathroom-page .header-wrapper {
    text-align: center;
  }
  .bathroom-page .header-wrapper .section-header {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    min-width: unset;
    line-height: 1.3;
    font-size: 26px;
  }
  #bathroom-gallery .slide .gallery-item:nth-child(1),
  #bathroom-gallery .slide .gallery-item:nth-child(2) {
    width: 100%;
  }

  #bathroom-gallery {
    padding-top: 50px;
  }
  #bathroom-gallery .gallery-button {
    left: 8%;
    top: 110%;
  }

  #ideas-inspiration .circle {
    top: 45%;
    left: -25%;
    width: 400px;
    z-index: 99;
  }

  #contact .circle {
    top: -15%;
    left: 60%;
    width: 400px;
    z-index: 99;
  }

  .bathroom-hero .wrapper .partTwo .text {
    padding: 0;
  }
  .ideas-content {
    flex-direction: column-reverse;
    gap: 60px;
  }
  .ideas-content .text-block {
    width: 100%;
  }
  .ideas-content .inspiration-image {
    width: 100%;
  }
  .best-designer-ever p {
    font-size: 10px;
    padding: 0.2rem;
    max-width: 80px;
  }
}
/* === LAPTOP (1024px – 1439px) === */
@media (min-width: 1024px) and (max-width: 1439px) {
  body {
    padding: 0;
  }

  p {
    font-size: 14px;
  }
  #hero,
  #projects {
    padding: 0 40px;
  }
  .hero-right {
    margin-top: 0%;
    margin-right: 0%;
    position: absolute;
    top: 10%;
    left: 40%;
  }
  .hero-right-paragraph {
    font-size: 0.8rem;
  }
  .hero-right-image {
    top: -25%;
  }

  .hero-right-image img {
    width: 40vw;
    z-index: 100;
    position: relative;
  }

  .hero-bathroom {
    margin-top: -5%;
  }
  .hero-bathroom,
  .hero-architecture-luxury {
    font-size: 64px;
  }
  .hero-architecture-luxury {
    font-size: 64px;
  }
  .hero-right-rectangle-169 {
    margin-top: 20px;
  }

  .hero-left-paragraph {
    max-width: 400px;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 20px;
    font-family: "Inter", sans-serif;
    color: var(--dark-blue-color);
    margin-top: 20px;
    margin-left: -3rem;
  }

  .section-header {
    font-size: 40px;
  }

  #about-us {
    margin-top: 5rem;
  }
  .about-content .text .dark-oval {
    width: 300px;
  }
  .about-content .text .light-oval {
    width: 400px;
    height: 900px;
  }
  .about-content .text .paragraph {
    padding-top: 400px;
    font-size: 14px;
  }
  .about-content .text .paragraph p {
    padding-top: -30px;
    font-size: 14px;
    font-weight: 400;
  }
  .about-content .image {
    width: 20rem;
    height: 40rem;
  }

  #about-us .circle {
    top: -20%;
    right: 5%;
  }

  .blue-dot-about {
    width: 35px;
    height: 35px;
  }

  .circle {
    width: 400px;
    height: 400px;
  }

  #projects .wrapper {
    margin-left: 2rem;
  }

  #projects .swiper-button-prev-custom,
  #projects .swiper-button-next-custom {
    top: 40%;
  }
  #projects .swiper-button-next-custom {
    right: 0;
  }

  #projects .projects-swiper {
    margin-top: -18rem;
    margin-left: 0rem;
  }

  #projects .swiper-slide .projects-card-text {
    height: 8rem;
    width: 60%;
  }

  #projects .wrapper .paragraph {
    margin-bottom: 2rem;
    max-width: 30rem;
  }

  #projects .swiper-wrapper {
    box-sizing: initial;
    display: flex;
    height: 110%;
    position: relative;
    transition-property: transform;
    transition-timing-function: var(
      --swiper-wrapper-transition-timing-function,
      initial
    );
    z-index: 1;
  }
  #projects .swiper-slide .projects-card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding-bottom: 125px;
  }

  #howto {
    margin-top: 5rem;
    padding: 0 1rem;
  }

  #howto .partOne .content .subheading {
    border: 1px solid var(--dark-olive-color);
    border-radius: 35px;
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--dark-blue-color);
  }

  .partOne.howto-steps p {
    margin: 16px 0 0;
    color: #3b4548;
    font-size: 12px;
    line-height: 1.7;
    max-width: 260px;
  }

  #howto .partTwo .text {
    width: 500px;
  }

  #howto .partTwo .dark-oval {
    width: 450px;
    height: 450px;
  }

  #howto .partTwo .dark-oval p {
    padding: 3rem 3rem;
  }

  #howto .partTwo .text.howto-process-card {
    width: 400px;
    min-height: 400px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    text-align: left;
  }

  #howto .partTwo .process-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: var(--gray-color);
    color: var(--dark-blue-color);
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 24px 15px 30px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    margin-top: 10px;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
    text-align: center;
    line-height: 1.2;
  }

  .howto-process-card .process-desc {
    max-width: 450px;
    color: #3b4548;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 28px;
  }

  #howto .partTwo .decor-1 {
    width: 310px;
    height: 310px;
    left: 52%;
    top: 20px;
    transform: translateX(-50%);
  }

  .partTwo .decor-2 {
    width: 230px;
    height: 230px;
    right: -120px;
    top: -110px;
    opacity: 0.45;
  }

  #recensions .recensions-swiper .swiper-wrapper .recension-card {
    padding: 1rem;
  }
  #recensions .header-wrapper {
    padding-top: 70px;
  }

  #recensions .swiper-pagination {
    position: static !important;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #recensions .circle {
    top: -10%;
    right: -60%;
    width: 50rem;
  }
  .gallery-container {
    max-width: 1024px;
    margin: 0;
    padding: 0;
  }
  .gallery-button {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 70%;
    left: -27%;
  }

  /* BLOG (1024–1439): slika gore, full-bleed, tekst ispod */
  #blog .blog-card {
    display: flex;
    flex-direction: column;
  }

  #blog .blog-image {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* probija body padding */
    overflow: hidden;
  }

  #blog .blog-image img {
    width: 100%;
    height: 360px; /* po ukusu */
    object-fit: cover;
    display: block;
  }

  #blog .blog-content {
    width: 100%;
    padding: 60px;
  }

  #blog .blog-title {
    font-size: 24px;
  }

  #blog .blog-text {
    font-size: 12px;
  }
  .blog-navigation {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 55%;
    transform: translate(50%, 50%);
    left: 40%;
    gap: 30px;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
  }

  #blog .circle {
    top: -30%;
    right: 1%;
    width: 500px;
  }
  .contact-photo {
    width: 250px;
  }

  .contact-left-side {
    width: 100%;
  }
  .contact-form-title {
    font-size: 24px;
  }
  .contact-form input,
  .contact-form textarea {
    width: 65%;
  }

  .bathroom-hero .wrapper .partTwo {
    margin-top: 0px;
  }
  .bathroom-hero .wrapper .partTwo .text {
    padding-bottom: 400px;
    padding-left: 40px;
    padding-right: 10px;
  }
  .bathroom-hero .wrapper .partTwo video {
    width: 450px;
  }
  .bathroom-hero .wrapper .partTwo .circle {
    left: 20%;
  }
  .bathroom-hero .wrapper h2 {
    align-items: start;
    font-size: 32px;
    font-weight: 400;
    color: var(--dark-olive-color);
    font-family: "Megrim", sans-serif;
    letter-spacing: 0.1em;
    padding-top: 180px;
  }

  .ideas-content {
    flex-direction: column;
  }

  .ideas-content .text-block {
    width: 100%;
    flex-direction: column;
    padding-left: 0;
    padding: 40px 80px;
    align-items: flex-start;
  }

  .ideas-content .inspiration-image {
    width: 100%;
    z-index: 99;
  }

  .ideas-content .inspiration-image img {
    width: 70%;
    height: auto;
    aspect-ratio: 961 / 677;
    object-fit: cover;
  }

  #bathroom-gallery .gallery-button {
    left: -30%;
    top: unset;
    bottom: 50%;
  }

  .gallery-button button img,
  .blog-navigation button img {
    filter: brightness(0) invert(1);
  }

  #contact .circle {
    top: -40%;
    right: 5%;
    z-index: 99;
    width: 25rem;
  }
  .best-designer-ever p {
    font-size: 10px;
    padding: 0.2rem;
    max-width: 80px;
  }
}
/* === DESKTOP (1440px – 1919px) === */
@media (min-width: 1440px) and (max-width: 1919px) {
  /* RESET */
  body {
    padding: 0;
    margin: 0;
  }

  /* HERO */
  #hero {
    padding: 0 80px;
  }

  .hero-left-first-block {
    padding-top: 200px;
    margin-right: 20rem;
  }

  .hero-right {
    margin-top: 0%;
    margin-right: 0%;
    position: absolute;
    top: 1%;
    left: 50%;
  }

  .hero-right-image {
    top: -50%;
    right: -2%;
  }

  .hero-right-image img {
    width: 36.5vw;
  }

  .hero-left-paragraph {
    font-size: 14px;
    max-width: 450px;
    letter-spacing: 0.1rem;
    font-weight: 400;
  }

  /* ABOUT */
  #about-us .circle {
    top: -20%;
    right: 1%;
    width: 600px;
    height: 600px;
  }

  .blue-dot {
    width: 34px;
    height: 35px;
  }

  .about-content .text .dark-oval {
    width: 330px;
    height: 550px;
  }

  .about-content .text .light-oval {
    width: 470px;
  }

  .about-content .text .paragraph p {
    max-width: 22rem;
    padding-left: 1.5rem;
    letter-spacing: 0.1rem;
    line-height: 1.4rem;
    font-size: 14px;
    font-weight: 400;
  }

  /* =========================
     PROJECTS (OVDE TI JE BITNO)
     ========================= */

  #projects .wrapper {
    width: 100%;
    margin-left: 2rem;

    padding: 0 100px;
    position: relative; /* bitno */
    box-sizing: border-box;
  }

  #projects .wrapper .paragraph p {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.1rem;
  }

  #projects .swiper-slide .projects-card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding-bottom: 50px;
  }

  #projects .swiper-slide {
    height: 60rem;
    font-size: 10px;
  }

  #projects .projects-swiper {
    padding-bottom: 5rem;
    margin: 0 auto;
    height: 100vh;
    margin-top: -22%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1920px;
  }

  #projects .swiper-slide .projects-card-text {
    height: 6rem;
    font-size: 12px;
    max-width: 18rem;
  }

  #projects .wrapper .text {
    margin-left: 12rem;
    max-width: 30rem;
    margin-bottom: 10%;
  }

  /* BITNO: ovo je roditelj za absolute strelice */
  #projects .wrapper > div:last-child {
    position: relative;
  }

  /* Strelice - 1440 kontrola */
  #projects .swiper-button-prev-custom,
  #projects .swiper-button-next-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }

  #projects .swiper-button-prev-custom {
    left: -3.5rem;
  }

  #projects .swiper-button-next-custom {
    right: 1rem;
  }

  #projects .circle {
    top: -22%;
    left: 44%;
    width: 38rem;
    height: 38rem;
  }

  .partTwo .decor-1 {
    width: 270px;
    height: 270px;
    left: 25%;
    top: 5%;
    opacity: 2;
  }
  .partTwo .decor-2 {
    width: 230px;
    height: 230px;
    right: -100px;
    top: -10px;
    opacity: 2;
  }

  #howto {
    margin-top: 8%;
    padding: 0 80px;
  }

  /* RECENSIONS */

  #recensions .recensions-swiper .swiper-wrapper .recension-card {
    display: flex;
    justify-content: center; /* centar cele kompozicije */
    align-items: center;
    gap: 60px;

    /* centar + kontrolisan padding */
    max-width: 180rem;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
  }
  #recensions .swiper-pagination {
    padding-top: 10px;
    padding-bottom: 80px;
  }

  #recensions .circle {
    top: -15%;
    right: -30%;
    width: 45rem;
  }

  /* GALLERY (ako želiš da ostane u ovom MQ) */
  #gallery .wrapper {
    max-width: none;
  }
  .gallery-container {
    width: 1050px;
    height: 750px;
    margin: 0 80px;
  }

  #gallery .circle {
    top: 1%;
    right: 1%;
    width: 45rem;
  }

  .gallery-button {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 74%;
    left: -27.5%;
  }

  /* BLOG */
  .blog-title {
    font-size: 28px;
  }

  .blog-text {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    max-width: 88rem;
  }

  #blog .blog-image img {
    width: 100%;
    height: auto; /* prilagodi: 18–28rem */
    object-fit: contain;
    display: block;
    padding: 0;
    margin: 0;
  }
  .blog-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  #blog .circle {
    top: -35%;
    right: 60%;
    width: 45rem;
  }

  .partTwo .decor-2 {
    width: 330px;
    height: 330px;
    right: -10px;
    top: -10px;
    opacity: 2;
  }

  /* CONTACT */

  .contact-photo {
    width: 22rem;
  }

  .contact-left-side {
    width: 100%;
  }

  .contact-form-title {
    font-size: 22px;
  }

  .contact-form input,
  .contact-form textarea {
    width: 55%;
  }

  .best-designer-ever p {
    font-size: 10px;
    padding: 0.2rem;
    max-width: 80px;
  }

  #contact .circle {
    top: -20%;
    right: 15%;
    width: 35rem;
  }

  .bathroom-hero .wrapper .partTwo {
    display: flex;
    gap: 60px;
    margin-right: 15%;
    margin-top: -15%;
  }

  .bathroom-hero .wrapper .partTwo video {
    width: 550px;
    height: auto;
    z-index: 90;
    display: block;
  }
  .bathroom-hero .wrapper .partTwo .text {
    padding-left: 220px;
    padding-right: 110px;
    padding-bottom: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
  }
  .bathroom-page .circle {
    width: 500px;
    height: 500px;
  }
  .bathroom-hero .wrapper .partTwo .circle {
    left: 30vw;
    top: 60%;
  }
  #bathroom-gallery .wrapper {
    padding: 0 90px;
  }
  #bathroom-gallery .gallery-button {
    left: -33%;
    top: 70%;
  }

  .bathroom-page .header-wrapper .section-header {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin-top: 50px;
    margin-bottom: 20px;
  }

  #bathroom-gallery .circle {
    top: 35%;
    left: 50%;
  }
  #bathroom-gallery .gallery-button button img {
    filter: brightness(0) invert(1);
  }

  #ideas-inspiration .section-header {
    margin-left: 19.5%;
  }

  .inspiration-image {
    max-width: 40rem;
  }

  .ideas-content {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 5%;
  }
  #ideas-inspiration {
    margin-top: 250px;
    margin-bottom: 250px;
  }
  #ideas-inspiration .circle {
    top: 62%;
    left: -18%;
    width: 30rem;
    height: 80rem;
  }
}

/* === DESKTOP (1920+) === */

/* #TODO -> textarea active */
/* === DESKTOP (1920+) === */
@media (min-width: 1920px) {
  body {
    padding: 0;
    margin: 0;
  }

  .wrapper {
    max-width: max-content;
  }

  p {
    letter-spacing: 0.1rem;
    line-height: 1.4rem;
    font-size: 16px;
  }

  #hero,
  #projects {
    padding: 0 100px;
  }

  .hero-left-first-block {
    padding-top: 300px;
  }

  .hero-right {
    margin-top: 0%;
    margin-right: 0%;
    position: absolute;
    top: 1%;
    left: 55%;
  }
  .hero-right-paragraph p {
    font-size: 1.2rem;
    text-align: left;
    letter-spacing: 0.3rem;
    line-height: 3rem;
  }
  .hero-right-image {
    top: -35%;
  }

  .hero-left-paragraph {
    font-size: 16px;
    max-width: 610px;
    letter-spacing: 0.15rem;
    font-weight: 400;
  }
  .hero-bathroom,
  .hero-architecture-luxury {
    font-size: 140px;
  }
  .hero-left-bottom-row {
    display: flex;
    align-items: flex-start;
    gap: 182px;
  }

  .hero-architecture-luxury {
    font-size: 140px;
  }

  .hero-right-rectangle-169 {
    margin-top: 50px;
  }

  .section-header {
    font-size: 80px;
  }

  #about-us .circle {
    top: -30%;
    right: -5%;
  }
  .about-content .text .dark-oval {
    width: 350px;
    height: 700px;
  }
  .about-content .text .light-oval {
    width: 500px;
  }
  .about-content .text .paragraph {
    padding-top: 480px;
    max-width: 22rem;
    padding-left: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 1.4rem;
  }
  .about-content .image {
    width: 30rem;
    height: 55rem;
  }

  .blue-dot {
    width: 3rem;
    height: 3rem;
    background-color: var(--light-blue-color);
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 2rem;
    top: 10%;
  }

  #projects .wrapper {
    max-width: 1920px;
    margin: 0 auto; /* centriranje wrappera */
    padding: 0 10px; /* umesto margin: 0 10px */
    position: relative; /* da apsolutne strelice imaju referencu */
    box-sizing: border-box;
  }

  #projects .swiper-slide .projects-card-text {
    height: 6rem;
    font-size: 16px;
    max-width: 22rem;
  }

  #projects .projects-swiper {
    padding-bottom: 5rem;
    margin: 0 auto;
    height: 100vh;
    margin-top: -150px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1920px;
  }
  #projects .swiper-button-prev-custom,
  #projects .swiper-button-next-custom {
    top: 55%;
  }

  #projects .swiper-button-prev-custom {
    left: -6rem;
  }
  #projects .swiper-button-next-custom {
    right: 3rem;
  }

  #howto .wrapper {
    padding: 2rem 2rem;
  }

  #howto .partOne .content .subheading {
    font-size: 16px;
    text-transform: uppercase;
  }
  #howto .partOne .content p {
    font-size: 16px;
    padding-left: 0.19rem;
    letter-spacing: 0.1rem;
    line-height: 1.4rem;
  }

  #howto .partTwo .text {
    width: 500px;
  }
  #howto .partTwo .dark-oval {
    width: 520px;
    height: 520px;
  }
  #howto .partTwo .dark-oval p {
    padding: 1rem 1rem;
    font-size: 16px;
  }

  #howto .partTwo .circle {
    width: 500px;
    height: 500px;
    right: 23%;
    top: 70%;
  }
  #howto .partTwo .process-kicker p {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--dark-gray-color);
    margin: 0;
    line-height: 1.6;
    font-weight: 600;
  }
  .dark-oval .howto-bigpill {
    font-size: 16px;
  }
  #howto .partTwo .process-desc {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: var(--dark-blue-color);
    margin: 0;
  }
  #howto .partTwo .process-btn {
    font-weight: 700;
    font-size: 16px;
  }

  .partTwo .decor-1 {
    width: 380px;
    height: 380px;
    left: 45%;
    top: 80%;
    transform: translateX(-10%);
    opacity: 2;
  }
  .partTwo .decor-2 {
    width: 450px;
    height: 450px;
    right: -10%;
    top: -10%;
    opacity: 1;
  }
  #recensions .recensions-swiper .swiper-wrapper .recension-card {
    padding: 0;
  }

  #recensions
    .recensions-swiper
    .swiper-wrapper
    .recension-card
    .recension-image
    img {
    width: 32rem;
    height: 32rem;
    margin-left: 0;
    display: block;
    object-fit: cover;
  }

  #recensions
    .recensions-swiper
    .swiper-wrapper
    .recension-card
    .recension-content {
    flex: 0 1 980px;
    max-width: 980px;
    margin: 0;
    text-align: left;
    color: var(--white-color);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
  .gallery-container {
    width: 1700px;
    height: 1100px;
    margin-left: -130px;
  }

  .blog-title {
    font-size: 32px;
  }
  .blog-swiper-container {
    position: relative;
    background-color: var(--dark-blue-color);
    min-width: 180rem;
  }

  #blog .blog-image img {
    width: 100%;
    height: 60rem; /* prilagodi: 18–28rem */
    object-fit: cover;
    display: block;
    padding: 0;
    margin: 0;
  }
  #blog .circle {
    top: -40%;
    right: 75%;
    width: 45rem;
  }
  .contact-photo {
    width: 36rem;
  }

  .contact-left-side {
    width: 85%;
  }
  .contact-form-title {
    font-size: 22px;
    font-weight: 500;
  }
  .contact-form input,
  .contact-form textarea {
    width: 65%;
  }

  .best-designer-ever p {
    font-size: 12px;
    padding: 0.2rem;
  }

  /* kupatilo strana */
  .bathroom-hero .wrapper {
    max-width: 920px;
    position: relative;
    margin-inline: auto;
  }
  .bathroom-hero .wrapper .partTwo {
    margin-top: 0;
  }
  .bathroom-hero .wrapper .partTwo .text {
    padding-left: 30rem;
    padding-right: 20rem;
    padding-bottom: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8rem;
  }

  .bathroom-hero p {
    font-size: 18px;
    line-height: 1.8rem;
  }

  .bathroom-hero .wrapper .partTwo video {
    margin-top: -20%;
    width: 750px;
  }

  .bathroom-hero .wrapper .partTwo .circle {
    top: 25%;
    left: 35%;
    width: 100rem;
    height: 50rem;
  }

  .bathroom-page .header-wrapper .section-header {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 38rem;
  }

  /* === BATHROOM PAGE: global wrapper centar (za sve sekcije) === */
  .bathroom-page .wrapper {
    width: 100%;
    max-width: 1920px; /* limit cele stranice */
    margin: 0 auto; /* centar */

    box-sizing: border-box;
    position: relative;
  }
  /* === GALLERY SECTION === */
  #bathroom-gallery {
    padding-top: 150px;
    position: relative;
    overflow: hidden;
  }

  #bathroom-gallery .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* sve u sredinu */
  }

  /* Header centar (bez margin-left hacka) */
  #bathroom-gallery .header-wrapper {
    width: 100%;
    margin-left: 53%;
    margin-bottom: 50px;
  }

  #bathroom-gallery .section-header {
    margin: 0; /* skini margin-left */
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 500;
  }

  /* Galerija u centru */
  #bathroom-gallery .gallery-container {
    position: relative;
    width: min(1200px, 100%); /* centrirana i responsive */
    height: 800px;
    margin: 0 auto;
    --gallery-item-position: 72.5%;
  }
  /* Dugmići: centar dole (bez left:70%) */
  #bathroom-gallery .gallery-button {
    position: absolute;
    left: 40%;
    transform: translateX(-50%);
    top: 87%;
    width: auto;
  }
  #bathroom-gallery .gallery-button {
    position: absolute;
    left: 17%;
    transform: translateX(-50%);
    top: 57%;
    width: auto;
    background: transparent;
  }

  #bathroom-gallery .gallery-button img {
    filter: brightness(0) invert(1);
  }

  /* .gallery-item {
  width: 180px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 90px;
  background-position: 50% 50%;
  background-size: cover;
  display: inline-block;
  transition: 0.5s;
  box-shadow: 24px 15px 30px 0 rgba(0, 0, 0, 0.25);
} */

  #bathroom-gallery .circle {
    position: absolute;
    top: 1%;
    left: 20%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    width: 700px;
    height: 700px;
  }
  #bathroom-gallery .wrapper {
    position: relative;
    z-index: 1;
  }

  .inspiration-image {
    max-width: 40rem;
  }

  .ideas-content {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 5%;
  }
  #ideas-inspiration {
    margin-top: 250px;
    margin-bottom: 250px;
  }
  #ideas-inspiration .circle {
    top: 62%;
    left: 8%;
    width: 30rem;
    height: 80rem;
  }

  /* ===== PROCESS PAGE (DETALJI PROCESA) ===== */

  .process-page {
    background: #f3f3f0;
    padding: 70px 0 110px;
    position: relative;
    overflow: hidden;
  }

  .process-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 48px;
    z-index: 2;
  }

  /* LEFT */
  .process-aside {
    position: relative;
  }

  .process-logo-badge {
    position: sticky;
    top: 90px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #052127;
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  /* RIGHT TEXT */
  .process-content {
    position: relative;
  }

  .process-text {
    max-width: 720px;
    font-size: 13px;
    line-height: 1.8;
    color: #2e383b;
  }

  .process-text h3 {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0d2026;
    font-weight: 800;
  }

  .process-text p {
    margin: 0 0 22px;
  }

  /* ===== DECOR BACKGROUND (arc + rings) ===== */
  .process-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .process-decor .arc {
    position: absolute;
    right: -260px;
    top: -160px;
    width: 980px;
    height: 980px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 40px 0 70px rgba(0, 0, 0, 0.18);
  }

  /* thin rings */
  .process-decor .ring {
    position: absolute;
    border: 1px solid rgba(176, 139, 71, 0.55);
    border-radius: 50%;
    opacity: 0.65;
  }

  .process-decor .r1 {
    width: 520px;
    height: 520px;
    right: -210px;
    top: -40px;
  }

  .process-decor .r2 {
    width: 760px;
    height: 760px;
    right: -360px;
    top: 60px;
    opacity: 0.45;
  }

  .process-decor .r3 {
    width: 520px;
    height: 520px;
    left: -240px;
    top: 290px;
    opacity: 0.35;
  }

  .process-decor .r4 {
    width: 680px;
    height: 680px;
    left: -360px;
    top: 560px;
    opacity: 0.25;
  }
}

/* Dugme “Pozovi” – stoji iznad Designed by badge-a */
.mobile-call-badge {
  position: absolute; /* da prati isti kontejner kao badge */
  right: 0;
  bottom: 64px; /* POMERI IZNAD (podesi 56–80px po ukusu) */
  width: 58px;
  height: 58px;
  background: var(--dark-blue-color); /* tamno plava */
  border-radius: 6px; /* isti “kockasti” vibe */
  display: grid;
  place-items: center;
  z-index: 999;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

/* Ikonica TIL plava */
.mobile-call-icon {
  width: 26px;
  height: 26px;
  fill: var(--light-blue-color);
}

/* desktop/tablet sakrij */
@media (min-width: 768px) {
  .mobile-call-badge {
    display: none;
  }
}

/* roditelj mora da bude referenca */
.contact-wrapper,
.contact-content {
  position: relative;
}

/* “Designed by” ostaje dole desno kako želiš */
.best-designer-ever {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 20;
}

/* GLOBAL CALL BADGE (mobile only) */
.global-call-badge {
  position: fixed;
  right: 10px;
  bottom: 90px; /* iznad "Designed by" badge-a */
  width: 45px;
  height: 45px;
  background: var(--dark-blue-color);
  border-radius: 50px;
  display: none; /* default sakriveno */
  place-items: center;
  z-index: 9999;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.global-call-icon {
  width: 22px;
  height: 22px;
  fill: var(--light-blue-color);
}

/* samo mobile */
@media (max-width: 767px) {
  .global-call-badge {
    display: grid;
  }
}

/* js animacije */

/* svi AOS elementi kreću sakriveni */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

/* kad AOS doda klasu, postaju vidljivi */
[data-aos].aos-animate {
  opacity: 1;
}
.projects-card-image-link {
  display: block;
  text-decoration: none;
  color: inherit;
}