/*!
Theme Name: Petra travel
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: petra-travel
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Petra travel is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,500&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.centar {
	text-align: center;
}

/* ===============================
   PETRA TRAVEL - HERO PUTOVANJE
   =============================== */

.petra-hero {
    position: relative;
    width: 100%;
    min-height: 590px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #0c2849;
}

/* HERO SLIKA */

.petra-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gradient preko slike */

.petra-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(5, 24, 46, 0.92) 0%,
        rgba(5, 24, 46, 0.76) 28%,
        rgba(5, 24, 46, 0.38) 48%,
        rgba(5, 24, 46, 0.08) 68%,
        rgba(5, 24, 46, 0) 100%
    );
}
/* SADRŽAJ */

.petra-hero__content {
    position: relative;
    z-index: 2;

    width: min(1200px, calc(100% - 60px));
    margin: 0 auto;

    padding-top: 60px;
    padding-bottom: 60px;

    color: #ffffff;
}

/* H1 */

.petra-hero h1 {
    margin: 0;
	text-align: left;
    font-family: "Playfair Display", serif;
    font-size: clamp(52px, 5vw, 76px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1px;
    color: #ffffff;
}
/* Zeleno srce Italije */

.petra-hero__subtitle {
    margin-top: 12px;
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
    font-style: italic;
    font-weight: 500;
    color: #e7b928;
}
/* Ruta */

.petra-hero__route {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 600;
}

/* Datum + avion */

.petra-hero__details {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    margin-top: 24px;
}

.petra-hero__detail {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 16px;
    font-weight: 500;

    color: #ffffff;
}

.petra-hero__icon {
    font-size: 21px;
    color: #e7b928;
}

/* Cena */

.petra-hero__price-label {
    margin-top: 32px;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 1.5px;

    color: rgba(255,255,255,.85);
}

.petra-hero__price {
    margin-top: 2px;

    font-size: 52px;
    line-height: 1;

    font-weight: 800;

    color: #e7b928;
}

.petra-hero__price-note {
    margin-top: 5px;

    font-size: 14px;

    color: rgba(255,255,255,.9);
}

/* Dugme */

.petra-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 24px;

    padding: 15px 26px;

    background: #e5b522;

    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    border-radius: 5px;

    box-shadow: 0 5px 18px rgba(0,0,0,.20);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.petra-hero__button:hover {
    background: #cf9f0a;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.petra-trip-info {
    position: relative;
    z-index: 5;

    width: min(1200px, calc(100% - 40px));
    margin: -50px auto 0;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    background: #ffffff;

    border-radius: 8px;
    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(10, 37, 66, 0.13),
        0 2px 6px rgba(0, 0, 0, 0.06);
}


/* pojedinačna stavka */

.petra-trip-info__item {
    position: relative;

    min-height: 100px;

    padding: 22px 16px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: #ffffff;
}


/* vertikalne linije između elemenata */

.petra-trip-info__item:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 24px;
    right: 0;
    bottom: 24px;

    width: 1px;

    background: #e5e8ec;
}


/* ikonica */

.petra-trip-info__icon {
    margin-bottom: 9px;

    font-size: 30px;
    line-height: 1;

    color: #0c2849;
}


/* glavni tekst */

.petra-trip-info__title {
    font-family: "Montserrat", sans-serif;

    font-size: 14px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: 0.3px;

    color: #0c2849;
}


/* manji tekst */

.petra-trip-info__text {
    margin-top: 5px;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 500;

    color: #66717d;
}


/* cena */

.petra-trip-info__item--price .petra-trip-info__icon,
.petra-trip-info__item--price .petra-trip-info__title {
    color: #e7b928;
}

.petra-trip-info__item--price .petra-trip-info__title {
    font-size: 17px;
    font-weight: 800;
}
.petra-intro {
    padding: 30px 20px 25px;
    background: #ffffff;
}

.petra-intro__inner {
    margin: 0 auto;
    text-align: center;
}

.petra-intro__line {
    width: 45px;
    height: 3px;
    margin: 0 auto 20px;
    background: #e7b928;
    border-radius: 2px;
}

.petra-intro__text {
margin: 0 auto;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4f5963;}
.petra-program {
     margin: 0 auto;
    padding: 20px 20px;
}

.petra-program__title {
    margin: 0;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 700;
    color: #0c2849;
}

.petra-program__line {
    width: 48px;
    height: 3px;

    margin: 14px auto 35px;

    background: #e7b928;
    border-radius: 2px;
}


/* DAN */

