/* COLOR VARIABLES */
:root {
  --primary_blue: #3c99cd;
  --dark_text: #282a33;
  --light_dark: #404248;
  --white: #fff;
  --link_hover: #e4b149;
  --h1: 4.5em;
  --h2: 3.25em;
  --h3: 2em;
  --h4: 1.5em;
  --link: 1.25em;
  --text: 1.125em;
  --extra-light: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
}

body {
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
  background-image: repeating-linear-gradient(
    90deg,
    #fafbfe 0%,
    #fafbfe 25%,
    #fff 25%,
    #fff 50%,
    #fafbfe 50%,
    #fafbfe 75%,
    #fff 75%,
    #fff 100%
  );
  overflow-x: hidden;
}

/* HEADER */

.header {
  width: 100%;
  height: 1000px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: slider 16s infinite;
}

@keyframes slider {
  from {
    background-image: url("../img/header_img1.jpg");
  }
  37% {
    background-image: url("../img/header_img1.jpg");
  }
  40% {
    background-image: url("../img/header_img2.jpg");
  }
  67% {
    background-image: url("../img/header_img2.jpg");
  }
  70% {
    background-image: url("../img/header_img3.jpg");
  }
  97% {
    background-image: url("../img/header_img3.jpg");
  }
  to {
    background-image: url("../img/header_img1.jpg");
  }
}

.header__nav {
  height: 110px;
  width: 100%;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 5fr 1fr 1fr 1fr 5fr;
  justify-content: center;
  position: fixed;
}
#header__nav.fix {
  background-image: repeating-linear-gradient(
    90deg,
    #fafbfe 0%,
    #fafbfe 25%,
    #fff 25%,
    #fff 50%,
    #fafbfe 50%,
    #fafbfe 75%,
    #fff 75%,
    #fff 100%
  );
  height: 110px;
  padding-top: 0;
  z-index: 100;
}

.header__nav-link {
  position: relative;
}

.header__nav-link:hover {
  color: var(--link_hover);
}

#header__nav-link4 {
  justify-self: end;
  margin-right: 80px;
  border: 2px solid var(--white);
  padding: 5px;
}
#header__nav-link4:hover {
  border: 2px solid var(--link_hover);
}

#header__nav-link1.fix,
#header__nav-link2.fix,
#header__nav-link3.fix {
  color: var(--dark_text);
  align-self: center;
  position: relative;
}

#header__nav-link1.fix:hover,
#header__nav-link2.fix:hover,
#header__nav-link3.fix:hover {
  color: var(--link_hover);
}

#header__nav-link4.fix {
  color: var(--dark_text);
  align-self: center;
  position: relative;
  border: 2px solid var(--dark_text);
}

#header__nav-link4.fix:hover {
  border: 2px solid var(--link_hover);
  color: var(--link_hover);
}

#header__nav-logo.fix {
  background-image: url(../img/header__logo_coloured.svg);
  background-position: center top;
}

.header__nav a {
  cursor: pointer;
  color: var(--white);
  font-size: var(--text);
  font-weight: var(--semi-bold);
  justify-content: center;
  text-align: center;
  text-decoration: none;
  align-self: center;
  transition: 0.2s;
}

.header__nav-logo {
  width: 188px;
  height: 30px;
  padding: 0 0 0 103px;
  justify-content: center;
  align-self: center;
  background-image: url(../img/header_logo.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.header__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 308px 0 0 390px;
}

.header__title-h1 {
  margin: 0;
  font-weight: var(--semi-bold);
  font-size: var(--h1);
  line-height: 75px;
  color: var(--white);
}

.header__title-text {
  margin: 25px 0 0 0;
  max-width: 605px;
  font-weight: var(--medium);
  font-size: var(--text);
  line-height: 25px;
  color: var(--white);
}

.header__title-container {
  display: flex;
  padding-top: 36px;
}

.header__title-container a {
  display: flex;
  flex-direction: row;
  column-gap: 25px;
  cursor: pointer;
  color: var(--white);
  font-size: var(--text);
  font-weight: var(--semi-bold);
  text-decoration: none;
  transition: 0.2s;
}

.header__title-container-arrow {
  background-image: url(../img/Line.png);
  width: 35px;
  height: 2px;
  align-self: center;
  transition: 0.2s;
}

#header__arrow.fix {
  background-image: url(../img/white_arrow.png);
  width: 60px;
  height: 17px;
  transition: 0.2s;
}

