.bg-planning {
  background-color: #FD6379;
}

.bg-choice {
  background-color: #42D759;
}

.bg-life-hacks {
  background-color: #D2F235;
}

.bg-gift {
  background-color: #81CDF1;
}

.bg-midnight-violet {
  background-color: #060014;
}

.bg-dark-grey {
  background-color: #222122;
}

.text-grayish-blue {
  color: #7D7A84;
}

.text-neutral-grey {
  color: #767676;
} 

.text-blue {
  color: #0C81FF;
}

.text-midnight-violet {
  color: #060014;
}

.text-silver-grey {
  color: #A0A0A0;
}

.font-50 {
  font-size: 50px;
}

.font-28 {
  font-size: 28px;
}

.font-18 {
  font-size: 18px;
}

.font-16 {
  font-size: 16px;
}

.font-12 {
  font-size: 12px;
}

.font-10 {
  font-size: 10px;
}

.fw-700 {
  font-weight: 700;
}

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

.fw-400 {
  font-weight: 400;
}

.lh-160 {
  line-height: 160%;
}

.lh-150 {
  line-height: 150%;
}

.lh-140 {
  line-height: 140%;
}

.lh-130 {
  line-height: 130%;
}

.lh-120 {
  line-height: 120%;
}

.mt-100 {
  margin-top: 100px;
}

.mb-100 {
  margin-bottom: 100px;
}

.p-60 {
  padding: 60px;
}

