:root {
  --primary-color: #d30b0b;
  --secondary-color: #232323;
  --card-color: #d9d9d9;
  --white-color: #fff;
  --background-color: #f0f0f0;
  --max-width: 1300px;
  --pattern-image: url('assets/pattern.webp');
  --pattern-color: #ebebeb;
  --pattern-size: 100px;
}

body {
  margin: 0;
  font-family: 'DINNextLT', sans-serif;
  --width: min(0.3906vw, 7.5px);
  font-size: calc(16px + var(--width));

  background: conic-gradient(from 90deg at 2px 2px, #0000 90deg, var(--pattern-color) 0),
    conic-gradient(from 90deg at 1px 1px, #0000 90deg, var(--pattern-color) 0), var(--background-color);
  background-size: var(--pattern-size) var(--pattern-size), calc(var(--pattern-size) / 5) calc(var(--pattern-size) / 5);
}

.fade-scroll {
  opacity: 0;
  transform: translateY(50px);
}

/* #region Header */

header {
  display: grid;
}

header .container {
  display: grid;
  grid-area: 1 / 1;
  max-width: var(--max-width);
  margin: auto;
  padding-inline: 0.5em;
}

header .pattern {
  background: var(--pattern-image), var(--card-color);
  grid-area: 1 / 1;
  height: 90%;
}

header .content {
  grid-area: 1 / 1;
}

.content .logo {
  text-align: center;
}

.content .logo .line {
  background-color: var(--primary-color);
  height: 2px;
  width: 100%;
  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.content .logo svg {
  width: 4em;
  height: 4em;
  animation: slide-in-bck-center 0.7s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-bck-center {
  0% {
    transform: perspective(200px) translateZ(200px);
    opacity: 0;
  }
  100% {
    transform: perspective(200px) translateZ(0);
    opacity: 1;
  }
}

header .title {
  text-align: center;
  font-size: 1.4em;
}

header .title h1 {
  color: var(--primary-color);
}

header .title h2 {
  color: var(--secondary-color);
  font-size: 1.6em;
  font-weight: 500;
}

header .animation {
  display: grid;
  justify-items: center;
  align-items: center;
}

header .anim-bg {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 750px;
  background-color: var(--primary-color);
  border-radius: 50%;
  aspect-ratio: 1;
  animation: scale-in-center 0.5s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

header .anim {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1;
}

header .anim-container {
  position: absolute;
  display: grid;
  align-items: end;
  justify-items: center;
  width: 20%;
}

.anim-center {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.anim-door-left {
  bottom: 28%;
  left: 16%;
  opacity: 0.7;
}

.anim-door-right {
  bottom: 28%;
  right: 16%;
  opacity: 0.7;
}

.anim-light-left {
  bottom: 0px;
  left: 22%;
}

.anim-light-right {
  bottom: 0px;
  right: 22%;
}

.anim-block-left {
  bottom: 10%;
  left: 0;
  width: 14% !important;
}

.anim-block-right {
  bottom: 10%;
  right: 0;
  width: 14% !important;
}

header .anim-container img {
  grid-area: 1 / 1;
  width: 100%;
  object-fit: scale-down;
  height: auto;
}

header .anim-container .animated-img {
  margin-bottom: 100%;
  animation: server 3s infinite alternate ease-in-out;
  z-index: 1;
}

header .anim-container .animated-partials-img {
  margin-bottom: 100%;
  animation: blink 2s infinite ease-in-out, server 3s infinite alternate ease-in-out;
  z-index: 1;
}

@keyframes server {
  to {
    margin-bottom: 30%;
  }
}

header .anim-container .animated-base-img {
  animation: blink 2s infinite ease-in-out;
  z-index: 0;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

header .card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;

  margin-top: 4em;
  border-radius: 32px;
  border: solid 1px var(--primary-color);
  background-color: var(--white-color);
  padding: 2em;
  animation: flip-in-hor-top 1s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes flip-in-hor-top {
  0% {
    transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

header .card .left {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;
}

header .card .left img {
  width: 100%;
  object-fit: scale-down;
  height: auto;
}

header .card .right {
  flex: 1;
}

header .card .right h1 {
  color: var(--primary-color);
  margin-top: 0;
}

header .card .right p {
  color: var(--secondary-color);
  font-weight: 500;
  margin-bottom: 0;
}

@media screen and (max-width: 700px) {
  header .card {
    flex-direction: column-reverse;
    gap: 2em;
    padding: 1em;
  }
}

/* #endregion */

/* #region Achievements */

.achievements {
  margin-top: 5em;
}

.achievements .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0.5em;
}

.achievements .title {
  color: var(--primary-color);
  text-align: center;
}

.achievements .card-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 3em;
}

.achievements .card {
  flex: 1;
  max-width: 200px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em 3em;
  border: solid 1px var(--primary-color);
  border-radius: 32px;
  background-color: var(--white-color);
}

.achievements .card .card-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8em;

  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--card-color);
}

.achievements .card .card-logo img {
  width: 4em;
  height: auto;
  max-height: 4em;
  opacity: 0;
  animation: puff-in-center 0.7s 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

.achievements .card .card-title {
  color: var(--primary-color);
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 340px) {
  .achievements .card .card-title {
    white-space: initial;
  }
}

/* #endregion */

/* #region Our Clients */

.clients {
  margin-top: 5em;
}

.clients .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0.5em;
}

.clients .title {
  color: var(--primary-color);
  text-align: center;
}

.clients .card-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 3em;
}

.clients .card {
  width: 200px;
  height: 200px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border: solid 1px var(--primary-color);
  border-radius: 32px;
  background-color: var(--white-color);
}

.clients .card img {
  width: 5em;
  height: auto;
  object-fit: scale-down;
  opacity: 0;
  animation: puff-in-center 0.7s 0.2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes puff-in-center {
  0% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}

/* #endregion */

/* #region Our Products */

.products {
  margin-top: 5em;
}

.products .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0.5em;
}

.products .title {
  color: var(--primary-color);
  text-align: center;
}

.products .card-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 3em;
}

.products .card {
  width: 200px;
  aspect-ratio: 1;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em;
  border: solid 1px var(--primary-color);
  border-radius: 32px;
  background-color: var(--white-color);

  box-shadow: 4px 4px 0px 0 var(--primary-color);
}

.products .card .card-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.4em;

  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--primary-color);

  opacity: 0;

  animation: slide-in-blurred-top 0.6s 0.1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slide-in-blurred-top {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}

.products .card .card-logo svg {
  width: 2em;
  height: 2em;
  fill: #fff;
}

.products .card .card-title {
  color: var(--primary-color);
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 340px) {
  .products .card .card-title {
    white-space: initial;
  }
}

/* #endregion */

/* #region Footer */

footer {
  position: relative;
  display: grid;
  margin-top: 10em;
}

footer .container {
  grid-area: 1 / 1;
  margin: auto;
  max-width: var(--max-width);
  padding: 0 0.5em;
}

footer .pattern {
  grid-area: 1 / 1;
  align-self: end;
  background: var(--pattern-image), var(--primary-color);
  height: 80%;
}

footer .bottom-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
}

footer .bottom-pattern svg {
  width: 30vw;
  height: 30vw;
  max-width: 300px;
  max-height: 300px;
  fill: var(--card-color);
}

footer .top-card {
  display: flex;
  flex-direction: row;
  gap: 1em;
  border-radius: 32px;
  border: solid 1px var(--primary-color);
  background-color: var(--white-color);
  padding: 2em 2em;
  animation: flip-in-hor-top 1s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

footer .top-card .right {
  flex: 1;
  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

footer .top-card .right img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

footer .top-card .right .rounded-bg {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  background-color: var(--primary-color);
  border-radius: 50%;
}

footer .top-card .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

footer .top-card .left h1 {
  color: var(--primary-color);
  margin: 0;
}

footer .top-card .left p {
  color: var(--secondary-color);
  font-weight: 500;
}

footer .top-card .left h2 {
  color: var(--primary-color);
  margin-top: 0;
}

footer .top-card .left .contacts {
  color: var(--primary-color);
  margin-bottom: 1em;
}

footer .top-card .left .contacts a {
  display: block;
  text-decoration: none;
  margin-block: 0.5em;
  color: var(--secondary-color);
  font-weight: 500;
}
footer .top-card .left .contacts svg {
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  fill: var(--primary-color);
}

footer .top-card .left .links {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

footer .top-card .left .links svg {
  width: 2em;
  height: 2em;
  fill: var(--primary-color);
}

footer .top-card .left .links .link {
  text-decoration: none;
}

footer .bottom-footer {
  height: 500px;
}

footer .bottom-footer .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
}

footer .bottom-footer .logo .center {
  fill: var(--white-color);
  width: 6em;
  height: 6em;
}

footer .bottom-footer .logo .left,
footer .bottom-footer .logo .right {
  fill: var(--secondary-color);
  width: 60%;
  max-width: 10em;
  height: 10em;
  transform: scaleX(0);
}

footer .bottom-footer .logo .right {
  animation: scale-in-hor-right 1s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-hor-right {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

footer .bottom-footer .logo .left {
  animation: scale-in-hor-left 1s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-hor-left {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

footer .bottom-footer h1 {
  color: var(--white-color);
  text-align: center;
  margin-top: 0;
}

@media screen and (max-width: 600px) {
  footer .top-card {
    flex-direction: column-reverse;
    padding: 1em;
  }

  footer .top-card .left h1,
  footer .top-card .left h2,
  footer .top-card .left p {
    text-align: center;
  }

  footer .top-card .left .links {
    justify-content: center;
  }
}

/* #endregion */