/*



*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 20px;
  line-height: 56px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #ee626b;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px 0px 0px;
  border-radius: 25px;
  transition: all .3s;
}

.icon-button a i {
  background-color: #f35525;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-left: -1px;
}

.icon-button a:hover {
  color: #f35525;
}

.icon-button a:hover i {
  color: #fff;
}

.main-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #f35525;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #f35525;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #f35525;
  border-radius: 50%;
}

/* Prilagodba preloader točkica: svjetlo plave točkice i bijela pozadina */
.js-preloader {
    background: #fff !important;
}

.js-preloader .preloader-dot,
.js-preloader span,
.js-preloader .dot,
.js-preloader .dots span {
    background: #4fc3f7 !important; /* svjetlo plava */
}

/* Ako postoji animacija s border-color */
.js-preloader .preloader-dot,
.js-preloader .dot {
    border-color: #4fc3f7 !important;
}
/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.sub-header {
  background-color: #fff;
  padding: 10px 0px;
  border-bottom: 1px solid #eee;
}

.sub-header ul li {
  display: inline-block;
}

.sub-header ul.social-links {
  text-align: right;
}

.sub-header ul.social-links li {
  margin-left: 8px;
}

.sub-header ul.social-links li a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #cdcdcd;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header ul.social-links li a:hover {
  background-color: #f35525;
}

.sub-header ul.info li {
  font-size: 14px;
  color: #7a7a7a;
  border-right: 1px solid #eee;
  margin-right: 25px;
  padding-right: 25px;
}