.petra-day {
    margin-bottom: 16px;

    background: #ffffff;

    border: 1px solid #e5e9ee;
    border-radius: 8px;

    box-shadow: 0 4px 14px rgba(12, 40, 73, 0.06);

    overflow: hidden;
}


/* header dana */

.petra-day__header {
    display: grid;
    grid-template-columns: 115px 1fr;
    align-items: stretch;
}


/* broj dana */

.petra-day__number {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 12px;

    background: #0c2849;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;

    color: #ffffff;
}


/* H3 */

.petra-day__title {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 8px 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;

    color: #0c2849;
}


/* tekst */

.petra-day__content {
    padding: 14px 20px 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.75;

    color: #4f5963;
}

.petra-day__content p {
    margin: 0 0 12px;
}

.petra-day__content p:last-child {
    margin-bottom: 0;
}


/* sakriveni dani */

.petra-day--hidden {
    display: none;
}


/* dugme */

.petra-program__toggle-wrap {
    text-align: center;
    margin-top: 26px;
}

.petra-program__toggle {
    padding: 14px 26px;

    border: 0;
    border-radius: 6px;

    background: #e7b928;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
	color: #0c2849;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.petra-program__toggle:hover {
    background: #cf9f0a;
    transform: translateY(-1px);
}
 /* PETRA TRAVEL - CENE ARANŽMANA
   ========================================= */

.petra-prices {
    padding: 20px 20px;
    background: #ffffff;
}

.petra-prices__inner {
    max-width: 1000px;
    margin: 0 auto;
}


/* NASLOV */

.petra-prices__title {
    margin: 0;

    text-align: center;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.25;
    font-weight: 700;

    color: #0c2849;
}

.petra-prices__line {
    width: 48px;
    height: 3px;

    margin: 14px auto 30px;

    background: #e7b928;
    border-radius: 2px;
}


/* =========================================
   GLAVNA CENA
   ========================================= */

.petra-price-main {
    min-height: 105px;

    padding: 16px 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 40px;

    text-align: center;

    background: #0c2849;

    border-radius: 9px;

    box-shadow: 0 5px 16px rgba(12, 40, 73, 0.10);
}


/* GLAVNA CENA - LABEL */

.petra-price-main__label {
    padding-right: 35px;

    border-right: 1px solid rgba(255,255,255,.25);

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;

    color: #ffffff;
}


/* IZNOS */

.petra-price-main__value {
    font-family: "Montserrat", sans-serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;

    color: #e7b928;
}


/* PO OSOBI */

.petra-price-main__note {
    padding-left: 35px;

    border-left: 1px solid rgba(255,255,255,.25);

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 500;

    color: rgba(255,255,255,.90);
}


/* =========================================
   OSTALE CENE
   ========================================= */

.petra-price-extra {
    margin-top: 32px;
}

.petra-price-extra__title {
    margin: 0 0 16px;

    text-align: center;

    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    color: #0c2849;
}


/* mala zlatna crta ispod naslova */

.petra-price-extra__title::after {
    content: "";

    display: block;

    width: 36px;
    height: 2px;

    margin: 10px auto 0;

    background: #e7b928;
}


/* tabela/lista */

.petra-price-extra__list {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e3e7eb;
    border-radius: 8px;
}


/* jedan red */

.petra-price-extra__item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 16px 22px;

    border-bottom: 1px solid #e5e9ee;
}

.petra-price-extra__item:last-child {
    border-bottom: 0;
}


/* naziv */

.petra-price-extra__name {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;

    color: #3f4b57;
}


/* cena */

.petra-price-extra__value {
    min-width: 110px;

    padding-left: 25px;

    text-align: right;

    border-left: 1px solid #e5e9ee;

    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;

    color: #0c2849;
}
/* =========================================
   GALERIJA
   ========================================= */

.petra-gallery {
    padding: 50px 20px 60px;
    background: #ffffff;
}

.petra-gallery__inner {
    max-width: 1100px;
    margin: 0 auto;
}


/* GRID */

.petra-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 28px;
}


/* THUMBNAIL */

.petra-gallery__item {
    position: relative;

    display: block;

    aspect-ratio: 4 / 3;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 8px;

    background: #f0f2f4;

    cursor: pointer;
}

.petra-gallery__item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

@media (hover: hover) {

    .petra-gallery__item:hover img {
        transform: scale(1.04);
    }

}


/* DODATNE SLIKE - dostupne u lightbox-u */

.petra-gallery__item--extra {
    display: none;
}


/* DUGME */

.petra-gallery__actions {
    margin-top: 22px;
    text-align: center;
}

