@charset "UTF-8";
/*****************************************************
/// Nearby
******************************************************/
.element { position: relative; top: -10px; left: 0; transform: rotate(-0.5deg); z-index: 999; }
.element-img { position: absolute; top: 0; left: 0; z-index: 9; max-width: 620px; }

@media (max-width: 991px) {
  .element { position: relative; top: 250px; left: -144px; max-width: 100%; transform: scale(1); }
  .element-img { max-width: 100%; }
}

.surroundingArea { position: relative; z-index: 9; background: #fff; }
.surroundingArea:before { content: ''; position: absolute; inset: 0; background: url(../images/bg/oblak_3.png) no-repeat, rgba(14,118,188,0); z-index: 99; }
.surrounding { position: absolute; right: 50px; top: 0; z-index: 99; font-size: 30px; text-align: right; margin: 0; padding: 0; }
.surrounding .itemTitleWrap { font-size: 30px; text-align: right; padding: 50px 20px; margin: 50px 150px 20px 0; }
.surrounding .itemTitleWrap h3.itemTitle { margin-bottom: 0; font-size: 128px !important; letter-spacing: 6px; font-weight: 900; text-transform: uppercase; line-height: 1.1; padding-bottom: .5em; text-shadow: 4px 4px 0 #87c1ce, 0 0 4px rgba(5,146,194,.8), 0 0 2px #909090; }
.surrounding .itemTitleWrap h3.itemTitle small { display: block; margin-bottom: 0; font-size: 35px; color: #c6c1b1; font-weight: 800; letter-spacing: 5.2px; text-transform: uppercase; -webkit-text-stroke: 1px rgba(0,0,0,.3); text-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.surrounding .itemTitleWrap h3.itemTitle p { letter-spacing: 5.9px; }
.surrounding .itemTitleWrap .itemTitle__underline { position: absolute; right: 0; bottom: -7px; width: 84%; height: .5em; }
.surrounding .itemTitleWrap .itemTitle__underline--gradient-taper { position: absolute; right: 60px; bottom: 0; width: 100%; max-width: 700px; height: 1em; transform: translateX(30%) rotateY(180deg); }
.surrounding .itemTitleWrap .itemTitle__underline_revert { position: absolute; right: 0; bottom: 47px; width: 84%; height: .5em; }
.surrounding .itemTitleWrap .itemTitle__underline--gradient-taper_revert { position: absolute; right: 160px; bottom: 103px; width: 65%; max-width: 700px; height: .65em; transform: translateX(-50%) rotate(12.5deg); }
.surroundingAreaWrapper { width: 1920px !important; display: flex !important; align-items: center; margin-top: 0; padding-top: 350px; margin: 0; position: relative; background: url(../images/bg/bg_colorful.jpg) top center / cover no-repeat #fff; border-top-left-radius: 900px; box-shadow: inset 48px 20px 20px -10px rgba(26,47,82,.5); }
.surroundingArea-img img { border-bottom-left-radius: 0; border-top-right-radius: 65%; border-top: 65px solid rgba(0,114,186,.45); box-shadow: 50px 30px 100px rgba(194,182,140,.6); }
.surroundingAreaText { position: relative; width: 35%; right: 150px; padding: 100px; border-radius: 100px 20px 304px 20px; background-color: #0592c2; }
.surroundingAreaTextTitle { color: #c6c1b1; margin-bottom: 30px; -webkit-text-stroke: 2px rgb(42 122 149); text-shadow: 1px 1px 0 rgba(0,0,0,.3); letter-spacing: 1px; font-size: 69px; line-height: 65px; }
.surroundingAreaText p { color: #fff; opacity: .7; }
.surroundingArea .button-container { position: relative; z-index: 99; display: block; gap: 15px; padding-bottom: 0; margin-top: 40px; }
.surroundingArea .btn-big-red { position: relative; top: 0; display: inline-block; width: 68%; height: 58px; line-height: 58px; margin: 0 auto; padding: 0 30px; font: 800 30px/58px "Poppins", sans-serif; text-transform: uppercase; text-align: center; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.1); color: #2a616f; border-radius: 19px; background-color: #c6beae; background-image: linear-gradient(167deg, rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(255,255,255,.15), rgba(0,0,0,0)); box-shadow: 0 0 0 1px #9b9788 inset, 0 0 0 2px rgba(255,255,255,.15) inset, 0 8px 0 0 #8c867d, 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,.5); transition: .15s; }

/* Carousel dots */
#slider_surroundings ~ .bx-pager { position: absolute; bottom: 0; z-index: 99999; padding: 12px; margin-top: 0; text-align: center; background: #fff; border-radius: 10px; }
#slider_surroundings ~ .bx-pager .bx-pager-item a { width: 22px; height: 22px; margin: 0 6px; padding: 6px; border-radius: 50%; background: #fff; border: 8px solid rgba(18,191,204,.5); opacity: .65; box-shadow: inset 3px 1px 6px rgba(0,0,0,.7); transform: scale(.8); transition: background-color .3s ease, transform .3s ease, opacity .6s ease; box-sizing: content-box; flex: 0 1 auto; }
#slider_surroundings ~ .bx-pager .bx-pager-item a.active { width: 27px; height: 27px; margin-top: -4px; opacity: 1; transform: scale(1.2); background: #fff; border: 6px solid rgba(18,191,204,1); box-shadow: 0 0 8px rgba(0,119,182,.4); }

.surroundingAreaText, .surroundingAreaTextTitle, .surroundingArea-img img { transition: background-color .7s ease, border-top .7s ease, color .7s ease, -webkit-text-stroke .7s ease; }

/* Info grid (destination-like) */
#surroundingDestination .info-grid { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; align-items: stretch; }
#surroundingDestination .info-item { flex: 1 1 calc(33.333% - 2rem); display: flex; flex-direction: column; text-align: center; box-sizing: border-box; }
#surroundingDestination .info-item img { width: 100%; height: auto; margin-bottom: 1rem; border-radius: 8px; }
#surroundingDestination .info-item h4 { margin-bottom: .5rem; color: #3e5b9f; }
#surroundingDestination .info-item p { flex-grow: 1; line-height: 1.6; color: #1d2e3a; }
@media (max-width: 800px) { #surroundingDestination .info-item { flex: 1 1 calc(50% - 2rem); } }
@media (max-width: 600px) { #surroundingDestination .info-item { flex: 1 1 100%; } }

/* Theme variations */
#slide-kornati.theme-kornati .surroundingAreaText { background-color: #0592c2; }
#slide-kornati.theme-kornati .surroundingAreaTextTitle { color: #c6c1b1; -webkit-text-stroke: 2px rgb(42 122 149); }
#slide-kornati.theme-kornati .surroundingArea-img img { border-top: 65px solid rgba(0,114,186,.45); }

#slide-krka.theme-krka .surroundingAreaText { background-color: #32772b; }
#slide-krka.theme-krka .surroundingAreaTextTitle { color: #146f19; -webkit-text-stroke: 2px rgb(157,223,149); }
#slide-krka.theme-krka .surroundingArea-img img { border-top: 65px solid rgba(20,105,12,.35); }

/* Breakpoints */
@media screen and (max-width: 1700px) {
  .surroundingAreaText { width: 45%; padding: 50px; margin-left: -550px; }
}
@media screen and (max-width: 1300px) {
  .surroundingArea-img { width: 80%; }
  .surroundingAreaText { width: 60%; }
}
@media screen and (max-width: 1024px) {
  .surroundingAreaWrapper { flex-direction: column; }
  .surroundingArea-img { width: 100%; }
  .surroundingAreaText { width: 100%; margin-left: 0; margin-top: -5px; }
}
@media screen and (max-width: 500px) {
  .surroundingAreaText { padding: 40px 20px; }
  .surroundingAreaTextTitle { margin-bottom: 30px; }
}
@media (max-width: 991px) {
  .surroundingArea { top: 50px; text-align: center; }
  .surrounding { right: 0; top: 0; }
  .surroundingArea:before { background: none; } /* fixed stray ')' */
  .surrounding .itemTitleWrap { font-size: 30px; text-align: right; padding: 50px 20px; margin: 50px 0 80px; }
  .surrounding .itemTitleWrap h3.itemTitle { font-size: 58px !important; letter-spacing: 2px; line-height: 1.1; padding-bottom: .5em; }
  .surrounding .itemTitleWrap h3.itemTitle small { display: block; font-size: 30px; color: #c6c1b1; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; -webkit-text-stroke: 1px rgba(0,0,0,.3); text-shadow: 1px 1px 0 rgba(0,0,0,.3); }
  .surrounding .itemTitleWrap h3.itemTitle p { letter-spacing: 2.9px; } /* fixed leading 0 */
  .surrounding .itemTitleWrap .itemTitle__underline { position: absolute; right: 0; bottom: -7px; width: 84%; height: .5em; }
  .surrounding .itemTitleWrap .itemTitle__underline--gradient-taper { position: absolute; right: 60px; bottom: 0; width: 100%; max-width: 700px; height: 1em; transform: translateX(30%) rotateY(180deg); }
  .surrounding .itemTitleWrap .itemTitle__underline_revert { position: absolute; right: 0; bottom: 47px; width: 84%; height: .5em; }
  .surrounding .itemTitleWrap .itemTitle__underline--gradient-taper_revert { position: absolute; right: 160px; bottom: 103px; width: 65%; max-width: 700px; height: .65em; transform: translateX(-50%) rotate(12.5deg); }
  .surroundingArea-img { width: 100%; padding: 200px 0 0; }
  .surroundingAreaWrapper { display: block; width: 100%; padding-top: 200px; margin-top: 0; margin-bottom: 350px; }
  .surroundingAreaText { position: relative; display: block; width: 100%; right: 0; padding: 50px 50px 150px; border-radius: 0; }
  .surroundingAreaTextTitle { color: #c6c1b1; margin-bottom: 30px; -webkit-text-stroke: 2px rgb(42 122 149); text-shadow: 1px 1px 0 rgba(0,0,0,.3); letter-spacing: 1px; font-size: 69px; line-height: 65px; }
  .bx-wrapper .bx-pager { display: none; }
}