img {
     max-width: 100%;
     height: auto;
}

li a {
     color: #060606;
     border-bottom: 1px solid #060606;
}

.content-wrapper {
     padding-bottom: 48px;
}

.flex-row {
     display: flex;
     flex-direction: row;
     align-items: center;
}

.flex-column {
     display: flex;
     flex-direction: column;
}

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

.flex-between {
     justify-content: space-between;
}

.flex-start {
     justify-content: flex-start;
}

.flex-end {
     justify-content: flex-end;
}

.section {
     padding: 48px 0;
}

/* Main content styles */
.main-content {
     padding: 34px 0;
}

.hero-title {
     font-size: 48px;
     font-family: Dihjauti;
     font-weight: 700;
     line-height: 77px;
     text-align: center;
     color: #2d030b;
     margin-bottom: 35px !important;
     margin-top: 48px;
}

.content-grid {
     display: flex;
     gap: 24px;
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 16px;
}

.sidebar {
     width: 270px;
     flex-shrink: 0;
     background-color: #fbfbfb;
     border-radius: 4px;
     padding: 16px;
     box-shadow: 0px 2px 4px #00000019;
     height: fit-content;
}

.sidebar-title {
     font-size: 36px;
     font-family: Dihjauti;
     font-weight: 700;
     line-height: 39px;
     color: #2D030B;
     margin-bottom: 16px;
}

.content-section .section-title {
     font-size: 24px !important;
}

.sidebar-menu {
     list-style: none;
}

.sidebar-menu li {
     margin-bottom: 8px;
}

.sidebar-menu a {
     font-size: 20px;
     font-family: Dihjauti;
     font-weight: 700;
     line-height: 32px;
     color: #2d030b;
     border: none;
     text-decoration: none;
}

.sidebar-menu a.active {
     color: #780d00;
}

.main-content-area {
     flex: 1;
     background-color: #fbfbfb;
     border-radius: 4px;
     padding: 24px;
     box-shadow: 0px 2px 4px #00000019;
}

.content-section {
     margin-bottom: 24px;
}

.content-section:last-child {
     margin-bottom: 0;
}

.section-intro {
     font-size: 18px;
     font-family: 'Gill Sans Nova';
     font-weight: 400;
     line-height: 120%;
     color: #060606;
     margin-bottom: 24px;
}

.section-title {
     font-size: 24px;
     font-family: Dihjauti;
     font-weight: 700;
     line-height: 120%;
     color: #2d030b;
     margin-bottom: 12px;
}

.section-text {
     font-size: 18px;
     font-family: 'Gill Sans Nova';
     font-weight: 400;
     line-height: 150%;
     color: #060606;
     margin-bottom: 12px;
}

.section-text-single {
     font-size: 18px;
     font-family: 'Gill Sans Nova';
     font-weight: 400;
     line-height: 150%;
     color: #060606;
}

.help-list {
     margin-top: 10px;
     margin-bottom: 10px;
}

.help-list li {
     font-size: 18px;
     font-family: 'Gill Sans Nova';
     font-weight: 400;
     line-height: 150%;
     color: #060606;
     margin-bottom: 8px;
     list-style: none;
     position: relative;
     padding-left: 16px;
}

.help-list li::before {
     content: '';
     position: absolute;
     left: 4px;
     top: 10px;
     width: 6px;
     height: 6px;
     background-color: #780d00;
     border-radius: 50%;
}

/* Statistics section */
.stats-section {
     background-color: #f2f2f2;
     padding: 48px 0;
}

/* Контейнер stats-блока — синхронизируем padding с .content-grid выше,
   чтобы карточки stats не выходили за рамки контента над ними. */
.stats-container {
     padding: 0 16px;
}

.stats-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     margin-bottom: 32px;
}

.stats-main {
     display: flex;
     gap: 18px;
}

.stat-card {
     border-radius: 8px;
     padding: 28px;
     background-size: cover;
     background-position: center;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;       /* по умолчанию текст ВНИЗУ (для маленьких карточек) */
     min-height: 480px;
}

/* Только большая первая карточка имеет текст СВЕРХУ — как в Figma */
.stat-card-large {
     flex: 1;
     background-image: url('/bitrix/templates/wines_template/images/img_photo.png');
     justify-content: flex-start;
}

