/* ========================================
   Стили для главной страницы
   Template: front-page.php
   ======================================== */

#content {min-height: 0;}
body.home .main-content.box-page,
body.home .main-content-inner {width: auto;}

.width-1400px {
    max-width: 1400px;
    margin: 44px auto 110px auto;
    padding: 0 20px; box-sizing: border-box;
}

/* HERO SECTION */
.hero-section {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}
   @media (max-width: 800px) {
      .hero-section {
         flex-direction: column;
      }
   }
   .hero-section-item {
      width: calc(33.333% - 9.333px);
   }
      .hero-section-item.big {
         width: calc(50% - 7px);
      }
      @media (max-width: 800px) {
         .hero-section-item,
         .hero-section-item.big {
            width: 100%;
         }
      }
         a.hero-section-item-link {
            display: block;
            height: 156px;
            color: #000; text-decoration: none;
            padding: 0; margin: 0;
            box-sizing: border-box;
            padding: 40px;
            display: flex; align-items: center;
         }
            @media (max-width: 800px) {
               a.hero-section-item-link {
                  padding: 20px;
               }
            }
         .hero-section-item.big a.hero-section-item-link {
            height: 464px;
            align-items: flex-start;
            }
               @media (max-width: 800px) {
                  .hero-section-item.big a.hero-section-item-link {
                     height: 270px;
                  }
               }
            .hero-section-item.hero1 a.hero-section-item-link {background: url(img/hero1.jpg) no-repeat center center; background-size: cover;}
            .hero-section-item.hero2 a.hero-section-item-link {background: url(img/hero2.jpg) no-repeat center center; background-size: cover;}
            .hero-section-item.hero3 a.hero-section-item-link {background: #F0F0F0 url(img/hero3.png) no-repeat calc(100% - 45px) center; background-size: auto 100%;}
            .hero-section-item.hero4 a.hero-section-item-link {background: #D8DEEC url(img/hero4.jpg) no-repeat 100% center; background-size: auto 100%;}
            .hero-section-item.hero6 a.hero-section-item-link {background: #F2E7E2 url(img/hero6.png) no-repeat 100% center; background-size: auto 100%;}
      .hero-section-item .hero-section-item-link h2 {
         font-weight: normal;
         padding: 0; margin: 0;
         font-size: 21px; line-height: 21px;
      }
         .hero-section-item.big .hero-section-item-link h2 {
            font-size: 27px; line-height: 27px;
            color: #fff;
         }

/* BENEFITS SECTION */
.benefits-section {
   display: flex;
   flex-wrap: wrap;
   max-width: 1416px;
   margin: 0 auto 144px auto;
   box-shadow: 0px 7px 19px rgba(0, 0, 0, 0.07);
   padding: 43px 0 43px 63px;
   box-sizing: border-box;
   gap: 75px;
}
   @media (max-width: 800px) {
      .benefits-section {
         flex-direction: column;
         padding: 20px;
         margin-bottom: 80px;
         gap: 34px;
      }
   }
   .benefits-section-item {
      max-width: calc(33.333% - 50px);
      font-size: 18px; line-height: 22px;
      min-height: 60px;
      display: flex; align-items: center;
      padding-right: 90px; border-right: 1px solid #DFDFDF;
      padding-left: 88px;
      box-sizing: border-box;
   }
      @media (max-width: 800px) {
         .benefits-section-item {
            max-width: 100%;
            padding-right: 0;
            border-right: none;
            font-size: 16px; line-height: 20px;
         }
      }
      .benefits-section-item-1 {background: url(img/benefit1.png) no-repeat 0 50%; background-size: auto 60px;}
      .benefits-section-item-2 {background: url(img/benefit2.png) no-repeat 0 50%; background-size: auto 60px;}
      .benefits-section-item-3 {background: url(img/benefit3.png) no-repeat 0 50%; background-size: auto 60px;
         margin-right: 0; border-right: none;}

/* POPULAR CATEGORIES SECTION */
.popular-categories-section {
   max-width: 1290px;
   margin: 0 auto 100px auto;
   padding: 0 20px;
}
   @media (max-width: 800px) {
      .popular-categories-section {
         padding: 0;
      }
   }
   .popular-categories-section h2 {
      text-align: center;
      font-size: 26px;
      margin: 0 0 54px 0;
      font-weight: normal;
   }
   .popular-categories-section-items {
      display: flex;
      flex-wrap: wrap;
      gap: 68px 14px;
   }
      @media (max-width: 800px) {
         .popular-categories-section-items {
            gap: 34px 14px;
         }
      }
      .popular-categories-section-item {
         width: calc(33.333% - 9.333px);
         box-sizing: border-box;
      }
      @media (max-width: 800px) {
         .popular-categories-section-item {
            width: calc(50% - 7px);
         }
      }
         .popular-categories-section-item a {
            display: block;
            text-decoration: none;
            color: #000;
         }
         .popular-categories-section-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin-bottom: 16px;
         }
         .popular-categories-section-item-title {
            font-size: 18px; line-height: 22px;
            font-weight: normal;
         }

/* BIG BENEFITS SECTION */
.big-benefits-section {
   max-width: 1200px;
   margin: 0 auto 136px auto;
   padding: 0 20px;
}
   @media (max-width: 800px) {
      .big-benefits-section {
         margin-bottom: 80px;
      }
   }
   .big-benefits-section > h2 {
      font-size: 44px; line-height: 44px;
      display: block;
      background: url(img/bigben.jpg) no-repeat 0 center; background-size: cover;
      margin: 0 0 54px 0;
      padding: 282px 0 75px 70px;
   }
      @media (max-width: 800px) {
         .big-benefits-section > h2 {
            font-size: 26px; line-height: 26px;
            padding: 150px 0 0 0;
            background-size: 100% auto; background-position: 0 0;
         }
      }
   .big-benefits-section-items {
      display: flex;
      flex-wrap: wrap;
      gap: 44px 108px;
   }
      .big-benefits-section-item {
         font-size: 16px; line-height: 24px;
         background: url(img/checked.png) no-repeat 29px 50%; background-size: 26px auto;
         padding-left: 70px;
         display: flex; align-items: center;
         width: calc(33.333% - 145px);
      }
         @media (max-width: 800px) {
            .big-benefits-section-item {
               width: auto;
               background: url(img/checked.png) no-repeat 0 50%; background-size: 26px auto;
               padding-left: 41px;
            }
         }
/* REVIEWS SECTION */
.reviews-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   background: #F5EFDD;
   padding: 47px 97px 30px 70px;
}
   @media (max-width: 800px) {
      .reviews-section {
         padding: 20px;
      }
   }
   .reviews-section-left {
      width: 50%;
      padding-right: 36px;
      box-sizing: border-box;
   }
      @media (max-width: 800px) {
         .reviews-section-left {
            width: 100%;
            padding-right: 0;
            margin-bottom: 20px;
         }
      }
      .reviews-section-left img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   .reviews-section-right {
      width: 50%;
      padding-left: 120px;
      box-sizing: border-box;
   }
      @media (max-width: 800px) {
         .reviews-section-right {
            width: 100%;
            padding-left: 0;
         }
      }
      .reviews-section-right-top {
         display: flex; flex-wrap: wrap;
         gap: 12px;
         margin-bottom: 24px;
      }
         .reviews-section-right-top img {
            width: auto;
            height: 40px;
         }
            @media (max-width: 800px) {
               .reviews-section-right-top img {
                  height: 30px;
               }
            }
         .reviews-section-right h2 {
            margin: 0 0 48px 0;
            font-size: 44px;
         }
            @media (max-width: 800px) {
               .reviews-section-right h2 {
                  font-size: 28px;
                  margin-bottom: 32px;
               }
            }
         .reviews-section-right-text {font-size: 16px; line-height: 24px; margin-bottom: 16px;}
         .reviews-section-right-author {font-size: 14px; line-height: 24px; font-weight: bold; margin-bottom: 52px;}
         a.reviews-section-right-link {
            display: inline-block;
            font-size: 18px;
            color: #fff; text-decoration: none;
            padding: 16px 34px 16px 69px;
            background-image: url(img/reviewsmap.png); background-repeat: no-repeat; background-position: 34px 50%; background-size: 16px auto;
            background-color: #464646;
            transition: all 0.3s ease;
            &:hover {
                background-color: #E4BE16; color: #fff;
            }
         }
         @media (max-width: 800px) {
            a.reviews-section-right-link {
               font-size: 16px;
               padding: 12px 24px 12px 66px;
            }
         }

/* DELIVERY SECTION */
.delivery-section {
   background: #E0E9ED;
   padding: 55px 40px 60px 40px;
   margin-bottom: 124px;
}
   @media (max-width: 800px) {
      .delivery-section {
         padding: 20px;
         margin-bottom: 80px;
      }
   }
   .delivery-section-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 48px;
   }
      .delivery-section-top-left {
         width: 48%;
         min-height: 474px;
      }
         @media (max-width: 800px) {
            .delivery-section-top-left {
               width: 100%;
               min-height: auto;
            }
         }
      .delivery-section-top-right {
         width: 48%;
         background: #565C6A;
         color: #fff;
         padding: 56px 42px 42px 42px;
         box-sizing: border-box;
         font-size: 16px; line-height: 24px;
      }
         @media (max-width: 800px) {
            .delivery-section-top-right {
               width: 100%;
               padding: 20px;
            }
         }
         .delivery-section-top-right h3 {
            font-size: 40px; line-height: 40px;
            margin-bottom: 46px;
            color: #fff;
         }
            @media (max-width: 800px) {
               .delivery-section-top-right h3 {
                  font-size: 26px; line-height: 26px;
                  margin-bottom: 32px;
               }
            }
         .delivery-section-top-right p {
            max-width: 433px;
         }
   .delivery-section-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
      .delivery-section-bottom-item {
         width: calc(31.7%);
         background: #fff;
         padding: 40px;
         box-sizing: border-box;
         font-size: 14px; line-height: 24px;
      }
         @media (max-width: 800px) {
            .delivery-section-bottom-item {
               width: 100%;
               margin-bottom: 20px;
               padding: 28px;
            }
         }
         .delivery-section-bottom-item h3 {
            font-size: 19px; line-height: 20px;
            margin-bottom: 24px;
            font-weight: normal;
         }