/*
Theme Name: Studiohausvienna
Theme URI: http://Studiohausvienna.com
Description: 
Author: dovli
Author URI: http://Studiohausvienna.com
Version: 1.0
*/
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-ThinItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}






@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/CourierPrime-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;

}

@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/CourierPrime-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
	font-display: swap;

}

@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/CourierPrime-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
	font-display: swap;

}

@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/CourierPrime-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
	font-display: swap;

}
h1 {
  font-size: 36px;
  line-height: 1.4;
  margin: 0;
}
h2 {
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
}
h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}

p {
  font-size: 18px;
  line-height: 1.5;
}


body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
    font-family: 'Courier Prime', monospace;
}
li,
p {
    font-family: 'Montserrat', sans-serif;
}
form,
button{
    font-family: 'Courier Prime', monospace;
}
.full-height h1 {
    padding-right: 24px;
    padding-left: 24px;
}
.full-height {
    position: relative;
    max-width: 1920px; /* Ograničava širinu na Full HD */
    width: 100%; /* Zauzima celokupnu širinu */
    margin: 0 auto; /* Centriraj sadržaj horizontalno */
    display: flex;
    justify-content: end;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 768px) {
    .full-height {
        padding-left: 0px;
        padding-top: 50px;
        background-position: top;
        margin-bottom: 20px;
    }
}

@media (min-width: 1921px) {
    .full-height {
        max-width: 2560px; /* Za ultra-široke ekrane */
    }
}

.full-height .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7) hue-rotate(0deg) opacity(0.7); /* Ovdeću */	
	z-index: -1; /
}
.full-height h1 {
    color: white;
	min-width: 900px;
    text-align: left; /* Tekst uvek poravnat levo unutar elementa */
}
@media (max-width: 768px) {
	.full-height h1 {
		color: white;
		min-width: 320px;
		text-align: left; /* Tekst uvek poravnat levo unutar elementa */
	}
}
.changing-word {
    color: #f9ff61;
}
.custom-logo {
    width: 128px;
    height: 128px;
    background-color: white;
    margin-left: 24px;
}
body {
    margin: 0;
}
header.site-header {
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 0;
  width: 100%;

}

.wp-block-group,
.wp-block-post-content {
    margin-block-start: 0 !important; /* Ukloni marginu sa vrha roditeljskog elementa */
}

.wp-block-site-logo img {
    height: 80px;
    max-width: 80px;
}
@media (max-width: 768px) {
    .custom-logo {
        width: 80px;
        height: 80px;
        background-color: transparent;
        margin-left: 12px;
    }
    .header-inner {
        height: 70%;
    }
}

/*//////////////////// modla//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.modal {
    display: none;
    position: fixed; /* Promenili smo na 'fixed' */
    z-index: 11111;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto; /* Dodali smo 'overflow: auto' kako bi omogućili skrolovanje unutar modala ako je sadržaj veliki */
    padding-top: 0px;
}
.modal-content {
    background-color: #fff;
    padding: 0px;
	padding-top: 20px;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: auto;
    position: relative; /* Dodano kako bi elemente unutar modala lakše pozicionirali apsolutno */
    margin-bottom: -15px;
}

/* modal-post-content */
#modal-post-content {
    height: 100vh; /* Visina ekrana */
    overflow: hidden; /* Skriva višak sadržaja */
    position: relative; /* Potrebno za apsolutno pozicioniranje unutar */
    padding-right: 30px;
    padding-left: 30px;
}
#modal-post-content h2 {
    margin: 0;
    text-align: left;
    padding: 24px 0 10px 0;
} 
#modal-post-content p {
    text-align: left;
    padding: 4px 0 24px 0;
    margin: 0;
}
#modal-post-content .wp-block-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    flex-direction: row;
    height: calc(100vh - 300px);
    max-height:500px;
      margin: 0;

}
#modal-post-content .wp-block-gallery figure {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Skriva višak slike */
  flex: 1; /* Elementi zauzimaju ravnomerno prostor */
  max-width: calc(33.333% - 10px); /* Procenat širine ekrana minus deo za gap */
  height: 100%; /* Visina elemenata */
  margin: 0;
}

#modal-post-content .wp-block-gallery img {
    width: 100%; /* Širina slike je širina elementa */
    height: 100%; /* Visina slike je visina elementa */
    object-fit: cover; /* Slika zadržava omjer i prekriva višak */
    object-position: center; /* Centrirana slika */
}


