@charset "UTF-8";
@import "bootstrap.5.3.3.min.css";
@import "cookie-consent.min.css";
@import "photoswipe.min.css";

:root {
    --teal-100: #d4fffe;
    --teal-200: #8feceb;
    --teal-300: #73d0cf;
    --teal-400: #56b4b4;
    --teal-500: #389999;
    --teal-600: #008080;
    --teal-700: #006b6b;
    --gold-500: #c2b86e;
    --gold-600: #b3a95b;
    --gold-600: #978914;
    --gold-700: #6b6000;
    --text-link-color: var(--teal-700);
    --text-link-hover-color: var(--gold-700);
    --navbar-link-color: #fff;
    --navbar-link-hover-color: var(--gold-500);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --footer-title-color: #fff;
}
/* COMMON
=============================================== */
body {
    font-size: 1rem;
}
.shadow {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.85);
}
.border-green {
    border-color: var(--teal-600);
    border-top: 2px solid var(--teal-600);
}
/* FONT STYLES
=============================================== */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 400 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}
/* TYPHOGRAPHY
=============================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color:var(--teal-700);
}

/* NAVBAR
=============================================== */
.navbar {
    background-color: var(--teal-700);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 350;
    font-size: 1.3rem;
    padding: .3125rem 0;
}
.nav-link {
    margin-right: 15px;
}
.navbar .btn:focus-visible {
	outline: auto;
	box-shadow: none
}
.offcanvas-md {
    background-color: var(--teal-700);
}
.dropdown-menu {
    background: var(--teal-600);
}

/* NAVBAR COUNTRY FLAGS
=============================================== */
.flag-icon-en {
    background-image:url('../images/flags/uk_24.svg');
}
.flag-icon-hr{
    background-image:url('../images/flags/hr_24.svg');
}
.flag-icon-de{
    background-image:url('../images/flags/de_24.svg');
}

/* HEADER
=============================================== */
header {
	position: relative;
	margin-top: 0;
	overflow: hidden;
	flex-shrink: 0;
}
#header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    width: 100%;
}
#header-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
	color: #fff;
    padding: 1rem;
    font-size: clamp(3rem, 2rem + 2.5vw, 6rem);

}
#header-text {
    font-family: 'Playfair Display', Georgia, serif;
	color: #fff;
    padding: 1rem;
    font-size: clamp(1.8rem, 1.3333rem + 1.1667vw, 3.2rem);
    text-shadow: 2px 2px 2px rgba(0,0,0,0.85);
}
#header-button {

}
/* Jumbo images overlay */
.full-screen-image-container {
    position: relative;
    width: 100%;
    height: 100vh;
}
.full-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
#header-content {
    position: relative;
    z-index: 2;
    color: white;
    padding-top: 20px;
}
/* Header image OLD CODE
.header-background {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 2560px;
	max-height: calc(100vh - 82px)
}
.header-background img {
	width: 100%;
	height: auto
}
@media(min-width: 768px) {
	header {
		padding-top: 82px;
	}
	.header-background {
		max-height: calc(100vh - 82px)
	}
}
@media(min-width: 1200px) {
	.header-background {
		height: 51.24vw;
		max-height: calc(100vh - 60px)
	}
	.header-background img {
		position: fixed;
		z-index: -1
	}
}
@media(min-width: 2560px) {
	.header-background {
		width: 2543px;
		height: 1303px
	}
	.header-background img {
		width: 2543px
	}
}
*/

.full-screen-header {
    width: 100%;
    height: calc(100vh - 36px); /* 100% viewport height - navbar height */
    margin: 0; /* Uklanjamo margine */
    position: relative; /* Potrebno za pozicioniranje teksta */
    overflow: hidden; /* Sprječava prikazivanje sadržaja izvan granica */
}

.full-screen-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.full-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Osigurava da slika ispuni prostor bez izobličenja */
    object-position: center; /* Centriranje slike */
    display: block; /* Uklanja eventualni mali razmak ispod slike */
}

