/*---------------------BASIC CSS-----------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Nunito+Sans:wght@200;300;400;600&family=Playfair+Display:wght@400;700&family=Poppins:wght@200;300;400;600&display=swap');

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: #222;
  background-color: #fff;
}
html {
  scroll-behavior: smooth;
}

/* Reset všetkých <a> štýlov */
a {
  color: inherit;
  text-decoration: none;
  background: none;
}
p {
    margin: 0; 
    padding: 0;
    display: block; 
}
h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}
img {
    margin: 0;
    padding: 0;
    overflow: hidden;    
}
.display-flex {
  display: flex;
}
.velke-pismo {
  text-transform: uppercase;
}
.velke-pismo2 {
  text-transform: capitalize;
}
.text14 {
  font-size: 14px;
}
.text13 {
  font-size: 13px;
}
.text12 {
  font-size: 12px;
}
.text11 {
  font-size: 11px;
}
.text16 {
  font-size: 16px;
}
.text17 {
  font-size: 17px;
}

.weight100 { font-weight: 100; }
.weight200 { font-weight: 200; }
.weight300 { font-weight: 300; }
.weight400 { font-weight: 400; }
.weight500 { font-weight: 500; }
.weight600 { font-weight: 600; }
.weight700 { font-weight: 700; }
.weight800 { font-weight: 800; }

.text20 {
  font-size: 20px;
}
.text21 {
  font-size: 21px;
}
.text23 {
  font-size: 23px;
}
.text25 {
  font-size: 25px;
}
.let-space-0-5 {
  letter-spacing: 0.5px;
}
.let-space-1 {
  letter-spacing: 1px;
}
.pismo {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
}

.pismo2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 200; /* extralight */
  letter-spacing: 0.05em;
}
.pismo3 {
  font-family: 'Nunito Sans', sans-serif;
}
.div100 {
  width: 100%;
}
.div90 {
  width: 90%;
}
.div80 {
  width: 80%;
}
.div70 {
  width: 70%;
}
.div60 {
  width: 60%;
}
.div50 {
  width: 50%;
}

.div33 {
  width: 33.33%;
}