@media only screen and (max-width: 768px) {
    #modal-post-content {
        overflow: overlay;
    }
    .modal-content {
        height: auto;
    }
    #modal-post-content .wp-block-gallery {
        flex-direction: column;
        height: auto;
        max-height:none;
        width: 100%;
        padding-bottom: 30px;
    }
    #modal-post-content .wp-block-gallery figure {
        max-width: calc(100% - 0px);

    }
    #modal-post-content .wp-block-gallery img {
        max-height: 100%;
    }
}

/* Osnovni stil za header /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* header.site-header {
/*    height: 80px; /* Visina header-a odgovara visini logoa */
/*}

.header-inner {
    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%; /
}

.custom-logo-link {
    display: flex; 
    align-items: center;
}

.menu-menu-1-container {
    display: flex; 
    align-items: center; 
}

/* Stavi meni u horizontalni red */
/*.primary-menu {
    display: flex; 
    gap: 20px; 
}

.primary-menu li {
    list-style: none; }/* Uklanja tačke sa liste */

/*.primary-menu a {
    font-size: 18px;
    color: inherit; }/* Zadržava trenutnu boju teksta */


.primary-menu .active  {
	text-decoration: underline;
	text-underline-offset: 8px;
}



html {
  scroll-behavior: smooth;
}

/* Osnovni stil za header */
header.site-header {
    height: 128px; /* Visina header-a odgovara visini logoa */
}

.header-inner {
    display: flex; /* Postavlja logo i meni u isti red */
    flex-direction: row; /* Eksplicitno postavlja elemente u horizontalni red */
    align-items: center; /* Vertikalno centriranje elemenata */
    justify-content: flex-start;
    height: 100%; /* Preuzima visinu roditelja */
    align-items: flex-end;
    gap: 0px
}

.custom-logo-link {
    display: flex; /* Osigurava pravilno pozicioniranje logotipa */
    align-items: center; /* Vertikalno centriranje logotipa unutar linka */
}

.menu-menu-1-container {
    display: flex; /* Poređuje stavke menija horizontalno */
    align-items: center; /* Vertikalno centriranje stavki menija */
}



/* Stavi meni u horizontalni red */
.primary-menu {
    display: flex; /* Stavke menija u horizontalnom redu */
    gap: 20px; /* Razmak između linkova (po želji) */
    padding-left: 24px;
    padding-bottom: 24px;
}

.primary-menu li {
    list-style: none; /* Uklanja tačke sa liste */
}

.primary-menu a {
    font-family: 'Courier Prime', monospace;
    text-decoration: none; /* Uklanja podvlačenje linkova */
    color: inherit; /* Zadržava trenutnu boju teksta */
}

/* Hamburger ikona */
/* Hamburger ikona */

#hamburger {
    display: none; /* Početno je skrivena */
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 9999; /* Prikazuje dugme iznad ostalih elemenata */
    position: relative; /* Lokacija za eventualne rotacije */
}
#hamburger div {
    width: 30px;
    height: 2.4px;
    background-color: black;
    transition: all 0.2s ease; /* Dodaje glatke tranzicije */
}
.close {
    right: 30px;
    top: 52px;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 9999; /* Prikazuje dugme iznad ostalih elemenata */
    position: absolute;

}
.close div {
    width: 32px;
    height: 2px;
    background-color: black;
    transition: all 0.2s ease; /* Dodaje glatke tranzicije */
}

/* Stil za X */
#hamburger.open div:nth-child(1) {
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
}

#hamburger.open div:nth-child(2) {
    transform: rotate(-45deg);
    position: absolute;
    top: 10px;
}
.close div:nth-child(1) {
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
}
.close div:nth-child(2) {
    transform: rotate(-45deg);
    position: absolute;
    top: 10px;
}

