@import "./fonts.css";

@theme {
  --color-electric-turquoise: #75fbeb;
  --color-romance: #f9f8fb;
  --color-tuna: #2b2e49;
  --color-mirage: #16182d;
  --color-green-white: #eae9eb;
  --color-ironside-grey: #666666;
  --color-black-eel: #444444;
  --color-rhino: #31355b;
  --color-gainsboro: #dddddd;
  --color-soft-peach: #f0eff2;
  --color-desert-storm: #f7f7f8;
  --color-fountain-blue: #5cc0b4;
  --color-light-grey: #d9d9d9;
  --color-snow-drift: #f9f9f9;
  --color-white-lilac: #f9f8fb;
}

:root {
  --animate-duration: 50s;
  --color-electric-turquoise: #75fbeb;
  --color-romance: #f9f8fb;
  --color-tuna: #2b2e49;
  --color-green-white: #eae9eb;
  --color-mirage: #16182d;
  --color-ironside-grey: #666666;
  --color-black-eel: #444444;
  --color-rhino: #31355b;
  --color-gainsboro: #dddddd;
  --color-soft-peach: #f0eff2;
  --color-desert-storm: #f7f7f8;
  --color-fountain-blue: #5cc0b4;
  --color-light-grey: #d9d9d9;
  --color-snow-drift: #f9f9f9;
  --color-white-lilac: #f9f8fb;
}

.animate__animated.animate__fadeInDown {
  --animate-duration: 2s;
}
.animate__animated.animate__zoomIn {
  --animate-duration: 2s;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Nunito Sans", "sans-serif";
}

.language {
  opacity: 0.5;
}
.language.selected-lang {
  opacity: 1;
}

.header:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #31355b;
  background: linear-gradient(
    90deg,
    rgba(49, 53, 91, 1) 0%,
    rgba(97, 108, 212, 1) 100%
  );
  opacity: 0;
  transition: opacity ease-in 0.3s;
}

.header-blue:after {
  opacity: 1;
  transition: opacity ease-in 0.3s;
}

.header-white {
  background-color: var(--color-white-lilac);
  .nav-list {
    .menu-item {
      color: var(--color-tuna) !important;
      svg {
        path {
          stroke: var(--color-tuna);
        }
      }
    }
  }
  .line {
    stroke: var(--color-tuna);
  }
}

header .nav-list .menu-item {
  display: flex;
  color: white;
}
header .nav-list .menu-item .nav-link {
  padding: 28px 35px 26px;
}
header .nav-list .menu-item .submenu li {
  display: flex;
  color: #31355b;
}
header .nav-list .menu-item .submenu li a {
  width: 100%;
  padding: 12px 18px;
}
header .nav-list .menu-item .submenu li:hover {
  background-color: var(--color-tuna);
  transition: background-color ease-in-out 0.2s;
}
header .nav-list .menu-item .submenu li:hover a {
  transition: color ease-in-out 0.2s;
  color: white;
}
.menu-item.current-menu-item {
  border-bottom: 3px solid #75fbeb;
}
header .nav-list .menu-item a:hover {
  color: var(--color-fountain-blue);
  transition: color ease-in-out 0.2s;
}
header .nav-list .menu-item a:hover svg path {
  stroke: var(--color-fountain-blue);
  transition: stroke ease-in-out 0.2s;
}
footer .footer-list li:hover {
  color: var(--color-fountain-blue);
  transition: color ease-in-out 0.2s;
}
footer .footer-social li:hover svg path {
  fill: var(--color-fountain-blue);
  transition: fill ease-in-out 0.2s;
}

.link-arrow {
  position: relative;
  &::after {
    content: "\25be";
    position: absolute;
    width: 10px;
    height: 10px;
    right: 15px;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
  }
}

.bg-mask {
  background: rgb(49, 53, 91);
  background: linear-gradient(
    90deg,
    rgba(49, 53, 91, 1) 0%,
    rgba(97, 108, 212, 1) 100%
  );
}