.sub-header ul.info li:last-child {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

.sub-header ul.info li i {
  font-size: 20px;
  color: #f35525;
  margin-right: 8px;
}

.background-header {
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: relative;
  background-color: #fff;
  height: 100px;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  line-height: 100px;
  font-size: 19.36px !important;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 700;
  letter-spacing: 2px;
}

.background-header .main-nav .logo h1 {
  line-height: 80px;
}

.header-area .main-nav ul.nav {
  flex-basis: 100%;
  margin-top: 30px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 100px;
  line-height: 100px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 500;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #1e1e1e;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

/* Gumb "Provjeri raspoloživost" tamnija svjetlo plava - svjetlo siva, bez obruba */
.header-area .main-nav .nav li:last-child a {
  background-color: #b3e0fc !important;   /* tamnija svjetlo plava */
  color: #444 !important;
  border: none !important;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  border-radius: 20px;
  padding-left: 0px;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-area .main-nav .nav li:last-child a i {
  background-color: #f5f5f5 !important;
  color: #4fc3f7 !important;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: -1px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  border: none !important;
  transition: background 0.2s, color 0.2s;
}

.header-area .main-nav .nav li:last-child:hover a {
  background-color: #81d4fa !important;   /* još malo tamnija na hover */
  color: #222 !important;
}

.header-area .main-nav .nav li:last-child:hover a i {
  background-color: #e0e0e0 !important;
  color: #039be5 !important;
}

.header-area .main-nav .nav li:hover a {
  color: #f35525;
}

.header-area .main-nav .nav li a.active {
  color: #f35525;
}


.background-header .main-nav .nav li a.active {
  color: #f35525;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }

}

@media (max-width: 767px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #fff;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #fff;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ee626b!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  }
  .header-area {
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}

@media (max-width: 480px) {
  .header-area .main-nav .logo {
    max-width: 200px !important;
    margin-left: 0 !important;
  }
  .header-area .main-nav .logo h1 {
    font-size: 12px !important;
    line-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    text-align: left !important;
  }
}
@media (max-width: 350px) {
  .header-area .main-nav .logo {
    max-width: 90px !important;
  }
  .header-area .main-nav .logo h1 {
    font-size: 10px !important;
    line-height: 36px !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  min-height: 100vh;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.main-banner .item {
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}

/* Pravilno postavi slike za svaku klasu */
.main-banner .item-1  { background-image: url("../slike/apt3(9).jpg"); }
.main-banner .item-2  { background-image: url("../slike/apt3(10).jpg"); }
.main-banner .item-3  { background-image: url("../slike/apt1(6).jpg"); }
.main-banner .item-4  { background-image: url("../slike/apt2(3).jpg"); }
.main-banner .item-5  { background-image: url("../slike/apt3(2).jpg"); }
.main-banner .item-6  { background-image: url("../slike/apt3(5).jpg"); }
.main-banner .item-7  { background-image: url("../slike/apt3(16).jpg"); }
.main-banner .item-8  { background-image: url("../slike/apt3(7).jpg"); }
.main-banner .item-9  { background-image: url("../slike/apt1(2).jpg"); }
.main-banner .item-10 { background-image: url("../slike/apt1(4).jpg"); }
.main-banner .item-11 { background-image: url("../slike/apt2(7).jpg"); }
.main-banner .item-12 { background-image: url("../slike/apt2(4).jpg"); }
.main-banner .item-13 { background-image: url("../slike/apt3(11).jpg"); }
.main-banner .item-14 { background-image: url("../slike/apt3(19).jpg"); }
.main-banner .item-15 { background-image: url("../slike/apt1(8).jpg"); }

.main-banner .item span.category {
  background-color: #fff;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 6px 15px;
  display: inline-block;
  margin-bottom: 30px;
}

.main-banner .item span.category em {
  font-style: normal;
  color: #f35525;
}

.main-banner .item h2 {
  font-size: 62px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 72px;
  width: 50%;
  margin-bottom: 0px;
}

.main-banner .owl-dots {
  position: absolute;
  bottom: 60px;
  left: 20%;
}

.main-banner .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  transition: all .5s;
}

.main-banner .owl-dots .active {
  background-color: #f35525;
}

.main-banner .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50px);
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  left: 45px;
}

.main-banner .owl-nav .owl-next i {
  position: absolute;
  right: 45px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}



/* 
---------------------------------------------
Featured Style
--------------------------------------------- 
*/

.featured .left-image {
  position: relative;
}

.featured .left-image img {
  padding-left: 55px;
}

.featured .left-image a {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: 110px;
  background-color: #f35525;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -55px;
}

.featured .section-heading {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 60px;
}

.featured .section-heading h2 {
  width: 70%;
}

.featured .accordion {
  margin-left: 10px;
  margin-right: 10px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: transparent;
  border: none !important;
}

.featured .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.featured .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.featured .accordion-button:not(.collapsed) {
  color: #f35525;
  background-color: #fafafa;
  outline: none;
}

.featured .accordion-button::after {
  display: none;
}

.featured #headingThree {
  border-bottom: none;
}

.featured .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.featured .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.featured .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.featured .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.featured .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.featured .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.featured .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

/* 
---------------------------------------------
Video Style
--------------------------------------------- 
*/

.video {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.video-content {
  margin-top: -240px;
}

.video .section-heading h2 {
  color: #fff;
}

.video-content .video-frame {
  position: relative;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.video-content .video-frame img {
  border-radius: 10px;
}

.video-content .video-frame a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-26px, -26px);
  width: 52px;
  height: 52px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #f35525;
  outline: 15px solid rgba(254, 85, 37, 0.5);
  font-size: 18px;
}

/* 
---------------------------------------------
Fun Facts Style
--------------------------------------------- 
*/

.fun-facts {
  text-align: center;
  margin-top: 125px;
}

.fun-facts .counter {
  background-color: #ffeee9;
  position: relative;
  border-radius: 10px;
  width: 270px;
  padding: 20px 0px;
  display: inline-block;
}

.fun-facts .counter h2,
.fun-facts .counter p {
  display: inline-flex;
  vertical-align: middle;
}

.fun-facts .counter p {
  text-align: left;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 600;
  line-height: 28px;
}

.fun-facts .counter h2 {
  margin-right: 25px;
  font-size: 40px;
  color: #f35525;
}

.fun-facts .counter:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #f35525;
  border-radius: 50%;
  content: '';
  right: -25px;
  top: -25px;
}


/* 
---------------------------------------------
Best Deal Style
--------------------------------------------- 
*/

.best-deal {
  background-color: #fafafa;
  padding: 100px 0px;
}

.best-deal .tab-content img {
  padding: 0px 45px;
}

.best-deal .tabs-content .nav-link {
  font-size: 16px;
  font-weight: 500;
  background-color: #1e1e1e !important;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0px 25px;
  color: #fff;
}

.best-deal .tabs-content .nav-tabs .nav-link.active {
  background-color: #f35525 !important;
  color: #fff;
}

.best-deal .tabs-content ul.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 80px;
  align-items: end;
  justify-content: end;
  margin-top: -130px;
}

.best-deal .tabs-content ul.nav-tabs li {
  padding-right: 0px;
  border-right: none;
  margin-left: 20px;
}