@media (max-width: 768px) { 
      header.site-header {
        height: 100px; 
    }
  .primary-menu {
    padding-right: 0px;
  }

  .header-inner {
    justify-content: space-between; /* Između logotipa i hamburger ikone */
  }

  #hamburger {
    display: flex; /* Prikazuje hamburger ikonu */
    z-index: 9999; /* Prikazuje dugme iznad ostalih elemenata */
    right: 30px;
    bottom: 24px;
  }

  .menu-menu-1-container {
    opacity: 0; /* Početno je nevidljivo */
    display: flex; /* Održava meni u flex mod */
    position: absolute; /* Natkriva položaj menija */
    top: 0px; /* Podešavanje gornje margine prema visini headera */
    left: 0;
    width: 100vw; /* Zauzima potpunu širinu vidljivog dela ekrana */
    height: 100vh; /* Preuzima punu visinu ekrana */
    background-color: white; /* Pozadinska boja menija */
    z-index: 9999; /* Prikazuje meni iznad ostalih elemenata */
    flex-direction: column; /* Stavke menija poredane u kolonu */
    align-items: flex-end; /* Poravnanje stavki menija desno */
    justify-content: flex-start;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out; /* Dodaje glatku tranziciju za opacity i visibility */
    visibility: hidden; /* Osigurava meni kao nevidljiv */
  }

  .menu-menu-1-container.open {
    opacity: 1; /* Postaje vidljivo */
    visibility: visible; /* Osigurava da je meni vidljiv */
  }

  .primary-menu {
    flex-direction: column; /* Stavke menija poređane u kolonu */
    align-items: flex-end;
    margin-top: 136px; /* Povlačenje stavki menija nadole */
    margin-right: 30px;
  }

  .primary-menu a {
    font-size: 24px; /* Povećanje veličine fonta za bolju vidljivost */
    width: auto; /* Ostavljanje prostora između granica */
    text-align: right; /* Tekst na desnoj strani */
  }

  .custom-logo-link {
    z-index: 10000; /* Osigurava pravilno pozicioniranje logotipa */
  }

  /* Klasa koja onemogućava skrolovanje */
  .no-scroll {
    overflow: hidden;
  }
  .wp-block-image {
      width: 100%;
  }
}


@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
        width: calc(25% - 12px) !important;
    }
}


/*     PORTFOLIO */
/* Generalna podešavanja za portfolio */
/* Generalna podešavanja za portfolio */
.portfolio-main {
  display: flex;
  flex-direction: column;
  padding-left:24px;
  padding-right:24px;
  background-color: transparent;
  padding: 24px;
  gap: 20px;

}


.portfolio-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.portfolio-text p {
  margin: 0;
}



/* Stilizacija galerije sa CSS Grid-om */
.portfolio-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 13.33px), 1fr));
  gap: 20px;
  padding: 10px 0;
}


.portfolio-post {
  position: relative;
  padding-bottom: 100%; /* Održava kvadratni oblik */
  box-sizing: border-box; /* Uključuje margine i padding u širinu */
}

.portfolio-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Održava proporcije slike i popunjava kontejner */
  transition: filter 0.3s; /* Dodajemo glatku tranziciju */
  filter: brightness(0.7) hue-rotate(0deg) opacity(0.7); /* Ovdeću */	
}

.post-title {
  font-family: 'Courier Prime';
  position: absolute;
  font-weight: 700;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5em;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); /* Dodaje blagu senku za bolju vidljivost */
  transition: opacity 0.3s;
  opacity: 1;
  text-align: center;
}

.portfolio-post:hover .portfolio-image img {
  filter: none; /* Uklanja filter pri prelasku mišem */
}

.portfolio-post:hover .post-title {
  opacity: 0; /* Uklanja naslov pri prelasku mišem */
}


@media (max-width: 768px) { /* Prilagodite širinu uređaja po potrebi */
    .portfolio-content {
      flex-direction: column;
    }
    .portfolio-row {
    grid-template-columns: 1fr;
    }
    
}
/*       services content          */

.services-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background-color: transparent;
}
.services-row {
    display: flex;
    gap: 20px
}
.services-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
}


.services-text {
    width: 100%;
    position: relative;
    overflow: hidden;

}
.services-text p {
  margin: 0;
}
.services-single {
    background-color: #d2dbc5;
    padding: 20px;
    padding-bottom: 32px;
}
.services-single p {
    font-size: 16px;
}



@media (max-width: 768px) { /* Prilagodite širinu uređaja po potrebi */
    .services-content {
      flex-direction: column;
    }
    .services-row {
      flex-direction: column;
    }
    
}
/*       about content          */

.about-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background-color: transparent;
}

.about-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.about-text p {
  margin: 0;
}


.about-image {
    width: 66%;
    position: relative;
}
.about-image img {
    width: 100%;  /* Slika zauzima punu širinu parenta */
    height: auto; /* Visina se prilagođava proporcionalno */
    display: block; /* Sprečava dodatni prostor ispod slike */
}




@media (max-width: 768px) { /* Prilagodite širinu uređaja po potrebi */
    .about-content {
      flex-direction: column;
    }
    .about-image {
    width: 100%;
}
    
}

/*      contact      */
.contact-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background-color: transparent;
}

.contact-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.contact-text p {
  margin: 0;
}




.contact-row {
    display: flex;
    gap: 20px
}

.contact-image {
    flex: 1; 
    max-width: 33.33%;
    overflow: hidden;
}

