@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Raleway:wght@400;600;700&display=swap");
header {
  background-color: var(--main-background-color);
  display: grid;
  justify-items: center;
  position: fixed;
  width: 100%;
  z-index: 102;
}
header nav .logo {
  position: relative;
  left: calc(50% - 62px);
}
header nav .links-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
header nav .links-wrapper ol {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  height: var(--header-hight);
  list-style: none;
  justify-content: space-between;
}
header nav .links-wrapper ol li {
  cursor: pointer;
}
header nav .links-wrapper ol li a {
  display: block;
  margin-block: auto;
}
header nav .links-wrapper ol li:first-child {
  margin-left: 0;
}
header nav .for-pc {
  display: none;
}
@media screen and (min-width: 1100px) {
  header nav .for-pc {
    display: flex;
  }
  header nav .for-mobile {
    display: none;
  }
  header nav ol {
    width: 38%;
  }
  header nav ol:last-child {
    width: 42%;
    justify-content: space-around;
  }
  header nav .logo {
    position: absolute;
  }
}
@media screen and (max-width: 768px) {
  header .logo.anchor {
    left: calc(50% - 38px);
  }
  header .logo.anchor .img {
    height: 50px;
  }
}

:root {
  --max-width: 107.5rem;
  --body-padding: 6.25rem;
  --header-hight: 6.875rem;
  --intro-section-radius: 2.5rem;
  --main-background-color: #fff;
  --main-color: #303030;
  --secondary-background-color: #2D2C2C;
  --secondary-color: #fff;
  --contrast-color: #F8E967;
  --section-title-font-size: 3.0625rem;
  --card-title-font-size: 2.25rem;
  --footer-font-size: 2rem;
  --card-footer-font-size: 1.75rem;
  --paragragh-font-size: 1.625rem;
}