.py-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.pe-60 {
  padding-right: 60px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.p-32 {
  padding: 32px;
}

.py-12 {
  padding: 12px 0;
}

.br-16 {
  border-radius: 16px;
}

.br-10 {
  border-radius: 10px;
}

.br-8 {
  border-radius: 8px;
}

.br-4 {
  border-radius: 4px;
}

.opacity-80 {
  opacity: .8;
}

.border-grey {
  border: 1px solid #e0e0e0;
}

.link-with-arrow {
  white-space: nowrap;
}

.blog-0 {
  background: 
    url('/images/blog-top-left.png') left bottom no-repeat,
    url('/images/blog-top-right.png') right bottom no-repeat;
  background-size: auto 100%;
  height: 400px;
  background-color: #060014;
}

.sort-select {
  border: none;
  outline: none;
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('/images/blog-sort-arrow.svg') no-repeat right 10px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

.blog-all, .blog-element-all {
  width: 430px;
  height: 60px;
}

.blog-popular-images {
  max-width: 350px;
  width: 100%;
  height: 250px;
  object-fit: cover;
}


.blog-popular-slider {
  margin: 0 -10px;
}

.blog-popular-slider .slick-slide {
  margin: 0 10px;
  padding: 0;
}

.blog-popular-slider .slick-list {
  margin: 0 -10px;
  overflow: hidden;
}

.blog-popular-slider .slick-track {
  display: flex;
  align-items: stretch;
}

/* Стили для точек */
.blog-popular-slider .slick-dots {
  text-align: center;
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.blog-popular-slider .slick-dots li {
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  list-style: none;
}

.blog-popular-slider .slick-dots li button {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: #ffffff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
}


/*****************/

.blog-popular-slider .slick-arrow {
  position: absolute;
  top: 150px;
  height: 64px;
  width: 32px;
  background: rgba(24, 24, 24, 0.5);
  z-index: 2;
  text-indent: -9999px;
  background-repeat: no-repeat;
}
.blog-popular-slider .slick-arrow:active {
  opacity: 0.8;
}
.blog-popular-slider .slick-prev {
  right: 12px;
  left: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 6.26795C-0.333332 7.03775 -0.333334 8.96225 0.999999 9.73205L10 14.9282C11.3333 15.698 13 14.7358 13 13.1962L13 2.80385C13 1.26425 11.3333 0.301996 10 1.0718L1 6.26795Z' fill='white' fill-opacity='0.8'/%3e%3c/svg%3e ");
  background-position: 8px center;
  border-radius: 32px 0 0 32px;
  border-top: 5px solid rgba(255, 255, 255, 0.25);
  border-bottom: 5px solid rgba(255, 255, 255, 0.25);
  border-left: 5px solid rgba(255, 255, 255, 0.25);
}
.blog-popular-slider .slick-next {
  right: -20px;
  left: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 6.26795C13.3333 7.03775 13.3333 8.96225 12 9.73205L3 14.9282C1.66667 15.698 0 14.7358 0 13.1962L0 2.80385C0 1.26425 1.66667 0.301996 3 1.0718L12 6.26795Z' fill='white' fill-opacity='0.8'/%3e%3c/svg%3e ");
  background-position: 6px center;
  border-radius: 0 32px 32px 0;
  border-top: 5px solid rgba(255, 255, 255, 0.25);
  border-bottom: 5px solid rgba(255, 255, 255, 0.25);
  border-right: 5px solid rgba(255, 255, 255, 0.25);
}
.blog-popular-slider .slick-disabled {
  opacity: 0.3;
  cursor: none;
}

/*.blog-popular-slider .slick-arrow {
  position: absolute;
  top: 120px;
  height: 64px;
  width: 32px;
  background: var(--Gradient-Overlay-Bg-Blur-Fill, rgba(24, 24, 24, 0.5));
  z-index: 2;
  text-indent: -9999px;
  background-repeat: no-repeat;
}
.blog-popular-slider .slick-arrow:active {
  opacity: 0.7;
}
.blog-popular-slider .slick-prev {
  right: 11px;
  left: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 6.26795C-0.333332 7.03775 -0.333334 8.96225 0.999999 9.73205L10 14.9282C11.3333 15.698 13 14.7358 13 13.1962L13 2.80385C13 1.26425 11.3333 0.301996 10 1.0718L1 6.26795Z' fill='white' fill-opacity='0.8'/%3e%3c/svg%3e ");
  background-position: 8px center;
  border-radius: 32px 0 0 32px;
  border-top: 5px solid rgba(255, 255, 255, 0.5);
  border-bottom: 5px solid rgba(255, 255, 255, 0.25);
  border-left: 5px solid rgba(255, 255, 255, 0.25);
}
.blog-popular-slider .slick-next {
  right: -20px;
  left: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='16' viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 6.26795C13.3333 7.03775 13.3333 8.96225 12 9.73205L3 14.9282C1.66667 15.698 0 14.7358 0 13.1962L0 2.80385C0 1.26425 1.66667 0.301996 3 1.0718L12 6.26795Z' fill='white' fill-opacity='0.8'/%3e%3c/svg%3e ");
  background-position: 6px center;
  border-radius: 0 32px 32px 0;
  border-top: 5px solid rgba(255, 255, 255, 0.25);
  border-bottom: 5px solid rgba(255, 255, 255, 0.25);
  border-right: 5px solid rgba(255, 255, 255, 0.25);
}
.blog-popular-slider .slick-disabled {
  opacity: 0.3;
  cursor: none;
}
*/
/****************/
.form-group {
  position: relative;
}

.input-field {
  width: 100%;
  padding: 28px 12px 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  height: 58px;
}

.label {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Эффект плавающей метки при фокусе */
.input-field:focus + .label,
.input-field:not(:placeholder-shown) + .label {
  top: 5px;
  left: 5px;
  padding: 0 5px;
}

.blog-subscribe button {
  height: 58px;
}

.blog-subscribe-image {
  background-image: url(/images/blog-subscribe.png);
  max-width: 370px;
  margin-left: 103px;
  width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
}

.blog-subscribe-input {
  width: 100%;
} 

.blog-subscribe-button {
  width: 25%;
}

.blog-description-link.active  {
  background-color: #060014;
  color: #ffffff !important;
}

.blog-detailed-link.active {
  background-color: #060014;
  color: #ffffff !important;
}


/*
.blog-popular-prev {
  background-image: url(/images/arrow-left-blog.svg);
  background-size: 20px 20px;
  background-position: center;
  object-fit: cover;
  border-radius: 50px;
  border: none;
  background-repeat: no-repeat;
  background-color: rgb(255, 0, 0);
  width: 36px;
  height: 36px;
  margin-right: 8px;
}

.blog-popular-next {
  background-image: url(/images/arrow-right-blog.svg);
  background-size: 20px 20px;
  background-position: center;
  object-fit: cover;
  border-radius: 50px;
  border: none;
  background-repeat: no-repeat;
  background-color: rgb(255, 0, 0);
  width: 36px;
  height: 36px;
}
*/
@media (max-width: 1200px) {
  .blog-0 {
    background-image: url('/images/blog-top-right.png');
    background-position: right bottom;
  }
}

@media (max-width: 991px) {
  .font-50 {
      font-size: 40px !important;
  }
}

@media (max-width: 767px) {
  .font-50 {
    font-size: 32px !important;
}

  .blog-subscribe-button {
    width: 100%;
  }
  
  .blog-0 {
    height: 260px;
    background-image: url('/images/blog-top-right.png');
    background-position: right center;
    background-repeat: no-repeat;
  }
  

}

@media (max-width: 575px) {

  .font-50 {
    font-size: 24px !important;
}

  .p-60 {
    padding: 16px;
  }
  
}

@media (max-width: 400px) {
  .blog-0 {
    height: 170px;
  }

}