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;
}

/* Header styles */
.header {
     background-color: #fbfbfb;
     width: 100%;
}

.header-top {
     background-color: #fbfbfb;
     padding: 8px 0;
     border-bottom: 1px solid #eceaea;
}

.header-top .container {
     padding: 0 150px;
}

.header-contact {
     font-size: 16px;
     font-weight: 700;
     line-height: 26px;
     color: #210201;
}

.header-main {
     background-color: #2d030b;
     padding: 32px 0;
}

.header-logo {
     width: 294px;
     height: 66px;
}

.header-actions {
     display: flex;
     gap: 60px;
     align-items: center;
}

.header-action {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     color: #fbfbfb;
     text-decoration: none;
}

.header-action img {
     width: 24px;
     height: 24px;
}

.header-action-text {
     font-size: 16px;
     font-weight: 700;
     line-height: 16px;
     text-align: center;
}

.cart-badge {
     position: relative;
}

.cart-count {
     position: absolute;
     top: -6px;
     right: -6px;
     background-color: #fbfbfb;
     color: #060606;
     font-size: 12px;
     font-weight: 600;
     line-height: 11px;
     padding: 2px 6px;
     border-radius: 6px;
     min-width: 14px;
     text-align: center;
}

.header-nav {
     background-color: #fbfbfb;
     padding: 16px 0;
     border-bottom: 1px solid #eceaea;
}

.nav-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 80%;
     margin: 0 auto;
}

.menu-button {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 6px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 700;
     line-height: 23px;
     text-transform: uppercase;
}

.dropdown-menu {
     display: none;
     background-color: #fbfbfb;
     border: 1px solid #eceaea;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     min-width: 200px;
     max-width: 900px;
     height: 220px;
}

.menu__list {
     display: flex;
     list-style: none;
     padding: 32px;
     margin: 0;
     gap: 24px;
}

.menu__title {
     font-weight: 700;
     font-size: 18px;
     color: #2D030B;
     margin-bottom: 16px;
}

.menu__link {
     text-decoration: none;
     color: #2D030B;
     font-size: 16px;
     font-weight: 500;
     display: block;
     margin-bottom: 8px;
}


.search-container {
     position: relative;
     width: 46%;
}

.search-input {
     width: 100%;
     padding: 10px 36px 10px 16px;
     background-color: #eceaea;
     border-radius: 5px;
     font-size: 16px;
     font-weight: 700;
     color: #978080;
}

.search-icon {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     width: 20px;
     height: 20px;
}

.show-all-button {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 6px 24px;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 700;
     line-height: 23px;
     text-transform: uppercase;
}

/* 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: 24%;
     background-color: #fbfbfb;
     border-radius: 4px;
     padding: 6px 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: 22px;
     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: 21px;
     color: #060606;
     margin-bottom: 47px;
}

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

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

.section-text-single {
     font-size: 18px;
     font-family: 'Gill Sans Nova';
     font-weight: 400;
     line-height: 16px;
     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: 16px;
     color: #060606;
     margin-bottom: 6px;
     list-style: none;
     position: relative;
     padding-left: 12px;
}

.help-list li::before {
     content: '•';
     position: absolute;
     left: 0;
     font-size: 12px;
     line-height: 16px;
}

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


.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;
}

.stat-card-large {
     flex: 1;
     background-image: url('/bitrix/templates/wines_template/images/img_photo.png');
}

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

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

.stats-row .stat-card {
     width: 410px;
     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/img_photo_480x366.png');
}

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

.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;
}

/* Footer styles */
.footer {
     background-color: #2d030b;
     color: #fbfbfb;
     padding: 30px 0;
}

.footer-logo {
     width: 186px;
     height: 100px;
     margin: 0 auto 40px;
     display: block;
}

.footer-content {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 16px;
}

.footer-main {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     margin-bottom: 40px;
}

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

.footer-section-title {
     font-size: 20px;
     font-weight: 700;
     line-height: 32px;
     color: #cda27a;
     margin-bottom: 12px;
}

.footer-link {
     color: #fbfbfb;
     text-decoration: none;
     font-size: 18px;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
     line-height: 16px;
     margin-bottom: 8px;
     transition: color 0.3s ease;
}

.footer-link:hover {
     color: #cda27a;
}

.footer-contact {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
}

.footer-contact img {
     width: 22px;
     height: 22px;
}

.footer-contact-text {
     font-size: 16px;
     font-weight: 700;
     line-height: 26px;
     color: #fbfbfb;
}

.footer-social {
     display: flex;
     gap: 16px;
     justify-content: flex-end;
     margin-top: 20px;
}

.social-icon {
     width: 28px;
     height: 28px;
     padding: 6px;
     transition: transform 0.3s ease;
}

.social-icon:hover {
     transform: scale(1.1);
}

.footer-divider {
     width: 100%;
     height: 1px;
     background-color: rgba(236, 234, 234, 0.1);
     margin: 38px 0 6px;
}

.footer-copyright {
     font-size: 14px;
     font-family: "Gill Sans Nova", sans-serif;
     font-weight: 400;
     line-height: 13px;
     color: #896246;
     text-align: right;
}

/* Responsive media queries */
@media (max-width: 639px) {
     .stats-section{
               padding: 32px 0;
     }
     
     .content-wrapper{
          padding-bottom: 32px;
     }
     .header-top .content-wrapper,
     .header-main .content-wrapper,
     .header-nav .content-wrapper {
          padding: 0 16px;
          flex-direction: column;
          gap: 16px;
     }

     .header-contact {
          font-size: 14px;
          text-align: center;
     }

     .logo {
          width: 200px;
          height: auto;
     }

     .header-actions {
          gap: 16px;
     }

     .search-container {
          width: 100%;
     }

     .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;
     }

     .footer .content-wrapper {
          padding: 0 16px;
     }

     .footer-main {
          flex-direction: column;
          gap: 32px;
     }

     .footer-about,
     .footer-content {
          width: 100%;
     }

     .footer-sections {
          flex-direction: column;
          align-items: flex-start;
          gap: 32px;
     }

     .footer-bottom {
          flex-direction: column;
          gap: 32px;
     }

     .footer-addresses,
     .footer-contacts {
          width: 100%;
     }
}

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

     .header-top .content-wrapper,
     .header-main .content-wrapper,
     .header-nav .content-wrapper {
          padding: 0 24px;
     }

     .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) {

     .header-top .content-wrapper,
     .header-main .content-wrapper,
     .header-nav .content-wrapper {
          padding: 0 32px;
     }

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

     .footer .content-wrapper {
          padding: 0 32px;
     }
}

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

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