@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
}

body,
html {
  font-family: 'Work Sans', sans-serif !important;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.5;
  color: #111;
}

::-webkit-scrollbar {
  width: 6px !important;
}

::-webkit-scrollbar-track {
  background: white !important;
}

::-webkit-scrollbar-thumb {
  background: #d69b2a !important;
}

/************************************
*              BRAND                *
************************************/
.brand {
  position: absolute;
  top: 2.6vh;
  left: 5vw;
  width: 15vw;
  z-index: 1000;
}

/************************************
*              HEADER               *
************************************/
.header {
  max-width: 100vw;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: center center;
  font-size: 1rem;
  z-index: 10;
  padding: 15vh 0;
  background-image: url('../assets/img/WORLD.jpg');
}

.header::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.75);
  content: '';
}

.header__head {
  position: relative;
  z-index: 150;
  color: #fff;
  width: 70vw;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 15vh;
}

.header__title {
  font-size: 3.3em;
  font-weight: 500;
  margin-bottom: 5vh;
  animation: fade 1500ms forwards;
  animation-delay: 200ms;
  opacity: 0;
}

.header__subtitle {
  font-size: 1.6em;
  font-weight: 500;
  margin-bottom: 5vh;
  animation: fade 1500ms forwards;
  animation-delay: 400ms;
  opacity: 0;
}

.header__nav {
  font-size: 1.2em;
  font-weight: 300;
  animation: fade 1500ms forwards;
  animation-delay: 600ms;
  opacity: 0;
}

.header__nav a {
  color: #fff;
  text-decoration: none;
}

.header__nav a:not(:last-child) {
  margin-right: 0.5em;
}

.header__nav a:hover {
  color: #d29723;
}

.header__nav span {
  margin-right: 0.5em;
}

@keyframes fade {
  from {
    transform: translateY(150%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.header__affiliates {
  width: 100%;
  height: 42.2vh;
  position: relative;
  z-index: 150;
}

.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 {
  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 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  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: 23.7vw;
  height: 23.7vw;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.header__circle--orange {
  width: 12.24vw;
  height: 12.24vw;
  top: 50%;
}

.header__circle--orange--left {
  left: 19.5vw;
}

.header__circle--orange--right {
  right: 19.5vw;
}

.header__circle--white {
  width: 8.49vw;
  height: 8.49vw;
}

.header__circle--white--left {
  top: 100%;
  left: 28.64vw;
}

.header__circle--white--right {
  top: 0;
  right: 28.64vw;
}

.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: 31.77vw;
}

.header__line--orange--right {
  right: 31.77vw;
}

.header__line--white {
  border-bottom-color: #fff;
  width: 0;
  transform: rotate(-29deg);
  animation: whiteLine 4500ms forwards;
  animation-delay: 600ms;
}

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

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

.header__content {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  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(2.5em);
}

.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(2em);
}

@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: 6.4vw;
  }
  to {
    width: 6.4vw;
  }
}

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

/************************************
*          IMPLANTATIONS            *
************************************/
.implantations {
  font-size: 1rem;
  max-width: 100vw;
  width: 100vw;
  height: 118.8vh;
  background-color: #fff;
  padding-top: 12.31vh;
}

.implantations__head {
  color: #111;
  width: 50vw;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 12.2vh;
}

.implantations__title {
  font-size: 3.3em;
  font-weight: 500;
  margin-bottom: 3.7vh;
}

.implantations__subtitle {
  font-size: 1.2em;
  font-weight: 500;
  margin-bottom: 2.5vh;
}

.implantations__main {
  width: 60.62vw;
  height: 63.8vh;
  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.76vw;
  top: 19.88vh;
}

.implantations__content--ivory-coast {
  left: 26.2vw;
  top: 37.2vh;
}

.implantations__content--senegal {
  left: 24.7vw;
  top: 35vh;
}

.implantations__content--brazil {
  left: 18.7vw;
  top: 51.5vh;
}

.implantations__content--dubai {
  left: 35.83vw;
  top: 28.76vh;
}

.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: 18.75vw;
  height: 18.75vw;
  background-color: #fff;
  position: absolute;
  left: 2.875vw;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: 500ms ease;
  transition-delay: 200ms;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.implantations__card--shift {
  left: 23vw;
  transition-delay: 500ms;
}

