/* === RESET === */
/* 
  CSS VARIABLES FOR NAVIGATION:
  --nav-height: 190px - Navigation height on desktop devices
  --nav-height-mobile: 120px - Navigation height on mobile devices
  --nav-padding: 10px - Horizontal padding navigation
  --logo-width: 12em - Logo width on desktop devices
  --logo-width-mobile: 10em - Logo width on mobile devices
  --burger-size: 40px - Burger button size
  --burger-line-width: 20px - Burger button line width
  --burger-line-height: 2px - Burger button line height
  --nav-z-index: 10000 - Navigation z-index
  --burger-z-index: 10001 - Burger button z-index
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === FONTS === */
@font-face {
  font-family: "Luthon Southard";
  src: url("../assets/fonts/Luthon Southard Script.ttf") format("truetype"),
       url("../assets/fonts/Luthon Southard Script.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === GLOBAL === */

:root {
  --color-purple-main: #8000FF;
  --color-gray-nina: #EADDED;
  --color-black-nina: #000000;
  --color-white-nina: #ffffff;
  --color-purple-petal-nina: #D6C3FB;
  --color-lila-nina: #C084FC;
  --color-rose-nina: #BF00FF;
  --color-cta-green-nina: #A9FF3B;
  --color-cta-yellow-nina: #F5F30A;
  --color-ciklama-nina: #BF00FF;
  --color-baby-rose-nina: #E9A6FF;
  --color-deep-black-nina: #030303;
  --color-paper-nina: #8C52FF;
  --color-warm-silver-nina: #888686;
  --gradient-purple-main: linear-gradient(90deg, #8C52FF 0%, #543199 100%);
  --gradient-purple-deep: linear-gradient(90deg, #8C52FF 0%, #4D0099 100%);
  --gradient-purple-vibrant: linear-gradient(90deg, #8000FF 0%, #4D0099 100%);
  --nav-height: 150px;
  --nav-height-mobile: 100px;
  --nav-padding: 10px;
  --logo-width: 10em;
  --logo-width-mobile: 7em;
  --burger-size: 40px;
  --burger-line-width: 20px;
  --burger-line-height: 2px;
  --nav-z-index: 10000;
  --burger-z-index: 10001;
  --paper-border: rgba(0,0,0,.06);
  --elev-3:             /* looks like tvoj screenshot */
  0 2px 6px rgba(15,23,42,.05),
  0 10px 28px rgba(15,23,42,.08),
  0 22px 60px rgba(15,23,42,.06);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--color-black-nina);
  font-weight: 400;
  color: var(--color-white-nina);
  line-height: 1.6;
}
/* === SCROLLBAR === */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg,
    var(--color-purple-petal-nina) 0%,
    var(--color-baby-rose-nina) 100%
  );
}
::-webkit-scrollbar-thumb {
  background: var(--gradient-purple-deep);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gradient-purple-deep); 
}

/* Firefox */
/* * {
  scrollbar-width: thin;
  scrollbar-color: var(--color-purple-main) var(--color-purple-petal-nina);
} */
/* === UTILITIES === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.btn-primary {
  background: var(--color-purple-main);
  color: var(--color-white-nina);
  padding: 15px 30px;
  border-radius: 1px;
  text-decoration: none;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(128, 0, 255, 0.3);
  border: none;
}

.btn-primary:hover {
  background: var(--color-rose-nina);
  box-shadow: 0 6px 20px rgba(191, 0, 255, 0.5);
  animation: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-white-nina);
  padding: 10px 20px;
  text-decoration: none;
  border: 1px solid var(--color-purple-main);
  cursor: pointer;
}

.btn-secondary.rounded {
  border-radius: 20px;
}

.btn-secondary:hover {
  background: var(--color-purple-main);
  color: var(--color-white-nina);
}

.btn-black {
  background: var(--color-black-nina);
  color: var(--color-white-nina);
  padding: 10px 25px;
  text-decoration: none;
  border: 1px solid var(--color-purple-main);
  cursor: pointer;
  -webkit-text-stroke: 0.5px var(--color-purple-main);
  text-transform: uppercase;
}

.btn-black:hover {
  background: var(--color-purple-main);
  color: var(--color-white-nina);
  -webkit-text-stroke: 0.5px var(--color-purple-main);
}


.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


.w-full {
  width: 100%;
}
.text-center {
  text-align: center;
}

.text-bold {
  font-weight: 600;
}

.main-header {
  text-align: center;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 1rem 0;
}

.gradient-border {
  padding: 2px;
  background: var(--gradient-purple-main);
  display: inline-block;
}

.gradient-border > * {
  background-color: var(--color-black-nina);
  display: block;
  color: white;
}
.main-header-cursive {
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
  font-size: 8rem;
  font-family: 'Luthon Southard', cursive;
  font-weight: 100;
  white-space: nowrap;
  text-transform: lowercase;
  line-height: 0;
  margin: 3rem 0;
}
.header-line {
  width: 20rem;
  height: 1px;
  background: var(--color-white-nina);
}

/* === ANIMATIONS === */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

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

@keyframes entranceScaleRight {
	0% {
		transform: scale(0);
		transform-origin: 100% 50%;
	}

	100% {
		transform: scale(1);
		transform-origin: 100% 50%;
	}
}

/* === PRELOADER === */
#preloader {
  position: fixed;
  inset: 0;
  background-color: var(--color-deep-black-nina);
  z-index: 99999;
  transition: opacity 0.4s ease;
}

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

.preloader-logo img {
  max-width: 320px;
  opacity: 0.9;
}

body.ready #preloader {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}


.burger {
  animation: pulse 2s infinite;
}


/* === NAVIGATION === */
.nav {
  background: transparent;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  position: fixed;
  z-index: var(--nav-z-index);
  width: 100%;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease, height 0.3s ease;
}

.nav.scrolled {
  background: var(--color-black-nina);
  height: 120px;
 
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--nav-padding);
  width: 100%;
  height: 100%;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
  height: 100%;
}
.nav-links li {
  display: inline-block;
  /* margin-left: 20px; */
}
.nav a {
  color: var(--color-white-nina);
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
}
.nav-links li a:hover {
  color: var(--color-purple-main);
}

.nav-links li a.active {
  color: var(--color-purple-main);
}

.nav .logo img {
  padding-top: 2.4rem;
  width: var(--logo-width);
  height: auto;
  transition: width 0.3s ease, height 0.3s ease;
}

.nav.scrolled .logo img {
  width: 6em;
  height: auto;
}

/* ivana dopuna */

/* Dropdown za "Paketi usluga" */
.nav-has-submenu {
  position: relative;
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-black-nina);
  padding: 0.5rem 0;
  min-width: 220px;
  list-style: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 1000;
}

.nav-submenu li a {
  display: block;
  padding: 0.4rem 0.1rem;
  white-space: nowrap;
  font-size: 0.9rem;
  
 min-width: 10rem;
 padding: 2rem;
  }
 


/* hover / fokus otvara meni */
.nav-has-submenu:hover .nav-submenu,
.nav-has-submenu:focus-within .nav-submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* === BURGER === */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: var(--burger-z-index);
  position: relative;
  width: var(--burger-size);
  height: var(--burger-size);
  border-radius: 50%;
  background: var(--color-purple-main);
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(128, 0, 255, 0.3);
}

.burger:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(128, 0, 255, 0.4);
  animation: none;
}

.burger.active {
  background: var(--color-rose-nina);
  box-shadow: 0 6px 20px rgba(191, 0, 255, 0.5);
  animation: none;
}

.burger span {
  width: var(--burger-line-width);
  height: var(--burger-line-height);
  background: var(--color-white-nina);
  transition: all 0.3s ease;
  transform-origin: center;
  transition-delay: 0s;
}

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

.burger.active span:nth-child(2) {
  opacity: 0;
  transition-delay: 0.05s;
}

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

.burger:not(.active) span:nth-child(1) {
  transform: rotate(0deg) translate(0, 0);
  transition-delay: 0s;
}

.burger:not(.active) span:nth-child(2) {
  opacity: 1;
  transition-delay: 0.05s;
}

.burger:not(.active) span:nth-child(3) {
  transform: rotate(0deg) translate(0, 0);
  transition-delay: 0s;
}

.burger:not(.active) {
  animation: pulse 2s infinite;
}



/* === LANG DROPDOWN === */
.lang-dropdown {
  cursor: pointer;
  user-select: none;
  z-index: 9999;
  color: var(--color-white-nina);
  background: var(--color-purple-main);
  border-radius: 2px;
}

.lang-dropdown .lang-selected {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--color-purple-main);
  padding: 5px 10px;
  border-radius: 2px;
  width: 105px;
  transition: 0.4s linear;
}

.lang-dropdown .lang-options {
  background: var(--color-purple-main);
  position: absolute;
  width: 105px;
  z-index: 100;
  margin-bottom: 5px;
  display: none;
}

.lang-dropdown .lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0.5rem;
  transition: 0.4s linear;
}

.lang-dropdown .lang-option:hover {
  background: var(--color-baby-rose-nina);
}

.lang-option img {
  width: 20px;
  height: 20px;
}

/* === HERO === */

.hero-video-grid {
  position: relative;
  width: 100%;
  height: 97vh;
  overflow: visible;
  padding-top: var(--nav-height);
  align-items: flex-start;
  justify-content: flex-start;
  background-image: url('../assets/images/home/nina_hero.webp');
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.video-container video {
  flex: 1;
  object-fit: cover;
  height: 100%;
  width: 25%;
  display: none;
}

.video-fallback-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
}

.video-fallback-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  width: 40%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem 0;
  text-align: center;
}

.hero-content {
  width: 40%;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  text-align: center;
  
}


.hero-topline span,
.hero-subtitle span {
  
  display: block;
  font-weight: 300;
  font-size: 1.6rem;
}
.hero-subtitle span {
  font-weight: 400;
}
.hero-subtitle {
  font-size: 1.5rem;
  margin: 1rem 0;
  font-weight: 300;
}

.hero-subtitle span {
  font-size: 1rem;
}

.hero-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.icon-link svg {
  width: 35px;
  height: 35px;
  fill: var(--color-white-nina);
  transition: fill 0.3s;
}

.icon-link svg ellipse {
  transition: fill 0.3s;
}

.icon-link:hover svg,
.icon-link:hover svg ellipse {
  fill: var(--color-purple-main);
}
.icon-link:hover path,
.icon-link:hover path {
  fill: var(--color-gray-nina);
}

