@charset "utf-8";

* {margin:0; padding:0;}
html, body {scrollbar-gutter: stable;}
html {position: relative; height: 100%;}
body {
      width: 100%;
      min-width: 320px;
      font-family: "Roboto", sans-serif;
      font-size:16px;
      -webkit-text-size-adjust: none;
      color:#000000;
       
      }
      :root {
        --color-1: #ffbf00;
        --color-2: #ffc61c;
        --color-yellou: #ff8900;
        
      }
body.hide {overflow:hidden;}
.wrapper {
      position:relative; 
      background:#fff; overflow:hidden;
}
header, main, footer {
      padding:0px; 
}
a, button, .share-close {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
p {line-height:1.5;}
.container {position:relative; }

.one-page h1 {font-size:60px; line-height:0.9; text-align:center;}


.container-item {
      margin:0 auto;
      max-width:1200px;
      padding:60px 40px;
      position:relative; z-index:1;  
}
.gap-block .container-item {display:flex; flex-direction:column; gap:30px;}
.one-page .container-item {
      padding:20px 40px;
}

header {
      position:fixed;
      background: #242424;
      right:0; left:0; top:0; 
      z-index:10; height:56px; 
}
header .container-item {
      display:flex;
      justify-content:center;
      align-items:center;
      padding:4px 40px;
      width:auto; position:relative; 
}
.logo {
      color:#fff;
      text-decoration:none;
      font-size:28px;
      font-weight:700;
      position:absolute; 
      left:40px;
      top:4px;
      display:flex; align-items:center;
      line-height:1; font-weight:400
}
.logo i {font-size:26px; margin-right:10px; color:var(--color-1); position:relative;
               top:2px}
.logo .logo-in {display:flex; flex-direction:column;}
.logo .logo-in b {font-size:16px; font-weight:300}
.logo span {color:var(--color-1)}

/*----- NAV -----*/
nav {margin-top:4px; margin-left:-80px;}
nav ul {display:flex; gap:30px; font-size:18px; font-weight:400;}
nav ul li {list-style:none; }
nav ul li a {
      color:#fff;
      text-decoration:none;
      padding:10px;
      display:flex; gap:10px; align-items:center; cursor:pointer; 
}
nav ul li a i {font-size:10px;}
nav ul > li > a i:first-child {font-size:14px;}
nav ul ul {
      position:absolute;
      background:#242424;
      margin-left:-10px;
      margin-top:0px;
      background:#333333;
      border-radius:16px;
      padding:20px 20px;
      display:none;
      flex-direction:column;
      gap:4px;
      font-size:16px;
}
nav ul .menu-coll ul {flex-direction:row; flex-wrap:wrap; justify-content:space-between; max-width:300px;}
nav ul .menu-coll ul li {width:46%; display:flex;}
nav ul ul a {padding:4px 0px; display:flex; align-items:center; gap:14px;}
nav ul ul a i {background:#4d4d4d; width:30px; height:30px; font-size:16px;
              display:flex !important; align-items:center; justify-content:center; border:1px solid #6a6a6a; border-radius:8px;
              transition:all 0.3s;}
nav ul ul a svg {background:#4d4d4d; width:18px; height:18px; font-size:16px;
              display:flex !important; align-items:center; justify-content:center; border:1px solid #6a6a6a; border-radius:8px;
                padding:6px 7px 6px 5px; transition:all 0.3s; position:absolute;}
nav ul ul a svg path {fill:#fff; transition:all 0.3s;}
nav ul ul a svg + span {margin-left:44px;}
nav ul > li.active > a {color:var(--color-1);}
nav ul ul > li.active > a i {color:var(--color-1) !important;}
nav ul li a:hover {color:var(--color-1) !important;}
nav ul ul a:hover {color:var(--color-1) !important;}
nav ul ul a:hover i {color:var(--color-1) !important;}
nav ul > li > a i {color:#fff !important;}

nav ul li:hover ul {
     display:flex;
}
/*---------------*/

.header-actions {position:absolute; right:40px;
                display:flex; gap:10px; align-items:center; top:11px;}


/**** Buttons ****/
.btn-1 {padding: 8px 20px; border-radius: 30px; background: var(--color-1); color: #000;
text-decoration:none; transition:all 0.3s; display:flex; align-items:center; gap:10px; justify-content:center;}
.btn-1:hover {background:var(--color-2);}

.btn-2 {padding: 14px 30px; border-radius: 30px; background: var(--color-1); color: #000;
text-decoration:none; transition:all 0.3s;  display:flex; align-items:center; gap:10px;
justify-content:center;}
.btn-2:hover {background:var(--color-2);}
/***************************/

main {margin-top:56px; overflow:hidden; background: #fff;}
.breadcrumbs-wrapper .container-item {
      padding:0px 40px 20px 40px; margin-top:20px;
}
.breadcrumb {display:flex; gap:6px 16px; flex-wrap:nowrap; font-size:14px;
            hite-space: nowrap;       /* Запрещаем перенос строк */
  overflow: hidden;          /* Скрываем переполнение */
  text-overflow: ellipsis;   /* Добавляем троеточие */
    }
.breadcrumb li {display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.breadcrumb li a {text-decoration:none; padding:0; color:#000000; }
.breadcrumb li a:hover { color:var(--color-1);}
.breadcrumb li span {color:#999;}
.breadcrumb li i {color:#999;}

/****** HEADER HOME ********/
.header-home {
   position:relative; overflow:hidden;
   background-repeat:no-repeat; background-size:cover;
   background-position:center center; color:#fff;
   background-color:#242424; padding-bottom:60px 
}
.header-home.home-2 {padding-bottom:0;}
.header-home:after {
  content:"";
  background:#000000;
  background-size:cover; position:absolute; top:0; right:0; bottom:0; left:0;
  opacity:0.5; filter: blur(0px); z-index:1; 
}
.header-home .container-item {
  padding:70px 40px; position:relative; z-index:2;
}

.header-content {
   position:relative; z-index:2; flex-direction:column; 
  display:flex; gap:30px; align-items:start; 
}
.header-content h1 {
  font-size:68px; font-weight:900;
  line-height:1; 
  text-transform:uppercase;
}
.header-content  p {font-size:24px; font-weight:300;}

.header-btn { display:flex; gap:10px; flex-wrap:wrap;
}
.header-btn a {text-decoration:none; color:#000; background:var(--color-1); border-radius:30px;
               padding:10px 20px; display:flex; align-items:center; gap:10px; font-weight:500;
}
.header-btn a:hover {
  background:#fff;
}
.header-content-item {gap:20px; display:flex; flex-direction:column;}
.header-image {
   width:50%;
}
.header-image img {width:100%;}


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

.container-title {
  margin-bottom:0px;
  text-align:center;
  display:flex; flex-direction:column; gap:20px;
} 
.container-title h2 {  
    margin: 0;
    padding: 0;
    font-size: 46px;
    font-weight: 900; line-height:1; text-wrap:balance;
}

.container-title span {
    /* Стили для подзаголовка */
    display: block;
    font-size: 18px;
    color: #3a3a3a;
}

/**** Pluses ****/
.pluses-wrapper {display:flex;  gap:10px; justify-content:space-between; margin-top:-160px;
                flex-wrap:wrap;}
.pluses-wrapper.plus {margin-top:0px;}
.pluses-item {display:flex; flex-direction:column; align-items:center; gap:10px 20px; 
              padding:30px; background:#e3e3e3;
             flex:1; justify-content:start; border-radius:30px; border:2px solid #000000;}
.pluses-item i {display:flex;align-items:center;justify-content:center;border-radius:50%;
                width:80px;height:80px;background:#242424;font-size:36px;border:0px solid #fff;
                color:var(--color-1);flex-basis:80px;
                }
.pluses-item span {font-size:16px; text-align:center; line-height:1.2; font-weight:400;}


.pluses-item-one {flex-direction:row; margin-bottom:0px;}
.pluses-item-one span {font-size:24px; text-align:left; flex:1; text-wrap:balance;}

.table-wrapper {display:flex; flex-direction:column; gap:10px;}
.table-item {display:flex; gap:10px; align-items:start; background:#e3e3e3;
            padding:30px; border-radius:30px;}
.table-item .td {
}
.table-item .td h3 {width:120px; font-size:32px; font-weight:900; line-height:1.3; display:flex; flex-wrap:wrap;
                   gap:6px;}
.table-item .td h3 b {font-size:16px; font-weight:400; color:#5c5c5c;  display:block;
                     flex-basis:100%;}
.table-item .td h3 span {background:#ccc; padding:0 10px;
                        border-radius:12px; font-size:20px; font-weight:400; }
.table-item .td p {
}
.price-wrapper {display:flex; margin-bottom:0px; gap:30px; }
.price-image {background-position:center center; width:200px; height:100px;
             border-radius:20px; background-repeat:no-repeat; background-size:300%;}
.price-item {display:flex; flex-direction:column; gap:20px; align-items:start;}
.title-h2 h2 {margin-bottom:0px; font-size:36px; text-wrap:balance; line-height:1.2}
.price-element {display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.price-element span {display:flex; align-items:center; gap:10px; border:1px solid #999;
                    border-radius:30px; padding:14px 30px; justify-content:center;}

/********* FOOTER **********/
footer {background:#242424; color:#999;}
footer .container-item {display:flex; flex-wrap:wrap; gap:30px; padding:50px 40px 30px 40px;}
footer .logo {position:relative; left:0;}
footer a {color:#949494; text-decoration:none;}
.footer-item {display:flex; flex-direction:column; flex:1; gap:16px;}
.footer-item:first-child {flex:2;}
.footer-item ul {list-style:none; display:flex; flex-direction:column; gap:10px}
.foot-catalog ul {min-width:300px; flex-wrap:wrap; flex-direction:row; gap:10px 30px;}
.foot-catalog ul li {width:40%;}
.footer-copy {width:100%; text-align:center; border-top:1px solid #444; padding-top:30px;}
.contact-wrapper {display:flex; flex-direction:column; gap:10px;}
.contact-wrapper a {display:flex; gap:12px; align-items:center; text-decoration:none;}
.contact-wrapper a i {color:#fff; display:flex; align-items:center; justify-content:center;
                     width:30px; height:30px; border:1px solid #666; border-radius:12px;}
.modal-content {display:flex; flex-direction:column; gap:20px;}
.modal-content h3 {font-size:24px; margin-bottom:-10px;}
.modal-content > span {color:#706d6d;}
.modal-content .contact-wrapper a {color:#ffffff; font-size:18px; padding:10px; background:#000;
                                  border-radius:30px; text-align:center; justify-content:center;}
.modal-content .contact-wrapper a:hover {background:#333;}
.modal-content .contact-wrapper a i {color:#ffffff; background:#cccccc85; font-size:16px; }

/********* HAMBURGER **********/
.nav-toggle {position: absolute;  right: 22px;  top: 3px; z-index: 12; outline:none;
            cursor: pointer; padding: 24px 41px 26px 14px; display:none;}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 24px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
.nav-toggle span:before {top: -10px; }
.nav-toggle span:after {bottom: -10px;}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {transition: all 200ms ease-in-out;}
.nav-toggle.active span {background-color: transparent; opacity: 1;}
.nav-toggle.active span:before, .nav-toggle.active span:after {top: 0;}
.nav-toggle.active span:before {transform: rotate(45deg);}
.nav-toggle.active span:after {transform: rotate(-45deg);}

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


/******** MODAL  *********/

.modal-wrapper {position:fixed; top:0; right:0; bottom:0; left:0; z-index:100;
  justify-content:center; background:#000000a1;  padding:20px;
  overflow-y:auto; align-items:center; display:none;}
.modal-window {min-width:280px; max-width:600px; box-sizing: border-box; position:relative;
              background:#fff; padding:30px 30px; border-radius:20px; margin:auto; }
.modal-window .close {position:absolute; padding:6px; font-size:18px; display:flex;
                     justify-content:center; align-items:center; width:30px; height:30px; right:10px; top:10px; cursor:pointer;
                     color:#000000; transition: all 0.3s; z-index:2}
.modal-window .close:hover {color:#999;}

/******** TABS *********/
.tabs-container {margin: 0 auto; overflow: hidden;}
.tabs-header {
  display: flex;
  overflow:hidden;
  gap:20px; flex-wrap:wrap;
}
.tab-btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: #e3e3e3;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  transition: all 0.3s ease;
  border-radius: 38px;
  white-space: nowrap;
}

.tab-btn.active {color:#ffffff; background:#242424;}
.tabs-content {
  padding: 20px 0 0 0;
   user-select: none; /* Стандартное свойство */
  -webkit-user-select: none; /* Для Safari и старых браузеров */
  -moz-user-select: none; /* Для Firefox */
  -ms-user-select: none; /* Для старых версий IE/Edge */
}
.tab-pane {display: none; flex-direction:column; gap:20px; background:#e3e3e3; padding:30px; border-radius:30px;}
.tab-pane.active { display: flex; animation: fadeIn 0.5s ease;}

.home-wrapper {display:flex; flex-direction:column; gap:50px;}
.catalog-wrapper {display:flex; gap:30px; flex-wrap:wrap;}
.catalog-item {display:flex; flex-direction:column; gap:0px; background:#e3e3e3;
              padding:0px; border-radius:30px; align-items:center; color:#000; text-decoration:none;
              overflow:hidden; flex:1; flex-basis:20%;}
.catalog-item img {object-fit: cover; height:120px; width:100%; display:block; }
.catalog-element {display:flex; flex-direction:column; gap:10px; padding:14px 20px 20px 20px; text-align:center;}
.catalog-item h4 {font-size:18px; text-align:center;}
.catalog-item:hover span {background:#242424; color:#fff;}

/**** delivery ****/
.delivery-wrapper {display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.delivery-item { flex:1; overflow:hidden;}
.delivery-item img {object-fit:fill; display:block; width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;}
.delivery-content h2 {font-size:38px; line-height:1}
.delivery-content h3 {font-size:36px; line-height:1}
.delivery-content {display:flex; flex-direction:column; gap:20px; padding:0px;}

.contacts-page-wrapper {}
.contacts-page-wrapper .contact-wrapper a {gap:12px; font-size:24px; color:#000;}
.contacts-page-wrapper .contact-wrapper a i {color:#000000; 
                     width:50px; height:50px;}
.content-wrapper {display:flex; flex-direction:column; gap:20px;}
.fix-contact {display:flex; align-items:center; justify-content:center;
             position:fixed; bottom:10px; right:10px; color:#000;
             width:60px; height:60px; border-radius:50%; background:var(--color-1);
             text-decoration:none; font-size:32px; z-index:2; }
.header-lid-block {display:flex; flex-direction:column; gap:20px; padding:40px; border:6px solid var(--color-1);
                  margin-top:-140px; background:#fff; border-radius:30px; align-items:start;
                  background: #FFBF00; position:relative; overflow:hidden;
background: linear-gradient(209deg, rgb(255 233 166) 0%, rgb(255 255 255) 100%);}
.header-lid-block h2 {font-size:38px; font-weight:300; margin:0;}
.header-lid-block h3 {font-size:48px; font-weight:900;}
.header-lid-block a {position:relative; z-index:1;}

.lid-block-wrapper {display:flex; gap:20px; margin-top:20px;}
.lid-block-item {display:flex; flex-direction:column; gap:20px;}
.lid-block-item span {display:flex; gap:20px; align-items:center;}
.lid-block-item i {display:flex;align-items:center;justify-content:center;border-radius:50%;
                width:80px;height:80px;background:#242424;font-size:36px;
                color:var(--color-1); min-width:80px;}
.lid-block-item h4 {font-size:28px;}
.svg-abs {position:absolute; top:40px; right:40px; z-index:0;}
.svg-abs svg {width:300px; height:300px;}
.svg-abs svg path {fill:#ffbf00; opacity:0.1;}