.petra-gallery__open-all {
    padding: 13px 24px;

    border: 0;
    border-radius: 6px;

    background: #0c2849;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: #ffffff;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.petra-gallery__open-all:hover {
    background: #163c69;
    transform: translateY(-1px);
}


/* =========================================
   LIGHTBOX
   ========================================= */

.petra-lightbox {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;
}

.petra-lightbox.is-open {
    display: flex;
}


/* TAMNA POZADINA */

.petra-lightbox__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(3, 13, 25, 0.92);
}


/* DIALOG */

.petra-lightbox__dialog {
    position: relative;

    z-index: 2;

    width: min(1200px, 100%);
    max-height: calc(100vh - 60px);

    display: flex;
    align-items: center;
    justify-content: center;
}


/* FIGURE */

.petra-lightbox__figure {
    position: relative;

    margin: 0;

    max-width: 100%;
    max-height: calc(100vh - 60px);

    display: flex;
    flex-direction: column;

    background: #000000;

    border-radius: 8px;

    overflow: hidden;
}


/* VELIKA SLIKA */

.petra-lightbox__image {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 170px);

    width: auto;
    height: auto;

    object-fit: contain;

    margin: 0 auto;
}


/* OPIS DOLE */

.petra-lightbox__caption {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    padding: 15px 18px;

    background: rgba(5, 24, 46, 0.96);

    font-family: "Montserrat", sans-serif;

    color: #ffffff;
}

.petra-lightbox__caption-text {
    min-width: 0;
}

.petra-lightbox__title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.petra-lightbox__description {
    margin-top: 4px;

    font-size: 13px;
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.8);
}

.petra-lightbox__description:empty {
    display: none;
}

.petra-lightbox__counter {
    flex-shrink: 0;

    font-size: 13px;

    color: #e7b928;
}


/* ZATVORI */

.petra-lightbox__close {
    position: absolute;

    top: -20px;
    right: -10px;

    z-index: 4;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: #ffffff;

    font-size: 30px;
    line-height: 1;

    color: #0c2849;

    cursor: pointer;
}


/* STRELICE */

.petra-lightbox__nav {
    position: absolute;

    top: 50%;

    z-index: 4;

    width: 46px;
    height: 58px;

    border: 0;
    border-radius: 6px;

    background: rgba(255,255,255,.9);

    cursor: pointer;

    transform: translateY(-50%);
}

.petra-lightbox__nav--prev {
    left: 10px;
}

.petra-lightbox__nav--next {
    right: 10px;
}
/* LIGHTBOX - ispravka X i strelica */

.petra-lightbox__close {
    font-size: 0;
}

.petra-lightbox__close::before,
.petra-lightbox__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 20px;
    height: 2px;

    background: #0c2849;
}

.petra-lightbox__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.petra-lightbox__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* STRELICE */

.petra-lightbox__nav {
    font-size: 0;
}

.petra-lightbox__nav::before {
    content: "";
    position: absolute;
    top: 50%;

    width: 13px;
    height: 13px;

    border-top: 3px solid #0c2849;
    border-right: 3px solid #0c2849;
}

.petra-lightbox__nav--prev::before {
    left: 19px;
    transform: translateY(-50%) rotate(-135deg);
}

.petra-lightbox__nav--next::before {
    right: 19px;
    transform: translateY(-50%) rotate(45deg);
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

    .petra-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================
   MOBILNI
   ========================================= */

@media (max-width: 600px) {

    .petra-gallery {
        padding: 42px 14px 48px;
    }

    .petra-gallery__grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 8px;

        margin-top: 24px;
    }

    .petra-lightbox {
        padding: 12px;
    }

    .petra-lightbox__dialog {
        max-height: calc(100vh - 24px);
    }

    .petra-lightbox__figure {
        max-height: calc(100vh - 24px);
    }

    .petra-lightbox__image {
        max-height: calc(100vh - 150px);
    }

    .petra-lightbox__caption {
        padding: 12px 14px;

        gap: 12px;
    }

    .petra-lightbox__title {
        font-size: 14px;
    }

    .petra-lightbox__description {
        font-size: 12px;
    }

    .petra-lightbox__nav {
        width: 38px;
        height: 48px;

        background: rgba(255,255,255,.85);
    }

    .petra-lightbox__nav--prev {
        left: 4px;
    }

    .petra-lightbox__nav--next {
        right: 4px;
    }

    .petra-lightbox__close {
        top: 5px;
        right: 5px;

        width: 38px;
        height: 38px;

    }

}

/* =========================================
   HOVER
   ========================================= */

@media (hover: hover) {

    .petra-price-extra__item {
        transition: background-color .2s ease;
    }

    .petra-price-extra__item:hover {
        background: #f8fafc;
    }

}