.api-card {
  background: rgba(240, 239, 242, 0.5) url("../assets/images/API-bg-img.webp")
    no-repeat bottom 20px right 35px;
}
.api-bg {
  backdrop-filter: blur(3px);
}
.partners-card {
  background: rgba(240, 239, 242, 0.5)
    url("../assets/images/partners-bg-img.webp") no-repeat bottom 19px right
    60px;
}
.partners-bg {
  backdrop-filter: blur(3px);
}
.wide-section {
  background: rgb(49, 53, 91);
  background: linear-gradient(
      90deg,
      rgba(49, 53, 91, 1) 0%,
      rgba(97, 108, 212, 0) 100%
    ),
    url("../assets/images/wide-bg-img.webp") no-repeat center;
  background-size: cover;
}

.wide-partners-provider-section {
  background: rgb(49, 53, 91);
  background: linear-gradient(
      90deg,
      rgba(49, 53, 91, 1) 0%,
      rgba(97, 108, 212, 0) 100%
    ),
    url("../assets/images/partners-wide-img.webp") no-repeat center;
  background-size: cover;
}

.wide-partners-referral-section {
  background: rgb(49, 53, 91);
  background: linear-gradient(
      90deg,
      rgba(49, 53, 91, 1) 0%,
      rgba(97, 108, 212, 0) 100%
    ),
    url("../assets/images/wide-bg-img.webp") no-repeat center;
  background-size: cover;
}

.wide-about-section {
  background: rgb(49, 53, 91);
  background: linear-gradient(
      90deg,
      rgba(49, 53, 91, 1) 0%,
      rgba(97, 108, 212, 0) 100%
    ),
    url("../assets/images/about-wide-img.webp") no-repeat center;
  background-size: cover;
}
.contact-form {
  background: rgb(49, 53, 91);
  background: linear-gradient(
    180deg,
    rgba(49, 53, 91, 1) 0%,
    rgba(97, 108, 212, 1) 100%
  );
}
.contact-form form label::after {
  position: absolute;
  content: "*";
  color: red;
  font-size: 18px;
}
.contact-form form label {
  font-size: 18px;
  font-weight: 900;
}
.contact-form form input,
textarea {
  border: 1px solid white;
  border-radius: 8px;
  padding-block: 10px;
  padding-left: 10px;
}
.contact-form form input:focus-visible,
textarea:focus-visible {
  outline: none;
}
.contact-form form .checkbox-btns label {
  font-size: 18px;
  font-weight: 600;
}
.contact-form form .checkbox-btns label::after {
  content: "";
}
.contact-form form .checkbox-btns input[type="checkbox"] {
  background: black;
}

.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  row-gap: 12px;
}
.wpcf7-list-item label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
  font-size: 18px;
  font-weight: 600 !important;
}
.wpcf7-list-item label::after {
  content: "" !important;
}
.wpcf7-list-item input[type="checkbox"] {
  display: none;
}

.wpcf7-list-item-label {
  position: relative;
  padding-left: 30px; /* prostor za krug */
}

.wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 50%;
  box-sizing: border-box;
}

.wpcf7-list-item
  input[type="checkbox"]:checked
  + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.blog-search {
  padding: 14px 16px 14px 15px;
  width: 100%;
  background-color: var(--color-desert-storm);
  border: 1px solid var(--color-gainsboro);
  border-radius: 8px;
}
.blog-search::placeholder {
  font-weight: 600;
}
.blog-search[type="search"]::-webkit-search-cancel-button,
.blog-search[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.single-post {
  max-width: 800px;
  margin-inline: auto;
}
.single-post h1 {
  font-size: 46px;
  font-weight: 900;
  color: var(--color-rhino);
  line-height: 50px;
  margin-top: 18px;
  margin-bottom: 30px;
}
.single-post img {
  margin: 33px 0;
}
.single-post span {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ironside-grey);
  font-weight: 800;
}
.single-post p {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ironside-grey);
  margin-bottom: 18px;
}
.single-post h2 {
  font-size: 36px;
  font-weight: 900;
  color: var(--color-rhino);
  line-height: 42px;
  margin: 25px 0;
}
.single-post h3 {
  font-size: 26px;
  font-weight: 900;
  color: var(--color-ironside-grey);
  line-height: 32px;
  margin: 25px 0;
}
.single-post ol {
  list-style: decimal;
  padding-left: 20px;
}
.single-post ul {
  list-style: disc;
  padding-left: 20px;
}
.single-post ul li,
.single-post ol li {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ironside-grey);
  margin-bottom: 18px;
}
.single-post .single-post-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ironside-grey);
}
.forms-tab {
  background-color: rgba(240, 239, 242, 0.5);
}
.forms-tab.active {
  background-color: var(--color-rhino);
}
.forms-tab.active p {
  color: white !important;
}
.form-content {
  display: none;
}
.form-content.active {
  display: block;
}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: white;
  stroke-width: 5.5;
  stroke-linecap: round;
}
.ham4 .top {
  stroke-dasharray: 40 121;
}
.ham4 .bottom {
  stroke-dasharray: 40 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}

