.white-logo,
.black-logo,
.light-mode-container,
.dark-mode-container {
  display: none;
}

html[color-scheme="dark"] .white-logo,
html[color-scheme="dark"] .dark-mode-container {
  display: block;
}
  
html[color-scheme="light"] .black-logo,
html[color-scheme="light"] .light-mode-container {
  display: block;
}
  
html[color-scheme="dark"] .light-gray {
  background: #F2F2F2;
}
  
html[color-scheme="dark"] .dark-gray {
  background: #E8E8E8;
}
  
html[color-scheme="light"] .first-card-custom {
  background: #BFBFBF;
}
  
html[color-scheme="light"] .second-card-custom {
  background: #ADADAD;
}
  
html[color-scheme="light"] .third-card-custom {
  background: #969696;
}
  
html[color-scheme="dark"] .home-page-menu-link {
  color: #000;
}
  
html[color-scheme="light"] .home-page-menu-link {
  color: #fff;
}
  
html[color-scheme="light"] .first-card-custom h3,
html[color-scheme="light"] .second-card-custom h3,
html[color-scheme="light"] .third-card-custom h3,
html[color-scheme="light"] .first-card-custom p,
html[color-scheme="light"] .second-card-custom p,
html[color-scheme="light"] .third-card-custom p,
html[color-scheme="light"] .first-card-custom span,
html[color-scheme="light"] .second-card-custom span,
html[color-scheme="light"] .third-card-custom span,
html[color-scheme="light"] .mxd-promo__inner span {
  color: #000;
}
  
html[color-scheme="light"] .first-card-custom span,
html[color-scheme="light"] .second-card-custom span,
html[color-scheme="light"] .third-card-custom span {
  border-color: #000;
}
  
html[color-scheme="light"] .mxd-promo__inner {
  background-color: #BFBFBF;
}

.hero-01-image.image-01 {
  width: 600px;
}
  
.mxd-hero-06__video {
  border-radius: 0;
}
  
.mxd-hero-06__video video {
  border-radius: 0;
}

div#divider-image-1 {
  background-size: contain;
}
  
.hero-img-custom {
  width: 150px;
}
  
.mxd-pulse-custom {
  width: 300px;
}
  
.custom-marquee-sec p.marquee__text {
  font-size: 4rem;
}
  
.our-clients-section .marquee__item {
  width: 100px;
  height: 100px;
}
  
.our-clients-section p {
  font-size: 1rem !important;
}

.our-clients-section .marquee__link {
  /*background: #fff;*/
  padding: 5px;
}

.our-clients-section .marquee__link img {
  object-fit: fill !important;
  filter: gray;
  -webkit-filter: grayscale(100%);
}
  
.our-clients-section .marquee__link img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}
  
@media (min-width: 992px) {
  .hero-img-custom {
    width: 300px;
  }
  .mxd-pulse-custom {
    width: 450px;
  }
  .our-clients-section .marquee__item {
    width: 110px !important;
    height: 110px !important;
  }
  .our-clients-section p {
    font-size: 2rem !important;
  }
  .justify-custom-center {
    justify-content: end !important;
  }
}
  
[color-scheme=dark],
[color-scheme=light] {
  --accent: #1ca0cb;
}

.btn-color-custom,
.btn-additional {
  background-color: #1ca0cb;
  border-color: #1ca0cb;
}

.custom-addon-cards img:hover,
.our-clients-section img:hover,
.mxd-blog-preview img:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

span.count__percent {
  color: #1ca0cb;
}

.blog-preview-image-1 {
  background-image: url(../img/blog/preview/blog1.jpeg);
}
  
.blog-preview-image-2 {
  background-image: url(../img/blog/preview/blog2.jpeg);
}

.blog-preview-image-3 {
  background-image: url(../img/blog/preview/blog3.jpeg);
}

.mxd-promo__images .promo-image-1 {
  width: 250px !important;
  bottom: 17rem !important;
  right: 41rem;
}

.justify-custom-center {
  justify-content: start;
  margin: auto;
  align-items: center;
  display: flex;
}
  
.custom-infra-sec img {
  transform: unset !important;
}

.justify-custom-center .mxd-approach-list__image.anim-uni-in-up {
  width: 30rem;
  height: unset;
}

.mxd-blog-preview .img-blog-height {
  height: 400px !important;
}