.header__title-container2 {
  display: flex;
  flex-direction: column;
  padding-right: 100px;
  margin-top: 80px;
}

.change__text {
  color: var(--white);
  font-size: var(--text);
  font-weight: var(--semi-bold);
  text-decoration: none;
  writing-mode: vertical-lr;
  transform: rotate(360deg);
  align-self: end;
}

.change__text:before {
  content: "Уникальное предложение";
  animation-name: changeText;
  animation-duration: 16s;
  animation-iteration-count: infinite;
}

@keyframes changeText {
  from {
    content: "Уникальное предложение";
  }
  37% {
    content: "Уникальное предложение";
  }
  40% {
    content: "Транспорт и логистика";
  }
  67% {
    content: "Транспорт и логистика";
  }
  70% {
    content: "Импорт и экспорт";
  }
  97% {
    content: "Импорт и экспорт";
  }
  to {
    content: "Уникальное предложение";
  }
}

/* ABOUT US */

.about {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding-left: 391px;
  margin-top: 112px;
}

.about__title {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: 0;
  font-weight: var(--semi-bold);
  font-size: var(--h2);
  align-self: start;
  color: var(--dark_text);
}

.about__link {
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  flex-direction: row;
  align-self: end;
}

.about__link a {
  display: flex;
  flex-direction: row;
  column-gap: 25px;
  height: 20px;
  cursor: pointer;
  font-weight: var(--semi-bold);
  font-size: var(--text);
  color: var(--dark_text);
  text-decoration: none;
  transition: 0.2s;
}

.about__link-arrow {
  width: 35px;
  height: 2px;
  background-image: url(../img/blue_line.png);
  align-self: center;
  transition: 0.2s;
}

#about__arrow.fix {
  background-image: url(../img/blue_arrow.png);
  width: 60px;
  height: 17px;
  transition: 0.2s;
}

.about__text {
  grid-row: 1/2;
  grid-column: 2/4;
  margin: 0;
  padding: 0 0 0 60px;
  max-width: 484px;
  font-weight: var(--light);
  font-size: var(--text);
  line-height: 30px;
  align-items: center;
  color: var(--light_dark);
}

/* OUR STRENGTHS */

.strengths {
  background-image: repeating-linear-gradient(
    90deg,
    #4154a7 0%,
    #4154a7 25%,
    #4256b1 25%,
    #4256b1 50%,
    #4154a7 50%,
    #4154a7 75%,
    #4256b1 75%,
    #4256b1 100%
  );
}

.strengths__container {
  display: grid;
  grid-template-columns: repeat(4, 480px);
  grid-template-rows: repeat(2, 1fr);
}

.strengths__container-title1 {
  height: 40px;
  grid-column: 1/3;
  grid-row: 1/2;
  font-weight: var(--semi-bold);
  font-size: var(--h3);
  color: var(--white);
  padding: 72px 0 67px 390px;
}

.strengths__container ul {
  width: 700px;
  grid-row: 1/2;
  grid-column: 1/4;
  list-style-type: none;
  padding: 179px 0 0 385px;
}

.strengths__container li {
  background: no-repeat 0 12px url(../img/Line.png);
  background-size: 25px 2px;
  font-weight: var(--semi-bold);
  font-size: var(--text);
  line-height: 25px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.023em;
  padding-left: 50px;
  cursor: pointer;
  transition: 0.2s;
}

.strengths__container li:hover {
  background: no-repeat 0 12px url(../img/Line_hover.png);
  color: var(--link_hover);
  transition: 0.2s;
  font-size: 125%;
}

.strengths__container li:not(:last-child) {
  padding-bottom: 20px;
}

.strengths__container-img {
  grid-column: 1/3;
  grid-row: 2/3;
  padding-top: 42px;
}

.strengths__container-title2 {
  width: 750px;
  height: 130px;
  grid-row: 1/3;
  grid-column: 3/4;
  font-weight: var(--semi-bold);
  font-size: var(--h2);
  line-height: 65px;
  color: var(--white);
  padding: 0 0 100px 140px;
  align-self: center;
  animation: fadeInRight;
  animation-duration: 2s;
}