/* =========================================
   CENA OBUHVATA / NE OBUHVATA / NAPOMENE
   ========================================= */

.petra-price-details {
    padding: 10px 20px 65px;
    background: #ffffff;
}

.petra-price-details__inner {
    max-width: 1000px;
    margin: 0 auto;
}


/* dve kolone */

.petra-price-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* kartice */

.petra-price-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e9ee;
    border-radius: 9px;

    box-shadow: 0 4px 14px rgba(12, 40, 73, 0.06);
}


/* naslov kartice */

.petra-price-card__title {
    margin: 0;

    padding: 16px 20px;

    text-align: center;

    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;

    color: #ffffff;
}


/* obuhvata */

.petra-price-card--include .petra-price-card__title {
    background: #0c2849;
}


/* ne obuhvata */

.petra-price-card--exclude .petra-price-card__title {
    background: #e7b928;
    color: #0c2849;
}


/* sadržaj */

.petra-price-card__content {
    padding: 22px 24px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #4f5963;
}


/* WYSIWYG liste */

.petra-price-card__content ul {
    margin: 0;
    padding-left: 0;

    list-style: none;
}

.petra-price-card__content li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 25px;
}

.petra-price-card__content li:last-child {
    margin-bottom: 0;
}


/* znakovi */

.petra-price-card--include .petra-price-card__content li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    font-weight: 700;
    color: #e7b928;
}

.petra-price-card--exclude .petra-price-card__content li::before {
    content: "×";

    position: absolute;
    left: 1px;
    top: -1px;

    font-size: 18px;
    font-weight: 700;

    color: #e7b928;
}


/* paragrafi iz WYSIWYG */

.petra-price-card__content p {
    margin: 0 0 12px;
}

.petra-price-card__content p:last-child {
    margin-bottom: 0;
}


/* linkovi */

.petra-price-card__content a {
    color: #0c2849;
    font-weight: 600;
    text-decoration: underline;
}


/* =========================================
   NAPOMENE
   ========================================= */

.petra-price-notes {
    margin-top: 26px;

    padding: 22px 26px;

    background: #fffaf0;

    border: 1px solid #f0dfad;
    border-left: 4px solid #e7b928;

    border-radius: 8px;
}

.petra-price-notes__title {
    margin: 0 0 12px;

    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;

    color: #0c2849;
}

.petra-price-notes__content {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #4f5963;
}

.petra-price-notes__content p {
    margin: 0 0 10px;
}

.petra-price-notes__content p:last-child {
    margin-bottom: 0;
}

.petra-price-notes__content ul {
    margin: 0;
    padding-left: 20px;
}

.petra-price-notes__content li {
    margin-bottom: 7px;
}

.petra-price-notes__content li:last-child {
    margin-bottom: 0;
}

/* =========================================
   HOTEL / HOTELI
   ========================================= */

.petra-hotels {
    padding: 20px 20px;
    background: #f7f9fb;
}

.petra-hotels__inner {
    max-width: 1000px;
    margin: 0 auto;
}


/* GRID
   1 hotel = puna širina
   2 hotela = dve kolone
*/

.petra-hotels__grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 400px), 1fr)
    );

    gap: 22px;

    margin-top: 28px;
}


/* KARTICA */

.petra-hotel-card {
    padding: 22px 24px;

    background: #ffffff;

    border: 1px solid #e5e9ee;
    border-top: 4px solid #e7b928;

    border-radius: 8px;

    box-shadow: 0 4px 14px rgba(12, 40, 73, 0.05);
}


/* GORNJI DEO */

.petra-hotel-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 14px;
    margin-bottom: 15px;

    border-bottom: 1px solid #e5e9ee;
}


/* NASLOV */

.petra-hotel-card__title {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;

    color: #0c2849;
}


/* LINK */

.petra-hotel-card__link {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: #0c2849;

    text-decoration: none;

    border-bottom: 2px solid #e7b928;

    padding-bottom: 2px;
}

.petra-hotel-card__link:hover {
    color: #c99b12;
}


/* OPIS */

.petra-hotel-card__description {
    font-family: "Montserrat", sans-serif;

    font-size: 14px;
    line-height: 1.6;

    color: #4f5963;
}
/* =========================================
   FAQ
   ========================================= */

.petra-faq {
    padding: 50px 20px 60px;
    background: #ffffff;
}

.petra-faq__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.petra-faq__list {
    margin-top: 28px;
}


/* JEDNO PITANJE */

.petra-faq__item {
    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #e5e9ee;
    border-radius: 8px;

    overflow: hidden;
}

