:root {
  --color-grey: #f2f2f4;
  --color-blue: #37479d;
  --color-black: #2f3139;
  --color-white: #ffffff;

  --padding-y: 2.5rem;
  --padding-x: 1.5rem;

  @media all and (min-width: 640px) {
    --padding-x: 2rem;
  }

  @media all and (min-width: 900px) {
    --padding-x: 2.5rem;
    --padding-y: 3rem;
  }

  @media all and (min-width: 1024px) {
    --padding-x: 3rem;
  }

  @media all and (min-width: 1120px) {
    --padding-y: 3.5rem;
  }

  @media all and (min-width: 1440px) {
    --padding-y: 4rem;
  }
}

html, body {
  width: 100vw;
  overflow-x: hidden;
}

html {
  font-size: 100%;
  color: var(--color-black);
  font-family: "Sora", sans-serif;
}

* {
  box-sizing: border-box;
}

div, img, .button {
  transition: all 200ms ease-in-out;
}



/***************************
***      TYPOGRAPHY      ***
***************************/

h1 {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.375rem;
  margin-bottom: 1rem;
}

h2 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.875rem;
  margin-bottom: .75rem;
}

h3 {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.125rem;
  margin-bottom: .25rem;
}

p, li {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 1.25rem;
}

p:last-of-type, li:last-of-type {
  margin-bottom: 0;
}