.implantations__card--show {
  opacity: 1;
  visibility: visible;
}

.implantations__card__body {
  width: 100%;
  height: auto;
  min-height: 60%;
  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.63vh;
}

.implantations__card__country img {
  width: 2.28vw;
  margin-right: 0.7625vw;
}

.implantations__card__country span {
  font-size: 2em;
  font-weight: 500;
}

.implantations__card__agency {
  font-size: 1.33em;
  font-weight: 700;
}

.implantations__card__city {
  text-transform: uppercase;
  color: #d29723;
  font-size: 1.23em;
  font-weight: 400;
  margin-bottom: 1vh;
}

.implantations__card__phone {
  font-size: 1.2em;
  margin-bottom: 1.56vh;
}

.implantations__card__phone a {
  text-decoration: none;
  margin-left: 0.82vw;
  color: #111;
  font-weight: 700;
}

.implantations__card__location {
  display: flex;
  align-items: center;
}

.implantations__card__location i {
  font-size: 1.5em;
}

.implantations__card__location span {
  margin-left: 0.82vw;
  font-size: 1em;
  display: block;
}

.implantations__card__cover {
  width: 100%;
  height: 40%;
  background-color: #d29723;
  background-image: url('../assets/img/176.jpg');
  background-position: center center;
  background-size: cover;
}

/************************************
*             FOOTER                *
************************************/
.footer {
  font-size: 1rem;
  max-width: 100vw;
  width: 100vw;
  height: 56vh;
  position: relative;
  padding-top: 18.12vh;
  overflow: hidden;
}

.footer:hover .footer__cover {
  transform: scale(1.1);
}

.footer::after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  background-color: rgba(210, 151, 35, 0.9);
  content: '';
}

.footer__cover {
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url('../assets/img/3016411.jpg');
  background-position: 10% center;
  background-size: cover;
  transition: 600ms;
}

.footer__content {
  position: relative;
  z-index: 100;
  color: #fff;
  text-align: center;
}

.footer__title {
  font-size: 1.8em;
  font-weight: 300;
  width: 50vw;
  margin: 0 auto;
  margin-bottom: 4.63vh;
}

.footer__button {
  font-size: 1.5em;
  background-color: #fff;
  color: #d29723;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5vh 3vw;
  border-radius: 2em;
  text-decoration: none;
  display: inline-block;
}

.footer__button img {
  width: 1vw;
  height: auto;
  margin-left: 2vw;
  transition: 800ms ease;
}

.footer__button:hover img {
  margin-left: 3vw;
}

@media only screen and (max-width: 1366px) {
  .header {
    font-size: 0.71rem;
  }
  .implantations {
    font-size: 0.71rem;
  }
  .footer {
    font-size: 0.71rem;
  }
}

@media only screen and (max-width: 1280px) {
  .header {
    font-size: 0.66rem;
  }
  .implantations {
    font-size: 0.66rem;
  }
  .footer {
    font-size: 0.66rem;
  }
}

@media only screen and (max-width: 1024px) {
  .header {
    font-size: 0.53rem;
  }
  .header__head {
    margin-bottom: 5vh;
  }
  .header__title,
  .header__subtitle,
  .header__nav {
    animation: none;
    opacity: 1;
  }
  .header__circle__border--main,
  .header__circle__border--white,
  .header__circle__border--orange,
  .header__line--orange,
  .header__line--white,
  .header__content--main,
  .header__content--orange,
  .header__content--white {
    animation: none;
  }
  .header__circle__back {
    display: none;
  }
  .header__line--orange {
    width: 6.4vw;
  }
  .header__line--white {
    width: 5vw;
  }

  .implantations {
    font-size: 0.53rem;
  }
  .implantations__subtitle {
    font-size: 1.3em;
  }
  .implantations__dot:hover {
    width: 50%;
    height: 50%;
  }
  .implantations__card__close {
    display: inline-block;
  }
  .implantations__content--brazil {
    left: 16.5vw;
    top: 51.5vh;
  }

  .footer {
    font-size: 0.53rem;
  }
  .footer__title {
    font-size: 2em;
    width: 60vw;
  }
  .footer__button img {
    width: 2vw;
  }
  .footer__button:hover img {
    margin-left: 2vw;
  }
}

