*,

*::before,

*::after {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

  list-style-type: none;

  text-decoration: none;

  color: inherit;

}



body {

  color: #000;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 18px;
    background: #fff;
}



.container {

  max-width: 900px;

  margin: 0 auto;

  padding: 0 20px;

}



.header {

  display: flex;

  justify-content: center;

  color: #000;

  padding: 1rem;

  margin: 0 auto;

}



.core-title {

  font-size: 46px;
    color: #000;
  text-transform: uppercase;

  margin-bottom: 20px;



  margin-top: 20px;

  max-width: 800px;

  text-align: center;

}



.div-video {

  display: flex;

  justify-content: center;

  width: 100%;



  padding: 1rem;

}



.video {

  max-width: 900px;

  width: 100%;

  cursor: pointer;

}



.full-video {

  z-index: 1;

  position: fixed;

  top: 0;

  bottom: -4%;

  left: 0;

  right: 0;

  width: 100%;

  max-width: none !important;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgba(1, 1, 1, 0.7);

}



.close {

  position: absolute;

  z-index: 1;

  top: 20px;

  right: 40px;

}



.close div {

  font-size: 52px;

  color: white;

  cursor: pointer;

}



.close div:hover {

  font-size: 52px;

  color: rgba(255, 255, 255, 0.3);

  cursor: pointer;

}



.relative {

  position: relative;

}



.notification {

  position: absolute;

  top: 0;

  bottom: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 70%;

}



@media (max-width: 500px) {

  .notification {

    bottom: 62px;

    width: 85%;

  }

}



.notification div {

  background-color: rgba(49, 202, 79, 0.7);

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 65%;

  padding: 10px;

  border-radius: 10px;

  color: white;

  font-size: 18px;

  border: 1px solid white;

}



.notification img {

  width: 70px;

}



@media (max-width: 390px) {

  .notification div {

    width: 100%;

  }

}



@keyframes marching-ants {

  0% {

    background-position: 0 0, 10px 100%, 0 10px, 100% 0;

  }



  100% {

    background-position: 10px 0, 0 100%, 0 0, 100% 10px;

  }

}