.best-deal .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.best-deal .info-table ul li {
  display: block;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

.best-deal .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.best-deal .info-table ul li span {
  display: inline-block;
  text-align: right;
  width: 100%;
}

.best-deal .tabs-content {
  padding: 0px;
  background-color: transparent;
}

.best-deal .tabs-content h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 30px;
}

.best-deal .icon-button {
  margin-top: 30px;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties .item {
  background-color: #fafafa;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
}

.properties .item img {
  border-radius: 10px;
}

.properties .item span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 25px;
}

.properties .item h4 {
  font-size: 19px;
  margin: 25px 0px;
}

.properties .item h4 a {
  color: #1e1e1e;
}

.properties .item ul li {
  display: inline-block;
  font-size: 15px;
  color: #4a4a4a;
  margin-right: 20px;
}

.properties .item ul li span {
  font-weight: 600;
  color: #1e1e1e;
}

.properties .item ul {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.properties .item h6 {
  font-size: 20px;
  color: #f35525;
  margin-top: 6px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}

.properties .item .main-button {
  text-align: center;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact {
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.contact .section-heading h2 {
  color: #fff;
}

.contact-content {
  margin-top: -240px;
  position: relative;
  z-index: 1;
}

.contact-content #map {
  border-radius: 10px;
  margin-bottom: 60px;
}

.contact-content .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content .phone {
  margin-right: 15px;
}

.contact-content .email {
  margin-left: 15px;
}

.contact-content .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-content .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-content .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-content #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-content #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-content #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-content #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-content #contact-form button:hover {
  background-color: #f35525;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer.footer-no-gap {
  margin-top: 0px;
}

footer {
  margin-top: 150px;
  background-color: #1e1e1e;
  min-height: 100px;
}

footer p {
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}


/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/page-heading-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0px;
  text-align: center;
}

.page-heading span {
  background-color: #fff;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 25px;
  display: inline-block;
  margin-bottom: 30px;
}

.page-heading span a {
  color: #1e1e1e;
}

.page-heading h3 {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties ul.properties-filter {
  list-style: none;
  text-align: center;
  margin-bottom: 70px;
}

.properties ul.properties-filter li {
  display: inline-block;
  margin: 5px 8px;
}

.properties ul.properties-filter li a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  color: #fff;
  background-color: #1e1e1e;
  padding: 12px 25px;
  border-radius: 5px;
  transition: all .3s;
}

.properties ul.properties-filter li a.is_active {
  background-color: #f35525;
  color: #fff;
}

.properties ul.properties-filter li a.is_active:hover {
  color: #fff;
}

.properties ul.properties-filter li a:hover {
  color: #f35525;
}

.properties ul.pagination {
  margin-top: 50px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.properties ul.pagination li {
  display: inline-block;
  margin: 0px 5px;
}

.properties ul.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  transition: all .3s;
}

.properties ul.pagination li a:hover,
.properties ul.pagination li a.is_active {
  background-color: #f35525;
  color: #fff;
}


/* 
---------------------------------------------
Single Page Style
--------------------------------------------- 
*/

.single-property .main-image img {
  float: none;
}

.single-property .main-content h4 {
  font-size: 25px;
  margin-top: 25px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.single-property .main-content span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 40px;
}

.single-property .accordion {
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: transparent;
  border: none !important;
}

.single-property .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.single-property .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.single-property .accordion-button:not(.collapsed) {
  color: #f35525;
  background-color: #fafafa;
  outline: none;
}

.single-property .accordion-button::after {
  display: none;
}

.single-property #headingThree {
  border-bottom: none;
}

.single-property .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.single-property .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  margin-left: 60px;
}

.single-property .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.single-property .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.single-property .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.single-property .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.single-property .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}


/* 
---------------------------------------------
Contact Page Style
--------------------------------------------- 
*/

.contact-page #map {
  margin-top: 100px;
}

.contact-page .section-heading {
  margin-bottom: 40px;
  margin-right: 280px;
}

.contact-page p {
  margin-bottom: 50px;
}

.contact-page .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
  display: inline-block;
  min-width: 360px;
}

.contact-page .phone {
  margin-bottom: 30px;
}