/* #BANNERS
********************************************************************** */
.banner-title {
    z-index: 10;
    color: #fff;
    font-size: 3rem;
}
.banner-container {
    height: 340px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#afrodita-banner {
    background-image: url('../images/common/afrodita-banner_1.webp');
}
#hera-banner {
    background-image: url('../images/common/hera-banner_1.webp');
}
#posejdon-banner {
    background-image: url('../images/common/posejdon-banner_1.webp');
}
#grandpa-mate-house-banner {
    background-image: url('../images/common/kuca-dide-mate-banner_1.webp');
}
#apolon-banner {
    background-image: url('../images/common/apolon-banner_1.webp');
}
#atena-banner {
    background-image: url('../images/common/atena-banner_1.webp');
}
#contact-banner {
    background-image: url('../images/common/sv-filip-jakov-banner_1.webp');
}
#gallery-banner {
    background-image: url('../images/common/kuca-dide-mate-banner_4.webp');
}
#active-holiday-banner {
    background-image: url('../images/common/galesnik-banner_1.webp');
}
#terms-banner {
    background-image: url('../images/common/kuca-dide-mate-banner_3.webp');
}
#privacy-policy-banner {
    background-image: url('../images/common/kuca-dide-mate-banner_3.webp');
}
/* #IMAGE STYLES
============================================= */
.bordered-img {
    border: 1px solid var(--teal-500);
    padding: 2px;
    background: #fff;
}
.inset-border-white-5 {
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: -5px;
}
/* #GOOGLE MAP
********************************************************************** */
#map {
    position: relative;
    overflow: hidden;
    max-width: 1320px;
    min-height: 550px;
    padding: 3px;
    width: 100%;
    border: 4px solid #EBEBEB;
    transition: border-color .2s linear;
    -moz-transition: border-color .2s linear;
    -webkit-transition: border-color .2s linear;
    -ms-transition: border-color .2s linear;
    -o-transition: border-color .2s linear;
}
#map:hover {
    border-color: #C1C1C1;
}
.gMap-popup{
    background-color: #EAEAEA;
    height: 80px;
    padding:5px;
}
#map_canvas img, .google-maps img, #map img {
    max-width: none;
}
/* THREE COLUMN LAYOUT
=============================================== */
#three-column-layout {
    color: #fff;
    background-color: var(--teal-600);
}
#three-column-layout h3 {
    color: #fff;
    background-color: var(--teal-600);
}
/* EQUIPMENT
=============================================== */
.equipment-list p {
     line-height: 1;
}
/* PRICE CARDS
=============================================== */
.price-cards .card {
    color: #fff;
    background-color: var(--teal-700);
    border: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}
.card {
    border-color: var(--teal-500);
    border-bottom-width: 7px;
}

/* ACTIVE HOLIDAY
=============================================== */

/* FOOTER
=============================================== */
footer {
	width: 100%;
	background-color: var(--teal-700);
	z-index: 0;
}
footer .container {

}
#container-wrapper {
	background-image: url('../images/various/oceanseamless-white_210h_93op.png');
    margin-top: 15px;
}

.footer-title  {
    font-family: 'Source Serif 4', serif;
    color: var(--footer-title-color);
    font-size: 1.4rem;
}

/* LINKS
=============================================== */
a:link,
a:visited {
    color: var(--text-link-color)!important;
    border: none;
    text-decoration: none;
    border-bottom: 1px dotted var(--text-link-color);
}
a:hover,
a:active {
    color: var(--text-link-hover-color);
    border: none;
    text-decoration: none;
    border-bottom: 1px solid var(--text-link-hover-color);
}
/* Navbar */
.navbar-nav .nav-link,
.dropdown-menu .dropdown-item {
    color: white !important;
    position: relative;
    text-decoration: none;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.dropdown-menu .dropdown-item:hover {
    color: var(--gold-500)!important;
    border: 1px soli #fff;
}
.navbar-nav .nav-link:not(.dropdown-toggle)::after,
.dropdown-menu .dropdown-item::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background-color: white;
    transition: width 0.3s ease-in-out;
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
}
.navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
.dropdown-menu .dropdown-item:hover::after {
    width: 100%;
}
.navbar-nav .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--teal-500);
}

