/************************************
*              HEADER               *
************************************/
.header {
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: center center;
  padding: 15vh 0;
  padding-bottom: 25vh;
  background-image: url('../assets/img/WORLD.jpg');
}
.header::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  content: '';
}
.header__head {
  position: relative;
  z-index: 100;
  color: #fff;
  width: 70vw;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 15vh;
}
.header__title {
  font-size: 1.6em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 300;
  margin-bottom: 3vh;
}
/****************************/
.header__subtitle {
  font-size: 1.6em;
  font-weight: 500;
}
.header__affiliates {
  width: 100%;
  height: 45vh;
  position: relative;
  z-index: 100;
}
/*****************************/
.header__circle {
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transform: translateY(-50%);
  perspective: 100em;
}
.header__circle:hover .header__content {
  transform: rotateY(0.5turn);
}
.header__circle:hover .header__circle__border {
  transform: translate3d(-50%, -50%, 0) rotateY(0.5turn);
}
.header__circle__front,
.header__circle__back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  justify-content: center;
  backface-visibility: hidden;
}
.header__circle__back {
  transform: rotateY(0.5turn);
}
.header__circle__border {
  box-sizing: border-box;
  width: 97%;
  height: 97%;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotateY(0);
  z-index: 20;
  transition: 2000ms;
}
.header__circle__border--main {
  border: 3px solid white;
  animation: mainBorder 4500ms;
  animation-delay: 600ms;
}
.header__circle__border--white {
  border: 3px solid white;
  animation: whiteBorder 4500ms;
  animation-delay: 600ms;
}
.header__circle__border--orange {
  border: 3px solid #d29723;
  animation: orangeBorder 4500ms;
  animation-delay: 600ms;
}
.header__circle--main {
  width: 25vw;
  height: 25vw;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.header__circle--orange {
  width: 13vw;
  height: 13vw;
  top: 50%;
}
.header__circle--orange--left {
  left: 12vw;
}
.header__circle--orange--right {
  right: 12vw;
}
.header__circle--white {
  width: 10vw;
  height: 10vw;
}
.header__circle--white--left {
  top: 100%;
  left: 20vw;
}
.header__circle--white--right {
  top: 0;
  right: 20vw;
}
.header__line {
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  position: absolute;
}
.header__line--orange {
  border-bottom-color: #d29723;
  top: 50%;
  animation: orangeLine 4500ms forwards;
  animation-delay: 600ms;
  width: 0;
}
.header__line--orange--left {
  left: 25vw;
}
.header__line--orange--right {
  right: 25vw;
}
.header__line--white {
  border-bottom-color: #fff;
  width: 0;
  transform: rotate(-29deg);
  animation: whiteLine 4500ms forwards;
  animation-delay: 600ms;
}

.header__line--white--left {
  left: 29vw;
  top: 85%;
}

.header__line--white--right {
  right: 29vw;
  top: 15%;
}

.header__content {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 2em;
  position: relative;
  transition: transform 2000ms;
  transform-style: preserve-3d;
  transform: rotateY(0);
}
.header__content--main {
  border: 1px solid #d29723;
  border-radius: 100%;
  animation: mainCircle 4500ms;
  animation-delay: 600ms;
}
.header__content--orange {
  border: 1px solid #d29723;
  border-radius: 100%;
  animation: orangeCircle 4500ms;
  animation-delay: 600ms;
}
.header__content--white {
  border: 1px solid #fff;
  border-radius: 100%;
  animation: whiteCircle 4500ms;
  animation-delay: 600ms;
}
.header__brand {
  width: 80%;
  backface-visibility: hidden;
  transform: translateZ(9em);
}
.header__country {
  text-transform: uppercase;
  font-size: 1.4em;
  backface-visibility: hidden;
  transform: translateZ(3em);
}
.header__parenthesis {
  backface-visibility: hidden;
  transform: translateZ(2em);
}
.header__parenthesis--uppercase {
  text-transform: uppercase;
}
.header small {
  font-size: 1.2em;
  backface-visibility: hidden;
  transform: translateZ(1em);
}

@keyframes mainCircle {
  from {
    transform: rotateY(0);
    animation-timing-function: ease-out;
  }
  33% {
    transform: rotateY(-0.5turn);
    animation-timing-function: ease-out;
  }
  66% {
    transform: rotateY(-1turn);
    animation-timing-function: ease-out;
  }
  to {
    transform: rotateY(-1.5turn);
    animation-timing-function: ease-out;
  }
}

@keyframes mainBorder {
  from {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
    animation-timing-function: ease-out;
  }
  33% {
    transform: translate3d(-50%, -50%, 0) rotateY(-0.5turn);
    animation-timing-function: ease-out;
  }
  66% {
    transform: translate3d(-50%, -50%, 0) rotateY(-1turn);
    animation-timing-function: ease-out;
  }
  to {
    transform: translate3d(-50%, -50%, 0) rotateY(-1.5turn);
    animation-timing-function: ease-out;
  }
}

@keyframes orangeCircle {
  from {
    transform: rotateY(0);
    animation-timing-function: ease-out;
  }
  33% {
    transform: rotateY(0);
    animation-timing-function: ease-out;
  }
  66% {
    transform: rotateY(-0.5turn);
    animation-timing-function: ease-out;
  }
  to {
    transform: rotateY(-1turn);
    animation-timing-function: ease-out;
  }
}

@keyframes orangeBorder {
  from {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
    animation-timing-function: ease-out;
  }
  33% {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
    animation-timing-function: ease-out;
  }
  66% {
    transform: translate3d(-50%, -50%, 0) rotateY(-0.5turn);
    animation-timing-function: ease-out;
  }
  to {
    transform: translate3d(-50%, -50%, 0) rotateY(-1turn);
    animation-timing-function: ease-out;
  }
}

@keyframes whiteCircle {
  from {
    transform: rotateY(0);
    animation-timing-function: ease-out;
  }
  33% {
    transform: rotateY(0);
    animation-timing-function: ease-out;
  }
  66% {
    transform: rotateY(0);
    animation-timing-function: ease-out;
  }
  to {
    transform: rotateY(-0.5turn);
    animation-timing-function: ease-out;
  }
}

@keyframes whiteBorder {
  from {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
    animation-timing-function: ease-out;
  }
  33% {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
    animation-timing-function: ease-out;
  }
  66% {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
    animation-timing-function: ease-out;
  }
  to {
    transform: translate3d(-50%, -50%, 0) rotateY(-0.5turn);
    animation-timing-function: ease-out;
  }
}

@keyframes orangeLine {
  from {
    width: 0;
  }
  33% {
    width: 5.5vw;
  }
  to {
    width: 5.5vw;
  }
}

@keyframes whiteLine {
  from {
    width: 0;
  }
  33% {
    width: 0;
  }
  66% {
    width: 3.5vw;
  }
  to {
    width: 3.5vw;
  }
}

/************************************
*          IMPLANTATIONS            *
************************************/
.implantations {
  width: 100%;
  background-color: #fff;
  padding: 10vh 0;
}
.implantations__head {
  width: 60vw;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10vh;
}
.implantations__title {
  font-size: 2.6em;
  font-weight: 500;
  margin-bottom: 3vh;
}
.implantations__subtitle {
  font-size: 1.2em;
  font-weight: 500;
}
.implantations__main {
  width: 60vw;
  height: 65vh;
  margin: 0 auto;
  position: relative;
}
.implantations__map {
  width: 158%;
  height: 158%;
  background: url('../assets/svg/KAINA COM_MAP WORLD.svg');
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -29%;
  left: -29%;
}
.implantations__content {
  position: absolute;
  width: 1.875vw;
  height: 1.875vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.implantations__content--france {
  left: 27.5vw;
  top: 19.5vh;
}
.implantations__content--ivory-coast {
  left: 26vw;
  top: 38vh;
}
.implantations__content--brazil {
  left: 18.5vw;
  top: 53vh;
}
.implantations__content--senegal {
  left: 24.5vw;
  top: 35.5vh;
}
.implantations__content--dubai {
  left: 36.5vw;
  top: 30vh;
}
.implantations__dot {
  width: 50%;
  height: 50%;
  border-radius: 100%;
  position: relative;
  background-color: #d29723;
  transition: 500ms;
}
.implantations__dot:hover {
  width: 100%;
  height: 100%;
}
.implantations__dot::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: pulse 800ms infinite;
  background-color: rgba(210, 151, 35, 0.5);
  border-radius: 100%;
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.7);
  }
}
.implantations__card {
  width: 20vw;
  height: max-content;
  background-color: #fff;
  position: absolute;
  left: 3vw;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: 300ms;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.implantations__card--show {
  opacity: 1;
  visibility: visible;
}
.implantations__card__body {
  width: 100%;
  height: max-content;
  padding-top: 2.5vh;
  padding-bottom: 1.5vh;
  padding-left: 1.5vw;
  position: relative;
}

.implantations__card__close {
  position: absolute;
  right: 5%;
  top: 5%;
  color: #111;
  font-size: 2em;
  font-weight: 500;
  display: none;
}
.implantations__card__country {
  display: flex;
  align-items: center;
  margin-bottom: 1.5vh;
}
.implantations__card__country img {
  width: 2vw;
  height: auto;
  margin-right: 1vw;
}
.implantations__card__country p {
  font-size: 1.8em;
  font-weight: 500;
}
.implantations__card__agency {
  font-size: 1.3em;
  font-weight: 500;
}
.implantations__card__icon {
  width: 1vw;
  height: auto;
  margin-right: 0.5vw;
}
.implantations__card__city {
  text-transform: uppercase;
  color: #d29723;
  font-size: 1.2em;
  font-weight: 300;
  margin-bottom: 1vh;
}
.implantations__card__phone {
  font-size: 1.2em;
  margin-bottom: 1.5vh;
  display: flex;
  align-items: center;
}
.implantations__card__phone a {
  text-decoration: none;
  color: #111;
  font-weight: 700;
}
.implantations__card__location {
  display: flex;
  align-items: center;
  font-size: 1em;
}
.implantations__card__cover {
  width: 100%;
  height: 15vh;
  background-color: #d29723;
  background-image: url('../assets/img/176.jpg');
  background-position: center center;
  background-size: cover;
}

@media only screen and (max-width: 1024px) {
  .header__affiliates {
    height: 50vh;
  }
  .header__circle:hover .header__content {
    transform: rotateY(0);
  }
  .header__circle:hover .header__circle__border {
    transform: translate3d(-50%, -50%, 0) rotateY(0);
  }
  .header__circle__back {
    display: none;
  }
  .header__circle__border {
    transition: none;
  }
  .header__circle__border--main,
  .header__circle__border--white,
  .header__circle__border--orange {
    animation: none;
  }
  .header__circle--main {
    width: 30vw;
    height: 30vw;
  }
  .header__circle--orange {
    width: 18vw;
    height: 18vw;
  }
  .header__circle--orange--left {
    left: 12vw;
  }
  .header__circle--orange--right {
    right: 12vw;
  }
  .header__circle--white {
    width: 15vw;
    height: 15vw;
  }
  .header__circle--white--left {
    top: 100%;
    left: 20vw;
  }
  .header__circle--white--right {
    top: 0;
    right: 20vw;
  }
  .header__line--orange,
  .header__line--white {
    animation: none;
  }
  .header__line--orange {
    width: 5vw;
  }
  .header__line--orange--left {
    left: 30vw;
  }
  .header__line--orange--right {
    right: 30vw;
  }
  .header__line--white {
    width: 6vw;
  }
  .header__line--white--left {
    left: 34vw;
  }
  .header__line--white--right {
    right: 34vw;
  }
  .header__content {
    transition: none;
  }
  .header__content--main,
  .header__content--orange,
  .header__content--white {
    animation: none;
  }
  .implantations__head {
    width: 70vw;
  }
  .implantations__content {
    width: 2.5vw;
    height: 2.5vw;
  }
  .implantations__content--france {
    left: 27vw;
    top: 20vh;
  }
  .implantations__content--ivory-coast {
    left: 24.5vw;
    top: 37.5vh;
  }
  .implantations__content--senegal {
    left: 22.5vw;
    top: 35.5vh;
  }
  .implantations__content--brazil {
    left: 15vw;
    top: 49.5vh;
  }
  .implantations__content--dubai {
    left: 38.5vw;
    top: 31vh;
  }
  .implantations__dot:hover {
    width: 50%;
    height: 50%;
  }
  .implantations__card {
    width: 25vw;
  }
  .implantations__card__close {
    display: inline-block;
  }
}

@media only screen and (max-width: 768px) {
  .header__head {
    width: 80vw;
    margin-bottom: 15vh;
  }
  .header__affiliates {
    height: 40vh;
    font-size: 0.9em;
  }
  .header__circle--main {
    width: 40vw;
    height: 40vw;
  }
  .header__circle--orange {
    width: 24vw;
    height: 24vw;
  }
  .header__circle--orange--left {
    top: 0;
    left: 10vw;
  }
  .header__circle--orange--right {
    top: 100%;
    right: 10vw;
  }
  .header__circle--white {
    width: 20vw;
    height: 20vw;
  }
  .header__circle--white--left {
    top: 90%;
    left: 13vw;
  }
  .header__circle--white--right {
    top: 10%;
    right: 13vw;
  }
  .header__line--orange {
    width: 7vw;
    transform: rotate(29deg);
  }
  .header__line--orange--left {
    top: 20%;
    left: 28vw;
  }
  .header__line--orange--right {
    top: 80%;
    right: 28vw;
  }
  .header__line--white {
    width: 5vw;
  }
  .header__line--white--left {
    left: 31vw;
    top: 80%;
  }
  .header__line--white--right {
    right: 31vw;
    top: 20%;
  }
  .implantations__head {
    width: 80vw;
  }
  .implantations__main {
    width: 70vw;
    height: 40vh;
  }
  .implantations__content {
    width: 2.875vh;
    height: 2.875vh;
  }
  .implantations__content--france {
    left: 31vw;
    top: 13vh;
  }
  .implantations__content--ivory-coast {
    left: 28vw;
    top: 22.2vh;
  }
  .implantations__content--brazil {
    left: 16.28vw;
    top: 26vh;
  }
  .implantations__content--dubai {
    left: 40vw;
    top: 17vh;
  }
  .implantations__card {
    width: 40vw;
    left: 5vw;
  }
  .implantations__card__icon {
    width: 2vw;
    margin-right: 1vw;
  }
  .implantations__card__country {
    margin-bottom: 1.1vh;
  }
  .implantations__card__country img {
    width: 2.8vh;
    margin-right: 1vw;
  }
  .implantations__card__city {
    font-size: 1.13em;
    margin-bottom: 1vh;
  }
  .implantations__card__phone {
    margin-bottom: 1vh;
  }
}

@media only screen and (max-width: 768px) {
  .header__circle--main {
    width: 43vw;
    height: 43vw;
  }
  .header__circle--orange {
    width: 26vw;
    height: 26vw;
  }
  .header__circle--orange--left {
    top: 0;
    left: 10vw;
  }
  .header__circle--orange--right {
    top: 100%;
    right: 10vw;
  }
  .header__circle--white {
    width: 22vw;
    height: 22vw;
  }
  .header__circle--white--left {
    left: 10vw;
  }
  .header__circle--white--right {
    right: 10vw;
  }
  .header__line--orange,
  .header__line--white {
    display: none;
  }
  .implantations__main {
    width: 60vw;
    height: 35vh;
  }
  .implantations__content--france {
    left: 26vw;
    top: 11vh;
  }
  .implantations__content--ivory-coast {
    left: 24vw;
    top: 20vh;
  }
  .implantations__content--senegal {
    left: 21vw;
    top: 18vh;
  }
  .implantations__content--brazil {
    left: 12vw;
    top: 27vh;
  }
  .implantations__content--dubai {
    left: 35.5vw;
    top: 15.5vh;
  }
  .implantations__card {
    width: 60vw;
    left: -20vw;
  }
  .implantations__card__icon {
    width: 4vw;
    margin-right: 2vw;
  }
}