.contact-page .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-page .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-page .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-page #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-page #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-page #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-page #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-page #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-page #contact-form button:hover {
  background-color: #f35525;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h1 {
    line-height: 80px !important;
    margin: 5px;
  }
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    line-height: 100px;
  }
  .background-header .main-nav .logo h1 {
    line-height: 80px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 3px;
    padding-right: 3px;
  }
  .header-area .main-nav .nav li:last-child a {
    padding-right: 15px;
  }
  .main-banner .item h2 {
    width: 100%;
  }
  .featured .section-heading {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 100px;
  }
  .featured .accordion {
    margin-left: 0px;
    margin-right: 0px;
  }
  .featured .info-table {
    margin-top: 45px;
  }
  .fun-facts .counter {
    margin-bottom: 45px;
  }
  .best-deal .section-heading {
    text-align: center;
  }
  .best-deal .tabs-content ul.nav-tabs {
    margin-top: 0px;
    justify-content: center;
  }
  .best-deal .info-table {
    margin-bottom: 45px;
  }
  .best-deal .tab-content img {
    padding: 0px;
  }
  .best-deal .tabs-content h4 {
    margin-top: 45px;
  }
  .properties .item h6 {
    text-align: center;
    margin-bottom: 15px;
  }
  .properties .item .main-button {
    text-align: center;
  }
  .properties .item ul li {
    margin-right: 10px;
    font-size: 13px;
  }
  .contact-content .phone {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .contact-content .email {
    margin-left: 0px;
    margin-bottom: 45px;
  }
  .contact-content #contact-form {
    margin-left: 0px;
  }
  .single-property .info-table {
    margin-left: 0px;
    margin-top: 45px;
  }
  .contact-page .section-heading {
    margin-right: 0px !important;
  }
  .contact-page #contact-form {
    margin-left: 0px;
    margin-top: 60px;
  }
  .best-deal .info-table ul li span {
    float: right !important;
    width: auto !important;
  }
}

@media (max-width: 1200px) {
  .best-deal .info-table ul li span {
    /* float: none;  <-- uklonjeno zbog upozorenja */
    width: auto !important;
  }
  .contact-page .section-heading {
    margin-right: 100px;
  }
}

/* --- OPTIMIZACIJA REZERVACIJSKOG OBRASCA ZA MOBITEL --- */
@media (max-width: 991px) {
  .reservation-form-container {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 24px auto 0 auto !important;
    display: flex;
    justify-content: center;
    z-index: 2;
    padding: 0 10px;
  }
  .reservation-form {
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 22px 12px;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: block;
  }
  /* Prikaži rezervacijski obrazac na mobitelu */
  .reservation-form-container {
    display: flex !important;
  }
}