p.big {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media all and (min-width: 768px) {
  h1 {
    font-size: 2.25rem;
    line-height: 2.875rem;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
  }

  h3 {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25rem;
  }

  p, li {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  p.big {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/*@media all and (min-width: 1024px) {
  h1 {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3.125rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1rem;
  }

  p.big {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}*/



/************************
***      BUTTONS      ***
************************/

.button {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;

  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.125rem;
  text-decoration: none;
}

.button--white {
  background: var(--color-white);
  color: var(--color-blue);
}

@media all and (min-width: 768px) {
  .button {
    padding: 1rem 1.25rem;
  }
}



/**************************
***      CONTAINER      ***
**************************/

.container {
  width: 100%;
  overflow: visible;
  position: relative;
}

.container__inner {
  margin: 0 auto;
  max-width: 1120px;
  position: relative;
  padding: var(--padding-y) var(--padding-x);
}



/***********************
***      HEADER      ***
***********************/

.header {
  background: var(--color-blue);
  /* background: linear-gradient(135deg, rgba(55, 71, 157, 1) 0%, rgba(66, 130, 183, 1) 100%); */
  color: var(--color-white);
}

.header__logo {
  width: 100%;
  display: block;
  max-width: 14rem;
  margin-bottom: 2rem;
}

.header__inner {
  padding-right: 29%;
}

.header__decoration {
  width: 35rem;
  position: absolute;
  bottom: -2rem;
  right: 29%;
  transform: translateX(100%);
  z-index: 10;
  pointer-events: none;
}

@media all and (min-width: 640px) {
  .header__decoration {
    width: 50rem;
    right: 30%;
  }
}

@media all and (min-width: 768px) {
  .header__logo {
    max-width: 16rem;
  }
}

@media all and (min-width: 1120px) {
  .header__inner {
    padding-right: 22rem;
  }

  .header__logo {
    max-width: 18rem;
  }

  .header__decoration {
    right: 22rem;
  }
}



/*************************
***      OFFERING      ***
*************************/

.offering {
  background: var(--color-grey);
}

.offering__grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
}

.offering__decoration {
  display: none;
  pointer-events: none;
}

.offer {
  display: flex;
  flex-flow: row wrap;
  padding: 1.25rem;
  border-radius: 6px;
  background: var(--color-white);
  box-shadow: rgba(0, 0, 0, 0.05) 0 3px 8px;
  transition: all 200ms ease-in-out;
}

.offer__icon {
  flex: 3.5rem 0 0;
  margin-bottom: 1.25rem;
}

@media all and (min-width: 640px) {
  .offer {
    flex-flow: row nowrap;
  }

  .offer__icon {
    margin-bottom: 0;
    margin-right: 1.25rem;
  }
}

@media all and (min-width: 900px) {
  .offering__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer {
    padding: 1.5rem;
    flex-flow: row wrap;
  }

  .offer:hover {
    transform: scale(1.02);
    box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px;
  }

  .offer__icon {
    flex: 4rem 0 0;
    margin-right: 0;
    margin-bottom: 1.25rem;
  }
}

@media all and (min-width: 1120px) {
  .offering__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}



/**********************
***      ABOUT      ***
**********************/

.about {
  background: var(--color-white);
}

.about__competences {
  background: var(--color-grey);
}

.about > .about__inner {
  padding-right: 20%;
}

.about__title {
  padding-right: 2rem;
  overflow-wrap: break-word;
}

.about__title br {
  display: none;
}

.about__grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
}

.about__decoration {
  width: 28rem;
  position: absolute;
  top: -7rem;
  right: 29%;
  transform: translateX(100%) rotate(6deg);
  pointer-events: none;
  z-index: 10;
}

.competence {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.competence::before {
  content: '';
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  display: block;
  border-radius: 100%;
  font-size: 1.5rem;
  margin-right: 1rem;
  background: var(--color-blue);
  transform: translateY(.5rem);
}

@media all and (min-width: 480px) {
  .about__title span {
    display: none;
  }
}

@media all and (min-width: 640px) {
  .about__title {
    padding-right: 0;
  }

  .about > .about__inner {
    padding-right: 24%;
  }
}

@media all and (min-width: 768px) {
  .about > .about__inner {
    padding-right: 27%;
  }

  .about__decoration {
    width: 32rem;
    top: -8rem;
  }
}

@media all and (min-width: 900px) {
  .about__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__decoration {
    width: 38rem;
    top: -22rem;
    right: 35%;
  }
}

@media all and (min-width: 1024px) {
  .about > .about__inner {
    padding-right: 30%;
  }

  .about__title br {
    display: initial;
  }

  .about__decoration {
    top: -20rem;
  }
}

@media all and (min-width: 1120px) {
  .about > .about__inner {
    padding-right: 18rem;
  }

  .about__decoration {
    width: 40rem;
    right: 22rem;
    top: -18rem;
  }
}



/***********************
***      FOOTER      ***
***********************/

.footer {
  background: var(--color-blue);
  /* background: linear-gradient(135deg, rgba(55, 71, 157, 1) 0%, rgba(66, 130, 183, 1) 100%); */
  color: var(--color-white);
}

.footer__inner {
  padding-left: 31%;
  padding-bottom: 0;
}

.footer__decoration {
  width: 18rem;
  position: absolute;
  top: 1rem;
  left: 27%;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 10;
}

.footer__tree {
  margin-top: 2.5rem;
  border-left: .25rem solid var(--color-white);
  padding-bottom: var(--padding-y);
}

.footer__branch {
  padding-left: 2.5rem;
  position: relative;
  transform: translateY(-8px);
}

.footer__branch a {
  color: var(--color-white);
  text-decoration: none;
}

.footer__branch::before {
  content: '';
  width: 1rem;
  height: .25rem;
  display: block;
  background: var(--color-white);
  transform: translateY(-50%);

  position: absolute;
  top: 50%;
  left: 0;
}

.footer__branch::after {
  content: '';
  width: .375rem;
  height: .375rem;
  display: block;
  border-radius: 100%;
  border: .25rem solid var(--color-white);
  transform: translateY(-50%);

  position: absolute;
  top: 50%;
  left: 1rem;
}

@media all and (min-width: 640px) {
  .footer {
    overflow: hidden;
  }

  .footer__tree {
    margin-top: -1rem;
    margin-left: 11rem;
    float: left;
  }

  .footer__decoration {
    width: 22rem;
    top: 2rem;
    left: 26%;
  }
}

@media all and (min-width: 768px) {
  .footer__branch {
    transform: translateY(-10px);
  }
}

@media all and (min-width: 900px) {
  .footer__inner {
    display: flex;
    padding-left: 26%;
    flex-flow: row nowrap;
    padding-bottom: var(--padding-y);
  }

  .footer__content {
    margin-right: 2rem;
  }

  .footer__tree {
    float: none;
    margin: 3rem 0 0 0;
    flex: 0 0 16rem;
    transform: translateY(var(--padding-y));
  }

  .footer__decoration {
    left: 20%;
    top: 3rem;
  }
}

@media all and (min-width: 1024px) {
  .footer__tree {
    margin-top: 1rem;
  }
}

@media all and (min-width: 1120px) {
  .footer__inner {
    padding-left: 19rem;
  }

  .footer__tree {
    margin-top: .75rem;
  }

  .footer__decoration {
    left: 15rem;
    top: 2.5rem;
  }
}

@media all and (min-width: 1440px) {
  .footer__tree {
    margin-top: 0;
  }
}