*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


:root {

  --c-1: #fff;
  --c-2: #F8F6FF;
  --c-3: #160E35;
  --c-4: #f8f6ff1c;
  --c-5: #FF0231;
  --c-6:#ffffff6b;


  --color-brand: #160E35;
  --color-brand-second: #1d1345;

  --green: #35c568;
  --lavender: #F1EDFF;
  --raspberry: #ff3357;


  --bg-1: #222831;
  --bg-2: #393E46;
  --bg-3: #40444a;

  --border-color-1: #40444a;
}

body {background: var(--c-2);color: var(--c-3);}

/* Header */
header {background: var(--c-3);}
header {
    .__top {border-bottom: 1px solid var(--c-4);height: 42px;padding: 8px 0;}
    .__top {
      .container-small {display: grid;align-items: center;grid-template-columns: 1fr auto;}
      .menu {display: flex;gap: 10px;}
      .menu a {font-size: 0.8rem;color: var(--c-2);}
      .lang {font-size: 0.8rem;color: var(--c-4);}
      .lang a {color: var(--c-2);}
      .lang span {color: var(--c-6);}
    }
  
    .__bottom {border-bottom: 1px solid var(--c-4);}
    .__bottom {
      .container-small {display: flex;align-items: center;height: 80px;position: relative;}
      .logo {position: absolute;left: 10px;display: inline-flex;transition: 0.3s;z-index: 1;}
      .logo:hover:active {transform: scale(1.1);}
      .logo svg { width: 100px;fill: var(--c-2);}
  
      .line {position: absolute;left: 130px;width: 2px;height: 20px;background: var(--c-4);}

      .route {position: absolute;left: 150px;}
      .route button {display: flex;background: transparent;align-items: center;border: 2px solid var(--c-4);border-radius: 14px;padding: 7px 17px;gap: 5px;}
      .route button.active {background: var(--c-5);}
      .route div {font-size: .68em;color: var(--c-2);text-transform: uppercase;}
      .route svg {width: 22px;fill: var(--c-2);}

      .social {position: absolute;right: 10px;display: flex;align-items: center;gap: 15px;z-index: 1;}
      .social a {display: inline-flex;}
      .social svg {width: 26px;fill: var(--c-2);}
      .social .text {margin-top: -5px;font-size: 10px;color: var(--c-2);opacity: .6;}
    }
  
    .__routes {position: absolute;left: 0px;right: 0px;z-index: 10;background: var(--c-3);border-bottom: 1px solid var(--c-4);padding: 1.5rem 0;display: none;}
    .__routes {
      li:not(:last-child) {padding-bottom: 10px;}
      a {display: flex;align-items: center;gap: 15px;color: #eee;}
      img {width: 30px;border-radius: 5px;}
    }
}

@media (max-width: 500px) { 
    header {
        .__bottom {
            .logo svg { width: 85px;}
            .route {left: 110px;}
            .line,
            .social .list:nth-child(1) {display: none;}
        }
    }
}

/* Footer */
footer {background: var(--c-3);border-top: 1px solid #e4ddfa;padding: 2rem 0;color: var(--c-2);margin-top: 1rem;}
footer {
  .__top {padding-bottom: 2rem;}
  .__top {
    .social {display: flex;justify-content: space-between;gap: 1rem;}
    .social a {width: 100%;border: 2px solid var(--c-4);display: inline-flex;justify-content: center;gap: 0.5rem;align-items: center;color: var(--c-2);border-radius: 1rem;text-transform: uppercase;font-size: 0.8rem;padding: 0.5rem 2rem;}
    .social svg {width: 1rem;fill: var(--c-2);}
    .text {font-size: 1.2rem;margin-bottom: 0.8rem;}
    .text_2 {font-size: 0.7rem;padding-top: .65rem;}
    }

  .__bottom {display: flex;justify-content: space-between;align-items: center;font-size: .7rem;}
  .__bottom {
    .dev svg {width: 60px;fill:var(--c-2);margin-left: 5px;}
  }
}

@media (max-width: 540px) {
  footer {
    .__top {
      .social {justify-content: unset;flex-direction: column;}
    }
  }
}

/* Intro */
.intro {border-bottom: 1px solid #e4ddfa;margin-bottom: 1rem;background: var(--c-3);}
.intro {
    .container-small {padding: 2rem 0.625rem;}
    .title {font-size: 2rem;font-weight: 600;line-height: 2.3rem;margin-bottom: 1.2rem;color: var(--c-2);}
    .description {color: var(--c-2);}
    .title img {width: 35px;border-radius: 4px;margin-bottom: -1px;margin-right: 5px;}
    .form {margin-top: 1rem;}
    .faq {font-size: 0.7rem;padding-top: .65rem;color: var(--c-2);}
}

/* Intro section */
.intro-page {padding: 1rem 0;}
.intro-page {
    .title {font-size: 1.5rem;}
    .description {font-size: 0.8rem;}
}

/* Direction */
.direction {margin: 1rem 0;}
.direction {
  .container-small {display: grid;grid-template-columns: auto 1fr;gap: 1rem;}
}

@media (max-width: 800px) {
  .direction {
    .container-small {display: grid;grid-template-columns: 1fr;}
  }
}

/* Other Countries */
.other_countries {min-width: 230px;width: 100%;position: relative;}
.other_countries {
  .__select {display: flex;justify-content: space-between;align-items: center;cursor: pointer;margin-bottom: 1rem;}
  .__select span {font-size: 1.2rem;}
  .__select svg {width: 15px; color: var(--c-3)}

  .__select_list li:not(:last-child) {margin-bottom: 1rem;}
  .__select_list a {display: grid;grid-template-columns: auto 1fr;gap: 0.5rem;align-items: center;color: var(--c-3);}
  .__select_list a div {display: flex;justify-content: space-between;gap: 0.5rem;}
  .__select_list a div span:last-child {background: #e5ddff;min-width: 25px;height: 25px;border-radius: 15px;text-align: center;font-size: 14px;line-height: 26px;}
  .__select_list img {width: 25px;border-radius: 3px;}
}

@media (max-width: 800px) {
  .other_countries {
    .__select,  .__select_list {background: #fff;box-shadow: 0px 1px 3px #0000000a;border: 1px solid #eee;border-radius: 20px;padding: 0.7rem 1rem;}
    .__select {margin-bottom: unset;}
    .__select_list {display: none;}
    .__select.active {position: relative;z-index: 3;}
    .__select_list.active {position: absolute;z-index: 2;left: -10px;right: -10px;top: -1rem;padding-top: 5rem;display: block;}
  }
}