/* Prikaži rezervacijski obrazac na svim rezolucijama */
.reservation-form-container {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Na mobitelu neka bude statičan i centriran */
@media (max-width: 576px) {
  .reservation-form-container {
    position: static !important;
    width: 95% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 10;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}

/* Prebriši narančaste ikone u crno na cijeloj stranici */
.fa,
.fas,
.far,
.fal,
.fab,
[class*="fa-"] {
    color: #000 !important;
    /* Ako su korištene i fill SVG ikone */
    fill: #000 !important;
}

/* Ako postoje posebne klase za narančastu boju, prebriši ih */
.text-orange,
.icon-orange,
.fa-orange {
    color: #000 !important;
    fill: #000 !important;
}

.owl-carousel .owl-item .fadeOut {
  animation: fadeOut 1.2s both;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Svjetlo plava boja za aktivni i hover naslov u meniju */
.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active,
.background-header .main-nav .nav li a.active {
  color: #4fc3f7 !important;
}

/* Responsive slider visina i padding */
@media (max-width: 991px) {
  .main-banner,
  .main-banner .item {
    min-height: 350px !important;
    height: 350px !important;
  }
  .main-banner .owl-dots {
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
  }
}

/* Responsive rezervacijski obrazac */
@media (max-width: 991px) {
  .reservation-form-container {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 auto 20px auto !important;
    display: flex;
    justify-content: center;
  }
  .reservation-form {
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
}

/* Responsive pozdravni tekst ispod slidera */
@media (max-width: 991px) {
  #welcome-laura .welcome-title {
    font-size: 1.6rem !important;
  }
  #welcome-laura .welcome-sub {
    font-size: 1.1rem !important;
  }
  #welcome-laura {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }
}

/* Responsive info sekcija (ikone i tekst ispod slidera) */
@media (max-width: 991px) {
  .featured .info-table ul li {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
  }
  .featured .info-table ul li span,
  .featured .info-table ul li svg {
    margin-bottom: 8px !important;
    margin-right: 0 !important;
  }
  .featured .info-table ul li span:last-child {
    position: static !important;
    font-size: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Responsive slike u sekcijama */
@media (max-width: 991px) {
  .featured .left-image img,
  .video-content .video-frame img {
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Responsive padding za sekcije */
@media (max-width: 991px) {
  .section {
    margin-top: 40px !important;
  }
}

/* Animirani border za inpute i textarea na focus */
@keyframes blue-glow-rotate {
  0% {
    box-shadow: 0 0 0 2px #b3e0fc, 0 0 8px 2px #4fc3f7 inset;
    border-image: conic-gradient(#4fc3f7 0deg, #b3e0fc 90deg, #4fc3f7 180deg, #b3e0fc 270deg, #4fc3f7 360deg) 1;
  }
  100% {
    box-shadow: 0 0 0 2px #b3e0fc, 0 0 8px 2px #4fc3f7 inset;
    border-image: conic-gradient(#b3e0fc 0deg, #4fc3f7 90deg, #b3e0fc 180deg, #4fc3f7 270deg, #b3e0fc 360deg) 1;
  }
}

.reservation-form input:focus,
.reservation-form textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 22px !important;
  border-color: #4fc3f7 !important;
  border-width: 1.5px !important;
  background-clip: padding-box !important;
  transition: none !important;
  /* Ukloni sve sistemske efekte */
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
  border-style: solid !important;
}

@supports (-webkit-touch-callout: none) {
  .reservation-form input:focus,
  .reservation-form textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 22px !important;
    border-color: #4fc3f7 !important;
    border-width: 1.5px !important;
    background-clip: padding-box !important;
    transition: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    border-style: solid !important;
  }
  .reservation-form input:focus::-webkit-focus-ring,
  .reservation-form textarea:focus::-webkit-focus-ring {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-focus-ring-color: transparent !important;
  }
}

/* === iOS Safari fix: uklanjanje duplog obruba */

/* 1. Ukloni sve sistemske efekte i border */
.reservation-form input,
.reservation-form textarea {
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 22px !important;
  background-color: #f6f6f6;
  padding: 12px 16px;
  font-size: 15px;
  transition: box-shadow 0.2s ease;
}

/* 2. Dodaj vlastiti svjetloplavi "obrub" koristeći box-shadow */
.reservation-form input:focus,
.reservation-form textarea:focus {
  box-shadow: 0 0 0 2px #4fc3f7 !important;
  background-color: #fff;
  outline: none !important;
}

/* --- PRAVILA ZA PRIKAZ/SAKRIVANJE REZERVACIJSKOG OBRASCA --- */

/* 1. Desktop: prikaži kontejner, sakrij gumb i modal */
@media (min-width: 577px) {
  /* Sakrij samo glavni gumb na banneru, ali ne i ostale rezervacijske gumbe */
  .main-banner #open-reservation-btn,
  .main-banner #reservation-modal {
    display: none !important;
  }
  .main-banner .reservation-form-container {
    display: flex !important;
  }
}

/* 2. Mobitel: sakrij kontejner, prikaži gumb i modal */
@media (max-width: 576px) {
  .main-banner .reservation-form-container {
    display: none !important;
  }
  #open-reservation-btn.reservation-fab {
    display: block !important;
  }
  .reservation-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.35);
    justify-content: center !important;
    align-items: center !important;
  }
  .reservation-modal.show {
    display: flex !important;
  }
}

/* 3. Globalni stilovi za sve rezervacijske gumbe */
.reserve-btn,
.reservation-btn,
[data-action="reservation"] {
  cursor: pointer !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Osiguraj da su rezervacijski modal i forma uvijek dostupni */
#reservation-modal {
  position: fixed;
  z-index: 1001;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.35);
  display: none;
  justify-content: center;
  align-items: center;
}

#reservation-modal.show {
  display: flex !important;
}

.carousel-item h4, .carousel-item p {
  text-transform: capitalize;
}