.hero-signature-container {
  display: flex;
  justify-content: center;
  align-self: flex-end;
  width: 60%;
}
.hero-signature {
  font-family: 'Luthon Southard', cursive;
  font-size: 10em;
  font-weight: 100;
  line-height: 0.5;
}

.hero-signature-letter {
  position: relative;
  display: inline-block;
}

.hero-signature-letter::before {
  content: '>';              
  position: absolute;
  top: -1.1em;   
  left: 68%;                 
  transform: translateX(-50%);
  font-size: 0.6em;          
  color: var(--color-white-nina); 
  line-height: 1;
  rotate: 90deg;
  pointer-events: none;
}

.hero-cta-container .btn-primary {
  font-size: 14px;
}


/* === ABOUT NINA === */
.about-nina {
  min-height: 100vh;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
  padding: 8rem 0;
  display: flex;
  align-items: center;
}

.about-nina-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.about-nina-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding-left: 1rem;
}

.about-nina-text h2 {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.about-nina-text h2 .highlight {
  color: var(--color-purple-main);
  font-weight: 600;
}

.nina-text-blocks {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nina-text-blocks p {
  background: var(--color-gray-nina);
  color: var(--color-black-nina);
  padding: 1rem;
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.about-nina .about_paragraph_2 {
  background: var(--color-purple-petal-nina);
}
.about-nina .about_paragraph_3 {
  background: var(--color-lila-nina);
  color: var(--color-white-nina);
}
.about-nina .btn-secondary {
  margin-top: 2rem;
  align-self: start;
}

.about-nina-image {
  background-image: url('../assets/images/nina_about.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  /* animation: entranceScaleRight 1s ease 0.5s 1 normal forwards; */
}

/* Animation on span */
/* .about-nina-text span[data-i18n] {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.6s ease forwards;
}

.about-nina-text span[data-i18n]:nth-child(1) { animation-delay: 0.2s; }
.about-nina-text span[data-i18n]:nth-child(2) { animation-delay: 0.3s; }
.about-nina-text span[data-i18n]:nth-child(3) { animation-delay: 0.4s; }
.about-nina-text span[data-i18n]:nth-child(4) { animation-delay: 0.5s; }


.nina-text-blocks p {
  animation: pulse 0.6s ease-in-out;
}

.nina-text-blocks p:nth-child(1) {
  animation-delay: 0.2s;
}
.nina-text-blocks p:nth-child(2) {
  animation-delay: 0.3s;
}
.nina-text-blocks p:nth-child(3) {
  animation-delay: 0.4s;
} */

.about-nina .btn-secondary {
  position: relative;
  padding: 1rem 2rem;
}

#ar-icon-about {
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-purple-main);
  font-size: 1.5rem;
  pointer-events: none;
  width: 30px;
  height: 30px;
}
#ar-icon-about svg {
  width: 100%;
  height: 100%;
}
.about-nina .btn-secondary:hover #ar-icon-about svg path {
  fill: var(--color-white-nina);
}

/* === ND BENEFITS === */


.what-to-expect {
  background: var(--color-black-nina);
  color: var(--color-white-nina);
  padding: 5rem 1rem;
}

.what-to-expect-wrapper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 0 1rem;
}

.studio-name {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.studio-name .main-header-cursive {
  display: grid;
  grid-template-columns: max-content 1fr; 
  align-items: center;
  column-gap: 2.5rem;
  text-transform: none;
}

.studio-name .main-header-cursive > span:first-child {
  white-space: nowrap; 
}

.studio-name-moto {
  grid-column: 1;       
  font-size: 1.2rem;
  color: var(--color-white-nina);
  opacity: .8;
  font-weight: 400;
  align-self: start;    
  margin: 0;            
}

.expect-header .main-header {
  font-size: 2rem;
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.expect-box {
  background-color: transparent;
  color: var(--color-white-nina);
  padding: 0 2.5rem;
  font-size: 1.2em;
  font-weight: 400; 
  line-height: 1.6;
  border: 1px solid var(--color-purple-main);
  min-height: 400px;
  animation: fadeIn 0.6s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box-highlight {
  background-color: var(--color-purple-main);
  color: white;
}

.expect-box p {
  margin-top: 1rem;
}

.expect-box strong {
  font-weight: 700;
}

.expect-box span[data-i18n] {
  display: inline;
}

.expect-box .benefits_paragraph_6 {
  color: var(--color-purple-petal-nina);
}

.expect-box .benefits_paragraph_8 {
  color: var(--color-cta-yellow-nina);
}

.expect-box .benefits_paragraph_10 {
  color: var(--color-purple-main);
}

.expect-box .benefits_paragraph_12 {
  color: var(--color-cta-green-nina);
}

.expect-box .benefits_paragraph_14 {
  color: var(--color-ciklama-nina);
}

.expect-box .benefits_paragraph_16 {
  color: var(--color-baby-rose-nina);
}




/* === HOW LOOKS TRAINING === */

.training-structure-wrapper {
  max-width: 1300px;
}

.training-structure {
  padding: 4rem 0;
  background-color: var(--color-black-nina);
  color: var(--color-white-nina);
}

.training-structure h2 {
  text-align: center;
  font-size: 2rem;
}

.training-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: stretch;
  padding: 4rem 0;
}

.training-blocks {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.training-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.training-time {
  font-weight: 500;
  flex-shrink: 0;
  text-align: center;
  position: absolute;
  top: -33px;
  left: -65px;
}

.training-time span {
  padding: .75rem 1rem;
}

.training-bar {
  padding: 1rem 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  color: white;
  width: 25rem;
  text-align: center;
}

.training-bar.zagrevanje {
  background: var(--color-lila-nina);
}

.training-bar.serije {
  background: var(--color-purple-main);
}

.training-bar.kardio {
  background: var(--color-ciklama-nina);
}

.training-desc {
  flex: 1;
  font-size: .8em;
  width: 25rem;
  position: absolute;
  top: 33px;
  left: 23rem;
}

.training-desc span {
  padding: 0.75rem 1.5rem;
  color: var(--color-baby-rose-nina);
  padding: 1rem 4rem;

}

.training-info {
  border: 1px solid var(--color-purple-main);
  padding: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.training-info p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 400;
}
.equipment_label {
  margin: 1rem 0;
}

.training-cta {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
}

/* === PACKAGES === */
.packages {
  padding: 4rem 0.5rem;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
}

.packages .main-header {
  display: flex;
  font-size: 8rem;
  gap: 2rem;
  font-family: 'Luthon Southard', cursive;
  font-weight: 100;
  text-transform: lowercase;
  margin-bottom: 1rem;
}

.packages-header-line {
  width: 20rem;
  height: 1px;
  background: var(--color-white-nina);
  margin-top: 1em;
}

.packages .heading-text .sub-header {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 0;
  margin-top: -1rem;
  margin-left: -1rem;
  letter-spacing: 0;
  text-align: left;
}

.packages-grid {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-top: 5rem;
}
/* card */
.package-card {
  flex: 1;
  min-width: 10rem;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  
  opacity: 0;
  
}

/* hover effects */
.package-card:hover {
  transform: translateY(-15px) !important;
  
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.package-card:active {
  transform: translateY(-2px) scale(0.98) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* colors */
.package-card.purple,
.package-card.lilac,
.package-card.magenta,
.package-card.pink,
.package-card.white {
  transition: all 0.3s ease;
}

.package-card.purple {
  background: var(--color-purple-main);
}
.package-card.lilac {
  background: var(--color-purple-petal-nina);
  color: var(--color-black-nina);
}
.package-card.magenta {
  background: var(--color-ciklama-nina);
  color: var(--color-black-nina);
}
.package-card.pink {
  background: var(--color-baby-rose-nina);
  color: var(--color-black-nina);
}
.package-card.white {
  background: var(--color-white-nina);
  color: var(--color-black-nina);
}
.packages-grid div:nth-child(1) { animation-delay: 0.2s; }
.packages-grid div:nth-child(2) { animation-delay: 0.3s; }
.packages-grid div:nth-child(3) { animation-delay: 0.4s; }
.packages-grid div:nth-child(4) { animation-delay: 0.5s; }
.packages-grid div:nth-child(5) { animation-delay: 0.6s; }
.packages-grid div:nth-child(6) { animation-delay: 0.7s; }

/* SVG card for pregnant */
.package-card.svg-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--color-black-nina);
  border: 2px solid var(--color-purple-main);
  background-image: url("../assets/images/pregnant.svg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
}

.package-card.purple:hover {
  background: #9F33FF;
}
.package-card.lilac:hover {
  background: #E7DCFD;
  color: var(--color-black-nina);
}
.package-card.magenta:hover {
  background: #D633FF;
  color: var(--color-black-nina);
}
.package-card.pink:hover {
  background: #F4C8FF;
  color: var(--color-black-nina);
}
.package-card.white:hover {
  background: var(--color-gray-nina);
  color: var(--color-black-nina);
}

/* === QUOTE === */

.quote {
  padding: 4rem 0;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
  text-align: center;
}

.quote .main-header {
  font-size: 2rem;
  font-weight: 400;
  text-transform: none;
}

.quote .sub-message {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 10rem;
}

.quote .qoute_signature {
  font-family: 'Luthon Southard', cursive;
  color: var(--color-paper-nina);
  font-size: 3rem;
  font-weight: 400;
  margin-top: 5rem;
}

/* === GALLERY === */ 

.gallery {
  padding: 4rem 0;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
}

.gallery .main-header-cursive {
  align-items: baseline; 
  justify-content: flex-end;
  margin-bottom: 0.5rem; 
}
.gallery .gallery-heading {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.gallery .gallery-heading .sub-header {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 0;
  margin-top: 2rem;
  margin-left: -1rem;
  letter-spacing: 0;
  text-align: left;
}

.gallery-item-quote {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--color-black-nina);
  padding: 2rem;
  background: var(--color-white-nina);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
} 

.gallery-item-quote p {
  padding: 3rem 6rem;
}

.gallery-cta {
  width: 100%;
}
.gallery-cta a {
  width: 100%;
  border-radius: 0px;
  padding-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: end;
}


.gallery-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  grid-auto-rows: 24px; 
  gap: 14px;
}

.gallery-item a,
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-item img {
  object-fit: cover;
  object-position: center;
}

.gallery-item-quote {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- Gallery grid layout (desktop) ----- */
.gallery-grid > .gallery-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 44;
}

.gallery-grid > .gallery-item:nth-child(2) {
  grid-column: 2;
  grid-row: 3 / span 32; 
}

.gallery-grid > .gallery-item:nth-child(3) {
  grid-column: 3;
  grid-row: 10 / span 25;  
}

.gallery-grid > .gallery-item:nth-child(4) {
  grid-column: 2 / span 2;
  grid-row: 35 / span 10; 
}

.gallery-grid > .gallery-item:nth-child(5) {
  grid-column: 1 / span 3;
  grid-row: 45 / span 16;
}




/* === BLOG === */

.blog {
  padding: 4rem 0.5rem;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
  position: relative;
}

.blog .main-header-cursive {
  align-items: baseline;
}

.blog .blog-heading {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.blog .blog-heading .sub-header {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 0;
  margin-top: -1rem;
  margin-left: -1rem;
  letter-spacing: 0;
  text-align: left;
}

.blog-description {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 200px;
  text-align: center;
  padding: 0 20rem;
  margin-bottom: 6rem;
}
/* === SWIPER === */

.blog .swiper {
  margin: 0 3rem;
}
/* Card */
.blog-card {
  background: var(--color-white-nina);
  color: var(--color-black-nina);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-purple-main);
  display: flex;
  flex-direction: column;
  height: 550px;
}
.swiper-slide:nth-child(even) .blog-card {
  background: var(--color-purple-petal-nina);
  color: var(--color-black-nina);
}

.swiper-slide:nth-child(even) .blog-card-btn {
  background: transparent;
  color: var(--color-paper-nina);
  border: 1px solid var(--color-paper-nina);
}

.swiper-slide:nth-child(even) .blog-card-btn:hover {
  color: var(--color-purple-main);
}
/* Swiper image */
.blog-card-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* Content */
.blog-card-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.blog-card-title {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.3em * 2)
}

.blog-card-btn {
  background: var(--color-gray-nina);
  color: var(--color-black-nina);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
  border: none;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: auto;
}

.blog-card-btn:hover {
  color: var(--color-purple-main);
  font-weight: 600;
}

.blog-swiper {
  padding: 0 4rem;
}
/* Swiper dots (pagination) */
.blog-swiper .swiper-pagination {
  position: static !important; /* removing dots default absolute position */
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
}

/* Dots */
.blog-swiper .swiper-pagination .custom-dot {
  width: 55px;
  height: 18px;
  background: transparent;
  border: 3px solid var(--color-purple-main);
  border-radius: 0;
  opacity: 1;
  transition: all 0.3s ease;
}
.blog-swiper .swiper-pagination .custom-dot:nth-child(3n + 1) {
  border-color: var(--color-lila-nina);
}
.blog-swiper .swiper-pagination .custom-dot:nth-child(3n + 2) {
  border-color: var(--color-ciklama-nina);
}
.blog-swiper .swiper-pagination .custom-dot:nth-child(3n + 3) {
  border-color: var(--color-purple-petal-nina);
}
.blog-swiper .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
  width: 110px;
}

/* Swiper buttons */
.blog .swiper-button-next-custom,
.blog .swiper-button-prev-custom {
  position: absolute;
  top: 70%;
  z-index: 10;
  cursor: pointer;
}
.blog .swiper-button-next-custom {
  right: 10px;
}
.blog .swiper-button-prev-custom {
  left: 10px;
}
.blog .swiper-button-next-custom img,
.blog .swiper-button-prev-custom img {
  width: 40px;
  height: 40px;
}

/* Remove default arrow icons */
.blog .swiper-button-next::after, 
.blog .swiper-button-prev::after {
  content: '' !important;
}

/* === testimonials === */


.testimonials {
  padding: 8rem 0;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
  position: relative;
 
}

.testimonials .main-header-cursive {
  align-items: baseline;
  justify-content: flex-end;
}

.testimonials p {
  font-weight: 400;
  
}

.testimonials-cta-container {
  margin-top: 10rem;
  text-align: center;
}

.testimonials-cta-container a {
  padding: 1rem 2rem;
}

/* Testimonials Layout */
.testimonials-swiper {
  margin: 200px 4rem 0;
}
.testimonials-swiper .swiper-wrapper {
  padding-bottom: .5rem;
}
/* Hide pagination by default (desktop) */
.testimonials-swiper .swiper-pagination {
  display: none !important;
}

/* ovde sam menjala testemonials za nutri i */

.testimonials-partner-card {
  display: flex;  
 
 
   
}

/* gornja polovina – slika */


.partner-image {
  flex: 1 0 30%;
}

.partner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.partner-text {
  padding: 1rem;
  text-align: left;
}


/* Desktop: Grid layout */
@media (min-width: 769px) {
  .testimonials-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    transform: none !important;
  }
  
  .testimonials-swiper .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
}

