body{

    background-color: #1f2b2b !important;

}



.naslov-blog{

    font-size: 24px;

    font-weight: 700;

    color:white;

    margin-top:24px;

}



.h1-blog-naslov{

    font-size:38px;

    font-weight: 700;

    color:white;

}



.h1-pp-naslov{

    font-size:41px;

    font-weight: 700;

    color:white;

    margin-top:24px;

}



.h2-pp-naslov{

    font-size:32px;

    font-weight: 700;

    color:white;

    margin-top:24px;

}



.label-blog{

    font-size:19px;

    font-weight: 400;

    margin-top: 24px;

    color: rgba(255, 255, 255, 0.6);

}



.label-pp-blog{

    font-size:19px;

    font-weight: 400;

    margin-top: 24px;

    color: rgba(255, 255, 255, 0.6);

}



.custom-label{

    font-size:16px;

    font-weight: 400;

    color: white;

}



.blog-image{

    height: 248px;

    max-width: 350px;

}



.blog-container{

    padding: 24px 300px 96px;

}



.blog-details-container{

    margin: 32px 64px;

}



.blog-details-image-section{

    position: relative;

}



.outlined-photo-recatingle{

    height: 22.2rem;

    width: 33.3rem;

    background-color: transparent;

    border: 1px solid rgba(255, 255, 255, 0.6);;

    position: absolute;

    top: 8px;

    left: 6px;

}



.blog-button{

    margin:12px;

}



.single-blog-section{

    width: 355px;

}



.blog-section{

    display: grid;

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

    gap: 24px; /* Adjust spacing between grid items */

}



.single-blog-section-link {

    text-decoration: none;

    color: inherit;

    display: block;

}

.single-blog-section {

    cursor: pointer;

    border: 1px solid #858585; /* Optional styling */

    padding: 10px;

    margin: 10px;

}



.single-blog-section:hover {

    transform: scale(1.01);

    transition: 0.5s;

}



.blog-details-image{

    height: fit-content;

    position: relative;

    z-index: 1;

}



.mj-logo{

    height: 45px;

}



.blog-div{

    gap:4rem;

    position:relative;

}



.form-size{

    max-width: 500px;

    min-width: 250px;

}



.frame-parent13 {

  justify-content: flex-start;

  gap: 49px;

  font-size: var(--font-size-xl);

  font-family: var(--font-arial);

}



.frame-parent13 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  max-width: 100%;

}



.email-parent-parent,

.frame-wrapper10,

.how-to-contact-me-parent {

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

}



.email-parent-parent {

  gap: var(--gap-xs);

}



.how-to-contact-me-parent {

  flex-direction: column;

  gap: 15px;

}



.frame-wrapper10 {

  flex-direction: row;

  padding: 0 var(--padding-10xs) 0 var(--padding-12xs);

  font-size: var(--font-size-base);

  color: var(--color-gray-100);

}



.contact-button-div{

  position: relative;

  width: 18rem;

  height: 5rem;

}



.clicked-button-position{

  margin-top:8px;

  margin-left: 7px;

}



.margin-top-16{

  margin-top:16px;

}



@media only screen and (min-width: 992px) and (max-width: 1400px)

{

    .frame-parent13{

    align-items: center;

    margin-top:30px;

  } 



    .blog-section{

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

    }



    .blog-container{

        padding: 24px 138px 96px;

    }

}



@media only screen and (min-width: 567px) and (max-width: 992px)

{

    .blog-container{

        padding: 96px 56px 96px;

    }





    .blog-section{

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

    }



    .blog-details-image{

        width: auto !important;

    }



    .blog-div{

        flex-direction: column;

        justify-content: center;

    }



    .blog-details-text{

        width: auto !important;

    }



    .frame-parent13{

    align-items: center;

    margin-top:30px;

  } 

}



@media only screen and (max-width: 567px)

{



    .contact-content{

    flex-direction: column;

  }



.email-parent-parent{

    flex-direction: column;

  }



    .frame-parent13{

        align-items: center;

        margin-top:30px;

    } 



    .blog-container{

        padding: 24px 36px 96px;

    }



    .logo-div-blog-details{

        margin-left:24px;

    }



    .logo-div{

        margin-left:28px;

    }



    .mj-logo {

        width: 140px;

    }



    .blog-section{

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

    }



    .single-blog-section{

        width: 295px;

    }



    .blog-image {

        height: 205px;

        max-width: 292px;

    }



    .blog-details-image{

        width: auto !important;

    }



    .blog-div{

        flex-direction: column;

        justify-content: center;

    }



    .blog-details-text{

        width: auto !important;

    }



    .blog-div{

        gap:1rem;

    }



    .h1-blog-naslov{

        font-size:32px;

        margin-top: 24px;

    }

    

}



/* === Footer section classes from index.css === */