.zadar-carousel-wrapper {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0;
  overflow: hidden;
}
.zadar-carousel {
  display: flex;
  gap: 32px;
  width: max-content;
  min-width: 100vw;
  transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.carousel-item {
  min-width: 256px !important;
  max-width: 256px !important;
  height: 342px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  background: rgba(255,255,255,0.85);
  border-radius: 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  transition: box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  border: 2px solid #4fc3f7 !important;
}
.carousel-item img {
  width: 85% !important;
  height: 180px !important;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;
  margin-left: auto;
  margin-right: auto;
}
.carousel-item h4 {
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1e1e1e;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.carousel-item p {
  font-size: 1.01rem;
  color: #444;
  margin: 0;
  line-height: 1.5;
}
.carousel-item p em {
  font-size: 0.92rem !important;
  line-height: 1.3;
}
.carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  z-index: 1;
}
.carousel-item:hover, .carousel-item:active {
  transform: scale(1.08);
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
}
.carousel-item.fade-out {
  opacity: 0;
  pointer-events: none;
}
.carousel-item.fade-in {
  opacity: 1;
}

@media (max-width: 991px) {
  .carousel-item {
    min-width: 192px !important;
    max-width: 192px !important;
    height: 288px !important;
  }
  .carousel-item img {
    height: 108px !important;
  }
}
@media (max-width: 600px) {
  .carousel-item {
    min-width: 128px !important;
    max-width: 128px !important;
    height: 189px !important;
  }
  .carousel-item img {
    height: 63px !important;
  }
  .carousel-item h4 {
    font-size: 0.98rem;
  }
  .carousel-item p {
    font-size: 0.89rem;
  }
}

.carousel-arrow {
  display: none;
}

@media (min-width: 992px) {
  .carousel-item {
    min-width: 336px !important;
    max-width: 336px !important;
    height: 432px !important;
  }
  .carousel-item img {
    height: 270px !important;
  }
}

@media (max-width: 600px) {
  .main-banner,
  .main-banner .item {
    min-height: 220px !important;
    height: 220px !important;
  }
  .properties-items {
    margin-bottom: 28px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .properties .item {
    margin-bottom: 18px !important;
    padding: 16px 6px !important;
  }
  .properties-box {
    gap: 0 !important;
  }
}

/* Stil za gumb Pošalji na dnu početne stranice */
.reservation-form .submit-btn {
  background: #b3e5fc !important;
  color: #fff !important;
  border: 1.5px solid #2196f3 !important;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.reservation-form .submit-btn:hover,
.reservation-form .submit-btn:focus,
.reservation-form .submit-btn:active {
  background: #0d47a1 !important;
  color: #fff !important;
  border-color: #0d47a1 !important;
}
@media screen and (max-width: 1024px) {
  /* Samo za WebKit preglednike (iOS/Safari) */
  .reservation-form input:focus,
  .reservation-form textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 1px solid #4fc3f7 !important;
  }
  .reservation-form input:focus::-webkit-input-placeholder,
  .reservation-form textarea:focus::-webkit-input-placeholder {
    color: #aaa;
  }
  .reservation-form input:focus::-webkit-focus-ring,
  .reservation-form textarea:focus::-webkit-focus-ring {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* Dodatno, specifično za iOS uređaje */
@supports (-webkit-touch-callout: none) {
  .reservation-form input:focus,
  .reservation-form textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 1px solid #4fc3f7 !important;
  }
  .reservation-form input:focus::-webkit-focus-ring,
  .reservation-form textarea:focus::-webkit-focus-ring {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* iOS Safari: Uklanjanje duplog obruba na prvi klik za .reservation-form input/textarea */
.reservation-form input,
.reservation-form textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 22px !important;
  border: 2px solid #d0d0d0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
  outline: none !important;
  transition: border 0.2s ease;
  -webkit-tap-highlight-color: transparent !important;
}

.reservation-form input:focus,
.reservation-form textarea:focus {
  border: 2px solid #4fc3f7 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-clip: padding-box !important;
  -webkit-tap-highlight-color: transparent !important;
}

@supports (-webkit-touch-callout: none) {
  .reservation-form input:focus,
  .reservation-form textarea:focus {
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 22px !important;
  }
}

/* 100% iOS Safari fix za dupli obrub */

.reservation-form-container input,
.reservation-form-container textarea {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 22px !important;
  background-clip: padding-box !important;
  background-color: #f6f6f6 !important;
  transition: none !important;
  font-size: 15px;
  padding: 12px 16px;
}

/* Custom fokus stil bez ikakvog iOS ringa */
.reservation-form-container input:focus,
.reservation-form-container textarea:focus {
  outline: none !important;
  border: none !important;
  box-shadow: 0 0 0 2px #4fc3f7 !important;
  background-color: #fff !important;
}