.about-card {
  .about-text {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    font-weight: 600;
    color: var(--color-black-eel);
  }
}
.about-card {
  .about-text.show {
    max-height: 500px;
    opacity: 1;
  }
}

.arrow-icon {
  transition: transform 0.3s ease-in-out;
}

.arrow-icon.rotate {
  transform: rotate(-180deg);
}

.digital-assets-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 140px;
  align-items: center;
}

.digital-assets-card:nth-child(even) {
  flex-direction: row-reverse;
}

.waas-cards-wrapper {
  .card {
    background-color: var(--color-soft-peach);
    padding-inline: 70px;
    padding-block: 66px;
    border-radius: 20px;
    h2 {
      font-size: 46px;
      font-weight: 900;
      line-height: 50px;
      color: var(--color-rhino);
      margin-bottom: 30px;
    }
    p {
      font-size: 18px;
      font-weight: 600;
      color: var(--color-black-eel);
    }
    ul {
      font-size: 18px;
      font-weight: 600;
      color: var(--color-black-eel);
      margin-block: 42px;
      list-style-type: disc;
      padding-left: 20px;
    }
  }
}
.waas-cards-wrapper:has(.card:nth-child(3)) .card:nth-child(1),
.waas-cards-wrapper .card:only-child,
.waas-cards-wrapper:has(.card:last-child:nth-child(even):nth-child(n + 4))
  .card:last-child {
  grid-column: 1 / -1;
}

.turquoise-btn-hover {
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.turquoise-btn-hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-electric-turquoise);
  border-radius: 8px;
  z-index: -2;
}
.turquoise-btn-hover::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #69d8cb;
  border-radius: 8px;
  z-index: -1;
  transition: all 0.3s;
}
.turquoise-btn-hover:hover::before {
  width: 100%;
}

.news-article {
  p {
    font-size: 18px;
    font-weight: 600;
  }
}

.products-landing {
  h1 {
    font-size: 46px;
    font-weight: 900;
    line-height: 50px;
    color: var(--color-rhino);
    margin-bottom: 33px;
    max-width: 540px;
  }
  p {
    color: var(--color-black-eel);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 36px;
    max-width: 540px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    font-weight: 800;
    font-size: 18px;
    color: var(--color-rhino);
    margin-bottom: 36px;
  }
}

.home-services-card {
  h2 {
    font-size: 46px;
    font-weight: 900;
    line-height: 50px;
    color: white;
    margin-bottom: 33px;
    max-width: 540px;
  }
  p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 36px;
    color: white;
  }
}

