body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  text-decoration: none;
  list-style: none;
  background: linear-gradient(70deg, #333, #333);
}

header {
  background: linear-gradient(45deg, #353434, #434343);
  color: #fff;  
  padding: 10px;
  text-align: center;
  transition: .5s;
  box-shadow: -0.3em 0 .3em black;
  height: 100px;
}

header h1 {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff, #434343);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: transparent;
  font-size: 40px;
  color: #5c5c5f;
  font-weight: bolder;
  cursor: pointer;
  text-shadow: 1px 1px 0px #ffffff, 0 0 1em #ffffff, 0 0 0.2em #434343;
}

header h1:hover {
  transition: .5s;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0 auto 0 auto;
  width: 6em;
  background: linear-gradient(45deg, #383434, #434343);
  padding: 11px;
  margin-top: 15px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  height: 30px;
  text-align: center;
  width: 50%;
  border-radius: 10px;
}

nav button:hover {
  opacity: 0.8;
  border-radius: 10px;
  transition: .5s;
 
}

nav button:hover .material-icons { /* Adjust hover effect for .material-icons */
  opacity: 1; /* Maintain opacity when hovering */
}


nav button, .material-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
  transition: .5s;
  background: transparent;
  padding: 0 10px;
  font-size: 14px;
}

nav button:active {
  opacity: 0.7;
  border-radius: 5px;
}


.material-icons {
  font-size: 20px;
  color: #979696;
}




.color-indicator {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  top: 10px;
  left: 10px; 
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.blue {
  background-color: #3437d4;
}

.bluelight {
  background-color: #0d76ff;
}

.green {
  background-color: #0aa51e;
}

.greenlight {
  background-color: #23ff40;
}

.grey {
  background-color: #9a9c9c;
}

.greylight {
  background-color: #dadddd;
}

.hazel {
  background-color: #804030;
}

.yellow {
  background-color: #cddb05;
}

.honey {
  background-color: #E79A3F;
}

.aqua {
  background-color: #04ecec;
}

.violet {
  background-color: rgb(57, 3, 119);
}

.white {
  background-color: white;
}

section {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

footer {
  background-color: #3d3c3c;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}
footer p {
  margin: 0;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0;
}


.product {
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #574e4e, #554747);
  border-radius: 8px;
  padding: 10px 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.product img {
  max-height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.product p {
  margin: 5px 0;
  color: #fff;
  text-shadow:0 0 3em #ffffff, 0 0 1em #434343;
}


.sales-block {
  max-width: 522px;
  margin: 20px auto;
  padding: 20px ;
  background: linear-gradient(250deg, #4d4646, rgb(83, 81, 81));
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: .5s;
}


.sales-block:hover {
  box-shadow: -0.1em 0 1em #000000, -0.1em 0 1em #434343;
  transition: 1s;
}


.Crystal {
  display: inline-block;
  background: linear-gradient(280deg, #fff, #ffdbdb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: transparent;
  text-shadow: 0 0 1em #fff, 0 0 0.1em #ffdbdb;
}

p {
  color: #fff;
}



.price {
  font-weight: bold;
}

.price a {
  color: #32bd20;
  text-decoration: none;
  cursor:text;
}

button {
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s ease;
  background-color: #555;
}



.popup-content {
  margin: 0px auto 0 auto;
  margin-top: 30px;
  display: none;
  flex-direction: column;
  background-color: #383434;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 500px;
  width: 80%;
  color: #fff;
}

.popup-content ul {
  list-style-type: none;
  padding: 0;
}

.popup-content li {
  margin-bottom: 20px;
}

.popup-content .phone-number,
.popup-content .social-link {
  color: #eb4033;
  text-decoration: none;
}




.crygreen,
.cryblue,
.crygrey,
.cryhazel,
.cryhoney,
.cryellow,
.cryaqua,
.cryviolet {
  display: inline-flex; 
}



section button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(45deg, #7a6e6e, #a87171);
  border: none;
  border-radius: 8px;
  padding: 0 20px; /* Increased padding for better visual balance */
  height: 40px;
  width: auto;
  cursor: pointer; /* Added for clear click behavior */
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
/* Gradient overlay effect */
section button::before {
   content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(45deg, #a89942, #d3f14a);
  border-radius: 5px; /* Adjust border-radius as needed */
  z-index: -1;
  transform-origin: center;
  transform: scale(0, 1);
  transition: transform 0.3s ease-in-out;
}




/* Hover state gradient overlay */
.crygreen:hover::before,
.cryblue:hover::before,
.crygrey:hover::before,
.cryhazel:hover::before,
.cryhoney:hover::before,
.cryellow:hover::before,
.cryaqua:hover::before,
.cryviolet:hover::before {
  transform: scale(1);
}

/* Text and box shadow on hover */
.crygreen span,
.cryblue span,
.crygrey span,
.cryhazel span,
.cryhoney span,
.cryellow span,
.cryaqua span,
.cryviolet span {
  position: relative;
  z-index: 1;
}

/* Final hover state */
.crygreen:hover,
.cryblue:hover,
.crygrey:hover,
.cryhazel:hover,
.cryhoney:hover,
.cryellow:hover,
.cryaqua:hover,
.cryviolet:hover {
  background-color: #333;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


button:active {
  transform: scale(0.9);
}

button a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}


.kontak {
margin-top: 15px;
background: linear-gradient(45deg, #383434, #434343);
border: 1px solid #434343;
border-radius: 15px;
width: 500px;
justify-content: center;
margin: 0 auto 0 auto;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
transition: 1s;
}

.kontak:hover {
transition: 1s;
border: 1px solid #fff;
}

.delivery-container {
  width: 600px;
  margin: 20px auto;
  background-color: #383434;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.delivery-info-list {
  list-style-type: none;
  padding: 0;
}

.delivery-info-item {
  margin-bottom: 25px;
}

.delivery-title {
  font-weight: bold;
  color: #fff;
  margin-right: 10px;
}

.delivery-description {
  color: #ccc;
}

.nova-poshta, .keywords {
  color: #f83a5a;
  text-decoration: underline;
}


.delivery-logo {
  display: block;
  margin: 0 auto 30px;
  width: 200px;
}

.delivery-note {
  margin-top: 30px;
  font-style: italic;
  color: #ccc;
  text-align: center;
}


.center {
display: flex;
margin: 0 auto 0 auto;
}



.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}

.modal img {
max-width: 80%;
max-height: 80%;
border-radius: 15px;
}

.close {
position: absolute;
top: 15px;
right: 15px;
color: white;
font-size: 20px;
cursor: pointer;
background-color: red;
width: 20px;
height: 20px;
text-align: center;
border-radius: 5px;
border: 1px solid white;
}




.magnifier {
  position: relative;
  overflow: hidden;
  height: 60%;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.magnifier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5); 
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; 
}

.magnifier:hover::before {
  opacity: 1;
}

.magnifier img {
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.magnifier:hover img {
  filter: blur(2px);
  transform: scale(1.3); 
}

.magnifier:not(:hover) img {
  transform: scale(1);
}

.zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(image/catolog/zoom.png);
  width: 40px; /* Adjust the width and height according to your icon size */
  height: 40px;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  display: inline-block; /* Или display: inline; */
  pointer-events: none; /* Это позволит пропускать события мыши сквозь элемент */
}

.magnifier:hover .zoom-icon {
  opacity: 1;
}


/* Стили */
.About {
  max-width: 600px;
  font-size: 18px;
  margin: 20px auto;
  padding: 20px;
  background-color: #383434;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.About h1 {
  color: #fff;
  background-color: #434343;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
}

.About p {
  color: #c2c2c2;
  line-height: 1.6;
  text-align: justify;
}

.eyemedabout {
  font-weight: bold;
  color: #e02544;
  text-decoration: none;
}

.eyemedabout:hover {
  text-decoration: underline;
}

/* Декоративные элементы */
.About::before {
  content: '';
  display: block;
  height: 2px;
  background-color: #aa073e;
  margin: 20px auto;
  width: 80%;
}

.About::after {
  content: '';
  display: block;
  height: 2px;
  background-color: #aa073e;
  margin: 20px auto;
  width: 80%;
}




.green-text {
  color: green;
}

.red-text {
  color: red;
}

.yellow-text {
  color: yellow;
}

.black-text {
  color: #000000;
}



.dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
}

.filters {
  font-family: Arial, sans-serif;
  padding: 10px;
  font-size: 17px;
  font-weight: bold;
  border: 1px solid #746d6d;
  border-radius: 15px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #383434;
  color: #ccc;
  cursor: pointer;
  width: 390px;
  text-align: center;
  margin-top: 0px;
  transition: .5s;
}

.filters option {
  color: #ccc;
  font-size: 20px;
}

.filters:focus {
  outline: none;
  border-color: #f18585;
}

.filters:hover {
  border-color: #f18585;
  transition: .5s;
}

.filters::placeholder {
  color: #aaa;
}

.filters option[hidden] {
  display: none;
}

.filters option[value="all"] {
  display: none;
}

.slider {
  position: relative;
  width: 80%; /* Ширина слайдера */
  max-width: 1028px; /* Максимальная ширина слайдера */
  overflow: hidden;
}

.slide {
  flex: 0 0 100%; /* Каждый слайд занимает всю доступную ширину */
  width: 100%;

}

.slide img {
  width: 100%; /* Изображение внутри слайда занимает всю ширину слайда */
  height: 91%; /* Высота автоматически рассчитывается, чтобы сохранить пропорции */
  border-radius: 30px;
  margin-top: 15px;
}


.slides {
  display: flex;
}

.slide {
  flex: 0 0 auto;
  width: 100%;
  transition: transform 0.5s ease;
  margin: 0 auto 0 auto;
}

.slider-container {
  display: flex;
  justify-content: center;
}



/* Остальные стили остаются такими же */


.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}



@media (min-width: 700px) and (max-width: 1199px) {
  section {
    display: flex;
    flex-direction: column;
  }

  nav {
    width: 60%;
  }
}


@media all and (min-width: 800px) and (max-height: 500px) {
     ul.characteristics-list {
         height: 75vh;
     }
}

@media all and (max-width: 835px) {
  nav {
    border-radius: 0px;
    width: auto;
  }
}

@media all and (max-width: 579px) {
  .product {
    margin: 15px auto 0 auto;

}
}



@media all and (max-width: 430px){
  section {
    display: flex;
    flex-direction: column;
  }

  header {
    height: 15vh;
  }
  
  header h1 {
    margin: -1px;
  }

  nav {
    border-radius: 0px;
    width: auto;
  }

  nav button {
    padding: 0px 19px;
    margin: 0 1px;
  }

  .product {
      margin: 15px auto 0 auto;
      
  }

  .zoom-icon {
    height: 60px;
    width: 60px;
  }

  .poshta {
    display: none;
  }

  ul.characteristics-list {
    width: 300px;
  }
  
  .kontak {
      width: 335px;
  }
  
  .delivery-container {
    width: 290px;
  }

  .About {
    max-width: 350px;
  }
  
  select, option {
      text-align: center;
  }

  .filters {
    margin-top: 10px;
  }

.slider {
    margin-top: 0px;
    width: 100%;
}

.slide img {
    border-radius: 0;
}

.popup-content {
    width: 70%;
}

}

@media screen and (max-width:1300px) {
    #footer {
        display: none;
    }
}


@media screen and (max-width:400px) {
  header{
    height: 50%;
    width: 101%;
  }

  .product {
    padding-left: 20px;

  }

  .zoom-icon {
    height: 60px;
    width: 60px;
  }

}

@media screen and (max-width:370px) {
  .product {
    padding-left: 25px;
  }
  
  .popup {
      width: 70%;
  }

}

@media screen and (min-width: 200px) and (max-width: 300px){
  nav {
    height: auto;
  }

    nav a {
      padding-left: 0;
      font-size: 13px;
    }

    .magnifier {
      height: 51%;
    }
  
}