.form {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 10px;

  width: 100%;

  max-width: 600px;

  margin: 0 auto;

  background-image: linear-gradient(90deg, #3580ed 50%, transparent 50%),

    linear-gradient(90deg, #3580ed 50%, transparent 50%),

    linear-gradient(0, #3580ed 50%, transparent 50%),

    linear-gradient(0, #3580ed 50%, transparent 50%);

  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;

  background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;

  animation: marching-ants 400ms infinite linear;

  gap: 10px;

}



.form-title {

  margin-top: 10px;

  margin-bottom: 5px;

}



.form img {

  margin: 20px 0;

  width: 100%;

  max-width: 170px;

}



.form-price {

  font-size: 24px;

  margin-bottom: 20px;

}



.form-text {

  margin-top: 10px;

  margin-bottom: 30px;

  font-size: 24px;

  font-weight: 700;

  color: rgb(113, 113, 113);

}



input {

  font-size: 20px;

  padding: 8px 10px;

  border: 1px solid rgba(53, 130, 237, 0.5);

  margin-bottom: 20px;

  width: 50%;

  outline: none;

  min-width: 220px;

}



.btn-submit {

  background-color: #3580ed;

  color: white;

  border: none;

  width: 50%;

  padding: 15px 20px;

  margin-bottom: 30px;

  margin-top: 10px;

  cursor: pointer;

  transition: 0.4s ease;

  font-size: 18px;

}



@media (max-width: 370px) {

  .btn-submit {

    font-size: 14px;

  }

}



@media (hover: hover) {

  .btn-submit:hover {

    transform: scale(0.9);

    transition: 0.4s ease;

  }

}



.banner-chanels {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  padding: 10px;

  margin-bottom: 10px;

}



.banner-chanels p {

  font-size: 28px;

  font-weight: 700;

  margin-bottom: 20px;

}



.banner-chanels div {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

}



.banner-chanels img {

  width: 100%;

  max-width: 110px;

  /* border-radius: 50%; */



}



.banner-chanels img:last-child {

  border-radius: 1000px;

}



.all-coments {

  border: 1px solid rgb(187, 187, 187);

}



.text-all-coments {

  padding: 10px;

  font-weight: 700;

  font-size: 16px;

}



.place-coment {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.coment {

  margin-top: 10px;

  display: flex;

  width: 95%;

  margin-bottom: 20px;

  opacity: 1;

  transition: 0.4s ease;

  transform: translateY(0);

}



.ava-coment {

  width: 48px;

  height: 48px;

  border-radius: 50px;

  margin-right: 5px;

  object-fit: cover;

}



.name-coment {

  color: #365899;

  font-size: 16px;

  font-weight: 700;

  padding: 5px;

  padding-left: 50px;

}



.info-coment {

  width: 90%;

}



.text-coment {

  font-size: 16px;

  padding: 10px 20px;

  border-radius: 25px;

  width: 100%;

  background-color: #1e2339;

}



.text-coment a {

  color: #4b84b7;

  font-weight: 700;

}



.text-coment a:hover {

  color: #b0493b;

}



.all-buttons-coment {

  padding: 10px;

  padding-top: 0;

  padding-bottom: 0;

  font-size: 16px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-left: 50px;

}



.btn-react-coment {

  display: flex;

  align-items: center;

  font-size: 13px;

  gap: 10px;

  color: #365899;

}



.btn-react-coment p:last-child {

  color: rgb(105, 105, 105);

}



.react-coment {

  cursor: pointer;

}



.react-coment:hover {

  text-decoration: underline;

}



.btn-like-coment {

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow: 0 0 3px 1px rgba(1, 1, 1, 0.2);

  border-radius: 100px;

  padding: 1px 1px;

}



.btn-like-coment p {

  color: #3580ed;

  margin-right: 5px;

  margin-left: 0;

}



@media (max-width: 900px) {

  .core-title {

    font-size: 38px;

  }



  .banner-chanels img {

    width: 90px;

  }



  .banner-chanels p {

    font-size: 20px;

    text-align: center;

  }



  .text-coment {

    font-size: 16px;

    padding: 20px 10px;

    border-radius: 30px;

    background-color: #eaebef;

    width: 100%;

  }

}



@media (max-width: 500px) {

  .core-title {

    font-size: 28px;

  }



  .banner-chanels img {

    width: 50px;

  }

}



@media (max-width: 390px) {

  .all-buttons-coment {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

  }

}



.animate-show {

  opacity: 0;

  transition: 0.4s ease;

  transform: translateY(20px);

}



.input-container {

  position: relative;

  width: 50%;

  min-width: 220px;

}



.input-container input {

  width: 100%;

}



.input-container input[name="phone"] {

  padding-left: 35px;

  /* Добавляем отступ слева для изображения */

}



.input-container img {

  width: 25px;

  position: absolute;

  left: 5px;

  top: -0px;

  transform: translateY(-50%);

}



.div__popup-form {

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  background-color: rgba(1, 1, 1, 0.8);



  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 1000;

  cursor: pointer;

}



@keyframes animPopupForm {

  0% {

    transform: translateY(-500%);

  }



  100% {

    transform: translateY(0%);

  }

}



.popup-form {

  background-color: white;

  overflow: auto;

  width: 90%;

  max-width: 700px;

  max-height: 90%;

  cursor: default;

  padding: 10px;

  border-radius: 10px;

  animation: animPopupForm 0.5s ease forwards;

}



.popup-form .form-title,

.popup-form .img-form_cert,

.popup-form .footer-title_form,

.popup-form .termina-form,

.popup-form .timer,

.popup-form .form-text {

  display: none;

}



.popup-form .btn-submit {

  margin: 0;

}



.popup-form .prod-form-img {

  margin-top: 0px;

}



.popup-form .div-img-form_cert {

  margin: 0;

  display: none;

}



.popup-form__btn-close {

  position: absolute;

  right: 2%;

  top: 3%;

  z-index: 1;

  font-size: 64px;

  cursor: pointer;

  color: rgb(172, 172, 172);

  transition: 0.3s ease;

  line-height: 1px;

}



.popup-form__btn-close:hover {

  transform: scale(0.9);

  transition: 0.3s ease;

}



.section-form {

  margin: 20px;

}



.div-section-form {

  margin: 20px auto;

  width: 100%;

}



/* .prod-form-img {

  max-height: 240px;

} */



.desc-comment {

  text-align: start;

  width: 100%;

  padding: 0px 5px 10px 25px;

  color: rgb(66, 103, 178);

  font-weight: 700;

  font-size: 16px;

}



.none {

  display: none;

}







@media (max-width: 375px) {

  .wrap-prod-mobile {

    display: flex;

    justify-content: center;

    align-items: center;

  }



  .prod-form-img-2 {

    width: 75% !important;

  }

}



.tv_icons_img {

  width: 110px;

  height: 110px;

  background-image: url('../assets/chanel4.jpg');

  background-size: 100% 100%;

  background-repeat: no-repeat;

  border-radius: 50%;

}



@media (max-width:500px) {

  .tv_icons_img {

    width: 50px;

    height: 50px;



  }

}



.comm-img {

  max-width: 50%;

  margin: 10px 0 0;

}





.formFb__steps {

  display: flex;

  width: 100%;

  max-width: 300px;

  justify-content: space-between;

  margin-bottom: 1em;

}



.formFb__step {

  width: 50px;

  min-width: 50px;

  max-width: 50px;

  height: 50px;

  position: relative;

}



.formFb__step--line {

  flex-grow: 1;

  padding: .5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.formFb__step--line:after {

  position: absolute;

  width: 80%;

  content: '';

  height: 1px;

  top: 50%;

  transform: translateY(-50%);

  left: 10%;

  border-bottom: 2px dashed #3580ed;

}



.formFb__step img {

  width: 100%;

  max-width: 100%;

}



.formFb__step img {

  margin: 0 !important;

}