:root {

  --main-clr: #f8d6e5b6;

  --secondary-clr:#fdf4f8;

  --acc-clr: #e081ab;



}

/* #e081ab */



@layer base {

  html {

    font-family: "Segoe UI", sans-serif;

  }



  body {

    margin: 0;

  }



  footer div {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 3em;

  }

}



@layer layout-parts {

  .nav-bar {

    display: flex;

    gap: 1em;

    padding: 0;

    margin-bottom: 0;

    list-style: none;

  }



  .header-in,

  .header-subpg {

    align-items: end;

    justify-content: space-between;

    padding-top: 1em;

    padding-bottom: 0.5em;

  }



  .nav-item a {

    font-size: larger;

    text-decoration: none;

  }



  .nav-item a:hover {

    position: relative;

    top: -5%;

    text-decoration: underline var(--acc-clr) solid 3px;

    text-underline-offset: 12px;

  }



  .header-hgroup h1 {

    font-weight: 500;

    margin-top: 1em;

    margin-bottom: 0;

    color: #555555;

  }

}



@layer containers-items {

  .wrapper {

    max-width: 1040px;

    margin: auto;

    padding-inline: 3vw;

  }



  .grid-contact {

    display: grid;

    grid-template-columns: 4fr 6fr;

  }



  .flex {

    display: flex;

  }



  .column {

    flex-direction: column;

  }



  .services {

    flex-direction: column;

    margin-bottom: 1em;

  }



  .article {

    min-width: 50%;

  }



  .center {

    justify-content: center;

  }



  .reverse {

    flex-direction: row-reverse;

  }



  .img-services {

    min-width: 50%;

  }



  .price-row {

    justify-content: space-between;

    align-items: end;

    border-bottom: 2px solid rgb(242, 226, 236);

    font-weight: 400;

    margin-left: 4vw;

  }



  .price-row-2 {

    margin-left: 0;

  }



  .price-row,

  .price-row-2 {

    margin-block: 0.3em;

  }

}



@layer misc {

  #services .article-services, #poukaz .article-services,.map {

    box-shadow: rgba(0, 0, 0, 0.24) 0px 6px 16px;

  }



  /* header {

    box-shadow:

      rgb(255, 255, 255) 0px 30px 60px -12px inset,

      rgb(255, 255, 255) 0px 18px 36px -18px inset;

  } */



  .map {

    height: 100%;

    width: 100%;

    border: 2px solid var(--acc-clr)

  }



  .with-accent {

    position: relative;

    display: inline-block;

    z-index: 0;

  }



  .with-accent:before {

    content: "";

    display: block;

    position: absolute;

    left: -10px;

    top: -3px;

    width: 1.5em;

    height: 1.5em;

    border-radius: 50%;

    background-color: var(--acc-clr);

    opacity: 0.2;

    z-index: -1;

  }



  .with-accent.reverse-accent:before {

    background-color: var(--secondary-clr);

    opacity: 0.8;

  }



  ul {

    list-style: none;

    padding: 0;

  }



  p {

    margin: 0;

    color: #555555;

  }



  label {

    font-weight: 700;

    color: #0b0b15;

  }



  .button {

    width: fit-content;

    height: fit-content;

    border-radius: 0.3em;

    background-color: color-mix(in srgb, var(--acc-clr) 60%, transparent);

    padding: 0.5em;

    color: #0b0b15;

    font-weight: 500;

    text-decoration: none;

    text-align: center;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  }



  .button:hover {

    transform: scale(1.02);

  }



  #poukaz {

    padding-top: 0;

    padding-bottom: 2em;

  }



  #poukaz h2 {

    margin-top: 0;

  }

}



@layer gallery {

  .gallery-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1em;

    grid-auto-rows: 15em;

    margin-top: 1em;

  }



  .gallery-container img {

    border-radius: 0.2em;

    cursor: pointer;

    width: 100%;

    height: 100%;

    object-fit: cover;

    overflow: hidden;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 6px 16px;

  }



  .gallery-container img:hover {

    transform: scale(1.02);

  }



  #depilace-oblicej,

  #depilace-tela {

    display: none;

  }

}



@layer utils {

  

  .bg-color-primary {background-color: var(--main-clr);}

  .bg-color-secondary {background-color: var(--secondary-clr);}





  /* .bg-color-primary {background-color: rgb(242, 226, 236);} */



  .padding-y {

    padding-block: 2vw;

  }



  .padding-bottom-extra {

    padding-bottom: 6vw;

  }



  .box-margin {

    margin: 1em;

  }



  .heading {

    font-weight: 500;



    color: #454545;

  }



  .text {

    color: #555555;

    line-height: 1.5;

    margin-top: 1em;

    margin-bottom: 1em;

  }



  .border-radius {

    overflow: hidden;

    border-radius: 0.5em;

  }

}



@media (max-width: 959px) and (min-width: 560px) {

  .article-services {

    flex-direction: column;

  }



  .grid-contact {

    display: inline;

  }

}



@media (max-width: 559px) and (min-width: 360px) {

  html {

    font-size: 90%;

  }



  .header-in {

    flex-direction: column;

    align-items: start;

  }



  .nav-bar {

    display: grid;

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

    gap: 1em;

    width: 100%;

    margin-block: 1em;

  }



  .nav-bar li {

    background-color: color-mix(in srgb, var(--acc-clr) 60%, transparent);

    border-radius: 0.3em;

    height: max-content;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  }



  .nav-bar a {

    display: block;

    text-align: center;

    padding: 0.5em;

    color: #0b0b15;

    text-decoration: none;

    margin: 0;

    font-weight: 500;

  }



  .nav-bar a:hover {

    top: 0;

  }



  .article-services {

    flex-direction: column;

  }



  .grid-contact {

    display: inline;

  }



  .nav-item a:hover {

    text-decoration: none;

  }



  .back-link {

    display: flex;



    margin: 0;

  }



  .back-link a {

    padding: 0.25em;

  }

}