.contact-image img {
    width: 100%; 
    height: auto;
    object-fit: cover; 
}

.contact-form {
    flex: 2;
}
@media (max-width: 768px) { 
    .contact-row,
    .contact-content {
      flex-direction: column;
    }
    .contact-image {
      max-width: 100%;
    }
}

/*          contact-form        */
.contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 66.66%;
}

.contact-form label {
    margin-top: 10px;
}

.contact-form input,
.contact-form textarea {
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form button {
    padding: 10px 15px;
    background-color: #60726a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

@media (max-width: 1024px) { 
    .contact-form {
    
        max-width: 100%;
    }
}
.portfolio-quote,
.services-quote,
.about-quote,
.contact-quote {
    flex: 1;
    color: #60726a;
}
.portfolio-text,
.services-text,
.about-text,
.contact-text {
    flex: 2;
}

.divider {
    height: 0px;
}
/*          footer           */

.footer-inner {
    padding: 24px;

}
.portfolio-main,
.services-main,
.about-main,
.contact-main {
    padding-top: 100px;
    padding-bottom: 20px;
}
@media (max-width: 768px) { 
    .portfolio-main,
    .services-main,
    .about-main,
    .contact-main {
        padding-top: 100px;
        padding-bottom: 20px;
    }
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
.hdd {
	display: inline;
}
.hdd span {
	color: #e0eecd;
	font-weight: bold;
    opacity: 0;
    animation: fadeIn 1s forwards;
	size-adjust: 100%;


}
.word {
  display: none;
}
.word.active {
  display: inline;
}


/*
.header-inner.active {
    background-color: white;
}
*/
@media (min-width: 769px) { /* Prilagodite širinu uređaja po potrebi */
    .services-main,
    .about-main,
    .contact-main,
    .footer-inner,
	.portfolio-main {
		max-width: 1320px;
        float: right;
	}
	.primary-menu a {
        color: initial; /* Postavi početnu boju */
        transition: color 0.3s;
    }
    .primary-menu a.highlight {
        color: white; /* Boja linkova dok su aktivni */
    }

    
}
.arrow-btn {
    position: absolute;
    top: 50%;
    font-size: 2em;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10000;
}

#prev-arrow {
    left: 10px;
}

#next-arrow {
    right: 10px;
}

.quote h2 {
    margin: 0;
}

h3 {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
    unicode-bidi: isolate;
}
.footer-inner {
	display: flex;
	min-height: 200px;
	align-items: flex-end;
    flex-direction: row-reverse;
}

/* desktop meni */
   header.site-header {
        height: 120px; 
    }
  .primary-menu {
    padding-right: 0px;
  }

  .header-inner {
    justify-content: space-between; /* Između logotipa i hamburger ikone */
  }

  #hamburger {
    display: flex; /* Prikazuje hamburger ikonu */
    z-index: 9999; /* Prikazuje dugme iznad ostalih elemenata */
    right: 30px;
    bottom: 24px;
  }

  .menu-menu-1-container {
    opacity: 0; /* Početno je nevidljivo */
    display: flex; /* Održava meni u flex mod */
    position: absolute; /* Natkriva položaj menija */
    top: 0px; /* Podešavanje gornje margine prema visini headera */
    left: 0;
    width: 100vw; /* Zauzima potpunu širinu vidljivog dela ekrana */
    height: 100vh; /* Preuzima punu visinu ekrana */
    background-color: white; /* Pozadinska boja menija */
    z-index: 9999; /* Prikazuje meni iznad ostalih elemenata */
    flex-direction: column; /* Stavke menija poredane u kolonu */
    align-items: flex-end; /* Poravnanje stavki menija desno */
    justify-content: flex-start;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out; /* Dodaje glatku tranziciju za opacity i visibility */
    visibility: hidden; /* Osigurava meni kao nevidljiv */
  }

  .menu-menu-1-container.open {
    opacity: 1; /* Postaje vidljivo */
    visibility: visible; /* Osigurava da je meni vidljiv */
  }

  .primary-menu {
    flex-direction: column; /* Stavke menija poređane u kolonu */
    align-items: flex-end;
    margin-top: 136px; /* Povlačenje stavki menija nadole */
    margin-right: 30px;
  }

  .primary-menu a {
    font-size: 24px; /* Povećanje veličine fonta za bolju vidljivost */
    width: auto; /* Ostavljanje prostora između granica */
    text-align: right; /* Tekst na desnoj strani */
  }

  .custom-logo-link {
    z-index: 10000; /* Osigurava pravilno pozicioniranje logotipa */
  }