/*
* Anabela Baletni Studio
* Copyright 2017, Ana Pucko
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-family: "Playfair Display", Georgia, serif;
}
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  margin-top: 40px;
}
th,
td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  font-size: 12px;
}
td.content {
  background-color: rgba(255,255,255,0.10);
}
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body, html {
  background-color: #bb9bb0;
  width: 100%;
  height: 100%;
  font-family: "Lato", sans-serif;
}
a.logo {
  background-image: url("../images/logo.svg");
  display: block;
  width: 180px;
  height: 52px;
  background-size: 180px 52px;
  position: fixed;
  left: 10px;
  top: 20px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
a.logo:hover {
  opacity: 0.5;
}
.bg-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  background-position: center;
  left: 0px;
  top: 0px;
  opacity: 0.65;
  z-index: 1;
  transition: background-image 1s ease-in-out, opacity 1s ease-in-out;
}
.bg-image.gallery {
  opacity: 1;
}
video#fullscreen {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background-size: cover;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1;
  opacity: 0.8;
}
.full-width {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 5;
}
ul.menu {
  position: fixed;
  right: 40px;
  top: 35px;
  list-style: none;
  z-index: 50;
}
ul.menu li {
  display: inline-block;
  text-align: center;
  margin-left: 40px;
  height: 30px;
}
ul.menu li a {
  color: #FFF;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  height: 30px;
  line-height: 30px;
}
ul.menu li a:hover {
  opacity: 0.5;
}
ul.menu li.cta {
  /* Glassmorphism button */
  background: rgba(187, 155, 176, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: 70px;
  height: 35px;
  border-radius: 12px;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  line-height: 35px;
}
ul.menu li.cta a {
  font-size: 16px;
  height: 35px;
  line-height: 35px;
}
ul.menu li.cta a:hover {
  opacity: 1;
}
ul.menu li.cta:hover {
  background: rgba(187, 155, 176, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
div.modal {
  position: fixed;
  color: #FFF;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  width: 600px;
  height: auto;
  padding: 60px 80px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  margin-top: 10%;
  /* Glassmorphism effect */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  line-height: 140%;
  letter-spacing: 0.07em;
  font-weight: 300;
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
body.open div.modal, body.open #onas {
  margin-left: -30%;
}
div.modal.closed {
  opacity: 0;
  margin-top: 100%!important;
}
div.modal .close {
  width: 30px;
  height: 30px;
  background-image: url("../images/close.svg");
  background-size: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 1;
  transition: opacity 0.5s ease;
  cursor: pointer;
  z-index: 200;
}
div.modal .close:hover {
  opacity: 0.5;
}
div.modal h2, div.modal p {
  margin-left: 2%;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
  border: 0;
  outline: 0;
  width: 46%;
  margin-left: 2%;
  margin-right: 2%;
  float: left;
  /* Glassmorphism inputs */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #FFF;
  padding: 12px 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border: 2px solid rgba(187, 155, 176, 0.8);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  outline: 0;
}
textarea {
  width: 96%;
  min-height: 100px;
  resize: none;
}
a.submit {
  color: #FFF;
  /* Glassmorphism submit button */
  background: rgba(187, 155, 176, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: auto;
  min-width: 150px;
  height: 45px;
  border-radius: 12px;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  line-height: 45px;
  margin-left: 2%;
  padding: 0 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}
a.submit.disabled {
  cursor: not-allowed;
  opacity: 0.2;
}
a.submit:hover {
  background: rgba(187, 155, 176, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
:-ms-input-placeholder { /* IE 10+ */
  color: white;
}
:-moz-placeholder { /* Firefox 18- */
  color: white;
}
h2 span {
  opacity: 0.25;
  transition: opacity 1s ease;
  cursor: pointer;
}
h2 span.active {
  opacity: 1;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
div.hidden {
  display: none;
}
img.preload {
  display: none;
}
.min-padding {
  margin: 0;
  padding: 0;
  margin: 10px 0px;
}
h3 img {
  height: 60px;
  position: absolute;
  margin-left: -70px;
  margin-top: -14px;
}
#srce h3 {
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 26px;
  padding-left: 75px;
}
#srce p {
  padding-bottom: 15px;
}
p.mid-padd {
  margin: 0;
  padding: 0;
  margin: 10px 0px;
}
#onas {
  width: 800px;
}
#cenik {
  width: 800px;
}
body .gallery-controls {
  display: none;
  z-index: 10;
}
.gallery-controls .right, .gallery-controls .left {
  position: fixed;
  right: 0px;
  height: 100%;
  width: 50px;
  background-color: rgba(0,0,0,0.25);
  z-index: 100;
  transition: background-color 0.5s ease-in-out;
  cursor: pointer;
}
.gallery-controls .right:hover, .gallery-controls .left:hover {
  background-color: rgba(0,0,0,0.5);
}
.gallery-controls .left {
  left: 0px;
}
.gallery-controls .right img, .gallery-controls .left img {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 15px
}
.gallery-controls .left img {
  right: 15px;
}
body.gallery .gallery-controls {
  display: block;
}
body.gallery .full-width {
  opacity: 0;
  display: none;
}
body.gallery .bg-image {
  opacity: 1;
}
div.gallery-controls .close {
  width: 30px;
  height: 30px;
  background-image: url("../images/close.svg");
  background-size: 30px;
  position: absolute;
  right: 70px;
  top: 20px;
  opacity: 1;
  transition: opacity 0.5s ease;
  cursor: pointer;
  z-index: 200;
}
div.gallery-controls .close:hover {
  opacity: 0.5;
}



/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (max-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 550px) {}

/* Larger than tablet */
@media (max-width: 750px) {
  h2 {
    font-size: 22px;
  }
  #mobile-menu {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("../images/menu.svg");
    background-size: 30px;
    position: absolute;
    right: 30px;
    top: 30px;
    opacity: 1;
    transition: opacity 0.5s ease;
    cursor: pointer;
  }
  #mobile-menu.close {
    background-image: url("../images/close.svg");
  }
  ul.menu {
    position: fixed;
    right: -150px;
    top: 85px;
    list-style: none;
    width: 300px;
    opacity: 0;
    transition: right 1s ease-in-out, opacity 1s ease-in-out;
  }
  ul.menu.open {
    opacity: 1;
    right: 30px;
  }
  ul.menu li {
    display: block;
    width: 300px;
    text-align: right;
    height: 30px;
    margin-left: 0px;
  }
  ul.menu li.cta {
    width: 70px;
    float: right;
    text-align: center;
  }
  div.modal, #onas, div.modal, #cenik {
    width: 90%;
    height: 80%;
    margin-left: 5%;
    padding: 10%;
    box-sizing: border-box;
    margin-top: 25%;
    overflow: scroll;
    scroll-behavior: smooth;
  }
  div.modal.closed {
    margin-top: 200%!important;
  }
}