.petra-faq__item:last-child {
    margin-bottom: 0;
}


/* SUMMARY */

.petra-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 17px 20px;

    cursor: pointer;

    font-family: "Montserrat", sans-serif;

    color: #0c2849;

    list-style: none;
}


/* uklanja podrazumevanu strelicu */

.petra-faq__question::-webkit-details-marker {
    display: none;
}

.petra-faq__question::marker {
    display: none;
}


/* PITANJE */

.petra-faq__question-text {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
}


/* PLUS */

.petra-faq__icon {
    position: relative;

    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #f7f9fb;
}


/* horizontalna linija */

.petra-faq__icon::before {
    content: "";

    position: absolute;

    width: 12px;
    height: 2px;

    top: 50%;
    left: 50%;

    background: #e7b928;

    transform: translate(-50%, -50%);
}


/* vertikalna linija */

.petra-faq__icon::after {
    content: "";

    position: absolute;

    width: 2px;
    height: 12px;

    top: 50%;
    left: 50%;

    background: #e7b928;

    transform: translate(-50%, -50%);

    transition: transform .2s ease;
}


/* OTVORENO PITANJE */

.petra-faq__item[open] .petra-faq__question {
    background: #f7f9fb;
}

.petra-faq__item[open] .petra-faq__icon {
    background: #0c2849;
}


/* plus postaje minus */

.petra-faq__item[open] .petra-faq__icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* ODGOVOR */

.petra-faq__answer {
    padding: 17px 20px 20px;

    border-top: 1px solid #e5e9ee;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.6;

    color: #4f5963;
}
/* =========================================
   FAKULTATIVNI PROGRAMI
   ========================================= */

.petra-optional {
    padding: 55px 20px 65px;
    background: #f7f9fb;
}

.petra-optional__inner {
    max-width: 1000px;
    margin: 0 auto;
}


/* SADRŽAJ */

.petra-optional__content {
    margin-top: 30px;
    padding: 25px 28px;

    background: #ffffff;

    border: 1px solid #e5e9ee;
    border-left: 4px solid #e7b928;
    border-radius: 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.75;

    color: #4f5963;
}


/* WYSIWYG PARAGRAFI */

.petra-optional__content p {
    margin: 0 0 14px;
}

.petra-optional__content p:last-child {
    margin-bottom: 0;
}


/* WYSIWYG LISTE */

.petra-optional__content ul,
.petra-optional__content ol {
    margin: 12px 0;
    padding-left: 22px;
}

.petra-optional__content li {
    margin-bottom: 8px;
}


/* NASLOVI UNUTAR WYSIWYG */

.petra-optional__content h3 {
    margin: 22px 0 10px;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;

    color: #0c2849;
}

.petra-optional__content h3:first-child {
    margin-top: 0;
}


/* =========================================
   NAPOMENA
   ========================================= */

.petra-optional__note {
    margin-top: 20px;

    padding: 18px 22px;

    background: #fffaf0;

    border: 1px solid #f0dfad;
    border-radius: 7px;
}

.petra-optional__note-title {
    margin: 0 0 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;

    color: #0c2849;
}

.petra-optional__note-content {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #4f5963;
}

.petra-optional__note-content p {
    margin: 0 0 8px;
}

.petra-optional__note-content p:last-child {
    margin-bottom: 0;
}


/* =========================================
   MOBILNI
   ========================================= */

@media (max-width: 700px) {

    .petra-optional {
        padding: 45px 14px 50px;
    }

    .petra-optional__content {
        margin-top: 24px;
        padding: 20px 18px;

        font-size: 14px;
        line-height: 1.7;
    }

    .petra-optional__note {
        margin-top: 16px;
        padding: 16px 18px;
    }

}

/* =========================================
   FAKULTATIVNI PROGRAMI
   ========================================= */

.petra-fakultative {
    padding: 50px 20px 60px;
    background: #ffffff;
}

.petra-fakultative__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.petra-fakultative__list {
    margin-top: 28px;
}


/* JEDAN PROGRAM */

.petra-fakultativa {
    display: grid;
    grid-template-columns: 1fr 1.15fr;

    margin-bottom: 18px;

    background: #ffffff;

    border: 1px solid #e5e9ee;
    border-radius: 9px;

    overflow: hidden;

    box-shadow: 0 4px 14px rgba(12, 40, 73, 0.05);
}


/* svaki drugi red obrnut */

.petra-fakultativa--reverse {
    grid-template-columns: 1.15fr 1fr;
}

.petra-fakultativa--reverse .petra-fakultativa__image-wrap {
    order: 2;
}

