obuhvati .icon pravilno */
}
/* Osiguraj da WhatsApp ikona izgleda isto kao ostale */
.floating-icons .whatsapp i {
font-size: 20px; /* isto kao druge ikone */
transform: scale(1.05); /* lagano povećanje jer je WA ikona vizualno sitnija */
}
/* Za dosljednost, dodatno možemo ukloniti default stil linkova */
.floating-icons a:link,
.floating-icons a:visited,
.floating-icons a:hover,
.floating-icons a:active {
color: inherit;
}
@media (max-width: 760px) {
.floating-icons {
right: -5px;
opacity: 0.8;
}
.floating-icons .icon {
width: 35px;
height: 45px;
padding-left: 6px;
transition: width 0.3s ease-in-out, padding-left 0.3s ease-in-out;
}
/* Ovo će spriječiti da ostane pomaknuto */
.floating-icons .icon:not(.active) {
width: 35px !important;
}
.floating-icons .icon.active {
width: 120px !important;
}
.floating-icons .icon.active::after {
opacity: 1;
}
*, *::before, *::after {
box-sizing: border-box;
}
}
/*FOOTER*/
.socials {
text-align: center;
}
.socials h4 {
color: white;
}
.social-icons img {
width: 30px; /* Veličina ikona društvenih mreža */
margin: 0 5px;
cursor: pointer;
transition: transform 0.3s ease;
}
.social-icons img:hover {
transform: scale(1.1); /* Efekat zumiranja na hover */
}
.copyright {
text-align: center;
font-size: 14px;
color: white;
}
.copyright-strong {
font-size: 20px;
color: white;
}
/*slick karusel*/
.slick-fora img{
padding:0px;
margin: 0.5px;
width: 100%;
height: auto;
max-height: 70vh; /* Slika mi neće biti viša od 70% ekrana */
object-fit: cover;
aspect-ratio: 16/9; /* Održava mi omjer širine i visine */
}
.your-class {
margin: 0 auto;
max-width: 100%;
}
.footer-link {
color: #aaa;
font-size: 0.9em;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-link:hover {
color: #666; /* tamnija nijansa sive */
text-decoration: underline;
}
/*KONTAKT STRANICA */
.body-kontakt {
font-family: 'Poppins', sans-serif; /* Ako koristiš Google Fonts */
color: #333;
overflow-x: hidden; /* Sprječava horizontalni scroll */
background-color: #2c2c2c;
padding-top: 60px; /* Sprječava preklapanje sadržaja sa fiksnim headerom */
}
.body-kontakt {
background-image: url('../img/ptd_img/background_kontakt.webp');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fiksna pozadina */
position: relative; /* Osigurava pravilan stacking context */
z-index: 0; /* Najniži sloj */
}
.form-group {
position: relative;
margin-bottom: 20px;
}
.error-msg {
position: absolute;
top: 100%;
left: 0;
color: red;
font-size: 0.9em;
display: none;
padding-top: 2px;
}
.container {
width: 100%;
margin: 0 auto;
padding: 10px;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col-md-6 {
padding: 10px;
width: 100%;
}
#ageModal {
display: none;
position: fixed;
z-index: 999;
left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.5);
}
#ageModalContent {
background: white;
padding: 20px;
max-width: 300px;
margin: 15% auto;
border-radius: 8px;
text-align: center;
}
#kontakt-pozdrav {
position: absolute;
right: -400px; /* Početna pozicija izvan ekrana */
top: 120px;
background-color: #004f56; /* Tamnija tirkizna */
color: #fff;
padding: 30px; /* Veći unutarnji razmak */
border-radius: 15px; /* Lagano povećan zaobljenost */
font-size: 24px; /* Veći tekst */
font-family: Arial, sans-serif;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: right 0.8s ease-out, opacity 0.8s ease-out;
max-width: 1000px; /* Širi okvir */
line-height: 1.6; /* Povećana visina linije */
}
#kontakt-pozdrav li {
margin: 0;
}
#kontakt-pozdrav h4:nth-last-of-type(2),
#kontakt-pozdrav h4:last-of-type {
text-indent: 20px; /* Uvlaka za pretposljednju i zadnju rečenicu */
display: block;
}
#kontakt-poruka {
position: absolute;
right: -400px; /* Početna pozicija izvan ekrana */
top: 450px; /* Malo niže od prve poruke */
background-color: #007B8A; /* Tirkizna zelena */
color: #fff;
padding: 20px;
border-radius: 15px;
font-size: 20px;
font-family: Arial, sans-serif;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: right 0.8s ease-out, opacity 0.8s ease-out;
width: 830px;
line-height: 1.5;
}
#kontakt-whatsapp {
position: absolute;
right: -400px;
top: 560px; /* Niže od prethodnog */
background-color: #25D366; /* WhatsApp zelena */
color: #fff;
padding: 20px;
border-radius: 15px;
font-size: 20px;
font-family: Arial, sans-serif;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: right 0.8s ease-out, opacity 0.8s ease-out;
width: 830px;
line-height: 1.5;
}
@media (max-width: 768px) {
#kontakt-whatsapp {
display: none !important;
}
}
.col-12 {
width: 100%;
margin-top: 20px;
}
.form-container {
position: relative;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 50%;
max-width: 800px;
margin-left: -120px;
}
.form-container form {
display: flex;
flex-direction: column;
}
.form-container label {
font-weight: bold;
margin-top: 10px;
}
.form-container input, .form-container textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-container button {
margin-top: 15px;
padding: 10px;
background: #0073e6;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
}
.form-container button:hover {
background: #005bb5;
}
/* mapa */
.map-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
margin-top: 10px;
}
.mapa-frame {
width: 100%;
height: 400px;
border-radius: 8px;
border: none;
}
@media (max-width: 768px) {
.map-container {
margin-top: 30px;
padding: 10px;
border-radius: 5px;
}
}
/* tekst */
.text-container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 1200px; /* da ne bude preširoko na velikim ekranima */
margin: 0px auto; /* automatski centar horizontalno + razmak odozgo i dolje */
margin-bottom: 30px;
}
.text-container textarea {
width: 100%;
height: 100px;
margin-top: 10px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
#quote-list-static,
#quote-list-dynamic {
list-style: none; /* makni točkice */
padding-left: 0;
}
#quote-list-static li::before,
#quote-list-dynamic li::before {
content: "★ ";
color: gold;
margin-right: 6px;
}
@media (max-width: 768px) {
#quote-list-static li,
#quote-list-dynamic li {
list-style: none;
padding-left: 1.5em; /* prostor za zvjezdicu */
text-indent: -1.5em; /* uvlači drugi red ispod prvog slova */
line-height: 1.8;
margin-bottom: 12px;
text-align: left;
position: relative;
}
#quote-list-static li::before,
#quote-list-dynamic li::before {
content: "★ ";
color: gold;
position: absolute;
left: 5px;
}
.text-container {
width: 100%;
margin-top: 0px;
}
}
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.col-md-6, .col-12 {
width: 100%;
}
.mapa-frame {
height: 300px;
}
.form-container {
width: 100%;
max-width: none;
border-radius: 0;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: -20px; /* Dodano: pomicanje prema gore */
}
/* Prilagodba poruka na manjim ekranima */
#kontakt-pozdrav,
#kontakt-poruka {
position: relative;
right: -100%; /* Početna pozicija izvan ekrana */
top: auto;
width: 90%;
max-width: 100%;
margin: 20px auto;
text-align: center;
opacity: 0;
transition: right 0.8s ease-out, opacity 0.8s ease-out;
}
#kontakt-pozdrav.show,
#kontakt-poruka.show {
right: 0%; /* Pomaknuto još malo desno */
opacity: 1;
}
#kontakt-pozdrav {
margin-top: 5px;
}
#kontakt-poruka {
margin-top: 20px;
}
}
/*BLOG STRANICA*/
.blog-container {
display: flex;
flex-direction: column; /* Postavlja blogove jedan ispod drugog */
align-items: stretch; /* Omogućuje da zauzmu punu širinu */
width: 100vw; /* Puna širina ekrana */
max-width: 100%; /* Osigurava da se ne sužava */
}
.blog-post {
width: 100%; /* Blog zauzima punu širinu */
background: #ccc;
color: black;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* Razmak između blog postova */
}
.blog-post p {
text-align: left;
}
.blog-header {
text-align: center;
margin-bottom: 20px;
}
.blog-post .flag1 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag2 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag3 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag4 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag5 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag6 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag7 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag8 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post .flag9 {
position: absolute;
right: 100px;
width: 200px;
height: auto;
}
.blog-post img {
max-width: 100%;
height: auto;
display: block;
border-radius: 5px;
}
/* Lagana rotacija slika */
.image-gallery {
position: relative;
width: 100%;
height: 300px;
overflow: hidden; /* Sprječava izlazak slika iz okvira */
}
.image-gallery img {
position: absolute;
width: 120px; /* Standardna veličina */
border: 5px solid white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease-in-out;
}
/* Različite rotacije i položaji za slike */
.image-gallery img:nth-child(1) { top: 10px; left: 20px; transform: rotate(-10deg); }
.image-gallery img:nth-child(2) { top: 20px; left: 70px; transform: rotate(5deg); }
.image-gallery img:nth-child(3) { top: 30px; left: 120px; transform: rotate(-5deg); }
.image-gallery img:nth-child(4) { top: 40px; left: 170px; transform: rotate(8deg); }
.image-gallery img:nth-child(5) { top: 50px; left: 220px; transform: rotate(-12deg); }
.image-gallery img:nth-child(6) { top: 60px; left: 270px; transform: rotate(6deg); }
.image-gallery img:nth-child(7) { top: 70px; left: 320px; transform: rotate(-4deg); }
.image-gallery img:nth-child(8) { top: 80px; left: 370px; transform: rotate(10deg); }
.image-gallery img:nth-child(9) { top: 90px; left: 420px; transform: rotate(-7deg); }
.image-gallery img:nth-child(10) { top: 100px; left: 470px; transform: rotate(5deg); }
.image-gallery img:nth-child(11) { top: 110px; left: 520px; transform: rotate(-10deg); }
.image-gallery img:nth-child(12) { top: 120px; left: 570px; transform: rotate(5deg); }
.image-gallery img:nth-child(13) { top: 110px; left: 620px; transform: rotate(-5deg); }
.image-gallery img:nth-child(14) { top: 100px; left: 670px; transform: rotate(8deg); }
.image-gallery img:nth-child(15) { top: 90px; left: 720px; transform: rotate(-12deg); }
.image-gallery img:nth-child(16) { top: 80px; left: 770px; transform: rotate(6deg); }
.image-gallery img:nth-child(17) { top: 70px; left: 820px; transform: rotate(-4deg); }
.image-gallery img:nth-child(18) { top: 60px; left: 870px; transform: rotate(10deg); }
.image-gallery img:nth-child(19) { top: 50px; left: 920px; transform: rotate(-7deg); }
.image-gallery img:nth-child(20) { top: 40px; left: 970px; transform: rotate(5deg); }
/* Kada pređem mišem preko slika, blago se povećavaju */
.image-gallery img:hover {
transform: scale(1.6);
z-index: 10;
border: 4px solid white;
}
.image-gallery img.enlarged {
transform: translate(-50%, -50%) scale(4); /* Veće skaliranje na 4x */
z-index: 20;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%; /* Slika će moći širiti do širine ekrana */
max-height: 100%; /* Slika će moći širiti do visine ekrana */
border: 2px solid white;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Tamna pozadina */
display: none; /* Početno je skriven */
z-index: 15; /* Ispod slike, ali iznad ostalog sadržaja */
}
#fullscreen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9); /* Jače zatamnjenje */
display: none; /* Početno skriven */
z-index: 99; /* Ispod slike, ali iznad svega ostalog */
}
/* Prikaži natpis samo na manjim ekranima */
@media (min-width: 769px) {
.gallery-toggle {
display: none; /* Sakriva natpis na velikim ekranima */
}
}
@media (max-width: 768px) {
.gallery-toggle {
display: block;
cursor: pointer;
text-align: center;
padding: 15px;
background-color: #eee;
border: 1px solid #ccc;
font-size: 1.2rem;
margin-bottom: 10px;
transition: background-color 0.3s ease;
}
.gallery-toggle:hover {
background-color: #ddd;
}
.gallery-wrapper {
overflow: hidden;
height: 0;
transition: height 0.6s ease; /* Animacija na visinu */
}
.gallery-wrapper.open {
height: auto; /* Visina će se automatski prilagoditi */
}
.image-gallery {
position: relative;
height: 300px; /* Visina slike može biti podesiva */
}
}
/*slike s desne strane blog teksta*/
.side-images {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 slike u redu */
gap: 10px; /* Razmak između slika */
justify-items: center; /* Centriranje slika unutar ćelija */
}
.col-md-3 .side-images { /* ovo čuvam dok se ne predomislim da ponovo imam 2 slike u redu */
display: flex;
flex-wrap: wrap; /* Omogućava prelamanje elemenata u novi red */
justify-content: center; /* Centriranje slika */
gap: 10px;
overflow: visible; /* važno */
}
.col-md-3 .side-images img {
width: calc(50% - 5px); /* Svaka slika zauzima pola širine, uz malo razmaka */
max-width: 100px; /* Da slike ne budu prevelike */
}
.side-images img {
position: relative; /* dodano */
width: 100px; /* Prilagodi veličinu slika */
border: 5px solid white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
cursor: pointer;
border-radius: 5px;
}
.side-images img:hover { /* Hover efekt - blago povećanje */
transform: scale(1.8);
z-index: 10;
}
.side-images img.enlarged { /* Klik na sliku - fullscreen prikaz */
transform: translate(-50%, -50%) scale(4);
z-index: 20;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
}
.side-images img:nth-child(6):hover {
transform-origin: right center;
}
.side-images img:nth-child(5):hover {
transform-origin: right center;
}
.side-images img:nth-child(4):hover {
transform-origin: right center;
}
.side-images img:nth-child(3):hover {
transform-origin: right center;
}
.side-images img:nth-child(2):hover {
transform-origin: right center;
}
.side-images img:nth-child(1):hover {
transform-origin: right center;
}
@media (min-width: 768px) {
.side-images img {
width: 80px !important; /* veličina slika */
}
.side-images img:hover {
transform: scale(7) !important; /* povećanje */
border: 2px solid white !important; /* okvir */
}
}
@media (max-width: 768px) {
.side-images img:hover {
transform: scale(4) !important; /* povećanje */
border: 2px solid white !important; /* okvir */
}
}
@media (max-width: 576px) {
.side-images {
grid-template-columns: 1fr; /* 1 slika u redu */
}
}
/*komentari u blogu*/
.comment-btn {
margin-top: 20px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.comment-btn:hover {
background-color: #0056b3;
}
.comment-form {
margin-top: 10px;
}
textarea {
width: 100%;
height: 80px;
padding: 5px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
#submitComment {
margin-top: 5px;
padding: 5px 10px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
#submitComment:hover {
background-color: #218838;
}
.commentsSection {
text-align: left;
margin-left: 0;
margin-right: auto;
max-width: 800px;
}
.commentsSection div {
text-align: left;
padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
.image-gallery {
height: auto; /* Povećava visinu prema potrebi */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1px; /* Razmak između slika */
padding: 10px;
}
.image-gallery img {
position: static;
width: 80px; /* Manje slike */
transform: none; /* Uklanja rotacije na manjim ekranima */
}
}
@media (max-width: 768px) {
.flag1, .flag2, .flag3, .flag4, .flag5,
.flag6, .flag7, .flag8, .flag9 {
display: none !important;
}
}
.blog-post {
position: relative;
overflow: hidden;
}
.blur-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%; /* zamuti donjih 50% članka */
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.5); /* da bolje vidiš blur */
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.blur-message {
font-size: 20px;
font-weight: bold;
background: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
border-radius: 10px;
}
.blur-message a {
color: #0077cc;
text-decoration: none;
margin-left: 10px;
}
.blur-message a:hover {
text-decoration: underline;
}
/*O NAMA STRANICA*/
.body-onama {
background-color: #2c2c2c;
text-align: center; /* Centriranje naslova */
font-family: 'Arial', sans-serif; /* Tip fonta */
font-weight: bold; /* Debeli font */
letter-spacing: 2px;
flex-direction: column;
min-height: 100vh; /* Osigurava da body zauzima cijeli ekran */
display: flex;
flex-direction: column;
}
.body-onama {
background-image: url('../img/ptd_img/background_kontakt.webp');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fiksna pozadina */
position: relative; /* Osigurava pravilan stacking context */
z-index: 0; /* Najniži sloj */
}
footer {
background-color: white; /* Bijela pozadina za footer */
padding: 20px; /* Unutarnji razmak oko sadržaja */
}
footer p, footer h4 {
color: black !important; /* Crna boja za tekst */
margin: 5px 0; /* Razmak između paragrafa */
}
footer .socials {
text-align: center; /* Centriranje sadržaja u div-u */
margin-bottom: 15px; /* Razmak između socijalnih ikona i ostatka teksta */
}
footer .social-icons img {
margin: 0 10px; /* Razmak između ikona */
width: 30px; /* Širina ikona */
height: 30px; /* Visina ikona */
}
footer .social-icons-2 img {
margin: 0 10px; /* Razmak između ikona */
width: 50px; /* Širina ikona */
height: 50px; /* Visina ikona */
}
main {
flex: 1; /* Omogućava da main raste i popuni prostor */
color: white; /* Ako je pozadina tamna, promijeni boju teksta */
padding: 20px; /* Doda malo prostora */
background-image: url('../img/ptd_img/background_kontakt.webp');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fiksna pozadina */
position: relative; /* Osigurava pravilan stacking context */
z-index: 0; /* Najniži sloj */
}
/* Stil za manje ekrane */
@media (max-width: 768px) {
.social-icons img,
.social-icons-2 img {
width: 40px; /* Smanjene ikone na manjim ekranima */
}
}
@media (max-width: 480px) {
.social-icons img,
.social-icons-2 img {
width: 30px; /* Još manje ikone za vrlo male ekrane */
}
.social-icons-2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
footer p {
font-size: 14px;
}
}
.about {
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
width: 100vw;
margin: 0;
color: white;
overflow: hidden;
position: relative;
}
.about-image {
flex: 1;
transform: translateX(100%); /* Početna pozicija slike izvan ekrana */
transition: transform 1.5s ease-out;
}
.about-image img {
width: 150%; /* Slika se prilagođava širini sekcije, možeš smanjiti ovu vrijednost ako je slika prevelika */
height: auto;
display: block;
}
.about-text {
flex: 1;
padding: 50px;
text-align: center;
}
/* Kada sekcija postane vidljiva */
.about.visible .about-image {
transform: translateX(-40%); /* više lijevo */
}
/* Responzivnost */
@media (max-width: 768px) {
.about {
flex-direction: column;
text-align: center;
}
.about-image {
transform: translateX(100%);
width: 100%; /* Na manjim ekranima slika zauzima cijeli prostor */
}
.about-text {
width: 100%;
padding: 20px;
}
}
/*BLOG_MALLORCA STRANICA*/
.body_Mallorca {
margin: 0;
font-family: Arial, sans-serif;
text-align: center;
background-color: white;
padding-top: 60px; /* Sprječava preklapanje sadržaja sa fiksnim headerom */
}
/* BLOG SVE STRANICE (link sa početne)*/
.sviblogovi {
display: flex; /* Omogućava fleksibilno poravnavanje unutar roditeljskog elementa */
align-items: stretch; /* Osigurava da stupci imaju istu visinu */
}
.sviblogovi .col-md-9 {
flex: 0 0 75%; /* 75% širine za tekst */
}
.sviblogovi .col-md-3 {
flex: 0 0 25%; /* 25% širine za slike/video */
display: flex;
flex-direction: column;
justify-content: center; /* Poravnava slike/video u sredinu vertikalno */
align-items: center; /* Poravnava slike/video u sredinu horizontalno */
}
.sviblogovi .col-md-3 img {
width: 100%; /* Slike se prilagođavaju širini stupca */
display: block;
}
/*povratak na vrh tipka*/
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #333;
color: white;
border: none;
font-size: 24px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s, transform 0.2s;
text-align: center;
line-height: 50px;
border-radius: 0; /* Uklanja kružni oblik, ostavlja kvadrat */
}
#back-to-top:hover {
opacity: 1;
transform: scale(1.1);
}
/*ISKUSTVA STRANICA*/
.body-iskustva {
overflow-x: hidden;
text-align: center; /* Centriranje naslova */
font-family: 'Arial', sans-serif; /* Tip fonta */
font-weight: bold; /* Debeli font */
letter-spacing: 2px;
flex-direction: column;
min-height: 100vh; /* Osigurava da body zauzima cijeli ekran */
display: flex;
flex-direction: column;
}
.body-iskustva {
background-image: url('../img/ptd_img/background_kontakt.webp');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fiksna pozadina */
position: relative; /* Osigurava pravilan stacking context */
}
.iskustva {
align-items: center;
justify-content: center;
padding: 70px;
width: 100vw;
margin: 0;
color: white;
overflow: hidden;
position: relative;
}
.experience {
flex-direction: column;
gap: 10px; /* Podešava razmak između teksta i videa */
flex: 1;
padding: 10px;
text-align: center;
margin-bottom: 0px; /* Smanji razmak između divova */
position: relative;
}
.experience video {
width: 70%;
aspect-ratio: 16 / 9;
object-fit: cover; /* Prilagođava prikaz unutar dimenzija */
}
/* Početni položaji - izvan ekrana */
.left-hidden {
transform: translateX(-100%);
opacity: 0;
}
.right-hidden {
transform: translateX(100%);
opacity: 0;
}
/* Animacija ulaska - zaustavlja se bliže rubovima */
.animate-left {
transform: translateX(-15%) !important; /* Staje bliže lijevom rubu */
opacity: 1;
transition: transform 1s ease-out, opacity 1s ease-out;
}
.animate-right {
transform: translateX(15%) !important; /* Staje bliže desnom rubu */
opacity: 1;
transition: transform 1s ease-out, opacity 1s ease-out;
}
.experience-extra-li{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -10%; /* Postavlja tekst desno od videa */
max-width: 300px;
color: white;
text-align: left;
}
.experience-extra-re{
position: absolute;
top: 40%;
transform: translateX(50%);
left: -20%; /* Postavlja tekst lijevo od videa */
max-width: 300px;
color: white;
text-align: right;
}
.cta-button {
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
background-color: #ff9800;
color: white;
text-decoration: none;
border-radius: 5px;
}
.cta-button:hover {
background-color: #e68900;
}
/* Na manjim ekranima tekst ostaje iznad videa */
@media (max-width: 768px) {
.experience-extra {
position: static;
transform: none;
text-align: center;
margin-top: 10px;
}
.experience video {
width: 100%;
}
}
@media (max-width: 768px) {
.experience-extra-li,
.experience-extra-re {
position: static;
transform: none;
text-align: center;
margin-top: 10px;
max-width: 100%;
}
}
/*SAVJETI STRANICA*/
.main {
position: relative;
padding: 0 10%;
}
.main-images {
position: relative;
padding-top: 5%; /* Spušta mi tekst */
}
.main-images .image {
position: absolute;
width: 40%;
height: auto;
border: 5px solid white;
filter: blur(4px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
top: 0; /* Postavljam ih na vrh roditelja */
}
.main-images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Lijeve slike */
.main-images .image.left {
left: -15%;
transform: rotate(-15deg);
}
/* Desne slike */
.main-images .image.right {
right: -10%;
transform: rotate(10deg);
}
/* Samo PRVE dvije slike spuštam */
.main-images .image.first-left {
margin-top: 7%;
}
.main-images .image.first-right {
margin-top: 4%;
}
/* Sljedeće 2 slike */
.main-images .image:not(.first-left):not(.first-right) {
margin-top: 40%;
}
/* Peta slika (lijeva) */
.main-images .image.fifth-left {
top: 900%; /* Spušta sliku 5 */
}
/* Šesta slika (desna) */
.main-images .image.sixth-right {
top: 570%; /* Spušta sliku 6 */
}
/* Sakrivanje slika na manjim ekranima */
@media (max-width: 768px) {
.main-images .image {
display: none; /* Sakriva slike na manjim ekranima */
}
}
.section-li {
transform: translateX(-100%);
animation: slide-in-left 3s ease-in-out forwards;
animation-delay: calc(var(--order) * 0.3s);
}
.section-re {
transform: translateX(100%);
animation: slide-in-right 5s ease-in-out forwards;
animation-delay: calc(var(--order) * 0.3s);
}
.text {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s forwards;
animation-delay: calc(var(--order) * 0.3s);
}
section div p {
margin-top: 5px; /* Smanjuje razmak iznad svakog */
margin-bottom: 5px; /* Smanjuje razmak ispod svakog
*/
}
@keyframes slide-in-left {
0% {
transform: translateX(-100%);
opacity: 0;
}
60% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-150px);
}
}
@keyframes slide-in-right {
0% {
transform: translateX(100%);
opacity: 0;
}
60% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(150px);
}
}
.savjeti-lista li {
opacity: 0;
transform: translateX(-50px);
animation: fade-in-left 1s ease-in-out forwards;
animation-delay: calc(var(--order) * 0.3s);
}
@keyframes fade-in-left {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.savjeti-lista li:nth-child(1) { --order: 1; }
.savjeti-lista li:nth-child(2) { --order: 2; }
.savjeti-lista li:nth-child(3) { --order: 3; }
.savjeti-lista li:nth-child(4) { --order: 4; }
.savjeti-lista li:nth-child(5) { --order: 5; }
.savjeti-lista li:nth-child(6) { --order: 6; }
.savjeti-lista li:nth-child(7) { --order: 7; }
.savjeti-lista li:nth-child(8) { --order: 8; }
.savjeti-lista li:nth-child(9) { --order: 9; }
.savjeti-lista li:nth-child(10) { --order: 10; }
.checklista-btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50; /* Zelena boja gumba */
color: white; /* Boja teksta */
text-align: center;
text-decoration: none; /* Uklanja podcrtavanje linka */
font-size: 16px;
border-radius: 5px; /* Zaobljeni kutovi */
transition: background-color 0.3s ease; /* Animacija za pozadinsku boju */
}
.checklista-btn:hover {
background-color: #45a049; /* Tamnija zelena kad je gumb hoveran */
}
.checklista-btn:active {
background-color: #397d3b; /* Još tamnija zelena kad je gumb pritisnut */
}
/* Responzivni dizajn za manje ekrane */
@media (max-width: 768px) {
section {
width: 90%;
margin: 30px auto;
}
.section-li, .section-re {
transform: translateX(0);
animation: fade-in 2s ease-in-out forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
/*CHECKLISTA*/
.body-checklista {
background-image: url('../img/ptd_img/nostalgia-leather-suitcase.webp');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fiksna pozadina */
position: relative; /* Osigurava pravilan stacking context */
z-index: 0; /* Najniži sloj */
}
.container-checklista {
width: 80%;
max-width: 800px;
margin: 50px auto; /* Centriranje na ekranu */
padding: 30px;
background-color: white; /* Boja pozadine - papir */
border-radius: 15px; /* Zaobljeni kutovi za papir */
transform: translateZ(1); /* Poticanje 3D efekta */
}
.container-checklista h1 {
text-align: center; /* Centriranje naslova */
font-size: 28px;
margin-bottom: 20px;
}
.container-checklista h3 {
font-size: 20px;
margin-top: 20px;
}
.container-checklista ul {
list-style-type: none;
padding-left: 0;
}
.container-checklista li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.container-checklista input[type="checkbox"] {
margin-right: 10px;
}
.container-checklista button {
display: block;
margin: 30px auto;
padding: 10px 20px;
background-color: #4CAF50; /* Zelena boja */
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.container-checklista button:hover {
background-color: #45a049;
}
.container-checklista button:active {
background-color: #397d3b;
}
/* Medijski upit za printanje */
@media print {
/* Sakrij sve osim checkliste */
body * {
visibility: hidden;
}
.container-checklista, .container-checklista * {
visibility: visible;
}
/* Ukloni absolute i pusti sadržaj da teče normalno */
.container-checklista {
position: static;
margin: 0 auto;
page-break-inside: avoid;
}
.container-checklista h1,
.container-checklista h3,
.container-checklista li {
page-break-inside: avoid;
}
/* Sakrij gumbe */
.container-checklista button {
display: none;
}
}
@page {
size: A4 portrait;
margin: 1cm;
}
/*za slanje e-maila*/
.email-button {
background-color: #e68900 !important;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
margin-top: 10px;
font-size: 16px;
border-radius: 5px;
}
.email-button:hover {
background-color: darkorange !important;
}
.container-checklista ul li {
display: flex;
align-items: center;
margin-bottom: 10px; /* Razmak između svakog elementa u listi */
}
.container-checklista ul li i {
margin-right: 10px; /* Razmak između ikone i teksta */
}
.container-checklista ul li input[type="checkbox"] {
width: 20px; /* Povećava veličinu checkbox-a */
height: 20px; /* Povećava visinu checkbox-a */
margin-right: 10px; /* Razmak između checkboxa i teksta */
cursor: pointer; /* Pokazivač miša kao rukavica pri hover-u */
}
@media (max-width: 768px) {
.container-checklista {
max-width: 95%;
padding: 10px;
position: relative;
top: 30px;
}
.container-checklista h1 {
font-size: 1.4em;
text-align: center;
}
.container-checklista h3 {
font-size: 1.1em;
margin-top: 10px;
}
.container-checklista ul {
padding-left: 0;
}
.container-checklista li {
font-size: 0.9em;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
flex-wrap: wrap; /* Omogućuje prelamanje teksta */
}
.container-checklista li i {
font-size: 1.2em;
}
.container-checklista input[type="checkbox"] {
width: 18px;
height: 18px;
margin-right: 10px;
flex-shrink: 0; /* Sprječava smanjivanje checkboxa */
}
.container-checklista button {
font-size: 0.9em;
padding: 8px 15px;
}
}
@media (max-width: 480px) {
.container-checklista h1 {
font-size: 1.2em;
}
.container-checklista h3 {
font-size: 1em;
}
.container-checklista li {
font-size: 0.85em;
}
.container-checklista input[type="checkbox"] {
width: 16px;
height: 16px;
}
.container-checklista button {
font-size: 0.85em;
padding: 6px 12px;
}
}
/*ITINERAR*/
.body-itinerar {
background-image: url('../img/ptd_img/nostalgia-leather-suitcase.webp');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Fiksna pozadina */
position: relative; /* Osigurava pravilan stacking context */
z-index: 0; /* Najniži sloj */
}
.container-itinerar {
width: 90%;
max-width: 1400px;
margin: 50px auto; /* Centriranje na ekranu */
padding: 30px;
background-color: white; /* Boja pozadine - papir */
border-radius: 15px; /* Zaobljeni kutovi za papir */
transform: translateZ(1); /* Poticanje 3D efekta */
}
.container-itinerar h1 {
text-align: center; /* Centriranje naslova */
font-size: 28px;
margin-bottom: 20px;
}
.container-itinerar h3 {
font-size: 20px;
margin-top: 20px;
}
.container-itinerar ul {
list-style-type: none;
padding-left: 0;
}
.container-itinerar li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.container-itinerar {
width: 95%;
padding: 10px;
border-radius: 10px;
/* Dodano za pomicanje ulijevo */
margin-left: 0;
margin-right: auto;
margin-top: 5px;
}
.container-itinerar h1 {
font-size: 24px;
}
.container-itinerar h3 {
font-size: 18px;
}
.container-itinerar li {
font-size: 16px;
flex-direction: row;
align-items: flex-start;
}
}
@media (max-width: 768px) {
.itinerary-info {
width: 93%;
padding: 10px;
border-radius: 10px;
/* Dodano za pomicanje ulijevo */
margin-left: 0;
margin-right: auto;
margin-top: 5px;
}
}
@media only screen and (max-width: 768px) {
.zoomable-mobile {
transition: transform 0.3s ease;
cursor: zoom-in;
position: relative;
z-index: 1;
}
.zoomable-mobile.zoomed {
transform: scale(2);
cursor: zoom-out;
z-index: 9999;
position: relative;
}
}
@media (min-width: 576px) {
.w-sm-70 {
width: 70% !important;
}
}
/*Bali popup reklama*/
.bali-popup-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9998;
}
/* Popup prozor */
.bali-popup {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 400px;
background-color: #eceae6;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
padding: 20px 30px 30px 30px;
z-index: 9999;
font-family: Arial, sans-serif;
}
/* Gumb za zatvaranje */
.close-popup {
position: absolute;
top: 10px;
right: 15px;
background: transparent;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
font-weight: bold;
}
.close-popup:hover {
color: #000;
}
.bali-announcement h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5rem;
color: #333;
}
.bali-announcement p {
font-size: 1.1rem;
margin-bottom: 15px;
color: #555;
}
.flag-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.flag-item img {
width: 70px;
border-radius: 5px;
}
.flag-item span {
margin-top: 8px;
font-weight: 600;
color: #333;
font-size: 1.1rem;
}
/* Responsive */
@media (max-width: 450px) {
.bali-popup {
width: 90%;
padding: 15px 20px 20px 20px;
}
.flag-item img {
width: 50px;
}
}
/* Madeira popup reklama */
.madeira-popup-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9998;
}
/* Popup prozor */
.madeira-popup {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 400px;
background-color: #eceae6; /* ista neutralna pozadina */
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
padding: 20px 30px 30px 30px;
z-index: 9999;
font-family: Arial, sans-serif;
}
/* Gumb za zatvaranje */
.madeira-popup .close-popup {
position: absolute;
top: 10px;
right: 15px;
background: transparent;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
font-weight: bold;
}
.madeira-popup .close-popup:hover {
color: #000;
}
/* Naslov i tekst unutar pop‑upa */
.madeira-announcement h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5rem;
color: #333;
}
.madeira-announcement p {
font-size: 1.1rem;
margin-bottom: 15px;
color: #555;
}
/* Omotač za više ponuda, postavlja ih jednu ispod druge */
.madeira-announcement .flag-stack {
display: flex;
flex-direction: column; /* vertikalni raspored */
gap: 12px; /* razmak između ponuda */
}
/* Zajednički stil za zastavice (koristi ga i Bali) */
.flag-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.flag-item img {
width: 70px;
border-radius: 5px;
}
.flag-item span {
margin-top: 8px;
font-weight: 600;
color: #333;
font-size: 1.1rem;
}
/* Responsive za mobitele */
@media (max-width: 450px) {
.madeira-popup {
width: 90%;
padding: 15px 20px 20px 20px;
}
.flag-item img {
width: 50px;
}
}
/* === ZAJEDNIČKI OVERLAY === */
.popup-overlay {
position: fixed;
inset: 0; /* skraćeno: top/right/bottom/left = 0 */
background: rgba(0,0,0,0.3);
z-index: 9998;
display: flex; /* centriramo wrapper */
justify-content: center;
align-items: flex-start; /* da gornji rub pop‑upa bude poravnat */
padding-top: 10vh; /* malo „odmakni” od samog vrha */
}
/* === WRAPPER KOJI DRŽI VIŠE POP‑UPA === */
.popup-wrapper {
display: flex;
flex-direction: row; /* desktop: bočno */
gap: 24px; /* razmak između Bali & Madeira */
flex-wrap: wrap; /* za svaki slučaj, ako se pojavi treći */
}
/* MOBITELI: pop‑upi jedan ispod drugog */
@media (max-width: 600px) {
.popup-wrapper {
flex-direction: column; /* okomito slaganje */
align-items: center; /* lagano centriranje */
}
}
/* === POP‑UP KUTIJE U WRAPPERU === */
/* Overridamo postojeće .bali-popup / .madeira-popup definicije: */
.popup-wrapper .bali-popup,
.popup-wrapper .madeira-popup {
position: relative; /* NE fixed — nasljeđuje se iz wrappera */
top: 0;
left: 0;
transform: none;
/* ostale postojeće stilove (width, padding, border-radius, background…)
NE diramo, ostaju iz originalnih CSS‑ova */
}
/* flytag popup */
.flytag-popup {
position: fixed;
top: 25%;
left: 0;
right: 0;
width: 60%;
max-width: 700px;
margin: auto;
background: #fff;
border: 2px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 20px;
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
}
.flytag-popup img {
width: 45%;
margin: 8px;
}
.close-flytag {
position: absolute;
top: 10px;
right: 20px;
font-size: 28px;
cursor: pointer;
}
/* Mobilna prilagodba */
@media (max-width: 768px) {
.flytag-content {
display: flex;
flex-direction: column;
align-items: center; /* centriraj horizontalno */
text-align: center; /* centriraj tekst */
width: 100%;
}
.flytag-popup {
width: 90%;
margin: auto;
padding: 16px;
}
.flytag-images {
justify-content: center;
width: 100%;
}
.flytag-images img {
width: 48%;
max-width: none;
}
}