/* Footer */
footer  {
	color: var(--navbar-link-color);
}
footer a,
footer a:link,
footer a:visited {
	color: var(--navbar-link-color)!important;  ;
    border: none;
    text-decoration: none;
    border-bottom: 1px dotted var(--navbar-link-color);
	transition: text-decoration-color .3s
}
footer a:hover {
	color: var(--navbar-link-hover-color)!important;  ;
    border: none;
    text-decoration: none;
    border-bottom: 1px solid var(--navbar-link-hover-color);
}
/* Custom button */
a.btn-custom,
a.btn-custom:hover,
a.btn-custom:visited,
a.btn-custom:active {
    color: white !important;
}

.social-icon svg {
    fill: var(--teal-700);
    width: 40px;
    height: 40px;
}
a.social-icon {
    border: none;
    text-decoration: none;
}

/* BUTTONS
=============================================== */
.btn-custom {
    background-color: var(--teal-700);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}
.btn-custom:hover {
    background-color: var(--gold-700);
    color: white;
}
.btn-custom:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 107, 107, 0.5);
    outline: none;
}
.btn-custom:active {
    background-color: #004444;
}

.btn-custom:visited {
    color: white;
}

.btn-custom-2 {
    font-size: 1rem;
    border-radius: 0;
    background-color: white;
    border: 1px solid var(--teal-600)!important;
    outline: .1rem solid white;
    outline-offset: -.2rem;
    color: var(--teal-600);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    min-width: 200px;
}
.btn-custom-2:visited {
    color: var(--teal-600);
}
.btn-custom-2:hover,
.btn-custom-2:focus {
    background-color: var(--teal-600);
    color: white!important;
}

/* SCROL TO TOP
=============================================== */
#scroll-to-top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    opacity: 0;
    padding: 10px;
    transition: opacity .5s ease-in-out,bottom .25s ease-in-out;
    box-shadow: rgba(0,0,0,.2) 0px 2px 4px -1px,rgba(0,0,0,.14) 0px 4px 5px 0px,rgba(0,0,0,.12) 0px 1px 10px 0px;
    border-radius: 8px;
    z-index: 20
}
#scroll-to-top svg {
    fill: var(--navbar-link-hover-color);
}

/* Check all this!!! ------------------------------------------------------------------ */
@media(prefers-reduced-motion) {
	.slide-in {
		animation-duration: 0ms;
		animation-fill-mode: none
	}
}


/* TABLES ----------------------------------------------------------------------------- */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch
}
.sc-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1rem;
	color: inherit
}
.sc-table th {
	font-weight: bold
}
.sc-table td {
	font-size: .75rem;
	font-family: var(--bs-font-monospace);
	white-space: nowrap
}
.sc-table th,
.sc-table td {
	border-color: inherit;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	padding: 10px 5px;
	text-align: center;
	vertical-align: top
}
.font-table {
	width: 80%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1rem;
	color: inherit
}
.font-table th {
	font-weight: bold
}
.font-table th:first-child {
	width: 35%
}
.font-table th,
.font-table td {
	border-color: inherit;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	padding: .3125rem
}
.table-bordered1 {
	border: 1px solid #dee2e6
}


/* VARIOUS ----------------------------------------------------------------------------

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
	opacity: 0;
	visibility: hidden;
	z-index: 98;
	transition: opacity .25s ease-out
}
#overlay.show {
	opacity: 1;
	visibility: visible
}
.card {
	--bs-card-bg: #fff;
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
}

section {
	padding: 1rem 0 1rem 0;
	position: relative;
	overflow: hidden;
	z-index: 0;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	flex-shrink: 0
}

.card-section {
	padding: 1rem 0;
	position: relative;
	overflow: hidden;
	z-index: 0;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg)
}

.scss-diagram {
	border: 1px solid var(--bs-border-color);
	border-radius: .1875rem
}


#skippy .skiplink-text {
	padding: .5em;
	outline: 1px dotted
}
.ms-5rem {
	margin-left: 5rem
}

.break-all {
	word-break: break-all
}

#skippy {
	z-index: 1085;
	position: absolute;
	display: block;
	padding: 1em;
	color: #fff;
	background-color: #212529;
	outline: 0
}
*/