/* Mobile: Swiper layout */
@media (max-width: 768px) {
  .testimonials-swiper .swiper-slide {
    height: auto;
  }
}

.testemonial-card {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 2rem;
}

.testemonial-image {
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
}

.testemonial-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;

}
.testimonials p {
  font-size: 0.7rem;
}

.testemonial-text .highlight {
  color: var(--color-black-nina);
  margin-bottom: 1rem;
}

.testemonial-text .author-title {
  opacity: 0.75;
}


/* Testimonials Swiper Pagination - Mobile Only */
@media (max-width: 768px) {
  .testimonials-swiper .swiper-pagination {
    display: flex !important;
    position: static !important;
    margin-top: 2rem;
    justify-content: center;
    gap: .5rem;
  }

  .testimonials-swiper .swiper-pagination .custom-dot {
    width: 55px;
    height: 18px;
    background: transparent;
    border: 3px solid var(--color-purple-main);
    border-radius: 0;
    opacity: 1;
    transition: all 0.3s ease;
  }

  .testimonials-swiper .swiper-pagination .custom-dot:nth-child(3n + 1) {
    border-color: var(--color-lila-nina);
  }

  .testimonials-swiper .swiper-pagination .custom-dot:nth-child(3n + 2) {
    border-color: var(--color-ciklama-nina);
  }

  .testimonials-swiper .swiper-pagination .custom-dot:nth-child(3n + 3) {
    border-color: var(--color-purple-petal-nina);
  }

  .testimonials-swiper .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
    width: 110px;
  }
}

.testimonials-partners {
  margin-top: 10rem;
  padding: 0 4rem;
}

.testimonials-partners p {
  font-size: 1.2rem;
  opacity: 0.75;
  text-align: center;
}

.testimonials-partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.testimonials-partner-card {
  background: transparent;
  color: var(--color-white-nina);
  overflow: hidden;
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rem;
 
}
/* PARTNERS GRID – pola slika, pola tekst */
.testimonials-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

/* Svaka kartica: slika levo, tekst desno (50/50) */
.testimonials-partner-card {
  display: flex;
  align-items: stretch;
  
  background: rgba(0, 0, 0, 0.4);
}

/* Leva polovina – slika */
.partner-image {
  flex: 1;
}

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

/* Desna polovina – tekst */
.partner-text {
  padding: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
}

/* odavde */
/* PARTNERS SWIPER */
.partners-swiper {
  margin-top: 2rem;
}

.partners-swiper .swiper-slide {
  height: auto;               /* da kartica određuje visinu */
}

.testimonials-partner-card {
  display: flex;
  align-items: stretch;
 
  background: rgba(0, 0, 0, 0.5);
}

.partner-image {
  flex: 1;
}

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

.partner-text {
  flex: 1;
  padding: 1.5rem;
  gap: 0.75rem;
}

.partner-text h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
}

.partner-text p {
  font-size: 0.7rem;
  line-height: 1.6;
  margin: 0;
}

/* pagination tačkice za partners swiper */
.partners-pagination {
  margin-top: 1.5rem;
}
.partners-pagination .swiper-pagination-bullet {
  background: var(--color-purple-main);
}

/* Mobile – slika gore, tekst dole */
@media (max-width: 768px) {
  .testimonials-partner-card {
    flex-direction: column;
  }

  .partner-image {
    height: 220px;
  }
}

/* === CONTACT === */
.contact {
  padding: 200px 0 0;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* photo / form / info */
  gap: 5px;
  align-items: stretch;
  margin-top: 5rem;
}

/* Left photo */
.contact-photo {
  min-height: 620px;
  background: url('../assets/images/contact_back.webp') center/cover no-repeat;
  position: relative;
}

.contact-photo p {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1rem;
  padding: 0.9rem;
  background: var(--color-baby-rose-nina);
  width: 100px;
  
  line-height: 1.1;
}

/* Middle form card */
.contact-form-card {
  --bg: #0b0016;
  --p1: 128,0,255; /* #8000FF */
  --p2: 77,0,153;  /* #4D0099 */

  position: relative;
  padding: 1.25rem;
  border: 1px solid rgba(var(--p1), .55);
  background: var(--bg);
  overflow: hidden;
  z-index: 0;
}

.contact-form-card > * { position: relative; z-index: 1; }

/* „Diamond“ glow */
.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(115% 90% at 30% 32%, rgba(var(--p1), .26) 0 45%, transparent 70%),
    radial-gradient(115% 90% at 70% 68%, rgba(var(--p2), .22) 0 45%, transparent 70%),
    linear-gradient(45deg,  transparent 44%, rgba(var(--p1), .16) 50%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(var(--p2), .14) 50%, transparent 56%);
  filter: blur(8px);     
  opacity: .95;
}


.contact-title { 
  font-size: 1.5rem; 
  letter-spacing: .08em; 
  text-transform: uppercase; 
  opacity: .85; 
  margin-bottom: 2rem; 
  font-weight: 400;
}

.contact-form .form-row { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: .75rem; 
  margin-bottom: 2.25rem; 
}
.contact-form .form-row textarea { 
  grid-column: 1 / -1; 
}

.contact-form input, .contact-form textarea {
  width: 100%; 
  padding: .9rem .95rem; 
  background: transparent;
  border: 1px solid rgba(128,0,255,0.5); 
  color: var(--color-white-nina);
  border-radius: 6px; 
  outline: none; 
  transition: border .2s, box-shadow .2s;
  text-transform: lowercase;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { 
  color: #bfbfbf; 
  opacity: .7; 
}

.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--color-rose-nina);
  box-shadow: 0 0 0 3px rgba(191,0,255,0.18);
}

.contact-form .btn-secondary { 
  margin-top: .5rem; 
  border: 1px solid rgba(128,0,255,0.5); 
  border-radius: 4px; 
  font-size: 1rem;
  padding: 1rem 2rem;
}

