/* root */

:root {

  --font-sans-serif: 'Work Sans', sans-serif;

  --color-green: #28b87a;
  --color-blue: #4294b0;
  --color-violet: #2b1763;
  --color-gray-light: #F7F9F9;

  --gradient: linear-gradient(to right, var(--color-green) 25%, var(--color-blue) 75%);

}

/* main */

html {
  font-size: 18px;
  color: black;
}

*:hover {
  -outline: 1px red solid;
}

body {
  font-family: var(--font-sans-serif);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans-serif);
  font-weight: 700;
}

.uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge {
  font-family: var(--font-sans-serif);
  font-weight: 700;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
  font-family: var(--font-sans-serif);
  font-weight: 400;
}

/* colors */

.uk-svg {
  fill: transparent !important;
}

.uk-light {
  color: white;
}

.uk-section-secondary:not(.uk-preserve-color) {
  color: white;
}

.uk-overlay-primary {
  color: white;
  background-color: rgba(0, 0, 0, .4);
}

.uk-background-muted {
  background-color: var(--color-gray-light);
}

/* button */

.uk-button-primary {
  background-color: var(--color-green) !important;
  background-image: var(--gradient);
  background-size: 200%;
  background-position: center;
  color: white !important;
  border-radius: 10px;
  text-transform: capitalize;
  font-weight: 500;
}

.uk-button-primary:hover {
  animation: anime 3s linear infinite;
  background-color: var(--color-blue) !important;
}

@keyframes anime {
  0% {
    background-position: 50% 50%;
  }
  33% {
    background-position: 100% 50%;
  }
  66% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 50% 50%;
  }
}

/* custom */

.dh-menu {
}

.dh-menu a {
  border-style: solid;
  border-color: transparent;
  border-width: 0px;
  padding: 5px 0;
  transition: all 0.3s ease;
  border-image: none;
}

.dh-menu a:hover {
  border-width: 5px 0px;
  border-image: var(--gradient) 1 0 100%;
  font-weight: 700;
}

.dh-intro {
}

.dh-intro .dh-image {
  border-radius: 50px;
}

.dh-solution {
}

.dh-solution .uk-overlay-primary {
  background-color: rgba(5, 15, 40, .6);
  border-radius: 60px;
  position: relative;
}

@media (max-width: 960px) {

  .dh-solution .uk-overlay-primary {
    background-color: transparent;
  }

}

@media (min-width: 1600px) {

  .dh-solution .uk-overlay-primary:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 140px;
    background: url(../images/solution-label.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 130px;
    left: -40px;
    z-index: 100;
  }

}

.dh-solution .uk-overlay-primary: {
  background-color: rgba(5, 15, 40, .6);
  border-radius: 60px;
}

.dh-solution .uk-background-primary {
  background-color: var(--color-violet);
  border-radius: 40px;
}

.dh-discuss {
}

.dh-discuss .uk-overlay-primary {
  background-color: rgba(65, 5, 80, .8);
  border-radius: 60px;
}

.dh-stages {
}

.dh-stages .uk-grid > div {
  position: relative;
}

.dh-stages .uk-grid > div div.uk-background-default {
  border-radius: 40px;
}

.dh-stages .uk-grid > div > div:after {
  content: "";
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 100;
}

@media (min-width: 1200px) {

  .dh-stages .uk-grid > div:nth-child(1) {
      order: 1;
  }

  .dh-stages .uk-grid > div:nth-child(2) {
      order: 4;
  }

  .dh-stages .uk-grid > div:nth-child(3) {
      order: 5;
  }

  .dh-stages .uk-grid > div:nth-child(4) {
      order: 2;
  }

  .dh-stages .uk-grid > div:nth-child(5) {
      order: 3;
  }

  .dh-stages .uk-grid > div:nth-child(6) {
      order: 6;
  }

  .dh-stages .uk-grid > div:nth-child(1) > div:after {
    width: 100%;
    height: 46px;
    background-image: url(../images/stages-arrow-down.svg);
    bottom: -41px;
    left: 0;
  }

  .dh-stages .uk-grid > div:nth-child(2) > div:after,
  .dh-stages .uk-grid > div:nth-child(4) > div:after {
    width: 46px;
    height: 100%;
    background-image: url(../images/stages-arrow-right.svg);
    right: -41px;
    top: 0;
  }

  .dh-stages .uk-grid > div:nth-child(3) > div:after {
    width: 100%;
    height: 46px;
    background-image: url(../images/stages-arrow-up.svg);
    top: -41px;
    left: 0;
  }

}

@media (min-width: 960px) and (max-width: 1200px) {


  .dh-stages .uk-grid > div:nth-child(1) {
      order: 1;
  }

  .dh-stages .uk-grid > div:nth-child(2) {
      order: 2;
  }

  .dh-stages .uk-grid > div:nth-child(3) {
      order: 4;
  }

  .dh-stages .uk-grid > div:nth-child(4) {
      order: 3;
  }

  .dh-stages .uk-grid > div:nth-child(5) {
      order: 5;
  }

  .dh-stages .uk-grid > div:nth-child(6) {
      order: 6;
  }


  .dh-stages .uk-grid > div:nth-child(1) > div:after {
    width: 34px;
    height: 100%;
    background-image: url(../images/stages-arrow-right.svg);
    right: -32px;
    top: 0;
  }

  .dh-stages .uk-grid > div:nth-child(2) > div:after,
  .dh-stages .uk-grid > div:nth-child(4) > div:after {
    width: 100%;
    height: 34px;
    background-image: url(../images/stages-arrow-down.svg);
    bottom: -32px;
    left: 0;
  }

  .dh-stages .uk-grid > div:nth-child(3) > div:after {
    width: 34px;
    height: 100%;
    background-image: url(../images/stages-arrow-left.svg);
    left: -32px;
    top: 0;
  }

}

@media (max-width: 960px) {

  .dh-stages .uk-grid > div > div:after {
    width: 100%;
    height: 34px;
    background-image: url(../images/stages-arrow-down.svg);
    bottom: -32px;
    left: 0;
  }

  .dh-stages .uk-grid > div:nth-child(5) > div:after,
  .dh-stages .uk-grid > div:nth-child(6) > div:after {
    content: none;
  }

}

/* footer */

footer {
}

footer .uk-container {
  padding-left: 0;
  padding-right: 0;
}

footer > div:nth-child(3) {
  border-top: 1px solid var(--color-blue);
}

footer .uk-grid-collapse > div:nth-child(2) {
  border-left: 1px solid var(--color-blue);
  border-right: 1px solid var(--color-blue);
}

@media (max-width: 960px) {

  footer .uk-grid-collapse > div:nth-child(2) {
    border-right: none;
  }

  footer .uk-grid-collapse > div:nth-child(3) {
    border-top: 1px solid var(--color-blue);
  }

}

@media (max-width: 640px) {

  footer .uk-grid > div:nth-child(2) {
    border-left: 0;
    border-right: 0;
  }

}

/* modal */

.uk-modal-dialog {
  border-radius: 30px;
}

/* form */

form .uk-input,
form .uk-textarea {
  border: 1px solid var(--color-blue);
  border-radius: 8px;
}

form .uk-input:focus,
form .uk-textarea:focus {
  border: 1px solid var(--color-green);
}

form .uk-checkbox:checked {
  background-color: var(--color-blue);
}

form .uk-checkbox:focus {
  border-color: var(--color-blue);
}