/* general style */
body {
  height: 100%;
}
section,
.footer-wrapper {
  padding-top: calc(var(--grid-gutter) * 2);
  padding-bottom: calc(var(--grid-gutter) * 2);
}
section {
  background: var(--bg-color);
  position: relative;
  scroll-margin: 70px;
  z-index: 1;
}

/* Header */
header {
  padding: calc(var(--grid-gutter) / 2) clamp(1.5rem, 3vmax, 5vw);
  position: sticky;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-color);
  box-shadow: 0 1rem 2rem var(--global-alpha-bg);
  transition: all 0.5s ease-in-out;
}
header.active {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.brand-logo {
  width: 250px;
  transition: all 0.5s ease-in-out;
}
header.active .brand-logo {
  width: 200px;
}
.nav-brand {
  line-height: 0;
}
.nav-menu {
  list-style: none;
  display: inline-flex;
  align-items: flex-start;
  margin: 0;
}
.nav-menu a {
  font-size: 1rem;
}
.nav-menu a.button {
  padding: 0.5rem 1rem;
}
.nav-menu a em {
  margin-right: 0.25rem;
}
.footer-menu a.active,
.nav-menu a.active {
  font-weight: 700;
}
a:hover,
.content-details-container a,
.contact-details-container a:hover,
.quick-links a:hover,
.info-links a:hover,
.social-links a:hover
.footer-container a:hover,
.footer-menu a.active {
  color: var(--color-primary);
  color: #9c3fc7;
}
a.dark-mode {
  padding: 0.5rem;
  margin-left: 0.5rem;
}

/* Footer */
.footer-wrapper {
  /* background-image: url(../images/polygon-pattern.png); */
  background-size: contain;
  background-repeat: no-repeat;
}
.footer-wrapper h4 {
  font-family: var(--font-family);
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
.footer-container {
  gap: 3vw;
}
.d-inline-block,
.content-details-wrapper,
.links-details-wrapper,
.contact-details-wrapper {
  display: inline-block;
  vertical-align: top;
}
.content-details-wrapper {
  width: clamp(calc(30% - var(--grid-gutter)), 100%, 300px);
}
.contact-details-wrapper {
  width: clamp(calc(25% - var(--grid-gutter)), 100%, 220px);
}
.quick-links,
.info-links,
.app-links,
.social-links {
  padding: 0;
  margin: 0;
  list-style: none;
}
.contact-details-container a,
.quick-links a,
.info-links a,
.social-links a {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bg-color);
  transition: all 0.25s;
}
.content-details-container,
.contact-details-container,
.quick-links,
.info-links {
  font-size: 0.9rem;
}
.contact-details-container {
  margin-bottom: 1rem;
  font-size: clamp(0.9rem, 0.75vw, 1rem);
}
.contact-details-container a.button {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
  font-size: 0.9rem;
  padding: 0.275rem 1rem;
  margin: 0;
}
.contact-details-container a.button:hover {
  background-color: var(--color-primary);
  color: var(--bg-color);
}
.contact-details-container .address {
  padding-top: 0.5rem;
}
.contact-details-container .address,
.contact-details-container .site,
.contact-details-container .email,
.contact-details-container .phone {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
}
.contact-details-container .address:before,
.contact-details-container .site:before,
.contact-details-container .email:before,
.contact-details-container .phone:before {
  content: "\f3c5";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  left: 0;
}
.contact-details-container .phone:before {
  content: "\f879";
}
.contact-details-container .email:before {
  content: '\f0e0';
}
.contact-details-container .site:before {
  content: '\f57c';
}
.contact-details-container .phone a {
  padding: 0;
}
.social-links,
.app-links {
  display: flex;
  margin-top: 0.75rem;
  gap: 0.5rem;
}
.social-links a {
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  line-height: 1;
  border: 1px solid var(--bg-color);
  border-radius: calc(var(--global-border-radius) / 2);
}
.social-links a:hover {
  background: var(--bg-color);
}
.copyright {
  background: var(--color-text);
  color: var(--bg-color);
  font-size: 0.85rem;
  padding: 0.75rem;
}
a.arrow {
  background: var(--color-primary);
  border: 1px solid var(--global-alpha-bg);
  color: var(--bg-color) !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s 0.2s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 99999;
}
a.arrow.active {
  transition: all 0.5s ease-in-out, opacity 0.5s 0.2s ease-in-out;
  transform: translateY(0);
  opacity: 1;
}

/* Hero Section */
.hero-section {
  min-height: 400px;
  height: clamp(50vmin, 500px, 100vh);
  position: relative;
  /* padding-top: calc(var(--grid-gutter) * 4); */
}
.sub-hero-section {
  max-height: 600px;
}
.hero-container {
  height: 100%;
}
.swiper {
  width: 100%;
  height: 100%;
  --size: 60px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-swiper .swiper-content,
.static-banner-swiper .swiper-content {
  max-width: 1200px;
  margin-top: 75px;
}
.hero-section h2,
.swiper-content h2 {
  color: var(--color-primary);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
  font-family: var(--font-family-header);
  /* text-transform: uppercase; */
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 400;
  margin: auto;
  text-shadow: 0 0 0 1rem var(--bg-secondary-color);
  letter-spacing: 1px;
  line-height: 1.2;
}
.hero-section h2 .strong,
.swiper-content h2 .strong {
  font-weight: 700;
}

/* Content Wrapper */

.content-wrapper .subtitle {
  font-size: 1.25rem;
  font-family: revert;
  font-weight: 400;
  letter-spacing: 1px;
}
.content-wrapper .title {
  color: var(--color-secondary);
  font-size: clamp(2rem, 2.75vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
}
.content-wrapper .desc {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}
.max-720 {
  max-width: 720px;
  margin: 0 auto 2rem;
}

/* Services */

.services-section {
  --serv-purple: #9c3fc7;
  --serv-yellow: #f6a22a;
  --serv-cyan: #08b3e3;
  --icon-size: 60px;
}
.services-section .card {
  border-bottom: 3px solid;
  border-top-right-radius: 3rem;
  border-top-right-radius: clamp(3rem, 6vmax, 90px);
  color: var(--color-text);
  min-height: 100%;
  padding: clamp(1.5rem, 3vmax, 40px);
  width: clamp(calc(33% - var(--grid-gutter)), 100%, 345px);
}
.services-section .card .services-title {
  /* color: var(--color-primary); */
  font-size: 1.25rem;
  margin: 0;
}
.services-section .row .card:nth-child(6n+1),
.services-section .row .col:nth-child(6n+1) .card {
  border-color: var(--serv-purple);
  box-shadow: 0 1rem 3rem -1rem var(--serv-purple);
}
.services-section .row .card:nth-child(6n+2),
  .services-section .row .col:nth-child(6n+2) .card {
  border-color: var(--serv-yellow);
  box-shadow: 0 1rem 3rem -1rem var(--serv-yellow);
}
.services-section .row .card:nth-child(6n+3),
.services-section .row .col:nth-child(6n+3) .card {
  border-color: var(--serv-cyan);
  box-shadow: 0 1rem 3rem -1rem var(--serv-cyan);
}
.services-section .row .card:nth-child(6n+1) .services-title,
.services-section .row .col:nth-child(6n+1) .card .services-title {
  color: var(--serv-purple);
}
.services-section .row .card:nth-child(6n+2) .services-title,
.services-section .row .col:nth-child(6n+2) .card .services-title {
  color: var(--serv-yellow);
}
.services-section .row .card:nth-child(6n+3) .services-title,
.services-section .row .col:nth-child(6n+3) .card .services-title {
  color: var(--serv-cyan);
}
.services-section .card-header {
  margin-bottom: 1.5rem;
  gap: 2rem;
}
.services-section .card-header svg.icon {
  fill: var(--color-accent);
  width: 100%; 
  height: 100%;
  object-fit: contain;
}
.services-section .card-header .services-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: .75rem;
}
.services-section .card-header .services-icon.services-icon-digital {
  background: var(--serv-purple);
}
.services-section .card-header .services-icon.services-icon-cloud {
  background: var(--serv-yellow);
}
.services-section .card-header .services-icon.services-icon-cyber {
  background: var(--serv-cyan);
}

/* Clients Section */

.clients-container {
  position: relative;
}
.clients-container .clients-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
  gap: 2rem;
  gap: calc(var(--grid-gutter) / 2);
}
.clients-container .clients-wrapper .clients-slide {
  padding: 1.5rem;
  background: var(--bg-color);
  box-shadow: 0 0 3rem rgba(0,0,0,.1);
  box-shadow: 0 1rem 2rem var(--global-alpha-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - (var(--grid-gutter) / 4));
}
.clients-container .clients-slide img {
  width: 150px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  mix-blend-mode: darken;
}
/*.clients-container .clients-swiper {
  background: none;
}
.clients-container .swiper-button-prev,
.clients-container .swiper-button-next {
  color: var(--bg-color);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-primary);
}
.clients-container .swiper-button-prev:after,
.clients-container .swiper-button-next:after {
  font-size: 1.25rem;
}
.clients-container .swiper-button-prev {
  left: -2vw;
}
.clients-container .swiper-button-next {
  right: -2vw;
}
.clients-container .swiper-slide {
  background: var(--bg-color);
  border-bottom: 5px solid transparent;
  box-sizing: border-box;
  transition: all 0.25s;
}
.clients-container .swiper-slide.swiper-slide-active {
  border-bottom-color: var(--color-primary);
}
.clients-container .swiper-client-pagination {
  position: relative;
  margin-top: 2rem;
  bottom: -40px;
}
.clients-container .swiper-client-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
} */

/* About Us */

.about-us-section {
  background-color: var(--color-primary);
  color: var(--bg-secondary-color);
}
.about-us-section .title {
  color: var(--bg-secondary-color);
}
.about-us-section .about-us-spacer-container {
  position: relative;
}
.about-us-section:before {
  content: '';
  background-image: url(/assets/images/about-us.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  inset: 0;
  max-height: 50%;
  z-index: -1;
}
.about-us-section .about-us-spacer {
  min-height: 50vmin;
}
.about-us-section .row {
  gap: 7vmax;
}

/* Contact Us */

.contact-us-section {
  margin-top: clamp(2rem, 5vw, 10rem);
  background: var(--color-secondary);
  color: var(--bg-color);
}
.contact-us-section .content-wrapper {
  display: inline-block;
}
.contact-us-section .title {
  color: var(--color-accent);
  margin: 0;
  /* max-width: 800px; */
}
.contact-button {
  margin: 0;
  padding: 1rem 3rem;
  border-radius: 0;
  background: var(--color-darkGrey);
  color: var(--bg-color);
  font-family: var(--font-family-header);
  text-transform: uppercase;
}

@media (min-width: 456px) and (max-width: 1005px) {
  .content-details-wrapper,
  .links-details-wrapper,
  .contact-details-wrapper {
    flex: 1 1 calc(50% - var(--grid-gutter));
  }
}

@media (min-width: 600px) {
header.move-up {
  /* transform: translateY(-150%); */
}
.about-us-section:before {
  max-height: unset;
  max-width: 50%;
}
.clients-container .clients-wrapper {
  gap: var(--grid-gutter);
}
.clients-container .clients-wrapper .clients-slide {
  width: unset;
}
.clients-container .clients-slide img {
  width: 200px;
}
}


/* Animations */

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  opacity: 0;
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}