.desktop-129, .eingabefelder {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.desktop-129 {

  align-self: stretch;

  background-color: #f1f3f2;

  overflow: hidden;

  padding: 96px 0 0.4px;

  box-sizing: border-box;

  gap: 75.3px;

  max-width: 100%;

  text-align: left;

  font-size: var(--font-size-base);

  color: var(--color-white);

  font-family: var(--font-playfair-display);

}

.contact-content-wrapper {

  align-self: stretch;

  flex-direction: row;

  justify-content: center;

  padding: 0 var(--padding-xl) 0 var(--padding-4xl);

  display: flex;

}

.contact-content {

  width: 1161px;

  border-radius: var(--br-5xs);

  background-color: var(--color-darkslategray);

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  padding: var(--padding-25xl) 73px 59px;

  position: relative;

  gap: 20.5px;

  box-sizing: border-box;

  max-width: 100%;

}

.email-parent {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  justify-content: flex-start;

}

.email-icon-parent {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  gap: var(--gap-6xs);

}

.marijajukicgmailcom {

  position: relative;

  white-space: nowrap;

}

.instagram-label {

  margin-top: 1px;

}

.phone-parent {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  gap: var(--gap-9xs);

}

.space {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: var(--padding-10xs) 0 0;

}

.empty-space {

  position: relative;

  white-space: nowrap;

}

.mj-footer {

  background-color: #1f2b2b;

  font-family: var(--font-arial);

  color: #6c757d;

  padding: 32px;

  display: flex;

  justify-content: around;

  align-items: center;

}

.politika-privatnosti {

  cursor: pointer;

  text-decoration: none;

  color: #6c757d;

  font-size: 16px;

  opacity: 0.8;

}



.politika-privatnosti:hover,

.kontaktiraj-me:hover{

  color:white;

  opacity: 0.9;

}



/* === Button, text, and icon classes from index.css for footer === */

.mj-button {

  width: 15.5rem;

  height: 4.5rem;

  position: relative;

  background-color: #cf8331;

  border: 1px solid white;

  box-sizing: border-box;

  overflow: hidden;

  font-size: 20px;

  font-weight: 500;

  z-index: 1;

  font-family: Arial;

  text-align: center;

  color: white;

}

.outlined-rectangle{

  height: 4.5rem;

  width: 15.5rem;

  background-color: transparent;

  border: 1px solid white;

  position: absolute;

  top: 8px;

  left: 6px;

}

.subtract-icon {

  width: 18px;

  height: 14px;

}

.instagram-icon {

  height: 20px;

  margin-right: 6px;

}

@media only screen and (max-width: 567px) {

  .mj-footer {

    flex-direction: column;

    padding: 24px;

  }

  .contact-button-div,

   .mj-button,

  .outlined-rectangle{

    width:13rem;

  }

}



/* === Footer utility, flex, grid, gap, and responsive classes from index.css for pixel-perfect match === */



/* Utility and flex/grid classes for footer and children */



:root {

    --font-arial: Arial;

    --font-helvetica: Helvetica;

    --font-michroma: Michroma;

    --font-merriweather: Merriweather;

    --font-playfair-display: "Playfair Display";

    --font-size-base: 16px;

    --font-size-xl: 20px;

    --font-size-5xl: 24px;

    --font-size-lgi: 19px;

    --font-size-29xl: 48px;

    --font-size-10xl: 29px;

    --font-size-19xl: 38px;

    --font-size-45xl: 64px;

    --font-size-32xl: 51px;

    --color-darkslategray: #1f2b2b;

    --color-gray-100: rgba(0, 0, 0, 0.7);

    --color-gray-200: rgba(0, 0, 0, 0.8);

    --color-gray-300: rgba(255, 255, 255, 0.7);

    --color-gray-400: rgba(0, 0, 0, 0.6);

    --color-gray-500: rgba(255, 255, 255, 0.6);

    --color-black: #000;

    --color-white: #fff;

    --color-beige-100: rgba(203, 237, 203, 0.2);

    --gap-lgi: 19px;

    --gap-xl: 20px;

    --gap-7xl: 26px;

    --gap-8xs: 5px;

    --gap-6xs: 7px;

    --gap-2xl: 21px;

    --gap-24xl: 43px;

    --gap-xs: 12px;

    --gap-base: 16px;

    --gap-5xs: 8px;

    --gap-9xs: 4px;

    --gap-10xs: 3px;

    --gap-5xl: 24px;

    --gap-33xl: 52px;

    --gap-mid: 17px;

    --gap-15xl: 34px;

    --padding-121xl: 140px;

    --padding-xl: 20px;

    --padding-15xl: 34px;

    --padding-51xl: 70px;

    --padding-12xs: 1px;

    --padding-4xl: 23px;

    --padding-10xs: 3px;

    --padding-6xs: 7px;

    --padding-25xl: 44px;

    --padding-17xl: 36px;

    --padding-mini: 15px;

    --padding-81xl: 100px;

    --padding-xs: 12px;

    --padding-46xl: 65px;

    --padding-84xl: 103px;

    --padding-119xl: 138px;

    --padding-48xl: 67px;

    --padding-50xl: 69px;

    --padding-32xl: 51px;

    --padding-mid: 17px;

    --padding-2xl: 21px;

    --padding-2xs: 11px;

    --padding-smi: 13px;

    --padding-9xs: 4px;

    --padding-5xl: 24px;

    --padding-lgi: 19px;

    --padding-11xs: 2px;

    --padding-19xl: 38px;

    --padding-47xl: 66px;

    --padding-5xs: 8px;

    --padding-sm: 14px;

    --padding-3xl: 22px;

    --br-5xs: 8px;

    --br-281xl: 300px;

}



.zelis-da-popricas {

  position: relative;

  font-size: 32px;

  display: inline-block;

  max-width: 100%;

}



.kontaktiraj-me-bez {

  position: relative;

  font-family: var(--font-merriweather);

  color: var(--color-gray-300);

}



.footer-columns {

  width: 1161px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: flex-start;

  max-width: 100%;

}

.footer-content {

  align-self: stretch;

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  justify-content: center;

  padding: 0 var(--padding-4xl) 0 var(--padding-xl);

  box-sizing: border-box;

  max-width: 100%;

  font-size: var(--font-size-5xl);

  color: var(--color-black);

  font-family: var(--font-michroma);

}

.copyright {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  justify-content: flex-start;

  gap: var(--gap-8xs);

}

.copyright-parent,

.legal {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  justify-content: flex-start;

  gap: var(--gap-7xl);

}

.copyright-parent {

  align-self: stretch;

  background-color: var(--color-darkslategray);

  overflow: hidden;

  justify-content: space-between;

  padding: var(--padding-15xl) 141px var(--padding-15xl) var(--padding-121xl);

  gap: var(--gap-xl);

  color: var(--color-gray-500);

  font-family: var(--font-arial);

}



/* Responsive adjustments for footer */

@media screen and (max-width: 1200px) {

  .copyright-parent {

    flex-wrap: wrap;

    justify-content: center;

  }

}

@media screen and (max-width: 1050px) {

.zelis-da-popricas {

    font-size: 26px;

  }



  .copyright-parent {

    flex-wrap: wrap;

    justify-content: center;

  }

  .desktop-129 {

    padding-top: var(--padding-121xl);

    box-sizing: border-box;

  }

}

@media screen and (max-width: 750px) {

  .copyright-parent {

    padding-left: var(--padding-xl);

    padding-right: var(--padding-xl);

    box-sizing: border-box;

  }



  .contact-content,

  .copyright-parent {

    padding-left: var(--padding-17xl);

    padding-right: var(--padding-17xl);

    box-sizing: border-box;

  }



  .desktop-129 {

    gap: 38px;

  }

}

@media (max-width: 450px) {

    .frame-parent13 {

    gap: var(--gap-5xl);

  }

  .desktop-129 {

    gap: var(--gap-lgi);

    padding-top: 91px;

    box-sizing: border-box;

  }



  .zelis-da-popricas {

    font-size: var(--font-size-lgi);

  }

}



/* Ensure gap variables are available */

:root {

  --gap-lgi: 19px;

  --gap-xl: 20px;

  --gap-7xl: 26px;

  --gap-8xs: 5px;

  --gap-6xs: 7px;

  --gap-2xl: 21px;

  --gap-24xl: 43px;

  --gap-xs: 12px;

  --gap-base: 16px;

  --gap-5xl: 24px;

  --gap-9xs: 4px;

  --gap-5xs: 8px;

  --gap-15xl: 34px;

  --gap-mid: 17px;

  --gap-33xl: 52px;

}



/* Ensure padding variables are available */

:root {

  --padding-121xl: 140px;

  --padding-xl: 20px;

  --padding-15xl: 34px;

  --padding-51xl: 70px;

  --padding-12xs: 1px;

  --padding-4xl: 23px;

  --padding-10xs: 3px;

  --padding-6xs: 7px;

  --padding-25xl: 44px;

  --padding-17xl: 36px;

  --padding-mini: 15px;

  --padding-81xl: 100px;

  --padding-xs: 12px;

  --padding-47xl: 66px;

  --padding-50xl: 69px;

  --padding-32xl: 51px;

  --padding-2xl: 21px;

  --padding-2xs: 11px;

  --padding-smi: 13px;

  --padding-19xl: 38px;

  --padding-48xl: 67px;

  --padding-84xl: 103px;

  --padding-119xl: 138px;

  --padding-mid: 17px;

  --padding-5xl: 24px;

  --padding-lgi: 19px;

  --padding-11xs: 2px;

  --padding-3xl: 22px;

}



/* Ensure color and font variables are available */

:root {

  --color-darkslategray: #1f2b2b;

  --color-gray-100: rgba(0, 0, 0, 0.7);

  --color-gray-500: rgba(255, 255, 255, 0.6);

  --color-white: #fff;

  --font-arial: Arial;

  --font-playfair-display: "Playfair Display";

  --font-michroma: Michroma;

  --font-size-base: 16px;

  --font-size-lgi: 19px;

  --font-size-5xl: 24px;

  --font-size-xl: 20px;

}