@media only screen and (max-width: 768px) {
  .brand {
    top: 2.6vh;
    left: 10vw;
    width: 20vw;
  }

  .header {
    font-size: 1rem;
  }
  .header__head {
    width: 70vw;
    margin-bottom: 10vh;
  }
  .header__title {
    margin-bottom: 5vh;
  }
  .header__affiliates {
    height: 40vh;
    font-size: 0.9em;
  }
  .header__circle:hover .header__content {
    transform: rotateY(0.5turn);
  }
  .header__circle--main {
    width: 32vh;
    height: 32vh;
  }
  .header__circle--orange {
    width: 16vh;
    height: 16vh;
  }
  .header__circle--orange--left {
    top: 0;
    left: 10vw;
  }
  .header__circle--orange--right {
    top: 100%;
    right: 10vw;
  }
  .header__circle--white {
    width: 11.2vh;
    height: 11.2vh;
  }
  .header__circle--white--left {
    top: 90%;
    left: 15vw;
  }
  .header__circle--white--right {
    top: 10%;
    right: 15vw;
  }
  .header__line--orange {
    transform: rotate(29deg);
    width: 8vw;
  }
  .header__line--orange--left {
    top: 20%;
    left: 26vw;
  }
  .header__line--orange--right {
    top: 80%;
    right: 26vw;
  }
  .header__line--white {
    width: 5vw;
  }
  .header__line--white--left {
    left: 29.4vw;
    top: 80%;
  }
  .header__line--white--right {
    right: 29.4vw;
    top: 20%;
  }
  .header__parenthesis {
    text-align: center;
  }
  .implantations {
    font-size: 1rem;
    height: 100vh;
  }
  .implantations__head {
    width: 70vw;
    margin-bottom: 12.2vh;
  }
  .implantations__main {
    width: 70vw;
    height: 40vh;
    margin: 0 auto;
    position: relative;
  }
  .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: 32vh;
  }
  .implantations__content--dubai {
    left: 40vw;
    top: 17vh;
  }
  .implantations__content--senegal {
    left: 25vw;
    top: 20vh;
  }
  .implantations__card {
    width: 25vh;
    height: 30vh;
    left: 5vw;
  }
  .implantations__card--shift {
    left: -25vh;
  }
  .implantations__card__body {
    font-size: 0.85rem;
  }
  .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;
  }
  .footer {
    font-size: 1rem;
    padding-top: 15.12vh;
  }
  .footer__title {
    font-size: 1.9em;
    width: 70vw;
  }
}

@media only screen and (max-width: 420px) {
  .header {
    font-size: 0.54rem;
  }
  .header__circle {
    font-size: 1.1em;
  }
  .header__circle--main {
    width: 30vh;
    height: 30vh;
  }
  .header__circle--orange {
    width: 14vh;
    height: 14vh;
  }
  .header__circle--white {
    width: 12vh;
    height: 12vh;
  }
  .header__circle--white--left {
    left: 10vw;
  }
  .header__circle--white--right {
    right: 10vw;
  }
  .header__line--orange--left {
    left: 25vw;
  }
  .header__line--orange--right {
    right: 25vw;
  }
  .implantations {
    font-size: 0.51rem;
    height: 85vh;
  }
  .implantations__main {
    width: 70vw;
    height: 30vh;
    margin: 0 auto;
    position: relative;
  }
  .implantations__content {
    width: 2.875vh;
    height: 2.875vh;
  }
  .implantations__content--france {
    left: 31vw;
    top: 9vh;
  }
  .implantations__content--ivory-coast {
    left: 25vw;
    top: 15vh;
  }
  .implantations__content--senegal {
    left: 28vw;
    top: 17.2vh;
  }
  .implantations__content--brazil {
    left: 16.28vw;
    top: 24vh;
  }
  .implantations__content--dubai {
    left: 40vw;
    top: 12vh;
  }
  .implantations__card {
    left: -5vw;
  }
  .implantations__card--shift {
    top: 20vh;
  }
  .implantations__card__body {
    font-size: 1.2em;
  }
  .footer {
    font-size: 0.51rem;
  }
  .footer__title {
    font-size: 2.3em;
  }
  .footer__button {
    font-size: 1.5em;
    width: 32vw;
  }
}