.petra-fakultativa--reverse .petra-fakultativa__content {
    order: 1;
}


/* SLIKA */

.petra-fakultativa__image-wrap {
    min-height: 230px;
}

.petra-fakultativa__image {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 230px;

    object-fit: cover;
}


/* SADRŽAJ */

.petra-fakultativa__content {
    padding: 26px 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* NASLOV */

.petra-fakultativa__title {
    margin: 0 0 14px;

    font-family: "Montserrat", sans-serif;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;

    color: #0c2849;
}

.petra-fakultativa__title::after {
    content: "";

    display: block;

    width: 38px;
    height: 2px;

    margin-top: 10px;

    background: #e7b928;
}


/* WYSIWYG OPIS */

.petra-fakultativa__description {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.6;

    color: #4f5963;
}

.petra-fakultativa__description p {
    margin: 0 0 9px;
}

.petra-fakultativa__description p:last-child {
    margin-bottom: 0;
}

.petra-fakultativa__description ul,
.petra-fakultativa__description ol {
    margin: 10px 0;
    padding-left: 20px;
}

.petra-fakultativa__description li {
    margin-bottom: 6px;
}


/* NAPOMENA */

.petra-fakultative__note {
    margin-top: 22px;

    padding: 18px 22px;

    background: #fffaf0;

    border: 1px solid #f0dfad;
    border-left: 4px solid #e7b928;

    border-radius: 8px;
}

.petra-fakultative__note-title {
    margin: 0 0 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;

    color: #0c2849;
}

.petra-fakultative__note-content {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.6;

    color: #4f5963;
}

.petra-fakultative__note-content p {
    margin: 0 0 8px;
}

.petra-fakultative__note-content p:last-child {
    margin-bottom: 0;
}

/* SAKRIVENE FAKULTATIVE */

.petra-fakultativa--hidden {
    display: none;
}


/* DUGME */

.petra-fakultative__toggle-wrap {
    margin-top: 22px;
    text-align: center;
}

.petra-fakultative__toggle {
    padding: 13px 24px;

    border: 0;
    border-radius: 6px;

    background: #e7b928;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: #0c2849;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.petra-fakultative__toggle:hover {
    background: #d4a718;
    transform: translateY(-1px);
}
/* =========================================
   MOBILNI
   ========================================= */

@media (max-width: 700px) {

    .petra-fakultative {
        padding: 42px 14px 48px;
    }

    .petra-fakultative__list {
        margin-top: 24px;
    }

    .petra-fakultativa,
    .petra-fakultativa--reverse {
        grid-template-columns: 1fr;

        margin-bottom: 16px;
    }

    .petra-fakultativa--reverse .petra-fakultativa__image-wrap,
    .petra-fakultativa--reverse .petra-fakultativa__content {
        order: initial;
    }

    .petra-fakultativa__image-wrap,
    .petra-fakultativa__image {
        min-height: 190px;
    }

    .petra-fakultativa__content {
        padding: 20px 18px;
    }

    .petra-fakultativa__title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .petra-fakultativa__description {
        font-size: 14px;
        line-height: 1.6;
    }

    .petra-fakultative__note {
        margin-top: 18px;
        padding: 16px 18px;
    }

}

/* HOVER */

@media (hover: hover) {

    .petra-faq__question:hover {
        background: #f9fafb;
    }

}


/* MOBILNI */

@media (max-width: 700px) {

    .petra-faq {
        padding: 42px 14px 48px;
    }

    .petra-faq__list {
        margin-top: 24px;
    }

    .petra-faq__question {
        padding: 15px 16px;
        gap: 14px;
    }

    .petra-faq__question-text {
        font-size: 15px;
    }

    .petra-faq__answer {
        padding: 15px 16px 17px;

        font-size: 14px;
        line-height: 1.6;
    }

}

/* =========================================
   MOBILNI
   ========================================= */

@media (max-width: 700px) {

    .petra-hotels {
        padding: 42px 14px 48px;
    }

    .petra-hotels__grid {
        grid-template-columns: 1fr;
        gap: 16px;

        margin-top: 24px;
    }

    .petra-hotel-card {
        padding: 18px;
    }

    .petra-hotel-card__header {
        align-items: flex-start;
        gap: 12px;

        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .petra-hotel-card__title {
        font-size: 18px;
    }

    .petra-hotel-card__link {
        font-size: 13px;
    }

    .petra-hotel-card__description {
        font-size: 14px;
        line-height: 1.6;
    }

}


/* veoma mali ekrani */

@media (max-width: 430px) {

    .petra-hotel-card__header {
        flex-direction: column;
    }

}
/* =========================================
   MOBILNI
   ========================================= */

@media (max-width: 700px) {

    .petra-price-details {
        padding: 5px 14px 50px;
    }

    .petra-price-details__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .petra-price-card__title {
        padding: 14px 16px;
        font-size: 17px;
    }

    .petra-price-card__content {
        padding: 18px 18px;

        font-size: 14px;
        line-height: 1.65;
    }

    .petra-price-notes {
        margin-top: 18px;
        padding: 18px 18px;
    }

    .petra-price-notes__title {
        font-size: 17px;
    }

}

/* ===============================
   TABLET
   =============================== */

@media (max-width: 900px) {

    .petra-hero {
        min-height: 540px;
    }

    .petra-hero__content {
        width: calc(100% - 40px);
    }

    .petra-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5,24,46,.90) 0%,
                rgba(5,24,46,.65) 65%,
                rgba(5,24,46,.25) 100%
            );
    }
    .petra-trip-info__item {
        transition:
            background-color .2s ease,
            transform .2s ease;
    }

    .petra-trip-info__item:hover {
        background: #fafbfd;
        transform: translateY(-2px);
    }
	
}


