* {margin:0; padding:0;}


/*вікно заявок*/
#wraper {min-height: 280px; border-radius: 10px; background-color: #292928; box-shadow: 0px 1px 2px #F0BC7D;}

/*перелив заголовка*/
@keyframes shineUp {
 0% {background-position: 0% 100%;}
 100% { background-position: 0% 0%;}}

.shine-up {
  background: linear-gradient(
    to top,
    #F0BC7D 0%,
    #faebc8 40%,
    #F0BC7D 80%
  );
  background-size: 100% 200%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineUp 1.2s ease-out 1;
}

/*вікно опитування*/
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.pollModal {
  background: #fff;
  padding: 20px;
  width: 90%;
  max-width: 300px;
  border-radius: 10px;
}

.pollModal button {
  width: 100%;
  margin-top: 10px;
}

.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.radio-row input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 50%;
  margin-top: 3px;
}

.radio-row input:checked {
  background: radial-gradient(circle, #333 45%, transparent 50%);
}


/* копії картинок */
#thumbnails {
  position: fixed;
  bottom: 2px;
  right: -100px;
  opacity: 0.5;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

#thumbnails img {
  width: 30px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s;
}

#thumbnails img:hover {
  transform: scale(1.1);
  opacity: 1;
}

#thumbnails img.active {
  transform: scale(1.5);
  opacity: 1;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  border: 2px solid #f5cf9d;
}

#thumbnails.visible {
  right: 2px;
}




 /* бегущя строка */
.items-wrap {
  z-index: 2;
  display: flex;
  overflow: hidden;
  user-select: none;
  position: fixed;
  z-index:99999999;
  background-color: black;
  top: 60px;
  gap: 20px;}
.items {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
  counter-reset: item;
  justify-content: space-around;
  min-width: 100%;}
.item:before {content: counter(item);}
.marquee {animation: scroll 60s linear infinite;}
.items-wrap:hover .marquee {animation-play-state: paused;}
@keyframes scroll {from { transform: translateX(0); } to { transform: translateX(calc(-100% - 20px));}}
.imageStroka {height: 20px; width: 100%; bottom: 500px;}
.svg-overlay {
  position: absolute;
  width: 100%;
  height: 100%; align-items: center;
}

.message {
      cursor: pointer;
      padding: 10px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      display: inline-block;
      margin: 10px 0;
    }

    /* Стиль для вікна підтвердження */
    .confirmation-box {background-color: #1e1f1f;
      position: fixed;
      top: 30%;
      left: 50%;
      min-width: 350px;
      transform: translate(-50%, -50%);
      border: 1px solid #ccc;
      padding: 5px;
      text-align: center;
      display: none;
      z-index: 1000;
    }

    .confirmation-box button { background-image: linear-gradient(180deg, #000000, rgba(125,0,0,0));
      margin: 5px;
      padding: 5px 10px;
    }



        /* Стили для затемнення фону при відкритті вікна */
#overlay {display: none;position: fixed;top: 0;left: 0; width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5); z-index: 9;}
#chatWindow { display: none;position: fixed;top: 43%;left: 50%;transform: translate(-50%, -50%);width: 80%; height: 70%; max-width: 750px; background-color: rgba(0, 0, 0, 0.5);border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);padding: 20px;z-index: 10;}
#usersWindow { display: none;position: fixed;top: 43%;left: 50%;transform: translate(-50%, -50%);width: 80%; height: 70%; background-color: rgba(0, 0, 0, 0.5);border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);padding: 20px;z-index: 10;}
#textt {width: 100%; padding: 10px;margin-bottom: 10px;border-radius: 5px;border: 1px solid #ddd;}
#sh {width: 100%;padding: 10px;background-color: #10BC7D;color: white;border: none;border-radius: 5px;cursor: pointer;}
#sh:hover {background-color: #F0BC7D;}
.close-button {position: absolute;top: 5px;right: 0px; cursor: pointer;font-size: 30px;color: red;}


#vidgyku {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background-color: #000000;
    border: 2px solid #808080;
    border-radius: 15px;
    display: block;
    margin: 0 auto;

    text-align: center;}

    #users {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        background-color: #000000;
        border: 2px solid #808080;
        border-radius: 15px;
        display: block;
        margin: 0 auto;

        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;}