/* Right info card */
.contact-info-card {
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--color-purple-main);
  background: var(--gradient-purple-vibrant);
  background-clip: padding-box;
}
.contact-info-card .contact-title { 
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 2rem;
}

.contact-info-card-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.contact-info-card-left,
.contact-info-card-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-info-card-right {
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.contact-info-block { 
  margin-bottom: 1rem; 
}
.contact-info-block .label { 
  font-size: .85rem; 
  opacity: .8; 
  text-transform: uppercase; 
  margin-bottom: .25rem; 
}
.contact-info-card a { 
  color: var(--color-white-nina); text-decoration: none; 
}
.contact-info-card a:hover { 
  text-decoration: underline;
 }

/* Social icons (injectSVG) */
.contact-socials { 
  display: flex; 
  flex-direction: column;
  gap: 1em; 
  align-items: flex-end;
}

.contact-socials a svg, .contact-socials a img {
  width: 30px;
  height: 30px;
  display: block; 
}
.contact-socials a svg g g path,
.contact-socials a svg g path,
.contact-socials a svg path { 
  fill: var(--color-white-nina);
}
.contact-socials a:hover svg g g path,
.contact-socials a:hover svg g path,
.contact-socials a:hover svg path {
  fill: var(--color-purple-main);
}


.contact-legal {
  display: flex;
  gap: 0;
  flex-direction: column;
}

.contact-info-block p,
.contact-legal a {
  font-weight: 300;
}

.contact-legal-text {
  font-size: .9rem;
  opacity: 0.8;
  text-align: center;
  margin-top: 3rem;
}


/* === PACKAGES PAGE === */
.package-page-wrapper {
  padding: 4rem 0 0;
  background: var(--color-black-nina);
  color: var(--color-white-nina);
}

.package-page-wrapper .go-back {
  margin-left: 8rem;
  cursor: pointer;
}
.package-page-wrapper .go-back img {
  width: 30px;
  height: 30px;
}
.package-page-wrapper .main-header {
  display: flex;
  font-size: 4rem;
  gap: 2rem;
  font-family: 'Luthon Southard', cursive;
  font-weight: 100;
  text-transform: lowercase;
  margin:0;
}
.package-page-wrapper .sub-header {
  font-size: .9rem;
  opacity: 0.8;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  text-align: left;
  margin-left: -1rem;
}
.package-page-wrapper .package-page-wrapper-inner {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}
.package-page-wrapper .package-page-text-wrapper {
  width: 55%;
}
.package-page-wrapper .package-page-content {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 4rem;
  font-weight: 300;
}

.package-page-wrapper .package-page-signature {
  margin-top: 60px;
  gap: 1rem;
  padding: 0 4rem 2rem;
  display: flex;
  justify-content: space-between;
}
.package-page-wrapper .package-page-signature h3 {
  color: #ffffff;
  -webkit-text-stroke: 1px #8C52FF; 
  font-family: 'Luthon Southard', cursive;
  font-size: 4rem;
  font-weight: 100;
  line-height: 1;
}
.package-page-wrapper .package-page-signature h3 span {
  display: block;
  margin-left: 12rem;
  margin-top: 2rem;
}
.package-page-wrapper .package-page-img-wrapper {
  flex: 1;
  background-image: url('../../assets/images/pages/packages/package_image.webp');
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

.package-page-wrapper .package-page-img-wrapper.group-training-img {
  background-image: url('../../assets/images/pages/packages/ND_grupni_trening.webp');
}
.package-page-wrapper .package-page-img-wrapper.individual-training-img {
  background-image: url('../../assets/images/pages/packages/ND_individualni_trening.webp');
}
.package-page-wrapper .package-page-img-wrapper.sportist-training-img {
  background-image: url('../../assets/images/pages/packages/ND_sportisti.webp');
}
.package-page-wrapper .package-page-img-wrapper.pregnant-training-img {
  background-image: url('../../assets/images/pages/packages/ND_trudnice.webp');
}
.package-page-wrapper .package-page-img-wrapper.semi-individual-training-img {
  background-image: url('../../assets/images/pages/packages/ND_polu_individualni.webp');
}
.package-page-wrapper .package-page-img-wrapper.recovery-img {
  background-image: url('../../assets/images/pages/packages/ND_oporavak.webp');
}
.package-page-wrapper .package-page-img-wrapper.work-philosophy-img {
  background-image: url('../../assets/images/pages/packages/ND_filozofija_rada.webp');
}

.package-page-wrapper .package-page-signature .btn-secondary {
  flex: 0 0 auto;
  align-self: center;
  font-size: .9rem;
  padding: 1rem 1.5rem;
  color: #ffffff;
  -webkit-text-stroke: .7px #8C52FF; 
}

/* === BLOG PAGE === */
.blog-body {
  background: #F5F5F5;
}
.blog-page-wrapper {
  padding: 6rem 0 2rem;
  background: #F5F5F5;
  color: var(--color-deep-black-nina);
} 

.blog-page-wrapper .go-back {
  margin-left: 8rem;
  cursor: pointer;
  display: flex;
  width: fit-content;
  padding: 1rem;
  background-color: #EADDED;
}

.blog-page-wrapper .go-back img {
  width: 30px;
  height: 30px;
}

.blog-page-wrapper-inner {
  display: flex;
  gap: 4rem;
  align-items: stretch;
  flex-direction: column;
}

.blog-page-text-part-one {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.blog-page-text-part-one .header {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.blog-page-text-part-one .header h1 {
  font-family: 'Luthon Southard', cursive;
  font-weight: 100;
  text-transform: lowercase;
  font-size: 6rem;
  color: var(--color-paper-nina);
}

.blog-page-text-part-one .header p {
  color: var(--color-warm-silver-nina);
  font-size: 1.4rem;
}


.blog-page-text-part-one .hero {
  width: 40%;
}
.blog-page-text-part-one .hero img {
  width: 100%;
  height: 550px;
}


.blog-page-text-part-two {
  display: flex;
  padding: 0 4rem 2rem;
  gap: 4rem;
  align-items: flex-end;
  margin-top: -10rem;
}

.blog-page-text-part-two .text-sheet {
  width: 70%;
  border:1px solid var(--paper-border);
  box-shadow: var(--elev-3);
  padding: 10rem 3rem 5rem;
}

.blog-page-text-part-two .text-sheet-fragment {

  margin-bottom: 3rem;
}
.blog-page-text-part-two .text-sheet-fragment h3 {
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 400;
}
.blog-page-text-part-two .text-sheet-fragment p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
}
.italic {
  font-style: italic;
}
.bold {
  font-weight: 700;
}
.blog-page-text-part-two .contact-foot p  {
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 400;
}
.blog-page-text-part-two .blog-page-signature h3 {
  color: #ffffff;
  -webkit-text-stroke: 1px #8C52FF; 
  font-family: 'Luthon Southard', cursive;
  font-size: 4rem;
  font-weight: 100;
  line-height: 1;
  margin-top: 2rem;
}

.blog-page-text-part-two .blog-page-signature h3 span {
  display: block;
  margin-left: 12rem;
  margin-top: 1rem;
}

.blog-page-text-part-two .contact-foot-btn {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.blog-page-text-part-two .contact-foot-btn img {
  width: 30px;
  height: 30px;
  rotate: 180deg;
}

/* === RESPONSIVE === */
/* === MOBILE (do 768px) === */
@media (max-width: 768px) {
  :root {
    --nav-height: 100px;
    --nav-height-mobile: 100px;
  }

  .nav .logo img {
    width: var(--logo-width-mobile);
  }
  
  .burger {
    display: flex;
  }
    .nav-submenu {
     display: none !important;
  }
  
  /* Na mobilnom, onemogući focus-within da ne spreči navigaciju */
  .nav-has-submenu:focus-within .nav-submenu {
    display: none !important;
  }

  /* Kada je navigacija otvorena, nav bar dobija crnu pozadinu */
  .nav:has(.nav-links.open) {
    background: var(--color-black-nina);
    height: var(--nav-height-mobile);
  }

  .nav {
    height: var(--nav-height-mobile);
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height-mobile);
    left: 0;
    right: 0;
    background: var(--color-black-nina);
    flex-direction: column;
    width: 100vw;
    height: calc(100vh - var(--nav-height-mobile));
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--nav-z-index);
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
  }
  .nav-links.open {
    max-height: calc(100vh - var(--nav-height-mobile));
    opacity: 1;
    visibility: visible;
    gap: 0.6em;
  }

  .nav-links li {
    margin-left: 0;
  }

  .nav-links li {
    text-align: center;
    width: 100%;
  }

  .nav-links li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .nav-links.open li {
    opacity: 1;
    transform: translateY(0);
  }

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


  .nav-links li a {
    font-size: 1em;
    font-weight: 400;
    display: block;
    padding: 10px 20px;
    transition: all 0.3s ease;
  }

  .lang-dropdown {
    position: relative;
    width: 105px;
    margin: 0 auto;
  }
  
  .lang-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    z-index: 9999; 
  }
  

  .nav-links li a:hover {
    color: var(--color-purple-main);
    transform: scale(1.05);
    text-shadow: 0 0 20px var(--color-purple-main);
  }


  .hero-video-grid {
    background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url('../assets/images/home/nina_hero.webp') center/cover no-repeat;
  }
  .hero-overlay {
    padding: 1rem 0 0;
  }
  .hero-video-grid {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 6rem;
  }


  .hero-content {
    width: 100%;
    padding-top: 8rem;
  }

  .icon-link svg {
    width: 30px;
    height: 30px;
  }

  .hero-topline span {
    font-size: 1.2rem;
  }
  
  .hero-subtitle span {
    font-size: 0.8rem;
    line-height: 2;
    letter-spacing: 0.1rem;
    font-weight: 300;
  }
  .btn-primary {
    font-size: 0.6em;
  }
  .hero-signature-container {
    width: 100%;
  }

  .hero-cta-container .btn-primary {
    padding: 1rem;
    font-size: 0.6rem;
  }

  .hero-signature {
    font-size: 3.5em;
    line-height: 0.8;
  }
  .about-nina-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "content"
      "button";
  }
  
  .about-nina-text {
    padding: 0;
    display: contents;
  }
  
  .about-nina-text h2 {
    grid-area: title;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .about-nina-wrapper {
    gap: 0;
  }
  .about-nina-image {
    grid-area: image;
    height: 400px;
    background-position: top;
  }
  
  .nina-text-blocks {
    grid-area: content;
  }
  
  .nina-text-blocks p {
    border-radius: 0;
    font-size: 0.9rem;
  }
  
  .about-nina .btn-secondary {
    grid-area: button;
    margin-top: 1rem;
  }

  .main-header-cursive,
  .packages .main-header {
    font-size: 3rem;
    gap: 0;
  }
  .header-line,
  .packages-header-line {
    width: 4rem;
  }

  .expect-header .main-header,
  .training-structure h2,
  .packages .heading-text .sub-header,
  .quote .main-header {
    font-size: 1.3rem;
  }



  .studio-name-moto,
  .packages .heading-text .sub-header,
  .gallery .gallery-heading .sub-header,
  .blog .blog-heading .sub-header,
  .quote .sub-message,
  .blog-description {
    font-size: 0.8rem;
   
  }
.studio-name {
 align-self: center;
}
  .about-nina,
  .gallery {
    padding: 2rem 0;
  }
  .contact {
    padding-top: 2rem;
  }
  .what-to-expect {
    padding: 2rem 1rem;
  }
  .packages,
  .blog {
    padding: 2rem 0.5rem;
  }
  .main-header {
    margin: 0 auto;
  }
  .packages-grid,
  .quote .sub-message,
  .gallery-grid,
  .blog-description,
  .testimonials-swiper,
  .testimonials-cta-container,
  .testimonials-partners,
  .contact-grid {
    margin-top: 80px;
  }
  .main-header-cursive {
    margin: 1rem auto;
  }

  .studio-name .main-header-cursive {
    column-gap: 0.5rem;
    font-size: 2.5rem;
  }

  .nina-text-blocks {
    gap: 0
  }

  .about-nina-text {
    gap: 0;
  }

  .about-nina .btn-secondary {
    margin-top: 0;
  }

  .expect-box p {
    font-size: 0.9rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 24px;
    gap: 10px;
  }

  .gallery-item img { 
    object-fit: cover; 
    object-position: center; 
  }
  .gallery-grid > .gallery-item:nth-child(1) {
    grid-column: 1;         /* leva kolona */
    grid-row: 1 / span 44;  /* visina kao što si već koristio */
  }
  .gallery-grid > .gallery-item:nth-child(1) img {
    object-position: right;
  }
  /* 2) Gore desno (poravnana sa vrhom #1) */
  .gallery-grid > .gallery-item:nth-child(2) {
    grid-column: 2;         
    grid-row: 1 / span 15;  
  }

  /* 4) Citat ispod #2 (kartica srednje visine) */
  .gallery-grid > .gallery-item:nth-child(4) {
    grid-column: 2;
    grid-row: 16 / span 13;  /* ~192px; uvećaj/smanji span ako treba više prostora */
  }

  /* 3) Dole desno – poravnata ispod citata */
  .gallery-grid > .gallery-item:nth-child(3) {
    grid-column: 2;
    grid-row: 29 / span 16; /* ~288px */
  }

  /* 5) Donja široka – preko obe kolone */
  .gallery-grid > .gallery-item:nth-child(5) {
    grid-column: 1 / span 2;
    grid-row: 45 / span 12; /* ~432px */
  }

  .gallery-item-quote p {
    padding: 2rem;
    font-size: 1.1rem;
  }

  .gallery-cta a { 
    padding-top: 2rem;
    padding-bottom: 2rem;
    justify-content: center;
    align-items: center;
  }

  .blog .blog-heading .sub-header {
    margin-top: 1.5rem;
  }

  .packages .main-header {
    text-align: left;
    gap: 1rem;
  }
  .packages .heading-text .sub-header {
    margin-top: 0;
  }
  .gallery .main-header-cursive,
  .blog .main-header-cursive,
  .testimonials .main-header-cursive {
    gap: 1rem;
  }
  .gallery .gallery-heading {
    line-height: .6;
  }

  .expect-grid {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
  }

  .expect-box {
    font-size: 1rem;
    min-height: 300px;
  }

  .training-layout {
    grid-template-columns: 1fr;
  }
  .training-step {
    flex-direction: column;
    justify-content: center;
  }

  .training-bar {
    width: 20rem;
  }
  .training-desc {
    position: relative;
    top: -25px;
    left: 0;
    max-width: 18rem;
    text-align: center;
  }
  .training-time {
    position: relative;
    left: 0;
    top: 25px;
  }
  .training-desc span {
    padding: 1rem;
  }
  .training-info {
    width: 90%;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .package-card {
    height: 10rem;
    width: 20rem;
    min-width: 20rem;
    padding: 1.1rem;
  }

  .quote .sub-message,
  .blog-description {
    padding: 0 1rem;
  }
  
  .testimonials-partners {
    padding: 0;
  }
  
  .testimonials-swiper {
    margin: 80px 1rem 0;
  }

  .testimonials-partners-grid {
    padding: 0 2rem;
    grid-template-columns: 1fr;
    margin-top: 4rem;
    place-items: center;
  }

  .testemonial-card {
    flex-direction: column;
  }

  

  .testimonials-partner-card,
  .training-cta {
    margin-top: 0;
    
  }

  .testimonials-partner-card {
    /* height: 300px; */
    width: 90%;
  }

  .training-cta .btn-primary {
    font-size: 0.6rem;
  }

  .testimonials-partners p {
    font-size: 0.5rem;
  }


  
  .blog .swiper-button-next-custom, 
  .blog .swiper-button-prev-custom {
   display: none;
  }
  .blog .swiper {
    margin: 0 1rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-info-block p, .contact-legal a {
    font-size: .8rem;
  }
  .contact-socials a svg,
  .contact-socials a img {
    width: 30px;
    height: 30px;
  }
  .contact-form-card, .contact-info-card {
    padding: 2rem;
  }
  .contact-grid > :first-child {
    grid-row: 3;   
  }

  .package-page-wrapper {
    padding: 4rem 0 0;
  }
  .package-page-wrapper .package-page-wrapper-inner {
    flex-direction: column;
  }
  .package-page-wrapper .package-page-text-wrapper {
    width: 100%;
  }
  .package-page-wrapper .go-back {
    margin-left: 1rem;
  }
  .package-page-wrapper .main-header {
    font-size: 3rem;
  }
  .package-page-wrapper .sub-header {
    font-size: .8rem;
    margin-left: -2rem;
    margin-top: 1rem;
  }
  .package-page-wrapper .package-page-signature h3 {
    font-size: 2rem;
  }
  .package-page-wrapper .package-page-content {
    padding: 0 1rem;
    margin-top: 3rem;
  }
  .package-page-wrapper .package-page-content p {
    font-size: .75rem;
  }
  .package-page-wrapper .package-page-signature .btn-secondary {
    font-size: .8rem;
    margin-top: 2rem;
  }
  .package-page-wrapper .package-page-img-wrapper {
    width: 100%;
    height: 450px;
    flex: auto;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  .package-page-wrapper .package-page-signature {
    flex-direction: column;
  }

  .package-page-wrapper .package-page-signature h3 span {
    margin-left: 5rem;
    margin-top: 1rem;
  }
}

/* === TABLET (769px – 1023px) === */
@media (min-width: 769px) and (max-width: 1023px) {
 :root {
    --nav-height: 100px;
    --nav-height-mobile: 100px;
  }

  .nav .logo img {
    width: var(--logo-width-mobile);
  }
  .nav-submenu {
     display: none !important;
  }
  .burger {
    display: flex;
  }

  /* Kada je navigacija otvorena, nav bar dobija crnu pozadinu */
  .nav:has(.nav-links.open) {
    background: var(--color-black-nina);
    height: var(--nav-height-mobile);
  }

  .nav {
    height: var(--nav-height-mobile);
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height-mobile);
    left: 0;
    right: 0;
    background: var(--color-black-nina);
    flex-direction: column;
    width: 100vw;
    height: calc(100vh - var(--nav-height-mobile));
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--nav-z-index);
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
  }
  .nav-links.open {
    max-height: calc(100vh - var(--nav-height-mobile));
    opacity: 1;
    visibility: visible;
    gap: 1em;
  }

  .nav-links li {
    margin-left: 0;
  }

  .nav-links li {
    text-align: center;
    width: 100%;
  }

  .nav-links li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .nav-links.open li {
    opacity: 1;
    transform: translateY(0);
  }

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


  .nav-links li a {
    font-size: 1em;
    font-weight: 400;
    display: block;
    padding: 15px 20px;
    transition: all 0.3s ease;
  }

  .lang-dropdown {
    position: relative;
    width: 105px;
    margin: 0 auto;
  }
  
  .lang-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    z-index: 9999; 
  }
  

  .nav-links li a:hover {
    color: var(--color-purple-main);
    transform: scale(1.05);
    text-shadow: 0 0 20px var(--color-purple-main);
  }


  .hero-video-grid {
    background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url('../assets/images/home/nina_hero.webp') center/cover no-repeat;
  }
  .hero-overlay {
    padding: 1rem 0 0;
  }
  .hero-video-grid {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 6rem;
  }


  .hero-content {
    width: 100%;
    padding-top: 8rem;
  }

  .icon-link svg {
    width: 30px;
    height: 30px;
  }

  .hero-topline span {
    font-size: 1.2rem;
  }
  
  .hero-subtitle span {
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.1rem;
    font-weight: 300;
  }
  .btn-primary {
    font-size: 0.6em;
  }
  .hero-signature-container {
    width: 100%;
  }

  .hero-cta-container .btn-primary {
    padding: 1rem;
    
  }

  .hero-signature {
    font-size: 5.2em;
    line-height: 0.8;
  }
  .about-nina-wrapper {
    grid-template-columns: 1fr;
    margin: 7rem 1rem;
  }
  .about-nina-text h2 {
    font-size: 3.4rem;
  }
  .about-nina-image {
    height: 400px;
    background-position: top;
  }

  .main-header-cursive,
  .packages .main-header {
    font-size: 5rem;
  }
  .header-line,
  .packages-header-line {
    width: 8rem;
  }

  .expect-header .main-header,
  .training-structure h2,
  .packages .heading-text .sub-header,
  .quote .main-header {
    font-size: 1.2rem;
  }

  .studio-name-moto,
  .packages .heading-text .sub-header,
  .gallery .gallery-heading .sub-header,
  .blog .blog-heading .sub-header,
  .quote .sub-message,
  .blog-description {
    font-size: 0.9rem;
  }



  .about-nina,
  .gallery {
    padding: 2rem 0;
  }
  .contact {
    padding-top: 2rem;
  }
  .what-to-expect {
    padding: 2rem 1rem;
  }
  .packages,
  .blog {
    padding: 2rem 0.5rem;
  }
  .main-header {
    margin: 0 auto;
  }
  .packages-grid,
  .quote .sub-message,
  .gallery-grid,
  .blog-description,
  .testimonials-swiper,
  .testimonials-cta-container,
  .testimonials-partners,
  .contact-grid {
    margin-top: 80px;
  }
  .main-header-cursive {
    margin: 1rem auto;
  }

  .nina-text-blocks {
    gap: 1rem;
  }

  .blog .blog-heading .sub-header {
    margin-top: 1.5rem;
  }

  .packages .heading-text .sub-header {
    margin-top: 1rem;
  }

  .expect-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  .expect-box {
    font-size: 1rem;
    min-height: 300px;
  }

  .training-layout {
    grid-template-columns: 1fr;
  }
  .training-step {
    justify-content: center;
  }

  .training-bar {
    width: 20rem;
  }
  .training-desc {
    position: relative;
    top: 33px;
    left: -33px;
    max-width: 20rem;
  }
  .training-time {
    position: relative;
    left: 33px;
    top: -33px;
  }
  .training-desc span {
    padding: 1rem;
  }
  .training-info {
    width: 30rem;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .package-card {
    height: 20rem;
    width: 20rem;
    min-width: 20rem;
    padding: 1.1rem;
  }
  .quote .sub-message {
    padding: 0 4rem;
  }

  .blog-description {
    padding: 0 4rem;
  }

.testimonials-partners {
    padding: 0;
  }
  
  .testimonials-swiper {
    margin: 80px 1rem 0;
  }

  .testimonials-partners-grid {
    padding: 0 2rem;
    grid-template-columns: 1fr;
    margin-top: 4rem;
    place-items: center;
  }

  .testemonial-card {
    flex-direction: column;
  }

 

  .testimonials-partner-card,
  .training-cta {
    margin-top: 0;
  }

  .testimonials-partner-card {
    /* height: 300px; */
    width: 90%;
  }

  .training-cta .btn-primary {
    font-size: .8rem;
  }

  .testimonials-partners p {
    font-size: 0.5rem;
  }
  
  .blog .swiper-button-next-custom, 
  .blog .swiper-button-prev-custom {
   display: none;
  }
  .blog .swiper {
    margin: 0 1rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid > :first-child {
    grid-row: 3;   
  }
  .contact-form-card, .contact-info-card{
    padding: 5rem;
  }

  .package-page-wrapper {
    padding: 4rem 0 0;
  }
  .package-page-wrapper .package-page-wrapper-inner {
    flex-direction: column;
  }
  .package-page-wrapper .package-page-text-wrapper {
    width: 100%;
  }

  .package-page-wrapper .main-header {
    font-size: 3rem;
  }
  .package-page-wrapper .sub-header {
    font-size: 1.05rem;
  }
  .package-page-wrapper .package-page-signature h3 {
    font-size: 2rem;
  }
  .package-page-wrapper .package-page-content p {
    font-size: .85rem;
  }
  .package-page-wrapper .package-page-signature .btn-secondary {
    font-size: 1rem;
  }
  .package-page-wrapper .package-page-img-wrapper {
    width: 100%;
    height: 650px;
    flex: auto;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  
}

/* === LAPTOP (1024px – 1439px) === */
@media (min-width: 1024px) and (max-width: 1439px) {

  :root {
    --nav-height: 100px;
    --nav-height-mobile: 100px;
  }

  .nav .logo img {
    width: var(--logo-width-mobile);
  }
  
  .burger {
    display: flex;
  }

  /* Kada je navigacija otvorena, nav bar dobija crnu pozadinu */
  .nav:has(.nav-links.open) {
    background: var(--color-black-nina);
    height: var(--nav-height-mobile);
  }

  .nav {
    height: var(--nav-height-mobile);
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height-mobile);
    left: 0;
    right: 0;
    background: var(--color-black-nina);
    flex-direction: column;
    width: 100vw;
    height: calc(100vh - var(--nav-height-mobile));
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--nav-z-index);
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
  }
  .nav-links.open {
    max-height: calc(100vh - var(--nav-height-mobile));
    opacity: 1;
    visibility: visible;
    gap: 1em;
  }

  .nav-links li {
    margin-left: 0;
  }

  .nav-links li {
    text-align: center;
    width: 100%;
  }

  .nav-links li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .nav-links.open li {
    opacity: 1;
    transform: translateY(0);
  }

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


  .nav-links li a {
    font-size: 1em;
    font-weight: 400;
    display: block;
    padding: 15px 20px;
    transition: all 0.3s ease;
  }

  .lang-dropdown {
    position: relative;
    width: 105px;
    margin: 0 auto;
  }
  
  .lang-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    z-index: 9999; 
  }
  

  .nav-links li a:hover {
    color: var(--color-purple-main);
    transform: scale(1.05);
    text-shadow: 0 0 20px var(--color-purple-main);
  }


  .hero-video-grid {
    background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url('../assets/images/home/nina_hero.webp') center/cover no-repeat;
  }
  .hero-overlay {
    padding: 1rem 0 0;
  }
  .hero-video-grid {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 6rem;
  }


  .hero-content {
    width: 100%;
    padding-top: 8rem;
  }

  .icon-link svg {
    width: 30px;
    height: 30px;
  }

  .hero-topline span {
    font-size: 1.4rem;
  }
  
  .hero-subtitle span {
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.1rem;
    font-weight: 600;
  }
  .btn-primary {
    font-size: 0.6em;
  }
  .hero-signature-container {
    width: 100%;
  }

  .hero-cta-container .btn-primary {
    padding: 1rem;
  }

  .hero-signature {
    font-size: 5.2em;
    line-height: 0.8;
  }
  .about-nina-text h2 {
    font-size: 1.8rem;
  }
  .nina-text-blocks {
    gap: .5rem;
  }
  .nina-text-blocks p {
    font-size: .9rem;
  }
  .studio-name .main-header-cursive {
    font-size: 5em;
  }
  .header-line,
  .packages-header-line {
    width: 10rem;
  }
  .studio-name-moto {
    font-size: 0.9rem;
  }

  .expect-header .main-header,
  .training-structure h2 {
    font-size: 1.6rem;
  }
  .expect-box {
    font-size: 0.9rem;
    padding: 0 1rem;
    min-height: 320px;
  }

  .training-layout {
    grid-template-columns: 1fr;
  }
  .training-step {
    justify-content: center;
  }
  .training-desc {
    position: relative;
    top: 33px;
    left: -33px;
    max-width: 20rem;
  }
  .training-time {
    position: relative;
    left: 33px;
    top: -33px;
  }
  .training-desc span {
    padding: 1rem;
  }
  .training-info {
    width: 30rem;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .package-card {
    height: 20rem;
    width: 20rem;
    min-width: 20rem;
    padding: 1.1rem;
  }

  .blog-description {
    padding: 0 10rem;
  }

  .quote .sub-message {
    padding: 0 10rem;
  }
  .testemonial-text {
    padding: 1rem;
    font-size: .9rem;
  }
  /* .testimonials-partner-card {
    height: 350px;
  } */
  .what-to-expect {
    padding: 2rem 1rem;
  }
  .packages,
  .blog {
    padding: 2rem 0.5rem;
  }

  .gallery,
  .contact {
    padding: 2rem 0;
  }

  .expect-header .main-header, 
  .training-structure h2,
  .main-header {
    margin: 0 auto;
  }
  .quote .sub-message,
  .blog-description {
    margin-top: 2rem;
  }


.testimonials-partners {
    padding: 0;
  }
  
  .testimonials-swiper {
    margin: clamp(60px, 8vh, 100px) 2rem 0;
  }

  .testimonials-partners-grid {
    padding: 0 2rem;
    grid-template-columns: 1fr;
    margin-top: 4rem;
    place-items: center;
  }

  .testemonial-card {
    flex-direction: column;
  }

 

  .testimonials-partner-card,
  .training-cta {
    margin-top: 0;
  }

  .testimonials-partner-card {
    /* height: 300px; */
    width: 90%;
  }

  .training-cta .btn-primary {
    font-size: .8rem;
  }

  .testimonials-partners p {
    font-size: 0.5rem;
  }
  .blog-card {
    height: 400px;
  }
  .blog-card-img {
    height: 200px;
  }

  .blog-card-img {
    min-height: 250px;
  }

  .blog-card-title {
    font-size: 1.1rem;
  }

  .contact {
    padding-bottom: 0;
  }
  .contact-grid {
                  

    margin-top: 8rem;
  }
  .contact-photo p {
    font-size: .9rem;
  }
  .contact-title,
  .contact-info-card .contact-title {
    font-size: 1.2rem;
  }
  .contact-form .form-row {
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
  }
  .contact-info-block p,
  .contact-legal a {
    font-size: .9rem;
  }
  .contact-info-block .label {
    font-size: .8rem;
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-grid > :first-child {
    grid-row: 2;   
    grid-column: 1 / -1; 
  }

  .package-page-wrapper {
    padding: 4rem 0 0;
  }
  .package-page-wrapper .package-page-wrapper-inner {
    flex-direction: column;
  } 
  .package-page-wrapper .package-page-text-wrapper {
    width: 100%;
  }
  .package-page-wrapper .package-page-img-wrapper {
    width: 100%;
    height: 650px;
    flex: auto;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  .package-page-wrapper .sub-header {
    font-size: 1.1rem;
  }
  .package-page-wrapper .package-page-signature h3 {
    font-size: 3rem;
  }

  .package-page-wrapper .package-page-content p {
    font-size: .9rem;
  }
  .package-page-wrapper .package-page-signature .btn-secondary {
    font-size: 1.1rem;
  }

}
/* === DESKTOP (1440px – 1899px) === */
@media (min-width: 1440px) and (max-width: 1899px) {

  .nav-links li {
    margin-left: 0px;
  }
  .nav a, .nav-submenu li a {
    font-size: 0.9em;
  }
  .nav-submenu {
     min-width: 10rem;
  }
   .nav a  {
    font-size: 0.9em;
     padding: 1rem;
  }
  .nav-submenu li a {
    padding: 1rem;
  }
 
    .nav a {
      font-size: 1em;
    }
    .btn-primary,
    .btn-secondary {
      font-size: 1em;
    }

    .hero-content {
      padding-top: 5rem;
    }
    
    .hero-topline span, .hero-subtitle span {
      font-size: 1.8rem;
      line-height: 2;
      letter-spacing: 0.1rem;
    }

    .hero-subtitle span {
      font-size: 1rem;
    }

    .hero-signature {
      font-size: 10em;
    }

    .icon-link svg {
      width: 30px;
      height: 30px;
    }

    .hero-icons {
      gap: 3rem;
    }

    .about-nina-text {
      gap: 3rem;
    }
    .about-nina-image {
      background-position: top;
    }
    .about-nina-text h2 {
      font-size: 3rem;
    }
    .nina-text-blocks p {
      font-size: 1rem;
    }

    .main-header-cursive,
    .packages .main-header {
      margin-top: 1rem;
      font-size: 5rem;
      font-weight: 400;
    }
    .studio-name-moto {
      font-size: 0.8rem;
    }
  
    .expect-grid {
      gap: 0.5rem;
    }
    .expect-box {
      font-size: 1rem;
      min-height: 400px;
    }
    
    .packages .heading-text .sub-header {
      font-size: 0.7rem;
    }
  
    .packages-grid {
      gap: 0.3rem;
    }
    .package-card {
      height: 25rem;
      font-size: 1.2rem;
    }
    .quote.container {
      max-width: 60%;
    }
  
    .quote .sub-message,
    .blog-description {
      font-size: 1.3rem;
    }
    .quote .qoute_signature {
      font-size: 4rem;
    }

    .gallery .gallery-heading .sub-header,
    .blog .blog-heading .sub-header {
      font-size: 0.8rem;
    }


    .blog .blog-heading .sub-header {
      margin-top: 2rem;
    }
  
    .blog-card-title {
      font-size: 1rem;
    }

    .blog-description {
      margin-top: 5rem;
    }
  
    .blog-card {
      min-height: 500px;
      min-width: 300px;
      gap: 2rem;
    }
    .blog-card-img {
      min-height: 350px;
    }
    .blog-card-btn {
      font-size: 1rem;
    }
    .blog .swiper {
      padding: 0 1rem;
    }

    .blog .swiper {
      margin: 0 1.5rem;
    }
    .blog .swiper-button-next-custom img, .blog .swiper-button-prev-custom img {
      width: 50px;
      height: 50px;
    }
    .blog-swiper .swiper-pagination .custom-dot {
      width: 50px;
      height: 20px;
    }
    .blog-swiper .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
      width: 100px;
    }

    .testemonial-image {
      min-height: 300px;
    }
    .testimonials p {
      font-size: 1rem;
    }
    .testimonials-cta-container a {
      padding: 1rem 2rem;
    }
    .testimonials-partners p {
      font-size: 1.3rem;
      width: 70%;
      margin: 0 auto;
    }
  
    .testimonials-partners-grid {
      gap: 1rem;
    }
    
    .contact-photo {
      min-height: 600px;
    }
  
    .contact-photo p {
      font-size: 1.3rem;
      width: 140px;
    }
  
    .contact-title,
    .contact-info-card .contact-title {
      font-size: 1rem;
    }
  
    .contact-form input, 
    .contact-form textarea {
      font-size: 1.3rem;
    }
  
    .contact-info-block p,
    .contact-legal a {
      font-size: 1rem;
    }
  
    .contact-info-block .label {
      font-size: 1rem;
    }
  
    .contact-socials a svg, .contact-socials a img {
      width: 30px;
      height: 30px;
    }
  
    .contact-form .btn-secondary {
      font-size: 1rem;
    }

    .contact-form-card, .contact-info-card{
      padding: 2rem;
    }
  
  
    .lang-dropdown .lang-selected img ,
    .lang-option img{
      width: 20px;
      height: 40px;
    }
  
    .lang-dropdown .lang-selected {
      font-size: 1.3rem;
      width: 130px;
    }
  
    .lang-dropdown {
      font-size: 1.3rem;
    }
    .lang-dropdown .lang-options {
      width: 130px;
    }

    .package-page-wrapper .main-header {
      font-size: 3rem;
    }
    .package-page-wrapper .sub-header {
      font-size: 1rem;
    }
    .package-page-content {
      font-size: .9rem;
    }
    .package-page-wrapper .package-page-signature .btn-secondary {
      font-size: 1.3rem;
    }
  
}
/* === DESKTOP (1900px – 2559px) === */
@media (min-width: 1921px) and (max-width: 2559px) {

    :root {
      --nav-height: 200px;
    }

    
  .nav-links li {
    margin-left: 0px;
  }
  .nav a, .nav-submenu li a {
    font-size: 0.9em;
  }
  .nav a  {
    font-size: 0.9em;
     padding: 1rem;
    
  }
  .nav-submenu li a {
    padding: 1rem;
  }
    .nav a {
      font-size: 1.2em;
    }
    .hero-content {
      padding-top: 10rem;
    }
    .btn-primary {
      font-size: 1.6em;
      padding: 30px 60px;
    }
    .btn-secondary {
      font-size: 2em;
    }
    .hero-topline span {
      font-size: 2.2rem;
      letter-spacing: 0.1rem;
    }

    .hero-subtitle span {
      font-size: 1.6rem;
      letter-spacing: 0.1rem;
    }

    .icon-link svg {
      width: 40px;
      height: 40px;
    }
    .hero-signature {
      font-size: 12em;
    
    }
    .hero-icons {
      gap: 4rem;
    }
    .about-nina-text {
      gap: 9rem;
    }
    .about-nina-image {
      background-position: top;
    }
    .about-nina-text h2 {
      font-size: 6rem;
    }
    .nina-text-blocks p {
      font-size: 1rem;
    }
    .about-nina .btn-secondary {
      font-size: 2.2rem;
    }
    .main-header-cursive,
    .packages .main-header {
      font-size: 8rem;
    }
    .studio-name-moto {
      font-size: 1.2rem;
      margin-top: 1.5rem;
    }
  
    .expect-header .main-header,
    .training-structure h2,
    .quote .main-header {
      font-size:2.8rem;
    }
  
    .packages .heading-text .sub-header {
      font-size: 1.2rem;
    }
  
    .expect-grid {
      gap: 1rem;
    }
    .expect-box {
      font-size: 1rem;
      min-height: 500px;
    }
  
    .training-blocks {
      gap: 5rem;
    }
  
    .training-structure-wrapper {
      max-width: 90%;
    }
    .training-bar {
      width: 40rem;
      font-size: 1.8rem;
    }
    .training-desc {
      font-size: 1.5rem;
      width: 30rem;
      left: 35rem;
    }
  
    .training-time {
      font-size: 1.8rem;
      top: -43px;
      left: -75px;
    }
    .training-info {
      font-size: 1.5rem;
    }
    .packages-grid {
      gap: 0.5rem;
    }
    .package-card {
      height: 30rem;
      font-size: 1.6rem;
    }
    .quote.container {
      max-width: 60%;
    }
  
    .quote .sub-message,
    .blog-description {
      font-size: 1.8rem;
    }
    .quote .qoute_signature {
      font-size: 6rem;
    }
  
    .gallery .gallery-heading .sub-header,
    .blog .blog-heading .sub-header {
      font-size: 1.2rem;
      margin-top: 4rem;
    }
    .blog .blog-heading .sub-header {
      margin-top: 0;
    }
  
    .blog-card-title {
      font-size: 1.8rem;
    }
  
    .blog-card {
      min-height: 800px;
    }
    .blog-card-img {
      min-height: 500px;
    }
    .blog-card-btn {
      font-size: 1.4rem;
    }
    .blog .swiper {
      padding: 0 4rem;
    }
    .blog .swiper-button-next-custom img, .blog .swiper-button-prev-custom img {
      width: 60px;
      height: 60px;
      
    }
    .blog-swiper .swiper-pagination .custom-dot {
     
      width: 100px;
      height: 30px;
    }
    .blog-swiper .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
      width: 240px;
    }
  
    .testemonial-image {
      min-height: 500px;
    }
    .testimonials p {
      font-size: 1rem;
    }
    .testimonials-cta-container a {
      padding: 1.5rem 3rem;
    }
    .testimonials-partners p {
      font-size: 2rem;
    }
  
    .testimonials-partners-grid {
      gap: 5rem;
    }
  
    /* .testimonials-partner-card {
      height: 900px;
    } */
  
    .contact-photo {
      min-height: 1000px;
    }
  
    .contact-photo p {
      font-size: 2rem;
      width: 180px;
    }
  
    .contact-title,
    .contact-info-card .contact-title {
      font-size: 2.5rem;
    }

    .contact-form-card, .contact-info-card{
      padding: 4rem;
    }
  
    .contact-form input, 
    .contact-form textarea {
      font-size: 1.2rem;
    }
  
    .contact-info-block p,
    .contact-legal a {
      font-size: 1.2rem;
    }
  
    .contact-info-block .label {
      font-size: 1.4rem;
    }
  
    .contact-socials a svg, .contact-socials a img {
      width: 40px;
      height: 40px;
    }
  
    .contact-form .btn-secondary {
      font-size: 1.4rem;
    }
  
    .lang-dropdown .lang-selected img ,
    .lang-option img{
      width: 40px;
      height: 40px;
    }
  
    .lang-dropdown .lang-selected {
      font-size: 1.8rem;
      width: 180px;
    }
  
    .lang-dropdown {
      font-size: 1.8rem;
    }
    .lang-dropdown .lang-options {
      width: 180px;
    }

    .package-page-wrapper .main-header {
      font-size: 5.5rem;
    }
    .package-page-wrapper .sub-header {
      font-size: 1.1rem;
    }
    .package-page-content {
      font-size: 1rem;
    }
    .package-page-wrapper .package-page-signature .btn-secondary {
      font-size: 1.5rem;
    }
}

/* === ULTRA WIDE 2.5k (2560px – 2749px) === */
@media (min-width: 2560px) and (max-width: 2749px) {

    :root {
      --nav-height: 160px;
      --logo-width: 9em;
    }

    
  .nav-links li {
    margin-left: 0px;
  }
  .nav a  {
    font-size: 0.9em;
     padding: 1rem;
    
  }
  .nav-submenu li a {
    padding: 1rem;
  }
  .nav-submenu {
 min-width: 10rem;
 
  }
 
    .nav a {
      font-size: 1em;
    }
    .hero-content {
      padding-top: 5rem;
    }
    .btn-primary {
      font-size: 1em;
      padding: 30px 60px;
    }
    .btn-secondary {
      font-size: 2em;
    }
    .hero-topline span, .hero-subtitle span {
      font-size: 2.2rem;
      line-height: 2;
      letter-spacing: 0.1rem;
      font-weight: 300;
    }

    .hero-subtitle span {
      font-size: 1.4rem;

    }
    .icon-link svg {
      width: 50px;
      height: 50px;
    }
    .hero-signature {
      font-size: 14em;
      
    }
    .hero-icons {
      gap: 3.5rem;
    }

    .about-nina-wrapper{
      margin-top: 8rem;
       margin-left: 1rem;
    }
    .about-nina-text {
      gap: 5rem;
      
    }
    .about-nina-image {
      background-position: top;
    }
    .about-nina-text h2 {
      font-size: 5rem;
      font-weight: 500;
      letter-spacing: 0.6rem;
    }
    .nina-text-blocks p {
      font-size: 1rem;
      padding: 2rem;
     
    }
    .about-nina .btn-secondary {
      font-size: 1.2rem;
    }
    .main-header-cursive,
    .packages .main-header {
      margin-top: 6rem;
      font-size: 8rem;
      font-weight: 400;
    }
    .studio-name-moto {
      font-size: 1rem;
      /* margin-top: 1.5rem; */
    }
  
    .expect-header .main-header,
    .training-structure h2,
    .quote .main-header {
      font-size: 2.4rem;
    }
  
    .packages .heading-text .sub-header {
      font-size: 1rem;
    }
  
    .expect-grid {
      gap: 1rem;
      margin: 0 10rem 0 10rem;
    }
    .expect-box {
      font-size: 1rem;
      min-height: 600px;
    }
  
    .training-blocks {
      gap: 10rem;
    }
  
    .training-structure-wrapper {
      max-width: 85%;
    }
    .training-bar {
      width: 40rem;
      font-size: 1.8rem;
      font-weight: 600;
    }
    .training-desc {
      font-size: 1.2rem;
      width: 40rem;
      left: 35rem;
    }
  
    .training-time {
      font-size: 1.8rem;
      top: -43px;
      left: -75px;
    }
    .training-info {
      font-size: 1.8rem;
    }

 
    .packages-grid {
      gap: 0.5rem;
    }
    .package-card {
      height: 40rem;
      font-size: 2rem;
    }
    .quote.container {
      max-width: 60%;
    }
  
    .quote .sub-message,
    .blog-description {
      font-size: 1.8rem;
    }
    .quote .qoute_signature {
      font-size: 6rem;
    }
 
    .gallery 
    .blog .blog-heading  {
      font-size: 1.8rem;
      margin-top: 4rem;
    }

    .blog-description  {
      font-size: 1.4rem;
    }
    .blog .blog-heading .sub-header {
      margin-top: 0;
    }
  
    .blog-card-title {
      font-size: 1.4rem;
    }
  
    .blog-card {
      min-height: 700px;
      max-width: 400px;
    }
    .blog-card-img {
      min-height: 400px;
    }
    .blog-card-btn {
      font-size: 1.4rem;
    }
    .blog .swiper {
      padding: 0 4rem;
    }
    .blog .swiper-button-next-custom img, .blog .swiper-button-prev-custom img {
      width: 80px;
      height: 80px;
    }
    .blog-swiper .swiper-pagination .custom-dot {
      width: 70px;
      height: 30px;
    }
    .blog-swiper .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
      width: 240px;
    }
  
    .testemonial-image {
      min-height: 500px;
    }
    .testimonials p {
      font-size: 1rem;
    }
    .testimonials-cta-container a {
      padding: 1.5rem 3rem;
    }
    .testimonials-partners p {
      font-size: 1rem;
    }
  
    .testimonials-partners-grid {
      gap: 5rem;
      margin: 10px 150px 0;
      
    }
  
    /* .testimonials-partner-card {
      height: 900px;
    } */
  
    .contact-photo {
      min-height: 1000px;
    }
  
    .contact-photo p {
      font-size: 2rem;
      width: 180px;
    }
  
    .contact-title,
    .contact-info-card .contact-title {
      font-size: 2rem;
      font-weight: 600;
    }

    .contact-form-card, .contact-info-card{
      padding: 5rem;
    }
  
    .contact-form input, 
    .contact-form textarea {
      font-size: 1.4rem;
      
    }
  
    .contact-info-block p,
    .contact-legal a {
      font-size: 1.2rem;
    }
  
    .contact-info-block .label {
      font-size: 1.8rem;
    }
  
    .contact-socials a svg, .contact-socials a img {
      width: 40px;
      height: 40px;
    }
  
    .contact-form .btn-secondary {
      font-size: 2rem;
    }
  
    .lang-dropdown .lang-selected img ,
    .lang-option img{
      width: 40px;
      height: 40px;
    }
  
    .lang-dropdown .lang-selected {
      font-size: 1.4rem;
      width: 150px;
    }
  
    .lang-dropdown {
      font-size: 1.4rem;
    }
    .lang-dropdown .lang-options {
      width: 150px;
    }
    .package-page-wrapper .sub-header {
      font-size: 1.2rem;
    }
    .package-page-content {
      font-size: 1.1rem;
    }
    .package-page-wrapper .package-page-signature .btn-secondary {
      font-size: 1.5rem;
    }
}

/* === 2.7K ekrani (2750px – 3839px) === */
@media (min-width: 2750px) and (max-width: 3839px) {

  :root {
    --nav-height: 270px;
  }
  .nav a {
    font-size: 1.8em;
  }
  .btn-primary {
    font-size: 2.2em;
    padding: 30px 60px;
  }
  .btn-secondary {
    font-size: 2.2em;
  }
  .hero-topline span {
    font-size: 2.8rem;
  }
  .hero-subtitle span {
    font-size: 2rem;
  }
  .icon-link svg {
    width: 60px;
    height: 60px;
  }
  .hero-signature {
    font-size: 20em;
  }
  .about-nina-text {
    gap: 9rem;
  }
  .about-nina-image {
    background-position: top;
  }
  .about-nina-text h2 {
    font-size: 4rem;
  }
  .nina-text-blocks p {
    font-size: 1.8rem;
  }
  .about-nina .btn-secondary {
    font-size: 2.2rem;
  }
  .main-header-cursive,
  .packages .main-header {
    font-size: 15rem;
  }
  .studio-name-moto {
    font-size: 2.2rem;
    margin-top: 1.5rem;
  }

  .expect-header .main-header,
  .training-structure h2,
  .quote .main-header {
    font-size: 4rem;
  }

  .packages .heading-text .sub-header {
    font-size: 2rem;
  }

  .expect-grid {
    gap: 5rem;
  }
  .expect-box {
    font-size: 2rem;
    min-height: 600px;
  }

  .training-blocks {
    gap: 10rem;
  }

  .training-structure-wrapper {
    max-width: 85%;
  }
  .training-bar {
    width: 50rem;
    font-size: 2rem;
  }
  .training-desc {
    font-size: 2rem;
    width: 50rem;
    left: 45rem;
  }

  .training-time {
    font-size: 2rem;
    top: -43px;
    left: -75px;
  }
  .training-info {
    font-size: 1.8rem;
  }
  .packages-grid {
    gap: 1.5rem;
  }
  .package-card {
    height: 40rem;
    font-size: 2rem;
  }
  .quote.container {
    max-width: 60%;
  }

  .quote .sub-message,
  .blog-description {
    font-size: 2rem;
  }
  .quote .qoute_signature {
    font-size: 6rem;
  }

  .gallery .gallery-heading .sub-header,
  .blog .blog-heading .sub-header {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .blog .blog-heading .sub-header {
    margin-top: 0;
  }

  .blog-card-title {
    font-size: 1.8rem;
  }

  .blog-card {
    min-height: 1000px;
  }
  .blog-card-img {
    min-height: 600px;
  }
  .blog-card-btn {
    font-size: 1.8rem;
  }
  .blog .swiper {
    padding: 0 4rem;
  }
  .blog .swiper-button-next-custom img, .blog .swiper-button-prev-custom img {
    width: 80px;
    height: 80px;
  }
  .blog-swiper .swiper-pagination .custom-dot {
    width: 120px;
    height: 40px;
  }
  .blog-swiper .swiper-pagination .custom-dot.swiper-pagination-bullet-active {
    width: 240px;
  }

  .testemonial-image {
    min-height: 500px;
  }
  .testimonials p {
    font-size: 1rem;
  }
  .testimonials-cta-container a {
    padding: 1.5rem 3rem;
  }
  .testimonials-partners p {
    font-size: 2rem;
  }

  .testimonials-partners-grid {
    gap: 5rem;
  }

  /* .testimonials-partner-card {
    height: 900px;
  } */

  .contact-photo {
    min-height: 1000px;
  }

  .contact-photo p {
    font-size: 2rem;
    width: 180px;
  }

  .contact-title,
  .contact-info-card .contact-title {
    font-size: 2.5rem;
  }

  .contact-form input, 
  .contact-form textarea {
    font-size: 1.8rem;
  }

  .contact-info-block p,
  .contact-legal a {
    font-size: 1.5rem;
  }

  .contact-info-block .label {
    font-size: 1.8rem;
  }

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

  .contact-form .btn-secondary {
    font-size: 2rem;
  }

  .lang-dropdown .lang-selected img ,
  .lang-option img{
    width: 40px;
    height: 40px;
  }

  .lang-dropdown .lang-selected {
    font-size: 1.8rem;
    width: 180px;
  }

  .lang-dropdown .lang-options {
    min-width: 180px;
    font-size: 1.8rem;
  }

  /* page specific */
  .package-page-wrapper .main-header {
    font-size: 8rem;
  }
  .package-page-wrapper .sub-header {
    font-size: 1.2rem;
  }
  .package-page-content {
    font-size: 1.1rem;
  }
  .package-page-wrapper .package-page-signature .btn-secondary {
    font-size: 1.5rem;
  }

}

/* === Hvala poruka === */
.thank-you-message {
  text-align: center;
  padding: 3rem 2rem;
  animation: fadeIn 0.5s;
}

.thank-you-icon {
  width: 80px;
  height: 80px;
  background: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 3rem;
  color: white;
  animation: scaleUp 0.5s;
}

.thank-you-message h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.thank-you-message p {
  font-size: 1.2rem;
  opacity: 0.8;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* === 4K+ ekrani (3840px i više) === */
@media (min-width: 3840px) {
  .training-structure-wrapper {
    max-width: 0%;
  }
}

/* Floating call dugme – mobilni */
.mobile-call-btn {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--color-purple-main);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

@media (max-width: 768px) {
  #phone-icon {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }
}