.strengths__container-text {
  width: 475px;
  height: 120px;
  grid-row: 1/3;
  grid-column: 3/4;
  font-weight: var(--medium);
  font-size: var(--text);
  line-height: 30px;
  color: rgba(255, 255, 255, 0.8);
  padding: 200px 0 0 140px;
  align-self: center;
  animation: fadeInRight;
  animation-duration: 2s;
}

#box1 {
  display: block;
}

#box2,
#box3,
#box4,
#box5,
#box6 {
  display: none;
}

/* WHAT WE DO */

.job {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 25px;
  padding: 146px 0 0 30px;
}

.job__img1 {
  grid-column: 1/2;
  grid-row: 1/4;
  justify-content: end;
  align-items: end;
  justify-items: end;
  justify-self: end;
}

.job__text {
  grid-column: 2/3;
  grid-row: 2/3;
  width: 200px;
  height: 35px;
  font-weight: var(--bold);
  font-size: var(--h4);
  align-items: center;
  color: var(--dark_text);
}

.job__title {
  grid-column: 2/3;
  grid-row: 2/3;
  font-weight: var(--semi-bold);
  font-size: var(--h2);
  line-height: 65px;
  align-items: center;
  letter-spacing: -0.02em;
  color: var(--dark_text);
  padding-top: 45px;
}

/* TRANSPORTATION */

.transportation,
.transportation2 {
  display: flex;
  flex-direction: row;
  padding-top: 125px;
}

.transportation__first,
.transportation__third {
  padding-left: 391px;
  width: 540px;
}

.transportation__second {
  padding-left: 180px;
}

.transportation__fourth {
  padding-left: 180px;
}