/* ===============================
   MOBILNI
   =============================== */

@media (max-width: 600px) {

    .petra-hero {
        min-height: 610px;
        align-items: flex-end;
    }

    .petra-hero__image {
        object-position: 65% center;
    }

    .petra-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(4,21,41,.96) 0%,
                rgba(4,21,41,.80) 48%,
                rgba(4,21,41,.22) 100%
            );
    }

    .petra-hero__content {

        width: calc(100% - 32px);

        padding-top: 120px;
        padding-bottom: 42px;
    }

    .petra-hero h1 {
        font-size: 50px;
        letter-spacing: -1px;
    }

    .petra-hero__subtitle {
        font-size: 30px;
    }

    .petra-hero__route {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .petra-hero__details {
        flex-direction: column;
        gap: 10px;

        margin-top: 20px;
    }

    .petra-hero__price-label {
        margin-top: 25px;
    }

    .petra-hero__price {
        font-size: 45px;
    }

    .petra-hero__button {
        width: 100%;
        box-sizing: border-box;
    }
    .petra-trip-info {
        grid-template-columns: repeat(3, 1fr);
        margin-top: -30px;
    }

    .petra-trip-info__item {
        min-height: 115px;
    }

    .petra-trip-info__item::after {
        display: none;
    }

    .petra-trip-info__item {
        border-right: 1px solid #e5e8ec;
        border-bottom: 1px solid #e5e8ec;
    }
    .petra-intro {
        padding: 42px 20px 34px;
    }

    .petra-intro__text {
        font-size: 15px;
        line-height: 1.65;
    }
    .petra-program {
        padding: 30px 14px 50px;
    }

    .petra-day__header {
        grid-template-columns: 1fr;
    }

    .petra-day__number {
        width: max-content;
        min-height: auto;

        margin: 16px 16px 0;

        padding: 9px 14px;

        border-radius: 5px;
    }

    .petra-day__title {
        padding: 12px 16px 10px;
        font-size: 17px;
    }

    .petra-day__content {
        padding: 0 16px 20px;

        font-size: 15px;
        line-height: 1.65;
    }
    .petra-prices {
        padding: 45px 14px 50px;
    }

    .petra-prices__line {
        margin-bottom: 25px;
    }


    /* glavna cena ostaje horizontalna */

    .petra-price-main {
        min-height: 82px;

        padding: 12px 14px;

        gap: 14px;
    }

    .petra-price-main__label {
        padding-right: 14px;

        font-size: 11px;
    }

    .petra-price-main__value {
        font-size: 34px;
    }

    .petra-price-main__note {
        padding-left: 14px;

        font-size: 11px;
    }


    /* ostale cene */

    .petra-price-extra {
        margin-top: 28px;
    }

    .petra-price-extra__title {
        font-size: 18px;
    }

    .petra-price-extra__item {
        gap: 12px;

        padding: 14px 15px;
    }

    .petra-price-extra__name {
        font-size: 14px;
    }

    .petra-price-extra__value {
        min-width: 80px;

        padding-left: 12px;

        font-size: 15px;
    }
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
 	font-family: 'Roboto', sans-serif;}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}
.site {
	padding-left: 0.2em;
	padding-right: 0.2em;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
.centar {
	text-align: center;
}
h1 {
	font-size: 1.5em;
	margin: 0.1em 0;
	font-family: 'Roboto', sans-serif;
  	font-weight: 600; /* Bold */
	text-align: center;
}
h2 {
	font-size: 1.4em;
	margin: 0.1em 0;
	font-weight: 500;
}

h3 {
	font-size: 1.3em;
	margin: 0.1em 0;
	font-weight: 500;
}
p {
	margin-bottom: 0;
	margin-top: 0;

}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 0.2em;
	margin-top: 0.2em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}
