@font-face {
  font-family: "Exo";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-Light.woff") format("woff"), url("../fonts/Exo2-Light.woff2") format("woff2"), url("../fonts/Exo2-Light.ttf") format("truetype"), url("../fonts/Exo2-Light.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Exo";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-Regular.woff") format("woff"), url("../fonts/Exo2-Regular.woff2") format("woff2"), url("../fonts/Exo2-Regular.ttf") format("truetype"), url("../fonts/Exo2-Regular.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Exo";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-Medium.woff") format("woff"), url("../fonts/Exo2-Medium.woff2") format("woff2"), url("../fonts/Exo2-Medium.ttf") format("truetype"), url("../fonts/Exo2-Medium.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Exo";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-SemiBold.woff") format("woff"), url("../fonts/Exo2-SemiBold.woff2") format("woff2"), url("../fonts/Exo2-SemiBold.ttf") format("truetype"), url("../fonts/Exo2-SemiBold.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Exo";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-Bold.woff") format("woff"), url("../fonts/Exo2-Bold.woff2") format("woff2"), url("../fonts/Exo2-Bold.ttf") format("truetype"), url("../fonts/Exo2-Bold.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Exo";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-ExtraBold.woff") format("woff"), url("../fonts/Exo2-ExtraBold.woff2") format("woff2"), url("../fonts/Exo2-ExtraBold.ttf") format("truetype"), url("../fonts/Exo2-ExtraBold.eot") format("embedded-opentype");
}
@font-face {
  font-family: "Exo";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Exo2-Black.woff") format("woff"), url("../fonts/Exo2-Black.woff2") format("woff2"), url("../fonts/Exo2-Black.ttf") format("truetype"), url("../fonts/Exo2-Black.eot") format("embedded-opentype");
}
html {
  scrollbar-width: thin;
  scrollbar-color: #1270C1 transparent;
}
html::-webkit-scrollbar {
  width: 6px;
  background: #1270C1;
  border: 2px solid #1270C1;
}
html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
body {
  font-family: "Exo", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #000000;
  background-color: #ffffff;
  letter-spacing: -1px;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
ul,
ol {
  padding: 0;
  margin: 0;
}
ul li {
  list-style: none;
}
input,
textarea,
select {
  padding: 0;
  border: none;
  outline: none;
  font-family: "Exo", sans-serif;
  letter-spacing: -1px;
  font-size: 16px;
}
input::placeholder {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #7D8689;
}
button {
  cursor: pointer;
  outline: none;
}
fieldset {
  padding: 0;
  margin: 0;
  border: none;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}
p {
  padding: 0;
  margin: 0;
}
.underline {
  text-decoration: underline;
}
.button {
  border: none;
  font-family: "Exo", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 23px;
  color: #000000;
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
  letter-spacing: -1px;
}
.buttonAccent {
  color: #ffffff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  z-index: 0;
}
.buttonAccent:before,
.buttonAccent::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  transition: opacity 0.3s ease-out;
}
.buttonAccent:before {
  z-index: -1;
  background: linear-gradient(90deg, #3D8DD1 0%, #095696 100%);
  opacity: 1;
}
.buttonAccent:after {
  z-index: -2;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
}
.buttonAccent:hover:before {
  opacity: 0;
  z-index: -2;
}
.buttonAccent:hover:after {
  z-index: -1;
}
.buttonAccentRound {
  font-weight: 500;
  border-radius: 40px;
  display: flex;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 36px;
  overflow: hidden;
  z-index: 0;
}
.buttonAccentRound:before,
.buttonAccentRound::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  transition: opacity 0.3s ease-out;
}
.buttonAccentRound:before {
  z-index: -1;
  background: linear-gradient(90deg, #3D8DD1 0%, #095696 100%);
  opacity: 1;
}
.buttonAccentRound:after {
  z-index: -2;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
}
.buttonAccentRound:hover:before {
  opacity: 0;
  z-index: -2;
}
.buttonAccentRound:hover:after {
  z-index: -1;
}
.buttonWhite {
  border-radius: 40px;
  padding: 12px 36px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 2px solid #ffffff;
  transition: border 0.3s ease-out, background-color 0.3s ease-out;
}
.buttonWhite:hover {
  background-color: #1E88E2;
  border: 2px solid #1E88E2;
}
.buttonBlack {
  border-radius: 40px;
  padding: 12px 36px;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 2px solid #000000;
  box-shadow: 0 0 24px transparent;
  transition: border 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}
.buttonBlack:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  background-color: #ffffff;
}
.buttonBlue {
  border-radius: 40px;
  padding: 10px 36px;
  color: #1270C1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 2px solid #1270C1;
  box-shadow: 0 0 24px transparent;
  transition: border 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}