.transportation__first-title,
.transportation__second-title,
.transportation__third-title,
.transportation__fourth-title {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.transportation__first-title h2,
.transportation__second-title h2,
.transportation__third-title h2,
.transportation__fourth-title h2 {
  font-weight: var(--bold);
  font-size: var(--h4);
  line-height: 35px;
  letter-spacing: -0.02em;
  color: var(--dark_text);
  margin: 0;
}

.transportation__first-title div,
.transportation__second-title div,
.transportation__third-title div,
.transportation__fourth-title div {
  background: var(--primary_blue);
  width: 35px;
  height: 2px;
  align-self: center;
}

.transportation__first ul,
.transportation__second ul,
.transportation__third ul,
.transportation__fourth ul {
  list-style-type: none;
  font-weight: var(--semi-bold);
  font-size: var(--text);
  line-height: 25px;
  letter-spacing: -0.01em;
  color: var(--dark_text);
  padding: 0;
}

.transportation__first li,
.transportation__second li,
.transportation__third li,
.transportation__fourth li {
  padding-top: 45px;
}

/* IMPORT */
.import {
  height: 550px;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding: 360px 0 0 390px;
  margin-top: 210px;
  background-image: url(../img/import.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.import__title {
  font-size: var(--h2);
  font-weight: var(--semi-bold);
  color: var(--white);
  line-height: 75px;
  text-align: left;
}
.import__text {
  width: 510px;
  font-size: var(--text);
  font-weight: var(--medium);
  color: var(--white);
  line-height: 30px;
  text-align: left;
}

.import__link a {
  display: flex;
  flex-direction: row;
  column-gap: 25px;
  height: 20px;
  cursor: pointer;
  font-weight: var(--semi-bold);
  font-size: var(--text);
  color: var(--white);
  text-decoration: none;
  transition: 0.2s;
  padding-top: 20px;
}

.import__link-arrow {
  width: 35px;
  height: 2px;
  background-image: url(../img/Line.png);
  align-self: center;
  transition: 0.2s;
}

#import__arrow.fix {
  background-image: url(../img/white_arrow.png);
  width: 60px;
  height: 17px;
  transition: 0.2s;
}

/* EXPORT */
.export {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  margin: 235px 0 0 0;
}

.export__img1,
.export__img2,
.export__img3,
.export__img4 {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.export__img1 {
  grid-column: 2/3;
  grid-row: 1/2;
  justify-self: end;
}

.export__img2 {
  grid-column: 3/5;
  grid-row: 1/3;
  justify-self: center;
}

.export__img3 {
  grid-column: 1/3;
  grid-row: 2/4;
  justify-self: center;
}
.export__img4 {
  grid-column: 3/4;
  grid-row: 3/5;
  justify-self: start;
}

.export__img1 p,
.export__img2 p,
.export__img3 p,
.export__img4 p {
  font-weight: var(--semi-bold);
  font-size: var(--h3);
  line-height: 40px;
  color: var(--light_dark);
  padding-top: 20px;
}

/* CAREER */

.career {
  height: 800px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  margin-top: 262px;
  background-image: url(../img/career.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.career__title {
  grid-column: 2/3;
  grid-row: 2/3;
  font-weight: var(--semi-bold);
  font-size: var(--h2);
  line-height: 65px;
  letter-spacing: -0.02em;
  color: var(--white);
}

.career__text {
  grid-column: 3/4;
  grid-row: 2/3;
  width: 510px;
  font-weight: var(--medium);
  font-size: var(--text);
  color: var(--white);
  line-height: 30px;
  letter-spacing: -0.01em;
}

/* PARTNERS  */

.partners {
  display: flex;
  flex-direction: column;
  padding: 200px 0 200px 200px;
}

.partners__container {
  display: flex;
  flex-direction: column;
}

.partners__container-title {
  font-weight: var(--semi-bold);
  font-size: var(--h2);
  line-height: 65px;
  letter-spacing: -0.02em;
  color: var(--dark_text);
}

.partners__container-text {
  width: 509px;
  font-weight: var(--medium);
  font-size: var(--text);
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--light_dark);
  padding-top: 34px;
}

.partners__container-img {
  display: grid;
  grid-template-columns: repeat(5, 265px);
  grid-template-rows: 1fr 1fr;
  margin-top: 125px;
}

/* THANKS */

.thanks {
  height: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(../img/thanks.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.thanks__title {
  width: 500px;
  font-weight: var(--semi-bold);
  font-size: var(--link);
  line-height: 35px;
  letter-spacing: -0.02em;
  color: var(--white);
  /* text-align: justify; */
}

.thanks__slider {
  height: 6px;
  width: 440px;
  background: var(--white);
  margin: 50px 100px 0 0;
}

.thanks__slider .thanks__slider-progress {
  height: 100%;
  width: 100px;
  background: var(--primary_blue);
  animation: move 36s ease-in-out infinite;
}

@keyframes move {
  from {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  to {
    width: 100%;
  }
}

/* FOOTER */

.footer {
  display: flex;
  flex-direction: row;
  gap: 135px;
  height: 500px;
  background-image: url(../img/footer_img.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 78px 399px 0 390px;
  justify-content: center;
}

.footer__logo {
  width: 190px;
  height: 30px;
}

.footer__1,
.footer__2,
.footer__3,
.footer__4 {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.footer__1-text {
  font-weight: var(--regular);
  font-size: var(--text);
  line-height: 25px;
  color: #ffffff;
  padding-top: 44px;
}

.footer__1 a {
  text-decoration: none;
}

.footer_big {
  font-weight: var(--extra-bold);
  font-size: var(--link);
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  margin: 0;
  padding: 0;
  transition: 0.2s;
}

.footer_small {
  font-weight: var(--medium);
  font-size: var(--text);
  color: var(--white);
  margin-top: 50px;
  text-decoration: none;
  transition: 0.2s;
}

.footer_big:hover,
.footer_small:hover,
.footer__1-text:hover {
  color: var(--link_hover);
  transition: 0.2s;
}

.footer__1-last {
  font-weight: var(--medium);
  font-size: var(--text);
  color: rgba(255, 255, 255, 0.8);
  padding-top: 160px;
}

.footer__3-socials {
  display: flex;
  flex-direction: row;
  padding-top: 250px;
  column-gap: 20px;
}

.footer__3-socials a:hover {
  filter: brightness(150%);
  transition: 0.2s;
}

.footer__3-socials a {
  padding: 0;
  margin: 0;
  transition: 0.2s;
}

.footer__mobile,
.footer__mobile-socials {
  display: none;
}

.RC {
  font-weight: var(--medium);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 20px;
  text-decoration: none;
}

.RC__mobile {
  display: none;
  font-weight: var(--medium);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 20px;
  text-decoration: none;
}