.stat-card-small {
     width: 32%;
     background: linear-gradient(180deg, #00000033 0%, #000000 100%);
     background-image: url('/bitrix/templates/wines_template/images/stat-card-small.jpg');
     background-size: cover;
}

.stats-row {
     display: flex;
     gap: 20px;
     justify-content: space-between;
}

.stats-row .stat-card {
     flex: 1 1 0;                /* было width: 410px (фикс) → 3 карточки × 410 = 1230px,
                                     не помещалось в контейнер 1108. Теперь равномерно
                                     делят доступную ширину. */
     min-width: 0;
     background: linear-gradient(180deg, #00000033 0%, #000000 100%);
     background-size: cover;
}

.stats-row .stat-card:nth-child(1) {
     background-image: url('/bitrix/templates/wines_template/images/about-us-nth-child-1.jpg');
}

.stats-row .stat-card:nth-child(2) {
     background-image: url('/bitrix/templates/wines_template/images/about-us-nth-child-2.jpg');
}

.stats-row .stat-card:nth-child(3) {
     background-image: url('/bitrix/templates/wines_template/images/img_photo_480x366.png');
}

.stat-number {
     font-size: 64px;
     font-family: Dihjauti;
     font-weight: 700;
     line-height: 103px;
     color: #fbfbfb;
     margin-bottom: -20px;
}

.stat-text {
     font-size: 18px;
     font-family: Dihjauti;
     font-weight: 700;
     line-height: 21px;
     color: #fbfbfb;
}

.video-section {
     /* background-image: url('/bitrix/templates/wines_template/images/img_photo.png'); */
     background-size: cover;
     background-position: center;
     /* padding: 14px; */
     border-radius: 8px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
}

.video-controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     position: absolute;
     bottom: 14px;
     left: 14px;
     right: 14px;
}

.play-button {
     width: 16px;
     height: 20px;
}

.video-progress {
     flex: 1;
     margin: 0 20px;
}

.video-icons {
     display: flex;
     gap: 20px;
}

.video-icon {
     width: 20px;
     height: 20px;
}


/* Responsive media queries */
@media (max-width: 639px) {
     .stats-section{
               padding: 32px 0;
     }
     
     .content-wrapper{
          padding-bottom: 32px;
     }

     .hero-title {
          font-size: 32px;
          line-height: 38px;
          padding: 0 16px;
          margin-bottom: 24px !important;
          margin-top: 24px;
     }

     .content-grid {
          flex-direction: column;
          padding: 0 16px;
     }

     .sidebar {
          width: 100%;
          margin-bottom: 0px;
          padding: 0;
          background-color: transparent;
          box-shadow: none;
     }

     .sidebar-title {
          display: none;
     }

     .sidebar-menu {
          display: flex;
          justify-content: flex-start;
          gap: 0px;
          padding: 0;
          margin-bottom: 24px;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -ms-overflow-style: none;
     }

     .sidebar-menu::-webkit-scrollbar {
          display: none;
     }

     .sidebar-menu li {
          margin-bottom: 0;
          flex-shrink: 0;
     }

     .sidebar-menu a {
          display: block;
          text-align: center;
          font-size: 14px;
          font-weight: 700;
          line-height: 16px;
          padding: 12px 16px;
          color: #2D030B;
          position: relative;
          white-space: nowrap;
     }

     .sidebar-menu a.active {
          color: #2d030b;
          font-weight: 700;
     }

     .sidebar-menu a.active::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: #2d030b;
     }

     .main-content-area {
          padding: 16px;
     }

     .section-intro {
          font-size: 16px;
          line-height: 19px;
          margin-bottom: 24px;
     }

     .section-title {
          font-size: 20px !important;
          line-height: 23px;
          margin-bottom: 12px;
     }

     .section-text,
     .section-text-single {
          font-size: 16px;
          line-height: 19px;
     }

     .help-list li {
          font-size: 16px;
          line-height: 19px;
     }

     .content-section {
          margin-bottom: 32px;
     }

     .stats-main {
          flex-direction: column;
     }

     .stat-card-small {
          width: 100%;
     }

     .stats-row {
          flex-direction: column;
     }

     .stats-row .stat-card {
          width: 100%;
     }

     .stat-number {
          font-size: 48px;
          line-height: 72px;
     }

}

@media (min-width: 640px) and (max-width: 767px) {


     .hero-title {
          font-size: 40px;
          line-height: 60px;
     }

     .stats-main {
          flex-direction: column;
     }

     .stat-card-small {
          width: 100%;
     }

     .stats-row {
          flex-wrap: wrap;
     }

     .stats-row .stat-card {
          width: calc(50% - 10px);
     }
}

@media (min-width: 768px) and (max-width: 1023px) {

     .content-grid {
          padding: 0 32px;
     }
}

@media (min-width: 1024px) {
     .stats-main {
          flex-direction: row;
     }

     .stats-row {
          flex-direction: row;
     }
}