.mxd-blog-preview .img-blog-height {
  max-height: 400px !important;
}

.title-left-align {
  justify-content: left !important;
}
  
@media only screen and (min-width: 1200px) {
  .hero-01-title {
    font-size: 4rem;
  }
}
  
@media only screen and (min-width: 1600px) {
  .hero-01-title {
    font-size: 5rem;
  }
}
  
@media only screen and (max-width: 768px) {
  .mxd-hero-01__top .hero-01-title__item {
    text-align: left;
    line-height: 5rem;
  }
  .mxd-hero-01__top.title-left-align {
    padding: 0 0 5rem 0;
  }
  .mxd-hero-01__data-wrap {
    padding: 4rem 0 0 0;
  }
  .custom-addon-cards h3 {
    font-size: 2.6rem;
  }
  p.t-small-mobile.t-opposite {
    font-size: 1.2rem;
  }
  .mxd-section-title__descr {
    padding-right: 0rem;
  }
}

@media only screen and (max-width: 768px) {
  .mxd-logo img {
    width: 160px !important;
  }
}

.background-wrapper {
  position: fixed;
  top: 9rem;
  left: 0;
  width: 100%;
  height: 100%;
  /*z-index: -1;*/
}

svg {
  width: 100%;
  height: 100%;
}

.line-base {
  stroke: #A2A2A2;
  stroke-width: 1.2;
  stroke-opacity: 0.15;
  fill: none;
}

.line-highlight {
  stroke: #1ca0cb;
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  opacity: 0.8;
  stroke-dasharray: 50 1200;
  /* glowing pulse length + gap */
  animation: moveHighlight 6s linear infinite;
}

.line-highlight:nth-of-type(2n) {
  animation-duration: 8s;
}

.line-highlight:nth-of-type(3n) {
  animation-duration: 10s;
}

@keyframes moveHighlight {
  to {
    stroke-dashoffset: -1200;
  }
}

.glow-dot {
  fill: #A2A2A2;
  fill-opacity: 0.06;
  filter: url(#blur);
}
/* Default grayscale effect */

.mxd-blog-preview__image {
  position: relative;
  filter: grayscale(100%);
  transition: filter 0.5s ease-in-out;
}
/* On hover, show color */

.mxd-blog-preview__item:hover .mxd-blog-preview__image {
  filter: grayscale(0%);
}

.custom-blog-card-sec .blog-card {
  margin-bottom: 20px;
}

.custom-blog-card-sec .card-media img {
  width: 100%;
  height: auto;
  border-radius: 40px;
  display: block;
}

.custom-blog-card-sec .card-tags {
  margin-top: 8px;
}

.custom-blog-card-sec .tag {
  display: inline-block;
  background: #eee;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 5px;
}

.custom-blog-card-sec .card-data a {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

@media only screen and (max-width: 768px) {
  .mob-hide {
    display: none;
  }
  .mxd-hero-06__video {
    padding: 0;
  }
  .mob-top-padding {
    padding-top: 4rem;
  }
  .padd-top-mob {
    padding-top: 2rem;
  }
  .padd-top-mob h1.hero-01-title {
    font-size: 3rem;
    gap: 0;
  }
}

#home-page #header img.black-logo {
    display: block;
}
#home-page #header img.white-logo {
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .start-section_01 {
      padding-top: 13rem;
  }
}

a.overlap-btn {
  border-color: #161616;
  color: #161616;
}

.mxd-logo img {
    width: 250px;
}


@media only screen and (max-width: 768px) {
  html[color-scheme="dark"] #home-page #header img.white-logo {
    display: block;
  }

  html[color-scheme="dark"] #home-page #header img.black-logo {
    display: none;
  }
}

/*#home-page #loader {
  display: block !important;
}*/

/* Scroll Down Container */
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    z-index: 5;
}

/* Mouse Shape */
.mouse {
    width: 26px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: relative;
}

/* Wheel Animation */
.wheel {
    width: 4px;
    height: 8px;
    background: #fff;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        top: 6px;
    }
    100% {
        opacity: 0;
        top: 18px;
    }
}

/* Arrow */
.arrow {
    margin-top: 10px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: arrowBounce 1.5s infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: rotate(45deg) translateY(0);
    }
    50% {
        transform: rotate(45deg) translateY(5px);
    }
}