.buttonBlue:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  background-color: #ffffff;
}
@media (max-width: 700px) {
  .button {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
  }
}
.wrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
}
@media (max-width: 1000px) {
  .wrapper {
    padding: 0 20px;
  }
}
@media (max-width: 700px) {
  .wrapper {
    padding: 0 15px;
  }
}
.banner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto 58px;
  padding: 0 60px;
}
.bannerBg {
  display: flex;
  height: 280px;
}
.bannerBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.bannerBgFaq {
  height: 360px;
}
.bannerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 500px;
  width: 100%;
}
.bannerTitle {
  font-size: 32px;
  line-height: 42px;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.bannerTitleWhite {
  color: #ffffff;
}
.bannerTitle span {
  font-weight: 600;
}
.bannerTitleFaq {
  margin-bottom: 22px;
}
.bannerText {
  font-size: 17px;
  line-height: 28px;
  color: #ffffff;
  margin-bottom: 36px;
}
.bannerLink {
  width: fit-content;
  margin: 0 auto;
}
.bannerAbout .bannerBg {
  height: 600px;
}
@media (max-width: 1200px) {
  .bannerAbout .bannerBg {
    height: 680px;
  }
}
@media (max-width: 1000px) {
  .banner {
    margin: 0 auto 48px;
    padding: 0;
  }
  .bannerBg {
    height: 356px;
  }
  .bannerBg img {
    border-radius: 0;
  }
  .bannerAbout {
    padding: 0 20px;
  }
  .bannerAbout .bannerBg {
    height: 800px;
  }
  .bannerAbout .bannerBg img {
    border-radius: 40px;
  }
  .bannerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 500px;
    width: 100%;
  }
  .bannerTitle {
    font-size: 32px;
    line-height: normal;
    margin-bottom: 36px;
  }
}
@media (max-width: 700px) {
  .banner {
    margin: 0 auto 32px;
  }
  .bannerAbout {
    padding: 0;
  }
  .bannerAbout .bannerBg {
    height: 830px;
  }
  .bannerAbout .bannerBg img {
    border-radius: 0;
  }
  .bannerAbout .bannerContent {
    top: 50%;
  }
  .bannerBg {
    height: 449px;
  }
  .bannerContent {
    position: absolute;
    top: 60%;
    transform: translate(-50%, -60%);
    max-width: 240px;
  }
  .bannerTitle {
    font-size: 26px;
    line-height: 34px;
  }
  .bannerLink {
    padding: 7px 24px;
  }
}
.blog {
  margin-bottom: 38px;
}
.blogTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.blogSlider {
  overflow: hidden;
  padding: 24px 10px;
}
.blogSliderNav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blogSliderNavButton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  border: 2px solid #000000;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-out;
}
.blogSliderNavButton svg path {
  stroke: #000000;
  transition: stroke 0.3s ease-out;
}
.blogSliderNavButton:hover {
  background-color: #1270C1;
  border-color: #1270C1;
}
.blogSliderNavButton:hover svg path {
  stroke: #ffffff;
}
@media (max-width: 1000px) {
  .blog {
    margin-bottom: 28px;
  }
  .blog.wrapper {
    padding: 0;
  }
  .blogTop {
    margin-bottom: 40px;
    padding: 0 15px;
  }
  .blogSlider {
    padding: 20px 10px;
  }
  .blogSliderNavButton {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 700px) {
  .blog {
    margin-bottom: 12px;
  }
  .blogTop {
    margin-bottom: 32px;
  }
  .blogSliderNav {
    margin-left: auto;
  }
  .blogSliderNavButton {
    width: 28px;
    height: 28px;
  }
}
.blogCard {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease-out;
}
.blogCard:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
.blogCardImage {
  width: 100%;
  height: 388px;
}
.blogCardImageBlog {
  height: 285px;
}
.blogCardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.blogCardContent {
  padding: 20px;
}
.blogCardCategory {
  font-size: 14px;
  line-height: 20px;
  color: #1E88E2;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.blogCardTitle {
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  margin-bottom: 16px;
  font-weight: 600;
}
.blogCardDate {
  color: #A9A9A9;
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  gap: 16px;
}
.blogCardDate::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background-color: #A9A9A9;
  border-radius: 1px;
}
@media (max-width: 1000px) {
  .blogCard:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  }
  .blogCardImage {
    height: 356px;
  }
}
@media (max-width: 700px) {
  .blogCardImage {
    height: 272px;
  }
  .blogCardContent {
    padding: 16px;
  }
  .blogCardCategory {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .blogCardTitle {
    font-size: 16px;
    line-height: 24px;
  }
  .blogCardDate {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }
}
.cartModal {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  width: 500px;
  right: 0;
  transition: opacity 0.4s ease-in-out;
  z-index: 10;
}
.cartModal.active {
  opacity: 1;
  pointer-events: auto;
}
.cartModalContent {
  margin-top: 24px;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
  border-radius: 24px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  height: 0;
  transition: opacity 0.3s ease-out;
}
.cartModalContent.active {
  opacity: 1;
  pointer-events: auto;
  height: auto;
}
.cartModalTop {
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cartModalTitle {
  font-size: 22px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
}
.cartModalClose {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.cartModalClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.cartModalCounter {
  background-color: #28A745;
  color: #ffffff;
  font-size: 15px;
  line-height: 16px;
  font-weight: 600;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cartModalBody {
  background-color: #ffffff;
  border-radius: 18px;
  padding: 32px 16px 32px 32px;
}
.cartModalList {
  overflow-y: auto;
  height: 415px;
  padding-right: 16px;
  margin-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: #1270C1 #BFE0FF;
}
.cartModalList::-webkit-scrollbar {
  width: 6px;
  background: #1270C1;
  border: 2px solid #1270C1;
}
.cartModalList::-webkit-scrollbar-thumb {
  background: #BFE0FF;
  border-radius: 8px;
}
.cartModalList::-webkit-scrollbar-track {
  background: #BFE0FF;
}
.cartModalItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #D9DDE1;
}
.cartModalItem:last-child {
  border-bottom: none;
}
.cartModalItemImage {
  width: 105px;
  height: 105px;
  display: flex;
}
.cartModalItemImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartModalItemInfo {
  width: calc(100% - 153px);
}
.cartModalItemName {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #000000;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.cartModalItemPrice {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}
.cartModalTotal {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.cartModalTotalTitle {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  text-transform: uppercase;
}
.cartModalTotalPrice {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}
.cartModalTotalPriceFull {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: #F40000;
  margin-left: auto;
  text-decoration: line-through;
}
.cartModalEmpty {
  margin-top: 12px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.cartModalEmpty.active {
  opacity: 1;
  pointer-events: auto;
}
.cartModalEmptyImage {
  position: relative;
  display: flex;
}
.cartModalEmptyCounter {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #28A745;
  color: #ffffff;
  font-size: 15px;
  line-height: 16px;
  font-weight: 600;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cartModalEmptyTitle {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  text-transform: uppercase;
}
.cartModalEmptyTitle span {
  font-weight: 700;
}
.cartModalEmptyClose {
  border: 2px solid #000000;
}
@media (max-width: 1000px) {
  .cartModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(4, 17, 28, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cartModalEmpty {
    display: none;
    width: 400px;
    margin-top: 0;
  }
  .cartModalEmpty.active {
    display: flex;
    position: absolute;
    top: 100px;
    right: 20px;
  }
  .cartModalContent {
    margin-top: 0;
    width: 640px;
    display: none;
  }
  .cartModalContent.active {
    display: block;
  }
}
@media (max-width: 700px) {
  .cartModalEmpty {
    width: 290px;
    border-radius: 20px;
    padding: 20px;
  }
  .cartModalEmpty.active {
    top: 86px;
    right: 15px;
  }
  .cartModalEmptyTitle {
    font-size: 16px;
    line-height: normal;
  }
  .cartModalEmptyImage img {
    width: 36px;
    height: 36px;
  }
  .cartModalEmpty .cartModalClose {
    width: 24px;
    height: 24px;
  }
  .cartModalContent {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .cartModalContent.active {
    height: 100%;
  }
  .cartModalBody {
    height: calc(100% - 80px);
    padding: 28px 16px;
    border-radius: 18px 18px 0 0;
  }
  .cartModalList {
    height: 78%;
  }
}
.cateBanner {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  padding: 40px;
  position: relative;
}
.cateBannerFirst {
  background: #1B1B1B url("../images/bg/banner-tires_bg.webp") no-repeat center / cover;
}
.cateBannerSecond {
  background: #1B1B1B url("../images/bg/banner-oil_bg.webp") no-repeat center / cover;
}
.cateBannerImage {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0;
  line-height: 0;
}
.cateBannerContent {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}
.cateBannerTitle {
  font-weight: 400;
  font-size: 34px;
  line-height: 48px;
  color: #ffffff;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.cateBannerTitle span {
  font-weight: 700;
  color: #1E88E2;
}
.cateBannerText {
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  max-width: 350px;
  margin-bottom: 32px;
}
.cateBannerButton {
  width: fit-content;
  margin-top: auto;
}
@media (max-width: 1200px) {
  .cateBanner {
    flex: unset;
    width: 100%;
    padding: 42px;
  }
  .cateBannerTitle {
    font-size: 28px;
  }
  .cateBannerTitle span {
    font-weight: 600;
  }
  .cateBannerText {
    font-size: 16px;
    line-height: 24px;
    max-width: 300px;
    margin-bottom: 28px;
  }
}
@media (max-width: 700px) {
  .cateBanner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 272px;
    border-radius: 10px;
  }
  .cateBannerTitle {
    font-size: 24px;
    line-height: 36px;
  }
  .cateBannerText {
    max-width: 250px;
    margin-bottom: 24px;
  }
  .cateBannerButton {
    margin-top: 0;
  }
}
.counterItem {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 12px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 2px solid #000000;
  transition: box-shadow 0.3s ease-out, border 0.3s ease-out;
}
.counterItem:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
}
.counterItemInput {
  width: 33px;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #000000;
  background-color: transparent;
}
.counterItemButton {
  display: flex;
}
.featuresList {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 54px;
}
.featuresItem {
  display: flex;
  align-items: center;
  gap: 21px;
}
.featuresTitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}
.featuresText {
  color: #A9A9A9;
}
.featuresSep {
  display: inline-block;
  width: 1px;
  height: 52px;
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
@media (max-width: 1300px) {
  .featuresItem {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .featuresItem img {
    width: 30px;
  }
  .featuresTitle {
    font-size: 18px;
    line-height: 20px;
  }
}
@media (max-width: 1100px) {
  .features {
    padding: 0 56px;
  }
  .featuresList {
    margin-bottom: 72px;
    flex-wrap: wrap;
    gap: 48px;
    position: relative;
  }
  .featuresList::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 0;
    transform: rotate(-90deg) translateY(50%);
    display: inline-block;
    width: 1px;
    height: 120px;
    background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
  }
  .featuresItem {
    width: calc(50% - 50px);
    flex-direction: column;
    align-items: center;
  }
  .featuresItemSep {
    width: 1px;
  }
  .featuresItemSep:nth-of-type(4) {
    transform: rotate(90deg) translateY(50%);
    position: absolute;
    top: 30%;
    right: 0;
  }
  .featuresItemSep:nth-of-type(6) {
    transform: rotate(180deg);
  }
  .featuresItem img {
    width: 48px;
  }
  .featuresTitle {
    line-height: 24px;
  }
  .featuresSep {
    height: 120px;
  }
  .featuresContent {
    text-align: center;
  }
}
@media (max-width: 700px) {
  .features {
    padding: 0 15px;
  }
  .featuresList {
    margin-bottom: 48px;
    gap: 24px;
  }
  .featuresList::before {
    display: none;
  }
  .featuresItem {
    width: 100%;
    flex-direction: row;
    align-items: center;
  }
  .featuresItemSep:nth-of-type(4) {
    transform: rotate(0) translateY(0);
    position: static;
    top: unset;
    right: unset;
  }
  .featuresItemSep:nth-of-type(6) {
    transform: rotate(0);
  }
  .featuresItem img {
    width: 40px;
  }
  .featuresTitle {
    font-size: 17px;
  }
  .featuresSep {
    height: 1px;
    width: 100%;
    transform: scaleX(-1);
  }
  .featuresContent {
    text-align: left;
  }
}
.footer {
  background-color: #1B1B1B;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, -10%);
  width: 650px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #303030 0%, #1B1B1B 100%);
  opacity: 0.1;
  pointer-events: none;
}
.footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-70%, 20%);
  width: 650px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #303030 0%, #1B1B1B 100%);
  opacity: 0.2;
  pointer-events: none;
}
.footerContent {
  padding: 64px 0 56px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 40px;
}
.footerItem {
  max-width: 340px;
  position: relative;
  z-index: 1;
}
.footerItemTitle {
  color: #ffffff;
  margin-bottom: 32px;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  text-transform: uppercase;
}
.footerItemDisclaimer {
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 56px;
  padding: 28px 48px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.25) 0%, rgba(153, 153, 153, 0.25) 50%, rgba(255, 255, 255, 0.25) 100%);
  border: 1px solid #7F7F7F;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
}
.footerInfo {
  display: flex;
  flex-direction: column;
}
.footerText {
  color: #ffffff;
  margin-bottom: 116px;
}
.footerNavItem {
  margin-bottom: 14px;
}
.footerNavLink {
  color: #ffffff;
  margin-bottom: 16px;
  font-weight: 300;
  line-height: 28px;
  text-shadow: 0 0 14px transparent;
  transition: text-shadow 0.3s ease-out;
}
.footerNavLink:hover {
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}
.footerContacts {
  margin-bottom: 48px;
}
.footerContactsItem {
  margin-bottom: 32px;
}
.footerContactsLink {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 14px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 300;
  text-shadow: 0 0 14px transparent;
  transition: text-shadow 0.3s ease-out, color 0.3s ease-out;
}
.footerContactsLink:hover {
  text-shadow: 0 0 14px rgba(34, 158, 217, 0.4);
  color: #1E88E2;
}
@media (max-width: 1300px) {
  .footerContent {
    gap: 0 20px;
  }
  .footerItem {
    max-width: 240px;
  }
  .footerItemDisclaimer {
    max-width: 100%;
  }
}
@media (max-width: 1100px) {
  .footer::after {
    bottom: unset;
    top: 0;
  }
  .footerContent {
    padding: 68px 0 40px;
    gap: 68px 20px;
  }
  .footerItem {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .footerItemDisclaimer {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin-top: 0;
    padding: 28px;
    order: 2;
  }
  .footerItem:nth-child(2) {
    max-width: calc(50% - 10px);
    order: 1;
  }
  .footerItem:nth-child(3) {
    max-width: calc(50% - 10px);
    order: 1;
  }
  .footerItemContacts {
    padding: 68px 0;
    position: relative;
  }
  .footerItemContacts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.35);
  }
  .footerItemContacts::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.35);
  }
  .footerInfo {
    display: flex;
    flex-direction: column;
  }
  .footerText {
    margin-bottom: 58px;
    text-align: center;
  }
  .footerNavLink {
    margin-bottom: 14px;
  }
  .footerContactsLink {
    margin-bottom: 14px;
    gap: 14px;
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 700px) {
  .footerContent {
    padding: 64px 0 40px;
    gap: 64px 0;
  }
  .footerItem:nth-child(2) {
    max-width: 100%;
  }
  .footerItem:nth-child(3) {
    max-width: 100%;
  }
  .footerItemContacts {
    padding: 64px 0;
  }
  .footerText {
    margin-bottom: 42px;
  }
}
.footerBottom {
  z-index: 1;
  position: relative;
  background: linear-gradient(to left, #212121 0%, #333232 100%);
}
.footerBottomList {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 8px 0;
}
.footerBottomItem {
  display: flex;
}
.header {
  position: relative;
  z-index: 100;
}
.headerAccount {
  padding: 12px 24px;
  margin-left: 16px;
}
.headerAccountImageMobile {
  display: none;
}
.headerToggleMenu {
  display: none;
}
@media (max-width: 1000px) {
  .headerToggleMenu {
    display: flex;
    margin-right: 16px;
  }
  .headerAccount {
    padding: 0;
    margin-left: 0;
    font-size: 0;
    line-height: 0;
    border: none;
    border-radius: 0;
    gap: 0;
  }
  .headerAccountImage {
    display: none;
  }
  .headerAccountImageMobile {
    display: block;
    width: 32px;
  }
  .headerAccountNav {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    gap: 12px;
    justify-content: flex-start;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }
}
@media (max-width: 700px) {
  .headerToggleMenu {
    margin-right: 10px;
  }
  .headerToggleMenu img {
    width: 32px;
  }
  .headerAccountImageMobile {
    width: 26px;
  }
  .headerAccountNav {
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
}
.headerCatalog {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 17, 28, 0.7);
  transition: opacity 0.4s ease-in-out;
  z-index: 10;
}
.headerCatalog.active {
  opacity: 1;
  pointer-events: auto;
}
.headerCatalogContent {
  position: relative;
  margin-top: 134px;
  background-color: transparent;
  box-shadow: 0 0 24px transparent;
  border-radius: 10px;
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.headerCatalogContent.active {
  background-color: #ffffff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
.headerCatalogList {
  max-width: 302px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  padding: 10px;
  height: 644px;
  overflow-y: auto;
}
.headerCatalogLink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 12px 16px;
  border-radius: 10px;
  background-color: transparent;
  transition: background-color 0.3s ease-out, font-weight 0.1s ease-out 0.1s, color 0.2s ease-out;
  font-weight: 500;
  color: #000000;
}
.headerCatalogLink:hover {
  background-color: #EEF3F8;
  font-weight: 700;
  color: #1270C1;
}
.headerCatalogInside {
  position: absolute;
  left: 282px;
  top: 0;
  padding: 24px 24px 24px 48px;
  overflow: hidden;
  max-width: calc(100% - 282px);
  height: 644px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.headerCatalogInside.active {
  opacity: 1;
  pointer-events: auto;
}
.headerCatalogInsideList {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.headerCatalogInsideItem {
  width: calc(25% - 24px);
}
.headerCatalogInsideItemTitle {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 15px;
}
.headerCatalogSubItem {
  margin-bottom: 10px;
}
.headerCatalogSubItem:nth-child(n + 7) {
  display: none;
}
.headerCatalogSubList {
  margin-bottom: 15px;
}
.headerCatalogSubLink {
  font-weight: 500;
  color: #000000;
  transition: color 0.3s ease-out;
}
.headerCatalogSubLink:hover {
  color: #1270C1;
}
.headerCatalogSubAll {
  font-size: 15px;
  font-weight: 700;
  color: #1270C1;
}
.headerCatalogToggle {
  padding: 12px 24px;
  margin-right: 12px;
}
@media (max-width: 1000px) {
  .headerCatalogToggle {
    display: none;
  }
}
.headerMain {
  background: linear-gradient(90deg, #3D8DD1 0%, #095696 100%);
  position: fixed;
  top: 36px;
  width: 100%;
  z-index: 100;
  transition: top 0.3s ease-out;
}
.headerMain.scroll {
  top: 0;
}
.headerMainContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}
@media (max-width: 1000px) {
  .headerMainContent {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 16px 0 20px;
  }
}
@media (max-width: 700px) {
  .headerMainContent {
    padding: 12px 0;
  }
}
.headerTop {
  background: #1270C1;
  padding: 4px 0;
  position: relative;
  z-index: 11;
}
.headerTopContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headerTopContacts {
  display: flex;
  align-items: center;
  gap: 24px;
}
.headerTopContactsItem {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
.headerTopContactsItem:hover {
  opacity: 0.7;
}
.headerTopContactsText {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
}
.headerTopNav {
  display: flex;
  align-items: center;
  gap: 36px;
}
@media (max-width: 1300px) {
  .headerTopContactsItem {
    display: none;
  }
  .headerTopContactsItem:last-child {
    display: flex;
  }
}
@media (max-width: 700px) {
  .headerTop {
    padding: 7px 0;
  }
}
.homeBanners {
  display: flex;
  gap: 16px;
  margin-bottom: 58px;
}
@media (max-width: 1200px) {
  .homeBanners {
    flex-wrap: wrap;
    margin-bottom: 48px;
  }
}
@media (max-width: 700px) {
  .homeBanners {
    margin-bottom: 32px;
    gap: 12px;
  }
}
.homeCates {
  margin-bottom: 58px;
}
.homeCatesTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.homeCatesNav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.homeCatesNavButton {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  text-transform: uppercase;
  color: #889AA9;
  transition: color 0.3s ease-out;
}
.homeCatesNavButton.active {
  color: #000000;
}
.homeCatesNavButton.active:hover {
  color: #000000;
}
.homeCatesNavButton:hover {
  color: #1270C1;
}
.homeCatesSlider {
  overflow: hidden;
}
.homeCatesSliderNav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.homeCatesSliderNavButton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  border: 2px solid #000000;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-out;
}
.homeCatesSliderNavButton svg path {
  stroke: #000000;
  transition: stroke 0.3s ease-out;
}
.homeCatesSliderNavButton:hover {
  background-color: #1270C1;
  border-color: #1270C1;
}
.homeCatesSliderNavButton:hover svg path {
  stroke: #ffffff;
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(1) .homeCatesLink::before {
  transform: translate(50%, 100%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  transform: translate(50%, -10%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  transform: translate(50%, -100%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(-30%, 50%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  width: 320px;
  height: 320px;
  transform: translate(70%, 15%) scale(1);
}
.homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:first-child .homeCatesLink::before {
  transform: translate(20%, 80%) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:first-child .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  width: 320px;
  height: 305px;
  transform: translate(100%, -100%) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  width: 370px;
  height: 360px;
  transform: translate(60%, -35%) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  transform: translate(40%, 80%) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  transform: translate(80%, 0) scale(1);
}
.homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(1) .homeCatesLink::before {
  transform: translate(50%, 100%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  transform: translate(50%, -10%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  transform: translate(50%, -100%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(-30%, 50%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  width: 320px;
  height: 320px;
  transform: translate(70%, 15%) scale(1);
}
.homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts {
  overflow: hidden;
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(1) .homeCatesLink::before {
  width: 320px;
  height: 320px;
  transform: translate(70%, 15%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  transform: translate(50%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  transform: translate(80%, -15%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  width: 240px;
  height: 240px;
  transform: translate(40%, -40%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  width: 320px;
  height: 320px;
  transform: translate(55%, 40%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(1) .homeCatesLink::before {
  width: 320px;
  height: 305px;
  transform: translate(100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  transform: translate(70%, 5%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  width: 370px;
  height: 360px;
  transform: translate(-100%, 0) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  width: 400px;
  height: 400px;
  transform: translate(75%, 20%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  transform: translate(55%, -40%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(1) .homeCatesLink::before {
  width: 320px;
  height: 305px;
  transform: translate(100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  transform: translate(80%, -10%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  transform: translate(50%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(-30%, 50%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  width: 320px;
  height: 320px;
  transform: translate(70%, 15%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:first-child .homeCatesLink::before {
  transform: translate(20%, 80%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:first-child .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(2) .homeCatesLink::before {
  width: 320px;
  height: 305px;
  transform: translate(100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(3) .homeCatesLink::before {
  width: 370px;
  height: 360px;
  transform: translate(60%, -35%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(4) .homeCatesLink::before {
  transform: translate(-100%, -100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(5) .homeCatesLink::before {
  transform: translate(40%, 80%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(6) .homeCatesLink::before {
  width: 200px;
  height: 200px;
  transform: translate(20%, 100%) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(6) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(7) .homeCatesLink::before {
  transform: translate(80%, 0) scale(1);
}
.homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(7) .homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesSlidersTab {
  display: none;
}
.homeCatesSlidersMob {
  display: none;
}
.homeCatesList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.homeCatesItemLink {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #ffffff;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
  z-index: 1;
  margin-top: auto;
}
.homeCatesItemLink:hover {
  background-color: #2D90E4;
  border-color: #2D90E4;
}
.homeCatesItem:nth-child(-n + 3) {
  width: calc(33.33% - 14px);
}
.homeCatesItem:nth-child(n + 4):nth-child(-n + 7) {
  width: calc(25% - 15px);
}
.homeCatesLink {
  display: block;
  width: 100%;
  position: relative;
  height: 230px;
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
  border-radius: 10px;
  padding: 28px;
  overflow: hidden;
  color: #000000;
  transition: color 0.5s cubic-bezier(0.1, 0.8, 0.4, 1);
}
.homeCatesLink::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 450px;
  height: 430px;
  transform: translate(50%, -10%) scale(1);
  border-radius: 50%;
  background: linear-gradient(45deg, #2E8CDD 0%, #095696 100%);
  transition: transform 1s cubic-bezier(0.1, 0.8, 0.4, 1);
  z-index: 0;
  pointer-events: none;
}
.homeCatesLink:hover {
  color: #ffffff;
}
.homeCatesLink:hover::before {
  transform: translate(0, 0) scale(3);
}
.homeCatesLink:hover .homeCatesQuantity {
  color: #ffffff;
  transition: color 0.7s cubic-bezier(0.1, 0.8, 0.4, 1);
}
.homeCatesLink:hover .homeCatesItemLink {
  opacity: 1;
}
.homeCatesLinkTitle {
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  z-index: 1;
  position: relative;
}
.homeCatesText {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.homeCatesQuantity {
  color: #A9A9A9;
  position: relative;
  z-index: 1;
}
.homeCatesImage {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  font-size: 0;
  line-height: 0;
}
@media (max-width: 1400px) {
  .homeCatesLink {
    padding: 18px;
  }
  .homeCatesLinkTitle {
    font-size: 18px;
    line-height: 24px;
  }
  .homeCatesImage {
    right: -40px;
  }
}
@media (max-width: 1000px) {
  .homeCates {
    margin-bottom: 48px;
  }
  .homeCatesTop {
    margin-bottom: 36px;
  }
  .homeCatesNav {
    gap: 16px;
  }
  .homeCatesNavButton {
    font-size: 17px;
  }
  .homeCatesSliderNav {
    margin-left: 12px;
  }
  .homeCatesSliderNavButton {
    width: 40px;
    height: 40px;
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
    transform: translate(50%, 100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink::before {
    transform: translate(-30%, 70%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-30%, 70%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink::before {
    transform: translate(-100%, -100%) scale(0);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(0);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesItem:first-child .homeCatesLink:hover::before {
    transform: translate(20%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(60%, -35%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(40%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesItem:first-child .homeCatesLink:hover::before {
    transform: translate(50%, 100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(-30%, 50%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesItem:first-child .homeCatesLink:hover::before {
    transform: translate(20%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(60%, -35%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(40%, 80%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
    transform: translate(70%, 15%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(80%, -15%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(1) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(40%, -40%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(70%, 5%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink::before {
    transform: translate(-50%, 60%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-50%, 60%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink::before {
    transform: translate(-100%, 0%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(2) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(-100%, 0%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(1) .homeCatesLink::before {
    transform: translate(75%, 0) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
    transform: translate(75%, 0) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink::before {
    transform: translate(30%, 70%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(30%, 70%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(3) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(-30%, 50%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(1) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(70%, 5%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(4) .homeCatesLink::before {
    transform: translate(-50%, 60%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-50%, 60%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(5) .homeCatesLink::before {
    transform: translate(-100%, 0%) scale(1);
  }
  .homeCatesSliderAutoparts .homeCatesSliderSlide:nth-child(4) .homeCatesItem:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(-100%, 0%) scale(1);
  }
  .homeCatesSliders {
    display: none;
  }
  .homeCatesSlidersTab {
    display: block;
  }
  .homeCatesList {
    gap: 20px 16px;
  }
  .homeCatesItem:nth-child(-n + 3) {
    width: 100%;
  }
  .homeCatesItem:nth-child(-n + 2) {
    width: calc(50% - 8px);
  }
  .homeCatesItem:nth-child(n + 4):nth-child(-n + 7) {
    width: 100%;
  }
  .homeCatesItem:nth-child(n + 3):nth-child(-n + 5) {
    width: calc(33.33% - 11px);
  }
  .homeCatesLink {
    padding: 20px;
  }
  .homeCatesLink:hover {
    color: #000000;
  }
  .homeCatesLink:hover::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesLink:hover .homeCatesQuantity {
    color: #A9A9A9;
  }
  .homeCatesLink:hover .homeCatesItemLink {
    opacity: 0;
  }
  .homeCatesImage {
    right: 0;
  }
}
@media (max-width: 700px) {
  .homeCates {
    margin-bottom: 32px;
  }
  .homeCatesTop {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .homeCatesTitle {
    width: 100%;
    margin-bottom: 16px;
  }
  .homeCatesNav {
    width: 100%;
    padding: 12px 0;
    border-top: 2px solid #E7EBEE;
    border-bottom: 2px solid #E7EBEE;
  }
  .homeCatesNavButton {
    font-size: 15px;
    line-height: 28px;
    position: relative;
  }
  .homeCatesNavButton::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: calc(100% + 4px);
    height: 2px;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  .homeCatesNavButton.active::before {
    opacity: 1;
  }
  .homeCatesSliderNav {
    margin-left: auto;
  }
  .homeCatesSliderNavButton {
    width: 28px;
    height: 28px;
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesLink::before {
    transform: translate(50%, 100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(1) .homeCatesLink:hover::before {
    transform: translate(50%, 100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesLink::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(2) .homeCatesLink:hover::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesLink::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(3) .homeCatesLink:hover::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesLink::before {
    transform: translate(-30%, 70%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(4) .homeCatesLink:hover::before {
    transform: translate(-30%, 70%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(5) .homeCatesLink::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(5) .homeCatesLink:hover::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(6) .homeCatesLink::before {
    transform: translate(20%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(6) .homeCatesLink:hover::before {
    transform: translate(20%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(7) .homeCatesLink::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(7) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(8) .homeCatesLink::before {
    transform: translate(60%, -35%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(8) .homeCatesLink:hover::before {
    transform: translate(60%, -35%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(9) .homeCatesLink::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(9) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(10) .homeCatesLink::before {
    transform: translate(40%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(10) .homeCatesLink:hover::before {
    transform: translate(40%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(11) .homeCatesLink::before {
    transform: translate(50%, 100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(11) .homeCatesLink:hover::before {
    transform: translate(50%, 100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(12) .homeCatesLink::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(12) .homeCatesLink:hover::before {
    transform: translate(50%, -10%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(13) .homeCatesLink::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(13) .homeCatesLink:hover::before {
    transform: translate(50%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(14) .homeCatesLink::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(14) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(15) .homeCatesLink::before {
    transform: translate(-30%, 50%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(15) .homeCatesLink:hover::before {
    transform: translate(-30%, 50%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(16) .homeCatesLink::before {
    transform: translate(20%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(16) .homeCatesLink:hover::before {
    transform: translate(20%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(17) .homeCatesLink::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(17) .homeCatesLink:hover::before {
    transform: translate(100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(18) .homeCatesLink::before {
    transform: translate(60%, -35%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(18) .homeCatesLink:hover::before {
    transform: translate(60%, -35%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(19) .homeCatesLink::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(19) .homeCatesLink:hover::before {
    transform: translate(-100%, -100%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(20) .homeCatesLink::before {
    transform: translate(40%, 80%) scale(1);
  }
  .homeCatesSliderSlide:nth-child(20) .homeCatesLink:hover::before {
    transform: translate(40%, 80%) scale(1);
  }
  .homeCatesSlidersTab {
    display: none;
  }
  .homeCatesSlidersMob {
    display: block;
  }
  .homeCatesLink {
    height: 270px;
  }
  .homeCatesLinkTitle {
    font-size: 18px;
    line-height: 24px;
  }
}
.homeSearch {
  position: relative;
  z-index: 2;
  margin-bottom: 58px;
  margin-top: -70px;
}
.homeSearchTabs {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.homeSearchTabsItem {
  padding: 9px 20px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.homeSearchTabsItem.active {
  background-color: #ffffff;
}
.homeSearchTabsItem.active .homeSearchTabsButton {
  color: #000000;
  padding-left: 8px;
  position: relative;
}
.homeSearchTabsItem.active .homeSearchTabsButton::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #1270C1;
  border-radius: 50%;
}
.homeSearchTabsButton {
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
}
.homeSearchTabsContent {
  position: relative;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  padding: 24px;
  background-color: #ffffff;
  border-radius: 0 20px 20px 20px;
}
.homeSearchTabsContentItem {
  width: calc(100% - 48px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.homeSearchTabsContentItem.active {
  width: 100%;
  position: relative;
  opacity: 1;
  top: unset;
  transform: unset;
  pointer-events: all;
}
.homeSearchForm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  position: relative;
}
.homeSearchInput {
  width: calc(100% - 220px);
  border: 1px solid #D9DDE1;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.homeSearchDropdown {
  max-width: calc(20% - 50px);
  width: 100%;
  position: static !important;
}
.homeSearchDropdownBody {
  max-height: 710px;
}
.homeSearchDropdownBody.active {
  margin-top: 8px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background-color: #ffffff;
  padding: 36px 24px;
}
.homeSearchDropdownToggle {
  width: 100%;
  border: 1px solid #D9DDE1;
  box-shadow: 0 0 24px transparent;
  border-radius: 10px;
  padding: 13px 16px;
  transition: box-shadow 0.3s ease-out, border 0.3s ease-out, color 0.3s ease-out;
}
.homeSearchDropdownToggle.active {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
}
.homeSearchDropdownToggleText {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.homeSearchSubmit {
  margin-left: 8px;
}
.homeSearchCarBrands {
  display: flex;
  justify-content: space-between;
  margin-bottom: 56px;
}
.homeSearchCarBrandsButton img {
  height: 42px;
  filter: grayscale(100%);
  transition: filter 0.3s ease-out;
}
.homeSearchCarBrandsButton:hover img {
  filter: none;
}
.homeSearchCarBrandsList {
  columns: 6;
  column-gap: 24px;
}
.homeSearchCarBrandsListItem {
  break-inside: avoid;
  margin-bottom: 16px;
}
.homeSearchCarBrandsListItem.hidden {
  display: none;
}
.homeSearchCarBrandsListButton {
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  transition: color 0.3s ease-out;
}
.homeSearchCarBrandsListButton .firstLetter {
  font-weight: 700;
  color: #1270C1;
  transition: font-weight 0.3s ease-out;
}
.homeSearchCarBrandsListButton:hover {
  color: #1270C1;
}
.homeSearchCarBrandsListButton:hover .firstLetter {
  font-weight: 400;
}
.homeSearchButtonShow {
  margin: 56px auto 0;
}
@media (max-width: 1400px) {
  .homeSearchCarBrandsButton img {
    height: 30px;
  }
  .homeSearchCarBrandsList {
    columns: 5;
  }
}
@media (max-width: 1200px) {
  .homeSearchDropdown {
    max-width: calc(33.33% - 72px);
  }
  .homeSearchDropdown:nth-last-child(-n + 3) {
    display: none;
  }
  .homeSearchDropdown.active:nth-last-child(-n + 3) {
    display: block;
  }
  .homeSearchWrapper {
    padding: 0;
  }
  .homeSearchCarBrandsList {
    columns: 4;
  }
}
@media (max-width: 1000px) {
  .homeSearch {
    margin-bottom: 48px;
  }
  .homeSearchTabsItem {
    width: calc(33.33% - 5px);
    text-align: center;
  }
  .homeSearchTabsButton {
    font-size: 16px;
  }
  .homeSearchTabsContent {
    padding: 32px 20px;
    border-radius: 0 0 20px 20px;
  }
  .homeSearchForm {
    flex-wrap: wrap;
    gap: 12px;
  }
  .homeSearchFormShort .homeSearchSubmit {
    width: 203px;
  }
  .homeSearchDropdown {
    max-width: 100%;
    position: relative !important;
  }
  .homeSearchDropdownToggle {
    border-radius: 40px;
  }
  .homeSearchDropdownBody.active {
    border-radius: 20px;
    padding: 20px;
  }
  .homeSearchWrapper {
    padding: 0;
  }
  .homeSearchCarBrands {
    display: none;
  }
  .homeSearchCarBrandsList {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow-y: auto;
    height: 200px;
  }
  .homeSearchCarBrandsListItem {
    display: block;
    width: calc(33.33% - 8px);
    margin-bottom: 6px;
  }
  .homeSearchCarBrandsListItem.hidden {
    display: block;
  }
  .homeSearchCarBrandsListButton {
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    transition: color 0.3s ease-out;
  }
  .homeSearchCarBrandsListButton .firstLetter {
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #000000;
  }
  .homeSearchCarBrandsListButton:hover {
    color: #000000;
  }
  .homeSearchButtonShow {
    display: none;
  }
  .homeSearchSubmit {
    margin-left: 0;
    width: 100%;
  }
  .homeSearchInput {
    border-radius: 40px;
  }
  .homeSearchButtonShow {
    display: none;
  }
}
@media (max-width: 700px) {
  .homeSearch {
    margin-bottom: 32px;
  }
  .homeSearchTabs {
    padding: 0 15px 12px;
    gap: 6px;
    justify-content: center;
  }
  .homeSearchTabsItem {
    width: auto;
    padding: 8px 14px;
    border-radius: 40px;
    line-height: 20px;
  }
  .homeSearchTabsButton {
    font-size: 14px;
    line-height: 20px;
  }
  .homeSearchTabsContent {
    padding: 20px 15px;
    border-radius: 20px;
  }
  .homeSearchDropdownBody.active {
    border-radius: 20px;
    padding: 20px;
  }
  .homeSearchCarBrandsListItem {
    text-align: center;
    width: calc(50% - 6px);
    margin-bottom: 0;
  }
  .homeSearchSubmit {
    padding: 10px 20px;
  }
}
@media (max-width: 500px) {
  .homeSearchCarBrandsListItem {
    width: 100%;
  }
}
.language {
  display: flex;
  align-items: center;
  gap: 8px;
}
.languageButton {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: #ffffff;
  text-transform: uppercase;
  padding: 0 12px;
  border: 1px solid #ffffff;
  border-radius: 32px;
  opacity: 0.7;
  transition: opacity 0.3s ease-out;
}
.languageButton:hover {
  opacity: 1;
}
.languageButton.active {
  opacity: 1;
}
.languageButtonMenu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  padding: 11px;
  opacity: 1;
  border: 2px solid #ffffff;
  background-color: transparent;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, font-weight 0.2s ease-out;
}
.languageButtonMenu.active {
  background-color: #ffffff;
  color: #000000;
  font-weight: 600;
}
@media (max-width: 700px) {
  .languageButtonMenu {
    padding: 8px;
  }
}
.logo {
  display: flex;
}
.logoImage {
  display: flex;
  width: 224px;
}
.logoHeader {
  margin-right: 42px;
}
.logoFooter {
  margin-bottom: 40px;
}
@media (max-width: 1300px) {
  .logoImage {
    width: 180px;
  }
  .logoHeader {
    margin-right: 20px;
  }
}
@media (max-width: 1100px) {
  .logoImage {
    width: 160px;
  }
  .logoFooter {
    margin-bottom: 53px;
    justify-content: center;
  }
  .logoFooter .logoImage {
    width: 300px;
  }
}
@media (max-width: 700px) {
  .logoImage {
    width: 140px;
  }
  .logoFooter {
    margin-bottom: 42px;
  }
  .logoFooter .logoImage {
    width: 214px;
  }
}
.main {
  margin-top: 86px;
  transition: margin-top 0.3s ease-out;
}
.main.scroll {
  margin-top: 0;
}
@media (max-width: 1000px) {
  .main {
    margin-top: 132px;
  }
}
@media (max-width: 700px) {
  .main {
    margin-top: 104px;
  }
}
.mainNav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mainNavLink {
  color: #ffffff;
  font-size: 15px;
  line-height: 28px;
  font-weight: 300;
  transition: opacity 0.3s ease-out;
}
.mainNavLink:hover {
  opacity: 0.7;
}
@media (max-width: 700px) {
  .mainNav {
    display: none;
  }
}
.mainSlider {
  overflow: hidden;
  position: relative;
}
.mainSliderSlideWrapper {
  position: relative;
  max-width: 2200px;
  height: 560px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
@media (max-width: 1300px) {
  .mainSliderSlideWrapper {
    height: 520px;
  }
}
@media (max-width: 1200px) {
  .mainSliderSlideWrapper picture {
    width: 100%;
  }
}
.mainSliderSlideWrapper picture img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: right;
}
@media (max-width: 1300px) {
  .mainSliderSlideWrapper picture img {
    height: 520px;
  }
}
.mainSliderContent {
  position: absolute;
  left: 15%;
  top: 80px;
  max-width: 560px;
  color: #ffffff;
  width: 100%;
  padding: 0 60px;
}
@media (max-width: 1900px) {
  .mainSliderContent {
    left: 10%;
  }
}
@media (max-width: 1600px) {
  .mainSliderContent {
    left: 4%;
  }
}
@media (max-width: 1300px) {
  .mainSliderContent {
    left: 0;
  }
}
.mainSliderHeader {
  font-size: 42px;
  line-height: 56px;
  font-weight: 700;
  margin-bottom: 20px;
}
.mainSliderDescription {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  margin-bottom: 48px;
  max-width: 80%;
  width: 100%;
}
.mainSliderLink {
  width: fit-content;
}
.mainSliderPagination {
  position: absolute;
  bottom: 120px !important;
  left: 50% !important;
  top: unset !important;
  right: unset !important;
  transform: translateX(-50%);
  width: fit-content !important;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}
.mainSliderPagination span {
  width: 24px;
  height: 24px;
  display: block;
  cursor: pointer;
  position: relative;
  background-color: transparent !important;
  transition: all 0.3s ease-out;
  margin: 0 !important;
}
.mainSliderPagination span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50% ;
}
.mainSliderPagination span.swiper-pagination-bullet-active {
  padding: 6px;
  border: 1px solid #ffffff;
  border-radius: 50% !important;
  background-color: transparent !important;
}
.mainSliderPagination span.swiper-pagination-bullet-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 50% ;
}
@media (max-width: 1000px) {
  .mainSliderContent {
    top: 68px;
    max-width: 410px;
    padding: 0 40px;
  }
  .mainSliderHeader {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .mainSliderDescription {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 36px;
  }
}
@media (max-width: 700px) {
  .mainSliderContent {
    top: 32px;
    max-width: 100%;
    padding: 0 20px;
  }
  .mainSliderHeader {
    font-size: 28px;
    line-height: 32px;
  }
  .mainSliderDescription {
    display: none;
  }
  .mainSliderLink {
    padding: 8px 28px;
    font-size: 16px;
    line-height: 20px;
    margin-left: auto;
  }
}
.mobileMenu {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(90deg, #3D8DD1 0%, #095696 100%);
  display: flex;
  z-index: -1;
  transition: opacity 0.3s ease-out;
}
.mobileMenu.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1000;
}
.mobileMenu .wrapper {
  position: relative;
  width: 100%;
}
.mobileMenuContent {
  padding: 16px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.mobileMenuContent::-webkit-scrollbar {
  width: 6px;
  background: transparent;
  border: 2px solid transparent;
}
.mobileMenuContent::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}
.mobileMenuContent::-webkit-scrollbar-track {
  background: transparent;
}
.mobileMenuHeader {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.mobileMenuCatalog {
  padding: 10px 24px;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.mobileMenuCatalogArrow {
  margin-left: auto;
}
.mobileMenuNavItem {
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.mobileMenuNavItem:last-child {
  border-bottom: none;
}
.mobileMenuNavLink {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}
.mobileMenuClose {
  display: flex;
}
@media (max-width: 700px) {
  .mobileMenuContent {
    padding: 0;
  }
  .mobileMenuHeader {
    padding: 12px 0;
    gap: 10px;
    margin-bottom: 0;
  }
  .mobileMenuCatalog {
    padding: 8px 24px;
    margin-bottom: 22px;
  }
  .mobileMenuNavItem {
    padding: 28px 0 24px;
  }
  .mobileMenuClose img {
    width: 32px;
    height: 32px;
  }
}
.modal {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(4, 17, 28, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease-in-out;
  z-index: -1;
}
.modal.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1000;
}
.modalContent {
  background-color: #ffffff;
  border-radius: 20px;
}
.modalItemContent {
  max-width: 534px;
  width: 100%;
  padding: 28px 24px;
}
.modalItemTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modalItemClose {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.modalItemClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.modalItemName {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}
.modalItemNameMob {
  display: none;
}
.modalItemInfo {
  display: flex;
  gap: 16px;
  margin-bottom: 43px;
}
.modalItemInfoList {
  width: calc(100% - 196px);
}
.modalItemInfoItem {
  padding: 8px;
  background-color: #EEF3F8;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
}
.modalItemInfoItemLabel {
  font-size: 13px;
  line-height: 20px;
  color: #889AA9;
}
.modalItemInfoItemValue {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}
.modalItemInfoItemValueLink {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #1270C1;
  transition: color 0.3s ease-out;
}
.modalItemInfoItemValueLink:hover {
  color: #2D90E4;
}
.modalItemImages {
  overflow: hidden;
  width: 180px;
}
.modalItemSlider {
  margin-bottom: 42px;
}
.modalItemThumbsSlide {
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}
.modalItemThumbsSlide.swiper-slide-thumb-active {
  border: 2px solid #1270C1;
  border-radius: 10px;
}
.modalItemThumbsSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modalItemDesc {
  font-size: 17px;
  line-height: 28px;
  margin-bottom: 24px;
}
.modalItemActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.modalItemActionsIcon {
  display: block;
}
.modalItemActionsIconActive {
  display: none;
}
.modalItemActionsButton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  position: relative;
}
.modalItemActionsButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.4s ease-out;
}
.modalItemActionsButton svg {
  position: relative;
  width: 24px;
}
.modalItemActionsButton svg path {
  fill: #000000;
  transition: fill 0.3s ease-out;
}
.modalItemActionsButton:hover {
  border: none;
}
.modalItemActionsButton:hover::before {
  opacity: 1;
}
.modalItemActionsButton:hover svg path {
  fill: #ffffff;
}
.modalItemActionsButton.active {
  border: none;
}
.modalItemActionsButton.active::before {
  opacity: 1;
}
.modalItemActionsButton.active svg path {
  fill: #ffffff;
}
.modalItemActionsButton.active .modalItemActionsIcon {
  display: none;
}
.modalItemActionsButton.active .modalItemActionsIconActive {
  display: block;
}
.modalItemActionsButtonFavorite {
  margin-left: auto;
}
.modalItemPrice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 18px;
}
.modalItemPriceNew {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
}
.modalItemPriceOld {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #F40000;
  text-decoration: line-through;
}
.modalItemAddToCart {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 36px;
}
.modalAuthContent {
  max-width: 488px;
  width: 100%;
  padding: 36px 28px;
}
.modalAddAutoContent {
  max-width: 578px;
  width: 100%;
  padding: 28px;
}
.modalAddAutoTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.modalAddAutoClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.modalAddAutoClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.modalAddAutoTitle {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
}
.modalAddAutoInfo {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}
.modalAddAutoInfo.active {
  opacity: 1;
  max-height: 500px;
}
.modalAddAutoInfoList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modalAddAutoInfoItem {
  width: calc(50% - 4px);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
  background-color: #EEF3F8;
}
.modalAddAutoInfoItemLabel {
  font-size: 14px;
  line-height: 20px;
  color: #889AA9;
}
.modalAddAutoInfoItemValue {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}
.modalAddAutoDropdown {
  margin-bottom: 8px;
}
.modalAddAutoDropdownToggle {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #D9DDE1;
  background-color: #ffffff;
  border-radius: 40px;
}
.modalAddAutoDropdownBody {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  background-color: #ffffff;
}
.modalAddAutoDropdownBody.active {
  top: 0;
}
.modalAddAutoDropdownBodyList {
  max-height: 200px;
  overflow-y: auto;
  border-radius: 0 0 20px 20px;
}
.modalAddAutoDropdownBodyListItem {
  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  text-align: center;
  background-color: #ffffff;
  transition: background-color 0.3s ease-out;
}
.modalAddAutoDropdownBodyListItem:hover {
  background-color: #EAF3FF;
}
.modalAddAutoButtonAdd {
  width: 100%;
  margin-top: 20px;
}
.modalAddAutoName {
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 16px;
}
.modalAddAutoImage {
  width: 100%;
  height: 180px;
  margin-bottom: 16px;
}
.modalAddAutoImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modalNoteContent {
  max-width: 550px;
  width: 100%;
  padding: 28px;
  border-radius: 20px;
}
.modalNoteTop {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.modalNoteTitle {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
}
.modalNoteClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.modalNoteClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.modalNoteText {
  margin-bottom: 24px;
}
.modalNoteFormInput {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid #D9DDE1;
  border-radius: 40px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 24px;
}
.modalNoteFormSubmit {
  width: 100%;
}
.modalNoteSuccessContent {
  max-width: 430px;
  width: 100%;
  padding: 56px 58px;
  border-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modalNoteSuccessTitle {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 32px 0 12px;
}
.modalNoteSuccessClose {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.modalNoteSuccessClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.modalNoteSuccessIcon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(90deg, #3D8DD1 0%, #095696 100%);
}
.modalNoteSuccessText {
  text-align: center;
  line-height: 24px;
}
.modalShopsContent {
  position: relative;
  z-index: -1;
  max-width: 0;
  width: 100%;
  border-radius: 20px;
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s ease-out, max-height 0.2s ease-out, max-width 0.2s ease-out;
}
.modalShopsContent.active {
  opacity: 1;
  pointer-events: auto;
  max-height: 350px;
  max-width: 678px;
  z-index: 10;
  padding: 36px;
}
.modalShopsTop {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.modalShopsTitle {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
}
.modalShopsClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.modalShopsClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.modalShopsList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.modalShopsButton {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 24px;
  background-color: #8FC035;
  border-radius: 40px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #ffffff;
  box-shadow: 0 0 24px transparent;
  transition: box-shadow 0.3s ease-out, gap 0.3s ease-out;
}
.modalShopsButtonEmpty {
  background-color: #F40000;
}
.modalShopsButton:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  gap: 20px;
}
.modalShopContent {
  position: relative;
  z-index: -1;
  max-width: 0;
  width: 100%;
  border-radius: 20px;
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out, max-height 0.2s ease-out, max-width 0.2s ease-out;
}
.modalShopContent.active {
  opacity: 1;
  pointer-events: auto;
  max-height: 515px;
  max-width: 678px;
  z-index: 10;
  padding: 36px;
}
.modalShopTop {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}
.modalShopBack {
  display: flex;
}
.modalShopTitle {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
}
.modalShopClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.modalShopClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.modalShopBody {
  display: flex;
  gap: 36px;
}
.modalShopMap {
  width: 337px;
}
.modalShopMap iframe {
  width: 100%;
  height: 360px;
  border-radius: 20px;
}
.modalShopInfo {
  width: calc(100% - 373px);
}
.modalShopInfo h4 {
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.modalShopInfo p {
  line-height: 32px;
}
.modalShopInfo a {
  display: block;
  line-height: 32px;
  color: #1270C1;
  text-decoration: underline;
  font-weight: 600;
}
@media (max-width: 1000px) {
  .modalFiltersContent {
    background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
    max-width: 100%;
    width: 100%;
    height: 100%;
    padding: 48px 40px 56px;
    border-radius: 0;
    overflow-y: auto;
    position: relative;
  }
  .modalFiltersTop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 42px;
  }
  .modalFiltersTitle {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .modalFiltersIcon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1270C1;
  }
  .modalFiltersClose {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 2px solid #000000;
    transition: background-color 0.3s ease-out, border 0.3s ease-out;
  }
  .modalFiltersClose:hover {
    background-color: #2D90E4;
    border: 2px solid #2D90E4;
  }
  .modalSort {
    align-items: flex-end;
  }
  .modalSortContent {
    max-width: 100%;
    width: 100%;
    padding: 28px;
    border-radius: 20px 20px 0 0;
  }
  .modalSortTop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
  }
  .modalSortTitle {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .modalSortIcon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1270C1;
  }
  .modalSortClose {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 2px solid #000000;
    transition: background-color 0.3s ease-out, border 0.3s ease-out;
  }
  .modalSortClose:hover {
    background-color: #2D90E4;
    border: 2px solid #2D90E4;
  }
  .modalSortBodyListItem {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E7EBEE;
  }
  .modalSortBodyListItem:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
}
@media (max-width: 700px) {
  .modalAuthContent {
    max-width: 100%;
    height: 100%;
    padding: 28px 20px;
    border-radius: 0;
    overflow-y: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modalItemContent {
    max-width: 100%;
    height: 100%;
    padding: 28px 20px;
    border-radius: 0;
    overflow-y: auto;
    position: relative;
  }
  .modalItemTop {
    margin: 0;
  }
  .modalItemClose {
    position: absolute;
    top: 28px;
    right: 20px;
  }
  .modalItemName {
    display: none;
  }
  .modalItemNameMob {
    display: block;
    font-size: 20px;
    text-align: center;
    margin: 36px 0 28px;
  }
  .modalItemInfo {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
  }
  .modalItemInfoList {
    width: 100%;
  }
  .modalItemInfoItemValue {
    font-size: 16px;
  }
  .modalItemImages {
    overflow: hidden;
    width: 240px;
  }
  .modalItemSlider {
    margin-bottom: 36px;
  }
  .modalItemSlider img {
    width: 240px;
    height: 240px;
    object-fit: cover;
  }
  .modalItemDesc {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .modalItemActions {
    flex-wrap: wrap;
  }
  .modalItemPrice {
    order: 1;
  }
  .modalItemPriceNew {
    font-size: 22px;
    line-height: 28px;
  }
  .modalFiltersContent {
    padding: 28px 20px;
  }
  .modalFiltersTop {
    margin-bottom: 32px;
  }
  .modalAddAutoContent {
    width: calc(100% - 30px);
    padding: 24px 20px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modalAddAutoClose {
    width: 38px;
    height: 38px;
  }
  .modalAddAutoTitle {
    font-size: 18px;
  }
  .modalAddAutoDropdownToggleText {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .modalAddAutoInfo.active {
    max-height: 700px;
  }
  .modalAddAutoInfoItem {
    width: 100%;
    padding: 10px 12px;
  }
  .modalAddAutoInfoItemValue {
    font-size: 14px;
  }
  .modalAddAutoButtonAdd {
    margin-top: 28px;
  }
  .modalAddAutoName {
    font-size: 15px;
    margin-bottom: 28px;
  }
  .modalAddAutoImage {
    height: 100px;
    margin-bottom: 28px;
  }
  .modalSortContent {
    padding: 28px 20px;
  }
  .modalSortBodyListItem {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .modalSortTitle {
    font-size: 20px;
  }
  .modalShopsContent {
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
  }
  .modalShopsContent.active {
    padding: 28px 20px;
    max-height: 100%;
  }
  .modalShopsTop {
    margin-bottom: 38px;
  }
  .modalShopContent {
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
  }
  .modalShopContent.active {
    padding: 28px 20px;
    max-height: 100%;
  }
  .modalShopTop {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 32px;
  }
  .modalShopTitle {
    margin-top: 42px;
    width: 100%;
    order: 1;
    text-align: center;
  }
  .modalShopBody {
    flex-direction: column-reverse;
    gap: 32px;
  }
  .modalShopMap {
    width: 100%;
  }
  .modalShopMap iframe {
    width: 100%;
    height: 340px;
  }
  .modalShopInfo {
    width: 100%;
  }
  .modalNoteContent {
    width: calc(100% - 30px);
    padding: 24px 20px;
  }
  .modalNoteTop {
    gap: 12px;
    margin-bottom: 30px;
  }
  .modalNoteTitle {
    font-size: 16px;
  }
  .modalNoteText {
    text-align: center;
  }
  .modalNoteSuccessContent {
    width: calc(100% - 30px);
    padding: 48px 67px;
  }
  .modalNoteSuccessTitle {
    font-size: 18px;
    margin: 20px 0 8px;
  }
  .modalNoteSuccessClose {
    top: 24px;
    right: 20px;
  }
  .modalNoteSuccessIcon {
    width: 48px;
    height: 48px;
  }
  .modalNoteSuccessText {
    font-size: 15px;
    line-height: 28px;
    text-align: center;
  }
}
.productCard {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  transition: box-shadow 0.3s ease-out;
}
.productCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 0;
  pointer-events: none;
}
.productCardNoStock .productCardImage {
  filter: grayscale(1);
}
.productCard:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
.productCard:hover .productCardFavorite {
  opacity: 1;
}
.productCard:hover .productCardCompare {
  opacity: 1;
}
.productCard:hover .productCardAddToCart::before {
  transform: translate(40%, 40%) scale(1);
}
.productCard:hover .productCardAddToCart svg path {
  fill: #ffffff;
}
.productCardSticker {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-24px, -24px);
}
.productCardStickerSale {
  background-color: #F40000;
}
.productCardStickerNew {
  background: linear-gradient(165deg, #28A745 0%, #D0D83E 100%);
}
.productCardStickerText {
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  position: absolute;
  bottom: 30px;
  right: 22px;
}
.productCardSticker img {
  position: absolute;
  bottom: 29px;
  right: 29px;
}
.productCardActions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}
.productCardFavorite {
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.productCardFavorite.active {
  opacity: 1;
}
.productCardFavorite.active svg path {
  fill: #2D90E4;
}
.productCardFavorite svg path {
  fill: #D3D3D3;
  transition: fill 0.3s ease-out;
}
.productCardFavorite:hover svg path {
  fill: #2D90E4;
}
.productCardCompare {
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.productCardCompare.active {
  opacity: 1;
}
.productCardCompare.active svg path {
  fill: #2D90E4;
}
.productCardCompare svg path {
  fill: #D3D3D3;
  transition: fill 0.3s ease-out;
}
.productCardCompare:hover svg path {
  fill: #2D90E4;
}
.productCardOpen {
  display: flex;
}
.productCardOpen svg path {
  fill: #D3D3D3;
  transition: fill 0.3s ease-out;
}
.productCardOpen:hover svg path {
  fill: #2D90E4;
}
.productCardLink {
  position: relative;
  z-index: 1;
}
.productCardImage {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
}
.productCardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.productCardName {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.productCardPrice {
  display: flex;
  align-items: center;
  gap: 8px;
}
.productCardPriceNew {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
}
.productCardPriceOld {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #F40000;
  text-decoration: line-through;
}
.productCardBottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}
.productCardAddToCart {
  display: flex;
  position: relative;
  font-size: 0;
}
.productCardAddToCart::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(100%, 100%) scale(0);
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
  border-radius: 50%;
  transition: transform 0.3s ease-out;
  z-index: -1;
}
.productCardAddToCart svg path {
  fill: #D3D3D3;
  transition: fill 0.3s ease-out;
}
.productCardAddToCartMobile {
  display: none;
}
@media (max-width: 1000px) {
  .productCard {
    padding: 20px 16px;
  }
  .productCard:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  }
  .productCard:hover .productCardAddToCart::before {
    display: none;
  }
  .productCard:hover .productCardAddToCart svg path {
    fill: #1270C1;
  }
  .productCardSticker {
    width: 72px;
    height: 72px;
    transform: translate(-10px, -10px);
  }
  .productCardSticker img {
    width: 27px;
    bottom: 20px;
    right: 20px;
  }
  .productCardFavorite {
    opacity: 1;
  }
  .productCardCompare {
    opacity: 1;
  }
  .productCardBottom {
    margin-top: 20px;
  }
  .productCardAddToCart {
    font-size: 20px;
    line-height: normal;
    font-weight: 600;
    color: #1270C1;
    align-items: center;
  }
  .productCardAddToCart::before {
    display: none;
  }
  .productCardAddToCart svg path {
    fill: #1270C1;
  }
}
@media (max-width: 700px) {
  .productCard {
    padding: 12px;
  }
  .productCardNoStock .productCardAddToCartMobile {
    filter: grayscale(1);
    cursor: not-allowed;
  }
  .productCardSticker {
    width: 52px;
    height: 52px;
    transform: translate(-8px, -8px);
  }
  .productCardSticker img {
    width: 20px;
    bottom: 14px;
    right: 14px;
  }
  .productCardStickerText {
    font-size: 11px;
    line-height: normal;
    bottom: 18px;
    right: 11px;
  }
  .productCardImage {
    width: 120px;
    height: 120px;
  }
  .productCardActions {
    gap: 12px;
    top: 12px;
    right: 12px;
  }
  .productCardActions svg {
    width: 20px;
    height: 20px;
  }
  .productCardName {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 12px;
  }
  .productCardPrice {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    height: 44px;
  }
  .productCardPriceNew {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .productCardPriceOld {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
  }
  .productCardBottom {
    margin-top: 6px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .productCardAddToCart {
    display: none;
  }
  .productCardAddToCartMobile {
    display: flex;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    padding: 8px;
    width: 100%;
  }
  .productCardAddToCartMobile svg {
    width: 20px;
    height: 20px;
  }
  .productCardAddToCartMobile svg path {
    fill: #ffffff;
  }
}
.productQuantity {
  display: flex;
  align-self: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.productQuantityLabel {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #ffffff;
  background-color: #8FC035;
  border-radius: 40px;
  padding: 2px 12px;
}
.productQuantityLabelNoStock {
  background-color: #F40000;
}
.productQuantityIndicators {
  display: flex;
  align-items: center;
  gap: 4px;
}
.productQuantityIndicators.full .productQuantityIndicator {
  background-color: #8FC035;
}
.productQuantityIndicators.four .productQuantityIndicator:nth-child(-n+4) {
  background-color: #8FC035;
}
.productQuantityIndicators.three .productQuantityIndicator:nth-child(-n+3) {
  background-color: #8FC035;
}
.productQuantityIndicators.two .productQuantityIndicator:nth-child(-n+2) {
  background-color: #8FC035;
}
.productQuantityIndicators.one .productQuantityIndicator:nth-child(-n+1) {
  background-color: #8FC035;
}
.productQuantityIndicator {
  width: 5px;
  height: 15px;
  background-color: #E1E1E1;
  border-radius: 1px;
}
@media (max-width: 700px) {
  .productQuantityLabel {
    font-size: 12px;
    padding: 0 12px;
  }
}
.related {
  margin-bottom: 38px;
}
.relatedTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.relatedNav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.relatedNavButton {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  text-transform: uppercase;
  color: #889AA9;
  transition: color 0.3s ease-out;
}
.relatedNavButton.active {
  color: #000000;
}
.relatedNavButton.active:hover {
  color: #000000;
}
.relatedNavButton:hover {
  color: #1270C1;
}
.relatedSlider {
  overflow: hidden;
  padding: 24px 10px;
}
.relatedSliderNav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.relatedSliderNavButton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  border: 2px solid #000000;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-out;
}
.relatedSliderNavButton svg path {
  stroke: #000000;
  transition: stroke 0.3s ease-out;
}
.relatedSliderNavButton:hover {
  background-color: #1270C1;
  border-color: #1270C1;
}
.relatedSliderNavButton:hover svg path {
  stroke: #ffffff;
}
@media (max-width: 1000px) {
  .related {
    margin-bottom: 28px;
  }
  .relatedTop {
    margin-bottom: 20px;
  }
  .relatedNav {
    gap: 16px;
  }
  .relatedNavButton {
    font-size: 17px;
  }
  .relatedSlider {
    padding: 20px 10px;
  }
  .relatedSliderNav {
    margin-left: 0;
  }
  .relatedSliderNavButton {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 700px) {
  .related {
    margin-bottom: 12px;
  }
  .related.wrapper {
    padding: 0;
  }
  .relatedTop {
    margin-bottom: 12px;
    padding: 0 15px;
  }
  .relatedTitle {
    width: 100%;
    margin-bottom: 16px;
  }
  .relatedNavButton {
    font-size: 15px;
    line-height: 28px;
    position: relative;
  }
  .relatedNavButton::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: calc(100% + 4px);
    height: 2px;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  .relatedNavButton.active::before {
    opacity: 1;
  }
  .relatedSliderNav {
    margin-left: auto;
  }
  .relatedSliderNavButton {
    width: 28px;
    height: 28px;
  }
}
.sales {
  margin-bottom: 38px;
}
.salesTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.salesSlider {
  overflow: hidden;
  padding: 24px 10px;
}
.salesSliderNav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
.salesSliderNavButton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  border: 2px solid #000000;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-out;
}
.salesSliderNavButton svg path {
  stroke: #000000;
  transition: stroke 0.3s ease-out;
}
.salesSliderNavButton:hover {
  background-color: #1270C1;
  border-color: #1270C1;
}
.salesSliderNavButton:hover svg path {
  stroke: #ffffff;
}
@media (max-width: 1000px) {
  .sales {
    margin-bottom: 28px;
  }
  .salesTop {
    margin-bottom: 20px;
  }
  .salesNav {
    gap: 16px;
  }
  .salesNavButton {
    font-size: 17px;
  }
  .salesSlider {
    padding: 20px 10px;
  }
  .salesSliderNav {
    margin-left: 0;
  }
  .salesSliderNavButton {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 700px) {
  .sales {
    margin-bottom: 12px;
  }
  .sales.wrapper {
    padding: 0;
  }
  .salesTop {
    margin-bottom: 32px;
    padding: 0 15px;
  }
  .salesSliderNav {
    margin-left: auto;
  }
  .salesSliderNavButton {
    width: 28px;
    height: 28px;
  }
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #ffffff;
  border-radius: 34px;
  position: relative;
}
.searchHeader {
  max-width: 695px;
  width: 100%;
  margin-right: 24px;
}
.searchInput {
  width: calc(100% - 40px);
  color: #000000;
}
.searchInput::placeholder {
  color: #A9A9A9;
}
.searchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 17, 28, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease-out;
}
.searchOverlay.active {
  opacity: 1;
  z-index: 5;
}
.searchResults {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin-top: 12px;
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  z-index: -1;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease-out;
}
.searchResults.active {
  opacity: 1;
  pointer-events: auto;
  max-height: 500px;
  z-index: 10;
}
.searchResultsItem {
  padding: 20px 24px;
  border-bottom: 1px solid #E7EBEE;
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: #ffffff;
  transition: background-color 0.3s ease-out;
}
.searchResultsItem:hover {
  background-color: #EEF3F8;
}
.searchResultsItemImage {
  width: 80px;
  height: 80px;
  display: flex;
}
.searchResultsItemImage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.searchResultsItemPrice {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.searchResultsItemPriceNew {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.searchResultsItemPriceOld {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: #F40000;
  text-decoration: line-through;
}
.searchResultsItemName {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #000000;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}
.searchResultsAll {
  padding: 32px;
  display: flex;
  justify-content: center;
  gap: 12px;
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  transition: color 0.3s ease-out;
}
.searchResultsAll svg path {
  fill: #000000;
  transition: fill 0.3s ease-out;
}
.searchResultsAll:hover {
  color: #1270C1;
}
.searchResultsAll:hover svg path {
  fill: #1270C1;
}
.searchResultsBrandsItemLink {
  font-size: 15px;
  line-height: 24px;
  color: #000000;
  font-weight: 400;
  text-transform: uppercase;
  display: block;
  text-align: center;
  padding: 12px 0;
}
.searchResultsBrandsItemLink:hover {
  color: #1270C1;
}
.searchHome {
  display: none;
}
.searchBrands {
  margin-bottom: 20px;
}
.searchBrandsMobile {
  display: none;
}
.searchButton {
  display: flex;
}
.searchBlogPage {
  width: 100%;
  margin-bottom: 16px;
}
.searchBlogPageMobile {
  display: none;
}
@media (max-width: 1000px) {
  .searchHeader {
    max-width: 100%;
    margin-right: 0;
    order: 1;
    margin-top: 12px;
  }
  .searchHome {
    max-width: 100%;
    display: flex;
    border: 1px solid #D9DDE1;
    padding: 8px 20px;
    margin-bottom: 24px;
  }
  .searchMenu {
    margin-bottom: 16px;
  }
  .searchBlogPage {
    display: none;
  }
  .searchBlogPageMobile {
    display: flex;
    margin-bottom: 24px;
  }
}
@media (max-width: 700px) {
  .search {
    padding: 8px 20px;
  }
  .searchInput {
    font-size: 14px;
    line-height: 20px;
  }
  .searchButton img {
    width: 20px;
  }
  .searchBrands {
    display: none;
  }
  .searchBrandsMobile {
    display: flex;
    margin-bottom: 24px;
  }
}
.socialsProduct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 27px;
}
.socialsProduct .socialsTitle {
  font-size: 15px;
  color: #889AA9;
  margin-bottom: 0;
}
.socialsTitle {
  color: #ffffff;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
}
.socialsList {
  display: flex;
  align-items: center;
  gap: 12px;
}
.socialsLink {
  display: flex;
  border-radius: 50%;
  box-shadow: 0 0 14px 0 transparent;
  transition: box-shadow 0.3s ease-out;
}
.socialsLink:hover {
  box-shadow: 0 0 20px 0 rgba(34, 158, 217, 0.4);
}
.socialsLinkButton {
  padding: 6px 16px;
  border-radius: 44px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #000000;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
@media (max-width: 1100px) {
  .socialsTitle {
    text-align: center;
  }
  .socialsList {
    justify-content: center;
  }
  .socialsMenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .socialsMenu .socialsTitle {
    font-size: 16px;
    line-height: 24px;
    text-transform: none;
    margin-bottom: 0;
  }
}
.subscriptionWrapper {
  background: url('../images/bg/subs-bg.webp') no-repeat center center / cover;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin: 80px 0 42px;
}
.subscriptionContent {
  padding: 60px 50px;
  max-width: 650px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  position: absolute;
  transition: opacity 0.3s ease-out;
}
.subscriptionContent.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.subscriptionTitle {
  font-weight: 300;
  font-size: 36px;
  line-height: 48px;
  margin-bottom: 24px;
  color: #ffffff;
  text-transform: uppercase;
}
.subscriptionTitle span {
  font-weight: 600;
}
.subscriptionText {
  font-weight: 400;
  font-size: 17px;
  margin-bottom: 42px;
  color: #ffffff;
}
.subscriptionForm {
  display: flex;
  align-items: center;
  gap: 12px;
}
.subscriptionInput {
  max-width: 420px;
  width: 100%;
  border-radius: 40px;
  padding: 16px 20px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
}
.subscriptionImage {
  width: 420px;
  height: 420px;
  margin: -185px auto 0;
}
.subscriptionImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(-16px 6px 38px rgba(0, 0, 0, 0.1)) drop-shadow(-65px 23px 69px rgba(0, 0, 0, 0.09)) drop-shadow(-147px 51px 93px rgba(0, 0, 0, 0.05)) drop-shadow(-261px 90px 111px rgba(0, 0, 0, 0.01));
}
.subscriptionSuccess {
  padding: 60px 50px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  position: absolute;
  max-width: 400px;
  width: 100%;
}
.subscriptionSuccess.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.subscriptionSuccess img {
  margin-bottom: 16px;
}
.subscriptionButton {
  padding: 17px 36px;
}
@media (max-width: 1200px) {
  .subscriptionWrapper {
    gap: 10px;
  }
  .subscriptionContent {
    padding: 60px 20px;
    max-width: 500px;
  }
  .subscriptionTitle {
    font-size: 30px;
    line-height: 40px;
  }
}
@media (max-width: 1000px) {
  .subscriptionWrapper {
    background-image: url('../images/bg/subs-bg_tab.webp');
    flex-direction: column-reverse;
    margin: 132px 0 72px;
  }
  .subscriptionContent {
    padding: 0 48px 54px 48px;
    max-width: 100%;
  }
  .subscriptionTitle {
    text-align: center;
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 20px;
  }
  .subscriptionText {
    text-align: center;
    margin-bottom: 52px;
  }
  .subscriptionForm {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .subscriptionInput {
    max-width: 100%;
  }
  .subscriptionImage {
    width: 372px;
    height: 372px;
    margin: -140px auto 0 34px;
  }
  .subscriptionSuccess {
    display: none;
  }
}
@media (max-width: 700px) {
  .subscriptionWrapper {
    background-image: url('../images/bg/subs-bg_mob.webp');
    margin: 75px 0 48px;
  }
  .subscriptionContent {
    padding: 0 14px 32px;
  }
  .subscriptionTitle {
    text-align: left;
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 24px;
  }
  .subscriptionText {
    font-size: 15px;
    text-align: left;
    margin-bottom: 32px;
  }
  .subscriptionForm {
    gap: 12px;
  }
  .subscriptionInput {
    padding: 11px 20px;
    font-size: 15px;
  }
  .subscriptionButton {
    padding: 12px 36px;
  }
  .subscriptionImage {
    width: 266px;
    height: 266px;
    margin: -100px auto 0 30px;
  }
}
.userNavList {
  display: flex;
  align-items: center;
  gap: 8px;
}
.userNavItem {
  position: relative;
}
.userNavImages {
  position: relative;
  width: 28px;
  height: 28px;
}
.userNavLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.userNavLinkText {
  margin-top: 2px;
  color: #ffffff;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}
.userNavLink.active .userNavImageFill {
  opacity: 1;
}
.userNavImage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
.userNavImageFill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.userNavImageFill:hover {
  opacity: 1;
}
.userNavImage:hover {
  opacity: 0;
}
.userNavCounter {
  position: absolute;
  top: -4px;
  right: -6px;
  background-color: #28A745;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.userNavCounter.active {
  opacity: 1;
}
@media (max-width: 1000px) {
  .userNav {
    margin-left: auto;
  }
  .userNavList {
    gap: 12px;
  }
  .userNavItem:nth-child(1) {
    display: none;
  }
  .userNavItem:nth-child(2) {
    display: none;
  }
  .userNavItemMenu {
    width: 100%;
  }
  .userNavItemMenu:nth-child(1) {
    display: block;
  }
  .userNavItemMenu:nth-child(2) {
    display: block;
  }
  .userNavLink {
    flex-direction: row;
  }
  .userNavLinkText {
    font-size: 0;
  }
  .userNavImages {
    width: 36px;
    height: 36px;
  }
  .userNavMenu {
    margin-top: 32px;
    margin-left: 0;
  }
  .userNavMenu .userNavList {
    flex-direction: column;
    align-items: flex-start;
  }
  .userNavMenu .userNavItemMenu {
    width: 100%;
  }
  .userNavMenu .userNavItemMenu:nth-child(1) {
    display: block;
  }
  .userNavMenu .userNavItemMenu:nth-child(2) {
    display: block;
  }
  .userNavMenu .userNavItemMenu:last-child {
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }
  .userNavMenu .userNavItemMenu .userNavLink {
    gap: 12px;
  }
  .userNavMenu .userNavItemMenu .userNavLinkText {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (max-width: 700px) {
  .userNavList {
    gap: 8px;
  }
  .userNavImages {
    width: 28px;
    height: 28px;
  }
  .userNavMenu {
    margin-top: 28px;
  }
  .userNavMenu .userNavItemMenu:last-child {
    padding-bottom: 28px;
    margin-bottom: 0;
  }
  .userNavItemMenu {
    margin-bottom: 4px;
  }
}
.dropdown {
  position: relative;
}
.dropdownToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  box-shadow: 0 0 24px transparent;
  transition: box-shadow 0.3s ease-out, border 0.3s ease-out;
}
.dropdownToggleText {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #7D8689;
  transition: color 0.3s ease-out;
}
.dropdownToggleText.selected {
  color: #000000;
}
.dropdownToggle.active {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
}
.dropdownToggle.active svg {
  transform: rotate(180deg);
}
.dropdownToggle.active svg path {
  fill: #000000;
}
.dropdownToggle.active .homeSearchDropdownToggleText {
  color: #000000;
}
.dropdownToggle svg {
  transform: rotate(0);
  transition: fill 0.3s ease-out, transform 0.3s ease-out;
}
.dropdownToggle svg path {
  fill: #7D8689;
}
.dropdownBody {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dropdownBody.active {
  opacity: 1;
  pointer-events: all;
}
@media (max-width: 700px) {
  .dropdownToggle {
    padding: 10px 20px;
  }
  .dropdownToggleText {
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
  }
}
.titleSection {
  font-size: 32px;
  line-height: 44px;
  font-weight: 300;
  text-transform: uppercase;
}
.titleSection span {
  font-weight: 700;
}
@media (max-width: 1000px) {
  .titleSection {
    font-size: 28px;
    line-height: 40px;
  }
  .titleSection span {
    font-weight: 600;
  }
}
@media (max-width: 700px) {
  .titleSection {
    font-size: 24px;
    line-height: 26px;
  }
}
.authBlockTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.authBlockTitle {
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
}
.authBlockClose {
  border: 2px solid #000000;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.authBlockClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.authBlockForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.authBlockFormField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #D9DDE1;
  border-radius: 40px;
  padding: 10px 20px;
}
.authBlockFormInput {
  width: calc(100% - 40px);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.authBlockFormPassword {
  display: flex;
}
.authBlockFormSubmit {
  margin-top: 24px;
}
.authBlockForgotButton {
  align-self: flex-end;
  margin-top: 8px;
  color: #F40000;
}
.authBlockSeparator {
  margin: 24px 0 28px;
  text-align: center;
  overflow: hidden;
}
.authBlockSeparatorText {
  color: #7D8689;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  padding: 0 28px;
  position: relative;
}
.authBlockSeparatorText::before,
.authBlockSeparatorText::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 300px;
  height: 1px;
  background-color: #D9DDE1;
}
.authBlockSeparatorText::before {
  left: 100%;
}
.authBlockSeparatorText::after {
  right: 100%;
}
.authBlockSocialButton {
  width: 100%;
  background-color: #EEF3F8;
  border-radius: 40px;
  padding: 12px;
  position: relative;
}
.authBlockSocialButton::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.authBlockSocialButton:hover::before {
  opacity: 1;
  pointer-events: all;
}
.authBlockSocialButton:hover span {
  color: #ffffff;
}
.authBlockSocialButton span {
  position: relative;
  transition: color 0.3s ease-out;
}
.authBlockSocialButton img {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  z-index: 1;
}
.authBlockAlter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #7D8689;
  margin-top: 30px;
}
.authBlockAlterButton {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #1270C1;
}
.authBlockSetting {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  z-index: -1;
  overflow: hidden;
  transition: all 0.3s ease-out;
}
.authBlockSetting.active {
  opacity: 1;
  pointer-events: auto;
  max-height: 600px;
  overflow: visible;
  z-index: 10;
}
.authBlockText {
  display: inline-block;
  margin-bottom: 32px;
}
.authBlockSuccess {
  text-align: center;
}
.authBlockSuccess .authBlockText {
  display: inline-block;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  margin: 28px 0 42px;
}
.authBlockSuccessButton {
  width: 100%;
}
.garageModal {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  width: 340px;
  right: 0;
  transform: translateX(50%);
  transition: opacity 0.4s ease-in-out;
  z-index: 10;
}
.garageModal.active {
  opacity: 1;
  pointer-events: auto;
}
.garageModalContent {
  margin-top: 12px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  padding: 28px 24px;
  text-align: center;
}
.garageModalTitle {
  font-size: 17px;
  line-height: 32px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 4px;
}
.garageModalClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  transition: background-color 0.3s ease-out, border 0.3s ease-out;
}
.garageModalClose:hover {
  background-color: #2D90E4;
  border: 2px solid #2D90E4;
}
.garageModalIcon {
  display: flex;
  width: 48px;
  position: relative;
  margin: -4px auto 24px;
}
.garageModalCounter {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #28A745;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease-out;
}
.garageModalText {
  font-size: 17px;
  line-height: 28px;
  color: #7D8689;
  margin-bottom: 28px;
  display: inline-block;
}
.policy {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.policyContent {
  padding: 68px 0;
}
.policyTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 58px;
}
.policyText {
  padding: 64px 100px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.policyTextSpecial {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
  padding: 24px 28px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.policyText a {
  color: #000000;
  text-decoration: underline;
}
.policyText p {
  padding-bottom: 16px;
}
.policyText p b {
  text-transform: uppercase;
}
.policyText h3 {
  margin-top: 32px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
}
.policyText ul {
  margin-left: 20px;
}
.policyText ul li {
  list-style: disc;
  margin-bottom: 8px;
}
@media (max-width: 1000px) {
  .policyContent {
    padding: 52px 0;
  }
  .policyTop {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 48px;
    padding: 0 20px;
  }
  .policyText {
    padding: 36px 25px;
  }
  .policyText h3 {
    margin-top: 20px;
    margin-bottom: 16px;
  }
}
@media (max-width: 700px) {
  .policyContent {
    padding: 36px 0;
  }
  .policyTop {
    gap: 16px;
    margin-bottom: 32px;
    padding: 0 20px;
  }
  .policyText {
    padding: 28px 24px;
  }
  .policyText h3 {
    font-size: 18px;
  }
  .policyTextSpecial {
    padding: 20px 16px;
  }
  .policyTextSpecial p {
    display: flex;
    flex-wrap: wrap;
  }
  .policyTextSpecial p b {
    width: 100%;
  }
}
.breadcrumbsList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.breadcrumbsItem {
  line-height: 20px;
}
.breadcrumbsLink {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #889AA9;
  text-transform: uppercase;
  transition: color 0.3s ease-out;
}
.breadcrumbsLink:hover {
  color: #1E88E2;
}
.breadcrumbsSep {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #889AA9;
}
.breadcrumbsItem:last-child .breadcrumbsLink {
  color: #000000;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .breadcrumbsList {
    gap: 4px;
  }
  .breadcrumbsLink {
    font-size: 12px;
  }
  .breadcrumbsSep {
    font-size: 12px;
  }
}
.errorPage {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.errorPageContent {
  padding: 242px 0;
  max-width: 424px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.errorPageImage {
  margin-bottom: 24px;
  filter: drop-shadow(-16px 6px 38px rgba(0, 0, 0, 0.1)) drop-shadow(-65px 23px 69px rgba(0, 0, 0, 0.09)) drop-shadow(-147px 51px 93px rgba(0, 0, 0, 0.05)) drop-shadow(-261px 90px 111px rgba(0, 0, 0, 0.01));
}
.errorPageTitle {
  margin-bottom: 16px;
  text-align: center;
}
.errorPageText {
  margin-bottom: 36px;
  text-align: center;
}
@media (max-width: 1000px) {
  .errorPageContent {
    padding: 210px 0;
  }
}
@media (max-width: 700px) {
  .errorPageContent {
    padding: 135px 0;
  }
  .errorPageImage {
    width: 300px;
    margin-bottom: 28px;
  }
}
.catalog {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.catalogContent {
  position: relative;
  padding: 56px 0 64px;
  margin-bottom: 64px;
}
.catalogContent::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #E5E8EF 0%, rgba(229, 232, 239, 0) 100%);
  pointer-events: none;
}
.catalogContentSubcategory {
  margin-bottom: 0;
}
.catalogContentSubcategory::before {
  display: none;
}
.catalogTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
}
.catalogTopReverse {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 24px;
}
.catalogBlock {
  display: flex;
  align-items: flex-start;
  gap: 34px;
}
.catalogBlockCategories {
  width: 306px;
}
.catalogBlockFilters {
  width: 306px;
}
.catalogList {
  width: calc(100% - 340px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.catalogListSubcategory {
  width: 100%;
  margin-bottom: 56px;
}
.catalogItems {
  width: calc(100% - 340px);
}
.catalogItemsTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px;
}
.catalogItemsCount {
  font-weight: 500;
  color: #7D8689;
}
.catalogItemsCountMobile {
  display: none;
}
.catalogItem {
  width: calc(25% - 9px);
}
.catalogLink {
  width: 100%;
  padding: 24px 33px;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 24px transparent;
  transition: box-shadow 0.3s ease-out;
}
.catalogLink:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
.catalogLink:hover .catalogLinkTitle {
  color: #1270C1;
}
.catalogLinkImage {
  margin-bottom: 30px;
  width: 200px;
  height: 200px;
}
.catalogLinkImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0px 4px 9px rgba(74, 74, 74, 0.1)) drop-shadow(0 17px 17px rgba(74, 74, 74, 0.09)) drop-shadow(0 38px 23px rgba(74, 74, 74, 0.05)) drop-shadow(0 68px 27px rgba(74, 74, 74, 0.01)) drop-shadow(0 107px 30px rgba(74, 74, 74, 0));
}
.catalogLinkTitle {
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  height: 48px;
  display: flex;
  align-items: center;
  color: #000000;
  margin-bottom: 4px;
  transition: color 0.3s ease-out;
}
.catalogLinkQuantity {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  color: #A9A9A9;
}
.catalogFiltersRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.catalogFiltersRowList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.catalogFiltersRowButton {
  padding: 8px 20px;
  border-radius: 40px;
  background-color: #1270C1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  transition: background-color 0.3s ease-out;
}
.catalogFiltersRowButton:hover {
  background: #1E88E2;
}
.catalogFiltersRowClean {
  color: #7D8689;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  transition: color 0.3s ease-out;
}
.catalogFiltersRowClean:hover {
  color: #1E88E2;
}
@media (max-width: 1500px) {
  .catalogItem {
    width: calc(33.33% - 8px);
  }
}
@media (max-width: 1200px) {
  .catalogItem {
    width: calc(50% - 6px);
  }
}
@media (max-width: 1000px) {
  .catalogContent {
    padding: 52px 0 54px;
    margin-bottom: 54px;
  }
  .catalogTop {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 48px;
  }
  .catalogTopReverse {
    gap: 20px;
  }
  .catalogBlock {
    gap: 0;
  }
  .catalogBlockCategories {
    display: none;
  }
  .catalogBlockFilters {
    display: none;
  }
  .catalogList {
    width: 100%;
  }
  .catalogItems {
    width: 100%;
  }
  .catalogItemsTop {
    margin-bottom: 16px;
    padding: 12px 16px;
    justify-content: flex-start;
    gap: 11px;
  }
  .catalogItemsCount {
    font-size: 15px;
    line-height: 24px;
  }
  .catalogItem {
    width: calc(33.33% - 8px);
  }
  .catalogLink {
    padding: 18px 18px 24px;
  }
  .catalogFiltersRow {
    margin-bottom: 28px;
  }
  .catalogSort {
    margin-left: auto;
  }
}
@media (max-width: 700px) {
  .catalogContent {
    padding: 28px 0 42px;
    margin-bottom: 42px;
  }
  .catalogTop {
    gap: 12px;
    margin-bottom: 28px;
  }
  .catalogTopReverse {
    gap: 12px;
  }
  .catalogListSubcategory {
    margin-bottom: 48px;
  }
  .catalogItemsTop {
    margin-bottom: 24px;
    padding: 12px;
  }
  .catalogItemsCount {
    display: none;
  }
  .catalogItemsCountMobile {
    display: block;
    margin-bottom: 24px;
  }
  .catalogItem {
    width: calc(50% - 6px);
  }
  .catalogLink {
    padding: 10px 10px 22px;
  }
  .catalogLinkImage {
    margin-bottom: 22px;
    width: 140px;
    height: 140px;
  }
  .catalogLinkTitle {
    font-size: 14px;
    line-height: 20px;
    height: 40px;
  }
  .catalogLinkQuantity {
    font-size: 14px;
    line-height: 20px;
  }
  .catalogFiltersRow {
    align-items: flex-start;
    margin-bottom: 24px;
    flex-direction: column;
    gap: 20px;
  }
  .catalogFiltersRowButton {
    font-size: 14px;
  }
  .catalogFiltersRowClean {
    width: 100%;
    font-size: 15px;
    text-align: left;
  }
  .catalogSort {
    margin-left: 0;
    width: calc(100% - 52px);
  }
  .catalogSort .catalogSortDropdownToggle {
    width: 100%;
  }
}
@media (max-width: 400px) {
  .catalogLinkImage {
    margin-bottom: 14px;
    width: 100px;
    height: 100px;
  }
}
.catalogCategoriesSubcategories {
  padding: 20px 16px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 12px;
}
.catalogCategoriesItem {
  padding: 20px 16px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 12px;
}
.catalogCategoriesItem:last-child {
  margin-bottom: 0;
}
.catalogCategoriesItemSubcategories {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}
.catalogCategoriesLink {
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
  transition: color 0.3s ease-out, font-weight 0.1s ease-out;
}
.catalogCategoriesLink:hover {
  color: #1270C1;
}
.catalogCategoriesHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
}
.catalogCategoriesHeaderArrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #1270C1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.catalogCategoriesHeaderArrow img {
  transform: rotate(0);
  transition: transform 0.3s ease-out;
}
.catalogCategoriesHeader.active .catalogCategoriesHeaderArrow img {
  transform: rotate(180deg);
}
.catalogCategoriesBody {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.6s ease-out;
}
.catalogCategoriesBody.active {
  opacity: 1;
  pointer-events: all;
  max-height: 1500px;
  margin-top: 16px;
}
.catalogCategoriesBodyItem {
  margin-bottom: 16px;
  line-height: 24px;
}
.catalogCategoriesBodyLink {
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #000000;
  transition: color 0.3s ease-out, font-weight 0.1s ease-out;
}
.catalogCategoriesBodyLink:hover {
  color: #1270C1;
  font-weight: 600;
}
.filterItem {
  padding: 20px 16px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 12px;
}
.filterItem:last-child {
  margin-bottom: 0;
}
.filterItemHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
}
.filterItemHeaderArrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #1270C1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filterItemHeaderArrow img {
  transform: rotate(0);
  transition: transform 0.3s ease-out;
}
.filterItemHeader.active .filterItemHeaderArrow img {
  transform: rotate(180deg);
}
.filterItemBody {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.6s ease-out;
}
.filterItemBody.active {
  opacity: 1;
  pointer-events: all;
  max-height: 1500px;
  margin-top: 16px;
}
.filterItemBodyItem {
  margin-bottom: 16px;
  line-height: 24px;
}
.filterItemBodyLink {
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #000000;
  transition: color 0.3s ease-out, font-weight 0.1s ease-out;
}
.filterItemBodyLink:hover {
  color: #1270C1;
  font-weight: 600;
}
.filterItemText {
  font-weight: 500;
  margin-bottom: 16px;
}
.filterItemButton {
  width: 100%;
}
.filterItemAutoAdd {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}
.filterItemAutoAdd.active {
  opacity: 1;
  max-height: 500px;
  pointer-events: all;
}
.filterItemAutoInfo {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}
.filterItemAutoInfo.active {
  opacity: 1;
  max-height: 500px;
  pointer-events: all;
}
.filterItemAutoInfoName {
  display: block;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 4px;
}
.filterItemAutoInfoImage {
  width: 100%;
  height: 94px;
  margin-bottom: 16px;
}
.filterItemAutoInfoImage img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.filterItemAutoInfoChars {
  display: block;
  font-size: 15px;
  line-height: 20px;
  color: #7D8689;
  font-weight: 400;
  margin-bottom: 16px;
}
.filterItemAutoInfoDeleteCar {
  width: 100%;
}
.filterOnStock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
}
.filterOnStockInput:checked + .filterOnStockSwitch {
  background-color: #1270C1;
}
.filterOnStockInput:checked + .filterOnStockSwitch::before {
  left: 28px;
}
.filterCheckbox {
  display: flex;
  align-items: center;
  line-height: 28px;
  font-weight: 500;
  cursor: pointer;
}
.filterCheckboxInput {
  display: none;
}
.filterCheckboxInput:checked + .filterCheckboxCustom {
  border-color: #1270C1;
}
.filterCheckboxInput:checked + .filterCheckboxCustom::after {
  opacity: 1;
}
.filterRadio {
  display: flex;
  align-items: center;
  line-height: 28px;
  font-weight: 500;
  cursor: pointer;
}
.filterRadioInput {
  display: none;
}
.filterRadioInput:checked + .filterRadioCustom {
  border-color: #1270C1;
}
.filterRadioInput:checked + .filterRadioCustom::after {
  transform: translate(-50%, -50%) scale(1);
}
.filterOpen {
  display: none;
}
@media (max-width: 1000px) {
  .filterItemAutoInfoName {
    display: inline-block;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px;
  }
  .filterItemAutoInfoImage {
    height: 226px;
  }
  .filterOpen {
    display: flex;
    border: 2px solid #000000;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .filterCounter {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #28A745;
    color: #ffffff;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .filterAddAuto {
    width: 100%;
  }
}
.customSwitch {
  display: block;
  width: 56px;
  height: 28px;
  background-color: #D3D3D3;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
.customSwitch::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: left 0.3s ease-out;
}
.customRadio {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #D1D9E5;
  border-radius: 50%;
  position: relative;
  margin-right: 10px;
  transition: border-color 0.3s ease;
}
.customRadio:hover {
  border-color: #1270C1;
}
.customRadio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #1270C1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}
.customCheckbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #D1D9E5;
  border-radius: 6px;
  position: relative;
  margin-right: 10px;
  transition: border-color 0.3s ease;
}
.customCheckbox:hover {
  border-color: #1270C1;
}
.customCheckbox::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  background: url('../images/icons/checkbox-marker.svg') no-repeat center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rangeInputs {
  display: flex;
  gap: 8px;
}
.rangeInputs span {
  color: #D9DDE1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.rangeInput {
  flex: 1;
}
.rangeInput input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #D9DDE1;
  border-radius: 100px;
  font-size: 15px;
  text-align: center;
  background: #ffffff;
  appearance: none;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.rangeInput input[type="number"]::-webkit-inner-spin-button,
.rangeInput input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rangeInput input[type="number"]::-moz-inner-spin-button,
.rangeInput input[type="number"]::-moz-outer-spin-button {
  -moz-appearance: none;
  margin: 0;
}
.rangeSlider {
  position: relative;
  height: 4px;
  padding: 20px 0;
}
.rangeTrack {
  position: absolute;
  width: 100%;
  height: 4px;
  background: #E7EBEE;
  border-radius: 3px;
}
.rangeProgress {
  position: absolute;
  height: 4px;
  background: #1270C1;
  left: 0%;
  right: 30%;
}
.rangeThumb {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(90deg, #3D8DD1 0%, #095696 100%);
  border-radius: 50%;
  top: 55%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.rangeThumbMin {
  left: 0%;
}
.rangeThumbMax {
  left: 70%;
}
.rangeThumb:hover {
  transform: translateY(-50%) scale(1.1);
}
.rangeThumb:active {
  transform: translateY(-50%) scale(1.2);
}
@media (max-width: 1000px) {
  .rangeInputs {
    display: flex;
    gap: 21px;
  }
}
.sortDropdownToggle {
  width: 316px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #ffffff;
  border: 1px solid #E7EBEE;
  border-radius: 10px;
  box-shadow: 0 0 24px transparent;
  transition: box-shadow 0.3s ease-out, border 0.3s ease-out;
}
.sortDropdownToggleArrow {
  display: flex;
}
.sortDropdownToggleSelected {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sortBody {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
}
.sortBodyListItem {
  padding: 12px;
  text-align: center;
  background-color: #ffffff;
  transition: background-color 0.3s ease-out;
}
.sortBodyListItem:hover {
  background-color: #EAF3FF;
}
.sortBodyListButton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
@media (max-width: 1000px) {
  .sortDropdownToggle {
    width: 170px;
    padding: 6px 16px 6px 12px;
    border: 2px solid #000000;
    justify-content: center;
    font-size: 0;
    line-height: 0;
  }
  .sortDropdownToggleSelected {
    font-size: 17px;
    line-height: 24px;
  }
  .sortDropdownToggleArrow {
    width: 20px;
  }
  .sortBodyListItem {
    padding: 8px;
    text-align: center;
    background-color: #ffffff;
    transition: background-color 0.3s ease-out;
  }
  .sortBodyListItem:hover {
    background-color: #EAF3FF;
  }
  .sortBodyListButton {
    font-size: 15px;
    line-height: 20px;
  }
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.paginationButton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.paginationButton:hover {
  background-color: #EEF3F8;
}
.paginationButton.active {
  background-color: #1270C1;
  color: #ffffff;
}
.paginationButton.active:hover {
  border-color: #1270C1;
  color: #ffffff;
}
.paginationButton:disabled {
  display: none;
}
.faqPage {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.faqPageTitle {
  margin-bottom: 42px;
}
.faqPageContent {
  padding: 69px 0 56px;
  display: flex;
  gap: 52px;
}
.faqPageTabs {
  width: 450px;
}
.faqPageTabsContent {
  width: calc(100% - 502px);
}
.faqPageTabsContentItem {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.6s ease-out;
}
.faqPageTabsContentItem.active {
  opacity: 1;
  pointer-events: all;
  max-height: 1000px;
  margin-top: 16px;
}
.faqPageTabsContentItemText {
  background-color: #ffffff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding: 24px;
  line-height: 32px;
}
.faqPageTabsContentItemText a {
  color: #1270C1;
}
.faqPageTabsList {
  position: relative;
  padding-left: 22px;
}
.faqPageTabsList::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #D9DDE1;
}
.faqPageTabsItem {
  line-height: 32px;
  position: relative;
  margin-bottom: 20px;
}
.faqPageTabsItem::before {
  content: '';
  position: absolute;
  top: 0;
  left: -22px;
  width: 2px;
  height: 100%;
  background-color: #000000;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.faqPageTabsItem.active::before {
  opacity: 1;
}
.faqPageTabsItem.active .faqPageTabsButton {
  color: #000000;
}
.faqPageTabsButton {
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  color: #889AA9;
  text-transform: uppercase;
  transition: color 0.3s ease-out;
}
.faqPageTabsButton:hover {
  color: #1270C1;
}
.faqPageAccordionItem {
  margin-bottom: 12px;
  box-shadow: 0 0 24px transparent;
  border-radius: 0;
  transition: box-shadow 0.3s ease-out, border-radius 0.3s ease-out;
}
.faqPageAccordionItem.active {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
  border-radius: 20px 20px 0 0;
  border-radius: 20px;
}
.faqPageAccordionItem.active .faqPageAccordionItemHeaderArrow img {
  transform: rotate(90deg);
}
.faqPageAccordionItemHeader {
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  line-height: 32px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-out, border-radius 0.3s ease-out;
}
.faqPageAccordionItemHeader:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
.faqPageAccordionItemHeaderText {
  display: inline-block;
  width: calc(100% - 48px);
}
.faqPageAccordionItemHeaderArrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
}
.faqPageAccordionItemHeaderArrow img {
  transform: rotate(0);
  transition: transform 0.3s ease-out;
}
.faqPageAccordionItemHeader.active {
  box-shadow: 0 0 24px transparent;
  border-radius: 20px 20px 0 0;
}
.faqPageAccordionItemHeader.active .faqPageAccordionItemHeaderArrow img {
  transform: rotate(90deg);
}
.faqPageAccordionItemBody {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.6s ease-out;
}
.faqPageAccordionItemBody.active {
  opacity: 1;
  pointer-events: all;
  max-height: 1000px;
  padding: 0 24px 24px;
  border-radius: 0 0 20px 20px;
  background-color: #ffffff;
}
@media (max-width: 1200px) {
  .faqPageTitle {
    margin-bottom: 48px;
  }
  .faqPageContent {
    padding: 58px 0 56px;
    gap: 42px;
    flex-direction: column;
  }
  .faqPageTabs {
    width: 100%;
  }
  .faqPageTabsContent {
    width: 100%;
  }
  .faqPageTabsList {
    padding-left: 0;
    padding-bottom: 12px;
    display: flex;
    gap: 24px;
  }
  .faqPageTabsList::before {
    width: 100%;
    height: 2px;
    top: unset;
    bottom: 0;
  }
  .faqPageTabsItem {
    margin-bottom: 0;
  }
  .faqPageTabsItem::before {
    left: 0;
    top: unset;
    bottom: -12px;
    width: 100%;
    height: 2px;
  }
  .faqPageTabsButton {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
  }
}
@media (max-width: 700px) {
  .faqPageTitle {
    margin-bottom: 28px;
  }
  .faqPageContent {
    padding: 32px 0 36px;
    gap: 36px;
  }
  .faqPageTabsList {
    padding-left: 18px;
    padding-bottom: 0;
    display: block;
  }
  .faqPageTabsList::before {
    top: 0;
    bottom: unset;
    width: 2px;
    height: 100%;
  }
  .faqPageTabsItem {
    line-height: 28px;
    margin-bottom: 16px;
  }
  .faqPageTabsItem:last-child {
    margin-bottom: 0;
  }
  .faqPageTabsItem::before {
    top: 0;
    bottom: unset;
    left: -18px;
    width: 2px;
    height: 100%;
  }
  .faqPageTabsButton {
    font-size: 15px;
    line-height: 28px;
  }
  .faqPageAccordionItemHeader {
    font-size: 15px;
    line-height: 24px;
    padding: 20px;
  }
  .faqPageAccordionItemHeaderArrow {
    width: 28px;
    height: 28px;
  }
  .faqPageAccordionItemHeaderText {
    width: calc(100% - 34px);
  }
  .faqPageAccordionItemBody.active {
    padding: 0 20px 20px;
  }
}
.productPageNoStock .productInfoMid img {
  filter: grayscale(1);
}
.productPageNoStock .productInfoAddToCart {
  background-color: #ffffff;
  border: 1px solid #D3D3D3;
  color: #A9A9A9;
}
.productPageNoStock .productInfoAddToCart svg path {
  fill: #D3D3D3;
}
.productPageNoStock .productInfoAddToCart::before,
.productPageNoStock .productInfoAddToCart::after {
  display: none;
}
.productPageNoStock .productInfoNoteButton {
  display: flex;
}
.productPageContent {
  padding: 42px 0 54px;
}
.productPageBreadcrumbs {
  display: flex;
  justify-content: center;
  margin-bottom: 72px;
}
.productPageInfo {
  display: flex;
  gap: 20px;
}
.productPageInfoItem {
  flex: 1;
  padding: 32px;
  background-color: #ffffff;
  border-radius: 10px;
  border: 2px solid #1270C1;
}
.productPageInfoItemHeader {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.productPageInfoItem p {
  font-size: 17px;
  line-height: 32px;
}
.productPageInfoItem ul {
  margin-left: 20px;
}
.productPageInfoItem ul li {
  list-style: disc;
  font-size: 17px;
  line-height: 32px;
}
.productPageInfoItemArrow {
  display: none;
}
@media (max-width: 1000px) {
  .productPageNoStock .productInfoMid img {
    filter: grayscale(1);
  }
  .productPageNoStock .productInfoAddToCart {
    background-color: #ffffff;
    border: 1px solid #D3D3D3;
    color: #A9A9A9;
  }
  .productPageNoStock .productInfoAddToCart svg path {
    fill: #D3D3D3;
  }
  .productPageNoStock .productInfoAddToCart::before,
  .productPageNoStock .productInfoAddToCart::after {
    display: none;
  }
  .productPageNoStock .productInfoNoteButton {
    display: flex;
  }
  .productPageContent {
    padding: 52px 0 48px;
  }
  .productPageBreadcrumbs {
    margin-bottom: 56px;
  }
  .productPageInfo {
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
  }
  .productPageInfoItem {
    padding: 28px;
  }
  .productPageInfoItemHeader {
    width: 100%;
    font-size: 18px;
    margin-bottom: 0;
  }
  .productPageInfoItemHeader.active {
    margin-bottom: 20px;
  }
  .productPageInfoItemHeader.active .productPageInfoItemArrow {
    transform: rotate(180deg);
  }
  .productPageInfoItemBody {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
  }
  .productPageInfoItemBody.active {
    opacity: 1;
    pointer-events: all;
    max-height: 350px;
  }
  .productPageInfoItemArrow {
    display: block;
    margin-left: auto;
    transform: rotate(0);
    transition: transform 0.3s ease-out;
  }
}
@media (max-width: 700px) {
  .productPageNoStock .productInfoMid img {
    filter: grayscale(1);
  }
  .productPageNoStock .productInfoAddToCart {
    background-color: #ffffff;
    border: 1px solid #D3D3D3;
    color: #A9A9A9;
  }
  .productPageNoStock .productInfoAddToCart svg path {
    fill: #D3D3D3;
  }
  .productPageNoStock .productInfoAddToCart::before,
  .productPageNoStock .productInfoAddToCart::after {
    display: none;
  }
  .productPageNoStock .productInfoNoteButton {
    display: flex;
  }
  .productPageContent {
    padding: 28px 0 40px;
  }
  .productPageBreadcrumbs {
    margin-bottom: 48px;
  }
  .productPageInfo {
    gap: 12px;
  }
  .productPageInfoItem {
    padding: 20px 24px;
  }
  .productPageInfoItemHeader {
    font-size: 16px;
  }
}
.productInfo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}
.productInfoLeft {
  max-width: 330px;
  width: 100%;
}
.productInfoMid {
  width: 300px;
  overflow: hidden;
  margin: 32px 0;
  padding: 5px 0;
}
.productInfoMidImage {
  width: 340px;
  height: 340px;
  margin: 0 auto;
}
.productInfoMidImage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.productInfoRight {
  max-width: 330px;
  width: 100%;
}
.productInfoName {
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  margin-bottom: 25px;
}
.productInfoCheckShop {
  line-height: 20px;
  font-weight: 600;
  color: #1270C1;
  text-decoration: underline;
  margin: 17px 0 25px;
  transition: color 0.3s ease-out;
}
.productInfoCheckShop:hover {
  color: #1E88E2;
}
.productInfoShortDesc {
  font-size: 17px;
  line-height: 32px;
}
.productInfoChars {
  margin-bottom: 36px;
}
.productInfoCharsItem {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #D9DDE1;
}
.productInfoCharsItem:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.productInfoCharsLabel {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-transform: uppercase;
}
.productInfoCharsValue {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
.productInfoCharsLink {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #1270C1;
  text-transform: uppercase;
  transition: color 0.3s ease-out;
}
.productInfoCharsLink svg {
  transform: translate(0, 0);
  transition: transform 0.3s ease-out;
}
.productInfoCharsLink svg path {
  fill: #1270C1;
  transition: fill 0.3s ease-out;
}
.productInfoCharsLink:hover {
  color: #1E88E2;
}
.productInfoCharsLink:hover svg {
  transform: translate(2px, -2px);
}
.productInfoCharsLink:hover svg path {
  fill: #1E88E2;
}
.productInfoActions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 10px;
}
.productInfoActionsButton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  position: relative;
}
.productInfoActionsButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.4s ease-out;
}
.productInfoActionsButtonFavorite {
  margin-left: auto;
}
.productInfoActionsButton svg {
  position: relative;
  width: 26px;
}
.productInfoActionsButton svg path {
  fill: #000000;
  transition: fill 0.3s ease-out;
}
.productInfoActionsButton:hover {
  border: none;
}
.productInfoActionsButton:hover::before {
  opacity: 1;
}
.productInfoActionsButton:hover svg path {
  fill: #ffffff;
}
.productInfoActionsButton.active {
  border: none;
}
.productInfoActionsButton.active::before {
  opacity: 1;
}
.productInfoActionsButton.active svg path {
  fill: #ffffff;
}
.productInfoActionsButton.active .modalItemActionsIcon {
  display: none;
}
.productInfoActionsButton.active .modalItemActionsIconActive {
  display: block;
}
.productInfoPrice {
  display: flex;
  align-items: center;
  gap: 12px;
}
.productInfoPriceNew {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.productInfoPriceOld {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #F40000;
  text-decoration: line-through;
}
.productInfoAddToCart {
  width: 100%;
  padding: 9px 36px;
}
.productInfoNoteButton {
  width: 100%;
  display: none;
}
.productInfoSlider {
  margin-bottom: 60px;
}
.productInfoThumbsSlide {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}
.productInfoThumbsSlide.swiper-slide-thumb-active {
  border: 2px solid #1270C1;
  border-radius: 10px;
}
.productInfoThumbsSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1200px) {
  .productInfo {
    flex-wrap: wrap;
    gap: 40px;
  }
  .productInfoLeft {
    max-width: calc(50% - 20px);
    order: 0;
  }
  .productInfoMid {
    width: 100%;
    order: -1;
    margin-top: 0;
  }
  .productInfoRight {
    max-width: calc(50% - 20px);
    order: 1;
  }
  .productInfoSlider {
    width: 300px;
  }
}
@media (max-width: 1000px) {
  .productInfo {
    gap: 42px;
  }
  .productInfoLeft {
    max-width: 100%;
  }
  .productInfoRight {
    max-width: 100%;
  }
  .productInfoMid {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0;
    margin-bottom: 30px;
  }
  .productInfoThumbs {
    height: 280px;
    width: 64px;
    margin: 0 !important;
  }
  .productInfoSlider {
    margin-bottom: 0;
  }
  .productInfoCheckShop {
    margin: 25px 0;
  }
}
@media (max-width: 700px) {
  .productInfo {
    gap: 32px;
  }
  .productInfoMid {
    margin-bottom: 20px;
    flex-direction: column;
  }
  .productInfoMidImage {
    width: 220px;
    height: 220px;
  }
  .productInfoSlider {
    margin-bottom: 36px;
  }
  .productInfoThumbs {
    height: 64px;
    width: 280px;
    margin: 0 auto !important;
  }
  .productInfoName {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 24px;
  }
  .productInfoCheckShop {
    margin: 20px 0 24px;
  }
  .productInfoShortDesc {
    font-size: 16px;
  }
  .productInfoCharsLabel {
    font-size: 14px;
  }
  .productInfoCharsValue {
    font-size: 15px;
  }
  .productInfoCharsLink {
    font-size: 15px;
  }
  .productInfoPriceNew {
    font-size: 22px;
  }
}
.productDesc {
  background-color: #F8F9FB;
  border-radius: 10px;
  padding: 42px;
  display: flex;
  gap: 32px;
  overflow: hidden;
  margin-bottom: 32px;
}
.productDescTip {
  font-size: 15px;
  line-height: 28px;
  color: #889AA9;
}
.productDescTabs {
  width: 222px;
  padding-right: 32px;
  position: relative;
}
.productDescTabs::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #D1D9E5;
}
.productDescTabsItem {
  margin-bottom: 28px;
  position: relative;
}
.productDescTabsItem::before {
  content: '';
  position: absolute;
  top: 0;
  right: -32px;
  width: 2px;
  height: 100%;
  opacity: 0;
  background-color: #000000;
  transition: opacity 0.3s ease-out;
}
.productDescTabsItem:last-child {
  margin-bottom: 0;
}
.productDescTabsItem.active::before {
  opacity: 1;
}
.productDescTabsButton {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #889AA9;
  text-transform: uppercase;
  transition: color 0.2s ease-out;
}
.productDescTabsButton:hover {
  color: #1270C1;
}
.productDescTabsButton.active {
  color: #000000;
}
.productDescContent {
  width: calc(100% - 256px);
}
.productDescContentItem {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.1s ease-out;
}
.productDescContentItem.active {
  opacity: 1;
  pointer-events: all;
  max-height: 2500px;
}
.productDescCharsTitle {
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.productDescCharsList {
  margin-bottom: 20px;
}
.productDescCharsItem {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 26px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.productDescCharsItem:last-child {
  margin-bottom: 0;
}
.productDescCharsItemLabel {
  line-height: 32px;
  font-weight: 400;
}
.productDescCharsItemValue {
  line-height: 32px;
  font-weight: 600;
}
.productDescAccordion {
  margin-bottom: 20px;
}
.productDescAccordionItem {
  margin-bottom: 10px;
  padding: 8px 26px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.productDescAccordionItem:last-child {
  margin-bottom: 0;
}
.productDescAccordionItemHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.productDescAccordionItemHeaderArrow {
  display: flex;
  transform: rotate(0);
  transition: transform 0.3s ease-out;
}
.productDescAccordionItemHeader.active .productDescAccordionItemHeaderArrow {
  transform: rotate(180deg);
}
.productDescAccordionItemBody {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out, max-height 0.1s ease-out;
}
.productDescAccordionItemBody.active {
  margin-bottom: 30px;
  opacity: 1;
  pointer-events: all;
  max-height: 2500px;
  margin-top: 28px;
}
.productDescAccordionItemBodyText.active {
  margin: 0;
  margin-top: 16px;
}
.productDescAccordionText {
  line-height: 32px;
  font-weight: 400;
}
.productDescApplicabilityList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 42px;
}
.productDescApplicabilityButton {
  padding: 4px 16px;
  background-color: #ffffff;
  border-radius: 40px;
  border: 2px solid #000000;
  line-height: 20px;
  position: relative;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border 0.3s ease-out;
}
.productDescApplicabilityButton::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 0;
  border-radius: 40px;
  background: linear-gradient(90deg, #3A93E0 0%, #095696 100%);
  transition: opacity 0.3s ease-out;
}
.productDescApplicabilityButton span {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 20px;
  color: #000000;
  transition: color 0.3s ease-out;
}
.productDescApplicabilityButton:hover {
  border: 2px solid transparent;
}
.productDescApplicabilityButton:hover span {
  color: #ffffff;
}
.productDescApplicabilityButton:hover:after {
  opacity: 1;
}
.productDescApplicabilityButton.active {
  border: 2px solid transparent;
}
.productDescApplicabilityButton.active span {
  color: #ffffff;
}
.productDescApplicabilityButton.active:after {
  opacity: 1;
}
.productDescApplicabilityCars {
  margin-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
}
.productDescApplicabilityCarsItem {
  width: calc(25% - 12px);
  height: 252px;
  display: flex;
  flex-direction: column;
}
.productDescApplicabilityCarsImage {
  width: 100%;
  height: 100px;
  margin-bottom: 16px;
}
.productDescApplicabilityCarsImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.productDescApplicabilityCarsName {
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.productDescApplicabilityCarsChars {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #7D8689;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.productDescApplicabilityCarsLink {
  display: block;
  margin-top: auto;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #1270C1;
  text-decoration: underline;
}
.productDescShopsButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 8px 16px;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  margin-bottom: 10px;
  transition: border 0.3s ease-out;
}
.productDescShopsButton:hover {
  border: 2px solid #1270C1;
}
.productDescShopsHeader {
  font-size: 17px;
  line-height: 32px;
  font-weight: 600;
}
.productDescShopsLabel {
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
}
@media (max-width: 1000px) {
  .productDesc {
    padding: 42px 28px;
    gap: 24px;
    margin-bottom: 42px;
    flex-direction: column;
  }
  .productDescTabs {
    width: 100%;
    padding-right: 0;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
  }
  .productDescTabs::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .productDescTabs::before {
    width: 100%;
    height: 2px;
    top: unset;
    bottom: 0;
  }
  .productDescTabsItem {
    margin-bottom: 0;
    position: relative;
  }
  .productDescTabsItem::before {
    right: 0;
    width: 100%;
    height: 2px;
    top: unset;
    bottom: -12px;
  }
  .productDescTabsButton {
    width: max-content;
  }
  .productDescContent {
    width: 100%;
  }
  .productDescCharsTitle {
    font-size: 15px;
  }
  .productDescApplicabilityCarsItem {
    width: calc(50% - 10px);
  }
  .productDescApplicabilityCarsImage {
    height: 114px;
  }
}
@media (max-width: 700px) {
  .productDesc {
    padding: 32px 20px;
    gap: 28px;
    margin-bottom: 40px;
  }
  .productDescTabs {
    gap: 24px;
  }
  .productDescContent {
    width: 100%;
  }
  .productDescApplicabilityButton {
    padding: 4px 12px;
  }
  .productDescApplicabilityButton span {
    font-size: 13px;
  }
  .productDescApplicabilityCarsItem {
    width: 100%;
  }
  .productDescShopsButton {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px;
  }
  .productDescShopsLabel {
    margin-bottom: 12px;
    text-align: left;
  }
}
.favorites {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.favoritesContent {
  padding: 56px 0 64px;
}
.favoritesTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
}
.favoritesTitle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.favoritesList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 48px;
}
.favoritesListEmpty {
  padding: 300px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.favoritesListEmptyText {
  margin-bottom: 16px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.favoritesListEmptyButton {
  margin-top: 16px;
}
.favoritesItem {
  width: calc(20% - 12px);
}
@media (max-width: 1400px) {
  .favoritesItem {
    width: calc(25% - 12px);
  }
}
@media (max-width: 1200px) {
  .favoritesItem {
    width: calc(33.33% - 11px);
  }
  .favoritesList {
    gap: 20px 16px;
    margin-bottom: 42px;
  }
}
@media (max-width: 1000px) {
  .favoritesContent {
    padding: 52px 0 64px;
  }
  .favoritesTop {
    margin-bottom: 48px;
  }
}
@media (max-width: 800px) {
  .favoritesContent {
    padding: 36px 0 56px;
  }
  .favoritesTop {
    margin-bottom: 32px;
    flex-direction: column-reverse;
    gap: 12px;
  }
  .favoritesTitle img {
    width: 30px;
  }
  .favoritesItem {
    width: calc(50% - 5px);
  }
  .favoritesList {
    gap: 10px;
    margin-bottom: 32px;
  }
  .favoritesListEmpty {
    padding: 100px 0;
  }
  .favoritesListEmptyText {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 14px;
    max-width: 300px;
  }
  .favoritesListEmptyButton {
    margin-top: 14px;
  }
}
.searchPage {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.searchPageContent {
  padding: 56px 0 64px;
}
.searchPageTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
}
.searchPageTitle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.searchPageRequest {
  margin-bottom: 42px;
  font-size: 17px;
  line-height: 24px;
}
.searchPageList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 48px;
}
.searchPageListEmpty {
  padding: 300px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.searchPageListEmptyText {
  line-height: 32px;
  text-transform: uppercase;
  color: #889AA9;
  margin-bottom: 16px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.searchPageListEmptyButton {
  margin-top: 16px;
}
.searchPageItem {
  width: calc(20% - 12px);
}
@media (max-width: 1400px) {
  .searchPageItem {
    width: calc(25% - 12px);
  }
}
@media (max-width: 1200px) {
  .searchPageItem {
    width: calc(33.33% - 11px);
  }
  .searchPageList {
    gap: 20px 16px;
    margin-bottom: 42px;
  }
}
@media (max-width: 1000px) {
  .searchPageContent {
    padding: 52px 0 64px;
  }
  .searchPageTop {
    margin-bottom: 48px;
  }
  .searchPageRequest {
    margin-bottom: 36px;
  }
}
@media (max-width: 800px) {
  .searchPageContent {
    padding: 28px 0 56px;
  }
  .searchPageTop {
    margin-bottom: 28px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }
  .searchPageRequest {
    margin-bottom: 28px;
  }
  .searchPageTitle img {
    width: 30px;
  }
  .searchPageItem {
    width: calc(50% - 5px);
  }
  .searchPageList {
    gap: 10px;
    margin-bottom: 32px;
  }
  .searchPageListEmpty {
    padding: 100px 0;
  }
  .searchPageListEmptyText {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 14px;
    max-width: 300px;
  }
  .searchPageListEmptyButton {
    margin-top: 14px;
  }
}
.checkout {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.checkoutContent {
  padding: 56px 0;
}
.checkoutTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}
.checkoutBlock {
  display: flex;
  gap: 20px;
}
.checkoutList {
  width: calc(100% - 506px);
  display: flex;
  flex-wrap: wrap;
}
.checkoutLine {
  width: 486px;
}
.checkoutLineTotal {
  position: sticky;
  top: 100px;
}
.checkoutItem {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 4px 34px rgba(98, 95, 95, 0.1);
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 16px;
}
.checkoutItem:last-child {
  margin-bottom: 0;
}
.checkoutItemTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.checkoutItemTopIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: #1270C1;
  border-radius: 50%;
}
.checkoutItemTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
}
.checkoutItemPayment {
  width: calc(50% - 8px);
  margin-right: 16px;
}
.checkoutItemShipping {
  width: calc(50% - 8px);
}
.checkoutItemRadio {
  display: flex;
  align-items: center;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 20px;
}
.checkoutItemRadio:last-child {
  margin-bottom: 0;
}
.checkoutItemRadioInput {
  display: none;
}
.checkoutItemRadioInput:checked + .checkoutItemRadioCustom {
  border-color: #1270C1;
}
.checkoutItemRadioInput:checked + .checkoutItemRadioCustom::after {
  transform: translate(-50%, -50%) scale(1);
}
.checkoutDropdownFlat {
  width: calc(50% - 6px);
}
.checkoutDropdownToggle {
  width: 100%;
  justify-content: space-between;
  padding: 14px 20px;
  border-radius: 40px;
  border: 1px solid #D9DDE1;
}
.checkoutDropdownBody {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden;
}
.checkoutDropdownList {
  height: 200px;
  overflow-y: auto;
}
.checkoutDropdownListItem {
  padding: 12px;
  text-align: center;
  background-color: #ffffff;
  transition: background-color 0.3s ease-out;
}
.checkoutDropdownListItem:hover {
  background-color: #EAF3FF;
}
.checkoutDropdownListButton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
@media (max-width: 1200px) {
  .checkoutList {
    width: calc(100% - 370px);
  }
  .checkoutLine {
    width: 350px;
  }
}
@media (max-width: 1000px) {
  .checkoutList {
    width: 100%;
  }
  .checkoutLine {
    width: 100%;
  }
  .checkoutLineTotal {
    position: static;
    top: unset;
  }
  .checkoutContent {
    padding: 52px 0 56px;
  }
  .checkoutTop {
    margin-bottom: 42px;
  }
  .checkoutBlock {
    flex-direction: column;
  }
  .checkoutItemPayment {
    width: 100%;
    margin-right: 0;
  }
  .checkoutItemShipping {
    width: 100%;
  }
  .checkoutDropdownFlat {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .checkoutContent {
    padding: 32px 0 48px;
  }
  .checkoutTop {
    margin-bottom: 38px;
    flex-direction: column-reverse;
    gap: 12px;
  }
  .checkoutItem {
    padding: 28px 16px;
    margin-bottom: 12px;
  }
  .checkoutItemTop {
    margin-bottom: 32px;
  }
  .checkoutItemTopIcon {
    width: 36px;
    height: 36px;
  }
}
.checkoutCartList {
  max-height: 415px;
  height: 100%;
  overflow-y: auto;
  padding-right: 16px;
}
.checkoutCartItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #D9DDE1;
}
.checkoutCartItem:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.checkoutCartImage {
  width: 105px;
  height: 105px;
}
.checkoutCartImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkoutCartInfo {
  display: flex;
  flex-direction: column;
}
.checkoutCartName {
  margin-bottom: 4px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: #000000;
}
.checkoutCartPrice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.checkoutCartPriceNew {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.checkoutCartPriceOld {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: #F40000;
  text-decoration: line-through;
}
.checkoutCartDelete {
  margin-left: auto;
  display: flex;
}
.userInfoForm {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.userInfoFormField {
  width: calc(50% - 6px);
}
.userInfoFormInput {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid #D9DDE1;
  border-radius: 40px;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}
.shippingMethodPickup {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  top: 0;
  transition: opacity 0.3s ease-out;
}
.shippingMethodPickup.active {
  opacity: 1;
  position: static;
  pointer-events: auto;
}
.shippingMethodFlat {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  top: 0;
  transition: opacity 0.3s ease-out;
}
.shippingMethodFlat.active {
  opacity: 1;
  position: static;
  pointer-events: auto;
}
.shippingMethodFlatBlock {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shippingMethodFlatAddress {
  width: calc(50% - 6px);
}
.shippingMethodFlatInput {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid #D9DDE1;
  border-radius: 40px;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}
@media (max-width: 1000px) {
  .shippingMethodFlatBlock {
    flex-direction: column;
  }
  .shippingMethodFlatAddress {
    width: 100%;
  }
}
.checkoutExtrasTextarea {
  width: 100%;
  height: 168px;
  resize: none;
  padding: 14px 20px;
  border: 1px solid #D9DDE1;
  border-radius: 20px;
  line-height: 24px;
}
.checkoutTotal {
  padding: 32px 20px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid #1270C1;
  box-shadow: 0 0 14px rgba(34, 158, 217, 0.4);
}
.checkoutTotalItem {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  line-height: 24px;
  margin-bottom: 20px;
}
.checkoutTotalItem:last-child {
  margin-bottom: 0;
}
.checkoutTotalItemTotal {
  padding-bottom: 20px;
  border-bottom: 1px solid #D9DDE1;
}
.checkoutTotalLabel {
  line-height: 24px;
  text-transform: uppercase;
  font-weight: 500;
}
.checkoutTotalValue {
  font-size: 20px;
  line-height: 32px;
  text-transform: uppercase;
  font-weight: 600;
}
.checkoutTotalButton {
  width: 100%;
  margin-top: 24px;
}
@media (max-width: 700px) {
  .checkoutTotal {
    padding: 28px 16px;
  }
  .checkoutTotalValue {
    font-size: 18px;
  }
}
.successPage {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.successPageContent {
  padding: 132px 0 250px;
  max-width: 550px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.successPageImage {
  margin-bottom: 32px;
  filter: drop-shadow(-16px 6px 38px rgba(0, 0, 0, 0.1)) drop-shadow(-65px 23px 69px rgba(0, 0, 0, 0.09)) drop-shadow(-147px 51px 93px rgba(0, 0, 0, 0.05)) drop-shadow(-261px 90px 111px rgba(0, 0, 0, 0.01));
}
.successPageTitle {
  margin-bottom: 16px;
  text-align: center;
}
.successPageText {
  margin-bottom: 36px;
  text-align: center;
}
@media (max-width: 1000px) {
  .successPageContent {
    padding: 132px 0 188px;
  }
}
@media (max-width: 700px) {
  .successPageContent {
    max-width: 260px;
    padding: 64px 0 140px;
  }
  .successPageImage {
    width: 260px;
    margin-bottom: 28px;
  }
}
.brands {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.brandsContent {
  padding: 56px 0;
  display: flex;
  flex-wrap: wrap;
}
.brandsTop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.brandsBlock {
  width: calc(100% - 412px);
  margin-right: 28px;
}
.brandsInfo {
  width: 384px;
}
.brandsInfoBanner {
  width: 100%;
  height: 348px;
  border-radius: 20px;
  background: url("../images/bg/brands-info-bg.webp") no-repeat center / cover;
  position: relative;
}
.brandsInfoBanner p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 325px;
  color: #ffffff;
  font-size: 20px;
  line-height: 32px;
  text-transform: uppercase;
}
.brandsList {
  margin-bottom: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.brandsItem {
  padding: 16px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease-out;
}
.brandsItem:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.brandsItem:nth-child(11n + 1),
.brandsItem:nth-child(11n + 2),
.brandsItem:nth-child(11n + 3),
.brandsItem:nth-child(11n + 4),
.brandsItem:nth-child(11n + 5),
.brandsItem:nth-child(11n + 6) {
  width: calc(16.66% - 10px);
}
.brandsItem:nth-child(11n + 7),
.brandsItem:nth-child(11n + 8),
.brandsItem:nth-child(11n + 9),
.brandsItem:nth-child(11n + 10),
.brandsItem:nth-child(11n + 11) {
  width: calc(20% - 10px);
}
.brandsLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.brandsLink span {
  display: block;
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  color: #000000;
  font-weight: 400;
}
.brandsLink img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
@media (max-width: 1500px) {
  .brandsItem:nth-child(9n + 1),
  .brandsItem:nth-child(9n + 2),
  .brandsItem:nth-child(9n + 3),
  .brandsItem:nth-child(9n + 4),
  .brandsItem:nth-child(9n + 5) {
    width: calc(20% - 10px);
  }
  .brandsItem:nth-child(9n + 6),
  .brandsItem:nth-child(9n + 7),
  .brandsItem:nth-child(9n + 8),
  .brandsItem:nth-child(9n + 9) {
    width: calc(25% - 10px);
  }
}
@media (max-width: 1300px) {
  .brandsItem:nth-child(7n + 1),
  .brandsItem:nth-child(7n + 2),
  .brandsItem:nth-child(7n + 3),
  .brandsItem:nth-child(7n + 4) {
    width: calc(25% - 10px);
  }
  .brandsItem:nth-child(7n + 5),
  .brandsItem:nth-child(7n + 6),
  .brandsItem:nth-child(7n + 7) {
    width: calc(33.33% - 10px);
  }
}
@media (max-width: 1200px) {
  .brandsItem:nth-child(3n + 1),
  .brandsItem:nth-child(3n + 2) {
    width: calc(50% - 10px);
  }
  .brandsItem:nth-child(3n + 3) {
    width: calc(100% - 10px);
  }
}
@media (max-width: 1000px) {
  .brandsContent {
    padding: 52px 0 42px;
  }
  .brandsBlock {
    width: 100%;
    margin-right: 0;
    margin-bottom: 56px;
  }
  .brandsInfo {
    width: 100%;
  }
  .brandsInfoBanner {
    height: 248px;
    background: url("../images/bg/brands-info-bg_tab.webp") no-repeat center / cover;
  }
  .brandsInfoBanner p {
    width: 550px;
    font-size: 22px;
    transform: translate(0, 0);
    top: unset;
    left: 32px;
    bottom: 48px;
  }
  .brandsItem {
    width: calc(33.33% - 8px) !important;
  }
  .brandsLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .brandsLink span {
    display: block;
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    color: #000000;
    font-weight: 400;
  }
}
@media (max-width: 700px) {
  .brandsContent {
    padding: 32px 0 48px;
  }
  .brandsTop {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-bottom: 42px;
    gap: 12px;
  }
  .brandsBlock {
    margin-bottom: 48px;
  }
  .brandsInfoBanner {
    height: 348px;
    background: url("../images/bg/brands-info-bg_mob.webp") no-repeat center / cover;
  }
  .brandsInfoBanner p {
    width: 100%;
    font-size: 20px;
    position: relative;
    left: unset;
    bottom: unset;
    padding: 96px 20px;
  }
  .brandsItem {
    width: calc(50% - 6px) !important;
  }
  .brandsLink {
    gap: 12px;
  }
  .brandsLink span {
    font-size: 14px;
  }
  .brandsLink img {
    width: 48px;
    height: 48px;
  }
}
.brandDescription {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.brandDescriptionTop {
  background-position: center;
  position: relative;
  width: 100%;
  height: 240px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.brandDescriptionTop:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #06112C;
  opacity: 0.5;
  z-index: 0;
}
.brandDescriptionImage {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(-16px 6px 38px rgba(0, 0, 0, 0.1)) drop-shadow(-65px 23px 69px rgba(0, 0, 0, 0.09)) drop-shadow(-147px 51px 93px rgba(0, 0, 0, 0.05)) drop-shadow(-261px 90px 111px rgba(0, 0, 0, 0.01));
}
.brandDescriptionImage img {
  height: 38px;
  width: auto;
}
.brandDescriptionTitle {
  font-size: 26px;
  line-height: 24px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
}
.brandDescriptionText {
  padding: 64px 124px;
}
.brandDescriptionText p {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
}
@media (max-width: 1400px) {
  .brandDescriptionText {
    padding: 64px;
  }
}
@media (max-width: 1200px) {
  .brandDescriptionText {
    padding: 32px;
  }
}
@media (max-width: 1000px) {
  .brand .searchBrands {
    display: none;
  }
  .brandDescriptionText {
    padding: 48px;
  }
  .brandDescriptionTitle {
    font-size: 24px;
  }
}
@media (max-width: 700px) {
  .brand .searchBrands {
    display: none;
  }
  .brandDescriptionText {
    padding: 28px 20px;
  }
  .brandDescriptionTop {
    height: 200px;
    padding: 40px;
  }
}
.contacts {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.contactsHero {
  background: linear-gradient(to left, #469EEA 0%, #6EB5F0 100%);
}
.contactsHeroContent {
  padding: 100px 0;
  display: flex;
  align-items: center;
  position: relative;
  height: 382px;
}
.contactsHeroImage {
  position: absolute;
  top: -25%;
  right: 150px;
}
.contactsHeroImage img {
  filter: drop-shadow(-16px 6px 38px rgba(0, 0, 0, 0.1)) drop-shadow(-65px 23px 69px rgba(0, 0, 0, 0.09)) drop-shadow(-147px 51px 93px rgba(0, 0, 0, 0.05)) drop-shadow(-261px 90px 111px rgba(0, 0, 0, 0.01));
}
.contactsHeroLogo {
  align-self: flex-end;
  margin-left: auto;
}
.contactsHeroTitle {
  font-size: 32px;
  line-height: 56px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.contactsHeroTitle span {
  font-weight: 700;
}
.contactsHeroSubtitle {
  font-size: 17px;
  line-height: 24px;
  color: #ffffff;
  margin-bottom: 36px;
}
.contactsContent {
  padding: 58px 0 72px;
  display: flex;
  gap: 20px;
}
.contactsInfo {
  width: 550px;
  padding: 60px 40px;
  border-radius: 10px;
  background-color: #1B1B1B;
  position: relative;
  overflow: hidden;
}
.contactsInfo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 410px;
  height: 470px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #0C54A0 0%, #0C54A000 100%);
  opacity: 0.9;
  filter: blur(100px);
  pointer-events: none;
}
.contactsInfo::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 680px;
  height: 780px;
  transform: translate(70%, 70%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #0C54A0 0%, #0C54A000 100%);
  opacity: 0.9;
  filter: blur(100px);
  pointer-events: none;
}
.contactsInfoTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}
.contactsInfoTitle span {
  background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.contactsInfoSubtitle {
  font-size: 17px;
  line-height: 24px;
  color: #ffffff;
  margin-bottom: 54px;
  position: relative;
  z-index: 1;
}
.contactsInfoList {
  position: relative;
  z-index: 1;
  margin-bottom: 82px;
}
.contactsInfoItem {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
}
.contactsInfoItemText {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: #ffffff;
  z-index: 1;
}
.contactsForm {
  width: calc(100% - 570px);
  padding: 60px 48px;
  background-color: #ffffff;
  border-radius: 10px;
}
.contactsFormTitle {
  font-size: 28px;
  line-height: 36px;
  font-weight: 300;
  margin-bottom: 36px;
  text-transform: uppercase;
}
.contactsFormTitle span {
  font-weight: 700;
}
.contactsFormForm {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
}
.contactsFormFormInput {
  width: calc(50% - 6px);
  padding: 14px 20px;
  border: 1px solid #D9DDE1;
  border-radius: 40px;
  color: #000000;
}
.contactsFormFormInputFull {
  width: 100%;
}
.contactsFormFormTextarea {
  width: 100%;
  height: 158px;
  padding: 14px 20px;
  border: 1px solid #D9DDE1;
  border-radius: 20px;
  color: #000000;
  resize: none;
}
.contactsFormFormButton {
  margin-left: auto;
}
@media (max-width: 1300px) {
  .contactsHeroImage {
    top: -15%;
    right: 0;
  }
  .contactsHeroImage img {
    width: 600px;
  }
  .contactsHeroLogo {
    display: none;
  }
  .contactsInfo {
    width: 500px;
    padding: 60px 20px;
  }
  .contactsForm {
    width: calc(100% - 520px);
    padding: 60px 20px;
  }
}
@media (max-width: 1000px) {
  .contactsHeroContent {
    padding: 54px 20px;
    height: 320px;
  }
  .contactsHeroTitle {
    margin-bottom: 28px;
  }
  .contactsHeroSubtitle {
    display: none;
  }
  .contactsHeroImage {
    top: 0;
    right: -5%;
  }
  .contactsHeroImage img {
    width: 400px;
  }
  .contactsHeroLogo {
    display: none;
  }
  .contactsContent {
    padding: 36px 0 56px;
    flex-direction: column;
  }
  .contactsInfo {
    width: 100%;
    padding: 60px 40px;
  }
  .contactsForm {
    width: 100%;
    padding: 60px 48px;
  }
}
@media (max-width: 700px) {
  .contactsHeroContent {
    padding: 36px 17px;
    margin-bottom: 84px;
    align-items: flex-start;
  }
  .contactsHeroTitle {
    font-size: 26px;
    line-height: 56px;
    margin-bottom: 0;
  }
  .contactsHeroImage {
    top: unset;
    bottom: -25%;
    right: 0;
  }
  .contactsHeroImage img {
    width: 360px;
  }
  .contactsContent {
    padding: 0 0 48px;
  }
  .contactsInfo {
    padding: 32px 20px;
  }
  .contactsInfoTitle {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
  }
  .contactsInfoSubtitle {
    font-size: 16px;
    margin-bottom: 48px;
  }
  .contactsInfoList {
    margin-bottom: 48px;
  }
  .contactsInfoItem {
    gap: 20px;
    margin-bottom: 24px;
  }
  .contactsInfoItemText {
    font-size: 16px;
    line-height: 24px;
  }
  .contactsForm {
    padding: 32px 20px;
  }
  .contactsFormTitle {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 30px;
  }
  .contactsFormForm {
    gap: 12px;
  }
  .contactsFormFormInput {
    width: 100%;
  }
  .contactsFormFormTextarea {
    height: 198px;
  }
  .contactsFormFormButton {
    width: 100%;
    margin-left: 0;
  }
}
.aboutUs {
  padding-top: 32px;
}
.aboutUsDesc {
  margin-bottom: 60px;
}
.aboutUsDescContent {
  display: flex;
  align-items: center;
  gap: 150px;
}
.aboutUsDescBanner {
  width: calc(100% - 700px);
  overflow: hidden;
  background: url(../images/bg/about-banner.png) no-repeat center center;
  background-size: cover;
  border-radius: 40px;
  height: 594px;
  position: relative;
}
.aboutUsDescBanner img {
  position: absolute;
  bottom: -20%;
  right: -10%;
  transform: rotate(8deg) scale(1.3);
  width: 727px;
}
.aboutUsDescBannerTitle {
  padding: 42px;
  max-width: 350px;
  width: 100%;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
}
.aboutUsDescBannerTitle span {
  font-weight: 600;
}
.aboutUsDescText {
  max-width: 752px;
}
.aboutUsDescText p {
  font-size: 18px;
  line-height: 36px;
  margin-bottom: 88px;
}
.aboutUsDescStats {
  display: flex;
  justify-content: space-between;
  gap: 47px;
}
.aboutUsDescStatsItem {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aboutUsDescStatsItemSep {
  display: block;
  width: 2px;
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.aboutUsDescStatsValue {
  font-size: 42px;
  line-height: 56px;
  font-weight: 700;
  margin-bottom: 17px;
  background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aboutUsDescStatsLabel {
  font-size: 15px;
  line-height: normal;
}
@media (max-width: 1500px) {
  .aboutUsDescContent {
    gap: 100px;
  }
  .aboutUsDescBanner {
    width: calc(100% - 650px);
  }
  .aboutUsDescBanner img {
    bottom: -30%;
    right: 5%;
    transform: rotate(8deg) scale(1.2);
  }
  .aboutUsDescText {
    max-width: 550px;
  }
  .aboutUsDescStats {
    gap: 27px;
  }
  .aboutUsDescStatsValue {
    font-size: 32px;
    line-height: 46px;
  }
}
@media (max-width: 1300px) {
  .aboutUsDescBanner img {
    bottom: -10%;
  }
}
@media (max-width: 1200px) {
  .aboutUs {
    padding-top: 20px;
  }
  .aboutUsDesc {
    margin-bottom: 68px;
  }
  .aboutUsDescContent {
    flex-direction: column-reverse;
    gap: 68px;
  }
  .aboutUsDescBanner {
    width: 100%;
  }
  .aboutUsDescBanner img {
    top: 0;
    bottom: unset;
    right: 0;
    transform: rotate(8deg) scale(1);
    width: 100%;
  }
  .aboutUsDescBannerTitle {
    max-width: 320px;
  }
  .aboutUsDescText {
    max-width: 100%;
  }
  .aboutUsDescText p {
    margin-bottom: 68px;
  }
  .aboutUsDescStats {
    gap: 30px;
  }
}
@media (max-width: 700px) {
  .aboutUs {
    padding-top: 0;
  }
  .aboutUsDesc {
    margin-bottom: 0;
  }
  .aboutUsDesc .wrapper {
    padding: 0;
  }
  .aboutUsDescContent {
    gap: 56px;
  }
  .aboutUsDescBanner {
    background: url(../images/bg/about-banner_mob.png) no-repeat center center;
    background-size: cover;
    height: 360px;
    border-radius: 0;
  }
  .aboutUsDescBanner img {
    top: 35%;
    bottom: unset;
    right: unset;
    left: 0;
    transform: rotate(8deg) translateX(-10%) scale(1.3);
  }
  .aboutUsDescBannerTitle {
    max-width: 100%;
    font-size: 20px;
    line-height: 28px;
    padding: 32px 20px;
  }
  .aboutUsDescText {
    padding: 0 15px;
  }
  .aboutUsDescText p {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 45px;
  }
  .aboutUsDescStats {
    flex-direction: column;
    gap: 36px;
  }
  .aboutUsDescStatsItem {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .aboutUsDescStatsItemSep {
    width: 100%;
    height: 2px;
    transform: scaleX(-1);
  }
  .aboutUsDescStatsValue {
    font-size: 36px;
    line-height: 46px;
  }
  .aboutUsDescStatsLabel {
    font-size: 14px;
  }
}
.aboutUsFeatures {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.aboutUsFeaturesContent {
  padding: 80px 0;
}
.aboutUsFeaturesTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}
.aboutUsFeaturesTop p {
  max-width: 642px;
  width: 100%;
  font-size: 15px;
  line-height: 32px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: right;
}
.aboutUsFeaturesTitle {
  font-size: 38px;
  line-height: normal;
  font-weight: 300;
  text-transform: uppercase;
}
.aboutUsFeaturesTitle span {
  background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 700;
}
.aboutUsFeaturesList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.aboutUsFeaturesItem {
  width: calc(33.33% - 14px);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.aboutUsFeaturesItem img {
  margin-bottom: 36px;
}
.aboutUsFeaturesItemTitle {
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}
.aboutUsFeaturesItem p {
  font-size: 17px;
  line-height: 32px;
  text-align: center;
}
@media (max-width: 1000px) {
  .aboutUsFeaturesTop {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 68px;
  }
  .aboutUsFeaturesTop p {
    max-width: 100%;
    text-align: left;
  }
  .aboutUsFeaturesTitle {
    font-size: 32px;
  }
  .aboutUsFeaturesList {
    flex-direction: column;
  }
  .aboutUsFeaturesItem {
    width: 100%;
    padding: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
  .aboutUsFeaturesItem img {
    margin-bottom: 0;
    width: 40px;
  }
  .aboutUsFeaturesItemTitle {
    width: calc(100% - 60px);
    margin-bottom: 0;
    text-align: left;
  }
  .aboutUsFeaturesItem p {
    width: 100%;
    text-align: left;
  }
}
@media (max-width: 700px) {
  .aboutUsFeaturesContent {
    padding: 60px 0;
  }
  .aboutUsFeaturesTop {
    align-items: center;
    margin-bottom: 48px;
  }
  .aboutUsFeaturesTop p {
    text-align: center;
  }
  .aboutUsFeaturesTitle {
    font-size: 24px;
  }
  .aboutUsFeaturesItem {
    padding: 36px 34px;
    flex-direction: column;
    gap: 16px;
  }
  .aboutUsFeaturesItem img {
    margin-bottom: 20px;
    width: 48px;
  }
  .aboutUsFeaturesItemTitle {
    width: 100%;
    text-align: center;
  }
  .aboutUsFeaturesItem p {
    text-align: center;
  }
}
.aboutUsForPartners {
  margin: 100px 0 62px;
}
.aboutUsForPartnersTitle {
  text-align: center;
  font-size: 36px;
  line-height: 48px;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.aboutUsForPartnersTitle span {
  background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 700;
}
.aboutUsForPartnersText {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 64px;
}
.aboutUsForPartnersList {
  display: flex;
  gap: 20px;
}
.aboutUsForPartnersItem {
  width: calc(50% - 10px);
  border: 1px solid #1270C1;
  border-radius: 10px;
  padding: 42px 32px;
}
.aboutUsForPartnersItemTop {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
.aboutUsForPartnersItemDesc {
  font-size: 17px;
  line-height: 32px;
}
.aboutUsForPartnersItemDesc a {
  display: block;
  color: #1270C1;
  font-weight: 600;
}
@media (max-width: 1000px) {
  .aboutUsForPartners {
    margin: 80px 0 56px;
  }
  .aboutUsForPartnersTitle {
    text-align: left;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 32px;
  }
  .aboutUsForPartnersText {
    max-width: 100%;
    margin: 0;
    font-size: 15px;
    margin-bottom: 56px;
  }
  .aboutUsForPartnersList {
    flex-direction: column;
  }
  .aboutUsForPartnersItem {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .aboutUsForPartners {
    margin: 60px 0 36px;
  }
  .aboutUsForPartnersTitle {
    text-align: center;
    font-size: 24px;
    line-height: 36px;
  }
  .aboutUsForPartnersText {
    font-size: 14px;
    margin-bottom: 52px;
  }
  .aboutUsForPartnersItem {
    width: 100%;
    padding: 36px 20px;
  }
  .aboutUsForPartnersItemTop {
    flex-direction: column;
    gap: 32px;
  }
  .aboutUsForPartnersItemDesc {
    font-size: 15px;
    text-align: center;
  }
}
.history {
  background-color: #1B1B1B;
  position: relative;
  overflow: hidden;
}
.history::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 700px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2E8CDD 0%, #095696 100%);
  opacity: 0.8;
  pointer-events: none;
  filter: blur(100px);
}
.history::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 20%);
  width: 2050px;
  height: 1500px;
  border-radius: 50%;
  background: linear-gradient(45deg, #2E8CDD 0%, #095696 100%);
  opacity: 0.3;
  pointer-events: none;
  filter: blur(100px);
}
.historyDecor {
  position: absolute;
  top: -50px;
  right: 50px;
  width: 950px;
  height: 860px;
  background: linear-gradient(45deg, #2E8CDD 0%, #095696 100%);
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
  filter: blur(80px);
}
.historyContent {
  position: relative;
  padding: 120px 0;
}
.historyTitle {
  font-size: 38px;
  line-height: 48px;
  font-weight: 300;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-bottom: 110px;
}
.historyTitle span {
  font-weight: 700;
  background: linear-gradient(to left, #469EEA 0%, #6EB5F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.historyNav {
  display: none;
}
.historyTimelineCar {
  display: flex;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.historyTimelineList {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.historyTimelineItem {
  width: calc(100% / 9);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.historyTimelineItem:first-child {
  align-items: flex-start;
}
.historyTimelineItem:first-child .historyTimelineButton {
  align-items: flex-start;
}
.historyTimelineItem:first-child .historyTimelineDot {
  margin-left: 15px;
}
.historyTimelineItem:first-child .historyTimelineDot::after {
  left: 0;
  transform: translate(0, -50%);
}
.historyTimelineItem:last-child {
  align-items: flex-end;
}
.historyTimelineItem:last-child .historyTimelineButton {
  align-items: flex-end;
}
.historyTimelineItem:last-child .historyTimelineText {
  right: 0;
  left: unset;
}
.historyTimelineItem:last-child .historyTimelineDot {
  margin-right: 15px;
}
.historyTimelineItem:last-child .historyTimelineDot::after {
  right: 0;
  left: unset;
  transform: translate(0, -50%);
}
.historyTimelineItem:nth-last-child(2) .historyTimelineText {
  right: 0;
  left: unset;
}
.historyTimelineItemActive .historyTimelineDot:before {
  opacity: 1;
  z-index: 1;
}
.historyTimelineItemActive .historyTimelineYear {
  font-weight: 700;
  background: linear-gradient(to left, #469EEA 0%, #6EB5F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.historyTimelineItemActive .historyTimelineText {
  opacity: 1;
}
.historyTimelineItemActive .historyTimelineCar {
  animation: car-move 0.5s forwards;
}
.historyTimelineButton {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
}
.historyTimelineButton:hover .historyTimelineDot::before {
  z-index: 1;
  opacity: 1;
  transform: scale(1.1);
}
.historyTimelineButton:hover .historyTimelineYear {
  font-weight: 700;
  background: linear-gradient(to left, #469EEA 0%, #6EB5F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.historyTimelineDot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #FFFFFF;
  margin-bottom: 28px;
  background: #889AA9;
  position: relative;
}
.historyTimelineDot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to left, #469EEA 0%, #6EB5F0 100%);
  opacity: 0;
  z-index: -1;
  transform: scale(1);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.historyTimelineDot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 1px;
  background-color: #889AA9;
  pointer-events: none;
}
.historyTimelineYear {
  font-size: 26px;
  line-height: 42px;
  font-weight: 500;
  margin-bottom: 114px;
  background: #ffffff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: font-weight 0.2s ease-out;
}
.historyTimelineText {
  font-size: 15px;
  line-height: 32px;
  color: #ffffff;
  text-transform: uppercase;
  text-align: left;
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: max-content;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
@media (max-width: 1000px) {
  .historyContent {
    padding: 48px 0;
    position: relative;
  }
  .historyTitle {
    font-size: 32px;
    text-align: left;
    padding-left: 20px;
    margin-bottom: 72px;
  }
  .historyNav {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 48px;
    right: 40px;
  }
  .historyNavButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #889AA9;
    transition: border 0.2s ease-out, background-color 0.2s ease-out;
  }
  .historyNavButton:hover {
    background-color: #1270C1;
    border: 2px solid #1270C1;
  }
  .historyTimeline {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
  }
  .historyTimeline::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .historyTimelineList {
    overflow: visible;
  }
  .historyTimelineItem {
    width: 200px;
  }
  .historyTimelineButton {
    width: 200px;
  }
  .historyTimelineText {
    width: 660px;
  }
}
@media (max-width: 700px) {
  .historyTitle {
    font-size: 24px;
    padding-left: 20px;
    margin-bottom: 60px;
  }
  .historyNav {
    top: 60px;
    right: 20px;
  }
  .historyNavButton {
    width: 32px;
    height: 32px;
  }
  .historyTimelineItem {
    width: 130px;
  }
  .historyTimelineButton {
    width: 130px;
  }
  .historyTimelineYear {
    margin-bottom: 220px;
  }
  .historyTimelineText {
    width: max-content;
    left: 0 !important;
  }
}
@keyframes car-move {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.toolRental {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.toolRentalContent {
  padding: 56px 0 64px;
}
.toolRentalTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.toolRentalNav {
  margin-bottom: 32px;
}
.toolRentalNavList {
  display: flex;
  gap: 42px;
  position: relative;
  padding-bottom: 8px;
}
.toolRentalNavList:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #E5E8EF 0%, rgba(229, 232, 239, 0) 100%);
}
.toolRentalNavItem {
  line-height: 36px;
}
.toolRentalNavButton {
  font-size: 20px;
  line-height: 36px;
  font-weight: 600;
  color: #889AA9;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s ease-out;
}
.toolRentalNavButton.active {
  color: #000000;
}
.toolRentalNavButton.active:before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1270C1;
}
.toolRentalNavButton:hover {
  color: #000000;
}
.toolRentalSubtitle {
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: #889AA9;
  margin-bottom: 32px;
}
.toolRentalTab {
  margin-bottom: 56px;
}
.toolRentalTabItem {
  margin-bottom: 16px;
}
.toolRentalTabLink {
  padding: 20px 40px;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease-out;
}
.toolRentalTabLink:last-child {
  margin-bottom: 0;
}
.toolRentalTabLink:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.toolRentalTabImage {
  width: 160px;
  height: 160px;
}
.toolRentalTabImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.toolRentalTabInfo {
  width: calc(100% - 188px);
  display: flex;
  flex-direction: column;
}
.toolRentalTabTitle {
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.toolRentalTabDesc {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #889AA9;
  margin-bottom: 24px;
}
.toolRentalTabPrice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #000000;
}
.toolRentalTabPrice span {
  font-weight: 300;
}
@media (max-width: 1000px) {
  .toolRentalContent {
    padding: 52px 0 64px;
  }
  .toolRentalTop {
    margin-bottom: 42px;
  }
  .toolRentalNavList {
    gap: 32px;
  }
  .toolRentalTabLink {
    padding: 20px;
    gap: 0;
  }
  .toolRentalTabInfo {
    width: calc(100% - 160px);
  }
}
@media (max-width: 700px) {
  .toolRentalContent {
    padding: 32px 0 56px;
  }
  .toolRentalTop {
    margin-bottom: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .toolRentalNav {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
    margin-bottom: 32px;
  }
  .toolRentalNav::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .toolRentalNavList {
    gap: 22px;
  }
  .toolRentalNavButton {
    font-size: 16px;
    width: max-content;
  }
  .toolRentalSubtitle {
    display: none;
  }
  .toolRentalTabLink {
    padding: 32px 16px;
    gap: 32px;
    flex-direction: column;
    align-items: center;
  }
  .toolRentalTabInfo {
    width: 100%;
  }
  .toolRentalTabTitle {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .toolRentalTabDesc {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .toolRentalTabPrice {
    gap: 4px;
    font-size: 18px;
  }
}
.garage {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.garageContent {
  padding: 56px 0 120px;
}
.garageTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.garageActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.garageItem {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-out;
  margin-bottom: 16px;
}
.garageItem:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.garageItemImage {
  width: 174px;
  height: 60px;
}
.garageItemImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.garageItemName {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  max-width: 600px;
  width: 100%;
}
.garageItemActions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 1300px) {
  .garageItemName {
    max-width: 300px;
  }
}
@media (max-width: 1000px) {
  .garageContent {
    padding: 52px 0 100px;
  }
  .garageActions {
    gap: 12px;
  }
  .garageActionsButton {
    width: calc(50% - 6px);
  }
  .garageItem {
    gap: 20px;
    padding: 20px;
    margin-bottom: 12px;
  }
  .garageItemName {
    font-size: 16px;
    max-width: 240px;
  }
  .garageItemActions {
    width: 240px;
  }
}
@media (max-width: 700px) {
  .garageContent {
    padding: 28px 0 60px;
  }
  .garageTop {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
  }
  .garageActions {
    gap: 8px;
    flex-wrap: wrap;
  }
  .garageActionsButton {
    width: 100%;
  }
  .garageItem {
    gap: 28 px;
    padding: 28px 20px;
    flex-wrap: wrap;
  }
  .garageItemImage {
    width: 100%;
    height: 100px;
  }
  .garageItemName {
    font-size: 15px;
    max-width: 100%;
  }
  .garageItemActions {
    width: 100%;
  }
}
.stores {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.storesContent {
  padding: 56px 0;
  margin-bottom: 48px;
}
.storesTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}
.storesBlock {
  display: flex;
  gap: 16px;
}
.storesBlockList {
  width: 380px;
  padding: 12px;
  padding-top: 0;
  height: 566px;
  overflow-y: auto;
}
.storesMaps {
  width: calc(100% - 396px);
}
.storesMaps iframe {
  border-radius: 10px;
}
.storesCity {
  margin-bottom: 16px;
  width: calc(100% - 24px);
}
.storesCityDropdownToggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background-color: #ffffff;
  border-radius: 40px;
}
.storesCityDropdownToggleArrow {
  display: flex;
}
.storesCityDropdownToggle.active {
  border: none;
}
.storesCityBody {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  border-radius: 20px;
  background-color: #ffffff;
  overflow: hidden;
}
.storesCityBodyList {
  height: 200px;
  overflow-y: auto;
}
.storesCityBodyListItem {
  text-align: center;
  background-color: #ffffff;
  transition: background-color 0.3s ease-out;
}
.storesCityBodyListButton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px;
}
.storesCityBodyListButton:hover {
  background-color: #EAF3FF;
}
.storesItem {
  width: calc(100% - 24px);
  padding: 20px 16px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease-out;
  margin-bottom: 16px;
}
.storesItem:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.storesItemTitle {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.storesItemListItem {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.storesItemListItem:last-child {
  margin-bottom: 0;
}
.storesItemListItem span {
  font-size: 17px;
  line-height: 32px;
}
.storesItemListItem a {
  color: #1270C1;
  display: block;
  width: 100%;
}
.storesItemButton {
  display: none;
}
.storesNav {
  display: none;
}
.storesPagination {
  display: none;
}
@media (max-width: 1000px) {
  .storesContent {
    padding: 52px 0;
    margin-bottom: 56px;
  }
  .storesTop {
    margin-bottom: 48px;
  }
  .storesBlock {
    flex-direction: column;
    gap: 0;
  }
  .storesBlockList {
    padding: 0;
    overflow-y: visible;
    opacity: 0;
    width: 0;
    height: 0;
    transition: all 0.3s ease-out;
  }
  .storesBlockList.active {
    opacity: 1;
    width: 100%;
    height: auto;
  }
  .storesMaps {
    opacity: 0;
    width: 0;
    height: 0;
    transition: all 0.3s ease-out;
  }
  .storesMaps.active {
    opacity: 1;
    width: 100%;
    height: auto;
  }
  .storesMaps iframe {
    height: 600px;
  }
  .storesList {
    margin-bottom: 56px;
  }
  .storesCity {
    width: 100%;
  }
  .storesItem {
    width: 100%;
  }
  .storesItemButton {
    display: flex;
    width: 100%;
    margin-top: 18px;
  }
  .storesNav {
    padding: 4px;
    margin-bottom: 28px;
    background-color: #D1D9E5;
    border-radius: 100px;
    display: flex;
    align-items: center;
  }
  .storesNavButton {
    width: 50%;
    padding: 10px;
    border-radius: 40px;
    background-color: transparent;
    color: #000000;
    transition: background 0.3s ease-out, color 0.3s ease-out;
  }
  .storesNavButton.active {
    background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
    color: #ffffff;
  }
  .storesPagination {
    display: block;
  }
}
@media (max-width: 700px) {
  .storesContent {
    padding: 32px 0;
    margin-bottom: 42px;
  }
  .storesTop {
    margin-bottom: 42px;
  }
  .storesList {
    margin-bottom: 48px;
  }
  .storesCity {
    width: 100%;
  }
  .storesItemButton {
    margin-top: 24px;
  }
  .storesMaps iframe {
    height: 380px;
  }
}
.account {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.accountContent {
  padding: 48px 0 120px;
}
.accountTop {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin-bottom: 56px;
}
.accountTopLine {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.accountTopLine .accountTitle {
  width: auto;
}
.accountTitle {
  width: calc(100% - 180px);
}
.accountLogout {
  width: 168px;
}
.accountList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.accountItem {
  width: calc(33.33% - 14px);
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  padding: 56px;
  transition: box-shadow 0.3s ease;
}
.accountItem:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.accountItemLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.accountItemText {
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  font-weight: 500;
  text-transform: uppercase;
}
.accountProfile {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.accountProfileItem {
  width: calc(50% - 10px);
  padding: 36px;
  background-color: #ffffff;
  border-radius: 10px;
  position: relative;
}
.accountProfileItemAdd {
  height: 368px;
}
.accountProfileItemAddButton {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.accountProfileItemAddText {
  font-size: 18px;
  line-height: 32px;
  font-weight: 700;
  text-transform: uppercase;
}
.accountProfileTitle {
  margin-bottom: 36px;
  font-size: 20px;
  line-height: 36px;
  font-weight: 600;
  text-transform: uppercase;
}
.accountProfileForm {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
}
.accountProfileFormSuccess {
  position: absolute;
  top: 0;
  left: 0;
  padding: 36px;
  background-color: #ffffff;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.accountProfileFormSuccessText {
  max-width: 275px;
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 32px;
  font-weight: 700;
  text-transform: uppercase;
}
.accountProfileFormSuccess.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.accountProfileInput {
  width: calc(50% - 6px);
  padding: 14px 20px;
  border-radius: 40px;
  border: 1px solid #D9DDE1;
  color: #000000;
}
.accountProfileInputFull {
  width: 100%;
}
.accountProfileSubmit {
  margin: 10px 0 0 auto;
}
.accountViewed {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 56px;
}
.accountViewedItem {
  width: calc(20% - 12px);
}
.accountViewedEmpty {
  margin: 0 auto;
  padding: 315px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  max-width: 380px;
  width: 100%;
  display: none;
}
.accountViewedEmpty p {
  text-align: center;
}
.accountAddressTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: #1270C1;
}
.accountAddressTitleExtra {
  opacity: 0.7;
}
.accountAddressInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 28px;
}
.accountAddressInfoLabel {
  font-size: 14px;
  line-height: 20px;
  color: #889AA9;
}
.accountAddressInfoValue {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}
.accountAddressInfoActions {
  display: flex;
  gap: 12px;
}
.accountAddressInfoButton {
  width: calc(50% - 6px);
}
.accountOrder {
  margin-bottom: 16px;
}
.accountOrderButton {
  width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 22px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accountOrderButtonArrow {
  display: flex;
  margin-left: 100px;
}
.accountOrderTitle {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
  max-width: 250px;
  width: 100%;
  text-align: left;
}
.accountOrderStatus {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 40px;
  display: block;
  max-width: 184px;
  width: fit-content;
  margin: 0 auto;
}
.accountOrderStatusDone {
  background-color: #28A745;
}
.accountOrderStatusWaiting {
  background-color: #3E9AD8;
}
.accountOrderStatusCanceled {
  background-color: #889AA9;
}
.accountOrderAddress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 320px;
  width: 100%;
}
.accountOrderAddressLabel {
  font-size: 14px;
  line-height: 20px;
  color: #889AA9;
}
.accountOrderAddressValue {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.accountOrderTotal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 120px;
  width: 100%;
  margin-left: 200px;
}
.accountOrderTotalLabel {
  font-size: 14px;
  line-height: 20px;
  color: #889AA9;
}
.accountOrderTotalValue {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.accountOrderBody {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.accountOrderBody.active {
  max-height: 1000px;
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
  border-radius: 10px;
  background-color: #ffffff;
  margin-top: 8px;
  padding: 40px;
}
.accountOrderBodyList {
  margin-bottom: 42px;
  max-height: 400px;
  height: auto;
  overflow-y: auto;
}
.accountOrderBodyItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #D9DDE1;
}
.accountOrderBodyItem:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.accountOrderBodyItemLink {
  display: flex;
  align-items: center;
  gap: 24px;
}
.accountOrderBodyItemImage {
  width: 80px;
  height: 80px;
}
.accountOrderBodyItemImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.accountOrderBodyItemName {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  max-width: 200px;
  width: 100%;
}
.accountOrderBodyItemCount {
  color: #A9A9A9;
}
.accountOrderBodyItemPrice {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.accountOrderBodyTotalItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.accountOrderBodyTotalItem span {
  font-size: 17px;
  line-height: 24px;
}
.accountOrderBodyTotalItemAmount span {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.accountOrderBodyInfo {
  display: none;
}
@media (max-width: 1400px) {
  .accountViewedItem {
    width: calc(25% - 12px);
  }
  .accountOrderButtonArrow {
    margin-left: 20px;
  }
  .accountOrderTotal {
    margin-left: 60px;
  }
}
@media (max-width: 1200px) {
  .accountOrderButton {
    padding: 20px;
  }
  .accountOrderTotal {
    display: none;
  }
}
@media (max-width: 1000px) {
  .accountContent {
    padding: 52px 0 72px;
  }
  .accountTop {
    margin-bottom: 48px;
    align-items: center;
  }
  .accountTopLine {
    flex-wrap: wrap;
  }
  .accountTitle {
    width: auto;
    order: -1;
    margin-right: auto;
  }
  .accountLogout {
    width: 100%;
    order: 1;
  }
  .accountList {
    gap: 12px;
  }
  .accountItem {
    width: calc(50% - 6px);
    padding: 70px 20px;
  }
  .accountProfile {
    flex-direction: column;
  }
  .accountProfileItem {
    width: 100%;
    padding: 36px 28px;
  }
  .accountProfileItemAdd {
    height: 120px;
  }
  .accountProfileItemAddButton {
    flex-direction: row;
  }
  .accountProfileSubmit {
    margin: 22px 0 0 auto;
  }
  .accountViewedItem {
    width: calc(33.33% - 10px);
  }
  .accountViewedEmpty {
    padding: 250px 0;
  }
  .accountAddressInfoActions {
    flex-direction: column;
  }
  .accountAddressInfoButton {
    width: 100%;
  }
  .accountOrderAddress {
    display: none;
  }
  .accountOrderStatus {
    margin: 0 0 0 auto;
  }
  .accountOrderBodyInfo {
    display: flex;
    flex-direction: column;
  }
  .accountOrderBodyInfoStatus {
    display: none;
  }
  .accountOrderBodyInfoLabel {
    font-size: 15px;
    line-height: 24px;
    color: #889AA9;
    margin-bottom: 4;
  }
  .accountOrderBodyInfoValue {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
}
@media (max-width: 700px) {
  .accountContent {
    padding: 32px 0 56px;
  }
  .accountTop {
    margin-bottom: 42px;
  }
  .accountTopLine {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .accountTitle {
    width: 100%;
    order: 1;
    margin-right: 0;
  }
  .accountLogout {
    order: 2;
    margin-top: 12px;
  }
  .accountList {
    gap: 8px;
  }
  .accountItem {
    width: 100%;
    padding: 16px 20px;
  }
  .accountItemLink {
    flex-direction: row;
    gap: 20px;
  }
  .accountItemLink img {
    width: 32px;
    height: 32px;
  }
  .accountItemText {
    text-align: left;
    font-size: 14px;
  }
  .accountProfile {
    flex-direction: column;
  }
  .accountProfileItem {
    padding: 28px 16px;
  }
  .accountProfileItemAdd {
    height: 84px;
  }
  .accountProfileItemAddButton {
    gap: 20px;
  }
  .accountProfileItemAddText {
    font-size: 15px;
  }
  .accountProfileForm {
    gap: 12px;
  }
  .accountProfileInput {
    width: 100%;
  }
  .accountProfileTitle {
    margin-bottom: 28px;
    font-size: 18px;
  }
  .accountProfileSubmit {
    margin: 24px 0 0 0;
    width: 100%;
  }
  .accountViewed {
    gap: 10px;
  }
  .accountViewedItem {
    width: calc(50% - 5px);
  }
  .accountViewedEmpty {
    padding: 130px 0;
    max-width: 300px;
  }
  .accountOrderStatus {
    display: none;
  }
  .accountOrderBody.active {
    padding: 28px 20px;
  }
  .accountOrderBodyInfoStatus {
    display: block;
    text-align: center;
    width: 100%;
    padding: 8px;
    color: #ffffff;
    margin: 32px 0 24px;
  }
  .accountOrderBodyInfoStatusDone {
    background-color: #28A745;
  }
  .accountOrderBodyInfoStatusWaiting {
    background-color: #3E9AD8;
  }
  .accountOrderBodyInfoStatusCanceled {
    background-color: #889AA9;
  }
  .accountOrderBodyInfoLabel {
    font-size: 15px;
    line-height: 24px;
    color: #889AA9;
    margin-bottom: 4;
  }
  .accountOrderBodyInfoValue {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
}
.compare {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.compareContent {
  padding-top: 56px;
}
.compareTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
}
.compareSlider {
  overflow: hidden;
}
.compareSliderNav {
  padding: 48px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compareSliderNavSwitchLabel {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 24px;
}
.compareSliderNavSwitchInput:checked + .compareSliderNavSwitch {
  background-color: #1270C1;
}
.compareSliderNavSwitchInput:checked + .compareSliderNavSwitch::before {
  left: 28px;
}
.compareSliderNavButtons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.compareSliderNavButton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  border: 2px solid #000000;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-out;
}
.compareSliderNavButton svg path {
  stroke: #000000;
  transition: stroke 0.3s ease-out;
}
.compareSliderNavButton:hover {
  background-color: #1270C1;
  border-color: #1270C1;
}
.compareSliderNavButton:hover svg path {
  stroke: #ffffff;
}
.compareSliderSlideActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.compareSliderSlideRemove {
  width: 40px;
  height: 40px;
  border: 2px solid #000000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.compareSliderCharsRow {
  margin-bottom: 48px;
}
.compareSliderCharsLabel {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: #7D8689;
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid #D9DDE1;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.compareSliderCharsValue {
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
}
.compareSliderCharsStatus {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  padding: 2px 12px;
  background-color: #8FC035;
  border-radius: 40px;
}
.compareChars {
  padding: 48px 0 68px;
  background-color: #ffffff;
}
@media (max-width: 1000px) {
  .compareContent {
    padding-top: 52px;
  }
  .compareTop {
    margin-bottom: 58px;
  }
}
@media (max-width: 700px) {
  .compareContent {
    padding-top: 28px;
  }
  .compareTop {
    margin-bottom: 46px;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
  }
  .compareSliderNav {
    padding: 36px 0;
    flex-direction: column;
    gap: 16px;
  }
  .compareSliderNavSwitchLabel {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
  .compareSliderNavButtons {
    width: 100%;
    justify-content: center;
  }
  .compareSliderNavButton {
    width: 36px;
    height: 36px;
  }
  .compareSliderSlideActions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .compareSliderSlidePin {
    padding: 6px 16px;
  }
  .compareSliderSlideRemove {
    width: 36px;
    height: 36px;
  }
  .compareSliderCharsRow {
    margin-bottom: 20px;
  }
  .compareSliderCharsLabel {
    font-size: 14px;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .compareSliderCharsValue {
    font-size: 15px;
  }
}
.calculatorContent {
  padding: 46px 0 42px;
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.calculatorTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.calculatorNav {
  display: none;
}
.calculatorBlock {
  padding-bottom: 56px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.calculatorSearch {
  width: 366px;
  margin-right: 22px;
}
.calculatorSearchItem {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 32px 24px;
  margin-bottom: 20px;
}
.calculatorSearchItemTitle {
  font-weight: 600;
  font-size: 17px;
  line-height: 28px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.calculatorSearchItemRowTitle {
  font-weight: 600;
  font-size: 14px;
  line-height: 28px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.calculatorSearchDropdown {
  margin-bottom: 10px;
}
.calculatorSearchDropdownToggle {
  width: 100%;
  border-radius: 40px;
  border: 1px solid #D9DDE1;
  padding: 12px 20px;
  transition: color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
.calculatorSearchDropdownBody.active {
  margin-top: 12px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.calculatorSearchDropdownBodyList {
  max-height: 200px;
  overflow-y: auto;
}
.calculatorSearchDropdownBodyListButton {
  width: 100%;
  text-align: center;
  padding: 12px;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
.calculatorSearchDropdownBodyListButton:hover {
  background-color: #EAF3FF;
}
.calculatorPreview {
  width: calc(50% - 204px);
  background-color: #ffffff;
  border-radius: 10px;
  padding: 32px 24px;
}
.calculatorPreviewTitle {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.calculatorPreviewRow {
  margin-bottom: 20px;
}
.calculatorPreviewRowTitle {
  font-weight: 600;
  font-size: 14px;
  line-height: 28px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.calculatorPreviewRowImages {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 48px 0 68px;
}
.calculatorInfo {
  background-color: #ffffff;
  padding: 48px 0 42px;
}
.calculatorInfoDesc {
  padding: 32px;
  border-radius: 10px;
  border: 2px solid #1270C1;
}
.calculatorInfoDescTitle {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.calculatorInfoDesc ul {
  margin-left: 20px;
}
.calculatorInfoDesc ul li {
  list-style: disc;
}
.calculatorChars {
  margin-bottom: 64px;
}
.calculatorCharsTitle {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  margin-bottom: 36px;
  color: #1270C1;
}
.calculatorCharsListItem {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}
.calculatorCharsListItemLabel {
  width: calc(30% - 14px);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  display: block;
  padding-top: 12px;
  border-top: 1px solid #D9DDE1;
}
.calculatorCharsListItemValue {
  width: calc(35% - 14px);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  text-transform: uppercase;
  display: block;
  padding-top: 12px;
  border-top: 1px solid #D9DDE1;
}
.calculatorParams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 64px;
}
.calculatorParamsTitle {
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  text-transform: uppercase;
  margin-bottom: 42px;
}
.calculatorParamsItem {
  width: calc(20% - 16px);
  padding: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  border: 2px solid #1270C1;
}
.calculatorParamsItemLabel {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: #1270C1;
}
.calculatorParamsItemValue {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.calculatorParamsItemValueUp {
  color: #8FC035;
}
.calculatorParamsItemValueDown {
  color: #F40000;
}
.calculatorParamsInfo {
  margin-bottom: 64px;
}
.calculatorParamsInfoItem {
  margin-bottom: 42px;
}
.calculatorParamsInfoItem:last-child {
  margin-bottom: 0;
}
.calculatorParamsInfoTitle {
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.calculatorParamsInfoPlus {
  background-color: #E4FFDB;
  padding: 28px 24px;
  margin-bottom: 12px;
  border-radius: 10px;
}
.calculatorParamsInfoPlusItem {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.calculatorParamsInfoPlusItem:last-child {
  margin-bottom: 0;
}
.calculatorParamsInfoMinus {
  background-color: #FFE9EA;
  padding: 28px 24px;
  margin-bottom: 12px;
  border-radius: 10px;
}
.calculatorParamsInfoMinusItem {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.calculatorParamsInfoMinusItem:last-child {
  margin-bottom: 0;
}
@media (max-width: 1400px) {
  .calculatorSearch {
    width: 340px;
    margin-right: 0;
  }
  .calculatorPreview {
    width: calc(50% - 190px);
    padding: 32px 16px;
  }
  .calculatorParamsItem {
    padding: 24px 14px;
  }
}
@media (max-width: 1300px) {
  .calculatorBlock {
    flex-wrap: wrap;
    gap: 10px;
  }
  .calculatorSearch {
    width: 100%;
    display: flex;
    gap: 20px;
  }
  .calculatorSearchItem {
    width: calc(50% - 10px);
  }
  .calculatorPreview {
    width: 100%;
  }
  .calculatorParams {
    flex-wrap: wrap;
    justify-content: center;
  }
  .calculatorParamsItem {
    width: 304px;
  }
}
@media (max-width: 1000px) {
  .calculatorContent {
    padding: 52px 0 62px;
  }
  .calculatorTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
  }
  .calculatorNav {
    padding: 4px;
    margin-bottom: 28px;
    background-color: #D1D9E5;
    border-radius: 100px;
    display: flex;
    align-items: center;
  }
  .calculatorNavButton {
    width: 50%;
    padding: 10px;
    border-radius: 40px;
    background-color: transparent;
    color: #000000;
    transition: background 0.3s ease-out, color 0.3s ease-out;
  }
  .calculatorNavButton.active {
    background: linear-gradient(to right, #3D8DD1 0%, #095696 100%);
    color: #ffffff;
  }
  .calculatorBlock {
    flex-wrap: wrap;
    gap: 16px;
    overflow: hidden;
  }
  .calculatorSearch {
    margin-right: 0;
    gap: 0;
  }
  .calculatorSearchItem {
    width: 100%;
    margin-bottom: 0;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
    padding: 0;
    transition: opacity 0.3s ease, height 0.3s ease, width 0.3s ease;
  }
  .calculatorSearchItem.active {
    opacity: 1;
    height: auto;
    width: 100%;
    pointer-events: auto;
    padding: 32px 24px;
  }
  .calculatorPreviewRowImages {
    justify-content: center;
    gap: 100px;
  }
  .calculatorParams {
    flex-direction: column;
    gap: 12px;
  }
  .calculatorParamsTitle {
    margin-bottom: 48px;
  }
  .calculatorParamsItem {
    width: 100%;
    padding: 38px 20px;
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (max-width: 700px) {
  .calculatorContent {
    padding: 32px 0 28px;
  }
  .calculatorTop {
    flex-direction: column-reverse;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 32px;
  }
  .calculatorSearchItem.active {
    padding: 28px 20px;
  }
  .calculatorPreview {
    padding: 28px 20px;
  }
  .calculatorPreviewRowImages {
    justify-content: space-between;
    gap: 20px;
  }
  .calculatorPreviewRowImages img {
    max-height: 200px;
    height: 100%;
    object-fit: contain;
  }
  .calculatorParams {
    margin-bottom: 36px;
  }
  .calculatorParamsTitle {
    margin-bottom: 32px;
    font-size: 20px;
    line-height: 36px;
  }
  .calculatorParamsItem {
    padding: 22px 24px;
  }
  .calculatorParamsItemLabel {
    font-size: 15px;
  }
  .calculatorParamsItemValue {
    font-size: 15px;
  }
  .calculatorParamsInfoPlusItem {
    font-size: 15px;
  }
  .calculatorParamsInfoMinusItem {
    font-size: 15px;
  }
}
.blogPage {
  background: linear-gradient(67deg, #FCFCFE 0%, #E5E8EF 100%);
}
.blogPageContent {
  padding: 56px 0;
}
.blogPageTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.blogPageWrapper {
  display: flex;
  gap: 28px;
}
.blogPageBlock {
  width: calc(100% - 412px);
}
.blogPageInfo {
  width: 384px;
}
.blogPageInfoItem {
  padding: 20px 28px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}
.blogPageInfoTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.blogPageList {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 56px;
}
.blogPageItem {
  width: calc(25% - 15px);
}
.blogPageCates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blogPageCatesItem {
  padding: 8px 10px;
  background-color: #ffffff;
  border: 2px solid #000000;
  border-radius: 40px;
  line-height: 20px;
}
.blogPageCatesLink {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #000000;
}
.blogPageLatestItem {
  margin-bottom: 20px;
}
.blogPageLatestItem:last-child {
  margin-bottom: 0;
}
.blogPageLatestItemLink {
  display: flex;
  align-items: center;
  gap: 18px;
}
.blogPageLatestItemImage {
  width: 110px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
}
.blogPageLatestItemImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blogPageLatestItemContent {
  width: calc(100% - 128px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: #000000;
}
.blogPageLatestItemName {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
}
.blogPageLatestItemDate {
  color: #A9A9A9;
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  gap: 16px;
}
.blogPageLatestItemDate::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background-color: #A9A9A9;
  border-radius: 1px;
}
.blogPageTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blogPageTagsItem {
  padding: 8px 10px;
  background-color: #1270C1;
  border-radius: 40px;
  line-height: 20px;
}
.blogPageTagsLink {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #ffffff;
}
.blogPagePost {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
}
.blogPagePostTop {
  height: 240px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.blogPagePostTop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #06112C;
  opacity: 0.6;
  z-index: 0;
}
.blogPagePostTopCate {
  padding: 6px 16px;
  display: block;
  background-color: #2D90E4;
  border-radius: 40px;
  margin-bottom: 28px;
  color: #ffffff;
  position: relative;
}
.blogPagePostTopTitle {
  position: relative;
  font-size: 26px;
  line-height: 24px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.blogPagePostTopDate {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
}
.blogPagePostContent {
  padding: 64px 112px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}
.blogPagePostBlock {
  display: flex;
  align-items: center;
  gap: 56px;
}
.blogPagePostBlock img {
  width: 390px;
  height: 390px;
  border-radius: 20px;
  object-fit: cover;
}
.blogPagePostBlockContent {
  width: calc(100% - 446px);
}
.blogPagePost h4 {
  font-size: 17px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.blogPagePost p {
  font-size: 17px;
  line-height: 28px;
  margin-bottom: 20px;
}
.blogPagePost a {
  display: block;
  color: #1270C1;
  text-decoration: underline;
}
.blogPagePost ul {
  margin-left: 20px;
  margin-bottom: 20px;
}
.blogPagePost ul li {
  list-style: disc;
  font-size: 17px;
  line-height: 28px;
}
@media (max-width: 1500px) {
  .blogPagePostBlock {
    flex-direction: column-reverse;
    gap: 36px;
  }
  .blogPagePostBlock img {
    width: 100%;
    height: 390px;
  }
  .blogPagePostBlockContent {
    width: 100%;
  }
  .blogPageItem {
    width: calc(33.33% - 14px);
  }
}
@media (max-width: 1300px) {
  .blogPagePostContent {
    padding: 64px;
  }
  .blogPageItem {
    width: calc(50% - 10px);
  }
}
@media (max-width: 1000px) {
  .blogPageContent {
    padding: 52px 0 56px;
  }
  .blogPageTop {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }
  .blogPageWrapper {
    flex-direction: column;
    gap: 32px;
  }
  .blogPageBlock {
    width: 100%;
  }
  .blogPageInfo {
    width: 100%;
  }
  .blogPagePostContent {
    padding: 48px 52px;
  }
}
@media (max-width: 700px) {
  .blogPageContent {
    padding: 32px 0 48px;
  }
  .blogPageTop {
    margin-bottom: 42px;
  }
  .blogPageWrapper {
    gap: 48px;
  }
  .blogPageItem {
    width: 100%;
  }
  .blogPagePostTop {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 260px;
    padding: 36px 20px;
  }
  .blogPagePostTopCate {
    padding: 4px 16px;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 24px;
  }
  .blogPagePostTopTitle {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 24px;
  }
  .blogPagePostContent {
    padding: 36px 20px 52px;
  }
  .blogPagePostBlock {
    margin-bottom: 36px;
  }
}
/*# sourceMappingURL=style.css.map */