.fade-section {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.fade-out {
  opacity: 0;
}
.fade-in {
  opacity: 1;
  animation: fadeInAnim 0.4s ease-in-out forwards;
}

@keyframes fadeInAnim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.blog-pagination {
  li {
    cursor: pointer;
    padding: 11px 15px;
    background-color: rgba(97, 108, 212, 0.2);
    border-radius: 6px;
    line-height: 18px;
  }
  li:first-child,
  li:last-child {
    background-color: rgba(97, 108, 212, 0.5);
  }
  .active-page {
    color: white;
    background-color: var(--color-rhino);
  }
}

.wpcf7-not-valid-tip {
  position: absolute;
}

@media screen and (max-width: 1280px) {
  header {
    .menu-item.current-menu-item {
      border-bottom: none;
      border-left: 3px solid var(--color-rhino);
    }
  }
  header .nav-list .menu-item {
    display: list-item;
    color: #31355b;
  }
  header .nav-list .menu-item .nav-link {
    line-height: 1;
    padding: 0px 9px;
  }
  header .nav-list .menu-item .submenu li {
    padding: 0px 35px;
  }
  header .nav-list .menu-item .submenu li a {
    padding: 8px 0px;
  }
  header .nav-list .menu-item .submenu li:hover {
    background-color: transparent;
  }
  header .nav-list .menu-item .submenu li:hover a {
    transition: color ease-in-out 0.2s;
    color: var(--color-fountain-blue);
  }
  .active-category svg {
    transform: rotate(-180deg);
  }
  .hide {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all ease-in-out 0.5s;
  }
  .show {
    max-height: 400px;
    visibility: visible;
    transition: all ease-in-out 0.5s;
  }
  .digital-assets-card {
    flex-direction: column !important;
    padding-top: 40px;
  }
  .products-landing {
    h1 {
      max-width: unset;
    }
    p {
      color: var(--color-black-eel);
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 36px;
      max-width: unset;
    }
  }

  .home-services-card {
    h2 {
      max-width: unset;
    }
    p {
      max-width: unset;
    }
  }
}

@media screen and (max-width: 768px) {
  .wide-section {
    background: rgb(49, 53, 91);
    background: linear-gradient(
      90deg,
      rgba(49, 53, 91, 1) 0%,
      rgba(97, 108, 212, 1) 100%
    );
  }
}

@media screen and (max-width: 640px) {
  .api-card {
    background: rgba(240, 239, 242, 0.5) url("/assets/images/API-bg-img.webp")
      no-repeat bottom 10px right 20px;
    background-size: 140px;
  }
  .partners-card {
    background: rgba(240, 239, 242, 0.5)
      url("/assets/images/partners-bg-img.webp") no-repeat bottom 19px right
      20px;
    background-size: 140px;
  }

  .single-post h1 {
    font-size: 27px;
    font-weight: 900;
    color: var(--color-rhino);
    line-height: 36px;
    margin-top: 11px;
    margin-bottom: 21px;
  }
  .single-post img {
    margin: 25px 0;
  }
  .single-post span {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ironside-grey);
    font-weight: 800;
  }
  .single-post p {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ironside-grey);
    margin-bottom: 18px;
  }
  .single-post h2 {
    font-size: 27px;
    font-weight: 900;
    color: var(--color-rhino);
    line-height: 42px;
    margin: 12px 0;
  }
  .single-post h3 {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-ironside-grey);
    line-height: 32px;
    margin: 13px 0;
  }
  .single-post ol {
    list-style: decimal;
    padding-left: 20px;
  }
  .single-post ul {
    list-style: disc;
    padding-left: 20px;
  }

  .single-post .single-post-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ironside-grey);
  }

  .waas-cards-wrapper {
    .card {
      padding-inline: 33px;
      padding-block: 20px;
      h2 {
        font-size: 27px;
        line-height: 36px;
        margin-bottom: 25px;
      }
      p {
        font-size: 18px;
      }
      ul {
        font-size: 18px;
        margin-block: 25px;
      }
    }
  }

  .products-landing {
    h1 {
      font-size: 39px;
      line-height: 46px;
    }
  }

  .home-services-card {
    h2 {
      font-size: 39px;
      line-height: 46px;
    }
  }
  .wpcf7-form-control {
    flex-wrap: nowrap;
    flex-direction: column;
  }
  .blog-pagination {
    li {
      padding: 11px 13px;
    }
  }
}

#glow1,
#glow2 {
  stroke: #29abe2;
  stroke-width: 1;
  fill: none;
  animation: strongGlow 4s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes strongGlow {
  0% {
    stroke-width: 1.5;
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    stroke-width: 2;
    opacity: 1;
    transform: scale(0.98);
  }
  100% {
    stroke-width: 1.5;
    opacity: 0.7;
    transform: scale(1);
  }
}

g.glow-group {
  animation: groupFade 4s ease-in-out infinite;
}

@keyframes groupFade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}