.div25 {
  width: 25%;
}
@media (max-width: 767px) {
  .div25-respon {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .div100-767{
    width: 100%;
  }
}
@media (max-width: 575px) {
  .div100-575{
    width: 100%;
  }
}
.flex-1 {
  flex: 1;
}
.gap10 {
  gap: 10px;
}
.gap15 {
  gap: 15px;
}
.gap20 {
  gap: 20px;
}
.gap30 {
  gap: 30px;
}
 .gap40 {
  gap: 40px;
} 
.gap50 {
  gap: 50px;
}
.obmedz {
  max-width: 1380px;
}
.sekcia {
  margin-top: 25px;
}
.nadpis-size {
  font-size: 50px;
}
.podnadpis-size {
  font-size: 40px;
}
/*farby*/
.bleda {
  color: #EDE9E1;
}
.cierna {
  color: black;
}
.seda {
  color: #78736D;
}
.biela {
  color: white;
}
.bleda-pozadie {
  background-color: #EDE9E1;
}
.cierna-pozadie {
  background-color: black;
}
.seda-pozadie {
  background-color: #78736D;
}
.biela-pozadie {
  background-color: white;
}
h1 {
  font-size: clamp(17px, 3vw, 33px);
}
h2 {
  font-size: clamp(14px, 3vw, 25px);
}
.nadpis40 {font-size: clamp(29px, 3vw, 40px);}
.nadpis33 {font-size: clamp(26px, 3vw, 33px);}
.nadpis25 {font-size: clamp(20px, 3vw, 25px);}
.nadpis20 {font-size: clamp(16px, 3vw, 20px);}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
@media (max-width: 767px) {
  .text-left-767 {
    text-align: left;
  }
}
@media (max-width: 767px) {
  .text-right-767 {
    text-align: right;
  }
}
@media (max-width: 767px) {
  .text-center-767 {
    text-align: center;
  }
}
@media (max-width: 575px) {
  .text-left-575 {
    text-align: left;
  }
}
@media (max-width: 575px) {
  .text-right-575 {
    text-align: right;
  }
}
@media (max-width: 575px) {
  .text-center-575 {
    text-align: center;
  }
}
.riadky {
  display: flex;
  flex-direction: column;
}

.column-pc {
  flex-direction: column;
  display: flex;
}
.row-pc {
  flex-direction: row;
  display: flex;
}

@media (max-width: 767px) {
  .column-767 {
    flex-direction: column;
    display: flex;
  }
}
@media (max-width: 575px) {
  .column-575 {
    flex-direction: column;
    display: flex;
  }
}
@media (max-width: 767px) {
  .row-767 {
    flex-direction: row;
    display: flex;
  }
}
@media (max-width: 575px) {
  .row-575 {
    flex-direction: row;
    display: flex;
  }
}




@media (max-width: 767px) {
  .riadky-respon {
    flex-direction: row;
  }
}
.stlpce {
  display: flex;
  flex-direction: row;
}
@media (max-width: 767px) {
  .stlpce-respon {
    flex-direction: column;
  }
}

.sekcia-odstup {
  margin-top: 60px;
}
.odstup {
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
.odstup20 {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;  
}
@media (max-width: 767px) {
  .odstup-767 {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}
@media (max-width: 575px) {
  .odstup-575 {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

.cierna a {
  color: black;
}
.j-c-center {justify-content: center;}
.j-c-start {justify-content: flex-start;}
.j-c-end {justify-content: flex-end;}
.j-i-center {justify-items: center;}
.j-i-start {justify-items: flex-start;}
.j-i.end {justify-items: flex-end;}
.j-s-center {justify-self: center;}
.j-s-end {justify-self: flex-end;}
.j-s-start {justify-self: flex-start;}
.a-i-center {align-items: center;}
.a-i-start {align-items: flex-start;}
.a-s-center {align-self: center;}
.a-s-start {align-self: flex-start;}
.a-s-end {align-self: flex-end;}
.a-c-center {align-content: center;}
.a-c-start {align-content: flex-start;}
.a-c-end {align-content: flex-end;}


.column-start {justify-content: flex-start;}
.column-end {justify-content: flex-end;}
.column-middle {justify-content: center;}
.column-left {align-items: flex-start;}
.column-center {align-items: center;}
.column-right {align-items: flex-end;}
.row-right {justify-content: flex-end;}
.row-center {justify-content: center;}
.row-left {justify-content: flex-start;}
.row-start {align-items: flex-start;}
.row-middle {align-items: center;}
.row-end {align-items: flex-end;}
@media (max-width: 767px) {
  .column-center-767 {
    align-items: center;
  }
}
@media (max-width: 767px) {
  .row-center-767 {
    justify-content: center;
  }
}

.stred-suvis {
  justify-content: center;

}
.start-suvis {
  justify-content: flex-start;
}
.end-suvis {
  justify-content: flex-end;
}
.sekcia-stred {
  justify-items: center;
}
.sekcia-stred-vod {
  align-items: center;
}
.stred-margin {
  margin: auto;
}
.odstup10-hore {
  margin-top: 10px;
}
.odstup10-dole {
  margin-bottom: 10px;
}
.odstup20-hore {
  margin-top: 20px;
}
.odstup20-dole {
  margin-bottom: 20px;
}
.odstup30-hore {
  margin-top: 30px;
}
.odstup30-dole {
  margin-bottom: 30px;
}
.odstup40-hore {
  margin-top: 40px;
}
.odstup40-dole {
  margin-bottom: 40px;
}
.odstup50-dole {
  margin-bottom: 50px;
}
.odstup50-hore {
  margin-top: 50px;
}
.odstup60-dole {
  margin-bottom: 60px;
}
.odstup60-hore {
  margin-top: 60px;
}
.odstup70-dole {
  margin-bottom: 70px;
}
.odstup70-hore {
  margin-top: 70px;
}
.medzera10-hore {
  margin-top: 10px;
}
.medzera10-dole {
  padding-bottom: 10px;
}
.medzera20-hore {
  padding-top: 20px;
}
.medzera20-dole {
  padding-bottom: 20px;
}
.medzera30-hore {
  padding-top: 30px;
}
.medzera30-dole {
  padding-bottom: 30px;
}
.medzera40-hore {
  padding-top: 40px;
}
.medzera40-dole {
  padding-bottom: 40px;
}
.medzera50-hore {
  padding-top: 50px;
}
.medzera50-dole {
  padding-bottom: 50px;
}
.medzera60-hore {
  padding-top: 60px;
}
.medzera60-dole {
  padding-bottom: 60px;
}
.medzera70-hore {
  padding-top: 70px;
}
.medzera70-dole {
  padding-bottom: 70px;
}
.medzera-divu{
  padding-top: 50px;
  padding-bottom: 40px;
}

/*--------header-----------*/
.site-header {
    justify-items: center;
    position: sticky;
    top: 0px;
    background-color: white;
    z-index: 10000;
}
.h-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.main-nav {
  display: flex;
  flex-direction: row;
  gap: 13px;
}
.h-logo {
  max-width: 300px;
}
.h-btn {
  width: auto;
}
.h-spolu {
  width: auto;
}
@media (max-width: 767px) {
 .header-m {
  display: flex;
 }
 .header-pc {
  display: none;
 }

}
@media (min-width: 767px) {
  .header-pc {
    display: flex;
  }
  .header-m {
    display: none;
  }
}


.m-h-prvy {width: 25%;}
.m-h-druhy {width: 50%;}
.m-h-treti {width: 25%;}
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mobile-menu .close {
    position: absolute;
    top: 17px;
    right: 17px;
    font-size: 45px;
    cursor: pointer;
}
.mobilny-text {
  border-bottom: 1px solid #78736D;
}
.mobilny-text:hover {
  color: black;
}
.m-div-prvy {height: 25%;}
.m-div-druhy {height: 50%; justify-content: center;}
.m-div-treti {height: 25%; justify-content: end;}
.burger-menu
/*-----------------------homepage-------------------*/
.obrazok-domov {
  width: 100%;
  height: auto;
  display: block;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid #111;
  color: #111;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  background-color: transparent;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid white;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  background-color: transparent;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-10 {
  padding: 10px 20px;
}
.btn-outline-white:hover {
  background-color: white;
  color: black;
}
.btn-outline-padding1 {
  padding: 0.75rem 2rem;
}
.btn-outline-padding2 {
  padding: 0.75rem 1px;
}
.btn-outline-padding3 {
  padding: 0.75rem 11px;
  width: 95%;
}

.btn-outline .arrow {
  transition: transform 0.3s ease;
  font-size: 1rem;
  opacity: 0.7;
}

.btn-outline:hover {
  background-color: #111;
  color: #fff;
}

.btn-outline:hover .arrow {
  transform: translateX(5px);
  opacity: 1;
}
.preco {
  padding-left: 30%;
  padding-right: 30%;
  box-sizing: border-box;
  padding-top: 50px;
  padding-bottom: 40px;
}
.sluzby {
  padding-top: 5%;
  padding-bottom: 5%;
  box-sizing: border-box;
}


.sluzby-section {
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
}

.sluzby-header h2 {

  font-weight: 500;
  color: #444;
  margin-bottom: 10px;
}

.sluzby-header p {
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.6;
}

.sluzby-swiper {
    width: 100%;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    padding-top: 10px;
}

.sluzby-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;

}

.sluzby-swiper .swiper-slide:hover {
  transform: scale(1.02);
}

.sluzba-obrazok {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    aspect-ratio: 1 / 1;
    object-fit: cover;

}

.sluzba-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.sluzba-btn:hover {
  background-color: #333;
  color: #fff;
  border-color: #333;
}
.sluzby-btn {
  width: 100%;
}
.arrow {
  font-weight: bold;
  transition: transform 0.3s ease;
}

.sluzba-btn:hover .arrow {
  transform: translateX(4px);
}

/* swiper-sluzby */
.swiper-button-next,
.swiper-button-prev {
  color: #999;
  transition: color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #333;
}

.swiper-pagination-bullet {
  background: #999;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: #333;
  opacity: 1;
}

/* 📱 Responzívne rozloženie */
@media (max-width: 767px) {
  .sluzby-header h2 {
    font-size: 1.6rem;
  }
  .sluzby-header p {
    font-size: 0.95rem;
  }
}
/*---swiper recenzie--*/
.text-review-swiper .swiper-wrapper {
    padding-bottom: 15px;
    padding-top: 10px;
}

.text-review-section {
  background-color: #6f6963; /* tvoja "seda" */
  color: #fff;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  overflow: hidden;
  padding-bottom: 40px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Samotný swiper */
.text-review-swiper {
  max-width: 800px;
  margin: 0 auto;
}

/* Každý slide */
.text-review-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Meno */
.text-review-swiper .review-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 10px;
}

/* Deliaca čiara */
.text-review-swiper .review-divider {
  width: 40px;
  height: 1px;
  background-color: #fff;
  opacity: 0.5;
  margin: 0 auto 20px;
}

/* Text recenzie */
.text-review-swiper .review-text {
  
  
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}


.text-review-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.4;
}

.text-review-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.text-review-swiper .swiper-pagination {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease;
  position: relative;
}
.divbtn-mapa {
  max-width: 260px;


}
.div-ar {
  align-items: self-end;
}
.div-ar2 {
  align-items: self-start;
}
.obrazok2 {
  width: 100%;
  height: auto;
}
.brmk {
  padding-right: 4%;
  box-sizing: border-box;
}
.brmk2 {
  padding-left: 4%;
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .brmk2 {
    padding-left: 0%;
  }
}
.div-ar3 {
  align-items: center;
}
.obrazok3 {
  width: 60%;
  height: auto;
}
#doplnkove-sluzby {
    background-image: url(https://gagaskinspa.guru-cloud.sk/wp-content/uploads/2025/10/doplnkove-sluzby.jpeg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 400px;
    max-height: 616px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.obrazok4 {
  width: 70%;
  height: auto;
  aspect-ratio: 8/10;
  object-fit: cover;
}
.ikona-ig {
  font-size: 60px;
  transition: all 0.3s ease;
}
.ikona-ig:hover {
  transform: scale(1.2);
}
.mapa-gaga-salon {
  width: 100%;
  height: 450px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}



/*mobilne css*/
@media (min-width: 575px) {
  .domov-df5 {
    display: none;
  }
}
@media (max-width: 575px) {
    .domov-df4 {
    display: none;
    }
    .domov-df5 {
    background-image: url(/wp-content/uploads/2025/10/odborna-starostlivost.jpeg);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 400px;
    max-height: 616px;
    display: flex;
    }
}
@media (max-width: 767px) {
  .f09 {
    order: 2;
  }
  .f10
  {
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .f11 {
    align-items: center;
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .f13 {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .obrazok3 {
    width: 100%;
  }
  .logo-domov {
    width: 60%;
    height: auto;
  }
}
@media (max-width: 575px) {
  .f14 {
    align-items: center;
    justify-content: center;
  }
  .obrazok4 {
    width: 100%;
  }
  .f15 {
    order: 2;
  }
  .obrazok3 {
    width: 60%;
  }
  .preco {
    padding-left: 10%;
    padding-right: 10%;
  }
  .logo-domov {
    width: 40%;
  }
}



/*POP UP*/
.onas-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;

  opacity: 0;
  transition: opacity 0.35s ease;
}

.onas-popup-overlay.active {
  display: flex;
  opacity: 1;
}

.onas-popup-content {
  background: #fff;
  max-width: 800px;
  width: 100%;
  max-height: 65vh;
  overflow-y: auto;
  padding: 30px;
  border-radius: 12px;
  position: relative;

  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.onas-popup-overlay.active .onas-popup-content {
  transform: scale(1);
  opacity: 1;
}

.onas-popup-close {
  position: absolute;
  right: 15px;
  top: 15px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
}

/*---face spa---*/


.obrazok6 {
  width: 70%;
  height: auto;
}
@media (max-width: 767px) {
  .obrazok6 {
    width: 60%;
  }
}
.f17 {
  margin-top: 5%;
}

.f18 {
  justify-content: center;
  gap: 20vh
}
@media (max-width: 767px) {
  .f17 {
    text-align: center;
    align-items: center;
    margin-top: 0px;
  }
  .f18 {
    gap: 20px;
  }
}
.f19 {
  margin-top: 20px;
}


.row-pc1{
  display: grid!important;
  grid-template-columns: 1fr 1fr!important; /* rovnaké stĺpce */
  justify-content: center!important;
  align-items: start!important;
  gap: 20px!important;
}




.face-procedures-section,
.exozomy-procedures-section,
.beauty-procedures-section,
.eyes-procedures-section,
.pristrojove-procedures-section {
  background-color: #f8f6f5;
  padding: 80px 0;
}

.face-procedures-wrapper,
.exozomy-procedures-wrapper,
.beauty-procedures-wrapper,
.eyes-procedures-wrapper,
.pristrojove-procedures-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.face-procedures-title,
.exozomy-procedures-title,
.beauty-procedures-title,
.eyes-procedures-title,
.pristrojove-procedures-title {
  font-size: clamp(24px, 3vw, 32px);
  color: #6f6f6f;
  margin-bottom: 40px;
  text-align: left;
  letter-spacing: 0.5px;
}

.face-procedures-list,
.exozomy-procedures-list,
.beauty-procedures-list,
.eyes-procedures-list,
.pristrojove-procedures-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.face-procedures-item,
.exozomy-procedures-item,
.beauty-procedures-item,
.eyes-procedures-item,
.pristrojove-procedures-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 12px 18px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #f0ebe7;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.face-procedures-item:hover,
.exozomy-procedures-item:hover,
.beauty-procedures-item:hover,
.eyes-procedures-item:hover,
.pristrojove-procedures-item:hover {
  background-color: #f3efec;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .face-procedures-item,
  .exozomy-procedures-item,
  .beauty-procedures-item,
  .eyes-procedures-item,
  .pristrojove-procedures-item {
    gap: 16px;
  }

  .face-procedures-price,
  .exozomy-procedures-price,
  .beauty-procedures-price,
  .eyes-procedures-price,
  .pristrojove-procedures-price {
    align-self: flex-start;
  }
}

/* ZÁKLAD - nový slider pre procedúry */
.procedury-swiper {
  width: 100%;
  padding: 60px 0;
  padding-left: 3px;
  padding-right: 3px;
  box-sizing: border-box;
}
@media (max-width: 567px) {
  .procedury-swiper {
    padding-left: 7px;
    padding-right: 7px;
  }
}
.procedury-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.procedura-obrazok {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 16px;
}

/* tlačidlo pod obrázkom */
.procedury-btn {
  display: inline-block;
  border: 1px solid #000;
  padding: 10px 20px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.procedury-btn:hover {
  background-color: #000;
  color: #fff;
}

/* swiper navigácia */
.procedury-swiper .swiper-button-prev,
.procedury-swiper .swiper-button-next {
  color: #000;
  transition: opacity 0.3s;
}

.procedury-swiper .swiper-button-prev:hover,
.procedury-swiper .swiper-button-next:hover {
  opacity: 0.6;
}

/* pagination body */
.procedury-swiper .swiper-pagination-bullet {
  background-color: #000;
  opacity: 0.3;
}

.procedury-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* menšie prispôsobenie pre menšie displeje */
@media (max-width: 768px) {
  .procedury-btn {
    font-size: 13px;
    padding: 8px 16px;
  }
}
.f20 {
  padding-bottom: 40px;
}
.obmedz1000 {
  max-width: 1000px;
}

/*---------------POP UP SLUZBY------------------*/
.popup-content {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.popup-content.hidden {
  display: none;
}

.popup-inner {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.border-cas {
    border: 1px solid black;
    border-radius: 141px;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: inline-block;
    max-width: fit-content;
    width: auto;
}
.odstup20-margin {
  margin-left: 20px;
  margin-left: 20px;
  box-sizing: border-box;
}

/*--------FOOTER------*/
.obrazok-logo-footer {
  width: 100%;
  height: auto;
  max-width: 200px;
}
.instagram-footer {
  color: white;
  fill: white;
  width: 30px;
  height: 30px;
}