.sadrzaj	{
	max-width: 1450px;
	margin:auto;
}



.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ==========================================================
   PETRA TRAVEL - SHARED COMPONENTS
   ========================================================== */

/* =========================================
   ZAJEDNIČKI H2 NASLOVI SEKCIJA
   ========================================= */

.petra-section-title {
    margin: 0 0 20px;
    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;

    color: #0c2849;
}

/* zlatna linija ispod naslova */

.petra-section-title::after {
    content: "";

    display: block;

    width: 48px;
    height: 3px;

    margin-top: 10px;

    background: #e7b928;
    border-radius: 2px;
}


/* MOBILNI */

@media (max-width: 700px) {

    .petra-section-title {
        margin-bottom: 16px;
        font-size: 24px;
    }

    .petra-section-title::after {
        width: 40px;
        margin-top: 8px;
    }

}

/* =========================================
   HEADER
   ========================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9990;

    background: #ffffff;

    border-bottom: 1px solid #e8ebef;
}

.admin-bar .site-header {
    top: 32px;
}

.petra-header-inner {
    max-width: 1200px;
    margin: 0 auto;

    min-height: 86px;

    padding: 0 20px;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* LOGO */

.site-branding {
    flex: 0 0 auto;
}

.site-branding .custom-logo-link {
    display: block;
}

.site-branding .custom-logo {
    display: block;

    width: auto;
    height: 58px;
}


/* =========================================
   MAIN NAV
   ========================================= */

.main-navigation {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.main-navigation ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.main-navigation .primary-menu {
    display: flex;
    align-items: center;

    gap: 30px;
}

.main-navigation .primary-menu > li {
    position: relative;
}

.main-navigation a {
    display: block;

    padding: 32px 0;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    color: #0c2849;

    text-decoration: none;

    transition: color .2s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: #e7a900;
}


/* =========================================
   CTA
   ========================================= */

.petra-header-actions {
    flex: 0 0 auto;
}

.petra-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 20px;

    border-radius: 6px;
	background: #e7b928;
    color: #0c2849;

    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;


    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.petra-header-cta:hover {
	background: #d6a91d;
    color: #0c2849;

    transform: translateY(-1px);
}


/* =========================================
   MOBILE MENU BUTTON
   ========================================= */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.menu-toggle-line {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px auto;

    background: #0c2849;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 900px) {

    .petra-header-inner {
        min-height: 72px;

        justify-content: space-between;

        gap: 14px;
    }

    .site-branding .custom-logo {
        height: 48px;
    }

    .main-navigation {
        flex: 0 0 auto;
        order: -1;
    }

    .menu-toggle {
        display: block;
    }

    .main-navigation .primary-menu {
        display: none;
    }

    .main-navigation.toggled .primary-menu {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: block;

        padding: 10px 20px 20px;

        background: #ffffff;

        border-top: 1px solid #e8ebef;

        box-shadow: 0 10px 24px rgba(12, 40, 73, 0.08);
    }

    .main-navigation.toggled .primary-menu a {
        padding: 13px 0;
    }

    .petra-header-cta {
        padding: 0 14px;

        font-size: 12px;
    }

}


/* WordPress admin bar na mobilnom */

@media (max-width: 782px) {

    .admin-bar .site-header {
        top: 46px;
    }

}
/* =========================================
   GLAVNI MENI - DROPDOWN
   ========================================= */

.main-navigation .primary-menu > li {
    position: relative;
}

.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 220px;

    padding: 8px 0;
    margin: 0;

    background: #ffffff;

    border: 1px solid #e8ebef;
    border-radius: 0 0 8px 8px;

    box-shadow: 0 10px 24px rgba(12, 40, 73, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 9999;
}

.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    padding: 11px 16px;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    color: #0c2849;
}

.main-navigation .sub-menu a:hover {
    background: #f7f9fb;
    color: #e7a900;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}
.main-navigation .menu-item-has-children > a::after {
    content: "";
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-left: 7px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg) translateY(-2px);
}
@media (max-width: 900px) {

    .main-navigation.toggled .primary-menu {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .main-navigation .sub-menu {
        position: static;

        min-width: 0;

        padding: 0 0 0 14px;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: block;

        background: transparent;
    }

    .main-navigation .sub-menu a {
        padding: 10px 0;
        font-size: 13px;
    }

}