.el-check {width: 30px; height: 10px;}
.che {vertical-align: 2px;}
.sectio-i {background-color: #1e1e1e;}
.sectio-i .u-image {height: 175px; width: 100%; margin: 0px auto auto;}
@media (max-width: 575px) {.sectio-i .u-image {height: 140px;}}
.googl {width: 700px;}
@media (max-width: 900px) {.googl {width: 340px;}}

.podilut:hover {background-color: #500e1e; transition-duration: 0.7s;transform: scale(1.02) ;border-radius: 30px !important;}
.socmer:hover {background-color: #500e1e; transition-duration: 0.7s;transform: scale(1.02) ;border-radius: 30px !important;}

.u-section-za { padding: 10px; background-image: linear-gradient(180deg, rgba(125, 202, 240, 0) 0%, #0f0f0f 3%);margin-top: -50px;position: relative;z-index: 2;}
.u-section-za .u-text2 {margin: 20px 0px 0px 0px;}
.u-section-za .u-text3 {margin: 20px 0px 0px 0px;}
.u-section-za .form {margin: 20px 0px 0px 0px;}
.u-section-za .u-contain{border: 1px solid #D6A972;max-width: 670px;margin: 0 auto;}
.u-body {background-color: #0f0f0f;}
.u-backlink {background-color: #1e1e1e;}
.u-wapka {background-color: #080808;height: 65px; padding: 0px 0 45px; position: fixed; width: 100%; top: 0px; z-index:99999999;}
.u-wapka .u-container-layout-1_0 {padding: 0px 0 45px;height: 15px;margin-bottom: 0px;margin-right: 5px;margin-left: 5px; box-shadow: 0px 0px 10px whitesmoke;background-image: linear-gradient(90deg, #080808 0%, #202020 50%, #080808 100%);}
@media (max-width: 791px) {.u-wapka {max-height: 55px;} .items-wrap {top: 40px;} .u-wapka .u-container-layout-1_0 {padding: 0px 0 33px;}}
.dodatok {position: absolute;right: 20px; top:7px;}
@media (max-width: 800px) {.dodatok {position: absolute;right: 20px; top:5px;font-size: 0.8rem;} .podil {font-size: 0.5rem;} .soc {font-size: 0.5rem;} .pravo {font-size: 0.5rem;} .listen {font-size: 0.8rem;} .che {font-size: 0.6rem;}}
.u-imageS {filter: brightness(0.4);}

textarea{text-align: center; height: 150px;width: 320px;background-color: #c4c2be; font-size: 17px;}
label{margin-left: 0px}
input{width: 97px; font-weight: bold; background-color: #c4c2be; font-size: 16px;}


.golovna:hover small,
.about:hover small,
.inshi:hover small {display: inline-block; transition-duration: 1.2s; transform: scale(1.1);}
.image {margin-top: 7px}
@media (max-width: 1750px) {.image {margin-left: 520px} .golovna {left:15px;top:-8px;} .inshi {left:30px;top:-8px;} .about {left:30px;top:-8px;}}
@media (max-width: 1550px) {.image {margin-left: 365px} .golovna {top:-8px;} .inshi {top:-8px;} .about {top:-8px;}}
@media (max-width: 1310px) {.image {margin-left: 300px} .golovna {top:-8px;} .inshi {top:-8px;} .about {top:-8px;}}
@media (max-width: 1150px) {.image {margin-left: 180px} .golovna {top:-8px;} .inshi {top:-8px;} .about {top:-8px;}}
@media (max-width: 900px) {.image {height: 0px} .golovna {top:6px;} .inshi {top:6px;} .about {top:6px;}}
@media (max-width: 700px) {.golovna {top:2px;font-size: 0.8rem;} .inshi {top:2px;font-size: 0.8rem;} .about {top:2px;font-size: 0.8rem;}}

.u-section-2 .u-container-layout:hover .u-button-style {transform: scale(1.03) !important;}

.u-section-1_1 {background-image: linear-gradient(100deg, #1e1e1e, rgba(125,202,240,0));max-height: 60px;max-width: 400px;}
.u-polosa {background-color: #0f0f0f;max-height: 10px;}

/*.u-section-11 {background-image: url("images/taxi.jpg");position: fixed; left: 10px; right: 10px}
.u-section-12 {background-image: url("images/food.jpg");position: fixed; left: 10px; right: 10px}
.u-section-13 {background-image: url("images/track.jpg");position: fixed; left: 10px; right: 10px}
.u-section-14 {background-image: url("images/remont.jpg");position: fixed; left: 10px; right: 10px}
.u-section-15 {background-image: url("images/tyr.jpg");position: fixed; left: 10px; right: 10px}
.u-section-16 {background-image: url("images/hom.jpg");position: fixed; left: 10px; right: 10px}
.u-section-17 {background-image: url("images/vidremont.jpg");position: fixed; left: 10px; right: 10px}
.u-section-18 {background-image: url("images/polagod.jpg");position: fixed; left: 10px; right: 10px}
.u-section-19 {background-image: url("images/advokat.jpg");position: fixed; left: 10px; right: 10px}
.u-section-20 {background-image: url("images/doctor.jpg");position: fixed; left: 10px; right: 10px}
.u-section-21 {background-image: url("images/krasa.jpg");position: fixed; left: 10px; right: 10px}
.u-section-22 {background-image: url("images/svjato.jpg");position: fixed; left: 10px; right: 10px}
.u-section-23 {background-image: url("images/rityal.jpg");position: fixed; left: 10px; right: 10px}
.u-section-24 {background-image: url("images/help.jpg");position: fixed; left: 10px; right: 10px}
.u-section-25 {background-image: url("images/programist.jpg");position: fixed; left: 10px; right: 10px}

.u-sheet-1 {min-height: 477px;}
@media (max-width: 1199px) {.u-sheet-1 {min-height: 400px;}  .u-section-1 .u-text-1 {margin-top: 60px;margin-left: 0;}  }
@media (max-width: 991px) {.u-sheet-1 {min-height: 316px;}  }
@media (max-width: 767px) {.u-sheet-1 {min-height: 237px;}  }
@media (max-width: 575px) {.u-sheet-1 {min-height: 200px;}  .u-section-1 .u-text-1 {width: 255px;margin:127px auto 44px;}  }
*/
.u-section-2 .u-tex-4 {margin: 5px;}.u-section-2 {min-height: 550px;}
.u-section-2 {background-image: linear-gradient(90deg, #080808 0%, #202020 50%, #080808 100%);position: relative;z-index: 2;}
.u-section-2 .u-container-layout-1 {padding: 20px 0 19px;max-width: 350px;max-height: 420px;box-shadow: 20px 20px 30px rgba(0,0,0,2);}
.u-section-2 .u-container-layout-1_1 {padding: 7px 0 19px;max-width: 330px;max-height: 85px;margin-left: 10px; background-image: linear-gradient(180deg, #a2adbc, rgba(125,0,0,0));}
.u-section-2 .sayt {position: absolute; border-radius: 5px; background-color: #080808; top:0px; left: 130px;}
.u-section-2 .u-imageS {border-radius: 3px; border: 5px solid black; width: 330px; height: auto; margin-left: 10px; margin-top: 10px; box-shadow: 5px 2px 30px black;}
.u-section-2 .u-image-2 {height: 70px;width: 320px;margin: 0 auto;}
.u-section-2 .u-image-1 {width: 360px; min-height: 430px;box-shadow: 3px 0px 20px 0 rgba(128,128,128,1);margin: 22px auto 20px 20px;}
.u-section-2 .u-image-3 {width: 360px;min-height: 430px;box-shadow: 3px 0px 20px 0 rgba(128,128,128,1);margin: -452px 383px 20px auto;}
.u-section-2 .u-image-5 {width: 360px;min-height: 430px;box-shadow: 3px 0px 20px 0 rgba(128,128,128,1);margin: -450px 3px 42px auto;}
.u-section-2 .u-group:hover {transition-duration: 0.75s;transform: scale(1.02) ;border-radius: 30px !important;}
.u-section-2 .u-group {background-color: rgba(173,173,179, 0.02);}
.u-section-2 .u-bt-1 {font-size: 1.2rem; margin-top: 10px;margin-left: 20px;padding: 5px 10px;background-image: linear-gradient(0deg, #000000, rgba(125,0,0,0));}
.u-section-2 .u-btn-1 {font-size: 1.2rem;margin-top: 30px;margin-left: 20px;padding: 5px 10px;background-image: linear-gradient(0deg, #000000, rgba(125,0,0,0));}
.u-section-2 .u-btn-2 {font-size: 0.8rem; top: 12px;margin-left: 20px;padding: 5px 10px;background-image: linear-gradient(0deg, #000000, rgba(125,0,0,0));}
.u-section-2 .u-btn-6 {font-size: 1.0rem; top: 25px;margin-left: 20px;padding: 5px 10px 3px 10px;background-image: linear-gradient(0deg, #000000, rgba(125,0,0,0));}
.u-section-2 .opus {left: 20px; top: -5px;}
.u-section-2 .u-sale-image {position: absolute; top: 150px; left: 280px; width: 50px;}
.u-section-2 .u-sale2-image {position: absolute; top: 210px; left: 280px; width: 50px;}
.u-section-2 .u-cinu-image {position: absolute; top: 280px; left: 200px; width: 140px;}
.divi {border-color: #080808; bottom: 5px; height: 5px; width: 100%;}
.divider {border-color: #080808; bottom: -250px;height: 5px;width: 100%;}
.coments {color: #b3976d; bottom: -255px; left: 140px;background-color: #080808;box-shadow: 0px 4px 15px 5px #080808;}
.imst {left: 260px; top: -12px; width: 10px;}
.sms {color: #b3976d; bottom: -295px; left: -18px; width: 20px;margin-left: -15px;}
.sms:first-child {margin-left: 0;}/*перша стоїть рівно*/
.salesms {border: 2px solid #5a5a5a; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: black; color: #F0BC7D; padding: 10px 20px; border-radius: 5px; text-align: center; font-size: 16px; z-index: 1000; min-width: 60%;}
.lik {width: 20px;}
.nlik {width: 20px;}

@media (max-width: 1250px) {  .u-section-2 {min-height: 460px;}
  .u-section-2 .u-image-1 {background-size: 125%;width: 200px;min-height: 345px;margin-top: 21px;margin-left: 0;}
  .u-section-2 .u-container-layout-1 {max-width: 230px;}
  .u-section-2 .u-container-layout-1_1 {max-width: 220px;max-height: 77px;margin-left: 5px;margin-top: -10px;}
  .u-section-2 .sayt {position: absolute; border-radius: 5px; background-color: #080808; top:0px; left: 75px;}
  .u-section-2 .u-imageS {width:210px; height: auto; margin-left: 10px; margin-top: 10px; box-shadow: 5px 2px 30px black;}
  .u-section-2 .u-image-1 {width: 240px;margin-top: 50px;}
  .u-section-2 .u-image-2 {width: 210px;margin-top: -3px;}
  .u-section-2 .u-image-3 {width: 240px;min-height: 345px;margin-top: -365px;margin-right: auto;}
  .u-section-2 .u-image-4 {width: 180px;}
  .u-section-2 .u-image-5 {width: 240px;min-height: 345px;margin-top: -365px;margin-right: 0;}
  .u-section-2 .u-image-6 {width: 180px;}
  .u-section-2 .u-bt-1 {font-size: 0.8rem; margin-top: 0px;}
  .u-section-2 .u-btn-1 {font-size: 0.8rem; margin-top: 27px; left: -10px;}
  .u-section-2 .u-btn-2 {font-size: 0.7rem; top: 7px; left: -10px;}
  .u-section-2 .u-btn-6 {font-size: 0.8rem; top: 17px; left: -10px;}
  .u-section-2 .u-text-4 {width: auto;margin-top: 15px;margin-left: 0;}
  .u-section-2 .u-text-5 {width: auto;margin-left: 0;}
  .u-section-2 .opus {left: 10px; top: 0px;}
  .u-section-2 .u-sale-image {position: absolute; top: 135px; left: 173px; width: 50px;}
  .u-section-2 .u-sale2-image {position: absolute; top: 175px; left: 183px; width: 30px;}
  .u-section-2 .u-cinu-image {position: absolute; top: 240px; left: 140px; width: 90px;}
  .divider {border-color: #080808; bottom: -190px;height: 5px;width: 100%;}
  .coments {color: #b3976d; bottom: -190px; left: 90px;}
  .imst {left: 150px;}
  .sms {bottom: -233px; left: -25px;margin-left: -12px;}
  .sms:first-child {margin-left: 0;}/*перша стоїть рівно*/
  }
@media (max-width: 800px) {
  .u-section-2 .u-container-layout-1 {padding: 20px 0 19px;max-width: 305px;max-height: 385px;}
   .u-section-2 .u-container-layout-1_1 {max-width: 270px;max-height: 83px;margin-top: 0px;margin-left: 13px;}
   .u-section-2 .sayt {position: absolute; border-radius: 5px; background-color: #080808; top:0px; left: 35%;}
   .u-section-2 .u-imageS {width:285px; height: auto; margin-left: 10px; margin-top: 10px; box-shadow: 5px 2px 30px black;}
  .u-section-2 .u-image-2 {width: 263px;margin-top: 0;}
  .u-section-2 .u-bt-1 {font-size: 1.0rem; margin-top: 0px;}
  .u-section-2 .u-btn-1 {font-size: 0.87rem; margin-top: 30px; left: -5px;}
  .u-section-2 .u-btn-2 {font-size: 0.7rem; top: 5px; left: -5px;}
  .u-section-2 .u-btn-6 {font-size: 1.0rem; top: 12px; left: -5px;}
  .u-section-2 .u-text-4 {width: auto;margin-left: 11px;}
  .u-section-2 .u-text-5 {width: auto;margin-left: 11px;}
  .u-section-2 .u-image-1 {margin-top: 30px; width: 305px;  height: 390px;margin-left: auto;}
  .u-section-2 .u-image-3 {margin-top: 40px; width: 305px; height: 390px;margin-right: auto;}
  .u-section-2 .u-image-4 {width: 280px;}
  .u-section-2 .u-image-5 {margin-top: 40px;width: 305px; height: 390px;margin-right: auto;}
  .u-section-2 .u-image-6 {width: 280px;}
  .u-section-2 .opus {left: 15px; top:-2px;}
  .u-section-2 .u-sale-image {position: absolute; top: 150px; left: 230px; width: 50px;}
  .u-section-2 .u-sale2-image {position: absolute; top: 200px; left: 240px; width: 40px;}
  .u-section-2 .u-cinu-image {position: absolute; top: 258px; left: 183px; width: 110px;}
  .divider {border-color: #080808; bottom: -215px;height: 5px;width: 100%;}
  .coments {color: #b3976d; bottom: -215px; left: 115px;}
  .imst {left: 200px;}
  .sms {bottom: -257px;left: -25px;margin-left: -15px;}
  .sms:first-child {margin-left: 0;}//перша стоїть рівно
  .salesms {border: 2px solid #5a5a5a; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: black; color: #F0BC7D; padding: 10px 20px; border-radius: 5px; text-align: center; font-size: 16px; z-index: 1000; min-width: 90%;}}

  .u-section-3 {max-height: 300px;background-image: linear-gradient(90deg, #080808 0%, #202020 50%, #080808 100%);position: relative;z-index: 2;}
  .u-section-3 .u-container-layout-1 {padding: 20px 0 19px;max-width: 350px;max-height: 240px;box-shadow: 10px 10px 30px rgba(0,0,0,2);background-image: url("images/vs-.svg");background-position: 100% 100%;}
  .u-section-3 .u-image-2 {height: 60px;width: 320px;margin: 0 auto;}
  .u-section-3 .u-image-1 {width: 360px; min-height: 250px; box-shadow: -2px -2px 8px 0 rgba(128,128,128,1); background-position: 53.7% 100%; background-size: auto 125%;margin: 0px 0px 20px 0px;}
  .u-section-3 .u-image-3 {width: 360px;min-height: 250px;box-shadow: -2px -2px 8px 0 rgba(128,128,128,1);background-position: 56.49% 0%;background-size: auto 160%;margin: -272px 383px 20px auto;}
  .u-section-3 .u-image-5 {width: 360px;min-height: 250px;height: auto;box-shadow: -2px -2px 8px 0 rgba(128,128,128,1);background-position: 98.27% 50%;margin: -270px 3px 42px auto;}
  .u-section-3 .u-btn-6 {font-size: 1.6rem;margin: 20px auto 0 20px;padding: 5px 10px 3px 10px;background-image: linear-gradient(0deg, #000000, rgba(125,0,0,0));}
  .u-section-3 .opus {left: 20px; top: 10px;}
  @media (max-width: 1250px) {
    .u-section-3 .u-container-layout-1 {max-width: 230px;}
    .u-section-3 .u-image-2 {width: 210px;}
    .u-section-3 .u-image-1 {width: 240px;margin: 20px 0px;}
    .u-section-3 .u-image-3 {width: 240px;;margin-top: -270px;margin-right: auto;}
    .u-section-3 .u-image-5 {width: 240px;margin-top: -270px;}
    .u-section-3 .u-btn-6 {font-size: 1rem;}
    .u-section-3 .u-text-6 {margin-left: 5px;}}
  @media (max-width: 800px) {
    .u-section-3 {max-height: 900px;}
    .u-section-3 .u-container-layout-1 {max-width: 293px;height: 380px;transition-duration: 0.75s;transform: scale(1.02) ;border-radius: 30px !important;}
     .u-section-3 .u-image-2 {width: 263px;margin-top: 0;}
    .u-section-3 .u-btn-6 {font-size: 1.3rem;margin-left: 33px;padding: 5px 10px 3px 10px;}
    .u-section-3 .u-image-1 {width: 305px;height: 250px;margin: auto auto;}
    .u-section-3 .u-image-3 {margin-top: 40px; width: 305px;height: 250px;margin-right: auto;}
    .u-section-3 .u-image-5 {margin-top: 40px;width: 305px;height: 250px;margin-right: auto;}
    .u-section-3 .u-text-6 {margin-left: 15px;}}


.vidgyku {background-color: #0f0f0f;}
.u-text-tex {background-color: #0f0f0f;position: relative;z-index: 2;}