html {
  scroll-behavior: smooth;
}
@media screen and (max-width: 1960px) {
  html .section-comics.content-container, html .history.content-container {
    max-width: 100%;
    padding-left: 3vw;
  }
  html .section-comics.content-container .img-content, html .history.content-container .img-content {
    margin: 0;
  }
  html .section-comics.reverse {
    margin-left: -3vw;
    padding-right: 3vw;
  }
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 14px;
  }
  html .section-title, html .section-subtitle {
    text-align: center;
  }
  html .section-comics {
    gap: 3rem;
  }
  html .section-comics .section-title, html .section-comics .section-subtitle {
    text-align: left;
  }
}
@media screen and (max-width: 1200px) {
  html .section-comics.content-container, html .history.content-container .section-comics {
    flex-direction: column;
    gap: 2rem;
    padding-inline: 3vw;
  }
  html .section-comics.content-container > div, html .history.content-container .section-comics > div {
    width: 100%;
    max-width: 100%;
  }
  html .section-comics.content-container .img-content, html .history.content-container .section-comics .img-content {
    border-radius: 2.25rem;
    aspect-ratio: 1.8;
  }
  html .history.content-container .section-comics.reverse {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 992px) {
  html {
    font-size: 12px;
    --section-title-font-size: 2.5rem;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 10px;
    --section-title-font-size: 2.25rem;
    --card-title-font-size: 2rem;
    --footer-font-size: 1.75rem;
    --paragragh-font-size: 1.5rem;
  }
}
@media screen and (max-width: 500px) {
  html {
    font-size: 8px;
  }
}

body {
  color: var(--main-color);
  font: 400 2rem Raleway, sans-serif;
  background-color: var(--main-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
}

.content-container {
  width: 100%;
  max-width: min(var(--max-width), 94vw);
}

.section-title, h2 {
  font-weight: 600;
  font-size: var(--section-title-font-size);
}

.section-title {
  text-align: left;
  text-transform: uppercase;
}

.section-subtitle, h3 {
  font-weight: 500;
  font-size: var(--section-title-font-size);
}

h4 {
  font-weight: 400;
}

p, li {
  font-size: var(--paragragh-font-size);
}

.background-image-property {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.icon.background-image-property {
  background-size: auto;
}

.section-comics {
  display: flex;
  justify-content: space-between;
  gap: 5.25rem;
}
.section-comics .text-content {
  width: 50%;
}
.section-comics .img-content {
  max-width: min(58.75rem, 50vw);
  margin-right: -6.25rem;
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 1.21;
  border-bottom-left-radius: 2.25rem;
  border-top-left-radius: 2.25rem;
}

.section-comics.reverse .img-content {
  margin-inline: -6.25rem 0;
  border-radius: 0;
  border-bottom-right-radius: 2.25rem;
  border-top-right-radius: 2.25rem;
}

section.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("./../assets/intro.webp"), rgba(0, 0, 0, 0.36);
  background-blend-mode: color;
  aspect-ratio: 2.21;
  border-radius: 40px;
  margin-top: var(--header-hight);
  padding: 0;
}
section.intro .intro-header {
  display: grid;
  align-content: center;
  height: 100%;
  color: var(--secondary-color);
}
section.intro .intro-header h1, section.intro .intro-header h3 {
  height: fit-content;
  text-align: center;
}
section.intro .intro-header h1 {
  font-size: 5.375rem;
  font-weight: 700;
}
section.intro .intro-footer {
  width: 100%;
  display: grid;
  justify-items: center;
  background-color: #F8E967;
  border-bottom-left-radius: var(--intro-section-radius);
  border-bottom-right-radius: var(--intro-section-radius);
}
section.intro .intro-footer .intro-footer-content {
  width: 100%;
  max-width: 80%;
  padding-block: 2.375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.875rem;
  line-height: 1.7;
}
section.intro .intro-footer .intro-footer-content .contact-name {
  width: 65%;
}
section.intro .intro-footer .intro-footer-content .tel-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 45%;
}
section.intro .intro-footer .intro-footer-content .contact-number {
  font: 600 1.875rem Montserrat, sans-serif;
  color: #464646;
  text-decoration: none;
}

@media screen and (max-width: 1440px) {
  section.intro .intro-footer .intro-footer-content {
    max-width: 90%;
  }
}
@media screen and (max-width: 1200px) {
  section.intro .intro-footer .intro-footer-content {
    max-width: 95%;
  }
  section.intro {
    display: block;
    background: none;
    border-radius: 0;
    aspect-ratio: auto;
  }
  section.intro .intro-header {
    background: url("./../assets/intro.webp"), rgba(0, 0, 0, 0.36);
    background-blend-mode: color;
    background-size: contain;
    aspect-ratio: 2.21;
    border-radius: 40px 40px 0 0;
  }
}
@media screen and (max-width: 1100px) {
  section.intro {
    margin-top: calc(80px + var(--header-hight));
  }
  section.intro .intro-footer .intro-footer-content {
    font-size: 1.5rem;
    padding-block: 2rem;
  }
  section.intro .intro-footer .intro-footer-content .tel-wrapper {
    width: 40%;
  }
  section.intro .intro-footer .intro-footer-content .contact-number {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  section.intro {
    margin-top: calc(55px + var(--header-hight));
  }
  section.intro .intro-footer .intro-footer-content {
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.75rem;
  }
  section.intro .intro-footer .intro-footer-content .contact-name {
    text-align: center;
  }
  section.intro .intro-footer .intro-footer-content .tel-wrapper {
    justify-content: space-around;
  }
  section.intro .intro-footer .intro-footer-content .tel-wrapper, section.intro .intro-footer .intro-footer-content .contact-name {
    width: 100%;
  }
}
section.services {
  width: 100%;
  margin-top: 4.76rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.services .vehicles .section-body {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, min(25.875rem, 80vw));
  justify-content: center;
  gap: 1.25rem;
}
section.services .vehicles .section-body .card {
  display: flex;
  flex-direction: column;
  max-width: 25.9375rem;
  border-radius: 0.625rem;
  border: 2px solid #303030;
  background: rgba(217, 217, 217, 0);
}
section.services .vehicles .section-body .card img {
  aspect-ratio: 1.24;
  object-fit: contain;
  object-position: center;
  width: 100%;
  overflow: hidden;
}
section.services .vehicles .section-body .card .card-footer {
  padding: 1rem 2.25rem 2.5rem;
  overflow: hidden;
  height: 11.625rem;
  font-size: var(--card-footer-font-size);
}
@media screen and (max-width: 1440px) {
  section.services .vehicles .section-body .card .card-footer {
    height: auto;
  }
}
@media screen and (max-width: 1200px) {
  section.services {
    margin-top: 4.25rem;
  }
}

section.roads {
  padding-block: 8.125rem;
  width: 100%;
}
section.roads .section-body {
  width: 100%;
  gap: 1.25rem;
  display: flex;
  margin-top: 2.5rem;
}
section.roads .section-body .card {
  width: 100%;
  border-radius: 0.625rem;
  border: 2px solid #303030;
  padding: 3.75rem 3.125rem 3.75rem 1.625rem;
  display: flex;
  align-items: center;
  gap: 1.875rem;
}
section.roads .section-body .card .card-order {
  width: 3.125rem;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: auto 0;
  background-color: var(--contrast-color);
  font: 400 var(--card-title-font-size) Montserrat, sans-serif;
}
@media screen and (max-width: 1600px) {
  section.roads .section-body {
    padding: 2.75rem 2rem;
  }
}
@media screen and (max-width: 1550px) {
  section.roads .section-body .card {
    padding: 2.5rem 1.5rem;
  }
}
@media screen and (max-width: 1440px) {
  section.roads {
    padding-block: 5rem 3rem;
  }
  section.roads .section-body .card {
    padding-block: 1.75rem;
    padding-inline: 1.25rem;
    gap: 1.25rem;
  }
}
@media screen and (max-width: 1200px) {
  section.roads .section-body .card {
    padding-block: 1.5rem;
  }
  section.roads .section-body .card .card-label {
    width: max-content;
  }
}
@media screen and (max-width: 992px) {
  section.roads .section-body {
    flex-wrap: wrap;
  }
}

section.lab {
  background-color: #2d2c2c;
  padding-block: 3.875rem;
  color: var(--secondary-color);
  display: flex;
  justify-content: center;
  width: 100%;
}
section.lab .section-comics .text-content {
  padding-block: 1.875rem;
}
section.lab .section-comics .text-content p {
  margin-top: 1.5rem;
  margin-bottom: 4.125rem;
}
section.lab .section-comics .text-content li {
  margin-bottom: 2.375rem;
  display: flex;
}
section.lab .section-comics .text-content li .li-counter {
  margin-right: 1.375rem;
}
section.lab .section-comics .text-content ol {
  list-style: none;
  margin-left: 2.25rem;
  padding: 0;
}
section.lab .section-comics .img-content {
  background-image: url("./../assets/lab.webp");
}

section.products {
  margin-top: 8.375rem;
}
section.products .section-body {
  margin-top: 1rem;
}
section.products .card-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.875rem;
}
section.products .card-wrapper .card {
  width: 100%;
  border-radius: 1.5rem;
  padding-top: 1.625rem;
  padding-inline: 1.25rem;
  border: 2px solid #2D2C2C;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.products .card-wrapper .card .card-title {
  font-size: var(--card-title-font-size);
  font-weight: 600;
  text-align: center;
}
section.products .card-wrapper .card .card-subtitle {
  position: relative;
  top: 1.875rem;
  z-index: 1;
  background: var(--contrast-color);
  padding: 0.625rem 1.625rem;
  border-radius: 7.5rem;
}
section.products .product-info {
  margin-top: 6.875rem;
  display: flex;
  align-items: center;
}
section.products .product-info .upload-info-btn {
  width: 4.25rem;
  height: 4.25rem;
  margin-right: 2rem;
  background-image: url("./../assets/download.png");
  background-color: var(--contrast-color);
  border-radius: 5px;
}
@media screen and (max-width: 1440px) {
  section.products {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 1200px) {
  section.products .card-wrapper {
    flex-wrap: wrap;
  }
}

section.gallery {
  margin-top: 7.5rem;
  margin-bottom: 8.75rem;
}
section.gallery .gallery-wrapper {
  margin-top: 2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
section.gallery .gallery-wrapper .card {
  width: 415px;
  height: 320px;
}
section.gallery .gallery-wrapper .swiper-button {
  height: 62px;
  width: 62px;
  background-color: #F8E967;
  background-size: 28px;
  border-radius: 50px;
  background-repeat: no-repeat;
  background-position: center;
}
section.gallery .gallery-wrapper .swiper-button-next {
  background-image: url("./../assets/Arrow2.webp");
}
section.gallery .gallery-wrapper .swiper-button-prev {
  background-image: url("./../assets/Arrow1.webp");
}
@media screen and (max-width: 1440px) {
  section.gallery {
    margin-block: 5rem 6rem;
  }
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "" !important;
}

section.accomplishments {
  width: 100%;
  background-color: #2d2c2c;
  padding-block: 5.625rem;
  display: flex;
  justify-content: center;
  color: var(--secondary-color);
  font-size: var(--card-title-font-size);
}
section.accomplishments .section-body .section-content {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
section.accomplishments .section-body .section-content .left-part, section.accomplishments .section-body .section-content .right-part {
  width: 100%;
}
section.accomplishments .section-body .section-content .left-part li, section.accomplishments .section-body .section-content .right-part li {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  margin-top: 5.5rem;
  height: 5.625rem;
  gap: 1rem;
}
section.accomplishments .section-body .section-content .left-part li .icon, section.accomplishments .section-body .section-content .right-part li .icon {
  min-width: 5.375rem;
  min-height: 5rem;
  height: 100%;
  display: grid;
  justify-items: center;
  background-size: contain;
}
section.accomplishments .section-body .section-content .left-part li:first-child, section.accomplishments .section-body .section-content .right-part li:first-child {
  margin-top: 4.375rem;
}
section.accomplishments .section-body .section-content .padlock {
  background-image: url("./../assets/padlock.svg");
}
section.accomplishments .section-body .section-content .factory {
  background-image: url("./../assets/factory.png");
}
section.accomplishments .section-body .section-content .tonnage {
  background-image: url("./../assets/110.png");
}
section.accomplishments .section-body .section-content .founded {
  background-image: url("./../assets/1972.png");
}
section.accomplishments .section-body .section-content .staff {
  background-image: url("./../assets/staff.png");
}
section.accomplishments .section-body .section-content .vehicles-park {
  background-image: url("./../assets/vehicles-park.png");
}
section.accomplishments .section-body .section-content .industry-center {
  background-image: url("./../assets/industry-center.png");
}
section.accomplishments .section-body .section-content .delivery {
  background-image: url("./../assets/delivery.png");
}
section.accomplishments .section-body .section-content .lab {
  background-image: url("./../assets/lab.png");
}
section.accomplishments .section-body .section-content .quality {
  background-image: url("./../assets/quality.png");
}
@media screen and (max-width: 992px) {
  section.accomplishments .section-content {
    gap: 0;
    flex-direction: column;
  }
  section.accomplishments .section-content li {
    gap: 2rem;
  }
}

section.history {
  margin-top: 8.125rem;
}
section.history .section-comics {
  margin-bottom: 6.25rem;
}
section.history .section-comics .img-content {
  background-image: url("./../assets/history1.webp");
}
section.history h2 {
  margin-bottom: 5.625rem;
}
section.history .section-comics.reverse .text-content {
  display: grid;
  align-items: center;
}
section.history .section-comics.reverse .img-content {
  background-image: url("./../assets/history2.webp");
}
@media screen and (max-width: 1440px) {
  section.history {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 1200px) {
  section.history .section-comics:first-of-type {
    margin-bottom: 3.25rem;
  }
  section.history h2 {
    margin-bottom: 3rem;
  }
}

section.location-contacts {
  width: 100%;
  background-color: var(--secondary-background-color);
  color: var(--secondary-color);
  display: grid;
  justify-items: center;
  font-size: var(--card-footer-font-size);
}
section.location-contacts .section-comics {
  width: 100%;
  gap: 0;
}
section.location-contacts .section-comics div {
  width: 100%;
}
section.location-contacts .section-comics .text-content {
  display: grid;
  justify-content: center;
  padding: 5.375rem var(--body-padding);
}
section.location-contacts .section-comics .text-content .physical-location, section.location-contacts .section-comics .text-content .mail {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
section.location-contacts .section-comics .text-content .icon {
  width: 2.825rem;
  height: 2.825rem;
  min-width: 20px;
  min-height: 20px;
  background-size: contain;
}
section.location-contacts .section-comics .text-content .icon.location {
  background-image: url("./../assets/location.png");
}
section.location-contacts .section-comics .text-content .icon.post {
  background-image: url("./../assets/post.png");
}
section.location-contacts .section-comics .text-content .working-hours-title {
  margin-block: 4.125rem;
}
section.location-contacts .section-comics iframe {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1960px) {
  section.location-contacts .section-comics.location-contacts-wrapper {
    max-width: calc(var(--max-width) + 2 * var(--body-padding));
  }
  section.location-contacts .section-comics.location-contacts-wrapper .text-content {
    padding-right: calc(var(--body-padding) + 5.3115rem);
  }
  section.location-contacts .section-comics.location-contacts-wrapper .map-content {
    margin-left: -10.625rem;
  }
}
@media screen and (max-width: 1200px) {
  section.location-contacts .section-comics {
    flex-direction: column;
    padding: 0 5vw 5vw;
  }
  section.location-contacts .section-comics .map-content {
    height: 50vw;
  }
  section.location-contacts .section-comics .map-content iframe {
    border-radius: 2.25rem;
  }
}
@media screen and (max-width: 768px) {
  section.location-contacts .section-comics .text-content {
    padding: 3.375rem 2rem;
  }
}

section.person-contacts {
  padding-block: 4rem 2.875rem;
  width: 100%;
  display: grid;
  justify-items: center;
}
section.person-contacts .person-list {
  gap: 2rem;
  display: grid;
}
section.person-contacts .person-list li {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-end;
  justify-items: center;
}
section.person-contacts .person-list li p {
  justify-self: start;
}
section.person-contacts .person-list li a {
  font-weight: 600;
}

@media screen and (max-width: 550px) {
  section.person-contacts .person-list li {
    grid-template-columns: none;
    grid-template-rows: repeat(4, 1fr);
  }
  section.person-contacts .person-list li p {
    justify-self: center;
    text-align: center;
  }
}
footer {
  background-color: var(--contrast-color);
  font-size: var(--footer-font-size);
  width: 100%;
  display: grid;
  justify-items: center;
}
footer nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem 10.875rem;
  padding-block: 4.875rem 4.125rem;
  list-style: none;
}
footer nav ul li {
  cursor: pointer;
}
footer .rights {
  padding-block: 1.5rem;
  font-size: var(--paragragh-font-size);
}
footer .divider {
  height: 1px;
  background-color: var(--secondary-background-color);
  width: min(1430px, 100%);
}
@media screen and (max-width: 1200px) {
  footer nav ul {
    padding-block: 3rem;
  }
}
@media screen and (max-width: 550px) {
  footer nav {
    justify-self: auto;
  }
  footer nav ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*# sourceMappingURL=style.css.map */