/* Larger than desktop */
@media (max-width: 1000px) {}

/* Larger than Desktop HD */
@media (max-width: 1200px) {}

/* Modern enhancements and animations */
/* Smooth scrolling for the whole page */
html {
  scroll-behavior: smooth;
}

/* Enhanced typography */
div.modal h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 3.2rem;
  margin-bottom: 2rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

div.modal h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  color: #fff;
}

div.modal h4, div.modal h5 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  color: rgba(187, 155, 176, 1);
  margin-bottom: 1rem;
}

div.modal p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Improve menu typography */
ul.menu li a {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Add subtle animation to modal appearance */
div.modal {
  animation: modalSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enhanced menu with subtle backdrop blur */
ul.menu {
  background: transparent;
  border-radius: 15px;
  padding: 10px 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Improve menu item hover effects */
ul.menu li a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  padding: 5px 10px;
}

ul.menu li a:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Add floating animation to the logo */
.logo {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Enhance background image transitions */
.bg-image {
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add subtle glow effects to profile images */
div.modal h3 img {
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

div.modal h3 img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(187, 155, 176, 0.4);
}

/* Improve table styling */
table {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

table th, table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

table th {
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

/* Add subtle pulse animation to CTA button */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 6px 20px rgba(187, 155, 176, 0.3); }
}

ul.menu li.cta {
  animation: subtlePulse 3s ease-in-out infinite;
}

/* Improve close button styling */
div.modal .close, .gallery-controls .close {
  background-image: url("../images/close.svg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

div.modal .close:hover, .gallery-controls .close:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Enhance gallery controls */
.gallery-controls .left, .gallery-controls .right {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-controls .left:hover, .gallery-controls .right:hover {
  background: rgba(255, 255, 255, 0.2);
}